:root {
  --color-base: #007bc0;
}

.login-sidebar {
    right: 0px;
    position: absolute;
    min-height: 100%;
    width: 100%;
    margin: 0 auto;
    background: white;
    padding-bottom: 0px;
    max-width: 400px;
}

#logo_upc {
    margin: 20px 0 25px 0;
}

body {
    font-family: "Roboto", sans-serif;
}

#content {
    background: none;
    flex: 1 1 auto;
    padding: 1.25rem;
}

/* Pantalla "Soc d'una altra organització" */
#wayfotherlogin, #qr_login {
    width: 400px;
}

#wrapper {
    overflow-y: auto;
    overflow-x: auto;
}

*/
/* Overwrite defautlt styles.css */
#content { background: none; }
#main  { width: inherit; }

/* Languages */
#langs {
    float:right;
    margin-bottom:2px;
    color: var(--color-base);
    cursor:pointer;
    margin-right: 20px;
    margin-top: 10px;
}

.highlight_lang {
    color: var(--color-base);
    font-weight: 700;
}

#blue_bar, #blue_bar_2factor {
    height: 30px;
    width:100%;
    background-color: transparent;
}

div#blue_bar, div#blue_bar_2factor {
  text-align: right;
  font-size: 80%;
  margin-right: 10px;
}

#langs span {
  margin: 0 5px;
}
/* End Languages */

.login-register {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
    width: 100%;
    position: fixed;
}

.login-twofactor {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.form-material {
    margin-left:5%;
    margin-right:5%;
}

.form-material-2factor {
    margin-left:10%;
    margin-right:10%;
}

#logo_img {
    height: unset;
    margin-top: unset;
    max-width: 100%;
    margin-left: -25px;
}
#org_logo {
    margin: auto;
    background-color: white;
    max-width: 100%;
}
#cream_bar, #cream_bar_2factor {
    background-color: unset;
    background-image: unset;
    margin-top: 15px;
}

#userpass label {
    display: none;
}
#userpass {
    margin-top: 60px;
}

#input2factor {
    text-align: center;
    background-size: 0 2px, 40% 1px;
    font-size: 2rem;
}
#content .bloque {
    margin-left: unset;
    margin-right: unset;
}

#fa-remember_button {
    color: var(--color-base);
}

#debug {
    padding-top: 15px;
}
#status_text1, #status_text2, #status_text3, #status_text4, #status_text5, #status_text6, #status_text7, #status_text8 {
    margin: 20px;
    font-size: 12pt;
}
#texto_titulo, #texto_subtitulo, #status_title, #status_subtitle, .notes_texts {
    display: none;
}

#notification_2factor_button_ok:hover {
    color: #FFF;
    background-color: var(--color-base);
    border-color: var(--color-base);
}

/* Change placeholder color */
.light-placeholder::-webkit-input-placeholder {
    color: lightgrey;
}
.light-placeholder:-moz-placeholder {
    /* FF 4-18 */
    color: lightgrey;
    opacity: 1;
}
.light-placeholder::-moz-placeholder {
    /* FF 19+ */
    color: lightgrey;
    opacity: 1;
}
.light-placeholder:-ms-input-placeholder {
    /* IE 10+ */
    color: lightgrey;
}
.light-placeholder::-ms-input-placeholder {
    /* Microsoft Edge */
    color: lightgrey;
}
.light-placeholder::placeholder {
    /* modern browser */
    color: lightgrey;
}

/* Button styles */
.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.btn-info, .btn-info.disabled {
    background: var(--color-base);
    border: 1px solid var(--color-base);
    box-shadow: 0 2px 2px 0 rgb(66 165 245 / 14%), 0 3px 1px -2px rgb(66 165 245 / 20%), 0 1px 5px 0 rgb(66 165 245 / 12%);
    transition: 0.2s ease-in;
}
.btn-rounded {
    border-radius: 60px;
}
.btn-lg {
    font-size: 1.25rem;
}
.btn-block {
    display: block;
    width: 100%;
}
.btn-group-lg>.btn, .btn-lg {
    line-height: 1.5;
}
.btn-info {
    color: #fff;
}
.btn {
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}
.btn-rounded.btn-lg {
    padding: .75rem 1.5rem;
}

#submit_ok {
    background: var(--color-base);
    border-radius: 60px;
    padding: 1rem 1.5rem;
    font-size: 1.25rem;
    text-transform: capitalize;
    margin-top: 5px;
}

#remember_button, #help_2factor_button, #notify_msg2 {
    color: var(--color-base);
    font-size: 1rem;
    font-weight: 400;
    margin-top: -5px;
}

a {
    text-decoration: none;
    color: var(--color-base);
}
a:hover {
    color: #0056b3;
}

.wayf_button_cl {
    text-align: center;
    padding-bottom: 15px;
    margin-top: -10px;
}
#wayf_button {
    display:none;
}

.remember_button_cl{
    text-align: right;
}

.help_2factor_cl {
    margin-top: 20px;
    position: relative;
    text-align: right;
}

.own-button {
    background: var(--color-base);
}

/* Footer */
#f_blue_bar {
    background-color: unset;
}
.footer {
    font-size: 80%;
    background: unset;
    color: #5e696f;
    padding: 17px 15px;
    right: 0;
    border-top: 1px solid rgba(120, 130, 140, 0.13);
    display: block;
    position: absolute;
    bottom: 0px;
    width: 100%;
    max-width: 400px;
}
.footer li {
    display: inline;
    margin-left: 10px;
}
.footer nav {
    float: right;
}

#content_bottom {
    background: unset;
}

h4 {
    line-height: 22px;
    font-size: 18px;
    color: var(--color-base);
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    margin-bottom: .5rem;
    margin-top: 0;
}
#auten_delegadas {
    text-align: center;
    border-top: 1px solid rgba(120, 130, 140, 0.13);
    margin-top: -15px;
}
#titulo_3col {
    font-weight: unset;
    margin-bottom: 1.5em;
    margin-top: 10px;
    color: #6C757D;
}
#titulo-delegadas {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: center;
}
#info-delegadas {
    color: var(--color-base);
    padding-left: 5px;
}
#otherlogin {
    text-align: left;
    margin-left: 6%;
}
.button-text {
    display: none;
}
.button-layout {
    background: none;
    border-color: #007BC0;;
    border-top-style: none;
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-style: none;
    border-left-style: none;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-repeat: initial;
    -webkit-border-radius: 1px;
    height: 36px;
}
.button-icon {
    background-position: bottom !important;
    height: 32px;
}
.module_cell {
    margin-bottom: 10px;
}
.modules_grid {
    display: table-row;
}
.label-delegadas-text {
    margin-top: -40px;
    margin-left: 107px;
    margin-bottom: 0px;
    font-size: 10pt;
    height: 50px;
    width: 245px;
    color: #007BC0;
}
.more-info {
    margin-left: 95px;
    margin-right: 130px;
    font-size: 10pt;
}
.fas-icon-message {
    font-size: 18px;
    margin-left: 5px;
    margin-right: 5px;
}
.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
    margin: 40px 25px -20px 25px;
}
.fas-icon-error {
    color: #721c24;
    margin-right: 5px;
}
.alert-danger p {
    font-size: 11pt;
    color: #842029;
    margin-bottom: 0;
}
.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
    margin: 40px 25px -20px 25px;
}
.alert-info p {
    font-size: 11pt;
    color: #0c5460;
    margin-bottom: 0;
}
.fa-info-circle {
    color: #0C5460;
    margin-right: 5px;
}

/* Maquetar finestra d'error */
.ui-corner-all {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
.ui-state-error {
    background: unset;
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
    /*margin: 40px 25px -20px 25px;*/
    margin: 40px 15px -20px 15px;
}
.error_msg {
    padding: 12px 5px 10px 12px;
    margin-bottom: 0em;
}
.error_msg p {
    font-size: 11pt;
    color: #842029;
    font-weight: 100;
    margin-bottom: 0;
}
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {
    background-image: url(../img/jqueryui/ui-icons_721c24_256x240.png);
    margin-top: 3px
}
.ui-icon-alert {
    background-position: 0 -144px;
    background-position-x: 0px;
    background-position-y: -144px;
}
.ui-icon {
    width: 16px;
    height: 16px;
    background-image: url(../img/jqueryui/ui-icons_222222_256x240.png);
}
.ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
}
.warning-icon-st {
    float: left;
    margin-right: 0.3em;
}
/* Fi maquetar finestra d'error */

.modules_grid {
    grid-template-columns: 1fr;
    -ms-grid-columns: 1fr;
}

.text_ok {
margin-top: 30px;
}

#content h1 {
    margin-top: 65px;
}

.notification h2 {
    border-top: none;
    margin-top: 50px;
}

/*==============================================================
Form Material page
============================================================== */
/*Material inputs*/
/* line 235, scss/pages/form-pages.scss */
.form-material .form-group,  .form-material-2factor .form-group {
    overflow: hidden;
}

/* line 239, scss/pages/form-pages.scss */
.form-material .form-control, .form-material-2factor .form-control {
    background-color: rgba(0, 0, 0, 0);
    background-position: center bottom, center calc(100% - 1px);
    background-repeat: no-repeat;
    background-size: 0 2px, 100% 1px;
    padding: 0;
    transition: background 0s ease-out 0s;
}

/* line 248, scss/pages/form-pages.scss */
.form-material .form-control,
.form-material .form-control.focus,
.form-material .form-control:focus,
.form-material-2factor .form-control,
.form-material-2factor .form-control.focus,
.form-material-2factor .form-control:focus {
    background-image: linear-gradient(var(--color-base), var(--color-base)), linear-gradient(#e9edf2, #e9edf2);
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    float: none;
}

/* line 258, scss/pages/form-pages.scss */
.form-material .form-control.focus,
.form-material .form-control:focus,
.form-material-2factor .form-control.focus,
.form-material-2factor .form-control:focus {
    background-size: 100% 2px, 100% 1px;
    outline: 0 none;
    transition-duration: 0.3s;
}

/* line 265, scss/pages/form-pages.scss */
.form-control-line .form-group {
    overflow: hidden;
}

/* line 269, scss/pages/form-pages.scss */
.form-control-line .form-control {
    border: 0px;
    border-radius: 0px;
    padding-left: 0px;
    border-bottom: 1px solid #f6f9ff;
}

/* line 274, scss/pages/form-pages.scss */
.form-control-line .form-control:focus {
    border-bottom: 1px solid var(--color-base);
}

/* Exception page */
.bloque_error {
    margin-left: 70px;
}

@media (max-width: 835px) {
    #no_scroll {
        overflow-x: unset;
    }
}

@media (max-width: 767px) {
    .login-sidebar {
        position: relative;
    }
    .footer {
        display:none;
    }
    .login-sidebar .footer {
        display: block;
    }
}

@media all and (max-width: 767px) and (min-width: 681px) { //para 720px, 736px y 768px
    #langs{
        font-size: 13px;
    }
    #content {
        margin-left: unset;
    }
}

@media (max-width: 680px) {
    .form-material, .form-material-2factor {
        margin-left:8%;
        margin-right:5%;
    }
}

@media all and (max-width: 490px) { //para 480px
    #langs{
        font-size: 12px;
        margin-right: 10px;
    }
    #content {
        margin-left: unset;
    }
}

@media all and (max-width: 390px) { // para 360px y 380px
    #langs{
        font-size: 11px;
        margin-right: 10px;
    }
    #content {
        margin-left: unset;
    }
    #org_logo {
        max-width: 90%;
    }
    #content .bloque {
        margin-left: 0px;
    }
    .login-sidebar {
        width: auto;
        margin: 0 auto;
        padding-bottom: 0px;
    }
}

@media all and (max-width: 339px) { // para 320px
    #langs{
        font-size: 11px;
        margin-right: 10px;
    }
    #content {
        margin-left: unset;
    }
    #org_logo {
        max-width: 75%;
    }
    #content .bloque {
        margin-left: 70px;
    }
}

@media all and (max-height: 550px) {
    .footer {
        display:none;
    }
    .login-sidebar .footer {
        display: block;
    }
}

@media (max-width: 477px) {
    #otp_buttons a {
        padding: 0.75rem 1.5rem;
    }
}