::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	opacity: 0.5;
}

::-webkit-scrollbar-track {
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	border-radius: 3px;
}

::-webkit-scrollbar-thumb {
	border-radius: 3px;
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);

}

:root{
	/*fonts*/
  	--main-h1-size: 3rem;
	--main-font-size:1rem;
  	--sm-h1-size:  2.5rem;

  	--main-font-family:  'Montserrat', tahoma, arial;/*'Exo 2', tahoma, arial;*/

  	/*sizing*/
	--header-height: 80px;

  	--aside-width: 80px;
	--aside-open-width:290px;
  	--logo-size: 60px;
	--border-radius-main:16px;
	--aside-image-logo:50px;

  	--menu-svg-size: 45px;

	--popup-dialog-width: 600px;
	--popup-dialog-sm: 320px;
	--popup-dialog-md: 600px;
	--popup-dialog-lg: 1000px;
	--popup-dialog-xl: 1200px;
	--popup-dialog-xxl: 1650px;

}

:focus {
	outline: -webkit-focus-ring-color auto 0px !important;
}

input:not([type="checkbox"]), select, textarea, button {
	font-family: var(--main-font-family);
	outline: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}


div, section, nav, header, footer, li, ul, article, blockquote {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

body, html {
	scroll-behavior: smooth;
	background: var(--body-background);
	padding: 0px;
	margin: 0px;
	font-family: var(--main-font-family);
	color: var(--main-color);
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	font-size: var(--main-font-size);
	height: 100vh;
}


a{
	color:var(--main-link-color);
	transition:color 0.5s ease-in-out;
}
a:hover{
	color:var(--hover-link-color);
}

#app{
	width: 100vw;
	height: 100vh;
	position: relative;
	display: flex;
}

aside#aside{
	background: var(--aside-background);
	background: var(--aside-webkit-gradient);
	background: var(--aside-gradient);
	width:var(--aside-width);
	height:100vh;
	color:var(--reverse-color);
	display: flex;
	flex-direction: column;
}

.aside-logo{
	width:100%;
	height:var(--aside-width);
	display: flex;
	align-items: center;
	justify-content: center;
}
.aside-logo-image{
	width:var(--aside-image-logo);
	height:var(--aside-image-logo);
}
.aside-logo img{
	width:100%;
	height:100%;	
	object-fit:contain;
	object-position: center center;
}

.aside-help{
	width:100%;
	height:var(--aside-width);
	display: flex;
	align-items: center;
	justify-content:center;
	position:relative;
	transition:all 0.3s ease;
}
.aside-help.active a{
	position: absolute;
	left:0px;
	top:0px;
	width:calc(100% + 5px);
	border-radius:0 5px 5px 0;
	height:100%;
	background:var(--card-background);
	box-shadow: 0px 0 5px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.aside-help.active svg[icon] path{
	fill:var(--main-link-color);
}

nav{
	height:100%;
	padding-top:30px;
}
nav ul{
	margin:10px 0;
	padding:0;
}
nav ul li{
	height:var(--aside-width);
	font-size:0.7rem;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	position:relative;
	transition:all 0.3s ease;
}
nav ul li:hover, .aside-help:hover{
	background:rgba(255, 255, 255, 0.15);
}
nav ul li.active a{
	position: absolute;
	left:0px;
	top:0px;
	width:calc(100% + 5px);
	border-radius:0 5px 5px 0;
	height:100%;
	background:var(--card-background);
	box-shadow: 0px 0 5px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
nav ul li svg[icon], .aside-help svg[icon]{
	width:45px;
	height:45px;
	transition:all 0.3s ease;
	cursor:pointer;
}
nav ul li svg[icon] path, .aside-help svg[icon] path{
	fill:var(--reverse-color);
}
nav ul li.active svg[icon] path{
	fill:var(--main-link-color);
}
nav ul li:hover svg[icon], .aside-help svg[icon]:hover{
	transform:scale(1.1);
}



#viewport{
	display: block;
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#app.login #viewport{
	background: var(--aside-background);
	background-size:cover;
	height:100vh;
}

main{
	height: 100%;
	overflow: auto;
	width: 100%;
	padding:20px 0;
}


section.content{
	padding:15px 0;
}

.main-title{
	font-size:2rem;
}

.basic-card{
	box-shadow: 0 4px 10px rgb(0 0 0 / 3%) !important;
    background: var(--card-background);
    border-radius: 16px;
	overflow:hidden;
}
    

.checkbox{
	padding-left: 1.5rem;
	position: relative;
	cursor: pointer;
	transition: all 0.4s ease-in-out;
}
.checkbox:after{
	width: 1rem;
	height: 1rem;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	content: '';
	border-radius: 3px;
	border: solid 1px #cccccc;
	transition: all 0.4s ease-in-out;
}
.checkbox:hover{
	color: var(--main-link-color);
}
.checkbox:hover:after{
	border-color: var(--main-link-color);
}
.checkbox.checked:after{
	border-color: var(--success-color);
	background: var(--success-color);
}
.checkbox svg[icon]{
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	transform: translateY(-50%);
	width: 1rem;
	height: 1rem;
	z-index: 2;
}
.checkbox svg[icon] path{
	color: var(--reverse-color);
}
.checkbox.checked svg[icon]{
	display: block;
}
.checkbox.checked svg[icon] path{
	fill: var(--reverse-color);
}


.dashed-link{
	cursor: pointer;
	color:var(--main-link-color);
	border-bottom: dashed 1px var(--main-link-color);
}
.dashed-link:hover{
	color:var(--hover-link-color);
	border-bottom: solid 1px var(--hover-link-color);
}

.app-tooltip{
	top:0px;
	left:0px;
	border-radius:8px;
	padding:8px;
	position:fixed;
	background:rgba(0, 0, 0, 0.7);
	color:#ffffff;
	font-size:0.8rem;
	display:none;
	transform: translate(20px, -50%);
	transition:all 0.3s ease;
	opacity:0;
	z-index:15;
}
.app-tooltip:before{
	position:absolute;
	content:'';
	top:50%;
	margin-top:-7px;
	left:-8px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 8px 7px 0;
	border-color: transparent rgba(0, 0, 0, 0.7) transparent transparent;
}
.app-tooltip.show{
	display:block;
	transform: translate(0, -50%);
	opacity:1;
}

.app-tooltip.show.bottom{
	max-width:200px;
	transform: translate(-50%, 0);
}
.app-tooltip.bottom:before{
	border-width: 0 8px 7px 8px;
	border-color: transparent  transparent rgba(0, 0, 0, 0.7) transparent;
	top:0px;
	left:50%;
	margin-left:-7px;
}

.btn-maincolor{
	background:var(--main-link-color);
	color:var(--reverse-color);
}
.btn-maincolor svg[icon] path{
	fill:var(--reverse-color);
}
.btn-maincolor:hover{
	background:var(--hover-link-color);
	color:var(--reverse-color);
}

.btn, input:not([type="checkbox"]), select{
	border-radius:8px!important;
}

.dropdown-item{
	cursor:pointer;
}
.dropdown-item:hover{
	color:var(--main-color);
}

.rotate-90{
	transform: rotate(90deg);
}
.rotate-180{
	transform: rotate(180deg);
}

.offcanvas-footer{
	padding:1rem;
}

.basic-app-tabs{
	margin:0;
	padding:0;
	display: flex;
}
.basic-app-tabs li{
	list-style: none;
	color:var(--main-link-color);
	padding:7px 12px;
	border-radius:8px;
	cursor:pointer;
	margin-right:5px;
}
.basic-app-tabs li:hover{
	color:var(--hover-link-color);
}
.basic-app-tabs li.active{
	background:var(--main-link-color);
	color:#ffffff;
}

.search-box{
	position:relative;
}
.search-box input{
	padding-right:2.3rem;
}
.search-box svg[icon]{
	width:1.5rem;
	height:1.5rem;
	position:absolute;
	right:0.4rem;
	top:50%;
	transform: translateY(-50%);
}
.search-box svg[icon] path{
	fill:var(--main-light-color);
}

.success-bg{
	background:var(--success-color);
	color:var(--reverse-color);
}
.btn.success-bg:hover{
	background:var(--bs-success);
	color:var(--reverse-color);
}
.main-bg{
	background:var(--main-link-color);
	color:var(--reverse-color);
}
.btn.main-bg:hover{
	background:var(--hover-link-color);
	color:var(--reverse-color);
}

.waiting-bg{
	background:var(--muted-waiting-color);
}

.flying-box .white-popup {
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgb(0 0 0 / 20%);
    background: var(--reverse-color);
}


.switchbox {
    padding-left: 2.2rem;
    position: relative;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
}
.switchbox:before {
    width: 1.8rem;
    position: absolute;
    height: 15px;
    border-radius: 20px;
    background: var(--muted-waiting-color);
    left: 0px;
    top: 50%;
    content: '';
    transform: translateY(-50%);
}
.switchbox.checked:before {
    background: var(--success-color);
}
.switchbox:after {
    width: 15px;
    content: '';
    position: absolute;
    border-radius: 20px;
    height: 15px;
    background: var(--reverse-color);
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0px 2px 4px rgb(0 0 0 / 20%);
    transition: left 0.2s ease;
}
.switchbox.checked:after {
    left: calc(1.8rem - 15px);
}

.form-control[readonly]{
	background:#ffffff;
}



.basic-svg[icon]{
	width:24px;
	height:24px;
}
.basic-svg[icon]-md{
	width:20px;
	height:20px;
}
.basic-svg[icon]-sm{
	width:18px;
	height:18px;
}
.basic-svg[icon]-xs{
	width:16px;
	height:16px;
}

svg[icon].disabled path{
	fill:#cccccc;
}

svg[icon].white-fill{
	fill:#ffffff;
}

svg[icon].danger{
	fill:var(--bs-danger);
}

.basic-svg[icon]-color path{
	fill:#000000;
}
.light-svg[icon]-color path{
	fill:#ffffff;
}

.cursor-pointer{
	cursor:pointer;
}

.bold{
	font-weight: bold;
}


/* LOADER */

.lock{
	position:fixed;
	width:100%;
	height:100%;
	left:0;
	top:0;
	z-index:10000;
	background:rgba(255,255,255,0.8);
}

#loader {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	height: 50px;
	width: 50px;
	margin: -25px 0 0 -25px;
	transform: rotate(180deg);
  }
  
  #loader span {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--main-link-color);
	-webkit-animation: dots4 1.7s infinite ease-in-out both;
			animation: dots4 1.7s infinite ease-in-out both;
	margin-right: 5px;
  }
  
  .dark #loader span {
	position: absolute;
	width: 10px;
	height: 10px;
	background: rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	background: var(--main-active-color);
	-webkit-animation: dots4 1.7s infinite ease-in-out both;
			animation: dots4 1.7s infinite ease-in-out both;
	margin-right: 5px;
  }
  
  #loader span:nth-child(1) {
	left: 0px;
	-webkit-animation-delay: 0.6s;
			animation-delay: 0.6s;
  }
  
  #loader span:nth-child(2) {
	left: 15px;
	-webkit-animation-delay: 0.4s;
			animation-delay: 0.4s;
  }
  
  #loader span:nth-child(3) {
	left: 30px;
	-webkit-animation-delay: 0.2s;
			animation-delay: 0.2s;
  }
  
  #loader span:nth-child(4) {
	left: 45px;
	-webkit-animation-delay: 0.1s;
			animation-delay: 0.1s;
  }
  
  @keyframes dots4 {
	0%, 80%, 100% {
	  -webkit-transform: scale(0);
			  transform: scale(0);
	  -webkit-transform: scale(0);
			  transform: scale(0);
	  opacity: 0;
	}
	40% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	  -webkit-transform: scale(1);
			  transform: scale(1);
	  opacity: 1;
	}
  }
  @-webkit-keyframes dots4 {
	0%, 80%, 100% {
	  -webkit-transform: scale(0);
			  transform: scale(0);
	  opacity: 0;
	}
	40% {
	  -webkit-transform: scale(1);
			  transform: scale(1);
	  opacity: 1;
	}
  }

/* /LOADER */


/* OFFCANVAS */
.visible{
	visibility:visible;
}
.offcanvas.max{
	width:calc(100% - 2rem);
}
.offcanvas.auto{
	width:auto;
}
.offcanvas.md{
	width:650px;
}
.offcanvas.lg{
	width:1000px;
}
.offcanvas-backdrop.show{
	opacity:1;
	backdrop-filter: blur(8px) brightness(60%);
    -webkit-backdrop-filter: blur(8px) brightness(60%);
	background: transparent;
}

@-moz-document url-prefix() {
	.offcanvas-backdrop.show{
		background:rgba(0, 0, 0, 0.5);
	}
}


/* /OFFCANVAS */

/* MODAL */

.modal{
	backdrop-filter: blur(8px) brightness(60%);
    -webkit-backdrop-filter: blur(8px) brightness(60%);
}

@-moz-document url-prefix() {
	.modal{
		background:rgba(0,0,0,0.6);
	}
}

.modal-content{
	box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.7);
	border:0;
	position: relative;
}
.modal-body .btn-close{
	position: absolute;
	right:1.1rem;
	top:1.1rem;
}

/* /MODAL */

/* FLYBOX */


.flying-box{
	position:fixed;
	z-index:1065;
}
.flying-box.fullsize{
	width:100%;
}
.flying-box.fullsize>*{
	width:100%;
}
.flying-box.reverse-direction>*{
	transform: translateX(-100%);
}
.flying-box-backdrop{
	left:0;
	top:0;
	width:100%;
	height:100%;
	position:fixed;
	z-index:1064;
}

/* /FLYBOX */


/* Main Input */

/* /Main Input */

@media (max-width: 520.98px) {
	:root{
		--aside-width:70px;
		--main-h1-size: 2rem;
		--main-font-size:0.9rem;
		--sm-h1-size:  1.7rem;
	}
	nav ul li svg[icon], .aside-help svg[icon]{
		width:50px;
	}
	header{
		padding:0 5px;
	}
	.card-body{
		padding:10px;
	}
	section.content{
		padding:0;
	}
	.basic-app-tabs li{
		font-size:0.8rem;
	}
}

@media (min-width: 521px) and (max-width: 758.98px) {
	:root{
		--aside-width:70px;
		--main-h1-size: 2rem;
		--main-font-size:0.9rem;
		--sm-h1-size:  1.7rem;
	}
	.container {
		max-width: 650px;
	}
}

@media (min-width: 759px) and (max-width: 999.98px) {
	:root{
		--main-h1-size: 2.2rem;
		--main-font-size:0.9rem;
		--sm-h1-size:  1.9rem;
	}
	.container {
		max-width: 900px;
	}
}

@media (min-width: 1000px) and (max-width: 1199.98px) {
	:root{
		--main-h1-size: 2.2rem;
		--main-font-size:0.9rem;
		--sm-h1-size:  1.9rem;
	}
	.container {
		max-width: 1000px;
	}
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
	:root{
		--main-h1-size: 2.5rem;
		--main-font-size:0.9rem;
		--sm-h1-size:  2rem;
	}
	.container {
		max-width: 1180px;
	}
}


@media (min-width: 1400px) and (max-width: 1599.98px) {
	.container {
		max-width: 1320px;
	}
}

@media (min-width: 1600px) and (max-width: 1899.98px){
	.container {
		max-width: 1450px;
	}
}

@media (min-width: 1900px) and (max-width: 2199.98px){
	.container {
		max-width: 1750px;
	}
}

@media (min-width: 2200px) {
	.container {
		max-width: 2100px;
	}
}