@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;700;900&display=swap");

:root {
    --color-dark-blue: #003cff;
    --color-main: #6c67e0;
    --color-hover-submenu: #6c67e0;
    --color-blue: #16a1dc;
    --color-red: #ff2b2b;
    --color-dark-orange: #f95b4f;
    --color-yellow: #ffcc70;
    --color-dark-main: #9400ff;
    --color-light-purple: #e3e5fe;
    --color-gray: #a8a8a8;
    --color-gray-text: #8C97A8;
    --color-medium-gray: #b0b0b0;
    --color-light-gray: #dfdfdf;
    --height-screen: calc(100vh - 118px);
    --color-green: #28a745;
    --color-light-system: rgba(148, 0, 255, 0.1);
    --color-icon: #000;
    --backgroud-color-tpurple: #6c67e015;
    --backgroud-color-icon: #F3F7FD;
    --backgroud-viewfolio: rgba(148, 0, 255, 0.1);
    --color-checkbox-success: #28a745;
    --br-purple-button: 10px;
    --br-lpurple-button: 10px;
    --page-sidebar-minified-width: auto;
    --page-sidebar-minified-display: inherit;
    --sidebar-hover-submenu-color: #6c67e0;
    --sidebar-hover-submenu-padding: 3px 10px;
    --sidebar-color-hover-focus-submenu: auto;
    --sidebar-submenu-nav: #6c67e0;
    --sidebar-color-main: #6c67e0;
    --sidebar-nav-li-a-i: 16px;
    --sidebar-background: white;
    --sidebar-width: 240px;
    --sidebar-top: 64px;
    --sidebar-left: 70px;
    --sidebar-color-text: #a8acb1;
    --navbar-color-main: auto;
    --navbar-border-radius-icons: inherit;
    --navbar-background-color: white;
    --navbar-height: 64px;
    --navbar-width: 80px;
    --navbar-item-active: #6c67e0;
    --navbar-item: #a8a8a8;
    --progress-bar-color: #19beff;
    --color-white: #fff;
    --color-bright-blue: #007bff;
    --notif-unread-bg: #ff4444;
    --notif-unread-box-shadow: #ff4444;
    --color-previewpdf-primary: white;
    --color-previewpdf-secondary: #7445FF;
    --color-previewpdf-shadow: rgba(116, 69, 255, 0.1);
    --color-previewpdf-shadow-hover: rgba(116, 69, 255, 0.2);
    --color-btn-bg: rgba(116, 69, 255, 0.1);
    --color-btn-color: rgba(116, 69, 255, 0.1);
    --color-btn-border: rgba(116, 69, 255, 0.2);
    --color-btn-bg-hover: rgba(116, 69, 255, 0.2);
    --color-btn-editor-color: rgba(116, 69, 255, 0.1);
}

* {
    font-family: "DM Sans", sans-serif;
}

body {
    background-color: #eeeeee;
    padding-bottom: 26px;
}

footer {
    background-color: #f1f1f1;
    text-align: center;
    padding: 10px 0;
}

.mt-28 {
    margin-top: 28px;
}

.badge-zero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: bold;
    margin-left: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--color-gray);
    color: var(--color-white);
    background-color: var(--color-gray-text);
}

.tooltip-contracts {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip-contracts::before {
    content: attr(title);
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 15px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1;
    transform: translateX(-30%) translateY(30px);
    width: 300px
}

.tooltip-contracts:hover::before {
    opacity: 1;
    transform: translateX(-30%) translateY(30px);
    width: 300px
}

p {
    margin: 0;
    padding: 0;
}

.p-8 {
    padding: 8px !important;
}

label.ICheckItem {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 !important;
}

a {
    color: inherit;
}

a:hover {
    color: var(--color-main);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.base-hr {
    height: 1px;
    background-color: var(--color-light-gray);
    margin: 4px 0 !important;
    padding: 0 !important;
}

.text-regular {
    font-size: 12pt !important;
}

.InputPassword {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    border: 1px solid var(--color-light-gray);
    height: 47px;

    &>input {
        width: 100%;
        border: none;
        padding-left: 16px;
        background-color: transparent;
    }

    &>i {
        position: absolute;
        cursor: pointer;
        font-size: 16px;
        right: 16px;
    }

}

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

.text-end {
    text-align: end !important;
}

.LabelTag {
    padding: 4px 12px !important;
    border-radius: 4px;
}

.LabelTag.purple {
    background-color: var(--color-main);
    color: white;
}

.LabelTag.pilled-radius {
    border-radius: 100px;
}

.LabelTag.red {
    background-color: red;
    color: white;
}

.LabelTag.border-gray {
    border: 1px solid var(--color-light-gray);
}

h1.Title {
    color: #333 !important;
    font-size: 16pt;
    font-weight: bold;
    margin: 0 !important;
}

button {
    cursor: pointer;
    background-color: transparent;
    border: none;
}

button:disabled,
button[disabled] {
    /* border: 1px solid #999999; */
    background-color: #cccccc10;
    color: #000000 !important;
    font-weight: 600;
    cursor: default;
}

button:disabled:hover,
button[disabled]:hover {
    opacity: 1 !important;
    background-color: #cccccc10 !important;
}

/* Progress Bar */
.ProgressBar {
    padding: 2px;
    width: 100%;
    background-color: #dfdfdf80;
    border-radius: 4px;
    overflow: hidden;
    height: 20px;
}

.ProgressBar .progress__bar {
    height: 100%;
    background-color: var(--color-main);
    animation: fill-bar 3s infinite;
}

/* Boxes */
.BoxWhite {
    background-color: white;
    border: 1px solid #00000025;
    border-radius: 8px;
    padding: 12px !important;
    font-size: 10pt;
    color: black;
}

/* Squares */
.Square {
    width: 15px;
    height: 15px;
    display: block;
    border: 1px solid #00000015;
    border-radius: 4px;
}

.Square.white {
    background-color: #00000005;
}

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

.Square.Yellow {
    background-color: var(--color-yellow);
}

.Square.red {
    background-color: var(--color-red);
}

.LoadingContainer {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 10000;
    padding: 24px;
}

.Loading {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.6);
    border-left-color: var(--color-main);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.Loading-span {
    font-size: 15px;
    position: absolute;
    margin-top: 70px !important;
    color: var(--color-main);
    font-weight: bold;
}

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

    100% {
        transform: rotate(360deg);
    }
}

.PureButton {
    background-color: transparent;
    border: none;
    font-size: 12pt;
    font-weight: bold;
    cursor: pointer;
}

.UnderlineButton:hover {
    border-bottom: 2px solid var(--color-main);
}

.PureButton.Purple {
    color: var(--color-main);
}

.IconButton {
    padding: 8px 20px;
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11pt;
    font-weight: 500;
    color: var(--color-gray);

    &>span {
        color: var(--color-main);
    }

}

.ButtonBlock {
    padding: 8px 16px !important;
    border: none !important;
    font-size: 11pt;
    border-radius: 4px;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    outline: none;
    text-decoration: none !important;
}

.ButtonBlock:hover {
    opacity: 0.8;
}

.ButtonBase {
    padding: 8px 16px !important;
    border: none !important;
    font-size: 11pt;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    outline: none;
    text-decoration: none !important;
}

.ButtonBase:hover {
    opacity: 0.8;
}

.ButtonPilled {
    border-radius: 100px;
}

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

.PrimaryButton i.Border {
    color: var(--color-blue);
}

.PurpleButton {
    background-color: var(--color-main);
    color: white !important;
    border-radius: var(--br-purple-button);
}

.PurpleButton i {
    color: inherit;
}



.btn-secondary-purple {
    background-color: var(--color-btn-bg);
    color: var(--color-btn-color);
    border: 1px solid var(--color-btn-border);
    border-radius: 6px;
    padding: 6px 10px !important;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-secondary-purple:hover {
    background-color: var(--color-btn-bg-hover);
    transform: translateY(-2px);
}

.btn-secondary-purple:active {
    transform: translateY(0);
    background-color: rgba(116, 69, 255, 0.3);
}


.GrayButton {
    background-color: var(--color-light-gray);
    color: var(--color-gray) !important;

    &>i {
        margin-top: 4px !important;
    }

}

.RedButton {
    background-color: var(--color-red);
    color: white !important;
}

.RedButton i {
    color: inherit;
}

.GreenButton {
    background-color: var(--color-green);
    color: white !important;
}

.GreenButton i {
    color: inherit;
}

.LPurpleButton {
    height: 50px;
    background-color: var(--color-main);
    color: white;
    border-radius: var(--br-lpurple-button);
}

.LPurpleButton:hover {
    color: white;
}

.LPurpleButton i {
    color: var(--color-main);
}

.ButtonNuevaSolicitud {
    background: var(--color-white);
    color: var(--color-main);
    transition: all .5s ease;
}

.ButtonNuevaSolicitud:hover {
    background: var(--color-main);
    color: var(--color-white);
}

.ButtonNuevaSolicitud i {
    background: var(--color-main);
    transition: all .5s ease;
}

.ButtonNuevaSolicitud:hover i {
    background-color: var(--color-white);
    color: var(--color-main);
}

.ButtonNuevaSolicitud:focus {
    outline: none;
    background: var(--color-main);
    color: var(--color-white);
}

.ButtonNuevaSolicitud:focus i {
    background-color: var(--color-white);
    color: var(--color-main);
}

.TPurpleButton {
    color: var(--color-dark-purple);
    background-color: rgba(148, 0, 255, 0.1);
}

.BPurpleButton {
    border: 1px solid var(--color-dark-purple);
    color: var(--color-dark-purple);
}

.BGrayButton {
    background-color: white;
    border: 1px solid var(--color-gray) !important;
}

p.SmallGray {
    color: var(--color-gray);
    font-size: 11pt;
}

.Btn-Circle {
    border-radius: 100px;
    height: 30px;
    width: 30px;
    padding: 8px 8px !important;
}

.Btn-Circle>i {
    margin-top: 1px;
}

.badges-task {
    background: #eef0f1;
    border-radius: 9px;
    font-size: 18px;
    /* controla el tamaño del icono también */
    padding: 8px 11px;
    display: inline-block;
    /* mejor que block para iconos pequeños */
    min-width: 1em;
    /* asegura que no sea más pequeño que un carácter / icono */
    text-align: center;
    /* centra el icono */
}


.text-rg {
    font-size: 11pt !important;
}

/* File Input Button */
.FileInputButton {
    background-color: var(--color-main);
    color: white;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 16px !important;
    font-size: 11pt;
    flex-direction: column;
    cursor: pointer;
}

.FileInputButton>input {
    display: none;
}

/* File Input */

.FileInputActive {
    border-color: var(--color-main) !important;
    color: var(--color-main);
}

.FileInput {
    width: 100%;
    border: 2px dotted var(--color-gray);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px !important;
    font-size: 11pt;
    flex-direction: column;
    gap: 8px;
    position: relative;
    cursor: pointer;
    transition: all 150ms;
    border-radius: 8px;
    background-color: white;

    &>i {
        font-size: 22px !important;
    }

    .FileInputDescription {
        width: 120px;
        text-align: center;
    }

}

.FileInput:hover {
    border-color: #000000;
    transition: all 250ms;
}

.FileInput i {
    font-size: 22pt;
}

.FileInput input {
    display: none;
}

.FileInput .CloseInputIcon {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 11pt;
}

.FileInput .CloseInputIcon:hover {
    color: var(--color-red);
}

/* Global */

.WhiteContentContainer {
    background-color: white !important;
    padding: 12px !important;
    border-radius: 8px;
    overflow: auto;
}

.LocalNavigationContainer {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ModalContainer {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #00000020;
    backdrop-filter: blur(4px);
    z-index: 1000;
}

.ModalContainer .ModalContent {
    padding: 24px;
    min-width: 500px;
    border-radius: 8px;
    background-color: white;
}

.DropdownMenu {
    font-family: "DM Sans", sans-serif !important;
    border-radius: 8px;
    overflow-y: auto !important;
    width: 400px;
    margin-top: 4px !important;
    max-height: 450px !important;
    /* Se modifica a nivel JS*/
}

.DropdownOption {
    width: 100%;
    background-color: var(--color-white);
    height: 45px;
    /* border: none; */
    /* display: flex;
    align-items: center; */
    font-size: 11pt;
    /* font-weight: bold; */
    cursor: pointer;
    text-align: left;
    padding: 0 12px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.DropdownOption:hover {
    background-color: #6c67e020;
    color: var(--color-main);
}

.cursor-pointer {
    cursor: pointer;
}

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

.IconPurple {
    margin-left: 5px !important;
    font-size: 18px;
    color: var(--color-icon) !important;
}

.IconPurple:hover {
    color: var(--color-main) !important;
    cursor: pointer;
}

.BtnPurple {
    height: 24px;
    width: 20px;
    background: var(--color-icon) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.2s ease;
}

.BtnPurple:hover {
    background: var(--color-main) !important;
    cursor: pointer;
}

/* Icon específico para tareas */
.IconResumen {
    /* heredamos margen y tamaño de IconPurple */
    margin-left: 5px !important;
    font-size: 18px;

    /* color por defecto (light mode) */
    color: #123d87;

    /* transición suave si quieres */
    transition: color 0.3s ease;
}

/* hover igual que IconPurple */
.IconResumen:hover {
    cursor: pointer;
    color: var(--color-main);
}

/* dark mode */
body.dark-mode .IconResumen {
    color: #a3cbf3;
}


.IconBase {
    font-size: 14pt;
    font-weight: bold;
    color: #8d9190;
    padding: 4px !important;
}

.IconBase:hover {
    color: var(--color-main);
    cursor: pointer;
}

.BaseSelect {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    width: 100%;
}

.BaseSelect>i:hover,
.BaseSelect>p:hover {
    cursor: pointer;
    color: var(--color-main);
}

.BlackTitle {
    color: #353b65 !important;
    font-weight: bold;
}

.CircleIcon {
    width: 40px;
    height: 40px;
    border-radius: 100px;
    display: grid !important;
    place-items: center;
    font-size: 11pt;
    box-shadow: 0px 11px 28px -6px rgba(0, 0, 0, 0.63);
}

.CircleIcon.Shadow {
    box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.05);
}

.CircleIcon.White {
    background-color: white;
}

.CircleIcon.Purple {
    background-color: var(--color-main);
    background: #000;
    color: white;
}

.CircleIcon.Green {
    background-color: green;
    color: white;
}

.CircleIcon.Yellow {
    background-color: var(--color-yellow);
    color: white;
}

.CircleIcon.DarkBlue {
    background-color: var(--color-dark-blue);
    color: white;
}

.CircleIcon.btnIconNuevaSolicitud {
    background: var(--color-main);
    color: var(--color-white);
}

.GridCol-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 12px;
}

.GridCol-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 12px;
}


.grid-col-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.grid-col-2-auto {
    display: grid;
    grid-template-columns: 1fr auto;
}

.grid-col-4-auto {
    display: grid;
    grid-template-columns: auto auto auto auto;
}

.flex-col {
    display: flex !important;
    flex-direction: column !important;
}

.items-center {
    align-items: center !important;
}

.flex-between {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.items-bottom {
    align-items: flex-end !important;
}

.gap-0 {
    gap: 0px !important;
}

.gap-1 {
    gap: 4px !important;
}

.gap-2 {
    gap: 8px !important;
}

.gap-3 {
    gap: 12px !important;
}

.gap-4 {
    gap: 20px !important;
}

.FlexRowEnd {
    display: flex !important;
    justify-content: end;
    align-items: center;
}

.FlexRowCenter {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.FlexColumnCenter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.FlexRowBetween {
    display: flex !important;
    justify-content: space-between;
    /* separa primer hijo y último a extremos */
    align-items: center;
}

.FlexRowBetween .LeftGroup {
    display: flex;
    gap: 10px;
    /* espacio entre checkboxes */
}

.LeftGroup label:first-child {
    margin-right: 20px;
    /* espacio horizontal de 20px */
}

.TLabel {
    font-weight: bold;
    font-size: 11pt;
    display: flex;
    gap: 4px;
    padding: 8px !important;
    border-radius: 4px;
}

.TLabelPurple {
    height: 2.5rem;
    color: var(--color-dark-main);
    font-size: 11pt;
    font-weight: bold;
    background-color: var(--color-light-purple);
    display: flex;
    /* padding: 8px !important; */
    border-radius: 4px;
}

.TLabelGreen {
    color: var(--color-green);
    font-weight: bold;
    font-size: 11pt;
    display: flex;
    gap: 4px;
    background-color: #6c67e015;
    padding: 8px !important;
    border-radius: 4px;
}

.LabelGrayBorder {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-light-gray);
    color: var(--color-gray);
    font-weight: bold;
    font-size: 10pt;
    gap: 4px;
    border-radius: 4px;
    padding: 8px 12px !important;
}

.LabelGrayBorder i {
    cursor: pointer;
}

.LabelGrayBorder i:hover {
    color: var(--color-red);
}

/*Permite ocultar elementos sin afectar sus estilos*/
.soft-HideElement {
    visibility: hidden;
    pointer-events: none;
}


.HideElement {
    display: none !important;
}

.screenWidthShow {
    width: calc(100vw - 80px) !important;
    height: calc(100vh - 70px) !important;
}

.screenWidthHiden {
    width: calc(100vw - 0px) !important;
    height: calc(100vh - 0px) !important;
}

/* Components */
main.Container * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

main.Container .Content {
    padding: 12px;
}

main.Container h1 {
    font-size: 18pt;
    color: var(--color-blue);
    margin-bottom: 12px;
}

main.Container input,
main.Container select {
    padding-left: 8px !important;
}

main.Container form {
    display: grid;
    gap: 8px;
}

#success-modal {
    z-index: 2;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
}

#contracts-table-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#suppliers-table-body {
    display: flex;
    flex-direction: column;
}

#company-table-body-new {
    display: flex;
    flex-direction: column;
}

/* Table */
.ContractTableSection {
    overflow: hidden;
}

/* Contract details modal */
.ContractDetailsContainer {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: 60vh;
    gap: 28px;
    font-size: 11pt;
    color: #312e86;
    overflow: auto;

    .Left {
        background-color: white;
        border-radius: 8px;
    }

    .Center {
        background-color: white;
        border-radius: 8px;
        display: grid;
        grid-template-rows: auto 1fr;
        gap: 20px !important;

        .DocumentList {
            display: flex;
            flex-direction: column;
            height: 80%;
            overflow: auto;
            gap: 8px;
        }

    }
}

@media (max-width: 1240px) {
    .ContractDetailsContainer {
        grid-template-columns: 1fr;

        .DocumentList {
            height: 100%;
        }

    }
}

.label-gray {
    color: var(--color-gray);
    font-size: 10.5pt;
}

.label-underline {
    text-decoration: underline;
}

.DocumentDescription {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;

    .show-contract-detail-document {
        cursor: pointer;
        color: white;
        color: var(--color-gray);
        transition: 350ms ease-out;

        &:hover {
            color: var(--color-main);
            transition: 250ms ease-in;
        }

    }

    .Icon {
        background-color: var(--color-light-purple);
        min-width: 40px;
        height: 40px;
        border-radius: 12px;
        display: grid;
        place-items: center;

        & svg {
            color: var(--color-main);
            margin-bottom: 4px;
        }

    }
}

.ContractDropDown {
    & h3 {
        font-size: 14pt;
        color: #312e86;
    }

    & h4 {
        font-size: 11pt;
        color: #312e86;
    }

}

/* DropDown */

.DivTableHeaders {
    padding: 16px !important;
    font-size: 12pt;
    font-weight: 500;
    color: var(--color-gray);
}

.DivCol-9 {
    display: grid;
    grid-template-columns: auto repeat(8, 1fr) auto;
    gap: 12px;
}

.DivWhiteRow {
    background-color: white;
    padding: 16px !important;
    border-radius: 12px;
    align-items: center;
    font-size: 12pt;
}

.DivGreyRow {
    background-color: #dde1e7;
    padding: 16px !important;
    border-radius: 12px;
    align-items: center;
    font-size: 12pt;
}

.sectionContractList {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sectionContractList .inputSearch {
    width: 400px;
}

.BasicTable {
    /* Layout */
    width: 100%;
    /*border-spacing: 0 8px;*/
    overflow: auto;

    /* Visual */
    background: #ffffff;
    border-radius: 8px;

    /* Efecto 3D / Sombra */
    box-shadow: 0 8px 16px rgba(148, 148, 148, 0.336);
    margin-top: 30px !important;

}

/* === THEAD COMPLETO COLOREADO === */
.BasicTable thead {
    background-color: #f0eaff !important;
    /* Tu color */
}

.BasicTable thead th {
    color: #787478 !important;
    /* Para que sea visible sobre fondo azul */
    padding: 12px;
}

.BasicTable thead th:first-child {
    border-top-left-radius: 8px;
}

.BasicTable thead th:last-child {
    border-top-right-radius: 8px;
}

/* === BORDER-RADIUS SOLO EN TBODY === */
.BasicTable td:first-child {
    border-radius: 10px 0 0 10px;
}

.BasicTable td:last-child {
    border-radius: 0 10px 10px 0;
}

/* === ESTILOS GENERALES === */
.BasicTable thead tr {
    font-size: 10pt;
}

.BasicTable tbody tr {
    background-color: #f9f7fd !important;
    /* Tu color */
    border-radius: 8px;
}

.BasicTable th {
    padding: 0 12px;
}

.BasicTable td {
    background-color: #e9e9e970;
    color: #000000 !important;
    /* Para que sea visible sobre fondo azul */
    font-size: 11pt;
    padding: 12px;
    margin-top: 8px;
}

/* === FILA BLANCA === */
.BasicTable tr.WhiteRow {
    background-color: rgb(230, 15, 15);
    height: 85px;
}

.BasicTable tr.WhiteRow td {
    background-color: white;
    height: 85px;
}

.BasicTable tr.WhiteRow td.contStatusIcon {
    width: 85px;
}

.BasicTable tr.WhiteRow td.contStatusIcon i {
    margin: 0 0 0 10px;
}

.BasicTable tr.WhiteRow td.verticalMiddle {
    vertical-align: middle;
    font-size: .8rem;
}

.BasicTable tr.WhiteRow td.contProgress .textProgress {
    margin-bottom: .7rem;
}

.BasicTable tr.WhiteRow td.contActions {
    width: 12%;
    text-align: center;
}

/* === FILA TRANSPARENTE === */
.BasicTable tr.Transparent td {
    background-color: transparent;
}

/* === COLOR ACTIVO === */
.BasicTable .ActiveColor {
    color: green;
}

/* Tabs */
.Tabs {
    border: none !important;
}

.Tabs .BorderPurple {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 16px;
    font-size: 14px;
}

.Tabs .BorderPurple a,
.Tabs .BorderPurple button {
    color: var(--color-dark-purple);
    text-decoration: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
}

.Tabs>.tab-item {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0 16px;
}

/* Other tabs config */

.ModalContent .Tabs {
    border: none;
    background-color: transparent;
}

#tabs {
    background-color: transparent;
    border: none;
}

#tabs .BorderPurple,
.ModalContent .Tabs .BorderPurple {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 16px;
    font-size: 14px;
}

#tabs .BorderPurple>a,
.ModalContent .Tabs .BorderPurple a {
    color: var(--color-dark-main);
    text-decoration: none;
}

.ActiveTab {
    padding: 0 4px 2px !important;
    border-bottom: 1px solid !important;
    margin-bottom: -3px !important;
}

.tab-content {
    display: none;
    background-color: transparent;
}

.show {
    display: block;
}

/* Layout */
.LayoutNavContent {
    display: grid;
    grid-template-columns: auto 1fr;
    height: calc(100vh);
    overflow: hidden;
    background-color: #6b67e005;
}

.LayoutNavContent>.Layout__Navbar {
    background-color: var(--navbar-background-color);
    width: var(--navbar-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 50px 0;
}

.LayoutNavContent>.Layout__Navbar>section>a>img {
    width: 45px;
    object-fit: contain;
}

.LayoutNavContent>.Layout__Navbar>.Layout__Navbar--Items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.LayoutNavContent>.Layout__Navbar .Item {
    width: 45px;
    height: 45px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.5s;
    color: var(--navbar-item);
}

.LayoutNavContent>.Layout__Navbar .Item.Active {
    background-color: var(--navbar-item-active);
    color: var(--navbar-background-color);
    transition: all 0.7s;
}

.LayoutNavContent>section>.Layout__Header {
    background-color: var(--navbar-background-color);
    height: var(--navbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
}

.LayoutNavContent>section>.Layout__Header .contInputSearch {
    background: #F3F7FA;
    display: flex;
    flex-direction: row;
    border-radius: 7px;
    border: 1px solid var();
    overflow: hidden;
}

.LayoutNavContent>section>.Layout__Header .hiddenSearch {
    display: none;
}

.LayoutNavContent>section>.Layout__Header .contInputSearch .inputSearch {
    background: #F3F7FA;
    width: 290px;
    height: 44px;
    border: none;
}

.LayoutNavContent>section>.Layout__Header .contInputSearch .inputSearch:focus {
    outline: none !important;
}

.LayoutNavContent>section>.Layout__Header .contInputSearch .iconSearch {
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.LayoutNavContent>section>.Layout__Header .contInputSearch .iconSearch i {
    font-size: 1.2rem !important;
}

.LayoutNavContent>section>.Layout__Header .Layout__Header--Item {
    cursor: pointer;
    border: none;
    background-color: transparent;
    color: var(--color-medium-gray);
    font-size: 20pt;
}

.LayoutNavContent>section>.Layout__Header .Layout__Header--Item:hover {
    color: var(--color-main);
    background: var(--navbar-color-main);
    border-radius: var(--navbar-border-radius-icons);
}

.LayoutNavContent>section>.Layout__Header>nav {
    display: flex;
    align-items: center;
    /* padding-right: 32px; */
}

.LayoutNavContent>section>.Layout__Content {
    padding: 24px;
    width: calc(100vw - 80px);
    height: calc(100vh - 64px);
    overflow-y: auto;
}

.icon-box {
    background-color: #6C67E0;
    color: #ffffff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    width: 32px;
    height: 32px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.icon-box:hover {
    background-color: #ccc;
    box-shadow: 0 0 8px rgba(108, 103, 224, 0.6);
}



/* Request View */
#request-title {
    color: black;
    font-weight: bold;
}

main.Container .RequestView__SectionTitle {
    font-size: 16pt;
    padding-bottom: 12px;
}

main.Container .RequestView__FormTitle {
    font-size: 12pt;
}

main.Container .RequestView__DocumentForm {
    width: 50%;
}

main.Container .RequestView__DocumentForm>section {
    padding: 12px;
    border: 1px solid var(--color-light-gray);
    display: grid;
    gap: 8px;
}

main.Container .RequestView__RevisaEdita--options {
    gap: 12px;
}

main.Container .RequestView__RevisaEdita--editor {
    height: 500px;
    display: grid;
    place-items: center;
}

main.Container .RequestView__Vinculacion--forms {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 16px;
}

main.Container .RequestView__Vinculacion--forms form {
    padding: 12px;
}

main.Container .RequestView__Vinculacion--Entities {
    display: flex;
    flex-direction: column;
    gap: 12pt;
}

main.Container .RequestView__Documents--Container {
    background-color: white;
    padding: 16px;
    border-radius: 12px;
}

main.Container .RequestView__Documents--Container h3 {
    font-size: 14pt;
    margin-bottom: 12px;
}

#success-modal>.RequestModal__Content {
    display: flex;
    flex-direction: column;
    background-color: white;
    gap: 20px;
    padding: 2em 1em;
    width: 450px;
    border-radius: 12px;
    text-align: center;
    align-items: center;
    font-size: 14pt;
}

/* Dashboard */
main.Container .DashboardContent {
    display: grid;
    /*grid-template-columns: 1fr 400px;*/
    gap: 24px;
}

.DashboardContent .DashboardContent_Information {
    height: calc(100vh - 118px);
    overflow: auto;
}

main.Container .DashboardContent p {
    font-size: 12pt;
}

main.Container .DashboardContent>section:nth-child(2) {
    padding: 12px;
}

main.Container .Dashboard_StatusContianer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 14px;
}

button.CardStatus {
    transition: 350ms;

    &:hover {
        transition: 250ms;
        background-color: rgba(0, 0, 0, 0.02) !important;
    }

}

main.Container .Dashboard_StatusContianer .CardStatus {
    background-color: white;
    padding: 20px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: black;
    text-decoration: none;
}

main.Container .Dashboard_StatusContianer .CardNewSolicitud {
    background-color: white;
    padding: 20px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: black;
    text-decoration: none;
}

main.Container .Dashboard_StatusContianer .CardNewSolicitud:focus {
    outline: none;
}

main.Container .Dashboard_StatusContianer .CardNewSolicitud.Button {
    width: 100%;
    font-weight: 700;
    color: var(--color-gray-text);
    font-size: 12pt;
    transition: all .5s;
}

main.Container .Dashboard_StatusContianer .CardNewSolicitud.Button>i {
    background-color: var(--color-main);
    color: var(--color-white);
    font-size: 12pt;
    transition: all .5s;
}

main.Container .Dashboard_StatusContianer .CardNewSolicitud.Button.Purple:hover {
    opacity: 0.8;
    background: var(--navbar-item-active);
    box-shadow: 0px 11px 28px -6px rgba(0, 0, 0, 0.25);
    color: var(--color-white);
}

main.Container .Dashboard_StatusContianer .CardNewSolicitud.Button.Purple:hover i {
    background: var(--color-white);
    color: var(--color-main);

    &>i {
        color: var(--color-main);
    }

}

main.Container .Dashboard_StatusContianer .CardStatus.Button {
    width: 100%;
    font-weight: bold;
    color: var(--color-medium-gray);
    font-size: 12pt;
}

main.Container .Dashboard_StatusContianer .CardStatus.Button.Purple:hover {
    background-color: var(--color-main);
    color: white;

    &>i {
        color: var(--color-main);
    }

}

main.Container .Dashboard_StatusContianer .CardStatus.Button:hover {
    background-color: #f8f8f8;
}

main.Container .Dashboard_StatusContianer .CardStatus.Info {
    display: grid;
    grid-template-columns: auto 1fr auto;
}

main.Container .Dashboard_StatusContianer .CardStatus.Info .Icon {
    background-color: var(--backgroud-color-icon);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14pt;
    box-shadow: 0px 11px 28px -6px rgba(0, 0, 0, 0.25);
}

main.Container .Dashboard_StatusContianer .CardStatus.Info .Icon i {
    color: var(--color-gray-text) !important;
}

main.Container .Dashboard_StatusContianer .CardStatus.Info .IconStar {
    background: var(--color-yellow);
    color: var(--color-white);
}

main.Container .Dashboard_StatusContianer .CardStatus.Info .IconStar i {
    color: var(--color-white) !important;
}

main.Container .Dashboard_StatusContianer .CardStatus.Info .Label {
    font-size: 12pt;
    font-weight: 600;
    color: var(--color-gray-text);
    line-height: 1.2;
}

main.Container .Dashboard_StatusContianer .CardStatus.Info .Number {
    font-size: 18pt;
}

main.Container .Dashboard__Notifications {
    background-color: white;
    display: grid;
    grid-template-rows: 1fr auto;
    border-radius: 8px;
    height: calc(100vh - 118px);
    overflow: auto;
    padding: 3em !important;
}

main.Container .Dashboard__Notifications .NotificationCard {
    background-color: var(--color-dark-orange);
    display: grid;
    grid-template-columns: 100px 1fr auto;
    align-items: center;
    padding: 16px;
    border-radius: 8px;
    color: white;
    gap: 12px;
    box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.1);
}

main.Container .Dashboard__Notifications .UserIcon_Container {
    display: flex;
    overflow-x: auto;
}

main.Container .Dashboard__Notifications .UserIcon_Container::-webkit-scrollbar {
    display: none;
}

main.Container .Dashboard__Notifications .UserIcon {
    border: 2px solid white;
    background-color: #333;
    color: var(--color-dark-orange);
    font-size: 14pt;
    font-weight: bold;
    text-transform: uppercase;
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

main.Container .Home_MessageList {
    min-height: 250px;
    max-height: 250px;
    overflow: auto;
}

main.Container .Home_MessageList::-webkit-scrollbar {
    display: none;
}

main.Container .Dashboard__Notifications .Home_MessageContainer .Title {
    font-weight: bold;
}

.UserIcon.UserIconNext {
    margin-left: -12px;
}

main.Container .Dashboard__Notifications>div:first-child {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

main.Container .Dashboard__Notifications h4 {
    color: #333;
    font-size: 15pt;
    font-weight: bold;
}

main.Container .Dashboard__Notifications h5 {
    color: #555555;
    font-weight: bold;
    font-size: 12pt;
    margin-bottom: 8px;
}

.NewRequestButton:hover {
    background-color: var(--color-main) !important;

    &>* {
        color: white;
    }

}

.Dashboard__Notifications .Home_MessageContainer {
    display: flex;
    gap: 12px;
    padding: 8px;
}

.Dashboard__Notifications .Home_MessageContainer .Title {
    font-weight: bold;
    color: #333;
}

.Dashboard__Notifications .Home_MessageContainer .Content {
    padding: 0;
    color: var(--color-gray);
}

main.Container .ContractCounter {
    display: grid;
    grid-template-columns: 1fr auto;
    width: 100%;
    align-items: center;
    padding: 12px;
    font-size: 11pt;
    border-radius: 8px;
    background-color: white;
}

main.Container .ContractCounter>section:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
}



main.Container .ChartContainer {
    background-color: white;
    padding: 16px;
}

main.Container .ChartContainer h3 {
    color: var(--color-main);
    font-size: 16pt;
}

main.Container .ChartContainer>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

main.Container .ChartContainer>div>section {
    display: flex;
    align-items: center;
    gap: 12px;
}

main.Container .ChartContainer button {
    border: none;
    background-color: transparent;
    font-size: 14pt;
    color: var(--color-main);
    cursor: pointer;
}

main.Container .ChartContainer button:hover {
    text-decoration: underline;
    color: var(--color-blue);
}

main.Container .ChardContent {
    height: 45vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Approval */
main.Container .Approval__Content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

main.Container .Approval__CardForm {
    background-color: white;
    padding: 12px;
    border-radius: 8px;
    width: 500px;
}

main.Container .Approval__CardForm h2 {
    font-size: 14pt;
    font-weight: normal;
}

main.Container .Approval__ContactItems {
    display: flex;
}

main.Container .Approval__ContactItem {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 4px;
    border: 1px solid var(--color-main);
    padding: 4px 8px;
    border-radius: 100px;
    font-size: 10pt;
    align-items: center;
}

main.Container .Approval__Document {
    height: 70vh;
    background-color: white;
    padding: 2em;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 700px;
}

/* File Upload */
.FileUpload__Container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 auto;
    background-color: white;
    padding: 20px !important;
    border-radius: 8px;
}

.FileUpload__TagsEditorContainer {
    grid-template-columns: 400px 1fr;
    gap: 8px;
}

.FileUpload__TagsContainer {
    display: flex;
    flex-direction: column;
    overflow: auto;
    gap: 4px;
    height: 59vh;
}

.FileUpload_TagElement {
    font-size: 12px;
    margin: 0;
    padding: 8px 16px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #cacaca60;
}

.FileUpload_TagElement.White {
    background-color: rgba(0, 0, 0, 0.02);
    color: #333;
}

.FileUpload_TagElement.Gray {
    background-color: var(--color-light-gray);
    color: var(--color-gray);
}

.FileUpload_TagElement.Red {
    color: var(--color-red);
    background-color: #ff2b2b10;
}

.FileUpload_TagElement.Yellow {
    color: #f1952b;
    background-color: #f0860e15;
}

.FileUpload_TagElement>button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    background-color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 10pt;
    color: var(--color-main);
    transition: all 450ms;
}

.FileUpload_TagElement>button:hover {
    transform: scale(1.1);
    transition: all 350ms;
}

.FileUpload_FileData-Container {
    background-color: #00da2f30;
    padding: 12px !important;
    border-radius: 8px;
    color: black;
}

.Plantillas__CardsContainer {
    display: grid;
    grid-template-columns: repeat(6, minmax(350px, 1fr));
    gap: 16px;
}

.Plantillas__CardsContainer>.Card {
    background-color: white;
    padding: 28px;
    border-radius: 8px;
}

.Plantillas__CardsContainer>.Card>.CardStatus {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 20px 0;
}

.Plantillas__CardsContainer>.Card>.CardStatus>.InfoStatus {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.Plantillas__CardsContainer>.Card>.CardVerticalButtons {
    display: flex;
    flex-direction: column;
}

.Plantillas__CardsContainer>.Card>.CardVerticalButtons>a {
    background-color: transparent;
    padding: 12px;
    font-size: 10pt;
    color: var(--color-main);
    font-weight: 600;
}

@media (max-width: 1410px) {
    .FileUpload__TagsEditorContainer {
        display: grid;
        grid-template-columns: 1fr;
        overflow: auto;
    }

    .FileUpload__TagsContainer {
        height: 200px;
    }
}

@media (max-width: 1080px) {
    main.Container .RequestView__DocumentForm {
        width: 100%;
        border: none;
    }

    main.Container .Approval__Content {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    main.Container .Approval__Content>div:nth-child(1) {
        width: 100%;
    }

    main.Container .Approval__CardForm {
        width: 100%;
    }

    main.Container .Approval__Document {
        max-width: 100%;
    }
}

@media (max-width: 970px) {
    .ContractHeaderMenu {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
}

#new-template-view {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
}

#tag-from-doc-container {
    display: flex;
    flex-direction: column;
    width: 350px;
    height: 60vh;
}

#tag-from-doc-container>p {
    word-break: break-all;
}

#tag-from-doc-container {
    display: flex;
    overflow: auto;
    gap: 4px;
}

fieldset {
    border: 1px solid var(--color-light-purple) !important;
    border-radius: 8px;
    padding: 12px !important;
}

fieldset>legend {
    border: none !important;
    width: auto !important;
    font-size: 11pt !important;
    font-weight: 600;
    color: black;
    margin-left: 8px !important;
    padding: 0 8px !important;
}

/* Configuration */
.ConfigurationHeaderContainer {
    position: relative;
    margin-bottom: 3em !important;
    /*
  .HeaderImage {
    background-color: #a7d397;
    width: 100%;
    height: 200px;
  }
  */

    .HeaderImage {
        background-color: #a7d397;
        width: 100%;
        height: 200px;
        background-image: url('../assets/img/logo/zero_clm_v2.png');
        background-size: 100% 150%;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 10px;
    }

    .ProfileImage {
        width: 100px;
        height: 100px;
        background-color: #f5eec8;
        border: 3px solid white;
        border-radius: 50%;
        position: absolute;
        bottom: -40px;
        left: 30px;
    }

}

.ConfigurationTitleContainer {
    .Title {
        padding: 12px 0 !important;
        color: var(--color-blue) !important;
        font-weight: 600;
    }

}

.SystemAttributes_TagList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 8px;
}

/*Flujo X Etapas*/
.FlujoxEtapas__Container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 auto;
    background-color: white;
    padding: 20px !important;
    border-radius: 8px;
}

/* nda form template */
.NDA_Form_Template {
    .SmallLabel {
        margin: 0 !important;
    }

    .InitSelectContainer {
        display: flex;
        flex-direction: column;
    }

    .ChecksSelectContainer {
        display: flex;
        gap: 8px;
        width: 100%;

        .SelectsContainer {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .ChecksList {
            display: flex;
            flex-direction: column;

            .form-check-input {
                accent-color: var(--color-main);
            }

            .form-check {
                display: flex;
                align-items: center;

                .form-check-label {
                    margin-left: 1.5em;
                }

            }
        }

        .ContactFormContainer {
            display: flex;
            flex-direction: column;
            border: 1px solid var(--color-light-gray);
            padding: 12px;
            border-radius: 8px;
        }

    }

    .BottomButtonsContainer {
        margin-top: 8px !important;
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 12px;

        .ButtonsContainer {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }

    }
}

.Supplier_Form_Template {
    .SmallLabel {
        margin: 0 !important;
    }

    .InitSelectContainer {
        display: flex;
        flex-direction: column;
    }

    .ChecksSelectContainer {
        display: flex;
        gap: 8px;
        width: 100%;

        .SelectsContainer {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .ChecksList {
            display: flex;
            flex-direction: column;

            .form-check-input {
                accent-color: var(--color-main);
            }

            .form-check {
                display: flex;
                align-items: center;

                .form-check-label {
                    margin-left: 1.5em;
                }

            }
        }

        .ContactFormContainer {
            display: flex;
            flex-direction: column;
            border: 1px solid var(--color-light-gray);
            padding: 12px;
            border-radius: 8px;
        }

    }

    .BottomButtonsContainer {
        margin-top: 8px !important;
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 12px;

        .ButtonsContainer {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }

    }
}

.Marketplaces_Form_Template {
    .SmallLabel {
        margin: 0 !important;
    }

    .InitSelectContainer {
        display: flex;
        flex-direction: column;
    }

    .ChecksSelectContainer {
        display: flex;
        gap: 8px;
        width: 100%;

        .SelectsContainer {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .ChecksList {
            display: flex;
            flex-direction: column;

            .form-check-input {
                accent-color: var(--color-main);
            }

            .form-check {
                display: flex;
                align-items: center;

                .form-check-label {
                    margin-left: 1.5em;
                }

            }
        }

        .ContactFormContainer {
            display: flex;
            flex-direction: column;
            border: 1px solid var(--color-light-gray);
            padding: 12px;
            border-radius: 8px;
        }

    }

    .BottomButtonsContainer {
        margin-top: 8px !important;
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 12px;

        .ButtonsContainer {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }

    }
}

/* buying and selling form template */
.BuyingAndSelling_Form_Template {
    .SmallLabel {
        margin: 0 !important;
    }

    .InitSelectContainer {
        display: flex;
        flex-direction: column;
    }

    .ChecksSelectContainer {
        display: flex;
        gap: 8px;
        width: 100%;

        .SelectsContainer {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .ContactFormContainer {
            display: flex;
            flex-direction: column;
            border: 1px solid var(--color-light-gray);
            padding: 12px;
            border-radius: 8px;
        }

    }

    .BottomButtonsContainer {
        margin-top: 8px !important;
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 12px;

        .ButtonsContainer {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }

    }
}

/* provision of services form template */
.ProvisionOfServices_Form_Template {
    .SmallLabel {
        margin: 0 !important;
    }

    .InitSelectContainer {
        display: flex;
        flex-direction: column;
    }

    .ChecksSelectContainer {
        display: flex;
        gap: 8px;
        width: 100%;

        .SelectsContainer {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .ContactFormContainer {
            display: flex;
            flex-direction: column;
            border: 1px solid var(--color-light-gray);
            padding: 12px;
            border-radius: 8px;
        }

    }

    .BottomButtonsContainer {
        margin-top: 8px !important;
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 12px;

        .ButtonsContainer {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }

    }
}

/* digital file */
.DigitalFile {
    .HeaderContainer {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .ProgressContainer {
        display: grid;
        grid-template-columns: auto auto 1fr;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;

        &>h2 {
            font-size: 16pt;
            font-weight: bold;
        }

    }

    .TableContainer {
        &>h2 {
            font-size: 18pt;
            font-weight: bold;
        }

    }
}

/* comments */
#new-comment-form>textarea {
    resize: none;
    padding: 8px;
    color: #000000;
    font-size: 11pt;
    height: 70px;
}

#comments-list-container {
    height: 75vh;
    /*overflow: auto;*/
}

.CommentContainer {
    padding: 12px !important;
    border: 1px solid var(--color-light-gray);
    border-radius: 8px;
    margin-top: 8px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
}

.CommentContainer>p:first-child {
    color: #000000;
    font-size: 11pt;
    line-height: 1.3;
    margin-bottom: 4px;
}

.CommentContainer>div {
    font-size: 9pt;
    color: var(--color-gray);
}

/* request */
.block-tab-item {
    pointer-events: none;
}

.UnderlinedText {
    padding: 0 8px !important;
}

.Yellow {
    background-color: var(--color-yellow);
}

.Red {
    background-color: var(--color-red);
}

.YellowTags {
    background-color: #fff3cd;
}

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

/* request information */
#request-information-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#request-information-form>section {
    font-size: 10pt;
}

.RequestInformation_FormSection {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 2px solid var(--color-main);
    border-radius: 8px;
    padding: 8px !important;
    margin-top: 8px !important;
}

.PaginationContainer {
    border-radius: 4px;
    overflow: hidden;
}

.PaginationButton {
    border: 1px solid #6c67e030;
    padding: 12px !important;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    &:hover {
        background-color: #6c67e010;
        color: #000000 !important;
    }

    &.Selected {
        background-color: var(--color-main);
        border-color: var(--color-main);
        color: white;
    }

}

/* OffCanvas  */
.btn-comentarios {
    font-size: 16px;
    cursor: pointer;
    writing-mode: vertical-rl;
    background-color: var(--color-main);
    padding: 6px !important;
    border-radius: 3px;
    color: white;
    top: 55px;
    position: absolute;
}

.OffCanvas {
    width: 100%;
    z-index: 1;
    transition: 0.5s;
    margin-top: 50px !important;
    background-color: white;
    border-radius: 0.5rem;
    height: 555px;
}

.OffCanvas a {
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.5s;
}

.OffCanvas a:hover {
    color: #f1f1f1;
}

.OffCanvas .closebtn {
    font-size: 36px;
}

#colComment {
    .CloseCommentsBtn {
        color: var(--color-main) !important;
        padding: 8px 0 !important;
        cursor: pointer;
    }

}

#canvas {
    transition: margin-left 0.5s;
}

@media screen and (max-height: 450px) {
    .OffCanvas {
        padding-top: 15px;
    }

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

.btn-table {
    padding: 6px 12px !important;
    border: none !important;
    font-size: 11pt;
    border-radius: 4px;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    outline: none;
    text-decoration: none !important;
}

.btn-table:hover {
    opacity: 0.8;
}

.RootSteps-List {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.RootSteps {
    &>p {
        background-color: var(--color-main);
        padding: 12px;
        border-radius: 12px;
        color: white;
        font-size: 12pt;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 12px;

        &>i {
            font-size: 18pt;
        }

    }

    &>div {
        padding-left: 24px;
        margin-top: 12px;
        display: flex;
        flex-direction: column;
        gap: 12px;

        &>p {
            background-color: #6c67e020;
            padding: 12px;
            border-radius: 12px;
            color: var(--color-main);
            font-size: 12pt;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

    }
}

.RootSteps p.Completed {
    background-color: var(--color-light-gray);
    color: black;
}

.Sign {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;

    .SignRightSection {
        width: 400px;
        height: var(--height-screen);

        .Title {
            font-size: 18pt;
            font-weight: 500;

            &>i {
                color: black;
            }

            &>p {
                color: var(--color-main);
            }

        }
    }

    .FormDescription {
        background-color: white;
        padding: 16px;
        border-radius: 8px;
        margin: 16px 0 !important;
        display: flex;
        flex-direction: column;
        gap: 16px;

        .Instructions {
            color: black;
            font-size: 12pt;
        }

        .SignersSection {
            display: grid;
            /* grid-template-columns: 1fr auto auto; */
            /* gap: 8px; */

            .AddSigner {
                width: 350px;
                display: flex;
                align-items: center;
                flex-direction: column;
            }

            & tr>* {
                color: var(--color-gray);
            }

            .SignerActionsTable {
                font-size: 14pt;
                color: black;
                display: flex;
                gap: 8px;
            }

        }
    }
}

.VerticalLine {
    height: 100%;
    width: 1px;
    background-color: var(--color-main);
}


.background-modal {
    background-color: #6c67e060;
}

.FullModal {
    background-color: #6c67e060;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 2000;

    .Content {
        width: 90%;
        height: 90%;
        background-color: white;
        padding: 40px;
        border-radius: 12px;
        display: flex;
        gap: 32px;
    }

}

.FullModal.SignModal {
    .Content {
        .Info {
            width: 100%;
            font-size: 12pt;
            color: black;

            .SingerList {
                display: flex;
                flex-direction: column;
                gap: 12px;

                .SignerCard {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 12px;
                    border-radius: 8px;
                    color: white;

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

                    &.Green {
                        background-color: #03c988;
                    }

                    &.Purple {
                        background-color: var(--color-main);
                    }

                    .SignerIcon {
                        width: 40px;
                        height: 40px;
                        display: grid;
                        place-items: center;
                        background-color: var(--color-main);
                        border-radius: 8px;
                        border: 3px solid white;
                    }

                }
            }
        }
    }
}

@media (max-width: 1300px) {
    .FullModal.SignModal {
        .Content {
            .Info {
                width: 100%;
                font-size: 7pt;
                color: black;

                .SingerList {
                    display: flex;
                    flex-direction: column;
                    gap: 12px;

                    .SignerCard {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 12px;
                        border-radius: 8px;
                        color: white;

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

                        &.Green {
                            background-color: #03c988;
                        }

                        &.Purple {
                            background-color: var(--color-main);
                        }

                        .SignerIcon {
                            width: 40px;
                            height: 40px;
                            display: grid;
                            place-items: center;
                            background-color: var(--color-main);
                            border-radius: 8px;
                            border: 3px solid white;
                        }

                    }
                }
            }
        }
    }
}

.SingerList-Pre {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.SingerList-Pre .SignerCard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    color: white;
}

.Purple {
    background-color: var(--color-main);
}

.SignerIcon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background-color: var(--color-main);
    border-radius: 8px;
    border: 3px solid white;
}

/* checkbox */
@supports (-webkit-appearance: none) or (-moz-appearance: none) {

    input[type="checkbox"],
    input[type="radio"] {
        --active: #6c67e0;
        --active-inner: #fff;
        --focus: 2px rgba(39, 94, 254, 0.3);
        --border: #bbc1e1;
        --border-hover: #275efe;
        --background: #fff;
        --disabled: #f6f8ff;
        --disabled-inner: #e1e6f9;
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 21px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--bc, var(--border));
        background: var(--b, var(--background));
        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    }

    input[type="checkbox"]:after,
    input[type="radio"]:after {
        content: "";
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    }

    input[type="checkbox"]:checked,
    input[type="radio"]:checked {
        --b: var(--active);
        --bc: var(--active);
        --d-o: 0.3s;
        --d-t: 0.6s;
        --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
    }

    input[type="checkbox"]:disabled,
    input[type="radio"]:disabled {
        --b: var(--disabled);
        cursor: not-allowed;
        opacity: 0.9;
    }

    input[type="checkbox"]:disabled:checked,
    input[type="radio"]:disabled:checked {
        --b: var(--disabled-inner);
        --bc: var(--border);
    }

    input[type="checkbox"]:disabled+label,
    input[type="radio"]:disabled+label {
        cursor: not-allowed;
    }

    input[type="checkbox"]:hover:not(:checked):not(:disabled),
    input[type="radio"]:hover:not(:checked):not(:disabled) {
        --bc: var(--border-hover);
    }

    input[type="checkbox"]:focus,
    input[type="radio"]:focus {
        box-shadow: 0 0 0 var(--focus);
    }

    input[type="checkbox"]:not(.switch),
    input[type="radio"]:not(.switch) {
        width: 21px;
    }

    input[type="checkbox"]:not(.switch):after,
    input[type="radio"]:not(.switch):after {
        opacity: var(--o, 0);
    }

    input[type="checkbox"]:not(.switch):checked,
    input[type="radio"]:not(.switch):checked {
        --o: 1;
    }

    input[type="checkbox"]+label,
    input[type="radio"]+label {
        font-size: 14px;
        line-height: 21px;
        display: inline-block;
        vertical-align: top;
        cursor: pointer;
        margin-left: 4px;
    }

    input[type="checkbox"]:not(.switch) {
        border-radius: 7px;
    }

    input[type="checkbox"]:not(.switch):after {
        width: 5px;
        height: 9px;
        border: 2px solid var(--active-inner);
        border-top: 0;
        border-left: 0;
        left: 7px;
        top: 4px;
        transform: rotate(var(--r, 20deg));
    }

    input[type="checkbox"]:not(.switch):checked {
        --r: 43deg;
    }

    input[type="checkbox"].switch {
        width: 38px;
        border-radius: 11px;
    }

    input[type="checkbox"].switch:after {
        left: 2px;
        top: 2px;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        background: var(--ab, var(--border));
        transform: translateX(var(--x, 0));
    }

    input[type="checkbox"].switch:checked {
        --ab: var(--active-inner);
        --x: 17px;
    }

    input[type="checkbox"].switch:disabled:not(:checked):after {
        opacity: 0.6;
    }

    input[type="radio"] {
        border-radius: 50%;
    }

    input[type="radio"]:after {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: var(--active-inner);
        opacity: 0;
        transform: scale(var(--s, 0.7));
    }

    input[type="radio"]:checked {
        --s: 0.5;
    }
}

.list-check {
    margin: 12px;
    padding: 0;
    list-style: none;
    width: 100%;
    max-width: 320px;
}

.list-check>li {
    margin: 16px 0;
    position: relative;
}

input[type="checkbox"],
input[type="radio"] {
    --active: var(--color-main);
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, 0.3);
    --border: #bbc1e1;
    --border-hover: #275efe;
    --background: #fff;
    --disabled: #f6f8ff;
    --disabled-inner: #e1e6f9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
}

input[type="checkbox"]:after,
input[type="radio"]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: 0.3s;
    --d-t: 0.6s;
    --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
}

input[type="checkbox"]:disabled:checked,
input[type="radio"]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
}

input[type="checkbox"]:disabled+label,
input[type="radio"]:disabled+label {
    cursor: not-allowed;
}

input[type="checkbox"]:hover:not(:checked):not(:disabled),
input[type="radio"]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
    box-shadow: 0 0 0 var(--focus);
}

input[type="checkbox"]:not(.switch),
input[type="radio"]:not(.switch) {
    width: 21px;
}

input[type="checkbox"]:not(.switch):after,
input[type="radio"]:not(.switch):after {
    opacity: var(--o, 0);
}

input[type="checkbox"]:not(.switch):checked,
input[type="radio"]:not(.switch):checked {
    --o: 1;
}

input[type="checkbox"]+label,
input[type="radio"]+label {
    font-size: 14px;
    line-height: 21px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
}

input[type="checkbox"]:not(.switch) {
    border-radius: 7px;
}

input[type="checkbox"]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    transform: rotate(var(--r, 20deg));
}

input[type="checkbox"]:not(.switch):checked {
    --r: 43deg;
}

input[type="checkbox"].switch {
    width: 38px;
    border-radius: 11px;
}

input[type="checkbox"].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0));
}

input[type="checkbox"].switch:checked {
    --ab: var(--active-inner);
    --x: 17px;
}

input[type="checkbox"].switch:disabled:not(:checked):after {
    opacity: 0.6;
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="radio"]:after {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--active-inner);
    opacity: 0;
    transform: scale(var(--s, 0.7));
}

input[type="radio"]:checked {
    --s: 0.5;
}

.list-check {
    margin: 12px;
    padding: 0;
    list-style: none;
    width: 100%;
    max-width: 320px;
}

.list-check>li {
    margin: 16px 0;
    position: relative;
}

/* dual list */
.dual-list {
    display: flex;
    align-items: center;
    margin-bottom: 20px !important;
    margin-top: 10px !important;
}

.dual-list>ul {
    width: 500px;
    height: 400px !important;
    border-radius: 0.5rem;
    box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
    border-color: white;
    overflow: auto;
    padding: 10px;
}

.dual-list .btn-menu-flow {
    width: 30px;
    height: 30px;
    background-color: var(--color-btn-bg-hover);
    color: var(--color-main);
    margin-left: 10px;
    border-radius: 5px;
}

.dual-list>ul>li {
    padding: 8px;
    font-size: 13px;
    border-radius: 0.5rem;
    margin-top: 5px;
    margin-right: 7px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    color: var(--color-main);
    font-weight: bold;
}


.dual-list>ul>li:hover {
    background-color: var(--color-main) !important;
    color: white;
}

.dual-list>ul>li:hover>span {
    border-color: white;
    color: white;
}

.dual-list>ul>li:hover .btn-menu-flow {
    background-color: var(--color-gray);
    color: var(--color-white);
}

.dual-list .btn-dual {
    display: inline-flex;
    flex-direction: column;
}

.dual-list .btn-dual>button {
    padding: 8px 16px !important;
    margin-top: 8px !important;
}

.dual-list-li .list-group-item:first-child {
    border-radius: 0.5rem;
}

.dual-list-li .list-group-item:last-child {
    border-radius: 0.5rem;
}

.dual-title {
    display: grid;
    grid-template-columns: 1.5fr 0.3fr 1.6fr 0.3fr;
    text-align: center;
}

.dual-title-stage {
    font-size: 16px;
    font-weight: bold;
}

.dual-title-flow {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}


.selected-stage {
    z-index: 2;
    color: #fff;
    background-color: var(--color-btn-bg-hover) !important;
    border-color: var(--color-main) !important;
}


/* Acordion */
#aspect-content {
    margin: 50px 0 0;
}

#aspect-content * {
    box-sizing: border-box;
}

.aspect-tab {
    position: relative;
    width: 100%;
    margin: 0 auto 10px;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 0 0 1px #ececec;
    opacity: 1;
    transition: box-shadow 0.2s, opacity 0.4s;
}

.aspect-tab:hover {
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.11);
}

.aspect-input {
    display: none !important;
}

.aspect-input:checked~.aspect-content+.aspect-tab-content {
    max-height: 3000px;
}

.aspect-input:checked~.aspect-content:after {
    transform: rotate(0);
}

.aspect-label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    max-height: 80px;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 0;
    z-index: 1;
    cursor: pointer;
}

.aspect-label:hover~.aspect-content:after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTI0IDI0SDBWMGgyNHoiIG9wYWNpdHk9Ii44NyIvPgogICAgICAgIDxwYXRoIGZpbGw9IiM1NTZBRUEiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTE1Ljg4IDE1LjI5TDEyIDExLjQxbC0zLjg4IDMuODhhLjk5Ni45OTYgMCAxIDEtMS40MS0xLjQxbDQuNTktNC41OWEuOTk2Ljk5NiAwIDAgMSAxLjQxIDBsNC41OSA0LjU5Yy4zOS4zOS4zOSAxLjAyIDAgMS40MS0uMzkuMzgtMS4wMy4zOS0xLjQyIDB6Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=");
}

.aspect-content {
    position: relative;
    display: block;
    height: 60px;
    margin: 0;
    padding: 0 87px 0 30px;
    font-size: 0;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}

.aspect-content:before,
.aspect-content:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
}

.aspect-content:before {
    height: 100%;
}

.aspect-content:after {
    position: absolute;
    width: 24px;
    height: 100%;
    right: 30px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTI0IDI0SDBWMGgyNHoiIG9wYWNpdHk9Ii44NyIvPgogICAgICAgIDxwYXRoIGZpbGw9IiNBOUFDQUYiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTE1Ljg4IDE1LjI5TDEyIDExLjQxbC0zLjg4IDMuODhhLjk5Ni45OTYgMCAxIDEtMS40MS0xLjQxbDQuNTktNC41OWEuOTk2Ljk5NiAwIDAgMSAxLjQxIDBsNC41OSA0LjU5Yy4zOS4zOS4zOSAxLjAyIDAgMS40MS0uMzkuMzgtMS4wMy4zOS0xLjQyIDB6Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=");
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(180deg);
}

.aspect-name {
    display: inline-block;
    width: 100%;
    margin-left: 16px !important;
    font-weight: 500;
    color: #242a32;
    white-space: normal;
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
    line-height: 22px;
}

.aspect-stat {
    width: 40%;
    text-align: right;
}

.aspect-content+.aspect-tab-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s;
    background-color: #f0f0f0;
}

.aspect-content>div,
.aspect-stat>div {
    display: inline-block;
}

.aspect-content>div {
    vertical-align: middle;
}

.positive-count,
.negative-count,
.neutral-count {
    display: inline-block;
    margin: 0 0 0 20px;
    padding-left: 26px;
    background-repeat: no-repeat;
    font-size: 13px;
    line-height: 20px;
    color: #363636;
}

.sign-modal-close {
    position: absolute;
    top: 60px;
    right: 100px;
    display: block;
    margin: 10px;
}

.mdl-close-zero {
    color: #c8c7c7;
    font-size: 20px;
}

.mdl-close-zero:hover {
    color: #959494;
}

/**Comment Document **/
.comment-notf-doc {
    position: absolute;
    background-color: red;
    border-radius: 100%;
    width: 10px;
    height: 10px;
    margin-left: -9px !important;
}

.label-fin-digitalfile {
    background-color: white;
    margin-top: 100px;
    margin-left: 250px;
    margin-bottom: 20px;
    margin-right: 250px;
    border-radius: 1rem;
    padding: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.label-fin-digitalfile .icon-fin {
    font-size: 6rem;
    color: var(--color-green);
    margin-top: 20px;
}

.label-fin-digitalfile .icon-error {
    font-size: 6rem;
    color: var(--color-red);
    margin-top: 20px;
}

.label-fin-digitalfile .span-fin {
    font-size: 28px;
}

.pdf-preview-wh {
    width: 100%;
    height: 100%;
}

@media (max-width: 970px) {
    .pdf-preview-wh {
        width: 80%;
        height: 80%;
    }
}

/* Estilo para grid syncfusion*/
.editor-wrapper {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.e-grid {
    margin-top: 10px !important;
}

.e-grid .e-row .e-rowcell {
    height: 2.5rem;
}

.e-grid .e-row:hover .e-rowcell {
    background-color: var(--color-light-purple) !important;
}

.e-grid .e-rowcell.e-selectionbackground {
    background-color: rgb(230, 230, 250);
}

.e-grid .e-headercontent .e-headercell {
    background-color: var(--color-main) !important;
    color: white !important;
}

.e-grid .e-gridheader {
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
}

.e-pager .e-pagercontainer {
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    display: inline-block;
    margin: 0 0 -3px 10px !important;
    overflow: hidden;
    float: right;
}

.e-pager .e-currentitem,
.e-pager .e-currentitem:hover {
    background: var(--color-main) !important;
}

.e-grid .e-gridheader .e-icons:not(.e-icon-hide):not(.e-check):not(.e-stop):not(.e-icon-reorderuparrow):not(.e-icon-reorderdownarrow) {
    color: white !important;
}

.e-grid .e-icons:not(.e-btn-icon) {
    color: #495057 !important;
}

.e-grid .e-filtered::before {
    color: #495057 !important;
}

.e-icons .e-gdiagonaldown .e-icon-gdownarrow {
    color: black !important;
}

.e-grid .e-grouptopleftcell {
    background-color: var(--color-main) !important;
    /* border-color: #dee2e6; */
}

.e-grid .e-gridheader {
    background-color: var(--color-main) !important;
    ;
    border-bottom-color: #dee2e6;
    border-top-color: #dee2e6;
    color: #212529;
}

.e-grid .e-groupdroparea .e-icons {
    color: #fff !important;
}

/* Tabs syncfusion*/
.e-tab {
    border: 5px solid rgb(173, 255, 47);
}

.e-tab .e-tab-header .e-toolbar-items {
    background: #9faed8;
}

.e-tab .e-tab-header .e-toolbar-items .e-toolbar-item {
    border-bottom: 2px solid var(--color-main);
}

.e-tab .e-content .e-item {
    color: #a78515;
    font-size: 14px;
}

.e-tab .e-tab-header {
    background: white !important;
}

.e-tab .e-content {
    background: white !important;
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
    background: var(--color-light-purple) !important;
}

.e-tab .e-tab-header .e-hor-nav .e-popup-up-icon:hover,
.e-tab .e-tab-header .e-hor-nav .e-popup-down-icon:hover {
    background: #d1f6d1 !important;
}

.e-tab .e-tab-header .e-toolbar-item.e-active {
    background: var(--color-main);
}

.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
    color: white !important;
}

/* Estilo nuevo checkbox*/
.checkbox-wrapper-34 {
    --blue: var(--color-checkbox-success);
    --g08: #ff3a19;
    --g04: #848ea1;
}

.checkbox-wrapper-34 .tgl {
    display: none;
}

.checkbox-wrapper-34 .tgl,
.checkbox-wrapper-34 .tgl:after,
.checkbox-wrapper-34 .tgl:before,
.checkbox-wrapper-34 .tgl *,
.checkbox-wrapper-34 .tgl *:after,
.checkbox-wrapper-34 .tgl *:before,
.checkbox-wrapper-34 .tgl+.tgl-btn {
    box-sizing: border-box;
}

.checkbox-wrapper-34 .tgl::selection,
.checkbox-wrapper-34 .tgl:after::selection,
.checkbox-wrapper-34 .tgl:before::selection,
.checkbox-wrapper-34 .tgl *::selection,
.checkbox-wrapper-34 .tgl *:after::selection,
.checkbox-wrapper-34 .tgl *:before::selection,
.checkbox-wrapper-34 .tgl+.tgl-btn::selection {
    background: none;
}

.checkbox-wrapper-34 .tgl+.tgl-btn {
    outline: 0;
    display: block;
    width: 48px;
    height: 24px;
    position: relative;
    cursor: pointer;
    user-select: none;
    font-size: 11px;
    font-weight: 400;
    color: #fff;
}

.checkbox-wrapper-34 .tgl+.tgl-btn:after,
.checkbox-wrapper-34 .tgl+.tgl-btn:before {
    position: relative;
    display: block;
    content: "";
    width: 44%;
    height: 18px;
}

.checkbox-wrapper-34 .tgl+.tgl-btn:after {
    left: 0;
}

.checkbox-wrapper-34 .tgl+.tgl-btn:before {
    display: inline;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.checkbox-wrapper-34 .tgl:checked+.tgl-btn:after {
    left: 56.5%;
}

.checkbox-wrapper-34 .tgl-ios+.tgl-btn {
    background: var(--g08);
    border-radius: 20rem;
    padding: 2px;
    transition: all 0.4s ease;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.checkbox-wrapper-34 .tgl-ios+.tgl-btn:after {
    border-radius: 2em;
    background: #fff;
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 2px;
    bottom: 2px;
    width: 20px;
}

.checkbox-wrapper-34 .tgl-ios+.tgl-btn:before {
    content: "NO";
    left: 24px;
    color: white;
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.checkbox-wrapper-34 .tgl-ios+.tgl-btn:active {
    box-shadow: inset 0 0 0 30px rgba(0, 0, 0, 0.1);
}

.checkbox-wrapper-34 .tgl-ios+.tgl-btn:active:after {
    padding-right: 0.4em;
}

.checkbox-wrapper-34 .tgl-ios:checked+.tgl-btn {
    background: var(--blue);
}

.checkbox-wrapper-34 .tgl-ios:checked+.tgl-btn:active {
    box-shadow: inset 0 0 0 30px rgba(0, 0, 0, 0.1);
}

.checkbox-wrapper-34 .tgl-ios:checked+.tgl-btn:active:after {
    margin-left: -0.4em;
}

.checkbox-wrapper-34 .tgl-ios:checked+.tgl-btn:before {
    content: "SI";
    left: 5px;
    color: white;
}

#contract-details-modal {
    .Content {
        width: 50%;
        height: 70%;
    }

}

/*Tooltip*/

#tooltip {
    background: var(--color-main);
    color: white;
    font-weight: bold;
    padding: 7px 10px;
    font-size: 14px;
    border-radius: 4px;
    display: none;
    cursor: pointer;
}

#tooltip[data-show] {
    display: block;
}

#arrow,
#arrow::before {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
}

#arrow {
    visibility: hidden;
}

#arrow::before {
    visibility: visible;
    content: "";
    transform: rotate(45deg);
}

#tooltip[data-popper-placement^="top"]>#arrow {
    bottom: -4px;
}

#tooltip[data-popper-placement^="bottom"]>#arrow {
    top: -4px;
}

#tooltip[data-popper-placement^="left"]>#arrow {
    right: -4px;
}

#tooltip[data-popper-placement^="right"]>#arrow {
    left: -4px;
}

.bg-white {
    background-color: white !important;
    margin-bottom: 35px !important;
}

.p20 {
    padding: 20px;
}

/* Sign - Seguimiento Section */
#signers-list {
    margin-top: 4px !important;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.SignerEmailContainer {
    font-size: 12pt;
    width: 100%;
    padding: 8px !important;
    border-radius: 4px;
    line-height: 1.2;
    background-color: #6c67e008;

    &:hover {
        .Name {
            color: var(--color-main);
        }

    }

    .Name {
        color: black;
        font-weight: 500;
        cursor: default;
    }

    .Email {
        color: var(--color-gray);
        font-size: 10pt;
        cursor: default;
    }

}

.contract_stage {
    /*
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #6c67e015;
    padding: 8px !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
    border-radius: 4px;
    color: var(--color-dark-purple);
    font-size: 11pt;
        */
}




.contract_stage {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #6c67e015;
    padding: 8px !important;
    min-width: 100px;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
    border-radius: 4px;
    color: var(--color-dark-main);
    font-size: 11pt;
}

@media (max-width: 900px) {
    .contract_stage {
        justify-content: flex-start;
    }
}

.ViewFolio {
    margin-right: 9% !important;
    font-size: 12pt;
    font-weight: bold;
    color: var(--color-dark-main);
    background-color: var(--backgroud-viewfolio);
    padding: 5px 12px !important;
    border-radius: 100px !important;
}

.is-required:after {
    content: '*';
    margin-left: 3px;
    color: red;
    font-weight: bold;
}

.card-request {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    height: 100%;
    margin: 20px;
    transition: transform 0.3s ease;
}

.card-request:hover {
    /*transform: translateY(-5px);*/
}

.card-content-request {
    padding: 20px;
}

.card-title-request {
    color: #333;
    font-size: 1.5rem;
    margin: 0;
}

.card-value-request {
    color: #009688;
    font-size: 2rem !important;
    margin: 5px 0 !important;
}

.card-description-request {
    color: #666;
    font-size: 0.875rem;
    margin: 0;
}

.card-footer-request {
    background: #f7f7f7;
    padding: 10px 20px !important;
    text-align: right;
}

.card-link-request {
    color: #009688;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.3s ease;
}

.card-link-request:hover {
    color: #00796b;
}

.question-info {
    display: inline-block;
}

.tooltipFE {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

.tooltipFE>i {
    color: var(--color-main);
}

.tooltipFE .tooltiptextFE {
    visibility: hidden;
    width: auto;
    background-color: var(--color-main);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 140%;
    font-size: 10pt;
}

.tooltipFE:hover .tooltiptextFE {
    visibility: visible;
    opacity: 1;
}

/* Arrow */
.tooltipFE .tooltiptextFE::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent var(--color-main) transparent transparent;
}

.tooltipTop {
    position: relative;
    display: inline-block;
}

.tooltipTop>i {
    color: var(--color-main);
}

.tooltipTop .tooltiptextTop {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltipTop:hover .tooltiptextTop {
    visibility: visible;
    opacity: 1;
}

/* Arrow */
.tooltipTop .tooltiptextTop::after {
    content: " ";
    position: absolute;
    top: 100%;
    /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

/* Card Entity */

.card-entity {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    width: 300px;
    margin: 10px !important;
}

.card-header-entity {
    background: var(--color-main);
    color: #ffffff;
    padding: 15px !important;
    text-align: center;
}

.card-header-entity i {
    margin-right: 10px;
}

.card-title-entity {
    margin: 0 !important;
    font-weight: normal;
    font-size: 1.5em !important;
    color: #ffffff;
}

.card-body-entity {
    padding: 15px !important;
}

.card-content-entity p {
    margin: 10px 0;
    color: #333;
    font-size: 14px !important;
}

.card-content-entity i {
    margin-right: 8px;
}

.card-badges-entity {
    text-align: center;
    padding: 20px 0 !important;
}

.badge-entity {
    display: inline-block;
    padding: 5px 10px !important;
    margin: 0 5px !important;
    border-radius: 15px;
    background: #eeeeee;
    color: #333;
}

.badge-entity.primary-entity {
    background: var(--color-main);
    color: #ffffff;
}

.card-links-entity {
    text-align: center;
    padding-top: 10px;
}

.card-links-entity a {
    text-decoration: none;
    color: var(--color-main);
    margin: 0 10px;
}

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

/* New style card  */

.card-sign {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 100%;
    transition: transform 0.3s ease;
    margin-top: 10px;
}

.card-sign:hover {
    transform: translateY(-5px);
}

.card-sign-content {
    padding: 20px;
}

.card-sign-title {
    color: #333;
    font-size: 18px;
    margin: 0;
}

.card-sign-value {
    color: var(--color-main);
    font-size: 16px;
    margin: 5px 0;
}

.card-sign-description {
    color: #666;
    font-size: 0.875rem;
    margin: 0;
}

.card-sign-footer {
    background: #f7f7f7;
    padding: 10px 20px;
    text-align: right;
}

.card-sign-link {
    display: inline-block;
    padding: 9px 20px !important;
    margin: 0 5px !important;
    border-radius: 20px;
    background: var(--color-main);
    color: #fff;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.3s ease;
}

.card-sign-link:hover {
    opacity: 0.8;
}

.card-sign-status-sf {
    display: inline-block;
    padding: 9px 20px !important;
    margin: 0 5px !important;
    border-radius: 20px;
    background: white;
    color: var(--color-red);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.3s ease;
    border-width: 2px;
    border-style: solid;
    font-weight: bold;
}

.card-sign-status-f {
    display: inline-block;
    padding: 9px 20px !important;
    margin: 0 5px !important;
    border-radius: 20px;
    background: white;
    color: var(--color-green);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.3s ease;
    border-width: 2px;
    border-style: solid;
    font-weight: bold;
}

/* Logo de Zero */

.img-log>p {
    display: inline-block;
    font-size: 14px;
    margin-left: 10px;
}

.drawSign {
    height: 100%;
    width: 100%;
}

/* Card Documentation*/

.card-doc {
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
    display: inline-block;
    margin: 10px;
    height: 180px;
}

.card-doc:hover {
    transform: translateY(-5px);
}

.header-doc {
    text-align: center;
    padding: 10px 0;
    font-size: 12px;
    height: 40%;
}

.content-doc {
    padding: 10px;
    text-align: center;
    height: 60%;
}

.content-doc i {
    font-size: 30px;
    display: block !important;
    color: red;
}

.card-doc>p {
    font-size: 1em;
    color: #666;
    margin-bottom: 15px;
}

.card-doc .btn-doc {
    display: inline-block;
    width: auto;
    background-color: var(--color-main);
    color: #fff !important;
    padding: 6px 6px;
    border: none;
    border-radius: var(--br-purple-button);
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

.card-doc .btn-doc:hover {
    background-color: #0056b3;
}

.mdl-max90 {
    max-width: 90% !important;
}

.mdl-max60 {
    max-width: 60% !important;
}

.overflow800 {
    overflow: auto;
    height: 800px;
}

.icox20 {
    font-size: 20px;
}

.body_detail_contrat {
    max-width: 450px;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
    height: 250px;
    overflow-y: auto;
}

.title_detail_contrat {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.t_detail_title {
    font-weight: bold;
    margin: 5px 0;
    color: #444;
}

.t_detail_detail {
    font-weight: normal;
    margin: 5px 0;
    color: #444;
}

.autoComplete_wrapper {
    display: inline-block;
    position: relative;
    width: 100%;
}

.autoComplete_wrapper>input {
    margin: 0;
    padding: 0 2rem 0 3.2rem;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-size: 1rem;
    text-overflow: ellipsis;
    outline: 0;
    background-size: 1.4rem;
    background-position: left 1.05rem top .8rem;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-color: #fff;
    transition: all .4s ease;
    -webkit-transition: all -webkit-transform .4s ease
}

.autoComplete_wrapper>input::placeholder {
    transition: all .3s ease;
    -webkit-transition: all -webkit-transform .3s ease
}

.autoComplete_wrapper>input:hover::placeholder {
    transition: all .3s ease;
    -webkit-transition: all -webkit-transform .3s ease
}

.autoComplete_wrapper>input:focus::placeholder {
    padding: .1rem .6rem;
    font-size: .95rem;
}

.autoComplete_wrapper>input:hover {
    transition: all .3s ease;
    -webkit-transition: all -webkit-transform .3s ease
}


.autoComplete_wrapper>ul {
    position: absolute;
    max-height: 226px;
    overflow-y: scroll;
    box-sizing: border-box;
    left: 0;
    right: 0;
    margin: .5rem 0 0 0;
    padding: 0;
    z-index: 1;
    list-style: none;
    border-radius: .6rem;
    background-color: #fff;
    border: 1px solid rgba(33, 33, 33, .07);
    box-shadow: 0 3px 6px rgba(149, 157, 165, .15);
    outline: 0;
    transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -webkit-transition: opacity .15s ease-in-out
}

.autoComplete_wrapper>ul:empty,
.autoComplete_wrapper>ul[hidden] {
    display: block;
    opacity: 0;
    transform: scale(0)
}

.autoComplete_wrapper>ul>li {
    margin: .3rem;
    padding: .3rem .5rem;
    text-align: left;
    font-size: 1rem;
    color: #212121;
    border-radius: .35rem;
    background-color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all .2s ease
}

.autoComplete_wrapper>ul>li mark {
    background-color: transparent;
    color: #ff7a7a;
    font-weight: 700
}

.autoComplete_wrapper>ul>li:hover {
    cursor: pointer;
    background-color: rgba(255, 122, 122, .15)
}

.autoComplete_wrapper>ul>li[aria-selected=true] {
    background-color: rgba(255, 122, 122, .15)
}

@media only screen and (max-width:600px) {
    .autoComplete_wrapper>input {
        width: 18rem
    }
}

.font18 {
    font-size: 18px;
}

/*Sidebar Zero*/
.content {
    padding: 0;
}

.page-header-fixed {
    padding-top: 0px;
}

.sidebar {
    width: var(--sidebar-width);
    position: absolute !important;
    left: var(--sidebar-left);
    top: var(--sidebar-top);
    bottom: 0;
    padding-top: 24px;
    background: var(--sidebar-background);
    z-index: 1010;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    border-left: 1px solid #d9e0e7;
    font-size: 15px;
}

.sidebar .nav>li>a i {
    font-size: var(--sidebar-nav-li-a-i);
}

.sidebar-minify-btn {
    margin: 10px 0;
    float: right;
    padding: 5px 20px 5px 10px !important;
    background: var(--sidebar-color-main);
    color: #fff;
    border-radius: 20px 0 0 20px;
}

.sidebar-minify-btn:hover,
.sidebar-minify-btn:focus {
    background: var(--sidebar-color-main) !important;
}

.sidebar .nav>li>a:hover,
.sidebar .nav>li>a:focus {
    background: var(--sidebar-color-hover-focus-submenu);
    color: var(--sidebar-submenu-nav);
}

.sidebar .sub-menu>li>a:hover,
.sidebar .sub-menu>li>a:focus,
.sidebar .sub-menu>li.active>a,
.sidebar .sub-menu>li.active>a:hover,
.sidebar .sub-menu>li.active>a:focus {
    background: var(--sidebar-color-hover-focus-submenu);
    color: var(--sidebar-hover-submenu-color);
    padding: var(--sidebar-hover-submenu-padding);
}

.sidebar .sub-menu>li:after {
    border: 1px solid var(--color-hover-submenu);
    background: var(--color-hover-submenu);
}

.sidebar .sub-menu>li:before,
.sidebar .sub-menu>li>a:after,
.sidebar .sub-menu>li.has-sub>a:before {
    background: var(--color-hover-submenu);
}

.page-sidebar-minified .sidebar {
    width: var(--page-sidebar-minified-width);
}

.page-sidebar-minified .has-sub>a .caret {
    display: var(--page-sidebar-minified-display);
}

.float-sub-menu-container {
    position: fixed;
    width: 220px;
    margin: 0;
    background: white;
    z-index: 1020;
}

.float-sub-menu li>a:hover,
.float-sub-menu li>a:focus,
.float-sub-menu li.active>a,
.float-sub-menu li.active>a:hover,
.float-sub-menu li.active>a:focus {
    color: var(--color-main);
}

.float-sub-menu-arrow {
    background: var(--color-main);
}

.float-sub-menu-line {
    background: var(--color-main);
}

.float-sub-menu li:after {
    border: 1px solid var(--color-main);
    background: var(--color-main);
}

.float-sub-menu li:before,
.float-sub-menu li>a:after,
.float-sub-menu li.has-sub>a:before {
    background: var(--color-main);
}

.panel-hover {
    transition: box-shadow 0.3s ease-in-out;
    border: 1px;
}

.panel-hover:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}



/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/

.btn-circle {
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    padding: 0;
    border-radius: 50%;
}

.btn-circle i {
    position: relative;
    top: -1px;
}

.btn-circle-sm {
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 0.9rem;
}

.btn-circle-lg {
    width: 55px;
    height: 55px;
    line-height: 55px;
    font-size: 1.1rem;
}

.btn-circle-xl {
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 1.3rem;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

#campana_comentario {
    animation: blink 1s linear infinite;
}


.select2-container--default .select2-selection--multiple {
    height: auto !important;
    display: flex !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: none !important;
    left: -3px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered li.select2-selection__choice {
    padding: 0 12px !important;
}

.card-margin {
    margin-bottom: 1.875rem;
}

.card {
    border: 0;
    box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.1);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.1);
    -ms-box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.1);
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #ffffff;
    background-clip: border-box;
    border: 1px solid #e6e4e9;
    border-radius: 8px;
}

.card .card-header.no-border {
    border: 0;
}

.card .card-header {
    background: none;
    padding: 0 0.9375rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    min-height: 50px;
}

.card-header:first-child {
    border-radius: calc(8px - 1px) calc(8px - 1px) 0 0;
}

.widget-49 .widget-49-title-wrapper {
    display: flex;
    align-items: center;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #edf1fc;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-primary .widget-49-date-day {
    color: #4e73e5;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-primary .widget-49-date-month {
    color: #4e73e5;
    line-height: 1;
    font-size: 1rem;
    text-transform: uppercase;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #fcfcfd;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-secondary .widget-49-date-day {
    color: #dde1e9;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-secondary .widget-49-date-month {
    color: #dde1e9;
    line-height: 1;
    font-size: 1rem;
    text-transform: uppercase;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-success {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: var(--color-light-system);
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-success .widget-49-date-day {
    color: var(--color-dark-purple);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-success .widget-49-date-month {
    color: var(--color-dark-purple);
    line-height: 1;
    font-size: 1rem;
    text-transform: uppercase;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #ebf7ff;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-info .widget-49-date-day {
    color: #36afff;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-info .widget-49-date-month {
    color: #36afff;
    line-height: 1;
    font-size: 1rem;
    text-transform: uppercase;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: floralwhite;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-warning .widget-49-date-day {
    color: #FFC868;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-warning .widget-49-date-month {
    color: #FFC868;
    line-height: 1;
    font-size: 1rem;
    text-transform: uppercase;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-danger {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #feeeef;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-danger .widget-49-date-day {
    color: #F95062;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-danger .widget-49-date-month {
    color: #F95062;
    line-height: 1;
    font-size: 1rem;
    text-transform: uppercase;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-light {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #fefeff;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-light .widget-49-date-day {
    color: #f7f9fa;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-light .widget-49-date-month {
    color: #f7f9fa;
    line-height: 1;
    font-size: 1rem;
    text-transform: uppercase;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-dark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #ebedee;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-dark .widget-49-date-day {
    color: #394856;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-dark .widget-49-date-month {
    color: #394856;
    line-height: 1;
    font-size: 1rem;
    text-transform: uppercase;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-base {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #f0fafb;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-base .widget-49-date-day {
    color: #68CBD7;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1;
}

.widget-49 .widget-49-title-wrapper .widget-49-date-base .widget-49-date-month {
    color: #68CBD7;
    line-height: 1;
    font-size: 1rem;
    text-transform: uppercase;
}

.widget-49 .widget-49-title-wrapper .widget-49-meeting-info {
    display: flex;
    flex-direction: column;
    margin-left: 1rem;
}

.widget-49 .widget-49-title-wrapper .widget-49-meeting-info .widget-49-pro-title {
    color: #3c4142;
    font-size: 14px;
}

.widget-49 .widget-49-title-wrapper .widget-49-meeting-info .widget-49-meeting-time {
    color: #B1BAC5;
    font-size: 13px;
}

.widget-49 .widget-49-meeting-points {
    font-weight: 400;
    font-size: 13px;
    margin-top: .5rem;
}

.widget-49 .widget-49-meeting-points .widget-49-meeting-item {
    display: list-item;
    color: #727686;
}

.widget-49 .widget-49-meeting-points .widget-49-meeting-item span {
    margin-left: .5rem;
}

.widget-49 .widget-49-meeting-action {
    text-align: right;
}

.widget-49 .widget-49-meeting-action a {
    text-transform: uppercase;
}

.master-catalog {
    font-size: 17px;
    margin-left: 5px;
    margin-right: 5px;
}


.e-stepper .e-stepper-progressbar {
    height: 10px !important;
    /* Ajusta el grosor de la barra de progreso */
}

#stepperTemplate .e-label {
    position: relative;
    top: 10px;
    font-size: 1.3em;
}



.e-grid .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-search {
    margin-bottom: 0;
    opacity: 1 !important;
    width: 350px !important;
    height: 33px !important;
}

.e-grid .e-toolbar {
    background-color: white !important;
    /*border-top: 1px solid #ffffff !important;*/
}

#contracts-table-body {
    gap: 0px !important;
}

/*.single-line-listbox .e-list-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}*/


.custom-list-item {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    height: 36px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-list-item i {
    margin-right: 10px;
    line-height: 1;
    flex-shrink: 0;
    /* Evita que el ícono se reduzca */
}

.e-list-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.e-list-item .custom-list-item {
    display: flex;
    align-items: center;
    flex: 1;
    /* Permite que el div interno ocupe el espacio disponible */
}

.e-list-item.e-selected {
    /*background-color: #007bff; Ajusta el color de fondo del elemento seleccionado */
    background-color: var(--color-dark-blue);
    color: var(--color-white);
}

.e-list-item.e-selected:hover,
.e-list-item.e-selected:focus {
    /*background-color: #007bff;  Mantén el fondo azul cuando esté seleccionado y se haga hover */
    background-color: var(--color-bright-blue);
    color: var(--color-white);
}

.e-list-item.e-selected .custom-list-item {
    background-color: transparent;
    /* Mantén el fondo transparente dentro del itemTemplate */
    color: var(--color-white);
}

.e-list-item:hover:not(.e-selected),
.e-list-item:focus:not(.e-selected) {
    /* background-color: #f0f0f0; Color de fondo para elementos no seleccionados en hover o focus */
    background-color: var(--color-light-gray);
}

.z-index {
    z-index: -1;
}

.default-stepper-section {
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.scroll-container {
    overflow-x: auto;
    display: flex;
    justify-content: flex-start;
    white-space: nowrap;
    padding-top: 15px;
    padding-bottom: 15px;
    width: 100%;
    max-width: 100%;
}

#stepperTemplate {
    display: flex;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
}

.template-content {
    display: inline-block;
    padding: 10px;
}

/*DataTables Jquery*/

.dataTables_wrapper .dataTable thead {
    background: var(--color-main);
}

.dataTables_wrapper .dataTable thead>tr>th {
    color: white
}

/* Estilos para el dropdown de notificaciones */
.notifications-menu {
    width: 300px;
    max-height: calc(100vh - 70px);
    /* Ajusta este valor según la altura del header */
    overflow-y: auto;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border: 1px solid #e0e0e0;
    position: absolute;
    top: 100%;
    right: -150px;
    /* Mitad del ancho del dropdown */
}

.notifications-menu .dropdown-header {
    background-color: var(--color-main);
    color: white;
    padding: 10px;
    font-weight: bold;
}

.notifications-list {
    padding: 0;
}

.notification-item {
    padding: 12px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    transition: background-color 0.2s ease;
    position: relative;
}

.notification-item:hover {
    background-color: #f5f5f5;
}

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

.notification-item.unread .notification-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-color: var(--notif-unread-bg);
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 2px var(--notif-unread-box-shadow);
}

.notification-icon {
    margin-right: 10px;
    font-size: 1.2em;
    color: var(--color-main);
}

.notification-content {
    flex: 1;
}

.notification-title {
    font-weight: bold;
    margin-bottom: 2px;
}

.notification-message {
    font-size: 0.9em;
    color: #666;
}

/* Estilos para el dropdown del usuario */
.user-dropdown .Layout__Header--Item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-name {
    font-size: 14px;
    font-weight: bold;
    color: var(--navbar-item);
}

/* Ajustes generales para los dropdowns */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1000;
    display: none;
    min-width: 200px;
    padding: 1rem 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    /* border: 1px solid rgba(0,0,0,.15); */
    border-radius: 1rem;
}

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

.cursor-active {
    cursor: pointer;
}

.cursor-active:hover {
    background-color: var(--color-light-purple);
}

li[li-select=true] {
    background-color: var(--color-light-purple);
}

.container_comment {
    margin-left: 8px !important;
    display: flex;
    flex-direction: column;
}

.container_comment_sub {
    display: flex;
    align-items: center;
}

.input_comment_gral {
    margin-bottom: 5px !important;
    /*width: 70%;*/
    margin-right: 10px !important;
}

.btn_comment_gral {
    height: 26px;
    margin-bottom: 7px !important;
}

.scroll_auto {
    overflow: auto !important;
}

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


.table-hover-zero tbody tr:hover {
    background-color: var(--color-light-purple) !important;
}


.text-content {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    font-family: Arial, sans-serif;
    list-style-type: none;
    align-items: center;
    height: 100%;
}

.delete-icon {
    cursor: pointer;
    color: red;
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
    display: inline-block;
}

#sample-list-flat {
    padding: 0;
    margin: 0;
    background-color: #fff;
    border: none !important;
}

#sample-list-flat .e-list-item {
    display: block;
    border: none !important;
}

.e-list-item:hover,
.e-hover:hover {
    background-color: var(--color-light-purple) !important;
}

.e-list-item.e-active,
.e-hover.e-active {
    background-color: var(--color-main) !important;
    color: white !important;
}


.e-list-item:active,
.e-hover:active {
    background-color: var(--color-main) !important;
    color: white !important;
}

.app-footer {
    background-color: #f0f2f5;
    position: fixed;
    bottom: 0;
    left: 80px;
    right: 0;
    border-top: 1px solid rgba(108, 103, 224, 0.05);
    z-index: 10;
    transition: opacity 0.3s ease;
    opacity: 1;
}


.footer-container {
    padding: 6px 15px;
    text-align: center;
    font-size: 12px;
    color: #8C97A8;
}

.version {
    font-size: 11px;
    color: #a8acb1;
    margin-left: 8px;
}

.Layout__Content {
    margin-bottom: 10px !important;
}

/* Modal Expediente Entity */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* Demo page styles - not part of the component */
.demo_page {
    font-family: 'Inter', sans-serif;
    background-color: #f0f2f5;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
}

.demo_button {
    background-color: rgba(116, 69, 255, 0.1);
    color: #7445FF;
    border: 1px solid #7445FF;
    border-radius: 6px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

/* Modal overlay - covers the entire viewport */
.cdoc_modal_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.cdoc_modal_overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Modal container */
.cdoc_modal {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Modal header */
.cdoc_modal_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #edf2f7;
}

.cdoc_modal_title {
    font-size: 20px;
    font-weight: 600;
    color: #2d3748;
    margin: 0;
}

.cdoc_modal_close {
    background: none;
    border: none;
    cursor: pointer;
    color: #718096;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    transition: color 0.2s;
}

.cdoc_modal_close:hover {
    color: #2d3748;
}

/* Modal content - contains the document list and viewer */
.cdoc_modal_content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Document list container */
.cdoc_container {
    width: 350px;
    border-right: 1px solid #edf2f7;
    overflow-y: auto;
    background-color: white;
    padding: 16px;
    flex-shrink: 0;
}

.cdoc_header_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.cdoc_documents_title {
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
    margin: .0;
}

.cdoc_download_all_btn {
    background-color: var(--color-btn-bg);
    color: var(--color-btn-color);
    border: 1px solid var(--color-btn-border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.cdoc_download_all_btn:hover {
    background-color: var(--color-btn-bg-hover);
    transform: translateY(-2px);
}

.cdoc_download_all_btn:active {
    transform: translateY(0);
    background-color: rgba(116, 69, 255, 0.3);
}

.cdoc_documents_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.disabled-download {
    pointer-events: none;
    opacity: 0.4;
}

.cdoc_document_item.nodoc:hover {
    background-color: transparent !important;
    cursor: default !important;
}

.cdoc_document_check.nodoc_red {
    background-color: #e74c3c !important;
    color: white !important;
    border-radius: 50%;
    /* 🔥 círculo perfecto */
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}



.cdoc_document_item {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: space-between;
    padding: 14px 8px;
    border-bottom: 1px solid #edf2f7;
    transition: all 0.2s ease;
    cursor: pointer;
}

.cdoc_document_item:last-child {
    border-bottom: none;
}

.cdoc_document_item:hover {
    background-color: #f7fafc;
}

.cdoc_document_item.active {
    background-color: rgba(116, 69, 255, 0.1);
}

.cdoc_document_info {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
}

.cdoc_document_check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--color-main);
    color: white;
    font-size: 14px;
}


.cdoc_document_name {
    font-size: 16px;
    color: #718096;
}

.cdoc_document_download {
    width: 24px;
    height: 24px;
    color: var(--color-icon);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cdoc_document_download:hover {
    color: var(--color-main);
}

/* PDF viewer container */
.cdoc_pdf_viewer {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #f5f7fa;
    height: 800px;
}

.cdoc_pdf_toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: white;
    border-bottom: 1px solid #edf2f7;
}

.cdoc_pdf_title {
    font-size: 16px;
    font-weight: 500;
    color: #2d3748;
    margin: 0;
    flex-grow: 1;
}

.cdoc_pdf_actions {
    display: flex;
    gap: 10px;
}

.cdoc_pdf_action_btn {
    background-color: var(--color-btn-bg);
    color: var(--color-btn-color);
    border: 1px solid var(--color-btn-border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cdoc_pdf_action_btn:hover {
    background-color: var(--color-btn-bg-hover);
}

.cdoc_pdf_content {
    flex: 1;
    padding: 20px;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 730px;
}

.cdoc_pdf_frame {
    width: 100%;
    height: 100%;
    border: none;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.cdoc_pdf_placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #a0aec0;
}

.cdoc_pdf_placeholder_icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.cdoc_pdf_placeholder_text {
    font-size: 16px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .cdoc_modal_content {
        flex-direction: column;
    }

    .cdoc_container {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #edf2f7;
        max-height: 40vh;
    }

    .cdoc_pdf_viewer {
        height: 60vh;
    }
}

@media (max-width: 480px) {
    .cdoc_modal {
        width: 95%;
    }

    .cdoc_modal_header {
        padding: 12px 16px;
    }

    .cdoc_document_item {
        padding: 12px 4px;
    }

    .cdoc_document_name {
        font-size: 14px;
    }

    .cdoc_pdf_toolbar {
        padding: 8px 12px;
    }
}

/* CSS PreviewPDF SyncFusion */

.e-toolbar .e-toolbar-items {
    background: var(--color-previewpdf-primary) !important;
}

.e-pv-sidebar-toolbar {
    background: var(--color-previewpdf-primary) !important;
}

.e-toolbar .e-toolbar-item.e-overlay {
    background: var(--color-previewpdf-primary) !important;
    opacity: .65;
}

.e-pv-toolbar .e-pv-tbar-btn.e-pv-tbar-btn,
.e-pv-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn,
.e-pv-mobile-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn,
.e-pv-mobile-annotation-toolbar .e-dropdown-btn.e-btn,
.e-pv-annotation-toolbar .e-dropdown-btn.e-btn,
.e-pv-formdesigner-toolbar .e-pv-tbar-btn.e-pv-tbar-btn,
.e-pv-formdesigner-toolbar .e-dropdown-btn.e-btn,
.e-pv-shapes-toolbar .e-pv-tbar-btn,
.e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused,
.e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-menu-icon,
.e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon,
.e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret,
.e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret {
    color: var(--color-previewpdf-primary) !important;
}

.e-toolbar .e-toolbar-item .e-tbar-btn {
    background: var(--color-previewpdf-primary) !important;
    box-shadow: none;
    border: none !important;
    color: var(--color-previewpdf-secondary) !important;
}

.e-toolbar .e-toolbar-item .e-tbar-btn:hover {
    background-color: var(--color-btn-bg-hover) !important;
    border-style: none !important;
}

.e-toolbar .e-toolbar-item .e-tbar-btn:hover>span {
    color: var(--color-btn-color) !important;
}

.e-pv-toolbar .e-toolbar-item.e-overlay .e-pv-tbar-btn.e-pv-tbar-btn .e-pv-icon,
.e-pv-annotation-toolbar .e-toolbar-item.e-overlay .e-pv-tbar-btn.e-pv-tbar-btn .e-pv-icon,
.e-pv-annotation-toolbar .e-toolbar-item.e-overlay .e-dropdown-btn.e-btn .e-pv-icon,
.e-pv-formdesigner-toolbar .e-toolbar-item.e-overlay .e-pv-tbar-btn.e-pv-tbar-btn .e-pv-icon,
.e-pv-formdesigner-toolbar .e-toolbar-item.e-overlay .e-dropdown-btn.e-btn .e-pv-icon {
    color: var(--color-previewpdf-secondary) !important;
}

.e-pv-sidebar-toolbar .e-pv-tbar-btn {
    color: var(--color-previewpdf-secondary) !important;
}

.e-pv-zoom-drop-down.e-input-group.e-control-wrapper.e-ddl:not(.e-error),
.e-pv-prop-dropdown.e-input-group.e-control-wrapper.e-ddl:not(.e-error),
.e-pv-zoom-drop-down-rtl.e-input-group.e-control-wrapper.e-ddl:not(.e-error),
.e-pv-prop-dropdown-rtl.e-input-group.e-control-wrapper.e-ddl:not(.e-error) {
    background-color: var(--color-previewpdf-shadow) !important;
}

.e-pv-search-btn.e-btn:hover:not(:disabled),
.e-pv-sidebar-toolbar .e-pv-tbar-btn:hover:not(:disabled) {
    background-color: var(--color-previewpdf-shadow) !important;
}

.e-ddl.e-input-group .e-ddl-hidden,
.e-ddl.e-float-input .e-ddl-hidden {
    height: 30px !important;
    visibility: visible !important;
}

/* Document Editor Syncfusion*/
.e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-btn-icon {
    color: var(--color-btn-editor-color) !important;
    font-size: 16px;
}

.e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn:hover.e-btn .e-btn-icon {
    color: var(--color-btn-color) !important;
    font-size: 16px;
}

.e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--color-btn-editor-color) !important;
}

/* Document Editor Syncfusion*/

/* Info box */

.info-box {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    background-color: var(--mdlsign-bg-gray);
    padding: 16px !important;
    border-radius: 8px;
    border-left: 4px solid var(--color-main);
    margin-bottom: 20px !important;
    align-items: center;
}

.info-icon {
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--color-main);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.info-text {
    color: var(--color-main);
    font-size: 14px;
    line-height: 1.5;
}

/* New  Modal Documentos */

/* Modal overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Modal container */
.modal-doc {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Modal header */
.modal-doc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #edf2f7;
}

.modal-doc-title {
    font-size: 20px;
    font-weight: 600;
    color: #2d3748;
    margin: 0;
}

.modal-doc-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #718096;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    transition: color 0.2s;
}

.modal-doc-close:hover {
    color: #2d3748;
}

/* Modal content */
.modal-doc-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Upload form container */
.upload-container {
    width: 350px;
    border-right: 1px solid #edf2f7;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 14px;
}

.upload-btn {
    background-color: var(--color-btn-bg);
    color: var(--color-btn-color);
    border: 1px solid var(--color-btn-border);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-btn:hover {
    background-color: var(--color-btn-bg-hover);
    transform: translateY(-2px);
}

.upload-btn:active {
    transform: translateY(0);
}

.upload-btn input {
    display: none;
}

.validity-section {
    background-color: var(--mdlsign-bg-gray);
    padding: 16px;
    border-radius: 8px;
    border-left: 4px solid var(--mdlsign-primary-color);
    display: flex;
    flex-direction: column;
    gap: 15px;
}


.validity-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.validity-toggle label {
    font-weight: 500;
    color: #2d3748;
}

/* Toggle switch styling */
.toggle {
    position: relative;
    display: inline-block;
    width: 57px;
    height: 27px;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ff4444;
    transition: .4s;
    border-radius: 34px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 23px !important;
    width: 23px !important;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.toggle-slider .toggle-text {
    position: absolute;
    top: 5px;
    right: 10px;
    color: white;
    font-size: 12px;
    font-weight: 500;
}

input:checked+.toggle-slider {
    background-color: #28a745;
}

input:checked+.toggle-slider:before {
    transform: translateX(29px) !important;
}

input:checked+.toggle-slider .toggle-text {
    left: 10px;
    right: auto;
}

.date-input {
    display: none;
    width: 100%;
}

.date-input.visible {
    display: block;
}

.date-input input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    color: #2d3748;
}

/* PDF preview container */
.pdf-viewer {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #f5f7fa;
}

.pdf-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #a0aec0;
}

.pdf-placeholder-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.pdf-placeholder-text {
    font-size: 16px;
}

.pdf-content {
    flex: 1;
    padding: 20px;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.pdf-frame {
    width: 100%;
    height: 100%;
    min-height: 500px;
    border: none;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Modal footer */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #edf2f7;
}

.btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-doc-cancel {
    background-color: transparent;
    color: var(--color-red);
    border: 1px solid var(--color-red) !important;
}

.btn-doc-cancel:hover {
    background-color: rgba(255, 43, 43, 0.1);
}

.btn-save {
    background-color: var(--color-main);
    color: white;
    border: none;
}

.btn-save:hover {
    color: white;
    opacity: 0.8;
}

/* Responsive styling */
@media (max-width: 768px) {
    .modal-content {
        flex-direction: column;
    }

    .upload-container {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #edf2f7;
    }

    .pdf-viewer {
        height: 50vh;
    }
}

/* Personalización del borde del redimensionador de columnas en Syncfusion Grid */
.e-grid .e-headercell {
    border-right: 1px solid #6C67E0 !important;
}

/* Color del separador entre columnas (resizer) */
.e-grid .e-headercell .e-rhandler {
    background-color: #6C67E0 !important;
    width: 2px !important;
}






.btn-header {
    background-color: transparent;
    border: none;
    padding: 1rem 10x 1rem 10px !important;
    /* ← Aquí cambia el padding izquierdo */
    transition: background-color 0.3s ease;
    border-radius: 4px !important;
    /*width: 100% !important;*/
    text-align: left;
}

.btn-header:hover {
    background-color: rgb(198, 190, 238);
    /* tu tono personalizado */
    color: inherit;
}

.lbl-option-firma {
    margin-right: 9% !important;
    font-size: 12pt;
    font-weight: bold;
    color: #768396;
    background-color: #F5F5F5;
    padding: 5px 12px !important;
    border-radius: 100px !important;
}

/* Animación de vibración */
@keyframes vibrate {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(2px, -2px);
    }

    60% {
        transform: translate(-2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

.vibrate {
    animation: vibrate 0.3s linear;
}


/* Contenedor del dropdown */
#containerStages {
    position: absolute;
    display: none;
    z-index: 9999;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-height: 200px;
    overflow-y: auto;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

/* Cada opción */
#containerStages .optionDiv {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    white-space: nowrap;
}

/* Hover de la opción */
#containerStages .optionDiv:hover {
    background-color: #f0f0f0;
}

.e-caret-hide .e-caret {
    display: none;
}