/* =============================================================================
   GMAO - Login Page Styles
   ============================================================================= */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong,
sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav,
output, ruby, section, summary, time, mark, audio, video {
    margin: 0; padding: 0; border: 0 none; font: inherit; vertical-align: baseline;
}

.container-fluid { padding: 0; }

.sds-container { display: flex; flex-direction: column; }

.LoginScreen { height: 100vh; background-color: azure; }

.LoginScreen .LoginScreen-main-content { flex: 1 1 0%; }

.LoginScreen .LoginScreen-main-content .LeftPanelRow {
    position: relative; background-color: #6c757d;
}
.LoginScreen .LoginScreen-main-content .LeftPanel {
    flex: 1 1 0%; align-self: stretch; background-color: #6c757d;
}
.LoginScreen .LoginScreen-main-content .RightPanelRow {
    position: relative; background-color: #6c757d; align-items: stretch;
}
.LoginScreen .LoginScreen-main-content .RightPanel {
    flex: 1 1 0%; align-self: stretch; background-color: rgb(237, 242, 250);
}
.LoginScreen .LoginScreen-main-content .RightPanelContent {
    flex: 1 1 0%; justify-content: center; padding: 20px 0;
}

@media screen and (min-width: 320px) {
    .LoginScreen .LoginScreen-main-content { flex-direction: column; }
}
@media screen and (min-width: 768px) {
    .LoginScreen .LoginScreen-main-content { flex-direction: row; align-items: stretch; }
}
@media screen and (min-width: 320px) {
    .LoginScreen .LoginScreen-main-content .LeftPanelRow { width: 100%; height: 51px; }
}
@media screen and (min-width: 768px) {
    .LoginScreen .LoginScreen-main-content .LeftPanelRow { width: 50%; height: auto; }
}
@media screen and (min-width: 320px) {
    .LoginScreen .LoginScreen-main-content .LeftPanel {
        justify-content: center; flex-direction: row;
        border-bottom-left-radius: 30px; border-bottom-right-radius: 0;
    }
}
@media screen and (min-width: 768px) {
    .LoginScreen .LoginScreen-main-content .LeftPanel {
        justify-content: space-around; align-items: center; flex-direction: column;
        border-bottom-left-radius: 0; border-bottom-right-radius: 60px;
    }
}
@media screen and (min-width: 320px) {
    .LoginScreen .LoginScreen-main-content .RightPanelRow { width: 100%; }
}
@media screen and (min-width: 768px) {
    .LoginScreen .LoginScreen-main-content .RightPanelRow { width: 50%; }
}
@media screen and (min-width: 320px) {
    .LoginScreen .LoginScreen-main-content .RightPanel {
        border-top-right-radius: 30px; border-top-left-radius: 0; padding: 4% 6%;
    }
}
@media screen and (min-width: 768px) {
    .LoginScreen .LoginScreen-main-content .RightPanel {
        padding: 0 8%; border-top-right-radius: 0; border-top-left-radius: 60px;
    }
}

.LoginScreen .LoginScreen-main-content .LeftPanelContainerTitle {
    justify-content: center; align-items: center;
}
@media screen and (min-width: 320px) {
    .LoginScreen .LoginScreen-main-content .LeftPanelContainerTitle { display: none; }
}
@media screen and (min-width: 768px) {
    .LoginScreen .LoginScreen-main-content .LeftPanelContainerTitle { display: flex; }
}

.LoginScreen .LoginScreen-main-content .LeftPanelTitle {
    text-align: center; color: rgb(255, 255, 255);
}
.LoginScreen .LoginScreen-main-content .LeftPanelTitle:first-child { margin-bottom: 10px; }
@media screen and (min-width: 320px) {
    .LoginScreen .LoginScreen-main-content .LeftPanelTitle { display: none; }
}
@media screen and (min-width: 768px) {
    .LoginScreen .LoginScreen-main-content .LeftPanelTitle { display: flex; }
}

.LoginScreen .LoginScreen-main-content .LeftPanelIllustration { max-width: 380px; }
@media screen and (min-width: 320px) {
    .LoginScreen .LoginScreen-main-content .LeftPanelIllustration { display: none; }
}
@media screen and (min-width: 768px) {
    .LoginScreen .LoginScreen-main-content .LeftPanelIllustration { display: flex; }
}

.LoginFormWidget, .MainContent { flex: 1 1 0%; }

.sds-m-card {
    background-color: #fff; border-radius: 15px;
    box-shadow: rgba(16, 26, 49, 0.1) 0 14px 14px 3px;
    overflow: hidden; position: relative;
}
.sds-m-card .card-wrapper { padding: 20px; }
.sds-m-card .card-wrapper .card-footer { padding-top: 30px; align-items: center; }

.FormContentContainer { margin-top: 40px; margin-bottom: 10px; }
.CardLoginTitle { text-align: center; margin-top: 25px; }

.sds-word { letter-spacing: 0; color: rgb(35, 35, 35); }
.sds-word.titleSemiLarge { font-family: montserrat-bold; }
.sds-word.tinyRegular { font-family: montserrat-regular; line-height: 22px; }

@media screen and (min-width: 320px) { .sds-word.titleSemiLarge { font-size: 20px; } }
@media screen and (min-width: 1024px) { .sds-word.titleSemiLarge { font-size: 32px; } }
@media screen and (min-width: 320px) { .sds-word.tinyRegular { font-size: 11px; } }
@media screen and (min-width: 1024px) { .sds-word.tinyRegular { font-size: 12px; } }

.sds-m-field { margin-bottom: 20px; }
.sds-m-field .field-content { position: relative; }

input, textarea { box-sizing: content-box; }
input, label, select, button, textarea {
    margin: 0; border: 0 none; padding: 0;
    display: inline-block; vertical-align: middle; white-space: normal;
    background: transparent; line-height: 1; font-size: 13px;
}

.sds-text-input { flex-direction: row; align-items: center; height: 55px; padding: 0 15px; }
.sds-text-input .sds-input {
    margin: 0; border: 0 none; padding: 0; display: inline-block; vertical-align: middle;
    white-space: normal; background: transparent; line-height: 1; box-sizing: content-box;
    color: rgb(35, 35, 35); font-size: 14px; letter-spacing: 1px; width: 100%;
}
.sds-text-input .sds-input:focus { outline: currentcolor none 0; outline-offset: -4px; }

.FooterCardContainer { align-items: center; }
.sds-button-container { width: fit-content; position: relative; flex-direction: row; align-items: center; }
.login-btn { justify-content: center; }
.sds-button-container .sds-button {
    display: flex; border-width: 0; justify-content: center;
    cursor: pointer; overflow: visible; width: auto;
}
.sds-button-container .sds-button.plain {
    border-radius: 40px; padding: 12px 25px 14px; background-color: rgb(99, 209, 181);
}
.btn { padding: 12px 25px 14px; }

.ErrorAPIContent { display: flex; margin-top: 20px; align-items: center; }
.ErrorAPIMessage { color: rgb(254, 50, 34); padding-left: 10px; }

.sds-app-logo { justify-content: center; align-items: center; }
@media screen and (min-width: 320px) {
    .sds-cdmoi-icon-container.login { width: 60px; height: 37px; }
}
@media screen and (min-width: 768px) {
    .sds-cdmoi-icon-container.login { width: 170px; height: 84px; }
}