/*****************************************
  Override zone
*****************************************/
body {
    background-color: white !important;
}
/*override the heigh of the select2 box*/
.form-group .select2-container {
  min-width: 100%;
}

.select2-container .select2-selection--single {
  height: 32px;
}

.select2-container--default .select2-selection--single {
  border-radius: 0px;
  border: 1px solid #dee2e6;
  font-size: 14px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 30px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 30px;
}

.select2-container--default .select2-selection--multiple {
  max-height: 60px;
  overflow-y: scroll;
  border: 1px solid #ddd;
  border-radius: 0px;
  padding: 3px 10px;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
  line-height: 1;
  height: 16px;
  margin-top: 3px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  color: #333;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  border-color: #ddd;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #eee;
  border: 1px solid #ddd;
  font-size: 12px;
  margin: 0 3px 3px 0;
}

.select2-container--default .select2-selection--multiple .select2-search {
  line-height: 1;
}

.select2-container .select2-search--inline .select2-search__field {
  margin-left: 0px;
  font-size: 12px;
  margin-top: 0;
}

.select2-search__field::placeholder, .form-control::placeholder{
  color:#7c7979 !important;
}

.select2-container--open {
  z-index: 9999;
}

form-control::

.select2-results {
  font-size: 14px;
}

/*Override Bootstrap*/
/********************/
.text-primary {
  color: #24489d !important;
}

.link {
  color: #24489d;
}

.link:hover {
  color: #24489d;
}
.btn-sm{
  padding: 5px !important;
  background-color: #eff1f0 !important;
}


.btn-primary, .btn-danger, .btn-warning, .btn-success, .btn-dark{
  border: none !important;
}

/* Exclude button on profile page */
#ContentContainer_MainContent_MainContent_ContentBottom_SubmitButton.btn-primary {
  color:white !important;
}

.btn-primary{
  color:#1e366c !important;
}
.btn-danger{
  color:#bd3500 !important;  
}
.btn-warning{
  color:#cfa004 !important;  
}
.btn-success{
  color: #0e492e;
}
.btn-dark{
  color: #5a4e4e;
}

.btn-primary:hover, .btn-danger:hover, .btn-warning:hover, .btn-success:hover{
  background-color: #353638 !important;
  font-weight: 700;
  color: white !important;
}


.btn:hover{
  background-color: #353638;
  border-color: #353638;
  color: white;
}

.btn-main{
  background: none !important;
  color: #1e366c;
  border: 1px solid #1e366c;
  padding: 2px 8px;
}

.btn-second{
  color: #5a5a5a;
  border: 1px solid #5a5a5a;
  padding: 2px 8px;
}

.btn-main:hover{
  background: #eaeaea !important;
  color: #131414;
  border: 1px solid #131414;
}

.btn-action{
  background: #eff1f0;
  padding: 2px;
  margin-left: 10px;
}

.close.btnClose {
  border: none;
  border-radius: 4px;
}
button {
  border: none;
  background: none;
}

.btn-view-color{
  color: #404b54;
}

.btn-main-color{
  color: #1e366c;
}

button.toggle-btn, button.header-toggle-btn {
  border: 1px solid #ddd;
  line-height: 1;
  border-radius: 3px;
  margin-left: 5px;
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    /* background-color: #7a8493 !important;
    border-color: #7a8493 !important; */
    border: none;
    color: #3d3c3c;
    background-color: white;
}

.btHideBooking,
.btDisplayBooking {
  background: none;
  border: none;
  padding: 0;
  margin-top: 10px;
  font-size: 13px;
}

.input-group-addon, 
.input-group-addon.active{
  padding: 6px 12px !important;
}

input {
  background-color: #FFFFFF;
  border: 1px solid #ddd;
  padding: 5px 10px;
}

input:focus-visible {
  outline: none;
}

.input-group {
  flex-wrap: nowrap;
}

.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.form-inline .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

input.form-control,
select.form-control,
textarea.form-control {
  background-color: #FFFFFF;
  border: 1px solid #ddd;
  font-size: 14px;
  color: #000000;
  padding: 5px 10px;
  border-radius: 0px;
}

.input-group-text {
  border-radius: 0px;
  border: none;
  padding: 3px;
  background-color: white;
  font-size: 14.5px;
  font-weight: 400;
}
.input-group-text-prepend{
  width: 132px;
}
.input-group-text-prepend-half{
  width: 60px;
}
.input-group-text-append{
  background-color: #e9ecef;
  padding: 8px;
  border: 1px solid #ddd;
}
::placeholder {
  color: #6c757d!important;
  opacity: 1; /* Firefox */
}
::-ms-input-placeholder { /* Edge 12 -18 */
  color: #6c757d!important;
}
label{
  font-size: 13px;
  /* margin-bottom: 5px; */
}
.mb-3{
  margin-bottom: 10px !important;
}
.d-flex{
  height: 100%;
}
.p-2{
  margin: auto;
}
.card-body{
  background-color: rgb(240, 240, 240);
}

label.required::after {
  content: "*";
  color: red;
  font-weight: bold;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
  /* background-color:#eee !important; */
  border: 2px solid #eee !important;
  border-bottom: none !important
}

/*Override the datatable js*/

div.dt-container {
  /* padding-bottom: 10px; */
}

div.dt-container .dt-scroll-headInner,
div.dt-container table.dataTable {
  min-width: 100%;
}

div.dt-container .dt-input {
  border: 1px solid #ddd;
  border-radius: 0;
  padding: 5px;
  background-color: transparent;
  color: inherit;
}

div.dt-container .dt-input:disabled {
  background-color: #e9ecef;
  color: #666;
}

div.dt-container select.dt-input {
  margin-right: 5px;
}

.dt-length{
  float: right;
}

div.dt-length label{
  font-weight: 400;
}

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

.table-responsive{
  margin-top: 5px;
}

.table-responsive .btn-icon {
  cursor: pointer;
  color: #24489d;
}

.table-responsive .btn-icon:hover {
  opacity: 0.8;
}

.table-responsive .btn-icon + .btn-icon {
  margin-left: 5px;
}

table {
  border: none !important;
  border-style: none !important;
  font-size: 14px;
}

table input {
  padding: 2px 10px;
}

table thead tr {
    background-color: #eee;
    vertical-align: middle;
}

table thead tr th {
    color: black;
    font-size: 14px;
    border: 1px solid #24489d;
}

tbody, td, tfoot {
  border: 1px solid #ddd;
}

table.dataTable > tbody > tr.highlighted {
  background-color: #fdf1da;
}

div.dt-container.dt-empty-footer .dt-scroll-body {
  border-bottom: none !important;
}

.table-bordered>:not(caption)>*>*{
  /* border-width: 0px !important; */
  border: 1px solid #ddd;
}

.table-bordered>:not(caption)>*{
  /* border-width: 0px !important; */
  border: 1px solid #ddd;
}

table thead tr th{
  border: 1px solid rgba(0, 0, 0, 0.3);
}
/* table */
table.dataTable>thead>tr>th, table.dataTable>thead>tr>td {
  padding: 5px;
  font-size: 13px;
    /* border: 1px solid rgba(0, 0, 0, 0.3); */
}

table.dataTable>tbody>tr>th, 
table.dataTable>tbody>tr>td {
  padding: 5px;
  font-size: 14px;
}
div.dt-container div.dt-layout-cell{
  /* padding: 0px; */
}
div.dt-container div.dt-layout-cell.dt-start{
  font-size: 13px;
}

div.dt-container div.dt-layout-cell.dt-start .dt-length {
  float: none;
}

table.dataTable th.dt-type-numeric.dt-left, 
table.dataTable th.dt-type-date.dt-left, 
table.dataTable td.dt-type-numeric.dt-left, 
table.dataTable td.dt-type-date.dt-left {
  text-align: left;
} 

/* paging */
.dt-paging {
  padding-top: 10px;
}

div.dt-container .dt-paging .dt-paging-button {
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 3px 5px;
  background-color: #eee;
  color: #333;
  margin-left: 5px;
}

div.dt-container .dt-paging .dt-paging-button:hover {
  background: #d1defd;
  border-color: #d1defd;
  color: inherit !important;
}

div.dt-container .dt-paging .dt-paging-button.first,
div.dt-container .dt-paging .dt-paging-button.previous,
div.dt-container .dt-paging .dt-paging-button.last,
div.dt-container .dt-paging .dt-paging-button.next {
  background: none;
  border: 1px solid #eee;
  color: #333;
}

div.dt-container .dt-paging .dt-paging-button.first:hover,
div.dt-container .dt-paging .dt-paging-button.previous:hover,
div.dt-container .dt-paging .dt-paging-button.last:hover,
div.dt-container .dt-paging .dt-paging-button.next:hover {
  color: #1e366c !important;
}

div.dt-container .dt-paging .dt-paging-button.first.disabled:hover,
div.dt-container .dt-paging .dt-paging-button.previous.disabled:hover,
div.dt-container .dt-paging .dt-paging-button.last.disabled:hover,
div.dt-container .dt-paging .dt-paging-button.next.disabled:hover {
  color: rgba(0, 0, 0, 0.5) !important;
}

div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
  border: 1px solid #1e366c;
  background-color: #1e366c;
  color: #eee !important;
}

/*Override the bootstrap-tagsinput*/
.bootstrap-tagsinput {
  width: 100%;
  padding: 4px 10px;
  max-height: 60px;
  overflow-y: scroll;
  border: 1px solid #ddd;
  border-radius: 0px;
  line-height: 1.4;
}

.bootstrap-tagsinput input {
  font-size: 14px;
  width: 100% !important;
}

.bootstrap-tagsinput .tag {
  background-color: #eee;
  color: #333;
  padding: 2px 5px;
  border-radius: 5px;
  border: 1px solid #ddd;
  display: inline-table;
  margin-bottom: 2px;
  font-size: 12px;
}

/*****************************************
  Main page
*****************************************/
/*Define main css for page zone*/

/*header*/
.page-container{
  background-color: white;
}

.page-header {
  position: sticky;
  top: 0;
  /* border-top: 1px solid #eee; */
  margin: 0px;
  padding: 10px;
  height: 60px;
  background-color: #1e366c;
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  justify-content: center;
  z-index: 10000;
  color: #333;
  /* box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); */
}

.page-action {
  position: sticky;
  top: 60px;
  z-index: 999;
  background: white;
  /* margin: 5px; */
  /* margin-left: -10px; */
  /* margin-right: -10px; */
  /* margin-bottom: 5px; */
  border-bottom: 2px solid #d7d7d7;
  height: 45px;
}
.page-content{
  padding: 10px 10px 60px 10px;
}

.page-search .form-group + .form-group {
  margin-top: 5px;
}

.page-search .form-group label {
  display: block;
}

.search-collapse-bar{
  font-weight: 700;
}

.page-heading .breadcrumb {
  padding: 0;
}

.page-heading .page-header {
  background: none;
  border-color: #ddd;
  margin-bottom: 20px;
  padding: 20px 0 0 0;
  height: auto;
  box-shadow: none;
}

.page-heading .page-header h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
}

.search-container {
  display: flex;
  justify-content: space-between;
}

/*ICON*/
.icon-color{
  color: #1e366c;
}
.icon-color-green{
  color: #135e47;
}

.icon-color-orange{
  color: #da600f;
}

.feature-icon, .feature-title {
    color: white;
}
.fa.fa-calendar-check-o, .fa.fa-calendar-times-o {
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    /* color: white; */
}

.feature-title{
  margin-left: 5px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.feature-title > i {
  font-size: 1.5rem;
}

.feature-title svg {
  max-width: 24px;
}

.feature-title > b {
  margin-left: 10px;
}

.feature-title > div {
  text-align: center;
  margin-right: 10px;
}

.feature-nav {
  margin-right: 10px;
}
.feature-nav a {
    color: white;
}
.feature-nav a:hover{
  color: #bac1d1;
  text-decoration: none;
}
.feature-nav a:link{
  text-decoration: none;
}
p{
  font-size: 14px;
}
.text-page-primary {
  color: #24489d !important;
}
.search-title{
  padding-top: 25px;
  font-weight: 500;
}
/*main content*/
.menu-control {
    background-color: #eee;
    height: auto !important;
}

#sidebar-nav {
  padding-left: 10px;
}

#sidebar-nav .list-group-item {
  padding-left: 10px;
  background: none;
  color: #000000;
  border: none;
  padding: 12px;
  text-overflow: inherit;
}

#sidebar-nav .list-group-item:hover {
  background: none;
  color: #24489d;
  border: none;
  text-decoration: none;
}

#sidebar-nav .list-group-item.list-group-item-active {
  background-color: white;
  color: #1e366c;
  border-right: 3px solid #1e366c !important;
  border-radius: 8px 0 0 8px;
}

#sidebar-nav .list-group-item > i {
  width: 24px;
}

#sidebar {
  width: 200px;
  top: 60px;
  position: sticky;
}

#sidebar + .flex-grow-1 {
  /* padding: 10px 10px 40px 10px; */
  width: calc(100% - 200px);
}

#sidebar.sidebar-toggle {
  width: 50px;
}

#sidebar.sidebar-toggle + .flex-grow-1 {
  width: calc(100% - 50px);
}

/* White box */
.white-box {
    background-color: #fff;
    border-radius: 8px;
    padding: 10px;
    /* margin-bottom: 5px; */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    border: 2px solid #eee;
    border-top: none !important;
}

.white-box.tab-content {
  border-radius: 0 0 8px 8px;
}

/* Border box */
.border-box {
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;;
}

/*footer*/
.page-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    box-shadow: 0px 0.5px 5px #ddd, 0px -0.5px 7px #ddd;
    background-color: #eee;
    z-index: 500;
}
.page-footer a{
  color: #005b82;
  text-decoration: solid;
  margin: auto;
}
.page-footer p{
  color: #1e366c;
  margin: auto;
}
.margin-top-10{
  margin-top: 10px;
}
.margin-bottom-5{
  margin-bottom: 5px;
}
.toggle-search{
  text-align: right;
  color: #1e366c;
  margin-top: 0px !important;
}
.page-footer-link{
  margin-left: 5px;
}
#spinner-grow{
  display: flex;
  justify-content: center;
  align-items: center;
}
.w120{
  width: 120px;
}
.w200{
  width: 200px;
}
.w300{
  width:300px;
}
.w400{
  width:400px;
}
.poiter{
  cursor: pointer;
}
.fixed-height-150{
  max-height: 150px;
}
#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}
.float-right{
  float: right;
}
legend {
  margin-bottom: 10px;
  font-size: 16px;
  color: #005b82;
  font-weight: 500;
  /* padding-bottom: 10px; */
  border-bottom: 1px solid #ddd;
}

.legend-title {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
}

/* Tab view - nav pills */
.tab-view.nav-pills .nav-link {
  border: 1px solid #24489d;
  color: #24489d;
  font-weight: 600;
}

.tab-view.nav-pills .nav-link.active {
  background: #24489d;
  color: #fff;
}

.tab-view.nav-pills .nav-item:first-child .nav-link {
  border-radius: 4px 0 0 4px;
}

.tab-view.nav-pills .nav-item:last-child .nav-link {
  border-radius: 0 4px 4px 0;
}

/* Tab view - nav tabs */
.tab-view.nav-tabs {
  border: none;
}

.tab-view.nav-tabs .nav-link {
  border: none;
  text-transform: uppercase;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 20px;
  color: #000;
}

.tab-view.nav-tabs .nav-link.active {
  color: #1e366c;
}

/*************************************************************
***Start - Toggle custom
*************************************************************/
/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.collapsible:hover {
  background-color: #ccc;
}

.search-container.collapsible {
  background-color: inherit;
  color: #333;
  padding: 0;
  font-size: 15px;
  font-weight: 500;
}

.search-container.collapsible:hover {
  background-color: inherit;
}

/* Style the collapsible content. Note: hidden by default */
.content-show {
  display: block;
  overflow: hidden;
}
.content-hide {
  display: none;
  overflow: hidden;
}

/* time slot */
.ec-title {
  font-size: 24px;
}

.ec-event-body {
  border-radius: 4px;
  padding: 0 5px;
}

.ec-header {
  background: #8e8e91;
  color: #fff;
  font-size: 14px;
  position: sticky;
  top: 105px;
  z-index: 1000;
}

.ec-now-indicator {
  border-top: 2px solid #ea4335;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 990;
}

.ec-header .ec-resource .ec-days {
  background: #8e8e91;
}

.ec-sidebar {
  font-size: 14px;
}

.ec-event-time {
  font-size: 13px;
}

.ec-event-title {
  font-size: 13px;
  color: #fff;
  line-height: 1.6;
  margin-top: 3px;
}

.ec-event {
  box-shadow: -1px 0 3px rgba(247, 185, 185, 0.2);
  max-width: 98%;
}

/* Modal */
.modal{
  --bs-modal-zindex: 10000;
}

.modal-title {
  text-transform: uppercase;
  margin: 0;
}

.modal-content,
.modal-content p {
  font-size: 14px;
}

.modal .form-group + .form-group {
  margin-top: 10px;
}

/* Swal popup custom */
.swal2-container .swal2-styled.swal2-confirm,
.swal2-container .swal2-styled.swal2-deny {
  background-color: #24489d;
}

.swal2-container .swal2-html-container {
  line-height: 1.5;
  color: #333;
}

/* Profile page */
#content_form {
  background-color: #eee;
}

.profile-info {
  background-color: #fff;
  border-radius: 8px;
  border: none;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.profile-info .card-body {
  padding: 0;
}

.profile-info .card-body .userFullName {
  font-size: 20px;
  font-weight: 500;
  padding-left: 10px;
}

.weblink.list-group-item {
  border-radius: 8px;
  border: none;
  font-weight: 500;
}

.page-copy ~ fieldset,
.profile-text,
#ContentContainer_MainContent_MainContent_ContentBottom_MarketingOptionsPanel {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.profile-text p {
  font-size: 15px;
  margin-bottom: 10px;
}

#ProfileFormView table.section tbody, 
#ProfileFormView table.section td, 
#ProfileFormView table.section tfoot {
  border: none;
}

#ProfileFormView {
  border: none;
  padding-top: 10px;
}

#ProfileFormView table.section .cell {
  padding: 0 20px 10px 0;
}

.actions {
  padding-bottom: 30px;
}

/*************************************************************
***Start - Scroll custom
*************************************************************/
/* width */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  border: 1px solid #d5d5d5;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
  
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

.ec-extra {
    margin-right: -15px;
}

/*Lazy loadng page configuration*/
div:where(.swal2-container) {
  z-index: 10001 !important;
}
/*************************************************************
***End - Scroll custom
*************************************************************/