:root {
    --color-azul-base: #293896;
    --color-azul-lighter: #C5CAE4;
    --color-azul-pastel: #ECF0FF;
    --color-rojo-base: #D9121F;
    --color-rojo-lighter: #FFBBBE;
    --color-rojo-pastel: #FFECEC;
    --color-gris-base: #4D5E71;
    --color-gris-lighter: #BEC8D3;
    --color-gris-pastel: #EDF0F3;
    --color-background: #FFFFFF;
    --color-foreground: #272727;
    --color-extra1: #F8BE16;
    --color-extra1-pastel: #FFF9E5;
    --color-extra2: #595959;
    --color-extra2-pastel: #FAFAFA;
    --color-extra3: #181818;
    --color-divider: #FF0090;
}

@font-face {
    font-family: 'Ubuntu';
    src: url(../fonts/Ubuntu-R.ttf);
}

@font-face {
    font-family: 'Ubuntu';
    font-weight: bold;
    src: url(../fonts/Ubuntu-B.ttf);
}

body{
    font-family: 'Ubuntu', Arial, sans-serif;
}


.contentwrapper{
    min-width: 200px !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    background: rgba(255,255,255,0.8);
    padding: 100px;
    padding-top: 30px;
}

#s4-workspace{
    width: 100% !important;
    max-width: 100% !important;
}

.bordertop{
    background: #FC1D00;
    width: 100%;
    margin-bottom: 50px;
}

.bordertop-inner{
    margin-left: 25%;
    background: #024087;
    height: 10px;
    display: block;
}

.ms-pub-contentLayout{
    min-width: 200px;
}

.ms-table,
.ms-tableCell,
.ms-belltown-table,
.ms-tableRow{
    display: block;
}

body.ms-backgroundImage{
    background: url('../img/fondo_01.png');
    background-size: 100%;
    background-repeat: no-repeat;
}

#contentBox{
    background: transparent;
    width: 100%;
    display: block;
}

.form-label{
    font-weight: bold;
    font-size: 14px;
    color: #FF0000;
    font-family: Ubuntu, Arial, sans-serif;
}

.form-reclamo{
    color: #024087;
    font-family: Ubuntu, Arial, sans-serif;
}

.form-control{
    border-radius: 0 !important;
    border: solid 1px #024087 !important;
}

input[type=password][disabled], input[type=text][disabled], input[type=file][disabled], textarea[disabled], select[disabled],

input[type=password].disabled, input[type=text].disabled, input[type=file].disabled, textarea.disabled, select.disabled,
.sp-peoplepicker-topLevelDisabled, .ms-inputBoxDisabled{
    background-color: #ddd;
}

ul.file-list{
    list-style: none;
    list-style-position: outside;
    margin-top: 5px;
    margin-left: 0;
    padding-left: 0;
}

ul.file-list li{
    display: inline-block;
    background: #eee;
    border: solid 1px #ccc;
    color: #003366;
    padding: 5px;
    margin-right: 5px;
}


ul.file-list li .btn-file-delete{
    color: #f00;
    margin-left: 10px;
}

ul.file-list li .btn-file-delete:hover{
    text-decoration: none;
    cursor: pointer;
}

@media screen and (max-width: 768px){
    .contentwrapper{
        padding: 20px;
    }

    .bordertop{
        background: #FC1D00;
        width: 100%;
        margin-bottom: 20px;
    }

    .contentwrapper{
        background: rgba(255,255,255,0.98);
    }

}

/* HTML: <div class="loader"></div> */
.preloader {
    display: none;
    
    &.show {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: fixed;
        width: 100vw;
        height: 100vh;
        background: rgba(255,255,255,0.8);
        top: 0;
        left: 0;
        z-index: 10;
    }
}



.loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    border: solid 4px var(--color-azul-base);
    border-radius: 50%;
    border-color: var(--color-gris-lighter) var(--color-azul-base);
    animation: l16 1s infinite linear;
}
.loader::before,
.loader::after {
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
}
.loader::before {
    border-color: var(--color-rojo-base) var(--color-azul-base);
    animation: inherit;
    animation-duration: .5s;
    animation-direction: reverse;
}
.loader::after {
    margin: 8px;
}
@keyframes l16 {
    100%{transform: rotate(1turn)}
}