/* ***************************************** */
/*       PROJECT VIEW -> TABLE VIEW UI        */
/******************************************* */

.issue-table-container {

    /* Search box styling */
    .search-box {
        width: 300px;
    }
    .search-icon {
        left: 10px;
        transform: translateY(-50%);
    }
    .search-input::placeholder{
        color: #808080;
        font-size: 12px;
    }
    /* Manage Columns Dropdown Styles */
    .manage-columns .btn,
    #issue-shown-btn {
        background-color: var(--bg-white);
        border:1px solid var(--border-tertiary);
        color: var(--color-secondary);
        box-shadow: none;
    }
    .checkbox-item:hover {
        background-color: #f5f5f5;
    }
    .checkbox-item input[type="checkbox"] {
        margin-right: 8px;
    }
    .manage-columns .checkbox-item:hover {
        background-color: #f5f5f5;
    }
    .manage-columns .checkbox-item input[type="checkbox"] {
        margin-right: 8px;
    }
    .btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){
        border-radius: 4px;
    }
    /* Export button styling */
    .export-menu {
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        display: none;
        z-index: 1000;
    }
    .export-menu.show {
        display: block;
    }
    .export-menu a {
        display: inline-flex;
        padding: 10px;
        color:#808080;
        text-decoration: none;
        font-size: 14px;
        font-weight: normal;
        width: 100%;
    }
    .export-menu a:hover {
        background-color: #f5f5f5;
        color: #34495E;
    }
    /* Table styling */
    .table > thead > tr > th {
        background-color: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
        padding: 12px 8px;
    }
    /* Status badge styling */
    .status-badge {
        padding: 5px 10px;
        border-radius: 3px;
        font-size: 12px;
        font-weight: 500;
    }
    /* Activity counter styles */
    .activity-counter.label {
        top: -5px;
    }
    span.activity-count.small.rounded-border.flex-block.justify-center.item-center{
        padding: 0.3em 0.5em ;
    }
    .activity-counter.rounded-border.flex-block.justify-center{
        top: -5px;
    }
    /* Issue styles */
    #issue-table_wrapper #issue-table th{
        border-bottom: none;
    }
    #issue-table td, #issue-table td{
        padding-left: 16px !important;
    }
    #issue-table thead th {
        background-color: var(--bg-primary);
        border-bottom: 1px solid #dee2e6;
        vertical-align: middle;
    }
    .grip-icon {
        margin-right: 3px;
        color: white;
        cursor: move;
        transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
        opacity: 0;
    }
    .grip-icon:hover {
        cursor: grab;
    }
    table.dataTable thead th:hover .grip-icon {
        opacity: 0.5;
        color: #34495e;
    }
    table.dataTable thead .sorting::before,
    table.dataTable thead .sorting::after,
    table.dataTable thead .sorting_asc::before,
    table.dataTable thead .sorting_asc::after,
    table.dataTable thead .sorting_desc::before,
    table.dataTable thead .sorting_desc::after {
        transition: opacity 0.2s ease-in-out;
        color: white;
    }
    table.dataTable thead>tr>th.sorting::after,
    table.dataTable thead>tr>th.sorting_asc::after,
    table.dataTable thead>tr>th.sorting_desc::after {
        font-family: var(--font-awesome-pro);
        content: "\f107";
    }
    table.dataTable thead>tr>th.sorting::before,
    table.dataTable thead>tr>th.sorting_asc::before,
    table.dataTable thead>tr>th.sorting_desc::before {
        font-family: var(--font-awesome-pro);
        content: "\f106";
    }
    table.dataTable thead th:hover .sorting::before,
    table.dataTable thead th:hover .sorting::after,
    table.dataTable thead th:hover .sorting_asc::before,
    table.dataTable thead th:hover .sorting_asc::after,
    table.dataTable thead th:hover .sorting_desc::before,
    table.dataTable thead th:hover .sorting_desc::after,
    table.dataTable thead .sorting:hover::before,
    table.dataTable thead .sorting:hover::after,
    table.dataTable thead .sorting_asc:hover::before,
    table.dataTable thead .sorting_asc:hover::after,
    table.dataTable thead .sorting_desc:hover::before,
    table.dataTable thead .sorting_desc:hover::after {
        opacity: 0.5;
        color: #34495e;
    }
    #issue-table {
        border: 0.5px solid var(--border-tertiary);
    }
    #issue-table thead th {
        position: relative;
        padding-right: 20px !important;
    }
    #issue-table_wrapper .dataTables_paginate {
        float: none;
    }
    table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before, table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control::before {
        content: "▼";
        background: none;
    }
    .dtr-title {
        color: var(--color-secondary);
        text-align: center;
    }
    
    /* Pagination Buttons */
    #external-bottom .paginate_button:hover,
    #external-bottom .dataTables_paginate .paginate_button.current {
        background: var(--bg-section);
        color: var(--color-secondary) !important;
        border: none;
        box-shadow: none;
    }
    #external-bottom #issue-table_paginate .paginate_button.disabled {
        color: var(--color-tertiary) !important;
        cursor: not-allowed;
    }
    /* Previous/Next buttons */
    #external-bottom .paginate_button.previous,
    #external-bottom .paginate_button.next{
        color: var(--color-secondary) !important;
    }
    /* Common arrow styles */
    #external-bottom a.paginate_button.previous::before,
    #external-bottom a.paginate_button.next::after {
        font-family: var(--font-awesome-pro);
        font-size: 12px;
        display: inline-block;
        vertical-align: middle;
    }

    /* Previous arrow */
    #external-bottom a.paginate_button.previous::before {
        content: "\f060";
        margin-right: 5px;
    }

    /* Next arrow */
    #external-bottom a.paginate_button.next::after {
        content: "\f061";
        margin-left: 5px;
    }
    
    /* Ellipsis */
    .ellipsis {
        cursor: not-allowed;
    }
    /* Initial Pagination Style */
    div#issue-table_paginate{
        background-color: var(--bg-secondary);
    }
    /* Responsive adjustments */
    @media (max-width: 767px) {
        .controls-wrapper {
            flex-direction: column;
            gap: 15px;
        }
        .search-box {
            width: 100%;
        }
        .buttons-wrapper {
            width: 100%;
            justify-content: flex-end;
        }
        .dataTables_wrapper .bottom {
            flex-direction: column-reverse;
            gap: 60px;
        }
    }
    @media (min-width: 768px) {
        .dataTables_wrapper .bottom {
            flex-direction: row;
        }
    }
    @media (max-width: 991px) {
        #issue-table_wrapper #issue-table th {
            text-align: center;
        }
    }
}

/* **************************************************************************
*                  PROJECT BOARD VIEW -> PHASE NAME CONTAINER               *
***************************************************************************** */

#issues-list-container {
    .zero-phase-row {
        position: relative;
        min-width: 40px !important;
        height: 90vh !important;
        writing-mode: vertical-rl;
        overflow: visible !important;
        text-align: right !important;
        
    }
    .zero-issue-phase {
        writing-mode: horizontal-tb;
        bottom: 100%;
        top: initial !important;
        transform: rotate(180deg);
    }
    .zero {
        padding: 0.6em 0.3em 0.6em !important;
    }
    .add-issue{
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .zero-phase-row .options{
        margin-left: 0px;
    }
    .phase-row.empty-phase{
        overflow-x: visible !important;
        overflow: visible !important;
    }
    .counter{
        border-radius: 10px;
    }
    .options{
        margin-left: -45px;
    }
    .issue-card-topbar{
        display: flow-root;
    }
    .issue-card{
        overflow: hidden;
    }
    .issue-card .label{
        padding: 0.4em 0.6em !important;
    }
    .issue-card-topbar .activity-alert div{
        width: 15px;
        transition: width 0.3s, background 0.3s;
    }
    .issue-card-topbar .activity-duedate{
        display: none;
    }
    .issue-card-topbar .activity-alert div:hover .activity-duedate{
        display: inline-block;
    }
    .issue-card-topbar .activity-alert div:hover .activity-counter{
        opacity: 0;
        transition: opacity 0.3s;
    }
    .issue-card-topbar .activity-alert div:hover{
        padding: 0.4em 0.6em;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25em; 
        width: 90px;   
    }
    .issue-card-topbar .activity-alert .red-alert:hover{
        background-color: #ed3358;
    }
    .issue-card-topbar .activity-alert .orange-alert:hover{
        background-color: #f9ad5e;
    }
    .issue-card-topbar .activity-alert .green-alert:hover{
        background-color: #70cd56;
    }
    .issue-card-topbar .activity-alert div:hover img{
        content: url("../../images/activity/bell-icon-white.png");
        width: 10px;
        height: 11px;
    }
    .drag-btn{
        float: left;
        cursor: grab;
    }
    .zero-xlead .drag-btn,
    .zero-xlead .more-options,
    .zero-xlead .collapse-icon{
        float: right;
        transform: rotate(90deg);
        margin-bottom: 5px;
    }
    .zero-xlead .drag-btn,
    .zero-xlead .options{
        max-height: 0px;
        transition: max-height 1s;
    }
    .phase-row:hover .zero-xlead .drag-btn,
    .phase-row:hover .zero-xlead .options{
        max-height: 50px;
    }
    .disabled-a{
        pointer-events: none;
        opacity: 0.5;
    }
    .timer-icon{
        margin-left: -2px;
    }
}

/* PROJECT BOARD VIEW -> NORTH STAR VIEW  */

.phase-name .show-drag-btn,
.phase-name .show-options,
.phase-name:hover .north-star,
.phase-name:has(.dropdown.open) .north-star,
.phase-name:has(.dropdown.open) .show-phase-count,
.phase-name:hover .show-phase-count {
	display: none;
}
.phase-name:hover .show-drag-btn,
.phase-name:hover .show-options,
.phase-name:has(.dropdown.open) .drag-btn,
.options:has(.dropdown.open) {
	display: block;
}
.phase-name:hover .phase-title-hover {
	width: 75%;
}
.phase-name:hover .phase-title-hover {
    animation: fadeIn 1s ease;
}
.options:has(.dropdown.open) .more-options,
.phase-name:has(.dropdown.open) .drag-btn,
.options:has(.dropdown.open) .collapse-icon {
    opacity: 1;
}

.table-wrapper:has(.export-menu.show) #issue-table,
.table-wrapper:has(.manage-columns.open) #issue-table {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}
#main-content:has(#discussion-board-tab.active) .no-issues-board,
#main-content:has(#project-tab-activity.active) .no-issues-board {
    display: none;
}


/* **************************************************************************
*                   PROJECT VIEW -> DASHBOARD WIDGET STYLES                 *
***************************************************************************** */

.dashboard .empty-chart-container h4,
.edit-dashboard .empty-chart-container h4,
.edit-dashboard #stuck_cards h4,
.dashboard #stuck_cards h4 {
    color: #666;
    text-align: center;
    margin-top: 10px;
}
.dashboard .chart-container .no-data-banner-div,
.edit-dashboard .chart-container .no-data-banner-div {
    text-align: center;
    opacity: 0.5;
}
.custom-apexcharts-tooltip-title,
.custom-apexcharts-tooltip-text {
    font-size: 12px !important;
}
.grid-stack .grid-stack-placeholder>.placeholder-content {
    background-color: transparent !important;
    border: 3px dashed lightgray;
}
.grid-stack .grid-stack-placeholder.grid-stack-item {
    background: transparent;
}
.dashboard .custom-tables,
.dashboard #stuck_cards {
    display: flex;
    height: 100%;
    align-items: center;
}
.dashboard .custom-tables .dataTables_wrapper,
.dashboard #stuck_cards .dataTables_wrapper {
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
    padding-bottom: 15px;
}
.dashboard .grid-stack .grid-stack-item .widget-content .custom-tables .dataTables_wrapper .dataTables_info,
.dashboard .grid-stack .grid-stack-item .widget-content #stuck_cards .dataTables_wrapper .dataTables_info,
.dashboard .grid-stack .grid-stack-item .widget-content #stuck_cards .dataTables_wrapper .dataTables_paginate,
.dashboard .grid-stack .grid-stack-item .widget-content .custom-tables .dataTables_wrapper .dataTables_paginate {
    visibility: hidden;
}
.dashboard .grid-stack .grid-stack-item:hover .widget-content .custom-tables .dataTables_wrapper .dataTables_info,
.dashboard .grid-stack .grid-stack-item:hover .widget-content .custom-tables .dataTables_wrapper .dataTables_paginate,
.dashboard .grid-stack .grid-stack-item:hover .widget-content #stuck_cards .dataTables_wrapper .dataTables_info,
.dashboard .grid-stack .grid-stack-item:hover .widget-content #stuck_cards .dataTables_wrapper .dataTables_paginate {
    visibility: visible;
}
#issues-list-container {
    .grid-stack-item-content {
		background-color: var(--bg-white);
		border: 1px solid var(--border-tertiary);
		border-radius: 8px;
		box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	}
	.grid-stack .widget-options {
		flex-wrap: nowrap;
	}
	.grid-stack .widget-options #widget-drop-options {
		background-color: transparent;
	}
	.grid-stack .widget-options #widget-drop-options:hover {
		background-color: #d9d9d9;
		opacity: 1;
	}
	.grid-stack .widget-options.open #widget-drop-options {
		background-color: #d9d9d9;
	}
	.grid-stack .widget-content .placeholder-img {
		object-fit: cover;
	}
	.grid-stack .widget-block.has-placeholder-img {
		object-fit: cover;
	}
	.grid-stack-item > .ui-resizable-handle.ui-resizable-se {
		background: none;
	}
	.grid-stack .widget-content .loader-img {
		max-width: 100%;
		max-height: 100%;
	}
	/* Added widget resizer icon */
	.grid-stack > .grid-stack-item > .ui-resizable-se {
		right: 0px !important;
		bottom: 0px !important;
        background: url("../../images/widget-resizer.svg");
		background-size: cover;
		background-repeat: no-repeat;
		height: 25px;
		width: 25px;
		visibility: hidden;
	}
	.grid-stack-item:hover .ui-resizable-se {
		visibility: visible !important;
	}
	.grid-stack .widget-drag {
		visibility: hidden;
		cursor: grab;
	}
	.grid-stack .widget-drag:active {
		cursor: grabbing;
	}
	.grid-stack .grid-stack-item:hover .widget-drag {
		visibility: visible;
	}
}

/* ************************************************************************
*                DASHBOARD -> STANDARD WIDGETS SECTION                     *
************************************************************************ */

#widget-section {
    .mdl-card {
		height: 300px;
		width: 250px;
	}
	.mdl-card__title {
		margin: 0px auto;
	}
	.mdl-card__title img {
		height: 100px;
	}
	#choose-widget .mdl-card__supporting-text {
		width: 100%;
		padding: 10px;
	}
	#choose-widget h2.mdl-card__title-text {
		font-size: 21px;
		margin-bottom: 7px;
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	#choose-widget .widgets-list {
		min-height: 700px;
	}
	#widget-category .clickable-pointer.active {
		cursor: not-allowed;
	}
	.widgets-block .custom-widget-edit,
	.widgets-block .custom-widget-delete {
		padding: 0 0px;
		min-width: 20px;
	}
}

/* ************************************************************************
*                 DASHBOARD -> CUSTOM WIDGETS SECTION                     *
************************************************************************ */

#custom-widget .x-axis-block .xaxis-field-block div:nth-child(2),
#custom-widget .y-axis-block .yaxis-field-block div:nth-child(2) {
    display: flex;
    flex-direction: column-reverse;
}
#custom-widget {
    #accordion .panel-default>.panel-heading {
        background-color: #337ab7;
        color: white;
    }
    #accordion .panel-heading .panel-title .glyphicon.glyphicon-chevron-up {
        display: none;
    }

    .axis_oper_group .btn.active {
        background-color: #007bff;
        color: #fff;
    }
    .axis_oper_group .btn {
        padding: 6px 8px;
    }
    .axis_oper_group .btn-default:focus,
    .axis_oper_group .btn-default:active {
        outline: none;
    }
    .previews {
        height: 350px;
        display: none;
    }
    .previews .widget-block{
        height: 100%;
        border: 1px solid #d0d4e4;
        border-radius: 8px;
    }
    .previews .widget-block .widget-options {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 100%;
        padding: 10px 10px;
        border-bottom: 1px solid #d0d4e4;
    }
    .previews .widget-block .widget-title-drag {
        display: flex;
    }
    .previews .widget-block .widget-drag {
        visibility: hidden;
    }
    .previews .widget-block .widget-name {
        font-size: 20px;
        margin-left: 10px;
        color: black;
    }
    .previews .widget-block .widget-content {
        height: 300px;
        width: 100%;
    }
    .previews .widget-block .counter-block {
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;
        justify-content: center;
        line-height: 1;
    }
    .btn.symbol-item:first-child,
    .btn.direction-item:first-child {
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }
    .btn.symbol-item:last-child,
    .btn.direction-item:last-child {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    .btn.direction-item,
    .btn.symbol-item {
        border-radius: 0;
        display: flex;
        align-items: center;
        padding: 5px 7px;
    }
    #preview_table .dataTables_wrapper {
        padding: 5px;
        width: 100% !important;
    }
    #preview_table .table>tbody>tr>td:first-child {
        padding-left: 8px;
    }
}
#custom-widget .selected {
    background-color: #007bff;
    color: white;
}
#custom-widget .grid-column {
    display: grid;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* **************************************************************************
*               ISSUE CARD ADD & CARD EDIT FORM STYLES                      *
***************************************************************************** */

#issueADDForm,
#issueEDITForm {
    .form-group label, .field-label {
        font-size: 1rem;
    }
    .card-edit-radio .mdl-radio__label,
    .card-edit-multi-select .mdl-checkbox__label {
        font-size: 1rem;
    }

    /* Form controls and inputs */
    .form-input {
        width: 100%;
        height: 36px;
        padding: 12px 15px;
        border: 0.5px solid var(--border-tertiary);
        border-radius: 4px;
        font-size: 1rem;
        color: var(--color-secondary);
        box-sizing: border-box;
        transition: border-color 0.3s;
        outline: none;
        background-color: var(--bg-white);
    }
    .form-input::placeholder {
        color: #B2B9C4;
        font-size: 0.857rem;
    }
    .form-input.error {
        background-color: #ffe6e6;
        border-color: #f00;
        transition: border-color 0.2s ease;
    }
    .field-instructions,
    .hint {
        color: #73777E;
        font-size: 1rem;
    }
    .field-instructions ol {
        margin-left: 20px;
        padding-left: 0;
        line-height: 28px;
    }
    .hint p {
        margin: 0 0 10px;
    }
    .hint.field-instructions p {
        margin-bottom: 5px;
        display: flex;
        flex-direction: column;
    }
    .hint.field-instructions p b {
        font-weight: normal;
    }
    .hint.field-instructions br {
        display: none;
    }

    /* Form layout */
    .form-actions {
        text-align: center;
        margin-top: 40px;
    }
    .dropdown-wrapper,
    .select-wrapper,
    .form-group {
        width: 100%;
        margin-bottom: 25px;
    }

    /* Select styling */
    .select2-container {
        width: 100%;
        max-width: 100%;
    }
    .select2-selection--single,
    .dropdown-select,
    select.form-control {
        height: 36px;
        padding: 6px 12px;
        border: 1px solid var(--border-tertiary);
        border-radius: 4px;
        background-color: var(--bg-white);
        display: flex;
        align-items: center;
        box-shadow: none;
        transition: border-color 0.15s ease-in-out;
        width: 100%;
    }
    .select2-selection__arrow,
    .dropdown-arrow {
        height: 36px;
        position: absolute;
        top: 1px;
        right: 1px;
        width: 30px;
    }
    .select2-selection__rendered,
    .dropdown-text,
    select.form-control {
        color: #4D4D4D;
        padding-left: 4px;
        font-size: 0.857rem;
    }
    .select2-results__option,
    .dropdown-item {
        padding: 8px 12px;
        color: #333;
        font-size: 1rem;
    }
    .select2-selection__rendered {
        color: var(--color-tertiary);
    }
    select:has(option:checked:not([value=""])) + .select2 .select2-selection__rendered {
        color: var(--color-secondary);
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        display: none;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow::after {
        content: "\f078"; /* fa-chevron-down */
        font-family: var(--font-awesome-pro);
        font-weight: 900;
        font-size: 14px;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: #4D4D4D;
    }
    .select2-container--open .select2-selection--single .select2-selection__arrow::after {
        content: "\f077"; /* fa-chevron-up */
        font-family: var(--font-awesome-pro);
    }

    /* Material Design components */
    .mdl-textfield {
        padding: 0;
    }
    .form-group .hint {
        color: #73777E;
        margin-bottom: 10px;
    }

    /* Special layout classes */
    .issue-edit-dropdown-assign-to,
    .issue-edit-dropdown-proj-sprint {
        margin-left: 0;
    }
    .issue-edit-dropdown-sub-task-of label,
    .issue-edit-dropdown-proj-sprint label {
        font-size: 0.857rem;
        margin-bottom: 10px;
    }
    .issue-edit-dropdown-move-customer-to label,
    .issue-edit-dropdown-assign-to label {
        margin-bottom: 10px;
    }

    /* Input group styling */
    .input-group {
        width: 100%;
    }
    .input-group .mdl-textfield__input {
        height: 36px;
        padding: 6px 12px;
        border: 1px solid var(--border-tertiary);
        border-radius: 4px;
        font-size: 1rem;
        color: var(--color-secondary);
        box-sizing: border-box;
        background-color: var(--bg-white);
        outline: none;
        transition: border-color 0.2s ease;
    }
    .form-group .input-group {
        width: 100%;
    }

    /* File upload styling */
    .uploadifive-button {
        border: 1.6px dashed var(--border-tertiary) !important;
        border-radius: 4px;
        cursor: pointer;
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
    }
    .uploaded-file-name {
        color: #4D4D4D;
    }
    .issue-edit-file-uploaded,
    .uploadifive-queue {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;
        background-color: var(--bg-secondary);
    }
    .uploadifive-queue-item {
        background-color: var(--bg-secondary) !important;
    }
    .uploadifive-queue-item .fileinfo .delete-uploaded-file {
        margin-left: 55px;
    }
    .card-edit-preview-icon {
        position: absolute;
        bottom: -21px;
        right: 5px;
        }

    .card-edit-cur-icons {
        align-items: start;
        margin-top: 1px;
    }
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--selected{
	background-color: var(--bg-section);
	color: var(--color-secondary);
}

/* **************************************************************************
*                           ISSUE CARD VIEW -> TASKS                        *
***************************************************************************** */

.activity-view-block .activity-view-content .task-detail1 .assignees span:not(:first-child),
.activity-card .activity-card-detail .activity-detail .assignees span:not(:first-child){
    margin-left: -6px;
}
.activity-card .activity-card-option .card-options li:hover,
.activity-list-table .sub-filter .scroll .active a,
.activity-list-table .sub-filter li a:hover,
.activity-list-table .filter li button:hover{
    background-color: #EAF9F7;
    color: #136F63;
    font-weight: 600;
}
.activity-card .activity-card-id .check-box,
.activity-list-table .sub-filter .scroll>li>a .check-box,
#assignee-dropdown .scroll>li>a .check-box{
    height: 1rem;
    width: 1rem;
}
.activity-card .activity-card-id .check-box i,
.activity-list-table .sub-filter .scroll>li>a .check-box i,
#assignee-dropdown .scroll>li>a .check-box i{
	display: none;
}
.activity-list-table .sub-filter .scroll .active .check-box,
.activity-card.multi-selected .activity-card-id .check-box{
	background-color: #008BF8;
}
.activity-card.multi-selected .activity-card-id .check-box i,
.activity-list-table .sub-filter .scroll .active .check-box i,
#assignee-dropdown .scroll .active .check-box i{
    display: block;
}
.activity-view-block .activity-view-content .task-detail1 .assignees span,
#assingees-list .user_icon {
    height: 2.5em;
    width: 2.5em;
}
.comment-block .note-editor .note-popover .note-hint-item:nth-child(1n+1) .team-members-tagging .user_icon,
.activity-view-block .activity-view-content .task-detail1 .assignees span:nth-child(1n+1),
.activity-card .activity-card-detail .activity-detail .assignees span:nth-child(1n+1),
#assignee-dropdown li:nth-child(1n+1) .team-members-selection .user_icon,
#assingees-list li:nth-child(2n+2) {
    color: #2E2F30;
    background-color: #B9D6F2;
}
.comment-block .note-editor .note-popover .note-hint-item:nth-child(2n+2) .team-members-tagging .user_icon,
.activity-view-block .activity-view-content .task-detail1 .assignees span:nth-child(2n+2),
.activity-card .activity-card-detail .activity-detail .assignees span:nth-child(2n+2),
#assignee-dropdown li:nth-child(2n+2) .team-members-selection .user_icon,
#assingees-list li:nth-child(3n+3) {
    color: #2E2F30;
    background-color: #C8EDE8;
}
.comment-block .note-editor .note-popover .note-hint-item:nth-child(3n+3) .team-members-tagging .user_icon,
.activity-view-block .activity-view-content .task-detail1 .assignees span:nth-child(3n+3),
.activity-card .activity-card-detail .activity-detail .assignees span:nth-child(3n+3),
#assignee-dropdown li:nth-child(3n+3) .team-members-selection .user_icon,
#assingees-list li:nth-child(4n+4) {
    color: #2E2F30;
    background-color: #FFC7CB;
}
.comment-block .note-editor .note-popover .note-hint-item:nth-child(4n+4) .team-members-tagging .user_icon,
.activity-view-block .activity-view-content .task-detail1 .assignees span:nth-child(4n+4),
.activity-card .activity-card-detail .activity-detail .assignees span:nth-child(4n+4),
#assignee-dropdown li:nth-child(4n+4) .team-members-selection .user_icon,
#assingees-list li:nth-child(5n+5) {
    color: #2E2F30;
    background-color: #FBF4E6;
}
.comment-block .note-editor .note-popover .note-hint-item:nth-child(5n+5) .team-members-tagging .user_icon,
.activity-view-block .activity-view-content .task-detail1 .assignees span:nth-child(5n+5),
.activity-card .activity-card-detail .activity-detail .assignees span:nth-child(5n+5),
#assignee-dropdown li:nth-child(5n+5) .team-members-selection .user_icon,
#assingees-list li:nth-child(6n+6) {
    color: #2E2F30;
    background-color: #B8BFFD;
}
.comment-block .note-editor .note-popover .note-hint-item:nth-child(6n+6) .team-members-tagging .user_icon,
.activity-view-block .activity-view-content .task-detail1 .assignees span:nth-child(6n+6),
.activity-card .activity-card-detail .activity-detail .assignees span:nth-child(6n+6),
#assignee-dropdown li:nth-child(6n+6) .team-members-selection .user_icon,
#assingees-list li:nth-child(7n+7) {
    color: #2E2F30;
    background-color: #D4FFDE;
}
.comment-block .note-editor .note-popover .note-hint-item:nth-child(7n+7) .team-members-tagging .user_icon,
.activity-view-block .activity-view-content .task-detail1 .assignees span:nth-child(7n+7),
.activity-card .activity-card-detail .activity-detail .assignees span:nth-child(7n+7),
#assignee-dropdown li:nth-child(7n+7) .team-members-selection .user_icon,
#assingees-list li:nth-child(8n+8) {
    color: #2E2F30;
    background-color: #CBCDD4;
}
.issue-activity-add-block .activity-edit-topbar .back-btn img,
.activity-view-block .activity-view-topbar .back-btn img{
	width: 6px;
    height: 14px;
    margin-bottom: 2px;
}
.issue-activity-add-block .back-btn,
.activity-view-block .activity-view-topbar .back-btn{
	color: #008BF8;
}
.activity-list-table table.dataTable.no-footer{
    border-bottom: none;
}
.activity-list-table .dataTables_wrapper .top {
    height: 35px;
    margin-bottom: 10px;
}    
.activity-list-table .top .dataTables_filter{
    width: 40%;
    height: 100%;
    float: left;
    margin-right: 10px;
}
.activity-list-table .top .dataTables_filter label{
    width: 100%;
    height: 100%;
    opacity: 1;
}
.activity-list-table .dataTables_filter i{
    position: absolute;
    color: #5A5D6E;
    top: 11px;
    left: 12px;
    font-size: 1em;
}
.activity-list-table .dataTables_filter input{
    height: 100%;
    width: 100%;
    border: none;
    color: #5A5D6E;
    background-color: #ECEFF2;
    font-size: 0.85em;
    padding-left: 30px;
    font-weight: 500;
    border-radius: 5px;
    margin-left: 0px;
}
.activity-list-table .dataTables_filter input::placeholder{
    font-size: 0.85em;
    font-weight: 500;
}
.activity-list-table .top .dt-buttons{
    width: 58.5%;
    height: 100%;
}
.activity-list-table #data-table_wrapper .dt-button{
    height: 100%;
    color: #5A5D6E;
    border: none;
    font-size: 0.95em;
    border-radius: 5px;
    background: #ECEFF2;
    padding: 0px 15px;
    margin-right: 0px;
    margin-left: 0px;
}
.activity-list-table #data-table_wrapper .dt-button.disabled{
    display: none;
}
.activity-list-table .filter{
    top: 35px !important;
    left: 295px !important;
}
.activity-list-table .filter li button{
    width: 100%;
    background-color: white;
    color: #2E2F30;
}
.activity-list-table .sub-filter li a:hover{
    opacity: 1 !important;
}
.activity-list-table .sub-filter{
    top: -4px !important;
    left: 158px !important;
}
.activity-list-table .sub-filter li a{
    color: #2E2F30;
}
.activity-list-table #data-table_wrapper .activity-filter{
    margin-right: 10px;
}
.activity-list-table #data-table_wrapper .add-task{
    color:#FFF;
    background-color: #1D8975;
}
.activity-list-table #data-table_wrapper .multiple-complete{
    margin-right: -1px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.activity-list-table #data-table_wrapper .multiple-delete{
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.activity-list-table #data-table_wrapper .multiple-delete img,
.activity-list-table #data-table_wrapper .multiple-complete img{
    width: 12px;
    height: 12px;
}
.activity-list-table #data-table_wrapper .more-option{
    background-color: #FFF;
    border: 1px solid #E7E9EA;
    padding: 0px 5px !important;
    margin-right: 0px;
}
.activity-card:hover{
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
.activity-list-table .activity-completed-card{
    background: #EEF4FA !important;
}
.activity-list-table .activity-completed-card .activity-card-id,
.activity-list-table .activity-completed-card .activity-card-detail{
    filter: grayscale(1);
    opacity: 0.5;
}
.activity-list-table .activity-completed-card .activity-name{
    text-decoration: line-through;
}
.activity-card .activity-card-id .activity_id{
    padding: 3px 9px;
    color: #136F63;
    background: #C8EDE8;
}
.activity-card .activity-name{
    min-height: 42px;
    color: #2E2E2E;
    font-size: 1.1em;
    line-height: normal;
}
.activity-card .activity-card-detail .activity-detail{
    color: #858585;
    line-height: normal;
}
.activity-card .activity-card-detail .activity-detail img{
    width: 14px;
    height: 14px;
}
.activity-card .activity-card-detail .activity-detail .assignees span{
    height: 2em;
    width: 2em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}
.activity-card .filter-result-empty{
    color: #b6b8bb;
}
.activity-card .activity-card-option{
    position: relative;
}
.activity-card .activity-card-option button{
    position: relative;
    padding: 1px;
    background-color: #EDF7FF;
}
.activity-card .activity-card-option .card-options{
    top: 48px;
    left: -60px;
    min-width: 100px;
    padding: 0px 0 !important;
}
.activity-card .activity-card-option .card-options li{
    line-height: 30px;
    color: #2E2F30;
}
.activity-card .activity-card-id .check-box{
    margin-left: unset;
}
.repeat-block .mdl-checkbox__box-outline {
    border: 2px solid var(--color-secondary);
}

/* ************************************************************************
*                      ACTIVITY ALERT STYLES                              *
************************************************************************ */

.activity-info{
	position: relative;
}
.activity-counter{
	position: absolute;
    top: -4px;
    right: -10px;
    border-radius: 10px !important;
}
.red-alert .activity-counter{
    background-color: #ed3358;
}
.green-alert .activity-counter,
.orange-alert .activity-counter{
    background-color: #2980b9;
}

/* *********************************************************************
*           ISSUE CARD VIEW -> TASKS -> ADD & EDIT TASKS               *
 ********************************************************************* */

 #issue-activity-block {
    .input-block label {
        line-height: normal;
    }
    .input-block input,
    .input-block textarea {
        line-height: normal;
    }
    .input-block input::placeholder,
    .input-block textarea::placeholder{
        color:#9E9E9E;
    }
    .input-block .select2-selection__rendered {
        border-radius: 5px;
        border: 1px solid var(--border-tertiary);
        background: var(--bg-white);
        padding:9px;
        color: var(--color-secondary);
        font-size: 0.95em;
        font-style: normal;
        font-weight: 500;
        line-height: normal !important;
    }
    .input-block .select2-selection__rendered img{
        width: 15px;
        height: 15px;
        margin-top: -3px;
        margin-right: 5px;
    }
    .input-block .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 32px;
        right: 5px;
    }
    .select2-container--default .select2-results__option[aria-selected=true],
    .select2-container--default .select2-results__option--highlighted[aria-selected]{
        background-color: #EAF9F7;
        color: #136F63;
        font-weight: 600;
    }
    .select2-container .select2-dropdown--above,
    .select2-container .select2-dropdown--below{
        border-radius: 4px;
        border: 1px solid #F0F0F0;
        background: #FFF;
        box-shadow: 0px 2px 11px 0px rgba(0, 0, 0, 0.08);
    }
    .select2-container .select2-results__option {
        font-size: 0.85em;
        padding: 4px;
    }
    .select2-container .select2-results__option img{
        width: 15px;
        height: 15px;
        margin: 0px 5px;
    }
    .select2-container .select2-results__option[aria-selected=true] i{
        padding: 6px;
        display: block !important;
    }
    .buttons-block button{
        line-height: normal;
    }
    .input-block #add-assignees-btn svg {
        width: 1rem;
        stroke: var(--color-secondary);
    }
    #assignee-dropdown .scroll .active .check-box{
        background-color: #136F63;
    }
    li::marker {
        content: none;
    }
    #assingees-list li.assignee {
        margin-left: -7px;
    }
    .issue-activity-add-block .repeat-block{
        margin-left: -15px;
    }
    .issue-activity-add-block .repeat-block .mdl-checkbox.is-checked .mdl-checkbox__tick-outline{
        background-color: #136F63;
    }
    .issue-activity-add-block .repeat-block .mdl-checkbox.is-checked .mdl-checkbox__box-outline{
        border: 2px solid #136F63;
    }
    .issue-activity-add-block .private-block .mdl-switch.is-upgraded{
        padding-left: 35px;
    }
    .issue-activity-add-block .private-block .mdl-switch__thumb{
        left: 3px;
        top: 7px;
        height: 10px;
        width: 10px;
    }
    .issue-activity-add-block .private-block .mdl-switch__track{
        height: 14px;
        width: 28px;
    }
    .issue-activity-add-block .private-block .mdl-switch.is-checked .mdl-switch__track{
        background-color: #136F63;
    }
    .issue-activity-add-block .private-block .mdl-switch.is-checked .mdl-switch__thumb{
        background: rgb(251 252 253);
        left: 15px;
    }    
}

/* **************************************************************************
*                      ISSUE CARD VIEW -> TASKS -> VIEW TASKS               *
***************************************************************************** */

.activity-view-block .activity-view-topbar .edit-btn,
.activity-view-block .private{
    line-height: normal;
}
.activity-view-block .activity-view-content .title,
.activity-view-block .activity-view-content .data{
    line-height: normal;
}
.activity-view-block .priority,
.activity-view-block .type,
.activity-view-block .duedate {
    margin-right: 25px;
}
.activity-view-block .task-detail2 .repeat{
    margin-top: 25px;
}
.activity-name .activity_id{
    color: #136F63;
    background: #C8EDE8;
}

/* **************************************************************************
*                      ISSUE CARD VIEW -> COMMENTS                          *
***************************************************************************** */

/* ISSUE & DISCUSS PAGE */
.issue-comment-block{
	height: calc(100vh - 204px);
}
.issue-comment-block .comment-block{
	height: 100%;
}
.comment-block {
    .note-editor{
        border: 2px solid var(--color-primary) !important;
        box-shadow: none;
        border-radius: 8px;
        margin-bottom: 0px !important;
        opacity: 1 !important;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }
    .unfocus .note-editor{
        border: 2px solid #d5d7d9;
        border-radius: 8px;
        opacity: 0.4 !important;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }
    .note-editor .note-myCustomGroup{
        float: right;
        padding: 2px;
    }
    .note-editor .note-myCustomGroup .new-comment{
        font-size: 11px;
        font-weight: 600;
        border-radius: 5px !important;
        text-transform: none;
        max-height: 29px;
        display: flex;
        align-items: center;
        background-color: #0B7BCF !important;
        color: var(--color-white) !important;
    }
    .note-editor .note-myCustomGroup .cancel-link{
        width: 66px;
        height: 30px;
        font-size: 12px;
        padding: 4px 16px;
    }
    .note-editor .note-myCustomGroup .cancel-link a{
        color: #424141;
    }
    .note-editor .note-myCustomGroup .upload-span{
        margin-right: 0.5em;
        margin-top: 0.5em;
    }
    .note-editor .note-myCustomGroup .upload-span a{
        color: grey !important;
    }
    .note-editor .note-myCustomGroup .upload-span i{
        transform: rotate(318deg);
    }
    .note-editor .note-editable {
        padding: 15px !important;
    }
    .note-editor .note-editable p{
        margin-bottom: 0 !important;
        line-height: 18px !important;
    }
    .note-editor .note-editable .file-block{
        position: relative;
        border-radius: 0.8em;
        display: inline-flex;
        border: 1px solid #cbc9c9;
        margin: 0.4em;
        width: 5em;
        height: 5em;
        padding: 0.2em;
    }
    .note-editor .note-editable .file-block img{
        pointer-events: none;
    }
    .note-editor .note-editable .file-block .remove-file{
        position: absolute;
        width: 1.5em;
        height: 1.5em;
        border: 1px solid #8f8c8c;
        border-radius: 1em;
        left: 4em;
        top: -0.5em;
        opacity: 0;
    }
    .note-editor .note-editable .file-block:hover .remove-file{
        opacity: 1;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }
    .note-editor .note-editable .file-block .remove-file span{
        position: absolute;
        top: -0.12em;
        left: 0.4em;
    }
    .note-editor .note-status-output{
        display:none;
    }
    .note-editor .btn-default{
        border-color: var(--bg-white) !important;
        background-color: var(--bg-white) !important;
        color: var(--color-secondary) !important;
    }
    .note-editor .btn-default.active{
        background-color: #1D8975 !important;
        border-radius: 3px !important;
        color: var(--bg-white);
    }
    .note-editor .note-placeholder{
        font-size: small;
        padding: 15px;
    }
    .note-editor .note-toolbar{
        background-color: var(--bg-white);
        height: 4.2em;
        border-top: 1px solid var(--border-tertiary);
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
        padding: 5px;
    }
    .note-editor .note-toolbar .note-btn-group{
        margin-top: 2px !important;
    }
    .note-editor .note-popover{
        top: unset !important;
        bottom: 80px;
    }
    .note-editor .note-hint-popover .popover-content{
        max-height: 225px;
    }
    .note-editor .note-hint-popover .popover-content .note-hint-group .note-hint-item.active,
    .note-editor .note-hint-popover .popover-content .note-hint-group .note-hint-item:hover{
        background-color: #d5dce3;
        border-radius: 5px;
    }
    .note-editor .note-popover .user_icon{
        height: 2em !important;
        width: 2em !important;
        display: flex;
        justify-content: center;
        text-transform: uppercase;
    }
    .note-editor .note-popover a{
        display: flex;
        color: black;
    }
    .comments-box .box-content:first-child{
        margin-top: auto !important;
    }
    .comments-box::-webkit-scrollbar {
    display: none;
    }
    .comments-box-seperator{
        border-bottom: 1px solid var(--border-section);
    }
    .comments-box-seperator .comments-datetime{
        border: 1px solid var(--border-section);
    }
    .comment-box{
        width: 100%;
    }
    .comment-box-header{
        height: 26px;
    }
    .comment-box-header .comment-menu{
        opacity: 0;
    }
    .comment-box-header:hover .comment-menu{
        opacity: 1;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }
    .comment-box .comment-box-text{
        width: auto;
        margin-left: 30px;
        text-wrap:wrap;
    }
    .comment-box .comment-box-text .comment-text p{
        margin-bottom: 0px !important;
        color: var(--color-secondary);
        word-wrap: break-word;
    }
    .comment-box .comment-box-text .comment-text .file-block{
        display: inline-flex;
    }
    .comment-box .comment-box-text .comment-text .file-block.image{
        border-radius: 0.8em;
        display: inline-flex;
        border: 1px solid #cbc9c9;
        margin: 0.2em;
        width: 400px;
        padding: 0.5em;
    }
    .comment-box .comment-box-text .comment-text .file-block a{
        cursor: pointer;
    }
    .comment-box .comment-box-text .comment-text .file-block img{
        border-radius: 0.8em;
    }
    .comment-box .comment-box-text .comment-text .file-block .remove-file{
        display: none;
    }
    .comment-text .file-block.pdf .file-link{
        display:inline-flex;
        align-items:center;
        gap:6px;
        width: max-content;
        padding: 7px;
        border: 0.5px solid var(--border-tertiary);
        white-space: nowrap;
        border-radius: 5px;
        background-color: var(--bg-primary);
        margin: 10px;
    }
    .comment-text .file-block.pdf .file-link img {
        width: 18px;
    }
    .comment-text .file-block.pdf .file-link::after{
        content:"Preview File";
        font-size:13px;
        color:var(--color-secondary);
    }
    .like-btn-block .like-btn .fas{
    color:#00A6FB;
    }
    .like-btn-block .like-btn .liked-text{
        color: #00A6FB
    }
    .note-editor .note-editable {
        padding: 15px !important;
    }
    .reply-to-name.bg-blue {
        background-color: transparent !important;
        color: var(--color-secondary);
        font-weight: 600;
    }
    .comment-box-replies .comment-circle::before,
    .comment-box-replies .comment-circle::after {
        content: "";
        position: absolute;
    }
    .comment-box-replies .comment-circle::before {
        width: 25px;
        height: 2px;
        background: var(--border-section);
        top: 50%;
        right: 100%;
        transform: translateY(-50%);
    }
    .comment-box-replies .comment-circle::after {
        top: 50%;
        right: calc(100% - 1px);
        transform: translateY(-50%);
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 6px solid var(--border-section);
    }
    .comment-text {
        transition: max-height 0.3s ease;
		overflow: hidden;
    }
    .comment-text.is-collapsed {
        -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
		max-height: 125px !important;
    }
}
.comment-block.issue-page .comment-label-time.card-label-name {
	display: none;
}
.comment-block .comments-box{
    height: 75vh;
}
.modal-body .comment-block .comments-box {
    height: 85%;
}
.issue-page .no-comment {
    height: calc(100vh - 335px);
}
.discuss-page .no-comment {
    height: calc(100vh - 275px);
}

/* **************************************************************************
*                    ISSUE CARD VIEW -> PHASE LEFTNAV                       *
***************************************************************************** */

#confirm-modal .modal-content:has(.issue-popup)  .modal-header,
#confirm-modal .modal-content:has(.issue-record-form)  .modal-header {
    display: block !important;
}
#ajax-modal .modal-content:has(.issue-popup) .modal-header,
#ajax-modal .modal-content:has(.issue-record-form) .modal-header {
    display: none;
}

#confirm-modal .modal-content:has(.issue-popup)  .modal-header,
#confirm-modal .modal-content:has(.issue-record-form)  .modal-header {
    display: block !important;
}
#ajax-modal .modal-content:has(.issue-popup) .modal-header,
#ajax-modal .modal-content:has(.issue-record-form) .modal-header {
    display: none;
}
.issue-title .label{
	line-height: unset;
}
.issue-heading, .assigned-to-name, .assigned-to-date {
	color: #34495e;
}
.heading-sep{
    margin-left: -1.2em;
    margin-right: -1.2em;
    z-index: 999;
    position: relative;
	box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.issue-phase-list .nav li:first-child::before , .issue-phase-list .nav li:not(:first-child):not(:last-child)::before{
    content: '';
    position: absolute;
    width: 1px;
    height: 58%;
    background-color: #54565aa3;
    margin-left: 2.07em;
    top: 2.33em;
    z-index: 1;
}
.issue-phase-list .nav li:first-child.completed::before, .issue-phase-list .nav li:not(:first-child):not(:last-child).completed::before{
	background-color: #187664 !important;
}
.issue-collapse-icon{
    left: 19%;
    top: 5%;
    z-index: 999;
}
.issue-phase-list .nav-stacked > li + li {
	margin-top: 0px;
}

.issue-phase-list .nav-pills > li > a {
	border-radius: 0px;
}
.issue-phase-list .nav-pills > li > a:focus {
	background-color: transparent;
	color: red;
}
.issue-phase-list .nav-pills > li > a:hover {
	background: var(--bg-gradient-secondary-100);
	color: red;
}
.issue-phase-list ul.nav-pills > li:hover{
	color: red !important; 
	opacity: 1;
    cursor: pointer;
}
.issue-phase-list {
    word-wrap: anywhere;
}
.issue-phase-list .nav-pills {
    text-align: left;
    white-space: normal;
}
.issue-phase-list .nav-pills > li {
    width: 100%;
}
.row-eq-height.issue-popup {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.issue-popup .issue-phase-list {
	border-right: 1px solid var(--border-tertiary);
}
.issue-popup {
    .right-triangle {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 50px 0 50px 50px;
    }
    .issue-options-toolbar{
        white-space: nowrap;
    }
    .issue-options-toolbar .options-toolbar{
        white-space: normal;
        display: inline-block;
    }
    .issue-options-toolbar .issue-timeline-section{
        margin-top: 15px;
    }
    .timeline-content{
        background-color: #4c504c;
        border-radius: 0px 3px 3px 3px;
        margin-left: 25px;
    }
    .timeline-items::before{
        content: '';
        position: absolute;
        width: 1px;
        height: 100%;
        background-color: #187664;
        margin-left: 7px;
    }
    .timeline-item-backward::before{
        content: '';
        position: absolute;
        width: 1px;
        height: 150%;
        background-color: #e405f3;
        margin-left: 7px;
    }
    .timeline-dot{
        background-color: #16a085;
        left: 2.5px;
    }
    .timeline-dot-backward{
        background-color: #e405f3 !important;
    }
    .timeline-content-arrow{
        position: absolute;
        height: 0px;
        width: 0px;
        z-index: 1;
        top: 16px;
        border-bottom: 5px solid transparent;
        border-right: 5px solid #4c504c ;
        left: 20px;

    }
    .timeline-date{
        margin-left: 25px;
        margin-top: -4px;
        font-weight: 600;
        color: #95a5a6;
    }
    #toggle-issue-back-btn{
        background-color: #6f61c06e;
        border: none;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    .issue-timeline-section{
        max-height: calc(100vh - 110px);
        overflow-y: auto;
    }
    .no-history{
        margin: 20px;
        color:#95a5a6;
    }
    .no-issue-history{
        margin: 20px;
        color:#95a5a6;
    }
}
#select2-sprint_dropdown-container{
	color:#a59f9f !important;
}

/* ************************************************************************
*                       ISSUE CARD VIEW MODE                              *
************************************************************************ */

.view-form {
	.view-form p {
		font-size: 12px;
		margin: 0px 0px 10px 0px;
		line-height: 20px;
		color: grey;
	}
	.view-form h1,
	.view-form h2,
	.view-form h4,
	.view-form h5,
	.view-form h6 {
		margin-bottom: 0px;
		margin-top: 14px;
	}

	.view-form h1 { font-size: 2.5em; }
	.view-form h2 { font-size: 2.0em; }
	.view-form h3 { font-size: 1.8em; }
	.view-form h4 { font-size: 1.6em; }
	.view-form h5 { font-size: 1.4em; }
	.view-form h6 { font-size: 1.2em; }

	tr .view-form-table-label {
	white-space: normal !important;
	word-wrap: break-word;
	max-width: 250px;
	min-width: 150px;
	width: 200px;
	}

	tr .view-form-table-data {
	white-space: normal !important;
	word-wrap: break-word;
	}
	.file-link img{
		object-fit:cover;
	}
	tr .view-form-table-data .card-view-url {
		color:#73777E;
		text-decoration: underline !important;
		overflow-wrap: anywhere;
	}
	td.view-form-table-label:has(+ td .uploaded-file-block) {
	vertical-align: middle !important;
	}
	.uploaded-file-block .preview-icon,
	.uploaded-file-block .download-icon {
	transition: opacity 0.3s ease;
	}

	.uploaded-file-block:hover .preview-icon,
	.uploaded-file-block:hover .download-icon {
	opacity: 1;
	pointer-events: auto;
	}
}

/* ************************************************************************
*            PROJECT BOARD VIEW -> ISSUE ROW SCROLL                        *
************************************************************************ */

.scrolling-wrapper-flexbox {
  display: flex;
  flex-wrap: nowrap;
  /* overflow-x: auto; */
}
.scrolling-wrapper-flexbox .phase-row {
  flex: 0 0 auto;
  margin-right: 3px;
}
.phase-row {
  min-width: 300px;
  max-width: 300px;
  margin:10px 3px;
  /* min-height: 600px; */
  border-radius: 5px;
  max-height: 90vh;
  /* min-height: 700px;*/
  height: max-content;
  overflow: auto;
}
#sprint-group-panel .table-responsive::-webkit-scrollbar,
#issues-list-container .phase-row::-webkit-scrollbar,
.default-workflow::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
.scrolling-wrapper, .scrolling-wrapper-flexbox {
  /* height: 100%; */
  margin-bottom: 0px;
  /* padding-left: 12px; */
  width: 100%;
  -webkit-overflow-scrolling: touch;
}
/* .scrolling-wrapper::-webkit-scrollbar , .scrolling-wrapper-flexbox::-webkit-scrollbar {
  display: none;
} */

/* ************************************************************************
*                    MDL PLUGIN CSS OVERRIDING                            *
************************************************************************ */

.mdl-button--raised.mdl-button--colored {
	color: white;
}
.mdl-button--accent.mdl-button--accent.mdl-button--raised,
.mdl-button--accent.mdl-button--accent.mdl-button--fab {
	color: white;
}
.mdl-button--fab{
    font-size: 6px;
    height: 36px;
    min-width: 36px;
    width: 36px;
}
.mdl-tooltip {
	font-size: 12px;
}
.mdl-button--micro-fab {
    height: 30px;
    min-width: 30px;
    width: 30px;
    background: none;
    box-shadow: none;
}

.mdl-button--micro-fab .material-icons {
	font-size: 18px;
}
label,
.mdl-textfield--floating-label.is-focused .mdl-textfield__label,
.mdl-textfield--floating-label.is-dirty .mdl-textfield__label,
.mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
	font-family: 'Proxima', sans-serif;
    font-size: 1.1rem;
    top: 0px;
    font-weight: 400;
	color: var(--color-primary);
	opacity: 0.7;
}
.mdl-textfield__extrawide {
	width: 500px;
}
.mdl-textfield__label {
        font-size: 1em;
	font-weight: 400;
	color: #78909c;
}
.mdl-square-card {
  width: 320px;
  height: 320px;
}
.mdl-square-card > .mdl-card__title {
  color: #fff;
}

/* mdl menu items will be black and not blue */
.mdl-menu__item a {
	color: black;
}

/* mdl menus will have rounded borders */
.mdl-menu__outline {
    border-radius: 8px;
    background: var(--bg-white);
}

/* No-hover button */
.mdl-button-nohover:hover {
 background-color: none !important;
}
.mdl-menu__item:hover {
    background: var(--bg-section);
}

/* ************************************************************************
*                    PROJECT VIEW -> SPRINTS                              *
************************************************************************ */

.show-on-hover-element,
.show-on-hover {
    opacity: 0;
}
.hide-on-hover {
    opacity: 0;
}
.highlight-on-hover {
    opacity: 0.7;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.highlight-on-hover:hover,
.show-on-hover-block:hover .show-on-hover-element,
.show-on-hover:hover {
    opacity: 1 !important;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.sprint-block .table>tbody>tr>td,
.sprint-block .table>tbody>tr>th,
.sprint-block .table>tfoot>tr>td,
.sprint-block .table>tfoot>tr>th,
.sprint-block .table>thead>tr>td,
.sprint-block .table>thead>tr>th {
	border-top: none;
	vertical-align: middle;
}

/* ************************************************************************
*                 PHASE EDIT FORM -> PHASE FORM EDITOR                    *
************************************************************************ */

/***********  OL  ***********/
.phase-field-record ol.select-options {
  list-style: none;
  counter-reset: li;
}

/***********  CHECKBOX  ***********/
.phase-field-record ol.select-options li.li-checkbox:before {
    content: "\e157";
    font-family: 'Glyphicons Halflings';
    font-size: 1.2em;
    float: left;
    margin-left: -1.5em;
    margin-right: 0.5em;
    color: #CCCCCC;
    position: absolute;
    text-align: right;
    direction: rtl;
    font-weight: bold;
    font-size: 1.3em;
}

/***********  RADIO  ***********/
.phase-field-record ol.select-options li.li-radio:before {
    content: "\e165";
    font-family: 'Glyphicons Halflings';
    font-size: 1.2em;
    float: left;
    margin-left: -1.5em;
    margin-right: 0.5em;
    text-align: right;
    direction: rtl;
    font-weight: bold;
    font-size: 1.3em;
    color: #CCCCCC;
    position: absolute;
}

/***********  DROPDOWN  ***********/
.phase-field-record ol.select-options li.li-dropdown {
    counter-increment: li;
}
.phase-field-record ol.select-options li.li-dropdown:before {
        content: counter(li);
        color: #CCCCCC;
        display: inline-block;
        width: 1em;
        margin-left: -1.5em;
        margin-right: 0.5em;
        text-align: right;
        direction: rtl;
        font-weight: bold;
        font-size: 1.3em;
        position: absolute;
}

/*----- Lookup Fields -------*/
.phase-field-record .lookup-options-row {
	display: none;
}

/* ************************************************************************
*              PHASE EDIT FORM -> PHASE FIELD -> DRAG & DROP              *
************************************************************************ */

/*DRAG AND DROP CSS*/
div.ui-sortable-helper {
	border: 1px dashed #78909c;
	transform: rotate(5deg);
	border-radius: 4px;
	background: #cae4ef;
}
div.ui-sortable-helper .project-name{
	color:#000000 !important;
}
div.ui-sortable-placeholder{
	visibility: visible !important;
    background-color: #29b6f6 !important;
	border: 1px dashed white !important;
	border-radius: 4px !important;
    opacity: 0.3 !important;
}
.phasefield.ui-sortable-helper,
.phase-row.ui-sortable-helper {
	border: 1px dashed #78909c;
	box-shadow: 0 20px 20px 0 rgba(0, 0, 0, .14), 0 20px 20px -2px rgba(0, 0, 0, .2), 0 20px 20px 0 rgba(0, 0, 0, .12);
    transform: none;
	border-radius: 4px;
	background: #cae4ef;
}
.ui-sortable-placeholder.phase-row{
    height: calc(100vh - 107px) !important;
    background-color: #29b6f6 !important;
    opacity: 0.3 !important;
    border: 1px dashed rgb(81, 3, 249) !important;
}
.ui-sortable-placeholder.phasefield{
    background-color: #29b6f6 !important;
    opacity: 0.3 !important;
    border: 1px dashed rgb(81, 3, 249) !important;
}
.formula-field-block .input-group .mdl-textfield__input.formula-field {
    color: #34495e;
    border-bottom: none;
}
.mdl-textfield .input-group .mdl-textfield__input.formula-field {
    color: #78909c;
}
.formula-field-block .tooltip .tooltip-inner,
.formula-field .tooltip .tooltip-inner {
    overflow-wrap: anywhere;
}
.mdl-textfield .input-group.formula-container .mdl-textfield__input.formula-field {
    padding-left: 15px;
}
.mdl-textfield .input-group.formula-container::before {
    content: "=";
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #78909c;
    font-size: 20px;
    padding-left: 10px;
}
.disabled-field {
    pointer-events: none;
}
.exp-container input {
    padding-left: 0;
}
#formula-container .exp-container .exp-notification {
    bottom: 40%;
    top: unset !important;
    left: unset !important;
    right: -30px;
}
#formula-container .exp-container .exp-suggestions {
    min-height: auto;
}
#formula-container .exp-container .exp-opr-suggestions .exp-suggestion-item,
#formula-container .exp-container .exp-suggestions .exp-suggestion-item {
    min-width: auto;
}
#formula-container .exp-container .exp-suggestions .exp-suggestion-item.selected {
    font-weight: unset;
}
#formula:-webkit-autofill,
#formula:-webkit-autofill:hover,
#formula:-webkit-autofill:focus,
#formula:-webkit-autofill:active  {
    transition: background-color 5000s ease-in-out 0s;
}
#formula-container #formula:focus::placeholder {
    color: transparent;
}
.phase-field-record #formula-block .mdl-textfield {
    width: auto;
    max-width: none;
}
#formula-block #formula-error {
    display: none;
}
#formula-container .exp-container .exp-notification {
    display: none;
}

/* ************************************************************************
*                             TEAMS BAR                                   *
************************************************************************ */

.teams-bar {
        padding-left: 3px;
        padding-right: 3px;
}
.teams-bar .org-name {
	display: block;
}
.team-selected {
	opacity: 1;
	border-top: none;
}
.team-element {
	padding: 14px 0px 14px 0px;
	overflow: hidden;
}
.team-element-menu {
	position: absolute;
	right: 0;
	padding-right: 5px;
	margin-top: -8px;
}
.team-element .team-icon {
	font-size: 2.5em !important;
}
.toolbar-btns {
    margin: 0px 20px 0px 0px;
    padding: 0px !important;
    min-width: 38px;
    text-transform: none;
    color: var(--color-secondary);
    border-radius: unset;
    opacity: 0.8;
}
.project-setting-tab .active-tab,
.issue-options-toolbar .active-tab {
	color: var(--color-primary);
    border-bottom: 3px solid var(--color-primary);
}
.col-xs-0 {
	width: 0%;
}
.teams-bar .xpull-right .mdl-menu__container{
    position: fixed;
}
.teams-list {
    height: 100%;
    max-height: calc(100vh - 215px);
    overflow-y: hidden;
    overflow-x: hidden;
}
.teams-list.admin-user {
    max-height: calc(100vh - 155px);
}
.teams-list.normal-user {
    max-height: calc(100vh - 80px);
}
.basic-details .default-workflow,
.teams-list.admin-user,
.teams-list.normal-user {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%,black 3%,black 95%, transparent 100%);
}
.teams-list:hover {
    overflow-y: overlay;
}

/* HIDE SCROLL BARS IN TEAMS LIST */
.teams-list {
    -webkit-overflow-scrolling: touch;  /* Chrome, Safari, Opera */
    scrollbar-width: none; 		/* Firefox */
    -ms-overflow-style: none;	        /* Internet Explorer 10+ */
}
.teams-list::-webkit-scrollbar {
	display: none; 			/* Safari and Chrome */
}

/* ************************************************************************
*                      CUSTOM SCROLLBAR STYLES                            *
************************************************************************ */

.custom-scrollbar, .mdl-menu__container {
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    scrollbar-width: none;
}
.custom-scrollbar::-webkit-scrollbar, .mdl-menu__container::-webkit-scrollbar {
    height: 8px;
    width: 8px
}
.custom-scrollbar::-webkit-scrollbar-button:end:increment,
.custom-scrollbar::-webkit-scrollbar-button:start:decrement,
.mdl-menu__container::-webkit-scrollbar-button:end:increment,
.mdl-menu__container::-webkit-scrollbar-button:start:decrement {
    background: #0000;
    display: none
}
.custom-scrollbar::-webkit-scrollbar-track-piece,
.mdl-menu__container::-webkit-scrollbar-track-piece {
    background: #091e4214;
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track-piece:vertical:start,
.mdl-menu__container::-webkit-scrollbar-track-piece:vertical:start {
    border-radius: 4px 4px 0 0
}
.custom-scrollbar::-webkit-scrollbar-track-piece:vertical:end,
.mdl-menu__container::-webkit-scrollbar-track-piece:vertical:end {
    border-radius: 0 0 4px 4px
}
.custom-scrollbar::-webkit-scrollbar-track-piece:horizontal:start,
.mdl-menu__container::-webkit-scrollbar-track-piece:horizontal:start {
    border-radius: 4px 0 0 4px
}
.custom-scrollbar::-webkit-scrollbar-track-piece:horizontal:end,
.mdl-menu__container::-webkit-scrollbar-track-piece:horizontal:end {
    border-radius: 0 4px 4px 0
}
.custom-scrollbar::-webkit-scrollbar-thumb:horizontal,
.custom-scrollbar::-webkit-scrollbar-thumb:vertical,
.mdl-menu__container::-webkit-scrollbar-thumb:horizontal,
.mdl-menu__container::-webkit-scrollbar-thumb:vertical {
    background: #091e4221;
    border-radius: 4px;
    display: block;
    height: 48px
}

/* Fixing Media width */
audio, canvas, iframe, img, svg, video {
    vertical-align: middle;
    max-width: 100%;
}

/* Fixing Scrolls */
.scrolling-wrapper-flexbox .phase-row {
    max-height: calc(100vh - 155px);
    overflow-x: hidden;
    padding-top: 0;
    padding-bottom: 0;
}
.col-md-8.center-content .col-sm-6.right .mdl-menu__container {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    border-radius: 8px;
    background-color: white;
}
.col-md-8.center-content .col-sm-6.right .mdl-menu__outline {
    max-height: calc(100vh - 150px);
    overflow: hidden;
    box-shadow: none;
}
.phase-row:not(.expand-btn) .xlead {
    padding-bottom: 15px !important;
    padding-top: 15px !important;
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 1;
}
.phase-row:not(.expand-btn) #add-card {
    position: sticky;
    bottom: 0;
    background: white;
    opacity: 1;
    padding-bottom: 0;
    margin-bottom: 0;
}
.phase-row:not(.expand-btn) #add-card .msmall-padding {
    padding: 10px 7px;
}
.bg-secondary.no-margin.no-padding.med-padding-top.large-padding-bottom.show-on-hover-block {
    position: sticky;
    left: 0;
    z-index: 5;
}
.custom-scrollbar.custom-scrollbar-hover {
    overflow: overlay;
}

/* **********************************************************
                USER ACTIVITY LOGS
********************************************************** */
.fieldName-data,
.fieldName-data b{
    color: var(--color-secondary); /*applying font color to field names*/
    font-weight: normal !important; /*applying font weight to field names*/
}
.activity-log-details.comment p{
    margin-bottom: 0px;
}
.remove-after:after {
    display: none;
}
.activity-log-date,
.task-id{
    color: #29b6f6;
    font-weight: 500;
}
.panel{
    border-radius: 13px;
    background: var(--bg-secondary);
    color: var(--color-secondary);
}
.no-activity {
    text-align: center;
    color: #888;
    font-size: 1.2em;
    margin-top: 20px;
}
.comment strong p {
    margin-bottom: 0px;
}

/* Ensure the entire first line is displayed inline */
.activity-log-details.comment .activity-issue-name,
.activity-issue-name,
.fieldName-data span,
.activity-data.disp_order {
    /* background-color: #ecf0f1; */
    font-family: monospace;
}
#activity-log-container .activity-log-count {
    background: var(--bg-primary);
}
.activity-log-details.comment .activity-user {
    display: inline;
    font-weight: bold;
}
.activity-log-details.comment .activity-data {
    display: block; /*old comment*/
    margin-top: 5px;
}
/*changed Comment from*/
.activity-log-details.comment .activity-user:after {
    content: "";
}
/*to*/
.activity-log-details.comment .transition-text {
    display: block;
    margin-top: 10px;
}
/*New comment*/
.activity-log-details.comment .activity-data {
    display: block;
}
/*Timestamp*/
.activity-log-details.comment .time-ago {
    display: block;
}

#activity-log-container {
    .activity-log-body.same-user {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .activity-log-body.same-user .activity-log-details {
        padding-top: 0;
        padding-bottom: 10px;
    }
    .activity-log-body.new-user {
        margin-bottom: 0;
        /* margin-top: 15px; */
    }
    .activity-log-wrapper {
        flex: 1;
    }
    .activity-log-body.new-user .activity-log-details {
        padding-top: 0;
    }
    .activity-log-details.remove-after {
        border-bottom: none;
    }
    .activity-data .remove-file {
        display: none;
    }
    .file-block.image a{
        display:block;
        position:relative;
        overflow:hidden;
        border-radius: 10px;
    }
    .file-block.image {
        display: inline-flex;
        margin: 10px;
    }
    .file-block.image img{
        width:100%;
        max-height:180px;
        object-fit:cover;
        transition:max-height .3s;
    }
    .activity-data .file-block.pdf .file-link{
        display:inline-flex;
        align-items:center;
        gap:6px;
        width: max-content;
        padding: 7px;
        border: 0.5px solid var(--border-tertiary);
        white-space: nowrap;
        border-radius: 5px;
        background-color: var(--bg-primary);
    }
    .activity-data .file-block.pdf .file-link img {
        width: 18px;
    }
    .activity-data .file-block.pdf .file-link::after{
        content:"Preview File";
        font-size:13px;
        color:var(--color-secondary);
    }
    .file-block.image a::after{
        content:"";
        position:absolute;
        left:0;right:0;bottom:0;
        height:25px;
        background:linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.5));
    }
    .activity-wrapper {
        transition: max-height 0.3s ease;
    }
    .activity-wrapper.is-collapsed {
        -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    }
}
.user-log-group [aria-expanded="true"] i.fas.fa-angle-up,
.activity-log-date[aria-expanded="true"] i.fa-sharp.fa-solid.fa-caret-up {
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}
.user-log-group [aria-expanded="false"] i.fas.fa-angle-up,
.activity-log-date[aria-expanded="false"] i.fa-sharp.fa-solid.fa-caret-up {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}
.activity-log-date[aria-expanded="false"] {
    border-bottom: 1px solid lightgray;
    padding-bottom: 10px;
}
.activity-data .reply-to-name.bg-blue {
    color: var(--color-primary);
    background: transparent !important;
}

/* ***************************************** */
/*  One Project and One Workflow styles      */
/******************************************* */

#issues-list-container{
    .scrolling-wrapper-flexbox .add-phase-btn{
        color: #29b6f6;
        padding: 0px 7.5px 0px;
    }
    .scrolling-wrapper-flexbox .add-phase-text div{
        font-size: 25px;
        position: absolute;
        left: -22px;
        width: 45px;
        height: 45px;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #ffffff95;
        box-shadow: 0 5px 5px 0 #00000020;
        top: -16px;
        color: #656565;
    }
    .scrolling-wrapper-flexbox .add-phase-btn .new-phase-input-block .mdl-textfield{
        max-width: 270px;
    }
    .scrolling-wrapper-flexbox .add-phase-btn .new-phase-input-block #ajax-save-button{
        background: rgb(3, 169, 244);
        margin-left: 0;
        opacity: .5;
        height: 35px;
        margin-right: 8px;
        text-transform: capitalize;
    }
    .scrolling-wrapper-flexbox .add-phase-btn .new-phase-input-block .new-phase-close-icon{
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 2px;
    }
    .scrolling-wrapper-flexbox .add-phase-btn .new-phase-input-block .new-phase-close-icon:hover{
        background: #dfdede;
    }
    .scrolling-wrapper-flexbox .add-phase-btn .new-phase-input-block #ajax-save-button:hover{
        opacity: 1;
    }
    .scrolling-wrapper-flexbox .show-add-phase-text{
        position: relative;
        opacity: 1;
        transition: all .15s;
    }
    .scrolling-wrapper-flexbox .hide-new-phase-input-block{
        width: 0;
        transform: scale(0);
        padding-top: 0px;
        height: 0;
        transition: all .15s;
    }
    .scrolling-wrapper-flexbox .hide-add-phase-text{
        transition: all .15s;
        position: relative;
        opacity: 0;
    }
    .scrolling-wrapper-flexbox .show-new-phase-input-block{
        width: auto;
        transform: scale(1);
        padding: 0px 15px;
        margin: 0px 9px 0px;
        border-radius: 4px;
        transition: all .15s;
    }
    .scrolling-wrapper-flexbox .hide-add-phase-btn{
        display: none;
    }
    .scrolling-wrapper-flexbox .add-new-phase-btn-container{
        margin-top: -15px;
        padding-bottom: 5px;
    }
}

/*******************************************/
/*       PHASES > EDIT > PHASE FIELD       */
/*******************************************/

.phasefield-form {
    .row.phasefield .phasefield-border-block:hover .custom-label-LOW{
        transform: translateX(-70px);
    }
    .phase-field-divider {
        transition: max-height 0.5s ease;
    }
    .phase-field-divider:hover {
        max-height: 40px;
        transition: max-height 0.5s ease;
    }
}
.inplace_edit {
	border-bottom: none;
}
.inplace_edit:hover {
	background: white !important;
	border-bottom: 1px dotted lightblue;
	cursor: text;
	padding: 5px 2px 5px 5px;
}
#phasefieldEDITForm,
#phase-field-form {
    .select2-selection--single, .dropdown-select, select.form-control {
        height: 34px;
        padding-top: 2px;
        border: 1px solid lightgrey;
        font-size: .88em;
    }
    li.select2-results__option[aria-label="SYSTEM FIELDS"],
    .select2-container--default .select2-results__group{
        color: var(--color-primary);
        font-size: 1.0em;
    }
    li.select2-results__option[aria-label="SYSTEM FIELDS"] {
        font-weight: 400;
    }
    .select2-dropdown.select2-dropdown--below{
        box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    }
}

/*******************************************************/
/*     PHASES > EDIT > RECORD FORM - MDL SLIDER        */
/*******************************************************/

.phase-field-record input[type="range"]::-webkit-slider-thumb {
    background: var(--color-primary) !important;
    border: none !important;
    position: relative;
    bottom: -2px;
}
.phase-field-record {
    .mdl-slider__container {
        width: 50%;
    }
    .mdl-slider__background-flex {
        height: 6px;
        margin: 0;
        width: 100%;
        background: var(--color-primary);
    }
    .double-range-wrapper .mdl-slider__container:nth-child(4) {
        position: absolute;
        right: 0;
        top: 0;
    }
    .double-range-wrapper .mdl-slider__container:nth-child(4) .mdl-slider__background-upper,
    .double-range-wrapper .mdl-slider__container:first-child .mdl-slider__background-lower {
        background: #D4DFED
    }
    .mdl-radio.is-checked .mdl-radio__outer-circle {
        border: 2px solid var(--color-primary);
    }
    .mdl-switch.is-checked .mdl-switch__track {
        background: rgba(5, 101, 225, .5);
    }
    .mdl-switch__ripple-container .mdl-ripple,
    .mdl-radio.is-checked .mdl-radio__inner-circle,
    .mdl-radio__ripple-container .mdl-ripple,
    .mdl-switch.is-checked .mdl-switch__thumb,
    .double-range-wrapper .mdl-slider__container:nth-child(4) .mdl-slider__background-lower,
    .double-range-wrapper .mdl-slider__container:first-child .mdl-slider__background-upper {
        background: var(--color-primary);
    }
}


/* **************************************************************************
*                                 PROJECTS -> SLA                           *
***************************************************************************** */

#manage-sla-table .sla-table-content.sla-phase-row .phase-count::after {
    content: "";
    position: absolute;
    top:100%;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    height: calc(100% + 10px);
    background-color: #A7E1FB;
    z-index: 1;
}
#manage-sla-table .sla-table-row:last-child .sla-table-content.sla-phase-row .phase-count::after {
    display: none;
}
.sla-table::-webkit-scrollbar {
    width: 0px;
    height: 0;
    border-radius: 10px;
    color: #E3E3E3;
    transition: width 1s ease;
}
.sla-input input:read-only {
    cursor: not-allowed;
    color: transparent !important;
}
#project-settings .tab-list.active .tab-list-a {
	background: none;
	border: none; 
	border-bottom: 2px solid #337ab7;
	color: #337ab7;
}
#project-settings .tab-list .tab-list-a:hover,
.nav>li>a:focus, .nav>li>a:hover {
    background-color: #9e9e9e33;
}
.nav-tabs>li>a {
    border: none;
}
/* **************************************************************************
*                            PROJECTS -> TOPBAR                             *
***************************************************************************** */

/* **************************************************************************
*                            PROJECTS -> TOPBAR                             *
***************************************************************************** */

#main-content:has(#issues-list-container) {
    padding-right: 0px;
}
#main-content:has(#issues-list-container) .container-fluid {
    background: transparent;
}

/* Team MDL Badge */
.project-members-wrapper .mdl-badge[data-badge]::after {
	top: -8px;
	right: -5px;
	font-size: 8px;
	width: 18px;
	height: 18px;	
	background: none;
	color: var(--color-tertiary); 
	opacity: 0.7;
}

/* Board view tabs navs*/
#view-tabs li.active a {
	background: none;
	border: none; 
	border-bottom: 2px solid #337ab7;
	color: var(--color-secondary) !important;
}

/* projects lists */
.project-options .mdl-button--icon {
	min-height: 22px;
	min-width: 22px;
	height: 22px;
	width: 22px;
}

/*******************************************/
/*              FILTERS                  */
/*******************************************/

#filter-dropdown-menu .filter-submenu-left:hover,
.filter-submenu-left.active {
    color: var(--color-primary);
    cursor: pointer;
}
#filter-dropdown-menu .filter-submenu-left.active .filter-phase-title,
.phase-toggle[aria-expanded="true"] {
    color: var(--color-primary);
    font-weight: 600;
}
#searched-filters .filter-chip-text {
    height: auto;
    line-height: 21px;
    opacity: 0.8;
}
#searched-filters .filter-chip-text:hover {
    opacity: 1;
}
#searched-filters .cancel-filter-value {
    line-height: 1.45;
}
#searched-filters #clear-btn {
    font-size: 14px;
}
#searched-filters .custom-separator li {
    height: 26px;
    line-height: 30px;
}
#searched-filters .separator-btn {
    text-transform: lowercase;
    padding: 0px 0px 0px 5px;
    font-weight: lighter;
    margin: 0px 4px;
    min-width: 50px;
}
#clear-btn:hover,
#save-filter-btn:hover {
    text-decoration: underline;
}
.applied-filter-values {
    display: contents !important;
}
#searched-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: fit-content;
    position: sticky;
    z-index: 1;
    left: 0;
    row-gap: 10px;
}
.dashboard .chart-container {
    width: 100%;
    height: 100%;
}
.dashboard .empty-chart-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
}
.filtered-dashboard .standard-chart {
    filter: blur(2px);
    pointer-events: none;
}
#filter-dropdown-menu .filter-submenu .filed-filter-dropdown .between-inputs-block {
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
}
#filter-dropdown-menu .filter-phase-title {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}
.card-age {
    color: #000000;
}
.issue-card-edit .card-age {
    color: white;
}

#issue-table_wrapper #issue-table_filter {
    margin-bottom: 10px;
}

/* **************************************************************************
*                            SORTING, SPRINT DROPDOWN                       *
***************************************************************************** */

#sort-dropdown-menu .sort-submenu-left:hover,
.sort-submenu-left.active {
    color: var(--color-primary);
}
#sort-dropdown-menu .sort-submenu-left.active .sort-phase-title {
    color: var(--color-primary);
    font-weight: 600;
}
#searched-sorts .sort-applied-chip:hover {
    opacity: 1;
}
#clear-sort-btn:hover {
    text-decoration: underline;
}
.mdl-menu__item.sprint-dropdown-name:hover {
    background-color: #F0F9FF !important;
}

.team-member-edit:has(.is-visible) .edit-option-btn {
    background-color: var(--bg-section);
}

/* **************************************************************************
*               FILTER & SORTING -> PLUGIN CSS OVERRIDES                    *
***************************************************************************** */

/* Filter and Sort style override */
.panel-heading:has(+ .panel-collapse.collapse.in) .sort-field-title,
.panel-heading:has(+ .panel-collapse.collapsing) .sort-field-title,
.panel-heading:has(+ .panel-collapse.collapse.in) .filter-field-title,
.panel-heading:has(+ .panel-collapse.collapsing) .filter-field-title,
.dept-name:has(+ .panel-collapse.collapsing) .dept-title,
.dept-name:has(+ .panel-collapse.collapse.in) .dept-title {
    color: var(--color-secondary);
    font-weight: 600;
    transition: color 0.3s ease;
}
.panel-heading:has(+ .panel-collapse.collapse.in) i.fas.fa-angle-down,
.panel-heading:has(+ .panel-collapse.collapsing) i.fas.fa-angle-down,
.team-member-edit:has(.is-visible) i.fas.fa-angle-down,
.user-profile-section:has(.is-visible) i.fas.fa-angle-down,
.dept-name:has(+ .panel-collapse.collapsing) i.fas.fa-angle-down,
.dept-name:has(+ .panel-collapse.collapse.in) i.fas.fa-angle-down,
.user-type:has(+ .user-type-group.collapsed) .fa-caret-up {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
    color: var(--color-secondary);
}
.sort-submenu .mdl-radio.is-checked .mdl-radio__outer-circle,
.sort-submenu .mdl-radio__outer-circle,
.filter-submenu .mdl-radio.is-checked .mdl-radio__outer-circle,
.filter-submenu .mdl-radio__outer-circle,
.filter-submenu .mdl-checkbox.is-checked .mdl-checkbox__box-outline,
.filter-submenu .mdl-checkbox .mdl-checkbox__box-outline,
.sprint-dropdown-menu .mdl-checkbox.is-checked .mdl-checkbox__box-outline,
.sprint-dropdown-menu .mdl-checkbox .mdl-checkbox__box-outline,
.mdl-radio.is-checked .mdl-radio__outer-circle,
.mdl-radio__outer-circle,
.mdl-checkbox.is-checked .mdl-checkbox__box-outline,
.mdl-checkbox .mdl-checkbox__box-outline {
    border: 2px solid var(--color-primary);
}
.sort-submenu .mdl-radio.is-checked .mdl-radio__inner-circle,
.sort-submenu .mdl-radio__ripple-container .mdl-ripple,
.filter-submenu .mdl-radio.is-checked .mdl-radio__inner-circle,
.filter-submenu .mdl-radio__ripple-container .mdl-ripple,
.filter-submenu .mdl-checkbox__ripple-container .mdl-ripple,
.filter-submenu .mdl-checkbox.is-checked .mdl-checkbox__tick-outline,
.sprint-dropdown-menu .mdl-checkbox__ripple-container .mdl-ripple,
.sprint-dropdown-menu .mdl-checkbox.is-checked .mdl-checkbox__tick-outline,
.mdl-radio.is-checked .mdl-radio__inner-circle,
.mdl-radio__ripple-container .mdl-ripple,
.mdl-checkbox__ripple-container .mdl-ripple,
.mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
    background: var(--color-primary);
}
.filter-submenu .filter-type:has(.mdl-radio.is-checked) .apply-filter {
    opacity: 1;
}

.mdl-menu__item.add-items-menu:hover,
.mdl-menu__item.add-items-menu:hover .material-icons,
.mdl-menu__item.sprints-dropdown-list:hover,
#column-context-menu .column-options:hover {
    color: #0B7BCF !important;
    background-color: #F0F9FF !important;
}

/* **************************************************************************
*                   PHASE NAME DESCRIPTION TOOLTIP                           *
***************************************************************************** */

.phase-desc-tooltip .tooltip-inner table {
	background: none;
}
.phase-desc-tooltip .tooltip-inner span,
.phase-desc-tooltip .tooltip-inner p,
.phase-desc-tooltip .tooltip-inner p font,
.phase-desc-tooltip .tooltip-inner strong {
	color: white !important;
	margin: 0;
}
.phase-desc-tooltip .tooltip-inner strong {
    margin: 0;
}

/* **************************************************************************
*                                    LOGIN                                    *
***************************************************************************** */

.or-content {
    text-align: center;
    border-bottom: 1px solid #ccc;
    line-height: 0.1em;
    margin: 35px auto 20px auto;
    opacity: 0.6;
}
.or-content span {
    color: #25383c !important;
    background: white;
    opacity: 0.7;
    padding: 0 10px;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: 0.2px;
}
#login-form input:-webkit-autofill,
#login-form input:-webkit-autofill:hover,
#login-form input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    box-shadow: 0 0 0px 1000px white inset;
}
#login-form input:-moz-autofill {
    box-shadow: 0 0 0 1000px white inset;
    color: #000 !important;
}

/* **************************************************************************
*                             xxl MODAL                                     *
***************************************************************************** */

.xxl-modal-dialog {
    /* width: 70%; */
    margin: 0px auto;
    margin-right: 0px;
    height: 100%;
    overflow: auto;
}
.xxl-modal-content {
	height: 100%;
	border-radius: 0;
}
.xxl-modal-content .modal-header {
   /* background: #f48fb1;
    padding: 10px 10px 10px 15px;
    background: #262f3d !important; */
	color: black;
	font-size: 1.4em;
	position: sticky;
	top: 0;
	z-index: 1000;
	border: none;
}
.xxl-modal-content .modal-title {
    font-weight: 400;
    font-size: 1.4em;
    letter-spacing: .4px;
}

/* **************************************************************************
*                                MODAL                                      *
***************************************************************************** */

.modal .modal-body .row-eq-height {
    min-height: 100vh;
    max-height: 100%;
}

.modal .toolbar-btns {
    background:var(--bg-secondary);
}
.modal-body {
	padding: 0px 15px;
}
.modal-footer { border: 0px; }
.modal-header { border: 0px; }
.modal-close-icon {
	position: absolute;
	top: 0;
	right: 0px;
	z-index: 1000;
	padding: 5px 0px 0px 0px;
}

/* **************************************************************************
*                            PREVIEW MODAL                                  *
***************************************************************************** */

.preview-modal .modal-content {
    max-height: calc(100vh - 60px);
    border-radius: 15px;
    background-color: #262f3df7;
}
.preview-modal .modal-body {
    max-height: calc(100vh - 124px);
    display: flex;
    width: 100%;
    height: calc(100vh - 124px);
}
.preview-modal .modal-body img{
	object-fit: contain;
    width: 100%;
    height: 100%;
}
.preview-modal .modal-header .close{
	color: #fff;

}
.preview-modal .modal-title{
	display: flex;
}
.preview-modal .modal-title .modal-title-icon{
	width: 1.5em;
    height: 1.5em;
    border-radius: 0.2em;
}
.preview-modal .modal-title .modal-title-text{
	display: grid;
    margin-left: 0.5em;
    color: #fff;
}
.preview-modal .modal-title .modal-title-name{
	font-size: 0.6em;
    font-weight: 600;
}
.preview-modal .modal-title .modal-title-extension,
.preview-modal .modal-title .modal-title-filename{
    font-size: 0.5em;
}
.preview-modal .modal-footer{
	position: absolute;
	bottom: 0em;
	right: 0em;
}

/* **************************************************************************
*                               MIDDLE MODAL                                *
***************************************************************************** */

.middle-modal .modal-close-icon {
    top: 10px;
    right: 28px;
    transition: opacity .3s;
}
.middle-modal .modal-close-icon:hover {
    opacity: 0.5;
}
.middle-modal .modal-content {
    max-height: calc(100vh - 60px);
    border-radius: 15px;
}
.modal-backdrop.in {
    opacity: 0.7;
}
.middle-modal .modal-content.custom-scrollbar {
    overflow: overlay;
}
.middle-modal .modal-body {
    max-height: calc(100vh - 60px);
    /* overflow: hidden; */
}
.middle-modal .modal-body:has(.issue-center-content) {
    overflow: hidden;
}
.middle-modal.modal .issue-center-content,
.middle-modal.modal .issue-phase-list .phase-nav {
    max-height: calc(100vh - 60px);
    overflow-y: auto;
}

/* **************************************************************************
*                                    NAV BAR                                *
***************************************************************************** */

.navbar:hover {
	background: #29b6f6;
}
.navbar-brand {
	padding: 15px 8px;
}
.navbar .logo .dept-name {
	letter-spacing: .5px;
	text-shadow: 0px 1px 0px black;
	font-size: 1.5em;
}
.navbar {
	margin-bottom: 0px;
	/*background: #34495e;*/
	background: #29b6f6;
	border-color: #29b6f6;
 }
.navbar-inverse .navbar-nav>li>a {
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 100;
}
.navbar-inverse .navbar-brand {
	color: white;
}
.navbar .logo {
	width: 240px;
}
.navbar-brand-logo {
	width: 25%;
}
.navbar .logo img {
    display:inline;
    margin-top: -5px;
    height: 32px;
}
.logo-text {
    color: #2ecc71;
    font-family: 'Proxima', sans-serif;
}

.logout-button {
	color: #d9534f;
    background: none;
    border: none;
}

/* **************************************************************************
*                               BREADCRUMBS                                 *
***************************************************************************** */

.breadcrumb-row {
	background: white;
	padding: 8px 0px;
	text-transform: uppercase;
}
.breadcrumb {
    padding: 0px;
    margin-bottom: 0px;
    background: white;
    font-size: 11px;
}
.breadcrumb a {
	color: #7f8c8d;
}
.breadcrumb .active {
	color: #c6c6c6;
}
.breadcrumb > li + li::before {
    color: #ccc;
    content: ">";
    font-size: 1.2em;
    vertical-align: middle;
}

/* **************************************************************************
*                               VERTICAL TAB                                *
***************************************************************************** */

div.bhoechie-tab-container {
    z-index: 10;
    background-color: #ffffff;
    padding: 0 !important;
    margin-top: 20px;
    margin-left: 50px;
    margin-bottom: 70px;
    /*
    border-radius: 4px;
    -moz-border-radius: 4px;
    border:1px solid #ddd;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);*/
    background-clip: padding-box;
    opacity: 0.97;
    filter: alpha(opacity=97);
}
div.bhoechie-tab-menu {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
}
div.bhoechie-tab-menu div.list-group {
    margin-bottom: 0;
}
div.bhoechie-tab-menu div.list-group>a {
    margin-bottom: 0;
}
div.bhoechie-tab-menu div.list-group>a .glyphicon,
div.bhoechie-tab-menu div.list-group>a .fa {
    color: #5A55A3;
}
div.bhoechie-tab-menu div.list-group>a:first-child {
    border-top-right-radius: 0;
    -moz-border-top-right-radius: 0;
}
div.bhoechie-tab-menu div.list-group>a:last-child {
    border-bottom-right-radius: 0;
    -moz-border-bottom-right-radius: 0;
}
div.bhoechie-tab-menu div.list-group>a.active,
div.bhoechie-tab-menu div.list-group>a.active .glyphicon,
div.bhoechie-tab-menu div.list-group>a.active .fa {
    background-color: #5A55A3;
    background-image: #5A55A3;
    color: #ffffff;
}
div.bhoechie-tab-menu div.list-group>a.active:after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    margin-top: -13px;
    border-left: 0;
    border-bottom: 13px solid transparent;
    border-top: 13px solid transparent;
    border-left: 10px solid #5A55A3;
}
div.bhoechie-tab-content {
    background-color: #ffffff;
    /* border: 1px solid #eeeeee; */
    padding-left: 20px;
    padding-top: 10px;
}
div.bhoechie-tab div.bhoechie-tab-content:not(.active) {
    display: none;
}

/* **************************************************************************
*                              MANAGE -> DEPT                               *
***************************************************************************** */

#view-dept{
	.mdl-card {
		min-height: 150px;
		width: 230px;
		min-width: 230px;
	}
	.mdl-card__supporting-text {
		line-height: 1.5em;
		height: 3em;       /* height is 2x line-height, so two lines will display */
		overflow: hidden;  /* prevents extra lines from being visible */
	}
	.mdl-card__actions {
		padding: 12px;
	}
}
.dept-menu { 
	padding-right: 5px;
	position: absolute;
	right: 0;
}
.dept-admin-star {
	position: absolute;
	color: lightyellow;
	margin-left: -8px;
	margin-top: -5px;
}
.dept-team,
.project-team {
    .select2-container--default .select2-selection--multiple {
        height: 150px;
        background-color: var(--bg-white);
        border: 1px solid var(--border-tertiary);
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        font-size: 1em;
    }
}

/* ************************************************************************
*                           MANAGE -> WORKFLOW                            *
************************************************************************ */

table#boards-table {
    box-shadow: none;
}
table#boards-table tr {
    border-bottom: 15px solid var(--bg-secondary);
}
table#boards-table .mdl-button {
    min-width: 30px;
    padding: 0px 0px;
}
#new-workflow-name {
	border:0px;
	border-bottom:1px solid rgba(0,0,0,.12);
	width: 50%;
	margin-left: 25%;
	text-align: center;
}
#new-workflow-name:focus {
	outline: none;
}
#new-workflow-name::placeholder{
	font-size: 15px;
	color: lightgrey;
}

/**********************************/
/*     WORKFLOW > PHASE > FORM    */
/**********************************/
/* .phasefield-form .mdl-textfield { width: 85% } */
.phasefield-form .input-group { width: 100%; }
/* .phasefield-form .mdl-radio__label { color: grey; font-weight: 200; }
.phasefield-form .checkbox {
	color: gray;
	font-size: 1.2em;
	padding-left: 20px;
	padding-bottom: 5px;
} */
.mdl-checkbox__label, .mdl-radio__label {
    color: var(--color-secondary);
}

/*******************************************/
/*     WORKFLOW > PHASE > FORM > RECORD    */
/*******************************************/
.phase-field-record .selection {
        padding: 50px 0px;
        font-size: 1.6em;
}
.phase-field-record .select2-container--default .select2-selection--single {
	border: 1px solid lightgrey;
 }
.phase-field-record .select-options-row { display: none; }
.phase-field-record .mdl-textfield { max-width: 85% }
.phase-field-record .input-group { width: 85%; }

/* List labels to be hidden on click */
.phase-field-record ol li label,
.phase-field-record ol li .mdl-textfield--floating-label.is-focused .mdl-textfield__label,
.phase-field-record ol li .mdl-textfield--floating-label.is-dirty .mdl-textfield__label,
.phase-field-record ol li .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
        display: none;
}

/*************************/
/* JQ VALIDATE ERROR MSGS*/
/*************************/
.error {
	background: lightpink;
}
label.error {
	font-style: italic;
	color: crimson;
	margin: 10px 0px;
	background: none;
}

/***********************/
/* FOOTER Classes   */
/***********************/
.footer {
	font-size: .8em;
	/* margin-top: 50px; */
	margin-bottom: 0px;
	background: #455a64;
	color: #cfd8dc;
	padding:10px 5px;
	text-align: center;
}

/***********************/
/* SEARCH BAR Classes  */
/***********************/
.search-highlight{
	background: lightyellow;
	font-weight: bold;
}
.clear-search {
	font-size:12px;
}
.search-bar .panel-info>.panel-heading {
    color: white;
    background-color: #64b5f6;
    border: none;
    padding: 0px 15px;
}
.search-bar .well {
	background: white;
	border: none;
}

/***********************/
/* AJAX Loader Classes */
/***********************/
#tmp-placeholder {
	display:none;
}
#loading {
	position: absolute;
	top: 0;
	left: 0;
	background: black;
	color: white;
	opacity: 0.7;
	width: 100%;
	height: 100%;
	padding-top: 20%;
	display: none;
}

/*******************************************/
/*         PROJECT GROUPS & LISTS           */
/*******************************************/

.project-group {
	.rotate {
		transition: transform 0.3s;
	}
	.rotate-down {
		transform: rotate(90deg);
	}
}

/***********************/
/* ISSUES              */
/***********************/

.issue-card .issue-card-title { color: var(--color-secondary); font-size: 1.4em; }
.issue-card {
    width: 100%;
    margin: 20px auto;
    border-radius: 6px;
    border: 0.5px solid var(--border-tertiary);
    box-shadow: 0px 0px 5px 0px #3232691A;
    padding: 12px 14px 12px 14px;
}
.issue-card-view {
    background: var(--bg-white);
}
.issue-card-view:hover {
    border: 1px solid var(--border-tertiary);
}
.issue-card .issue-card-topbar .label {
    border: 1px solid var(--border-section);
}
.issue-card-edit { background: var(--bg-tertiary); }
.issue-card-edit:hover { border: 1px solid var(--border-tertiary); }

/*******************************************/
/*         SUBMITTER USER                 */
/*******************************************/

.manage{
    opacity: 1 !important;
}
body,
.main-page-container,
.main-page-row,
.teams-bar,
.projects-bar,
.center-content {
    height: 100%;
    overflow: auto;
}
.custom-scrollbar.projects-bar::-webkit-scrollbar-track-piece {
    background: #ecedf0;
}
.custom-scrollbar.projects-bar::-webkit-scrollbar-thumb:horizontal,
.custom-scrollbar.projects-bar::-webkit-scrollbar-thumb:vertical {
    background: #bbbfc5;
}

/***********************************/
/*           TEAMS BAR             */
/***********************************/

.team-selected .team-icon,
.teams-bar #org-logo {
	border-radius: 4px;
	height: 44px;
	width: 44px;
}
.team-element, .team-element a { color: white !important; }
.team-selected { border-top: none; }
.team-selected .team-icon {
	background: var(--bg-gradient-secondary-100);
	border-radius: 5px;
	border: 1px solid var(--border-section);
	display: inline-table;
}

.teams-bar .mdl-menu__outline { background: var(--bg-white); }
.teams-bar .mdl-menu__item:hover { background: var(--bg-primary); }
.teams-bar .mdl-menu__item a { color: #29b6f6; font-size: 0.95em; opacity: 0.7;}

/***********************************/
/*           PROJECTS BAR          */
/***********************************/

.projects-bar { border-right: 1px solid var(--border-section); }
.project-element a.get-inpage { 	font-size: 1.25em;
			font-weight: 400;
			line-height: 120% }
.project-selected { background: var(--bg-section) !important; border-radius: 4px; }
.project-selected a {color: var(--color-secondary) !important; }

/***********************************/
/*    3. CENTER CONTENT            */
/***********************************/

/*----------------------------------*/
/*     3a. center content > HEADER  */
/*----------------------------------*/
.center-content .project-label,
.submitter-form-header .project-label { background: var(--bg-primary); }

/*----------------------------------*/
/*     3b. center content > TABS   */
/*----------------------------------*/
.center-content .project-tabs {
	border-top: 1px solid var(--border-section);
	border-bottom: 1px solid var(--border-section);
}
.center-content .project-tabs .active a i{ color: var(--color-primary); }
.nav-tabs { border: none; }

/*----------------------------------*/
/*     3c. center content > PHASE   */
/*----------------------------------*/
.center-content .phase-row .phase-name  {
	background: var(--bg-section);
	border: 0.5px solid var(--border-section);
	border-radius: 6px;
	color: var(--color-secondary);
	font-size: 1.25em;
	height: 50px;
	align-content: center;
}
.zero-xlead {
    padding: 4px !important;
    transform: rotate(180deg);
    width: 50px;
    height: 100% !important;
}
a,
.lead,
.xlead,
.xxlead {
	color: var(--color-tertiary) !important;
}
.note-editor {
    background: var(--bg-white);
    color: var(--color-secondary);
    border: 1px solid var(--border-tertiary) !important;
}

/* ************************************************************************** */
/*   RICH TEXT EDITOR & DISPLAY AREAS - HEADER SIZE           */
/* ************************************************************************** */
/* These rules ensure H1-H6 are distinct and hierarchical in rich text areas */
.note-editable blockquote,
.note-dropdown-menu blockquote {
    font-size: 1.1em;
}

.note-editable h1,
.note-dropdown-menu h1 {
    font-size: 2.0em;
    line-height: 1.5;
}

.note-editable h2,
.note-dropdown-menu h2 {
    font-size: 1.5em;
    line-height: 1.5;
}

.note-editable h3,
.note-dropdown-menu h3 {
    font-size: 1.25em;
    line-height: 1.5;
}
.note-editable h4,
.note-dropdown-menu h4 {
    font-size: 1.1em;
    line-height: 1.5;
}

.note-editable h5,
.note-dropdown-menu h5 {
    font-size: 1.0em;
    line-height: 1.5;
}

.note-editable h6,
.note-dropdown-menu h6 {
    font-size: 0.9em;
    line-height: 1.5;
}

/*******************************************/
/*         NEW PROJECT CREATION            */
/*******************************************/

#basic-details-tab {
    .mdl-switch .mdl-switch__track,
    .mdl-switch.is-checked .mdl-switch__track {
        height: 19px;
        width: 35px;
        top: 2px;
    }
    .mdl-switch .mdl-switch__track {
        background: var(--color-tertiary);
    }
    .mdl-switch .mdl-switch__thumb {
        margin-left: 2px;
    }
    .mdl-switch__ripple-container .mdl-ripple,
    .mdl-switch.is-checked .mdl-switch__track {
        background: var(--color-primary);
    }
    .mdl-switch.is-checked .mdl-switch__thumb {
        background: white;
    }
    .mdl-switch .mdl-switch__thumb,
    .mdl-switch__ripple-container .mdl-ripple,
    .mdl-switch.is-checked .mdl-switch__thumb {
        height: 15px;
        width: 15px;
        top: 4px;
    }
    .image-col {
        background: linear-gradient(to bottom, #82B2FF20 0%, #82B2FF60 50%, #82B2FF 100%);
    }

    .view-slider .slide {
        animation: slideShow 16s infinite;
    }

    /* Slide show the images */
    .view-slider .slide:nth-child(1) { animation-delay: 0s; }
    .view-slider .slide:nth-child(2) { animation-delay: 4s; }
    .view-slider .slide:nth-child(3) { animation-delay: 8s; }
    .view-slider .slide:nth-child(4) { animation-delay: 12s; }

    .default-workflow {
        height: clamp(300px, calc(100vh - 400px), 50vh);
    }

    .select2-container--default .select2-selection--multiple,
    .select2-container--default.select2-container--focus .select2-selection--multiple {
        height: 150px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        border: 1px solid var(--border-tertiary);
    }
}

/* Fade animation */
@keyframes slideShow {
    0%   { opacity: 0; }
    5%   { opacity: 1; }
    25%  { opacity: 1; }
    30%  { opacity: 0; }
    100% { opacity: 0; }
}

#confirm-modal .modal-content:has(.add-new-project)  .modal-header {
    display: block !important;
}
#ajax-modal .modal-content:has(.add-new-project) .modal-header{
    display: none;
}

/* Override focus outline (this happens in chrome new version)*/
a:focus {
    outline: none;
}

/* ****************************************************** */
/*   RICH TEXT EDITOR - TOOLBAR STYLES OVERRIDE           */
/* ****************************************************** */
.note-editor {
    overflow: hidden;
}
.note-editor .panel-heading.note-toolbar {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-tertiary);

}
.note-editor .note-btn-group .note-btn,
.note-editor .note-btn-group.open .note-btn {
    background: var(--bg-secondary);
    color: var(--color-secondary);
    border: 1px solid var(--border-tertiary);
}
.note-dropdown-menu {
    background: var(--bg-secondary);
    color: var(--color-secondary);
}
.panel-default>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: var(--border-tertiary);
}
.panel-default>.panel-heading {
    border-color: var(--border-tertiary);
}

/* ****************************************************** */
/*                SELECT2 DROPDOWN OVERRIDES         */
/* ****************************************************** */
.select2-container--open .select2-dropdown--below {
    background: var(--bg-secondary);
    color: var(--color-tertiary);
    border-color: var(--border-tertiary);
}
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-results__option--selectable {
    border-color: var(--border-tertiary);
    background: var(--bg-secondary);
    outline: none;
    color: var(--color-secondary);
}
.select2-search--dropdown {
    padding: 0;
}
/* ****************************************************** */
/*   SELECT2 DROPDOWN SCROLLBAR OVERRIDES           */
/* ****************************************************** */
.select2-results__options::-webkit-scrollbar {
  width: 8px;
}
.select2-results__options::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}
.select2-results__options::-webkit-scrollbar-thumb {
  background: var(--border-tertiary);
  border-radius: 8px;
}
.select2-results__options::-webkit-scrollbar-thumb:hover {
  background: var(--border-secondary);
}

/* Saved filters */
.saved-filter-row:hover {
    background: var(--bg-section) !important;
    border-radius: 4px;
}
.modal-body kbd {
    word-wrap: break-word;
}