* {
    margin  : 0;
    padding : 0;
}

body {
    direction        : ltr;
    background-color : #FFFFFF;
    color            : #222222;
    font-size        : 13px;
    height           : 100%;
    display          : flex;
    flex-direction   : column;
}

form {
    display        : flex;
    flex-direction : column;
}

html {
    direction : ltr;
}

/* Responsive Styling */
@media (max-width : 768px) {
    h1 {
        font-size : 14px;
    }
}

h2 {
    text-align    : center;
    margin-bottom : 32px;
    color         : #333333;
}

input:hover, textarea:hover {
    border : 1px solid #CCCCCC;
}

input:focus, textarea:focus {
    border : 1px solid #AAAAFF;
}

input[type="file"]::file-selector-button {
    display : none;
}

label {
    display       : inline-block;
    margin-bottom : 0.5rem;
    font-weight   : 600;
}

select {
    width               : 100%;
    border-radius       : 0.375rem;
    border              : 1px solid #CCCCCC;
    box-sizing          : border-box;
    max-width           : 100%;
    appearance          : none;
    background-color    : #F8F8F8;
    color               : #333333;
    background-image    : url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="black" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>');
    background-repeat   : no-repeat;
    background-position : right 0.75rem center;
    background-size     : 1rem;
    transition          : border-color 0.3s ease, box-shadow 0.3s ease;
    line-height         : 1.5;
    padding             : 8px 10px;
}

select:hover {
    border-color : #888888;
}

select:focus {
    border-color : #5B9DD9;
    box-shadow   : 0 0 0 3px rgba(30, 140, 190, 0.3);
    outline      : none;
}

select option {
    padding          : 8px 12px;
    background-color : #FFFFFF;
    color            : #374151;
    transition       : background-color 0.2s ease, color 0.2s ease;
}

select option:checked {
    background-color : #60A5FA;
    color            : #FFFFFF;
}

select option:disabled {
    background-color : #E5E7EB;
    color            : #9CA3AF;
    cursor           : not-allowed;
}

select option:hover {
    background-color : #F3F4F6;
    color            : #111827;
}

textarea {
    border    : 1px solid #DDDDDD;
    font-size : 9pt;
    padding   : 4px 6px;
}

table {
    border-collapse  : collapse;
    width            : 100%;
    background-color : #F1F1F1;
    overflow         : hidden;
    border-radius    : 8px;
}

th, td {
    padding     : 15px;
    text-align  : center;
    white-space : nowrap;
}

td {
    font-size   : 10px;
    font-weight : 500;
}

th {
    background-color : #9D9D9D;
    color            : white;
    font-weight      : bold;
}

tr {
    border-top : 1px solid #E1E1E1;
}

tr:hover {
    background-color : #E9E9E9;
}

/* Responsive Styling */
@media (max-width : 768px) {
    th, td {
        padding : 10px;
    }
}

/*
  *********** Button styles ***********
 */

.btn {
    background-color : #F4F4F4;
    color            : #444444;
    padding          : 10px 15px;
    cursor           : pointer;
    border           : 1px solid #DBDBDB;
    border-radius    : 2px;
    font-size        : 12px;
    text-decoration  : none;
    line-height      : 1.5;
    border-radius    : 5px;
}

.btn-blue {
    background-color : #4488FF;
    color            : #FFFFFF;
    padding          : 5px 15px;
    cursor           : pointer;
    border           : 1px solid #5599FF;
    border-radius    : 5px;
    font-size        : 12px;
    text-decoration  : none;
}

.btn-blue:hover {
    background-color : #66AAFF;
    color            : #FFFFFF;
    border           : 1px solid #5599FF;
    box-shadow       : 0 1px 1px #DDDDDD;
}

.btn-success {
    color            : #FFFFFF;
    background-color : #28A745;
    border-color     : #28A745;
}

.btn-danger {
    color            : #FFFFFF;
    background-color : #DC3545;
    border-color     : #DC3545;
}

.btn-warning {
    color            : #FFFFFF;
    background-color : #FF9300;
    border-color     : #FC690D;
}

.btn-secondary {
    background-color : #BBBBBB;
    color            : white;
}

.btn-primary {
    background-color : #007BFF;
    color            : white;
}

.btn-sm {
    padding : 3px 6px;
}

.btn-md {
    padding : 3px 10px;
}

.btn-block {
    display : block;
    width   : 100%;
}

.close-btn {
    background : none;
    border     : none;
    font-size  : 18px;
    cursor     : pointer;
}

.close {
    color       : #FF5C5C;
    float       : right;
    font-size   : 24px;
    font-weight : bold;
    cursor      : pointer;
}

.submit-btn {
    width            : 100%;
    background-color : #4CAF50;
    color            : #FFFFFF;
    font-weight      : bold;
}

.toggle-button {
    position      : relative;
    width         : 50px;
    height        : 25px;
    margin-right  : 10px;
    margin-bottom : 0;
    width         : 54px;
}

/* Hide the checkbox input */
.toggle-button input {
    display : none;
}

/* Responsive Modal */
@media (max-width : 768px) {
    .btn {
        font-size : 8px;
    }

    .close-btn {
        font-size : 1.2em;
    }
}

/*
  *********** Content styles ***********
 */

#content {
    padding : 10px;
}

#header-wrapper {
    background-color : #F2F2F2;
    position         : fixed;
    top              : 0;
    height           : 20px;
    width            : 100%;
    border           : none;
    padding          : 5px 5px;
    border-bottom    : 1px solid #E4E4E4;
}

#header-top-right {
    position     : absolute;
    margin-right : 5px;
    width        : 800px;
}

hr.style-two {
    border           : 0;
    height           : 1px;
    background-image : linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

/*
  *********** Company Logo styles ***********
 */

.add-icon {
    font-size     : 13px;
    margin-right  : 10px;
    margin-left   : 10px;
    border        : 1px solid #FFFFFF;
    border-radius : 50%;
    padding       : 3px;
}

.logo {
    display       : block;
    height        : auto;
    margin        : 0 auto;
    margin-bottom : 20px;
}

img.logo {
    display : block;
    width   : auto;
    height  : 25px;
    padding : 16px;
    margin  : 0;
}

.page-container {
    display        : flex;
    flex-direction : column;
    width          : 100%;
    overflow       : auto;
    height         : 100vh;
}

.phone, .email {
    text-decoration : none;
    font-weight     : 600;
    color           : #0622FF;
}

/*
  *********** Dropdown styles ***********
 */

/* Dropdown container */
.dropdown {
    position      : relative;
    display       : inline-block;
    border        : 1px solid #C6C6C6;
    border-radius : 6px;
}

/* Action button with three vertical dots */
.action-btn {
    background      : none;
    border          : none;
    cursor          : pointer;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    padding         : 2px;
}

.action-btn .dot {
    width            : 3px;
    height           : 3px;
    background-color : #333333;
    border-radius    : 4px;
    margin           : 2px 3px;
}

.action-btn:focus {
    outline : none;
}

/* Dropdown menu */
.dropdown-menu, .dropdown-menu-category, .dropdown-menu-age {
    display          : none;
    position         : absolute;
    top              : 100%;
    right            : 0;
    background-color : #FFFFFF;
    box-shadow       : 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius    : 10px;
    z-index          : 10;
    min-width        : 150px;
    padding          : 5px 0;
    overflow         : hidden;
    transition       : transform 0.3s ease, opacity 0.3s ease;
}

/* Dropdown items */
.dropdown-item {
    display         : flex;
    align-items     : center;
    padding         : 3px 12px;
    text-decoration : none;
    color           : #333333;
    cursor          : pointer;
    white-space     : nowrap;
}

.dropdown-item:hover {
    background-color : #F5F5F5;
}

.dropdown-item.delete {
    color : red;
}

.dropdown-item.delete:hover {
    background-color : #FFE6E6;
}

/* Icons for menu items */
.dropdown-item .icon {
    display      : inline-block;
    width        : 20px;
    margin-right : 8px;
    text-align   : center;
    font-size    : 16px;
    line-height  : 1;
}

/* Show dropdown menu when active */
.dropdown.active .dropdown-menu, .dropdown.active .dropdown-menu-category, .dropdown.active .dropdown-menu-age {
    display : block;
}


/*
  *********** Input styles ***********
 */

.form-control {
    display          : block;
    width            : 100%;
    height           : calc(1.5em + 0.75rem + 2px);
    font-weight      : 400;
    line-height      : 1.5;
    color            : #495057;
    background-color : #FFFFFF;
    background-clip  : padding-box;
    border           : 1px solid #CED4DA;
    border-radius    : 0.25rem;
    transition       : border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.input-file {
    font-weight           : 400;
    color                 : #495057;
    cursor                : pointer;
    width                 : 150px;
    padding               : 10px;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    border                : 1px dashed #BBBBBB;
    text-align            : center;
    background-color      : #DDDDDD;
}

.form-group {
    margin-bottom : 1rem;
}

.form-group input {
    font-size   : 12px;
    text-indent : 0.625rem;
}

.input-group {
    margin-bottom : 15px;
}

.input-group label {
    display       : block;
    font-weight   : bold;
    color         : #555555;
    margin-bottom : 5px;
}

.input-group input[type="checkbox"] {
    vertical-align : middle;
}

.input-group input[type="text"],
.input-group input[type="email"],
.input-group input[type="password"] {
    width         : 100%;
    padding       : 10px;
    font-size     : 16px;
    line-height   : 1.5;
    border        : 1px solid #CCCCCC;
    border-radius : 4px;
    box-sizing    : border-box;
}

.input-group input[type="email"]::placeholder,
.input-group input[type="password"]::placeholder {
    font-size : 13px;
}


.options {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    font-size       : 0.9em;
}

.options label {
    display     : flex;
    align-items : center;
}

.options input[type="checkbox"] {
    margin-right : 5px;
}

.custom-file-upload {
    display     : flex;
    align-items : center;
    gap         : 10px;
}

#adminImage {
    display : none;
}

#fileName {
    font-size  : 11px;
    font-style : italic;
}

.wrong-input, .wrong-input:hover {
    border-color : #DC3545 !important;
}

.wrong-input:focus {
    outline : none;
}

.correct-input, .correct-input:hover {
    border-color : #058D00 !important;
}

.correct-input:focus {
    outline : none;
}

/* Responsive Modal */
@media (max-width : 768px) {
    .form-group input {
        font-size : 0.9em;
    }
}

/*
  *********** Link styles ***********
 */

.link-gray {
    color           : #666666;
    cursor          : pointer;
    font-size       : 8pt;
    margin          : 0 10px;
    text-decoration : underline;
}

.link-gray:hover {
    color           : #333333;
    text-decoration : underline;
}

.links {
    text-align : center;
    margin-top : 32px;
}

.links a {
    color           : #007BFF;
    text-decoration : none;
    font-size       : 0.9em;
    display         : block;
    margin-top      : 5px;
}

.links a:hover {
    text-decoration : underline;
}

/*
  *********** Login and Register styles ***********
 */

.login-container, .register-container {
    max-width        : 420px;
    background-color : #FFFFFF;
    padding          : 48px 24px;
    border-radius    : 8px;
    box-shadow       : 0 4px 20px rgba(0, 0, 0, 0.1);
    margin           : 64px auto;
    display          : flex;
    flex-direction   : column;
}

@media (max-width : 400px) {
    .login-container {
        padding : 15px;
    }
}


/*
  *********** Modal styles1 ***********
 */

.modal {
    position         : fixed;
    top              : 0;
    left             : 0;
    width            : 100%;
    height           : 100%;
    background-color : rgba(0, 0, 0, 0.5);
    display          : none; /* Hidden by default */
    justify-content  : center;
    align-items      : center;
    overflow         : auto;
    z-index          : 1000;
}

.modal-wrapper {
    max-height : 100vh;
}

.modal-content {
    background-color : white;
    padding          : 20px;
    max-width        : 500px;
    box-shadow       : 0 4px 6px rgba(0, 0, 0, 0.1);
    animation        : fadeIn 0.5s ease-out;
}

.modal-header {
    display                 : flex;
    justify-content         : space-between;
    align-items             : center;
    background-color        : #C6C6C6;
    padding                 : 10px;
    border-top-right-radius : 8px;
    border-top-left-radius  : 8px;
    color                   : white;
}

.modal-footer {
    display                    : flex;
    justify-content            : space-between;
    align-items                : baseline;
    background-color           : #EDEDED;
    padding                    : 10px;
    border-bottom-right-radius : 8px;
    border-bottom-left-radius  : 8px;
    color                      : white;
}

.modal .modal-header h5 {
    font-size : 16px;
}

.modal-footer span.text-link {
    color           : #6DB5FF;
    cursor          : pointer;
    font-size       : 13px;
    font-weight     : 500;
    text-decoration : underline;
}

/* Responsive Modal */
@media (max-width : 768px) {
    .modal-wrapper {
        max-height : 100vh;
        overflow   : auto;
    }

    .modal-header, .modal-footer {
        border-radius : 0;
    }

    .modal-header h5 {
        font-size : 1.2em;
    }
}


/*
  *********** Modal styles2 ***********
 */

.js-overlay {
    position         : fixed;
    left             : 0;
    right            : 0;
    top              : 0;
    bottom           : 0;
    background-color : rgba(0, 0, 0, .6);
    z-index          : 1400;
}

.js-overlay .loading img {
    position    : absolute;
    left        : 50%;
    top         : 50%;
    width       : 100px;
    height      : 100px;
    margin-top  : -50px;
    margin-left : -50px;
}

.modalbox {
    background-color : rgba(0, 0, 0, .6);
    display          : none;
    position         : fixed;
    left             : 0;
    right            : 0;
    top              : 0;
    bottom           : 0;
    z-index          : 1401;
    text-align       : left;
    width            : 100%;
    height           : 100%;
    overflow         : auto;
}

.modalbox.modalbox-progress {
    z-index : 9997;
}

/*Ios click event fire bug fix*/
.modalbox-close {
    cursor : pointer !important;
}

/*Apex Modal For Member Modals*/
.modal-apex {
    background-color : #F3F3F3;
}


.modal-apex .form-control {
    background-color : #F3F3F3;
}

.modal-apex .form-control:focus {
    background-color : #FFFFFF;
}


.modal-apex-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 5px;
    color           : white;
}

.modal-apex-title {
    color        : #FFFFFF;
    font-size    : 18px;
    font-weight  : 600;
    padding-left : 10px;
}

.modal-apex-close {
    cursor             : pointer;
    font-size          : 24px;
    background-color   : #D1D1D1;
    border             : 0;
    -webkit-appearance : none;
    padding            : 0;
    line-height        : 30px;
    border-radius      : 50%;
    width              : 30px;
    height             : 30px;
    text-align         : center;
    margin             : 0 5px 0 0;
    color              : #FFFFFF;
}

.modal-apex-content {
    padding : 20px 10px;
}

.modal-apex-footer {
    border-top : 2px solid #EEEEEE;
}

.modal-apex-footer span.text-link {
    color           : #6DB5FF;
    cursor          : pointer;
    font-size       : 14px;
    font-weight     : 600;
    text-decoration : underline;
    padding         : 5px;
}

.modal-apex-btn-group {
    display     : flex;
    line-height : 30px;
}

.modal-apex-btn-submit {
    border           : 2px solid #FFFFFF;
    background-color : #005AEE;
    color            : #FFFFFF;
    font-weight      : 500;
    font-size        : 14px;
    padding-top      : 0.6rem;
    padding-bottom   : 0.6rem;
}

.modal-apex-btn-submit, .modal-apex-btn-submit:focus {
    box-shadow : 0 0 5px 0.2rem rgba(0, 123, 255, .3);
}

.modal-apex-btn-group .btn {
    flex-grow        : 1;
    border-radius    : 0;
    background-color : #FFFFFF;
    padding-top      : 1rem;
    padding-bottom   : 1rem;
    color            : #313F64;
    font-weight      : 600;
    font-size        : 14px;
}

.modal-apex-btn-group .btn + .btn {
    border-left : 2px solid #EEEEEE;
}

.modal-apex-btn-group .btn:focus {
    box-shadow : none;
}

.modal-apex-content a.facebook {
    background-color : #375A94;
    color            : #FFFFFF;
    display          : inline-block;
    text-align       : center;
    border-radius    : 10px;
    padding          : 10px;
}

.centered {
    width             : 500px;
    left              : 50%;
    top               : 50%;
    -ms-transform     : translate(-50%, -50.1%);
    -webkit-transform : translate(-50%, -50.1%);
    transform         : translate(-50%, -50.1%);
    position          : absolute;
}

@media (min-width : 768px) {
    .modal-apex {
        border        : 6px solid #E5E5E5;
        border-radius : 5px;

    }

    .modal-apex-title {
        color : #303E61;
    }

    .modal-apex-header {
        border-bottom           : 6px solid #EEEEEE;
        border-top-right-radius : 8px;
        border-top-left-radius  : 8px;
    }

}

@media (max-width : 768px) {
    .modal-apex-header {
        background-color : #386BD4;
    }

    .modal-apex-close {
        color            : #002FB9;
        background-color : #FFFFFF;
    }

    .modal-apex-btn-group {
        background-color : #386BD4;
    }

    .modal-apex-footer span.text-link {
        color : #FFFFFF;
    }

    .centered {
        max-width  : 100%;
        max-height : 100%;
    }
}

/*
  *********** Not found styles ***********
 */

.not-found {
    padding    : 20px;
    text-align : center;
}

.not-found img {
    min-width     : 250px;
    min-height    : 250px;
    margin-bottom : 30px;
}

.not-found p {
    font-size     : 18px;
    color         : #555555;
    margin-bottom : 30px;
}

.not-found a {
    padding          : 15px 30px;
    background-color : #455F82;
    color            : #FFFFFF;
    border           : none;
    border-radius    : 5px;
    text-decoration  : none;
    font-size        : 18px;
    transition       : background-color 0.3s ease;
}

/*
  *********** On/Off Button styles ***********
 */

.list-inline {
    padding-left    : 0;
    list-style      : none;
    display         : flex;
    gap             : 8px;
    justify-content : center;
}

/* Track */
.slider {
    position         : absolute;
    top              : 0;
    left             : 0;
    right            : 0;
    bottom           : 0;
    background-color : #FFCCD1; /* Red for inactive */
    border-radius    : 30px;
    cursor           : pointer;
    transition       : background-color 0.4s;
}

/* Circle */
.slider:before {
    position         : absolute;
    content          : "";
    height           : 15px;
    width            : 15px;
    left             : 3px;
    bottom           : 5px;
    background-color : white;
    border-radius    : 50%;
    transition       : transform 0.4s;
}

/* Status text */
.status-label {
    font-weight : 700;
    font-size   : 10px;
}

.status-active {
    color     : #28A745;
    min-width : 54px;
}

.status-inactive {
    color     : #DC3545;
    min-width : 54px;
}

.table-wrapper {
    position         : relative;
    overflow-x       : auto;
    border-radius    : 8px;
    background-color : #EFEFEF;
    padding          : 4px;
}

.table-wrapper td:first-child, .table-wrapper th:first-child {
    padding : 10px;
}

.table-wrapper td:last-child, .table-wrapper th:last-child {
    padding : 10px;
}

/* Custom scrollbar styling */
.table-wrapper::-webkit-scrollbar {
    height : 8px;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background-color : #CCCCCC;
    border-radius    : 4px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background-color : #888888;
}

/* Toggle active state */
.toggle-button input:checked + .slider {
    background-color : #28A745; /* Green for active */
}

.toggle-button input:checked + .slider:before {
    transform : translateX(30px);
}

.toggle-container {
    display         : flex;
    align-items     : center;
    justify-content : center;
}

/*
  *********** Profile Image styles ***********
 */

.profile-image, .profile-image-deactive {
    border-radius  : 100px;
    vertical-align : middle;
    width          : 36px;
    height         : 36px;
}

.profile-image-deactive {
    -webkit-filter : blur(5px);
    filter         : blur(2px);
}

span .profile-image {
    margin-right : 5px;
    cursor       : default;
}

/*
  *********** Preview styles ***********
 */

.preview {
    background-color : #DDDDDD;
    border           : 1px solid #CCCCCC;
    margin-left      : 10px;
    height           : 300px;
}


/*
  *********** Sweat Alert styles ***********
 */

#customAlertOverlay {
    display          : none;
    position         : fixed;
    top              : 0;
    left             : 0;
    width            : 100%;
    height           : 100%;
    background-color : rgba(0, 0, 0, 0.5);
    z-index          : 1000;
}

#customAlertBox {
    display          : none;
    position         : fixed;
    top              : 50%;
    left             : 50%;
    transform        : translate(-50%, -50%);
    background-color : #FFFFFF;
    padding          : 20px;
    width            : 300px;
    box-shadow       : 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius    : 10px;
    text-align       : center;
    z-index          : 1001;
}

#customAlertBox h2 {
    margin    : 0 0 10px;
    font-size : 20px;
}

#customAlertBox p {
    margin    : 0 0 20px;
    font-size : 16px;
    color     : #333333;
}

/*
  *********** Spinner styles ***********
 */

/* Spinner and Loading State Styles */
.btn-loading {
    position       : relative;
    pointer-events : none;
    opacity        : 0.7;
}

#delete-spinner {
    display     : none;
    margin-left : 10px;
}

.spinner-border {
    width              : 20px;
    height             : 20px;
    border             : 2px solid currentColor;
    border-right-color : transparent;
    border-radius      : 50%;
    animation          : spinner-border 0.75s linear infinite;
}

.sr-only {
    position    : absolute;
    width       : 1px;
    height      : 1px;
    padding     : 0;
    margin      : -1px;
    overflow    : hidden;
    clip        : rect(0, 0, 0, 0);
    white-space : nowrap;
    border      : 0;
}

@keyframes spinner-border {
    to { transform : rotate(360deg); }
}