@media (max-width: 1400px) {
    .after-logo-div{
        width: 100%;
    }

    .m4px-rl{
        margin: 4px 0;
    }

    .form-inline{
        display: block;
    }

    .form-inline-input{
        margin: 2px 0; 
        width: 100%;   
    }   
    
    .form-inline-btn, .buttons-form-btn{
        flex-direction: column;
        align-items: stretch;
        margin: 2px 0; 
        width: 100%;   
    } 

    /* 
    .logo-div, .logo-button, .admin-div, .middle-div, .dropbtn, .dropdown-content{
        width: 100%;
    }
    */

    .media-100{
        width: 100%;    
    }    

    /*
    .max-width100px{
        width: 100%;
    }
    */    
}

/*@media (max-width: 280px) {
    .logo-div, .logo-button, .admin-div, .middle-div, .dropbtn, .dropdown-content{
        width: 100%;
    }
}*/

/* If the browser window is smaller than 992px (laptops/desktops), 
make the columns stack on top of each other */
@media only screen and (max-width: 992px) {
    .myrow{
      display: table; /* Make the container element behave like a table */
      width: 100%; /* Set full-width to expand the whole page */
    }
  
    .mycolumn {
      display: block;
      width: 100%;
      /*margin: 5px 0;*/
    }

    .width-5px{
        display: none; /*it's not displayed in any case as it is under other divs*/
    }

    .width-4px-100{
        width: 100%;           
    }

    .width-10px-100{
        width: 100%;           
    }

    .media-display-block{
        display: block;
    }

}

@media screen and (max-width: 1024px) {
    .media-display-none{
        display: none;
    }
}

/*--- CALENDAR MONTH ---*/
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px){
    /*p{background: red;}*/

    .position{
        font-size: 15px; 
    }

    .month-name {
        font-size: 18px; 
    }
    
    .week-number{
        font-size:14px;
    }

    .arrow-button {  
        font-size: 16px;
        padding: 10px;    
    }
}

/*Galaxy Fold only*/
@media only screen and (max-width: 280px){
    .calendar-row {
        padding: 30px 8px;       
    }

    .month-name {
        font-size: 16px;  
    }
    
    .week-number{
        font-size:12px;
    }
}
/*--- CALENDAR MONTH ENDS ---*/

/*--- CALENDAR TABLE STARTS (ADMIN) ---*/
@media only screen and (max-width: 1200px){

    /* Force table to not be like tables anymore */
    .calendar-table thead, tbody, th, td, tr {
        display: block;
        /*if you need another table behave like a table again, 
        put display:inline-block or display:table in its styles,
        see example in to-do.css*/
    }            

    .empty {
        display: none;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .calendar-table th {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .calendar-table tr {
        border: 1px solid #ccc;
    }

    .calendar-table td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #ccc;
        position: relative;
        /*padding-left: 50%;*/
    }

    /* Label the data */
    .calendar-table td:nth-of-type(1):before {
        content: "Maanantai";
    }
    .calendar-table td:nth-of-type(2):before {
        content: "Tiistai";
    }
    .calendar-table td:nth-of-type(3):before {
        content: "Keskiviikko";
    }
    .calendar-table td:nth-of-type(4):before {
        content: "Torstai";
    }
    .calendar-table td:nth-of-type(5):before {
        content: "Perjantai";
    }
    .calendar-table td:nth-of-type(6):before {
        content: "Lauantai";
    }
    .calendar-table td:nth-of-type(7):before {
        content: "Sunnuntai";
    }
} 
/*--- CALENDAR TABLE ENDS ---*/