@import "./config.less";
@import "./table.less";

.containerExtraTop {
  padding: 105px 50px 55px;
}

.grid-container {
  direction: rtl;
  display: grid;
  align-items: center;
  justify-items: right;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(50px, auto);
  grid-gap: 15px;
}

.box {
  background: @white;
  border: @border;
  margin-top: -3px;
  height: 50px;
  align-items: center;
  padding: 0px 15px;
}

.grid-container.collapse {
  grid-gap: 0;
}

.grid-container > div[class^="grid-col"] {
  text-align: right;
}

.grid-col-1 {
  grid-column: span 1;
  width: 100%;
}

.grid-col-10 {
  grid-column: span 10;
  width: 100%;
}

.grid-col-11 {
  grid-column: span 11;
  width: 100%;
}

.grid-col-12 {
  grid-column: span 12;
  width: 100%;
}

.grid-col-1-center {
  grid-column: span 1;
}

.grid-col-6 {
  grid-column: span 6;
  width: 100%;
}

.grid-col-6-center {
  grid-column: span 6;
}

.grid-col-7 {
  grid-column: span 7;
  width: 100%;
}

.grid-col-7-center {
  grid-column: span 7;
}

.grid-col-8 {
  grid-column: span 8;
  width: 100%;
}

.grid-col-8-center {
  grid-column: span 8;
}

.grid-col-9 {
  grid-column: span 9;
  width: 100%;
}

.grid-col-9-center {
  grid-column: span 9;
}

.grid-col-3 {
  grid-column: span 3;
  width: 100%;
}

.grid-col-3-center {
  grid-column: span 3;
}

.grid-col-4 {
  grid-column: span 4;
  width: 100%;
}

.grid-col-4-center {
  grid-column: span 4;
}

.grid-col-5 {
  grid-column: span 5;
  width: 100%;
}

.grid-col-5-center {
  grid-column: span 5;
}

.grid-col-2 {
  grid-column: span 2;
  width: 100%;
}

.grid-col-2-center {
  grid-column: span 2;
}

.grid-col-full {
  grid-column: span 12;
  width: 100%;
}

.grid-col-full-center {
  grid-column: span 12;
}

.grid-align-vertical {
  align-self: center;
}

.extended-container {
  margin: auto;
}

.modalRow {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 0.2fr 0.5fr;
  grid-template-rows: repeat(auto, auto-fill);
  grid-gap: 15px;
  margin-bottom: 10px;
}

.card {
  background: #fff !important;
  box-sizing: border-box !important;
  border: 1px solid @grey-border !important;
  box-shadow: @table-shadow;
  padding: 15px;
}

.modalRow > div {
  text-align: right;
}

.modalRowDouble {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 0.21fr 0.25fr 0.23fr;
  grid-template-rows: repeat(auto, auto-fill);
  grid-gap: 15px;
  margin-bottom: 10px;
}

.modalRowDouble > div {
  text-align: right;
}

.modalRowTriple {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 0.2fr 0.2fr 0.2fr 0.2fr;
  grid-template-rows: repeat(auto, auto-fill);
  grid-gap: 15px;
  height: 30px;
  margin-bottom: 10px;
}
.modalRowTriple > div {
  text-align: right;
}