* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.header {

    background-color: white;

    color: red;

    padding-left: 25px;

    padding-right: 50px;

    padding-top: 5px;

    padding-bottom: 5px;

}



.main-frontpage-text {

    padding: 50px;

    font-size: 80px;

    font-weight: 900;

    text-align: center;

    color: orange;

    text-shadow: 5px 5px 3px white;

}



.footer {

    color: lightgrey;

    padding: 10px;

    background-color: black;

}



.admin-login {

    width: 50%;

    margin: auto;

}



#login {

    background-color: white;

    width: 70%;

    margin: auto;

    padding: 10px;

}



#signup {

    background-color: white;

    width: 60%;

    margin: auto;

    padding: 10px;

}



#otp {

    background-color: white;

    width: 60%;

    margin: auto;

    padding: 10px;

}



.menu {

    margin: 0;

    padding: 0;

    background-color: black;

}



div.menu li {

    list-style-type: none;

    line-height: 40px;

    display: block;

    width: 100%;

    line-height: 50px;

}



div.menu a:link,

.menu a:visited {

    text-decoration: none;

    font-size: 20px;

    color: white;

    display: block;

    padding-left: 30px;

    font-weight: 600;

}



div.menu a:hover {

    background-color: rgb(245, 215, 217);

    /* rgba(202, 136, 136, 0.87) */

    color: black;

}



.active,

.active a:link,

.active a:visited {

    background-color: rgba(240, 6, 6, 0.87);

    color: white;

}



div.row .bg-secondary .class-center {

    background-color: rgba(240, 6, 6, 0.87);

}



.analytic-box {

    width: 100%;

    font-size: 40px;

    font-weight: 500;

    color: black;

    margin: 5px;

    text-align: center;

    padding-top: 50px;

    background-color: white;

}



.analytic-text {

    font-size: 25px;

    color: blue;

}



.mytext {

    font-size: 30px;

    color: black;

    font-weight: 600;

}



.box {

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}



.box2 {

    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.4);

}



.sub-features li {

    list-style-type: none;

}



.sub:hover {

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}



.subscription-layout {

    display: flex;

    padding: 20px;

}



.menu-h {

    display: block;

}



.menu-v {

    display: none;

}



.invoice-header {

    font-size: 40px;

    font-weight: 600;

}



.input [type=text] {

    border: 0;

    border-bottom: 1px solid grey;

}



.footer a:link,

a:visited {

    color: white;

}



.company-form-outer-container {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    min-height: 150%;

    background-color: rgba(0, 0, 0, 0.8);

    padding: 100px;

    display: none;

}



.page-heading {

    padding-top: 10px;

    padding-left: 20px;

    font-weight: 600;

    font-size: 40px;

}



.company-form-inner-container {

    background-color: white;

    width: 70%;

    margin: auto;

    padding: 10px;

}



#login a:link,

#login a:visited {

    color: black;

    font-size: 18px;

}



@media screen and (max-width: 800px) {



    .main-frontpage-text {

        padding: 20px;

        font-size: 50px;

        font-weight: 600;

        text-align: center;

        color: orange;

        text-shadow: 2px 2px 1px white;

    }



    #login {

        background-color: white;

        width: 100%;

        margin: auto;

        padding: 10px;

    }



    .admin-login {

        width: 100%;

        margin: auto;

        padding: 30px;

    }



    #signup {

        background-color: white;

        width: 100%;

        margin: auto;

        padding: 10px;

    }



    #otp {

        background-color: white;

        width: 100%;

        margin: auto;

        padding: 10px;

    }



    .subscription-layout {

        width: 100%;

        flex-direction: column;

    }



    .menu-v {

        display: block;

        padding: 10px;

        margin: 10px;

    }



    .menu-h {

        display: none;

    }



    .class-center {

        text-align: center;

        align-items: center;

        justify-content: center;

    }



    #dp {

        width: 30%;

        text-align: center;

        justify-items: center;

    }



    .company-form-outer-container {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        min-height: 150%;

        background-color: rgba(0, 0, 0, 0.8);

        padding: 20px;

    }



    .company-form-inner-container {

        background-color: white;

        width: 100%;

        margin: auto;

        padding: 5px;

    }



}