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