@import './datatable.css';
@import './select2.css';
@import './modal.css';
@import './upload-img.css';

:root,
[data-bs-theme="light"] {
  /* --bs-dark-rgb: 51, 51, 51; */
}

:root {
  --font-family-base: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-title: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bs-font-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* --bs-body-font-size: 14px;
    --bs-body-font-weight: 400;
    --title: #374557; 
    --font-size-base: 14px; */
  --color-transport-name: #0000FF;

    --color-row-1: #000000;
    --color-row-2: #ff0000;
    --color-row-3: #7030A0;
    --color-row-4: #0070C0;    
    --color-row-5: #008000;
    --color-row-6: #ffa600;
}

@media screen and (max-width: 992px){
  .table{
    min-width: 1440px;
  }
  .table-custom{
    min-width: 100% !important;
  }
}
body{
    overflow-x: hidden;
}
[data-sidebar-style="full"][data-layout="vertical"] .deznav .metismenu > li > a{
  font-weight: 400;
}
.deznav .metismenu a {
  font-weight: 400;
}
.deznav .metismenu ul a {
  font-size: 0.85rem !important;
}

/* =========== Footer ============ */
.footer{
  background-image: url('../img/web/backgroundfooter.png');
  background-repeat: no-repeat; 
  background-size: 100% 100%;
  object-fit: cover;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 0rem;
  margin-top: auto;
}
.company{
  margin-bottom: 3.5rem;
  margin-left: 0.5rem;
}
.company__name{
  color: #2e368f;
  font-size: 17px;
}
.company__info{
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
}
.height__logo{
  height: 120px;
}
.logo__link{
  text-decoration: none;
  margin-bottom: 4.5rem;
}
.fs-company{
  font-size: 14px !important;
}

@media screen and (min-width: 1780px){ 
  /* =========== Footer ============ */
  .footer{
      background-image: url('../img/web/backgroundfooter.png');
      height: 300px;
  }
  .company__name{
      font-size: 21px;
  }
  .company__info{
      font-size: 13px;
  }
  .height__logo{
      height: 140px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199.98px){ 
  /* =========== Footer ============ */
  .footer{
      background-image: url('../img/web/backgroundfooter.png');
      height: 240px;
  }
  .company__name{
      font-size: 15px;
  }
  .company__info{
      font-size: 11px;
  }
  .height__logo{
      height: 100px;
  }
}

@media screen and (min-width: 768px) and (max-width: 991.98px){
   /* =========== Footer ============ */
   .footer{
      background-image: url('../img/web/backgroundfooter.png');
      height: 170px;
  }
  .company__name{
      font-size: 14px;
  }
  .company__info{
      font-size: 11px;
  }
  .height__logo{
      height: 100px;
  }
  .logo__link{
    margin-bottom: 4rem;
  }
}
@media screen and (min-width: 577px) and (max-width: 767.98px){
   /* =========== Footer ============ */
  .footer{
      background-image: url('../img/web/backgroundfooter.png');
      height: 150px;
  }
  .company{
      margin-bottom: 2.5rem;
  }
  .company__name{
      font-size: 13px;
  }
  .company__info{
      font-size: 10px;
  }
  .height__logo{
      height: 90px;
  }
  .logo__item{
      font-size: 8px;
      margin-top: -9px;
  }
  .logo__link{
    margin-bottom: 0rem;
    margin-bottom: 2.5rem;
  }
}

@media screen and (min-width: 445px)  and (max-width: 576px){
  .footer{
      background-image: none;
      height: 240px;
      display: flex;
      justify-content: center;
      align-items: start;
      flex-direction: column;
      margin: 0% 10% 0% 10%;
  }
  .company{
      margin-bottom: 0rem;
      margin-left: 0rem;
  }
  .company__name{
      font-size: 16px;
  }
  .company__info{
      font-size: 13px;
  }
  .height__logo{
      height: 100px;
  }
  .logo__link{
    margin-bottom: 0rem;
    margin-left: -1.5rem;
  }
}

@media screen and (min-width: 365px) and (max-width: 444.98px){
  /* =========== Footer ============ */
  .footer{
      background-image: none;
      height: 210px;
      display: flex;
      justify-content: center;
      align-items: start;
      flex-direction: column;
      margin: 0% 3% 0% 7%;
  }
  .company{
      margin-bottom: 0rem;
      margin-left: 0rem;
  }
  .company__name{
      font-size: 16px;
  }
  .company__info{
      font-size: 11px;
  }
  .height__logo{
      height: 90px;
  }
  .logo__link{
    margin-bottom: 0rem;
    margin-left: -1rem;
  }
  .fs-company{
    font-size: 11px !important;
  }
}
@media screen and (min-width: 300px) and (max-width: 364.98px){
  /* =========== Footer ============ */
  .footer{
      background-image: none;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: start;
      flex-direction: column;
      margin: 0% 0% 0% 5%;
  }
  .company{
      margin-bottom: 0rem;
      margin-left: 0rem;
  }
  .company__name{
      font-size: 13px;
  }
  .company__info{
      font-size: 10px;
  }
  .height__logo{
      height: 80px;
  }
  .logo__link{
    margin-bottom: 0rem;
    margin-left: -1rem;
  }
  .fs-company{
    font-size: 11px !important;
  }
}
@media screen and (max-width: 299.98px){
  /* =========== Footer ============ */
  .footer{
      background-image: none;
      height: 170px;
      display: flex;
      justify-content: center;
      align-items: start;
      flex-direction: column;
      margin: 0% 5% 0% 5%;
  }
  .company{
      margin-bottom: 0rem;
      margin-left: 0rem;
  }
  .company__name{
      font-size: 12px;
  }
  .company__info{
      font-size: 9px;
  }
  .height__logo{
      height: 70px;
  }
  .logo__link{
      margin-bottom: 0rem;
      margin-left: -1rem;
  }
  .fs-company{
    font-size: 10px !important;
  }
}

/* =========== Footer ============ */


@media screen and (max-width: 900px){
  .btnResPullRight{
      position: relative!important;
      margin-top:5px; 
  }
}
@media screen and (max-width: 525px){
  #functChangeSendMessage{
      margin-top: 5px;
      float: none!important;
  }
  #funct{
      display: block!important;
  }
}

label{
  color: black;
}

.deznav-scroll::-webkit-scrollbar {
    width: 5px;
}
.deznav-scroll::-webkit-scrollbar-thumb{
    background: rgba(111, 133, 147, 0.1);
}
.colorTransName{
  color: var(--color-transport-name);
}

/* Color */
.colorRow1{
    color: var(--color-row-1);
}
.colorRow2{
    color: var(--color-row-2);
}
.colorRow3{
    color: var(--color-row-3);
}
.colorRow4{
    color: var(--color-row-4);
}
.colorRow5{
    color: var(--color-row-5);
}
.colorRow6{
    color: var(--color-row-6);
}

.colorHeaderRed{
  color: var(--color-row-2);
}

table :is(th,td) :nth-child(6n + 1 of .colorHeader) {
  color: var(--color-row-1);
}
table :is(th,td) :nth-child(6n + 2 of .colorHeader) {
  color: var(--color-row-2);
}
table :is(th,td) :nth-child(6n + 3 of .colorHeader) {
  color: var(--color-row-3);
}
table :is(th,td) :nth-child(6n + 4 of .colorHeader) {
  color: var(--color-row-4);
}
table :is(th,td) :nth-child(6n + 5 of .colorHeader) {
  color: var(--color-row-5);
}
table :is(th,td) :nth-child(6n + 6 of .colorHeader) {
  color: var(--color-row-6);
}
/*SCROLLBAR MODAL*/
div.modal{
  scrollbar-width: auto!important;
  scrollbar-color: initial!important;
  overflow: auto !important;
}
/* CSS CỦA PHẦN NAVBAR VÀ HEADER */

.span-icon-menu {
  display: inline-block;
  /* filter: invert(93%) sepia(100%) saturate(27%) hue-rotate(15deg) brightness(106%) contrast(105%); */
  filter: invert(82%) sepia(1%) saturate(0%) hue-rotate(192deg) brightness(83%) contrast(89%);
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  padding-right: 0.1rem;
}

.metismenu .badge-xs {
  font-size: 0.8rem;
  height: auto;
  float: right;
}

.menu-toggle .metismenu .badge-xs {
  font-size: 0.8rem;
  height: auto;
  display: inline-block;
}

[data-sidebar-style="full"][data-layout="vertical"] .deznav .metismenu>li .has-arrow:after {
  right: 0.75rem;
}

.nav-header .brand-title {
  font-size: 1rem;
  color: var(--bs-white);
}

.text-color-menu {
  color: rgba(255, 255, 255, 0.85) !important;
}

a.nav-link:hover {
  color: #149bf9 !important;
}

/* END CSS CỦA PHẦN NAVBAR VÀ HEADER */


/* font size select option */
.dropdown-menu .dropdown-item {
  font-size: 1rem;
}

/* CSS BUTTON */
.btn-xs {
  padding: 0.563rem 1rem;
}

.btn-sm,
.btn-group-sm > .btn {
  /* padding: 0.625rem 12px; */
  min-height: 2.5rem;
  max-height: 2.5rem;
}
a.btn-sm{
  padding: 0.625rem 12px;
}

.btn-sm .badge {
  padding: 0;
}

.nav-tabs-custom {
  background-color: white;
}

.box-footer {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-top: 1px solid #f4f4f4;
  padding: 10px;
  background-color: #fff;
}

.nav-tabs-custom>.tab-content {
  background: #fff;
  padding: 10px;
  border-radius: 0.6rem;
}

.breadcrumb-item-previous  {
	font-weight: bold;
	color:#FF9F00;
}


.form-group {
  margin-bottom: 15px;
}

table.dataTable thead th {
    background-color: #fafafa !important ;
    color: black !important ;
}

.pull-right {
  float: right !important;
}

.p-relative {
  position: relative;
}

.btn-default {
  background-color: #f4f4f4;
  color: #444;
  border-color: #ddd;
}
.btn-default:hover {
  background-color: #f4f4f4;
  color: #444;
  border-color: #ddd;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
  background-color: #eee;
  opacity: 1;
}

.form-control[disabled], fieldset[disabled] .form-control {
  cursor: not-allowed;
}

/* Ẩn tiêu đề */
.titleDieuXe{
    display: none;
}

.label-custom-checkbox .checkmark1, .label-custom-checkbox .checkmark {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.container.label-custom-checkbox {
    margin-left: 0rem !important;
    padding-left: 0rem !important;
}

.breadcrumb-item:nth-child(2):not(.active) > a {
    color: #FF9F00;
}

table thead th, table tbody td{
    font-size: 15px !important;
}
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #cacaca !important;
}

.checkmark1 {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #cacaca !important;
}
.container:hover input ~ .checkmark {
  background-color: #b3b3b3 !important;
}
.container input:checked ~ .checkmark {
  background-color: #3C8DBC !important;
}
.container:hover input ~ .checkmark1 {
  background-color: #b3b3b3 !important;
}

.container input:checked ~ .checkmark1 {
  background-color: #3C8DBC !important;
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.checkmark1:after {
  content: "";
  position: absolute;
  display: none;
}
.container input:checked ~ .checkmark:after {
  display: block;
}

.container-header input:checked ~ .checkmark1:after {
  display: block;
}
.container  .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}



/* .dataTables_wrapper .dataTables_length > label > select{
    margin: 0 0.3125rem;
    width: 70px !important;
    font-size: 0.813rem !important;
    padding: 0.625rem 1rem;

    border-color: #CCCCCC;
    
    background: url("data:image/svg+xml,<svg height='7px' width='7px' viewBox='0 0 16 16' fill='gray' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
    background-position: calc(100% - 1rem) center !important;
    -moz-appearance:none !important;
    -webkit-appearance: none !important; 
    appearance: none !important;
} */


/* Chỉnh badge đỏ, xanh cho các trang */
.btn .badge {
  padding: 1px 0.35rem;
  border-radius: var(--bs-border-radius-pill);
}

.btn-danger .badge {
  color: #d9534f;
  background-color: #fff;
}

.btn-success .badge {
    color: #3AC977;
    background-color: #fff;
}

.btn-info .badge {
  color: #5bc0de;
  background-color: #fff;
}

.btn-warning .badge {
  color: #ff9f00;
  background-color: #fff;
}

.form-control{
  color: #464646 !important;
}

.select2 span span{
  color: #464646 !important;
}
.select2-container > .selection > .select2-selection{
    border: 1px solid #CCCCCC;
}
.select2-container .select2-dropdown .select2-results ul{
  color: #464646;
}
input, textarea, .select2-container .select2-dropdown .select2-results ul, option, .select2 span span span span div, .select2 span span span  {
  font-size: 14px !important;
  
}
input[type='text']{
  height: auto;
}
textarea::placeholder {
  color: #777 !important;
}



textarea:-moz-placeholder, /* Firefox 18- */
textarea::-moz-placeholder, /* Firefox 19+ */
textarea:-ms-input-placeholder, /* IE 10+ */
textarea::-webkit-input-placeholder, /* Webkit based */
textarea::placeholder { /* Modern browsers */
  color: #777 !important;  
}

input::placeholder {
  color: #777 !important;
}

input:-moz-placeholder, /* Firefox 18- */
input::-moz-placeholder, /* Firefox 19+ */
input:-ms-input-placeholder, /* IE 10+ */
input::-webkit-input-placeholder, /* Webkit based */
input::placeholder { /* Modern browsers */
  color: #777 !important;  
}

.tag-editor .placeholder{
  color: #777 !important;
  background-color: #fff;
  cursor: text !important;
  opacity: 1;
}
.tag-editor .placeholder > div{
  cursor: text !important;
}

.modal .modal-header {
  justify-content: center;
  background-color: #ff6600 !important;
  text-align: center;
  color: #fff !important;
  text-transform: uppercase;
}
.modal .modal-header .modal-title{
  color: #fff !important;
  font-size: 23px;
}

.deznav .metismenu ul a:focus{
    color: #888888 !important;
}

.content-body > .container-fluid {
    padding: .5rem;
}
.day.today:not(.active) {
    
}

.datepicker table tr td.today {
    border: 1px solid #333;
    border-radius: 0.375rem !important;
    background: #fff;
    border-color: var(--primary);
    color: #CCCCCC;
}
.content-body {
  overflow: hidden;
}

.colorBalanceCurrent {
  color: var(--color-row-2);
}
.colorBalanceBefore {
  color: #0070C0;
}
.colorBalanceAfter {
  color: #002060;
}

/* Fix lỗi entries (dropdown) */
.dropdown-menu.show{
  transform: none !important;
  top: auto !important;
}
.cw {
    width: var(--w) !important;
}