/***************** STANDARD TAGS *****************/
*{margin:0px;padding:0px;box-sizing:border-box;font-size:16px;font-family:Geneva, sans-serif;}
html {scroll-behavior:smooth;}
body{background:#000 url('img/login-bg.jpg') no-repeat;width:100%;background-size:cover;background-position:center center;background-attachment:fixed;min-height:550px;}

a{color:#0A0;text-decoration:none;font-weight:bold;transition:.2s;}
a:hover{color:#5F5;}

h1{font-size:34px;color:#527998;font-weight:normal;}
h2{font-size:28px;color:#8dc63f;font-weight:normal;}

::selection {color:#000;background:#55ffff;}
::-moz-selection {color:#000;background:#55ffff;}

table, tr, td{color:inherit;}


label, input {transition:all 0.2s; touch-action:manipulation;}
label {color:#0AA; text-transform:uppercase; letter-spacing:0.05em;}
label:hover {color:#0A0;}

input { background-color:#000;color:#FFF;
    font-size: 1.5em;
    border: 0;
    border-bottom: 1px solid #ccc;
    font-family: inherit;
    -webkit-appearance: none;
    border-radius: 0;
    padding: 0;
    cursor: text;
}







/***************** DEFAULTS *****************/
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.defaultTable{width:100%;border-spacing:0px;}
.defaultTable tr:hover{background:#001100;}
.defaultTable th{padding:10px;text-align:left;background-color:#212121;color:#FFF;}
.defaultTable th:first-child{border-top-left-radius:15px;}
.defaultTable th:last-child{border-top-right-radius:15px;}
.defaultTable td{padding:10px;border-bottom:#212121 1px solid;color:#FFF;}
.defaultTable tr:last-child td{border:none;}

/***************** Colors *****************/
.color1 {color:#5FF;}
.color2 {color:#5F5;}

.and0 {color:#000;}
.and1 {color:#00A;}
.and2 {color:#0A0;}
.and3 {color:#0AA;}
.and4 {color:#A00;}
.and5 {color:#A0A;}
.and6 {color:#FA0;}
.and7 {color:#AAA;}
.and8 {color:#555;}
.and9 {color:#55F;}
.anda {color:#5F5;}
.andb {color:#5FF;}
.andc {color:#F55;}
.andd {color:#F5F;}
.ande {color:#FF5;}
.andf {color:#FFF;}





/***************** SIZING *****************/
.row:after {
    content: "";
    clear: both;
    display: block;
}

.col-1 {width:8.33%;}
.col-2 {width:16.66%;}
.col-3 {width:25%;}
.col-4 {width:33.33%;}
.col-5 {width:41.66%;}
.col-6 {width:50%;}
.col-7 {width:58.33%;}
.col-8 {width:66.66%;}
.col-9 {width:75%;}
.col-10 {width:83.33%;}
.col-11 {width:91.66%;}
.col-12 {width:100%;}

[class*="col-"] {float:left;padding:0px;}


.TemplateBody{}

/***************** FORMS *****************/


.button {background-color:#0A0;color:#FFF;font-weight:bold;font-size:20px;padding:10px 20px;margin:15px;border:#0A0 2px solid;cursor:pointer;}
.button:hover {background-color:#5F5;color:#000;border-color:#5F5;}

.button_red {background-color:#A00;color:#FFF;font-weight:bold;font-size:20px;padding:10px 20px;margin:15px;border:#A00 2px solid;cursor:pointer;}
.button_red:hover {background-color:#F55;color:#000;border-color:#F55;}

.button_yellow {background-color:#FA0;color:#FFF;font-weight:bold;font-size:20px;padding:10px 20px;margin:15px;border:#FA0 2px solid;cursor:pointer;}
.button_yellow:hover {background-color:#FF5;color:#000;border-color:#FF5;}
.button_orange{background-color:#FA0;color:#FFF;font-weight:bold;font-size:20px;padding:10px 20px;margin:15px;border:#FA0 2px solid;cursor:pointer;}
.button_orange:hover {background-color:#FF5;color:#000;border-color:#FF5;}


/**
* Make the field a flex-container, reverse the order so label is on top.
*/
 
.field {display:flex; flex-flow:column-reverse; margin-bottom:1em;}


/***************** LOGIN PAGE *****************/
.loginBackground {background:url('img/login-bg.jpg') no-repeat;width:100%;background-size:cover;background-position:center center;background-attachment:fixed;min-height:550px;}
.loginWidth {width:100%;max-width:400px;margin:0px auto;}
.LoginBox {background-color:rgba(0,0,0,.8);border:rgba(30,30,30,1) 3px solid;}

.loginError {text-align:center;color:#A00;padding:10px 0px;}
.loginInput {background:none;border:none;width:100%;border-bottom:#AAA 2px solid;font-size:24px;color:#FFF;text-align:left;padding:10px 30px 0px 40px;}
.loginInput:focus {outline:none;color:#5F5;background-color:rgba(0,0,0,.1);}
.loginInput::placeholder {color:#CCC;}
.loginInput:hover {color:#000;background-color:rgba(0,0,0,.1);}

.loginButton {font-family:'PantonBold',sans-serif;background:#0A0;color:#EEE;font-size:30px;border:none;border-radius:8px;margin:30px auto;padding:10px 100px;cursor:pointer;transition:.2s;}
.loginButton:hover {background-color:#00e000;color:#FFF;}
.loginButton:disabled {background:#959595;color:#424242;cursor:not-allowed;}

.loginSpacer {width:90%;padding:10px 0px;margin:0px auto;color:#FFF;}

.usernameIcon {background:url('img/user-icon.png') no-repeat scroll 0px 3px;}
.passwordIcon {background:url('img/lock-icon.png') no-repeat scroll 0px 3px;}
/*************************************************************/



@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
		float:none;
    }
}
@media only screen and (max-width: 400px) {
    .UserName {display:none;}
}