/* FONTS */
@font-face {
    font-family: "Meno Banner Condensed";
    src: url("https://maison-moderne-salesforce-community.s3.eu-central-1.amazonaws.com/sso/assets/fonts/Meno+Banner+Condensed+Regular.otf");
}
@font-face {
    font-family: "Meno Banner Condensed";
    font-style: italic;
    src: url("https://maison-moderne-salesforce-community.s3.eu-central-1.amazonaws.com/sso/assets/fonts/Meno+Banner+Condensed+Italic.otf");
}
@font-face {
    font-family: "Meno Banner";
    src: url("https://maison-moderne-salesforce-community.s3.eu-central-1.amazonaws.com/sso/assets/fonts/Meno+Banner+Regular.otf");
}
@font-face {
    font-family: "Meno Banner";
    font-style: italic;
    src: url("https://maison-moderne-salesforce-community.s3.eu-central-1.amazonaws.com/sso/assets/fonts/Meno+Banner+Italic.otf");
}
@font-face {
    font-family: "Larsseit Light";
    font-style: italic;
    src: url("https://maison-moderne-salesforce-community.s3.eu-central-1.amazonaws.com/sso/assets/fonts/Larsseit+Light+Italic.otf");
}
@font-face {
    font-family: "Larsseit Light";
    src: url("https://maison-moderne-salesforce-community.s3.eu-central-1.amazonaws.com/sso/assets/fonts/Larsseit+Light.otf");
}
@font-face {
    font-family: "Larsseit Medium";
    font-style: italic;
    src: url("https://maison-moderne-salesforce-community.s3.eu-central-1.amazonaws.com/sso/assets/fonts/Larsseit+Medium+Italic.otf");
}
@font-face {
    font-family: "Larsseit Medium";
    src: url("https://maison-moderne-salesforce-community.s3.eu-central-1.amazonaws.com/sso/assets/fonts/Larsseit+Medium.otf");
}

/* CUSTOM LAYOUT */

*,
*::before,
*::after {
    box-sizing: border-box;
}

a,
.slds-scope a.theme {
    color: #e50046;
    text-decoration: underline;
}

a:hover,
.slds-scope a.theme:hover {
    color: #e50046;
}

body {
    background-color: #ffffff;
    background-image: url("https://maison-moderne-salesforce-community.s3.eu-central-1.amazonaws.com/sso/assets/gradientbg_bg.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    font-family: "Larsseit Medium";
    margin: 0;
    min-height: 100vh;

    /* Basic reset */
    /* The URL points to the location of your SVG file */
    /* Make sure the background image covers the whole screen */
    /* Position the background image in the center */
    /* Do not repeat the background image */
}

.container {
    padding: 0;
    max-width: 1000px;
}

.page-wrapper {
    flex: 1 0 auto;
}

.cCommunityFooter,
.slds-scope .cCommunityFooter,
.slds-scope .cCommunityFooter a:hover,
.slds-scope .cCommunityFooter a:focus {
    color: #333333;
    font-family: Larsseit;
}

.flex-grow {
    flex-grow: 1;
}

h1 {
    font-family: "Meno Banner";
    font-size: calc(21px + 3.5vw);
    line-height: 1;
    margin: 0 8px;
}

header {
    background-color: #ffffff;
    border-bottom: 1px solid #bdbfbf;
    width: 100%;
}

header nav {
    display: flex;
    margin: 0px auto;
    padding: 0.5rem 20px;
    max-width: 1000px;
}


.el-left img {
    max-height: 24px;
}

.mmHighlight {
    font-style: italic;
}

.divider {
    align-self: center;
    color: #ffffff;
    text-transform: uppercase;
}

/* ! override */
.slds-scope .slds-input,
.slds-scope .slds-combobox__input-value {
    border-radius: 0.5rem !important;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1) !important;
    font-family: "Larsseit Light";
    font-size: 1rem;
    height: 45px;
}

.slds-scope .slds-form-element:not(.slds-has-error) .slds-input,
.slds-scope .slds-form-element:not(.slds-has-error) .slds-combobox__input-value,
.slds-scope .slds-form-element .slds-listbox {
    border-color: #ced4da;
}

.slds-scope .slds-form-element .slds-truncate {
    margin-top: auto;
    margin-bottom: auto; 
}

.slds-scope .slds-form-element .slds-required {
    display: none;
}

.slds-scope .slds-form-element .slds-listbox {
    border-radius: 0.5rem !important;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1) !important;
    font-size: 1rem;
    margin-top: 0;
}

.btn,
.slds-scope button.btn {
    background-color: #e50046;
    border: 1px solid #e50046;
    border-radius: 0.5rem;
    color: #ffffff;
    font-family: "Larsseit Light";
    font-size: 1rem;
    margin: 0 auto;
    padding: 10px 20px;
    text-transform: uppercase;
    transition: 0.5s ease-out;
    width: 100%;
}

.btn:hover,
.slds-scope button.btn:hover {
    background-color: #1464aa;
    border-color: #1464aa;
    color: #ffffff;
    transition: 0.5s ease-out;
}

.grid-container {
    align-content: space-between;
    display: flex;
}

.card {
    backdrop-filter: blur(25px);
    border: none !important;
    box-shadow: 0 0 24px -1px #333333;
    max-width: 350px;
    position: relative;
    transition: 0.5s ease-out;
    width: 100%;

    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.75)
    );
}

.forgotPass {
    color: #ffffff;
    text-decoration: underline;
}

.card:hover {
    background: #ffffff;
    transition: 0.5s ease-out;
}

.card:hover .forgotPass {
    color: #e50046 !important;
    transition: 0.5s ease-out;
}
.card:hover .cardHeader {
    color: #333 !important;
    transition: 0.5s ease-out;
}
.card:hover .login-button,
.card:hover .slds-scope button.login-button {
    background-color: #e50046;
    border-color: #e50046;
    transition: 0.5s ease-out;
}

.card:hover .btn.signup-button {
    background-color: #1464aa;
    border-color: #1464aa;
}

.login-button,
.slds-scope button.login-button {
background-color: rgba(229, 0, 70, 0.5);
border-color: rgba(229, 0, 70, 0.5);
}

.login-button:hover,
.slds-scope button.login-button:hover {
    background-color: #1464aa !important;
    border-color: #1464aa !important;
}

.btn.signup-button {
    background-color: rgba(20, 100, 170, 0.5);
    border-color: rgba(20, 100, 170, 0.5);
}

.btn.signup-button:hover {
    background-color: #e50046 !important;
    border-color: #e50046 !important;
}

.forgotPass {
    color: #ffffff;
    font-family: "Larsseit Light";
}

.col {
    border-left: 1px solid #cccccc;
    margin: 10px;
    padding: 20px;
}

/* Switch user in login */
.user-box {
    align-items: center;
    border: 1px solid #e50046;
    border-radius: 0.5rem;
    color: #333333;
    display: flex;
    font-family: "Larsseit Light";
    font-size: 1rem;
    margin: 0 auto;
    padding: 10px;
    text-align: left;
    transition: 0.5s ease-out;
    white-space: nowrap;
    width: 100%;
}

.user-box:hover {
    border-color: #1464aa !important;
}

.user-box-left {
    margin-right: 10px;
}

.user-box-right {
    flex: 1;
    overflow: hidden;
    display: block;
}

.user-box-right .email {
    font-size: 0.8rem;
}

.user-box .cardHeader {
    color: #ffffff;
    font-size: 0.8rem;
}

/********* MEDIA QUERIES **********/
@media (max-width: 991.98px) {
    .card {
        background: #ffffff;
        width: 100%;
    }

    .card .forgotPass {
        color: #e50046 !important;
    }

    .card .cardHeader {
        color: #333 !important;
    }

    .card .login-button,
    .card .slds-scope button.login-button {
        background-color: #e50046;
        border-color: #e50046;
    }

    .card .btn.signup-button {
        background-color: #1464aa;
        border-color: #1464aa;
    }
    
    .tab-content {
        width: 90%;
    }

    .features h1 {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .form-wrapper {
        width: 90%;
    }

    .container-s {
        width: 90%;
    }
}

@media (max-width: 575.98px) {
    .nav-item a {
        font-size: 0.7em;
    }
}

@media (max-width: 768px) {
    h1 {
        margin: 0 8px !important;
        text-align: center;
    }
}

/* signup.css */

.submitCard {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 0 24px -1px #333333;
    color: #333333;
    flex-direction: column;
    margin: 0 1rem auto;
}

.submitCard p, .submitCard .slds-scope {
    color: #333333;
    font-family: "Larsseit Light";
    font-size: initial;
}

/* ! 404 Styling */

.error-card img {
    display: flex;
    width: 50%;
}

.error-card {
    text-align: center;
}

.error-card img {
    display: flex;
    margin: 0 auto;
    width: 75%;
}

.goBack {
    color: #ffffff;
}