:root {
    --BodyBackgroundColor: whitesmoke;
    --BackGroundShadow: #2a868f;
    --ColorPrimaryLogo: #0061a2;
    --BackGroundBoton: #7F8C8D;
    --HeigthInput: 20px;
    --FontSizeGral: 9pt;
    --ColorTurqueza: #44d9e6;
    --ColorLogoLineMiddle: #2a868f;
    --Encabezado: #333;
}
* {
    font-family: Calibri,SansSerif;
    font-size: var(--FontSizeGral);
    font-style: normal;
    margin: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
}
label {
    margin: 0px;
}
a:link
{
    color:VAR(--ColorPrimaryLogo);
}
.body {
    padding: 0px;
    margin: 0px auto;
    font-size: var(--FontSizeGral);
    background-color: var(--BodyBackgroundColor);
}
.LogoPrincipal {
    transition: all 0.5s ease-in;
}
    .LogoPrincipal:hover {
        transform: scale(1.1);
    }
.ImageLogo {
    width: 150px;
}
.ImageMenu {
    /*height: var(--HeightButton);*/
    animation: rotate_image_menu 2s cubic-bezier(0.38,-0.38, 0.65, 1.35);
}
    .ImageMenu:hover {
        animation: rotate_image_menu 2s cubic-bezier(0.38,-0.38, 0.65, 1.35);
    }
#div_master_alert {
    display: none;
    position: absolute;
    height: 150px;
    width: calc(var(--Widthvw)/3);
    right: 0px;
    top: 50px;
    color: var(--ColorPrimaryLogo);
    background-color: var(--Encabezado);
    z-index: 10000000;
}
@keyframes rotate_image_menu {
    100% {
        transform: rotate(360deg);
    }
}

/*ALINEACION*/
.JustifyContentCenter {
    justify-content: center;
}
.JustifyContentFlexStart {
    justify-content: flex-start;
}
.JustifiContentSpaceBetween
{
    justify-content:space-between;
}
.VerticalAlignMiddle {
    vertical-align: middle;
}
.VerticalAlignTop {
    vertical-align: top;
}
.VerticalAlignTextTop {
    vertical-align: text-top;
}
.alinearDiv {
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    font-variant: small-caps;
    width: 100%;
}
.TextAlignCenter {
    text-align: center;
}
.TextAlignLeft {
    text-align: left;
}
.TextAlignLeftMQCenter {
    text-align: left;
}
.TextAlignRight {
    text-align: right;
}
.TextAlignRightMQCenter {
    text-align: right;
}
.AlignItemsCenter {
    align-items: center;
}
.TextAlignItemsLeftStart {
    align-items: flex-start;
}
/*----------------------------------------------------------------*/

/*BORDER*/
.BorderColorLogoMiddle 
{
    border-color:var(--ColorLogoLineMiddle);
}
.Border1px {
    border: 1px solid var(--ColorLogoLineMiddle);
}
.Border0Bottom {
    border-bottom: 0px;
}
.BorderRadius5px {
    border-radius: 5px;
}
.BorderRadiusTop5px {
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px;
}
.BorderShadow10px {
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0px 0px 15px 5px grey;
}
.BorderShadow5px {
    margin-top: 5px;
    padding: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0px 0px 10px 0px grey;
}
/*----------------------------------------------------------------*/

/*BUTON*/
.boton {
    background: #333333;
    background-image: linear-gradient(to bottom,#282828,#808080);
    border: 1px solid #808080;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: #333333 inset;
    -webkit-box-shadow: #333333;
    -o-box-shadow: 0 5px 5px #333333 inset;
    box-shadow: 0 5px 5px #333333 inset;
    padding: 1px;
    color: white;
    font-weight: normal;
    text-decoration: none;
    text-shadow: 0px -1px 0px #333333;
    width: 120px;
    line-height: var(--HeightButton);
    height: var(--HeightButton);
    font-variant: small-caps;
    font-family: Calibri;
    font-size: 11pt;
    cursor: pointer;
    align-items: center;
    transition: all 0.5s ease-in;
}
    .boton:hover {
        background: #272727;
        background-image: linear-gradient(to top,#333333,#000000);
        cursor: pointer;
        color: var(--ColorLogoLineMiddle);
        transform: scale(1.05);
    }
/*----------------------------------------------------------------*/

/*CURSOR*/
.CursorPointer {
    cursor: pointer;
}
/*----------------------------------------------------------------*/

/*DIMENSIONES*/
.Height100vh {
    height: 100vh;
}
.Height100 {
    height: 100%;
}
.HeightInput {
    height: var(--HeigthInput);
}
.Width100 {
    width: 100%;
}
.Width98 {
    width: 98%;
}
.Width90 {
    width: 90%;
}
.Width50 {
    width: 50%;
}
.Width10 {
    width: 10%;
}
.Width48 {
    width: 48%;
}
/*----------------------------------------------------------------*/

/*DISPLAY - FLOAT*/
.DisplayFlex {
    display: flex;
}
.DisplayInlineFlex {
    display: inline-flex;
}
.AlignSelfCenter {
    align-self: center;
}
.FlexShrink0 {
    flex-shrink: 0;
}
.FlexGrow0 {
    flex-grow: 0;
}
.FlexGrow1 {
    flex-grow: 1;
}
.FlexBasis100
{
    flex-basis:100%;
}
.FlexWrap 
{
    flex-wrap:wrap;
}
.FloatLeftRelative {
    position: relative;
    float: left;
}
.FloatRightRelative {
    position: relative;
    float:right;
}
.FloatNoneRelative {
    position: relative;
    float: none;
}
.DisplayBlock {
    display: block;
}
.DisplayNone {
    display: none;
}
.DisplayInline {
    display: inline;
}
.DisplayInlineBlock {
    display: inline-block;
}
.ClearBoth {
    clear: both;
}
/*----------------------------------------------------------------*/

.DivTabsActive {
    background-color: var(--ColorPrimaryLogo);
    color: white;
}
.DivTabs {
    background-color: var(--BodyBackgroundColor);
    color: var(--ColorPrimaryLogo);
    /*transition: all 0.5s ease-in;*/
}
    .DivTabs:hover {
        background-color: var(--ColorPrimaryLogo);
        color: white;
    }
.Tablas {
    border-color: inherit;
    border-style: none;
    border-width: 0px;
    padding: 0px;
    margin: 0px auto;
    font-size: 10pt;
    font-family: Calibri;
    border-spacing: 0px;
    border-collapse: collapse;
}
.EncabezadosTablas {
    text-align: center;
    font-variant: small-caps;
    font-size: 11pt;
    font-family: Calibri;
    font-weight: bold;
    background-color: var(--Encabezado);
    color: #a5bacf;
    margin: 2px;
    vertical-align: middle;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: #a5bacf 0.2em 0.2em 0.2em;
    /*height: 24px;*/
    line-height: 24px;
}
.alinearPaneles {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    vertical-align: middle;
    font-size: 10pt;
    font-family: Calibri;
    font-variant: small-caps;
    background-color: var(--BodyBackgroundColor);
}
.CeldaTabla {
    vertical-align: middle;
    text-align: center;
}
.GridHeaderStyle {
    color: #FFFFFF;
    text-decoration: none;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 11pt;
    font-family: Calibri;
    background-color: #808080;
}
.GridItemStyle {
    color: #333333;
    text-decoration: none;
    /*font-variant: small-caps;*/
    font-weight: bold;
    font-size: 9pt;
    font-family: Calibri;
    background-color: #CCCCCC;
}
    .GridItemStyle:hover {
        color: whitesmoke;
        background-color: slategray;
    }
.GridAlternatingItemStyle {
    color:#FFFFFF;
    text-decoration: none;
    /*font-variant: small-caps;*/
    font-weight: bold;
    font-size: 9pt;
    font-family: Calibri;
    background-color: var(--ColorLogoLineMiddle);
}
    .GridAlternatingItemStyle:hover {
        color: whitesmoke;
        background-color: slategray;
    }
.GridSelectedItemStyle {
    color: #FFFFFF;
    text-decoration: none;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 9pt;
    font-family: Calibri;
    background-color: #FF0000;
    text-align: left;
}
    .GridSelectedItemStyle:hover {
        color: lightgray;
        background-color: slategray;
    }
.GridEditItemStyle {
    color: #333333;
    text-decoration: none;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 10pt;
    font-family: Calibri;
    background-color: #FFFFFF;
}
    .GridEditItemStyle:hover {
        color: lightgray;
        background-color: slategray;
    }
.GridPagerStyle {
    color: #FFFFFF;
    text-decoration: none;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 8pt;
    font-family: Calibri;
    background-color: #333333;
}
/*MARGENES*/

.Margin10Auto {
    margin: 10px auto;
}
.Margin5Auto {
    margin: 5px auto;
}
.Margin-5Bottom {
    margin-bottom: -5px;
}
.Margin-4Bottom {
    margin-bottom: -4px;
}
.Margin-3Bottom {
    margin-bottom: -3px;
}
.MarginLeft5 {
    margin-left: 5px;
}
.MarginRight5 {
    margin-right: 5px;
}
.Padding5 {
    padding: 5px;
}
.Padding1 {
    padding: 1px;
}
.PaddingRight5 {
    padding-right: 5px;
}
.PaddingLeft5 {
    padding-left: 5px;
}
.Padding0 {
    padding: 0px;
}
.Margin0Auto {
    margin: 0px auto;
}
/*----------------------------------------------------------------*/

/*LOADING*/
.loader {
    z-index: 9999;
    position: fixed;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    opacity: 0.5;
    transition: all 0.5s;
}
    .loader .ring {
        height: 45px;
        width: 45px;
        border: 5px solid #ddd;
        border-radius: 50%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
        .loader .ring:after {
            position: absolute;
            content: "";
            height: 100%;
            width: 100%;
            border-radius: 50%;
            border: 5px solid var(--ColorLine);
            border-top-color: transparent;
            border-bottom-color: transparent;
            animation: rotate 1.5s linear infinite;
        }
@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}
/*.........................................................*/

.div_MenuNoneFloat {
    margin: 0px auto;
    padding: 1px;
    display: inline-block;
    float: none;
}
.alinearDiv {
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    font-family: Tahoma;
    font-variant: small-caps;
    width: 100%;
}
.div_flotante_centro_pantalla {
    background-color: #F9F7F0;
    width: 250px;
    height: 200px;
    position: fixed;
    top: 30%;
    left: 51%;
    margin-left: -125px;
    margin-top: -50px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    box-shadow: black 0.2em 0.2em 0.2em;
    font-size: 12px;
    font-family: Calibri;
    font-style: normal;
    text-align: center;
}

/*INICIO FORMATO DE LINEAS*/
.LineaSeparadoraBody {
    color: #000000;
    width: 100%;
    height: 1px;
    border: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: var(--BodyBackgroundColor);
}
.LineaSeparadora {
    background-color: var(--ColorPrimaryLogo);
    width: 100%;
    height: 1px;
    margin-top: 0px;
    margin-bottom: 0px;
}
.LineaSeparadora50 {
    background-color: var(--ColorPrimaryLogo);
    width: 50%;
    height: 1px;
    margin: 0 auto;
    /*box-shadow: 1px 0px 3px 1px var(--BackGroundShadow);*/
}
/*----------------------------------------------------------------*/

/*FORMATO TEXTOS */
.ColorLogo 
{
    color:var(--ColorPrimaryLogo);
}
.ColorTurqueza {
    color: var(--ColorTurqueza);
}
.WhiteSpaceNowRap {
    white-space: nowrap;
}
.CamposTexto {
    color: #1F1F1F;
    background-color: #F4F4F0;
    font-size: 11px;
    font-family: Calibri;
    border-width: 1px;
    font-style: normal;
    margin-bottom: 0px;
    padding: 1px 1px 1px 2px !important;
    height: 21px !important;
}
.CamposTextoError {
    color: red;
    background-color: white;
    font-size: 11px;
    font-family: Calibri;
    font-style: normal;
    margin-bottom: 0px;
    margin-left: 0px;
}
.LabelTexto100Left {
    border-style: none;
    border-width: 0px;
    text-align: left;
    text-decoration: none;
    width: 100px;
    display: inline-block;
}
.LabelTexto70Left {
    border-style: none;
    border-width: 0px;
    text-align: left;
    text-decoration: none;
    width: 70px;
    display: inline-block;
}
.LabelTextoLeft {
    border-style: none;
    border-width: 0px;
    color: black;
    text-align: left;
    text-decoration: none;
    display: inline-block;
}
.TextoSemiVisto {
    color: #555454;
    text-transform: uppercase;
    font-style: normal;
    font-variant: small-caps;
    font-weight: bolder;
    font-size: 10px;
    font-family: Calibri;
    text-align: center;
    vertical-align: middle;
}
.FontWeightBold {
    font-weight: bold;
}
.TituloPrincipal {
    background: #F2F2F2;
    -webkit-background-clip: text;
    color: #000000;
    text-shadow: 0px 3px 3px rgba(255,255,255,0.5),0px -1px 1px rgba(0,0,0,.3);
    vertical-align: middle;
    text-align: center;
    font-size: 24pt;
    text-transform: uppercase;
    font-family: Calibri;
}
.TituloSecundario {
    font-size: 18px;
    color: #999999;
    text-decoration: none;
    padding: 0px;
    vertical-align: middle;
    text-align: center;
}
    .TituloSecundario:hover {
        border: 1px solid var(--ColorLogoLineMiddle);
        text-shadow: 0px 0px 15px #ffffff;
        border-radius: 1px;
        background-color:#333333;
    }

/*FIN FORMATO TEXTOS*/

@media(max-width:600px) {

    .boton {
        width: 80px;
        font-size: 9pt;
        padding: 0px;
    }

    .div_MenuNoneFloat {
        float: left;
    }

    .LabelTexto100Left {
        width: auto;
    }

    #div_master_alert {
        width: calc(var(--Widthvw)/2);
    }
}