// Variables
@import 'animation';
@import 'variables';
@import 'position';
@import 'grid';
@import 'width';
@import 'text';
@import 'image';
@import 'form';
@import 'navigator';
@import 'margin';
@import 'padding';
@import 'border';
@import 'card';
@import 'chat';
@import 'tree';
@import 'login';
@import 'slider';
@import 'dropDown';
@import 'search';
@import 'complexMenu';
@import 'ddlMenu';

* {
	padding: 0;
	border: 0;
	margin: 0;
	outline: none;
	font-family: "FontFirst2", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.test {
	position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0, 76, 151, 0.34);
	  z-index: 1000;
	  overflow-y: auto;
	  display: none;
	  -webkit-transition: all 0.35s cubic-bezier(0, 1, 0.5, 1);
	  -moz-transition: all 0.35s cubic-bezier(0, 1, 0.5, 1);
	  -ms-transition: all 0.35s cubic-bezier(0, 1, 0.5, 1);
	  -o-transition: all 0.35s cubic-bezier(0, 1, 0.5, 1);
	  transition: all 0.35s cubic-bezier(0, 1, 0.5, 1); }
	  .app-popup-show {
		display: block;
		-webkit-transition: all 0.35s cubic-bezier(0, 1, 0.5, 1);
		-moz-transition: all 0.35s cubic-bezier(0, 1, 0.5, 1);
		-ms-transition: all 0.35s cubic-bezier(0, 1, 0.5, 1);
		-o-transition: all 0.35s cubic-bezier(0, 1, 0.5, 1);
		transition: all 0.35s cubic-bezier(0, 1, 0.5, 1); }
		.popup-content {
		  position: relative;
		  margin: auto;
		  width: 1100px; }
		  @media (max-width: 800px) {
			.popup-content {
			  width: calc(100% - 30px);
			  margin: 0 15px; } }
			  .popup-panel {
				position: relative;
				width: calc(100% - 30px);
				height: 40px;
				padding: 5px 15px;
				border-bottom: 1px rgba(0, 0, 0, 0.1) solid;
				color: #444444; }
				
html {
	@include greyScrollBar();
	background-color: #edf1f5;
	// overflow-x: hidden;
}

a {
	text-decoration: none;
}

.app-mobile {
	display: none !important;
	@media (max-width: $max-width) {
		display: block !important;
	}
}

.app-desktop {
	@media (max-width: $max-width) {
		display: none !important;
	}
}

.app-hide {
	display: none;
}

.app-show {
	display: block;
}

.app-main-helped {
	position: relative;
	width: calc(100% - 30px);
	// width: 100%;
	// width: calc(100vw - 355px) !important;
	// display: block;
	@media (max-width: $max-width) {
		width: calc(100% - 30px) !important;
	}
}

// layout
// $size-side: 280px;
// $size-side-min: 60px;

.app {
	position: relative;
	width: 100%;
	background-color: #ffffff;
	@include grid_2x(220px, 1fr);
	@include animate_2();
	@media (max-width: $max-width) {
		// @include grid_none();
		@include grid_2x(60px, 1fr);
	}

	&.app-resize {
		position: relative;
		top: 0;
		width: 100%;
		height: 100vh;
		@include grid_none();
		.app-slide {
			position: relative;
			width: 100%;
			height: 100vh;
			background-color: #000;
			overflow: hidden;
			.slide-content {
				position: relative;
				width: 100%;
				height: 100%;
				z-index: 0;
			}
		}
		.app-main {
			position: relative;
			width: 100%;
			// height: 100%;
			// .app-place {
			// 	position: absolute;
			// 	top: 0;
			// 	width: 100%;
			// 	height: 100%;
			// }
		}
	}


	// $widthBigIcon: 70px;
	&.app-side-big-icon {
		@include grid_2x(70px, 1fr);
		@media (max-width: $max-width) {
			@include grid_2x(70px, 1fr);
		}
		.app-slide {
			position: relative;
			width: 70px;
			height: 100vh;
			@media (max-width: $max-width) {
				width: 70px;
			}
			.slide-content {
				position: fixed;
				width: 70px;
				@media (max-width: $max-width) {
					width: 70px;
				}
			}
		}
		.app-panel {
			.panel-content {
				width: calc(100% - 90px);
				@media (max-width: $max-width) {
					width: calc(100% - 90px);
				}
			}
		}
		.app-place {
			width: 100%;
			left: 0px;
			@media (max-width: $max-width) {
				width: 100%;
			}
		}
		.app-menu {
			.content {
				.list {
					position: relative;
					width: calc(100% - 10px);
					// height: 50px;
					padding: 10px 5px;
					text-align: center;
					@include grid_none();
					.icn {
						// @include post_center(absolute);
						position: relative;
						width: 100%;
						font-size: 13px;
						text-align: center;
						@media (max-width: $max-width) {
							font-size: 13px;
						}
					}
					.ttl {
						display: none;
						// position: relative;
						// width: 100%;
						// font-size: 10px;
						// text-align: center;
						// line-height: 15px;
						// @media (max-width: $max-width) {
						// 	display: none;
						// }
					}
					.icn-right {
						display: none;
					}
				}
				.submenu {
					.submenu-sign {
						display: none;
					}
					.submenu-content {
						li {
							.list {
								width: calc(100%);
								padding: 7.5px 0;
							}
						}
					}
				}
			}
		}
		.app-space {
			position: relative;
			width: 100%;
			.list {
				position: relative;
				width: calc(100% - 10px);
				padding: 11px 5px;
				@include grid_2x(1fr, 1fr);
				.app-space-sign {
					text-align: center;
					@include column_n(2);
				}
				.app-space-text {
					display: none;
					@include column_n(1);
				}
				.app-space-icon {
					font-size: 12px;
					text-align: center;
					@include column_n(1);
				}
			}
		}
		.app-title {
			position: relative;
			width: 100%;
			@include grid_none();
			.col-1 {
				display: none;
			}
			.btn {
				position: absolute;
				top: 5px;
				left: 0;
				border-radius: 0;
				width: 100% !important;
				margin: auto;
			}
		}
		.app-place {
			left: 0px;
			@media (max-width: $max-width) {
				width: 100%;
			}
		}
		.complex {
			.complex-menu {
				@include grid_none();
				text-align: center;
				.complex-icon {
					text-align: center;
					font-size: 12pt;
				}
				.complex-title {
					display: none;
				}
				.complex-sign {
					display: none;
				}
			}
			.complex-list {
				left: 70px;
			}
		}
	}

	&.app-side-min {
		@include grid_2x(60px, 1fr);
		.app-slide {
			position: relative;
			width: 60px;
			height: 100vh;
			.slide-content {
				position: fixed;
				width: 60px;
			}
		}
		.app-panel {
			@media (max-width: $max-width) {
				width: calc(100% - 150px);
			}
			.panel-content {
				width: calc(100% - 80px);
				@media (max-width: $max-width) {
					width: calc(100% - 200px);
				}
			}
		}
		.app-place {
			width: 100%;
			left: 0px;
			@media (max-width: $max-width) {
				width: 100%;
			}
		}
		.app-menu {
			.content {
				.list {
					position: relative;
					width: 100%;
					height: 50px;
					padding: 0 0;
					text-align: center;
					.icn {
						@include post_center(absolute);
						font-size: 13.5px;
					}
					.ttl {
						display: none;
					}
					.icn-right {
						display: none;
					}
				}
				.submenu {
					.submenu-sign {
						display: none;
					}
					.submenu-content {
						li {
							.list {
								width: calc(100%);
								padding: 0 0;
							}
						}
					}
				}
			}
		}
		.app-space {
			display: none;
		}
		.app-title {
			@include grid_none();
			.col-1 {
				display: none;
			}
			.col-2 {
				text-align: center;
			}
			.btn {
				position: absolute;
				top: 5px;
				left: 0;
				border-radius: 0;
				width: 100% !important;
				margin: auto;
			}
		}
		.app-place {
			left: 0px;
			@media (max-width: $max-width) {
				width: 100%;
			}
		}
	}

	// layout

	.app-place {
		position: absolute;
		width: 100%;
		left: 0px;
		top: 0px;
		@include animate_2();
		@media (max-width: $max-width) {
			width: 100%;
			padding-top: 50px;
		}
	}

	.app-title {
		position: relative;
		width: 100%;
		height: 40px;
		padding: 5px 0;
		@include grid_2x(1fr, 40px);
		.col-1 {
			@include column_n(1);
		}
		.col-2 {
			@include column_n(2);
			text-align: right;
		}
	}

	.app-slide {
		position: relative;
		width: 100%;
		height: 100vh;
		@include column_n(1);
		@media (max-width: $max-width) {
			position: absolute;
			top: 0;
			left: 0;
		}

		&.app-slide-mobile {
			display: block;
			@media (max-width: $max-width) {
				display: none;
			}
		}

		.slide-content {
			position: fixed;
			top: 0;
			left: 0;
			width: 220px;
			height: 100vh;
			z-index: 600;
			@include animate_2();
		}

		.slide-list {
			position: relative;
			width: 100%;
			height: calc(100vh - 50px);
			overflow-y: auto;
			overflow-x: hidden;
		}

	}

	.app-main {
		position: relative;
		width: 100%;
		background-color: #ffffff;
		@include column_n(2);
		@include animate_2();
		.main-content {
			position: relative;
			// width: 100%;
			width: calc(100% - 10px);
			padding: 5px;
			padding-top: 55px;
			@media (max-width: $max-width) {
				width: 100%;
				padding: 0 0;
			}
		}
	}

	// app-space
	.app-space {
		position: relative;
		width: 100%;
		input {
			display: none;
			&:checked ~ .list {
				cursor: pointer;
				// background-color: rgba($color: #000000, $alpha: 0.1);
				color: rgba($color: #fff, $alpha: 0.8);
				.app-space-sign{
					&:after {
						opacity: 1;
						@include animate_1();
						-webkit-transform: rotate(45deg);
						-moz-transform: rotate(45deg);
							-ms-transform: rotate(45deg);
							-o-transform: rotate(45deg);
								transform: rotate(45deg);
					}
				}
			}
			&:checked ~ .app-space-content {
				@include animate_1();
				display: block;
				// background-color: rgba($color: #000000, $alpha: 0.1);
				// border-top: 0.5px rgba($color: #fff, $alpha: 0.84) solid;
				// border-bottom: 0.5px rgba($color: #fff, $alpha: 0.84) solid;
			}
		}
		.list {
			position: relative;
			width: calc(100% - 20px);
			padding: 11px 10px;
			font-size: 10px;
			font-weight: 600;
			color: rgba($color: #fff, $alpha: 0.7);
			word-spacing: 1px;
			letter-spacing: 1px;
			display: block;
			&:hover {
				cursor: pointer;
				color: rgba($color: #fff, $alpha: 0.8);
				background-color: rgba($color: #000000, $alpha: 0.1);
				@include animate_1();
				.app-space-sign {
					opacity: 1;
				}
			}

			@include grid_3x(25px, 1fr, 25px);
			.app-space-icon {
				text-align: left;
				@include column_n(1);
			}
			.app-space-text {
				// font-weight: 600;
				@include column_n(2);
			}
			.app-space-sign {
				text-align: right;
				@include column_n(3);
			}
		}
		.app-space-content {
			display: none;
			@include animate_1();
		}
		.app-space-sign {
			position: absolute;
			width: 15px;
			height: 15px;
			border-radius: 2px;
			right: 10px;
			top: 10px;
			opacity: 1;
			&:after {
				@include animate_1();
				content: "";
				position: absolute;
				right: 0;
				top: 5px;
				width: 5px;
				height: 5px;
				border: solid rgba($color: #fff, $alpha: 0.7);
				border-width: 0 1.5px 1.5px 0;
				-webkit-transform: rotate(-45deg);
				   -moz-transform: rotate(-45deg);
				    -ms-transform: rotate(-45deg);
				     -o-transform: rotate(-45deg);
				        transform: rotate(-45deg);
			}
		}
	}

	// menu
	.app-submenu {
		display: none;
	}
	.app-submenu-themes {
		background-color: rgba($color: #000000, $alpha: 0.1);
		overflow: hidden;
		border-radius: 10px;
		margin: 10px 0;
	}

	.app-menu {
		position: relative;
		width: 100%;
		a {
			display: block;
			&.active {
				@include animate_1();
				color: #fff;
				background-color: rgba($color: #000000, $alpha: 0.1);
				.content {
					.list {
						color: #fff;
					}
				}
			}
		}
		.content {
			position: relative;
			list-style: none;
			.list {
				position: relative;
				width: calc(100% - 30px);
				padding: 12px 10px 12px 20px;
				color: rgba($color: #fff, $alpha: 0.9);
				cursor: pointer;
				border-radius: 0;
				@include grid_3x(30px, 1fr, 30px);
				@include animate_2();
				&:hover {
					@include animate_1();
					color: #fff;
					background-color: rgba($color: #000000, $alpha: 0.1);
				}
				&:hover .app-submenu {
					display: block;
				}
				&:active {
					@include animate_1();
					color: #fff;
					background-color: rgba($color: #000000, $alpha: 0.1)
				}
				&.active {
					@include animate_1();
					color: #fff;
					background-color: rgba($color: #000000, $alpha: 0.1)
				}
				.new {
					position: relative;
					width: 20px;
					height: 20px;
					line-height: 20px;
					border-radius: 100%;
					text-align: center;
					font-size: 12px;
					color: #fff;
					background-color: $blue;
				}
				.icn {
					position: relative;
					width: 100%;
					padding: 3px 0;
					font-size: 10px;
				}
				.ttl {
					position: relative;
					width: 100%;
					line-height: 20px;
					font-size: 12px;
					font-weight: 500;
					font-family: "FontFirstBold", "Helvetica Neue", Helvetica, Arial, sans-serif;
					letter-spacing: 0.5px;
				}
			}

			.submenu {
				input {
					display: none;
					&:checked ~ .list {
						background-color: rgba($color: #000000, $alpha: 0.1);
						.submenu-sign:after {
							@include animate_1();
							-webkit-transform: rotate(45deg);
							   -moz-transform: rotate(45deg);
							    -ms-transform: rotate(45deg);
							     -o-transform: rotate(45deg);
							        transform: rotate(45deg);
						}
					}
					&:checked ~ .submenu-content {
						@include animate_1();
						display: block;
					}
				}
				.submenu-sign {
					position: relative;
					width: 22px;
					height: 22px;
					border-radius: 3px;
					&:after {
						@include animate_1();
						content: "";
						position: absolute;
						right: 0;
						top: 5px;
						width: 5px;
						height: 5px;
						border: solid rgba($color: #fff, $alpha: 0.7);
						border-width: 0 2px 2px 0;
						-webkit-transform: rotate(-45deg);
						   -moz-transform: rotate(-45deg);
						    -ms-transform: rotate(-45deg);
						     -o-transform: rotate(-45deg);
						        transform: rotate(-45deg);
					}
				}
				.submenu-content {
					position: relative;
					width: 100%;
					background-color: rgba($color: #000000, $alpha: 0.1);
					display: none;
					@include animate_1();
					li {
						.list {
							width: calc(100% - 30px);
							padding: 12px 15px;
							.icn {
								font-size: 9px;
							}
						}
					}
				}
			}

		}

	}

	.app-panel {
		position: relative;
		width: 100%;
		// @media (max-width: $max-width) {
		// 	height: 80px;
		// }
		.panel-content {
			position: fixed;
			top: 0;
			right: 0;
			width: calc(calc(100% - 90px) - 150px);
			height: 40px;
			padding: 5px 10px;
			background-color: #fff;
			border-bottom: $border1;
			z-index: 500;
			@include grid_2x(350px, 1fr);
			@include animate_2();
			// @include grid_gap(20px);
			@media (max-width: $max-width) {
				position: fixed;
				width: calc(100% - 80px);
				right: 0;
				@include grid_2x(50px, 1fr);
			}
			.col-1 {
				position: relative;
				@include column_n(1);
			}
			.col-2 {
				position: relative;
				@include column_n(2);
				text-align: right;
			}
		}
		.panel-button {
			position: relative;
			display: inline-block;
			vertical-align: top;
		}
	}

	.app-footer {
		position: relative;
		width: calc(100% - 60px);
		padding: 15px 30px;
		background-color: #fff;
		border-top: $border;
	}

	.app-small-profile {
		position: relative;
		height: 40px;
		padding: 0 5px;
		margin-left: 15px;
		// border-left: $border;
		// border-right: $border;
		border-radius: 40px;
		cursor: pointer;
		@include grid_2x(30px, 1fr);
		@include grid_gap(10px);
		&:hover {
			@include animate_1();
			background-color: #f5f5f5;
		}
		&.active {
			background-color: #f5f5f5;
		}
		.asp-col-1 {
			position: relative;
			@include column_n(1);
		}
		.asp-col-2 {
			position: relative;
			text-align: left;
			@include column_n(2);
		}
		.image {
			@include post_top(relative);
		}
		.ttl {
			@include post_top(relative);
		}
	}

	// app form
	.app-popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba($color: $blue, $alpha: 0.34);
		z-index: 1000;
		overflow-y: auto;
		display: none;
		@include transparantScrollBar();
		@include animate_2();
		&.app-popup-show {
			display: block;
			@include animate_2();
		}
		&:not(:first-child) {
			@include animate_2();
		}
		.popup-panel {
			position: relative;
			width: calc(100% - 30px);
			height: 40px;
			padding: 5px 15px;
			border-bottom: $border1;
			color: $txt-84-color;
		}
		.popup-title {
			@include post_center(relative);
			color: $txt-84-color;
			font-weight: 600;
			font-size: 16px;
		}
		.popup-content {
			position: relative;
			margin: auto;
			width: 1100px;
			@media (max-width: $max-width) {
				width: calc(100% - 30px);
				margin: 0 15px;
			}
		}
		.popup-content-mikro {
			position: relative;
			margin: auto;
			width: 450px;
			@media (max-width: $max-width) {
				width: calc(100% - 30px);
				margin: 0 15px;
			}
		}
		.popup-content-small {
			position: relative;
			margin: auto;
			width: 700px;
			@media (max-width: $max-width) {
				width: calc(100% - 30px);
				margin: 0 15px;
			}
		}
		.popup-content-big {
			position: relative;
			margin: auto;
			width: calc(100% - 60px);
			@media (max-width: $max-width) {
				width: calc(100% - 30px);
				margin: 0 15px;
			}
		}
		.popup-middle {
			position: relative;
			width: 100%;
			width: calc(100% - 30px);
			height: calc(100vh - 200px);
			padding: 0 15px;
			overflow-y: auto;
			@include transparantScrollBar();
		}
		.popup-content-grid {
			position: relative;
			width: 100%;
			@include grid_2x(230px, 1fr);
			.popup-col-1 {
				@include column_n(1);
			}
			.popup-col-2 {
				@include column_n(2);
			}
		}
		.popup-scroll {
			position: relative;
			width: 100%;
			max-height: calc(100vh - 130px);
			overflow-y: auto;
		}
		.popup-alert {
			@include post_center(absolute);
			overflow: hidden;
			width: 350px;
		}
	}

	.app-menu-popup {
		position: absolute;
		right: 0;
		width: 350px;
		background-color: #fff;
		border: $border;
		border-radius: 10px;
		overflow: hidden;
		z-index: 100 !important;
		box-shadow: $shadow;
		@media (max-width: $max-width) {
			width: calc(100% - 30px);
		}
		&.app-menu-popup-hide {
			display: none;
		}
		ul {
			position: relative;
			width: 100%;
			li {
				position: relative;
				width: calc(100% - 30px);
				padding: 15px;
				list-style-type: none;
				text-align: left;
				font-size: 10pt;
				color: $txt-84-color;
				cursor: pointer;
				font-family: "FontFirstBold", "Helvetica Neue", Helvetica, Arial, sans-serif;
				&:hover {
					background-color: #f5f5f5;
				}
				.icn {
					width: 25px;
				}
			}
		}
		.content {
			position: relative;
			width: 100%;
			max-height: 300px;
			overflow-y: auto;
		}
	}

	// app side page
	$hgAppPage: calc(100vh - 50px);
	$hgAppPage2: calc(100vh - 110px);
	.app-resize-page {
		position: relative;
		width: 100%;
		height: $hgAppPage;
		overflow: hidden;
		.a-s-p-main {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			@include animate_2();
		}
		.a-s-p-side {
			position: absolute;
			top: 0;
			right: 0;
			width: 100%;
			height: 100%;
			// background-color: $blue;
			// display: inline-block;
			// vertical-align: top;
			@include animate_2();
			.a-s-p-top {
				width: calc(100% - 10px);
				height: 45px;
				overflow: hidden;
				padding: 7.5px 5px;
				.txt-site {
					@include post_top(absolute);
					padding-top: 5px;
					left: 15px;
				}
			}
		}
		.a-s-p-top {
			position: relative;
			width: 100%;
			height: 45px;
			overflow: hidden;
			padding: 7.5px 0;
		}
		.a-s-p-mid {
			position: relative;
			width: 100%;
			height: $hgAppPage2;
			overflow-y: auto;
			overflow-x: hidden;
			@include transparantScrollBar();
			&.no-header {
				height: calc(100vh - 50px);
			}
		}
		.a-s-p-pad {
			position: relative;
			width: calc(100% - 15px);
			padding: 0 7.5px;
		}
	}

	.app-side-page {
		position: relative;
		width: 100%;
		height: $hgAppPage;
		overflow: hidden;
		.a-s-p-main {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			@include animate_2();
		}
		.a-s-p-side {
			position: absolute;
			top: 0;
			right: -450px;
			width: 450px;
			height: 100%;
			// background-color: $blue;
			// display: inline-block;
			// vertical-align: top;
			@include animate_2();
		}
	
		&.op-app-side {
			// @include grid_2x(1fr, 300px);
			.a-s-p-main {
				width: calc(100% - 450px);
				@include animate_2();
			}
			.a-s-p-side {
				right: 0;
				@include animate_2();
			}
		}

		.a-s-p-place {
			position: relative;
			width: 100%;
			background-color: #fff;
			// display: none;
			// @include animate_2();
			&.a-s-p-content {
				display: none;
				&.active {
					display: block;
				}
			}
		}

		.a-s-p-top {
			position: relative;
			width: 100%;
			height: 45px;
			overflow: hidden;
			padding: 7.5px 0;
		}
		.a-s-p-mid {
			position: relative;
			// padding: 0 15px;
			// width: calc(100% - 30px);
			width: 100%;
			height: $hgAppPage2;
			overflow-y: auto;
			overflow-x: hidden;
			@include transparantScrollBar();
			&.no-header {
				height: calc(100vh - 50px);
			}
		}
		.a-s-p-pad {
			position: relative;
			width: calc(100% - 15px);
			padding: 0 7.5px;
		}
	}

	.app-open-close {
		position: relative;
		width: 100%;
		.app-open-close-input {
			display: none;
			&:checked ~ .app-open-close-content {
				display: none;
				@include animate_1();
			}
			&:checked ~ .grid {
				.col-2 {
					label {
						.app-open-close-icon {
							&:after {
								@include animate_1();
								top: 12px;
								-webkit-transform: rotate(45deg);
								   -moz-transform: rotate(45deg);
									-ms-transform: rotate(45deg);
									 -o-transform: rotate(45deg);
										transform: rotate(45deg);
							}
						}
					}
				}
			}
		}
		.app-open-close-icon {
			position: relative;
			width: 35px;
			height: 35px;
			line-height: 35px;
			border: 1px rgba($color: #000000, $alpha: 0.1) solid;
			cursor: pointer;
			border-radius: 35px;
			display: inline-block;
			vertical-align: top;
			&:hover {
				border: 1px rgba($color: #000000, $alpha: 0.2) solid;
			}
			&:after {
				@include animate_1();
				content: "";
				position: absolute;
				right: 13px;
				top: 15px;
				width: 6px;
				height: 6px;
				border: solid rgba($color: #000, $alpha: 0.7);
				border-width: 0 2px 2px 0;
				-webkit-transform: rotate(-135deg);
				   -moz-transform: rotate(-135deg);
					-ms-transform: rotate(-135deg);
					 -o-transform: rotate(-135deg);
						transform: rotate(-135deg);
			}
		}
		.app-open-close-content {
			display: block;
			@include animate_1();
		}
	}
	

	.app-pointer {
		cursor: pointer;
	}


	// kanban
	$hgKanbanBoard: calc(100vh - 200px);
	$hgKanbanCard: calc(100vh - 260px);

	.app-kanban {
		position: relative;
		width: 100%;
		padding: 0 0;
		display: flex;
		// align-items: center;
		// flex-gap: 10px;
		overflow-x: auto;
		.a-k-board {
			position: relative;
			width: 300px;
			max-height: $hgKanbanBoard;
			margin: 0 5px;
			border-radius: 7.5px;
			overflow: hidden;
			border: $border;
			// box-shadow: $shadow;
			flex: 0 0 auto;
			.a-k-b-top {
				position: relative;
				width: calc(100% - 20px);
				height: 35px;
				line-height: 35px;
				padding: 2.5px 10px;
				background-color: #fff;
				color: $txt-84-color;
				font-size: 13px;
				font-weight: 500;
				border-bottom: $border;
			}
			.a-k-b-mid {
				position: relative;
				width: calc(100% - 20px);
				max-height: $hgKanbanCard;
				padding: 0 10px;
				background-color: #fff;
				overflow-y: auto;
			}
			.a-k-b-bot {
				position: relative;
				width: calc(100% - 20px);
				height: 35px;
				padding: 2.5px 10px;
				border-top: $border;
			}
		}
		.a-k-card {
			position: relative;
			width: calc(100% - 20px);
			padding: 10px;
			margin: 10px 0;
			border-radius: 5px;
			overflow: hidden;
			// border: $border;
			background-color: #fff;
			color: $txt-84-color;
			font-size: 11pt;
		}
	}

}

.time_picker_container {
	// z-index: 100;
	.react_times_button {
		box-shadow: 0 0 0 0 rgba(0, 0, 0, .15) !important;
		-moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, .15) !important;
		-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, .15) !important;
		border-radius: 5px;
		border: $border1;
		overflow: hidden;
		&.time_picker_preview {
			height: 40px;
			&.disabled {
				background-color: #E6E6E6 !important;
			}
		}
		.wrapper {
			.preview_container {
				height: 40px;
				line-height: 40px;
				svg {
					top: 9px;
					width: 20px;
					height: 20px;
				}
			}
		}
	}
	.outside_container {
		&.active {
			.modal_container {
				@include animate_1();
				display: block;
				z-index: 1000 !important;
			}
		}
		.modal_container {
			@include animate_1();
			display: none;
			min-width: 300px !important;
			width: 100% !important;
			margin-bottom: 20px;
			-webkit-transform: scale(1) translateY(0px) !important;
			   -moz-transform: scale(1) translateY(0px) !important;
			    -ms-transform: scale(1) translateY(0px) !important;
			     -o-transform: scale(1) translateY(0px) !important;
			        transform: scale(1) translateY(0px) !important;
			.time_picker_modal_header {
				background-color: $blue !important;
			}
			.time_picker_modal_footer {
				background-color: $blue !important;
			}
			.picker_pointer {
				background-color: $blue !important;
			}
			.picker_center {
				background-color: $blue !important;
			}
			.pointer_drag {
				background-color: $blue !important;
			}
		}
	}
	.picker_container {
		margin: auto;
		margin-top: 0;
		margin-bottom: 20px;
		z-index: 100;
	}
	.time_picker_preview {
		&.disabled {
			background-color: #E6E6E6 !important;
		}
	}
}