@import "../../../assets/css/abstracts/custom-variables.scss";
@import "project_details.scss";

.tile-my-projects-component .table-responsive {
    border-top: none;
}

.table-avatar {
	width: 22px;
	position: relative;
	margin-top: -4px;
	border-radius: 150%;
}

.rag-R {
	background-color: $red-600;
}

.rag-A {
	background-color: $orange-500;
}

.rag-G {
	background-color: $green-500;
}

.project-bookmark {
	color: $orange-600;
}

.project-bookmark:hover {
	color: lignten($orange-600, 10%);
}

.task-item .checkbox-inline {
    margin-top: -22px;
}

/* ng-sortable drag and drop */
.as-sortable-placeholder {
    min-height: 20px;
    border: 2px dashed $gray-500;
    border-radius: 5px;
}

/* ng-sortable drag and drop specifically for task cards*/
.tasks-board-scrollable.tasks-board-tasks .as-sortable-placeholder {
    width: calc(100% - 20px) !important;
    margin: 6px 10px;
    border-radius: 8px;
}

/* ng-sortable drag and drop for Task List*/
.task-list-items .as-sortable-placeholder {
    background: $gray-100;
    margin: 5px;
    width: calc(100% - 10px) !important;
}



.as-sortable-drag {
    opacity:.8;
    position: absolute;
    pointer-events: none;
    z-index: 9999;
}

.task-priority-option {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-top: 5px;
    vertical-align: text-bottom;
}

.task-priority-sidestrip {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    z-index: 2;
    border-radius: .25rem 0 0 .25rem;
}

.task-priority-sidestrip .task-drag-area .drag-icon {
    position: absolute;
    top: 50%;
    margin-top: -8px;
}

.task-priority-1 {
    background-color: $green-500;
}

.task-priority-2 {
    background-color: $orange-500;
}

.task-priority-3 {
    background-color: $red-500;
}


.project-component-list-item td {
	vertical-align: middle !important;
}

.project-component-rag {
    border-radius: 50%;
    padding: 4px 8px;
}

.projects-component-title-bar {
    padding: 10px;
    margin: 0 0 10px 0;
    overflow: auto;
    background-color: $gray-300;
}

.projects-component-title {
    font-size: larger;
}

.project-component-services img {
    padding-right: 5px;
}

.alert-full-width {
    width: 100%;
    display: inline-block;
}

.task-drag-area {
    height: 100%;
}

.wysibb-text{
    overflow: auto;
}

/* Tasks Component */

// Hides tasks title on pages component
.my-tasks-component .card-header-overview {
display: none;
}


.tile-my-tasks-component[data-gs-width="1"] .task-item .task-project-name,
.tile-my-tasks-component[data-gs-width="1"] .task-item .task-date {
display: block;
float: none !important;
}


.history_type {
    font-weight: bold;
}

.history_list_item_title {
    font-weight: bold;
}

.history-status {
    font-style: italic;
}

.history-list {
    font-style: italic;
}

.card-wrapper:nth-child(4n+1) {
    clear: both;
}

/* MAKE RIGHTS TABLE SCROLLABLE ON SMALL DEVICES */
.rights-table-wrapper > div {
    overflow-y: auto;
}

/* Spacing on My Tasks component */
.sub-items .task-project-name {
    margin-right: 10px;
}

.collapsable-info-panel .nav-stacked > li.active > a,
.collapsable-info-panel .nav-stacked > li.active > a:hover {
background: $blue-500;
}

.tasks-profile-img {
    width: 25px;
    height: 25px;
}




/* Tasks item styling */
.task-users {
    padding: 6px 12px;
}

.extra-user-count {
    padding: 2px 5px;
    border-radius: 10rem;
    background: $gray-200;
    font-weight: bold;
}

.extra-user-count:hover {
    background: lighten($gray-200, 10%);
    cursor: pointer;
}

.tasks-profile-img {
    width: 25px;
    height: 25px;
}


.cursor-default {
    cursor: default;
}


/* Styles individual task profile images */
.tasks-profile-single {
margin-left: 3px;
margin-bottom: 3px;
display: inline-block;
}


/* Adds a seperator line between the Polls and Surveys in Add modal. */
.add-tasks-wrapper {
    position: relative;
}

.add-tasks-wrapper + .add-tasks-wrapper::after {
content: '';
background: red;
position: absolute;
top: 0;
bottom: 0;
left: -8px;
width: 1px;
}



.projects-file-component .document-list .icons-view .document-item {
        flex: 0 0 25%;
        max-width: 25%;
    }

.drag-container {
    height: 100%;
    position: relative;
}
