/* ---------------------------- */
/* S---------- Basic ---------- */
/* ---------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "iranyekan";
    user-select: none;
}img {
    display: inline-block;
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
    height: auto;
}
span {
    display: flex;
}
a {
    display: flex;
    text-decoration: none;
    color: inherit;
    outline: none;
}
ul {
    list-style-type: none;
    list-style-position: inside;
}
input,
button,
textarea,
select {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-align: inherit;
    outline: none;
}
textarea {
    resize: none;
}
input[type="file"]::file-selector-button {
    cursor: pointer !important;
}
table {
    width: 100%;
}
/* ---------------------------- */
/* ---------- Basic ----------E */
/* ---------------------------- */
/* ---------------------------- */
/* S-------- Libraries -------- */
/* ---------------------------- */
.scroll-y {
    overflow-y: auto !important;
    scrollbar-width: thin;
}
.scroll-x {
    overflow-x: auto !important;
    scrollbar-width: thin;
}
.scroll-all {
    overflow: auto !important;
    scrollbar-width: thin;
}
.hide-scroll {
    scrollbar-width: none;
}
.hide-scroll::-webkit-scrollbar {
    display: none;
}
/* --- deactive feature */
.deactive-feature {
    position: relative;
    cursor: not-allowed !important;
}
.deactive-feature * {
    cursor: not-allowed !important;
}
.deactive-feature::after {
    content: attr(data-phrase);
    position: absolute;
    font-size: 0.55rem;
    background: #fac0c0;
    color: #ff0000;
    box-shadow: 0 0 1px #ff0000;
    padding: 0.55em 0.65em;
    border-radius: 4px;
    font-weight: bolder;
    bottom: 55%;
    margin: 0 65%;
    opacity: 0.85;
    display: none;
    z-index: 40;
}
.deactive-feature:hover::after {
    display: block;
}
/* --- -------------- */
/* --- loader */
.loader {
    display: block !important;
    position: absolute !important;
    border: 16px solid #f3f3f3 !important;
    border-radius: 50% !important;
    border-top: 16px solid var(--main-color) !important;
    width: 60px !important;
    height: 60px !important;
    animation: spin 2s linear infinite;
    top: min(45%, 250px) !important;
    transform: translateY(-50%);
    right: 0 !important;
    left: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    z-index: 100 !important;
}
.loading {
    filter: blur(0.5px) grayscale(0.5) !important;
    pointer-events: none !important;
}
.loading--main {
    filter: blur(0.5px) grayscale(0.5) !important;
    cursor: wait !important;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* --- loading reflect  */
.loading-reflect {
    position: relative;
    overflow: hidden;
}
.loading-reflect::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 200%;
    background-image: linear-gradient(250deg, #000000 0%, #000000 40%, #1c1c1c 50%, #000000 60%, #000000 100%);
    background-repeat: no-repeat;
    cursor: wait !important;
    opacity: 0.5;
    z-index: 500;
    animation: reflect 1s linear infinite;
}
.loading-reflect > * {
    filter: blur(1.5px);
    pointer-events: none;
}

@keyframes reflect {
    0% {
        left: -100%;
    }
    100% {
        left: 0%;
    }
    
}

/* --- loading skeleton  */
.loading-skeleton,
.loading-skeleton-box,
.loading-skeleton-image,
.loading-skeleton-text {
    overflow: hidden;
    position: relative;
    opacity: 0.95;
    animation: skeleton 2s linear infinite alternate;
}
.loading-skeleton::before,
.loading-skeleton-box::before,
.loading-skeleton-image::before,
.loading-skeleton-text::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 200%;
    background-image: linear-gradient(250deg, #3b3b3b77  0%, #3b3b3b77  40%, #81818177  50%, #3b3b3b77  60%, #3b3b3b77  100%);
    background-repeat: no-repeat;
    cursor: wait !important;
    opacity: 0.5;
    z-index: 500;
    animation: reflect 2s linear infinite alternate;
}
.loading-skeleton-box {
    border-radius: 4px;
    width: 100%;
    height: 3em;
    margin-block: 0.5em;
}
.loading-skeleton-image {
    width: 3em;
    height: 3em;
    max-width: 3em;
    min-height: 3em;
    border-radius: 50%;
}
.loading-skeleton-text {
    width: 100%;
    height: 0.4em;
    margin-bottom: 0.3em;
    border-radius: 3px;
}
.loading-skeleton-text:last-child {
    width: 70%;
}

@keyframes skeleton {
    0% {
        background-color: #ebebeb;
    }
    100% {
        background-color: #ffffff;
    }
    
}

/* --- loading bar - circular */
.loader-circular {
    position: relative;
    margin-inline: auto;
    /* width: 50px;
    height: 50px; */
}
.loader-circular > svg {
    width: 100%;
    height: 100%;
}
.loader-circular > svg > path.bg {
    fill: none;
    stroke: #eee;
    stroke-width: 3.8;
}
.loader-circular > svg > path.progress {
    fill: none;
    stroke: var(--main-color);
    stroke-width: 3.8;
    stroke-linecap: round;
    stroke-dasharray: 0, 100;
    /* stroke-dashoffset: 0; */
    transition: 0.2s;
}
.loader-circular > svg > text.percentage {
  fill: var(--main-color);
  font-size: 0.7em;
  font-weight: bold;
  text-anchor: middle;
}
/* --- -------------- */


/* --- -------------- */
/* --- contextmenu */
.contextmenu-container {
    position: absolute;
    border: 1px solid #cfcfcf;
    border-radius: 5px;
    background: #ffffff;
    box-shadow: 0 0 1px #d9d9d9;
    font-size: 0.8rem;
    color: #01020e;
    max-width: 260px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: -1;
}
.contextmenu-container.active {
    z-index: 47;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s;
}
.contextmenu-container.loading,
.contextmenu-container.confirm-loading {
    display: none;
}
.contextmenu-container > ul {
    border-bottom: 1px solid #cfcfcf;
}
.contextmenu-container ul {
    padding: 0.4em;
}
.contextmenu-container ul:empty {
    display: none;
}
.contextmenu-container ul:last-child {
    border-bottom: none;
}
.contextmenu-container ul li {
    padding: 0.6em;
    cursor: pointer;
    border-radius: 4px;
    position: relative;
}
.contextmenu-container ul li:hover {
    background-color: #f1f1f1;
    transition: 0.3s;
}

.contextmenu-container ul li > p:first-child {
    min-width: 150px;
    word-spacing: -0.5px;
    max-width: 60%;
}
.contextmenu-container ul li > p:first-child span:first-child {
    color: #1a1a1a;
}
.contextmenu-container ul li > p:last-child {
    color: #a6a6a4;
    font-size: smaller;
    white-space: nowrap;
}
.contextmenu-container ul li > p.expand {
    transform: scaleX(-1);
}
.contextmenu-container > ul > li > ul {
    position: absolute;
    border: 1px solid #cfcfcf !important;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 2px #d9d9d9;
    inset-inline-start: 98%;
    top: -20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 48;
}
.contextmenu-container > ul > li > ul.flip {
    inset-inline-start: unset;
    inset-inline-end: 98%;
}
.contextmenu-container > ul > li:hover > ul {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s;
}
/* --- -------------- */


/* --- -------------- */
/* --- drop-down feature */
.drop-down-menu {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    position: absolute;
    top: 100%;
    z-index: 20;
    visibility: hidden;
    transition: 0.2s;
}
.drop-down-menu>* {
    overflow: hidden;
}
.drop-down-menu--show {
    grid-template-rows: 1fr;
    visibility: visible;

    transition: 0.3s;
}
/* --- -------------- */
/* --- messgae feature */
.message-item.message-success {
    border-top: 5px solid #00d544;
}
.message-item.message-success .message__icon,
.message-item.message-success .message__text h5 {
    color: #00d544;
}
.message-item.message-success .message__text h6 a {
    border: 1px solid #00d544;
    background: #00d544;
}
.message-item.message-success .message__text h6 a:hover {
    color: #00d544;
}
.message-item.message-error {
    border-top: 5px solid #ea3131;
}
.message-item.message-error .message__icon,
.message-item.message-error .message__text h5 {
    color: #ea3131;
}
.message-item.message-error .message__text h6 a {
    border: 1px solid #ea3131;
    background: #ea3131;
}
.message-item.message-error .message__text h6 a:hover {
    color: #ea3131;
}
.message-item.message-warn {
    border-top: 5px solid #dad715;
}
.message-item.message-warn .message__icon,
.message-item.message-warn .message__text h5 {
    color: #dad715;
}
.message-item.message-warn .message__text h6 a {
    border: 1px solid #dad715;
    background: #dad715;
}
.message-item.message-warn .message__text h6 a:hover {
    color: #dad715;
}
.message-item.message-info {
    border-top: 5px solid #3186ea;
}
.message-item.message-info .message__icon,
.message-item.message-info .message__text h5 {
    color: #3186ea;
}
.message-item.message-info .message__text h6 a {
    border: 1px solid #006fe6;
    background: #3186ea;
}
.message-item.message-info .message__text h6 a:hover {
    color: #3186ea;
}
.message-container {
    position: absolute;
    top: 1.5vh;
    top: 1.5dvh;
    left: 0;
    right: 0;
    padding: 0 !important;
    margin: 0 auto;
    width: clamp(300px, 30%, 500px);
    max-height: 97vh;
    max-height: 97dvh;
    overflow-y: scroll;
    z-index: 40;
}
.message-item {
    position: relative;
    left: 0;
    right: 0;
    padding: 0.7em !important;
    margin: 0 auto;
    margin-bottom: 0.2em;
    display: flex;
    justify-content: space-between;
    gap: 0.8em;
    width: 90%;
    border-radius: 1px;
    background: #fffffffd;
    box-shadow: 0px 0px 3px #7c7c7c;
}
.message-container .message__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
}
.message-container .message__close {
    color: #5f5f5f;
    padding: 0.3em;
    width: 25px;
    height: 25px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.message-container .message__close:hover {
    color: #fc2d2d;
    background: #eee;
    transition: 0.2s;
}
.message-container .message__text {
    flex-grow: 1;
}
.message-container .message__text h5 {
    padding-bottom: 0.4em;
}
.message-container .message__text p {
    font-size: 0.8rem;
    word-spacing: -1px;
    padding-bottom: 0.3em;
    text-align: justify;
}
.message-container .message__text h6 {
    border-top: 1px solid #c8c8c8;
    margin-top: 0.5em;
    padding-top: 0.7em;
    padding-right: 0.5em;
    padding-left: 0.5em;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.message-container .message__text h6 a {
    padding: 0.4em 0.9em;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
}
.message-container .message__text h6 a:hover {
    background: #fff;
    transition: 0.3s;
}
.message-container .message__time-line {
    position: absolute;
    bottom: 0;
    width: 0;
    margin: 0px -0.7em;
    height: 0.34em;
    background: #e6e6e6;
}
.animate-show {
    animation: show_animate 1s ease forwards;
}
.animate-hide {
    animation: hide_animate 1s ease forwards;
}
@keyframes show_animate {
    0% {
        transform: translateX(5%);
    }
    40% {
        transform: translateX(-5%);
    }
    100% {
        transform: translateX(0%);
    }
}
@keyframes hide_animate {
    0% {
        transform: translateX(0%);
    }
    60% {
        transform: translateX(-10%);
    }
    100% {
        transform: translateX(150%);
    }
}
@media screen and (max-width: 600px) {
    .message-container {
        position: fixed;
        top: 0;
    }
    .message-container {
        width: 100%;
    }
    .message-item {
        width: 100%;
        margin-bottom: 0;
    }
}
/* --- -------------- */
/* --- confirm feature */
.confirm-container.confirm-info {
    border-top: 5px solid #3186ea;
}
.confirm-container.confirm-info .confirm__icon {
    color: #3186ea;
}
.confirm-container.confirm-success {
    border-top: 5px solid #00d544;
}
.confirm-container.confirm-success .confirm__icon {
    color: #00d544;
}
.confirm-container.confirm-error {
    border-top: 5px solid #ea3131;
}
.confirm-container.confirm-error .confirm__icon {
    color: #ea3131;
}
.confirm-container.confirm-warn {
    border-top: 5px solid #dad715;
}
.confirm-container.confirm-warn .confirm__icon {
    color: #dad715;
}
.confirm-container.confirm-delete {
    border-top: 5px solid #ea3131;
}
.confirm-container.confirm-delete .confirm__icon {
    color: #ea3131;
}
.confirm-container {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: 1.2em;
    position: absolute;
    left: 0;
    right: 0;
    top: 45%;
    transform: translateY(-50%);
    margin: 0 auto;
    background: #fff;
    border-radius: 3px;
    padding: 1em 2.5em !important;
    width: clamp(300px, 25%, 500px);
    box-shadow: 0px 0px 3px #7c7c7c;
    z-index: 50;
}
.confirm-container .confirm__icon {
    font-size: 4rem;
}
.confirm-container .confirm__icon span {
    display: flex;
    justify-content: center;
    align-items: center;
}
.confirm-container .confirm__text {
    display: flex;
    flex-flow: column;
    gap: 0.5em;
    text-align: center;
    margin-bottom: 0.5em;
}
.confirm-container .confirm__text h5 {
    font-size: 1rem;
}
.confirm-container .confirm__text p {
    font-weight: lighter;
    font-size: 0.75rem;
    text-align: justify;
    word-spacing: -1px;
}
.confirm-container .confirm__action {
    font-size: 0.8rem;
    display: flex;
    flex-flow: column;
    gap: 0.5em;
    min-width: 50%;
    text-align: center;
}
.confirm-container .confirm__action button {
    padding: 0.5em 0.9em;
    border-radius: 3px;
    cursor: pointer;
}
.confirm-container .confirm__action__accept {
    background: #03060a;
    border: 1px solid #03060a;
    color: #fff;
}
.confirm-container .confirm__action__accept:hover {
    background: #fff;
    color: #03060a;
    font-weight: bolder;
    transition: 0.3s;
}
.confirm-container .confirm__action__decline {
    border: none;
    background: unset;
}
.confirm-container .confirm__action__decline:hover {
    color: #320202;
    /* font-weight: bolder; */
    box-shadow: 0 0 3px #e4c7c7;
    transition: 0.2s;
}
.confirm-loading {
    filter: blur(1px) grayscale(0.8) !important;
    pointer-events: none !important;
}
/* --- -------------- */
/* --- print container */
.print-container {
    display: none;
}
@media print {
    @page {
        margin: 0 !important;
    }
    body {
        width: calc(297mm - 3.2cm) !important;
        height: calc(210mm - 3.2cm) !important;
        margin: 1.6cm !important;
    }
    .message-container {
        display: none !important;
    }
    .not-shown-print {
        display: none !important;
    }
}
/* --- -------------- */
/* --- Dispaly Limit Controll */
@media screen and (max-height: 500px) and (orientation: landscape) {
    body>* {
        background-image: url("../asset/image/background/no_rotate.png") !important;
        background-color: #eee !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        position: relative !important;
        height: 100vh !important;
        height: 100dvh !important;
    }
    body>*>* {
        display: none !important;
    }
}
/* --- -------------- */
/* --- general tools */
.cursor-pointer {
    cursor: pointer !important;
}
.cursor-wait {
    cursor: wait !important;
}
.text-nowrap {
    text-wrap: nowrap;
}
.text-center {
    text-align: center;
}
.display-none {
    display: none !important;
}
.flex-only,
.flex-row {
    display: flex;
}
.flex-align-c {
    display: flex;
    align-items: center;
}
.flex-c {
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-sb {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-sa {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.flex-se {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.flex-s {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.flex-e {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.flex-c-na {
    display: flex;
    justify-content: center;
}
.flex-sb-na {
    display: flex;
    justify-content: space-between;
}
.flex-sa-na {
    display: flex;
    justify-content: space-around;
}
.flex-se-na {
    display: flex;
    justify-content: space-evenly;
}
.flex-s-na {
    display: flex;
    justify-content: flex-start;
}
.flex-e-na {
    display: flex;
    justify-content: flex-end;
}
.flex-column {
    display: flex;
    flex-direction: column;
}
.flex-column-r {
    flex-direction: column-reverse;
}
.flex-row-r {
    flex-direction: row-reverse;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-grow>* {
    flex-grow: 1;
}
.no-align {
    align-items: unset;
}
.child-grow {
    flex-grow: 1;
}
.gap-4em {
    gap: 4em;
}
.gap-3em {
    gap: 3em;
}
.gap-2em {
    gap: 2em;
}
.gap-15em {
    gap: 1.5em;
}
.gap-1em {
    gap: 1em;
}
.gap-07em {
    gap: 0.7em;
}
.gap-05em {
    gap: 0.5em;
}
.gap-03em {
    gap: 0.3em;
}
.grid-c {
    display: grid;
    place-content: center;
}


.latin-container {
    direction: ltr;
}
.latin-container * {
    direction: ltr;
}
.latin-input,
.latin-label,
.latin-element {
    direction: ltr;
}
.numeric-input,
.count-numeric-input,
.math-numeric-input,
.phone-numeric-input {
    direction: ltr;
}

.arabic-container {
    direction: rtl;
}
.arabic-container * {
    direction: rtl;
}
.arabic-input,
.arabic-label,
.arabic-element {
    direction: rtl;
}


.center-input,
.center-input input {
    text-align: center;
}
.hover-scale-05:hover {
    transform: scale(1.05);
    transition: 0.2s;
}
.hover-scale-1:hover {
    transform: scale(1.1);
    transition: 0.3s;
}
/* -------- */
.header-size {
    font-size: clamp(1.2rem, 1.5vw, 2.2rem);
}
.header-size--big {
    font-size: clamp(1.5rem, 1.8vw, 2.4rem);
}
.text-size {
    font-size: clamp(0.8rem, 0.8vw, 1.1rem);
}
.footer-size {
    font-size: clamp(0.6rem, 0.7vw, 0.9rem);
}
.suffixed-label {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0.5em;
}
.suffixed-label>*:last-child {
    font-size: smaller;
    filter: contrast(0.5);
    word-spacing: -1px;
}
.suffixed-input {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.suffixed-input::after {
    content: attr(data-suffixed);
    position: absolute;
    align-self: flex-end;
    font-size: smaller;
    font-weight: bolder;
    color: #b1b1b1;
    margin: 0 1em;
    pointer-events: none;
}
.suffixed-input>input::placeholder {
    color: #b1b1b1;
}
.general-input {
    border: 1px solid #b9b9b9;
    box-shadow: 0 0 1px #b9b9b9;
    border-radius: 2px;
    text-align: center;
    padding: 0.3em 1.6em;
    font-size: 0.7rem;
    font-weight: bolder;
    height: 100%;
    width: 100%;
}
.general-counter-container {
    position: relative;
}
.general-counter-container input {
    width: 100%;
    height: 100%;
    text-align: center;
}
.general-counter-container span {
    position: absolute;
    top: 9%;
    font-size: 1rem;
    color: #7f7f7f;
    font-weight: bolder;
    padding: 0 0.4em;
    cursor: pointer;
    border: 5px;
}
.general-counter-container span:hover {
    color: #171717;
    background: #f8f8f8;
    transition: 0.2s;
}
.general-counter-container span:first-child {
    right: 1px;
}
.general-counter-container span:last-child {
    left: 1px;
}
.general-input-mark-container {
    position: relative;
}
.general-input-mark-container>input {
    border: 1px solid #b9b9b9;
    box-shadow: 0 0 1px #b9b9b9;
    border-radius: 2px;
    text-align: center;
    padding: 0.3em 1.6em;
    font-size: 0.7rem;
    font-weight: bolder;
    height: 100%;
    width: 100%;
}
.general-input-mark-container::before {
    content: attr(data-after);
    position: absolute;
    top: 9%;
    right: 0;
    font-size: 1rem;
    color: #7f7f7f;
    font-weight: bolder;
    padding: 0 0.4em;
    cursor: pointer;
    border: 5px;
}
.general-input-mark-container::after {
    content: attr(data-befor);
    position: absolute;
    top: 9%;
    left: 0;
    font-size: 1rem;
    color: #7f7f7f;
    font-weight: bolder;
    padding: 0 0.4em;
    cursor: pointer;
    border: 5px;
}
.general-button {
    text-align: center;
    border: 1px solid #565656;
    padding: 0.4em 0.5em;
    background: #434343;
    color: #fff;
    font-size: 0.75rem;
    height: 100%;
    width: 100%;
    border-radius: 3px;
    cursor: pointer;
}
.general-button:hover {
    font-weight: bolder;
    color: #434343;
    background: #fff;
    transition: 0.3s;
}
.general-button.general-button--light {
    border: 1px solid #565656;
    background: #fff;
    color: #434343;
}
.general-button.general-button--light:hover {
    color: #fff;
    background: #434343;
}
.general-title-show {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: help;
    font-weight: bolder;
    position: relative;
}
.general-title-show:hover>*:last-child {
    display: flex;
    transition: 0.3s;
}
.general-title-show>*:last-child {
    display: none;
    position: absolute;
    width: 200%;
    top: 100%;
    background: #ffffeb;
    font-weight: normal;
    border-radius: 2px;
    z-index: 3;
    box-shadow: 0 0 3px #ffffeb;
    padding: 0.5em 0.8em;
    text-align: justify;
    font-size: 0.65rem;
    color: #303030;
    border: 1px dotted #858f1c;
}
.general-title-show>*:last-child:empty {
    display: none !important;
}
.general-table {
    border-collapse: collapse;
    text-align: center;
}
.table-null-row {
    background: #fff9f9 !important;
    color: #de0000 !important;
    font-weight: bolder !important;
    padding: 1em !important;
    cursor: not-allowed !important;
}
@media screen and (max-width: 700px) {
    .responsive-table {
        text-align: center;
    }
    .responsive-table tr {
        display: flex;
        flex-flow: row wrap;
    }
    .responsive-table tr th {
        flex-grow: 1;
    }
    .responsive-table tr td {
        flex-grow: 1;
        border: 1px solid #e2e2e2;
    }
    .responsive-table tr td:last-child {
        flex-basis: 100%;
        border-bottom: 2px solid #9e9e9e !important;
    }
}
/* --- -------------- */
/* ---------------------------- */
/* -------- Libraries --------E */
/* ---------------------------- */
/* ---------------------------- */
/* S--------- COMMON ---------- */
/* ---------------------------- */
.base-container {
    display: flex;
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: #e4e6eb;
    overflow: hidden;
}

.base-container-1 {
    display: flex;
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: block;
}
/* ---------------------------- */
/* ---------- COMMON ---------E */
/* ---------------------------- */



/* ---------------------------- */
/* S-------- Home-Page -------- */
/* ---------------------------- */
.base-container.home-page {
    display: block;
    padding: 1em;
}
.home-page>.main-segment {
    width: 100%;
    height: 65vh;
    height: 65dvh;
    min-height: fit-content;
    border-radius: 20px;
    padding: 0.4em;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.main-segment>.home-header {
    background: #204a4d;
    height: 50px;
    border-start-start-radius: 15px;
    border-start-end-radius: 15px;
    position: relative;
}
.home-header .home-header_title>.nav-title {
    padding: 0.4em 1em 0.6em 1.5em;
    border-start-start-radius: 7px;
    border-start-end-radius: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 7px;
    min-width: 150px;
    background: #e4e6eb;
    color: #023e58;
    font-size: 0.5rem;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}
.home-header .home-header_title>.nav-title:hover {
    filter: hue-rotate(45deg);
    transition: 0.3s;
}
.home-header .home-header_menu {
    flex-grow: 1;
}
.home-header .home-header_menu .home-header_menu_mini-tool {
    display: none;
    background: #e4e6eb;
    padding: 0.3em 1em;
    border-radius: 5px;
    margin-block: 0.3em;
    font-size: 1rem;
    cursor: pointer;
}
.home-header .home-header_menu .home-header_menu_mini-tool:hover {
    color: #1083c7;
    box-shadow: 0 0 4px #32b7d1 inset;
    transition: 0.2s;
}
.home-header .home-header_menu .home-header_menu_section {
    flex-grow: 1;
}
.home-header .home-header_menu .nav-item {
    margin: 0.5em 0.4em;
    padding: 0.6em 1em;
    font-size: 0.85rem;
    color: #fff;
    background: #21222482;
    border-radius: 7px;
    min-width: 100px;
    text-align: center;
    cursor: pointer;
}
.home-header .home-header_menu .nav-item:hover {
    background: #08363f;
    box-shadow: 0 0 3px #bfbfbf;
    transition: 0.2s;
}
.home-header .home-header_menu .nav-item.deactive-feature::after {
    align-self: end;
    right: 10px;
}
.home-header .home-header_menu_login>.nav-login {
    margin: 0.4em 1em;
    padding: 0.5em 1.2em;
    background: #ccfc04;
    border-radius: 7px;
    font-size: 0.85rem;
    text-align: center;
    /* font-weight: bold; */
    color: #08342b;
    box-shadow: 0 0 2px #5a681a;
    transition: 0.3s;
    border: 1px solid #ccfc04;
}
.home-header .home-header_menu_login>.nav-login:hover {
    background: #08363f;
    color: #ccfc04;
    transition: 0.2s;
}
.home-header>.home-header_menu_login>.nav-login span:first-child {
    padding-top: 3px;
}
.main-segment>.home-introduction {
    background: #20343b;
    background: -webkit-linear-gradient(to bottom, #204a4d, #20343b);
    background: linear-gradient(to bottom, #204a4d, #20343b);
    overflow: hidden;
    height: calc(100% - 95px);
    border-end-end-radius: 15px;
    border-end-start-radius: 15px;
}
.main-segment>.home-introduction>div {
    min-height: 100%;
    flex-grow: 1;
}
.home-introduction .home-introduction_title {
    padding: 3em;
    min-width: 50%;
    flex-grow: 1;
    text-align: center;
}
.home-introduction .home-introduction_title>h2 {
    padding-top: 0.5em;
    padding-bottom: 1em;
    color: #fff;
    font-size: 1.8rem;
    max-width: 570px;
}
.home-introduction .home-introduction_title>h2 span:last-child {
    color: #ccfc04;
}
.home-introduction .home-introduction_title>p {
    max-width: 560px;
    width: 100%;
    text-align: justify;
    color: #a0b9bb;
    font-size: 0.8rem;
    padding-bottom: 2.2em;
}
.home-introduction .home-introduction_title>button {
    border: 1px solid #586e72;
    background: #213b42;
    color: #fff;
    border-radius: 5px;
    padding: 0.7em;
    min-width: 230px;
    cursor: cell;
    position: relative;
    z-index: 2;
    transition: 0.2s;
}
.home-introduction .home-introduction_title>button:hover {
    background: #08363f;
    min-width: 250px;
    transition: 0.5s;
}
.home-introduction .home-introduction_project {
    position: relative;
}
.home-introduction .home-introduction_project .home-introduction_project_box {
    position: absolute;
    bottom: 4%;
    left: 0;
    right: 0;
    width: 65%;
    min-width: 300px;
    height: 160px;
    z-index: 6;
    border-radius: 9px;
    box-shadow: 0 0 2px #20484b;
    overflow: hidden;
}
.home-introduction .home-introduction_project .home-introduction_project_box>.project_box_title {
    flex-basis: 60%;
    background: #fff;
    padding: 1em;
}
.home-introduction .home-introduction_project .home-introduction_project_box>.project_box_title p:first-child {
    font-weight: bold;
    font-size: 1rem;
    padding-bottom: 0.5em;
    word-spacing: -1px;
}
.home-introduction .home-introduction_project .home-introduction_project_box>.project_box_title p:nth-child(2) {
    font-size: 0.7rem;
    text-align: justify;
    color: #595959;
    padding-bottom: 1.8em;
    word-spacing: -2px;
    transition: 0.3s;
}
.home-introduction .home-introduction_project .home-introduction_project_box>.project_box_title p:last-child span:hover {
    transform: translateX(-3px);
    transition: 0.5s;
}
.home-introduction .home-introduction_project .home-introduction_project_box>.project_box_cover {
    flex-basis: 40%;
    flex-grow: 1;
    border: 0.8em solid #fff;
}
.home-introduction .home-introduction_project .home-introduction_project_box>.project_box_cover>p {
    border: 4px solid #ffffff;
    height: 100%;
    border-radius: 10px;
    scale: 1.05;
    background: #20373ea3;
}
.home-introduction .home-introduction_project img {
    height: 100%;
    width: auto;
    position: relative;
    z-index: 3;
    filter: drop-shadow(2px 0 6px #262901);
    opacity: 0.9;
    margin-inline-end: 30px;
}
.main-segment>.home-action {
    background: #20343b;
    align-self: center;
    height: 45px;
    width: 40%;
    position: relative;
    color: #fff;
}
.main-segment>.home-action::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: -54px;
    border-left: 54px solid transparent;
    border-top: 45px solid #20343b;
}
.main-segment>.home-action::after {
    content: "";
    display: inline-block;
    position: absolute;
    right: -54px;
    border-right: 54px solid transparent;
    border-top: 45px solid #20343b;
}
.main-segment>.home-action>div {
    padding-inline: 0.5em;
    cursor: pointer;
    height: 100%;
}
.main-segment>.home-action>div:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 4px 6px black);
    transition: 0.2s;
}
.home-page>.rest-segment {
    height: 28vh;
    height: 28dvh;
    min-height: 100px;
    padding: 0.4em;
}
.rest-segment>div {
    flex-grow: 1;
    height: 100%;
    flex-basis: max(30%, 280px);
}
.rest-segment>.rest-segment_card>div {
    border-radius: 15px;
    height: fit-content;
    min-height: 100%;
    width: max(80%, 350px);
    background: #15282f;
    background: -webkit-linear-gradient(to bottom, #2f4851, #15282f);
    background: linear-gradient(to left, #2f4851, #15282f);
    color: #fff;
    padding: 1em;
    padding-bottom: 0.7em;
}
.rest-segment>.rest-segment_title>div {
    border-radius: 15px;
    text-align: center;
    padding-top: 1.2em;
}
.rest-segment>.rest-segment_title h3 {
    font-size: 1.2rem;
    color: #252525;
    padding-bottom: 0.8em;
}
.rest-segment>.rest-segment_title p {
    font-size: 0.9rem;
    color: #3b3b3b;
    font-weight: lighter;
}
.rest-segment>.rest-segment_card h3 {
    font-size: 1rem;
    padding-bottom: 1em;
    color: #c6d6d4;
}
.rest-segment>.rest-segment_card .rest_card_info .rest_card_info_medal p:first-child span {
    font-size: 2rem;
    color: #ffe970;
}
.rest-segment>.rest-segment_card .rest_card_info .rest_card_info_medal p:last-child span:first-child {
    font-size: 1.4rem;
    color: #ffe970;
    font-weight: bold;
    padding-bottom: 0.5em;
}
.rest-segment>.rest-segment_card .rest_card_info .rest_card_info_medal p:last-child span:last-child {
    font-size: 0.65rem;
    color: #c7c7c7;
}
.rest-segment>.rest-segment_card .rest_card_honors .rest_card_honors_item div:last-child p:first-child {
    justify-content: start;
    padding-bottom: 0.2em;
    font-size: 0.8rem;
}
.rest-segment>.rest-segment_card .rest_card_honors .rest_card_honors_item div:last-child p:last-child {
    font-size: 0.6rem;
    color: #fff;
}
.rest-segment>.rest-segment_card .rest_card_projects_item {
    padding-inline: 0.1em;
    padding-bottom: 0.5em;
    padding-top: 1em;
    border-radius: 7px;
    cursor: pointer;
}
.rest-segment>.rest-segment_card .rest_card_projects_item:hover {
    background: #042127;
    transition: 0.3s;
}
.rest-segment>.rest-segment_card .rest_card_projects_item .rest_card_projects_item_title {
    font-size: 0.75rem;
    color: #eaf4f5;
}
.rest-segment>.rest-segment_card .rest_card_projects_item .rest_card_projects_item_title p:last-child {
    font-size: 0.6rem;
    padding-top: 0.4em;
    color: #b1b1b1;
    text-align: center;
}
.rest-segment>.rest-segment_card .rest_card_projects_item .rest_card_projects_item_state {
    width: 90%;
}
.rest-segment>.rest-segment_card .rest_card_projects_item .rest_card_projects_item_state p:first-child {
    font-size: 0.7rem;
    padding-bottom: 0.8em;
    padding-inline-start: 0.3em;
}
.rest-segment>.rest-segment_card .rest_card_projects_item .rest_card_projects_item_state p:last-child {
    width: 100%;
    height: 0.7em;
    border-radius: 3px;
    background: #dbdbdb;
    overflow: hidden;
}
.rest-segment>.rest-segment_card .rest_card_projects_item .rest_card_projects_item_state p:last-child span {
    height: 100%;
}
@media screen and (max-width: 1000px) {
    .main-segment {
        height: 97vh !important;
        height: 97dvh !important;
    }
    .main-segment>.home-header {
        justify-content: center !important;
    }
    .home-header .home-header_title .nav-title {
        font-size: 0.45rem !important;
    }
    .home-header .home-header_menu .nav-item {
        min-width: 85px;
        font-size: 0.8rem;
    }
    .home-header .home-header_menu_login .nav-login span:last-child {
        display: none;
    }
    .home-introduction .home-introduction_project img {
        height: 80% !important;
    }
    .rest-segment {
        height: auto !important;
    }
    .rest-segment>.rest-segment_title {
        order: -1;
        flex-basis: 100%;
    }
}
@media screen and (max-width: 700px) {
    .main-segment {
        height: 98vh;
        height: 98dvh;
    }
    .main-segment>.home-header {
        height: 55px !important;
        padding-top: 0.2em;
    }
    .home-header .home-header_title .nav-title {
        margin: 0.4em auto !important;
        gap: 0.5em !important;
        border-radius: 7px !important;
    }
    .home-header .home-header_menu {
        flex-grow: unset;
    }
    .home-header .home-header_menu .home-header_menu_mini-tool {
        display: flex;
    }
    .home-header .home-header_menu .home-header_menu_section {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-inline: auto;
        z-index: 5;
        flex-direction: column;
        background: #b1b1b1f5;
        margin-block: 0.2em;
        margin-inline: 0.8em;
        border-radius: 6px;
        display: none;
    }
    .home-header .home-header_menu .home-header_menu_items {
        justify-content: center;
        flex-wrap: wrap;
    }
    .home-header .home-header_menu .home-header_menu_items>.nav-item {
        flex-basis: 130px;
    }
    .home-header .home-header_menu .home-header_menu_login {
        margin-bottom: 0.3em;
    }
    .home-header .home-header_menu_login .nav-login span:last-child {
        display: flex;
    }
    .main-segment>.home-introduction {
        justify-content: center !important;
        flex-wrap: wrap;
        overflow-y: scroll !important;
    }
    .main-segment>.home-introduction>div {
        min-height: 65% !important;
    }
    .main-segment>.home-introduction .home-introduction_title>h2 {
        justify-content: center !important;
    }
    .main-segment>.home-introduction .home-introduction_title>button {
        margin-inline: auto;
    }
    .home-introduction .home-introduction_project .home-introduction_project_box {
        margin-inline: auto;
    }
    .home-action {
        display: none;
    }
    .main-segment>.home-introduction {
        height: calc(100% - 55px) !important;
    }
    .rest-segment>div {
        justify-content: center;
    }
}
@media screen and (max-width: 600px) {
    .base-container.home-page {
        padding: 0em;
        padding-bottom: 1em;
    }
    .home-introduction .home-introduction_title {
        padding: 2em !important;
        padding-bottom: 0.2em !important;
    }
}
@media screen and (max-width: 370px) {
    .main-segment {
        height: 100vh !important;
        height: 100dvh !important;
    }
    .home-page>.main-segment {
        border-radius: 0 !important;
        padding: 0em !important;
    }
    .main-segment>.home-header {
        padding-inline: 0.3em !important;
        border-start-start-radius: 0 !important;
        border-start-end-radius: 0 !important;
    }
    .main-segment>.home-introduction {
        border-radius: 0 !important;
    }
}
/* ---------------------------- */
/* ------- Home-Page --------E */
/* ---------------------------- */


/* ---------------------------- */
/* S-------- Login-Page -------- */
/* ---------------------------- */
.base-container.login-page {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.login-page>.cover-segment {
    position: absolute;
    width: 100%;
    height: 100%;
    /* background: #0d374a; */
    background: #20383e;
    opacity: 0.85;
}
.login-page>.login-segment {
    display: flex;
    width: clamp(700px, 65%, 1135px);
    height: clamp(470px, 73vh, 650px);
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 0 3px #4e4e4e;
    z-index: 1;
}
.login-page .login-segment.deactive .login-signin_form  {
    pointer-events: none;
    filter: blur(1px);
}
.login-segment > .login-intro,
.login-segment > .login-signin {
    padding: 1.5em;
    padding-bottom: 1em;
}
.login-segment .login-intro {
    background: #20373ebd;
    width: 45%;
    color: #fff;
    text-align: center;
}
.login-segment .login-intro_logo {
    width: clamp(90px, 44%, 160px);
    opacity: 0.9;
}
.login-segment .login-intro_logo img {
    width: 100%;
}
.login-segment .login-intro_title h1 {
    padding: 0.6em;
    padding-top: 0;
}
.login-segment .login-intro_title h2 {
    padding: 0.7em;
    font-weight: lighter;
    color: #dddddd;
}
.login-segment .login-intro_change-lang {
    position: relative;
    width: clamp(125px, 45%, 160px);
    font-size: 0.75rem;
    font-weight: bolder;
    color: #0582bb;
}
.login-segment .login-intro_change-lang button {
    display: flex;
    align-items: center;
    width: 100%;
    background: #ffffff;
    border: 1.5px solid #ffffff;
    border-radius: 3px;
    cursor: pointer;
    overflow: hidden;
}
.login-segment .login-intro_change-lang:has(.drop-down-menu--show) button {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.login-segment .login-intro_change-lang:has(.drop-down-menu--show) .language-container ul {
    border: 1.5px solid #ffffff;
    transition: 0.3s;
}
.login-segment .login-intro_change-lang button:hover {
    background: #eee;
    border: 1.5px solid #8bc4fc;
    transition: 0.3s;
}
.login-segment .login-intro_change-lang span {
    padding: 0.4em;
}
.login-segment .login-intro_change-lang span:first-child {
    width: 70%;
    justify-content: center;
}
.login-segment .login-intro_change-lang span:last-child {
    width: 30%;
    background: #00759d;
}
.login-segment .language-container ul {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
.login-segment .language-container ul li {
    background: #286498;
    border-bottom: 1px solid #828282;
    color: #fff;
    cursor: pointer;
    font-size: 0.7rem;
}
.login-segment .language-container ul li:hover {
    background: #7aa6c9;
    transition: 0.3s;
}
.login-segment .language-container ul li:hover span:last-child {
    background: #4ebeff;
    transition: 0.3s;
}
.login-segment .language-container ul li:last-child {
    border-bottom: none;
}
.login-segment .language-container ul li span:last-child {
    background: #07385f;
}
.login-segment .login-intro_copy-right {
    color: #63aecf;
}
.login-segment .login-signin {
    background: #fff;
    width: 55%;
    min-height: 1px;
}
.login-segment .login-signin_title {
    color: #303c47;
    padding: 2.5em 1em;
    text-align: center;
}
.login-segment .login-signin_form {
    width: min(700px, 100%);
    flex-grow: 1;
    justify-content: center;
}
.login-segment .login-signin_form>div {
    flex-direction: column;
}
.login-segment .login-signin_form>.login-signin_form_phone {
    padding-block: 0.5em;
}
.login-segment .login-signin_form>.login-signin_form_phone>div {
    flex-direction: column;
}
.login-segment .login_form_item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1em;
    text-align: center;
    width: 65%;
}
.login-segment .login_form_item:last-child {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.login-segment .login-signin_form_phone .login_form_item:last-child {
    margin-top: 1em;
}
.login-segment .login_form_item .show-hide-pass {
    position: absolute;
    top: 31%;
    color: #757575;
    cursor: pointer;
    inset-inline-end: 4%;
}
.login-segment .login_form_item .show-hide-pass:hover {
    color: #4d4d4d;
    transition: 0.2s;
}
.login-segment .login_form_item .input-icon {
    position: absolute;
    top: 31%;
    color: #757575;
    inset-inline-start: 4%;
}
.login-segment .login-signin_form input[type="text"],
.login-segment .login-signin_form input[type="password"] {
    width: 100%;
    height: 3.5em;
    outline: none;
    background: #eeeeee;
    padding: 0.8em max(12%, 30px);
    color: #00628f;
    border-radius: 2px;
    border: 1px solid #d8d8d8;
    font-size: 0.8rem;
    font-weight: bolder;
    letter-spacing: 0.4px;
}
.login-segment .login_form_item.login_form_item--phone input[type="text"]:invalid {
    border: 1px solid #ff8888;
    background: #ffeeee;
}
.login-segment .login_form_item.login_form_item--phone:has(input[type="text"]:invalid) span {
    color: #ff0000;
}
.login-segment .login_form_item.login_form_item--sms input[type="text"] {
    min-width: 14%;
    padding: 0.3em;
    border-radius: 3px;
}
.login-segment .login_form_item.login_form_item--sms input[type="text"]:invalid {
    border: 1px solid #068706;
    background: #e8ffe8;
}
.login-segment .login_form_item.login_form_item--sms p {
    width: 100%;
    font-size: 0.75rem;
    padding-bottom: 1.5em;
    color: #5d758b;
}
.login-segment .login_form_item.login_form_item--sms p span.edit-phone {
    padding-inline: 0.2em;
}
.login-segment .login-signin_form input::placeholder {
    color: #757575;
    text-align: var(--align-point);
}
.login-segment .login-signin_form input[type="button"] {
    background: #30404e;
    padding: 0.6em;
    border: 1px solid #30404e;
    width: max(50%, 110px);
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    margin-top: 1em;
    font-size: 0.9rem;
    font-weight: bolder;
    transition: 0.3s;
}
.login-segment .login-signin_form input[type="button"]:hover {
    background: #aad7ff;
    color: #253e51;
}
.login-segment .login_form_item button {
    padding: 0.7em;
    height: 100%;
    background: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #979797;
    width: 100%;
    border: 1px solid #fff;
}
.login-segment .login_form_item button.action-active {
    cursor: pointer;
}
.login-segment .login_form_item button.action-active:hover {
    color: #252525;
    background-color: #fafafa;
    border: 1px solid #f1f1f1;
    transition: 0.3s;
}
.login-segment .login-signin_form_phone_validate .login_form_item button span {
    min-width: 30px;
}
.login-segment .login-signin_form_phone_validate .login_form_item button span i:last-child {
    display: none;
}
.login-segment .login-signin_form_phone_validate .login_form_item button.resend-active span i:first-child {
    display: none;
}
.login-segment .login-signin_form_phone_validate .login_form_item button.resend-active span i:last-child {
    display: unset;
}
.login-segment .login-signin_install-app {
    border-top: 1px solid #303c47;
    color: #2f3b46;
    font-size: 0.7rem;
    overflow: hidden;
    padding: 1.5em 0.3em;
    font-weight: bolder;
    width: max(65%, 300px);
}
.login-segment .login-signin_install-app button {
    cursor: pointer;
    border: 1px solid #023072;
    outline: none;
    height: 100%;
    background: #fff;
    font-size: 0.65rem;
    padding: 0.7em;
    border-radius: 3px;
    gap: 0.7em;
}
.login-segment .login-signin_install-app button:hover {
    background: #92bfff;
    color: #023072;
    transition: 0.3s;
}
@media screen and (display-mode: standalone) {
    .login-segment .login-signin_install-app {
        display: none;
    }
    .login-segment .login-signin_form {
        flex-grow: unset;
    }
}
@media screen and (max-width: 1150px) {
    .login-segment .login-signin_form>div .login_form_item {
        width: 80%;
    }
}
@media screen and (max-width: 600px) {
    .login-page>.login-segment {
        width: 100%;
        height: 100%;
        flex-flow: column;
        border-radius: 0;
    }
    .login-segment > .login-intro,
    .login-segment > .login-signin {
        padding: 0.7em;
        width: 100% !important;
        flex-grow: 1;
    }
    .login-segment .login-intro {
        padding-top: 1em !important;
        flex-flow: row wrap;
    }
    .login-segment .login-intro_logo {
        width: 30%;
    }
    .login-segment .login-intro_title {
        width: 60%;
    }
    .login-segment .login-intro_title h1 {
        padding-inline: 0.4em;
    }
    .login-segment .login-intro_change-lang {
        order: 2;
    }
    .login-segment .login-signin {
        justify-content: start;
        padding-top: 0.5em !important;
    }
    .login-segment .login-signin_title {
        padding: 0.3em 1em 1.7em 1em;
    }
    .login-segment .login-signin_form {
        justify-content: unset;
    }
    .login-segment .login-signin_form>.login-signin_form_phone {
        padding-block: 0;
    }
    .login-segment .login-signin_form>div .login_form_item {
        width: 90%;
    }
    .login-segment .login-signin_form>div .login_form_item:last-child {
        width: fit-content !important;
    }
    .login-segment .login-signin_install-app {
        padding-block: 1em 0.5em;
    }
}
/* ---------------------------- */
/* ------- Login-Page --------E */
/* ---------------------------- */


/* ---------------------------- */
/* S-- Automation-Container --- */
/* ---------------------------- */
.base-container.automation-container {
    flex-direction: row;
}
.automation-container .main-segment {
    width: calc(100% - 250px);
}
.automation-container .automation-segment {
    position: relative;
    height: 90vh;
    height: 90dvh;
    padding: 1.5em;
}
@media screen and (max-width: 800px) {
    .automation-container .main-segment {
        width: 100%;
    }
    .automation-container .automation-segment {
        height: 80vh;
        height: 80dvh;
    }
    .automation-container .automation-segment {
        padding: 0.7em;
    }
}
/* S- Automation-Container--Sidebar - */
.automation-container .sidebar-segment {
    background: #fff;
    z-index: 25;
}
.automation-container .sidebar-segment .sidebar-logo {
    box-shadow: 1px 1px 4px #dddddd;
    filter: grayscale(0.1);
    padding: 1em;
}
.automation-container .sidebar-segment .sidebar-menu {
    padding: 1em 0;
}
.automation-container .sidebar-segment .sidebar-items-group {
    margin-bottom: 1em;
}
.automation-container .sidebar-segment .sidebar-items-group>h3 {
    font-size: 0.7rem;
    color: #6e768e;
    padding: 0px 1.1em;
    padding-bottom: 0.3em;
}
.automation-container .sidebar-segment .sidebar--selected {
    position: relative;
    font-size: 0.85rem;
}
.automation-container .sidebar-item {
    position: relative;
    font-size: 0.85rem;
}
.automation-container .sidebar-segment .sidebar-item>a {
    gap: 0.9em;
    padding: 0.6em 1.3em;
    position: relative;
    color: #383d4a;
}
.automation-container .sidebar-segment .sidebar-item>a.sidebar--selected {
    color: #1b8dfe;
}
.automation-container .sidebar-segment .sidebar-item>a:hover {
    background: #fafafa;
}
.automation-container .sidebar-segment .sidebar-item:hover>a {
    color: #3b99f8;
    transition: 0.2s;
}
.automation-container .sidebar-segment .sidebar-item>a .sidebar-item_icon {
    font-size: 0.95rem;
    background: #f2f2f2;
    width: 30px;
    height: 30px;
    border-radius: 5px;
}
.automation-container .sidebar-segment .sidebar-item>a .sidebar-item_expand {
    font-size: 0.7rem;
}
.automation-container .sidebar-segment .sidebar-item .drop-down-menu {
    position: relative !important;
}
.automation-container .sidebar-segment .sidebar-item ul {
    background: #f8f8f8;
}
.automation-container .sidebar-segment .sidebar-item ul li:first-child {
    border-top: 1px solid #eee;
}
.automation-container .sidebar-segment .sidebar-item ul li a {
    padding: 0.55em 1.5em;
    font-size: 0.75rem;
    color: #707070;
}
.automation-container .sidebar-segment .sidebar-item ul li a:hover {
    color: #157be1;
    transition: 0.1s;
}
.automation-container .sidebar-segment .sidebar-item ul li a:hover span:last-child {
    transform: translateX(-2px);
    transition: 0.3s;
}
.automation-container .sidebar-segment .sidebar-item ul li a span:first-child {
    width: 15px;
    height: 15px;
}
@media screen and (max-width: 800px) {
    .automation-container .sidebar-segment {
        position: absolute;
        margin: 0 -100%;
        height: 90vh;
        height: 90dvh;
        transition: 0.3s;
    }
    .automation-container .sidebar-segment.sidebar-moblie--show {
        border-inline-end: 1px solid #e5e3e3;
        margin: 0 0% !important;
        transition: 0.3s;
    }
    .automation-container .sidebar-segment .sidebar-logo {
        padding-top: 8vh;
        padding-top: 8dvh;
        box-shadow: unset !important;
    }
    .automation-container .sidebar-segment .sidebar-logo>img {
        display: none;
    }
}
/* - Automation-Container--Sidebar -E */
/* S- Automation-Container--headbar - */
.automation-container .headbar-segment {
    background: #edf0f3;
    box-shadow: 0 2px 1px #e0e0e0;
    height: 10vh;
    height: 10dvh;
    position: sticky;
    top: 0;
    z-index: 30;
}
.automation-container .headbar-segment .headbar-profile {
    position: relative;
    margin: 0 1.5em;
    min-width: 250px;
}
.automation-container .headbar-segment .headbar-profile_overview {
    padding: 1em 0;
    font-size: 0.78rem;
    color: #6c757d;
    font-weight: bolder;
    position: relative;
}
.automation-container .headbar-segment .headbar-profile_overview::after {
    content: attr(data-count);
    display: flex;
    justify-content: center;
    line-height: 20px;
    font-weight: bolder;
    position: absolute;
    font-size: 0.65rem;
    background: #ebe0e2;
    color: #f30000;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    left: -30px;
    opacity: 0.85;
    animation: icon_rotate_scale--mini 1s infinite;
}
.automation-container .headbar-segment .headbar-profile_overview[data-count = '']::after,
.automation-container .headbar-segment .headbar-profile_overview[data-count = '۰']::after,
.automation-container .headbar-segment .headbar-profile_overview[data-count = '0']::after {
    display: none !important;
}
.automation-container .headbar-segment .headbar-profile_overview img {
    opacity: 0.9;
}
.automation-container .headbar-segment .headbar-profile_overview>span {
    font-size: 0.7rem;
}
.automation-container .headbar-segment .headbar-profile_todo {
    position: absolute !important;
    top: 100%;
    max-height: 500px;
}
.automation-container .headbar-segment .headbar-profile_todo .loader {
    transform: scale(0.8);
}
.automation-container .headbar-segment .headbar-profile_todo ul {
    background: #fff;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    height: fit-content;
}
.automation-container .headbar-segment .headbar-profile_todo ul li {
    border-right: 1px solid #b3b3b3;
    border-left: 1px solid #b3b3b3;
    align-items: flex-start;
    padding: 0.75em;
    font-size: 0.7rem;
    color: #303030;
    border-bottom: 1px solid #eee;
}
.automation-container .headbar-segment .headbar-profile_todo ul li:first-child {
    border: 1px solid #b3b3b3  !important;
    padding: 0 !important;
}
.automation-container .headbar-segment .headbar-profile_todo ul li:last-child {
    padding: 0 !important;
    gap: 0 !important;
    align-items: flex-start !important;
    border: none !important;
}
.automation-container .headbar-segment .headbar-profile_todo ul li.todo-empty {
    justify-content: center;
    font-size: 0.7rem;
    color: #5b5b5b;
    background: #f8f8f8;
}
.automation-container .headbar-segment .headbar-profile_todo li h3 {
    flex-grow: 1;
    text-align: center;
    background: #e0e0e0;
    color: #646464;
    padding: 0.4em;
    font-size: 0.85rem;
}
.automation-container .headbar-segment .headbar-profile_todo li input[type='checkbox'] {
    width: 14px;
    height: 14px;
    accent-color: #fff;
    cursor: pointer;
}
.automation-container .headbar-segment .headbar-profile_todo li p {
    text-align: justify;
    flex-grow: 1;
}
.automation-container .headbar-segment .headbar-profile_todo li span:last-child {
    padding: .4em;
    cursor: pointer;
}
.automation-container .headbar-segment .headbar-profile_todo li span:last-child i.fa-badge-check {
    display: none;
}
.automation-container .headbar-segment .headbar-profile_todo li.todo-item--finished span:last-child i.fa-trash-can {
    display: none;
}
.automation-container .headbar-segment .headbar-profile_todo li.todo-item--finished span:last-child i.fa-badge-check {
    display: initial;
}


.automation-container .headbar-segment .headbar-profile_todo li.todo-item--finished span:last-child {
    font-size: 0.75rem;
    color: #047808;
}
.automation-container .headbar-segment .headbar-profile_todo li span:last-child:hover {
    color: #ff0505;
    background: #ffdede;
    border-radius: 3px;
    transition: .3s;
}
.automation-container .headbar-segment .headbar-profile_todo li.todo-item--finished span:last-child:hover {
    color: #047808;
    background: #d5ffcc;
    border-radius: 3px;
    transition: .3s;
}
.automation-container .headbar-segment .todo-item--finished p {
    text-decoration: line-through;
    color: #818181;
}
.automation-container .headbar-segment .todo-item--delay {
    background: #fff0f0;
    color: #d50101 !important;
}
.todo-item--finished span:last-child {
    color: #818181;
}
.automation-container .headbar-segment .headbar-profile_todo li input {
    color: #000;
    flex-grow: 1;
    height: 33px;
    font-size: 0.7rem;
    padding: 0.3em 0.7em;
    border: 1.5px solid #b3b3b3  ;
    font-weight: bolder;
}
.automation-container .headbar-segment .headbar-profile_todo li input::placeholder {
    color: #757575;
    font-weight: normal;
}
.automation-container .headbar-segment .headbar-profile_todo li button {
    height: 33px;
    background: #b3b3b3;
    color: #464646;
    padding: 0 0.9em;
    border: none;
    cursor: pointer;
}
.automation-container .headbar-segment .headbar-profile_todo li button:hover {
    color: #000000;
    background: #b0b0b0;
    transition: 0.3s;
}
.automation-container .headbar-segment .headbar-profile_logo {
    display: none;
    filter: grayscale(0.5);
}
.automation-container .headbar-segment .headbar-toolbox {
    gap: 2.5em;
    font-size: 1.1rem;
    flex-grow: 1;
    padding: 0 2em;
}
.automation-container .headbar-segment .headbar-toolbox .toolbox-item>*:first-child {
    border-radius: 3px;
    font-size: 1.1rem;
    color: #fff;
    color: #232323;
    padding: 0.25em;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.automation-container .headbar-segment .headbar-toolbox .toolbox-item>*:first-child:hover {
    transform: scale(1.1);
    color: #232323;
    background: #d8d8d8;
    transition: 0.3s;
}
.automation-container .headbar-segment .headbar-toolbox .toolbox-item--mobile {
    display: none;
}
.automation-container .headbar-segment .headbar-toolbox .toolbox-item--alert {
    position: relative;
}
.automation-container .headbar-segment .headbar-toolbox .toolbox-item--alert>span::after {
    content: attr(data-alerts);
    display: flex;
    justify-content: center;
    line-height: 20px;
    font-weight: bolder;
    position: absolute;
    font-size: 0.65rem;
    background: #0b79ac;
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    bottom: 52%;
    right: 60%;
    opacity: 0.85;
}
.automation-container .headbar-segment .headbar-toolbox .toolbox-item--alert>span[data-alerts=""]::after,
.automation-container .headbar-segment .headbar-toolbox .toolbox-item--alert>span[data-alerts="۰"]::after,
.automation-container .headbar-segment .headbar-toolbox .toolbox-item--alert>span[data-alerts="0"]::after {
    display: none !important;
}
.automation-container .headbar-segment .headbar-toolbox .toolbox-item--alert .toolbox_alert-list {
    width: 250px;
    max-height: 300px;
    border-radius: 1px;
    box-shadow: 0 0 2px #c9ced2;
    height: fit-content;
    top: 50px;
    right: -110px;
}
.automation-container .headbar-segment .headbar-toolbox .toolbox-item--alert .toolbox_alert-list.drop-down-menu--show ul {
    padding: 0.3em;
    background: #d8d8d8;
}
.automation-container .headbar-segment .headbar-toolbox .toolbox-item--alert .toolbox_alert-list ul {
    height: fit-content;
}
.automation-container .headbar-segment .headbar-toolbox .toolbox-item--alert .toolbox_alert-list li {
    font-size: 0.7rem;
    text-align: justify;
    background: #fff;
    border-radius: 5px;
    padding: 0.75em;
    color: #303030;
    margin-bottom: 0.5em;
}
.automation-container .headbar-segment .headbar-toolbox .toolbox-item--alert .toolbox_alert-list li:last-child {
    margin-bottom: 0 !important;
}
.automation-container .headbar-segment .headbar-toolbox .toolbox-item--alert .toolbox_alert-list li>span {
    color: #717171;
}
.automation-container .headbar-segment .headbar-toolbox .toolbox-item--logout>*:first-child {
    color: #cf0033 !important;
}
.automation-container .headbar-segment .headbar-toolbox .toolbox-item--logout>*:first-child:hover {
    background: #ffc4c4 !important;
    transition: 0.3s;
}
@media screen and (max-width: 800px) {
    .automation-container .headbar-segment {
        justify-content: center !important;
    }
    .automation-container .headbar-segment .headbar-profile {
        justify-content: space-around !important;
        margin: 0.5em !important;
        width: 100%;
    }
    .automation-container .headbar-segment .headbar-profile_overview {
        padding: 0;
    }
    .automation-container .headbar-segment .headbar-profile_logo {
        display: flex;
    }
    .automation-container .headbar-segment .headbar-toolbox {
        width: 100%;
        position: fixed;
        bottom: 0;
        gap: 1.3em !important;
        justify-content: space-between !important;
        background: #383838;
        height: 10vh;
        height: 10dvh;
        padding: 0 1.2em !important;
    }
    .automation-container .headbar-segment .headbar-toolbox .toolbox-item>*:first-child {
        color: #fff !important;
        font-size: 1.3rem !important;
    }
    .automation-container .headbar-segment .headbar-toolbox .toolbox-item>*:first-child:hover {
        color: #313131 !important;
        transition: 0.3s;
    }
    .automation-container .headbar-segment .headbar-toolbox .toolbox-item--logout>*:first-child:hover {
        color: #cf0033 !important;
    }
    .automation-container .headbar-segment .headbar-toolbox .toolbox-item--mobile {
        display: block;
    }
    .automation-container .headbar-segment .headbar-toolbox .toolbox-item--alert .toolbox_alert-list {
        top: unset !important;
        bottom: 50px;
    }
    .automation-container .headbar-segment .headbar-toolbox .toolbox-item--alert .toolbox_alert-list.drop-down-menu--show ul {
        background: #222222;
    }
}
/* - Automation-Container--headbar -E */
/* ---------------------------- */
/* -- Automation-Container ---E */
/* ---------------------------- */
/* ---------------------------- */
/* S--- Automation-Page --- */
/* ---------------------------- */
.automation-page .automation-segment {
    display: flex;
    padding: 0;
}
.automation-page .automation-segment>div {
    height: 100%;
}
.automation-page .automation-dashboard {
    border-end-end-radius: 12px;
    border-start-end-radius: 12px;
    background: #ebeff2;
    position: relative;
    box-shadow: -1px 0 3px #3b3b3b;
    padding: 1.5em;
    z-index: 2;
}
.automation-page .automation-dashboard>div {
    margin-bottom: 2em;
}
.automation-page .automation-dashboard_overview>.automation_overview_card {
    display: block;
    background: #fff;
    padding: 0.7em;
    border-radius: 3px;
    min-width: 230px;
    box-shadow: 0 0 3px #dbdbdb;
    font-size: 0.85rem;
}
.automation-page .automation-dashboard_overview>.automation_overview_card:hover {
    box-shadow: 0 0 5px #505050;
    transition: 0.2s;
}
.automation-page .automation-dashboard_overview>.automation_overview_card div:first-child>span {
    width: 3.5em;
    height: 3.3em;
    border-radius: 2px;
    color: #fff;
    font-size: 1rem;
}
.automation-page .automation-dashboard_overview>.automation_overview_card div:first-child p span:first-child {
    font-weight: bolder;
    font-size: 1.3rem;
    color: #fff;
}
.automation-page .automation-dashboard_overview>.automation_overview_card div:first-child p span:last-child {
    font-size: 0.65rem;
    color: #d3d3d3;
    font-weight: bolder;
}
.automation-page .automation-dashboard_overview>.automation_overview_card div:last-child h3 {
    font-size: 0.75rem;
    padding: 0.8em 0.5em 0.3em;
    color: #e3e3e3;
    font-weight: normal;
}
.automation-page .automation-dashboard_overview .automation_overview_card--payment {
    background-image: linear-gradient(56deg,
            rgba(254, 254, 254, 0.05) 0%,
            rgba(254, 254, 254, 0.05) 69%,
            rgba(160, 160, 160, 0.05) 69%,
            rgba(160, 160, 160, 0.05) 100%),
        linear-gradient(194deg,
            rgba(102, 102, 102, 0.02) 0%,
            rgba(102, 102, 102, 0.02) 60%,
            rgba(67, 67, 67, 0.02) 60%,
            rgba(67, 67, 67, 0.02) 100%),
        linear-gradient(76deg,
            rgba(169, 169, 169, 0.06) 0%,
            rgba(169, 169, 169, 0.06) 89%,
            rgba(189, 189, 189, 0.06) 89%,
            rgba(189, 189, 189, 0.06) 100%),
        linear-gradient(326deg,
            rgba(213, 213, 213, 0.04) 0%,
            rgba(213, 213, 213, 0.04) 45%,
            rgba(66, 66, 66, 0.04) 45%,
            rgba(66, 66, 66, 0.04) 100%),
        linear-gradient(183deg,
            rgba(223, 223, 223, 0.01) 0%,
            rgba(223, 223, 223, 0.01) 82%,
            rgba(28, 28, 28, 0.01) 82%,
            rgba(28, 28, 28, 0.01) 100%),
        linear-gradient(3deg,
            rgba(20, 20, 20, 0.06) 0%,
            rgba(20, 20, 20, 0.06) 62%,
            rgba(136, 136, 136, 0.06) 62%,
            rgba(136, 136, 136, 0.06) 100%),
        linear-gradient(200deg,
            rgba(206, 206, 206, 0.09) 0%,
            rgba(206, 206, 206, 0.09) 58%,
            rgba(6, 6, 6, 0.09) 58%,
            rgba(6, 6, 6, 0.09) 100%),
        linear-gradient(304deg,
            rgba(162, 162, 162, 0.07) 0%,
            rgba(162, 162, 162, 0.07) 27%,
            rgba(24, 24, 24, 0.07) 27%,
            rgba(24, 24, 24, 0.07) 100%),
        linear-gradient(186deg,
            rgba(166, 166, 166, 0.04) 0%,
            rgba(166, 166, 166, 0.04) 5%,
            rgba(210, 210, 210, 0.04) 5%,
            rgba(210, 210, 210, 0.04) 100%),
        linear-gradient(90deg,
            rgb(26, 118, 64),
            rgb(32, 207, 121),
            rgb(78, 196, 128));
}
.automation-page .automation-dashboard_overview .automation_overview_card--request {
    background-image: linear-gradient(56deg,
            rgba(254, 254, 254, 0.05) 0%,
            rgba(254, 254, 254, 0.05) 69%,
            rgba(160, 160, 160, 0.05) 69%,
            rgba(160, 160, 160, 0.05) 100%),
        linear-gradient(194deg,
            rgba(102, 102, 102, 0.02) 0%,
            rgba(102, 102, 102, 0.02) 60%,
            rgba(67, 67, 67, 0.02) 60%,
            rgba(67, 67, 67, 0.02) 100%),
        linear-gradient(76deg,
            rgba(169, 169, 169, 0.06) 0%,
            rgba(169, 169, 169, 0.06) 89%,
            rgba(189, 189, 189, 0.06) 89%,
            rgba(189, 189, 189, 0.06) 100%),
        linear-gradient(326deg,
            rgba(213, 213, 213, 0.04) 0%,
            rgba(213, 213, 213, 0.04) 45%,
            rgba(66, 66, 66, 0.04) 45%,
            rgba(66, 66, 66, 0.04) 100%),
        linear-gradient(183deg,
            rgba(223, 223, 223, 0.01) 0%,
            rgba(223, 223, 223, 0.01) 82%,
            rgba(28, 28, 28, 0.01) 82%,
            rgba(28, 28, 28, 0.01) 100%),
        linear-gradient(3deg,
            rgba(20, 20, 20, 0.06) 0%,
            rgba(20, 20, 20, 0.06) 62%,
            rgba(136, 136, 136, 0.06) 62%,
            rgba(136, 136, 136, 0.06) 100%),
        linear-gradient(200deg,
            rgba(206, 206, 206, 0.09) 0%,
            rgba(206, 206, 206, 0.09) 58%,
            rgba(6, 6, 6, 0.09) 58%,
            rgba(6, 6, 6, 0.09) 100%),
        linear-gradient(304deg,
            rgba(162, 162, 162, 0.07) 0%,
            rgba(162, 162, 162, 0.07) 27%,
            rgba(24, 24, 24, 0.07) 27%,
            rgba(24, 24, 24, 0.07) 100%),
        linear-gradient(186deg,
            rgba(166, 166, 166, 0.04) 0%,
            rgba(166, 166, 166, 0.04) 5%,
            rgba(210, 210, 210, 0.04) 5%,
            rgba(210, 210, 210, 0.04) 100%),
        linear-gradient(90deg,
            rgb(26, 92, 118),
            rgb(32, 183, 207),
            rgb(78, 159, 196));
}
.automation-page .automation-dashboard_overview .automation_overview_card--approval {
    background-image: linear-gradient(56deg,
            rgba(254, 254, 254, 0.05) 0%,
            rgba(254, 254, 254, 0.05) 69%,
            rgba(160, 160, 160, 0.05) 69%,
            rgba(160, 160, 160, 0.05) 100%),
        linear-gradient(194deg,
            rgba(102, 102, 102, 0.02) 0%,
            rgba(102, 102, 102, 0.02) 60%,
            rgba(67, 67, 67, 0.02) 60%,
            rgba(67, 67, 67, 0.02) 100%),
        linear-gradient(76deg,
            rgba(169, 169, 169, 0.06) 0%,
            rgba(169, 169, 169, 0.06) 89%,
            rgba(189, 189, 189, 0.06) 89%,
            rgba(189, 189, 189, 0.06) 100%),
        linear-gradient(326deg,
            rgba(213, 213, 213, 0.04) 0%,
            rgba(213, 213, 213, 0.04) 45%,
            rgba(66, 66, 66, 0.04) 45%,
            rgba(66, 66, 66, 0.04) 100%),
        linear-gradient(183deg,
            rgba(223, 223, 223, 0.01) 0%,
            rgba(223, 223, 223, 0.01) 82%,
            rgba(28, 28, 28, 0.01) 82%,
            rgba(28, 28, 28, 0.01) 100%),
        linear-gradient(3deg,
            rgba(20, 20, 20, 0.06) 0%,
            rgba(20, 20, 20, 0.06) 62%,
            rgba(136, 136, 136, 0.06) 62%,
            rgba(136, 136, 136, 0.06) 100%),
        linear-gradient(200deg,
            rgba(206, 206, 206, 0.09) 0%,
            rgba(206, 206, 206, 0.09) 58%,
            rgba(6, 6, 6, 0.09) 58%,
            rgba(6, 6, 6, 0.09) 100%),
        linear-gradient(304deg,
            rgba(162, 162, 162, 0.07) 0%,
            rgba(162, 162, 162, 0.07) 27%,
            rgba(24, 24, 24, 0.07) 27%,
            rgba(24, 24, 24, 0.07) 100%),
        linear-gradient(186deg,
            rgba(166, 166, 166, 0.04) 0%,
            rgba(166, 166, 166, 0.04) 5%,
            rgba(210, 210, 210, 0.04) 5%,
            rgba(210, 210, 210, 0.04) 100%),
        linear-gradient(90deg,
            rgb(111, 118, 26),
            rgb(176, 207, 32),
            rgb(169, 196, 78));
}
.automation-page .automation-dashboard_info {
    background: #fff;
    font-size: 0.85rem;
    border-radius: 3px;
    box-shadow: 0 0 2px #d1d1d1;
}
.automation-page .automation-dashboard_info .automation_info_item {
    padding: 0.8em;
    border-inline-end: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
}
.automation-page .automation-dashboard_info .automation_info_item:last-child {
    border-inline-end: none;
}
.automation-page .automation-dashboard_info .automation_info_item>span {
    color: #b66dff;
}
.automation-page .automation-dashboard_info .automation_info_item>div p:first-child {
    color: #858585ee;
    font-size: 0.9em;
    padding-bottom: 0.4em;
}
.automation-page .automation-dashboard_info .automation_info_item>div p:last-child {
    font-weight: bolder;
}
.automation-page .automation-dashboard_transaction-chart {
    background: #fff;
    padding: 0.7em;
    font-size: 0.8rem;
}
.automation-page .automation-dashboard_transaction-chart .automation_transactoin-chart_transaction {
    flex-grow: 12;
    width: max(65%, 200px);
}
.automation-page .automation-dashboard_transaction-chart .automation_transactoin-chart_transaction .automation_chart_title {
    padding-bottom: 1em;
    font-size: 0.8rem;
}
.automation-page .automation-dashboard_transaction-chart .automation_transactoin-chart_transaction .automation_chart_title h3 {
    color: #242424;
}
.automation-page .automation-dashboard_transaction-chart .automation_transactoin-chart_transaction .automation_chart_title>div:last-child {
    border: 1px solid #9b9b9b;
    border-radius: 4px;
    font-size: 0.65rem;
    color: #6c6c6c;
    box-shadow: 0 0 1px #cdcdcd;
    position: relative;
    min-width: 85px;
}
.automation-page .automation-dashboard_transaction-chart .automation_transactoin-chart_transaction .automation_chart_title>div:last-child:hover {
    background: #eee;
    transition: 0.2s;
}
.automation-page .automation-dashboard_transaction-chart .automation_transactoin-chart_transaction .automation_chart_title>div:last-child p {
    padding: 0.3em 0.7em;
}
.automation-page .automation-dashboard_transaction-chart .automation_transactoin-chart_transaction .automation_chart_title>div:last-child .drop-down-menu ul {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
.automation-page .automation-dashboard_transaction-chart .automation_transactoin-chart_transaction .automation_chart_title>div:last-child .drop-down-menu ul li {
    background: #dfdfdf;
    padding: 0.3em;
    text-align: center;
    cursor: pointer;
    border: 1px solid #d3d1d1;
}
.automation-page .automation-dashboard_transaction-chart .automation_transactoin-chart_transaction .automation_chart_title>div:last-child .drop-down-menu ul li:first-child {
    margin-top: 0.1em;
}
.automation-page .automation-dashboard_transaction-chart .automation_transactoin-chart_transaction .automation_chart_title>div:last-child .drop-down-menu ul li:hover {
    background: #eee;
    transition: 0.2s;
}
.automation-page .automation-dashboard_transaction-chart .automation_transactoin-chart_balance {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    background: #e5e5e5;
    padding: 0.8em;
    border-radius: 5px;
}
.automation-page .automation-dashboard_transaction-chart .automation_transactoin-chart_balance .automation_chart_title {
    width: 100%;
    color: #176433;
    font-size: 0.8rem;
    margin-bottom: 1em;
}
.automation-page .automation-dashboard_transaction-chart .automation_transactoin-chart_balance .automation_chart_title p:first-child {
    width: 25px;
    height: 25px;
    background: #ffffff;
    border-radius: 5px;
}
.automation-page .automation-dashboard_transaction-chart .automation_transactoin-chart_balance .automation_chart_title p:last-child {
    font-weight: bolder;
    color: #2e2e2e;
}
.automation-page .automation-dashboard_transaction-chart .automation_transactoin-chart_balance .automation_chart_container {
    border-radius: 5px;
    overflow: hidden;
    width: 200px;
    height: 150px;
}
.automation-page .automation-dashboard_payment {
    background: #fff;
    padding: 0.8em 0.8em;
    font-size: 0.8rem;
}
.automation-page .automation-dashboard_payment>h2 {
    font-size: 0.95rem;
    padding-bottom: 1em;
    color: #242424;
}
.automation-page .automation-dashboard_payment>table tr {
    border-bottom: 1px solid #ebedf2;
    color: #222222;
    font-size: 0.8rem;
}
.automation-page .automation-dashboard_payment>table tbody tr:hover {
    background: #fafafa;
    color: #000000;
    transition: 0.2s;
}
.automation-page .automation-dashboard_payment>table tbody tr:last-child {
    border-bottom: none;
}
.automation-page .automation-dashboard_payment>table th,
.automation-page .automation-dashboard_payment>table td {
    padding: 1em 0.8em;
}
.automation-page .automation-dashboard_payment>table th {
    color: #9f9f9f;
    font-size: 0.7rem;
    background: #eee;
}
.automation-page .automation-dashboard_payment>table tbody td.action {
    font-weight: bold;
}
.automation-page .automation-dashboard_payment>table tbody td.action.receive {
    color: #15770a;
}
.automation-page .automation-dashboard_payment>table tbody td.action.pay {
    color: #770a0a;
}
.automation-page .automation-dashboard_payment>table td.state {
    padding: 0.5em;
}
.automation-page .automation-dashboard_payment>table td.state span {
    border-radius: 3px;
    width: 85%;
    margin: 0 auto;
    padding: 0.4em;
    font-size: 0.65rem;
}
.automation-page .automation-dashboard_payment>table td.state span.transaction-s2 {
    border: 1px solid #00d25b;
    color: #00a748;
    background: #e6ffec;
}
.automation-page .automation-dashboard_payment>table td.state span.transaction-s1 {
    border: 1px solid #d2c200;
    color: #b17200;
    background: #fff9e6;
}
.automation-page .automation-dashboard_payment>table td.state span.transaction-s0 {
    border: 1px solid #d20000;
    color: #a70000;
    background: #ffe6e6;
}
@media screen and (max-width: 800px) {
    .automation-page .automation-dashboard {
        padding: 0.7em;
    }
}
/* ---------------------------- */
/* ----- Automation-Page -----E */
/* ---------------------------- */


/* ---------------------------- */
/* S----- Member-Page ----- */
/* ---------------------------- */
.member-page .automation-segment {
    display: block;
    position: relative;
}
.member-page .automation-segment>div {
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 2px #d6d6d6;
    overflow: hidden;
    padding: 1em;
    width: 100%;
    height: 100%;
}
.member-page .member-info {
    position: relative;
    padding: 1em;
}
.member-page .member-info.member-info--view .member-info__form__target-input {
    pointer-events: none;
    background-color: #f5f5f5;
}
.member-page .member-info.member-info--edit .member-info__form__target-input {
    pointer-events: auto;
    background-color: unset;
}
.member-page .member-info.member-info--view .member-info__form__target-input--no-bg {
    pointer-events: none;
}
.member-page .member-info.member-info--edit .member-info__form__target-input--no-bg {
    pointer-events: auto;
}
.member-page .member-info__main {
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 1em;
    box-shadow: 0 2px 4px -4px #b1b1b1;
}
@media screen and (max-width: 1000px) {
    .member-page .member-info__main__profile {
        justify-content: center;
        gap: 0.5em;
    }
    .member-page .info__main__profile__data {
        justify-content: center;
    }
    .member-page .member-info__main__profile .info__main__profile__data .member-info__input {
        flex-grow: 1;
    }
    .member-page .member-info__main__action {
        flex-basis: 90%;
    }
    .member-page .member-info__main__action>p {
        justify-content: center;
    }
    .member-page .member-info__main__action button {
        flex-grow: 1;
    }
}
.member-page .member-info__main__profile .info__main__profile__image {
    /* background: #e2e8eb; */
    width: 95px;
    height: 95px;
    color: #7a9199;
    border-radius: 50%;
    border: 1px solid #c6cccf;
    font-size: 2em;
    cursor: cell;
}
.member-page .member-info__main__profile .info__main__profile__image img {
    width: 100%;
    height: 100%;
}
.member-page .member-info__main__profile .info__main__profile__data {
    /* flex-basis: 300px; */
    padding-top: 0.5em;
}
.member-page .member-info__main__profile .info__main__profile__data .member-info__input {
    position: relative;
}
.member-page .member-info__main__profile .info__main__profile__data .member-info__input p {
    padding-bottom: 0.5em;
    color: #a1a1a1;
    padding-inline-start: 0.7em;
    font-size: 0.8rem;
    position: absolute;
    transform: translateY(10px);
    transition: 0.2s;
    display: none;
}
.member-page .member-info__main__profile .info__main__profile__data .member-info__input input {
    min-width: 150px;
    font-weight: bold;
    font-size: 1.3rem;
    field-sizing: content;
    border: none;
    border-bottom: 1px solid #d4d4d4;
    height: 35px;
    border-radius: 2px;
    padding-inline: 0.7em;
    width: 100%;
    color: #206dae;
    background: unset;
    position: relative;
    z-index: 1;
}
.member-page .member-info__main__profile .info__main__profile__data .member-info__input input::placeholder {
    color: #a1a1a1;
    font-size: 0.8rem;
}
.member-page .member-info.member-info--view .member-info__main__profile .info__main__profile__data .member-info__input input {
    border: none;
    width: unset;
    min-width: unset;
    padding-inline: 0;
}
.member-page .member-info.member-info--edit .member-info__main__profile .info__main__profile__data .member-info__input input {
    min-width: 150px;
    width: 100%;
    border-bottom: 1px solid #d4d4d4;
    padding-inline: 0.7em;
}
.member-page .member-info__main__profile .info__main__profile__data .member-info__input select {
    width: 100%;
    border: 1px solid #d5d5d5;
    padding: 0.5em 1em;
    border-radius: 2px;
    min-width: 50px;
    font-size: 0.7rem;
    color: #323232;
    cursor: pointer;
    field-sizing: content;
    /* -moz-appearance: none;
    -webkit-appearance: none; */
    color: #727272;
}
.member-page .member-info__main__profile .info__main__profile__data .member-info__input.active select {
    border: none;
    padding: 0;
    color: #000;
}
.member-page .member-info__main__profile .info__main__profile__data__type {
    padding-top: 1em;
}
.member-page .member-info__main__profile .info__main__profile__data__type__state {
    display: none;
    font-size: 0.6rem;
    background: #ffef9b;
    border: 1px solid #ffd700;
    padding: 0.3em 0.7em;
    border-radius: 4px;
    color: #561919;
}
.member-page .member-info.member-info--approved .member-info__main__profile .info__main__profile__data__type__state {
    display: flex;
}
.member-page .member-info.member-info--approved.member-info--edit .member-info__main__profile .info__main__profile__data__type__state {
    display: none;
}
.member-page .member-info__main__action>p {
    color: #a7a7a7;
    font-size: 0.8rem;
    letter-spacing: 1px;
    align-items: start;
    font-weight: bold;
    padding-inline: 0.3em;
}
.member-page .member-info__main__action button {
    padding: 0.8em;
    font-size: 0.75rem;
    border-radius: 5px;
    word-spacing: -1px;
    cursor: pointer;
    min-width: 100px;
    height: 100%;
    transition: 0.2s;
}
.member-page .member-info__main__action button.info__main__action__button__add {
    border: 1px solid #000;
    background: #000;
    color: #fff;
}
.member-page .member-info__main__action button.info__main__action__button__add:hover {
    border: 1px solid #061840;
    background: #061840;
    min-width: 150px;
    transition: 0.3s;
}
.member-page .member-info__main__action button.info__main__action__button__cancel {
    border: 1px solid #edeff0;
    background: #fff;
    color: #666b72;
}
.member-page .member-info__main__action button.info__main__action__button__cancel:hover {
    border: 1px solid #ffc0c0;
    background: #fff6f6;
    color: #be0000;
    transition: 0.3s;
}
.member-page .member-info__main__action button.info__main__action__button__edit {
    border: 1px solid #000;
    background: #000;
    color: #fff;
}
.member-page .member-info__main__action button.info__main__action__button__edit:hover {
    border: 1px solid #061840;
    background: #061840;
    min-width: 150px;
    transition: 0.3s;
}
.member-page .member-info__main__action button.info__main__action__button__print {
    min-width: 50px;
    border: none;
    background: #fff;
    color: #081a03;
}
.member-page .member-info .member-info__main__action .info__main__action__button--edit {
    display: flex;
}
.member-page .member-info .member-info__main__action .info__main__action__button--view {
    display: none;
}
.member-page .member-info.member-info--view .member-info__main__action .info__main__action__button--edit {
    display: none;
}
.member-page .member-info.member-info--view .member-info__main__action .info__main__action__button--view {
    display: flex;
}
.member-page .member-info.member-info--edit .member-info__main__action .info__main__action__button--edit {
    display: flex;
}
.member-page .member-info.member-info--edit .member-info__main__action .info__main__action__button--view {
    display: none;
}
.member-page .member-info__rest {
    padding-block: 1em 0.2em;
    position: relative;
}
.member-page .member-info__rest h1 {
    display: none;
    font-size: 0.9rem;
    padding-bottom: 1em;
    color: #f5f5f5;
}
.member-page .member-info__rest__form {
    overflow: hidden;
    border: 1px solid #e2e8eb;
    border-radius: 2px;
    /* box-shadow: 0 0 1px #6e6e6e; */
    flex-basis: 300px;
}
.member-page .member-info__rest__form h2 {
    border-bottom: 1px solid #ccd1d3;
    font-size: 0.8rem;
    background: #f7f7f7;
    color: #7a9099;
    padding: 0.7em;
}
.member-page .member-info__rest__form>div {
    padding: 0.5em;
}
.member-page .member-info__rest__form .member-info__input {
    flex-basis: max(45%, 140px);
}
.member-page .member-info__rest__form .member-info__input p {
    padding-bottom: 0.5em;
    padding-inline-start: 0.2em;
    font-size: 0.65rem;
    text-align: start;
}
.member-page .member-info__rest__form .member-info__input div {
    border-radius: 2px;
    align-items: unset;
    overflow: hidden;
    position: relative;
}
.member-page .member-info__rest__form .member-info__input div span:first-child {
    background: #d3d3d3;
    justify-content: center;
    padding: 0.3em 0.8em;
    align-items: center;
    color: #1e1e1e;
    font-size: 0.9rem;
}
.member-page .member-info__rest__form .member-info__input div input,
.member-page .member-info__rest__form .member-info__input div select {
    border: 1px solid #d3d3d3;
    padding: 0.3em 0.8em;
    font-size: 0.7rem;
    font-weight: bolder;
    height: 30px;
    width: 100%;
}
.member-page .member-info__rest__form .member-info__input.address div input {
    font-size: 0.65rem;
}
.member-page .member-info.member-info--view .member-info__rest__form .member-info__input div input,
.member-page .member-info.member-info--view .member-info__rest__form .member-info__input div select,
.member-page .member-info.member-info--view .member-info__rest__form.member-info__rest__form--identity .member-info__input.approval>div>div {
    pointer-events: none;
    background-color: #f5f5f5;
}
.member-page .member-info.member-info--edit .member-info__rest__form .member-info__input div input,
.member-page .member-info.member-info--edit .member-info__rest__form .member-info__input div select,
.member-page .member-info.member-info--edit .member-info__rest__form.member-info__rest__form--identity .member-info__input.approval>div>div {
    pointer-events: auto;
    background-color: unset;
}
.member-page .member-info__rest__form .member-info__input div span:last-child {
    display: none;
    position: absolute;
    inset-inline-end: 4px;
    align-self: center;
    padding: 0.3em;
    cursor: pointer;
    color: #646464;
}
/* .member-page .member-info__rest__form .member-info__input:has(select) div span:last-child {
    inset-inline-end: 15px;

}
.member-page .member-info__rest__form .member-info__input div span:last-child:hover {
    transform: scale(0.9);
    color: #537695;
}
.member-page .member-info.member-info--edit .member-info__rest__form .member-info__input div span:last-child {
    display: flex;
} */
.member-page .member-info__rest__form.member-info__rest__form--identity .member-info__input.approval>div>div {
    border: 1px solid #d3d3d3;
    border-radius: 0;
    font-weight: bold;
    align-items: center;
}
.member-page .member-info__rest__form.member-info__rest__form--identity .member-info__input.approval>div>div input {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: #2c435c;
}
.member-page .member-info__rest__form.member-info__rest__form--identity .member-info__input.approval>div>div p {
    padding-block: 0.52em;
    font-size: 0.7rem;
    color: #181818;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div {
    padding: 0;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__add {
    position: relative;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__add>p {
    font-size: 0.75rem;
    font-weight: bolder;
    color: #3e3e3e;
    cursor: pointer;
    padding-inline: 0.5em;
    box-shadow: 0 1px 2px #dadada;
    padding: 0.7em 1em;
    cursor: cell;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__add>p:hover {
    background: #fcfffc;
    transition: 0.3s;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__add .drop-down-menu {
    position: relative;
    background: #6c6c6c;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__add .drop-down-menu li {
    padding: 0.7em 0.5em;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__add .drop-down-menu li>div {
    position: relative;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__add .drop-down-menu li>div>span:first-child {
    position: absolute;
    inset-inline-start: 4px;
    top: 3px;
    color: #fff;
    font-size: 0.9rem;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__add .drop-down-menu li>div>input,
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__add .drop-down-menu li>div>select {
    border: none;
    border-bottom: 1px solid #fff;
    padding-inline: 28px;
    padding-bottom: 0.5em;
    background: #6c6c6c;
    font-size: 0.7rem;
    color: #fff;
    font-weight: bold;
    border-radius: 3px;
    width: 100%;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__add .drop-down-menu li>div>input::placeholder {
    color: #fff;
    font-weight: normal;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__add .drop-down-menu li>div>button {
    border: 1px solid #565656;
    padding: 0.4em 1.2em;
    background: #434343;
    color: #fff;
    font-size: 0.75rem;
    border-radius: 3px;
    width: 100%;
    cursor: pointer;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__add .drop-down-menu li>div>button:hover {
    font-weight: bolder;
    color: #434343;
    background: #fff;
    transition: 0.3s;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__item li {
    position: relative;
    border-bottom: 1.5px dotted #a3a3a3;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__item li:last-child {
    border-bottom: none;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__item li>div:first-child>p {
    padding: 1em 1.2em;
    font-size: 0.75rem;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__item tr td {
    text-align: center;
    padding: 1em 1.2em;
    font-size: 0.75rem;
    border-bottom: 1px dashed #eee;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__item tr td.score,
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__item tr td.state {
    padding: 0.5em 0.7em;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__item tr td.score span:first-child {
    font-weight: bold;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__item tr td.score span:last-child {
    color: #e5c100;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__item tr td.state span {
    font-size: smaller;
    padding: 0.3em;
    border-radius: 3px;
    width: min(90%, 100px);
    margin: 0 auto;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__item tr td.state--1 span {
    color: #085300;
    border: 1px solid #b1efaa;
    background: #d7ffd2;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__item li>.drop-down-menu {
    background: #eee;
    position: relative;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__item li>div ul li {
    border-bottom: 2px solid #c5c5c5;
    box-shadow: 0 -5px 7px -7px #898989 inset;
    padding: 1em 0.3em;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__item li>div ul li>div {
    position: relative;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__item li>div ul li span {
    position: absolute;
    inset-inline-start: 7px;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__item li>div ul li input,
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__item li>div ul li select {
    border: none;
    padding: 0.5em 0.8em;
    border-radius: 3px;
    box-shadow: 0 0 2px #b7b7b7;
    text-align: center;
    width: 100%;
    font-size: 0.7rem;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__item li>div ul li button {
    padding: 0.4em 1.2em;
    font-size: 0.75rem;
    border-radius: 3px;
    cursor: pointer;
    width: 100%;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__item li>div ul li button.edit {
    border: 1px solid #565656;
    background: #434343;
    color: #fff;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__item li>div ul li button.edit:hover {
    font-weight: bolder;
    color: #434343;
    background: #fff;
    transition: 0.3s;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__item li>div ul li button.delete {
    border: 1px solid #cb0000;
    color: #890808;
    background: #ffe5e5;
    width: fit-content;
}
.member-page .member-info__rest__form.member-info__rest__form--list>div .member-info__rest__form--list__item li>div ul li button.delete:hover {
    color: #cb0000;
    transition: 0.2s;
}
.member-page .member-attachment__button {
    display: none;
    position: fixed;
    bottom: 15px;
    inset-inline-end: 15px;
    cursor: pointer;
    border-radius: 5px;
    background: #00813e;
    color: #fff;
    padding: 0.5em;
    max-width: 35px;
    height: 35px;
    overflow: hidden;
    box-shadow: 0 0 3px #000000;
    z-index: 21;
    transition: 0.3s;
}
.member-page .member-info.member-info--view .member-attachment__button {
    display: flex;
}
@media screen and (max-width: 800px) {
    .member-page .member-attachment__button {
        bottom: 75px;
    }
}
.member-page .member-attachment__button span:last-child {
    font-size: 0.75rem;
    word-spacing: -1px;
}
.member-page .member-attachment__button:hover {
    max-width: 150px;
    transition: 0.6s;
}
.member-page .member-attachment__container {
    display: none;
    position: fixed;
    inset-inline-end: 13px;
    top: 10vh;
    top: 10dvh;
    bottom: 0;
    margin-block: auto;
    width: 300px;
    height: calc(90vh - 2.5rem);
    height: calc(90dvh - 2.5rem);
    background: #fff;
    box-shadow: 0 0 4px #686868;
    border-radius: 5px;
    z-index: 22;
}
@media screen and (max-width: 800px) {
    .member-page .member-attachment__container {
        top: 0;
        height: calc(80vh - 2.5rem);
        height: calc(80dvh - 2.5rem);
    }
}
@media screen and (max-width: 500px) {
    .member-page .member-attachment__container {
        width: 90%;
        left: 0;
        right: 0;
        margin-inline: auto;
    }
}
.member-page .member-attachment__container__header {
    padding: 0.7em;
}
.member-page .member-attachment__container__header h2 span:first-child {
    font-size: 0.9rem;
    color: #040404;
    padding-block: 0.3em;
}
.member-page .member-attachment__container__header h2 span:last-child {
    font-size: 0.7rem;
    font-weight: normal;
    color: #383b3d;
    word-spacing: -1px;
}
.member-page .member-attachment__container__header p {
    align-self: start;
    padding: 0.7em 0.4em;
    color: #95989e;
    cursor: pointer;
}
.member-page .member-attachment__container__header p:hover {
    color: #5c5e61;
    transition: 0.3s;
}
.member-page .member-attachment__container__upload {
    padding: 0.7em;
}
.member-page .member-attachment__container__upload>div {
    position: relative;
    align-items: center;
    background: #f0fcf2;
    border: 1px solid #839f92;
    border-radius: 8px;
    padding: 1em;
}
.member-page .member-attachment__container__upload input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    cursor: pointer;
}
.member-page .member-attachment__container__upload div>span {
    font-size: 1.5rem;
    color: #058140;
}
.member-page .member-attachment__container__upload div>p {
    font-size: 0.85rem;
    word-spacing: -1px;
    color: #0d100a;
}
.member-page .member-attachment__container__upload div>button {
    border: none;
    padding: 0.5em 1.3em;
    background: #e4fff8;
    border-radius: 4px;
    color: #14171e;
    font-size: 0.75rem;
    word-spacing: -1px;
    cursor: pointer;
    border: 1px solid #3d9d55;
}
.member-page .member-attachment__container__upload>p {
    font-size: 0.6rem;
    padding-top: 1em;
    color: #636469;
    text-align: center;
}
.member-page .member-attachment__container__list {
    position: relative;
    padding: 0.7em;
    min-height: 100px;
}
.member-page .member-attachment__container__list h2 {
    font-size: 0.8rem;
    padding-bottom: 0.8em;
}
.member-page .member-attachment__container__list__item {
    border: 1px solid #d1d1d1;
    border-radius: 5px;
    padding: 0.5em;
}
.member-page .member-attachment__container__list__item.potential {
    border: 1px solid #b1aa09;
    background: #f9ffdd;
}
.member-page .member-attachment__container__list__item.potential.error {
    border: 1px solid #b10909;
    background: #ffdddd;
}
.member-page .member-attachment__container__list__item.potential.success {
    border: 1px solid #27c739;
    background: #deffd9;
}
.member-page .member-attachment__container__list__item.actual.error {
    border: 1px solid #959595;
    background: #ededed;
}
.member-page .member-attachment__container__list__item__info>div:first-child>div:first-child {
    color: #636e7a;
}
.member-page .member-attachment__container__list__item__info>div:first-child>div:last-child {
    font-size: 0.8rem;
    max-width: 140px;
    color: #151515;
}
.member-page .member-attachment__container__list__item__info>div:first-child>div:last-child input {
    background: #f9ffdd;
    border: none;
    /* border-bottom: 1px solid #cacaca; */
}
.member-page .member-attachment__container__list__item__info>div:first-child>div:last-child p:last-child {
    font-size: 0.7rem;
    color: #6f7374;
    padding-top: 0.3em;
}
.member-page .member-attachment__container__list__item__info>div:first-child>div:last-child p:last-child span {
    font-style: normal;
}
.member-page .member-attachment__container__list__item__info>div:first-child>div:last-child p:last-child span.overload {
    color: red;
    font-weight: bold;
    font-size: smaller;
}
.member-page .member-attachment__container__list__item__info>p span {
    display: none;
    color: #9da2a8;
    padding: 0.3em;
    cursor: pointer;
}
.member-page .member-attachment__container__list__item__info>p span.retry {
    color: #333;
}
.member-page .member-attachment__container__list__item.potential .member-attachment__container__list__item__info>p span.potential {
    display: flex;
}
.member-page .member-attachment__container__list__item.actual .member-attachment__container__list__item__info>p span.actual {
    display: flex;
}
.member-page .member-attachment__container__list__item.actual .member-attachment__container__list__item__info>p span.retry {
    display: none;
}
.member-page .member-attachment__container__list__item.actual.error .member-attachment__container__list__item__info>p span {
    display: none;
}
.member-page .member-attachment__container__list__item.actual.error .member-attachment__container__list__item__info>p span.retry {
    display: flex;
}
.member-page .member-attachment__container__list__item.potential.error .member-attachment__container__list__item__info>p span.upload {
    display: none;
}
.member-page .member-attachment__container__list__item.active .member-attachment__container__list__item__info>p span {
    display: none !important;
}
.member-page .member-attachment__container__list__item__info>p span.cancel:hover,
.member-page .member-attachment__container__list__item__info>p span.delete:hover {
    color: #cb0606;
    transition: 0.3s;
}
.member-page .member-attachment__container__list__item__info>p span.upload:hover,
.member-page .member-attachment__container__list__item__info>p span.download:hover,
.member-page .member-attachment__container__list__item__info>p span.retry:hover {
    color: #0058b7;
    transition: 0.3s;
}
.member-page .member-attachment__container__list__item__info>p span.show:hover {
    color: #59b700;
    transition: 0.3s;
}
.member-page .member-attachment__container__list__item__progress {
    display: none;
    background: #e2e3e7;
    height: 5px;
    margin-top: 0.6em;
    border-radius: 3px;
    overflow: hidden;
}
.member-page .member-attachment__container__list__item.active .member-attachment__container__list__item__progress {
    display: block;
}
.member-page .member-attachment__container__list__item__progress p {
    background: #137242;
    height: 100%;
    transition: 0.3s;
}
@media print {
    @page {
        margin: 0 !important;
    }
    body {
        width: unset !important;
        height: unset !important;
        margin: 0 !important;
    }
    .member-page.base-container {
        height: 100% !important;
    }
    .member-page .automation-segment {
        height: fit-content !important;
        overflow: unset !important;
    }
    .member-page .member-info {
        height: fit-content !important;
    }
    .member-page .member-info.member-info--view .member-info__rest__form .member-info__input div select {
        -moz-appearance: none;
        -webkit-appearance: none;
    }
}
/* ---------------------------- */
/* ----- Member-Page -----E */
/* ---------------------------- */


/* ---------------------------- */
/* S------- Pannel-Page ------- */
/* ---------------------------- */
.base-container.pannel-page {
    display: block;
}
.pannel-page .body-segment {
    background: #f6f7f9;
    height: 100%;
    width: 100%;
    padding-bottom: 10em;
    max-width: 600px;
    margin-inline: auto;
}
.pannel-page .nav-segment {
    position: sticky;
    bottom: 1em;
    width: 85%;
    left: 0;
    right: 0;
    margin-inline: auto;
    background: #192028;
    color: #fff;
    border-radius: 11px;
    box-shadow: 0 0 2px #04162c;
    overflow: hidden;
    max-width: 500px;
}
.pannel-page .nav-segment .nav-segment__item {
    position: relative;
}
.pannel-page .nav-segment .nav-segment__item a {
    width: 100%;
    padding-block: 0.7em 0.5em;
    padding-inline: 0.3em;
}
.pannel-page .nav-segment .nav-segment__item a:hover {
    background: #213144;
    transition: .4s;
}
.pannel-page .nav-segment .nav-segment__item a span {
    justify-content: center;
}
.pannel-page .nav-segment .nav-segment__item a span:last-child {
    font-size: 0.55rem;
    color: #f3f3f3;
}
.pannel-page .nav-segment .nav-segment__item p {
    visibility: hidden;
    position: absolute;
    top: 0;
    width: 40%;
    height: 3px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background: #fff;
}
.pannel-page .nav-segment .nav-segment__item.active p {
    visibility: visible;
}
.pannel-page .nav-segment .nav-segment__item.exit p {
    color: #ff3131;
}
.pannel-page .nav-segment .nav-segment__item.exit a {
    color: #ff3131;
}
.pannel-page .nav-segment .nav-segment__item.exit a span:last-child {
    color: #ffd0d0;
}

.pannel-page .body-segment > div {
    padding: 1em;
    padding-top: 0;
}
.pannel-page .header-segment {
    background: #f6f7f9;
    padding: 1em;
    padding-bottom: 0.2em;
    border-bottom: 1px solid #eee;
    max-width: 600px;
    margin-inline: auto;
}
.pannel-page .header-segment .header__profile div:last-child p {
    font-size: 0.8rem;
}
.pannel-page .header-segment .header__profile div:last-child p:first-child {
    font-weight: bold;
}
.pannel-page .header-segment .header__profile div:last-child p:last-child {
    padding-top: 0.2em;
    color: #ababab;
    font-size: 0.7rem;
}
.pannel-page .header-segment .header__alert span {
    padding: 0.3em 0.5em;
    font-size: 1.1rem;
    color: #192028;
    cursor: pointer;
    border-radius: 5px;
}
.pannel-page .header-segment .header__alert span:hover {
    color: #0055c3;
    background: #c4dbff;
    transition: .5s;
}

.pannel-page .body__overview .overview__info {
    background: #191919;
    color: #fff;
    border-radius: 8px;
    margin-top: 1em;
    padding: 0.8em;
}
.pannel-page .body__overview .overview__info h2 {
    font-size: 0.6rem;
    font-weight: normal;
    padding-bottom: 1em;
    color: #adadad;
}
.pannel-page .body__overview .overview__info h2 span:last-child {
    font-weight: bold;
    padding: 0.3em 0.7em;
    border-radius: 3px;
    font-size: 0.55rem;
}
.pannel-page .body__overview .overview__info h2.st1 span:last-child,
.pannel-page .body__overview .overview__info h2.st2 span:last-child {
    background: #042f0c;
    color: #3daf56;
    border: 1px solid #063e12;
}
.pannel-page .body__overview .overview__info h2.st0 span:last-child {
    background: #2f0404;
    color: #af3d3d;
    border: 1px solid #3e0606;
}
.pannel-page .body__overview .overview__info .overview__info__score__body {
    padding-bottom: 0.8em
}
.pannel-page .body__overview .overview__info .overview__info__score__body p:first-child {
    font-size: 1.6rem;
    font-weight: bold;
    color: #ffd700;
}
.pannel-page .body__overview .overview__info .overview__info__score__body p:last-child {
    font-size: 0.75rem;
    color: #eee;
}
.pannel-page .body__overview .overview__info .overview__info__action button {
    background: #2b2b2b;
    color: #e5e5e5;
    border: 1px solid #373737;
    padding: 0.6em 1em;
    font-size: 0.65rem;
    border-radius: 3px;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    min-width: 90px;
}

.pannel-page .body__overview .overview__info .overview__info__action button:hover {
    background: #eee;
    color: #2b2b2b;
    transition: .3s;
}
.pannel-page .body__overview .overview__info .overview__info__action button.disable {
    pointer-events: none;
}
.pannel-page .body__overview .overview__info .overview__info__action button p span:nth-child(2) {
    letter-spacing: 0.5px;
}
.pannel-page .body__overview .overview__info .overview__info__action button .drop-down-menu {
    position: absolute;
    inset-inline-start: 0;
}
.pannel-page .body__overview .overview__info .overview__info__action button .drop-down-menu ul {
    padding-top: 0.3em;
    border-radius: 3px;
}

.pannel-page .body__overview .overview__info .overview__info__action button .drop-down-menu ul li {
    text-align: center;
    background: #4b4b4b;
    width: 100%;
    padding-block: 0.5em;
    border-bottom: 1px solid #8d8d8d;
    color: #eee;
    letter-spacing: 1px;
}
.pannel-page .body__overview .overview__info .overview__info__action button .drop-down-menu ul li:hover {
    background: #23532e;
    transition: 0.3s;
}



.pannel-page .body__overview .overview__info .overview__info__note p {
    font-size: 0.6rem;
    text-align: center;
    padding-top: 1.8em;
    color: #b5b5b5;
    padding-top: 0.5em;
}

.pannel-page .body__overview .overview__accounting {
    margin-top: 1.5em;
}
.pannel-page .body__overview .overview__accounting h2 {
    font-size: 0.8rem;
    color: #1e1e1e;
    padding-bottom: 0.8em;
}
.pannel-page .body__overview .overview__accounting h2 span:last-child i {
    padding-inline-start: 0.3em;
}
.pannel-page .body__overview .overview__accounting h2 span:last-child:hover i {
    padding-inline-start: 0.5em;
    transition: .3s;
}
.pannel-page .body__overview .overview__accounting .overview__accounting__body {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 2px #e1e1e1;
}
.pannel-page .body__overview .overview__accounting .overview__accounting__body  > div p:nth-child(1) {
    display: none;
    font-size: 0.5rem;
    border: 1px solid #eee;
    background: #fbfbfb;
    color: #a3a3a3;
    width: fit-content;
    padding: 0.2em 0.5em;
    border-radius: 3px;
    margin-bottom: 0.7em;
    margin-inline: auto;
}
.pannel-page .body__overview .overview__accounting .overview__accounting__body  > div p:nth-child(2) {
    font-weight: bold;
}
.pannel-page .body__overview .overview__accounting .overview__accounting__body  > div.accounting__pay p:nth-child(2) {
    color: #0c500c;
}
.pannel-page .body__overview .overview__accounting .overview__accounting__body  > div.accounting__debt p:nth-child(2) {
    color: #500c0c;
}

.pannel-page .body__overview .overview__accounting .overview__accounting__body  > div {
    padding: 0.8em 0.5em;
}
.pannel-page .body__overview .overview__accounting .overview__accounting__body  > div.accounting__pay {
    border-inline-end: 1px solid #eee;
}
.pannel-page .body__overview .overview__accounting .overview__accounting__body  > div.accounting__pay:hover {
    background: #f2fffb;
    transition: 0.4s;
}
.pannel-page .body__overview .overview__accounting .overview__accounting__body  > div.accounting__debt:hover {
    background: #fff2f2;
    transition: 0.4s;
}

.pannel-page .body__overview .overview__accounting .overview__accounting__body  > div p:nth-child(3){
    text-align: center;
    font-size: 0.7rem;
    word-spacing: -0.5px;
    color: #bfbfbf;
    padding-top: 0.5em;
}
.pannel-page .body__overview .overview__accounting .overview__accounting__body  > div.accounting__pay p:nth-child(3) span:first-child{
    color: #0c500c;
}
.pannel-page .body__overview .overview__accounting .overview__accounting__body  > div.accounting__debt p:nth-child(3) span:first-child{
    color: #500c0c;
}

.pannel-page .body__overview .overview__project {
    margin-top: 1.5em;
}
.pannel-page .body__overview .overview__project h2 {
    font-size: 0.8rem;
    color: #1e1e1e;
    padding-bottom: 0.8em;
}
.pannel-page .body__overview .overview__project h2 span:last-child {
    color: #6b4dd6;
    font-weight: normal;
    font-size: 0.75rem;
    cursor: pointer;
    margin-inline-end: 0.3em;
}
.pannel-page .body__overview .overview__project h2 span:last-child i {
    padding-inline-start: 0.3em;
}
.pannel-page .body__overview .overview__project h2 span:last-child:hover i {
    padding-inline-start: 0.5em;
    transition: .3s;
}
.pannel-page .body__overview .overview__project .overview__project__body {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 2px #e1e1e1;
    padding: 0.5em;
}
.pannel-page .body__overview .overview__project .overview__project__body>div:first-child {
    /* flex-basis: 50%; */
    position: relative;
}
.pannel-page .body__overview .overview__project .overview__project__body>div:first-child img {
    cursor: zoom-in;
}
.pannel-page .body__overview .overview__project .overview__project__body>div:first-child img:focus {
    /* width: 300px; */
    transform-origin: 100% 0;
    transform: scale(4);
    transition: 0.3s;
}
.pannel-page .body__overview .overview__project .overview__project__body>div:last-child p:nth-child(1) {
    font-weight: bold;
    font-size: 0.9rem;
    border-bottom: 1px dotted #e1e1e1;
    padding-bottom: 0.2em;
}
.pannel-page .body__overview .overview__project .overview__project__body>div:last-child p:nth-child(2),
.pannel-page .body__overview .overview__project .overview__project__body>div:last-child p:nth-child(3),
.pannel-page .body__overview .overview__project .overview__project__body>div:last-child p:nth-child(4) {
    font-size: 0.7rem;
    padding-top: 0.7em;
}
.pannel-page .body__overview .overview__project .overview__project__body>div:last-child p span:nth-child(2) {
    font-weight: bold;
}

.pannel-page .body__overview .overview__scores {
    margin-top: 1.5em;
}
.pannel-page .body__overview .overview__scores h2 {
    font-size: 0.8rem;
    color: #1e1e1e;
    padding-bottom: 0.8em;
}
.pannel-page .body__overview .overview__scores .overview__scores__body {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 2px #e1e1e1;
    padding: 0.5em;
}
.pannel-page .body__overview .overview__scores .overview__scores__body table {
    text-align: center;
    border-collapse: collapse;
}
.pannel-page .body__overview .overview__scores .overview__scores__body tr {
    border-bottom: 1px solid #ebedf2;
    color: #222222;
    font-size: 0.75rem;
}
.pannel-page .body__overview .overview__scores .overview__scores__body th {
    color: #9f9f9f;
    font-size: 0.7rem;
    background: #eee;
    padding: 0.7em 0.4em;
}
.pannel-page .body__overview .overview__scores .overview__scores__body td {
    padding: 0.7em 0.4em;
}
.pannel-page .body__overview .overview__scores .overview__scores__body tr.selected td {
    background: #d5efff;
}
.pannel-page .body__overview .overview__scores .overview__scores__body td:last-child {
    font-size: smaller;
    font-weight: bold;
    color: #918859;
}
.pannel-page .body__overview .overview__scores .overview__scores__body tr.selected td {
    color: #598b91;
}
.pannel-page .body__overview .overview__scores .overview__scores__body tr:hover td {
    background: #f5f5f5;
    transition: .3s;
}


.pannel-page .body__transaction {
    display: none;
}

.pannel-page .body__transaction .transaction__chart {
    margin-top: 1em;
}
.pannel-page .body__transaction .transaction__chart .transaction__chart__body {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 2px #e1e1e1;
    padding: 0.5em;
}


.pannel-page .body__transaction .transaction__list {
    margin-top: 1em;
}
.pannel-page .body__transaction .transaction__list .transaction__list__body table {
    text-align: center;
    border-collapse: collapse;
}
.pannel-page .body__transaction h2 {
    /* display: none; */
    font-size: 0.8rem;
    color: #1e1e1e;
    padding-bottom: 0.8em;
}
.pannel-page .body__transaction .transaction__list .transaction__list__body {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 2px #e1e1e1;
    padding: 0.5em;
}
.pannel-page .body__transaction .transaction__list .transaction__list__body tr {
    border-bottom: 1px solid #ebedf2;
    color: #222222;
    font-size: 0.75rem;
}
.pannel-page .body__transaction .transaction__list .transaction__list__body th {
    color: #9f9f9f;
    font-size: 0.7rem;
    background: #eee;
    padding: 0.7em 0.4em;
}
.pannel-page .body__transaction .transaction__list .transaction__list__body td {
    padding: 0.7em 0.4em;
}
.pannel-page .body__transaction .transaction__list .transaction__list__body tr.selected td {
    background: #d5efff;
}
.pannel-page .body__transaction .transaction__list .transaction__list__body td:last-child {
    font-size: smaller;
    font-weight: bold;
    color: #918859;
}
.pannel-page .body__transaction .transaction__list .transaction__list__body tr:hover td {
    background: #f5f5f5;
    transition: .3s;
}



.pannel-page .body__installment {
    display: none;
}
.pannel-page .body__installment .installment__list {
    margin-top: 1em;
}

.pannel-page .body__installment .installment__list h2 {
    font-size: 0.8rem;
    color: #1e1e1e;
    padding-bottom: 0.8em;
}


.pannel-page .body__installment .installment__body__list {
    background: #f1fbfb;
    padding: 0.7em;
    border-radius: 5px;
    position: relative;
    margin-inline: auto;
}
.pannel-page .body__installment .installment__body__list--empty {
    color: #a0cbcb;
    width: 100%;
    max-width: unset;
    border-radius: 11px;
    box-shadow: 0 0 3px #d5d5d5;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__header {
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 3px #b3b3b3;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__header h3 {
    padding: 0.7em;
    color: #00acd5;
    position: relative;
    font-size: 0.75rem;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__header h3 input {
    border: none;
    field-sizing: content;
    pointer-events: none;
}
.pannel-page .body__installment .installment__body__list.edit .installment__body__list__header h3 input {
    border-bottom: 1px solid #92eaff;
    padding-bottom: 0.2em;
    pointer-events: auto;
    padding-inline: 0.3em;
}
.pannel-page .body__installment .installment__body__list.edit .installment__body__list__header h3 input::placeholder {
    color: #87b9c5;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__header h3 span.add {
    cursor: pointer;
    font-size: 1rem;
    display: none;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__header h3 span.remove {
    color: #f72b2b;
    font-size: 0.9rem;
    cursor: pointer;
    display: none;
}
.pannel-page .body__installment .installment__body__list.edit .installment__body__list__header h3 span.add,
.pannel-page .body__installment .installment__body__list.edit .installment__body__list__header h3 span.remove {
    display: flex;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__header h3 span:last-child {
    display: none;
    cursor: pointer;
    position: absolute;
    inset-inline-end: -10px;
    height: 100%;
    align-items: center;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__header h3 span:last-child:hover {
    color: #00523c;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__header h3:hover span:last-child {
    display: flex;
}
.pannel-page .body__installment .installment__body__list.edit .installment__body__list__header h3:hover span:last-child {
    display: none !important;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__header p {
    padding: 0.7em;
    color: #838383;
    font-size: smaller;
    font-weight: bold;
    font-size: 0.8rem;
}
.pannel-page .body__installment .installment__body__list.edit .installment__body__list__header p {
    display: none;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__header h4 {
    display: none;
    padding-inline: 0.5em;
}
.pannel-page .body__installment .installment__body__list.edit .installment__body__list__header h4 {
    display: flex;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__header h4 span {
    font-size: 0.65rem;
    padding: 0.4em 0.8em;
    border-radius: 3px;
    word-spacing: -1px;
    font-weight: bold;
    cursor: pointer;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__header h4 span:first-child {
    background: #fff;
    border: 1px solid #830202;
    color: #710909;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__header h4 span:last-child {
    background: #095d71;
    border: 1px solid #026a83;
    color: #fff;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__header h4 span:first-child:hover {
    background: #ffdcdc;
    transition: 0.3s;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__header h4 span:last-child:hover {
    background: #032e39;
    transition: 0.3s;
}

.pannel-page .body__installment .installment__body__list .installment__body__list__table {
    margin-top: 0.8em;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 1px #b3b3b3;
    padding: 0.5em;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__table table {
    border: 1px solid #ebedf2;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__table thead th {
    background: #161616;
    color: #9f9f9f;
    padding: 0.8em;
    font-size: 0.6rem;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__table tbody tr {
    border-bottom: 1px solid #ebedf2;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__table tbody tr[data-state="s0"] td {
    background: #313131 !important;
    color: #fff;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__table tbody tr:hover td {
    background: #fafafa;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__table tbody tr:last-child {
    border-bottom: none;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__table tbody tr.error td {
    background: #ffe6e6
}

.pannel-page .body__installment .installment__body__list .installment__body__list__table tbody td {
    font-size: 0.75rem;
    padding: 0.6em;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__table tbody tr.empty {
    background: #efefef;
    font-size: 0.7rem;
    word-spacing: -1px;
    color: #939393;
}

.pannel-page .body__installment .installment__body__list .installment__body__list__table tbody td.date span {
    color: #656565;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__table tbody td.title {
    text-align: start;
    font-size: 0.7rem;
    color: #000000;
    word-spacing: -1px;
    font-weight: bold;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__table tbody td.state {
    padding: 0.3em;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__table tbody td.state span {
    padding: 0.3em;
    font-size: smaller;
}

.pannel-page .body__installment .installment__body__list .installment__body__list__table tbody tr[data-state='s0'] td.state span {
    background: #b1b1b1;
    border: 1px solid #575757;
    color: #831d1d;
}
.pannel-page .body__installment .installment__body__list .installment__body__list__table tbody tr[data-state='s1'] td.state span {
    background: #f3f9f4;
    border: 1px solid #b2b9b3;
    color: #07371d;
}

@media screen and (min-width: 600px) {
    .pannel-page .header-segment {
        max-width: unset;
        margin-inline: unset;
    }
    .pannel-page .body-segment {
        max-width: unset;
        margin-inline: unset;
    }

    .pannel-page .body-segment > .body__overview {
        display: flex !important;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1em;
    }
    .pannel-page .body-segment > .body__overview > div {
        flex-grow: 1;
    } 
    .pannel-page .body__transaction {
        display: flex !important;
        justify-content: space-between;
        gap: 1em;
    }
    .pannel-page .body__transaction > div {
        flex-grow: 1;
    }
    .pannel-page .body__transaction .transaction__chart {
        flex-basis: 10%;
    }
    
    .pannel-page .body__overview .overview__project h2 span:last-child {
        display: none;
    }
    .pannel-page .body__installment {
        display: block !important;
    }
    .pannel-page .nav-segment .nav-segment__item.installment {
        display: none;
    }



}


/* ---------------------------- */
/* ------- Pannel-Page -------E */
/* ---------------------------- */


/* ---------------------------- */
/* S----- Members-Page ----- */
/* ---------------------------- */
.members-page .automation-segment {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    gap: 1em;
}
.members-page .automation-segment>div {
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 2px #d6d6d6;
    overflow: hidden;
    height: 100%;
    position: relative;
    padding: 1em;
    flex-grow: 1;
}
@media screen and (max-width: 1200px) {
    .members-page .automation-segment {
        display: block;
    }
    .members-page .automation-segment>div {
        width: 100%;
        flex-basis: auto !important;
        flex-grow: unset !important;
        margin-bottom: 2em !important;
        height: fit-content !important;
    }
    .members-page .members-overview {
        height: fit-content !important;
        padding-bottom: 1em;
    }
}
.members-page .members-overview {
    flex-basis: 22%;
}
.members-page .members-overview > hr {
    margin-top: 0.8em;
    border-top: 1px dashed #9a9a9a;
}
.members-page .members-list {
    flex-basis: 73%;
}
.members-page .members-list>.members-list__header h2 {
    font-size: 1rem;
}
.members-page .members-list>.members-list__table {
    padding-top: 1.5em;
}
.members-page .members-list>.members-list__table table {
    text-align: center;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.members-page .members-list .members-list__table tr,
.members-page .members-list .members-list__table td {
    padding: 0.3em;
}
.members-page .members-list .members-list__table thead tr th {
    font-weight: normal;
    color: #fff;
    background: #000;
    padding: 0.7em 0.4em;
}
.members-page .members-list .members-list__table thead tr th.sort {
    cursor: row-resize;
}
.members-page .members-list .members-list__table thead tr th.sort:hover {
    background: #242424;
    transition: 0.3s;
}
.members-page .members-list .members-list__table thead tr th p span.sort {
    display: none;
    color: #b9b9b9;
}
.members-page .members-list .members-list__table thead tr th.sort-up p span.sort-up {
    display: flex;
}
.members-page .members-list .members-list__table thead tr th.sort-down p span.sort-down {
    display: flex;
}
.members-page .members-list .members-list__table tbody tr {
    border-bottom: 1px dotted #c5c5c5;
}
.members-page .members-list .members-list__table tbody tr:hover {
    background: #f3f3f3;
    transition: .2s;
}
.members-page .members-list .members-list__table tbody td {
    padding: 0.9em 0.2em;
}
.members-page .members-list .members-list__table tbody td.case {
    cursor: pointer;
}
.members-page .members-list .members-list__table tbody td.case:hover {
    background: #e7e7e7;
    transition: .3s;
}
.members-page .members-list .members-list__table tbody td.empty {
    background: #fff2f2;
    color: #f70000;
}
.members-page .members-list .members-list__table tbody td.debt {
    position: relative;
}
.members-page .members-list .members-list__table tbody td.debt span.cheque--active {
    position: absolute;
    left: -13px;
    top: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    /* font-size: smaller; */
    color: #810baf;
}
.members-page .members-list .members-list__table tbody td.action {
    cursor: pointer;
}
.members-page .members-list .members-list__table tbody td.action:hover {
    color: #1c4bc5;
    background: #eee;
    transition: 0.3s;
}
.members-page .members-overview__title h2 {
    font-size: 1rem;
    padding-bottom: 1em;
    box-shadow: 0 2px 3px -3px #989898;
    margin-bottom: 1em;
}
.members-page .members-overview__filter {
    /* border-bottom: 1px dashed #9a9a9a; */
    padding-bottom: 0.3em;
}
.members-page .members-overview__filter>.members-overview__filter__project {
    box-shadow: 0 0 3px -1px #686868;
    border-radius: 3px;
    padding: 0.4em;
}
.members-page .members-overview__filter h3 {
    font-size: 0.7rem;
    color: #989898;
    font-weight: normal;
    padding-bottom: 0.7em;
}
.members-page .members-overview__filter select {
    width: 100%;
    padding: 0.5em;
    border-radius: 4px;
    border: 1px solid #aeaeae;
    color: #555555;
    font-size: 0.75rem;
    font-weight: bold;
}
.members-page .members-overview__filter__user {
    box-shadow: 0 0 3px -1px #686868;
    border-radius: 3px;
    padding: 0.4em;
    margin-top: 1em;
}
.members-page .members-overview__filter__user>div {
    overflow: hidden;
    border: 1px solid #aeaeae;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    border: 1px solid #cbcbcb;
    font-weight: bold;
}
.members-page .members-overview__filter__user>div>* {
    height: 100%;
    border-radius: 0;
    border: none;
}
.members-page .members-overview__filter__user>div select {
    width: 30%;
    color: #000;
    text-align: center;
}
.members-page .members-overview__filter__user>div input {
    width: 70%;
    position: absolute;
    inset-inline-start: 0;
    padding-inline: 0.7em;
    font-size: 0.75rem;
    direction: ltr;
    background: #f3f3f3;
    text-align: end;
}
.members-page .members-overview__filter__user.name-search >div input {
    direction: rtl;
    inset-inline-start: unset;
    inset-inline-end: 0;
    text-align: start;
}

.members-page .members-overview__filter__user>div>span {
    display: none;
    position: absolute;
    inset-inline-end: 5px;
    color: #fa0000;
    height: unset;
    padding: 0.3em;
    border-radius: 3px;
    cursor: pointer;
}
.members-page .members-overview__filter__user>div.name-full>span {
    display: flex;
}
.members-page .members-overview__filter__user>div.name-full>span:hover {
    background: #fec2c2;
    transition: 0.3s;
}
.members-page .members-overview__filter__user>div button {
    position: absolute;
    inset-inline-end: 0;
    padding-top: 1px;
    border: none;
    background: none;
    color: #8d8d8d;
    height: 100%;
    padding-inline: 9px;
    cursor: pointer;
    color: #1874ec;
    font-size: 0.9rem;
}
.members-page .members-overview__filter__user>div button.accept {
    display: block;
    /* background: #333;
    border: 1px solid #333;
    border-radius: 1px;
    
    color: #fff; */
}
.members-page .members-overview__filter__user>div button.accept:hover {
    background: #e9f7ff;
    transition: 0.2s;
}
.members-page .members-overview__filter__user>div button.reset {
    display: none;
    color: #db0000;
}
.members-page .members-overview__filter__user>div button.reset:hover {
    background: #ffd3d3;
    transition: 0.3s;
}
.members-page .members-overview__filter__user.active button.reset {
    display: block;
}
.members-page .members-overview__filter__user.active>div button.accept {
    display: none;
}
.members-page .members-overview__filter__user.active>div select {
    pointer-events: none;
    color: #6d6d6d;
}
.members-page .members-overview__filter__user.active>div input {
    pointer-events: none;
    color: #545454;
    background: #fdfdfd;
}
.members-page .members-overview__filter__user.name-search>div button {
    display: none !important;
}
.members-page .members-overview__transmit {
    box-shadow: 0 0 3px -1px #686868;
    border-radius: 3px;
    padding: 0.4em;
    margin-top: 1em;
}
.members-page .members-overview__transmit h3 {
    font-size: 0.7rem;
    color: #989898;
    font-weight: normal;
    padding-bottom: 0.7em;
}
.transmit__case_field {
    background: #eee;
    padding: 0.1em;
    border-radius: 3px;
    border: 1px solid #c3c3c3;
}
.transmit__case_field input {
    border: none;
    background: #eee;
    font-size: 0.85rem;
    padding-inline: 1em;
    direction: rtl;
    font-weight: bold;
    text-align: center;
    width: 35%;
}
.transmit__case_field input::placeholder {
    font-weight: normal;
    font-size: 0.7rem;
}
.transmit__case_field button {
    background: #d8ffff;
    border: 1px solid #208c8b;
    padding: 0.4em 0.8em;
    font-size: 0.75rem;
    border-radius: 2px;
    color: #0a687c;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    width: 65%;
}
.transmit__case_field button:hover {
    background: #fff;
    transition: 0.3s;
}
.transmit__case_field p {
    width: 65%;
    display: none;
    text-align: center;
    font-weight: bold;
    padding: 0.4em;
    color: #cf7272;
    font-size: 0.75rem;
}
.transmit-section.active .transmit__case_field {
    pointer-events: none;
}
.transmit-section.active .transmit__case_field input {
    color: #cf7272;
}
.transmit-section.active .transmit__case_field p {
    display: block;
}
.transmit-section.active .transmit__case_field button {
    display: none;
}
.transmit__target_field {
    display: none;
    padding-block: 0.2em;
    position: relative;
}
.transmit-section.active .transmit__target_field {
    display: block;
}
.transmit__target_field div:first-child {
    border: 1px solid #878787;
    border-radius: 2px;
    overflow: hidden;
}
.transmit__target_field div:first-child input {
    font-size: 0.75rem;
    padding: 0.4em;
    text-align: center;
    border: none;
    font-weight: bold;
}
.transmit__target_field div:first-child input::placeholder {
    font-weight: normal;
    font-size: smaller;
}
.transmit__target_field div:first-child input:first-child {
    width: 25%;
    background-color: #e0f2fe;
}
.transmit__target_field div:first-child input:last-child {
    width: 75%;
}
.transmit__target_field div.drop-down-menu {
    position: relative;
}
.transmit__target_field div.drop-down-menu ul {
    background: #eaeaea;
    max-height: 159px;
}
.transmit__target_field div.drop-down-menu ul li {
    padding: 0.3em;
    background: #fff;
    padding: 0.4em;
    background: #e8fdfe;
    font-size: 0.7rem;
    border-radius: 2px;
    color: #097569;
    cursor: pointer;
    border: 1px solid #66e7ed;
    margin-bottom: 0.3em;
    margin-inline: 0.5em;
}
.transmit__target_field div.drop-down-menu ul li:hover {
    background: #fff;
    transition: 0.3s;
}
.transmit__target_field div.drop-down-menu ul li:first-child {
    margin-top: 0.3em;
}
.transmit__target_field div.drop-down-menu ul li span:first-child {
    width: 25%;
    text-align: center;
    justify-content: center;
}
.transmit__target_field div.drop-down-menu ul li span:last-child {
    width: 75%;
    text-align: center;
    justify-content: center;
}
.transmit__target_action {
    display: none;
    padding-top: 0.5em;
}
.transmit__target_action .general-button.general-button--light:hover {
    background: #feacac;
    color: #db0505;
    transition: 0.3s;
}
.transmit-section.active .transmit__target_action {
    display: flex;
}
.members-page .members-overview__chart {
    padding-top: 1em;
}
.members-page .members-overview__chart>button {
    text-align: center;
    border: 1px solid #0a2c51;
    padding: 0.6em 0.5em;
    background: #0a2c51;
    color: #fff;
    font-size: 0.75rem;
    height: 100%;
    width: 100%;
    border-radius: 3px;
    cursor: pointer;
}
.members-page .members-overview__chart>button:hover {
    font-weight: bolder;
    color: #0a2c51;
    background: #fff;
    transition: 0.3s;
}

.members-page .members-overview__chart {
    box-shadow: 0 0 3px -1px #686868;
    border-radius: 3px;
    padding: 0.4em;
    margin-top: 1em;
    max-height: 150px;
    position: relative;
}
.members-page .members-overview__chart > canvas {
    z-index: 2;
}
.members-page .members-overview__chart > p {
    position: absolute;
    font-weight: bold;
    font-size: smaller;
    color: #9b640d;
    gap: 0.3em;
}

.members-page .members-overview__total {
    box-shadow: 0 0 3px -1px #686868;
    border-radius: 3px;
    padding: 0.7em 0.5em;
    margin-top: 1em;
}
.members-page .members-overview__total h3 {
    font-size: 0.7rem;
    color: #989898;
    font-weight: normal;
    padding-bottom: 1em;
}

.members-page .members-overview__total .members-overview__total__body > div {
    padding-bottom: 0.6em;
}
.members-page .members-overview__total .members-overview__total__body > div.total__item p:first-child {
    font-size: 0.7rem;
    font-weight: bold;
}
.members-page .members-overview__total .members-overview__total__body > div.total__item.pay p:first-child {
    color: #008360;
}
.members-page .members-overview__total .members-overview__total__body > div.total__item.debt p:first-child {
    color: #830000;
}
.members-page .members-overview__total .members-overview__total__body > div.total__item.over p:first-child {
    color: #003983;
}
.members-page .members-overview__total .members-overview__total__body > div.total__item p:last-child {
    font-size: 0.8rem;
}

.members-page .members-overview__total .members-overview__total__body > div.state {
    border-radius: 3px;
    margin-top: 0.7em;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.5em;
    position: relative;
}
.members-page .members-overview__total .members-overview__total__body > div.state.ok {
    background: #e4fff8;
    border: 1px solid #089d57;
    color: #022f23;
}
.members-page .members-overview__total .members-overview__total__body > div.state.low {
    background: #ffe4e4;
    border: 1px solid #9d0808;
    color: #2f0202;
}
.members-page .members-overview__total .members-overview__total__body > div.state > p:first-child span:first-child i {
    display: none;
}
.members-page .members-overview__total .members-overview__total__body > div.state.ok > p:first-child span:first-child i:first-child {
    display: flex;
}
.members-page .members-overview__total .members-overview__total__body > div.state.low > p:first-child span:first-child i:last-child {
    display: flex;
}



@media print {
    .members-page .members-overview,
    .members-page .members-list .members-list__header {
        display: none;
    }
    .members-page .members-list>.members-list__table {
        padding-top: 0;
    }
    .members-page .members-list .members-list__table tbody td {
        font-size: smaller;
        padding: 0.7em 0.4em;
    }
    .members-page .members-list .members-list__table thead th:nth-child(9),
    .members-page .members-list .members-list__table tbody td.action {
        display: none;
    }
}
/* ---------------------------- */
/* ----- Members-Page -----E */
/* ---------------------------- */

/* ---------------------------- */
/* S----- Cases-Page ----- */
/* ---------------------------- */
.cases-page .automation-segment {
    display: block;
    position: relative;
}
.cases-page .automation-segment .cases-overview {
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 2px #d6d6d6;
    overflow: hidden;
    position: relative;
    padding: 1em;
    width: 100%;
    margin-bottom: 1em;
    /* min-height: 10px; */
}

.cases-page .automation-segment .cases-body {
    min-height: 10px;
}

.cases-page .automation-segment .cases-list {
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 2px #d6d6d6;
    overflow: hidden;
    height: 100%;
    position: relative;
    padding: 1em;
}
@media screen and (max-width: 1200px) {
    .cases-page .cases-overview {
        padding-bottom: 1em;
    }
}
@media screen and (max-width: 700px) {

    .cases-page .cases-overview>div:last-child {
        justify-content: center;
    }
    .cases-page .cases-overview>div:last-child>div:first-child,
    .cases-page .cases-overview>div:last-child>div:last-child {
        flex-grow: 1;
        flex-basis: 100%;
        text-align: center;
    }
    .cases-page .cases-overview>div:last-child>div:nth-child(2),
    .cases-page .cases-overview>div:last-child>div:nth-child(3) {
        flex-basis: 40%;
        flex-grow: 1;
    }
    .cases-page .cases-overview>div:last-child>div h2 {
        text-align: center;
    }
}

.cases-page .cases-list>.cases-list__header select {
    border: none;
    font-size: 0.9rem;
    font-weight: bolder;
    text-align: start;
    cursor: pointer;
    background-color: unset;
}
.cases-page .cases-list>.cases-list__header select option {
    font-size: smaller;
}
.cases-page .cases-list>.cases-list__header>div a,
.cases-page .cases-list>.cases-list__header>div p {
    cursor: pointer;
    font-size: 1.1rem;
    margin-inline-start: 0.7em;
    color: #022e0a;
}
.cases-page .cases-list>.cases-list__header button {
    width: unset;
    height: unset;
    gap: 0.2em;
}
.cases-page .cases-list>.cases-list__header button span:first-child {
    font-size: 0.9rem;
}
.cases-page .cases-list>.cases-list__header button span:last-child {
    color: #434343;
    font-weight: bold;
    max-width: 0;
    height: 17px;
    transition: 0.2s;
    overflow: hidden;
    opacity: 0;
}
.cases-page .cases-list>.cases-list__header button:hover span:last-child {
    padding-inline-start: 0.5em;
    max-width: 100px;
    opacity: 1;
    transition: 0.6s;
}
.cases-page .cases-list>.cases-list__table {
    padding-top: 1.5em;
}
.cases-page .cases-list>.cases-list__table table {
    text-align: center;
    border-collapse: collapse;
    font-size: 0.75rem;
}
.cases-page .cases-list .cases-list__table tr,
.cases-page .cases-list .cases-list__table td {
    padding: 0.3em;
}
.cases-page .cases-list .cases-list__table thead tr th {
    font-weight: normal;
    color: #fff;
    background: #000;
    padding: 0.7em 0.4em;
}
.cases-page .cases-list .cases-list__table tbody tr {
    border-bottom: 1px dotted #c5c5c5;
}
.cases-page .cases-list .cases-list__table tbody tr:hover {
    background: #f3f3f3;
    transition: .2s;
}
.cases-page .cases-list .cases-list__table tbody td {
    padding: 0.6em 0.3em;
}
.cases-page .cases-list .cases-list__table tbody td.value {
    font-weight: bold;
}
.cases-page .cases-list .cases-list__table tbody td.note {
    font-size: smaller;
}
.cases-page .cases-list .cases-list__table tbody td.empty {
    background: #fff2f2;
    color: #f70000;
}
.cases-page .cases-list .cases-list__table tbody td.state span {
    padding: 0.5em;
    border-radius: 3px;
    margin: 0 auto;
    padding: 0.4em;
    font-size: 0.65rem;
    width: 85%;
}
.cases-page .cases-list .cases-list__table tbody td.type {
    font-weight: bold;
}
.cases-page .cases-list .cases-list__table tbody td.type.receive {
    color: #15770a;
}
.cases-page .cases-list .cases-list__table tbody td.type.pay {
    color: #770a0a;
}
.cases-page .cases-list .cases-list__table tbody td.attachment {
    /* max-width: 50px; */
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.cases-page .cases-list .cases-list__table tbody td.attachment:hover {
    color: #1c4bc5;
    background: #eee;
    transition: 0.3s;
}
.cases-page .cases-list .cases-list__table tbody td.attachment>a,
.cases-page .cases-list .cases-list__table tbody td.attachment>span {
    height: 100%;
}
.cases-page .cases-list .cases-list__table tbody td.attachment input[type="file"] {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.cases-page .cases-list .cases-list__table tbody td.attachment a {
    display: none;
}
.cases-page .cases-list .cases-list__table tbody td.attachment.active a {
    display: flex;
    color: #084d62;
}
.cases-page .cases-list .cases-list__table tbody td.attachment.active span {
    display: none;
}
.cases-page .cases-list .cases-list__table tbody td.attachment.active input {
    display: none;
}
.cases-page .cases-list .cases-list__table tbody td.action {
    color: #087124;
    cursor: pointer;
}
.cases-page .cases-list .cases-list__table tbody td.action:hover {
    color: #1c4bc5;
    background: #eee;
    transition: 0.3s;
}
.cases-page .cases-list .cases-list__table tbody td.state span.transaction-s2 {
    border: 1px solid #00d25b;
    color: #00a748;
    background: #e6ffec;
}
.cases-page .cases-list .cases-list__table tbody td.state span.transaction-s1 {
    border: 1px solid #d2c200;
    color: #b17200;
    background: #fff9e6;
}
.cases-page .cases-list .cases-list__table tbody td.state span.transaction-s0 {
    border: 1px solid #d20000;
    color: #a70000;
    background: #ffe6e6;
}
.cases-page .cases-overview__title h2 {
    font-size: 1rem;
    padding-bottom: 1em;
    box-shadow: 0 2px 3px -3px #989898;
    margin-bottom: 1em;
}
.cases-page .cases-overview__title h3 {
    color: #989898;
    font-size: 0.9rem;
    padding-top: 0.5em;
    color: #a1a1a1;
}
.cases-page .cases-overview__title__info h2 {
    text-align: start;
}
.cases-page .cases-overview__title__info p {
    font-size: 0.9rem;
    padding-top: 0.5em;
    color: #a1a1a1;
}
.cases-page .cases-overview__title__action > p {
    display: none;
    text-align: center;
    color: #636363;
    font-size: smaller;
}
.cases-page .cases-overview__title__action button {
    font-size: 0.75rem;
    padding: 0.5em 0.4em;
    background: #313131;
    border: 1px solid #000000;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    width: 100%;
}
.cases-page .cases-overview__title__action button:hover {
    color: #313131;
    background-color: #fff;
    transition: 0.3s;
}
.cases-page .case-transaction {
    display: none;
    position: fixed;
    inset-inline-end: 13px;
    top: 10vh;
    top: 10dvh;
    bottom: 0;
    margin-block: auto;
    width: 300px;
    height: calc(90vh - 2.5rem);
    height: calc(90dvh - 2.5rem);
    background: #fff;
    box-shadow: 0 0 4px #686868;
    border-radius: 5px;
    z-index: 22;
}
@media screen and (max-width: 800px) {
    .cases-page .case-transaction {
        top: 0;
        height: calc(80vh - 2.5rem);
        height: calc(80dvh - 2.5rem);
    }
    
}
@media screen and (max-width: 500px) {
    .cases-page .case-transaction {
        width: 90%;
        left: 0;
        right: 0;
        margin-inline: auto;
    }
}
.cases-page .case-transaction__header {
    padding: 0.4em 0.6em;
}
.cases-page .case-transaction__header h2 span:first-child {
    font-size: 0.9rem;
    color: #040404;
    padding-block: 0.3em;
}
.cases-page .case-transaction__header h2 span:last-child {
    font-size: 0.7rem;
    font-weight: normal;
    color: #383b3d;
    word-spacing: -1px;
}
.cases-page .case-transaction__header p {
    align-self: start;
    padding: 0.7em 0.4em;
    color: #95989e;
    cursor: pointer;
}
.cases-page .case-transaction__header p:hover {
    color: #5c5e61;
    transition: 0.3s;
}
.cases-page .case-transaction__list {
    position: relative;
    padding: 0.7em;
    min-height: 100px;
}
.cases-page .case-transaction__form h2 {
    font-size: 0.85rem;
    padding: 0.5em;
}
.cases-page .case-transaction__form h2 span {
    padding: 0.3em;
    border: 1px solid #d1d1d1;
    border-radius: 2px;
    background: #f9f9f9;
    flex-basis: 80px;
    color: #666666;
}
.cases-page .case-transaction__form h2 span:first-child {
    flex-grow: 1;
}
.cases-page .case-transaction__form>div {
    padding: 0.8em 0.5em;
    align-items: start;
}
.cases-page .case-transaction__form .transaction__form_input.half {
    flex-basis: 40%;
}
.cases-page .case-transaction__form .transaction__form_input.full {
    flex-basis: 100%;
}
.cases-page .case-transaction__form .transaction__form_input>p {
    padding-bottom: 0.5em;
    padding-inline-start: 0.2em;
    font-size: 0.65rem;
    text-align: start;
}
.cases-page .case-transaction__form .transaction__form_input div input,
.cases-page .case-transaction__form .transaction__form_input div select {
    border: 1px solid #d3d3d3;
    padding: 0.3em 0.8em;
    font-size: 0.7rem;
    font-weight: bolder;
    height: 30px;
    width: 100%;
}
.cases-page .case-transaction__form .transaction__form_input div select option {
    font-size: smaller;
}
.cases-page .case-transaction__form .transaction__form_input.number div input,
.cases-page .case-transaction__form .transaction__form_input.price div input {
    letter-spacing: 0.5px;
}
.cases-page .case-transaction__form .transaction__form_input.price div {
    position: relative;
}
.cases-page .case-transaction__form .transaction__form_input.price div>span {
    inset-inline-end: 10px;
    position: absolute;
    top: 6px;
    font-size: 0.7rem;
    font-weight: bold;
}
.cases-page .case-transaction__form .transaction__form_input.price div>input {
    font-size: 0.8rem;
}
.cases-page .case-transaction__form.receive .transaction__form_input.price div>input {
    color: #092602;
    background: #f9fffa;
    border: 1px solid #c5d7c4;
}
.cases-page .case-transaction__form.pay .transaction__form_input.price div>input {
    color: #260202;
    background: #fff9f9;
    border: 1px solid #d7c4c4;
}
.cases-page .case-transaction__form.receive .transaction__form_input.price div>span {
    color: #1c660a;
}
.cases-page .case-transaction__form.pay .transaction__form_input.price div>span {
    color: #660a0a;
}
.cases-page .case-transaction__form .transaction__form_action {
    padding-top: 1em;
}
.cases-page .case-transaction__form .transaction__form_action button {
    border-radius: 2px;
    flex-basis: 80px;
    width: unset;
    height: 30px;
    font-weight: bold;
}
.cases-page .case-transaction__form .transaction__form_action button:first-child {
    color: #434343;
    background: #fff;
}
.cases-page .case-transaction__form .transaction__form_action button:first-child:hover {
    background: #ffd7d7;
    color: #a30202;
    border: 1px solid #a30202;
    transition: 0.2s;
}
.cases-page .case-transaction__form .transaction__form_action button:last-child {
    flex-grow: 2;
}
.cases-page .case-transaction__form .transaction__form_input.mini-action {
    display: none;
}
.cases-page .case-transaction__form .transaction__form_input.mini-action p {
    font-size: 0.75rem;
    padding: 0;
    word-spacing: -0.5px;
    padding-top: 0.3em;
}
.cases-page .case-transaction__form .transaction__form_input.mini-action button {
    border: none;
    width: 30px;
    height: 30px;
    font-size: smaller;
    border-radius: 3px;
    cursor: pointer;
}
.cases-page .case-transaction__form .transaction__form_input.approve button {
    background: #d8ffe8;
    color: #00af37;
}
.cases-page .case-transaction__form .transaction__form_input.approve button:hover {
    background: #24d183;
    color: #fff;
    transition: 0.3s;
}
.cases-page .case-transaction__form .transaction__form_input.attachment button,
.cases-page .case-transaction__form .transaction__form_input.decline button {
    background: #ffd8d8;
    color: #af0000;
}
.cases-page .case-transaction__form .transaction__form_input.attachment button:hover,
.cases-page .case-transaction__form .transaction__form_input.decline button:hover {
    background: #d12424;
    color: #fff;
    transition: 0.3s;
}
.cases-page .case-transaction__form.attachment .transaction__form_input.attachment {
    display: flex;
}
.cases-page .case-transaction__form.approved .transaction__form_input.decline {
    display: flex;
}
.cases-page .case-transaction__form.declined .transaction__form_input.approve {
    display: flex;
}

@media print {
    .cases-page .cases-overview__title {
        display: none;
    }
    .cases-page .cases-overview > div:last-child > div > h2,
    .cases-page .cases-overview > div:last-child > div > p {
        font-size: smaller;
    }

    .cases-page .cases-overview__title__action button,
    .cases-page .cases-list>.cases-list__header button {
        display: none;
    }
    .cases-page .cases-list>.cases-list__header {
        display: none;
    }

    .cases-page .cases-list .cases-list__table thead th:nth-child(9),
    .cases-page .cases-list .cases-list__table thead th:nth-child(10),
    .cases-page .cases-list .cases-list__table tbody td.attachment,
    .cases-page .cases-list .cases-list__table tbody td.action {
        display: none;
    }
    .cases-page .cases-list .cases-list__table td {
        font-size: smaller;
        padding: 0.4em;
    }
    .cases-page .cases-list>.cases-list__table {
        padding-top: 0;
    }
    .cases-page .case-transaction {
        display: none !important;
    }
    .cases-page .cases-list .cases-list__table tbody td.state span {
        padding: 0 !important;
        border: none !important;
    }
}




.cases-page .cases__debts {
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 2px #d6d6d6;
    overflow: hidden;
    position: relative;
    padding: 1em;
    display: none;
    height: 100%;
}
.cases-page .cases__debts .debts__header div:first-child select {
    border: none;
    font-size: 0.9rem;
    font-weight: bolder;
    /* min-width: 130px; */
    text-align: start;
    cursor: pointer;
    background-color: unset;
}
.cases-page .cases__debts .debts__header div:first-child select option{
    font-size: smaller;
}

.cases-page .cases__debts .debts__header div:first-child button.decending {
    background: #fff;
    padding: 0.3em 0.6em;
    border: 1px solid #648169;
    border-radius: 3px;
    color: #022e0a;
    cursor: pointer;
    font-size: 0.8rem;
    transition: 0.7s;
}
.cases-page .cases__debts .debts__header div:first-child button.decending.active {
    border: 1px solid #105311;
    background: #105319;
    color: #fff;
    transition: 0.5s;
}
.cases-page .cases__debts .debts__header div:first-child button.print {
    cursor: pointer;
    font-size: 1.1rem;
    margin-inline-start: 0.7em;
    color: #022e0a;
    border:none;
    background: none;
    cursor: pointer;
}
.cases-page .cases__debts .debts__header div:first-child button.print:hover {
    transform: scale(1.05);
    transition: 0.2s;
}

.cases-page .cases__debts .debts__header div:nth-child(2) {
    font-size: 0.7rem;
    background: #e7e7e7;
    padding: 0.2em;
    border-radius: 3px;
    max-width: 370px;
    border: 1px solid #d5d5d5;
}
.cases-page .cases__debts .debts__header div:nth-child(2) p {
    padding: 0.3em 0.5em;
    border-radius: 3px;
    color: #a5a5a5;
}
.cases-page .cases__debts .debts__header div:nth-child(2) p.active {
    background: #fff;
    box-shadow: 0 0 3px #afafaf;
    color: #3a3a3a;
}



.cases-page .cases__debts .debts__header div:last-child {
    position: relative;
    padding: 0.5em;
    max-width: 225px;
}

@media screen and (max-width: 500px) {
   .cases-page .cases__debts .debts__header div:last-child {
        order: 1;
   }
   .cases-page .cases__debts .debts__header div:nth-child(2) {
    order: 2;
   }
}
.cases-page .cases__debts .debts__header div:last-child button {
    position: absolute;
    width: unset;
    height: unset;
    gap: 0.2em;
}
.cases-page .cases__debts .debts__header div:last-child button:hover {
    font-weight: bolder;
    color: #434343;
    background: #fff;
    transition: 0.3s;
}
.cases-page .cases__debts .debts__header div:last-child button span:first-child{
    font-size: 0.9rem;
}
.cases-page .cases__debts .debts__header div:last-child button span:last-child {
    color: #434343;
    font-weight: bold;
    max-width: 0;
    height: 17px;
    transition: 0.2s;
    overflow: hidden;
    opacity: 0;
}
.cases-page .cases__debts .debts__header div:last-child button:hover span:last-child {
    padding-inline-start: 0.5em;
    max-width: 120px;
    opacity: 1;
    transition: 0.6s;
}



.cases-page .cases__debts .debts__body {
    padding-top: 1.5em;
}

.cases-page .cases__debts .debts__body table thead tr th {
    font-weight: normal;
    color: #fff;
    background: #000;
    padding: 0.5em;
    font-size: 0.7rem;
}

.cases-page .cases__debts .debts__body table tbody tr td {
    font-size: 0.75rem;
    padding: 0.5em 0.3em;
    border-bottom: 1px dotted #c5c5c5;
}

.cases-page .cases__debts .debts__body table tbody tr td.colspan {
    background: #e0e7ed;
    color: #2a71a5;
    border-top: 1px solid #c5c5c5;
    border-bottom: 1px solid #c5c5c5;
}
.cases-page .cases__debts .debts__body table tbody tr td[colspan] {
    padding: 1em;
    font-weight: bold;
    background: #e0e7ed;
    color: #2a71a5;
    border-top: 1px solid #c5c5c5;
    border-bottom: 1px solid #c5c5c5;
}
.cases-page .cases__debts .debts__body table tbody tr.empty td[colspan] {
    background: #ede0e0;
    color: #a52a2a;
    cursor: not-allowed;
}

.cases-page .cases__debts .debts__body table tbody tr td.group {
    font-weight: bold;
    color: #6e9dbf;
}
.cases-page .cases__debts .debts__body table tbody tr td.price span{
    font-weight: bold;
}

.cases-page .cases__debts .debts__body table tbody tr td.state span {
    padding: 0.3em;
    font-size: smaller;
    font-weight: bold;
    border-radius: 2px;
}

.cases-page .cases__debts .debts__body table tbody tr[data-state='0'] td.state span {
    background: #f2fcff;
    border: 1px solid #c0f2f3;
    color: #0d7791;
}
.cases-page .cases__debts .debts__body table tbody tr[data-state='1'] td.state span {
    background: #f2fff4;
    border: 1px solid #b7fdc1;
    color: #0d914a;
}

.cases-page .cases__debts .debts__body table tbody tr td.action {
    cursor: pointer;
}
.cases-page .cases__debts .debts__body table tbody tr td.action:hover {
    background: #eee;
    transition: 0.3s;
}
.cases-page .cases__debts .debts__body table tbody tr td.action span {
    font-size: 0.9rem;
    color: #4e4e4e;
}

.cases-page .cases__debts .debts__body table tbody tr td.action span:last-child { 
    display: none;
}
.cases-page .cases__debts .debts__body table tbody tr[data-group_id='0'] td.action span:first-child {
    display: none;
}
.cases-page .cases__debts .debts__body table tbody tr[data-group_id='0'] td.action span:last-child {
    display: flex;
}




.cases-page .cases__installment {
    display: none;
    position: fixed;
    inset-inline-end: 13px;
    top: 10vh;
    top: 10dvh;
    bottom: 0;
    margin-block: auto;
    width: 300px;
    height: calc(90vh - 2.5rem);
    height: calc(90dvh - 2.5rem);
    background: #fff;
    box-shadow: 0 0 4px #686868;
    border-radius: 5px;
    z-index: 22;
}
@media screen and (max-width: 800px) {

    .cases-page .cases__installment {
        top: 0;
        height: calc(80vh - 2.5rem);
        height: calc(80dvh - 2.5rem);
    }
}
@media screen and (max-width: 500px) {
    .cases-page .cases__installment {
        width: 90%;
        left: 0;
        right: 0;
        margin-inline: auto;
    }
}
.cases-page .cases__installment .installment__header {
    padding: 0.4em 0.6em;
}
.cases-page .cases__installment .installment__header h2 {
    font-size: 0.85rem;
    padding: 0.5em;
}
.cases-page .cases__installment .installment__header h2 span:first-child {
    font-size: 0.9rem;
    color: #040404;
    padding-block: 0.3em;
}
.cases-page .cases__installment .installment__header h2 span:last-child {
    font-size: 0.7rem;
    font-weight: normal;
    color: #383b3d;
    word-spacing: -1px;
}
.cases-page .cases__installment .installment__header p{
    align-self: start;
    padding: 0.7em 0.4em;
    color: #95989e;
    cursor: pointer;
}
.cases-page .cases__installment .installment__header p:hover {
    color: #5c5e61;
    transition: 0.3s;
}
.cases-page .cases__installment .installment__body h2 {
    font-size: 0.85rem;
    padding: 0.5em;
}
.cases-page .cases__installment .installment__body h2 span {
    padding: 0.3em;
    border: 1px solid #d1d1d1;
    border-radius: 2px;
    background: #f9f9f9;
    flex-basis: 80px;
    color: #666666;
}




.cases-page .cases__installment .installment__form {
    padding: 0.8em 0.5em;
    align-items: start;
}
.cases-page .cases__installment .installment__form .installment__form_input > p {
    padding-bottom: 0.5em;
    padding-inline-start: 0.2em;
    font-size: 0.65rem;
    text-align: start;
}
.cases-page .cases__installment .installment__form .installment__form_input div > input,
.cases-page .cases__installment .installment__form .installment__form_input div > select {
    border: 1px solid #d3d3d3;
    padding: 0.3em 0.8em;
    font-size: 0.7rem;
    font-weight: bolder;
    height: 30px;
    width: 100%;
}
.cases-page .cases__installment .installment__form .installment__form_input.value div > input {
    font-size: 0.8em;
    letter-spacing: 1px;
}
.cases-page .cases__installment .installment__form .installment__form_input.group select {
    text-align: center;
}
.cases-page .cases__installment .installment__form .installment__form_input.half {
    flex-basis: 40%;
}
.cases-page .cases__installment .installment__form .installment__form_input.full {
    flex-basis: 100%;
}
.cases-page .cases__installment .installment__form .installment__form_input.mini-action {
    flex-basis: 100%;
    margin-top: 0.5em
}
.cases-page .cases__installment .installment__form .installment__form_input.mini-action p {
    font-size: 0.75rem;
    padding: 0;
    word-spacing: -0.5px;
    padding-top: 0.3em;
}
.cases-page .cases__installment .installment__form .installment__form_input.mini-action button {
    border: none;
    width: 30px;
    height: 30px;
    font-size: smaller;
    border-radius: 3px;
    cursor: pointer;
}
.cases-page .cases__installment .installment__form .installment__form_input.mini-action.remove button {
    background: #ffd8d8;
    color: #af0000;
}
.cases-page .cases__installment .installment__form .installment__form_input.mini-action.remove button:hover {
    background: #d12424;
    color: #fff;
    transition: 0.3s;
}
.cases-page .cases__installment .installment__form .installment__form_input.mini-action.remove {
    display: none;
}
.cases-page .cases__installment.edit .installment__form .installment__form_input.mini-action.remove {
    display: flex;
}

.cases-page .cases__installment .installment__form .installment__form_action {
    padding-top: 0.5em;
}
.cases-page .cases__installment .installment__form .installment__form_action button {
    border-radius: 2px;
    flex-basis: 80px;
    width: unset;
    height: 30px;
    font-weight: bold;
}
.cases-page .cases__installment .installment__form .installment__form_action button:first-child {
    color: #434343;
    background: #fff;
}
.cases-page .cases__installment .installment__form .installment__form_action button:first-child:hover {
    background: #ffd7d7;
    color: #a30202;
    border: 1px solid #a30202;
    transition: 0.2s;
}
.cases-page .cases__installment .installment__form .installment__form_action button:last-child {
    flex-grow: 2;
}


.cases-page .cases__side {
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 2px #d6d6d6;
    overflow: hidden;
    position: relative;
    padding: 0.7em;
}
.cases-page .cases__side .cases__notes .notes__header > div:first-child {
    padding: 0.3em 0.5em;
    border-radius: 2px;
    box-shadow: 0 0 2px #b7b7b7;
}
.cases-page .cases__side .cases__notes .notes__header > div:first-child p {
    font-size: 0.8rem;
    font-weight: bold;
}
.cases-page .cases__side .cases__notes .notes__header > div:first-child p.followup {
    color: #00a748;
}
.cases-page .cases__side .cases__notes .notes__header > div:first-child p.declaration {
    color: #f30000;
}
.cases-page .cases__side .cases__notes .notes__header > div:first-child p.warn {
    color: #9f0101;
}
.cases-page .cases__side .cases__notes .notes__header > div:first-child p.remind {
    color: #9b7225;
}
.cases-page .cases__side .cases__notes .notes__header > div:first-child p.info {
    color: #255e9b;
}
.cases-page .cases__side .cases__notes .notes__header > div:first-child p span:first-child {
    font-size: smaller;
}
.cases-page .cases__side .cases__notes .notes__header button {
    background: none;
    border: none;
    padding: 0.3em;
    font-size: 0.95rem;
    border-radius: 3px;
    cursor: pointer;
    outline-color: #cbcbcb;
    color: #6f6f6f;
}
.cases-page .cases__side .cases__notes .notes__header button:hover {
    background: #dfdfdf;
    outline: 1px solid #cbcbcb;
    transition: 0.3s;
}
.cases-page .cases__side .cases__notes .notes__item {
    border-radius: 5px;
    background: #f9fbfc;
    border: 1px solid #f0eff2;
    padding: 0.5em;
    box-shadow: 0 0 1px #e7e7e7;
}
.cases-page .cases__side .cases__notes .notes__item .item__title {
    padding-bottom: 0.5em;
}
.cases-page .cases__side .cases__notes .notes__item .item__title > p {
    font-weight: bold;
    color: #3b3b3b;
    font-size: 0.7rem;
}

.cases-page .cases__side .cases__notes .notes__item .item__title select {
    font-size: 0.5rem;
    appearance: none;
    -webkit-appearance: none;
    field-sizing: content;
    width: fit-content;
    height: 20px;
    padding-inline: 0.5em;
    border-radius: 3px;
    font-weight: bold;
    pointer-events: none;
    letter-spacing: 0.3px;
}

.cases-page .cases__side .cases__notes .notes__item.declaration .item__title select {
    color: #ffffff;
    border-color: #fb7676;
    background: #ff0000;

}
.cases-page .cases__side .cases__notes .notes__item.followup .item__title select {
    color: #008360;
    border-color: #004a11;
    background: #00d25b;
}
.cases-page .cases__side .cases__notes .notes__item.warn .item__title select {
    color: #bd1414;
    border-color: #ffa1a1;
    background: #ffd0d0;

}
.cases-page .cases__side .cases__notes .notes__item.remind .item__title select {
    background: #fffcd0;
    border-color: #f7d774;
    color: #bd7314;
}
.cases-page .cases__side .cases__notes .notes__item.info .item__title select {
    background: #d0e2ff;
    border-color: #74bef7;
    color: #1475bd;
}


.cases-page .cases__side .cases__notes .notes__item .item__text textarea {
    width: 100%;
    height: auto;
    resize: none;
    field-sizing: content;
    padding: 0.3em;
    border: none;
    background: #f9fbfc;
    font-size: 0.65rem;
    word-spacing: -1px;
    color: #3e4d56;
    text-align: justify;
    pointer-events: none;
}
.cases-page .cases__side .cases__notes .notes__item .item__action {
    padding-top: 0.5em;
}
.cases-page .cases__side .cases__notes .notes__item .item__action p {
    font-size: 0.65rem;
    color: #919191;
    letter-spacing: 0.3px;
}
.cases-page .cases__side .cases__notes .notes__item .item__action p:last-child > span.delete {    
    font-size: 0.8rem;
}
.cases-page .cases__side .cases__notes .notes__item .item__action p:last-child > span.accept {
    display: none;
    color: #1c6904;
    font-size: 1rem;
}
.cases-page .cases__side .cases__notes .notes__item .item__action p span strong {
    font-weight: normal;
}

.cases-page .cases__side .cases__notes .notes__item .item__action p:last-child {
    color: #9d1010;
    padding: 0.1em;
    opacity: 0;
    visibility: hidden;
}
.cases-page .cases__side .cases__notes .notes__item:hover .item__action p:last-child {
    opacity: 1;
    visibility: visible;
    transition: 0.3s;
}

.cases-page .cases__side .cases__notes .notes__item.new .item__title select {
    pointer-events: auto;
    appearance: auto;
    -webkit-appearance: auto;
    background: #ffffff;
    border: 1px solid #eee;
    color: #5b5b5b;
}
.cases-page .cases__side .cases__notes .notes__item.new .item__text textarea {
    background: #fff;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    pointer-events: auto;
    padding: 0.4em;
}
.cases-page .cases__side .cases__notes .notes__item.new .item__action p:last-child {
    visibility: visible !important;
    opacity: 1 !important;
}
.cases-page .cases__side .cases__notes .notes__item.new .item__action p:last-child > span.accept {
    display: flex;
}
.cases-page .cases__side .cases__events {
    background: #eee;
    border-radius: 2px;
    box-shadow: 0 0 2px #9b9b9b;
    padding: 0.3em;
}
.cases-page .cases__side .cases__events ul li {
    font-size: 0.7rem;
    color: #807d95;
    border-bottom: 1px dotted #807d95;
    padding-block: 1em;
}
.cases-page .cases__side .cases__events ul li p:nth-child(1) {
    flex-basis: 100px;
    text-align: center;
}
.cases-page .cases__side .cases__events ul li p:nth-child(2) {
    flex-basis: 20px;
    text-align: center;
}
.cases-page .cases__side .cases__events ul li p:nth-child(3) {
    text-align: justify;
}



.cases-page .cases-body > div:first-child {
    flex-basis: calc(25% - 1em);
}
.cases-page .cases-body > div:nth-child(2),
.cases-page .cases-body > div:nth-child(3) {
    flex-basis: 75%;
}

@media screen and (max-width: 1100px) {
    .cases-page .cases__side {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .cases-page .cases__side > div {
        flex-grow: 1;
    }
    .cases-page .cases-body {
        flex-wrap: wrap;
    }
    .cases-page .cases-body > div {
        flex-basis: 100% !important;
    }

    .cases-page .cases__side .cases__notes .notes__body {
        max-height: 200px;
    }
    .cases-page .cases__side .cases__events {
        max-height: 245px;
    }
    .cases-page .cases__side .cases__notes .notes__body,
    .cases-page .cases__side .cases__events {
        flex-basis: 50%;
    }
}




@media print {
    .cases-page .cases__side {
        display: none;
    }
    .cases-page .cases-overview__title__action > p {
        display: block;
    }
    .cases-page .cases__debts .debts__body table tbody tr td {
        font-size: 0.6rem !important;
        font-weight: normal !important;
        padding: 0.4em;
    }
    .cases-page .cases__debts .debts__body table tbody tr td[colspan] {
        padding: 0.8em;
    }
    .cases-page .cases__debts .debts__body table tbody tr td.state span {
        padding: 0 !important;
        border: none !important;
    }
    .cases-page .cases__debts .debts__body table tr th.action,
    .cases-page .cases__debts .debts__body table tr td.action {
        display: none;
    }

    .cases-page .cases__debts .debts__body table tbody tr td.colspan:last-child {
        display: none;
    }   

}


/* ---------------------------- */
/* ----- Cases-Page -----E */
/* ---------------------------- */


/* ---------------------------- */
/* S----- Charts-Page ----- */
/* ---------------------------- */
.charts-page .chart-segment {
    background: #fff;
    height: 100%;
    width: 100%;
    border-radius: 3px;
    box-shadow: 0 0 2px #d6d6d6;
    overflow: hidden;
    position: relative;
    padding: 1em;
    flex-grow: 1;
}
.charts-page .chart__header {
    padding-bottom: 1em;
    border-bottom: 1px dashed #d1d1d1;
}
.charts-page .chart__header h1 {
    font-size: 0.85rem;
    word-spacing: -0.5px;
    color: #2b2b2b;
}
.charts-page .chart__header h1 select {
    border: none;
    field-sizing: content;
}
.charts-page .chart__header h1 span.descending {
    padding: 0.3em 0.8em;
    border: 1px solid #b9b9b9;
    border-radius: 3px;
    color: #5d5d5d;
    cursor: pointer;
    transition: 0.7s;
}
.charts-page .chart__header h1 span.descending.active {
    border: 1px solid #103353;
    background: #103353;
    color: #fff;
    transition: 0.5s;
}
.charts-page .chart__header select {
    border: 1px solid #d3d3d3;
    padding: 0.3em 0.8em;
    font-size: 0.7rem;
    font-weight: bolder;
    min-width: 110px;
}
.charts-page .chart-segment>.chart-body {
    width: 100%;
}
/* ---------------------------- */
/* ----- Charts-Page -----E */
/* ---------------------------- */





/* ---------------------------- */
/* S----- Accepts-Page ----- */
/* ---------------------------- */
.accepts-page .automation-segment {
    display: flex;
    flex-direction: column;
}
.accepts-page .automation-segment>div {
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 2px #d6d6d6;
    overflow: hidden;
    padding: 1em;
    width: 100%;
}
.accepts-page .accepts__header h1 {
    font-size: 0.95rem;
}
.accepts-page .accepts__header h1>span {
    word-spacing: -2px;
}
.accepts-page .cases-list {
    padding-top: 1.5em;
}
.accepts-page .cases-list>table {
    text-align: center;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.accepts-page .cases-list table tr,
.accepts-page .cases-list table td {
    padding: 0.3em;
}
.accepts-page .cases-list table thead tr th {
    font-weight: normal;
    color: #fff;
    background: #000;
    padding: 0.7em 0.4em;
}
.accepts-page .cases-list table tbody tr {
    border-bottom: 1px dotted #c5c5c5;
}
.accepts-page .cases-list table tbody tr.selected {
    background: #fbfbe0;
}
.accepts-page .cases-list table tbody td {
    padding: 0.9em 0.4em;
}
.accepts-page .cases-list table tbody td.empty {
    background: #fff2f2;
    color: #f70000;
}
.accepts-page .cases-list table tbody td.state span {
    padding: 0.5em;
    border-radius: 3px;
    margin: 0 auto;
    padding: 0.4em;
    font-size: 0.65rem;
    width: 85%;
}
.accepts-page .cases-list table tbody td.attachment {
    /* max-width: 50px; */
    position: relative;
    overflow: hidden;
    cursor: not-allowed;
}
.accepts-page .cases-list table tbody td.attachment.active {
    cursor: pointer;
}
.accepts-page .cases-list table tbody td.attachment.active:hover {
    color: #1c4bc5;
    background: #eee;
    transition: 0.3s;
}
.accepts-page .cases-list table tbody td.attachment>a,
.accepts-page .cases-list table tbody td.attachment>span {
    height: 100%;
}
.accepts-page .cases-list table tbody td.attachment input[type="file"] {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.accepts-page .cases-list table tbody td.attachment a {
    display: none;
}
.accepts-page .cases-list table tbody td.attachment.active a {
    display: flex;
    color: #084d62;
}
.accepts-page .cases-list table tbody td.attachment.active span {
    display: none;
}
.accepts-page .cases-list table tbody td.attachment.active input {
    display: none;
}
.accepts-page .cases-list table tbody td.case:hover {
    cursor: pointer;
    color: #1c4bc5;
    background: #eee;
    transition: 0.3s;
}
.accepts-page .cases-list table tbody td.action {
    padding: 0.1em 0.1em;
}
.accepts-page .cases-list table tbody td.action span {
    cursor: pointer;
    padding: 0.5em 0.3em;
    text-align: center;
    border-radius: 3px;
    width: unset;
    font-weight: normal !important;
    height: 30px;
}
.accepts-page .cases-list table tbody td.action span.accept {
    background: #1c701c;
    border: 1px solid #114111;
}
.accepts-page .cases-list table tbody td.action span.accept:hover {
    background: #dfffe2;
    color: #092d08;
}
.accepts-page .cases-list table tbody td.action span.declined {
    background: #ffdfdf;
    color: #2d0808;
    border: 1px solid #411111;
}
.accepts-page .cases-list table tbody td.action span.declined:hover {
    background: #af4b4b;
    color: #fff;
}
.accepts-page .cases-list table tbody td.state span.transaction-s2 {
    border: 1px solid #00d25b;
    color: #00a748;
    background: #e6ffec;
}
.accepts-page .cases-list table tbody td.state span.transaction-s1 {
    border: 1px solid #d2c200;
    color: #b17200;
    background: #fff9e6;
}
.accepts-page .cases-list table tbody td.state span.transaction-s0 {
    border: 1px solid #d20000;
    color: #a70000;
    background: #ffe6e6;
}
.accepts-page .cases-list table tbody td.type {
    font-weight: bold;
}
.accepts-page .cases-list table tbody td.type.receive {
    color: #15770a;
}
.accepts-page .cases-list table tbody td.type.pay {
    color: #770a0a;
}
/* ---------------------------- */
/* ----- Accepts-Page -----E */
/* ---------------------------- */


/* ---------------------------- */
/* S----- Score-Page ----- */
/* ---------------------------- */
.scores-page .automation-segment {
    display: flex;
    flex-direction: row;
    position: relative;
    scroll-behavior: smooth;
    scroll-padding: 3em;
}
.scores-page .automation-segment>div {
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 2px #d6d6d6;
    overflow: hidden;
    padding: 1em;
}
.scores-page .manage-section {
    width: 25%;
    height: fit-content;
    position: sticky;
    top: 0;
    padding: 0 !important;
    background: unset !important;
    box-shadow: unset !important;
}
.scores-page .manage-section .manage__contradiction {
    background: #fff;
    box-shadow: 0 0 2px #d6d6d6;
}
.scores-page .manage-section .manage__contradiction .manage__header {
    padding: 0.5em;
    padding-bottom: 0.7em;
}
.scores-page .manage-section .manage__contradiction .manage__header h3 {
    font-size: 0.9rem;
}
.scores-page .manage-section .manage__contradiction .manage__header button {
    background: #131717;
    border: 1px solid #131717;
    padding: 0.4em 1em;
    color: #ffffff;
    border-radius: 5px;
    cursor: pointer;
}
.scores-page .manage-section .manage__contradiction .manage__header button:hover {
    color: #131717;
    background: #fff;
    transition: 0.3s;
}
.scores-page .manage-section .manage__contradiction .manage__body {
    background: #131717;
    border-start-end-radius: 10px;
    border-start-start-radius: 10px;
    padding: 0.5em;
    color: #fff;
}
.scores-page .manage-section .manage__contradiction .manage__body__info div:first-child {
    font-size: 1.3rem;
    padding-inline: 0.5em;
    padding-block: 0.4em 1em;
}
.scores-page .manage-section .manage__contradiction .manage__body__value {
    padding-bottom: 1.5em;
}
.scores-page .manage-section .manage__contradiction .manage__body__value>p {
    font-size: 0.7em;
    font-weight: bold;
    text-align: center;
    padding-bottom: 0.1em;
    color: #727272;
}
.scores-page .manage-section .manage__contradiction .manage__body__value>div {
    width: 70%;
    margin-inline: auto;
}
.scores-page .manage-section .manage__contradiction .manage__body__value>div input {
    color: #333;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.5px;
    padding: 0.3em 1em;
    font-size: 0.8rem;
    width: 100%;
    border: none;
    border-radius: 2px;
}
.scores-page .manage-section .manage__contradiction .manage__body__date {
    font-size: 0.7rem;
    background: #3d3d3d;
    max-width: 100%;
    color: #ffffff;
    margin-inline: auto;
    border-radius: 3px;
    padding: 0.5em;
}
.scores-page .manage-section .manage__contradiction .manage__body__date>p:last-child span {
    letter-spacing: 0.7px;
    word-spacing: 2px;
    font-weight: bold;
}
.scores-page .manage-section>div {
    flex-basis: 40%;
}
.scores-page .manage-section .manage__filter {
    background: #fff;
    padding: 0.5em;
    box-shadow: 0 0 2px #d6d6d6;
}
.scores-page .manage-section .manage__filter>h2 {
    font-size: 0.9rem;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #d1d1d1;
    margin-bottom: 1em;
    color: #2e2e2e;
}
.scores-page .manage__filter .members-overview__filter__user {
    box-shadow: 0 0 3px -1px #686868;
    border-radius: 3px;
    padding: 0.4em;
    margin-top: 1em;
}
.scores-page .manage__filter .members-overview__filter__user>h3 {
    font-size: 0.7rem;
    color: #989898;
    font-weight: normal;
    padding-bottom: 0.7em;
}
.scores-page .manage__filter .members-overview__filter__user>div {
    overflow: hidden;
    border: 1px solid #aeaeae;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    border: 1px solid #cbcbcb;
    font-weight: bold;
}
.scores-page .manage__filter .members-overview__filter__user>div>* {
    height: 100%;
    border-radius: 0;
    border: none;
}
.scores-page .manage__filter .members-overview__filter__user>div select {
    width: 30%;
    color: #000;
    text-align: center;
    padding: 0.5em;
    font-size: 0.75rem;
    font-weight: bold;
    appearance: none;
    -webkit-appearance: none;
}
.scores-page .manage__filter .members-overview__filter__user>div input {
    width: 70%;
    position: absolute;
    inset-inline-end: 0;
    padding-inline: 0.7em;
    font-size: 0.75rem;
    direction: rtl;
    background: #f3f3f3;
}
.scores-page .manage__filter .members-overview__filter__user>div>span {
    display: none;
    position: absolute;
    inset-inline-end: 5px;
    color: #fa0000;
    height: unset;
    padding: 0.3em;
    border-radius: 3px;
    cursor: pointer;
}
.scores-page .manage__filter .members-overview__filter__user>div.name-full>span {
    display: flex;
}
.scores-page .manage__filter .members-overview__filter__user>div.name-full>span:hover {
    background: #fec2c2;
    transition: 0.3s;
}
.scores-page .manage__filter .members-overview__filter__user>div button {
    position: absolute;
    inset-inline-end: 0;
    padding-top: 1px;
    border: none;
    background: none;
    color: #8d8d8d;
    height: 100%;
    padding-inline: 9px;
    cursor: pointer;
    color: #1874ec;
    font-size: 0.9rem;
}
.scores-page .manage__filter .members-overview__filter__user>div button.accept {
    display: block;
    /* background: #333;
    border: 1px solid #333;
    border-radius: 1px;
    
    color: #fff; */
}
.scores-page .manage__filter .members-overview__filter__user>div button.accept:hover {
    background: #e9f7ff;
    transition: 0.2s;
}
.scores-page .manage__filter .members-overview__filter__user>div button.reset {
    display: none;
    color: #db0000;
}
.scores-page .manage__filter .members-overview__filter__user>div button.reset:hover {
    background: #ffd3d3;
    transition: 0.3s;
}
.scores-page .manage__filter .members-overview__filter__user.active button.reset {
    display: block;
}
.scores-page .manage__filter .members-overview__filter__user.active>div button.accept {
    display: none;
}
.scores-page .manage__filter .members-overview__filter__user.active>div select {
    pointer-events: none;
    color: #6d6d6d;
}
.scores-page .manage__filter .members-overview__filter__user.active>div input {
    pointer-events: none;
    color: #545454;
    background: #fdfdfd;
}
.scores-page .manage__filter .members-overview__filter__user.name-search>div button {
    display: none !important;
}
.scores-page .list-section {
    flex-grow: 1;
    position: relative;
    height: fit-content;
}
.scores-page .list-section .list-section__tabs {
    border-bottom: 2px solid #dfdfdf;
    margin-bottom: 1rem;
}
.scores-page .list-section .list__tabs__item {
    font-size: 0.75rem;
    color: #a9a9a9;
    padding: 0.5em 0.8em;
    border: 1px solid #d9d9d9;
    border-bottom: none;
    border-start-end-radius: 3px;
    border-start-start-radius: 3px;
    flex-basis: 110px;
    text-align: center;
    cursor: pointer;
    margin-bottom: -1px;
}
.scores-page .list-section .list__tabs__item:hover {
    background: #e7f4ff;
}
.scores-page .list-section .list__tabs__item.selected {
    border-bottom: 2px solid #0d4d81;
    color: #575757;
    font-weight: bold;
}
.scores-page .list-section .list-section__table__header {
    margin-bottom: 0.5em;
}
.scores-page .list-section .list-section__table__header h3 {
    font-size: 0.85rem;
    font-weight: normal;
    padding-block: 0.5em;
}
.scores-page .list-section .list-section__table__header button,
.scores-page .list-section .list-section__table__header a {
    padding-block: 0.5em;
    min-width: 50px;
    border: none;
    background: #fff;
    color: #081a03;
    font-size: 1.1rem;
}

.scores-page .list-section .list-section__table__header p.active {
    background: #8ed0ff;
    padding: 0.4em;
    font-size: 0.8rem;
    border-radius: 3px;
    border: 1px solid #4f97ff;
    color: #004399;
    box-shadow: 0 0 1px #707f95;
    transition: 0.3s;
}
.scores-page .list-section__table {
    overflow-x: auto;
}
.scores-page .list-section__table table {
    text-align: center;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.scores-page .list-section__table table thead tr {
    border-bottom: 1.5px solid #a3a3a3;
}
.scores-page .list-section__table table thead th {
    font-weight: normal;
    color: #fff;
    background: #000;
    padding: 0.7em 0.4em;
}


.scores-page .list-section__table table thead tr th.sort {
    cursor: row-resize;
}
.scores-page .list-section__table table thead tr th.sort:hover {
    background: #242424;
    transition: 0.3s;
}
.scores-page .list-section__table table thead tr th p span.sort {
    display: none;
    color: #b9b9b9;
}
.scores-page .list-section__table table thead tr th.sort-up p span.sort-up {
    display: flex;
}
.scores-page .list-section__table table thead tr th.sort-down p span.sort-down {
    display: flex;
}



.scores-page .list-section__table table tbody tr {
    border-bottom: 1px dotted #c5c5c5;
}
.scores-page .list-section__table table tbody tr:hover {
    background: #fffef6;
    transition: .2s;
}
.scores-page .list-section__table table tbody tr.group td {
    padding: 0.8em;
    font-weight: bold;
    background: #e0e7ed;
    color: #2a71a5;
    border-top: 1px solid #c5c5c5;
    border-bottom: 1px solid #c5c5c5;
}
.scores-page .list-section__table table tbody td {
    padding: 0.9em 0.4em;
}
.scores-page .list-section__table table thead th.calcuted,
.scores-page .list-section__table table thead th.action,
.scores-page .list-section__table table tbody td.calcuted,
.scores-page .list-section__table table tbody td.action {
    display: none;
}
.scores-page .list-section__table table.contradiction thead th.calcuted,
.scores-page .list-section__table table.contradiction thead th.action,
.scores-page .list-section__table table.contradiction tbody td.calcuted,
.scores-page .list-section__table table.contradiction tbody td.action {
    display: table-cell;
}
.scores-page .list-section__table table tbody td.score {
    color: #918e00;
    font-weight: bold;
}
.scores-page .list-section__table table tbody td.calcuted {
    font-weight: bold;
    color: #009700;
}
.scores-page .list-section__table table tbody td.case:hover,
.scores-page .list-section__table table tbody td.user:hover {
    cursor: pointer;
    color: #1c4bc5;
    background: #eee;
    transition: 0.3s;
}
.scores-page .list-section__table table tbody tr.contradiction {
    background: #410707;
    color: #fff;
}
.scores-page .list-section__table table tbody tr.searched {
    background: #e4ffe6;
    font-weight: bold;
    color: #0a5906;
}
@media screen and (max-width: 1350px) {
    .scores-page .automation-segment {
        flex-direction: column;
    }
    .scores-page .automation-segment .manage-section {
        width: 100%;
        overflow: unset;
        flex-direction: row;
    }
    .scores-page .automation-segment .list-section {
        overflow: unset;
    }
}
@media screen and (max-width: 600px) {
    .scores-page .automation-segment .manage-section {
        flex-direction: column;
    }
}
.scores-page .loader {
    top: 280px !important;
}
@media print {
    @page {
        margin: 0 !important;
    }
    body {
        width: unset !important;
        height: unset !important;
        margin: 0 !important;
    }
    .base-container {
        height: fit-content !important;
    }
    .automation-segment {
        height: fit-content !important;
    }
    .scores-page .manage-section {
        display: none;
    }
    .scores-page .list-section .list-section__tabs {
        border-bottom: none;
        margin-bottom: 0;
    }
    .scores-page .list-section .list__tabs__item {
        display: none;
    }
    .scores-page .list-section .list__tabs__item.selected {
        display: flex;
        position: absolute;
        inset-inline-end: 20px;
        top: 15px;
    }
    .scores-page .list-section .list-section__table__header p {
        display: none;
    }
    .scores-page .list-section .list-section__table__header button {
        display: none;
    }
    .scores-page .list-section .list-section__table__header a {
        display: none;
    }
    .scores-page .list-section__table table thead th p span:first-child {
        display: none;
    }
    .scores-page .list-section__table table {
        font-size: 0.65rem;
    }
    .scores-page .list-section__table table tbody td {
        padding: 0.6em 0.4em;
    }
    .scores-page .list-section__table table tbody tr.searched {
        background: unset;
        font-weight: normal;
        color: #000;
    }
}
/* ---------------------------- */
/* ----- Score-Page -----E */
/* ---------------------------- */


/* ---------------------------- */
/* S----- Setting-Page -----*/
/* ---------------------------- */
.setting-page .automation-segment {
    display: flex;
    flex-direction: column;
    position: relative;
}
.setting-page .automation-segment>div {
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 2px #d6d6d6;
    overflow: hidden;
    padding: 1em;
}
.setting-page .password-section h2 {
    font-size: 0.9rem;
    padding-bottom: 0.8em;
    box-shadow: 0 2px 3px -3px #0a0a0aee;
    padding-inline: 0.3em;
}
.setting-page .password-section {
    width: 285px;
}
@media screen and (max-width: 800px) {
    .setting-page .automation-segment {
        align-items: center;
    }
}
.setting-page .password-section .password__form {
    width: min(100%, 300px);
    padding: 1em;
    padding-bottom: 0;
}
.setting-page .password-section .password__form .password__form__item {
    position: relative;
    margin-bottom: 1em;
}
.setting-page .password-section .password__form .password__form__item input {
    width: 100%;
    padding: 0.5em 0.8em;
    font-size: 0.8rem;
    text-align: center;
    padding-inline: 30px;
    font-weight: bold;
    border: 1px solid #a9a9a9;
    border-radius: 3px;
    height: 37px;
}
.setting-page .password-section .password__form .password__form__item input::placeholder {
    text-align: end;
    word-spacing: -0.5px;
    font-size: smaller;
}
.setting-page .password-section .password__form .password__form__item.error input::placeholder {
    color: #e90000;
}
.setting-page .password-section .password__form .password__form__item.error input {
    color: #e90000;
    border: 1px solid #db1414;
    background: #ffe9e9;
}
.setting-page .password-section .password__form .password__form__item.error span {
    color: #b10505;
}
.setting-page .password-section .password__form .password__form__item span {
    position: absolute;
    top: 11px;
    color: #646464;
    font-size: 0.9rem;
    cursor: pointer;
}
.setting-page .password-section .password__form .password__form__item span:first-child {
    inset-inline-start: 10px;
}
.setting-page .password-section .password__form .password__form__item span:last-child {
    inset-inline-end: 10px;
}
.setting-page .password-section .password__form .password__form__item.password__form__item--info {
    visibility: hidden;
    margin-bottom: 0;
}
.setting-page .password-section .password__form.info .password__form__item.password__form__item--info {
    visibility: visible;
}
.setting-page .password-section .password__form .password__form__item p {
    font-size: 0.65rem;
    color: #8b0000;
    word-spacing: -1px;
}
.setting-page .password-section .password__form .password__form__item button {
    height: 35px;
    width: min(100%, 170px);
    font-weight: bold;
}

/* ---------------------------- */
/* ----- Setting-Page -----E */
/* ---------------------------- */


/* ---------------------------- */
/* S---- Election-Page ------- */
/* ---------------------------- */
.base-container.election-page {
    display: block;
}
.election-page .body-segment {
    background: #f6f7f9;
    height: 100%;
    width: 100%;
    padding-bottom: 4em;
    max-width: 900px;
    margin-inline: auto;
}

.election-page .nav-segment {
    position: sticky;
    /*bottom: 1em;*/
    width: 85%;
    left: 0;
    right: 0;
    margin-inline: auto;
    background: #192028;
    color: #fff;
    border-radius: 11px;
    box-shadow: 0 0 2px #04162c;
    overflow: hidden;
    max-width: 800px;
}
.election-page .nav-segment .nav-segment__item {
    position: relative;
}
.election-page .nav-segment .nav-segment__item a {
    width: 100%;
    padding-block: 0.7em 0.5em;
    padding-inline: 0.3em;
}
.election-page .nav-segment .nav-segment__item a:hover {
    background: #213144;
    transition: .4s;
}
.election-page .nav-segment .nav-segment__item a span {
    justify-content: center;
}
.election-page .nav-segment .nav-segment__item a span:last-child {
    font-size: 0.55rem;
    color: #f3f3f3;
}
.election-page .nav-segment .nav-segment__item p {
    visibility: hidden;
    position: absolute;
    top: 0;
    width: 40%;
    height: 3px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background: #fff;
}
.election-page .nav-segment .nav-segment__item.active p {
    visibility: visible;
}
.election-page .nav-segment .nav-segment__item.exit p {
    color: #ff3131;
}
.election-page .nav-segment .nav-segment__item.exit a {
    color: #ff3131;
}
.election-page .nav-segment .nav-segment__item.exit a span:last-child {
    color: #ffd0d0;
}

.election-page .body-segment>div {
    padding: 1em;
}
.election-page .body__overview .overview__header .overview__header__profile div:last-child p {
    font-size: 0.8rem;
}
.election-page .body__overview .overview__header .overview__header__profile div:last-child p:first-child {
    font-weight: bold;
}
.election-page .body__overview .overview__header .overview__header__profile div:last-child p:last-child {
    padding-top: 0.2em;
    color: #ababab;
    font-size: 0.7rem;
}
.election-page .body__overview .overview__header .overview__header__alert span {
    padding: 0.3em 0.5em;
    font-size: 1.1rem;
    color: #192028;
    cursor: pointer;
    border-radius: 5px;
}
.election-page .body__overview .overview__header .overview__header__alert span:hover {
    color: #c3ad00;
    background: #f8ffc4;
    transition: .3s;
}

.election-page .body__overview .overview__info {
    background: #191919;
    color: #fff;
    border-radius: 8px;
    margin-top: 1em;
    padding: 0.8em;
}
.election-page .body__overview .overview__info h2 {
    font-size: 0.6rem;
    font-weight: normal;
    padding-bottom: 1em;
    color: #adadad;
}
.election-page .body__overview .overview__info h2 span:last-child {
    font-weight: bold;
    padding: 0.3em 0.7em;
    border-radius: 3px;
    font-size: 0.55rem;
}
.election-page .body__overview .overview__info h2.st1 span:last-child,
.election-page .body__overview .overview__info h2.st2 span:last-child {
    background: #042f0c;
    color: #3daf56;
    border: 1px solid #063e12;
}
.election-page .body__overview .overview__info h2.st0 span:last-child {
    background: #2f0404;
    color: #af3d3d;
    border: 1px solid #3e0606;
}
.election-page .body__overview .overview__info .overview__info__score__body {
    padding-bottom: 0.8em
}
.election-page .body__overview .overview__info .overview__info__score__body p:first-child {
    font-size: 1.6rem;
    font-weight: bold;
    color: #ffd700;
}
.election-page .body__overview .overview__info .overview__info__score__body p:last-child {
    font-size: 0.75rem;
    color: #eee;
}
.election-page .body__overview .overview__info .overview__info__action button {
    background: #2b2b2b;
    color: #e5e5e5;
    border: 1px solid #373737;
    padding: 0.6em 1em;
    font-size: 0.65rem;
    border-radius: 3px;
    font-weight: bold;
    cursor: pointer;
}
.election-page .body__overview .overview__info .overview__info__action button:hover {
    background: #eee;
    color: #2b2b2b;
    transition: .3s;
}
.election-page .body__overview .overview__info .overview__info__note p {
    font-size: 0.6rem;
    text-align: center;
    padding-top: 1.8em;
    color: #b5b5b5;
}
.election-page .body__overview .overview__selection {
    margin-top: 1.5em;
}
.election-page .body__overview .overview__selection h2 {
    font-size: 0.8rem;
    color: #1e1e1e;
    padding-bottom: 0.8em;
}
.election-page .body__overview .overview__selection h2 span:last-child {
    color: #6b4dd6;
    font-weight: normal;
    font-size: 0.75rem;
    cursor: pointer;
}
.election-page .body__overview .overview__selection h2 span:last-child i {
    padding-inline-start: 0.3em;
}
.election-page .body__overview .overview__selection h2 span:last-child:hover i {
    padding-inline-start: 0.5em;
    transition: .3s;
}
.election-page .body__overview .overview__selection .overview__selection__body {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 2px #e1e1e1;
    padding: 0.5em;
}
.election-page .body__overview .overview__selection .overview__selection__body>div:first-child {
    /* flex-basis: 50%; */
    position: relative;
}
.election-page .body__overview .overview__selection .overview__selection__body>div:first-child img {
    cursor: zoom-in;
}
.election-page .body__overview .overview__selection .overview__selection__body>div:first-child img:focus {
    /* width: 300px; */
    transform-origin: 100% 0;
    transform: scale(4);
    transition: 0.3s;
}
.election-page .body__overview .overview__selection .overview__selection__body>div:last-child p:nth-child(1) {
    font-weight: bold;
    font-size: 0.9rem;
    border-bottom: 1px dotted #e1e1e1;
    padding-bottom: 0.2em;
}
.election-page .body__overview .overview__selection .overview__selection__body>div:last-child p:nth-child(2),
.election-page .body__overview .overview__selection .overview__selection__body>div:last-child p:nth-child(3),
.election-page .body__overview .overview__selection .overview__selection__body>div:last-child p:nth-child(4) {
    font-size: 0.7rem;
    padding-top: 0.7em;
}
.election-page .body__overview .overview__selection .overview__selection__body>div:last-child p span:nth-child(2) {
    font-weight: bold;
}

.election-page .body__overview .overview__scores {
    margin-top: 1.5em;
}
.election-page .body__overview .overview__scores h2 {
    font-size: 0.8rem;
    color: #1e1e1e;
    padding-bottom: 0.8em;
}
.election-page .body__overview .overview__scores .overview__scores__body {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 2px #e1e1e1;
    padding: 0.5em;
}
.election-page .body__overview .overview__scores .overview__scores__body table {
    text-align: center;
    border-collapse: collapse;
}
.election-page .body__overview .overview__scores .overview__scores__body tr {
    border-bottom: 1px solid #ebedf2;
    color: #222222;
    font-size: 0.75rem;
}
.election-page .body__overview .overview__scores .overview__scores__body th {
    color: #9f9f9f;
    font-size: 0.7rem;
    background: #eee;
    padding: 0.7em 0.4em;
}
.election-page .body__overview .overview__scores .overview__scores__body td {
    padding: 0.7em 0.4em;
}
.election-page .body__overview .overview__scores .overview__scores__body tr.selected td {
    background: #d5efff;
}
.election-page .body__overview .overview__scores .overview__scores__body td:last-child {
    font-size: smaller;
    font-weight: bold;
    color: #918859;
}
.election-page .body__overview .overview__scores .overview__scores__body tr.selected td {
    color: #598b91;
}
.election-page .body__overview .overview__scores .overview__scores__body tr:hover td {
    background: #f5f5f5;
    transition: .3s;
}


.election-page .body__chose {
    padding: 1em;
    display: none;
}
.election-page .body__chose .chose__map {
    box-shadow: 0 0 3px #c7c7c7;
    background: #191919;
    border-radius: 5px;
    padding: 0.5em;
    flex-direction: column;
}
.election-page .body__chose .chose__map img {
    box-shadow: 0 0 3px #e3e3e3;
    border-radius: 5px;
    width: 100%;
    max-width: 360px;
    cursor: zoom-in;
}
.election-page .body__chose .chose__map img:focus {
    transform-origin: 100% 0;
    transform: scale(4);
    transition: 0.5s;
}
.election-page .body__chose .chose__map a {
    font-weight: normal;
    width: unset;
    font-size: 0.8rem;
    height: 100%;
    padding-inline: 1em;
}
.election-page .body__chose .chose__map p {
    text-align: center;
    font-size: 0.6rem;
    padding: 0.6em;
    background: #393939;
    width: 100%;
    margin-inline: auto;
    border-radius: 3px;
    color: #fbfbfb;
    word-spacing: -1px;
}
.election-page .body__chose .chose__unit {
    margin-top: 1.5em;
}
.election-page .body__chose .chose__unit h2 {
    font-size: 0.8rem;
    color: #040d16;
    padding-bottom: 1em;
}
.election-page .body__chose .chose__unit .chose__unit__list {
    background: #fff;
    padding: 0.5em;
    border-radius: 3px;
    box-shadow: 0 0 3px #cfcfcf;
}
.election-page .body__chose .chose__unit .chose__unit__list__item {
    flex-basis: calc(50% - 1em);
    max-width: 200px;
    aspect-ratio: 2/1;
    height: auto;
    position: relative;
    border-radius: 3px;
    box-shadow: 0 0 2px #c7c7c7;
    border: 1px solid #b5b5b5;
}
.election-page .body__chose .chose__unit .chose__unit__list__item:hover {
    box-shadow: 0 0 5px #c7c7c7;
    transition: .3s;
}
.election-page .body__chose .chose__unit .chose__unit__list__item>div:first-child {
    filter: grayscale(1);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
.election-page .body__chose .chose__unit .chose__unit__list__item:hover>div:first-child {
    filter: grayscale(0);
    transition: .3s;
}
.election-page .body__chose .chose__unit .chose__unit__list__item>div:last-child {
    position: relative;
    background: #000000c7;
    color: #fff;
    font-size: 0.55rem;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    padding: 0.7em 0.5em;
    width: 100%;
    padding-inline: 1em;
}
.election-page .body__chose .chose__unit .chose__unit__list__item>div p:first-child {
    font-weight: bold;
    padding-bottom: 0.6em;
}
.election-page .body__chose .chose__unit .chose__unit__list__item>div p:last-child {
    justify-content: start;
}
.election-page .body__chose .chose__unit .chose__unit__list__item>div button {
    position: absolute;
    inset-inline-end: 5px;
    top: 10px;
    width: unset;
    height: unset;
    font-size: 0.6rem;
    font-weight: bold;
}
.election-page .body__chose .chose__unit .chose__unit__list__item>p {
    position: absolute;
    left: 5px;
    top: 5px;
    font-weight: bold;
    background: #00000099;
    font-size: 0.75rem;
    padding: 0.2em 0.4em;
    border-radius: 2px;
    color: #fff;
    border: 1px solid #000;
}

.election-page .body__details {
    padding: 1em;
    display: none;
}
.election-page .body__details .details__map {
    width: 100%;
    aspect-ratio: 3 / 2;
    height: auto;
    border-radius: 5px;
    filter: invert(1);
    overflow: hidden;
    max-height: 200px;
    min-width: 200px;
    flex-basis: 50%;
    /* border: 2px solid #959595; */
}
.election-page .body__details .details__map img {
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}
.election-page .body__details .details__map img:focus {
    transform-origin: 100% 0;
    transform: scale(4);
    transition: 0.5s;
}
.election-page .body__details .details__specific {
    flex-basis: calc(50% - 1em);
    align-self: end;
}
.election-page .body__details .details__specific__header h2 {
    font-size: 0.9rem;
    word-spacing: -1px;
}
.election-page .body__details .details__specific__header p {
    font-size: 0.7rem;
    color: #737373;
    padding-top: 0.5em;
}
.election-page .body__details .details__specific__info {
    padding-top: 1em;
}
.election-page .body__details .details__specific__info .details__specific__info__item {
    font-size: 0.8rem;
    background: #fff;
    padding: 0.5em;
    border-radius: 5px;
    box-shadow: 0 0 2px #dbdbdb;
    flex-grow: 1;
}
.election-page .body__details .details__specific__info .details__specific__info__item p:first-child span:first-child {
    color: #858585;
    padding-inline-end: 0.4em;
}
.election-page .body__details .details__specific__info .details__specific__info__item p:first-child span:last-child {
    font-weight: bold;
}
.election-page .body__details .details__specific__info .details__specific__info__item p:last-child {
    color: #878787;
    font-size: smaller;
    padding-top: 0.3em;
}
.election-page .body__details .details__calc {
    margin-top: 1em;
}
.election-page .body__details .details__calc h2 {
    font-size: 0.8rem;
    padding-bottom: 1em;
}
.election-page .body__details .details__calc .details__calc__info {
    padding: 0.5em;
    background: #fff;
    box-shadow: 0 0 2px #dbdbdb;
    border-radius: 3px;
}
.election-page .body__details .details__calc .details__calc__info__item {
    padding-bottom: 0.6em;
}
.election-page .body__details .details__calc .details__calc__info__item p:first-child {
    font-size: 0.7rem;
    word-spacing: -2px;
    color: #4b4b4b;
}
.election-page .body__details .details__calc .details__calc__info__item p:last-child {
    padding: 0.2em 0.5em;
    background: #f5f5f5;
    border-radius: 2px;
    min-width: 40px;
    border: 1px solid #d1d1d1;
    font-size: 0.75rem;
    font-weight: bold;
    max-width: 190px;
    flex-grow: 1;
}
.election-page .body__details .details__calc .details__calc__info__item div.check {
    background: #eee;
    border: 1px solid #c3c3c3;
    border-radius: 4px;
    padding: 0.1em;
    font-size: 0.7rem;
    font-weight: bold;
}
.election-page .body__details .details__calc .details__calc__info__item div.check span {
    padding: 0.3em;
    min-width: 50px;
    color: #646464;
    border-radius: 3px;
    transition: 0.3s;
    cursor: pointer;
}
.election-page .body__details .details__calc .details__calc__info__item div.check span.selected {
    background: #fff;
    box-shadow: 0 0 2px #757575;
    color: #031c02;
    transition: 0.3s;
}
.election-page .body__details .details__action {
    margin-top: 1em;
}
.election-page .body__details .details__action button.general-button {
    width: unset;
    height: unset;
    padding: 0.5em 1em;
    border-radius: 2px;
    font-weight: bold;
}
.election-page .body__details .details__action button.return {
    text-align: center;
    border: 1px solid #8b0000;
    padding: 0.5em 1em;
    font-size: 0.75rem;
    border-radius: 2px;
    cursor: pointer;
    background: #fffdfd;
    color: #6e0a0a;
    font-weight: bold;
    flex-basis: 25%;
}
.election-page .body__details .details__action button.return:hover {
    background: #ffdbdb;
    transition: 0.3s;
}

.election-page .body__others {
    padding: 1em;
    display: none;
}
/* ---------------------------- */
/* -------- Election-Page -----E */
/* ---------------------------- */


/* ---------------------------- */
/* S----- Installment-Page ---- */
/* ---------------------------- */
.installment-page .automation-segment {
    display: flex;
}
.installment-page .automation-segment>.installment-section {
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 2px #d6d6d6;
    overflow: hidden;
    position: relative;
    padding: 1em;
    flex-grow: 1;
    width: 100%;
}
.installment-page .installment__header {
    padding-bottom: 0.8em;
    border-bottom: 1px dashed #d1d1d1;
}
.installment-page .installment__header .installment__header__filter h2 {
    font-size: 0.85rem;
    word-spacing: -0.5px;
    color: #2b2b2b;
}
.installment-page .installment__header .installment__header__filter h2 select {
    padding: 0.3em 0.8em;
    font-size: 0.8rem;
    font-weight: bolder;
    min-width: 110px;
    border: none;
    /* field-sizing: content; */
}
.installment-page .installment__header .installment__header__filter p {
    color: #a38686;
    font-size: 0.7rem;
    font-weight: bold;
    padding-top: 0.5em;
}
.installment-page .installment__header .installment__header__action button {
    padding: 0.5em 0.8em;
}
.installment-page .installment__header .installment__header__action p {
    display: none;
    font-size: 0.8rem;
    color: #b7b7b7;
    font-weight: bold;
    padding-inline: 1em;
}
.installment-page .installment__header .installment__header__action.active p {
    display: block;
}
.installment-page .installment__header .installment__header__action.active button {
    display: none;
}

.installment-page .installment__body {
    padding-block: 1em;
}
.installment-page .installment__body .installment__body__list {
    background: #f1fbfb;
    padding: 0.7em;
    border-radius: 5px;
    position: relative;
    margin-inline: auto;
}
.installment-page .installment__body .installment__body__list--empty {
    color: #a0cbcb;
    width: 100%;
    max-width: unset;
    border-radius: 11px;
    box-shadow: 0 0 3px #d5d5d5;
}
.installment-page .installment__body .installment__body__list .installment__body__list__header {
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 3px #b3b3b3;
}
.installment-page .installment__body .installment__body__list .installment__body__list__header h3 {
    padding: 0.7em;
    color: #00acd5;
    position: relative;
    font-size: 0.75rem;
}
.installment-page .installment__body .installment__body__list .installment__body__list__header h3 input {
    border: none;
    field-sizing: content;
    pointer-events: none;
}
.installment-page .installment__body .installment__body__list.edit .installment__body__list__header h3 input {
    border-bottom: 1px solid #92eaff;
    padding-bottom: 0.2em;
    pointer-events: auto;
    padding-inline: 0.3em;
}
.installment-page .installment__body .installment__body__list.edit .installment__body__list__header h3 input::placeholder {
    color: #87b9c5;
}
.installment-page .installment__body .installment__body__list .installment__body__list__header h3 span.add {
    cursor: pointer;
    font-size: 1rem;
    display: none;
}
.installment-page .installment__body .installment__body__list .installment__body__list__header h3 span.remove {
    color: #f72b2b;
    font-size: 0.9rem;
    cursor: pointer;
    display: none;
}
.installment-page .installment__body .installment__body__list.edit .installment__body__list__header h3 span.add,
.installment-page .installment__body .installment__body__list.edit .installment__body__list__header h3 span.remove {
    display: flex;
}
.installment-page .installment__body .installment__body__list .installment__body__list__header h3 span:last-child {
    display: none;
    cursor: pointer;
    position: absolute;
    inset-inline-end: -10px;
    height: 100%;
    align-items: center;
}
.installment-page .installment__body .installment__body__list .installment__body__list__header h3 span:last-child:hover {
    color: #00523c;
}
.installment-page .installment__body .installment__body__list .installment__body__list__header h3:hover span:last-child {
    display: flex;
}
.installment-page .installment__body .installment__body__list.edit .installment__body__list__header h3:hover span:last-child {
    display: none !important;
}
.installment-page .installment__body .installment__body__list .installment__body__list__header p {
    padding: 0.7em;
    color: #838383;
    font-size: smaller;
    font-weight: bold;
    font-size: 0.8rem;
}
.installment-page .installment__body .installment__body__list.edit .installment__body__list__header p {
    display: none;
}
.installment-page .installment__body .installment__body__list .installment__body__list__header h4 {
    display: none;
    padding-inline: 0.5em;
}
.installment-page .installment__body .installment__body__list.edit .installment__body__list__header h4 {
    display: flex;
}
.installment-page .installment__body .installment__body__list .installment__body__list__header h4 span {
    font-size: 0.65rem;
    padding: 0.4em 0.8em;
    border-radius: 3px;
    word-spacing: -1px;
    font-weight: bold;
    cursor: pointer;
}
.installment-page .installment__body .installment__body__list .installment__body__list__header h4 span:first-child {
    background: #fff;
    border: 1px solid #830202;
    color: #710909;
}
.installment-page .installment__body .installment__body__list .installment__body__list__header h4 span:last-child {
    background: #095d71;
    border: 1px solid #026a83;
    color: #fff;
}
.installment-page .installment__body .installment__body__list .installment__body__list__header h4 span:first-child:hover {
    background: #ffdcdc;
    transition: 0.3s;
}
.installment-page .installment__body .installment__body__list .installment__body__list__header h4 span:last-child:hover {
    background: #032e39;
    transition: 0.3s;
}

.installment-page .installment__body .installment__body__list .installment__body__list__table {
    margin-top: 0.8em;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 1px #b3b3b3;
    padding: 0.5em;
}
.installment-page .installment__body .installment__body__list .installment__body__list__table table {
    border: 1px solid #ebedf2;
}
.installment-page .installment__body .installment__body__list .installment__body__list__table thead th {
    background: #161616;
    color: #9f9f9f;
    padding: 0.8em;
    font-size: 0.6rem;
}
.installment-page .installment__body .installment__body__list .installment__body__list__table tbody tr {
    border-bottom: 1px solid #ebedf2;
}
.installment-page .installment__body .installment__body__list .installment__body__list__table tbody tr[data-state="s0"] td {
    background: #f2fff4;
}
.installment-page .installment__body .installment__body__list .installment__body__list__table tbody tr:hover td {
    background: #fafafa;
}
.installment-page .installment__body .installment__body__list .installment__body__list__table tbody tr:last-child {
    border-bottom: none;
}
.installment-page .installment__body .installment__body__list .installment__body__list__table tbody tr.error td {
    background: #ffe6e6
}

.installment-page .installment__body .installment__body__list .installment__body__list__table tbody td {
    font-size: 0.75rem;
    padding: 0.6em;
}
.installment-page .installment__body .installment__body__list .installment__body__list__table tbody tr.empty {
    background: #efefef;
    font-size: 0.7rem;
    word-spacing: -1px;
    color: #939393;
}
.installment-page .installment__body .installment__body__list .installment__body__list__table tbody td input {
    border: none;
    padding-inline: 0.2em;
    padding-bottom: 0.2em;
    background: none;
    pointer-events: none;
}
.installment-page .installment__body .installment__body__list.edit .installment__body__list__table tbody td input {
    border-bottom: 1px solid #dbdbdb;
    pointer-events: auto;
}
.installment-page .installment__body .installment__body__list .installment__body__list__table tbody td.title input {
    field-sizing: content;
}
.installment-page .installment__body .installment__body__list .installment__body__list__table tbody td.date input {
    field-sizing: content;
    /* width: 35px; */
}
.installment-page .installment__body .installment__body__list .installment__body__list__table tbody td.date span {
    color: #656565;
}
.installment-page .installment__body .installment__body__list .installment__body__list__table tbody td.title {
    text-align: start;
    font-size: 0.7rem;
    color: #565656;
    word-spacing: -1px;
}
.installment-page .installment__body .installment__body__list .installment__body__list__table tbody td.state,
.installment-page .installment__body .installment__body__list .installment__body__list__table tbody td.action {
    padding: 0.3em;
}
.installment-page .installment__body .installment__body__list .installment__body__list__table tbody td.state span {
    padding: 0.3em;
    font-size: smaller;
    font-weight: bold;
    border-radius: 2px;
}
.installment-page .installment__body .installment__body__list .installment__body__list__table tbody tr[data-state='s0'] td.state span {
    background: #f2fcff;
    border: 1px solid #c0f2f3;
    color: #0d7791;
}
.installment-page .installment__body .installment__body__list .installment__body__list__table tbody tr[data-state='s1'] td.state span {
    background: #f2fff4;
    border: 1px solid #b7fdc1;
    color: #0d914a;
}
.installment-page .installment__body .installment__body__list .installment__body__list__table tbody td.action span {
    padding: 0.3em;
    font-weight: bold;
    border-radius: 2px;
    cursor: pointer;
    ;
    background: #fff2f2;
    border: 1px solid #fdb7b7;
    color: #910d0d;
    max-width: 40px;
    margin-inline: auto;
}


.installment-page .installment__body .installment__body__list .installment__body__list__table table td.action,
.installment-page .installment__body .installment__body__list .installment__body__list__table table th.action {
    display: none;
}
.installment-page .installment__body .installment__body__list.edit .installment__body__list__table table td.state,
.installment-page .installment__body .installment__body__list.edit .installment__body__list__table table th.state {
    display: none;
}
.installment-page .installment__body .installment__body__list.edit .installment__body__list__table table td.action,
.installment-page .installment__body .installment__body__list.edit .installment__body__list__table table th.action {
    display: table-cell;
}
.installment-page .installment__body .installment__body__list .installment__body__list__add,
.installment-page .installment__body .installment__body__list .installment__body__list__remove {
    position: absolute;
    bottom: 10px;
    inset-inline-end: 1.5em;
    bottom: 1em;
    font-size: 0.9rem;
    background: #0c5c97;
    color: #e4f2ff;
    border: 1px solid #7182ed;
    border-radius: 3px;
    cursor: pointer;
    padding: 0.4em 0.5em;
    cursor: pointer;
}

/* ---------------------------- */
/* ----- Installment-Page ----E */
/* ---------------------------- */


/* ---------------------------- */
/* S----- Attendance-Page ----- */
/* ---------------------------- */
.attendance-page .automation-segment {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 1em;
}

.attendance-page .attendance-header>div:first-child h2 {
    font-size: 1rem;
    color: #2b2b2b;
    word-spacing: -1px;
}
.attendance-page .attendance-header>div:first-child>p {
    color: #a6aec1;
}
.attendance-page .attendance-header>div:first-child>.header__date>p {
    font-size: 0.8rem;
    font-weight: bold;
    color: #303030;
    min-width: 140px;
}
.attendance-page .attendance-header>div:first-child>.header__date>span {
    background: #fefefe;
    width: 23px;
    height: 22px;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    font-size: 0.9rem;
    cursor: pointer;
}
.attendance-page .attendance-header>div:first-child>.header__date>span:hover {
    background: #f7f7f7;
    color: #424242;
    transition: 0.3s;
}
.attendance-page .attendance-header>div:last-child>button {
    font-size: 0.75rem;
    padding: 0.5em 0.9em;
    border-radius: 3px;
    word-spacing: -1px;
    cursor: pointer;
}
.attendance-page .attendance-header>div:last-child>button span:last-child {
    text-align: center;
}
.attendance-page .attendance-header>div:last-child>button.calender,
.attendance-page .attendance-header>div:last-child>button.vecation {
    border: 1px solid #fdffff;
    background: #fdffff;
}
.attendance-page .attendance-header>div:last-child>button.calender:hover,
.attendance-page .attendance-header>div:last-child>button.vecation:hover {
    background: #ededed;
    transition: 0.3s;
}
.attendance-page .attendance-header>div:last-child>button.new--staff{
    border: 1px solid #3a6e66;
    background: #3a6e66;
    color: #fff;
}
.attendance-page .attendance-header>div:last-child>button.new--staff:hover {
    background: #fafffe;
    color: #042e28;
    transition: 0.3s;
}
.attendance-page .attendance-tooltip .tooltip__item {
    background: #fff;
    padding: 0.5em;
    border-radius: 3px;
    box-shadow: 0 0 2px #d1d1d1;
    min-height: 125px;
    border: 2px solid #efefef;
}
.attendance-page .attendance-tooltip .tooltip__item .tooltip__item__header {
    padding-bottom: 1em;
}
.attendance-page .attendance-tooltip .tooltip__item .tooltip__item__header h3 {
    font-size: 0.85rem;
    color: #6189b3;
}
.attendance-page .attendance-tooltip .tooltip__item .tooltip__item__header h3 span:first-child {
    color: #0e5c96;
}
.attendance-page .attendance-tooltip .tooltip__item .tooltip__item__header p {
    font-size: 0.9rem;
    color: #a3a3a3;
    width: 19px;
    height: 19px;
    cursor: pointer;
}
.attendance-page .attendance-tooltip .tooltip__item .tooltip__item__header p:hover {
    color: #000;
    background: #fdfdfd;
    border-radius: 2px;
    box-shadow: 0 0 2px #ababab;
    transition: 0.3s;
}
.attendance-page .attendance-tooltip .tooltip__item .tooltip__item__header select {
    font-size: 0.6rem;
    color: #a3a3a3;
    cursor: pointer;
    border: 1px solid #ffffff;
    font-weight: bold;
}
.attendance-page .attendance-tooltip .tooltip__item .tooltip__item__header select:hover {
    color: #414040;
    transition: 0.3s;
}

.attendance-page .attendance-tooltip .tooltip__item .tooltip__item__body>span {
    width: 1px;
    background: #e7e7e7;
    margin-block: 0.6em;
}
.attendance-page .attendance-tooltip .tooltip__item .tooltip__item__body__section {
    min-width: 110px;
    flex-basis: 110px;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
}
.attendance-page .attendance-tooltip .tooltip__item .tooltip__item__empty {
    width: 100%;
    background: #eee;
    font-size: 0.8rem;
    color: #9d9d9d;
    font-weight: bold;
    border-radius: 4px;
    cursor: not-allowed;
}
.attendance-page .attendance-tooltip .tooltip__item .tooltip__item__body__section>p:first-child {
    font-size: 0.5rem;
    border-radius: 3px;
    text-align: center;
    font-weight: bold;
    width: fit-content;
    padding: 0.2em 1em;
    align-self: start;
    margin-inline-start: 1.2em;
}
.attendance-page .attendance-tooltip .tooltip__item .tooltip__item__body__section>p:first-child.active {
    background: #d9fdd7;
    color: #1db115;
    border: 1px solid #1db115;
}
.attendance-page .attendance-tooltip .tooltip__item .tooltip__item__body__section>p:first-child.deactive {
    background: #fdd7d7;
    color: #b11515;
    border: 1px solid #b11515;
}
.attendance-page .attendance-tooltip .tooltip__item .tooltip__item__body__section>h4 {
    font-size: 0.8rem;
    color: #545454;
    position: relative;
    width: 100%;
    text-align: center;
    justify-content: center;
}
.attendance-page .attendance-tooltip .tooltip__item .tooltip__item__body__section:hover>h4 {
    color: #000;
    transition: 0.3s;
}
.attendance-page .attendance-tooltip .tooltip__item .tooltip__item__body__section>h4 span:last-child {
    color: #cfcfcf;
    font-size: 0.75rem;
    cursor: pointer;
    display: none;
    position: absolute;
    left: 0;
}
.attendance-page .attendance-tooltip .tooltip__item .tooltip__item__body__section:hover>h4 span:last-child {
    display: flex;
}
.attendance-page .attendance-tooltip .tooltip__item .tooltip__item__body__section>h4 span:last-child:hover {
    color: #205bb7;
    transition: 0.3s;
}
.attendance-page .attendance-tooltip .tooltip__item .tooltip__item__body__section>p:last-child {
    font-size: 0.7rem;
    color: #8d8d8d;
}
.attendance-page .attendance-tooltip .tooltip__item.tooltip__item--report {
    min-height: fit-content;
}
.attendance-page .attendance-tooltip .tooltip__item.tooltip__item--report .tooltip__item__body__section>p:first-child {
    font-size: 0.7rem;
    color: #a1a1a1;
    word-spacing: -1px;
    padding-inline: 1em;
    margin: 0;
}
.attendance-page .attendance-tooltip .tooltip__item.tooltip__item--report .tooltip__item__body__section>h4 {
    font-size: 1.2rem;
    padding-inline: 1em;
}
.attendance-page .attendance-tooltip .tooltip__item.tooltip__item--report .tooltip__item__body__section>p {
    padding-inline: 1em;
}

.attendance-page .attendance-staff {
    padding-top: 1em;
}
.attendance-page .attendance-staff table {
    border-radius: 4px;
    overflow: hidden;
}
.attendance-page .attendance-staff table thead th {
    background: #d1d9df;
    padding: 0.5em;
    font-size: 0.8rem;
    color: #4e545a;
    border: 1px solid #cbcbcb;
}
.attendance-page .attendance-staff table tbody td {
    background: #fff
}
.attendance-page .attendance-staff table tbody td {
    border: 1px solid #f9f9f9;
    font-size: 0.8rem;
}
.attendance-page .attendance-staff table tbody tr td:first-child {
    border-inline-start: 1px solid #cbcbcb;
}
.attendance-page .attendance-staff table tbody tr td:last-child {
    border-inline-end: 1px solid #cbcbcb;
}
.attendance-page .attendance-staff table tbody tr:hover td {
    background: #fbfbfb;
    transition: 0.3s;
}

.attendance-page .attendance-staff table tbody td>div,
.attendance-page .attendance-staff table tbody td>p {
    padding: 0.6em 0.5em;
}

.attendance-page .attendance-staff table tbody td.name p span:last-child {
    padding-top: 0.2em;
    color: #b3b3b3;
    font-weight: bold;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
}
.attendance-page .attendance-staff table tbody td.name div {
    position: relative;
}
.attendance-page .attendance-staff table tbody td.name div>span {
    position: absolute;
    padding: 0.4em 0.5em;
    font-size: 0.95rem;
    color: #818181;
    cursor: pointer;
    border-radius: 4px;
    left: 5px;
}
.attendance-page .attendance-staff table tbody td.name div>span:hover {
    color: #04486a;
    box-shadow: 0 0 3px #b7b7b7;
    transition: 0.3s;
}
.attendance-page .attendance-staff table tbody td.time div p:first-child,
.attendance-page .attendance-staff table tbody td.time div p:last-child {
    font-weight: bold;
    letter-spacing: 1px;
    flex-basis: 15%;
}
.attendance-page .attendance-staff table tbody td.time div p:nth-child(2) {
    color: #8c8d8f;
    font-size: smaller;
    align-items: start;
}
.attendance-page .attendance-staff table tbody td.late p {
    font-size: 0.7rem;
    color: #520c0c;
    font-weight: bold;
    word-spacing: -0.5px;
}
.attendance-page .attendance-staff table tbody td.location p,
.attendance-page .attendance-staff table tbody td.shift p {
    font-size: 0.75rem;
    color: #525252;
}
.attendance-page .attendance-staff table tbody td.status p {
    padding: 0.4em;
    width: 70%;
    margin-inline: auto;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: bold;
    word-spacing: -0.5px;
}
.attendance-page .attendance-staff table tbody td.status.att_s0 p {
    border: 1px solid #2d749063;
    background: #ebfaff;
    color: #2d7490;
}
.attendance-page .attendance-staff table tbody td.status.att_s1 p {
    border: 1px solid #90692d63;
    background: #fff9a7;
    color: #90692d;
}
.attendance-page .attendance-staff table tbody td.status.att_s2 p {
    border: 1px solid #902d2d63;
    background: #ffebeb;
    color: #902d2d;
}
.attendance-page .attendance-staff table tbody td.status.att_s3 p {
    border: 1px solid #3b902d63;
    background: #f3ffeb;
    color: #3b902d;
}
.attendance-page .attendance-staff table tbody td.action p span {
    padding: 0.4em 0.5em;
    font-size: 0.95rem;
    color: #818181;
    cursor: pointer;
    border-radius: 4px;
}
.attendance-page .attendance-staff table tbody td.action p span:hover {
    color: #04486a;
    box-shadow: 0 0 3px #b7b7b7;
    transition: 0.3s;
}
.attendance-page .attendance-staff table tbody tr.empty td {
    text-align: center;
    padding: 0.8em;
    color: #fdacac;
    background: #fff6f6;
    font-weight: bold;
}
.attendance-page .attendance-staff table tbody tr.rest {
    display: none;
}
.attendance-page .attendance-staff table tbody tr.rest.active {
    display: table-row;
}
@media screen and (max-width: 700px) {
    .attendance-page .attendance-staff table tbody tr.rest.active {
        display: flex;
    }
}
.attendance-page .attendance-staff table tbody tr.rest td {
    background: #eee;
    color: #758997;
}
.attendance-page .attendance-sidebar {
    display: none;
    position: fixed;
    inset-inline-end: 13px;
    top: 10vh;
    top: 10dvh;
    bottom: 0;
    margin-block: auto;
    width: 300px;
    height: calc(90vh - 2.5rem);
    height: calc(90dvh - 2.5rem);
    background: #fff;
    box-shadow: 0 0 4px #686868;
    border-radius: 5px;
    z-index: 22;
}
.attendance-page .attendance-sidebar {
    padding: 0.4em 0.6em;
}
.attendance-page .attendance-sidebar .attendance-sidebar__header h2 span:first-child {
    font-size: 0.9rem;
    color: #040404;
    padding-block: 0.3em;
}
.attendance-page .attendance-sidebar .attendance-sidebar__header h2 span:last-child {
    font-size: 0.7rem;
    font-weight: normal;
    color: #383b3d;
    word-spacing: -1px;
}
.attendance-page .attendance-sidebar .attendance-sidebar__header p {
    align-self: start;
    padding: 0.7em 0.4em;
    color: #95989e;
    cursor: pointer;
}
.attendance-page .attendance-sidebar .attendance-sidebar__header p:hover {
    border-radius: 2px;
    box-shadow: 0 0 2px #c74545;
    color: #a71b1b;
    transition: 0.3s;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div {
    display: none;
    padding: 0.8em 0.5em;
    align-items: start;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__form__input>p {
    padding-bottom: 0.5em;
    padding-inline-start: 0.2em;
    font-size: 0.65rem;
    text-align: start;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__form__input select,
.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__form__input input {
    border: 1px solid #d3d3d3;
    padding: 0.3em 0.8em;
    font-size: 0.8rem;
    font-weight: bolder;
    height: 30px;
    width: 100%;
    text-align: center;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__form__input.number select,
.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__form__input.number input {
    letter-spacing: 0.5px;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__form__input.mini-action {
    padding-top: 0.3em;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__form__input.mini-action p {
    font-size: 0.75rem;
    padding: 0;
    word-spacing: -0.5px;
    padding-top: 0.3em;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__form__input.mini-action button {
    border: none;
    width: 30px;
    height: 30px;
    font-size: smaller;
    border-radius: 3px;
    cursor: pointer;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__form__input.mini-action.deactivate button {
    background: #ffd8d8;
    color: #af0000;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__form__input.mini-action.deactivate button:hover {
    background: #d12424;
    color: #fff;
    transition: 0.3s;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__form__input.mini-action.deactivate,
.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__form__input.mini-action.activate {
    display: none;
}
.attendance-page .attendance-sidebar.active .attendance-sidebar__body>div .sidebar__form__input.mini-action.deactivate {
    display: flex;
}
.attendance-page .attendance-sidebar.deactive .attendance-sidebar__body>div .sidebar__form__input.mini-action.activate {
    display: flex;
}

.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__form__input.mini-action.activate button {
    background: #daffd8;
    color: #09af00;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__form__input.mini-action.activate button:hover {
    background: #24d163;
    color: #fff;
    transition: 0.3s;
}

.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__form__input.mini-action div:last-child {
    background: #dddddd;
    padding: 0.2em;
    border-radius: 9px;
    width: 30px;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__form__input.mini-action div:last-child span {
    background: #fff;
    border-radius: 50%;
    height: 100%;
    width: 13px;
    cursor: pointer;
    transition: 0.4s;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__form__input.mini-action div:last-child span:hover {
    box-shadow: 0 0 2px #535353;
    transition: 0.3s;
}

.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__form__input.mini-action.active div:last-child {
    background: #bde9ff;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__form__input.mini-action.active div:last-child span {
    background: #3a6aa9;
    margin-inline-start: 10px;
    transition: 0.3s;
}


.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__form__input.half {
    flex-basis: 40%;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__form__input.full {
    flex-basis: 100%;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__action {
    padding-top: 1em;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__action button {
    border-radius: 2px;
    flex-basis: 80px;
    width: unset;
    height: 30px;
    font-weight: bold;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__action button:first-child {
    color: #434343;
    background: #fff;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__action button:first-child:hover {
    background: #ffd7d7;
    color: #a30202;
    border: 1px solid #a30202;
    transition: 0.2s;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__action button:last-child {
    flex-grow: 2;
}


.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__form__input.id,
.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__form__input.biometric {
    flex-basis: 25%;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div .sidebar__form__input.name {
    flex-basis: 65%;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div.attendance-sidebar__device .sidebar__form__input.port {
    flex-basis: 25%;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div.attendance-sidebar__shift .sidebar__form__input.daily,
.attendance-page .attendance-sidebar .attendance-sidebar__body>div.attendance-sidebar__shift .sidebar__form__input.weekly,
.attendance-page .attendance-sidebar .attendance-sidebar__body>div.attendance-sidebar__shift .sidebar__form__input.monthly {
    flex-basis: 25%;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div.attendance-sidebar__shift .sidebar__form__input.start input,
.attendance-page .attendance-sidebar .attendance-sidebar__body>div.attendance-sidebar__shift .sidebar__form__input.end input {
    border: none;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div.attendance-sidebar__shift .sidebar__form__input.start input::placeholder,
.attendance-page .attendance-sidebar .attendance-sidebar__body>div.attendance-sidebar__shift .sidebar__form__input.end input::placeholder {
    font-size: smaller;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div.attendance-sidebar__shift .sidebar__form__input.start>div,
.attendance-page .attendance-sidebar .attendance-sidebar__body>div.attendance-sidebar__shift .sidebar__form__input.end>div {
    border: 1px solid #d3d3d3;
    border-radius: 3px;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div.attendance-sidebar__staff .sidebar__form__input.name>div {
    position: relative;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div.attendance-sidebar__staff .sidebar__form__input.biometric {
    flex-basis: 10%;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div.attendance-sidebar__staff .sidebar__form__input.name {
    flex-basis: 100%;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div.attendance-sidebar__staff .sidebar__form__input.name .drop-down-menu {
    position: absolute;
    top: 100%;
    opacity: 0.98;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div.attendance-sidebar__staff .sidebar__form__input.name .drop-down-menu>div {
    margin-top: 0.2em;
    background: #656565d1;
    padding: 0.3em;
    border-radius: 3px;
    max-height: 225px;
    width: 80%;
    margin-inline: auto;
    border-bottom: 3px inset #656565;
    border-top: 3px inset #dbdbdb;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div.attendance-sidebar__staff .sidebar__form__input.name .drop-down-menu>div ul {
    margin-top: 0.5em;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div.attendance-sidebar__staff .sidebar__form__input.name .drop-down-menu>div ul li {
    padding: 0.7em 0.5em;
    font-size: 0.6rem;
    color: #3b3b3b;
    cursor: pointer;
    border-bottom: 1px solid #e7e7e765;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div.attendance-sidebar__staff .sidebar__form__input.name .drop-down-menu>div ul li p:first-child {
    font-weight: bold;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div.attendance-sidebar__staff .sidebar__form__input.name .drop-down-menu>div ul li.empty {
    text-align: center;
    font-size: 0.6rem;
    padding: 0.5em;
    color: #f96c6c;
    background: #ffe9e9;
    font-weight: bold;
    pointer-events: none;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div.attendance-sidebar__staff .sidebar__form__input.name .drop-down-menu>div ul li>span {
    padding: 0.3em 1em;
    background: #a4f5d4;
    font-weight: bold;
    border-radius: 4px;
    font-size: 0.5rem;
    color: #052b08;
    border: 1px solid #74e9ad;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div.attendance-sidebar__staff .sidebar__form__input.name .drop-down-menu>div ul li:hover {
    background: #f2f2f2;
    color: #000;
    background: #afafaf;
    transition: 0.3s;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div.attendance-sidebar__staff .sidebar__form__input.name .drop-down-menu>div>div {
    position: sticky;
    top: 0;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div.attendance-sidebar__staff .sidebar__form__input.name .drop-down-menu>div>div input {
    border-radius: 5px;
    font-weight: normal;
    height: 28px;
    color: #838383;
}
.attendance-page .attendance-sidebar .attendance-sidebar__body>div.attendance-sidebar__staff .sidebar__form__input.name .drop-down-menu>div>div>span {
    position: absolute;
    left: 0.5em;
    top: 6px;
}

@media screen and (max-width: 500px) {
    .attendance-page .attendance-sidebar {
        width: 90%;
        left: 0;
        right: 0;
        margin-inline: auto;
    }
}


.attendance-off {
    position: fixed;
    inset-inline-end: 13px;
    top: 12dvh;
    margin-block: auto;
    width: 330px;
    height: 85vh;
    height: 85dvh;
    background: #fff;
    box-shadow: 0 0 4px #686868;
    border-radius: 5px;
    z-index: 22;
    overflow: hidden;
    margin-left: -350px;
    z-index: -1;
    pointer-events: none;
    visibility: hidden;
    
}
.attendance-off.active {
    z-index: 22;
    pointer-events: auto;
    visibility: visible;
    margin-left: 0;
    transition: margin 0.4s;
}

.attendance-page .automation-segment:has(.attendance-off.active) > *:not(.attendance-off) {
    pointer-events: none;
    filter: blur(1.8px) grayscale(1.5) !important;
}

.attendance-off h2 {
    font-size: 1rem;
    padding: 0.8em;
}
.attendance-off h2 p:last-child {
    cursor: pointer;
}

.attendance-off .off__form {
    padding: 1em;
    background: #fafafa;
    border-bottom: 1px solid #939393;

}
.attendance-off .off__form input,
.attendance-off .off__form select {
    border: 1px solid #d3d3d3;
    padding: 0.3em 0.8em;
    font-size: 0.8rem;
    font-weight: bolder;
    height: 30px;
    width: 100%;
    text-align: center;
}
.attendance-off .off__form select {
    font-weight: bold;
}

.attendance-off .off__list .list__item {
    padding: 0.5em;
    font-size: 0.75rem;
    background: #eee;
    border: 1px dotted #8b8b8b;
    margin: 0.2em 0.3em;
    border-radius: 5px;
}
.attendance-off .off__list .list__item > div p:last-child {
    font-weight: bold;
}
.attendance-off .off__list .list__item > span {
    width: 20px;
}





.attendance-holiday {
    position: fixed;
    inset-inline-end: 13px;
    top: 12dvh;
    margin-block: auto;
    width: 330px;
    height: 85vh;
    height: 85dvh;
    background: #fff;
    box-shadow: 0 0 4px #686868;
    border-radius: 5px;
    z-index: 22;
    overflow: hidden;
    margin-left: -350px;
    z-index: -1;
    pointer-events: none;
    visibility: hidden;
    
}
.attendance-holiday.active {
    z-index: 22;
    pointer-events: auto;
    visibility: visible;
    margin-left: 0;
    transition: margin 0.4s;
}

.attendance-page .automation-segment:has(.attendance-holiday.active) > *:not(.attendance-holiday) {
    pointer-events: none;
    filter: blur(1.8px) grayscale(1.5) !important;
}

.attendance-holiday h2 {
    font-size: 1rem;
    padding: 0.8em;
}
.attendance-holiday h2 p:last-child {
    cursor: pointer;
}

.attendance-holiday .holiday__form {
    padding: 1em;
    background: #fafafa;
    border-bottom: 1px solid #939393;

}
.attendance-holiday .holiday__form input,
.attendance-holiday .holiday__form select {
    border: 1px solid #d3d3d3;
    padding: 0.3em 0.8em;
    font-size: 0.8rem;
    font-weight: bolder;
    height: 30px;
    width: 100%;
    text-align: center;
}
.attendance-holiday .holiday__form select {
    font-weight: bold;
}

.attendance-holiday .holiday__list .list__item {
    padding: 0.5em;
    font-size: 0.75rem;
    background: #eee;
    border: 1px dotted #8b8b8b;
    margin: 0.2em 0.3em;
    border-radius: 5px;
}
.attendance-holiday .holiday__list .list__item > div p:first-child {
    font-weight: bold;
}
.attendance-holiday .holiday__list .list__item > div p:last-child {
    color: #ef0e0e;
}
.attendance-holiday .holiday__list .list__item > span {
    width: 20px;
}

/* ---------------------------- */
/* ----- Attendance-Page ----E */
/* ---------------------------- */


/* ---------------------------- */
/* S----- Attendances-Page ----- */
/* ---------------------------- */
.attendances-page .automation-segment {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 1em;
}

.attendances-page .attendances-header>div:first-child .header__profile h3 span:first-child {
    font-size: 0.8rem;
    color: #101418;
    padding-bottom: 0.4em;
}
.attendances-page .attendances-header>div:first-child .header__profile h3 span:last-child {
    font-size: 0.55rem;
    padding: 0.3em 0.8em;
    background: #89b364;
    width: fit-content;
    color: #fff;
    border-radius: 2px;
    font-weight: normal;
    box-shadow: 0 0 2px #234704;
    letter-spacing: 0.5px;
}
.attendances-page .attendances-header>div:first-child > span {
    color: #919191;
}

.attendances-page .attendances-header > div:first-child > .header__about p span:first-child {
    color: #919598;
    font-size: 0.7rem;
    align-self: start;
    padding-bottom: 0.5em;
}
.attendances-page .attendances-header > div:first-child > .header__about p span:last-child {
    font-size: 0.8rem;
    align-self: center;
    font-weight: bold;
    word-spacing: 1px;
    color: #393b3d;
}
.attendances-page .attendances-header > div:last-child > .header__period {
    position: relative;
}

.attendances-page .attendances-header > div:last-child > .header__period > div.drop-down-menu {
    position: absolute;
    top: 100%;
    background: #d5d5d5;
    z-index: 5;
    border-radius: 3px;
    border: 2px solid #e9e9e9;
    box-shadow: 0 0 3px #757575;
    width: 102%;
    margin-top: 6px;
    
    outline: none;
}

.attendances-page .attendances-header > div:last-child > .header__period > div.drop-down-menu > div > div {
    background: #ffffff;
    border-radius: 5px;
    margin: 0.1em;
    padding: 0.3em;
}
.attendances-page .attendances-header > div:last-child > .header__period > div.drop-down-menu input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #fafafa;
    background: transparent;
    border-radius: 2px;
    font-size: 0.7rem;
    text-align: center;
    font-weight: bold;
}
.attendances-page .attendances-header > div:last-child > .header__period > div.drop-down-menu .date > span {
    font-size: smaller;
    opacity: 0.6;
}
.attendances-page .attendances-header > div:last-child > .header__period > div.drop-down-menu input::placeholder {
    font-weight: normal;
}
.attendances-page .attendances-header > div:last-child > .header__period > div.drop-down-menu input.year {
    flex-grow: 3;
}
.attendances-page .attendances-header > div:last-child > .header__period > div.drop-down-menu > div > div.active input {
    pointer-events: none;
    border: none;
}
.attendances-page .attendances-header > div:last-child > .header__period > div.drop-down-menu > div > div.active p:first-child {
    color: #b5b5b5;
}
.attendances-page .attendances-header > div:last-child > .header__period > div.drop-down-menu > div > div:last-child {
    position: relative;
    transition: 0.3s;
}
.attendances-page .attendances-header > div:last-child > .header__period > div.drop-down-menu > div > .date {
    display: none;
}
.attendances-page .attendances-header > div:last-child > .header__period > div.drop-down-menu.start > div > .date--s {
    display: flex;
}

.attendances-page .attendances-header > div:last-child > .header__period > div.drop-down-menu.end > div > .date--e {
    display: flex;
}

.attendances-page .attendances-header > div:last-child > .header__period > div.drop-down-menu p:first-child {
    font-size: 0.7rem;
    text-wrap: nowrap;
}
.attendances-page .attendances-header > div:last-child > .header__period > div.drop-down-menu p:last-child {
    padding-inline-start: 0.2em;
}
.attendances-page .attendances-header > div:last-child > .header__period > div.drop-down-menu p:last-child span {
    font-size: smaller;
    padding: 0.2em;
    border-radius: 2px;
    cursor: pointer;
    aspect-ratio: 1;
    width: 20px;
    justify-content: center;
    align-items: center;
}
.attendances-page .attendances-header > div:last-child > .header__period > div.drop-down-menu p:last-child span.remove {
    display: none;
}
.attendances-page .attendances-header > div:last-child > .header__period > div.drop-down-menu p:last-child span.add:hover {
    background: #ffffff38;
    color: #21cb40;
    transition: 0.3s;
}
.attendances-page .attendances-header > div:last-child > .header__period > div.drop-down-menu p:last-child span.remove:hover {
    background: #ffffff38;
    color: #bf0d0d;
    transition: 0.3s;
}

.attendances-page .attendances-header > div:last-child > .header__period > div.drop-down-menu > div > div.active p:last-child span.remove {
    display: flex !important;
}
.attendances-page .attendances-header > div:last-child > .header__period > div.drop-down-menu > div > div.active p:last-child span.add {
    display: none !important;
}
















.attendances-page .attendances-header > div:last-child > .header__period > div:first-child {
    border: 1px solid #d5d5d5;
    background: #fff;
    border-radius: 4px;
    font-size: 0.7rem;
    color: #555555;
    padding-inline: 0.5em;
    padding-block: 0.3em;
}
.attendances-page .attendances-header > div:last-child > .header__period > div:first-child > span {
    padding: 0.3em 0.4em;
    border-radius: 2px;
    
}
.attendances-page .attendances-header > div:last-child > .header__period > div:first-child > span.period:hover {
    cursor: pointer;
    color: #000;
    box-shadow: 0 0 3px #b7b7b7;
    transition: 0.3s;
}

.attendances-page .attendances-header > div:last-child > .header__period > div:first-child > span:first-child {
    color: #a7a7a7;
    padding-inline-end: 0.5em;
}

.attendances-page .attendances-header > div:last-child > button {
    padding: 0.3em 0.6em;
    font-size: 1rem;
    color: #3f3f3f;
    cursor: pointer;
    border-radius: 4px;
    border: none;
    background: none;
}
.attendances-page .attendances-header > div:last-child > button:hover {
    color: #04486a;
    box-shadow: 0 0 3px #b7b7b7;
    transition: 0.3s;
}



.attendances-page .attendances-body .body__nav {
    border-top: 1px solid #dddddd;
    margin-bottom: 0.7em;
}
.attendances-page .attendances-body .body__nav p {
    padding-inline: 0.5em;
    padding-block: 1.2em 0.7em;
    font-size: 0.75rem;
    color: #979b9d;
    cursor: pointer;
    position: relative;
    word-spacing: -1px;
}
.attendances-page .attendances-body .body__nav p:hover {
    color: #041e3c;
    transition: 0.3s;
}
.attendances-page .attendances-body .body__nav div:first-child p > span:last-child {
    position: absolute;
}
.attendances-page .attendances-body .body__nav p.active {
    color: #041e3c;
    transition: 0.3s;
}
.attendances-page .attendances-body .body__nav div:first-child p.active span:last-child {
    width: 100%;
    height: 2px;
    background: #979b9d;
    bottom: -1px;
    inset-inline-start: 0;
}
.attendances-page .attendances-body .body__nav div:last-child {
    align-self: end;
}
.attendances-page .attendances-body .body__nav p.add--attendance {
    background: #313744;
    padding: 0.5em;
    border-radius: 3px;
    color: #fff;
    font-size: 0.75rem;
    min-width: 90px;
    border: 1px solid #313744;
    cursor: pointer;
}
.attendances-page .attendances-body .body__nav p.add--attendance:hover {
    background-color: #eee;
    color: #313744;
    font-weight: bold;
    transition: 0.3s;
}

@media screen and (max-width: 1000px) {
    .attendances-page .attendances-header > div {
        justify-content: center;
    }
    .attendances-page .attendances-header .header__about {
        justify-content: center;
    }
    .attendances-page .attendances-body .body__nav > div {
        justify-content: center;
    }
}
@media screen and (max-width: 450px) {
    .attendances-page .attendances-body .body__nav > div p.deactive-feature {
        display: none;
    }

    .attendances-page .attendances-header>div:first-child > span {
        display: none;
    }
}


.attendances-page .attendances-body .body__main {
    background: #fff;
    padding: 0.5em;
    border-radius: 3px;
    box-shadow: 0 0 2px #d1d1d1;
    border: 1px solid #efefef;
}
.attendances-page .attendances-body .body__main .body__main__report {
    height: 100%;
}

.attendances-page .attendances-body .body__main .body__main__report table thead tr {
    border-bottom: 1px solid #dbdbdb;
    color: #222222;
    font-size: 0.8rem;
}
.attendances-page .attendances-body .body__main .body__main__report table thead tr th {
    padding-inline: 0.5em;
    padding-block: 0.5em;
    font-size: 0.7rem;
    color: #9b9b9b;
    background: #252525;
    border: 1px solid #252525;
}

.attendances-page .attendances-body .body__main .body__main__report table tbody tr td {
    font-size: 0.75rem;
    padding: 0.7em 0.3em;
    border: 1px solid #dbdbdb;
    color: #0c0c0c;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr:hover td {
    background: #f7f7f7;
    transition: 0.5s;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr.holiday td {
    background: #f9efef;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr.off td {
    background: #f2fffc;
}

.attendances-page .attendances-body .body__main .body__main__report table tbody tr td.no--padding {
    padding: 0.2em
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr td.day span {
    margin-inline: auto;
    border: 1px solid #d5d5d5;
    padding: 0.1em;
    border-radius: 3px;
    color: #7c7c7c;
    width: 85%;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: bold;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr[data-close='1'] td.day span {
    border: 1px solid #fbc8c8;
    color: #d76c6c;
    background: #fff0f0;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr td.time {
    font-weight: bold;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr td.time.s--time {
    color: #043d26;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr td.time.e--time {
    color: #3d0404;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr td.rest--att {
    color: #999999;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr td > h3 {
    font-weight: normal;
    font-size: inherit;
    position: relative;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr td > h3 span:last-child {
    position: absolute;
    left: 5px;
    font-size: 0.5rem;
    letter-spacing: -0.5px;
    font-weight: bold;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr.holiday td > h3 span {
    color: #ff0000;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr.off td > h3 span {
    color: #13a1b9;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr td > p > span {
    min-width: 25px;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr td > p > span:first-child {
    justify-content: center;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr td.duty span:first-child {
    color: #0869bf;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr td.over span:first-child {
    color: #2c760e;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr td.less span:first-child {
    color: #bf8008;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr td.delay span:first-child {
    color: #760e0e;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr td.note span {
    cursor: help;
    width: 100%;
    justify-content: center;
    padding: 0.3em;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr[data-note = ''] td.note span {
    cursor: default;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr[data-note = ''] td.note span {
    color: #7a7a7a;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr td.action {
    cursor: pointer;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr td.action span {
    width: 100%;
    justify-content: center;
    padding: 0.3em;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr td.action:hover {
    background: #fff6da;
    color: #856400;
    transition: 0.3s;
}
.attendances-page .attendances-body .body__main .body__main__report table tbody tr.empty td {
    color: #ffcaca;
    background: #fbeded;
    font-weight: bold;
    font-size: 1.2rem;
    cursor: not-allowed;
}

.attendances-page .attendances-body .body__main .body__main__report table tbody tr.overview td {
    background: #eee;
    font-weight: bold;
    padding-block: 1em;
    font-size: 0.8rem;
}




@media print {
    .attendances-page .automation-segment {
        gap: 1em !important;
    }
    .attendances-page .attendances-header > div:last-child > .header__period > div:first-child {
        font-size: 0.7rem;
    }
    .attendances-page .attendances-header > div:first-child > .header__about p span:last-child {
        font-size: 0.7rem;
    }
    .attendances-page .attendances-body .body__main {
        padding: 0em;
        box-shadow: none;
        border: none;
    }
    .attendances-page .attendances-body .body__main .body__main__report table thead tr th {
        padding-top: 0.2em;
        border: 1px solid #a7a7a7;
    }
    .attendances-page .attendances-body .body__main .body__main__report table tbody tr td {
        border: 1px solid #a7a7a7;
        font-size: 0.6rem !important;
        padding-block: 0.1em !important;
    }
    .attendances-page .attendances-body .body__main .body__main__report table tbody tr.overview td {
        background: #eee !important;
        font-weight: bold !important;
        padding-block: 0.7em !important;
        font-size: 0.75rem !important;
    }
    .attendances-page .attendances-body .body__main .body__main__report table tbody tr td span {
        padding-block: 0.1em !important;
        border: none !important;
    }
    .attendances-page .attendances-body .body__main .body__main__report table tbody tr td.day span {
        color: #a1a1a1;
        font-size: 0.6rem;
    }

    .attendances-page .attendances-body .body__main .body__main__report table tr th.action,
    .attendances-page .attendances-body .body__main .body__main__report table tr td.action {
        display: none;
    }
}




.attendances-page .attendances-edit {
    position: fixed;
    inset-inline-end: 13px;
    top: 12dvh;
    margin-block: auto;
    width: 330px;
    height: 85vh;
    height: 85dvh;
    background: #fff;
    box-shadow: 0 0 4px #686868;
    border-radius: 5px;
    z-index: 22;
    overflow: hidden;
    margin-left: -350px;
    z-index: -1;
    pointer-events: none;
    visibility: hidden;
}
.attendances-page .attendances-edit.active {
    z-index: 22;
    pointer-events: auto;
    visibility: visible;
    margin-left: 0;
    transition: margin 0.4s;
}

@media screen and (max-width: 500px) {
    .attendances-page .attendances-edit {
        width: 90%;
        height: 75dvh;
        left: 0;
        right: 0;
        margin-inline: auto !important;
    }
}

.attendances-page .attendances-edit .edit__header {
    padding: 0.4em 0.6em;
}
.attendances-page .attendances-edit .edit__header h2 span:first-child {
    font-size: 0.9rem;
    color: #040404;
    padding-block: 0.3em;
}
.attendances-page .attendances-edit .edit__header h2 span:last-child {
    font-size: 0.7rem;
    font-weight: normal;
    color: #383b3d;
    word-spacing: -1px;
}
.attendances-page .attendances-edit .edit__header > p {
    align-self: start;
    padding: 0.7em 0.4em;
    color: #95989e;
    cursor: pointer;
}
.attendances-page .attendances-edit .edit__header > p:hover {
    color: #414346;
    transition: 0.3s;
}

.attendances-page .attendances-edit .edit__body {
    display: none;
    position: relative;
    padding: 0.8em 0.5em;
}
.attendances-page .attendances-edit .edit__body > h3 {
    text-align: center;
    font-size: 0.7rem;
    font-weight: normal;
    color: #ffbbbb;
}

.attendances-page .attendances-edit .edit__body .body__item {
    background: #eee;
    padding: 0.5em;
    border-radius: 5px;
    border: 1px dotted #c1c1c1;
}
.attendances-page .attendances-edit .edit__body .body__item > p {
    font-weight: bold;
    font-size: 0.7rem;
    color: #4f4f4f;
    padding-bottom: 0.5em;
}
.attendances-page .attendances-edit .edit__body .body__item > .item__form {
    border: 1px dotted #a5a5a5;
    padding: 0.2em;
    margin-bottom: 0.2em;
    border-radius: 5px;
}

.attendances-page .attendances-edit .edit__body .body__item > .item__form .form__input > span {
    font-size: 0.8rem;
    color: #5d5d5d;
}
.attendances-page .attendances-edit .edit__body .body__item > .item__form input,
.attendances-page .attendances-edit .edit__body .body__item > .item__form select {
    min-width: 30px;
    max-width: 60px;
    font-size: 0.8rem;
    padding: 0.3em;
    border: none;
    background: transparent;
    text-align: center;
    field-sizing: content;

    pointer-events: none;
    color: #585858;
}
.attendances-page .attendances-edit .edit__body .body__item > .item__form.edit input,
.attendances-page .attendances-edit .edit__body .body__item > .item__form.edit select {
    pointer-events: auto;
    color: #000;
    border-bottom: 1px dashed #a7a7a7;
}
.attendances-page .attendances-edit .edit__body .body__item > .item__form input {
    font-weight: bold;
}
.attendances-page .attendances-edit .edit__body .body__item > .item__form input::placeholder {
    font-size: smaller;
}
.attendances-page .attendances-edit .edit__body .body__item > .item__form .form__action > span {
    display: none;
    color: #838383;
    font-size: smaller;
    padding: 0.3em;
    cursor: pointer;
}

.attendances-page .attendances-edit .edit__body .body__item > .item__form.show .form__action > span.show {
    display: flex;
}
.attendances-page .attendances-edit .edit__body .body__item > .item__form.edit .form__action > span.edit {
    display: flex;
}



.attendances-page .attendances-edit .edit__action {
    display: none;
    padding: 0.5em 0.3em;
    width: 100%;
    box-shadow: 0 0 3px #bfbfbf;
    background: #fafafa;
}
.attendances-page .attendances-edit .edit__action > .action__time,
.attendances-page .attendances-edit .edit__action > .action__date {
    background: #fafafa;
    border-radius: 5px;
    padding: 0.2em;
}


.attendances-page .attendances-edit .edit__action input,
.attendances-page .attendances-edit .edit__action select {
    background: transparent;
    border: none;
    border-bottom: 1px dashed #b3b3b3;
    padding: 0.3em 0.5em;
    font-weight: bold;
    field-sizing: content;
    text-align: center;
    letter-spacing: 1px;
    font-size: 0.75rem;
}
.attendances-page .attendances-edit .edit__action input::placeholder {
    font-weight: normal;
}


.attendances-page .attendances-edit .edit__action button {
    border-radius: 2px;
    width: unset;
    height: 30px;
    font-weight: bold;
    border: none;
    text-align: center;
    padding: 0.4em 0.5em;
    aspect-ratio: 1;
    color: #434343;
    background: #fff;
    font-size: 0.8rem;
    cursor: pointer;
}

.attendances-page .attendances-edit .edit__action button:hover {
    color: #fff;
    background: #434343;
    transition: 0.3s;
}

.attendances-page .attendances-edit .edit__action .action__date > span,
.attendances-page .attendances-edit .edit__action .action__time > span {
    font-size: smaller;
    color: #a1a1a1;
}





.attendances-page .automation-segment:has(.attendances-edit.active) {
    overflow: hidden !important;
}
.attendances-page .automation-segment:has(.attendances-edit.active) > *:not(.attendances-edit) {
    pointer-events: none;
    filter: blur(1.8px) grayscale(1.5)  !important;
}


.attendances-page .attendances-edit.edit .edit__body {
    display: flex;
}
.attendances-page .attendances-edit.new .edit__action {
    display: flex;
}


.attendance-page .automation-segment.popop {
    overflow: hidden !important;
}

.attendance-page .automation-segment.popop>*:not(.attendance-calender) * {
    filter: blur(1.2px) grayscale(0.6) !important;
    pointer-events: none !important;
}

.attendance-page .attendance-calender {
    display: none;
    background: #fff;
    padding: 1em;
    box-shadow: 0 3px 9px #757575;
    width: 90%;
    height: 90%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 4px;
    border: 2px solid #e1e1e1;
    overflow: hidden;
}

.attendance-page .attendance-calender>div:first-child {
    height: 100%;
}

.attendance-page .attendance-calender>div:first-child>div {
    background: #f3f3f3;
    padding: 0.8em;
    border: 1px solid #dfdfdf;
    border-radius: 5px;
    height: 100%;
    min-height: auto;
    flex-basis: 40%;
}

.attendance-page .attendance-calender .calender__view {
    position: relative;
}

.attendance-page .attendance-calender .calender__view>p span {
    position: absolute;
    width: 15px;
    height: 30px;
    background: #a5a5a5;
    top: -10px;
    outline: 7px solid #ffffff;
    border-radius: 2px;
}

.attendance-page .attendance-calender .calender__view>p span:first-child {
    left: 20%;
}

.attendance-page .attendance-calender .calender__view>p span:last-child {
    right: 20%;
}

.attendance-page .attendance-calender .calender__view>.view__header>p {
    cursor: pointer;
    font-size: 0.8rem;
}

.attendance-page .attendance-calender .calender__view>.view__header>p span.title {
    color: #6a6a6a;
}

.attendance-page .attendance-calender .calender__view>.view__header>p span.icon {
    color: #d2a43a;
    border-radius: 50%;
    border: 1px solid transparent;
    width: 20px;
    aspect-ratio: 1;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 500px) {
    .attendance-page .attendance-calender .calender__view>.view__header>p span.title {
        display: none;
    }
}


.attendance-page .attendance-calender .calender__view>.view__header>p:hover span.title {
    color: #d2a43a;
    transition: 0.3s;
}

.attendance-page .attendance-calender .calender__view>.view__header>p:hover span.icon {
    border-color: #d2a43a;
    font-size: 0.5rem;
    transition: 0.3s;
}

.attendance-page .attendance-calender .calender__view>.view__header>.header__title>.title__input {
    min-width: 140px;
    position: relative;
}

.attendance-page .attendance-calender .calender__view>.view__header>.header__title>.title__input>div>p {
    gap: 0.1em;
    margin-inline-start: 2px;
    display: none;
}

.attendance-page .attendance-calender .calender__view>.view__header>.header__title>.title__input>div>p span {
    width: 11px;
    aspect-ratio: 1;
    font-size: 0.6rem;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    color: #ddc06d;
    cursor: pointer;
}

.attendance-page .attendance-calender .calender__view>.view__header>.header__title>.title__input>div>p span:hover {
    outline: 1px solid #e5cb83;
    background: #fff292;
    transition: 0.3s;
}

.attendance-page .attendance-calender .calender__view>.view__header>.header__title input,
.attendance-page .attendance-calender .calender__view>.view__header>.header__title select {
    width: fit-content;
    field-sizing: content;
    min-width: 20px;
    text-align: center;
    border: none;
    background: transparent;
    padding: 0.2em;
    color: #e1b53a;
    font-weight: bold;
    font-size: 1.2rem;
    appearance: none;
    -webkit-appearance: none;
}

.attendance-page .attendance-calender .calender__view>.view__header>.header__title input {
    border-bottom: 1px dashed transparent;
}

.attendance-page .attendance-calender .calender__view>.view__header>.header__title>.title__input>div:focus input,
.attendance-page .attendance-calender .calender__view>.view__header>.header__title input:focus {
    border-color: #e1b53a;
    min-width: 30px;
    color: #bf941b;
    transition: 0.3s;
}

.attendance-page .attendance-calender .calender__view>.view__header>.header__title>.title__input>div:focus>p {
    display: flex;
}

.attendance-page .attendance-calender .calender__view>.view__header>.header__title>.title__input>div:has(input:focus)>p {
    display: flex;
}

.attendance-page .attendance-calender .calender__view>.view__header>.header__title select {
    cursor: pointer;
}

.attendance-page .attendance-calender .calender__view>.view__header>.header__title select:hover {
    color: #bf941b;
}

.attendance-page .attendance-calender .calender__view>.view__header>.header__title select option {
    font-size: 0.7rem;
    font-weight: normal;
}

.attendance-page .attendance-calender .calender__view>.view__header>.header__title>p.gregorian {
    color: #040404;
    font-size: 0.75rem;
    margin-top: 0.5em;
}

@media screen and (max-width: 500px) {
    .attendance-page .attendance-calender .calender__view>.view__header>.header__title {
        padding-top: 0.3em;
    }

    .attendance-page .attendance-calender .calender__view>.view__header>.header__title>p.gregorian {
        margin-top: 0;
    }

}

.attendance-page .attendance-calender .calender__view>.view__header>.header__title>p.lunar {
    color: #707070;
    font-size: 0.65rem;
    margin-top: 0.5em;
}

.attendance-page .attendance-calender .calender__view>.view__days {
    margin-top: 0.7em;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 3px #eee;
    padding: 0.5em;
    position: relative;
}

.attendance-page .attendance-calender .calender__view>.view__days .days__header {
    background: #ffc848;
    border-radius: 5px;
    max-height: 50px;
    outline: 5px solid #ffffff;
    position: sticky;
    top: 0;
    z-index: 2;
}

.attendance-page .attendance-calender .calender__view>.view__days .days__header .header__column {
    color: #fff;
    padding: 0.3em 0.5em;
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
}

.attendance-page .attendance-calender .calender__view>.view__days .days__row {
    margin-top: 0.5em;
    gap: 0.3em;
}

@media screen and (max-width: 350px) {
    .attendance-page .attendance-calender .calender__view>.view__days .days__row {
        gap: 0.1em;
    }
}

.attendance-page .attendance-calender .calender__view>.view__days .days__row .row__column {
    text-align: center;
    padding: 0.1em;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.attendance-page .attendance-calender .calender__view>.view__days .days__row .row__column:hover {
    background: #fff8e5;
    transition: 0.3s;
}

.attendance-page .attendance-calender .calender__view>.view__days .days__row .row__column>p:first-child {
    color: #2a2a2a;
    font-size: 0.95rem;
    font-weight: bold;
}

.attendance-page .attendance-calender .calender__view>.view__days .days__row .row__column>p:last-child {
    font-size: 0.6rem;
    color: #959595;
    padding-top: 0.4em;
    display: flex;
    justify-content: space-around;
    gap: 0.2em;
}


.attendance-page .attendance-calender .calender__view>.view__days .days__row .row__column.official {
    background: #fff6f6;
}

.attendance-page .attendance-calender .calender__view>.view__days .days__row .row__column.official>p:first-child {
    color: #d61f17;
}

.attendance-page .attendance-calender .calender__view>.view__days .days__row .row__column.official>p:last-child {
    color: #e12e00;
}

.attendance-page .attendance-calender .calender__view>.view__days .days__row .row__column.corporate {
    background: #edf4ff;
}

.attendance-page .attendance-calender .calender__view>.view__days .days__row .row__column.corporate>p:first-child {
    color: #1773d6;
}

.attendance-page .attendance-calender .calender__view>.view__days .days__row .row__column.corporate>p:last-child {
    color: #0077e1;
}

.attendance-page .attendance-calender .calender__view>.view__days .days__row .row__column.today {
    outline: 2px solid #ffc848;
}

.attendance-page .attendance-calender .calender__view>.view__days .days__row .row__column.unavailable {
    filter: contrast(0.1);
    opacity: 0.3;
    cursor: not-allowed;
    background: unset;
}

.attendance-page .attendance-calender .calender__view>.view__days .days__row .row__column.event {
    background: #fbfbfb;
}

.attendance-page .attendance-calender .calender__view>.view__days .days__row .row__column.event::after {
    content: "";
    aspect-ratio: 1;
    position: absolute;
    left: 0px;
    top: 0px;
    width: min(30%, 40px);
    background: #c1c1c1;
    clip-path: polygon(0% 0%, 50% 0%, 0% 50%);
}

/* .attendance-page .attendance-calender .calender__view > .view__days .days__row .row__column.official::after {
    content: "";
    aspect-ratio: 1;
    position: absolute;
    left: 0px;
    top: 0px;
    width: min(30%, 40px);
    background: #d61f17;
    clip-path: polygon(0% 0%, 50% 0%, 0% 50%);
} */
/* .attendance-page .attendance-calender .calender__view > .view__days .days__row .row__column.corporate::after {
    content: "";
    aspect-ratio: 1;
    position: absolute;
    left: 0px;
    top: 0px;
    width: min(30%, 40px);
    background: #1773d6;
    clip-path: polygon(0% 0%, 50% 0%, 0% 50%);
} */




.attendance-page .attendance-calender .calender__date .date__header>div {
    display: none;
    position: relative;
}

.attendance-page .attendance-calender .calender__date .date__header>.header__sync {
    display: flex;
}

.attendance-page .attendance-calender .calender__date .date__header h3 {
    color: #313131;
    font-size: 0.95rem;
    word-spacing: -1px;
}

.attendance-page .attendance-calender .calender__date .date__header p {
    background: #e7e7e7;
    padding: 1px;
    border: 1px solid #cbcbcb;
    border-radius: 15px;
    overflow: hidden;
    min-width: fit-content;
    gap: 0.2em;

    position: absolute;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: fit-content;
}

.attendance-page .attendance-calender .calender__date .date__header p span {
    color: #767676;
    font-size: 0.7rem;
    padding: 0.3em;
    word-spacing: -2px;
    padding-inline: 0.5em;
    cursor: pointer;
    text-align: center;
    border-radius: 8px;
}

.attendance-page .attendance-calender .calender__date .date__header p span:hover {
    background: #eee;
    transition: 0.3s;
}

.attendance-page .attendance-calender .calender__date .date__header p span.active {
    background: #fff;
    color: #484848;
    box-shadow: 0 0 2px #737373;
    transition: 0.3s;
}

.attendance-page .attendance-calender .calender__date .date__header p span>i {
    font-style: normal;
}

.attendance-page .attendance-calender .calender__date .date__header p span>i:last-child {
    font-size: smaller;
    color: #919191;
}

.attendance-page .attendance-calender .calender__date .date__header p span>i:nth-child(2) {
    display: none;
}


.attendance-page .attendance-calender .calender__date .date__header button {
    font-size: 0.6rem;
    padding: 0.4em 0.5em;
    word-spacing: -1px;
    cursor: pointer;
    /* font-weight: bold; */
}

.attendance-page .attendance-calender .calender__date .date__header button.off {
    background: #fafafa;
    color: #313131;
    border: none;
    outline: 1px solid #dbdbdb;
    border-radius: 2px;
    padding-inline: 0.8em;
}

.attendance-page .attendance-calender .calender__date .date__header button.off:hover {
    box-shadow: 0 0 3px #838383;
    transition: 0.3s;
}

.attendance-page .attendance-calender .calender__date .date__header button.event {
    border-radius: 3px;
    border: 1px solid #313131;
    background: #313131;
    color: #ffffff;
}

.attendance-page .attendance-calender .calender__date .date__header button.event i {
    line-height: 1px;
}

.attendance-page .attendance-calender .calender__date .date__header button.event:hover {
    color: #313131;
    background: #fff;
    transition: 0.3s;
}

.attendance-page .attendance-calender .calender__date .date__list {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 3px #eee;
    padding: 0.5em;
}

.attendance-page .attendance-calender .calender__date .date__list .list__holiday .holiday__item {
    position: relative;
    padding-block: 0.4em;
    margin-bottom: 0.3em;
    border-radius: 3px;
}

.attendance-page .attendance-calender .calender__date .date__list .list__holiday .holiday__item:hover {
    background: #fbfbfb;
    transition: 0.3s;
}

.attendance-page .attendance-calender .calender__date .date__list .list__holiday .holiday__item.official:hover {
    background: #fffafa;
    transition: 0.3s;

}

.attendance-page .attendance-calender .calender__date .date__list .list__holiday .holiday__item.corporate:hover {
    background: #fafcff;
    transition: 0.3s;

}

.attendance-page .attendance-calender .calender__date .date__list .list__holiday .holiday__item input {
    width: fit-content;
    border: none;
    background: transparent;
    field-sizing: content;
    min-width: 20px;
    text-align: center;
    padding-bottom: 0.1em;
    padding-inline: 0.2em;
    pointer-events: none;
    word-spacing: -1px;
}

.attendance-page .attendance-calender .calender__date .date__list .list__holiday .holiday__item input::placeholder {
    color: #d5d5d5;
}

.attendance-page .attendance-calender .calender__date .date__list .list__holiday .holiday__item.edit input {
    pointer-events: auto;
    border-bottom: 1px dashed #d9d9d9;
}

.attendance-page .attendance-calender .calender__date .date__list .list__holiday .holiday__item select {
    font-size: 0.55rem;
    border: 1px dashed #dfdfdf;
    border-radius: 3px;
    padding: 0.3em;
    appearance: none;
    -webkit-appearance: none;
    width: fit-content;
    color: #999999;
    pointer-events: none;
    background: #fafafa;
}

.attendance-page .attendance-calender .calender__date .date__list .list__holiday .holiday__item:hover select {
    visibility: hidden;
}

.attendance-page .attendance-calender .calender__date .date__list .list__holiday .holiday__item.edit select {
    pointer-events: auto;
    visibility: visible;
    border: 1px dashed #898989;
    color: #474747;
    appearance: auto;
    -webkit-appearance: auto;
    padding-inline: 0.1em;
}

.attendance-page .attendance-calender .calender__date .date__list .list__holiday .holiday__item>div {
    font-size: 0.75rem;
}

.attendance-page .attendance-calender .calender__date .date__list .list__holiday .holiday__item>div:first-child {
    color: #4b4b4b;
    font-weight: bold;
}

.attendance-page .attendance-calender .calender__date .date__list .list__holiday .holiday__item.official>div:first-child {
    color: #d7241c;
}

.attendance-page .attendance-calender .calender__date .date__list .list__holiday .holiday__item.corporate>div:first-child {
    color: #1773d6;
}

.attendance-page .attendance-calender .calender__date .date__list .list__holiday .holiday__item>div:nth-child(2) {
    color: #7c7c7c;
    font-size: 0.7rem;
}

.attendance-page .attendance-calender .calender__date .date__list .list__holiday .holiday__item.official>div:nth-child(2) {
    color: #d7241cc1;
}

.attendance-page .attendance-calender .calender__date .date__list .list__holiday .holiday__item.corporate>div:nth-child(2) {
    color: #1773d6c1;
}

.attendance-page .attendance-calender .calender__date .date__list .list__holiday .holiday__item>div:last-child {
    position: absolute;
    left: 5px;
}

.attendance-page .attendance-calender .calender__date .date__list .list__holiday .holiday__item>div:last-child span {
    font-size: 0.75rem;
    color: #818181;
    padding: 0.4em;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
}

.attendance-page .attendance-calender .calender__date .date__list .list__holiday .holiday__item:hover>div:last-child span {
    opacity: 1;
    pointer-events: auto;
    transition: 0.5s;
}

.attendance-page .attendance-calender .calender__date .date__list .list__holiday .holiday__item>div:last-child span.edit:hover {
    background: #d9ffdaee;
    color: #299906ee;
    transition: 0.3s;
}

.attendance-page .attendance-calender .calender__date .date__list .list__holiday .holiday__item>div:last-child span.remove:hover {
    background: #ffe0e0ee;
    color: #f90101ee;
    transition: 0.3s;
}


.attendance-page .attendance-calender .calender__date .date__list .list__sync {
    display: none;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__upload {
    padding: 1em;
    outline: 1px dashed #a9a9a9;
    border-radius: 2px;
    background: #e9e9e954;
    margin-bottom: 0.5em;
    flex-direction: column;
    position: relative;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__upload input[type='file'] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    cursor: pointer;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__upload span {
    font-size: 1.3rem;
    color: #919191;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__upload p {
    font-size: 0.7rem;
    color: #a5a5a5;
    padding-top: 0.7em;
    word-spacing: -1px;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__status {
    position: relative;
    font-size: 0.65rem;
    word-spacing: -1px;
    padding: 0.8em 0.3em;
    border-radius: 2px;
    font-weight: bold;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__status.uptodate {
    color: #1a5c97;
    background: #d8f0ff;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__status.obsolete {
    color: #977d1a;
    background: #fff7d8;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__status button {
    position: absolute;
    left: 2px;
    border-radius: 2px;
    color: #fff;
    padding: 0.3em;
    height: 80%;
    aspect-ratio: 1;
    border: none;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__status.uptodate button {
    background: #395c97;
    border: 1px solid #395c97;
    pointer-events: none;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__status.obsolete button {
    background: #978839;
    border: 1px solid #979339;
    cursor: pointer;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__status.obsolete button:hover {
    color: #978839;
    background: #fff;
    transition: 0.3s;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__status button>i {
    display: none;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__status.uptodate button>i.fa-check {
    display: initial;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__status.obsolete button>i.fa-rotate {
    display: initial;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__items {
    margin-top: 0.8em;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__items .sync__item {
    position: relative;
    padding: 0.5em;
    font-size: 0.8rem;
    margin-block: 0.3em;
    border-radius: 5px;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__items .sync__item:hover {
    background: #fafafa;
    transition: 0.3s;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__items .sync__item .item__icon {
    color: #054422;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__items .sync__item .item__title>p:first-child {
    color: #1e1e1e;
    word-spacing: -1px;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__items .sync__item .item__title>p:last-child {
    color: #a5a5a5;
    font-size: smaller;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__items .sync__item:hover .item__title>p:last-child {
    display: none;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__items .sync__item .item__action {
    position: absolute;
    left: 5px;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__items .sync__item .item__action span {
    font-size: 0.75rem;
    padding: 0.4em;
    border-radius: 3px;
    cursor: pointer;
    color: #6b6b6b;
    opacity: 0;
    pointer-events: none;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__items .sync__item:hover .item__action span {
    opacity: 1;
    pointer-events: auto;
    transition: 0.5s;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__items .sync__item .item__action span.remove:hover {
    background: #ffe6e6;
    color: #fb0e0e;
    transition: 0.3s;
}

.attendance-page .attendance-calender .calender__date .date__list .list__sync .sync__items .sync__item .item__action span.update:hover {
    background: #e6f3ff;
    color: #0e8cfb;
    transition: 0.3s;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off {
    display: none;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item {
    font-size: 0.7rem;
    position: relative;
    padding: 0.5em;
    border-radius: 6px;
    background: #e9e9e9;
    box-shadow: 0 0 3px #f3f3f3;
    margin-bottom: 0.5em;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item .item__header .header__title .title__profile {
    font-weight: bold;
    color: #464646;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item .item__header .header__title .title__info p {
    font-size: 0.5rem;
    padding: 0.4em 0.6em;
    border-radius: 10px;
    font-weight: bold;
    text-align: center;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item .item__header .header__title .title__info p.info__device {
    background: #f2e9ff;
    color: #331293;
    border: 1px solid #e4c2ff;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item .item__header .header__title .title__info p.info__shift {
    background: #e9f7ff;
    color: #125c93;
    border: 1px solid #c2e6ff;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item .item__header .header__action button {
    width: 23px;
    aspect-ratio: 1;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    background: none;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item .item__header .header__action button.accept {
    color: #2d8f2e;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item .item__header .header__action button.accept:hover {
    background: #d4ffd6;
    transition: 0.3s;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item .item__header .header__action button.reject {
    color: #f12e2e;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item .item__header .header__action button.reject:hover {
    background: #ffd6d6;
    transition: 0.3s;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item .item__header .header__action button.edit {
    opacity: 0;
    pointer-events: none;
    color: #878787;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item:hover .item__header .header__action button.edit {
    opacity: 1;
    pointer-events: auto;
    transition: 0.5s;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item .item__header .header__action button.edit:hover {
    background: #f3f3f3;
    transition: 0.3s;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item .item__sub {
    padding: 0.5em;
    background: #ffffff;
    border-radius: 3px;
    margin-top: 0.7em;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item .item__sub .sub__item {
    padding-block: 0.5em;
    padding-inline: 0.5em;
    border-radius: 3px;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item .item__sub .sub__item:hover {
    transition: 0.3s;
    background: #f9f9f9;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item .item__sub .sub__item div:first-child p:first-child {
    color: #a31642;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item .item__sub .sub__item div:first-child p:nth-child(2) {
    font-weight: bold;
    color: #3a5e64;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item .item__sub .sub__item div:first-child p:last-child {
    color: #939393;
    font-size: smaller;
    text-align: center;
    flex-grow: 1;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item .item__sub .sub__item div:last-child {
    opacity: 0;
    pointer-events: none;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item .item__sub .sub__item:hover div:last-child {
    opacity: 1;
    pointer-events: auto;
    transition: 0.3s;

}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item .item__sub .sub__item div:last-child p {
    width: 17px;
    aspect-ratio: 1;
    border-radius: 2px;
    cursor: pointer;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item .item__sub .sub__item div:last-child p:first-child {
    color: #d90000;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item .item__sub .sub__item div:last-child p:first-child:hover {
    background: #ffe9e9;
    transition: 0.3s;
}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item .item__sub .sub__item div:last-child p:last-child {
    color: #0fab07;

}

.attendance-page .attendance-calender .calender__date .date__list .list__off .off__item .item__sub .sub__item div:last-child p:last-child:hover {
    background: #e3ffde;
    transition: 0.3s;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off {
    display: none;
    height: 100%;
    padding: 1em;
    box-shadow: 0 0 3px #979393;
    border-radius: 5px;
    background: #f7f7f7;
    outline: 4px solid #e7e7e7;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__user>div {
    position: relative;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__user>div>span {
    position: absolute;
    inset-inline-start: 6px;
    top: 3px;
    color: #b9b9b9;
    font-size: smaller;
    background: #ffffff;
    width: fit-content;
    aspect-ratio: 1;
    padding: 0.3em;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__user select {
    background: #ffffff;
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    padding: 0.3em;
    color: #707070;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__dates {
    border: 1px dashed #d7d7d7;
    border-radius: 5px;
    background: #fff;
    position: relative;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__dates>p {
    display: none;
    color: #bdbdbd;
    font-size: 0.8rem;
    background: #fafafa;
    z-index: 2;
    width: 100%;
    height: 100%;
    cursor: not-allowed;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__dates>p span:first-child {
    font-size: 3rem;
    opacity: 0.6;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__dates.no--user {
    display: flex;
    justify-content: center;
    align-items: center;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__dates.no--user>p {
    display: flex;
}


.attendance-page .attendance-calender .calender__date .date__list .form__off .off__dates>.dates__list .list__item {
    padding: 0.3em;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__dates>.dates__list .list__item>.item__day {
    font-weight: bold;
    font-size: 0.85rem;
    color: #2d2d2d;
    border-radius: 2px;
    outline: 1px solid transparent;
    flex-basis: 23%;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__dates>.dates__list .list__item>.item__day:hover {
    outline-color: #dfdfdf;
    background: #fafafa;
    transition: 0.3s;

}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__dates>.dates__list .list__item>.item__day select {
    text-align: center;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    padding-inline: 0.6em;
    word-spacing: 4px;
    font-size: 0.8rem;
    height: 100%;
    background-color: transparent;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__dates>.dates__list .list__item>.item__note {
    position: relative;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__dates>.dates__list .list__item>.item__note input {
    width: 100%;
    border: none;
    border-bottom: 1px dashed #bdbdbd;
    padding-bottom: 0.3em;
    font-size: 0.75rem;
    color: #5a5a5a;
    text-align: center;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__dates>.dates__list .list__item>.item__note input::placeholder {
    font-size: smaller;
    color: #c1c1c1;
    text-align: center;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__dates>.dates__list .list__item>.item__note>span {
    position: absolute;
    top: 0px;
    inset-inline-end: -12px;
    font-size: smaller;
    color: #a254b5;
    pointer-events: none;
    opacity: 0;
    border-radius: 3px;
    padding: 0.2em;
    cursor: pointer;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__dates>.dates__list .list__item>.item__note>span:hover {
    box-shadow: 0 0 3px #b9b9b9;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__dates>.dates__list .list__item>.item__note:has(input:focus)>span {
    pointer-events: auto;
    opacity: 1;
    transition: 0.3s;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__dates>.dates__list .list__item>.item__action span {
    display: none;
    cursor: pointer;
    padding: 0.3em;
    font-size: 0.8rem;
    margin-top: 3px;
    color: #a5a5a5;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__dates>.dates__list .list__item.active>.item__action span.disable {
    display: initial;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__dates>.dates__list .list__item.active>.item__action span.disable:hover {
    color: #ff0000;
    transition: 0.3s;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__dates>.dates__list .list__item.deactive>.item__action span.enable {
    display: initial;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__dates>.dates__list .list__item.deactive>.item__action span.enable:hover {
    color: #0058ff;
    transition: 0.3s;
}




.attendance-page .attendance-calender .calender__date .date__list .form__off .off__dates>.dates__add {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0.3em;
    background: #fafafa;
    border-top: 1px dashed #e5e5e5;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__dates>.dates__add p {
    font-size: 0.6rem;
    text-align: center;
    color: #8b8b8b;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__dates>.dates__add button {
    background: #eee;
    border: none;
    width: 25px;
    aspect-ratio: 1;
    border-radius: 3px;
    color: #000000;
    outline: 1px solid #e1e1e1;
    font-size: 0.6rem;
    cursor: pointer;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__dates>.dates__add button:hover {
    background: #fff;
    transition: 0.3s;
}



.attendance-page .attendance-calender .calender__date .date__list .form__off .off__action button {
    padding: 0.5em;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    word-spacing: -1px;
    font-weight: bold;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__action button.accept {
    flex-grow: 3;
    background: #232323;
    color: #fff;
    border: 1px solid #232323;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__action button.accept:hover {
    background: #fff;
    color: #232323;
    transition: 0.3s;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__action button.cancel {
    border: 1px solid #d5d5d5;
    color: #7d7d7d;
}

.attendance-page .attendance-calender .calender__date .date__list .form__off .off__action button.cancel:hover {
    background: #ffe7e7;
    color: #ff5454;
    border-color: #ffcaca;
    transition: 0.3s;
}




/* ---------------------------- */
/* ----- Attendances-Page ----E */
/* ---------------------------- */


/* ---------------------------- */
/* S----- Events-Page ----- */
/* ---------------------------- */
.events-page .automation-segment {
    display: block;
}
.events-page .events-segment {
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 2px #d6d6d6;
    overflow: hidden;
    height: 100%;
    position: relative;
    padding: 1em;
}
.events-page .events-segment > div {
    border: 1px solid #ebebeb;
    padding: 0.5em;
    border-radius: 3px;;
}

.events-page .events-segment .sidebar__overview {
    background: #000000;
    border-radius: 5px;
    color: #fff;
    padding: 0.5em;
}

/* ---------------------------- */
/* ----- Events-Page -----E */
/* ---------------------------- */



/* ---------------------------- */
/* S----- Cartable-Page ----- */
/* ---------------------------- */
.cartable-page {
    display: flex;
    flex-direction: column;
    background-color: #d1d1d1;
}

.cartable-page .header-segment .header__nav {
    padding: 0.9em 1em;
    position: relative;
    background: #192028;
}
.cartable-page .header-segment .header__nav .nav__logo h1 {
    font-size: 1rem;
    background: linear-gradient(#096e9b, #14c09b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cartable-page .header-segment .header__nav .nav__menu {
    color: #c5c5c5;
    padding: 0.2em;
    border-radius: 7px;
    background: #192028;
    box-shadow: 0 0 2px #04162c;

    position: absolute;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: fit-content;
}
.cartable-page .header-segment .header__nav .nav__menu a {
    font-size: 0.75rem;
    padding: 0.3em 0.5em;
    border: 1px solid #232323;
    font-weight: bold;
    border-radius: 5px;
    transition: 0.5s;
}
.cartable-page .header-segment .header__nav .nav__menu a:hover {
    background: #eee;
    color: #000;
    transition: 0.3s;
}
.cartable-page .header-segment .header__nav .nav__menu a.exit:hover {
    border: 1px solid #6d1515;
    background: #6d1515;
    color: #ffffff;
    transition: 0.3s;

}
.cartable-page .header-segment .header__nav .nav__menu a.active {
    background: #fff;
    color: #000;
}
.cartable-page .header-segment .header__nav .nav__profile:hover {
    filter: drop-shadow(0px 0px 3px #eee);
    transition: 0.3s;
}


.cartable-page .header-segment .header__title {
    padding: 1em 3em;
    padding-bottom: 0.1em;
    justify-content: center;
    align-items: center;
}
.cartable-page .header-segment .header__title h2 {
    font-size: 1.2rem;
    color: #3e554d;
    padding-bottom: 0.8em;
}
.cartable-page .header-segment .header__title > div {
    border-bottom: 1px solid #bfbfbf;
    box-shadow: 0 4px 6px -6px #979797;
}
.cartable-page .header-segment .header__title > div p {
    padding: 0.7em 0.5em;
    padding-bottom: 1.2em;
    font-size: 0.8rem;
    word-spacing: -1px;
    color: #525252;
    margin-bottom: -1px;
    cursor: pointer;
    position: relative;
}
.cartable-page .header-segment .header__title > div p.active {
    color: #000;
    border-bottom: 1px solid #000;
}
.cartable-page .header-segment .header__title > div p.active span:nth-child(2) {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 5px solid #000000;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-inline: auto;
}
.cartable-page .header-segment .header__title > div p.active span:nth-child(3) {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 5px solid #d1d1d1;
    position: absolute;
    top: 95%;
    left: 0;
    right: 0;
    margin-inline: auto;
    transform: 0.3s;
}




.cartable-page .body-segment {
    padding-inline: 3em;
    padding-block: 0.5em 0.2em;
}
.cartable-page .body-segment > div:last-child {
    padding-block: 1em;
}
.cartable-page .body-segment .body__overview .overview__item {
    padding: 1em;
    background: #dfdfdf;
    border-radius: 10px;
    box-shadow: 0 0 3px #bbbbbb;
    cursor: pointer;
}
.cartable-page .body-segment .body__overview .overview__item:hover {
    box-shadow: 0 0 3px #eee;
    background: #eee;
    transition: 0.3s;
}
.cartable-page .body-segment .body__overview .overview__item.active {
    background: #ffffff;
}
.cartable-page .body-segment .body__overview .overview__item h3 {
    font-size: 0.7rem;
    color: #919191;
    font-weight: normal;
    word-spacing: -1px;
    padding-bottom: 1.5em;
}
.cartable-page .body-segment .body__overview .overview__item h3 span:first-child {
    width: 18px;
    height: 18px;
    background: #eee;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #8b8b8b;
}

.cartable-page .body-segment .body__overview .overview__item > div p:first-child {
    font-weight: bold;
}
.cartable-page .body-segment .body__overview .overview__item > div p:first-child span:first-child {
    font-weight: bold;
    color: #252525;
}
.cartable-page .body-segment .body__overview .overview__item > div p:last-child span:first-child {
    width: 4px;
    height: 15px;
}
.cartable-page .body-segment .body__overview .overview__item > div p:last-child span:last-child {
    font-size: 0.8rem;
    font-weight: bold;
}



.cartable-page .body-segment .body__last-activity {
    flex-basis: calc(30% - 1em);
}
.cartable-page .body-segment .body__last-activity .last-activity__chart {
    padding: 0.8em;
    background: #dfdfdf;
    border-radius: 10px;
    box-shadow: 0 0 3px #bbbbbb;
}
.cartable-page .body-segment .body__last-activity .last-activity__chart > p:first-child {
    margin-bottom: 0.5em;
    font-size: 0.8rem;
    font-weight: bold;
    color: #595959;
    padding-inline: 0.5em
}
.cartable-page .body-segment .body__last-activity .last-activity__chart > p:last-child {
    width: 100%;
    height: 6px;
    gap: 0.2em
    
}
.cartable-page .body-segment .body__last-activity .last-activity__chart > p:last-child span {
    display: none;
    height: 100%;
    border-radius: 2px;
    cursor: pointer;
}
.cartable-page .body-segment .body__last-activity .last-activity__chart > p:last-child span:hover {
    box-shadow: 0 0 3px #656565;
    transition: 0.3s;
}

.cartable-page .body-segment .body__last-activity .last-activity__event {
    padding: 0.8em;
    background: #dfdfdf;
    border-radius: 10px;
    box-shadow: 0 0 3px #bbbbbb;
}
@media screen and (max-width: 800px) {
    .cartable-page .body-segment .body__last-activity .last-activity__event {
        max-height: 300px;
    }

}
.cartable-page .body-segment .body__last-activity .last-activity__event h3 {
    font-size: 0.75rem;
    color: #434343;
    font-weight: normal;
    word-spacing: -1px;
    padding-bottom: 1em;
}

.cartable-page .body-segment .body__last-activity .last-activity__event ul li {
    background: #eee;
    padding: 0.4em 0.7em;
    border-radius: 5px;
    box-shadow: 0 0 3px #b1b1b1;
    border: 1px solid #eee;
    font-size: 0.8rem;
    margin-bottom: 0.5em;
}
.cartable-page .body-segment .body__last-activity .last-activity__event ul li:hover {
    box-shadow: 0 0 3px #eee;
    border: 1px solid #c5c5c5;
    transition: 0.3s;
}
.cartable-page .body-segment .body__last-activity .last-activity__event ul li > div p span:first-child {
    font-weight: bold;
    padding-bottom: 0.3em;
    font-size: 0.75rem;
}
.cartable-page .body-segment .body__last-activity .last-activity__event ul li > div p span:first-child strong:first-child {
    /* color: #ab1515; */
}
.cartable-page .body-segment .body__last-activity .last-activity__event ul li > div p span:last-child {
    color: #777777;
    font-size: smaller;
}
.cartable-page .body-segment .body__last-activity .last-activity__event ul li > p {
    align-items: end;
    font-size: 0.7rem;
    color: #05330f;
    font-weight: bold;
    letter-spacing: 0.6px;
}
.cartable-page .body-segment .body__last-activity .last-activity__event ul li > p span:last-child {
    color: #216959;
}











.cartable-page .body-segment .body__list {
    flex-basis: 70%;
    background: #3DAE9A;
    background: linear-gradient(90deg, rgba(42, 123, 155, 1) 0%, rgba(40, 174, 175, 1) 50%, rgba(61, 174, 154, 1) 100%);
    border-radius: 12px;
    box-shadow: 0 0 3px #a1a1a1;
    
    padding: 1em;
}
.cartable-page .body-segment .body__list .list__search {
    color: #e5e5e5;
    padding-bottom: 1.2em;
}
.cartable-page .body-segment .body__list .list__search div:first-child {
    position: relative;
}
.cartable-page .body-segment .body__list .list__search div:first-child input {
    width: fit-content;
    field-sizing: content;
    border: none;
    background: none;
    letter-spacing: 0.5px;
    font-size: 0.8rem;
    font-weight: bold;
}
.cartable-page .body-segment .body__list .list__search div:first-child input::placeholder {
    letter-spacing: 0px;
    color: #e5e5e5;
    font-weight: normal;
}
.cartable-page .body-segment .body__list .list__search div:first-child span:last-child {
    display: none;
    position: absolute;
    inset-inline-end: -38px;
    color: #680808;
    height: unset;
    padding: 0.3em;
    border-radius: 3px;
    cursor: pointer;
}
.cartable-page .body-segment .body__list .list__search div:first-child span:last-child:hover {
    background: #fec2c2;
    transition: 0.3s;
}
.cartable-page .body-segment .body__list .list__search select {
    border: none;
    background: transparent;
    font-size: 0.7rem;
}
.cartable-page .body-segment .body__list .list__search select option {
    color: #000;
}
.cartable-page .body-segment .body__list .list__search button {
    width: 24px;
    height: 20px;
    border: 1px solid #bfbfbf;
    color: #fff;
    background: #3a3a3a87;
    text-align: center;
    border-radius: 4px;
    font-size: smaller;
    cursor: pointer;
}
.cartable-page .body-segment .body__list .list__search button:hover {
    background: #fff;
    color: #000;
    transition: 0.3s;
}

.cartable-page .body-segment .body__list .list__table > h3 {
    color: #ffffff;
    padding-block: 1.1em;
    font-size: 1rem;
    display: none;
}



.cartable-page .body-segment .body__list .list__table > ul {
    width: 100%;
}
.cartable-page .body-segment .body__list .list__table > ul > .li__group {
    background: #0000006e;
    outline: 2px solid #063108;
    border-radius: 5px;
    padding: 0.4em;
    margin-bottom: 1em;
}
.cartable-page .body-segment .body__list .list__table > ul > .li__group > .li__group__title p:first-child {
    font-weight: bold;
    color: #9affe9;
    padding: 0.4em 0.8em;
    margin-bottom: 0.9em;
    font-size: 0.75rem;
    border: 1px solid #181818;
    border-radius: 5px;
    background: #00000085;
}
.cartable-page .body-segment .body__list .list__table > ul > .li__group > .li__group__title p:last-child {
    font-weight: bold;
    color: #ffffff;
    padding: 0.4em 0.8em;
    margin-bottom: 0.9em;
    font-size: 0.8rem;
    border: 1px solid #181818;
    border-radius: 5px;
    background: #00000085;
}
.cartable-page .body-segment .body__list .list__table > ul li {
    width: 100%;
    background: #ffffff47;
    padding: 0.5em;
    border-radius: 10px;
    font-size: 0.75rem;
    margin-bottom: 0.2em;
    position: relative;
}
.cartable-page .body-segment .body__list .list__table > ul li:hover {
    background: #ffffff9e;
    transition: 0.4s;
}
.cartable-page .body-segment .body__list .list__table > ul li.empty {
    background: #ff000038;
    border-radius: 3px;
    color: #650000;
    font-weight: bold;
    border: 1px solid #650000;
    cursor: not-allowed;
}
.cartable-page .body-segment .body__list .list__table > ul li > div.row {
    cursor: pointer;
}
.cartable-page .body-segment .body__list .list__table > ul li > div.row div.cell.profile {
    color: #141414;
    flex-basis: 30%;
}
.cartable-page .body-segment .body__list .list__table > ul li > div.row div.cell.profile p span:first-child  {
    color: #fff;
}
.cartable-page .body-segment .body__list .list__table > ul li:hover > div.row div.cell.profile p span:first-child  {
    color: #524545;
    font-weight: bold;
    transition: 0.3s;
}
.cartable-page .body-segment .body__list .list__table > ul li > div.row div.cell.profile p span:last-child  {
    font-weight: bold;
}
.cartable-page .body-segment .body__list .list__table > ul li > div.row div.cell.description {
    color: #555555;
    font-size: 0.7rem;
    word-spacing: -1px;
    flex-grow: 2;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cartable-page .body-segment .body__list .list__table > ul li > div.row div.cell.state {
    padding: 0.6em 0.6em;
    border-radius: 4px;
    font-size: 0.65rem;
    word-spacing: -1px;
    border: 1px solid;
    color: #ffffff;
}
.cartable-page .body-segment .body__list .list__table > ul li > div.row div.cell.state span:first-child {
    background: #fff;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    color: #000000;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: smaller;
}

.cartable-page .body-segment .body__list .list__table > ul li[data-state="0"] > div.row div.cell.state {
    background: #db3636;
    /* border: 1px solid #a90000; */
    border: none;
}
.cartable-page .body-segment .body__list .list__table > ul li[data-state="0"] > div.row div.cell.state p span:first-child {
    color: #db3636;
}
.cartable-page .body-segment .body__list .list__table > ul li[data-state="1"] > div.row div.cell.state {
    background: #920ea3;
    /* border: 1px solid #a90000; */
    border: none;
}
.cartable-page .body-segment .body__list .list__table > ul li[data-state="1"] > div.row div.cell.state p span:first-child {
    color: #920ea3;
}
.cartable-page .body-segment .body__list .list__table > ul li[data-state="2"] > div.row div.cell.state {
    background: #ec71de;
    /* border: 1px solid #0074a9; */
    border: none;
}
.cartable-page .body-segment .body__list .list__table > ul li[data-state="2"] > div.row div.cell.state p span:first-child {
    color: #ec71de;
}
.cartable-page .body-segment .body__list .list__table > ul li[data-state="3"] > div.row div.cell.state {
    background: #369ddb;
    /* border: 1px solid #0074a9; */
    border: none;
}
.cartable-page .body-segment .body__list .list__table > ul li[data-state="3"] > div.row div.cell.state p span:first-child {
    color: #369ddb;
}
.cartable-page .body-segment .body__list .list__table > ul li[data-state="4"] > div.row div.cell.state {
    background: #db7b36;
    /* border: 1px solid #a94200; */
    border: none;
}
.cartable-page .body-segment .body__list .list__table > ul li[data-state="4"] > div.row div.cell.state p span:first-child {
    color: #db7b36;
}
.cartable-page .body-segment .body__list .list__table > ul li[data-state="5"] > div.row div.cell.state {
    background: #8cbb21;
    /* border: 1px solid #89a900; */
    border: none;
}
.cartable-page .body-segment .body__list .list__table > ul li[data-state="5"] > div.row div.cell.state p span:first-child {
    color: #8cbb21;
}
.cartable-page .body-segment .body__list .list__table > ul li[data-state="6"] > div.row div.cell.state {
    background: #3649db;
    /* border: 1px solid #0007a9; */
    border: none;
}
.cartable-page .body-segment .body__list .list__table > ul li[data-state="6"] > div.row div.cell.state p span:first-child {
    color: #3649db;
}
.cartable-page .body-segment .body__list .list__table > ul li[data-state="7"] > div.row div.cell.state {
    background: #1cb16d;
    /* border: 1px solid #00a94a; */
    border: none;
}
.cartable-page .body-segment .body__list .list__table > ul li[data-state="7"] > div.row div.cell.state p span:first-child {
    color: #1cb16d;
}
.cartable-page .body-segment .body__list .list__table > ul li > div.row div.cell.state span:last-child {
    text-align: center;
}






.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu {
    position: relative;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu--show {
    transition: unset !important;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu.drop-down-menu--show > div {
    background: #ffffff61;
    border-radius: 5px;
    padding: 0.8em;
    margin-top: 0.9em;
    box-shadow: 0 0 2px #858585;
    
    position: relative;
}

.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu.drop-down-menu--show > div > span {
    position: absolute;
    left: 10px;
    top: 10px;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu.drop-down-menu--show > div > span.edit {
    color: #085318;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu.drop-down-menu--show > div > span.remove {
    color: #530808;
    display: none;
}
.cartable-page .body-segment .body__list .list__table > ul li.edit .drop-down-menu.drop-down-menu--show > div > span.edit {
    display: none;
}
.cartable-page .body-segment .body__list .list__table > ul li.edit .drop-down-menu.drop-down-menu--show > div > span.remove {
    display: flex;
}


.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form:last-child {
    padding-top: 0.5em;
    flex-grow: 3;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .cell__form__item p {
    font-weight: bold;
    font-size: 0.65rem;
    flex-basis: 70px;
    word-spacing: -1px;
    color: #8f8f8f;
    flex-grow: unset;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .cell__form__item input,
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .cell__form__item select,
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .cell__form__item textarea {
    background: unset;
    border: none;
    padding: 0.2em;
    min-width: 90px;
    text-align: center;
    field-sizing: content;
    pointer-events: none;
    border-bottom: none;
    color: #626262;
    font-size: 0.7rem;
}
.cartable-page .body-segment .body__list .list__table > ul li.edit .drop-down-menu .cell__sub__form .cell__form__item input,
.cartable-page .body-segment .body__list .list__table > ul li.edit .drop-down-menu .cell__sub__form .cell__form__item select {
    border-bottom: 1px dotted #8f8f8f;
}
.cartable-page .body-segment .body__list .list__table > ul li.edit .drop-down-menu .cell__sub__form .cell__form__item input,
.cartable-page .body-segment .body__list .list__table > ul li.edit .drop-down-menu .cell__sub__form .cell__form__item select,
.cartable-page .body-segment .body__list .list__table > ul li.edit .drop-down-menu .cell__sub__form .cell__form__item textarea {
    pointer-events: auto;
    color: #000;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .cell__form__item input::placeholder {
    font-size: smaller;
    color: #ababab;
}
.cartable-page .body-segment .body__list .list__table > ul li.edit .drop-down-menu .cell__sub__form .cell__form__item textarea::placeholder {
    text-align: center;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .cell__form__item select {
    appearance: none;
    -webkit-appearance: none;
    color: #717171;
}

.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .cell__form__item textarea {
    border: 1px solid #9b9b9b;
    flex-grow: 1;
    border-radius: 3px;
    text-align: start;
    background: #ffffff54;
}
.cartable-page .body-segment .body__list .list__table > ul li.edit .drop-down-menu .cell__sub__form .cell__form__item textarea {
    background: #ffffff;

}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .cell__form__item.note p {
    flex-basis: unset;
}

.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .form__upload__title {
    font-weight: bold;
    font-size: 0.65rem;
    word-spacing: -1px;
    color: #8f8f8f;
    padding-top: 0.9em;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .form__upload__list .upload__list__item {
    border-radius: 3px;
    padding: 0.3em;
    margin-bottom: 0.2em;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .form__upload__list .upload__list__item.progress {
    border: 1px solid #797015;
    background: #fff78d7a;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .form__upload__list .upload__list__item.done {
    border: 1px solid #157945;
    background: #ceffd97a;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .form__upload__list .upload__list__item > div:first-child {
    align-items: start;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .form__upload__list .upload__list__item > div:first-child input {
    background: unset;
    border: none;
    border-bottom: 1px dotted #3d3d3d;
    padding: 0.2em;
    field-sizing: content;
    color: #000000;
    font-size: 0.7rem;
    text-align: start;
    font-weight: bold;
    margin-bottom: 0.5em;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .form__upload__list .upload__list__item.done > div:first-child input {
    color: #626262;
    border-bottom: none;
    margin-bottom: 0;
    pointer-events: none;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .form__upload__list .upload__list__item > div:first-child p {
    font-size: 0.7rem;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .form__upload__list .upload__list__item > div:nth-child(2) {
    width: 40px;
    height: 40px;
    filter: grayscale(0.5);
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .form__upload__list .upload__list__item > div:last-child span {
    display: none;
    color: #9da2a8;
    padding: 0.3em;
    cursor: pointer;
    font-size: 0.8rem;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .form__upload__list .upload__list__item.progress > div:last-child span.progress {
    display: flex;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .form__upload__list .upload__list__item.done > div:last-child span.done {
    display: flex;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .form__upload__list .upload__list__item > div:last-child span.cancel:hover,
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .form__upload__list .upload__list__item > div:last-child span.remove:hover {
    color: #cb0606;
    transition: 0.3s;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .form__upload__list .upload__list__item > div:last-child span.upload:hover,
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .form__upload__list .upload__list__item > div:last-child span.download:hover {
    color: #2ccb06;
    transition: 0.3s;
}


.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .form__upload__list .upload__list__item.empty {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dotted #a5a5a5;
    border-radius: 4px;
    padding: 0.5em;
    width: 100%;
    height: 100%;
    color: #a5a5a5;
}


.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .form__upload__action {
    position: relative;
    outline: 1px dashed #a9a9a9;
    border-radius: 2px;
    background: #e9e9e954;
    margin-bottom: 0.5em;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .form__upload__action input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    cursor: pointer !important;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .form__upload__action input::file-selector-button {
    cursor: pointer;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .form__upload__action span {
    cursor: grab;
    font-size: 1rem;
    color: #919191;
    width: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 0.5em;
}



.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .cell__form__action {
    flex-grow: unset;
    padding-top: 0.7em;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .cell__form__action button {
    padding: 0.5em 0.6em;
    font-size: 0.65rem;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .cell__form__action button.prev,
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .cell__form__action button.cancel {
    border: 1px solid #670808;
    background: #ff8b8b30;
    color: #670808;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .cell__form__action button.next {
    border: 1px solid #086756;
    background: #086756;
    flex-grow: 3;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .cell__form__action button.accept {
    border: 1px solid #086756;
    background: #489947;
    flex-grow: 3;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .cell__form__action button.prev:hover,
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .cell__form__action button.cancel:hover {
    background: #ff8b8b;
    color: #220202;
    transition: 0.3s;
}
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .cell__form__action button.next:hover,
.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .cell__form__action button.accept:hover {
    background: #d1fffb;
    color: #086756;
    transition: 0.3s;
}

.cartable-page .body-segment .body__list .list__table > ul li .drop-down-menu .cell__sub__form .cell__form__action button.edit {
    display: none;
}
.cartable-page .body-segment .body__list .list__table > ul li.edit .drop-down-menu .cell__sub__form .cell__form__action button.edit {
    display: flex;
}
.cartable-page .body-segment .body__list .list__table > ul li.edit .drop-down-menu .cell__sub__form .cell__form__action button.progress {
    display: none;
}

@media screen and (max-width: 900px) {
    .cartable-page .header-segment .header__title {
        padding: 1em 1em;
    }
    .cartable-page .header-segment .header__nav .nav__menu {
        position: fixed;
        bottom: 10px;
        z-index: 5;
    }
    .cartable-page .header-segment .header__nav .nav__menu a {
        font-size: 0.7rem;
        flex-direction: column;
        min-width: 48px;
    }
    .cartable-page .body-segment {
        padding-inline: 1em;
        padding-bottom: 4em;
    }
}

@media screen and (max-width: 500px) {
    .cartable-page .body-segment .body__list .list__table > ul li > div.row div.cell.description {
        display: none;
    }
}

@media screen and (max-width: 350px) {
    .cartable-page .body-segment .body__list .list__search {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ---------------------------- */
/* ----- Cartable-Page -----E */
/* ---------------------------- */

/* ---------------------------- */
/* S------- Todo-Page ------- */
/* ---------------------------- */
.todo-page .automation-segment {
    background: #eee;
    position: relative;
    padding: 1.5em;
    padding-bottom: 0;
}


.todo-page .overview-section {
    border-bottom: 1px solid #d5d5d5;
    padding-bottom: 1em;
}
.todo-page .overview-section .overview__title h2 {
    font-size: 1rem;
    color: #4a4a4a;
}
.todo-page .overview-section .overview__title button {
    border: 1px solid #c5c5c5;
    color: #313131;
    font-size: 0.75rem;
    padding: 0.5em;
    border-radius: 4px;
    min-width: 120px;
    cursor: pointer;
    word-spacing: -1px;
}
@media screen and (max-width: 450px) {
    .todo-page .overview-section .overview__title button {
        min-width: 50px;
    }
    .todo-page .overview-section .overview__title button > span:last-child {
        display: none;
    }
}
.todo-page .overview-section .overview__title button.add {
    background: #0f4763;
    color: #fff;
    border: 1px solid #0b354b;
}
.todo-page .overview-section .overview__title button.add:hover {
    font-weight: bold;
    background: #eee;
    color: #0f4763;
    transition: 0.3s;
}
.todo-page .overview-section .overview__title button.staff:hover {
    background: #e7e7e7;
    font-weight: bold;
    color: #333333;

    transition: 0.3s;
}


.todo-page .overview-section .overview__cards {
    padding: 0.2em 0.5em;
}
.todo-page .overview-section .overview__cards .cards__item {
    /* background: #f5f5f5; */
    background: #eee;
    border-radius: 5px;
    border: 1px solid #d3d3d3;
    padding: 0.7em;
    box-shadow: 0 0 3px #dfdfdf;
    min-width: 200px;
}
.todo-page .overview-section .overview__cards .cards__item.active {
    background: #fff;
    box-shadow: 0 0 3px #cfcfcf;
    transform: unset !important;
}

.todo-page .overview-section .overview__cards .cards__item > span {
    width: 42px;
    height: 42px;
    background: #e5e5e5;
    border-radius: 50%;
    font-size: 1.1rem;
}
.todo-page .overview-section .overview__cards .cards__item > p span:first-child {
    font-size: 0.7rem;
    color: #878787;
    word-spacing: -2px;
}
.todo-page .overview-section .overview__cards .cards__item > p span:last-child {
    font-weight: bold;
    font-size: 1rem;
    position: relative;
    width: fit-content;
}
.todo-page .overview-section .overview__cards .cards__item > p span:last-child::after {
    content: attr(data-phrase);
    display: inline-block;
    margin-inline-start: 0.3em;
    font-size: 0.7rem;
    position: absolute;
    bottom: 0;
    left: -20px;
    color: #585858;
}

.todo-page .list-section {
    padding-inline-end: 5px;
    scrollbar-width: thin;
}
.todo-page .list-section .list__header {
    padding-block: 1em;
    border-bottom: 1px solid #d5d5d5;
}
.todo-page .list-section .list__header .header__action > button {
    font-size: 0.9rem;
    padding: 0.3em 0.5em;
    border: 1px solid #c1c1c1;
    color: #4e4c4c;
    word-spacing: -1px;
    cursor: pointer;
}
.todo-page .list-section .list__header .header__action > button:hover {
    background: #ffffff;
    color: #161616;
    transition: 0.3s;
}
.todo-page .list-section .list__header .header__action > button.excel--export {
    border-start-start-radius: 5px;
    border-end-start-radius: 5px;
    border-inline-end: none;
}
.todo-page .list-section .list__header .header__action > button.excel--export span:last-child {
    font-size: 0.8rem;
}
.todo-page .list-section .list__header .header__action > button.print {
    border-end-end-radius: 5px;
    border-start-end-radius: 5px;
    padding-inline: 0.7em;
}


.todo-page .list-section .list__header .header__filter .filter__search {
    position: relative;
    border: 1px solid #c1c1c1;
    background: #ffffff;
    border-radius: 5px;
    padding: 0.3em 0.6em;
    font-size: 0.9rem;
}

.todo-page .list-section .list__header .header__filter .filter__search > span:first-child {
    color: #ababac;
}
.todo-page .list-section .list__header .header__filter .filter__search input {
    background: transparent;
    border: none;
    padding-inline-start: 0.3em;
    padding-inline-end: 20px;
    word-spacing: -1px;
    width: 100%;
    font-size: 0.8rem;
}
.todo-page .list-section .list__header .header__filter .filter__search input::placeholder {
    font-size: smaller;
}
.todo-page .list-section .list__header .header__filter .filter__search > span:last-child {
    display: none;
    color: #e13030;
    padding: 0.3em;
    position: absolute;
    left: 5px;
    border-radius: 4px;
    cursor: pointer;
}
.todo-page .list-section .list__header .header__filter .filter__search > span:last-child:hover {
    background: #ffe3e3;
    transition: 0.3s;
}
.todo-page .list-section .list__header .header__filter .filter__search:has(input:not(:placeholder-shown)) > span:last-child {
    display: flex;
}
.todo-page .list-section .list__header .header__filter .filter__person {
    font-size: 0.9rem;
    word-spacing: -2px;
    border: 1px solid #c9c9c9;
    padding: 0.3em 0.5em;
    border-radius: 5px;
    background: #eee;
    color: #4e4c4c;
}
.todo-page .list-section .list__header .header__filter .filter__person:hover {
    color: #000000;
    transition: 0.3s;
}
.todo-page .list-section .list__header .header__filter .filter__person.active {
    background: #fff;
    transition: 0.3s;
}

@media screen and (max-width: 500px) {
    .todo-page .list-section .list__header .header__action > button.excel--export {
        padding-inline: 0.7em;
    }
    .todo-page .list-section .list__header .header__action > button.excel--export span:last-child {
        display: none;
    }
}

.todo-page .list-section .list__main > div.empty__group {
    text-align: center;
    background: #fffafa;
    color: #cd8585;
    font-size: 0.7rem;
    border: 1px solid #ddd0d0;
    padding: 1em;
    border-radius: 3px;
}

.todo-page .list-section .list__main .main__group {
    border: 1px solid #cdcdcd;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 0 3px #e1e1e1;
    margin-bottom: 1em;
}
.todo-page .list-section .list__main .main__group .group__header {
    font-size: 0.9rem;
    padding: 0.5em;
    border-bottom: 1px solid #cdcdcd;
    background: #f9f9f9;
}
.todo-page .list-section .list__main .main__group .group__header p span.group--icon {
    background: #f6f5f9;
    border: 1px solid #dad0f7;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    font-size: 0.7rem;
    color: #6a6970;
    cursor: pointer;
}
.todo-page .list-section .list__main .main__group.open .group__header p span.group--icon {
    transform: rotate(180deg);
    transition: 0.3s;
}
.todo-page .list-section .list__main .main__group .group__header p span.group--name {
    word-spacing: -1px;
    font-weight: bold;
    color: #2a2a2c;
}
.todo-page .list-section .list__main .main__group .group__header p span.group--current,
.todo-page .list-section .list__main .main__group .group__header p span.group--delay,
.todo-page .list-section .list__main .main__group .group__header p span.group--await,
.todo-page .list-section .list__main .main__group .group__header p span.group--archive {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: bold;
}

.todo-page .list-section .list__main .main__group .group__header p span.group--current {
    background: #dae9ff96;
    color: #075fad;
}
.todo-page .list-section .list__main .main__group .group__header p span.group--delay {
    background: #ffdada96;
    color: #ad0707;
    margin-inline-start: -5px;
}
.todo-page .list-section .list__main .main__group .group__header p span.group--delay.mini--blink {
    animation: icon_rotate_scale--mini 1s infinite;
}
.todo-page .list-section .list__main .main__group .group__header p span.group--await {
    background: #daf3ce96;
    color: #07ad2c;
    margin-inline-start: -5px;
}
.todo-page .list-section .list__main .main__group .group__header p span.group--archive {
    background: #ddc7f396;
    color: #5a0b81;
}

.todo-page .list-section .list__main .main__group .group__body {
    position: relative;
}

.todo-page .list-section .list__main .main__group .group__body table {
    font-size: 0.8rem;
}
.todo-page .list-section .list__main .main__group .group__body table thead th {
    padding: 0.6em;
    border-bottom: 1px solid #cdcdcd;
    font-weight: normal;
    font-size: 0.7rem;
    color: #555658;
    word-spacing: -1px;

}

.todo-page .list-section .list__main .main__group .group__body table tbody tr {
    border-bottom: 1px dashed #e5e5e5;
    cursor: pointer;
}
.todo-page .list-section .list__main .main__group .group__body table tbody tr:last-child {
    border-bottom: none;
}
.todo-page .list-section .list__main .main__group .group__body table tbody tr.empty {
    color: #f3c5c5;
    font-weight: bold;
    font-size: smaller;
    background: #fff9f9;
    pointer-events: none;
}
.todo-page .list-section .list__main .main__group .group__body table tbody tr[data-state='1']:hover td {
    background: #eff3f7;
    transition: 0.3s;
}
.todo-page .list-section .list__main .main__group .group__body table tbody tr[data-state='2']:hover td {
    background: #f0f7ef;
    transition: 0.3s;
}
.todo-page .list-section .list__main .main__group .group__body table tbody tr[data-state='3']:hover td {
    background: #f7efef;
    transition: 0.3s;
}
.todo-page .list-section .list__main .main__group .group__body table tbody tr[data-state='5']:hover td {
    background: #f4eff7;
    transition: 0.3s;
}

.todo-page .list-section .list__main .main__group .group__body table tbody td {
    padding: 1em 0.5em;
}
.todo-page .list-section .list__main .main__group .group__body table tbody td.no--padding {
    padding: 0 !important;
}
.todo-page .list-section .list__main .main__group .group__body table tbody td > span {
    margin-inline: auto;
    width: fit-content;
}

.todo-page .list-section .list__main .main__group .group__body table tr td.td--icon span i {
    display: none;
}

.todo-page .list-section .list__main .main__group .group__body table tr[data-state='1'] td.td--icon span i.fa-spinner-third {
    display: initial;
    padding-inline: 1em;
    animation: icon_rotate 2s linear infinite;
}
.todo-page .list-section .list__main .main__group .group__body table tr[data-state='2'] td.td--icon span i.fa-clipboard-check {
    display: initial;
    color: #159f3a;
    padding-inline: 1em;
    animation: icon_rotate_skew 1s infinite;
}

.todo-page .list-section .list__main .main__group .group__body table tr[data-state='3'] td.td--icon span i.fa-brake-warning {
    display: initial;
    padding-inline: 1em;
    animation: icon_rotate_scale 1s infinite;
}
.todo-page .list-section .list__main .main__group .group__body table tr[data-state='5'] td.td--icon span i.fa-box-archive {
    display: initial;
    color: #9b0ed3ff;
    padding-inline: 1em;
}

@keyframes icon_rotate {
    0% {
        filter: drop-shadow(0px 0px 1px #ccdcff);
        color: #23a2ff;
        transform: rotate(0deg);
    }
    100% {
        filter: drop-shadow(0px 0px 5px #0551ff);
        color: #0467b0;
        transform: rotate(360deg);
    } 
}

@keyframes icon_rotate_scale {
    0% {
        filter: drop-shadow(0px 0px 1px #ffcccc);
        color: #ff1c1c;
        transform: scale(1);
    }
    100% {
        filter: drop-shadow(0px 0px 7px #ff0505);
        color: #e30000;
        transform: scale(1.1);
    } 
}
@keyframes icon_rotate_scale--mini {
    0% {
        filter: drop-shadow(0px 0px 1px #d95b5b);
        transform: scale(1);
    }
    100% {
        filter: drop-shadow(0px 0px 15px #d95b5b);
        transform: scale(1.05);
    } 
}
@keyframes icon_rotate_skew {
    0% {
        color: #004a11;
        transform: scaleX(-1);
    }
    50% {
        transform: scaleX(1);
    }

    100% {
        color: #159f3a;
        transform: scaleX(1);
    } 
}



.todo-page .list-section .list__main .main__group .group__body table tr td.td--user span,
.todo-page .list-section .list__main .main__group .group__body table tr td.td--owner span {
    font-size: smaller;
    color: #7e7e7e;
    font-weight: bold;
}
.todo-page .list-section .list__main .main__group .group__body table tr td.td--user {
    filter: grayscale(1);
}
.todo-page .list-section .list__main .main__group .group__body table tr[data-state='2'] td.td--title p {
    text-decoration: line-through;
    color: #7e7e7e;
}
.todo-page .list-section .list__main .main__group .group__body table tr td.td--date {
    color: #053216;
}
.todo-page .list-section .list__main .main__group .group__body table tr td.td--deadline {
    position: relative;
    color: #320505;
}
.todo-page .list-section .list__main .main__group .group__body table tr td.td--deadline > p span:first-child {
    padding-inline: 10px;
}
.todo-page .list-section .list__main .main__group .group__body table tr td.td--deadline > p span:last-child {
    visibility: hidden;
    color: #8800ff;
    position: absolute;
    left: 0;
}
.todo-page .list-section .list__main .main__group .group__body table tr[data-snooz='1'] td.td--deadline > p span:last-child {
    visibility: visible;
}
.todo-page .list-section .list__main .main__group .group__body table tr td.td--note > span i {
    display: none;
    color: #356640;
}
.todo-page .list-section .list__main .main__group .group__body table tr td.td--note:not([title]) > span i.fa-regular {
    display: initial;
    cursor: not-allowed;
}
.todo-page .list-section .list__main .main__group .group__body table tr td.td--note[title] > span i.fa-solid {
    display: initial;
    cursor: help;
}

.todo-page .list-section .list__main .main__group .group__body table tr td.td--state span {
    font-weight: bold;
    font-size: 0.6rem;
    padding: 0.5em 0.7em;
    border-radius: 4px;
    width: 80%;
}
.todo-page .list-section .list__main .main__group .group__body table tr[data-state='1'] td.td--state span {
    color: #0571bb;
    border: 1px solid #0571bb;
}
.todo-page .list-section .list__main .main__group .group__body table tr[data-state='2'] td.td--state span {
    color: #159f3a;
    border: 1px solid #159f3a;
}
.todo-page .list-section .list__main .main__group .group__body table tr[data-state='3'] td.td--state span {
    color: #bb0505;
    border: 1px solid #bb0505;
}
.todo-page .list-section .list__main .main__group .group__body table tr[data-state='5'] td.td--state span {
    color: #9b0ed3ff;
    border: 1px solid #9b0ed3ff;
}

@media screen and (max-width: 700px) {
    .todo-page .automation-segment {
        overflow-y: scroll !important;
        scrollbar-width: thin;
    }
    .todo-page .list-section {
        overflow: unset !important;
    }
    .todo-page .list-section .list__main .main__group .group__body table thead tr {
        display: none;
    }
    .todo-page .list-section .list__main .main__group .group__body table tbody tr {
        display: flex;
        flex-direction: column;
        margin: 0.8em;
        padding: 0.5em;
        gap: 0.9em;
        border-radius: 5px;
        box-shadow: 0 0 3px #9f9f9f;
        background: #fbfbfb;
    }
    .todo-page .list-section .list__main .main__group .group__body table tbody tr td.td--user p,
    .todo-page .list-section .list__main .main__group .group__body table tbody tr td.td--owner p {
        justify-content: center;
    }
    .todo-page .list-section .list__main .main__group .group__body table tbody tr td.td--user p {
        transform: scale(0.8);
    }
    .todo-page .list-section .list__main .main__group .group__body table tbody tr td.td--date {
        display: none;
    }
    .todo-page .list-section .list__main .main__group .group__body table tbody tr:hover td {
        background: unset !important;
    }
    
}



@media print {
    .todo-page .list-section .list__main .main__group .group__body table {
        font-size: 0.7rem;
    }
    .todo-page .list-section .list__main .main__group .group__body table tr td.td--state span {
        padding: 0 !important;
        border: none !important;
        font-size: 0.5rem;
        word-spacing: -2px;
    }
    .todo-page .list-section .list__main .main__group .group__body.drop-down-menu {
        grid-template-rows: 1fr !important;
        visibility: visible !important;
    }
}


.todo-page .job-section {
    position: fixed;
    inset-inline-end: 13px;
    top: 12dvh;
    margin-block: auto;
    width: 310px;
    height: 85vh;
    height: 85dvh;
    background: #fff;
    box-shadow: 0 0 4px #686868;
    border-radius: 5px;
    z-index: 22;
    overflow: hidden;
    margin-left: -350px;
    z-index: -1;
    pointer-events: none;
    visibility: hidden;
}
.todo-page .job-section.active {
    z-index: 22;
    pointer-events: auto;
    visibility: visible;
    margin-left: 0;
    transition: margin 0.4s;
}

@media screen and (max-width: 500px) {
    .todo-page .job-section {
        width: 90%;
        height: 75dvh;
        left: 0;
        right: 0;
        margin-inline: auto !important;
    }
}

.todo-page .job-section .job__header {
    padding: 0.4em 0.6em;
}
.todo-page .job-section .job__header h2 span:first-child {
    font-size: 0.9rem;
    color: #040404;
    padding-block: 0.3em;
}
.todo-page .job-section .job__header h2 span:last-child {
    font-size: 0.7rem;
    font-weight: normal;
    color: #383b3d;
    word-spacing: -1px;
}
.todo-page .job-section .job__header > p {
    align-self: start;
    padding: 0.7em 0.4em;
    color: #95989e;
    cursor: pointer;
}
.todo-page .job-section .job__header > p:hover {
    color: #414346;
    transition: 0.3s;
}

.todo-page .job-section .job__body {
    position: relative;
}
.todo-page .job-section .job__body .body__form {
    padding: 0.8em 0.5em;
    align-items: start;
}

.todo-page .job-section .job__body .body__form .form__input {
    padding-bottom: 0.3em;
}
.todo-page .job-section .job__body .body__form .form__input.half {
    flex-basis: 40%;
}
.todo-page .job-section .job__body .body__form .form__input.full {
    flex-basis: 100%;
}
.todo-page .job-section .job__body .body__form .form__input > p {
    padding-bottom: 0.5em;
    padding-inline-start: 0.2em;
    font-size: 0.65rem;
    text-align: start;
}
.todo-page .job-section .job__body .body__form .form__input > div select,
.todo-page .job-section .job__body .body__form .form__input > div input,
.todo-page .job-section .job__body .body__form .form__input > div textarea {
    border: 1px solid #d3d3d3;
    padding: 0.3em 0.8em;
    font-size: 0.7rem;
    font-weight: bolder;
    height: 30px;
    width: 100%;
    text-align: center;
    background: #fff;
}
.todo-page .job-section .job__body .body__form .form__input > div textarea {
    text-align: start;
    color: #0e283b;
    font-weight: normal;
    height: auto;
}
.todo-page .job-section .job__body .body__form .form__input.sdate > div input,
.todo-page .job-section .job__body .body__form .form__input.sdate > div select {
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
    color: #626262;
}

.todo-page .job-section .job__body .body__form .form__input.sdate > div select,
.todo-page .job-section .job__body .body__form .form__input.sdate > div input,
.todo-page .job-section .job__body .body__form .form__input.edate > div select,
.todo-page .job-section .job__body .body__form .form__input.edate > div input {
    border: none;
}
.todo-page .job-section .job__body .body__form .form__input.sdate > div,
.todo-page .job-section .job__body .body__form .form__input.edate > div {
    border: 1px solid #d3d3d3;
}
.todo-page .job-section .job__body .body__form .form__action  {
    flex-basis: 100%;
}
.todo-page .job-section .job__body .body__form .form__action > p {
    font-size: 0.75rem;
    padding: 0;
    word-spacing: -0.5px;
    padding-top: 0.3em;
}
.todo-page .job-section .job__body .body__form .form__action > button {
    border: none;
    width: 30px;
    height: 30px;
    font-size: smaller;
    border-radius: 3px;
    cursor: pointer;
}

.todo-page .job-section .job__body .body__form .form__action {
    display: none;
}


.todo-page .job-section[data-state='1'] .job__body .body__form .form__action.done,
.todo-page .job-section[data-state='1'] .job__body .body__form .form__action.delete,
.todo-page .job-section[data-state='3'] .job__body .body__form .form__action.done,
.todo-page .job-section[data-state='3'] .job__body .body__form .form__action.delete {
    display: flex;
}
.todo-page .job-section[data-state='2'] .job__body .body__form .form__action.approve,
.todo-page .job-section[data-state='2'] .job__body .body__form .form__action.cancel {
    display: flex;
}
.todo-page .job-section[data-state='5'] .job__body .body__form .form__action.reopen {
    display: flex;
}
.todo-page .job-section[data-state='5'] .job__body .body__form .form__input > div input,
.todo-page .job-section[data-state='5'] .job__body .body__form .form__input > div textarea,
.todo-page .job-section[data-state='5'] .job__body .body__form .form__input > div select {
    pointer-events: none !important;
    background: #eee !important;
}
.todo-page .job-section[data-state='5'] .job__body .body__form .form__input.sdate > div,
.todo-page .job-section[data-state='5'] .job__body .body__form .form__input.edate > div {
    background: #eee;
}
.todo-page .job-section[data-state='5'] .job__body .body__upload > .upload__input {
    display: none;
}
.todo-page .job-section[data-state='5'] .job__action {
    display: none;
}

.todo-page .job-section[data-access='0'] .job__body .body__form .form__action.approve,
.todo-page .job-section[data-access='0'] .job__body .body__form .form__action.cancel,
.todo-page .job-section[data-access='0'] .job__body .body__form .form__action.reopen,
.todo-page .job-section[data-access='0'] .job__body .body__form .form__action.delete {
    display: none !important;
}

.todo-page .job-section[data-access='0'] .job__body .body__form input,
.todo-page .job-section[data-access='0'] .job__body .body__form select {
    pointer-events: none;
    background: #eee;
}
.todo-page .job-section[data-access='0'] .job__body .body__form .form__input.sdate > div,
.todo-page .job-section[data-access='0'] .job__body .body__form .form__input.edate > div {
    background: #eee;
    
}
.todo-page .job-section[data-access='0'] .job__body .body__form select {
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
}

.todo-page .job-section .job__body .body__upload {
    padding: 0.8em 0.5em;
    padding-top: 0;
    position: relative;
}
.todo-page .job-section .job__body .body__upload > .upload__input {
    padding: 1em;
    outline: 1px dashed #a9a9a9;
    border-radius: 2px;
    background: #e9e9e954;
    margin-bottom: 0.5em;
    flex-direction: column;
    position: relative;
}
.todo-page .job-section[data-id='0'] .job__body .body__upload > .upload__input {
    pointer-events: none;
    display: none;
}
.todo-page .job-section .job__body .body__upload > .upload__input > input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    cursor: pointer;
}
.todo-page .job-section .job__body .body__upload > .upload__input > span {
    font-size: 1.3rem;
    color: #919191;
}
.todo-page .job-section .job__body .body__upload > .upload__input p {
    font-size: 0.7rem;
    color: #a5a5a5;
    padding-top: 0.7em;
    word-spacing: -1px;
}
.todo-page .job-section .job__body .body__upload > .upload__list .upload__list__item {
    border-radius: 3px;
    padding: 0.3em;
    margin-bottom: 0.2em;
}
.todo-page .job-section .job__body .body__upload > .upload__list .upload__list__item.done {
    border: 1px solid #b7cbc1;
    background: #ceffd961;
}
.todo-page .job-section .job__body .body__upload > .upload__list .upload__list__item.progress {
    border: 1px solid #797015;
    background: #fff78d7a;
}

.todo-page .job-section .job__body .body__upload > .upload__list .upload__list__item.empty {
    font-size: 0.7rem;
    text-align: center;
    color: #b3b3b3;
}
.todo-page .job-section .job__body .body__upload > .upload__list .upload__list__item div:first-child {
    align-items: start;
}
.todo-page .job-section .job__body .body__upload > .upload__list .upload__list__item div:first-child input {
    background: unset;
    border: none;
    border-bottom: 1px dotted #3d3d3d;
    padding: 0.2em;
    field-sizing: content;
    color: #000000;
    font-size: 0.7rem;
    text-align: start;
    font-weight: bold;
    margin-bottom: 0.5em;
    max-width: 200px;
}
.todo-page .job-section .job__body .body__upload > .upload__list .upload__list__item.done div:first-child input {
    color: #626262;
    border-bottom: none;
    margin-bottom: 0;
    pointer-events: none;
}
.todo-page .job-section .job__body .body__upload > .upload__list .upload__list__item div:first-child p {
    font-size: 0.7rem;
}

.todo-page .job-section .job__body .body__upload > .upload__list .upload__list__item > div:nth-child(2) {
    width: 40px;
    height: 40px;
    filter: grayscale(0.5);
}
.todo-page .job-section .job__body .body__upload > .upload__list .upload__list__item > div:last-child span {
    display: none;
    color: #9da2a8;
    padding: 0.3em;
    cursor: pointer;
    font-size: 0.8rem;
}
.todo-page .job-section .job__body .body__upload > .upload__list .upload__list__item > div:last-child span:hover {
    color: #000;
    transition: 0.3s;
}


.todo-page .job-section .job__body .body__upload > .upload__list .upload__list__item.done > div:last-child span.done {
    display: flex;
}
.todo-page .job-section[data-access='0'] .job__body .body__upload > .upload__list .upload__list__item.done > div:last-child span.done.remove {
    display: none !important;
}
.todo-page .job-section .job__body .body__upload > .upload__list .upload__list__item.progress > div:last-child span.progress {
    display: flex;
}
.todo-page .job-section .job__body .body__upload > .upload__list .upload__list__item.done > div:last-child span.done {
    display: flex;
}
.todo-page .job-section .job__body .body__upload > .upload__list .upload__list__item > div:last-child span.cancel:hover,
.todo-page .job-section .job__body .body__upload > .upload__list .upload__list__item > div:last-child span.remove:hover {
    color: #cb0606;
    transition: 0.3s;
}
.todo-page .job-section .job__body .body__upload > .upload__list .upload__list__item > div:last-child span.upload:hover,
.todo-page .job-section .job__body .body__upload > .upload__list .upload__list__item > div:last-child span.download:hover {
    color: #2ccb06;
    transition: 0.3s;
}


.todo-page .job-section .job__action {
    padding: 0.8em 0.5em;
    width: 100%;
    box-shadow: 0 0 3px #bfbfbf;
}
.todo-page .job-section .job__action button {
    border-radius: 2px;
    flex-basis: 80px;
    width: unset;
    height: 30px;
    font-weight: bold;
    text-align: center;
    border: 1px solid #565656;
    padding: 0.4em 0.5em;
    background: #434343;
    color: #fff;
    font-size: 0.75rem;
    cursor: pointer;
}
.todo-page .job-section .job__action button.cancel {
    color: #434343;
    background: #fff;
}
.todo-page .job-section .job__action button.cancel:hover {
    background: #ffd7d7;
    color: #a30202;
    border: 1px solid #a30202;
    transition: 0.2s;
}
.todo-page .job-section .job__action button.approve {
    flex-grow: 2;
}
.todo-page .job-section .job__action button.approve:hover {
    color: #434343;
    background: #fff;
    transition: 0.3s;
}

.todo-page .automation-segment:has(.job-section.active) {
    overflow: hidden !important;
}
.todo-page .automation-segment:has(.job-section.active) > *:not(.job-section) {
    pointer-events: none;
    filter: blur(1.8px) grayscale(1.5)  !important;
}

.todo-page .group-section {
    position: fixed;
    top: 10vh;
    top: 10dvh;
    bottom: 0;
    margin-block: auto;
    width: min(400px, 90%);
    max-height: calc(60vh - 2.5rem);
    max-height: calc(60dvh - 2.5rem);
    background: #fff;
    box-shadow: 0 0 4px #686868;
    border-radius: 5px;
    margin-inline: auto;
    left: 0;
    right: 0;
    margin-top: -350px;
    z-index: -1;
    pointer-events: none;
    visibility: hidden;
}
.todo-page .group-section.active {
    z-index: 22;
    pointer-events: auto;
    visibility: visible;
    margin-top: auto;
    transition: margin 0.4s;
}
.todo-page .loading {
    filter: blur(1.8px) grayscale(1.5)  !important;
}


.todo-page .group-section .group__header {
    padding: 0.7em;
}
.todo-page .group-section .group__header h2 span:first-child {
    font-size: 0.9rem;
    color: #040404;
    padding-block: 0.3em;
}
.todo-page .group-section .group__header h2 span:last-child {
    font-size: 0.7rem;
    font-weight: normal;
    color: #383b3d;
    word-spacing: -1px;
}
.todo-page .group-section .group__header > p {
    align-self: start;
    padding: 1em 0.7em;
    color: #95989e;
    cursor: pointer;
}
.todo-page .group-section .group__header > p:hover {
    color: #414346;
    transition: 0.3s;
}


/* ---------------------------- */
/* ------- Todo-Page -------E */
/* ---------------------------- */



/* ---------------------------- */
/* S------- Cheque-Page ------- */
/* ---------------------------- */
.base-container.cheque-page {
    display: flex;
    flex-direction: column;
    padding: 1.5em;
    background: #020711;
    background: linear-gradient(0deg, rgba(2, 7, 17, 1) 0%, rgba(26, 34, 52, 1) 60%, rgba(45, 60, 80, 1) 100%);
}

.cheque-page .cheque-header .header__logo {
    filter: drop-shadow(2px 4px 6px #000);
}
.cheque-page .cheque-header .header__logo h2 {
    font-size: 1rem;
    color: #fff;
}

.cheque-page .cheque-header .header__nav {
    background: #fff;
    padding: 0.15em 0.2em;
    border-radius: 17px;
    box-shadow: 0 0 2px #959595;
}
@media screen and (max-width: 500px) {
    .cheque-page .cheque-overview {
        padding-top: 1.5em !important;
    }
    .base-container.cheque-page {
        padding-bottom: 4em;
    }
    .cheque-page .cheque-header .header__nav {
        left: 0;
        right: 0;
        margin-inline: auto;
        bottom: 0;
        z-index: 10;
        position: fixed;
        border-radius: 0;
        background: #ffffff17;
        border-top-left-radius: 8px;
        border-top-right-radius: 7px;
        backdrop-filter: blur(20px);
    }
    .cheque-page .cheque-overview button span:last-child {
        display: none;
    }

}
.cheque-page .cheque-header .header__nav > p {
    border-radius: 15px;
    background: #222939;
    padding: 0.5em;
    color: #fff;
    cursor: pointer;
}
.cheque-page .cheque-header .header__nav > a {
    padding: 0.6em;
    font-size: 0.75rem;
    border-radius: 10px;
    min-width: 60px;
    color: #7c7c7c;
    outline: 1px solid transparent;
    cursor: pointer;
}
.cheque-page .cheque-header .header__nav > a:hover {
    background: #222939;
    color: #ffffff;
    font-weight: bold;
    transition: 0.3s;
}
.cheque-page .cheque-header .header__nav > a.exit {
    border-radius: 12px;
}
.cheque-page .cheque-header .header__nav > a.exit:hover {
    background: #971616;
    color: #ffffff;
    font-weight: bold;
    transition: 0.3s;
}
.cheque-page .cheque-header .header__action > span {
    cursor: pointer;
    background: #ffffff2e;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.cheque-page .cheque-header .header__action > span:hover {
    background: #ffffffed;
    color: #000000;
    transition: 0.3s;
}



.cheque-page .cheque-overview {
    padding-top: 0.5em;
}
.cheque-page .cheque-overview h3 {
    font-size: 1.5rem;
    color: #fff
}
.cheque-page .cheque-overview h3 span:first-child {
    width: 28px;
    height: 28px;
    background: #ffffff17;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 0.7rem;
    outline: 1px solid #ffffff47;
    cursor: pointer;
}
.cheque-page .cheque-overview button {
    background: #8f8f8f1a;
    border: 1px solid #ffffff75;
    border-radius: 5px;
    padding: 0.6em 0.8em;
    color: #ffffffe0;
    font-size: 0.75rem;
    cursor: pointer;
}
.cheque-page .cheque-overview button:hover {
    background: #ffffffc9;
    color: #000;
    transition: 0.3s;
}
.cheque-page .cheque-overview .overview__charts {
    margin-top: 1em
}
.cheque-page .cheque-overview .overview__charts .charts__item {
    padding: 0.5em;
    background: #0000002b;
    border-radius: 5px;
}
.cheque-page .cheque-overview .overview__charts .charts__item.charts__item--line {
    flex-grow: 3;
}

.cheque-page .cheque-overview .overview__charts .charts__item .charts__line__item {
    color: #fff;
    border-radius: 5px;
    padding: 0.5em;
    /* background: #0000002e; */
    background: #ffffff17;
}
.cheque-page .cheque-overview .overview__charts .charts__item .charts__line__item > h4 {
    font-size: 0.65rem;
    font-weight: normal;
    color: #979ea9;
}
.cheque-page .cheque-overview .overview__charts .charts__item .charts__line__item > p {
    font-weight: bold;
    font-size: 1.2rem;
    align-self: start;
}

.cheque-page .cheque-overview .overview__charts .charts__item .charts__line__item > .item__bar {
    margin-top: 1.5em;
    opacity: 0.5;
}
.cheque-page .cheque-overview .overview__charts .charts__item .charts__line__item:hover > .item__bar {
    opacity: 1;
    transition: 0.5s;
}

.cheque-page .cheque-overview .overview__charts .charts__item .charts__line__item > .item__bar p {
    position: relative;
    height: 7px;
}

.cheque-page .cheque-overview .overview__charts .charts__item .charts__line__item > .item__bar p.incoming {
    background: #357f24;
    width: 50%;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.cheque-page .cheque-overview .overview__charts .charts__item .charts__line__item > .item__bar p.outgoing {
    background: #ffffff57;
    width: 50%;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.cheque-page .cheque-overview .overview__charts .charts__item .charts__line__item > .item__bar p > span {
    position: absolute;
    top: -20px;
    color: #dbdbdb;
    font-size: 0.55rem;
}
.cheque-page .cheque-overview .overview__charts .charts__item .charts__line__item > .item__bar p.incoming > span {
    inset-inline-start: 5px;
}
.cheque-page .cheque-overview .overview__charts .charts__item .charts__line__item > .item__bar p.outgoing > span {
    inset-inline-end: 5px;
}

.cheque-page .cheque-overview .overview__charts .charts__item.charts__item--bar {
    color: #fff;
    /* max-width: 400px; */
    padding-bottom: 5px;
    max-width: 100%;
}
.cheque-page .cheque-overview .overview__charts .charts__item.charts__item--bar h4 {
    padding-bottom: 0.3em;
}
.cheque-page .cheque-overview .overview__charts .charts__item.charts__item--bar h4 span:first-child {
    font-size: 0.65rem;
    font-weight: normal;
    color: #979ea9;
}
.cheque-page .cheque-overview .overview__charts .charts__item.charts__item--bar h4 span:last-child {
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.4em;
    border-radius: 13px;
    transition: 0.3s;
}
.cheque-page .cheque-overview .overview__charts .charts__item.charts__item--bar h4 span:last-child:hover {
    transform: scale(-1);
    transition: 0.5s;
}
.cheque-page .cheque-overview .overview__charts .charts__item.charts__item--bar > div {
    justify-content: space-around;
    align-items: end;
}
.cheque-page .cheque-overview .overview__charts .charts__item.charts__item--bar > div:last-child {
    padding-top: 15px;
}
.cheque-page .cheque-overview .overview__charts .charts__item.charts__item--bar .charts__bar__item {
    background: #ffffff14;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 0.75rem;
    text-align: center;
    position: relative;
    box-shadow: 0 0 2px #ffffff52;
    min-height: calc(50px - 7px);
    max-height: calc(100% - 12px);
}
.cheque-page .cheque-overview .overview__charts .charts__item.charts__item--bar .charts__bar__item .bar__title {
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    margin-inline: auto;
    color: #506773ba;
    font-size: 0.5rem;
    word-spacing: -1px;
    font-weight: bold;
}
.cheque-page .cheque-overview .overview__charts .charts__item.charts__item--bar .charts__bar__item .bar__incoming {
    padding: 0.5em;
    height: 50%;
    background: #38ff0a1a;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #c3f3c7;
}
.cheque-page .cheque-overview .overview__charts .charts__item.charts__item--bar .charts__bar__item .bar__incoming > span {
    color: #3e7143;
}
.cheque-page .cheque-overview .overview__charts .charts__item.charts__item--bar .charts__bar__item .bar__outgoing {
    padding: 0.5em;
    height: 50%;
    color: #7f7f7f;
}
.cheque-page .cheque-overview .overview__charts .charts__item.charts__item--bar .charts__bar__item .bar__outgoing > span {
    color: #9b9b9b;
}


.cheque-page .cheque-list {
    margin-top: 1em;
    min-height: 1px;
}
.cheque-page .cheque-list .list__filter {
    background: #0000002b;
    padding: 0.5em;
    border-radius: 5px;
    margin-block: 0.7em;
    padding-inline: 0.5em;
}
.cheque-page .cheque-list .list__filter > p {
    color: #fff;
    word-spacing: -1px;
    font-size: 0.8rem;
    font-weight: bold;
    flex-grow: unset;
}

.cheque-page .cheque-list .list__filter .cheque-sort  {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    margin-top: -5px;
    background: #131a2a;
    position: absolute;
    right: 165px;
    width: fit-content;
    margin-inline: auto;
    z-index: 3;
}

.cheque-page .cheque-list .list__filter .cheque-sort  button {
    font-size: 0.65rem;
    padding: 0.5em;
    min-width: 150px;
    border: 1px solid #ffffff42;
    background: #ffffff1f;
    color: #cfcfcf;
    text-align: center;
    height: 24px;
    cursor: pointer;
}

.cheque-page .cheque-list .list__filter .cheque-sort  button:hover {
    background: #ffffff00;
    color: #fff;
    transition: 0.3s;
}

.cheque-page .cheque-list .list__filter .cheque-sort button .button__no {
    background: #ffffff24;
    color: #ffffff;
    border-radius: 50%;
    width: 4px;
    aspect-ratio: 1;
    font-size: 0.5rem;
    outline: 1px solid #ffffff80;
}

.cheque-page .cheque-list .list__filter .cheque-sort button i {
    font-size: 0.7rem;
}


.cheque-page .cheque-list .list__filter > .filter__item {
    color: #fff;
    position: relative;
    flex-basis: 85px;
    background: #ffffff12;
    border-radius: 3px;
    height: 25px;
    border: 1px solid #1d2e47b0;
}
.cheque-page .cheque-list .list__filter > .filter__item:hover {
    background: #1f2b3b;
    box-shadow: 0 0px 3px #2c3343;
    transition: 0.3s;
}
.cheque-page .cheque-list .list__filter > .filter__item > select,
.cheque-page .cheque-list .list__filter > .filter__item > input {
    width: 100%;
    background: transparent;
    border: none;
    font-size: 0.7rem;
    padding: 0.5em 0.8em;
    color: #a9afb3;
}
.cheque-page .cheque-list .list__filter > .filter__item > select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.cheque-page .cheque-list .list__filter > .filter__item > select option {
    color: #000
}
.cheque-page .cheque-list .list__filter > .filter__item > span {
    height: 100%;
    background: #ffffff17;
    aspect-ratio: 1;
    justify-content: center;
    align-items: center;
    font-size: 0.75rem;
    border-radius: 2px;
    color: #abb3bc;
    cursor: pointer;
}

.cheque-page .cheque-list .list__filter > .filter__item.active {
    background: #ffffff;
}
.cheque-page .cheque-list .list__filter > .filter__item.active > select,
.cheque-page .cheque-list .list__filter > .filter__item.active > input {
    color: #4d4d4d;
    font-weight: bold;
    text-align: center;
}
.cheque-page .cheque-list .list__filter > .filter__item.filter__item--date > div {
    position: absolute;
    top: 100%;
    background: #313a48;
    z-index: 5;
    border-radius: 3px;
    border: 2px solid #494f63;
    box-shadow: 0 0 3px #020518;
    margin-top: 6px;
    width: 200%;
}
.cheque-page .cheque-list .list__filter > .filter__item.filter__item--date > div > div > div {
    background: #00000054;
    padding: 0.3em;
    border-radius: 5px;
    margin: 0.1em;
}
.cheque-page .cheque-list .list__filter > .filter__item.filter__item--date > div input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #fafafa;
    background: transparent;
    border-radius: 2px;
    font-size: 0.7rem;
    text-align: center;
    font-weight: bold;
}
.cheque-page .cheque-list .list__filter > .filter__item.filter__item--date > div .date > span {
    font-size: smaller;
    opacity: 0.6;
}
.cheque-page .cheque-list .list__filter > .filter__item.filter__item--date > div input::placeholder {
    font-weight: normal;
}
.cheque-page .cheque-list .list__filter > .filter__item.filter__item--date > div input.year {
    flex-grow: 3;
}
.cheque-page .cheque-list .list__filter > .filter__item.filter__item--date > div > div > div.active input {
    pointer-events: none;
    border: none;
}
.cheque-page .cheque-list .list__filter > .filter__item.filter__item--date > div > div > div.active p:first-child {
    color: #b5b5b5;
}
.cheque-page .cheque-list .list__filter > .filter__item.filter__item--date > div > div > div:last-child {
    opacity: 0;
    position: relative;
    pointer-events: none;
    margin-top: -30px;
    z-index: -1;
    transition: 0.3s;
}
.cheque-page .cheque-list .list__filter > .filter__item.filter__item--date > div > div > div:last-child.enable {
    pointer-events: auto;
    margin-top: unset;
    z-index: unset;
    opacity: 1;
    transition: 0.5s;
}


.cheque-page .cheque-list .list__filter > .filter__item.filter__item--date > div p:first-child {
    font-size: 0.7rem;
    text-wrap: nowrap;
}
.cheque-page .cheque-list .list__filter > .filter__item.filter__item--date > div p:last-child {
    padding-inline-start: 0.5em;
}
.cheque-page .cheque-list .list__filter > .filter__item.filter__item--date > div p:last-child span {
    font-size: smaller;
    padding: 0.2em;
    border-radius: 2px;
    cursor: pointer;
    aspect-ratio: 1;
    width: 20px;
    justify-content: center;
    align-items: center;
}
.cheque-page .cheque-list .list__filter > .filter__item.filter__item--date > div p:last-child span.remove {
    display: none;
}
.cheque-page .cheque-list .list__filter > .filter__item.filter__item--date > div p:last-child span.add:hover {
    background: #ffffff38;
    color: #21cb40;
    transition: 0.3s;
}
.cheque-page .cheque-list .list__filter > .filter__item.filter__item--date > div p:last-child span.remove:hover {
    background: #ffffff38;
    color: #bf0d0d;
    transition: 0.3s;
}

.cheque-page .cheque-list .list__filter > .filter__item.filter__item--date > div > div > div.active p:last-child span.remove {
    display: flex !important;
}
.cheque-page .cheque-list .list__filter > .filter__item.filter__item--date > div > div > div.active p:last-child span.add {
    display: none !important;
}




.cheque-page .cheque-list .list__body {
    border-radius: 15px;
    box-shadow: 0 2px 2px #ababab;
    overflow: hidden;
    min-height: 1px;
}

.cheque-page .cheque-list .list__body .list__body__common {
    background: transparent;
    position: relative
}

.cheque-page .cheque-list .list__body .list__body__common .common__title {
    border-top-left-radius: 20px;
    background: #fff;
    padding: 0.5em;
    padding-bottom: 0.3em;
    padding-inline-start: 1.2em;
}
.cheque-page .cheque-list .list__body .list__body__common .common__title h3 {
    font-size: 0.9rem;
    color: #1b232e;
}
.cheque-page .cheque-list .list__body .list__body__common .common__action {
    border-top-right-radius: 20px;
    background: #fff;
    padding: 0.5em;
}
.cheque-page .cheque-list .list__body .list__body__common .common__action span {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    border: 1px solid #d3d3d3;
    font-size: 0.7rem;
    color: #6b6b6b;
    cursor: pointer;
}
.cheque-page .cheque-list .list__body .list__body__common .common__action span:hover {
    background: #111827;
    color: #fff;
    transition: 0.3s;
}

.cheque-page .cheque-list .list__body .list__body__common .common__filter {
    padding: 0.5em;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    margin-top: -5px;
    background: #131a2a;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: fit-content;
    margin-inline: auto;
    z-index: 2;
}
.cheque-page .cheque-list .list__body .list__body__common .common__filter button {
    font-size: 0.65rem;
    padding: 0.5em;
    min-width: 90px;
    border: 1px solid #ffffff42;
    border-radius: 5px;
    background: #ffffff1f;
    color: #cfcfcf;
    text-align: center;
    height: 24px;
    cursor: pointer;
}
.cheque-page .cheque-list .list__body .list__body__common .common__filter button:hover {
    background: #ffffff00;
    color: #fff;
    transition: 0.3s;
}

.cheque-page .cheque-list .list__body .list__body__common .common__filter button .button__no {
    background: #ffffff24;
    color: #ffffff;
    border-radius: 50%;
    width: 4px;
    aspect-ratio: 1;
    font-size: 0.5rem;
    outline: 1px solid #ffffff80;
}







.cheque-page .cheque-list .list__body .list__body__main {
    background: #fff;
    padding: 1em;
    padding-top: 0;
    position: relative;
    min-height: 1px;
}

.cheque-page .cheque-list .list__body .list__body__main .main__table {
    border-top: 1px solid #ededed;
    flex-basis: 35%;
        height: 100%;

}
.cheque-page .cheque-list .list__body .list__body__main .main__table tr {
    border-bottom: 1px dashed #f1f1f1;
    cursor: pointer;
}
.cheque-page .cheque-list .list__body .list__body__main .main__table tr:not(.empty):not(.active):hover td {
    background: #f9f9f9;
    transition: 0.3s;
}
.cheque-page .cheque-list .list__body .list__body__main .main__table tr td {
    padding: 0.5em;
    font-size: 0.8rem;
    
}
.cheque-page .cheque-list .list__body .list__body__main .main__table tr td.no--padding {
    padding: 0;
}

.cheque-page .cheque-list .list__body .list__body__main .main__table tr.active {
    cursor: default;
}
.cheque-page .cheque-list .list__body .list__body__main .main__table tr.active td {
    background: #1f212e;
    color: #fff;
    transition: 0.3s;
}
.cheque-page .cheque-list .list__body .list__body__main .main__table tr.active td:first-child {
    border-end-start-radius: 7px;
    border-start-start-radius: 7px;
}
.cheque-page .cheque-list .list__body .list__body__main .main__table tr.active td:last-child {
    border-start-end-radius: 7px;
    border-end-end-radius: 7px;
}


.cheque-page .cheque-list .list__body .list__body__main .main__table tr td.title > div > span {
    width: 30px;
    aspect-ratio: 1;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    outline: 1px solid;
}
.cheque-page .cheque-list .list__body .list__body__main .main__table tr[data-type_id="1"]  td.title > div > span {
    background: #beffbd;
    color: #0e520e;
    outline-color: #90dd9b;
}
.cheque-page .cheque-list .list__body .list__body__main .main__table tr[data-type_id="2"]  td.title > div > span {
    background: #ffbdbd;
    color: #520e0e;
    outline-color: #dd9090;
}
.cheque-page .cheque-list .list__body .list__body__main .main__table tr[data-type_id="3"]  td.title > div > span {
    background: #e3bdff;
    color: #380e52;
    outline-color: #ca90dd;
}
.cheque-page .cheque-list .list__body .list__body__main .main__table tr[data-type_id="4"]  td.title > div > span {
    background: #f7ffbd;
    color: #4d520e;
    outline-color: #dddb90;
}

.cheque-page .cheque-list .list__body .list__body__main .main__table tr td.title > div > span > i {
    display: none;
}
.cheque-page .cheque-list .list__body .list__body__main .main__table tr[data-type_id="1"] td.title > div > span > i.fa-down-to-bracket {
    display: initial;
}
.cheque-page .cheque-list .list__body .list__body__main .main__table tr[data-type_id="2"] td.title > div > span > i.fa-up-from-bracket {
    display: initial;
}
.cheque-page .cheque-list .list__body .list__body__main .main__table tr[data-type_id="3"] td.title > div > span > i.fa-file-shield {
    display: initial;
}
.cheque-page .cheque-list .list__body .list__body__main .main__table tr[data-type_id="4"] td.title > div > span > i.fa-money-check {
    display: initial;
}



.cheque-page .cheque-list .list__body .list__body__main .main__table tr td.title > div > p span:first-child {
    font-size: smaller;
    text-align: start;
}
.cheque-page .cheque-list .list__body .list__body__main .main__table tr td.title > div > p span:last-child {
    margin-top: 0.6em;
    font-size: smaller;
    color: #9f9f9f;
}

.cheque-page .cheque-list .list__body .list__body__main .main__table tr td.state span {
    background: #f9f9f9;
    padding: 0.5em;
    border-radius: 15px;
    font-size: smaller;
    color: #777777;
}
.cheque-page .cheque-list .list__body .list__body__main .main__table tr.active td.state span {
    background: transparent;
    color: #fafafa;
    transition: 0.5s;
}

.cheque-page .cheque-list .list__body .list__body__main .main__table tr td.price p {
    font-weight: bold;
}
.cheque-page .cheque-list .list__body .list__body__main .main__table tr td.price p span:last-child {
    transform: rotate(270deg);
    font-size: 0.5rem;
    filter: contrast(0.2);
    
}


.cheque-page .cheque-list .list__body .list__body__main .main__table table:has(tr.empty ) {
    height: 100%;
}
.cheque-page .cheque-list .list__body .list__body__main .main__table tr.empty {
    text-align: center;
    color: #555;
    background: #cbcbcb;
    font-weight: bold;
    cursor: no-drop;
    
}
.cheque-page .cheque-list .list__body .list__body__main .main__table tr.empty td {
    font-size: 0.9rem;
}
    


.cheque-page .cheque-list .list__body .list__body__main .main__cheque > div:first-child {
    flex-basis: 60%;
    background: #1d222e;
    border-radius: 20px;
    padding: 1em;
    color: #fff;
    font-size: 0.75rem;
    max-height: fit-content;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque > div:last-child {
    background: #c1c1c1;
    border-radius: 10px;
    border: 2px dotted #ffffff;
    /* overflow: hidden; */
}

.cheque-page .cheque-list .list__body .list__body__main .main__cheque > div:last-child .image__gallery {
    display: flex;
    position: relative;
    height: 100%;
    
    overflow: hidden;
    
    /* background-size: cover; */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque > div:last-child .image__gallery:hover {
    background-size: cover;
    transition: 0.3s;
}

.cheque-page .cheque-list .list__body .list__body__main .main__cheque > div:last-child .image__gallery > span {
    font-size: 5rem;
    position: absolute;
    left: 0;
    right: 0;
    top: -45px;
    bottom: 0;
    margin: auto;
    color: #696969;
    cursor: no-drop;
    display: none;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque > div:last-child .image__gallery.empty > span {
    display: flex;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque > div:last-child .image__gallery .loader-circular {
    left: 0;
    right: 0;
    top: -20px;
    bottom: 0;
    margin: auto;
}

.cheque-page .cheque-list .list__body .list__body__main .main__cheque > div:last-child .image__gallery .gallery__controll .controll__slide span.selected {
    background:#fafafa;
    color: #000;
    transform: 0.3s;
}

.cheque-page .cheque-list .list__body .list__body__main .main__cheque > div:last-child .image__gallery .gallery__controll {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #00000073;
    backdrop-filter: blur(3px);
    padding: 0.5em;
    min-height: 40px;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque > div:last-child .image__gallery .gallery__controll span {
    display: none;
    aspect-ratio: 1;
    width: 30px;
    border-radius: 8px;
    background: #0000004a;
    border: 1px solid #ffffff29;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 0.8rem;
}

.cheque-page .cheque-list .list__body .list__body__main .main__cheque > div:last-child .image__gallery.active .gallery__controll span {
    display: flex;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque > div:last-child .image__gallery .gallery__controll span:hover {
    background: #000000a3;
    transition: 0.3s;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque > div:last-child .image__gallery .gallery__controll span.remove:hover {
    background: #ff0000a3;
    transition: 0.3s;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque > div:last-child .image__gallery .gallery__controll span.download:hover {
    background: #007cffa3;
    transition: 0.3s;
}











.cheque-page .cheque-list .list__body .list__body__main .main__cheque input,
.cheque-page .cheque-list .list__body .list__body__main .main__cheque select {
    background: transparent;
    border: none;
    padding: 0.3em 0.5em;
    color: #fff;
    field-sizing: content;
    min-width: 50px;
    text-align: center;
    letter-spacing: 1px;
    appearance: none;

    pointer-events: none;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque input::placeholder {
    font-weight: normal;
    font-size: smaller;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque input.bold,
.cheque-page .cheque-list .list__body .list__body__main .main__cheque select.bold {
    font-weight: bold;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque input.full,
.cheque-page .cheque-list .list__body .list__body__main .main__cheque select.full {
    width: 100%;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque.new--mode input,
.cheque-page .cheque-list .list__body .list__body__main .main__cheque.modify--mode input,
.cheque-page .cheque-list .list__body .list__body__main .main__cheque.new--mode select,
.cheque-page .cheque-list .list__body .list__body__main .main__cheque.modify--mode select {
    border-bottom: 1px solid #5a5a5a;
    margin-bottom: 0.3em;
    appearance: auto;
    pointer-events: auto;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque select option {
    font-size: 0.7rem;
    color: #000;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque select.empty {
    color: #7d7d7d !important;
}


.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__header .cheque__no > div > span {
    font-size: 1.2rem;
    opacity: 0.8;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__header .cheque__type select {
    text-align: start;
    padding-inline-start: 0;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__header .cheque__type div:first-child select {
    font-weight: bold;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__header .cheque__type div:last-child {
    color: #7d7d7d;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__header .cheque__type div:last-child select {
    font-size: smaller;
}

.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__header .cheque__group div:last-child {
    color: #7d7d7d;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__header .cheque__group div:last-child button {
    border: none;
    padding: 0.4em 0.6em;
    border-radius: 4px;
    font-size: 0.6rem;
    cursor: pointer;
    margin-top: 0.2em;
    background: #0000003d;
    color: #ffffff36;
    pointer-events: none;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__header .cheque__group div:last-child button.group--active {
    background: #03647b57;
    color: #ffffff;
}

.cheque-page .cheque-list .list__body .list__body__main .main__cheque.new--mode .cheque__header .cheque__group div:last-child button,
.cheque-page .cheque-list .list__body .list__body__main .main__cheque.modify--mode .cheque__header .cheque__group div:last-child button {
    pointer-events: auto;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__header .cheque__owner > div > input:last-child {
    font-size: 0.7rem;
    width: fit-content;
    /* margin-inline: auto; */
}


.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__body .body__item {
    background: #ffffff0d;
    border-radius: 5px;
    padding: 0.5em;
    position: relative;
    flex-basis: 100px;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__body .body__item .body__item__section > p {
    font-size: smaller;
    color: #7d7d7d;
    margin-block: 0.5em 0.3em;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__body .body__account > .cheque__branch {
    margin-inline-end: 55px;
}

.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__body .body__account > span {
    position: absolute;
    top: 5px;
    inset-inline-end: 5px;
    background: #0000003b;
    border-radius: 6px;
    padding: 0.4em;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__body .body__payee .cheque--note {
    field-sizing: initial;
}

.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__action {
    background: #ffffff36;
    padding: 0.5em;
    border-radius: 10px;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__action > p.state {
    padding: 0.5em 1em;
    background: #00000091;
    border-radius: 8px;
    color: #efefef;
    font-weight: bold;
    outline: 2px solid #3d3d3d;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__action > p.date span:first-child {
    color: #b3b3b3;
    font-size: smaller;
}

.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__action > p.date span:last-child {
    font-weight: bold;
    letter-spacing: 1px;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__action > div {
    align-self: center;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__action > div .mini {
    aspect-ratio: 1;
    width: 30px;
    border-radius: 8px;
    background: #0000004a;
    border: 1px solid #ffffff29;
    cursor: pointer;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__action > div .mini.image {
    position: relative;
    overflow: hidden;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__action > div .mini.image input {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    opacity: 0;
}

.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__action > div .mini:hover {
    background: #000000a3;
    transition: 0.3s;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__action > div .mini.revoke:hover {
    background: #ff0000a3;
    transition: 0.3s;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__action > div .mini.reinstate:hover {
    background: #8b8812a3;
    transition: 0.3s;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__action > div .mini.edit:hover {
    background: #ff3d00a3;
    transition: 0.3s;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__action > div .mini.image:hover {
    background: #85199fa3;
    transition: 0.3s;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__action > div .mini.return:hover {
    background: #1328cda3;
    transition: 0.3s;
}


.cheque-page .cheque-list .list__body .list__body__main .main__cheque.active--mode .cheque__action > div .mini.revoke,
.cheque-page .cheque-list .list__body .list__body__main .main__cheque.active--mode .cheque__action > div .mini.image,
.cheque-page .cheque-list .list__body .list__body__main .main__cheque.active--mode .cheque__action > div .mini.return,
.cheque-page .cheque-list .list__body .list__body__main .main__cheque.active--mode .cheque__action > div .mini.edit {
    display: flex;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque[data-state="2"].active--mode .cheque__action > div .mini.edit,
.cheque-page .cheque-list .list__body .list__body__main .main__cheque[data-state="2"].active--mode .cheque__action > div .mini.return,
.cheque-page .cheque-list .list__body .list__body__main .main__cheque[data-state="2"].active--mode .cheque__action > div .mini.revoke {
    display: none;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque[data-state="2"].active--mode .cheque__action > div .mini.reinstate {
    display: flex;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque[data-state="3"].active--mode .cheque__action > div .mini.return {
    display: none;
}

.cheque-page .cheque-list .list__body .list__body__main .main__cheque.modify--mode .cheque__action > div .mini.cancel {
    display: flex;
}

.cheque-page .cheque-list .list__body .list__body__main .main__cheque.new--mode .cheque__action > div .mini.cancel {
    display: flex;
}





.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__action > div button.full {
    border: none;
    padding: 0.6em 1em;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    /* margin-inline-start: 0.5em; */
    display: none;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__action > div button.full.action {
    color: #253f0e;
    outline: 1px solid #306d05;
    background: #91fb03;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__action > div button.full.reverse {
    color: #3f0e0e;
    outline: 1px solid #6d0505;
    background: #ff5656;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque .cheque__action > div button.full:hover {
    filter: brightness(0.7);
    transition: 0.3s;
}

.cheque-page .cheque-list .list__body .list__body__main .main__cheque.active--mode .cheque__action > div button.full,
.cheque-page .cheque-list .list__body .list__body__main .main__cheque.modify--mode .cheque__action > div button.full,
.cheque-page .cheque-list .list__body .list__body__main .main__cheque.new--mode .cheque__action > div button.full {
    display: initial;
}
.cheque-page .cheque-list .list__body .list__body__main .main__cheque[data-state="2"].active--mode .cheque__action > div button.full {
    display: none;
}

.cheque-page .cheque-group {
    position: absolute;
    inset-inline: 0;
    inset-block: 0;
    margin: auto;
    background: #fff;
    width: min(90%, 300px);
    height: min(90%, 350px);
    z-index: 3;
    border: 2px solid #b5b5b5;
    border-radius: 5px;
    box-shadow: 0 0 5px #000000;
    padding: 0.3em;
    overflow: hidden;

    opacity: 0;
    z-index: -1;
    pointer-events: none;
}
.cheque-page .cheque-group.active {
    z-index: 22;
    pointer-events: auto;
    opacity: 1;
    transition: margin 0.4s;
}
.cheque-page.base-container:has(.cheque-group.active) > *:not(.cheque-group) {
    pointer-events: none;
    filter: blur(1.8px) grayscale(1.5) !important;
}

.cheque-page .cheque-group .group__header h3 {
    font-size: 0.9rem;
    color: #181818;
    word-spacing: -2px;
}
.cheque-page .cheque-group .group__header > span {
    aspect-ratio: 1;
    width: 25px;
    border-radius: 5px;
    color: #797979;
    font-size: 0.9rem;
    cursor: pointer;
    background: #f5f5f5;
}
.cheque-page .cheque-group .group__header > span:hover {
    background: #fff0f0;
    color: #eb3b3b;
    transition: 0.3s;
}
.cheque-page .cheque-group .group__search {
    border-bottom: 1px solid #cbcbcb;
    padding-bottom: 0.5em;
}
.cheque-page .cheque-group .group__search input {
    width: 100%;
    border: 1px solid #dddddd;
    padding: 0.3em;
    font-size: 0.8rem;
    border-radius: 3px;
    font-weight: bold;
    background: #fafafa;
}
.cheque-page .cheque-group .group__search input:first-child {
    text-align: center;
    flex-basis: 30%;
}
.cheque-page .cheque-group .group__search input:last-child {
    flex-basis: calc(70% - 0.5em);
}
    
.cheque-page .cheque-group .group__search input::placeholder {
    font-size: smaller;
    font-weight: normal;
}

.cheque-page .cheque-group .group__list > p {
    font-weight: bold;
    text-align: center;
    color: #d99b9b;
    font-size: 0.7rem;
    padding: 1em;
}
.cheque-page .cheque-group .group__list .list__item {
    border: 1px solid #d1e4ff;
    margin-bottom: 0.1em;
    border-radius: 4px;
    padding: 0.3em;
    background: #f7fcff;
}
.cheque-page .cheque-group .group__list .list__item:hover {
    background: #bcdcf9;
    border-color: #75a8e1;
    transition: 0.3s;
}
.cheque-page .cheque-group .group__list .list__item .item__profile p {
    font-size: 0.8rem;
}
.cheque-page .cheque-group .group__list .list__item .item__profile p span:first-child {
    font-weight: bold;
}
.cheque-page .cheque-group .group__list .list__item .item__profile p span:last-child {
    color: #104175;
    font-size: smaller;
}

.cheque-page .cheque-group .group__list .list__item .item__action button {
    border: 1px solid #06293f;
    padding: 0.3em;
    border-radius: 3px;
    font-size: 0.6rem;
    background: #09346d;
    color: #fff;
    padding-inline: 1em;
    padding-block: 0.6em;
    cursor: pointer;
}

.cheque-page .cheque-group .group__list .list__item .item__action button:hover {
    background: #fafafa;
    color: #09346d;
    transition: 0.3s;
}

.cheque-page .cheque-fulfill {
    display: none;
    position: absolute;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: 1.2em;
    position: absolute;
    left: 0;
    right: 0;
    top: 45%;
    transform: translateY(-50%);
    margin: 0 auto;
    background: #fff;
    border-radius: 3px;
    padding: 1em 2.5em !important;
    width: clamp(300px, 25%, 500px);
    box-shadow: 0px 0px 3px #7c7c7c;
    z-index: 50;
    border-top: 5px solid #3186ea;
}
.cheque-page .cheque-fulfill.active {
    display: flex;
}
.cheque-page.base-container:has(.cheque-fulfill.active) > *:not(.cheque-fulfill) {
    pointer-events: none;
    filter: blur(1.8px) grayscale(1.5) !important;
}

.cheque-page .cheque-fulfill > div {
    width: 100%;
}
.cheque-page .cheque-fulfill .fulfill__icon {
    font-size: 4rem;
    color: #3186ea;
}

.cheque-page .cheque-fulfill .fulfill__text {
    display: flex;
    flex-flow: column;
    gap: 0.5em;
    text-align: center;
}
.cheque-page .cheque-fulfill .fulfill__text h5 {
    font-size: 1rem;
}
.cheque-page .cheque-fulfill .fulfill__text p {
    font-weight: lighter;
    font-size: 0.75rem;
    text-align: justify;
    word-spacing: -1px;
}

.cheque-page .cheque-fulfill .fulfill__form {
    margin-bottom: 0.5em;
}
.cheque-page .cheque-fulfill .fulfill__form > div {
    padding-block: 0.5em;
}

.cheque-page .cheque-fulfill .fulfill__form > div p span:last-child {
    font-size: 0.8rem;
    font-weight: bold;
    color: #a7a7a7;
    word-spacing: -1px;
}
.cheque-page .cheque-fulfill .fulfill__form > div.active p span:last-child {
    color: #000000;
    transition: 0.3s;
}
.cheque-page .cheque-fulfill .fulfill__form .form__date > div:last-child input {
    font-size: 0.7rem;
    font-weight: bold;
    border: none;
    border-bottom: 1px dashed #bdb9b9;
    width: 25px;
    text-align: center;
    pointer-events: none;
    color: #999999;
}
.cheque-page .cheque-fulfill .fulfill__form .form__date > div:last-child input::placeholder {
    font-weight: normal;
}
.cheque-page .cheque-fulfill .fulfill__form .form__date > div:last-child input.error {
    color: #ff0000 !important;
    border-color: #ff0000 !important;
}
.cheque-page .cheque-fulfill .fulfill__form .form__date > div:last-child input.year {
    width: 35px;
}
.cheque-page .cheque-fulfill .fulfill__form .form__date > div:last-child span {
    font-size: smaller;
    color: #7a7a7a;
}
.cheque-page .cheque-fulfill .fulfill__form .form__date.active > div:last-child input {
    pointer-events: auto;
    color: #000;
}

.cheque-page .cheque-fulfill .fulfill__form .form__transaction {
    display: none;
}
.cheque-page .cheque-fulfill.transactional .fulfill__form .form__transaction {
    display: flex;
}


.cheque-page .cheque-fulfill .fulfill__action {
    font-size: 0.8rem;
    min-width: 50%;
    text-align: center;
}
.cheque-page .cheque-fulfill .fulfill__action button {
    padding: 0.5em 0.9em;
    border-radius: 3px;
    cursor: pointer;
}
.cheque-page .cheque-fulfill .fulfill__action button.fulfill__action__accept {
    background: #03060a;
    border: 1px solid #03060a;
    color: #fff;
}
.cheque-page .cheque-fulfill .fulfill__action button.fulfill__action__accept:hover {
    background: #fff;
    color: #03060a;
    /* font-weight: bolder; */
    transition: 0.3s;
}
.cheque-page .cheque-fulfill .fulfill__action button.fulfill__action__decline {
    border: none;
    background: unset;
}

.cheque-page .cheque-fulfill .fulfill__action button.fulfill__action__decline:hover {
    color: #320202;
    /* font-weight: bolder; */
    box-shadow: 0 0 3px #e4c7c7;
    transition: 0.2s;
}
.cheque-page .cheque-list .list__filter > .filter__item.filter__item--price > div {
    position: absolute;
    top: 100%;
    background: #313a48;
    z-index: 5;
    border-radius: 3px;
    border: 2px solid #494f63;
    box-shadow: 0 0 3px #020518;
    margin-top: 6px;
    width: 200%;
}

.cheque-page .cheque-list .list__filter > .filter__item.filter__item--price > div > div > div {
    background: #00000054;
    padding: 0.3em;
    border-radius: 5px;
    margin: 0.1em;
}

.cheque-page .cheque-list .list__filter > .filter__item.filter__item--price > div input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #fafafa;
    background: transparent;
    border-radius: 2px;
    font-size: 0.7rem;
    text-align: center;
    font-weight: bold;
}

.cheque-page .cheque-list .list__filter > .filter__item.filter__item--price > div input::placeholder {
    font-weight: normal;
}

.cheque-page .cheque-list .list__filter > .filter__item.filter__item--price > div > div > div.active input {
    pointer-events: none;
    border: none;
}

.cheque-page .cheque-list .list__filter > .filter__item.filter__item--price > div > div > div.active p:first-child {
    color: #b5b5b5;
}

.cheque-page .cheque-list .list__filter > .filter__item.filter__item--price > div > div > div:last-child {
    opacity: 0;
    position: relative;
    pointer-events: none;
    margin-top: -30px;
    z-index: -1;
    transition: 0.3s;
}

.cheque-page .cheque-list .list__filter > .filter__item.filter__item--price > div > div > div:last-child.enable {
    pointer-events: auto;
    margin-top: unset;
    z-index: unset;
    opacity: 1;
    transition: 0.5s;
}

.cheque-page .cheque-list .list__filter > .filter__item.filter__item--price > div p:first-child {
    font-size: 0.7rem;
    text-wrap: nowrap;
}

.cheque-page .cheque-list .list__filter > .filter__item.filter__item--price > div p:last-child {
    padding-inline-start: 0.5em;
}

.cheque-page .cheque-list .list__filter > .filter__item.filter__item--price > div p:last-child span {
    font-size: smaller;
    padding: 0.2em;
    border-radius: 2px;
    cursor: pointer;
    aspect-ratio: 1;
    width: 20px;
    justify-content: center;
    align-items: center;
}

.cheque-page .cheque-list .list__filter > .filter__item.filter__item--price > div p:last-child span.remove {
    display: none;
}

.cheque-page .cheque-list .list__filter > .filter__item.filter__item--price > div p:last-child span.add:hover {
    background: #ffffff38;
    color: #21cb40;
    transition: 0.3s;
}

.cheque-page .cheque-list .list__filter > .filter__item.filter__item--price > div p:last-child span.remove:hover {
    background: #ffffff38;
    color: #bf0d0d;
    transition: 0.3s;
}

.cheque-page .cheque-list .list__filter > .filter__item.filter__item--price > div > div > div.active p:last-child span.remove {
    display: flex !important;
}

.cheque-page .cheque-list .list__filter > .filter__item.filter__item--price > div > div > div.active p:last-child span.add {
    display: none !important;
}


/* ---------------------------- */
/* ------- Cheque-Page -------E */
/* ---------------------------- */

.building-wrapper {
    position: relative;
    width: 260px;
}

.building-image {
    /* width: 100%; */
    /* display: block; */
}

.flex-row-floorelection {
    display: flex;
    align-items: center;
}

.building-info-table { margin: 1em 0;
    width: 100%;

 }

.building-info-table table {

    font-size: 1em;
    background-color: #fff;
     border: 1px solid #ccc; 
     box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.building-info-table th, .building-info-table td {
     border: 1px solid #ccc; 
     padding: 0.7em 1em;
      text-align: center; 
    } 
.building-info-table th { 
    background-color: #f2f2f2;
     font-weight: bold;
      color: #333; 
} 


.building-info-table tr:nth-child(even) td {
     background-color: #fafafa;
     }

/* لایه شفاف روی عکس */
.floors-overlay {
    position: absolute;
    top: 78px;
    /* left: 0; */
    width: 217%;
    height: calc(105%);
    pointer-events: none;
    right: 70px;
}

/* هر طبقه = یک نوار روی عکس */
.floor {
    width: 73%;
    height: calc(80% / 8);
    cursor: pointer;
    padding: 2px 5px 5px;
    pointer-events: auto;
}

/* هاور */
.floor:hover {
    background: rgba(0, 200, 0, 0.15);
}

/* گرفته شده */
.floor.taken {
    background: rgba(255, 0, 0, 0.25);
    cursor: not-allowed;
}

/* انتخاب کاربر */
.floor.selected {
    background: rgba(0, 180, 0, 0.4);
}
/* ---------------------------- */
/* S---- floor-Page ------- */
/* ---------------------------- */
.base-container.floor-page {
    display: block;
}
.floor-page .body-segment {
    background: #f6f7f9;
    height: 100%;
    width: 100%;
    padding-bottom: 4em;
    max-width: 550px;
    margin-inline: auto;
}

.floor-page .nav-segment {
    position: sticky;
    /*bottom: 1em;*/
    width: 85%;
    left: 0;
    right: 0;
    margin-inline: auto;
    background: #192028;
    color: #fff;
    border-radius: 11px;
    box-shadow: 0 0 2px #04162c;
    overflow: hidden;
    max-width: 800px;
}
.floor-page .nav-segment .nav-segment__item {
    position: relative;
}
.floor-page .nav-segment .nav-segment__item a {
    width: 100%;
    padding-block: 0.7em 0.5em;
    padding-inline: 0.3em;
}
.floor-page .nav-segment .nav-segment__item a:hover {
    background: #213144;
    transition: .4s;
}
.floor-page .nav-segment .nav-segment__item a span {
    justify-content: center;
}
.floor-page .nav-segment .nav-segment__item a span:last-child {
    font-size: 0.55rem;
    color: #f3f3f3;
}
.floor-page .nav-segment .nav-segment__item p {
    visibility: hidden;
    position: absolute;
    top: 0;
    width: 40%;
    height: 3px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background: #fff;
}
.floor-page .nav-segment .nav-segment__item.active p {
    visibility: visible;
}
.floor-page .nav-segment .nav-segment__item.exit p {
    color: #ff3131;
}
.floor-page .nav-segment .nav-segment__item.exit a {
    color: #ff3131;
}
.floor-page .nav-segment .nav-segment__item.exit a span:last-child {
    color: #ffd0d0;
}

.floor-page .body-segment>div {
    padding: 1em;
}
.floor-page .body__overview .overview__header .overview__header__profile div:last-child p {
    font-size: 0.8rem;
}
.floor-page .body__overview .overview__header .overview__header__profile div:last-child p:first-child {
    font-weight: bold;
}
.floor-page .body__overview .overview__header .overview__header__profile div:last-child p:last-child {
    padding-top: 0.2em;
    color: #ababab;
    font-size: 0.7rem;
}
.floor-page .body__overview .overview__header .overview__header__alert span {
    padding: 0.3em 0.5em;
    font-size: 1.1rem;
    color: #192028;
    cursor: pointer;
    border-radius: 5px;
}
.floor-page .body__overview .overview__header .overview__header__alert span:hover {
    color: #c3ad00;
    background: #f8ffc4;
    transition: .3s;
}

.floor-page .body__overview .overview__info {
    background: #191919;
    color: #fff;
    border-radius: 8px;
    margin-top: 1em;
    padding: 0.8em;
}
.floor-page .body__overview .overview__info h2 {
    font-size: 0.6rem;
    font-weight: normal;
    padding-bottom: 1em;
    color: #adadad;
}
.floor-page .body__overview .overview__info h2 span:last-child {
    font-weight: bold;
    padding: 0.3em 0.7em;
    border-radius: 3px;
    font-size: 0.55rem;
}
.floor-page .body__overview .overview__info h2.st1 span:last-child,
.floor-page .body__overview .overview__info h2.st2 span:last-child {
    background: #042f0c;
    color: #3daf56;
    border: 1px solid #063e12;
}
.floor-page .body__overview .overview__info h2.st0 span:last-child {
    background: #2f0404;
    color: #af3d3d;
    border: 1px solid #3e0606;
}
.floor-page .body__overview .overview__info .overview__info__score__body {
    padding-bottom: 0.8em
}
.floor-page .body__overview .overview__info .overview__info__score__body p:first-child {
    font-size: 1.6rem;
    font-weight: bold;
    color: #ffd700;
}
.floor-page .body__overview .overview__info .overview__info__score__body p:last-child {
    font-size: 0.75rem;
    color: #eee;
}
.floor-page .body__overview .overview__info .overview__info__action button {
    background: #2b2b2b;
    color: #e5e5e5;
    border: 1px solid #373737;
    padding: 0.6em 1em;
    font-size: 0.65rem;
    border-radius: 3px;
    font-weight: bold;
    cursor: pointer;
}
.floor-page .body__overview .overview__info .overview__info__action button:hover {
    background: #eee;
    color: #2b2b2b;
    transition: .3s;
}
.floor-page .body__overview .overview__info .overview__info__note p {
    font-size: 0.6rem;
    text-align: center;
    padding-top: 1.8em;
    color: #b5b5b5;
}
.floor-page .body__overview .overview__selection {
    margin-top: 1.5em;
}
.floor-page .body__overview .overview__selection h2 {
    font-size: 0.8rem;
    color: #1e1e1e;
    padding-bottom: 0.8em;
}
.floor-page .body__overview .overview__selection h2 span:last-child {
    color: #6b4dd6;
    font-weight: normal;
    font-size: 0.75rem;
    cursor: pointer;
}
.floor-page .body__overview .overview__selection h2 span:last-child i {
    padding-inline-start: 0.3em;
}
.floor-page .body__overview .overview__selection h2 span:last-child:hover i {
    padding-inline-start: 0.5em;
    transition: .3s;
}
.floor-page .body__overview .overview__selection .overview__selection__body {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 2px #e1e1e1;
    padding: 0.5em;
}
.floor-page .body__overview .overview__selection .overview__selection__body>div:first-child {
    /* flex-basis: 50%; */
    position: relative;
}
.floor-page .body__overview .overview__selection .overview__selection__body>div:first-child img {
    cursor: zoom-in;
}
.floor-page .body__overview .overview__selection .overview__selection__body>div:first-child img:focus {
    /* width: 300px; */
    transform-origin: 100% 0;
    transform: scale(4);
    transition: 0.3s;
}
.floor-page .body__overview .overview__selection .overview__selection__body>div:last-child p:nth-child(1) {
    font-weight: bold;
    font-size: 0.9rem;
    border-bottom: 1px dotted #e1e1e1;
    padding-bottom: 0.2em;
}
.floor-page .body__overview .overview__selection .overview__selection__body>div:last-child p:nth-child(2),
.floor-page .body__overview .overview__selection .overview__selection__body>div:last-child p:nth-child(3),
.floor-page .body__overview .overview__selection .overview__selection__body>div:last-child p:nth-child(4) {
    font-size: 0.7rem;
    padding-top: 0.7em;
}
.floor-page .body__overview .overview__selection .overview__selection__body>div:last-child p span:nth-child(2) {
    font-weight: bold;
}

.floor-page .body__overview .overview__scores {
    margin-top: 1.5em;
}
.floor-page .body__overview .overview__scores h2 {
    font-size: 0.8rem;
    color: #1e1e1e;
    padding-bottom: 0.8em;
}
.floor-page .body__overview .overview__scores .overview__scores__body {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 2px #e1e1e1;
    padding: 0.5em;
}
.floor-page .body__overview .overview__scores .overview__scores__body table {
    text-align: center;
    border-collapse: collapse;
}
.floor-page .body__overview .overview__scores .overview__scores__body tr {
    border-bottom: 1px solid #ebedf2;
    color: #222222;
    font-size: 0.75rem;
}
.floor-page .body__overview .overview__scores .overview__scores__body th {
    color: #9f9f9f;
    font-size: 0.7rem;
    background: #eee;
    padding: 0.7em 0.4em;
}
.floor-page .body__overview .overview__scores .overview__scores__body td {
    padding: 0.7em 0.4em;
}
.floor-page .body__overview .overview__scores .overview__scores__body tr.selected td {
    background: #d5efff;
}
.floor-page .body__overview .overview__scores .overview__scores__body td:last-child {
    font-size: smaller;
    font-weight: bold;
    color: #918859;
}
.floor-page .body__overview .overview__scores .overview__scores__body tr.selected td {
    color: #598b91;
}
.floor-page .body__overview .overview__scores .overview__scores__body tr:hover td {
    background: #f5f5f5;
    transition: .3s;
}


.floor-page .body__chose {
    padding: 1em;
    display: none;
}
.floor-page .body__chose .chose__map {
    box-shadow: 0 0 3px #c7c7c7;
    background: #191919;
    border-radius: 5px;
    padding: 0.5em;
    flex-direction: column;
}
.floor-page .body__chose .chose__map img {
    box-shadow: 0 0 3px #e3e3e3;
    border-radius: 5px;
    width: 100%;
    max-width: 360px;
    cursor: zoom-in;
}
.floor-page .body__chose .chose__map img:focus {
    transform-origin: 100% 0;
    transform: scale(4);
    transition: 0.5s;
}
.floor-page .body__chose .chose__map a {
    font-weight: normal;
    width: unset;
    font-size: 0.8rem;
    height: 100%;
    padding-inline: 1em;
}
.floor-page .body__chose .chose__map p {
    text-align: center;
    font-size: 0.6rem;
    padding: 0.6em;
    background: #393939;
    width: 100%;
    margin-inline: auto;
    border-radius: 3px;
    color: #fbfbfb;
    word-spacing: -1px;
}
.floor-page .body__chose .chose__unit {
    margin-top: 1.5em;
}
.floor-page .body__chose .chose__unit h2 {
    font-size: 0.8rem;
    color: #040d16;
    padding-bottom: 1em;
}
.floor-page .body__chose .chose__unit .chose__unit__list {
    background: #fff;
    padding: 0.5em;
    border-radius: 3px;
    box-shadow: 0 0 3px #cfcfcf;
}
.floor-page .body__chose .chose__unit .chose__unit__list__item {
    flex-basis: calc(50% - 1em);
    max-width: 200px;
    aspect-ratio: 2/1;
    height: auto;
    position: relative;
    border-radius: 3px;
    box-shadow: 0 0 2px #c7c7c7;
    border: 1px solid #b5b5b5;
}
.floor-page .body__chose .chose__unit .chose__unit__list__item:hover {
    box-shadow: 0 0 5px #c7c7c7;
    transition: .3s;
}
.floor-page .body__chose .chose__unit .chose__unit__list__item>div:first-child {
    filter: grayscale(1);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
.floor-page .body__chose .chose__unit .chose__unit__list__item:hover>div:first-child {
    filter: grayscale(0);
    transition: .3s;
}
.floor-page .body__chose .chose__unit .chose__unit__list__item>div:last-child {
    position: relative;
    background: #000000c7;
    color: #fff;
    font-size: 0.55rem;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    padding: 0.7em 0.5em;
    width: 100%;
    padding-inline: 1em;
}
.floor-page .body__chose .chose__unit .chose__unit__list__item>div p:first-child {
    font-weight: bold;
    padding-bottom: 0.6em;
}
.floor-page .body__chose .chose__unit .chose__unit__list__item>div p:last-child {
    justify-content: start;
}
.floor-page .body__chose .chose__unit .chose__unit__list__item>div button {
    position: absolute;
    inset-inline-end: 5px;
    top: 10px;
    width: unset;
    height: unset;
    font-size: 0.6rem;
    font-weight: bold;
}
.floor-page .body__chose .chose__unit .chose__unit__list__item>p {
    position: absolute;
    left: 5px;
    top: 5px;
    font-weight: bold;
    background: #00000099;
    font-size: 0.75rem;
    padding: 0.2em 0.4em;
    border-radius: 2px;
    color: #fff;
    border: 1px solid #000;
}

.floor-page .body__details {
    padding: 1em;
    display: none;
}
.floor-page .body__details .details__map {
    width: 100%;
    aspect-ratio: 3 / 2;
    height: auto;
    border-radius: 5px;
    filter: invert(1);
    overflow: hidden;
    max-height: 200px;
    min-width: 200px;
    flex-basis: 50%;
    /* border: 2px solid #959595; */
}
.floor-page .body__details .details__map img {
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}
.floor-page .body__details .details__map img:focus {
    transform-origin: 100% 0;
    transform: scale(4);
    transition: 0.5s;
}
.floor-page .body__details .details__specific {
    flex-basis: calc(50% - 1em);
    align-self: end;
}
.floor-page .body__details .details__specific__header h2 {
    font-size: 0.9rem;
    word-spacing: -1px;
}
.floor-page .body__details .details__specific__header p {
    font-size: 0.7rem;
    color: #737373;
    padding-top: 0.5em;
}
.floor-page .body__details .details__specific__info {
    padding-top: 1em;
}
.floor-page .body__details .details__specific__info .details__specific__info__item {
    font-size: 0.8rem;
    background: #fff;
    padding: 0.5em;
    border-radius: 5px;
    box-shadow: 0 0 2px #dbdbdb;
    flex-grow: 1;
}
.floor-page .body__details .details__specific__info .details__specific__info__item p:first-child span:first-child {
    color: #858585;
    padding-inline-end: 0.4em;
}
.floor-page .body__details .details__specific__info .details__specific__info__item p:first-child span:last-child {
    font-weight: bold;
}
.floor-page .body__details .details__specific__info .details__specific__info__item p:last-child {
    color: #878787;
    font-size: smaller;
    padding-top: 0.3em;
}
.floor-page .body__details .details__calc {
    margin-top: 1em;
}
.floor-page .body__details .details__calc h2 {
    font-size: 0.8rem;
    padding-bottom: 1em;
}
.floor-page .body__details .details__calc .details__calc__info {
    padding: 0.5em;
    background: #fff;
    box-shadow: 0 0 2px #dbdbdb;
    border-radius: 3px;
}
.floor-page .body__details .details__calc .details__calc__info__item {
    padding-bottom: 0.6em;
}
.floor-page .body__details .details__calc .details__calc__info__item p:first-child {
    font-size: 0.7rem;
    word-spacing: -2px;
    color: #4b4b4b;
}
.floor-page .body__details .details__calc .details__calc__info__item p:last-child {
    padding: 0.2em 0.5em;
    background: #f5f5f5;
    border-radius: 2px;
    min-width: 40px;
    border: 1px solid #d1d1d1;
    font-size: 0.75rem;
    font-weight: bold;
    max-width: 190px;
    flex-grow: 1;
}
.floor-page .body__details .details__calc .details__calc__info__item div.check {
    background: #eee;
    border: 1px solid #c3c3c3;
    border-radius: 4px;
    padding: 0.1em;
    font-size: 0.7rem;
    font-weight: bold;
}
.floor-page .body__details .details__calc .details__calc__info__item div.check span {
    padding: 0.3em;
    min-width: 50px;
    color: #646464;
    border-radius: 3px;
    transition: 0.3s;
    cursor: pointer;
}
.floor-page .body__details .details__calc .details__calc__info__item div.check span.selected {
    background: #fff;
    box-shadow: 0 0 2px #757575;
    color: #031c02;
    transition: 0.3s;
}
.floor-page .body__details .details__action {
    margin-top: 1em;
}
.floor-page .body__details .details__action button.general-button {
    width: unset;
    height: unset;
    padding: 0.5em 1em;
    border-radius: 2px;
    font-weight: bold;
}
.floor-page .body__details .details__action button.return {
    text-align: center;
    border: 1px solid #8b0000;
    padding: 0.5em 1em;
    font-size: 0.75rem;
    border-radius: 2px;
    cursor: pointer;
    background: #fffdfd;
    color: #6e0a0a;
    font-weight: bold;
    flex-basis: 25%;
}
.floor-page .body__details .details__action button.return:hover {
    background: #ffdbdb;
    transition: 0.3s;
}

.floor-page .body__others {
    padding: 1em;
    display: none;
}
/* ---------------------------- */
/* -------- Election-Page -----E */
/* ---------------------------- */