/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
}


.card-body .table-responsive .dataTables_wrapper .row {
    margin-left: 0px;
    margin-right: 0px;
}

.typeahead-group {
    padding-bottom: 20px;
}

/*.twitter-typeahead {
    display: block !important;
}*/

.twitter-typeahead {
    flex: 1 0 auto;
}

.Typeahead-selectable {
    cursor: pointer;
}

.tt-suggestion.tt-cursor {
    color: #fff;
    background-color: #5ba8e0;
    box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(156,39,176,.4);
}

.typeahead-button {
    vertical-align: top;
    margin-left: 5px;
}

.twitter-typeahead-wrapper {
    display: flex;
}

@media (min-width: 1200px) {
    .container {
        max-width: 100%;
    }
}

.top-buffer {
    margin-top: 15px;
}

.btn-green {
    color: #fff;
    background-color: #6ebe46;
    border-color: #6ebe46;
}

    .btn-green:hover {
        color: #fff;
        background-color: #0069d9;
        border-color: #0062cc;
    }

    .btn-green:focus, .btn-green.focus {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
    }

    .btn-green.disabled, .btn-green:disabled {
        color: #fff;
        background-color: #6ebe46;
        border-color: #6ebe46;
    }

    .btn-green:not(:disabled):not(.disabled):active, .btn-green:not(:disabled):not(.disabled).active,
    .show > .btn-green.dropdown-toggle {
        color: #fff;
        background-color: #0062cc;
        border-color: #005cbf;
    }

        .btn-green:not(:disabled):not(.disabled):active:focus, .btn-green:not(:disabled):not(.disabled).active:focus,
        .show > .btn-green.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
        }

/*.task-border-collapse-unset-tr {
    border-collapse: separate !important;
}*/

.task-overdue-tr {
    border-left: 5px solid #ed2553;
}

.task-personal-tr {
    border-left: 5px solid #2587ed;
}

.task-due-today-tr {
    border-left: 5px solid #25ed63;
}

.is-urgent-tr {
    color: #dc3545;
}

.task-all-other-tr {
    border-left: 5px solid #ffffff;
}

.checklist-item {
    cursor: move;
}

.checklist-item:hover {
    background-color: rgba(9,30,66,.04);
}

.checklist-item .remove-checklist-item {
    visibility: hidden !important;
}

.checklist-item:hover .remove-checklist-item {
    visibility: visible !important;
}

.checklist-item .edit-checklist-item {
    visibility: hidden !important;
}

.checklist-item:hover .edit-checklist-item {
    visibility: visible !important;
}

.checklist-item-placeholder {
    background-color: rgb(0, 150, 136); /* #009688 */
    opacity: 0.2;
}

.checklist-item-placeholder .checkbox-decorator {
    display: none;
}

.checklist-heading {
    margin-bottom: 1.5rem;
}

.checkbox-inline, .checkbox label, .is-focused .checkbox-inline, .is-focused .checkbox label, .is-focused .radio-inline, .is-focused .radio label, .is-focused .switch label, .radio-inline, .radio label, .switch label {
    color: rgba(0,0,0,0.8);
}

/* Chips
    https://www.w3schools.com/howto/howto_css_contact_chips.asp
-------------------------------------------------- */

.chip {
    display: inline-block;
    padding: 0 25px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    border-radius: 25px;
    background-color: #f1f1f1;
    margin: 5px;
}

    .chip img {
        float: left;
        margin: 0 10px 0 -25px;
        height: 50px;
        width: 50px;
        border-radius: 50%;
    }

.closebtn {
    padding-left: 10px;
    color: #888;
    font-weight: bold;
    float: right;
    font-size: 20px;
    cursor: pointer;
}

    .closebtn:hover {
        color: #000;
    }

.copyable:hover {
    cursor: pointer;
    color: #6ebe46;
}

.copyable:active {
    user-select: all;
}

/* Chips end */

/* https://stackoverflow.com/questions/25859255/trying-to-make-bootstrap-modal-wider */
@media (min-width: 768px) {
    .modal-xl {
        width: 90%;
        max-width: 1200px;
    }
}

@media (min-width: 768px) {
    .modal-xxl {
        width: 90%;
        max-width: 1700px;
    }
}

/* Wider modal end */

.badge-green {
    color: #fff;
    background-color: #6ebe46;
}

.badge-gray {
    color: #fff;
    background-color: #969696;
}

.badge-orange {
    color: #fff;
    background-color: #ff9800;
}

/* https://mdbootstrap.com/docs/b4/jquery/tables/scroll/ */

.my-custom-scrollbar {
    position: relative;
    height: 250px;
    overflow: auto;
}

.table-wrapper-scroll-y {
    display: block;
}

/* Vertical scroll end */

/* Pure CSS Material Checkbox - https://codepen.io/finnhvman/pen/zpygBB */

.pure-material-checkbox {
    z-index: 0;
    position: relative;
    display: inline-block;
    color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.87);
    font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
    font-size: 16px;
    line-height: 1.5;
}

    /* Input */
    .pure-material-checkbox > input {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        z-index: -1;
        position: absolute;
        left: -10px;
        top: -8px;
        display: block;
        margin: 0;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.6);
        box-shadow: none;
        outline: none;
        opacity: 0;
        transform: scale(1);
        pointer-events: none;
        transition: opacity 0.3s, transform 0.2s;
    }

    /* Span */
    .pure-material-checkbox > span {
        display: inline-block;
        width: 100%;
        cursor: pointer;
    }

        /* Box */
        .pure-material-checkbox > span::before {
            content: "";
            display: inline-block;
            box-sizing: border-box;
            margin: 3px 11px 3px 1px;
            border: solid 2px; /* Safari */
            border-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.6);
            border-radius: 2px;
            width: 18px;
            height: 18px;
            /*vertical-align: top;*/
            transition: border-color 0.2s, background-color 0.2s;
        }

        /* Just for checklist item */
        .checklist-item .pure-material-checkbox > span::before {
            vertical-align: top;
        }

        /* Checkmark */
        .pure-material-checkbox > span::after {
            content: "";
            display: block;
            position: absolute;
            top: 3px;
            left: 1px;
            width: 12px;
            height: 5px;
            border: solid 2px transparent;
            border-right: none;
            border-top: none;
            transform: translate(3px, 4px) rotate(-45deg);
        }

    /* Checked, Indeterminate */
    .pure-material-checkbox > input:checked,
    .pure-material-checkbox > input:indeterminate {
        background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
    }

        .pure-material-checkbox > input:checked + span::before,
        .pure-material-checkbox > input:indeterminate + span::before {
            border-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
            background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
        }

        .pure-material-checkbox > input:checked + span::after,
        .pure-material-checkbox > input:indeterminate + span::after {
            border-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
        }

        .pure-material-checkbox > input:indeterminate + span::after {
            border-left: none;
            transform: translate(4px, 3px);
        }

    /* Hover, Focus */
    .pure-material-checkbox:hover > input {
        opacity: 0.04;
    }

    .pure-material-checkbox > input:focus {
        opacity: 0.12;
    }

    .pure-material-checkbox:hover > input:focus {
        opacity: 0.16;
    }

    /* Active */
    .pure-material-checkbox > input:active {
        opacity: 1;
        transform: scale(0);
        transition: transform 0s, opacity 0s;
    }

        .pure-material-checkbox > input:active + span::before {
            border-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
        }

    .pure-material-checkbox > input:checked:active + span::before {
        border-color: transparent;
        background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.6);
    }

    /* Disabled */
    .pure-material-checkbox > input:disabled {
        opacity: 0;
    }

        .pure-material-checkbox > input:disabled + span {
            color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
            cursor: initial;
        }

            .pure-material-checkbox > input:disabled + span::before {
                border-color: currentColor;
            }

    .pure-material-checkbox > input:checked:disabled + span::before,
    .pure-material-checkbox > input:indeterminate:disabled + span::before {
        border-color: transparent;
        background-color: currentColor;
    }

/* Pure CSS Material Checkbox end - https://codepen.io/finnhvman/pen/zpygBB */

/* nav typeahead client search */
.nav-item > .twitter-typeahead-wrapper > .bmd-form-group {
    display: inline;
    padding-top: 0;
}

.nav-item > .twitter-typeahead-wrapper {
    margin-right: 15px;
}

    .nav-item > .twitter-typeahead-wrapper i {
        padding-top: 7px;
        padding-right: 5px;
    }

    .nav-item > .twitter-typeahead-wrapper input {
        padding-top: 7px;
        padding-right: 5px;
        width: 250px;
    }

#dashboard-department-tasks-card > .card-header > .bmd-form-group {
    display: inline;
    padding-top: 0;
}

#client-tasks-table-wrap {
    height: 250px;
    overflow-y: auto;
}

/* Comment triangle */
/* http://jsfiddle.net/Athk7/ */
.comment-cell {
    position: absolute;
    top: 0px;
    right: 0px;
}

    .comment-cell:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        display: block;
        border-left: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-top: 20px solid #6ebe46;
        cursor: pointer;
    }

.choices {
    margin-bottom: 0px !important;
}

.choices-330 {
    width: 330px;
}

.choices-300 {
    width: 300px;
}

.choices-360 {
    width: 360px;
}

.choices-270 {
    width: 270px;
}

.choices-210 {
    width: 210px;
}

.choices-170 {
    width: 170px;
}

#department-tasks-header {
    display: block;
}

/*.checkbox label {
    font-size: .875rem !important;
}*/

.form-control-tight {
    font-size: .875rem !important;
}

.pure-material-checkbox span {
    font-size: .875rem !important;
}

/* Fullscreen Modal Start */
/* https://stackoverflow.com/questions/18432394/how-to-make-twitter-bootstrap-modal-full-screen */

.modal {
    padding: 0 !important;
    /* override inline padding-right added from js */
}

    .modal .modal-dialog {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .modal .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .modal .modal-body {
        overflow-y: auto;
    }

/* Fullscreen Modal End */

/* Choices Js custom colours START */

.choices__list--multiple .choices__item {
    background-color: #6ebe46 !important;
    border: 1px solid #5a9c3a !important;
}

.choices[data-type*=select-multiple] .choices__button, .choices[data-type*=text] .choices__button {
    border-left: 1px solid #5a9c3a !important;
}

/* Choices Js custom colours END */

.card-table-row {
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 20%), 0 1px 5px 0 rgb(0 0 0 / 12%);
    margin-bottom: 5px;
}

.card-table-row-orange {
    border-left: 3px solid #ff9800;
}

.card-table-row-red {
    border-left: 3px solid #f44336;
}

.card-table-row-gray {
    border-left: 3px solid #969696;
}

.card-table-row-green {
    border-left: 3px solid #6ebe46;
}

.card-table-row-blue {
    border-left: 3px solid #2196f3;
}

@media (min-width: 640px) {
    #todays-tasks-card-col {
        padding-right: 5px;
    }

    #new-tasks-card-col {
        padding-left: 5px;
    }

    #personal-tasks-card-col {
        padding-right: 5px;
    }

    #office-tasks-card-col {
        padding-left: 5px;
    }
}