@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
@font-face {
    font-family: 'Gilroy-Medium';
    src: url('https://static.quenchtec.net/46033bcf-0124-4b26-b4ea-30726bd5357c/9ZuQhMtPKQD/gilroy-medium-webfont.woff2') format('woff2'),
         url('https://static.quenchtec.net/46033bcf-0124-4b26-b4ea-30726bd5357c/59fV1l3SRjM/gilroy-medium-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy-Bold';
    src: url('https://static.quenchtec.net/46033bcf-0124-4b26-b4ea-30726bd5357c/5kWQwLr5VNp/gilroy-bold-webfont.woff2') format('woff2'),
         url('https://static.quenchtec.net/46033bcf-0124-4b26-b4ea-30726bd5357c/9xa4YnBLUTJ/gilroy-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

:root {
/*missings*/
    --question_text_alignment: left;
    --instruction_font_size: 14px;
    --answer_opens_padding: 5px;
    --answers_text_size: 16px;
    --answers_text_weight: normal;
    --interactive_checked_text_color: #b4b4b4;
    --interactive_border: 1px;
    --interactive_border_hover: 1px;
    --custom_button_background_color: rgba(196, 214, 202, 1);
    --custom_button_checked_background_color: #b4b4b4;
    --custom_special_background_color: rgb(236, 236, 236);
    --text_color_instruction: rgba(0, 89, 153, 1);
    --text_size_instruction: 14px;
    --text_weight_instruction: normal;
    --text_style_instruction: italic;
    --button_color: #4C534F;
    --button_color_background: #fff;
    --button_color_clicked: #FC6AC8;    
    --button_color_clicked_background: #24356E;
    --button_size: max(min(8vmin, 24px),24px);
    --button_size_small: max(min(8vmin, 24px),24px);
    --check_font_size: calc(var(--button_size) * 0.9);
    --text_color: black;
    --text_decoration_instruction: none;
    --text_size_supplementary:18px;
    --text_weight_supplementary:normal;
    --text_style_supplementary:none;
    --text_decoration_supplementary:none;
    --text_color_error:#FC6AC8;
    --text_size_error: var(--instruction_font_size);
    --text_weight_error:normal;
    --text_style_error:none;
    --text_decoration_error:none;

    --main_font_family: Gilroy-Medium;
    --main_font_size: 16px;
    --main_font_weight: normal;
    --main_logo_alignment: center;
    --main_text_color: black;
    --page_background_image: url("");
    --page_background_color: rgba(246, 246, 246, 1);
    --page_content_background_color: white;
    --page_content_border_radius: 0px;
    --question_row_border_color: #f6f6f6;
    --question_row_background_color: #f6f6f6;
    --question_row_alt_background_color: #f6f6f6;
    --question_selected_background_color: rgba(252, 106, 200, 1);
    --question_font_size: 18px;
    --question_font_weight: normal;
    --progressbar_background_color: #5b645f;
    --progressbar_foreground_color: #FC6AC8;

    --progressbar_width: 90%;
    --progressbar_height: 4px;
    --progressbar_radius: 2px;
    --progressbar_horizontal_text_align: 102%;
    --progressbar_vertical_text_align: 0px;
    --progressbar_text_size: -13px;

    --button_background_color: #5B645F;
    --button_border_color: #5B645F;
    --button_text_color: white;
    --button_border_radius: 0px;
    --button_border_width: 0px;
    --button_min_width: 100px;
    --button_height: 44px;
    --button_font_size: 16px;
    --button_font_weight: normal;
    --button_line_height: 20px;
    --button_vertical_align: middle;
    --button_background_color_hover: #24356E;
    --button_border_color_hover: #24356E;


    --input_field_border_color: #4c534f;
    --input_main_color: #093A4E;
    --input_radio_checkbox_size: max(min(8vmin, 24px),24px);
    --input_radio_checkbox_grid_color: #24356e;
    --interactive_text_color: black;
    --interactive_background_color: #ededed;
    --interactive_checked_background_color: #24356e;
    --interactive_background_color_hover: #24356e;
    --interactive_text_color_hover: white;
    --interactive_font_size: 16px;
    --interactive_font_weight: normal;
    --interactive_border_radius: 6px;
    --interactive_margin: 8px;
    --interactive_padding: 12px;
    --interactive_text_align: center;
    --interactive_vertical_align: middle;
    --special_text_color: white;
    --special_background_color: #093A4E;
    --main_logo_max_width: 66px;
    --text_color_supplementary: #5b645f;

    --grouping_header_text_color: #ffffff;
    --grouping_header_background_color: #4C534F;
    --grouping_header_text_color_hover: #ffffff;
    --grouping_header_background_color_hover: #4C534F;
     }


html {
    overflow:hidden;
    padding-left: 2% !important;
    padding-right: 2% !important;
    font-family: Gilroy-Medium !important;
}
th {
    font-weight: normal;
}
html,
body {
  height: 100%; 
  bottom: 0px;
  font-family: Gilroy-Medium !important;
/*  font-size: 16px;*/
  font-size: 1rem;
  /*letter-spacing: -0.25px;*/
  letter-spacing: -0.018rem;
/*  line-height: 32px;  */
  line-height: 19px;
}

 body {
     background: var(--page_background_color);
     background-image: var(--page_background_image);
     font-family: var(--main_font_family);
     color: var(--main_text_color);
     font-weight: var(--main_font_weight);
     background-repeat: no-repeat;
     background-size: cover;
     overflow-y: auto;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     margin: 0;
}
img {
    max-width: -webkit-fill-available;
/*    width: auto;*/
}

.cTable  > tbody > .rsRow > .cCellRowText > .textleft > .cRowText > .cReg > span > img {
    max-width: 200px !important;
    width: -webkit-fill-available !important;
}

.cTable > tbody > .cRowSubQuestion > .cCellSubQuestion > .cQuestionText > .cReg {
    text-align: left;
    padding-right: 10px;
}


body.noScroll {
 overflow: hidden;
}
.cTable, .cTable > tbody {
    width: -webkit-fill-available;
    border-spacing: 0px 3px;
}
.cDo {
/*
     color: var(--text_color_instruction);
     font-size: var(--text_size_instruction);
     font-weight: var(--text_weight_instruction);
     font-style: var(--text_style_instruction);
     text-decoration: var(--text_decoration_instruction);    
*/
     font-size: var(--question_font_size);
     font-weight: var(--question_font_weight);
     text-align: left;
    line-height: 28px;
    padding-right: 10px;

}
.cSay {
     color: var(--text_color_supplementary);
     font-size: var(--text_size_supplementary);
     font-weight: var(--text_weight_supplementary);
     font-style: var(--text_style_supplementary);
     text-decoration: var(--text_decoration_supplementary);
     line-height: 22px;
}
.cError {
   color: var(--text_color_error)!important;
   /*font-size: var(--text_size_error)!important;*/
   font-weight: var(--text_weight_error)!important;
   font-style: var(--text_style_error)!important;
   text-decoration: var(--text_decoration_error)!important;  
}
.cSay.cError {
    color: #4C534F !important;
    background-color: #F6F6F6 !important;
    border: 2px solid #FC6AC8 !important;
    border-radius: 0px !important;
}
 .rs-ht {
     margin-top: 0;
     margin-bottom: 0;
}
.rsRow > .cCell > .cError{
    display: none;
}
.rsRow > .cCellOpenText > .cError{
    display: none;
}
.rsRow > .cCellLastValue > .cError{
    display: none;
}

/*Fix info text*/

.cTDContainQues > div:first-of-type {
    border-top: 3px solid var(--progressbar_foreground_color);
    padding-top: 10px;
    border-top-left-radius: var(--interactive_border_radius);
    border-top-right-radius: var(--interactive_border_radius);

}
.cTDContainQues > div:last-child {
    border-bottom: 3px solid var(--progressbar_foreground_color);
    padding-bottom: 10px;
    border-bottom-left-radius: var(--interactive_border_radius);
    border-bottom-right-radius: var(--interactive_border_radius);

}
.cTDContainQues > div {
    border-left: 3px solid var(--progressbar_foreground_color);
    border-right: 3px solid var(--progressbar_foreground_color);
    padding-left: 10px;
    padding-right: 10px;
    font-size: var(--question_font_size);
}


/* Define standard variables */
 strong {
     font-weight: bold;
}
 label {
    cursor: pointer;
    font-size: 16px;
  /*letter-spacing: -0.25px;*/
    line-height: 20px;
    color: var(--text_color);
    font-weight: 400;
    padding-top: 10px;
    padding-bottom: 10px;
}
 .textleft {
     text-align: left;
}
 .textright {
     text-align: right;
}
 .textcenter {
     text-align: center;
     text-align: -webkit-center;
}
 .textul {
     text-decoration: underline;
}
 .textitalic {
     font-style: italic;
}
 .textbold {
     font-weight: bold;
}
 .textupper {
     text-transform: uppercase;
}
 .cellw100 {
     width: 100%;
}
 .cellw1 {
     width: 1%;
}
 .imgleft {
     display: block;
     text-align: left;
}
 .imgright {
     display: block;
     text-align: right;
}
 .imgcenter {
     display: block;
     text-align: center;
}
 .lpad0 {
     padding-left: 0;
}
 .rpad0 {
     padding-right: 0;
}
 .nowrap {
     white-space: nowrap;
}
/* loading animation (displayed if the request takes more than 2 seconds), div */
 .loadingAnimation {
     margin: auto;
     margin-top: 12px;
     border: 2px solid transparent;
     border-radius: 50%;
     border-top: 2px solid #227BBE;
     border-right: 2px solid #227BBE;
     width: 12px;
     height: 12px;
     -webkit-animation: spin 1.5s linear infinite;
     animation: spin 1.5s linear infinite;
}
 @-webkit-keyframes spin {
     0% {
         -webkit-transform: rotate(0deg);
    }
     100% {
         -webkit-transform: rotate(360deg);
    }
}
 @keyframes spin {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 #cookieInfo {
     padding: 2px 10px 6px 10px;
     background: white;
     font-size: 16px;
     border: 1px solid #ddd;
}
 #cookieFrameInfo {
     padding: 2px 10px 6px 10px;
     background: white;
     font-size: 14px;
     border: 1px solid #ddd;
}
 #cookieInfo .cookieInfoHeader {
     font-size: 14px;
     font-weight: bold;
}
 #cookieFrameInfo .cookieInfoHeader {
     font-size: 14px;
     font-weight: bold;
}
/* Main container for question and navigation buttons */
.mainContainer {
    display: flex;
    flex-direction: column;
    background-color: var(--page_content_background_color);
    font-size: var(--main_font_size);
    font-weight: var(--main_font_weight);
    margin: 0px auto 16px;
    border-radius:  var(--page_content_border_radius);
    padding-bottom: 15px;
    /*width: calc(100vw - 32px);
    width: fit-content;*/
}

/* Question content (excluding navigation) */
 .contentContainer {
    display: flex;
    flex-direction: column;
    order: 1;
    padding: 10px 2px 30px 2px;
}

/* Language content*/
 .languagePanel {
     padding: 16px;
}
/* Test label */
 #rsPanelComments {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
}
 #rsPanelComments .msgBar {
     margin: auto;
     position: fixed;
     top: 6px;
     background: #fff7e1;
     border: 1px solid #e7d7b0;
     color: #837542;
     font-size: 14px;
     padding: 8px 12px;
}

.logo1Container {
    order: 1;
}
.logo1 {
     /*max-width: var(--main_logo_max_width);
     height: auto;*/ 
     /*use above code if you need the logo from Theme settings and comment the below code which replaces it, */
    display: inline-block;
    width: 75px; /* Set width and height as needed */
    height: 75px;
/*    background-image: url('https://resources.walr.com/17a9fb6a-062a-495a-b190-fe812c16fb93/Templates/logo-opinium.svg'); */  /*Replace 'new-image-url.png' with your desired image URL */
    background-size: cover; /* Adjust as needed  */
    background-position: center; /* Adjust as needed */
    background-repeat: no-repeat; /* Adjust as needed */
    text-indent: -9999px; /* Hide the original image */
}

.logo2Container {
    display: none;
    visibility: hidden; 
    height: 66px;
    order: 4;
}
/* Link (powered by) */
 .logo2link {
     color: inherit;
     text-decoration: none;
}
 .logo2link:link {
     color: inherit;
}
 .logo2link:visited {
     color: inherit;
}
 .logo2link:hover {
     color: inherit;
     text-decoration: underline;
}
 .logo2link:active {
     color: inherit;
     text-decoration: none;
}
.langContainer{
    order: 3;
}

.panelMainContainer{
    padding-top: 20px;
    order: 3;
}


.cTable.rsSingle  > tbody, .cTable.rsMulti > tbody {
    display: flex;
    flex-direction: column;
}

.cTable.rsSingle > tbody >.rsRow, .cTable.rsMulti > tbody >.rsRow {
    align-self: center;
}


/* Large screens */
 @media only screen and (min-width: 781px) {
    /* Main container for question and navigation buttons */
     .mainContainer {
         width: 650px;
         margin-top: 50px;
         padding-left: 8px;
         padding-right: 8px;
    }
    /* Question content (excluding navigation) */
     .contentContainer {
         /*padding: 56px 48px 24px;*/
    }
    /* Language content*/
     .languagePanel {
         padding: 24px 56px;
    }
    /* Logo */
     .logo1Container {
         position: unset;
         /*top: 32px;
         left: 0;
         right: 0;
         padding: 0 24px;*/
         width: calc(100% - 48px);
         display: flex;
    }
     .buttonContainer {
         padding: 15px 0px 48px 0px !important;
         margin-bottom: -100px !important;
         z-index: 9999999999999999 !important;
    }
}
 .languageLink {
     margin-right: 8px;
     color: var(--main_font_color);
}
/* Safari iOS settings in order to fix scrolling, all the way to the bottom, in mainContainer */
 @supports (-webkit-touch-callout: none) {
    /* CSS specific to iOS devices */
    .mainContainer {
        height: -webkit-fit-content;
        min-height: -webkit-fill-available;
    }
}
/* We don|t display the logo2 nin this CSS */
 .logo2Container {
     display: none;
}
/* Progressbar */
 .progressContainer {
     display: inline-block;
     width: 100%;
     top: 0;
     left: 0;
     z-index: 1;
    order: 2;
    position: unset;
    padding-top: 15px;
}

/* Progressbar - background */
 .progressBarContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: var(--progressbar_width);
    background-color: var(--progressbar_background_color);
    height: var(--progressbar_height);
    margin: auto auto auto 0px;
    border-radius: var(--progressbar_radius);
    padding: 0;
    position: relative;
}

/* Progressbar - foreground */
.progressBar {
    position: absolute;
     background-color: var(--progressbar_foreground_color);
     height: 100%;
     top: 0;
     left: 0;
    z-index: 1;
}

/* Progressbar - text */
.progressBarText {
    color: #4C534F;
    font-family: Gilroy-Bold !important;
    z-index: 2;
    position: absolute;
    font-size: var(--progressbar_text_size);
    /*top: var(--progressbar_vertical_text_align);
        margin-top: 2px;
*/
    left: var(--progressbar_horizontal_text_align);
}
/* Navigation buttons */
 #rsPanelButtons {
     width: 100%;
}
 .buttonContainer {
     display: flex;
     /*padding: 16px;
     margin-top: 0;
     margin-bottom: 0;*/
     order: 2;
     width: 99%;
    justify-content: space-between;
             z-index: 9999999999999999 !important;

}

 .buttonNext, .buttonPrevious {
     background-color: var(--button_background_color);
     border-color: var(--button_border_color);
     color: var(--button_text_color);
     border-radius: var(--button_border_radius);
     border-width: var(--button_border_width);
     min-width: var(--button_min_width);
     height: var(--button_height);
     font-size: var(--button_font_size);
     font-family: var(--main_font_family);
     border-style: solid;
     text-align: center;
     cursor: pointer;
     font-weight: var(--button_font_weight);
     line-height: var(--button_line_height);
     vertical-align: var(--button_vertical_align);
     padding-left: 12px;
     padding-right: 12px;
}


.buttonNext {
    float: right;
    font: inherit;
     font-weight: var(--button_font_weight);
    text-align: center;
    margin: 0;
    background-image: url(https://static.quenchtec.net/46033bcf-0124-4b26-b4ea-30726bd5357c/58XHp47NwDn/icon--arrow-white.svg); 
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-size: 16px 16px;
    background-position: calc(100% - 20px); 
    width:176px;
    height: 36px;
}

.buttonNext:hover  {
    background-image: url(https://static.quenchtec.net/46033bcf-0124-4b26-b4ea-30726bd5357c/58XHp47NwDn/icon--arrow-white.svg); 
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-size: 16px 16px;
    background-position: calc(100% - 20px); 
    background-color: var(--button_background_color_hover);
    border-color: var(--button_border_color_hover);
}

.buttonPrevious {
    float: left;
    margin-right: auto;
    width: 42px;
    height: 36px;   
    background-image: url(https://static.quenchtec.net/46033bcf-0124-4b26-b4ea-30726bd5357c/4O86MIJE2Tg/icon_back_arrow_white.svg); 
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-size: 16px 16px;
    background-position: center center;
    font-size: 0px;
}
.buttonPrevious:hover {
    background-color: var(--button_background_color_hover);
    border-color: var(--button_border_color_hover);
}

select {
    height: 50px;
    color: #4C534F;
    font-size: 14px;
  /*letter-spacing: 0px;*/
    margin-right: 0px;
  /* styling */
  background-color: var(--question_row_background_color);
  border: #4C534F;
  border-radius: 5px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;
  /* reset */
  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("https://static.quenchtec.net/46033bcf-0124-4b26-b4ea-30726bd5357c/BcOeqbomqb/icon_down_arrow_grey.svg") !important;
  background-position:
    calc(100% - 20px) calc(16px + 2px),
    calc(100% - 15px) calc(16px + 2px),
    calc(100% - 2.5em) 0.5em;
  background-repeat: no-repeat; 
  max-width: -webkit-fill-available;
}

/* Numeric and duration sub-questions */
.cTable.rsNumeric .cCellF, .cTable.rsDuration .cCellF {
     text-align: right;
}
/* Make numeric/duration rows to fill enitre row */
 .cTable.rsNumeric .rsRow, .cTable.rsDuration .rsRow {
     justify-content: space-between;
}


/* Due to DC css width on numeric/duration */
 .cCellRowTextF, .cCellRowTextH {
     width: unset;
}
 .cCellRowTextF.cellw1, .cCellRowTextH.cellw1 {
     width: unset;
}


/* Numeric and duration input fields */
 .cFInput, .cHInput {
     text-align: center;
     /* To avoid zoom on iPhones and iPads */
     font-family: Gilroy-Medium !important;
     font-size: 16px;
     font-weight: normal;
     height: 30px;
     border: 2px solid var(--input_field_border_color)!important;
     /*border-radius: 6px;*/
     margin-right: 10px;
     width: 99%;
}
/* Question text style */
 .cQuestionText {
     font-size: var(--question_font_size);
     font-weight: var(--question_font_weight);
     text-align: left;
  /*letter-spacing: -0.25px;*/
    line-height: 28px;
}
/* Minute field of durartion */
 .rsRow .cHInput:last-of-type {
     width: 32px;
     margin-left: 10px;
}

/* Open text fields */
/* .cTextInput, .cTextArea, .rsRow select {  removed the dropdown border */
 .cTextInput, .cTextArea {
     /* To avoid zoom on iPhones and iPads */
     font-size: var(--answers_text_size);
     font-weight: var(--answers_text_weight);
     font-family: Gilroy-Medium !important;
     border: 2px solid var(--input_field_border_color)!important;
     /*border-radius:var(--interactive_border_radius)!important;*/
     /*padding: 5px !important;
     margin: 0;*/
    padding: 10px 20px !important;
    box-sizing: border-box;
}




.rsAnimationTextArea{
     font-size: var(--answers_text_size);
     font-weight: var(--answers_text_weight);
     font-family: Gilroy-Medium !important;
    padding: 12px 10px !important;
    box-sizing: border-box;
  border: 2px solid var(--input_field_border_color)!important;
  border-radius:var(--interactive_border_radius)!important;
}
.rsBtnOpenPre{
    align-self: center !important;
}
.cTextArea{
    width: -webkit-fill-available !important;
    min-width: 100%!important;
    max-width: 100%!important;
}
 .rsRow:not(:has(select)) {
     -webkit-appearance: none;
     -moz-appearance: none;
     background: transparent;
     background-color: #f6f6f6 ;
     background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
     background-repeat: no-repeat;
     background-position-x: calc(100% - 4px);
     background-position-y: 50%;
     cursor: pointer;
     /*padding-left: 6px !important;*/ /* 04/11/2024 */
     border: none;
}




/*SINGLE GRIDS */
/* Width of single and multi */
 .cTable.rsSingle, .cTable.rsMulti {
     width: 100%;
}
/* Width ofmulti subq question */
table[class=cTable] {
     width: 100%;
}
/* Select in single question */
 .cTable.rsSingle .rsRow .cRowBlockText {
     width: 100%;
     padding: 0;
    padding-left: 5px;
}
.cTable.rsSingle > .rsRow > .cRowBlockText.GroupingHeader {
    padding-left: 0px;
}
 .cTable.rsSingle > .rsRow > .cRowBlockText:has(select) {
     width: 100%;
     padding: 0;
    padding-left: 0px !important;
     border-radius: var(--interactive_border_radius);
}



 .cTable.rsSingle .rsRow select {
     width: 100%;
     border: 2px solid var(--question_row_background_color);/*04/11/2024 - made transparent*/
     border-radius: var(--interactive_border_radius) !important;/*04/11/2024 madeimportant*/
}

/* Select general */
 .rsRow:not(:has(select)){
     background: var(--page_background_color);
}

 select option {
    background-color: white;
 }

/* Order of error "*" on single and multi */
 .cTable.rsSingle .cError, .cTable.rsMulti .cError {
     order: -1;
     left: -16px;
     width: 0;
     position: relative;
}

 .cTable.rsSingleGrid .rsRow .cCellRowText .cError, .cTable.rsMultiGrid .rsRow .cCellRowText .cError {
     order: -1;
     left: -16px;
     width: 0;
     position: relative;
}

 .cCellSubQuestion {
     text-align: center;
     padding: 0 0 15px;
     border: none;
}

 .cCellF {
     display: flex;
     align-items: center;
}

 .cCellF .cError {
     order: -1;
     padding-right: 4px;
}

/* Question number, span */
 .cQuestionNumber {
     display: none;
}

/* Focus outline */
 .cFInput:focus, .cHInput:focus, .cTextInput:focus, .cTextArea:focus, .buttonNext:focus, .buttonPrevious:focus .rsRow select:focus {
     outline: 0;
}


/* Inline 'Say', span */
 .cSayInline {
     display: inline;
}
/* Row codes, span */
 .cValue {
     display: none;
    /* hidden */
     font-size: xx-small;
}



/* Flex layout on rows only if single subq*/
 .cTable.rsSingle .rsRow, .cTable.rsMulti .rsRow, .cTable.rsGridSingle .rsRow, .cTable.rsGridMulti .rsRow, .cTable.rsDuration .rsRow, .cTable.rsNumeric .rsRow {
     display: flex;
     /*border: 1px solid; YJ - 25/04/2024*/
     background-color: var(--question_row_background_color);
     border-color: var(--question_row_border_color);
     border-radius: 8px;
     align-items: center;
     flex-wrap: nowrap;
     margin-bottom: 5px;
     cursor: pointer;
     /*padding: 2px; YJ - 25/04/2024*/
     width: 620px;
     max-width: 86vw;
}
 


.cTable.rsSingle>.rsRowOpen,
.cTable.rsMulti>.rsRowOpen
{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

/*revert*/
.cTable.rsSingle .rsRowOpen .cCellOpenText, .cTable.rsMulti .rsRowOpen .cCellOpenText {
    /*width: -webkit-fill-available;*/
    /*width: 330px;*/
    width: 100%;
}
.cTable.rsSingle .rsRowOpen .cCellOpenText .cTextInput, .cTable.rsMulti .rsRowOpen .cCellOpenText .cTextInput {
    width: -webkit-fill-available !important;
    width: -moz-available !important;
}


.rsRow:not(:has(select)):hover {
    background: #ededed;
}



.rsRatingSlider > tbody > .rsRow{
    height: fit-content !important;
    background: transparent;
    cursor: default;
}
.noUi-pips-horizontal{
    height: fit-content !important;
}
.noUi-value{
    white-space: normal;
}

.noUi-horizontal .noUi-handle{
    cursor: grab;
}
.noUi-horizontal:focus .noUi-handle:focus{
    cursor: grabbing;
}.noUi-horizontal:active .noUi-handle:active{
    cursor: grabbing;
}
/* Radio button and check boxes, many settings to try to implement "pretty" look, but retain WCAG (Unveirsal Access) with keyboard navigation etc, and also support varous browsers and devices */
 .cRadio {
     outline: 0;
    /* Maybe we should change this to indicate focus 
     accent-color: transparent;*/
     color: #FFFFFF;
     position: relative;
     margin-left: 5px;
     background-color: #FFFFFF;
     border-radius: 50%;
     -webkit-appearance: none;
     -moz-appearance: none;
     cursor: pointer;
     visibility: hidden;
     width: var(--input_radio_checkbox_size);
     height: var(--input_radio_checkbox_size);
}


 .cRadio:before {
     content: "";
     visibility: visible;
     position: absolute;
     /*border: 2px solid var(--input_main_color);*/
    border: 2px solid var(--button_color);
    background-color: var(--button_color_background);
     border-radius: 50%;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
}


.cRadio:checked:before {
    background: url('https://static.quenchtec.net/46033bcf-0124-4b26-b4ea-30726bd5357c/9CalOWw9sjv/icon_tick_pink.svg') no-repeat 0 0;
    background-clip: content-box;
    /*padding: calc(var(--button_size) * 0.1);*/
    /*background-color: var(--button_color_clicked_background);*/
    background-color: var(--input_main_color);
    border: none;  
    background-position: center center;
}

.cRadio:checked:before ~ .cRow{
    background-color: var(--button_color_clicked_background);
}



 .cCheck {
     outline: 0;
    /* Maybe we should change this to indicate focus 
     accent-color: transparent;*/
     color: #FFFFFF;
     position: relative;
     margin-left: 5px;
     width: calc(var(--input_radio_checkbox_size) * 0.9);
     height: calc(var(--input_radio_checkbox_size) * 0.9);
     
     background-color: #FFFFFF;
     -webkit-appearance: none;
     -moz-appearance: none;
     cursor: pointer;
     visibility: hidden;
    display: flex !important;
}

.cCheck:before {
    display: flex !important;
    content: "";
    visibility: visible;
    position: absolute;
    border: 2px solid var(--button_color);
    background-color: var(--button_color_background);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.cCheck:checked:before {
    display: flex !important;
    background: url('https://static.quenchtec.net/46033bcf-0124-4b26-b4ea-30726bd5357c/9CalOWw9sjv/icon_tick_pink.svg') no-repeat 0 0;
    background-position: center center; 
    background-color: var(--button_color_clicked_background);
    border: none;  
    content: '\2714';
    font-weight: 800;
    line-height: 1.2;
    font-size: calc((var(--input_check_size) * 0.8) - 2px);
    text-align: center;
    /*color: var(--button_color);*/
    color: transparent;
}

/*remove background for DD dropdown*/
/* Variable target */
 .cRow:not(:has(select)),.cRowSelected:not(:has(select)) {
     background-color: var(--question_row_background_color);
}
 .cRowAlt:not(:has(select)),.cRowAltSelected:not(:has(select)) {
     background-color: var(--question_row_alt_background_color);
}
/* General text settings */
/* Give a linspace with empty paragraphs */
 p:empty {
     margin-top: 16px;
}
/* General row text (also text on open) */
 .cCellRowText, .rsRowOpen .cCell:nth-of-type(2) {
     font-size: var(--main_font_size);
     padding: 5px;
     font-weight: var(--main_font_weight);
}

/* Interactive buttons variables */
 .rsBtn {
     font-size: var(--interactive_font_size);
     font-weight: var(--interactive_font_weight);
     border: var(--interactive_border);
     border-radius: var(--interactive_border_radius);
     margin: var(--interactive_margin);
     padding: var(--interactive_padding);
     text-align: var(--interactive_text_align);
     vertical-align: var(--interactive_vertical_align);
     color: var(--interactive_text_color);
     background-color: var(--interactive_background_color) !important;
     line-height: 18px !important;
     flex-direction: column !important;
     position: relative !important;
}



/* Interactive buttons special variables */
 .rsBtnSpecial{
     border: var(--special_border);
     /*color: var(--special_text_color);
     background-color: var(--special_background_color) !important;*/
     color: var(--interactive_text_color);
     background-color: var(--interactive_background_color) !important;
}

 .rsImgChecked {
     border: none!important;
     background-color: var(--interactive_background_color_hover) !important;
     color: var(--interactive_text_color_hover);
}

 .rsBtnChecked {
     border: none!important;
     /*background-color: var(--interactive_checked_background_color)!important;*/
     background-color: var(--interactive_background_color_hover) !important;
     color: var(--interactive_text_color_hover) !important;
}
.rsFlexBtnContainer > .rsFlexBtnDiv > .rsBtn > .rs-ht{
        width: -webkit-fill-available;
        max-width: 93%;
}

@media only screen and (min-width: 781px) {
    .rsBtn:hover {
        /*border: var(--interactive_border_hover);*/
        border: none !important;
        /*background-color: var(--interactive_background_color_hover) !important;*/
        /*color: var(--interactive_text_color_hover);*/
        outline: 0px solid grey !important;
        opacity: 0.8;
    }
    .rsImgBtn:hover {
        /*border: var(--interactive_border_hover);*/
        border: none!important;
        background-color: var(--interactive_background_color_hover) !important;
        color: var(--interactive_text_color_hover);
        outline: 0px solid grey !important;
        opacity: 0.8;
    }
    .rsImgChecked:hover {
        border: none!important;
        background-color: var(--interactive_background_color_hover) !important;
        color: var(--interactive_text_color_hover);
}
}




/*.rsFlexBtnContainer > .rsFlexBtnDiv > .rsBtn ::after {
*/
.rsFlexBtnContainer > .rsFlexBtnDiv > .rsBtn > .cReg:has(span) > span::after {
    content: url(https://static.quenchtec.net/46033bcf-0124-4b26-b4ea-30726bd5357c/9CalOWw9sjv/icon_tick_pink.svg) !important; 
    font-size: 22px;
    visibility: hidden;
    margin-bottom: 5px;
    display: none; /*move it*/
    justify-content: center;
    text-align: center;
/*    position: absolute;
    right: 3%;
    bottom: 10px;*/
}
/*.rsPanelMain:has(.rsMulti) > .rsFlexBtnContainer > */
/*.rsFlexBtnContainer > .rsFlexBtnDiv > .rsBtnChecked::after {*/
.rsFlexBtnContainer > .rsFlexBtnDiv > .rsBtnChecked > .cReg:has(span) > span::after {
    content: url(https://static.quenchtec.net/46033bcf-0124-4b26-b4ea-30726bd5357c/9CalOWw9sjv/icon_tick_pink.svg) !important; 
    font-size: 22px;
    margin-bottom: 5px;
    display: inline-block;
    justify-content: center;
    text-align: center;
    visibility: visible;
    padding-left: 7px;
/*    position: absolute;
    right: 3%;
    bottom: 10px;*/
}

/*.rsFlexBtnContainer > .rsFlexBtnDiv > .rsBtn ::after {
*/
.rsFlexBtnContainer > .rsFlexBtnDiv > .rsBtn > .cReg:not(:has(span)) > p::after {
    content: url(https://static.quenchtec.net/46033bcf-0124-4b26-b4ea-30726bd5357c/9CalOWw9sjv/icon_tick_pink.svg) !important; 
    font-size: 22px;
    visibility: hidden;
    margin-bottom: 5px;
    display: none; /*move it*/
    justify-content: center;
    text-align: center;
/*    position: absolute;
    right: 3%;
    bottom: 10px;*/
}
/*.rsPanelMain:has(.rsMulti) > .rsFlexBtnContainer > */
/*.rsFlexBtnContainer > .rsFlexBtnDiv > .rsBtnChecked::after {*/
.rsFlexBtnContainer > .rsFlexBtnDiv > .rsBtnChecked > .cReg:not(:has(span)) > p::after {
    content: url(https://static.quenchtec.net/46033bcf-0124-4b26-b4ea-30726bd5357c/9CalOWw9sjv/icon_tick_pink.svg) !important; 
    font-size: 22px;
    margin-bottom: 5px;
    display: inline-block;
    justify-content: center;
    text-align: center;
    visibility: visible;
    padding-left: 7px;
/*    position: absolute;
    right: 3%;
    bottom: 10px;*/
}



.cBtnMultiGrid > .cReg:not(:has(span)) > p::after {
    content: url(https://static.quenchtec.net/46033bcf-0124-4b26-b4ea-30726bd5357c/9CalOWw9sjv/icon_tick_pink.svg) !important; 
    font-size: 22px;
    visibility: hidden;
    margin-bottom: 5px;
    display: none;
    justify-content: center;
    text-align: center;
}
.cBtnMultiGrid.btnMrChecked > .cReg:not(:has(span)) > p::after {
    content: url(https://static.quenchtec.net/46033bcf-0124-4b26-b4ea-30726bd5357c/9CalOWw9sjv/icon_tick_pink.svg) !important; 
    font-size: 22px;
    margin-bottom: 5px;
    display: inline-block;
    justify-content: center;
    text-align: center;
    visibility: visible;
    padding-left: 7px;
}


.rsScrollGridContent {
    border-radius: 5px !important;
    background-color: #F6F6F6 !important;
    border: none !important;
    width: -webkit-fill-available !important;
    margin: 0 !important;
    margin-bottom: 10px !important;
    padding: 20px !important;
    color: var(--text_color) !important;
    font-weight: 400 !important;
    min-height: 55px;
    height: auto !important;
}
.rsSelected{
    background-color: var(--question_row_background_color) !important;
}
.rsExpandingGrid > tbody {
    display: inline-table;
}
 /* ######### GRID CSS FOR MOBILE ########## */
 /* small screens */
    @media only screen and (max-width: 780px) {
        .mainContainer {
            width: calc(100vw - 34px) !important;
        }
	.rsBiPolar > tbody > .rsEmptyFinalRow > .rowHolder-header > .theHeaders {
		justify-content: space-between !important;
		width: 100% !important;
	}
    .single-slider-holder:not(.rowHolder-header) {
        padding-bottom: 30px;
    }
	.mainContainer:has(.rsExpandingGrid) {
		min-width: fit-content;
	}
        @viewport {
            width: device-width;
            initial-scale: 1.0;
            maximum-scale: 1.0;
        }
        .logo1Container{
            display: none;
        }

        .rsBtn > .rs-ht {
            word-wrap: break-word;
        }


    /* .mobileGrid:not(.rsCQ) > tbody > .rsRow:not(:has(select)) { */
        .mobileGrid:not(.rsCQ) > tbody > .rsRow {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: center;
            align-items: stretch;
            padding-top: 20px;
            min-width: fit-content;
            max-width: 95%;
            align-content: stretch;
            background-color: white;
        }
        /* .mobileGrid:not(.rsCQ) > tbody > .rsRow:has(select) { */
        .mobileGrid:not(.rsCQ) > tbody > .rsRow:has(select) {
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            background-color: var(--question_row_background_color);
            column-gap: 30px;
        }
        .mobileGrid:not(.rsCQ) > tbody > .rsRow:has(select) > .cCellRowText {
            justify-content: flex-end !important;
        }
        /*.mobileGrid:not(.rsCQ) > tbody > .rsRow:not(:has(select)) > .cCell{*/
        .mobileGrid:not(.rsCQ) > tbody > .rsRow > .cCell{
            background-color: var(--question_row_background_color);
        }
        /*.mobileGrid:not(.rsCQ) > tbody > .rsRow:not(:has(select)) > .rsSelected {*/
        .mobileGrid:not(.rsCQ) > tbody > .rsRow > .rsSelected {
            background-color: var(--interactive_checked_text_color);
        }

        .mobileGrid:not(.rsCQ) > tbody > .rsRow > .cCell > .cCellHeader  > .rs-ht > p {
            min-width: fit-content;
        }

        .mobileGrid:not(.rsCQ) > tbody > .rsRow > .cCell > .cCellHeader {
            display: flex;
            flex-direction: column;
            max-width: 90%;
        }

        .mobileGrid:not(.rsCQ) > tbody > .rsRow > .cCellRowText > .cRowText > .rs-ht{
            /*font-size: 21px;*/
        }

        .mobileGrid:not(.rsCQ) > tbody > .rsRow > td {
            padding: var(--answer_opens_padding);
            min-width: 40%;
            min-height: 12px;
            /*background-color: #efefef;*/
            /*border-radius: var(--interactive_border_radius);*/
            margin-left: 10px;
            margin-top: 4px;
            display: flex;
            flex-direction: row-reverse;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center;
        }


        .mobileGrid:not(.rsCQ) > tbody > .rsRow > td.cCell:hover {
            padding: var(--answer_opens_padding);
            /*background-color: #efefef;*/
            /*border-radius: var(--interactive_border_radius);*/
            margin-left: 10px;
            margin-top: 4px;
        }

        .mobileGrid:not(.rsCQ) > tbody > .rsRow:not(:has(select)) > td {
            border: 1px solid var(--question_row_border_color);
        }

        .mobileGrid:not(.rsCQ) > tbody > .rsRow:not(:has(select)) > td.cCell:hover {
            border: 1px solid var(--question_row_border_color);
        }



       .mobileGrid:not(.rsCQ) > tbody > .rsRow > td.cCell > .cCheck, .mobileGrid:not(.rsCQ) > tbody > .rsRow > td.cCell > .cRadio {
            /*display: none;*/
        }

        .mobileGrid:not(.rsCQ) > tbody > .rsRow > td.cCell:has(.cCheck:checked), .mobileGrid:not(.rsCQ) > tbody > .rsRow > td.cCell:has(.cRadio:checked){
            background-color: var(--interactive_checked_text_color);
            transform: translate3d(0, 1px, 0);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: row-reverse;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center;
        }

        .mobileGrid:not(.rsCQ) > tbody > .rsRow > td.cCell > .cCellHeader > .cReg > p {
            text-wrap: balance;
            min-height: 38px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

 
        .mobileGrid.dropdownGrid .rsRow{
            padding-top: 0px !important;
            border-bottom: 1px solid white;

            display: flex;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            align-content: center !important;
            justify-content: space-between !important;
            column-gap: 20px;
        }

        .mobileGrid.dropdownGrid .rsRow > .cCellRowText {
            justify-content: flex-end;
        }

        .cTable.rsSingle .rsRowOpen .cCellOpenText, .cTable.rsMulti .rsRowOpen .cCellOpenText {
            /*width: -webkit-fill-available !important;*/
            width: 95%;
        }
        .essay-progress-bar{
            width: -webkit-fill-available !important;
        }
         .rsBtn:hover{
                /*color: var(--interactive_text_color) !important;
                background-color: var(--interactive_background_color) !important;*/
            outline: 0px solid grey !important;
            border: 0px solid grey !important;
        }


    }
 @media only screen and (max-width: 780px) and (hover: hover){
    .rsBtn:hover {
                /*color: var(--interactive_text_color) !important;
                background-color: var(--interactive_background_color) !important;*/
                outline: 0px solid grey !important;
                border: 0px solid grey !important;
    }
}

 @media only screen and (min-width: 500px) {
    .cTable.desktopGrid:not(.rsCQ) > tbody > .rsRow.cRow:not(:has(select)) {
        background-color: #f6f6f6;
        border: 1px solid #fff;
    }

    .cTable.desktopGrid:not(.rsCQ) > tbody > .rsRow:not(:has(select)) > .textcenter{
        border-left: 1px solid #fff;
        border-right: 1px solid #fff;
        background-color: #EDEDED;
    }

    .cTable.desktopGrid:not(.rsCQ) > tbody > .rsRow.cRow:not(:has(select)):hover {
        background-color: #EDEDED;
    }
    .cTable.desktopGrid:not(.rsCQ) > tbody > .rsRow.cRow:not(:has(select))Selected{
        background-color: #d3d3d31c;
    }
    .cTable.desktopGrid:not(.rsCQ) > tbody > .rsRow.cRowSelected:not(:has(select)):hover{
        background-color: #EDEDED;
    }
    .cTable.desktopGrid:not(.rsCQ) > tbody > .rsHeaderRow > .cCellHeader > .rs-ht{
        text-wrap: balance;
        line-height: 18px;
        font-weight: normal;
    }
 }
 
 /* ######### END GRID CSS FOR MOBILE ########## */

.mobButton {
    border-radius: 0px !important;
    border-color: var(--input_field_border_color) !important;
}
.rsProcessedGrid {
    width: -webkit-fill-available;
}


.rsProcessedGrid > tbody > .rsRow{
    line-height: 18px;
}


.rsProcessedGrid > tbody > .rsRow > .cCell:has(select){
    padding-top: 3px;
    padding-bottom: 3px;
}

.rsGridCellSelected {
    background-color: var(--input_radio_checkbox_grid_color) !important;
    border: 1px solid #fff;
    color: #fff;
}

th.revisedColumn {
    /*padding: 5px;*/
    font-weight: normal  !important;
}

input[type="radio"]:checked+.mobButton {
    background: url('https://static.quenchtec.net/46033bcf-0124-4b26-b4ea-30726bd5357c/9CalOWw9sjv/icon_tick_pink.svg') no-repeat 0 0 !important;
    background-position: center center !important;
    background-color: var(--button_color_clicked_background) !important;
     content: '\2714' !important;
     font-weight: 800 !important;
     line-height: 1.2 !important;
     text-align: center !important;
    color: var(--button_color) !important;
}

.rsMXDiff > tbody > .rsRow, .rsMXDiff > tbody > .rsEmptyFinalRow {
    border-top: 0px !important;
    border-bottom: 0px !important;
}

.rsMXDiff>tbody>tr{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.rsMXDiff > tbody > .rsRow > .cCellRowText {
    width: 70%;
    min-height: 60px;
    display: flex;
    align-items: center;
}

.rsMXDiff > tbody > .rsRow > .cCellRowText > .cRowText {
	text-align: center;
}

/* Swap loaction of radio/check on single/multi */
.rsSingle .rsRow, .rsMulti .rsRow {
    flex-direction: row-reverse;
}
.rsSingle .rsRow > .cCell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*padding-right: 4px; YJ -0 24/04/2024*/
    background-color: #EDEDED;
    padding-bottom: 4px;
    padding-right: 1px;
    padding-top: 4px;
    align-self: stretch;
}

.rsMulti .rsRow > .cCell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*padding-right: 4px; YJ -0 24/04/2024*/
    background-color: #EDEDED;
    padding-bottom: 4px;
    padding-right: 1px;
    padding-top: 4px;
    align-self: stretch;
}
.rsRowOpen {
    justify-content: space-between;
    flex-flow: wrap-reverse;
}



.rsRowOpen .cCell {
    /*order: 1;*/
    /*display: none !important;*/

}


/*
.rsRowOpen .cCellOpenText {
    order: 2;
}
.rsRowOpen .rsOpenCell {
    order: 3;
    padding-left: 11px !important;
    padding-right: 11px !important;
}
*/


/*revised to show the answers*/
.rsMulti > tbody > .rsRowOpen > .cCell, .rsSingle > tbody > .rsRowOpen > .cCell{
    order: 1;
}
/*revised to hide the answers input*/
.rsMulti > tbody > .rsRowOpen > td.cCell > input, .rsSingle > tbody > .rsRowOpen > td.cCell >  input{
    order: 1;
    display: none !important;
}
.rsMulti > tbody > .rsRowOpen > .cCellRowText, .rsSingle > tbody > .rsRowOpen > .cCellRowText{
    order: 3; /*CHANGE TO 2*/
    /*padding-right: 20px;*/
    min-width: fit-content;
}

.rsMulti > tbody > .rsRowOpen > .cCellOpenText, .rsSingle > tbody > .rsRowOpen > .cCellOpenText{
    width: -webkit-fill-available;
    order: 3; /*CHANGE TO 3*/
    flex-grow: 1;
}

.cTable.rsSingle .rsRow, .cTable.rsMulti .rsRow, .cTable.rsGridSingle .rsRow, .cTable.rsGridMulti .rsRow, .cTable.rsDuration .rsRow, .cTable.rsNumeric .rsRow {
    border-radius: 0px;
}

#Multi_Scrolling_Grid_btn > .rsFlexBtnDiv > .rsBtnChecked{
    background-color: #283670;
    color: white;
}


#Multi_Scrolling_Grid_btn > .rsFlexBtnDiv > .rsBtnChecked:hover{
    background-color: #283670;
    color: white;
}

.rsCQEssay > tbody{
    align-items: stretch !important;
}

.ciTotalText {
    width: 60px;
    background-color:#fff!important;
}

.custTotal {
    width: 60px;
    background-color:#f6f6f6!important;
}

/*sub total background colour*/
.ciTotalText.cFInput {
  background-color:#fff!important;
}

/*************************************************/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* Turn off spinners */
 input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
     -moz-appearance: none;
     margin: 0;
}
.mobrsRow{
    justify-content: space-between !important;
}

.GroupingHeader {
    color: var(--grouping_header_text_color);
    background-color: var(--grouping_header_background_color);
    font-weight: normal !important;
    width: -webkit-fill-available;
    padding-left: 3px !important;
    line-height: 33px !important;
}
.GroupingHeader:hover {
    color: var(--grouping_header_text_color_hover) !important;
    background-color: var(--grouping_header_background_color_hover) !important;
    cursor: default !important;
    font-weight: normal !important;
}
.GroupingHeader > .cRowBlockText {
    width: 99% !important;
    font-weight: normal !important;
}
.rsBtn:hover, .rsImgBtn:hover {
    outline: 0px solid grey !important;
    border: 0px solid grey !important;
}
/* Media query to target devices with coarse pointer (e.g., touch devices) */
@media (hover: none) and (pointer: coarse) {
    .rsBtn:hover, .rsImgBtn:hover {
        background-color: var(--interactive_background_color) !important;
        color: var(--main_text_color) !important;
        outline: 0px solid grey !important;
        border: 0px solid grey !important;
    }
    .rsBtnChecked:hover, .rsImgBtnChecked:hover {
        background-color: var(--interactive_background_color_hover) !important;
        color: var(--interactive_text_color_hover) !important;
        outline: 0px solid grey !important;
        border: 0px solid grey !important;
    }
}


/* IRT*/

#theCard {
  -webkit-box-shadow: none!important;
  box-shadow: none!important;
  border-radius:20px!important;
  color: var(--text_color_supplementary);
  /* font-size: var(--text_size_supplementary);*/
   font-weight: var(--text_weight_supplementary);
   font-style: var(--text_style_supplementary);
   text-decoration: var(--text_decoration_supplementary);
   line-height: 22px;
   border: 0px solid var(--progressbar_foreground_color)!important;
   font-size:1.6rem !important;
   background-color: transparent !important;
   min-height: 10vh !important;
}
#theCard > p {
    background-color: #ededed;
    padding: 20px;
  border-radius:6px!important;
}
#countdown{
    display: none !important;
}

.cardscontainer {
  -webkit-box-shadow: none!important;
  box-shadow: none!important;
}

.beginButton {
  -webkit-box-shadow: none!important;
  box-shadow: none!important;
  border:none!important;
  transform:none!important;
}

.iqtButton {
  -webkit-box-shadow: none!important;
  box-shadow: none!important;
  background-color:var(--question_row_background_color)!important;
  font-size:20px!important;]
    
}

.iqtButton.start {
  transform:none!important;
}

.iqtButton.start:hover {
  background-color: var(--button_background_color_hover) !important;
  color:#fff!important;
}

#countdown {
  /*display: none;*/
  font-size: 4rem!important;
  margin-bottom: 10px!important;
}

/*Hide neither option*/
.iqtNeither {display:none!important;}

/*Ranking*/

.rsBtnRankSelected {
  background-color: var(--button_color_clicked_background)!important;
  color: var( --button_color_clicked )!important;

}

.cRankIndex {
  background-color:#fff!important;
}

.cTDRanked {
  font-size:1.2rem!important;
  background-color: var(--button_color_clicked_background)!important;

}

.Xconcept {
  border: 2px solid var(--input_field_border_color)!important;
  border-radius:var(--interactive_border_radius)!important;
  width: 95% !important;
}

/*Progress bar on OEs*/

#Exclusive {
  /*background-color:var(--question_row_background_color)!important;*/
  border:none!important;
 -webkit-box-shadow: none!important;
  box-shadow: none!important;  
}

#Exclusive:hover {
  /*
  --button_background_color_hover
  background-color: var(--interactive_background_color) !important;
  color: var(--interactive_text_color);
  */
    
  -webkit-box-shadow: none!important;
  box-shadow: none!important;
  border:none!important;
  transform:none!important;

}

/*Highlighter tool*/
.Xconcept>.like {background-color:#2ecc71!important}
.Xconcept>.dislike {background-color:#ef4f40!important}

/*Background colour for Total Summary*/
.ciTotalText {
  background-color:#fff!important;
}

/*Progress on OEs*/
 
.progress-bar-messages {
  display:none;
}
 
.essay-progress-fill {
  height:8px!important;
  background-color: var(--progressbar_background_color)!important;
}

.essay-progress-bar {
  height:8px!important;
  border-color: var(--progressbar_background_color)!important;  
}

/*Single grid scrolling - text not centred*/
.rsScrollGridContent div.cRowText {
  /*margin-top:10px!important;*/ /*  centralising  */
}

/* Group Headers */
.cRowAlt > .cRowBlockText {
    background-color: var(--grouping_header_background_color);
    color: var(--grouping_header_text_color);
    width: -webkit-fill-available;
    padding-left: 5px;
    font-weight: normal!important;
}
.cRow > .cRowBlockText:not(:has(select)) {
    background-color: var(--grouping_header_background_color);
    color: var(--grouping_header_text_color);
    width: -webkit-fill-available;
    padding-left: 5px;
    font-weight: normal!important;
}
.cRowBlockText > .lpad0.rpad0.textbold > .rs-ht.cReg.reg > p {
    font-weight: normal!important;
}

.custTotal > .cRowBlockText {
    width: fit-content !important;
    padding-right: 10px;
    background-color: #f6f6f6 !important; 
    color: black !important;
}

#HSOptions > #Exclusive, #hotspotReset {
    font-size: var(--interactive_font_size);
    font-weight: var(--interactive_font_weight);
    border: var(--interactive_border) !important;
    border-radius: var(--interactive_border_radius) !important;
    margin: var(--interactive_margin) !important;
    padding: var(--interactive_padding) !important;
    text-align: var(--interactive_text_align);
    vertical-align: var(--interactive_vertical_align);
    color: var(--interactive_text_color);
    background-color: var(--interactive_background_color) !important;
    line-height: 18px !important;
    flex-direction: column !important;
    position: relative !important;
}

#HSOptions > #Exclusive:hover, #hotspotReset:hover {
    /*border: var(--interactive_border_hover);*/
    border: none!important;
    background-color: var(--interactive_background_color_hover) !important;
    color: var(--interactive_text_color_hover);
    outline: none !important;
}

#HSOptions > #hotspotReset select, #HSOptions > #Exclusive select {
    /*border: var(--interactive_border_hover);*/
    border: none!important;
    background-color: var(--interactive_background_color_hover) !important;
    color: var(--interactive_text_color_hover);
    outline: none !important;
}
/*Still need to find a way to get the clicks to be styled with rgb(252, 106, 200) or #fc6ac8. Buttons needs to stay one colour when selected. */

.rsRow.rsRowOpen {
    flex-flow: wrap-reverse!important;

}

.rsRow select:hover {
    background-color:var(--question_row_alt_background_color)!important;
}

.rsScrollAnimate {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rsRegEx .rsRowOpen {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.rsCuQeSal > .cCell.cCellRowText {
        width: -webkit-fill-available;
}



.rsCQChatBot > tbody > .cRowSubQuestion > .cCellSubQuestion, .rsCQChatBot > tbody > .cRow , .rsCQChatBot > tbody > .cRowAlt > .cCellRowText{
    display: none !important;
}


.rowHolder.single-slider-holder {
    background-color: #fff !important;
    border-top: 1px solid #ededed !important;
}
.rowHolder.bi-polar-slider-holder{
    background-color: #ededed !important;
    border-top: 1px solid #fff !important;
}


.rsRow:has(.cTextArea) > .cCellRowText, .rsRow:has(.cTextArea) > .cCell {
    /*display: none !important;*/ /* 04/11/2024 */
    
}

/* YJ - Added 06 01 2025 */
.rsRow.rsRowOpen {
    flex-flow: wrap !important;
    justify-content: left;
}

#LangSelector_PanelLayout {
    display: none!important;
}

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 20px;
    /*border-radius: var(--interactive_border_radius);*/
    border: 2px solid black !important;
    color: black !important;
    background-color: #ededed !important;
    z-index: 99999999999 !important;
}

.ui-widget, .ui-menu-item{
    z-index: 99999999999 !important;
}

.ui-autocomplete li {
    color: #000 !important;
    background: #ededed !important;
    z-index: 99999999999 !important;
}

.ui-autocomplete li:hover > .ui-menu-item-wrapper{
    color: #fff !important;
    background: #24356E !important;
    z-index: 99999999999 !important;
}

.cGridUnderText > .cRowText {
    color: rgb(200, 200, 200);
}
 /*######################################################*/
 
 /* TOOLTIP CSS*/

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border-bottom: 4px solid #24356E;
}

@media only screen and (min-width: 781px) {
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 300px;
    max-width: 450px;
    background-color: #24356E;
    color: #fff;
    text-align: left;
    padding: 5px;
    border-radius: 6px;
    font-family: Gilroy-Medium !important;
    font-size: 0.8rem !important;
    letter-spacing: -0.018rem;
    line-height: 1rem;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }

  .tooltip:hover .tooltiptext {
    width: max-content;
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(-10px);
  }

  .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
  }

}


@media only screen and (max-width: 780px) {
  .tooltip:hover .tooltiptext {
    width: 80vw;
  }
  .tooltip .tooltiptext {
    position: fixed;
    top: 20px; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    width: 80vw;
    max-width: 80vw;
    box-sizing: border-box;
    visibility: hidden;
    background-color: #24356E;
    color: #fff;
    text-align: left;
    padding: 5px;
    border-radius: 6px;
    font-family: Gilroy-Medium !important;
    font-size: 0.8rem !important;
    letter-spacing: -0.018rem;
    line-height: 1rem;
    z-index: 1000; /* Ensure it's above other elements */
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }

}

 /* END TOOLTIP CSS*/
 
 /*######################################################*/
 /*######################################################*/