/* Colors */
/* Light Orange - F48E1E */
/* Orange - F27B19 */
/* Grey - 63656B */


* {
--background-color: #ffffff; /* Background color for the screens */
--background-image: url("https://mptrainer.s3.us-east-2.amazonaws.com/OrangeBack.jpg"); /* Background image for the screens */
--text-color: #63656B; /* Default text color */
--text-color-light: #63656B; /* Lighter text color for contrast */
--border-color: #c6c6c6; /* Default border color */
--font-family: "Aleo", sans-serif; /* Font family for the text */
--link-color: #F48E1E; /* Color for hyperlinks */
--primary-background-color: #F48E1E; /* Background color for primary elements */
--primary-color: #ffffff; /* Text color for primary elements */
--primary-border-color: none; /* Border color for primary elements */
--secondary-background-color: #63656B; /* Background color for secondary elements */
--secondary-color: #FFFFFF; /* Text color for secondary elements */
--secondary-border-color: none; /* Border color for secondary elements */
--error-color: #ff0000; /* Color for error messages */
--header-background-color: none; /* Background color for the header */
--header-height: 200px; /* Height of the header */
--logo-background-color: transparent; /* Background color for the logo */
--logo-display: block; /* Display property for the logo */
--logo-width: 200px; /* Width of the logo */
--language-selector-background-color: #ffffff; /* Background color for language selector */
--content-background-color: none; /* Background color for the main content area */
--title-font-size: 45px; /* Font size for titles */
--title-longer-font-size: 26px; /* Font size for longer titles */
--title-font-weight: 900; /* Font weight for titles */
--description-font-size: 14px; /* Font size for descriptions */
--description-font-weight: 500; /* Font weight for descriptions */
--description-line-height: 24px; /* Line height for descriptions */
--label-font-size: 14px; /* Font size for labels */
--label-font-weight: 600; /* Font weight for labels */
--input-background-color: none; /* Background color for input fields */
--input-border-color: #63656B; /* Border color for input fields */
--input-color: #63656B; /* Text color for input fields */
--checkbox-font-size: 15px; /* Font size for checkboxes */
--checkbox-font-weight: 500; /* Font weight for checkboxes */
--footer-background-color: none; /* Background color for the footer */
--footer-height: 200px; /* Height of the footer */
--footer-content-background-color: none; /* Background color for footer content */
--main-container-width-lg: 500px;
--main-container-width-sm: 90%;
}

section.content{
    box-shadow: 4px 4px 6px 0px #63656bab;
    border: 1px solid #63656B;
    border-radius: 8px;
    padding: 20px;
    background-color: #ffffff;
    height: min-content;
}

footer .powered-by {
    color: #ffffff;
}

footer .copyright {
    color: #ffffff;
}

#loginButton, #sendCodeFlowToggleButton, #sendCodeButton, #loginFlowToggleButton, #resetPasswordButton #signUpButton {
    width: 80%;
    margin: 0 10%;
    transition: 0.3s ease;
}

#loginButton:hover, #sendCodeFlowToggleButton:hover, #sendCodeButton:hover, #loginFlowToggleButton:hover, #resetPasswordButton:hover #signUpButton:hover {
    filter: brightness(85%);
}

a {
    transition: 0.3s;
}

.login .account-actions .sign-up-container .sign-up:hover, .login .account-actions .forgot-password-container .forgot-password:hover, section.content h2 a:hover {
    color: #63656B;
}

input {
    border-radius: 8px;
}