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

body {
    background-image: url("../images/beeah_360381786.jpg");
    color: #000;
    line-height: 2;
    font-family: "Nunito", sans-serif;
    padding: 1em;
}

h1 {
    text-align: center;
}

h3 {
    font-weight: 300;
}

.survey-form-ar h3 {
    font-weight: 300;
    text-align: right;
}

.container {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
}

.wrapper {
    box-shadow: 0 0 20px 0 rgba(72, 94, 116, 0.7);
}

    .wrapper > * {
        padding: 1em;
    }

.company-info {
    background: rgba(0, 164, 209, 0.85);
}

    .company-info img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 300px;
    }

.survey-form, .survey-form-ar {
    background: rgba(255, 255, 255, 0.85);
    padding: 1em;
}
    .survey-form .form label, .survey-form-ar .form label {
        display: block;
    }

    .survey-form .form p, .survey-form-ar .form p {
        margin: 0;
    }

    .survey-form .form input, .survey-form-ar .form input {
        width: 100%;
        padding: 1em;
    }

    .survey-form .form textarea, .survey-form-ar .form textarea {
        width: 100%;
        padding: 1em;
        resize: none;
        font-family: "Nunito", sans-serif;
        font-size: 18px;
    }

    .survey-form .form input[type=radio], .survey-form-ar .form input[type=radio] {
        border: 0px;
        width: 100%;
        height: 2em;
    }

    .survey-form .form input[type="submit"], .survey-form-ar .form input[type="submit"] {
        background: #80C242;
        border: 0;
        color: #fff;
        text-transform: uppercase;
        font-family: "Nunito", sans-serif;
        font-weight: 600;
    }

.hide {
    display: none;
}

.emoji-choices {
    list-style: none;
    padding: 0;
    text-align: center;
}

@media (min-width: 499px) {
    .emoji-choices {
        display: -webkit-box;
        display: flex;
        max-width: 1000px;
        margin: auto;
    }
}

@media (min-width: 499px) {
    .choice {
        width: 20vw;
        margin-top: 3rem;
    }
}

.emoji-1, .emoji-2, .emoji-3, .emoji-4, .emoji-5 {
    font-size: 1.5rem;
    -webkit-transition: font-size 300ms ease;
    transition: font-size 300ms ease;
    cursor: pointer;
    margin: 0;
}

.emoji-selected-1, .emoji-selected-2, .emoji-selected-3, .emoji-selected-4, .emoji-selected-5 {
    font-size: 2rem;
}

.reaction-1, .reaction-2, .reaction-3, .reaction-4, .reaction-5 {
    font-size: 1rem;
    opacity: 0;
}

.reaction-fade-in-1, .reaction-fade-in-2, .reaction-fade-in-3, .reaction-fade-in-4, .reaction-fade-in-5 {
    -webkit-animation: fadeIn 300ms ease;
    animation: fadeIn 300ms ease;
    opacity: 1;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.question {
    margin-top: 1rem;
}

.em-heart_eyes {
    background-image: url("../images/VerySatisfied.png");
}

.em-smile {
    background-image: url("../images/Satisfied.png");
}

.em-neutral_face {
    background-image: url("../images/Neutral.png");
}

.em-disappointed {
    background-image: url("../images/Unsatisfied.png");
}

.em-angry {
    background-image: url("../images/VeryUnsatisfied.png");
}

.em, .em-svg {
    height: 1.5em;
    width: 1.5em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
}

label.days {
    text-align: left;
}