@font-face {
  font-family: "Avenir";
  src: url("../font/Avenir-Light.ttf") format("truetype")
     
}
@font-face {
  font-family: "AvenirBook";
  src: url("../font/Avenir-Book.ttf") format("truetype")
     
}
@font-face {
  font-family: "AvenirBlack";
  src: url("../font/Avenir-Black.ttf") format("truetype")
     
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
/* button */
::-webkit-scrollbar-button {
  background: #00291f;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #007A5E;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #01a17c;
  cursor: grab !important;
}
/* Track */
::-webkit-scrollbar-track {
  background: #00291f;
}
/* Corner */
::-webkit-scrollbar-corner {
  background: #007A5E;
}
/* Resizer */
::-webkit-resizer {
  background: #007A5E;
}

body{
  background:#F8F8F8;
  padding:0;
  margin:0;
  font-family: "Avenir";
}
input, select{
  outline: 0px;
  font-size: 14px!important;
}
h1{
  text-transform:capitalize;
}
#logo{
  margin:20px 0;
  text-align:center;
}
#logo img{
  width:100px;
}
.nav{
  position: fixed;
  width:14%;
  min-width:140px;
  max-width: 180px;
  float:left;
  background:#007A5E;
  color:#fff;
  height:98%;
  padding:0 0 2% 0;
  z-index: 3;
}
.nav ul{
  list-style-type: none;
  cursor: pointer;
}
.nav ul li:hover{
  opacity: 0.8;
} 
.cont{
  padding:1% 0 1% 0!important;
  margin-left: 16%;
  margin-top: 90px;
  width:55%;
  float:left;
  height:auto;
}
.tool{
  position: fixed;
  right: 0;
  width:20%;
  float:right;
  padding:1% 0 1% 0!important;
  height:98%;
  background:#007A5E;
  text-align: center;
  z-index: 3;
}

.profile{
  width: 80%;
  margin:20px auto;
  background:#fff;
  padding:10px;
  border-radius: 5px;
  box-shadow: 1px 1px 5px #014233;
}
.uname{
  display: block;
  padding: 20px;
  width: 180px;
  text-align:center;
  float:left;
  border-radius: 5px;
  background:#fff;
  border:1px #ddd solid;
  box-shadow: 2px 2px 2px #eee;
  margin:5px 4px;
  font-family: "Avenir";
  font-variant:small-caps;
  text-transform:lowercase;
  font-size: 16px;
  cursor: pointer;
  
}
.uname:hover{
  opacity: 0.8;
  box-shadow: 1px 1px 2px #ccc;
}
.profilename{

  margin-top: 20px;
  font-family: "AvenirBook";
  font-size: 18px;

}
table{
  border-spacing:0;
  margin-top: 20px;
  width: 100%;
  border-right: 1px #eee solid;
  border-left: 1px #eee solid;
  border-top: 1px #eee solid;
}
th{
  padding: 5px 5px;
  font-family: "AvenirBlack";
  text-transform: uppercase;
  font-size: 14px;
  color: #ffffff;
  background:linear-gradient(185deg, rgba(0,122,94,1) 0%, rgb(4, 150, 116) 100%);
}
th:first-child{
  border-right:1px rgba(0,122,94,1) solid;
  border-radius: 5px 0 0 0;
}
th:last-child{
  border-radius: 0 5px 0 0;
}
td{
  padding: 10px 5px;
  border-bottom:1px #e8e8e8 solid;
}
.list{
  max-height: 200px;
  overflow:auto;
  padding:0 10px;
  
}
.list td{
  background:#fff;
}
.list *{
  font-size: 14px!important;
}
.title{
  padding: 10px 5px;
  font-family: "AvenirBlack";
  border-bottom:1px #007A5E solid;
  text-transform: uppercase;
  font-size: 14px;
  color: #007A5E;
  margin-top: 20px;
}
.history-row{
  font-family: "AvenirBook";
  text-transform: uppercase;
  font-size: 14px;
  cursor: pointer;

}
.history-row:hover{
  opacity: 0.7;
  
}
.history-row:hover .delete{
  display: inline;
} 

.add-mask input{
  width: 43%;
  margin:10px 5px 5px 5px;
  padding: 5px;
  border:1px #eee solid;
  border-radius: 4px;
  box-sizing: border-box;
  box-shadow: 1px 1px 2px #ccc;
}
#dialog input{
  width: 100%;
  margin:10px 5px 5px 5px;
  padding: 5px;
  border:1px #eee solid;
  border-radius: 4px;
  box-sizing: border-box;
  box-shadow: 1px 1px 2px #ccc;
}
.add-mask select, .profile select{
  width: 90%;
  margin:10px 5px 5px 5px;
  padding: 5px;
  border:1px #eee solid;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 1px 1px 2px #ccc;
}
.op-role{
  width: 100%;
  margin:10px 5px 5px 5px;
  padding: 5px;
  border:1px #eee solid;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 1px 1px 2px #ccc;
}
.hystory-rep{
  border-right:1px #eee solid;
  font-family: "AvenirBook";
  font-weight:500;
}
.hystory-rep, .hystory-per{
  width: 50%;
}
.add-rep, .del-btn, .add-btn{
  padding:10px 20px;
  background:linear-gradient(185deg, rgba(0,122,94,1) 0%, rgba(4, 150, 116) 100%);
  color:#fff;
  border-radius: 5px;
  border:0;
  margin-top: 20px;
  cursor: pointer;
}

.del-btn{
  padding:10px 20px;
  background:linear-gradient(185deg, rgba(135,32,32,1) 0%, rgb(136, 25, 25) 100%);
  color:#fff;
  border-radius: 5px;
  border:0;
  margin-top: 20px;
  cursor: pointer;
}

.ui-dialog-titlebar{
  padding:10px 20px;
  background:linear-gradient(185deg, rgba(0,122,94,1) 0%, rgba(4, 150, 116) 100%);
  color:#fff;
  border-radius: 5px;
  border:0;
}
.delete{
  float:right;
  color: #872020;
  display: none;
}

.del-user-btn{
  padding:10px 20px;
  background:linear-gradient(185deg, rgba(135,32,32,1) 0%, rgba(136, 25, 25) 100%);
  color:#fff;
  border-radius: 5px;
  border:0;
  margin-top: 10px;
  cursor: pointer;
}
.cont .history-row{
  background:#fff;
}
.current-isola:before{
  width:70px;
  height: 25px;
  font-family: "AvenirBlack";
  color:#fff;
  position:absolute;
  background:#f874ca;
  margin-left:-125px;
  margin-top:-2px;
  border-radius:3px;
  transform: rotate(270deg);
  box-shadow: 1px 1px 2px #ccc;
  content:'ISOLA';
}

.current-post:before{
  width:70px;
  height: 25px;
  font-family: "AvenirBlack";
  color:#fff;
  position:absolute;
  background:#52aeff;
  margin-left:-125px;
  margin-top:-2px;
  border-radius:3px;
  transform: rotate(270deg);
  box-shadow: 1px 1px 2px #ccc;
  content:'POST';
}

.current-tin:before{
  width:70px;
  height: 25px;
  font-family: "AvenirBlack";
  color:#fff;
  position:absolute;
  background:#383636;
  margin-left:-125px;
  margin-top:-2px;
  border-radius:3px;
  transform: rotate(270deg);
  box-shadow: 1px 1px 2px #ccc;
  content:'TIN';
}
.load{
  text-align: center;
  margin-top: 30px;
  font-size: 16px;
}
.load img{
  vertical-align: sub;
  width:18px;
}
.uclose{
  position: absolute;
  top:45px;
  right: 9%;
  color: rgb(135, 32, 32);
  cursor: pointer;
}
.role{
  position: absolute;
  margin: -38px 180px 0;
  width: 25px;
}
.role-icon-s{
  width: 25px;
  height: 25px;
  background: #89ff96;
  border-radius: 4px;
  border:1px #279f33 solid;
  margin: auto;
  color: black;
  font-weight: bold;
  text-align: center;
}
.role-icon-m{
  width: 25px;
  height: 25px;
  background: #feffa6;
  border-radius: 4px;
  border:1px #b3b42e solid;
  margin: auto;
  color: black;
  font-weight: bold;
  text-align: center;
}
.role-icon-n{
  width: 25px;
  height: 25px;
  background: #b0eeff;
  border-radius: 4px;
  border:1px #266a7a solid;
  margin: auto;
  color: black;
  font-weight: bold;
  text-align: center;
}
.role-icon-rep-s{
  width: 20px;
  height: 20px;
  background: #89ff96;
  border-radius: 4px;
  border:1px #279f33 solid;
  margin: 0 5px;
  padding-top: 4px;
  color: black;
  font-weight: bold;
  text-align: center;
  float:left;
}
.role-icon-rep-m{
  width: 20px;
  height: 20px;
  background: #feffa6;
  border-radius: 4px;
  border:1px #b3b42e solid;
  margin: 0 5px;
  padding-top: 4px;
  color: black;
  font-weight: bold;
  text-align: center;
  float:left;
}
.role-icon-rep-n{
  width: 20px;
  height: 20px;
  background: #b0eeff;
  border-radius: 4px;
  border:1px #266a7a solid;
  margin: 0 5px;
  padding-top: 4px;
  color: black;
  font-weight: bold;
  text-align: center;
  float:left;
}
.month{
  font-family: "AvenirBlack";
}
.h-cal, .h-user{
  color: #007A5E;
}
.rep-user{
  background:#fff;
}
.rep-user:nth-child(1),
.rep-user:nth-child(2),
.rep-user:nth-child(3),
.rep-user:nth-child(4),
.rep-user:nth-child(5){
  background:#fff7f7;
}
#logo:hover{
  opacity:0.8;
  cursor: pointer;
}
button:hover{
  box-shadow: inset 0px 0px 6px #333;
}
#credit{
  padding: 5px;
  position:fixed;
  left:5px;
  bottom:5px;
  text-align:center;
}
#credit img{
  margin:auto;
  width: 100%;
  max-width:140px;
}
.cont-top{
  position: fixed;
  top: 0px;
  background:#fff;
  height: 80px;
  width: 100%;
  left:0;
  z-index: 2;
  box-shadow: 1px 1px 4px #ccc;
  margin-bottom: 120px;
}
.cont-top h1{
  position: fixed;
  left:16%;
}
#add-user-btn{
  position: fixed;
  right:25%;
}