*, :before, :after {
	box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
:root{
	--autospacer-gap: .2rem;
    --color-orange: #FDB913;
    --color-green: #32b28d;
    --color-lightgreen: #E3FAF2;
    --color-lightblue: #E8F0F9;
    --color-lightgray: #e6e6e6;
    --color-gray: #999999;
    --color-darkgray: #333333;
    --color-blue: #244975;
    --color-red: #F45D5D;
    --color-lightred: #fde7e7;
    --color-thead:#f1f1f1;
    --color-tbody: #fafafa;

    --cs-blue:#2994ff;
    --cs-blue-dark: #0b599b;
    --cs-green: #48C9B0;
    --cs-orange: #FFAF2A;
    --cs-yellow: #ffe141; 
    --cs-yellow-dark: #f5d627;
    --cs-gray-darker: #232323;
    --cs-gray-dark: #343434;
    --cs-gray-mid: #e5e5e5;
    --cs-gray-light: #f4f4f4;
    --cs-red: #C70039;
    /* --color-blue: #56addb; */ /* Been used already, Please rename */
   
    --padding-menu: 10px;
    --animation-time: .2s;
    --delay-time: .05s;
    --logo-close-size: 250px; /*same as open mode so it doesn't collapse */
    --padding-universal-top: 20px;
    --padding-universal: 30px;

}
html, body{
    height: 100%;    
}
body{
    font-family: 'Noto Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 1rem;
    color: rgb(40, 40, 40);

    padding: 0;
    margin: 0;
    width: 100%;
    background-color: rgb(246, 246, 246);    
}
a {
    text-decoration: none;
    cursor: pointer;
}
h3{
    color: var(--color-blue);
}
select:not(.tg-form-field){
    border: solid 1px #ccc;
    background-color: white;
    font-weight: bold;
    outline: none;
    appearance: none;
    border-radius: .25rem;
    width: inherit;
    height: 54px;
    font-size: 1rem;
    margin: 2px;
    padding-top: 1.5rem;
    padding-left: 1rem;
    cursor: pointer;
}
/* selects in TG forms */
select.tg-form-field{
    border: solid 1px #ccc;
    background-color: white;
    /* font-weight: bold; */
    outline: none;
    appearance: none;
    border-radius: .25rem;
    width: inherit;
    height: 44px;
    font-size: 1rem;
    margin: 2px;
    margin-bottom: .5rem;
    /* padding-top: .2rem; */
    padding-left: 1rem;
    cursor: pointer;
}
input[type=text],
input[type=email],
input[type=password],
input[type=month],
input[type=number]
{
    width: 100%;
    padding: 10px 15px;
    display: inline-block;
    border: solid 1px #ccc;
    background-color: white;
    border-radius: .25rem;
    box-sizing: border-box;
    font-size: 1rem;
    margin-bottom: 1rem;
    color: rgb(40, 40, 40);
}
input[type=date]
{
    width: 100%;
    padding: 10.5px 15px 3px 15px;
    /* display: inline-block; */
    border: solid 1px #ccc;
    background-color: white;
    border-radius: .25rem;
    box-sizing: border-box;
    font-size: 1rem;
    margin-bottom: 1rem;
    color: rgb(40, 40, 40);
    margin: 2px;
    /* font-family: 'Noto Sans', sans-serif !important; */
}
input[type=color]{
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1rem;
    width: 100%;

}
input[type=textarea] {
    width: 100%;
    height: 100px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 14px;
    resize: none;
    margin-bottom: 1rem;
    font-family: 'Noto Sans', sans-serif !important;
}
.font-orange{
    color: var(--color-orange);
}
.font-red{
    color: var(--color-red);
}
.font-blue{
    color: var(--color-blue);
}
.font-gray{
    color: var(--color-gray);
}
.font-darkgray{
    color: var(--color-darkgray);
}

@media only screen and (max-width: 600px) {
    :root {
        --padding-universal: 15px;
        --padding-universal-top:20px;
    }

    .flex-1, .flex-2, .flex-3{
        width: 100%;
        flex: 0 100%;
    }
}
@media only screen and (min-width: 600px) {
    :root {
        --padding-universal: 25px;
        --padding-universal-top:20px;
    }
    .flex-sm-100{
        flex: 0 100%;
        width: 100%;
    }
    
    .flex-1, .flex-2, .flex-3{
        width: 100%;
        flex: 0 100%;
    }
}
@media only screen and (min-width: 768px) {
    :root {
        --padding-universal: 30px;
        --padding-universal-top:20px;
    }
    .flex-md-50{
        flex: 0 50%;
        width: 50%;

    }
    
    .flex-1{
        flex: 1;
    }
    .flex-2{
        flex: 2;
    }
    .flex-3{
        flex: 3;
    }

    .tab-content form > .form-row.row-2 > .co-input-wrapper:first-child{
        margin-right: .375rem;
    }
    .tab-content form > .form-row.row-2 > .co-input-wrapper:last-child{
        margin-left: .375rem;
    }

    .tab-content form > .form-row.row-3 > .co-input-wrapper:first-child{
        margin-right: .5rem;
    }
    .tab-content form > .form-row.row-3 > .co-input-wrapper:nth-child(2){
        margin-right: .25rem;
        margin-left: .25rem;
    }
    .tab-content form > .form-row.row-3 > .co-input-wrapper:last-child{
        margin-left: .5rem;
    }

    .tab-content form > .form-row.row-4 > .co-input-wrapper:first-child{
        margin-right: 0.5625rem;
    }
    .tab-content form > .form-row.row-4 > .co-input-wrapper:nth-child(2){
        margin-right: .375rem;
        margin-left: .1875rem;
    }
    .tab-content form > .form-row.row-4 > .co-input-wrapper:nth-child(3){
        margin-right: .1875rem;
        margin-left: .375rem;
    }
    .tab-content form > .form-row.row-4 > .co-input-wrapper:last-child{
        margin-left: .5625rem;
    }


    .tab-content form > .form-row.row-5 > .co-input-wrapper:first-child{
        margin-right: 0.3rem;
    }
    .tab-content form > .form-row.row-5 > .co-input-wrapper:not(:first-child):not(:last-child){
        margin-right: .25rem;
        margin-left: .25rem;
    }
    .tab-content form > .form-row.row-5 > .co-input-wrapper:last-child{
        margin-left: .3rem;
    }

    .tab-content form > .form-row.row-6 > .co-input-wrapper:first-child{
        margin-right: 0.2rem;
    }
    .tab-content form > .form-row.row-6 > .co-input-wrapper:nth-child(2),
    .tab-content form > .form-row.row-6 > .co-input-wrapper:nth-child(3),
    .tab-content form > .form-row.row-6 > .co-input-wrapper:nth-child(4),
    .tab-content form > .form-row.row-6 > .co-input-wrapper:nth-child(5){
        margin-right: .15rem;
        margin-left: .15rem;
    }
    .tab-content form > .form-row.row-6 > .co-input-wrapper:last-child{
        margin-left: .2rem;
    }
}
@media only screen and (min-width: 992px) {
    /* :root {
        --padding-universal: 30px;
        --padding-universal-top:30px;
    } */
   .menu-offset{
       height: 180px;
    }
   
    .section-text{
        padding: 1rem 1.5rem 2rem 1.5rem;
    }
   
}
@media only screen and (min-width: 1501px) {
    :root {
        --padding-universal: 40px;
        --padding-universal-top:30px;
    }
    
}
@media only screen and (min-width: 1800px) {
    /* :root {
        --padding-universal: 5%;
        --padding-universal-top:30px;
    } */
    
}
/** modal form **/
.modal-form-wrapper {
    position: fixed; 
    z-index: 13;
    display: flex; /* centralize the form */
    justify-content: center;
    align-items: center;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.5);
}
.modal-form-content {
    background-color: #fefefe;
    padding: 1rem 2rem 1.5rem 2rem;
    border: 1px solid #888;
    width: 40%;
    min-width: 420px; /*smallest mobile size */
    margin-bottom: 1.5rem; /* place the form slightly towards the top */
    max-height: 700px;
    overflow-y: auto;
    text-align: left;
}
.modal-form-header{
    display: flex;
    align-items: center;
}
.modal-form-close{
    cursor: pointer;
}
.btn-wrapper{
    display: flex;
    justify-content: right;
}
.btn-wrapper > button:not(:last-child){
    margin-right: 0.5rem;
}
.btn-wrapper > .btn.modal-form-cancel{
    background-color: transparent;
    border: 0;
}
/** end of modal form **/
/**** buttons ****/
.btn{
	margin: 8px 0;
	font-family: inherit;
    font-size: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background-color: #e6e6e6;
}
.btn-text{
    margin: 8px 0;
	font-family: inherit;
    font-size: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.btn:hover{
	opacity: .8;
}
.btn > .icon{
	margin-right: 10px;
}
.btn-lightblue{
	background-color: var(--color-lightblue);
	color: var(--color-blue);
}

.btn-blue{
	background-color: var(--color-blue);
    color: white;
    
}
.btn-red{
	background-color: var(--color-lightred);
	color: var(--color-red);
}
.btn-white{
    background-color: white;
	color: var(--color-blue);
}
.btn-remove{
    color: var(--color-red);
    text-decoration: underline;
}
.btn > a {
	text-decoration: none;
	border-bottom: none;
	color: inherit !important;
}
button.btn{
	border: none;
	font-weight: 600;
}
button.btn:focus{
	outline: none;
}
button.btn:disabled{
	cursor:	not-allowed;
}
/*** a row of buttons **/
div.flex > .btn:not(:last-child){
	margin-right: 8px;
}

/* xs */
@media only screen and (max-width: 600px){
	.btn{
		border-radius: .25rem;
	}
	.btn.btn-lg{
		font-size: 0.9375em;
		line-height: 1.125em;
	}
	.btn.btn-md{
		font-size: 0.9375em;
		line-height: 1.125em;
	}
	.btn.btn-sm{
		font-size: 0.8125em;
		line-height: 1em;
	}
	.btn.btn-lg{
		padding: 18px 30px;
	}
	.btn.btn-md{
		padding: 15px 20px;
	}
	.btn.btn-sm{
		padding: 10px 15px;
	}
}
/* sm */
@media only screen and (min-width: 600px){
	.btn{
		border-radius: .25rem;
	}
	.btn.btn-lg{
		font-size: 0.9375em;
		line-height: 1.125em;
	}
	.btn.btn-md{
		font-size: 0.9375em;
		line-height: 1.125em;
	}
	.btn.btn-sm{
		font-size: 0.8125em;
		line-height: 1em;
	}
	.btn.btn-lg{
		padding: 18px 30px;
	}
	.btn.btn-md{
		padding: 15px 20px;
	}
	.btn.btn-sm{
		padding: 10px 15px;
	}
}
/* md */
@media only screen and (min-width: 768px){
	.btn{
		border-radius: .25rem;
	}
	.btn.btn-lg{
		font-size: 1em;
		line-height: 1.25em;
	}
	.btn.btn-md{
		font-size: 0.9375em;
		line-height: 1.125em;
	}
	.btn.btn-sm{
		font-size: 0.8125em;
		line-height: 1em;
	}
	.btn.btn-lg{
		padding: 18px 30px;
	}
	.btn.btn-md{
		padding: 13px 20px;
	}
	.btn.btn-sm{
		padding: 10px 15px;
	}
}
/* lg */
@media only screen and (min-width: 992px){
	
}
@media only screen and (min-width: 1200px){

}
/* xl */
@media only screen and (min-width: 1281px){
	.btn{
		border-radius: .3vw;
	}
	.btn.btn-lg{
		padding: 1vw 2vw;
	}
	.btn.btn-md{
		padding: 12px 15px;
	}
}
.btn-wrapper-flex{
    width: 100%;
}
button.btn-flex{
    width: 100%;
}
/* Swtich btn */
.button-cover{
    position: relative;
    width: 70px;
    height: 30px;
    margin: auto;
}
.button-cover > .button.r{
    border-radius: 100px;
    width: 100%;
    height: 100%;
    position: relative;
}
.button-cover > .button.r .layer {
    border-radius: 100px;
    background-color: #c4c4c4;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.3s ease all;
    z-index: 1;
}
.button-cover.disabled{
    opacity: .5;
    cursor: not-allowed;
}
.button-cover.disabled input{
    cursor: not-allowed;
}
.knobs {
    z-index: 2;
    position: relative;
    top:0 ;
}
.checkbox {
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
    position: absolute;
    top:0 ;
    left: 0;
}
.checkbox:disabled{
    cursor: not-allowed !important;
}
.button-cover > .button.r .checkbox:checked + .layer {
    background-color: var(--color-blue) !important;
}
.button-cover > .button.r .knobs:before {
    content: "";
    position: absolute;
    top: 1px;
    right: 40px;
    width: 20px;
    height: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 12px;
    background-color: white;
    border-radius: 50%;
    border:  2px solid var(--color-blue);
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}
.button-cover > .button.r .checkbox:checked + .layer + .knobs:before {
    content: "";
    right: 0;
    background-color: white;
    border:  2px solid var(--color-blue);
}
.button-cover > .button.r .knobs,
.button-cover > .button.r .knobs:before,
.button-cover > .button.r .layer {
    transition: 0.3s ease all;
}
/* end switch btn */

/**** breadcrumbs ****/
.breadcrumbs{
    font-size: small;
    margin: 1rem 0;
    font-weight: 700;
    color: var(--color-blue);
}
.breadcrumbs span{
    padding: 0.5rem 0;
}
.breadcrumbs span:not(:last-child){
    margin-right: 0.5rem;
}
.breadcrumbs span:hover{
    font-weight: 700;
}

/***** MAIN BODY  *****/
.page-container{
    position: relative;
    height: 100%;
    overflow: hidden;
}
/* to set the body width and height */
#mainbody-area{
    position: relative;
    height: calc(100vh - 49px);
    display: flex;
    overflow: hidden;
}
#mainbody-area > .body-area{ 
    flex:1;
    position: relative;
} 
.body-area{
    /* max-width: calc(100% - 60px); */
    overflow-y: auto;  
}

/** TOP MENU **/
.page-container > .menu-bar{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    z-index: 11;
    padding: 8px var(--padding-menu);
    background-color: white;

    color: var(--color-gray-dark);
    font-family: 'Noto Sans', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 16px;
}
/* logo toggle */
.page-container > .menu-bar > .sidemenu-toggle{
    /* margin-right: calc(16px + var(--padding-menu)); */
    cursor: pointer;
}
@media only screen and (max-width: 600px){
    .page-container > .menu-bar > .sidemenu-toggle img{
        height: 25px;
        width: auto;
    }
    
}
@media only screen and (min-width: 768px){
    .page-container > .menu-bar > .sidemenu-toggle img{
        height: 52px;
        width: auto;
    }
}
@media only screen and (min-width: 1281px){
    .page-container > .menu-bar > .sidemenu-toggle img{
        height: 52px;
        width: auto;
    }
}

.page-container:not(.slide-in) > .menu-bar > .sidemenu-toggle > div{
    width: var(--logo-close-size);
    overflow: hidden;
}
.page-container:not(.slide-in) > .menu-bar > .sidemenu-toggle{
    width: var(--logo-close-size);
    overflow: hidden; 
    transition: width var(--animation-time) ease var(--delay-time);
}
.page-container.slide-in > .menu-bar > .sidemenu-toggle{
    width: 200px;
    overflow: hidden;
    transition: width var(--animation-time) ease;
}
.page-container.slide-in > .menu-bar > .sidemenu-toggle > div{
    width: 200px;
    overflow: hidden;
} 

/***** SIDE MENU  *****/
/* background */
.page-container .sidemenu-wrapper{
    /* width transition with delay */
    transition: width var(--animation-time) ease var(--delay-time); 
    width: 95px;
    
    /* need to lock down the font and size in case of overrides */
    background-color: #ffffff !important;
    color: var(--color-gray-darker) !important;
    font-family: 'Noto Sans', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 16px !important;

    border-right: solid 1px var(--color-gray-mid);
    height: 100%;
}
.page-container.slide-in .sidemenu-wrapper{
    /* width transition without delay */
    transition: width var(--animation-time) ease ; 
    display: block;
    width: 220px;
}
/* hiding the option text during the slide animation */
.page-container:not(.slide-in) .shrink-hide{
    opacity: 0;
    color: var(--color-gray-dark);
    transition: all var(--animation-time) ease;
}
.page-container .shrink-hide{
    opacity: 1;
    transition: all var(--animation-time) ease calc(var(--delay-time) - 0.05s);
}

/* don't show tool tip when open, or if inactive */
.page-container.slide-in .sidemenu-wrapper > .sidemenu .ptooltip:hover .ptooltiptext,
.page-container .sidemenu-wrapper .sidemenu-inactive.ptooltip:hover > .ptooltiptext{ 
    visibility: hidden;
    opacity: 0;
}
.sidemenu-wrapper > .sidemenu{
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.sidemenu-wrapper > .sidemenu > div > a{
    height: 22px !important;   
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    text-decoration: none !important;

    color: var(--color-gray-dark) !important;
    font-family: 'Noto Sans', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 16px !important;
}

.page-container:not(.slide-in) > div > div > div > .sidemenu-wrapper > .sidemenu > div > a > span.shrink-hide{
    display: none;
}
.page-container:not(.slide-in) > div > div > div > .sidemenu-wrapper > .sidemenu > #sidemenu-profile > .sidemenu-profile-img img{
    width: -webkit-fill-available;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
}
.page-container.slide-in > div > div > div > .sidemenu-wrapper > .sidemenu > #sidemenu-profile > .sidemenu-profile-img img{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    object-fit: cover;
    
}
.page-container:not(.slide-in) > div > div > div > .sidemenu-wrapper > .sidemenu > #sidemenu-profile > .sidemenu-profile-img > span.cg{
    font-size: 4rem;
}
.page-container.slide-in > div > div > div > .sidemenu-wrapper > .sidemenu > #sidemenu-profile > .sidemenu-profile-img > span.cg{
    font-size: 6rem;
}
.profile-img span.cgl-person-business{
    font-size: 8rem;

}
.profile-img span.cgl-pencil{
    font-size: 1rem;
}
.sidemenu-wrapper > .sidemenu > div{ 
    width: 100%;
    padding-top: 2rem;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.sidemenu-wrapper > .sidemenu > div:not(:first-child){
    padding: 0.8rem 20px;
}
div.status-wrapper{
    position: absolute; 
    justify-content: center;

}

.status-info{
    border-radius: 50%;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    left: 120px;
    top: -40px;
}

.status-info.online,
.profile-status-info.online{
    background-color: #00FF2B;
}
.status-info.onleave,
.profile-status-info.onleave{
    background-color: #2F00FF;
}
/* .status-info.offline,
.profile-status-info.offline{
    background-color: #7B7B7B;
    border-radius: 50%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    bottom: 0;
    right: 0;
} */
.status-info img,
.profile-status-info img{
    max-width: 20px;
    max-height: 20px;
}

.sidemenu-wrapper > .sidemenu > div#sidemenu-profile{
    width: 100%;
    padding: 12px 20px;
    display: initial;
    text-align: center;
    align-items: center;
    cursor: pointer;
}
h3#sidemenu-name{
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden;
}
.sidemenu-wrapper > .sidemenu > div#sidemenu-collapse{
    width: 100%;
    /* padding: 0 20px; */
    margin-bottom: 1.5rem;
}
.sidemenu-wrapper > .sidemenu > div:not(.flex-vfiller):not(#sidemenu-logout):not(.selected):hover{
    background-color: var(--color-lightgray);
}
.sidemenu-wrapper > .sidemenu > div.selected:hover{
    background-color: var(--color-lightgray);
}
.sidemenu-wrapper > .sidemenu > div.selected{ 
    background-color: var(--color-lightgray);
    
}
.sidemenu-wrapper > .sidemenu > div.selected > a > span.cgl-chevron-left{
    transform: rotate(270deg);
}

.sidemenu-wrapper > .sidemenu > .sidemenu-inactive{
    opacity: .2;
}
.sidemenu-wrapper > .sidemenu > .sidemenu-inactive > a{
    cursor: not-allowed;
}
/* .sidemenu-wrapper > .sidemenu > #sidemenu-logout{
    background-color: var(--color-gray-mid);
}
.sidemenu-wrapper > .sidemenu > #sidemenu-logout:hover{
    background-color: var(--color-gray-light);
} */

/******  MOBILE MENU ******/
.mobilemenu-toggle{
    margin-right: 1rem;
    cursor: pointer;
}
.mobilemenu-toggle:not(.open) > span.cgl-menu-hamburger,
.mobilemenu-toggle.open > span.cgl-times{
    display: none;
}
.dropdown-sidecontent {
    position: absolute;
    background-color: #ffffff;
    min-width: 200px;
    width: 40%;
    padding: 0.5rem 0 1rem 0;
    border-radius: 4px;
    overflow: auto;
    box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.2);
    
    z-index: 11;
    animation-name: fadeLeft;
    animation-duration: 0.5s;
    transform-origin: top right;
    transform: scale(0.1);
    animation-fill-mode: forwards;
    opacity: 0;
    
}
.dropdown-sidecontent div {
    cursor: pointer;
    margin: 1rem 1rem;
    padding-bottom: 1rem;
    border-bottom: solid 1px var(--color-gray-light);
}
.dropdown-sidecontent div:hover {
    cursor: pointer;
    font-weight: 700;
}
.dropdown-sidecontent a{
    color: #282828;
    text-decoration: none;
} 

@keyframes fadeLeft{
    from{
        opacity: 0;
        transform: translateX(-50px);
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
} 
#accesslevel_top[data-accesslevel="Admin"],
#accesslevel_top[data-accesslevel="Super Admin"]{
    background-color: var(--color-blue);
    color:white; 
    padding: 0.2rem 0.5rem;
    font-weight: 700;
    border-radius: 5px;
    margin-right: 1rem;
}
#accesslevel_top{
    background-color: var(--color-lightblue);
    color: var(--color-blue);
    padding: 0.2rem 0.5rem;
    font-weight: 700;
    border-radius: 5px;
    margin-right: 1rem;
}

/* Username Dropdown */
.dropdown{
    position:relative;
}
span.cgl-clock{
    top: 3px;
    left: -20px;
    position: absolute;
}
.username-top,
.time-change{
    margin-right: 1rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--color-blue);
    align-items: center;
}

.username-top:hover,
.time-change:hover{
    text-decoration: underline;
    cursor: pointer;
}
.time-change > span > img{
    max-width: 50px;
    max-height: 20px;
}

.dropdown-content div#sidemenu-logout{
    margin-top: 5rem;
}
.dropdown-content {
    position: absolute;
    background-color: #ffffff;
    min-width: 260px;
    padding: 0.5rem;
    border-radius: 4px;
    overflow: auto;
    overflow: hidden;
    box-shadow: -2px 5px 8px 0px rgba(0,0,0,0.2);
    right: 0;
    top: 45px;
    z-index: 1;
    animation-name: fadeIn;
    animation-duration: 0.5s;
    transform-origin: top right;
    transform: scale(0.1);
    animation-fill-mode: forwards;
    opacity: 0;
    
}

@keyframes fadeIn{
    from{
        opacity: 0;
        transform: translateX(50px);
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
}
.dropdown-content div {
    cursor: pointer;
    padding: .5rem;
}
.dropdown-content div:hover{
    background-color: var(--color-blue);
    color: white;
    font-weight: 700;
}

.dropdown-content a{
    color: inherit;
    text-decoration: none;
}

/* content */
.section-container{
    margin: var(--padding-universal-top) var(--padding-universal);
}
table.tg-table > tbody tr:hover{
    background-color: var(--color-lightblue);
    cursor: pointer;
}
/***** SPINNER  *****/
.spinner-overlay{ /* cannot combine with div-overlay as it's different */
    position: absolute; 
    top: 0; 
    left:0; 
    width: 100%; 
    height: 100%; 
    background-color:rgba(0,0,0, 0.8);
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 20;
    opacity: 1;
    transition: opacity .5s ease;
    font-size: 16px !important;
}
.spinner-overlay > div{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.spinner{
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: inline-block;
    border-top: 5px solid transparent;
    border-left: 5px solid var(--cs-yellow-dark);
    border-right: 5px solid var(--cs-yellow-dark);
    border-bottom: 5px solid var(--cs-yellow-dark);
    transform: rotate(45deg);
}
.spinner-text{
    color: rgba(255,255,255,0.6);
    width: 100%;
    text-align: center;
    margin-top: 1rem;
}
.spinner-overlay.fade{
    opacity: 0;
}
.spinner-overlay:not(.show){
    display: none;
}
@-webkit-keyframes rotating /* Safari and Chrome */{
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    }
    @keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.rotating {
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
}
/** end of spinner **/
/***** ALERT  *****/
.alert-overlay:not(.need-confirm) .alert-footer{
    display: none;
}
.alert-overlay{ /* cannot combine with div-overlay as it's different */
    position: absolute; 
    top: 0; 
    left:0; 
    width: 100%; 
    height: 100%; 
    background-color:rgba(0,0,0, 0.8);
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 20;
    opacity: 1;
    transition: opacity .5s ease;
    font-size: 16px;
}
.alert-wrapper.error .alert-icon,
.alert-wrapper.error .alert-title{
    color:var(--cs-red) !important;
}
.alert-wrapper.error .alert-bar{
    background-color:var(--cs-red) !important;
    color:white !important;
}
.alert-wrapper.warning .alert-icon,
.alert-wrapper.warning .alert-title{
    color:var(--cs-orange) !important;
}
.alert-wrapper.warning .alert-bar{
    background-color:var(--cs-orange) !important;
    color:white !important;
}
.alert-wrapper.info .alert-icon,
.alert-wrapper.info .alert-title{
    color:var(--cs-blue) !important;
}
.alert-wrapper.info .alert-bar{
    background-color:var(--cs-blue) !important;
    color:white !important;
}
.alert-wrapper.success .alert-icon,
.alert-wrapper.success .alert-title{
    color: var(--cs-green) !important;
}
.alert-wrapper.success .alert-bar{
    background-color:var(--cs-green) !important;
    color:white !important;
}
.alert-content{
    padding: 16px 32px; 
    text-align:center;
    margin: 16px 0;

    font-family: 'Noto Sans', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 16px !important;
}
.alert-desc{
    color: var(--cs-gray-dark);
}
.alert-wrapper h3.alert-title{
    font-size: 19px !important;
    letter-spacing: initial !important;
    font-weight: 700 !important;
}
.alert-bar{
    text-align:right; 
    width: 100%; 
    padding: 8px 12px; 
    background-color: var(--cs-gray-dark); 
    color: var(--cs-yellow-dark);
}
.alert-bar > span{
    cursor:pointer;
}
.alert-wrapper{
    background-color: white; 
    border-radius: 0 0 4px 4px; 
    min-width: 300px; 
    min-height: 200px;
    font-size: 16px;
    width: fit-content;
    padding: 0;
    border: 0;
}
.alert-footer{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.alert-icon{
    margin: 0;
    font-size: 32px;
}
.alert-overlay.fade{
    opacity: 0;
}
.alert-content input{
    color: var(--cs-gray-dark) !important;
}
.alert-overlay:not(.show){
    display: none;
}
/** end of alert **/

/* tabs */
.tab-wrap{
    border-bottom: 2px solid var(--color-blue);
    text-align: center;
}
.tab-list{
    padding: 0.5rem 1rem;
}
.tab-list:hover,
.tab-list.is-active{
    font-weight: 700;
    background-color: var(--color-blue);
    color: white;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
}
.tab-content{
    padding: 0 0 .5rem 0;
}
.section-text{
    padding:1rem 2rem;
    background-color: white;
    border-radius: 10px;
    box-shadow: 2px 2px #DEDEDE;
    margin-bottom: var(--padding-universal-top);
}

/*
.profile-img{
    position: relative;
    display: inline-block;
}
#profile-card{
    min-width: 250px;
    height: fit-content;
    text-align: center;
}
#profile-card .profile-img{
    box-sizing: border-box;
    max-height: 140px;
}
#profile-card-mobile .profile-img{
    box-sizing: border-box;
    margin-right: 2.5rem;
}
#profile-card .profile-img img,
#profile-card-mobile .profile-img img{
    border-radius: 50%;
    width: 120px;
    height: 120px;
    object-fit: cover;
}
#profile-card > .section-text,
#profile-card-mobile > .section-text{
    text-align: center;
}
#profile-body{
    flex:1;
}
@media only screen and (min-width: 768px) {
    #profile-card{
        margin-right:1.5rem; 
    }
}*/

.label, label {
    margin-top: 0.5rem;
    margin-bottom: 0;
    text-align: left;
    font-size: 12px;
    color: rgb(118, 118, 118);
    text-transform: uppercase;
} 
.co-input-wrapper{
    position: relative;
    width: 100%;
}
.co-input-wrapper > .input-mask{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.co-input-wrapper > .input-mask.hidden{
    display: none;
}
.co-input-wrapper > label{
    position: absolute;
    left: 1rem;
    top: .3rem;
} 
.co-input-wrapper > input{
    border: solid 1px #8e8e8e;
    padding-top: 28px;
    font-weight: bold;
    outline: none;
    color: rgb(40, 40, 40);

}

.co-input-wrapper > input:focus,
.co-input-wrapper > select:focus{
    border: solid 1px var(--color-orange);
}
.co-input-wrapper > input:focus + label,
.co-input-wrapper > select:focus + label{
    color: var(--color-orange);
    font-weight: bold;
}
.co-input-wrapper > select{
    border: solid 1px #8e8e8e;
    background-color: white;
    font-weight: bold;
    outline: none;
    appearance: none;
    border-radius: .25rem;
    width: inherit;
    height: 58px;
    font-size: 1rem;
    margin: 2px;
    margin-bottom: 1rem;
    padding-top: 1.5rem;
    padding-left: 1rem;
}
.co-input-wrapper > select:disabled{
    font-weight: bold;
    outline: none;
    appearance: none;
    border: none;
    border-radius: .25rem;
    background-color: #f6f6f6;
    width: inherit;
    height: 58px;
    font-size: 1rem;
    margin: 2px;
    margin-bottom: 1rem;
    padding-top: 1.5rem;
    padding-left: 1rem;
    color: rgb(175, 175, 175);
}
.co-input-wrapper > input:disabled{
    border: solid 2px transparent;
    background-color: #f6f6f6;
    color: rgb(40, 40, 40);
    opacity: 1;
}
.co-input-wrapper > input[type="date"]:disabled{
    border: solid 2px transparent;
    background-color: #f6f6f6;
    color: black;
    opacity: 1;
}
.co-input-wrapper > select[data-hasvalue="true"],
.co-input-wrapper > input[data-hasvalue="true"],
.co-input-wrapper > input[type="date"][data-hasvalue="true"]::-webkit-datetime-edit-text,
.co-input-wrapper > input[type="date"][data-hasvalue="true"]::-webkit-datetime-edit-month-field,
.co-input-wrapper > input[type="date"][data-hasvalue="true"]::-webkit-datetime-edit-day-field,
.co-input-wrapper > input[type="date"][data-hasvalue="true"]::-webkit-datetime-edit-year-field{
    color: rgb(40,40,40) !important;
    opacity: 1 !important;
}
.required-star{
    margin-left: 0.2rem;
    color: var(--color-red);
}
.btn-group{
    display: flex;
    justify-content: right;
}
.btn-group > .btn-wrapper{
    display: flex;
}
.btn-wrapper > button:not(:last-child){
    margin-right: 0.5rem;
}

.btn-wrapper > .btn > span.cg{
    margin-right: .5rem;
}
.btn-wrapper > .btn > span.cgl-plus{
    margin: 0 !important;
}
.flex > .btn > span.cg{
    margin-right: .5rem;
}
.btn-group.editing > .btn-wrapper[data-mode="default"],
.btn-group:not(.editing) > .btn-wrapper[data-mode="editing"]{
    display: none;
}
.tg-title{
    color: var(--color-blue);
}
.status-wrap{
    padding: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}
.font-approved{
    color: var(--color-green);
}
.font-rejected{
    color: var(--color-red);
}
.font-pending{
    color: var(--color-blue);
}
.font-withdrawn,
.font-cancelled{
    color: var(--color-gray-dark);
}
.Approved{
    background-color: var(--color-lightgreen);
    color: var(--color-green);
    border-radius: 5px;
}
.Rejected{
    background-color: var(--color-lightred);
    color: var(--color-red);
    border-radius: 5px;
}
.Pending{
    background-color: var(--color-lightblue);
    color: var(--color-blue);
    border-radius: 5px;
}
.Withdrawn,
.Cancelled{
    background-color: var(--color-lightgray);
    color: var(--color-gray-dark);
    border-radius: 5px;
}

/* sections toggle */
.section-icon{
    margin: auto;
    cursor: pointer;
}
.section-icon > span > svg{ 
    transition: all ease-in .3s;
    transform: rotate(0);
}
.section-icon.is-active > span > svg{
    transform: rotate(180deg);
}
.section-content{
    display: none;
}
.section-content.show{
    display: block;
}
.section-content{
    animation-name: fadedown;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes fadedown {
    from{
        opacity: 0;
        transform: translateY(-10px);

    }
    to{
        opacity: 1;
        transform: translateY(0px);
    }
}
/**** LOGIN related ****/
.btn-orangeinblue{
    background-color: var(--color-blue);
    color: var(--color-orange);
    border-radius: 25px;
}
.area-body{
    min-height: 100vh; position: relative;
}
.area-body-left > div{
    width: 100%;
    height: fit-content;
    justify-content: center;
    align-items: center;

}
#btn-readmore{
    position: absolute;
    border-radius: 25px;
    color: var(--color-orange);
    background-color: var(--color-blue);
    bottom: 0;
    margin-bottom: 1.5rem;
    z-index: 1;
}
.area-body-right{
    background-color: white;
}
.area-body-right > div {
    display: flex;
    flex-direction: column; 
    padding: 1.5rem; 
    justify-content: center; 
    align-items: center; 
    height: 100%;
}
.logo-wrapper{
    margin: 2rem;
}
.logo-wrapper img{
    min-width: 300px;
}
#btn-readmore{
    position: absolute;
    border-radius: 25px;
    color: var(--color-orange);
    background-color: var(--color-blue);
    bottom: 0;
    margin-bottom: 1.5rem;
    z-index: 1;
}
div.modal-form-content > div.flex{
    align-items: center;
}
#readmore p{
    font-size: 0.8rem;
    margin: 0;
    margin-bottom: 1rem;
}
.readmore-wrapper{
    height: 300px;
    overflow-y: scroll;
}

#readmore div > div > span > img{
    max-width: 55px;
    max-height: 55px;
}
.readmore-wrapper > div > div img{
    max-width: 30px;
    max-height: 30px;
    padding-right: 10px;
}
/**** end LOGIN related ****/
/******** carousel *********/
.carousel-pic img{
    width: 100%;
    display: block;
    object-fit: cover;
    min-height: 100vh;
}
.carousel-pic{
    position: relative;
    z-index: 0;
}

/** carousel */
.carousel-viewer{
    width: 100%;
    /* height: 100%; */
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.carousel-wrapper{
    position: relative;
    display: flex;
    flex-wrap: nowrap;
}
.carousel-wrapper.anim{
    transition: all .5s ease-in-out;
}
.carousel-wrapper > .carousel-pic{
    flex-basis: 100%;
    flex-shrink: 0;
}
.carousel-viewer[data-image="1"] > .carousel-wrapper{
    transform: translateX(-100%);
}
.carousel-viewer[data-image="2"] > .carousel-wrapper{
    transform: translateX(-200%);
}
.carousel-viewer[data-image="4"] > .carousel-wrapper{
    transform: translateX(0%);
} 
.carousel-viewer[data-image="5"] > .carousel-wrapper{
    transform: translateX(100%);
} 
.carousel-controls{
    width: 100%;
    height:100%;
    top: 0;
    left: 0; 
    position: absolute;
    padding: var(--padding-universal-top) 2rem;
    display: flex;
    align-items: center;
}
.carousel-controls .arrow-overlay{
    width: 100%;
}
.carousel-controls .arrow-icon{
    background-color: white;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 40px;
    height: 40px;
}
.carousel-controls .arrow-right{
    margin-left: auto;
}
.carousel-controls .arrow-icon img{
    max-width: 15px;
    max-height: 15px;
}
/****** end *******/

div.time-wrapper{
    align-items: center;
    padding: 0;
}
div.time-wrapper > img{
    max-width: 50px;
    max-height: 20px;
}
@media only screen and (max-width: 600px){
    .flex.clock-wrapper{
        position: relative;
        width: 240px;
    }
    
}
@media only screen and (min-width: 768px){
    .flex.clock-wrapper{
        position: relative;
        width: 140px;
    }
}
@media only screen and (min-width: 1281px){
    .flex.clock-wrapper{
        position: relative;
        width: 140px;
    }
}
#current-timezone{
    position: absolute;
    width: 200px;
    margin-left: 0.5rem;
}

.donut-chart {
    position: relative;
}
.donut-chart svg {
    transform: rotate(-90deg);
}
.donut-text{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
}
.donut-out-label{
    text-align: center;
    margin: .5rem 0;
}
/**** dashboard *****/
.quick-data{
    color: var(--color-blue);
    text-align: right;
}
.section-header{
    align-items: center;
}
/***** leave pacakge detail css on setting/profile *****/
.leave-detail-wrapper{
    border-bottom: solid 1px #dedede;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.detail-form-row{ 
    display: flex; 
    margin-bottom: .2rem;
    align-items: center;
}
.detail-form-row > div:first-child{ 
    display: flex;
    max-width: 20%; 
    width: 100%;
}
.detail-form-row > div:last-child{ 
    display: flex;
    max-width: 80%; 
    width: 80%;
}
.detail-form-row select{
    padding: .5rem !important;
    height: 40px !important;
    width: fit-content;
}
.detail-form-row > div:last-child > div{
    margin-right: .5rem;
    margin-left: .5rem;
}
.detail-form-row > div{
    align-items: center;
}
.detail-form-row input{
    margin-bottom: 0 !important;
    padding: 10px !important;
    max-width: 80px;
}
.detail-form-row label{
    margin-top: 0;
    font-size: 1rem;
    text-transform: none;
    color: rgb(40, 40, 40);
}
.btn-form-wrapper{
    align-items: center;
}
.btn-form-wrapper div:nth-child(2){
    margin-right: 0.5rem;
    color: var(--color-red);
    text-decoration: underline;
    cursor: pointer;
}