:root {
    --ViveryGreen: #00483D;
    --DarkGreen: #003535;
    --NeonLime: #E1FFB3;
    --Gray: #F1F1F1;
    --LightGray: #F9F9F9;
    --NeonBlue: #B4F9DF;
    --LightBlue: #E1FDF2;
    --NeonYellow: #FFF992;
    --LightYellow: #FFFDDC;
    --Salmon: #D4A392;
    --Apricot: #FADED0;
    --Sage: #5F9575;
    --UIPurple: #BB65AA;
    --UIBlue: #34BEBA;
    --UIGreen: #009C6A;
    --UIRed: #D15B4B;
    --UIGray: #53595f;
    --UILightGreen: #5f9575;
}

body {
    background-color: #F1F1F1;
    background-image: url('@Url.Content("~/images/SMS/vivery_neighbor_app.png")');
    background-image: url(/images/SMS/vivery_neighbor_app.png);
    background-position-x: 95%;
    background-position-y: 100%;
    background-size: contain;
    background-repeat: no-repeat;
}

h4{
    color: white !important;
}

#pantrySearch {
    margin-left: 20px;
    margin-right: 20px;
}

#SMS-signup-form {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    flex-direction: column;
}

#SMS-signup-container {
    max-width: 410px;
    padding: 36px 35px 29px;
    border-radius: 15px;
    box-shadow: 7px 7px 15px 0 rgba(64, 64, 64, 0.3);
    background-color: #00483d;
    margin: 0 0 0 0;
}

#questions-email-support, #questions-email-support a {
    color: var(--NeonLime);
    font-weight: 600;
}

#smsTextSignupInformation {
    font-family: Roobert;
    font-size: 11px;
    font-weight: 500;
    font-stretch: normal;
    font-style: italic;
    line-height: 1.45;
    letter-spacing: -0.22px;
    text-align: center;
    color: #d4a392;
}

#smsTextInformation {
    max-width: 410px;
    margin: 23px 0 0 0;
    font-family: Roobert;
    font-size: 13px;
    line-height: 1.31;
    text-align: center;
    color: var(--ViveryGreen);
}

html, body, main, #pantrySearch, #SMS-signup-form {
    height: 100% !important;
}

h4 {
    text-align: center;
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 25px;
}

@media all and (max-width:500px) {
    h4 {
        font-size: 15px;
        line-height: 19px;
    }
}

input.new-field-input {
    height: 45px;
    border-radius: 53px;
    border: solid 1px white !important;
    background-color: var(--ViveryGreen) !important;
    color: white !important;
    font-family: 'Roobert', monospace;
    outline: none;
    padding-left: 18px;
    -webkit-text-fill-color: white !important;
    font-size: 16px;
    margin-bottom: 12px !important;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: white;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: white;
}

input.new-field-input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: white;
    letter-spacing: -.32px;
    font-size: 16px;
}

input.new-field-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: white;
}

input.new-field-input::-ms-input-placeholder { /* Microsoft Edge */
    color: white;
}

input.new-field-input:hover, .field-textarea:hover {
    border: solid 1px var(--NeonLime) !important;
}

input.new-field-input:focus, .field-textarea:focus {
    border: solid 1px var(--NeonLime) !important;
    box-shadow: none;
}

input.new-field-input:active, .field-textarea:active {
    border: solid 1px var(--NeonLime) !important;
}

input.new-field-input:disabled, .field-textarea:disabled {
    border: solid 1px var(--Sage) !important;
    background-color: rgba(162, 195, 168, 0.4);
}

input.new-field-input.input-validation-error {
    border: solid 1px var(--Salmon) !important;
    background-color: #faded0;
    color: var(--UIRed);
}

.new-field-input:invalid::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--Salmon);
}

.new-field-input:invalid:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--Salmon);
}

.new-field-input:invalid::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--Salmon);
}

.k-maskedtextbox {
    padding: 0 0 0 0 !important;
    height: unset !important;
    border: none;
    font-size: 1rem;
    line-height: 1.5;
    border-width: 0;
    box-sizing: border-box;
    outline: 0;
    background: none;
    text-align: left;
    white-space: nowrap;
    display: -ms-inline-flexbox;
    display: inline-flex;
    vertical-align: middle;
    position: relative;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    flex-flow: unset;
    margin-bottom: 12px;
    outline-color: white !important;
    color: white !important;
-webkit-text-fill-color: white !important;
}
.new-field-input:hover, .field-textarea:hover {
    border: none;
}

#NavbarForm{
    display: none !important;
}

#textPhoneNumber {
    box-sizing: border-box;
    display: flex;
    flex-basis: 0%;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    flex-wrap: nowrap;
    height: 45px;
    margin-bottom: 0px !important;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    min-width: 0px;
    padding-bottom: 6px;
    padding-left: 18px;
    padding-right: 12px;
    padding-top: 6px;
    position: relative;
    width: 100%;
    color: white !important;
    -webkit-text-fill-color: white !important;
    outline-color: white !important;
}
    #textPhoneNumber::placeholder {
        color: white !important;
        -webkit-text-fill-color: white !important;
        outline-color: white !important;
    }
textPhoneNumber::selection {
    color: white !important;
}

.modal-btn, .generic-btn {
    border-radius: 9px !important;
    border: solid 1px var(--ViveryGreen) !important;
    color: var(--ViveryGreen) !important;
    background-color: var(--NeonLime) !important;
    color: #000000;
    font-weight: 500;
    font-size: 14px;
    font-family: 'Roboto Mono';
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: -0.28px;
    text-align: center;
    width: 100%;
    padding: 10px;
}

.new-generic-btn:hover {
    border: solid 1px #fff !important;
    background-color: #fff !important;
    color: var(--ViveryGreen);
}