/* ========= React - Alert ======= */
.react-confirm-alert-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999999999;
  background: rgb(24 23 23 / 40%);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  /* opacity: 0; */
  -webkit-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
  -moz-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
  -o-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
  animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
}

.react-confirm-alert-svg {
  position: absolute;
  top: 0;
  left: 0;
}

/* ========= Procedure ======= */
.procedure-title {
  text-align: center;
}
.procedure-img {
  display: flex;
  justify-content: center;
  padding: 4rem 2rem;
}
.procedure-img > img {
  max-width: 100%;
  height: auto;
}
.procedure-btn-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 2rem 0;
}
.procedure-btn-item {
  width: 15%;
  height: 10rem;
}
.procedure-btn-item > .procedure-btn-link {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  font-size: 14px;
  border: 1px solid #1f1c1ca1;
  height: 100%;
}
.procedure-btn-link > img {
  width: 5rem;
  height: 5rem;
}
@media only screen and (max-width: 460px) {
  .procedure-btn-item {
    width: 35%;
  }
}
/* ============ End ============== */
.dashboard-panel > .col-md-4 {
  text-align: center;
  padding: 30px 0;
}
.dashboard-panel > .col-md-4 > .glyphicon-user {
  font-size: 64px;
  color: #f7941e;
}
.dashboard-panel > .col-md-4 > .glyphicon-usd {
  font-size: 64px;
  color: #00aa00;
}
.dashboard-panel > .col-md-4 > .glyphicon-question-sign {
  font-size: 64px;
  color: #55007f;
}
.dashboard-panel > .col-md-8 {
  padding-bottom: 20px;
}
.dashboard-panel > .col-md-8 > h2 {
  font-size: 18px;
  text-transform: uppercase;
}
.dashboard-panel > .col-md-8 > a {
  color: #333;
}
.dashboard-panel > .col-md-8 > a:hover {
  color: #f7941e;
  text-decoration: underline;
}

.dashboard-panel > div > ul > li > a {
  color: #333;
  font-weight: normal;
}
.dashboard-panel > div > ul > li > a:hover {
  color: #333;
}
.dashboard-panel > div > .navigation > .navigation-header {
  border-bottom: 1px solid #f3f3f3;
  font-size: 16px;
  text-align: center;
  color: #333;
}
.dashboard-panel > div > ul > li > .glyphicon-globe,
.dashboard-panel > div > ul > li > .glyphicon-envelope,
.dashboard-panel > div > ul > li > .glyphicon-cloud,
.dashboard-panel > div > ul > li > .glyphicon-hdd {
  font-size: 32px;
}
.dashboard-panel > div > .button-wapper {
  text-align: center;
  padding: 20px 0;
}

.navigation-accordion > li > a > i {
  font-style: normal;
}
.navigation-accordion > li > a > i > span {
  display: none;
}
@media (min-width: 769px) {
  .navigation-accordion > li > a > i > span {
    display: block;
  }
  .date1 {
    float: left;
  }
  .date2 {
    float: left;
    margin-left: 20px;
  }
  .headbutton {
    float: left;
    margin-left: 20px;
  }
}

.memberelement,
.checkoutelement {
  padding: 20px;
}

.membertitle {
  color: #333;
  font-size: 18px;
  font-weight: 700;
}

.checkoutelement,
.hostcartbox {
  text-align: center;
  font-size: 14px;
}

.checkoutelementyes {
  color: #333;

  background-color: #ccffff;
}
.product-item {
  text-align: center;
  padding: 25px 10px;
}
.product-item > h1 {
  color: #226a98;
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
}

.txtdomainforhost {
  width: 100%;
  border-radius: 3px;
  border: 1px solid #ddd;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  padding: 7px 12px;
}

.hostingline {
  border-bottom: 1px solid #aaa;
  font-size: 18px;
  padding: 20px 0;
}

.has-error {
  color: red;
}

.btn-warning {
  color: #ebecf2;
  background-color: #f7941e;
  border-color: #f7941e;
}

.react-datepicker {
  font-size: 1.3rem !important;
}

.react-datepicker__current-month {
  font-size: 1.5rem !important;
}

.react-datepicker__header {
  padding-top: 6px !important;
}

.react-datepicker__navigation {
  top: 13px !important;
}

.react-datepicker__day-name,
.react-datepicker__day {
  margin: 0.5rem !important;
}

.Select-clear-zone {
  display: none !important;
}
.Select-menu-outer {
  z-index: 999999 !important;
}

/* The table responsive conflict with react-select. Need to overflow-x visible on the div table*/
/*.table-responsive {*/
/*overflow-x: visible;*/
/*}*/

.table-sticky-header thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #039296;
  z-index: 1000; /*Lower than modal-backdrop 1040*/
}

/*Begin Set Color for True False Values (Active User)  */
.active-font[target="Đang Hoạt Động"] {
  color: rgb(126, 202, 164);
}
.active-font[target="Vô Hiệu Hoá"] {
  color: tomato;
}
.active-font-attendance[target="Đã Có Giờ Về"] {
  color: rgb(126, 202, 164);
}
.active-font-attendance[target="Chưa Có Giờ Về"] {
  color: tomato;
}
/*End Set Color for True False Values (Active User)  */

.navigation > li.active > a:focus {
  background-color: #ef5350;
  color: #fff;
}

.navigation > li > ul li.active > a,
.navigation > li > ul li.active > a:hover,
.navigation > li > ul li.active > a:focus {
  background-color: rgba(0, 0, 0, 0.2);
}

.sidebar-xs .sidebar-main .navigation > li > a > span {
  display: none;
  position: absolute;
  top: 0;
  right: -260px;
  background-color: #039296;
  border: 1px solid #039296;
  padding: 11px 20px;
  width: 260px;
  text-align: left;
  color: #fff;
  cursor: pointer;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}
.pagination > .active > span:focus {
  z-index: 3;
  color: #fff;
  background-color: #8bc349;
  border-color: #8bc349;
  cursor: default;
}
/* .navbar-header {
    min-width: 230px;
  } */
.dropdown-menu {
  min-width: 240px;
}
body {
  font-size: 13px;
  line-height: 1.5384616;
  color: #333333;
  font-weight: bold;
  background-color: #f5f5f5;
}

/* @media (min-width: 769px) {
    .sidebar {
      display: table-cell;
      vertical-align: top;
      width: 230px;
    }
  } */

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 10px 10px;
}
.navigation > li ul li a {
  padding-left: 30px;
}
.btn {
  font-size: 10px;
}

.input-xlg {
  height: 36px;
}

.group-permission {
  border-bottom: 1px solid #d2d6de;
  font-size: 16px;
}
.entity-permission {
  font-size: 25px;
}
.scroll-wrapper1 {
  overflow-x: scroll;
  overflow-y: hidden;
}
.scroll-wrapper2 {
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
}
.scroll-wrapper1 {
  height: 15px;
}
.scroll-wrapper2 {
  height: 100%;
}
.div-scroll-1 {
  height: 1px;
}
.div-scroll-2 {
  width: 1000px;
  height: 200px;
  overflow: auto;
}

.tox-notifications-container {
  display: none !important;
}

.nav-justified .active {
  background-color: #ef5350;
}
.nav-justified .active a {
  color: #fff !important;
}
.bg-f1 {
  background-color: #f1f1f1;
}
.bg-f1 li > a {
  color: #000 !important;
}
.page-header-default .breadcrumb-line:not([class*="bg-"]) {
  padding-top: 10px;
  padding-bottom: 10px;
}
.wrap-text {
  word-break: break-word;
}

.ui-menu-item:hover {
  background-color: #f5f5f5;
}

.smooth-dnd-container {
  word-wrap: break-word;
}
.custom-content-ticket img {
  width: 100%;
  object-fit: contain;
}
#table-project-total-cost-report,
#table-project-cost-item-list,
.custom-button-excel {
  border: none;
  padding: 8px 15px;
  font-size: 14px;
}
#table-project-total-cost-report.icon-download:before,
.custom-button-excel.icon-download:before,
.custom-button-excel.icon-folder-download3:before {
  margin-right: 10px;
}
.modal-header {
  background-color: #ef5350;
  border-color: #ef5350;
  color: #fff;
  padding: 15px 20px;
  border-top-right-radius: 2px;
  border-top-left-radius: 2px;
}
.modal-header .close {
  margin-top: -10px;
}
.block-color {
  display: inline-block;
  width: 3rem;
  height: 1.2rem;
  margin-right: 1rem;
  border: 1px solid #00000036;
}
.late-date-payment-color {
  background-color: #ffdab9;
}
.still-have-date-payment-color {
  background-color: #f0f8ff;
}
.partial-payment-color {
  background-color: rgb(158 255 123 / 40%);
}
.table-project-cost-list {
  overflow: inherit;
}
@media only screen and (max-width: 460px) {
  .table-project-cost-list {
    overflow: auto;
  }
  .listLabourSalary,
  .listEmployeeSalary > .pull-left,
  .listEmployeeSalary > .pull-right {
    float: none !important;
    padding: 2rem;
    text-align: center;
  }
}

/* LPG Tank Horizontal CSS */
.tank-gas-horizontal {
  padding: 1.5em;
  position: relative;
  width: 40rem;
  height: 15rem;
  z-index: 99;
  background: #fff;
  margin: 1rem 7rem;
  border: 1px solid #dddddb;
}
.tank-gas-horizontal:after {
  content: "";
  display: block;
  /* right: 100%; */
  left: 87%;
  top: 0;
  position: absolute;
  width: 10rem;
  height: 15rem;
  border-radius: 45%;
  background: #fff;
  border-right: 3px solid #dddddb;
  z-index: -99;
}
.tank-gas-horizontal:before {
  content: "";
  display: block;
  right: 87%;
  top: 0;
  position: absolute;
  width: 10rem;
  height: 15rem;
  border-radius: 45%;
  background: #fff;
  border-left: 3px solid #dddddb;
  z-index: -99;
}
.tank-feet-left {
  width: 20px;
  height: 25px;
  box-sizing: content-box;
  bottom: -118%;
  position: absolute;
  background: #33333352;
  top: 100%;
  left: 10%;
}
.tank-feet-right {
  width: 20px;
  height: 25px;
  box-sizing: content-box;
  position: absolute;
  background: #33333352;
  top: 100%;
  right: 10%;
}
.tank-logo-energy {
  object-fit: contain;
  position: absolute;
  right: -27px;
  width: 10rem;
  height: 4rem;
}
.tank-logo-partner {
  object-fit: contain;
  position: absolute;
  left: -27px;
  width: 10rem;
  height: 4rem;
}
.tank-text {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  color: #cb2518;
  font-weight: bold;
}

/* Front - LPG Tank CSS */
.tank-gas-front {
  width: 15rem;
  height: 15rem;
  border: 1px solid #dddddb;
  border-radius: 50%
}
.tank-front .tank-gas-front {
  position: absolute;
}
.tank-front .tank-gas-front:nth-child(1) {
  position: relative;
	background: #fff;
	-webkit-text-stroke: 2px #a2e2ff;
}

.tank-front .tank-gas-front:nth-child(2) {
  top: 0;
  background: #a2e2ff;
	animation: animate 4s ease-in-out infinite;
}
@keyframes animate {
	0%,
	100% {
		clip-path: polygon(
			0% 45%,
			16% 44%,
			33% 50%,
			54% 60%,
			70% 61%,
			84% 59%,
			100% 52%,
			100% 100%,
			0% 100%
		);
	}

	50% {
		clip-path: polygon(
			0% 60%,
			15% 65%,
			34% 66%,
			51% 62%,
			67% 50%,
			84% 45%,
			100% 46%,
			100% 100%,
			0% 100%
		);
	}
}
.tank-feet-front:after {
  content: '';
  display: block;
  width: 1rem;
  height: 5rem;
  box-sizing: content-box;
  position: absolute;
  background: #33333352;
  top: 90%;
  left: 20%;
}
.tank-feet-front:before {
  content: '';
  display: block;
  width: 1rem;
  height: 5rem;
  box-sizing: content-box;
  position: absolute;
  background: #33333352;
  top: 90%;
  right: 20%;
}
.tank-gas-front-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 20px;
  color: #cb2518;
}
.bg-dashboard {
  background-color: #343E59;
}

/* Bidding */
.bidding-information {
  list-style: none;
}
.biddingNo {
  vertical-align: middle;
  border-right: 1px solid #0c71ca;
}
.icons-list .biddingSettingIcon {
  font-size: 16px;
}
.media-body .biddingCode {
  margin: 0;
}
.media-right .biddingStatusBadge {
  font-size: 15px;
}
/* ProjectCost Table - Row */
.line-break {
  word-break: break-word;
  white-space: normal;
}