*{box-sizing: border-box;}

img{ max-width: 100%; max-height: 100%;}
.top-content{ float: left; width: 100%;}
body{font-size: 16px !important;}
.mobile-template {
    right: 16px;
    top: 55px;
    color: #222020;
    float: left;
    width: 100%;
}
.mobile-que {
    margin-bottom: 0px;
    padding-bottom: 10px;
    position: relative;
    text-align: left;
    float: left;
    width: 100%;
}
.mobile-que::after {
    background: #ff4e4e none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    width: 100px;
}

.mobile-que-text{ font-size: 1em; line-height: 1.5em;}
.mobile-option-container {
    /*background: rgba(0, 0, 0, 0.05);*/
    float: left;
    width: 100%;
    padding: 1px;
}

.mobile-option-container.template_125{
    width: 85%;
}
.mobile-option{ background: #ff4e4e; width: 100%; height: 35px; color: #fff; margin-bottom: 10px; display: table;}
.mobile-option:last-child{ margin-bottom: 0;}
.mobile-option .mobile-option-content{
    display: table-cell;
    vertical-align: middle;
    padding: 0 6px;
    text-align: center;
}

.img-container img{ width: 100%;}
.mobile-footer {
    bottom: 4px;
    color: #878787;
    left: 0;
    font-size: 12px;
    padding: 0 10px;
    position: absolute;
    width: 100%;
    bottom: 58px;
}
.company-name{ color: #222020;}
.mobile-option-container-bottom {
    float: left;
    /*margin-top: 10px;*/
    width: 100%;
}
.mobile-que .img-container{
    margin-top: 10px;
    margin-bottom: 0px;
    line-height: normal;
}

.star::after {
    content: "star_border";
    font-family: "Material Icons";
    font-size: 0.813em;
    left: 0;
    position: absolute;
    top: 7px;
    line-height: 0;
}

.star-container {
    display: flex;
    float: left;
    justify-content: space-between;
    width: 50%;
}
.star-text {
    float: right;
    padding: 0.250em 0 0;
    font-size: 0.813em;
}


/*.other-option-container input, .other-option-container textarea{
    width: 95%!important;
}

.mobile-option-container input, .mobile-option-container textarea , .other-option-container input, .other-option-container textarea{
    border: 1px solid #bfbfbf;
    border-radius: 0;
    padding: 0 5px;
    width: 100%;
}
.mobile-option-container input , .other-option-container input{
    height: 2.500em;
    font-size: 1em;
}
.mobile-option-container textarea , .other-option-container textarea{
    height: 7.500em;
    resize: none;
    padding-top: 5px;
    line-height: 1.4em;
}*/

.mobile-other-option-input input, .mobile-other-option-input textarea{
    width: 95%!important;
}

.mobile-option-container input, .mobile-option-container textarea , .mobile-other-option-input textarea , .mobile-other-option-input input{
    border: 1px solid #C6C6C6;
    border-radius: 0;
    padding: 0 5px;
    width: 100%;
}
.mobile-option-container input , .mobile-other-option-input input{
    height: 2.500em;
    font-size: 1em;
}
.mobile-option-container textarea , .mobile-other-option-input textarea{
    height: 7.500em;
    resize: none;
    padding-top: 5px;
    line-height: 1.4em;
}
.rating-numbers > span , .multiple-rating-numbers > span {
    border: 1px solid #ff4e4e;
    border-radius: 50%;
    display: inline-block;
    font-size: 	0.875em;
    height: 1.500em;
    width: 1.500em;
    justify-content: center;
    align-items: center;
    color: #ff4e4e;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    line-height: 1.500em;
}
.rating-numbers > span:last-child  , .multiple-rating-numbers > span:last-child {margin-right: 0px;}
.rating-numbers > span.active , .multiple-rating-numbers > span.active{
    background: #ff4e4e;
    color: #fff;
}
.rating-text > span {
    font-size: 13px;
}
.rating-text > span:first-child{
    float: left;
}
.rating-text > span:last-child{
    float: right;
}
.like-box-content {
    padding: 15px 0;
}
.like-box-content > img {
    display: block;
    margin: 0 auto;
    width: 3.125em !important;
}
.like-box-content > span {
    display: block;
    margin-top: 8px;
}
.like-box{background: #ff4e4e; color: #fff;}
.img-container{
    float: left;
    overflow-x: hidden;
    width: 100%;
    background: #E9E9E9;
    padding: 1px !important;
    margin: 5px 0;
    position: relative;
}

.img-container .mdl-checkbox, .img-container .mdl-radio{
    left: 0px;
    margin-bottom: 5px;
    padding-left: 0;
    position: absolute;
    top: 0px;
    width: auto;
    right: 0;
    bottom: 0;
    height: auto;
    cursor: pointer;
    margin: 0;
    padding: 0px;
    z-index: 99;
}

.img-container .mdl-checkbox__box-outline{ top: 5px; left: 5px;border: 0px solid rgba(255, 255, 255, 0.95); background: rgba(0, 0, 0, 0); border-radius: 0%; }
.img-container-small {width: 4em; float: left;overflow-x: hidden;background: #E9E9E9;padding: 0.188em; margin: 0px;}
.no-bg{background: none !important; padding: 0 !important;}
.mobile-template .row{
    margin-left: -2.5px !important;
    margin-right: -2.5px !important;
}
.mobile-template [class^="col-"], .mobile-template [class^=" col-"]{
    padding-left: 2.5px !important;
    padding-right: 2.5px !important;
}
.mobile-template .mdl-checkbox__label > img {
    background: #f2f2f2 none repeat scroll 0 0;
    padding: 3px;
}

.mobile-template video{
    background: #f2f2f2 none repeat scroll 0 0;
    padding: 5px;
}
.table-with-radio {
    display: table;
    width: 100%;
    background: #f2f2f2;
}

.table-with-radio > ul {
    display: table-row;
}
.table-with-radio li {
    display: table-cell;
    padding: 5px 6px;
}
.table-with-radio li:nth-child(2n+1){
    background: #F3F6FA;
}
.table-with-radio li:nth-child(2n){
    background: #fff;
}
.table-with-radio li:first-child{
    background: none;
}
.table-with-radio ul:first-child li{ background:  none;}
.table-with-radio > ul li:first-child{ text-align: left;}
.table-with-radio .mdl-radio{height: 26px; margin-right: 0;}
.table-with-radio .mdl-radio__inner-circle{ display: none;}

.star-container-single .star:last-child{ margin-right: 0;}

.star-container-single .star-container { width: 100%;}
.star-container-single .star-text {
    float: left;
    width: 100%;
    color: #222020;
    font-size: 0.875em;
    visibility: hidden;
}
.checkbox-input {float: left; margin-bottom: 0.500em;  width: 100%;}
.checkbox-input input { float: left; width: calc(100% - 2.5em);}
.checkbox-input .mdl-checkbox{ float: right;  margin: 7px 0 0;  width: auto;}
.rating-numbers , .multiple-rating-numbers {display: flex;  justify-content: space-between;}
.star-container-single.star-container-multiple {display: flex; justify-content: space-between;  line-height: normal; align-items: center; padding: 2px 0;}
.feedback-text {display: flex; padding-top: 0.375em; width: 55%;}
.star-container-multiple .feedback-text {width: 50%; padding-bottom: 7px;}
.star-container-multiple .feedback-text.mobile-img {width: 30%; padding-bottom: 7px;}
.star-container-single .star-container { display: block;  text-align: center;}
.star-container-single.star-container-multiple .star-container {
    display: block;
    float: right;
    text-align: right;
    width: 50%;
    line-height: normal;
}

.star-container-single.star-container-multiple .star {
    height: 20px;
    margin-left: 0;
    width: 20px;
}
.star-container-single.star-container-multiple .star::after {font-size: 0.750em;left: 1px;line-height: 0;top: 0px;}
.star-container-single.star-container-multiple .star::before { height: 20px;  width: 20px;}
.matrix-table ul {float: left;width: 100%;padding-left: 0; margin: 0; white-space: nowrap;}
.scroll-table {float: left;overflow: auto; white-space: nowrap;width: 100%;height: 100%;}
.matrix-table {background: #f5f5f5;float: left;width: 100%;position: relative;}
.matrix-table ul li {display: inline-block;float: none;text-align: center;margin-left: 0px; vertical-align: top;}
.matrix-table ul li:nth-child(2n){ background:#EAEEF1;}
.matrix-table ul li .mdl-radio{ margin-top: 20px;margin-right: 0;}
.matrix-top-header li{ background: transparent !important; padding-top: 8px !important;}
.matrix-top-header{ height: 75px;}
.matrix-left-header-container{ position: absolute; height: calc(100% - 75px);left: 0;overflow: hidden;}
.matrix-table ul.matrix-left-header{ white-space: normal !important;}
.matrix-table ul.matrix-left-header li{ width: 100%; float: left; margin-left: 0; background: transparent;}
.matrix-top-header-container {overflow-x: hidden;overflow-y: hidden;position: absolute;top:0;}
.matrix-table{height: 280px;padding-left: 160px;padding-top: 40px;}
.matrix-left-header-container{ width: 150px; top: 40px; word-wrap: break-word;}
.matrix-table ul li .mdl-radio{ margin-top: 0; }
.matrix-table ul.matrix-left-header li{ height: 58px; padding: 5px; text-align: left;}
.matrix-top-header-container{ width: calc(100% - 160px)}
.matrix-table ul li{
    width: 71px; 
    height: 58px;
    padding: 5px 0;
    word-wrap: break-word;
    word-break: break-all;
    white-space: initial;
    line-height: 16px;
    margin-right: 5px;
}
.scroll-table{ pointer-events: auto;}
.matrix-table .mdl-radio.is-upgraded {padding-left: 14px;}

.mobile-que video {
    /*background: #f2f2f2;*/
    float: left;
    overflow-x: hidden;
    width: 100%;
    background: #f5f5f5;
    /*padding: 5px;*/
    margin-bottom:0px;
    margin-top: 0px;
} 

.like-box-content.btn.btn-primary.mdl-button.mdl-js-button.mdl-js-ripple-effect {
    height: 100%;
    padding: 15px 0 !important;
    font-size: 0.875em;
    font-weight: 300;
    line-height: 1.250em;
    text-transform: none;
}

.star {
    border-radius: 50%;
    display: inline-block;
    height: 1.56em;
    position: relative;
    width: 1.56em;
    margin-top: 0.250em;
    margin-left: 2px;
    margin-right: 2px;
}

.star::after {
    content: "star_border";
    font-family: "Material Icons";
    font-size: 0.813em;
    left: 0;
    position: absolute;
    top: 7px;
    line-height: 0;
}

.star:after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content: '';
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    background: transparent;
    background: #ff4e4e;
}

.star::before {
    content: "";
    height: 1.56em;
    width: 1.56em;
    left: 0;
    position: absolute;
    /*    top: 0.688em;*/
    right: 0;
    line-height: 1.125em;
    color: #ff4e4e;
    z-index: 999999;
    background-size: cover
}
.star.active::before {color: #fff; background: transparent;}
.star .material-icons {color: #ff4e4e; font-size: 1.375em;  left: 1.5px;}
.star:after {
    top: 0;
    left: 0;
    padding: 0;
    z-index: -1;
    box-shadow: 0;
    opacity: 0;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
}

.star.active {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    color: #fff;
    background-size: 100%;
}

.star.active i {color: #fff;}

.star:active, .ratingstart:active {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    background: transparent;
    transition: all 0.0s  0s;
}



.star, .ratingstart{
    transition: -webkit-transform 1s;
    transition: -moz-transform 1s;
    transition: -ms-transform 1s;
    transition: transform 1s;
}

.star.active:after {
    -webkit-animation: sonarEffect 0.8s ease-out 75ms;
    -moz-animation: sonarEffect 0.8s ease-out 75ms;
    animation: sonarEffect 0.8s ease-out 75ms;
}

@-webkit-keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255, 78, 78, 0.3), 0 0 20px 0px #ff4e4e, 0 0 0 5px rgba(255, 78, 78, 0.5);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(255, 78, 78, 0.3), 0 0 20px 0px #ff4e4e, 0 0 0 5px rgba(255, 78, 78, 0.5);
        -webkit-transform: scale(1.5);
        opacity: 0;
    }
}

.videoTimer {position: relative;}
.controlls {
    position: absolute;
    left: 0;
    top: 50%;
    right: 0;
    text-align: center;
    transform: translate(0, -50%);
}

.display-remain-time {
    font-weight: 100;
    font-size: 0.500em;
    color: #ff4e4e;
}
.e-c-base {
    fill: #000;
    stroke: rgba(0, 0, 0, 0.8);
    stroke-width: 2px
}
.e-c-pointer{fill:none !important; stroke-width: 0px !important;}
.e-c-progress {
    fill: none;
    stroke: #ff4e4e;
    stroke-width: 20px;
    transition: stroke-dashoffset 1.9s;
}
.e-c-pointer {
    fill: #FFF;
    stroke: #ff4e4e;
    stroke-width: 15px;
}
#e-pointer { transition: transform 0.7s; }
.videoTimer {
    position: absolute;
    bottom: 20px;
    left: 20px;
}

.footer_tooltip span {
    background: #303030;
    padding: 8px 9px;
    color: #fff;
    border-radius: 3px;
    width: auto;
    text-align: center;
    margin: 0 auto;
    box-shadow: 0 0 4px #000;

}
.footer_tooltip {
    display: none;
    text-align: center;
    margin: 0 auto;
    height: 50px;
    width: 100%;
    position: fixed;
    bottom: 50px;
    left: 0;
    right: 0;
    z-index: 999;
}

.mobile-option-container .mdl-checkbox.mdl-js-checkbox.is-upgraded:last-child{margin-bottom: 0px !important;}
.mobile-option-container .mdl-js-ripple-effect .mdl-checkbox.mdl-js-checkbox.is-upgraded{margin-bottom: 0.750em;}
.img-container  .mdl-checkbox.mdl-js-checkbox.is-upgraded.is-checked { background: rgba(0, 0, 0, 0.3); height: 100%;}
.img-container .mdl-checkbox.is-checked .mdl-checkbox__box-outline{
    background-size: auto auto;
    background-size: 100%;
}
.img-container  .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {background: transparent}
.img-container .mdl-checkbox__tick-outline {position: absolute; }
.videoOuter {
    position: relative;
    width: 100%;
    height: auto;
    float: left;
    margin-top: 10px;
}
.video-play-btn {
    position: absolute;
    text-align: center;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
}

.video-play-btn img{width: auto !important; display: inline-block !important;} 
.video-img {
    position: absolute;
    width: 100%;
    height: 100%;
    /*padding: 5px;*/
}
.video-img img{
    width: 100%;
}
.mdl-checkbox{height: 1.625em;}
.like-box {
    background: #ff4e4e;
    color: #fff;
    height: calc(50vw - 15px);
}
.flexcenter {display: block; flex-wrap: wrap; justify-content: center; text-align: center;}
.flexcenter .col-lg-6.col-md-6.col-sm-6.col-xs-6 {
    float: none;
    display: inline-flex;
    text-align: center;
    flex-direction: column;
    margin: 0px -2px;
}
.img-container img + .mdl-radio.is-checked {background-color: rgba(0, 0, 0, 0.3) ; transition: background-color 0.3s ease-out; }
/*.img-container img + .mdl-radio.is-checked .is-visible  {background: none;}*/
.img-container .mdl-ripple.is-visible { opacity: 0.5;}
.img-container .mdl-radio__outer-circle, .img-container .mdl-radio__inner-circle {visibility: hidden;}
.rippler-bs-primary .rippler-div { background-color: #000 !important;}
.img-container .mdl-radio__ripple-container, .img-container  .mdl-checkbox__ripple-container{width: 100%; height: 100%; top: 0; left: 0; border-radius: 0px !important;}
.img-container  .mdl-ripple.is-animating {
    transition: width 0.8s cubic-bezier(0, 0, 0.2, 1), height 0.8s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.8s cubic-bezier(0, 0, 0.2, 1);
    transition: transform 0.8s cubic-bezier(0, 0, 0.2, 1), width 0.8s cubic-bezier(0, 0, 0.2, 1), height 0.8s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
    transition: transform 0.8s cubic-bezier(0, 0, 0.2, 1), width 0.8s cubic-bezier(0, 0, 0.2, 1), height 0.8s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.8s cubic-bezier(0, 0, 0.2, 1);

}

.matrix-table ::-webkit-scrollbar {
    -webkit-appearance: none;
}

.matrix-table ::-webkit-scrollbar:vertical {
    width: 5px;
}

.matrix-table ::-webkit-scrollbar:horizontal {
    height: 5px;
}

.matrix-table ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    border-radius: 10px;
    border: 1px solid #ffffff;
}

.matrix-table ::-webkit-scrollbar-track {
    border-radius: 50px; 
    background-color: #ffffff; 
}

.mb-12{margin-bottom: 0.75em;}
.mb-0{margin-bottom: 0px !important;}

/* emoji range slider */

.rate {
    text-align: left;
    width: 84%;
    display: block;
    margin: 0 auto;
    height: auto;
    padding-top: 7px;
}
.emoji {
    height:3.8em;
    line-height: 12px;
    text-align: center;
    display: inline-block;
    width: 100%;
    margin-bottom: 15px;
}


.rageslider-bar .ui-state-default, .rageslider-bar .ui-widget-content .ui-state-default, .rageslider-bar .ui-widget-header .ui-state-default, 
.rageslider-bar .ui-button, html .rageslider-bar .ui-button.ui-state-disabled:hover, html .rageslider-bar .ui-button.ui-state-disabled:active {
    background: #ff4e4e;
    border-color: #fff;
    border-radius: 50%;
    height: 36px;
    width: 36px;
    top:-13.5px;
    border:2px solid #fff;
    outline: none;
}
.rageslider-bar .ui-slider-horizontal .ui-slider-handle{
    margin-left:-18px;

}

.ratingicon:after{content: ''; position: absolute; height: 1.25em; width: 2px; background: #D7D7D7; margin-top: 15px; margin-left: -1px; }
.rageslider-bar .ui-state-default:before{
    content: "";
    position: absolute;
    width: 14px;
    height: 12px;
    left: 0;
    right: 0;
    text-align: center;
    margin: 0 auto;
    top: 11px;
    background-size: cover;

}
.rageslider-bar .ui-widget-header{ background: #ff4e4e; border-radius: 0px;   }
.rageslider-bar .ui-widget.ui-widget-content {border-radius: 0px; height:10px;  background: #D7D7D7; border-color: #D7D7D7;}
.emoji ul {padding-left: 0px; float: left; width: 100%; margin-bottom: 0px;  font-size: 1em; position: relative;}
.emoji li {
    float: left;
    list-style: none;
    position: absolute;
    text-align: center;
    font-size: 1em;
    margin-left: -.75em;
}
.ratingicon.s-terrible {  left: 0%;}
.ratingicon.s-very-sad { left: 11.11%;}
.ratingicon.s-sad{ left: 22.22%;}
.ratingicon.s-bad { left: 33.33%;}
.ratingicon.s-okay { left: 44.44%;}
.ratingicon.s-Satisfied{ left: 55.55%;}
.ratingicon.s-happy{ left: 66.66%;}
.ratingicon.s-very-happy { left: 77.77%;}
.ratingicon.s-great { left: 88.88%;}
.ratingicon.s-excellent {  left: 99.99%;}
.emoji-rating-text{ position: relative;font-size: 0.875em;   margin-top: 16px; width: auto; text-align: center; display: inline-block; transform: translate(-50%); left: 44.44%;}
.emoji li img{width: 1.5em;}
.irs-grid { top: -1.5em;  bottom: inherit; height:1.5em;}

.emoji li.ratingicon span{
    width: 1.250em;
    height: 1.250em; 
    background-size: cover;
    display: block;
    background-repeat: no-repeat;
}



.emoji li.ratingicon span{
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    transition: -webkit-transform 0.7s;
    transition: -moz-transform 0.7s;
    transition: -ms-transform 0.7s;
    transition: transform 0.7s;

}

.emoji li.ratingicon.active span{
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    transition: -webkit-transform 0.7s;
    transition: -moz-transform 0.7s;
    transition: -ms-transform 0.7s;
    transition: transform 0.7s;

}
.emoji li.s-happy { text-align: center;}
.rageslider-bar .ui-state-default.ui-state-focus.ui-state-active.ui-state-hover{ 
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    transition: -webkit-transform 0.3s;
    transition: -moz-transform 0.3s;
    transition: -ms-transform 0.3s;
    transition: transform 0.3s;
}

.rageslider-bar .irs-slider.single::after, .rageslider-bar .ui-slider-horizontal .ui-slider-handle::after {
    content: "";
    width: 60px;
    height: 60px;
    background: transparent;
    position: absolute;
    z-index: -1;
    top: -12px;
    left: -14px;
}
.rageslider-bar span.irs-line::before, .rageslider-bar .ui-widget.ui-widget-content::before {
    content: '';
    background: transparent;
    height: 25px;
    width: 100%;
    position: absolute;
    top: -8px;
}


/*----------new templtet---------------*/

.img-container-medium{width: 49%; display: inline-block; vertical-align: middle;}
.checkbox-txt{ width: 49%; display: inline-block; vertical-align: middle; padding-left: 10px; margin-bottom: 5px; padding-top: 5px;}
.checkbox-txt .mdl-js-ripple-effect.chcekboximagetext.mb-12:last-child{margin-bottom: 0px;}
h2.image-checkbox-heading {
    display: block; 
    font-size: 0.812em;
    font-weight: bold;
    margin-bottom: 9px; 
    margin-top: 0px; 
    padding: 0px; 
    line-height: inherit;
}
.image-radiobtn-txt .mdl-radio__outer-circle{border-radius: 0px; height: 1.375em;width: 1.375em; }
.image-radiobtn-txt  .mdl-radio__outer-circle {top:2px; left: -1px;}
.image-radiobtn-txt .mdl-radio__inner-circle {
    background: #ff4e4e;
    height: 1.187em;
    left: 1px;
    top: 4px;
    width: 1.187em;
    transition: none;
}
.image-radiobtn-txt .mdl-radio.mdl-js-radio.is-checked .mdl-radio__outer-circle:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ff4e4e;
}


.img-container-medium img{width: 100%;}
.image-radiobtn-txt{display: block; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #DCDCDC;}
.image-radiobtn-txt:last-child{margin-bottom: 10px;}
.image-radiobtn-txt .mdl-radio {font-size: inherit;}
.image-radiobtn-txt .mdl-radio { height: 1.625em;}
.image-radiobtn-txt .mdl-radio.is-checked .mdl-radio__inner-circle {transform: inherit;}
.image-radiobtn-txt .mdl-radio{line-height: 1.5em}
.image-radiobtn-txt .mdl-radio.is-upgraded { padding-left: 1.5em;}
.image-radiobtn-txt .mdl-radio__ripple-container {height: 2.62em; width: 2.62em; top: -0.5em; left:-0.687em; }

/*-----quit survey pop------------*/
.swal-overlay{font-size: inherit;}
.swal-title{
    font-size: 1.125em;
    font-weight: 400;
    padding: 0 0 20px 0;
    display: block;
    width: 100%;
    margin: 0px;
    line-height: 20px;
    text-align: left;
    color: rgb(51, 51, 51);
}

.swal-modal{border-radius: 0px; padding: 20px;}
.swal-title:not(:last-child) {
    margin-bottom: 0;

}
.swal-title:first-child {
    margin-top: 0;

}
.swal-text{
    font-size: 0.875em; 
    display: block;
    text-align: left; 
    width: 100%; 
    line-height: 1.5em;
    margin-bottom: 10px;
    padding: 0px;
    max-width: calc(100%);
    color: #333;
}

.btn.mdl-button.btn-secondary{
    background: #EFEFEF; 
    color: #333;;
    font-size: 0.937em;
    text-align: center; 
    height: auto;
    margin-right: 6px !important;
}

.swal-button--cancel{
    background: #EFEFEF;
    color: #333;
    font-size: 0.937em;
    text-align: center;
    margin-right: 6px !important;
    height: 2.37em !important;
    width: 5.31em;
    margin: 0px !important;
    padding: 0px;
    border-radius: 0 !important;
    text-transform: none;
    border: none;
    letter-spacing: 0;
    overflow: hidden;
    will-change: box-shadow;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    cursor: pointer;
    vertical-align: middle;
}
.swal-button--confirm.swal-button--danger{
    font-size: 0.937em;
    text-align: center;
    width: 5.31em;
    margin: 0px !important;
    height: 2.37em !important;
    padding: 0px;
    background-color: #ff4e4e !important;
    padding: 0px;
    border-radius: 0 !important;
    text-transform: none;
    border: none;
    letter-spacing: 0;
    overflow: hidden;
    will-change: box-shadow;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    cursor: pointer;
    vertical-align: middle;
}

.swal-button--cancel:focus, .swal-button--confirm.swal-button--danger:focus {
    box-shadow: none;
}
.swal-footer{padding: 0px; margin: 0px;}
.swal-button-container{margin: 0px;}
.btn.mdl-button.swal-button--cancel{margin-right: 15px !important}
.swal-overlay::before {
    height: 100%;
    text-align: center;
    margin: 0 0 0 -4px;
    padding: 0px;

}


.material-loader {
    position: relative;
    display: inline-block;
    width: 34px;
}
.page-loader .material-loader{
    width: 52px;
}
.material-loader:before {
    content: '';
    display: block;
    padding-top: 100%;
}

.circular {
    -webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;
    height: 100%;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.path {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
    -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}


.button-primary .path {
    -webkit-animation: dash 1.5s ease-in-out infinite, colorPrimaryButton 6s ease-in-out infinite;
    animation: dash 1.5s ease-in-out infinite, colorPrimaryButton 6s ease-in-out infinite;
}

.content-loader{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999;}

@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes dash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124px;
    }
}
@keyframes dash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124px;
    }
}
@-webkit-keyframes color {
    100%, 0% {
        stroke: #ff4e4e;
    }
}
@keyframes color {
    100%, 0% {
        stroke: #ff4e4e;
    }

}




@-webkit-keyframes colorPrimaryButton {
    100%, 0% {
        stroke:  #fff;
    }
}
@keyframes colorPrimaryButton {
    100%, 0% {
        stroke: #fff;
    }
}


@media (orientation:landscape) {
    .top-content{ display: flex; justify-content: space-between; align-items: center;height: calc(100vh - 80px); flex-wrap: wrap;}
    .content, .header {width: 50% !important;}
    .select-intro-bg{width: 50% !important;}
    .content{ height: auto !important; overflow: auto; max-height: 100%;}
    .like-box { height: calc(25vw - 15px);}
    .content {padding: 0px !important}  
 
    .questionHtmlChild {display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}     
    .matrix-table{height: 242px}
    .image-radiobtn-txt  .mdl-radio.is-upgraded { padding-left: 1.187em;}

    /*Override Owl*/
    .owl-stage-outer, .owl-stage, .owl-item, .questionHtmlChild { height:inherit;    }
    .star-container-single.star-container-multiple .star{width: 17px; height: 17px;}
    .star-container-single.star-container-multiple .star::before { height:17px;  width: 17px;}
    .irs-with-grid.right .irs-single {  margin-left: -70px !important;}
    .checkbox-txt {padding-top: 1px;}
    .survey-card-full-view .top-content{height: calc(100vh - 20px)}
    .minoption-ts .top-content{justify-content: flex-end;  height: 100%;}
    .rate-slider-two{padding-top: 15px !important;}
}



/*loader css*/
.pageloader-div {
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 999;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pageloader-div-inner{ text-align: center;}

.ldBar-label{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26pt;
    color: #ff4e4e;
    font-family: arial;
}

.circular-loader{
    height: 170px !important; width: 170px !important; margin: 0 auto; 
}
.loader-text{ text-transform: capitalize; color: #ff4e4e; font-size: 17.33pt; font-family: arial; margin-top: 17px;}


/*Thank you css*/
.thank-div{ display: table; text-align: center; font-size: 1.125em; line-height: 1.28em; height: 100%; width: 100%;}
.thank-img{ float: left; width: 100%; text-align: center; margin-bottom: 1.18em;}
.thank-img img{width: 58%; max-width: 345px;}
.thank-div-inner{ display: table-cell; vertical-align: middle; padding: 0 10%;}
.bg-none {background: transparent;}
.portrait-image.active {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 99;
    overflow: scroll;
    height: 100vh;
/*    transform: translate(0, -50%);*/
    bottom: 0;
    right: 0;
    transition: all 0.5s;
  
     background: rgba(0, 0, 0, 0.5);
}
.portraitouter{  display: table; text-align: center; margin: 0 auto; }
.portrait-image.active .portraitouter{height: 100vh;}
.portrait-image-inner{display: table-cell; vertical-align: middle;}
.p-0{padding: 0px }

.portrait-image.active img{width: 100%;}
.simple-image_ts{display: block; text-align: center; height: 100%; width: 100%; margin: 0 auto;}


.buttnload{
    position: fixed;
    bottom: 0px;
    z-index:9;
}

@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}



/*--- animation loading-----*/

.pageloader-spinner {
    height: 3em;
    width: 3em;
    background-size: cover;
}
.pageloader {
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 999;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
}
.pageloader-spinner {

    background-color: transparent;
    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    animation: rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes rotateplane {
    0% { -webkit-transform: perspective(120px) }
    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes rotateplane {
    0% { 
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
    } 50% { 
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
    } 100% { 
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}



/* survey status */

.survey-staus-qualified { background: #65BD46; }
.survey-staus-disqualified{ background: #FF6349; }

.survey-staus-upload-failed{ background: #FF6349; }
.survey-status-bg{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;
    display: table;
}
.survey-stuts-txt h2{font-size: 1.375em; width: 100%; color: #fff; text-align: center; margin: 0px; padding: 1.64em 0 0.60em 0; line-height: inherit;  }
.survey-stuts-txt p{font-size:1.063em; width: 100%; color: #fff; text-align: center;}
.survey-status-preview-txt {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding:10px 30px
}
.survey-status-img img {
    width: 5.250em;
    height: 5.250em;
}

#fullPageLoader svg {
    position: absolute;
    text-align: center;
    margin: 0 auto;
    left: 0px;
    right: 0px;
}

.ldBar-label {
    display:none !important;
}

.ldBar-label:last-child {
    display:flex !important;
}


/* max diff template */

.max-diff-table{padding-left: 0px;}
.max-diff-table .maxdiff-top-header-container {width: 100%;}
.max-diff-table .maxdiff-scroll-table  ul {
    float: left;
    width: 100%;
    padding-left: 0;
    margin: 0;
    white-space: nowrap;display: table;}
.max-diff-table ul li {
    padding: 5px 0;
    word-wrap: break-word;
    word-break: break-word;
    white-space: initial;
    line-height: 16px;
    float: none;
    text-align: center;
    margin-left: 0px;
    width: 29%; margin-right: 0px; color: #2d2b2b; display: table-cell; vertical-align: middle;}
.max-diff-table ul li .mdl-radio{height: 30px; font-size: inherit;}
.max-diff-table .maxdiff-top-header  li{font-size: 0.750em; font-weight: bold; height: 37px; color: #2d2b2b; padding-top: 0px !important;     background: transparent !important; }
.max-diff-table .maxdiff-scroll-table{
    background: #fff;     float: left;
    overflow: auto;
    white-space: nowrap;
    width: 100%;
    height: 100%;
    pointer-events: auto;
}
.maxdiff-scroll-table  ul li{
    padding: 5px 5px;
    word-wrap: break-word;
    word-break:  break-word;
    white-space: initial;
    float: none;
    text-align: center;
    margin-left: 0px;
}
.max-diff-table ul li:nth-child(2n) { background: rgba(0, 0, 0, 0.05); width: 39% !important}
.max-diff-table{height: 240px; background: transparent}
.max-diff-table ul.maxdiff-top-header  { 
    font-size: inherit; height: auto;
    float: left;
    width: 100%;
    padding-left: 0;
    margin: 0;
    white-space: nowrap;
}
.max-diff-table .maxdiff-scroll-table ul:first-child li{padding-top: 26px; padding-bottom: 16px;}
.max-diff-table .maxdiff-scroll-table ul:last-child li{padding-top: 16px; padding-bottom: 25px;}
.max-diff-table .maxdiff-scroll-table ul{font-size: inherit;}
.max-diff-table .maxdiff-scroll-table ul li {height: 62px;}
.max-diff-table .maxdiff-scroll-table ul li.option_txt{ font-size:0.875em;  line-height: 1.4em;}
.max-diff-table ul.maxdiff-top-header  {display: table;}
.max-diff-table .mdl-radio.is-upgraded {padding-left: 0;}

/* min select */
.seclect-min-txt{
    background: #D8D8D8;
    border-radius: 20px;
    padding: 0 0.938em;
    height: 2em;
    line-height: 2em;
    font-size: 0.750em;
    display: inline-block;
}
.select-intro-bg{background: rgba(0, 0, 0, 0.05); width: 100%; padding: 0.625em 0.625em 0.938em 0.625em;  text-align: center;   float: left;}
.minoption-ts .content { background: rgba(0, 0, 0, 0.05); padding-bottom: 0px;}
.minoption-ts .content .mobile-option-container {background: transparent; overflow: hidden;}
.minoption-ts .mobile-option-container .mb-12:last-child{margin-bottom: 0px;}



/* rating slider two */

.rate-slider-two .rating-value-txt{position: relative;
    font-size: 0.875em;
    margin-top: 16px;
    width: auto;
}
.rate-slider-two .rating-min-value.rating-value-txt {
    float: left;
    text-align: left;
    width: 42%;
}
.rate-slider-two .rating-max-value{
     float: right;
    text-align: right;
    width: 42%;
}

.rate-slider-two {
    text-align: left;
    width: 100%;
    display: block;
    margin: 0 auto;
    height: auto;
    padding-top: 10px;
}
.rate-slider-two .ui-widget.ui-widget-content {
    border: transparent;
}
.rate-slider-two .ui-slider-horizontal .ui-state-focus.ui-state-active {
        -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    transition: -webkit-transform 0.3s;
    transition: -moz-transform 0.3s;
    transition: -ms-transform 0.3s;
    transition: transform 0.3s;
}
.rate-slider-two .rate {width: 90%;}

.video-landscape{height: calc(100vh - 250px);background:#000 !important;}
.video-img.portrait-video-thumb {display:table; height: calc(100vh - 250px);padding: 0 !important; background: #000;}
.portrait-video-thumb span{display: table-cell; vertical-align: middle;text-align:center}
.portrait-video-thumb span img{display: inline-block !important; width: auto !important; max-height: calc(100vh - 250px) !important;}

.template-button-container{position: relative; float: left; width: 100%;}
.template-button-container button.btn.mdl-button{margin-top: 0 !important;}
.timer-container-div{float: left;width: 100%;position: absolute; background: #ff4e4e;height: 100%; display: flex; justify-content: center; align-items: center; z-index: 9;}
.timer-container-div:after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; background: rgba(255,255,255,0.5); }
.timer-container {vertical-align: middle;text-align: center;float: left;width: 100%;height: 100%;}
.timer-container-inner{ position: relative; display: inline-block;}
.timer-toast {float: left;width: 100%;text-align: center;}
.timer-toast-inner{background: rgba(0,0,0,0.5);color: #fff;font-size: 10px;padding: 5px 10px;border-radius: 30px;}
.timer-controlls {
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    
}
.timer-display-remain-time {font-family: 'Arial';font-weight: normal;font-size: 0.938em; color: #fff;}
.timer-e-c-base {fill: none;stroke: transparent;stroke-width: 12px}
.timer-e-c-progress {fill: rgba(0,0,0,0.7);stroke: #fff;stroke-width: 12px;}
.timer-e-c-pointer {fill: transparent;stroke: #F7958E;stroke-width: 0;}
#timer-e-pointer { transition: transform 0.7s; }
.timerSvg{width: 1.875em;}

.timer-container {
    vertical-align: middle;
    text-align: center;
    float: left;
    width: 100%;
    height: 100%;
}
.timing-loader {
    position: absolute;
    left: 0;
    height: 100%;
    width: 0;
    background: #ff4e4e;
    z-index: 1;
}
.animate-button{
    animation-name: timingLoaderAnimation;
    animation-duration: 0.5s;animation-timing-function:ease-in-out;}

.facebook-next-button .timer-container-div{
    background: #4167B0 !important;
}

.facebook-next-button .timing-loader{
    background: #4167B0 !important;
}
@keyframes timingLoaderAnimation {
    0% {transform:scale(1);}
    50% {transform:scale(0.8);}
    100% {transform:scale(1);}
}

/*ranking template*/

.ranking-carousel-container {padding: 0 2.188em;float: left;width: 100%;margin-bottom: 10px; position: relative;}
.owl-prev,.owl-next{position: absolute; top: 50%; margin-top: -12px; z-index: 2;}
.owl-prev{left: -30px;}
.owl-next{right: -30px;}
/*.owl-stage-outer{overflow: hidden;}*/
.ranking-carousel-container:before, .ranking-carousel-container:after{position: absolute; content: ''; top: 0; bottom: 0; height: auto; width: 2.188em; background: #fff; z-index: 2;}
.ranking-carousel-container:before{left: -1px;}
.ranking-carousel-container:after{right: -1px;}
.ranking-carousel{ float: left; width: 100%;}
.ranking-carousel .ranking-item {width: 6.563em;height: 3.750em;max-height: 130px; max-width: 200px; font-size: 0.875em;border-radius: 10px;background: #E4E4E4;display: flex;justify-content: center;align-items: center;text-align: center;line-height: normal;padding: 5px; cursor: move;}
.ranking-list-container{float: left; width: 100%;}
.ranking-list-container ul{padding-left: 0;}
.ranking-list-item{height: 4.375em; width: 100%; max-height: 140px; float: left;margin-bottom: 2px; display: flex; justify-content: center; align-items: center; border: 1px dashed #ccc; padding: 20px;}
.ranking-list-item-count{width: 40%;}
.ranking-list-item-drop{width: 60%;}
.ranking-list-item-drop .ranking-item{ width: 6.250em; line-height: normal; font-size: 0.875em; height: 3.750em; border-radius: 10px; background: #E4E4E4; display: flex; justify-content: center; align-items: center; text-align: center; padding: 5px;}
.ranking-list-item.dropped{background: #F2F2F2; border: none;}
.ranking-list-item.ui-droppable-hover:not(.dropped){ border-color: #ff4e4e;}
.ranking-list-item.ui-droppable-hover:not(.dropped) .ranking-list-item-drop-blank{color: #ff4e4e;}
.ranking-list-item-drop-container{position: relative; display: inline-block;}
.remove {position: absolute;right: -0.313em;top: -0.313em;background: #ff4e4e;border-radius: 50%;line-height: 0;padding: 5px;cursor: pointer;}
.remove img{width: 0.5em;}
.owl-carousel{display: block !important;}
.nav-link {position: absolute;background: #ff4e4e;height: 25px;width: 25px;display: flex;justify-content: center;align-items: center;border-radius: 50%;padding: 5px;cursor: pointer;}
.nav-link.previous{ left: 0;}
.nav-link.next{ right: 0;}
/*.item{width: 6.563em;height: 3.750em;max-height: 130px; max-width: 200px;}*/

.ranking-carousel .ranking-item-div{font-size: inherit; height: auto !important; width: auto !important;}
.prev,.next{position: absolute;background: #ff4e4e;border-radius: 50%;z-index: 9;height: 1.250em; width: 1.250em;display: flex; justify-content:  center; align-items: center;}
.prev img,.next img{width: 0.5em;}
.prev{left: 10px;}
.next{right: 10px;}
.ranking-carousel .ranking-item-div{margin-right: 10px; height: 100%; display: flex;}
.ranking-carousel-container{height: 3.3em; }
.ui-sortable-helper.droppable{border-color: #ff4e4e;}
.ui-sortable-helper.droppable .ranking-list-item-drop-blank{color: #ff4e4e;}
.ranking-list-container ul{float: left; width: 100%; position: relative; z-index: 0;}
.ranking-carousel{position: relative; z-index: 1;}
.ranking-list-item-drop-blank{width: 6.250em; text-align: center; color: rgba(0,0,0,0.5);font-size: 0.875em;}
.nav-icon.disabled{opacity: 0.5;}
.ranking-list-container ul{font-size: inherit; overflow-x: hidden;}
.prev-div,.next-div{position: absolute; display: flex; justify-content: center; align-items: center;height: 100%; width: 2.188em; cursor: pointer; z-index: 9;}
.prev-div{left: 0;}
.next-div{right: 0;}


/*autocomplete css*/

.ui-menu .ui-menu-item{background: #fff;}
.ui-widget.ui-widget-content {border: 1px solid #c5c5c5;}
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front{max-height: 130px; height: auto;overflow-y: scroll;}

.custom-autocomplete {
        max-width: calc(100vw - 1.25em - 20px);
        margin-left: calc(0.625em + 10px);
        margin-right: calc(0.625em + 10px);
}
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front.custom-autocomplete{max-height: 300px; overflow-x: hidden; border: none; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.3);}


.custom-autocomplete .ui-state-active,
.custom-autocomplete .ui-widget-content .ui-state-active,
.custom-autocomplete .ui-widget-header .ui-state-active,
.custom-autocomplete a.ui-button:active,
.custom-autocomplete .ui-button:active,
.custom-autocomplete .ui-button.ui-state-active:hover {
    background: #E8E8E8;
    font-weight: normal;
    color: #2b2b2b;
    margin: 0;
}
.ui-menu.custom-autocomplete .ui-menu-item-wrapper{padding: 0.625em 1.250em 0.625em 1.250em;font-size: 0.875em; border-top: none; line-height: normal;
    border-bottom: 1px solid #E8E8E8;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;}

@media  (max-height: 570px) and (orientation: landscape) {
    .ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front.custom-autocomplete{max-height: 50vh;}
}
@media (orientation: landscape) {
  .custom-autocomplete{max-width: calc(50vw - 1.25em - 10px); margin-left: calc(0.625em); margin-right: calc(0.625em);}
}




/* multipule openened */

.img-container-mulitipule-option {
    width: 3.813em;
    height: 2.500em;
    float: left;
    overflow-x: hidden;
    margin-bottom: 0px;
    border:1px solid #E9E9E9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.625em;
}

.img-container-mulitipule-option img{max-width: 100%; max-height: 100%;}
.checkbox-input.multipule-openended-ts input{
    float: left;
    width: calc(100% - 4.5em);
}

.mobile-option-container .openended-with-label input{
    border-top: 0px; 
    border-left: 0px; 
    border-right: 0px; 
    font-size: 0.875em; 
    color: #000;
    padding-left: 0px;
    padding-right: 0px;
    /*height: 2.3em*/
}
.mobile-option-container .openended-with-label input:focus{outline: none;}
.mobile-option-container .openended-with-label .mdl-textfield__label {font-size: 0.875em; top:0.313em;}
.mdl-textfield--floating-label.is-focused.openended-with-label .mdl-textfield__label, 
.mdl-textfield--floating-label.is-dirty.openended-with-label .mdl-textfield__label, 
.mdl-textfield--floating-label.has-placeholder.openended-with-label .mdl-textfield__label{
    top:-10px; font-size: 0.688em; margin: 0;
 
}
.mdl-textfield.openended-with-label{font-size: inherit; margin: 0.625em 0 0.750em; padding: 0px;}
.openended-with-label .mdl-textfield__label::after {

    bottom: 0;

}
.footer_tooltip.tooltip_top {
    top: 70px;
    bottom: inherit;
}


.checkbox_with_image_txt .img-container-small{margin-right:0.313em }
.checkbox_with_image_txt .mdl-checkbox__label{width: calc(100% - 4.188em); line-height: 1em; display: flex;align-items: center; height: 100%;}



/*---progress bar---*/

.progress-bar-start{float: left; font-size: 0.625em; color: #ff4e4e; width: 1.80em; text-align: left; line-height: 1;}
.progress-bar-end{float: left; font-size: 0.625em; color: #ff4e4e; width: 3em; text-align: right; line-height: 1;}
.progress{width:calc(100% - 3.5em); background: rgba(255, 78, 78, 0.20); float: left;  height: 0.5em; }
.progress-bar{background: #ff4e4e;}
.progress .progress-bar {
    animation-name: animateBar;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: .4s;
}
@keyframes animateBar {
    0% {transform: translateX(-100%);}
    100% {transform: translateX(0);}
}

.survey-card-full-view .progress-bar_inner{display: none;}


/*number ts*/
.select-number select{
    width: 4.500em;
    height: 3.000em;
    border:1px solid #C6C6C6;
    padding: 10px;
     -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
    background: url("../../images/dropdown-arrow.png")no-repeat right 10px center;
    background-color: #fff;
    outline: none !important;
    background-size: 13%;
    line-height: 30px;
}

.select-number select option:focus, .select-number select:focus{
   outline: none;
}
.rank-number-ts {display: flex; align-items: center}
.rank-number-ts .ranking-txt{
    width: calc(100% - 4.500em);
    padding-left: 0.625em;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}


.input-numer-type{float: left; width: 100%; text-align: center; 
    padding: 0.625em 0;
    background-color: #F2F2F2;
}

.image-rank-option-container {
    margin-bottom: 10px !important;
}

.ranking-image-container {
    margin: 0;
    background-color: #E9E9E9;
}




@media (orientation:landscape) {
    .top-content{ display: flex; justify-content: space-between; align-items: center;height: calc(100vh - 80px); flex-wrap: wrap;}
    .content, .header {width: 50% !important;}
    .select-intro-bg{width: 50% !important;}
    .content{ height: auto !important; overflow: auto; max-height: 100%;}
    .like-box { height: calc(25vw - 15px);}
    .content {padding: 0px !important}  
    .questionHtmlChild {display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}     
    .matrix-table{height: 242px}
    .image-radiobtn-txt  .mdl-radio.is-upgraded { padding-left: 1.187em;}

    /*Override Owl*/
    .owl-stage-outer, .owl-stage, .owl-item, .questionHtmlChild { height:inherit;    }
    .star-container-single.star-container-multiple .star{width: 17px; height: 17px;}
    .star-container-single.star-container-multiple .star::before { height:17px;  width: 17px;}
    .irs-with-grid.right .irs-single {  margin-left: -70px !important;}
    .checkbox-txt {padding-top: 1px;}
    .survey-card-full-view .top-content{height: calc(100vh - 20px)}
    .minoption-ts .top-content{justify-content: flex-end;  height: 100%;}
    .rate-slider-two{padding-top: 15px !important;}
    .simple-image_ts{height: calc(100vh - 2.500em)}
    .owl-carousel .owl-item .simple-image_ts img {width: auto; text-align: center; margin: 0 auto;}
    .fbQuestion .top-content {height: 100%;}
    .fullPageView .top-content{height: 100vh; align-items: flex-start}
    .video-landscape{height: calc(100vh - 150px)}
    .video-img.portrait-video-thumb {height: calc(100vh - 150px);}
    .portrait-video-thumb span img{ max-height: calc(100vh - 150px) !important;} 
}
.form-item__element--select.not_chosen {
    color: #000;
    font-size: 0.8em;
    width: 6em;
    height: 4em;
    line-height: 30px;
}
/*-- ts 131 ---*/
.single-answer-other-options-container .mdl-radio__label {line-height: 1.2em; margin-top: 0;}
.single-answer-other-options-container .mdl-radio{
    display: flex;
    text-align: left;
    line-height: 1.2em;
    height: auto;
    margin-bottom:16px;
    align-items: center;
}
.single-answer-other-options-container .mdl-radio__inner-circle {z-index: 9; top: auto;}
.single-answer-other-options-container .mdl-radio__outer-circle{background: #fff;border: 2px solid #c6c6c6;top:auto}
.single-answer-other-options-container .mdl-radio__ripple-container{top:auto}
/*--- end -----*/
@supports (-moz-appearance:none) 
{
  /* Add firefox specific CSS code here */
  .select-number select {
    padding: 2px !important;
  }
}

/* single image selection radio */
.imageSelectButtonWithRadio .mdl-radio .mdl-radio__outer-circle{
    visibility: visible;
    top: 5px;
    left: 5px;
    border: 2px solid rgba(255, 255, 255, 0);
    background: rgba(0, 0, 0, 0);
    border-radius: 50%;
}
.imageSelectButtonWithRadio .mdl-radio.is-checked .mdl-radio__outer-circle{
    background: rgba(255, 255, 255);
    border-color: #ff4e4e;
}
.imageSelectButtonWithRadio .mdl-radio .mdl-radio__inner-circle{
    left: 10px;
    top: 10px;
    z-index: 10;
    visibility: visible;
}

/* Zoom lib calsses --- START */

.portrait-image.back-set.active{
    background: rgba(0, 0, 0, 0.75);
    overflow: auto;
    left:-1000px;
    opacity: 0;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    /*transform: translate(-1050px,0);*/
}

.portrait-image.back-set.active.activeZoom{
    left:0;
    opacity: 1;
    /*transform: translate(0,0);*/
}

.portrait-image.back-set.active .zoom-close-btn{
    transition: all 0.5s;
    right: -1000px;
}
.portrait-image.back-set.active.activeZoom .zoom-close-btn{
    right: 0;
}
.portrait-image.back-set.active .zoom-in-zoom-out-btn{
    /*display: none;*/
    left:-1000px;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.portrait-image.back-set.active.activeZoom .zoom-in-zoom-out-btn{
    /*display: block;*/
    left:0;
}


.portrait-image.active img{max-width:none;max-height:none;}
.zoom-in {
    position: absolute;
    bottom: 15px;
    right: 10px;
    padding: 15px 0 0 15px;
    z-index: 99;
    cursor: pointer;
  }
.zoom-in img {
    width: 41px !important;
    padding: 9px 8px;
    background: rgba(0,0,0,0.70);
}
.portrait-image.active .btn img {
    width: 20px;    margin-right: 5px;
}

.simple-image_ts .zoom-in {bottom: 0;right: 0;}
.mobile-option-container .fullImagePortraitView + .zoom-in{bottom: 0;right: 0;}
.mobile-que .img-container + .zoom-in {bottom: 22px;right: 5px;}
.ranking-image-container .zoom-in{bottom: 5px;right: 5px;}

.portrait-image-inner .zoom-close-btn{
    position: fixed;
    top: 0;
    right: 0;
    padding: 10px 10px 15px 15px;
}

.portrait-image-inner .zoom-close-btn img{
    width: auto !important;
    max-width: 100% !important;
}
.zoom-in-zoom-out-btn{
    display: flex;
    justify-content: center;
    text-align: center;
    margin-bottom: 25px;
    position: fixed;
    bottom: 0px;
    width: 100%;
    left: 0;
    right: 0;
}
.zoom-in-zoom-out-btn button.btn.close {
    border: 1px solid #fff !important;
    color: #fff;
    opacity: 1;
    text-shadow: none;font-weight: normal;
}
.zoom-in-zoom-out-btn button.btn.mdl-button.zoom-in-btn ,
.zoom-in-zoom-out-btn button.btn.mdl-button.zoom-out-btn{
    margin: 0px 5px !important;
}
    
.zoom-in-zoom-out-btn button{
    width: auto !important;
    margin: 0px 5px !important;
    border:0px !important;padding: 0 11px;
    cursor: pointer;
}
/* Zoom lib calsses  --- END*/
 
.multiple-answer-checkbox .mdl-checkbox.is-upgraded {
    display: flex;
    text-align: left;
       height: auto;
   margin-bottom: 15px !important;
    align-items: center;
}
.multiple-answer-checkbox .mdl-checkbox__label {
         line-height: 1.2em;margin-top: 0;
   
}
.multiple-answer-checkbox .mdl-checkbox__box-outline,.multiple-answer-checkbox .mdl-checkbox__ripple-container{     top: auto;}

@supports (-moz-appearance:none) 
{
  /* Add firefox specific CSS code here */
  .select-number select {
    padding: 2px !important;
  }
}

.slider_value_display{
text-align: center;
font-size: 18px;
margin: 20px auto;
width: 30px;
background: #ff4e4e;
height: 30px;
line-height: 30px;
color: #fff;
border-radius: 50%;
position: absolute;
left: 0px;
font-weight:bold;
top: -70px;}


.slider_value_display:after {
  content:'';
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    bottom:-6px;
    border-top: 10px solid var(--background);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}
.mt-1{margin-top:1px;}
.mt-2{margin-top:2px;}
.mt-3{margin-top:3px;}
.mt-4{margin-top:4px;}
.mt-5{margin-top:5px;}
.mt-10{margin-top:10px;}
.mt-15{margin-top:15px;}
.mt-20{margin-top:20px;}

.mb-1{margin-bottom:1px;}
.mb-2{margin-bottom:2px;}
.mb-3{margin-bottom:3px;}
.mb-4{margin-bottom:4px;}
.mb-5{margin-bottom:5px;}
.mb-10{margin-bottom:10px;}
.mb-15{margin-bottom:15px;}
.mb-20{margin-bottom:20px;}


.nps1-10 span:nth-child(-n + 6){background-color:rgba(231,60,62,0.10); border-color: #E73C3E; color: #E73C3E;}
.nps1-10 span.active:nth-child(-n + 6){background-color:rgba(231,60,62,1); border-color: #E73C3E; color: #fff;}
.nps1-10 span:nth-child(n + 7){background-color:rgba(240,136,27,0.10); border-color: #F0881B; color: #F0881B;}
.nps1-10 span.active:nth-child(n+7){background-color:rgba(240,136,27,1); border-color: #F0881B; color: #fff;}
.nps1-10 span:nth-child(n+9){background-color:rgba(19,170,122,0.10); border-color: #13AA7A; color: #13AA7A;}
.nps1-10 span.active:nth-child(n+9){background-color:rgba(19,170,122,1); border-color: #13AA7A; color: #fff;}

.nps0-10 span:nth-child(-n + 7){background-color:rgba(231,60,62,0.10); border-color: #E73C3E; color: #E73C3E;}
.nps0-10 span.active:nth-child(-n + 7){background-color:rgba(231,60,62,1); border-color: #E73C3E; color: #fff;}
.nps0-10 span:nth-child(n + 8){background-color:rgba(240,136,27,0.10); border-color: #F0881B; color: #F0881B;}
.nps0-10 span.active:nth-child(n+8){background-color:rgba(240,136,27,1); border-color: #F0881B; color: #fff;}
.nps0-10 span:nth-child(n+10){background-color:rgba(19,170,122,0.10); border-color: #13AA7A; color: #13AA7A;}
.nps0-10 span.active:nth-child(n+10){background-color:rgba(19,170,122,1); border-color: #13AA7A; color: #fff;}

.group-color-rating1-10 .option-box-container:nth-child(-n + 4) .top-box-img .multiple-rating-numbers span{background-color:rgba(231,60,62,0.10); border-color: #E73C3E; color: #E73C3E;}
.group-color-rating1-10 .option-box-container:nth-child(-n + 4) .top-box-img .multiple-rating-numbers span.active{background-color:rgba(231,60,62,1); border-color: #E73C3E; color: #fff;}
.group-color-rating1-10 .option-box-container:nth-child(n + 5) .top-box-img .multiple-rating-numbers span{background-color:rgba(225,118,1,0.10); border-color: #FF7601; color: #FF7601;}
.group-color-rating1-10 .option-box-container:nth-child(n + 5) .top-box-img .multiple-rating-numbers span.active{background-color:rgba(225,118,1,1); border-color: #FF7601; color: #fff;}
.group-color-rating1-10 .option-box-container:nth-child(n + 7) .top-box-img .multiple-rating-numbers span{background-color:rgba(251,188,5,0.10); border-color: #FBBC05; color: #FBBC05;}
.group-color-rating1-10 .option-box-container:nth-child(n+7) .top-box-img .multiple-rating-numbers span.active{background-color:rgba(251,188,5,1); border-color: #FBBC05; color: #fff;}
.group-color-rating1-10 .option-box-container:nth-child(n+9) .top-box-img .multiple-rating-numbers span{background-color:rgba(19,170,122,0.10); border-color: #13AA7A; color: #13AA7A;}
.group-color-rating1-10 .option-box-container:nth-child(n+9) .top-box-img .multiple-rating-numbers span.active{background-color:rgba(19,170,122,1); border-color: #13AA7A; color: #fff;}

.group-color-rating0-10 .option-box-container:nth-child(-n + 5) .top-box-img .multiple-rating-numbers span{background-color:rgba(231,60,62,0.10); border-color: #E73C3E; color: #E73C3E;}
.group-color-rating0-10 .option-box-container:nth-child(-n + 5) .top-box-img .multiple-rating-numbers span.active{background-color:rgba(231,60,62,1); border-color: #E73C3E; color: #fff;}
.group-color-rating0-10 .option-box-container:nth-child(n + 6) .top-box-img .multiple-rating-numbers span{background-color:rgba(225,118,1,0.10); border-color: #FF7601; color: #FF7601;}
.group-color-rating0-10 .option-box-container:nth-child(n + 6) .top-box-img .multiple-rating-numbers span.active{background-color:rgba(225,118,1,1); border-color: #FF7601; color: #fff;}
.group-color-rating0-10 .option-box-container:nth-child(n + 8) .top-box-img .multiple-rating-numbers span{background-color:rgba(251,188,5,0.10); border-color: #FBBC05; color: #FBBC05;}
.group-color-rating0-10 .option-box-container:nth-child(n+8) .top-box-img .multiple-rating-numbers span.active{background-color:rgba(251,188,5,1); border-color: #FBBC05; color: #fff;}
.group-color-rating0-10 .option-box-container:nth-child(n+10) .top-box-img .multiple-rating-numbers span{background-color:rgba(19,170,122,0.10); border-color: #13AA7A; color: #13AA7A;}
.group-color-rating0-10 .option-box-container:nth-child(n+10) .top-box-img .multiple-rating-numbers span.active{background-color:rgba(19,170,122,1); border-color: #13AA7A; color: #fff;}

.rating-numbers > span.disabled , .multiple-rating-numbers > span.disabled , .option-box-container.disabled{
    background: #eeeeee !important;
    border: 1px solid #eeeeee !important;
    color: #fff !important;
}