:root {

    --color-light-text: #f9fafb;
    --color-light-subtext: #d1d5db;        /* Amber */
    --color-text: #1f2937;          /* Slate 800 */
    --color-subtext: #6b7280;       /* Slate 500 */
    --color-error: #dc2626;         /* Red 600 */
    --color-warning: #f59e0b;       /* Amber 500 */
    --color-success: #16a34a;       /* Green 600 */


    --background:#E1E2E1;
    --BLUE1:#1593E6;
    --BLUE2:#0F72B3;
    --BLUE3:#0B598D;
    --BLUE4:#08436A;
    --BLUE5:#063250;

    --fb-lightest:#F6F7F8;
    --fb-light: #FFFFFF;
    --fb-main:#1877F2;
    --fb-dark:#5890FF;
    --fb-darkest:#4267B2;
   

    --color-blue-lightest:#CCDFF3;
    --color-blue-light:#A7C2D6;
    --color-blue-accent:#65A1EF;
    --color-blue-accent-dark:#4178DA;
    --color-blue-dark:#475BAD;
    --color-blue-darkest:#3D4993;


     /* Gray Colors */
     --color-gray-75: #f8f8f8;
     --color-gray-100: #f1f1f1;
     --color-gray-200: #e7e6e5;
     --color-gray-300: #dad8d6;
     --color-gray-400: #bebdb9;
     --color-gray-500: #8b8987;
     --color-gray-600: #666564;
     --color-gray-700: #4b4847;
     --color-gray-800: #312e2b;
     --color-gray-900: #262421;
 
     /* Transparent Colors */
     --color-transparent-white-2: hsla(0, 0%, 100%, .02);
     --color-transparent-white-5: hsla(0, 0%, 100%, .05);
     --color-transparent-white-8: hsla(0, 0%, 100%, .08);
     --color-transparent-white-10: hsla(0, 0%, 100%, .1);
     --color-transparent-white-14: hsla(0, 0%, 100%, .14);
     --color-transparent-white-18: hsla(0, 0%, 100%, .18);
     --color-transparent-white-20: hsla(0, 0%, 100%, .2);

     --color-transparent-white-25: hsla(0, 0%, 100%, .25);
     --color-transparent-white-30: hsla(0, 0%, 100%, .3);
     --color-transparent-white-50: hsla(0, 0%, 100%, .5);
     --color-transparent-white-65: hsla(0, 0%, 100%, .65);
     --color-transparent-white-72: hsla(0, 0%, 100%, .72);
     --color-transparent-white-85: hsla(0, 0%, 100%, .85);
     --color-transparent-white-95: hsla(0, 0%, 100%, .95);
    
     --color-transparent-black-2: rgba(0, 0, 0, .02);
     --color-transparent-black-5: rgba(0, 0, 0, .05);
     --color-transparent-black-8: rgba(0, 0, 0, .08);
     --color-transparent-black-10: rgba(0, 0, 0, .1);
     --color-transparent-black-14: rgba(0, 0, 0, .14);
     --color-transparent-black-18: rgba(0, 0, 0, .18);
     --color-transparent-black-20: rgba(0, 0, 0, .2);

     --color-transparent-black-25: rgba(0, 0, 0, .2);
     --color-transparent-black-30: rgba(0, 0, 0, .3);
     --color-transparent-black-50: rgba(0, 0, 0, .5);
     --color-transparent-black-65: rgba(0, 0, 0, .65);
     --color-transparent-black-77: rgba(0, 0, 0, .77);
     --color-transparent-black-85: rgba(0, 0, 0, .85);
     --color-transparent-black-95: rgba(0, 0, 0, .95);

    /* Light Mode */
    --color-background: #fefcf8;
    --color-surface: #ffffff;

    /* CSS HEX */
--blue-1: #e3f2fdff;
--blue-2: #bbdefbff;
--blue-3: #90caf9ff;
--blue-4: #64b5f6ff;
--blue-5: #42a5f5ff;
--blue-6: #2196f3ff;
--blue-7: #1e88e5ff;
--blue-8: #1976d2ff;
--blue-9: #1565c0ff;
--blue-10: #0d47a1ff; 
  }
 
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html
{
    font-size: 14px;
    scroll-behavior: smooth;
}
body
{
    
    width: 100%;
    
    background-color: var(--fb-light);
    font-family: 'Montserrat', sans-serif;
}

.page-body
{
   height: 100vh;
    width: 100%;
    display: flex;
}

/* ++++++++++++ Loading-Overlay +++++++++++++++++ */
.loading-overlay {
    background: rgb(0, 0, 0,0.8);
    font-family: var(--font-secondary);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    visibility: visible;
    z-index: 999999;
  
  }

  .loader-box
  {
    position: absolute;
    text-align: center;
    top: 40%;
    -webkit-transition: all .2s;
    transition: all .2s;
    width: 100%;
    z-index: 10000;
   
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: white;
    align-items: center;
    justify-content: center;
  }
  .loader-box img
  {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    animation: rotate 2s linear infinite;
    filter: brightness(100);
  }
  .loader-box span
  {
    font-size: 3rem;
    font-weight: 600;
  } 
  .loader-box p
  {
    display: none;
    font-size: 1.5rem;
    font-weight: 300;
  }

aside{
    height: 100%;
    width: 20%;
    background-color: var(--fb-darkest);
}
main 
{
    height: 100%;
    width: 80%;
}
header
{
    font-family: 'Inter', sans-serif;
    display: flex;
    background-color: var(--fb-main);
    height: 10%;
}
footer
{
    background-color: var(--fb-main);
    height: 8%;
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    align-items: center;
}
section 
{
    overflow-y: scroll;
    width: 100%;
    height: 82%;
    padding: 8px;
}
.header-left{
       
    width: 60%;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 0 12px;
}
.header-right{
    width: 40%;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: end;
    padding: 0 12px;
}
.menu,
.theme,
.notification
{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 30px;
    background-color: var(--color-gray-100);
    color: var(--BLUE2);
    border-radius: 50%;
}
.user
{
    display: flex;
    height: 30px;
    background-color: var(--color-gray-100);
    color: var(--BLUE3);
    align-items: center;
    flex-direction: row-reverse;
    border-radius: 20px 20px 20px 20px;
}
.user img{
    width: 30px;
    border-radius: 50%;
    object-fit: cover;
    
}
.user-info
{
    font-size: 1rem;
    padding: 0 12px;
}
.user i{
    display: flex;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1.2rem;
    align-items: center;
    background-color: #f1f1f1;
}
.header-page-title
{
    
    font-size:1.2rem;
    color: white;  
    font-weight: 500;  
}

.table-conatiner
    {
        padding: 8px;
        width: 100%;
    }
    table {
      width: 100%;
      margin: auto;
      border-collapse: collapse;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    th, td {
      padding: 8px;
      border: 1px solid #ddd;
      text-align: left;
      font-family: 'Inter', sans-serif;
      font-size: 1rem;
      
      
    }

    th {
      background-color: var(--BLUE1);
      color: var(--color-light-text);
      text-align: center;
      font-weight: 600;
    }
    td {
        color: var(--color-text);
        font-weight: 400;
        
    }

    tr:nth-child(even) {
      background-color: #f9f9f9;
    }

    tr:hover {
      background-color: #f1f1f1;
    }
    .table-button-active
    {
        
        padding: 4px 8px;
        background-color: var(--color-success);
        border: none;
        outline: none;
        color: white;
    }
    .table-button-inactive
    {
        background-color: var(--color-error);
        padding: 4px 8px;
        color: white;
        border: none;
        outline: none;
    }

    .pro_img{
        width: 50px;
        height: 50px;
        border-radius: 5px;
        object-fit: cover;
    }
    .cus_img{
        width: 100px;
        height: 100px;
        border-radius: 5px;
        object-fit: cover;
    }
    .cus-images{
        display: flex;
        width: 100%;
    }
    .order-items
    {
        display: flex;
        width: 100%;
        padding: 2px 0;
        justify-content: space-between;
        align-items: center;
        
        margin-bottom: 2px;
    }
    .order-items a
    {
        text-decoration: none;
    }
    .view
    {
        padding: 8px 12px;
        background-color: #1593E6;
        color: white;
        border-radius: 4px;
    }
    @keyframes rotate {
        0%   { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      
      @keyframes typing {
        from { width: 0; }
        to { width: 13ch; } /* Adjust for text length */
      }
      
      @keyframes blink {
        50% { border-color: transparent; }
      }
      .item
      {
        display: flex;
      }


      .order-info-box
    {
        font-family: 'Inter', sans-serif;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
       
    }
    .order-info
    {
        border: 1px solid var(--blue-6);
        
    }
    .order-info h4
    {
        background-color: var(--blue-6);
        padding: 8px;
        color: white;
    }
    .order-info-list
    {
        display: flex;
        flex-direction: column;
        padding: 8px;
    }
    .order-info-list li
    {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1rem;
        line-height: 1.6;
        padding: 2px;
        color: var(--color-subtext);
        font-weight: 400;
        text-align: end;
       
    }
    .order-info-list li span
    {
        font-weight: 600;
        font-size: 1.1;
        color: var(--color-text);
        text-align: start;
    }
    .order-status
    {
        display: flex;
        padding: 8px;
    }
    .order-status .spostioncanceel,
    .order-status .spostion
    {
        position: relative;
        justify-content: space-around;
    }
    .order-status .spostion::after
    {
                    content: '';
                        position: absolute;
                        top: 35%;
                        left: 0;
                        width: 100%;
                        height: 6px;
                        background-color: var(--color-success);
                        z-index: -1;
    }
    .order-status .spostion h5
    {
        color: var(--color-success) !important;
    }
    .order-status .spostion i
    {
        background-color: var(--color-success);
    }

    .order-status .spostioncanceel::after
    {
                    content: '';
                        position: absolute;
                        top: 35%;
                        left: 0;
                        width: 100%;
                        height: 6px;
                        background-color: var(--color-error);
                        z-index: -1;
    }
    .order-status .spostioncanceel h5
    {
        color: var(--color-error) !important;
    }
    .order-status .spostioncanceel i
    {
        background-color: var(--color-error);
    }

    .order-status-item
    {
        width: 100%;
        
        display: flex;
        flex-direction: column;
        text-align: center;
        padding: 12px;
        align-items: center;
        justify-content: space-between;
        gap: 5px;
    }
    .order-status-item h5{
        font-size: 1rem;
        color: var(--color-text);
    }
    .order-status-item p{
        font-size: 0.9rem;
        color: var(--color-subtext);
        font-weight: 400;
    }
    .order-status-item i{
        height: 40px;
        width: 40px;
        border-radius: 50%;
        font-size: 1.5rem;
      
        background-color: var(--blue-6);
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
    }
    .orderitem
    {
        display: flex;
        align-items: center;
    }
    .orderitem img
    {
        height: 40px;
        width: 40px;
    }
    .order-action
    {
        padding: 8px;
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 10px;
        align-items: center;
    }
    .order-action button{
        padding: 12px 16px;
        border: none;
        outline: none;
        color: white;
        border-radius: 8px;
        height: fit-content;
    }
    .order-action input{
        padding: 12px 16px;
        border: 1px solid var(--color-subtext);
        font-size: 1.2rem;
        color: var(--color-text);
        border-radius: 8px;
    }
    .order-action .confirm{background-color: var(--color-success);}
    .order-action .cancel {background-color: var(--color-error);}

    .status-n,
    .status-c,
    .status-s,
    .status-d
    {
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 1rem;
        font-weight: 500;
        color: var(--color-light-text);
        background-color: var(--color-success);
    }
    .status-c
    {
        background-color: var(--blue-5);
    }
    .status-s
    {
        background-color: var(--color-warning);
    }
    .status-d
    {
        background-color: var(--color-error);
    }
    .status-n
    {
        background-color: var(--color-success);
    }

    .cus-info-det
    {
        list-style: none;
        
       
        border-radius: 8px;
    }
    .cus-info-det li
    {
        
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px;
        font-size: 1rem;
        color: var(--color-subtext);
        font-weight: 400;
        width: 100%;
    }
    .cus-info-det li span
    {
        width: 65%;
        font-weight: 600;
        color: var(--color-text);
       
        text-align: end;
    }
    .cus-info-det li b
    {
        
        width: 35%;
        font-size: 1rem;
        color: var(--color-subtext);
    }
    
    
    .status-td button
    {
        outline: none;
        border: none;
    }

    .customeinput
    {
        width: 400px;
        display: flex;
        gap: 4px;
       
        flex-direction: column;
    }
    .customeinput textarea,
    .customeinput input{
        padding: 6px 8px;
        border: 1px solid var(--color-subtext);
        font-size: 1rem;
        color: var(--color-text);
        border-radius: 4px;
    }
    
    .td-note
    {
        padding: 8px;
        font-size: 1rem;
        color: var(--color-text);
        background-color: var(--color-light);
        width: 100%;
        border-radius: 4px;
        border: 1px solid var(--color-subtext);
        font-weight: 400;
    }


    
    .login-conatiner{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        height: 100%;
        width: 100%;
       
        
    }
    .login-box{
        width: 550px;
        background-color: var(--fb-lightest);
       
        border-radius: 10px;
    }
    .login-box h2{
        text-align: center;
        font-size: 2rem;
    }
    .login-box p{
        text-align: center;
        font-size: 1rem;
    }
    .form-action
    {
        padding: 18px 12px;
      
        display: flex;
        flex-direction: column;
        gap: 10px;
        font-family: 'Inter', sans-serif;
        margin-bottom: 10px;
    }
    .form-action-row
    {
        
        display: flex;
        flex-direction: column;
    }
    .form-action-row label
    {
        margin-bottom: 4px;
    }
    .form-action-input
    {
        width: 100%;
        display: flex;
        gap: 10px;
        align-items: center;
        
    }
    .form-action-input label{
        
        color: white;
        height: 40px;
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        background-color: var(--color-gray-300);
        color: var(--BLUE2);
        border-radius: 6px;
    }
    .form-action-input input{
        padding: 8px 8px;
        font-size: 14px;
        border: none;
        border-radius: 4px;
        transition: border-color 0.3s ease;
        width: 100%;
        height: 40px;
        border: 1px solid var(--color-subtext);
        color: black;
        background-color: white;
    }
        input[type="email"]:focus {
        border-color: #007BFF;
        outline: none;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
        }
        input[type="password"]:focus {
        border-color: #007BFF;
        outline: none;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
        }
    .form-action-button
    {
        
        width: 100%;
        display: flex;
        justify-content: end;
        gap: 15px;
        margin-bottom: 10px;
        padding: 8px 0;
    }
    .form-action-button button
    {
        border-radius: 8px;
        padding: 12px 16px;
        font-size: 1.1rem;
        border: none;
        min-width: 150px;
    }
    .form-action-button button:nth-child(2)
    {
        background-color: var(--fb-main);
        color: white;
    }
    .form-action-button button:nth-child(1)
    {
        background-color: var(--color-gray-800);
        color: white;
    }

    .form-action-input textarea{
        padding: 8px 8px;
        font-size: 14px;
        border: none;
        border-radius: 4px;
        transition: border-color 0.3s ease;
        width: 100%;
        
        border: 1px solid var(--color-subtext);
        color: black;
    }

    .blog-details-td
    {
      
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        text-align: left;
        width: 100%;
        position: relative;
        font-size: 0.95rem;
    }
    .blog-details-td img
    {
        width: 100%;
        height: 250px;
        border-radius: 4px;
        object-fit: fill;

    }
    .blog-details-td span
    {
        position: absolute;
        background-color: var(--fb-main);
        padding: 4px 8px;
        color: white;
        border-radius: 4px;
        top: 0;
        left: 0;
        
        
    }
    .blog-details-td a
    {
        width: 100%;
       text-align: end;
       font-weight: 600;
        
        
    }

    .seo-ul
    {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    .seo-ul li
    {
        border: 1px solid var(--color-subtext);
        padding: 8px;
        border-radius: 4px;
        font-size: 0.9rem;
    }
    .header-th
    {
        background-color: var(--fb-darkest) !important;
        color: var(--color-light-text) !important;
    }
    .settingstable th
    {
        width: 25%;
        text-align: left;
        background-color: transparent;
        color: var(--color-text);
        
    }
    .settingstable td
    {
        background-color: transparent;

    }