html {
    font-size: 88%;
}

body {
    background-color: #f5f5f5;
    font-family: OrkneyRegular,sans-serif;
    overscroll-behavior:none;
}

.preview-card {
    border-radius: 1rem;
    border-top: none;
    border-top-right-radius: 0rem;
    border-bottom-right-radius: 0rem;
    border-right: none;
    height: 100vh;
    background-color: #efefef;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    right: -1000px
}

    .preview-card a {
        text-decoration: none;
        font-size: 38px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

        .preview-card a:hover {
            color: #f1f1f1;
        }

    .preview-card.open {
        display: block;
    }

.log-card {
    border: 1px solid rgba(0,0,0,.125);
    background-color: white !important;
    border-radius: 0.3rem;
}

.log-input {
    position: relative;
    bottom: 5%;
}

.log-message {
    /*background-color: #ceceff !important;*/
    background-color: #186e6266 !important; 
    border-radius: 0.3rem;
    font-size: 12px;
    padding-left: 2% !important;
    padding-right: 2% !important;
}

.log-reply {
    /*background-color: #dedeff !important;*/
    background-color: #0a6e6130;
    border-radius: 0.3rem;
    max-width: 80%;
    white-space: pre-line;
}
.log-audit {
    color: #8d9093!important;
    text-align: right;
    font-style: italic;
}
.log-commit {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    /* badge rounded-pill bg-light text-dark pointer */
}
.log-conversation {
    /* border: 1px solid #cfcfcf; */
    height: 71.6vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.profile-picture {
    border-radius: 50%;
    max-width: 12%;
    padding-left: 0% !important;
    padding-right: 0% !important;
}

.workitem-form {
    border: 1px solid rgba(0,0,0,.125);
    background-color: white !important;
    border-radius: 0.3rem;
}

/* BOOTSTRAP OVERRIDES */

:root {
    --bs-dark: #393e46;
    --bs-dark-rgb: 57, 62, 70;
    --avatar-size: 2rem;
}

a {
    max-width: 100%;
    overflow: hidden;
   }
   
   a:hover .badge {
       overflow: visible;
       white-space: normal;
       overflow-wrap: anywhere;
   }

/* .btn-check:checked+.btn-outline-primary, .btn-outline-primary{
    color: #fff;
    border-color: #209686;
    background-color: #209686;
}
.btn-outline-primary:hover {
    color: #fff;
    background-color: #209686;
    border-color: #209686; 
}*/
.btn-outline-primary {
    color: #209686;
    border-color: #209686;
}
.btn-outline-primary:hover {
    color: #fff;
    background-color: #209686;
    border-color:  #209686;
}
.btn-check:active+.btn-outline-primary, .btn-check:checked+.btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active {
    color: #fff;
    background-color:  #209686;
    border-color: #209686;
}


.btn-primary{
    background-color: #209686;
    border-color: #209686;
}

    .btn-primary:hover {
        color: #fff;
        background-color: #0a6e61;
        border-color: #0a6e61;
    }

    .btn-check:active + .btn-primary:focus, .btn-check:checked + .btn-primary:focus, .btn-primary.active:focus, .btn-primary:active:focus, .show > .btn-primary.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.25rem rgb(10 110 97 / 50%);
    }

    .btn-check:focus + .btn-primary, .btn-primary:focus {
        color: #fff;
        background-color: #0a6e61;
        border-color: #0a6e61;
        box-shadow: 0 0 0 0.25rem rgb(10 110 97 / 50%);
    }

    .btn-check:active + .btn-primary, .btn-check:checked + .btn-primary, .btn-primary.active, .btn-primary:active, .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #075a50;
        border-color: #075a50;
    }

    .text-primary {
        color: #209686;
    }

.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: #6c9d96;
    border-color: #6c9d96;
}

.page-link {
    color: #6c757d;
    border-color: #6c757d;
}

    .page-link:focus {
        color: #6c757d;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgb(108 117 125 / 50%);
    }

    .page-link:hover, .page-link:active {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }



.page-item.active .page-link {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.page-item .page-link:disabled {
    color: #6c757d;
    background-color: transparent;
    pointer-events: none;
    opacity: .65;
}


/* DEFAULT CSS */

.pretty-card {
    border-top: 5px solid #186e62
}

.workitem-sidebar .input-group-text {
    width: 100px;
    justify-content: center;
}

.project-sidebar .input-group-text {
    width: 100px;
    justify-content: center;
}

.workitem-sidebar .offcanvas-title{
    width: 94%;
}

.project-sidebar .offcanvas-title {
    width: 94%;
}

.workitem-sidebar .offcanvas-body{
    padding: 0 5px 0 7px;
    margin-top: 5px;
    overflow-x: hidden;
}
/* NAV BAR CSS */
.navbar-holder {
    background-color: #505762;
}

#logo-holder{
    background-color: #393e46;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link{
    background-color: #186e62;
    font-weight:700;
}

.navbar-footer{
    border-top: 1px solid #fff;
}

.avatar {
    height: var(--avatar-size);
    width: var(--avatar-size);
    text-align: center;
    border-radius: 50%;
    background-color: #186e62;
    border: 1px solid;
    border-color: #fff;
}

    .avatar .initials {
        font-size: calc(var(--avatar-size) * 0.4); /* 50% of parent */
        line-height: 1;
        position: relative;
        top: calc(var(--avatar-size) / 3); /* 25% of parent */
    }
    .last-worked-on{
        background-color: #b9aa3e;
    }

#dashboard-page .avatar {
    margin: 0 -4px;
}

#project-canvas .avatar {
    margin: 0 -4px;
}

#projects-page .avatar {
    margin: 0 -4px;
}

#invoices-page .avatar {
    margin: 0 -4px;
}

@media (min-width: 576px) {
    .min-vh-sm-100 {
        min-height: 100vh !important;
    }

    .w-sm-33{
        width:33% !important;
    }

    .w-sm-66{
        width: 66% !important;
    }
}
@media (min-width: 1081px) {
    .w-lg-33 {
        width: 33% !important;
    }

    .w-lg-66 {
        width: 66% !important;
    }
    .w-lg-50 {
        width: 50% !important;
    }
}
@media (min-width: 720px) {
    .w-md-33 {
        width: 33% !important;
    }

    .w-md-66 {
        width: 66% !important;
    }
    .w-md-50 {
        width: 50% !important;
    }
    .w-md-75 {
        width: 75% !important;
    }
}
@media (min-width: 1200px) {
    .w-xl-33 {
        width: 33% !important;
    }

    .w-xl-66 {
        width: 66% !important;
    }
}

/* MULTISELECT DROPDOWN */
.multi-dropdown {
    min-width: 18rem;
    padding: 5px;
    background-color: #fff;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    z-index: 10;
}

.multi-dropdown .multi-dropdown-options {
    max-height: 30vh;
    overflow: auto;
}

.form-control, input {
    font-size: 0.9rem;
}

/* G INPUTS */
.g-input {
    position: relative;
    box-sizing: border-box;
    display: block;
    width: 100%;
    text-align: left;
    line-height: normal;
}

    .g-input label {
        background: white;
        padding: 3px;
        transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: bottom left;
        color: #adadad;
        font-family: arial;
        position: absolute;
        top: 7px;
        left: 7px;
        z-index: 1;
        cursor: text;
    }

    .g-input input[readonly] {
        background-color: white !important;
        color: #212529;
    }

    .g-input input, .g-input textarea, .g-input select {
        border: 1px solid #ddd;
        display: block;
        padding: 0.5rem 0.8rem;
        border-radius: 3px;
        width: 100%;
        box-sizing: border-box;
    }

    .g-input #cost[readonly] {
        color: #878787;
    }

        .g-input input:focus, .g-input textarea:focus, .g-input select:focus {
            outline: 0;
            border-color: #209686;
        }

            .g-input input:focus + label, .g-input input:not(:placeholder-shown) + label,
            .g-input textarea:focus + label, .g-input textarea:not(:placeholder-shown) + label,
            .g-input select:focus + label, .g-input label.select-option-set {
                transform: translateX(-3px) translateY(-18px);
                font-size: 10px;
                color: #209686;
            }

.order-header{
    cursor: pointer;
}

.payment-info {
    color: #209686;
    font-size: 11px;
}


#legend_div {
    text-align: left;
}

.legend-marker {
    padding: 16px 4px 8px 4px;
    font-size: 0.9rem;
}

.legend-marker-color {
    display: inline-block;
    height: 12px;
    width: 12px;
}

.open-dashboard-item {
    background-color: #20968663;
}

.open-project-item {
    background-color: #20968663;
}

.btn-ex-sm {
    padding: 0.12rem 0.25rem !important;
    font-size: .675rem !important;
    border-radius: 0.2rem !important;
}

.pretty-table {
    font-size: 0.9rem;
}
    .pretty-table th,
    .pretty-table td {
        color: #4e4e4e;
    }

.pretty-modal {
    font-size: 0.9rem;
}

.company-management-table{
    height: 500px;
}

.company-management-card{
    min-height: 500px;
}

.sticky-bottom {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 1020;
}
#work-item-logs, #logs{
    position: absolute;
    right: 14px;
    /* padding-top: 4px; */
    padding-left: 15px !important;
}
#workitem-top-buttons{
    background: white;
}
#message{
    overflow-y: scroll;
    height: 100px;
    resize: none;
}
.log-highlight, .tt-highlight{
    background-color:#fdb5ae!important;
    --bs-table-bg: #fdb5ae;
}

.pointer{
    cursor: pointer;
}
.tti-table-body td{
    padding: 0.3rem;
}
.offcanvas-header{
    padding-bottom: 0px !important;
}
#loading-spinner{
    position: absolute;
    width: 100%;
    height: 110%;
    background: #ffffff8f;
    z-index: 1021;
    top: -45px;
    color: #bbbbbb;
}
::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0);
	border-radius: 10px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar
{
	height: 6px;
    width: 12px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0);
	background-color: #7e7e7e5e;
}
.label-modal {
    top: 73.5px;
    left: 787.5px;
    height: unset;
    width: unset;
    display: none !important;
    position :fixed;
    font-size: 13px !important;
  }
  .add-btn{
    height: 22px;
  }
  .risk-container{
    width: 140px;
    font-size: 15.5px !important;
  }
  .att-round-play-btn
  {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background: white;
    position: relative;
    cursor: pointer;
  }
  .att-round-play-btn svg{
    position: absolute;
    left: -2px;
    top: -2px;
  }
  .fs-7{
    font-size: 0.9rem;
}
.tta-name{
    max-width: 340px;
    color: white;
}

  #work-items-existing-check{
    left:-200px;
  }
  .existing-wi{
    font-size: 13px;
    cursor: pointer;
  }

.invoice-tooltip {
    position: relative;
    display: inline-block;
}

.invoice-tooltip-wrapper {
    position: absolute;
    bottom: 100%;
    display: none;
    z-index:5;
}

.invoice-tooltip .invoice-text, .invoice-tooltip .invoice-comments {
    visibility: hidden;
    width: auto;
    min-width: 600px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 8px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.3s;
    height: auto;
    max-height: 400px;
    overflow: auto;
    white-space: pre-wrap;
    text-align: justify;
    font-size: 10px;
}

.invoice-comments {
    min-width: 300px !important;
}


.invoice-tooltip:hover .invoice-text, .invoice-tooltip:hover .invoice-comments {
    visibility: visible;
    opacity: 1;
}
.invoice-tooltip:hover .invoice-tooltip-wrapper {
    display: flex;
}

.invoice-comments > .log-reply {
    /* background-color: #dedeff !important; */
    background-color: #d1e4e1;
    border-radius: 0.3rem;
     max-width: 100%; 
    white-space: pre-line;
    margin: 2.5px 0;
    padding: 4px;
    color: black;
    text-align:start;
}

.fixed-lock-invoice {
    color: #ffc107;
    position:absolute;
    right:5px;
    top:27%;
}
.fixed-lock {
    color: #ffc107;
}


  

.swal2-container .swal2-select {
    margin-top: 0
} 

.swal2-container .g-input {
    font-size: 0.9rem;
}
.swal2-container .g-input select,
.swal2-container .g-input textarea {
    font-size: .8rem;
    padding: 0.5rem 0.4rem;
    width: unset
}