@import url('https://fonts.googleapis.com/css2?family=Pathway+Extreme:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap');

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 8px;
    height:8px;
}

*::-webkit-scrollbar-track {
    background: #dedede00;
}

*::-webkit-scrollbar-thumb {
    background-color: #969696;
    border-radius: 10px;
    border: 3px none #ffffff;
}

:root {
    --color-white: #fff;
    --color-primary-50: #F0FBFB;
    --color-primary-100: #D8F2F5;
    --color-primary-200: #B6E4EB;
    --color-primary-300: #83CFDD;
    --color-primary-400: #49B1C7;
    --color-primary-500: #33A7C1;
    --color-primary-600: #266884;
    --color-primary-700: #276377;
    --color-primary-800: #275263;
    --color-primary-900: #254554;
    --color-primary-950: #142D38;
    --color-gray-50: #F6F6F6;
    --color-gray-100: #E7E7E7;
    --color-gray-200: #D1D1D1;
    --color-gray-300: #B0B0B0;
    --color-gray-400: #888888;
    --color-gray-500: #6D6D6D;
    --color-gray-600: #5C5C5C;
    --color-gray-700: #4F4F4F;
    --color-gray-800: #454545;
    --color-gray-900: #3D3D3D;
    --color-gray-950: #262626;
    --color-green-500: #1DCF13;
    --color-success-50: #ffffff;
    --color-success-100: #d9f2e2;
    --color-success-200: #b7e3c9;
    --color-success-300: #87cea8;
    --color-success-400: #55b283;
    --color-success-500: #339668;
    --color-success-600: #268259;
    --color-success-700: #1c6044;
    --color-success-800: #184d37;
    --color-success-900: #153f2e;
    --color-success-950: #0b231a;
    --color-warning-950: #411f07;
    --color-warning-50: #ffffff;
    --color-warning-100: #fdf7c4;
    --color-warning-200: #fced8c;
    --color-warning-300: #fadc4a;
    --color-warning-400: #f6c819;
    --color-warning-500: #e6af0c;
    --color-warning-600: #d49008;
    --color-warning-700: #9e610a;
    --color-warning-800: #834c10;
    --color-warning-900: #6f3e14;
    --color-error-50: #ffffff;
    --color-error-100: #fee2e2;
    --color-error-200: #ffdad6;
    --color-error-300: #fda4a4;
    --color-error-400: #fa6f6f;
    --color-error-500: #f24141;
    --color-error-600: #df2323;
    --color-error-700: #bc1919;
    --color-error-800: #a21a1a;
    --color-error-900: #811b1b;
    --color-error-950: #460909;
    --border-input: solid 2px var(--color-primary-500);
    font-size: 16px;
}
.text-title {
    font-size: 40px;
    font-family: Pathway Extreme, sans-serif;
    font-weight: 600;
    line-height: 160%;
    color:var(--color-gray-700);
}

.text-subtitle {
    font-size: 32px;
    font-family: Pathway Extreme, sans-serif;
    font-weight: 600;
    line-height: 160%;
    color: var(--color-gray-700);
}

.text-sections {
    font-size: 24px;
    font-family: Pathway Extreme, sans-serif;
    font-weight: 600;
    line-height: 160%;
    color: var(--color-gray-700);
}

.text-items {
    font-size: 20px;
    font-family: Pathway Extreme, sans-serif;
    font-weight: 600;
    line-height: 160%;
    color: var(--color-gray-700);
}
.text-normal {
    font-size: 16px;
    font-family: Pathway Extreme, sans-serif;
    line-height: 160%;
    color: var(--color-gray-600);
}
.message-container {
    border: solid 1px var(--color-primary-700);
    background-color: var(--color-primary-100);
    color: var(--color-primary-700);
    border-radius: 4px;
    bottom: 50dvh;
    z-index: 105;
    left: 50%;
    box-shadow: 2px 8px 8px 0 rgb(199, 199, 199);
    padding: 8px 16px;
    transform: translate(-50%, 200%);
    transition: transform .5s;
    display: none;
    opacity: 0;
    & svg{
             height:24px;
         }
    & .message-close:hover {
        background-color: var(--color-primary-300);
    }
    & i.message-content-icon {
        display: flex;
        color: var(--color-primary-700);
        align-items: center;
    }
    & i.message-close svg {
        color: var(--color-primary-700);
    }

}
.message-container.Success {
    border: solid 1px var(--color-success-700);
    background-color: var(--color-success-100);
    color: var(--color-success-700);
    & .message-close:hover{
    background-color: var(--color-success-300);
    }
    & i.message-content-icon {
        color: var(--color-success-700);
    }
    & i.message-close svg {
        color: var(--color-success-700);
    }
}
.message-container.Error {
    border: solid 1px var(--color-error-700);
    background-color: var(--color-error-100);
    color: var(--color-error-700);
    & .message-close:hover{
    background-color: var(--color-error-300);
    
    }
    & i.message-content-icon {
        color: var(--color-error-700);
    }
    & i.message-close svg {
        color: var(--color-error-700);
    }
}
.message-container.Warning {
    border: solid 1px var(--color-warning-700);
    background-color: var(--color-warning-100);
    color: var(--color-warning-700);
    & .message-close:hover{
    background-color: var(--color-warning-300);
    color: var(--color-warning-700);
    }
    & i.message-content-icon {
        color: var(--color-warning-700);
    }
    & i.message-close svg {
            color: var(--color-warning-700);
    }
}
.message-container.show {
    display: flex;
    transform: translate(-50%, 0);
    opacity:1;
    animation: showMessage .8s ease-in-out;
}
.message-close{
    position:absolute;
    right:0;
    top:0;
    padding:6px;
    cursor:pointer;
    border-radius:4px;
    & svg
{
    width: 12px;
    height: 12px;
}    
}

.message-content{
    display:flex;
    gap:12px;
}
.message-content-text .message-content-text-title{
    font-size:20px;
    margin:auto;
}
.message-content-text p.message-content-text-message {
    font-size: 16px;
    font-family: Pathway Extreme, sans-serif;
    line-height: 200%;
    margin:auto;
}

@keyframes showMessage {
    0% {
        transform: translate(-50%, 200%);
        opacity: 0;
        scale:0;
    }

    40% {
        transform: translate(-51%, 0);
        opacity: 1;
        scale: 1;
    }

    70% {
        transform: translate(-49%, 0);
    }
    80% {
        transform: translate(-51%, 0);
    }
    90% {
        transform: translate(-49%, 0);
    }
    100% {
        transform: translate(-50%, 0);
      
    }
}

.grid-view {
    overflow: hidden;
    border-radius: 4px;
    background: var(--color-gray-100);
    margin: .5rem;
    /* Shadow */
    box-shadow: 0px 2px 7px 0px rgba(4, 4, 4, 0.26);
}

    .grid-view > tbody tr {
        border-top: 1px solid var(--gray-200, #D6D6D6);
        border-bottom: 1px solid var(--gray-200, #D6D6D6);
        position: relative;
    }

    .grid-view > tbody > tr:first-of-type:has(th) {
        font-weight: var(--font-weight-semibold);
        color: var(--color-gray-700);
    }

    .grid-view tr th, .grid-view tr td {
        padding: 12px 12px;
        color: var(--color-gray-600);
        font-family: var(--font-family-normal);
        font-size: var(--font-size-normal);
        line-height: 200%;
    }

    .grid-view td input[type="image"] {
        position: relative;
        z-index: 10;
        cursor: pointer;
    }

    .grid-view td, th {
        border-right: none;
        border-left: none;
    }

    .grid-view th input[type="image"] {
        position: relative;
        z-index: 10;
        cursor: pointer;
    }

    .grid-view tr th:first-of-type,
    .grid-view tr td:first-of-type {
        padding-left: 34px;
    }

    .grid-view tr th:last-of-type,
    .grid-view tr td:last-of-type {
        padding-right: 34px;
    }


    .grid-view > tbody > tr:has(:hover) > td::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 106%;
        border: 1px solid var(--color-primary-300);
        border-left: 12px solid var(--color-primary-300);
        top: -1px;
        left: 0;
    }

div:has( > .grid-view) {
    overflow-x: scroll;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    padding: 1em;
}
div:has( > .grid-view.flex) {
    display:flex;
    overflow:auto;
    & .grid-view{
    border-color:var(--color-primary-200);
                }
}
div:has( > .grid-view.block) {
    display:block;
}
div:has( > .grid-view-2) {
    overflow: auto;
    /*scrollbar-width:none;*/
    height:50vh;
    border-collapse: collapse;
}


.grid-view-2 {
    position:relative;
    border-radius: 4px;
    box-shadow: 0px 2px 2px 0px rgba(4, 4, 4, 0.26);
    width: 100%;
    border:none;
}
.grid-view-2.fit{
    width:max-content;
    top: 0px;
    left: 0px;
}

.grid-view-2 > tbody tr > td {
    box-shadow: inset 0 1px 0 0 var(--color-gray-200);
    background: var(--color-gray-100, #F9F9FA);
    border: none;
    position: relative;
    z-index: 8;
}
    
    .grid-view-2 tr th, .grid-view-2 tr td {
        padding: 0 12px ;
        color: var(--color-gray-600);
        font-family: var(--font-family-normal);
        font-size: var(--font-size-normal);
        line-height: 200%;

    }
        .grid-view-2 tr th:has(*), .grid-view-2 tr td:has(*){
            z-index:9;
        }
        .grid-view-2 td, .grid-view-2 th {
            border-right: none;
            border-left: none;
            text-align: center;
        }

    .grid-view-2 tr th {
        background-color: var(--color-gray-600);
        color: var(--color-white);
        border:none;
        font-size:18px;
        font-weight:30;
    }
    .grid-view-2.head-fixed tr th {
        position: sticky;
        top: 0;
        z-index: 11;
    }
.head-fixed tr th {
    position: sticky;
    top: 0;
    z-index: 11;
}
    .grid-view-2 tr td:has(.column-fixed),
    .grid-view-2 tr th:has(.column-fixed),
    .grid-view-2.first-column-fixed tr th:first-child,
    .grid-view-2.first-column-fixed tr td:first-child {
        position: sticky;
        box-shadow: inset -1px 1px 0 0 var(--color-gray-200);
        left: 0;
    }
    .grid-view-2 tr td:has(.column-fixed),
    .grid-view-2.first-column-fixed tr td:first-child {
        z-index: 10;
    }
    .grid-view-2 tr th:has(.column-fixed),
    .grid-view-2.first-column-fixed tr th:first-child {
        z-index: 12;
    }


        .grid-view-2 tr th:first-of-type,
        .grid-view-2 tr td:first-of-type {
            padding-left: 34px;
        }

        .grid-view-2 tr th:last-of-type,
        .grid-view-2 tr td:last-of-type {
            padding-right: 34px;
        }


    .grid-view-2 > tbody > tr:has(td:hover) {
        background-color: var(--color-gray-200);
    }
    


@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.spin {
    transform-origin: center;
    animation: spin 2s linear infinite;
}

.loaderSpin {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 16, 16,.2);
    z-index: 20;
    display: flex;
    justify-content: center;
    & svg

{
    width: 300px;
}

& .spin {
    stroke-width: 41px;
}

}
.accordion-container {
    max-height: 100%;
    transition: max-height ease-in .2s;
    overflow: hidden;
}

.accordion-container.accordion-colapse {
    max-height: 0px;
    overflow: hidden;
    transition: max-height ease-in .2s;
    
}
.accordion-toggle.accordion-colapse{
    transform:rotate(90deg);
    transition: .2s;
}
.accordion-toggle:hover svg{
    color:var(--color-primary-200);
}
.button {
    padding: 0 1.5em;
    border: none;
    border-radius: 4px;
    background-color: var(--color-primary-600);
    color: var(--color-gray-50);
    line-height: 100%;
}
.button-primary {
    padding: .8em 1.2em;
    border: none;
    border-radius: 4px;
    font-size:16px;
    font-family: 'Pathway Extreme', sans-serif;
    font-weight:500;
    background-color: var(--color-primary-700);
    color: var(--color-gray-50);
    line-height: 100%;
    cursor:pointer;
}
.button-primary:hover {
    background-color: var(--color-primary-900);
    
}
.button-primary:active{
    background-color:var(--color-primary-500);
}
.button-secondary {
    padding: .8em 1.2em;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-family: 'Pathway Extreme', sans-serif;
    font-weight: 500;
    background-color: transparent;
    border:solid 1px var(--color-primary-700);
    color: var(--color-primary-700);
    line-height: 100%;
    cursor: pointer;
}

.button-secondary:hover {
    border-color: var(--color-primary-900);
    color: var(--color-primary-900);
    background-color:var(--color-gray-50);
}

.button-secondary:active {
    color: var(--color-primary-500);
    border-color:var(--color-primary-500);
}
.button-warning {
    padding: 0 1.5em;
    border: none;
    border-radius: 4px;
    background-color: red;
    color: var(--color-gray-50);
}

.button-success {
    padding: 0 1.5em;
    border: none;
    border-radius: 4px;
    background-color: var(--color-green-500);
    color: var(--color-gray-50);
}

.button-info {
    padding: 0 1.5em;
    border: none;
    border-radius: 4px;
    background-color: var(--color-primary-600);
    color: var(--color-gray-50);
}

.switch > input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden;
}

.chip {
    border-radius: 100px;
    background-color: var(--color-gray-100);
    padding: .4em 1em;
}

.check-box {
    position: relative;
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    cursor: pointer;
    gap: 4px;
    z-index: 10;
}

    .check-box > span {
        border-radius: .3em;
        border:solid 2px var(--color-primary-500);
        background: var(--color-gray-100, #EAEAEA);
        display: flex;
        width: 16px;
        height: 16px;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        cursor: pointer;
    }

    .check-box > p {
        font-family: var(--font-family-normal);
        font-size: var(--font-size-small);
        font-weight: var(--font-weight-medium);
    }

        .check-box > p > a {
            font-family: var(--font-family-normal);
            font-size: var(--font-size-small);
            color: var(--color-primary-500);
            text-decoration: underline;
            font-weight: var(--font-weight-medium);
            cursor: pointer;
        }

    .check-box > span > span > input[type =checkbox], .check-box > span > svg {
        display: none;
    }

    .check-box > span:has(span > input:checked) > svg {
        display: block;
        color: var(--color-gray-50);
    }

    .check-box > span:has(span > input:checked) {
        background-color: var(--color-primary-500);
        width: 16px;
        height: 16px;
    }

.switch {
    display: flex;
    cursor: pointer;
    width: 58px;
    height: 30px;
    background-color: var(--color-gray-100);
    border: var(--border-input);
    border-radius: 100px;
    position: relative;
}

    .switch:after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 5px;
        width: 20px;
        height: 20px;
        background-color: var(--color-gray-300);
        border-radius: 50%;
        transition: 0.3s;
    }

    .switch:has(input:checked) {
        background-color: var(--color-primary-100);
    }

        .switch:has(input:checked)::after {
            left: calc(100% - 5px);
            transform: translate(-100%, -50%);
            background-color: var(--color-primary-400 );
        }

    .switch:active:after {
        width: 32px;
    }
.radio-button {
    border-radius: 50%;
    border: var(--border-input);
    background: var(--color-gray-100, #EAEAEA);
    
    width: 16px;
    height: 16px;

    cursor:pointer;
}

    .radio-button > input[type =radio] {
        display: none;
    }

    .radio-button:has(input:checked) {
        background-color: var(--color-primary-500);
        width: 16px;
        height: 16px;
    }
.color-white {
    color: var(--color-white);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.static {
    position: static;
}

.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.sticky {
    position: sticky;
}

.right-0 {
    right: 0px;
}

.w-0 {
    width: 0px;
}

.w-px {
    width: 1px;
}

.w-0\.5 {
    width: 0.125rem; /* 2px */
}

.w-1 {
    width: 0.25rem; /* 4px */
}

.w-1\.5 {
    width: 0.375rem; /* 6px */
}

.w-2 {
    width: 0.5rem; /* 8px */
}

.w-2\.5 {
    width: 0.625rem; /* 10px */
}

.w-3 {
    width: 0.75rem; /* 12px */
}

.w-3\.5 {
    width: 0.875rem; /* 14px */
}

.w-4 {
    width: 1rem; /* 16px */
}

.w-5 {
    width: 1.25rem; /* 20px */
}

.w-6 {
    width: 1.5rem; /* 24px */
}

.w-7 {
    width: 1.75rem; /* 28px */
}

.w-8 {
    width: 2rem; /* 32px */
}

.w-9 {
    width: 2.25rem; /* 36px */
}

.w-10 {
    width: 2.5rem; /* 40px */
}

.w-11 {
    width: 2.75rem; /* 44px */
}

.w-12 {
    width: 3rem; /* 48px */
}

.w-14 {
    width: 3.5rem; /* 56px */
}

.w-16 {
    width: 4rem; /* 64px */
}

.w-20 {
    width: 5rem; /* 80px */
}

.w-24 {
    width: 6rem; /* 96px */
}

.w-28 {
    width: 7rem; /* 112px */
}

.w-32 {
    width: 8rem; /* 128px */
}

.w-36 {
    width: 9rem; /* 144px */
}

.w-40 {
    width: 10rem; /* 160px */
}

.w-44 {
    width: 11rem; /* 176px */
}

.w-48 {
    width: 12rem; /* 192px */
}

.w-52 {
    width: 13rem; /* 208px */
}

.w-56 {
    width: 14rem; /* 224px */
}

.w-60 {
    width: 15rem; /* 240px */
}

.w-64 {
    width: 16rem; /* 256px */
}

.w-72 {
    width: 18rem; /* 288px */
}

.w-80 {
    width: 20rem; /* 320px */
}

.w-96 {
    width: 24rem; /* 384px */
}

.w-auto {
    width: auto;
}

.w-1\/2 {
    width: 50%;
}

.w-1\/3 {
    width: 33.333333%;
}

.w-2\/3 {
    width: 66.666667%;
}

.w-1\/4 {
    width: 25%;
}

.w-2\/4 {
    width: 50%;
}

.w-3\/4 {
    width: 75%;
}

.w-1\/5 {
    width: 20%;
}

.w-2\/5 {
    width: 40%;
}

.w-3\/5 {
    width: 60%;
}

.w-4\/5 {
    width: 80%;
}

.w-1\/6 {
    width: 16.666667%;
}

.w-2\/6 {
    width: 33.333333%;
}

.w-3\/6 {
    width: 50%;
}

.w-4\/6 {
    width: 66.666667%;
}

.w-5\/6 {
    width: 83.333333%;
}

.w-1\/12 {
    width: 8.333333%;
}

.w-2\/12 {
    width: 16.666667%;
}

.w-3\/12 {
    width: 25%;
}

.w-4\/12 {
    width: 33.333333%;
}

.w-5\/12 {
    width: 41.666667%;
}

.w-6\/12 {
    width: 50%;
}

.w-7\/12 {
    width: 58.333333%;
}

.w-8\/12 {
    width: 66.666667%;
}

.w-9\/12 {
    width: 75%;
}

.w-10\/12 {
    width: 83.333333%;
}

.w-11\/12 {
    width: 91.666667%;
}

.w-full {
    width: 100%;
}

.w-screen {
    width: 100vw;
}

.w-svw {
    width: 100svw;
}

.w-lvw {
    width: 100lvw;
}

.w-dvw {
    width: 100dvw;
}

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

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

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

.h-full {
    height: 100%;
}

.border-0 {
    border-width: 0px;
}

.border-2 {
    border-width: 2px;
}

.border-4 {
    border-width: 4px;
}

.border-8 {
    border-width: 8px;
}

.border {
    border-width: 1px;
}

.border-x-0 {
    border-left-width: 0px;
    border-right-width: 0px;
}

.border-x-2 {
    border-left-width: 2px;
    border-right-width: 2px;
}

.border-x-4 {
    border-left-width: 4px;
    border-right-width: 4px;
}

.border-x-8 {
    border-left-width: 8px;
    border-right-width: 8px;
}

.border-x {
    border-left-width: 1px;
    border-right-width: 1px;
}

.border-y-0 {
    border-top-width: 0px;
    border-bottom-width: 0px;
}

.border-y-2 {
    border-top-width: 2px;
    border-bottom-width: 2px;
}

.border-y-4 {
    border-top-width: 4px;
    border-bottom-width: 4px;
}

.border-y-8 {
    border-top-width: 8px;
    border-bottom-width: 8px;
}

.border-y {
    border-top-width: 1px;
    border-bottom-width: 1px;
}

.border-s-0 {
    border-inline-start-width: 0px;
}

.border-s-2 {
    border-inline-start-width: 2px;
}

.border-s-4 {
    border-inline-start-width: 4px;
}

.border-s-8 {
    border-inline-start-width: 8px;
}

.border-s {
    border-inline-start-width: 1px;
}

.border-e-0 {
    border-inline-end-width: 0px;
}

.border-e-2 {
    border-inline-end-width: 2px;
}

.border-e-4 {
    border-inline-end-width: 4px;
}

.border-e-8 {
    border-inline-end-width: 8px;
}

.border-e {
    border-inline-end-width: 1px;
}

.border-t-0 {
    border-top-width: 0px;
}

.border-t-2 {
    border-top-width: 2px;
}

.border-t-4 {
    border-top-width: 4px;
}

.border-t-8 {
    border-top-width: 8px;
}

.border-t {
    border-top-width: 1px;
}

.border-r-0 {
    border-right-width: 0px;
}

.border-r-2 {
    border-right-width: 2px;
}

.border-r-4 {
    border-right-width: 4px;
}

.border-r-8 {
    border-right-width: 8px;
}

.border-r {
    border-right-width: 1px;
}

.border-b-0 {
    border-bottom-width: 0px;
}

.border-b-2 {
    border-bottom-width: 2px;
}

.border-b-4 {
    border-bottom-width: 4px;
}

.border-b-8 {
    border-bottom-width: 8px;
}

.border-b {
    border-bottom-width: 1px;
}

.border-l-0 {
    border-left-width: 0px;
}

.border-l-2 {
    border-left-width: 2px;
}

.border-l-4 {
    border-left-width: 4px;
}

.border-l-8 {
    border-left-width: 8px;
}

.border-l {
    border-left-width: 1px;
}

.p-0 {
    padding: 0px;
}

.px-0 {
    padding-left: 0px;
    padding-right: 0px;
}

.py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
}

.ps-0 {
    padding-inline-start: 0px;
}

.pe-0 {
    padding-inline-end: 0px;
}

.pt-0 {
    padding-top: 0px;
}

.pr-0 {
    padding-right: 0px;
}

.pb-0 {
    padding-bottom: 0px;
}

.pl-0 {
    padding-left: 0px;
}

.p-px {
    padding: 1px;
}

.px-px {
    padding-left: 1px;
    padding-right: 1px;
}

.py-px {
    padding-top: 1px;
    padding-bottom: 1px;
}

.ps-px {
    padding-inline-start: 1px;
}

.pe-px {
    padding-inline-end: 1px;
}

.pt-px {
    padding-top: 1px;
}

.pr-px {
    padding-right: 1px;
}

.pb-px {
    padding-bottom: 1px;
}

.pl-px {
    padding-left: 1px;
}

.p-0\.5 {
    padding: 0.125rem; /* 2px */
}

.px-0\.5 {
    padding-left: 0.125rem; /* 2px */
    padding-right: 0.125rem; /* 2px */
}

.py-0\.5 {
    padding-top: 0.125rem; /* 2px */
    padding-bottom: 0.125rem; /* 2px */
}

.ps-0\.5 {
    padding-inline-start: 0.125rem; /* 2px */
}

.pe-0\.5 {
    padding-inline-end: 0.125rem; /* 2px */
}

.pt-0\.5 {
    padding-top: 0.125rem; /* 2px */
}

.pr-0\.5 {
    padding-right: 0.125rem; /* 2px */
}

.pb-0\.5 {
    padding-bottom: 0.125rem; /* 2px */
}

.pl-0\.5 {
    padding-left: 0.125rem; /* 2px */
}

.p-1 {
    padding: 0.25rem; /* 4px */
}

.px-1 {
    padding-left: 0.25rem; /* 4px */
    padding-right: 0.25rem; /* 4px */
}

.py-1 {
    padding-top: 0.25rem; /* 4px */
    padding-bottom: 0.25rem; /* 4px */
}

.ps-1 {
    padding-inline-start: 0.25rem; /* 4px */
}

.pe-1 {
    padding-inline-end: 0.25rem; /* 4px */
}

.pt-1 {
    padding-top: 0.25rem; /* 4px */
}

.pr-1 {
    padding-right: 0.25rem; /* 4px */
}

.pb-1 {
    padding-bottom: 0.25rem; /* 4px */
}

.pl-1 {
    padding-left: 0.25rem; /* 4px */
}

.p-1\.5 {
    padding: 0.375rem; /* 6px */
}

.px-1\.5 {
    padding-left: 0.375rem; /* 6px */
    padding-right: 0.375rem; /* 6px */
}

.py-1\.5 {
    padding-top: 0.375rem; /* 6px */
    padding-bottom: 0.375rem; /* 6px */
}

.ps-1\.5 {
    padding-inline-start: 0.375rem; /* 6px */
}

.pe-1\.5 {
    padding-inline-end: 0.375rem; /* 6px */
}

.pt-1\.5 {
    padding-top: 0.375rem; /* 6px */
}

.pr-1\.5 {
    padding-right: 0.375rem; /* 6px */
}

.pb-1\.5 {
    padding-bottom: 0.375rem; /* 6px */
}

.pl-1\.5 {
    padding-left: 0.375rem; /* 6px */
}

.p-2 {
    padding: 0.5rem; /* 8px */
}

.px-2 {
    padding-left: 0.5rem; /* 8px */
    padding-right: 0.5rem; /* 8px */
}

.py-2 {
    padding-top: 0.5rem; /* 8px */
    padding-bottom: 0.5rem; /* 8px */
}

.ps-2 {
    padding-inline-start: 0.5rem; /* 8px */
}

.pe-2 {
    padding-inline-end: 0.5rem; /* 8px */
}

.pt-2 {
    padding-top: 0.5rem; /* 8px */
}

.pr-2 {
    padding-right: 0.5rem; /* 8px */
}

.pb-2 {
    padding-bottom: 0.5rem; /* 8px */
}

.pl-2 {
    padding-left: 0.5rem; /* 8px */
}

.p-2\.5 {
    padding: 0.625rem; /* 10px */
}

.px-2\.5 {
    padding-left: 0.625rem; /* 10px */
    padding-right: 0.625rem; /* 10px */
}

.py-2\.5 {
    padding-top: 0.625rem; /* 10px */
    padding-bottom: 0.625rem; /* 10px */
}

.ps-2\.5 {
    padding-inline-start: 0.625rem; /* 10px */
}

.pe-2\.5 {
    padding-inline-end: 0.625rem; /* 10px */
}

.pt-2\.5 {
    padding-top: 0.625rem; /* 10px */
}

.pr-2\.5 {
    padding-right: 0.625rem; /* 10px */
}

.pb-2\.5 {
    padding-bottom: 0.625rem; /* 10px */
}

.pl-2\.5 {
    padding-left: 0.625rem; /* 10px */
}

.p-3 {
    padding: 0.75rem; /* 12px */
}

.px-3 {
    padding-left: 0.75rem; /* 12px */
    padding-right: 0.75rem; /* 12px */
}

.py-3 {
    padding-top: 0.75rem; /* 12px */
    padding-bottom: 0.75rem; /* 12px */
}

.ps-3 {
    padding-inline-start: 0.75rem; /* 12px */
}

.pe-3 {
    padding-inline-end: 0.75rem; /* 12px */
}

.pt-3 {
    padding-top: 0.75rem; /* 12px */
}

.pr-3 {
    padding-right: 0.75rem; /* 12px */
}

.pb-3 {
    padding-bottom: 0.75rem; /* 12px */
}

.pl-3 {
    padding-left: 0.75rem; /* 12px */
}

.p-3\.5 {
    padding: 0.875rem; /* 14px */
}

.px-3\.5 {
    padding-left: 0.875rem; /* 14px */
    padding-right: 0.875rem; /* 14px */
}

.py-3\.5 {
    padding-top: 0.875rem; /* 14px */
    padding-bottom: 0.875rem; /* 14px */
}

.ps-3\.5 {
    padding-inline-start: 0.875rem; /* 14px */
}

.pe-3\.5 {
    padding-inline-end: 0.875rem; /* 14px */
}

.pt-3\.5 {
    padding-top: 0.875rem; /* 14px */
}

.pr-3\.5 {
    padding-right: 0.875rem; /* 14px */
}

.pb-3\.5 {
    padding-bottom: 0.875rem; /* 14px */
}

.pl-3\.5 {
    padding-left: 0.875rem; /* 14px */
}

.p-4 {
    padding: 1rem; /* 16px */
}

.px-4 {
    padding-left: 1rem; /* 16px */
    padding-right: 1rem; /* 16px */
}

.py-4 {
    padding-top: 1rem; /* 16px */
    padding-bottom: 1rem; /* 16px */
}

.ps-4 {
    padding-inline-start: 1rem; /* 16px */
}

.pe-4 {
    padding-inline-end: 1rem; /* 16px */
}

.pt-4 {
    padding-top: 1rem; /* 16px */
}

.pr-4 {
    padding-right: 1rem; /* 16px */
}

.pb-4 {
    padding-bottom: 1rem; /* 16px */
}

.pl-4 {
    padding-left: 1rem; /* 16px */
}

.p-5 {
    padding: 1.25rem; /* 20px */
}

.px-5 {
    padding-left: 1.25rem; /* 20px */
    padding-right: 1.25rem; /* 20px */
}

.py-5 {
    padding-top: 1.25rem; /* 20px */
    padding-bottom: 1.25rem; /* 20px */
}

.ps-5 {
    padding-inline-start: 1.25rem; /* 20px */
}

.pe-5 {
    padding-inline-end: 1.25rem; /* 20px */
}

.pt-5 {
    padding-top: 1.25rem; /* 20px */
}

.pr-5 {
    padding-right: 1.25rem; /* 20px */
}

.pb-5 {
    padding-bottom: 1.25rem; /* 20px */
}

.pl-5 {
    padding-left: 1.25rem; /* 20px */
}

.p-6 {
    padding: 1.5rem; /* 24px */
}

.px-6 {
    padding-left: 1.5rem; /* 24px */
    padding-right: 1.5rem; /* 24px */
}

.py-6 {
    padding-top: 1.5rem; /* 24px */
    padding-bottom: 1.5rem; /* 24px */
}

.ps-6 {
    padding-inline-start: 1.5rem; /* 24px */
}

.pe-6 {
    padding-inline-end: 1.5rem; /* 24px */
}

.pt-6 {
    padding-top: 1.5rem; /* 24px */
}

.pr-6 {
    padding-right: 1.5rem; /* 24px */
}

.pb-6 {
    padding-bottom: 1.5rem; /* 24px */
}

.pl-6 {
    padding-left: 1.5rem; /* 24px */
}

.p-7 {
    padding: 1.75rem; /* 28px */
}

.px-7 {
    padding-left: 1.75rem; /* 28px */
    padding-right: 1.75rem; /* 28px */
}

.py-7 {
    padding-top: 1.75rem; /* 28px */
    padding-bottom: 1.75rem; /* 28px */
}

.ps-7 {
    padding-inline-start: 1.75rem; /* 28px */
}

.pe-7 {
    padding-inline-end: 1.75rem; /* 28px */
}

.pt-7 {
    padding-top: 1.75rem; /* 28px */
}

.pr-7 {
    padding-right: 1.75rem; /* 28px */
}

.pb-7 {
    padding-bottom: 1.75rem; /* 28px */
}

.pl-7 {
    padding-left: 1.75rem; /* 28p  */
}

.p-8 {
    padding: 2rem; /* 32px */
}

.px-8 {
    padding-left: 2rem; /* 32px */
    padding-right: 2rem; /* 32px */
}

.py-8 {
    padding-top: 2rem; /* 32px */
    padding-bottom: 2rem; /* 32px */
}

.ps-8 {
    padding-inline-start: 2rem; /* 32px */
}

.pe-8 {
    padding-inline-end: 2rem; /* 32px */
}

.pt-8 {
    padding-top: 2rem; /* 32px */
}

.pr-8 {
    padding-right: 2rem; /* 32px */
}

.pb-8 {
    padding-bottom: 2rem; /* 32px */
}

.pl-8 {
    padding-left: 2rem; /* 32px */
}

.p-9 {
    padding: 2.25rem; /* 36px */
}

.px-9 {
    padding-left: 2.25rem; /* 36px */
    padding-right: 2.25rem; /* 36px */
}

.py-9 {
    padding-top: 2.25rem; /* 36px */
    padding-bottom: 2.25rem; /* 36px */
}

.ps-9 {
    padding-inline-start: 2.25rem; /* 36px */
}

.pe-9 {
    padding-inline-end: 2.25rem; /* 36px */
}

.pt-9 {
    padding-top: 2.25rem; /* 36px */
}

.pr-9 {
    padding-right: 2.25rem; /* 36px */
}

.pb-9 {
    padding-bottom: 2.25rem; /* 36px */
}

.pl-9 {
    padding-left: 2.25rem; /* 36px */
}

.p-10 {
    padding: 2.5rem; /* 40px */
}

.px-10 {
    padding-left: 2.5rem; /* 40px */
    padding-right: 2.5rem; /* 40px */
}

.py-10 {
    padding-top: 2.5rem; /* 40px */
    padding-bottom: 2.5rem; /* 40px */
}

.ps-10 {
    padding-inline-start: 2.5rem; /* 40px */
}

.pe-10 {
    padding-inline-end: 2.5rem; /* 40px */
}

.pt-10 {
    padding-top: 2.5rem; /* 40px */
}

.pr-10 {
    padding-right: 2.5rem; /* 40px */
}

.pb-10 {
    padding-bottom: 2.5rem; /* 40px */
}

.pl-10 {
    padding-left: 2.5rem; /* 40px */
}

.p-11 {
    padding: 2.75rem; /* 44px */
}

.px-11 {
    padding-left: 2.75rem; /* 44px */
    padding-right: 2.75rem; /* 44px */
}

.py-11 {
    padding-top: 2.75rem; /* 44px */
    padding-bottom: 2.75rem; /* 44px */
}

.ps-11 {
    padding-inline-start: 2.75rem; /* 44px */
}

.pe-11 {
    padding-inline-end: 2.75rem; /* 44px */
}

.pt-11 {
    padding-top: 2.75rem; /* 44px */
}

.pr-11 {
    padding-right: 2.75rem; /* 44px */
}

.pb-11 {
    padding-bottom: 2.75rem; /* 44px */
}

.pl-11 {
    padding-left: 2.75rem; /* 44px */
}

.p-12 {
    padding: 3rem; /* 48px */
}

.px-12 {
    padding-left: 3rem; /* 48px */
    padding-right: 3rem; /* 48px */
}

.py-12 {
    padding-top: 3rem; /* 48px */
    padding-bottom: 3rem; /* 48px */
}

.ps-12 {
    padding-inline-start: 3rem; /* 48px */
}

.pe-12 {
    padding-inline-end: 3rem; /* 48px */
}

.pt-12 {
    padding-top: 3rem; /* 48px */
}

.pr-12 {
    padding-right: 3rem; /* 48px */
}

.pb-12 {
    padding-bottom: 3rem; /* 48px */
}

.pl-12 {
    padding-left: 3rem; /* 48px */
}

.p-14 {
    padding: 3.5rem; /* 56px */
}

.px-14 {
    padding-left: 3.5rem; /* 56px */
    padding-right: 3.5rem; /* 56px */
}

.py-14 {
    padding-top: 3.5rem; /* 56px */
    padding-bottom: 3.5rem; /* 56px */
}

.ps-14 {
    padding-inline-start: 3.5rem; /* 56px */
}

.pe-14 {
    padding-inline-end: 3.5rem; /* 56px */
}

.pt-14 {
    padding-top: 3.5rem; /* 56px */
}

.pr-14 {
    padding-right: 3.5rem; /* 56px */
}

.pb-14 {
    padding-bottom: 3.5rem; /* 56px */
}

.pl-14 {
    padding-left: 3.5rem; /* 56px */
}

.p-16 {
    padding: 4rem; /* 64px */
}

.px-16 {
    padding-left: 4rem; /* 64px */
    padding-right: 4rem; /* 64px */
}

.py-16 {
    padding-top: 4rem; /* 64px */
    padding-bottom: 4rem; /* 64px */
}

.ps-16 {
    padding-inline-start: 4rem; /* 64px */
}

.pe-16 {
    padding-inline-end: 4rem; /* 64px */
}

.pt-16 {
    padding-top: 4rem; /* 64px */
}

.pr-16 {
    padding-right: 4rem; /* 64px */
}

.pb-16 {
    padding-bottom: 4rem; /* 64px */
}

.pl-16 {
    padding-left: 4rem; /* 64px */
}

.p-20 {
    padding: 5rem; /* 80px */
}

.px-20 {
    padding-left: 5rem; /* 80px */
    padding-right: 5rem; /* 80px */
}

.py-20 {
    padding-top: 5rem; /* 80px */
    padding-bottom: 5rem; /* 80px */
}

.ps-20 {
    padding-inline-start: 5rem; /* 80px */
}

.pe-20 {
    padding-inline-end: 5rem; /* 80px */
}

.pt-20 {
    padding-top: 5rem; /* 80px */
}

.pr-20 {
    padding-right: 5rem; /* 80px */
}

.pb-20 {
    padding-bottom: 5rem; /* 80px */
}

.pl-20 {
    padding-left: 5rem; /* 80px */
}

.p-24 {
    padding: 6rem; /* 96px */
}

.px-24 {
    padding-left: 6rem; /* 96px */
    padding-right: 6rem; /* 96px */
}

.py-24 {
    padding-top: 6rem; /* 96px */
    padding-bottom: 6rem; /* 96px */
}

.ps-24 {
    padding-inline-start: 6rem; /* 96px */
}

.pe-24 {
    padding-inline-end: 6rem; /* 96px */
}

.pt-24 {
    padding-top: 6rem; /* 96px */
}

.pr-24 {
    padding-right: 6rem; /* 96px */
}

.pb-24 {
    padding-bottom: 6rem; /* 96px */
}

.pl-24 {
    padding-left: 6rem; /* 96px */
}

.p-28 {
    padding: 7rem; /* 112px */
}

.px-28 {
    padding-left: 7rem; /* 112px */
    padding-right: 7rem; /* 112px */
}

.py-28 {
    padding-top: 7rem; /* 112px */
    padding-bottom: 7rem; /* 112px */
}

.ps-28 {
    padding-inline-start: 7rem; /* 112px */
}

.pe-28 {
    padding-inline-end: 7rem; /* 112px */
}

.pt-28 {
    padding-top: 7rem; /* 112px */
}

.pr-28 {
    padding-right: 7rem; /* 112px */
}

.pb-28 {
    padding-bottom: 7rem; /* 112px */
}

.pl-28 {
    padding-left: 7rem; /* 112px */
}

.p-32 {
    padding: 8rem; /* 128px */
}

.px-32 {
    padding-left: 8rem; /* 128px */
    padding-right: 8rem; /* 128px */
}

.py-32 {
    padding-top: 8rem; /* 128px */
    padding-bottom: 8rem; /* 128px */
}

.ps-32 {
    padding-inline-start: 8rem; /* 128px */
}

.pe-32 {
    padding-inline-end: 8rem; /* 128px */
}

.pt-32 {
    padding-top: 8rem; /* 128px */
}

.pr-32 {
    padding-right: 8rem; /* 128px */
}

.pb-32 {
    padding-bottom: 8rem; /* 128px */
}

.pl-32 {
    padding-left: 8rem; /* 128px */
}

.p-36 {
    padding: 9rem; /* 144px */
}

.px-36 {
    padding-left: 9rem; /* 144px */
    padding-right: 9rem; /* 144px */
}

.py-36 {
    padding-top: 9rem; /* 144px */
    padding-bottom: 9rem; /* 144px */
}

.ps-36 {
    padding-inline-start: 9rem; /* 144px */
}

.pe-36 {
    padding-inline-end: 9rem; /* 144px */
}

.pt-36 {
    padding-top: 9rem; /* 144px */
}

.pr-36 {
    padding-right: 9rem; /* 144px */
}

.pb-36 {
    padding-bottom: 9rem; /* 144px */
}

.pl-36 {
    padding-left: 9rem; /* 144px */
}

.p-40 {
    padding: 10rem; /* 160px */
}

.px-40 {
    padding-left: 10rem; /* 160px */
    padding-right: 10rem; /* 160px */
}

.py-40 {
    padding-top: 10rem; /* 160px */
    padding-bottom: 10rem; /* 160px */
}

.ps-40 {
    padding-inline-start: 10rem; /* 160px */
}

.pe-40 {
    padding-inline-end: 10rem; /* 160px */
}

.pt-40 {
    padding-top: 10rem; /* 160px */
}

.pr-40 {
    padding-right: 10rem; /* 160px */
}

.pb-40 {
    padding-bottom: 10rem; /* 160px */
}

.pl-40 {
    padding-left: 10rem; /* 160px */
}

.p-44 {
    padding: 11rem; /* 176px */
}

.px-44 {
    padding-left: 11rem; /* 176px */
    padding-right: 11rem; /* 176px */
}

.py-44 {
    padding-top: 11rem; /* 176px */
    padding-bottom: 11rem; /* 176px */
}

.ps-44 {
    padding-inline-start: 11rem; /* 176px */
}

.pe-44 {
    padding-inline-end: 11rem; /* 176px */
}

.pt-44 {
    padding-top: 11rem; /* 176px */
}

.pr-44 {
    padding-right: 11rem; /* 176px */
}

.pb-44 {
    padding-bottom: 11rem; /* 176px */
}

.pl-44 {
    padding-left: 11rem; /* 176px */
}

.p-48 {
    padding: 12rem; /* 192px */
}

.px-48 {
    padding-left: 12rem; /* 192px */
    padding-right: 12rem; /* 192px */
}

.py-48 {
    padding-top: 12rem; /* 192px */
    padding-bottom: 12rem; /* 192px */
}

.ps-48 {
    padding-inline-start: 12rem; /* 192px */
}

.pe-48 {
    padding-inline-end: 12rem; /* 192px */
}

.pt-48 {
    padding-top: 12rem; /* 192px */
}

.pr-48 {
    padding-right: 12rem; /* 192px */
}

.pb-48 {
    padding-bottom: 12rem; /* 192px */
}

.pl-48 {
    padding-left: 12rem; /* 192px */
}

.p-52 {
    padding: 13rem; /* 208px */
}

.px-52 {
    padding-left: 13rem; /* 208px */
    padding-right: 13rem; /* 208px */
}

.py-52 {
    padding-top: 13rem; /* 208px */
    padding-bottom: 13rem; /* 208px */
}

.ps-52 {
    padding-inline-start: 13rem; /* 208px */
}

.pe-52 {
    padding-inline-end: 13rem; /* 208px */
}

.pt-52 {
    padding-top: 13rem; /* 208px */
}

.pr-52 {
    padding-right: 13rem; /* 208px */
}

.pb-52 {
    padding-bottom: 13rem; /* 208px */
}

.pl-52 {
    padding-left: 13rem; /* 208px */
}

.p-56 {
    padding: 14rem; /* 224px */
}

.px-56 {
    padding-left: 14rem; /* 224px */
    padding-right: 14rem; /* 224px */
}

.py-56 {
    padding-top: 14rem; /* 224px */
    padding-bottom: 14rem; /* 224px */
}

.ps-56 {
    padding-inline-start: 14rem; /* 224px */
}

.pe-56 {
    padding-inline-end: 14rem; /* 224px */
}

.pt-56 {
    padding-top: 14rem; /* 224px */
}

.pr-56 {
    padding-right: 14rem; /* 224px */
}

.pb-56 {
    padding-bottom: 14rem; /* 224px */
}

.pl-56 {
    padding-left: 14rem; /* 224px */
}

.p-60 {
    padding: 15rem; /* 240px */
}

.px-60 {
    padding-left: 15rem; /* 240px */
    padding-right: 15rem; /* 240px */
}

.py-60 {
    padding-top: 15rem; /* 240px */
    padding-bottom: 15rem; /* 240px */
}

.ps-60 {
    padding-inline-start: 15rem; /* 240px */
}

.pe-60 {
    padding-inline-end: 15rem; /* 240px */
}

.pt-60 {
    padding-top: 15rem; /* 240px */
}

.pr-60 {
    padding-right: 15rem; /* 240px */
}

.pb-60 {
    padding-bottom: 15rem; /* 240px */
}

.pl-60 {
    padding-left: 15rem; /* 240px */
}

.p-64 {
    padding: 16rem; /* 256px */
}

.px-64 {
    padding-left: 16rem; /* 256px */
    padding-right: 16rem; /* 256px */
}

.py-64 {
    padding-top: 16rem; /* 256px */
    padding-bottom: 16rem; /* 256px */
}

.ps-64 {
    padding-inline-start: 16rem; /* 256px */
}

.pe-64 {
    padding-inline-end: 16rem; /* 256px */
}

.pt-64 {
    padding-top: 16rem; /* 256px */
}

.pr-64 {
    padding-right: 16rem; /* 256px */
}

.pb-64 {
    padding-bottom: 16rem; /* 256px */
}

.pl-64 {
    padding-left: 16rem; /* 256px */
}

.p-72 {
    padding: 18rem; /* 288px */
}

.px-72 {
    padding-left: 18rem; /* 288px */
    padding-right: 18rem; /* 288px */
}

.py-72 {
    padding-top: 18rem; /* 288px */
    padding-bottom: 18rem; /* 288px */
}

.ps-72 {
    padding-inline-start: 18rem; /* 288px */
}

.pe-72 {
    padding-inline-end: 18rem; /* 288px */
}

.pt-72 {
    padding-top: 18rem; /* 288px */
}

.pr-72 {
    padding-right: 18rem; /* 288px */
}

.pb-72 {
    padding-bottom: 18rem; /* 288px */
}

.pl-72 {
    padding-left: 18rem; /* 288px */
}

.p-80 {
    padding: 20rem; /* 320px */
}

.px-80 {
    padding-left: 20rem; /* 320px */
    padding-right: 20rem; /* 320px */
}

.py-80 {
    padding-top: 20rem; /* 320px */
    padding-bottom: 20rem; /* 320px */
}

.ps-80 {
    padding-inline-start: 20rem; /* 320px */
}

.pe-80 {
    padding-inline-end: 20rem; /* 320px */
}

.pt-80 {
    padding-top: 20rem; /* 320px */
}

.pr-80 {
    padding-right: 20rem; /* 320px */
}

.pb-80 {
    padding-bottom: 20rem; /* 320px */
}

.pl-80 {
    padding-left: 20rem; /* 320px */
}

.p-96 {
    padding: 24rem; /* 384px */
}

.px-96 {
    padding-left: 24rem; /* 384px */
    padding-right: 24rem; /* 384px */
}

.py-96 {
    padding-top: 24rem; /* 384px */
    padding-bottom: 24rem; /* 384px */
}

.ps-96 {
    padding-inline-start: 24rem; /* 384px */
}

.pe-96 {
    padding-inline-end: 24rem; /* 384px */
}

.pt-96 {
    padding-top: 24rem; /* 384px */
}

.pr-96 {
    padding-right: 24rem; /* 384px */
}

.pb-96 {
    padding-bottom: 24rem; /* 384px */
}

.pl-96 {
    padding-left: 24rem; /* 384px */
}

.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
}

.grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
}

.grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
}

.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-cols-none {
    grid-template-columns: none;
}

.grid-cols-subgrid {
    grid-template-columns: subgrid;
}

.col-auto {
    grid-column: auto;
}

.col-span-1 {
    grid-column: span 1 / span 1;
}

.col-span-2 {
    grid-column: span 2 / span 2;
}

.col-span-3 {
    grid-column: span 3 / span 3;
}

.col-span-4 {
    grid-column: span 4 / span 4;
}

.col-span-5 {
    grid-column: span 5 / span 5;
}

.col-span-6 {
    grid-column: span 6 / span 6;
}

.col-span-7 {
    grid-column: span 7 / span 7;
}

.col-span-8 {
    grid-column: span 8 / span 8;
}

.col-span-9 {
    grid-column: span 9 / span 9;
}

.col-span-10 {
    grid-column: span 10 / span 10;
}

.col-span-11 {
    grid-column: span 11 / span 11;
}

.col-span-12 {
    grid-column: span 12 / span 12;
}

.col-span-full {
    grid-column: 1 / -1;
}

.col-start-1 {
    grid-column-start: 1;
}

.col-start-2 {
    grid-column-start: 2;
}

.col-start-3 {
    grid-column-start: 3;
}

.col-start-4 {
    grid-column-start: 4;
}

.col-start-5 {
    grid-column-start: 5;
}

.col-start-6 {
    grid-column-start: 6;
}

.col-start-7 {
    grid-column-start: 7;
}

.col-start-8 {
    grid-column-start: 8;
}

.col-start-9 {
    grid-column-start: 9;
}

.col-start-10 {
    grid-column-start: 10;
}

.col-start-11 {
    grid-column-start: 11;
}

.col-start-12 {
    grid-column-start: 12;
}

.col-start-13 {
    grid-column-start: 13;
}

.col-start-auto {
    grid-column-start: auto;
}

.col-end-1 {
    grid-column-end: 1;
}

.col-end-2 {
    grid-column-end: 2;
}

.col-end-3 {
    grid-column-end: 3;
}

.col-end-4 {
    grid-column-end: 4;
}

.col-end-5 {
    grid-column-end: 5;
}

.col-end-6 {
    grid-column-end: 6;
}

.col-end-7 {
    grid-column-end: 7;
}

.col-end-8 {
    grid-column-end: 8;
}

.col-end-9 {
    grid-column-end: 9;
}

.col-end-10 {
    grid-column-end: 10;
}

.col-end-11 {
    grid-column-end: 11;
}

.col-end-12 {
    grid-column-end: 12;
}

.col-end-13 {
    grid-column-end: 13;
}

.col-end-auto {
    grid-column-end: auto;
}

.grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
}

.grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
}

.grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr));
}

.grid-rows-5 {
    grid-template-rows: repeat(5, minmax(0, 1fr));
}

.grid-rows-6 {
    grid-template-rows: repeat(6, minmax(0, 1fr));
}

.grid-rows-7 {
    grid-template-rows: repeat(7, minmax(0, 1fr));
}

.grid-rows-8 {
    grid-template-rows: repeat(8, minmax(0, 1fr));
}

.grid-rows-9 {
    grid-template-rows: repeat(9, minmax(0, 1fr));
}

.grid-rows-10 {
    grid-template-rows: repeat(10, minmax(0, 1fr));
}

.grid-rows-11 {
    grid-template-rows: repeat(11, minmax(0, 1fr));
}

.grid-rows-12 {
    grid-template-rows: repeat(12, minmax(0, 1fr));
}

.grid-rows-none {
    grid-template-rows: none;
}

.grid-rows-subgrid {
    grid-template-rows: subgrid;
}

.row-start-1 {
    grid-row-start: 1;
}

.row-start-2 {
    grid-row-start: 2;
}

.row-start-3 {
    grid-row-start: 3;
}

.row-start-4 {
    grid-row-start: 4;
}

.row-start-5 {
    grid-row-start: 5;
}

.row-start-6 {
    grid-row-start: 6;
}

.row-start-7 {
    grid-row-start: 7;
}

.row-start-8 {
    grid-row-start: 8;
}

.row-start-9 {
    grid-row-start: 9;
}

.row-start-10 {
    grid-row-start: 10;
}

.row-start-11 {
    grid-row-start: 11;
}

.row-start-12 {
    grid-row-start: 12;
}

.row-start-13 {
    grid-row-start: 13;
}

.row-start-auto {
    grid-row-start: auto;
}

.row-end-1 {
    grid-row-end: 1;
}

.row-end-2 {
    grid-row-end: 2;
}

.row-end-3 {
    grid-row-end: 3;
}

.row-end-4 {
    grid-row-end: 4;
}

.row-end-5 {
    grid-row-end: 5;
}

.row-end-6 {
    grid-row-end: 6;
}

.row-end-7 {
    grid-row-end: 7;
}

.row-end-8 {
    grid-row-end: 8;
}

.row-end-9 {
    grid-row-end: 9;
}

.row-end-10 {
    grid-row-end: 10;
}

.row-end-11 {
    grid-row-end: 11;
}

.row-end-12 {
    grid-row-end: 12;
}

.row-end-13 {
    grid-row-end: 13;
}

.row-end-auto {
    grid-row-end: auto;
}

.grid-flow-row {
    grid-auto-flow: row;
}

.grid-flow-col {
    grid-auto-flow: column;
}

.grid-flow-dense {
    grid-auto-flow: dense;
}

.grid-flow-row-dense {
    grid-auto-flow: row dense;
}

.grid-flow-col-dense {
    grid-auto-flow: column dense;
}

.auto-cols-auto {
    grid-auto-columns: auto;
}

.auto-cols-min {
    grid-auto-columns: min-content;
}

.auto-cols-max {
    grid-auto-columns: max-content;
}

.auto-cols-fr {
    grid-auto-columns: minmax(0, 1fr);
}

.auto-rows-auto {
    grid-auto-rows: auto;
}

.auto-rows-min {
    grid-auto-rows: min-content;
}

.auto-rows-max {
    grid-auto-rows: max-content;
}

.auto-rows-fr {
    grid-auto-rows: minmax(0, 1fr);
}

.gap-0 {
    gap: 0px;
}

.gap-x-0 {
    column-gap: 0px;
}

.gap-y-0 {
    row-gap: 0px;
}

.gap-px {
    gap: 1px;
}

.gap-x-px {
    column-gap: 1px;
}

.gap-y-px {
    row-gap: 1px;
}

.gap-0\.5 {
    gap: 0.125rem; /* 2px */
}

.gap-x-0\.5 {
    column-gap: 0.125rem; /* 2px */
}

.gap-y-0\.5 {
    row-gap: 0.125rem; /* 2px */
}

.gap-1 {
    gap: 0.25rem; /* 4px */
}

.gap-x-1 {
    column-gap: 0.25rem; /* 4px */
}

.gap-y-1 {
    row-gap: 0.25rem; /* 4px */
}

.gap-1\.5 {
    gap: 0.375rem; /* 6px */
}

.gap-x-1\.5 {
    column-gap: 0.375rem; /* 6px */
}

.gap-y-1\.5 {
    row-gap: 0.375rem; /* 6px */
}

.gap-2 {
    gap: 0.5rem; /* 8px */
}

.gap-x-2 {
    column-gap: 0.5rem; /* 8px */
}

.gap-y-2 {
    row-gap: 0.5rem; /* 8px */
}

.gap-2\.5 {
    gap: 0.625rem; /* 10px */
}

.gap-x-2\.5 {
    column-gap: 0.625rem; /* 10px */
}

.gap-y-2\.5 {
    row-gap: 0.625rem; /* 10px */
}

.gap-3 {
    gap: 0.75rem; /* 12px */
}

.gap-x-3 {
    column-gap: 0.75rem; /* 12px */
}

.gap-y-3 {
    row-gap: 0.75rem; /* 12px */
}

.gap-3\.5 {
    gap: 0.875rem; /* 14px */
}

.gap-x-3\.5 {
    column-gap: 0.875rem; /* 14px */
}

.gap-y-3\.5 {
    row-gap: 0.875rem; /* 14px */
}

.gap-4 {
    gap: 1rem; /* 16px */
}

.gap-x-4 {
    column-gap: 1rem; /* 16px */
}

.gap-y-4 {
    row-gap: 1rem; /* 16px */
}

.gap-5 {
    gap: 1.25rem; /* 20px */
}

.gap-x-5 {
    column-gap: 1.25rem; /* 20px */
}

.gap-y-5 {
    row-gap: 1.25rem; /* 20px */
}

.gap-6 {
    gap: 1.5rem; /* 24px */
}

.gap-x-6 {
    column-gap: 1.5rem; /* 24px */
}

.gap-y-6 {
    row-gap: 1.5rem; /* 24px */
}

.gap-7 {
    gap: 1.75rem; /* 28px */
}

.gap-x-7 {
    column-gap: 1.75rem; /* 28px */
}

.gap-y-7 {
    row-gap: 1.75rem; /* 28px */
}

.gap-8 {
    gap: 2rem; /* 32px */
}

.gap-x-8 {
    column-gap: 2rem; /* 32px */
}

.gap-y-8 {
    row-gap: 2rem; /* 32px */
}

.gap-9 {
    gap: 2.25rem; /* 36px */
}

.gap-x-9 {
    column-gap: 2.25rem; /* 36px */
}

.gap-y-9 {
    row-gap: 2.25rem; /* 36px */
}

.gap-10 {
    gap: 2.5rem; /* 40px */
}

.gap-x-10 {
    column-gap: 2.5rem; /* 40px */
}

.gap-y-10 {
    row-gap: 2.5rem; /* 40px */
}

.gap-11 {
    gap: 2.75rem; /* 44px */
}

.gap-x-11 {
    column-gap: 2.75rem; /* 44px */
}

.gap-y-11 {
    row-gap: 2.75rem; /* 44px */
}

.gap-12 {
    gap: 3rem; /* 48px */
}

.gap-x-12 {
    column-gap: 3rem; /* 48px */
}

.gap-y-12 {
    row-gap: 3rem; /* 48px */
}

.gap-14 {
    gap: 3.5rem; /* 56px */
}

.gap-x-14 {
    column-gap: 3.5rem; /* 56px */
}

.gap-y-14 {
    row-gap: 3.5rem; /* 56px */
}

.gap-16 {
    gap: 4rem; /* 64px */
}

.gap-x-16 {
    column-gap: 4rem; /* 64px */
}

.gap-y-16 {
    row-gap: 4rem; /* 64px */
}

.gap-20 {
    gap: 5rem; /* 80px */
}

.gap-x-20 {
    column-gap: 5rem; /* 80px */
}

.gap-y-20 {
    row-gap: 5rem; /* 80px */
}

.gap-24 {
    gap: 6rem; /* 96px */
}

.gap-x-24 {
    column-gap: 6rem; /* 96px */
}

.gap-y-24 {
    row-gap: 6rem; /* 96px */
}

.gap-28 {
    gap: 7rem; /* 112px */
}

.gap-x-28 {
    column-gap: 7rem; /* 112px */
}

.gap-y-28 {
    row-gap: 7rem; /* 112px */
}

.gap-32 {
    gap: 8rem; /* 128px */
}

.gap-x-32 {
    column-gap: 8rem; /* 128px */
}

.gap-y-32 {
    row-gap: 8rem; /* 128px */
}

.gap-36 {
    gap: 9rem; /* 144px */
}

.gap-x-36 {
    column-gap: 9rem; /* 144px */
}

.gap-y-36 {
    row-gap: 9rem; /* 144px */
}

.gap-40 {
    gap: 10rem; /* 160px */
}

.gap-x-40 {
    column-gap: 10rem; /* 160px */
}

.gap-y-40 {
    row-gap: 10rem; /* 160px */
}

.gap-44 {
    gap: 11rem; /* 176px */
}

.gap-x-44 {
    column-gap: 11rem; /* 176px */
}

.gap-y-44 {
    row-gap: 11rem; /* 176px */
}

.gap-48 {
    gap: 12rem; /* 192px */
}

.gap-x-48 {
    column-gap: 12rem; /* 192px */
}

.gap-y-48 {
    row-gap: 12rem; /* 192px */
}

.gap-52 {
    gap: 13rem; /* 208px */
}

.gap-x-52 {
    column-gap: 13rem; /* 208px */
}

.gap-y-52 {
    row-gap: 13rem; /* 208px */
}

.gap-56 {
    gap: 14rem; /* 224px */
}

.gap-x-56 {
    column-gap: 14rem; /* 224px */
}

.gap-y-56 {
    row-gap: 14rem; /* 224px */
}

.gap-60 {
    gap: 15rem; /* 240px */
}

.gap-x-60 {
    column-gap: 15rem; /* 240px */
}

.gap-y-60 {
    row-gap: 15rem; /* 240px */
}

.gap-64 {
    gap: 16rem; /* 256px */
}

.gap-x-64 {
    column-gap: 16rem; /* 256px */
}

.gap-y-64 {
    row-gap: 16rem; /* 256px */
}

.gap-72 {
    gap: 18rem; /* 288px */
}

.gap-x-72 {
    column-gap: 18rem; /* 288px */
}

.gap-y-72 {
    row-gap: 18rem; /* 288px */
}

.gap-80 {
    gap: 20rem; /* 320px */
}

.gap-x-80 {
    column-gap: 20rem; /* 320px */
}

.gap-y-80 {
    row-gap: 20rem; /* 320px */
}

.gap-96 {
    gap: 24rem; /* 384px */
}

.gap-x-96 {
    column-gap: 24rem; /* 384px */
}

.gap-y-96 {
    row-gap: 24rem; /* 384px */
}




/* estilos de los DIVS del MASTER PAGE*/

#contenedor {
    width: 100%;
}

#cabecera {
    width: 100%;
    position: fixed;
    display:grid;
    grid-template-columns: repeat(3,minmax(0,1fr)) ;
    grid-template-rows :100%;
    top: 0;
    height:56px;
    background-color:var(--color-gray-50);
    padding:.5rem;
    box-shadow:0 0 4px 0 gray;
    & .logo{
        & img{
                 height:100%;
             }
        
      }
    & .header-title{
        justify-self:center;
    }
}

#cuerpo {
    height: 100%;
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
    border-right-style: groove;
    border-left-style: groove;
    border-right-width: thin;
    border-left-width: thin;
    border-right-color: #266886;
    border-left-color: #266886;
}


#pie {
    height: 67px;
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
    background-image: url( '../Images/ImgInicio/fondo_pie.png' ); /*clear: both;*/
    border-right-style: groove;
    border-bottom-style: groove;
    border-left-style: groove;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-right-color: #266886;
    border-bottom-color: #266886;
    border-left-color: #266886;
    font-family: sans-serif;
    font-weight: 300;
    color: #FFFFFF;
    position: fixed;
    bottom: 0;
    z-index: 100; /* Depende el valor segun las capas flotantes que tengas */
    left: 0;
}

#titulo {
    font-family: 'Pathway Gothic One', sans-serif;
    font-weight: 600; /*text-transform: uppercase;*/
    color: #5C5C5C;
    width: 60%;
    float: left;
    height: 28px;
    font-size: 26pt;
    vertical-align: middle;
    text-align: center;
}



/*Encabezado de la tabla en fondo azul oscuro degradado*/
.tabla th {
    font-family: Pathway Gothic One, sans-serif;
    font-family: 'Agency FB';
    font-weight: 300;
    text-transform: uppercase;
    background-color: #266886;
    color: #FFFFFF;
    height: 28px;
    font-size: 12pt;
    vertical-align: middle;
    text-align: center;
}

/*Detalle de la tabla en fondo azul claro*/
.tabla .modo1 {
    font-family: Pathway Gothic One, sans-serif;
    font-weight: 400; /*text-transform: uppercase;*/
    background-color: #FFFFFF;
    color: #5C5C5C;
    height: 0px;
    font-size: 12pt;
    text-align: left;
    background-repeat: repeat-x;
    border-top: solid 0px #FFFFFF;
    border-bottom: solid 0px #FFFFFF;
    border-left: solid 0px #FFFFFF;
    border-right: solid 0px #FFFFFF; /*font-size: 9pt; 	font-weight: normal; 	background-image: url('../Images/fondo_tr00.png' ); 	color: #34484E; 	font-family: Calibri, Trebuchet MS, Arial; 	text-align: left;*/
}

/*Detalle de la tabla en fondo azul claro*/
.tabla .modo3 {
    font-family: 'Pathway Gothic One', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    background-color: #B7B7B7;
    color: BLUE;
    height: 0px;
    font-size: 12pt;
    text-align: left;
    background-repeat: repeat-x; /*border-top: solid 0px #FFFFFF; 	border-bottom: solid 0px #FFFFFF; 	border-left: solid 0px #FFFFFF; 	border-right: solid 0px #FFFFFF; */ /*font-size: 9pt; 	font-weight: normal; 	background-image: url('../Images/fondo_tr00.png' ); 	color: #34484E; 	font-family: Calibri, Trebuchet MS, Arial; 	text-align: left;*/
}


.overlay {
    padding: 5px;
    z-index: 100;
    width: 1500px;
    height: 1000px;
    position: absolute;
    left: 1px;
    top: 1px;
    background-color: #ffff;
    -moz-opacity: 0.75;
    opacity: 0.90;
    filter: alpha(opacity=75);
    font-family: Tahoma;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
}


/*Encabezado de la tabla hija en fondo cafe claro degradado*/
.tabla1 th {
    font-family: 'Pathway Gothic One', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    background-color: #B7B7B7;
    color: #FFFFFF;
    height: 28px;
    font-size: 12pt;
    vertical-align: middle;
    text-align: center;
}

/*Detalle de la tabla hija en fondo amarillo claro*/
.tabla1 .modo2 {
    font-family: 'Pathway Gothic One', sans-serif;
    font-weight: 400; /*text-transform: uppercase;*/
    background-color: #FFFFFF;
    color: #5C5C5C;
    height: 0px;
    font-size: 12pt;
    text-align: left;
    background-repeat: repeat-x;
    border-top: solid 1px #FFFFFF;
    border-bottom: solid 1px #FFFFFF;
    border-left: solid 1px #FFFFFF;
    border-right: solid 1px #FFFFFF;
}

.lblInfo {
    /*text-transform: uppercase;*/
    font-family: 'Pathway Gothic One', sans-serif;
    font-size: small;
    font-weight: bold;
    font-style: normal;
    color: #000000;
}

.lblRotulo {
    /*text-transform: uppercase;*/
    font-family: 'Pathway Gothic One', sans-serif;
    font-size: small;
    font-weight: bold;
    font-style: italic;
    color: #008080;
}



/*----------------------------------------------------------
ESTAS SON LAS DEFINICIONES GENERALES DE ESTILOS PARA EL PROYECTO
ACADEMICS TECNICO
----------------------------------------------------------*/

.tdinfo {
    border-bottom: #d0cec6 thin solid;
    vertical-align: top;
    background-color: red;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
}

.page {
    /*Define el tamaño de presentación de la página*/ /*width: 1000px; Ancho de la página 80%;*/
    margin-left: auto;
    margin-right: auto;
    color: #000000;
    padding: 0px;
}

    .page table /*Tabla externa*/ {
        border-color: #CCCCCC;
        border-style: none;
        width: 100%; /*Area de trabajo dado por la tabla principal*/
    }

    .page td {
        /*background-color:#FFFFCC;*/
        vertical-align: top;
        height: 12px;
    }

    .page th {
        /*background-color:#FFFFCC;*/
        vertical-align: top;
        background-image: url(../Imagenes/Cabezote.gif);
        font-family: Calibri, Tahoma, Verdana, Helvetica, Sans-Serif, Arial;
        font-size: 14px;
    }

body {
    font-family: 'Pathway Gothic One', sans-serif;
    /*font-family: Calibri, Tahoma, Verdana, Helvetica, Sans-Serif, Arial;*/
    font-size: 12px;
}

/*CAJAS DE TEXTO*/
input[type="text"] {
    /*font-family: 'Pathway Gothic One' , sans-serif;*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #5C5C5C;
    width: 98%;
}

input[type="date"] {
    background-color: #F5F5F5; /*Color del fondo de la caja de texto*/
    /*font-family: 'Pathway Gothic One' , sans-serif;*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #5C5C5C;
    width: 98%;
}

input[type="email"] {
    border: 1px solid #266884;
    background-color: #F5F5F5; /*Color del fondo de la caja de texto*/
    /*font-family: 'Pathway Gothic One' , sans-serif;*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #5C5C5C;
    width: 98%;
}

input[type="phone"] {
    border: 1px solid #266884;
    background-color: #F5F5F5; /*Color del fondo de la caja de texto*/
    /*font-family: 'Pathway Gothic One' , sans-serif;*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #5C5C5C;
    width: 98%;
}

Soporte: input[type="Email"] {
    border: 1px solid #B7B7B7;
    background-color: #F5F5F5;
     font-family: 'Source Sans Pro', sans-serif;
    font-size: 12px;
    color: #5C5C5C;
}

select {
    border: 1px solid #B7B7B7;
    background-color: #F5F5F5;
    /*font-family: 'Pathway Gothic One' , sans-serif;*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #5C5C5C;
    text-align: left;
    margin-bottom: 3px;
}

textarea {
    border: 1px;
    background-color: #F5F5F5; /*Color del fondo de la caja de texto*/
    /*font-family: 'Pathway Gothic One' , sans-serif;*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    width: 97%;
    color: #5C5C5C;
    border-top: solid 1px #B7B7B7;
    border-bottom: solid 1px #B7B7B7;
    border-left: solid 1px #B7B7B7;
    border-right: solid 1px #B7B7B7;
}

input[type="password"] {
    border: 1px; /*border-color: #BBBBBB;*/ /*border-style:ridge;*/
    color: #000000;
    background-color: #F5F5F5;
    font-family: Calibri, Arial;
    font-size: 12px;
    width: 95%;
}

label {
    color: #000000;
}


.CriterioF {
    color: #0000FF;
}


.CriterioR {
    color: #006600;
}


.CriterioD {
    color: #FF0000;
}

.NotaApruebafalse {
    background-color: #FFFF99;
    color: #000000;
    font-weight: normal;
}

.PeriodoSeleccionado {
    background-color: #00FF00;
    color: #000000;
    font-weight: normal;
}

.NotaFinalTd {
    background-color: Blue; /* #FF3300;*/
    color: #000000;
    font-weight: normal;
}

.Fallas {
    background-color: #FF66FF;
    color: #000000;
    font-weight: normal;
}


/* Login
---------------------------------------------------------*/
.TablaLogin {
    /*border-bottom-style:groove;  	border-left-style:groove;  	border-right-style:groove; 	border-top:groove;*/
}

/*INICIO*/
.inicio {
}




/* INTERNA
----------------------------------------------------------*/
.interna1 td {
    border-bottom: #d0cec6 thin solid;
    vertical-align: top;
    background-color: #fbfbfb;
    font-size: 12px;
    vertical-align: top;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
}

.interna1 th {
    padding: 0px;
    text-align: center;
    font-size: small;
    background-image: url(../images/FondoTH.gif);
    color: White; /*Color de la letra*/
    height: 20px;
    font-family: Calibri, Tahoma, Verdana, Helvetica, Sans-Serif, Arial;
    font-size: 15px;
}

.interna input[type="text"] {
    border-bottom: #006699 1px solid;
    border-left: #006699 1px solid;
    background-color: #f5f5f5;
    width: 98%;
    font-family: Calibri, Arial;
    color: #000000;
    font-size: 12px;
    vertical-align: middle;
    border-top: #006699 1px solid;
    border-right: #006699 1px solid; /*text-transform :uppercase;*/
}

.interna select {
    border-bottom: #006699 1px solid;
    border-left: #006699 1px solid;
    border-top: #006699 1px solid;
    border-right: #006699 1px solid;
    background-color: #f5f5f5;
    width: 98%;
    font-family: Calibri, Arial;
    color: #000000;
    font-size: 12px;
}

.interna textarea {
    border-bottom: #006699 1px solid;
    border-left: #006699 1px solid;
    background-color: #f5f5f5;
    width: 98%;
    font-family: Calibri, Arial;
    color: #000000;
    font-size: 12px;
    vertical-align: middle;
    border-top: #006699 1px solid;
    border-right: #006699 1px solid;
}


/*links*/
a:link {
    /* color: #b5b0b0;*/
    color: #000000;
}

a:visited {
    /*color: #b5b0b0;*/
    color: #000000;
}

a:hover {
    color: RED;
}

a:active {
    color: #FFFFFF; /*Color que toma al momento del click*/
}


/* HEADINGS   
----------------------------------------------------------*/

h1 {
    font-size: 10px;
    padding-bottom: 0;
    margin-bottom: 0;
}

h2 {
    padding: 0 0 10px 0;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

/* PAGOS   
----------------------------------------------------------*/

.Negro {
    font-weight: bold;
    font-size: 12px;
    color: black;
    font-family: Verdana;
}

.Rojo {
    font-weight: bold;
    font-size: 12px;
    color: red;
    font-family: Verdana;
}

.Azul {
    font-weight: bold;
    font-size: 12px;
    color: blue;
    font-family: Verdana;
}

/*ENCUESTA
===========================================================================*/

.PreguntaGrupo {
    font-family: 'Pathway Gothic One', sans-serif;
    font-weight: 100;
    font-size: 11pt;
    color: #000000;
    border: 1px solid black;
    background-color: #B7B7B7; /* #FF3300;*/
}

.RespuestaTD {
    border-style: groove;
}

.Introduccion {
    font-family: 'Pathway Gothic One', sans-serif;
    font-weight: 200;
    height: 20px;
    font-size: 11pt;
    vertical-align: middle;
}

.OpcionesRespuesta {
    font-family: 'Pathway Gothic One', sans-serif;
    font-weight: 100;
    font-size: 11pt;
    border: 1px solid black;
    background-color: #B7B7B7; /* #FF3300;*/
    color: #000000;
    text-align: center;
}

.Pregunta {
    font-family: 'Pathway Gothic One', sans-serif;
    font-weight: normal;
    font-size: 11pt;
    font-weight: normal;
    border-bottom: 1pt solid black;
}
/**************NUEVOS ESTILOS AC***************/
.CMB {
    font-family: 'Pathway Gothic One', sans-serif;
    height: 30px;
    border: 1px solid #19749C;
    font-weight: bold;
}

.TXT {
    font-family: 'Pathway Gothic One', sans-serif;
    height: 30px;
    border: 1px solid #16546F;
}

.SPAN {
    color: #2C73A5;
}

.espacio {
    margin-top: 10px;
}

.imgProgrees {
    z-index: 999;
    margin-top: 50px;
    position: fixed;
    height: 80px;
    width: 80px;
    margin-left: 60px;
    background-color: #E8EFF6;
    border: 2px dotted #266884;
    border-radius: 100px;
}
/**css encuesta**/
.imgEncuesta {
    height: 120px;
    width: 120px;
    border: 1px dotted #266884;
    vertical-align: bottom;
}
/*css consolidadoNovedadPeriodo*/
.divFechasDetalle {
    position: absolute;
    z-index: 1;
    background-color: rgba(134, 137, 140, 0.81);
    margin-left: 27%;
    margin-top: 4.5%;
    width: 30%;
    height: 46%;
}

.divFechasClose {
    font-weight: bolder;
    text-decoration: none;
    margin-left: 92%;
    position: absolute;
    margin-top: 2%;
    background-color: #000000;
    padding: 0px 5px 2px 5px;
    border-radius: 100%;
    color: #FFFFFF;
    top: -3px;
}

.divFechasTitulo {
    font-size: 30px;
    font-weight: bolder;
    text-align: center;
    color: #FFFFFF;
    margin-top: 2%;
}

.divHrFecha {
    border: 1px dotted #266886;
}

.divFecha {
    text-align: center;
    font-weight: bold;
    color: #006699;
}
/*CSS div contador Js caracteres*/
.divContador {
    font-size: 15px;
    font-weight: bold;
}
/****************VALIDATION GROUP********/
.validationGroupNovedad {
    margin-left: -10%;
    width: 25%;
    color: #fff;
    font-size: medium;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.80);
    top: 1em;
    border: 2px dotted #266884;
    z-index: 999;
    overflow-y: scroll;
    height: 20%;
    border-radius: 2%;
    overflow-x: hidden;
}

.validationGroupNovedadHr {
    width: 100%;
    border: 2px dotted #266884;
}

.validationGroupNovedad::-webkit-scrollbar {
    width: 10px;
}

.validationGroupNovedad::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.validationGroupNovedad::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #266886 0%,black 50%,#000000 50%,#000000 50%,#266886 100%);
    border-radius: 10px 10px;
    border: 1px double #fff;
    outline: 1px solid slategrey;
}

.required-field-validator {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    color: var(--red-500);
    margin-left: 8px;
    line-height: normal;
}

    .required-field-validator::after {
        content: "*";
    }

    .required-field-validator[style*="visibility: hidden;" ],
    .required-field-validator[style*="visibility:hidden;" ] {
        display: none;
    }

/* Pestañas */

div.lash-wrapper {
    position: relative;
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 16px;
    & button

{
    margin: 0;
    height: fit-content;
    padding: 8px 16px;
}

}

ul.lash-carousel {
    padding: 0;
    margin: 0;
    display: flex;
    overflow: scroll;
    flex-grow: 0;
}

.no-scroll {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

    .no-scroll::-webkit-scrollbar {
        display: none; /* Chrome, Safari and Opera */
    }

.lash-buttons {
    display: flex;
    /*width: fit-content;*/
    gap: 4px;
    justify-content: flex-end;
    flex-grow: 1;
    border-bottom: solid 1px var(--color-gray-400);
}

li:has( .lash-item) {
    list-style: none;
    display: inline-flex;
    & label

{
    margin: 0;
    line-height: 200%;
    white-space: nowrap;
}

}

.lash-item {
    color: var(--color-primary-500);
    padding: 10px 14px;
    cursor: pointer;
    border-top: solid 1px #88888800;
    border-bottom: solid 1px var(--color-gray-400);
    transition: all .2s;
    border-top: solid 1px #88888800;
    border-right: solid 1px #88888800;
    border-left: solid 1px #88888800;
}

    .lash-item:hover {
        color: var(--color-primary-700);
    }

    .lash-item.active {
        color: var(--color-gray-700);
        border-top: solid 1px var(--color-gray-400);
        border-right: solid 1px var(--color-gray-400);
        border-left: solid 1px var(--color-gray-400);
        border-radius: 4px 4px 0 0;
    }

.field-form {
    font-size: 16px;
    &:has(.switch > input:enabled)

{
    & .flex > span

{
    display: none;
}

}
}

.field-form div {
    display: flex;
    background-color: var(--color-gray-50);
    flex-direction: row-reverse;
    border-radius: 4px;
    & input, select

{
    width: 100%;
    border: 1px solid var(--color-primary-600);
    border-radius: 4px;
    background-color: var(--color-gray-50);
}

& input:disabled, select:disabled {
    padding-inline: .3em;
}

& select:disabled {
    -webkit-appearance: none;
    -moz-appearance: none;
}

&:has(.switch) {
    padding-inline: 12px;
    height: 30px;
    & span

{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
}

}
}

.row-table {
    display: flex;
    font-size: 16px;
    background-color: var(--color-gray-50);
    border: 1px 0 1px 0 solid var(--color-gray-400);
    width: 100%;
    justify-content: space-between;
    padding: .3em 1em;
    align-items: center;
    border-top: 1px solid var(--color-gray-200);
    border-bottom: 1px solid var(--color-gray-200);
    & label

{
    margin: 0;
}

& div {
    width: 60%;
    display: flex;
    justify-content: flex-end;
    height: 30px;
    & select:disabled

{
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    text-align: right;
}

}

&:has(.switch) {
    & span

{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
}

}

&:has(.switch > input:enabled) {
    & div > span

{
    display: none;
}

}
}

.input-label + .svg {
    display: none;
}

.input-label {
    padding: .3rem;
}

.row-table:has(.input-label:disabled) {
    & .input-label:disabled

{
    text-align: right;
}

}

.input-label:disabled {
    background-color: transparent;
    color: var(--color-gray-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid #00000000;
    cursor: pointer;
    & + svg

{
    display: block;
    color: var(--color-primary-500);
    cursor: pointer;
    &:hover

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

}
}

.imgPreview {
    border: dashed 2px var(--color-gray-400);
    border-radius: 6px;
    width: 110px;
    object-fit: contain;
    aspect-ratio: 4/4;
}

.wrapper-upload-file:has(.file-upload:enabled) {
    cursor: pointer;
    display: flex;
    &:hover .file-upload:enabled + .hover-upload-file

{
    display: flex;
}

}

.hover-upload-file {
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #88888899;
    align-items: center;
    justify-content: center;
    display: none;
    & .icon

{
    background-color: var(--color-primary-700);
    color: var(--color-white);
    padding: .5rem;
    border-radius: 4px;
}

}

.pointer {
    cursor: pointer;
}
/*Flex*/
flex-inline {
    display: inline-flex;
}

.flex-row {
    flex-direction: row;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.justify-center {
    justify-content: left
}

.justify-end {
    justify-content: flex-end;
}

.justify-start {
    justify-content: flex-start;
}

.space-around {
    justify-content: space-around;
}

.space-between {
    justify-content: space-between;
}
/* Contenedor Flexbox con dirección de fila (horizontal) */
.flex-col {
    flex-direction: column;
}

/* Alinear elementos Flexbox al centro horizontalmente y verticalmente */
.flex-center {
    justify-content: center;
    align-items: center;
}

/* Alinear elementos Flexbox al centro horizontalmente */
.flex-center-h.flex {
    justify-content: center;
}

/* Alinear elementos Flexbox al centro verticalmente */
.flex-center-v.flex {
    align-items: center;
}

.flex-center-h.flex-col {
    align-items: center;
}

.flex-center-v.flex-col {
    align-items: center;
}
/* Espaciado uniforme entre elementos Flexbox */
.flex-space {
    justify-content: space-between;
}

/* Estirar elementos Flexbox para ocupar el espacio disponible */
.flex-stretch {
    align-items: stretch;
}

/* Align text to the left */
.text-left {
    text-align: left;
}

/* Center-align text */
.text-center {
    text-align: center;
}

/* Align text to the right */
.text-right {
    text-align: right;
}

/* Justify text */
.text-justify {
    text-align: justify;
}

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

.gap-16 {
    gap: 16px;
}

/*Aling self*/


.flex {
    display: flex;
    & .self-start-y

{
    justify-self: start;
}

}

.flex-col {
    & .self-start-y

{
    align-self: flex-start;
}

}

.self-center-h {
    justify-self: center;
}

.self-center-v {
    align-self: center;
}

.self-center-h.flex.col {
    align-self: center;
}

.self-center-V.flex.col {
    justify-self: center;
}

.layout-12{
    display:grid;
    gap:20px;
    grid-template-columns: repeat(12,minmax(0,1fr)) ;
    padding:48px 0 100px 0;
    margin-inline:42px;
    margin-top:80px;
}
    .layout-12{
        & *{
              margin:0;
              }
    }
    .input-field {
        display: flex;
        flex-direction: column;
        width: 100%;
        & label
{
    font-size: 16px;
    font-family: Pathway Extreme, sans-serif;
    font-weight: 600;
    line-height: 200%;
    color:var(--color-gray-700);
}
& input:is([type="text"],[type="password"], [type="date"], [type="email"],[type="number"]), select.CMB {
    padding: 6px 12px;
    font-size: 16px;
    font-family: Pathway Extreme, sans-serif;
    font-weight: 400;
    height: auto;
    width: auto;
    border: solid 1px var(--color-primary-700);
    border-radius: 4px;
}

& .TXT{
    height:auto;
}

}

.text-item {
    font-size: 20px;
    font-family: Pathway Extreme, sans-serif;
    font-weight: 600;
    line-height: 160%;
}

.text-normal-semibold {
    font-size: 16px;
    font-family: Pathway Extreme, sans-serif;
    font-weight: 600;
    line-height: 200%;
}

.text-normal-medium {
    font-size: 16px;
    font-family: Pathway Extreme, sans-serif;
    font-weight: 500;
    line-height: 200%;
}

.text-normal-regular {
    font-size: 16px;
    font-family: Pathway Extreme, sans-serif;
    font-weight: 400;
    line-height: 200%;
}
.step{
    display:flex;
    align-items:center;
}
.step:has(.step-tab > input:not(:checked)) { /*Activo*/
    & .step-diamond > path:first-child
    {
    fill: #D8F2F5;
    }
    & .step-diamond > path:last-child {
        fill: #B6E4EB;
    }
    & .step-line > path{
        fill: #B6E4EB;
    }
}


.hidden {
    display: none !important;
}
.CerrarSesion{
    display:flex;
    position:fixed;
    height:100vh;
    width:100vw;
    background-color: rgba(0,0,0,0.5);
    z-index:1000;
    top:0;
    left:0;
    align-items:center;
    justify-content:center;
    color:var(--color-gray-900);
    & .content{
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      background-color:var(--color-gray-100);
      border-radius:8px;
      padding:2rem;
      color:var(--color-gray-700);
    & .timer{
       display:inline-block;
       color:var(--color-error-600);
       width:60px;
    }
   }
}

#ui-datepicker-div:not(:has(div)){
    display:none;
}