:root{
   --height100:100px;
   --width100:100px;

   --brown:#C25007;
   --blueDarkest:#253B66;
   --blueDark:#296DA5;
   --blueMedium:#49A1D7;
   --blueLight:#D8E9FD;
   --grayColor:#D2D2D2;
   --greenDark:#336600;
   --iconCut:#144273;
   --iconOrange:#E27027;
   --iconYellow:#F59B2D;
   --lightYellow:#FEDAA1;
   --mainBack:#FFFFFF;
   --mainColor:#003366;
   --yellowLight:#F6B91F;
}

*{
   box-sizing: border-box;
}

a{

   text-decoration:none;
}

body{

   font-family:calibri;
}

table{

   height:100%;
   width:100%;
   font-family:calibri;
   border-collapse:collapse;
   margin-top:0;
}

td{

   vertical-align:middle;
   text-align:center;
}

textarea{

   resize: none;
}

textarea:focus, input:focus{

   outline: none;
}

video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}

.bienvenido1{

   color:var(--iconYellow);
   font-family:calibri;
   font-size:9vh;
   font-weight:bold;
   vertical-align:bottom;
}

.bienvenido2{

   color:var(--mainColor);
   font-family:calibri;
   font-size:2.3vh;
   font-weight:bold;
   letter-spacing:0.3vh;
   vertical-align:top;
}

.bonoCalificacion{

   font-size:3.9vh;
   font-weight:bold;
}

.bonoCon{

   background-color:var(--mainColor);
   color:var(--mainBack);
}

.bonoRango{

   font-weight:normal;
   font-size:1.6vh;
}

.bonoSin{

   background-color:var(--yellowLight);
   color:var(--mainColor);
}

.boxCenter{

   background-image:url(/art/images/dashProfile.png);
   background-position-x:center;
   background-repeat:no-repeat;
   background-size:calc(var(--height100) * 0.3) calc(var(--height100) * 0.3);
   height:calc(var(--height100) * 0.3);
   left:calc(var(--width100) * 0.5 - var(--height100) * 0.15);
   position:relative;
   top:-37.5vh;
   width:calc(var(--height100) * 0.3);
}

.boxCenter div{

   text-align:center;
   padding-top:10vh;
}

.bulletoteText{

   color:var(--iconYellow);
   font-variant:small-caps;
   font-weight:bold;
   font-size:2.8vh;
}

.bulletoteTrail{

   margin-left:1.2vh;
   margin-right:1.2vh;
   color:var(--mainColor);
   text-decoration:none;
}

.button{

   background-color:var(--mainBack);
   border-width:1;
   border-style:solid;
   border-color:var(--mainColor);
   color:var(--mainColor);
   font-family:arial narrow;
   font-size:1.8vh;
   height:2.1vh;
   resize: none;
   width:100%;
}

.cellBlue2{

   border-color:var(--blueMedium);
   border-style:solid;
   border-width:1;
   color:var(--blueMediun);
}

.cellGray{

   border-color:#9a9a9a;
   border-style:solid;
   border-width:1;
   font-size:1.8vh;
}

.cellDepto{

   border-style:solid;
   border-width:3;
   border-color:var(--mainColor);
   background-color:var(--mainBack);
   color:var(--mainColor);
   font-family:calibri;
   font-weight:bold;
}

.cellDeptoA{

   font-size:1.5vh;
   text-decoration:none;
   color:var(--mainColor);
}

.fieldInputA{

   background-color:var(--mainBack);
   border-color:var(--iconYellow);
   border-style:solid;
   border-width:2;
   color:var(--mainColor);
   font-family:calibri;
   font-size:2.2vh;
   outline:none;
   text-align:left;
   width:100%;
}

.fieldInputA2{

   background-color:var(--mainBack);
   border:none;
   color:var(--mainColor);
   font-family:calibri;
   font-size:3.3vh;
   outline:none;
   text-align:left;
   width:100%;
}

.fieldInputB{

   width:100%;
   background-color:var(--mainBack);
   border-color:var(--iconYellow);
   border-style:solid;
   border-width:1;
   color:var(--mainColor);
   font-family:calibri;
   font-size:2vh;
   outline:none;
   padding-bottom:6px;
   padding-left:15px;
   padding-top:6px;
   text-align:left;
}

.fieldTag{

   font-weight:bold;
   font-size:2.2vh;
   text-align:right;
   color:var(--mainColor);
}

.fieldTag2{

   background-color:#99CCCC;
   color:var(--mainColor);
   font-size:3.3vh;
   padding-bottom:6px;
   padding-right:15px;
   padding-top:6px;
   text-align:right;
   vertical-align:top;
}

.fldBuscarHead{

   font-weight:normal;
   text-align:left;
   width:100%;
}

.fldBuscarHead a{

   color:#336699;
   font-size:3.2vh;
   text-decoration:none;
}

.fldBuscarHead div{

   margin-bottom:0.5vh;
}

.gradientBlue1{

   background:linear-gradient(to top right, var(--blueDarkest) 50%, var(--blueMedium) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.gradientOrange1{

   background:linear-gradient(to top right, var(--iconOrange) 50%, var(--iconYellow) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.headCellY{

   background-color:var(--iconYellow);
   color:var(--mainBack);
   font-size:1.3vh;
   font-weight:bold;
}

.headHidden{

   color:var(--mainColor);
   background-color:var(--mainBack);
   font-size:2.2vh;
   text-decoration:none;
}

.iconSeccionActiva{

   background:url('/art/images/rightFlechaBlancaAzul.gif') no-repeat;
}

.iconSeccionActiva a{

   font-family:arial;
   font-size:15;
   text-decoration:none;
   color:#000000;
}

.iconSeccionInactiva{

   background:url('/art/images/bulletnormal.png') no-repeat;
}


.iconSeccionInactiva a{

   font-family:arial;
   font-size:15;
   text-decoration:none;
   color:#818181;
}

.iconSeccionOk{

   background:url('/art/images/bulletok.png') no-repeat;
}

.iconSeccionOk a{

   font-family:arial;
   font-size:15;
   text-decoration:none;
   color:#009933;
}

.instruccion{

   text-align:justify;
   margin-bottom:1.8vh;
   font-family:arial;
   font-size:1.6vh;
   color:var(--blueDarkest);
}

.instruccionCentral{

   color:var(--mainColor);
   font-size:3vh;
   text-align:left;
}

.introCell{

   color:var(--mainColor);
   font-family:calibri;
   font-size:1.8vh;
}

.lnkAdd{

   background-color:var(--mainBack);
   color:var(--iconYellow);
   font-family:calibri;
   font-size:3vh;
   font-weight:bold;
   text-decoration:none;
}

.lnkAsignaciones{

   float:left;
   font-size:3vh;
   height:4.5vh;
   left:0vh;
   position:relative;
   top:0vh;
   text-align:left;
   width:34vh;
}

.lnkAvances{

   float:left;
   font-size:3vh;
   height:4.5vh;
   left:0vh;
   position:relative;
   top:0vh;
   text-align:left;
   width:34vh;
}

.lnkBonos{

   float:left;
   font-size:5vh;
   left:0vh;
   position:relative;
   text-align:left;
   top:-3vh;
   width:30vh;
}

.lnkCV{

   float:left;
   position:relative;
   top:2.75vh;
   left:3.5vh;
}

.lnkDeber{

   background-color:var(--mainBack);
   color:var(--blueMedium);
   font-family:calibri;
   font-size:3vh;
   font-weight:bold;
   text-decoration:none;
}

.lnkDesarrollo{

   float:left;
   left:0vh;
   position:relative;
   top:0vh;
}

.lnkDesempeno{

   float:left;
   left:0vh;
   position:relative;
   top:0vh;
}

.lnkDump{

   color:var(--iconCut);
   font-size:2.1vh;
   text-decoration:none;
}

.lnkEstrategias{

   float:left;
   font-size:3vh;
   height:4.5vh;
   left:0vh;
   position:relative;
   top:0vh;
   text-align:left;
   width:34vh;
}

.lnkEvaluacion{

   float:left;
   left:0vh;
   position:relative;
   top:-1.5vh;
}

.lnkEvaluaciones{

   float:left;
   font-size:3vh;
   height:4.5vh;
   left:0vh;
   position:relative;
   top:0vh;
   text-align:left;
   width:34vh;
}

.lnkExterno{

   background: linear-gradient(to right, var(--mainColor) 0%, var(--blueMedium) 50%, var(--mainColor) 100%);
   border-radius:50%;
   display:table-cell;
   height:calc(var(--height100) * .13);
   width:calc(var(--height100) * .13);
}

.lnkExterno2{

   background: linear-gradient(to bottom, var(--grayColor) 0%, var(--mainBack) 100%);
   border-radius:50%;
   display:table-cell;
   height:calc(var(--height100) * .27);
   width:calc(var(--height100) * .27);
}

.lnkGrupo{

   float:right;
   position:relative;
   top:2.75vh;
   left:-3.5vh;
}

.lnkHome{

   float:right;
   position:relative;
   top:0;
   left:0;
}

.lnkHome a{

   text-decoration:none;
}

.lnkHome a div{

   font-size:3vh;
}

.lnkHome div{

   width:4vh;
   height:4vh;
}

.lnkIndicadores{

   float:left;
   font-size:3vh;
   height:4.5vh;
   left:0vh;
   position:relative;
   top:0vh;
   text-align:left;
   width:34vh;
}

.lnkInterno{

   background-color:var(--mainBack);
   border-radius:50%;
   height:calc(var(--height100) * .10);
   left:calc(var(--height100) * .015);
   padding-top:calc(var(--height100) * .018);
   position:absolute;
   top:calc(var(--height100) * .015);
   width:calc(var(--height100) * .10);
}

.lnkInterno2{

   background:linear-gradient(to top right, var(--iconOrange) 50%, var(--iconYellow) 100%);
   border-color:var(--mainBack);
   border-radius:50%;
   border-style:solid;
   border-width:calc(var(--height100) * .012);
   height:calc(var(--height100) * .23);
   left:calc(var(--height100) * .02);;
   padding-top:calc(var(--height100) * .018);
   position:absolute;
   top:calc(var(--height100) * .021);
   width:calc(var(--height100) * .23);
}

.lnkLearning{

   float:left;
   position:relative;
   top:9.5vh;
   left:4.5vh;
}

.lnkLearning div{

   width:11vh;
   height:11vh;
}

.lnkPersonal{

   float:right;
   left:calc(var(--width100) * -0.035);
   position:relative;
   top:0vh;
}

.lnkProfile{

   float:left;
   position:relative;
   top:0vh;
   left:0vh;
}

.lnkPuesto{

   float:left;
   left:3.5vh;
   position:relative;
   top:0vh;
}

.lnkReportes{

   float:left;
   font-size:3vh;
   height:4.5vh;
   left:0vh;
   position:relative;
   top:0vh;
   text-align:left;
   width:34vh;
}

.lnkRegresar{

   color:var(--iconOrange);
   font-family:calibri;
   font-size:2.5vh;
   font-weight:bold;
   text-decoration:none;
}

.lnkSalida{

   float:right;
   position:relative;
   top:0;
   left:0;
}

.lnkSalida a{

   font-family:calibri;
   font-size:3.2vh;
}

.lnkSalida a div{

   width:4vh;
   height:3vh;
}

.loginBox{

   background:linear-gradient(to bottom, var(--iconOrange) 0%, var(--iconYellow) 100%);
   border-radius:6%;
   floating:left;
   left:50%;
   position:relative;
   top:0%;
   width:50%;
}

.loginBox2{

   background:linear-gradient(to bottom, var(--blueDarkest) 0%, var(--blueLight) 100%);
   border-radius:15px;
}

.loginBoxLock{

   color:var(--mainBack);
   font-size:4vh;
   text-decoration:none;
}

.loginBoxLink{

   color:var(--mainBack);
   font-family:calibri;
   font-size:2vh;
   font-weight:normal;
}

.loginBox input{

   background-color:var(--mainBack);
   border:none;
   color:var(--mainColor);
   font-family:calibri;
   font-size:2.5vh;
   text-align:center;
   width:84%;
}

.loginBox2 input{

   background-color:var(--mainBack);
   border:none;
   color:var(--mainColor);
   font-family:calibri;
   font-size:2.5vh;
   text-align:center;
}

.loginBox td{

   color:var(--mainBack);
   font-family:calibri;
   font-size:2.5vh;
   font-weight:bold;
   text-align:center;
}

.loginBox2 td{

   color:var(--mainBack);
   font-family:calibri;
   font-size:2.5vh;
   font-weight:bold;
   text-align:center;
}

.lstIndicador{

   text-align:left;
   border-bottom-style:solid;
   border-bottom-width:0.2vh;
   border-bottom-color:var(--iconYellow);
   padding-bottom:1.2vh;
   font-size:2vh;
   width:84%;
}

.lstObjetivos{

   font-family:calibri;
   font-size:2.5vh;
   color:var(--mainColor);
}


.lstObjetivos a{

   color:var(--mainColor);
   border:none;
   text-decoration:none;
   font-size:2.5vh;
}

.lstShrink{

   padding-top:0.3vh;
   padding-bottom:0.3vh;
   padding-left:0.3vh;
   font-size:2.3vh;
   color:var(--mainColor);
   text-align:left;
}

.menuBox{

   background-color:#fefefe00;
   border-color:#e0e0e0;
   border-radius:calc(var(--height100) * 0.025);
   border-style:solid;
   border-width:1;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.45);
   height:calc(var(--height100) * 0.23);
   padding-left:calc(var(--height100) * 0.018);
   padding-top:calc(var(--height100) * 0.018);
   width:calc(var(--height100) * 0.23);
}

.menuBox div{

   background-color:#fdfdfd00;
   border-color:#e0e0e0;
   border-radius:calc(var(--height100) * 0.025);
   border-style:solid;
   border-width:2;
   height:calc(var(--height100) * 0.19);
   padding-top:calc(var(--height100) * 0.01);
   width:calc(var(--height100) * 0.19);
}

.menuBoxText{

   color:var(--iconYellow);
   display:block;
   font-family:calibri;
   font-size:calc(var(--height100) * 0.025);
   font-weight:bold;
}

.menuRoundText{

   color:var(--mainColor);
   font-family:calibri;
   font-size:1.5vh;
   font-weight:bold;
}

.menuBoxText2{

   color:#ffffff;
   display:block;
   font-family:calibri;
   font-size:calc(var(--height100) * 0.014);
   font-weight:bold;
}

.menuBoxText3{

   color:var(--blueDarkest);
   display:block;
   font-family:calibri;
   font-size:calc(var(--height100) * 0.024);
   font-weight:bold;
}

.menuBoxTextTop{

   color:var(--blueDarkest);
   display:block;
   font-family:calibri;
   font-size:calc(var(--height100) * 0.015);
   font-weight:bold;
}

.msgFamily{

   width:100%;
   height:100vh;
   height:100%;
   text-align:justify;
   display:none;
   vertical-align:center;
}

.nombrePila{

   color:var(--iconYellow);
   font-family:calibri;
   font-size:var(--fontSize);
   font-weight:bold;
   text-align:center;
}

.nombreResto{

   color:var(--mainBack);
   font-family:calibri;
   font-size:var(--fontSize);
   text-align:center;
}

.opcionMenu{

   background-color:#ffffff;
/*   border-color:#696969; */
/*   border-radius:50%; */
/*   border-style:solid; */
/*   border-width:6px; */
   height:87px;
   margin:auto;
   padding-top:24px;
   width:87px;
}

.opcionMenuTop{

   background-color:#ffffff;
   border-color:#696969;
   border-radius:50%;
   border-style:solid;
   border-width:3px;
   height:60px;
   margin:auto;
   padding-top:9px;
   width:60px;
}

.opcionRespuesta{

   font-family:arial narrow;
   font-size:2.5vh;
   text-align:left;
}

.opcionRespuesta a{

   text-decoration:none;
   color:var(--mainColor);
}

.pageFlag{

   color:var(--mainColor);
   font-size:3vh;
   text-align:left;
   vertical-align:middle;
}

.pageFlagText{

   border-bottom-color:var(--mainColor);
   border-bottom-style:solid;
   border-bottom-width:3;
   color:var(--iconYellow);
   display:inline;
   font-family:calibri;
   font-size:3vh;
   text-align:left;
   vertical-align:middle;
}

.pregunta{

   width:100%;
   overflow-y:auto;
   font-family:arial narrow;
   font-size:2.5vh;
   text-align:justify;
   font-weight:normal;
   vertical-align:bottom;
}

.puestoHead{

   background:linear-gradient(to right, var(--iconOrange) 50%, var(--iconYellow) 100%);
   color:var(--mainBack);
   float:left;
   font-family:calibri;
   font-size:3.9vh;
   font-weight:bold;
   height:12vh;
   left:4%;
   position:relative;
   text-align:center;
   top:0;
   width:93%;
}

.puestoName{

   background-color:var(--mainColor);
   color:var(--mainBack);
   float:left;
   font-family:calibri;
   font-size:1.8vh;
   font-weight:bold;
   height:4vh;
   left:8%;
   padding-top:0.5vh;
   position:relative;
   text-align:center;
   top:-6vh;
   width:93%;
}

.radioStyle{ 

   position:absolute;
   opacity:0;
   width:4vh;
   height:4vh;
   cursor:pointer;
}

.radioStyle + span{

   padding:0.4vh;
}

.radioStyle:checked + span{ 

   border-style:solid;
   border-width:2px;
   border-color:#336699;
   background-color:#E0E0E0;
}

.recoverBox{

   background:linear-gradient(to bottom, var(--iconOrange) 0%, var(--iconYellow) 100%);
}

.ribbon{
   height:100%;
   position:relative;
}

.ribbonCase{

   overflow-x:hidden;
   height:100%;
}

.spacerRow{

   padding-top:1.5vh;
   padding-bottom:0.24vh;
}

.tabInterno{

   font-family:arial;
   font-size:14;
   color:#336699;
   text-align:justify;
}

.tableCHead{

   background-color:var(--mainColor);
   border-color:var(--backColor);
   border-style:solid;
   border-width:1;
   color:var(--mainBack);
   font-size:1.5vh;
   font-weight:bold;
   padding-bottom:0.5vh;
   padding-top:0.5vh;
}

.tableRHead{

   background-color:var(--iconYellow);
   border-color:var(--mainBack);
   border-style:solid;
   border-width:1;
   color:var(--mainBack);
   font-size:1.5vh;
   font-weight:bold;
}

.tdMenu{

   background-color:#ffffff;
   border-color:#0033cc;
   border-style:solid;
   border-width:2;
   color:#333399;
   font-family:arial;
   font-size:2.2vh;
   font-weight:bold;
   text-align:center;
}

.tdMenu a{

   text-decoration:none;
}

.testTool{

   background-color:var(--mainBack);
   border-color:var(--iconYellow);
   border-style:solid;
   border-width:1;
   color:var(--mainColor);
   font-family:calibri;
   font-size:1.5vh;
   outline:none;
   text-align:left;
   width:100%;
}

.titleBig{

   color:var(--iconYellow);
   font-family:calibri;
   font-size:2.1vh;
   font-weight:bold;
}

.titleBigA{

   color:var(--iconYellow);
   text-decoration:none;
}

.titleBigFrame{

   background-color:#ffffff;
   border-color:var(--iconYellow);
   border-style:solid;
   border-width:2;
   padding:0.1vh;
}

.toolBarNeg{

   background-color:var(--mainBack);
   color:var(--mainColor);
   height:6%;
   font-size:2.1vh;
   font-weight:bold;
   opacity:1;
   vertical-align:middle;
}

.values{

   color:var(--lightYellow);
   font-family:calibri;
   font-size:1.3vh;
   font-weight:bold;
}

.valuesBack{

   height:5%;
   background:linear-gradient(to bottom, var(--iconOrange) 10%,var(--iconYellow) 100%);
}

.valuesBullet{

   color:var(--mainColor);
   font-size:0.5vh;
   vertical-align:middle;
}