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; } }