@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root {
    --harel-blue: #ACDFFF;
    --harel-blue-hover: #7bc9f9;
    --harel-blue-active: #38acf5;
}

* {
    font-family: "Rubik", sans-serif;
}

header,
footer {
    height: 8%;

    @media screen and (width <= 1100px) {
        height: unset;
    }
}

body {
    display: flex;
    flex-flow: column nowrap;
    
    height: 84%;

    @media screen and (width <= 1100px) {
        height: unset;
    }
}

#pojo-a11y-toolbar {
    display: none;
}

.bg-harel-blue {
    background-color: var(--harel-blue);
}

.text-harel-blue {
    color: var(--harel-blue);
}

.btn-harel-outline {
    border: 3px solid black;

    /* padding: 5px 40px; */
    
    color: black;
    text-decoration: none;

    &:hover {
        color: black;
    }
}

.logo-container {
    /* padding: 70px 60px 90px 60px; */
    margin: 0 0 -80px 0px;
    border-radius: 0px 0px 380px 380px;

     @media screen and (width <= 768px) {
        & {
            padding: 30px;
            margin: 0 0 -30px 0px;
        }
    }
}

.main-image-container {
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(./assets/images/desktop-bg.png);

    @media screen and (width <= 768px) {
        & {
            background-image: url(./assets/images/mobile-bg.png);
            background-size: 100%;
            background-position: unset;
        }
    }
}

.form-control {
    border-color: black !important;

    box-shadow: none !important;
}

.btn-harel-blue {
    background-color: var(--harel-blue);
    outline: none;
    border: none;
    filter: drop-shadow(1px 2px 3px #00000040);

    &:hover {
        background-color: var(--harel-blue-hover);
    }

    &:active {
        background-color: var(--harel-blue-active);
    }

    &:disabled {
        cursor: wait;
        background-color: gray !important;
    }
}

.form-container {
    border-radius: 380px 380px 0 0;
}

.form-control.is-valid, .was-validated .form-control:valid {
    background-image: none !important;

    border-color: none !important;

    padding: 5px 8px !important;
}

.form-control.is-invalid, .was-validated .form-control:invalid {
    background-image: none !important;

    border-color: red !important;

    padding: 5px 8px !important;
}

#formContainer,
#thankYouNote {
    min-width: 484px;
    padding: 28px 78px;
    margin-bottom: -1px;

    @media screen and (width <= 768px) {
        & {
            padding: 64px 56px;
            padding-bottom: 40px;
            min-width: unset;
        }
    }
}

.main-row {
    @media screen and (width <= 768px) {
        & {
            padding-top: 32px;
        }
    }
}