:root {--primary: #aa1122; --primary-dark: #005e99; --light-grey: #f0f0f0; --blue-grey: #dde3ec; --black: #000000; --white: #ffffff; --text: #FFFFFF;}
@font-face {font-display: swap; font-family: 'Titillium Web'; font-style: normal; font-weight: 300; src: url('/fonts/titillium-web-v17-latin-300.woff2') format('woff2');}
@font-face { font-display: swap; font-family: 'Titillium Web'; font-style: normal; font-weight: 600; src: url('/fonts/titillium-web-v17-latin-600.woff2') format('woff2');}
html {padding: 0; margin: 0;}
body {padding: 0; margin: 0; background: var(--light-grey); font-family: 'Titillium Web', sans-serif;}
p {margin: 0; font-size: 14px;}
#login {width: 100%; min-height: 80vh; display: flex; align-items: center; justify-content: center;}
#frmLogin {width: 600px; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; border-radius: 20px; overflow: hidden; box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05); margin: 0 auto;}
.containerTop {flex: 0 1 100%; background: var(--white); box-sizing: border-box; display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;}
.cTLeft {flex: 0 1 40%; padding: 0 2em; box-sizing: border-box; display: flex; align-items: center; background: var(--white);}
.cTLeft img {width: 100%; height: auto; display: block; max-height: 60px; object-fit: contain;}
.cTRight {flex: 0 1 60%; box-sizing: border-box; background: var(--primary); padding: 1em 2em; text-align: right; color: var(--text);}
.containerCenter {flex: 0 1 100%; background: var(--white); padding: 2em 4em; box-sizing: border-box; border-left: 3px solid var(--primary); border-right: 3px solid var(--primary); border-top: 3px solid var(--primary);}
.fieldWrapper {width: 100%; margin-bottom: 20px;}
.fieldWrapper:last-child {margin-bottom: 0px;}
.fieldWrapper p {margin-bottom: 10px; font-weight: bold;}
.fieldWrapper input {display: block; width: 100%; padding: 10px 22px; box-sizing: border-box; font-family: 'Titillium Web', sans-serif; font-size: 14px; border: 1px solid var(--blue-grey); border-radius: 5px; outline: none; resize: none; font-weight: lighter;}
.fieldWrapper input:focus {border-color: var(--primary); box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);}
.fieldWrapper input[type="submit"] {border: none; background: var(--primary); color: var(--text); cursor: pointer; width: auto; padding: 10px 40px;}
.fieldWrapper input[type="submit"]:hover {background: var(--primary-dark);}
.containerBottom {flex: 0 1 100%; background: var(--primary); padding: 1em 2em; box-sizing: border-box;}
.containerBottom p, .copyrightPrograms {font-size: 12px; width: 100%; text-align: center; color: var(--text);}
.copyrightPrograms {margin-top: 20px;}
.containerBottom a, .copyrightPrograms a {color: var(--text);}
.containerPrograms {background: var(--primary); padding: 2em; box-sizing: border-box; width: 100%; max-width: 800px; border-radius: 20px; box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05); margin: 0 auto;}
.containerPrograms > p {color: var(--text); margin-bottom: 20px; font-size: 16px;}
#programs {width: 100%; margin-bottom: 20px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;}
.icon {flex: 0 1 calc(16.6666666% - 10px); height: auto; text-align: center; padding: 1em; vertical-align: middle; transition: all .3s; margin-bottom: 10px; background: var(--white); box-sizing: border-box; margin-right: 10px; border-radius: 10px; pointer-events: none;}
.icon img {width:48px; height:48px; pointer-events: auto; border-radius: 5px; margin-bottom: 5px;}
.icon:hover {background: var(--blue-grey);}
.settingsPrograms {display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;}
.settingsPrograms select {padding: 6px 12px; box-sizing: border-box; font-family: 'Titillium Web', sans-serif; font-size: 14px; border: 1px solid var(--blue-grey); border-radius: 5px; outline: none; resize: none; font-weight: lighter; margin-right: 20px;}
input#multiMon {margin: 0; margin-right: 8px; width: 15px; height: 15px;}
.settingsPrograms label {color: var(--text);}
#settings {margin-left: auto; height: 30px; width: auto; display: block; cursor: pointer;}
#settings:hover {opacity: .75;}
#goback {border: none; background: var(--blue-grey); color: var(--black); cursor: pointer; width: auto; padding: 10px 40px; box-sizing: border-box; font-family: 'Titillium Web', sans-serif; font-size: 14px; border-radius: 5px; outline: none; resize: none; font-weight: lighter; margin-top: 20px;}
#goback:hover {background: var(--white);}
#twofainfo input, #twofacode input {display: inline-block; width: 45%; padding: 10px 22px; box-sizing: border-box; font-family: 'Titillium Web', sans-serif; font-size: 14px; border: 1px solid var(--blue-grey); border-radius: 5px; outline: none; resize: none; font-weight: lighter;}
#twofainfo input:focus, #twofacode input:focus {border-color: var(--primary); box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);}
#twofainfo input[type="button"], #twofacode input[type="button"] {width: auto; margin-top: 10px; border: none;}