*{box-sizing:border-box;margin:0;padding:0}
html{font-family:Roboto;font-weight:300;text-align:left;font-size:16px}
body{overflow:scroll}
#wrapper{display:flex;flex-direction:row;height:100vh;width:100vw}
#menu{position:relative;background-color:#f7f7f7;min-width:250px;width:250px}
#menu>div{padding:0 10px}
#menu .search-box{text-align:left;padding:20px 10px 30px 10px;background-color:white;box-shadow:0 0 16px 0;color:#3f8bf8;position:relative;z-index:2}
#menu>.search-box>.logo-with-title{position:relative;margin-bottom:30px}
#menu>.search-box>.logo-with-title>.logo{max-width:60%}
#menu .search-box>.logo-with-title>.title{font-size:34px;color:#2279f8;font-weight:600;background-color:white;position:absolute;bottom:0;right:0;padding:5px 10px}
#menu .search-bar-autocomplete{width:198px;height:150px;background-color:white;position:absolute;top:32px;right:0;overflow-y:scroll;padding:5px 0;display:none}
#menu .search-bar-autocomplete li{padding:5px;cursor:pointer}
#menu .search-bar-autocomplete li:hover{background-color:#e8f0fc}/*odsyłacz po wybraniu.Kolor tła*/
#menu .info-box .entity-name{font-size:1.8rem;font-weight:400}
#menu .info-box .entity-details .detail-name{font-size:1.2rem;font-weight:400}
#menu .info-box .entity-details .detail-content{font-size:1.5rem;font-weight:400}
#menu .info-box .entity-details .detail-inline{font-weight:400}
#menu .info-box .entity-details .detail-content.detail-timer{text-align:center;font-size:2rem;color:#ab0000}
#menu .info-box .entity-details .detail-content,
#menu .info-box .entity-details .detail-inline{margin-bottom:20px}
#menu label{display:block;color:white;margin-bottom:5px}
#content{flex-grow:2;overflow:auto}
div.search-bar{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;position:relative}
/*kolor tła lupki*/
div.search-bar .search-bar-icon{width:32px;height:32px;background-color:#3f8bf8;color:white;display:flex;justify-content:center;align-items:center;font-size:1.6rem}
div.search-bar input.search-bar-input{
	height:32px;background-color:#efefef;border:none;padding-left:10px;width:100%;flex:1;color:blue;font-weight:500}
div.search-bar input.search-bar-input:focus{outline:none}
.timetable{margin-top:20px;min-width:1600px;width:100%;margin:0 auto;border-collapse:collapse;font-size:12pt;display:table;table-layout:fixed;text-align:center}
.timetable .row{display:table-row}
.timetable .row:nth-child(even){background-color:#e8f0fc}/*kolor poziomych linii */
.timetable .row .cell{display:table-cell;vertical-align:middle;width:5%;height:75px}

.timetable .row .cell:not(:last-child){border-right:2px solid #a7a4a4}/*grubość linie pionowych tabeli*/
.timetable .head .cell.weekday{width:19%;position:relative;z-index:-1}
.timetable .head{display:table-header-group;font-size:1.6rem;color:#2279f8;font-weight:500}/*kolor nazw dni tygodnia*/


.timetable .cell .period-text,.timetable .cell .hour-number{font-weight:400;color:#8e8e8e}
/*.timetable .cell .period-text{font-size:.7rem}*/
.timetable .cell .period-text{font-size:.7rem;color:red}
/*.timetable .cell .hour-number{font-size:1.8rem}*/
.timetable .cell .hour-number{font-size:1.8rem}/*kolor która godzina lekcyjna*/
.timetable .body{display:table-row-group}
.timetable .head .cell{background-color:#c7ddfd}/*kolor tabeli nagłówek */
.timetable .head .cell:first-child{border-bottom:20px; color:red}
.timetable .head .cell:last-child{border-right:none}
.timetable .body .cell{border-bottom:2px solid #red}
.timetable .cell .lessons{display:flex;flex-direction:row;justify-content:center;width:100%;height:100%}
.timetable .cell .lessons .lesson{flex-grow:1;flex-basis:0%;padding:5px;text-align:center;position:relative;display:flex;align-items:center;justify-content:center}
.timetable .cell .lessons .lesson .lesson-name{word-break:break-all}
.timetable.timetable-class .cell .lessons .lesson .lesson-name,.timetable.timetable-classroom .cell .lessons .lesson .lesson-name,.timetable.timetable-teacher .cell .lessons .lesson .class{font-weight:400;font-size:1.2rem;display:block}
.timetable .cell .lessons .lesson .group{display:block;font-size:.6rem;position:absolute;right:3px;top:2px}
.timetable.timetable-class .cell .lessons .lesson .classrooms,.timetable.timetable-classroom .cell .lessons .lesson .class,.timetable.timetable-teacher .cell .lessons .lesson .classrooms{display:block;font-size:.6rem;position:absolute;left:3px;bottom:2px}
.timetable.timetable-class .cell .lessons .lesson .teacher,.timetable.timetable-classroom .cell .lessons .lesson .teacher,.timetable.timetable-teacher .cell .lessons .lesson .lesson-name{display:block;font-size:.6rem;position:absolute;right:3px;bottom:2px}
.timetable .cell .lessons .lesson:not(:last-of-type){border-right:1px solid #d2d2d2}#exec-time{position:absolute;bottom:5px;left:0;right:0;font-size:8pt;color:#949494}
.row.current{background-color:#eaffcf}
.control-arrow{position:absolute;cursor:pointer;height:100%;top:0;font-size:3rem}
.control-arrow.left-arrow{left:10px}
.control-arrow.right-arrow{right:10px}
.hidden{display:none}

@media only print{@page{size:A4 landscape}#menu{display:none}
.timetable{border:1px solid #efefef;border-collapse:collapse}}


@media screen and (max-width:1023px){#wrapper{flex-direction:column;align-items:center;height:100vh}
#menu{width:100%;height:auto}
#menu>.search-box>.logo-with-title{margin-bottom:10px}
#menu>.search-box>.logo-with-title>.logo{max-width:50px;display:inline;vertical-align:middle}
#menu .search-box>.logo-with-title>.title{background-color:transparent;display:inline;position:static;vertical-align:middle}
#menu .search-bar-autocomplete{width:100%;height:150px;background-color:white;position:absolute;top:32px;right:0;overflow-y:scroll;padding:5px 0;display:none}
#menu .info-box{display:none}#content{width:100%;height:100vh}#menu label{display:inline}
.timetable{min-width:100%}
.timetable .row .cell{height:60px}
.timetable .cell.period,.timetable .head .cell:first-child{width:60px}
.timetable .head .cell.weekday{width:auto;z-index:0}
.timetable .cell.period .hour-number{font-size:1.6rem}
.timetable .cell.period .period-text{font-size:.6rem}}