input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #f5f5f5 inset !important;
}

:root {
    --color-primary: #162A01;
    --color-border: #D0CFCB;
    --color-accent: #FFF3BD;
}
html {
    height: 100%;
}
body {
    background: white;
    color: var(--color-primary);
    font-family: 'DM Sans', sans-serif;
    font-optical-sizing: auto;
    margin: 0;
    height: 100%;
    display: flex;
}
div.form {
    background: white;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    overflow: scroll;
}
@media (max-width: 576px) {
    h1 br {
        display: none;
    }
    body {
        display: block;
    }
}
@media (min-width: 576px) {
    div.form {
        height: 100%;
        align-items: center;
        padding: 60px 20px;
        width: 33.33%;
        min-width: 500px;
    }
    .alert {
        width: auto;
        min-width: 100%;
    }
}
picture {
    width: 66.66%;
    background-image: url('/storage/wilderful.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.wrapper {
    height: 100%;
    width: 100%;
}
fieldset{
    border: 0;
    padding: 0;
    font-size: 14px;
    margin: 0 auto;
    color: rgb(33, 36, 44);
    max-width: 420px;
}
h1 {
    color: #162A01;
    font-size: 34px;
    line-height: 38px;
    font-family: "Crimson Pro", serif;
    text-align: center;
    margin: 2rem auto;
}
a {
    color: #162A01;
    font-size: 18px;
}
a:hover {
    color: rgb(33, 36, 44);
    text-decoration: underline;
}
article{
    text-align: center;
    margin: 0 auto;
    max-width: 400px;
}
img {
    display: block;
    width: 100%;
    margin: 0rem auto 3rem auto;
}
.brand {
    margin-bottom: 2rem;
}
.field {
    margin: 10px 0;
}
label {
    font-size: 14px;
    font-weight: 600;
    line-height: 30px;
}

select {
    appearance: none;
    background-color: #f5f5f5;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0.999999L7 7L13 1' stroke='%23162A01' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: calc(100% - 1rem) center;
    border: 1px solid #D9D9D9;
    border-radius: 5px;
    color: #162A01;
    display: block;
    font-size: 17px;
    font-weight: 400;
    padding: 10px 20px;
    outline: none;
    width: 100%;
}

input,
input[type="text"],
input[type="password"] {
    background: #f5f5f5;
    border: 1px solid #D9D9D9;
    box-sizing: border-box;
    color: #162A01;
    font-size: 17px;
    font-weight: 400;
    border-radius: 5px;
    line-height: 22px;
    padding: 10px 20px;
    margin-bottom: 10px;
    outline: none;
    width: 100%;
}
input::placeholder {
    color: rgba(22,42,1,0.5);
    font-weight: 400;
}
button {
    border: 0;
    border-radius: 50px;
    cursor: pointer;
    color: white;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    display: block;
    outline: none;
    font-family: "DM Sans", sans-serif;
    letter-spacing: 0.5px;
    font-weight: 400;
    font-size: 18px;
    margin: 30px 0 20px 0;
    width: 100%;
    padding: 14px;
}
button:hover {
    background-color: var(--color-primary);
}
button::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffffff' d='M13.418 7.859a.695.695 0 0 1 .978 0 .68.68 0 0 1 0 .969l-3.908 3.83a.697.697 0 0 1-.979 0l-3.908-3.83a.68.68 0 0 1 0-.969.695.695 0 0 1 .978 0L10 11l3.418-3.141z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 150%;
    background-position: 50%;
    display: inline-block;
    width: 20px;
    height: 10px;
    line-height: 10px;
    transform: rotate(-90deg);
}
.position-relative {
    position:relative;
}

.pswd-toggle {
    position: absolute;
    right: 12px;
    top: 42px;
    text-decoration: none;
}
.pswd-toggle:hover {
    text-decoration: underline;
}
.checklist {
    color: rgba(22,42,1,0.5);
    list-style: none;
    margin: 0 0 16px 0;
    padding: 0;
}
.checklist li {
    display: block;
    margin-right: 10px;
}
.checklist i {
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16.665' height='12.161' viewBox='0 0 16.665 12.161'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;stroke:%23cccccc;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px;%7D%3C/style%3E%3C/defs%3E%3Cpath class='a' d='M18.422,9l-8.54,8.54L6,13.658' transform='translate(-3.879 -6.879)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 18px;
    width: 18px;
    height: 13px;
    margin-right: 5px;
}
.checklist i.active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16.665' height='12.161' viewBox='0 0 16.665 12.161'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;stroke:%236DB700;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px;%7D%3C/style%3E%3C/defs%3E%3Cpath class='a' d='M18.422,9l-8.54,8.54L6,13.658' transform='translate(-3.879 -6.879)'/%3E%3C/svg%3E");
}

.radio-inline {
    margin: 0 30px 0 0;
}
.checkbox-list label {
    font-weight: 400;
    font-size: 18px;
    display: block;
    position: relative;
    padding-left: 30px;
    margin: 10px 0;
}
.checkbox-list label a {
    font-weight: 600;
}
.checkbox-list label input {
    position: absolute;
    left: 0;
    top: 5px;
}

input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #f5f5f5;
    margin: 0;
    font: inherit;
    color: #cdcdcd;
    width: 20px;
    height: 20px;
    border: 1px solid #D9D9D9;
    border-radius: 5px;
    display: grid;
    place-content: center;
    cursor: pointer;
    padding: 1px;
}
input[type=checkbox]::before {
    background-image: url('/assets/input-check.svg');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: .75rem;
    background-color: var(--color-primary);
    border-radius: 5px;
    content: "";
    height: 20px;
    transform: scale(0);
    transform-origin: 20% 80%;
    transition: all 0.1s ease-in-out;
    width: 20px;
}
input[type=checkbox]:checked::before {
    transform: scale(1);
}

.float-link {
    font-size: 15px;
    position: absolute;
    right: 15px;
    top: 42px;
    text-decoration: none;
}
.float-link:hover {
    text-decoration: underline;
}
.align-center {
    text-align: center;
}
.alert {
    position: relative;
    padding: 1rem;
    border: 1px solid transparent;
    border-radius: 12px;
    margin: auto auto 1rem auto;
    box-sizing: border-box;
}
.alert + form {
    margin-top: 1rem;
}
.alert.alert-danger {
    color: #4b4b4b;
    background-color: #F8E7E3;
    border-color: #F8E7E3;
}
.alert.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.invalid-feedback {
    color: #BC2B18;
}
.segmented-picker {
    color: #252525;
    font-size: 1.2rem;
    background: var(--color-accent, #d5d5d5);
    border-radius: 50px;
    display: inline-flex;
    line-height: 35px;
    position: relative;
    margin: 0 auto;
    width: auto;
    overflow:hidden;
}
.segmented-picker .slider {
    background: var(--color-primary);
    position: absolute;
    z-index: 100;
    width: 50px;
    height: 35px;
    border-radius: 50px;
    margin: 0;
    transition: left 0.4s ease-in-out;
}
.segmented-picker .d-inline-flex {
    position: relative;
    z-index: 101;
}
.segmented-picker a {
    color: var(--color-primary);
    flex: 1;
    padding: 0.2rem 1.5rem;
    transition: color 0.4s ease-in-out;
    text-decoration: none;
}
.segmented-picker a.active,
.segmented-picker a:hover {
    color: white;
    text-decoration: none;
}

form {
    display: none;
}
.js-show {
    display: block;
}