/*=====================
BODY
======================*/
body {
  background:rgba(26,11,81,0.04);
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  /*font-family: 'Rajdhani', sans-serif;*/
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  color: #0a2b1d;
}

main {
  flex: 1 0 auto;
}
.caption {
  font-size: 1.25rem;
  font-weight: bold;
}
.caption-uppercase {
  font-size: 1.25rem;
  font-weight: bold;
  text-transform: uppercase;
}
.no_cap{
  text-transform: none;
}
/*inner right bar*/
.hts-inner-right{
  height:100vh;
  background-color:#e0e0e0;
}
.btn-small {
  height: 24px;
  text-transform: none;
  line-height: 24px;
  font-size: 12px;
  padding: 0 0.5rem;
}
.btn-medium {
  height: 32px;
  text-transform: none;
  line-height: 32px;
  font-size: 14px;
  padding: 0 0.7rem;
}

.btn-sm {
  height: 30px;
  line-height: 20px;
  padding: 0 0.3rem;
}
/*=====================
TOP/NAV BAR
======================*/
#nav-mobile{
  height: 100%;
  padding-bottom: 0;
}
nav {
  position: relative;
  z-index: 9;
  clear: both
}
nav ul li {
  position: relative
}
nav .side-nav li a{
  font-size: 14px;
}

#logo-container {
  padding-left: 10px;
}
.brand-logo img{
  width:120px; padding-top:7px;
}
@media only screen and (max-width: 360px) {
  .brand-logo img{
    width:100px; padding-top:5px;
  }
}
.user-view a{
  margin-top:-20px
}
.user-view a:hover{
  background:none;
}
.nav-advert{
  padding-left: 20px;
  padding-top: 30px;
}
.nav-advert img{
  width: 240px;
}

nav li a {
  top: -8px !important;
}
nav .dropdown-content {
  top: 57px !important;
  right: 0;
  min-width: 180px;
  left: auto !important;
  border: 0;
}
nav .dropdown-content.messages {
  width: 250px !important;
}
/*.collection {
  border: 0
}*/
.collection .collection-item .avatar .title {
  line-height: 30px;
  font-weight: 500;
}
.collection .collection-item.avatar p {
  margin: 0;
  color: #666;
}
nav .dropdown-content.listitems {
  width: 350px !important;
}
nav .dropdown-content.listitems .collection-item {
  padding: 10px 0
}
nav .dropdown-content.listitems .collection-item small {
  color: #666666;
  margin: 10px 0 0 0;
  display: block
}
nav .dropdown-content li>span {
  padding: 0
}
.dropdown-content li>a>i {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  color: #00acc1;
}
.dropdown-content li:hover, .dropdown-content li.active, .dropdown-content li.selected {
  background: #f3f3f3
}
.dropdown-content li a:hover, .dropdown-content li a.active, .dropdown-content li a.selected {
  background: #f3f3f3
}
/*.collection .collection-item {
  border: 0
}*/
.dropdown-content li.center-align {
  text-align: center
}
.counts {
  height: 20px;
  width: 20px;
  position: absolute;
  z-index: 5;
  line-height: 20px;
  text-align: center;
  font-size: 11px;
  top: 10px;
  right: 10px;
  background: #ff0057;
  display: block;
  border-radius: 10px;
  padding: 0;
}
.margin8{
  margin-top:8px;
}
/*=====================
MAIN
======================*/
.hts-body{
  padding-top: 10px;
  padding-left: 250px;
}
.hts-body .card-tabs li a{
  color: #0277bd;
}
.hts-body .card-tabs li a:hover{
  color: #4d4d4d;
}

.hts-body-header{
  padding-top: 20px;
  margin-bottom:0;
}
.hts-body-header .card{
  background-color: rgba(0,0,0,0.2);
  border-radius:0;
}
.hts-body-main .card:hover{
  -webkit-box-shadow: 0 6px 7px -2px rgba(0,0,0,0.5);
  -moz-box-shadow: 0 6px 7px -2px rgba(0,0,0,0.5);
  box-shadow: 0 6px 7px -2px rgba(0,0,0,0.5);
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  -moz-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  -webkit-transition: .3s;
  transition: .3s;
}

@media only screen and (max-width: 980px) {
  .hts-body {
    padding-left: 0;
  }
}

.card-content {
  margin-top:-5px;
  font-weight: 300;
}
.card-reveal {
  font-weight: 300;
}

.card-content h2,h3,h4,h5{
  margin-top:-5px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 300;
}

.hts-transparent {
  background-color: rgba(0,0,0,0.40);
  -webkit-box-shadow: 0 0 15px 2px rgba(255,255,255,.75);
  box-shadow: 0 0 15px 2px rgba(255,255,255,.75);
}

.light-opecity{
  opacity: 0.95;
}

/*=====================
DASHBOARD
======================*/
.dashboard .card-content{
  /*padding: 2px 0 2px 0;*/
}
.dashcards .card{
  background-color:#4fc3f7;
}
.dashcards .card:hover{
  background-color:#81d4fa;
}
.dashcards .card-image{
  padding-top: 5px;
}
.dashcards i{
  opacity: 0.5;
}
.dashcards .card-action{
  padding: 7px;
}
.dashcards span{
  text-transform: uppercase;
  color: white;
}

/*=====================
FORMS
======================*/
/* label color */
.input-field label {
  color: #000;
}
.input-field input[type=text]:focus + label {
  color: #00acc1   !important;
}
.input-field input[type=text]:focus {
  border-bottom: 1px solid #00acc1 !important;
  box-shadow: 0 1px 0 0 #00acc1 !important;
}
.input-field input[type=text].valid {
  border-bottom: 1px solid #0091ea;
  box-shadow: 0 1px 0 0 #0091ea;
}
.input-field input[type=text].invalid {
  border-bottom: 1px solid #43a047;
  box-shadow: 0 1px 0 0 #43a047;
}
.input-field .prefix.active {
  color: #0091ea;
}
/*textarea*/
.input-field textarea:focus + label {
  color: #00acc1   !important;
}
.input-field textarea:focus {
  border-bottom: 1px solid #00acc1 !important;
  box-shadow: 0 1px 0 0 #00acc1 !important;
}

/*=====================
custom table
======================*/
table a{
  color: #0a2b1d;
}
.vtableLine table th{
  padding:10px 15px 10px 15px;
  background-color:#E7E7E7;
}
.vtableLine table td{
  padding:10px 15px 10px 15px;
  border-left: 1px solid #E2E1E1;
}
/*no bg*/
.vtable table th td{
  padding:0px 15px 0px 15px;
}

.leftpad15 {
  padding: 15px;
}
/*=====================
* CUSTOM FONTS
======================*/
.hts-12{font-size:12px!important}
.hts-15{font-size:15px!important}
.hts-18{font-size:18px!important}
.hts-24{font-size:24px!important}
.hts-32{font-size:32px!important}
.hts-36{font-size:36px!important}
.hts-48{font-size:48px!important}
.hts-64{font-size:64px!important}
.hts-spin{animation:hts-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}

.btn-group .button {
  background-color:transparent;
  border: 0px solid #00bcd4;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  height: 30px;
  color: grey;
  padding: 5px 7px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  /*float: left;*/
}
.btn-group .button:not(:last-child) {
  border-right: none;
}
.btn-group .button:hover {
  background-color:#f5f5f5;
}

.styler{
  padding:5px;
  border:1px solid #ddd;
  font-size:16px;
  color:#333;
  background-image: linear-gradient(bottom, rgb(242,245,245) 0%, rgb(255,255,255) 72%);
  background-image: -o-linear-gradient(bottom, rgb(242,245,245) 0%, rgb(255,255,255) 72%);
  background-image: -moz-linear-gradient(bottom, rgb(242,245,245) 0%, rgb(255,255,255) 72%);
  background-image: -webkit-linear-gradient(bottom, rgb(242,245,245) 0%, rgb(255,255,255) 72%);
  background-image: -ms-linear-gradient(bottom, rgb(242,245,245) 0%, rgb(255,255,255) 72%);

  background-image: -webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0, rgb(242,245,245)),
          color-stop(0.72, rgb(255,255,255))
  );
  position:relative;
}

/*=====================
* PAGINATION
======================*/
ul.hezpaging{
  margin:0px;
  padding:0px;
  height:100%;
  overflow:hidden;
  font:12px 'Tahoma';
  list-style-type:none;
}

ul.hezpaging li.details{
  padding:3px 10px 3px 10px;
  font-size:14px;
}

ul.hezpaging li.dot{padding: 3px 0;}

ul.hezpaging li{
  float:left;
  margin:0;
  padding:0;
  margin-left:0;
}

ul.hezpaging li:first-child{
  margin-left:0px;
}

ul.hezpaging li a{
  color:black;
  display:block;
  text-decoration:none;
  padding:3px 10px 3px 10px;
}

ul.hezpaging li a img{
  border:none;
}
ul.hezpaging li.details{
  color:#888888;
}

ul.hezpaging li a
{
  color:#FFFFFF;
  border-radius:0px;
  -moz-border-radius:0px;
  -webkit-border-radius:0px;
}

ul.hezpaging li a
{
  color:#474747;
  border:solid 1px #B6B6B6;
  padding:5px 12px 5px 12px;
  background:#E6E6E6;
  background:-moz-linear-gradient(top,#FFFFFF 1px,#F3F3F3 1px,#E6E6E6);
  background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#F3F3F3),color-stop(1,#E6E6E6));
}

ul.hezpaging li a:hover,
ul.hezpaging li a.current
{
  background:#FFFFFF;
}
/*=====================
* HTML Editor
======================*/
.CodeMirror {
  border: 1px solid #eee;
  height: 500px;
}
/*=====================
* FOOTER
======================*/
.page-footer{
  background-color: #086089;
  padding:0;
}
.page-footer .row{
  margin-bottom:0;
}
.page-footer{
  background-color: #086089;
  padding:0;
}
.footer-copyright a{
  padding-left:50px;
  font-size:12px;
}

/*----------------------------------------
    Details
------------------------------------------*/
.app-section{
  margin-top: 9px;
}
.app-inner{
  margin-top: -10px;
}
#appList {
  padding: 0;
}
#appList .collection {
  margin: 0;
}
#appList .collection .collection-item.avatar {
  height: auto;
  padding-left: 72px;
  position: relative;
}
#appList .collection .collection-item:hover {
  background: #e1f5fe;
  cursor: pointer;
}
#appList .collection .collection-item.selected {
  background: #e1f5fe;
  border-left: 4px solid #29b6f6;
}
#appList .collection .collection-item.avatar .secondary-content {
  position: absolute;
  top: 10px;
  right: -4px;
}
#appList .collection .collection-item.avatar .secondary-content.listCap {
  right: 8px;
  font-size:12px;
}
#appList .collection .collection-item.avatar .circle {
  position: absolute;
  width: 42px;
  height: 42px;
  overflow: hidden;
  left: 15px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-size: 1.5rem;
  color: #fff;
  font-weight: 300;
  padding: 10px;
}

#appDetails {
  padding: 15px;
}

#appDetails .collection {
  border: none;
}
#appDetails .collection .collection-item.selected {
  background: #e1f5fe;
  border-left: 4px solid #29b6f6;
}
#appDetails .grey-text {
  font-size: 12px;
}

#appDetails .collection .collection-item.avatar .circle {
  position: absolute;
  width: 42px;
  height: 42px;
  overflow: hidden;
  left: 15px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-size: 1.5rem;
  color: #fff;
  font-weight: 400;
  padding: 10px;
}
.list-title{font-weight:400; font-size:16px}