﻿/*Variables*/
:root {
    --info100-blue: #0d55a2;
    --dark-blue: #0c7fb0;
    --primary-blue: #007bff;
    --ligth-black: #4f5156;
    --ligth-gray: rgb(200,201,202);
    --ligthing-gray: rgb(242,242,242);

    --main-color: var(--ligth-black);
    --header-height: 4.2em;
}


/*Loading*/
#movingBallG{position:relative;width:256px;height:20px;margin: 0 auto;}
.movingBallLineG{position:absolute;left:0px;top:8px;height:4px;width:256px;background-color:#000000;}
.movingBallG{background-color:#00AEFF;position:absolute;top:0;left:0;width:20px;height:20px;-moz-border-radius:10px;-moz-animation-name:bounce_movingBallG;-moz-animation-duration:1.5s;-moz-animation-iteration-count:infinite;-moz-animation-direction:linear;-webkit-border-radius:10px;-webkit-animation-name:bounce_movingBallG;-webkit-animation-duration:1.5s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:linear;-ms-border-radius:10px;-ms-animation-name:bounce_movingBallG;-ms-animation-duration:1.5s;-ms-animation-iteration-count:infinite;-ms-animation-direction:linear;-o-border-radius:10px;-o-animation-name:bounce_movingBallG;-o-animation-duration:1.5s;-o-animation-iteration-count:infinite;-o-animation-direction:linear;border-radius:10px;animation-name:bounce_movingBallG;animation-duration:1.5s;animation-iteration-count:infinite;animation-direction:linear;}
@-moz-keyframes bounce_movingBallG{0%{left:0px;}50%{left:236px;}100%{left:0px;}}
@-webkit-keyframes bounce_movingBallG{0%{left:0px;}50%{left:236px;}100%{left:0px;}}
@-ms-keyframes bounce_movingBallG{0%{left:0px;}50%{left:236px;}100%{left:0px;}}
@-o-keyframes bounce_movingBallG{0%{left:0px;}50%{left:236px;}100%{left:0px;}}
@keyframes bounce_movingBallG{0%{left:0px;}50%{left:236px;}100%{left:0px;}}
/*Fin de Loading*/

.archivos img {
width: 60px;
float: left;
left: 15px !important;
}
.eventdownload a {

padding: 60px;

}

.morph 
{
    opacity:.7;
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
          background:white;
          box-shadow:0px 0px 5px gray inset;
          border:2px solid white;
}

.morph:hover   
{
    opacity:1;
  
          background:rgb(199, 241, 255);
          box-shadow:1px 1px 3px gray inset;
          border:2px solid black;
}
.archivos {
padding: 10px;

height: 60px;
}
.folderinfo {
padding: 10px;
}
.fileinfo {
height: 0px;
margin-left: 29px;
}
.folder {
float: left;
margin: 43px;
width: 150px;
}
.archivos img {
width: 60px;
float: left;
margin: -20px;
}
.fileinfo span[class=name]
{
    display:none;
    }

#PDF,#facturasXML,#excel
{
    float: left;
padding: 5px;
background-color: white;
color: rgb(0, 0, 0);
margin: 1px;

width: 80px;
    }
#dataXML
{
    border-top: var(--info100-blue) 6px solid;
    margin: 0 auto 0 auto;
    text-align: center;
    padding: 5px;
    right: 0;
    /*box-shadow: 0px 2px 3px inset;*/
}
        .datosm > img
        {
            width: 85px;
            }
        .cargaerror {
position: absolute;
top: 90px;
font-size: 68pt;
color: red;
margin-left: -25px;
}
        .datosc >img {
width: 87px;
}
#dataXML p
{
    z-index: 50!important;
    margin-top: -22px;
    font-size: 10pt;
    padding-left: 12px;
    text-shadow: 1px 1px 3px rgb(4, 83, 136);
    color: white;
}
   
/*TOUR*/
.explain {background: white;
padding: 9px;
color: black;
font-size: 11pt;}
.datos {
padding-left: 80px;
}
.explainconteiner{position: absolute;
height: auto;
z-index: 100000000000;
padding: 10px;
width: 200px;
display: none;
}
.buton
{
    position: absolute!important;
right: 5%;
top: 25%;
background: #0FA1E0;
padding: 10px;
color: white;
border-radius: 2px;
box-shadow: 1px 1px 3px black;
cursor: pointer;
z-index: 10000000000;
}
.explainconteiner font{display:none;}
.next{background: #0fa1e0;
padding: 5px;
color: white;
border-radius: 3px;
float: right;
cursor: pointer;
}

.evento{background:rgb(15,161,224)!important;background:-moz-linear-gradient(top, rgb(15,161,224) 1%, rgb(0,60,145) 100%)!important;background:-webkit-gradient(linear, left top, left bottom, color-stop(1%,rgb(15,161,224)), color-stop(100%,rgb(0,60,145)))!important;background:-webkit-linear-gradient(top, rgb(15,161,224) 1%,rgb(0,60,145) 100%)!important;background:-o-linear-gradient(top, rgb(15,161,224) 1%,rgb(0,60,145) 100%)!important;background:-ms-linear-gradient(top, rgb(15,161,224) 1%,rgb(0,60,145) 100%)!important;background:linear-gradient(to bottom, rgb(15,161,224) 1%,rgb(0,60,145) 100%)!important;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0fa1e0', endColorstr='#003c91',GradientType=0);border-bottom:2px solid black!important;border-left:none!important;border-right:none!important;border-top:none!important;box-shadow:0px 0px 5px white!important;-webkit-transition:all .2s ease-in-out!important;height:150px!important;color:White!important;cursor:pointer!important;}
/*FIN TOUR*/



#imagenfotter {position: absolute;bottom: 0;}
#imagenfotter img {opacity: .75;}

.leyendacenter{position: relative;bottom: 0;}

.centropublica{position: absolute;top: 50%;margin-left: 0 !important;margin-right: 0 !important;left: 0;right: 0;}
@media screen{* html{overflow-y:hidden;}

.tabs{font-size: 12pt;padding-left: 25px;text-shadow: 1px 1px 1px blanchedalmond;border-top-right-radius: 10;padding-right: 25px;margin-right: 10px;cursor: pointer;font-variant: small-caps;box-shadow: 0px -1px 2px gray;}
.active2{background: 00ABEF;font-size: 12pt;padding-left: 25px;text-shadow: 1px 1px 1px blanchedalmond;border-top-right-radius: 10;padding-right: 25px;margin-right: 10px;cursor: pointer;font-variant: small-caps;box-shadow: 0px -1px 2px gray;}
.hidenpanel1{display:block;}
              
* html body{height:100%;overflow:auto;}
}
#comentario{margin: 5px auto 0 auto !important;width: 54%;box-shadow: 0px 0px 2px #0FA1E0;border: 1px dashed;padding: 20px;border-radius: 8px;}
#sobre {
    background: rgb(242,242,242);
    margin: 4%; /*box-shadow: 0px 0px 3px gray inset;*/
    padding: 4%; /*border-bottom: 2px solid #00BBFF;*/
    border-radius: 0.25rem;
    border: 1px solid var(--ligth-gray);
    height: 18rem;
}
.des {font-size: 12pt;}
table{font-size:11pt;}
#comentario textarea {width: 95%;height: 70px;margin: 20px;}
.treversa{margin-top: 0px !important;}
#vertablas{position:absolute;top:40%;left:10;right:10;}

.contenttabs{box-shadow: 1px 1px 5px black;margin-top: -14px;padding: 15px;position:absolute;left:0;right:0;height: 60%;overflow: overlay;}

.lbresultado{position:absolute;top:-5;width:60%;right:-102;text-align:justify;z-index:5000;}
#ui-datepicker-div{background:black !important;color:white !important;padding:0 !important;width:175px;z-index:25 !important;}
.ui-state-default, .ui-widget-content .ui-state-default{background:black !important;font-weight:bold !important;box-shadow:0 0 5px white !important;color:white !important;}
.ui-state-hover, .ui-widget-content .ui-state-hover{color:White !important;border:1px solid red !important;}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{border:1px dashed white !important;background:#00BBFF !important;color:black !important;}
.ui-datepicker td{border:0 !important;padding:1px !important;}
.none{float:none !important;}
.contenidocalendar,.contenidocalendar2{margin: 0 auto 0 auto;left: 0;right: 0;border-radius: 6px;width: 75%;padding: 12px;box-shadow: 0px 0px 3px gray inset;overflow: overlay;}
.ui-datepicker-calendar{color:#00bbff !important;font-size:8pt !important;text-shadow:0px 0px 1px #051F3A;}
.ui-datepicker table{width:100%;border-collapse:collapse;margin:0 0 .4em;}
.ui-datepicker-prev.ui-corner-all{width:16px !important;padding:0 !important;height:20px !important;}
.ui-datepicker-next.ui-corner-all{width:16px !important;padding:0 !important;height:20px !important;}
.ui-datepicker-next.ui-corner-all.ui-state-hover.ui-datepicker-next-hover{background:black !important;border:1px solid white !important;}
.ui-datepicker-prev.ui-corner-all.ui-state-hover.ui-datepicker-prev-hover{background:black !important;border:1px solid white !important;}
.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all{background:#0FA1E0 !important;border:none !important;border-radius:0 !important;font-size:9pt !important;}
.contenidocalendar{margin:0 auto 0 auto;left:0;right:0;}
.tdderecha {text-align: right !important;}
.alerta1{background: red;padding: 3px;color: black;border-radius: 6px;opacity: .9;font-size: 8pt;text-align: left;float: right;margin-left: -64px;margin-top: -12;}
.tdizquierda{text-align: left !important;}
.justify{text-align:justify;margin-right: 1%;}
#quienes {width: 500px;position: absolute;background: white;right: 0;bottom: 20px;box-shadow: 0px 0px 8px black;padding: 10px;display:none;}
.contenidocalendar2{overflow: overlay;margin: 30px auto 0 auto;left: 0;right: 0;max-height: 234px;width: 75%;}
.calendario{margin:0 auto 0 auto;text-align:center;padding:1px;background:rgb(0,183,234);background:-moz-linear-gradient(top, rgb(0,183,234) 0%, rgb(0,158,195) 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(0,183,234)), color-stop(100%,rgb(0,158,195)));background:-webkit-linear-gradient(top, rgb(0,183,234) 0%,rgb(0,158,195) 100%);background:-o-linear-gradient(top, rgb(0,183,234) 0%,rgb(0,158,195) 100%);background:-ms-linear-gradient(top, rgb(0,183,234) 0%,rgb(0,158,195) 100%);background:linear-gradient(to bottom, rgb(0,183,234) 0%,rgb(0,158,195) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0);}
.encabezado{background:rgb(37,141,200) !important;background:-moz-linear-gradient(top, rgb(37,141,200) 0%, rgb(25,138,198) 100%) !important;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(37,141,200)), color-stop(100%,rgb(25,138,198))) !important;background:-webkit-linear-gradient(top, rgb(37,141,200) 0%,rgb(25,138,198) 100%) !important;background:-o-linear-gradient(top, rgb(37,141,200) 0%,rgb(25,138,198) 100%) !important;background:-ms-linear-gradient(top, rgb(37,141,200) 0%,rgb(25,138,198) 100%) !important;background:linear-gradient(to bottom, rgb(37,141,200) 0%,rgb(25,138,198) 100%) !important;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#258dc8', endColorstr='#198ac6',GradientType=0) !important;color:white;}
.calendario td{padding:5px;border:none;}
.msgvalido{position:absolute;background:transparent;padding:5px;border-radius:7px;color:black;border:2px dashed red;margin-right:-180px;right:0;top:0;margin-top:40px;}
.sucess{color:black;text-shadow:1px 1px 3px greenyellow;filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=greenyellow);font-weight:bold;font-size:15pt;}
.alerta{color:black;text-shadow:1px 1px 3px red;filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=red);font-weight:bold;font-size:15pt;}
.example{width:60%;margin:0 auto;text-align:center;}
.bienvenu{text-align:center;font-size:23pt;}
/*.alert{color: red;}*/
#facturas td {
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem; /*border-left:1px solid black;border-right:1px solid black;border-bottom:1px dashed black;*/
    padding: 3px;
    text-align: center;
}
#selectedall{transform: translate(18rem,-2rem);width: 105px;text-align: center;font-size: 10pt;right: 24px;display: none;}
#facturas, .vista {
    /*border: 1px solid rgba(0,0,0,.125);*/
    border-radius: 0.25rem;
    position: absolute;
    min-height: 20%;
    max-height: 80%;
    padding: 7px;
    background: white;
    margin: 10px; /*border: 2px dashed black;*/
    top: 2%;
    left: 1%;
    right: 1%;
    display: none;
    z-index: 800 !important;
    margin-left: auto;
    margin-right: auto;
    font-size: 10pt;
    text-align: center;
    overflow: overlay;
}
.leyendaalert{font-style:italic;width:75%;text-align:justify;margin-top:10%;margin-left:10%;margin-right:10%;/*border:2px dashed red;*/padding:17px;font-size:13pt;}
.info100{font-size:25pt;text-align:center;font-family:Consolas;color:#00217c;}
#screen,#screenpop,#screen2{position:fixed;_position:absolute;background:black;opacity:.5;filter:alpha(opacity = 50);width:100%;height:100%;z-index:600;top:0;_top:expression(eval(document.body.scrollTop));left:0;_left:expression(this.offsetParent.scrollTop+'px');right:0;_right:expression(this.offsetParent.scrollTop+'px');bottom:0;display:none;}
#screen4{position:fixed;_position:absolute;background:transparent;opacity:.5;filter:alpha(opacity = 50);width:100%;height:100%;z-index:601;top:0;_top:expression(eval(document.body.scrollTop));left:0;_left:expression(this.offsetParent.scrollTop+'px');right:0;_right:expression(this.offsetParent.scrollTop+'px');bottom:0;display:none;}
#screen3{position: fixed;_position: absolute;width: 100%;height: 100%;z-index: 600;top: 0;_top: expression(eval(document.body.scrollTop));left: 0;_left: expression(this.offsetParent.scrollTop+'px');right: 0;_right: expression(this.offsetParent.scrollTop+'px');bottom: 0;display: none;background: rgba(255,255,255,0.85);}
p{filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=black);font-size:11pt;}
#framecontent{position:absolute;top:70px;left:200px;padding:10px;z-index:5;}
.welcome {
    width: 80%;
    color: #0fa1e0;
    margin: 0;

    padding: 0.6rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    float: left;
}
#header {
    width: 100%;
    height: var(--header-height);
    background: #f7f7f9;
    padding: 0.6rem 2rem;
    overflow: hidden;
    /*background: -moz-linear-gradient(top, #26262c 0%, #f8f9fa 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #f8f9fa));
    background: -webkit-linear-gradient(top, #26262c 0%, #f8f9fa 100%);
    background: -o-linear-gradient(top, #26262c 0%, #f8f9fa 100%);
    background: -ms-linear-gradient(top, #26262c 0%, #f8f9fa 100%);
    background: linear-gradient(to bottom, #26262c 0%, #f8f9fa 100%);*/
    /*    border: 1px solid black;*/
    position: fixed;
    _position: absolute;
    left: 0;
    _left: expression(this.offsetParent.scrollTop+'px');
    top: 0;
    _top: expression(eval(document.body.scrollTop));
    right: 0;
    _right: expression(this.offsetParent.scrollTop+'px');
    z-index: 20;
}
.user{color:#0fa1e0;}
.titles {
    color: var(--info100-blue);
    font-size: 2.5em;
    font-weight: 600;
    /*text-shadow: -1px -1px 1px black; filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=black)*/;
    margin: auto;
}
.empresa{color:#0fa1e0;}

#umenu{position:fixed;_position:absolute;top:50px;left:0;_left:expression(this.offsetParent.scrollTop+'px');height:100%;background:#314874;width:170px;z-index:19;}
#umenu ul{z-index:50;background:transparent;position:absolute;width:170px;left:0;_left:expression(this.offsetParent.scrollTop+'px');margin-left:-40px;list-style:none;}
#loading {z-index: 601;display: none;position: absolute;left: 0;right: 0;margin: 0 auto 0 auto;width: 31%;text-align: center;border-radius: 2;top: 20%;box-shadow: 0px 0px 5px gray;background: white;padding: 20px;}
#umenu ul li{font-size:12pt;color:black;padding:5px;box-shadow:0 0 8px black inset;text-shadow:1px 1px 2px black;filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=black);background:Orange;}
a{color:black;text-decoration:none;padding:5px;}
.error{background:#ff9393;border:1px solid gray;}
.normal{background:none;border:1px solid gray;}
#control:hover {
    background: var(--main-color);
    /*background: -moz-linear-gradient(top, rgb(15,161,224) 1%, rgb(0,60,145) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgb(15,161,224)), color-stop(100%,rgb(0,60,145)));
    background: -webkit-linear-gradient(top, rgb(15,161,224) 1%,rgb(0,60,145) 100%);
    background: -o-linear-gradient(top, rgb(15,161,224) 1%,rgb(0,60,145) 100%);
    background: -ms-linear-gradient(top, rgb(15,161,224) 1%,rgb(0,60,145) 100%);
    background: linear-gradient(to bottom, rgb(15,161,224) 1%,rgb(0,60,145) 100%);*/
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0fa1e0', endColorstr='#003c91',GradientType=0);
    border-bottom: 2px solid black;
    border-left: none;
    border-right: none;
    border-top: none;
    box-shadow: 0px 0px 5px white;
    -webkit-transition: all .2s ease-in-out;
    height: 150px;
    color: White;
    cursor: pointer;
}
#control {
    cursor: pointer;
    position: absolute;
    top: 1%;
    width: 10%;
    color: #fff;
    font-size: 1rem;
    background-color: var(--main-color);
    border-color: var(--main-color);
    height: auto;
    right: 1%;
    transform: translateY(0.5rem);
    margin-right: 0.5rem;
    text-align: center;
    z-index: 20;
    padding: 5px;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    /*box-shadow: 0px 0px 5px black inset;*/
    -webkit-transition: all .2s ease-in-out;
}
.hide{display:none;margin-top:0px;padding:0px;}
.hide-a-container {
    /*background: var(--main-color);
    color: #fff;*/
    margin-bottom: 9px;
}
/*.hide-a-container:hover{
    background: #fff;
    color: var(--main-color);
}*/
#control .click {
    cursor: pointer;
}
#control .hide{
    padding: 0px 5px;
    vertical-align:baseline;
}
#control:hover .hide{cursor:pointer;display:block;}
#control .hide a{width: 100%;padding: 5px;z-index:21 !important;color:White;background:var(--main-color);/*border:solid 1px white;*/margin-bottom:15px;}
#control .hide a:hover{-webkit-transition:all .2s ease-in-out;z-index:21;margin-top:20px;color:var(--main-color);
                       background:#fff;/*border:solid 1px #0fa1e0;*/}
.title{font-size:20pt;color:orange;text-shadow:2px 2px 3px black;filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=black);}
.parrafo{text-align:justify;font-size:12pt;color:white;text-shadow:0 0 2px gray;filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=gray);}
.gtable{position:absolute;top:40px;right:11px;background:#013E7D;color:White;}

.titulo{font-size:15pt;font-family:Arial;font-weight:bold;text-shadow:1px 1px 1px gray;filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=gray);}
.titlemsg{text-align:center;font-size:15pt;}
.404{background:#f4e289;}
.question{font-size:14pt;}
.denegado{background:#f78a8a;}
#operadas,#cedidas{display:none;text-align:center;}
.dato{font-size:20pt;text-shadow:2px 2px 3px chartreuse;filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=chartreuse);}
.visual {
    right: 40px;
    font-size: 4rem;
    color: var(--main-color); /*text-shadow:1px 1px 1px black;filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=black);*/
    cursor: default;
    text-align: center;
}
.tablefacturas,.table{text-align: center;padding-bottom: 20px;font-size: 9pt;margin: 0 auto;width: 100%;overflow: auto;}
.tablefacturas td,.table td{border:1px solid var(--ligthing-gray);}
.tablefacturas1,.table{text-align: center;padding-bottom: 20px;font-size: 9pt;margin: 0 auto;width: 120%; overflow-x: scroll;overflow-y: scroll;padding-bottom: 0px; margin-bottom: 13px;}
    .tablefacturas1 td, .table td {
        border: 1px var(--ligthing-gray);
    }
.tablefacturas2,.table{text-align: center;padding-bottom: 20px;font-size: 9pt;margin: 0 auto;width: 100%; overflow-x: scroll;overflow-y: scroll;padding-bottom: 0px; margin-bottom: 13px;}
    .tablefacturas2 td, .table td {
        border: 1px solid var(--ligth-gray);
    }
.max{position:absolute;top:-26px;padding:5px;left:0;background:#0075a8;width:39px;font-size:9pt;color:white;position:absolute;}
.izquierda{float:left;padding:10px;}
.min{position:absolute;top:-26px;padding:5px;width:39px;background:#0075a8;right:0;color:white;font-size:9pt;}
.derecha{float:right;padding:10px;}
.maximominimo{background:#c4c4c4;right:38px;margin:auto auto auto auto;position:fixed;top:309px;width:97px;font-size:9pt;display:none;border:1px solid black;}
.grid,.grid2{display:none;}
.header td{background-color: transparent;/*border-bottom: 1px dashed black;*/color: black;border: 1px solid var(--ligthing-gray)}
.theados{background: #0094d3;color: #FFFFFF;rules="all"; border: 1px solid #75AC00;}
.tablefacturas .header td ,.table .theader{color: white;background: var(--info100-blue);/*border-bottom:1px dashed black;*/padding:5px;cursor:default;}
#pop{position: fixed;margin-top: auto;margin-bottom: auto;z-index: 10000000;margin-left: auto;margin-right: auto;left: 0;right: 0;color: white;width: 28%;text-align: center;padding: 20px;display: none;background: black;border: 1px dashed beige;}
.ok{background:#d1fcdc;border:1px solid gray;}
.ttotales td {background: black;}
.tablefacturas .ok td{background:#d1fcdc;padding:3px;cursor:default;}
.tablefacturas .ok td:hover{background:#d1fcdc;padding:3px;cursor:default;}
.tablefacturas .wrong td{background:#ffcece;padding:3px;cursor:default;}
.tablefacturas .wrong td:hover{background:#ffcece;padding:3px;cursor:default;}
.contenido{display:block;}
.contenido input[type=text]{}
.fondo1{}
.check{color:Orange;font-weight:bold;text-shadow:1px 1px 2px black;filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=black);}
.infosubtitles{font-size:14pt;}
.subtitles{color:Black;}
body{font-size:12pt;font-family:Arial;background:white;height:100%;}
.bottom{position:absolute;width:140px;right:0;bottom:0;}
#principal img{width:150px;position:absolute;left:1000px;}
#principal{padding:10px;position:fixed;_position:absolute;width:100%;left:0;_left:expression(this.offsetParent.scrollTop+'px');right:0;_right:expression(this.offsetParent.scrollTop+'px');top:0;_top:expression(eval(document.body.scrollTop));z-index:1000;}
.derechai{float:right;}
.izquierdai{float:left;padding-top:7px;}
.centroi{float:center;}
.eFactor{color:black;font-size: 21pt;text-shadow: 1px 1px 1px gray;}
.desingby{color:black;font-size:10pt;text-shadow:none;}
#login{position: absolute;right: 0;left: 0;width: 250px;border-bottom: 2px solid #0FA1E0;padding: 30px;color: black;background: white;margin: 50px auto 0 auto;top: 0;text-align: center;box-shadow: 0px 0px 5px black;}
#formulario{position:absolute;right:0;left:0;width:600px;border-top:2px dashed black;border-bottom:2px dashed black;border-left:2px dashed #0FA1E0;border-right:2px dashed #0FA1E0;padding:30px;color:black;background:white;margin:50px auto 0 auto;top:0;text-align:center;}
#login img{width:200px;}
#fotter p{text-align:right;margin:2px;}
#fotter img{width:200px;}



.relaciones {
position: absolute !important;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto 0 auto;
text-align: center;
padding: 9px;
}


.agua{font-size: 12pt;color: gray;font-variant: small-caps;bottom: -8px;}
.sinfondo{background:transparent;width:95%;}
.marcas{}
/*input[type="submit"]:hover,input[type="button"]:hover{margin: 2px;padding:5px;background:black;color:White;border:1px solid black;-webkit-transition:all .2s ease-in-out;z-index:20;cursor:pointer;box-shadow: 0px 0px 3px black;}
input[type="submit"],input[type="button"]{margin: 2px;padding:5px;background:black;color:White;border:1px solid black;-webkit-transition:all .2s ease-in-out;z-index:20;cursor:pointer;}
*/
.contactanos input[type="text"],.contactanos input[type="password"]{background:#141414;background:white;border:1px solid gray;}
#fotter{color:black;font-size:9pt;z-index: 10;text-align:center;position:fixed;bottom:0;height:20px;left:0;right:0;}
#contentGuia{width:90% !important;margin:0 auto;}
#contenidoprincipal{
    background: transparent;position: fixed;font-size: 10pt;overflow: auto;top: var(--header-height);bottom: 0;right: 0;left: 17%;padding: 2em 3em;display: none; z-index: 0;text-align: justify;}
.contenttabs::-webkit-scrollbar,#facturas::-webkit-scrollbar,.contenidocalendar::-webkit-scrollbar,.contenidocalendar2::-webkit-scrollbar,.overflow::-webkit-scrollbar,#tablas::-webkit-scrollbar,#contenidoprincipal::-webkit-scrollbar{width:9px!important;height:16px!important;}
.contenttabs::-webkit-scrollbar-thumb,#facturas::-webkit-scrollbar-thumb,.contenidocalendar::-webkit-scrollbar-thumb,.contenidocalendar2::-webkit-scrollbar-thumb,.overflow::-webkit-scrollbar-thumb,#tablas::-webkit-scrollbar-thumb ,#contenidoprincipal::-webkit-scrollbar-thumb{background-color: rgba(0, 174, 255, 0.4);-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),inset 0 -1px 0 rgba(0, 184, 255, 0.56);}
.contenttabs::-webkit-scrollbar-button,#facturas::-webkit-scrollbar-button,.contenidocalendar::-webkit-scrollbar-button,.contenidocalendar2::-webkit-scrollbar-button,.overflow::-webkit-scrollbar-button,#tablas::-webkit-scrollbar-button ,#contenidoprincipal::-webkit-scrollbar-button{width:0;height:0;display:none;}
.contenttabs::-webkit-scrollbar-corner,#facturas::-webkit-scrollbar-corner,.contenidocalendar::-webkit-scrollbar-corner,.contenidocalendar2::-webkit-scrollbar-corner,.overflow::-webkit-scrollbar-corner,#tablas::-webkit-scrollbar-corner,#contenidoprincipal::-webkit-scrollbar-corner{background-color:transparent;}
.contenidosecundario {
    padding: 2.6em 6em;
    width: auto;
}
.leyenda {font-size: 8pt;position: relative;text-align: justify;margin-right: 3%;bottom: 0;}
.leyenda1 {font-size: 9pt;position: absolute;text-align: center;margin-right: 3%;bottom: 0;}
#ContentPlaceHolder1_FileUpload1{color:Gray;}
.fechas {border-bottom: 1px dashed black;}
#tablas{width: 100%;overflow: overlay;margin-bottom: 0%;min-height: 51%;max-height: 61%;margin-top: 1%;}
#mensaje{position: fixed;font-size:11pt;bottom: 0;left: 1%;margin-bottom: 1%;z-index: 13;padding: 5px;/*background: var(--info100-blue);*//*border-left: 3px solid #0fa1e0;*/color: var(--info100-blue);display: none;}
#imgmessagefact{cursor: pointer;width: 25px;position: fixed !important;right: 5px;top: 10px;z-index: 500;}
#imgmessage,#imgmessagesistema,#pop img{cursor:pointer;width:25px;height:25px;position:absolute;right:-11px;top:-15px;}
.pointer{cursor:pointer;}
#mensajesistema{left: 1%;position: absolute;bottom: 0;margin-bottom: 4%;z-index: 120;padding: 5px;font-size: 11pt;background: var(--info100-blue);border-left: 4px solid red;color: white;display: none;margin-right: 15px;}
#cssmenu ul,#cssmenu li,#cssmenu span,#cssmenu p{margin:0;padding:0;position:relative;cursor:pointer;}
#cssmenu{display:none;height:49px;background:#4f5156;/*border-bottom:2px solid #0fa1e0;*/left:0;right:0;position:absolute;top:0;}
#cssmenu:after,
#cssmenu ul:after{content:'';display:block;display:inline;clear:both;}
#cssmenu p{background:#141414;color:#ffffff;display:inline-block;font-family:Helvetica, Arial, Verdana, sans-serif;font-size:12px;line-height:49px;padding:0 20px;text-decoration:none;}
#cssmenu ul{list-style:none;}
#cssmenu > ul{float:left;}
#cssmenu > ul > li{float:left;}
#cssmenu > ul > li:hover:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;/*border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #0fa1e0;*/margin-left:-10px;}
#cssmenu > ul > li:first-child > p{}
#cssmenu > ul > li:last-child > p{}
#cssmenu > ul > li.active p{box-shadow:inset 0 0 3px #000000;-moz-box-shadow:inset 0 0 3px #000000;-webkit-box-shadow:inset 0 0 3px #000000;background:#070707;}
#cssmenu > ul > li:hover > p{background:#070707;box-shadow:inset 0 0 3px #000000;-moz-box-shadow:inset 0 0 3px #000000;-webkit-box-shadow:inset 0 0 3px #000000;}
#cssmenu .has-sub{z-index:1;}
#cssmenu .has-sub:hover > ul{display:block;}
#cssmenu .has-sub ul{display:none;position:absolute;width:200px;top:100%;left:0;}
#cssmenu .has-sub ul li{*margin-bottom:-1px;}
#cssmenu .has-sub ul li p{background:#0fa1e0;border-bottom:1px dotted #6fc7ec;filter:none;font-size:11px;display:block;line-height:120%;padding:10px;}
#cssmenu .has-sub ul li:hover p{background:#0c7fb0;-webkit-transition:all .2s ease-in-out;}
#cssmenu .has-sub .has-sub:hover > ul{display:block;-webkit-transition:all .2s ease-in-out;}
#cssmenu .has-sub .has-sub ul{display:none;position:absolute;left:100%;top:0;}
#cssmenu .has-sub .has-sub ul li p{background:#0c7fb0;border-bottom:1px dotted #6db2d0;}
#cssmenu .has-sub .has-sub ul li p:hover{background:#095c80;-webkit-transition:all .2s ease-in-out;}
#cssmenu1 ul,
#cssmenu1 ul li,
#cssmenu1 ul ul{list-style:none;margin:0;padding:0;}
#cssmenu1 ul{position:relative;z-index:1;float:left;}
#cssmenu1 ul li{float:left;min-height:1px;line-height:1em;vertical-align:middle;}
#cssmenu1 ul li.hover,
#cssmenu1 ul li:hover{background-color:red;position:relative;z-index:50;cursor:default;-webkit-transition:all .2s ease-in-out;}
#cssmenu1 ul ul{visibility:hidden;position:absolute;top:100%;left:0;z-index:50;width:100%;}
#cssmenu1 ul ul li{float:none;}
#cssmenu1 ul ul ul{top:1px;left:99%;}
#cssmenu1 ul li:hover > ul{visibility:visible;-webkit-transition:all .2s ease-in-out;}
#cssmenu1 ul ul{top:1px;left:99%;}
#cssmenu1 ul li{float:none;}
#cssmenu1 ul{font-weight:bold;}
#cssmenu1 ul ul{margin-top:1px;}
#cssmenu1 ul ul li{font-weight:normal;}
#cssmenu1 {
    background: #0d1528;
    /*transform: translate(0rem,1rem);*/
    /*    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
    background-repeat: repeat-x;*/
    width: 100%;
}
#cssmenu1:after{content:'';display:block;clear:both;-webkit-transition:all .2s ease-in-out;}
/*#cssmenu1 a {
    background-color: #4f5156;
    color: white;
    display: block;
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size: 0.9em;
    font-weight: normal;
    line-height: 180%;
    padding: 5px 9px;
    text-decoration: none;*/
    /*border-bottom: 1px solid white;*/
/*}*/
#cssmenu1 ul{list-style:none;width:100%;}
#cssmenu1 ul:hover {
    /*background: #e2e6ea;*/
}
#cssmenu1 > ul{float:left;}
#cssmenu1
#cssmenu1 > ul > li:hover:after{content:'';display:block;width:0;height:0;position:absolute;right:0;top:50%;/*border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid #0fa1e0;*/margin-top:-10px;-webkit-transition:all .2s ease-in-out;}
.pop{position:absolute;background:red;display:none;padding:15px;left:0;right:0;top:30%;margin-left:auto;margin-right:auto;text-align:center;z-index:1000000;width:250px;}
Matched CSS Rules
#cssmenu1 > ul > li:first-child >a{}
#cssmenu1 > ul > li:last-child > a{}
#cssmenu1 > ul > li.active a{background-color: var(--info100-blue);color: #fff;border-radius: 0;}
#cssmenu1 > ul > li:hover > a {
    background-color: var(--info100-blue);
    color: #fff;
    /*border-bottom: 1px solid #6db2d0;*/
    /*box-shadow: inset 0 0 10px black;
    -moz-box-shadow: inset 0 0 3px black;
    -webkit-box-shadow: inset 0 0 10px black;
    -webkit-transition: all .2s ease-in-out;*/
}
#cssmenu1 .has-sub{z-index:10;}
#cssmenu1 .has-sub:hover > ul{display:block;-webkit-transition:all .2s ease-in-out;}
    #cssmenu1 .has-sub ul {
        display: none;
        position: absolute;
        width: 150px;
        top: 5px;
        left: 100%;
        z-index: 10;
    }
    #cssmenu1 .has-sub ul li {
        
        z-index: 1000;
    }
        #cssmenu1 .has-sub ul li a {
            ; /*border-bottom:1px dotted #6fc7ec;*/
            filter: none;
            font-size: 0.75em;
            display: block;
            line-height: 120%;
            z-index: 1000;
            /*padding: 10px;*/
        }
#cssmenu1 .has-sub ul li:hover a{background: #0c7fb0;/*box-shadow: 0px 0px 11px #0fa1e0 inset;*/-webkit-transition: all .2s ease-in-out;}
#cssmenu1 .has-sub .has-sub:hover > ul{display:block;-webkit-transition:all .2s ease-in-out;}
#cssmenu1 .has-sub .has-sub ul{display:none;position:absolute;left:100%;top:0;}
#cssmenu1 .has-sub .has-sub ul li a{background:#0c7fb0;/*border-bottom:1px dotted #6db2d0;*/}
    #cssmenu1 .has-sub .has-sub ul li a:hover {
        background: #0c7fb0;
    }
.td01{width:254px;}
.ttotales{font-size: 9pt;color: white;width: 100%;}
.ttotales td{box-shadow: 0 0 3px #0094D3 inset;border-radius: 7px;}
.overflow{overflow:auto;height:390px;background:whitesmoke;}
.totales{overflow: overlay;box-shadow: 1px 1px 5px black inset;border-radius: 6px;}
.headers{position:fixed;left: 2%;right: 2%; width:96%;}
.table3, .table2{font-size:9pt;width: 100%;}
.td0{width:164px;}
.td11{width:253px;}
.td1{width:164px;}
.td2,.td3,.td4,.td5,.td6,.td7,.td8,.td9,.td10,.td11,.td12{width:80px;}
.ignore{float: none !important;width: 0 !important;text-align: center !important;margin-top: 0px !important;}
.solicitudes {width: 100px;position: absolute;right: 3%;text-align: center;top: 5%;box-shadow: 0px 0px 6px black inset;padding: 5px;font-size: 7pt;}
.headerabsolute {background: #0FA1E0;position: absolute;padding: 3px;left: 0;color: white;right: 0;top: 0;border-top: 1px dashed black;}
.td2,.td3,.td4,.td5,.td6,.td7,.td8,.td9,.td10,.td11,.td12{width:80px;}
.formulario {top: 0;text-align: left;height: 50%;}
.formulario td {width: 40%; text-align : left; position:relative ;}
fieldset {-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;}
legend {color: rgb(3, 3, 3);font-size: 12pt;text-shadow: -1px -1px 1px black;filter: progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=black);text-align: left;padding: 6px;}
.Captcha{display:block;margin:0 auto 0 auto;}
.selectAll {position: absolute;top: 80px;width: 105px;text-align: center;font-size: 10pt;right: 24px;}

.resumen {margin:0 auto;font-family:arial;}
.resumen th {padding: 5px;box-shadow: 1px 1px 5px gray; text-align:left ; }
.resumen td {color: white;padding: 5px; text-align: right; background-color: #00BBFF;  }
.cajaResumen {text-align: justify;margin-top: 10%;margin-left: 32%;margin-right: 10%;border: 4px dashed rgb(0, 163, 255);padding: 17px;width: 33%;font-size: 13pt;}
	
.bienvenu1{color:#00bbff;font-size:25pt;text-shadow:-1px -1px 1px black;filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=black);margin:auto;}}
.etiqueta1{color:#000000;font-size:12pt;text-shadow:-1px -1px 1px black;}
.title1s{color:#000000;font-size:12pt;text-shadow:-1px -1px 1px black;filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=black);margin:auto;}
.buton1{top: 25%;background: #0FA1E0;color: white;border-radius: 2px;box-shadow: 1px 1px 3px black;cursor: pointer;z-index: 10000000000;}
#estpass{position: absolute;right: 0;left: 0;width: 250px;border-bottom: 2px solid #0FA1E0;padding: 30px;color: black;background: white;margin: 50px auto 0 auto;top: 0;text-align: center;box-shadow: 0px 0px 5px black;}	

/* Codigo Andres*/

/*.p-container{
    transform: translate(0, 1px);
}*/

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.burger-container {
    background: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    width: 1.5em;
    padding: 0.5rem;
    float: left;
}

.burger-container:hover {
    background: #bdbebf;
}

.burger-line {
    width: 1.5em;
    height: 3px;
    background-color: #4c5054;
    margin: 3px 0;
}

body{
    height: 90%;
    margin: 0
}

#sidebar {
    position: fixed;
    top: var(--header-height);
    width: 17%;
    height: calc(100vh - var(--header-height));
    background: #0d1528;
    overflow-y: auto;
    z-index: 19;
}

.sidebar-btn {
    color: white;
    width: 100%;
    text-align: left;
    height: 10%;
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size: 1.1em;
    font-weight: normal;
    border-radius: 0px;
}

.sidebar-btn:hover {
    background: var(--info100-blue);
    color: #fff;
    border-radius: 0;
    text-align: left;
}

.sidebar-btn:focus {
    background: var(--info100-blue);
    color: #fff;
    border-radius: 0;
    text-align: left;
    border: 0;
}

.sidebar-btn:active{
    border: 0;
}

.dropdown{
    background: transparent;
    width: 100%;
}

.dropdown-menu {
    background: #0d1528;
    margin-bottom: 10em;
    width: 100%;
    border: 0;
    padding: 0;
}

.dropdown-item {
    border: 0;
    background: #0d1528;
    color: white;
    height: 50px;
    /*display: block;*/
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size: 0.88em;
    font-weight: normal;
    line-height: 180%;
    padding: 12px 10px;
    text-decoration: none;
}

.dropdown-item:hover {
    background: var(--info100-blue);
    color: #fff;
    border-radius: 0;
    text-align: left;
}

#botonMenu{
    z-index: 10;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    
    
}

#botonMenu {
    border: 1px solid #ced4da;
    position: absolute;
}

.small-sidebar{
    display: none;
}

/*.validadorTr{
    padding-bottom:7px;
}*/

table{
    margin-bottom: 5px;
}

/*td{
    padding: 5px;
}
*/
.btn-container{
    margin: 20px auto 35px auto;
}

.spacingTable td{
    padding: 5px;
}

.btn-primary{
    background: var(--info100-blue)
}

.btn-danger{
    background: #c42a39;
}

.jumbotron {
    background: rgb(242,242,242);
}

.jumbotron-footer{
    
    
    float: left;
}

.display-4{
    font-size: 3rem;
    color: var(--info100-blue);
    font-weight: 600;
}

.display-4 span{
    font-size: 1rem;
}

#ContentPlaceHolder1_chkAll{
    margin-right:0.5rem;
}

.manualesTable{
    margin-top: 3rem;
    /*background: var(--ligthing-gray);*/
    
}

.borderColorTd td{
    border: 1px solid var(--ligthing-gray)
}

.container{
    width: 70%;
    border-radius: 0.25rem;
    padding: 5rem;
}

.input-group-text{
    height:100%;
}

.form-horizontal {
    text-align: left;
    margin-bottom: 2rem;
}

.control-label {
    display: inline-block;
    margin-bottom: 0.5rem;
    text-align: left;
    font-size: 1rem;
}

#Image1{
    display: none;
}

#login2{
    height: 100%;
    display: flex;
    align-items: center;
    place-items: center;
}

.container-fluid {
    /*height: 100%;
    display: flex;
    align-items: center;
    place-items: center;*/
}

#Form2{
    height: 80%;
}

.move {
    transform: translateX(-5%)
}
.dark{
             color: black;
}
.dark:hover{
    color: var(--info100-blue)
}

#mensaje:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    border-radius: 100%;
    background: rgba(146,161,176,.3);
    filter: blur(5px);
    transform: translateY(calc(100% - 0.75rem));
    z-index: -1;
}

#login2 > input {
    font-size: 1rem;
    padding: 0.375rem 0.75rem;
}

.moveTable{
    margin-top:3rem;
}

.ccCargando {
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: fixed;
    background-color: #000;
    opacity: .8;
    filter: alpha(opacity=80);
    z-index: 9999;
    transition: width 2s;
    -moz-transition: width 2s;
    -webkit-transition: width 2s;
    -o-transition: width 2s;
    cursor: progress;
}

/*Extra small devices (portrait phones, less than 576px)*/ 
@media (max-width: 575.98px) {
    
}

/*Small devices (landscape phones, less than 768px)*/ 
@media (max-width: 767.98px) {
    
}

/*Medium devices (tablets, less than 992px)*/ 
@media (max-width: 991.98px) {
    
}

/*Large devices (desktops, less than 1200px)*/ 
@media (max-width: 1199.98px) {
    
}

@media (max-width: 1499.98px) {
    #control{
        transform: translateY(0.2rem);
    }
}

/*@media (max-width: 1918.98px) {
}*/