/****************************************************
CSS Customization for VEGA
PURPOSE: Override or extend CSS of Bootstrap 5
*****************************************************/

/*********************************************************
Navbar customization based on VEGA Colors
*********************************************************/
.navbar-custom {
    background-color: #006699;
}

/* change the brand on mobile breaker and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
}

/* add spacing to button bottom for mobile views */
@media screen and (max-width: 767px) {
  .btn {
      width: 100%;
      margin-bottom: 5px;
  }
}

/* Tabs links override */
.nav-tabs .nav-link {
  color: #006699;
}


/*********************************************************
Navigation bar nested drop down 
https://www.jqueryscript.net/demo/bootstrap-navbar-multi-level-dropdowns/
Note: Both CSS and JS required
*********************************************************/
.dropdown-menu {
    margin-top: 0;
}
.dropdown-menu .dropdown-toggle::after {
    vertical-align: middle;
    border-left: 4px solid;
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
}
.dropdown-menu .dropdown .dropdown-menu {
    left: 100%;
    top: 0%;
    margin:0 20px;
    border-width: 0;
}

.dropdown-menu > li a:hover,
.dropdown-menu > li.show {
	background: #007bff;
	color: white;
}
.dropdown-menu > li.show > a{
	color: white;
}

@media (min-width: 768px) {
    .dropdown-menu .dropdown .dropdown-menu {
        margin:0;
        border-width: 1px;
    }
}


/********Bootstrap 5*******************/

.dropdown-submenu {
  position: relative;
}


.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}


/*********************************************************
Button customization based on VEGA
*********************************************************/

/*********************************************************
Container maximum width override
default:  1320px;
*********************************************************/
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1500px;
}

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

.btn-primary:hover {
	background-color: #278DC0;
	border-color: #278DC0; 
}

.btn.btn-primary:disabled{
    background-color: #006699;
}

.btn-info {
  color: #FFF;
  background-color: #278DC0;
  border-color: #278DC0;
}

.btn-info:hover {
  color: #FFF;
  background-color: #1ab2ff;
  border-color: #1ab2ff; 
}

.btn.btn-info:disabled{
    color: #FFF;
    background-color: #278DC0;
}

/*DataTable.net CSS*/
.page-item.active .page-link {
	background-color: #006699;
	border-color: #006699;
}

.page-link {
	color: #212529;
}

.page-link:hover {
	color: #006699;
}

.navbar-toggler {
    border-color: #dcdcdc;
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("../images/hamburger.png");
}

a {
    color:#006699;
}

.button_img{
  background: none;
  border: none;
}

.button_edit{
  width: 20px; 
  height: 20px;
  background: transparent;
  vertical-align: middle;
  border: none;
  background-image: url("../images/edit.png");
}


.button_info{
  width: 20px; 
  height: 20px;
  background: transparent;
  vertical-align: middle;
  border: none;
  background-image: url("../images/info.png");
}


.button_appr{
  width: 20px; 
  height: 20px;
  background: transparent;
  vertical-align: middle;
  border: none;
  background-image: url("../images/approve.png");
}

.button_unappr{
  width: 20px; 
  height: 20px;
  background: transparent;
  vertical-align: middle;
  border: none;
  background-image: url("../images/remove.png");
}


.button_revi{
  width: 20px; 
  height: 20px;
  background: transparent;
  vertical-align: middle;
  border: none;
  background-image: url("../images/reviewed.png");
}

.button_process{
  width: 20px; 
  height: 20px;
  background: transparent;
  vertical-align: middle;
  border: none;
  background-image: url("../images/process.png");
}

.button_link{
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #0d6efd;
  text-decoration: underline;
  background: transparent;
  vertical-align: middle;
  border: none;
}


tr.bg-yellow td{
  background-color: #fff2cc;
}

.bg-tcgrid-yellow{
  background-color:#fff2cc!important;
  color: #ff0000;
}

.bg-primary-header{
  background-color:#006699!important;
  color: #fff;
}


.bg-primary-footer{
  background-color:#d9d9d9!important;
  color: #fff;
}

.bg-table-header{
  --bs-table-color: #fff;
  --bs-table-bg: #006699;
  --bs-table-border-color: #fff;
}


.bg-tcgrid-submitted{
  background-color:#d9534f!important;
  color: #fff;
}

.bg-tcgrid-reviewed{
  background-color:#d9534f!important;
  color: #fff;
  border: 4px solid #5cb85c;
}

.bg-tcgrid-note{
  background-color:#f0ad4e!important;
  color: #fff;
}

.bg-tcgrid-note-reviewed{
  background-color:#f0ad4e!important;
  color: #fff;
  border: 4px solid #5cb85c;
}

.bg-tcgrid-approved{
  background-color:#5cb85c!important;
  color: #fff;
}

input[readonly]{
  background-color:#e9ecef;
  opacity: 1;  
}


/*********************************************************
CSS for App icon tiles
*********************************************************/
.tile-div {
    width: 140px; 
    height: 140px; 
    border: 2px solid #006699;
    border-radius: 25px;
    vertical-align: center;
    text-align: center;
    display: inline-block;
    white-space: nowrap;
}

.tile-div:hover {
    background-color: #ACC0C6;
}

.tile-div-spacer {
    width: 10px; 
    height: 160px; 
}

.tile-img {
    height: 100px;
    width: 100px;
    padding: 5px;
}


label {
    display: inline-block;
    margin-top: .5rem;
    margin-bottom: 0;
}

img{
  vertical-align: text-bottom;
}

/*********************************************************
CSS for Flatpickr date to stop background from going grey
*********************************************************/
.flatpickr-form:disabled, .flatpickr-form[readonly] {
    background-color: #fff;
    opacity: 1;
}

/*********************************************************
Image for input fields
*********************************************************/
.calendar_img {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('../images/calendar.png');
  background-position: right; 
  background-repeat: no-repeat;
}

.password_img {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('../images/password.png');
  background-position: right; 
  background-repeat: no-repeat;
}


/*********************************************************
Fade In on page loading
*********************************************************/
.fade-in {
  animation: fadeIn ease .5s;
  -webkit-animation: fadeIn ease .5s;
  -moz-animation: fadeIn ease .5s;
  -o-animation: fadeIn ease .5s;
  -ms-animation: fadeIn ease .5s;
}


@keyframes fadeIn{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}


/*********************************************************
FullCalendar CSS overrides
*********************************************************/
.fc-event {
    border-width: 4px;
}

/*********************************************************
Datatable CSS overrides
*********************************************************/
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
    background-color: #006699;
}

/*********************************************************
Select2 CSS overrides for advanced selection lists
*********************************************************/
.select2 {
  width:100%!important;
}

.select2-selection { overflow: hidden; }

.select2-container--default .select2-selection--single {
  height: calc(2.25rem + 2px) !important;
}

.select2-container--default .select2-results > .select2-results__options {
  max-height: 400px;
  overflow-y: auto; }

.select2-container--default .select2-selection--single {
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: .25rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 2.25rem;
  color: #495057;
  white-space: normal; 
  word-break: break-all;

}

/*********************************************************
div hover strip
*********************************************************/
.strip div[class^="col-"]{
  border-bottom:1px solid #F0F0F0;
}

.strip:hover div[class^="col-"]{
  background-color: #F0F0F0;
}

/*********************************************************
Login Page
*********************************************************/
.loginForm {
  background-color: rgba(52, 58, 64, 0.8);
  min-width: 500px;
  position: absolute;
  text-align: left;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 500px) {
  .loginForm {
    min-width: 90%;
  }
}

/*********************************************************
Disable Style
*********************************************************/
.DisableInput {
  pointer-events:none;
  color:#AAA;
  background:#F5F5F5
}

button:disabled {
  cursor: not-allowed;
  pointer-events: all !important;
}