:root {
    --mdc-theme-primary: #55c2da;
    --mdc-theme-on-primary: #FFFFFF;
    --mdc-theme-secondary: #5adbb5;
    --mdc-theme-on-secondary: #442C2E;
    --mdc-theme-surface: #FFFBFA;
    --mdc-theme-on-surface: #442C2E;
    --mdc-theme-background: #FFFFFF;
    --mdc-theme-on-background: #442C2E;
    --mdc-outlined-button-outline-color: var(--mdc-theme-primary);
    --mdc-outlined-button-label-text-color: var(--mdc-theme-primary);
    --max-width-input: 550px;
    --min-width-input: 200px;
    --q-and-a-margin: 24px;
}

.bold {
    font-weight: bold;
}

.material-icons:not(.mdc-button__icon) {
    color: var(--mdc-theme-primary);
}

.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: var(--mdc-theme-primary);
}
.primary .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
.primary .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.primary .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
    border-color: var(--mdc-theme-primary);
}

.primary-color {
    color: var(--mdc-theme-primary);
}

.secondary-color {
    color: var(--mdc-theme-secondary);
}

.secondary {
    background-color: var(--mdc-theme-secondary) !important;
}

.link-secondary {
    color: var(--mdc-theme-secondary);
}


body {
    margin: 0;
}

header {
    border-bottom: 1px solid #e5e5e5;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}


#main-container {
    margin: 12px 12px 48px 12px;
}

#logo {
    color: var(--mdc-theme-primary);
    font-weight: bold;
    margin-right: 18px;
}

#question-container {
    display: flex;
    flex-direction: column;
}


.align-items-center {
    display: flex;
    align-items: center;
}

.answer-margin {
    margin-left: var(--q-and-a-margin);
    margin-top: 12px;
}

.answer-width {
    max-width: calc(var(--max-width-input) - var(--q-and-a-margin));
    min-width: var(--min-width-input);
    width: 100%;
}

.block-display {
    display: block;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.game-title {
    font-weight: bold;
    margin-right: 10px;
}

.game-url-link {
    color: var(--mdc-theme-primary);
    cursor: pointer;
    margin-left: 12px;
    text-decoration: underline;
}

.margin-btm-12 {
    margin-bottom: 12px;
}

.margin-right-24 {
    margin-right: 24px;
}

.margin-top-12 {
    margin-top: 12px;
}

.margin-top-24 {
    margin-top: 24px;
}

.margin-top-48 {
    margin-top: 48px;
}

.margin-top-question {
    margin-top: var(--q-and-a-margin);
}

.mdc-checkbox {
    margin-left: 2px;
}

.mdc-icon-button {
    margin-left: 2px;
}

.no-margin {
    margin: 0 !important;
}

.question-width {
    max-width: var(--max-width-input);
    min-width: calc(var(--min-width-input) + var(--q-and-a-margin));
    width: 100%;
}

.space-between {
    display: flex;
    justify-content: space-between;
}

.text-btn-with-margin
{
    margin-bottom:20px;
    margin-top:20px;
}