:root{
    --aco-clr-background-sec: #f4f6f8;
    --aco-clr-strokes: #ddd;
    --aco-clr-theme: #cd1719;
    --aco-clr-theme-alt: #765ee0;
    --aco-border-radius: 15px;
}

.user-portal{ position:relative; display:flex; flex-direction:row; background-color:var(--aco-clr-background-sec); border:1px solid var(--aco-clr-strokes); border-radius:var(--aco-border-radius); overflow:hidden; min-height:500px; }
.user-portal .up-menu{ display:flex; flex-direction:column; gap:15px; padding:25px; border-right:1px solid var(--aco-clr-strokes); width:225px; }
.user-portal .up-nav{ background-color:transparent; color:#000; text-decoration:none; border-radius:var(--aco-border-radius); padding:15px 0 15px 15px; display:block; }
.user-portal .up-nav.selected{ background-color:var(--aco-clr-theme); color:#fff; }
.user-portal .up-nav.alt{ background-color:#efe6e6; }
.user-portal .up-content{ background-color:#fff; padding:25px; width:100%; }

.user-portal .up-car-showcase{ display:block; position:relative; width:100%; display:flex; flex-direction:column; gap:25px; }
.user-portal .up-car-showcase .up-car-box{ background-color:var(--aco-clr-background-sec); padding:25px 35px; border-radius:var(--aco-border-radius); }
.user-portal .up-car-showcase .up-car-box .title{ font-weight:600; margin-bottom:0px; }
.user-portal .up-car-showcase .up-car-box .up-car-info{ border-bottom:1px solid var(--aco-clr-strokes); padding-bottom:15px; margin-bottom:25px; }
.user-portal .up-car-showcase .up-car-box .up-car-downloads a{ text-decoration:none; color:var(--clr-theme); padding:5px; }
.user-portal .up-car-showcase .up-car-box .up-car-downloads ul{ list-style-type:none; padding-left:0!important; }
.user-portal .up-car-showcase .up-car-box .up-car-downloads .up-direct-file{ padding:3px 0; }
.user-portal .up-car-showcase .up-car-box .up-car-downloads .up-subdir{ margin-top:15px; }
.user-portal .up-car-showcase .up-car-box .up-car-downloads .up-subdir > ul{ padding-left:25px!important; }
.user-portal .up-car-showcase .up-car-box .up-car-downloads .files-icon{ width:22px; transform:translateY(5px); fill:var(--aco-clr-theme); }

@media(max-width:550px){
    .user-portal{ flex-direction:column; min-height:unset; }
    .user-portal .up-menu{ width:unset; align-items:flex-start; flex-direction:row; flex-wrap:wrap; }
    .user-portal .up-nav{ display:inline-block; padding:10px 15px; }
    .user-portal .up-content{ width:unset; }
}