* {
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
  }
html,body{
    margin:0px;
    padding:0px;
    
}
:root{
  --primary-color:#284DFF;
  --primary-50-color:#3E82E7;
  --secondary-color:#D5DBFF;
  --white-color:#fff;
  --white50-color:#F8F8F6;
  --white100-color:#E8E8E8;
  --green-color:#4AAA01;
  --primary-text-color:#0A0A0A;
  --primary100-text-color:#999999;
  --primary150-text-color:#727272;
  --primary200-text-color:#949494;
  --secondary-text-color:#D7D7D7;
  --black-color:#000000;
  --success:#19DC88;
  --danger:#FD0000;
}
ul,
ol {
  padding: 0px;
  list-style: none;
  margin: 0px;
}
p {
    margin: 0px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0px;
}

a {
    text-decoration: none;
    display: inline-block;
  }
  span,
  strong {
    display: inline-block;
  }

  input,textarea{
    outline:none;
    padding:0px;
    border:none;
    height:60px;
    border-radius:16px;
    text-indent:15px;
    font-size:20px;
    color:var(--primary-text-color);
  }

  select{
    outline:none;
    width:100%;
    height:60px;
    border-radius:16px;
    font-size:20px;
    color:var(--primary-text-color);
    padding:0px 15px;
    border:0px;
  }

  input::placeholder,textarea::placeholder{
    font-size:20px;
    color:var(--primary-text-color);
  }

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


  .container{
    width:92%;
    display:flex;
    flex-direction: column;
    margin:0 auto;
  }

  .primary-btn{
     background:var(--primary-color);
     color:var(--white-color);
     border-radius:8px;
     font-size:20px;
     font-weight:600;
     padding:20px 40px;
     border:none;
     outline:none;
     cursor:pointer;
    white-space: nowrap;


  }
  .primary-btn-md{
    background:var(--primary-color);
    color:var(--white-color);
    border-radius:8px;
    font-size:20px;
    font-weight:600;
    padding:15px 20px;
    border:none;
    outline:none;
    cursor:pointer;
    white-space: nowrap;
  }
  .secondary-btn-md{
    background:var(--secondary-color);
    color:var(--primary-color);
    border-radius:8px;
    font-size:20px;
    font-weight:600;
    padding:15px 20px;
    border:none;
    outline:none;
    cursor:pointer;
    white-space: nowrap;
  }
  .outline-btn-md{
    background:transparent;
    border:1px solid var(--black-color);
    border-radius:8px;
    font-size:20px;
    padding:15px 20px;
    outline:none;
    cursor:pointer;
    white-space: nowrap;
  }

  .other-btn-md{
    background:#f3f3f3;
    border:none;
    border:none;
    border-radius:8px;
    font-size:20px;
    padding:15px 20px;
    outline:none;
    cursor:pointer;
    white-space: nowrap;
    display:flex;
    align-items:center;
    column-gap:10px;
    color:#595959;
   
  }
  .btn-text{
    border:0px;
    color:var(--primary-text-color);
    background:none;
    font-size:18px;
  }
  .btn-text-primary{
    color:#3E82E7;
  }
  .btn-text-del{
    border:0px;
    color:var(--primary200-text-color);
    background:none;
    font-size:18px;
  }
   .radius-8{
    border-radius:8px;
   }
   .radius-16{
    border-radius:16px;
   }
  .row{
    display:flex;
    align-items: center;
  }
  .mt-30{
    margin-top:30px;
  }
  .mt-60{
    margin-top:60px;
  }
  .mb-10{
    margin-bottom:10px;
  }
  .mb-30{
    margin-bottom:30px;
  }
  .col{
    display:flex;
    flex-direction:column;

  }
  .row{
    display:flex;
  }
  .align-center{
    align-items:center;
  }
  .justify-between{
    justify-content:space-between;  
  }
  .justify-center{
    justify-content:center;
  }

  .justify-end{
    justify-content:flex-end;
  }
  .text-center{
    text-align:center;
  }
  .col-30{
    column-gap:30px;
  }
  .col-10{
    column-gap:10px;
  }
  .row-gap-20{
    row-gap:20px;
  }

  table{
    width:100%;
    border-collapse:collapse;
  }
   
  thead{
    border-bottom:1px solid rgba(0,0,0,0.2);
  }
  table thead tr td,table tbody tr td{
    border-bottom:1px solid rgba(0,0,0,0.2);
    padding:20px 10px;
    font-size:20px;
    color:var(--primary-text-color);
    font-weight:400;
  }
  

  .tc-danger{
    color:var(--danger);

  }

  .tc-success{
    color:var(--success);
  }
  .tc-primary{
    color:var(--primary-50-color);
  }

  .tc-primary200{
    color:var(--primary200-text-color);
  }

 
   .modal-wrapper{
      height:100dvh;
      position:fixed;
      top:0;
      left:0;
      width:100%;
      z-index:1000;
      display:none;
   }
   .modal-wrapper.active{
      display:block;
   }

   .modal-overlay{
     background:rgba(0,0,0,0.5);
     display:flex;
     flex-direction:column;
     align-items:center;
     justify-content:center;
     width:100%;
     height:100%;
     overflow-y:auto;
     
   }

   .modal-bg{
      width:700px;
      background:var(--white-color);
      border-radius:16px;
   }
   .modal-content{
    padding:20px;
   }
   .modal-wd-450{
    width:450px;
   }

   .toast {
    width: 280px;
    padding: 14px 18px;
    border-radius: 8px;
    color: white;
    font-size: 15px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    animation: fadeIn 0.4s ease, fadeOut 0.5s ease 2.5s forwards;
    position:fixed;
    top:20px;
    right:20px;
  }
  
  .toast.success { background-color: #22c55e; }  
  .toast.error { background-color: #ef4444; }   
  .toast.info { background-color: #3b82f6; }   
  
  .col-6{
    width:49%;
  }

  .role-wrapper{
    flex-wrap: wrap;
    row-gap:10px;
  }

  
  
  @keyframes fadeIn {
    from {  opacity: 0; }
    to   { opacity: 1; }
  }
  
  @keyframes fadeOut {
    to {

      opacity: 0;
    }
  }

  @media (max-width: 768px) {
    .col-6{
      width:100%;
    }
  }