/**
 * Clear inner floats
 */
.clearfix::after {
  clear: both;
  content: '';
  display: table; }

/**
 * Hide text while making it readable for screen readers
 * 1. Needed in WebKit-based browsers because of an implementation bug;
 *    See: https://code.google.com/p/chromium/issues/detail?id=457146
 */
.hide-text {
  overflow: hidden;
  padding: 0;
  /* 1 */
  text-indent: 101%;
  white-space: nowrap; }

/**
 * Hide element while making it readable for screen readers
 * Shamelessly borrowed from HTML5Boilerplate:
 * https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133
 */
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.title {
  font-size: 2rem;
  display: block;
  line-height: 2.25rem; }
  @media (max-width: 1239px) {
    .title {
      font-size: 1.25rem;
      line-height: 1.5rem; } }

.sub-title {
  font-size: 1rem;
  margin-bottom: 0.625rem;
  display: block;
  width: 100%;
  line-height: 1.25rem; }
  .sub-title + table {
    margin-top: 0 !important; }

.bold {
  font-weight: 600; }

.small {
  font-size: 0.875rem; }

p.small {
  margin: 0; }

td i {
  font-size: 1.25rem; }

body {
  background: #2E4551;
  margin: 0;
  height: 100%;
  width: 100%;
  font-family: aktiv-grotesk, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  color: #000000; }
  @media (min-width: 1441px) {
    body {
      overflow: hidden; } }

a {
  color: #000000; }

img {
  max-width: 100%; }

p {
  line-height: 1.375rem; }

hr {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem; }

@media (max-width: 1679px) {
  .totals {
    width: 100%;
    margin: 1.25rem auto; } }
.totals .row + .row {
  margin-top: 0.3125rem; }
.totals span {
  margin-right: 0.9375rem;
  min-width: 9.375rem; }

.u-pad-40 {
  padding: 2.5rem; }

.u-pad-y-40 {
  padding: 2.5rem 0; }

@media (min-width: 768px) and (max-width: 1023px) {
  .u-mb-tb-15 {
    margin-bottom: 0.9375rem; } }

.u-h-100 {
  height: 100vh; }

.u-ml-auto {
  margin-left: auto; }

.u-mr-auto {
  margin-right: auto; }

.u-w-20vw {
  width: 20vw;
  min-width: 12.5rem; }

.u-w-70 {
  max-width: 70%; }
  @media (max-width: 1439px) {
    .u-w-70 {
      max-width: 100%; } }
@media (min-width: 1440px) and (max-width: 1679px) {
  .u-w-70 {
    max-width: 85%; } }

.u-mt-20 {
  margin-top: 1.25rem !important; }

.u-ml-5 {
  margin-left: 0.3125rem !important; }

.u-ml-20 {
  margin-left: 1.25rem !important; }

.u-ml-30 {
  margin-left: 1.875rem !important; }

.u-ml-40 {
  margin-left: 2.5rem !important; }

.u-mr-20 {
  margin-right: 1.25rem !important; }

.u-mr-30 {
  margin-right: 1.875rem !important; }

.u-mr-40 {
  margin-right: 2.5rem !important; }

.u-date-w {
  width: 9.375rem !important; }

.u-mt-0 {
  margin-top: 0 !important; }

.u-mb-0 {
  margin-bottom: 0 !important; }

.u-mb-10 {
  margin-bottom: 0.625rem !important; }

.u-mb-20 {
  margin-bottom: 1.25rem !important; }

.u-mb-60 {
  margin-bottom: 3.75rem !important; }

.u-ml-0 {
  margin-left: 0 !important; }

.u-br {
  border-right: 1px solid black; }

.u-w-auto {
  width: auto; }

.accordian-box {
  width: 100%;
  display: block;
  margin-bottom: 20px;
  position: relative; }
  .accordian-box button.accordian {
    background: #F5F5F5;
    cursor: pointer;
    padding: 0.9375rem 0.9375rem;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1rem;
    transition: 0.4s;
    width: 100%;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center; }
    .accordian-box button.accordian .icon {
      margin-right: 1.25rem;
      width: 1.25rem;
      display: flex;
      align-items: center;
      justify-content: center; }
      .accordian-box button.accordian .icon i {
        color: #179D21;
        font-size: 1.25rem; }
    .accordian-box button.accordian::after {
      content: '\f078';
      font-weight: 600;
      font-family: 'Font Awesome 5 Pro';
      position: absolute;
      right: 15px;
      color: #179D21; }
    .accordian-box button.accordian.active:hover::after {
      content: "\f054";
      font-weight: 600;
      font-family: 'Font Awesome 5 Pro';
      position: absolute;
      right: 15px;
      color: #179D21; }
  .accordian-box div.panel {
    padding: 0 0.9375rem 1.5625rem;
    display: none;
    background: #F5F5F5;
    overflow: hidden; }
    .accordian-box div.panel .date {
      font-size: 14px; }
    .accordian-box div.panel .buttons {
      margin-top: 3.75rem;
      text-align: right; }

.box {
  border: 0.0625rem solid #9A9A9A;
  padding: 0.9375rem;
  width: 100%;
  margin-bottom: 1rem; }
  .box__title {
    width: 10%;
    font-weight: 600; }
  .box__form {
    width: 75%; }
    .box__form .form__row {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      justify-content: space-between;
      margin-bottom: 0.625rem; }
      @media (max-width: 1679px) {
        .box__form .form__row {
          margin-bottom: 0; } }
      .box__form .form__row .form__group {
        width: calc(50% - 0.625rem);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between; }
        @media (max-width: 1679px) {
          .box__form .form__row .form__group {
            margin-bottom: 0.625rem;
            width: 100%; } }
        .box__form .form__row .form__group.flex__justify-start {
          justify-content: flex-start; }
        .box__form .form__row .form__group label {
          width: calc(30% - 0.625rem);
          text-align: right;
          margin-right: 0.9375rem; }
          @media (max-width: 1679px) {
            .box__form .form__row .form__group label {
              margin-bottom: 0; } }
        .box__form .form__row .form__group input:not([type="radio"]), .box__form .form__row .form__group select {
          width: calc(70% - 0.625rem);
          background: #F5F5F5;
          color: #393939;
          border: none;
          outline: none;
          padding: 0.375rem 0; }
  .box__chart {
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: center; }

.blocks {
  width: calc(100% + 1.25rem);
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  margin-left: -1.25rem; }
  .blocks .block {
    padding: 2.5rem 1.25rem 0.9375rem;
    background: #F5F5F5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: calc(13.8% - 1.25rem);
    margin-left: 1.25rem;
    height: auto;
    min-height: 9.375rem;
    margin-bottom: 1.25rem; }
@media (min-width: 768px) and (max-width: 1023px) {
  .blocks .block {
    width: calc(100% - 1.25rem); } }

@media (min-width: 1024px) and (max-width: 1439px) {
  .blocks .block {
    width: calc(25% - 1.25rem); } }

@media (min-width: 1440px) and (max-width: 1679px) {
  .blocks .block {
    width: calc(20% - 1.25rem); } }

    .blocks .block-title {
      font-size: 1.25rem;
      width: 100%;
      text-align: center;
      margin: 1.25rem 0;
      max-width: 100px;
      line-height: 1.5rem; }
    .blocks .block-icon {
      width: 100%;
      text-align: center; }
      .blocks .block-icon img {
        width: 40px;
        height: 100%; }
      .blocks .block-icon i {
        color: #179D21;
        font-size: 2.5rem; }
    .blocks .block-button {
      text-align: center; }
    .blocks .block.block__create:hover {
      cursor: pointer; }

.export .export-block {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 0.625rem; }
.export .btn {
  margin-right: 0.625rem; }

.btn {
  text-decoration: none;
  border: none;
  outline: none;
  font-size: 1rem;
  padding: 0.4375rem 0.625rem;
  width: auto;
  display: inline-block;
  margin-left: 0.375rem; }
  .btn:hover {
    cursor: pointer; }
  .btn__default {
    background: #F5F5F5;
    color: #000000;
    text-align: center; }
    .btn__default.active, .btn__default:hover {
      background: #D6D6D6; }
  .btn__sidebar {
    font-weight: 600; }
    .btn__sidebar--full {
      margin-bottom: 0.625rem;
      width: 100%;
      padding: 0.4375rem 0.9375rem; }
  .btn__success {
    background: #179D21;
    color: #ffffff; }
    .btn__success:hover {
      background: #04550A; }
  .btn__100 {
    width: 100%; }
  .btn__loans {
    padding: 0.4375rem 1.875rem; }
  .btn__grey {
    background: #393939;
    color: #ffffff;
    text-decoration: none; }
  .btn__red {
    background: #D46557;
    color: #ffffff;
    text-decoration: none; }
    .btn__red:hover {
      background: #a55348; }
  .btn__orange {
    background: #E2A064;
    color: #ffffff;
    text-decoration: none; }
    .btn__orange:hover {
      background: #d28c4d; }
  .btn__green {
    background: #179D21;
    color: #ffffff;
    text-decoration: none; }
    .btn__green:hover {
      background: #04550A; }

.buttons {
  width: auto; }
  .buttons .btn {
    margin-left: 0.375rem; }
  .buttons .btn:first-of-type {
    margin-left: 0; }

form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; }
  form * {
    font-size: 1rem; }
  form .form-inner [class^="col-"]:not(:last-child) {
    margin-right: 1.25rem; }
  form input, form textarea {
    width: 100%;
    background: #F5F5F5;
    color: #393939;
    border: none;
    padding: 0.4375rem 1.875rem;
    font-style: italic;
    outline: none; }
    form input::placeholder, form textarea::placeholder {
      font-style: italic; }
    form input[type="date"], form textarea[type="date"] {
      padding: 0.31rem 0 !important; }
  form textarea {
    font-family: aktiv-grotesk, sans-serif;
    padding: 1.875rem; }
  form select {
    width: 100%;
    background: #F5F5F5;
    color: #393939;
    border: none;
    padding: 0.4375rem 1.875rem;
    font-style: italic;
    outline: none; }
    form select:hover, form select:focus {
      cursor: pointer; }
  form label {
    display: block;
    margin-bottom: 0.625rem;
    width: 100%; }
  form .file {
    margin-bottom: 0.625rem; }
  form .form-row {
    margin-bottom: 1.25rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    form .form-row.flex__justify-start {
      justify-content: flex-start; }
  form .form-group {
    margin-bottom: 1.875rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap; }
  form.max-content .row {
    width: 100%; }
  form.max-content:last-child input, form.max-content:last-child select {
    margin-right: 0; }
  @media (max-width: 1023px) {
    form.max-content .form-group {
      display: flex !important; } }
  form.max-content .form-group input, form.max-content .form-group select {
    width: auto;
    margin-right: 0.375rem;
    min-width: 9rem;
    margin-bottom: 0.625rem; }
  form.max-content .form-group label {
    margin-right: 0.375rem;
    margin-bottom: 0.625rem;
    width: auto; }
  form.max-content .form-group button {
    margin-bottom: 0.625rem;
    margin-right: 0.375rem; }
  form.max-content .form-group:last-of-type button {
    margin-right: 0; }
  @media (max-width: 1023px) {
    form.max-content .form-group, form.max-content input, form.max-content select, form.max-content label, form.max-content .btn, form.max-content button {
      width: 100% !important; } }
  form.looking-for {
    width: 18.75rem; }
    form.looking-for select {
      width: 100%; }
  form.form-accounts label {
    width: auto; }
  form.form-accounts input {
    width: 70px;
    margin-left: 0.625rem; }
  form.form-accounts select {
    width: 120px;
    margin-left: 0.625rem; }
  form.form-accounts .col-2-3 input:first-of-type {
    margin-left: 0; }
  form.form-accounts .col-2-3 select:first-of-type {
    margin-left: 0; }
  form.small-input input {
    width: 8rem !important;
    min-width: 8rem !important; }

::-webkit-calendar-picker-indicator {
  filter: invert(35%) sepia(86%) saturate(4433%) hue-rotate(119deg) brightness(104%) contrast(82%); }

select::-ms-expand {
  filter: invert(35%) sepia(86%) saturate(4433%) hue-rotate(119deg) brightness(104%) contrast(82%); }

#accounts_money_in_wrapper, #accounts_money_out_wrapper, #extra_information_wrapper, #loan_tasks_wrapper {
  margin-bottom: 0; }

.form-row.flex__center-y label {
  margin-bottom: 0; }

.condensed-form .form-group {
  width: auto;
  display: block; }

.checkbox-container {
  display: flex;
  align-items: center;
  width: auto;
  position: relative;
  padding-left: 3.125rem;
  margin-bottom: 0;
  cursor: pointer;
  font-size: 1rem !important;
  height: auto;
  min-height: 2.5rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  @media (max-width: 374px) {
    .checkbox-container {
      height: 2.1875rem;
      padding-left: 2.8125rem; } }
  @media (min-width: 1024px) {
    .checkbox-container:hover input ~ .checkmark {
      background-color: #eaf6eb; } }
  .checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0; }
    .checkbox-container input:checked ~ .checkmark {
      background-color: #ffffff; }
    .checkbox-container input:checked ~ .checkmark:after {
      display: block; }
  .checkbox-container .checkmark:after {
    left: 0.75rem;
    top: 0.25rem;
    width: 0.25rem;
    height: 1rem;
    border: solid #189d21;
    border-width: 0 0.1875rem 0.1875rem 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg); }

.checkbox-group {
  margin-left: 0.9375rem; }

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.875rem;
  width: 1.875rem;
  background-color: #ffffff;
  border: 0.125rem solid #179D21;
  border-radius: 0.625rem; }
  .checkmark:after {
    content: "";
    position: absolute;
    display: none; }

select.small-select {
  min-width: 100px !important;
  width: 120px !important;
  padding: 0.4375rem 0.625rem !important; }

.modal {
  width: 21.875rem;
  min-height: 18.75rem;
  background: #ffffff;
  padding: 3.75rem 1.5625rem;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; }
  @media (max-width: 767px) {
    .modal {
      padding: 0 1.5625rem;
      width: 100%;
      min-height: 100vh;
      height: 100vh; } }
  .modal__content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    text-align: center; }
    .modal__content--logo {
      width: 100%; }
      .modal__content--logo img {
        height: 100px; }
    .modal__content--title {
      width: 100%;
      margin: 0.975rem 0; }
    .modal__content p {
      width: 100%;
      margin-bottom: 1.875rem; }
    .modal__content a {
      display: block;
      width: 100%;
      margin-bottom: 1.875rem; }
    .modal__content input, .modal__content label {
      text-align: center; }
    .modal__content .buttons {
      min-width: 9.375rem;
      margin: auto; }
      .modal__content .buttons .btn {
        width: auto;
        padding: 0.375rem 2.5rem; }
        .modal__content .buttons .btn + .btn {
          margin-top: -0.975rem; }

.loan-record-id .loan-id {
  margin: 1.25rem 0; }
  .loan-record-id .loan-id span {
    display: block;
    font-weight: 600;
    margin-top: 0.3125rem; }

.record {
  margin-bottom: 1.25rem; }
  .record .record-label {
    font-size: 0.875rem;
    display: block;
    margin-bottom: 0.3125rem;
    font-weight: 600; }
  .record p {
    margin: 0; }
@media (min-width: 769px) and (max-width: 1240px) {
  .record p {
    font-size: 14px; } }

  .record:last-of-type {
    margin-bottom: 0; }

.sidebar {
  padding: 3.125rem 2.5rem;
  background: #ffffff;
  height: 100vh;
  min-height: 100vh;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto; }
  @media (max-width: 768px) {
    .sidebar {
      height: auto;
      min-height: auto; } }
@media (min-width: 769px) and (max-width: 1240px) {
  .sidebar {
    padding: 3.125rem 1.875rem; } }

@media (min-width: 1241px) and (max-width: 1440px) {
  .sidebar {
    padding: 3.125rem 2.5rem; } }

@media (min-width: 1441px) and (max-width: 1680px) {
  .sidebar {
    padding: 3.125rem 2.5rem; } }

  .sidebar__logo {
    text-align: center; }
    @media (max-width: 768px) {
      .sidebar__logo img {
        height: 100px; } }
  .sidebar__user {
    text-align: center;
    margin: 0 0 1.875rem; }
    .sidebar__user--firstname, .sidebar__user--surname {
      display: block;
      font-size: 2rem;
      line-height: 2.25rem; }
    .sidebar__user--firstname {
      margin-top: 0.9375rem; }
  .sidebar__search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between; }
    .sidebar__search input {
      width: 100%;
      margin-bottom: 0.9375rem; }
  .sidebar__links {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2.5rem; }

.tab {
  background: #ffffff;
  padding: 1.5625rem;
  margin-top: 2.5rem; }
  .tab__admin {
    min-height: calc(100vh - 15.625em);
    height: calc(100vh - 15.625em);
    overflow: auto; }
  .tab__100 {
    min-height: calc(100vh - 8.125em);
    height: calc(100vh - 8.125em);
    overflow: auto; }
  .tab__modal {
    background: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center; }
  .tab__loan {
    min-height: calc(100vh - 25em);
    height: calc(100vh - 25em);
    overflow: auto; }
    @media (max-width: 768px) {
      .tab__loan {
        height: auto;
        min-height: auto; } }
    @media (min-width: 769px) {
      .tab__loan {
        min-height: calc(100vh - 25em);
        height: calc(100vh - 25em);
        overflow: auto; } }

.loan-info .row {
  margin-bottom: 1.25rem; }
.loan-info .row + .row {
  margin-top: 0; }
.loan-info p {
  margin: 0; }

table {
  width: 100%; }

.table__ml-15 {
  margin-left: 15%; }

.dataTables_wrapper {
  margin: 0 0 5rem;
  width: 100%;
  overflow-x: auto; }

.datatable {
  margin: 1.25rem 0 0 !important;
  display: inline-table !important; }

tr {
  background: none !important; }

tr > * {
  background: none !important; }

th {
  text-align: center;
  padding: 0.625rem !important;
  border: 0.125rem solid white !important;
  border-top: 0.1875rem solid white !important;
  border-bottom: 0 !important;
  background: whitesmoke !important;
  border-left: 0 !important;
  font-size: 1rem; }

td {
  text-align: center;
  font-size: 0.875rem; }
  td.big {
    font-size: 1rem; }

th {
  line-height: 1.375rem; }

th:hover, td:hover {
  background: whitesmoke !important;
  cursor: pointer; }

.table-sub-headings th {
  font-size: 0.875rem; }

table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td, table.dataTable.display tfoot td, table.dataTable tfoot th {
  border-top: 0.1875rem solid white !important;
  padding: 1.25rem 0.3125rem; }

table.dataTable.no-footer {
  border-bottom: 0; }

.data-grid {
  margin: 2.5rem 0;
  width: 100%;
  font-size: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; }
  .data-grid .row {
    margin-bottom: 0.625rem; }

.table-first-left th:first-of-type, .table-first-left td:first-of-type {
  text-align: left; }

.hover-whole-row tr:hover {
  background: whitesmoke !important;
  cursor: pointer; }
.hover-whole-row tr th:hover, .hover-whole-row tr td:hover {
  background: inherit !important;
  cursor: pointer; }

#collections_transaction_wrapper {
  width: 60%;
  margin-left: auto;
  margin-top: 2.5rem; }
  @media (max-width: 1679px) {
    #collections_transaction_wrapper table {
      width: 100%; } }
  @media (max-width: 1679px) {
    #collections_transaction_wrapper {
      width: 100%; } }

.flex__display {
  display: flex; }
.flex__center {
  align-items: center;
  justify-content: center !important; }
.flex__center-x {
  justify-content: center; }
.flex__center-y {
  align-items: center; }
.flex__justify-sa {
  justify-content: space-around; }
.flex__justify-sb {
  justify-content: space-between; }
.flex__justify-se {
  justify-content: space-evenly; }
.flex__justify-start {
  justify-content: flex-start; }
.flex__justify-end {
  justify-content: flex-end; }
.flex__wrap {
  flex-wrap: wrap; }
.flex__start {
  align-items: flex-start;
  justify-content: flex-start; }
.flex__align-start {
  align-items: flex-start; }
.flex__end {
  align-items: flex-end; }

.row {
  display: flex;
  flex-wrap: wrap;
  overflow: auto; }
  .row + .row {
    margin-top: 30px; }

[class^="col-"] {
  float: left; }
  [class^="col-"]:not(:last-child) {
    margin-right: 2.5rem; }
    @media (max-width: 767px) {
      [class^="col-"]:not(:last-child) {
        margin-right: 0;
        margin-bottom: 0.625rem; } }
  @media (max-width: 767px) {
    [class^="col-"] {
      width: 100% !important; } }

[class^="col-"]:not(:last-child).col-1-2-small {
  margin-right: 0.625rem; }
  @media (max-width: 767px) {
    [class^="col-"]:not(:last-child).col-1-2-small {
      margin-right: 0;
      margin-bottom: 0.625rem; } }

.col-1-2 {
  width: calc(((100% / 2) * 1) - 1 * 2.5rem); }

.col-1-2-small {
  width: calc(((100% / 2) * 1) - 1 * 0.625rem);
  margin-right: 0.625rem !important; }

.col-1-3 {
  width: calc(((100% / 3) * 1) - 1 * 2.5rem); }
  @media (max-width: 1440px) {
    .col-1-3 {
      width: calc(((100% / 3) * 1) - 1 * 0.625rem);
      margin-right: 0.625rem !important; } }

.col-1-3-small {
  width: calc(((100% / 3) * 1) - 1 * 0.625rem);
  margin-right: 0.625rem !important; }

.col-2-3 {
  width: calc(((100% / 3) * 2) - 1 * 2.5rem); }
@media (min-width: 769px) and (max-width: 1440px) {
  .col-2-3 {
    width: calc(((100% / 3) * 2) - 1 * 0.625rem); } }

.col-2-3-small {
  width: calc(((100% / 3) * 2) - 1 * 0.625rem);
  margin-right: 0.625rem !important; }
  .col-2-3-small.u-br {
    width: calc(((100% / 3) * 2) - 5 * 0.625rem); }

.col-1-4 {
  width: calc(((100% / 4) * 1) - 1 * 2.5rem); }

.col-2-4 {
  width: calc(((100% / 4) * 2) - 2 * 2.5rem); }

.col-3-4 {
  width: calc(((100% / 4) * 3) - 2 * 2.5rem); }

.col-1-5 {
  width: calc(((100% / 5) * 1) - 1 * 2.5rem); }

.col-2-5 {
  width: calc(((100% / 5) * 2) - 2 * 2.5rem); }

.col-3-5 {
  width: calc(((100% / 5) * 3) - 2 * 2.5rem); }

.col-4-5 {
  width: calc(((100% / 5) * 4) - 2 * 2.5rem); }

.col-1-6 {
  width: calc(((100% / 6) * 1) - 1 * 2.5rem); }

.col-2-6 {
  width: calc(((100% / 6) * 2) - 2 * 2.5rem); }

.col-3-6 {
  width: calc(((100% / 6) * 3) - 2 * 2.5rem); }

.col-4-6 {
  width: calc(((100% / 6) * 4) - 2 * 2.5rem); }

.col-5-6 {
  width: calc(((100% / 6) * 5) - 2 * 2.5rem); }

.col-1-10 {
  width: calc(((100% / 10) * 1) - 1 * 2.5rem); }

.col-2-10 {
  width: calc(((100% / 10) * 2) - 1 * 2.5rem); }

.col-3-10 {
  width: calc(((100% / 10) * 3) - 1 * 2.5rem); }

.col-4-10 {
  width: calc(((100% / 10) * 4) - 1 * 2.5rem); }

.col-5-10 {
  width: calc(((100% / 10) * 5) - 1 * 2.5rem); }

.col-6-10 {
  width: calc(((100% / 10) * 6) - 1 * 2.5rem); }

.col-7-10 {
  width: calc(((100% / 10) * 7) - 1 * 2.5rem); }

.col-8-10 {
  width: calc(((100% / 10) * 8) - 1 * 2.5rem); }

.col-9-10 {
  width: calc(((100% / 10) * 9) - 1 * 2.5rem); }

@media (min-width: 1440px) and (max-width: 1799px) {
  .col-1-4-lt {
    width: calc(((100% / 4) * 1) - 1 * 2.5rem); } }

@media (min-width: 1440px) and (max-width: 1799px) {
  .col-2-4-lt {
    width: calc(((100% / 4) * 2) - 2 * 2.5rem); } }

@media (min-width: 1440px) and (max-width: 1799px) {
  .col-3-4-lt {
    width: calc(((100% / 4) * 3) - 3 * 2.5rem); } }

@media (min-width: 1024px) and (max-width: 1239px) {
  .col-1-3-dt {
    width: calc(((100% / 3) * 1) - 1 * 2.5rem); } }

@media (min-width: 1240px) and (max-width: 1439px) {
  .col-1-3-dt {
    width: calc(((100% / 3) * 1) - 1 * 2.5rem); } }

@media (min-width: 1024px) and (max-width: 1239px) {
  .col-2-3-dt {
    width: calc(((100% / 3) * 2) - 1 * 2.5rem); } }

@media (min-width: 1240px) and (max-width: 1439px) {
  .col-2-3-dt {
    width: calc(((100% / 3) * 2) - 2 * 2.5rem); } }

@media (min-width: 768px) and (max-width: 1023px) {
  .col-1-10-tb {
    width: calc(((100% / 10) * 1) - 1 * 2.5rem); } }

@media (min-width: 768px) and (max-width: 1023px) {
  .col-2-10-tb {
    width: calc(((100% / 10) * 2) - 1 * 2.5rem); } }

@media (min-width: 768px) and (max-width: 1023px) {
  .col-3-10-tb {
    width: calc(((100% / 10) * 3) - 1 * 2.5rem); } }

@media (min-width: 768px) and (max-width: 1023px) {
  .col-4-10-tb {
    width: calc(((100% / 10) * 4) - 1 * 2.5rem); } }

@media (min-width: 768px) and (max-width: 1023px) {
  .col-5-10-tb {
    width: calc(((100% / 10) * 5) - 1 * 2.5rem); } }

@media (min-width: 768px) and (max-width: 1023px) {
  .col-6-10-tb {
    width: calc(((100% / 10) * 6) - 1 * 2.5rem); } }

@media (min-width: 768px) and (max-width: 1023px) {
  .col-7-10-tb {
    width: calc(((100% / 10) * 7) - 1 * 2.5rem); } }

@media (min-width: 768px) and (max-width: 1023px) {
  .col-8-10-tb {
    width: calc(((100% / 10) * 8) - 1 * 2.5rem); } }

@media (min-width: 768px) and (max-width: 1023px) {
  .col-9-10-tb {
    width: calc(((100% / 10) * 9) - 1 * 2.5rem); } }

@media (min-width: 768px) and (max-width: 1023px) {
  .col-1-2-tb {
    width: calc((100% / 2) - 1 * 2.5rem); } }

@media (max-width: 1439px) {
  .col-100-sm-dt {
    width: 100%; } }

@media (max-width: 1679px) {
  .col-1-3-small-dt {
    width: calc(((100% / 3) * 1) - 1 * 2.5rem); } }

@media (max-width: 1679px) {
  .dt-100 {
    width: 100%; } }

@media (max-width: 1899px) {
  .accounts-grid form.form-accounts input, .accounts-grid form.form-accounts textarea {
    width: calc(100% - 60px);
    margin: 10px 0 0; }
    .accounts-grid form.form-accounts input:first-of-type, .accounts-grid form.form-accounts textarea:first-of-type {
      margin: 0; }
  .accounts-grid form.form-accounts select {
    width: 100%;
    margin: 10px 0 0; }
    .accounts-grid form.form-accounts select:first-of-type {
      margin: 0; }
  .accounts-grid form.form-accounts button {
    margin: 10px 0 0; } }