/* Styles for screens 992px wide and larger (e.g., desktops) */
@media (min-width: 992em) {
  /* CSS rules for desktops */
  
  body { /*THE BODY INSIDE THE VIEWPORT*/
    margin: 0 auto;
    height:100vh;
    max-width:80%;
    background: #6D6E78;
    background: linear-gradient(90deg, rgba(237, 221, 233, 1) 0%, rgba(109, 110, 120, 1) 48%);

    }
    .man_trans {
      font: bold 11px Arial;
      text-decoration: none;
      background-color: #EEEEEE;
      color: #333333;
      padding: 2px 6px 2px 6px;
      border-top: 1px solid #CCCCCC;
      border-right: 1px solid #333333;
      border-bottom: 1px solid #333333;
      border-left: 1px solid #CCCCCC;
    }
  
    .container { /*THE BODY GRID SYSTEM*/
    display: grid;
    grid-template-areas:
        "header header"
        "side-menu content"
        "footer footer";
    grid-template-columns: 12% 88%;
    gap: 3px;
    padding: 5px;
    background: transparent;

    }
    
    .container div { /*MAIN PAGE*/
        background-color: white;
        padding: 10px;

    }
    
    .container .header { /*HEADER DIV*/
        grid-area: header;
        display:flex;
        flex-direction:row;
        top:0;
        justify-content:flex-end;
        background: #6D6E78;
        background: linear-gradient(90deg, rgba(237, 221, 233, 1) 0%, rgba(109, 110, 120, 1) 48%);
     
    }
    
    .container .header div { /*DIVS INSIDE THE HEADER DIV*/
        background: transparent;
    }
    
    .container .header div a { /*A TAGS INSIDE THE HEADER DIVS*/
        text-align:right;
        float:right;
    }
    
    .container .side-menu { /*SIDE-MENU DIV*/
        grid-area: side-menu;
        display:flex;
        flex-direction:column;
        flex-wrap:normal;
        top:100;
        background: transparent;

    }
    
    .container .side-menu div { /*DIVS INSIDE THE SIDE-MENU DIV*/
        display:flex;
        flex-wrap:normal;
        background:transparent;
    }

    .container .content { /*CONTENT DIV*/
        grid-area: content;
        height:100%;
        overflow-x:auto;
    }


    .container .footer { /*FOOTER DIV*/
        grid-area: footer;
        text-align: center;
        background:transparent;
}
}


/* Styles for screens between 601px and 991px wide (e.g., tablets) */
@media (min-width: 601em) and (max-width: 991em) {
  /* CSS rules for tablets */
  body { /*THE BODY INSIDE THE VIEWPORT*/
    margin: 0 auto;
    height:100vh;
    max-width:80%;
    background: #6D6E78;
    background: linear-gradient(90deg, rgba(237, 221, 233, 1) 0%, rgba(109, 110, 120, 1) 48%);
    }
    
    .man_trans {
      font: bold 11px Arial;
      text-decoration: none;
      background-color: #EEEEEE;
      color: #333333;
      padding: 2px 6px 2px 6px;
      border-top: 1px solid #CCCCCC;
      border-right: 1px solid #333333;
      border-bottom: 1px solid #333333;
      border-left: 1px solid #CCCCCC;
}

    .container { /*THE BODY GRID SYSTEM*/
    display: grid;
    grid-template-areas:
        "side-menu header"
        "content content"
        "footer footer";
    grid-template-columns: 50% 50%;
    padding: 5px;
    background: transparent;
    }
    
    .container div { /*MAIN PAGE*/
        background-color: white;
        padding: 10px;
    }
    
    .container .header { /*HEADER DIV*/
        grid-area: header;
        text-align:right;
        display:flex;
        flex-direction:row;
        justify-content:flex-end;
        background: #6D6E78;
        background: linear-gradient(90deg, rgba(237, 221, 233, 1) 0%, rgba(109, 110, 120, 1) 48%);
        overflow-wrap:normal;
    }
    
    .container .header div { /*DIVS INSIDE THE HEADER DIV*/
        background-color:transparent;
    }
    
    .container .side-menu { /*SIDE-MENU DIV*/
        grid-area: side-menu;
        background: transparent;
        overflow-wrap:normal;
    }
    
    .container .side-menu div { /*DIVS INSIDE THE SIDE-MENU DIV*/
         background: transparent;
    }
    
    .container .side-menu a{
        justify-content:start;
        margin-right:10px;
        background: transparent;
    }

    .container .content { /*CONTENT DIV*/
        grid-area: content;
        height:100%;
        overflow-x:auto;
        overflow-y:auto;
    }

    .container .footer { /*FOOTER DIV*/
        grid-area: footer;
        text-align: center;
        background:transparent;
    }
}


/* Styles for screens up to 600px wide (e.g., phones) */
@media (max-width: 600em) {
  body {
    margin: 0 auto;
    height:100vh;
    max-width:90%;
    background: #6D6E78;
    background: linear-gradient(90deg, rgba(237, 221, 233, 1) 0%, rgba(109, 110, 120, 1) 48%);
    }


    .container { /*CONTAINER DIV*/
    display: grid;
    grid-template-areas:
        "header"
        "side-menu"
        "content"
        "footer";
    grid-template-columns: 100%;
    gap: 3px;
    padding: 5px;
    background: transparent;
    }
    
    .container div { /*DIVS INSIDE THE CONTAINER DIV*/
        background-color: white;
        padding: 10px;
    }
    
    .container .main {
        background: transparent;
    }
    
    .container .header { /*HEADER DIV*/
        grid-area: header;
        display:flex;
        flex-direction:row;
        justify-content:flex-end;
        top:0;
        background: #6D6E78;
        background: linear-gradient(90deg, rgba(237, 221, 233, 1) 0%, rgba(109, 110, 120, 1) 48%);
    }
    
    .container .header div { /*DIVS INSIDE THE HEADER DIV*/
        display:flex;
        flex-direction:row;
        background:transparent;
        margin-right: 10px;
    }
    
    .container .side-menu { /*SIDE-MENU DIV*/
        grid-area: side-menu;

        height:30%;
        display:flex;
        flex-direction:row;
        background: transparent;
    }
    
    .container .side-menu div { /*DIVS INSIDE THE SIDE-MENU DIV*/
        background: transparent;
        flex-direction:row;
    }
    
    .container .side-menu a{ /*A TAGS INSIDE THE SIDE-MENU DIV*/
        justify-content:start;
        margin-right: 10px;
        
    }

    .container .content { /*CONTENT DIV*/
        grid-area: content;
        display:flex;
        height:100%;
        overflow-x:auto;
}
    }

    .container .footer { /*FOOTER DIV*/
        grid-area: footer;
        text-align: center;
        background:transparent;

    }