/* Custom CSS */

/*
font-family: 'Nunito', sans-serif;
*/

/* Base theme colors */
:root {
    --portal-body: #F3F3F3;
    --portal-navy: #004080;
    --portal-navyhover: #0066cc;
    --portal-cyan: #00a8db;
    --portal-litecyan: #00c3ff;
    --portal-white: #FFF;
    --portal-verylitegray: #EEE;
    --portal-litegray: #DDD;
    --portal-medlitegray: #999;
    --portal-medgray: #777;
    --portal-gray: #555;
    --portal-darkgray: #333;
    --portal-gold: #ffcc00;
    --portal-green: #33cc33;
    --portal-red: #e03106;
    --portal-litered: #f94b1f;
}

* {
    font-family: 'Nunito', sans-serif;
    color: var(--portal-darkgray);
}

html {
  height: 100%;
  margin: 0;
}

p, h1, h2, h3, h4, h5, h6, * {
    font-family: 'Nunito', sans-serif;
}

body {
    margin: 0px;
    background: transparent;
    padding-top: 65px;
    padding-bottom: 30px;
}

body:after {
    content: '';
    display: block;
    background: var(--portal-body);
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
    position: fixed;
    z-index: -100;
}

/* --------- SCROLL BAR CSS -------- */

::-webkit-scrollbar{
    width: 6px;
    height: 10px;
    border-radius: 5px;
}

::-webkit-scrollbar-track-piece{
    background-color: transparent;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb{
    background-color: var(--portal-litegray);
    outline: none;
    outline-offset: -2px;
    border: none;
    border-radius: 8px;
    position: relative;
    z-index: 10;
}

::-webkit-scrollbar-thumb:hover{
    background-color: rgba(255,255,255,1.0);
}

/* --------- SCROLL BAR CSS -------- */

/* --------- START Top Navigation CSS ------------ */

.dv-top-navigation {
    background: var(--portal-navy);
    width: 100%;
    height: 50px;
    display: flex;
    flex-wrap: nowrap;
    padding: 0px 5px 0px 5px;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1000;
    /*border-bottom: solid 1px var(--portal-white);*/
    /*box-shadow: 0 0 10px 0px rgba(0,0,0,0.3);*/
}

.dv-top-navigation:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 5px;
    bottom: 0px;
    left: 0px;
    /*background-image: linear-gradient(transparent, rgba(0,0,0,0.05));*/
    z-index: -1;
    mix-blend-mode: multiply;
}

.dv-top-nav-brand {
    flex-basis: 140px;
    height: 100%;
    flex-grow: 0;
    text-align: center;
}

.dv-top-nav-brand a.dv-top-nav-brand-link {
    height: 100%;
    padding: 7px;
    display: inline-block;
}

.dv-top-nav-brand a.dv-top-nav-brand-link img.dv-top-nav-brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.dv-top-nav-buttons {
    height: 100%;
    flex-grow: 1;
    justify-content: space-between;
    display: flex;
}

.dv-top-nav-right-buttons {
    height: 100%;
    display: flex;
}

.dv-top-nav-btn {
    border: none;
    background: transparent;
    padding: 9px 20px;
    margin: 0px;
    line-height: 1em;
    font-size: 18px;
    height: 100%;
    color: var(--portal-white);
    transition: all ease 0.3s;
    position: relative;
    background: rgba(0,0,0,0.0);
}

.dv-top-nav-btn:hover {
    color: var(--portal-white);
    background: rgba(0,0,0,0.1);
}

.dv-top-nav-btn i {
    color: inherit;
    position: relative;
    bottom: 1px;
}

.dv-top-nav-btn-user {
    font-size: 16px;
    font-weight: 400;
    display: flex;
}

.user-no-profile-image {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: var(--portal-cyan);
    border-radius: 50%;
    margin: 0px 10px 0px 0px;
    line-height: 1em;
    color: #FFF;
    padding: 7px 0px 0px 1px;
    text-align: center;
    position: relative;
    top: 3px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0px;
}

.user-profile-image {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: var(--portal-darkgray);
    border-radius: 50%;
    margin: 0px 10px 0px 0px;
    position: relative;
    top: 3px;
}

.user-profile-name {
    align-self: center;
    line-height: 1em;
    color: var(--portal-white);
}

.new-notifivations-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 10px;
    right: 10px;
    background: var(--portal-gold);
}

/* --------- END Top Navigation CSS ------------ */




/* --------- START Left Navigation CSS ------------ */

.dv-left-navigation {
    width: 220px;
    height: 100%;
    background: var(--portal-white);
    transition: all ease 0.3s;
    padding: 65px 10px 10px 10px;
    display: block;
    box-shadow: 0 0 10px 0px rgba(0,0,0,0.05);
    /*border-right: solid 1px var(--portal-white);*/
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 500;
    overflow-y: auto;
    overflow-x: hidden;
}

.dv-left-nav-menu {
    padding: 0px;
}

.dv-left-nav-menu li.dv-left-nav-item {
    list-style-type: none;
}

li.dv-left-nav-item a {
    display: block;
    width: 100%;
    padding: 7px 18px;
    color: var(--portal-darkgray);
    font-size: 15px;
    border-radius: 10px;
    transition: all ease 0.3s;
    text-decoration: none;
    white-space: nowrap;
    margin-bottom: 10px;
}

li.dv-left-nav-item.active a {
    background: var(--portal-verylitegray);
    color: var(--portal-navy);
    font-weight: 500;
}


li.dv-left-nav-item a:hover {
    background: var(--portal-verylitegray);
}

li.dv-left-nav-item.active a i {
    color: inherit;
}

li.dv-left-nav-item a span.left-nav-item-text {
    color: inherit;
    margin-left: 10px;
}

.dv-left-navigation.left-nav-collapsed {
    padding: 62px 0px 0px 0px;
    width: 55px;
}

.dv-left-navigation.left-nav-collapsed a {
    border-radius: 0px;
}

.dv-left-navigation.left-nav-collapsed a span.left-nav-item-text {
    display: none;
}

/* --------- END Left Navigation CSS ------------ */




/* --------- START Main Content (holder) CSS ------------ */

.dv-main-content {
    width: -moz-calc(100% - 255px);
    width: -webkit-calc(100% - 255px);
    width: calc(100% - 255px);
    min-height: 500px;
    padding: 10px;
    transition: all ease 0.3s;
    position: relative;
    margin-left: 240px;
}

.dv-main-content.main-content-left-nav-collapsed {
    width: -moz-calc(100% - 90px);
    width: -webkit-calc(100% - 90px);
    width: calc(100% - 90px);
    margin-left: 70px;
}

.main-content-corner {
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    /*border: solid 2px rgba(0,0,0,0.2);*/
    z-index: 10;
}
.main-content-corner.top-left {
    border-right: none;
    border-bottom: none;
    top: 0px;
    left: 0px;
}
.main-content-corner.top-right {
    border-bottom: none;
    border-left: none;
    top: 0px;
    right: 0px;
}
.main-content-corner.bottom-right {
    border-top: none;
    border-left: none;
    bottom: 0px;
    right: 0px;
}
.main-content-corner.bottom-left {
    border-top: none;
    border-right: none;
    bottom: 0px;
    left: 0px;
}

/* --------- END Main Content (holder) CSS ------------ */





/* --------- START Main Page Header CSS ------------ */

.main-content-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 36px;
    margin-bottom: 25px;
}

.main-content-header .dv-page-title {
    flex-basis: 200px;
    flex-grow: 30;
    /*border: solid 1px cyan;*/
    font-size: 18px;
    color: var(--portal-navy);
    font-weight: 700;
    line-height: 1em;
    margin: 0px;
    padding: 0px;
    align-self: center;
    letter-spacing: 0.5px;
}

.main-content-header .dv-page-filter-form {
    display: flex;
    align-self: center;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 100%;
    flex-grow: 1;
}

.main-content-header .dv-page-filter-form .dv-page-filter-item {
    margin-right: 15px;
    flex-basis: 150px;
    flex-grow: 1;
    flex-shrink: 0;
}

.main-content-header .dv-page-filter-form .dv-page-filter-item:last-child {
    margin-right: 0px;
}

.dv-page-filter-item .dv-page-form-control {
    height: 100%;
    width: 100%;
    border-radius: 3px;
    background: var(--portal-white);
    border: solid 1px transparent;
    transition: all ease 0.3s;
    padding: 3px 10px;
    font-size: 15px;
    color: var(--portal-darkgray);
}

.dv-page-filter-item .dv-page-form-control::placeholder{
    color: var(--portal-medgray);
}

.dv-page-filter-item .dv-page-form-control:hover,
.dv-page-filter-item .dv-page-form-control:focus,
.dv-page-filter-item .dv-page-form-control:focus-visible,
.dv-page-filter-item .dv-page-form-control:active {
    border: solid 1px var(--portal-navy);
    outline: none;
}

.page-title-project-number {
    color: var(--portal-medgray);
}

.main-content-header-buttons {
    position: relative;
}

button.content-header-button {
    background: var(--portal-navy);
    color: #FFF;
    border: none;
    border-radius: 3px;
    width: 35px;
    height: 100%;
    margin: 0px 5px 0px 0px;
    font-size: 27px;
    line-height: 1em;
    vertical-align: middle;
    display: inline-block;
    padding: 0px;
    position: relative;
    text-align: center;
    transition: all ease 0.3s;
}

button.content-header-button:last-child {
    margin: 0px 10px 0px 0px;
}

button.content-header-button:hover {
    background: var(--portal-navyhover);
}

button.content-header-button-lite {
    background: var(--portal-white);
    color: var(--portal-navy);
    border: solid 1px var(--portal-navyhover);
}

button.content-header-button-lite:hover {
    background: var(--portal-white);
    color: var(--portal-navyhover);
    border: solid 1px var(--portal-navyhover);
}

button.content-header-button span,
button.content-header-button i {
    position: relative;
    top: -1px;
    color: inherit;
}

button.content-header-button i {
    font-size: 16px;
    top: -3px;
}

/* --------- END Main Page Header CSS ------------ */

/* --------- START Notifications CSS ------------ */

.side-slide-panel {
    width: 300px;
    height: 100vh;
    position: fixed;
    top: 0px;
    right: 0px;
    background: #FFF;
    padding: 65px 15px 15px 15px;
    z-index: 10;
    box-shadow: 0 0 10px 0px rgba(0,0,0,0.05);
    display: none;
    overflow-y: auto;
}

.portal-notification-item {
    border: solid 1px transparent;
    background: var(--portal-white);
    cursor: pointer;
    padding: 7px 10px;
    margin: 0px 0px 15px 0px;
    transition: all ease 0.3s;
    border-radius: 3px;
    display: block;
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.2);
    text-decoration: none;
}

.portal-notification-item:hover {
    border: solid 1px var(--portal-cyan);
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.0);
    text-decoration: none;
}

.portal-notification-item .notification-item-title {
    display: block;
    color: var(--portal-navy);
    font-size: 14px;
    font-weight: 700;
}

.portal-notification-item .notification-item-description {
    display: block;
    color: var(--portal-darkgray);
    font-size: 13px;
    font-weight: 400;
}

.portal-notification-item .notification-item-description span {
    font-weight: 700;
}

.portal-notification-item .notification-item-description span.notify-new {
    color: var(--portal-green);
}

.portal-notification-item .notification-item-description span.notify-in-progress {
    color: var(--portal-red);
}

.portal-notification-item .notification-item-date-time {
    border-top: solid 1px var(--portal-verylitegray);
    display: block;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 8px 0px 0px 0px;
    margin-top: 10px;
    color: var(--portal-medgray);
}

span.no-new-notifications {
    padding: 10px 15px;
    text-align: center;
    background: var(--portal-verylitegray);
    color: var(--portal-navy);
    font-size: 14px;
    font-weight: 500;
    display: block;
    margin-bottom: 15px;
}

.portal-notification-item.viewed-notification {
    opacity: 0.4;
}

.portal-notification-item.viewed-notification:hover {
    opacity: 1.0;
}

span.previous-notifications {
    padding: 10px 15px;
    text-align: center;
    background: transparent;
    color: var(--portal-litegray);
    font-size: 14px;
    font-weight: 500;
    display: block;
    margin-bottom: 15px;
}

/* ---------- END Notifications CSS ------------- */


/* ---------- START Bookmarks Panel CSS ------------- */

/*.dv-bookmarks-panel {
    display: block;
}*/

.bookmarks-group {
    margin-bottom: 50px;
    text-align: center;
}

.bookmark-panel-item {
    display: flex;
    margin: 0px 0px 15px 0px;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.bookmark-panel-link {
    background: var(--portal-white);
    cursor: pointer;
    transition: all ease 0.3s;
    border-radius: 25px;
    display: flex;
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.2);
    text-decoration: none;
    padding: 3px;
    border: solid 1px transparent;
    min-width: 0;
    flex-grow: 1;
}

.bookmark-panel-link:hover {
    border: solid 1px var(--portal-cyan);
    text-decoration: none;
}

.bookmark-panel-link-icon {
    background: var(--portal-white);
    color: var(--portal-navy);
    /*border: solid 1px var(--portal-navy);*/
    flex-shrink: 0;
    flex-grow: 0;
    width: 24px;
    height: 24px;
    padding: 4px 0px 0px 0px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    font-size: 13px;
    opacity: 0.3;
}

.bookmark-panel-item-title {
    color: var(--portal-navy);
    padding: 1px 10px 0px 5px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 500;
    font-size: 15px;
}

.bookmarks-group-header {
    display: flex;
    padding: 0px 10px;
    justify-content: space-between;
    margin: 5px 0px 15px 0px;
    border-bottom: solid 1px var(--portal-verylitegray);
}

.bookmarks-group-title {
    display: block;
    text-align: left;
    font-size: 14px;
    color: var(--portal-navy);
    font-weight: 700;
    margin: 0px 0px 5px 0px;
}

.bookmarks-group-btn {
    color: var(--portal-litegray);
    border: none;
    background: transparent;
    padding: 0px 3px;
    line-height: 0em;
    font-size: 15px;
    flex-shrink: 0;
    position: relative;
    bottom: 5px;
    border-radius: 3px;
    transition: all ease 0.3s;
}

.bookmarks-group-btn:hover {
    color: var(--portal-cyan);
}

.bookmarks-group-btn i {
    color: inherit;
}

.bookmark-panel-item-control {
    background: var(--portal-white);
    cursor: pointer;
    margin: 0px 0px 0px 5px;
    transition: all ease 0.3s;
    border-radius: 25px;
    text-decoration: none;
    padding: 4px 0px 0px 0px;
    border: solid 1px transparent;
    width: 33px;
    text-align: center;
    color: var(--portal-litegray);
    flex-shrink: 0;
    flex-grow: 0;
    display: block;
    border: solid 1px var(--portal-litegray);
}

.bookmark-panel-item-control {
    display: none;
}

.bookmark-panel-item-control:hover {
    border: solid 1px var(--portal-darkgray);
}

.bookmark-panel-item-control.grip {
    margin: 0px 5px 0px 0px;
    border: solid 1px transparent;
}

.bookmark-panel-item-control.grip:hover {
    /*border: solid 1px var(--portal-cyan);*/
    border: solid 1px transparent;
    color: var(--portal-cyan);
    cursor: move;
    cursor: grab;
}

.bookmark-panel-item-control.grip i {
    color:  inherit;
}

.bookmark-panel-item-control.remove:hover {
    border: solid 1px var(--portal-red);
    color: var(--portal-red);
}

.bookmark-panel-item-control.edit:hover {
    border: solid 1px var(--portal-green);
    color: var(--portal-green);
}

.add-bookmark-btn {
    margin: 0 auto;
    display: inline-block;
    border: dotted 1px var(--portal-medgray);
    background: #FFF;
    border-radius: 20px;
    font-size: 15px;
    text-align: center;
    padding: 5px 12px;
    color: var(--portal-medgray);
    transition: all ease 0.3s;
}

.add-bookmark-btn {
    display: none;
}

.add-bookmark-btn:hover {
    border: dotted 1px var(--portal-cyan);
    color: var(--portal-cyan);
}

.add-bookmark-btn i {
    color: inherit;
}

.portal-btn,
a.portal-btn,
button.portal-btn {
    background: var(--portal-darkgray);
    border-radius: 2px;
    color: #FFF;
    border: none;
    padding: 8px 20px;
}

.portal-btn:hover,
a.portal-btn:hover,
button.portal-btn:hover {
    background: var(--portal-medgray);
}

.portal-btn-dark,
a.portal-btn-dark,
button.portal-btn-dark {
    background: var(--portal-navy);
    border-radius: 3px;
}

.portal-btn-dark:hover,
a.portal-btn-dark:hover,
button.portal-btn-dark:hover {
    background: var(--portal-navyhover);
    border-radius: 3px;
}

/* ---------- END Bookmarks Pannel CSS ------------- */

/* ---------- START Modal Windows CSS ------------- */

/* START force visibility of modal while editing it */
/*.modal {
    display: block !important;
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.7) !important;
}*/
/* END forcing visibility of modal while editing it */

.modal .modal-header {
    padding: 10px 18px;
    background: var(--portal-navy);
    border-radius: 0px;
    border: none;
}

.modal .modal-header h5 {
    color: var(--portal-white);
    font-weight: 600;
    font-size: 18px;
}

.modal .modal-header .btn-close {
    padding: 0px;
    margin: 0px 0px 0px auto;
    color: #FFF;
    background-image: none;
    position: relative;
    top: -3px;
    transition: all ease 0.3s;
}

.modal .modal-header .btn-close i {
    color: inherit;
}

.modal .modal-header .btn-close:active,
.modal .modal-header .btn-close:focus,
.modal .modal-header .btn-close:focus-visible {
    outline: none;
    box-shadow: none;
}

.modal .modal-form-element {
    margin: 0px 0px 15px 0px;
}

.modal .modal-form-element label {
    margin: 0px;
    font-size: 15px;
    color: var(--portal-navy);
    font-weight: 700;
}

.modal .modal-footer {
    background: var(--portal-litegray);
}

/* ---------- END Modal Windows CSS ------------- */



/* ---------- START User Pannel CSS ------------- */

.dv-user-panel {
    padding: 50px 0px 10px 0px;
    width: 170px;
}

a.user-panel-link {
    width: 100%;
    display: block;
    padding: 5px 20px;
    border-top: solid 1px var(--portal-verylitegray);
    text-decoration: none;
    transition: all ease 0.3s;
    font-size: 16px;
    font-weight: 500;
    color: var(--portal-navy);
    text-align: center;
    background: var(--portal-white);
}

a.user-panel-link:last-child {
    border-bottom: solid 1px var(--portal-verylitegray);
}

a.user-panel-link:hover {
    text-decoration: none;
    padding: 10px 20px;
    background: var(--portal-verylitegray);
}

/* ----------- END User Pannel CSS -------------- */





/* ---------- START Projects Tracker CSS ------------- */

.dv-active-projects-column-sortable {
    height: -moz-calc(100% - 100px);
    height: -webkit-calc(100% - 100px);
    height: calc(100% - 100px);
    min-height: 100px;
    padding-bottom: 100px;
}

.dv-active-projects-tracker {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

.dv-active-projects-tracker-columns {
    display: flex;
    min-height: 300px;
}

.dv-active-projects-column {
    margin: 0px 20px;
    flex-basis: 200px;
    flex-grow: 1;
    flex-shrink: 0;
    max-width: 320px;
}

.dv-active-projects-column:first-child {
    margin-left: 0px;
}

.dv-active-projects-column:first-child .dv-active-projects-item {
    opacity: 0.5;
    transition: opacity ease 0.3s;
}

.dv-active-projects-column:first-child .dv-active-projects-item:hover {
    opacity: 1.0;
}

.dv-active-projects-column:last-child {
    margin-right: 0px;
}

h1.dv-active-projects-header {
    color: var(--portal-darkgray);
    text-align: left;
    font-size: 18px;
    font-weight: 700;
    padding: 15px 5px 5px 9px;
    margin-bottom: 20px;
    border-bottom: solid 2px var(--portal-darkgray);
    position: relative;
    line-height: 1em;
}

h1.dv-active-projects-header-ideas {
    border-color: var(--portal-litegray);
}

h1.dv-active-projects-header-new {
    border-color: var(--portal-green);
}

h1.dv-active-projects-header-in-progress {
    border-color: var(--portal-red);
}

h1.dv-active-projects-header-review {
    border-color: var(--portal-gold);
}

h1.dv-active-projects-header-completed {
    border-color: var(--portal-cyan);
}

.dv-active-projects-item {
    box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.05);
    background: #FFF;
    padding: 0px;
    margin-bottom: 20px;
    border: none;
    overflow: hidden;
}

.dv-active-projects-item.ui-widget-content {
    border: none;
}

.dv-active-project-item-top-bar {
    background: var(--portal-darkgray);
    /*background-image: linear-gradient( 20deg, var(--portal-darkgray) 70%, var(--portal-medgray));*/
    padding: 0px;
    color: #FFF;
    position: relative;
    height: 38px;
    border-bottom: solid 3px var(--portal-litegray);
    cursor: default;
    cursor: move;
    cursor: grab;
    box-shadow: inset 0px 0px 15px 1px rgba(0,0,0,0.9);
}

.dv-active-project-item-top-bar:active {
    cursor: grabbing;
}

.dv-active-projects-column-ideas .dv-active-project-item-top-bar {
    border-color: var(--portal-litegray);
}

.dv-active-projects-column-new .dv-active-project-item-top-bar {
    border-color: var(--portal-green);
}

.dv-active-projects-column-in-progress .dv-active-project-item-top-bar {
    border-color: var(--portal-red);
}

.dv-active-projects-column-review .dv-active-project-item-top-bar {
    border-color: var(--portal-gold);
}

.dv-active-projects-column-completed .dv-active-project-item-top-bar {
    border-color: var(--portal-cyan);
}

.dv-active-project-item-top-bar span.dv-active-project-item-client {
    width: 100%;
    float: left;
    color: rgba(255,255,255,0.8);
    height: 100%;
    padding: 7px 15px 7px 15px;
    font-weight: 300;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
}

.dv-active-project-item-update-indicator {
    width: 15px;
    height: 15px;
    display: inline-block;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    position: absolute;
    right: 7px;
    bottom: 8px;
    z-index: 5;
    border: solid 1px #555;
    overflow: hidden;
}

.dv-active-project-item-update-indicator.lit {
    background: var(--portal-cyan);
    border: solid 1px #000;
}

.dv-active-project-item-update-indicator.lit:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #FFF;
    background-image: radial-gradient(circle, var(--portal-white), var(--portal-cyan));
}

.dv-active-project-item-content,
a.dv-active-project-item-content {
    background: transparent;
    padding: 12px 15px 15px 15px;
    transition: all ease 0.2s;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    display: block;
}

.dv-active-project-item-content:hover,
a.dv-active-project-item-content:hover {
    padding: 17px 15px 15px 15px;
}

.dv-active-project-item-content:before,
a.dv-active-project-item-content:before {
    position: absolute;
    content: '';
    display: block;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

h2.dv-active-project-item-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0px 0px 10px 0px;
    line-height: 1.2em;
    color: var(--portal-darkgray);
}

p.dv-active-project-item-summary {
    font-size: 14px;
    font-weight: 400;
    color: var(--portal-medgray);
    line-height: 1.3em;
    margin: 0px 0px 0px 0px;
    padding: 0px;
}


/* ---------- START Projects Tracker CSS ------------- */

/* ------------------- START SINGLE PROJECT PAGE CSS -------------------- */


.single-project-wrap {
    max-width: 1500px;
    margin: 0 auto;
}

.single-project-left {
    background: var(--portal-white);
    width: 500px;
    height: -moz-calc(100vh - 180px);
    height: -webkit-calc(100vh - 180px);
    height: calc(100vh - 180px);
    float: left;
    border-radius: 2px;
    box-shadow: 1px 1px 7px 3px rgba(0,0,0,0.05);
    padding: 50px 20px 20px 20px;
    position: relative;
    overflow: hidden;
}

.single-project-left-scroll {
    overflow-x: auto;
    width: 100%;
    height: -moz-calc(100% - 38px);
    height: -webkit-calc(100% - 38px);
    height: calc(100% - 38px);
    position: absolute;
    top: 38px;
    left: 0px;
    padding: 20px;
}

.single-project-right {
    background: var(--portal-white);
    width: -moz-calc(100% - 550px);
    width: -webkit-calc(100% - 550px);
    width: calc(100% - 550px);
    height: -moz-calc(100vh - 180px);
    height: -webkit-calc(100vh - 180px);
    height: calc(100vh - 180px);
    float: right;
    border-radius: 2px;
    box-shadow: 1px 1px 7px 3px rgba(0,0,0,0.05);
    padding: 50px 20px 20px 20px;
    position: relative;
    overflow: hidden;
}

.single-project-left-top-bar {
    background: var(--portal-darkgray);
    padding: 7px 20px;
    height: 38px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
}

.single-project-left-top-bar span.single-project-id {
    color: var(--portal-medgray);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
}

.single-project-left-top-bar span.single-project-id span.single-project-id-number {
    color: var(--portal-litegray);
}

.single-project-left-top-bar span.single-project-status {
    color: #FFF;
    background: var(--portal-medgray);
    font-size: 14px;
    font-weight: 500;
    height: 100%;
    display: inline-block;
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 4px 20px;
    text-transform: uppercase;
}

.single-project-left-top-bar .single-project-status-updater {
    display: inline-block;
    width: 170px;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
}

.single-project-left-top-bar .single-project-status-updater:after {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--portal-medgray);
    content: '';
    top: 0px;
    right: 0px;
}

.single-project-left-top-bar .single-project-status-updater select.form-select {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    border-radius: 0px;
    border: none;
    padding: 4px 20px;
    background: transparent;
    color: #FFF;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.5px;
    cursor: pointer;
    z-index: 1;
    font-size: 15px;
}

.single-project-left-top-bar .single-project-status-updater select.form-select:focus,
.single-project-left-top-bar .single-project-status-updater select.form-select:focus-visible {
    box-shadow: none;
    outline: none;
}

.dv-single-project.new .single-project-left-top-bar .single-project-status-updater:after {
    background: var(--portal-green);
}

.dv-single-project.inprogress .single-project-left-top-bar .single-project-status-updater:after {
    background: var(--portal-red);
}

.dv-single-project.review .single-project-left-top-bar .single-project-status-updater:after {
    background: var(--portal-gold);
}

.dv-single-project.complete .single-project-left-top-bar .single-project-status-updater:after {
    background: var(--portal-cyan);
}

.dv-single-project.archive .single-project-left-top-bar .single-project-status-updater:after {
    background: var(--portal-medgray);
}

.dv-single-project.complete .single-project-left-top-bar .single-project-status-updater select.form-select option {
    background: #FFF;
    background: linear-gradient(#FFF, #FFF);
}

.dv-single-project-final-upload {
    padding: 3px 11px 5px 11px;
    border-radius: 7px;
    position: relative;
    background: transparent;
    transition: all ease 0.3s;
}

/*.dv-single-project-final-upload:hover {
    background: #FFF;
}*/

.final-file-upload-field {
    width: -moz-calc(100% - 50px);
    width: -webkit-calc(100% - 50px);
    width: calc(100% - 50px);
    display: inline-block;
}

.final-file-upload-field {
    width: -moz-calc(100% - 50px);
    width: -webkit-calc(100% - 50px);
    width: calc(100% - 50px);
}

.final-file-upload-field label {
    color: var(--portal-medgray);
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    margin: 0px 0px 0px 5px;
}

.final-file-upload-field input {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.upload-final-project-files-btn {
    border: none;
    background: var(--portal-cyan);
    transition: all ease 0.3s;
    color: #FFF;
    display: inline-block;
    padding: 3px 7px 4px 7px;
    width: 50px;
    border-radius: 0px 3px 3px 0px;
}

.upload-final-project-files-btn:hover {
    background: var(--dv-liteblue);
}

.upload-final-project-files-btn i {
    color: inherit;
}

.add-project-task-form input,
.add-collaborator-field input {
    width: -moz-calc(100% - 70px);
    width: -webkit-calc(100% - 70px);
    width: calc(100% - 70px);
    display: inline-block;
    border-radius: 3px 0px 0px 3px;
    margin: 15px 0px 0px 0px;
}

.add-project-task-btn,
.add-collaborator-btn {
    border: none;
    background: var(--portal-cyan);
    transition: all ease 0.3s;
    color: #FFF;
    display: inline-block;
    padding: 5px 7px 5px 7px;
    width: 70px;
    border-radius: 0px 3px 3px 0px;
    font-size: 14px;
    position: relative;
}

.add-project-task-btn:hover,
.add-collaborator-btn:hover {
    background: var(--portal-cyan);
}

.add-project-task-btn i,
.add-collaborator-btn i {
    color: inherit;
    font-size: 14px;
    margin: 0px 5px 0px 0px;
}

.single-project-right-top-bar {
    background: var(--portal-darkgray);
    padding: 7px 20px;
    height: 38px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 10;
}

.single-project-feed-title {
    color: var(--portal-litegray);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
}

.single-project-feed-filter {
    color: var(--portal-litegray);
    font-size: 14px;
    font-weight: 500;
    height: 100%;
    display: inline-block;
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 0px;
    text-transform: uppercase;
}

.single-project-feed-filter span.feed-filter-option {
    display: inline-block;
    color: var(--portal-medgray);
    height: 100%;
    padding: 4px 20px;
    transition: all ease 0.3s;
    cursor: pointer;
}

.single-project-feed-filter span.feed-filter-option.active {
    color: #FFF;
}

.single-project-feed-filter span.feed-filter-option:hover {
    color: #FFF;
}

.single-project-overview {
    border-bottom: solid 1px rgba(0,0,0,0.1);
    padding-bottom: 20px;
    margin-bottom: 10px;
}

.single-project-overview-title,
form.sp-edit-title input {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4em;
    /*margin: 10px 0px 20px 0px;*/
    margin: 5px 0px 5px 0px;
    padding: 5px 0px 5px 10px;
    width: 100%;
    height: auto;
    resize: none;
    border: none;
    transition: all ease 0.2s;
    position: relative;
    left: -10px;
    border-left: solid 3px transparent;
}

form.sp-edit-title {
    width: 100%;
    margin-bottom: 0px;
    display: none;
    position: relative;
}

form.sp-edit-title input {
    background: #FFF;
    box-shadow: 1px 1px 8px 0px rgba(0,0,0,0.2);
    /*color: var(--dv-medgray);*/
    border-left: solid 3px var(--portal-cyan);
}

.sp-edit-submit {
    position: relative;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--portal-cyan);
    transition: all ease 0.2s;
    color: #FFF;
    font-size: 17px;
    padding: 4px 6px;
    display: inline-block;
    cursor: pointer;
}

.sp-edit-submit-title {
    position: absolute;
    bottom: -2px;
    right: 0px;
    display: inline-block;
}

.sp-edit-submit-deadline {
    bottom: -1px;
    right: -2px;
    display: none;
}

.sp-edit-submit i {
    color: inherit;    
}

.sp-edit-submit:hover {
    background: var(--portal-cyan);
}

.single-project-overview-summary {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5em;
    margin: 0px;
    padding: 0px 0px 20px 0px;
    font-size: 16px;
    color: var(--portal-medgray);
}

.collaborator-user-link {
    background: var(--portal-cyan);
    border: solid 1px var(--portal-cyan);
    color: #FFF;
    border-radius: 12px;
    padding: 3px 10px 2px 10px;
    margin: 0px 5px 0px 0px;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    display: inline-block;
    line-height: 1em;
    transition: all ease 0.3s;
}

.collaborator-user-link:hover {
    background: var(--portal-cyan);
    color: #FFF;
    text-decoration: none;
}

.collaborator-user-link.dv-user {
    color: var(--dv-red);
    border: solid 1px var(--portal-red);
    background: #FFF;
    font-weight: 500;
}

.collaborator-user-link.dv-user:hover {
    color: var(--portal-litered);
    border: solid 1px var(--portal-litered);
    background: #FFF;
}

.single-project-overview-detail {
    margin: 0px 0px 10px 0px;
    font-size: 16px;
    color: var(--portal-medgray);
}

.single-project-deadline {
    font-weight: 700;
    padding: 0px 0px 0px 5px;
}

.sp-edit-deadline {
    font-weight: 700;
    border: none;
    background: #FFF;
    box-shadow: 1px 1px 8px 0px rgba(0,0,0,0.2);
    border-left: solid 3px var(--portal-cyan);
    padding: 0px 0px 0px 5px;
    display: none;
}

.question-help i {
    color: var(--portal-litegray);
    transition: all ease 0.3s;
    cursor: pointer;
    font-size: 13px;
    position: relative;
    bottom: 5px;
    left: 3px;
}

.question-help i:hover {
    color: var(--portal-cyan);
}

.plus-add i {
    color: var(--dv-litegray);
    transition: all ease 0.3s;
    cursor: pointer;
    font-size: 15px;
    position: relative;
    top: 1px;
    display: inline-block;
    border: solid 3px var(--portal-litegray);
    width: 25px;
    height: 25px;
    border-radius: 50%;
    text-align: center;
    padding: 2px;
}

.plus-add i:hover {
    border: solid 3px var(--portal-cyan);
    color: var(--portal-cyan);
}

h2.single-project-overview-subhead {
    font-size: 16px;
    font-weight: 600;
    position: relative;
    color: var(--portal-gray);
    margin: 0px 0px 10px 0px;
}

.single-project-sub-section-toggler {
    width: 40px;
    height: 40px;
    position: absolute;
    top: -9px;
    right: 0px;
    color: var(--portal-litegray);
    background: transparent;
    border-radius: 20px;
    transition: all ease 0.3s;
    padding: 9px;
    font-size: 18px;
    cursor: pointer;
    text-align: center;
}

.single-project-sub-section-toggler:hover {
    color: var(--portal-cyan);
    /*background: #FFF;*/
}

.single-project-sub-section-toggler i  {
    color: inherit;
}

.subsection-collapsable {
    padding: 0px 0px 30px 0px;
    display: none;
}

.dv-project-task {
    padding: 10px 0px 7px 0px;
    margin: 0px;
    min-height: unset;
    position: relative;
}

.task-content {
    width: -moz-calc(100% - 80px);
    width: -webkit-calc(100% - 80px);
    width: calc(100% - 80px);
    display: inline-block;
    position: relative;
    padding: 0px 0px 0px 0px;
}

.task-content label {
    padding: 0px 0px 0px 35px;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
}

.delete-task-item {
    display: inline-block;
    padding: 8px 5px;
    background: transparent;
    border-radius: 20px;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 1px;
    right: 40px;
    text-align: center;
    color: var(--portal-litegray);
    transition: all ease 0.3s;
    border: none;
}

.delete-task-item:hover {
    background: #FFF;
    color: var(--portal-red);
}

.delete-task-item i {
    color: inherit;
}

.taskhandle {
    display: inline-block;
    background: transparent;
    color: var(--portal-litegray);
    padding: 9px 5px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    transition: all ease 0.2s;
    cursor: move;
    cursor: grab;
    position: absolute;
    top: 1px;
    right: 0px;
    text-align: center;
}

.taskhandle:hover {
    background: rgba(255,255,255,0.6);
    color: var(--portal-liteblue);
}

.taskhandle:active {
    cursor: grabbing;
}

.taskhandle i {
    color: inherit;
}

/* Hide the browser's default checkbox */
input.hidden-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.dv-checkbox {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: var(--portal-verylitegray);
  transition: all ease 0.3s;
  cursor: pointer;
  border-radius: 3px;
  box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2);
  pointer-events: none;
}

/* On mouse-over, add a grey background color */
.task-content:hover input ~ .dv-checkbox,
span.dv-checkbox-line:hover input ~ .dv-checkbox {
  background-color: transparent;
  background-color: #FFF;
}

/* When the checkbox is checked, add a blue background */
.task-content input:checked ~ .dv-checkbox,
span.dv-checkbox-line input:checked ~ .dv-checkbox {
  background-color: transparent;
  box-shadow: none;
}

/* Create the checkmark/indicator (hidden when not checked) */
.dv-checkbox:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.task-content input:checked ~ .dv-checkbox:after,
span.dv-checkbox-line input:checked ~ .dv-checkbox:after {
  display: block;
}

/* Style the checkmark/indicator */
.task-content .dv-checkbox:after,
span.dv-checkbox-line .dv-checkbox:after {
  left: 9px;
  top: 1px;
  width: 8px;
  height: 16px;
  border: solid var(--portal-cyan);
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.pointer-events-none {
    pointer-events: none;
}

.single-project-company-and-type a.single-project-company {
    font-size: 16px;
    color: var(--portal-cyan);
    font-weight: 500;
    transition: all ease 0.3s;
}

.single-project-company-and-type a.single-project-company:hover {
    color: var(--portal-cyan);
    text-decoration: none;
}

.single-project-company-and-type .single-project-type {
    background: #FFF;
    color: var(--portal-medgray);
    border: solid 1px var(--portal-medgray);
    border-radius: 10px;
    padding: 3px 8px 3px 8px;
    margin: 0px 0px 0px 0px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    display: inline-block;
    line-height: 1em;
    transition: all ease 0.3s;
    position: relative;
    bottom: 1px;
}

.single-project-sub-section {
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    border-bottom: solid 1px rgba(0,0,0,0.1);
}

.final-file-item {
    display: block;
    width: 100%;
    line-height: 1em;
    padding: 0px;
    margin: 0px 0px 3px 0px;
    position: relative;
}

.final-file-link {
    width: 100%;
    padding: 10px 15px;
    background: transparent;
    border-radius: 20px;
    display: inline-block;
    width: -moz-calc(100% - 50px);
    width: -webkit-calc(100% - 50px);
    width: calc(100% - 50px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    text-decoration: none;
    transition: all ease 0.3s;
    font-size: 16px;
    color: var(--portal-navy);
}

.final-file-link:hover {
    text-decoration: none;
    background: #FFF;
    color: var(--portal-navyhover);
}

.final-file-link i {
    color: inherit;
    margin: 0px 5px 0px 0px;
}

.delete-final-file-item {
    display: inline-block;
    padding: 10px 5px;
    background: transparent;
    border-radius: 20px;
    width: 40px;
    position: absolute;
    top: 0px;
    right: 0px;
    text-align: center;
    color: var(--portal-litegray);
    transition: all ease 0.3s;
    border: none;
}

.delete-final-file-item:hover {
    background: #FFF;
    color: var(--portal-red);
}

.delete-final-file-item i {
    color: inherit;
}

.collaborator-item {
    display: block;
    width: 100%;
    position: relative;
    margin: 0px 0px 0px 0px;
    padding: 5px;
    border-radius: 20px;
    background: transparent;
    transition: all ease 0.3s;
    line-height: 0em;
}

.collaborator-item:hover {
    background: #FFF;
}

.collaborator-item a {
    background: var(--portal-cyan);
    border: solid 1px var(--portal-cyan);
    color: #FFF;
    border-radius: 12px;
    padding: 4px 10px 4px 10px;
    margin: 0px 0px 0px 0px;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    display: inline-block;
    line-height: 1em;
    transition: all ease 0.3s;
    max-width: -moz-calc(100% - 40px);
    max-width: -webkit-calc(100% - 40px);
    max-width: calc(100% - 40px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1em;
}

.collaborator-item a:hover {
    background: var(--portal-cyan);
    border: solid 1px var(--portal-cyan);
    text-decoration: none;
}

.collaborator-item.collaborator-item-dv-user a {
    color: var(--portal-red);
    border: solid 1px var(--portal-red);
    background: #FFF;
    font-weight: 500;
}

.remove-collaborator {
    display: inline-block;
    padding: 4px 2px;
    background: transparent;
    border-radius: 15px;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 3px;
    right: 0px;
    text-align: center;
    color: var(--portal-litegray);
    transition: all ease 0.3s;
    border: none;
}

.remove-collaborator:hover {
    background: #FFF;
    color: var(--portal-red);
}

.remove-collaborator i {
    color: inherit;
}

.single-project-feed-filter-toggle {
    display: none;
    border: none;
    position: absolute;
    right: 0px;
    top: 0px;
    background: var(--portal-medgray);
    font-size: 16px;
    color: #FFF;
    width: 40px;
    height: 100%;
    transition: background ease 0.3s;
}

.single-project-feed-filter-toggle:hover {
    background: var(--portal-medgray);
}

.single-project-feed-filter-toggle i {
    color: inherit;
}

.project-feed {
    position: absolute;
    top: 30px;
    left: 0px;
    width: 100%;
    overflow-y: auto;
    padding: 20px 30px 20px 30px;
    height: -moz-calc(100% - 110px);
    height: -webkit-calc(100% - 110px);
    height: calc(100% - 110px);
}

.feed-item {
    width: -moz-calc(100% - 100px);
    width: -webkit-calc(100% - 100px);
    width: calc(100% - 100px);
    margin: 30px auto 30px auto;
    position: relative;
}

img.feed-item-user-image {
    width: 36px;
    height: 36px;
    background: #FFF;
    object-fit: contain;
    border-radius: 50%;
    position: absolute;
    left: -50px;
    top: 20px;
}

.feed-item-automated img.feed-item-user-image {
    background: var(--portal-cyan);
}

.feed-item-outgoing img.feed-item-user-image {
    background: var(--portal-darkgray);
}

.feed-item-message {
    background: #FFF;
    padding: 15px;
    border-radius: 0px 10px 10px 10px;
    box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.2);
    margin: 7px 0px 7px 0px;
    max-width: -moz-calc(100% - 50px);
    max-width: -webkit-calc(100% - 50px);
    max-width: calc(100% - 50px);
}

.feed-item-outgoing .feed-item-message {
    border-radius: 10px 0px 10px 10px;
}

.feed-item-automated .feed-item-message {
    border: solid 1px var(--portal-cyan);
}

.feed-item-message * {
    font-size: 15px;
    color: var(--portal-medgray);
}

.feed-item-message h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 15px 0px 0px 0px;
}

.feed-item-message p {
    font-size: 15px;
    font-weight: 400;
    margin: 0px 0px 15px 0px;
}

.feed-item-meta {
    color: inherit;
    color: var(--portal-medgray);
    font-size: 12px;
    font-style: italic;
}

.feed-item-meta span {
    color: inherit;
}

.feed-item-status-change {
    display: block;
    line-height: 1em;
}

.feed-item-status-change .status-status {
    font-weight: 500;
    display: block;
    margin: 0px 0px 5px 0px;
}

.feed-item-status-change .status-new {
    color: var(--portal-green);
}

.feed-item-status-change .status-progress {
    color: var(--portal-red);
}

.feed-item-status-change .status-review {
    color: var(--portal-gold);
}

.feed-item-status-change .status-complete {
    color: var(--portal-cyan);
}

.feed-item-status-change .status-archive {
    color: var(--portal-medgray);
}

.feed-item-status-change .status-details {
    color: var(--portal-medgray);
    font-size: 15px;
}

.feed-item-message a {
    font-weight: 600;
    text-decoration: none;
    color: var(--portal-cyan);
    transition: all ease 0.3s;
}

.feed-item-message a:hover {
    text-decoration: none;
    color: var(--portal-cyan);
}

.feed-item-message a.feed-file {
    display: block;
    color: var(--portal-navy);
    padding: 5px;
    background: var(--portal-verylitegray);
    border-radius: 20px;
    padding: 5px 15px;
    margin: 7px 0px;
    border: solid 1px var(--portal-verylitegray);
}

.feed-item-message a.feed-file:last-child {
    margin: 7px 0px 0px 0px;
}

.feed-item-message a.feed-file:hover {
    color: var(--portal-cyan);
    background: var(--portal-white);
    border: solid 1px var(--portal-cyan);
}

.feed-item-message a.feed-file i {
    color: inherit;
}

.feed-item-outgoing img.feed-item-user-image {
    left: unset;
    right: -50px;
}

.feed-item-outgoing .feed-item-meta {
    text-align: right;
}

.use-the-feed-message {
    text-align: center;
    margin: 30px auto;
    width: -moz-calc(100% - 100px);
    width: -webkit-calc(100% - 100px);
    width: calc(100% - 100px);
    color: var(--portal-medgray);
    font-size: 15px;
}

.feed-text-message {
    display: block;
}

.feed-status-update {
    background: rgba(0, 0, 0, 0.05);
    width: -moz-calc(100% - 100px);
    width: -webkit-calc(100% - 100px);
    width: calc(100% - 100px);
    margin: 10px auto;
    border-radius: 5px;
    padding: 20px;
}

.feed-status-update p {
    color: var(--portal-medgray);
    text-align: center;
    margin: 0px;
    font-weight: 400;
    font-size: 15px;
}

.feed-status-update p span {
    border: solid 1px var(--portal-medgray);
    padding: 2px 7px;
    margin: 0px 5px;
    border-radius: 3px;
    background: #FFF;
    font-weight: 400;
    display: inline-block;
}

.feed-status-update-new p span {
    border-color: var(--portal-green);
    color: var(--portal-green);
}

.feed-status-update-progress p span {
    border-color: var(--portal-red);
    color: var(--portal-red);
}

.feed-status-update-review p span {
    border-color: var(--portal-gold);
    color: var(--portal-gold);
}

.feed-status-update-complete p span {
    border-color: var(--portal-cyan);
    color: var(--portal-cyan);
}

.feed-status-update-archive p span {
    border-color: var(--portal-medgray);
    color: var(--portal-medgray);
}

.feed-message-form-holder {
    width: 100%;
    height: 80px;
    background: var(--portal-white);
    /*background-image: linear-gradient(var(--portal-white), var(--portal-verylitegray));*/
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 21px 35px 20px 35px;
    border-top: solid 1px var(--portal-verylitegray);
}

.feed-form-message-field {
    width: -moz-calc(100% - 180px);
    width: -webkit-calc(100% - 180px);
    width: calc(100% - 180px);
    resize: none;
    height: 30px;
    border-radius: 25px 0px 0px 25px;
    padding: 8px 20px 0px 20px;
    display: inline-block;
    border: none;
    transition: all ease 0.3s;
    outline: 1px solid var(--portal-verylitegray) !important;
    outline-offset: -1px;
    box-shadow: none;
    float: left;
    font-size: 15px;
}

.feed-form-message-field:focus-visible,
.feed-form-message-field:focus {
    outline: 1px solid var(--portal-cyan) !important;
    outline-offset: -1px;
    box-shadow: none;
}

.send-feed-form-message {
    display: inline-block;
    margin: 0px;
    float: left;
    width: 100px;
    height: 37px;
    padding: 7px;
    border: none;
    border-radius: 0px 25px 25px 0px;
    background: var(--portal-navy);
    transition: all ease 0.3s;
    color: #FFF;
    font-size: 15px;
}

.send-feed-form-message:hover {
    background: var(--portal-cyan);
}

.send-feed-form-message i,
.send-feed-form-message span {
    color: inherit;
}

.feed-attach {
    display: inline-block;
    float: left;
    background: var(--portal-white);
    border: none;
    color: var(--portal-medgray);
    border: solid 1px var(--portal-verylitegray);
    transition: all ease 0.3s;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    margin: 1px 3px 0px 0px;
    padding: 7px;
    text-align: center;
}

.feed-attach:hover {
    display: inline-block;
    float: left;
    background: #FFF;
    border: none;
    color: var(--portal-cyan);
    border: solid 1px var(--portal-cyan);
}

.feed-attach i {
    color: inherit;
}

.archived-project-feed-message {
    text-align: center;
    font-weight: 500;
    color: var(--portal-medgray);
    font-size: 15px;
    margin: 5px 0px 0px 0px;
}

.archived-project-feed-message a:hover{
    color: #FFF;
    text-decoration: none;    
}

.archived-project-feed-message a.archive-feed-request-link {
    display: inline-block;
    background: var(--portal-cyan);
    color: #FFF;
    padding: 3px 15px;
    border-radius: 15px;
    margin: 0px 0px 0px 10px;
    position: relative;
    top: -2px;
}

.archived-project-feed-message a.archive-feed-request-link:hover {
    background: var(--portal-cyan);
    color: #FFF;
    text-decoration: none;
}

.feed-image {
    width: 100%;
    max-width: 300px;
    max-height: 200px;
    display: block;
    margin: 0px;
    border-radius: 3px;
}

.feed-item-incoming .feed-item-message-flex-wrapper {
    display: flex;
    justify-content: left;
}

.feed-item-outgoing .feed-item-message-flex-wrapper {
    display: flex;
    justify-content: right;
}

.feed-image-preview-btn {
    padding: 0px;
    border: none;
    margin: 5px auto;
    display: block;
}

.subsection-collapsable h2 {
    margin: 0px 0px 5px 0px;
    padding: 0px;
    font-size: 16px;
    font-weight: 800;
}

.subsection-collapsable p {
    margin: 0px 0px 15px 0px;
    padding: 5px 0px 0px 0px;
    font-size: 15px;
    line-height: 1.4em;
    font-weight: 500;
    color: var(--portal-medgray);
}

/* ------------------- END SINGLE PROJECT PAGE CSS -------------------- */

/* ------------------- START FILES PAGE CSS -------------------- */

.dv-files-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    max-width: 1800px;
}

.dv-files-item {
    position: relative;
    flex-basis: 500px;
    flex-grow: 1;
    flex-shrink: 0;
    background: var(--portal-white);
    max-width: -moz-calc(33.3% - 30px);
    max-width: -webkit-calc(33.3% - 30px);
    max-width: calc(33.3% - 30px);
    height: auto;
    margin: 10px 15px 20px 15px;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 1px 1px 7px 3px rgba(0,0,0,0.1);
    /*background-image: linear-gradient( to bottom right, var(--portal-white) , var(--portal-verylitegray));*/
}

.dv-files-item img.dv-files-preview-image {
    width: 40%;
    height: 100%;
    float: left;
    object-fit: cover;
}

.dv-files-item .dv-files-item-text {
    width: 60%;
    height: 100%;
    float: right;
    overflow: hidden;
    padding: 20px 20px 80px 20px;
    position: relative;
}

.dv-files-item .dv-files-item-text .dv-files-item-company {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 16px;
    font-weight: 500;
    margin: 0px;
    padding: 0px;
    color: var(--portal-cyan);
}

.dv-files-item .dv-files-item-text .dv-files-item-title {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 24px;
    font-weight: 700;
    margin: 0px 0px 10px 0px;
    padding: 0px;
    color: var(--portal-darkgray);
}

.dv-files-item .dv-files-item-text .dv-files-item-description {
    max-width: 100%;
    overflow: hidden;
    color: var(--portal-gray);
    margin: 0px;
    padding: 0px;
    line-height: 1.4em;
    font-size: 16px;
}

.dv-files-item .dv-files-item-text .dv-files-item-last-updated {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
    margin: 10px 0px 10px 0px;
    padding: 0px;
    color: var(--portal-medgray);
    font-style: italic;
}

.dv-files-item .dv-files-item-text .dv-files-item-download-btn {
    background: var(--portal-navy);
    color: var(--portal-verylitegray);
    padding: 10px 17px 10px 17px;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.5px;
    border-radius: 2px;
    position: absolute;
    bottom: 20px;
    transition: all ease 0.3s;
    display: none;
}

.dv-files-item .dv-files-item-text .dv-files-item-download-btn:hover,
.dv-files-item .dv-files-item-text .dv-files-item-download-btn:focus,
.dv-files-item .dv-files-item-text .dv-files-item-download-btn:active {
    background: var(--portal-navyhover);
    color: #FFF;
    text-decoration: none;
}

.add-file-modal .modal-dialog,
.edit-file-modal .modal-dialog,
.delete-file-modal .modal-dialog {
    max-width: 700px;
}

.add-file-modal .modal-dialog .modal-body,
.edit-file-modal .modal-dialog .modal-body,
.delete-file-modal .modal-dialog .modal-body {
    max-width: 700px;
    background: transparent;
    padding: 0px;
    position: relative;
}

.close-form-modal {
    position: absolute;
    top: 8px;
    right: 8px;
    border: none;
    background: transparent;
    font-size: 16px;
    color: var(--portal-litegray);
}

.close-form-modal:hover {
    color: var(--portal-medgray);
}

.close-form-modal i {
    color: inherit;
}

.edit-file-item-group {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    display: none;
}

.edit-file-item-btn {
    border: solid 1px var(--portal-cyan);
    background: var(--portal-white);
    transition: all ease 0.3s;
    color: var(--portal-cyan);
    border-radius: 50%;
    font-size: 14px;
    padding: 3px 8px;
}

.edit-file-item-btn:hover {
    color: var(--portal-litecyan);
    border-color: var(--portal-litecyan);
    background: var(--portal-white);
}

.edit-file-item-btn i {
    color: inherit;
    font-size: 12px;
}

.delete-file-item-btn {
    border: solid 1px var(--portal-red);
    background: var(--portal-white);
    transition: all ease 0.3s;
    color: var(--portal-red);
    border-radius: 50%;
    font-size: 14px;
    padding: 3px 8px;
}

.delete-file-item-btn:hover {
    color: var(--portal-litered);
    border-color: var(--portal-litered);
    background: var(--portal-white);
}

.delete-file-item-btn i {
    color: inherit;
    font-size: 12px;
}

.delete-file-modal .dv-portal-form h2 {
    color: var(--portal-red);
}

.delete-file-modal .portal-btn-dark, 
.delete-file-modal a.portal-btn-dark, 
.delete-file-modal button.portal-btn-dark {
    background: var(--portal-red);
}

.delete-file-modal .portal-btn-dark:hover, 
.delete-file-modal a.portal-btn-dark:hover, 
.delete-file-modal button.portal-btn-dark:hover,
.delete-file-modal .portal-btn-dark:focus, 
.delete-file-modal a.portal-btn-dark:focus, 
.delete-file-modal button.portal-btn-dark:focus,
.delete-file-modal .portal-btn-dark:focus-visible, 
.delete-file-modal a.portal-btn-dark:focus-visible, 
.delete-file-modal button.portal-btn-dark:focus-visible {
    background: var(--portal-litered);
}

/* -------- v2 ---------- */

.portal-files-list {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    width: fit-content;
    margin: 0 auto;
}

.portal-file-item {
    flex-basis: 300px;
    max-width: -moz-calc(20% - 30px);
    max-width: -webkit-calc(20% - 30px);
    max-width: calc(20% - 30px);
    flex-grow: 1;
    flex-shrink: 0;
    border-radius: 15px;
    overflow: hidden;
    width: 300px;
    box-shadow: 1px 1px 7px 3px rgba(0,0,0,0.1);
    margin: 15px;
    background: var(--portal-white);
    display: inline-flex;
    flex-direction: column;
    position: relative;
    padding: 10px 10px 10px 10px;
}

.portal-file-preview-image-holder {
    display: block;
    width: 100%;
    height: 130px;
    border-radius: 8px 8px 0px 0px;
    overflow: hidden;
    position: relative;
    margin-bottom: 0px;
    flex-grow: 0;
    flex-shrink: 0;
    /*border-bottom: solid 2px var(--portal-darkgray);*/
}

.portal-file-preview-image-holder:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 8px 8px 2px 2px;
    box-shadow: inset 0 0 8px 0.5px rgba(0,0,0,0.4);
}

.portal-file-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portal-file-item-company {
    background: var(--portal-darkgray);
    color: var(--portal-white);
    /*box-shadow: 0 0 2px 1px rgba(255,255,255,0.5);*/
    font-size: 13px;
    font-weight: 600;
    padding: 6px 10px 5px 10px;
    display: block;
    width: 100%;
    /*max-width: -moz-calc(100% - 20px);
    max-width: -webkit-calc(100% - 20px);
    max-width: calc(100% - 20px);*/
    max-width: 100%;
    text-align: center;
    position: relative;
    z-index: 10;
    margin: 0 auto;
    border-radius: 0px 0px 2px 2px;
    line-height: 1em;
    top: 0px;
    transition: all ease 0.3s;
}

.portal-file-item-company:hover {
    background: var(--portal-gray);
    color: var(--portal-white);
    text-decoration: none;
}

/*.portal-file-item-text {
    background: var(--portal-white);
    padding: 10px 15px 15px 15px;
    display: inline-flex;
    flex-direction: column;
    height: 100%;
}*/

.portal-file-item-text {
    background: var(--portal-white);
    padding: 0px;
    display: inline-flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 10;
}

.portal-file-item-title {
    font-size: 18px;
    font-weight: 900;
    color: var(--portal-navy);
    text-align: center;
    margin: 10px 0px 3px 0px;
    padding: 0px;
    position: relative;
}

.portal-file-item-description {
    font-size: 13px;
    font-weight: 600;
    color: var(--portal-medgray);
    text-align: center;
    margin: 10px 0px 15px 0px;
    padding: 0px 10px;
    line-height: 1.4em;
}

.portal-file-item-last-updated {
    font-size: 10px;
    font-style: italic;
    font-weight: 400;
    color: var(--portal-medlitegray);
    text-align: center;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    line-height: 1em;
}

.portal-files-item-download-btn {
    background: var(--portal-white);
    color: var(--portal-medgray);
    border: solid 1px var(--portal-litegray);
    padding: 7px 12px 7px 12px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 8px;
    transition: all ease 0.3s;
    width: 100%;
    display: inline-block;
    text-align: center;
    justify-self: end;
    align-self: center;
    vertical-align: bottom;
    margin-top: auto;
    flex-grow: 0;
    flex-shrink: 0;
}

.portal-files-item-download-btn:hover {
    background: var(--portal-white);
    color: var(--portal-cyan);
    border: solid 1px var(--portal-cyan);
    text-decoration: none;
}

.portal-files-item-download-btn i {
    color: inherit;
}

/* ------------------- END FILES PAGE CSS -------------------- */

/* ------------------- START DV TABLES CSS -------------------- */

.dv-table-wrapper {
    max-width: 100%;
    overflow-x: auto;
}

.dv-table {
}

.dv-table tbody tr {
    background: var(--portal-white);
}

.dv-table thead th,
.dv-table tbody td,
.dv-table tbody th {
    font-size: 15px;
    vertical-align: middle;
}

.dv-table tbody td a {
    color: var(--portal-navy);
    font-weight: 600;
    vertical-align: middle;
}

.dv-table tbody td a:hover {
    color: var(--portal-navyhover);
    text-decoration: none;
}

.dv-table tbody td a i {
    color: inherit;
}

.dv-table tbody tr.dv-portal-company td a,
.dv-table tbody tr.dv-portal-user td a {
    color: var(--portal-red);
}

.dv-table tbody tr.dv-portal-company td a:hover,
.dv-table tbody tr.dv-portal-user td a:hover {
    color: var(--portal-litered);
}

a.portal-user-link {
    background: var(--portal-cyan);
    border: none;
    color: var(--portal-white) !important;
    border-radius: 12px;
    padding: 4px 10px 4px 10px;
    margin: 0px 0px 0px 0px;
    font-size: 14px !important;
    font-weight: 400;
    text-align: center;
    display: inline-block;
    line-height: 1em !important;
    transition: all ease 0.3s;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1em;
}

a.portal-user-link:hover {
    background: var(--portal-litecyan);
    border: none;
}

.portal-user.dv-portal-user a.portal-user-link,
.dv-portal-company a.portal-user-link {
    background: var(--portal-white);
    border: solid 1px var(--portal-red);
    color: var(--portal-red) !important;
    border-radius: 12px;
    padding: 4px 10px 4px 10px;
    margin: 0px 0px 0px 0px;
    font-size: 14px !important;
    font-weight: 400;
    text-align: center;
    display: inline-block;
    line-height: 1em !important;
    transition: all ease 0.3s;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1em;
    border-style: inset;
}

.portal-user.dv-portal-user a.portal-user-link:hover,
.dv-portal-company a.portal-user-link:hover {
    background: var(--portal-white);
    border: solid 1px var(--portal-litered);
    color: var(--portal-litered) !important;
}

span.user-business {
    display: block;
    margin-bottom: 1px;
}

.company-owner-icon svg {
    fill: var(--portal-cyan);
    width: 16px;
    position: relative;
    bottom: 2px;
}

.portal-user.dv-portal-user .company-owner-icon svg {
    fill: var(--portal-red);
}

/* ------------------- END DV TABLES CSS -------------------- */


/* ------------------- START DV FORMS CSS -------------------- */

.dv-portal-form {
    width: 100%;
    max-width: 700px;
    margin: 0px auto;
    padding: 30px;
    display: block;
    background: var(--portal-white);
    background-image: linear-gradient(to bottom right, var(--portal-white), var(--portal-verylitegray));
    border-radius: 2px;
    box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.2);
}

.dv-form-element {
    width: 100%;
    margin-bottom: 30px;
    position: relative;
}

.dv-form-element label {
    display: block;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    color: var(--portal-gray);
    margin: 0px 0px 3px 0px;
}

.dv-form-element label .form-req {
    color:  var(--portal-red);
}

.dv-form-element input,
.dv-form-element select,
.dv-form-element textarea {
    width: 100%;
    font-size: 16px;
    padding: 7px 10px;
    background: var(--portal-white);
    border: none;
    border-radius: 2px;
    box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.2);
}

.dv-form-element input:focus-visible,
.dv-form-element select:focus-visible,
.dv-form-element textarea:focus-visible {
    outline: none;
    outline: solid 1px var(--portal-litecyan);
}

span.dv-checkbox-line {
    display: block;
    position: relative;
    cursor: pointer;
    margin: 4px 0px 10px 0px;
}

span.dv-checkbox-line .dv-checkbox {
    width: 25px;
    height: 25px;
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 0px;
}

span.dv-checkbox-line .dv-checkbox-item-label {
    font-size: 16px;
    padding: 2px 0px 0px 35px;
    cursor: pointer;
    color: var(--portal-medgray);
}

.dv-portal-form h1 {
    font-size: 33px;
    font-weight: 800;
    margin: 0px 0px 10px 0px;
    padding: 0px;
    color: var(--portal-medgray);
}

.dv-portal-form h2 {
    font-size: 25px;
    font-weight: 800;
    margin: 0px 0px 10px 0px;
    padding: 0px;
    color: var(--portal-cyan);
}

.dv-portal-form p {
    font-size: 15px;
    font-weight: 500;
    margin: 0px 0px 15px 0px;
    padding: 0px;
    color: var(--portal-medgray);
}

.dv-portal-form p strong {
    font-weight: 800;
    color: var(--portal-medgray);
}

.dv-portal-form hr {
    border-top: 1px solid var(--portal-litegray);
}

span.dv-form-label-instructions {
    font-size: 13px;
    display: inline-block;
    line-height: 1.2em;
    color: var(--portal-medlitegray);
    font-style: italic;
    margin: 0px 0px 6px 0px;
}


/* ------------------- END DV FORMS CSS -------------------- */

/* ---------- START Portal Article CSS ------------- */

.portal-article {
    background: var(--portal-white);
    box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.1);
    min-height: 300px;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 3px;
}

/* ---------- START Portal Article CSS ------------- */

/* -------------------------------------------------------------------- */
@media (max-width: 1699px) {

    .single-project-feed-filter span.feed-filter-option {
    padding: 4px 10px;
    }

    .single-project-feed-filter span.feed-filter-option:last-child {
    padding: 4px 20px 4px 5px;
    }

    .single-project-left {
    width: 350px;
    }

    .single-project-right {
    width: -moz-calc(100% - 400px);
    width: -webkit-calc(100% - 400px);
    width: calc(100% - 400px);
    }

    h2.single-project-overview-subhead {
    font-size: 15px;
    margin: 0px 0px 8px 0px;
    }

    .single-project-sub-section-toggler {
    width: 30px;
    height: 30px;
    top: -5px;
    border-radius: 15px;
    padding: 5px;
    font-size: 16px;
    }

    .task-content label {
    padding: 0px 0px 0px 35px;
    font-size: 15px;
    line-height: 1.3em;
    }

    .collaborator-item a {
    font-size: 14px;
    }

    .remove-collaborator {
    top: 2px;
    right: 2px;
    }

    .final-file-link {
    font-size: 14px;
    }

    .single-project-overview-detail {
    font-size: 15px;
    }

    .single-project-deadline {
    display: block;
    padding: 2px 0px 0px 4px;
    }

    .single-project-overview-title, 
    form.sp-edit-title input {
    font-size: 20px;
    line-height: 1.3em;
    }

    .sp-edit-submit-title {
    bottom: -7px;
    right: -14px;
    }

    .dv-files-item {
    max-width: -moz-calc(50% - 30px);
    max-width: -webkit-calc(50% - 30px);
    max-width: calc(50% - 30px);
    }

    .portal-file-item {
    max-width: -moz-calc(25% - 30px);
    max-width: -webkit-calc(25% - 30px);
    max-width: calc(25% - 30px);
    }

}

/* -------------------------------------------------------------------- */
@media (max-width: 1299px) {

    .feed-item-incoming .feed-item-message {
    margin-right: 30px;
    }

    .feed-item-outgoing .feed-item-message {
    margin-left: 30px;
    }

    .project-feed {
    padding: 15px;
    }

    .portal-file-item {
    max-width: -moz-calc(33.3% - 30px);
    max-width: -webkit-calc(33.3% - 30px);
    max-width: calc(33.3% - 30px);
    }

}

/* -------------------------------------------------------------------- */
@media (max-width: 1199px) {

    .feed-item {
    width: -moz-calc(100% - 60px);
    width: -webkit-calc(100% - 60px);
    width: calc(100% - 60px);
    }

    .feed-item-incoming .feed-item-message {
    margin-right: 10px;
    }

    .feed-item-outgoing .feed-item-message {
    margin-left: 10px;
    }

    .feed-item-message {
    padding: 10px;
    }

    .feed-item-message * {
    font-size: 14px;
    }

    .feed-item-message .feed-text-message {
    line-height: 1.2em;
    }

    img.feed-item-user-image {
    width: 25px;
    height: 25px;
    top: 20px;
    }

    .feed-item-outgoing img.feed-item-user-image {
    left: unset;
    right: -30px;
    }

    .feed-item-incoming img.feed-item-user-image {
    right: unset;
    left: -30px;
    }

    .feed-status-update {
    width: -moz-calc(100% - 60px);
    width: -webkit-calc(100% - 60px);
    width: calc(100% - 60px);
    }

    .feed-item-meta {
    font-size: 9px;
    }

    .feed-item-message p {
    font-size: 14px;
    }

    .feed-item-message h4 {
    font-size: 14px;
    }

    .feed-item-status-change .status-details {
    font-size: 14px;
    }

    .use-the-feed-message {
    font-size: 13px;
    }

    .archived-project-feed-message {
    max-width: 300px;
    margin: 0px auto 0px;
    position: relative;
    top: -5px;
    font-size: 14px;
    }

    .archived-project-feed-message a.archive-feed-request-link {
    padding: 2px 12px;
    border-radius: 15px;
    margin: 0px 0px 0px 0px;
    top: 0px;
    }

    .portal-files-list {
    max-width: 700px;
    }

    .portal-file-item {
    max-width: -moz-calc(50% - 30px);
    max-width: -webkit-calc(50% - 30px);
    max-width: calc(50% - 30px);
    }

}

/* -------------------------------------------------------------------- */
@media (min-width: 992px) {  

    .single-project-feed-filter {
    display: block !important;
    }

    .single-project-feed-filter-toggle {
    display: none;
    }

}



/* -------------------------------------------------------------------- */
@media (max-width: 991px) {  

    .dv-left-navigation {
    width: 0px;
    padding: 70px 0px 0px 0px;
    left: -1px;
    }

    .dv-left-navigation.left-nav-visible {
    width: 200px;
    padding: 75px 10px 10px 10px;
    left: unset;
    }

    .dv-main-content {
    width: -moz-calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    width: calc(100% - 40px);
    margin-left: 20px;
    }

    .dv-left-navigation a span.left-nav-item-text {
    display: inline-block;
    }

    .single-project-feed-filter-toggle {
    display: block;
    }

    .single-project-feed-filter {
    top: 30px;
    right: 0px;
    width: 100%;
    background: var(--portal-medgray);
    display: block;
    height: auto;
    display: none;
    }

    .single-project-feed-filter span.feed-filter-option,
    .single-project-feed-filter span.feed-filter-option:last-child {
    padding: 5px 20px;
    width: 100%;
    border-bottom: solid 1px rgba(0, 0, 0, 0.3);
    display: block;
    text-align: center;
    color: var(--dv-litegray);
    }

    .single-project-feed-filter span.feed-filter-option:hover {
    background: rgba(0, 0, 0, 0.2);
    color: #FFF;
    }

    .single-project-left {
    width: 300px;
    height: -moz-calc(100vh - 180px);
    height: -webkit-calc(100vh - 180px);
    height: calc(100vh - 180px);
    }

    .single-project-right {
    width: -moz-calc(100% - 330px);
    width: -webkit-calc(100% - 330px);
    width: calc(100% - 330px);
    height: -moz-calc(100vh - 180px);
    height: -webkit-calc(100vh - 180px);
    height: calc(100vh - 180px);
    }

    .dv-files-item img.dv-files-preview-image {
    width: 30%;
    }

    .dv-files-item .dv-files-item-text {
    width: 70%;
    padding: 10px 15px 55px 15px;
    }

    .dv-files-item .dv-files-item-text .dv-files-item-company {
    font-size: 15px;
    line-height: 1em;
    }

    .dv-files-item .dv-files-item-text .dv-files-item-title {
    font-size: 22px;
    margin: 0px 0px 7px 0px;
    }

    .dv-files-item .dv-files-item-text .dv-files-item-description {
    font-size: 15px;
    }

    .dv-files-item .dv-files-item-text .dv-files-item-last-updated {
    font-size: 13px;
    }

    .dv-files-item .dv-files-item-text .dv-files-item-download-btn {
    padding: 6px 14px 6px 14px;
    font-size: 16px;
    bottom: 14px;
    width: -moz-calc(100% - 30px);
    width: -webkit-calc(100% - 30px);
    width: calc(100% - 30px);
    text-align: center;
    }

    .portal-file-item-description {
    font-size: 14px;
    }

    .portal-file-item-last-updated {
    font-size: 11px;
    }

    .portal-file-item-title {
    font-size: 18px;
    }

}

/* -------------------------------------------------------------------- */
@media (max-width: 767px) {  

    .dv-main-content {
    padding: 0px;
    }

    .main-content-header {
    display: block;
    height: unset;
    }

    .main-content-header .dv-page-title {
    margin: 0px 0px 10px 0px;
    }

    .dv-top-nav-btn-user {
        padding: 9px 15px 9px 10px;
        flex-shrink: 0;
    }

    .user-profile-name {
        display: none;
    }

    .user-profile-image {
        margin: 0px;
    }

    .single-project-left {
    width: 100%;
    height: unset;
    margin-bottom: 30px;
    float: none;
    }

    .single-project-left-scroll {
    height: auto;
    position: relative;
    top: unset;
    padding: 0px;
    overflow: visible;
    }

    .single-project-right {
    width: 100%;
    height: -moz-calc(100vh - 100px);
    height: -webkit-calc(100vh - 100px);
    height: calc(100vh - 100px);
    float: none;
    }

    .send-feed-form-message .feed-send-btn-text {
    display: none;
    }

    .send-feed-form-message {
    width: 50px;
    padding: 7px 14px 7px 7px;
    }

    .feed-form-message-field {
    width: -moz-calc(100% - 130px);
    width: -webkit-calc(100% - 130px);
    width: calc(100% - 130px);
    height: 38px;
    border-radius: 25px 0px 0px 25px;
    padding: 8px 20px 0px 20px;
    }

    .dv-active-projects-tracker-columns {
    display: block;
    width: 100%;
    min-height: unset;
    }

    .dv-active-projects-column {
    margin: 0px auto 20px auto !important;
    flex-basis: unset;
    flex-grow: unset;
    flex-shrink: unset;
    width: 100%;
    max-width: 400px;
    }

    .dv-active-projects-column-sortable {
    height: unset;
    min-height: 40px;
    padding-bottom: 5px;
    }

    .dv-portal-form h1 {
    font-size: 26px;
    }

    .dv-portal-form h2 {
    font-size: 19px;
    }

    .dv-files-item {
    flex-basis: 500px;
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 500px;
    height: auto;
    margin: 10px auto 20px auto;
    }

    .main-content-header-buttons {
    position: absolute;
    top: -7px;
    right: 0px;
    z-index: 10;
    }

    button.content-header-button,
    button.content-header-button:last-child {
    width: 28px;
    height: 28px;
    margin: 0px 0px 0px 5px;
    }

    button.content-header-button span, 
    button.content-header-button i {
    top: -2px;
    }

    .modal.show .modal-dialog {
    padding: 8px;
    }

}

/* -------------------------------------------------------------------- */
@media (max-width: 599px) {  

    .portal-files-list {
    justify-content: center;
    }

    .portal-file-item {
    max-width: 300px;
    }

}

/* -------------------------------------------------------------------- */
@media (max-width: 499px) {  


}

/* -------------------------------------------------------------------- */
@media (max-width: 399px) {  

    .main-content-header .dv-page-filter-form {
    display: block;
    height: unset;
    }

    .main-content-header .dv-page-filter-form .dv-page-filter-item {
    margin-right: 0px;
    margin-bottom: 10px;
    height: 36px;
    }

    .side-slide-panel {
    width: 100%;
    }

}