.modal-btn-cancel{background-color: hsl(var(--color-4));}
.modal-btn-accept{background-color: hsl(var(--color-3));}
.modal-btn-cancel,.modal-btn-accept{border-radius: 8px;}
.toast-popup{background-color: hsl(var(--color));}
.color-ask{color:hsl(var(--color-3));}
.color-alert{color:hsl(var(--color-4));}
.close,.color-gray{color:hsl(var(--color-1));}

.tooltip:hover {z-index:4;}

data-holder{font-weight: 500; transform:translate(5px,-25%); font-size: 12px;}
input-generator[data-message]::after{color: hsl(var(--color-7)) ;}




js-drop rows:hover{background-color: hsl(var(--color-6));color:hsl(var(--color-5))}

.btn-red{transition: color 0.5s ease 0.2s, background 0.3s ease 0s;}
.btn-red:hover{
      background-color: hsl(var(--color-4));color:snow;
}

.tabs .h-30{min-height: 30px;}
.tabs .h-50{min-height: 50px;}
.tabs .img-area{height:205px}
.tabs{font-size: clamp(11px,calc(1vw + 8px),14px); }

.footer-content{
    width:90%; margin-inline:auto;
}

.search-pop{
      
      width: 100%;
      height:400px;
     
      transform:translateY(200px);
      z-index: 99999;
      transition: 0.3s ease-in-out;
      visibility: hidden;
      opacity: 0.2;
      background-color: snow;
}

.search-field:has(input:focus) .search-pop,.search-pop.active{
  transform:translateY(120px);
  visibility: visible;
  opacity: 1;
}

.nav-btn.active{background-color: hsl(var(--color-3));color:snow;}

.expand-item{min-width: 30px;min-height: 30px;}
.loading-spinner {
   
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(30px, 30px);
    width: 30px;
    height: 30px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid rgb(179, 176, 176);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 300;
}




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