@media (min-width: 1200px) {
    .container {
        /*width: 1170px;*/
        width: 95%;
    }
    .logoutIcon {
        display: none !important;        
    }
    
    /* HOLIDAY - CALENDAR */
    #holidayCalendar {
        display: table !important;
    }
    .menuOpener {
        display: none;
    }
}
@media (max-width: 1024px) {
    .lastQuestions {
        display: none!important;
    }
    .questions {
        width: 100%!important;
    }
}
@media (min-width: 900px) and (max-width: 1199px) {
    .logoutIcon {
        display: none !important;        
    } 
    .leftMenu {
        display: none;
        width: 60% !important;
        max-width: 300px;
        position: absolute;
        /* height: calc(100% - 5em); */
        top: 51px;
        left: -1px;
        overflow-y: auto;
        margin: 0;
        padding: 0;
        opacity: 0.96;
        z-index: 10;
    }
    #notifications {
        top: 6.76em !important;
    }
    .content {
        width: 100% !important;
    }
    header #topLine {
        width: 98%;
        margin: 0 1%;
    }
    
    
}

@media (min-width: 600px) and (max-width: 899px) {
    header #topLine {
        width: 98%;
        margin: 0 1%;
    }
    .logo {
        width: 50% !important;
    }
    #userInfo {
        font-size: 0.8em;        
    }
    #userInfo .material-icons, #userInfo .info {
        margin-right: 5px !important;
    }
    
    .leftMenu {
        display: none;
        
        width: 60% !important;
        max-width: 300px;
        position: fixed;
/*        height: calc(100% - 5em);*/
        top: 7.76em;
        left: -1;
        overflow-y: auto;
        margin: 0;
        padding: 0;
        opacity: 0.96;
        z-index: 1;
    }
    /*.leftMenu {
        width: 24% !important;
        font-size: 12px;
    }*/
   /* .leftMenu {
        display: none;
    }*/
    .content {
        width: 100% !important;
    }
    /* DEFAULT*/
  /*  .leftMenu {
        width: 20% !important;
    }
    .leftMenu a {
        padding: 1em 0.5em;
        font-size: 10px;
    }*/
   /* .content {
        width: 78% !important;
    }*/
    .content h1 {
        font-size: 1em;
    }
    .logoutIcon {
        display: none !important;        
    }  
    
    /* CALENDAR EVENTS */
    #newEventButton {
        font-size: 0.8em !important;
        padding: 0.5em 0.8em !important;
    }
    #headLine {
        margin-top: 0 !important;
    }
    .calendarCell {
        width: 13.4% !important;
    }
    .dayNames .calendarCell {
        font-size: 0.7em !important;
    }
    .specialDay {
        font-size: 0.6em !important;
    }
    .events {
        font-size: 0.6em !important;
    }
    .htTitle {
        width: 49%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 12px;        
    }
    .htTitle:before {
        width: 25px !important;
        height: 25px !important;
        margin: -10px 5px -9px 0 !important;
    }
    .htDetails {
        font-size: 0.8em;
    }
    .label {
        width: 20% !important;
    }
    .popupForm {        
        width: 80%;
    }
        
}

@media (max-width: 599px) {
    /* DEFAULT */
    * {
        
    }
    .topMenu .container {
        float: none !important;
    }
    
    .loggedText {
        display: none;
    }
    header #topLine {
        width: 98%;
        margin: 0 1%;
    }
    .leftMenu {
        display: none;
        
        width: 60% !important;
        max-width: 300px;
        position: fixed;
/*        height: calc(100% - 5em);*/
        top: 8em;
        left: -1;
        overflow-y: auto;
        margin: 0;
        padding: 0;
        opacity: 0.96;
        z-index: 1;
    }
    /*
    .leftMenu {
        display: block;
    }
    .leftMenu.hidden {
        display: none;
    }
    .leftMenu, .content {
        width: 100% !important;
    }*/
    
    /*.leftMenu {
        display: none;
    }*/
    .content {
        width: 100% !important;
    }
    
   /* .leftMenu a {
        font-size: 12px;
        padding: 1em !important;
    }*/
    h1 {
        text-align: center;
    }
    .logo {
        width: 100% !important;
        /*text-align: center !important;*/
        margin: 0.5em auto !important;
    }
    .logo img {
        width: 8em;
        margin: 0.5em auto;
    }
    #headLine {
        font-size: 0.6em !important;
    }    
    #setYear, #setMonth {
        padding: 0 !important;
    }
    .menuOpener {
        float: left;
        display: block;
    }
  /*  .menuOpener {
        background: #73a1d2;
        display: block;
        color: #FFF;
        font-weight: bold;
        padding: 5px;
        text-align: center;
        margin: -5px auto 10px;
        cursor: pointer;
    }
    .menuOpener:hover {
        background: #428bca;
    }
    .leftMenu.hidden {
        display: none;
    }*/
    
    /* LOGIN */
    .logoutIcon {
        display: block;
        margin: -2px;
    }
/*    .login {
        width: 20px !important;
        height: 21px;
        overflow: hidden;
        white-space: nowrap;
        padding: 3px !important;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        border: 1px solid #FFF;
        background: #FFF !important;
        color: #428bca !important;
        font-weight: bold;        
        margin: 11px auto 0 !important;
        
        position: absolute;
        margin: .99em 0.95em !important;
        right: 0;
    }*/
    @-moz-document url-prefix() {
        .login {
            margin: 12px auto 0 !important;
        }
    }
    .login {
        display: none!important;
    }
    div.log a.login, span.log a.login {
        display: inline-block!important;
    }
    #userInfo .material-icons {
        background: #FFF;
        color: #428bca ;
        margin-right: 5px !important;
    }
    #userInfo {
        display: none!important;
/*        position: fixed;
        top: 0;
        right: 4.5em;
        font-size: 0.8em;
        margin-top: 1.1em !important;*/
    }
    #userInfo .username {
        color: red;
    }
    #userMenu {
        right: 5px;
    }
    
    /* CALENDAR EVENTS */
    .calendarCell {
        display: table !important;
        width: 100% !important;
    }
    .calendarCell .dayNumber {
        display: inline-block;
        height: 100%;
        width: 20%;
        border-right: 1px solid #000;
        text-align: left !important;
        font-weight: bold;        
        /*padding-top: 2em !important;
        padding-left: 5% !important;*/
        /*padding: 2em 2% 0 5% !important;*/
        padding: 1.5em 2% 1em 5% !important;
        float: left;
    }
    .week.dayNames, .week .emptyDay {        
        display: none !important;
    }
    .dayName {
        display: inline-block !important;
    }
    .events {
        width: 70% !important;
        display: inline-block !important;
        float: right;
    }
    .tooltiptext {
        display: none;
    }
    .responsiveDayEvents {
        display: block !important;
        background: #FFF;
        font-size: 12px !important;
    }
    .material-icons {
        /*font-size: 10px !important;*/
    }
    #dayEvents {
        display: none;
    }
    .htTitle:before {
        width: 25px !important;
        height: 25px !important;
        margin: -10px 5px -9px 0 !important;
    }
    .htTitle {
        width: 60% !important;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;  
    }
    .responsiveDayEvents .htDetails:last-child {
        margin-bottom: 0.5em !important;
    }
    .editEventDetails, .deleteEvent {
        width: 10px !important;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;       
    }
    .eventButtons {
        padding: 0;
    }
    #newEventButton {
        margin: 0.5em auto;
        text-align: center;
        display: table;
    }
    #headLine {
        margin: 1em auto !important;
    }
    /*Popup*/
    #eventPopup, #eventPopup input, #eventPopup textarea, #eventPopup select {
        font-size: 12px;
    }
    #editEvent, #deleteEvent, .popupForm {
        width: 80% !important;
    }
    #editEvent label, .popupForm label {
        display: inline-block !important;
        width: 30% !important;
    }    
    .popupForm input[type="text"], .popupForm input[type="password"], .popupForm select, .popupForm textarea {
        display: inline-block !important;
        width: 60% !important;
    }
    #loginForm input[type="text"], #loginForm input[type="password"] {
        display: block !important;
        width: 100% !important;
    }
    
    /*** MAIN PAGE ***/
    #images {
        font-size: 12px;
    }
    #images th:nth-child(2), #images th:nth-child(3),
    #images td:nth-child(2), #images td:nth-child(3) {
        display: none;
    }
    /*** MEMBERS ***/
    #members {
        font-size: 12px;
    }
    #members th:nth-child(3), #members th:nth-child(4), #members th:nth-child(5),
    #members td:nth-child(3), #members td:nth-child(4), #members td:nth-child(5) {
        display: none;
    }
    
    /*** HOLIDAY CALENDAR ***/
    #calendarContainer {
        display: block;
        max-width: 100%;
        overflow: auto;
        margin: auto;
        max-height: none !important;
        /*position: relative;*/
    }
  /*  .forResponsive {
        display: block;
    }*/
    
    #holidayCalendar {
        /*display: block;
        overflow: auto;
        max-height: 100px;*/
        /*margin-left: 41px;*/
        width: auto !important;
        /*max-width: 100%;
        margin: auto;
        overflow: auto;
        display: block;*/
    }   
    #holidayCalendar tr {
     /*   display: block;*/
        display: table-cell;
        /*float: left;*/
    }
    #holidayCalendar tr:first-child {
        position: absolute;
    }
    #holidayCalendar tr td {
        display: block;
        width: 30px;
        height: 30px;
    }
    #holidayCalendar td:first-child {
        white-space: normal !important;
    }
    #holidayCalendar tr th {
        display: block;
        width: 30px;
        height: 30px;
    }
    #holidayCalendar thead tr {
        position: absolute;
            margin-left: -42px;
    }
   /* #holidayCalendar thead, #holidayCalendar tbody {
        float: left;
    }*/
    #holidayCalendar tr th:first-child div, #holidayCalendar tr td:first-child div {
            display: table;
            width: 100%;
            height: 100%;
    }
    #holidayCalendar tr th:first-child div div, #holidayCalendar tr td:first-child div div {
            display: table-cell;
            vertical-align: middle;
    }
    #holidayCalendar tr th:first-child, #holidayCalendar tr td:first-child {
        /* Safari */
        -webkit-transform: rotate(-90deg);
        /* Firefox */
        -moz-transform: rotate(-90deg);
        /* IE */
        -ms-transform: rotate(-90deg);
        /* Opera */
        -o-transform: rotate(-90deg);
        /* Internet Explorer */
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        
        width: 100px;
        margin: 35px -35px;
    }
    #holidayCalendar tr.empty td {
        width: 75px;
        opacity: 0;
    }
    #holidayCalendar tfoot tr {
        right: 5px;
    }
    #holidayCalendar tfoot th:first-child {
        margin-bottom: 0;
    }
    #holidayCalendar tfoot th:nth-child(2) {
        margin-top: 35px;
    }
    #holidayCalendar thead th:first-child {
        margin-left: -37px;
    }
        
    
    .today .dayNumber {
        background-size: 90% 90% !important;
    }
    .onlyDetails {
        display: none !important;
    }
    .onlyWorkType {
        display: table-cell !important;
    }
    .calendarView {
        display: none;
    }
        
    .sendErrorInfo {
        display: none;
    }
    .newMessage {
        /*float: left !important;*/
        margin-right: 0 !important;
    }
    .newMessage .material-icons {
        font-size: 2em;
        margin-top: -0.22em;
    }
}