html, body {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

#slide1 input:-webkit-autofill,
#slide1 input:-webkit-autofill:hover,
#slide1 input:-webkit-autofill:focus,
#slide1 input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #fff !important;
}

#ascrail2000-hr
{
    display: none !important;
}

.fancy-select {
    width: 100%;
}

div.show {
    display: normal;
}

div.hide {
    display: none;
}

/*fancy*/

@font-face {
    font-family: 'Fjalla One';
    font-style: normal;
    font-weight: 400;
    src: local('Fjalla One'), local('FjallaOne-Regular'), url(https://themes.googleusercontent.com/static/fonts/fjallaone/v1/rxxXUYj4oZ6Q5oDJFtEd6hsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}

#content {
    position: absolute;
    width: 80%;
    height: 100%;
    margin-left: 50px;
    top: -20%;
    -webkit-transition: .6s cubic-bezier(0.02, 0.6, 0.2, 1);
    transition: .6s cubic-bezier(0.02, 0.6, 0.2, 1);
}

#content section {
    width: 100%;
    height: 100%;
    float: left;
}

#content section::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#content2 {
    position: absolute;
    width: 80%;
    height: 100%;
    margin-left: 50px;
    top: -20%;
    -webkit-transition: .6s cubic-bezier(0.02, 0.6, 0.2, 1);
    transition: .6s cubic-bezier(0.02, 0.6, 0.2, 1);
}

#content2 section {
    width: 100%;
    height: 100%;
    float: left;
}

body #timeSheetModal .modal-content {
   width: 220%;
   left: -50%;
}

#content2 section::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.fancyInput {
    max-width: 80%;
    min-width: 50%;
    font-size: 60px;
    color: #FFF;
    vertical-align: middle;
    line-height: 1.3;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 1px 0 rgba(255,255,255,.15), 0 2px 4px rgba(0,0,0,.2) inset, 0 0 12px rgba(255,255,255,.1);
    padding: 8px 20px;
    background: rgba(0,0,0,.1);
    border-radius: 10px;
}

#username{
	position: absolute;
	top: 10%;
	left: 5%;
}

#password{
	position: absolute;
	top: 25%;
	left: 5%;
}

#loginButton {
  position: absolute;
  top: 38%;
  left: 5%;
  -moz-box-shadow: 0px 10px 14px -7px #000000;
  -webkit-box-shadow: 0px 10px 14px -7px #000000;
  box-shadow: 0px 10px 14px -7px #000000;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0f1620), color-stop(1, #2b3c52));
  background:-moz-linear-gradient(top, #0f1620 5%, #2b3c52 100%);
  background:-webkit-linear-gradient(top, #0f1620 5%, #2b3c52 100%);
  background:-o-linear-gradient(top, #0f1620 5%, #2b3c52 100%);
  background:-ms-linear-gradient(top, #0f1620 5%, #2b3c52 100%);
  background:linear-gradient(to bottom, #0f1620 5%, #2b3c52 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0f1620', endColorstr='#2b3c52',GradientType=0);
  background-color:#0f1620;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  border-radius:4px;
  border:1px solid #141d29;
  display:inline-block;
  cursor:pointer;
  color:#ffffff;
  font-family:arial;
  font-size: x-large;
  font-weight:bold;
  padding:6px 12px;
  text-decoration:none;
  width: 14%;
  text-shadow:0px 1px 0px #213857;
}

.currentIp {
	position: absolute;
	background: none;
	bottom: -0.5%;
	color: #000;
	font-size: 12px; 
	padding-left:5%;
}

label.currentIp  {
	font-weight: normal;
}

#username:focus {
    outline: 0;
}

#password:focus {
    outline: 0;
}
/*end*/

/*background slide*/


.slide {
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    position: relative;
}

.wrapper {
    width: 960px;
    height: 200px;
    margin: 0 auto;
    position: relative;
}

/******************************
 SLIDE 1 
*******************************/
#slide1 {
    background: url(../images/background1.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/******************************
 SLIDE 2 
*******************************/

#slide2{
    font-family: 'Roboto', sans-serif;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


  #divstart{
      margin-top: 35px !important;
  }

  #divstop{
      margin-top: 35px !important;
  }

 .myButton {
	-moz-box-shadow: 0px 10px 14px -7px #000000;
	-webkit-box-shadow: 0px 10px 14px -7px #000000;
	box-shadow: 0px 10px 14px -7px #000000;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0f1620), color-stop(1, #2b3c52));
	background:-moz-linear-gradient(top, #0f1620 5%, #2b3c52 100%);
	background:-webkit-linear-gradient(top, #0f1620 5%, #2b3c52 100%);
	background:-o-linear-gradient(top, #0f1620 5%, #2b3c52 100%);
	background:-ms-linear-gradient(top, #0f1620 5%, #2b3c52 100%);
	background:linear-gradient(to bottom, #0f1620 5%, #2b3c52 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0f1620', endColorstr='#2b3c52',GradientType=0);
	background-color:#0f1620;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	border:1px solid #141d29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:13px;
	font-weight:bold;
	padding:6px 12px;
	text-decoration:none;
	text-shadow:0px 1px 0px #213857;
  width: 100%;
  height: 100%;
  font-size: xx-large;
}

.divMyButton .myButton{
    padding-top: 5% !important;
    padding-bottom: 5% !important;
}  

.divMyButtonDown{
   padding-top: 2%!important;
}

.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2b3c52), color-stop(1, #0f1620));
	background:-moz-linear-gradient(top, #2b3c52 5%, #0f1620 100%);
	background:-webkit-linear-gradient(top, #2b3c52 5%, #0f1620 100%);
	background:-o-linear-gradient(top, #2b3c52 5%, #0f1620 100%);
	background:-ms-linear-gradient(top, #2b3c52 5%, #0f1620 100%);
	background:linear-gradient(to bottom, #2b3c52 5%, #0f1620 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2b3c52', endColorstr='#0f1620',GradientType=0);
	background-color:#2b3c52;
}
.myButton:active {
	position:relative;
	top:1px;
}

/*clock*/
.clock-container {
  position: absolute;
  bottom:0px;
  left: 0px;
  right: 0px;
  top: auto;
  vertical-align: bottom;
  text-align: center;
}

#clockPosition{
  margin: 0 auto;
  bottom:0px;
  z-index: 999;
}

@media only screen and (min-device-width : 375px) and (max-device-width : 667px) {
    
}

.slideno {
    font-size: 60px;
    font-weight: bold;
    color: #D7D7D8;
    padding-right:10px;
    padding-left:10px;
    background-color: rgba(12,25,30,0.7);
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -o-border-radius: 7px;
    width: 100%;
}

#employeeTableArea{
	background-color: rgba(12,25,30,0.8);
	opacity: 0.9; 
	border-radius: 6px;
}

#employeeTableArea label {
  color: #D7D7D8;
  font-family: 'Duru Sans', sans-serif;
  font-size: x-large;
  padding: 1% 0% 0% 1%;
}

#searchByName{
	text-align:left; 
	font-family: 'Duru Sans', sans-serif; 
	font-size: x-large;  
	font-weight: bolder;
	width:40%;
	padding-left: 10px;
}

.periodList {
  margin-top: 1%;
}

.stopWorkButton{
	text-decoration:none;
	height: 40%;
	font-size: medium !important;
}

.imgFixed {
  position: fixed;
  width: 50%;
  z-index: 1; 
  position: fixed; 
  bottom: 20px;
}

.fullScreen{
	padding-left: 0px !important;
	padding-right: 0px !important;
	margin-left: 0px !important;
	margin-right: 0px !important;
	width: 100% !important;
	height: 100% !important;
}

.visible-label {
  background: #fff;
  padding: 1% 1% 1% 1%;
}

.myfancyInput {
  color: #FFF;
  vertical-align: middle;
  line-height: 1.3;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 1px 0 rgba(255,255,255,.15), 0 2px 4px rgba(0,0,0,.2) inset, 0 0 12px rgba(255,255,255,.1);
  padding: 8px 20px;
  background: rgba(0,0,0,.1);
  border-radius: 10px;
  font-family: 'Fjalla One', sans-serif;
	font-size: 45px;
	border-style: solid;
    border-color: transparent;
}

.myClock{
	background-color: rgb(15, 22, 32);
}

/*********************** MEDIA QUERIES WEB  ********************** */

@media (min-width: 1441px) and (max-width: 1920px){
	.myfancyInput {
	    width: 40%;
      font-size: 40px;
	}

	#clockPosition{
		width:30%;
    max-width: 390px;
    min-width: 385px;  
	}

	.myClock{
		zoom: 0.8;
		-webkit-transform: scale(0.9); 
		-ms-transform: scale(0.9); 
		-o-transform: scale(0.9); 
		-moz-transform: scale(0.9);
		padding-right: 0px;
		padding-left: 3%;
		padding-bottom: 3%;
		padding-top: 3%;
	}
  
  body #timeSheetModal .modal-content {
       width: 220% !important;
       left: -60% !important;
  }

}


@media (min-width: 1281px) and (max-width: 1440px){
	#clockPosition{
		width:22%;
    max-width: 440px;
    min-width: 303px;
    bottom:2% !important;
	}

	.myfancyInput {
	    width: 40%;
	    font-size: 43px;
	}

	.myClock {
    zoom: 0.7;
		padding-right: 0px;
		padding-left: 3%;
		padding-bottom: 3%;
		padding-top: 3%;
	}

  header ul.dropdown-menu {
      margin-top: 6% !important;
  }

  body #timeSheetModal .modal-content {
       width: 220% !important;
       left: -58% !important;
  }
}


@media (min-width: 1152px) and (max-width: 1280px) {
	#clockPosition{
		width:35%;
    max-width: 400px;
    min-width: 390px;
	}

	.myfancyInput {
	    width: 45%;
	    font-size: 32px;
	}

	#username{
		top: 11%;
	}

	#password{
		top: 23%;
	}

	.myClock{
		zoom: 0.9;
		-webkit-transform: scale(0.9); 
		-ms-transform: scale(0.9); 
		-o-transform: scale(0.9); 
		-moz-transform: scale(0.9);
		padding-right: 0px;
		padding-left: 3%;
		padding-bottom: 3%;
		padding-top: 3%;
	}

  header ul.dropdown-menu {
      margin-top: 6% !important;
  }

  body #timeSheetModal .modal-content {
       width: 200% !important;
       left: -50% !important;
  }
}

@media (max-width: 1199px) {
  .divMyButton .myButton{
      font-size: small !important;
  }    
}

@media (min-width: 971px) and (max-width: 1151px) {
	#clockPosition{
		width:35%;
    max-width: 410px;
    min-width: 405px;
	}

	.myfancyInput {
	    width: 50%;
	    font-size: 30px;
	}

	#username{
		top: 11%;
	}

	#password{
		top: 23%;
	}

	.myClock{
		zoom: 0.85;
		-webkit-transform: scale(0.9); 
		-ms-transform: scale(0.9); 
		-o-transform: scale(0.9); 
		-moz-transform: scale(0.9);
		padding-right: 0px;
		padding-left: 3%;
		padding-bottom: 3%;
		padding-top: 3%;
	}
}

@media (min-width: 769px) and (max-width: 970px) {
	#clockPosition{
		width:43%;
    max-width: 370px;
    min-width: 365px;
	}

	.myfancyInput {
	    width: 50%;
	    font-size: 30px;
	}

	#username{
		top: 11%;
	}

	#password{
		top: 23%;
	}

	.myClock{
		zoom: 0.78;
		-webkit-transform: scale(0.85);
		-ms-transform: scale(0.9); 
		-o-transform: scale(0.9); 
		-moz-transform: scale(0.9); 
		padding-right: 0px;
		padding-left: 2%;
		padding-bottom: 2%;
		padding-top: 2%;
	}
  
  .range .control-group {
    width: 202px;
  }

  .range .date-to {
    width: 185px;
  }

}

@media (min-width: 700px) and (max-width: 768px) {
	#clockPosition{
		width:46%;
    min-width: 345px;
    max-width: 350px;
	}

	.myfancyInput {
	    width: 50%;
	    font-size: 30px;
	}

	#username{
		top: 11%;
	}

	#password{
		top: 23%;
	}

	.myClock{
		zoom: 0.72;
		-webkit-transform: scale(0.9); 
		-ms-transform: scale(0.9); 
		-o-transform: scale(0.9); 
		-moz-transform: scale(0.9);
		padding-right: 0px;
		padding-left: 3%;
		padding-bottom: 3%;
		padding-top: 3%;
	}

  .range .control-group {
    width: 202px;
  }

  .range .date-to {
    width: 185px;
  }
}

@media (min-width: 601px) and (max-width: 699px) {
	#clockPosition{
		width:43%;
    max-width: 280px;
    min-width: 280px;
	}

	.myfancyInput {
	    width: 50%;
	    font-size: 25px;
	}

	#username{
		top: 12%;
	}

	#password{
		top: 23%;
	}

	.myClock{
		zoom: 0.58;
		-webkit-transform: scale(0.9); 
		-ms-transform: scale(0.9); 
		-o-transform: scale(0.9); 
		-moz-transform: scale(0.9);
		padding-right: 0px;
		padding-left: 3%;
		padding-bottom: 3%;
		padding-top: 3%;
	}

  .range .control-group {
    width: 202px;
  }

  .range .date-to {
    width: 185px;
  }
}

@media  (min-width: 401px) and (max-width : 600px) {
 #clockPosition{
    width: 288px;
  }

  .myfancyInput {
      width: 55%;
      font-size: 25px;
  }

  #username{
    top: 10%;
  }

  #password{
    top: 23%;
  }

  .myClock{
    zoom: 0.6;
    -webkit-transform: scale(0.9); 
    -ms-transform: scale(0.9); 
    -o-transform: scale(0.9); 
    -moz-transform: scale(0.9);
    padding-right: 0px;
    padding-left: 3%;
    padding-bottom: 3%;
    padding-top: 3%;
  }
  
  .range .control-group {
    width: 202px;
  }

  .range .date-to {
    width: 185px;
  }
}

@media only screen and (max-height: 600px) {
  .listEmployeeTable {
      height: 110px;
  }

  #employeeTableArea label {
    font-size: 15px;
  }

  #loginButton {
    top: 35%;
    font-size: 1.2em;
    width: 40%
  }

  .searchForList {
    width:100%; 
    margin-top: 0; 
    margin-right: 0;
  }

  .myButton {
    text-align: center;
    font-size: 1.2em !important;
    margin-bottom: 1% !important;
  }

  .listEmployeeTable {
      height: 228px;
  }

  .slideno {
    width: 100%;
  }

  .currentIp {
    font-size: 9px;
  }

  .btn-lg { width: 110%; }

  .range .control-group {
    width: 202px;
  }

  .range .date-to {
    width: 185px;
  }
}



@media  (min-width: 410px) and (max-height:400px){
 #clockPosition{
    display: none;
  }

  .myfancyInput {
      width: 60%;
      font-size: 25px;
  }

  #username{
    top: 10%;
  }

  #password{
    top: 35%;
  }

  #loginButton {
    top: 58%;
    width: 25%;
  }

  .listEmployeeTable {
      height: 60px;
  }

  .currentIp {
    font-size: 9px;
  }

  .btn-lg { width: 110%; }

  .range .control-group {
    width: 202px;
  }

  .range .date-to {
    width: 185px;
  }
}

@media  (max-width : 400px) and (min-height: 400px){
 #clockPosition{
    width:68%;
    left: -5%;
    bottom: 4%;
    max-width: 240px;
    min-width: 240px;
  }

  .myfancyInput {
      width: 75%;
      font-size: 25px;
  }

  #username{
    top: 10%;
  }

  #password{
    top: 23%;
  }

  .myClock{
    zoom: 0.5;
    -webkit-transform: scale(0.8); 
    -ms-transform: scale(0.8); 
    -o-transform: scale(0.8); 
    -moz-transform: scale(0.8);
    padding-right: 0px;
    padding-left: 3%;
    padding-bottom: 3%;
    padding-top: 3%;
  }

  .range .control-group {
    width: 202px;
  }

  .range .date-to {
    width: 185px;
  }
} 

@media  (max-height:400px) and (max-width: 409px){
 #clockPosition{
    width:100%;
    max-width: 190px;
    left: 40%;
    bottom: 4%;
  }

  .myfancyInput {
      width: 75%;
      font-size: 18px;
  }

  #username{
    top: 10%;
  }

  #password{
    top: 25%;
  }

  #loginButton {
    top: 43%;
    font-size: 14px;
  }

  .myClock{
    zoom: 0.4;
    -webkit-transform: scale(0.8); 
    -ms-transform: scale(0.8); 
    -o-transform: scale(0.8); 
    -moz-transform: scale(0.8);
    padding-right: 0px;
    padding-left: 2%;
    padding-bottom: 2%;
    padding-top: 2%;
  }

  .searchForList {
    width:100%; 
    margin-top: 0; 
    margin-right: 0;
  }

  .currentIp {
    font-size: 9px;
  }

  .range .control-group {
    width: 202px;
  }

  .range .date-to {
    width: 185px;
  }
}


/*  ********************** MEDIA QUERIES MOBILE  ********************** */


/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    .table-search ::-webkit-input-placeholder {
        font-size: 13px !important;
    }

        #main-container {
            height: 100% !important;
        }
        
        #main-article {
            height: 90% !important;
        }
        
	#clockPosition{
          max-width: 420px !important;
          min-width: 400px !important;
	}
        
	.myClock{
		zoom: 0.82 !important; 
		-webkit-transform: scale(0.9) !important; 
    -ms-transform: scale(0.9) !important; 
    -o-transform: scale(0.9) !important; 
    -moz-transform: scale(0.9) !important;
    padding-right: 0px;
    padding-left: 2.5%;
    padding-bottom: 2.5%;
    padding-top: 2.5%;
	}

  .myfancyInput {
      font-size: 32px;
  }

	#username{
		position: absolute;
		top: 9%;
		left: 5%;
	}

	#password{
		position: absolute;
		top: 22%;
		left: 5%;
	}

  #loginButton {
    top: 32%;
    width: 18%;
  }

  #main-aside {
    overflow: hidden !important;
  }

  .btn-start {
     font-size: 1.3em !important;
  }
   
  .table-search label {
      display:none;
   }

   body #timeSheetModal .modal-content {
       width: 110% !important;
       left: 0% !important;
    }

  .slideno {
      width: 100%;
  }

  .searchForList {
    width:100%; 
    margin-top: 0; 
    margin-right: 0;
  }

  .myButton {
    width: 135px !important;
    font-size: 0.9em !important;
    margin-bottom: 1% !important;
  }

  .listEmployeeTable {
      height: 380px !important;
  }

  .divMyButton .myButton{
    padding-top: 10% !important;
    padding-bottom: 10% !important;
  }  

  .divMyButtonDown{
     padding-top: 5%!important;
  }

  .divMyButtonStart .myButton{
    padding-top: 5% !important;
    padding-bottom: 5% !important;
  }

  .desktop-period {
    display: none !important;
  }

  .mobile-period {
      display: block !important;
  }
  
  .mobile-period .mobilePeriodContent {
    padding-top: 10px !important;
  }

  .custom-select {
    width: 70px !important;
    line-height: 2.6 !important;
    margin-left: 0px !important;
    padding: 4px 0 0 20px !important;
  }

  .custom-select option {
      background: none !important;
  }
  
  select#periodlist1{
     margin-top:0px !important;
  }

  .period-list {
    margin-left: 0px !important;
  }
  
  header ul.dropdown-menu {
      margin-top: 14px !important;
  }
  .options-date {
      padding-top: 5px !important;
  }

  .table-search .input-group {
      width: 432px !important;
  }

  
  
   #listEmployeeTable {
     overflow: auto !important;
      height: 550px !important;
  }
  
  #load {
    float: right !important;
    margin-top: 0px !important;
  }
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    #main-container {
        height: 100% !important;
    }

    #main-article {
        height: 90% !important;
    }
	#clockPosition{
		width:52% !important;
    max-width: 420px !important;
    min-width: 400px !important;
	}

	.myClock{
		zoom: 0.85 !important;
    -webkit-transform: scale(0.9) !important; 
    -ms-transform: scale(0.9) !important; 
    -o-transform: scale(0.9) !important; 
    -moz-transform: scale(0.9) !important;
    padding-right: 0px;
    padding-left: 2.5%;
    padding-bottom: 2.5%;
    padding-top: 2.5%;
	}

	#username{
		position: absolute;
		top: 12%;
		left: 5%;
	}

	#password{
		position: absolute;
		top: 21%;
		left: 5%;
	}

  #loginButton {
    top: 28%;
    width: 22%;
  }
  
  .table-search label {
      display:none;
  }

   .row{
       margin-left: 0px !important;
   }
   
   input#dateto, input#datefrom {
      width: 96px !important; 
   }

   body #timeSheetModal .modal-content {
       width: 115% !important;
       left: -5% !important;
    }
   
  .listEmployeeTable {
      height: 530px !important; 
  }

  .searchForList {
    width:100%; 
    margin-top: 0; 
    margin-right: 0;
  }

  .myButton {
    text-align: center;
    margin-bottom: 2% !important;
  }

  .btn-lg { width: 110%; }
  
  .options-date {
      padding-top: 5px !important;
  }  

  .desktop-period {
    display: none !important;
  }

  .mobile-period {
      display: block !important;
  }

  .custom-select {
    width: 70px !important;
    line-height: 2.6 !important;
    margin-left: 0px !important;
    padding: 4px 0 0 20px !important;
  }
  
  /*.round-div { margin-left: 118px !important; height: 40px !important; width: 372px !important;}*/
   
  .round-div-2 {
      margin-left: 148px !important; height: 40px !important; width: 372px !important;
  }
 
  .custom-select option {
      background: none !important;
  }
  
  .mobile-period .mobilePeriodContent {
    padding-top: 10px !important;
  }

  .period-list {
      width: 300px !important;
  }
  
  header ul.dropdown-menu {
      margin-top: 11px !important;
  }

  .range .control-group {
    width: 202px;
  }

  .range .date-to {
    width: 185px;
  }
  
  #main-aside {
      display:none;
      overflow: hidden !important;
      margin-top:10px !important;
  }
  
  #listEmployeeTable {
     overflow: auto !important;
      height: 370px !important; 
  }
  
  #load {
   width: 500px !important;
   float: none !important;
   backgroud: #000 !important;
   text-align:center !important; 
    margin: 0 auto !important;
  }

  .table-search .input-group {
      width: 492px !important;
  }
  
  .activity-log-header {
      margin:0 auto !important;
      width: 500px !important; 
  }
  
  .table-search {
	width: 500px !important;
  }
  
  .employee-table-column table{
    width: 500px !important;
  }
}


/* smartphone (landscape) ----------- */
@media only screen and (orientation : landscape) and(min-device-width : 320px) and (max-device-width : 480px) {
	.myfancyInput {
	    width: 80%;
	    font-size: 25px;
	}

	#clockPosition{
		display: none;
	}

  #username{
    top: 12%;
  }

  #password{
    top: 32%;
  }

  #loginButton {
    top: 50%;
    width: 25%;
    font-size: 1.2em;
  }

  .listEmployeeTable {
      height: 100px;
  }

  .myButton {
    font-size: 1.3em;
    text-align: center;
    margin-bottom: 2% !important;
  }

  .reason-sm {
      padding-left: 0%;
  }

  .searchForList {
    width:100%; 
    margin-top: 0; 
    margin-right: 0;
  }

  .imgFixed {
    width: 50%;
    z-index: 1; 
    position: fixed; 
    bottom: 20px;
    left: 50%;
  }

  .currentIp {
    font-size: 9px;
  }

  .btn-lg { width: 110%; }
  
  .range .control-group {
    width: 202px;
  }
  
  .range .date-to {
    width: 185px;
  }
}

/* smartphone (portrait) ----------- */
@media only screen and (orientation : portrait) and(min-device-width : 320px) and (max-device-width : 480px) {
	.myfancyInput {
	    width: 80%; 
	    font-size: 25px;
	}

	#clockPosition{
    width:120% !important;
    max-width: 384px;
    bottom: -2% !important;
      left: -38% !important;
  }
  .myClock{
    zoom: 0.8 !important; 
    -webkit-transform: scale(0.35); 
    -ms-transform: scale(0.35); 
    -o-transform: scale(0.35); 
    -moz-transform: scale(0.35);
    padding-right: 0px;
    padding-left: 2.5%;
    padding-bottom: 2.5%;
    padding-top: 2.5%;
  }

  .listEmployeeTable {
      height: 220px;
  }

  .slideno {
      width: 100%;
  }

  #resultName {
    font-size: 15px !important;
  }

  #employeeTableArea label {
    font-size: 15px;
  }

  .listEmployeeTable tr:first-child td {
    font-size: 12px;
  }
  
  .myButton {
    font-size: 1.3em;
    text-align: center;
    margin-bottom: 2% !important;
  }

  #loginButton {
    width: 45%;
    font-size: 1.2em;
  }

  .reason-sm {
      padding-left: 0%;
  }

  .searchForList {
    width:100%; 
    margin-top: 0; 
    margin-right: 0;
  }

  .currentIp {
    font-size: 9px;
  }
  
  .btn-lg { width: 110%; }

  .range .control-group {
    width: 202px;
  }

  .range .date-to {
    width: 185px;
  }
}