oauth-playground-client/src/css/style.css

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: #33FF66;
}

/* 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-large:hover,
.btn-small:hover {
    background-color: #FF6600;
}

/* For raised buttons */
.btn:not(.disabled):hover,
.btn-large:not(.disabled):hover,
.btn-small: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;
    width: 70%;
    margin: 0 auto;
    margin-top: 40px;
}

.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;
}