/**
* Theme Name: QSM Quiz fortune
*/
:root{
--fortune-theme-color: #EB5757;
--fortune-theme-color-bg: #EB575730;
--fortune-background-color: #FFFFFF;
--fortune-button-color: #282760;
--fortune-progressbar-color: #EB5757;
--fortune-progressbar-text: #282760;
--fortune-option-text-color: #282760;
--fortune-option-background-color: #EB5757;
--fortune-option-color: #FFFFFF;
--fortune-font-color: #282760;
--fortune-font-color-light: #28276094;
}
body div .quiz-theme-qsm-theme-fortune-parent{
max-width: 950px;
padding: 30px;
}
.qsm-quiz-container.quiz_theme_qsm-theme-fortune {
padding: 15px;
background: var(--fortune-background-color);
color: var(--fortune-font-color);
box-shadow: 0px 10px 40px 5px rgba(32, 68, 60, 0.05);
}
.quiz_theme_qsm-theme-fortune .mlw_qmn_message_before{
color: var(--fortune-font-color);
}
.quiz_theme_qsm-theme-fortune .quiz_section{
width: 100%;
}
.quiz_theme_qsm-theme-fortune .qsm-question-wrapper{
margin-bottom: 20px;
}
.quiz_theme_qsm-theme-fortune .quiz_section .mlw-file-upload-error-msg,
.quiz_theme_qsm-theme-fortune .qsm-question-wrapper .mlw_answer_file_upload,
.quiz_theme_qsm-theme-fortune .qsm-question-wrapper input[type="radio"],
.quiz_theme_qsm-theme-fortune .qsm-question-wrapper input[type="checkbox"],
.quiz_theme_qsm-theme-fortune .pages_count,
.quiz_theme_qsm-theme-fortune .mlw_qmn_timer,
.quiz_theme_qsm-theme-fortune .qsm_contact_div input[type="checkbox"],
.quiz_theme_qsm-theme-fortune .qsm-theme-fortune-header .fortune-progress-bar .qsm-progress-bar .progressbar-text,
.quiz_theme_qsm-theme-fortune .quiz_section .qmn_image_option .qsm-input-label:before{
display: none !important;
}
.qsm-quiz-container.quiz_theme_qsm-theme-fortune .mlw_horizontal_choice,
.qsm-quiz-container.quiz_theme_qsm-theme-fortune .qmn_multiple_horizontal_check .mlw_horizontal_multiple,
.quiz_theme_qsm-theme-fortune .qsm-results-page .qmn_image_option,
.qsm-quiz-container.quiz_theme_qsm-theme-fortune .quiz_section .qmn_image_option {
display: inline-table;
margin-right: 8px;
margin-bottom: 8px;
width: calc(50% - 11px);
cursor: pointer;
vertical-align: top;
height: auto;
}
.qsm-quiz-container.quiz_theme_qsm-theme-fortune .mlw_horizontal_choice,
.qsm-quiz-container.quiz_theme_qsm-theme-fortune .qmn_multiple_horizontal_check .mlw_horizontal_multiple{
width:auto;
min-width: 23%;
text-align: center;
}
/*=============/Checkbox and Radio input CSS start/==============*/
.quiz_theme_qsm-theme-fortune .qsm_contact_div.qsm-contact-type-checkbox label,
.quiz_theme_qsm-theme-fortune .quiz_section .qsm-input-label {
display: block;
padding: 13px 15px;
border-radius: 30px;
margin-bottom: 10px;
margin-left: 0;
margin-right: 0;
color: var(--fortune-font-color);
transition-duration: 0.3s;
border: 1px solid;
min-width: 50px;
max-width: 100%;
overflow: hidden;
font-size: 15px;
}
.quiz_theme_qsm-theme-fortune .quiz_section .qsm_multiple_grid_table .qsm-input-label {
border: none;
padding: 4px;
text-align: center;
margin-bottom: 0;
border-radius: 0;
display: inline-table;
}
.quiz_theme_qsm-theme-fortune .qsm_multiple_grid_table td,
.quiz_theme_qsm-theme-fortune .qsm_multiple_grid_table th {
padding: 8px;
border-width: 0 1px 1px 0;
border-style: solid;
}
.quiz_theme_qsm-theme-fortune table.qsm_multiple_grid_table{
border-style: solid;
border-width: 1px 0 0 1px;
border-color: #173e5610;
}
.quiz_theme_qsm-theme-fortune .fortune-page-total {
opacity: 0.5;
}
.quiz_theme_qsm-theme-fortune .qsm_contact_div input:checked ~ label,
.quiz_theme_qsm-theme-fortune .quiz_section input:checked ~ .qsm-input-label,
.quiz_theme_qsm-theme-fortune .quiz_section input:checked ~ .qsm-input-label:before,
.quiz_theme_qsm-theme-fortune .quizqsm_contact_div.qsm-contact-type-checkbox_section label:hover,
.quiz_theme_qsm-theme-fortune .quiz_section .qsm-input-label:hover {
background: var(--fortune-option-background-color);
color: var(--fortune-option-color);
}
.quiz_theme_qsm-theme-fortune .qsm_contact_div.qsm-contact-type-checkbox label:before,
.quiz_theme_qsm-theme-fortune .quiz_section .qsm-input-label:before {
content: "\f15e";
border: 2px solid var(--fortune-option-text-color);
height: 15px;
width: 15px;
display: inline-block;
font-family: 'dashicons';
font-size: 16px;
line-height: 1;
vertical-align: middle;
color: transparent;
transition-duration: 0.3s;
margin-top: -4px;
margin-bottom: -2px;
border-radius: 50%;
box-sizing: content-box;
}
.quiz_theme_qsm-theme-fortune .quiz_section .qmn_radio_answers input[type="radio"]:checked ~ .qsm-input-label:before {
content: "";
border: 4px solid;
height: 10px;
width: 10px;
}
.quiz_theme_qsm-theme-fortune .qsm_contact_div.qsm-contact-type-checkbox label:hover:before,
.quiz_theme_qsm-theme-fortune .quiz_section .qsm-input-label:hover:before,
.quiz_theme_qsm-theme-fortune .qsm_contact_div.qsm-contact-type-checkbox input:checked ~ label:before,
.quiz_theme_qsm-theme-fortune .quiz_section input:checked ~ .qsm-input-label:before{
border-color: var(--fortune-option-color);
}
.quiz_theme_qsm-theme-fortune .qsm_contact_div.qsm-contact-type-checkbox input:checked ~ label:before,
.quiz_theme_qsm-theme-fortune .quiz_section input:checked ~ .qsm-input-label:before{
color: var(--fortune-option-color);
}
.quiz_theme_qsm-theme-fortune .qsm_contact_div.qsm-contact-type-checkbox label:before{
margin-right: 8px;
}
/*=============/Checkbox and Radio input CSS end/==============*/
/*=============/input and select CSS start/==============*/
.qmn_quiz_container.quiz_theme_qsm-theme-fortune select,
.qmn_quiz_container.quiz_theme_qsm-theme-fortune textarea,
.qmn_quiz_container.quiz_theme_qsm-theme-fortune input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]){
border-color: var(--fortune-option-background-color);
width: 100%;
box-sizing: border-box;
padding: 10px;
border: none;
border-radius: 0;
border-bottom: 1px solid;
outline: none;
}
/*=============/input and select CSS end/==============*/
/*=============/Button CSS start/==============*/
.qmn_quiz_container.quiz_theme_qsm-theme-fortune .mlw_previous {
visibility: hidden;
position: absolute;
}
.qmn_quiz_container.quiz_theme_qsm-theme-fortune .qmn_btn,
.qmn_quiz_container.quiz_theme_qsm-theme-fortune .btn-secondary,
.qmn_quiz_container.quiz_theme_qsm-theme-fortune input[type="submit"],
.qmn_quiz_container.quiz_theme_qsm-theme-fortune .btn{
background: var(--fortune-button-color) !important;
border: none;
cursor: pointer;
border-radius:50px ;
}
.qmn_quiz_container.quiz_theme_qsm-theme-fortune input[type="submit"]{
color: #FFFFFF;
padding: 16px;
}
.qmn_quiz_container.quiz_theme_qsm-theme-fortune .qmn_btn:hover,
.qmn_quiz_container.quiz_theme_qsm-theme-fortune .btn:hover{
opacity: 0.7;
}
.quiz_theme_qsm-theme-fortune.qmn_quiz_container.qsm_auto_pagination_enabled .quiz_section.quiz_end .qsm-submit-btn,
.quiz_theme_qsm-theme-fortune.qmn_quiz_container .qsm-submit-btn,
.qmn_quiz_container.quiz_theme_qsm-theme-fortune .mlw_next{
margin-right: auto;
padding: 12px 32px !important;
}
.quiz_theme_qsm-theme-fortune.qmn_quiz_container.qsm_auto_pagination_enabled .quiz_section.quiz_end .qsm-submit-btn{
position: relative;
padding: 15px !important;
}
.quiz_theme_qsm-theme-fortune .fortune-previous-btn span.dashicons{
vertical-align: middle;
margin-right: 5px;
}
.quiz_theme_qsm-theme-fortune.qmn_quiz_container .qsm-theme-fortune-header .fortune-previous-btn {
display: inline-flex;
text-align: center;
border: 1px solid var(--fortune-button-color);
background: transparent;
color: var(--fortune-button-color);
font-size: 16px;
font-weight: 400;
padding: 0px 18px;
border-radius: 100px;
align-items: center;
cursor: pointer;
height: 44px;
margin-left: 18px;
margin-top: 4px;
margin-right: 30px;
line-height: 0px;
}
.qmn_quiz_container.quiz_theme_qsm-theme-fortune .mlw_next:after {
content: "\f344";
font-family: 'dashicons';
margin-left: 5px;
vertical-align: middle;
}
.quiz_theme_qsm-theme-fortune.qmn_quiz_container .qsm-submit-btn {
height: 50px;
}
@media screen and (max-width: 499px) {
.quiz_theme_qsm-theme-fortune.qmn_quiz_container.qsm_auto_pagination_enabled .qmn_pagination {
width: 100% !important;
}
.quiz_theme_qsm-theme-fortune.qmn_quiz_container .fortune-previous-btn {
font-size: 14px !important;
padding: 0px 8px !important;
width: fit-content;
height: fit-content;
margin-right: 10px;
}
}
/*=============/Button CSS end/==============*/
/*=============/Image type questions CSS start/==============*/
.quiz_theme_qsm-theme-fortune .quiz_section .qmn_image_option .qsm-input-label {
width: 100%;
position: relative;
border-radius: 6px;
padding: 0;
}
.quiz_theme_qsm-theme-fortune .quiz_section .qmn_image_option .qsm-input-label img{
max-width: 100%;
display: block;
}
.quiz_theme_qsm-theme-fortune .quiz_section .qsm-input-label-fortune {
text-align: center;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
margin: 0;
}
.quiz_theme_qsm-theme-fortune .quiz_section .qsm-input-label-fortune .qsm-fortune-points {
border: 2px solid;
border-radius: 50%;
min-width: 45px;
min-height: 45px;
line-height: 1;
align-items: center;
display: inline-flex;
justify-content: center;
}
.quiz_theme_qsm-theme-fortune .quiz_section .qmn_image_option .qsm-input-label:hover,
.quiz_theme_qsm-theme-fortune .quiz_section .qsm-input-label-fortune:hover .qsm-fortune-points,
.quiz_theme_qsm-theme-fortune .quiz_section input:checked ~ .qsm-input-label-fortune .qsm-fortune-points{
border: 2px solid var(--fortune-option-background-color);
background: var(--fortune-option-background-color);
color: var(--fortune-option-color);
}
.quiz_theme_qsm-theme-fortune .quiz_section .qmn_image_option .qsm-input-label .qsm_image_caption {
padding: 10px;
display: block;
}
/*=============/Image type questions CSS end/==============*/
/*=============/Polar type questions CSS start/==============*/
.quiz_theme_qsm-theme-fortune .slider-main-wrapper .ui-slider {
height: 5px !important;
border-radius: 3px !important;
background-color: var(--fortune-theme-color);
border: none;
}
.quiz_theme_qsm-theme-fortune .slider-main-wrapper {
position: inherit !important;
margin-top: 20px !important;
width: 100% !important;
display: block;
order: 3;
padding: 0;
}
.quiz_theme_qsm-theme-fortune .left-polar-title,
.quiz_theme_qsm-theme-fortune .right-polar-title {
width: calc(50% - 8px) !important;
max-width: 50%;
order: 1;
}
.quiz_theme_qsm-theme-fortune .right-polar-title {
text-align: right !important;
margin-left: 16px;
order: 2;
}
.quiz_theme_qsm-theme-fortune .slider-main-wrapper .ui-slider .ui-slider-handle {
width: 30px;
height: 30px;
margin-top: -6px;
background-color: var(--fortune-theme-color);
border: none;
border-radius: 20px;
box-shadow: 3px 3px 5px rgb(20 20 20 / 25%);
transition: all 0.5s ease;
text-align: center;
margin-left: -20px;
cursor: all-scroll;
line-height: 30px;
}
.quiz_theme_qsm-theme-fortune .slider-main-wrapper .ui-slider .ui-slider-handle .dashicons {
text-decoration: none;
color: white;
line-height: 30px;
font-size: 14px;
width: 14px;
margin: 0 -2px;
}
/*=============/Polar type questions CSS end/==============*/
/*=============/Upload File type questions CSS start/==============*/
.quiz_theme_qsm-theme-fortune .fortune-file-upload-container {
border: 2px dashed var(--fortune-option-background-color);
padding: 20px;
text-align: center;
background: #eae9ef;
color: var(--fortune-font-color);
cursor: pointer;
}
.quiz_theme_qsm-theme-fortune .fortune-file-upload-container:hover {
border-color: var(--fortune-theme-color-bg);
background: var(--fortune-option-background-color);
color: var(--fortune-option-color);
}
/*=============/Upload File type questions CSS end/==============*/
/*=============/Timer CSS start/==============*/
.quiz_theme_qsm-theme-fortune .fortune-timer {
display: grid;
text-align: center;
color: var(--fortune-font-color);
font-weight: 400;
min-width: fit-content;
margin-left: auto;
font-size: 30px;
line-height: 35px;
padding-left: 10px;
min-width: 100px;
}
.quiz_theme_qsm-theme-fortune .fortune-timer-label{
font-size: 14px;
line-height: 15px;
}
/*=============/Timer CSS end/==============*/
/*=============/ Progressbar and pagination CSS start /=============*/
.quiz_theme_qsm-theme-fortune .fortune-pagination-text {
color: var(--fortune-progressbar-text);
background: #FFFFFF;
border-radius: 100px;
padding: 2px 8px;
position: absolute;
left: 5px;
z-index: 9999;
width: max-content;
font-size: 14px;
border: 1px solid rgba(40, 39, 96, 0.06);
filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.12));
}
.qsm-theme-fortune-header{
margin-bottom: 30px;
display: flex;
width: 100%;
justify-content: space-between;
margin-top: 15px;
align-items: center;
}
.qsm-theme-fortune-header .fortune-page {
color: var(--fortune-font-color);
font-weight: 600;
font-size: 14px;
}
.quiz_theme_qsm-theme-fortune .qsm-theme-fortune-header .fortune-progress-bar .qsm-progress-bar path:last-child {
stroke: var(--fortune-progressbar-color);
}
.quiz_theme_qsm-theme-fortune .qsm-theme-fortune-header .fortune-progress-bar .qsm-progress-bar svg {
border-radius: 10px;
display: block;
margin-top: 30px;
}
.quiz_theme_qsm-theme-fortune .qsm-theme-fortune-header .fortune-progress-bar {
display: inline-flex;
position: relative;
margin: 0 10px;
max-width: 563px;
margin-left: auto;
align-items: center;
width: 100%;
height: 6px;
}
.quiz_theme_qsm-theme-fortune .qsm-theme-fortune-header .qsm-progress-bar {
flex-grow: unset;
width: 100%;
height: 100%;
padding-bottom: 59px;
box-sizing: unset;
}
.progressbar-text {
display: none;
}
/*=============/ Progressbar and pagination CSS start /=============*/
/*========================/ Feature image css start /==============================*/
img.qsm-fortune-featured-image {
max-width: 100%;
}
@media screen and (min-width: 650px) {
img.qsm-fortune-featured-image {
margin-left: 15px;
margin-right: 15px;
}
.qsm-quiz-container.quiz_theme_qsm-theme-fortune.fortune-feature-image-added{
display: flow-root;
}
.quiz_theme_qsm-theme-fortune.fortune-feature-image-added .fortune-featured-image-container {
max-width: calc(40% - 30px);
float: right;
margin-top: 15px;
padding-right: 15px;
}
.quiz_theme_qsm-theme-fortune.fortune-feature-image-added .qsm-quiz-form .qsm-page,
.quiz_theme_qsm-theme-fortune.fortune-feature-image-added .qsm-quiz-form .qsm-auto-page-row{
width: 60%;
padding-left: 10px;
display: inline-block;
margin-top: 15px;
}
}
/*========================/ Feature image css end /==============================*/
/*============= / Responsive CSS start/ ===================*/
@media screen and (min-width: 920px) {
.quiz_theme_qsm-theme-fortune.fortune-feature-image-added .qsm-quiz-form .qsm-page,
.quiz_theme_qsm-theme-fortune.fortune-feature-image-added .qsm-quiz-form .qsm-auto-page-row{
width: 55%;
padding-left: 40px;
}
.quiz_theme_qsm-theme-fortune:not(.fortune-feature-image-added) .qsm-quiz-form .qsm-page,
.quiz_theme_qsm-theme-fortune:not(.fortune-feature-image-added) .qsm-quiz-form .qsm-auto-page-row{
padding-left: 40px;
padding-right: 40px;
}
.quiz_theme_qsm-theme-fortune.fortune-feature-image-added .fortune-featured-image-container {
max-width: calc(45% - 85px);
padding-right: 45px;
}
.quiz_theme_qsm-theme-fortune.qmn_quiz_container .qmn_pagination {
padding: 0 40px;
margin: 0 0 40px;
}
}
@media screen and (max-width: 649px) {
.qsm-quiz-container.quiz_theme_qsm-theme-fortune .qmn_multiple_horizontal_check .mlw_horizontal_multiple, .quiz_theme_qsm-theme-fortune .qsm-results-page .qmn_image_option,
.qsm-quiz-container.quiz_theme_qsm-theme-fortune .quiz_section .qmn_image_option {
width: 100%;
}
.quiz-theme-qsm-theme-fortune-parent{
padding: 10px;
line-height: 20px;
}
.quiz_theme_qsm-theme-fortune .quiz_section .qsm-input-label-fortune .qsm-fortune-points {
padding: 5px;
min-width: 35px;
min-height: 35px;
}
.quiz_theme_qsm-theme-fortune .fortune-timer{
font-size: 18px;
min-width: 65px;
}
.quiz_theme_qsm-theme-fortune .fortune-timer-label {
font-size: 10px;
line-height: 10px;
}
.quiz_theme_qsm-theme-fortune .qsm-theme-fortune-header .fortune-progress-bar{
order: 3;
margin-top: 24px;
margin-left: 25px;
}
.qsm-theme-fortune-header{
flex-wrap: wrap;
}
body div .quiz-theme-qsm-theme-fortune-parent{
padding: 10px;
}
.quiz_theme_qsm-theme-fortune .left-polar-title,
.quiz_theme_qsm-theme-fortune .right-polar-title {
width: calc(50% - 18px) !important;
}
.quiz_theme_qsm-theme-fortune.qmn_quiz_container .qsm-theme-fortune-header .fortune-previous-btn {
display: inline-flex;
text-align: center;
border: 1px solid var(--fortune-button-color);
background: transparent;
color: var(--fortune-button-color);
font-size: 16px;
padding: 0px 18px;
border-radius: 50px;
align-items: center;
cursor: pointer;
height: 44px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
}
}
/*============= / Responsive CSS End/ ===================*/