body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    /* background-image: url("background.gif");
     */
    background-color: white;
    background-position: center;
    background-repeat: repeat-y;
    background-size: cover;
}

a {
    text-decoration: none;
}

.logo_login_mobile {
    position: relative;
    width: 70vw;
    height: 18vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2vw;
    /* background-color: black; */
    /* color: white; */
    border-radius: 49%;
    font-size: 2vw;
    text-align: center;
    padding-top: 4vw;
    padding-bottom: 2vw;
    margin-bottom: 12vw;

}

.logo_login {
    position: relative;
    width: 20vw;
    height: 6vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2vw;
    /* background-color: black; */
    /* color: white; */
    border-radius: 49%;
    font-size: 2vw;
    text-align: center;
    padding-top: 4vw;
}

.login_form {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 5vw;
}

.login_label {
    font-size: 1.5vw;
}

.login_label_mobile {
    font-size: 5vw;
}

.login_input {
    font-size: 1.5vw;
    width: 20vw;
    height: 5vw;
    background-color: lightgray;
    border-radius: 5vw;
    border-color: lightgray;
    border: 0vw;
    padding-left: 1vw;
    padding-right: 1vw;
}

.center_3col {
    font-size: 1.25vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-content: stretch;
    justify-content: space-evenly;
    align-items: center;
    justify-items: center;
}

.center_3-3col {
    font-size: 1.25vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    align-content: stretch;
    justify-content: space-evenly;
    align-items: center;
    justify-items: center;
}

.login_input_mobile {
    font-size: 5vw;
    width: 70vw;
    height: 10vw;
    background-color: lightgray;
    border-radius: 5vw;
    border-color: lightgray;
    border: 0vw;
    padding-left: 1vw;
    padding-right: 1vw;
}

.login_button_mobile {
    font-size: 4vw;
    width: 45vw;
    height: 11vw;
    background-image: linear-gradient(to right,
            #099200,
            #00c31abd,
            #34cb16ab,
            #2bff00c8);
    box-shadow: -8px 13px 15px 0 rgb(59 141 36 / 75%);
    border-radius: 5vw;
    border-color: lightgray;
    border: 0vw;
    margin-top: 5vw;
}

.login_button {
    font-size: 1.5vw;
    width: 20vw;
    height: 5vw;
    background-image: linear-gradient(to right,
            #099200,
            #00c31abd,
            #34cb16ab,
            #2bff00c8);
    box-shadow: -8px 13px 15px 0 rgb(59 141 36 / 75%);
    border-radius: 5vw;
    border-color: lightgray;
    border: 0vw;
}

.center_2-5col {
    font-size: 1.25vw;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
}

.center_2-4col {
    font-size: 1.25vw;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    width: 100%;
}

.center_2-1col {
    font-size: 1.25vw;
    position: relative;
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
}

.center_1-4col {
    font-size: 1.25vw;
    position: relative;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(4, 1fr);
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
}

/* .center_vert{
    grid-row: span 5;
    grid-area: 1 / 1 / 2 / 5;
} */

.center_3-4col {
    font-size: 1.25vw;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
}

.asset_QR {
    grid-row: span 5;
}

.asset_grid {
    grid-area: 4 / 1 / 5 / 2;
}

.test1 {
    grid-area: 1 / 1 / 2 / 3;

}

.test2 {
    grid-area: 2 / 1 / 3 / 2;

}

.test3 {
    grid-area: 2 / 2 / 3 / 3;
}

.test4 {
    grid-area: 3 / 1 / 4 / 2;
}

.test5 {
    grid-area: 3 / 2 / 4 / 3;
}

.test6 {
    grid-area: 4 / 1 / 5 / 2;
}

.test7 {
    grid-area: 4 / 2 / 5 / 3;
}

.center_screen {
    /* font-size: 1.25vw; */
    /* position: relative; */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    grid-row-gap: 5vh;
}

.icons {
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: helvetica;
    font-weight: 600;
    height: 9vw;
    width: 19vw;
    /* text-shadow: 0px 0px 5px rgb(255, 255, 0); */
    border-radius: 2vw;
    color: Black;
    text-align: center;
    padding-top: 6.5vw;
    margin-top: 7.5vw;
    cursor: pointer;
    border: none;
    background-size: 300% 100%;
    transition: all .4s ease-in-out;
    flex-wrap: wrap;
    align-content: center;
    font-size: 1.5vw;
}

.icons:hover {
    background-position: 100% 0;
    color: black;
    transform: scale(1.05);
    transition: all .4s ease-in-out;
}

.icons:focus {
    outline: none;
}

.icons {
    background-image: linear-gradient(to right,
            #099200,
            #00c31abd,
            #34cb16ab,
            #2bff00c8);
    /* background-image: linear-gradient(to right, #3B2F2F, #7B3F00, #4A0100, #635147); */
    box-shadow: -8px 13px 15px 0 rgb(59 141 36 / 75%);
    /* color: white; */
}


.header {

    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    align-content: center;
    width: 100%;
    height: 10vw;
    box-shadow: 0 0 15px black;
    text-align: center;
    background-color: rgb(214 214 214);
    border-bottom: 3px solid black;
}

.header_logo {
    grid-area: 1 / 2 / 2 / 3;

}

.username {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    grid-area: 2 / 2 / 3 / 3;
    /* padding-top: 2%; */
    align-items: center;
    color: green;
    font-size: 1.5vw;
    padding-top: 2%;
    /* padding-left: 4%; */
}

.back_button {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    grid-area: 1 / 3 / 3 / 4;
    grid-row: span 2;
    margin-top: 1vw;
}

.input_username {
    font-size: 1.5vw;
    width: 20vw;
    height: 3vw;
    background-color: #bababa;
    border-radius: 5vw;
    border-color: lightgray;
    border: 0vw;
    padding-left: 1vw;
    padding-right: 1vw;
    text-align: center;
}

.form {
    position: relative;
    text-align: center;
    border: 3px solid #845131;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    border-radius: 2vw;
    /* padding-bottom: 5%; */
    background-color: whitesmoke;

}

.text_input {
    text-rendering: auto;
    color: fieldtext;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    /* display: inline-block; */
    text-align: start;
    appearance: auto;
    -webkit-rtl-ordering: logical;
    resize: auto;
    cursor: text;
    overflow-wrap: break-word;
    background-color: field;
    column-count: initial !important;
    box-sizing: border-box;
    margin: 0em;
    border-width: 3px;
    border-style: solid;
    border-color: #459d00;
    box-shadow: 0px 8px 30px 0 rgb(38 174 0);
    border-image: initial;
    padding: 2px;
    white-space: pre-wrap;
}

.form_input {
    font-size: 1.25vw;
    width: 20vw;
    height: 3vw;
    background-color: lightgray;
    border-radius: 5vw;
    border-color: lightgray;
    border: 0vw;
    padding-left: 1vw;
    padding-right: 1vw;
    text-align: center;
}

.table_input {
    font-size: 1.5vw;
    width: 15vw;
    height: 3vw;
    margin-bottom: 1vw;
    background-color: lightgray;
    border-radius: 5vw;
    border-color: lightgray;
    border: 0vw;
    padding-left: 1vw;
    padding-right: 1vw;
    text-align: center;
}

.form_btn {
    font-size: 1.5vw;
    width: 20vw;
    height: 3vw;
    margin-bottom: 1vw;
    /* background-color: green; */
    border-radius: 5vw;
    /* border-color: green; */
    border: 0vw;
    padding-left: 1vw;
    padding-right: 1vw;
    text-align: center;
}

.form_btn:hover {
    background-position: 100% 0;
    color: black;
    transform: scale(1.05);
    transition: all .4s ease-in-out;
}

.form_btn:focus {
    outline: none;
}

.form_btn {
    background-image: linear-gradient(to right,
            #099200,
            #00c31abd,
            #34cb16ab,
            #2bff00c8);
    box-shadow: -8px 13px 15px 0 rgb(59 141 36 / 75%);
}

.inspec_btn {
    background-image: linear-gradient(to right,
            #099200,
            #00c31abd,
            #34cb16ab,
            #2bff00c8);
    box-shadow: -8px 13px 15px 0 rgb(59 141 36 / 75%);
}

.page {
    grid-area: 1 / 1 / 3 / 2;
    grid-row: span 2;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    /* float: left; */
    color: green;
    font-size: 3vw;
    /* padding-top: 2%;
    padding-left: 4%; */
}

@media (max-width:700px) {
    .icons {
        height: 30vh;
        width: 65vw;
        font-size: 1.7rem;
        display: flex;
        justify-content: center;
    }

    .center_screen {
        grid-template-columns: repeat(1, 1fr);
    }

    form>.center_screen {
        grid-template-columns: repeat(2, 1fr);
    }

    .center_3col {
        grid-template-columns: repeat(1, 1fr);
        font-size: inherit;
    }

    #back_button {
        height: 7vh;
        width: 25vw;
        /* padding-top: 1vh; */
    }

    select.form_input {
        height: 10vh;
        width: 20vw;
        font-size: 2em;
    }

    input.form_btn,
    button.form_btn,
    input.form_input {
        width: 25vw;
        height: 10vh;
        font-size: 5vw;
    }

    .form_input1 {
        font-size: 3.5vw;
        width: 20vw;
        height: 9vw;
        width: 80vw;
    }
}