/* ---------------------------------------------------
Calibiri GOOGLE FONT

@font-face {
  font-family: 'Calibri';
  font-style: italic;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=J7adnpV-BGlaFfdAhLQo6btPMDoTpA&skey=36a3d5758e0e2f58&v=v11) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Calibri';
  font-style: italic;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/l/font?kit=J7aYnpV-BGlaFfdAhLQgUp5aHRgejiMIKQ&skey=8b00183e5f6700b6&v=v11) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Calibri';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=J7afnpV-BGlaFfdAhLEY67FIEjg&skey=a1029226f80653a8&v=v11) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Calibri';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/l/font?kit=J7aanpV-BGlaFfdAjAo9_pxqHxIZrCE&skey=cd2dd6afe6bf0eb2&v=v11) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
----------------------------------------------------- */

@font-face {
  font-family: 'Calibri-Google';
  font-style: normal;
  font-weight: 400;
  src: url("../font/calibri-google400.7fc06e603638.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Calibri-Google';
  font-style: normal;
  font-weight: 700;
  src: url("../font/calibri-google700.54e259596b18.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Calibri-Google';
  font-style: italic;
  font-weight: 400;
  src: url("../font/calibri-google400i.178986545245.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Calibri-Google';
  font-style: italic;
  font-weight: 700;
  src: url("../font/calibri-google700i.7b373219c95c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------
MAIN STYLE
----------------------------------------------------- */
:root {
    --bg-main: #dbdbdb;
    --crown-blue: #013b4b;
    --crown-gold: #f8e3a9;
}

body {
    background: var(--bg-main);
    font-family:  Calibri, 'Calibri-Google', Helvetica, sans-serif;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    /*transition: all 0.3s;*/
}

label {
    color: var(--crown-blue);
    font-weight: bold;
}

.h3 {
    color: var(--crown-blue);
    font-size: 1.875rem;
    font-weight: bold;
    text-align: center;
}

.text {
    flex-direction: column;
    margin-left: 8px;
}

.grid-container {
    display: grid;

    grid-template-areas:
    "nav main";

    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;

    height: 100%;
    min-height: 100vh;
}

.modal-content {
    border-radius: 0;
}

.fs-6 {
  font-size: 1.125rem!important;
}

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 100%;
}

.bootstrap-select > .dropdown-toggle {
    padding: .46rem .75rem;
    line-height: 1.5;
    border-color: #a7a7a7;
    border-radius: .25rem!important;
    height: 100%;
}

.input-group .bootstrap-select:not(:last-child) > .dropdown-toggle {
    border-top-right-radius: 0!important;
    border-bottom-right-radius: 0!important;
}

/* ---------------------------------------------------
DATATABLES STYLE
----------------------------------------------------- */
/* To fix Vertical Scroll Header not aligned
further info: https://datatables.net/forums/discussion/43051/vertical-scroll-header-not-aligned */
.dataTables_scrollHeadInner {
    width: 100%;
}
.dataTables_scrollHeadInner table {
    width: 100%;
}

.dataTables_info {
    padding-top: 1em;
    padding-left: 3em;
}
.page-item.active .page-link {
    color: #fff;
    background-color: var(--crown-blue);
    border-color: #000;
}

.page-link {
    color: var(--crown-blue);
    background-color: #fff;
    border: 1px solid #dee2e6;
}

.page-link:hover {
    color: white;
    background-color: var(--crown-blue);
    border-color: var(--crown-blue);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: none;
    border: none;
}

table.dataTable thead th {
    text-align: center;
}

th {
    background-color: var(--crown-blue);
    color: white;
}

.no-header-bg th {
    background-color: white;
    color: var(--crown-blue);
}

.ittLineItemsTh > th{
    background-color: white;
    color: var(--crown-blue);
}

.agentFeeFooter1.agentFeeFooter1 th {
    text-align: center;
    background-color: white;
    color: var(--crown-blue);
}

.agentFeeFooter2 th{
    background-color: #F8E3A9;
    color: var(--crown-blue);
}

/* table.dataTable tfoot th, table.dataTable tfoot td {
    border-top: unset;
} */

.status-active{
    height: 25px;
    width: 25px;
    background-color: #385C0B;
    margin: 0 auto;
}

.status-inactive{
    height: 25px;
    width: 25px;
    background-color: #CC000C;
    margin: 0 auto;
}

th.dt-center, td.dt-center { text-align: center; }

table.dataTable.row-border tbody tr:first-child th, table.dataTable.row-border tbody tr:first-child td, table.dataTable.display tbody tr:first-child th, table.dataTable.display tbody tr:first-child:not(.dtrg-group) td {
    text-align: center;
}

table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tr:not(.dtrg-group) tbody td{
    text-align: center;
}

tr:not(.dtrg-group) td {
    text-align: center;
}

table.dataTable tr.dtrg-group td {
    background-color: #F8E3A9;
}

.lineItemRowGroup{
    text-align: center !important;
}

.file-links{
    color: var(--crown-blue);
    font-weight: 700;
    text-decoration: underline;
}

td.text-right {
    text-align: right !important;
}

td.text-left {
    text-align: left !important;
}

th.text-right {
    text-align: right !important;
}

th.text-left {
    text-align: left !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */

input[name="search_input"]:invalid{
    border: 2px dashed red;
}

#searchElements.col{
    flex: unset !important;
}

/* amount exceed modal */
#modalAmountExceedWarning{
    display: block;
    margin: auto;
}

/* Issue List #55 */
#pmcol .bootstrap-select>.dropdown-toggle {
    height: 2.25rem;
}

#accessBtnITT{
    all: unset;
    cursor: pointer;
}

#content {
    grid-area: main;
    padding: 30px 25px 30px 25px;
    background-color: #dbdbdb;
    transition: all 0.3s;
    min-height: 100vh;
}

.errorlist
{
    color: red;
    list-style: none;
    padding-left: 20px;
}

/* Datepicker for fiscal year */
.datepicker-switch, .dow, th.prev, th.next, .datepicker table tr td span.active{
    background-color: white;
    color: var(--crown-blue);
    background-image: none;
    font-weight: 700;
    font-size: smaller;
}

.day{
    font-size: smaller;
}

/*Space between accordion and header in new project */
.new-project-card-body{
    padding: 0;
}

.form-control {
    border-color: #a7a7a7;
}

/* box-shadow and border color when focus an input */
.form-control:focus {
    border-color: #F8E3A9;
    box-shadow: 0 0 0 0.25rem rgb(248 227 169 / 69%);
}

.alert-box {
    margin: -30px -25px 0 -25px;
}

.alert-custom {
    color: var(--crown-blue);
    background-color: #F3E4A8;
    padding: 8px 0 1px 24px;
    margin-bottom: 30px;
    min-height: 40px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16) ;
}

.alert-custom .icon {
    position: absolute;
    margin-top: -4px;
}

.alert-custom .btn-close {
    background-size: 20px;
    width: 20px;
    height: 20px;
    padding: 15px 15px 0 0;
    border-radius: 16px;
}

.home-alert-text {
    font-weight: 700;
    padding-left: 40px;
}

.bi-bell-fill {
    color: #E64A3A;
}

.btn {
    border-radius: 0 !important;
    font-size: 14px;
    line-height: 14px;
    font-weight: bold;
    text-transform: uppercase;
    padding: .65rem 2.5rem;
}

.btn-lg {
    border-radius: 0 !important;
    font-size: 1rem;
    line-height: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: .85rem 1.3125rem;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:visited {
    background-color: var(--crown-blue);
    border-color: var(--crown-blue);
}

.btn-outline-primary {
    color: var(--crown-blue);
    background-color: white;
    border-color: var(--crown-blue);
}

.btn-outline-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:visited {
    color: var(--crown-blue);
    background-color: white;
    border-color: var(--crown-blue);
}

.btn-close{
    color: var(--crown-blue);
    opacity: unset;
}

.btn-close:focus {
    box-shadow: unset;
}

.btn-close:hover {
    color: var(--crown-blue);
    opacity: unset;
}

#newTaskModalHeader, #editTaskModalHeader {
    color: var(--crown-blue);
    background-color: #F3E4A8;
    text-align: start;
}

.newLineModalHeader {
    color: var(--crown-blue);
    background-color: #F3E4A8;
    font-weight: 700;
}

#toDoHeader {
    background-color: #F3E4A8;
    color: var(--crown-blue);
}

#projectsHeader {
    color: var(--crown-blue);
    background-color: white;
    padding: 35px 20px 30px 54px;
    border-bottom: 0px;
}

#accessBtnITT{
    color: black;
}

.customizeHomeSidebar, .changePassSidebar, .logoutSidebar{
    font-weight: 400;
}

#seeAllProjectsSidebarA, #customizeHomepageA, #changePasswordA, #logoutA{
    margin-left: 0px;
}

#projectsHeader h3 {
    font-weight: 700;
}

.dropdown .btn:focus {
    box-shadow: none;
}

.index-card-header {
    border-top-left-radius: 25px !important;
    border-top-right-radius: 25px !important;
    padding: 17.5px calc(16px + (32 - 16) * (100vw - 1366px)/(1920 - 1366)) 12.5px calc(16px + (32 - 16) * (100vw - 1366px)/(1920 - 1366));
    border-bottom: none;
}

.index-card-header .title {
    font-size: calc(20px + (24 - 20) * (100vw - 1366px)/(1920 - 1366));
    font-weight: bold;
    white-space: nowrap;
    /* line-height: calc(32px + (41 - 32) * (100vw - 1366px)/(1920 - 1366)); */
}

.new-task-title {
    font-size: calc(16px + (18 - 16) * (100vw - 1366px)/(1920 - 1366)) !important;
}

.itt-title {
    font-size: calc(20px + (24 - 20) * (100vw - 1366px)/(1920 - 1366)) !important;
}

.pointer {
    cursor: pointer;
}

.index-card-header .badge {
    color: var(--crown-blue);
}

@media (max-width: 992px) {
    .index-card-header {
        padding: 17.5px 32px 12.5px 32px;
    }

    .index-card-header .title {
        font-size: 1.5rem;
    }

    .new-task-title {
        font-size: 1.125rem !important;
    }

    .itt-title {
        font-size: 1.5rem !important;
    }
}

#todoListDiv .dropdown-toggle::after {
    display: none;
}

#otherHeaders {
    background-color: var(--crown-blue);
}

.cardItem {
    padding-top: inherit;
    padding-left: inherit;
    padding-bottom: inherit;
}

/*Index*/

.task-list-date {
    margin-left: 15px;
}
.card-title {
    color: var(--crown-blue);
    font-weight: 700;
}

.cardItemIndex {
    border: dashed #EEEEEE;
}

.daterangepicker th {
    background-color: white;
    color: var(--crown-blue);
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: #193d4c;
    border-color: transparent;
    color: #fff;
}

.datepicker table tr td.active, .datepicker table tr td.active:hover {
    background-image: linear-gradient(to bottom,#193d4c,#193d4c);
    color: white;
}

/* Index > Cards (3) > Fields label */
.index-card-field-label{
    font-weight: 700;
    color: var(--crown-blue);
}

/*Project Page*/

#project-reference {
    text-align: right;
    border-right: 1px solid gray;
}

.project-page-header {
    background-color: var(--crown-blue);
    color: white;
    padding-left: 35px;
    padding-top: 35px;
    padding-bottom: 25px;
}

#projectHeaderTabs{
    margin-left: 15px;
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover, .nav-tabs .nav-link {
    border: none;
}

.card-header {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

#headingOne{
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    padding: 0.5rem 0.6rem;
}

.card {
    border-radius: 25px;
}

.project-page-nav {
    color: var(--crown-blue);
}

.project-page-nav {
    color: var(--crown-blue);
}

.project-page-nav {
    color: var(--crown-blue);
}

.project-page-nav-active {
    color: var(--crown-blue);
}

.nav-tabs {
    border-bottom: 0px;
}

.nav-tabs .nav-link.active {
    border: 0px;
    border-bottom: 3px solid var(--crown-blue);
    font-weight: 700;
}

.panel-body {
    background-color: black;
}

.accordion-button,
.accordion-button:not(.collapsed) {
    background-color: var(--crown-blue);
    color: white;
}

.accordion-button::after {
    order: -1;
    margin-left: 0;
    margin-right: 0.5em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-dash-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
    transform: rotate(-180deg);
}

.accordion-button:not(.collapsed) {
    color: white;
}

.accordion-button:focus {
    box-shadow: unset;
}

.accordion-button.gray,
.accordion-button.gray:not(.collapsed) {
    background-color: #cacaca;
    color: black;
}

.form-check.form-check-inline {
    margin-bottom: 0;
}
.form-check.form-check-inline .form-check-label {
    vertical-align: text-top;
}

.form-check-input[type=checkbox] {
  border-radius: 0;
  border-color: #D5D5D5;
  width: 19px;
  height: 19px;
}

.form-check-input[type=checkbox]:checked {
  background-color: var(--crown-blue);
  border-color: #D5D5D5;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpolygon fill='%23FFF' fill-rule='evenodd' points='6.5 13.5 15 4.5 13.5 3 6.5 10.5 3.5 7.5 2 9'/%3e%3c/svg%3e");
}

.form-check-input:focus {
  border-color: #D5D5D5;
  outline: 0;
  box-shadow: none;
}

.form-select {
    display: inline-block;
    width: unset;
}

#projectExportBtn,
#ittExportBtn,
#ittDeactivateBtn,
#projectDeactivateBtn,
#projectActivateBtn,
#projectAgentFee,
#projectAgentFeeGoBtn,
#declineRequestSaveBtn,
#editITTLBtn {
    color: white;
    font-weight: 700;
    padding-left: 25px;
    padding-right: 25px;
}

th {
    white-space: nowrap;
    text-align: center;
}

/* Project Header > TABS > Fields label */
.ph-tabs-field-label{
    font-weight: 700;
    color: var(--crown-blue);
    text-align: start;
}

.btn .btn-secondary .delete-itt-file{
    background-color: pink;
}

#delete-itt-file{
    background-color: red;
    border-color: red;
}

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

.btn-warning, .btn-warning:hover {
    color: var(--crown-blue);
    font-weight: 700;
    background-color: #F8e3a9;
    border-color: #F8e3a9;
}

.btn-warning.disabled, .btn-warning:disabled, .btn-warning[disabled] {
    color: var(--crown-blue);
    background-color: var(--crown-gold);
    border-color: var(--crown-gold);
}

.btn[disabled] {
    pointer-events: none;
    opacity: .65;
}

.btn-check:checked+.btn-warning, .btn-warning.active, .btn-warning:active, .show>.btn-warning.dropdown-toggle {
    background-color: #F8e3a9;
    border-color: #F8e3a9;
}

btn-check:focus+.btn-warning, .btn-warning:focus {
    background-color: #F8e3a9;
    border-color: #F8e3a9;
}

.btn-cancel-modal{
    color: var(--crown-blue);
    background-color: white;
    border-color: var(--crown-blue);
    font-weight: 700;
}
.btn-cancel-modal:hover{
    color: var(--crown-blue);
    background-color: white;
    border-color: var(--crown-blue);
}

/* Bootstrap-select styles*/
.bootstrap-select>.dropdown-toggle.bs-placeholder, .bootstrap-select>.dropdown-toggle.bs-placeholder:active, .bootstrap-select>.dropdown-toggle.bs-placeholder:focus, .bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
    color: var(--crown-blue);
    background-color: white;
}

.dropdown-item:hover, .dropdown-item.active, .dropdown-item:active {
    background-color: #F8E3A9;
    color: var(--crown-blue);
    font-weight: 700;
}

.btn-light:hover {
    color: var(--crown-blue);
    background-color: white;
    border-color: #ced4da;
}

.dropdown-item, .dropdown-item, .dropdown-item {
    color: var(--crown-blue);
}

.filter-option-inner-inner{
    color: var(--crown-blue);
    font-weight: 700;
}

.btn-light{
    background-color: white;
    border-color: var(--crown-blue);
    border: 1px solid #ced4da
}

/* .dataTables_wrapper {
    overflow: auto;
} */

/* #invoice_list_table tr.dtrg-group td {
    padding-left: 2rem;
} */

.input-group-text {
    line-height: 14px;
    border-color: #a7a7a7;
}

.red {
    color: red;
}

#total-fee-collection-warning {
    margin-left: 0.5rem;
}

.accordion-button.no-icon::after {
    display: none;
}

.mx-n4 {
    margin-left: -1.5rem!important;
    margin-right: -1.5rem!important;
}

.pagination {
    margin-right: 1rem;
    margin-top: 0.5rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.page-item {
    padding: 0;
    margin: 0;
    border: 0;
}

.search_ref_num {
    text-decoration: underline;
    cursor: pointer;
}

.modal-1000 {
    max-width: 1000px;
}

.bank_charge_tfoot.bank_charge_tfoot th {
    background-color: white;
    color: var(--crown-blue);
    text-align: center;
}

#bank_charge_summary_table tr.credit_total th,
#bank_charge_summary_table tr.balance th {
    background-color: white;
    color: var(--crown-blue);
}

#bank_charge_summary_table tr.blank th {
    background-color: white;
    height: 1rem;
}

#all_projects_table th, #all_projects_table td {
    overflow: hidden;
}

#all_projects_table td:nth-child(3),
#all_projects_table td:nth-child(4),
#all_projects_table td:nth-child(5) {
    white-space: wrap;
    word-break: break-all;
}