/*!***********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/styles/main.css ***!
  \***********************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap);
/*!********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/styles/button/button.css ***!
  \********************************************************************************/
button {
    font-family: "Roboto", sans-serif;
}

.btn-normal {
    font-size: 15px;
    padding: 10px 25px;
    border-radius: 5px;
    background-color: #ffffff;
    border: 0;
    transition-duration: 0.3s;
}

.btn-alternative-one {
    color: white;
    font-size: 15px;
    padding: 20px 70px;
    border-radius: 30px;
    background-color: var(--replicate-green);
    border: 0;
    transition-duration: 0.3s;
}

.btn-alternative-one:hover:enabled {
    background-color: var(--replicate-green-alt);
}

.btn-alternative-two {
    color: white;
    font-size: 15px;
    padding: 20px 70px;
    border-radius: 30px;
    background-color: black;
    border: 0;
    transition-duration: 0.3s;
}

.btn-alternative-two:hover:enabled {
    background-color: #3b3b3b;
}

.btn-alternative-three {
    font-size: 15px;
    padding: 10px 25px;
    border-radius: 5px;
    background-color: var(--replicate-green);
    border: 0;
    transition-duration: 0.3s;
}

.btn-next {
    color: white;
    font-size: 15px;
    padding: 20px 70px;
    border-radius: 30px;
    background-color: #858585;
    border: 0;
    transition-duration: 0.3s;
}

.btn-next:hover:enabled {
    color: white;
    font-size: 15px;
    padding: 20px 70px;
    border-radius: 30px;
    background-color: #6e6e6e;
    border: 0;
    transition-duration: 0.3s;
}

.btn-login {
    font-size: 15px;
    color: black;
    border-radius: 30px;
    background-color: #dddddd;
    padding: 15px 100px;
    border: 0 solid;
    transition-duration: 0.3s;
}

button:hover:enabled {
    background-color: var(--replicate-green-alt);
    color: white;
}

button:disabled {
    background-color: #efefef;
    color: white;
}
/*!***************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/styles/main.css (1) ***!
  \***************************************************************************/
:root {
    --replicate-blue:#49aee2;
    --replicate-green: #19ab5c;

    --replicate-blue-alt: #399bcd;
    --replicate-green-alt: #0f8245;

    --error: #DD2C00;
}

body {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    line-height: 300%;
    margin: 0;
    background-color: #ffffff;
}

h1 {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 70px;
}

h2 {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 50px;
}

p {
    font-family: "Roboto", sans-serif;
    font-size: 50px;
}

body.replicate-gradient {
    /* background-image: linear-gradient(45deg, var(--replicate-blue) 20%, var(--replicate-green) 80%);  */
    background-repeat: no-repeat; 
    background-attachment: fixed;
}

/* Hyperlink styles */

a {
    color: white;
    font-weight: bold;
    text-decoration: none;
    transition-duration: 0.3s;
}

a:hover {
    color: var(--replicate-green);
    text-decoration: none;
}

.a-alt {
    color: var(--replicate-green);
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-color: var(--replicate-green);
    text-decoration-thickness: 3px;
    font-weight: bold;
    transition-duration: 0.3s;
}

.a-alt:hover {
    color: var(--replicate-green-alt);
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-color: var(--replicate-green-alt);
    text-decoration-thickness: 3px;
}

.left-divide {
    margin-left: 10px;
}

.absent-bar {
    margin-top: 60px;
}

.divide-petite {
    margin-top: 15px;
}

.divide-small {
    margin-top: 20px;
}

.divide-medium {
    margin-top: 50px;
}

.divide-large {
    margin-top: 100px;
}

.recaptcha-container {
    display: inline-block;
}

.small-text {
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

.medium-text {
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    line-height: 1.2;
}

.large-text {
    font-family: "Roboto", sans-serif;
    font-size: 35px;
    line-height: 1.2;
}

/* Form styles */

span.textbox {
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    padding: 0 20px;
    display: inline-block;
    border: 0 solid;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #f5f7fa;
    margin: 8px 0 20px;
}

input[type=text], input[type=email], input[type=number], input[type=password] {
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    padding: 9px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 0 solid;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #f5f7fa;
    outline-width: 0;
}

input[type=file] {
    display: none;
}

.birthday, .birthmonth {
    width: 100px;
}

.birthyear {
    width: 110px;
}

label {
    font-family: "Roboto", sans-serif;
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 40px;
    padding-top: 10px;
}

.label-alt {
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    line-height: 1.2;
}

::-moz-selection {
    color: black;
    background: #d7e1ec;
}

::selection {
    color: black;
    background: #d7e1ec;
}

.form-group {
    text-align: center;
    width: auto;
    position: relative;
}

.validation-error {
    position: absolute;
    font-size: 15px;
    line-height: 1.2;
    left: 20px;
    bottom: 1px;
    color: var(--error);
}

.validation-error-select {
    /* Created as a separate error class just
    in case it needs changing independently. */
    position: absolute;
    margin-bottom: 15px;
    font-size: 15px;
    line-height: 1.2;
    left: 120px;
    bottom: 1px;
    color: var(--error);
}

/* Image styles */

#logo {
    height: 300px;
}

#account-container {
    width: 200px;
    height: 200px;
    position: relative;
}

#account-symbol {
    width: 100%;
}

#check-circle {
    position: absolute;
    z-index: 10;
    top: 95%;
    left: 95%;
    transform: translate(-95%, -95%);
    filter: invert(22%) sepia(11%) saturate(0%) hue-rotate(148deg) brightness(104%) contrast(98%);
}

/* Popup styles */

#popup {
    visibility: hidden;
    min-width: 250px;
    max-width: 250px;
    background-color: #819bf7;
    color: #fff;
    text-align: center;
    padding: 20px 15px;
    border-radius: 15px;
    border: 0;
    position: fixed;
    z-index: 1;
    top: 5%;
    right: 5%;
    font-size: 15px;
    line-height: 1.3;
}

#popup.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Loading screen */
#loading-screen {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: #efefef;
    /* Ensure loading screen is on top */
    z-index: 5000;
}

/* Fade in/out animation styles */

@-webkit-keyframes fadein {
    from {opacity: 0;}
    to {opacity: 0;}
}

@keyframes fadein {
    from {opacity: 0;}
    to {opacity:1 ;}
}

@-webkit-keyframes fadeout {
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes fadeout {
    from {opacity: 1;}
    to {opacity:0 ;}
}

/* Scroll bar styles */

*::-webkit-scrollbar {
    width: 10px;
}

*::-webkit-scrollbar-track {
    background: #f1f1f1;
}

*::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background: #dddddd;
}

*::-webkit-scrollbar-thumb:hover {
    background: #b7b7b7;
}