@font-face { font-family: square-721; src: url(../fonts/square-721-bt.ttf); }
@font-face { font-family: Futura-Bk-BT; src: url(../fonts/Futura-Book-font.ttf); }

body { 
 font-family: Futura-Bk-BT;  
 font-size:90%; 
 color:#258; 
 }

a { text-decoration:none; }
a:hover, a:active, a:focus { text-decoration:none; }
 
label {
 font-size:80%; 
 margin:0px; 
 color:#58a; 
}

td {
  border: 1px dotted #ddd;
  padding:2px;
  min-width:100px;
  border-bottom: 1px dotted #bbb;
  text-align:center;
}

tr:hover {
  border-bottom: 1px solid #5588aa;
  box-shadow: 0 4px 8px 0 rgba(85, 136, 170, 0.4), 0 6px 20px 0 rgba(250, 250, 100, 0.2);
}

input[type=text] { border: none; border-bottom: 1px solid #58a; }
input[type=text]:hover{border-bottom: 1px solid #f66; }

input[type=email] { border: none; border-bottom: 1px solid #58a; }
input[type=email]:hover{border-bottom: 1px solid #f66; }

input[type=date] { border: none; border-bottom: 1px solid #58a; }
input[type=date]:hover{border-bottom: 1px solid #f66; }


.mobcard { max-width:400px;  margin-left: auto ; margin-right: auto ; padding:5px; border:1px #fff solid; }

.dispText { border-bottom:1px #ddeeff dotted; text-align:right; color:#000; }
.dispMenuList { border-bottom:1px #ddeeff dotted; text-align:left; color:#000; padding:5px; padding-left:25px; margin-top:10px; background: white url(../icons/edit1.svg) left no-repeat; background-size: 20px;}

.footer{ position: fixed; bottom: 0; background-color: #efefef; width:100%; text-align:center;  }

.block-1 {
  display:inline-table;
  margin: 5px;
  padding: 5px;
}
.block-1:hover {
  box-shadow: 0 4px 8px 0 rgba(50, 250, 50, 0.2), 0 6px 20px 0 rgba(0, 0, 250, 0.19);
}

.block-2 {
  display:inline-table;
  width:130px;
  height:130px;
  box-shadow: 0 4px 8px 0 rgba(255, 50, 50, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin:10px;
  padding:10px;
}
.block-2:hover {
  box-shadow: 0 4px 8px 0 rgba(50, 250, 50, 0.2), 0 6px 20px 0 rgba(0, 0, 250, 0.19);
}

.block-3 {
  padding:5px;
  border-bottom: 1px dotted #336666;
  margin-bottom:5px;
}
.block-3:hover {
  box-shadow: 0 4px 8px 0 rgba(50, 250, 50, 0.2), 0 6px 20px 0 rgba(0, 0, 250, 0.19);
}

.block-4 {
  display:inline-table;
  width:80px;
  height:80px;
  box-shadow: 0 2px 4px 0 rgba(255, 50, 50, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
  margin:5px;
  padding:5px;
  font-size: 8pt;
}
.block-4:hover {
  box-shadow: 0 4px 8px 0 rgba(50, 250, 50, 0.2), 0 6px 20px 0 rgba(0, 0, 250, 0.19);
}

.head-link{
  padding:9px;
  color: #f33;
  font-size: 75%;
}
.nav-item {
background: #eee;
border-bottom: 1px dotted #336666;
text-align:right;
}

.att-status{font-size: 90%; background-color:#ffffff; font-weight:bold;}
.att-time-in{font-size: 65%; background-color:#ddffff;}
.att-time-out{font-size: 65%; background-color:#ffddff;}
.att-time-work{font-size: 65%; background-color:#ffffdd; font-weight:bold;}

.header-11{
  font-size: 140%; 
  font-weight: 800;
  background-color:#ccc;
  color: #f33;
  padding:5px;
  text-align:center;
}

.header-12{
  font-size: 120%; 
  background-color:#f8f9fa;
  color: #933;
  border-bottom: 1px solid #FFCC33;
  padding:5px;
  text-align:left;
}

.nav_header {
  width: 100%;
  height: 40px;
  color: #fff;
  background-image: linear-gradient(#369, #9cf);  
  position: fixed;
  box-shadow: 0 4px 8px 0 rgba(200, 0, 0, 0.2), 0 2px 8px -2px rgba(0, 0, 0, 0.3), 0 4px 2px -2px rgba(200, 200, 200, 0.2);
  padding: 4px;
  z-index: 2;
}
.nav_title {
  font-weight: 400;
  font-size: 24px;
  margin: 0;
}
.nav_icon { 
  width: 32px;
}

.navbar {
    padding: 0px;

}
.navbar-toggler {
    padding: 0px;
    font-size: 1rem;
    line-height: 0;
}    
.main {
  padding-top: 50px;
  overflow-x: hidden;
  overflow-y: auto;
  text-align : center;
}
.align_middle{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.user_img {
 border-radius:15px; 
 height:70px;
}
.label-2 {
font-size:70%; 
color:#999; 
font-family:square-721, Verdana; 
}

.block-map {
  background: #ccc;
}
.block-map:hover {
  background-color: yellow;
}

.btn-1 { 
border-radius: 50px; 
background-color:#5588aa; 
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 2px 9px 1px rgba(0, 0, 0, 0.12), 0 4px 2px -2px rgba(0, 0, 0, 0.2);
width:80%;
color: #fff;
text-align:center;
}
.btn-2 { 
border-radius: 50px; 
background-color:#363; 
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 2px 9px 1px rgba(0, 0, 0, 0.12), 0 4px 2px -2px rgba(0, 0, 0, 0.2);
width:80%;
color: #fff;
text-align:center;
}
.btn-3 { 
border-radius: 50px; 
background-color:#5588aa; 
padding-left:30px;
padding-right:30px;
color: #fff;
text-align:center;
}
.btn-3:hover {
  color: #fff;
  box-shadow: 0 4px 8px 0 rgba(85, 136, 170, 0.4), 0 6px 20px 0 rgba(250, 250, 100, 0.2);
}


.summary_bar {
  background-image: linear-gradient(#eee, #ddd, #eee);  
  padding: 5px;
}

.row-1 {
  margin: 5px;
  padding: 10px;
  border-bottom: 1px dotted #5588aa;
  text-align: left; 
}
.row-1:hover {
  border-bottom: 1px solid #5588aa;
  box-shadow: 0 4px 8px 0 rgba(50, 250, 50, 0.2), 0 6px 20px 0 rgba(0, 0, 250, 0.19);
}
.row-2 {
  padding: 5px;
  text-align: left; 
  background-color:#def; 
  font-weight:800;
}
.row-3 {
  padding: 5px;
  border-bottom: 1px dotted #5588aa;
  text-align: left; 
}
.row-3:hover {
  border-bottom: 1px solid #5588aa;
  box-shadow: 0 4px 8px 0 rgba(50, 250, 50, 0.2), 0 6px 20px 0 rgba(0, 0, 250, 0.19);
}