/* color palette
Dark kiwi               262C0A
Selva                   748038
Sin escorbuto           B4D562
Oxalico                 DBE479
Youre All That I See    F9F9B9
*/

@font-face {
    font-family: 'GeoSansLight';
    src: url('../fonts/GeosansLight.ttf');
}

@font-face {
    font-family: 'GeoSansLightOblique';
    src: url('../fonts/GeosansLight-Oblique.ttf');
}

* {
    font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
    font-size: 14px;
    /* font-size: 14vw; botones */
}

html, body, div, header, section, footer, nav {
    margin: 0px;
    padding: 0px;
}

.container {
  display: inline-block;
  cursor: pointer;
  position: fixed;
}

.bar1, .bar2, .bar3 {
  width: 25px;
  height: 2px;
  background-color: #f9f9b9;
  margin: 6px;
  transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-5px,5px) ;
  transform: rotate(-45deg) translate(-5px,5px);
}

/* Fade out the second bar */
.change .bar2 {
  opacity: .0;
}

/* Rotate last bar */
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-6px,-6px) ;
  transform: rotate(45deg) translate(-6px,-6px);
}

/*add georg*/
body {
    overflow: scroll;
}

li{
    margin: 8px 0;
    text-indent: -0.25em;
}
br {
	        line-height: 135%;
		     }


.clear {
    clear: both;
}

header {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    background-color: #262C0A;
    box-shadow: 0px -3px 10px #748038 inset;
}

header h1 {
    font-family: 'GeoSansLightOblique';
    font-size: 15px;
    /* font-size: 15vw; tittle*/
    color: #F9F9B9;  
    margin: 0px;
    padding: 5px;
    text-align: center;
}

footer {
    position: fixed;
    bottom: 5px;
    right: 0px;
    /* padding-top: 20px; */
}

/* .mobile {
  position: none;
  bottom: 0;
  width: 100%;
  height: 2.5rem;
} */

footer ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

/* footer ul li { */
    /* float: left; */
/* } */

footer ul li a {
    font-family: 'GeoSansLight';
    font-size: 13px;
    /* font-size: 2vw; footer */
    float: left;
    padding: 3px;
    margin: 0px 5px;
    text-decoration: none;
    color: rgb(14, 17, 4);
}

/* footer ul li a:hover {} */

#wrapper {
	/*isma salva el dia*/
        /*width: 960px;*/
    /* width: 996px; */
    width: 100vw;
    margin: 0px auto;
    margin-top: 28px;
}

#options {
    float: left;
    /* width: 290px; */
    width: 250px;
    /* width: 76%; */
    background-color: #DBE479;
    border-radius: 0px 0px 25px 25px;
    box-shadow: 0px 3px 10px #748038;
    margin-bottom: 20px;
    margin-right: 10px;
    
    /* add: georg*/
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 15px;
    
    /* sidebar */
    position: inherit; 
    /* position: fixed;  */
    z-index: 1; 
    display: block; 
    margin-bottom: 0px; 
    bottom: 0px; 
    top: 28px;
    overflow-x: hidden;
}

#options ul {
    padding: 0px 0px 0px 10px;
    list-style: none;
}

#options>ul {
    padding: 0px 0px 10px 10px;
}

/* #options ul li {} */

#options ul li span,
#options ul li a {
    font-family: "Franklin Gothic","Arial Narrow Bold","Arial",sans-serif;
    font-size: 12px;
    cursor: pointer;
    padding: 0px 4px;
}

#options ul li a:hover {
    color: #DBE479;
    background-color: #748038;

}
.tools {
    right: -5.3em;
    top: 7.0em;
    position: fixed;
    transform: rotate(-90deg);
    float: left;
    padding: 0.5em 1.25em;
    /* display: none */
}

.tools.preview ul li{
    /* transform: translate(0,0.8em); */
    transition: 1s ease-in-out 0.08s;
}

.tools.preview ul li:hover{
    transform: translate(0,-0.1em);
    transition: 0.5s ease-in-out 0s;
}

.tools ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tools ul li {
    display: inline-block;
    background-color: #262C0A;
    color: #F9F9B9;
    padding: 0.2em 0.5em;
    border-radius: 0.5em 0.5em 0em 0em;
    box-shadow: 0 -3px 10px #748038 inset;
}

.tools ul li a {
    font-family: 'GeoSansLightOblique';
    cursor: pointer;
    font-size: 0.95em;
    font-weight: bold;
    /*text-transform: uppercase;*/
}

#schedule {
    /*isma salva el dia*/
    /*float: left;*/
    float: none;
    /* width: 640px; */
    white-space: pre-wrap;
}

#schedule.preview {
    align-content: center;
}

#schedule table {
    margin-left: 10px;
    /* margin-right: 32px; */
    margin-right: 1.25em;
    /*width: 81.25%;*/  /* add in javascript */ 
    /* max-width: 81.25%; */
    border-collapse: collapse;  
    margin-top: 10px;
    margin-bottom: 2.5em;
}

table {
    overflow-x: scroll;
}
/* @media screen and (max-width: 320px) {
     table {
       display: block;
       overflow-x: auto;
     }
} */

#schedule table tr {
    text-align: center;
}


#schedule table tr th,
#schedule table tr td,
#schedule table tr td div {
    font-family: GillSans, Calibri, Trebuchet, sans-serif;
    font-size: 12px;
    /* font-size: 10px; */
    padding: 2px;
}

#schedule table tr td div.info {
    font-size: 10px;
}

/* #schedule table tr td.shrink {
    white-space:nowrap
} */


/* #schedule table tr th:nth-child(1),
#schedule table tr th:nth-child(2) {
    text-align: center;
} */

#schedule table tr th.hour {
    color: #262C0A;
    font-weight: normal;
    vertical-align: middle;
    text-align: center;
    border-top: 1px solid #c9c7b1;
    border-bottom: 1px solid #c9c7b1;
    width: 65px;
}

#schedule table tr td {
    /* border: 1px solid #262C0A; */
    /* border: 1px solid #262c0a4e ; */
    border: 1px solid #c9c7b1;
}

.period { width: 42px; }
.day { 
    width: 100px;
}

@media only screen and (max-width: 450px) {
    #header ul li {
        width: 100%;
    }
}

a.grupo.selected {
    font-weight: bold;
    text-decoration: underline;
}


.color1 { background-color: hsla(  0, 100%, 50%, 0.45); }
.color2 { background-color: hsla( 40, 100%, 50%, 0.45); }
.color3 { background-color: hsla( 80, 100%, 50%, 0.45); }
.color4 { background-color: hsla(120, 100%, 50%, 0.45); }
.color5 { background-color: hsla(160, 100%, 50%, 0.45); }
.color6 { background-color: hsla(200, 100%, 50%, 0.45); }
.color7 { background-color: hsla(240, 100%, 50%, 0.45); }
.color8 { background-color: hsla(280, 100%, 50%, 0.45); }
.color9 { background-color: hsla(320, 100%, 50%, 0.45); }

.color10 { background-color: hsla(20, 100%, 50%, 0.7); }
.color11 { background-color: hsla(60, 100%, 50%, 0.7); }
.color12 { background-color: hsla(100, 100%, 50%, 0.7); }
.color13 { background-color: hsla(15, 100%, 50%, 0.7); }
.color14 { background-color: hsla(220, 100%, 50%, 0.7); }

#schedule table tr td.collision {
    /* background-color: #ffffff; */
    /* border: 2px solid #ff0000; */
    color: red;
    /* font-weight:bold; */
}