html,
body {
    overflow-x: hidden;
    overflow-y: auto; /* Ensures vertical scrolling but hides the scrollbar */
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background-color: #050505;
    color: white;
    /* Avoid redundant styles */
}

/* Hide the scrollbar completely */
body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

body {
    -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.main-content::-webkit-scrollbar {
    width: 0; /* For Chrome, Safari, and other WebKit browsers */
}
.main-content {
    height: calc(100vh - 30px);
    /* Full viewport height minus padding/margins */
    padding: 20px;
    overflow-y: auto;
    background-color: #F3F4F5;
    /* Background color */
    border-radius: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 0px;
      overflow-x: hidden;
}
.custom-body{
    height: calc(100vh - 80px);
}
.nav-container {
    width: 320px;
    border-radius: 20px;
    padding: 20px;
}
.sidebar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.sidebar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.profile-section {

    border-radius: 20px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.profile-info {
    display: flex;
    width: 100%;
    min-width: 0;
}
.mr-2 {
    padding-left: 15px;
}
.profile-image img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.username {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    padding-left: 5px;
    /* Control the width of the email text */
}

.role {
    font-size: 14px;
    color: #a5a5a5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
        margin: 0px;
}

.icon-section {
    display: flex;
    align-items: center;
}

.translate-icon,
.notification-icon {
    background-color: rgba(0, 0, 0, 0.70);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    position: relative;
}

.translate-icon img,
.notification-icon img {
    width: 20px;
    height: 20px;
}

.notification-badge {
    font-size: 12px;
    padding: 2px 6px;
    background-color: #6c63ff;
    color: white;
}

.search-section {
    border-radius: 30px;
    backdrop-filter: blur(25px);
  /*  padding-top: 10px;
    padding-bottom: 10px;*/
    padding-right: 2px;
    padding-left: 2px;
    position: relative;
    margin-top: 10px;
}

.search-bar {
    border-radius: 30px;
    color: #bfbfbf;
    /* Light text color */
    border: 2px solid rgba(255, 255, 255, 0.1);
    /* Light border */
    height: 45px;
    background: #2c2c2c;
    /* Dark background color */
    padding-left: 40px;
    /* Space for the search icon */
    outline: none;
    font-size: 15px;
    width: 100%;
}

.search-bar::placeholder {
    color: #bfbfbf;
    /* Placeholder color */
    opacity: 1;
    /* Ensure placeholder is visible */
}

.search-bar:focus {
    border-color: #6666ff;
    /* Change border color on focus */
    background: #333333;
    /* Slightly darker background on focus */
}

.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.search-icon img {
    width: 20px;
    height: 20px;
   /* filter: invert(80%);*/
    margin-left: 5px;
    margin-bottom: 3px;
}

.menu-item {
    color: #FFFFFF;
    transition: color 0.3s ease, background-color 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* Light border between items */
    padding: 15px 15px;
    /* Adjust horizontal padding */
    margin-left: 5px;
    /* Add margin to the left */
    margin-right: 5px;
    /* Add margin to the right */
    border-radius: 0px;
    /* Reduce border-radius */
}

.menu-item:last-child {
    border-bottom: none;
    /* Remove bottom border from the last item */
}

.menu-item img {
    width: 24px;
    height: 24px;
    margin-right: 15px;
    transition: fill 0.3s ease;
    fill: #FFFFFF;
    /* Default icon color (white) */
}


.menu-item.active {
    color: #000000;
    background-color: #B591EF;
    /* Background color on hover */
    border-radius: 20px;
    /* Adjusted border-radius for hover state */
}

.menu-item:hover img,
.menu-item.active img {
    fill: #000000;
    /* Icon color (black) */
}

.menu-section .menu-item img {
    width: 24px;
    height: 24px;
    margin-right: 15px;
    fill: #FFFFFF;
    transition: fill 0.3s ease;
}

.menu-section .menu-item {
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #FFF;
    transition: color 0.3s ease;
    margin: 10px 0px 10px 0px;
}

.menu-item.active
 {
    background: #B591EF;
    backdrop-filter: blur(25px);
    color: #000000;
}

.menu-item:hover {
    backdrop-filter: blur(25px);
    background-color: transparent;
}

.menu-section img {
    filter: invert(0);
}

.date-section {
    background-color: #3A394E;
    border-radius: 15px;
}

.date-section img {
    width: 24px;
    height: 24px;
}

.logout-button {
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    color: #FF3030;
}

.section {
    border-radius: 30px;
    background: linear-gradient(95deg, rgba(255, 255, 255, 0.10) 0%, rgba(238, 238, 238, 0.10) 100%);
    backdrop-filter: blur(25px);
    margin-top: 10px;

    padding: 10px;
}

.ms-3 {
    margin-top: 8px;
}

.menu-item:hover {
    border-radius: 20px;
}

.logout-section {
    /*display: flex;*/
    justify-content: center;
    align-items: center;
   /* height: 100%;*/
        padding-top: 10px;
        margin-bottom: 10px;
}

.logout-button {
    border-radius: 30px;
    padding: 12px 16px;
    font-size: 16px;
    border: 1px solid #FF3030;
    background: rgba(255, 48, 48, 0.40);
    color: #FF3030;
    backdrop-filter: blur(25px);
    width: 100%;
    text-align: center;
    cursor: pointer;
    outline: none;
}

.logout-button:hover {
    background: rgba(255, 48, 48, 0.60);
}

.section-out {
    border-radius: 30px;
    background: linear-gradient(95deg, rgba(255, 255, 255, 0.10) 0%, rgba(238, 238, 238, 0.10) 100%);
    backdrop-filter: blur(25px);
    margin-top: 15px;
}

/*  sections */


.search-section.mb-3.section.section-2.position-relative {
    padding-bottom: 2px;
}
.border-30{
    border-radius: 30px;
}

.border-90 {
    border-radius: 90px;
}

.edit-icon{
    margin-right: 3px;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10!important;
}
/* Custom card styles */
.custom-card {
    border-radius: 20px;
  /*  border: 1px solid #FFF;*/
    padding: 15px;
    color: #000;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 24px;
    backdrop-filter: blur(20px);
    position:relative!important;
}

input.form-control.mt-2 {
   
    height : auto;
    min-width: 100px; /* Minimum width to avoid being too small */
    max-width: 100%; /* Prevent it from exceeding the container */
}


.custom-card h5 {
    color: #000;
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 10px;
    margin-right: 10px;
}

/* Background colors */
.bg-blue {
    background: #B8D9FF;
}

.bg-green {
    background: #A5EEBE;
}

.bg-pink {
    background: #F6ABD8;
}

.bg-purple {
    background: #9B7FE0;
}

.bg-yellow {
    background: #FDD484;
}


.card-grid {
    column-count: 4;
    /* Number of columns */
    column-gap: 15px;
    /* Space between columns */
    padding: 20px;
}

.card-grid .custom-card {
    display: inline-block;
    /* Inline block to respect column layout */
    width: 100%;
    margin-bottom: 15px;
    /* Space between rows */
}




/* Header styles */
.header-section {
    background-color: #FFFFFF;
    /*border-radius: 30px;*/
    height: 95px;
   /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
}

.header-title {
    color: #000;
    font-family: 'Outfit', sans-serif;
    font-size: 26px;
    font-weight: 600;
}

.form-control {
    border-radius: 20px;
    height: 40px;
    width: 450px;
    padding-left: 20px;
    font-family: 'Outfit', sans-serif;
}

.btn-edit-details{
    background-color: #B39CD0;
    color: #fff;
    border-radius: 20px;
    padding: 10px 20px;
    font-family: 'Outfit', sans-serif;
    border: none;
}

.btn-edit-purple{
    background-color: #B39CD0;
    color: #000;
    border-radius: 20px;
    padding: 10px 20px;
    font-family: 'Outfit', sans-serif;
    border: none;

}

.btn-edit-details:hover,
.btn-edit-details:active,
.btn-edit-purple:hover,
.btn-edit-purple:active {
    background-color: #9B7FE0;
    color: #fff;
}


.settings-card{
    padding: 20px;
}


.btn {
    border-radius: 12px;
    padding: 7px;
    font-size: 14px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    margin-right: 5px;
   /* margin-left: 10px;*/
    white-space: nowrap;
}


.btn-send-pinned {
    background-color: #B591EF;
    color: #000;
    border: 2px solid #B591EF;
    font-size: 14px;
}

.btn-send-pinned:hover {
    background-color: #836AC6;
    color: #000;
}

.btn-schedule-pinned {
    background-color: transparent;
    color: #B591EF;
    border: 2px solid #B591EF;
}

.btn-schedule-pinned:hover {
    background-color: #EDE5FF;
    color:#000;
}

.btn-delete-pinned {
    background-color: #FFE5E5;
    color: #EF5252;
    border: 2px solid #EF5252;
}

.btn-delete-pinned:hover {
    background-color: #FFCCCC;
    color: #000;
}

.btn-send-rotation {
    background-color: transparent;
    color: #000;
    border: 2px solid #DADADA;
}

.btn-send-rotation:hover {
    background-color: #F5F5F5;
    color: #000;
}
.header-section .d-flex.align-items-center {
/*    flex-wrap: wrap;*/
}

.market-search{
    height: 40px;
    width: 240px;
}

.reg-user-btn{
    max-width: 590px;
    max-height: 70px;
    height: 100%;
}


  .font-18 {
      font-size: 18px;
  }

  .border-10{
    border-radius: 10px;
  }





.disable-btn {
    color: #ff0000;
    border-radius: 50px;
    border: 1px solid #ff0000;
    background: #ff30302e;
    padding: 5px 15px;
    font-weight: bold;
}


.action-btn {
    color: #00C945;
    border-radius: 50px;
    border: 1px solid #00C945;
    background: rgba(165, 238, 190, 0.30);
    padding: 5px 15px;
    font-weight: bold;
}

.alert-list {
    color: #FF3030;
    border-radius: 50px;
    border: 1px solid #FF3030;
    background: rgba(255, 48, 48, 0.40);
    padding: 5px 15px;
    font-weight: bold;
}

.pagination .page-item .page-link {
    color: #6C63FF;
}

.pagination .page-item.active .page-link {
    background-color: #6C63FF;
    border-color: #6C63FF;
}



/* Table design   */

.table-borderless tbody {
    border-spacing: 0 10px;
    /* Add space between rows */
}

.table-borderless tbody tr {
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.table-row td {
    padding: 15px 10px !important;
    background-color: #FFFFFF;
    border: none;
    font-size: 17px;
}

.table-row td:first-child {
    border-top-left-radius: 15px !important;
    border-bottom-left-radius: 15px !important;
}

.table-row td:last-child {
    border-top-right-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
}

.table {
    border-collapse: separate !important;
    /* Prevent cells from collapsing, allowing space between rows */
    border-spacing: 0 15px;
    /* Adds space between rows */
}

.bg-light {
    background-color: #F3F4F5 !important;
}

.table {
    background-color: transparent !important;
    --bs-table-bg: transparent !important;
}







input#switch1 {
    width: 40px;
    height: 20px;
}
input#switch2 {
    width: 40px;
    height: 20px;
}
.form-check-input:checked {
    background-color: #B591EF !important;
    border-color: #B591EF !important;
}
/*
.form-check-input {
    border-color: #FF4D4D !important;
}
*/
input.border-30.p-3.w-100 {
    border-color: transparent;
}
.text-dark.bg-purple.border-30.px-4.py-2 {
    border-radius: 30px;
}




.description-layout{
    height: 120px;
}

.card-input{
        padding: 8px;
            margin: 5px;
}






/* Header */
                .sidebar {
                    position: fixed;
                    height: 100vh;
                   
                    width: 21%;
                    overflow-y: auto;
                    overflow-x: hidden;
                    margin-left: 0.5%;
                    display: flex;
                    flex-direction: column;
                    transition: width 0.3s;
                }
        
                .menu-section {
                    flex-grow: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                }
        
                .logout-section {
                    margin-top: auto;
                }
        
                .main-content {
                    width: 76.8%;
                    margin-left: 22.5%;
                }
        
                /* Default sidebar styles */
                .menu-item span {
                    display: inline-block;
                    transition: opacity 0.3s;
                }
                .menu-item.active:hover {
                    background: #9A7BD1; 
                  
                  
    
                }
        
                .sidebar.collapsed {
                    width: 80px;
                }
        
                .sidebar.collapsed .menu-item span {
                    display: none;
                }
        
                .sidebar.collapsed .profile-info p {
                    display: none;
                }
        
                .sidebar.collapsed .translate-icon,
                .sidebar.collapsed .notification-icon {
                    margin: 0;
                }
        
                .profile-image img {
                    width: 40px;
                    height: 40px;
                }
        
                /* Media Query for smaller screens */
                @media (max-width: 992px) {
                    .sidebar {
                        width: 80px;
                    }
        
                    .main-content {
                        width: calc(100% - 80px);
                        margin-left: 90px;
                    }
        
                    .menu-item span {
                        display: none;
                    }
        
                    .profile-info p {
                        display: none;
                    }
        
                    .translate-icon,
                    .notification-icon {
                        margin: 0;
                    }
                }
        
                @media (max-width: 576px) {
                    .sidebar {
                        width: 60px;
                        margin-right: 10px;
                    }
        
                    .main-content {
                        width: calc(100% - 60px);
                        margin-left: 65px;
                    }
        
                    .profile-image img {
                        width: 30px;
                        height: 30px;
                    }
        
                    .sidebar.collapsed {
                        width: 60px;
                    }
                }
        
                @media (max-width: 576px) {
                    .icon-section {
                        flex-direction: column;
                        /* Change to column layout */
                    }
        
                    .translate-icon,
                    .notification-icon {
                        margin-bottom: 10px;
                        /* Add spacing between icons */
                    }
        
                    .me-2 {
                        margin-right: 0px !important;
                    }
        
                    .translate-icon:last-child,
                    .notification-icon:last-child {
                        margin-bottom: 0;
                        /* Remove margin from last icon */
                    }
                }
        
           



            img.img-fluid.me-3.answer-icon{
                    width: 15px;
                    height: 15px;
                }
               img.img-fluid.sm-icon{
                    width: 18px;
                    height: 18px;
                }
                .wd-150{
                    width: 150px;
                }
                
                
                
                
   .table-borderless tbody tr {
    background-color: #FFFFFF;
     box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1) !important; 
}




.pagination-container {
    text-align: center !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 50% !important;
    border: 1px solid #ccc !important;
    color: #000 !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 38px !important;
    text-align: center !important;
    margin: 0 5px !important;
    background-color: white !important;
    transition: background-color 0.3s, color 0.3s !important;
    font-weight: 500 !important;
    font-size: 16px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: white !important;
    border: 2px solid #000 !important;
    color: #000 !important;
  
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #fff !important;
    background: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    border-radius: 50% !important;
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    color: #000 !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 38px !important;
    text-align: center !important;
    margin: 0 5px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:focus {
    outline: none !important;
}

.dataTables_wrapper .dataTables_paginate .ellipsis {
    width: auto !important;
    padding: 0 10px !important;
    border: none !important;
    background: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
    padding : 0px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        color: black !important;
        background-color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
    color: #000 !important;
}





.dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: white !important;
    color: black !important;
    border: 1px solid #ccc !important;
}

/* Active pagination button styling */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background-color: white !important;
    color: #3e0d75 !important; /* Keep the purple color for the active state */
    border: 1px solid #000 !important;
}

/* Adjust hover effect for pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #f0f0f0 !important;
    color: black !important;
}
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
    color: black !important;
}












/* Pagination container */
.pagination-container {
    text-align: center;
    margin-top: 20px;
}

/* Style the pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-block;
    border-radius: 50%;
    border: 1px solid #ccc;
    color: #000;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin: 0 5px;
    background-color: #fff;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Style the active button */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: #3e0d75;
    border: 2px solid #3e0d75;
    font-weight: bold;
}

/* Style the hover effect */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #f0f0f0;
}

/* Style the previous and next buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    border-radius: 50%;
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    color: #6c757d;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
}

/* Style the ellipsis */
.dataTables_wrapper .dataTables_paginate .ellipsis {
    line-height: 40px;
    margin: 0 5px;
    color: #6c757d;
}

/* Disable outline when focused */
.dataTables_wrapper .dataTables_paginate .paginate_button:focus {
    outline: none;
}

/* Pagination container */
.pagination-container {
    text-align: center;
    margin: 20px 0; /* Add some vertical margin around the pagination */
}

/* Style the pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-block;
    border-radius: 50%;
    border: 1px solid #ccc;
    color: #000;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin: 0 8px; /* Increase horizontal margin between buttons */
    background-color: #fff;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none !important; /* Remove the underline */
}

/* Style the active button */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: #3e0d75;
    border: 2px solid #3e0d75;
    font-weight: bold;
}

/* Style the hover effect */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #f0f0f0;
}

/* Style the previous and next buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    border-radius: 50%;
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    color: #6c757d;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    margin: 0 8px; /* Increase horizontal margin between buttons */
}

/* Style the ellipsis */
.dataTables_wrapper .dataTables_paginate .ellipsis {
    line-height: 40px;
    margin: 0 8px; /* Align the ellipsis with other buttons */
    color: #6c757d;
}

/* Disable outline when focused */
.dataTables_wrapper .dataTables_paginate .paginate_button:focus {
    outline: none;
}

/* Remove text underline from links */
.dataTables_wrapper .dataTables_paginate .paginate_button a {
    text-decoration: none !important;
}

/* Additional container styling to center pagination horizontally */
.dataTables_wrapper .dataTables_paginate {
    display: flex;
    justify-content: center;
    align-items: center;
}
.dataTables_wrapper .dataTables_paginate {
    margin-bottom: 20px; /* Adjust this value to control the space below the pagination */
}
.pagination-container {
    margin-bottom: 20px !important;
}



.d-flex.section.align-items-center.justify-content-between.profile-section{
    z-index : 1000;
}


.dropdown-menu {
    background-color: #2c2c2c;
    border: none; 
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15); 
    border-radius: 8px; 
    padding: 0; 
}


.dropdown-menu .dropdown-item {
    color: #f1f1f1; 
    padding: 10px 15px;
    font-size: 14px; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
}


.dropdown-menu .dropdown-item:last-child {
    border-bottom: none;
}


.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: #3a3a3a; 
    color: #ffffff; 
}


.dropdown-menu .dropdown-item.active {
    background-color: #5a5a5a; 
    color: #ffffff;
}


.dropdown-menu input[type="search"] {
    background-color: #3a3a3a;
    color: #ffffff;
    border: none;
    padding: 8px 10px;
    width: 100%;
    margin-bottom: 10px;
    border-radius: 4px;
}

.dropdown-toggle::after {
    display: none;
}

input.card-input.inside-input.form-check-input.name\= {
    padding: 8px;
    margin: 5px;
}
input.form-check-input.inside-input.card-input {
        padding: 8px;
    margin: 5px;
}





    /* Add transition and hover effects */
    .settings-card {
        transition: all 0.3s ease-in-out;
        border-radius: 15px;
    }

    /* Add a subtle shadow */
    .shadow-sm {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* Increase shadow on hover for depth effect */
    .hover-shadow:hover {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        transform: translateY(-5px); /* Lift the card slightly on hover */
    }


/*Login style */


/*Template page*/

.template_instruction {
    display: flex;
    align-items: center;
}
.template_instruction h2{
    font-weight: bold;
}
.template_instruction a{
    background: #6e757c;
    color: #fff;
    text-decoration: none;
    padding: 4px 13px;
    border-radius: 50px;
    margin-left: 10px;
}
p.template_instruction_p{
    color: #6e757c;
    margin-bottom: 0;
}

.tamplate_table .test:after {
    content: '\2807';
    font-size: 24px;
    width: 12px;
    display: block;
}
.tamplate_table .tbimage{
    height: 67px;
    width: 103px;
}
.tamplate_table th{
    color: #909293;
}
.tamplate_table th.c_title,  .tamplate_table td.c_title{
    color: #316cf4;
}
.tamplate_table button#dropdownMenuButton1 {
    background: #f8f9fa;
    color: #000;
    padding: 0;
}
.dropdown-menu .dropdown-item:hover{
    background-color: transparent;
    color: #ffffff;
    opacity: .8;
}
.p-4.mt-3.rounded-3.tamplate_table{
    overflow-y: scroll !important;
    height: 80%;
    padding-top: 0px !important;
    padding-left: 0px !important;
}

.p-4.mt-3.rounded-3.tamplate_table::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}
.p-4.mt-3.rounded-3.tamplate_table::-webkit-scrollbar
{
    width: 6px;
    background-color: #F5F5F5;
}

.p-4.mt-3.rounded-3.tamplate_table::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.3);
    background-color: #555;
}
.p-4.mt-3.rounded-3.tamplate_table .table {
    border-spacing: 0px 0px;
}
@media screen and (max-width: 580px) {
    .p-4.mt-3.rounded-3.tamplate_table{
        overflow-x: scroll !important;
    }
    .p-4.mt-3.rounded-3.tamplate_table table{
        width:500px;
    }
    .p-4.mt-3.rounded-3.tamplate_table::-webkit-scrollbar-track {

    }
}

/*End of Template page*/

/* Template preview */
.p-4.mt-3.rounded-3.tamplate_table.preiew_template {
    height: 100%;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: bottom center !important;
    padding: 0 !important;
    margin: 0 !important;
}
.preview_text {
    position: absolute;
    bottom: 0;
    padding: 40px;
}
.preview_text h1 {
    font-weight: 400;
    font-size: 40px;
    margin-bottom: 15px;
}
.preview_text h3 {
    color: #d7dbdc;
    font-size: 22px;
    margin-bottom: 50px;
    font-weight: 400;
}
.preview_text h5 {
    font-style: italic;
    font-weight: 400;
}
/*End of Template preview*/

/* Template Edit */
.edit_template .template_instruction, .p-4.mt-3.rounded-3.tamplate_table.edit_template_form {
    padding: 1em !important;
}
.edit_template_form {
    background: #f3f4f5;
    border-radius: 0 !important;
}
.edit_template_form .form-control {
    width: 100%;
    height: 44px;
}
.edit_template_form .form-label {
    color: #000;
    font-size: 18px;
}
.edit_template_form textarea.form-control {
    height: auto;
}
input.form-control-file {
    color: #000;
}
.edit_template_form .btn {
    padding: 10px 2px;
    min-width: 100px;
}
/* End to Template Edit */



.custom-select {
    position: relative;
    width: 200px; 
    font-family: Arial, sans-serif;
}

/* Main select box */
.select-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background-color: #ffffff; 
    border: 1px solid #ccc;
    border-radius: 25px; 
    cursor: pointer;
    font-size: 16px;
    color: #333; 
    transition: all 0.3s ease;
}

.select-box:hover {
    border-color: #007bff; 
}


.arrow {
    font-size: 16px;
    color: #007bff;
}


.dropdown-options {
    position: absolute;
    top: calc(100% + 5px); 
    left: 0;
    right: 0;
    background-color: #ffffff; 
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
    transition: all 0.3s ease;
}


.option {
    padding: 7px 10px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.option:hover {
    background-color: #f1f1f1; 
}

.dropdown-options.show {
    display: block; 
}

.select-box:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

button.btn.btn-secondary.add-email.p-2.mt-2 {
    width: 45px;
}

button.btn.btn-danger.mt-2.p-2.add-email.remove-email {
    width: 40px;
}

.rotate {
    transform: rotate(180deg);
    transition: transform 0.3s ease-in-out;
}

.rotate-back {
    transform: rotate(0deg);
    transition: transform 0.3s ease-in-out;
}



.header-section.d-flex.justify-content-between.align-items-center.mb-4.p-3 {
    gap: 20px;
}
.header-section.d-flex.justify-content-between.align-items-center.mb-4.p-3 h1.header-title {
    width: 20%;
}
.header-section.d-flex.justify-content-between.align-items-center.mb-4.p-3 .custom-select.text-dark {
    width: 30%;
}
.header-section.d-flex.justify-content-between.align-items-center.mb-4.p-3 .d-flex.align-items-center {
    width: 50%;
}
.header-section.d-flex.justify-content-between.align-items-center.mb-4.p-3 .form-control {
    width: 100%;
    max-width: 450px;
    border-radius: 40px;
    height: 50px;
}
.header-section.d-flex.justify-content-between.align-items-center.mb-4.p-3 .d-flex.align-items-center a{
    max-width: 142px;
    width: 100%;
}
.header-section.d-flex.justify-content-between.align-items-center.mb-4.p-3 .d-flex.align-items-center a .btn-edit-details {
    border-radius: 30px;
    padding: 15px 20px;
}
.h-50{
    height: 50%;
}
@media only screen and (max-width: 1024px)  { 
    .header-section h1.header-title {
        font-size: 18px;
    }
}
@media only screen and (max-width: 768px)  { 

   .header-section.d-flex.justify-content-between.align-items-center.mb-4.p-3 {
        flex-wrap: wrap;
        height: auto;
        gap: 0px;
    }
    .header-section.d-flex.justify-content-between.align-items-center.mb-4.p-3 h1.header-title {
        width: 100%;
        text-align: center;
        font-size: 30px;
    }
    .header-section.d-flex.justify-content-between.align-items-center.mb-4.p-3 .custom-select.text-dark {
        width: 35%;
    }
    .header-section.d-flex.justify-content-between.align-items-center.mb-4.p-3 .d-flex.align-items-center {
        width: 63%;
    }
    .main-content.mt-3.border-30 .card-grid {
        column-count: 3;
    }
}
@media only screen and (max-width: 620px)  {
    .header-section.d-flex.justify-content-between.align-items-center.mb-4.p-3 .custom-select.text-dark {
        width: 100%;
        margin-bottom: 20px;
    }
    .header-section.d-flex.justify-content-between.align-items-center.mb-4.p-3 .d-flex.align-items-center {
        width: 100%;
    }
    .main-content.mt-3.border-30 .card-grid {
        column-count: 2;
    }
}
@media only screen and (max-width: 420px)  { 

    .main-content.mt-3.border-30 .card-grid {
        column-count: 1;
    }
}