/* =====================================================
   Pages (page-level styling)
   ===================================================== */


/* --- Source: sade-pages.css --- */

/*==============================
=            Funnel    =
==============================*/
.funnel-editor-customer-infobox
{
    min-height: 600px;
    width: 100%;
    flex-grow: 1;
    overflow-y: auto;
}

.funnel-editor-action-button
{
    width: 100%;
}

.funnel-editor-customer-row
{
    column-gap: 3em;
}

.funnel-editor-title
{
    display: block;
    width: 100%;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 2em;
}

/*==============================
=            Bootstrap Tabs    =
==============================*/
.tab-buttons
{
    display: flex;
    width: 100%;
}

.tab-button
{
    flex: 1;
    padding: 0.5em;
    text-align: center;
    border: none;
    background-color: var(--manager-tab-inactive-color);
    color: var(--text-dark);
    cursor: pointer;
}

    .tab-button.activetab
    {
        border: 1px solid var(--text-dark);
        font-weight: bold;
    }


.activetab
{
    background-color: var(--accent-color) !important;
}

body.dark-theme .activetab
{
    background-color: var(--sidebar-background-dark) !important;
}

nav .nav-pills
{
    display: none !important;
    height: 0px;
}

.dark-theme .nav-link
{
    color: var(--text-dark);
    background-color: var(--sidebar-background-dark);
}

    .dark-theme .nav-link.active
    {
        background-color: var(--sidebar-background-dark);
        border: 1px solid var(--text-dark)
    }



/*==============================
=            Gigs-tags         =
==============================*/

.tag-add-search-button
{
    background-color: var(--sidebar-background-light);
}

body.dark-theme .tag-add-search-button
{
    background-color: var(--sidebar-background-dark) !important;
}

.input::placeholder,
.gig-search-input::placeholder
{
    color: var(--text-light) !important;
    opacity: 0.7;
}

body.dark-theme .input::placeholder,
body.dark-theme .gig-search-input::placeholder
{
    color: var(--text-dark) !important;
    opacity: 0.7;
}

body.dark-theme .form-control::-ms-input-placeholder
{ 
    color: var(--text-dark);
}

.form-control
{
    color: var(--text-light);
    background-color: transparent;
    margin-bottom: 0.8rem;
}

body.dark-theme .form-control
{
    color: var(--text-dark);
    background-color: transparent;
}


.tag-badge
{
    background-color: var(--background-light);
    border: 1px solid var(--text-light);
    cursor: pointer;
    margin-right: 0.25rem;
}

body.dark-theme .tag-badge
{
    background-color: var(--background-dark) !important;
    border: 1px solid var(--text-dark);
}

/*==============================
=            HomePage            =
==============================*/
.gig-search-input
{
    color: red;
}

    .gig-search-input ::placeholder
    {
        color: red;
    }

/*==============================
=            HomePage            =
==============================*/
.gdpr a
{
    color: whitesmoke;
    font-style: italic;
}

.gdpr h1, h2, h3, h4
{
    color: var(--text-light);
}

.funnel-summary-chart
{
    background-color: white;
    height: 100%;
    width: 100%;
    color: black;
}


/* --- Source: gigs.css --- */

.gig-card
{
}

.gig-card .business-card-v2-tools
{
    width: 80px;
    background-color: black !important;
}

.card-list
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(480px, max-content));
    justify-content: center;
    gap: 3rem;
}

/*==============================
=            gig-card              =
==============================*/

.gig-card
{
    width: 400px;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    height: 400px;
    background: transparent;
    font-family: "Segoe UI", sans-serif;
    display: flex;
    flex-direction: column;
}

.gig-card .gig-card-image-container
{
    position: relative;
    height: 17em;
    overflow: hidden;
}

.gig-card img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background-color: white;
}

.gig-card .gig-card-info
{
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent 60%);
    color: var(--text-light);
    width: 100%;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.gig-card-info.has-image
{
    color: white !important;
}

.gig-card .gig-card-info-title
{
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px;
    white-space: normal;
}

.gig-card .gig-card-info-category
{
    font-size: 0.85rem;
    opacity: 0.85;
}

.gig-card .gig-card-info-details
{
    padding: 16px;
    font-size: 0.65rem;
    color: #333;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gig-card-info.has-image .gig-card-info-details
{
    color: white !important;
}

.gig-card .gig-card-info-badges
{
    display: flex;
    justify-content: normal;
    align-items: end;
    padding: 16px 16px 12px 16px;
    font-size: 0.75rem;
    flex-direction: column;
}

.gig-card .gig-card-info-company
{
    background-color: #000;
    color: white;
    border-radius: 12px;
    padding: 2px 8px;
    font-weight: 600;
    text-align: center;
}

.gig-card .gig-card-info-location 
{
    background-color: black;
    color: white;
    font-weight: 600;
    text-align: center;
    border-radius: 16px;
    padding: 7px 25px;
}

.gig-card-info.has-image .gig-card-info-location
{
    border: 1px solid white;
}

.gig-card .gig-card-description
{
    font-size: 0.75rem;
    background-color: var(--background-light);
    color: var(--text-light);
    padding: 20px 25px 20px 25px;
    flex-grow: 1;
}

.gig-card .gig-card-footer
{
    display: flex;
    justify-content: space-between;
    background-color: var(--background-light);
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--gig-card-lighter-text);
    font-size: 0.75rem;
}

.gig-card .gig-card-footer-read-more
{
    color: var(--text-light);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.gig-card .posted-date
{
    color: black;
    opacity: 0.7;
}


@media (max-width: 900px)
{
    .gig-card
    {
        width: 100% !important;
    }
}