@mixin wrapper_row {
  display: flex;
  flex-direction: row;
}

@mixin wrapper_col {
  display: flex;
  flex-direction: column;
}


@mixin c_cdp_font-label {
  @include font-12;
  align-items: center;
  text-transform: uppercase;
  font-weight: bold;
  color: #043A1F;
  order: 0;
  align-self: center;
}


@mixin cdp_form_item_label {
  font-style: normal;
  font-weight: bold;
  @include font-12;
  text-transform: uppercase;
  color: $grey-3;
  padding-bottom: 12px;
  height: 24px;

}

@mixin has_optional {
  display: flex;
  justify-content: space-between;
}

.cdp_wrapper-container {
  background-color: $grey-9;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: flex;
  justify-content: center;

  .ant-spin-nested-loading {
    width: 100%;
    //display: flex;
    //justify-content: center;
  }
}


.separator__line--form-item {
  width: 30.5%;
  height: 0;
  border-top: 1px solid #D6D6D7;
}

.separator__line--width-full {
  width: 152px;
  height: 1px;
  border: 1px solid #D6D6D7;
}

.separator__line--width-padding-50 {
  width: 152px;
  height: 1px;
  border: 1px solid #D6D6D7;
}

.content__row--center {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}

.content__col--center {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}

.pd-flex-start {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
}

.pd-space-between-center {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}

.pd-flex-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.pd-flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
}

.pd-flex-row {
  display: flex;
  flex-direction: row;
}

.btn-remove {
  color: $text-color-4;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 40px;
  cursor: pointer;

  &.txt-trf {
    text-transform: uppercase;
    color: $text-color-2;
    @include font-12;
    font-weight: bold;
  }
}

.btn-back-top {
  background: #EBEBEB;
  border-radius: 8px;
  cursor: pointer;
  height: 40px;
  //margin-top: 24px;
  //margin-bottom: 24px;
  color: #313135;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  @include font-16;
}

// pd-mg-top-32
$spacing: (
        5: 6px,
        6: 6px,
        8: 8px,
        12: 12px,
        16: 16px,
        24: 24px,
        32: 32px,
);

@each $name, $value in $spacing {
  .pd-mg-top-#{$name} {
    margin-top: $value
  }

  .pd-pd-left-#{$name} {
    padding-left: $value
  }

  .pd-pd-right-#{$name} {
    padding-right: $value
  }

  .pd-mg-r-#{$name} {
    margin-right: $value
  }

  .pd-mg-l-#{$name} {
    margin-right: $value
  }
}

// bg-grey-${number: [1:9]}
$colors: (
        grey-1: $grey-1,
        grey-2: $grey-2,
        grey-3: $grey-3,
        grey-4: $grey-4,
        grey-5: $grey-5,
        grey-6: $grey-6,
        grey-7: $grey-7,
        grey-8: $grey-8,
        grey-9: $grey-9,
);

@each $name, $value in $colors {
  .bg-#{$name} {
    background-color: $value
  }
}

.font-16 {
  @include font-16;
}


.date-text {
  color: $grey-1;
}

.line-or--style {
  //border-bottom-left-radius: 32px;
  //border-top-left-radius: 32px;

  //div[style~="(90deg)"]
}

.line-and--style {
  //border-top-right-radius: 8px;
  //border-bottom-right-radius: 8px;
}

@mixin text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-ellipsis {
  @include text-ellipsis;
}


@mixin f-center {
  @include wrapper_row;
  justify-content: center;
  align-items: center;
  align-content: center;
}


::-webkit-input-placeholder { /* Edge */
  color: $grey-5;
}

:-ms-input-placeholder { /* Internet Explorer */
  color: $grey-5;
}

::placeholder {
  color: $grey-5;
}

.pd__text--normally {
  @include font-16;
  color: $grey-4;
}

.pd__text--remark {
  @include font-16;
  font-weight: bold;
  color: $grey-2;
  word-break: break-all;
}

.pd__text-highlight--green {
  @include font-16;
  //font-weight: bold;
  color: $primary-2;
  word-break: break-all;
}

.pd__spin {
  width: 100%;
}


.pd__empty {
  @include f-center;
  flex-direction: column;
}

.summary-item--text {
  color: $grey-1;
  @include font-16;
  //font-weight: bold;
}

.summary-item--remark {
  color: $valid-color;
  @include font-16;
}

.input__suffix {
  @include font-16;
  color: $grey-3;
}

input {
  min-width: 100px;
}

.cdp__table--title-span {
  display: flex;
  align-items: center;
  align-content: center;
  white-space: pre-wrap;

  &.centered {
    @include f-center;
  }

  .cdp__table--title-span-label {
    @include font-12;
    color: $grey-9;
    font-weight: bold;
  }

}

.cdp__table--title {
  display: flex;
  align-items: center;
  align-content: center;
  white-space: pre-wrap;

  &.centered {
    @include f-center;
  }

  .cdp__table--title-label {
    @include font-16;
    color: $grey-2;
    font-weight: bold;
    //white-space: nowrap;
  }

}


.cdp__table--cell {
  display: flex;
  align-items: center;
  align-content: center;
  white-space: pre-wrap;

  &.align--left {
    @include wrapper_row;
    justify-content: flex-start;
  }

  &.align--right {
    @include wrapper_row;
    justify-content: flex-end;
  }

  &.align--center {
    @include f-center;
  }

  .cdp__table--cell-label {
    @include font-16;
    color: $grey-2;

    &.f--bold {
      font-weight: bold;
    }
  }
}

.d-block {
  display: block;
}

.d-inline-block {
  display: inline-block;
}

.d-content {
  display: contents;
}

.d-hidden {
  height: 0 !important;
  visibility: hidden;
  display: none !important;
}

.pulse {
  animation-name: pulse;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}

.flicker-on {
  .custom-flicker-animate {
    animation: blink 1s 2;
  }
}

$max-widths: 10vw, 20vw, 30vw, 40vw, 50vw, 60vw, 70vw, 80vw, 90vw, 100vw;

@each $max-width in $max-widths {
  .mw-#{$max-width} {
    max-width: $max-width
  }
}

.mw-100percentage {
  max-width: 100%;
}

.cdp_switch--group {
  .cdp_switch--label {
    font-weight: bold;
    @include font-16;
    color: $grey-1;
  }

  .cdp_switch-primary {
    &.ant-switch {
      border: 1px solid $grey-4;
      background-color: white;

      .ant-switch-handle::before {
        background-color: $grey-4;
      }

      .ant-switch-handle {
        top: 2px;
        width: 15px;
        height: 15px;
      }
    }

    &.ant-switch.ant-switch-checked {
      border: 1px solid $primary-3;
      background-color: white;

      .ant-switch-handle::before {
        background-color: $primary-2;
      }

      .ant-switch-handle {
        top: 2px;
        width: 15px;
        height: 15px;
      }
    }
  }
}


.empty-wrapper {
  .ant-empty-footer {
    margin-top: 0;
  }
}

.input-style {
  height: $height-ip2;
  box-sizing: border-box;
  border-radius: 8px;
  color: $grey-1;
  transition: all 0.3s ease
}

.btn-edit {
  text-transform: uppercase;
  color: $blue-1;

  .icon-edit {
    path {
      fill: $text-link-color-1;
    }
  }
}


.separator-line {
  width: 100%;
  height: 0;
  border-bottom: 1px solid $grey-6;
  margin: 25px 0;
}

.separator-bar {
  width: 100%;
  height: 0;
  border-bottom: 1px solid $grey-7;
}

.mask-tour-on-boarding {
  color: #021d1d;
  opacity: 0.7;
}

.mr-16px {
  margin-right: 16px;
}

.pointer {
  cursor: pointer;
}