:root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-gray: #808080;

    --color-primary: #00529b;
    --color-secondary: #f1f1f4;
    --color-success: #17c653;
    --color-info: #7239ea;
    --color-warning: #ffa723;
    --color-danger: #ff4800;
    --color-light: #f9f9f9;
    --color-dark: #1e2129;
    --color-cyan: #43ced7;

    --color-primary-light: #1d800720;
    --color-secondary-light: #f9f9f9;
    --color-success-light: #22c58e15;
    --color-info-light: #f8f5ff;
    --color-warning-light: #fff8dd;
    --color-danger-light: #fff5f8;
    --color-dark-light: #f9f9f9;
    --color-cyan-light: #43cdd710;
    --color-btn: #00529b;

    --color-muted: #A1A5B7;
    --gray-100: #F9F9F9;
    --gray-200: #F4F4F4;
    --gray-300: #E1E3EA;
    --gray-400: #B5B5C3;
    --gray-500: #A1A5B7;
    --gray-600: #7E8299;
    --gray-700: #5E6278;
    --gray-800: #3F4254;
    --gray-900: #181C32;
}

.text-black {
    color: var(--color-black);
}

.text-white {
    color: var(--color-white);
}

.text-gray {
    color: var(--color-gray);
}

.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-secondary);
}

.text-info {
    color: var(--color-info);
}

.text-warning {
    color: var(--color-warning);
}

.text-danger {
    color: var(--color-danger);
}

.text-success {
    color: var(--color-success);
}

.text-light {
    color: var(--color-light);
}

.text-dark {
    color: var(--color-dark);
}

.text-cyan {
    color: var(--color-cyan);
}

.text-muted {
    color: var(--color-muted);
}

.bg-black {
    background-color: var(--color-black);
}

.bg-white {
    background-color: var(--color-white);
}

.bg-gray {
    background-color: var(--color-gray);
}

.bg-primary {
    background-color: var(--color-primary);
}

.bg-secondary {
    background-color: var(--color-secondary);
}

.bg-info {
    background-color: var(--color-info);
}

.bg-warning {
    background-color: var(--color-warning);
}

.bg-danger {
    background-color: var(--color-danger);
}

.bg-success {
    background-color: var(--color-success);
}

.bg-light {
    background-color: var(--color-light);
}

.bg-dark {
    background-color: var(--color-dark);
}

.bg-cyan {
    background-color: var(--color-cyan);
}

.bg-primary-light {
    background-color: var(--color-primary-light);
}

.bg-secondary-light {
    background-color: var(--color-secondary-light);
}

.bg-info-light {
    background-color: var(--color-info-light);
}

.bg-warning-light {
    background-color: var(--color-warning-light);
}

.bg-danger-light {
    background-color: var(--color-danger-light);
}

.bg-success-light {
    background-color: var(--color-success-light);
}

.bg-cyan-light {
    background-color: var(--color-cyan-light);
}

.bg-gray-100 {
    background-color: var(--gray-100);
}

.bg-gray-200 {
    background-color: var(--gray-200);
}

.bg-gray-300 {
    background-color: var(--gray-300);
}

.bg-gray-400 {
    background-color: var(--gray-400);
}

.bg-gray-500 {
    background-color: var(--gray-500);
}

.bg-gray-600 {
    background-color: var(--gray-600);
}

.bg-gray-700 {
    background-color: var(--gray-700);
}

.bg-gray-800 {
    background-color: var(--gray-800);
}

.bg-gray-900 {
    background-color: var(--gray-900);
}

.text-gray-100 {
    color: var(--gray-100);
}

.text-gray-200 {
    color: var(--gray-200);
}

.text-gray-300 {
    color: var(--gray-300);
}

.text-gray-400 {
    color: var(--gray-400);
}

.text-gray-500 {
    color: var(--gray-500);
}

.text-gray-600 {
    color: var(--gray-600);
}

.text-gray-700 {
    color: var(--gray-700);
}

.text-gray-800 {
    color: var(--gray-800);
}

.text-gray-900 {
    color: var(--gray-900);
}


/* buttons and badges */
.bg_gradient {
    background: linear-gradient(to right, #0f7404, #5cb917);
}

.btnX {
    position: relative;
    color: #fff;
    background-color: #00529b;
    z-index: 1;
    overflow: hidden;
    border: 1px solid #fff;
    outline: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 14px;
    white-space: nowrap;
    transition: .5s;
    font-family: "Anek Bangla", sans-serif;
}

.btnX::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-radius: 8px;
    z-index: -1;
    bottom: auto;
    background: white;
    transition: 0.5s;
}

.btnX:hover,
.btnX:focus {
    color: #00529b;
    border-color: #00529b;
    background: #fff;
}

.btnX:focus::after,
.btnX:hover::after {
    width: 100%;
}


.btnY {
    position: relative;
    color: #fff;
    background-color: #ffa723;
    z-index: 1;
    overflow: hidden;
    border: 1px solid #fff;
    outline: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 14px;
    white-space: nowrap;
    transition: .5s;
    font-family: "Anek Bangla", sans-serif;
}

.btnY::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-radius: 8px;
    z-index: -1;
    bottom: auto;
    background: white;
    transition: 0.5s;
}

.btnY:hover,
.btnY:focus {
    color: #f19914;
    border-color: #ffa723;
    background: #fff;
}

.btnY:focus::after,
.btnY:hover::after {
    width: 100%;
}





input,
select,
textarea {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #00529b;
    outline: none;
    resize: vertical;
    transition: border .2s ease-in-out;
}

select {
    padding: 7px 8px;
}

textarea {
    min-height: 120px;
}

input:focus,
select:focus,
textarea:focus {
    border: 1px solid #0f7404;
}


.input-group {
    display: flex;
    border-radius: 4px;
    border: 1px solid #0f740490;
    width: 100%;
    overflow: hidden;
}

.input-group:focus-within {
    border: 1px solid #0f7404;
}

.input-group>span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-group>span:first-child {
    border-right: 1px solid #0f740490;
    border-radius: 3px 0px 0px 3px;
}

.input-group>span:last-child {
    border-left: 1px solid #0f740490;
    border-radius: 0px 3px 3px 0px;
}

.input-group input,
.input-group input:focus {
    border: none;
}


.badge {
    padding: 3px 6px;
    font-size: 12px;
    border-radius: 3px;
    cursor: default;
    color: var(--color-white);
    background-color: var(--color-primary);
    transition: background-color 0.3s ease;
}

.badge2 {
    padding: 0px 8px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 3px;
    cursor: default;
    color: var(--color-white);
    background-color: var(--color-primary);
    transition: background-color 0.3s ease;
    margin-top: -5px;
}

.primary-light {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
}

.danger-light {
    background-color: var(--color-danger-light);
    color: var(--color-danger);
}

.success-light {
    background-color: var(--color-success-light);
    color: var(--color-success);
}

.info-light {
    background-color: var(--color-info-light);
    color: var(--color-info);
}

.warning-light {
    background-color: var(--color-warning-light);
    color: var(--color-warning);
}

.dark-light {
    background-color: var(--color-dark-light);
    color: var(--color-dark);
}

/* .btn { padding: 10px 15px; font-weight: 500; border-radius: 4px; text-align: center; vertical-align: middle; border: none; cursor: pointer; color: var(--color-white); background-color: var(--color-primary); transition: background-color 0.3s ease; }
.btn-sm { padding: 5px 10px 6px; font-size: 13px; font-weight: 500; border-radius: 4px; text-align: center; vertical-align: middle; border: none; cursor: pointer; color: var(--color-white); background-color: var(--color-primary); transition: background-color 0.3s ease; }
.badge { padding: 3px 6px; font-size: 12px; border-radius: 3px; cursor: default; color: var(--color-white); background-color: var(--color-primary); transition: background-color 0.3s ease; }
.btn.icon, .btn-sm.icon { display: inline-flex; align-items: center; gap: 8px; }

.secondary { background-color: var(--color-secondary); color: var(--color-black); }
.success { background-color: var(--color-success); color: var(--color-white); }
.info { background-color: var(--color-info); color: var(--color-white); }
.warning { background-color: var(--color-warning); color: var(--color-white); }
.danger { background-color: var(--color-danger); color: var(--color-white); }
.light { background-color: var(--color-light); color: var(--color-black); }
.dark { background-color: var(--color-dark); color: var(--color-white); }
.cyan { background-color: var(--color-cyan); color: var(--color-white); }

.primary-light { background-color: var(--color-primary-light); color: var(--color-primary); }
.secondary-light { background-color: var(--color-secondary-light); color: var(--color-dark); }
.success-light { background-color: var(--color-success-light); color: var(--color-success); }
.info-light { background-color: var(--color-info-light); color: var(--color-info); }
.warning-light { background-color: var(--color-warning-light); color: var(--color-warning); }
.danger-light { background-color: var(--color-danger-light); color: var(--color-danger); }
.dark-light { background-color: var(--color-dark-light); color: var(--color-dark); }
.cyan-light { background-color: var(--color-cyan-light); color: var(--color-cyan); }

.primary-outline { color: var(--color-primary); border: 1px solid var(--color-primary); background-color: var(--color-white); }
.secondary-outline { color: var(--color-gray); border: 1px solid var(--color-gray); background-color: var(--color-white); }
.success-outline { color: var(--color-success); border: 1px solid var(--color-success); background-color: var(--color-white); }
.info-outline { color: var(--color-info); border: 1px solid var(--color-info); background-color: var(--color-white); }
.warning-outline { color: var(--color-warning); border: 1px solid var(--color-warning); background-color: var(--color-white); }
.danger-outline { color: var(--color-danger); border: 1px solid var(--color-danger); background-color: var(--color-white); }
.dark-outline { color: var(--color-dark); border: 1px solid var(--color-dark); background-color: var(--color-white); }
.cyan-outline { color: var(--color-cyan); border: 1px solid var(--color-cyan); background-color: var(--color-white); }

.btn:hover, .btn-sm:hover, .primary-hover:hover { background-color: #056ee9; }
.btn.secondary:hover, .btn-sm.secondary:hover, .secondary-hover:hover { background-color: #c4cada;}
.btn.success:hover, .btn-sm.success:hover, .success-hover:hover { background-color: #04b440;}
.btn.info:hover, .btn-sm.info:hover, .info-hover:hover { background-color: #5014D0;}
.btn.warning:hover, .btn-sm.warning:hover, .warning-hover:hover { background-color: #dead00;}
.btn.danger:hover, .btn-sm.danger:hover, .danger-hover:hover { background-color: #d81a48;}
.btn.dark:hover, .btn-sm.dark:hover, .dark-hover:hover { background-color: #000000;}
.btn.light:hover, .btn-sm.light:hover, .light-hover:hover { background-color: #ebebeb;}
.btn.cyan:hover, .btn-sm.cyan:hover, .cyan-hover:hover { background-color: #37bac4;}

.btn.primary-light:hover, .btn-sm.primary-light:hover, .primary-light-hover:hover { background-color: var(--color-primary); color: var(--color-white);}
.btn.secondary-light:hover, .btn-sm.secondary-light:hover, .secondary-light-hover:hover { background-color: var(--color-secondary); color: var(--color-black);}
.btn.success-light:hover, .btn-sm.success-light:hover, .success-light-hover:hover { background-color: var(--color-success); color: var(--color-white);}
.btn.info-light:hover, .btn-sm.info-light:hover, .info-light-hover:hover { background-color: var(--color-info); color: var(--color-white);}
.btn.warning-light:hover, .btn-sm.warning-light:hover, .warning-light-hover:hover { background-color: var(--color-warning); color: var(--color-white);}
.btn.danger-light:hover, .btn-sm.danger-light:hover, .danger-light-hover:hover { background-color: var(--color-danger); color: var(--color-white);}
.btn.dark-light:hover, .btn-sm.dark-light:hover, .dark-light-hover:hover { background-color: var(--color-dark); color: var(--color-white);}
.btn.light-light:hover, .btn-sm.light-light:hover, .light-light-hover:hover { background-color: var(--color-light); color: var(--color-white);}
.btn.cyan-light:hover, .btn-sm.cyan-light:hover, .cyan-light-hover:hover { background-color: var(--color-cyan); color: var(--color-white);}

.btn.primary-outline:hover, .btn-sm.primary-outline:hover, .primary-outline-hover:hover { color: var(--color-white); border: 1px solid var(--color-primary); background-color: var(--color-primary); }
.btn.secondary-outline:hover, .btn-sm.secondary-outline:hover, .secondary-outline-hover:hover { color: var(--color-gray); border: 1px solid var(--color-secondary); background-color: var(--color-secondary); }
.btn.success-outline:hover, .btn-sm.success-outline:hover, .success-outline-hover:hover { color: var(--color-white); border: 1px solid var(--color-success); background-color: var(--color-success); }
.btn.info-outline:hover, .btn-sm.info-outline:hover, .info-outline-hover:hover { color: var(--color-white); border: 1px solid var(--color-info); background-color: var(--color-info); }
.btn.warning-outline:hover, .btn-sm.warning-outline:hover, .warning-outline-hover:hover { color: var(--color-white); border: 1px solid var(--color-warning); background-color: var(--color-warning); }
.btn.danger-outline:hover, .btn-sm.danger-outline:hover, .danger-outline-hover:hover { color: var(--color-white); border: 1px solid var(--color-danger); background-color: var(--color-danger); }
.btn.dark-outline:hover, .btn-sm.dark-outline:hover, .dark-outline-hover:hover { color: var(--color-white); border: 1px solid var(--color-dark); background-color: var(--color-dark); }
.btn.cyan-outline:hover, .btn-sm.cyan-outline:hover, .cyan-outline-hover:hover { color: var(--color-white); border: 1px solid var(--color-cyan); background-color: var(--color-cyan); } */


/* spinner */
/* .spinner { width: 32px; height: 32px; border-radius: 50%; border: 4px solid var(--color-primary); border-top-color: #f3f3f3; animation: spin 2s linear infinite; }
.spinner-secondary { border: 4px solid var(--color-secondary); border-top-color: #f3f3f3; }
.spinner-success { border: 4px solid var(--color-success); border-top-color: #f3f3f3; }
.spinner-warning { border: 4px solid var(--color-warning); border-top-color: #f3f3f3; }
.spinner-danger { border: 4px solid var(--color-danger); border-top-color: #f3f3f3; }
.spinner-info { border: 4px solid var(--color-info); border-top-color: #f3f3f3; }
.spinner-cyan { border: 4px solid var(--color-cyan); border-top-color: #f3f3f3; }
.spinner-light { border: 4px solid var(--color-light); border-top-color: #f3f3f3; }
.spinner-dark { border: 4px solid var(--color-dark); border-top-color: #f3f3f3; }
@keyframes spin { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } */


/* tab button */
/* .tab-btn { display: flex; }
.tab-btn .btn { padding: 10px 15px; color: var(--color-gray); background-color: var(--color-secondary); cursor: pointer; font-weight: 500; border: none; border-radius: 0px; }
.tab-btn .btn.active { background-color: var(--color-primary); color: var(--color-white); } */


/* switch */
/* .switch { position: relative; width: 38px; height: 20px; background: transparent; }
.switch input { display: none; }
.switch label { position: absolute; cursor: pointer; background-color: #ccc; border-radius: 20px; width: 100%; height: 100%; transition: background-color 0.3s ease; margin: 0; }
.switch label::before { content: ""; position: absolute; width: 18px; height: 18px; background-color: var(--color-white); border-radius: 50%; top: 1px; left: 1px; transition: transform 0.3s ease; }
.switch input:checked~label { background-color: #1b84ff70; }
.switch.info input:checked~label { background-color: #7239ea70; }
.switch.success input:checked~label { background-color: #17c65370; }
.switch.warning input:checked~label { background-color: #ffa72365; }
.switch.danger input:checked~label { background-color: #f8285a65; }
.switch.cyan input:checked~label { background-color: #43ced765; }
.switch input:checked~label::before { transform: translateX(17px); background-color: var(--color-primary); }
.switch.info input:checked~label::before { background-color: var(--color-info); }
.switch.success input:checked~label::before { background-color: var(--color-success); }
.switch.warning input:checked~label::before { background-color: var(--color-warning); }
.switch.danger input:checked~label::before { background-color: var(--color-danger); }
.switch.cyan input:checked~label::before { background-color: var(--color-cyan); } */



/* input field */
/* label { font-size: 14px; font-weight: 500; display: block; margin-bottom: 4px }
label.require::after { content: " *"; color: var(--color-danger); }

input, select, textarea { display: block; width: 100%; padding: 8px 12px; font-size: 14px; background: #fff; border-radius: 4px; color: var(--color-dark); border: 1px solid #ced4da; outline: none; resize: vertical; transition: border .2s ease-in-out; }
select { padding: 7px 8px; }
textarea { min-height: 120px; }
input[type="checkbox"], input[type="radio"] { max-width: fit-content; }
input[type="checkbox"]~label, input[type="radio"]~label { font-weight: 400; margin: 0; }
input[type="file"] { padding: 0; }
input[type=file]::file-selector-button { color: #666; border: none; border-right: 1px solid #ced4da; padding: 8.5px 12px; }
input:focus, select:focus, textarea:focus { border: 1px solid #aaacb1; } */

/* input with icon */
/* .input-icon { width: 100%; position: relative; }
.input-icon svg, .input-icon i { position: absolute; left: 12px; top: 10px; width: 12px; height: 12px; color: #999; fill: #999; }
.input-icon input { padding: 8px 12px 8px 36px; } */

/* input group */
/* .input-group { display: flex; border-radius: 4px; border: 1px solid #ced4da; width: 100%; }
.input-group:focus-within { border: 1px solid #aaacb1; }
.input-group>span { color: #666; padding: 5px 12px; background-color: #f0f0f0; }
.input-group>span:first-child { border-right: 1px solid #ced4da; border-radius: 3px 0px 0px 3px; }
.input-group>span:last-child { border-left: 1px solid #ced4da; border-radius: 0px 3px 3px 0px; }
.input-group input, .input-group input:focus { border: none; } */

/* image preview input file */
/* .file input { display: none; }
.file { width: 150px; height: 150px; margin: 0; position: relative; border-radius: 4px; border: 1px solid #ced4da; background-size: contain; background-repeat: no-repeat; background-position: center; transition: border .2s ease-in-out; }
.file::after { content: "Choose a file"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; color: #999; text-align: center; font-size: 14px; font-weight: 400; }
.previewImage::after { content: ""; }
.file>.remove { display: none; position: absolute; top: 1px; right: 1px; font-size: 18px; color: #FF0000; cursor: pointer; background: #e5e5e5; border-radius: 50%; width: 20px; height: 20px; text-align: center; line-height: 18px; }
.previewImage .remove { display: block; } */


/* dropdown select option */
/* .select-menu { width: 100%; position: relative; }
.select-menu .select-btn { padding: 6px 12px; border-radius: 4px; font-size: 14px; background: #fff; color: var(--color-dark); border: 1px solid #ced4da; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.select-menu .select-btn span:last-child { transition: transform 0.3s ease; }
.select-menu.active .select-btn span:last-child { transform: rotate(-180deg); }
.select-menu .options { position: absolute; width: 100%; border-radius: 0 0 4px 4px; z-index: 10; background: #fff; overflow: hidden; max-height: 0; transition: max-height 0.2s ease; }
.select-menu.active .select-btn { border-radius: 4px 4px 0 0; border: 1px solid #aaacb1; }
.select-menu.active .options { max-height: 300px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #dfdfdf #f6f6f6; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); }
.select-menu .options .input-icon { position: sticky; top: 0; }
.select-menu .options .input-icon input { border-radius: 0; border-top: none; }
.select-menu .options .input-icon input:focus { border: 1px solid #ced4da; border-top: none; }
.select-menu .options li { padding: 4px 12px; cursor: pointer; }
.select-menu .options li:hover { background: #f5f5f5; }
.select-menu .options li.selected { background-color: #f0f0f0; } */


/* alerts */
/* .alert { max-width: 300px; padding: 12px 10px; border-radius: 4px; position: relative; overflow: hidden; color: var(--color-primary); background-color: #009ef720; border: 1px solid #009ef720; }
.alert.info { color: var(--color-info); background-color: #7239ea20; border: 1px solid #7239ea20; }
.alert.success { color: var(--color-success); background-color: #43ced720; border: 1px solid #43ced720 }
.alert.warning { color: var(--color-warning); background-color: #ffc70020; border: 1px solid #ffc70020; }
.alert.danger { color: var(--color-danger); background-color: #f1416c20; border: 1px solid #f1416c20; }
.alert.cyan { color: var(--color-cyan); background-color: #50cd8910; border: 1px solid #50cd8910;  } */


/* sepatator */
/* .separator { display: flex; align-items: center; text-align: center; margin: 10px 0; }
.separator::before, .separator::after { content: ""; flex: 1; border-bottom: 1px solid #ccc; }
.separator span { padding: 0 10px; color: #666; font-size: 14px; font-weight: 500; }
.separator.dashed::before, .separator.dashed::after { border-bottom: 1px dashed #ccc; }
.separator.dotted::before, .separator.dotted::after { border-bottom: 1px dotted #ccc; } */


/* rotate class */
/* .rotate-0 { transform: rotate(0deg); transition: transform 0.3s ease; }
.rotate-45 { transform: rotate(45deg); transition: transform 0.3s ease; }
.rotate-90 { transform: rotate(90deg); transition: transform 0.3s ease; }
.rotate-180 { transform: rotate(180deg); transition: transform 0.3s ease; }
.rotate-360 { transform: rotate(360deg); transition: transform 0.3s ease; } */


/* progress bar */
/* .progress-container { z-index: 1; background-color: white; width: 300px; border-radius: 8px; box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); position: fixed; bottom: 0; right: 0; }
.progress-container .head { padding: 5px 10px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.progress-container .head .btn-sm { border-radius: 50%; padding: 5px 8px; }
.progress-container .body { padding: 5px 10px; overflow-y: auto; transition: max-height 0.3s ease; max-height: 200px; }
.progress-container .body .progressbar{ padding: 2px 10px 5px; margin-bottom: 10px; border-radius: 5px; box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); }
.progress-container .body .progressbar p { margin-bottom: -14px; font-size: 14px; }
.progress-container .body .progressbar span { display: block; font-size: 12px; }
.progress-container .body progress { width: 100%; height: 5px; appearance: none; border-radius: 5px; }
.progress-container .body.collapsed { max-height: 0; }
.rotated { transform: rotate(180deg); transition: transform 0.3s ease; }
progress::-webkit-progress-bar { background-color: #e9ecef;}
progress.info::-webkit-progress-value { background-color: var(--color-info); color: var(--color-white);}
progress.warning::-webkit-progress-value { background-color: var(--color-warning); color: var(--color-white);}
progress.danger::-webkit-progress-value { background-color: var(--color-danger); color: var(--color-white);}
progress.success::-webkit-progress-value { background-color: var(--color-success); color: var(--color-white);}
progress.cyan::-webkit-progress-value { background-color: var(--color-cyan); color: var(--color-white);} */


/* image upload */
/* .image-wrapper { position: relative; width: 150px; height: 150px; border: 1px solid #c2c2c2; border-radius: 5px; display: flex; justify-content: center; align-items: center; background-color: #fff; }
.preview { width: 100%; height: 100%; padding: 2px; object-fit: contain; }
.editBtn { position: absolute; top: -4px; right: -4px; color: #929292; background-color: #fff; border: none; padding: 5px 6px; border-radius: 50%; cursor: pointer; box-shadow: 0px 1px 0px 1px #cccccc; }
.removeBtn:hover, .editBtn:hover { background: #f8f9f9; }
.removeBtn { position: absolute; bottom: -4px; right: -4px; background-color: #fff; border: none; color: #FF000099; font-size: 18px; border-radius: 50%; width: 25px; height: 25px; cursor: pointer; display: none; box-shadow: 0px 1px 0px 1px #cccccc; } */

/* image cropper style */
/* .cropper-view-box { border: 2px solid rgba(255, 255, 255, 0.8) !important; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important; }
.cropper-line, .cropper-point { background-color: #7239ea !important; border-radius: 50% !important; }
.cropper-point { width: 10px !important; height: 10px !important; border: 2px solid #7239ea !important; } */


/********************************************************************************************************************************************/
/********************************************************************************************************************************************/
/********************************************************************************************************************************************/

/* card */
/* .card { background: #fff; border-radius: 4px; box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); }
.card.border { border: 1px solid #e3e3e3; box-shadow: none; }
.card.divider>.head { border-bottom: 1px solid #e3e3e3; padding: 32px 32px 20px; }
.card.divider>.body, .card.divider>.tab-body { padding: 20px 32px 32px; }
.card>.head { display: flex; flex-wrap: wrap; gap: 12px; align-items: start; justify-content: space-between; padding: 32px 32px 0; }
.card>.head>.title p { color: #B5B5C3; font-size: 14px; font-weight: 600; }
.card>.head>.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.card>.head>.toolbar>* { line-height: 100%; font-size: 14px; }
.card>.head>.toolbar .tab-btn { padding: 10px 15px; font-weight: 500; border-radius: 5px; display: inline-block; text-align: center; vertical-align: middle; border: none; cursor: pointer; color: #4B5675; transition: background-color 0.3s ease; }
.card>.head>.toolbar .tab-btn.active { background-color: var(--color-primary); color: var(--color-white); }
.card>.body, .card>.tab-body { padding: 32px; }
.card>.body .card { padding: 24px; }
.card>.tab-body { display: none; }
.card>.tab-body.active { display: block; }

.tool-menu { position: relative; display: inline-block; }
.tool-menu>* { line-height: 100%; font-size: 14px;}
.tool-menu .menuBody { min-width: 300px; padding: 20px; border-radius: 5px; background-color: #fff; border: 1px solid #e7e7e7; position: absolute; right: 0; opacity: 0; max-height: 0; visibility: hidden; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); transition: max-height 0.3s ease, opacity 0.3s ease; }
.menuBtn.menuOpen~.menuBody { max-height: fit-content; opacity: 1; z-index: 1; visibility: visible; } */


/* table */
/* .table-container::-webkit-scrollbar-thumb { background: #d8d4d4; }
.table-container { overflow-x: auto; }
.table-container table, table { width: 100%; border-collapse: collapse; }
.table-container table thead { border-bottom: 1px solid #b5b5b5; }
.table-container table tbody tr { border-bottom: 1px dashed #ededed; }
.table-container table th, .table-container table td { padding: 10px 12px; font-size: 14px; text-align: left; }
.table-container table th:last-child, .table-container table td:last-child{ text-align: end; white-space: nowrap; }
.table-container .striped tbody tr, .table-container .striped-even tbody tr { border-bottom: none; }
.table-container .hover tbody tr:hover { background: #f2f2f2; }
.table-container .striped.hover tbody tr:hover { background-color: #f2f2f2; }
.table-container .striped-even.hover tbody tr:hover { background-color: #f2f2f2; }
.table-container table tbody img { max-width: 100px; border-radius: 5px; }
.table-container .striped tbody tr:nth-child(odd) { background-color: #f8f8f8;  }
.table-container .striped-even tbody tr:nth-child(even) { background-color: #f8f8f8;  }

.table-container table tbody .avatar { display: flex; align-items: center; gap: 5px;}
.table-container table tbody .avatar img { width: 40px; height: 40px; border-radius: 50%; }
.table-container table tbody .avatar div { line-height: 17px;}
.table-container table tbody .avatar p { max-width: 30ch; white-space: normal; }
.table-container table tbody .avatar span { font-size: 85%; color: var(--color-muted); } */


/* accordion */
/* .accordion>.item>.head { padding: 12px 20px; background-color: #f9f9f9; cursor: pointer; display: flex; justify-content: space-between; transition: background-color 0.3s ease; }
.accordion>.item>.head:hover { background: #e5e5e5; }
.accordion>.item>.head span { transition: transform 0.3s ease; }
.accordion>.item.active>.head span { transform: rotate(-180deg); }
.accordion>.item.active > .head { background-color: #e5e5e5; }
.accordion>.item>.body { padding: 0 20px; height: 0; overflow: hidden; background: #fff; border-top: 1px solid #f1f1f1; transition: padding 0.2s ease-out; }
.accordion>.item.active>.body { padding: 12px 20px; height: auto; overflow: visible; } */


/* modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    background: rgba(0, 0, 0, 0.6);
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.show {
    visibility: visible;
    opacity: 1;
}

.modal>.content {
    width: 100%;
    max-width: 600px;
    max-height: 500px;
    margin: 12px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(-25px);
    transition: transform 0.3s ease;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.modal.show .content {
    transform: translateY(0);
}

.modal>.content>.head {
    padding: 32px 32px 0px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.modal>.content>.body {
    padding: 0px 32px;
    margin: 32px 0px 0px;
    overflow-y: auto;
    scrollbar-width: thin;
    flex-grow: 1;
}

.modal>.content>.footer {
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 8px;
}

.modal>.content.divider>.head {
    border-bottom: 1px solid #e3e3e3;
    padding: 32px 32px 16px;
}

.modal>.content.divider>.body {
    margin: 16px 0px 0px;
}

.modal>.content>.head>span {
    padding: 0px 7px 3px 7px;
    border-radius: 4px;
    line-height: 1;
    font-size: 24px;
    background: #f9f9f9;
    cursor: pointer;
    height: fit-content;
}

.modal>.content>.head>span:hover {
    background: #f1f1f1;
}


/* drawer */
/* .drawer { position: fixed; top: 0; right: 0; width: 100%; z-index: 1100; display: flex; align-items: center; justify-content: end; visibility: hidden; opacity: 0; background: rgba(0, 0, 0, 0.6); transition: opacity 0.3s ease, visibility 0.3s ease; }
.drawer.show { visibility: visible; opacity: 1; }
.drawer>.content { width: 100%; max-width: 600px; height: 100vh; background: #fff; display: flex; flex-direction: column; overflow: hidden; transform: translateX(100%); transition: transform 0.3s ease; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); }
.drawer.show .content { transform: translateX(0); }
.drawer>.content>.head { padding: 16px 30px 0px; display: flex; justify-content: space-between; gap: 8px; }
.drawer>.content>.body { padding: 0px 30px; margin: 24px 0px 0px; overflow-y: auto; scrollbar-width: thin; flex-grow: 1; }
.drawer>.content>.footer { padding: 24px 30px; display: flex; align-items: center; justify-content: end; gap: 8px; }
.drawer>.content.divider>.head { border-bottom: 1px solid #e3e3e3; padding: 16px 30px 16px; }
.drawer>.content.divider>.body { margin: 16px 0px 0px; }
.drawer>.content>.head>span { padding: 0px 7px 3px 7px; border-radius: 4px; line-height: 1; font-size: 24px; background: #f9f9f9; cursor: pointer; height: fit-content; }
.drawer>.content>.head>span:hover { background: #f1f1f1; } */


/* pagination */
/* .ulpagination { display: flex; align-items: center; gap: 2px; }
.ulpagination li { background: #f9f9f9; border-radius: 4px; }
.ulpagination i { color: #009ef7; display: inline-block; padding: 11px 12px; }
.ulpagination li.disabled { pointer-events: none; }
.ulpagination .disabled i { color: #999; }
.ulpagination li>select { margin: 0; padding: 6px 12px; color: #4B5675; } */


/* modal generate */
/* .modalwrpbg { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 200; padding-top: 30px; }
.modalwrpr { position: absolute; left: 0; right: 0; top: 50%; transform: translate(0, -50%); max-height: 100%; overflow: auto; }
.modalmain>div{ margin-left: auto !important; margin-right: auto !important; } */

/* AJAX RES */
.ajaxres-container {
    position: fixed;
    max-width: 350px;
    z-index: 201;
    right: 0;
}

.ajaxres-container>div {
    position: relative;
}

#ajaxresults {
    position: absolute;
    top: 10px;
    right: 30px;
    width: 350px;
    max-width: calc(100%-30px);
}

#ajaxresults>div {
    padding: 10px 30px 10px 15px;
    margin-bottom: 10px;
    width: 100%;
    position: relative;
    border: 1px solid;
    border-radius: 3px;
}

@media only screen and (max-width: 400px) {
    .ajaxres-container {
        max-width: 200px;
    }

    #ajaxresults {
        width: 200px;
    }
}

#ajaxresults>div>i.fa-xmark {
    position: absolute;
    right: 10px;
    top: calc(50% - 7px);
    cursor: pointer;
    color: inherit !important;
}

#ajaxresults .success {
    color: #058840;
    background-color: #d5f1e3;
    border-color: #c1ead3;
}

#ajaxresults .danger {
    color: #a91b3e;
    border-color: #ffc5d4;
    background-color: #f6d1dc;
}

#ajaxresults .warning {
    color: #a07700;
    border-color: #f6e7b1;
    background-color: #ffeeb1;
}

#ajaxresults .info {
    color: #484848;
    border-color: #dddddd;
    background-color: #e4e4e4;
}

/*maxlength*/
.mxlgncntrp {
    text-align: right;
    font-size: 9px;
    line-height: 12px;
    position: relative;
    overflow: visible;
}

.mxlgncntrp>span {
    display: block;
    background: rgba(0, 0, 0, 0.05);
    color: #666;
    padding: 0 5px;
    position: absolute;
    right: 0;
    top: -12px;
    border-radius: 3px 0 5px 0;
    border: none;
}

/*errnotediv*/
.errnotediv {
    overflow: auto;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-danger);
}


.bg-with-content {
    position: relative;
    overflow: hidden;
}

.bg-with-content .bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bg-with-content .content {
    position: relative;
}