:root { --pix-color-primario: #0d47a1; --pix-color-hover: #1353b7 }
* { box-sizing: border-box }
html, body { margin: 0; padding: 0 }
body { padding-top: 64px }

header { background-color: var(--pix-color-primario); padding: 16px; position: fixed; top: 0; left: 0; width: 100%; height: 64px; display: table; width: 100% }
header > div { display: table-cell; vertical-align: top }
header > div:first-child { font-size:0 }
header > div:not(:first-child) { width: 1%; text-align: right }
header md-select { margin: 0; }
header md-select ._md-select-value, header md-select:not([disabled]):focus ._md-select-value { color: #fff; border: none; line-height: 32px; }
header md-select:active ._md-select-value { color: #fff }
header md-select.md-default-theme:not([disabled]):focus ._md-select-value, header md-select:not([disabled]):focus ._md-select-value { color: #fff; border: none; }

.md-button { display: block; width: 100%; color: #fff; font-size: 24px; height: 64px; line-height: 64px; border-radius: 32px; font-weight: normal; letter-spacing: 2px; text-transform: none; margin: 4px }
.md-button:not(.btn-secundario) { background-color: var(--pix-color-primario); }
.md-button.md-default-theme:not([disabled]):not(.btn-secundario):hover, .md-button:not([disabled]):not(.btn-secundario):hover { background-color: var(--pix-color-hover); }
.md-button.btn-secundario { background-color: #cfd8dc }
.md-button.btn-secundario:hover { background-color: #b0bec5 }
.md-button.md-default-theme.md-primary, .md-button.md-primary{color:#fff}
md-input-container .md-input { line-height: 48px; height: 48px }

label.numNtfc {  font-size: 10px; position: absolute; line-height: 20px; right: 4px; background: red; top: 4px; width: 20px; border-radius: 10px; opacity: 1; text-align: center; font-weight: bold; }

#secLogin #divImgLogin, #secLogin #divImgPass { background-size: cover; min-height: 200px; background-position: center center; background-color: #eae8eb }
#secLogin #divImgLogin { background-image: url(/client/img/fondo-login.webp); }
#secLogin #divImgPass { background-image: url(/client/img/fondo-recuperar-pass.webp); }

#secLogin div.logo h1 { font-size: 0 }
#secLogin div.logo p { font-size: 20px; font-weight: 300; color: #263238 }
#secLogin > div.login, #secLogin > div.changePass { padding: 16px }
#secLogin .errWrapper { opacity: 0 }
#secLogin md-input-container { margin: 8px 0 }

#secLogin .activeErr { opacity: 1; -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); transform: scale(1,1); }
#secLogin .activeErr { color: #a41919; background-color: #ffd7db; border-radius: 2px; padding: 16px; margin-bottom: 20px; }

#secLogin #divRecuperarPass { text-align: right }
#secLogin #divRecuperarPass a { color: #6e6e6e; font-weight: 300; font-size: 14px; display: inline-block; text-decoration: none }
#secLogin #divRecuperarPass a:hover { color: #263238 }

#secLogin .allRights { padding-top: 32px }
#secLogin .allRights a { color: #6e6e6e; font-weight: 300; font-size: 13px; display: inline-block; text-decoration: none; padding: 8px 4px }
#secLogin .allRights a:hover { color: #263238 }
#secLogin .allRights a:not(:last-child) { margin-right: 8px }
#secLogin .allRights > div:not(:last-child) { margin-bottom: 8px }

@media only screen and (max-width:1200px) {
    #secLogin .allRights .layout-row { flex-direction: column; width: 100%; text-align: center; }
}

@media only screen and (min-width:801px) {
    #secLogin { display: table; width: 100%; height: 100% }
    #secLogin > div { display: table-cell; vertical-align: middle; width: 50% }
    #secLogin > div.login, #secLogin > div.changePass { padding: 16px 48px }
    #secLogin .allRights a { display: block }
}

@media only screen and (min-width:1201px) {
    #secLogin > div.login, #secLogin > div.changePass { padding: 16px 64px }
}