@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800&family=Poppins:wght@300;500&display=swap');

/* ________________________________________________________________________ */

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.wrapper {
    min-height: 100%;
    position: relative;
}

.cell {
    border: 0!important;
    padding: 0 10px 0 10px;
    background-color: #EFEFEF !important;
    width: 85% !important;
}

.red.label.tabber .warning.icon {
    margin-right: 0!important;
}

.encabezado {
    background-color: #000;
}

.filtroEncabezado {
    width: 100%;
    margin: 0 auto;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.principal {
    padding-right: 20px;
    padding-bottom: 100px;
    /* Height of the footer */
}

.piedepagina {
    padding: 25px;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: #131313;
    color: #FFF;
    text-align: center;
}

@media (min-height: 320px) {
    .ui.footer.form-page {
        /* Increased specificity for SO snippet priority */
        bottom: 0;
        width: 100%;
        text-align: center;
    }
}

.quantity {
    width: 100px!important;
}

.MyTextArea {
    width: 200px!important;
}

@media only screen and (max-width: 768px) {
    .fields>.field {
        margin-bottom: 10px!important;
    }
}

.dataTables_paginate .ui.pagination.menu a:hover {
    color: transparent!important;
    font-weight: bolder!important;
    border-color: #FFF!important;
    background: #DBDBDB!important;
}


/*.ui.coupled.modal>.header{
  background-color: #f5f5f5!important;
  border-bottom: 1px solid #ccc!important;
}
.ui.coupled.modal>.actions{
  background-color: #f5f5f5!important;
  border-top: 1px solid #ccc!important; 
}*/


/*=============================================
=            micrositio Administrador            =
=============================================*/
.menuI{
    width: 150px;
    height: 100%;
    /* background-color: aqua; */
    /* border: 1px solid red; */
    margin-right: 15px !important;
}
.menuI .ui.vertical.buttons{
    width: 100%;
    height: 100%;
}
.menuI .button{
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    width: 100% !important;
    /* height: 50% !important; */
}
.menuI .button.active{
    border: 3px solid white !important;
    /* border-bottom: 5px solid white !important; */
}
.button.menuIzq.clientes.active a, .button.menuIzq.vendedores.active a, .button.menuIzq.clientes a:hover, .button.menuIzq.vendedores a:hover{    
    color: white !important;    
}
.button.menuIzq.clientes a, .button.menuIzq.vendedores a{    
    color: #222222 !important;    
}
.button.menuIzq.clientes.active{
    background-image: linear-gradient(90deg,#3b8ed5,#6bdfff) !important;
    /* color: white !important; */
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 0px !important;
}
.button.menuIzq.vendedores.active{
    background-image: linear-gradient(#FBD21A,#E7B72B) !important;
    color: white !important;
    font-size: 1.5rem;
    font-weight: 900;
}
.button.menuIzq.vendedores, .button.menuIzq.clientes{
    background-color: rgba(114, 124, 132,.9);
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 0px !important;
}
.button.menuIzq{
    /* background-image: linear-gradient(90deg,#3b8ed5,#6bdfff) !important; */
    /* color: white !important; */
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 0px !important;
}
.button.menuIzq.clientes:hover{
    background-image: linear-gradient(90deg,#3079b9,#6bdfff) !important;
    color: white !important;
    font-size: 1.5rem;
    font-weight: 900;
}
.button.menuIzq.vendedores:hover{
    background-image: linear-gradient(90deg,#bd9520,#FBD21A) !important;
    color: white !important;
    font-size: 1.5rem;
    font-weight: 900;
}
.ui.circular.image{
    border: 5px solid white !important;
    max-height: 5rem;
    max-width: 5rem;
    object-fit: cover;
}
.dataTables_scrollHeadInner{
    border-top: 5px solid #FBD21A;
    /* border-image: linear-gradient(#bd9520,#FBD21A) !important; */
}
.left.menu{
    border-right: 1px solid rgba(255, 255, 255,0.2);;
}
.ui.grid{
    margin-bottom: 0px !important;
    padding-top: 1rem !important;
}
#gridPrincipalTable{
    border-left: 1px solid rgba(255, 255, 255,0.2);
}

.table_listContent_filteruser input[type="search"]{
    border-radius: 20px !important;    
}
.ui.right.labeled.input input{
    border-radius: 10px 0px 0px 10px !important;
}
.ui.right.labeled.input .ui.label{
    border-radius: 0 10px 10px 0 !important;
    background-color: #38596D !important;
}
/*=====  End of micrositio Administrador  ======*/






#table_listContent tbody tr {
    cursor: pointer;
}

.ui.toggle.checkbox label:before {
    background: #e4e7ea!important;
    border: 1px solid;
    border-color: #E9E9EA!important;
    ;
}

.ui.toggle.checkbox .box:hover::before,
.ui.toggle.checkbox label:hover::before {
    background: #bdc3c7!important;
    transition: background 1s, opacity 1s;
}


/*Estilo para el menu superior */

.menuStyle {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d6f9ff+0,9ee8fa+100;Blue+3D */
    background-color: transparent !important;
    font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
    border-top-style: solid !important;
    border-color: transparent !important;
    border-width: 2px!important;
    border-right-style: none!important;
    border-bottom-style: none!important;
    border-left-style: none!important;
}


/*Estilo para el extraMenu*/

.menuSub {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d6f9ff+0,9ee8fa+100;Blue+3D */
    background-color: transparent !important;
    border-top-style: none !important;
    border-right-style: none!important;
    border-bottom-style: none!important;
    border-left-style: none!important;
}


/*Estilo para el pie de página */

.footerStyle {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d6f9ff+0,9ee8fa+100;Blue+3D */
    background-color: rgb(83, 173, 233) !important;
    border-top-style: solid !important;
    border-color: transparent;
    border-width: 2px;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}


/*Estilo para los popup */

.ui.popup.bottom {
    background-color: #F7F2E1!important;
    border-color: transparent!important;
    border-width: 1px!important;
}

.ui.bottom.popup:before {
    background: #F7F2E1!important;
    border-top: solid!important;
    border-left: solid!important;
    border-color: transparent!important;
    border-width: thin!important;
}


/*Estilo para el título principal*/

.letra {
    font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif!important;
    font-size: 14pt!important;
    color: #f0ab00!important;
}

.ui.horizontal.divider:after,
.ui.horizontal.divider:before {
    background-image: url(/assets/images/modules/linea.png);
}

.ui.horizontal.divider.normal:after,
.ui.horizontal.divider.normal:before {
    background-image: url(/assets/images/modules/linea2.png);
}

.iconoP {
    color: #4d4f53!important;
    font-size: 14pt!important;
}


/*Estilo para las tablas*/

table>thead>th {
    background-color: #FAECBF!important;
}


/*Tamaño de un icono */

.sizeIcon {
    height: 38px!important;
    width: 30px!important;
}


/*Estilos para el filtro avanzado*/


/*Estilos para los botones del filto*/

#submitFilter {
    background-color: #f0ab00!important;
    color: #000!important;
}

#removeFilter {
    background-color: #4d4f53!important;
}

.MiDerecha {
    float: right;
    text-align: right;
}

.fondoFiltro {
    background-color: #fff!important;
}

.titulo.title:hover {
    color: transparent!important;
}

.titulo.title.active {
    color: transparent!important;
}

div.ui.dividing.header.MyCenter.subTitulo {
    color: #4d4f53;
    font-size: 12px;
    font-style: normal;
}


/*
    label {
    color: #000!important;
    font-size:12px!important;
    font-style: normal;

    }*/


/*Estilo para los modales*/


/*.encabezadoModal{
  padding: 10px!important;
  background-color: #E9E9EA!important;
}*/


/*Botones*/

div.ui.deny.button {
    background-color: #4d4f53!important;
    color: white!important;
}

div.ui.positive.button {
    background-color: #f0ab00!important;
    color: #000!important;
}

div.ui.positive.button.btnGuardar {
    background-color: transparent!important;
    color: white!important;
}

.btnPrinc {
    background-color: #f0ab00!important;
    color: #000!important;
}

.btnSec {
    background-color: #4d4f53!important;
    color: white!important;
}


/* Toggle checkbox*/

.ui.toggle.checkbox input~.box:after,
.ui.toggle.checkbox input~label:after {
    border: 1px solid!important;
    border-color: #CDCED0!important;
}

.ui.toggle.checkbox .box:hover::before,
.ui.toggle.checkbox label:hover::before {
    background-color: rgba(0, 0, 0, .15);
    border: 1px solid!important;
    border-color: #CDCED0!important;
}


/*Pie de modal*/


/*Inputs*/


/*.ui.form input[type=text]:focus {
     color: rgba(0,0,0,.95)!important;
    border-color: #85b7d9!important;
      border-radius: .28571429rem;
      background: #fff!important;
     box-shadow: 0 0 0 0 rgba(34,36,38,.35) inset!important;
  }*/


/*
  .ui.form input[type=text]{
    border: 1px solid !important;
    border-color: #A6A6A6!important;
    }
  */


/*Flechas del encabezado de la tabla*/

table.dataTable.table thead th.sorting:after,
table.dataTable.table thead td.sorting:after {
    color: rgba(0, 0, 0, .8)!important;
}


/*Botón de ok de los alertyfy*/

button.ajs-button.ui.positive.button {
    border: 1px solid;
    border-color: lightgray;
}

div.ui.secondary.top.attached.menu {
    background-color: white!important;
}


/*Espacio inferrior*/

.principal {
    padding-bottom: 0;
}


/*Menú lateral*/

.accordLateral {
   background-color: #89C4F4!important;
}

.transparente {
    background-color: rgba(0, 0, 0, 0.01)!important;
    border-bottom: none!important;
}

.miniTitulo {
    font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif!important;
    font-size: 16pt!important;
    color: transparent!important;
    text-align: center;
}

.ui.accordion .title:not(.ui):hover {
    color: #FFFFFF;
    opacity: 1;
    background: rgba(255, 255, 255, 0.23);
    color: #FB6D00!important;
}

.ui.accordion .activo.active.title:not(.ui) {
    color: #FFFFFF;
    opacity: 1;
    background: rgba(255, 255, 255, 0.23);
    color: #FB6D00!important;
}

.ui.accordion .title.subtitle:not(.ui):hover {
    color: #FFFFFF;
    opacity: 1;
    background: rgba(255, 255, 255, 0.23);
    color: transparent!important;
    font-weight: bold;
}

.ui.accordion .subtitle.active.title:not(.ui) {
    color: #FFFFFF;
    opacity: 1;
    background: rgba(255, 255, 255, 0.23);
    color: transparent!important;
    font-weight: bold;
}

.ui.accordion .title:not(.ui) {
    font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size: 12pt;
    color: #4d4f53!important;
}

.ui.link.list .item,
.ui.link.list .item a:not(.ui),
.ui.link.list a.item {
    color: rgba(0, 0, 0, 0.74)!important;
    -webkit-transition: .1s color ease;
    transition: .1s color ease;
}

.ui.link.list .item a:not(.ui):hover,
.ui.link.list a.item:hover {
    color: #FFFFFF;
    opacity: 1;
    background: rgba(255, 255, 255, 0.23);
    color: #1e70bf!important;
}

.ui.sidebar.menu .item {
    border-radius: 0!important;
    margin-top: -10px;
    margin-left: -15px!important;
}

:focus {
    outline: none!important;
}

ul,
menu,
dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 22px;
}

.colorBkg {
    background: #F7F6EE!important;
}
.ui.active.button{
    color: white !important;
}
.menuStyle.menu{
    border-bottom: 1px solid rgba(255, 255, 255,0.2) !important;
    border-radius: 0 !important;
}




/*=============================================
=            botones micrositio            =
=============================================*/
.pieModal{
    display: flex;
    justify-content: space-between;
}
.pieModal .green.left.floated{
    background-color: #E08653 !important;
}
.pieModal .green.left.floated:hover{
    background-color: #d37a46 !important;
}
.pieModal .red.left.floated,.pieModal .green.left.floated {
    /* background-color: #7C7C7C !important; */
    color: white !important;
    font-weight: 500 !important;
    border-radius: 1rem !important;
    border-radius: 1rem !important;    
}
.pieModal .red.left.floated{
    background-color: #E0E1E1 !important;
    color: #6a6767 !important;
}
.pieModal .red.left.floated:hover{
    background-color: #c2c2c2 !important;
    color: #6a6767 !important;
}
.pieModal .grupoBtn{
    display: flex;
    justify-content: space-evenly;
    width: 100% !important;
}
.pieModal .grupoAcc{
    display: flex;
    justify-content: space-evenly;
    width: 45% !important;
}
.pieModal .ui.positive.button{
    background-image: linear-gradient(#FBD21A,#E7B72B) !important;
    color: #5D5540 !important;
    font-weight: 600 !important;
    border-radius: 1rem !important;
    letter-spacing: 1px
}
.pieModal .ui.positive.button:hover{
    background-image: linear-gradient(#ffdf52,#cfaa3a) !important;
    color: #5D5540 !important;
    font-weight: 600 !important;    
}
.pieModal .ui.deny.button, .ui.negative.button{
    background-color: #7C7C7C !important;
    color: white !important;
    font-weight: 500 !important;
    border-radius: 1rem !important;
    letter-spacing: 1px
}
.pieModal .ui.deny.button:hover{
    background-color: #5a5a5a !important;
    color: white !important;    
}


/*=====  End of botones micrositio  ======*/