body {
    font-family: "Lato" !important;
    padding-top: 1rem !important;
}


.tabcontainer {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    padding: 1rem;
}


Style the buttons inside the tab
.tab button {
    display: block;
    background-color: inherit;
    color: black;
    padding: 1rem;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px !important;
}

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

Create an active/current "tab button" class
.tab button.active {
    background-color: #ff6b00;
    color: #ffff;
}



#customers {
    width: 100%;
}

#customers1 td, #customers1 th {
    border: 1px solid #ddd;
    padding: 8px;
}

.sidehead {
    font-size: 17px !important;
    font-weight: 600;
    color: #ff6b00;
}



#customers tr:nth-child(even) {
    background-color: #f2f2f2;
}

#customers tr:hover {
    background-color: #ddd;
}


.titleheader {
    font-size: 20px !important;
}


.titlethird {
    font-size: 18px;
}


@media only screen and (min-width: 320px) and (max-width: 768px) {
    .tabcontainer {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        padding: 1rem;
    }

    .tab {
        width: 100%;
        display: flex;
        height: 100%;
        flex-direction: column;
        overflow: hidden;
        margin-bottom: 1rem;
    }

        .tab button {
            display: block;
            padding: 0.5rem;
            width: 100%;
            border: none;
            outline: none;
            text-align: left;
            cursor: pointer;
            transition: 0.3s;
            font-size: 14px;
        }


    .txt_para1 {
        font-size: 14px;
        letter-spacing: 0.05rem;
        font-family: 'Lato-Regular'!important;
    }
}

body {
   font-family: 'Lato-Regular'!important;
    padding-top: 1rem !important;
}


.pageheader {
    padding-left: 1.5rem;
    font-size: 24px;
    font-weight: 600;
}


.tab button {
    display: block;
    background-color: inherit;
    color: black;
    padding: 1rem;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px !important;
}

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

Create an active/current "tab button" class
.tab button.active {
    background-color: #ff6b00;
    color: #ffff;
}

#customers {
    width: 98%;
}

    #customers td, #customers th {
        border: 1px solid #ddd;
        padding: 8px;
        font-size: 15px;
        font-family: 'Lato';
    }

.sidehead {
    font-size: 17px !important;
    font-weight: 600;
    color: #ff6b00;
}

.underline {
    font-size: 17px !important;
    font-weight: 600;
    color: #ff6b00;
    text-decoration:none;
}

#customers tr:nth-child(even) {
    background-color: #f2f2f2;
}

#customers tr:hover {
    background-color: #ddd;
}

#customers th {
    padding: 1rem;
    letter-spacing: 0.10rem;
    text-align: left;
    background-color: #ff6b00;
    font-size: 15px;
    color: white;
}


.txt_para1 {
    font-size: 16px;
    margin-bottom: 20px;
}

.titlethird {
    font-size: 16px;
    margin-bottom: 10px;
}


@media only screen and (min-width: 320px) and (max-width: 768px) {
    .tabcontainer {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        padding: 1rem;
    }

    .tab {
        background-color: #f1f1f1;
        width: 100%;
        display: flex;
        height: 100%;
        flex-direction: column;
        overflow: hidden;
        margin-bottom: 1rem;
    }

    .tabcontent {
        padding: 6px 12px;
        width: 100%;
        border-left: none;
        height: 100%;
    }

    .titleheader {
        font-size: 22px !important;
    }


    .titlethird {
        font-size: 14px;
    }

    .txt_para1 {
        font-size: 14px;
        letter-spacing: 0.05rem;
    }
}