body{font-family: 'Lato', sans-serif; font-weight: 400; font-size: 18px; height: 100vh;}
* {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a:hover, a:visited, a:focus, a:active{ outline: none; border: 0; }
button:focus{ outline: none; border: 0px; }
p{font-size:18px; line-height: 29px;}
h1{font-weight: 600; color: #5776d2;}
/* Light Theme */
img{max-width: 100%;}
.left-content {
  float: left;
  width: 60%; position: relative;
  padding: 0; height: 100vh;
}
.right-content {
  float: right;
  width:40%; text-align: center; position: relative;
  padding: 0; background: #ff0000;
}
.login-right{text-align: center; height: 100vh;background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(90,161,255,1) 0%, rgba(244,248,255,1) 100%, rgba(246,249,255,1) 100%, rgba(255,255,255,1) 100%);}
.lr-span{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.login-bg{float: left; width: 100%; height: 98.5vh;}
.view-bg{background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(90,161,255,1) 0%, rgba(244,248,255,1) 100%, rgba(246,249,255,1) 100%, rgba(255,255,255,1) 100%);}
.login-page{width: 400px; margin:30px auto; background: #fff; padding: 30px;-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;}
.view-page{width:100%; margin:10px 0; float: left; padding:10px 20px; text-align: left;}
.logo{text-align: left; float: left; width: 15%;padding: 15px; }
.login-page .logo{width: 100%; padding: 30px;}
#frmContact{position: relative; width:100%; float: right;}
#frmContact button{position: absolute; right: 0; top: 10px; background: transparent; border: transparent; cursor: pointer; z-index: 9;}
.search-box{position: absolute; right: 30px; top:30px; width:300px;}

.my-notification, .my-notification2{float: left; width: 70%; padding:20px 0 40px 0;}
.my-notification .container, .my-notification2 .container{width: 100%;}
.my-notification .view-list{height:auto; }

/*Global Form CSS*/
.floating-label {position: absolute; top: -27px; left:15px; user-select: none; z-index: 1;background: #fff; padding: 0 8px; }
.floating-label-field {color: rgba(44, 62, 80, .75); border-width: 0; z-index: 2; }
.floating-label-field:focus {outline: 0; box-shadow: 0; }
.floating-label-field::placeholder {color: rgba(44, 62, 80, .5); }
.floating-label, .floating-label-field {font: inherit; line-height: 1; display: block; width:auto; }
.floating-label-field, .floating-label-wrap {position: relative; float: left; width: 100%;}
.floating-label-wrap-half{position: relative; float: left; width: 48%;}
.profile-form .floating-label-wrap-half{position: relative; float: left; width:100%;}
.fl-right{ float:right;}
.floating-label-field{ margin-bottom:50px;}
.floating-label-field--s1 {transition: border-color .25s ease-in-out; color: #9E9E9E; border:1px solid #4884d3; background-color: transparent; font-size:18px; }
.floating-label-field--s1 + .floating-label {transition: transform .25s, opacity .25s ease-in-out; transform-origin: 0 0; opacity: 1; }
.floating-label-field--s1:focus, .floating-label-field--s1:not(:placeholder-shown) {border-color: rgba(239, 9, 2, 0.5); }

.floating-label-field--s1:valid:not(:placeholder-shown) {border-color:#4884d3; color: #000;}
.floating-label-field--s1:invalid {border-color:#4884d3; }
.floating-label-field--s1:not(textarea), .floating-label-field--s2:not(textarea), .floating-label-field--s3:not(textarea) {max-height: 64px; }
.floating-label-textarea--s1{min-height: 90px; transition: border-color .25s ease-in-out; color: #9E9E9E; border:1px solid #4884d3; background-color: transparent; font-size:18px; border-radius: 8px; padding:20px;}
.floating-label-field--s1, .floating-label-field--s1 + .floating-label, .floating-label-field--s2, .floating-label-field--s2 + .floating-label {padding: 0 20px; height:50px; color: #4884d3; line-height:50px;-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;}
.floating-label-field--s2{height: auto;}
.floating-label-field--s1 + .floating-label, .floating-label-field--s2 + .floating-label {z-index: 10; }
.floating-label-field--s1::placeholder, .floating-label-field--s3::placeholder {color: #545454; }
.floating-label-field--s1{overflow: hidden; resize: none;}
button.btn, a.btn{ background: #4884d3; color: #fff; padding:0px; border: 0; width: 180px; height: 40px; line-height: 40px; text-align: center; border-radius: 0px; margin:0; font-family: 'Lato', sans-serif; font-size: 20px; cursor: pointer; -webkit-border-radius: 8px;
-moz-border-radius: 8px; border-radius: 8px;}
.profile-form button.btn{float: right; margin-bottom: 30px;}
.okay-btn{ min-width: 220px; }
.forgot{position: relative; margin-top: -30px;}
 .floating-label-field--s1 + .floating-label{height: 30px; padding: 0 4px;}
.view-icon{background: url(../images/view.svg) 96% center no-repeat; background-size: 20px;}
.cld-icon{background: url(../images/calendar.svg) 96% center no-repeat; background-size: 20px;}
.time-icon{background: url(../images/schedule.svg) 96% center no-repeat; background-size: 20px;}

.forgot { position: relative; margin-top: -40px; display: block; float: left; margin-bottom: 40px; width: 100%;}
.modal-title{color: #4884d3; font-size: 24px; font-weight: 900;}
.modal-content{-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:1	0px;}
.login-page .title, .view-page .title{color: #b54d14; text-align:center; text-transform: uppercase; font-weight: 900; font-size: 22px; float: left; width: 100%; margin-bottom: 40px;}
/* Navigation ---------------------------------------------------------------------------------*/
.navbar{ margin: 0; padding:35px 0 0; width: 100%; position: fixed; z-index: 100; top: 0; left: 0;}
.navbar .container{ max-width: 100%; padding: 0; }
.navbar-toggler{ display: flex; border: 0; padding: 0; margin: 0 35px 0 0; border-radius: 0; position: relative; background: url(../images/nav-icon.png);width: 60px; height: 60px; font-size: 0; }
.navbar-light .navbar-brand{ display: inline-block; padding: 0; border: 0; border-radius: 0; width: 60px; height: 60px; margin: 0 0 0 35px; cursor: pointer;}
.navbar-light .navbar-brand img{ max-width: 100%; height: auto; }
.navbar-popup{ position: fixed; right: -100%; top: 0; background-color: #000; display: inline-block; width: 100%; height: 100%; box-sizing: border-box; padding: 35px 35px 0;width: 0; -webkit-transition: all .3s ease .15s; -moz-transition: all .3s ease .15s; -o-transition: all .3s ease .15s; -ms-transition: all .3s ease .15s; transition: all .3s ease .15s; z-index: 999; overflow-y: auto;}
.nav-open .navbar-popup{ right: 0; width: 100%; }
.navbar-popup .navbar-toggler-close{ position: absolute; right: 74px; top: 40px; background: transparent; border: 0; cursor: pointer;}
.navbar-popup .navbar-toggler-close .navbar-toggler-close-icon { position: absolute; width: 64px; height: 64px; opacity: 1; }
.navbar-popup .navbar-toggler-close .navbar-toggler-close-icon:hover {opacity: 1; }
.navbar-popup .navbar-toggler-close .navbar-toggler-close-icon:before,
.navbar-popup .navbar-toggler-close .navbar-toggler-close-icon:after { position: absolute; left: 15px; content: ' '; height: 58px; width: 6px; background-color: #9E9E9E; border-radius: 5px; }
.navbar-popup .navbar-toggler-close .navbar-toggler-close-icon:before {transform: rotate(45deg); }
.navbar-popup .navbar-toggler-close .navbar-toggler-close-icon:after {transform: rotate(-45deg); }
.navbar-popup .navbar-brand{margin:0;}
.navbar-popup ul.navbar-nav{ width: 100%; margin: 0px auto 0; padding:0 40px; max-width: 90%; }
.navbar-popup ul.navbar-nav li.nav-item{ padding: 0; margin:50px 0px; position: relative; }
.navbar-popup ul.navbar-nav li.nav-item:after{ content: ''; width: 80%; height: 10px; position: absolute; left: 0; top: 50px; background-color: #9E9E9E; z-index: -1; }
.navbar-popup ul.navbar-nav li.nav-item:nth-child(2n+0):after{ top: 42px; width: 40%; }
.navbar-popup ul.navbar-nav li.nav-item a.nav-link{ color: #fff; font-size: 53px; font-family: 'Lato', sans-serif; margin: 0; display: inline-block; width: auto; padding: .4rem 3.4rem .4rem 0rem; background: #000; z-index: 1; }
.navbar-popup ul.navbar-nav li.nav-item a.nav-link:hover, .navbar-popup ul.navbar-nav li.nav-item.active a.nav-link {color: #4884d3;}
.navbar-popup ul.navbar-nav li.nav-item:nth-child(2n+0) a.nav-link{ padding: .4rem 0rem .4rem 3.4rem; margin-left: 27%; }

.connect-form form{ max-width: 812px; margin:35px auto 0px auto; padding: 0; }
.cms-container{float:left; width: 100%; padding: 0; margin-bottom: 30px;}
.view-list{float: left; width: 100%; padding: 10px 20px;-webkit-border-radius: 10px;
-moz-border-radius:10px;
border-radius:10px; background: #fff; margin-bottom: 30px; position: relative; z-index: 99;}
.view-list a h5, .view-list a p{color: #000;}
.view-icons{float: left; width: 10%; padding:20px 0;}
.view-cont{float: left; width: 80%; padding:10px 20px;}
.view-arrow{float: right; width: 15px; padding:24px 0;}
.view-cont h5{margin:0; font-size: 20px;}
.view-cont p{font-size: 16px;}
.copyright{font-size: 16px; text-align: center; position: fixed; bottom: 0px; left: auto; width: 100%; padding:10px 0;}
.copyright p{font-size: 16px; color: #fff;}
.clear-both{float: left; width: 100%; height: 1px; clear: both;}
.btn-fullwidth{width: 100%!important;}

/* Cursor CSS*/
.circle-cursor {position: fixed;left: 0;top: 0;pointer-events: none;-webkit-border-radius: 50%;border-radius: 50%;}
.circle-cursor.white {mix-blend-mode: difference;-webkit-mix-blend-mode: difference;-ms-mix-blend-mode: difference;}
.circle-cursor.multiply-cursor {mix-blend-mode: multiply;-webkit-mix-blend-mode: multiply;-ms-mix-blend-mode: multiply;}
.circle-cursor.first.circle-cursor--inner:after {-webkit-transform: translate(-50%,-50%) scale(1);-ms-transform: translate(-50%,-50%) scale(1);transform: translate(-50%,-50%) scale(1);}
.circle-cursor--outer {z-index: 11000;width: 25px;height: 25px;border: 1px solid #4884d3;background-color: #4884d3;}
.touch .circle-cursor {display: none !important;}

.title-inner{float: left; width:50%; padding: 0 0 30px 0; color: #fff; font-size: 24px; font-weight: 600;}
.title-inner a{color: #fff;}
.search{float: right; width: auto; padding: 0;}
#myfile {
  border: dotted 2px #4884d3;
  padding: 6px;
  margin-bottom: 10px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  min-height: 100px;
  width: 100%;
  text-align: center;
  padding: 40px;
}
input[type=file]::-webkit-file-upload-button {
  border: 2px solid #6c5ce7;
  padding: .2em .4em;
  border-radius: .2em;
  background-color: #a29bfe;
  transition: 1s;
}

input[type=file]::file-selector-button {
  border:transparent;
  padding: .2em .4em;
  border-radius: .2em;
  background:url(../images/brouse.png) center center no-repeat; width: 100%; height:70px;
  transition: 1s; color: #fff; cursor: pointer;
}

input[type=file]::-webkit-file-upload-button:hover {
  background-color: transparent;
  border: 2px solid transparent;
}

input[type=file]::file-selector-button:hover {
  background-color: transparent;
  border: 2px solid transparent;
}

#my-button {
  position: absolute;
  border: none;
  background:url(../images/send.svg) right top no-repeat;
  width: 50px;
  height: 25px;
  text-align: center;
  left: auto;
  top: 50px;
  z-index: 1;
  right: 10px; cursor: pointer; font-size: 0; z-index: 999;
}

#file-upload-cont{
    position: relative;
}

#overlay{
 position: absolute;
 z-index: 1;
left: 0;
}
#original {
  opacity:1;
  position: absolute;
  z-index: 100;
  right: 50px;
  width: 30px;
  height: 50px;
}
input#original[type="file"]::file-selector-button {
  border: transparent;
  padding: .2em .4em;
  border-radius: .2em;
  background: url(../images/attach.svg) center center no-repeat;
  width: 100%;
  height: 50px;
  transition: 1s;
  color:transparent;
  cursor: pointer;
}

.buttons{float: left; width: 100%; padding: 0 0 30px 0; clear: both; position: relative;}
select {border-color: #4884d3}
.buttons .contactbtn{position: relative!important; top: 0!important; float:right;}

.complain-list{float:left; width:100%; margin:0; min-height: 180px;}
.cl-left{width: 98%; float: left;}
.view-list h1{padding-bottom: 30px;}
.clear{float: left; width: 100%; height: 1px;}
.icon-center{float: left; width:auto; position: relative; left: 50%; margin-left: -41px; padding:40px 0;}
.complain-list a h5, a .cl-location, a .cl-issue, .complain-list a p, .complain-list a h4{color: #a7a7a7;}
.cl-left h4{clear: both; float: left; width: 100%; margin:0;}
.cl-right{float:left; width: 10px; margin-top:8px;}
.cl-left h5, .cl-left h4{font-size:20px; font-weight: 600; float: left;}
.tedline{float: left; width:70px; height: 10px;-webkit-border-radius: 30px;
-moz-border-radius: 30px; border-radius: 30px; background: #f65b5b; margin:18px 0 0 30px;}
.orgline{float: left; width:70px; height: 10px;-webkit-border-radius: 30px;
-moz-border-radius: 30px; border-radius: 30px; background: #f6c35b; margin:18px 0 0 30px;}
.cl-location{background: url(../images/place-24px.svg) left top no-repeat; padding-left: 25px; width:47%; display: block; float: left; font-size: 14px;}
.cl-issue{background: url(../images/report_problem-24px.svg) left top no-repeat; padding-left: 25px;
  display: block; font-size: 14px;background-size: 20px; float: left; margin-left: 100px; width:30%;}
.cl-left .date{position:relative; top:-24px; color: #a7a7a7;}
.wid50{float: right;}
.height-100{min-height: 60px; border-bottom: solid 1px #f1f1f1; margin-bottom: 20px;}

.cl-left p{font-size: 14px; float: left; width: 100%; margin-bottom: 0;}
.nav-tabs > li > a{color: #a7a7a7; border-bottom: solid 3px #fff; padding: 0;}
.nav-tabs{border:none;}
.nav > li > a{ float: left; }
.nav-tabs {
	text-align: left;
	width: 100%;
	float: left; margin-bottom: 30px;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  border: none;
  background:transparent; border-bottom: solid 3px #4a89dc;
  color: #4a89dc;
}

.nav > li > a:hover, .nav > li > a:focus {
 background:transparent; border-bottom: solid 3px #4a89dc;
  color: #4a89dc;
}
.nav-tabs > li > a:hover{
  border-color:transparent;
}
.nav-tabs > li{display: inline-flex; float: none; padding-right: 10px; margin-right: 10px; border-right: solid 1px #f1f1f1;}
.cl-list{float: left; width: 100%; padding: 30px 0 0 0; text-align: left; list-style: none;}
.cl-list li{float: left; width:23%; margin:0 2% 20px 0; padding: 0; overflow:hidden;-webkit-border-radius: 10px;
-moz-border-radius: 10px; border-radius: 10px;}
.comment-right .cl-img{overflow:hidden;-webkit-border-radius: 10px;
-moz-border-radius: 10px; border-radius: 10px; float: right;}
.comment-left{float: left; width:80%; padding-right: 40px;}
.comment-right{float: left; width:20%; padding-right:0px;}
.comment-by{font-size: 13px;}
.comment-list{float: left; width: 100%; border-bottom: solid 1px #f1f1f1; padding-bottom: 10px; margin-bottom: 10px;}
.comment-form{float: left; width: 100%; padding-top: 40px;}
button.upload-btn  {
    width: auto;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    padding: 10px 20px;
    margin: 0 0 30px;
    color: #4884d3;
    font-weight: bold;
    background: #f2f2f2;
}
.btn.gery {
    background: none;
    color: #4884d3; float: right; margin-right: 20px;
    border: 1px solid #4884d3;
}
.full-w{ width:100%; font-weight:normal;}
.view-list.report-complain {
    padding: 30px 20px 20px 20px;
}
.padding-btm{ padding:0 0 30px 0;}
.click-position{ position:relative;}
.box--show input[type="text"] {
    width: 100%;
    border: none;
}
.half-w{width: auto; padding-right: 60px;}
.box--show input[type="text"]:focus{ border:none; outline:none;}
label{font-weight: 400;}
.profile-icon{width: 100%; float:left; text-align: center; padding:0 10%;}
.profile-icon span{padding:30px; float: left; margin-bottom: 30px; background: #f5f5f5;
  -webkit-border-radius:14px;
    -moz-border-radius:14px;
    border-radius:14px;
}
.notification-list{float: left; width: 100%; padding:0; margin-bottom: 10px; border-bottom: solid 1px #f1f1f1;}
.notification-list .view-icons{width:80px; padding: 0;}
.notification-list .view-cont{ width:80%; }
.noti-list{border-bottom: solid 1px #f1f1f1; padding-bottom:0px; margin-bottom: 10px; float: left; width: 100%;}
.noti-icon{float: left; width:40px; padding: 0;}
.noti-list h5{float: left; width: 40%; font-weight: 600; font-size: 16px; margin-top: 0; margin-bottom: 2px;}
.date { float: right; font-size: 14px;}
.noti-list p{float: left; width:100%; clear: both; font-size: 14px; padding-left: 40px;}
.floating-label2 {
  position: absolute;
  top: -10px;
  background: #fff;
  color:#4884d3;
  font-size: 18px; z-index: 9;
}
.top-btn{position: absolute; background:#f5f5f5; color:#5776d2; border: solid 1px #5776d2; padding: 10px 16px; right:20px; top: 20px;-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
.top-btn a{ color:#5776d2; font-weight: 600;}
.complain-detail h3{border-bottom: solid 1px #f1f1f1; padding-bottom: 15px;}
.he-50{height: 50px;}
/* General Responisve ------------------------------------------------------------- */
.box {
	padding: 10px;
    border-radius: 8px;
    border: 1px solid #4884d3;
  width: 320px;
  height: auto;
  background-color: #FFF;
  display: none;
  visibility: hidden;
  // the normal box delays visibility transition so it doesn't hide until after the opacity transition is done
  @include transition(
    opacity 500ms linear,
    visibility 0s linear 500ms
  )
}
.box--show {
  position:absolute;
  right:26px;
  top:-7px;
  opacity: 1;
  visibility: visible;
  display: block;
  cursor: pointer;
  // the shown box does not delay visibility, so it shows instantly and transitions opacity
  @include transition(
    opacity 500ms linear,
    visibility 0s linear
  )
}


.forgot .container{width:40%;}
.dashboard .cl-left{width: 95%;}
.view-list.report-complain {
  position: relative;
  z-index: 99;
}
@media (max-width:1360px){

}

@media (max-width:1199px){
.container{width: 94%;}
}
@media (max-width:1024px){
 .copyright{background: transparent; float:left; width: 100%; position: relative;}
 .logo{width: 31%;}
 .my-notification, .my-notification2{width:68%;}
 .search-box{width: 230px;}
 .my-notification .view-list{height: auto;}
 .forgot .container{width: 100%;}
}
@media (max-width:991px){
.container{width: 100%;}
}
@media (max-width:800px){
.login-right{height: 120vh;}
h1{font-size: 26px;}
.wid50{float: left;}
.cl-left{width: 97%;}
.cl-issue{width: 40%; margin-left: 0;}
}
@media (max-width:767px){
 .my-notification .view-list{height: auto;}
 .nav-tabs > li > a{font-size: 14px;}
}
@media (max-width:580px){
  .left-content{width: 100%; height: auto;}
  .lr-span {
  position:relative;
  top: 0;
  left: 0;
  transform:inherit;
}
.my-notification, .my-notification2{width: 100%;}
.notification-list .view-cont {
  width: 70%;
}
.search-box {
  position: relative;
  right: 0;
  top: 0;
  width: 100%;
}

.full-width{width: 100%;}
.dashboard .complain-list{border:none; margin-bottom: 0;}
.logo{width: 100%; padding:20px 70px; text-align: center;}
.copyright{position: relative;}
.login-right{height: auto;}
.right-content{width: 100%;}
.view-page{width: 92%;}
.view-cont{padding: 10px;}
.view-cont p{line-height: 18px;}
.cms-container{margin-bottom:40px;}
.copyright p{font-size: 11px;}
.view-cont h5{font-size: 17px;}
.login-page{width: 94%;}
.login-page {
  width: 100%;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.title-inner{font-size: 18px;}
.nav-tabs > li {
  padding-right: 0px;
  margin-right: -2px;
}
.complain-main{padding: 0 15px;}
.nav > li > a {
  position: relative;
  display: block;
  padding:0px 1px;
  font-size: 15px; min-width:20px;
}
.complain-list {
  float: left;
  width: 100%;
  margin: 0 0 20px 0;
  min-height: 100px;
  border-bottom: solid 1px #f1f1f1;
  padding-bottom: 20px;
}
.panel-body {
  padding: 15px 0;
}
.box{width: 180px;}
.floating-label-field--s2{line-height: 18px;}
.floating-label {
  position: absolute;
  top: -25px;
}
.floating-label-field--s2{padding:10px 20px;}
.view-list.report-complain {
  padding: 30px 10px;
}

.floating-label-field--s1 + .floating-label, .floating-label-field--s1, label{font-size: 14px;}
.profile-icon{padding-bottom: 40px;}
.login-page .title, .view-page .title, input, button, select, textarea, .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td, p{font-size: 14px;}
p{line-height: 22px;}
.view-page .title{padding-top: 10px;}
.title-inner{width: 90%;}
.floating-label2 {
  position: absolute;
  top: -10px;
  background: #fff;
  color:#4884d3;
  font-size:14px; z-index: 9;
}
button.btn, a.btn{width: 120px;}
}
@media (max-width:400px){
 input#original[type="file"]::file-selector-button{height: 40px;}
}