html {padding: 0; margin: 0;}
body {padding: 0; margin: 0; font-family: 'Roboto', sans-serif; position: relative; width: 100%; height: 100vh; background: #fff;}
#login {position: absolute; top: 50%; transform: translateY(-50%); left: 0; display: flex; align-items: center; justify-content: center; width: 100%;}
#frmLogin {flex: 0 1 100%; max-width: 640px; padding-left: 20px; padding-right: 20px; box-sizing: border-box;}
.container {width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start;}
.containerTop {flex: 0 1 100%; box-sizing: border-box;}
.cTLeft {width: 100%; padding: 30px 100px; box-sizing: border-box;}
.cTLeft img {width: 100%; height: auto; display: block; margin-top: 0px;}
.containerCenter {flex: 0 1 100%; padding: 2em; box-sizing: border-box; border-left: 3px solid #02b7e2; border-right: 3px solid #02b7e2; border-top: 3px solid #02b7e2; border-top-left-radius: 3px; border-top-right-radius: 3px;}
.containerBottom {flex: 0 1 100%; background: #02b7e2; padding: 1em 2em; box-sizing: border-box; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;}
p {margin: 0; font-size: 14px;}
.containerBottom p {font-size: 12px; width: 100%; text-align: center; color: #fff;}
.containerBottom a {color: #fff;}
.cCInnerLeft {float: left; width: 100%; box-sizing: border-box;}
.fieldWrapper {width: 100%; float: left; margin-bottom: 20px;}
.fieldWrapper:last-child {margin-bottom: 0px;}
.fieldWrapper p {width: 30%; float: left; text-align: right; box-sizing: border-box; padding-right: 10px; padding-top: 10px;}
.fieldWrapper input {width: 70%; float: left; box-sizing: border-box; padding: 10px; border: 1px solid #bcc1c7; background: #fff; font-family: 'Roboto', sans-serif; font-size: 14px; transition: all .3s; border-radius: 3px;}
.fieldWrapper input:focus {outline: none; border: 1px solid #02b7e2;}
.fieldWrapper input[type="submit"] {transition: all .3s; border: none; background: #02b7e2; color: #fff; cursor: pointer; float: right;}
.fieldWrapper input[type="submit"]:hover {background: #003c70;}
#twofacode, #settingsDiv {border-color: #02b7e2 !important;}
.containerPrograms {flex: 0 1 100%; max-width: 900px; padding-left: 20px; padding-right: 20px; box-sizing: border-box;}
.programsOuter {width: 100%; margin: 0; padding: 30px; background: #02b7e2; box-sizing: border-box; border-radius: 3px;}
.programsOuter p {width: 100%; float: left; color: #fff; font-size: 18px; margin-bottom: 10px;}
.programsTopButtons {width: 100%; margin-bottom: 10px;}
.programsTopButtons input {-webkit-appearance: none; -moz-appearance: none; appearance: none; background: #fff; color: #000; padding: 8px 12px; margin-right: 5px; border: none; transition: all .3s; cursor: pointer; font-size: 14px;}
.programsTopButtons input:hover {background: #eee;}
#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: #fff; box-sizing: border-box; margin-right: 10px;}
.icon:hover {background:#CCC;}
.icon img {width:48px; height:48px; display: inline-block; object-fit: contain; object-position: center;}
.floatLeft {display: block; width: 100%; color: #fff;}
.floatLeft a {color: #fff;}
#touchpadmode {color: #fff; display: block; margin-bottom: 10px;}
@media (max-width: 767px) {
    .fieldWrapper p {width: 100%; padding-top: 0; padding-right: 0; margin-bottom: 5px; text-align: left;}
    .fieldWrapper input {width: 100%;}
    .cTLeft {padding: 30px 50px;}
    .icon {flex: 0 1 calc(50% - 10px)}
}