html {
  height: 100% !important;
  box-sizing: border-box;
}

body   
{
  height: 100% !important;
    /*font-size: .70em !important;*/
    font-size: .70em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
    margin: 0px;
    padding: 0px;
    /*color: #696969;*/
    color: #000;
  position: relative;
  padding-bottom: 0px;
  min-height: 100%;
    background-color: #E9EAED;    
}


.footer, #actPage:after {
  height: 18px; 
}
.footer
{
    height:18px;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    color: #333;
    background-color: #CCE5FA;
    background: -webkit-linear-gradient(left, #CCE5FA 550px, transparent, transparent, transparent); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient( right, #CCE5FA 550px, transparent, transparent, transparent); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient( right, #CCE5FA 550px,transparent, transparent, transparent); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #CCE5FA 550px, transparent, transparent, transparent); /* Standard syntax */
    text-align: left;
}

.headertext
{
    font-family: "Helvetica Neue","Lucida Grande","Segoe UI",Arial,Helvetica,Verdana,sans-serif !important;
    color: #DDD;    
    font-size: 1.7em;
    font-weight: 600;
    padding-top: 20px;
    line-height: 2.5em;
    font-variant: small-caps;
}

.bg
{
    background-image: url("../images/login_bg.png");    
    background-position:top;
    background-repeat:no-repeat;
    background-size: 100% 100%;
    position: fixed;
    left: 0;
    right: 0;
    z-index: -999;
    display: block;
    width: 100%;
    height: 100%;

}

.form {
    width: 100%;
}

.form .field {
    position: relative;
    margin: 0 50px;
}

.form .field i {
    /*font-size: 14px;*/
    left: 0px;
    top: 0px;
    position: absolute;
    height: 44px;
    width: 44px;
    color: #f7f3eb;
    background: #676056;
    text-align: center;
    line-height: 44px;
    transition: all 0.3s ease-out;
    pointer-events: none;
}

/* === Login === */
.login {
  position: relative;
  margin: 0 auto;
  width: 370px;
  height: 345px;
  background: white;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 14px 10px  #666;
    -moz-box-shadow: 0px 0px 14px 10px  #666;
    box-shadow: 0px 0px 1px 10px #666;
    margin-top: 15vh;
}

.login:before {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  z-index: -1;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.login h1 {
  line-height: 55px;
  font-size: 15px;
  font-weight: bold;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  color: #DDD;
  text-align: center;
  background: #49659F;

  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.login p:first-child {
  margin-top: 30px;
}


/* === Input Form === */
::-webkit-input-placeholder {
  color: #ded9cf;
  font-family:'Open Sans';
}

:-moz-placeholder {
  color: #ded9cf !important;
  font-family:'Open Sans';
}

.form input[type=text],
.form input[type=password] {
    font-family: 'Open Sans', Calibri, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    padding: 10px 15px 10px 55px;
    position: relative;
    height: 44px;
    width: 270px;
    color: #676056;
    border: none;
    background: #f7f3eb;
    color: #777;
    transition: color 0.3s ease-out;    
}
.form input[type=text] {
    margin-bottom: 15px;
    text-transform:uppercase;
}

.form input[type=text]:hover ~ i,
.form input[type=password]:hover ~ i {
    color: #ded9cf;
}

.form input[type=text]:focus ~ i,
.form input[type=password]:focus ~ i {
    color: #1081DE ;
}

.form input[type=text]:focus,
.form input[type=password]:focus,
.form button[type=submit]:focus {
    outline: none;
}

.form input[type=submit] {
  margin-top: 15px;
  width: 270px;
  text-align: center;
  font-size: 14px;
  font-family: 'Open Sans',sans-serif;
  font-weight: bold;
  padding: 12px 0;
  letter-spacing: 0;

  -webkit-box-shadow: inset 0px 0px 0px 0px #1C326C;
  -moz-box-shadow:    inset 0px 0px 0px 0px #1C326C;
  box-shadow:         inset 0px 0px 0px 0px #1C326C;

  color: #DDD;
  background-color: #49659F;
  text-shadow: none;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  position: relative;
  margin-bottom: 20px;
  -webkit-animation: shadowFadeOut 0.4s;
  -moz-animation: shadowFadeOut 0.4s;
}

.form input[type=submit]:hover,input[type=submit]:focus{
  color: #fff;
  -webkit-box-shadow: inset 0px 46px 0px 0px #1C326C;
  -moz-box-shadow:    inset 0px 46px 0px 0px #1C326C;
  box-shadow:         inset 0px 46px 0px 0px #1C326C;
  -webkit-animation: shadowFade 0.4s;
  -moz-animation: shadowFade 0.4s;
}

.home_border input[type="submit"]
{
    border: 1px solid #CCC;
}

table {
    font-size: 1em;
    color: #EEE;
}

.home_border
{
    width: 550px;
    position: fixed;
    top: 100px;
    left: -560px;
    background-color: rgba(73, 101, 159, 0.9);
    color: #EEE !important;
    font-family:'Arial Unicode MS' !importnet;
    font-size:110%;
    padding: 10px 50px 10px 15px;
    border-width:thin;
    cursor:default;
    border-radius: 0px 10px 10px 0px;
    /*border-top: 2px solid #1C326C;
    border-right: 2px solid #1C326C;    
    border-bottom: 2px solid #1C326C;*/
    box-shadow: 0px 5px 10px 5px rgba(100, 100, 100, 0.9);
    
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    
    /*position: absolute;
    left: 10%;
    top: 210px;
    border-radius: 15px;
    padding-left :20px;
    padding-right :20px;
    border-width:thin;
    border-color:#66FF66;
    /*border-color:Lime;
    background-color:#A2CC8E;
    color:black !important;
    font-family:'Arial Unicode MS' !importnet;
    font-size:110%;
    max-width: 550px;*/

    /*#1F497D*/

    /*position: absolute;
    right: 100px;
    top: 330px;
    border-radius: 25px;
    padding-left :20px;
    padding-right :20px;
    border-width:thin;
    border-color:#5B9BD5;
    background-color:#A0BFE5;
    color:black;
    font-family:'Arial Unicode MS';
    font-size:110%;*/
    
    /*
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;*/ 
}

.home_border:hover {
  /*left: -350px;*/
  cursor:pointer;
  cursor:hand;
    background-color: rgba(73, 101, 159, 1);
}

.home_border.show {
  left: 0px;
}

.home_border.show .fa-chevron-circle-right
{
  display: none;
}
.home_border.show .fa-chevron-circle-left
{
  display: inherit;
}
.home_border .fa-chevron-circle-right
{
  display: inherit;
}
.home_border .fa-chevron-circle-left
{
  display: none;
}
.home_border .controller {
  position: absolute;
  right: 0px;
  top: 0px;
  text-decoration: none;
}

.home_border>i
{
    float: right;
    right: 0px;
    margin-right: -36px;
    margin-top: 5px;
}

.home_border a
{
    color: skyblue;
}

.home_border h1
{
  text-decoration: none;
  text-align: center;
  font-size: 1.75em;
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
font-weight: normal;
}

.punch
{
    width: 400px;
    margin: 0px auto;
}

.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 50%;
}

/* Change background color of buttons on hover */
.tablink:hover {
  background-color: #777;
}

.tabcontent {
  color: white;
  display: none;
  
  /*text-align: center;*/
}

.colorgreen h1,
.colorgreen input[type="submit"]
{
    /*3E968A
    42CBAD*/
    background: #3E968A;
    box-shadow: inset 0px 46px 0px 0px #3E968A;
}
.colorgreen input[type="submit"]:hover
{
    /*3E968A
    42CBAD*/
    background: #42CBAD;
    box-shadow: inset 0px 46px 0px 0px #42CBAD;
}

@media (min-width:801px)
{
    /*.home_border 
    {
        left: 50%;
        top: 210px;
    }*/
}

@media (max-width:800px)
{
    .page
    {
        padding-left:2%;    
    }
    #imgLogo
    {
        display:none;
    }
    body   
    {
        /*padding-top: 2rem;*/
     /*overflow:scroll;*/
    }
    .home_border 
    {
        /*left: 0%;
        top: 260px;
        /*top: 510px;*/
        position: relative;
        width: auto;
        box-shadow: unset;
        padding-right: 15px;
        left: auto !important;
        margin: 0 30px 100px;
        border-radius: 10px;
        top: 50px;
    }
    
    
    .home_border > i
    {
        display: none !important;
    }
    
    #demo_feature
    {
        display:none;        
    }
    #lblHeader
    {
        display: none;
    }
    
    #clock
    {
        width : 100% !important;
        padding: 0 !important;
    }
    
    

}


@media (max-width:440px)
{
    .punch
    {
        width : 100%;
    }
}

@media (max-width:400px)
{
    .login
    {
        width:calc(100% - 50px) !important
    }
    .form input[type="text"],
    .form input[type="password"],
    .form input[type="submit"]
    {
        width: 100%;
    }
    
    #clock .display
    {
        padding: 20px 7px 7px !important;
    }
    #clock .digits > div
    {
        margin: 0 2px !important;
    }
}