@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,500,600,700,800,900&display=swap');
body { 
    font-family: 'Lato'; 
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #f0f0f0;
    color: #505050;
}
body img {
  max-width: 100%;
}
button, input {
  font-family: 'Lato';
}
 
h1,
h2,
h3,
h4 {
  font-weight: 700;
  margin: 15px 0px;
  color: #444;
}
h1 {
  font-size: 45px;
  text-align: center;
  margin: 0px 0px;
}
h2 {
  font-size: 30px;
  margin: 25px 0px;
}
h4 {
  font-size: 22px;
}
h5 {
  font-size: 22px;
}
a {
  color: #181818;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}


.t-l {
  font-size: 35px;
}
h3,
.t-m {
  font-size: 22px;
}
.t-s {
  font-size: 16px;
}
.p-hero {
  font-size: 30px;
  line-height: 28px;
}
.p-xl {
  font-size: 28px;
  font-weight: 800;
  line-height: 28px;
}
.p-l {
  font-size: 18px;
  line-height: 28px;
}
p,
.p-m {
  font-size: 16px;
  line-height: 28px;
}
.p-s {
  font-size: 14px;
}
.center {
  text-align: center;
}

.flip {
  transform: rotate(-180deg);
}
/************************************* NEW CSS ****************************************/



/***********************
****** NEW INLINE ******
***********************/
.inline-con {
  font-size: 0;
}
.inline-con.vcenter .inline {
  vertical-align: middle;
}
.inline-con.hcenter,
.inline-con.icenter .inline {
  text-align: center;
}
.inline-con.lright .inline:last-child {
  text-align: right;
}
.inline-con .inline:last-child {
  margin-right: 0;
}
.inline {
  display: inline-block;
  vertical-align: top;
  margin-right: 15px;
  box-sizing: border-box;
  font-size: 14px;
  text-align: left;
}
.i1 {
  width: calc(1 * (100% - 165px) / 12);
}
.i2 {
  width: calc(2 * (100% - 165px) / 12 + 1 * (15px));
}
.i3 {
  width: calc(3 * (100% - 165px) / 12 + 2 * (15px));
}
.i4 {
  width: calc(4 * (100% - 165px) / 12 + 3 * (15px));
}
.i5 {
  width: calc(5 * (100% - 165px) / 12 + 4 * (15px));
}
.i6 {
  width: calc(6 * (100% - 165px) / 12 + 5 * (15px));
}
.i7 {
  width: calc(7 * (100% - 165px) / 12 + 6 * (15px));
}
.i8 {
  width: calc(8 * (100% - 165px) / 12 + 7 * (15px));
}
.i9 {
  width: calc(9 * (100% - 165px) / 12 + 8 * (15px));
}
.i10 {
  width: calc(10 * (100% - 165px) / 12 + 9 * (15px));
}
.i11 {
  width: calc(11 * (100% - 165px) / 12 + 10 * (15px));
}

.rpad10 {
  padding-right: 10px;
}
.rpad20 {
  padding-right: 20px;
}
.rpad40 {
  padding-right: 40px;
}
.lpad10 {
  padding-left: 10px;
}
.lpad20 {
  padding-left: 20px;
}
.lpad40 {
  padding-left: 40px;
}


/***********************
****** NEW FLEX ******
***********************/
.fCon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 0;
}
.flex {
    font-size: 14px;
}
.f1 {
  width: calc(1 * 100% / 12);
}
.f2 {
  width: calc(2 * 100% / 12);
}
.f3 {
  width: calc(3 * 100% / 12);
}
.f4 {
  width: calc(4 * 100% / 12);
}
.f5 {
  width: calc(5 * 100% / 12);
}
.f6 {
  width: calc(6 * 100% / 12);
}
.f7 {
  width: calc(7 * 100% / 12);
}
.f8 {
  width: calc(8 * 100% / 12);
}
.f9 {
  width: calc(9 * 100% / 12);
}
.f10 {
  width: calc(10 * 100% / 12);
}
.f11 {
  width: calc(11 * 100% / 12);
}
.f12 {
  width: calc(12 * 100% / 12);
}
.fCon.fRev {
  flex-wrap: wrap-reverse;
}
.fCon div {
  box-sizing: border-box;
}
.fCon .pad {
  padding: 30px 40px;
  box-sizing: border-box;
  font-size: 14px;
}
.fCon .pad h3 {
  margin-top: 0;
}
.fCon .pad p {
  margin: 0;
  margin-top: 15px;
}

/********************
******* HOVER *******
********************/
.hvr {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 51%;
  right: 51%;
  top: 0;
  background: #315990;
  height: 5px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr:hover:before, 
.hvr:focus:before, 
.hvr:active:before {
  left: 0;
  right: 0;
}

/*********** 
GENERAL
***********/
#ml {
  z-index: 2;
  position: fixed;
  width: 199px;
  top: 0;
  left: 0;
  height: 100vh;
  max-height: 100vh;
  background-color: #24282c;
  border-right: 1px solid #000;
}
#mm {
  z-index: 1;
  position: fixed;
  padding-left: 200px;
  padding-top: 60px;
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  overflow-y: scroll;
}
#mr {
  z-index: 2;
  position: fixed;
  overflow: hidden;
  top: 0;
  right: -280px;
  padding-top: 60px;
  width: 280px;
  height: 100vh;
  background-color: #fafcfe;
  border-left: 1px solid rgba(0,0,0,.3);
  box-shadow: -1px 0 7px 0 rgba(0,0,0,.1);
}




/*********
HEADER 
*********/
/*********
HEADER 
*********/
#mm .menu {
  z-index: 11;
  position: fixed;
  left: 15px;
  top: 20px;
  font-size: 20px;
}
#mm header {
  position: fixed;
  top: 0;
  left: 200px;
  z-index: 10;
  background-color: rgba(250,252,254,.94);
  border-bottom: 1px solid rgba(0,0,0,.17);
  box-shadow: 0 0 2px rgba(0,0,0,.07);
  text-shadow: 0 1px 0 #fff;
  padding: 10px 40px;
  box-sizing: border-box;
  width: calc(100% - 200px);

  display: flex;
  align-items: center;
}
#mm header div {
  margin: 0px 15px;
  position: relative;
}
#mm header div span {
  border-bottom: 1px dotted #999;
  padding-bottom: 5px;
  position: relative;
}
#mm header div strong {
  z-index: 1;
  display: none;
  position: absolute;
  width: 0;
  height: 0;
  border-right: 9px solid transparent;
  border-bottom: 9px solid #9f9f9f;
  border-left: 9px solid transparent;
  top: 27px;
  left: 0;
  right: 0;
  margin: auto;
}
#mm header div strong::before {
  z-index: 2;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff;
  border-left: 8px solid transparent;
  top: 1px;
  left: -8px;
}
#mm header div.date ul {
  padding: 0;
}
#mm header ul {
  display: none;
  list-style: none;
  padding: 5px 0;
  margin: 0;
  position: absolute;
  top: 35px;
  background: #fff;
  border: 1px solid #d7d7d7;
  box-shadow: 3px 3px 4px rgba(0,0,0,.015);
  min-width: 100px;
  text-shadow: none;
}
#mm header ul li a {
  display: block;
  white-space: nowrap;
  padding: 10px 20px;
  font-size: 13px;
}
#mm header ul li a:hover {
  background: #e1e1e1;
  text-decoration: none;
}
#mm header ul hr {
  border: 0;
  border-bottom: 1px solid #d7d7d7;
  margin: 5px 0px;
}
#mm header h1 {
  display: inline-block;
  vertical-align: middle;
  font-size: 18px;
  line-height: 40px;
  margin: 0 25px 0 0;
}
#mm header button {
  position: absolute;
  right: 40px;
  top: 15px;
}
#mr header {
  position: absolute;
  top: 0;
  background-color: rgba(250,252,254,.94);
  border-bottom: 1px solid rgba(0,0,0,.17);
  box-shadow: 0 0 2px rgba(0,0,0,.07);
  text-shadow: 0 1px 0 #fff;
  padding: 0px 20px;
  font-size: 16px;
  font-weight: bold;
  line-height: 60px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
#mr h3 {
  margin-top: 0;
}

.con {
  padding: 40px;
}
.top-btn {
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
  margin: 20px;
}
.box-col {
  display: inline-block;
  vertical-align: top;
  max-width: 500px;
  width: 50%;
}
.box-col+.box-col {
  margin-left: 20px;
}
.box {
  z-index: 0;
  background-color: #f8fafc;
  position: relative;
  border: 1px solid #d7d7d7;
  border-radius: 2px;
  box-shadow: 3px 3px 4px rgba(0,0,0,.015);
  padding: 20px;
}
.box+.box {
  margin-top: 20px;
}
.box.box-small {
  max-width: 500px;
}
.box.np {
  padding: 0;
}
.box h3 {
  margin: 5px 0px 25px 0;
  font-size: 17px;
  text-transform: uppercase;
}
.box h5 {
  margin-bottom: 10px;
  font-size: 16px;
  text-transform: uppercase;
}
button {
  cursor: pointer;
  white-space: nowrap;
  font-weight: 600;
  outline: 0;
  border-radius: 3px;
  line-height: normal;
  text-shadow: 0 1px 0 #fff;

  padding: 7px 14px 6px;
  border-top: 1px solid #dedede;
  border-bottom: 1px solid #cfcfcf;
  border-left: 1px solid #d6d6d6;
  border-right: 1px solid #d6d6d6;
  background-image: linear-gradient(to bottom,#fdfdfd,#ebedef);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.5);
  color: #505050;
  font-size: 12px;
}
button:focus {

  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.1);
}
.btn {
  text-decoration: none;
  line-height: normal;
  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
  outline: 0;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  cursor: pointer;
  border-radius: 3px;
  color: #fff;
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  background-color: #05a905;
  border: none;
  padding: 10px 30px 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.24), 0 1px 3px rgba(0,0,0,.2);
  background-image: linear-gradient(to bottom,transparent,rgba(0,0,0,.13));
}
.btn.dark {
  background-color: #d83b53;
}
.btn:focus {
  opacity: 0.8;
}
.btn.big {
  padding: 16px 50px 15px;
  font-size: 20px;
}
.btn.red {
  background: #bf0000;
}
.sub,
.sub a {
  color: rgba(0,0,0,.35);
}

/*******
NAV.INC
*******/
#ml #logo {
  padding: 0 15px;
  box-shadow: 0 -1px 0 rgba(255,255,255,0), 0 1px 0 rgba(255,255,255,.05);
  text-align: center;
  height: 60px;
  position: relative;
}
#ml #logo img {
  height: 35px;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  margin: auto; 
  transform: translateY(-50%);
}
#ml ul {
  padding: 15px 0px;
  margin: 0;
  box-shadow: 0 -1px 0 rgba(255,255,255,0), 0 1px 0 rgba(255,255,255,.03);
}
#ml ul li {
  display: block;
  position: relative;
}
#ml ul li .fa-chevron-down {
  z-index: 1;
  position: absolute;
  right: 11px;
  top: 11px;
  font-size: 11px;
  font-weight: normal;
  display: none;
}
#ml ul li:hover .fa-chevron-down {
  display: inline-block;
}
#ml ul li a,
#ml ul li.d {
  z-index: 2;
  display: block;
  padding: 8px 25px;
  color: #999;
  letter-spacing: normal;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  text-shadow: 0 1px 0 #000;
}
#ml ul li a:hover,
#ml ul li.d:hover {
  background-color: rgba(0,0,0,.2);
}
#ml ul li a.active,
#ml ul li.d.active {
  color: #fff;
  background-color: rgba(0,0,0,.9);
}
#ml ul li.d.exp {
  background-color: rgba(0,0,0,.2);
}
#ml ul li.d.exp+ul {
  display: block;
}
#ml ul ul {
  display: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
}
#ml ul ul li:hover {
  background-color: rgba(0,0,0,.2);
}
#ml ul ul li.active {
  color: #fff;
  background-color: rgba(0,0,0,.9);
}
#ml ul ul li span {
  display: inline-block;
  border-left: 2px solid #999;
  margin-left: 4px;
  padding-left: 15px;
  line-height: 20px;
}

#ml i.fa,
#ml i.fa+span {
  display: inline-block;
  vertical-align: middle;
}
#ml i.fa {
  margin-right: 10px;
}
#ml i.fa-circle {
  font-size: 7px;
  margin-left: 10px;
}
.bdy {
    max-width: 600px;
    margin: 0 auto;
}
.bdy.s {
  width: 400px;
}




#hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    color: #000;
    padding: 0px 20px;
    position: relative;
}
#ftr {
    background: #0a0a0a;
    color: #fff;
    padding: 15px;
}



/***********
RIGHTNAV.INC
***********/
#mr ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#mr ul li {
  border: 1px solid #ddd;
}
#mr ul li+li {
  border-top: 0;
}
#mr ul li a {
  display: block;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
#mr ul li a:hover {
  text-decoration: none;
  background: #eee;
}


/*********** 
FORMS
***********/
form.form {

}
form.form .fRow.fCon {
  justify-content: space-between;
}
form.form .fRow+.fRow {
  margin-top: 20px;
}
form.form .fRow.fInline {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  margin-top: 0;
}
form.form .fRow .f8 {
  padding-left: 40px;
  box-sizing: border-box;
}
form.form .fRow .f4 input[type='submit'] {
  background: #FECA54;
}
form.form .half {
  width: calc(50% - 20px);
}
form.form .third {
  width: calc(30% - 10px);
}
form.form label {
  display: block;
  width: 100%;
  font-size: 12px;
  margin-bottom: 5px;
  font-weight: bold;
  text-transform: uppercase;
}
form.form label p {
  margin: 0;
  font-weight: normal;
  text-transform: none;
}
form.form input[type='text'],
form.form input[type='date'],
form.form input[type='password'],
form.form textarea {
  width: 100%;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  font-size: 16px;
  font-family: 'Lato';
  line-height: 18px;
  -webkit-appearance: none;
}
form.form textarea {
  min-height: 150px;
}
form.form input[type='radio'],
form.form input[type='checkbox'] {
  display: inline-block;
  vertical-align: middle;
  margin: 5px 0px;
}
form.form input[type='radio']+label,
form.form input[type='checkbox']+label {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  font-weight: normal;
  text-transform: none;
  margin: 5px 15px 5px 5px;
  width: auto;
}
form.form input[type="submit"] {
  text-decoration: none;
  line-height: normal;
  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
  outline: 0;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  cursor: pointer;
  border-radius: 3px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  background-color: #d83b53;
  border: none;
  padding: 12px 30px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.24), 0 1px 3px rgba(0,0,0,.2);
  background-image: linear-gradient(to bottom,transparent,rgba(0,0,0,.13));
  float: right;
}
form.form input[type="submit"]:hover {
  opacity: 0.75;
}
input[name="dates"] {
  width: 230px;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  font-size: 16px;
  font-family: 'Lato';
  line-height: 18px;
  -webkit-appearance: none;
  text-align: center;
  margin: 15px;
}


form.form .fDiv {
  display: flex;
  align-items: center;
  padding: 0px 40px;
}
form.form .fDiv h4 {
  font-size: 16px;
  margin: 15px 25px;
  margin-left: calc(100% - 210px);
}
form.form hr+.fDiv h4 {
  margin: 0 25px 15px 25px;
  margin-left: calc(100% - 210px);
}
form.form .fDiv label {
  width: calc(100% - 200px);
  margin-right: 10px;
  line-height: 20px;
  text-align: right;
  font-size: 10px;
  color: #999;
}
form.form .fDiv input[type='text'],
form.form .fDiv input[type='date'],
form.form .fDiv input[type='password'],
form.form .fDiv textarea {
  width: 190px;
  border-radius: 0;
  margin-top: -1px;
  padding: 8px;
  text-shadow: none;
}
form.form .fDiv .upload-box {
  width: 210px;
  box-sizing: border-box;
  border: 2px dashed rgba(0,0,0,.22);
  padding: 30px;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  color: #adadad;
}
form.form hr {
  border: 0;
  border-top: 1px solid #ddd;
  margin-top: 25px;
  padding-top: 25px;
}

#uploadFile {
  display: none;
}
.upload {
  display: block;
  width: 100%;
  border: 1px dashed #ccc;
  background: #f7f7f7;
  padding: 80px 25px;
  box-sizing: border-box;
  text-align: center;
}
.upload span {
  display: inline-block;
  padding: 10px 25px;
  text-decoration: none;
  text-transform: uppercase;
  background: #1b578e;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  border-radius: 3px;
  cursor: pointer;
}
.upload span:hover {
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  background: #103454;
}
.card input + label,
.card select + label,
.card textarea + label {
  margin-top: 15px;
}

/************
SELECT
************/
.select {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
.select select,
form.form div.dcon .select select {
  font-family: "Lato";
  width: 100%;
  padding: 10px 15px;
  box-sizing: border-box;
  line-height: 20px;
  border: 1px solid #ddd;
  color: #000;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 4px;
  position: relative;
  padding-right: 40px;
  font-size: 16px;
  background: #fff;
}
.select .arrow {
  border: solid black;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  position: absolute;
  top: 37%;
  right: 20px;
  z-index: 999;
}
.select .arrow.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.select+.select {
  margin-left: 5px;
}


/* menu */
ul#menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    padding-bottom: 15px;
}
ul#menu li.mob {
    display: none;
}
ul#menu li {
    display: inline-block;
    vertical-align: middle;
    margin-left: 32px;
}
ul#menu li a {
    color: #000;
    text-decoration: none;
    font-size: 15px;
    padding: 50px 3px;
}
#menu-btn,
#menu-icon {
    display: none;
    cursor: pointer;
    padding: 8px;
}
#menu-icon span {
    background: transparent;
    display: inline-block;
    height: 2px;
    position: relative;
    transition: background 0.2s ease-out;
    width: 30px;
}
#menu-icon span::before,
#menu-icon span::after {
    background: #fff;
    content: "";
    height: 100%;
    position: absolute;
    transition: all 0.2s ease-out;
    width: 100%;
}
#menu-icon span::before {
    top: 5px;
}
#menu-icon span::after {
    top: -5px;
}
#menu-btn:checked ~ #menu-icon span::before {
    transform: rotate(-45deg) translate(4px, -3px);
}
#menu-btn:checked ~ #menu-icon span::after {
    transform: rotate(45deg) translate(4px, 3px);
}
#menu-btn:checked ~ #menu-icon span {
    background: transparent;
}
#menu-btn:checked ~ ul#menu {
    width: 350px;
}



/*************
TABLES
*************/
.table h3 {
  margin: 15px 40px;
  font-size: 16px;
}
.table {
  width: 100%;
  overflow-x: scroll;
}
.table table {
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
}

.table table.lright th:last-child,
.table table.lright td:last-child {
  text-align: right;
}
.table table.lright td:last-child i.fa {
  margin-left: 5px;
}
.table table th {
  padding: 15px 10px;
  text-align: left;
  font-weight: 800;
  font-size: 13px;
  background: #fff;
}
.table table tbody tr:nth-child(odd) {
  background: #f4f4f4;
}
.table table tbody tr:nth-child(even) {
  background: #ececec;
}
.table table tbody tr:nth-child(odd):hover {
  background: #ddd;
}
.table table tbody tr:nth-child(even):hover {
  background: #ddd;
}
.table table tbody th {
  text-align: left;
  padding: 10px;
}
.table table th.number {
  width: 30px;
}

.table table td.icons {
  width: 100px;
  text-align: center;
}
.table table td {
  padding: 10px;
  font-size: 14px;
  position: relative;
  white-space: nowrap;
}
.table table td:first-child,
.table table th:first-child {
  padding-left: 40px;
}
.table table td:last-child,
.table table th:last-child {
  padding-right: 40px;
}


.table table span.init {
  display: inline-block;
  vertical-align: middle;
  width: 22px;
  line-height: 22px;
  color: #fff;
  background: #3fc8b4;
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
  margin-right: 10px;
  text-align: center;
  border-radius: 2px;
}
.table table span.init+b {
  display: inline-block;
  vertical-align: middle;
  font-weight: normal;
}
.table table th.t25,
.table table td.t25 {
  width: 25px;
}
.table table th.t50,
.table table td.t50 {
  width: 50px;
}
.table table td.t100 {
  width: 100px;
}
.table table [class*=cat] {
  display: inline-block;
  font-size: 9px;
  padding: 5px;
  background: #666;
  color: #fff;
  font-weight: normal;
  text-transform: uppercase;
  margin-right: 5px;
  text-shadow: none;
  border-radius: 2px;
}
.table table .cat2 {
  background: #c30000;
  color: #fff;
}


.table table td span.dot::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: #94d095;
}
.table table td span.dot.green::before {
  background: #94d095;
}
.table table td span.dot.red::before {
  background: #f58080;
}

.table table td .icheck-peterriver {
  display: inline-block;
  vertical-align: middle;
}





.table table i.fa {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #949494;
  color: #949494;
  border-radius: 4px;
  padding: 10px;
  line-height: 15px;
  width: 15px;
  text-align: center;
  cursor: pointer;
}
.table table i.fa+i.fa {
  margin-left: 5px;
}
.table table a:hover i.fa {
  background: #f0f0f0;
}
.table table i.fa-trash {
  border-color: #ff0000;
  color: #ff0000;
  margin-left: 5px;
}
.table table i.fa-bars {
  border: 0;
  font-size: 20px;
  color: #000;
  cursor: move;
}
.table table a {
  text-decoration: underline;
}

/**************
INDEX.PHP
**************/
#dashboard h2 {
  display: inline-block;
  vertical-align: middle;
  margin: 15px 10px;
}
#dashboard i.fa-chevron-right,
#dashboard i.fa-chevron-left {
  display: inline-block;
  vertical-align: middle;
}
#dashboard .box {
  max-width: 450px;
  margin: 0 auto;
}
#dashboard .box .inline {
  line-height: 24px;
}

/*************
SETTINGS.PHP
*************/
#settings ul#tabs {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0;
}
#settings ul#tabs li {
  z-index: 2;
  background: #fff;
  border-bottom: 0;
  position: relative;

  display: inline-block;
  vertical-align: bottom;
  padding: 10px 30px;
  border: 1px solid #d7d7d7;
  border-bottom: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  text-shadow: 0 1px 0 #fff;

  font-size: 12px;
  box-shadow: inset 0 -4px 4px -4px rgba(0,0,0,.06);
  background-color: #f0f2f4;
  cursor: pointer;
}
#settings ul#tabs li.active {
  top: 1px;
  border-top-right-radius: 2px;
  border-top-left-radius: 2px;
  padding: 15px 30px;
  position: relative;
  top: 1px;
  background-color: #fff;
  box-shadow: none;
  font-size: 14px;
  font-weight: bold;
}
#settings ul#tabs li+li {
  margin-left: -1px;
}
#settings .tab-cons {
  display: none;
  color: #505050;
}
#settings #tab-con {
  z-index: 1;
  border: 1px solid #d7d7d7;
  position: relative;
  background: #fff;
  padding: 40px;
}
#settings #tab-con div {
  width: 500px;
  margin: 0 auto;
}
#settings #tab-con i,
#settings #tab-con input[type="text"] {
  display: inline-block;
  display: inline-block;
  font-style: normal;
  margin-right: 5px;
}
#settings #tab-con input[type="text"] {
  margin: 0px 5px;
  padding: 7px;
  border-radius: 3px;
  border: 1px solid #dedede;
  font-size: 16px;
}
#settings #tab-con input[type="radio"],
#settings #tab-con input[type="checkbox"] {
  display: inline-block;
  vertical-align: top;
  width: 20px;
  margin-top: 7px;
} 
#settings #tab-con span {
  display: inline-block;
  line-height: 30px;
  width: calc(100% - 50px);
}
#settings #tab-con strong,
#settings #tab-con b {
  display: block;
  color: #000;
  margin-bottom: 5px;
} 



/******
POP BOX
******/
#dim {
  display: none;
  position: fixed;
  z-index: 9998;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}
.pop {
  display: none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  left: 0;
  margin: auto;
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  z-index: 9999;
}
.pop#emailfwd, 
.pop#trash {
  width: 400px;
  text-align: center;
}
.pop#emailfwd p, 
.pop#trash p {
  margin-top: 0;
  font-size: 13px;
}
.pop#trash .btn+.btn {
  margin-left: 10px;
}
.pop#emailfwd form {
  margin: 0;
}
.pop#emailfwd div {
  display: flex;
  align-items: center;
}
.pop#emailfwd input[type='text'] {
  width: calc(100% - 155px);
  margin-right: 5px;
  font-family: 'Lato';
}
.pop#emailfwd input[type='submit'] {
  width: 150px;
}



/*************
CALENDAR.PHP
*************/
#calendar h2 {
  display: inline-block;
  vertical-align: middle;
  margin: 40px 10px;
}
#calendar i.fa-chevron-right,
#calendar i.fa-chevron-left {
  display: inline-block;
  vertical-align: middle;
}
[class*=btn-cal],
[class*=btn-cal]:hover {
  background: transparent;
  border: 1px solid #ccc;
  color: #ccc;
}
[class*=btn-cal].active {
  color: #fff;
}
.btn-cal1.active {
  background: #ffdd99;
  border: 1px solid #ffdd99;
}
.btn-cal2.active {
  background: #88ccff;
  border: 1px solid #88ccff;
}
.btn-cal3.active {
  background: #ff0000;
  border: 1px solid #ff0000;
}
.cal-cat strong {
  display: inline-block;
  width: 20px;
  height: 20px;
}
.cal-top {

}
.cal-con {
  text-shadow: none;
  border-collapse: collapse;
}
.cal-nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-collapse: collapse;
}
.cal-day {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-collapse: collapse;
  border: 1px solid #e2e2e2;
  border-width: 1px 0 0 1px
}
.cal-nav div,
.cal-day div {
  width: calc(100%/7);
  box-sizing: border-box;
  background: #f8fafc;
}
.cal-nav div {
  text-align: center;
  border: 0;
  color: #949494;
  font-size: 12px;
  text-transform: uppercase;
  background: #f8fafc;
  margin-bottom: 5px;
}
.cal-day div {
  min-height: 120px;
  text-align: right;
  border: 1px solid #e2e2e2;
  border-width:  0 1px 1px 0;
}
.cal-day div b {
  display: inline-block;
  padding: 5px;
  margin-bottom: 5px;
  font-size: 13px;
}
.cal-day div strong {
  display: block;
  text-align: left;
  padding: 5px;
}
.cal-day div.off {
  background: rgba(0,0,0,.05)
}
.cal-day div.today b {
  background: rgba(0,0,0,.1);
}
.cal-day span {
  display: block;
  background: #ffcbb9;
  padding: 5px;
  border-radius: 3px;
}
.cal-day span:hover {
  opacity: 0.8;
}
.cal-day span a {
  display: block;
  font-size: 13px;
}
.cal-day span a:hover {
  text-decoration: none;
}
.cal-day span+span {
  margin-top: 3px;
}
.cal-day i {
  display: block;
  font-style: normal;
  margin-top: 8px;
  font-size: 12px;
}



/**************
LINKS
**************/
#links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#links ul li+li {
  border-top: 1px solid #ddd;
}
#links ul li a {
  display: block;
  padding: 20px;
}
#links ul li a:hover {
  text-decoration: none;
  background: #eee;
}



@media(max-width: 760px) {
  /*********** 
  GENERAL
  ***********/
  .con {
    padding: 20px;
  }
  .table {
    width: 100%;
    overflow-x: scroll;
  }
  #ml {
    left: -199px;
  }
  #mm {
    width: 100%;
    padding-left: 0;
    padding-bottom: 100px;
    position: relative;
  }
  .bdy.s,
  .bdy {
    width: 100%;
  }

  /***********
  HEADER 
  **********/
  #mm header {
    flex-wrap: wrap;
    width: 100%;
    left: 0;
    padding: 10px 50px;
  }
  #mm header h1 {
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
  }
  #mm header div {
    font-size: 13px;
    margin: 0px 7px;
  }
  #mm header button {
    right: 15px;
  }
  #mr .con {
    padding: 20px;
  }



  /*********
  SETTINGS
  *********/
  #settings #tab-con {
    padding: 20px;
  }
  #settings #tab-con div {
    width: 100%;
  }
  form.form .fDiv {
    padding: 0px 20px;
  }


  /********* 
  TIMESHEET
  *********/
  #mm #timesheet header {
    text-align: center;
    justify-content: space-around;
  }
  #mm #timesheet header div {
    margin: 10px 5px;
  }


}