/*#region fonts*/
@font-face {
  font-family: 'Lato';
  src: url("fonts/Lato-Regular.eot");
  src: url("fonts/Lato-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/Lato-Regular.woff") format("woff"), url("fonts/Lato-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'Lato-Semibold';
  src: url("fonts/Lato-Semibold.eot");
  src: url("fonts/Lato-Semibold.eot?#iefix") format("embedded-opentype"), url("fonts/Lato-Semibold.woff") format("woff"), url("fonts/Lato-Semibold.ttf") format("truetype");
  font-weight: 600; }

@font-face {
  font-family: 'Lato-Bold';
  src: url("fonts/Lato-Bold.eot");
  src: url("fonts/Lato-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/Lato-Bold.woff") format("woff"), url("fonts/Lato-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: 'Sarabun';
  src: url("fonts/Sarabun-ExtraBold.eot");
  src: url("fonts/Sarabun-ExtraBold.eot?#iefix") format("embedded-opentype"), url("fonts/Sarabun-ExtraBold.woff") format("woff"), url("fonts/Sarabun-ExtraBold.ttf") format("truetype");
  font-style: normal; }

@font-face {
  font-family: 'Sarabun-Bold';
  src: url("fonts/Sarabun-Bold.eot");
  src: url("fonts/Sarabun-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/Sarabun-Bold.woff") format("woff"), url("fonts/Sarabun-Bold.ttf") format("truetype");
  font-style: normal; }

@font-face {
  font-family: 'Sarabun-SemiBold';
  src: url("fonts/Sarabun-SemiBold.eot");
  src: url("fonts/Sarabun-SemiBold.eot?#iefix") format("embedded-opentype"), url("fonts/Sarabun-SemiBold.woff") format("woff"), url("fonts/Sarabun-SemiBold.ttf") format("truetype");
  font-style: normal; }

@font-face {
  font-family: 'Source-Sans-Pro';
  src: url("fonts/sourcesanspro-regular.woff2") format("woff2"), url("fonts/sourcesanspro-regular.woff") format("woff"), url("fonts/sourcesanspro-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Source-Sans-Pro-bold';
  src: url("fonts/sourcesanspro-bold.woff2") format("woff2"), url("fonts/sourcesanspro-bold.woff") format("woff"), url("fonts/sourcesanspro-bold.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Source-Sans-Pro-semibold';
  src: url("fonts/sourcesanspro-semibold.woff2") format("woff2"), url("fonts/sourcesanspro-semibold.woff") format("woff"), url("fonts/sourcesanspro-semibold.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

/*#endregion fonts*/
/* colors */
.clientGridPager div.pagerButton.prev, .clientGridPager div.pagerButton.next, .clientGridPager div.pagerButton.prev span, .clientGridPager div.pagerButton.next span, .clientGridPager div.pageIndicator, .clientGridPager div.pageIndicator .pageCurrent {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

.clientGrid, .clientGrid thead tr {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.clientGrid {
  border-collapse: collapse;
  background-color: #FFFFFF; }
  .clientGrid thead td,
  .clientGrid thead th {
    padding: 5px;
    color: #7b7b7b;
    line-height: 15px;
    font-size: 12px;
    text-overflow: ellipsis;
    font-weight: normal;
    text-align: center; }
  .clientGrid thead tr {
    font-weight: bold;
    color: #000000; }
  .clientGrid tbody tr {
    background-color: #FEFEFE;
    height: 57px;
    border-bottom: none !important;
    transition: background-color .5s; }
    .clientGrid tbody tr:hover {
      background-color: #FFFFFF !important;
      transition: background-color .5s; }
      .clientGrid tbody tr:hover .turnover-icon {
        background-color: #EFEFEF;
        transition: background-color .5s; }
      .clientGrid tbody tr:hover td .tablesaw-cell-content div .currency-flag {
        background-color: #EFEFEF;
        transition: background-color .5s; }
    .clientGrid tbody tr:first-child {
      border-top: 2px solid #EFEFEF; }
    .clientGrid tbody tr td {
      color: #333333;
      font-size: 16px;
      line-height: 35px;
      vertical-align: middle;
      text-align: center;
      display: table-cell; }
    .clientGrid tbody tr .title {
      font-size: 16px;
      float: left;
      margin: 0;
      line-height: 1.2;
      max-width: calc(100% - 60px);
      text-overflow: ellipsis;
      overflow: hidden; }
      .clientGrid tbody tr .title span:not(.name) {
        font-size: 14px;
        color: #7b7b7b; }
    .clientGrid tbody tr .value {
      font-size: 18px;
      margin: 0;
      line-height: 40px;
      padding-right: 20px;
      text-align: right; }
      .clientGrid tbody tr .value small {
        font-size: 14px;
        text-transform: uppercase; }
        .clientGrid tbody tr .value small span {
          color: #7b7b7b; }
    .clientGrid tbody tr .color-2 {
      color: #8dbc42; }
    .clientGrid tbody tr .color-credit {
      font-size: 15px;
      font-family: "Source-Sans-Pro-bold", sans-serif;
      padding-right: 0px;
      color: #52AE30; }
    .clientGrid tbody tr .color-debit {
      font-size: 15px;
      font-family: "Source-Sans-Pro-bold", sans-serif;
      padding-right: 0px; }
  .clientGrid .Multiselect {
    text-align: center; }
  .clientGridPager {
    height: 40px;
    justify-content: flex-end;
    padding-top: 15px;
    border-top: 1px solid #C7C7C7;
    padding-bottom: 20px;
    position: relative; }
    .clientGridPager .labelPager {
      position: absolute;
      left: 0px;
      font-family: "Source-Sans-Pro-semibold", sans-serif;
      color: rgba(0, 0, 0, 0.54);
      font-size: 13px;
      margin-top: 10px; }
    .clientGridPager div.pagerButton {
      width: 40px;
      height: 40px;
      cursor: pointer;
      -webkit-transition: all 0.4s ease;
      -moz-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
      -o-transition: all 0.4s ease;
      transition: all 0.4s ease;
      background-color: #FFFFFF;
      border-radius: 25px;
      border: none;
      transition: box-shadow .5s;
      cursor: pointer;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
      margin: 0 4px; }
      .clientGridPager div.pagerButton:hover {
        box-shadow: 0 0 16px rgba(0, 0, 0, 0.08); }
      .clientGridPager div.pagerButton.first, .clientGridPager div.pagerButton.last {
        display: none; }
      .clientGridPager div.pagerButton.prev, .clientGridPager div.pagerButton.next {
        justify-content: center;
        align-items: center; }
      .clientGridPager div.pagerButton.prev {
        transform: rotate(180deg);
        /*.rotate{
                        transform: rotate(180deg)
                    }*/ }
      .clientGridPager div.pagerButton.next {
        margin-right: 0; }
    .clientGridPager div.pageIndicator {
      position: relative;
      padding-right: 20px;
      line-height: 18px;
      font-family: "Source-Sans-Pro-semibold", sans-serif;
      color: rgba(0, 0, 0, 0.54);
      font-size: 13px; }
      .clientGridPager div.pageIndicator .pageCurrent {
        width: 50px;
        height: 40px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
        -webkit-transition: box-shadow .5s;
        transition: box-shadow .5s;
        cursor: pointer;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        border: 1px solid #dfe7ef;
        margin: 0 13px;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: center;
        background-color: #FFFFFF;
        border-radius: 25px;
        position: relative;
        margin: 0 13px;
        color: rgba(0, 0, 0, 0.87);
        font-size: 15px;
        font-family: "Source-Sans-Pro", sans-serif; }
        .clientGridPager div.pageIndicator .pageCurrent:hover {
          box-shadow: 0 0 16px rgba(0, 0, 0, 0.08); }
    .clientGridPager .disabled {
      background-color: #EFEFEF;
      border: 1px solid #ccc; }
    .clientGridPager .sort-indicator {
      position: absolute;
      left: 100%;
      margin-left: -12px;
      top: 50%;
      margin-top: -8px; }
    .clientGridPager .wrapper {
      cursor: pointer;
      width: fit-content;
      display: block;
      position: absolute;
      left: 0px;
      height: 50px;
      display: flex; }
      .clientGridPager .wrapper .pageSize {
        border: 1px solid #dcdcdc;
        border-radius: 25px;
        padding: 0;
        cursor: pointer;
        overflow: hidden;
        height: fit-content;
        margin-left: 50px;
        background-color: white;
        z-index: 2;
        box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.12);
        /*width: 70px;
                height: 40px;
                cursor: pointer;
                font-family: $font-7;
                font-size: 15px;
                position: absolute !important;
                @include transition(all 0.4s ease);
                background-color: $color-13 !important;
                border-radius: 25px;
                border: none;
                transition: box-shadow .5s;
                box-shadow: 0 8px 16px rgba(0,0,0,.08);
                margin: 0 4px;
                -moz-appearance: none;
                appearance: none;
                left: 45px !important;
                background: url(images/icons/arrows-2.png) 70% no-repeat;
                background-size: 9px;
                text-align: left;
                padding: 11px 35px 11px 18px;
                display: none;*/ }
        .clientGridPager .wrapper .pageSize .selected {
          background-color: white;
          padding: 10px 35px 10px 16px; }
          .clientGridPager .wrapper .pageSize .selected .activeNumber:after {
            content: "";
            display: block;
            width: 9px;
            height: 14px;
            position: absolute;
            top: 14px;
            right: 15px;
            background: url(images/icons/arrows-1.png) 50% no-repeat;
            background-size: 9px;
            background-color: inherit; }
        .clientGridPager .wrapper .pageSize .list {
          border-top: 2px solid #52ae30;
          display: none; }
          .clientGridPager .wrapper .pageSize .list.active {
            display: block; }
          .clientGridPager .wrapper .pageSize .list li {
            margin: 0;
            padding: 0;
            padding: 10px 35px 10px 16px;
            border-top: 1px solid transparent;
            border-bottom: 1px solid transparent;
            background-color: inherit; }
            .clientGridPager .wrapper .pageSize .list li:hover {
              background-color: whitesmoke;
              border-color: #dcdcdc; }

.clientGrid tr.blueFonts > td {
  color: blue; }

.clientGrid tr.redFonts > td {
  color: red; }

.clientGrid tr.greenFonts > td {
  color: green; }

.clientGrid td.align-left {
  text-align: left; }

.clientGrid td.align-right {
  text-align: right; }

.clientGrid td.align-center {
  text-align: center; }

html[dir="rtl"] .clientGrid td.align-left {
  text-align: right; }

html[dir="rtl"] .clientGrid td.align-right {
  text-align: left; }

@media (max-width: 39.9375em) {
  .clientGrid td {
    white-space: normal !important; }
    .clientGrid td.align-right {
      text-align: left; } }
