.dashboard_wrapper .padding{
    padding: 15px; 
}

a.highlight{color: var(--primary-color); text-decoration: none;}
a.highlight:hover{text-decoration: underline;}

h1, h2, h3, h4, h5, p{padding: 0; margin: 0; line-height: 1em;}

a.button{margin-bottom: 3px;}

@media(min-width: 640px){
    .venture_grid{
        display: grid; 
        grid-template-columns: 1fr 320px;
        gap: 1em;
    }
}

.button.button_5{
    border: 2px solid var(--gold);
    background: var(--gold);
}

.button.button_5:hover{
    background: transparent;
    color: var(--text-color);
}

.dark .button.button_5:hover{
    background: transparent;
    color: var(--gold);
}

#dynamic_swap_box{
    min-height: 80vh;
}

.venture_grid .box{
    width: 100%;
    border-radius: 10px; 
    background: white;
    margin-bottom: 1em;
}

.dark .venture_grid .box{
    background: var(--text-color);
}

.venture_grid .box .box_padding{padding: 15px; }

.box.hero{
    width: 100%; 
    aspect-ratio: 3 / 1;
    background-size: cover!important; 
    background-position: center!important; 
    position: relative;
}

.venture_grid .box.hero .box_padding{
    height: calc(100% - 30px); 
}

.box.hero .text_wrapper {
    height: 100%;
    width: 50%;

    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align content to the bottom */
}

.box.hero .text_wrapper h1, .box.hero .text_wrapper h2{
    text-transform: uppercase; 
    line-height: 1em; 
}

.projects_grid{
    padding: 5px 0;
    grid-template-columns: 100px 3fr 50px 50px 50px 50px 120px;
    gap: 10px; 
}

.projects_grid .thumbnail{
    width: 100%;
    border-radius: 5px; 
    min-height: 66px;
    border: 1px solid var(--light-grey);
    background: var(--dark-grey);
    overflow: hidden;
    
}

.projects_grid .thumbnail img{width: 100%;}


@media(max-width: 1300px){
    .box.hero .text_wrapper {
        width: 70%; 
    }
}


.item_grid{
    display: grid;
    gap: 10px; 
    grid-template-columns: 1fr 1fr;
    margin-top: 5px; 
}


/* 
.item_grid.two_rows > *:nth-child(n+5){
    display: none;
} */

@media(min-width: 900px){
    .item_grid{
        grid-template-columns: 1fr 1fr ;
    }

    /* .item_grid.two_rows > *{display: block;}

    .item_grid.two_rows > *:nth-child(n+7){
        display: none;
    } */
}

@media(min-width: 1250px){
    .item_grid{
        grid-template-columns: 1fr 1fr 1fr ;
    }

    /* .item_grid.two_rows > *{display: block;}

    .item_grid.two_rows > *:nth-child(n+9){
        display: none;
    } */
}

@media(min-width: 1500px){
    .item_grid{
        grid-template-columns: 1fr 1fr 1fr 1fr ;
    }

    /* .item_grid.two_rows > *:nth-child(n+11){
        display: none;
    } */
}

@media(min-width: 1650px){
    .item_grid{
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
    }

    /* .item_grid.two_rows > *:nth-child(n+13){
        display: none;
    } */
}

@media(min-width: 1900px){
    .item_grid{
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ;
        
    }

    /* .item_grid.two_rows > *:nth-child(n+15){
        display: none;
    } */
}

#ip_grid .item, #investors_grid .item {
    border-radius: 7px;
    overflow: hidden; 
    background: var(--light-grey);
    padding-bottom: 80px; 
    position: relative;
}

.dark #ip_grid .item, .dark #investors_grid .item {
    background: var(--dark-grey);
}

#ip_grid .item .ip_item_head{
    width: 100%; aspect-ratio: 240 / 140;
    background-size: cover!important;
    background-position: center!important;
    position: relative;
}

#ip_grid .item .ip_item_head .click_zone{
    position: absolute; 
    top: 0 ; left: 0; 
    width: 100%; height: 100%; 
    cursor: pointer;
}

#ip_grid .item .ip_item_head .tag{
    background: rgba(25,25,25,0.8);
    border-radius: 3px; 
    padding: 2px;
    color: var(--light-grey);
    text-transform: uppercase;
    position: absolute; 
    top: 5px; left: 5px; 
    display: inline-block; 
    font-size: 9px; 
    max-width: 70%;
}

#ip_grid .item .ip_item_head .favorites, #investors_grid .item .favorites{
    position: absolute; 
    top: 5px; right: 5px; 
    cursor: pointer;
}

#ip_grid .item .ip_item_head .favorites > p{color: white;}

/* #ip_grid .item .ip_item_head .favorites > p:nth-child(1){display: inline-block;}
#ip_grid .item .ip_item_head .favorites > p:nth-child(2){display: none;}

#ip_grid .item .ip_item_head .favorites.checked > p:nth-child(1){display: none;}
#ip_grid .item .ip_item_head .favorites.checked > p:nth-child(2){display: inline-block;} */

#ip_grid .item .profile_box{
    display: grid; 
    grid-template-columns: 30px 1fr;
    gap: 10px; 
}

#ip_grid .item .item_padding, #investors_grid .item .item_padding{
    padding: 10px 10px 5px 10px; 
}

#ip_grid .item .profile_box .user_avatar{
    width: 30px; height: 30px; 
    border-radius: 50%;
    background: url(../images/backgrounds/icon-user-profile.svg) no-repeat;
    background-size: cover!important; 
    background-position: center!important;

}

#ip_grid .item .profile_box p{
    line-height: 1em; padding: 0; margin: 0; 
}

#ip_grid .item .profile_box p.profile_name a{font-weight: 700; display: block; padding-top: 5px;  text-decoration: none; }
#ip_grid .item .profile_box p.profile_name a:hover{text-decoration: underline;}
#ip_grid .item .profile_box p.profile_title{opacity: 0.8; }

#ip_grid .item .bar{opacity: 0.2; margin: 5px 0;}

.dark #ip_grid .item .bar{border-top: 1px solid var(--light-grey); }

.dark #ip_grid .item .bar, .dark .bar{border-top: 1px solid var(--light-grey);}

#ip_grid .item .project_box h3{padding: 0; margin: 0; line-height: 1em; }

#ip_grid .item .project_box .project_category{
    opacity: 0.6;
    font-size: 0.8em;
    padding: 0; margin: 0; line-height: 1em;
}

#ip_grid .item .project_box .project_short_description{padding-top: 5px; font-size: 0.7em; }

#ip_grid .item p.sub_title{opacity: 0.5; padding: 0; line-height: 1em; margin: 0;  }

#ip_grid .item .social_nav > div{display: grid; align-items: center; }

#ip_grid .item .social_nav > div span.material-symbols-outlined{font-size: 16px; transform: translateY(3px); }

#ip_grid .item .social_nav{
    
    
}

#ip_grid .item .ip_footer{
    position: absolute; 
    bottom: 10px; left: 10px; 
    width: calc(100% - 20px); 
}

#ip_grid .item .ip_footer .social_nav{width: 100%;}

#investors_grid{
    display: grid; 
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media(min-width: 1100px){
    #investors_grid{
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media(min-width: 1400px){
    #investors_grid{
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

#investors_grid .item{position: relative;}

#investors_grid .item .item_investor_grid{
    grid-template-columns: 50px 1fr;
}

#investors_grid .item .item_investor_grid > div:nth-child(2){
    padding-right: 25px; 
}

#investors_grid .item .favorites{
    position: absolute; 
    top: 5px; right: 5px; 
}


#investors_grid .item .favorites > p{color: var(--text-color);}
.dark #investors_grid .item .favorites > p{color: white;}

#investors_grid .item .favorites > p:nth-child(1){display: inline-block;}
#investors_grid .item .favorites > p:nth-child(2){display: none;}

#investors_grid .item .favorites.checked > p:nth-child(1){display: none;}
#investors_grid .item .favorites.checked > p:nth-child(2){display: inline-block;}

#investors_grid .item .item_investor_grid .logo{
    width: 50px; 
    height: 40px; 
    border-radius: 5px; 
    background-size: cover!important;
    background-position: center!important;
}

#investors_grid .item .item_investor_grid p{padding: 0; margin: 0; line-height: 1em; }

#investors_grid .item .item_investor_grid .investor_name{padding-top: 5px;}
#investors_grid .item .item_investor_grid .investor_type{opacity: 0.6; font-size: 0.75em;}

#investors_grid .item .item_investor_grid .investor_focus{padding-top: 5px; opacity: 0.6; font-size: 0.75em;}

.meeting_grid{
    display: grid;
    grid-template-columns: 60px 3fr 2fr;
    gap: 10px; 
    align-items: center; 

    
}

#meetings_list{padding-bottom: 5px;}

.meeting_grid > div:last-child{text-align: right;}

.meeting_grid .date_box{
    background: var(--light-grey);
    border: 1px solid rgba(25,25,25,0.3);
    border-radius: 3px; 
    padding: 5px 0;
    text-align: center; 
    width: 100%; 
}

.dark .meeting_grid .date_box{
    background: var(--dark-grey);
    border: 1px solid rgba(225,225,225,0.3);
}

.meeting_grid .date_box p{
    padding: 0; margin: 0; line-height: 1em; 
}

.meeting_grid .date_box p.meet_date{font-weight: 700;}
.meeting_grid .date_box p.meet_time{opacity: 0.6; font-size: 0.7em; padding-top: 2px; }

.industry_grid{
    grid-template-columns: 50px 1fr;
    padding-right: 30px; 
    align-items: center;
}

.industry_grid .logo{
    width: 100%; 
    aspect-ratio: 10 / 8;
    border-radius: 5px; 
    background-size: cover!important; 
    background-position: center!important; 
}

.industry_grid p{padding: 0; margin: 0; line-height: 1em;}

.industry_grid p.industry_title{}
.industry_grid p.industry_type{font-size: 0.8em; opacity: 0.6;}

.modal_padding{padding: 30px; }

.single_project .project_title, .single_project .project_type{
    padding: 0; margin: 0; line-height: 1em; 
}

.single_project #media_box{margin-top: 10px; }

.single_project .media_box{
    
    background: var(--dark-grey);
    border-radius: 10px; 
    
}

.single_project .media_box .media_content{
    width: 100%; 
    aspect-ratio: 16 / 9;
    border-radius: 10px; 
}

.button span.stat{
    position: relative;
    top: initial;
    left: initial; font-size: initial; transform: initial;
    font-size: 13px;
}

.swap_panels
 {
    margin: 2em 0;
}

.swap_panels .panel, #looking_for_panel .panel {
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 22px;
    display: none;
}

.dark .swap_panels .panel, #looking_for_panel {
    border: 1px solid rgba(250, 250, 250, 0.1);
    
}

.swap_panels .panel .panel_title, #looking_for_panel .panel_title{padding-left: 20px; }

.swap_panels .panel .checkbox_grid, #looking_for_panel .checkbox_grid{
    grid-template-columns: 1fr 1fr 1fr;
}

.swap_panels .panel .checkbox_grid .checkbox_item, #looking_for_panel  .checkbox_grid .checkbox_item{
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 10px 10px 10px 30px;
    position: relative;
}

.dark .swap_panels .panel .checkbox_grid .checkbox_item, #looking_for_panel .checkbox_grid .checkbox_item{
    border: 1px solid rgba(250, 250, 250, 0.1);
}

.swap_panels .panel .checkbox_grid .checkbox_item .toggle, #looking_for_panel .checkbox_item .toggle {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 3px solid var(--primary-color);
    opacity: 1;
    transition-duration: 0.25s;
}



.swap_panels .panel .checkbox_grid .checkbox_item .toggle::after, #looking_for_panel .checkbox_grid .checkbox_item .toggle::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--primary-color);
    opacity: 0;
    transition-duration: 0.25s;
}

.swap_panels .panel .checkbox_grid .checkbox_item.active .toggle::after, #looking_for_panel .checkbox_grid .checkbox_item.active .toggle::after{
    opacity: 1;
}

.form_field .location_states{
    display: none;
}

#dashboard .grid .box{
    padding: 0; 
}

.box{
    opacity: 0;
    transform: translateY(100px);
    transition-duration: 1s;
}

.show_box .box{
    opacity: 1;
    transform: translateY(0px);
}

.social_box{
    width: 100%; 
    margin-top: 20px;
    gap: 10px;
    
}

.social_box > div{position: relative;}

.social_box > div::after{
    content: "";
    height: 100%;
    position: absolute; 
    top: 0; left: -10px; 
    border-right: 1px solid var(--light-grey);
}

.social_box > div:first-child::after{display: none;}

.social_box p, .social_box h2{padding: 0; margin: 0; line-height: 1em; }

.social_box span.material-symbols-outlined{font-size: 18px; transform: translateY(4px); }

.social_box .social_grid{
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 5px; 
    align-items: center; 
    align-items: center; 
}

.social_box .social_grid > div{
    align-items: center; 
}

.social_box .social_grid p, .social_box .social_grid h2{
    line-height: 1em; padding: 0; margin: 0; 
    text-align: center;
}

.social_box .social_grid p.small{opacity: 0.7;}

body.dark #dashboard .grid .box{background: var(--text-color); color: white;}

.field_content{padding: 10px 0 0 0;}

.field_content p{
    font-size: 14px; 
    opacity: 0.7;
}

.project_stats_grid{
    padding: 20px 0; 
    display: grid; 
    grid-template-columns: 1fr;
    gap: 10px; 
}

.project_stats_grid .detail_grid{
    display: grid; 
    grid-template-columns: 40px 1fr;
    grid-gap: 10px; 
}

.project_stats_grid .detail_grid p.title{opacity: 0.7;}

.project_stats_grid .detail_grid p span.material-symbols-outlined{font-size: 30px;}

.blink-once {
    animation: blinkOnce 0.5s ease-in-out 1;
}

.view_list_grid{
    display: grid; 
    grid-template-columns: 50px 3fr 1fr 120px;
    gap: 10px; 
}

.view_list_grid .avatar{
    width: 50px; height: 50px; border-radius: 50%; 
    background: url(../images/backgrounds/icon-user-profile.svg) no-repeat;
    background-size: cover!important; 
    background-position: center!important;
}

@keyframes blinkOnce {
    0%   { opacity: 1; }
    50%  { opacity: 0; }
    100% { opacity: 1; }
}

#media_swap_wrapper{position: relative;}

.edit_gallery_header{padding: 5px; }

#media_swap_wrapper .admin_nav{
    position: absolute;
    top: 10px; left: 10px; 
    padding: 10px; 
    align-items: center;
}

#media_swap_wrapper .media_list{
    width: 100%; 
    display: block; 
    min-height: 300px; 
}

#media_swap_wrapper h2{padding: 0; margin: 0; }

.file_grid{
    display: grid; 
    grid-template-columns: 120px 1fr 60px;
    grid-gap: 10px; 
    align-items: center;
    padding: 5px;
}

.file_grid > div:nth-child(3){
    text-align: right;
}

.file_grid > div:nth-child(3) span{
    font-size: 18   px; 
}

.file_grid.editable{
    grid-template-columns: 20px 120px 1fr 30px;
}

.file_grid .handle{
    background: var(--dark-grey2); 
    height: 100%; 
    border-radius: 5px; 
    position: relative; 
    cursor: move;

}

.file_grid .handle .dots{
        width: 24px;
        height: 24px !important;
        display: inline-block;
        background: url(../images/buttons/drag-handle.svg) no-repeat;
        background-size: 100%;
        background-position: center;
        position: absolute; 
        top: 50%; left: 50%;
        transform: translateX(-50%) translateY(-50%);
        
        opacity: 1;
}

.file_grid .thumb, .media_grid .thumb{
    background: var(--text-color);
    border: 1px solid rgba(125,125,125,0.5);
    width: 120px; aspect-ratio: 16 / 9; 
    background-size: cover!important; 
    background-position: center!important; 
    border-radius: 5px; 
    position: relative;
}

.file_grid .thumb span{
    color: white;
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translateY(-50%) translateX(-50%);
    font-size: 32px;
}

.file_grid .thumb::after{
    content: "";
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translateX(-50%) translateY(-50%);
    width: 40px; height: 40px; 
    background-size: cover!important; 
    background-position: center!important; 
}

.file_grid .thumb.pptx::after{background: url(../images/backgrounds/format-icon-powerpoint.png) no-repeat;}
.file_grid .thumb.zip::after{background: url(../images/backgrounds/format-icon-zip.png) no-repeat;}
.file_grid .thumb.doc::after, .file_grid .thumb.docx::after{background: url(../images/backgrounds/format-icon-word.png) no-repeat;}
.file_grid .thumb.ppt::after, .file_grid .thumb.pptx::after{background: url(../images/backgrounds/format-icon-powerpoint.png) no-repeat;}
.file_grid .thumb.ppt::after, .file_grid .thumb.pptx::after{background: url(../images/backgrounds/format-icon-excel.png) no-repeat;}
.file_grid .thumb.tar::after{background: url(../images/backgrounds/format-icon-tar.png) no-repeat;}
.file_grid .thumb.psd::after{background: url(../images/backgrounds/format-icon-photoshop.png) no-repeat;}
.file_grid .thumb.ai::after, .file_grid .thumb.eps::after{background: url(../images/backgrounds/format-icon-illustrator.png) no-repeat;}

.file_grid input[type="text"]{
    padding: 10px; 
    display: block; 
    border-radius: 5px; 
    border: 1px solid var(--light-grey);
    border-radius: 7px; 
    background: transparent;
    color: var(--light-grey);
    width: calc(100% - 22px)
    
}

.media_list .file_grid input[type="text"]{
    padding: 10px; 
    display: block; 
    border-radius: 5px; 
    border: 1px solid var(--dark-grey2);
    border-radius: 7px; 
    background: transparent;
    color: var(--dark-grey2);
    width: calc(100% - 22px)
}

.dark .media_list .file_grid input[type="text"]{
    padding: 10px; 
    display: block; 
    border-radius: 5px; 
    border: 1px solid var(--light-grey);
    border-radius: 7px; 
    background: transparent;
    color: var(--light-grey);
    width: calc(100% - 22px)
}

.file_grid input[type="text"]:focus{
    outline: none;
}

.media_slider{
    width: 100%; 
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    position: relative;

}

#project_media_slider{
    position: relative;
}

#project_media_slider > .slide{
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background-size: cover!important; 
    background-position: center!important; 
    border-radius: 10px; 
}

#project_media_slider > .slide > .video_player_wrapper{
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    overflow: hidden;
    border-radius: 10px; 
}

#project_media_slider > .slide > .video_player_wrapper iframe{width: 100%; height: 100%; }

/* The play surface covers the whole hero on every slide, so on an image it
   was a full-size click target that did nothing good -- it is what made
   clicking a photograph try to open a video. Only a video slide takes the
   click; the iframe inside still needs its own, so that is restored. */
#project_media_slider > .slide > .video_player_wrapper{ pointer-events: none; }
#project_media_slider > .slide.video > .video_player_wrapper{ pointer-events: auto; }

#project_media_slider > .slide span{
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    font-size: 72px;
    
    display: none;
}

#project_media_slider > .slide.video span{
    display: block; 
}

.media_content .media_slider_track{
    width: calc(100vw - 150px);
    min-width: 0;
    height: 100px;
    border-radius: 10px;
    

    overflow-y: hidden;
    overflow-x: auto;

    scrollbar-width: none; 

    /* Firefox
    scrollbar-width: none;

    /* IE/Edge Legacy */
    
}

/* Chrome, Safari, Edge */
.media_content .media_slider_track::-webkit-scrollbar{
    display: none;
}

.media_content .media_slider_track .slider_wrapper{
    display: flex; 
    height: 100%; 
    min-width: 100%;

    
}

.media_content .media_slider_track .track_thumb{
    height: calc(100% - 6px);
    display: inline-block; 
    aspect-ratio: 16 / 9;
    background: var(--text-color); 
    border: 1px solid rgba(125,125,125,0.5);
    border-radius: 8px; 
    margin: 2px 0px 2px 1px;
    background-size: cover!important; 
    background-position: center!important; 
    cursor: pointer;
    position: relative;

}

.media_content .media_slider_track .track_thumb span{
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translateX(-50%) translateY(-50%);
    color: white; 
}

.team_grid{
    grid-template-columns: 50px 1fr 100px 100px;
    gap: 1em;
    align-items: center;
}

.team_grid .avatar{
    width: 40px; height: 40px; border-radius: 50%;
        background: url(../images/backgrounds/icon-user-profile.svg) no-repeat;
        background-size: cover !important;
        background-position: center
}

.team_grid h3{padding: 0; margin: 0; }

.team_grid .user_title{
    opacity: 0.6;
}

a.button.full_width{
    display: block; 
    text-align: center;
    width: calc(100% - 65px); 
}

a.button.small.full_width{
    width: calc(100% - 20px); 
}

.text_icon{
    width: 1.3em; aspect-ratio: 1 / 1;
    background-size: cover!important; 
    background-position: center!important; 
    display: inline-block; 
    filter: invert(100%);
    transform: translateY(4px);
    
}

.item .text_icon, .item .text_icon.like{
    filter: invert(0);
}

.item .text_icon.like{filter: invert(100%); cursor: pointer;}


.dark .text_icon{filter: initial;}



.social_wrapper .text_icon.like, .text_icon.like{
    background: url(../images/icons/favourite-line-light.svg) no-repeat;
}

.social_wrapper.active .text_icon.like, .active .text_icon.like{
    background: url(../images/icons/favourite-full-light.svg) no-repeat;
}

.dark .active .text_icon.like.active, .dark .item .text_icon.like{filter: invert(0);}

.item .text_icon.like.liked{background: url(../images/icons/favourite-full-light.svg) no-repeat; filter: invert(100%); cursor: pointer;}
.dark .item .text_icon.like.liked{filter: invert(0);}

.social_wrapper .text_icon.bookmark, .text_icon.bookmark{
    background: url(../images/icons/icon-bookmark-light.svg) no-repeat;
}

.social_wrapper.active .text_icon.bookmark, .active .text_icon.bookmark{
    background: url(../images/icons/icon-bookmark-full-light.svg) no-repeat;
}



.social_wrapper span.add{display: inline-block;}
.social_wrapper span.remove{display: none;}

.social_wrapper.active span.add{display: none;}
.social_wrapper.active span.remove{display: inline-block;}

body #project_modal_mask{
    position: fixed;
    z-index: 300;
    width: 100vw;
    height: calc(100vw - 90px);
    top: 60px;
    left: 0;
    background: rgba(0,0,0,0.5);
    display: none;
}

body #project_modal{
    position: fixed;
    z-index: 300;
    width: calc(100vw - 10px);
    height: calc(100vh - 100px);
    top: 65px;
    left: 5px;
    background: white;
    border-radius: 10px; 
    display: none;

}

body.dark #project_modal{
    background: var(--text-color);
}

body #project_modal .modal_padding{padding: 5px;}

body #project_modal .img_wrapper, body #project_modal .video_wrapper{
    width: 100%;     height: calc(100vh - 110px);
    border-radius: 15px; 
    background: var(--text-color);
    background-size: contain!important;
    background-position: center!important;
}

body #project_modal .video_wrapper iframe{
    width: 100%; 
    height: 100%; 
}

body #project_modal .modal_close{
    position: absolute; 
}

body #project_modal .modal_close {
    position: absolute;
    top: 5px;
    right: 5px;
}

body #project_modal .modal_close a.close_modal {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    transform: rotate(0);
    transition-duration: 0.25s;
}

body #project_modal .modal_close:hover a.close_modal{transform: rotate(90deg);}

body #project_modal .modal_close a.close_modal::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    border-top: 1px solid var(--light-grey);
    transform: rotate(-45deg);
}

body #project_modal .modal_close a.close_modal::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    border-top: 1px solid var(--light-grey);
    transform: rotate(45deg);
}

.button.active{
    background: transparent;
    border: 2px solid var(--primary-color);
}

.button.button_5.active{
    border: 2px solid var(--gold);
}

.dark .button.active{
    color: white; 
}

.profile_grid{
    display: grid; 
    grid-template-columns: 30px 1fr;
    gap: 10px;
    margin: 5px 0 0 0 ;

}

.profile_grid .user_avatar{
    width: 30px; 
    height: 30px;
    border-radius: 50%;
    background: url(../images/backgrounds/icon-user-profile.svg) no-repeat;
}

.panel.disabled{
    opacity: 0.5;
}

.blink {
    animation: blinkAnimation 0.5s ease-in-out;
}

@keyframes blinkAnimation {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


.form_field .search_results_wrapper{
    position: relative;
    width: calc(100% - 20px); 
    height: 0px; 
    margin-top: -5px;
    margin-left: 10px; 
    
}

.form_field .search_results_wrapper .search_results{
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; 
    height: 400px; 
    z-index: 500;
    background: white;
    box-shadow: 0px 0px 20px rgba(125,125,125,0.5);
    display: none;
}

.dark .form_field .search_results_wrapper .search_results{
    background: var(--dark-grey);
    box-shadow: 0px 0px 20px rgba(25,25,25,0.5);
}

#search_results .user_grid{
    display: grid; 
    grid-template-columns: 60px 1fr 100px;
    gap: 10px;  
}

#search_results .user_grid .avatar{
    background: url(../images/backgrounds/icon-user-profile.svg) no-repeat;
    width: 60px; height: 60px; 
    background-size: cover!important; 
    background-position: center!important;
}

.search_results .list .item{}

.search_results .list .item:hover{
    background: var(--text-color);
}

.search_results .list .item:hover p{color: var(--light-grey);}

.dark .search_results .list .item:hover{
    background: var(--white);
}

.dark .search_results .list .item:hover p{color: var(--text-color);}



.preview_member_invitation .profile_card{
    display: block; 
    background: rgba(25,25,25,0.1);
    border: 1px solid rgba(25,25,25,0.5);
    border-radius: 15px;
    padding: 15px; 
}

.dark .preview_member_invitation .profile_card{
    background: rgba(250,250,250,0.1);
    border: 1px solid rgba(250,250,250,0.5);
}

.preview_member_invitation .profile_card .profile_card_grid{
    display: grid; 
    grid-template-columns: 80px 1fr;
    gap: 1em;
}

.preview_member_invitation .profile_card .profile_card_grid .avatar{
    background: url(../images/backgrounds/icon-user-profile.svg) no-repeat;
    width: 60px; height: 60px; 
    background-size: cover!important; 
    background-position: center!important;
    border-radius: 50%; 
}
/* ---------------------------------------------------------------------
   Top gallery carousel: arrows, counter, thumbnail track navigation
   --------------------------------------------------------------------- */
#project_media_slider > .slide{
    transition: opacity 0.25s ease;
}

#project_media_slider > .slide.swapping{
    opacity: 0;
}

#project_media_slider .slider_arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(21,21,21,0.55);
    color: white;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    opacity: 0;
    transition-duration: 0.25s;
}

#project_media_slider .slider_arrow span{
    font-size: 32px;
    line-height: 1;
}

#project_media_slider .slider_arrow.slider_prev{left: 12px;}
#project_media_slider .slider_arrow.slider_next{right: 12px;}

#project_media_slider:hover .slider_arrow, #project_media_slider .slider_arrow:focus{
    opacity: 1;
}

#project_media_slider .slider_arrow:hover{
    background: var(--primary-color);
    color: var(--text-color);
}

#project_media_slider .slider_counter{
    position: absolute;
    right: 12px; bottom: 12px;
    z-index: 3;
    background: rgba(21,21,21,0.55);
    color: white;
    font-size: 11px;
    line-height: 1em;
    padding: 6px 10px;
    border-radius: 20px;
    pointer-events: none;
}

/* Nothing to navigate when there is a single item */
#project_media_slider.single .slider_arrow, #project_media_slider.single .slider_counter{
    display: none;
}

.media_content .media_slider_track_wrapper{
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.media_content .media_slider_track_wrapper{
    min-width: 0;
    max-width: 100%;
}

/* contain: inline-size keeps the scrollable thumb strip from inflating its parents */
.media_content .media_slider_track_wrapper .media_slider_track{
    width: 0;
    flex: 1 1 0%;
    min-width: 0;
    contain: inline-size;
}

.media_content .track_arrow{
    flex: 0 0 auto;
    width: 28px; height: 96px;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    color: white;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition-duration: 0.25s;
}

.media_content .track_arrow:hover{
    background: var(--primary-color);
    color: var(--text-color);
}

.media_content .media_slider_track_wrapper.no_overflow .track_arrow{
    display: none;
}

.media_content .media_slider_track .track_thumb{
    opacity: 0.6;
    transition-duration: 0.25s;
}

.media_content .media_slider_track .track_thumb:hover{
    opacity: 1;
}

.media_content .media_slider_track .track_thumb.active{
    opacity: 1;
    border: 2px solid var(--primary-color);
}

@media(hover: none){
    #project_media_slider .slider_arrow{opacity: 1;}
}


/* ---------------------------------------------------------------------
   Venture dropdown, shared by the project owner bar and the Venture home.
   The project page keeps its own .owner_btn skin for the dark bar; the
   button style below is the neutral one used everywhere else.
   --------------------------------------------------------------------- */
.owner_menu{ position: relative; display: inline-block; }
.owner_menu_caret{ font-size: 18px; margin-left: 2px; transition-duration: 0.25s; }
.owner_menu.open .owner_menu_caret{ transform: rotate(180deg); }

.owner_menu .owner_btn{
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid var(--light-grey); border-radius: 20px;
    padding: 6px 14px; font-size: 13px; color: var(--text-color);
    text-decoration: none; white-space: nowrap; transition-duration: 0.25s;
}
.dark .owner_menu .owner_btn{ border-color: rgba(255,255,255,0.25); color: var(--light-grey); }
.owner_menu .owner_btn:hover{ border-color: var(--mid-grey); }
.owner_menu .owner_btn .material-symbols-outlined{ font-size: 16px; }

.owner_menu_panel{
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
    min-width: 270px; padding: 6px;
    background: white; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.28);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.dark .owner_menu_panel{ background: var(--dark-grey); }
.owner_menu.open .owner_menu_panel{ opacity: 1; visibility: visible; transform: none; }

.owner_menu_panel a{
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 14px; border-radius: 8px; color: var(--text-color);
    text-decoration: none; transition-duration: 0.25s;
}
.dark .owner_menu_panel a{ color: var(--light-grey); }
.owner_menu_panel a:hover{ background: var(--light-grey2); }
.dark .owner_menu_panel a:hover{ background: rgba(255,255,255,0.08); }
.omi_text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.omi_text strong{ font-size: 15px; line-height: 1.2em; }
.omi_text strong::first-letter{ text-transform: uppercase; }
.omi_text .small{ opacity: 0.6; }
.omi_text .small::first-letter{ text-transform: uppercase; }
.omi_arrow{ font-size: 18px; color: var(--green); flex: none; transition-duration: 0.25s; }
.owner_menu_panel a:hover .omi_arrow{ transform: translateX(3px); }

@media(max-width: 640px){
    .owner_menu_panel{ right: auto; left: 0; min-width: 240px; }
}

/* Venture dropdown row on the profile page; the grid drops to one column
   now that the old right-hand nav box is gone. */
.vp_toolbar{ display: flex; justify-content: flex-end; align-items: center; padding-bottom: 14px; }
@media(min-width: 640px){
    .venture_grid.vp_single{ grid-template-columns: 1fr; }
}


/* Right-aligned row holding the shared Venture dropdown (venture/side_menu.php).
   Used by the dashboard and any other page that drops the menu into a column. */
.venture_menu_row{ display: flex; justify-content: flex-end; align-items: center; padding: 0 0 14px; }

/* Menu entry pointing at the plans page rather than the gated area. Lives here
   with the rest of the standalone menu so every page that loads venture.css
   gets it, not just the project page. */
.owner_menu_panel a.omi_locked .omi_arrow{ opacity: 0.45; }
.owner_menu_panel a.omi_locked strong{ opacity: 0.75; }

/* ===================== HOW DO YOU CONTRIBUTE? ========================
   The role picker. Three states, and each one says what would change it:
   choosable, wearable-but-locked, and out of reach on this plan.
   ===================================================================== */

.vr_roles{
    --vr-ink: #151515;
    --vr-dim: #5a5a5a;
    --vr-faint: #8a8a8a;
    --vr-line: rgba(21,21,21,0.14);
    --vr-line-strong: rgba(21,21,21,0.34);
    --vr-card: #ffffff;
    --vr-bg: #f4f4f4;
    --vr-lime: #cae76f;
    --vr-lime-soft: #eef7cf;
    --vr-amber: #f5efdc;
    --vr-amber-ink: #8a6d1f;

    color: var(--vr-ink);
}

.dark .vr_roles{
    --vr-ink: #f2f2f2;
    --vr-dim: #a0a0a0;
    --vr-faint: #808080;
    --vr-line: rgba(255,255,255,0.13);
    --vr-line-strong: rgba(255,255,255,0.38);
    --vr-card: #1b1b1b;
    --vr-bg: #131313;
    --vr-lime-soft: #26301a;
    --vr-amber: #2c2415;
    --vr-amber-ink: #d6b25e;
}

.vr_roles, .vr_roles *, .vr_roles *::before, .vr_roles *::after{ box-sizing: border-box; }

.vr_roles_head{
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 22px; flex-wrap: wrap; padding: 0 0 20px;
}
.vr_roles_head h2{ font-size: 30px; letter-spacing: -0.02em; padding: 0; margin: 0; }
.vr_roles_lede{ font-size: 14.5px; line-height: 1.5; color: var(--vr-dim); padding: 8px 0 0; }

.vr_plan_switch{
    display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
    padding: 4px; border-radius: 22px; border: 1px solid var(--vr-line); background: var(--vr-card);
    font-size: 13px; font-weight: 700;
}
.vr_plan_switch span, .vr_plan_switch a{ padding: 8px 16px; border-radius: 18px; white-space: nowrap; }
.vr_roles .vr_plan_switch .is_on{ background: var(--vr-ink); color: var(--vr-bg); }
.vr_plan_switch a{ color: var(--vr-dim) !important; }
.vr_plan_switch a:hover{ color: var(--vr-ink) !important; }

/* ------------------------------ your roles --------------------------- */
.vr_chosen{
    padding: 18px 20px; margin: 0 0 20px;
    border-radius: 14px; border: 1px solid var(--vr-line); background: var(--vr-card);
}
.vr_chosen_head{ display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vr_chosen_label{ font-size: 11px; font-weight: 700; letter-spacing: 0.11em; color: var(--vr-dim); }
.vr_chosen_head strong{ font-size: 17px; font-variant-numeric: tabular-nums; }
.vr_chosen_note{ font-size: 13px; color: var(--vr-dim); }

/* one segment per slot the plan allows: the limit is a shape, not a number
   you have to read */
.vr_meter{ display: flex; gap: 6px; padding: 12px 0 14px; }
.vr_meter_seg{ flex: 1 1 0; height: 5px; border-radius: 3px; background: var(--vr-line); }
.vr_roles .vr_meter_seg.is_on{ background: var(--vr-lime); }

.vr_slots{ display: flex; gap: 9px; flex-wrap: wrap; }
.vr_slot{
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 14px; border-radius: 20px; cursor: grab;
    border: 1px solid var(--vr-lime); background: var(--vr-lime-soft);
    font-size: 14px; font-weight: 700;
}
.vr_roles .vr_slot.is_primary{ background: var(--vr-ink); border-color: var(--vr-ink); color: var(--vr-bg); }
.vr_slot.is_primary b{
    font-size: 9.5px; letter-spacing: 0.09em; opacity: 0.72; font-weight: 700;
}
.vr_slot.is_dragging{ opacity: 0.45; }
.vr_slot_x{ display: inline-flex; opacity: 0.6; }
.vr_slot_x:hover{ opacity: 1; }
.vr_slot_x .material-symbols-outlined{ font-size: 16px; }
.vr_roles .vr_slot.is_primary .vr_slot_x{ color: var(--vr-bg) !important; }

.vr_slot_free{
    border: 1px dashed var(--vr-line-strong); background: transparent;
    color: var(--vr-faint); font-weight: 400; cursor: default;
}
.vr_chosen_hint{ font-size: 12.5px; color: var(--vr-faint); padding: 12px 0 0; line-height: 1.45; }

/* ------------------------------ the picker --------------------------- */
.vr_search{
    display: flex; align-items: center; gap: 10px;
    padding: 0 18px; margin: 0 0 14px;
    border-radius: 24px; border: 1px solid var(--vr-line); background: var(--vr-card);
}
.vr_search .material-symbols-outlined{ font-size: 19px; color: var(--vr-faint); }
.vr_search input{
    flex: 1 1 auto; padding: 14px 0; border: 0; background: transparent; color: var(--vr-ink);
    font-family: inherit; font-size: 14.5px;
}
.vr_search input:focus{ outline: none; }

.vr_chips{ display: flex; gap: 8px; flex-wrap: wrap; padding: 0 0 16px; }
.vr_chip{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 20px; cursor: pointer;
    border: 1px solid var(--vr-line); background: var(--vr-card); color: var(--vr-ink);
    font-family: inherit; font-size: 13.5px; font-weight: 700; white-space: nowrap;
}
.vr_chip span{ color: var(--vr-faint); font-variant-numeric: tabular-nums; }
.vr_chip:hover{ border-color: var(--vr-line-strong); }
.vr_roles .vr_chip.is_on{ background: var(--vr-ink); border-color: var(--vr-ink); color: var(--vr-bg); }
.vr_roles .vr_chip.is_on span{ color: var(--vr-bg); opacity: 0.6; }

.vr_grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.vr_role{
    display: flex; align-items: center; gap: 11px;
    padding: 13px 15px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--vr-line); background: var(--vr-card);
    font-size: 14.5px;
}
.vr_role:hover{ border-color: var(--vr-line-strong); }
/* A class that sets `display` outranks the browser's own [hidden] rule,
   so filtering marked 93 rows hidden and hid none of them. Every element
   here that JS hides needs its own [hidden] to match. */
.vr_role[hidden]{ display: none; }
.vr_roles .vr_role.is_on{ border-color: var(--vr-lime); background: var(--vr-lime-soft); font-weight: 700; }

.vr_box{
    flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px;
    border: 1px solid var(--vr-line-strong);
    display: flex; align-items: center; justify-content: center;
}
.vr_box .material-symbols-outlined{ font-size: 15px; opacity: 0; color: #151515; }
.vr_roles .vr_role.is_on .vr_box{ background: var(--vr-lime); border-color: var(--vr-lime); }
.vr_roles .vr_role.is_on .vr_box .material-symbols-outlined{ opacity: 1; }

.vr_role_name{ flex: 1 1 auto; min-width: 0; line-height: 1.3; }

/* a role out of reach is shown, not hidden: it is worth knowing it exists
   and worth knowing what it costs */
.vr_role.is_barred{ cursor: default; background: var(--vr-bg); }
.vr_role.is_barred .vr_role_name, .vr_role.is_barred .vr_box{ opacity: 0.55; }
.vr_role.is_barred:hover{ border-color: var(--vr-line); }

.vr_badge{
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 13px;
    font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.vr_badge .material-symbols-outlined{ font-size: 13px; }
/* amber: you may wear it, its functions wait for a dearer plan */
.vr_badge_locked{ background: var(--vr-amber); color: var(--vr-amber-ink); }
/* grey: you may not wear it at all yet */
.vr_badge_barred{ background: rgba(21,21,21,0.06); color: var(--vr-dim); }
.dark .vr_badge_barred{ background: rgba(255,255,255,0.08); }

.vr_none{ font-size: 14px; color: var(--vr-dim); padding: 22px 4px; }

/* ------------------------------- the note ---------------------------- */
.vr_note{
    display: flex; align-items: center; justify-content: space-between;
    gap: 22px; flex-wrap: wrap;
    padding: 18px 0 0; margin: 22px 0 0; border-top: 1px solid var(--vr-line);
}
.vr_note_head{ font-size: 14.5px; font-weight: 700; }
.vr_note_body{ font-size: 13px; color: var(--vr-dim); line-height: 1.5; padding: 5px 0 0; max-width: 82ch; }

/* ------------------------------ the preview -------------------------- */
.vr_preview{
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    padding: 16px 18px; margin: 20px 0 0;
    border-radius: 14px; border: 1px solid var(--vr-line); background: var(--vr-card);
}
.vr_preview_who{ display: flex; align-items: center; gap: 13px; min-width: 0; }
.vr_avatar{
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
    background-color: var(--vr-bg); background-size: cover; background-position: center;
    border: 1px solid var(--vr-line);
}
.vr_preview_name{ font-size: 16px; font-weight: 700; line-height: 1.25; }
/* exactly what a visitor sees under the name, updated as they choose */
.vr_preview_role{ font-size: 13px; color: #5f8f1f; font-weight: 700; padding: 2px 0 0; }
.dark .vr_preview_role{ color: var(--vr-lime); }
.vr_preview_actions{ display: flex; gap: 9px; flex-wrap: wrap; }

.vr_roles .vr_btn{
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 22px; border-radius: 24px; cursor: pointer; white-space: nowrap;
    border: 1px solid var(--vr-line-strong); background: transparent; color: var(--vr-ink);
    font-family: inherit; font-size: 14px; font-weight: 700;
}
.vr_roles .vr_btn:hover{ border-color: var(--vr-ink); }
.vr_roles .vr_btn_lime{ background: var(--vr-lime); border-color: var(--vr-lime); color: #151515; }
.vr_roles .vr_btn_lime:hover{ background: #d6ef8a; border-color: #d6ef8a; color: #151515; }

.vr_said{ font-size: 13.5px; font-weight: 700; padding: 12px 2px 0; }
.vr_said.is_ok{ color: #5f8f1f; }
.dark .vr_said.is_ok{ color: var(--vr-lime); }
.vr_said.is_bad{ color: #c0271c; }

@media (max-width: 1100px){
    .vr_grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px){
    .vr_roles_head h2{ font-size: 24px; }
    .vr_grid{ grid-template-columns: minmax(0, 1fr); }
    .vr_preview, .vr_note{ align-items: flex-start; }
}

/* =================== //VENTURE PROFILE — THE TOP BAR =================
   Who you are on the left, what you are on and until when on the right.

   The plan chip is one pill rather than three stacked lines: the tier
   and its end date are a single fact and they belong on one row, which
   is also what lets the upgrade button sit beside them instead of
   under a heading.
   ==================================================================== */

.vh_bar{
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    padding: 4px 0 18px;
    border-bottom: 1px solid var(--light-grey);
    margin-bottom: 22px;
}

.dark .vh_bar{ border-bottom-color: var(--dark-grey); }

/* ------------------------------ the member --------------------------- */

.vh_who{ display: flex; align-items: center; gap: 14px; min-width: 0; }

.vh_face{
    width: 52px; height: 52px; border-radius: 50%; flex: 0 0 52px;
    background: var(--light-grey) center/cover no-repeat;
}

.dark .vh_face{ background-color: var(--dark-grey); }

.vh_name{ min-width: 0; }

/* strong and span are the two elements adapt-main.css's .dark block does
   NOT repaint -- it covers h1-h5, p, ol and li -- so a bare <strong> here
   inherits #151515 from html and comes out near-black on the dark page.
   Both themes are stated rather than inherited for that reason. */
.vh_name strong{
    display: block;
    font-family: "SwissBlack", 'helvetica neue', Helvetica, Arial, sans-serif;
    font-size: 25px; line-height: 1.1em; letter-spacing: -0.01em;
    color: var(--text-color);
}

.dark .vh_name strong{ color: var(--off-white); }

.vh_name em{
    display: block; font-style: normal;
    font-size: 14px; margin-top: 2px;
    color: var(--dark-grey2);
}

.dark .vh_name em{ color: var(--mid-grey); }

.venture_grid .vh_name a{ text-decoration: underline; }

/* ------------------------------ the plan ----------------------------- */

.vh_plan{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.vh_chip{
    display: inline-flex; align-items: center; gap: 10px;
    border: 1px solid var(--light-grey); border-radius: 999px;
    padding: 9px 18px;
    white-space: nowrap;
}

.dark .vh_chip{ border-color: var(--dark-grey); }

.vh_chip b{
    font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dark-grey2);
}

.dark .vh_chip b{ color: var(--mid-grey); }

.vh_chip strong{ font-size: 15px; font-weight: 800; letter-spacing: 0.02em; color: var(--text-color); }
.dark .vh_chip strong{ color: var(--off-white); }

.vh_sep{
    width: 1px; height: 18px;
    background: var(--light-grey);
    display: inline-block;
}

.dark .vh_sep{ background: var(--dark-grey); }

.vh_chip em{ font-style: normal; font-size: 14px; color: var(--dark-grey2); }
.dark .vh_chip em{ color: var(--mid-grey); }

/* a membership the gate no longer honours says so */
.vh_chip em.is_over{ color: var(--tertiary-color); font-weight: 700; }

/* The button is the dark pill from the mockup. .dark a in adapt-main.css
   is class+element and would otherwise repaint this text, so the colour
   is set through the block class. */
.venture_grid .vh_up{
    display: inline-block;
    background: var(--text-color); color: #fff;
    border-radius: 999px; padding: 12px 22px;
    font-size: 15px; font-weight: 700; text-decoration: none;
    transition: filter 0.15s;
}

.venture_grid .vh_up:hover{ filter: brightness(1.6); }

.dark .venture_grid .vh_up{ background: var(--primary-color); color: var(--text-color); }
.dark .venture_grid .vh_up:hover{ filter: brightness(0.94); }

@media (max-width: 720px){
    .vh_bar{ gap: 14px; }
    .vh_plan{ width: 100%; }
    .vh_chip{ flex: 1 1 auto; justify-content: center; }
    .vh_name strong{ font-size: 21px; }
}

@media (max-width: 480px){
    .vh_chip{ white-space: normal; padding: 9px 14px; gap: 7px; }
    .vh_up{ width: 100%; text-align: center; }
}