/*custom font*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/
* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    /* Bootstrap 5 background utilities could be used here, but keeping custom gradient for now */
    background: #fff; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #fff, #fff); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #fff, #fff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

body {
    font-family: 'Montserrat', arial, verdana;
    background: transparent;
}

/* -----Splash Page----- */

#splashpage {
    /* Using Bootstrap 5 spacing and alignment utilities */
    margin: auto; /* Center block element */
    width: 100%; /* Bootstrap's default is 100% within a container/row */
    padding: 50px 10px 30px 10px; /* Using shorthand padding */
    text-align: center; /* Using Bootstrap text utility */
}

#splashpage h1 {
    font-size: 1.8em;
    padding-bottom: 20px; /* Can use Bootstrap spacing utility like pb-4 */
}

#splashpage p {
    font-size: 1.2em;
}

#topdisplay {
    text-align: center; /* Using Bootstrap text utility */
}

/*Bold text*/
.highlight {
    font-weight: bolder;
}


/* Colour for continue link - .highlight is used for bold */
/* Keeping specific link states but ensure they don't conflict with Bootstrap's anchor styles */
a:link#continue,
a:visited#continue,
a:hover#continue,
a:active#continue {
    color: #fff;
    text-decoration: none; /* Ensure no underline */
}

/* Custom button style - can be combined with Bootstrap's .btn class */
a.pinkSubmit {
    width: 250px;
    background: #AC0656;
    font-weight: bold;
    color: #fff;
    border: 0 none;
    border-radius: 25px; /* Using Bootstrap's rounded-pill utility could be an alternative */
    cursor: pointer;
    padding: 10px 5px; /* Using shorthand padding */
    margin: 10px 5px; /* Using shorthand margin */
    outline: none !important; /* Hide blue border round object important is for bootstrap*/
    /* Added display and text-align for consistency */
    display: inline-block;
    text-align: center;
    text-decoration: none; /* Ensure no underline for anchor buttons */
    line-height: 1.5; /* Adjust line height if needed */
}


/* -----Form Progress Styles----- */


/* Legend positioning - not used.  Use of legend for semantics puts overall h2 title above and h3 actual question inside, visually.*/

/* Make main form heading a bit smaller to highlight form */
h1#mainFormHeading {
    font-size: 1.5em;
    text-align: center;
    padding-top: 1.0em;
}

/* Form Container Styling */
#overallForm {
    /* Using Bootstrap 5 spacing and alignment utilities */
    margin: auto; /* Center block element */
    width: 100%; /* Bootstrap's default is 100% within a container/row */
    padding: 10px 10px 30px 10px; /* Using shorthand padding */
    text-align: center; /* Using Bootstrap text utility */
}


/* Bootstrap 5 grid handling - removed !important and margin auto, rely on Bootstrap row/col and utility classes in HTML */
/* The margin: auto and width: 100% !important on col-md-6 overrides Bootstrap's grid.
   If you want to center a column, use Bootstrap's .justify-content-center on the row
   or .mx-auto on the column in your HTML. */
/* .col-md-6 {
    text-align: center;
} */


/*modal dialogue styles*/
/* Targeting modal body with padding */
.modal-body {
    padding: 30px; /* Using shorthand padding */
}

/* Targeting modal footer buttons */
.modal-footer .action-button-skip {
    width: 200px;
    background: #6A00F5;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 25px; /* Using Bootstrap's rounded-pill utility could be an alternative */
    cursor: pointer;
    padding: 10px 5px; /* Using shorthand padding */
    margin: 10px 5px; /* Using shorthand margin */
    outline: none !important; /* Hide blue border round object important is for bootstrap*/
    /* Added display and text-align for consistency */
    display: inline-block;
    text-align: center;
}

.modal-footer .action-button-skip:hover,
.modal-footer .action-button-skip:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #AC0656;
    background: #AC0656;
    outline: none !important; /* Hide blue border round object important is for bootstrap*/
}

/*form styles* - comes with the template - but have modded */
#msform {
    text-align: center; /* Using Bootstrap text utility */
    position: relative;
}

#msform fieldset {
    background: #fff;
    border: 0 none;
    border-radius: 0px; /* Using Bootstrap's rounded-0 utility could be an alternative */
    box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.2);
    padding: 10px 10px 30px 10px; /* Using shorthand padding */
    box-sizing: border-box;
    width: 90%;
    margin: 0 5%; /* Using shorthand margin */

    /*stacking fieldsets above each other*/
    position: relative;
}

/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
    display: none;
}

/*inputs*/
#msform input,
#msform textarea {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 0px; /* Using Bootstrap's rounded-0 utility could be an alternative */
    margin-bottom: 10px; /* Can use Bootstrap spacing utility like mb-2 */
    width: 100%; /* Using Bootstrap's w-100 utility could be an alternative */
    box-sizing: border-box;
    font-family: 'Montserrat', arial, verdana;
    color: #2C3E50;
}

#msform input:focus,
#msform textarea:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid #AC0656;
    outline-width: 0;
    transition: All 1.5s ease-in;
    -webkit-transition: All 1.5s ease-in;
    -moz-transition: All 1.5s ease-in;
    -o-transition: All 1.5s ease-in;
}

/*buttons*/
/* Custom action buttons - can be combined with Bootstrap's .btn class */
#msform .action-button,
#msform .action-button-d,
#msform .action-button-previous,
#msform .action-button-skip,
#msform .pinkSubmit {
    width: 100px;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 25px; /* Using Bootstrap's rounded-pill utility could be an alternative */
    cursor: pointer;
    padding: 10px 5px; /* Using shorthand padding */
    margin: 10px 5px; /* Using shorthand margin */
    outline: none !important; /* Hide blue border round object important is for bootstrap*/
    /* Added display and text-align for consistency */
    display: inline-block;
    text-align: center;
    text-decoration: none; /* Ensure no underline for anchor buttons */
    line-height: 1.5; /* Adjust line height if needed */
}


#msform .action-button {
     background: #AC0656;
}

/*added one below be faded when disabled is set*/
#msform .action-button-d {
    background: #AC065663;
}

/*added one below to reinstate pink button but not activate JS by leaving the other class in*/
#msform .pinkSubmit {
    background: #AC0656;
}

#msform .action-button-previous,
#msform .action-button-skip {
     background: #6A00F5;
}


#msform .action-button:hover,
#msform .action-button:focus,
#msform .action-button-previous:hover,
#msform .action-button-previous:focus,
#msform .action-button-skip:hover,
#msform .action-button-skip:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #AC0656;
    background: #AC0656; /* Hover/focus color */
    outline: none !important; /* Hide blue border round object important is for bootstrap*/
}




/*headings*/
/* Using Bootstrap 5 heading classes or display utilities could be an alternative */
.fs-title-larger {
    font-size: 20px;
    color: #2C3E50;
    margin-bottom: 20px; /* Can use Bootstrap spacing utility like mb-4 */
    font-weight: bold;
}


.fs-title-larger-H { /*for health question*/
    font-size: 20px;
    color: #2C3E50;
    margin-bottom: 40px; /* Can use Bootstrap spacing utility like mb-5 */
    font-weight: bold;
}

.fs-title {
    font-size: 18px;
    color: #2C3E50;
    margin-bottom: 20px; /* Can use Bootstrap spacing utility like mb-4 */
    font-weight: normal;
    padding-top: 10px; /* Can use Bootstrap spacing utility like pt-2 */
}


.fs-title-H { /*for health question*/
    font-size: 18px;
    color: #2C3E50;
    margin-bottom: 0px; /* Can use Bootstrap spacing utility like mb-0 */
    font-weight: normal;
    padding-top: 0px; /* Can use Bootstrap spacing utility like pt-0 */
}

.fs-subtitle {
    font-weight: bold;
    font-size: 1.2em;
    color: #666;
    margin-bottom: 0px; /* Can use Bootstrap spacing utility like mb-0 */
    margin-top: 0px; /* Can use Bootstrap spacing utility like mt-0 */
}

p.question-text {
    font-weight: bold;
}

/*progressbar*/
#progressbar {
    margin-bottom: 10px; /* Can use Bootstrap spacing utility like mb-2 */
    overflow: hidden;
    /*CSS counters to number the steps*/
    counter-reset: step;
    /* Using Bootstrap flexbox utilities for layout could be an alternative */
    padding-left: 0; /* Remove default ul padding */
}

#progressbar li {
    list-style-type: none;
    color: white;
    text-transform: uppercase;
    font-size: 9px;
    width: 9%; /* Adjust width based on number of steps and desired layout */
    float: left; /* Consider using Bootstrap flexbox for better alignment */
    position: relative;
    letter-spacing: 1px;
    text-align: center; /* Center text within li */
}

#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 24px;
    height: 24px;
    line-height: 24px; /* Center number vertically */
    display: block;
    font-size: 12px;
    color: #333;
    background: lightgrey;
    border-radius: 50%; /* Use 50% for a perfect circle */
    margin: 0 auto 10px auto; /* Center horizontally and add bottom margin */
}



/*progressbar connectors*/
#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: lightgrey;
    position: absolute;
    left: -50%;
    top: 12px; /* Adjust vertical position to align with circle center */
    z-index: -1; /*put it behind the numbers*/
}

#progressbar li:first-child:after {
    /*connector not needed before the first step*/
    content: none;
}

/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,
#progressbar li.active:after {
    background: #AC0656;
    color: white;
}

/*make the health questions display H not a number*/
#progressbar li:nth-child(11):before {
    content: "H";
    width: 24px;
    height: 24px;
    line-height: 24px; /* Center text vertically */
    display: block;
    font-size: 12px;
    color: #333;
    background: lightgrey;
    border-radius: 50%; /* Use 50% for a perfect circle */
    margin: 0 auto 10px auto; /* Center horizontally and add bottom margin */
}


/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
/* Corrected selector for active health question */
#progressbar li:nth-child(11).active:before,
#progressbar li:nth-child(11).active:after {
    background: #AC0656;
    color: white;
}



/* Form styles to override bootstrap */


/* Style the active class for the input buttons (and buttons on mouse-over) NB don't use .active generically as this just interferes with the li progress list */
/* Targeting Bootstrap's btn-outline-secondary class for the labels */

/* Explicitly set default grey color for the outline secondary buttons */
/* Increased specificity to ensure this rule is applied */
#msform .btn.btn-outline-secondary {
    color: white; /* Set text color to white */
    background-color: #6c757d; /* Set background color to grey */
    border-color: #6c757d; /* Standard Bootstrap secondary border color */
}


#msform .btn.btn-outline-secondary:hover,
#msform .btn.btn-outline-secondary:focus {
    background-color: #AC0656;
    color: white;
    outline: none !important; /* Hide blue border round object important is for bootstrap*/
    box-shadow: none; /* Remove default focus box shadow if any */
    border-color: #AC0656; /* Ensure border color matches background on hover/focus */
}

/* Make active selection pink - as opposed to normal bootstrap secondary button grey */
/* Targeting Bootstrap's btn-check:checked + .btn-outline-secondary class */
#msform .btn-check:checked + .btn.btn-outline-secondary {
    background-color: #AC0656;
    color: white;
    outline: none !important; /* Hide blue border round object important is for bootstrap*/
    border-color: #AC0656; /* Ensure border color matches background when checked */
}


/* Styles for the Bootstrap 5 custom radio/checkbox buttons if you decide to use them */
/* The btn-check approach is the Bootstrap 5 way to style radios/checkboxes as buttons */


/* -----Results Page----- */

#results {
    /* Using Bootstrap 5 spacing and alignment utilities */
    margin: auto; /* Center block element */
    width: 100%; /* Bootstrap's default is 100% within a container/row */
    padding: 50px 10px 30px 10px; /* Using shorthand padding */
    text-align: center; /* Using Bootstrap text utility */
}

#results h1 {
    font-size: 2.5em;
    padding-bottom: 20px; /* Can use Bootstrap spacing utility like pb-4 */
}


/*Canvas HTML5 Bubbles*/
#bubbleContainer {
    width: 100%; /* Bootstrap's default is 100% within a container/row */
    padding: 10px 10px 40px 10px; /* Using shorthand padding */
    text-align: center; /* Using Bootstrap text utility */
    margin: 0 auto; /* Center block element */
    page-break-after: always; /* For printing make a page break after this item  */
}

/* Using Bootstrap's display utilities could be an alternative to inline-block */
#bubble1container,
#bubble2container,
#bubble3container,
#bubble4container,
#bubble5container,
#bubble6container {
    display: inline-block;
    vertical-align: top; /* Align items nicely at the top */
    margin: 0 10px; /* Add some space between bubbles */
}


/*NB don't style the width or height of the bubbles here - using JS */



/*Bubbles (Google Chart overall container div) styles*/

#bubbles {
    width: 70%; /* Consider using Bootstrap grid for responsive width */
    text-align: center; /* Using Bootstrap text utility */
    margin: auto; /* Center block element */
}

#bubbles h4{
    background: #AC0656;
    color: #fff;
    border: dotted 1px; /* Consider using Bootstrap border utilities */
    padding: 10px; /* Can use Bootstrap spacing utility like p-2 */
}


/* Google chart styles */

#chart_container{
    margin:0 !important;
}

#series_chart_div {
    border: 1px dotted lightgrey; /* Consider using Bootstrap border utilities */
    min-height: 500px;
    margin: auto; /* Center block element */
    width: 100%; /* Using Bootstrap's w-100 utility could be an alternative */
    margin-bottom: 20px; /* Can use Bootstrap spacing utility like mb-4 */
    text-align: center; /* Using Bootstrap text utility */
}
/* print styles */

#print {
    width: 100%; /* Using Bootstrap's w-100 utility could be an alternative */
    padding-bottom: 20px; /* Can use Bootstrap spacing utility like pb-4 */
    text-align: center; /* Using Bootstrap text utility */
    margin: auto; /* Center block element */
}

#print button {
    background-color: #AC0656; /* Consider using Bootstrap button classes and custom styles */
    color: #fff;
    padding: 10px; /* Can use Bootstrap spacing utility like p-2 */
    border: none; /* Remove default button border */
    border-radius: 0.25rem; /* Add a slight border radius like Bootstrap buttons */
    cursor: pointer;
}


/*table styles*/

/* for printing - table only */

/* not in use yet so currently keeping everything on one page table {
page-break-before: always;
} */

/* Consider using Bootstrap table classes like .table, .table-bordered, .table-striped */
table {
    padding: 20px; /* Can use Bootstrap spacing utility like p-4 */
    margin-bottom: 20px; /* Can use Bootstrap spacing utility like mb-4 */
    border: dotted 1px grey; /* Consider using Bootstrap border utilities */
    width: 100%; /* Make table responsive */
    border-collapse: collapse; /* Collapse borders */
}

tr {
    /* Padding on tr is not standard CSS, apply to td instead */
    /* padding: 20px; */
}

th,
td {
    padding: 10px; /* Can use Bootstrap spacing utility like p-2 */
    text-align: center; /* Using Bootstrap text utility */
    border: dotted 1px grey; /* Consider using Bootstrap border utilities */
}

th {
    background: #AC0656;
    color: #fff;
    border: dotted 1px grey; /* Consider using Bootstrap border utilities */
}

#tableOfresponses,
#tableOfweighted,
#tablePhysicalHealth {
    margin: auto; /* Center block element */
    width: 70%; /* Consider using Bootstrap grid for responsive width */
    margin-bottom: 20px; /* Can use Bootstrap spacing utility like mb-4 */
    /* page-break-after: always; /* For printing make a page break after this item */
}


/* Background colours for the table to match the bubble colours */
/* These classes can be applied to table rows or cells */
.activityT {
    background-color: #7298DA; /* original #5885d3 with white text*/
    color: #000;
}

.belongingT {
    background-color: #F1706A; /* original #ee554d with white text */
    color: #000;
}

.choiceT {
    background-color: #ffab57; /* original #ffab57 with white text */
    color: #000;
}

.hopeT {
    background-color: #33AD56; /* original #33ad56 with white text */
    color: #000;
}

.selfperceptionT {
    background-color: #D874D4; /* original #b633ab with white text */
    color: #000;
}

.wellbeingT {
    background-color: #33B0CF; /* original #33b0cf with white text*/
    color: #000;
}


/* Physical Health Table */
/* Already grouped with other tables above */


/* heading style */

#yourScoreNum {
    font-weight: bold;
    font-size: 10em;
    color: #AC0656;
}

/* footer styles */

#footer {
    margin: auto; /* Center block element */
    width: 100%; /* Using Bootstrap's w-100 utility could be an alternative */
    text-align: center; /* Using Bootstrap text utility */
    font-size: 0.8em;
}

#builtwith {
    width: 100%; /* Using Bootstrap's w-100 utility could be an alternative */
    text-align: center; /* Using Bootstrap text utility */
    display: inline-block; /* Consider using Bootstrap display utilities */
    padding: 20px; /* Can use Bootstrap spacing utility like p-4 */
}

#html5,
#cssvalid {
    display: inline-block; /* Consider using Bootstrap display utilities */
    margin: 0 10px; /* Add some space between icons */
}