body {
    margin: 0;
    display: flex;
    font-family: "Roboto", sans-serif!important;
}

.container-full {
    width: 100vw;
    height: 100vh;
    padding: 5vw;
    justify-content: center;
    align-items: center;
}

.container-center {
    width: auto;
    max-width: 1175px;
    height: auto;
}

.description-overview {
    margin-bottom: 32px;
}

.flex-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

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

.border {
    border-radius: 10px;
    border: 1px solid #DCDCDC;
}

.task {
    width: 350px;
    height: 350px;
    padding: 32px;
    justify-content: center;
}

.task:not(:first-child) {
    margin-left: 2.5vw;
}

.sidebar {
    width: 430px;
    height: 100%;
    padding: 48px;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid #DCDCDC;
}

.form-select {
    margin-top: 16px;
}

.btn {
    margin-top: 16px;
    width: 100%;
}

.main {
    width: calc(100vw - 446px);
    min-height: 100vh;
    padding: 5vh 48px;
    margin-left: 430px;
    justify-content: center;
}

.max-width {
    max-width: 1350px;
}

.header-info {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

.header-info img {
    width: 20px;
    height: auto;
    display: inline;
    margin: 0 0 .5rem 6px;
}

#imgs-prediction {
    margin-top: 24px;
}

.section {
    width: auto;
    height: auto;
    margin-top: 24px;
    justify-content: center;
    align-items: center;
}

.ncontainer {
    margin: 0;
    width: 100%;
}

.ncontainer:not(:first-child) {
    margin-left: 32px;
}

.img-container {
    width: auto;
    max-width: 400px;
    height: auto;
    margin-top: 24px;
}

.img-container #img-trans {
    width: 100%;
}

.img-container #img-compare {
    width: 100%;
    border-radius: 5px;
}

.grid-compare:not(:first-child) {
    padding-left: 48px;
}

.grid-compare p:not(:first-of-type) {
    margin: 64px 0 2px 0;
}

.grid-compare p:first-of-type {
    margin-top: 24px;
}

details summary > * { 
  display: inline;
}

details img {
    width: 200px;
    height: auto;
}

.back-arrow {
    position: absolute;
    top: 32px;
    left: 1.25vw;
    width: 48px;
    padding: 8px;
}

.back-arrow:hover {
    background-color: #f3f3f3;
    border-radius: 5px;
}

.dropdown {
    margin-top: 16px;
}

.segment {
    padding: 32px;
    margin: 32px 0 0 0;
}

#prediction-section {
    align-items: stretch !important;
}

.flex-row .segment:nth-child(2) {
    margin-left: 32px;
}

.description-domain {
    margin-left: 36px;
}

.img-grid #img-grid {
    margin: 16px 0;
    width: auto;
    height: auto;
    border-radius: 5px;
}

.img-grid #img-grid-compare {
    margin: 16px 0;
    width: 385px;
    height: auto;
    border-radius: 5px;
}

.img-grid div:not(:first-child) {
    margin-left: 64px;
}

.justify {
    text-align: justify;
}

.img-container p {
    text-align: center;
    font-size: 10px;
    margin-bottom: 2px !important;
}

@media only screen and (max-width: 1500px) {
    .sidebar {
        width: 400px;
        overflow-y: scroll;
    }

    .main {
        margin-left: 400px;
        width: calc(100vw - 416px);
    }

    .img-grid #img-grid {
        max-width: 250px;
        height: auto;
    }
}