
  body {
    width: 1350px;
    height: 731.05px;
    padding-top: 70px;
    font-family: 'Roboto','Lato',  'Helvetica Neue', Helvetica,Arial,sans-serif;
  }


.accordion {
  background-color: #09795E;
  color: white;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  outline: none;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  font-size:12px;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  
}

.accordion.active,  button.accordion:hover{
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  transform:scale(1.03,1.03);
  -webkit-transform:scale(1.03,1.03);
  -moz-transform:scale(1.03,1.03);
}


  .accordion:after {
      content: '\FE40'; /* Unicode character for down sign */
      font-size: 18px;
    color: white;
    float: left;
    margin-left: 5px;
    width: 2em; 
    -moz-transition: all 0.2s ease;
    /* WebKit */
      -webkit-transition: all 0.2s ease;
    /* Opera */
      -o-transition: all 0.2s ease;
    /* Standard */
      transition: all 0.2s ease;
  }

.accordion.active:after {
  content: '\FE40'; /* Unicode character for up sign */
    font-size: 18px;
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
  /* Firefox */
    -moz-transform: rotate(90deg);
  /* WebKit */
    -webkit-transform: rotate(90deg);
  /* Opera */
    -o-transform: rotate(90deg);
  /* Standard */
    transform: rotate(90deg);
}

.accordion span {
  float: right;
  width: 2em;
}


.accordion span:after {
  content: '\292C'; 
  font-size: 20px;
  font-weight:bold;
  opacity:0.7;
  float: right;
  margin-left: 5px;
  border-radius:50%;
  padding-left:7px;
  padding-right:7px;
  color:white;
}


.accordion.active span:after {
    content: '\292C'; 
  font-size: 20px;
  font-weight:bold;
  opacity:0.7;
  float: right;
  margin-left: 5px;
  border-radius:50%;
  padding-left:7px;
  padding-right:7px;
  color:white;
}

.accordion.active span.checked:after {
  content: '\2713'; 
  color: #5EEF51;
  font-size: 20px;
  font-weight:bold;
  opacity:0.7;
  float: right;
  margin-left: 5px;
  border-radius:50%;
  padding-left:7px;
  padding-right:7px;
}

.accordion span.checked:after {
 content: '\2713'; 
  color: #5EEF51;
  font-size: 20px;
  font-weight:bold;
  opacity:0.7;
  float: right;
  margin-left: 5px;
  border-radius:50%;
  padding-left:7px;
  padding-right:7px;
}


.panelCustom {
  padding: 0 em;
  margin: 1em;
  display: none;
}

.panelCustom.show {
  display: block !important;
  margin: 1em;
  background:rgba(8,109,85, 0.2);
  color:black;
}

  
  .well{
    min-height:20px;
    padding:19px;
    margin-bottom:20px;
    background-color:#2C3E50;
      border:1px solid transparent;
    border-radius:4px;
    -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.05);
    box-shadow:inset 0 1px 1px rgba(0,0,0,0.05)
    
  }

form.well {
  background-color: #2C3E50;
    border: solid #3C948B 0.1em;
  color: #000000;
}

.well>h3,p {
  color: white;
  font-size: 1.3em;
}


  .checkbox label span {
    font-size: 1.2em;
    color: #00664D;
  } 


.controlcheck {
  font-size: 15px;
  font-weight: normal;
  color:white;
  margin-left:6%;
}

.results, .controlcheck-p1 {
 color: black;
 font-size:13px;
 margin-left:22px;
 width:100%;
}

.results {
 font-size:20px;
}

#customEncod label, #customEncod span, .controlcheck-p1.nfile, .controlcheck-p1.encoding {
 color:white;
}

 .controlcheck-p1-radio {
 color: black;
 font-size:13px;
 margin-left:22px;
 width:100%;
 font-weight:normal;
 margin-top:-20px;
}

input {
 margin-left:6%;
}

.radio>label>span {
  color: black;
  margin-left:5%;
  width: 100%;
} 

checkbox > label {
  margin-left:12%;
  width: 100%;
} 

.radio label, .checkbox label, controlcheck-p1-radio {
 margin-left:2em;
 width:100%;
}

.checkbox span {
 margin-left:1em;
}

.checkbox  {
 margin-left:1%;
 width:100%;
}

#fileTypeIn, #fileTypeOut, #fileTypeIn span, #fileTypeOut span, 
#menuPlot label, #menuPlot h3, #menuPlot span, #menuPlot p {
 color:white;
}

#fileTypeIn > label, #fileTypeOut > label, .adButton, {
 text-transform: uppercase;
}

.adButton{
 border-width: 0.2em;
  border-style: solid;
  background-color:#22453C;
  margin: 2em 2em 2em 4em;
  color: white;
  cursor: pointer;
}


panelCustom label {
 margin-left:6%;
}

.form-control {
  width:200px !important;
  margin-left: 6%;
}

.controlcheck-p3 {
margin-left:2em;
font-weight: 700;
text-transform: uppercase;
text-align: left;
font-size: 12px;
}

#selection {
 margin-left:0.8em;
}

#resetSelections {
 margin-left: 1.6em;
}

.inAccordion .shiny-options-group {
  margin-left:20px;
}


.inAccordion {
  border-radius: 15px;
  /*border: 5px solid #D0D0D0;*/
  padding: 0px; 
  background:rgba(0,0,0, 0.1);
}

#file-text {
color: #2C3E50;
font-size: 1.5em;
}

checkbox {
 margin-left:20%;
}


/*form.well {
  width: 30%;
  position: fixed;
}*/
  


.butt {
  background-color:#F1F1F1;
    color: black;
}

.butt:hover {
  background-color:#FFFFFF;
    color: black;
}

.fa.fa-power-off.fa-fw:hover {
  color:#C50502;
    border-color:white;
}

a[data-value = "Stop"]:hover .fa.fa-power-off.fa-fw {
  color:#C50502;
}

nav li a {
  font-size:16px;
}

/* estos son del spinner */
#plot-container {
position: absolute;
left: -80px;
top: 20%;
width: 850px;
/*height: 500px;*/
}

#grandplot-container{
position: absolute;
left: 30%;
top: 20%;
width: 850px;
}



.cssload-fond {
position: absolute;
left: 40%;
top: 20%;
margin-top: 100px;
}

.cssload-fond.hidden {
z-index:-1000;
}

#distPlot {
float:left;
}


  
  .navbar {
    height: 3em;
    position: fixed;
    top: 0em;
    left: 0em;
    transition: top 0.2s ease-in-out;
    width: 100%;
  }


  .nav-up {
    top: -4em;
    height:0.5em;
  }


div.left {
  border-radius: 0px;
  padding: 0px; 
  background:rgba(8,109,85, 0.2);
  color:#000000;
  box-shadow: 2px 2px 2px 2px #888888;
  margin-left:12px;
}



.selectPanel h3 {
  position:relative;
  left:30px;
}


  .nav.nav-tabs {
    border:0px;
    z-index:-10;
  }


.setButton {
-webkit-transition-duration: 0.4s; /* Safari */
-moz-transition-duration: 0.4s; /* Safari */
-o-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
filter: alpha(opacity=90);
opacity:0.9;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
margin:5px;
text-transform:uppercase;
font-weight:bold;
   padding: 11.5px 23px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   text-shadow: #7ea4bd 0 1px 0;
   color: #f0f0f0;
   font-size: 15px;
   text-decoration: none;
   vertical-align: middle;
   float:left;
}

.setButton:active {
box-shadow: 0 5px #666;
transform: translateY(10px);
filter: alpha(opacity=100);
opacity:1;
}

.setButton:hover {
filter: alpha(opacity=100);
opacity:1;
-webkit-box-shadow: inset 0;
-moz-box-shadow: inset 0;
}


#selection {
background: rgb(100,100,255); /* FF3.6-15 */
background: rgba(100,100,255,0.5); /* FF3.6-15 */
}

#goButton {
margin-left:10px;
background: rgb(0,0,255); /* FF3.6-15 */
background: rgba(0,0,255,0.5); /* FF3.6-15 */
}
 

#resetSelections {
margin-left:5px;
background: rgb(255,0,0); /* FF3.6-15 */
background: rgba(255,0,0,0.5); /* FF3.6-15 */
}

#resetAll {
background: rgb(0,255,0); /* FF3.6-15 */
background: rgba(0,255,0,0.5); /* FF3.6-15 */

}

body,#distPlot {
background-image: url("/../images/pattern.png");
background-repeat: repeat;
}

#filecontainer {
background-color: #09795E;
  -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-left:20px;
margin-right:4px;
width:90%;
}

.sideBar, .sideBarPlot {
  margin-top: 8px;
}

.nav.nav-tabs {
  visibility:hidden;
}

#myPath, #encoding {
  width:20em;
  margin-left:1em;
}


.blackTag {
  color:#666666;
  margin-left:15px;
  margin-top:20px;
}

.nav.nav-tabs {
  visibility:hidden;
}

  .container-fluid {
    color:transparent;
  }


#filecontainer h3{
  font-size:18px;
  font-weight:bold;
}

#hcontainer {
  z-index:10000;
}

.whiteTag {
  background:white;
}
  
#liberation {
  width:200px;
  height:400px;
}

#panel2-github {
  margin-left:20px;
  width:70px;
  height:70px;
  float:right;
  margin-right:10px;
    -moz-transition: 0.6s ease-in-out;
  -webkit-transition: 0.6s ease-in-out;
  -o-transition: 0.6s ease-in-out;
	transition: 0.6s ease-in-out;
}



#panel2-leandroUp {
  background-color:#086B53;
  width:50%;
  padding:20px;
  margin-left:100px;
}

#panel2-leandroUp:hover #panel2-github {
	-moz-transform:scale(1.2) rotateY(360deg);
  -webkit-transform:scale(1.2)rotateY(360deg);
  transform:scale(1.2)rotateY(360deg);
}

.textname  {
  font-size:18.3px;
  color:white;
}

#panel2-about {
  width:70%;
  margin-top:25px;
}

leandroDown {
  float:left;
  margin-bottom:10px;
}

#panel2-myMail {
  margin-left:100px;
}

#sampleAlert {
  z-index: 10000;
}

#modalTable {
  color:black;
  font-size:13px;
}

#freqTable1 {
  overflow:scroll;
}

#freqTable2 {
  overflow:scroll;
}

#tabBut {
  position:absolute;
  margin-left:377px;
  margin-top:184px;
  padding:2px;
}

.modal-content {
  width:1000px;
  margin-left:-200px;
}

.navbar-brand div {
  position:relative;
}

.navbar-brand img {
  float:left; 
  width:3em; 
  height:2.5em; 
  margin-right:2em; 
  margin-top:-0.7em;
}

.navbar-brand p {
  display:inline-block;
}


.well.sideBar div {
  padding-top:5cm;
  padding-bottom:17cm;
}

#help {
   height: 2em;
   text-align: center;
   float: left;
    display: block;
   margin-top: 15px;
   padding-left:100px;
}

#container1.alert {
 text-align: left;
 background-color: green;
 font-size: 1.2em;
 z-index: 2000;
}

#container1.alert p {
 position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#navbar {
float:none;
}

.highcharts-background {
 stroke: rgb(0, 0, 0);
}

.errormsg {
  color:red;
  font-weight:bold;
}

