body {
    font-family: Arial, Helvetica, sans-serif;
}

.main__content {
    margin-left : 14%;
    margin-right: 10%;
    width       : 80%;
    margin-top  : 5%;
    height      : 100%;
}

label {
    font-size: 12px;
}

input,
label {
    display: flex;
    color  : gray;
}

input {
    margin-bottom   : 15px;
    border-radius   : 5px;
    outline         : none;
    height          : 25px;
    border          : 1px solid gray;
    background-color: rgb(236, 236, 236);
}

input:focus {
    border: 1px solid black;
}

p {
    color    : gray;
    font-size: 20px;
}

.input.eighty {
    width: 80%;
}

.input.fifty {
    width: 50%;
}

.input__wrapper {
    float: left;
}

.input.twenty {
    width: 10%;
}

.input.hundret {
    width: 100%;
}

textarea {
    width           : 80%;
    height          : 100px;
    resize          : none;
    color           : gray;
    background-color: rgb(236, 236, 236);
    border-radius   : 5px;
}

textarea:focus {
    border : 1px solid black;
    outline: none !important;
}

.sub__head {
    color    : gray;
    font-size: 16px;
}

.btn {
    height       : 35px;
    font-size    : 20px;
    width        : 200px;
    margin-bottom: 75px;
    border-radius: 5px;
    outline      : none;
    border       : 1px solid gray;
}

.btn:hover {
    cursor          : pointer;
    background-color: rgb(236, 236, 236);
}

.checkbox:checked:before {
    accent-color: rgb(236, 236, 236);
}

.checkbox:checked {
    accent-color: rgb(236, 236, 236);
}

.modal {
    display         : none;
    /* Hidden by default */
    position        : fixed;
    /* Stay in place */
    z-index         : 1;
    /* Sit on top */
    padding-top     : 100px;
    /* Location of the box */
    left            : 0;
    top             : 0;
    width           : 100%;
    /* Full width */
    height          : 100%;
    /* Full height */
    overflow        : auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin          : auto;
    padding         : 20px;
    border          : 1px solid #888;
    width           : 80%;
    text-align      : center;
    border-radius   : 5px;
}

/* The Close Button */
.close {
    color      : #aaaaaa;
    float      : right;
    font-size  : 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color          : #000;
    text-decoration: none;
    cursor         : pointer;
}

.main__img {
    width:5%;
    height:5%;
}