/* ---- COLORS ---- */
:root {
    /* Color GNS */
    --color-gns: #FF3301;
    --color-gns-rgb: 255,51,1;
    --color-gns-contrast: #ffffff;
    --color-gns-contrast-rgb: 255,255,255;
    --color-gns-shade: #e02d01;
    --color-gns-tint: #ff471a;
    --color-gns-shadow: rgba(255, 75, 75, 0.5);
  
    /* Color FORMA */
    --color-forma: #A774FF;
    --color-forma2: #8E4CCC;
    --color-forma-rgb: 167,116,255;
    --color-forma-contrast: #000000;
    --color-forma-contrast-rgb: 0,0,0;
    --color-forma-shade: #9366e0;;
    --color-forma-tint: #b082ff;
    --color-forma-shadow: rgba(142, 76, 204, 0.5);
  
    /* Color HADA */
    --color-hada: #A0D063;
    --color-hada-rgb: 160,208,99;
    --color-hada-contrast: #000000;
    --color-hada-contrast-rgb: 0,0,0;
    --color-hada-shade: #8db757;
    --color-hada-tint: #aad573;
    --color-hada-shadow: rgba(160, 208, 99, 0.5);
  
    /* Color PERSONAL */
    --color-personal: #FF7F04;
    --color-personal-rgb: 255,127,4;
    --color-personal-contrast: white;
    --color-personal-contrast-rgb: 255,255,255;
    --color-personal-shade: #e07004;
    --color-personal-tint: #ff8c1d;
    --color-personal-shadow: rgba(255, 138, 1, 0.5);
  
    /* Color FACTURA ELECTRONICA */
    --color-fe: #78B5FD;
    --color-fe-rgb: 120,181,253;
    --color-fe-contrast: #000000;
    --color-fe-contrast-rgb: 0,0,0;
    --color-fe-shade: #6a9fdf;
    --color-fe-tint: #86bcfd;
    --color-fe-shadow: rgba(112, 177, 255, 0.5);
  
    /* Color PERSONAL LITE */
    --color-personal-lite: #B58AFA;
    --color-personal-lite-rgb: 181,138,250;
    --color-personal-lite-contrast: white;
    --color-personal-lite-contrast-rgb: 0,0,0;
    --color-personal-lite-shade: #9f79dc;
    --color-personal-lite-tint: #bc96fb;
  
    /* Color GNS MAS */
    --color-gnsmas: #70B1FF;
    --color-gnsmas-rgb: 112,177,255;
    --color-gnsmas-contrast: #fff;
    --color-gnsmas-contrast-rgb: 255,255,255;
    --color-gnsmas-shade: #639ce0;
    --color-gnsmas-tint: #7eb9ff;
  
    /* Color RECIBOS DIGITALES */
    --color-recibos: #D94711;
    --color-recibos-rgb: 217,71,17;
    --color-recibos-contrast: #ffffff;
    --color-recibos-contrast-rgb: 255,255,255;
    --color-recibos-shade: #bf3e0f;
    --color-recibos-tint: #dd5929;
  
    /* Color CLOCK */
    --color-clock: #11BABA;
    --color-clock-rgb: 17,186,186;
    --color-clock-contrast: #fff;
    --color-clock-contrast-rgb: 0,0,0;
    --color-clock-shade: #0fa4a4;
    --color-clock-tint: #29c1c1;
  }
  
  .color-gns {
    --color-base: var(--color-gns); 
    --color-base-rgb: var(--color-gns-rgb);
    --color-contrast: var(--color-gns-contrast);
    --color-contrast-rgb: var(--color-gns-contrast-rgb);
    --color-shade: var(--color-gns-shade);
    --color-tint: var(--color-gns-tint);
    --color-shadow: var(--color-gns-shadow); 
  }
  
  .color-forma {
    --color-base: var(--color-forma);
    --color-base-rgb: var(--color-forma-rgb);
    --color-contrast: var(--color-forma-contrast);
    --color-contrast-rgb: var(--color-forma-contrast-rgb);
    --color-shade: var(--color-forma-shade);
    --color-tint: var(--color-forma-tint);
    --color-shadow: var(--color-forma-shadow);
  }
  
  .color-hada {
    --color-base: var(--color-hada);
    --color-base-rgb: var(--color-hada-rgb);
    --color-contrast: var(--color-hada-contrast);
    --color-contrast-rgb: var(--color-hada-contrast-rgb);
    --color-shade: var(--color-hada-shade);
    --color-tint: var(--color-hada-tint);
    --color-shadow: var(--color-hada-shadow);
  }
  
  .color-personal {
    --color-base: var(--color-personal);
    --color-base-rgb: var(--color-personal-rgb);
    --color-contrast: var(--color-personal-contrast);
    --color-contrast-rgb: var(--color-personal-contrast-rgb);
    --color-shade: var(--color-personal-shade);
    --color-tint: var(--color-personal-tint);
    --color-shadow: var(--color-personal-shadow);
  }
  
  .color-fe {
    --color-base: var(--color-fe);
    --color-base-rgb: var(--color-fe-rgb);
    --color-contrast: var(--color-fe-contrast);
    --color-contrast-rgb: var(--color-fe-contrast-rgb);
    --color-shade: var(--color-fe-shade);
    --color-tint: var(--color-fe-tint);
    --color-shadow: var(--color-fe-shadow);
  }
  
  .color-gns-mas {
    --color-base: var(--color-gnsmas);
    --color-base-rgb: var(--color-gnsmas-rgb);
    --color-contrast: var(--color-gnsmas-contrast);
    --color-contrast-rgb: var(--color-gnsmas-contrast-rgb);
    --color-shade: var(--color-gnsmas-shade);
    --color-tint: var(--color-gnsmas-tint);
    --color-shadow: var(--color-gnsmas-shadow);  
  }
  
  .color-recibos {
    --color-base: var(--color-recibos);
    --color-base-rgb: var(--color-recibos-rgb);
    --color-contrast: var(--color-recibos-contrast);
    --color-contrast-rgb: var(--color-recibos-contrast-rgb);
    --color-shade: var(--color-recibos-shade);
    --color-tint: var(--color-recibos-tint);
    --color-shadow: var(--color-recibos-shadow);
  }
  
  .color-personal-lite {
    --color-base: var(--color-personal-lite);
    --color-base-rgb: var(--color-personal-lite-rgb);
    --color-contrast: var(--color-personal-lite-contrast);
    --color-contrast-rgb: var(--color-personal-lite-contrast-rgb);
    --color-shade: var(--color-personal-lite-shade);
    --color-tint: var(--color-personal-lite-tint);
    /* --color-shadow: var(--color-personal-shadow); */
  }
  
  .color-clock {
    --color-base: var(--color-clock); 
    --color-base-rgb: var(--color-clock-rgb);
    --color-contrast: var(--color-clock-contrast);
    --color-contrast-rgb: var(--color-clock-contrast-rgb);
    --color-shade: var(--color-clock-shade);
    --color-tint: var(--color-clock-tint);
    --color-shadow: var(--color-clock-shadow); 
  }
  
/* TEXT COLOR */
.text-hada { color: var(--color-hada) }
.text-forma { color: var(--color-forma-tint) !important }


/* ----- MENU ----- */
/* .main-menu .navbar-nav .nav-item {
    border-bottom: 1px solid rgba(0,0,0, 0.1);
    padding-bottom: 13px;
} */

.main-menu.menu-light .navigation > li {
    padding: 0;
}

.main-menu.menu-light .navigation > li.active > a {
    /* background: var(--color-gns) !important; */
    box-shadow: none;
    border-radius: 0;
}

.main-menu.menu-light .navigation > li.active > a .badge {
    background-color: #C93000 !important;
}

.main-menu.menu-light .navigation li a {
  padding: 1rem 1.7rem;
}

.bg-gns { background-color: var(--color-gns); }
.bg-gns-mas { background-color: var(--color-gnsmas); }
.bg-hada { background-color: var(--color-hada); }
.bg-gns-personal { background-color: var(--color-personal); }
.bg-facturacion-electronica { background-color: var(--color-gnsmas); }
.bg-recibos-digitales { background-color: var(--color-recibos); }
.bg-clock { background-color: var(--color-clock); }
.bg-forma { background-color: var(--color-forma); }

.main-menu .navbar-header .navbar-brand .brand-logo {
    background: url(/images/logo/tu-portal-gns.svg) no-repeat;
    height: 33px;
    width: 140px;
    background-size: cover;
}

#loading-wrapper-local {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index:999999;
}

#loading-text-local {
    display: block;
    position: absolute;
}

#loading-content-local {
  display: block;
  padding: 3rem;
  width: 110px;
  height: 110px;
  border: 2px solid #F00;
  border: 2px solid transparent;
  border-top-color: var(--color-gns);
  border-bottom-color: var(--color-gns);
  border-radius: 50%;
  -webkit-animation: loader 1s linear infinite;
  -moz-animation: loader 1s linear infinite;
  -o-animation: loader 1s linear infinite;
  animation: loader 1s linear infinite;
}

#loading-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #FFF;
    z-index:999999;
}
#loading-text {
    display: block;
    position: absolute;
    top: calc(50% - 10px);
    left: calc(50% - 10px);
    color: rgb(20, 121, 60);
    width: 100px;
    height: 30px;
    margin: -7px 0 0 -45px;
    text-align: center;
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 20px;
}
#loading-content {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 170px;
    height: 170px;
    margin: -85px 0 0 -85px;
    border: 3px solid #F00;
    border: 3px solid transparent;
    border-top-color: var(--color-gns);
    border-bottom-color: var(--color-gns);
    border-radius: 50%;
    -webkit-animation: loader 1s linear infinite;
    -moz-animation: loader 1s linear infinite;
    -o-animation: loader 1s linear infinite;
    animation: loader 1s linear infinite;
}
@keyframes loader {
    0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    }
}


/*-- LOGIN --*/
/*#app, .layout--full-page { height: 100%; }*/


/* ---- PANELS DASHBOARD ---- */
.title-bottom-line{
    display: flex;
    border-bottom: 0.0625rem solid lightgray;
    width: 100%;
    padding-bottom: 20px;
}

#panels .card{
    background-color: var(--color-base);
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 1.25rem;
    line-height: 1.4375rem;
    color: #FFFFFF;
    min-height: 7.5rem;
}

#panels .card .card-body{
    min-height: 150px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}


#panels .card-body > h4{
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.4375rem;
    color: rgba(81, 81, 81, 0.8);
}

/*--- News --*/
.novedad{
    background: #1D2118;
    border-radius: 15px;
    position: relative;
    height: 100%;
    width: 100%;
}

.novedad{
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 15px;
}

.novedad .form{
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
    height: max-content;
    z-index: 0;
}

.importante .form{
    position: absolute;
    right: 0;
    top: 0;
    width: 80%;
    z-index: 0;
}

.new-content{
    position: absolute;
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
    justify-content: space-between;
    background-color: rgba(0,0,0, 0.4);
    border-radius: 15px;
}

.new-content > header > h6{
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    text-transform: uppercase;
    color: #A0D063;
}

.new-content > header > h1{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 38px;
    line-height: 45px;
    color: #FFFFFF;
}
.new-content > header > h1 > strong{
    font-weight: bold;
}

.new-content > footer > h6{
    font-family: Roboto;
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 22px;
    color: #FFFFFF;
}

.importante {
    background: linear-gradient(141.37deg, #F22843 12.16%, #A91125 86.52%);
}


.new-updates {
    border-radius: 15px;
    background: linear-gradient(141.37deg, #70B1FF 12.16%, #A0D063 86.52%);
}

.importante header > h6,
.new-updates header > h6,
.new-standar header > h6 {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: #FFD652;
}

.importante header > h1,
.new-updates header > h1,
.new-standar header > h1{
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 30px;
    line-height: 83.9%;
    color: #FFFFFF;
    padding-top: 10px;
}

.new-standar header > h1{
    font-family: Roboto;
    font-style: normal;
    font-size: 1.4rem;
    line-height: 1.6rem;
    color: #FFFFFF;
    padding-top: 10px;
}

.importante p,
.new-updates p,
.new-standar p{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #FFFFFF;
    padding-top: 10px;
}

.importante .new-content,
.new-updates .new-content{
    /* justify-content: start; */
}

.new-standar {
    min-height: 300px;
}

.destacada {
    min-height:340px;
}

.destacada p{
    display: none;
}

/*--- New Styles --*/
.ticket{
    border-left: 10px solid #DFDFDF;;
    border-radius: 0.5rem;
    margin-bottom: 1.2rem;
    background: #F9FAFC;
    border-radius: 0px 10px 10px 0px;
}

#tickets-list .active,
.ticket:hover{
    border-left: 10px solid var(--color-base) !important;
    border-radius: 0 0.5rem 0.5rem 0px;
    box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08) !important;
    background-color: white;
}

.ticket:hover{ cursor: pointer; background-color: white; }

.ticket .avatar{
    background-color: #EFF2F7;
    width: 50px;
    height: 50px;
    margin: 0px;   
    padding: 8px;
}


.ticket .card-title{
    margin-bottom: 0;
}

.ticket-content-scroll-area{
    padding: 0 1.3125rem;
    margin: 0 -1.3125rem;
}

#tickets-list .ticket:last-child {
    margin-bottom: 40px;
}

#tickets-list .color-hada .card-body header > div:first-child .avatar{
    padding: 10px 0px;
}

.ticket .badge-estado {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
    text-align: right;
    letter-spacing: 0.923077px;
    color: #FE9610;
}

.ticket .badge-producto { background-color: var(--color-base) !important; }
.badge-producto { background-color: var(--color-base) !important; }

.ticket .icon-paperclip{
    line-height: 1.8rem;
    opacity: 0.5;
}

.ticket-view header{
    z-index: auto !important;
    background: #FFFFFF;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0,0,0, 0.1);
}

.ticket-view header img{
    background-color: #EFF2F7;
    width: 40px;
    height: 40px;
    padding: 8px;
}

.ticket-view .actions > a{ margin-left: 2rem;}

.ticket-view .attached{ width: fit-content;}
.ticket-view .attached-info{
    margin-bottom: 1rem !important;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.ticket-view .attached-info:last-child{border-bottom: none;}

.ticket-view .attached-info > i {padding-right: 0.5rem;}

#ticket-view-detail .card-body ol,
#ticket-view-detail .card-body ul,
#ticket-view-detail .card-body dl {
    margin-left: 2rem !important;
}

/*--- Modal Intro ---*/
#modal-intro .carousel-item > img{
    max-width: 200px;
}


/* Input with icon */
.form-control-position {
    position : absolute;
    top : 2px;
    right : 0;
    z-index : 2;
    display : block;
    width : 2.5rem;
    height : 2.5rem;
    line-height : 2.5rem;
    text-align : center;
  }
  
/*---------------------------------
Input Icon
---------------------------------*/
.position-relative .form-control {
padding-right : calc( 1.25em + 1.4rem + 1px);
}
.position-relative .form-control.form-control-lg ~ .form-control-position {
top : 10px;
}
.position-relative .form-control.form-control-sm ~ .form-control-position {
top : -3px;
}


/* Input Icon left */
.has-icon-left .form-control {
    padding-right : 2rem;
    padding-left : 3rem;
  }
  
  .has-icon-left .form-control-position {
    right : auto;
    left : inherit;
  }
  .has-icon-left .form-control-position i {
    position : relative;
    left : 5px;
    color : rgba(34, 41, 47, 0.4);
  }



/* ----- Modal ----- */
.modal-backdrop {
    background-color: #000;
    opacity: 0.8 !important;
}

.modal-content{
    background: #F2F2F2;
    border-radius: 17px;
}

.modal-footer .btn{
    border-radius: 28px !important;
    height: 2.875rem; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-footer .btn-primary {background: var(--color-gns) !important;}

.modal .quill-editor,
.modal .con-input-upload{
    background: white;
}
.vs-pagination--ul{margin-bottom: 0;}

/*********/
/* LOGIN */
/*********/
.gns-loading {
    background-color: white;
    /* overflow: hidden; */
    display: flex;
    position: relative;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    }

    .gns-loading ul {
    display: inline-block;
    width: 132px;
    height: 130px;
    position: relative;
    list-style: none;
    }

    .gns-loading ul li:after,
    .gns-loading ul:after {
    width: 2em;
    height: 2em;
    /* background-color: yellow; */
    }

    .gns-loading ul li:after,
    .gns-loading ul:after {
    content: url("data:image/svg+xml,%3Csvg width='31' height='30' viewBox='0 0 31 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31 7.5C29.5238 1.9186 22.5119 1.12699e-07 15.131 4.35331e-07C8.11904 7.41831e-07 1.10714 2.09302 -9.9113e-07 7.32558C-9.60634e-07 8.02325 -9.30137e-07 8.72094 -8.99641e-07 9.41861C0.369047 11.5116 1.47618 13.9535 2.21428 15.6977C4.42857 20.5814 7.74999 24.7674 11.8095 27.907C12.5476 28.6047 13.6548 29.6512 15.131 30C15.131 30 15.8691 30 16.6071 30C17.7143 29.6512 18.8214 28.6047 19.5595 27.907C23.6191 24.4186 26.5714 20.2326 28.7857 15.3488C29.5238 13.6047 30.631 11.1628 31 8.72093C31 7.32558 31 8.52558 31 7.5Z' fill='%23FF3301'/%3E%3C/svg%3E%0A");
    display: block;
    }

    .gns-loading ul:after {
    position: absolute;
    top: 2.8em;
    display: none;
    }

    .gns-loading li {
    position: absolute;
    padding-bottom: 5.6em;
    top: 0;
    left: calc(50% - 1rem);
    }

    .gns-loading li:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: 0.125s;
    }

    .gns-loading li:nth-child(1):after {
    animation-delay: 0.125s;
    }

    .gns-loading li:nth-child(2) {
    transform: rotate(45deg);
    animation-delay: 0.25s;
    }

    .gns-loading li:nth-child(2):after {
    animation-delay: 0.25s;
    }

    .gns-loading li:nth-child(3) {
    transform: rotate(90deg);
    animation-delay: 0.375s;
    }

    .gns-loading li:nth-child(3):after {
    animation-delay: 0.375s;
    }

    .gns-loading li:nth-child(4) {
    transform: rotate(135deg);
    animation-delay: 0.5s;
    }

    .gns-loading li:nth-child(4):after {
    animation-delay: 0.5s;
    }

    .gns-loading li:nth-child(5) {
    transform: rotate(180deg);
    animation-delay: 0.625s;
    }

    .gns-loading li:nth-child(5):after {
    animation-delay: 0.625s;
    }

    .gns-loading li:nth-child(6) {
    transform: rotate(-135deg);
    animation-delay: 0.75s;
    }

    .gns-loading li:nth-child(6):after {
    animation-delay: 0.75s;
    }

    .gns-loading li:nth-child(7) {
    transform: rotate(-90deg);
    animation-delay: 0.875s;
    }

    .gns-loading li:nth-child(7):after {
    animation-delay: 0.875s;
    }

    .gns-loading li:nth-child(8) {
    transform: rotate(-45deg);
    animation-delay: 1s;
    }

    .gns-loading li:nth-child(8):after {
    animation-delay: 1s;
    }

    .gns-loading li {
    animation: dotAnimation 2.2s infinite;
    }

    @keyframes dotAnimation {

    0%,
    55%,
    100% {
        padding: 0 0 100px 0;
    }

    5%,
    50% {
        padding: 60px 0;
    }
    }

    .gns-loading li:after {
    animation: dotAnimationTwo 2.2s infinite;
    }

    @-webkit-keyframes dotAnimationTwo {
        0%,
        55%,
        100% {
            opacity: 1;
            transform: scale(1);
        }

        5%,
        50% {
            opacity: 0;
            transform: scale(0.5);
        }
    }

.vs-popup--content {overflow-x: hidden !important;}



/* ----- TABLAS ----- */
.vs-con-table table {
    width: 100%;
    font-size: 1rem !important;
    color: #626262 !important;
    border-collapse: collapse;
}
.vs-table--tbody-table {
    width: 100%;
    margin: 0;
    min-width: 400px;
    position: relative;
}
.vs-table--thead {
    z-index: 200;
    width: 100%;
    position: relative;
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}
.vs-table--tbody-table tr {
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    background: #fff;
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
    border-bottom: 1px solid #F8F8F8 !important;
}

.vs-table--thead {
    border-bottom: 2px solid #F8F8F8 !important;
}
th {
    text-align: left;
    font-size: 1rem !important;
    vertical-align: top;
    padding: 1rem !important;
}
.vs-table--tbody-table .tr-values td {
    padding: 10px;
}
.vs-con-table td {
    padding: 1rem !important;
    vertical-align: middle;
}
.vs-table--td{
    white-space: normal;
}

button,
a.btn{border-radius: 20px !important;}

.btn-flecha-atras{
    font-size: 2rem;
    background: transparent;
    border: none;
}

form.validation label.error {
    color: #ea5455 !important;
    font-size: 0.75rem;
    font-weight: bold;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--primary) !important; }

.select2-container--default .select2-selection--single { border: 1px solid #d9d9d9; }

#accordionRespuestasTicket img {
    width: 100% !important;
    height: auto !important;
}

#accordionRespuestasTicket .date {
    display: flex;
    max-width: min-content;
    font-size: 0.9rem;
    opacity: 0.9;
}

#accordionRespuestasTicket .collapse-title .icon-paperclip{
  font-size: 0.9rem;
  padding-top: 0.5rem;
}







/* --- NOTICIAS --- */  
#noticias .grid-item {
  width: calc(25% - 20px);
  margin-bottom: 20px;
}

#noticias { margin-right: -20px; padding: 1rem;}

#noticias .wrapper{
  max-width: 100% !important;
}

#noticias .grid-sizer {
  width: calc(25% - 20px);
}

@media screen and (min-width: 1900px) {
  .grid-item { width: 300px !important; }
}

@media screen and (max-width: 2100px) {
  .grid-item { width: calc(20% - 20px) !important; }
}

@media screen and (max-width: 1900px) {
  .grid-item { width: calc(25% - 20px) !important; }
}

@media screen and (max-width: 1600px) {
  .grid-item { width: calc(33.33% - 20px) !important; }
}

@media screen and (max-width: 800px) {
  .grid-item { width: calc(50% - 20px) !important; }
}

@media screen and (max-width: 550px) {
  .grid-item { width: calc(100% - 20px)!important; }
}

#noticias > .wrapper > article {
  background: #FFFFFF;
  -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  /* width: calc(25% - 68px); */
  padding: 34px;
  /* margin: 11px; */
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

/* #noticias article {
  float: left;
} */

#noticias > .wrapper > article:hover {
  -webkit-box-shadow: 0px 4px 30px var(--color-shadow);
  box-shadow: 0px 4px 30px var(--color-shadow);
}

#noticias > .wrapper > article:hover footer .arrow {
  visibility: visible
}

#noticias > .wrapper > article header {
  position: relative;
  max-width: calc(100% + 68px);
  /* overflow: hidden !important; */
  margin: -34px;
  height: auto;
  border-radius: 10px 10px 0px 0px;
}
  
#noticias > .wrapper > article header img {
  width: 100%;
  height: auto;
  border-radius: 10px 10px 0 0;
}

/* #noticias > .wrapper > article header img.fit-width {
  height: auto;
  width: 100%;
} */

#noticias > .wrapper > article > .likes {
  bottom: 0px;
  width: 63px;
  height: 63px;
  margin-bottom: 25px;
  left: 37px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#noticias > .wrapper > article > .likes .bg {
  fill: white;
  width: 63px;
  height: 63px;
  position: absolute;
}

#noticias>.wrapper > article > .likes .bg {
  -webkit-filter: drop-shadow(0px 4px 30px rgba(160, 208, 99, 0.5));
  filter: drop-shadow(0px 4px 30px rgba(160, 208, 99, 0.5));
}

#noticias > .wrapper > article > .likes .noticia-content {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  flex-flow: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#noticias>.wrapper > article > .likes .noticia-content i {
  padding-bottom: 4px;
}

#noticias > .wrapper > article > .likes .noticia-content i.fa {
  color: var(--color-gns);
}

#noticias > .wrapper > article > .likes .noticia-content h5 {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  /* line-height: 34px; */
  letter-spacing: -0.666667px;
  color: #21293A;
  margin: 0;
  padding: 0;
}

#noticias > .wrapper > article .noticia-content .tag {
  font-weight: bold;
  font-size: 12px;
  line-height: 17px;
  padding: 0px;
  margin-bottom: 0;
}

#noticias > .wrapper > article .noticia-content .tag a{
  color: var(--color-base) !important;
}

#noticias > .wrapper > article .noticia-content .title {
  font-weight: bold;
  font-size: 22px;
  line-height: 25px;
  letter-spacing: -0.666667px;
  color: #21293A;
  margin: 10px 0;
}
#noticias>.wrapper>article .noticia-content .post-date {
  font-weight: normal;
  font-size: 0.75rem;
  line-height: 1rem;
  color: #8E99AF;
  opacity: 0.8;
  max-width: 200px;
}

#noticias>.wrapper>article .noticia-content .description {
  font-weight: normal;
  font-size: 14px;
  line-height: 17px;
  color: #8E99AF;
}


#noticias > .wrapper > article footer {
  margin-top: 2.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row;
  flex-flow: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#noticias > .wrapper > article footer .arrow {
  fill: var(--color-base);
  visibility: hidden;
  width: 53px;
  height: 17px;
}

#noticias > .wrapper > article footer .socialLinks i {
  color: #DBDBDB;
  font-size: 12px;
  padding: 0 10px;
}

#noticias > .wrapper > article footer .socialLinks li:last-child i {
  padding-right: 0;
}

#noticias > .wrapper > article footer .socialLinks i:hover {
  color: #202020;
}

#noticias > .wrapper > article footer .socialLinks ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row;
  flex-flow: row;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin: 0px;
  padding: 0px;
}

#noticias > .wrapper > article footer .socialLinks ul li {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
  
/*  html,
  body {
    overflow: hidden;
    position: relative;
    height: 100%;
  }*/
  
  
  #mainMenu>ul>li:nth-child(6) a {
    background-color: var(--color-base);
    padding: 8px 24px;
    border-radius: 100px;
    border-bottom: none !important;
    -webkit-box-shadow: var(--component-shadow);
    box-shadow: var(--component-shadow);
  }
  
  #mainMenu>ul>li:nth-child(6) a:hover {
    background-color: var(--color-tint);
  }
  
  #mainMenu>ul>li:nth-child(6) a:focus {
    background-color: var(--color-shade);
  }
  
  
  @media all and (max-width: 800px) {
    .header-with-text h2 {
      font-size: 40px;
      font-size-adjust: initial;
      line-height: normal;
      -webkit-transition-delay: 0.5s;
      transition-delay: 0.5s;
      -webkit-transition-duration: 1.0s;
      transition-duration: 1.0s;
    }
  }
  
  @media all and (max-width: 700px) {
    .header-with-text h2 {
      font-size: 30px;
      font-size-adjust: initial;
      line-height: normal;
    }
  }
  
  .header-with-text .wrapper {
    z-index: 1;
  }
  
  .wrapper {
    margin-right: auto;
    /* 1 */
    margin-left: auto;
    /* 1 */
  
    max-width: 1350px;
    /* 2 */
  }


  .round { border-radius: 1.5rem !important; }
  
.tour-over{
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    z-index: 10000;   
    overflow: hidden;
    display: none;
}
.tour-over.active,
.active .tour-over{ display: block; }

#tour-step-1 { top: 0px; left: 260px; }
#tour-step-2 { top: 4.5rem; left: 0; }

#tour-step-3a {     
  top: 0;
  left: 0;
  height: 15rem; 
  width: 260px;
}
#tour-step-3b { 
  top: 0;
  left: 260px; 
}
#tour-step-3c { 
  left: 0;
  top: 19rem;
  height: 100%;
  width: 260px;
}


.avatar img {
    border-radius: 50%;
    background: white;
    padding: 6px;
}

.mail-message-wrapper ol,
.mail-message-wrapper ul,
.mail-message-wrapper dl { margin-left: 1.5rem !important; }

#accordionRespuestasTicket .card,
#accordionCabezalTicket .card { border-radius: 0.5rem; }
#accordionRespuestasTicket .card.active,
#accordionCabezalTicket .card.active{
  box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08) !important; 
  margin: -1px -10px;
}

#accordionCabezalTicket .show ol,
#accordionCabezalTicket .show ul,
#accordionCabezalTicket .show dl { margin-left: 1.5rem !important; }


#accordionCabezalTicket .attached > a,
#accordionRespuestasTicket .attached > a{
  padding: 1rem;
  border-radius: 0.5rem;
  border: none;
  color: #626262 !important;
  background-color: whitesmoke;
}

.input-select,
.vs-select--input{
  /* border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 2px solid #D8D8D8 !important; */
}
.vs-select--input {
  border: 1px solid #ccc !important;
  margin-top: 0.5rem;
}

.input-in-row {
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  align-items: baseline;
  width: 100% !important;
}

.input-in-row .vs-select--icon {
  top: 57%;
}

.input-in-row label{ 
  padding-right: 1rem;
  width: inherit;
  max-width: max-content;
  min-width: 5.5rem;
}

.input-in-row .input-select-con,
.input-in-row .vs-con-input{
  width: 100%;
}

.input-in-row .input-select-con input{
  background-color: rgba(255, 51, 1, 0.03);
}

@media (max-width: 450px){
  .input-in-row {
    display: flex;
    flex-flow: column;
  }
}

.vs-select--label { padding-left: 0px !important; }
.vs-select--item:focus, .vs-select--item:hover {
  background: whitesmoke !important;
  border-radius: 0px !important;
}
.vs-select--options button { border-radius: 0 !important;}

.vs-input--input, .vs-select, .vs-select--options{
  box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1) !important;
}

.app-content { height: 100%;}
.app-content .content-area-wrapper {
  top: 4.5rem !important;
  margin: auto !important;
}

html body .content.app-content .content-area-wrapper{
  height: calc(100% - 4.5rem) !important;
}

.app-content .sidebar { height: 100%;}

@media (max-width: 575.98px){
  .content.app-content .content-area-wrapper {
    margin: 0px !important;
  }
}

a:link{
  text-decoration: none !important;
}


.fab { display: none; }
@media (max-width: 991px){
  .fab {
    background: var(--color-gns);
    border-radius: 50% !important;
    width: 56px;
    height: 56px;
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 10;
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
    display: flex;
      justify-content: center;
      align-items: center;
    border: none;
  }

  .fab i {
    font-size: 2rem;
    color: white;
  }
}

@media (max-width: 450px){
  .con-vs-popup .vs-popup {
    background: rgb(255, 255, 255);
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
  .vs-popup--content{
    max-height: calc(100% - 50px) !important;
  }

  #app .content-header .breadcrumb {
    display: none
  }
}

html body.navbar-sticky .navbar-container {
  padding-left: 1rem;
}

.navbar-expand-lg .navbar-nav { 
  display: flex;
  flex-flow: row nowrap;
}

.main-menu .navbar-header .navbar-brand {
  margin-top: 0;
}

.main-menu .navbar-header .modern-nav-toggle{
  padding: 0;
}

#main-menu-navigation{
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
}
#main-menu-navigation .nav-toggle{
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-menu .navbar-header{
  display: flex;
  align-items: center;
  width: 100%;
  height: 4.5rem;
}
.main-menu ul.navigation-main > li:first-child{
  margin-top:0;
}
.main-menu.menu-light .navigation > li > a:hover,
.main-menu.menu-light .navigation > li > a,
.main-menu.menu-light .navigation li a {
  padding-left: 2.1rem !important;
}

.main-menu.menu-light .navigation > li > a:hover{
  background-color: #FAFAFA;
}

.hr-footer { margin-top: 3rem }