body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

/* Primary Color */
.btn,
.nav-wrapper {
    background-color: #000000;
}

/* Secondary Color */
.btn-secondary {
    background-color: #FFFFFF;
    color: #000000;
    /* Text color for the white button */
}

/* Accent Colors */
.btn-accent-1 {
    background-color: #666666;
}

.btn-accent-2 {
    background-color: #333333;
}

/* Background Color */
body {
    background-color: #FAFAFA;
}

/* Error Color */
.btn-error {
    background-color: #FF3333;
}

/* Success Color */
.btn-success {
    background-color: #2e663c;
}

/* Text Color for Primary buttons */
.btn,
.nav-wrapper {
    color: #FAFAFA;
}

/* Footer Colors */
.page-footer {
    background-color: #333333;
}

.page-footer .container,
.page-footer .container .text-lighten-4 {
    color: #FAFAFA;
}

.page-footer a {
    color: #666666;
}

.page-footer .container .text-lighten-4 a {
    color: #999999;
    /* A slightly lighter gray */
}

.page-footer .footer-copyright {
    background-color: #2E2E2E;
}

.btn:hover,
.btn:active,
.btn:focus {
    background-color: #FF6600;
}

/* For raised buttons */
.btn:not(.disabled):hover {
    background-color: #FF6600;
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.circle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto;
    margin-top: 40px;
}

.circle-3 {
    width: 70%;
}

.circle-4 {
    width: 80%;
}

.circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FF6600;
    color: white;
    font-weight: bold;
    margin: 0;
    /* Adjust the margin to reduce the gap */
    position: relative;
    /* Added for z-index to work */
    z-index: 1;
    /* Ensures the circle is on top of the line */
}

.circle-inactive {
    background-color: #333333;
}

.line {
    height: 2px;
    background-color: #FF6600;
    flex: 1;
    position: relative;
}

.line-inactive {
    background-color: #333333;
}

.circle-text {
    text-align: center;
    margin-top: 10px;
}

.code-block {
    background-color: #f4f4f4;
    /* light grey background */
    border-radius: 5px;
    /* rounded corners */
    padding: 20px;
}

.code-block code {
    color: #333;
    /* dark text color for code */
    font-family: "Courier New", Courier, monospace;
}

.emphasis {
    color: #FF6600;
}

pre {
    white-space: pre-wrap;
    /* CSS3 */
    white-space: -moz-pre-wrap;
    /* Firefox */
    white-space: -pre-wrap;
    /* Opera <7 */
    white-space: -o-pre-wrap;
    /* Opera 7+ */
    word-wrap: break-word;
    /* IE */
    overflow-wrap: break-word;
    /* CSS3 */
}

.card-stacked {
    width: 100%;
}

.list>li {
    list-style-type: circle !important;
    margin-left: 20px;
}

.underConstruction {
    color:#999999;
}

.flow-card {
    height: 550px;
}

.section-header {
    text-align: center;
}

.centered {
    text-align: center;
    width: 100%;
}

.full-width {
    width: 100%;
}

.flow-submit-container {
    margin-top: 25px;
    padding: 0 10px;
}

.justified {
    text-align: justify;
}

.determinate {
    background-color: #FF6600 !important;
}

.progress {
    background-color: #9F9F9F !important;
}

.no-margin {
    margin: 0;
}

.qr-container {
    margin: 15px 0;
}

.page-header {
    font-size: 2.1rem;
    text-align: center;
}

@media screen and (max-width: 600px) {
    .page-header {
        font-size: 1.5rem;
    }

    .flow-card {
        height: 100%;
    }

    .page-footer .footer-copyright {
        min-height: 0;
    }

    .footer-copyright {
        font-size: 0.7rem;
    }

    .intro-section {
        text-align: justify;
    }

    code {
        font-size: 0.8rem;
    }

    .code-block {
        padding: 15px;
    }

    .circle-3 {
        width: 80%;
    }

    .circle-4 {
        width: 90%;
    }
}