/*
	
	
	16 titles (font-weight:300)
	13 sub-title (font-weight:100)
	11 text (font-weight:100)
	14 icons (ex. far fa-user)
*/
/*******************/
/* Main Layout CSS */
/*******************/

:root {
    --sidebar-width: 220px;
    --nav-height: 70px;
    --fs-title: 16px;
    --fs-sub-title: 13px;
    --fs-text: 11px;
    --fs-icon: 24px;
}

body {
    min-height: 100vh;
    background-color: var(--nlm-dark-background) !important;
    font-family: Raleway, Poppins, Helvetica, sans-serif;
    font-size: 13px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    width: 100vw;
}

body::-webkit-scrollbar {
    width: 1em;
}

/* 
body::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
} */

body::-webkit-scrollbar-thumb {
    /*   background-color: var(--nlm-blue); */
    outline: 1px solid var(--nlm-blue);
}

.sorter {
    cursor: pointer;
}

/****** SELECT 2 ITEMS *****/

.uploader-select {
    width: 100%;
}
.select2-container--default .select2-selection--single {
    border: 1px solid var(--nlm-dark-purple);
    border-radius: 4px;
    background-color: var(--nlm-dark-background);
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-color: var(--nlm-blue);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--nlm-blue);
}

.select2-container .select2-selection--single .select2-selection__rendered {
    color: var(--nlm-dark-purple);
}

.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above {
    background-color: var(--nlm-background);
    border: 1px solid var(--nlm-dark-purple);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--nlm-dark-purple);
    background-color: var(--nlm-background);
    color: white;
    font-weight: 200;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--nlm-foreground);
}

.select2-results {
    color: white;
    font-weight: 200;
}
/****** END SELECT 2 ITEMS *****/

.fc-unthemed .fc-disabled-day {
    background-color: var(--nlm-background);
    opacity: 1;
}

.fc-unthemed .fc-day,
.fc-unthemed td.fc-today {
    background-color: var(--nlm-background);
}

.fc-unthemed .fc-day-top.fc-today {
    color: var(--nlm-blue);
}

.fc-unthemed .fc-day-top {
    color: white;
}

.fc-unthemed .fc-day-header {
    background-color: var(--nlm-dark-purple);
    color: var(--nlm-dark-background);
    height: 35px;
    vertical-align: middle;
}

.fc-unthemed td.fc-state-highlight {
    background: unset;
    background-color: #3b92c7;
    opacity: 0.25;
}

.fc-unthemed .fc-event {
    background-color: var(--nlm-background);
    border: 1px solid white;
    padding: 0;
    line-height: inherit;
}

.fc-unthemed .fc-day-grid-event .fc-content::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0px;
    width: 8px;
    height: 100%;
    border-radius: 1.7px 0 0 1.7px;
}
.fc-unthemed .fc-day-grid-event .fc-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-content.blue::before {
    background-color: var(--nlm-blue);
}

.fc-content.green::before {
    background-color: var(--nlm-green);
}

.fc-content.gray::before {
    background-color: var(--nlm-gray);
}

.fc-content.yellow::before {
    background-color: var(--nlm-yellow);
}

.fc-content.red::before {
    background-color: var(--nlm-red);
}

.fc-unthemed .fc-day-grid-event .fc-content {
    position: relative;
    padding: 1px 0px 1px 12px;
}

/* prevent scrollbar for calendar */
.fc-scroller fc-day-grid-container {
    overflow-y: visible !important;
    height: auto !important;
}
.fc-day-grid-container {
    min-height: 100px !important;
    height: 100% !important;
}

.fc-unthemed .fc-button {
    background-color: var(--nlm-dark-purple);
    border: 1px solid var(--nlm-background);

    color: var(--nlm-background);
    border-radius: 3px;
}

.fc-unthemed .fc-center h2 {
    font-weight: 400;
    color: white;
}

.fc-unthemed .fc-divider,
.fc-unthemed .fc-popover .fc-header,
.fc-unthemed .fc-list-heading td {
    background-color: var(--nlm-dark-purple);
    color: var(--nlm-dark-background);
}

.fc-unthemed .fc-more-popover .fc-event-container {
    background-color: var(--nlm-dark-background);
}

.nlm-icons {
    font-size: 14px;
    display: inline-block;
    border-radius: 60px;
    box-shadow: 0px 0px 2px;
    padding: 5px;
    background-color: var(--nlm-blue);
    color: var(--nlm-background);
    cursor: pointer;
}

.nlm-icons.opaque {
    opacity: 0.25;
    cursor: default;
}

.page-sidebar {
    background-color: var(--nlm-dark-background);
    position: fixed;
    left: calc(-1 * var(--sidebar-width));
    width: var(--sidebar-width);
    top: var(--nav-height);
    height: calc(100vh - var(--nav-height));
    padding-left: 20px;
    z-index: 15;
    transition: left 0.2s ease;
    box-shadow: 0px 16px 16px 0px rgba(0, 0, 0, 0.6);
    /* overflow: scroll; */
}

.page-sidebar.active {
    left: 0;
}

.page-content {
    padding-top: 17px;
    grid-area: page-content;
    background-color: var(--nlm-dark-background);
    overflow-x: hidden;
    position: relative;
}

.logo {
    height: var(--nav-height);
    width: 185px; /* was 170px */
    background: url(../img/NLM_logo.png);
    background-size: contain;
}

.page-sidebar .logo {
    display: none;
}

#wrapper {
    position: relative;
    height: 100%;
    display: grid;
    grid-gap: 0px;
    grid-template-rows: var(--nav-height) 1fr;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-areas:
        "page-nav page-nav"
        "page-content page-content";
    color: #444;
}

body.hide-scroll::-webkit-scrollbar {
    width: 0 !important;
}
body.hide-scroll {
    -ms-overflow-style: none;
}

.page-content::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 10px;
}

/*
.page-content::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background-color: #8c96ac;
	-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
*/

.page-content .simplebar-scrollbar:before {
    background-color: #8c96ac;
}

.simplebar-wrapper {
    min-height: 625px;
}

.page-content .simplebar-content-wrapper {
    min-height: calc(100vh - 70px);
}

@media (min-width: 992px) {
    #wrapper {
        grid-template-areas:
            "page-sidebar page-nav"
            "page-sidebar page-content";
        color: #444;
    }

    .page-sidebar {
        grid-area: page-sidebar;
        box-shadow: none;
        top: 0;
        left: 0;
        z-index: 10;
        display: block;
    }

    .page-sidebar .logo {
        display: block;
    }
    .page-nav .logo {
        display: none;
    }
}

/**********************/
/*  Sweet Alert CSS  */
/**********************/

/*
.swal2-popup.swal2-toast.swal2-show {
	background-color: var(--nlm-dark-purple);
}
*/

/**********************/
/* Project Actions CSS */
/**********************/

.create-project {
    text-align: right;
}

.view-toggle {
    display: none;
    grid-area: view-toggle;
}

.create-project {
    grid-area: create-project;
}

.create-user {
    text-align: right;
    grid-area: create-user;
}

.hide-completed {
    grid-area: completed;
}

.project-actions {
    text-align: left;
    display: grid;
    grid-gap: 10px;
    grid-template-areas:
        "search-bar search-bar   search-bar create-project"
        "filter .....  create-user   create-user"
        "completed completed completed .....";
    grid-template-columns: 81px 75px 1fr 125px;
}

.access-restriction .select2.select2-container.select2-container--default {
    width: 100% !important;
}

@media (min-width: 396px) {
    .project-actions {
        grid-template-areas:
            "search-bar search-bar   search-bar .....  create-project"
            "filter     view-toggle  ..... create-user create-user"
            "completed completed completed ..... .....";
        grid-template-columns: 100px 81px 2fr 1fr 125px;
    }

    .view-toggle {
        display: block;
    }
}

@media (min-width: 768px) {
    .project-actions {
        grid-template-areas:
            "search-bar filter view-toggle create-user create-project"
            "completed ..... ..... ..... .....";
        grid-template-columns: 7fr 100px 75px 2fr 125px;
    }
}

@media (min-width: 1100px) {
    .project-actions {
        grid-template-areas:
            "search-bar filter view-toggle create-user create-project"
            "completed completed completed completed .....";
        grid-template-columns: 420px 100px 75px 2fr 125px;
    }
}

.display-toggle .toggle-handle {
    background-color: var(--nlm-background);
    border: 1px solid var(--nlm-dark-purple);
}

.search-bar {
    position: relative;
    font-size: 16px;
    color: white;
    grid-area: search-bar;
}

.search-bar input {
    text-indent: 32px;
    width: 100%;
    line-height: 24px;
    height: 34px;
    padding: 5px 10px;
    border: 1px solid var(--nlm-dark-purple);
    border-radius: 3px;
    background-color: var(--nlm-dark-background);
}

.search-bar input::placeholder {
    color: var(--nlm-dark-purple);
}
.search-bar input:focus {
    outline: var(--nlm-blue) auto 5px;
    outline-color: var(--nlm-blue);
    outline-style: auto;
    outline-width: 5px;
}

.search-bar .fa-search {
    position: absolute;
    color: var(--nlm-dark-purple);
    top: 8px;
    left: 10px;
}

.filter {
    position: relative;
    display: inline-block;
    grid-area: filter;
}

.filter .dropdown-content {
    display: none;
    position: absolute;
    border-radius: 3px;
    background-color: var(--nlm-foreground);
    min-width: 225px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    padding-top: 12px;
    margin-top: 4px;
    z-index: 1;
}

.filter .dropdown-content .header {
    text-align: center;
    font-size: var(--fs-title);
    color: var(--nlm-gray);
    padding-bottom: 8px;
    border-bottom: 1px solid black;
    width: 100%;
}

.filter .dropdown-content .items {
    padding: 8px 20px;
    color: var(--nlm-gray);
}

.filter .dropdown-content .items + .items {
    border-top: 1px solid var(--nlm-dark-background);
}

.items .far,
.items .fas,
.items .fal {
    font-size: 15px;
    padding-right: 4px;
    color: var(--nlm-gray);
}

.items .item-dropdown {
    margin: 10px auto 10px 20px;
}

.filter .dropdown-content .item-wrapper {
    padding: 0 5px;
    max-height: 50vh;
    overflow-y: scroll;
}

.filter .item-wrapper::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 10px;
}

.filter .item-wrapper::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #8c96ac;
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

.filter .dropdown-content .footer {
    position: relative;
    font-size: var(--fs-title);
    background-color: var(--nlm-foreground);
    color: white;
    border-top: none;
    padding: 8px 10px;
    width: 100%;
    border-top: 1px solid black;

    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.filter .dropdown-content .footer .btn {
    min-width: 72px;
}

.project-stats {
    color: white;
    font-size: 16px;
    font-weight: 300;
}
.project-stats span {
    color: var(--nlm-blue);
}
/*********************/
/* Project Block CSS */
/*********************/

.project-block {
    position: relative;
    font-size: 13px;
    width: 100%;
    height: 350px;
    background-color: var(--nlm-background);
    border: 1px solid white;
    border-radius: 3px;
    color: var(--nlm-gray);
    cursor: pointer;
}

.project-block .title {
    color: white;
    font-size: 16px;
    font-weight: 300;
    height: 78px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}

.project-block .content {
    height: 250px;
    padding-top: 20px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
}

.project-block .divider {
    border-bottom: 1px solid white;
    box-shadow: 0 5px white;
}

.project-block span {
    font-weight: 200;
}

.project-block .nlm-icons {
    float: right;
    font-size: 18px;
    margin-left: 10px;
    border-radius: 60px;
    box-shadow: 0px 0px 2px;
    padding: 5px;
    background-color: var(--nlm-blue);
    color: var(--nlm-background);
}

.project-block .nlm-icons.opaque {
    opacity: 0.25;
}
.project-block .nlm-icons.nlm-red,
.project-list .row-files .nlm-icons.nlm-red {
    background-color: var(--nlm-red);
}

.new-note {
    position: absolute;
    top: 2px;
    right: 2px;
    color: var(--nlm-red);
    color: white;
}

.project-gallery {
    margin-top: 20px;
    margin-bottom: 20px;
    display: none;
}

@media (min-width: 396px) {
    .project-gallery {
        display: none;
        align-items: center;
        grid-gap: 10px;
        grid-template-columns: 1fr 1fr;
        align-content: space-around;
        justify-content: space-between;
    }
    .project-gallery.active {
        display: grid;
    }
}
@media (min-width: 768px) {
    .project-gallery {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
@media (min-width: 992px) {
    .project-gallery {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

/********************/
/* Project List CSS */
/********************/

.toggle .btn .display-toggle .btn-background-toggle {
    width: 100%;
}

.project-list .project-row,
.project-list .header {
    display: grid;
    grid-column-gap: 8px;
    grid-row-gap: 5px;
    grid-template-columns: 40px 2.25fr 4fr 2.5fr 2fr 100px 90px;
    grid-template-areas: "row-select row-type row-name row-producer row-status row-dates row-files";
}

.project-list .header .row-type {
    padding-left: 5px;
}

.project-row .row-name div {
    vertical-align: top;
}

.project-list .row-select {
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    color: var(--nlm-background);
}

.project-row .row-select {
    grid-area: row-select;
    display: flex;
    align-items: center;
}
.project-row .row-type {
    grid-area: row-type;
    display: flex;
    align-items: center;
    padding-left: 8px;
}
.project-row .row-name {
    grid-area: row-name;
    display: flex;
    align-items: center;
}
.project-row .row-producer {
    grid-area: row-producer;
    display: flex;
    align-items: center;
}
.project-row .row-status {
    grid-area: row-status;
    display: flex;
    align-items: center;
}
.project-row .row-dates {
    grid-area: row-dates;
    display: flex;
    align-items: center;
}
.project-row .row-files {
    grid-area: row-files;
    display: flex;
    align-items: center;
}

.project-row .row-files i + i {
    margin-left: 4px;
}

.row-type-block {
    display: none;
}

.project-list {
    margin-top: 20px;
    margin-bottom: 20px;
}

.project-gallery,
.project-list {
    padding-bottom: 30px;
}

@media (min-width: 396px) {
    .project-list {
        display: none;
    }
    .project-list.active {
        display: block;
    }
}

@media (max-width: 1028px) {
    .project-list .row-producer,
    .project-list .row-files,
    .project-list .row-type {
        display: none;
    }

    .row-type-block {
        grid-area: row-type-block;
        display: flex;
        align-items: center;
        width: 5px;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .project-list .project-row,
    .project-list .header {
        grid-template-columns: 5px 20px 1.5fr 1fr 1.5fr;
        grid-template-areas: "row-type-block row-select row-name row-status row-dates";
    }
}

.project-list {
    font-size: 13px;
}

.project-list .project-row .sub-text {
    font-size: 11px;
}

.project-list .header {
    color: white;
    font-size: 16px;
    border-bottom: 2px solid var(--nlm-dark-purple);
    font-weight: 300;
    width: 100%;
    padding-bottom: 5px;
}

.project-list .project-row {
    border-bottom: 1px solid var(--nlm-dark-background);
    color: var(--nlm-gray);
    background-color: var(--nlm-background);
    height: 50px;
    width: 100%;
}

.project-list .project-row span {
    font-weight: 200;
}

.project-list .nlm-icons {
    font-size: 14px;
    display: inline-block;
    border-radius: 60px;
    box-shadow: 0px 0px 2px;
    padding: 5px;
    background-color: var(--nlm-blue);
    color: var(--nlm-background);
}

.project-list .row-files .nlm-icons {
    font-size: 8px;
}

.project-list .nlm-icons.opaque {
    opacity: 0.25;
}

/***************/
/* Sidebar CSS */
/***************/

:root {
    --sidebar-item-height: 43px;
    --sidebar-break-height: 30px;
}

.nav-items {
    color: var(--nlm-dark-purple);
    font-size: var(--fs-title);
    font-weight: 300;
    margin-top: 23px;
    margin-left: 20px;
    cursor: pointer;
}

.nav-item {
    height: var(--sidebar-item-height);
    position: relative;
    cursor: pointer;
}

.nav-item.active {
    color: var(--nlm-blue);
}

.nav-item.active::before {
    content: "";
    position: absolute;
    margin-right: 5px;
    left: -40px;
    top: -13px;
    bottom: 14px;
    font-size: 79%;
    background-color: var(--nlm-blue);
    color: white;
    font-weight: bold;
    padding: 0px 2px;
}

.nav-items .break,
.nav-items .break.moving {
    height: var(--sidebar-break-height);
    transition: height ease 0.7s;
    transition-delay: 0.2s;
    cursor: unset;
}

.nav-items .label {
    color: white;
    margin-left: 10px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 15px;
    text-align: center;
}

.catalog > div {
    position: absolute;
    pointer-events: none;
}

.catalog.selected > * {
    pointer-events: unset;
}

.catalog .closed {
    opacity: 0;
    transition: opacity ease 0.4s;
    transition-delay: 0;
    cursor: auto;
}

.catalog .open {
    opacity: 1;
    transition: opacity ease 0.4s;
    transition-delay: 0.7s;
}

.catalog a {
    color: var(--nlm-blue);
}

.catalog img {
    height: 40px;
    margin-left: 26px;
    margin-top: 20px;
}

#beat-tracks {
    margin-top: 0;
    transition: margin-top ease 0.7s;
    transition-delay: 0.2s;
}

#beat-tracks.go {
    margin-top: 120px;
    transition-delay: 0s;
}

#beat-tracks .open,
#beat-tracks .closed {
    margin-left: 26px;
    margin-top: 20px;
}

.nav-items .break.moving.go {
    height: calc(var(--sidebar-break-height) + 470px);
    transition-delay: 0s;
}

/**************/
/* Navbar CSS */
/**************/

.page-nav {
    z-index: 9;
    display: grid;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    padding: 0 20px 0 0;
    grid-template-columns: 200px 1fr 30px 20px 30px 20px 30px;
    grid-gap: 0px;
    grid-template-areas: "nav-logo ..... message-button .... profile-button .... menu-button";
    background-color: var(--nlm-dark-background);
    margin: 0;
    border-bottom: none;
}

.page-nav .logo {
    grid-area: nav-logo;
}

.nav-button {
    font-size: var(--fs-icon);
    color: var(--nlm-blue);
    position: relative;
}

.nav-button > i {
    position: absolute;
    top: 29px;
    bottom: 0;
    margin: auto;
}

.menu-button {
    grid-area: menu-button;
}

.profile-button {
    grid-area: profile-button;
}

.message-button {
    grid-area: message-button;
}

@media (min-width: 396px) {
    .page-nav {
        padding: 0 10px 0 20px;
    }
}

@media (min-width: 992px) {
    .page-nav {
        grid-template-columns: 1fr 30px 20px 30px;
        grid-template-areas: "...... message-button .... profile-button";
    }

    .page-nav {
        grid-area: page-nav;
    }

    .menu-button {
        display: none;
    }
}

/**********************/
/* Project Detail CSS */
/**********************/

.project-detail .mix-name,
.project-detail-header .project-name {
    color: white;
    font-size: 24px;
    min-height: 34px;
}

.project-detail-header .tab-label {
    font-weight: 600;
    align-self: center;
    background-color: #222;
    border-radius: 3px;
    padding: 10px 6px;
    height: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
}

@media (max-width: 902px) {
    .project-detail-header .tab-label {
        font-size: 13px;
    }
}

.mix-name input {
    height: 28px;
}
.nlm-right {
    margin-right: 0;
    margin-left: auto;
    padding-right: 4px;
}

.project-detail .project-edit {
    /*
	margin-top: 13px;
	float: right;
*/
    cursor: pointer;
}

.project-detail .project-status {
    font-size: 13px;
    min-height: 18px;
}

.project-detail .project-production,
.project-detail .project-locked,
.project-detail .project-client {
    color: white;
    font-size: 13px;
    font-weight: 200;
    min-height: 18px;
}

.project-detail .divider {
    border-bottom: 1px solid var(--nlm-dark-purple);
}

.project-detail span {
    font-size: var(--fs-sub-title);
}

.project-detail span.season {
    color: var(--nlm-gray);
}

.project-detail .program-name,
.project-detail-header .project-program {
    color: white;
    font-size: 20px;
    font-weight: 200;
    min-height: 28px;
}

.project-detail input {
    background-color: var(--nlm-dark-background);
    border: none;
    border-bottom: 1px solid var(--nlm-dark-purple);
    color: white;

    height: 28px;

    padding-left: 4px;
}

.project-detail .project-info {
    text-align: left;
    color: white;
    font-size: 13px;
    font-weight: 200;

    grid-column-gap: 20px;
    grid-row-gap: 10px;

    display: grid;
    grid-template-columns: 100px 1fr;
}

.project-detail-description {
    text-align: left;
    color: white;
    font-size: 13px;
    font-weight: 200;
    grid-column-gap: 10px;
    display: grid;
    grid-template-areas:
        "client-label client spacer submission-label submission"
        "division-label division spacer length-label length"
        "producer-label producer spacer completion-label completion";

    grid-template-columns: 65px 180px 20px 80px 80px;
}

.project-detail-description .client-label {
    grid-area: client-label;
}
.project-detail-description .client {
    grid-area: client;
}

.project-detail-description .division-label {
    grid-area: division-label;
}
.project-detail-description .division {
    grid-area: division;
}

.project-detail-description .length-label {
    grid-area: length-label;
}

.project-detail-description .length {
    grid-area: length;
    text-align: end;
}

.project-detail-description .submission-label {
    grid-area: submission-label;
}
.project-detail-description .submission {
    grid-area: submission;
    text-align: end;
}
.project-detail-description .producer-label {
    grid-area: producer-label;
}
.project-detail-description .producer {
    grid-area: producer;
}
.project-detail-description .completion-label {
    grid-area: completion-label;
}
.project-detail-description .completion {
    grid-area: completion;
    text-align: end;
}

@media (min-width: 736px) {
    .project-detail-description {
        grid-template-areas:
            "client-label client spacer1 length-label length spacer2 submission-label submission"
            "producer-label producer spacer1 division-label division spacer2 completion-label completion";

        grid-template-columns: 65px 150px 20px 80px 140px 20px 80px 80px;
    }
    .project-detail-description .length {
        text-align: unset;
    }
}

.project-detail-header {
    text-align: center;
    color: var(--nlm-dark-purple);
    font-size: 16px;
    font-weight: 300;

    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 30px;
    margin-bottom: 40px;
}

.project-detail-header.header-not-at-top {
    --sticky-project-detail-height: 115px;
    position: fixed;
    margin: 0;
    top: 0;
    z-index: 10;
    padding: var(--sticky-project-detail-height) 0 20px;
    /* background-image: linear-gradient( 
        180deg,
        rgb(19, 22, 28),
        rgb(12 12 12 / 73%)
    );
    background-color: #13161c; */
    background-color: var(--nlm-dark-background);
}

.project-detail-header .only-show-sticky {
    display: none;
}

.project-detail-header.header-not-at-top .only-show-sticky {
    display: block;
    position: absolute;
    margin: 0;
    top: 0;
    z-index: 10;
    padding: 25px 0 20px;
    text-align: left;
}

.project-detail-header.client {
    grid-template-columns: 1fr 1fr 1fr;
}

.project-detail-header.client > [data-name="notes"] {
    display: none;
}

.project-detail-header .active {
    color: white;
    border-bottom: 1px solid var(--nlm-blue);
    background-color: var(--nlm-blue);
}

.project-detail .grid + .grid {
    margin-top: 3px;
}

.project-detail .grid {
    text-align: center;
    color: var(--nlm-dark-purple);
    font-size: 13px;
    font-weight: 200;

    border-radius: 3px;
    grid-gap: 2px;
    display: grid;

    /*
	grid-template-areas:
		"row-content count-1 count-2 count-3 count-4 count-5 count-6 count-7 count-8"
		"row-content content-1 content-2 content-3 content-4 content-5 content-6 content-7 content-8";
*/

    grid-template-areas:
        "add-delete count-1 count-2 count-3 count-4 count-5 count-6 count-7 count-8"
        "row-content content-1 content-2 content-3 content-4 content-5 content-6 content-7 content-8";

    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.project-detail .grid .grid-label {
    color: var(--nlm-dark-background);
    border: 1px solid var(--nlm-dark-purple);
    background-color: var(--nlm-dark-purple);
    height: 20px;
}

.project-detail .grid .grid-content {
    color: white;
    height: 50px;

    background-color: var(--nlm-background);

    display: flex;
    align-items: center;
    justify-content: center;
}
.project-detail .grid .grid-content textarea {
    text-align: center;

    color: white;
    font-weight: 300;

    width: 100%;
    height: 100%;
    max-height: 50px;
    background-color: var(--nlm-background);

    line-height: 1;

    resize: none;

    padding: 0px;
    border: none;

    overflow-y: hidden;
}

.project-detail .grid .row-content {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: row-content;
    color: var(--nlm-dark-background);
    font-weight: 300;

    background-color: var(--nlm-dark-purple);
}

.project-detail .grid .row-content input {
    background-color: var(--nlm-dark-purple);
    border-bottom: 1px solid var(--nlm-dark-background);
    width: 95%;
    height: 30px;
    color: white;
    text-align: center;
}

.project-detail .grid .add-delete {
    background-color: var(--nlm-dark-purple);
    /* 	border-bottom: 1px solid var(--nlm-dark-background); */

    cursor: pointer;

    color: var(--nlm-dark-background);

    grid-area: add-delete;
}

.project-detail .grid .add-delete:hover {
    color: white;
}

.project-detail .grid .count-1 {
    grid-area: count-1;
}
.project-detail .grid .content-1 {
    grid-area: content-1;
}

.project-detail .grid .count-2 {
    grid-area: count-2;
}
.project-detail .grid .content-2 {
    grid-area: content-2;
}

.project-detail .grid .count-3 {
    grid-area: count-3;
}
.project-detail .grid .content-3 {
    grid-area: content-3;
}

.project-detail .grid .count-4 {
    grid-area: count-4;
}
.project-detail .grid .content-4 {
    grid-area: content-4;
}

.project-detail .grid .count-5 {
    grid-area: count-5;
}
.project-detail .grid .content-5 {
    grid-area: content-5;
}

.project-detail .grid .count-6 {
    grid-area: count-6;
}
.project-detail .grid .content-6 {
    grid-area: content-6;
}

.project-detail .grid .count-7 {
    grid-area: count-7;
}
.project-detail .grid .content-7 {
    grid-area: content-7;
}

.project-detail .grid .count-8 {
    grid-area: count-8;
}
.project-detail .grid .content-8 {
    grid-area: content-8;
}

.versioning {
    font-size: 14px;
    font-weight: 200;

    margin: 20px 0px;
    color: white;
}

.versioning .btn-dark {
    height: 28px;
    padding: 0px 20px;
}

.versioning select {
    max-width: 300px;
    height: 35px;
    background-color: var(--nlm-dark-background);
    border: none;
}

/**********************/
/* Project Notes CSS */
/**********************/

#new_notes {
    font-size: 10px;
    color: var(--nlm-red);
    margin-left: 5px;
    display: none;
}

.project-detail .notes-area {
    display: block;

    background-color: var(--nlm-background);
    color: var(--nlm-dark-purple);

    width: 100%;
    min-height: 300px;
    max-height: 500px;

    border-radius: 3px;
    padding: 10px;

    border: 1px solid var(--nlm-foreground);

    overflow-y: scroll;
}

.project-detail .notes-area .send-tag {
    font-size: 10px;
    font-weight: 200;
    margin-top: 5px;
    margin-bottom: 1px;
}

.send-tag.right {
    margin-right: 0;
    margin-left: auto;
    padding-right: 4px;

    text-align: right;
}

.send-tag.left {
    padding-left: 4px;
}

.project-detail .notes-area .bubble {
    word-wrap: break-word;
    font-weight: 500;
    font-size: 13px;

    max-width: 60%;
    min-width: 10px;

    border-radius: 10px;
    padding: 4px;

    margin-bottom: 1px;
}

.project-detail .notes-area .current-wrapper {
    text-align: right;
    margin-right: 0;
    margin-left: auto;
}
.project-detail .notes-area .current-user {
    display: inline-block;
    background-color: var(--nlm-blue);
    color: white;
}

.project-detail .notes-area .other-user {
    display: inline-block;
    background-color: var(--nlm-gray);
    color: var(--nlm-dark-background);
}

.project-detail .grid {
    text-align: center;
    color: var(--nlm-dark-purple);
    font-size: 13px;
    font-weight: 200;

    border-radius: 3px;
}

.project-detail .notes-footer {
    border-radius: 3px;
    background-color: var(--nlm-background);
    width: 100%;
    height: 40px;

    padding: 5px 10px;
    margin-top: 10px;

    grid-gap: 2px;
    display: grid;

    grid-template-areas: "input send";

    grid-template-columns: 1fr 80px;
}

.project-detail .notes-footer btn-dark {
    grid-area: send;
    width: 80px;
}

.project-detail .notes-footer textarea {
    resize: none;
    color: white;
    grid-area: input;
    width: 100%;
    min-width: 30px;
    background-color: var(--nlm-dark-background);

    height: 30px;

    border-radius: 3px;
    border: 1px solid var(--nlm-dark-purple);

    padding: 5px 5px;
}

.project-detail .notes-footer .btn-dark {
    height: 30px;
    padding: 0px 20px;
}

/**********************/
/*  Date picker CSS   */
/**********************/

/* Datepicker */
.content-item .calendar,
.filter-datepicker .calendar,
.filter-datepickerlock .calendar,
.filter-datepickersubmission .calendar {
    grid-column: 2;
    width: 250px;
}

.calendar-format .calendar {
    justify-self: center;
    grid-column: span 3;
    width: 90%;
}

.calendar-format .active {
    border-bottom: 1px solid var(--nlm-blue);
}

.sidebar-content .calendar-format input {
    background-color: var(--nlm-dark-background);
    border: none;
    border-bottom: 1px solid var(--nlm-dark-purple);
    height: 28px;
    color: white;
    padding-left: 3px;

    text-align: center;
    width: 100%;

    grid-column: span 3;

    font-size: 15px;
}

@media (max-width: 496px) {
    .content-item .calendar,
    .filter-datepicker .calendar,
    .filter-datepickerlock .calendar,
    .filter-datepickersubmission .calendar {
        grid-column: span 2;
        width: 250px;
        justify-self: center;
    }
}

.ui-widget.ui-widget-content {
    border: 1px solid var(--nlm-dark-purple);
    background-color: var(--nlm-foreground);
    width: 100%;
}

.ui-datepicker .ui-datepicker-header {
    background-color: var(--nlm-foreground);
    color: white;
    border-color: var(--nlm-foreground);
}

.ui-datepicker table {
    color: white;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    background-color: var(--nlm-foreground);
    color: white;
    text-shadow: none;
}

/* END Datepicker */

.datepicker a.ui-state-default.ui-state-active,
.filter-datepicker a.ui-state-default.ui-state-active,
.filter-datepickerlock a.ui-state-default.ui-state-active,
.filter-datepickersubmission a.ui-state-default.ui-state-active {
    background: var(--nlm-blue);
}

.datepicker .ui-state-default,
.datepicker .ui-datepicker,
.filter-datepicker .ui-state-default,
.filter-datepickerlock .ui-state-default,
.filter-datepickersubmission .ui-state-default,
.filter-datepicker .ui-datepicker,
.filter-datepickerlock .ui-datepicker,
.filter-datepickersubmission .ui-datepicker {
    border-radius: 3px;
}

.datepicker,
.filter-datepicker,
.filter-datepickerlock,
.filter-datepickersubmission {
    font-size: 15px;
}

.ui-datepicker td a.ui-state-default {
    padding: 5px 6px;
}

/**********************/
/* Project Upload CSS */
/**********************/

.project-detail .uploader-content,
.admin-tabs .uploader-content {
    margin-bottom: 50px;
    border-radius: 3px;
    padding: 10px;
    font-weight: 200;
    color: white;
    background-color: var(--nlm-background);
}

.uploader-content .uploader-grid {
    display: grid;
    grid-gap: 5px;

    margin: 10px 0px;

    grid-template-columns: 100px 1fr;
}

.uploader-content .uploader-header {
    text-align: center;
    font-size: 22px;
    color: white;
    font-weight: 200;

    cursor: pointer;

    margin: 10px 0px;
}

.uploader-content .off {
    height: 0px;
    overflow-y: hidden;
}

.uploader-grid .upload-label {
    font-weight: 300;
    padding-top: 5px;
}

.uploader-grid .btn-dark {
    width: 75px;

    height: 30px;
    padding: 3px;
}

.uploader-grid select {
    width: 100%;
    height: 35px;
    background-color: var(--nlm-background);
    border: 1px solid var(--nlm-dark-purple);

    padding: 5px;

    border-radius: 3px;
}

.uploader-grid textarea {
    padding: 5px;

    resize: none;

    width: 100%;
    background-color: var(--nlm-background);
    border: 1px solid var(--nlm-dark-purple);

    border-radius: 3px;
}

.uploader-grid .progress-bar-area {
    grid-column: 2;
    height: 10px;
    width: 100%;
}
.uploader-grid .progress-bar-area > div {
    background-color: var(--nlm-background);
    border: 1px solid var(--nlm-dark-purple);

    border-radius: 10px;
    margin-bottom: 0;
    width: 100%;
}

.uploader-grid .progress-bar-data {
    grid-column: 2;

    font-weight: 200;
    font-size: 9px;

    letter-spacing: 1px;
    padding-left: 2px;

    color: white;
}

.uploader-grid .progress-bar-area .upload-progress-bar {
    background-color: var(--nlm-blue);
    border: none;
    border-radius: 10px;
    margin-top: 1px;
    margin-bottom: 1px;
    height: 5px;
    transition: width 0.3s ease;
}

.uploader-grid .upload-button {
    font-weight: 300;
    grid-column: 2;
    margin-right: 0;
    margin-left: auto;
    /* 	padding-right: 4px;	 */
}

.uploader-grid .btn-dark {
    font-weight: 300;
    padding: 4px 8px;
}

/*
.video-gallery:before{
    position:absolute;
    z-index:0;
    top:0;
    left:0;
    width:100%;
    content:"";
}
*/

.media-gallery-row.header {
    background-color: var(--nlm-background);
    height: 30px;
    padding-top: 0px;
}

.media-gallery {
    position: relative;
    z-index: 2;
    font-size: 13px;
    font-weight: 200;
    color: white;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr;
    margin-bottom: 50px;
}

.media-gallery-row {
    display: grid;
    padding-top: 3px;
    padding-top: 3px;
    grid-column-gap: 20px;
    grid-template-columns: 90px 1fr 2fr 60px 1fr;
}

.media-gallery-row.client-view {
    grid-template-columns: 90px 1fr 2fr 60px 1fr;
}

.media-gallery-row.client-view .media-delete {
    display: none;
}

.media-gallery-row.client-view .media-description {
    grid-column: span 2;
}

.media-gallery-row.client-view .media-date {
    display: none;
}

.media-gallery .media-label {
    z-index: 2;
    font-size: 16px;
    font-weight: 300;
    padding-top: 5px;
    width: 100%;
}

.media-label.span2 {
    grid-column: span 2;
}

.media-gallery .media-label.actions {
    grid-column: span 2;
}

.media-gallery .divider {
    padding: 0px;
    border-bottom: 1px solid var(--nlm-dark-purple);
}

.media-gallery .media-delete {
    margin-right: 10px;
    cursor: pointer;
}

.content-spreadsheet-wrapper {
    margin-bottom: 80px;
}

.content-spreadsheet-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 50px;
    column-gap: 5px;
    background-color: var(--nlm-background);
    border-bottom: 1px solid var(--nlm-dark-purple);
    height: 30px;
    color: white;
    font-size: 16px;
    font-weight: 300;
    padding-left: 3px;
    padding-right: 3px;
}

.content-spreadsheet-header > div {
    padding-top: 4px;
}

.content-spreadsheet-input-grid {
    display: grid;
    grid-template-columns: 1fr 4fr;
    column-gap: 10px;
    row-gap: 15px;
}

.content-spreadsheet-input-grid .content-spreadsheet-input-label {
    font-size: 14px;
    color: var(--nlm-gray);
    font-weight: 400;
}

.content-spreadsheet-input input {
    text-align: left;
    font-size: 14px;
    border-radius: 6px;
    padding-left: 3px;
    border: 1px solid var(--nlm-dark-purple);
    color: var(--nlm-gray);
    width: 100%;
    max-width: 700px;
}

.content-spreadsheet-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 50px;
    min-height: 30px;
    grid-gap: 5px;
    font-size: 14px;
    color: white;
    padding: 4px;
}

.content-spreadsheet-row + .content-spreadsheet-row {
    border-top: 1px solid var(--nlm-dark-purple);
}

@media (max-width: 680px) {
    .content-spreadsheet-row,
    .content-spreadsheet-header {
        grid-template-columns: 1fr 1fr 50px;
    }
    .content-hide {
        display: none;
    }
}

.hide-spreadsheet {
    display: none;
}

.media-delete .nlm-icons {
    height: 25px;
    width: 25px;
    text-align: center;
    cursor: pointer;
}

#file-viewer-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 20;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
}

#video-viewer,
#music-viewer {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    max-width: 70%;
    max-height: 90%;
    background-color: black;
    margin: auto;
    z-index: 21;
    display: none;
}

@media (max-width: 768px) {
    .project-detail .grid + .grid {
        margin-top: 10px;
    }

    .media-gallery .media-description {
        display: none;
    }

    .media-gallery-row {
        grid-template-columns: 80px 3fr 60px 1fr;
    }

    .media-gallery-row.client-view {
        grid-template-columns: 3fr 60px 1fr;
    }

    .project-detail .grid {
        border-radius: 3px;
        grid-gap: 2px;
        display: grid;

        /*
		grid-template-areas:
			"row-content count-1 count-2 count-3 count-4"
			"row-content content-1 content-2 content-3 content-4" 			
			"row-content count-5 count-6 count-7 count-8"
			"row-content content-5 content-6 content-7 content-8";
*/

        grid-template-areas:
            "add-delete count-1 count-2 count-3 count-4"
            "row-content content-1 content-2 content-3 content-4"
            "row-content count-5 count-6 count-7 count-8"
            "row-content content-5 content-6 content-7 content-8";

        grid-template-columns: 1.5fr 2fr 2fr 2fr 2fr;
    }
}

@media (max-width: 560px) {
    .media-gallery-row[data-type="auto-license"] {
        --autolicense-download-length: calc(60px - ((560px - 100vw) / 4));
        grid-template-columns:
            80px 3fr var(--autolicense-download-length)
            minmax(81px, 1fr);
    }
    .media-gallery-row[data-type="auto-license"] .media-actions {
        --autolicense-left-margin: calc(0px - ((380px - 100vw) / 4));
        margin-left: min(var(--autolicense-left-margin), 0px);
    }
}

@media (max-width: 496px) {
    .project-detail-description .submission {
        text-align: left;
    }
    .project-detail-description .length {
        text-align: left;
    }

    .project-detail-description .completion {
        text-align: left;
    }

    .project-detail .grid {
        border-radius: 3px;
        grid-gap: 2px;
        display: grid;

        /*
		grid-template-areas:
			"row-content count-1 count-2"
			"row-content content-1 content-2" 			
			"row-content count-3 count-4"
			"row-content content-3 content-4"
			"row-content count-5 count-6"
			"row-content content-5 content-6" 			
			"row-content count-7 count-8"
			"row-content content-7 content-8";
*/

        grid-template-areas:
            "add-delete  count-1 count-2"
            "row-content content-1 content-2"
            "row-content count-3 count-4"
            "row-content content-3 content-4"
            "row-content count-5 count-6"
            "row-content content-5 content-6"
            "row-content count-7 count-8"
            "row-content content-7 content-8";
        grid-template-columns: 1fr 1fr 1fr;
    }

    .project-detail-description {
        grid-template-areas:
            "client-label client"
            "producer-label producer"
            "division-label division"
            "length-label length"
            "submission-label submission"
            "completion-label completion";

        grid-template-columns: 2fr 5fr;
    }

    .project-detail-header {
        grid-gap: 10px;
    }
}

.div-search.content-export-wrapper .select2-selection {
    font-size: 14px;
    height: 34px;
}

.div-search.content-export-wrapper #select2-year-select-container {
    padding-top: 2px;
}

.div-search.content-export-wrapper .select2-selection__arrow {
    margin-top: 4px;
    margin-right: 4px;
}

.sidebar-content .content-item.client-contact-list {
    margin-bottom: 2px;
}

.content-item.content-item-end + .content-item {
    margin-top: 10px;
    border-top: 1px solid var(--nlm-dark-purple);
}

/* Checklist modal */

.checklist-modal-overlay,
.unpaid-modal-overlay {
    background-color: black;
    background-image: url("../img/wave.jpg");
    background-size: cover;
    opacity: 0.7;
    user-select: none;
    z-index: 999;
    position: absolute;
    inset: 0;
}
.checklist-modal,
.unpaid-modal {
    position: absolute;
    inset: 20px;
    border-radius: 3px;
    z-index: 1000;
    display: flex;
    background-color: rgba(255, 255, 255, 1);
    flex-direction: column;
    gap: 35px;
    padding: 20px;
    max-width: 800px;
    margin: auto;
    overflow: scroll;
}
.unpaid-modal {
    z-index: 990;
}
.unpaid-modal-overlay {
    z-index: 980;
    background-image: none;
}

.checklist-modal__subtitle,
.unpaid-modal__subtitle {
    text-align: center;
}

.checklist-modal__title,
.unpaid-modal__title {
    line-height: 4rem;
    text-align: center;
    color: var(--nlm-dark-background);
}

.checklist-modal__explanation,
.unpaid-modal__explanation {
    margin: 20px auto 0px;
    max-width: 600px;
    padding: 0 20px;
}

.checklist-modal__body,
.unpaid-modal__body {
    background-color: #ededed;
    padding: 40px 20px 60px;
    border-radius: 3px;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.checklist-modal__body > div {
    display: none;
}
.checklist-modal__body > .active {
    display: block;
}
.checklist-modal__body > .checklist-modal__body_steps {
    position: absolute;
    top: 10px;
    right: 20px;
    display: block;
}

.checklist-modal__body_title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--nlm-dark-background);
}
.checklist-modal__body_description {
    text-align: left;
    font-size: 1.5rem;
}

.checklist-modal__footer {
    display: grid;
    grid-template-areas: "statement statement" "label label" "input button";
    grid-template-columns: 3fr 1fr;
    gap: 10px 7px;
    margin: 0 auto;
    justify-content: center;
    width: clamp(300px, 40%, 400px);
}
.checklist-modal__footer div {
    grid-area: statement;
    text-align: center;
}
.checklist-modal__footer label {
    grid-area: label;
    text-align: center;
}
.checklist-modal__footer button,
.unpaid-modal__footer button {
    grid-area: button;
    border: none;
    background-color: var(--nlm-blue);
    color: white;
    border-radius: 3px;
}
.checklist-modal__footer button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    user-select: none;
}

.checklist-modal__footer input {
    border: 1px solid rgb(211, 211, 211);
    border-radius: 3px;
    height: 28px;
    padding-left: 3px;
    font-size: 15px;
    grid-area: input;
    padding: 1px 8px;
}
.checklist-modal__footer input:focus,
.checklist-modal__footer input.error:focus {
    border-color: var(--nlm-blue);
    background-color: rgb(233, 233, 250);
}
.checklist-modal__footer input.error {
    border: 1px solid rgb(243, 137, 137);
    background-color: rgb(250, 233, 233);
}
.checklist-modal__footer input.error.shake {
    animation: horizontal-shaking 0.25s linear 1;
}
.checklist-modal__footer input::placeholder {
    opacity: 0.4;
}
.checklist-modal__emphasis {
    font-weight: 700;
    color: rgb(166, 0, 0);
}

@keyframes horizontal-shaking {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(5px);
    }
    50% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
    100% {
        transform: translateX(0);
    }
}

.unpaid-modal,
.unpaid-modal-overlay {
    display: none;
}
.unpaid-modal__footer {
    text-align: center;
    margin-top: 40px;
}

.unpaid-modal__explanation {
    color: rgb(166, 0, 0);
    font-size: 16px;
    margin-top: 40px;
}

.unpaid-modal__footer button {
    padding: 7px 20px;
}

.sidebar-footer.project-page-sidebar {
    margin-bottom: 18px;
}

.ui-widget-header .ui-icon {
    filter: invert(47%) brightness(195%) contrast(50%);
}