.fruity_twentythree {
    background-color: whitesmoke;
    padding-top: 0px !important;
}

#main-col{
    background-color: white;
    box-shadow: 5px 5px 20px 0px #00000017;
    padding-right: 50px;
    padding-left: 50px;
    margin-bottom: 50px;
    border-radius: 15px;
    margin-top:2em;
}

.survey-name {
    padding-top: 1em;
    padding-bottom: 0.25em;
}

.privacy {
    display:none;
}

.space-col {
    margin-bottom:0;
}

.top-container {
    margin-bottom: -0.8em;
    margin-top: 1em;
}

#navigator-container {
    padding-bottom: 1.5em;
}

.progress-bar {
    background-color: #15277c;
}

.btn-primary {
    background-color: #15277c;
    border-color: #15277c;
}

.btn-primary:hover {
    background-color: #15277c;
    border-color: #15277c;
    box-shadow: 0px 0px 0px 3px rgba(123, 97, 255, 0.4);
}

.fruity_twentythree .input-group-addon {
    background-color: #15277c;
    border-color: #15277c;
}

.btn-check + .btn-primary:hover {
    background-color: #15277c;
    border-color: #15277c;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary:active:focus, .btn-primary.dropdown-toggle.show, .btn-primary.dropdown-toggle.show:focus {
    background-color: #15277c;
    border-color: #15277c;
}

.btn-check:checked + .btn-primary, .btn-check:checked + .btn-primary:focus, .btn-check:focus:checked + .btn-primary {
    background-color: #15277c;
    border-color: #15277c;
}

.radio-item input[type=radio]:checked + label {
    color: #15277c;
}

.radio-item input[type=radio]:checked + label::before {
  border-color: #15277c;
}

.radio-item input[type=radio]:checked + label::after {
  background-color: #15277c;
}

.question-container .question-valid-container {
    margin-top: 0;
}

.group-container .group-description {
    margin-bottom: 4em;
}

.navbar {
    background-color: #15277c !important;
}

#survey-nav .navbar-toggler .ri-more-fill {
    color: white;
}

.fruity_twentythree_test .fruity_twentythree .font-ibm-sans .lang-en  {
    padding-top:0;
}

.fixed-top {
    position: unset;
}

.container-fluid.col-xl-8 {
    background-image: url(https://www.cancersa.org.au/static/38314f960bc06d473f17f38aed022319/logo_footer.svg);
    background-repeat: no-repeat;
    background-size: 135px;
    background-position: left center;
    height: 80px;
    background-position-x: 15px;
}

.form-heading {
    font-family: "IBMPlexSans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.survey-name {
    font-family: "IBMPlexSans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

#welcome-container {
    max-width: unset;
}

.asterisk.ri-asterisk {
    color: #ff0000;
    font-weight: 700;
}

.text-danger {
    padding-top: 10px;
}

a {
    color: #009bdc;
}

a:hover {
    color: #15277c;
}

.alert-warning {
    border: 0px solid #1E1E1E;
    background-color: #ffd2005c;
    display: inline-block;
    margin-top: 1.5rem;
    width: 100%;
    margin-bottom: 0;
}

.completed-wrapper {
    padding-top: 2em;
    padding-bottom: 1em;
}

.number-of-questions {
    margin-top: 20px;
}

.completed-text > div.alert.alert-warning {
    margin-bottom: 20px;
    margin-top: -20px;
}

/* #survey-nav.navbar {
    background: linear-gradient(to right, #021B79, #0063c8);
} */

.dropdown-menu > li > a:hover {
    color: #ffffff !important;
    background-color: #15277c !important;
}

.save-message {
    padding-top: 2em;
}

.large-heading {
    font-family: "IBMPlexSans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.form-heading {
    font-family: "IBMPlexSans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.button-row {
    padding-bottom: 2em;
}

.modal-content {
    border-radius: 15px;
}

.dropdown-menu > li > a:focus {
    color: #ffffff !important;
    background-color: #15277c !important;
}

.form-change-lang {
    margin-bottom: -50px;
    padding-top: 20px;
    font-family: "IBMPlexSans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.form-change-lang #language-changer-select {
    color: #009bdc;
    background-color: transparent;
}

.form-change-lang #lang-select::after {
    color: #009ddf;
}

.uploadmsg {
background-color: #009bdc;
border: 0px black;
}

.radio-item label::after {
  background-color: #15277c;
}

.radio-item input[type=radio] + label::after {
  background-color: #15277c;
}

.tempus-dominus-widget .date-container-decades div:not(.no-highlight).active, .tempus-dominus-widget .date-container-years div:not(.no-highlight).active, .tempus-dominus-widget .date-container-months div:not(.no-highlight).active, .tempus-dominus-widget .date-container-days div:not(.no-highlight).active, .tempus-dominus-widget .time-container-clock div:not(.no-highlight).active, .tempus-dominus-widget .time-container-hour div:not(.no-highlight).active, .tempus-dominus-widget .time-container-minute div:not(.no-highlight).active, .tempus-dominus-widget .time-container-second div:not(.no-highlight).active {
    background-color: #15277c;
}

.tempus-dominus-widget .date-container-decades div:not(.no-highlight).today:before, .tempus-dominus-widget .date-container-years div:not(.no-highlight).today:before, .tempus-dominus-widget .date-container-months div:not(.no-highlight).today:before, .tempus-dominus-widget .date-container-days div:not(.no-highlight).today:before, .tempus-dominus-widget .time-container-clock div:not(.no-highlight).today:before, .tempus-dominus-widget .time-container-hour div:not(.no-highlight).today:before, .tempus-dominus-widget .time-container-minute div:not(.no-highlight).today:before, .tempus-dominus-widget .time-container-second div:not(.no-highlight).today:before {
    border-bottom-color: #009bdc;
    border-top-color: rgba(0, 0, 0, 0.2);
}

.select-sortable-lists:not(.ranking-advanced-style) .ranking-sorted-items .sortable-item {
    border: 1px solid #15277c;
}

.mytooltip {
    text-decoration-line: underline;
    cursor: pointer;
    text-underline-position: under;
    text-decoration-color: #009bdc;
    text-decoration-thickness: 2px;
    text-decoration-style: dotted;
}

.tooltip-inner {
    max-width: 200px;
    width: 200px; 
}

/* ========================= Styles for small devices ======================================== */
@media only screen and (max-width: 767px) {
    .fruity_twentythree {
        background-color: white;
    }

    #main-col {
        background-color: white;
        box-shadow: 0px 0px 0px 0px #00000017;
        padding-right: 15px; /* Adjusted padding for small devices */
        padding-left: 15px; /* Adjusted padding for small devices */
        margin-bottom: 15px; /* Adjusted margin for small devices */
        border-radius: 0px;
    }
    
    .survey-name {
    padding-top: 0.25em;
    }
    
    .group-container .group-title {
    margin-top: 0;
    }
    
    .group-container .group-description {
    margin-bottom: 3em;
    }
}

.completed-text {
    padding-bottom:1em;
}

/* ====================== NPS CUSTOM CLASS ========================= */
.nps .bootstrap-buttons-div{
        width: 8%;
    max-width: 70px;
    min-width: 70px;
}
.nps .button-item{    
    max-width: 70px;
    min-width: 70px;
    min-height:70px;
    
}

.nps .row{
    padding-left:0px;
    padding-top:10px;
}

.nps .ls-questionhelp{
margin-left:0px;
max-width: 800px;
}

.nps .question-help-container{
    padding-right: 27px;
    padding-left: 13px;
}


@media (max-width: 1199px){
.nps .question-help-container{
padding-right:12px;
padding-left:13px;
}
}

@media (max-width: 992px){
.nps .button-item {
min-width:25px;
min-height:50px;
}

.nps .container-fluid{
padding-left:0px;
padding-right:0px;
}

.nps .btn {
padding:5px;
text-wrap:nowrap;

}

.nps .bootstrap-buttons-div {
margin-right:3px;
min-width:25px;
padding-right:0px;
}
}

.nps .ls-questionhelp:before{
    display:none;
}

.nps .ls-answers{
padding-right:0
}

.nps > .answer-container{
padding-right:0;
}

.nps > div.question-help-container.col-12 > div > em > p {
  margin-bottom:0;
  font-size: 0.9975rem;
}

.nps > .answer-container {
    padding-right: 0;
    padding-left: 25px;
}

.btn-check + .btn {
    line-height: 28px;
}

/* ====================== STAR RATINGS ========================= */

.star-1.star-rated-on:not(.star-stub) {
    color: #ffce23;
}
.star-1, .star-2, .star-3, .star-4, .star-5 {
    color: #bfbfbf;
}
.star-2.star-rated-on:not(.star-stub) {
    color: #ffce23;
}

.star-3.star-rated-on:not(.star-stub) {
    color: #ffce23;
}

.star-4.star-rated-on:not(.star-stub) {
    color: #ffce23;
}

.star-5.star-rated-on:not(.star-stub) {
    color: #ffce23;
}

.star-rating {
    font-size: 28px;
    line-height: 36px;
    cursor: pointer;
    display: block;
    float: left;
    height: 36px;
    overflow: hidden;
    width: 46px;
    padding-left: 10px;
}

.star-1.star-drained, .star-2.star-drained, .star-3.star-drained, .star-4.star-drained, .star-5.star-drained {
    color:#ffe076;
}

.star-1.star-drained.star-hover, .star-2.star-drained.star-hover, .star-3.star-drained.star-hover, .star-4.star-drained.star-hover, .star-5.star-drained.star-hover {
    text-shadow: 0px 0px 
}
@media only screen and (max-width: 500px) {
.star-rating {
    width: 20%;
}
}

.star-rating {
    min-width:40px
}

/* ================= QUESTION PADDING =============== */

ol, ul, dl {
    margin-bottom: 0;
}

.date-item {
    margin-bottom: 0!important;
}

.upload-button {
margin-bottom:1em;
}

.select-sortable-lists:not(.ranking-advanced-style) .list-group-item {
  padding: 12px 20px 12px 20px;
}

.greenapples {
    color:green;
    background-color:red;
}

.checkbox-item input[type=checkbox]:checked + label {
    color: #15277c;
}

.checkbox-item input[type=checkbox]:checked + label::before {
  border-color: #15277c;
}

.checkbox-item input[type=checkbox]:checked + label::after {
  background-color: transparent;
  color: #15277c;
}