/* COLORS */
:root {
    --color-text: #323232;
    --color-blue: #0076FF;
    --color-green: #44DB5E;
    --color-red: #FF3824;
    --color-orange: #FF9600;
    --color-gray-mid: #AAAAAA;
    --color-gray-medium: #CCCCCC;
    --color-gray-light: #E5E5E5;
    --color-gray-super-light: #F3F3F3;
    --font-main: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    /*--font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;*/
}
/* MAIN TAGS */
html , body {
    font-size: 16px;
}
body {
    font-family: var(--font-main);
    color: var(--color-text);
    background-color: #ffffff;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 1.5em;
}

h1, h2, h3, h4 {
    font-weight: normal;
    padding: 0.5em 0 0.5em 0;
    margin: 0;
    line-height: 1.25em;
}
h1 {
    font-size: 1.375em;
}
h2 {
    font-size: 1.125em;
}
h3 {
    font-size: 0.875em;
}
h4 {
    font-size: 1em;
    font-weight: bold;
}
h1.title {
    color: var(--color-blue);
    border-bottom: solid 1px var(--color-blue);
    margin-bottom: 0.5em;
    margin-top: -0.5rem;
}

p {
    padding: 0.5em 0 0.5em 0;
    margin: 0;
}
.mv1 {
    padding: 0;
    margin: 1em 0;
}

a, a:link, a:visited {
    color: var(--color-green);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

table, td, tr, th, img {
    margin: 0;
    padding: 0;
    border: 0;
}

/* LAYOUT UTILS  */
.clb {
    clear: both;
}
.fll {
    float: left;
}
.flr {
    float: right;
}
.tar {
    text-align: right;
}
.dno {
    display: none;
}

.div_hr, .div_hr div, .div_hr_minimal {
    width: 100%;
    clear: both;
}
.div_hr {
    height: 2em;
}
.div_hr div {
    height: 1em;
}
.div_hr div , .div_hr_minimal{
    border-bottom: 1px solid var(--color-gray-light);
}

.compact {
    font-size: 0.875em;
}

/* TEXT COLORS */
.gray{
    color:var(--color-text);
}
.color,
.green , a.green, a.green:link, a.green:visited{
    color: var(--color-green);
}
.blue , a.blue, a.blue:link, a.blue:visited{
    color:var(--color-blue);
}
.orange , a.orange, a.orange:link, a.orange:visited {
    color:var(--color-orange);
}
.red , a.red, a.red:link, a.red:visited {
    color:var(--color-red);
}
.white{
    color:#ffffff;
}
.light{
    color:var(--color-gray-super-light);
}
.bg_light{
    background-color:var(--color-gray-super-light);
}
.mid_gray{
    color:var(--color-gray-mid);
}
.error{
    color:var(--color-red);
}
.italic {
    font-style: italic;
}
.strikethrough {
    text-decoration: line-through;
}
.form_notice_box{
    border-width: 1px;
    border-style: solid;
    padding: 1em;
    margin: 1em 0;
}
.form_notice_box.error{
    background-color: rgba(255, 56, 36, 0.1);
    color: var(--color-red);
    border-color: var(--color-red);
}
.form_notice_box.warning{
    background-color: rgba(255, 150, 0, 0.1);
    color: var(--color-orange);
    border-color: var(--color-orange);
}
.form_notice_box.success{
    background-color: rgba(68, 219, 94, 0.1);
    color: var(--color-green);
    border-color: var(--color-green);
}

/* FORM */
.form_line {
    margin: 1em 0;
}
.form_horizontal {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.5em 0.5em;
    margin: 1em 0;
}
.form_horizontal > .form_line {
    margin: 0;
}
.form_line_float {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-right: 0.5em;
    float: left;
}
.form_line_label {
    /*padding-bottom: 0.2857142857em;*/
    padding-bottom: 0.25em;
}
.form_horizontal > .form_line .form_line_input.has_checkbox {
    padding: 0.25em 0;
}
.form_line_qsubmit {
    padding: 0.5em 0;
}
.form_line_qsubmit ,
.large {
    font-size: 1.125em;
}
.form_line_input.centered {
    text-align: center;
}
.form_line.sticky {
    position: sticky;
    bottom: 0;
    background-color: #ffffff;
    padding: 0.5em 0;
    border-top: solid 1px var(--color-gray-light);
}
.form_line.sticky::before {
    content: '';
    position: absolute;
    top: -1em;
    left: 0;
    right: 0;
    height: 1em;
    background: radial-gradient(ellipse at bottom center, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
}

/* INPUT ELEMENTS */

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 1.5em;
    background: #ffffff url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='4 8 12 16 20 8' stroke='currentColor' stroke-width='2' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E") no-repeat right 0.25em center;
    background-size: 1em;
    height: 2em;
    padding-left: 0.5em;
}
input,
textarea,
select {
    font-family: var(--font-main);
    font-size: 1em;
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select {
    display: block;
    box-sizing: border-box;
    border: 1px solid var(--color-gray-medium);
    margin: 0;
    border-radius: 0.25em;
    color: #000000;
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"]{
    width: 100%;
    padding: 0 0.5em;
    line-height: 2em;
    height: 2em;
    -webkit-appearance: none;
}

input[type="text"].halfwide ,
input[type="number"].halfwide ,
input[type="date"].halfwide {
    display: inline-block;
    width: 50%;
}
input[type="text"].inline_textbox ,
input[type="number"].inline_textbox ,
input[type="date"].inline_textbox {
    display: inline-block;
    width: 12.5em;
}

/* customized checkboxes and radio buttons */
input[type="checkbox"] ,
input[type="radio"] {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 1.5em;
    height: 1.5em;
    border: solid 1px var(--color-gray-medium);
    background-color: #ffffff;
    box-sizing: border-box;
    appearance: none;
    vertical-align: bottom;
}
input[type="checkbox"] {
    border-radius: 0.25em;
}
input[type="radio"] {
    border-radius: 0.75em;
}
input:checked[type="checkbox"] ,
input:checked[type="radio"] {
    border-color: var(--color-green);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}
input:checked[type="checkbox"] {
    background-color: var(--color-green);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}
input:checked[type="radio"] {
    border-width: 0.45em;
}

label {
    display: inline-block;
}
.checkbox_group > label {
    display: flex;
    align-items: flex-start;
    gap: 0.25em;
    overflow-wrap: anywhere;
}
.checkbox_group input[type="checkbox"] {
    flex-shrink: 0;
}
.checkbox_group {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}
.checkbox_group.horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25em 1em;
}

textarea {
    padding: 0.5em;
    line-height: 1.5em;
}
textarea:disabled {
    background-color: var(--color-gray-super-light);
}
.input_textarea {
    width: 100%;
    height: 9.5em;
}
.input_textarea.small {
    height: 4.5em;
}
.input_textarea.large {
    height: 25em;
}
.input_textarea.halfwide {
    width: 50%;
}
.input_textarea.labels {
    width: 42em;
    line-height: 1.25em;
}

.inputs_horizontal {
    display: flex;
    gap: 0.5em;
    align-items: center;
}

.labels_wide_1 label ,
.labels_wide_2 label {
    margin-top: 0.25em;
}
.labels_wide_1 label {
    width: 100px;
}
.labels_wide_2 label {
    width: 180px;
}

/* STRUCTURE */
.input_textarea.editor {
    height: calc(100vh - 30em);
    font-family: monospace;
    white-space: pre;
    padding: 0.5em 0.5em 9.5em;
    /*caret-color: var(--color-red);*/
    border: solid 0.25em var(--color-gray-medium);
    outline: none;
    background-color: var(--color-gray-super-light);
    border-radius: 0;
}
.structure_example {
    font-family: monospace;
    white-space: pre;
    margin: 2em 0;
}
pre.inline {
    display: inline;
    background-color: rgba(68, 219, 94, 0.1)
}


/* BUTTONS */
.btn, a.btn {
    appearance: none;
    color: #ffffff;
    background-color: var(--color-green);
    border: 0;
    cursor: pointer;
    border-radius: 0.4em;
    display: inline-block;
    line-height: 2em;
    padding: 0 1em 0 1em;
    margin: 0 0 0 0;
    box-sizing: border-box;
}
.btn + .btn {
    margin-left: 0.5em;
}
.loading_btn {
    background-color: #ffffff;
    color: var(--color-text);
    padding-left: 2em;
    padding-right: 2em;
    box-shadow: 0 0 0.25em var(--color-gray-medium);
    cursor: auto;
}
.loading_btn > span.icon-loading {
    margin-top: 0.25em;
}

.btn:hover ,
.toggle_btn:hover {
    text-decoration: none;
}

.btn.red, a.btn.red {
    color: #ffffff;
    background-color: var(--color-red);
}
.btn.gray, a.btn.gray {
    color: var(--color-text);
    background-color: var(--color-gray-light);
}
.btn.flr, a.btn.flr {
    margin-right: 0;
    margin-left: 0.5em;
}
.btn.no_margin {
    margin: 0 !important;
}
button.btn {
    font-size: 1rem;
}

.toggle_btn , a.toggle_btn , a.toggle_btn:link , a.toggle_btn:visited {
    display: inline-block;
    border: 1px solid var(--color-gray-light);
    color: var(--color-text);
    background-color: #ffffff;
    padding: 0.25em 0.5em;
    border-radius: 0.4em;
}
a.toggle_btn:hover {
    background-color: var(--color-gray-light);
}
.toggle_btn.active , a.toggle_btn.active , a.toggle_btn.active:link , a.toggle_btn.active:visited , a.toggle_btn.active:hover,
.btn.gray.active {
    color: #ffffff;
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}



/* MAIN MENU */
ul.menu {
    /*clear: both;*/
    width: 100%;
    box-sizing: border-box;
    list-style-type: none;
    margin: 0;
    padding: 3px 0;
    text-align: center;
    /*display: block;*/
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding-inline-start: 0;
}
ul.menu ul {
    padding-inline-start: 2em;
}
ul.menu:not(.vertical) > li {
    position: relative;
}
ul.menu:not(.vertical) > li > ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 100%;
    width: max-content;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
}
ul.menu:not(.vertical) > li:hover > ul {
    display: block;
}
ul.menu:not(.vertical) > li > ul > li {
    display: block;
    margin: 0;
}
ul.menu:not(.vertical) > li > ul > li > a,
ul.menu:not(.vertical) > li > ul > li > a:link,
ul.menu:not(.vertical) > li > ul > li > a:visited {
    border-radius: 0;
    text-align: left;
    white-space: nowrap;
}
ul.menu:not(.vertical) > li > ul > li + li > a {
    border-top-width: 0;
}
ul.menu li {
    display: inline-block;
    margin: 2px 0 2px -1px;
    padding: 0;
}
ul.menu a, ul.menu a:link, ul.menu a:visited ,
.menu_btn, a.menu_btn, a.menu_btn:link, a.menu_btn:visited {
    color: var(--color-text);
    display: block;
    /*display: inline-block;*/
    font-size: 14px;
    line-height: 20px;
    padding: 5px 10px 4px 10px;
    background-color: #ffffff;
    border-style: solid;
    border-width: 1px;
    border-color: var(--color-gray-light);
}
ul.menu a:hover , .menu_btn:hover, a.menu_btn:hover{
    text-decoration: none;
    background-color: var(--color-gray-light);
}
ul.menu a.active ,
ul.menu a.active:hover ,
.menu_btn.blue , a.menu_btn.blue , .menu_btn.blue:hover , a.menu_btn.blue:hover {
    color: #ffffff;
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}
ul.menu a.disabled ,
ul.menu a.disabled:hover {
    color: var(--color-gray-mid);
    background-color: var(--color-gray-super-light);
    cursor: auto;
}
ul.menu a.green ,
ul.menu a.green:hover  ,
.menu_btn.green , a.menu_btn.green , .menu_btn.green:hover , a.menu_btn.green:hover {
    color: #ffffff;
    background-color: var(--color-green);
    border-color: var(--color-green);
}
ul.menu li:first-child a ,
ul.menu li.menu_separator + li a {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
ul.menu > li:last-child > a ,
ul.menu > li.pre_separator > a {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.menu_btn, a.menu_btn, a.menu_btn:link, a.menu_btn:visited {
    border-radius: 5px;
}

ul.menu.chipped > li {
    margin-left: 2px;
    margin-right: 2px;
}
ul.menu.chipped > li a {
    border-radius: 5px;
}
ul.menu a .icon {
    font-size: 12px;
}

.menu_separator {
    flex-grow: 1;
}

.main_menu_container {
    /*border-bottom:1px solid var(--color-gray-light);*/
    margin-top: -49px;
}
.main_menu_container > div {
    width: 960px;
    margin: 0 auto;
    padding-top: 4px;
    padding-bottom: 4px;
}

ul.menu.tab_menu{
    border-bottom: 5px solid var(--color-blue);
    margin-bottom: 1em;
    padding-bottom: 0;
}
ul.menu.tab_menu li {
    margin: 5px 2px 0 2px;
}
ul.menu.tab_menu a ,
ul.menu.tab_menu > li:first-child > a ,
ul.menu.tab_menu > li:last-child > a {
    border-radius: 5px 5px 0 0;
    border-bottom-width: 0;
}

ul.menu.vertical {
    flex-wrap: unset;
    display: block;
}
ul.menu.vertical li {
    display: block;
}
ul.menu.vertical li a {
    border-radius: 5px;
    text-align: left;
}
ul.menu.vertical.tree ,
ul.menu.vertical.tree ul ,
ul.menu.vertical.tree li {
    position: relative;
}
ul.menu.vertical.tree ul li:before {
    content: "";
    display: block;
    float: left;
    height: 1em;
    width: 1em;
    margin-left: -1em;
    border-bottom: dotted 2px var(--color-gray-mid);
}
ul.menu.vertical.tree ul:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 1em;
    left: 1em;
    width: 1em;
    border-left: dotted 2px var(--color-gray-mid);
}

.popup_menu {
    position: relative;
    display: inline-block;
}
.popup_menu_label {
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    padding: 5px 10px 4px 10px;
    background-color: #ffffff;
    border: 1px solid var(--color-gray-light);
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
}
.popup_menu:hover .popup_menu_label {
    background-color: var(--color-gray-light);
}
.popup_menu > ul.menu.popup_menu_list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    min-width: 100%;
    width: max-content;
    padding: 4px;
    background-color: #ffffff;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
}
.popup_menu:hover > ul.menu.popup_menu_list {
    display: block;
}
ul.menu.popup_menu_list li {
    margin: 0;
}
ul.menu.popup_menu_list li a,
ul.menu.popup_menu_list > li:first-child > a,
ul.menu.popup_menu_list > li:last-child > a,
ul.menu.popup_menu_list > li.pre_separator > a {
    border-radius: 0;
}
ul.menu.popup_menu_list li + li > a {
    border-top-width: 0;
}

.collapsible_menu_toggle {
    display: none;
    font-size: 20px;
    background: none;
    color: var(--color-text);
    cursor: pointer;
    padding: 0 10px;
    border: 1px solid var(--color-gray-light);
    border-radius: 5px;
    margin-top: 4px;
    box-sizing: border-box;
    height: 32px;
}

@media (max-width: 990px) {
    .collapsible_menu_toggle {
        display: inline-block;
    }
    ul.menu.collapsible {
        position: absolute;
        left: 0;
        padding: 8px;
        background: #ffffff;
        z-index: 9999;
        display: none;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
        text-align: right;
    }
    ul.menu.collapsible.active {
        display: block;
    }
    ul.menu.collapsible li {
        display: block;
        margin: -1px 0 0 0;
    }
    ul.menu.collapsible li a , ul.menu li.menu_separator + li a {
        border-radius: 0;
    }
}
@media (max-width: 1070px) {
    .main_menu_container .menu_separator {
        display: none;
    }
    .main_menu_container > div {
        width: auto;
        float: right;
        margin-right: -12px;
    }
}

ul.menu a img {
    height: 16px;
    vertical-align: text-bottom;
}

/* SITE */
.site {
    width: 960px;
    box-sizing: border-box;
    margin: 0 auto;
}
body.centered_big .site {
    max-width: 20em;
    padding-top: 1em;
    padding-bottom: 1em;
}
@media only screen and (max-width: 980px) {
    .site {
        width: 100%;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }
}

/* SITE HEADER */
#header {
    clear: both;
    width: 100%;
    border-bottom: solid 1px var(--color-gray-light);
}

#logo {
    display: block;
    float: left;
    margin: 8px 0 8px 8px;
    width: 32px;
    height: 32px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.logo_myiyo {
    background-image: url(img/logo.png);
}
.logo_moweb {
    background-image: url(img/logo_moweb.png);
}


#header_title {
    font-size: 16px;
    line-height: 1.25em;
    padding: 14px 0;
    display:none;
    float:right;
}
@media only screen and (min-width: 1400px) {
    #header_title {
        display:block;
    }
}


/* PROGRESS BAR */
#progress_container {
    float: right;
    padding: 20px 20px 20px 0;
}
.progress_pipe {
    width: 250px;
    height: 8px;
    border-radius: 4px;
    background-color: var(--color-gray-light);
    clear: both;
}
.progress_pipe > div {
    float:left;
    background-color: var(--color-green);
    height: 8px;
    border-radius: 4px;
}
.progress_pipe_text {
    display: block;
    width: 256px;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    clear: both;
    padding-top: 0;
    padding-bottom: 0;
}



/* SITE CONTENT */
.content {
    clear: both;
    padding: 0.5em 0 0.5em 0;
    text-align: left;
    /* setting min-height so the optional footer is pushed to the bottom */
    min-height: calc(100vh - 153px);
}

.secondary_menu {
    float: right;
    margin-top: -3px;
}


/* SITE FOOTER */
#footer {
    margin-top: 2em;
    padding: 1em 1em 0 1em;
    min-height: 3.5em;
    text-align: center;
    box-sizing: border-box;
    border-top: solid 1px var(--color-gray-light);
}


/* DICTIONARY */
.dic_text {
    float: left;
    box-sizing: border-box;
    width: 50%;
    padding-right: 1em;
    white-space: pre-wrap;
}
.dic_var_box {
    float: left;
    width: 25%;
    /*line-height: 20px;*/
    margin-top: 1px;
    padding-top: 0.5em;
    padding-right: 0.5em;
    box-sizing: border-box;
    text-align: right;
    white-space: nowrap;
    overflow-x: hidden;
}
.dic_input_box {
    float: left;
    width: 75%;
}

.side_labels_text_area_wrapper {
    display: grid;
    grid-template-columns: 1fr 3fr;
    /*gap: 1em;*/

}
.side_labels_text_area_wrapper .side_labels {
    padding-top: 0.5em;
    padding-right: 0.5em;
    box-sizing: border-box;
    text-align: right;
    white-space: nowrap;
    overflow-x: hidden;
    background-color: var(--color-gray-super-light);
    border-radius: 0.25em 0 0 0.25em;
    border-width: 1px 0 1px 1px;
    border-style: solid;
    border-color: var(--color-gray-light);
}
.no_wrap_textarea {
    white-space: nowrap;
    overflow: auto;
}
.with_html_box {
    margin-bottom: 3.5em;
}

.dic_text_row {
    display: grid;
    gap: 1em;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}
.dic_text_row > div {
    box-sizing: border-box;
    padding: 0.5em 0 0.5em 0;
    white-space: pre-wrap;
}
.dic_text_row .input_textarea {
    height: revert;
}

/* QUESTIONS */
.q_content {
    padding: 1em 0 1em 0;
    clear: both;
}

.interview_table, .question {
    width: 100%;
}

.question {
    padding: 1em 0 1em 0;
    /*line-height: 1.25em;*/
}

.interview_table {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: var(--color-gray-light);
}

tr.indented_line .checkbox_space {
    margin-left: 2em;
    margin-right: -2em;
}
tr.indented_line .item_label {
    margin-left: 2em;
}
.item_label > label {
    display:block;
}

tr.hover_line:hover, .hover_line_gray {
    background-color: #f9f9f9;
}

.highlight_line {
    background-color: #ffefab;
}

.interview_cell_bot {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--color-gray-light);
}

.interview_cell_bot_left {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--color-gray-light);
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: var(--color-gray-light);
}

.interview_cell_bot_right {
    border-bottom-width: 1px;
    border-right-width: 1px;
    border-bottom-style: solid;
    border-right-style: solid;
    border-bottom-color: var(--color-gray-light);
    border-right-color: var(--color-gray-light);
}
.image_cell {
    width: 200px;
}
.image_cell img,
.img_max_100 {
    max-width: 100%;
}

.numeral {
    font-size: 0.75em;
    color: var(--color-gray-medium);
}
.interview_cell_bot_numeral ,
.interview_cell_bot.numeral ,
.interview_cell_bot_left.numeral ,
.interview_cell_bot_right.numeral {
    vertical-align: middle;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--color-gray-light);
    padding-right: 0.5em;
    width: 0;
}
.slider_numeral {
    display: block;
    margin-top: -1.5em;
}

.stats_container .interview_table ,
.stats_container .interview_cell_bot ,
.stats_container .interview_cell_bot_left ,
.stats_container .interview_cell_bot_right ,
.stats_container .interview_cell_bot_numeral ,
.stats_container .numeral
{
    border-color: var(--color-gray-mid);
}
.stats_container .interview_table {
    border-style: solid;
    border-width: 1px 1px 1px 1px;
}

.interview_cell, .interview_cell_bot, .interview_cell_bot_left, .interview_cell_bot_right {
    padding: 0.5em 1px 0.5em 1px;
}
.simple_table {
    width: auto;
    padding: 0;
    border-spacing: 0;
    border-collapse: separate;
    border-color: var(--color-gray-light);
    border-style: solid;
    border-width: 1px 0 0 1px;
}
.simple_table tr, .simple_table td, .simple_table th {
    padding: 0.5em;
    border-color: var(--color-gray-light);
    border-style: solid;
    border-width: 0 1px 1px 0;
}
.simple_table th {
    font-weight: bold;
    text-align: left;
}
.simple_table.min_width_cells td {
    min-width: 6em;
}
tr.simple_table_head_row > td {
    font-weight: bold;
    background-color: var(--color-gray-super-light);
}

.outline_box {
    border: solid 1px var(--color-gray-light);
    padding: 0 1em;
    margin: 1em 0;
    border-radius: 0.5em;
    /*box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.1);*/
}
.outline_box > .secondary_menu {
    margin-top: calc(1em - 5px);
}
.outline_box > h2 ,
.outline_box > p {
    margin: 1em 0;
    padding: 0;
}

.scale_head_cell {
    font-size: 1.5em;
    color: var(--color-gray-mid);
}

/* CUSTOM RADIOBUTTON AND CHECKBOX */
.rb_cell {
    padding-left: 0;
    padding-right: 0;
    width: 0;
    line-height: 1.5em;
}
.radiobtn_space {
    width: 1.5em;
    height: 1.5em;
    margin: 0 auto;
}
.checkbox_space {
    width: 1.5em;
    height: 1.5em;
}
.rb_cell .checkbox_space ,
.rb_cell .radiobtn_space {
    padding-right: 0.25em;
}

.imgradiobtn {
    box-sizing: border-box;
    width: 1.5em;
    height: 1.5em;
    border-radius: 0.75em;
    border: solid 1px var(--color-gray-medium);
    background-color: #ffffff;
    display: block;
    cursor: pointer;
}
.imgradiobtn.checked {
    border: solid 0.4375em var(--color-green);
}
.radiobtn_space.scale {
    width: 2em;
    height: 2em;
    display: inline-block;
}
.radiobtn_space.scale .imgradiobtn {
    width: 2em;
    height: 2em;
    line-height: 1.9em;
    border-radius: 1em;
    display: inline-block;
}
.radiobtn_space.scale .imgradiobtn.checked {
    width: 2em;
    height: 2em;
    border: solid 1px var(--color-green);
    background-color: var(--color-green);
    color: #ffffff;
}
.radiobtn_space.textscale {
    width: auto;
    height: auto;
    display: block;
    padding: 0 0.125em 0 0.125em;
}
.radiobtn_space.textscale .imgradiobtn {
    width: auto;
    height: auto;
    line-height: 1.5em;
    padding: 0.25em;
    display: block;
}
.radiobtn_space.textscale .imgradiobtn.checked {
    width: auto;
    height: auto;
    border: solid 1px var(--color-green);
    background-color: var(--color-green);
    color: #ffffff;
}

/* hide the regular radio button */
.radiobtn_space input[type="radio"] {
    display: none;
}



/* SLIDER */
.slider_container {
    width: 100%;
    display: flex;
}
.slider_control {
    flex: 1;
    padding-top: 0.5em;
    padding-right: 0.5em;
}
.slider_indicator , .slider_unit {
    flex: 0 0 auto;
    padding-left: 0.25em;
}
.slider_unit {
    line-height: 2em;
}
.slider_indicator > input , .slider_indicator > div {
    width: 2.5em;
}
.slider_indicator > input[type="text"] {
    padding-left:0;
    padding-right:0;
    text-align: center;
}
.slider_label_left, .slider_label_right {
    width: 50%;
    float: left;
    box-sizing: border-box;
}
.slider_label_left {
    padding-right: 0.25em;
}
.slider_label_right {
    padding-left: 0.25em;
}
.slider_label_right {
    text-align: right;
}
.slider_label_left_right {
    width: 50%;
    float: left;
    padding-right: 3em;
    box-sizing: border-box;
}

.ui-widget-header {
    background-image: none;
    background-color: var(--color-green);
}
.ui-slider-horizontal {
    height: 0.875em;
}
.ui-slider-horizontal .ui-slider-range {
    height: 0.875em;
    line-height: 0.875em;
    font-size: 1em;
    /*font-size: 6px;*/
}
.ui-corner-all {
    border-radius: 0.5em;
}
.ui-slider-range-min {
    border-top-left-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
}
.ui-widget ,
.ui-widget input {
    font-family: var(--font-main);
}
.ui-widget , .ui-slider-handle {
    font-size: 1em;
}
.ui-slider .ui-slider-handle {
    width: 1.5em;
    height: 1.5em;
    box-sizing: border-box;
}
.ui-slider-horizontal .ui-slider-handle {
    top: -.4em;
    margin-left: -.75em;
}

.ui-autocomplete.ui-widget-content.ui-corner-all {
    background-color: white;
    background-image: none;
    border-radius: 0;
}
.ui-autocomplete.ui-widget-content.ui-corner-all .ui-state-hover{
    background-color: var(--color-blue);
    background-image: none;
    border-radius: 0;
    color: white;
    border-color: white;
}

/* SHELF */
.shelf_items_container ,
.shelf_droppables_container {
    float: left;
    text-align: left;
    background-color: var(--color-gray-light);
    border-radius: 0.5em;
    padding: 0.5em 0 0 0.5em;
    margin: 0 0.5em 0.5em 0;
}
.shelf_slot {
    padding: 0 0.5em 0.5em 0;
}
.shelf_draggable {
    background-color: var(--color-gray-super-light);
    border-radius: 0.25em;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.shelf_draggable img {
    display: block;
    width: calc(100% - 0.5em);
    margin-bottom: 0.25em;
}
.shelf_draggable_label {
    width: 100%;
    line-height: 1.25em;
    text-align: center;
}
.shelf_droppable {
    background-color: #ffffff;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 0.25em;
}
.shelf_droppable_hover {
    background-color: var(--color-green);
}
.shelf_droppable_label {
    text-align: center;
    width: 100%;
    height: 100%;
    font-size: 1.25em;
    font-weight: bold;
    color: var(--color-gray-mid);
    display: flex;
    justify-content: center;
    align-items: center;
}
.shelf_draggable_num {
    display: none;
}
.shelf_zoom_btn, a.shelf_zoom_btn, a.shelf_zoom_btn:link {
    display:block;
    height:18px;
    margin-top:-27px;
    padding-right:5px;
    padding-bottom:5px;
    text-align:right;
}

/* SHELFSCALE */
.shelfscale_small_box {
    float: left;
    text-align: center;
    padding: 10px 10px 5px 10px;
    margin-bottom: 20px;
}

.shelfscale_small_box p {
    padding: 5px 0 0 0;
    margin: 0;
}

.shelfscale_large_box {
    padding: 9px;
    border: 1px solid var(--color-gray-light);
    background-color: #ffffff;
    position: absolute;
    display: none;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}


/* SHELFSCALE */
.shelfscale_small_box {
    float: left;
    text-align: center;
    padding: 10px 10px 5px 10px;
    margin-bottom: 20px;
}

.shelfscale_small_box p {
    padding: 5px 0 0 0;
    margin: 0;
}

.shelfscale_large_box {
    padding: 9px;
    border: 1px solid var(--color-gray-light);
    background-color: #ffffff;
    position: absolute;
    display: none;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

/* SHELFIMAGE */
.shelf_selected{
    background-color: var(--color-green);
    color:#ffffff;
}

/* HOTSPOT */
.hotspot {
    position: absolute;
}
.hotspot_dragable {
    display: none;
    width: 50px;
    height: 50px;
}
.hotspot_circle {
    position: relative;
}
.hotspot_spot {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border-radius: 25px;
}
.hotspot_green {
    border: solid 1px var(--color-green);
    background-color: rgba(68, 219, 94, 0.5);
}
.hotspot_red {
    border: solid 1px var(--color-red);
    background-color: rgba(255, 56, 36, 0.5);
}
.hotspot_blue {
    border: solid 1px var(--color-blue);
    background-color: rgba(0, 118, 255, 0.5);
}
.hotspot_spot::before,
.hotspot_spot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 1px;
}
.hotspot_green::before,
.hotspot_green::after {
    background-color: var(--color-green);
}
.hotspot_red::before,
.hotspot_red::after {
    background-color: var(--color-red);
}
.hotspot_blue::before,
.hotspot_blue::after {
    background-color: var(--color-blue);
}
.hotspot_spot::before,
.hotspot_spot::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.hotspot_spot::after,
.hotspot_spot::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

#hotspot_image {
    margin-bottom: 2em;
}

.popup_comment {
    position: relative;
    top: -0.0rem;
    left: -6.0rem;
    width: 15rem;
    box-sizing: border-box;
    border-radius: 0.5em;
    background-color: #ffffff;
    border: 1px solid var(--color-gray-light);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    background-repeat: no-repeat;
    font-size: 0.8em;
    padding: 0.5em;
}
.popup_comment .scale_values {
    width: 100%;
}
.popup_comment_head {
    height: 1.5rem;
    width: 100%;
}
.popup_delete_button {
    text-align: center;
    padding-top: 0.5em;
}
.popup_close {
    float: right;
    cursor: pointer;
    padding: 4px 4px;
    margin-top: -4px;
    margin-right: -4px;
    /*line-height: 26px;*/
}
.popup_input_area {
    border: 1px solid var(--color-gray-medium);
    padding: 0.25rem;
    margin: 0;
    width: 100%;
    height: 5.2rem;
    font-size: 0.8rem;
    overflow: auto;
}

/* SCALE (new) */
.scale_group {
    border-top: 1px solid var(--color-gray-light);
}
.scale_row {
    border-bottom: 1px solid var(--color-gray-light);
    clear:both;
}
.scale_label {
    width: 50%;
    float: left;
    padding: 0.5em 0;
}
.scale_values {
    width: 50%;
    float: left;
    padding: 3px 0;
}

.scale_values > div {
    float: left;
    text-align: center;
    padding: 5px 2px 5px 2px;
    box-sizing: border-box;
}

.scale_values > div.dk_col {
    border-left: solid 1px var(--color-gray-light);
    box-sizing: border-box;
    font-style: italic;
}

.scale_values.split2 > div{
    width: 50%;
}
.scale_values.split3 > div{
    width: 33.33%;
}
.scale_values.split4 > div{
    width: 25%;
}
.scale_values.split5 > div{
    width: 20%;
}
.scale_values.split6 > div{
    width: 16.66%;
}
.scale_values.split7 > div{
    width: 14.28%;
}
.scale_values.split8 > div{
    width: 12.5%;
}
.scale_values.split9 > div{
    width: 11.11%;
}
.scale_values.split10 > div{
    width: 10%;
}
.scale_values.split11 > div{
    width: 9.09%;
}
.scale_values select {
    width: 100%;
}
.scale_extra_labels {
    float: right;
    width: 50%;
}
.scale_extra_labels > div {
    width: 50%;
    float: left;
    padding: 10px 5px;
    text-align: right;
    box-sizing: border-box;
}
.scale_extra_labels > div.dk_col {
    text-align: center;
    border-left: solid 1px var(--color-gray-light);
    box-sizing: border-box;
}
.scale_extra_labels > div:first-child {
    text-align: left;
}
.scale_group.no_labels .scale_label {
    display: none;
}
.scale_group.no_labels .scale_values ,
.scale_group.no_labels .scale_extra_labels {
    width: 100%;
}
.scale_extra_labels_per_value {
    padding-left: 50%;
}
.scale_sticky_header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #ffffff;
}
.scale_bipolar_left {
    float: left;
    text-align: left;
    width: 50%;
    padding-right:2px;
    box-sizing: border-box;
}
.scale_bipolar_right {
    float: left;
    width: 50%;
    padding-left: 2px;
    text-align: right;
    box-sizing: border-box;
}

.scale_label img {
    max-width: 100%;
}

/* SCALE ANIMATED */
.scale_item {
    width: 540px;
    height: 280px;
    display: inline;
    float: left;
    margin-right: 50px;
    box-sizing: border-box;
    border: 1px solid var(--color-gray-light);
    border-radius: 30px;
}

.scale_item table {
    height: 100%;
    width: 100%;
    text-align: center;
}

.scale_item table td {
    border: 0 solid black;
}

.scale_item table td.clicks {
    height: 80px;
}

.scale_item_image {
    float: right;
    height: 150px;
    width: 150px;
    padding: 10px;
    margin: 20px 20px 10px 10px;
    background-color: var(--color-gray-light);
    border-radius: 10px;
}

.scale_item_image div {
    height: 150px;
    width: 150px;
}

.scale_item table td.item_txt {
    height: 200px;
}

.scale_item .item_txt_label {
    text-align: left;
    padding-left: 20px;
    padding-top: 20px;
    height: 180px;
    font-size: 16px;
}

.scale_item table td .scale_helper {
    height: 25px;
    padding-left: 20px;
    padding-right: 20px;
}
#go_left, #go_right {
    height: 50px;
    width: 50px;
    position: absolute;
    cursor: pointer;
    top: 130px;
}
#go_left {
    left: 155px;
    z-index: 500;
    background: url(img/item_prev_inactive.png) left top no-repeat;
}
#go_right {
    right: 165px;
    z-index: 600;
    background: url(img/item_next_inactive.png) left top no-repeat;
}
#sidefader_left {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px; /*100%;*/
    height: 310px;
    z-index: 300;
    background: url(img/item_fade_left.png) left repeat-y;
    border: 0 solid orange;
}
#sidefader_right {
    width: 170px; /*100%;*/
    height: 310px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 400;
    background: url(img/item_fade_right.png) right repeat-y;
    border: 0 solid maroon;
}
#itemizer {
    min-height: 310px;
    height: auto;
    border: 0 solid green;
    width: 10000000px; /*10px smaller than wrapper*/
    left: 200px;
    text-align: left;
    position: absolute;
    top: 10px;
}
#pos_itemizer {
    border: 0 solid green;
    position: relative;
    height: 300px;
    width: 960px;
    margin-left: -30px;
    overflow: hidden;
}

/* SCALE AND MATRIX */

.scale_group .checkbox_space {
    margin: 0 auto;
}

.scale_item_segment_headline {
    padding: 0.5em 0;
    border-bottom: solid 1px var(--color-gray-light);
    font-weight: bold;
}

.vertical_values .scale_values > div {
    width: 100%;
}
.vertical_values .radiobtn_space,
.vertical_values .checkbox_space
{
    float: left;
    margin-right: 0.5em;
}
.vertical_values .scale_values > div {
    text-align: left;
}
.vertical_values .scale_values > div.dk_col {
    border-left-width: 0;
    /*border-top: solid 1px var(--color-gray-light);*/
    margin-bottom: 0.5em;
}

.vertical_dk_value .scale_values > div.dk_col{
    border-left-width: 0;
    width: 100%;
    margin-bottom: 0.5em;
}

tr.scale_first_line .interview_cell_bot_left {
    padding-left:5px;
    padding-right:5px;
}


/* SCALE ONE BY ONE MODE */
.one_by_one {
    min-height: 20em;
}
.one_by_one .scale_label {
    text-align: center;
    min-height: 10em;
}
.one_by_one_item {
    /*display: none;*/
}
.one_by_one_item.active {
    /*display: block;*/
}
.one_by_one_navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-gray-super-light);
    padding: 0.25em;
    border-top: solid 1px var(--color-gray-light);
}
.one_by_one_navigation > * {
    height: 2em;
    line-height: 2em;
}
.one_by_one_navigation > a.btn {
    margin-left: 0.5em;
}

/* SINGLE IMAGE */
.singleimage_items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}
.singleimage_item {
    flex: 0 0 auto;
    box-sizing: border-box;
    background-color: var(--color-gray-light);
    padding: 0.25em;
    text-align: center;
    border-radius: 0.25em;
    cursor: pointer;
}
.singleimage_item.selected {
    background-color: var(--color-green);
}
.singleimage_items img {
    max-width: 100%;
    border: 0;
}
.singleimage_num {
    display:none;
}

.singleimage_items.split1 > div {
    width: 100%;
}
.singleimage_items.split2 > div {
    width: 50%;
}
.singleimage_items.split3 > div {
    width: 33.33%;
}
.singleimage_items.split4 > div {
    width: 25%;
}
.singleimage_items.split5 > div {
    width: 20%;
}
.singleimage_items.split6 > div {
    width: 16.66%;
}
.singleimage_items.split7 > div {
    width: 14.28%;
}
.singleimage_items.split8 > div {
    width: 12.5%;
}
.singleimage_items.split9 > div {
    width: 11.11%;
}
.singleimage_items.split10 > div {
    width: 10%;
}
.singleimage_items.split11 > div {
    width: 9.09%;
}


/* ORDER ITEMS */
.order_items > div {
    border: solid 1px var(--color-gray-light);
    padding: 0.5em;
    margin: 0.5em 0;
}
.order_item_label {
    padding-right: 4em;
}
.order_item_controls {
    float: right;
    width: 4em;
}
.order_item_controls a {
    display: inline-block;
    background-color: var(--color-green);
    border-radius: 1em;
    height: 2em;
    width: 2em;
    background-size: 100% 100%;
}
.order_item_control_up {
    background-image: url("img/arrow_up.png");
}
.order_item_control_down {
    background-image: url("img/arrow_down.png");
}

/* RANKING */
#rank_instruction_box {
    background-color: #ffefab;
    padding: 0.5em;
    margin: 0.5em 0;
    line-height: 2em;
    /* remove if you want to display the instruction box */
    display:none;
}
#rank_instruction_box.finished {
    background-color: #c2f4ca;
}
#rank_instruction_box .rank_instruction_unfinished {
    display:inline;
}
#rank_instruction_box.finished .rank_instruction_unfinished {
    display:none;
}
#rank_instruction_box .rank_instruction_finished {
    display:none;
}
#rank_instruction_box.finished .rank_instruction_finished {
    display:inline;
}
ul.rank_progress_bar {
    clear: both;
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul.rank_progress_bar > li {
    margin: 0 0.25em 0.25em 0;
    padding: 0;
    display: inline-block;
    width: 2em;
    line-height: 2em;
    text-align: center;
    background-color: #ffffff;
    border-radius: 0.25em;
}
ul.rank_progress_bar > li.done {
    background-color: var(--color-blue);
    color: #ffffff;
}
ul.rank_progress_bar > li.active {
    background-color: var(--color-green);
    color: #ffffff;
}
ul.rank_progress_bar > li.rank_progress_bar_finished {
    display: none;
    background-image: url("img/checkmark_2x.png");
    background-position: center right;
    background-color: var(--color-green);
    background-size: auto 100%;
}
#rank_instruction_box.finished ul.rank_progress_bar > li.rank_progress_bar_finished {
    display: inline-block;
}
.rank_items.split2, .rank_items.split3 {
    margin-right: -0.5em;
}
.rank_items > div {
    /*height: 75px;*/
    box-sizing: border-box;
    padding: 0.25em 0;
}
.rank_items.split2 > div,
.rank_items.split3 > div {
    float: left;
    padding-right: 0.5em;
}
.rank_items.split2 > div{
    width: 50%;
}
.rank_items.split3 > div {
    width: 33.33%;
}
.rank_items.split4 > div {
    width: 25%;
}
.rank_items .rank_item_label {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 2.75em;
    border: solid 1px var(--color-gray-light);
    border-radius: 4px;
    background-color: #ffffff;
    /* room on the right for the rank indicator */
    padding: 0.5em 3em 0.5em 0.5em;
}
.rank_items .rank_item_indicator {
    position: absolute;
    top: 50%;
    right: 0.5em;
    margin-top: -0.875em;
    width: 1.75em;
    height: 1.75em;
    line-height: 1.75em;
    text-align: center;
    border-radius: 4px;
    background-color: var(--color-gray-light);
    color: #ffffff;
    font-weight: bold;
}
.rank_items > div.selected .rank_item_label {
    background-color: var(--color-gray-light);
}
.rank_items > div.selected .rank_item_indicator {
    background-color: var(--color-blue);
}
.rank_items > div.rank_item_moving {
    position: relative;
    z-index: 3;
}

/* MULTIMULTI VERTI */
.multimultiv_item_text {
    font-size: 16px;
    padding: 5px 0;
}
.multimultiv_option {
    padding: 5px 0;
}
.multimultiv_checkbox{
    position: absolute;
}
.multimultiv_label{
    padding: 3px 5px 5px 35px;
}

/* NESTED STATS */
.nested_quota_column {
    width: 270px;
    padding-right: 20px;
    float: left;
}
.nested_quota {
    border-style: solid;
    border-color: var(--color-gray-light);
    border-width: 1px;
    padding: 10px;
    margin-top: 5px;
    clear: both;
    font-size: 12px;
}
.nested_target, .nested_done {
    float: right;
    width: 40px;
    text-align: right;
}
.nested_target {
    color: var(--color-gray-mid);
}
.nested_quota .nested_quota, .nested_quota .nested_quota .nested_quota .nested_quota {
    background-color: var(--color-gray-super-light);
}
.nested_quota .nested_quota .nested_quota {
    background-color: #ffffff;
}
.nested_quota_full {
    border-color: var(--color-red);
}

/* FINISHED PAGE */
.finished_image, .finished_text {
    width: 50%;
    float: left;
}
.finished_image img {
    width: 100%;
}
.finished_text {
    margin-top: 2em;
}

/* LARGE IMAGE */
.question_image {
    padding: 1em 0 1em 0;
    text-align: center;
}
.question_image img {
    max-width: 100%;
}


/* FLAT VIEW MODS */
.flat_view h3 {
    font-size: 1.25rem;
    line-height: 1.25rem;
    color: var(--color-green);
}
.flat_view h3 em {
    font-size: 1.0rem;
}


/* VIDEO (scaling the video inside to keep a 16:9 ratio) */
.video_wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}
.video_wrapper > video,
.video_wrapper > iframe,
.video_wrapper > object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* LIGHTBOX */
#blackout{
    display:none;
    position:fixed;
    z-index:1002;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color: rgba(0, 0, 0, 0.75);
    text-align:center;
    cursor:pointer;
}
#loading_circle{
    position:relative;
    top:50%;
    left:50%;
    width:56px;
    height:56px;
    margin:-29px 0 -29px 0;
    background-image:url(img/loading.png);
}
#blackout_prompt {
    position:relative;
    top:50%;
    left:50%;
    width:360px;
    margin:-50px 0 0 -180px;
    background-color: #ffffff;
    border-radius: 0.5em;
    cursor: auto;
}
#blackout_prompt p {
    margin-left: 1em;
    margin-right: 1em;
}

.info_icon {
    display: inline-block;
    border-radius: 1em;
    color: var(--color-green);
    border: solid 1px var(--color-green);
    padding: 0;
    width: 1.25em;
    height: 1.25em;
    line-height: 1.25em;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}
#infobox {
    display: none;
    border: 0.25em solid var(--color-gray-light);
    padding: 0.5em;
    margin: 0.5em 0;
}

.footnote {
    font-size: 0.875rem;
    padding: 1rem;
    border: solid 1px var(--color-gray-light);
    margin: 1rem 0;
}
.footnote_image {
    padding: 1em 0 1em 0;
    text-align: center;
}
.footnote_image img {
    max-width: 100%;
}

/**
 * svg icons
 */
.icon{
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: top;
}
.icon > svg {
    width: 100%;
    height: 100%;
}
a.btn > .icon {
    margin: 0.25em;
}

.icon-delete {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Cpath fill="%23707070" d="M9 3V1h6v2h5v2H4V3z"/%3E%3Cpath fill="%23707070" d="M5 6v14c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V6H5zm3 2h2v9H8V8zm4 0h2v9h-2V8z"/%3E%3C/svg%3E');
}
.icon-delete.red {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Cpath fill="%23ff3824" d="M9 3V1h6v2h5v2H4V3z"/%3E%3Cpath fill="%23ff3824" d="M5 6v14c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V6H5zm3 2h2v9H8V8zm4 0h2v9h-2V8z"/%3E%3C/svg%3E');
}
.icon-delete.green {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Cpath fill="%2344DB5E" d="M9 3V1h6v2h5v2H4V3z"/%3E%3Cpath fill="%2344DB5E" d="M5 6v14c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V6H5zm3 2h2v9H8V8zm4 0h2v9h-2V8z"/%3E%3C/svg%3E');
}

.icon-attention {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='exclamationMask'%3E%3Crect width='24' height='24' fill='white'/%3E%3Crect x='11' y='5' width='2' height='9' fill='black'/%3E%3Ccircle cx='12' cy='17' r='1.5' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='12' fill='%23707070' mask='url(%23exclamationMask)'/%3E%3C/svg%3E");
}
.icon-attention.red {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='exclamationMask'%3E%3Crect width='24' height='24' fill='white'/%3E%3Crect x='11' y='5' width='2' height='9' fill='black'/%3E%3Ccircle cx='12' cy='17' r='1.5' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='12' fill='%23ff3824' mask='url(%23exclamationMask)'/%3E%3C/svg%3E");
}
.icon-attention.green {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='exclamationMask'%3E%3Crect width='24' height='24' fill='white'/%3E%3Crect x='11' y='5' width='2' height='9' fill='black'/%3E%3Ccircle cx='12' cy='17' r='1.5' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='12' fill='%2344DB5E' mask='url(%23exclamationMask)'/%3E%3C/svg%3E");
}

.icon-check {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='checkmarkMask'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.29289 16.2929C9.68342 16.6834 10.3166 16.6834 10.7071 16.2929L17.7071 9.29289C18.0976 8.90237 18.0976 8.26921 17.7071 7.87868C17.3166 7.48816 16.6834 7.48816 16.2929 7.87868L10 14.1716L7.70711 11.8787C7.31658 11.4882 6.68342 11.4882 6.29289 11.8787C5.90237 12.2692 5.90237 12.9024 6.29289 13.2929L9.29289 16.2929Z' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='12' fill='%23707070' mask='url(%23checkmarkMask)'/%3E%3C/svg%3E");
}
.icon-check.red {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='checkmarkMask'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.29289 16.2929C9.68342 16.6834 10.3166 16.6834 10.7071 16.2929L17.7071 9.29289C18.0976 8.90237 18.0976 8.26921 17.7071 7.87868C17.3166 7.48816 16.6834 7.48816 16.2929 7.87868L10 14.1716L7.70711 11.8787C7.31658 11.4882 6.68342 11.4882 6.29289 11.8787C5.90237 12.2692 5.90237 12.9024 6.29289 13.2929L9.29289 16.2929Z' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='12' fill='%23ff3824' mask='url(%23checkmarkMask)'/%3E%3C/svg%3E");
}
.icon-check.green {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='checkmarkMask'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.29289 16.2929C9.68342 16.6834 10.3166 16.6834 10.7071 16.2929L17.7071 9.29289C18.0976 8.90237 18.0976 8.26921 17.7071 7.87868C17.3166 7.48816 16.6834 7.48816 16.2929 7.87868L10 14.1716L7.70711 11.8787C7.31658 11.4882 6.68342 11.4882 6.29289 11.8787C5.90237 12.2692 5.90237 12.9024 6.29289 13.2929L9.29289 16.2929Z' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='12' fill='%2344DB5E' mask='url(%23checkmarkMask)'/%3E%3C/svg%3E");
}

.icon-cross {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='xMask'%3E%3Crect width='24' height='24' fill='white'/%3E%3Crect x='11' y='5' width='2' height='14' fill='black' transform='rotate(45 12 12)'/%3E%3Crect x='11' y='5' width='2' height='14' fill='black' transform='rotate(-45 12 12)'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='12' fill='%23707070' mask='url(%23xMask)'/%3E%3C/svg%3E");
}
.icon-cross.red {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='xMask'%3E%3Crect width='24' height='24' fill='white'/%3E%3Crect x='11' y='5' width='2' height='14' fill='black' transform='rotate(45 12 12)'/%3E%3Crect x='11' y='5' width='2' height='14' fill='black' transform='rotate(-45 12 12)'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='12' fill='%23ff3824' mask='url(%23xMask)'/%3E%3C/svg%3E");
}
.icon-cross.green {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='xMask'%3E%3Crect width='24' height='24' fill='white'/%3E%3Crect x='11' y='5' width='2' height='14' fill='black' transform='rotate(45 12 12)'/%3E%3Crect x='11' y='5' width='2' height='14' fill='black' transform='rotate(-45 12 12)'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='12' fill='%2344DB5E' mask='url(%23xMask)'/%3E%3C/svg%3E");
}

.icon-download {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Cpath fill="%23707070" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/%3E%3C/svg%3E');
}
.icon-download.red {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Cpath fill="%23ff3824" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/%3E%3C/svg%3E');
}
.icon-download.green {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"%3E%3Cpath fill="%2344DB5E" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/%3E%3C/svg%3E');
}

.icon-profile {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-3.33 0-10 1.67-10 5v3h20v-3c0-3.33-6.67-5-10-5z'/%3E%3C/svg%3E");
}


.icon-next {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6L15 12L9 18' stroke='%23707070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-next.red {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6L15 12L9 18' stroke='%23ff3824' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-next.green {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6L15 12L9 18' stroke='%2344DB5E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-prev {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 6L9 12L15 18' stroke='%23707070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-prev.red {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 6L9 12L15 18' stroke='%23ff3824' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-prev.green {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 6L9 12L15 18' stroke='%2344DB5E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/*
 * loading icon (spinner)
 */
.icon-loading {
    vertical-align: top;
    display: inline-block;
    box-sizing: border-box;
    margin: 0;
    position: relative;
    text-indent: -9999em;
    border-style: solid;
    border-width: 0.25em;
    border-color: var(--color-gray-light);
    border-left-color: var(--color-green);
    animation: loadingframes 1.1s infinite linear;
}

.icon-loading,
.icon-loading:after {
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
}

@keyframes loadingframes {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

ul.box_grid {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
}
ul.box_grid.single_column {
    grid-template-columns: 1fr;
}
ul.box_grid > li {
    padding: 0 1em;
    border: solid 1px var(--color-gray-light);
    border-radius: 0.5em;
}
ul.box_grid > li > h2 ,
ul.box_grid > li > p{
    margin: 1em 0;
    padding: 0;
}
.img_container {
    background-color: var(--color-gray-light);
    margin: 1em 0;
    padding: 0.25em;
    text-align: center;
}
.img_container img {
    vertical-align: bottom;
    max-width: 100%;
}

/* mimir */
#vagonFrame {
    width: 100%;
    height: calc(100% - 72px);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border: 0;
}
.q_type_mimir .form_line_qsubmit {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

/* */
.menu_content_split {
    display: grid;
    grid-template-columns: 200px auto;
    gap: 1em;
}
pre.example {
    margin: 1em 0;
    background-color: var(--color-gray-super-light);
    padding: 1em;
}


.copy-to-clipboard {
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.copy-to-clipboard.copied {
    transform: scale(1.1);
    background-color: rgba(68, 219, 94, 0.5); /* light green flash */
}

/* test mode info */

.interview_mode_example {
    display: flex;
    gap: 5px;
}
.interview_mode_example > div {
    flex: 1;
    /*box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);*/
    padding: 1em 0.5em;
    /*border: solid 4px var(--color-gray-light);*/
    background-color: white;
}
.interview_mode_example img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    filter: grayscale(100%);
}
.interview_mode_example h1 {
    text-align: center;
}
.interview_mode_info {
    background-color: var(--color-gray-light);
    padding: 1em;
    border-radius: 1em;
    text-align: center;
}
.finished_info {
    padding: 0.5em 1em;
    border: 2px dotted var(--color-gray-light);
}


/* labels page */
.html-box-wrapper {
    position: relative;
    /*margin-bottom: 15px;*/
}
.insert-html-btn {
    display: inline-block;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 0.5em;
    position: absolute;
}


/* multi column layout */
.form_columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1em;
    margin: 1em 0;
}
.form_columns > div > .form_line:first-child {
    margin-top: 0;
}
.form_columns > div > .form_line:last-child {
    margin-bottom: 0;
}

/* ADJUSTMENTS FOR SMALL SCREENS */



@media only screen and (max-width: 640px) {
    .scale_label, .scale_values, .scale_extra_labels {
        width: 100%;
    }
    .scale_extra_labels_per_value {
        padding-left: 0;
    }
    .scale_label {
        text-align: center;
    }
    .finished_image, .finished_text {
        width: 100%;
    }
    .rank_items.split2 > div,
    .rank_items.split3 > div {
        width: 100%;
    }
}


@media only screen and (max-width: 600px) {
    .vertical_values_600 .scale_values > div {
        width: 100%;
    }
    .vertical_values_600 .radiobtn_space {
        float: left;
        margin-right: 0.5em;
    }
    .vertical_values_600 .scale_values > div {
        text-align: left;
    }
    .vertical_values_600 .scale_values > div.dk_col {
        border-left-width: 0;
        margin-bottom: 0.5em;
    }

    .singleimage_items.split2 > div {
        width: 100%;
    }
    .singleimage_items.split3 > div {
        width: 50%;
    }
    .singleimage_items.split4 > div {
        width: 50%;
    }
    .singleimage_items.split5 > div {
        width: 33.33%;
    }
    .singleimage_items.split6 > div {
        width: 33.33%;
    }
    .singleimage_items.split7 > div {
        width: 25%;
    }
    .singleimage_items.split8 > div {
        width: 25%;
    }
    .singleimage_items.split9 > div {
        width: 20%;
    }
    .singleimage_items.split10 > div {
        width: 20%;
    }
    .singleimage_items.split11 > div {
        width: 12.5%;
    }

    ul.box_grid {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 500px) {
    /*.scale_values > div {
        font-size: 0.875em;
    }*/
    input[type="text"].inline_textbox {
        width: 30vw;
    }
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx), (min-resolution: 144dpi) {
    .logo_myiyo {
        background-image: url(img/logo_2x.png);
    }
    .logo_moweb {
        background-image: url(img/logo_moweb_2x.png);
    }
}


@media only screen and (min-width: 680px) {
    .bipolar_inline .scale_values {
        box-sizing: border-box;
        padding-right: 20%;
        padding-left: 20%;
        margin-top: -2.5em;
    }
    .bipolar_inline .scale_bipolar_left {
        padding-right: 30%;
    }
    .bipolar_inline .scale_bipolar_right {
        padding-left: 30%;
    }
}
/* TWO-FACTOR AUTHENTICATION (authenticator app setup / code entry) */
.totp_steps {
    padding-left: 1.5em;
    margin: 1em 0;
}
.totp_steps li {
    margin: 0.5em 0;
}
.totp_qr_container {
    margin: 1em auto;
    max-width: 14em;
    background-color: #ffffff;
}
.totp_qr_container svg {
    display: block;
    width: 100%;
    height: auto;
}
.totp_secret_hint {
    text-align: center;
    font-size: 0.875em;
    color: var(--color-gray-mid);
}
.totp_secret {
    display: inline-block;
    margin-top: 0.5em;
    padding: 0.25em 0.5em;
    font-size: 1.125em;
    letter-spacing: 0.1em;
    color: #000000;
    background-color: var(--color-gray-light);
    border-radius: 0.25em;
    user-select: all;
}
.totp_cancel {
    text-align: center;
    margin-top: 1.5em;
}
.totp_status {
    margin: 0 0 0.5em 0;
}