/* 
    Created on : Oct 24, 2021 8:45 PM
    Author     : Yasmara 
*/

h1, h2, h3, h4, h5, h6 {
    font-family: Arial, Helvetica, sans-serif;
}

.CategoryTab { 
    display:none;
}
#Home {
    display:none;
}         

#mySidebar {
    margin-left: 0px;
    height: 500px;

}

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
tr {
    border : 1px solid black;
    padding:5%;
}
table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
td {
    padding: 5px;
}

.tablinks.active { 
    background-color: #99ccff; 
}

@media only screen and (max-width: 600px) {
    table thead {
        display: none;
    }
    table td {
        display: flex;
    }

    table td:before {
        content: attr(label);
        font-weight: bold;
        width: 120px;
        min-width: 120px;
    }

    body {
        font-family: "Open Sans", sans-serif;
        margin-bottom: 10%;
    }

    th, td {background: #eee; padding: 8px}

    table {
        border-collapse: separate;
        border-spacing: 0 15px;
    }
    tr {
        padding:10px;
    }

    /* Style the tab */
    button.tablinks {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    }

    /* Style the buttons inside the tab */
    button.tablinks {
        background-color: #eee; 
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;

        /*border-radius: 0px 25px 0px 0px;   */

    } 

    /* Change background color of buttons on hover */
    .tablinks  button:hover {
        background-color: #ddd;
    }


    .tab {
        float: left;
        border: 1px solid #ccc;

        /* position: -webkit-sticky; /* Safari 
         position: sticky;
         top: 0;*/
    }

    button.tablinks {
        background-color: #cccccc;
    }
    /* Style the buttons inside the tab 
    .tab button {
      display: block;
      background-color: inherit;
      color: black;
      padding: 22px 16px;
      width: 100%;
      border: none;
      outline: none;
      text-align: left;
      cursor: pointer;
      transition: 0.3s;
      font-size: 17px;
    }
    */

    /* Change background color of buttons on hover */
    .tab button:hover {
        background-color: #66cc00;
    }

    #openNav {
        background-color: #ddd;
    }
    /* Create an active/current "tab button" class */
    .tab button.active {
        background-color: #99ccff;
    }
    .menuname {
        padding-left: 10px;
        padding-top: 10px;

    }
    /* Style the tab content */
    .tabcontent { 
        float: left;
        padding: 0px 12px;
        border: 1px solid #ccc;

        border-left: none;
    }
    #main_menu_bar {
        margin-left: 22%;
    }
}

@media only screen and (max-width: 800px) {
    table {
        width: 100%;
    }

    table thead {
        display: none;
    }


    table tr, table td {
        border-bottom: 1px solid #ddd;
    }

    table tr {
        margin-bottom: 8px;
        border : 1px solid black;

    }

    table td {
        display: flex;
    }

    table td::before {
        content: attr(label);
        font-weight: bold;
        width: 120px;
        min-width: 120px;
    }
}