.template-images,.template-button{width:100%;float:left;margin-top:30px;padding-left:40px}
.main-heading{padding-bottom: 0px;}
.template-images ul,.template-button ul{display:table;padding:0}
.template-images ul li,.template-button ul li{float:left;list-style:none;margin-right:18px}
.template-images ul li img{width:50px;height:50px}
.template-images ul li p{margin:-5px 0 0;padding:0;text-align:center}
.trialfeedback .template-images{padding-left:0}
.trialfeedback .template-images ul{margin:0 auto}
.template-images.center-data ul li{margin-right:25px}

.template-textarea{width:100%;float:left;margin-top:30px;padding-left:40px;padding-right:40px}
.template-textarea p{font-weight:400;color:#aaa;font-size:13px;padding-bottom:8px;border-bottom:1px solid #827f7f}
.name-fields p{float:left;width:42%}
.name-fields p:first-child{margin-right:5%}
.thumbsup-images ul li img{margin-right:20px}
.template-mask .surveyBtn{border:1px solid #3c8ac9!important;transition:.4s all ease-in-out}
.template-mask .templatelink{background-color:#fff!important;color:#3c8ac9!important;border:1px solid #3c8ac9!important}
.template-mask .templatelink:hover{background-color:#3c8ac9!important;color:#fff!important}
.right-box{position:absolute;float:right;writing-mode:vertical-lr;transform:rotate(180deg);width:22px;line-height:22px;font-size:12px;padding-top:10px;background-color:#30A4F5;color:#fff;padding-bottom:10px;border-radius:4px;right:0;text-align:center}
.template-images.yesno-template ul li img{width:auto;height:auto}
@media (max-width:767px) {
.template-images{padding-left:15px}
.template-images ul li img{width:40px;height:40px}
.template-textarea{width:100%;float:left;margin-top:30px;padding-left:15px;padding-right:15px}
}
@media (min-width:767px) {.btn-11oader.bt-left-d {text-align: left;}}
@media (min-width:1024px) and (max-width:1200px) {
.template h4{padding:28px 28px 10px}
.template-images{padding-left:26px}
.template h4{}
.template-images ul li img{width:40px;height:40px}
}
.template-inner{width:85%;display:block;height:180px;margin:0 auto;margin-top:40px;background-color:#fff;border-radius:4px}
.template-inner-close{width:25px;height:25px;float:right;margin-top:-6px;margin-right:-6px;border-radius:100%;box-shadow:0 0 1px 1px rgba(0,0,0,0.5),inset 0 0 0 3px #fff;box-sizing:border-box;background-color:#000}
.template-inner-close img{margin-left:auto;margin-right:auto;display:table;margin-top:5px;width:16px}
.template-inner .hand-drawn-icon{position:relative;float:right;margin-top:-20%;margin-right:-16px;z-index:1}
.template-button a{display:block;float:left;padding:10px 50px;border-radius:4px;font-size:14px}
@media (max-width:767px) {
.template-inner{margin-top:13px}
}
@media (min-width:768px) and (max-width:1199px) {
.template-ver-list,.template-textarea,.template-images{width:100%!important;padding-left:9px}
.template-images ul li{float:left;list-style:none;margin-right:4px}
.template-images ul li img{width:35px;height:35px}
}
@media (min-width:1200px) and (max-width:1500px) {
.template h4{padding:18px 40px 10px}
.template-images ul li img{width:40px;height:40px}
.with-circle-hor ul li{width:84px!important}
}

@media (min-width:1800px) {
.template-inner .hand-drawn-icon{margin-right:-24px!important}
}
@media (min-width:2500px) {
.template-inner .hand-drawn-icon{margin-right:-35px!important;margin-top:-12%!important}
}
@media (max-width: 1500px) and (min-width: 1200px) {
.template-images ul li img{width:40px;height:40px;margin-left:auto;margin-right:auto;display:table;margin-bottom:7px}
.hey_before .template-textarea{margin-top:8px}
}

.dark-content h4{color:#4d4d4d}
.dark-content p{color:#827f7f}
.template-ver-list ul li p{color:#4d4d4d}
.dark-content .circle{border-color:#4d4d4d!important}
.dark-content .pagination ul li{border:1px solid #4d4d4d!important}
/**/

.solu-div:hover .temp-image-mask img{    -webkit-filter: brightness(.9);
    filter: brightness(.9);}
 .main-heading h2{margin:10px 0 50px}
.banner-img{max-width:365px;margin:0 auto}
.pr-30{padding-right:30px}
.flex-div{align-items:unset}

    .solu-div{border: none;padding: 0; max-width: 410px; margin: 0 10px 0px;}
    .solu-div:hover{box-shadow: none;}
    .template-head{font-size: 18px;margin-bottom: 20px;text-align: center;}
    .temp-image-mask{border-radius: 20px;overflow: hidden;border: 1px solid #eee;position: relative;min-height: 84.2%;transition: 0.3s;}
    .over-mask{position: absolute;top: 0;left: 0;z-index: 1; width: 100%;height: 100%;display: none;}
    .btn-mask{width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}
    .temp-image-mask:hover{box-shadow: 0px 0px 5px 5px #eee;}
    .temp-image-mask:hover .over-mask{display: block;}
    .over-mask .try-btn,.over-mask .templatelink{font-size: 16px;font-weight: 400;padding: 10px 28px !important;}
    .templatelink{padding: 12px 32px;font-size: 16px;border: 1px solid #1870D5;color: #1870D5;border-radius: 50px;cursor: pointer;margin-left: 15px;display: inline-block;background-color: #fff;}
    .templatelink:hover{color: #fff;background-color: #0A53A8;border: 1px solid #0A53A8}
    .solu-div:hover .temp-image-mask {
    border: 1px solid #ccc;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color=#BABABA)";
    -moz-box-shadow: 0 0 15px 1px #BABABA;
    -webkit-box-shadow: 0 0 15px 1px #BABABA;
    box-shadow: 0 0 15px 1px #BABABA;
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color=#BABABA);
    background-color: rgba(256,256,256,.7);
    background-size: cover;
}

    .over-margin-mob {margin-bottom: 0;}
    .flex-div-space {margin-top: 50px;}
    .solu-div img {margin: 0px 0 0px; display: block;}
   /* .scratch .temp-image-mask {
    min-height: 200px;}*/
    .scratch .temp-image-mask .over-mask {
    display: block;
}

    @media (max-width: 767px){
.over-margin-mob {margin-bottom: 25px !important;}}
.div-40 {width: 40%;}
.div-60 {width: 60%;}
.widows-app-btn {display: table;margin: 30px 0px 40px;text-align: center;width: 100%;}
.widows-app-btn .btn-blue {border: 0 none;border-radius: 50px;color: rgb(255, 255, 255);font-family: Roboto, sans-serif;line-height: 20px;outline: 0 none;
padding: 15px 20px;text-align: center;text-transform: capitalize;
}
#sidebar {position: fixed;height: 100%;width: 760px;top: 0;right: -100%;background: #fff;box-shadow: -5px 0 5px -3px rgb(204, 204, 204);
z-index: 1111;transition: right 0.75s ease !important;
}
.sidebar-show {right: 0 !important;transition: right 0.75s ease !important;}
#overlay2 {display: none;height: 100%;left: 0;position: fixed;top: 0;transition: all .2s linear 0s;width: 100%;z-index: 111;background-color: rgba(0, 0, 0, 0.4);
}
#close-sidebar{position:absolute;right:15px;top:15px;cursor:pointer;z-index:111}
#sidebar .widows-app-btn{top:10px;position:absolute;z-index:111111;margin:0;text-align:right;width:auto;right:80px}
.widows-app-btn .btn-blue a{color:#fff}
#sidebar .widows-app-btn .btn-blue{padding:13px 25px;line-height:1}
#responsive-viewport.tab-view{border-top:solid 1px #eee}
span.view-template:hover{color:#fff;background:#3c8ac9}
#sidebar .viewportOptions{margin-top:10px;display:inline-block}

#sidebar .viewportOptions span{background:url(/template/survey-template/customer-service-nps-survey/img/responsive_system_icon_Sprite.png) no-repeat;display:inline-block;width:45px;height:35px;background-position:0 -10px;margin-right:10px;cursor:pointer}
#sidebar .viewportOptions span#mob-view{background-position:0 -10px}
#sidebar .viewportOptions span#mob-view.active{background-position:0 -57px}
#sidebar .viewportOptions span#tab-view{background-position:0 -105px}
#sidebar .viewportOptions span#tab-view.active{background-position:0 -151px}
#sidebar .viewportOptions span#desk-view{background-position:0 -198px}
#sidebar .viewportOptions span#desk-view.active{background-position:0 -245px}
#responsive-viewport{width: 100%;margin-top: 35px;border-top: 1px solid rgb(238, 238, 238);}

#responsive-viewport.desk-view iframe.example-template{width:100%;height:560px}
#responsive-viewport.mob-view iframe.example-template{margin-top:118px;margin-left:225px;width:307px;height:492px}
#responsive-viewport.tab-view iframe.example-template{margin-top:70px;margin-left:130px;width:505px;height:540px}
#responsive-viewport.mob-view{background:url(/template/survey-template/customer-service-nps-survey/img/mobile_device.png) no-repeat center;height:695px;background-size:auto 695px}
#responsive-viewport.tab-view{background:url(/template/survey-template/customer-service-nps-survey/img/tab_device_light_verson.png) no-repeat center;height:695px;background-size:auto 695px}
#sidebar .widows-app-btn {top: 20px;font-size: 15px;left: 5px;right: auto;}
.tabmenu li {display: inline-block;padding-right: 20px;}

#myTab {border-bottom: 1px solid #ddd;padding-bottom: 10px;}
#course_feedback a {border-radius: 0;border-bottom: 3px solid #3c8ac9;background-color: transparent !important;padding: 9px 12px;}
@media only screen and (min-width : 768px){.tabmenu li { display: inline-block; padding-right: 30px !important;}}

@media(min-width:768px) and (max-width:992px) {
#sidebar{width:560px;right:-100%}
#responsive-viewport{margin-top:50px}
#responsive-viewport.tab-view{background-size:535px 695px}
#responsive-viewport.tab-view iframe.example-template{margin-left:52px;width:460px;height:555px}
#responsive-viewport.mob-view iframe.example-template{margin-left:125px}
.temp-image-mask {min-height: auto;}
.scratch .temp-image-mask {
    min-height: 84%;}
}

@media(min-width:993px) and (max-width:1199px) {
#responsive-viewport{margin-top:5px}
.temp-image-mask {min-height: auto;}
.scratch .temp-image-mask {
    min-height: 84%;}
}
@media(max-width:767px) {
#sidebar{width:100%;right:-102%}
#sidebar .viewportOptions{display:none}
#responsive-viewport.desk-view iframe.example-template{position:absolute;padding:20px 5px 0;height:calc(100% - 20px)}
.heading-border h2{margin-bottom:20px}
#sidebar .viewportOptions{display:none}
#new_option_menu{display:none}
.main-heading h2{text-align:left}
.div-40{width:100%}
.div-60{width:100%}
.solu-div{    max-width: 400px;
    margin: 0 auto;}
.solu-div img{margin:0;width:100%}
.temp-image-mask{min-height:auto}
 .flex-div-space {margin-top: 0px;}
 .main-heading .h2headingtag {text-align: left;}
 .scratch .temp-image-mask {
    min-height: 280px;}

    .banner-img {
    max-width: 365px;
    margin: 0 auto 25px;
}
}
@media (min-width:768px) and (max-width:1199px) {.tabmenu {white-space: nowrap;overflow-x: auto;width: 100%;}}
@media(max-width:480px) {
.widows-app-btn .btn-blue,.widows-app-btn .view-template{display:block;width:70%;margin:0 auto 10px;padding:15px;line-height:1}
#sidebar .widows-app-btn .btn-blue{width:auto}
}