html {
	overflow: auto;
}
#main_cube{
	padding-left:0px;
	min-height:calc(100% - 80px);
	height:auto;
	overflow: auto;
	overflow-x: hidden;
}
@media only screen and (max-width : 992px) {
	#main_cube {
	padding-left: 0;
	padding-top:0px;
	min-height:10vh;
	}
}
#alert_cube{
	position: fixed;
	border-radius: 10px; 
	min-height:20vh; 
	min-width:50vw;
	top: 12vh;
	left: calc(50vw - (50vw / 2)); 
	cursor:copy;
	display:none;
	background-color:white;
	color:var(--color_3);
	padding:0px;
	box-shadow: 3px 3px 4px 4px var(--color_2);
}
@media screen and (max-width: 660px) {
	#alert_cube{
		position: fixed;
		border-radius:10px; 
		min-height:20vh; 
		width:90vw;
		top: 10vh;
		left: calc(5vw); 
		cursor:copy;
		display:none;
		border:2px solid var(--color_3);
		color:var(--color_3);
		background-color:var(--color_3);;
		padding:15px;
	}
}

.body {
	background: White;
	color: var(--color_text_dark);
	font-size: 11pt;
	height:auto;
	overflow: auto;
}
.container {
	width: 96%;
	background-color: transparent;
	color: var(--color_text_dark);
}
.container-fluid {
	margin: 0px !important;
	padding: 0px 8% !important;
}
::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}
::-webkit-scrollbar-thumb {
	background: var(--color_4); 
}
.row {
	margin: 0px;
}

/* text font size */
.h1{
    font-size: 2.3vh;

    @media screen and (min-width: 1600px) and (max-width: 2559px) {
        font-size: 2.6vh;
    }
}
.h2{
    font-size: 2vh;

    @media screen and (min-width: 1600px) and (max-width: 2559px) {
        font-size: 2.3vh;
    }
}
.h3{
    font-size: 1.7vh;

    @media screen and (min-width: 1600px) and (max-width: 2559px) {
        font-size: 2vh;
    }
}
.h4{
    font-size: 1.4vh;

    @media screen and (min-width: 1600px) and (max-width: 2559px) {
        font-size: 1.7vh;
    }
}
.h5{
    font-size: 1.1vh;

    @media screen and (min-width: 1600px) and (max-width: 2559px) {
        font-size: 1.4vh;
    }
}
.h6{
    font-size: 0.8vh;

    @media screen and (min-width: 1600px) and (max-width: 2559px) {
        font-size: 1.1vh;
    }
}

label {
	font-size: 0.9rem;
	color: var(--color_7); 
	text-transform:capitalize;
	padding-left:3p;
	font-weight:600px;
}
table {
	border-radius:5px;
} 
table, th, tr{
	border-top:1px solid var(--color_7);
	font-size:0.7vw;
} 
table.highlight > tbody > tr{
	color: var(--color_6);
}
table.highlight > tbody > tr:hover{
	background-color:var(--color_3);
	color:var(--color_text_light);
	cursor:pointer;
}
a {
	color:white;
}
a:hover {
	color: var(--color_accent);
	cursor:pointer;
}
a:active {
	color:var(--color_accent);
	cursor:pointer;
}
.hoverable{
    cursor: pointer;
    transition: filter 0.3s ease;
}
.hoverable:hover{
    box-shadow: 0 0 15px var(--color_cancel);
    filter: brightness(1.1);
}
.hoverable_text:hover{
	cursor: pointer;
    text-decoration: underline;
}
.tooltipped{
	cursor: pointer;
}
.chip {
	display: inline-block;
	height: 32px;
	font-size: 13px;
	font-weight: 500;
	color: var(--color_6);
	line-height: 32px;
	padding: 0 12px;
	border-radius: 16px;
	border: 1px solid var(--color_6);
	background-color: white;
	margin-bottom: 5px;
	margin-right: 5px;
}
.collection {
	margin: .5rem 0 1rem 0;
	border: none;
	border-radius: 2px;
	overflow: hidden;
	position: relative;
}
.collection-item{
	cursor: pointer;
	background-color: var(--color_3);
	color: white;
	padding-top: 15px;
	padding-bottom: 15px;
	border:1px solid var(--color_2);
}
.collection-item:hover{
	border:1px solid var(--color_accent) !important;
	color: var(--color_accent) !important;
	background-color: var(--color_3);
}
.child_menu{
	color:var(--color_7);
	background-color:var(--color_2);
	cursor:pointer;
	padding-top:5px;
	padding-left:30%;
	height:35px;
	border-bottom:1px dotted var(--color_4);
}
.child_menu:hover{
	color:var(--color_3);
	background-color:var(--color_5);
}

.pagination li.active{
	background-color:var(--color_accent);
}
/* class with animation */

/* input, select, textarea */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
textarea{
    background-color: var(--color_8);
    color: var(--color_1) !important;
    border: unset;
    padding: 1vh;
    color-scheme: black;

}

input::placeholder {
    color: var(--color_1);
}

/* Remove increase and decrease in input type number */
/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

/* filter and search for every page */
.filter_container{
    gap: 1vh;
    display: flex;
}

.filter,
.search_container,
.input_container{
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    background-color: white;
    border: 0.1vh solid var(--color_cancel);
    border-radius: 1vh;
    height: 3rem;
    color: var(--color_text_dark);
    overflow: hidden;

    @media screen and (min-width: 1600px) and (max-width: 2559px) {
        height: 4rem;
    }
}
.input_container{
    padding: 1vh;
}
.input_container div,
.input_container input[type="text"],
.input_container input[type="number"],
.filter input[type="text"],
.search_container input[type="text"]{
    flex-grow: 1; /* Make the input take up available space between the icons */
    padding: 1vh 0;
    background-color: transparent;
}

.filter .material-icons,
.filter .material-symbols-outlined,
.search_container .material-icons,
.search_container .material-symbols-outlined {
    padding: 0 0.4vw 0 0.5vw;
    color: var(--color_text_dark) !important;
    font-size: 1.3vh;

    @media screen and (min-width: 1600px) and (max-width: 2559px) {
        font-size: 2vh;
    }
}
.filter .material-icons,
.filter .material-symbols-outlined{
    color: var(--color_1);
}

.search_container .loading_circle{
    padding: 0;
    margin: 0 0.5vw 0 0.3vw;
    color: var(--color_3);
    display: none;
}

.spinning_loader{
	opacity:.8;  
	display:none;  
	text-align: center; 
	position:fixed; 
	width:100%; 
	height:100%; 
	top:0; 
	left:0; 
	padding-top:25%;
    padding-left: 50%;
}

.spin {
    animation: spin 500ms linear infinite;
    font-size: 48px; /* Adjust size as needed */
    display: block !important;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.but{
    text-decoration: none;
    transition: filter 0.3s ease;
    cursor: pointer;
    outline: 0;
    height: inherit;
    padding: 1vh;
    background-color: var(--color_1);
    border-radius: 1vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color_text_light);
}
.but.disabled,
.but:disabled,
.but.disabled:hover,
.but:disabled:hover{
	background-color: var(--color_cancel);
	color: black;
	border-color: var(--color_cancel);
	cursor: not-allowed;
	box-shadow: unset;
}

.btn {
	text-decoration: none;
	text-align: center;
	letter-spacing: .5px;
	transition: .2s;
	cursor: pointer;
	font-size: 12px;
	outline: 0;
	border: none;
	border-radius: 10px;
	display: inline-block;
	height: 43px;
	line-height: 39px;
	min-width: 58px;
	padding: 0 1rem;
	text-transform: uppercase;
	vertical-align: middle;
	opacity: 0.80;
	background-image: linear-gradient(var(--color_2), var(--color_4));
	border: 1px solid var(--color_3);
	color: white;
	margin-right: 5px;
	font-weight: 400;
}
.btn:hover{
	background-color:var(--color_7);
	border:1px solid var(--color_3);
	color:var(--color_accent); 
	opacity: 1; 
}		
.btn:active{
	color:var(--color_accent_fb);
	opacity: 1; 
}	
.btn:focus{
	background-color:var(--color_accent_fb);
	border:1px solid var(--color_accent_fb);
	color:white; 
	opacity: 1; 
}
.cancel
{
	background-color:var(--color_cancel);
	border:1px solid var(--color_cancel);
	color:white;
}
.cancel:hover{
	background-color: var(--color_7);
	border:1px solid var(--color_8);
	color:var(--color_8); 
}
.accent{
	background-color:var(--color_accent);
	border:1px solid var(--color_accent);
	color:white;
}
.accent:hover{
	background-color: var(--color_7);
	border:1px solid var(--color_8);
	color:var(--color_8); 
}
/* .flow{
	background-color: var(--color_flow);
	border: 1px solid var(--color_flow);
	color: white;
}
.flow:hover{
	background-color: var(--color_7); 
	border: 1px solid var(--color_flow);
	color: var(--color_flow);
} */
.add{
	background-color:var(--color_accent_fb);
	border:1px solid var(--color_accent_fb);
	color:white;
}
.add:hover{
	background-color: var(--color_7); 
	border:1px solid var(--color_accent_fb);
	color:var(--color_text_dark);
}
.delete{
	background-color: red;
	border: 1px solid red;
	color: white;
}
.delete:hover{
	background-color: var(--color_7); 
	border:1px solid var(--color_accent);
	color:var(--color_text_dark);
}
.alert{
	background-color:var(--color_alert);
	border:1px solid var(--color_alert);
	color:white;
}
.alert:hover{
	background-color: var(--color_7); 
	border:1px solid var(--color_3);
	color:var(--color_text_dark);
}
.search{
	background-color:var(--color_flow);
	border:1px solid var(--color_flow);
	color:white;
}
.search:hover{
	background-color: var(--color_flow); 
	border:1px solid var(--color_accent);
	color:var(--color_accent);
}
.logout{
	cursor:pointer; 
	border: 1px solid var(--color_3); 
	border-radius:7px; 
	height:55px; 
	padding:12px; 
	text-align:center;
	font-size: 18px; 
	text-transform:uppercase; 
	color:var(--color_3); 
	font-weight:600;
	margin-top:12px;
	line-height: 53px;
}
.logout:hover{
	border: 1px solid var(--color_accent);
	background-color: var(--color_accent);
	color:white;
}

.incorrect_input{
	border: 2px solid red !important;
	background-color: var(--color_8) !important;
}
.draggable {
	cursor: move; /* fallback: no `url()` support or images disabled */
	cursor: url(images/grab.cur); /* fallback: Internet Explorer */
	cursor: -webkit-grab; /* Chrome 1-21, Safari 4+ */
	cursor:    -moz-grab; /* Firefox 1.5-26 */
	cursor:         grab; /* W3C standards syntax, should come least */
}
.draggable:active {
	cursor: url(images/grabbing.cur);
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
}

.tile{
	cursor:pointer;
	border-bottom:1px solid var(--color_7);
}
.tile:hover{
	background-color:var(--color_8);
}
.editable{
	padding: 5px;
	border-radius: 2px;
}
.editable:focus{
	border:1px solid var(--color_2);
	padding: 5px;
	border-radius: 2px;
	width:100%;
	background-color:var(--color_8);
}
.color_picker{
	border-radius:5px; 
	height:50px; 
	width:50px;
	cursor:copy;
	display:inline-block;
}
.color_picker.active{
	border:3px solid var(--color_accent); 
	border-radius:25px; 
	height:50px; 
	width:50px;
	animation: wobble 5s ease-in-out alternate infinite;
}
.color_picker:hover{
	border-radius:5px; 
	border:3px solid var(--color_accent); 
	height:50px; 
	width:50px;
}	  
@keyframes wobble {
	50% {
		border-radius: 10px / 25px;
	}
	100% {
		border-radius: 25px / 25px;
	}
}
@keyframes heartbeat {
	0% {
		transform: scale( .75 );
	}
	20%{
		transform: scale( 1 );
	}
	40%{
		transform: scale( .85 );
	}
	60%{
		transform: scale( 1 );
	}
	80%{
		transform: scale( .75 );
	}
	100%{
		transform: scale( .85 );
	}
}

nav ul li.active { 
	background-color: var(--color_6); 
}
.material-icons {
	display: inline-flex;
	vertical-align: top !important;
}
.input-field input[type=text]:focus {
	color: var(--color_6) !important;
}
.input-field .prefix.active {
	color: var(--color_6) !important;
}
.input-field input[type=text]:focus + label {
	color: var(--color_6) !important;
}
.input-field label {
	color: var(--color_8); 
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: var(--color_text_dark);
	opacity: 0.4; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: var(--color_text_dark);
	opacity: 0.4;
}
::-ms-input-placeholder { /* Microsoft Edge */
	color: var(--color_text_dark);
	opacity: 0.4;
}

.filter,
.search_container,
.input_container{
    display: flex;
    align-items: center;
    width: 100%;
    background-color: white;
    border: 0.1vh solid var(--color_cancel);
    border-radius: 0.5vh;
    height: 3rem;
    color: var(--color_text_dark);

    @media screen and (min-width: 1600px) and (max-width: 2559px) {
        height: 4rem;
    }
}
.input_container{
    padding: 1vh;
}
.input_container div,
.input_container input,
.filter input,
.search_container input{
    flex-grow: 1; /* Make the input take up available space between the icons */
    padding: 1vh 0;
    background-color: transparent;
	height: inherit;
	border: unset;
}
/* Hide the number input spinners */
.input_container input[type="number"]::-webkit-outer-spin-button,
.input_container input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

.project_scrollbar{
	margin-left: 1px;
	float: left;
	background-color:transparent;
	overflow-y: scroll;
	margin-bottom: 25px;
}
.project_scrollbar::-webkit-scrollbar-track{
	/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);*/
	border-radius: 0px;
	background-color:var(--color_3);
}
.project_scrollbar::-webkit-scrollbar{
	width: 12px;
	background-color: var(--color_4);
}
.project_scrollbar::-webkit-scrollbar-thumb{
	border-radius: 10px;
	background-color: var(--color_2);
	background-image: -webkit-linear-gradient(90deg,
	transparent,
	rgba(0, 0, 0, 0.4) 50%,
	transparent,
	transparent)
}

.project_field{
	border: 1px solid var(--color_text_dark);
	border-radius: 5px;
	outline: none;
	width: 100%;
	height: 3rem;
	font-size: 1.2rem;
	padding-left: 1.2rem;
	cursor: pointer;
	margin-bottom: 5px;
	color: var(--color_6);
}
.project_field:disabled{
	border: 0px solid white;
}
.project_field:hover{
	border: 1px solid var(--color_6);
}
.project_field:disabled:hover{
	border: 0px solid white;
}
.project_field:focus{
	border: 2px solid var(--color_6);
	background-color: white;
	outline: none;
	
}
.project_field:active{
	border: 2px solid var(--color_6);
	background-color: white;
	outline: none;
}
.project_select{
	border: 1px solid var(--color_text_dark);
	border-radius: 5px;
	outline: none;
	width: 100%;
	height: 3rem;
	font-size: 1.2rem;
	padding-left: 1.2rem;
	color: var(--color_6);
	cursor: pointer;
	margin-bottom: 5px;
}
.project_select:hover{
	border: 1px solid var(--color_6);
	
}
.project_select:focus{
	border: 2px solid var(--color_6);
	background-color: white;
	outline:none;
}
.project_select:active{
	border: 2px solid var(--color_6);
	background-color: white;
	outline: none;
}
.project_select:disabled{
	border: 0px solid white;
}
select option {
	margin: 40px;
	background: white;
	color: var(--color_6);
	text-shadow: 0 1px 0 var(--color_8);
	cursor: pointer;
}
.flip{
	transform: rotate(-180deg);
}
.flipswitch_on{
	transform: scaleX(-1);
	color:var(--color_flow);
}
.flipswitch{
	cursor: pointer;
}
.ico_expand{
	-moz-transition: transform 1s;
	-webkit-transition: transform 1s;
	transition: transform 1s;
	cursor: nw-resize;
}
.tabs .tab a {
	font-size: 10pt;
	color: var(--color_2);
}
.tabs .tab a:hover {
	color:var(--color_accent);
}
.tabs .tab a:focus.active {
	color:var(--color_accent);
	
}
.tabs .tab a.active {
	color:var(--color_accent);
	font-weight:bold;
}
.tabs .indicator {
	background-color:var(--color_accent);
}
.swirf_tabs{
	padding-top:0.5rem;
	padding-bottom:0.5rem;
	color:var(--color_7);
	background-color: var(--color_1);
	font-size: 1.5rem;
	cursor:pointer;
}
.swirf_tabs:hover{
	color:var(--color_accent);
	cursor:pointer;
}
.swirf_tabs.active{
	color:var(--color_accent);
	background-color: var(--color_4);
	font-weight:bold;
}

.valign_wrapper_center{
    display: flex;
    align-items: center;
    justify-content: center;
}
.valign_wrapper_right{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.valign_wrapper_right_gap_1{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    column-gap: 1vh;
}
.valign_wrapper_between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.valign_wrapper {
    display: flex;
    align-items: center;
}
.flex_container{
    display: flex;
}
.flex_container_column{
    display: flex;
    flex-direction: column;
}
.flex_container {
    display: flex;
}
.flex_container_between {
    display: flex;
    justify-content: space-between
}

.flex_container_end {
    display: flex;
    justify-content: right;
    align-items: end;
}

.invalid,
.invalid_input {
    border: 2px solid var(--color_alert) !important;
}

.error_message {
    margin-top: 1vh;
    padding-left: 1vh;
    font-size: 1vh;
    color: var(--color_alert);
}

.background_image_cover{
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.background_image_contain{
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

/* pop up */

.popup_overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99;
}

.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 5vw;
    min-height: 5vh;
    transform: translate(-50%, -50%);
    padding: 2vh;
    background: white;
    border: 2px solid var(--color_1);
    border-radius: 1vh;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index:100;
}
.btn_popup_close {
    position: absolute;
    top: 3vh;
    right: 1.5vw;
    cursor: pointer;
}
/* pop up */
#popup_overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: black;
    opacity: 0.6;
}
#popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 2vmin;
    background-color: var(--color_text_light) !important;
    padding: 12px 2vmin 2vmin 2vmin;
    min-width: 40vw;
    border: none
}
#btn_popup_close {
    text-align: right;
    cursor: pointer;
    margin-bottom: 0.3vh;
    margin-right: -6px;
}
/* --------------------------------- CRM START ----------------------------------- */
#cancel_btn {
    padding: 1vh 3vh; 
    background-color: var(--color_4); 
    border-radius: 1vmin; 
    color: var(--color_7); 
    text-align: center; 
    cursor: pointer
}

#save_btn {
    padding: 1vh 3vh; 
    background-color: var(--color_1); 
    border-radius: 1vmin; 
    color: var(--color_7); 
    text-align: center; 
    cursor: pointer
}

.filter_icon_crm {
    background-color: var(--color_1); 
    padding: 0.5vh; 
    border-radius: 1vmin; 
    color: var(--color_8); 
    cursor: pointer; 
    height: fit-content
}

.valign_wrapper_gap_1 {
    display: flex;
    align-items: center;
    column-gap: 1vh
}

.btn_container {
    display: flex; 
    padding: 1vh; 
    justify-content: right; 
    column-gap: 1vh
}

#crm_tags_cube {
    padding: 2vh 0;
}

.filter_container .filter {
    padding: 0.5vh
}

.crm_main_body {
    background-color: var(--color_text_light); 
    border-radius: 1vh; 
    margin-top: 1.5vh; 
    padding: 1.5vh;
}

.crm_row {
    margin-bottom: 3vh
}

.tags_container {
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    row-gap: 1vh
}

.but.add_tag {
    width: fit-content; 
    padding: 0.5vh; 
    background-color: var(--color_flow)
}

.but.remove_tag {
    width: fit-content; 
    padding: 0.5vh;
    background-color: var(--color_alert)
}

.card_tag {
    padding: 0.5vh 1vh; 
    background-color: var(--color_1); 
    color: var(--color_7); 
    border-radius: 0.5vmin; 
    width: fit-content; 
    flex-shrink: 0
}

.crm_card {
    background-color: #bed4da; 
    border-radius: 1vh;
    border: 0.1vh solid var(--color_2)
}

.crm_card .row {
    padding: 1vh
}

.row_tag {
    border-top: 0.1vh solid var(--color_1); 
    overflow: hidden
}
#card_tags_cube {
    display: flex; 
    overflow-x: auto; 
    column-gap: 0.5vh; 
    width: 100%; 
    overflow-y: hidden
}

#last_interacted_cube,
#customer_outstanding_cube,
#customer_requiring_cube {
    max-height: 75vh; 
    overflow-y: auto; 
    padding-right: 2vh
}

.crm_card img {
    width: 1.5vh;
    height: 1vh;
}


/* ------------------------------ CRM DETAIL START ------------------------------- */

.back_button {
    background-color: var(--color_2)
}

.crm_detail_header {
    display: flex; 
    align-items: stretch; 
    gap: 1vh; 
    border-left: 2px solid var(--color_7);
    padding-left: 1vh;
}

.crm_section {
    padding: 1vh; 
    background-color: var(--color_text_light); 
    border-radius: 1vh
}

.crm_section.reminder {
    background-color: pink; 
}

.crm_page_content_container{
    border-radius: 1vh;
    background-color: var(--color_text_light);
    margin-top: 1.5vh;
    color: var(--color_text_light);
    padding: 1.5vh;
    display: flex;
    flex-direction: column;
    gap: 1vh;
    height: 83vh;
    overflow-y: auto;
}
/* ------------------------------ CRM DETAIL END --------------------------------- */

/* ------------------------------ QUOTATION START -------------------------------- */
#quotation_cube{
	max-height: 80vh;
	overflow-y: auto;
}

.quotation_tab {
	width: 10vw; 
	padding: 1vh; 
	border-radius: 1vh 1vh 0 0; ; 
	color: var(--color_3);
	text-align: center;
	cursor: pointer;
	transition: 0.1s;
	border-bottom: 0.2vh solid var(--color_text_light)
}
.quotation_tab:hover {
	color: var(--color_4)
}

.quotation_tab.active {
	color: var(--color_2);
	border-bottom: 0.2vh solid var(--color_2)
}

#quotation_lines_cube {
	/* max-height: 50vh;  */
	overflow-y: auto;
	border: 2px solid var(--color_7);
	padding: 0.8vh;
	margin: 1vh;
	border-radius:1vh; 
	padding:1vh;
}
.quote_line {
	display: flex;
	justify-content: space-between;
	padding: 1vh;
	margin-bottom: 1vh;
	background-color: var(--color_7);
	border: 1px solid var(--color_7);
	border-radius: 0.5vh;
    transition: 0.4s;
    cursor: pointer;
}
.quote_line:hover {
    background-color: var(--color_7)
}
.quote_line label {
	width: 100%;
	font-weight: 100;
}
.quote_field_wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.5vh;
	flex: 1;
    margin-right: 1vh;
}

/* .roller-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2vw;
}

.roller {
    width: 3.5vw; 
    height: 9vh; 
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.roller-item {
    font-size: 1.5rem;
    height: 3vh; 
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.roller-item.selected {
    font-size: 2rem;
    color: var(--color_accent);
}

.roller-item.active {
    font-weight: bold;
    transform: scale(1.2);
} */

/* Make the middle item appear as the selected one
.roller:before, .roller:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 3vh;
    background: rgba(255, 255, 255, 0.7);
    pointer-events: none;
}

.roller:before {
    top: 0;
    background: linear-gradient(white, transparent);
}

.roller:after {
    bottom: 0;
    background: linear-gradient(transparent, white);
} */

/* ------------------------------ SIGN IN ----------------------------------------- */
.auth_container{
	width: 100%;
    background-color: white;
    border: 1px solid var(--color_cancel);
    margin: 0 20%;
    border-radius: 2vh;
    padding: 6vh;
    box-shadow: 1px 5px 13px 0 var(--color_cancel);
}
.auth_container .but{
	width: 100%;
}
.auth_container .sign_in_text_1{
	color: var(--color_1);
}
.auth_container .sign_in_text_2{
	color: var(--color_cancel);
}
.auth_container input{
	border: 1px solid black;
	border-radius: 1vh;
    height: 3vh;
}
.auth_container .sign_in_text_trigger{
	font-weight: bold;
	cursor: pointer;
}
.auth_container .sign_in_text_trigger:hover{
	text-decoration: underline;
}
.auth_container #toggle_button_password{
	position: absolute;
	top: 25%;
	right: 1vw;
	cursor: pointer;
}
#back_to_sign_in{
	position: absolute;
	top: 8vh;
	left: 8vh;
	font-size: 3vh;
	cursor: pointer;
}

/* ------------------------------ SIGN UP ----------------------------------------- */
.form_container {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: white;
	border-radius: 50px;
	padding: 7rem 7rem 6rem;
	width: clamp(25vw,40vw,80vw);
	height: clamp(25vh,70vh,80vh);
}
.form_container .progress_container {
	display: flex;
	justify-content: center;
	margin-bottom: 5rem;
	gap: 3rem;
	.dot {
		width: 2rem;
		height: 2rem;
		background: #F3F2EF;
		border-radius: 100%;
		position: relative;
		&::after {
			content: "";
			width: 0;
			background: white;
			position: absolute;
			top: 50%;
			left: 100%;
		}
		&:not(:last-child) {
			&::after {
				width: 50px;
				border: 2px solid #F3F2EF;
			}
		}
	}
	.active {
		background: var(--color_3);
		&::after {
			border: 2px solid #F3F2EF;
		}
		&:not(:last-child) {
			&::after {
				border: 2px solid var(--color_3);
			}
		}
	}
}

.form_container .upper_image {
	position: absolute;
	top: 3px;
	left: 50%;
	transform: translate(-50%, -50%);
	background: white;
	border-radius: 50%;
	.donut {
		position: relative;
		border-radius: 50%;    /* Make it a circle */
		width: max(80px, 100px);          /* Outer width of the circle */
		height: max(80px, 100px);         /* Outer height of the circle */
		z-index: 10;
		border-color: rgba(0,212,255,1); /* Alternating colors */
		outline: 10px solid white;
	}
}

.form_container .list_option {
	display: flex;
	justify-content: space-between;
}
.form_container .otp_input {
	background-color: #F3F2EF;
	border-radius: 25px;
	height: 7vh !important;
	border: none;
	outline: none;
	padding: 1rem;
	width: 15% !important;
	text-align: center;
	font-size: 1.5vh !important;
	&:not(:last-child) {
		margin-right: 1rem !important;
	}
}
.form_container .fix_container {
	height: 25vh;
	width: 100%;
}

.form_container .step_circle {
	height: 25px !important;
	width: 25px !important;
}
.form_container input[type="checkbox"]+label::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 18px;
	height: 18px;
	border: 1px solid var(--color_3);
	background: white;
}

.form_container input[type="checkbox"]:checked+label::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 5px;
	width: 8px;
	height: 8px;
	background: white;
}

.country_container{
    display: flex;
    align-items: center;
    gap: 1vh;
}
.country_container img{
    height: 1.5vh;
}

.gender_box {
	padding: 1rem;
	margin:1vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	border: 1px solid var(--color_3);
	width: 10vh;
	height: 10vh;
	border-radius: 1vh;
	color: var(--color_3);
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.gender_box.active,
.gender_box:hover {
	background: var(--color_3);
	border: 1px solid var(--color_3);
	color: var(--color_text_light);
}
.gender_box#masculinus:hover,
.gender_box.active#masculinus{
	background-color: #2600b7;
}
.gender_box#feminina:hover,
.gender_box.active#feminina{
	background-color: #850073;
}
.form_container input::placeholder {
	color: var(--color_cancel);
	font-style: italic;
	opacity: 0.5;
}
.form_container input {
	background-color: white;
	color: var(--color_text_dark) !important;
	height: 3vh !important;
	margin-top: 1vh;
	border: 0.1vh solid var(--color_text_dark);
	border-radius: 0.5vh;
}
.form_container input[type="password"]{
	margin: 0;
    border: unset;
}
.form_container input:-webkit-autofill {
	background-color: transparent !important; /* or any color you want */
	-webkit-box-shadow: 0 0 0px 1000px white inset !important; /* Optional: remove any box shadow applied */
}
.form_container input:-webkit-autofill:focus {
	background-color: transparent !important; /* Or specify another color */
}
.strength-meter {
    height: 6px;
    background: #ddd;
    margin-top: 8px;
}
.strength-bar {
    height: 6px;
    width: 0%;
    transition: width 0.3s;
}
.strength-1 { background-color: red; }
.strength-2 { background-color: orange; }
.strength-3 { background-color: gold; }
.strength-4 { background-color: lightgreen; }
.strength-5 { background-color: green; }


/* ---------------------------- VALID LINK --------------------------------------- */
.valid_link.countdown_container {
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background-color: white;
	/* background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url('<?= $GLOBALS['cdn'] ?>/<?= $_SESSION['project_name'] ?>/login_background.png'); */
}

.valid_link.countdown_container .progress_bar {
	margin-top: 3vh;
	background: var(--color_8);
	border-radius: 1vh;
	overflow: hidden;
	width: 25%; /* Adjust for desired progress bar width */
	height: 2vh;
	position: relative;
}

.valid_link.countdown_container .progress_bar .fill {
	background: var(--color_4);
	height: 100%;
	width: 0%; /* Start at 100% */
	transition: width 0.1s linear;
}

.valid_link.countdown_container span {
	text-align: center;
}

.copy:hover {
	cursor: copy;
	text-decoration: underline;
}

/* ---------------------------- COMPONENT ----------------------------------------- */
/* component selector */
.swf_selector_container{
    padding: 0 1vh;
    background-color: white;
    border-radius: 0.5vh;
    border: 0.1vh solid var(--color_cancel);
	height: 3rem;
}
.swf_selector_container.selector_disabled{
    opacity: 1;
    background-color: unset;
    border: none;
    color: var(--color_1);
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
}
.swf_selector_container.selector_disabled .material-symbols-outlined,
.swf_selector_container.selector_disabled .material-icons{
    display: none;
}
.select_div div,
.country_picker_list,
.selector_list {
    padding: 1vh;
    background-color: var(--color_7);
    color: var(--color_text_dark);
    cursor: pointer;
    font-size: 1.2vh;
}
.select_div div:hover,
.country_picker_list:hover,
.selector_list:hover{
    background-color: var(--color_3);
    color: white;
}
.selector_list.select_all{
	background-color: var(--color_4);
    color: white;
}
.selector_list.delete_all{
	background-color: var(--color_alert);
    color: white;
}
.list_of_data{
	display: none;
	position: absolute;
	max-height: 30vh;
	overflow-y: auto;
	left: 0;
	background-color: var(--color_3);
	z-index: 99;
	width: 100%;
}
.selector_selected_value_container{
	max-height:15vh;
	overflow-y:auto;
}
.swf_timeline .date_labels {
    top: 3.5vh;
}
.swf_timeline .date_container {
    width: fit-content;
    position: relative;
    min-width: 3.5vw;
}
.swf_timeline .date_arrow_down {
    line-height: 1vh;
}
.swf_timeline .date_arrow_up {
    position: absolute;
    top: -2vh;
}
.swf_timeline .date_range_date_container {
	display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5vh 1vh;
    column-gap: 0.5vh;
    border: 2px solid;
    border-bottom: unset;
    border-top-right-radius: 1.5vmin;
}

.swf_timeline .date_range_date_container .date_range_date {
    font-weight: bold;
    color: var(--text_dark);
}

.swf_timeline .date_range_date_container .date_range_day {
    padding: 0.2vh 0;
    border-bottom: 2px solid;
}

.swf_timeline .date_range_date_container .date_range_month {
    padding: 0.2vh 0;
}

.swf_timeline .date_range_time_container {
    padding: 0.5vh;
    text-align: center;
    border-radius: 0 0 1.5vmin 1.5vmin;
    border: 2px solid;
    border-top: unset;
}

.swf_timeline .date_range_time_container .date_range_time {
    color: white;
}

/* componentDates */
.swf_component_dates {
    padding: 1rem 0;
}

.swf_dates_scroller {
    position: relative;
    display: flex;
    gap: 0.625rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.swf_dates_bar_container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.swf_bar_container {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.swf_bar_label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color_text_dark);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5vh;
}

.swf_bar_line {
    margin-top: 0.25rem;
    height: 0.25rem;
    width: 100%;
    border-radius: 0.1875rem;
}

.swf_date_card {
    scroll-snap-align: start;
    min-width: 8.75rem;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 0.0625rem 0.3125rem rgba(0, 0, 0, .06);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 4rem 0 2rem;
    position: relative;
}

.swf_date_dup_wrapper {
    display: inline-flex;
    gap: 0.625rem;
}

.swf_date_card.disabled,
.swf_date_dup_wrapper.disabled {
    opacity: .35;
    pointer-events: none;
}

.swf_date_card.today {
    border: 0.125rem solid #ff5c77;
}

.swf_date_card_header {
    position: absolute;
    top: -0.75rem;
    text-align: center;
    border-radius: 1vh;
    padding: 0.25rem 0.5rem;
    font-weight: 600;
    color: #fff;
}

.swf_date_card_body {
    text-align: center;
    margin: 0.5rem 0 0.5rem;
}

.swf_date_num {
    font-size: 1.75rem;
    font-weight: 700;
}

.swf_date_month {
    font-size: 0.875rem;
}

.swf_date_year {
    font-size: 0.75rem;
    color: #666;
}

.swf_date_time {
    margin-top: auto;
    padding: 0.25rem 0.625rem;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    text-align: center;
    width: 100%;
}


/* UPLOAD BULK MEDIA */
.drop_media_container{
	margin: 2vh;
}
.drop_media_container .drop_zone{
	cursor: pointer;
    margin-top: 2vh;
    background-color: var(--color_8);
    min-height: 20vh;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    padding: 4vh;
    border-radius: 1vh;
	gap: 1vh;
    border: 0.1vh dashed var(--color_3);
}
.drop_media_container img{
	max-height: 15vh;
}
.drop_media_container .file_preview{
	margin: 1vh;
    display: flex;
    column-gap: 1vw;
    row-gap: 4vh;
    flex-wrap: wrap;
    max-height: 50vh;
    overflow-y: auto;
    justify-content: start;
    padding: 4vh 1vw;
    background-color: var(--color_1);
    border-radius: 1vh;
    color: var(--color_text_light);
}
.drop_media_container .file_icon{
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1vh;
	position: relative;
}
.drop_media_container .h5,
.drop_media_container .h6{
	color: var(--color_text_light);
}
.drop_media_container .drop_zone .h5,
.drop_media_container .drop_zone .h6{
	color: var(--color_text_dark);
}

/* RenderCalendar Component */
.calendar_controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1vh;
	color: var(--color_text_dark);
}

.calendar_controls iconify-icon {
	background: none;
	border: none;
	color: var(--color_flow);
	cursor: pointer;
	font-size: 20px;
}
.calendar_controls iconify-icon:hover {
	background-color: var(--color_flow);
	border-radius: 50%;
	color: white !important;
	cursor: pointer;
}

.calendar_grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0;
	text-align: center;
}

.calendar_header {
	font-weight: bold;
	color: #000;
	padding: 5px 0;
}

.calendar_cell {
	padding: 8px;
	border-radius: 50%;
	color: #000;
	cursor: pointer;
	font-size: 16px;
	transition: background-color 0.3s;
}
.calendar_cell:hover {
	background-color: #2081f21c;
	border-radius: 50%;
}

.calendar_cell.today {
	color: var(--color_flow);
	font-weight: bold;
}

.calendar_cell.inactive {
	color: #d3d3d3;
}
.calendar_cell.disabled {
	color: var(--color_cancel);
}

/* Component TimeSchedule */
.time_schedule {
	position: relative;
	width: 100%;
	overflow-y: auto;
	height: 100%;
}
.hours_container {
	position: absolute;
	left: 0;
	top: 0;
	width: 4vw;
	height: 100%;
	border-right: 1px solid var(--color_7);
}

.hour_block {
	position: relative;
	height: calc(100% / 24);
	box-sizing: border-box;
	border-bottom: 1px solid var(--color_7);
	color: var(--color_text_dark);
	display: flex;
	align-items: center;
	justify-content: center;
}
/* .hour_block:hover{
	background-color: var(--color_8);
	cursor: pointer;
} */

.hour_line {
	position: absolute;
	left: 4vw;
	right: 0;
	bottom: 0;
	height: 1px;
	background-color: var(--color_7);
}

.schedule_blocks {
	position: absolute;
	left: 4vw;
	right: 0;
	top: 0;
	height: 100%;
}

.time_block {
	position: absolute;
	left: 1vh;
	right: 1vh;
	background-color: var(--color_cancel);
	color: var(--color_text_light);
	border-radius: 0.5vh;
	padding: 0.5vh 1vh;
	box-sizing: border-box;
	border: 1px solid var(--color_fg);
}

.time_label {
	font-weight: bold;
	margin-bottom: 2px;
	font-size: 0.8rem;
}

.time_range {
	font-size: 0.5rem;
}

.week_view {
	position: absolute;
	left: 4vw;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.week_header {
	display: flex;
	height: 4vh;
	border-bottom: 1px solid var(--color_7);
	background: var(--color_bg_light);
}

.day_header {
	flex: 1;
	text-align: center;
	padding: 0.5vh;
	border-right: 1px solid var(--color_7);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 0.5vh;
}

.week_days {
	flex: 1;
	display: flex;
	height: calc(100% - 4vh);
}

.day_column {
	flex: 1;
	position: relative;
	border-right: 1px solid var(--color_7);
}

.day_column .hour_line {
	height: calc(100% / 24);
	border-bottom: 1px solid var(--color_7);
	position: relative;
}

.day_column .time_block {
	position: absolute;
	left: 0.5vh;
	right: 0.5vh;
	color: var(--color_text_light);
	border-radius: 0.5vh;
	padding: 0.5vh 1vh;
	box-sizing: border-box;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	font-size: 0.65rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.day_column .time_label {
	font-weight: bold;
	margin-bottom: 2px;
	font-size: 0.8rem;
	flex: 1;
}

.day_column .time_range {
	font-size: 0.5rem;
	margin-top: 1vh;
}
.now_line {
	position: absolute;
	left: 0;
	right: 0;
	height: 0.2vh;
	background-color: red;
	z-index: 10;
	display: flex;
	align-items: center;
}

.now_circle {
	width: 0.8vh;
	height: 0.8vh;
	background-color: red;
	border-radius: 50%;
	margin-left: -0.5vh;
}

/* ========= SHOW GALLERY ========= */
.sg_main_container {
	position: relative;          /* enables absolute children if needed */
	width: 100%;
	height: 100%;
	border-radius: 1vh;
	overflow: hidden;
	box-shadow: 0 6px 18px rgb(0 0 0 / .15);
}

.sg_main_image {
	width: 100%;
	height: 100%;
	object-fit: cover;           /* fill + crop */
	transition: opacity .3s ease;
}

/* ========= THUMB RAIL ========= */
.sg_thumb_container {
	display: flex;
	gap: 1rem;
	overflow: auto;              /* axis is chosen by JS */
	padding: 1rem 0;
	scroll-snap-type: both mandatory;
}

/* vertical rail tweaks (left/right) */
.sg_thumb_left,
.sg_thumb_right {
	flex-direction: column;
	padding: 0 1rem;
}

/* horizontal rail tweaks (top/bottom) */
.sg_thumb_top,
.sg_thumb_bottom {
	flex-direction: row;
	padding: 1rem 0;
}

.sg_thumb_item {
	flex: 0 0 auto;              /* don’t shrink */
	cursor: pointer;
	scroll-snap-align: center;
	border-radius: 1vh;
	position: relative;
	transition: transform .25s ease;
}
.sg_thumb_item:hover {          /* subtle zoom on hover */
	transform: scale(1.06);
}

.sg_thumb_item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

/* ========= ACTIVE THUMB ========= */
.sg_thumb_item .thumb-active{
	outline: 0.1vh solid var(--color_accent);
}
.sg_thumb_active::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 2px solid var(var(--color_7));
	border-radius: inherit;
	pointer-events: none;
}

/* ========= SCROLLBAR ========= */
.sg_thumb_container::-webkit-scrollbar {
	height: .5rem;
	width:  .5rem;
}
.sg_thumb_container::-webkit-scrollbar-thumb {
	background: var(var(--color_7));
	border-radius: .25rem;
}
.sg_thumb_container::-webkit-scrollbar-track {
	background: rgba(0,0,0,.08);
	border-radius: .25rem;
}
/* END COMPONENT */

/* Animation for the dots */
@keyframes dot_animation {
    0% {
        content: "";
    }
    33% {
        content: ".";
    }
    66% {
        content: "..";
    }
    100% {
        content: "...";
    }
}

.dot_animation::after {
    content: "";
    display: inline-block;
    animation: dot_animation 1.5s steps(4, end) infinite;
	width: 1vw;
}

/* Loader 5 */
.loader-5 {
    height: 32px;
    width: 32px;
    -webkit-animation: loader-5-1 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
    animation: loader-5-1 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@-webkit-keyframes loader-5-1 {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
    }
    @keyframes loader-5-1 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.loader-5::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: auto;
    margin: auto;
    width: 8px;
    height: 8px;
    background: var(--color_2);
    border-radius: 50%;
    -webkit-animation: loader-5-2 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
    animation: loader-5-2 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@-webkit-keyframes loader-5-2 {
    0% {
        -webkit-transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        -webkit-transform: translate3d(24px, 0, 0) scale(0.5);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0) scale(1);
    }
}
@keyframes loader-5-2 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(24px, 0, 0) scale(0.5);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}
.loader-5::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: auto;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    background: var(--color_2);
    border-radius: 50%;
    -webkit-animation: loader-5-3 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
    animation: loader-5-3 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@-webkit-keyframes loader-5-3 {
    0% {
        -webkit-transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        -webkit-transform: translate3d(-24px, 0, 0) scale(0.5);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0) scale(1);
    }
}
@keyframes loader-5-3 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(-24px, 0, 0) scale(0.5);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}
.loader-5 span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 32px;
    width: 32px;
}
.loader-5 span::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: auto;
    right: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    background: var(--color_2);
    border-radius: 50%;
    -webkit-animation: loader-5-4 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
    animation: loader-5-4 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@-webkit-keyframes loader-5-4 {
    0% {
        -webkit-transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        -webkit-transform: translate3d(0, 24px, 0) scale(0.5);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0) scale(1);
    }
}
@keyframes loader-5-4 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(0, 24px, 0) scale(0.5);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}
.loader-5 span::after {
    content: "";
    display: block;
    position: absolute;
    top: auto;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    background: var(--color_2);
    border-radius: 50%;
    -webkit-animation: loader-5-5 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
    animation: loader-5-5 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@-webkit-keyframes loader-5-5 {
    0% {
        -webkit-transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        -webkit-transform: translate3d(0, -24px, 0) scale(0.5);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0) scale(1);
    }
}
@keyframes loader-5-5 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(0, -24px, 0) scale(0.5);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* for component autocomplete */
.select_div {
	display: none;
	position: absolute;
	font-size: 1vh;
	color: var(--color_8);
	border: 1px solid var(--color_cancel);
	min-height: 2vh;
	max-height: 15vh;
	border-bottom-left-radius: 1vh;
	border-bottom-right-radius: 1vh;
	z-index: 10000;
	overflow-y: auto;
}
.select_div div,
.country_picker_list,
.selector_list {
	padding: 0.5vh 1vh;
	background-color: var(--color_7);
	color: var(--color_text_dark);
	display: flex;
	align-items: center;
	gap: 0.5vh;
	cursor: pointer;
}
.select_div div:hover,
.country_picker_list:hover,
.selector_list:hover{
	background-color: var(--color_3);
	color: white;
}
.selector_list {
	display: flex;
	align-items: center;
	font-size: 1vh;
	cursor: pointer;
}
.selector_list span{
	margin: 0 !important;
}
.list_of_country{
	gap: 0;
}
/* multiple autocomplete */
.swf_multi_selected_value{
	color: var(--color_text_light);
	border-radius: 1vh;
	margin: 0.5vh 0.5vh 0.5vh 0;
	font-size: 1.2vh;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--color_1);
	padding: 0.5vh 1vh;
}
.swf_multi_selected_value .remove_selected_value{.b
	color: var(--color_alert);
}
.swf_multi_selected_value .remove_selected_value:hover{
	background-color: var(--color_alert);
	color: var(--color_1);
}

/* TAGS */
.swf_tags_wrapper{
	max-height: 15vh;
    overflow-y: auto;
	display: flex;
	gap: 1vh;
	flex-wrap: wrap;
	margin-top: 1vh;
}
.swf_tag{
	display: inline-flex;
	align-items: center;
	background-color: var(--color_accent);
	padding: 0.5vh 1vh;
	border-radius: 0.5vh;
	font-weight: bold;
	color: var(--color_text_light);
}

/* DATE PICKER */
.date_picker_output {
	min-height: 3vh;
	min-width: 5vw;
	border-radius: 0.5vh;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.4s;
	color: black;
	font-size: 1rem;
	background-color: var(--color_text_light)
}
.date_picker_icon {
	color: var(--color_8);
	font-size: 1.5rem;
	font-weight: 600;
	cursor: pointer;
	transition: 0.4s;
	background-color: var(--color_1);
	border-radius: 50%;
	padding: 0.3vh;
}
.date_picker_item{
	display: flex;
    align-items: center;
    column-gap: 1vh;
    flex: 1;
    justify-content: center;
}
.date_picker_container {
	display: flex;
	column-gap: 2vh;
	align-items: center;
}

.trumbowyg-editor strong {
    font-weight: bold !important;
}

/* FORM BUILDER */
/* Reset Materialize-specific styles */
.render-wrap{
	padding: 2vh 1vw 1vh;
    background-color: white;
    border: 1px solid black;
    border-radius: 1vh;
	max-height: 80vh;
    overflow-y: auto;
}

.form-builder input[type="checkbox"],
.form-builder input[type="radio"],
.form-builder select,
.form-group input[type="checkbox"],
.form-group input[type="radio"],
.form-group select{
	appearance: auto !important;
	opacity: 1 !important;
	position: static !important;
	color: var(--color_text_dark);
}
.form-builder input[type="text"],
.form-builder input[type="number"],
.form-builder input[type="date"],
.form-builder textarea,
.form-builder select,
.form-builder .form-control
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group textarea,
.form-group select,
.form-group .form-control{
	background-color: white !important;
	border: 1px solid black;
	margin-top: 0.5vh;
}

.form-builder input[type="file"],
.form-group input[type="file"] {
    background-color: unset !important;
    border: unset;
}

.form-builder a ,
.form-group a {
	color: var(--color_text_dark);
}

/* Ensure selected text is visible */
.form-builder select option ,
.form-group select option {
	color: black !important;
}

/* Remove Materialize's pseudo-elements */
.form-builder .select-wrapper ,
.form-group .select-wrapper {
	display: none !important;
}
.form-builder button ,
.form-group button {
	box-shadow: none !important;
}
.form-builder .file-field,
.form-group .file-field{
	display: block !important;
}

.rendered-form .checkbox-group,
.rendered-form .radio-group{
	display: flex;
    gap: 1vh;
	margin-top: 0.5vh;
}

.rendered-form .checkbox-group .formbuilder-checkbox,
.rendered-form .radio-group .formbuilder-radio{
	display: flex;
    align-items: center;
}

/* component_dynamic_toggle */
.toggle_container {
	position: relative;
	display: flex;
	align-items: center;
	border-radius: 2vh;
	background-color: var(--color_7);
	overflow: hidden;
	border: 0.1vh solid var(--color_3);
	cursor: pointer;
}
.toggle_switch {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background-color: var(--color_3);
	border-radius: 2vh;
}

.toggle_option {
	position: relative;
	flex-grow: 1;
	text-align: center;
	padding: 0.6vh 0;
	color: var(--color_text_dark);
}

.toggle_option.active {
	color: var(--color_text_light);
}

/* ---------------------------- TEAM ----------------------------------------- */
#team_cube{
	max-height: 87vh;
	overflow-y: auto;
	padding: 1vh;
	gap: 1vw;
}
.team_container{
	background-color: white;
    color: var(--color_text_dark);
    border-radius: 1vh;
    cursor: pointer;
    box-shadow: 0 0 10px 0 var(--color_cancel);
	height: fit-content;
}
.team_image_link{
	height: 20vh;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-top-left-radius: 1vh;
	border-top-right-radius: 1vh;
}
.team_details{
	color: var(--color_text_dark);
	font-weight: 500;
	background-color: var(--color_7);
	padding: 2vh;
}
.team_details .back_button{
	color: var(--color_text_light);
}
.team_details #team_image{
	border-radius: 2vh;
	border: 0.1vh solid var(--color_cancel);
	padding: 1vh;
	height: 20vh;	
	background-size: cover;
	background-position:center;
	background-repeat:no-repeat;
}
.image_requirements{
	color: var(--color_3);
}
.team_name{
	color: var(--color_2);
}
.team_timestamp{
	color: var(--color_cancel);
    font-weight: 400;
}
.team_icons{
	color: var(--color_5);
}
.team_details #team_description{
	color: var(--color_cancel);
	font-weight: 500;
}
.team_card {
	border-radius: 1.5vh;
	border: 0.2vh solid rgba(191, 191, 191, .4);
	padding: 3vh 1vh 0;
	align-items: center;
	display: flex;
	flex-direction: column;
	position: relative;
}
.team_member_cube{
	max-height: 48vh;
	overflow-y: auto;
}
.member_action{
	display: none;
	position: absolute;
    top: 1vh;
    right: 3vh;
    background-color: var(--color_8);
    border-radius: 0.5vh;
    border: 1px solid var(--color_1);
    color: var(--color_1);
}
.member_action .team_action_list{
	padding: 0.7vh 1vh 0.7vh 0.8vh;
	cursor: pointer;
	display: flex;
    align-items: center;
    gap: 0.5vh;
}
.member_action .team_action_list:first-child{
	border-top-left-radius: 0.5vh;
	border-top-right-radius: 0.5vh;
}
.member_action .team_action_list:last-child{
	border-bottom-left-radius: 0.5vh;
	border-bottom-right-radius: 0.5vh;
}
.member_action .team_action_list.edit_member:hover{
	background-color: var(--color_flow);
}
.member_action .team_action_list.delete_member:hover{
	background-color: var(--color_alert);
}
.card_icon {
	position: absolute;
	right: 1vh;
	top: 1vh;
	font-size: 2vh;
	color: var(--color_cancel);
	cursor: pointer;
}

.card_image {
	border-radius: 50%;
	height: 8vh;
	width: 8vh;
}
.card_text_wrapper {
	margin: 2vh 0;
	text-align: center; 
}

.card_text_wrapper .h5{
	color: var(--color_text_dark);
	margin-bottom: 1vh;
}

.card_text_wrapper .h6{
	color: var(--color_cancel)
}
.permission_container {
    background-color: var(--color_7);
    padding: 1vh;
	border-radius: 1vh;
	gap: 0;
}
.permission_container .permission_icon{
	background-color: white;
    border-radius: 50%;
    padding: 0.5vh;
    color: var(--color_2);
}
.delete_permission{
	cursor: pointer;
    color: var(--color_alert);
    padding: 0.5vh;
}
.delete_permission:hover{
    background-color: var(--color_alert);
    color: white;
    border-radius: 50%;
}
.permission_action{
	display: none;
    position: absolute;
    left: -3vh;
    background-color: var(--color_3);
    padding: 0.8vh;
    border-radius: 50%;
}
.permission_action:hover{
	background-color: var(--color_2);
}	
#team_permission_cube{
	max-height: 72vh;
	overflow-y: auto;
	padding-right: 1vh;
}
.team_cube_container{
	background-color: var(--color_8);
	border-radius: 2vh;
	padding: 1vh 2vh 2vh;
}
.team_cube_header{
	padding: 1vh 0;
    border-bottom: 0.1vh solid var(--color_cancel);
    margin-bottom: 2vh;
}
.team_permission{
	justify-content: space-between;
    background-color: var(--color_7);
    border-radius: 1vh;
    padding-right: 1vh;
}
.team_permission_entity{
	padding: 0.5vh 1vh;
    background-color: var(--color_6);
    width: 6vh;
    justify-content: center;
}
.team_permission_status{
    border-top-left-radius: 1vh;
    border-bottom-left-radius: 1vh;
    width: 3vh;
    justify-content: center;
	color: var(--color_text_light);
	cursor: pointer;
	position: relative;
}
.team_permission_name{
	color: var(--color_1);
}