@font-face {
    font-family: 'Open Sans';
    src: url('./open-sans/OpenSans-Light.ttf') format('truetype');
    font-style: normal;
    font-weight: 300;
    font-display:block;
}
@font-face {
    font-family: 'Open Sans';
    src: url('./open-sans/OpenSans-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
    font-display:block;
}
@font-face {
    font-family: 'Open Sans';
    src: url('./open-sans/OpenSans-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display:block;
}

@font-face {
    font-family: 'Open Sans';
    src: url('./open-sans/OpenSans-BoldItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 700;
    font-display:block;
} 


html
{
    scroll-behavior: smooth;
}
body
{
    font-family: 'Open Sans'; 
    font-weight:300;
    background: white;
    overflow-x: hidden; 
}

.text-blue
{
    color: #1A58E7;
}

.text-orange
{
    color:#FF6701;
}

.text-aqua
{
    color:#0CAD9A;
}

.text-dark-blue
{
    color:#283176;
}

.text-white
{
    color:white;
}

.text-celeste
{
    color:#238DD4;
}

.text-gray
{
    color:#5E5E5E;
}

.text-light-gray
{
    color:#C4C4C4;
}

.text-red
{
    color:#FF0000;
}

.text-light-aqua
{
    color: #C2F1EB;
}

.fondo-blue 
{
    background-color: #1A58E7;
}

.fondo-light-gray
{
    background-color: #F6F6F6;
}

.fondo-blue-dark
{
    background-color: #283176;
}

.fondo-orange
{
    background-color: #FF6701;
}

.fondo-white
{
    background-color: white;
}

.fondo-aqua
{
    background-color: #33CEBC;
}

.input-uppercase
{
    text-transform: uppercase;
}

.input-lowercase
{
    text-transform: lowercase;
}

.font-style-aviso
{
    font-weight: 500;
    font-style: normal;
    font-size: 12px;
}

.font-size-16
{
    font-size: 16px;
}

.font-size-20
{
    font-size: 20px;
}

.font-size-24
{
    font-size: 24px;
}

.font-size-48
{
    font-size: 48px;
}

.font-size-60
{
    font-size: 60px;
} 

.interlineado-1
{
    line-height : 1em;
}

.interlineado-1-5
{
    line-height : 1.5em;
}


.btn-orange
{
    font-style: normal;
    color: white; 
    letter-spacing: 0.15pt;
    font-size: 12px;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    background-color: #FF6701;
    border-radius: 5px;
    padding: 0.5rem 0.5rem;
}

.btn-orange:hover,
.btn-orange:active,
.btn-orange:visited,
.btn-orange:focus
{
    background-color: #FF6701;
    color: white; 
}



.btn-no-background
{
    font-style: normal;
    color: #5E5E5E; 
    letter-spacing: 0.15pt;
    font-size: 12px;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    background-color: white;
    border-radius: 5px;
    padding: 0.5rem 0.5rem;
    border: 1px solid #5E5E5E;
}

.btn-no-background:hover,
.btn-no-background:active,
.btn-no-background:visited,
.btn-no-background:focus
{
    background-color: white;
    color: #5E5E5E; 
    border: 1.5px solid #5E5E5E
}


.bottones_aqua
{
    font-style: normal;
    color: white; 
    letter-spacing: 0.15pt;
    font-size: 16px;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    background-color: #31CCBA;
    border-radius: 15px;
}
.bottones_aqua:hover,
.bottones_aqua:active,
.bottones_aqua:visited,
.bottones_aqua:focus
{
    background-color: #31CCBA;
    color: white; 
}

.logo-pagadito
{
    max-width: 180px;
}


/*estilo para el lbl del ambiente de trabajo*/
.tpsv{
    background-color: white;
    border: 1px solid #317DDE;
    border-radius: 0 0 10px 10px;
    left: 50%;
    opacity: 1;
    padding: 5px 10px;
    position: absolute;
    top: 0;
    z-index: 10000;
}
.tpsv span{
    color: #317DDE;
    font-weight: bold;
}

/*estilos para los tooltips*/

.icono-help
{
    max-width: 20px;
    cursor: pointer;
}

.tooltip 
{
    position: fixed;
}

.tooltip > .tooltip-arrow
{
    display: none;
}

.tooltip > .tooltip-inner
{
    display: flex;
    justify-content: center;
    background-color: #B2F2ED;
    color: #283176;
    top: -3px;
    right: calc(100% - 649%);
    width: calc(100vh - 50vh);
    font-size: 14px;
    text-align: left;
}


.tooltip.show{
    opacity: 1;
}

.alert{
    --bs-alert-padding-y : 0.5rem;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) 
{ 
    .btn-orange, .btn-no-background
    {
        font-size: 14px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) 
{
    .btn-orange, .btn-no-background
    {
        font-size: 14px;
        margin-top: 13px;
    }

    .tooltip > .tooltip-inner
    {
        right: auto;
    }

    .font-style-aviso
    {
        font-size: 16px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px)   
{
    .btn-orange, .btn-no-background
    {
        font-size: 14px;
    }

    .logo-pagadito
    {
        max-width: 150px;
        margin-top: -8px;
    }
}

/* Large devices (desktops, 1200px and up) */
@media (min-width: 1200px) 
{
    .btn-orange, .btn-no-background
    {
        font-size: 16px;
        border-radius: 15px;
    }

    .logo-pagadito
    {
        max-width: 180px;
        margin-top: -5px;
    }
}

/* Extra Large devices (desktops, 1900px and up) */
@media  (min-width: 1900px) 
{

}

