@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,600&display=swap');

:root {
  --navy: #242943;
  --aqua: #6fc3df;
  --aqua_fade_5: #bff4ff;
  --aqua_fade_4: #8cecff;
  --red: #cb3737;
}

.red { color: var(--red) !important; }
.white { color: #fff !important; }

.alert {
    border-radius: 0 !important;
}
.navy,
.alert-info,
.dropdown-item:active {
    color: var(--navy) !important;
}

.aqua,
.btn-link {
    color: var(--aqua) !important;
}
.form-control:focus {
    border-color: var(--aqua) !important;
}

.alert-info,
.dropdown-item:active {
    background-color: var(--aqua_fade_5) !important;
}

.alert-info {
    border-color: var(--aqua_fade_4) !important;
}

body {
    font-family: "Open Sans", sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--navy);
    text-align: left;
}

h1,
h2,
h3,
.navbar-brand {
    font-family: "Comfortaa", sans-serif;
}

h4,
h5,
h6 {
    font-family: "Open Sans", sans-serif;
}

.navbar {
    border-bottom: 1px solid #e3e3e3;
    box-shadow: none !important;
}
#app {
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
    min-height: 100vh;
}

/* Button */
input[type="submit"],
input[type="button"],
button,
.button {
    font-family: "Comfortaa", sans-serif;
    appearance: none;
    transition: 0.15s ease-in-out;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: inset 0 0 0 2px #ffffff;
    color: #ffffff;
    cursor: pointer;
    display: inline-block;
    font-size: 0.8em;
    font-weight: 600;
    height: 3.5em;
    letter-spacing: 0.25em;
    line-height: 3.5em;
    padding: 0 1.75em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

input[type="submit"]:hover, input[type="submit"]:active,
input[type="button"]:hover,
input[type="button"]:active,
button:hover,
button:active,
.button:hover,
.button:active {
    box-shadow: inset 0 0 0 2px #9bf1ff;
    color: #9bf1ff;
}

input[type="submit"]:active,
input[type="button"]:active,
button:active,
.button:active {
    background-color: rgba(155, 241, 255, 0.1);
    box-shadow: inset 0 0 0 2px #53e3fb;
    color: #53e3fb;
}

input[type="submit"].icon:before,
input[type="button"].icon:before,
button.icon:before,
.button.icon:before {
    margin-right: 0.5em;
}

input[type="submit"].fit,
input[type="button"].fit,
button.fit,
.button.fit {
    width: 100%;
}

input[type="submit"].small,
input[type="button"].small,
button.small,
.button.small {
    font-size: 0.6em;
}

input[type="submit"].large,
input[type="button"].large,
button.large,
.button.large {
    font-size: 1.25em;
    height: 3em;
    line-height: 3em;
}

input[type="submit"].next,
input[type="button"].next,
button.next,
.button.next {
    padding-right: 4.5em;
    position: relative;
}

input[type="submit"].next:before, input[type="submit"].next:after,
input[type="button"].next:before,
input[type="button"].next:after,
button.next:before,
button.next:after,
.button.next:before,
.button.next:after {
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 36px 24px;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    right: 1.5em;
    top: 0;
    vertical-align: middle;
    width: 36px;
}

input[type="submit"].next:before,
input[type="button"].next:before,
button.next:before,
.button.next:before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='36px' height='24px' viewBox='0 0 36 24' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23ffffff%3B stroke-width: 2px%3B %7D%3C/style%3E%3Cline x1='0' y1='12' x2='34' y2='12' /%3E%3Cline x1='25' y1='4' x2='34' y2='12.5' /%3E%3Cline x1='25' y1='20' x2='34' y2='11.5' /%3E%3C/svg%3E");
}

input[type="submit"].next:after,
input[type="button"].next:after,
button.next:after,
.button.next:after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='36px' height='24px' viewBox='0 0 36 24' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %239bf1ff%3B stroke-width: 2px%3B %7D%3C/style%3E%3Cline x1='0' y1='12' x2='34' y2='12' /%3E%3Cline x1='25' y1='4' x2='34' y2='12.5' /%3E%3Cline x1='25' y1='20' x2='34' y2='11.5' /%3E%3C/svg%3E");
    opacity: 0;
    z-index: 1;
}

input[type="submit"].next:hover:after, input[type="submit"].next:active:after,
input[type="button"].next:hover:after,
input[type="button"].next:active:after,
button.next:hover:after,
button.next:active:after,
.button.next:hover:after,
.button.next:active:after {
    opacity: 1;
}

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

    input[type="submit"].next,
    input[type="button"].next,
    button.next,
    .button.next {
        padding-right: 5em;
    }

}

input[type="submit"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
    background-color: #ffffff;
    box-shadow: none;
    color: #6fc3df;
}

input[type="submit"].primary:hover, input[type="submit"].primary:active,
input[type="button"].primary:hover,
input[type="button"].primary:active,
button.primary:hover,
button.primary:active,
.button.primary:hover,
.button.primary:active {
    background-color: #9bf1ff;
    color: #6fc3df !important;
}

input[type="submit"].primary:active,
input[type="button"].primary:active,
button.primary:active,
.button.primary:active {
    background-color: #53e3fb;
}

input[type="submit"].disabled, input[type="submit"]:disabled,
input[type="button"].disabled,
input[type="button"]:disabled,
button.disabled,
button:disabled,
.button.disabled,
.button:disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.25;
}



input[type="submit"].button_navy,
input[type="button"].button_navy,
button.button_navy,
.button.button_navy {
    background-color: var(--navy);
    box-shadow: none;
    color: #fff;
}

input[type="submit"].button_navy:hover, input[type="submit"].button_navy:active,
input[type="button"].button_navy:hover,
input[type="button"].button_navy:active,
button.button_navy:hover,
button.button_navy:active,
.button.button_navy:hover,
.button.button_navy:active {
    opacity: 0.85;
    color: #6fc3df !important;
    text-decoration: none;
}

input[type="submit"].button_navy:active,
input[type="button"].button_navy:active,
button.button_navy:active,
.button.button_navy:active {
    background-color: #53e3fb;
}

.container {
    background-color: white;
}

.large_icon_choices .fas {
    margin-bottom: .1em;
    font-size: 5em;
    cursor: pointer;
    color: var(--navy);
    padding: .5em;
    border: 3px solid var(--navy);
    border-radius: 10px;
    transition: 0.15s;
}

.large_icon_choices .fas:hover,
.large_icon_choices .fas.active {
    color: var(--aqua_fade_4);
    border-color: var(--aqua_fade_4);
    transition: 0.15s;
}

.alert-danger {
    background-color: #f9e2e2;
    border-color: #f5d0d0;
}

.form-control-inline {
    display: inline-block;
    width: initial;
}

.circle {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    color: #fff;
}

.green {
    background-color: #28a745;
}

.circle.circle-green {
    background-color: #28a745;
}

.circle.circle-yellow {
    background-color: #ffc107;
}

.circle.circle-red {
    background-color: #dc3545;
}

.dashboard_bold {
    font-size: 2em;
    font-weight: bold;
}

.big_number {
    font-size: 2em;
    color: #bbb;
}
.score_perfect { color: #28a745; }
.score_good { color: #F2E603; }
.score_adequate { color: orange; }