@media only screen and (min-width: 1200px) {
    .ui.ui.ui.container:not(.fluid) {
        width: 770px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .ui.ui.ui.container:not(.fluid) {
        width: 790px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media only screen and (max-width:768px) {
    .ui .grid .three.wide.column {
        width: 100% !important;
        text-align: center;
    }
    .ui .grid .thirteen.wide.column {
        width: 100% !important;
    }
}


body {
    background: #F8F8F8;
    padding: 1em;
}

.logo {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.logo img{
    width: 50px;
    max-height: 50px;
}

.menu-container {
    margin-bottom: 1em;
    margin-top: 1rem;
}

.menu-container .ui.item.menu {
    justify-content: normal;
}

#skip-link {
    position:absolute;
    top:-200px;
}

#skip-link:focus {
    position:absolute;
    top:8px;
}

/* Contrast ratio fixes */

a {
    color: #054ea7;
}

a:hover, a:focus {
    color: #013a80;
}

footer {
    font-size: x-small;
    text-align: center;
}

.teal.button.ui.icon {
    background-color: #006970;
}

footer a {
    color: #5b5b5e;
    text-decoration: underline;
}

.ui.primary.button {
    background-color: #1c71d8;
}

.ui.primary.button:hover, .ui.primary.button:focus {
    background-color: #054ea7;
}

.ui.button:disabled, .ui.buttons .disabled.button:not(.basic), .ui.disabled.active.button, .ui.disabled.button, .ui.disabled.button:hover {
    opacity: .65 !important;
}

.ui.menu .active.item {
    font-weight: bold;
}

.ui.link.menu .item:hover, .ui.menu .dropdown.item:hover, .ui.menu .link.item:hover, .ui.menu a.item:hover, .ui.link.menu .item:focus, .ui.menu .dropdown.item:focus, .ui.menu .link.item:focus, .ui.menu a.item:focus {
    color:#054ea7;
}

/* end of contrast ratio fixes */

.ui.masthead .ui.header {
    margin-bottom: 1em;
}
.ui.masthead .ui.text p {
    margin-bottom: 1em;
    margin-top:1em;
}

.pagination {
    border-radius: .28571429rem;
    overflow: hidden;
}

.pagination .ui.button:not(.disabled) {
    color:#054ea7;
    background-color: rgba(0,0,0,0);
}

.ui.button.disabled {
    color: rgba(0,0,0,0.65) !important;
}

.pagination .ui.button:not(.disabled):not(.active):hover, .pagination .ui.button:not(.disabled):not(.active):focus {
    color:#054ea7;
    background-color: #ddd;
}

.pagination .ui.button.active {
    background-color: rgba(0,0,0,0);
    cursor: default;
    border-bottom: 4px solid #1c71d8;
    box-sizing: content-box;
    color:rgba(0,0,0,.95);
}

.pagination .ui.button:disabled, .ui.buttons .disabled.button:not(.basic), .ui.disabled.active.button, .ui.disabled.button, .ui.disabled.button:hover {
    opacity: 1 !important;
    background-color: rgba(0,0,0,0)
}

.disabled.ui.button {
    color: rgba(0,0,0,1);
}

.progress_bar:first-child {
    margin: 1em 0 .28571429rem 0;
}

.ui.label.token-label {
    padding-left: 0;
}

.send-code-button {
    background: none!important;
    border: none;
    padding: 0!important;
    text-decoration: underline;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.87) !important;
    }

.send-code-button:disabled {
    text-decoration: none;
    cursor: auto;
    color: rgba(0, 0, 0, 0.524) !important;
}

#countdown {
    font-size: 1.5em;
}

/* Fix button appearance for semantic-ui on webkit */
[type=button] {
    -webkit-appearance: none;
}

.ui.corner.labeled.input .ui.dropdown .dropdown.icon {
    margin-right: 1.5em;
}

i.massive.massive.massive.portrait.icon, i.massive.massive.massive.portrait.icons {
    font-size: 8em;
    margin-bottom: 15px;
}
.profile-form label img{
    cursor: pointer;
}

.profile-form label i{
    cursor: pointer;
}

.dropdown-active {
    background: rgba(0,0,0,.05) !important;
}

/* NO JS */

select.ui.multiple.dropdown {
    height: auto;
    max-height: 300px;
}

select.ui.multiple.dropdown option[selected] {
    background-color: #F4F4F4;
    font-weight: 700;
    border: 0 solid transparent;
    border-radius: .28571429rem;
    padding: .35714286em .78571429em;
    margin: .14285714rem .28571429rem .14285714rem 0;
    box-shadow: 0 0 0 1px rgba(34,36,38,.15) inset;
}

.hidden {
    display: none;
}

.about-links {
    text-align: center
}

.no-radius {
    border-radius: 0
}

/* PASSWORD STRENGTH */
.strength0 {
    width: 0%!important;
}

.strength25 {
    width: 25%!important;
}

.strength50 {
    width: 50%!important;
}

.strength75 {
    width: 75%!important;
}

.strength100 {
    width: 100%!important;
}

/* MEDIA QUERIES */

@media (prefers-color-scheme: dark) {
    .logo img {
        filter: invert(.8) !important;
    }

    body, .ui.card .bottom, .ui.toggle.checkbox label:hover::before {
        background-color: #222222;
    }
    .ui.segment, .ui.menu, .ui.table {
        background-color: #353535 !important;
    }
    .ui a:visited, .ui a:visited .icon {
        color: rgba(255,255,255,.87) !important;
    }
    nav.ui a:not(.label), nav.ui a:not(.label) .icon {
        color: #F4F4F4 !important;
    }

    .ui a:not(.label), .ui a:not(.label) .icon, footer a {
        color: rgba(165, 171, 253, 0.87) !important;
    }

    .ui a:not(.label):hover, .ui a:not(.label) .icon:hover, footer a:hover, .ui a:focus, .ui a .icon:focus, footer a:focus {
        color: rgba(202, 206, 255, 0.87) !important;
    }

    .ui.link.menu .item:hover, .ui.menu .dropdown.item:hover, .ui.menu .link.item:hover, .ui.menu a.item:hover, .ui.link.menu .item:focus, .ui.menu .dropdown.item:focus, .ui.menu .link.item:focus, .ui.menu a.item:focus {
        color: rgba(202, 206, 255, 0.87) !important;
    }

    .ui.link.menu .item:hover i.icon, .ui.menu .dropdown.item:hover i.icon, .ui.menu .link.item:hover i.icon, .ui.menu a.item:hover i.icon, .ui.link.menu .item:focus i.icon, .ui.menu .dropdown.item:focus i.icon, .ui.menu .link.item:focus i.icon, .ui.menu a.item:focus i.icon {
        color: rgba(202, 206, 255, 0.87) !important;
    }

    .ui.primary.button, a.ui.primary.button {
        background-color: #4e79ac !important;
        color: #F4F4F4 !important;
    }

    .ui.primary.button:focus, .ui.primary.button:hover, a.ui.primary.button:focus, a.ui.primary.button:hover {
        background-color: #406694 !important;
        color: #F4F4F4 !important;
    }

    #ellipsis-next .disabled.ui.button {
        background-color: #c0c1c2;
        opacity: 1 !important;
    }

    body, .ui.menu .active.item, .ui.form:not(.inverted) .field > label:not(.button), .ui.info.message .header, .ui.input, .ui.toggle.checkbox label, .ui.header, .ui.form .field > label, .ui.list .list > .item > .content, .ui.list > .item > .content, .ui.card, .ui.cards > .card, .ui.card .bottom.button:hover, .ui.card .bottom.button:focus {
        color: rgba(255,255,255,.87);
    }
    .ui.card .bottom, .ui.link.menu .item, .ui.menu .dropdown.item, .ui.menu .link.item, .ui.menu a.item, .ui.icon.menu .item, .ui.header .sub.header, .ui.label, table tbody tr td, .ui.card .bottom.button:hover, .ui.card .bottom.button:focus {
        color: rgba(255,255,255,.7);
    }
    .ui.selection.dropdown, .ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="file"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="text"], .ui.form input[type="time"], .ui.form input[type="url"] {
        background: #222222 !important;
        color: rgba(255,255,255,.87) !important;
    }
    .ui.menu .active.item {
        background: rgba(0,0,0,.20);
    }
    .ui.menu .active.item:hover {
        background: rgba(0,0,0,.30);
    }
    table tbody tr td .ui.label:hover {
        color: #353535 !important;
    }
    .ui.corner.label {
        border-color: rgba(0,0,0,.2);
    }
    .ui.label, table tbody tr td, .ui.card .bottom.button:hover, .ui.card .bottom.button:focus {
        background-color: #353535;
    }
    .ui.button {
        background-color: #282828;
        color: #c0c1c2;
    }
    .ui.button:hover, .ui.button:focus {
        background-color: #181818;
        color: #c0c1c2;
    }
    .ui.basic.negative.button, .ui.basic.negative.buttons .button {
        box-shadow: 0 0 0 1px #ffb7b7 inset;
        color: #ffb7b7;
    }


    .pagination .ui.button:not(.disabled) {
        color: rgba(165, 171, 253, 0.87) !important;
    }

    .ui.button.disabled {
        color: rgba(255,255,255,0.65) !important;
    }

    .pagination .ui.button.active {
        background-color: rgba(0,0,0,0) !important;
        cursor: default;
        border-bottom: 4px solid #4e79ac;
        box-sizing: content-box;
        color: #F4F4F4 !important;
    }

    .pagination .ui.button:not(.disabled):not(.active):hover, .pagination .ui.button:not(.disabled):not(.active):focus {
        color:#406694;
        background-color: #181818;
    }

    .disabled.ui.button {
        color: #ffffff;
    }
    .ui.link.menu .item:hover, .ui.menu .dropdown.item:hover, .ui.menu .link.item:hover, .ui.menu a.item:hover, .ui.menu a.item.active:hover {
        color: rgba(255,255,255,.95);
    }
    .ui.attached.header, .ui.toggle.checkbox label::before, .ui.table > thead > tr > th, .ui.table > tfoot > tr > th, table tbody tr td .ui.label, .ui.card, .ui.cards > .card, .ui.message, .ui.info.message, .ui.success.message {
        background-color: #282828;
        color: rgba(255,255,255,.87) !important;
    }
    table tbody tr td {
        color: rgba(255,255,255,.87) !important;
    }
    table tbody tr td .ui.label:hover {
        background-color: rgba(255,255,255,.87);
    }
    table.no-footer, .ui.table {
        border: 2px solid #282828;
    }
    .ui.table, .ui.card .header, .ui.card .description, .ui.message, .ui.info.message, .ui.success.message, .ui.toggle.checkbox {
        color: rgba(255,255,255,.87) !important;
    }
    .ui.card, .ui.cards > .card {
        border: 2px solid #222222;
        outline: none;
        box-shadow: none;
    }
    .ui.card .meta {
        color: rgba(255,255,255,.7) !important;
    }
    .ui.attached.header, .ui.attached.segment, .ui.attached.menu:not(.tabular):not(.text), .ui.attached.segment:not(.basic), .ui.attached.table {
        border: 1px solid #222222;
    }
    .ui.info.message {
        background-color: rgba(0, 60, 255, 0.05);
    }
    .ui.success.message, .ui.positive.message  {
        background-color: rgba(22, 255, 72, 0.05);
    }
    .ui.warning.message {
        background-color: rgba(255, 217, 0, 0.05);
    }
    .ui.negative.message, .ui.error.message {
        background-color: rgba(255, 0, 0, 0.05);
    }
    .ui.form .field .dropdown .menu > .item {
        background-color: #222;
        border-top: 1px solid #181818;
        color: rgba(255,255,255,0.87);
    }
    .ui.form .field .dropdown .menu > .item:hover {
        background-color: #282828;
    }
    .ui.form .field.field input:autofill {
        box-shadow: 0 0 0 100px #888888 inset !important;
        border: 1px solid rgba(255,255,255,0.60) !important;
    }
    .ui.form .field.field input:autofill:focus {
        box-shadow: 0 0 0 100px #888888 inset !important;
        border: 1px solid rgba(255,255,255,0.87) !important;
    }
    .ui.progress {
        background: #222222;
    }
    .send-code-button {
        color: rgba(255,255,255,.87) !important;
    }
    .send-code-button:disabled {
        text-decoration: none;
        cursor: auto;
        color: rgba(255, 255, 255, 0.524) !important;
    }
}