@media screen and (max-width:767px) {
    .footer .container {
        display:block!important
    }
}
.btn {
    padding:8px 20px;
    border-radius:0;
    overflow:hidden
}
.btn::before {
    position:absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(120deg,transparent,var(--primary-color),transparent);
    transform:translateX(-100%);
    transition:.6s
}
.btn:hover {
    background:0 0;
    box-shadow:0 0 20px 10px rgba(51,152,219,.5)
}
.btn:hover::before {
    transform:translateX(100%)
}
.form-input-material {
    --input-default-border-color:white;
    --input-border-bottom-color:white
}
.form-input-material input {
    color:#fff
}
.login-form {
    display:flex;
    flex-direction:column;
    align-items:center;
    color:#fff;
    background:0 0/contain #0079c0;
    border-radius:10px;
    box-shadow:0 .4px .4px rgba(128,128,128,.109),0 1px 1px rgba(128,128,128,.155),0 2.1px 2.1px rgba(128,128,128,.195),0 4.4px 4.4px rgba(128,128,128,.241),0 12px 12px rgba(128,128,128,.35);
    max-width:400px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:20px auto 0
}
.login-form h1 {
    margin:0 0 24px
}
.login-form .form-input-material {
    margin:12px 0;
    width:100%!important
}
.login-form .btn {
    width:100%;
    margin:18px 0 9px
}

:root {
    --primary-color:hsl(196, 78%, 61%);
    --secondary-color:hsl(217, 15%, 83%);
    --success-color:hsl(165, 58%, 55%);
    --info-color:hsl(214, 79%, 65%);
    --warning-color:hsl(43, 100%, 66%);
    --danger-color:hsl(354, 81%, 63%);
    --primary-color-darker:hsl(196, 68%, 54%);
    --secondary-color-darker:hsl(215, 13%, 70%);
    --success-color-darker:hsl(165, 55%, 48%);
    --info-color-darker:hsl(214, 68%, 58%);
    --warning-color-darker:hsl(39, 97%, 62%);
    --danger-color-darker:hsl(354, 67%, 56%);
    --primary-color-lighter:hsl(196, 78%, 81%);
    --secondary-color-lighter:hsl(214, 16%, 92%);
    --success-color-lighter:hsl(165, 58%, 75%);
    --info-color-lighter:hsl(214, 79%, 85%);
    --warning-color-lighter:hsl(43, 100%, 86%);
    --danger-color-lighter:hsl(354, 81%, 83%);
    --secondary-color-darkest:hsl(215, 11%, 30%);
    --secondary-color-lightest:hsl(220, 1%, 98%);
    --ease-in-quad:cubic-bezier(0.55, 0.085, 0.68, 0.53);
    --ease-in-cubic:cubic-bezier(0.55, 0.055, 0.675, 0.19);
    --ease-in-quart:cubic-bezier(0.895, 0.03, 0.685, 0.22);
    --ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);
    --ease-in-expo:cubic-bezier(0.95, 0.05, 0.795, 0.035);
    --ease-in-circ:cubic-bezier(0.6, 0.04, 0.98, 0.335);
    --ease-out-quad:cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out-cubic:cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-out-quart:cubic-bezier(0.165, 0.84, 0.44, 1);
    --ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);
    --ease-out-expo:cubic-bezier(0.19, 1, 0.22, 1);
    --ease-out-circ:cubic-bezier(0.075, 0.82, 0.165, 1);
    --ease-in-out-quad:cubic-bezier(0.455, 0.03, 0.515, 0.955);
    --ease-in-out-cubic:cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-in-out-quart:cubic-bezier(0.77, 0, 0.175, 1);
    --ease-in-out-quint:cubic-bezier(0.86, 0, 0.07, 1);
    --ease-in-out-expo:cubic-bezier(1, 0, 0, 1);
    --ease-in-out-circ:cubic-bezier(0.785, 0.135, 0.15, 0.86)
}
button,
input,
optgroup,
select,
textarea {
    font-family:inherit;
    font-size:100%;
    line-height:1.15;
    margin:0
}
@-webkit-keyframes spin {
    from {
        transform:rotate(0)
    }
    to {
        transform:rotate(1turn)
    }
}
@keyframes spin {
    from {
        transform:rotate(0)
    }
    to {
        transform:rotate(1turn)
    }
}
@-webkit-keyframes scale-in {
    from {
        transform:scale(0)
    }
    to {
        transform:scale(1)
    }
}
@keyframes scale-in {
    from {
        transform:scale(0)
    }
    to {
        transform:scale(1)
    }
}
@-webkit-keyframes scale-in-smaller {
    from {
        transform:scale(0)
    }
    to {
        transform:scale(.5)
    }
}
@keyframes scale-in-smaller {
    from {
        transform:scale(0)
    }
    to {
        transform:scale(.5)
    }
}
@-webkit-keyframes scale-out-in {
    35% {
        transform:scale(0)
    }
    70% {
        transform:scale(1)
    }
}
@keyframes scale-out-in {
    35% {
        transform:scale(0)
    }
    70% {
        transform:scale(1)
    }
}
@-webkit-keyframes fade-in {
    from {
        opacity:0
    }
    to {
        opacity:1
    }
}
@keyframes fade-in {
    from {
        opacity:0
    }
    to {
        opacity:1
    }
}
@-webkit-keyframes bounce-in {
    from {
        transform:scale(.8)
    }
    50% {
        transform:scale(1.1);
        opacity:1
    }
    to {
        transform:scale(1);
        opacity:1
    }
}
@keyframes bounce-in {
    from {
        transform:scale(.8)
    }
    50% {
        transform:scale(1.1);
        opacity:1
    }
    to {
        transform:scale(1);
        opacity:1
    }
}
@-webkit-keyframes dialog-bounce-in {
    from {
        transform:translate(-50%,-50%) scale(.8)
    }
    50% {
        transform:translate(-50%,-50%) scale(1.1);
        opacity:1
    }
    to {
        transform:translate(-50%,-50%) scale(1);
        opacity:1
    }
}
@keyframes dialog-bounce-in {
    from {
        transform:translate(-50%,-50%) scale(.8)
    }
    50% {
        transform:translate(-50%,-50%) scale(1.1);
        opacity:1
    }
    to {
        transform:translate(-50%,-50%) scale(1);
        opacity:1
    }
}
@-webkit-keyframes fade-in-bottom {
    0% {
        transform:translateY(50px);
        opacity:0
    }
    100% {
        transform:translateY(0);
        opacity:1
    }
}
@keyframes fade-in-bottom {
    0% {
        transform:translateY(50px);
        opacity:0
    }
    100% {
        transform:translateY(0);
        opacity:1
    }
}
@-webkit-keyframes heartbeat {
    from {
        transform:scale(1);
        transform-origin:center center;
        -webkit-animation-timing-function:ease-out;
        animation-timing-function:ease-out
    }
    10% {
        transform:scale(.91);
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in
    }
    17% {
        transform:scale(.98);
        -webkit-animation-timing-function:ease-out;
        animation-timing-function:ease-out
    }
    33% {
        transform:scale(.87);
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in
    }
    45% {
        transform:scale(1);
        -webkit-animation-timing-function:ease-out;
        animation-timing-function:ease-out
    }
}
@keyframes heartbeat {
    from {
        transform:scale(1);
        transform-origin:center center;
        -webkit-animation-timing-function:ease-out;
        animation-timing-function:ease-out
    }
    10% {
        transform:scale(.91);
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in
    }
    17% {
        transform:scale(.98);
        -webkit-animation-timing-function:ease-out;
        animation-timing-function:ease-out
    }
    33% {
        transform:scale(.87);
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in
    }
    45% {
        transform:scale(1);
        -webkit-animation-timing-function:ease-out;
        animation-timing-function:ease-out
    }
}
@-webkit-keyframes float-up-down {
    0% {
        transform:translateY(var(--negative-float-up-down-distance))
    }
    50% {
        transform:translateY(0)
    }
    100% {
        transform:translateY(var(--float-up-down-distance))
    }
}
@keyframes float-up-down {
    0% {
        transform:translateY(var(--negative-float-up-down-distance))
    }
    50% {
        transform:translateY(0)
    }
    100% {
        transform:translateY(var(--float-up-down-distance))
    }
}
@-webkit-keyframes blink {
    0%,
    100% {
        opacity:1
    }
    50% {
        opacity:.25
    }
}
@keyframes blink {
    0%,
    100% {
        opacity:1
    }
    50% {
        opacity:.25
    }
}
@-webkit-keyframes pulsate-fwd {
    0%,
    100% {
        transform:scale(1)
    }
    50% {
        transform:scale(1.1)
    }
}
@keyframes pulsate-fwd {
    0%,
    100% {
        transform:scale(1)
    }
    50% {
        transform:scale(1.1)
    }
}
.search-icon {
    width:1rem;
    height:1rem;
    position:relative;
    display:inline-flex;
    box-sizing:border-box;
    margin:-.25rem 0 0 -.25rem;
    color:var(--search-color);
    border:.125rem solid currentColor;
    border-radius:50%
}
.search-icon::before {
    position:absolute;
    content:"";
    top:.625rem;
    left:.75rem;
    box-sizing:border-box;
    width:.125rem;
    height:.5rem;
    background:currentColor;
    border-radius:3px;
    transform:rotate(-45deg)
}
.btn {
    --btn-padding:0.75rem 1.25rem;
    --btn-border:1px solid var(--secondary-color);
    --btn-radius:4px;
    position:relative;
    padding:var(--btn-padding);
    color:var(--btn-color,#000);
    background:var(--btn-bg,#fff);
    border:var(--btn-border);
    border-radius:var(--btn-radius);
    white-space:nowrap;
    cursor:pointer;
    background:#d52b1e!important;
    color:#fff!important;
    border:1px solid #d52b1e;
    border-radius:6px!important
}
.btn-primary {
    --btn-color:white;
    --btn-bg:var(--primary-color);
    --btn-border:1px solid var(--btn-bg)
}
.btn-primary.disabled {
    --btn-bg:var(--primary-color-lighter)
}
.btn.disabled {
    cursor:not-allowed
}
.btn.loading {
    --btn-color:transparent;
    display:flex;
    justify-content:center;
    align-items:center
}
.btn.loading::before {
    width:18px;
    height:18px;
    border-radius:50%;
    position:absolute;
    content:"";
    background:0 0;
    border:4px solid #fff;
    -webkit-clip-path:inset(0 0 50% 0);
    clip-path:inset(0 0 50% 0);
    transform:rotate(0);
    -webkit-animation:.6s linear infinite spin;
    animation:.6s linear infinite spin
}
.btn-ghost {
    --btn-color:var(--btn-bg);
    --btn-border:1px solid var(--btn-bg);
    background:0 0;
    transition:.3s
}
.btn-ghost:hover {
    --btn-color:white;
    background:var(--btn-bg)
}
.form-input-material {
    --input-default-border-color:rgba(0, 0, 0, 0.5);
    --input-invalid-border-color:var(--danger-color);
    --input-valid-border-color:var(--primary-color);
    --input-border-bottom-color:rgba(0, 0, 0, 0.3);
    position:relative;
    border-bottom:1px solid var(--input-border-bottom-color)
}
.form-input-material::before {
    position:absolute;
    content:"";
    left:0;
    bottom:-1px;
    width:100%;
    height:.125rem;
    background:#4dc1e9;
    transform:scaleX(0);
    transform-origin:left;
    transition:.3s
}
.form-input-material:focus-within::before {
    transform:scaleX(1)
}
.form-input-material label {
    position:absolute;
    top:.5rem;
    left:0;
    transition:.3s;
    transform-origin:left
}
.form-input-material .form-control-material {
    padding:.5rem 0;
    background:0 0;
    border:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    outline:0
}
.form-input-material .form-control-material:invalid~label {
    color:var(--input-invalid-border-color)
}
.form-input-material .form-control-material:valid~label {
    color:#4dc1e9
}
.form-input-material .form-control-material:placeholder-shown~label {
    color:var(--input-default-border-color)
}
.form-input-material .form-control-material:focus~label,
.form-input-material .form-control-material:not(:placeholder-shown)~label {
    transform:translateY(-120%) scale(.75)
}
.nav {
    --nav-underline-color:var(--secondary-color);
    --nav-color:black;
    --nav-active-color:var(--primary-color);
    --nav-inactive-color:rgba(0, 0, 0, 0.2);
    display:flex;
    margin:0;
    padding:0;
    list-style-type:none;
    border-bottom:1px solid var(--nav-underline-color)
}
.table tbody tr {
    border-bottom:1px solid var(--table-row-border-color)
}
.carousel {
    --carousel-width:18.75rem;
    --carousel-height:9.375rem;
    --carousel-link-width:0.5rem;
    --carousel-link-margin:0.5rem;
    --carousel-link-color:white;
    position:relative;
    width:var(--carousel-width);
    overflow:hidden
}
.block {
    display:block
}
.inline-block {
    display:inline-block
}
.inline {
    display:inline
}
.flex {
    display:flex
}
.table {
    --table-row-border-color:var(--secondary-color);
    --table-thead-color:var(--secondary-color-darkest);
    --table-thead-bg:var(--secondary-color-lightest);
    --table-td-padding:0.75rem;
    --table-td-align:left;
    border-collapse:collapse;
    display:table
}
.hidden {
    display:none
}
.static {
    position:static
}
.fixed {
    position:fixed
}
.absolute {
    position:absolute!important
}
.relative {
    position:relative
}
.sticky {
    position:-webkit-sticky;
    position:sticky
}
.visible {
    visibility:visible
}
.italic {
    font-style:italic
}
.underline {
    text-decoration:underline
}
.border {
    border-width:1px
}
.resize {
    resize:both
}