/*FLECHA MOVE UP*/
.containerAritante {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: stretch;
    width: 100%;
    height: 3rem;
}
.sexddlAritante {
    width: 100%;
    padding: 2px 0px 5px 25px;
    margin-left: 2rem;
    margin-bottom: 5px;
}
.sexImgMostrarSexConfigurax {
    display:flex;
    justify-content:center;
    align-items:center;
    z-index: 1;
}
.imgEsconderSexConfigurax {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 2rem;
    cursor: grabbing;
}
/*GOOGLE INPUT*/
.lblGoogleInput {
    position: absolute;
    left: 0.5rem;
    top: 40%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
    pointer-events: none;
    /*font-size: 12px; - se define en el elemento 
    color: #000;*/
}
.txbGoogleInput {
    outline: none;
    border: 0.3rem solid #505050;
    background-color: transparent;
    border-radius: 8px;
    position: relative;
    transition: all 0.3s ease;
    /*width: 200px;
    height: 30px;
    font-size: 12px;
    padding: 4px; - TODO ESTO SE DEFINE EN EL ELEMENTO*/
}
.sexGoogleInput {
    display: flex;
    position: relative;
}
    .sexGoogleInput::before, .sexGoogleInput::after,
    .txbGoogleInput::before, .txbGoogleInput::after,
    .lblGoogleInput::before, .lblGoogleInput::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
.txbGoogleInput:focus {
    border: 0.3rem solid #4285f4;
}
.txbGoogleInput:not(:placeholder-shown) + label {
    color: #4285f4;
    top: 0;
    left: 1rem;
    color: #000;
}
.not-placeholder-shown {
    top: 0;
    left: 2rem;
    color: #000;
}
.txbGoogleInput:focus + label {
    color: #4285f4;
    top: 0;
    left: 1rem;
    color: #000;
}
.spanGoogleTxb {
    padding: 0.1rem;
    border-radius: 20px;
    background-color: snow;
}



/*DDL EN JAVASCRIPT*/
.autocomplete-wrapper {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
}
.autocomplete-ddlwrapper {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
}
/*Lo uso en los ddls de los itemes de facturas*/
.ddlAritaAutocomplete-input {
    background-color: #e9e9e9;
    /*padding: 0.5em;*/
    /*width: calc(100% - 4px);*/
    border-radius: 7px;
    border: unset;
    outline: none;
    color: darkblue;
    /*overflow-x: scroll;*/
}
    .ddlAritaAutocomplete-input::placeholder {
        color: gray;
        font-weight: lighter;
        /*font-size:10px;*/
    }
.autocomplete-list {
    position: absolute;
    /*top: 30px;
    left: 0;*/
    list-style: none;
    margin: unset;
    padding: unset;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background-color: #b9d2f9;
    z-index: 1;
}
    .autocomplete-list button {
        border: unset;
        background: unset;
        display: block;
        width: 100%;
        text-align: left;
        padding: 0.5em;
        overflow: auto;
    }
        .autocomplete-list button:hover {
            font-style: italic;
            cursor: pointer;
        }
    .autocomplete-list li {
        border: 1px solid #e9e9e9;
        border-top: unset;
    }
        .autocomplete-list li:hover {
            background: #f7f7f7;
            border-top: unset;
        }
.listItemStyle {
    font-size: unset;
}
.sexItemStyle {
    /*display: table-cell;*/
    /*font-size: 10px;*/
}

/*C# DDL Y COMBOBOX*/
.ddlNormal {
    height: 90%;
    width: 90%;
    border-color: #0099FF;
    color: #000066;
    font-family: Cambria;
    font-size: 10px;
    background-color: AliceBlue;
}
.cbxNormal {
    color: #000066;
    font-family: Cambria;
    font-size: 10px;
    background-color: AliceBlue;
}
div .ddlNormal {
    visibility: visible;
    width: 90%;
}
.cbxNormal .ajax__combobox_textboxcontainer input {
    background-color: #ADD8E6;
    font-family: Cambria;
    font-size: 12px;
}
.ddlNormal .ajax__combobox_buttoncontainer button {
    background-color: #ADD8E6;
    border: solid 1px Blue;
}

/*LABELS DE USO GLOBAL*/
.lblMensaje {
    height: auto;
    width: auto;
    color: Red;
    font-family: Cambria;
    font-size: 14px;
    /*box-shadow:blur;*/
}
.lblInformativoPequeño {
    /*Tipo de Letra*/
    font-family: Cambria;
    font-size: 10px;
    font-weight: normal; /*Texto*/
    color: #003366;
    direction: ltr;
    letter-spacing: normal;
    line-height: normal;
    text-align: left;
    vertical-align: bottom;
    text-transform: capitalize; /*Borders
    border:dashed 1px 1px 1px 1px;
    /*border-top:double;*/ /*border-right:solid;
    border-left:solid;
    border-bottom:solid;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-color:#003366;
    border-collapse:separate;
    perspective:1px; 
    overflow:hidden;*/ /*Margen Exterior*/ /*margin:1px;*/ /*Margen Interior*/ /*padding:5px 5px 5px 5px;*/ /*Fondos
    background-color:White;
    /*background-image:url;*/ /*background-repeat:repeat;*/ /*Tamaños
    width:60%;
    max-width:100%;
    min-width:50%;
    /*height:100%;*/ /*Posicionamiento*/ /*right:auto;*/
    vertical-align: text-bottom;
    /*position: relative;*/
    /*clip: rect(auto, auto, 0px, auto);*/
    /*padding-top: 10px;*/
}
.lblInformativoMinimo {
    /*Tipo de Letra*/
    font-family: Cambria;
    font-size: 8px;
    font-weight: normal; /*Texto*/
    color: #003366;
    direction: ltr;
    letter-spacing: normal;
    line-height: normal;
    text-align: left;
    vertical-align: middle;
    /*text-transform: capitalize; 
    Borders
    border:dashed 1px 1px 1px 1px;
    /*border-top:double;*/ /*border-right:solid;
    border-left:solid;
    border-bottom:solid;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-color:#003366;
    border-collapse:separate;
    perspective:1px; 
    overflow:hidden;*/ /*Margen Exterior*/ /*margin:1px;*/ /*Margen Interior*/ /*padding:5px 5px 5px 5px;*/ /*Fondos
    background-color:White;
    /*background-image:url;*/ /*background-repeat:repeat;*/ /*Tamaños
    width:60%;
    max-width:100%;
    min-width:50%;
    /*height:100%;*/ /*Posicionamiento*/ /*right:auto;*/
    /*position: relative;*/
    /*clip: rect(auto, auto, 0px, auto);*/
    /*padding-top: 10px;*/
}
.lblNormal {
    /*Tipo de Letra*/
    font-family: Cambria;
    font-size: 12px;
    font-weight: normal; /*Texto*/
    color: #003366;
    direction: ltr;
    letter-spacing: normal;
    line-height: normal;
    text-align: left;
    text-transform: none; /*Borders
    border:dashed 1px 1px 1px 1px;
    /*border-top:double;*/ /*border-right:solid;
    border-left:solid;
    border-bottom:solid;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-color:#003366;
    border-collapse:separate;
    perspective:1px; 
    overflow:hidden;*/ /*Margen Exterior*/ /*margin:1px;*/ /*Margen Interior*/ /*padding:5px 5px 5px 5px;*/ /*Fondos
    background-color:White;
    /*background-image:url;*/ /*background-repeat:repeat;*/ /*Tamaños
    width:60%;
    max-width:100%;
    min-width:50%;
    /*height:100%;*/ /*Posicionamiento*/ /*right:auto;*/
    vertical-align: bottom;
}
.lblTitulo {
    font-family: Book Antiqua;
    font-size: 16px;
    color: #333399;
    font-weight: bold;
}

/*C# INPUT (TEXTBOX)*/
.txbAcceso {
    width: 150px;
    height: 80%;
    float: right;
    vertical-align: middle;
    color: #CCCCCC;
    background-color: #C4ECFF;
    font-family: Cambria;
    border-color: #003399;
}
.txbMultiplesLineas {
    /*Tipo de Letra
    font:100;*/
    border-width: thin;
    border-style: none none double double;
    font-family: Cambria;
    font-size: 10px; /*font-weight:100;*/ /*Texto*/
    color: #400080;
    direction: ltr;
    letter-spacing: normal;
    line-height: normal;
    text-align: justify;
    overflow: auto;
    /*text-transform:uppercase;*/ /*Borders*/ /*border-top:double;*/ /*border-right:solid;
    border-left:solid;
    border-bottom:solid;
    border-radius:10%;
    /*-webkit-border-radius:25%;
    -moz-border-radius:25%;*/
    border-color: #003366; /*border-collapse:separate;*/
    perspective: 1px;
    /*Margen Exterior*/ /*margin:auto;*/ /*Margen Interior*/ /*padding:5px 5px 5px 5px;*/ /*Fondos*/
    background-color: AliceBlue; /*background-image:url;*/ /*background-repeat:repeat;*/ /*Tamaños*/
    width: 96%;
    min-width: 50%;
    height: 90%;
    /*Posicionamiento
    right:auto;*/
}
.txbNormal {
    /*Tipo de Letra
    font:100;*/
    border-width: thin;
    border-style: none none double double;
    font-family: Cambria;
    font-size: 10px; /*font-weight:100;*/ /*Texto*/
    color: #000066;
    direction: ltr;
    letter-spacing: normal;
    line-height: normal;
    text-align: left; /*text-transform:uppercase;*/ /*Borders*/ /*border-top:double;*/ /*border-right:solid;
    border-left:solid;
    border-bottom:solid;
    border-radius:10%;
    -webkit-border-radius:25%;
    -moz-border-radius:25%;*/
    border-color: #0099FF; /*border-collapse:separate;*/
    perspective: 1px;
    overflow: hidden; /*Margen Exterior*/ /*margin:auto;*/ /*Margen Interior*/ /*padding:5px 5px 5px 5px;*/ /*Fondos*/
    background-color: AliceBlue; /*background-image:url;*/ /*background-repeat:repeat;*/ /*Tamaños*/
    width: 100%;
    min-width: 50%;
    height: 90%;
    margin-top: 1px;
    margin-bottom: 1px;
    padding-top: 1px;
    padding-bottom: 1px;
    /*Posicionamiento
    right:auto;*/
}
    .txbNormal:Disabled, txbNormal[disabled] {
        /*Tipo de Letra
    font:100;*/
        border-width: thin;
        border-style: solid;
        font-family: Cambria;
        font-size: 10px; /*font-weight:100;*/ /*Texto*/
        color: #003366;
        direction: ltr;
        letter-spacing: normal;
        line-height: normal;
        text-align: left; /*text-transform:uppercase;*/ /*Borders*/ /*border-top:double;*/ /*border-right:solid;
    border-left:solid;
    border-bottom:solid;
    border-radius:10%;
    -webkit-border-radius:25%;
    -moz-border-radius:25%;*/
        border-color: #800080; /*border-collapse:separate;*/
        perspective: 1px;
        overflow: hidden; /*Margen Exterior*/ /*margin:auto;*/ /*Margen Interior*/ /*padding:5px 5px 5px 5px;*/ /*Fondos*/
        background-color: #C0C0C0; /*background-image:url;*/ /*background-repeat:repeat;*/ /*Tamaños*/
        width: 90%;
        min-width: 50%;
        height: 90%;
    }

/*BOTONES DE USO GLOBAL*/
.btnGo {
    border-style: groove;
    border-width: 1px;
    height: 20px;
    vertical-align: middle;
    width: 25px;
    float: right;
}
.btnNormal {
    border-style: ridge;
    border-color: #8fd0ff;
    border-width: medium;
    background-color: AliceBlue;
    background-position: center;
    width: 70%;
    height: 85%;
    font-family: Cambria;
    color: #400080;
    border-radius: 40%;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
    /*float:left;*/
    margin: 0px 0px 0px 0px;
    padding: 2px 2px 2px 2px;
    /*border-spacing:1px;*/

    cursor: pointer;
}
    .btnNormal:hover {
        border-style: ridge;
        border-color: #8fd0ff;
        border-style: outset;
        border-width: thick;
        background-color: AliceBlue;
        background-position: center;
        width: 75%;
        height: 90%;
        font-weight: bold;
        font-style: italic;
        color: #400080;
        border-radius: 40%;
        font-size: 14px;
        text-align: center;
        vertical-align: middle;
        /*float:left;*/
        margin: 0px 0px 0px 0px;
        padding: 2px 2px 2px 2px;
        /*border-spacing:1px;*/

        cursor: pointer;
    }
    .btnNormal:Disabled, btnNormal[disabled] {
        border: 1px solid #999999;
        background-color: #CCCCCC;
        color: #666666;
        width: 70%;
        height: 85%;
        cursor: crosshair;
    }
.columnWidth {
    width: 50px;
}

/*C# GRIDVIEW*/
.gvNormal {
    background-color: #CBE2FE;
    border-color: #003366;
    border-style: solid;
    border-width: 1px;
    /*padding:5px;*/
    color: #003366;
    font-family: Cambria;
    font-size: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
}


/*ESTOS SON ESTILOS DE LOS EF QUE UTILICE EN TODOS LOS REPORTES*/
.seccionParametros{
    display:flex;
    justify-self: stretch;
    align-self: stretch;
    justify-content:stretch;
    align-content:stretch;
}
.sexbtnHeadEF {
    /*display: flex;
    padding: 2px;
    justify-self: stretch;
    align-self: stretch;
    align-items: stretch;
    height:35px;*/
    padding: 2px;
    justify-self: stretch;
    align-self: stretch;
    justify-items: stretch;
    align-items: stretch;
    height: 35px;
    min-width:40px;
    white-space: nowrap; /* Prevent line breaks */
}
.btnseSexbtnHeadEF {
    /*flex: 1;*/
    display: inline-block;
    
}
.sexbtnHeadReporteDeAsientos {
    padding: 1px;
    justify-self: stretch;
    align-self: stretch;
    justify-items: stretch;
    align-items: stretch;
}
.sexddlHeadEF {
    padding: 4px;
    width:90%;
    height:55%;
}

.btnCalendario {
    height: 20px;
    width: 20px;
    max-width: 20px;
    min-width: 10px;
    max-height: 20px;
    min-height: 10px;
    border-radius: 5px;
    border-style: ridge;
    border-color: #8fd0ff;
    border-width: medium;
    justify-self: flex-start;
    align-self: start;
    background-color: snow;
}
    .btnCalendario:hover {
        border-radius: 0px;
        cursor: grabbing;
    }
.btnNormalEF {
    border-style: ridge;
    border-color: #8fd0ff;
    border-width: medium;
    background-color: AliceBlue;
    background-position: center;
    width: 95%;
    height: 95%;
    font-family: Cambria;
    color: #400080;
    border-radius: 20px;
    font-size: 10px;
    text-align: center;
    vertical-align: middle;
    font-style: normal;
    /*float:left;*/
    margin: 1px;
    padding: 3px;
    /*border-spacing:1px;*/

    cursor: pointer;
}
    .btnNormalEF:hover {
        /*border-style: ridge;*/
        border-color: #8fd0ff;
        border-style: outset;
        border-width: medium;
        background-color: AliceBlue;
        background-position: center;
        font-weight: bold;
        font-style: italic;
        color: #400080;
        border-radius: 0;
        font-size: 10px;
        /*float:left;*/
        cursor: grabbing;
    }
    /*.btnNormalEF > option {
        text-align:left;
        font-style:normal;
    }*/
    .btnNormalEF:Disabled, btnNormal[disabled] {
        border: 1px solid #999999;
        background-color: #CCCCCC;
        color: #666666;
        cursor: crosshair;
    }


    /***SUMO SELECT****/


.sexddlHeadEFSumoSelect {
    padding: 0px;
    /*width: 95%;
    height: 80%;*/
    display:flex;
    justify-content:center;
    align-items:center;
    /*background-color:mediumpurple;*/
    /*padding: 1px;
    width: 100%;
    height: 90%;*/
}
/*.btnNormalEFSumoSelect*/
.SumoSelect {
    border-style: ridge;
    border-color: #8fd0ff;
    border-width: medium;
    background-position: center;
    font-family: Cambria;
    color: #400080;
    border-radius: 20px;
    font-size: 10px;
    text-align: center;
    vertical-align: middle;
    font-style: normal;
    /*float:left;*/
    margin: 2px;
    padding: 2px 2px 0 2px;
    cursor:grabbing;
    
}
    .SumoSelect .opt {
        text-align: left;
    }

    .SumoSelect > .optWrapper > .options li:hover {
        font-style: italic;
    }
    p.select-all{
        text-align:left;
    }
p.SelectBox {
    height: 100%;
}

.lbxSumoSelect {
    /*width: calc(100% - 15px);*/
    border-radius:20px;
    /*padding-left:2px;*/
}
/*.btnSumoSelect{
    width:50%;
}*/
/*.SumoSelect .CaptionCont {*/
/* Custom styles for the selected item container */
/*background-color: yellow;*/ /*#fff;*/
/*border: none;*/
/*}*/
/*.SumoSelect .opt {*/
/* Custom styles for the dropdown options */
/*background-color: black;*/
/*color: #333;
        padding: 5px;
        border-bottom: 1px solid #ccc;*/
/*}

        .SumoSelect .opt:hover {*/
/* Custom styles for the dropdown options on hover */
/*background-color: green;
        }*/
/*.btnNormalEFSumoSelect > .opt > ul > li {
    background-color: orange;
}*/
/* Change the hover color */
/*.btnNormalEFSumoSelect > .opt > ul > li:hover {
    background-color: blue;
}*/
/* Change the selected item color */
/*.btnNormalEFSumoSelect > .opt > ul > li.sel {
    background-color: pink;
}*/
.ddlAritanteEFNormal { /*lo use en efactura*/
    width: 98%;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    margin-left: 30px;
    height: 75%;
}
.divsexAritante{
    display:flex;
    justify-content:space-between;
    align-items:stretch;
    height: 50px;
}
/*ACORDION*/
.AccordionContent {
    border-width: thin;
    border-color: #0099FF;
    background-color: #A6CCEC;
    color: #003366;
    text-align: left;
    vertical-align: top;
    font-family: Cambria;
    font-size: 10px;
    padding-left: 6px;
    margin-top: 3px;
    margin-left: 3px;
    /*padding:0px;
    margin-left:0px;
    height:20px;*/
    /*width:100%;*/

    cursor: pointer;
}
.AccordionHeader
{
    border-style:inset;
    border-width: thin;
    border-color: #0099FF;
    background-color:#A6CCEC;
    color: #003366; 
    text-align:left;
    vertical-align:middle;
    font-family: Cambria;
    font-size: 12px;
    padding-left: 3px;
    margin-top:0px;
    margin-left: 0px;
    /*width:100%;*/  
    height:25px;

    cursor: pointer;
}
.AccordionHeader:hover 
{
    border-style:outset;
    font-style:italic;
    text-decoration:underline;
    
    cursor: pointer;
}
.AccordionHeaderSelected
{
    border-style:solid;
    border-width: thin;
    border-color: #0099FF;
    background-color:#CCE8F7;
    color: #003366; 
    text-align:left;
    vertical-align:middle;
    font-family: Cambria;
    font-size: 14px;
    padding-left: 3px;
    margin-top:0px;
    margin-left: 0px;
    /*width:100%;*/  
    /*height:40px;*/

    cursor: pointer;
}
.AccordionHeaderSelected:hover 
{ 
    border-style:outset;
    font-style:italic;
    text-decoration:underline;
    
    cursor: pointer;
}
.AccordionLink 
{ 
    background-color: #D3DEEF;
    color:White;    
    cursor: pointer;
}
.AjaxToolkitStyle .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input
{
    background-position: top left;
    border: 0px none;
    border-color: #0099FF;
    color: #000066;
    padding: 4px 0px 3px 5px;
    height: 100%;
    width: 100%;
    position: relative;
    font-family: Cambria;
    font-size: 10px;
    background-color: AliceBlue;
}
.AjaxToolkitStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
{
    background-position: top left;
    border: 0px none;
    height: 100%;
    width: 100%;
}
.AjaxToolkitStyle .ajax__combobox_itemlist
{
    border-color: #0F2543;
    background-color: #EFEFEF;
    color: #000066;
    font-family: Cambria;
    font-size: 10px;
}
.btnAccordion
{
    background-color: #CCE8F7;
    color: #003366;
    font-family: Cambria;
    font-size: 10px;
    border-style: hidden;
    padding-left: 10px;
    padding-top:2px;
    padding-bottom:2px;
    text-align: left;
    vertical-align:middle;
    height: 100%;
    width: 100%;
    cursor: pointer;
}
.btnAccordion:hover 
{
    border-style:outset;
    font-style:italic;
    text-decoration:underline;
    
    cursor: pointer;
}
.divAccordion {
    width: 100%;
    height: 35px;
}
    .divAccordion:hover {
        font-weight: bold;
        font-style: italic;
    }


/*SEX ARTICULOS*/
.divArticulosLeftCol
{
    border: 5px ridge #000080; 
    width:48%;
    height:auto; 
    float:right; 
    margin-right:4px;
}
.divArticulosRightCol
{
    border: 5px ridge #000080; 
    width:48%;
    height:auto; 
    float:right; 
    margin-left:4px;
}
.divArticulosRow
{
    width:100%; 
    height:240px; 
    background-color:Aqua; 
    vertical-align:top;
    text-align:left;
}
.divBtnsPortada
{
    width: 20%;
    height:100%; 
    background-color:#003366; 
    border: 0px 0px 1px 1px; 
    font-size:13px; 
    font-family:Cambria; 
    color:Silver;
    text-align:center;
    vertical-align:middle;
}
.divfloatleft
{  
    float: left;  
    width: 250px;
    height: 1995px;  
    background-color: #CCE8F7;  
    /*border: 2px solid black;*/
    position:absolute;
    top:0;
    left:0;  
}  
.divfloatright
{  
    width: calc(100% - 220px);
    height: 998px;
    background-color: #CCE8F7;  
    /*border: 2px solid black;*/
    position:absolute;
    top:0;
    right:0;
}
.lblArticulosTitulo {
    width: 100%;
    height: 40px;
    background-color: #AAEEFF;
}
.lblArticulosSinopsis {
    width: 100%;
    height: 200px;
    background-color: #AAEEFF;
}
.lblInfoContactoCRC {
    color: #400080;
    background-position: right;
    font-family: Book Antiqua;
    font-size: 20px;
}  

/*MENSAJES DE USO GLOBAL*/
.containerMensaje {
    /*display: none;*/ /*Hidden by default*/
    /*position: fixed;*/ /*Stay in place*/
    /*z-index: 1;*/ /* Sit on top */
    /*left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;*/ /* Enable scroll if needed */
    /*background-color: rgb(0,0,0);*/ /* Fallback color */
    /*background-color: rgba(0,0,0,0.4);*/ /* Black w/ opacity */
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    /*background: #0f0c29;
    background-image: -webkit-gradient(to right, #24243E, #302863, #0F0C29);
    background-image: linear-gradient(to right, #24243E, #302863, #0F0C29);*/
    background-color:transparent;
    transition-duration: 200ms;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.containerMensajeHidden {
    left: -1200px;
    width: 500px;
    height: 500px;
    display:none;
}
.containerMensajeDisplayed {
    /*top: 0;
    left: 0px;*/
    /*width: 100%;
    height: 100%;*/
    /*display: block;*/
}
.pnlMensaje {
    /*background-color: #fefefe;
    margin: 15% auto;*/ /* 15% from the top and centered */
    /*padding: 20px;
    border: 1px solid #888;
    width: 80%;*/ /* Could be more or less, depending on screen size */
    position: relative;
    width: 400px;
    height: 250px;
    transition-duration: 500ms;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    column-gap: 1px;
    row-gap: 1px;
    background-color: #5db7ef;
    border-radius: 1em;
    border-color: darkslateblue,;
    border-style: ridge;
    border-width: 3px;
    padding: .5em 1.5em;

}
.pnlMensajeHidden {
    left: -300px;
}
.pnlMensajeDisplayed {
    left: auto;
    justify-self: center;
    align-self: center
}
.seximgArita {
    grid-column: 1;
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row: 1 / 5;
    grid-row-start: 1;
    grid-row-end: 4;
    justify-items: stretch;
    align-items: stretch;
    background-color:transparent;
}
.imgArita {
    justify-self: center;
    align-self: center;
    width: 70px;
    height:180px;
    background-color:transparent;
}
.sexlblMensaje {
    grid-column: 2 / 5;
    grid-column-start: 2;
    grid-column-end: span 4;
    grid-row: 1 / 5;
    grid-row-start: 1;
    grid-row-end: 4;
    display: flex;
    justify-self:stretch;
    align-self:stretch;
    justify-items: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color:transparent;
}
.lblMensajeAsiento {
    color: #0000b3;
    font-family: Cambria;
    font-size: 20px;
    padding-left: 15px;
    align-self: center;
    justify-self: center;
    text-align: center;
    background-color:transparent;
}
.sexbtnSi {
    grid-column: 1 / 3;
    grid-column-start: 1;
    grid-column-end: span 3;
    grid-row: 5 / 6;
    grid-row-start: 5;
    grid-row-end: 5;
    justify-items: stretch;
    align-items: stretch;
    background-color: transparent;
}
.btnMensaje {
    border-style: ridge;
    border-color: #8fd0ff;
    border-width: thick;
    background-color: AliceBlue;
    /*background-position: center;*/
    width: 95%;
    height: 95%;
    color: #400080;
    border-radius: 20px;
    font-size: 12px;
    text-align: center;
    padding: 2px 2px 2px 2px;
    background-color: transparent;
    cursor: grabbing;
}
    .btnMensaje:focus {
        border-color:lightblue;
        font-size: 14px;
        background-color: #4285f4;
    }
.btnMensaje:hover {
    border-style: outset;
    font-weight: bold;
    font-style: italic;
}
    .btnMensaje:Disabled, btnMensaje[disabled] {
        border: 1px solid #999999;
        background-color: #CCCCCC;
        color: #666666;
        cursor: crosshair;
    }
.sexbtnNo {
    grid-column: 3 / 5;
    grid-column-start: 3;
    grid-column-end: span 3;
    grid-row: 5 / 6;
    grid-row-start: 5;
    grid-row-end: 5;
    justify-items: center;
    align-items: center;
    background-color: transparent;
}
.sexbtnAceptar {
    grid-column: 2 / 4;
    grid-column-start: 2;
    grid-column-end: span 3;
    grid-row: 5 / 6;
    grid-row-start: 5;
    grid-row-end: 5;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: stretch;
    background-color: transparent;
}
.slide_in {
    /*font-size: 1.7em;
    font-family: Cambria;
    padding: .5em 1.5em;
    border: 0;
    border-radius: .1em;*/
    animation: slideMe 1s ease-out;
    transition-delay: 300ms;
    z-index: 1000;
    /*left: 300px;*/
}
@keyframes slideMe {
    0% {
        transform: skewX(60deg) translateX(-1200px);
    }

    30% {
        /*transform: skewX(60deg) translateX(-1200px);*/
    }

    60% {
        /*transform: skewX(25deg);*/
    }

    70% {
        /*transform: skewX(25deg) translate(-50px);*/
    }

    80% {
        transform: skewX(0deg) translateX(0px);
    }

    90% {
        transform: skewX(-30deg) translateX(20px);
    }

    95% {
        /*transform: skewX(-40deg) translateX(20px);*/
    }

    100% {
        transform: skew(0deg) translateX(0px);
    }
}

/*ARITA TOOLTIP*/
.sexTooltip {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
}
.cuadroTooltip {
    position: absolute;
    top: -20px;
    left: 20px;
    border-radius: 5px;
    border-style:groove;
    border-width:2px;
    border-color: #ff0038;
    list-style: none;
    margin: unset;
    padding: unset;
    width: 100%;
    height: 40px;
    /*overflow-y: auto;*/
    background-color: red;
    color: yellow;
    z-index: 99999;
}

/*ARITA'S LOCKED SCREEN*/
#splashScreen {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /*background: rgba(255, 255, 255, 0.8);*/
    background-color:white;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-items: center;
    z-index: 10000;
}
#loadingIndicator {
    align-items: center;
    justify-self: center;
    margin:auto;
    overflow: visible;
    animation: lockedText 10s 1;
}
#loadingMessage {
    width: 400px;
    height: 400px;
    margin:auto;
    font-size: 24px;
    color: #400080;
    background-color: transparent;
    position: relative;
    animation:lockedText 10s infinite;
}
.spiderman{
    background-color: transparent;
    opacity:0.8;
    width:200px;
    margin:0 auto;
    display:block;
    animation:spiderman 5s infinite;
}
@keyframes spiderman{
    0%{
        transform: translateY(-50px);
    }
    30% {
        transform: translateY(0) rotate(5deg);
    }
    50%{
        transform: rotate(-5deg);
    }
    75%{
        transform:rotate(5deg);
    }
    100%{
        transform:translateY(-50px);
    }
}
@keyframes lockedText{
    0% {
        transform: skewX(60deg) translateX(-100px) translateY(-100px);
    }

    30% {
        /*transform: skewX(60deg) translateX(-1200px);*/
    }

    60% {
        /*transform: skewX(25deg);*/
    }

    70% {
        transform: skewX(0deg) translateX(0px) translateY(0px);
    }

    80% {
        transform: skewX(-30deg) translateX(20px) translateY(20px);
    }
    90% {
        transform: skew(0deg) translateX(0px) translateX(0px);
    }

    100% {
        transform: skew(0deg) translateX(0px) translateX(0px);
    }
}

.waitForItClicked {
    cursor: crosshair;
    pointer-events: none;
    opacity: 0.3;
    color: snow;
    background-color: black;
    border-radius: 7px;
}

/*MODAL BOX*/
#pnlModalBoxContainer {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: rgb(0 0 0 / 0.40);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:1;
}

/*Ejemplo de modalBox - Debo personalizar este box para cada ocasión, siendo la palabra Ejemplo el comodin*/
.modalBoxEjemplo {
    position: relative;
    background-color: white;
    opacity: 1;
    border-color: darkgrey;
    border-radius: 20px;
    border-width: 5px;
    border-style: groove;
    /*box-shadow: rgba(0,0,0,.4) 10px 10px unset;*/
    width: 1000px;
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-items: stretch;
    align-items: stretch;
    z-index: 1;
}
#pnlModalBoxSupraContainer {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: rgb(0 0 0 / 0.40);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
.divImgOut {
    justify-self: flex-end;
    align-self: center;
    display: flex;
    justify-content: end;
    align-items: center;
    margin-right: 10px;
    
}
.imgOut {
    height: 23px;
    width: 23px;
    cursor: grabbing;
    padding: 2px;
    margin: 2px;
    border-radius: 5px;
    border-style: groove;
    border-color: black;
    border-width: 1px;
}

/*Estos estilos son del mensaje de InfoContacto y formas antiguas*/
.modalPopupFondo {
    background-color: Gray;
    /*filter: alpha(opacity=60);*/
    opacity: 0.6;
}
.modalPopup {
    background-color: #B5DDF2;
    border-width: 3px;
    border-style: solid;
    border-color: Gray;
    padding: 3px;
}
.pnlInformacion {
    height: 100%;
    width: 100%;
    font-family: Cambria;
    background-color: #A6CCEC;
}


/*SEX HEAD*/
.sexTete {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 90px;
    justify-content: space-between;
    align-items: stretch;
}
.sexChoix {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: calc(86% - 18px);
    /*padding:5px;
    margin: 10px 10px 25px 10px;*/
    
}
.sexAritante {
    display: flex;
    padding-top:6px;
    width:100%;
    justify-content: center;
    align-items: stretch;
}
.sexHeadParameters {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
    padding-left: 20px;
    width: 95%;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    background-color: #5db7ef;
    border-color: blue;
    border-style: groove;
    border-radius: 15px;
    border-width: 3px;
}
.sexLimites {
    padding: 4px;
    margin-left:10px;
    margin-right:10px;
    flex-basis: 0;
    flex-grow: 1;
    justify-content: stretch;
    align-items: center;
}

/*SEX FECHA*/
.sexFechaCompuesta {
    display: flex;
    flex-direction: row;
    flex-basis: 0;
    flex-grow: 3;
    justify-content: space-evenly;
    align-items: center;
}
.sexFecha {
    padding: 4px;
    display: flex;
    flex-direction: row;
    justify-self: stretch;
    align-items: center;
}
.txbCalendar {
    border-width: thin;
    border-style: none none solid none;
    font-size: 12px;
    color: #000066;
    text-align: left;
    vertical-align: bottom;
    border-color: #0099FF;
    width: calc(100% - 8px);
    min-width: 50%;
    height: calc(100% - 8px);
    margin: 4px;
    padding: 2px;
    background-color: AliceBlue;
    text-align: center;
}   /*Este es el txb de la factura*/
.btnHeadFecha {
    height: 20px;
    width: 20px;
    border-radius: 5px;
    border-style: ridge;
    border-color: #8fd0ff;
    border-width: medium;
    justify-self: flex-start;
    align-self: start;
    background-color: snow;
}   /*Este es btnCalendario ajustado para que sea general*/
    .btnHeadFecha:hover {
        border-radius: 0px;
        cursor: grabbing;
    }
/*Head ddls*/
.btnHeadChoix {
    border-style: ridge;
    border-color: #8fd0ff;
    border-width: medium;
    background-color: AliceBlue;
    background-position: center;
    width: 100%;
    height: 35px;
    font-family: Cambria;
    color: #400080;
    border-radius: 20px;
    font-size: 10px;
    text-align: center;
    vertical-align: middle;
    font-style: normal;
    /*float:left;*/
   /* margin: 1px;
    padding: 5px;*/
    /*border-spacing:1px;*/

    cursor: pointer;
}

.btnHeadChoix:hover {
    /*border-style: ridge;*/
    border-color: #8fd0ff;
    border-style: outset;
    border-width: medium;
    background-color: AliceBlue;
    background-position: center;
    font-weight: bold;
    font-style: italic;
    color: #400080;
    border-radius: 0;
    font-size: 10px;
    /*float:left;*/
    cursor: grabbing;
}
    .btnHeadChoix:Disabled, btnHeadChoix[disabled] {
        border: 1px solid #999999;
        background-color: #CCCCCC;
        color: #666666;
        cursor: crosshair;
    }

/*SEX OPCIONES*/
.sexOptions{
    display:flex;
    flex-direction:row;
    justify-content:flex-end;
    align-items:center;
}

.imgOpciones{
    width:40px;
    height:40px;

}
.imgListeOpciones {
    width: 80px;
    height: 80px;
}


.seximgOpciones {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-style: ridge;
    border-color: #8fd0ff;
    border-width: medium;
    background-color: AliceBlue;
    border-radius:5px;
    height:40px;
    width: 40px;
    margin-right: 10px;
    cursor:grabbing;
}
    .seximgOpciones:hover {
        /*border-style: ridge;*/
        border-color: #8fd0ff;
        border-style: outset;
        border-width: medium;
        background-color: AliceBlue;
        background-position: center;
        font-weight: bold;
        font-style: italic;
        color: #400080;
        border-radius: 0;
        font-size: 10px;
        /*float:left;*/
        cursor: grabbing;
    }

   
    /*Estilos de Reportes pnlReporte*/
.sexpnlReporte{
    display:flex;
    flex-direction:row;
    height: 100%;
    justify-content: center;
    align-items:center;
    justify-self:center;
    align-self:center;
}


/*Reporte de Facturas*/
/*MODAL BOX CRUD ITEMES*/
.pnlReporte {
    display: flex;
    justify-self: stretch;
    align-self: stretch;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vw;
    background-color: snow;
}
/*REPORTE VACIO*/
.pnlReporteVacio {
    width: 600px;
    height: 400px;
    background-color: #5db7ef;
    border-color: darkslateblue;
    border-radius: 1em;
    border-width: 3px;
    border-style: ridge;
    box-shadow: rgba(0,0,0,.4) 10px 10px unset;
    justify-self: center;
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.txbCuadroMensaje {
    width: 400px;
    height: 250px;
    background-color: transparent;
    border-style: none;
    border-width: 0px;
    font-size: 30px;
    font-weight: normal;
    font-style: normal;
    color: darkslateblue;
    justify-self: center;
    align-self: center;
    text-align: center;
    cursor: grabbing;
}

    .txbCuadroMensaje:hover {
        font-style: italic;
        font-weight: bold;
        border: dotted;
        border-width: 1px;
        border-color: darkslateblue;
    }
/*REPORTE DE FACTURAS Y ASIENTOS EN TAB SECUNDARIO*/
.pnlReporteFacturas {
    /*//position: relative;*/
    width: 99%;
    height: 100%;
    background-color: snow;
    border-color: darkgrey;
    border-radius: 20px;
    border-width: 5px;
    border-style: groove;
    /*box-shadow: rgba(0,0,0,.4) 10px 10px unset;*/
    justify-self: start;
    align-self: start;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    z-index: 1;
}

    .pnlReporteFacturas::before, .modalBoxItem::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', Cambria;
    }

.divRFHead {
    display: flex;
    flex-direction: row;
    /*justify-items: stretch;
    align-items: stretch;*/
    justify-content: space-between;
    align-items: stretch;
    background-color: #5db7ef;
    border-radius: 5px;
    border-color: darkslateblue,;
    border-style: double;
    border-width: 2px;
    height: 50px;
    width: calc(100% - 20px);
    margin: 0.5em;
}

.divTituloRF {
    /*width: calc(100% - 40px);*/
    display: flex;
    align-items: center;
    justify-self: flex-start;
}

.lblRFHead {
    font-size: 14px;
    color: darkslateblue;
    font-weight: 700;
    padding-left: 10px;
}


.divListeFacturas {
    display: flex;
    flex-direction: column;
    list-style: none;
    width: 100%;
    height: 100%;
    justify-items: start;
    align-items: stretch;
    background-color: snow;
    margin-top: unset;
    padding: unset;
    overflow: auto;
}

.sexConfiguraxRF {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: stretch;
    height: 50px;
    margin: 10px;
}

.lblMainBoxRF {
    font-size: 12px;
    color: #000;
}

.mainBoxTxbRF {
    /*width: 200px;*/
    height: 30px;
    width: 100%;
    font-size: 10px;
    padding: 4px 4px 4px 4px;
    text-align: center;
    color: darkblue;
    background-color: snow;
    cursor: text;
}

    .mainBoxTxbRF:disabled {
        background-color: lightgray;
        color: black;
        cursor: crosshair;
    }

.sexRF {
    flex: 1;
    justify-content: stretch;
    align-items: stretch;
    font-size: 10px;
    margin: 5px;
}

.divLineaseRF {
    display: flex;
    flex-direction: column;
    list-style: none;
    width: 99%;
    height: 100%;
    /*justify-items: stretch;
    align-items: stretch;*/
    background-color: snow;
    border-color: darkgray;
    border-radius: 20px;
    border-width: 1px;
    justify-self: stretch;
    align-self: stretch;
    justify-content: stretch;
    align-items: stretch;
    margin: unset;
    padding: unset;
    overflow-y: auto;
}

.divlisteFactureLinea {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    align-content: stretch;
    align-items: stretch;
    height: 40px;
    margin: 10px;
    border: none;
    list-style: none;
}

    .divlisteFactureLinea:hover {
        border-style: groove;
        border-width: 1px;
        border-color: midnightblue;
        background-color: lightblue;
        font-style: italic;
    }

.txbListaRF {
    flex-basis: 0;
    flex-grow: 1;
    background-color: transparent;
    /*margin: 3px 5px 3px 2px;
    padding: 2px;*/
    border: none;
    font-size: 9px;
    vertical-align: middle;
    text-align: center;
    cursor: grabbing;
}

/*Sex Buscar Facturas en Reporte de Facturas*/
.btnBuscarReporteFacturasEnabled {
    width: 150px;
    height: 80%;
    color: #4285f4;
    background-color: AliceBlue;
    font-size: 14px;
    border-radius: 10px;
    border-style: ridge;
    cursor: grabbing;
}

.btnBuscarReporteFacturasDisabled {
    width: 150px;
    height: 80%;
    color: black;
    background-color: lightgray;
    font-size: 14px;
    border-radius: 10px;
    border-style: ridge;
    cursor: crosshair;
}

.sexbtnBuscarReporteFacturas {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
}

.divOuterId {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
}

.modalBoxBuscarReporteField {
    position: fixed;
    border-radius: 10px;
    border-style: groove;
    border-width: 5px;
    border-color: #060644;
    list-style: none;
    margin: unset;
    padding: unset;
    background-color: aliceblue;
    color: darkblue;
    z-index: 2;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.boxInicial {
    width: 100%;
    height: 100%;
    background-color: snow;
    text-align: center;
}

.sexBuscar {
    width: 40%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.alBuscar {
    border: none;
    font-size: 16px;
    color: #060644;
    background-color: transparent;
    width: 100%;
    text-align: center;
}

.divAlBuscar {
    width: 10%;
    height: 50%;
    border-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tipeDocBuscarHabilitado {
    border: 3px solid #505050;
    border-radius: 8px;
}

/*Pie de Asiento*/
.sexShortcutDescriptionPie {
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: 1em;
    color: darkblue;
    padding: 0 1rem 0 1rem;
}   

.imgCheck {
    width: 30px;
    height: 30px;
    background-image: url('../../../Images/210617%20Check%20Icon.jpg');
    background-size: cover;
    background-position: center;
}

    .imgCheck:disabled,
    .imgCheck[disabled] {
        background-color: grey;
        cursor: not-allowed;
        background-image: url('../../../Images/210617%20Check%20Icon.jpg');
    }

    .imgCheck:enabled,
    .imgCheck:not([disabled]) {
        background-color: aliceblue;
        cursor: grabbing;
        background-image: url('../../../Images/210617CheckIconBlanco.jpg');
    }

.imgVoid {
    width: 30px;
    height: 30px;
    background-image: url('../../../Images/Anular.png');
    background-size: cover;
    background-position: center;
}

    .imgVoid:disabled,
    .imgVoid[disabled] {
        background-color: grey;
        cursor: not-allowed;
        background-image: url('../../../Images/AnularDisabled.png');
    }

    .imgVoid:enabled,
    .imgVoid:not([disabled]) {
        background-color: aliceblue;
        cursor: grabbing;
        background-image: url('../../../Images/Anular.png');
    }
.imgNew {
    width: 30px;
    height: 30px;
    background-image: url('../../../Images/PlusSign.png');
    background-size: cover;
    background-position: center;
    cursor: grabbing;
}