@charset "utf-8";
/*
* Themes Styles
*/

* {
	scroll-behavior: smooth;
}



html, body {
	margin:0;
	padding:0;
	height:100%;
	width: 100%;
	overflow:hidden;
	font-size:1em;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;
}

#login_div {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--dark);
	z-index: 1101;
}

#page_content {
    /* perspective: 1500px;  */
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
}
@media (max-width: 768px){
	#module_home > div.content::-webkit-scrollbar { width: 0 !important }
	#module_home > div.content{ overflow: -moz-scrollbars-none;  -ms-overflow-style: none; }
}


footer{display:block; height: 40px; min-height: 40px; min-height: 40px; border-top: 1px solid var(--bs-secondary-bg);} 
@media (max-width:768px){
	footer li {height: 100%; font-size: 120%;}
}


#interface{
	height: 100%;
	overflow: hidden;
	width: 100%;
}



.ltr .ps-0{padding-left: 0!important;}
.rtl .ps-0{padding-right: 0!important;}

.ltr .pe-0{padding-right: 0!important;}
.rtl .pe-0{padding-left: 0!important;}

.ltr .ps-1{padding-left: 0.25rem!important;}
.rtl .ps-1{padding-right: 0.25rem!important;}

.ltr .pe-1{padding-right: 0.25rem!important;}
.rtl .pe-1{padding-left: 0.25rem!important;}

.ltr .ps-2{padding-left: 0.5rem!important;}
.rtl .ps-2{padding-right: 0.5rem!important;}

.ltr .pe-2{padding-right: 0.5rem!important;}
.rtl .pe-2{padding-left: 0.5rem!important;}

.ltr .ps-3{padding-left: 1rem!important;}
.rtl .ps-3{padding-right: 1rem!important;}

.ltr .pe-3{padding-right: 1rem!important;}
.rtl .pe-3{padding-left: 1rem!important;}

.ltr .ps-5{padding-left: 3rem!important;}
.rtl .ps-5{padding-right: 3rem!important;}

.ltr .pe-5{padding-right: 3rem!important;}
.rtl .pe-5{padding-left: 3rem!important;}

.ltr .brl-0 {
	border-top-left-radius: 0!important;
	border-bottom-left-radius: 0!important;
}
.rtl .brl-0 {
	border-top-right-radius: 0!important;
	border-bottom-right-radius: 0!important;
}

.ltr .brr-0 {
	border-top-right-radius: 0!important;
	border-bottom-right-radius: 0!important;
}
.rtl .brr-0 {
	border-top-left-radius: 0!important;
	border-bottom-left-radius: 0!important;
}

/************************ AR hacks ***********************/
body.rtl{direction: rtl;}

body.rtl .form-floating label { right:0; left: auto;}
/* body.rtl input { background-position:left calc(0.375em + 0.1875rem) center} */



body.rtl .nav {padding-right: 0}

.form-group .input-group * {border-radius: 0 !important;}
body .form-group.ltr .input-group .input-group-prepend :first-child:not(.brl-0) {border-top-left-radius: var(--bs-border-radius-sm) !important; border-bottom-left-radius: var(--bs-border-radius-sm) !important;}
body .form-group.ltr .input-group .input-group-append :last-child:not(.brr-0) {border-top-right-radius: var(--bs-border-radius-sm) !important; border-bottom-right-radius: var(--bs-border-radius-sm) !important;}

body .form-group.rtl .input-group .input-group-prepend :first-child:not(.brl-0) {border-top-right-radius: var(--bs-border-radius-sm) !important; border-bottom-right-radius: var(--bs-border-radius-sm) !important;}
body .form-group.rtl.rtl .input-group .input-group-append :last-child:not(.brr-0) {border-top-left-radius: var(--bs-border-radius-sm) !important; border-bottom-left-radius: var(--bs-border-radius-sm) !important;}

body .form-group.ltr .input-group input:last-child:not(.brr-0), body .form-group.ltr .input-group select:last-child:not(.brr-0) {
	border-top-right-radius: var(--bs-border-radius-sm) !important; border-bottom-right-radius: var(--bs-border-radius-sm) !important;
}
body .form-group.ltr .input-group input:first-child:not(.brl-0), body .form-group.ltr .input-group select:first-child:not(.brl-0)  {
	border-top-left-radius: var(--bs-border-radius-sm) !important; border-bottom-left-radius: var(--bs-border-radius-sm) !important;
}
body .form-group.rtl .input-group input:last-child:not(.brr-0), body .form-group.rtl .input-group select:last-child:not(.brr-0) {
	border-top-left-radius: var(--bs-border-radius-sm) !important; border-bottom-left-radius: var(--bs-border-radius-sm) !important;
}
body .form-group.rtl .input-group input:first-child:not(.brl-0), body .form-group.rtl .input-group select:first-child:not(.brl-0)  {
	border-top-right-radius: var(--bs-border-radius-sm) !important; border-bottom-right-radius: var(--bs-border-radius-sm) !important;
}

/* 
.form-group.rtl .input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle),
.form-group.rtl .input-group>.input-group-append:last-child>.input-group-text:not(:last-child),
.form-group.rtl .input-group>.input-group-append:not(:last-child)>.btn, 
.form-group.rtl .input-group>.input-group-append:not(:last-child)>.input-group-text, 
.form-group.rtl .input-group>.input-group-prepend>.btn, 
.form-group.rtl .input-group>.input-group-prepend>.input-group-text,
.form-group.rtl .input-group>.form-control:not(:last-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}
.form-group.rtl .input-group>.custom-select:not(:first-child), 
.form-group.rtl .input-group>.form-control:not(:first-child),
.form-group.rtl .input-group>.input-group-append>.btn:first-child,
.form-group.rtl .input-group>.input-group-append>.input-group-text   {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.form-group.rtl .input-group>.form-control:not(:first-child):not(:last-child){
	border-radius: 0px;
} */



body.rtl .address_entry select, body.rtl .email_entry select, body.rtl .phone_entry select{
	border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: .25rem !important;
    border-bottom-right-radius: .25rem !important;
}

body.rtl .address_entry input, body.rtl .email_entry input, body.rtl .phone_entry input,
body.rtl .address_entry .input-group-append .btn:not(:last-child), 
body.rtl .email_entry .input-group-append .btn:not(:last-child), 
body.rtl .phone_entry .input-group-append .btn:not(:last-child){
	border-radius: 0 !important;
}
body.rtl .address_entry .input-group-append .btn:last-child, 
body.rtl .email_entry .input-group-append .btn:last-child, 
body.rtl .phone_entry .input-group-append .btn:last-child{
	border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

fieldset.tablefieldset { height: 300px }
fieldset { 
	background-color: var(--bs-light-bg-subtle); 
	border: 1px solid var(--bs-border-color); 
	border-radius: var(--bs-border-radius);
	padding: 0 0.5rem 0.5rem;
    margin-bottom: 1rem;
}
legend {
	padding: 0 0.5rem; 
	float: none; 
	width: auto; 
	background-color: var(--bs-body-bg); 
	border: 1px solid var(--bs-border-color); 
	border-radius: var(--bs-border-radius);
}


body.rtl .toolbox .btn{
	border-radius: 0 !important;
}

body.rtl .toolbox > .btn:first-child{
	border-top-right-radius: .25rem !important;
    border-bottom-right-radius: .25rem !important;
}

body.rtl .toolbox .btn:last-child{
	border-top-left-radius: .25rem !important;
    border-bottom-left-radius: .25rem !important;
}

body.rtl .form-select {
	background-position: left 0.75rem center;
	padding: 0.25rem 0.75rem 0.25rem 2.25rem
}
.input-group-text{font-size: 0.975 !important;}

/*********** Global search ***********************/

form.global_search_form > div , form.openGlobalSearch > div {position: relative;}
form.global_search_form .label, form.openGlobalSearch .label{ position: absolute; z-index: 1; left: 15px; pointer-events: none;}
form.global_search_form input , form.openGlobalSearch input {background-color: transparent !important;}
body.rtl form.global_search_form .label, form.openGlobalSearch .label{ right: 15px; left: auto;}

@media screen and (max-width: 768px) {
	form.global_search_form { display: none !important;}
}



/********************* OTHER HACKS ************************/
.rangeslider.vertical .input-group-text{ border-radius: 0.25rem !important; }
/* .rangeslider.vertical input[type="range"] {-webkit-appearance: slider-vertical} */

table.tableinput tbody td {padding: 0 !important;}
table.tableinput  tr.tableinput th {padding: 0 !important;}
table select, table input[type=text] {width: 100%; text-align:center; border:0; border-radius: 0; padding: 0.3rem;  background-color: transparent;}
table .form-group {margin:0; padding:0; border:0;}
table .serial{ display:block; text-align: center; width: 100%; }


.pagination{ margin-bottom: 0.25rem;}
.shadow, .shadow-sm, .shadow-lg { box-shadow: var(--bs-body-text);}

.grid-center { display: grid; place-items: center; }

.pac-container{ z-index: 10005;}

fieldset.collapsed > *:not(legend){ display:none }

/************************ COLORS ***********************/

.bg-green {background-color: var(--bs-green)  !important }
.bg-golden {background-color: var(--bs-orange)  !important }
.bg-yellow {background-color: var(--bs-yellow)  !important }
.bg-blue {background-color: var(--bs-blue) !important }
.bg-cyan {background-color: var(--bs-cyan)  !important}
.bg-red {background-color: var(--bs-red)  !important}
.bg-turq {background-color: var(--bs-teal)  !important}


/************ Nav Bar *********************************/
.navbar-toggler:focus
{
	outline: none !important;
	box-shadow: none;
}

.MS_ModuleDiv { 
	width:100%;
}

#sidebar {
	transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
    transform-origin: center left;
	z-index: 100;
	max-height: 100%;
	min-height: 100%;
	transform: rotateY(200deg);
	overflow-y: auto;
}

#sidebar.active {
	margin-left: 0;
	transform: rotateY(0deg);
	transform-origin: center left;
}
body.rtl #sidebar{
    transform-origin: center right;
	transform: rotateY(-200deg);
}
body.rtl #sidebar.active {	
    transform: rotateY(0deg); /* Rotate sidebar vertically by 100 degrees. */
	margin-left: 0;
    transform-origin: center right;
}

#sidebarCollapse {
	display: none;
	position: relative;
	width: 40px;
}
@media (max-width: 768px){
	#sidebarCollapse {
		font-size:120%;
	}
}
#sidebarCollapse.active{
	border: 0;
	outline: 0 !important;
}
#sidebarCollapse .fas{  
	position: absolute;
	transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
	transform: rotate(-180deg) scale(1);
	-webkit-transform : rotate(-180deg) scale(1); 
    transform-origin: center;
	top:12px;
	left:12px;
}
#sidebarCollapse .fa-times{ 
	transform: rotate(-180deg) scale(0);
	-webkit-transform : rotate(-180deg) scale(0);
}

#sidebarCollapse.active .fa-bars{  transform: rotate(180deg) scale(0);-webkit-transform : rotate(180deg) scale(0);}
#sidebarCollapse.active .fa-times{ transform: rotate(180deg) scale(1);-webkit-transform : rotate(180deg) scale(1);}


#sidebarCollapse:active, #sidebarCollapse:focus{
	border: 0;
	outline: 0 !important;
}
@media (max-width: 768px){
	body.ltr #sidebar, body.rtl #sidebar {
		position: absolute;
    	transform: rotateY(0deg);
	}
	body.ltr #sidebar.active {
		transform: rotateY(200deg); /* Rotate sidebar vertically by 100 degrees. */
	}
	body.rtl #sidebar.active {	
		transform: rotateY(-200deg);
	}
	#sidebarCollapse{ display:inline-block;	}
	#sidebarCollapse .fa-bars{  transform: rotate(180deg) scale(0);-webkit-transform : rotate(180deg) scale(0);}
	#sidebarCollapse .fa-times{ transform: rotate(180deg) scale(1);-webkit-transform : rotate(180deg) scale(1);}
	#sidebarCollapse.active .fa-bars{  transform: rotate(180deg) scale(1);-webkit-transform : rotate(180deg) scale(1);}
	#sidebarCollapse.active .fa-times{ transform: rotate(180deg) scale(0);-webkit-transform : rotate(180deg) scale(0);}
}



/*********************** navbar Media Queries **********************/

@media only screen and (min-width: 768px) {
	#top_nav #navbar-search-icon {display:none !important;}
	#top_nav #sidebarCollapse {order:1 !important;}
	#top_nav #logo_holder {order:2 !important;}
	#nav_container{justify-content: flex-start !important;}
}

@media (max-width: 768px) {
	#nav_container{width:100% !important;}
}
/******************************************************************/


.navbar-right {padding:0; justify-content:space-between; align-items:center;}
/* .navbar-right a {color: #FFF } 
.navbar-right a:hover {color: #cbd3da !important} */


@media (min-width: 768px){
	*[action="revealTreeList"]{
		display: none;
	}
}

.content {
	max-height: 100%;
	height: 100%;
	overflow:auto;
}

@media (max-width: 768px){
	.content.col-sm-12 {
		max-height: 100%;
		height: 100%;
		overflow:auto;
	}
}
.content .row{
	height: 100%;
}
.row { padding: 0 !important;}
.content .scrollable:last-child{
	overflow: auto;
	flex: 1 1 auto;
}

@media (min-width: 769px){
	footer .navbar-nav {
		display: none !important;
	}
}

@media (max-width: 768px){
	#top_nav .navbar-nav {
		display: none !important;
	}
}

/*************** Scroll bar ******************/
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 3px;
	background-color: #F5F5F5;

}

::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #888;
}
/*:hover::-webkit-scrollbar {
	background: #555; 
	width: 10px;
	height: 10px;
	border-radius: 5px;

}*/

.debug_mode_label{ position:absolute; bottom:5px; color:#F00; text-shadow:#090; font-size: 200%; pointer-events: none;}
body.ltr .debug_mode_label{ right: 5px;}
body.rtl .debug_mode_label{ left: 5px;}
#ballons_div {position: absolute; top: 30px; z-index: 10000; max-width: 150px}
body.rtl #ballons_div {left: 10px}
body.ltr #ballons_div {right: 10px}

body.rtl .modal-header .close {
	padding: 1rem 1rem;
	margin: -1rem auto -1rem -1rem;
}

/********* Tree Layout ****************/
.tree_layout { width:100%; height:100% }
.tree_layout > div {height: 100%;}

.tree_list a.nav-link:hover {background-color: var(--bs-focus-ring-color)}

.tree_list ul {margin-right: 0; margin-left: 0}
.tree_list .nav-link { 
	margin: 0 .5rem;
	border-bottom :1px solid var(--bs-secondary-bg);
	padding: var(--bs-nav-link-padding-y);
}
.tree_target .tree_list, .tree_target .tree_target {background-color: transparent !important; color: #454d55 !important;}
.tree_list .collapse-toggle::before {
    display: inline-block;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}


body.ltr .tree_list ul.nav ul.nav { padding: 0; margin:0px 0px 10px 15px }
body.rtl .tree_list ul.nav ul.nav { padding: 0; margin:0px 15px 10px 0px; }
body.ltr .tree_list ul.nav ul.nav .btn-group { margin-left: 0px Im !important}
body.rtl .tree_list ul.nav ul.nav .btn-group { margin-right:0px Im !important}
body.ltr .tree_list ul.nav ul.nav .btn-group a:first-child{ border-left: 1px solid var(--bs-border-color);}
body.rtl .tree_list ul.nav ul.nav .btn-group a:first-child{ border-right: 1px solid var(--bs-border-color);}

body.ltr .tree_target .tree_list{ border-right: 1px solid var(--bs-border-color) }
body.rtl .tree_target .tree_list{ border-left: 1px solid var(--bs-border-color) }
.tree_target .tree_list ul.nav ul.nav{border-color: var(--bs-border-color) !important}
.tree_target .tree_list ul.nav ul.nav{border-color: var(--bs-border-color) !important;}
/* .tree_target .tree_list .text-light{color: #454d55 !important;} */

.tree_target {display: none}
.revealTreeList .fa-chevron-right{ display: none;}
body.rtl .revealTreeList .fa-chevron-right{ display: block;}
body.rtl .revealTreeList .fa-chevron-left{ display: none;}
@media (min-width: 768px){
	.tree_target {display:block};
}
@media (max-width:768px){
	.tree_list li {padding: 0.3rem 0.02rem;}
}
/********************* Loading Div ********************/
#loading_main_div{
	position: absolute;
	z-index: 1101;
	pointer-events: none;	
	min-width: 400px;
}

#loading_main_div #loading_progress  { 
    margin: 0 2px 4px;
    height: 12px;
 }

#loading_main_div .ui-progressbar .ui-progressbar-value, .progressbar { 
	background-image: url(../img/progressbar.gif); 
}

#preloading_overlay{
	position: absolute;
	width: 100vw;
	height: 100vh;
	z-index:1100;
	top:0;
	left: 0;
	opacity: 0.9;
}

.particles-js {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
/***************** Loader *****************/
/* .loader {
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 4s linear infinite;
	border-top: 16px solid #17a2b8;
	border-right: 16px solid gray;
	border-bottom: 16px solid #17a2b8;
	border-left: 16px solid gray;
}

@keyframes spin {
  0% { transform: rotate(0deg); border-width: 1px }
  50% {  border-width: 59px}
  100% { transform: rotate(360deg); border-width: 1px}
} */

/******************************** Helpers *****************************************/
body.ltr .reverse_align { text-align:right; direction: rtl;}
body.rtl .reverse_align { text-align:left; direction: ltr;}

body.ltr .def_align{ text-align:left}
body.rtl .def_align{ text-align:right}

body.ltr .def_float{float:left}
body.rtl .def_float{float:right}

body.ltr .rev_float{float:right}
body.rtl .rev_float{float:left;}

body.rtl .float-lg-right{float: left !important}

.text_deleted {text-decoration: line-through}
.text-bolder {font-weight: bolder !important; }
.consol {
	background-color: #000; 
	color: green !important; 
	direction: ltr !important; 
	font-size: 14px;
	overflow: auto;
	border-color: var(--bs-border-color);
	font-weight: bold;
}

.consol .error {
	color: red !important;
}

.consol .warning {
	color: yellow !important;
}
.consol .cursor {
	animation: blink 1s infinite;
}

@keyframes blink {
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}


.btn-group .icon_true{ display: none; }
.btn-group .active .icon_true{ display: inline-block; }
.btn-group .icon_false{ display: inline-block; }
.btn-group .active .icon_false{ display:none }

.hidden{display:none;} /*animation: hidden-animation 1000ms forwards ;*/
.d-flex.hidden { display: none !important;}
@keyframes hidden-animation {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		display: none;
	}
}

.hand{ cursor:pointer}
.zoom{ cursor:zoom-in}
.cursor_disabled { cursor: not-allowed; }

.big_title{ border-bottom: 1px dashed #CCC; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); color: var(--bs-primary);}
.big_title select{
	border-color: transparent;
    background-color: transparent;
    margin: 0 5px;
    padding: 0 5px;
}
.big_title select:focus {
	outline: none;
}

.tree_target .big_title h2{font-size: 1.6rem}
.tree_target .tree_target .big_title h2{font-size: 1.3rem}

.circle_button { width:30px; height:30px; border-radius:50%; padding:3px; cursor:pointer; text-align: center !important;}
.circle_button.mini { width:24px; height:24px; border-radius:50%; padding:2px; font-size: 0.75rem;}
@media (max-width:768px){
	.circle_button{ width:36px; height:36px;}
}

.circle_button.disabled { cursor: default; }


@media (max-width:768px){
	form.inline{
		flex-direction: column;
	}
}
/*form.inline .form-group{ margin:0 0.225rem; }*/

.toolbox > a .fas, .toolbox>a .fab { margin: 0 3px;}
.toolbox .form-group { margin:0; padding:0; }
.toolbox .form-group:not(:first-child) input, .toolbox .form-group:not(:first-child) select {
	border-top-left-radius :0 !important;
	border-bottom-left-radius: 0 !important;
}
.toolbox .form-group:not(:last-child) input, .toolbox .form-group:not(:last-child) select {
	border-top-right-radius :0 !important; 
	border-bottom-right-radius: 0 !important;
}
nav .form-group { margin:0; }


.tooltip ul {list-style: none; padding: 0.3rem; margin:0;}
legend .circle_button{ width: 20px; height: 20px; display: inline-flex; font-size: small; text-align: center; margin: 0 5px; }

.rotated {    
	-webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    justify-content:center;
    align-items:center;
    writing-mode: vertical-lr;
	white-space: nowrap;
	margin: auto;
}

.navbar-nav .dropdown-menu{ position: absolute}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/********* Messages  **********/
#count_new_msgs{
    position: absolute;
    bottom: -4px;
    background-color: tomato;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 90%;
    right: -4px;
    line-height: 1;
    text-align: center;
    font-size: smaller;
    font-weight: bold;
    display: none;
    animation-name: stretch;
	animation-duration: 0.7s; 
	animation-timing-function: ease-out; 
	animation-delay: 0;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-fill-mode: none;
	animation-play-state: running;
}

@keyframes stretch {
  0% {
    transform: scale(.3);
    background-color: #440000;
    border-radius: 100%;
  }
  100% {
    transform: scale(1);
    background-color: red;
    border-radius: 100%;
  }
}

/************************** CHAT ********************************/
.chat{
	border-bottom: var(--bs-border-color);
	margin-bottom: 0.5rem;
	border-bottom-width: 1px;
    border-bottom-style: solid;
}
.chat-header {
	font-size: small;
	font-weight: bold;
	margin-bottom: 0.5rem;
	padding: 0.3rem;
	font-style: italic;
}
.chat-date {
	font-size: smaller;
	line-height: 1;
}
.chat-user{
	line-height:0.6;
	margin: 0 0.25rem;
}
.chat.reciver .chat-header, .chat.reciver .chat-text{
	justify-content: start;
	text-align: left;
}
.chat.sender .chat-header, .chat.sender .chat-text {
	justify-content: end;
	text-align: right;
}
.chat.unreaded * { font-weight: bold;}

.chat-content {
	overflow: auto;
}
.chat-text {margin-bottom: 0.25rem;}
#module_chat .textarea:focus, #module_chat .textarea:focus-visible{ outline: none !important; box-shadow: none !important; }

.calls-items { 
	height: 200px;
	width: 200px;
}

.chat-calls li { 
	position: relative;
}


.chat-calls li video { 
	position: absolute;
	z-index: 1;
	top:0;
	width: 100%;
	height:100%;
	object-fit: cover;
}

/* .chat-content ul li:nth-of-type(odd){
	background-color: var(--bs-dark);
} */
/************************** LANCHER ********************************/
.lancher-item {
	max-width: 96px;
	margin-bottom: 0.5rem;
}

.lancher-item-icon a {
	align-items: center;
	justify-content: start;
	text-decoration: none;
	text-overflow: ellipsis;
	overflow: hidden;
	width: 100%;
	height: 100%;
	line-height: 1.2;
}
.lancher-item-icon a:hover{ text-decoration: none; text-overflow: unset; overflow: unset;}
.lancher-item-icon a .btn_title {text-align: center; font-size: small; }
.lancher-item-icon a .fas {font-size: 2rem}
.lancher-item-icon:hover a{ margin-top: -2px; background-color: var(--bs-focus-ring-color);}
.lancher-item-icon a.active{ background-color: var(--bs-focus-ring-color);}

.tiles .card-header{cursor:move;}
.grid-item {max-height:600px; overflow: auto;}
.grid-item-holder.active {background-color: var(--bs-focus-ring-color); border-radius: var(--bs-border-radius);}
.grid-item img {max-width: 100%;}
/*  JQUERY UI */

body.rtl .ui-icon-triangle-1-w { background-position:-32px -16px;}
body.rtl .ui-icon-triangle-1-e { background-position:-96px -16px;}
body.rtl .ui-corner-left{ border-bottom-right-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 0px; border-top-left-radius: 0px;}
body.rtl .ui-corner-right{ border-bottom-left-radius: 5px; border-top-left-radius: 5px; border-bottom-right-radius: 0px; border-top-right-radius: 0px;}

/********************* Dialog **************************/
.ui-dialog {padding: 0 !important}

.ui-dialog .ui-dialog-titlebar{padding: 0.4rem !important;}
.ui-dialog .ui-dialog-title {
	margin: .1em 0;
	white-space: nowrap;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 0.5rem;
	font-weight: bold;
}
.ui-dialog .ui-dialog-buttonpane {
	padding: .3em 1em;
	border-top: 1px solid var(--bs-tertiary-color);
}
.ui-dialog .ui-dialog-buttonpane button{ margin: .2em .4em .5em 0 }

.ui-dialog .ui-dialog-titlebar-buttonpane > a { width: 20px; height:20px; padding: 0 5px; color: inherit; }
.ui-dialog .ui-dialog-titlebar-buttonpane > a:hover{ padding-top: 1px }

body.rtl .ui-dialog-titlebar-buttonpane{direction: ltr;}
body.ltr .ui-dialog-titlebar-buttonpane{direction: rtl;}

.ui-dialog-buttonpane span.ui-button-icon.ui-icon { text-indent:0 !important }
@media (max-width: 768px){
	.ui-dialog .ui-dialog-content{
		padding:0.25rem !important;
	}
	
}

.ui-widget {font-family: unset !important;}

.ui-dialog,
.ui-widget-header,
.ui-widget-content {
	background: var(--bs-body-bg) !important; 
	color: var(--bs-body-text) !important;
	border-color: var(--bs-border-color) !important;;
	overflow-y: auto
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
	border: 1px solid var(--bs-border-color) !important;
	/* background: var(--bs-tertiary-bg) !important;
	font-weight: normal !important;
	color: var(--bs-body-color) !important; */
}

/************ autocomple ***************/
.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default;
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    outline: 0;
	max-height: 300px;
    overflow-y: auto;
    z-index: 10000 !important;
	max-width: wv(100);
}


.ui-menu-item {
	text-overflow: ellipsis; 
	overflow: hidden; 
	white-space: nowrap;
    display: block;
    width: 100%;
    padding: 0.25rem 0.5rem;
    clear: both;
    font-weight: 400;
    color: var(--text-body);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    border: 0;
    border-radius: var(--bs-border-radius-sm,0);
}

.ui-menu-item:focus, .ui-menu-item:hover {
    color: var(--bs-primary);
    background-color: var(--bs-link-hover-color-rgb);
}

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/********************** Tabs *************************/

.ui.tabs {border:0 !important}
.ui-tabs .ui-tabs-nav {
	margin: 0 0 -1px 0;
	padding: .2em .2em 0;
	list-style: none;
	display: inline-flex;
	z-index: 5;
	border-bottom: 1px solid var(--bs-border-color);
	flex-wrap: wrap;
	overflow: hidden;
}


body.rtl .ui-tabs .ui-tabs-nav li {  float: right; }

.ui-tabs .ui-tabs-nav  li {
	border-top-left-radius: var(--bs-border-radius);
	border-top-right-radius: var(--bs-border-radius);
	margin: 0 2px ;
	box-shadow: 0 -1px 0 var(--bs-body-text), 0 0 0 var(--bs-body-text);
	border-bottom: 0px !important;
	white-space: nowrap;
}

.ui-tabs .ui-tabs-nav  li.ui-state-active{
	margin-bottom: -1px;
	padding-bottom: 1px;
	border-color : var(--bs-focus-ring-color);
	background-color: var(--bs-body-bg) !important;
	font-weight: bold;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	padding: .25em .5em !important; 
	float: left;
	text-decoration: none;
}

.ui-tabs .ui-tabs-nav .ui-state-default a {color : var(--bs-tertiary-color)}
.ui-tabs .ui-tabs-nav .ui-state-default a:hover {color : var(--bs-secondary-color)}
.ui-tabs .ui-tabs-nav .ui-state-active a, .ui-tabs .ui-tabs-nav .ui-state-active a:link, .ui-tabs .ui-tabs-nav .ui-state-active a:visited {
	color: var(--bs-primary);
	text-decoration: none;
}

.ui-tabs .ui-tabs-panel { 
	border: 1px solid var(--bs-border-color);
	padding: 0.8rem .5rem !important;
}
/********************** Tables ***********************/
table.table-sm { font-size: 90%;}
table.table-sm .circle_button{ width: 24px; height: 24px; font-size: 80% !important;}

table .form-group{ margin: 0; padding: 0 }
table .btn {font-size: smaller;}

div.dataTables_scrollFootInner table.dataTable {margin-bottom: 0 !important;};
div.dataTables_scrollHeadInner table.dataTable {margin-top: 0 !important;};
div.dataTables_scrollHead table.dataTable{margin-bottom: 0 !important;margin-top: 0 !important;}
div.dataTables_scrollBody{ margin-top:-1px}
.dataTables_wrapper.no-footer .dataTables_scrollFoot{height: 0;}
.dataTables_wrapper .row { margin: 0 !important; }
.dataTables_wrapper thead th:last-child, .dataTables_wrapper tfoot th:last-child{border-left-width: 1px ;}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before{
	color : var(--bs-primary);
	margin: 0.5rem;
}
@media screen and (max-width: 767px){
	div.dt-buttons {
    	width: auto;
    	margin-bottom: 0;
	}
}
/*.dataTables_scroll, .dataTables_wrapper{height:100%; overflow: hidden;};
*/
/*************** Tabs *********************************/
.ui-tabs-panel { max-height: 100%; overflow:auto; height: 100%;}


/**************  ACE Editor ***********************/
.ace_editor{ height:100%; margin-bottom: 0;}

/**************  TIny Editor ***********************/
body.mce-content-body {overflow: auto;}
.tox.tox-tinymce-inline .tox-editor-header,
.tox .tox-toolbar-overlord,
.tox .tox-toolbar__primary{ 
	background-color: transparent !important; 
	border: 0 !important;
}

.tox .tox-toolbar__group{ padding: 0 !important;}
.tox .tox-tbtn svg {
    fill: var(--bs-primary) !important;
}
.tox button:hover{ background-color: var(--bs-link-hover-color-rgb) !important; }
.tox button:hover svg {
	fill: var(--bs-light) !important;
}
/**************** FORM **************************/
.form-control-sm .input-group-text {
    padding-bottom: 0.18rem;
    padding-top: 0.18rem;
}
form.compact div.form-control-sm:not(.form-check) , .toolbox div.form-control-sm:not(.form-check) {padding: 0;}
form.compact input.form-control-sm, form.compact select.form-control-sm {padding-top: 0.25rem; padding-bottom: 0.25rem;}
form.compact .form-text{margin-top: .125rem;}
.form-select {font-size: 0.875rem !important; padding-top:0}

.btn-group-toggle.form-control-sm label {padding-top: .125rem;}


span.autocomplete_search {
	position: absolute;
    right: 5px;
    top: 35%;
    font-size: 70%;
    cursor: pointer;
}


.form-group.rtl{text-align:right; direction: rtl;}
.form-group.ltr{text-align:left; direction: ltr;}

.form-group.rtl .form-control {
	background-position: left calc(.375em + .1875rem) center;
}

.radio_group-holder .active{font-weight: bolder;}
body .radio_group-holder .btn-group .btn, body .check_group-holder .btn-group .btn {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

body.rtl .radio_group-holder .btn-group .btn:last-child, body.rtl .check_group-holder .btn-group .btn:last-child {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

body.ltr .radio_group-holder .btn-group .btn:last-child, body.ltr .check_group-holder .btn-group .btn:last-child {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}
/* .radio_group-holder input[type="radio"] {
    display: none;
} */
/**************** checklist ****************/

body.ltr .list-group input {margin-right : 7px};
body.rtl .list-group input {margin-left : 7px};

/* body.rtl .form-check .form-check-input {float: right;}
body.rtl .form-check .form-check-label {margin-right: 1.5rem;} */
.form-check label {width:100%; text-align: initial;}
.form-check {padding-left: 0 !important;}
.form-check .form-check-input {margin-left: 0 !important; min-height: 1.3em;}

.btn-group-vertical > :not(.btn-check:first-child) + .btn, .btn-group-vertical > .btn-group:not(:first-child){
    margin-left: 0px !important;
}
.btn-group-vertical > .btn:first-child{
	border-top-right-radius: var(--bs-border-radius-sm) !important;
	border-top-left-radius: var(--bs-border-radius-sm) !important;
}
.btn-group-vertical > .btn:last-child{
	border-bottom-right-radius: var(--bs-border-radius-sm) !important;
	border-bottom-left-radius: var(--bs-border-radius-sm) !important;
}



/* Sortable*/
body.dragging, body.dragging * { cursor: move !important;}
.dragged {
	position: absolute;
	opacity: 0.5;
	z-index: 2000;
	right:0;
	left:0;
} 
.sortable li.placeholder {
	position: relative;
	border-top-color:blue
}
.sortable li.placeholder:before {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	margin-top: -5px;
	left: -5px;
	top: -4px;
	border: 5px solid transparent;
	border-left-color: red;
	border-right: none;
}


/**************** Contact **************/
.contact-main:hover {background: blue}
.contact-main  .fa {opacity: 0.3}
.contact-main.btn-primary  .fa {opacity: 1}
.contact-main:hover  .fa {opacity: 1}

.phone_entry select  {
	height: auto;
	padding: 0 0.375rem;
}
.phone_entry select:focus  {
	background-color: #e9ecef;
	box-shadow: 0;
}

/******************************************/
.form-group {padding-bottom: 0.5rem;}

div.form-group div.form-group {
    margin-bottom: 0 !important;
}

.list-group-item { padding: 0.25rem 0.75rem }
.list-group-item p {margin: 0;}
/************ Clendar con menu *********************************/
/*#calender_con_menus .dropdown-menu {
	margin : 0; 
	padding:0 0 0.3rem 0;
	-webkit-border-radius: 0 0 6px 6px  ;
    -moz-border-radius: 0 0 6px 6px  ;
    border-radius: 0 0 6px 6px ;
}
*/
#calender_con_menus li {
	position: relative;
}



body.ltr #calender_con_menus li >  ul.dropdown-menu{ left: 100% !important}
body.rtl #calender_con_menus li >  ul.dropdown-menu{ right: 100% !important}
#calender_con_menus li >  ul.dropdown-menu{ 
    position: absolute;
    min-width: 180px;
    top: 0;
    padding: 0 0.4rem;
    margin: 0;
    white-space: nowrap;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
}

#calender_con_menus li >  ul.navbar-nav{
	 -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
}
#calender_con_menus li:hover > ul{ display: block !important }


@media screen and (max-width: 760px) {
	#calender_con_menus .dropdown > ul.dropdown-menu {position: relative;}
}

/*#calender_con_menus li:hover > ul{ display: block !important }*/

.dropdown-submenu { max-height: 250px; overflow-x: auto; }

#calender_con_menus .dropdown-menu .nav-link { padding: 0.2rem 0.5rem !important}

.calendar_week_table {
	min-height: 90%;
}

.calendar_week_table th{ text-align: center; }

.calendar_week_table td:not(:first-child) {
    width: 13%;
}
.calendar_week_table td::first-child {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.calendar_week_table li {
	width:100%;
}

.calendar_week_table li a {
	width:100%;
	height:100%;
	font-size: 120%;
	font-weight:bolder;
}

.calendar_week_line_ul { padding:0; margin:0 0 0.25rem 0;}
.calendar_week_line_ul button {
	flex:0 !important;
	padding:3px 2px;
	min-width: 20px;
	text-align: center;
}


.regle{ position: relative; list-style: none; padding: 0; margin: 0}
body.rtl .regle{ direction:ltr}
body.ltr .regle{ direction:rtl}
ul.regle span {position:absolute; }
ul.regle li {height:5px; border-top:1px solid #000000;}
ul.regle li.indecitor{ position:absolute; height:0px;
    border-top: 2px solid #007bff;
    border-bottom: 2px solid #007bff;
	background-color: rgb(250, 212, 46, 0.8);
	width: 100%;
	vertical-align:middle;
	text-align:center;
	height:2px;
	color: var(--bs-primary)
}
/************ Messages con menu *********************************/

#message_con_menus li {
	position: relative;
}

body.ltr #message_con_menus li >  ul.dropdown-menu{ left: 100% !important}
body.rtl #message_con_menus li >  ul.dropdown-menu{ right: 100% !important}

#message_con_menus li >  ul.dropdown-menu{ 
    position: absolute;
    min-width: 180px;
    top: 0;
    padding: 0 0.4rem;
    margin: 0;
    white-space: nowrap;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
}


#message_con_menus li:hover > ul{ display: block !important }


#message_con_menus .nav-link { padding: 0.2rem 0.5rem !important}

/*************** Upload ******************/

input[type="file"] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    cursor: pointer;
    filter: alpha(opacity=0);
    opacity: 0;
}


#upload-drop-area{
    border: 2px dashed lightgray;
    border-radius: 3px;
    text-align: center;
    overflow: auto;
}

#upload-drop-area:hover{
    cursor: pointer;
}

#upload-drop-area h2{
    text-align: center;
    font-weight: normal;
    font-family: sans-serif;
    line-height: 30px;
    color: darkslategray;
}

#upload_result { display: flex; align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
.thumbnail {max-width: 160px; max-height: 90px}


/**************** Shool fees ****************/
#module_schoolfees .tabs .ui-tabs-panel{ padding: 5px 0 0 !important }


/***************  Schedule **************/
.schedule-holder a{ text-decoration: none; }
.schedule-holder a.active{ color: #007bff; }
.schedule_table, .schedule_table ul, .schedule-holder ul, .week_line_ul { list-style: none; margin: 0; padding: 0; }
.schedule_table > li {width: 12.5%; border: 1px solid #ebebeb; }
.schedule_table > li > div{border-bottom: 1px solid #ebebeb; }
.day_timeline { position: relative; }
.day_timeline > li{ border-bottom: 1px solid #ebebeb; position: absolute; width: 100%;  }
ul.day_timeline li.faded{opacity:0.7}
ul.day_timeline li.rec {background-color:#990066; color:#CCCCCC; padding-top:5px; }
ul.day_on{ background-color:#CCCCCC;}
ul.day_off {background:#333333; color:#CCCCCC; }
.maintenance { background-image:url(../../assets/img/maintenance.png); color:#FFFFFF; font-weight:bold; opacity:.7}
.blackTimeOut:hover{border:1px solid #D5E102}

.btn-group label span.fas{pointer-events: none;}
.btn-group label.active span.fas{color: #007fff;}
a.session {
	font-size: smaller;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	border-left: 1px solid #ebebeb;
	
}
ul.day_on a{
	text-decoration: none;
}
ul.day_on li div:first-child {overflow: hidden;}
ul.day_on a:hover{border:2px solid var(--bs-primary); color: var(--bs-primary);}

a.session.active {
	background-color: var(--bs-warning);
}
/*************** marks ***************/
.result_cell{ text-align:center}
.large_cell {font-size:12px;width:40px; height:40px;position:relative}
body.ltr ul.service_cells li{ margin-right: 1px ; }
body.rtl ul.service_cells li{ margin-left: 1px ; }
.large_cell span.tl{font-size:90%; position:absolute; top:2px; left:2px}
.large_cell span.tr{font-size:90%; position:absolute; top:2px; right:2px;color:red}
.large_cell span.bl{font-weight:bolder; position:absolute; bottom:2px; left:2px}
.large_cell span.br{font-size:90%; position:absolute; bottom:2px; right:2px;color:blue;}

/* appreciation */
.appr_grad {position:absolute; top:3px; right:3px; font-weight:bold; font-size:8px; color:#F36}


/*   ClassService Timeline */
.timeline_date { position: relative; }

.timeline_date::after {
    position: absolute;
    box-shadow: 0 0 0 4px #4298c3;
    background: #313534;
    border-radius: 50%;
    height: 12px;
    width: 12px;
    content: "";
    top: 6px;
}
html[dir="rtl"] .timeline_date::after {right: auto;left: -8px;}
html[dir="ltr"] .timeline_date::after {right: -8px;left: auto;}

html[dir="ltr"] .timeline_date {border-right: 5px solid #4298c3; min-height:120px;}
html[dir="rtl"] .timeline_date {border-left: 5px solid #4298c3; min-height:120px;}


/****************** LMS ****************/
.book_suumarys > li {width: 50%; max-height: 500px; padding-bottom: 0.25rem;}



/******************** Documents ***********************/
/** Explorer **/
.address_bar span {
	display: inline-block;
    height: 16px;
    padding: 3px 5px;
}

.address_bar a{
	float: right;
    margin: 0 2px;
	height:24px
}

.document_space_div {padding:10px 2px;}
.document_space_div span {padding:2px 6px; white-space: nowrap;}
.explorer_form li.item{
    text-align: center;
    width: 80px;
	vertical-align: top;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	position:relative;
	font-size: smaller;
	border-radius: 2px;
} 


.explorer_form li.file_name .file_tools{
	position:absolute;
	left:3px;
	top:3px;
	padding:0;
	margin:0;
	list-style:none;
	display: none;
}

.explorer_form li.item:hover{background-color: wheat;}
.explorer_form li.item.active{background-color: wheat;}

.explorer_form li.file_name:hover .file_tools{
	display: flex;
}

.explorer_form li.item .file_tools li{
	width:20px;
	height:20px;
	padding:2px;
}

.explorer_form li.item img{
	text-align: center;
	vertical-align:top;
	max-height:64px;
	max-width:64px;
}
.explorer_form li.item a {text-decoration:none;}


table.fixed td{
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
table.fixed p{ margin:0}

html[data-bs-theme="mixed"] th.sorting:after,html[data-bs-theme="mixed"] th.sorting:before {
	color: var(--bs-secondary);
	opacity: 0.5 !important;
} 

span.shared_file_icon {
    position: absolute;
    top: 3px;
    right: 3px;
    color: brown;
}

/****************** Commands ******************
@media print { 
	.command_data{ flex-direction: row; display: flex; flex-wrap: wrap;}
	.command_data .form-group{ width:50%; float: left!important}

	.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
		float: left!important;
	}
	.col-sm-12, .col-md-12 {
		width: 100%;
	}
	.col-sm-11, .col-md-11 {
		width: 91.66666666666666%;
	}
	.col-sm-10, .col-md-10 {
		width: 83.33333333333334%;
	}
	.col-sm-9, .col-md-9 {
		width: 75%;
	}
	.col-sm-8, .col-md-8 {
		width: 66.66666666666666%;
	}
	.col-sm-7, .col-md-7 {
		width: 58.333333333333336%;
	}
	.col-sm-6, .col-md-6 {
		width: 50%;
	}
	.col-sm-5, .col-md-5 {
		width: 41.66666666666667%;
	}
	.col-sm-4, .col-md-4 {
		width: 33.33333333333333%;
	}
	.col-sm-3, .col-md-3 {
		width: 25%;
	}
	.col-sm-2, .col-md-2 {
		width: 16.666666666666664%;
	}
	.col-sm-1, .col-md-1 {
		width: 8.333333333333332%;
	}
}*/






.accordion .card-header .btn {
    width: 100%;
    text-align: start;
}
.accordion .card-header .btn:hover {
	text-decoration: none;
}

.accordion .card-header .btn:focus {
	outline: none;
}


.circle_progress{
	--w: 48px;
	--bgcolor: #007bff;
	--percentage: 100;
	width: var(--w);
	aspect-ratio: 1;
	display: inline-grid;
	place-content: center;
	/* font-size:0.7rem; */
	/* font-weight: bold; */
	transition: all 1s ease;
	border-radius: 50%;
	
}

.circle_progress small{
	z-index: 1;
}
.circle_progress:before{
	content: "";
	position: absolute;
	border-radius: 50%;
	inset: 0;
	width: var(--w);
	background: conic-gradient(var(--bgcolor) calc(var(--percentage)*1%),#0000 0);
	aspect-ratio: 1;
	transition: all 1s ease;
	border: 1px solid var(--bgcolor);
	/* left: calc(var(--w)/2 ); */
}

/**********teeth chart ***********/
.teeth_chart path{ pointer-events: none;}
.teeth_chart path.parent {pointer-events:fill}
.teeth_chart path.active {fill:var(--bs-danger) !important}
.teeth_chart path.active.danger {fill:var(--bs-danger) !important}
.teeth_chart path.active.success {fill:var(--bs-success) !important}
.teeth_chart path.active.warning {fill:var(--bs-warning) !important}


/************ LMS *******************/
.question_counter{
	--w: 48px;
	--bgcolor: #007bff;
	--percentage: 100;
	width: var(--w);
	aspect-ratio: 1;
	display: inline-grid;
	place-content: center;
	font-size: 25px;
	font-weight: bold;
	transition: all 1s ease;
	border-radius: 50%;
	z-index: 1;
}
.question_counter.danger {
	animation: blinker 1s linear infinite;
}
@keyframes blinker {
	50% {
	  opacity: 0.5;
	}
}

.question_counter:before{
	content: "";
	position: absolute;
	border-radius: 50%;
	inset: 0;
	width: var(--w);
	background: conic-gradient(var(--bgcolor) calc(var(--percentage)*1%),#0000 0);
	aspect-ratio: 1;
	transition: all 1s ease;
	border: 1px solid var(--bgcolor);
	left: calc(var(--w)/2 );
}

.not_time_controled .time_opts{
	display: none;
}

.exercises-control{
	top:auto !important;
	bottom: 2rem !important;
	right: 1rem !important;
}

.exercise-media {
	min-height: 240px;
	max-height: 360px;
	object-fit: contain;
}
/* Map selector */
.map-container .path-hover {
	opacity: 0.7;
	transition: opacity 0.3s ease;
}

/********************** ROUTes *****************/
.cur_route_list .details {display: none;}
.cur_route_list .active .details {display: block;}

/************* student icon view *****************/
.student_card {
	width: 140px;
}