/* *-----------------------------------------------------------------------------------------* */
/* CARD GENERAL
/* *-----------------------------------------------------------------------------------------* */
.card {
  box-shadow: var(--shadow-card)!important;
  border-radius: var(--radius-sm)!important;
  margin-bottom: var(--space-lg);
}
.card-success:not(.card-outline) .btn-tool,
.card-dashboard:not(.card-outline) .btn-tool {
  color: var(--color-text-lightest)!important;
}
.card-success:not(.card-outline) .btn-tool:hover,
.card-dashboard:not(.card-outline) .btn-tool:hover {
  color: var(--color-text)!important;
}
.card-success:not(.card-outline) .card-header{
  background-color: var(--color-white)!important;
  color: var(--color-text)!important;
  border-bottom: 0;
}
.card-success:not(.card-outline) .card-header a{
  color: var(--color-text)!important;
}
.card-header {
  position: relative;
  background-color: var(--color-sidebar);
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
  padding: var(--space-card-padding) !important;
  padding-bottom: 0 !important;
}
.card-body{
  padding: var(--space-card-padding);
  padding-top: var(--space-xs);
}

.card-title {
  font-size: var(--font-xl);
}

/* Page Title */
.card_header_title {
  vertical-align: middle;
  font-weight: var(--font-weight-normal);
  font-size: var(--font-2xl);
  line-height: var(--font-2xl);
  color: var(--color-text);
}
.card_header_area {
  color: var(--color-white);
  margin: var(--space-md) 0;
}

.card_spacing {
  margin-top: calc(-1 * var(--space-card-padding));
  padding: var(--space-card-padding);
  padding-bottom: 0;
}
.card-body-form {
  padding: var(--space-card-padding) var(--space-base) var(--space-xl);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-xs);
}
.card-inside-card {
  padding: var(--space-card-padding) !important;
  border-radius: var(--radius-xs);
  background: #f9f9f9 !important;
  -webkit-box-shadow: 0 1px #d9d9d9;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
	0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06);
}
.card-inside-card-dark {
  padding: var(--space-card-padding) !important;
  border-radius: var(--radius-xs);
  background: #e4e4e4 !important;
  -webkit-box-shadow: 0 1px #d9d9d9;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
	0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06);
}
.card_container {
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  margin-bottom: var(--space-2xl) !important;
}
.card.card_container.flex-fill{
  width: 100%;
}
/* to set same height for 2 divs on same row */
.card_container_flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.card_container_child_flex {
  flex : 1 1 100%
}
.jg_card_header {
  background-color: #fff !important;
  padding: 0px !important;
  border-bottom:none!important;
}
.jg_card_header_title {
  margin-left: var(--space-base);
  margin-top: var(--space-xs);
  font-size: var(--font-xl);
  font-weight: var(--font-weight-semibold);
}
.card_header_logo {
  width: 38px;
  margin-right: 10px;
}
/* *-----------------------------------------------------------------------------------------* */
/* for CUSTOM COMPUTATION TABLE (in SO; AR; PO screen)
/* *-----------------------------------------------------------------------------------------* */
.sale_calc_table_container {
  padding: 14px;
  background-color: white;
  border-radius: 5px;
  margin-right: 0.22%;
  margin-bottom: 0px!important;
  height:100%;
}
.sale_calc_table {
  border: var(--space-2xs) solid var(--color-border-light);
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
}
.sale_calc_table td,
.sale_calc_table th {
  padding: var(--space-2xs) !important;
}

.sale_calc_table th {
  background-color: var(--color-bg)!important;
}

.sale_calc_table tbody td {
  background-color: var(--color-bg);
  background-image: linear-gradient(var(--color-border), var(--color-border)),
	linear-gradient(var(--color-border), var(--color-border));
  background-repeat: no-repeat;
  background-size: 0px 0%, 96.3% 1px;
  background-position: bottom;
  height: 50%;
}

.sale_calc_table_title {
  border: 1px solid var(--color-border)!important;
  background-color: var(--tabu-cell-uneditable-color)!important;
}
.sale_calc_table td span {
  width: 100%;
  height: 100%;
  display: grid;
}

.sale_calc_last_row th,
.sale_calc_last_row td {
  background-color: var(--color-bg)!important;
  background-image: none !important;
}
.calc_table td,
.calc_table th {
  padding: var(--space-xs)!important;
}

/* *-----------------------------------------------------------------------------------------* */
/* for CUSTOM FORM FEEDBACK
/* *-----------------------------------------------------------------------------------------* */
.feedback-table {
  width: 100%;
  margin-bottom: calc(-1 * var(--space-lg));
}
.card-feedback {
  background: var(--color-bg-lighter);
}
.card-feedback:hover {
  background: var(--color-bg-lighter);
}
.title-feedback {
  font-size: var(--font-xl)!important;
  font-weight: 600!important;
  color: var(--color-text-dark);
}