.main.container {
    max-width: 460px !important;
    width: 100%;
    margin: auto;
    height: 100vh;
    justify-content: center;
    align-items: center;
    display: flex;
}

* {
    font-size: 1.2rem;
}

input,
.ui.selection.dropdown,
.ui.selection.dropdown.active,
table,
button {
    border-radius: 1rem !important;
}

.step {
    display: none;
}

.card .content.header .step.active {
    display: flex;
    align-items: center;
}

.card .content.body .step.active {
    display: block;
}

.ui.selection.dropdown .menu {
    border-radius: 1rem !important;
    box-shadow: none !important;
    border: 1px solid lightgrey !important;
    margin-top: 1rem;
}

.top.attached.steps {
    border-radius: 1rem 1rem 0 0;
    overflow: hidden;
    border: none;
    border-bottom: 1px solid rgba(34, 36, 38, .15);
}

.top.attached.steps .step {
    border: none;
}

.footer .d-nonde {
    display: none;
}

#app .grid {
    margin: 1rem 0;
}

.ui.form.grid {
    box-shadow: 0 6px 20.1px 4.9px rgba(176, 191, 238, .12) !important;
    border: none !important;
    border-radius: 1rem;
}

#app input[type="file"] {
    display: none;
}

.fields {
    width: 100%;
    margin: 1rem .5rem !important;
}

.shadowless {
    box-shadow: none !important;
}

.bordered {
    border: 1px solid #eaeaea !important;
}

button[type="submit"] {
    display: block;
    float: left;
    margin-top: 1rem !important;
    width: 120px;
}

.button.yellow {
    background-color: #fff429 !important;
    color: #000 !important;
}

.button.yellow:hover {
    background-color: #fff206 !important;
    color: #000 !important;
}

.ui.card {
    border-radius: 1.5rem !important;
    width: 400px !important;
}

.card .content.header .content {
    margin-left: .5rem;
}

.card .content.header .content * {
    font-size: 1.3rem;
    line-height: 1.4;
    font-weight: 600;
}

.card .content.footer {
    display: flex;
}

.card .content.footer button:first-child {
    flex: 1;
    margin-right: .5rem;
}

.card .content.footer button:last-child {
    flex: 1;
    margin-left: .5rem;
}

.table.wrapper {
    width: 100%;
    overflow-y: visible;
    overflow-x: auto;
    border-radius: 1rem;
    max-height: 300px;
}

.table.wrapper table {
    border: none !important;
}

.table thead th {
    text-align: center;
}

td.compatible {
    color: #00b5ad;
    font-weight: 600;
}

td.not-compatible {
    color: #ff6b6b;
    font-weight: 600;
}

.table thead th tr:first-child th {
    background: #f8f8ff;
    font-size: 1.1rem;
}

.table thead th tr:first-child th {
    background: #f8f8ff;
    font-size: 1.1rem;
}
.table.wrapper tr td:first-child {
    font-size: 1.2rem;
    background: ghostwhite;
}