@import url("/static/global-font.css");

body {
    display: flex;
    flex-direction: row;  /* Aligns child elements horizontally */
    justify-content: space-between;  /* Distributes child elements evenly with space in between */
}

#survey, #testingTable {
    height: 95vh;
    width: 100%;  /* Initially, it takes up the full width */
    transition: width 0.3s;  /* Smooth transition for width changes */
}

.hidden {
    display: none;
}

@media print {
    .buttonContainer,
    #survey,
    #testingTable,
    #loadingContainer {
        display: none !important;
    }

    body {
        display: block;
    }

    #outcomeTable {
        display: block !important;
    }
}

.half-width {
    width: 50%;  /* Set the width to 50% of the parent container */
}



#testingTable {
    height: 870px; /* Adjust the height as per your requirement */
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 15px;
}



/* Table styles */
#testingTable table {
    table-layout: relative;
    width: 100%;   /* Table width */
    border-collapse: collapse;  /* Collapsing the borders for a cleaner look */
    margin-top: 20px;   /* Margin at the top for separation */
    border: 1px solid #e0e0e0;  /* Border around the table */
}

#testingTable td, #testingTable th {
    border: 1px solid #e0e0e0;   /* Border around table cells */
    padding: 8px 12px;   /* Padding within each cell */
    text-align: left;   /* Align text to the left within cells */
}



#testingTable th {
    background-color: #f5f5f5;  /* Light gray background for header cells */
    font-weight: bold;   /* Make header text bold */
}

#testingTable tr:nth-child(even) {
    background-color: #f9f9f9;   /* Alternate row background color for better readability */
}

#testingTable caption {
    padding: 10px;
    font-size: 1.2em;   /* Increase font size for table caption */
    font-weight: bold;
    margin-bottom: 10px;   /* Margin at the bottom for separation */
    background-color: #e0e0e0;   /* Light gray background for table caption */
}

#testingTable h1 {
    font-size: 1.5em;   /* Increase font size for h1 */
    margin-top: 30px;   /* Top margin for separation */
}

#testingTable h3 {
    font-size: 1.3em;   /* Increase font size for h3 */
    margin-top: 20px;   /* Top margin for separation */
}




#testingTable td:nth-child(1), #testingTable th:nth-child(1) {
    width: 6%;
}

#testingTable td:nth-child(2), #testingTable th:nth-child(2) {
    width: 30%;
}

#testingTable td:nth-child(3), #testingTable th:nth-child(3) {
    width: 5%;
}
#testingTable td:nth-child(4), #testingTable th:nth-child(4) {
    width: 5%;
}
#testingTable td:nth-child(5), #testingTable th:nth-child(5) {
    width: 5%;
}
#testingTable td:nth-child(6), #testingTable th:nth-child(6) {
    width: 5%;
}
#testingTable td:nth-child(7), #testingTable th:nth-child(7) {
    width: 5%;
}
#testingTable td:nth-child(8), #testingTable th:nth-child(8) {
    width: 5%;
}
#testingTable td:nth-child(9), #testingTable th:nth-child(9) {
    width: 5%;
}
#testingTable td:nth-child(10), #testingTable th:nth-child(10) {
    width: 10%;
}

#outcomeTable .targetIcons {
    padding: 0;
    margin-right: 10px;
    margin-bottom: 5px;
    vertical-align: middle;
    height: 60px;

}

#outcomeTable .kokText {
    font-size: 1.5625rem;
    padding-right: 50px;
    padding-left: 10px;
}

#outcomeTable .kokText ul {
    margin: 0 !important;
    padding: 0px !important;
}

#outcomeTable .kokText li {
    margin-left: 20px;
    padding: 0px;
    font-size: 1.25rem;
    width: 700px;
    padding-inline-start: 0px;
    line-height: 1.0;
}

#outcomeTable .subTargets {
    font-size: 1.875rem;
    left: 0;
    bottom: 0;
    right: 0;
    border: solid black 1px;
    border-radius: 10px;
    padding: 10px;
    background: grey;
    text-align: center;
    width: 500px;
    min-height: 70px;
    display: flex;
    align-items: center;
    font-weight: bold;
    margin: 5px;
}

#outcomeTable .subTargetIcons {
    padding: 0;
    margin-right: 10px;
    vertical-align: middle;
    height: 70px;
}



#outcomeTable .subTargets a {
    text-decoration: none;
    color: white;
}

#outcomeTable table {
    border-collapse: separate;
    border: solid black 1px;
    border-radius: 10px;
    background: #f2f2f2;
    border-spacing: 5px;
    margin-bottom: 30px;
    width: 100%;
    border-spacing: 5px;
    font-size: 1.25rem;
}

#outcomeTable #sections-container {
    display: flex;
}

#outcomeTable .section {
    border: 1px solid #ddd;
    padding: 10px;
    margin: 10px;
    flex: 1;
    max-height: 180px; /* height for 5 items + header */
    overflow-y: auto;
}

#outcomeTable .section h3 {
    background-color: #f9f9f9;
    margin-top: 0;
    padding: 5px;
    font-size: 1rem;
    border-bottom: 1px solid #ddd;
}


#outcomeTable caption {
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    font-size: 2.5rem;
    margin: 0px;
    padding: 0px;
    text-align: left;
}


#outcomeTable .logo {
    position: absolute;
    top: 25px;
    right: 10px;
    width: 240px;
    height: auto;
}

#outcomeTable .greenSubGoal {
    background-color: #519B2F;
}

#outcomeTable .yellowSubGoal {
    background-color: #D98805;
}

#outcomeTable .greySubGoal {
    background-color: #717171;
}

#outcomeTable .redSubGoal {
    background-color: #BC3100;
}

#outcomeTable .green {
    color: #519B2F;
    padding: 5px;
    border-radius: 5px;
    margin: 5px;
}

#outcomeTable .yellow {
    color: #D98805;
    padding: 5px;
    border-radius: 5px;
    margin: 5px;
}

#outcomeTable .grey {
    color: #717171;
    padding: 5px;
    border-radius: 5px;
    margin: 5px;
}

#outcomeTable .red {
    color: #BC3100;
    padding: 5px;
    border-radius: 5px;
    margin: 5px;
}


#outcomeTable ul {
    list-style-type: disc;
    padding-left: 20px;
    margin: 0;
}


.page-break {
    page-break-after: always;
}

.buttonContainer {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000;  /* ensure it's above other content */
    display: flex;
    flex-direction: column;
    gap: 10px;  /* space between buttons */
}

.buttonContainer button {
    background-color: #007BFF;  /* Blue */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.3s;
}

.buttonContainer button:hover {
    background-color: #0056b3;  /* Darker blue on hover */
}

.buttonContainer button:active {
    background-color: #004080;  /* Even darker blue on active */
}

table.specialAnswerGroupContainer caption {
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    font-size: 2.5rem;
    margin: 0px;
    padding: 0px;
    text-align: left;
}

#colorPickerModal {
    position: absolute; /* Will ensure it stays centered even on scroll */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
}

/* Modal styling */
#colorPickerModal .modal-content {
    padding: 20px;
    background-color: #f4f4f4;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 90%;  /* Increase the maximum width for the modal */
    margin: 20px auto;  /* Center the modal with some vertical spacing */
    width: 80%; /* This will set the modal to be 80% of the viewport width */
    max-height: 80vh;
    overflow-y: auto;
}

#colorPickerModal h4 {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

/* Style for each color picker div */
#colorPickerModal .modal-content > div {
    width: 100%;  /* Occupy full width */
    display: flex;
    flex-direction: column;  /* Stack items vertically */
    align-items: flex-start;  /* Align items to the start */
    margin-bottom: 10px;
}

/* Style for labels */
#colorPickerModal label {
    font-weight: bold;
    display: block;  /* Display label as block to occupy full width */
    margin-bottom: 5px;  /* Small gap between the label and dropdown */
}

/* Style for select dropdowns */
#colorPickerModal select {
    width: 100%;  /* Occupy full width */
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Modal footer styles */
#colorPickerModal .modal-footer {
    padding: 10px 20px;
    background-color: #e4e4e4;
    border-top: 1px solid #ccc;
    text-align: right;
}

/* Style for the close button */
#colorPickerModal .btn {
    background-color: #009879;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
}

#colorPickerModal .btn:hover {
    background-color: #00765e;
}

#colorPickers {
    max-width: 80%;
    margin: 0 auto;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #f5f5f5;
    border-radius: 8px;
}

#colorPickers > div {
    margin-bottom: 20px;
}

#colorPickers h5 {
    text-align: center;
    margin-top: 20px;
    border-top: 1px solid #d1d1d1;
    padding-top: 10px;
}

#outcomeTable .greentable {
    padding: 5px;
    border: solid 5px #519B2F;
    margin: 5px;
}

#outcomeTable .yellowtable {
    padding: 5px;
    border: solid 5px #D98805;
    margin: 5px;
}

#outcomeTable .greytable {
    padding: 5px;
    border: solid 5px #717171;
    margin: 5px;
}

#outcomeTable .redtable {
    padding: 5px;
    border: solid 5px #BC3100 !important;
    margin: 5px;
}


#outcomeTable ul {
    list-style-type: disc;
    padding-left: 20px;
    margin: 0;
}


.page-break {
    page-break-after: always;
}

.buttonContainer {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000;  /* ensure it's above other content */
    display: flex;
    flex-direction: column;
    gap: 10px;  /* space between buttons */
}

.buttonContainer button {
    background-color: #007BFF;  /* Blue */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.3s;
}

.buttonContainer button:hover {
    background-color: #0056b3;  /* Darker blue on hover */
}

.buttonContainer button:active {
    background-color: #004080;  /* Even darker blue on active */
}

table.specialAnswerGroupContainer caption {
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    font-size: 2.5rem;
    margin: 0px;
    padding: 0px;
    text-align: left;
}


#loadingContainer {
    position: absolute;
    top: 50%;         /* Move to the middle vertically */
    left: 50%;        /* Move to the middle horizontally */
    transform: translate(-50%, -50%); /* Center the container based on its own width and height */
    display: flex;           /* Makes this container a flex container */
    justify-content: center; /* Center horizontally within the container */
    align-items: center;     /* Center vertically within the container */
    width: 80vh;
    height: 80vh;
    z-index: 1000;  /* Ensure it's above other content */
}

#loadingMessage {
    font-size: 2.5rem;
    font-weight: bold;
}


/* Targeting the table directly using its ID */
#outcomeReducedTemplate {
    width: 100%;  /* Set this to whatever width you desire, or remove if not needed */
    border-collapse: collapse;  /* Removes the spacing between cells */
}

/* Styling for the main content column */
#outcomeReducedTemplate #mainContentTd {
    padding: 10px;  /* You can adjust padding as needed */
    vertical-align: top;  /* Align content to the top of the cell */
}

/* Styling for the special answers column */
#outcomeReducedTemplate #specialContentTd {
    width: 550px;
    padding: 10px;  /* You can adjust padding as needed */
    vertical-align: top;
    font-size: 1.25rem;  /* Align content to the top of the cell */
}

/* Optional: Styling for the special answers div inside the td */
#outcomeReducedTemplate .specialAnswer {
    margin-bottom: 10px; /* Adds spacing between special answers */
}

/* Optional: Styling for images and links inside the table */
#outcomeReducedTemplate img {
    max-width: 100%;
    height: auto;
}

#outcomeReducedTemplate a {
    color: #007bff;  /* Example link color, adjust as desired */
    text-decoration: none;  /* Removes underlines from links */
}

#outcomeReducedTemplate a:hover {
    text-decoration: underline;  /* Adds underline when hovering over links */
}

#outcomeReducedTemplate {
    background-color: #FFE6DD !important; /* Replace '#yourColorHere' with your desired color. */
}