k/*
	**********************************
	**** CSS by Cwmni Cynnal 2016 ****
	**********************************
*/

/* font imports */
@font-face {
    font-family: AileronLight;
    src: url('Content/AileronLight.ttf');
}
@font-face {
	font-family: AileronLight;
	src: url("Content/AileronLight.eot"); /* EOT file for IE */
	src: url('Content/AileronLight.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
}

/* font imports */
@font-face {
    font-family: openSans;
    src: url('OpenSans-Light.ttf');
}
@font-face {
	font-family: openSans;
	src: url("OpenSans-Light.eot") /* EOT file for IE */
}
/* end font import */

/* Defaults */

html,body { margin: 0px; padding: 0px; } /* height:100$ */
body{
	font-family:openSans, Arial;
	width:100%;	
	background:#1d2e3e;
	color:#FFFFFF;
	letter-spacing: 1px;
	font-size:20px;
}

#the_time, .langSwitch{
    margin-top:5px !important;
}

.noOverflow{
    overflow-x:unset !important;
    overflow-y:unset !important;
}

.square img {
    border: 2px solid white;
    border-radius: 5px;
}

.circle img {
    border: 2px solid white;
    border-radius: 50%;
}

#hiddenSchoolLogo{
    margin-bottom:10px;
}

#bodyWrapper {
    height: 100%;
    text-align: center;
}

.hidden{
    display:none;
}
.dateLabel{
    font-size:14px;
    margin-bottom:5px;
    margin-top:5px;
}

.wrappedIcon .fa-user {
    padding: 16.2% 17%;
    width: 30%;
    margin: 0px;
    height: 100%;
    background-color: #18aa9d;
    border-radius: 50%;
    margin-bottom:10px
}

.systemAdminMargin {
    display: block;
}

.customCss{
max-width:100% !important;
display:block !important;
width:100% !important;
max-width:400px;
}

#uploadWrapper{
    vertical-align:top;
    margin-bottom:20px;
    max-width:300px;
}

#uploadWrapper input[type="file"]{
    font-size: 16px !important;
}

#logoSmall{
    max-width:150px;

    border:2px solid black;

}

.miniVisitorLogo {
    width: 26px !important;
}

#logoRight img{
    width:85px;
    margin-left:10px;
}

#logoRight.square img {
    border: 2px solid white;
    border-radius: 5px;
}


    #logoRight.circle img {
    border: 2px solid white;
    border-radius: 50%;
}
#logoLeft{
    max-width:157px;
    text-align:center;
    font-size:16px;
}

.leftLogoWrapper{
    font-size:16px;
}

#logoLeft img {
    width: 80px !important;
    margin-left: 10px;
}

#logoLeft.square img {
    border: 2px solid white;
    border-radius: 5px;
}

#logoLeft.circle img {
    border: 2px solid white;
    border-radius: 50%;
}

.customCss textarea{
    width:100%;
    height:180px;
    max-width:600px !important;
}

.popup_field 
{
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.7);
    z-index: 5;
    width: 100%;
    height: 100%;
    display: none;

    text-align:center;
}

.popup_field img{
    margin:10px;
    max-height:80%;
    max-width:95%;
}

.bigIconWrapper {
    background-color: #17aa9d;
    border-radius:50%;
    font-size:70px;
    padding:6.5% 7%;
    margin-left:auto;
    margin-right:auto;
}

#svgLogo{
    max-width:160px;
    max-height:80px;
}

.rounded_menu_item fa-user {
    margin:0px;
}
.close_button_wrapper {
    width: 100%;
    margin-top: 5px;
}
.close_popup{
    font-size:30px !important;
    padding:10px !important;
}

#cacheWarning {
    background-color: #ffed6a;
    padding: 5px;
    font-size: 14px;
    color: black;
}

.pass {
    -webkit-print-color-adjust: exact;
    background-color: #1D2E3E;
    color: black;
    margin: 10px;
}

#mediumPass .pass{
    color:white;
}

.pass h1{
    font-size:22px !important;
}
.pass h2{
    font-weight:normal;
    font-size:12px;
    margin-bottom:5px;
}

.leftSvg:not(.bigMobileLogo){
    max-width:30px !important;
    max-height:14px !important;
}

#logo_section a, #logo_section a:visited{
    color:white;
}

#mediumPass #pass_leftSide{
    width:120px;
    display:inline-block;
}

#pass_rightSide {
    display: inline-block;
    width: 230px;
    vertical-align: top;
}

#mediumPass{
    width:380px;
    height:220px;
}

#pass_code {
    font-family: 'Fira Code', monospace !important;
    font-size:28px;
}

.pass hr{
    margin-bottom:10px;
}

#pass_top {
    background-color: white;
    padding: 5px 5px;
    border: 7px solid #1D2E3E;
    border-bottom: 0px;
}

#mediumPass #pass_top {
    background-color: white;
    border: 7px solid white;
}
#pass_bottom {
    margin-top: 10px;
    border-top: 5px solid #1D2E3E;
}

#mediumPass #passBottom {
    border-top: 5px solid white;
}

#pass_bottom img{
    max-width:70px;
    max-height:70px;
    display:inline-block;
    margin-left:10px;
    vertical-align:middle;
}

#logoName{
    color:white;
    vertical-align:middle;
    padding-left:7px;
    font-size:16px;
}




.homeButton {
}

#overlay{
	position:fixed;
	top:0;
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, 0.8);
	z-index: 1000;
}

.errorTerms{
    max-width:initial !important;
    padding:1px !important;
    margin:0px !important;
    margin-top:5px !important;
    display:inline-block;
    padding-right:30px !important;
}


.bodyWrapper{
    text-align:left;
    line-height:initial !important;
}

.bodyWrapper ul{
    margin-top:10px;
    margin-bottom:10px;
    padding-left:30px;
}

.bodyWrapper li {
    margin-top: 10px;
    margin-bottom: 10px;
}

.bodyWrapper h2{
    font-size:24px;
    margin-bottom:30px;
}

.bodyWrapper h3 {
    
    margin-bottom: 30px;
}

h3 {
    margin-top: 10px;
}

.filter.main{
    margin-right:7px;
}

.termsConditionsWrapper h3 {
    margin-top:20px;
    margin-bottom: 10px;

}

.termsConditionsWrapper {
    margin-bottom: 30px;
    font-size: 16px;
    max-height: 500px;
    overflow: auto;
}

*:focus {
    outline: none;
}
.hideden{
	display:none
}
.clear{
	clear:both;
	margin:0%;
	padding:0%;
	float:none;
}
.float-left{
	float:left;
}
.float-right{
	float:right;
}
.abs{
	position:absolute;
}
.rel{
	position:relative;
}
.fixed{
	position:fixed;
}
.full-width{
	width:100%;
}

.connError{

    padding:10px !important;
}
.site_margin{
	margin:0% 15% 0% 15%;
}
.top_bottom_padding{
	padding:10px 0px 10px 0px;
}
.text-right{
	text-align:right;
}
.text-left{
	text-align:left;
}
.text-center{
	text-align:center;
}
.capitals{
	text-transform:uppercase;
}
.bold{
	font-weight:bold;
}
.pointer{
	cursor:pointer;
}
a, a:hover, a:active, a:focus, a:visited{
	text-decoration:none;
	color:#18aa9d;
}
/* end Defaults */

/* Inputs */
.label{
	margin-bottom:5px;
}

.checkboxDescription{
    font-size:16px;
}

.buttonTd .filter{
    margin:0px !important;
}

.adminFullWidthTable .buttonTd {
    text-align: right !important;
}

table{
    min-width:500px;
}

.buttonTd {

    padding: 0px;
}

.warning {
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #fff3cd;
    color: #856404;
    padding: 7px 10px;
    font-weight: bold;
    display: inline-block;
    border: 3px solid #ffeeba;
    border-radius: 5px;
}
.element{
	margin-bottom:20px;
	margin-top:14px;
}

.element .neu{
	margin-top:28px;
}

.groupButtonWrap .saveButton{
    margin-bottom:10px;
}

.groupSelector{
    height:400px !important;
}

input, select, textarea{
	border:none;
	background:#FFFFFF;
	font-family:openSans;
	color:#1d2e3e;
	width:100%;
	padding:5px 5px;
	border-radius:2px;
	font-size:20px;
	font-weight:bold;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}


#adminFilter.admin input[type="text"], #adminFilter.admin input[type="date"], #adminFilter.admin input[type="number"] {
    background: none;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    width: auto;
    font-weight: normal;
    font-size: 16px;
}

.adminLink {
    margin-bottom: 2px;
    margin-top: 2px;
}
	
select{
	cursor:pointer
}
input[type="checkbox"], input[type="radio"]{
	margin:0px;
	text-align:left;
	background:#FFFFFF;
	cursor:pointer;
	width:22px;
	height:22px;
    margin-right:10px;
}

.adminPanel .col-md-10{
    margin-top:5px;
    max-width:30%;
}

.adminPanel .form-group p{
    font-size:14px;
    margin-top:5px;
    max-width:300px;
}

:disabled{
    background-color:#bfbfbf;
}

.searchText{
    max-width:200px !important;
}

.table-striped tr:nth-child(even) {
    background-color: #f2f2f2;
}


input[type="submit"], .visitorButton {
    margin-top: 20px;
    display: inline;
    width: auto;
    background: #18aa9d;
    color: #FFFFFF;
    text-transform: uppercase;
    padding: 7px 30px;
    cursor: pointer;
    transition: 0.3s;
    -webkit-appearance: none;
    -moz-appearance: none;
}
input[type="submit"]:hover, .visitorButton:hover {
    background: #055a53;
}
#adminFilter.admin input[type="submit"]{
	margin-top:0px;
	font-size:16px;
}
/* end Inputs */




/* header */
header{
	width:100%;
	clear:both;
}
#topBar{
	background:#18aa9d;
	border-bottom:5px solid #5fc7c0;
}	
#logo_section{
	width:30%;
	text-align:left;
    max-width:285px;
}

#logo_section img{
	max-width:160px;
	width:100%;
}

#time_section h2{
	font-weight:normal;
	font-size:34px;
    margin-top:5px;
}
#time_wrapper{
	margin-top:16px;
}
#the_time, .langSwitch{
	border:2px solid #FFFFFF;
	border-radius:5px;
}

#the_time div{
	padding:5px 20px;
}
#speech{
	width:34px;
	margin-right:5px;
}
	/* admin header */
		#logo_section.admin{
			width:10% !important;
            min-width:150px;
		}
		#logo_section.admin img{
			max-width:100px;
			width:100%;
			text-align:center;
		}
		#logo_section.admin p{
			font-size:13px;
			text-align:left;
		}
		#time_wrapper.admin{
			margin-top:15px;
		}
		#time_section.admin{
			margin-right:20px;
			margin-top:17px;
		}
		#time_section.admin h2{
			font-size:30px;
		}
	/* end admin header */
/* end header */






/* Main content */
#mainContent {
    margin-top: 36px;
    max-width: 2000px;
    margin-left: auto;
    margin-right: auto;
}

	/*Menu */
	.menu{
		margin-top:10px;
	}
	.menu_item img{
		margin-bottom:5px;
	}

    .menu_item .bigIconWrapper{
        margin-bottom: 5px;
    }

	.menu_item a{
		color:inherit;
	}

	.menu_col_1{
		width:100%;
	}

    .menu_col_1 .wrappedIcon{
        max-width:400px;
        margin-left:auto;
        margin-right:auto;
    }
	.menu_col_1 img{
		width:20%;
	}

    .menu_col_1 .bigIcon {
        width: 20vh;
        height: 20vh;
    }
	.menu_col_2{
		width:40%;
		margin-left:6.6%;
	}
	.menu_col_2 img{
		width:50%;
	}
    .menu_col_2 .bigIco {
        width: 30vh;
        height: 30vh;
    }
	.menu_col_3{
		width:30%;
		margin-left:2.5%;
	}
	.menu_col_3 img{
		width:60%;
	}
    .menu_col_3 .bigIcon {
        width: 60vh;
        height: 60vh;
    }
    .menu_col_4 {
        width: 35%;
        margin-left: 10%;
        margin-bottom: 30px;
    }
	.menu_col_4 img{
		width:60%;
	}

    .menu_col_4 .bicIcon {
        width: 60%;
    }

    .menu_col_5 {
        width: 30%;
        margin-left: 2.5%;
        margin-bottom: 20px;
    }

    .menu_col_5 img {
        width: 70%;
    }

    .menu_col_5 .bigIconWrapper {
        width: 70vh;
        height: 70vh;
    }

    .menu_col_6{
		width:30%;
		margin-left:2.5%;
        margin-bottom:20px;
	}
	.menu_col_6 img{
		width:70%;
	}

    .menu_col_6 .bigIconWrapper {
        width: 70vh;
        height: 70vh;
    }

    .menu_col_6:nth-child(4){
        clear:both;
    }

    .menu_col_7 {
        width: 30%;
        margin-left: 2.5%;
        margin-bottom: 20px;
    }

    .menu_col_7 img {
        width: 70%;
    }

    .menu_col_7 .bigIconWrapper {
        width: 70vh;
        height: 70vh;
    }



    .menu_col_9 {
        width: 30%;
        margin-left: 2.5%;
        margin-bottom: 20px;
    }

    .menu_col_9 img {
        width: 70%;
    }

    .menu_col_9 .bigIconWrapper {
        width: 70vh;
        height: 70vh;
    }

    .menu_col_9:nth-child(4) {
        clear: both;
    }

    .menu_col_8 {
        width: 30%;
        margin-left: 2.5%;
        margin-bottom: 20px;
    }

    .menu_col_8 img {
        width: 70%;
    }

    .menu_col_8 .bigIconWrapper {
        width: 70vh;
        height: 70vh;
    }

	/*end menu */

	/* clocking type */
	#clocking{
		
		width:50%;
		margin:170px auto 0px auto;
	}
	.clocking_type{
		background:#18aa9d;
		width:300px;
		transition:0.3s;
		border-radius: 4px;
	}
	.clocking_type:hover{
		background:#055a53; 
	}
	.clocking_type  a{
		color:#FFFFFF;
	}
	.clocking_type div{
		padding:40px 20px;
	}
	/* end clocking type */

	/* clocking Form */
	#clocking_form{
		text-align:left;	
	}
	#clocking_form h3{
		font-weight:normal;
		margin-bottom:4px;
	}
	#clocking_form h2{
		font-size:40px;
		font-weight:bolder;
	}
	#form{
		margin-top:20px;
		border-top:1px solid #FFFFFF;
		border-bottom:1px solid #FFFFFF;
	}

    .settingsPage h2{
        margin-bottom:20px;
    }

	.form_elements{
		width:100%;
	}
	.float-left.form_elements{
		width:42% !important;
	}
	.float-left.form_gap{
		width:16%;
		text-align:center;
	}
	#form_submit{
		margin-top:20px;
            text-align: left;
	}
	/* end clocking form */
	
	/* admin area */
	#adminFilter.admin{
		text-align:left;
	}
	.filter_date{
		margin-top:10px;
		margin-bottom:20px;
	}
	.filter_buttons{
		
	}
	.active.filter{
		opacity:1;
	}
	.filter.main{
		background:#18aa9d;
		color:#FFFFFF;
		font-size:16px;
	}
	.filter.sub{
		background:#FFFFFF;
		color:#1d2e3e;
		font-size:16px;
	}
	.filter{
		display:inline-block;
		margin-right:2px;
		margin-bottom:8px;
		opacity:0.5;
		cursor:pointer;
		padding:8px 18px;
		transition:0.3s;
		border-radius:2px;
	}

	.filter:hover{
		opacity:1;
	}
	#adminContent{
		background:#FFFFFF;
		color:#1d2e3e;
		text-align:left;
        overflow-x:auto;
	}

    .overflow400{
        overflow-x:auto;
    }


	#adminContent .top_bottom_padding{
		padding-top:20px;
		padding-bottom:30px;
		overflow-x:auto;
	}
	#adminContent h1{
		font-size:35px;
		font-weight:normal;
	}
	#adminContent table{
		margin-top:25px;
		width:100%;
	    
		text-align:center;
		font-size:16px;
	}
	#adminContent table input{
		margin-top:0px !important;
		padding:2px;
		width:100%;
		font-size:16px;
	}
	#adminContent th{
		color:#FFFFFF;
		background:#1d2e3e;
		font-weight:normal;
	}
	#adminContent th, td{
		padding:8px;
		vertical-align:middle;
	}
	#adminContent th{
		padding:10px;
	}
	#adminContent td{
		font-weight:bold;	
	}
	#adminContent tr{
		border-bottom:5px solid #FFFFFF;
	}
	.btnCell{
		background:#18aa9d !important;
        margin-top:0px !important;
		padding:2px;
		font-size:16px;
        color:white;
        text-transform:uppercase;
        max-width:50px;
        height:40px;
	}
	.btnCell:hover{
		background:#055a53 !important;
        cursor:pointer;
	}
	.user_out_row td{
		background:#FFFFFF;
	}
	.user_in_row td{
		background:#e8e8e8;
	}
	/* end admin area */
/* end main content */


/*footer*/
footer{
	width:100%;
	clear:both;
	
	margin-top:20px;
	height:100%;
	position:relative;
}
#footer{
	margin:0% 16% 0% 16%;
	padding:3% 0%;
}

#footer img{
	width:180px;
	max-width:100%;
}




/* end footer*/

/*SIONS STUFF*/
.errorMessageWrap{
    text-align:left !important;
}

.errorMessageWrap h1{
    font-weight:lighter;
    font-size:30px;
    margin-bottom:20px;
}

.errorDetails{
    display:none;
    margin-top:10px;
    color:khaki;
    font-size:10px;
    line-height:unset;
}

.saveAnimation {
    font-size: 30px;
    margin-top: 25px;
    color: #18aa9d;
}

.returnHomeButton{
    margin-top:50px;
    text-align:center !important;
    font-size:16px;
}

.messErr, .showError{
    font-size:14px;

}
.messErr {
    color: khaki;
}

.showError:hover{
    cursor:pointer;
}

.showError {
    color:#18aa9d;
    margin-top:10px;
}
#loginForm input{
    max-width:300px;
}

.errorId {
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 10px;
    
}

.icon{
    width:10%;
    vertical-align:middle !important;
    margin-right:3%;
    
}

.backtodefaultmessage {
    vertical-align: middle !important;
    
}

.backtodefaultmessage .icon {
    text-align: center;
}

#messageDefault{
    width:87%;
    vertical-align:middle;
}

.btnCell a{
    color:white;
}

#loginForm .form-group {
    margin-bottom: 20px;
}

#loginForm .col-md-10{
    margin-top:10px;
    max-width:300px;
    margin-left:auto;
    margin-right:auto;
}

.field-validation-error{
    padding-left:5px;
    padding-right:5px;
    background-color:#ff0000;
    color:white;
    line-height:25px;
    display:block;
    margin-top:5px;
    padding:5px 5px;
    
}

label.error {
    background-color: #db3a3a;
    padding: 5px;
    display: block;
    color:white !important;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#form_submit .error{
    max-width:300px;
    display:inline-block;
    margin-left:10px;
    border-radius:5px;
}

#radioval {
    display: none;
    border-radius: 5px;
}

.errorMessage{
    background-color:#ff0000;
    color:white;
    text-align:center;
}

#errorMessage{
    background-color:#ff0000;
    padding:10px;
    font-weight:bold;
    border-radius:7px;
    border:3px solid #fac1c1;
    text-align:center;
    color:white;
    margin-bottom:15px;
    max-width:70%;
    margin-left:auto;
    margin-right:auto;
}

.langSwitch a {
    color: #18aa9d;
    font-weight:bold;
    font-size:16px;
}



.langSwitch {
    text-decoration: none;
    padding: 5px 20px;
    float: right;
    background-color: white;
    margin-right: 6px;
    
}

.langSwitch:hover{
    opacity:0.7;
}

.requiredStar{
    color:#ff0000;
    font-weight:bold;
}

.validation-summary-errors ul{
    list-style:none;
}

.qrWrapper {
    max-width: 80px;
    text-align: center;
    display: inline-block;
    vertical-align:inherit;
}

.settingsPage .form-group{
  width:200px;
   display:inline-block;
   margin-right:20px;
}

.settingsPage .col-md-10{
    max-width:300px;
}

.qrOn {
    display: none;
}

#loginButton{
    margin-top:0px;
    vertical-align:bottom;
    margin-bottom:20px;
}

.qrButton {
    background:#18aa9d;
    color:white;
    cursor:pointer;
    padding:7px 30px;
    text-transform:uppercase;
    border-radius:2px;
    height:27px;
    margin-bottom:20px;
}

.closeQrButton {
    background: #18aa9d;
    color: white;
    cursor: pointer;
    padding: 7px 30px;
    text-transform: uppercase;
    border-radius: 2px;
    font-size: 25px;
    text-align: right;
    height:27px;
    margin-bottom:20px;
}

video{
    width:50%;
}

.qrButton .fa-qrcode {
    font-size: 25px;
}

.validation-summary-errors {
    background-color:#ff0000;
    padding:20px;
    font-weight:bold;
    max-width:275px;
    margin-left:auto;
    margin-right:auto;
    border-radius:5px;
    margin-bottom:30px;
}

.editClockingTable {
    display:table-cell;
    margin-left:auto;
    margin-right:auto;
}

.fieldName, .fieldValue{
    text-align:left;
}

.fieldName {
    background-color: #1d2e3e !important;
    color:white;
    font-weight:bold;
    border-right:5px solid white;
}

#editClockWrapper{
    margin-bottom: 30px;
    margin-top:30px;
}

#timeWrapper select{
    border:1px solid black;
    border-radius:3px;
    font-size:16px;
    margin-top:10px;
}

#time{
    border:1px solid black;
}

.editBack{
    vertical-align:bottom;
    display:block;
    margin-top:10px;
}

#hiddenSchoolLogo{
    display:none;
}

.terms{
    display:none;
    line-height:27px;
}

.tcButton{
    color:#18aa9d;
    font-weight:bold;
    cursor:pointer;
}

.adminFullWidthTable {
    width: 100%;
    margin-bottom: 20px !important;
}

.adminFullWidthTable td, .adminFullWidthTable th{
    text-align:left !important;

}

.adminPanel{
    padding:30px;
    padding-left:15%;
    padding-right:15%;
}
.activeSchool td{
    font-weight:bold !important;
}

.adminPanel dt{
    font-weight:bold;
}

.adminPanel dd{
    margin-bottom:15px;
}

.inactiveSchool{
    opacity:0.5;
    font-weight:normal;
}

.activeSchool .fa-check {
    color: #18aa9d;
}

.inlineBlock{
    display:inline-block;
}

.indent{
    padding-left:20px;
}

#currentGroup, #availableGroup{
    min-width:250px;
    padding:10px;
    min-height:400px;
}

.adminNavButton {
    background-color: #18aa9d;
    color: white;
    padding: 7px 20px;
}

.adminPanel .text-box {pas

}

.adminNavButton:hover {
    transition: 0.7s;
    opacity:0.7;
}

.text-danger{
    color:white;
}

.adminPanel .validation-summary-errors{
    max-width:100%;
    font-size:18px;
    padding:10px;

}

.adminPanel input[type="submit"] {
    margin-top: 0px !important;
}
.filterTotals{
    font-size:12px;
}

.pageLink{
    margin-right:10px;
}

.systemAdminMargin{
    margin-left:15%;
    margin-right:15%;
    text-align:right;
}

.systemAdminMargin a{
    color:white;
    margin-left:15px;
}

.systemAdminHeader {
    background-color: #1d2e3e;
    color:white;
    padding:10px 0px;
    width:100%;
    margin:0px;
    text-align:center;
    font-size:12px;
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    display: none;
    overflow: auto;
    overflow-y: scroll;
}

.modal-content {
    color: black;
    position: relative;
    background-color: #ffffff;
    border: 2px solid #999999;
    border: 2px solid rgba(0, 0, 0, 0.2);

    outline: none;
    -webkit-box-shadow: 0 20px 20px rgba(0, 0, 0, 0.5);
    box-shadow: 20PX 20px 20px rgba(0, 0, 0, 0.5);
    background-clip: padding-box;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
    border-radius:6px;
    border: 2px solid black;
}

.modal-content h5 {
    font-size:26px
}

#activeClockingsMessage, #logoutButtonMobile {
    max-width: 180px;
    width:180px;
    margin-right: auto;
    margin-left: auto;
    background-color: #18aa9d;
    color: white;
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 40px;
    display:inline-block;
    margin:8px;
    margin-bottom:36px;
}

#activeClockingsMessage:hover, #logoutButtonMobile:hover{
    cursor: pointer;
}

.closebutton {
    float: none !important;
    max-width: 100px;
    margin:8px;
    text-align: center;
    padding: 15px;
    background: none;
    display:inline-block;
    
}

.closebutton:hover{
    cursor:pointer;
}

.aclockingDetails{
    display:none;
}

.smallertxt {
    font-size: 16px;
}

.aclocking {
    border: 2px solid #18a99c;
    border-radius: 6px;
}

.aclockingButton{
    width:100%;
    max-width:90%;
    height:55px;
}

.acklockingHeader, .aclcockingDetails {
    padding: 10px;
}

.modal-content table td, .modal-content table th {
    font-size: 20px !important;
}

.modal-header, .modal-footer{
    padding:20px;
}

.modal-footer {
    text-align: center;
}

#rememberButton{
    max-width:200px;
}

.hleft{
    width:70%;
}

.hright{width:30%;}

.modal-body {
    position: relative;
    padding: 20px;
}

.modal-dialog {
    z-index: 1050;
    width: auto;
    padding: 10px;
    margin-right: auto;
    margin-left: auto;
}
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    background-color: #333;
    opacity: 0.5;
}


.fade {
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
}

.createUsers{
    margin-top:20px;
    margin-bottom:20px;
}



.selectedPageNav {

}

.selectedPageNav a {
    color:white;
    background: #18aa9d;
    color:white;
    padding:3px 7px;
    border : 2px solid #18aa9d !important;
}

.messageUpdated {
    color: #18aa9d;
    font-size:18px;
    margin-bottom:20px;
}

.adminPanel textarea, .adminPanel input[type="text"], .adminPanel input[type="password"], .adminPanel select, .adminPanel input[type="email"], .adminPanel input[type="number"], .adminPanel input[type="date"], .adminPanel input[type="datetime"] {
    border: 2px solid #1d2e3e;
    max-width: 300px;
    font-size: 16px;
    width: 100%;
}

.hrGap{
    margin-top:25px;
}

#passPoster {
    min-width: 955px;
    max-height:350px;
}

#passPoster #pass_rightSide {
    padding: 20px;
    vertical-align: top;
    
}

#passPoster #pass_rightSide{
    width:unset;
}

#passPoster h1 {
    font-size: 36px !important;
}

#passPoster h2 {
    font-size: 46px !important;
}

#passPoster h3{
    font-size:26px;
}

#passPoster .englishText{
    color:darkgrey;
}

#passPoster #pass_bottom {
    padding: 20px;
}

#passPoster #pass_leftSide{
    display:inline-block;
}


.editPass {
    margin-right: 20px;
    margin-bottom: 20px;
    overflow: auto;
}
.editPassDetails{
    vertical-align:top;
}
.editPassDetails .col-md-10{
    max-width:350px;
}

.passButton{
    display:inline-block;
    margin-right:10px;
}

.passButtons{
    margin:20px;
}


.adminPanel input[type="submit"]{
    font-size:16px;
}

.pageLink a {
    border : 2px solid #5fc7c0 ;
    padding: 3px 7px;
    font-size:12px;
    
}

.subButton{
    margin-top:20px;
    display:inline-block;
}

.pageLinkDots{
    margin-right:10px;
}



.adminPanel .form-group{
    margin-bottom:20px;
}
/*END SIONS STUFF*/
/* Responsive */
@media only screen and (max-width: 1781px) {
    #clocking {
		width: 60%;
		margin: 170px auto 0px auto;
	}
}

@media only screen and (max-width: 1470px) {
	#clocking {
		width: 70%;
		margin: 170px auto 0px auto;
	}
}

@media only screen and (max-width: 1260px) {
	#clocking {
		width: 80%;
		margin: 170px auto 0px auto;
	}

    #time_section h2 {
        font-size:26px !important;
    }
    #time_section.admin h2 {

        margin-top: 13px;
    }


    #time_section {

    }

    #logoRight{
      
    }

    #errorMessage {
        max-width: 80%;
    }
}

@media only screen and (max-width: 1170px) {
	.site_margin, .systemAdminMargin{
		margin:0% 5% 0% 5%;
	}

    .adminPanel{
        padding-left:8%;
        padding-right:8%;
    }
}

@media only screen and (max-width: 1024px) {
	
}

@media only screen and (max-width: 1023px) {
    #time_section h2{
        font-size:20px;
        
    }

}

@media only screen and (max-width: 930px) {
	#clocking {
		width: 100%;
		margin: 170px auto 0px auto;
	}	
}



@media only screen and (max-width: 880px) {
	.adminLink{
        font-size:10px;
	}

    .systemAdminMargin{
        text-align:center;
    }

    #time_section.admin h2 {
        font-size: 20px !important;
        margin-top: 13px;
    }

    #svgLogo{
        max-width:130px
    }

    #logo_section p{
        font-size:17px;
    }
}


@media only screen and (max-width: 750px) {



   
	
}

@media only screen and (max-width: 750px) {
	#clocking {
		width: 100%;
		margin: 100px auto 0px auto;
	}	
	.clocking_type{
		width:40%;
	}

	
}

@media only screen and (max-width: 750px) {

    .bigHiddenLogo {
        display: block;
    }
    #logoLeft{
        text-align:center;
        margin:auto;
    }

    #time_section.admin h2 {
        font-size: 20px !important;
        margin-top: 0px;
    }

    #time_section.admin {
        margin-top: 10px !important;
        margin-bottom: 5px;
    }

    .systemAdminMargin {
        text-align: right;
        margin-right:8%;
    }

	#time_section h2 {
		font-size: 34px;
	}
	#logo_section img {
		max-width: 100px;
		width: 100%;
	}
	#logo_section p{
		font-size:14px;
		text-align:center !important;
	}

    #logo_section.admin p{
        text-align:center;
    }

    #time_section{
        text-align:center !important;
    }
}


@media only screen and (max-width: 750px) {

    #form .form_elements{
        float:none !important;
        width:100% !important;
    }

    #form .form_gap {
    display:none;
    }

    #hiddenSchoolLogo{
        display:block;
    }

    #svgLogo{
        max-width:40px;
        max-height:15px;
        display:inline-block;
    }

    #logo_section p{
        display:inline-block;
        margin-bottom:10px;
    }

    #logoRight, #logoLeft{
        display:none;
    }


	#logo_section, #time_section{
		float:none;
		margin:auto;
		text-align:center;
		width:100%;
	}
	
	#logo_section p{
		font-size:20px;
		text-align:center;
	}

    #time_wrapper{
        float:none !important;
    }

    .menu{
        margin-top:10px;
    }

    #time_wrapper div{
        display:block;
        margin-left:auto;
        margin-right:auto;
        float:none !important;
        display:inline-block;
    }

    #time_section{
        width:100%;
        text-align:center !important;
        float:none;
        max-width:400px;
        display:inline;

    }

    .circleIcon{
        width:40% !important;
    }

    .adminLink {
        display: block !important;
        display:none;
    }

    .systemAdminMargin{
        display:none;
    }

    .menuIcon{
        display:block;
        font-size:26px;
        margin-right:8%;
        text-align:right;

    }

    .adminLink{
        font-size:13px;
    }

    

    #time_section.admin {
        margin: 0px;
        margin-top: 10px;
        display:inline-block !important;
    }

    .bigMobileLogo {
        display: block !important;
        max-width: 200px !important;
        max-height: 60px !important;
        margin-bottom:5px;
        margin-left: auto;
        margin-right: auto;
    }


}
@media only screen and (max-width: 560px) {

    .menu {
        margin-left: auto;
        margin-right: auto;
    }
    .menu_item {
        width:100%;
        display: block;
        margin-bottom: 30px;
        min-width: 150px;
        max-width:230px;
        margin-left: auto;
        margin-right: auto;
        float:none;
    }

    .wrappedIcon{

        width:100%;
        margin-left:auto;
        margin-right:auto;

    }
}
@media only screen and (max-width: 400px) {
	
	
}