/* @import url('https://fonts.googleapis.com/css2?family=Itim&display=swap'); */

:root {
    --primary: #ff7200;
    --light-primary: #fcede0;
    --secondary: #ffa75e;
    --white: white;
    --dark: black;
    --danger: rgb(255, 71, 71);
    --red: red;
    --light-danger: rgb(255, 222, 222);
    --placeholder: #aaa;
    --required: rgb(255, 248, 248);
    --bg-blur: rgba(0, 0, 0, 0.5);
    --empty001: #bbb;
    --empty002: #ccc;
    --blue: blue;
    --light-blue: rgb(217, 217, 252);

    --blue-hover: rgb(215, 215, 255);
    --info-hover: rgb(202, 238, 251);
    --secondary-hover: #ccc;
    --success-hover: rgb(214, 255, 214);
    --danger-hover: rgb(255, 218, 218);

    --smoot-100: 100ms ease;
    --smoot-200: 200ms ease;
    --smoot-300: 300ms ease;
    --shadow-primary: 0 4px 6px var(--light-primary);
    --border-radius: 4px;

    --content-admin: #f8f9ff;
}

.gutter-x-0 {
    --bs-gutter-x: 0 !important;
}

.text-ellipsis {
    text-overflow: ellipsis;
}


/* ? ******************* Start Tooltips ******************* */
.parent-tooltips:hover .child-tooltips {
    bottom: calc(100% + 10px);
    visibility: visible;
    opacity: 1;
    display: block;
}

.child-tooltips {
    position: absolute;
    bottom: 100%;
    right: 0;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;

    transition: var(--smoot-300);
    z-index: 20;
}

.child-tooltips:hover {
    display: none !important;
}
/* ? ******************* End Tooltips ******************* */


/* * ******************* Start Background ******************* */
/* * ******************* Start Background ******************* */
/* * ******************* Start Background ******************* */
.bg-l-info {
    background-color: var(--info-hover);
}

.bg-l-blue {
    background-color: var(--blue-hover);
}

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

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

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

.bg-l-danger {
    background-color: var(--danger-hover) !important;
}

.bg-l-secondary {
    background-color: var(--secondary-hover) !important;
}
/* * ******************* End Background ******************* */
/* * ******************* End Background ******************* */
/* * ******************* End Background ******************* */


/* ? ******************* Start Background ******************* */
.text-blue {
    color: var(--blue);
}
.text-red {
    color: var(--red);
}
.text-empty {
    color: var(--empty001);
}
/* ? ******************* End Background ******************* */

/* start bootstrap modify */
/* start bootstrap modify */
/* start bootstrap modify */

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



/* end bootstrap modify */
/* end bootstrap modify */
/* end bootstrap modify */


body {
    min-height: 100.1vh;
}



.content {
    padding: 1rem 0;
}

* {
    box-sizing: border-box;
    /* font-family: "Itim", cursive; */
}

a {
    text-decoration: none;
    color: var(--dark);
}

ul {
    padding: 0;
}

li {
    list-style: none;
}

table {
    width: 100%;
    table-layout: auto;
}

table th {
    white-space: nowrap;
}

table * {
    vertical-align: middle;
}

.word-wrap {
    word-wrap: break-word;
}

.w-default {
    /* width: 98%; */
    width: 70%;
    margin-inline: auto;
}

.px-default {
    padding-inline: 5rem;
}

.space-nowrap {
    white-space: nowrap;
}

.span-delete {
    visibility: hidden;
}

.pointer {
    cursor: pointer;
}

.events-none {
    pointer-events: none !important;
}

.no-drop {
    cursor: no-drop !important;
}

.w-fit {
    width: fit-content;
}

/* * ******************* Start Text Size ******************* */
/* * ******************* Start Text Size ******************* */
/* * ******************* Start Text Size ******************* */
.text-bs-primary {
    color: var(--bs-primary) !important;
}
/* * ******************* End Text Size ******************* */
/* * ******************* End Text Size ******************* */
/* * ******************* End Text Size ******************* */



/* ? ******************* Start Text Size ******************* */
/* ? ******************* Start Text Size ******************* */
/* ? ******************* Start Text Size ******************* */
.ts-8 {
    font-size: 10px !important;
}
.ts-9 {
    font-size: 10px !important;
}
.ts-10 {
    font-size: 10px !important;
}
.ts-11 {
    font-size: 11px !important;
}
.ts-12 {
    font-size: 12px !important;
}
.ts-13 {
    font-size: 13px !important;
}
.ts-14 {
    font-size: 14px !important;
}
.ts-15 {
    font-size: 15px !important;
}
.ts-16 {
    font-size: 16px !important;
}
.ts-17 {
    font-size: 17px !important;
}
.ts-18 {
    font-size: 18px !important;
}
.ts-19 {
    font-size: 19px !important;
}
.ts-20 {
    font-size: 20px !important;
}
.ts-21 {
    font-size: 21px !important;
}
.ts-22 {
    font-size: 22px !important;
}
.ts-23 {
    font-size: 23px !important;
}
.ts-24 {
    font-size: 24px !important;
}
/* ? ******************* End Text Size ******************* */
/* ? ******************* End Text Size ******************* */
/* ? ******************* End Text Size ******************* */


/* ? ******************* Start button ******************* */
/* ? ******************* Start button ******************* */
/* ? ******************* Start button ******************* */
button {
    outline: none;
    line-height: 1.5 !important;
}

.button-primary {
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--primary);
    color: var(--white);
    transition: var(--smoot-300);
    border: 1px solid var(--primary);
}

.button-primary:hover {
    background-color: var(--light-primary);
    color: var(--primary);
    border: 1px solid var(--light-primary);
}

.button-l-primary {
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--light-primary);
    color: var(--primary);
    transition: var(--smoot-300);
    border: 1px solid var(--light-primary);
}

.button-l-primary:hover {
    background-color: var(--primary);
    color: var(--white);
    border: 1px solid var(--primary);
}

.button-empty {
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--empty002);
    color: var(--dark);
    transition: var(--smoot-300);
    border: 1px solid var(--empty002);
}


/* .button-empty:hover {
    background-color: var(--primary);
    color: var(--white);
} */

.button-danger {
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--danger);
    color: var(--white);
    transition: var(--smoot-300);
}

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

.btn-primary,
.btn-danger,
.btn-secondary,
.btn-info,
.btn-success {
    transition: var(--smoot-300) !important;
}


.btn-primary:hover {
    background-color: var(--light-blue) !important;
    border: 1px solid var(--light-blue) !important;
    color: var(--blue) !important;
}


.btn-secondary:hover {
    background-color: var(--secondary-hover) !important;
    border: 1px solid var(--secondary-hover) !important;
    color: var(--black) !important;
}

.btn-danger:hover {
    background-color: var(--danger-hover) !important;
    border: 1px solid var(--danger-hover) !important;
    color: var(--danger) !important;
}

.btn-success:hover {
    background-color: var(--success-hover) !important;
    border: 1px solid var(--success-hover) !important;
    color: var(--bs-success) !important;
}

.btn-info:hover {
    background-color: var(--info-hover) !important;
    border: 1px solid var(--info-hover) !important;
    color: var(--blue) !important;
}

.input-option {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #eee;
}

.input-option div {
    padding: 5px 10px;
    cursor: pointer;
}

.input-option div:hover {
    background-color: #eee;
}

/* ? ******************* End button ******************* */
/* ? ******************* End button ******************* */
/* ? ******************* End button ******************* */


/* ? ******************* Start View Image ******************* */
/* ? ******************* Start View Image ******************* */
/* ? ******************* Start View Image ******************* */

@media (min-width: 562px) {
    .img-view-tag {
        width: 450px;
    }
}

@media (max-width: 562px) {
    .img-view-tag {
        width: 90%;
    }
}
/* ? ******************* End View Image ******************* */
/* ? ******************* End View Image ******************* */
/* ? ******************* End View Image ******************* */


.shadow-primary {
    box-shadow: var(--shadow-primary);
}

.admin-content {
    background-color: var(--light-primary);
    min-height: 100vh;
}

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

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

::placeholder {
    color: var(--placeholder) !important;
}

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

.text-l-secondary {
    color: var(--empty001) !important;
}

@media (min-width: 768px) {
    .table-overflow-x::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 992px) {
    .w-default {
        width: 80%;
        margin-inline: auto;
    }

    .content {
        padding: 2rem 0;
    }
}

@media (max-width: 576px) {
    .w-default {
        width: 90%;
        margin-inline: auto;
    }
}

@media print {
    .print-hide {
        display: none !important;
    }
}