/* global */
html {}
body {background: #000;color: #FFF;font-size: 14px;line-height: 23px;font-family: 'Open Sans', sans-serif;}
body a {color: #FFF;}
body a:hover {color: #FFF;}
body a:focus {outline: 0;}
.clear {clear: both;}

.btn {border-radius: 0;}


@media (max-width: 991px) {
	body {font-size: 12px;line-height: 20px;}
}

.row-30 {margin-left: -30px;margin-right: -30px;}
.row-30 > div {padding-left: 30px;padding-right: 30px;}
.row-20 {margin-left: -20px;margin-right: -20px;}
.row-20 > div {padding-left: 20px;padding-right: 20px;}
.row-10 {margin-left: -10px;margin-right: -10px;}
.row-10 > div {padding-left: 10px;padding-right: 10px;}


.btn-primary {border-radius: 0;}
.btn {border: 0;}
.btn-new {float: right;font-size: 15px;font-weight: 700;text-transform: uppercase;background: #0569B4;color: #FFF;border: 0;margin: 0 0 0 10px;border-radius: 0;}
.btn-large {padding: 15px 40px;font-size: 17px;font-weight: 700;text-transform: uppercase;background: #0569B4;color: #FFF;border: 0;}
.btn-grey {background: #333;color: #FFF;border: 0;}
.btn-orange {background: #0569B4;color: #FFF;border: 0;}
.btn--upload {background: #2C669E;color: #FFF;border-color: #2C669E;}
.btn-icon-left {margin-right: 8px;}
.btn-icon-right {margin-left: 8px;}
.btn-protocol {background: #4be733;border: 0;color: #000;}

@media (max-width: 991px) {
	.btn-new {font-size: 12px;}
	.btn-large {font-size: 12px;}
	
}
/* global */


.content-font {afont-family: 'Roboto Flex', sans-serif;}
.content {}
.content h1 {font-size: 26px;line-height: 30px;margin: 0 0 20px 0;color: #0569B4;font-weight: 400;}
.content h2 {font-size: 20px;margin: 10px 0 30px 0;color: #0569B4;}
.content h3 {font-size: 18px;margin: 15px 0 15px 0;}
.content h4 {font-size: 16px;margin: 10px 0 10px 0;}
.content img {margin: 15px 0;max-width: 100%;height: auto;}
.content img.banner {margin: 0;}
.content img.no-margin {margin: 0;}
.content img.align-left {float: left;margin: 15px 20px 15px 0;}
.content img.align-right {float: right;margin: 15px 0 15px 20px;}
.content p {margin: 15px 0 15px 0;}
.content table {border: 0;margin: 10px 0;border-collapse: collapse;max-width: 100%;}
.content table tr th {vertical-align: top;text-align: left;border: 0;padding: 4px 12px;border: 1px solid #DDD;font-size: 13px;background: #F1F1F1;color: #000;}
.content table tr td {border: 0;padding: 6px 10px;border: 1px solid #DDD;}
.content table p {margin: 0;}
.content ul {list-style: square;padding: 0px;margin: 15px 0 15px 20px;}
.content ul li {padding: 0 0 0 5px;}
.content ul li ul {margin: 5px 0 5px 20px;}
.content ol {list-style: decimal;padding: 0px;margin: 15px 0 15px 30px;}
.content ol li {padding: 1px 0 1px 25px;}
.content hr {border: 0;background: none;padding: 0;border-bottom: 1px solid #CCC;height: 1px;margin: 15px 0;}
.content small {font-size: 11px;}
.content .date {color: #888;}

.content .pagination {list-style: none;margin: 20px 0;border-radius: 0;border: 0;}
.content .pagination li {display: inline-block;padding: 0;margin: 0 3px 0 0;border: 0;}
.content .pagination li a {background: #333;color: #FFF;line-height: 30px;width: 40px;text-align: center;border: 0;display: inline-block;border-radius: 0;}
.content .pagination li a.active, .content .pagination li a:hover {background: #0569B4;}

@media (max-width: 991px) {
	.content h1 {font-size: 22px;line-height: 26px;}
	.content h2 {font-size: 18px;line-height: 24px;}
	.content h3 {font-size: 16px;line-height: 24px;}
	.content h4 {font-size: 14px;line-height: 24px;}
}

.kiosk-addon {width: 100vw;height: 100vh;overflow: hidden;position: relative;}
.kiosk-addon .section-attendance-rfid .btn {background: #fdc542;border: 0;color: #000;}
.kiosk-addon .btn-attendance-form {position: absolute;bottom: 30px;left: 30px;background: #FFF;width: 80px;height: 80px;text-align: center;line-height: 80px;color: #000;font-size: 24px;border-radius: 100%;}
.kiosk-addon .btn-attendance-form span {line-height: 80px;}



.section-attendance-container {margin: 5% auto 20px auto;max-width: 500px;width: 100%;background: #FFF;text-align: center;color: #000;}

.section-attendance-clock {padding: 40px;}
.section-attendance-clock .clock {font-size: 40px;color: #000;line-height: 70px;font-weight: 700;}


.section-attendance-rfid {background: #aed535;padding: 40px;}
.section-attendance-rfid img {float: left;margin: 0 20px 0 0;}
.section-attendance-rfid h3 {margin: 10px 0 12px 0;}
.section-attendance-rfid input {line-height: 34px;height: 34px;border: 1px solid #DDD;vertical-align: top;}
.section-attendance-rfid button {vertical-align: top;border-radius: 0;}

.section-attendance-login {margin: 30px auto 20px auto;max-width: 500px;width: 100%;padding: 40px;background: #dd241e;text-align: center;}
.section-attendance-login .fa {float: left;margin: 0 20px 0 0;font-size: 100px;border-radius: 2px solid #FFF;}
.section-attendance-login h3 {margin: 10px 0 12px 0;color: #FFF;}
.section-attendance-login input {line-height: 34px;height: 34px;border: 1px solid #DDD;vertical-align: top;}
.section-attendance-login button {vertical-align: top;border-radius: 0;}
.section-attendance-login .error {font-weight: 700;padding: 15px 0;color: #FFF;}


.section-attendance-report {margin: 30px auto 20px auto;max-width: 500px;width: 100%;padding: 40px;background: #c3f2ff;text-align: center;}
.section-attendance-report.success {background: #cfffc3;}
.section-attendance-report.error {background: #ffc3c3;}
.section-attendance-report .fa {float: left;margin: 0 20px 0 0;font-size: 100px;border-radius: 2px solid #000;}
.section-attendance-report h3 {margin: 30px 0 0 0;}