/*.dashboard-header {
    border-bottom: 1px solid #3c3c3c;
    background-color: rgba(0, 0, 0, 0.72);
}*/
body, html{
  height: 100%;
}
.dashboard-header{
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.20);
}
.header-right {
  text-align: center;
}
.header-txt {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.header-txt h2 {
  font-size: 26px;
  font-weight: 300;
  margin: 0;
  height: 60px;
  line-height: 60px;
}
.welcome-msg{
  text-align: center;
  margin-bottom: 50px;
}
.welcome-msg h2{
  font-size: 36px;
  font-weight: 300;
  margin: 0;
}
.welcome-msg h2 strong {
  font-weight: 400;
}
.dashboard-success-message{
  font-size: 14px;
  padding: 0;
}
.dashboard-success-message .fa {
  font-size: 10px;
  padding: 5px;
  margin-bottom: 0;
}
.dashboard-section {
  padding-top: 60px!important;
  padding-bottom: 40px!important;
}
.bodywrap{
  margin-top:0;
}
.device-left,.lapscreen-right{
  width:200px;
  top: 60px; 
  bottom: 0px;
  position: fixed;
  background-color:#fff;
  height: calc(100% - 103px)!important;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.20);
  display: flex;
  flex-direction: column;
}
.device-left,.working-area-center,.lapscreen-right,.bodywrap{
  height:100%
}
.working-area-center {
  margin: 0 200px 0 280px;
  /*overflow: auto;*/
  position: absolute;
  height: calc(100% - 103px)!important;
  width: calc(100% - 480px)!important;
}
.working-area-center .usercase-panel {
  overflow: auto;
  height: 100%;
  padding: 15px;
}
.device-left{
  left:0;
  width: 280px;
}
.lapscreen-right{
  right:0;    
}
.device-left h3, .lapscreen-right h3 {
  font-size: 20px;
  background-color: #545454;
  padding: 10px;
  margin: 0;
  color: #fff;
}
.device-left .devices-area,
.lapscreen-right .lapscreen-area {
  flex: 1;
  overflow: hidden;
}
.device-left .devices-area > .device-lists,
.lapscreen-right .lapscreen-area > .lapscreen-lists{
  overflow: auto;
  height: 100%;
  padding: 10px 30px 10px 10px;
  width: 220px;
  text-align: center;
}
.lapscreen-right .lapscreen-area > .lapscreen-lists {
  padding: 10px 15px 10px 10px;
}
.device-left .devices-area > .device-lists{
  width: 300px;
}
.dashboard-footer{
  position: fixed;
  z-index: 2;    
  background-color: rgba(0, 0, 0, 0.72);
}
.dashboard-footer .copyright {
  margin: 0;
  height: 40px;
  line-height: 40px;
}
.imac {
  width: 260px;
  height: 146.25px;
  background-color: #d0d0d0;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mac-lp {
  width: 200px;
  height: 125px;
  background-color: #d0d0d0;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.smartphone {
  width: 260px;
  height: 146.25px;
  background-color: #d0d0d0;    
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ls-view1 {
  width: 150px;
  height: 111.70212765448px;
  background-color: #d0d0d0;    
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ls-view2 {
  width: 150px;
  height: 111.70212765448px;
  background-color: #d0d0d0;
  margin: 40px auto 20px;
  transform: rotate(90deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ls-view3{
  width: 150px;
  height: 111.70212765448px;
  background-color: #d0d0d0;
  margin: 40px auto 20px;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ls-view4{
  width: 150px;
  height: 111.70212765448px;
  background-color: #d0d0d0;
  margin: 40px auto 20px;
  transform: rotate(270deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* profile setting css */
.profile-section {
  padding: 90px 0 10px;
  overflow: auto;
  min-height: 100%;
}
.profile-section .fp-tableCell {
  vertical-align: top;
}
.profile-section .profile-box {
  min-height: 250px;
}
.profile-section .profile-box .profile-picture-area {
  padding: 5px 15px;
  position: relative;
}
.profile-picture-area h3 {
  text-align: center;
  margin: 0 0 5px;
  font-size: 24px;
}
.profile-picture-area p {
  text-align: center;
  margin: 0 0 5px;
  font-size: 14px;
  line-height: initial;
}
.profile-info{
  padding: 10px 15px;
}
.profile-info label {
  color: #ababab;
  font-size: 13px;
  font-weight: 400;
  margin: 0;
  line-height: initial;
  text-align: left!important;
  padding-top: 10px!important;
}
.profile-info label.active{
  color: #000;
}
.profile-info .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #ccc;
}
.profile-info .form-control::-moz-placeholder { /* Firefox 19+ */
  color: #ccc;
}
.profile-info .form-control:-ms-input-placeholder { /* IE 10+ */
  color: #ccc;
}
.profile-info .form-control:-moz-placeholder { /* Firefox 18- */
  color:#ccc;
}
.profile-info .form-control {
  color: #000;
  font-weight: bold;
  margin-bottom: 5px;
  border:0;
  border-bottom: 1px solid #d6d6d6;
  font-size: 14px;
  padding-left: 5px;
  padding-right: 5px;
}
.profile-info .form-control.active {
  border-bottom: 1px solid #000;
}
.profile-info .field-value:last-child{
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.profile-info .field-value.disabled {
  color: #b3b3b3;
  font-weight: normal;
}
.profile-footer{
  position: relative;
}
.profile-info .btn {
  margin: 12px 0;
  border-radius: 0;
  text-transform: capitalize;
  letter-spacing: 0;
  padding: 10px;
}

.profile-content h2 {
  font-weight: 300;
  font-size: 24px;
  position: relative;
}
.profile-content h2 {
  font-weight: 300;
  font-size: 24px;
  position: relative;
  border-bottom: 1px solid #fff;
  display: inline-block;
  padding-bottom: 3px;
}
.profile-content h2:before {
  content: '';
  position: absolute;
  width: 50px;
  height: 4px;
  background-color: #f5951e;
  bottom: -2px;
  left: 0;
}
.profile-content ul {
  margin: 0 0 30px;
  padding: 0;
}
.profile-content ul li {
  list-style: none;
  display: inline-block;
  color: #a9a9a9;
  position: relative;
  margin: 10px 0;
  width: 40%;
}
.profile-content ul li.active {
  color: #000;
  font-weight: 500;
}
.profile-content .status ul li.active:before {
  content: '';
  background-color: #2ca93b;
  width: 15px;
  height: 15px;
  position: absolute;
  border-radius: 50px;
  left: -10px;
  top: -8px;
}
.profile-content  .status ul li.active:after {
  content: '';
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  position: absolute;
  top: -5px;
  left: -5px;
}

/* user case css */
.create-user-case p {
  font-size: 18px;
  font-style: italic;
  color: #333;
}
.create-user-case .btn {
  /*background-color: transparent;
  color: #bfbfbf;*/
  border-radius: 0;
  font-size: 18px;
  padding: 15px 30px;
}
.create-user-case .btn:hover{
  background-color: #fff;
  color: #333;
}
.user-setting {
  vertical-align: top;
}
.user-setting > a {
  font-size: 40px!important;
  padding: 0 10px!important;
  height: 61px;
  line-height: 64px!important;
}
.user-setting > ul li a{
  padding: 3px 10px;
}
.vertical-alignment-helper {
  display:table;
  height: 100%;
  width: 100%;
}
.vertical-align-center {
  display: table-cell;
  vertical-align: middle;
}
.vertical-align-center .modal-content {
  width:inherit;
  height:inherit;
  margin: 0 auto;
}
.confirm-password input{
  border-bottom: 1px solid #333;
  padding: 10px 5px;
}

/* event upload css */
.event-upload{
  padding: 0 20px;
}
.event-upload .nav-justified{
  text-align: center;
}
.event-upload .nav-justified > li {
  text-align: center;
  display: inline-block;
  width: 120px;
}
.event-upload .nav.nav-justified > li > a { 
  position: relative; 
  display: inline-block;
}
.event-upload .nav.nav-justified > li > a:hover,
.event-upload .nav.nav-justified > li > a:focus { 
  background-color: transparent; 
}
.event-upload .nav.nav-justified > li > a > .quote {
  position: absolute;
  left: 0px;
  top: 0;
  opacity: 0;
  width: 30px;
  height: 30px;
  padding: 3px;
  background-color: #f5951e;
  border-radius: 15px;
  color: #fff;  
}
.event-upload .nav.nav-justified > li.active > a > .quote { 
  opacity: 1; 
}
.event-upload .nav.nav-justified > li > a > img { 
  box-shadow: 0 0 0 5px #f5951e; 
}
.event-upload .nav.nav-justified > li > a > img { 
  max-width: 100%; 
  opacity: .3; 
  -webkit-transform: scale(.8,.8);
  transform: scale(.8,.8);
  -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.event-upload .nav.nav-justified > li.active > a > img,
.event-upload .nav.nav-justified > li:hover > a > img,
.event-upload .nav.nav-justified > li:focus > a > img { 
  opacity: 1; 
  -webkit-transform: none;
  transform: none;
  -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.event-upload .tab-pane .tab-inner { 
  padding: 30px 0 20px; 
}
.image-view {
  display: flex;
  flex-wrap: wrap;
}
.image-view p{
  margin-top: 30px;
  color: #999;
}
.image-view .image-thumb {
  height: 240px;
  width: 240px;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #a7a7a7;
  margin: 5px 10px 10px 0!important;
}
.image-view .image-thumb img {
  height: 200px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
}
.event-upload .tab-pane .tab-inner h4 {
  position: relative;
}
.event-upload .tab-pane .tab-inner h4:before {
  content: '';
  position: absolute;
  width: 50px;
  height: 3px;
  background-color: #f5951e;
  bottom: -5px;
  left: 0;
}

@media (min-width: 768px) {
  .event-upload .nav.nav-justified > li > a > .quote {
    left: auto;
    top: auto;
    right: 20px;
    bottom: 0px;
  }  
}

@media (max-width: 767px){
  .modal-sm {
    width: 300px;
  }
  .navbar-header {
    z-index: 1;
    position: relative;
  }
  .logo > img {
    max-height: 35px;
    width: auto;
  }
  .welcome-msg {
    margin-bottom: 20px;
  }
  .profile-section .profile-box .profile-picture-area {
    padding: 0;
  }
  .profile-info {
    padding: 10px 0;
  }
  .profile-section {
    padding: 90px 0 60px;
  }
}