:root {
    --pave-bg-color: #0064a6; /*#092B9C old Pave Color: #51529D*/
    --pave-border-radius: 0.5em;
    --pave-working-grey: #C8C8C8FF
}

.body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}


.menu {
    background-color: var(--pave-working-grey);
    overflow: hidden;
    max-width: 50%;
    min-width: 10%;
    position: relative;
    padding: .5em;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.whiteBox {
    display: flex;
    background-color: white;
    color: black;
    padding: var(--pave-border-radius);
    border-radius: var(--pave-border-radius);
    overflow: hidden;
    margin: 0 0 .5em 0;
}

.blueBox {
    background-color: var(--pave-bg-color);
    color: white;
    padding: var(--pave-border-radius);
    border-radius: var(--pave-border-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0 0 .5em 0;
}

.instructionVideo {
    width: 30%;
}

.workspaceArea {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto !important;
    overflow: hidden;
}

.instructions {
    overflow: auto;
    flex-direction: column !important;
    flex-shrink: 0.5;
}

.instructions .accordion-button {
    padding: .5em 1em .5em 1em;
    color: white !important;
    background-color: var(--pave-bg-color) !important;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.instructions .accordion-body {
    margin: 0;
    padding: 0.5em 0.5em 0 0.5em;
}

.instructionsText {
    height: 100%;
    overflow: auto;
}

.instructionsText ul {
    list-style-type: disc;
    padding: 1em;
}

.instructionsButton {
    flex: 1;
    margin: 0 0.5em 0 0.5em;
    padding: 0.25em;
}

.instructionsButton h3 {
    margin: 0;
}

.navigationBar {
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    flex-shrink: 0;
}

.navigationBar input {
    width: 3em;
}

.navigationBar button {
    margin: 0 0.5em 0 0.5em;
}

.navigationBar p {
    margin: 0 0.5em 0 0.5em;
    flex-shrink: 0;
}

.notCheckedHint {
    color: red;
}

.resizeHandleX {
    position: absolute;
    top: 0;
    right: -10px; /* Adjust this value based on your design */
    bottom: 0;
    width: 20px; /* Adjust the width as needed */
    cursor: ew-resize; /* Initial cursor style */
    background-color: transparent; /* Adjust this based on your design */
}

.resizeHandleY {
    position: absolute;
    left: 0;
    bottom: -10px; /* Adjust this value based on your design */
    right: 0;
    height: 20px; /* Adjust the width as needed */
    cursor: ns-resize; /* Initial cursor style */
    background-color: transparent; /* Adjust this based on your design */
}

.navAndWorkspace {
    display: flex;
    flex: 1 1 auto !important;
    flex-direction: row;
    overflow: hidden;
}

.workspace {
    display: flex;
    flex: 1 1 auto !important;
    overflow: hidden;
}

.page {
    display: flex;
    flex: 1 1 auto !important;
    flex-direction: row;
    overflow-y: hidden;
    overflow-x: auto;
    height: 100%;
}

.pageModifications {
    display: flex;
    flex-direction: column;
    background-color: var(--pave-working-grey);
}

.pageModifications .pageViewButtons {
    margin-left: 0;
}

.showPageMenu {
    --bs-btn-bg: var(--pave-working-grey);
    border: 0;
    border-radius: 0;
    padding: 0;
}

.canvasAndNav {
    display: flex;
    flex: 1 1 auto !important;
    flex-direction: column;
    overflow: hidden;
}

.canvasAndNav h3 {
    margin-top: 1em;
    text-align: center;
    width: 100%;
}

.canvas {
    display: flex;
    flex: 1 1 auto !important;
    overflow: auto;
    text-align: center;
    position: relative;
}

.pageCanvas {
    display: flex;
    border:1px solid #000000;
    margin: 0 auto;
    flex-shrink: 0;
}

.modal-container {
    position: relative;
}
.modal-container .modal, .modal-container .modal-backdrop {
    position: absolute;
}

.btn-light {
    --bs-btn-border-color: black;
    --bs-btn-hover-border-color: black;
    --bs-btn-active-border-color: black;
    --bs-btn-disabled-border-color: black;
}

.pageViewButtons {
    margin: 0.5em;
}

#zoomInButton {
    margin-right: 0.5em;
}

.buttonRow {
    margin: 0 -0.5em 0.5em -0.5em;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
}

.actionButton {
    flex: 1;
    margin: 0 0.5em 0 0.5em;
    padding: 0.25em;
    --bs-btn-bg: var(--pave-bg-color);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: #031348;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-disabled-bg: #99a4cb;
    --bs-btn-disabled-border-color: none;
    --bs-btn-active-bg: #ffffff;
    --bs-btn-active-color: #000000;
}

.blueBoxButton {
    flex: 1;
    margin: 0 0.5em 0 0.5em;
    padding: 0.25em;
}

.scrollDownButton {
    position: sticky;
    bottom: 0;
    margin: 0;
    border: 0;
    padding: 0;
    left: 48%;
    border-radius: 50%;
    --bs-btn-bg: white;
    --bs-btn-border-color: rgba(0,0,0,0);
    --bs-btn-hover-bg: var(--pave-working-grey);
    --bs-btn-hover-border-color: rgba(0,0,0,0);
    color: var(--pave-bg-color);
}

.formGroup {
    position: relative;
}

.loadingSymbol {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.pdfDownloadProcessing {
    display: flex;
    flex-direction: row;
    margin: 1em 0 1em 0;
}

.pdfDownloadProcessing p {
    margin-right: .5em;
}

em {
    border: black solid 1px;
    border-radius: 2px;
    padding: 0 0.5em 0 0.5em;
    background-color: #f8f9fa;
}

.tutorialVideoButton {
    width: 100%;
    margin: 0 0 0.5em 0;
}

.helpButton {
    border-radius: 1em;
    width: 2em;
    height: 2em;
    padding: 0;
}

.accessibilityReportModal {
    min-width: 80%;
}

.accessibilityReportUl {
    list-style-type: disc !important;
}

.accessibilityReportCheckFailed {
    --bs-accordion-btn-color: red;
}

.accessibilityReportCheckSuccess {
    --bs-accordion-btn-color: green;
}

.accessibilityReportNoCheck {
    --bs-accordion-btn-color: grey;
}

.sso-login-container {
    text-align: center;
    margin-top: 1em;
    display: flex;
    flex:1 1 auto
}

.sso-login-button {
    margin: 0 0.5em 0 0.5em;
    display: flex;
    flex:1 1 auto;
    justify-content:center;
}

.faq-container {
    background-color: var(--pave-working-grey);
    padding: 1em;
    margin-bottom: 1em;
    border-radius: var(--pave-border-radius);
}

.faq-container h3 {
    margin-top: 0 !important;
    text-align: center;
}