.page-info .info-details {
    display: block;
    padding-top: 30px;
    text-align: center;
}

.subtitle {
    font-weight: 200;
}

.subtitle-training {
    font-weight: 200;
    margin-left: -0.65em;
}

.list-toolbar {
    margin-bottom: 15px;
}

.list-toolbar a {
    margin-left: 5px;
}

.seleccionEmpresa {
    width: 35em;
}

.oculta {
    display: none;
}

.lh20 {
    line-height: 20px;
}

.checkAuto {
    width: auto;
}

.info-permiso {
    font-size: 1.5em;
    font-weight: 600;
    margin: 2em auto;
}

.info-details-permiso-main-body, .info-details-permiso-secondary-body {
    font-size: 1.2em;
}

.info-details-permiso-main-body {
    font-weight: 600;
    margin: 2em auto;
}

@media ( max-width: 480px) {
    .cargarFotoCarrusel {
        width: 200px;
        height: 52px;
    }

    .ng-fadein,
    .ng-fadeout {
        -webkit-transition: all linear 500ms;
        -moz-transition: all linear 500ms;
        -o-transition: all linear 500ms;
        transition: all linear 500ms;
    }

    .cargarLogo {
        width: 200px;
        height: 100px;
    }

    .ng-fadein.ng-hide-remove,
    .ng-fadeout.ng-hide-add.ng-hide-add-active {
        opacity: 0;
        display: block !important;
    }

    .cargarFotos {
        width: 200px;
        height: 133px;
    }

    .ng-fadeout.ng-hide-add,
    .ng-fadein.ng-hide-remove.ng-hide-remove-active {
        opacity: 1;
        display: block !important;
    }

    .mt-0 {
        margin-top: 0;
    }

    .mt-1 {
        margin-top: 15px;
    }

    .mt-2 {
        margin-top: 30px;
    }

    .mt-3 {
        margin-top: 60px;
    }

    .mt-4 {
        margin-top: 90px;
    }

    .mt-5 {
        margin-top: 30px;
    }
}

@media ( min-width: 768px) and (max-width: 1199px) {
    .cargarFotoCarrusel {
        width: 400px;
        height: 103px;
    }

    .cargarLogo {
        width: 200px;
        height: 100px;
    }

    .cargarFotos {
        width: 275px;
        height: 150px;
    }
}

@media ( min-width: 481px) and (max-width: 767px) {
    .cargarFotoCarrusel {
        width: 300px;
        height: 78px;
    }

    .cargarLogo {
        width: 300px;
        height: 150px;
    }

    .cargarFotos {
        width: 300px;
        height: 200px;
    }
}

@media ( min-width: 1200px) {
    .cargarFotoCarrusel {
        width: 600px;
        height: 156px;
    }

    .cargarLogo {
        width: 300px;
        height: 150px;
    }

    .cargarFotos {
        width: 275px;
        height: 150px;
    }
}

#holder {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -webkit-box-shadow: 0 1px 3px #666;
    margin-top: -80px;
    height: 400px;
}

/* DASHBOARD */
.dashboardHeader {
    margin-bottom: 0;
    border-bottom: none;
}

.rowFiltros {
    padding: 10px 15px 10px 15px;
    background-color: #FCFCFC;
}

.rowFiltros-fixed {
    z-index: 100;
    position: fixed;
    width: 100%;
}

.tipoFiltro {
    margin-right: 2em;
    font-size: 1em;
    display: inline-block;
    list-style: none;
}

.tipoFiltro input[type='text'].date-picker {
    border: none;
    color: #2F4655;
    font-size: 1em;
    min-width: 210px;
    padding: 6.5px !important;
    border: 0.09em solid #E7E8E8;
}

.tipoFiltro .date-picker::-webkit-input-placeholder {
    color: #000;
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
}

.tipoFiltro .date-picker:-moz-placeholder {
    color: #000;
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
}

.tipoFiltro .clickable {
    border-radius: 4px;
    padding: 5px 10px 5px 10px;
    background-color: #FFFFFF;
}

a.pull-right.clickable, a.pull-left.clickable{
    text-decoration: none;
    border-radius: 2em;
    padding: 0.8em 1em;
    font-size: 1em;
}

a.pull-right.clickable{
    background-color: #08A0FE;
    color: #FFFFFF;
}

a.pull-right.clickable:hover, a.pull-right.clickable:active, a.pull-right.clickable:focus{
    background-color: #1B87D0;
}

a.pull-left.clickable{
    font-weight: normal;
}

a.pull-left.clickable:hover, a.pull-left.clickable:active, a.pull-left.clickable:focus{
    color: #1B87D0;
}

.tipoFiltro .itemFiltro{
    border: 0.09em solid #E7E8E8;
    display: flex;
    align-items: center;
}

.tipoFiltro .itemFiltro:hover, .tipoFiltro .itemFiltro:active, .tipoFiltro .date-picker:hover, .tipoFiltro .date-picker:focus {
    background-color: #FFFFFF;
    border: 0.1em solid #08A0FE;
}

.tipoFiltro .itemFiltro span.badge{
    margin: 0 10px;
}

.tipoFiltro .selected {
    background-color: #FFFFFF;
    box-shadow: none;
    border: 0.1em solid #08A0FE;
}

.rowFiltros img.loading {
    height: 30px;
    float: right;
}

.rowFiltros-fixed img.loading {
    padding-right: 2em;
}

.selectFiltros {
    border: 1px solid lightgrey;
    background-color: white;
    position: absolute;
    margin-top: 5px;
    z-index: 12;
    padding: 1em;
}

.selectFiltros ul {
    overflow: auto;
    max-height: 40vh;
    padding: 0;
    margin-bottom:0;
}

.selectFiltros ul li.active {
    background-color: #cce6ff !important;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

.selectFiltros .form-control {
    color: #2F4655;
    font-weight: normal;
    border: 0.05em solid #E7E8E8;
}

.selectFiltros ul li {
    list-style: none;
    font-size: 14px;
    padding: 5px;
}

.selectFiltros ul li div {
    align-items: center;
    margin-left: auto;
}

.selectFiltros ul li div.trainingFilter-members{
    margin-left: auto;
    display: flex;
}

.selectFiltros ul li div.trainingFilter-members i{
    font-size: 20px;
    margin-right: 5px;
}

.selectFiltros ul.catHija {
    overflow: initial;
    max-height: initial;
}

.selectFiltros ul.catHija li {
    margin-left: 20px;
}

.selectFiltros li .checkFiltro {
    margin-right: 10px;
}

.selectFiltros li span {
    padding: 5px 0;
}

.selectFiltros small {
    margin-left: 30px;
}

.selectFiltros a {
    color: #2EA2F8;
}

.search-select-users {
    width: 100%;
}

.daterangepicker {
    margin-top: 5px !important;
}

.daterangepicker.show-calendar .ranges.right-ranges {
    margin-left: 30px;
}

.rotateDown {
    display: inline-block;
    animation: rotateDown 0.25s forwards;
}

@keyframes rotateDown {
    50% {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
    }
    100% {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -o-transform: rotate(180deg);
    }
}

input[type="search"] {
    -webkit-appearance: searchfield;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

.rowBtnFiltros {
    padding: 0 20px 0 20px;
    text-transform: none;
}

.rowBtnFiltros a:first-child {
    color: #707070;
    margin-right: 2em;
}

.dashboardPanel {
    margin: 20px 15px;
}

.dashboardPanel i{
    font-size: 20px;
}

.tab-dashboard {
    padding: 0;
}

.rowCabecera {
    margin: 24px 0;
    background-color: #FFF;
    border: 0.09em solid #E7E8E8;
}

.rowCabecera div {
    padding: 18px 8px;
    text-align: center;
}

.rowCabecera div:nth-child(2) {
    border-left: 0.09em solid #E7E8E8;
    border-right: 0.09em solid #E7E8E8;
}

.rowCabecera div.extraBorderRight {
    border-right: 0.09em solid #E7E8E8;
}

@media (max-width: 768px) {
    .rowCabecera div:nth-child(n + 2) {
        border-top: 0.09em solid #E7E8E8;
        border-left: none;
        border-right: none;
    }
}

.rowCabecera p {
    display: inline;
}

.rowCabecera span {
    font-size: 1.8em;
    color: #2F4655;
    font-weight: 600;
}

.rowCabecera span.clickable {
    margin-left: 3px;
    font-size: 1.5em;
    color: #808080;
}

.rowCabecera span.green {
    color: #1DCD85;
}

.rowCabecera span.red {
    color: #f85359;
}

.rowCabecera a {
    display: block;
    text-decoration: none;
}

.rowCabecera a span{
    color: #2EA2F8;
    font-family: Poppins;
    font-size: 0.8em;
    font-weight: 600;
}

.rowClusters {
    margin: 1px 0 24px 0;
    background-color: #FFF;
    border-radius: 10px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.12);
}

.rowBtnGroup {
    text-align: center;
}

div#tabClasificacion .rankingTypeSelector {
    margin: 24px 0;
}

div#tabClasificacion .rankingTypeSelector .btn-group {
    display: block;
}

div#tabClasificacion .rankingTypeSelector .btn-group select {
    min-height: 46px;
    padding: 12px 48px 12px 24px;
    border-radius: 5px;
    font-size: 14px;
    -webkit-appearance: none;
    background-color: white;
}

div#tabClasificacion .rankingTypeSelector .btn-group select.active {
    border: solid 2px #0B80FF;
    background-color: #FFF;
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .125);
    -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: 0 3px 5px rgba(0, 0, 0, .125);
}

div#tabClasificacion .rankingTypeSelector .btn-group .hamburger-select:after {
    content: '\2630';
    color: #333;
    right: 34px;
    position: relative;
    pointer-events: none;
    font-weight: 600;
}

.dashboardTabla {
    padding: 26px;
}

.dashboardTabla select{
    background: #FFFFFF;
    padding: 6px;
    border: 1px solid #D5D5D5;
}

/*Extra padding to keep aligned knowledge & attendance*/
.dashboardTabla.totalsTable {
    padding-top: 59.59px;
}

.whiteOverlay {
    background: #fff;
    opacity: 0.5;
}

.modal-body .dataTables_wrapper .col-md-6 {
    padding: 0;
}

.datatableRanking thead tr th {
    font-size: 14px;
}

.datatableRanking tbody tr {
    height: 50px;
}

.datatableRanking tbody tr td {
    border-style: none;
}

.datatableRanking tbody tr td {
    font-size: 14px;
}

.datatableRanking .dtCellPosicion {
    font-weight: 600;
    font-size: 14px;
}

.datatableRanking .dtCellPuntuacion {
    text-align: center;
}

.datatableRanking .dtCellNotaMedia span {
    margin-left: 10px;
}

.datatableRanking .dtCellNotaMedia span.small {
    color: #aaaaaa;
}

.datatableRanking .dtCellUserData {
    padding: 12px 8px;
}

.datatableRanking .dtCellUserData > div {
    display: flex;
    align-items: center;
}

.datatableRanking .dtCellUserData > div p {
    margin-bottom: 0;
    font-weight: bold;
}

.datatableRanking .dtCellUserData div.totalDetail {
    display: flex;
}

.datatableRanking .dtCellUserData div.totalDetail i {
    color: #AAB3B9;
    margin-top: 0.1em;
    font-size: 1.2em;
}

.datatableRanking .dtCellUserData div.totalDetail span {
    margin: 0 0.8em 0 0.2em;
}

.datatableRanking img {
    height: 40px;
    width: 40px;
    margin-right: 30px;
    border-radius: 50%;
}

/* DRAFT RANKING */

.ranking-draft .ranking-draft-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10vw;
    text-align: center;
}

.ranking-draft .ranking-draft-info img {
    height: 75px;
}

.ranking-draft .draft-overlay {
    background: #FCFCFC;
    opacity: 0.5;
}

.ranking-draft .searcher-draft {
    background-color: #6C7D87;
    opacity: .2;
    height: 22px;
    width: 164px;
    border-radius: 5px;
    margin-bottom: 15px;
    margin-top: -20px;
}

.ranking-draft table .user-draft {
    padding: 12px 8px;
    display: flex;
    align-items: center;
}

.ranking-draft table td > div, .ranking-draft table th > div {
    background-color: #6C7D87;
    opacity: .3;
    height: 20px;
}

.ranking-draft table th > div {
    height: 15px;
    width: 50%;
}

.ranking-draft table .user-data-draft {
    width: 150px;
}

.ranking-draft table .image-draft {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin-right: 30px;
}

.ranking-draft table .position-draft {
    width: 20px;
}

.ranking-draft table .score-draft {
    width: 30px;
}

/* END DRAFT RANKING */

/* Modal respuestas */
.modal .modal-respuestas.modal-body{
    align-items: baseline;
}

.modal-respuestas #chart_respuestas div div {
    margin: auto;
    z-index: 12 !important;
}

.modal-respuestas #chart_respuestas svg {
    overflow: visible !important;
}

.modal-respuestas .chartRespuestasMH {
    min-height: 544px;
}

.modal-respuestas .flex-container {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-respuestas .flex-item {
    text-align: center;
}

.modal-respuestas .color-circle {
    position: relative;
    padding: 5px 0;
}

.modal-respuestas .color-circle div {
    width: 12px;
    height: 12px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    margin-right: 5px;
    display: inline-flex;
}

.modal-respuestas .rightAnswer::before {
    content: '\2713';
    margin-left: -15px;
}

.modal .modal-aprendidas.modal-body{
    align-items: baseline;
}

.modal .modal-aprendidas .dtSearch, .modal .modal-group .dtSearch{
    width: 100%;
    padding: 0 30px;
}

.modal-usuario {
    padding-bottom: 40px;
}

.modal-usuario img {
    height: 20em;
    width: 20em;
    margin: 0 auto;
    border-radius: 50%;
    display: block;
}

.modal-usuario .row {
    padding: 0 2em 0 2em;
}

.modal-usuario .col-md-6{
    min-width: 240px;
}

.modal-usuario h5 {
    font-size: 1em;
    font-weight: 600;
    color: #2F4655;
}

.modal-usuario p {
    display: flex;
}

.modal-usuario p i {
    color: #08A0FE;
    font-size: 16px;
    margin-right: 8px;
}

.modal-dashboard-plan {
    padding: 30px 50px;
}

.modal-dashboard-plan .form-group {
    margin-top: 30px;
}

.modal-dashboard-plan .form-group .control-label{
    font-size: 1.2em;
}

.modal-dashboard-plan .form-group .checkbox-label{
    font-weight: 600;
    margin-left: 15px;
}

.modal-dashboard-plan .dashboard-plan-recipients {
    word-break: break-word;
}

/*Dashboard modals - commons*/

.modal-dashboard h3{
    font-size: 1.2em;
    font-weight: 600;
    color: #2F4655;
}

/* end commons */

.dashboardLoading {
    padding: 15%;
    text-align: center;
}

.dashboardLoading img{
    width: 20%;
}

.table-info {
    flex-shrink: 0;
    margin: 20px 0;
}

.table-info span {
    padding: 0 15px;
}

/* STATIC Dashboard */
.static-dashboard .rowFiltros{
    background-color: #FFF;
}

.static-dashboard #tabs_dashboard {
    background-color: #FFF;
    padding: 1px 24px 24px 24px;
}

.static-dashboard-header{
    display: flex;
    margin: 3em 0;
}

.static-dashboard-header img{
    max-height: 10em;
}

.static-dashboard-title{
    flex: 2;
    margin-top: 2em;
}

.static-dashboard-title h1{
    color: #08A0FE;
    font-size: 1.5em;
    font-weight: 600;
    margin-top: 0;
}

.static-dashboard-title h2{
    color: #2F4655;
    font-size: 1.3em;
}

/*FIN DB*/

ul.sub-menu i + span {
    margin-left: 10px;
}

div.easy-pie-chart div {
    margin-top: 10px;
}

td .row.configuracion {
    margin-left: -15px;
    margin-bottom: 0;
}

.modal-body .row {
    margin-left: 0;
    margin-right: 0;
}

.uneditable-input.span3 {
    margin: 5px;
    padding: 5px;
    width: 50%;
    min-height: 30px;
}

.form-group.required .control-label:after {
    content: "*";
    color: #08A0FE;
}

.col-sm-2.control-label.required:after {
    content: "*";
    color: #08A0FE;
}

.chart {
    position: relative;
    width: 80px;
    height: 80px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    display: table;
    margin: 0 auto;
}

.chart canvas {
    position: absolute;
    top: 0;
    left: 0;
}

.valorPieChart {
    display: inline-block;
    line-height: 80px;
    z-index: 2;
}

.angular {
    margin-top: 100px;
}

.angular .chart {
    margin-top: 0;
}

.centerCategoria {
    text-align: center;
    margin-top: 10px;
}

.categorias {
    margin-top: 15px;
    margin-bottom: 15px;
}

.filtros a {
    margin-left: 5px;
    margin-top: 15px;
}

.fecha {
    margin-top: 80px;
    margin-bottom: 40px;
}

.fecha label {
    font-size: medium;
}

#inputFecha {
    margin-left: 50px;
}

.configuracion {
    margin-left: 15px;
    margin-bottom: 15px;
}

.bInfo, .bInfo:hover, .bInfo:focus, .bInfo:active {
    border-color: transparent;
    background-color: transparent;
    outline: none !important;
}

.bInfo span {
    font-size: 12px;
    padding: 0;
    margin-bottom: 20px;
    color: #2F4655;
}

.chartCluster {
    margin-top: 30px;
}

.chartCluster svg > g > g > g > g > rect[stroke="#ffffff"][stroke-width="1"] {
    stroke: #3c3c3c !important;
    stroke-width: 2px !important;
}

.chartClusterMH {
    min-height: 565px;
}

.popover {
    line-height: 16pt;
    font-size: 13px;
    text-align: left;
    min-width: 250px;
    width: 100%;
    color: #2F4655;
    border-color: #E8EAEC;
}

.popover.right .arrow {
    border-right-color: #E8EAEC;
}

.popover.top .arrow {
    border-top-color: #E8EAEC;
}

.popover.bottom .arrow {
    border-bottom-color: #E8EAEC;
}

.popover.left .arrow {
    border-left-color: #E8EAEC;
}

.popover .popover-title {
    background-color: #FFFFFF;
    font-size: 1.1em;
}

.popover .popover-content {
    font-size: 0.9em;
}

.cellButtonPregunta {
    text-align: center;
    width: 50px;
}

.cellButtonPregunta a {
    color: #666666;
}

.print-header {
    display: none;
}

.fotoPerfil {
    width: 200px;
    height: 200px;
    display: block;
    overflow: hidden;
}

.fotoPerfil img {
    display: block;
    min-width: 100%;
    min-height: 100%;
    -ms-interpolation-mode: bicubic;
}

.errorRadiografia {
    margin-top: 50px;
}

.footer-estatico {
    background-image: url("../images/bg_2.png");
    background-color: rgba(255, 255, 255, 0);
}

.table.table-hover.table-full-width tr.resaltar td {
    font-weight: 600;
    background-color: #CEECFF;
}

.yellow {
    background-color: #CEECFF;
    display: inline-block;
    padding: 6px 15px;
    border: 1px solid;
}

.leyenda {
    margin-bottom: 15px;
}

/**********************/
/* Generic elements  */
/********************/
.radio-button-label {
    margin-left: 1em;
}

.radio-button-required-question {
    margin-left: 0.2em;
}

.radio-button-not-required-question{
    margin-left: 0.8em;
}


input[type="checkbox"], input[type="radio"], input[type=radio]:focus, input[type=checkbox]:focus, .correct-open-answer-label:before, .translation-answer-label:before{
    font-family: "Material Icons";
    color: #08A0FE;
    font-size: 1.4em;
    font-weight: normal;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    border: none;
    background-image: none;
}

input[type="checkbox"], input[type="radio"], input[type=radio]:focus, input[type=checkbox]:focus {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    box-shadow: none;
    outline: none;
}

input[type="checkbox"], input[type="radio"]{
    margin: 0;
    content: "";
}

input[type="checkbox"].disabled, input[type="radio"].disabled{
    cursor: not-allowed;
    pointer-events: none;
    color: #8B98A0;
    opacity: .65;
}

input[type="checkbox"]:before{
    content: "\e835";
}

input[type="radio"]:before, .correct-open-answer-label:before, .translation-answer-label:before{
    content: "\e836";
}

input[type="radio"]:checked:before, .correct-open-answer-label:before, .translation-answer-label.correct-answer:before {
    content: "\e837";
    background-image: none;
    border: none;
}

input[type="checkbox"]:checked:before, input[type='checkbox'].checkFiltro:checked:before {
    content: "\e834";
}

.not-allowed {
    cursor: not-allowed;
}

table .select2-container {
    min-width: 150px;
}

/********/
/*Summernote: Avoid embedded images*/
/********/
.form-group.note-group-select-from-files {
    display: none;
}

.checkbox.sn-checkbox-open-in-new-window, .checkbox.sn-checkbox-use-protocol {
    display: none;
}

/********/
/*Inicio*/
/********/
.current-user-detail {
    display: flex;
    align-items: center;
}

.current-user-detail img {
    max-width: 25px !important;
}

.current-user-detail span {
    font-size: 1em;
    color: #354052;
    font-weight: 600;
    margin: 0 10px 0 15px;
}

/********/
/*PREGUNTAS*/
/********/
.imgPregunta {
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    width: 50px;
    height: 50px;
}

.detallesPregunta {
    font-style: oblique;
    margin-bottom: 0;
    color: gray;
}

.detallesPreguntaSmall {
    font-style: oblique;
    font-size: smaller;
    color: gray;
}

.multi-select .form-item-container .list-inline li span {
    border: none;
    background-color: #08A0FE;
    font-size: 12px;
    border-radius: 5px;
    letter-spacing: 1px;
    padding-left: 10px;
    color: #FFFFFF;
    text-transform: uppercase;
}

.multi-select .form-item-container .list-inline li span:first-child, .multi-select .form-item-container .list-inline li span:last-child{
    margin-left: 1em;
}

.multi-select .form-item-container .list-inline li span.remove i.glyphicon.glyphicon-remove{
    font-weight: 200;
}

.questionStatus {
    color: #000000;
    font-size: 16px;
    font-weight: 600;
    line-height: 25px;
}

.questionStatus.control-label {
    text-align: left;
    padding-left: 0;
    color: #08A0FE;
    font-size: 1.2em;
}

.questionTimeline.form-item-container, .upload-drop-zone
{
    padding: 2em;
    margin: 0;
    box-shadow: 0 0.1em 0.2em 0 rgba(0,0,0,0.12);
    border: none;
    border-radius: 1em;
}

.questionEvent:before {
    content: "• ";
}

.questionTimeline .questionEvent {
    color: #08A0FE;
    font-size: 16px;
    font-weight: 600;
    line-height: 25px;
}

.questionTimeline .questionEditor {
    opacity: 0.75;
    color: #2F4655;
    font-size: 1em;
    font-weight: 300;
    line-height: 1.6em;
}

.question-multimedia-tip {
    margin-top: 8px;
}

.questionsTable .date-picker-group .form-control.date-picker {
    padding: 0 0.5em;
    font-size: 1em;
    width: 100%;
    height: 30px;
    border: 0.1em solid #C7C8C9
}

.questionsTable th .tipoFiltro, .questionsTable th > input, .questionsTable .moment-picker-group {
    margin: 0.5em 0;
}

.questionsTable th .tipoFiltro .itemFiltro {
    border: 0.1em solid #C7C8C9
}

.questionsTable th input{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.questionsTable thead.without-sorting .sorting {
    background: none;
    cursor: auto;
}

.questionsTable thead th.align-top {
    vertical-align: top;
}

.questionsTable question-multimedia {
    display: flex;
    justify-content: center;
}

.questionsTable question-multimedia > img, .questionsTable question-multimedia button, .questionsTable question-multimedia > video {
    width: 3em;
    height: 3em;
    border-radius: 50%;
    cursor: pointer;
}

.questionsTable question-multimedia video {
    object-fit: cover;
}

.questionsTable question-multimedia .audio-control {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #DBDBDB;
    border: none;
    outline: none;
}

.questionsTable question-multimedia .question-multimedia-add {
    background-color: #DBDBDB;
    color: #FFFFFF;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
}

.upload-multimedia-dialog-preview img, .upload-multimedia-dialog-preview audio, .upload-multimedia-dialog-preview video{
    width: 100%;
}

.upload-multimedia-dialog-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.questionsTable options-tree-selector li.tree-option label {
    font-size: 0.85em;
}

.questionsTable options-tree-selector > div.tipoFiltro {
    width: 100%;
}

.questionsTable options-tree-selector > div.tipoFiltro i{
    margin-left: auto;
}

@media (max-width: 1500px) {
    .questionsTable options-tree-selector > div.tipoFiltro .search-text {
        display: none;
    }

    .questionsTable options-tree-selector > div.tipoFiltro i.search-icon {
        display: initial;
        margin-left: 0 !important;
    }
}

.questionsTable tbody td {
    word-break: break-word;
}

.questionsTable tbody td .emphasized-question {
    display: block;
    color: #08A0FE;
}

.questionsTable table tbody tr td div.sortable-table-handles i {
    color: transparent;
}

.questionsTable table.sorting-enabled tbody tr:hover td div.sortable-table-handles i {
    color: rgba(0,0,0,0.25);
}

.questionsTable table.sorting-enabled tr.ui-sortable-selected td {
    background-color: rgba(8, 160, 254, 0.2);
    opacity: 0.9;
}

.questionsTable table .sortable-column{
    padding-right: 0;
    margin-right: 0;
}

.questionsTable table .sortable-column-handless {
    margin-top: 8px;
    margin-left: 0;
    padding-left: 0;
}

.questionsTable .selected-row {
    border-left: 2px solid #08A0FE;
}

.questionsTable .selected-row > td {
    background-color: #CCE6FF !important;
}

.questionsTable .selected-row.align-top > td {
    vertical-align: top;
}

.questionsTable .edit-question-form {
    margin-top: 1.8em;
}

.questionsTable .edit-question-form textarea {
    width: 100%;
    min-width: 150px;
    min-height: 20px;
    resize: none;
    box-sizing: content-box;
}

.questionsTable .edit-question-form input {
    margin-right: 0.5em;
}

.questionsTable .edit-question-options-form {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1em;
}

.questionsTable .edit-question-options-form span {
    padding-top: 0;
    padding-bottom: 0;
}

.questionsTable .reports-template table,
.questionsTable .verify-template table {
    width: 100%;
    background-color: #FFFFFF;
}

.questionsTable .reports-template table tr th, .questionsTable .reports-template table tr:hover th, .questionsTable .reports-template table tr td, .questionsTable .reports-template table tr:hover td,
.questionsTable .verify-template table tr th, .questionsTable .verify-template table tr:hover th, .questionsTable .verify-template table tr td, .questionsTable .verify-template table tr:hover td {
    background-color: #FFFFFF;
}

.questionsTable .reports-template table tr th,
.questionsTable .verify-template table tr th{
    padding: 1em 0;
}

.questionsTable .reports-template table tr th:first-child, .questionsTable .reports-template table tr td:first-child,
.questionsTable .verify-template table tr th:first-child, .questionsTable .verify-template table tr td:first-child {
    padding-left: 15px; /*We use px instead em because font-size are different for th and td */
}

.questionsTable .selected-row.buttons-row.reports-template td,
.questionsTable .selected-row.buttons-row.verify-template td{
    border-top: none;
}

.questionsTable .selected-row.buttons-row td {
    border-top: 0.1em solid #C9CFD3;
}

.no-link {
    color: black;
}

.opcionModal {
    text-align: center;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    width: 70%;
}

.opcionModal p {
    font-size: 16px;
}

.step-number {
    background-color: #FFFFFF;
    border: 5px solid #CED1D6;
    border-radius: 100% 100% 100% 100%;
    color: #546474;
    display: inline-block;
    font-size: 15px;
    height: 70px;
    line-height: 60px;
    position: relative;
    text-align: center;
    min-width: 70px;
    z-index: 2;
    color: darkgrey;
    font-weight: bold;
    font-size: xx-large;
    margin-right: 30px;
}

.step-desc {
    flex: 1;
}

.pageStepTraduccion {
    margin: 20px;
}

.titleStepTraduccion {
    display: inline;
    margin-left: 20px !important;
}

.formStepTraduccion {
    margin-top: 50px;
    margin-bottom: 20px;
}

.preguntas-descartadas-font-bold {
    font-weight: bold;
}

/********/
/*Logro*/
/********/
#achievementsTable .onoffswitch-container {
    justify-content: center;
}

#achievementsTable .achievement-icons {
    display: flex;
    justify-content: space-around;
}

#achievementsTable .achievement-icons div {
    height: 3.2vw;
    width: 3.2vw;
    padding: 0.2vw;
    background-color: #FFF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#achievementsTable .achievement-icons div:not(:last-of-type) {
    margin-right: 0.4vw;
}

#achievementsTable .achievement-icons div img{
    height: 100%;
    max-width: 100%;
}

#achievementsTable .achievement-icons.disabled div img {
    filter: gray; /* IE6-9 */
    filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

.achievement-level {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.achievement-level .fileupload .thumbnail {
    width: 100%;
}

.achievement-level .fileupload-preview img, .fileupload-new img {
    height: 200px;
}

.achievement-level .achievement-level-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 1.5em;
}

.achievement-level .achievement-level-data h5 {
    font-size: 1.2em;
    margin: 0;
}

.achievement-level .achievement-level-data span {
    font-size: 1.1em;
    margin: 1em 0;
}

.achievement-level .achievement-level-data input {
    width: 6em;
}

.taSQL {
    width: 100%;
}

.clickable {
    cursor: pointer;
}

.disable-pointer {
    cursor: initial;
}

.navbarFixed {
    position: fixed;
}

.hide_column {
    visibility: hidden;
    display: none;
}

/********/
/*Partida*/
/********/
.resaltarNumero {
    font-weight: bold;
    font-size: 16px;
}

.taDescripcion {
    width: 100%;
}

.columnFoto {
    width: 700px;
    margin-top: -2em;
}

.cropit-preview {
    background-color: #f8f8f8;
    background-size: cover;
    border: 5px solid #ccc;
    border-radius: 3px;
    margin-top: 7px;
    width: 700px;
    height: 300px;
}

.cropit-preview-image-container {
    cursor: move;
}

.cropit-preview-background {
    opacity: .2;
    cursor: auto;
}

.controls-wrapper {
    text-align: center;
}

.slider-wrapper {
    display: inline-flex;
}

.error-msg {
    color: #f85359;
}

.errorFoto {
    display: inline-flex;
    color: #f85359;
    visibility: hidden;
}

input[type=range].inputCropit {
    -webkit-appearance: none;
    background-color: #FCFCFC;
}

input[type=range].inputCropit::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}

input[type=range].inputCropit::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #888888;
    margin-top: -5px;
}

input[type=range].inputCropit:focus {
    outline: none;
}

input[type=range].inputCropit:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

.iconCropit {
    font-size: 15px;
    color: #888888;
    margin: 20px;
}

.switchBottom {
    z-index: 9;
}

#review-questions-warning li a{
    color: #FFFFFF;
    text-decoration: underline;
}

.addZone {
    margin-bottom: 20px;
    border: 2px dashed #9b9b9a;
    border-radius: 25px;
    min-height: 250px;
    display: flex;
}

.addZone a {
    align-self: center;
    margin: 0 auto;
    color: #9b9b9a;
    font-size: 80px;
}

.closeForm {
    color: #8b0000;
    cursor: pointer;
}

/********/
/*Datatables*/
/********/

#dtAciertos_paginate .pagination, #dtTiempoJuego_paginate .pagination,
#dtPropuestas_paginate .pagination, #dtCiudades_paginate .pagination,
#dtSucursales_paginate .pagination, #dtDepartamentos_paginate .pagination {
    display: inline-flex;
    margin-top: 30px;
}

.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus {
    background-color: #08A0FE;
    border-color: #08A0FE;
}

.pagination > li.prev a, .pagination > li.next a, .pagination > li.pagination-icon a{
    padding: 0 3px;
}

.pagination i{
    font-size: 14px;
    margin: 7px 0;
}

.dataTables_wrapper .dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 40px;
    margin-left: -50%;
    margin-top: -25px;
    padding-top: 20px;
    text-align: center;
    font-size: 1.2em;
    background-color: white;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,
    255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)),
    color-stop(75%, rgba(255, 255, 255, 0.9)),
    color-stop(100%, rgba(255, 255, 255, 0)));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%,
    rgba(255, 255, 255, 0) 100%);
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%,
    rgba(255, 255, 255, 0) 100%);
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%,
    rgba(255, 255, 255, 0) 100%);
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%,
    rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%,
    rgba(255, 255, 255, 0) 100%);
    color: #333;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
    top: 9px;
    left: 4px;
    height: 14px;
    width: 14px;
    display: block;
    position: absolute;
    color: white;
    border: 2px solid white;
    border-radius: 14px;
    box-shadow: 0 0 3px #444;
    box-sizing: content-box;
    text-align: center;
    line-height: 14px;
    content: '+';
    background-color: grey !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
    content: '-';
    background-color: lightgrey !important;
}

tr.warning.bold td {
    font-weight: bold;
}

.dataTables_wrapper .dataTables_filter{
    float:left
}

.dataTables_wrapper .dataTables_length{
    float:right
}

textarea {
    resize: vertical;
}

/*
ENCUESTAS
*/
.survey-container{
    display: flex;
    flex-direction: column;
    margin: 2vh 20vw;
}

.survey-header{
    display: flex;
    flex-direction: column;
}

.survey-main-header{
    display: flex;
}

.survey-company-logo img{
    max-height: 10em;
}

.survey-title{
    flex: 2;
    margin-top: 2em;
}

.survey-title h1{
    color: #08A0FE;
    font-size: 1.5em;
    font-weight: 600;
    margin-top: 0;
}

.survey-title h2{
    color: #2F4655;
    font-size: 1.3em;
}

.survey-status{
    margin-top: 2em;
    display: flex;
    color: #08A0FE;
    font-size: 1.2em;
}

.survey-status span{
    text-transform: uppercase;
    margin-left: 0.9em;
    font-weight: 600;
}

.survey-active {
    animation: blink 1s;
    animation-iteration-count: infinite;
}

@keyframes blink {
    0% {
        color: transparent;
    }
    100% {
        color: #08A0FE;
    }
}


.survey-sub-header{
    display: flex;
    flex-direction: column;
    margin: 4vh 5vw;
}

.survey-export {
    text-align: right;
}

.survey-export a {
    color: #2F4655;
}

.survey-export a:hover, .survey-export a:active, .survey-export a:focus{
    color: #08A0FE;
}

.survey-information {
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    border: 0.1em solid #E8EAEC;
}

.survey-description{
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 0.1em solid #E8EAEC;
    padding: 1em 0;
}

.survey-description .survey-photo{
    margin: auto 4em;
    flex: 1;
}

.survey-description .survey-photo img{
    height: 4.5em;
    width: 4.5em;
    border-radius: 100%;
}

.survey-description .survey-desc{
    font-size: 1em;
    margin: auto 1em;
    flex: 8;
}

.survey-statistics{
    display: flex;
    justify-content: center;
}

.survey-statistics div{
    flex: 1;
    margin-left: 1vw;
    border-right: 0.1em solid #E8EAEC;
    word-break: break-all;
}

.survey-statistics > div:last-child{
    border-right: none;
    margin-right: 2em;
}

.survey-statistics h3{
    font-size: 1.4em;
}

.survey-statistics .survey-date{
    display: flex;
    color: #6C7D87;
}

.survey-statistics .survey-statistic-result{
    color: #08A0FE;
    font-size: 3em;
    font-weight: 600;
}

.survey-statistics .progress, .survey-statistics .progress .progress-bar{
    border-right: none;
    margin-left: 0;
}

.survey-body{
    background-color: #FFFFFF;
    border: 0.1em solid #E8EAEC;
    display: flex;
    flex-direction: column;
    margin: auto 5vw;
}

.survey-body .survey-filters{
    margin: 2em;
}

.survey-body .survey-filters .filter-title{
    margin-bottom: 1.2em;
}

.survey-body .survey-questions{
    margin: 2em;
    display: flex;
    flex-direction: column;
}

.survey-body .survey-questions .survey-question{
    display: flex;
    flex-direction: column;
}

.survey-body .survey-questions .survey-question .survey-question-title {
    margin: 2em 0 1.5em 0;
}

.survey-body .survey-questions .survey-question .survey-question-title .survey-question-question{
    font-weight: 600;
    font-size: 1.1em;
    margin-top: 1em;
}

.survey-body .survey-questions .survey-question .survey-question-results{
    display: flex;
    flex-direction: column;
}

.survey-body .survey-questions .survey-question .survey-question-results .survey-question-result{
    display: flex;
    flex-direction: column;
}

.survey-body .survey-questions .survey-question .survey-question-results .survey-question-result .survey-question-result-data{
    display: flex;
    color: #6C7D87;
    margin-bottom: 0.8em;
}

.survey-body .survey-questions .survey-question .survey-question-results .survey-question-result .survey-question-result-data .survey-question-answer{
    flex: 5;
    font-weight: 600;
}

.survey-body .survey-questions .survey-question .survey-question-results .survey-question-result .survey-question-result-data .survey-question-percentage,
.survey-body .survey-questions .survey-question .survey-question-results .survey-question-result .survey-question-result-data .survey-question-votes{
    flex: 1;
    text-align: right;
}


.survey-body .survey-questions .survey-question .survey-question-results .survey-question-result .progress-bar-container{
    margin-right: 8em;
}

/*
FOOTER
*/

.footerDashboard {
    text-align: center;
    margin: 30px 0 30px 0;
}

.footerDashboard p {
    font-size: 0.8em;
}

.footerDashboard img{
    margin-top:0;
}

.verticalLine {
    border-left: #000000;
    padding-top: 10px;
}

.verticalLine p {
    color: #8B98A0;
    font-size: 1em;
    font-weight: 600;
}

.verticalLine a {
    color: #08A0FE;
    letter-spacing: 0.03em;
    font-weight: 600;
    font-size: 1em;
}

/**
PILLS
*/
.pill-type-options {
    margin-top: 2em;
}

.pill-type-options .active .btn-default i{
    color: #FFFFFF;
}

.pill-type-options .switch-container .switch-option:hover .btn-default i, .pill-type-options .switch-container .switch-option:active .btn-default i, .pill-type-options
.switch-container .switch-option:focus .btn-default i{
    color: #FFFFFF;
}

a.tooltips.pill-button {
    color: #08A0FE;
}

.upload-drop-zone {
    margin: 0.5em 0;
    text-align: center;
}

.upload-drop-zone.drop {
    color: #222;
    border-color: #222;
}

.dragover {
    border: 5px dashed #ccc;
}

.rejected-dragover {
    border: 2px dashed #bd362f;
    color: #bd362f;
}

.rejected-dragover > .upload-file-button.btn.btn-secondary.btn-block {
    background-color: #bd362f;
}

.upload-icon i, .upload-icon em {
    color: #6C7D87;
    font-size: 7em;
}

.upload-file-message, .upload-file-message-or {
    font-size: 1.1em;
}

.upload-file-button.btn.btn-secondary.btn-block {
    margin: 2.5% auto;
    width: 45%;
}

.language-selector.form-group.required.ng-scope {
    padding-bottom: 5%;
}

h4.pill-left-tab-title {
    margin: 10px 20px 10px 20px;
    font-size: 20px;
}

.alert-pill {
    margin-right: 50%;
}

/*CONFIGURABLE OPTIONS*/

.configurableOption-container {
    padding: 5px;
    margin-bottom: 10px;
}

.configurableOption {
    border: 2px solid #eee;
    border-radius: 15px;
    padding: 0 0 10px 20px;
    min-height: 150px;
}

.configurableOption-description {
    min-height: 46px;
}

.configurableOption_error {
    background-color: rgba(255, 0, 0, 0.25);
}

.configurableOption-status {
    font-weight: bold;
    font-size: large;
    padding-top: 5px;
}

.configurableOption-status_active {
    color: green;
}

.configurableOption-status_inactive {
    color: grey;
}

.configurableOption-status_error {
    color: red;
}

.configurableOption-flag-btn {
    float: right;

    margin-right: 25px;
}

.configurableOption-redirect-btn {
    float: right;

    margin-right: 25px;
}

.configurableOption-value-label {
    font-weight: bold;
    font-size: large;
    padding-top: 5px;
}

.configurableOption-value-btn {
    float: right;

    margin-right: 10px;
}

@-webkit-keyframes yellowPulse {
    from {
        background-color: transparent;
    }
    10% {
        background-color: rgba(61, 148, 0, 0.51);
    }
    to {
        background-color: transparent;
    }
}

input.configurableOption-value.updated {
    -webkit-animation-name: yellowPulse;
    -webkit-animation-duration: 1s;
}

.upload-file-name {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.multimedia-name {
    margin-right: 0.2em;
}

i.fa.fa-times.fa-white.delete-file {
    cursor: pointer;
}

.upload-file-name.with-multimedia {
    justify-content: center;
    align-items: flex-end;
}

.upload-file-name.with-multimedia img, .upload-file-name.with-multimedia video {
    max-height: 200px;
}

/**************
HOME
 **************/

div.google-visualization-tooltip {
    pointer-events: none;
}

svg > g > g:last-child {
    pointer-events: none
}

.messages-btn i{
    font-size: 1.5em;
}

/** USERS */

.input-error input{
    border-bottom: 2px solid #f85359;
}

.input-valid input{
    border-bottom: 2px solid #1DCD85;
}

.password-requirements-tooltip {
    /* position */
    position: absolute;
    left: 40px;
    bottom: 60px;
    max-width: 330px;
    width: 330px;

    /*style*/
    border: 1.1px solid #EFEFEF;
    background-color: #FFFFFF;
    box-shadow: 2px 3px 3px 0 #DFDFDF;
    border-radius: 10px;
    padding: 24px;
    font-size: 15px;
}

.password-requirements-tooltip:after, .password-requirements-tooltip:before {
    left: 20px;
    bottom: 0;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.password-requirements-tooltip:after {
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #FFF;
    border-width: 10px;
    margin-bottom: -20px;
    margin-left: 4px;
}

.password-requirements-tooltip:before {
    border-color: rgba(194, 225, 245, 0);
    border-top-color: #DFDFDF;
    border-width: 14px;
    margin-bottom: -29px;
}

.password-requirements-tooltip > span {
    font-size: 0.9em;
    color: #2F4655;
    font-weight: 900;
}

.created-users-count {
    border-right: 0.09em solid #E7E8E8;;
    border-radius: 0;
}

.disabled-btn-style, .disabled-btn-style:active, .disabled-btn-style:focus, .disabled-btn-style:hover {
    background-color: #E8EAEC;
    border-color: #C9CFD3;
    color: #8B98A0;
    opacity: .65;
    box-shadow: none;
}

.disabled-icon-style {
    opacity: 0.65;
}

/* Removes default hover effect for the element*/
.created-users-count:hover {
    color: #2F4655;
}

.created-users-count span {
    margin-right: 12px;
}

.created-users-count i {
    opacity: 0.65;
    font-size: 1.2em;
    display: flex;
}

/* region Popover of created users */

.popover-without-title .popover-title{
    display: none;
}

.created-users-popover {
    font-size: 1.1em;
    display: flex;
    flex-direction: column;
    padding: 0.5em;
    justify-content: center;
    cursor: initial;
}

.created-users-popover i {
    position: absolute;
    top: 0.8em;
    right: 0.5em;
    font-size: 1.2em;
    cursor: pointer;
}

.created-users-popover div {
    display: flex;
    margin: 0.7em 0;
}

.created-users-popover div img {
    margin-right: 1em;
}

/*Custom styles for tooltip placed at header*/

.page-header div.popover-content {
    margin: 0;
    padding: 9px 14px;
}

.page-header div.popover-content .created-users-popover{
    margin: 0;
    padding: 0.5em;
}

/* endregion */

/**
ANSWERS
 */

#sample_1 .glyphicon {
    color: black;
}

#sample_1 .glyphicon.active {
    color: white !important;
}

#sample_1 .glyphicon.disabled {
    color: lightgrey;
}

#sample_1 .glyphicon-star {
    opacity: 0 !important;
}

.rojo {
    color: red;
}

.verde {
    color: green;
}

/**
AVATARS
 */
.avatar-index {
    width: 50px;
}

.avatar-photo > img {
    max-height: 200px;
}

.avatar-photo {
    width: 200px;
    text-align: center;
}

/**
CONTRATOS
 */
.search-select-users {
    width: 100%;
}

/**
UTILITIES
 */

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: 15px;
}

.mt-2 {
    margin-top: 30px;
}

.mt-3 {
    margin-top: 60px;
}

.mt-4 {
    margin-top: 90px;
}

.mt-5 {
    margin-top: 30px;
}

/* 8px based margins */

.mt8-1 {
    margin-top: 8px;
}

.mt8-2 {
    margin-top: 16px;
}

.mt8-3 {
    margin-top: 24px;
}

.mt8-4 {
    margin-top: 32px;
}

.mt8-5 {
    margin-top: 40px;
}

.mt8-6 {
    margin-top: 48px;
}

.mt8-7 {
    margin-top: 56px;
}

.mr-0 {
    margin-right: 0;
}

.mr-05 {
    margin-right: 5px;
}

.mr-1 {
    margin-right: 15px;
}

.mr-2 {
    margin-right: 30px;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 15px;
}

.ml-auto {
    margin-left: auto;
}

.ml-1 {
    margin-left: 15px;
}

.ml-2 {
    margin-left: 30px;
}

.mr-auto {
    margin-right: auto;
}

.full-width {
    width: 100%;
}

.flex {
    display: flex;
}

.flex-end {
    display: flex;
    justify-content: flex-end;
}

.flex-center {
    display: flex;
    justify-content: center;
}

.flex-align-center {
    display: flex;
    align-items: center;
}

.ml-between-buttons button{
    margin-left: 10px;
}

.bold {
    font-family: PoppinsSemiBold;
}

.main-color {
    color: #08A0FE;
}

.visibility-hidden {
    visibility: hidden;
}

.disable-pointer {
    pointer-events: none;
}

/**********************/
/*    Development    */
/********************/

.development-api-hr {
    margin-top: 5%;
    margin-bottom: 2%;
    margin-left: 3%;
    margin-right: 3%;
}

#development-api-body {
    height: 100%;
    padding-top: 5%;
    padding-left: 3%;
    padding-right: 3%;
}

.development-api-center {
    text-align: center;
}

#development-api-upper,
#development-api-lower {
    font-size: 18px;
    width: 100%;
    display: flex;
}

#development-api-clipboard-div {
    display: flex;
    flex-direction: column;
}

#development-api-upper-left {
    width: 30%;
    height: 100%;
}

#development-api-lower-left {
    width: 100%;
    padding-left: 100px;
}

#development-api-lower-right {
    width: 100%;
    padding-right: 40px;
}

#development-api-upper-left,
#development-api-upper-right,
#development-api-lower-right,
#development-api-lower-left,
#development-api-token-button-clipboard {
    display: flex;
    align-items: center;
}

.development-api-flex-div {
    flex: 1;
    padding: 0.7em;
}

.development-api-flex-logo-div {
    display: flex;
    max-width: 20%;
    min-width: 20%;
    flex-direction: column;
    justify-content: center;
}

.development-api-flex-logo {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.development-api-button {
    padding: 0.7em 1em;
    font-size: 1em;
}

#development-api-secret-text {
    padding: 12px 15px;
    display: inline-block;
    font-size: 1.1em;
}

#development-api-upper-left {
    text-align: right;
}

#development-api-main-title,
#development-api-main-description,
#development-api-swagger-description,
#development-api-swagger-title,
#development-api-secret-title,
#development-api-token-description {
    color: #5d6268;
}

/* Responsive */

@media only screen and (max-width: 1200px) {
    #development-api-upper-left,
    #development-api-upper-right,
    #development-api-lower-right,
    #development-api-lower-left,
    #development-api-upper,
    #development-api-lower {
        flex-direction: column;
    }

    #development-api-lower-separator {
        margin-top: 50px;
        margin-bottom: 50px;
    }

    #development-api-upper,
    #development-api-lower-right {
        padding-left: 60px;
    }
}

/* Tooltip */

.development-api-tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    transition: 0s 1s;
    margin-left: 1em;
}

.development-api-tooltip .development-api-tooltiptext {
    font-size: 0.8em;
    visibility: hidden;
    padding: 0.5em 1.5em;
    background-color: #000000;
    color: #FFFFFF;
    font-weight: 600;
    text-align: center;
    border-radius: 0.5em;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
}

.development-api-tooltip .development-api-tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

.development-api-tooltip:hover .development-api-tooltiptext {
    visibility: visible;
    transition: 0s;
}

/************************/
/*    People Analytics  */
/************************/

.skill-search {
    margin-left: 15px;
}

.no-selected-skills {
    margin: 18px 0;
}

.selected-skills {
    margin: 18px 0;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.selected-skills div {
    padding: 4px 10px;
    margin: 0 10px 10px 0;

    border-radius: 5px;
    background-color: #08A0FE;
    box-shadow: 0 0 3px 0 rgba(197, 197, 197, 0.5);

    color: #FFF;
    font-size: 12px;
}

.selected-skills span {
    margin-left: 24px;
    font-size: 10px;
}

.experts-toolbar {
    margin-top: 25px;
    margin-bottom: 25px;
}

.experts-toolbar label.search-label {
    width: 100%;
}

.people-table-loading {
    height: 200px;
    background-color: #FFF;
}

.people-table-loading img {
    display: block;
    margin: 0 auto;
    height: 100px;
    width: 100px;
}

.table-user-valorations img {
    height: 40px;
    width: 40px;
    margin-right: 30px;
    border-radius: 50%;
}

.table-user-valorations .star {
    font-size: 18px;
    color: #F7B91C;
}

div#copyTraining .modal-body label {
    font-weight: bold;
    font-size: 16px;
}

div#copyTraining .modal-body .explanation {
    margin-top: 20px;
    font-size: 16px;
}

div#copyTraining .modal-footer #configureTraining {
    margin-right: 20px;
}

div.optionsSelect select {
    background: #FFFFFF;
    padding: 6px;
    border: 1px solid #D5D5D5;
}

th select{
    background: #FFFFFF;
    padding: 6px;
    width: 100%;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 4px;
}

.survey-buttons {
    margin-top: 50px;
}

#motivationForm input {
    float: right;
    margin-right: 5px;
}

#motivationForm input:first-of-type {
    margin-right: 15px;
}

.user-detail-segments {
    display: flex;
    flex-wrap: wrap;
}

.user-detail-segment {
    background-color: whitesmoke;
    border-radius: 8px;
    padding: 6px;
    margin-right: 5px;
    margin-bottom: 5px;
}

.categoryData-title .page-header {
    margin-bottom: 0;
}

.categoryData-container {
    display: flex;
    min-height: 100vh;
}

.categoryData-container > div {
    padding-top: 1.5em;
}

.categoryData-container .categoryData-form {
    flex: 3;
    height: auto;
    border-right: 1px solid #eee;
}

.categoryData-container .categoryData-experts {
    flex: 2;
}

.categoryData-container .categoryData-experts h2 {
    color: #1c1c1b;
}

.categoryData-experts .categoryStat {
    font-size: 1.3em;
    color: #666;
    margin: 0;
}

.categoryData-experts .categoryStat:first-of-type {
    margin-top: 1em;
}

.categoryData-experts .categoryStat .categoryStat-value {
    font-size: 1.2em;
    font-weight: bold;
    color: #08a0fe;
}

.categoryData-container .categoryData-experts .categoryExperts-container {
    margin-top: 2em;
    border-bottom: 1px solid #eee;
    min-height: 150px;
}

.categoryExperts-container > * {
    padding-left: 2.5rem;
}

.categoryData-container .categoryData-experts category-experts-container:first-of-type {
    margin-top: 0.7em;
}

.categoryExperts-container .toggleTable {
    position: absolute;
    right: 0.6em;
    margin-top: -0.3em;
    font-size: 2em;
    font-weight: bold;
    z-index: 6;
}

.categoryExperts-container .toggleTable em {
    cursor: pointer;
}

.categoryExperts-container .categoryExperts-title {
    margin: 0;
    font-size: 1.4em;
    font-weight: bold;
}

.categoryExperts-container .categoryExperts-subtitle {
    margin: 0.4em 0 0;
    font-size: 1em;
    color: #666;
}

.categoryExpert-avatar {
    border-radius: 50px;
}

.categoryExpert-name {
    color: #1c1c1b;
    font-weight: bolder;
}

.categoryExpert-segment {
    color: #08a0fe;
    font-size: 14px;
    font-weight: 600;
    margin-top: 6px;
}

.categoryExpert-segment em {
    margin-right: 8px;
}

.categoryExpert-score {
    color: #1DCD85;
}

.categoryExpert-score-value {
    font-weight: bold;
    font-size: 1.1em;
}

.categoryExpert-adminInfo {
    color: #1c1c1b;
    text-align: center;
}

.categoryExpert-adminInfo .categoryName {
    font-weight: bold;
}

.categoryExpert-action {
    padding: 10px 20px;
    color: #1c1c1b;
    font-weight: bold;
    background-color: white;
    border: solid 1px #08a0fe;
    border-radius: 50px;
    cursor: pointer;
    user-select: none;
}

.categoryExpert-action:hover {
    box-shadow: 1px 1px 5px #999;

    text-decoration: none;
}

.categoryExpert-action:active {
    color: white;
    background-color: #08a0fe;

    text-decoration: none;
}

.categoryExperts-experts {
    display: flex;
    align-items: center;
    margin: 30px 0 30px;
}

/*region Category Details - Experts circles*/

.categoryExperts-experts.circles {
    display: flex;
    align-items: center;
}

.categoryExperts-experts.circles .categoryExpert-expert {
    margin-left: -10px;
}

.categoryExperts-experts.circles .categoryExpert-expert:first-child {
    margin-left: 0;
}

.categoryExperts-experts.circles .categoryExpert-expert .categoryExpert-avatar {
    height: 50px;
    width: 50px;

    background-color: #fff;

    border: solid white 2px;
}

.categoryExperts-experts.circles .categoryExperts-extraExperts {
    margin-left: 0.5em;

    font-size: 1.2em;
    font-weight: bold;

    color: #08a0fe;
}

.categoryExperts-experts.circles .categoryExperts-extraExperts:hover {
    text-decoration: underline;
    cursor: pointer;
}

/*endregion Category Details - Experts circles*/

/*region Category Details - Experts table*/

.categoryExperts-experts.table {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.categoryExperts-experts.table .categoryExpert-expert {
    padding-left: 2.5rem;
    width: 100%;
    height: 5em;
    display: flex;
    align-items: center;
}

.categoryExperts-experts.table .categoryExpert-expert:nth-child(odd) {
    background-color: #f9f9f9;
}

.categoryExperts-experts.table .categoryExpert-expert .categoryExpert-avatar {
    height: 50px;
    width: 50px;

    background-color: #fff;
}

.categoryExperts-experts.table .categoryExpert-expert .categoryExpert-id {
    display: flex;
    flex-direction: column;

    flex: 3;

    margin-left: 1em;
}

.categoryExperts-experts.table .categoryExpert-expert .categoryExpert-score {
    flex: 1 1 3em;
    text-align: right;
}

.categoryExperts-experts.table .categoryExpert-expert .categoryExpert-actionContainer {
    flex: 2;
    text-align: center;
}

.categoryExperts-experts.table .categoryExpert-expert .categoryExpert-adminInfo {
    font-size: 0.8em;
}

.categoryExperts-experts.table .categoryExpert-expert .categoryExpert-action {
    font-size: 0.8em;
    padding: 0.7em 1em;
    font-weight: normal;
    display: inline-block;
}

.categoryExperts-experts.table .categoryExperts-showMore {
    color: #1c1c1b;
    margin-top: 1em;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}

.categoryExperts-experts.table .categoryExperts-showMore:hover {
    color: #08a0fe;
}

.categoryExperts-experts.table .categoryExperts-showMore:active {
    color: #0787df;
}

/*endregion Category Details - Experts table*/

/*region Category Details - Popover*/

.categoryExpert-popover {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #999;
    background-color: white;
}

.categoryExpert-popover .categoryExpert-popoverArrow:before {
    position: absolute;
    top: 100%;
    left: 50%;

    height: 7px;
    width: 7px;

    margin-left: -2.5px;
    margin-top: -3.9px;

    content: "";
    background-color: white;

    transform: rotate(44deg);
    box-shadow: 1px 1px 5px #999;
    clip-path: polygon(-50% 150%, 150% 150%, 150% -50%);
}

.categoryExpert-popover .categoryExpert-avatar-background {
    height: 100px;
    width: 100%;
    border-radius: 5px;
}

.categoryExpert-popover .categoryExpert-avatar-background img {
    height: 100px;
    width: 100%;
    object-fit: cover;
    filter: opacity(0.5);
}

.categoryExpert-popover .categoryExpert-avatar {
    position: absolute;
    top: 4em;
    height: 75px;
    width: 75px;
}

.categoryExpert-popover .categoryExpert-name {
    color: #1c1c1b;
    margin: 40px 10px 0;
    text-align: center;
    font-size: 16px;
}

.categoryExpert-popover .categoryExpert-segment {
    color: #08a0fe;
    font-size: 14px;
    font-weight: 600;
    margin-top: 6px;
}

.categoryExpert-popover .categoryExpert-segment em {
    margin-right: 8px;
}

.categoryExpert-popover .categoryExpert-score {
    margin-top: 1em;
    color: #1DCD85;
}

.categoryExpert-popover .categoryExpert-score-value {
    font-weight: bold;
    font-size: 1.1em;
}

.categoryExpert-popover .categoryExpert-adminInfo {
    margin: 1em 1em 1.5em;
    text-align: center;
}

.categoryExpert-popover .categoryExpert-adminInfo .categoryName {
    font-weight: bold;
}

.categoryExpert-popover .categoryExpert-action {
    margin: 10px 0 20px;
    font-size: 12px;
}

/*endregion Category Details - Popover*/

/*region Category Details - Confirmation modal*/
.modal .modal-title{
    font-size: 1.3em;
}

.modal .modal-header button span{
    font-size: 1.2em;
}

.modal .modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal .modal-body .experts-modal-body {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.modal .categoryExpert-avatar {
    width: 10em;
    height: 10em;

    border-radius: 10em;
}

.modal .confirmationText {
    width: 20em;
    margin-top: 2em;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
}

.modal .confirmationExplanation {
    width: 20em;
    margin-top: 1.5em;
    text-align: center;
}

/*endregion Category Details - Confirmation modal*/

.hidden {
    display: none;
}

/* Discarded question page */
.discarded-question-container{
    font-size: 1.1em;
}

.discarded-question-container .body{
    margin-top: 1.8em;
}

.discarded-question-container .body .discarded-question{
    font-size: 1.3em;
    font-weight: 600;
}
/* End discarded question page */

/* Categories forms region */
.default-categories-container{
    text-align: center;
}

.default-categories-container .default-category-container{
    display: inline;
    white-space: nowrap;
    overflow: hidden;
}

.default-categories-container input {
    margin-right: 0.5em;
}

.default-categories-container span {
    margin-right: 2em;
    line-height: 3em;
}

.form-group.edit-category-button {
    margin-top: 4em;
}
/* End categories forms region */


/*Temporal for snow*/
.snowflake {
	position: absolute;
	display: block;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	background-image: -webkit-radial-gradient(
			center,
			circle farthest-corner,
			rgba(255, 255, 255, 1) 40%,
			rgba(255, 255, 255, 0) 100%
	);
	background-image: -moz-radial-gradient(
			center,
			circle farthest-corner,
			rgba(255, 255, 255, 1) 40%,
			rgba(255, 255, 255, 0) 100%
	);
	background-image: -ms-radial-gradient(
			center,
			circle farthest-corner,
			rgba(255, 255, 255, 1) 40%,
			rgba(255, 255, 255, 0) 100%
	);
	background-image: radial-gradient(
			center,
			circle farthest-corner,
			rgba(255, 255, 255, 1) 40%,
			rgba(255, 255, 255, 0) 100%
	);
}
.raindrop {
	position: absolute;
	display: block;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 5%;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	background-image: -webkit-radial-gradient(
			center,
			circle farthest-corner,
			rgb(222, 253, 255) 40%,
			rgba(255, 255, 255, 0) 100%
	);
	background-image: -moz-radial-gradient(
			center,
			circle farthest-corner,
			rgba(222, 253, 255) 40%,
			rgba(255, 255, 255, 0) 100%
	);
	background-image: -ms-radial-gradient(
			center,
			circle farthest-corner,
			rgba(222, 253, 255) 40%,
			rgba(255, 255, 255, 0) 100%
	);
	background-image: radial-gradient(
			center,
			circle farthest-corner,
			rgba(222, 253, 255) 40%,
			rgba(255, 255, 255, 0) 100%
	);
}

#save-question {
    order: 1;
}

.form-group.onoffswitch-container {
	flex-direction: row-reverse;
	align-items: flex-start;
	justify-content: flex-end;
	text-align: left;
	margin-bottom: 0;
}

.form-group.onoffswitch-container .onoffswitch {
	margin-right: 1em;
}

#editCompany {
	display: flex;
	flex-direction: column;
	height: 117%;
}

#editCompany form {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 655px;
}

#editCompany form .form-group {
	width: 60em;
}

#editCompany form .form-group-customization {
    width: 12em;
    margin-top: 2em;
}

/* BEGIN ZP-4654  */

#editCompany .modal-content .form-group {
    width: 44em !important;
}

.note-editor .note-dropzone {
    opacity: 0 !important;
    z-index: -1 !important;
}

/* END ZP-4654 */

#editCompany form div.imageButtons {
	margin-top: 1em;
}

#editCompany form .fileupload-new.thumbnail {
	background: #f5f6f7;
}

#editCompany form .tabs-container {
	display: flex;
	flex-direction: column;
}

#editCompany form .tabs-container .tab-content {
	min-height: 50vh;
	margin-top: 3vh;
}

#editCompany form .tabs-container .tab-content .sub-button {
	width: fit-content;
	margin-left: 4em;
}

#editCompany .resaltarNumero {
	color: #08A0FE;
}

#editCompany form #companyEdit-saveButton-container {
	bottom: 0;
	display: flex;
	flex-direction: row-reverse;
	width: 100%;
	margin-bottom: 2em;
}

#editCompany form #companyEdit-saveButton-container input{
	width: auto;
	padding: 1em 2em;
	margin-right: 2em;
}

#editCompany form .radio-selector-value {
    background-color: #F5F6F7;
    padding: 15px 0 15px 20px;
    border-bottom: 1px solid #C9CFD3;
}

#editCompany form .radio-selector-value div:first-child{
    display: flex;
    align-items: center;
}

#editCompany form .radio-selector-value div:first-child input[type="radio"]{
    margin-right: 20px;
}

#editCompany form .radio-selector-value div:first-child h5{
    font-weight: 900;
}

#editCompany form .radio-selector-value div:nth-child(2) {
    margin-left: 38px;
}

#editCompany form .radio-selector-value div:nth-child(2) hr{
    border-top: 1px solid #C9CFD3;
}

#editCompany form .radio-selector-value div:nth-child(2) ul {
    list-style-type: none;
    color: #AAB3B9;
    font-size: 12px;
}

#editCompany form .radio-selector-value div:nth-child(2) ul li:before {
    content: "–";
    position: absolute;
    margin-left: -1.1em;
}


#editCompany form .company-logos > div {
    margin-right: 5vw;
}

#editCompany form .company-logos div label {
    font-size: 1em;
}

#editCompany form .company-logos .main-logo {
    height: 150px;
    width: 275px;
}

#editCompany form .company-logos .square-logo {
    height: 150px;
    width: 150px;
}

/* Company: Historical of user imports */

.user-imports-container{
    background-color: #F5F6F7;
}

.user-import{
    display: flex;
    padding-left: 15px;
}

.user-import-content {
    display: flex;
    flex: 1;
    border-left: 1px solid #C9CFD3;
    align-items: center;
    padding: 5px;
}

.user-import-content > div {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 5px 15px;
}

.user-import-content > div.hover-effect {
    background-color: #cce6ff;
}

.user-import-content > div p{
    margin-bottom: 6px;
    font-size:1.08em;
}

.user-import-content .user-import-date-time {
    display: flex;
    padding-bottom: 10px;
}

.user-import-content .user-import-date-time .form-control{
    width: auto;
    height: 44px;
}

.user-import-content .user-import-buttons {
    margin-left: auto;
}

.user-import-content.user-import-separator {
    border-top: 1px solid #C9CFD3;
}

.user-import-circle {
    margin-top: 10px;
    height: 17px;
    width: 7px;
    background-color: #F5F6F7;
    margin-right:-4px;
    z-index:1;
}

.user-import-circle div {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-top: 5px;
}

.user-import-circle div.green {
    background-color: #1DCD85;
}

.user-import-circle div.blue {
    background-color: #2EA2F8;
}

.user-import:first-child .user-import-circle-container {
    margin-top: 0;
    height: 27px;
}

.user-import:first-child .user-import-circle {
    margin-top: 15px;
}

.user-import-button-more {
    margin: 15px 0 15px 15px;
}

.user-import-empty {
    padding: 1em;
}

/* Company: Billing */

.tab-content > .active .billing-tab-content {
    display: flex;
}

.billing-tab-content > div:nth-child(2) {
    padding-left: 2em;
    padding-top: 2em;
}

.free-section {
    display: flex;
    flex: 1;
}

.free-section .text-container{
    padding-top: 3vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1 1 0;
    max-width: 350px;
    color: #7f8fa4;
}

.free-section .text-container h3 {
    font-size: 1.4em;
    font-family: PoppinsSemiBold, sans-serif;
}

.free-section .text-container p {
    font-size: 1.2em;
    line-height: 1.62;
    margin-bottom: 0;
}

.free-section .text-container b {
    font-family: PoppinsSemiBold, sans-serif;
}

.free-section .text-container span a {
    font-size: 1em;
    text-decoration: underline;
    color: #08a0fe;
}

.free-section .image-container {
    display: flex;
    flex: 1 1 0;
}

.free-section .image-container img{
    width: 100%;
}

.plan-section label {
    margin-top: 1em;
}

@media (max-width: 768px) {
    .free-section {
        flex-direction: column;
        align-items: center;
    }

    .free-section .text-container {
        padding-top: 0;
    }

    .free-section .image-container {
        order: 1;
        margin-top: 3vh;
    }

    .free-section .image-container:last-of-type {
        display: none;
    }
}

/* Header */

.header-container {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: space-between;
	top: 0;
	margin: 0;
	padding: 0 1vw;
	width: 100%;
	min-height: 9vh;
	background: #FFFFFF;
	border: 0.12em solid #E8EAEC;
	z-index: 1010;
}

.header-container .header-logo .header-logo-img {
	max-height: 6vh;
}

.header-container .header-options {
	height: 100%;
	display: flex;
	align-items: center;
}

.header-container .header-options>div {
	margin-right: 2em;
}

.header-container .header-options>div:first-child {
	margin-right: 3.3em;
}

.header-container .header-options>div:last-child {
	margin-right: 0;
}

.header-container .header-options .dropdown-toggle {
	border: 0;
	padding: 0;
	background-color: unset;
	cursor: pointer;
}

.header-container .header-options .dropdown-toggle:hover,
.header-container .header-options .dropdown-toggle:active,
.header-container .header-options .dropdown-toggle:hover .username,
.header-container .header-options .dropdown-toggle:active .username {
    color: #08A0FE;
}

.header-container .header-options .dropdown-toggle .dropdown-arrow {
    -moz-transition: transform 0.5s;
    -webkit-transition: transform 0.5s;
    transition: transform 0.5s;
}

.header-container .header-options .dropdown-toggle .dropdown-arrow.rotate-180 {
    transform: rotate(-180deg);
}

.header-container .header-options .dropdown-menu {
	padding: 0;
	border-radius: 10px;
	background-color: #FFFFFF;
	box-shadow: 0 0 16px 4px rgba(47,70,85,0.08);
}

.header-container .header-options .dropdown-menu li {
	cursor: pointer;
}

.header-container .header-options .dropdown-menu li.disabled {
	cursor: default;
}

.header-container .header-options .dropdown-menu li:first-child > *{
	border-radius: 10px 10px 0 0;
}

.header-container .header-options .dropdown-menu li:last-child > *{
	border-radius: 0 0 10px 10px;
}

.header-container .header-options .dropdown-menu li > * {
	margin: 0;
	padding: 1em 2em;
}

.header-container .header-options .dropdown-menu li div {
	font-size: 0.9em;
}

.header-container .header-options .dropdown-menu li a:hover {
	background-color: #CEECFF;
}

.header-container .header-options .dropdown-menu .divider {
	padding: 0;
	margin: 0.2em 0;
}

/*Change password modal*/
.change-password-modal .password-input-group {
    display: flex;
    align-content: center;
    max-width: 250px;
}

.change-password-modal .password-input-append {
    display: flex;
    align-items: center;
    margin-left: -1.8em;
    color: #C9CFD3;
}

.change-password-modal img {
    margin: 0 auto;
    display: block;
}

.change-password-modal .password-requirements {
    font-size: 1em;
}

.change-password-modal .password-requirements div {
    margin: 0.5em 0;
}

* {
	--sortable-helper-height: 3em;
	--sortable-helper-width: auto;
}

div.ui-sortable-helper {
	height: var(--sortable-helper-height);
	width: var(--sortable-helper-width);

	margin: 0;
	padding: 0;

	color: #FFFFFF;
	text-align: left;
	line-height: var(--sortable-helper-height);
	font-weight: 600;
	font-size: 12px;
}

div.ui-sortable-helper .sortable-helper-content {
	height: var(--sortable-helper-height);
	width: var(--sortable-helper-width);

	padding: 0 2.5em;

	border-radius: 2px;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
	background-color: #08A0FE;
}

div.ui-sortable-helper .sortable-helper-content-backdrop {
	position: relative;

	height: var(--sortable-helper-height);
	width: var(--sortable-helper-width);

	margin: 0;
	padding: 0;

	z-index: -1;
	top: calc(-1 * (var(--sortable-helper-height) + 0.4em));
	left: -0.4em;

	border-radius: 2px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
	background-color: #FFF;
}

tr.ui-sortable-placeholder {
	border-bottom: 2px solid #08A0FE;
	box-shadow: 0 0 4px 0 rgba(0,0,0,0.5);
	padding: 0;
}

.table tr.ui-sortable-placeholder td {
	padding: 0;
	border: 0;
	line-height: 0;
}

.ui-selection-count {
	position: relative;
}

.ui-selection-count[data-ui-selection-count]:after {
	--circle-size: 1.6em;
	content: attr(data-ui-selection-count);

	position: absolute;

	width: var(--circle-size);
	height: var(--circle-size);

	top: calc(-1 * (var(--circle-size) / 2));
	right: calc(var(--circle-size) / 3);

	background-color: #F85359;
	color: white;

	text-align: center;
	line-height: 1.7em;
	font-weight: 600;
	font-size: 14px;
	font-family: Poppins;

	border-radius: 100%;
	box-shadow: 0 0 1px #333;
}

div#availableQuestions_paginate.dataTables_paginate {
	margin-right: 18em;
}

.invade-upwards {
	margin-top: -5.7em;
}

.invade-upwards *:first-child {
	margin-right: 1em;
	z-index: 1;
}

.invade-upwards .btn-primary *:first-child{
    margin-right: 0.5em;
}

.invade-downwards {
    margin-top: 1.3em;
}

div#randomModeSwitch label {
	margin-right: 1.5em;
}

.motivations-delete-icon {
    margin-top: -1px;
}

.disable-margin{
    margin:0px;
    padding:0px;
}

.col-width-10{
    width: 10%;
}

.col-width-5{
    width: 5%;
}

.col-width-40{
    width: 40%;
}

.col-width-26{
    width: 26%;
}

.col-width-7{
    width: 7%;
}

.col-width-6{
    width: 6%;
}

width-10{
    width: 10px;
}

.pagination-style{
    min-height:5em;
}

.pagination-style.with-button {
	margin-right:18em;
}

.user-button-style{
    width:15em;
    float:right;
    margin-top:-4.5em;
    margin-right: 0em;
    padding-right: 0em;
}

/*region Trainings*/

.form-group.training-style{
    width:54em;
    margin-left:0em;
}

.form-group .training-questions-style{
    width:4em;
}

.switch-training-style{
    padding-left: 2em;
}

div.table-spinner {
    display: flex;
    justify-content: center;
    margin: 2em 0;
    height: 5em;
}

.table-spinner img {
    width: 5em;
}

.upload-excel-dialog .modal-body{
    align-items: initial;
}

.upload-excel-dialog .modal-body p, .upload-excel-dialog .modal-body .step-description .uploaded-file-name span{
    color: #979797;
    font-size: 1em;
}

.upload-excel-dialog .modal-body .step-number {
    height: 1.55em;
    min-width: 1.55em;
    border: 0.1em solid #CED1D6;
    line-height: 1.4em;
    font-size: 2em;
    margin-right: 20px;
}

.upload-excel-dialog .modal-body .step-description {
    margin-top: 5px;
}

.upload-excel-dialog .modal-body .step-description .uploaded-file-name {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.game_status_icon {
	font-size: 1em;
	margin-right: 0.5em;
	vertical-align: -0.2em;
}

.draft_status {
	color: #7F8FA4;
}

.programmed_status {
	color: #08A0FE;
}

.ongoing_status {
	color: #1DCD85;
}

.finished_status {
	color: #7F8FA4;
}

select#training_status_select {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 4px;
	padding: 0.7em 0.5em 0.7em 1em;
	background: #FCFCFC url("../images/keyboard_arrow_down-24px.svg") no-repeat right;
	width: 100%;
}

.game_evaluation {
    color: #7F8FA4;
    display: flex;
    align-items: center;
}

.game_evaluation i {
    font-size: 14px;
    margin-right: 7px;
}

#titleField::placeholder {  /* Chrome, Firefox, Opera, Safari 10.1+ */
    font-style: italic;
}

#titleField::-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-style: italic;
}

#titleField::-ms-input-placeholder { /* Microsoft Edge */
    font-style: italic;
}

.training-accordion {
    max-width: 97.5%;
    margin: 0;
    outline: none;
}

.training-accordion .card,
.training-accordion .card:last-child .card-header {
    border: none;
}

.training-accordion .card-header {
    border-bottom-color: #EDEFF0;
    background: transparent;
}

.training-accordion .card-body {
    padding-left: 3em;
    padding-right: 8em;
}

.training-accordion .fa-stack {
    font-size: 18px;
}

.training-accordion .btn {
    width: 100%;
    padding: 0;
    text-align:left;
    color: #2F4655;
    font-family: 'Poppins', sans-serif;
    border-bottom: 1px solid #9B9B9B;
    outline: none
}

.training-accordion .btn-link:hover,
.training-accordion .btn-link:focus {
    text-decoration: none;
}

.training-accordion li + li {
    margin-top: 10px;
}

.training-accordion .card-header .form-group{
    margin-left: 0;
    margin-top: 0;
}

.training-accordion .title{
    padding-left: 0em;
    margin-top: 0.35em;
}

.text-muted{
    margin-bottom: 1em;
}

.text-muted-black{
    color: black;
    margin-bottom: 1em;
}

#calendarDataForm .control-label{
    text-align:left;
}

#calendarDataForm #motivations{
    margin-top: 3em;
}

.calendar-group{
    margin-bottom: 2em;
}

.calendar-title{
    padding-left: 0;
}

#user-list-table{
    padding-left: 0;
}

.users-toolbar{
    margin-top: 1.5em;
}

#availableQuestions_filter{
    margin-top: 1.5em;
    margin-bottom: 1em;
}

#availableQuestions_filter input{
    -webkit-appearance: searchfield;
    background-color: #FFFFFF;
    border: 0.1em solid #C7C8C9;
    border-radius: 0.4em;
    font-size: 1em;
    padding: 0.5em;
    box-shadow: none;
    width: 125%;
    height: 30px;
}

#availableQuestions_filter input::placeholder{
    color:#9B9B9B;/* Chrome, Firefox, Opera, Safari 10.1+ */
}

#availableQuestions_filter input::-ms-input-placeholder{
    color:#9B9B9B; /* Internet Explorer 10-11 */

}

#availableQuestions_filter input::-ms-input-placeholder { /* Microsoft Edge */
    color:#9B9B9B;
}

#availableQuestions_length{
    margin-top: 1em;
}

.option-description{
    width:32em;
    margin-left: 4.8em;
}

#arrow{
    width:0.5em;
    margin: 0;
    padding: 0;
}

#calendarOptions{
    margin-top: 3em;
}

#calendarOptions div:first-child{
    margin-left:0;
    padding-left:0;
}

#newNotification{
    margin-left: 3em;
}

@media (min-width: 768px){

    .form-horizontal .control-label {
        margin-bottom: 0.5em;
    }
}

#users-no-results,
#motivations-default-no-results,
#motivations-no-results{
    text-align: center;
}

#randomModeSwitch #randomModelLabel{
    margin-top:0.50em;
    margin-left: 1em;
    margin-right: 0;
}

#randomModeSwitch #randomModeInfo{
    margin-top: 0.5em;
}

.add-icon-margin-users{
    margin-left:-0.50em;
}

.row.list-toolbar .loader, a.btn .loader {
	width: 1.5em;
}

.new-game #wizard{
    margin-bottom: 3em;
}

.side-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 65%;
    min-width: 700px;
    height: 100%;
    z-index: 1011;
    background-color: #FFFFFF;
    box-shadow: -4px 0 6px rgba(0, 0, 0, 0.1);
    padding: 3em 3em 0 4em;
    overflow: scroll;
}

.side-panel .panel-header {
    display: flex;
    align-items: flex-start;
    margin-left: -2em;
    min-height: 90px;
}

.side-panel .panel-header div {
    margin-top: 5px;
}

.side-panel .panel-header .close {
    opacity: 1;
    font-size: 30px;
    margin-right: 0.8em;
    padding-top: 5px;
}

.side-panel .panel-header .close i {
    font-size: 26px;
}

@media (max-width: 768px) {
    .side-panel {
        width: 100%;
        min-width: initial;
    }
}

@media (max-width: 480px) {
    .side-panel {
        padding-left: 3em;
    }
}

/*endregion*/

.loading_small {
	width: 2em;
}

.smtp-config{
    padding-top: 2em;
}

.smtp-config .col-sm-8{
    margin-bottom: 2em;
}

.smtp-config-switch{
   margin-left: 1em;
   margin-top: 1.5em;
}

.hiddenFileInput .file_upload{
    height: 100%;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

.video-circle{
    width: 3em;
    height: 3em;
    border-radius: 50%;
    object-fit: cover;
}

.subMotivation{
    margin-top: 1.5em;
}

.notificationPushMessage{
    padding-left: 1.5em;
}

.notification-push{
    margin-top: 1em;
}

.users-message-margin {
    margin-bottom: 5em;
}

#removeQuestionsButtonTop{
    margin-top: -2.5em;
}

.margin-edit-motivation{
    margin-top: 1.5em;
}

.help-block-training{
    display: block;
    margin-left: 0.5em;
    color: #737373;
}

#trainingDates{
    margin-top:0.5em;
}

#gameStatusTitle {
    margin-left: -2em;
    padding-left: 1em;
    font-size: 1.1em;
    border-left: 2px solid #C9CFD3;
}

#gameStatusTitle i {
    font-size: 1.2em;
}

.fieldLengthControl{
    text-align: right;
    margin-top: 5px
}

#charsControlSummernote{
    margin-right: 0.25em;
}

input#contactPerson[readonly]{
	cursor: text;
	background-color: #F5F6F7;
}

.create-question-panel-row{
    margin-top:2em;
}

.create-question-panel-info{
    padding-left:4.5em;
    padding-top:0.75em;
    width:1em
}

#targetCompanies{
    height: 15em;
}

#copyResults td{
    padding: 0.25em;
}

#copyResults thead{
    font-weight: bold;
}

.copyCompany{
    width: 30%;
}

.copyResultOptions{
    text-align: center;
}

.successCopy{
    color:green;
}

.wrongCopy{
    color:red;
}