@font-face {
    font-family: "MyriadProSemiCn";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/MyriadPro-SemiCn.otf");
}
@font-face {
    font-family: "MyriadProSemiboldSemiCn";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/MyriadPro-SemiboldSemiCn.otf");
}
@font-face {
    font-family: "MyriadProBoldSemiCn";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/MyriadPro-BoldSemiCn.otf");
}
@font-face {
    font-family: "MyriadProBlackSemiCn";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/MyriadPro-BlackSemiCn.otf");
}
@font-face {
    font-family: "MyriadProCond";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/MyriadPro-Cond.otf");
}
@font-face {
    font-family: "MyriadProLightSemiCn";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/MyriadPro-LightSemiCn.otf");
}
/*Cambio el color de la barra de navegacion*/
.skin-blue .main-header .navbar {
    background-color: #27516b !important;
}
.skin-blue .main-header .logo {
    background-color: #233c4b !important;
}
/*Cambio el color y tamaño de la letras en el saldo disponible*/
.skin-blue .sidebar-menu > li.header {
    color: #fff !important;
    font-size: 1.9em;
    text-align: center;
    padding: 0.7em;
}
#sDisponible {
    font-size: 0.7em;
}
#montoDisponible {
    font-weight: bold;
    margin-top: -0.3em;
}

/*cargo linea a sub menu*/
.sidebar-menu .treeview-menu > li + li {
    padding: 0.3em;
    border-top: 1px solid #334248;
}
.sidebar-menu .treeview-menu > li {
    padding: 0.3em;
}

.login-box-body {
    border-radius: 0.5em;
    border: 1px solid #ccc;
}
.login-logo {
    margin-bottom: 15px;
}
.login-page,
.register-page {
    background: #e4e4e4;
}
.toast-top-right {
    top: 55px !important;
}
#toast-container .toast:hover {
    box-shadow: none !important;
}
#toast-container .toast {
    opacity: 0.9 !important;
}

.info-box-content-fix {
    overflow: auto;
    min-height: 120px;
}
.info-box-icon-fix {
    height: 120px;
    line-height: 105px;
}
.progress-description-fix {
    font-size: 12px !important;
    white-space: normal !important;
}
.info-box-fix {
    cursor: pointer;
}
.inactive {
    background: #9f9f9f !important;
}

.htColumnHeaders {
    border: 1px solid #ccc;
}
.handsontable th {
    background-color: #337ab7 !important;
    color: #fff !important;
    font-size: 0.8em !important;
    font-weight: bold !important;
}
.handsontable tr:first-child th,
.handsontable tr:first-child td {
    border-top: none !important;
}
.handsontable th:first-child,
.handsontable td:first-of-type,
.handsontable .htNoFrame + th,
.handsontable .htNoFrame + td {
    border-left: none !important;
}

.handsontable th,
.handsontable td {
    border-left: 1px solid #64a4e1 !important;
    border-bottom: 1px solid #64a4e1 !important;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    border-top-color: #920e3d !important;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
    color: #fff !important;
    background-color: #ab2253 !important;
    border-radius: 0.5em !important;
}
.handsontable table.htCore {
    border-top: 2px solid #63beff !important;
}

.superiorPreview {
    margin: 0px auto;
    padding: 0.4em;
    background: #e9e9e9;
    overflow: auto;
    color: #fff;
    /*    border-radius: 1em;*/
}
.bordesPreview {
    overflow: auto;
    min-height: 150px;
    padding: 0.3em;
    /*    background-color: #D10D37;*/
}
.greatPreview {
    padding: 7px 5px;
    color: #fff;
    font-size: 16px;
    min-height: 15px;
    overflow: hidden;
    text-align: center;
    border-bottom: 2px solid #fff;
    font-weight: bold;
    margin-left: 2em;
    margin-right: 2em;
    font-size: 1.5em;
    margin-bottom: 1.5em;
}
.resultTotalKpi {
    font-size: 0.8em !important;
    font-weight: 400 !important;
    margin-top: 0.2em;
    text-align: center;
    color: #666;
}
.resultTotalKpi strong {
    font-size: 1.3em;
}
.simMeta {
    width: 2em;
    margin-top: -19px;
    display: inline;
    left: 0em;
    position: absolute;
}
.rzslider .rz-pointer::after {
    width: 0px !important;
}
.rzslider .rz-pointer {
    top: -10px !important;
    width: 24px !important;
    height: 24px !important;
    border: 3px solid #ccc;
    background-color: #fff !important;
}
donut > svg {
    display: block;
    margin: 0px auto;
}
.percentRendimiento {
    margin: 0px auto;
    text-align: center;
    margin-top: 35px;
    position: absolute;
    width: 100%;
    font-size: 1.8em;
    font-weight: bold;
    margin-left: -0.5em;
}
.percentRendimiento > div {
    font-size: 0.5em;
    margin-top: -5px;
}
.indicadoresResult {
    font-size: 2.5em;
    font-weight: bold;
    border-left: 5px solid;
    margin-bottom: 0.5em;
}
.indicadoresResult > span {
    display: block;
    font-size: 0.4em;
    margin-top: -12px;
}
.circuloMeta {
    margin-left: 0px;
    color: #fff;
    margin-top: -14px;
    font-weight: bold;
    font-size: 11px;
    text-align: center;
    padding: 0.5em;
    border-radius: 50%;
    background: rgba(81, 78, 78, 0.3);
}

.color-picker-hue > .color-picker-overlay {
    margin-top: -150px !important;
}
.tabsImgUpload > div > .tab-content {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 1em;
    overflow: auto;
}
.tabsImgIconosUpload > div > .tab-content {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 1em;
    overflow: auto;
    height: 350px;
}
.nav-tabs > li > a {
    border-color: #eee #eee #ddd;
    background-color: #f8f8f8;
    color: #727272;
}

.fileinput-preview.fileinput-exists > img {
    width: 100%;
}

.listA {
    cursor: grabbing;
    width: 100%;
    display: block;
    background: #367fa9;
    margin-bottom: 0.5em;
    padding: 0.5em;
    text-align: center;
    color: #fff;
    /*    font-weight: bold;*/
    font-size: 11px;
    border: 1px solid #1a638d;
}
.listB {
    cursor: grabbing;
    width: 100%;
    display: block;
    background: #008d4c;
    margin-bottom: 0.5em;
    padding: 0.5em;
    text-align: center;
    color: #fff;
    font-weight: bold;
    border: 1px solid #006d2c;
}
.dropzone {
    background: #efefef;
    min-height: 150px;
    overflow: auto;
    padding: 1em;
}

.imgGray img {
    -webkit-filter: grayscale(100%);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-backface-visibility: hidden;
    filter: grayscale(100%);
}

.imgGray img:hover {
    -webkit-filter: grayscale(0%);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-backface-visibility: show;
    filter: grayscale(0%);
}
.nogray {
    -webkit-filter: grayscale(0%) !important;
    -webkit-transition: all 0.5s ease !important;
    -moz-transition: all 0.5s ease !important;
    -webkit-backface-visibility: show !important;
    filter: grayscale(0%) !important;
}
div.tabsImgIconosUpload.imgsIconosNivel > div > div > div > div > a > i.fa-check-circle-o.fa-5x {
    margin-left: 0.8em !important;
    margin-top: 0.7em !important;
    font-size: 4em !important;
}
.sizeIMGDcoin {
    width: auto;
}
.boldTextNivelActual {
    font-family: "MyriadProSemiboldSemiCn";
}
div.progresBarSection > .progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 18px;
    line-height: 25px;
    color: #fff;
    text-align: center;
    background-color: #337ab7;
    -webkit-box-shadow: inset 0 -11px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 -11px 0 rgba(0, 0, 0, 0.15);
    -webkit-transition: width 0.6s ease;
    -o-transition: width 0.6s ease;
    transition: width 0.6s ease;
}
div.progress.progresBarSection {
    height: 25px;
}
.desafioCursandoColor,
div.row.misDesafiosEmpresa > div.infoDesafio {
    min-height: 1em;
}
div.metasNivelDesafioInfo > div > .img-responsive {
    display: initial;
}
.desplegarAbajoInfoDesafio {
    line-height: 2.5;
    font-size: 3vh;
    color: #a6a7a7;
}
.regresarDesafios {
    font-size: 2.5vh;
    color: #a6a7a7;
    transform: rotate(90deg);
    text-align: center;
    line-height: 3;
}
.textoDesafioVolverAtras {
    text-align: left;
    padding-left: 0;
}
.puntosGanadosText {
    text-align: left;
    line-height: 1.5;
    padding-left: 0;
}
.sectionTopDesafioInfo {
    padding-top: 3vh;
}
.sizeIconoNivel {
    width: 5vh;
    vertical-align: top;
    margin-top: 1vh;
}
.sectionNivelAlcanzado {
    line-height: 1;
    color: #fff;
    text-align: left;
    font-family: "MyriadProLightSemiCn";
}
.sectionNivelAlcanzado > span {
    font-size: 3vh;
}
.sectionDcoinGanadas {
    background: transparent;
    padding: 0;
}
.puntosGanadosText > span {
    font-size: 25px;
    color: #fff;
}
.sinNivelAlcanzadoSize {
    font-size: 3.5vh;
    line-height: 0.9;
    font-family: "MyriadProLightSemiCn";
}
div.progresBarSection > .progress-bar {
    box-shadow: inset 0px -10px 0px rgba(0, 0, 0, 0.15);
}
div.completeBarSection > .progress-bar {
    box-shadow: inset 0px -10px 0px rgba(0, 0, 0, 0.15);
    border-radius: 0;
}
.sectionProximoNivel {
    text-align: center;
    padding-top: 2em;
    padding-bottom: 1em;
}
.sectionPorcentajeAvance {
    padding-left: 10vh;
    padding-top: 3.5vh;
}
.sectionPorcentajeAvance > span {
    color: #fff;
    font-size: 10vh;
}
.miResultadoActual > span {
    color: #fff;
    font-size: 6vh;
    line-height: 1.5;
}
.flechaMiResultado {
    vertical-align: super !important;
    padding-right: 1vh;
}
.nombreDesafioInfo {
    color: #fff;
    font-size: 4em;
    /*text-shadow: -2px 3px 6px #424242;*/
    font-family: "MyriadProSemiboldSemiCn";
}
.textoProxNivel {
    color: #fff;
    font-size: 3vh;
}
.circleNivelDesafioAlcanzado1 {
    border: 3px solid #62c5ee;
    background-color: #62c5ee;
    border-radius: 50%;
    width: 7vh;
    height: 7vh;
    text-align: center;
    padding-top: 0;
    padding-left: 0.25vh;
    /* margin-top: 0vh; */
    padding-right: 0;
    -webkit-box-shadow: 2px 4px rgba(0, 0, 0, 0.6);
}
.circleNivelDesafioAlcanzado2 {
    border: 3px solid #64ca44;
    background-color: #64ca44;
    border-radius: 50%;
    width: 7vh;
    height: 7vh;
    text-align: center;
    padding-top: 0;
    padding-left: 0.25vh;
    padding-right: 0;
    -webkit-box-shadow: 2px 4px rgba(0, 0, 0, 0.6);
}
.circleNivelDesafioAlcanzado3 {
    border: 3px solid #f66827;
    background-color: #f66827;
    border-radius: 50%;
    width: 7vh;
    height: 7vh;
    text-align: center;
    padding-top: 0;
    padding-left: 0.25vh;
    padding-right: 0;
    -webkit-box-shadow: 2px 4px rgba(0, 0, 0, 0.6);
}
.circleNivelDesafioAlcanzado4 {
    border: 3px solid #ed1846;
    background-color: #ed1846;
    border-radius: 50%;
    width: 7vh;
    height: 7vh;
    text-align: center;
    padding-top: 0;
    padding-left: 0.25vh;
    padding-right: 0;
    -webkit-box-shadow: 2px 4px rgba(0, 0, 0, 0.6);
}
.miResultadoActual {
    border-radius: 5px;
    border: 3px solid #fff;
    height: 10vh;
    text-align: center;
    line-height: 4.5em;
    margin-top: 5.5vh;
    width: 20%;
}
.desafioNivel0Color {
    background-color: rgba(237, 24, 70, 0.75) !important;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}
.desafioNivelCompletadoColor {
    background-color: rgba(140, 190, 87, 0.9) !important;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}
.progresBarSection {
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
    box-shadow: inset 0px 25px 0px rgba(0, 0, 0, 0.15);
}
.informacionDesafio {
    background-color: #fff !important;
    min-height: 45vh;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding: 50px;
    padding-top: 0;
    padding-bottom: 0;
    display: none;
}
.lineSeparadorInfoDesafios {
    border-bottom: 0.01px solid;
    padding-top: 15px;
    border-color: #a6a7a7;
}
.descripcionDesafioInfo {
    font-size: 4vh;
    color: #a6a7a7 !important;
    font-family: "MyriadProSemiCn";
}
div.informacionDesafio > div.container > div.row > div.sectionDescripcionDesafioInfo {
    padding-top: 2vh;
    color: #a6a7a7 !important;
    font-family: "MyriadProSemiCn";
}
div.informacionDesafio > div.container > div.row > div.separadorInformacionNiveles > div > span {
    font-size: 18px;
    color: #a6a7a7;
    font-family: "MyriadProSemiboldSemiCn";
}
div.informacionDesafio > div.container > div.row > div.separadorInformacionNiveles {
    padding-top: 2.5vh;
}
div.informacionDesafio > div.container > div.row > div.informacionNivelesDesafioInfo {
    padding-top: 2vh;
}
.circleNivel1,
.circleNivel2,
.circleNivel3,
.circleNivel4,
.circleNivelGray {
    border-radius: 50%;
    width: 15vh;
    height: 15vh;
    text-align: center;
    padding-top: 3vh;
    padding-left: 0.5vh;
    padding-right: 0;
    -webkit-box-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);
}
.circleNivel1 {
    border: 3px solid #62c5ee;
    background-color: #62c5ee;
}
.circleNivel2 {
    border: 3px solid #64ca44;
    background-color: #64ca44;
}
.circleNivel3 {
    border: 3px solid #f66827;
    background-color: #f66827;
}
.circleNivel4 {
    border: 3px solid #ed1846;
    background-color: #ed1846;
}
.circleNivel1 > img,
.circleNivel2 > img,
.circleNivel3 > img,
.circleNivel4 > img,
.circleNivelGray > img {
    width: 9.5vh;
}
.sectionNombreNivel {
    padding-top: 1vh;
}
.circleNivelGray {
    border: 1px solid rgba(166, 167, 167, 0.3);
    background-color: rgba(166, 167, 167, 0.3);
    -webkit-box-shadow: inset -4px 5px 5px rgba(0, 0, 0, 0.3);
}
.dcoinSize {
    background: transparent;
    padding: 0;
    margin-top: 0.25em;
    background-color: rgba(166, 167, 167, 0.3) !important;
    min-height: 10vh;
    -webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
    line-height: 0;
}
.metaNivelDesafioInfoValue {
    font-size: 1.5em !important;
    color: #bf1f3c !important;
    font-family: "MyriadProBoldSemiCn" !important;
}
.sectionNombreNivel > span {
    color: #4f4f4f;
    font-family: "MyriadProSemiboldSemiCn";
    font-size: 4vh;
}
.sectionDescripcionMeta > span {
    color: #a6a7a7;
    font-family: "MyriadProSemiCn";
    font-size: 16px;
}
.sectionDescripcionMeta {
    padding-top: 1vh;
}
.gananciaAlAlcanzar {
    font-size: 3vh !important;
    color: #a6a7a7 !important;
    font-family: "MyriadProSemiboldSemiCn" !important;
}
div.sectionMetaNivel > span {
    font-size: 1.5em;
    color: #a6a7a7;
    font-family: "MyriadProSemiCn";
}
.sectionMetaNivel {
    padding-bottom: 3vh;
}
.dcoinSizeGray {
    background: transparent;
    padding: 0;
    margin-top: 0.25em;
    /* width: 75% !important; */
    background-color: rgba(166, 167, 167, 0.3) !important;
    min-height: 10vh;
    -webkit-box-shadow: inset -4px 4px 11px rgba(0, 0, 0, 0.3);
    line-height: 0;
}
.metaNivelDesafioInfoValueGray {
    font-size: 1.5em !important;
    color: #a6a7a7 !important;
    font-family: "MyriadProBoldSemiCn" !important;
}
.marcaSucursalNombre {
    font-size: 6vh;
    /*text-shadow: 3px 3px 6px #424242;*/
}
.botonDesplegarMenu {
    background-color: #e0e0e0;
    padding: 0.5em;
    margin-top: 1em;
    border-radius: 0.5em;
    text-transform: uppercase;
    border: 1px solid #ccc;
}
.infoRight3,
.noResponsiveInfo {
    display: none;
}

/*div.tabDesafios>ul.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    border: 3px solid rgba(237, 236, 237, 1);
    border-bottom-color: rgba(191, 31, 60, 0.9);
    background-color: rgba(237, 236, 237, 1);
}*/
/*div.tabDesafios>ul.nav>li>a:hover{
    text-decoration: none;
    background-color: #bf1f3c !important;
    color: white;
    border-bottom-color: rgba(191, 31, 60, 0.9);
}
div.tabDesafios>ul.nav-tabs {
    border-bottom: 0px solid #ddd;
}
div.container.sectionDesafios>div.row>div>ul.nav-tabs>li.active>a{
    background-color: rgba(237, 236, 237, 1) !important;
    border: 3px solid rgba(237, 236, 237, 1);
    border-bottom-color: rgba(191, 31, 60, 0.9);
    background-color: rgba(237, 236, 237, 1);
}*/
div.row.desafiosEmpresa {
    padding: 0;
    margin: 0;
    padding-bottom: 2em;
    padding-top: 1em;
}
div.row.desafiosEmpresa > div {
    text-align: center;
    background-color: #fff;
    height: 27.5vh;
    padding-left: 0;
    padding-right: 0;
    border-bottom: 7.5px solid #fff;
    border-bottom-color: #bf1f3c;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: -4px 11px 13px -4px rgba(0, 0, 0, 0.36);
}
div.row.desafiosEmpresa > div > div {
    height: 27.5vh;
    background-size: 55%;
    background-position: center;
}
div.sectionDesafios {
    padding-left: 0;
    padding-right: 0;
    background-color: rgba(237, 236, 237, 1);
}
.bannerDesafios {
    height: 59vh;
    background-image: url(/img/bannerDesafios.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
div.row.separadorDesafios {
    padding: 0px;
    margin: 0px;
    padding-top: 1.5em;
    padding-bottom: 2em;
}
.textoSeparadorDesafios {
    font-size: 5.5vh;
    font-family: "MyriadProBlackSemiCn";
    color: #a6a7a7;
}
.separadorCantidadDesafios {
    background-color: transparent;
    line-height: 1;
    padding-top: 7vh;
}
.separadorDesafiosLineaVertical {
    border-left: 3px solid #a6a7a7;
    padding-top: 9vh;
    padding-bottom: 5vh;
    padding-right: 16vh;
    margin-left: -3vh;
}
.cantDesafios {
    font-size: 14vh;
    color: #bf1f3c;
    margin-left: -7vh;
    line-height: 0.75;
    font-family: "MyriadProBlackSemiCn";
}
.textoDesafiosCantidad {
    font-size: 3vh;
    color: #a6a7a7;
    padding-left: 6vh;
    font-family: "MyriadProSemiCn";
}
.verMasDesafio {
    background-color: #bf1f3c;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-top: 6vh;
}
div.verMasDesafio > span.icon-dcanje-48 {
    font-size: 10vh;
    color: #fff;
}
div.verMasDesafio > span.textoVerMas {
    color: #fff;
    font-size: 4vh;
}
.lineSeparadorDesafios {
    border-bottom: 3px solid;
    padding-top: 3em;
    border-color: #a6a7a7;
}
div.row.misDesafiosEmpresa {
    padding: 0;
    margin: 0;
    padding-bottom: 2em;
    padding-top: 1em;
}
div.row.misDesafiosEmpresa > div.infoDesafio {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    box-shadow: 0;
}
div.row.misDesafiosEmpresa > div.infoDesafio > div {
    background-size: 55%;
    background-position: center;
}
.botonVerMasInfo {
    min-height: 7.5vh !important;
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #fff !important;
}
.shadowMisDesafios {
    box-shadow: 1px 12px 11px -2px rgba(0, 0, 0, 0.3);
}
.desafioCursandoColor {
    background-color: rgba(0, 0, 0, 0.5) !important;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.ulGiftcard {
    list-style: none;
    padding: 0em;
}
.ulGiftcard li {
    margin-bottom: 0.55em;
    font-size: 1.07em;
}
.valorGiftcard {
    font-size: 1.2em;
    font-weight: bold;
    color: #666;
}
.cantidadGiftcard {
    margin-right: 0.5em;
}
.ulGiftcard li + li {
    border-top: 1px solid #ccc;
    padding-top: 0.3em;
}
.errorField {
    border: 1px solid #ff0000;
}
.preferencesItems > .form-item-container .list-inline li span {
    color: #fff;
    background-color: #1d8cba;
}
.subCategoriasItems > .form-item-container .list-inline li span {
    color: #fff;
    background-color: #23a9e1;
}
.regionesItems > .form-item-container .list-inline li span {
    border: 1px solid #c63517;
    color: #fff;
    background-color: #c63517;
}
.comunasItems > .form-item-container .list-inline li span {
    border: 1px solid #c63517;
    color: #fff;
    background-color: #e53c19;
}
/****/
.errorField {
    border: 1px solid #dd4b39;
}
/***************************** Dropzone Styling *****************************/

/**
 * The dnd-list should always have a min-height,
 * otherwise you can't drop to it once it's empty
 */
.dropzone ul[dnd-list] {
    margin: 0px;
    min-height: 42px;
    padding-left: 0px;
}

.dropzone li {
    background-color: #fff;
    border: 1px solid #ddd;
    display: block;
    padding: 0px;
}

.liDropZone {
    background-color: #fff;
    border: 1px solid #ddd;
    display: block;
    padding: 0px;
}
.liDropZone > .item {
    padding: 10px 15px;
}
.ulDropZone {
    margin: 0px;
    min-height: 42px;
    padding-left: 0px;
}
.ulDropZone > li {
    background-color: #fff;
    border: 1px solid #ddd;
    display: block;
    padding: 10px;
}
/**
 * Reduce opacity of elements during the drag operation. This allows the user
 * to see where he is dropping his element, even if the element is huge. The
 * .dndDragging class is automatically set during the drag operation.
 */
.dropzone .dndDragging {
    opacity: 0.7;
}

/**
 * The dndDraggingSource class will be applied to the source element of a drag
 * operation. It makes sense to hide it to give the user the feeling that he's
 * actually moving it. Note that the source element has also .dndDragging class.
 */
.dropzone .dndDraggingSource {
    display: none;
}

/**
 * An element with .dndPlaceholder class will be added as child of the dnd-list
 * while the user is dragging over it.
 */
.dropzone .dndPlaceholder {
    background-color: #ddd;
    display: block;
    min-height: 42px;
}
.dndPlaceholder {
    background-color: #ddd;
    display: block;
    min-height: 100%;
}

/***************************** Element Selection *****************************/

.dropzone .selected .item {
    color: #3c763d;
    background-color: #dff0d8;
}

.dropzone .selected .box {
    border-color: #d6e9c6;
}

.dropzone .selected .box > h3 {
    background-color: #dff0d8;
    background-image: linear-gradient(to bottom, #dff0d8 0, #d0e9c6 100%);
    border-color: #d6e9c6;
    color: #3c763d;
}

/***************************** Element type specific styles *****************************/

.dropzone .item {
    padding: 10px 15px;
}

.dropzone .container-element .column {
    float: left;
    width: 50%;
}

/***************************** Toolbox *****************************/

.toolbox ul {
    cursor: move;
    list-style: none;
    padding-left: 0px;
}

.toolbox button {
    margin: 5px;
    opacity: 1;
    width: 123px;
}

.toolbox .dndDragging {
    opacity: 0.5;
}

.toolbox .dndDraggingSource {
    opacity: 1;
}

/***************************** Trashcan *****************************/

.trashcan ul {
    list-style: none;
    padding-left: 0px;
}

.trashcan img {
    width: 100%;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
}

.trashcan .dndDragover img {
    width: 100%;
    -webkit-filter: none;
    -moz-filter: none;
    filter: none;
}

.trashcan .dndPlaceholder {
    display: none;
}

/***************************************************/
.box-yellow {
    border-color: #faebcc;
}
.box {
    background-color: #fff;
    border: 2px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    margin-bottom: 0;
}
.box-yellow > h3 {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
    background-image: -webkit-linear-gradient(top, #fcf8e3 0, #faf2cc 100%);
    background-image: linear-gradient(to bottom, #fcf8e3 0, #faf2cc 100%);
}
.box > h3 {
    color: #333;
    border-color: #ddd;
    border-bottom: 1px solid transparent;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    background-repeat: repeat-x;
    display: block;
    font-size: 16px;
    padding: 10px 15px;
    margin-top: 0;
    margin-bottom: 0;
}
.box-blue {
    border-color: #bce8f1;
}
.box-blue > h3 {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
    background-image: -webkit-linear-gradient(top, #d9edf7 0, #c4e3f3 100%);
    background-image: linear-gradient(to bottom, #d9edf7 0, #c4e3f3 100%);
}
.dropZoneContent {
    padding-left: 0;
    padding-right: 0;
}
.itemDZ {
    padding: 0 !important;
}
.box-blueDZ {
    border-color: #fff;
}
.box-blueDZ > h3 {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
    background-image: -webkit-linear-gradient(top, #d9edf7 0, #c4e3f3 100%);
    background-image: linear-gradient(to bottom, #d9edf7 0, #c4e3f3 100%);
}
.pac-container {
    z-index: 100000;
}
.badge-orden-pregunta {
    background-color: #bf1f3c;
}
.badge-cantidad-alternativa {
    background-color: #3c8dbc;
}

/**Input Valoración***/

.rating {
    color: #a9a9a9;
    margin: 0;
    padding: 0;
}
ul.rating {
    display: inline-block;
}
.rating li {
    list-style-type: none;
    display: inline-block;
    padding: 1px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    font-size: 35px;
}
.rating .filled {
    color: yellow;
}
.clear {
    margin-top: 20px;
}
/**--Input Valoración***/

.switch .off {
    right: -20% !important;
    top: 100% !important;
    color: #333 !important;
}
.switch .on {
    color: #333 !important;
    top: 95% !important;
    left: 9% !important;
}

.campaignRegistroBoleta__category-select {
 
}

.campaignRegistroBoleta__category-button {
    display: flex;
    justify-content: space-around;
    padding: 0;
}

.product-category {
    width: max-content;
    float: left;
    margin-bottom: 0.5rem;
    padding: 0 0.4rem;
}

.product-category  i {
    cursor: pointer;
}