.bottom-wrapper{
 padding:0px 38px 0px 28px;
 /*margin-top: 141px;*/
 background-color:#fff;
 /* margin-top:-5px; */
 min-height:400px;
 height:auto;
 border-bottom: 1px solid #ccc;
}

.draft-state-overlay{
 background-color: white;
 height:100%;
 width:100%;
 position:absolute;
 top:160;
 right:0;
 z-index:3;
 opacity:.90;
 display:none;
 /* display:block; */
}
.draft-state-overlay p{
 color: #535252;
 padding-top:160px;
 text-align: center;
 font-size: 16px;
 line-height: 1.4;
 position:fixed;
 right: 0;
 left: 0;
 margin-right: auto;
 margin-left: auto;
}

.survey-menu li{
 float:left;
 margin-right:39px;
 padding:4px 0px 6px;
 position: relative;
}
.survey-menu li:last-child{
 margin-right:0;
}
.survey-menu li:hover:after{
 content:'';
 position: absolute;
 width:100%;
 height:2px;
 left: 0;
 top:100%;
 background-color:#4C3794;
}

.left-block{
 float:left;
 top:204px;
 width:340px;
 /*overflow-y:scroll;*/
 overflow-x:hidden;
 min-height:95vh;
 height:auto;
 /*height:calc(100vh - 204px);
 height:-webkit-calc(100vh - 204px);
 height:-moz-calc(100vh - 204px);*/
 /* padding-top: 20px; */
}
.responses-wrapper{
 display: flex;
 padding: 0px 0px 0px 16px;
 align-items:center;
 font-size: 16px;
 color:#000000;
 background: #fff;
 z-index:1;
}
.boxes-wrapper{
 /* height:calc(100vh - 281px);
 height:-webkit-calc(100vh - 281px);
 height:-moz-calc(100vh - 281px); */
 width: 320px;
 height:calc(100vh - 230px);
 height:-webkit-calc(100vh - 230px);
 height:-moz-calc(100vh - 230px);
}
.responses-wrapper .select7{
 width: 134px;
 margin: 0 7px 0 10px;
}

.responses-wrapper .select7__current{
 padding: 3px 22px 3px 10px;
}
.title-boxes{
 box-shadow:0px 2px 10px rgba(0, 0, 0, 0.15);
 padding:12px 20px 9px 20px;
 position: relative;
 margin: 0px 0px 7px 6px;
}

.title-boxes h5{
 font-size: 16px;
 font-weight:500;
}

.title-boxes [class*="icon-"]{
 position: absolute;
 left: 10px;
 top: 10px;
 width:20px;
 height:20px;
}

.icon-watch{
 background-position: 0 -120px;
}

.title-boxes:hover .icon-watch{
 background-position: 0 -140px;
}

.active-boxes .icon-watch{
 background-position: 0 -140px;
}

.right-block{
 float: right;
 width: calc(100% - 345px);
 width: -webkit-calc(100% - 345px);
 width: -moz-calc(100% - 345px);
 padding:28px 0px 0px 30px;
 border-left:1px solid #ccc;
 min-height:95vh;
 height:auto;
 overflow-y:hidden;
}

.profile-pic{
 width:56px;
 height:56px;
 border-radius:50%;
 overflow:hidden;
 margin-right:11px;
}
.name-id{
 margin:7px 9px 0px 0px;
}

.name-id span{
 letter-spacing:-0.5px;
 color: #444;
    font-size: 14px;
}

.nps-Promoter{
 float:left;
 position:relative;
 padding:8px 16px 6px;
 border-radius:15px;
 background: #1EBC62;
 color:#fff;
 font-size:12px;
 font-family: 'Proxima Nova Lt';
 text-transform:uppercase;
 border:2px solid #1EBC62;
}

.nps-Detractor{
 float:left;
 position:relative;
 padding:8px 16px 6px;
 border-radius:15px;
 background: #d2323c;
 color:#fff;
 font-size:12px;
 font-family: 'Proxima Nova Lt';
 text-transform:uppercase;
 border:2px solid #d2323c;
}

.nps-Passive{
 float:left;
 position:relative;
 padding:8px 16px 6px;
 border-radius:15px;
 background: #ffb405;
 color:#fff;
 font-size:12px;
 font-family: 'Proxima Nova Lt';
 text-transform:uppercase;
 border:2px solid #ffb405;
}

.conversation{
 background: #9C8FC4;
 border-radius:3px;
 padding:7px 10px 2px 5px;
 color:#fff;
 font-size:16px;
}

.category span{
 color:#5F5F5F;
 font-family: 'Proxima Nova';
 font-weight:500;
 text-transform:uppercase;
 margin-right: 10px;
}
.category a{
 border-radius:15px;
 font-size:12px;
 color:#fff;
 font-family: 'Proxima Nova Lt';
 padding:2px 7px 1px;
 margin-right:5px;
 font-weight: 600;
}

/* .icon-show{
 width:20px;
 height:20px;
 background-position: -80px -144px;
 margin-right: 5px;
} */

.icon-collapse,
.icon-show{
  width: 16px !important;
  height: 16px !important;
  background-position: -80px -141px !important;
  margin-right: 5px;
}

.icon-collapse{
  transform: rotate(180deg);
}

.boxes-wrapper .mCSB_inside > .mCSB_container{
 margin:0;
 padding-right: 30px;
 border-right: 1px solid #e2e1e1;
}

.sidebar-menu .mCSB_inside > .mCSB_container{
 margin:0;
 padding-right: 0px;
}

.right-block2{
 padding:28px 0px 52px 30px;
}
.name-id3{
 margin: 7px 18px 0px 0px
}

.name-id4{
 margin: 7px 16px 0px 0px
}

/*Page 5*/
.right-block3{
 float: left;
 width: calc(100% - 340px);
 width: -webkit-calc(100% - 340px);
 width: -moz-calc(100% - 340px);
 padding-left:0;
}
.messages-section{
 position: fixed;
 top:204px;
 height: calc(100vh - 204px);
 height: -webkit-calc(100vh - 204px);
 height: -moz-calc(100vh - 204px);
 right:38px;
 float: right;
 width:340px;
 padding: 12px 0px 60px;
}

.message-top{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding-left: 36px;
 margin-bottom: 9px;
}

.messages-wrapper{
 height:auto;
 max-height:100%;
 padding: 5px 5px 40px 35px;
 margin-bottom:12px;
 overflow: hidden;
}

.messages-wrapper .mCSB_inside > .mCSB_container{
 margin:0;
 padding-right: 0px;
 overflow: initial;
}

.icon-mail{
 position: absolute;
 left: 10px;
 top: 10px;
 background-position: -80px -120px;
}
.message-box{
 box-shadow:0px 2px 10px rgba(172, 172, 172, 0.53);
 border-radius:3px;
 background:#fff;
 padding: 14px 8px 10px 35px;
 position: relative;
 margin-bottom: 6px;
}

.message-detail{
 text-align:right;
}

.actions,.reopen-wrapper{
 position: absolute;
 right: 0;
 bottom: 20px;
 background: #fff;
   width: 100%;
   padding-top: 10px;
}
.actions{
 text-align:right;
}
.reopen-wrapper{
 text-align:right;
 display: none;
}

.reply{
 margin-right: 12px;
}

.counter-wrapper{
 text-align:right;
 margin-bottom: 25px;
}

.popup .mCSB_inside > .mCSB_container{
 margin:0;
 padding-right: 0px;
}

.popup_pagination_wrap .paginations {
 border: 1px solid #dfdfdf;
 /*border:none;*/
 padding: 10px 6px;
 float:left;
 width: 450px;
 height: 40px;
}

/* single page */

.popup_pagination_wrap .single_page {
 border: 1px solid #dfdfdf;
 /*border:none;*/
 padding: 10px 6px;
 float:left;
 width: 450px;
 height: 45px;
 margin: 0px 0px 0px 5px
}
.popup_pagination_wrap .single_page a {
 margin: -20px 0px 0px 20px;
 text-transform: capitalize;
 padding: 8px;
 color: #4b4277;
 font-size: 12px;
 vertical-align: middle;
}

.margin-left-20{
 margin-left:50px;
}
/**
* Responsive Css
**/

@media only screen and (max-width : 1199px) {
 .sidebar-menu{
   width:90px;
 }
 .survey-sec{
   width: calc(100% - 90px);
   width: -webkit-calc(100% - 90px);
   width: -moz-calc(100% - 90px);
   padding-bottom: 15px;
 }
 .survey-header{
   width: calc(100% - 90px);
   width: -webkit-calc(100% - 90px);
   width: -moz-calc(100% - 90px);
   padding: 15px 15px 0px 15px;
 }
 .bottom-wrapper{
   padding: 0px 15px 0px 15px;
   /* margin-top: 129px; */
 }
 .left-block{
   /* width: 305px; */
   top: 190px;
   /* height:calc(100vh - 190px);
   height:-webkit-calc(100vh - 190px);
   height:-moz-calc(100vh - 190px); */
 }
 .boxes-wrapper{
   height:calc(100vh - 267px);
   height:-webkit-calc(100vh - 267px);
   height:-moz-calc(100vh - 267px);
 }
 .right-block{
   /* width: calc(100% - 305px);
   width: -webkit-calc(100% - 305px);
   width: -moz-calc(100% - 305px); */
   padding: 15px 0px 0px 15px;
 }
 .detail-text{
   width:50%;
 }
 .responses-wrapper .select7__current .select7__caret{
   top:5px;
 }
 /*Page 5*/
 .messages-section{
   width: 305px;
   top:190px;
   right:15px;
   height: calc(100vh - 190px);
   height: -webkit-calc(100vh - 190px);
   height: -moz-calc(100vh - 190px);
 }
 .message-top{
   padding-left: 20px;
 }
 .messages-wrapper{
   padding-left: 20px;
 }
 .right-block3{
   width: calc(100% - 305px);
   width: -webkit-calc(100% - 305px);
   width: -moz-calc(100% - 305px);
   padding-left:0;
 }
 /*Page 8*/
 .popup{
   top:10%;
 }
}
/*
2.) Media Query for Tablet
===============================*/
@media only screen and (max-width : 991px){
 .sidebar-menu{
   width:70px;
 }
 .survey-sec{
   width: calc(100% - 70px);
   width: -webkit-calc(100% - 70px);
   width: -moz-calc(100% - 70px);
 }
 .survey-header{
   width: calc(100% - 70px);
   width: -webkit-calc(100% - 70px);
   width: -moz-calc(100% - 70px);
 }
 .bottom-wrapper{
   padding:0px 15px 0px 15px;
   /* margin-top: 120px; */
 }
 .survey-share{
   margin-bottom:10px;
 }
 .survey-share a{
   font-size:14px;
 }
 .survey-share li{
   font-size:18px;
 }
 .response-count{
   font-size:12px;
 }
 .dates-block span{
   font-size:12px;
 }
 .survey-menu li{
   margin-right: 20px;
 }
 .survey-menu a{
   font-size:13px;
 }
 .left-block{
     /* width: 237px; */
     top: 180px;
     /* height:calc(100vh - 180px);
   height:-webkit-calc(100vh - 180px);
   height:-moz-calc(100vh - 180px); */
 }
 .boxes-wrapper{
   height:calc(100vh - 240px);
   height:-webkit-calc(100vh - 240px);
   height:-moz-calc(100vh - 240px);
 }
 .responses-wrapper{
   top: 180px;
   font-size:12px;
   padding:0px 0px 0px 10px;
 }
 .responses-wrapper .select7{
   width: 94px;
 }
 .responses-menu li{
   margin-bottom: 6px;
 }
 .title-boxes:first-child{
   margin-top: 15px;
 }
 .title-boxes{
   padding: 5px 10px 5px 20px;
 }
 .title-boxes [class*="icon-"]{
   left: 0;
   top: 0;
 }
 .title-boxes h5{
   font-size:12px;
 }
 .title-boxes p{
   font-size:10px;
 }
 /* .right-block{
   width: calc(100% - 237px);
   width: -webkit-calc(100% - 237px);
   width: -moz-calc(100% - 237px);
 } */
 .profile-pic{
   width: 40px;
     height: 40px;
 }
 .name-id{
   margin-top:5px;
 }
 .name-id h5{
   margin-bottom:5px;
   font-size:12px;
 }
 .name-id span{
   font-size:10px;
 }
 .promoter{
   padding: 4px 10px 4px;
   font-size:10px;
 }
 .conversation{
   padding: 6px 10px 0px 5px;
   font-size:12px;
 }
 .profile{
   margin-bottom: 10px;
 }
 .profile h5{
   padding: 5px 10px 5px;
   font-size:10px;
 }
 .profile-detail {
   padding: 10px;
 }
 .detail-wrapper{
   margin-bottom:10px;
 }
 .detail-text{
   font-size:12px;
 }
 .feedback-header{
   padding: 5px 10px 5px;
 }
 .feedback-header h5{
   font-size:10px;
 }
 .feedback-header span{
   font-size:10px;
 }
 .querry-wrapper{
   padding: 10px;
 }
 .querry-block{
   margin-bottom: 15px;
 }
 .querry-header h6{
   font-size: 13px;
 }
 .positive, .negative{
    padding: 2px 5px 0px;
    font-size:10px;
 }
 .querry-block p{
   font-size:10px;
 }
 .category span{
   font-size: 12px;
 }
 .category a{
   font-size:10px;
 }
 .show-all{
   font-size: 12px;
 }
 /*Page 5*/
 .detail-text2:first-child{
   width:60%;
 }
 .detail-text2:last-child{
   width:40%;
 }
 .messages-section{
   width: 237px;
   top:180px;
   height: calc(100vh - 180px);
   height: -webkit-calc(100vh - 180px);
   height: -moz-calc(100vh - 180px);
 }
 .message-top{
   padding-left:15px;
 }
 .messages-wrapper{
   padding-left:15px;
 }
 .message-box{
   padding:10px 10px 10px 25px;
 }
 .icon-mail{
   left:3px;
   top: 6px;
 }
 .message-box h5{
   font-size:12px;
   margin-bottom: 10px;
 }
 .message-box p{
   font-size:12px;
   line-height: 15px;
   margin-bottom: 5px;
 }
 /*Page 8*/
 .popup-body{
   padding: 21px;
 }
 .field-wrapper{
   margin-bottom: 15px;
 }
 .subject-wrapper{
   margin-bottom: 15px;
 }
 .counter-wrapper{
   margin-bottom: 15px;
 }
}
/*
3.) Media Query for mobile
===============================*/
@media only screen and (max-width : 767px){
 .body-slider1 .wrapper,.body-slider .wrapper{
   overflow: hidden;
       height: 100vh;
 }
 .body-slider1 .wrapper{
   opacity: 0.3;
 }
 .header{
   padding: 20px 17px 13px 17px;
 }
 .logo{
   margin-left: 40px;
 }
 .header-right{
   width:65px;
 }
 .hamburger-menu{
   display:block;
   width:20px;
   height:20px;
   position:absolute;
   left:15px;
   top:25px;
 }
 .hamburger,.hamburger-lines,.message-lines{
   width: 100%;
   height: 2px;
   border-radius:1px;
   font-size:0;
   background-color: #fff;
   position: absolute;
   margin: auto;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out ;
   -ms-transition: all 0.3s ease-in-out ;
   -o-transition: all 0.3s ease-in-out ;
   transition: all 0.3s ease-in-out;
 }
 .hamburger:before, .hamburger:after,.hamburger-lines:before,.hamburger-lines:after,.message-lines:before,.message-lines:after{
   content: ' ';
   position: absolute;
   width: 100%;
   height: 2px;
   border-radius:1px;
   background-color: #fff;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out ;
   -ms-transition: all 0.3s ease-in-out ;
   -o-transition: all 0.3s ease-in-out ;
   transition: all 0.3s ease-in-out;
 }
 .hamburger:before,.hamburger-lines:before,.message-lines:before{
   top: -7px;
 }
 .hamburger:after,.hamburger-lines:after,.message-lines:after{
   top: 7px;
 }
 .sidebar-menu {
   z-index:3;
   padding:15px 15px;
   width: 100px;
   left:-100%;
   -webkit-transition: left 0.5s ease-in-out;
   -moz-transition: left 0.5s ease-in-out ;
   -ms-transition: left 0.5s ease-in-out ;
   -o-transition: left 0.5s ease-in-out ;
   transition: left 0.5s ease-in-out;
   background:#fff;
 }
 /*for toggle*/
 .menu-active{
   background: none;
 }
 .menu-active:before{
   top: 0;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
 }
 .menu-active:after{
   top: 0;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
 .hamburger, .hamburger:before, .hamburger:after{
    pointer-events: none;
 }
 .show-side .sidebar-menu {
  left:0;
 }
 /*toggle css end here*/
 .survey-sec{
   width:100%;
   padding-top: 192px;
 }
 .survey-header{
   width:100%;
   top:62px;
 }
 .survey-share{
   flex-flow:row wrap;
   justify-content: center;
 }
 .survey-share ul{
   order:2;
   width:100%;
 }
 .share-wrapper{
   width:100%;
   order:1;
   margin-bottom:10px;
 }
 .links-wrapper{
   float:right;
 }
 .survey-hamburger,.message-hamburger{
   display:inline-block;
   float: left;
   width:20px;
   height:20px;
   z-index:4;
   position:relative;
   left:0;
   -webkit-transition: left 0.5s ease-in-out;
     -moz-transition: left 0.5s ease-in-out ;
     -ms-transition: left 0.5s ease-in-out ;
     -o-transition: left 0.5s ease-in-out ;
     transition: left 0.5s ease-in-out;
   top:0px;
   background:#fff;
 }
 .hamburger-lines,.message-lines{
   background: #000;
 }
 .survey-hamburger .hamburger-lines:before,.survey-hamburger .hamburger-lines:after,.message-lines:before,.message-lines:after{
   background: #000;
 }
 .survey-bottom{
   position: relative;
 }
 .bottom-wrapper{
   padding-top: 0;
   margin-top: 0;
 }
 .responses-wrapper{
   top:62px;
 }
 .left-block{
   /* position:fixed; */
   z-index:3;
   top: 62px;
   /* left:-100%; */
   height:calc(100vh - 62px);
   height:-webkit-calc(100vh - 62px);
   height:-moz-calc(100vh - 62px);
   -webkit-transition: left 0.5s ease-in-out;
     -moz-transition: left 0.5s ease-in-out ;
     -ms-transition: left 0.5s ease-in-out ;
     -o-transition: left 0.5s ease-in-out ;
     transition: left 0.5s ease-in-out;
   background:#fff;
 }
 .boxes-wrapper{
   height:calc(100vh - 122px);
   height:-webkit-calc(100vh - 122px);
   height:-moz-calc(100vh - 122px);
 }
 .menu-active2{
   position:fixed;
   left:235px;
   top:68px;
 }
 .menu-active1{
   background: none;
 }
 .menu-active1:before{
   top: 0;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
 }
 .menu-active1:after{
   top: 0;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
 .hamburger-lines, .hamburger-lines:before, .hamburger-lines:after{
    pointer-events: none;
 }
 .show-side1 .left-block {
  left:0;
 }
 .right-block{
   /* width: 100%; */
   padding-left:0;
 }
   /*page 5*/
  .menu-active4{
   position:fixed;
   left:235px;
   top:68px;
 }
 .menu-active3{
   background: none;
 }
 .menu-active3:before{
   top: 0;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
 }
 .menu-active3:after{
   top: 0;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
  .messages-section{
     position:fixed;
     z-index:3;
   padding-top: 12px;
   top: 62px;
   left:-100%;
   height:calc(100vh - 62px);
   height:-webkit-calc(100vh - 62px);
   height:-moz-calc(100vh - 62px);
   -webkit-transition: left 0.5s ease-in-out;
     -moz-transition: left 0.5s ease-in-out ;
     -ms-transition: left 0.5s ease-in-out ;
     -o-transition: left 0.5s ease-in-out ;
     transition: left 0.5s ease-in-out;
   background:#fff;
  }
  .icon-close{
   display:none;
  }
  .show-side2 .messages-section {
  left:0;
 }
 .message-top{
   padding:0px 15px;
 }
 .messages-wrapper{
   padding:15px;
   margin-bottom: 10px;
   height:calc(100vh - 100px);
   height:-webkit-calc(100vh - 100px);
   height:-moz-calc(100vh - 100px);
 }
 .message-box{
   box-shadow: 0px 2px 5px rgba(172, 172, 172, 0.53);
   margin-bottom: 5px;
 }
 .message-box h5{
   font-size:11px;
   margin-bottom:5px;
 }
 .message-box p{
   font-size:10px;
   line-height:12px;
 }
 .message-time{
   font-size:10px;
 }
 .actions,.reopen-wrapper{
 }
 .actions{
   padding:10px 15px 0px;
 }
 .reopen-wrapper{
   padding:0px 15px;
 }
 .actions,.reopen-wrapper{
   padding-bottom: 60px;
 }
 .reply,.end,.reopen{
   font-size:12px;
   width: 60px;
 }
 /*Page 8*/
 .popup{
   top:10%;
   width: 85%;
 }
 .popup-header span{
   font-size:14px;
 }
 .field-wrapper label{
   font-size:14px;
 }
 .form-text{
   font-size:14px;
 }
 .text-field label{
   font-size:14px;
 }
 .word-counter{
   font-size:12px;
 }
 textarea{
   font-size: 14px;
 }
 .btn-cancel{
   font-size: 14px;
 }
 input[type="submit"]{
   font-size: 14px;
   width: 60px;
   padding: 4px 0px;
 }
}
@media only screen and (max-width : 479px){
 .survey-share a{
   font-size:12px;
 }
 .survey-share li{
   font-size:14px;
 }
 .survey-detail{
   flex-flow:row wrap;
   justify-content:center;
 }
 .response-count{
   width:100%;
   text-align: center;
   margin-bottom: 10px;
 }
 .right-header{
   flex-flow:row wrap;
 }
 .pic-id{
   margin-bottom:10px;
 }
 .detail-text,.detail-text2:first-child,.detail-text2:last-child{
   width:100%;
 }
 .detail-text:first-child{
   margin-bottom: 10px;
 }
 .querry-header{
   flex-flow:column wrap;
   align-items: center;
 }
 .querry-header h6{
   margin-bottom: 10px;
 }
 .category a,.category span{
   margin-bottom: 10px;
 }
 /*Page 8*/
 .popup-header span{
   font-size:12px;
 }
 .field-wrapper label{
   font-size:12px;
 }
 .form-text{
   font-size:12px;
 }
 .text-field label{
   font-size:12px;
 }
 .word-counter{
   font-size:10px;
 }
 textarea{
   font-size: 12px;
 }
 .btn-cancel{
   font-size: 12px;
 }
 input[type="submit"]{
   font-size: 12px;
 }
}
@media only screen and (min-width : 768px) and (max-width : 1024px){
 .messages-section{
   height: calc(100vh - 240px);
   height: -webkit-calc(100vh - 240px);
   height: -moz-calc(100vh - 240px);
 }
}

.arrow-flip{
 transform: rotate(180deg);
 bottom: 4px;
 margin-right: 2px;
 position: relative;
}

.icon-up{
 transform:          rotate(180deg);
 -ms-transform:      rotate(180deg);
 -moz-transform:     rotate(180deg);
 -webkit-transform:  rotate(180deg);
 -o-transform:       rotate(180deg);

}