html,body {
    min-height: 100%;
    height: 100%;
}

#publicSurveyBody {
    min-height: 100%;
    height: auto;
    background-color: #e9e9e9;
    padding: 40px 40px;
}

#publicSurveyBody.dismissed{
    min-height: auto;
}

@media screen and (max-width: 600px) {
    #publicSurveyBody {
        padding:40px 20px;
    }
}

@media screen and (max-width: 480px) {
    #publicSurveyBody {
        padding:30px 10px;
    }
}

#surveyWrap {
    max-width: 960px;
    width: 100%;
    margin: auto;
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 2px 1px -1px rgba(0,0,0,0.12);
}

#surveyBody {
    width: 100%;
    height: auto;
    overflow: hidden;
}

#surveyContent {
    display: none!important;
}

/* Hide screenshot element from public page, but leave section break intact */
#surveyContent .control-group.question.section{
    padding:0;
}

#surveyContent .control-group.question.section .block-title,
#surveyContent .control-group.question.section .section-screenshot{
    display:none;
}

#surveyContent .control-group.question.section .section-title {
    padding:20px 20px 0 20px;
}

#surveyContent .control-group.question.section .section-description {
    padding:0 20px 20px 20px;
}

/* Custom background styles */
#publicSurveyBody.customBackground {
    background: transparent;
    position: relative;
}
#publicSurveyBody.customBackground:before{
    content: '';
    display:block;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    opacity: .85;
    position: absolute;
}

#publicSurveyBody.customBackground.dark:before{
    background:#000;
}

#publicSurveyBody.customBackground.light:before{
    background:#fff;
}

/* Transparenty global styles*/

#publicSurveyBody.customBackground.transparent #surveyBody,
#publicSurveyBody.customBackground.transparent #surveyContent,
#publicSurveyBody.customBackground.transparent .mopinion-survey-content .mopinion-survey-output{
    background:transparent;
    color:#fff!important;
}

#publicSurveyBody.customBackground.transparent #surveyHead{
    display: none;
}

#publicSurveyBody.customBackground.transparent #surveyWrap{
    box-shadow: none;
    margin-top:10vh;
}

/* Tansparent Dark */

#publicSurveyBody.customBackground.transparent.dark #surveyContent input,
#publicSurveyBody.customBackground.transparent.dark #surveyContent textarea,
#publicSurveyBody.customBackground.transparent.dark #surveyContent .control-group,
#publicSurveyBody.customBackground.transparent.dark #surveyContent input+label,
#publicSurveyBody.customBackground.transparent.dark #surveyContent .nice-select{
    background:transparent;
    color:#fff;
}

#publicSurveyBody.customBackground.transparent.light #surveyContent input,
#publicSurveyBody.customBackground.transparent.light #surveyContent textarea,
#publicSurveyBody.customBackground.transparent.light #surveyContent .control-group,
#publicSurveyBody.customBackground.transparent.light #surveyContent input+label,
#publicSurveyBody.customBackground.transparent.light #surveyContent .nice-select{
    background:transparent;
    color:#303031!important;
}

#publicSurveyBody.customBackground.transparent.dark #surveyContent input+label:before,
#publicSurveyBody.customBackground.transparent.light #surveyContent input+label:before{
    background:transparent;
}

#publicSurveyBody.customBackground.transparent.dark #surveyContent .rating-group.bar .rating-choice input+label{
    background:transparent!important;
    color:#fff;
}

#publicSurveyBody.customBackground.transparent.light #surveyContent .rating-group.bar .rating-choice input+label{
    background:transparent!important;
    color:#303031;
}

#publicSurveyBody.customBackground.transparent #surveyContent .rating-group.bar .rating-choice:nth-child(1) input+label:hover,
#publicSurveyBody.customBackground.transparent #surveyContent .rating-group.bar .rating-choice:nth-child(1) input:checked+label{
    background:#db080f!important;
}

#publicSurveyBody.customBackground.transparent #surveyContent .rating-group.bar .rating-choice:nth-child(2) input+label:hover,
#publicSurveyBody.customBackground.transparent #surveyContent .rating-group.bar .rating-choice:nth-child(2) input:checked+label{
    background:#f86807!important;
}

#publicSurveyBody.customBackground.transparent #surveyContent .rating-group.bar .rating-choice:nth-child(3) input+label:hover,
#publicSurveyBody.customBackground.transparent #surveyContent .rating-group.bar .rating-choice:nth-child(3) input:checked+label{
    background:#f4df13!important;
}

#publicSurveyBody.customBackground.transparent #surveyContent .rating-group.bar .rating-choice:nth-child(4) input+label:hover,
#publicSurveyBody.customBackground.transparent #surveyContent .rating-group.bar .rating-choice:nth-child(4) input:checked+label{
    background:#d0ee1c!important;
}

#publicSurveyBody.customBackground.transparent #surveyContent .rating-group.bar .rating-choice:nth-child(5) input+label:hover,
#publicSurveyBody.customBackground.transparent #surveyContent .rating-group.bar .rating-choice:nth-child(5) input:checked+label{
    background:#009618!important;
}

#publicSurveyBody.customBackground.transparent #branding{
    position:fixed;
    bottom:0!important;
    width:100%;
    background:#303031;
    z-index:2001;
    margin-bottom:0!important;
}


#publicSurveyBody.customBackground.transparent #branding .center-branding {
  -webkit-transform:translateY(0);
  transform:translateY(0);
  opacity: 1;
  visibility: visible;
}


#publicSurveyBody.customBackground.transparent #branding a{
    background:transparent;
}

#publicSurveyBody.customBackground.transparent #branding a span{
    color:#e9e9e9;
}

#publicSurveyBody.customBackground.transparent .rating-group.emoji input[type="radio"] + label{
    background:transparent!important;
}

/* Close_cross */

.close_custom_bg{
    position:fixed;
    display:block;
    height:40px;
    width:40px;
    top:25px;
    right:35px;
    text-decoration:none;
    font-size:48px;
    font-family:'Arial';
    line-height:40px;
    text-align:center;
}

.close_custom_bg_lbl{
    position:absolute;
    display:block;
    right:45px;
    top:10px;
    width:auto!important;
    font-size:14px;
    line-height:14px;
    padding:3px 10px;
    border-radius:3px;
    text-align:right!important;
    background:rgba(0,0,0,.2);
    white-space:nowrap;
    opacity:0;
    transition:.2s opacity ease-in-out;
    -o-transition:.2s opacity ease-in-out;
    -moz-transition:.2s opacity ease-in-out;
}

.close_custom_bg:hover .close_custom_bg_lbl{
    opacity:1;
}

.close_custom_bg.dark,
.close_custom_bg_lbl.dark{
    color:#fff;   
}

.close_custom_bg.light,
.close_custom_bg_lbl.light{
    color:#303031;   
}

.close_custom_bg:before{
    content: '';
    position:absolute;
    font-family: 'verdana';
    top:8px;
    left:18px;
    border-left:4px solid #ffffff;
    width:0px;
    height:24px;
    display:block;
    text-decoration:none;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.close_custom_bg:after{
    content: '';
    position:absolute;
    top:8px;
    left:18px;
    border-left:4px solid #ffffff;
    width:0px;
    height:24px;
    text-decoration:none;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.close_custom_bg.dark:before,
.close_custom_bg.dark:after{
    border-color:#ffffff;
}

.close_custom_bg.light:before,
.close_custom_bg.light:after{
    border-color:#303031;
}

/* Iframe style */
#mailUrl{
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    left: 0;
    top: 0;
    bottom: 0;
    right:0;
    overflow: auto;
    border: 0;
    z-index: -1;
}

@media screen and (max-width:1050px){
    .close_custom_bg{
        position:absolute;
        top:50px;
        right:46px;
    }
    .close_custom_bg:before,
    .close_custom_bg:after{
        border-color:#303031;
    }
    #publicSurveyBody.customBackground.transparent .close_custom_bg.dark:before,
    #publicSurveyBody.customBackground.transparent .close_custom_bg.dark:after{
        border-color:#fff;
    }
    #publicSurveyBody.customBackground .close_custom_bg.dark:before,
    #publicSurveyBody.customBackground .close_custom_bg.dark:after,
    #publicSurveyBody.customBackground .close_custom_bg.light:before,
    #publicSurveyBody.customBackground .close_custom_bg.light:after,
    #publicSurveyBody.customBackground.transparent .close_custom_bg.light:before,
    #publicSurveyBody.customBackground.transparent .close_custom_bg.light:after{
        border-color:#303031;
    }
}

@media screen and (max-width:600px){
    .close_custom_bg{
        top:46px;
        right:24px;
    }
    .close_custom_bg:before,
    .close_custom_bg:after{
        color:#303031;
    }
}