/*----- Analytics data -----*/
table.table tr td .item-wrap label {
  margin-bottom: 2px;
}

table.table tr td .num-wrap  {
  height: 15px;
  display: block;
  background: #8eddf9;
}

table.table tr td .num-wrap .num {
  display: block;
  background-color: #20a8d8;
  height: 15px;
  transition: width 0.8s;
}

#card_body {
  min-height: 600px;
}

table.table-loading {
  width: 100%;
}

table.table-loading thead,
table.table-loading tbody {
  display: table;
  width: 100%;
}

.table-wrapper{
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  box-shadow: 0 0 5px #e8e8e8;
}

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

.table-hover tbody tr:hover{
  background-color: #e6f7ff !important;
}

/* =========================================== */
/* ============ Table Not In Card ============ */
/* =========================================== */

.table-not-in-card.table thead th{
  border-bottom: none;
  border-top: none;
}

.table-not-in-card.table tbody td{
  border-top: 1px solid #e8e8e8;
}


/* =========================================== */
/* ============ Table Not In Card ============ */
/* =========================================== */

.table-in-card.table thead th{
  border-bottom: none !important;
  border-top: 1px solid #e8e8e8;
}

.table-in-card.table td{
  border-top: 1px solid #e8e8e8;
}

/* =============================================== */
/* ===================== Card ==================== */
/* =============================================== */
/* ================================================= */
/* ================== Select site ================== */
/* ================================================= */
.select-site-card .card:hover{
  box-shadow: 0 0 5px #63c2de !important;
  border: 1px solid #63c2de !important;
}

.select-site-card .card:hover .card-footer{
  border-top: 1px solid #63c2de;
}

.card {
  border: 1px solid #e4e7ea !important;
  box-shadow: 0 0 5px #e4e7ea !important;
  /* margin-bottom: 0 !important; */
}
.card .card-header {
  border-bottom: 1px solid #e4e7ea !important;
  background-color: #fff !important;
  text-transform: uppercase !important;
  font-weight: bold !important;
  color: #8f9ba6 !important;
}
.card .card-header .a-card-header-action {
  text-transform: capitalize !important;
  font-weight: normal;
  font-size: 12px;
}
.card .card-header .a-card-header-action:hover {
  text-decoration: underline;
}
.card .card-body .number-in-card {
  font-size: 24px;
  font-weight: bold;
  color: #2f353a;
}
.card .card-body .text-for-number-in-card {
  text-transform: uppercase;
  font-size: 12px;
}
.card .card-body .ant-table-small {
  border: unset !important;
}
.card .card-body .button-bottom-in-card {
  position: absolute;
  bottom: 15px;
  left: 28px;
}
.card .card-footer {
  border-top: 1px solid #e4e7ea;
  background-color: #fff;
}

/* ===================================================== */
/* ==================== PROGRESS ======================= */
/* ===================================================== */
.progress-v2 .progress{
  border-radius: 0 !important;
}

/* ===================================================== */
/* =================== Date range ====================== */
/* ===================================================== */
#reportrange {
  border: 1px solid #e4e7ea;
  font-size: 12px;
  color: #5c6872;
  background: #fff;
  cursor: pointer;
  padding: 5px 10px;
  width: 100%;
  border-radius: 3px;
}

#reportrange .fa-caret-down{
  margin-left: 5px !important;
}

/* ====================================================== */
/* =================== Nav - Tab ======================== */
/* ====================================================== */
.nav-tabs {
  margin-left: 25px;
}

.tab-content{
  border-top: 1px solid #e4e7ea;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

/* ======================================================= */
/* ====================== Class cần ====================== */
/* ======================================================= */
.text-eclipse{
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
}

.lp-text-eclipse{
  width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.badge{
  padding-top: 4px;
}

#wrapper-content{
  
}

/* ======================================================== */
/* ======================== Badge ========================= */
/* ======================================================== */
.badge-border-darkorange{
  border: 1px solid darkorange;
  color: darkorange;
}

.badge-border-darkorchild{
  border: 1px solid darkorchid;
  color: darkorchid;
}

.badge-border-darkseegreen{
  border: 1px solid darkseagreen; 
  color: darkseagreen;
}

.badge-border-darkviolet{
  border: 1px solid darkviolet;
  color: darkviolet;
}

.badge-border-deepskyblue{
  border: 1px solid deepskyblue;
  color: deepskyblue;
}

.pointer {
  cursor: pointer;
}

.font-weight-500 {
  font-weight: 500;
}

/* ================================================ */
/* ==================== Select 2  ================= */
/* ================================================ */
.select-small .select2-selection__rendered{
  font-size: 12px !important;
}

.select-small .select2-container--bootstrap .select2-selection--single{
  height: 28px !important;
  line-height: 16px !important;
}

/* ================================================ */
/* ==================== Button ==================== */
/* ================================================ */
.show-all-button{
  font-size: 11px;
  border: 1px solid #c8ced3;
  padding: 1px 5px;
  border-radius: 3px;
  display: inline-block;
  color: #5c6873
}

.show-all-button:hover{
  cursor: pointer;
  background-color: #f0f3f5;
}

/* ======================================================= */
/* ================== Button big icon ==================== */
/* ======================================================= */
.wrapper-btn-big-icon{
  position: absolute;
  right: 5px;
  top: -15px;
}

.btn-big-icon{
  background-color: #fff;
  border: none;
  padding: 8px;
  color: rgb(115, 129, 143);
}

.btn-big-icon i{
  font-size: 20px;
  display: block;
}

.btn-big-icon span.text-button{
  font-size: 10px;
  display: block;
  padding-top: 5px;
}


/* ================================================ */
/* ===================== Other ==================== */
/* ================================================ */
.number-in-table{
  /* padding-right: 25px !important; */
}

.title-ellipsis{
  max-width: 350px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================================================ */
/* ========== Show and hide button in table ======= */
/* ================================================ */
.td-have-button{
  position: relative;
}

.text-hover-hidden {
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  padding-right: 0.5rem;
}
.fa-external-link {
  color: #20a8d8
}
.table tbody tr td .button-in-table{
  display: none;
}

table tbody tr:hover td .button-in-table{
    display: flex;
    align-items: center;
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    background-color: #e6f7ff;
    padding-left: 15px;
    padding-right: 15px;
}

/* ================================================= */
/* ================== Main title =================== */
/* ================================================= */
.text-main-title{
  color: #2f353a;
}

/* ================================================= */
/* ================== Lable input =================== */
/* ================================================= */
#fileLabel {
  right: 1rem;
  left: 1rem;
  overflow: hidden;
}

.popover {
  max-width: 1000px !important;
}