:root {
    --b-med-01: #686985;
    --b-dark-02: #34344B;
    --a-orange-01: #F27633;
    --a-orange-02: #FB8C3F;
    --a-orange-03: #FF9949;
    --a-light-orange-01: #FFF3E2;
    --a-light-orange-02: #FFF9F2;
    --b-med-02: #B7BAD6;
    --b-light-01: #F1F0FA;
    --b-light-02: #FDFCFF;
    --elevation-positive-2: 0px 0px 1px rgba(52, 52, 75, 0.1), 0px 1px 2px rgba(52, 52, 75, 0.1);
    --elevation-negative-2: inset 0px 0px 2px rgba(52, 52, 75, 0.1), inset 0px 2px 3px rgba(52, 52, 75, 0.05);
}

.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*gap: 32px;*/
    padding: 32px;
    height: 100%;
    justify-content: center;
}

.main-container .environment-container {
    /*width: 75%;
    height: 290px;*/
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 32px;
    margin: 32px;
}

.main-container .environment-container .content {
    display: flex;            
}

.main-container .environment-container .content .quasar-img {
    width: 440px;
    height: 290px;
    border-radius: 8px 0px 0px 8px;
}

.main-container .environment-container .content .classic-img {
    height: 290px;
    box-shadow: 0px 0px 1px rgba(52, 52, 75, 0.1), 0px 1px 2px rgba(52, 52, 75, 0.1);
    border-radius: 8px 0px 0px 8px;
}

.main-container .environment-container .content .select-container {
    display: flex;
    flex-direction: column;
    padding: 32px;
    /*align-items: center;*/
    gap: 32px;
    width: 440px;
    background: #FFFFFF;
    box-shadow: 0px 0px 1px rgba(52, 52, 75, 0.1), 0px 1px 2px rgba(52, 52, 75, 0.1);
    border-radius: 0px 8px 8px 0px;
    /*justify-content: space-between;*/
}

.main-container .environment-container .content .select-container h2 {
    font-size: 26px;
    line-height: 32px;
    font-weight: 500;
    font-family: 'IBM Plex Sans Condensed';
    color: var(--b-med-01);
}    

.main-container .environment-container .content .select-container .s1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.main-container .environment-container .content .select-container .s1 h4 {
    font-family: 'IBM Plex Sans Condensed';
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    margin: 0px;
    color: #9096A0;
}

.main-container .environment-container .content .select-container .logo {
    height: 30px;
    width: 102px;
}

.main-container .environment-container .content .select-container h2 {
    color: var(--b-dark-02);
    font-size: 22px;
    line-height: 24px;
    margin: 0px;
}

.main-container .environment-container .content .select-container .button-container {
    display: flex;
    gap: 16px;
    flex-direction: column;
    width: 100%;
}

.main-container .environment-container .content .select-container .button-container button, .main-container .environment-container .footer button {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    width: 100%;
    padding: 12px;            
    cursor: pointer;
    align-items: center;
    border-radius: 4px;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    justify-content: center;
    position: relative;
    transition: all 75ms ease-in-out;
    transition-property: border, background, box-shadow;        
}



.main-container .environment-container .content .select-container .button-container button {
    background: var(--a-orange-01);
    border: 1px solid var(--a-orange-01);
    border-radius: 4px;
    box-shadow: var(--elevation-positive-2);
    color: var(--a-light-orange-02);
}

.main-container .environment-container .content .select-container .button-container button:hover {
    background: var(--a-orange-03);
    border: 1px solid var(--a-orange-03);
}


.main-container .environment-container .content .select-container .button-container button:active {
    background: var(--a-orange-02);
    border: 1px solid var(--a-orange-02);
    box-shadow: var(--elevation-negative-2);
}

.main-container .environment-container .content .select-container .button-container button:focus {
    background: var(--a-orange-02);
    border: 1px solid var(--a-orange-02);
    box-shadow: 0px 0px 1px rgba(52, 52, 75, 0.1), 0px 1px 1px rgba(52, 52, 75, 0.05), 0px 0px 0px 2px var(--white), 0px 0px 0px 4px #FB8C3F, 0px 0px 4px rgba(52, 52, 75, 0.1), 0px 1px 1px rgba(52, 52, 75, 0.05), 0px 0px 0px 2px #FFFFFF;
    outline: none;
}

.main-container .environment-container .footer .ghost {
    border: 1px solid transparent;
    color: var(--b-med-01);
    background: none;
}

.main-container .environment-container .footer .ghost i {
    width: 16px;
    height: 16px;
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    text-align: center;
    margin-right: 8px;
}
    

.main-container .environment-container .footer .ghost:hover {
    border: 1px solid var(--b-med-01);
}

.main-container .environment-container .footer .ghost:active {
    background: var(--b-light-01);
    border: 1px solid var(--b-med-01);
    box-shadow: var(--elevation-negative-2)
}

.main-container .environment-container .footer .ghost:focus {
    background: var(--b-light-01);
    border: 1px solid var(--b-med-01);
    box-shadow: 0px 0px 1px rgba(52, 52, 75, 0.1), 0px 1px 1px rgba(52, 52, 75, 0.05), 0px 0px 0px 3px var(--white), 0px 0px 0px 4px var(--b-med-01), 0px 0px 4px rgba(52, 52, 75, 0.1), 0px 1px 1px rgba(52, 52, 75, 0.05), 0px 0px 0px 2px #FFFFFF;
    outline: none;
}

.main-container .environment-container .footer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-container .environment-container .footer p {
    margin: 0px;
}

.main-container .environment-container .footer .g1 {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}

.main-container .environment-container .footer .g1 .p1 {
    font-family: IBM Plex Sans;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: var(--b-med-01);
}

.main-container .environment-container .footer .g1 .p2 {
    font-family: IBM Plex Sans;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: var(--b-dark-02); 
    cursor: pointer;
}

.main-container .environment-container .footer .g2 {
    font-family: IBM Plex Sans;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: var(--b-med-01);
    opacity: 50%;
}