.chip_filter{
    cursor: pointer;
    line-height: 30px;
    border-radius: 10px;
    color: var(--color_3);
    border: 1px solid var(--color_3);
    background-color: var(--color_bg_1);
}
.chip_filter:hover{
    background-color: var(--color_3);
    color: var(--color_text_2);
    font-weight: bold;
}
.chip_filter.active{
    background-color: var(--color_3); 
    color: var(--color_text_2);
    font-weight: bold;
} 
.dropdown-content{
    background-color: var(--color_bg_1);
}
li span:hover{
    background-color: var(--color_8);
}
.autocomplete-content li .highlight {
    color: var(--color_3);
}
.dropdown-content li>a, .dropdown-content li>span {
    color: var(--color_text_1);
}
.hoverable:hover{
    opacity: 0.75;
}

.datepicker-day-button{
    color: var(--color_text_2);
}

.toast{
    background-color: white;
    font-weight: bold;
    color: var(--color_text_2);
}
.sub_header{
    margin: 0px !important; 
    padding: 0.75rem; 
    font-size: 10pt; 
    font-weight: 600px; 
    color: white; 
    border-radius: 5px 5px 0px 0px; 
    background-color: white;
}
.swf_tabs{
    display:inline-block;
    font-size:1.5vh !important;
    border-radius: 1.5vh 1.5vh 0px 0px !important;
    background-color: var(--color_6) !important;
    height:3vh !important;
    color:var(--color_8) !important;
    padding-left: 1vw;
    width:12vw;
    cursor:pointer;
    padding-top:0.5vh;
    border-bottom:2px solid var(--color_7);
}
.swf_tabs:hover{
    background-color: var(--color_accent) !important;
    color:var(--color_text_2) !important;
}
.swf_tabs.active{
    background-color: white !important;
    color:var(--color_text_1) !important;
    font-weight: bold !important;
    border: none;
}

.collection-item.menu_item_vm.active {
    background-color: var(--_color_accent);
    color: black;
}
.collection-item{
    cursor:pointer;
    font-size: 11pt;
}
.collection-item:hover{
    color: black;
    background-color: var(--_color_accent);
}
.child_menu{
    color: white;
    cursor:pointer;
    padding-top:10px;
    padding-left:25%;
    height:45px;
}
.child_menu:hover{
    color: black;
    background-color: var(--_color_accent);
}

.child_menu.active{
    color: black;
    background-color: var(--_color_accent);
}
.project_desktop {
    height: calc( 100vh - 65px);
    overflow-y: auto;
    color: var(--color_text_1);
}
input.select-dropdown.dropdown-trigger{
    color: var(--color_text_2);
}
.nd{
    display: none;
}
.ico_spacing{
    letter-spacing: -2px;
}
#icn_toddoo_counter{
    position:absolute; 
    z-index:10; 
    width:1.1vh; 
    margin-top:1.5vh; 
    height:1.1vh; 
    border:1px solid var(--color_alert); 
    color:white; font-size:0.7vh;  
    border-radius:0.5vh;
    text-align:center; 
    background-color:var(--color_alert);
}

button:disabled{
    background-color: var(--color_6) !important;
    border: 1px solid var(--color_6) !important;
    color:  var(--color_text_1) !important;  
}
.project_field:is(:disabled){
    padding-left: 0rem;
    color: var(--color_text_1);
    opacity: 1;
}

.project_select{
    background-color: var(--color_8);
    border-radius:1vh;
}

.project_select:is(:disabled){
    padding-left: 0rem;
    color: var(--color_text_1);
    opacity: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

input[type="text"],
input[type="number"]{
    border:unset;
    color: #000000 !important;
    margin:revert !important;
    border-radius: 1vh !important;
    border: 0.5px solid var(--color_3);
    height: 4vh !important;
    font-size: 1.5vh !important;
    background-color: var(--color_8) !important;
    padding-left: 1vw !important;
    padding-right: 1vw !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
input.loading {
    padding-right: 40px; /* Adjust the padding to make space for the icon */

    content: "cached"; /* Use the 'cached' icon from Material Icons */
    font-family: 'Material Icons'; /* Specify the font family */
    position: absolute;
    right: 10px; /* Adjust the right position */
    top: 50%;
    transform: translateY(-50%);
    animation: spin 1s infinite linear; /* Apply a spinning animation */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.invalid{
    border:2px solid red !important;
}

textarea {
    width: 100%;
    padding: 1vh;
    font-size: 1vh;
    background-color: var(--color_8) !important;
    border: 1px solid var(--color_7);
    border-radius: 1vh !important;
    min-height: 10vh;
    max-height: 15vh;
    resize: vertical; 
  }
.a_white:hover{
    color: var(--color_3);
}
.project_field{
    background-color: var(--color_text_2);
}
.but_filter{
    margin: 0rem;
    padding: 0.375rem 0.75rem; 
    display: inline-block; 
    cursor: pointer;
}
.but_filter:hover{
    color: var(--color_text_2);
    border-radius: 5px;
    background-color: var(--color_3);
}
.but_filter.active{
    color: var(--color_text_2);
    border-radius: 5px;
    background-color: var(--color_3);
}

[type="checkbox"]+span:not(.lever){
    padding-left: 28px;
    height: 20px;
    line-height: 20px;
}
[type="checkbox"].filled-in:checked+span:not(.lever):after{
    border: 2px solid var(--color_3);
    background-color: var(--color_3);
}
#menu_ea{
    top: 4.6rem; 
    left: 0px; 
    width: 15vw; 
    font-size: 8pt; 
    position: fixed; 
    z-index: 10000;
    border-radius: 0px 0px 5px 0px;
}
#ea_account{
    top: 6vh; 
    right: 2vw; 
    width: 15vw; 
    font-size: 1.4vh; 
    position: fixed; 
    z-index: 10000;
    padding: 1vh;
    background-color:var(--color_2);
    border-radius: 1vh;
    display: none;
}
div span.ea_menu{
    color: var(--color_text_2);
}
.login_field{
    margin: 0px;
    padding: 0rem 1rem 0rem 1rem;
    font-size: 8pt;
    height: 45px;
}
.login_field::placeholder{
    opacity: 1;
}
.dropdown-content li>a, .dropdown-content li > span{
    font-size: 8pt !important;
}
.select-wrapper input.select-dropdown{
    font-size: 8pt !important;
}
.a_white{
    color: white;
}
#btn_signin{
    width: 100%;
}
.project_field{
    border: 2px solid var(--color_3);
    border-radius: 5px;
}
.project_field:active{
    border-radius: 0px;
    border: 2px solid var(--color_3);
    border-bottom: 2px solid var(--color_3);
}
.project_field:focus{
    border-radius: 0px;
    border: 2px solid var(--color_3);
    border-bottom: 2px solid var(--color_3);
}
.project_field:hover{
    border-radius: 0px;
    border: 2px solid var(--color_6);
    border-bottom: 2px solid var(--color_3);
}
.but{
    text-transform: capitalize;
    font-weight: bold;
}
.but:hover{
    text-transform: capitalize;
    font-weight: unset;
    color: var(--color_3);
    border: 1px solid var(--color_3);
}
.flip_switch{
    border:2px solid var(--color_alert);
    background-color:unset;
    border-radius:0.5vh;
    height: 3.5vh; 
    width: 3.5vh;
    padding:0.5vh;
    font-size:1.5vh;
    cursor:pointer;
    color:var(--color_alert);
}
.flip_switch.on{
    background-color:var(--color_6) !important;
    color:var(--color_text_2);
}
.but.filter{
    width:5vw;
    line-height:0px;
    font-size:0.8vh;
    background-color:var(--color_8);
    padding-top:0.8vh;
    color:var(--color_4);
    border:1px solid var(--color_4);
}
.but.filter:hover{
    width:5vw;
    font-size:0.8vh;
    background-color:var(--color_4);
    color:var(--color_8);

}
.but.filter.active{
    width:5vw;
    font-size:0.8vh;
    background-color:var(--color_4);
    color:var(--color_8);
}
.but.color_4{
    background-color: var(--color_4);
    color: white;
    border-color: var(--color_4);
}
.but.color_4:hover{
    border-color: var(--color_4);
    background-color: white;
    color: var(--color_4);
}
.but.disabled{
    background-color: var(--color_grey) !important;
    color: var(--color_grey) !important;
    border-color: var(--color_7) !important;
    cursor: not-allowed !important;
}
.btn {
	text-decoration: none !important;
	text-align: center !important;
	letter-spacing: .5px !important;
	transition: .2s !important;
	cursor: pointer !important;
	font-size: 1.5vh !important;
	outline: 0 !important;
	border: none !important;
	border-radius: 1vh !important;
	display: inline-block !important;
	height: 3vh !important;
	line-height: 39px !important;
	min-width: 58px !important;
	padding: 0 1rem !important;
	text-transform: uppercase !important;
	vertical-align: middle !important;
	opacity: 0.80 !important;
	background-color:var(--color_4) !important;
	border: 1px solid var(--color_3) !important;
	color: var(--color_8) !important;
	margin-right: 5px !important;
	font-weight: 400 !important;
}
.btn:hover{
	background-color:var(--color_7) !important;
	border:1px solid var(--color_3) !important;
	color:var(--color_accent) !important; 
	opacity: 1 !important; 
}		
.btn:active{
	color:var(--color_accent_fb) !important;
	opacity: 1 !important; 
}	
.btn:focus{
	background-color:var(--color_accent_fb) !important;
	border:1px solid var(--color_accent_fb) !important;
	color:var(--color_8) !important; 
	opacity: 1 !important; 
}
#toddoo_cube{
    display:none;
    position: absolute;
    top:10vh;
    right:3vw;
    background-color: var(--color_2);
    color:var(--color_text_2);
    border-radius: 1vh;
    min-height:40vh;
    z-index:10000;
    padding:1vh;
}
.toddoo{
    background-color:var(--color_3);
    color:var(--color_accent_fb);
    border:1px solid var(--color_accent);
    vertical-align: middle;
    cursor: pointer;
    font-size: 1.5vh;
}