/*SUPPORT*/
.desktop-only {display: initial !important;}
.mobile-only {display: none !important;}

/*SWITCHES*/
input[type="checkbox"].switch {width: 44px; height: 24px; position: relative; display: block;}
input[type="checkbox"].switch:before {width: 100%; height: 100%; content: ''; display: block; position: absolute; top: 0; left: 0; border-radius: 20px; background: #bbb; transition: background ease-in-out 0.2s; -webkit-transition: background ease-in-out 0.2s; -moz-transition: background ease-in-out 0.2s; -o-transition: background ease-in-out 0.2s;}
input[type="checkbox"].switch:after {width: 18px; height: 18px; content: ''; display: block; position: absolute; top: 3px; left: 3px; border-radius: 20px; background: #fff; transition: left ease-in-out 0.2s; -webkit-transition: left ease-in-out 0.2s; -moz-transition: left ease-in-out 0.2s; -o-transition: left ease-in-out 0.2s;}
input[type="checkbox"].switch:checked:before {background: #E82EB0;}
input[type="checkbox"].switch:checked:after {left: 23px;}

/*BUTTONS*/
.button {height: 42px; line-height: 42px; padding: 0 20px; font-size: 0.95em; border-radius: 20px;}
.btn-small {height: 30px; line-height: 30px; font-size: 0.75em;}

/*BUTTON ICONS*/
.btn-small.btn-icon-left {background-position: 6px center; background-size: 20px 20px;}
.btn-small.btn-icon-right {background-position: calc(100% - 6px) center; background-size: 20px 20px;}
.btn-icon-left {background-position: 12px center; padding-left: 45px; background-size: 24px 24px;}
.btn-icon-right {background-position: calc(100% - 9px) center; padding-right: 45px; background-size: 24px 24px;}

/*TABLES*/
.table .table-container {margin-left: 0; margin-right: 0;}
.table table {border-radius: 18px; margin: 0;}
.table table td, .table table th {padding: 20px; font-size: 0.9em;}
.table table a {width: 24px; height: 24px;}

/*COLUMNS*/
.columns:after {content: ''; clear: both; display: block;}
.columns .col {float: left;}
.columns-2 .col-1 {width: calc(50% - 24px); margin: 0 12px;}
.columns-2 .col-1:first-child, .columns-2 .col-1:last-child {width: calc(50% - 12px);}
.columns-3 .col-1 {width: calc(33.33% - 16px);}
.columns-3 .col-2 {width: calc(66.66% - 8px);}
.columns-4 .col-1 {width: calc(25% - 18px);}
.columns-4 .col-2 {width: calc(50% - 6px); margin: 0px 0 0 12px !important;}
.columns-4 .col-2-IND-PRD {width: calc(50% - 6px); margin: 9px 0 0 12px !important;}
.columns-4 .col-3 {width: calc(75% - 12px); }
.columns-5 .col-1 {width: calc(20% );}
.columns-5 .col-2 {width: calc(40% - 4.8px);}
.columns-5 .col-3 {width: calc(60% );}
.columns-5 .col-4 {width: calc(80% );}
.columns-6 .col-1 {width: calc(16.66% );}
.columns-6 .col-2 {width: calc(33.33% );}
.columns-6 .col-3 {width: calc(50% );}
.columns-6 .col-4 {width: calc(66.66% );}
.columns-6 .col-5 {width: calc(83.33% );}
.columns-7 .col-1 {width: calc(14.28% );}
.columns-7 .col-2 {width: calc(28.57% );}
.columns-7 .col-3 {width: calc(42.85% );}
.columns-7 .col-4 {width: calc(57.14% );}
.columns-7 .col-5 {width: calc(71.42% );}
.columns-7 .col-6 {width: calc(85.71% );}
.columns-8 .col-1 {width: calc(12.5% );}
.columns-8 .col-2 {width: calc(25% );}
.columns-8 .col-3 {width: calc(37.5% - 12px);}
.columns-8 .col-4 {width: calc(50% );}
.columns-8 .col-5 {width: calc(62.5% - 12px);}
.columns-8 .col-6 {width: calc(75% );}
.columns-8 .col-7 {width: calc(87.5% );}
.columns-9 .col-1 {width: calc(11.11% );}
.columns-9 .col-2 {width: calc(22.22% );}
.columns-9 .col-3 {width: calc(33.33% );}
.columns-9 .col-4 {width: calc(44.44% );}
.columns-9 .col-5 {width: calc(55.55% );}
.columns-9 .col-6 {width: calc(66.66% );}
.columns-9 .col-7 {width: calc(77.77% );}
.columns-9 .col-8 {width: calc(88.88% );}
.columns-10 .col-1 {width: calc(10% );}
.columns-10 .col-2 {width: calc(20% );}
.columns-10 .col-3 {width: calc(30% );}
.columns-10 .col-4 {width: calc(40% );}
.columns-10 .col-5 {width: calc(50% );}
.columns-10 .col-6 {width: calc(60% );}
.columns-10 .col-7 {width: calc(70% );}
.columns-10 .col-8 {width: calc(80% );}
.columns-10 .col-9 {width: calc(90% );}
.columns .col:first-child {margin: 0 12px 0 0 !important;}
.columns .col:last-child {margin: 0 0 0 12px }

/*MENU*/
.menu {height: 100%; width: 270px;}
.menu header {height: auto; padding: 40px 0; background: #e6e6e6;}
.menu header:after {display: none;}
.menu header .iso {display: none;}
.menu header .logo {width: 190px; display: block; margin: 0 auto;}
.menu header .ic-menu {display: none;}
.menu .menu-list {height:calc(100% - 180px); padding: 0; background: #e6e6e6; overflow:auto;}
.menu .menu-list li > div, .menu .menu-list li > a {padding: 0 30px; border-top-left-radius: 0; border-bottom-left-radius: 0;}
.menu .menu-list li > div.drop-down:after {top: 13px; right: 15px; background-image: url('../Images/Controls/arrow_down_gray.svg');}
.menu .menu-list li .menu-item {margin-right: 15px; height: 50px; background: none;}
.menu .menu-list li .menu-item label {font-size: 0.7em; line-height: 50px; color: #7f7f7f;}
.menu .menu-list li:hover .menu-item, .menu .menu-list li.active .menu-item {background: #E82EB0;}
.menu .menu-list li:hover .menu-item label, .menu .menu-list li.active .menu-item label {color: #fff;}
.menu .menu-list li:hover > div.drop-down:after, .menu .menu-list li.active > div.drop-down:after {background-image: url('../Images/Controls/arrow_down_white.svg');}
.menu .menu-list li .submenu-list li {margin: 0;}
.menu .menu-list li .submenu-list li .submenu-item {background: none; border-radius: 0; margin: 0 20px !important;}
.menu .menu-list li .submenu-list li .submenu-item label {font-size: 0.6em; line-height: 36px;}
.menu .menu-list li .submenu-list li:not(:first-child) .submenu-item {border-top: 1px solid #ddd;}
.menu .menu-list li.active .submenu-list {margin: 10px 0 20px 0;}
.menu .menu-list li.active .submenu-list li .submenu-item {height: 36px;}

/*PROGRESS BAR*/
.progress-bar {height: 18px; position: relative; background: #bbb; border-radius: 20px;}
.progress-bar .progress {background: #FA6F19; width: 0; height: 100%; position:absolute; top:0; left: 0; border-radius: 20px;}
.progress-bar .circle {width: 14px; height: 14px; border-width: 5px; }

/*CONTENT AND STRUCTURE*/
.content {width: auto; max-width: initial; margin-top: 0; margin-left: 270px;}
.content > header {height: 80px; background: #f1f1f1;}
.content > header:after {content: ''; display: block; clear: both;}
.content > header .info {padding: 20px 30px; float: left;}
.content > header .actions {float: right; margin: 20px;}
.content > header .actions .ic-settings {width: 32px; height: 32px; display: inline-block; vertical-align: middle; margin-right: 15px;}
.content > header .actions .user-options {display: inline-block; vertical-align: middle; position: relative; z-index: 2;}
.content > header .actions .user-options:hover{transform:scale(1.03);}
.content > header .actions .user-options .user {height: 38px; padding: 0 40px 0 10px; border-radius: 40px; position: relative; overflow: hidden; display: inline-block; cursor: pointer; vertical-align: middle;}
.content > header .actions .user-options .user:after {content: ''; display: block; width: 25px; height: 25px; background: transparent url('../Images/Controls/arrow_down_gray.svg') center no-repeat; position: absolute; top: 7px; right: 5px; transition: transform 0.3s ease-in-out; -webkit-transition: transform 0.3s ease-in-out; -moz-transition: transform 0.3s ease-in-out; -o-transition: transform 0.3s ease-in-out;}
.content > header .actions .user-options .user .ic-user-foto {margin-left:10px; width: 35px; height: 35px; display: inline-block; vertical-align: middle; border-radius:50%; background-size:cover;}
.content > header .actions .user-options .user .ic-user {margin-left:10px; width: 35px; height: 35px; display: inline-block; vertical-align: middle;}
.content > header .actions .user-options .user label {font-size: 0.7em; margin-left: 10px; line-height: 38px; display: inline-block; vertical-align: middle; pointer-events: none;}
.content > header .actions .user-options .submenu-list {width: 300px; opacity: 0; pointer-events: none; position: absolute; right: 0; top: 45px; background: #e6e6e6; padding: 20px; border-radius: 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);}
.content > header .actions .user-options .submenu-list.active {opacity: 1; pointer-events: all;}
.content > header .actions .user-options .submenu-list .submenu-item {background: #fff; margin-bottom: 5px; padding: 0 20px; border-radius: 40px; position: relative; overflow: hidden; display: block; cursor: pointer;}
.content > header .actions .user-options .submenu-list .submenu-item label {font-size: 0.7em; line-height: 30px; display: block;}
.content > header .actions .user-options .submenu-list .submenu-item label:hover{color:#E82EB0; transform:scale(1.03);}
.content > header .actions .user-options .submenu-list .submenu-item .submenu-icon {width: 22px; height: 22px; position: absolute; right: 4px; top: 4px; border-radius: 12px;}
.content > .centered {width: calc(100% - 60px); max-width: 1000px; margin: 30px auto; padding-bottom:20px;}

/*LOGIN*/
.login .background {width: calc(100% - 500px);}
.login .background:after {display: none;}
.login .panel {left: calc(100% - 250px);}
.login .panel .forget-password, .login .panel .step-password{ text-align:center; color:#606060;}
.login .panel .new-password{color:#FA6F19; border-bottom:1px solid #FA6F19; display:inline;}
.login .panel .new-password:hover{color:#FA6F19; border-bottom:1.5px solid #FA6F19; font-weight:bold; transform: scale(1.1); -webkit-transform: scale(1.1);-ms-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1);}

/*DETALLE USUARIO*/
.detalle-usuario .action-perfil {margin-bottom: 30px;}
.detalle-usuario .user-content {margin-top: 20px;}

/*ESTRELLAS DE PUNTUCION*/
.star.small div{width:20px; height:20px;}

/*PONDERACION PERIODO ESTRATÉGICO*/
.ponderacion div label{width: 270px;}
.periodo-estrategico-detail .legend label{width:340px; text-align:justify;}

 /*PORCENTAJE Objetivos*/
 .porcentaje-evaluacion-objetivos {display: flex; flex-wrap: wrap;}
 .porcentaje-objetivo .parrafo-objetivo{position:absolute; top:5px; left:200px; width:210px; height:210px;}
 .porcentaje-objetivo .parrafo-objetivo p{font-size:15px;}
 .objetivos .porcentaje-objetivo .parrafo-objetivo p{font-size:15px;}

  /*Definición de Objetivos*/
 .detalle-objetivo{position:relative; margin-bottom:15px;}
 .detalle-btn-objetivo{position:absolute; top:2.5px; right:0px;}
 .objetive-definition .detalle-objetivo .perfil-usuario{width:initial;}

 /*EVALUACIONES PENDIENTES*/
 .evaluaciones-pendientes .usuario-pendiente .numero-evaluaciones .boton-evaluar{position:absolute;  display: inline-block; top:3px; right:3px;}

 /*SEGUIMIENTO*/
 @media (min-width: 70em) {
.mi-seguimiento .perfil-usuario:after {content: ''; display: block; clear:both;}
.mi-seguimiento .perfil-usuario {height: 130px; float:left!important; width: 33.3%;}
.mi-seguimiento .ic-user-foto {width: 40px; height: 40px; margin-right: 5px;}

}

 /*DETALLE SEGUIMIENTO*/
.detalle-seguimiento .datos-seguimiento{position:relative;}
.detalle-seguimiento .datos-seguimiento .screen-actions{position:absolute; display:inline-block; top:-15px; right:0px;}

/*ENVIO CARD*/
/*.envio-card{}*/

/*DETALLE DE MIS CARD*/
/*.detalle-mi-seguimiento .entrega-card{}*/
.colores-card .paleta-colores-input label span{margin-left:12px;}

 /*EVALUACIONES PENDIENTES*/
.card-pendientes .usuario-pendiente .numero-pendientes .boton-entregar{position:absolute;  display: inline-block; top:3px; right:3px;}

/*POWER BY*/
.footer{height: 37px; position:fixed; bottom:0; left:0;z-index:2; background-color:#e6e6e6; width:260px; padding:20px 0px 15px 10px; margin:0;}
.create-by .power-by{width:30px; height:30px;}

/*COLABORADOR*/
.colaborador .perfil-usuario .datos-usuarios{margin-left:20px; width:calc(100% - 150px);}

/*ORGANIGRAMA*/
.organigrama .subordinados-organigrama .cargar-imagen{width:90px; height:90px; border:none;}
.organigrama .subordinados-organigrama:after{top: -171px; height:calc(100% + 105px);}
.organigrama .subordinados-organigrama:before{top: -171px;}

/*TRELLO*/
 .trello-postit{margin-top:70px;}
 .trello-postit .columns{display:flex;}
 .trello-postit .border-title{margin-top:-50px;}
 .trello-postit .col{border-bottom:none; border-right:1px solid gray;}
 .trello-postit .col:last-child{border-right:initial}
 .trello-postit .trello-state .post-its .detalle-post-its .state-flecha .ic-flecha-trello-next{right:-55px; top:50%; left:initial; transform: rotate(270deg) translateX(50%); -webkit-transform: rotate(270deg) translateX(50%); -ms-transform:rotate(270deg) translateX(50%); -moz-transform:rotate(270deg) translateX(50%); -o-transform:rotate(270deg) translateX(50%);}
 .trello-postit .trello-state .post-its .detalle-post-its .state-flecha .ic-flecha-trello-prev{left:-55px; top:50%; transform: rotate(90deg) translateX(-50%); -webkit-transform: rotate(90deg) translateX(-50%); -ms-transform: rotate(90deg) translateX(-50%); -moz-transform: rotate(90deg) translateX(-50%); -o-transform: rotate(90deg) translateX(-50%);}
 
  /* EVALUACION COMPETENCIAS */
 .competition-evaluation .perfil-usuario *{display:inline-block; vertical-align:middle;}
 .competition-evaluation .perfil-usuario .foto-usuario {width: 100px; height: 100px; margin:initial; display:inline-block;}
 .competition-evaluation .perfil-usuario .datos-usuarios { margin:0 20px; text-align:initial; display:inline-block;}

 .competition-evaluation .objeto-competencia{position:initial; height:initial!important;}
 .competition-evaluation .objeto-competencia .preguntas-competencias{width: initial; display: block; top:initial; left:initial;}
 .competition-evaluation .objeto-competencia .preguntas-competencias.left{left:initial;}
 .competition-evaluation .objeto-competencia .preguntas-competencias.right{left:initial;}

 .competition-evaluation .competition-desktop .content-competition{height:initial;}
 .competition-evaluation .competition-desktop .content-competition .ask-name-desktop{background-color: #E82EB0; padding:13px 5px 13px 15px; border-radius:20px; display:block; margin-top:20px; position:relative;}
 .competition-evaluation .competition-desktop .content-competition .ask-name-desktop:hover{transform:scale(1.03); -webkit-transform:scale(1.03); -ms-transform: scale(1.03); -webkit-transform: scale(1.03); -moz-transform: scale(1.03); -o-transform: scale(1.03);}
 .competition-evaluation .competition-desktop .content-competition .ask-name-desktop label{color:white; font-size:13px;}
 .competition-evaluation .objeto-competencia{width:initial!important; transform:translateX(0%)!important; -webkit-transform:translateX(0%)!important; -ms-transform: translateX(0%)!important; -webkit-transform:translateX(0%)!important; -moz-transform: translateX(0%)!important; -o-transform: translateX(0%)!important;}
 .competition-evaluation .competition-desktop .content-competition .ask-name-desktop .porcentaje-global label {color:white; position:absolute; top:12px; right:40px; font-size:13px;}
 .competition-evaluation .competition-desktop .content-competition .ask-name-desktop .porcentaje-global span{background-image: url('../Images/Controls/arrow_down_white.svg'); background-repeat:no-repeat; width:25px; height:25px; display:inline-block; position:absolute; top:8px; right:15px;}
 .competition-evaluation .competition-desktop .content-competition .objeto-competencia .preguntas-competencias > p{margin:10px 0 0 15px; text-align:left; font-size:0.85em; width:calc(50% - 100px); text-align:justify;}
 .competition-evaluation .competition-desktop .content-competition .objeto-competencia .preguntas-competencias {position:relative; margin-bottom:34px!important;}
 .competition-evaluation .competition-desktop .content-competition .objeto-competencia .preguntas-competencias .star{margin:initial; position:absolute; top:-2px; left: 50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%);}
 .competition-evaluation .competition-desktop .content-competition .objeto-competencia .preguntas-competencias .star p {font-size: 0.8em;}
 .competition-evaluation .competition-desktop .content-competition .objeto-competencia .preguntas-competencias .star.big a{width:20px; height:20px; background-image:url(../Images/Icons/ic_estrella_borde_gris.svg); background-repeat:no-repeat; margin-right:5px;}
 .competition-evaluation .competition-desktop .resultado-objetivos{margin-top:30px!important; display:block;}
 .competition-evaluation .competition-desktop .h-line, .competition-evaluation .screen-actions{display:block;}
 .competition-evaluation .competition-desktop .content-competition .objeto-competencia .preguntas-competencias .star a.active{background:url(../Images/Icons/ic_estrella_gris.svg); background-repeat: no-repeat;}

 /*REPORTES*/ 
.reportes {position:relative;}
.reportes .boton-avance{position:absolute; top:-35px; right:0px;}
.reportes .periodo-sprint{width:initial;}
.reportes .download-field .select-reporte{width: 64%; margin-left: 15px;}
.reportes .download-field .button.reporte{top: -4px;}
.reportes .download-field .btn-icon-left{padding-left: 40px;}

@media only screen and (min-width:71em){
    .combobox-periodo-estrategico {margin-bottom: initial;}
    .combobox-sprint {position: absolute; top: 0; left: 200px;}
}

/*REUNION DE SEGUIMIENTO*/
.reunion-seguimiento .container-titulo .container-botones{display: flex; position: absolute; right: 2px; }
.reunion-seguimiento .container-hitos .form-field{display: block;}
.reunion-seguimiento .tabla-reunion-seguimiento{ margin-left: 0; margin-right: 0;}
.reunion-seguimiento .container-titulo .container-botones .boton-colaboradores{bottom: 0; left: 0; position: relative;}
.reunion-seguimiento .container-titulo .container-botones .boton-colaboradores a{width: auto;}
.metas-individuales .separador input{margin-top:0px;}
.metas-individuales .periodo-recojo .inputs-recojo-evidencia{display: flex; margin-left: 140px;}
.metas-individuales .descripcion-evidencia{display: flex;}
.metas-individuales .descripcion-periodo{display: flex;}
.metas-individuales .indicador textarea{ resize: none; width: 80%; margin-left: 96px; background-color: rgba(0,0,0,0.05); max-height: 500px;}
.metas-individuales .ordenador{width: 200px; max-width: 180px;}
.metas-individuales .acciones-mejora{display: flex;}
.metas-individuales .ambito-mejora{display: flex;}
.metas-individuales div select{margin-top:0px;}
.metas-individuales div textarea{margin-top:0px;}
.metas-individuales .ambito-mejora select{width: 80%; margin-left: 10px;text-align-last:center;}
.metas-individuales .indicador {display: flex; justify-content: left;}
.metas-individuales .meta{display: flex; justify-content: left;}
.metas-individuales .meta input { width: 80%; margin-left: 140px; background-color: rgba(0,0,0,0.05);}
.metas-individuales .acciones-mejora input{width: 80%;}
.metas-individuales .descripcion-periodo input{width: 80%;}
.metas-individuales .descripcion-evidencia input{width: 80%;}
.metas-individuales .indicador label{line-height: 55px;}
.metas-individuales .meta label{line-height:45px;}


/*ESTADO OBJETIVOS*/
.objetive-definition .reunion-fijacion{ display: flex;}
.objetive-definition .reunion-fijacion >label{ margin-right: 20px; line-height: 58px;}
.objetive-definition .reunion-fijacion .datepicker{ position: relative;}
.objetive-definition .container-titulo .container-botones { margin-bottom: 20px; display: flex; position: absolute; right: 2px;}
.objetive-state { position: relative; margin-bottom: 0;}
.objetive-state .add-new-objetive{ position: absolute; top: 0; right: 0; left: auto; z-index:1}
.objetive-evaluation .form-field > *:first-child {float: left; width: 45%; line-height: 36px; text-align: right;}
.objetive-evaluation .container-titulo .container-botones { margin-bottom: 20px; display: flex; position: absolute; right: 2px;}


/*DASHBOARD*/
.dashboard .individual-result .button-descargarPdf a{ position: absolute; right: 0; top: 0; padding-left: 45px;}

.popup-comprotamiento .grupo-ocupacional .nombre-grupo .rol label{ width: initial;}

/*TOOLTIP PARA ESTRELLAS*/

.competition-evaluation .competition-desktop .content-competition .objeto-competencia .preguntas-competencias .star p {
    font-size: 0.8em;
}

/*ACCION DE MEJORA*/
.accion-mejora .form-field input, .accion-mejora .form-field select, .accion-mejora .form-field textarea{width: 100%;}
.accion-mejora .content-fecha {width: 100%;}
/*PLAN MEJORA*/
.plan-mejora .container-titulo .container-botones {display: flex; position: absolute; right: 2px;}