/* source-sans-pro-regular - light */

@font-face {
    font-family: 'Source Sans Pro Light';
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    src: url('../fonts/SourceSansPro-Light.ttf.woff2') format('woff2'), url('../fonts/SourceSansPro-Light.otf.woff') format('woff'), url('../fonts/SourceSansPro-Light.otf') format('opentype'), url('../fonts/SourceSansPro-Light.ttf') format('truetype');
}



/* source-sans-pro-regular - regular */

@font-face {
    font-family: 'Source Sans Pro Regular';
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    src: url('../fonts/SourceSansPro-Regular.ttf.woff2') format('woff2'), url('../fonts/SourceSansPro-Regular.otf.woff') format('woff'), url('../fonts/SourceSansPro-Regular.otf') format('opentype'), url('../fonts/SourceSansPro-Regular.ttf') format('truetype');
}
/* source-sans-pro-regular - black */
@font-face {
    font-family: 'Source Sans Pro Black';
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    src: url('../fonts/SourceSansPro-Black.woff') format('woff'), url('../fonts/SourceSansPro-Black.ttf') format('truetype');
}
/* source-sans-pro-regular - bold */
@font-face {
    font-family: 'Source Sans Pro Bold';
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    src: url('../fonts/SourceSansPro-Bold.ttf') format('truetype');
}
/* source-sans-pro-regular - semi bold */
@font-face {
    font-family: 'Source Sans Semi Bold';
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    src: url('../fonts/SourceSansSemiBold.ttf') format('truetype');
}
/* source-sans-pro-regular - semi bold */
@font-face {
    font-family: 'Source Sans Pro Extra Light';
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    src: url('../fonts/SourceSansPro-ExtraLight.ttf.woff2') format('woff2'), url('../fonts/SourceSansPro-ExtraLight.otf.woff') format('woff'), url('../fonts/SourceSansPro-ExtraLight.otf') format('opentype'), url('../fonts/SourceSansPro-ExtraLight.ttf') format('truetype');
    /* src: url('../fonts/SourceSansPro-ExtraLigt.ttf') format('truetype'); */
}

body {
    background-color: #f6f6f6 !important; /* For browsers that do not support gradients */
    /*  background-image: radial-gradient(red, yellow, green); /* Standard syntax (must be last) */
    font-family: 'Source Sans Pro Regular' !important;
}

body {
    position: relative;
}



#questions .container-fluid {
}

/*CSS form RTL changes start here*/
.tablerowrtl {
    text-align: right !important;
}

.rtl-rightAlign {
    text-align: right !important;
}

/*.smileytextdivRTL {
    width: 100% !important;
    margin: 0 !important;
}

.smileytextdivRTL div.unlikelytextrtl {
        text-align: left !important;
        width: 26% !important;
}

.smileytextdivRTL div.likelytextrtl {
    text-align: right !important;
}*/

/*.smileytextdiv1 div.unlikelytext {
    text-align: right !important;
}*/

.smileytextdiv.rtlAdjustment {
    width: 100% !important;
    margin: 0;
}

.unlikelytext.rtlAdjustment {
    text-align: left !important;
    width: 26% !important;
}

.likelytext.rtlAdjustment {
    text-align: right !important;
}

.smileyparent-rtl {
    margin-left: 95px !important;
}

.rtl-unlikelysmiley {
    width: 30% !important;
}

.thankyoudivRTL {
    /*right: 50px !important;*/
    left: 584px !important;
}

.rtlpopupadjustment {
    text-align: right !important;
    padding: 10px 93px 30px 0px !important;
}




.logo-container {
    background-color: #0099cc;
    border-radius: 0;
    color: #fff;
    padding: 0px;
    position: relative;
    margin-bottom: 0 !important;
}

.bg-gradient {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,000000+100&0+0,0.3+100 */
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.3) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(0,0,0,0.3) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(0,0,0,0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#4d000000',GradientType=0 ); /* IE6-9 */
}

.bg-radial {
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); /* ff3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,0.2)), color-stop(100%, rgba(255,255,255,0))); /* safari4+,chrome */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); /* safari5.1+,chrome10+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); /* opera 11.10+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); /* ie10+ */
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* ie6-9 */
}

.bg-trans {
    display: flex;
    padding: 0 0 31px 0;
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); /* ff3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,0.2)), color-stop(100%, rgba(255,255,255,0))); /* safari4+,chrome */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); /* safari5.1+,chrome10+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); /* opera 11.10+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); /* ie10+ */
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* ie6-9 */
}

.bannercontent {
    padding: 20px 15px 20px 15px ;
}

.bg-trans-fixed {
}

.bg-trans-fixed-container.fixed .logo img {
    height: 60px;
}

@keyframes slide-down {

    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    100% {
        opacity: 0.9;
        transform: translateY(0);
    }
}

.bg-trans-fixed-container {
    position: fixed;
    z-index: 3;
    width: 100%;
    top: 0;
    height: 0px;
    display: none;
    -ms-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    transition-duration: 2s;
    transform: translateZ(0);
}

    .bg-trans-fixed-container.fixed {
        animation: slide-down 1s;
        opacity: 0.9;
        display: block;
        height: 88px;
        transition: none;
    }

.bg-trans-fixed .bannercontent {
    padding: 14px 40px;
}

.bannercontent.container {
    background-color: #000
}

.logo {
    text-align: left;
    float: left;
    width: 14%;
}

.jumbotron-heading {
    font-family: 'Source Sans Pro Extra Light';
    color: #fff;
    font-size: 30px;
    text-transform: uppercase;
    margin-bottom: 10px;
    line-height: 20px;

}
    .jumbotron-heading  .salutationspan{
        margin-right:5px;
    }
.youropinion {
    font-size: 48px;
    font-family: 'Source Sans Pro light';
    font-weight: normal;
    text-transform: uppercase;
    line-height: 40px;
    margin-bottom: 4px;
}

.bannertxt {
    padding: 0 25px 25px 35px;
    letter-spacing: 1px;
    float: left;
    width: 70%;
}

.bannercontent .lead {
    color: #c1c1c1;
    font-size: 12px;
    margin-bottom: 5px;
    margin-bottom: 5px;
    width: 50%;
    margin: 0 auto;
}

.subtitle {
    font-size: 20px;
    padding-bottom: 35px;
}

.survey_emotion {
    position: absolute;
    bottom: -60%;
    left: 40%
}

.container .datacolumn {
    margin: auto;
    padding-bottom: 20px;
    width: 65%;
}

.main .datacolumn {
    width: 90%;
}

    .main .datacolumn.prefixone {
        width: 67%;
    }

.smileyparent .questiondiv.leftalign {
    text-align: left;
}

.container.questions.main {
    padding-top: 100px !important;
    padding:0;
}

    .container.questions.main.leftalign {
        padding-top: 20px;
    }

.container.questions {
    background: #fff;
}

.container.questioncontainer {
    margin-bottom: 20px;
    background: #fff;
}

.otherquestions.container-fluid {
    width: 90%;
}

.final-btns {
    background: #fff;
    padding: 20px;
    margin-top: 10px;
}

.container.questioncontainer.question-final-btns.final-btns {
    padding: 0 !important;
    margin: 0;
}

.final-btns .btn-holder {
    clear: both;
}

    .final-btns .btn-holder .btn {
        margin-right: 10px;
        clear: both;
        border-radius: 20px;
        padding: 7px 20px;
        font-size: 14px;
        height: 40px;
    }

        .final-btns .btn-holder .btn:hover {
            box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
            -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
        }

.final-btns .btn-primary:hover, .final-btns .btn-outline-primary:hover, .final-btns .btn-primary:not(:disabled):not(.disabled).active, .final-btns .btn-primary:not(:disabled):not(.disabled):active, .final-btns.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #0099CC;
    border-color: #0099CC;
    box-shadow: none;
}

.btn-outline-primary {
    color: #0099CC;
    border-color: #0099CC;
}

.btn-primary {
    color: #fff;
    background-color: #0099CC;
    border-color: #0099CC;
}

.proceedQuestions.btn-outline-primary:hover {
    color: #fff;
    background-color: #0099CC;
    border-color: #0099CC;
}

.final-btns .btn-holder .btn:last-child {
    margin-right: 0px;
}

.box-shadow.btn-holder {
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.btn-holder button i {
    margin-right: 5px;
}

.feedbackcontainer {
    margin-bottom: 20px;
    text-align: center;
}

.container {
    background: #fff;
    padding: 0;
}

.otherquestions.container .row {
    padding: 20px 15px 0 15px;
}

.firstquestion {
    text-align: center;
}

ul.ques-options {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    text-align: center;
    width: 70%;
}

    ul.ques-options li {
        display: inline-block;
        padding: 0 10px;
    }

.firstsubquestion {
    text-align: left;
    padding-top: 0 !important;
}

    .firstsubquestion span {
        font-size: 16px;
        font-weight: bold;
        color: #333333;
    }

ul.ques-options li:first-child, ul.ques-options li:last-child {
    color: #666666
}

.quest img {
    display: block;
    margin-left: -17px;
}

.form-control.txt-area {
    padding: 10px;
    height: 60px;
    background: #fff;
    border: none;
    margin-top: 5px;
    border-radius: 3px;
    box-shadow: none;
    /*  background-color: rgba(0,153,204,0.05);*/
}

.tran-bg .form-control.txt-area {
    background-color: rgba(0,153,204,0.05);
    box-shadow: none;
}

.icon-bottom {
    margin-right: 5px;
    font-size: 14px;
}

p.questioninfo {
    text-align: center;
    margin-bottom: 0;
    padding: 49px 0 30px 0;
    margin: 0 auto;
}

.otherquestions .navbar {
    position: fixed;
    right: 0px;
    top: 30%;
    background-color: rgba(0,0,0,0.5);
    text-align: center;
    width: 50px;
    border-radius: 0;
    z-index: 9;
}

    .otherquestions .navbar li.nav-item {
        margin-bottom: 10px;
        margin-left: 6px;
    }

    .otherquestions .navbar .navbar-nav {
        display: block;
        width: 40px;
        padding: 10px 0;
        margin-left: 0;
    }

.otherquestions .navbar-dark .navbar-nav .active > .nav-link, .otherquestions .navbar-dark .navbar-nav .nav-link.active, .otherquestions .navbar-dark .navbar-nav .nav-link.show, .otherquestions .navbar-dark .navbar-nav .show > .nav-link {
    /* .otherquestions .navbar-dark .navbar-nav .active>.nav-link, .otherquestions .navbar-dark .navbar-nav .nav-link.show, .otherquestions .navbar-dark .navbar-nav .show>.nav-link { */
    color: red;
    background: #fff;
    border-radius: 40px;
}

.otherquestions .navbar-dark .navbar-nav .nav-link.visited {
    background: #0f0;
}

.otherquestions .navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
    color: white;
    width: 10px;
    height: 10px;
    background: #bfbfbf;
    border-radius: 40px;
    padding: 0;
}

.firstquestion.fftquestion form {
    padding: 20px 40px;
}

/* Animation */

.style_prevu_kit {
    display: inline-block;
    border: 0;
    width: 100%;
    height: auto;
    position: relative;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1);
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);
}

    .style_prevu_kit:hover {
        -webkit-box-shadow: 0px 0px 50px #ccc;
        -moz-box-shadow: 0px 0px 50px #ccc;
        box-shadow: 0px 0px 50px #ccc;
        z-index: 2;
        -webkit-transition: all 250ms ease-in;
        -webkit-transform: scale(1.02);
        -ms-transition: all 250ms ease-in;
        -ms-transform: scale(1.02);
        -moz-transition: all 250ms ease-in;
        -moz-transform: scale(1.02);
        transition: all 250ms ease-in;
        transform: scale(1.02);
        margin-left: 0px;
    }

        .style_prevu_kit:hover img {
        }

#section1, #section2, #section3, #section4, #section5 {
    /* box-shadow: 0px 0px 2px #ccc;*/
    border: 1px solid #efefef;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

#section1 {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Footer */

footer.text-muted {
    background-color: #000000;
    height: 45px;
    text-align: center;
    line-height: 35px;
    z-index: 8;
}

    footer.text-muted p {
        margin-bottom: 0px;
        padding-right: 15px;
    }

        footer.text-muted p a {
            font-family: 'Source Sans Pro Bold';
        }

    footer.text-muted a {
        color: #0099CC;
    }

footer .container {
    line-height: 40px;
    max-width: 100%;
}

    footer .container p {
        display: inline-block;
    }

    footer .container .yrtxt {
        float: right;
        padding-right: 15px;
    }

.carousel-inner, .carousel, .item, .container, .fill {
    /*    height:100%; */
    background-color: transparent;
    background-position: center center;
    background-size: cover;
}

.slide-wrapper {
    display: inline;
}

    .slide-wrapper .container {
        padding: 0px;
    }



button {
    font-size: 13px;
}



.box-shadow.btn-holder button {
    border-radius: 20px;
    padding: 7px 20px;
}



    .box-shadow.btn-holder button:hover {
        background-color: #e7e7e7;
        border: 1px solid rgba(133, 133, 133, 0.4);
        color: rgb(0, 122, 195);
    }

    .box-shadow.btn-holder button:active {
        background-color: #e7e7e7 !important;
        color: rgb(0, 122, 195) !important;
    }



#questions .logo-container {
    padding: 0;
    background-color: #0099cc;
}

#questions {
    margin-bottom: 45px;
}

    #questions footer.text-muted {
        bottom: 0;
        position: fixed;
        width: 100%;
    }

    #questions .slide-wrapper {
        display: block;
        height: 400px;
    }



html {
    scroll-behavior: smooth;
}



#questions .sections .addquestionscontainer > .container {
    padding: 40px 20px;
}

#questions .navbar .navbar-nav .activeCount {
    margin-left: -14px;
    margin-right: -15px;
    font-size: 10px;
    color: #fff;
    line-height: 11px;
}

.container.questioncontainer.final-btns {
    background: #f6f6f6;
    text-align: center;
}

.final-btns .btn-holder {
    text-align: center;
    padding-bottom: 0px;
}

/* newly added */

.hide {
    display: none !important
}

.show {
    display: block
}

.imgdiv {
    width: 40px;
    height: 40px
}
/* .smileydiv{
    padding-left: 0 !important;
    padding-right: 0 !important;
} */
.smileydiv div {
    display: inline-block;
    margin-bottom: -20px;
}

.smileydiv img {
    display: inline-block;
    vertical-align: inherit;
}

.smileytextdiv {
    width: 76%;
    /*  height: 40px;*/
    margin: auto;
    padding: 0;
    font-size: 11px;
    color: #666666;
    line-height: 13px;
}

.smileyimg {
    font-size: 2.4em !important;
    vertical-align: top;
}

.smileytextdiv div {
    display: inline-block;
    width: 48%;
    margin: 0;
    padding: 0;
    font-size: 11px;
    color: #666666;
    vertical-align: text-top;
}

.npsmain {
    background: #f2fafc;
    padding: 10px;
    margin: 10px 46px 20px 46px;
    font-size: 16px;
    font-weight: bold;
}

    .npsmain #querytextarea {
        height: 120px;
    }

.smileytextdiv div.unlikelytext {
    text-align: left;
}

.smileytextdiv.leftalign div.unlikelytext {
    margin-left: -10px;
}

.smileytextdiv div.likelytext {
    text-align: right;
}

.npssubquestion {
    padding-top: 20px;
}

.radioform .inline {
    display: inline-block;
    margin-right: 10px;
}

.radioform img {
    margin-right: 10px;
}

.radioform input, .radioform label {
    cursor: pointer;
}

.firstquestion.soquestion .radioform {
    text-align: left;
    margin: 0 auto;
    padding-bottom: 10px;
}
.firstquestion.solpquestion .radioform {
    text-align: left;
    margin: 0 auto;
    padding-bottom: 10px;
}

.firstquestion {
    border: 1px solid #efefef;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

    .firstquestion.leftalign {
        border-radius: 8px;
    }

.addquestionscontainer .soquestion .radioform {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.addquestionscontainer .solpquestion .radioform {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.msquestiondiv .infotitle {
    padding-bottom: 10px;
}

.msquestiondiv .starDiv {
    display: inline-block;
}

.msquestion .infotitle {
    padding-bottom: 10px;
}

.padding-left {
    padding: 0 10px;
}

.padding-right {
    padding-left: 15px;
}
/* Rating Star Widgets Style */

.rating-stars ul {
    list-style-type: none;
    padding: 0;
    -moz-user-select: none;
    -webkit-user-select: none;
}

    .rating-stars ul > li.star {
        display: inline-block;
    }

        .rating-stars ul > li.star > i.fa {
            font-size: 2.3em; /* Change the size of the stars */
            color: #ccc; /* Color on idle state */
            cursor: pointer;
        }

        .rating-stars ul > li.star .mainstar .fa-star.red {
            color: #F9595A;
        }

        .rating-stars ul > li.star .mainstar .fa-star.orange {
            color: #ff8347;
        }

        .rating-stars ul > li.star .mainstar .fa-star.green {
            color: #6ac44d;
        }
/* star row*/
.number {
    position: absolute;
    text-align: center;
    left: 42%;
    top: 20%;
    color: #fff;
    font-family: 'Source Sans Semi Bold';
    font-size: 13px;
}
.number-data {
    text-align: center;
    left: 21%;
    top: 100%;
    color: #fff;
    font-family: 'Source Sans Pro Regular';
    font-size: 13px;
    color: black;
}

.default.number {
    color: #000;
}

.rating-stars ul > li.star:last-child .number {
    left: 34%;
}

.mainstar {
    position: relative;
    cursor: pointer;
    padding: 0 4px;
}
.solp-padding {
    padding-bottom: 15px !important;
}
mainstar-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* Hover state of the stars */
/* .rating-stars ul > li.star.hover > i.fa {

    color:#FFCC36;

  } 

  /* Selected state of the stars */
/*  .rating-stars ul > li.star.selected > i.fa {

    color:#69bf52;

  } */
.rating-stars i.fa span {
    font-size: 13px;
    line-height: 36px;
}

.rating-stars i.fa-star-o span {
    color: #000;
    font-family: 'Source Sans Pro Bold';
}

.rating-stars i.fa-star span {
    color: #fff;
    font-family: 'Source Sans Pro Bold';
}

.smileyimg.grey {
    color: #afaeae;
}

.smileyimg.red {
    color: #F9595A;
}

.smileyimg.green {
    color: #6ac44d;
}

.smileyimg.orange {
    color: #ff8347;
}

.rating-stars .detractors .starinner {
    color: #F9595A !important;
}

.rating-stars .neutral .starinner {
    color: #ff8347 !important;
}

.rating-stars .promoter .starinner {
    color: #6ac44d !important;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 10;
    opacity: 0.5;
}

.overlayinfo {
    z-index: 11;
    width: 425px;
    min-height: 200px;
    background-color: #fff;
    position: absolute;
    top: 200px;
    left: 250px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);
    text-align: center;
    border-radius: 5px;
    padding: 10px;
}

    .overlayinfo .titlediv {
        font-weight: bold;
        padding: 20px;
        text-align: center;
    }

    .overlayinfo .msgdiv {
        text-align: center;
        font-size: 14px;
        padding: 10px 10px 0 10px;
    }

    .overlayinfo .buttondiv {
        text-align: center;
        padding: 20px;
    }

    .overlayinfo .resetpopup #overlaynobutton {
        float: right;
        margin-right: 50px;
    }

    .overlayinfo .resetpopup #overlayokbutton {
        float: left;
        margin-left: 50px;
    }

    .overlayinfo .buttondiv .btn-primary {
        background-color: #0099CC;
        border-color: #0099CC;
        width: 30%;
        border-radius: 20px;
    }

.infobox {
    text-align: center;
}

    .infobox .msgdiv {
        padding: 20px;
    }

/* Radio scale for ss type */
main .firstquestion .wrap {
    display: block;
}

.wrap {
    display: table-cell;
    vertical-align: middle;
}

    .wrap .RadioBtnsWrap {
        display: inline-block;
        position: relative;
    }

        .wrap .RadioBtnsWrap label {
            display: inline-block;
            position: relative;
            text-align: left;
            height: 40px;
            line-height: 40px;
            min-width: 50px;
            font-size: 16px;
        }

.smileyparent {
    margin: 0 auto;
}

.smileydiv i.smileyimg {
    font-size: 2.5em;
}

    .smileydiv i.smileyimg:first-child {
        /*   float: left;
        text-align: left; */
        margin: -5px 0 0 0;
    }

    .smileydiv i.smileyimg:last-child {
        /*   float: right;
        text-align: right; */
        margin: -5px 0 0 0;
    }

.datacolumn .titlediv {
    color: #333333;
    padding-bottom: 20px;
}

.question-div {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.slop-question-div {
 max-width:58% !important;
}
.form-slop-padding {
    padding-left: 3.25rem !important;
}

.smileyparent .questiondiv {
    padding: 0 0 20px 0;
    /*   text-align: left; */
}

.smileyparent .smileydiv {
    margin: auto;
    padding: 0;
}

/*    @media (min-width: 992px){
        .smileyparent .smileydiv{
            width: 80%;
        }
    } */
.sections .container {
    padding: 20px 0 0 0;
    border-radius: 8px;
}

.nav-item .text {
    font-size: 9px;
}

    .nav-item .text span {
        font-size: 18px;
    }

.uparrowdiv {
    background-color: #5a5a5a;
    width: 42px;
    height: 42px;
    float: right;
    margin-right: 24px;
    margin-bottom: 20px;
    line-height: 42px;
    position: absolute;
    right: 0;
    bottom: 0px;
    border-radius: 3px;
    color: #fff;
}

    .uparrowdiv i {
        color: white;
        font-size: 24px;
    }

.numbercolumn {
    font-family: 'Source Sans Pro Black';
    font-size: 66px;
    opacity: 0.3;
    position: absolute;
    margin-left: 70px;
    margin-top: -35px;
}

.overlayinfo .buttondiv .btn-primary.yesbtn {
    margin-right: 20px;
}

.gridquestion .row {
    background-image: url('../images/q2.png');
    background-position: 3% 100%;
    background-repeat: no-repeat;
}

.fftquestion .row {
    background-image: url('../images/q3.png');
    background-position: 1.5% 100%;
    background-repeat: no-repeat;
}

.gridquestion, .fftquestion {
    padding-left: 0 !important;
    padding-bottom: 0 !important;
}

.matrix-question-phone {
    display: none;
}

.matrix-quesiton-desktop {
    display: block;
}

.submitpopup {
    z-index: 11;
    width: 1008.5px;
    min-height: 200px;
    background-color: #fff;
    position: absolute;
    top: 200px;
    left: 0px !important;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);
    text-align: center;
    border-radius: 10px;
    padding: 0;
    font-family: 'Source Sans Pro Bold';
    right: 0;
    margin: 0 auto;
}


    .submitpopup .infodiv {
        padding: 10px 10px 30px 90px;
        font-family: 'Source Sans Pro light';
        text-align: left;
    }

        .submitpopup .infodiv .titlediv {
            font-size: 36px;
        }

        .submitpopup .infodiv .msgdiv {
            font-size: 24px;
        }

        .submitpopup .infodiv .closemsgdiv {
            font-size: 14px;
        }

    .submitpopup .thankyoudiv {
        position: absolute;
        top: 23%;
        font-size: 72px;
        color: #fff;
        left: 210px;
    }


.firstsubquestion span {
    padding: 0;
}

.wrap .RadioBtnsWrap label:not(:nth-of-type(1)) {
    margin-top: 17px;
}

.wrap .Radio {
    -webkit-appearance: none;
    height: 0;
    width: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    outline: 0;
    border: none;
}

.wrap .RadioBtnsWrap label::after {
    content: 'x';
    color: transparent;
    position: absolute;
    left: 0px;
    top: -36px;
    bottom: 0;
    margin: auto;
    width: 10px;
    height: 10px;
    background-color: #FFFFFF;
    display: inline-block;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-color: #ddd;
    border-style: solid;
    border-width: 8px;
    transition: background-color 0.6s, border-width 0.4s, width 0.6s, height 0.6s, left 0.6s;
    -webkit-transition: background-color 0.6s, border-width 0.4s, width 0.6s, height 0.6s, left 0.6s;
    -webkit-box-shadow: 0px 2px 3px -1px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 2px 3px -1px rgba(0, 0, 0, 0.75);
}

.wrap .Radio:checked + label::after {
    /*    background-color: #c5416e; */
    width: 20px;
    height: 20px;
    border-width: 6px;
    -webkit-box-shadow: 0px 2px 3px -1px rgba(0, 0, 0, 0.75), inset 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 2px 3px -1px rgba(0, 0, 0, 0.75), inset 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}

/*  .wrap .RadioBtnsWrap label::before { */

.wrap .RadioBtnsWrap label:not(:nth-of-type(11))::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 1px;
    height: 4px;
    width: 70%;
    display: inline-block;
    background-color: #ddd;
    /*    -webkit-box-shadow: 1px 4px 2px 1px rgba(0, 0, 0, 0.25);

        box-shadow: 1px 4px 2px 1px rgba(0, 0, 0, 0.25); */
}

.wrap .RadioBtnsWrap label.green:not(:nth-of-type(11))::before {
    background-color: #6ac44d;
}

.wrap .RadioBtnsWrap label.green::after {
    border-color: #6ac44d;
}

.wrap .RadioBtnsWrap label.orange:not(:nth-of-type(11))::before {
    background-color: #ff8347;
}

.wrap .RadioBtnsWrap label.orange::after {
    border-color: #ff8347;
}

.wrap .RadioBtnsWrap label.red:not(:nth-of-type(11))::before {
    background-color: #F9595A;
}

.wrap .RadioBtnsWrap label.red::after {
    border-color: #F9595A;
}

.wrap .RadioBtnsWrap label::before {
    bottom: 28px;
}

/*

      .wrap .Radio:checked + label + input + label::before {

        height: 52px;

        transition: height .0s linear .3s;

        -webkit-transition: height .0s linear .3s;

      } */

.wrap .Radio.red:checked + label::after {
    border-color: #F9595A;
    -webkit-box-shadow: 0px 2px 3px -1px #F9595A, inset 0px 0px 5px 1px #F9595A;
    box-shadow: 0px 2px 3px -1px #F9595A, inset 0px 0px 5px 1px #F9595A;
}

.wrap .Radio.green:checked + label::after {
    border-color: #6ac44d;
    -webkit-box-shadow: 0px 2px 3px -1px #6ac44d, inset 0px 0px 5px 1px #6ac44d;
    box-shadow: 0px 2px 3px -1px #6ac44d, inset 0px 0px 5px 1px #6ac44d;
}

.wrap .Radio.orange:checked + label::after {
    border-color: #ff8347;
    -webkit-box-shadow: 0px 2px 3px -1px #ff8347, inset 0px 0px 5px 1px #ff8347;
    box-shadow: 0px 2px 3px -1px #ff8347, inset 0px 0px 5px 1px #ff8347;
}

.grid_container table {
    border-collapse: collapse;
    width: 100%;
    color: #333333;
}

.grid_container td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

.grid_container tr.colordiv {
    background-color: rgba(0,153,204,0.1);
}

.grid_container table, .grid_container th, .grid_container td, .grid_container tr {
    border: 0;
}

    .grid_container table tr th {
        background-color: #0099cc;
        color: #fff;
        width: 15%;
        text-align: center;
        font-size: 14px;
        line-height: 16px;
        font-weight: normal;
    }

    .grid_container table tr td {
        text-align: center;
        font-size: 14px;
    }

        .grid_container table tr td:nth-child(1) {
            text-align: left;
        }

    .grid_container table tr th:nth-child(1) {
        width: 40%;
        border-radius: 5px 0 0px 6px;
    }

    .grid_container table tr th:nth-child(5) {
        border-radius: 0px 5px 5px 0px;
    }

.arrow-up {
    border: 1px solid rgba(219,219,219,0.5);
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 7px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    margin-left: 534px;
    background-color: rgba(0,153,204,-0.975);
    margin-bottom: -2px;
}

.grid_container .tabletextarea {
    margin: -22px 0 0 0;
    border: 1px solid rgba(219,219,219,0.5);
    height: 58px;
    /*  overflow: hidden; */
    border-radius: 3px;
    background-color: #fff;
}

.textdiv td {
    padding: 8px 0;
}

.firstquestion .grid_container {
    padding: 0 40px 30px 40px;
}

.grid_container input[type=radio] {
    position: absolute;
    visibility: hidden;
}

.grid_container label {
    display: block;
    position: relative;
    font-weight: 300;
    font-size: 1.35em;
    padding: 25px 25px 25px 80px;
    margin: 10px auto;
    height: 30px;
    z-index: 9;
    cursor: pointer;
}

.grid_container tr td:hover label {
    color: #FFFFFF;
}

.grid_container tr td .check {
    display: block;
    position: absolute;
    border: 1px solid #AAAAAA;
    border-radius: 100%;
    height: 14px;
    width: 14px;
    z-index: 5;
    position: relative;
    padding: 0;
}

.grid_container input[type=radio]:checked ~ .check .gridspan {
    display: block;
    position: absolute;
    content: '';
    border-radius: 100%;
    height: 6px;
    width: 6px;
    top: 2.4px;
    left: 2px;
    margin: auto;
    transition: background 0.25s linear;
    -webkit-transition: background 0.25s linear;
    background-color: #AAA;
}

.grid_container input[type=radio]:checked ~ .check {
    border: 2px solid #AAA;
}

.grid_container .textareadiv {
    --c: rgba(0,153,204,0.05) transparent;
}

    .grid_container .textareadiv:after {
        content: "";
        position: relative;
        /* margin-top: 50px; */
        top: -67px;
        border-style: solid;
        border-width: 10px 10px 0;
        border-color: fff;
        display: none;
        width: 0;
        z-index: 1;
        transform: rotate(-135deg);
        -webkit-transform: rotate(-180deg);
    }

    .grid_container .textareadiv:before {
        content: "";
        position: relative;
        top: -21px;
        left: 531px;
        border-style: solid;
        border-width: 10px 10px 0;
        border-color: #fff transparent;
        display: block;
        width: 0;
        z-index: 0;
        transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg);
    }

    .grid_container .textareadiv.third:before, .grid_container .textareadiv.third:after {
        left: 534px;
    }

    .grid_container .textareadiv.second:after, .grid_container .textareadiv.second:before {
        left: 428px;
    }

::placeholder {
    font-size: 14px;
    color: #333333;
    opacity: 0.5; /* Firefox */
}

.gridquestion .solayout .outerdiv {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}
.mcqquestion [type="checkbox"]:checked, .mcqquestion [type="checkbox"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
    .mcqquestion [type="checkbox"]:checked + label, .mcqquestion [type="checkbox"]:not(:checked) + label {
        position: relative;
        padding-left: 28px;
        cursor: pointer;
        line-height: 10px;
        display: inline-block;
        color: #666;
    }
.accordian .mcqquestion [type="checkbox"]:checked + label .griddadiospan, .accordian .mcqquestion [type="checkbox"]:not(:checked) + label .griddadiospan {
    margin-top: 5px;
}
.accordian .mcqquestion [type="checkbox"]:checked + label .griddadiospanafter, .accordian .mcqquestion [type="checkbox"]:not(:checked) + label .griddadiospanafter {
    margin-top: 5px;
}
.accordian .mcqquestion [type="checkbox"]:checked + label, .accordian .mcqquestion [type="checkbox"]:not(:checked) + label {
    margin-bottom: 10px;
    line-height: 20px;
}
.accordian .soquestion [type="radio"]:checked + label, .accordian .soquestion [type="radio"]:not(:checked) + label,
.accordian .solayout [type="radio"]:checked + label, .accordian .solayout [type="radio"]:not(:checked) + label {
    line-height: 20px;
}
    .accordian .soquestion [type="radio"]:checked + label .griddadiospan, .accordian .soquestion [type="radio"]:not(:checked) + label .griddadiospan,
    .accordian .solayout [type="radio"]:checked + label .griddadiospan, .accordian .solayout [type="radio"]:not(:checked) + label .griddadiospan{
        margin-top: 5px;
    }
    .accordian .soquestion [type="radio"]:checked + label .griddadiospanafter, .accordian .soquestion [type="radio"]:not(:checked) + label .griddadiospanafter,
    .accordian .solayout [type="radio"]:checked + label .griddadiospanafter, .accordian .solayout [type="radio"]:not(:checked) + label .griddadiospanafter{
        margin-top: 5px;
    }

.accordian .solpquestion [type="radio"]:checked + label, .accordian .solpquestion [type="radio"]:not(:checked) + label,
.accordian .solayout [type="radio"]:checked + label, .accordian .solayout [type="radio"]:not(:checked) + label {
    line-height: 20px;
}

    .accordian .solpquestion [type="radio"]:checked + label .griddadiospan, .accordian .solpquestion [type="radio"]:not(:checked) + label .griddadiospan,
    .accordian .solayout [type="radio"]:checked + label .griddadiospan, .accordian .solayout [type="radio"]:not(:checked) + label .griddadiospan {
        margin-top: 5px;
    }

    .accordian .solpquestion [type="radio"]:checked + label .griddadiospanafter, .accordian .solpquestion [type="radio"]:not(:checked) + label .griddadiospanafter,
    .accordian .solayout [type="radio"]:checked + label .griddadiospanafter, .accordian .solayout [type="radio"]:not(:checked) + label .griddadiospanafter {
        margin-top: 5px;
    }
.mcqquestion [type="checkbox"]:checked + label .griddadiospan, .mcqquestion [type="checkbox"]:not(:checked) + label .griddadiospan {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 14px;
    width: 14px;
    border: 1px solid;
    border-color: #AAA;
    background: #fff;
    border-radius: 3px;
}

.mcqquestion [type="checkbox"]:checked + label .griddadiospanafter, .mcqquestion [type="checkbox"]:not(:checked) + label .griddadiospanafter {
    content: '';
    position: absolute;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    height: 6px;
    width: 6px;
    top: 4px;
    left: 4px;
    border-radius: 1px;
}

.mcqquestion [type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.soquestion [type="radio"]:checked, .soquestion [type="radio"]:not(:checked),
.solayout [type="radio"]:checked, .solayout [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

    .soquestion [type="radio"]:checked + label, .soquestion [type="radio"]:not(:checked) + label,
    .solayout [type="radio"]:checked + label, .solayout [type="radio"]:not(:checked) + label {
        position: relative;
        padding-left: 28px;
        cursor: pointer;
        line-height: 10px;
        display: inline-block;
        color: #666;
    }

        .soquestion [type="radio"]:checked + label .griddadiospan, .soquestion [type="radio"]:not(:checked) + label .griddadiospan,
        .solayout [type="radio"]:checked + label .griddadiospan, .solayout [type="radio"]:not(:checked) + label .griddadiospan {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 14px;
            width: 14px;
            border: 1px solid;
            border-color: #AAA;
            border-radius: 100%;
            background: #fff;
        }

        .soquestion [type="radio"]:checked + label .griddadiospanafter, .soquestion [type="radio"]:not(:checked) + label .griddadiospanafter,
        .solayout [type="radio"]:checked + label .griddadiospanafter, .solayout [type="radio"]:not(:checked) + label .griddadiospanafter {
            content: '';
            position: absolute;
            border-radius: 100%;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
            height: 6px;
            width: 6px;
            top: 4px;
            left: 4px;
        }

        .soquestion [type="radio"]:not(:checked) + label:after,
        .solayout [type="radio"]:not(:checked) + label:after {
            opacity: 0;
            -webkit-transform: scale(0);
            transform: scale(0);
        }

        .soquestion [type="radio"]:checked + label:after
        .solayout [type="radio"]:checked + label:after {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
        }



.solpquestion [type="radio"]:checked, .solpquestion [type="radio"]:not(:checked),
.solayout [type="radio"]:checked, .solayout [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

    .solpquestion [type="radio"]:checked + label, .solpquestion [type="radio"]:not(:checked) + label,
    .solayout [type="radio"]:checked + label, .solayout [type="radio"]:not(:checked) + label {
        position: relative;
        padding-left: 28px;
        cursor: pointer;
        line-height: 10px;
        display: inline-block;
        color: #666;
    }

        .solpquestion [type="radio"]:checked + label .griddadiospan, .solpquestion [type="radio"]:not(:checked) + label .griddadiospan,
        .solayout [type="radio"]:checked + label .griddadiospan, .solayout [type="radio"]:not(:checked) + label .griddadiospan {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 14px;
            width: 14px;
            border: 1px solid;
            border-color: #AAA;
            border-radius: 100%;
            background: #fff;
        }

        .solpquestion [type="radio"]:checked + label .griddadiospanafter, .solpquestion [type="radio"]:not(:checked) + label .griddadiospanafter,
        .solayout [type="radio"]:checked + label .griddadiospanafter, .solayout [type="radio"]:not(:checked) + label .griddadiospanafter {
            content: '';
            position: absolute;
            border-radius: 100%;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
            height: 6px;
            width: 6px;
            top: 4px;
            left: 4px;
        }

        .solpquestion [type="radio"]:not(:checked) + label:after,
        .solayout [type="radio"]:not(:checked) + label:after {
            opacity: 0;
            -webkit-transform: scale(0);
            transform: scale(0);
        }

        .solpquestion [type="radio"]:checked + label:after
        .solayout [type="radio"]:checked + label:after {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
        }

.hiddenstarinner {
    display: none;
}

.btn-outline-primary:disabled {
    background-color: transparent !important;
}

.queryquestion {
    background-color: white;
    padding: 100px 10px 10px 10px;
    border: 1px solid #efefef;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.clear {
    clear: both;
}

.expiryinfo {
    z-index: 11;
    position: absolute;
    top: 360px;
    left: 250px;
    text-align: center;
}

    .expiryinfo .borderdiv {
        z-index: 11;
        width: 425px;
        background-color: #fff;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);
        text-align: center;
        border-radius: 5px;
    }

    .expiryinfo svg {
        position: absolute;
        top: -90px;
        left: 130px;
    }

    .expiryinfo .errorMsg {
        padding-top: 60px;
        font-size: 16px;
        font-family: Source Sans Semi Bold;
        color: #333333;
    }

    .expiryinfo .closeMsg {
        font-family: 'Source Sans Pro Regular';
        color: #b2b2b2;
        font-size: 11px;
        padding-bottom: 30px;
    }


.textboxform .form-control.txt-area, .npssubquestion .form-control.txt-area {
    /*   max-height: 80px; */
    min-height: 80px;
}

.form-control.txt-area.GRID_PLACEHOLDER {
    /*   max-height: 58px; */
    min-height: 58px;
}

.npsmain .form-control.txt-area {
    /*   max-height: 133px; */
    min-height: 133px;
}

.npsmain .DETRACTOR_QUESTION {
    padding-left: 10px;
    display: block;
}

.confirmpopup {
    z-index: 11;
    width: 425px;
    min-height: 200px;
    background-color: #fff;
    position: absolute;
    top: 200px;
    left: 250px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);
    text-align: center;
    border-radius: 10px;
    padding: 10px;
}

    .confirmpopup .titlediv {
        font-weight: bold;
        padding: 20px;
        text-align: center;
    }

    .confirmpopup .confirmmsgdiv {
        text-align: center;
        font-size: 14px;
        padding: 40px 10px 0 10px;
    }

    .confirmpopup .confirmbuttondiv {
        text-align: center;
        padding: 20px;
    }

        .confirmpopup .confirmbuttondiv #confirmnobutton {
            float: left;
            margin-left: 65px;
        }

        .confirmpopup .confirmbuttondiv #confirmokbutton {
            float: right;
            margin-right: 65px;
        }

        .confirmpopup .confirmbuttondiv .btn-primary {
            width: 30%;
            border-radius: 20px;
        }

    .confirmpopup .confirmpopupcloseMsg {
        font-family: 'Source Sans Pro Regular';
        color: #b2b2b2;
        font-size: 11px;
        padding-top: 20px;
    }

.closepagepopup {
    z-index: 11;
    width: 500px;
    min-height: 150px;
    background-color: #fff;
    position: absolute;
    top: 200px;
    left: 250px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);
    text-align: center;
    border-radius: 10px;
    padding: 0;
}

    .closepagepopup .closepageheader {
        background-color: rgb(0, 153, 204);
        color: #fff;
        padding: 35px;
        border-radius: 10px 10px 0 0;
        background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); /* ff3.6+ */
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,0.2)), color-stop(100%, rgba(255,255,255,0))); /* safari4+,chrome */
        background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); /* safari5.1+,chrome10+ */
        background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); /* opera 11.10+ */
        background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); /* ie10+ */
        background: radial-gradient(ellipse at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); /* w3c */
    }

    .closepagepopup .closepagemsg {
        font-family: 'Source Sans Pro Regular';
        color: #b2b2b2;
        font-size: 11px;
        padding: 25px;
    }

.confirmbuttondiv .btn:hover {
    box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
}

/*conditional */
main .firstquestion .nologic_question .datacolumn {
    text-align: center
}

.accordian {
    /* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
     -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); */
    /* border: 1px solid #efefef; */
    background-color: #fff;
    /* border-radius: 8px; */
}

main .firstquestion .npsfirstaccordian {
    border-top: none;
}

.accordiancontianer .numbercolumn {
    display: none;
}

.accordian .datacolumn {
    margin: auto;
    padding-bottom: 50px;
    width: 65%;
}

.card-header.card-link {
    background: #fff;
    border: none;
}

.card {
    /* border-radius: 8px 0 8px 0; */
    background-color: #fff;
    border: 0;
    text-align: left;
    /* border-radius: 0px; */
    margin-top: -1px;
    border-radius: 5px 5px 0 0 !important;
}

.card-header.card-link {
    box-shadow: 0px -2px 2px #ddd;
}

    .card-header.card-link.collapsed {
        background: #f7f7f7;
        box-shadow: 0px -2px 2px #ddd;
        cursor: pointer;
        margin-top: 1px;
    }

div.accordian {
    padding-top: 0px !important;
}

.card .card-header a.card-link {
    opacity: 0.5;
    display: inline-block;
    /* position: absolute; */
    font-size: 20px;
    margin-top: -14px;
}

.card .card-header .card-subheader {
    left: 204px;
    font-size: 14px;
    opacity: 0.5;
    font-weight: 700;
    display: inline-block;
    max-width: 615px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    line-height: 24px;
}

.card .card-header .card-selecteddiv.hide {
    display: none !important;
}

.card .card-header .card-selecteddiv {
    font-size: 12px;
    opacity: 0.4;
    font-weight: 700;
    display: inline-block;
    float: right;
    max-width: 180px;
    /* width: 180px; */
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background-color: rgba(0,0,0,0.2);
    padding: 0 8px;
    border-radius: 3px;
    height: 24px;
    line-height: 24px;
    color: rgba(0,0,0,0.7);
}

.card-body {
    /* padding: 1.25rem 0; */
    padding: 0 !important
}

.card.nologic_question .card-body {
    padding-top: 1.25rem !important;
}

.soquestion .textboxOuter {
    padding-top: 10px;
}

.solpquestion .textboxOuter {
    padding-top: 10px;
}

.conditionalquestions .container {
    padding: 0 !important;
}

.conditionalquestions .nologiccontainer.container {
    padding: 40px 0px !important;
}

.conditionalquestions .questioncontainer {
    box-shadow: 0px 0px 2px #ccc;
    border: 1px solid #efefef;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

.conditionalquestions .style_prevu_kit:hover, .npsfirstaccordian .style_prevu_kit:hover {
    /* -webkit-box-shadow: 0px 0px 50px #ccc;
        -moz-box-shadow: 0px 0px 50px #ccc;
        box-shadow: 0px 0px 50px #ccc; */
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    z-index: 0;
    -webkit-transition: none;
    -webkit-transform: none;
    -ms-transition: none;
    -ms-transform: none;
    -moz-transition: none;
    -moz-transform: none;
    transition: none;
    transform: none;
    margin-left: 0px;
}


/* Tooltip text */
.card-selecteddiv .tooltiptext {
    visibility: hidden;
    width: auto;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 5;
    bottom: 100%;
    left: 80%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltiptext.showtooltip {
    visibility: visible;
    opacity: 1;
}

.card-selecteddiv .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

#section1.card, #section2.card, #section3.card, #section4.card, #section5.card {
    box-shadow: none;
    border: none;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: none;
    /* -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); */
    -moz-box-shadow: none;
}

#section1.nologic_question, #section2.nologic_question, #section3.nologic_question, #section4.nologic_question, #section5.nologic_question {
    box-shadow: 0px 0px 2px #ccc;
    border: 1px solid #efefef;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    /* -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); */
    -moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

.card .cardparent.parentshown {
    /*  webkit-box-shadow: -1px -1px 19px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: -1px -1px 19px 0px rgba(0,0,0,0.75);
    box-shadow: -1px -1px 6px -2px rgba(0,0,0,0.45);*/
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    position: relative;
    z-index: 5;
}

.parentshown .card-header.card-link {
    border-radius: 5px;
}

.parentshown .accordiancontianer.container.questions {
    border-radius: 0 0 5px 5px;
}

.nologic_question .numbercolumn {
    margin-left: 30px;
}

.questioncontainer .collapsing {
    margin-bottom: -5px !important;
}

.textboxOuter textarea {
    min-height: 80px;
}
/*conditional */

/*Added by Thinkpalm on 17 Aug 2021 as part of Ticket 84 */
.fft-child-row {
    padding: 0px;
    width: 100%
}

.grid_container .textareadiv.second:after, .grid_container .textareadiv.first:before {
    left: 324px;
}

.grid_container .textareadiv.second:after, .grid_container .textareadiv.fourth:before {
    left: 635px;
}


@media only screen and (min-width : 1900px) {
    .survey_emotion {
        left: 43% !important;
    }

    .submitpopup > span > svg {
        height: auto;
        width: 100%;
    }
}

@media only screen and (min-width : 1024px) and (max-width : 1284px) {
    .submitpopup > span > svg {
        height: auto;
        width: 100%;
    }

    .container .datacolumn {
        width: 65%;
    }
    /*   .smileyparent .smileydiv {
            width: 80%;
        }  */
    .numbercolumn {
        margin-left: 70px;
    }

    .smileytextdiv {
        width: 73%;
    }

    .rating-stars ul > li.star > i.fa {
        font-size: 2.3em;
    }

    .smileytextdiv div {
        width: 50%;
    }
}

@media only screen and (min-width : 540px) and (max-width : 768px) {

    /* Styles */
    .container .datacolumn, .container .datacolumn.prefixone {
        width: 90%;
    }

    .submitpopup > span > svg {
        height: auto;
        width: 100%;
    }

    .numbercolumn {
        margin-left: 15px;
    }

    .rating-stars ul > li.star > i.fa {
        font-size: 1.8em;
    }

    .rating-stars i.fa span {
        line-height: 34px;
    }

    .fa-3x.smileyimg {
        font-size: 2em;
    }

    .survey_emotion {
        width: 200px;
        bottom: -100px;
    }

    .smileytextdiv .unlikelytext {
        right: 30%;
    }

    .smileytextdiv .likelytext {
        left: 30%
    }

    .wrap .RadioBtnsWrap label {
        min-width: 37px;
    }
}

@media only screen and (min-width: 425px) and (max-width: 540px) {

    /* For mobile phones: */
    .bannertxt {
        width: 100%;
    }

    .submitpopup > span > svg {
        height: auto;
        width: 100%;
    }

    .wrap .RadioBtnsWrap label {
        min-width: 29px;
    }

    .rating-stars i.fa span {
        font-size: 6px;
        line-height: 24px;
    }

    .rating-stars ul > li.star > i.fa {
        font-size: 1.5em;
    }

    .fa-3x.smileyimg {
        font-size: 1.5em;
    }

    .survey_emotion {
        width: 200px;
        top: auto;
    }

    .questioncontainer {
        padding: 100px 10px 10px 10px;
    }

        .questioncontainer .btn-holder {
            margin: 0 10px;
        }

    .submitpopup .thankyoudiv {
        top: 32px;
        font-size: 25px;
        left: 70px;
    }

    .submitpopup {
        width: 95%;
        margin: 0 auto;
        left: 0 !important;
        right: 0 !important;
    }

        .submitpopup .infodiv {
            padding-left: 30px;
        }
}

@media only screen and (min-width : 320px) and (max-width : 425px) {
    .smileydiv i.smileyimg:first-child {
        margin: 2px 0 0 0px;
    }

    .wrap .RadioBtnsWrap label {
        min-width: 22px;
    }

    .submitpopup > span > svg {
        height: auto;
        width: 100%;
    }
}

@media only screen and (min-width : 376px) and (max-width : 425px) {

    .wrap .RadioBtnsWrap label {
        min-width: 26px;
    }

    .submitpopup > span > svg {
        height: auto;
        width: 100%;
    }

    .overlayinfo, .submitpopup {
        width: 95%;
        margin: 0 auto;
        left: 0 !important;
        right: 0 !important;
    }

    .survey_emotion {
        width: 145px;
        left: 30%;
        bottom: -56px;
    }

    .container.questions.main {
        padding-top: 35px !important;
    }

        .container.questions.main.leftalign {
            padding-top: 0px !important;
        }
}

@media only screen and (min-width : 768px) and (max-width : 1024px) {
    .bannertxt {
        width: 52%;
    }

    .submitpopup > span > svg {
        height: auto;
        width: 100%;
    }

    .smileydiv {
        margin: 10px 0 0 0;
    }

        .smileydiv.leftalign {
            text-align: left;
        }

    .smileytextdiv {
        width: 88%;
    }

    .smileyparent {
        max-width: 100%;
        flex: 0 0 82%;
        margin: 0 auto;
    }

        .smileyparent.leftdiv {
            max-width: 100%;
        }

    .smileydiv i.smileyimg:first-child {
        float: left;
        text-align: left;
        margin: 1px 0 0 40px;
    }

    .smileydiv i.smileyimg:last-child {
        float: right;
        text-align: right;
        margin: 1px 0 0 0;
    }

    .submitpopup .thankyoudiv {
        font-size: 40px;
        top: 23%;
        left: 23%;
    }

    .submitpopup {
        width: 95%;
        margin: 0 auto;
        left: 0 !important;
        right: 0 !important;
    }

        .submitpopup .infodiv {
            padding-left: 40px;
        }

    .container .datacolumn {
        width: 90%;
    }

    .numbercolumn {
        margin-left: 35px;
    }

    .smileyparent {
        /*   max-width: 82%; */
        flex: 0 0 82%;
        margin: 0 auto;
    }

    .rating-stars ul > li.star > i.fa {
        font-size: 2em;
    }

    .rating-stars i.fa span {
        font-size: 10px;
        line-height: 32px;
    }
}

@media (max-width: 767px) {
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
        padding: 0px 5px !important;
    }

    .main .datacolumn, .main .datacolumn.prefixone {
        width: 100%;
    }

    .bg-trans-fixed-container.fixed {
        height: auto;
    }

    .submitpopup > span > svg {
        height: auto;
        width: 100%;
    }

    .matrix-question-phone {
        display: block;
    }

    .matrix-quesiton-desktop {
        display: none;
    }

    .bannertxt {
        padding: 10px 0;
        text-align: center;
    }

    .bannercontent {
        padding: 10px;
        line-height: 17px;
    }

    .numbercolumn {
        font-size: 40px;
    }

    .nologic_question .numbercolumn {
        margin-left: 15px !important;
    }

    .smileyparent .questiondiv {
        padding: 0px 0 10px 40px;
        text-align: left;
        margin-top: 0px;
    }

    .leftalign .smileyparent .questiondiv {
        padding: 15px 0 20px 0px;
    }

    .smileyparent .smileydiv.leftalign {
        text-align: left;
    }

    .mainstar {
        padding: 0 1px;
    }

    .number {
        font-size: 0.54em;
        line-height: 20px;
        left: 18%;
    }
    .rating-stars ul > li.star:last-child .number {
        left: 19%;
    }

    .smileyimg {
        font-size: 1.3em !important;
        vertical-align: top;
    }

    .bg-trans {
        display: flex;
        padding: 0 0 35px 0;
    }

    .question-div {
        margin-top: 10px;
    }

    .addquestionscontainer .question-div {
        margin-top: -21px;
        margin-left: 40px;
    }

    #questions .sections .addquestionscontainer > .container {
        padding: 20px 10px;
        margin: 10px 0px 10px 0px;
    }

        #questions .sections .addquestionscontainer > .container:first-child {
            padding: 20px 10px;
            margin: 20px 0px 10px 0px;
        }

    .gridquestion .solayout .outerdiv {
        padding-left: 40px !important;
        display: flex;
    }

    footer .container p {
        display: inline-block;
        margin: 0 !important;
        font-size: 12px;
    }

    .otherquestions .navbar {
        right: 0px;
    }

    .conditionalquestions.otherquestions .navbar {
        right: 0 !important;
    }

    .logo {
        width: 100%;
        text-align: center;
    }

        .logo img {
            width: 50%;
        }

    .container.questioncontainer.firstquestion.shift-down {
        margin-top: 10px;
        /*    padding-top:30px; */
    }

    .npsmain.reducedMargin {
        margin: 20px 0px 0px 0px;
    }

    .accordian .mcqquestion [type="checkbox"]:checked + label, .accordian .mcqquestion [type="checkbox"]:not(:checked) + label {
        line-height: 15px;
    }

        .accordian .mcqquestion [type="checkbox"]:checked + label .griddadiospan, .accordian .mcqquestion [type="checkbox"]:not(:checked) + label .griddadiospan {
            top: 3px;
        }

        .accordian .mcqquestion [type="checkbox"]:checked + label .griddadiospanafter, .accordian .mcqquestion [type="checkbox"]:not(:checked) + label .griddadiospanafter {
            top: 7px;
        }

    .card .card-header .card-selecteddiv {
        max-width: 80px !important;
    }

    .accordian .fftquestion .row {
        background-position: 6.5% 92%;
        background-repeat: no-repeat;
        background-color: transparent;
        z-index: -1;
    }

    footer.conditionalquestions .container {
        line-height: 20px;
    }

        footer.conditionalquestions .container p {
            font-size: 10px;
        }

        footer.conditionalquestions .container .yrtxt {
            float: none;
        }

    .submitpopup > span {
        height: 78px;
    }

        .submitpopup > span > svg {
            height: auto;
            width: 100%;
        }

    .submitpopup .thankyoudiv {
        font-size: 30px;
    }

    .submitpopup .infodiv .titlediv {
        font-size: 25px;
        line-height: 30px;
    }

    .submitpopup .infodiv .msgdiv {
        font-size: 19px;
    }
}

@media only screen and (min-width: 100px) and (max-width: 766px) {
    .hidden-xs {
        display: none !important;
    }

    .card .card-header .card-selecteddiv {
        max-width: 30px !important;
    }

    .submitpopup > span > svg {
        height: auto;
        width: 100%;
    }
    /* For mobile phones: */
    .bannertxt {
        width: 100%;
    }

    .container .datacolumn {
        width: 100%;
        padding-bottom: 10px;
    }

    .rating-stars {
        width: auto;
    }

    .numbercolumn {
        margin-left: 10px;
    }

    .rating-stars i.fa span {
        font-size: 6px;
        line-height: 18px;
    }

    .rating-stars ul > li.star > i.fa {
        font-size: 16px;
    }

    .fa-3x.smileyimg {
        font-size: 16px;
    }

    .survey_emotion {
        width: 145px;
        left: 30%;
        bottom: -56px;
    }

    /* .smileytextdiv div {
        width: 30px;
    } */

    /* .questioncontainer {
        padding: 100px 10px 10px 10px;
    } */

    .questioncontainer .btn-holder {
        margin: 0 10px;
    }

    .firstsubquestion {
        padding-bottom: 0 !important;
    }

    .jumbotron-heading {
        font-size: 20px;
    }

    .youropinion {
        font-size: 25px;
        line-height: 26px;
    }

    .subtitle {
        font-size: 18px;
    }

    .final-btns .btn-holder .btn, .form-control.txt-area {
        font-size: 14px;
    }

    .smileyparent {
        padding: 0 0px !important;
        max-width: 100%;
        flex: 0 0 100%;
        margin: 0 auto;
    }

    .smileydiv {
        padding: 0;
        margin: 10px 0 0 0;
    }

    .form-control.txt-area {
        padding: 5px 10px;
        border: 1px solid rgba(219,219,219,0.5);
        overflow: hidden;
        border-radius: 3px;
        background-color: #fff;
        margin-bottom: -1rem;
    }

    .logo {
        text-align: center;
        width: 100%;
    }

        .logo a {
            width: 50%;
            display: block;
            margin: 0 auto;
        }

    .fixed .logo a {
        margin: 0;
    }

    .smileydiv i.smileyimg:first-child {
        width: 4%;
        float: left;
        margin: 2px -3px 0 0px;
    }

    .smileydiv i.smileyimg:last-child {
        width: 4%;
        float: right;
        margin: 2px 0 0 0px;
    }

    .rating-stars ul > li.star .fa-2x {
        font-size: 1.2em;
        WIDTH: auto;
    }

    .btn-holder {
        margin: 0 20px !important;
    }

    .bg-trans-fixed-container .logo {
        text-align: left;
    }


        .bg-trans-fixed-container .logo img.img-fluid {
            width: 80px;
            margin: 0px 0 10px 0;
            height: auto;
        }

    .bg-trans-fixed .bannercontent {
        padding: 15px 0 0 20px;
    }

    .container.questioncontainer {
        margin-bottom: 0;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 20px;
    }



    .uparrowdiv {
        margin: 70px auto;
        float: none;
        text-align: center;
        z-index: 99;
    }

    .submitpopup .thankyoudiv {
        top: 7vw;
        font-size: 25px;
        left: 30%;
    }

    .submitpopup {
        width: 95%;
        margin: 0 auto;
        left: 0 !important;
        right: 0 !important;
    }

        .submitpopup .infodiv {
            padding-left: 30px;
        }

    .smileytextdiv div {
        width: 44%;
    }

    .card .card-header .card-subheader {
        left: 90px !important;
        max-width: 130px !important;
    }
    /* .card .card-header .card-selecteddiv{
            max-width: 120px!important;
        } */
    .card .card-header .card-selecteddiv {
        max-width: 30px !important;
    }

    .smileydiv {
        display: flex;
        gap: 5px;
        font-size: 30px;
    }

    .number {
           /* display: none !important; */
    }        
    .smileytextdiv {
        margin: 0 auto;
        font-size: 11px;
        width: 100%;
        position: absolute;
        bottom: 22px;
        display: flex;
        justify-content: space-between;
    }

        .smileytextdiv div {
            width: 48%;
        }

            .smileytextdiv div br {
                display: none;
            }

    .rating-stars ul > li.star {
        display: inline-block;
        width: auto;
        font-size: 6.2vw;
    }

    .conditionalquestions .container {
        padding: 10px !important;
    }

    .numbercolumn {
        margin-left: 0px;
        margin-top: 0px;
        line-height: 27px;
    }

    .addquestionscontainer .question-div {
        margin-top: 0;
        margin-left: 43px;
        width: 80%;
    }

    .otherquestions.container .row {
        background-position: top 0% right 0%;
        background-size: 50px;
        padding-top: 0px;
    }

    .questions {
        padding: 15px !important;
    }

    .container.questions.main {
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-bottom: 15px !important;
    }

        .container.questions.main .row {
            margin: 0;
        }

    .submitcontainer .btn-holder {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #submitBtn {
        margin: 0px;
    }

    .smileyparent .smileydiv {
        margin-bottom: 20px;
        padding: 0px !important;
        padding-top: 5px !important;
    }

        .smileyparent .smileydiv > svg {
            position: absolute;
            top: 16px;
        }

            .smileyparent .smileydiv > svg.red, .smileyparent .smileydiv > svg.orange {
                left: 21px;
            }

            .smileyparent .smileydiv > svg.green {
                right: 14px;
            }

    #happysmiley {
        right: 14px;
    }

    .smileyparent .smileydiv > svg.grey#frownsmiley {
        left: 21px;
    }

    .otherquestions .navbar .navbar-nav {
        width: 100%;
        padding: 0;
    }

    #questions .navbar .navbar-nav .activeCount {
        width: 100%;
        margin: 0;
    }

    .otherquestions .navbar li.nav-item {
        margin-bottom: 0px;
        display: inline-block;
    }

    .otherquestions .navbar-dark .navbar-nav .nav-link {
        width: 14px;
        height: 14px;
    }

    .nav-item .text {
        font-size: 16px;
        line-height: 18px;
    }

    .otherquestions .navbar {
        top: auto;
        bottom: 44px;
        width: 100%;
    }

    #questions {
        margin-bottom: 125px;
    }

    .smileydiv div {
        width: 60%;
        margin: 0 auto;
        text-align: center;
    }

        .smileydiv div.mainstar {
            width: 100%;
            margin: 0 auto;
        }

    .rating-stars ul {
        width: 100%;
        margin: 0 auto;
    }

    .container.questions.main {
        padding-top: 45px !important;
    }

    .textdiv .tabletextarea {
        margin-bottom: 3px;
    }

    .fftquestion .row {
        background-image: url('../images/q3-mobile.png');
    }

    .mcqquestion [type="checkbox"]:checked + label, .mcqquestion [type="checkbox"]:not(:checked) + label {
        line-height: normal;
    }

    .mcqform .form-check {
        margin-bottom: 10px;
    }

    .mcqquestion [type="checkbox"]:checked + label .griddadiospan, .mcqquestion [type="checkbox"]:not(:checked) + label .griddadiospan {
        top: 5px;
    }

    .mcqquestion [type="checkbox"]:checked + label .griddadiospanafter, .mcqquestion [type="checkbox"]:not(:checked) + label .griddadiospanafter {
        top: 9px;
    }
}

@media only screen and (min-width: 100px) and (max-width: 320px) {
    .smileytextdiv div {
        width: 44%;
    }

    .submitpopup > span > svg {
        height: auto;
        width: 100%;
    }

    .closepagepopup {
        width: 80% !important;
    }

    .confirmpopup {
        width: 84% !important;
    }

        .confirmpopup .confirmbuttondiv #confirmnobutton {
            margin-left: 15% !important;
        }

        .confirmpopup .confirmbuttondiv #confirmokbutton {
            margin-right: 15% !important;
        }
}

@media only screen and (min-width: 320px) and (max-width: 359px) {
    .smileydiv {
        width: 110%;
        margin-left: -15px !important;
    }

    .submitpopup > span > svg {
        height: auto;
        width: 100%;
    }

    .smileytextdiv div {
        width: 49%;
    }

    .closepagepopup {
        width: 80% !important;
    }

    .confirmpopup {
        width: 97% !important;
    }

        .confirmpopup .confirmbuttondiv #confirmnobutton {
            margin-left: 15% !important;
        }

        .confirmpopup .confirmbuttondiv #confirmokbutton {
            margin-right: 15% !important;
        }
}

@media only screen and (min-width: 360px) and (max-width: 375px) {
    .closepagepopup {
        width: 80% !important;
    }

    .submitpopup > span > svg {
        height: auto;
        width: 100%;
    }

    .confirmpopup {
        width: 84% !important;
    }

        .confirmpopup .confirmbuttondiv #confirmnobutton {
            margin-left: 15% !important;
        }

        .confirmpopup .confirmbuttondiv #confirmokbutton {
            margin-right: 15% !important;
        }
}

@media only screen and (min-width: 375px) and (max-width: 410px) {
    .closepagepopup {
        width: 80% !important;
    }

    .submitpopup > span > svg {
        height: auto;
        width: 100%;
    }

    .confirmpopup {
        width: 84% !important;
    }

        .confirmpopup .confirmbuttondiv #confirmnobutton {
            margin-left: 15% !important;
        }

        .confirmpopup .confirmbuttondiv #confirmokbutton {
            margin-right: 15% !important;
        }

    .overlayinfo, .submitpopup {
        left: 5px !important;
    }

    .expiryinfo {
        width: 350px;
        left: 13px !important;
        top: 390px;
    }

        .expiryinfo .borderdiv {
            width: 350px;
        }

        .expiryinfo svg {
            left: 88px;
        }
}

@media only screen and (min-width: 411px) and (max-width: 425px) {
    .smileytextdiv div {
        width: 38%;
    }

    .submitpopup > span > svg {
        height: auto;
        width: 100%;
    }

    .overlayinfo, .submitpopup {
        width: 400px;
        left: 5px !important;
    }

    .expiryinfo {
        width: 400px;
        top: 390px;
        left: 7px !important
    }

        .expiryinfo svg {
            left: 105px;
        }

        .expiryinfo .borderdiv {
            width: 400px;
        }

    .closepagepopup {
        width: 300px !important;
    }

    .confirmpopup {
        width: 84% !important;
    }

        .confirmpopup .confirmbuttondiv #confirmnobutton {
            margin-left: 15% !important;
        }

        .confirmpopup .confirmbuttondiv #confirmokbutton {
            margin-right: 15% !important;
        }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .smileyparent .questiondiv {
        text-align: center;
    }

    .submitpopup > span > svg {
        height: auto;
        width: 100%;
    }

    .addquestionscontainer .question-div {
        margin-left: 40px;
    }

    .bannertxt {
        width: 70%;
    }

    .expiryinfo {
        top: 360px;
    }

    .card .card-header .card-selecteddiv {
        max-width: 120px;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1365px) {
    .main .datacolumn.prefixone {
        margin-left: 90px;
    }

    .submitpopup > span > svg {
        height: auto;
        width: 100%;
    }

    .addquestionscontainer .question-div {
        margin-left: 40px;
    }

    .bannertxt {
        width: 70%;
    }

    .smileytextdiv.leftalign {
        width: 56%;
        height: 40px;
        padding: 0 5px 0 0;
        margin: 0
    }

    .smileyparent .smileydiv.leftalign {
        padding: 0 15px 0 0;
        text-align: left;
    }
}

@media only screen and (min-width: 731px) and (max-width:750px) {
    .questioncontainer > .row {
        margin-right: 0px;
        margin-left: 0px;
    }

    .submitpopup > span > svg {
        height: auto;
        width: 100%;
    }
}

@media only screen and (min-width: 1366px) {
    .smileytextdiv.leftalign {
        width: 56%;
        height: 40px;
        padding: 0 5px 0 0;
        margin: 0
    }

    .submitpopup > span > svg {
        height: auto;
        width: 100%;
    }

    .smileyparent .smileydiv.leftalign {
        padding: 0 15px 0 0;
        text-align: left;
    }
}

@media only screen and (min-width: 321px) and (max-width: 360px) {
    .overlayinfo, .submitpopup {
        width: 330px;
    }

        .submitpopup > span > svg {
            height: auto;
            width: 100%;
        }

    .overlayinfo, .submitpopup {
        left: 15px !important;
    }

    .expiryinfo {
        width: 350px;
        left: 6px !important
    }

        .expiryinfo .borderdiv {
            width: 350px;
        }

        .expiryinfo svg {
            left: 80px;
        }

    .confirmpopup {
        width: 84% !important;
    }

        .confirmpopup .confirmbuttondiv #confirmnobutton {
            margin-left: 15% !important;
        }

        .confirmpopup .confirmbuttondiv #confirmokbutton {
            margin-right: 15% !important;
        }
}

@media only screen and (max-width: 320px) {
    .overlayinfo, .submitpopup {
        width: 313px;
    }

    .overlayinfo, .submitpopup {
        left: 2px !important;
    }

    .expiryinfo {
        width: 280px;
        left: 20px !important;
        top: 390px;
    }

        .expiryinfo .borderdiv {
            width: 280px;
        }

        .expiryinfo svg {
            left: 51px;
        }

    .confirmpopup {
        width: 84% !important;
    }

        .confirmpopup .confirmbuttondiv #confirmnobutton {
            margin-left: 15% !important;
        }

        .confirmpopup .confirmbuttondiv #confirmokbutton {
            margin-right: 15% !important;
        }

    .submitpopup > span {
        height: 78px;
    }

        .submitpopup > span > svg {
            height: auto;
            width: 100%;
        }

    .submitpopup .thankyoudiv {
        font-size: 30px;
    }

    .submitpopup .infodiv .titlediv {
        font-size: 25px;
        line-height: 30px;
    }

    .submitpopup .infodiv .msgdiv {
        font-size: 19px;
    }
}
    .smileydiv.lopsmileydiv {
        display: flex;        
        gap:40px;
        height:66px;
    }  
    .smileydiv.lopsmileydiv .smiley-option .mainstar-div svg:nth-child(2) {
        display: none
    }
    .smileydiv.lopsmileydiv .smiley-option.selected .mainstar-div svg:first-child {
        display: none
    }
    .smileydiv.lopsmileydiv .smiley-option.selected .mainstar-div svg:nth-child(2) {
        display: inline-block;
    }
    .smileydiv.lopsmileydiv .smiley-option, .smileydiv.lopsmileydiv .smiley-option .mainstar-div {
        margin: 0;           
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items:center;
    }

.smiley-option svg {
    width: 45px;
    height: 45px;
}
/*    .smiley-option svg path {
        fill: #b5b4b4;
    }
.smiley-option[sequence="1"] svg path {
    fill: #71c52e;
}
.smiley-option[sequence="3"] svg path {
    fill: #f45b57;
}
.smiley-option[sequence="2"] svg path {
    fill: #ff8537;
}*/

.privacy-link-footer {
    position: absolute;
    color: inherit !important;
    right: 330px;
}