iframe {

  &.fxcalc_margin,
  &.fxcalc_pipvalue,
  &.fxcalc_profit,
  &.fxcalc_lotsize,
  &.fxcalc_rrwinrate {
    display: inline-block;
    border: none;
    margin: 0;
    max-width: 100%;
  }
}

.fxcalc-admin {
  margin-inline-end: 20px;
  margin-top: 20px;

  * {
    direction: ltr;
    text-align: left;
  }

  .fxcalc-tabs {
    display: flex;
    flex-direction: column;
    border: 1px solid silver;
    margin-bottom: 20px;

    .fxcalc-tabs-header {
      background: whitesmoke;

      .fxcalc-tab-items {
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        overflow: auto;

        .fxcalc-tab-item {
          border: 1px solid #e7e7e7;
          margin: 0;
          display: flex;
          justify-content: stretch;

          a {
            text-decoration: none;
            display: flex;
            padding: 1em;
          }

          &:hover {
            background-color: #f9f9f9;
          }

          &.fxcalc-active {
            background-color: white;
          }
        }
      }
    }

    .fxcalc-tabs-body {
      background-color: white;

      .fxcalc-item-shortcode {
        font-size: 1.2em;
        display: flex;
        align-items: center;
        margin-top: 2rem;
        margin-bottom: 1rem;

        .fxcalc-shortcode-container {
          h4 {
            margin-bottom: .5rem;
            margin-top: 0;
          }

          code {
            font-size: 1em;
          }

          button {
            margin-right: 0.75rem;
            margin-bottom: 0.5rem;
          }
        }
      }
    }
  }

  .fxcalc-posts {

    thead th,
    tbody td {
      text-align: left;
    }
  }
}

.fxcalc-settings-container {
  margin-bottom: 2rem;
}

.fxcalc-row {
  display: flex;
  flex-direction: row;

  .fxcalc-col-sm {
    padding: 0 10px;
    width: 220px;
    background: #fafafa;
  }

  .fxcalc-col-lg {
    padding: 0 10px;
    width: 100%;
  }

  @media screen and (max-width: 1180px) {
    flex-direction: column;

    .fxcalc-col-sm {
      width: calc(100% - 20px);
      margin-bottom: 1rem;
    }

    .fxcalc-col-lg {
      width: calc(100% - 20px);
    }
  }
}

.fxcalc-title-alignments {
  display: flex;
  background: #e7e7e7;
  width: 75px;
  padding: 4px;
  border-radius: 4px;
  margin: auto;

  .fxcalc-align {
    display: flex;
    width: 25px;
    height: 20px;
    position: relative;
    cursor: pointer;

    &.active {
      background: #c1c1c1;
    }

    &:hover {
      background: #cdcdcd;
    }

    >span {

      &,
      &:after {
        display: inline-block;
        position: absolute;
        border-radius: 1000px;
        background: gray;
      }

      top: 16%;
      left: 50%;
      height: 8%;
      transform: translateX(-50%);
      width: 80%;

      +span {
        top: 56%;
      }

      &:after {
        content: " ";
        top: 250%;
        height: 100%;
        width: 70%;
      }
    }

    &.fxcalc-align-left {
      >span {
        &:after {
          left: 0;
        }
      }
    }

    &.fxcalc-align-center {
      >span {
        &:after {
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }


    &.fxcalc-align-right {
      >span {
        &:after {
          right: 0;
        }
      }
    }
  }
}

.fxcalc-check-box-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;

  label {
    display: flex;
    width: 200px;
  }

  span {
    flex: 1;
    font-size: 1.2em;
  }

  input[type=checkbox] {
    margin: 0;
  }
}

.fxcalc-styling-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-items: stretch;
  border-radius: 6px;


  .fxcalc-styling {
    cursor: pointer;
    position: relative;
    margin-bottom: .5rem;

    label {
      display: inline-block;
      width: 200px;
      border: 1px solid #dedede;
      border-radius: 4px;
      padding: 8px;
      text-align: left;
    }

    h4 {
      margin-top: 0;
    }

    &:hover {
      background: #f1f1f1;
    }

    >div {
      display: none;
      flex-wrap: wrap;
      width: 100px;
      height: 160px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      justify-content: space-between;
      align-content: space-between;
      position: absolute;
      right: 0;
      top: 0;
      transform: translateX(calc(100% + 5px));
      background: whitesmoke;
      opacity: .5;

      >span {
        display: inline-block;
        margin: 0;
        width: 100%;
        height: 20px;
        border: 1px solid #ccc;
        border-radius: 3px;
      }
    }

    &.fxcalc-styling-double {
      >div {
        height: 75px;

        >span {
          width: 40px;
          margin: 0 2px;
        }
      }
    }


    &.fxcalc-styling-wide {
      >div {
        width: 160px;
        height: 50px;

        >span {
          width: 30px;
          margin: 0 2px;
        }
      }
    }
  }


  @media (min-width: 1280px) {
    flex-direction: column;
    // align-items: center;

    .fxcalc-styling {

      // text-align: center;
      >div {
        margin: auto;
        display: none;
      }

      &:hover {
        >div {
          display: block;
        }
      }
    }
  }
}

.fxcalc-settings {
  // text-align: center;
}

.fxcalc-selectable-items {
  display: flex;
  flex-direction: column;

  >div {
    margin-bottom: .5rem;
    width: 200px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #dedede;
    text-align: left;

    &:hover {
      background: #f1f1f1;
    }

    label {
      display: inline-flex;
      width: calc(100% - 16px);
      padding: 8px;
      align-items: center;

      input[type=radio] {
        margin: 0;
        margin-right: 0.25rem;
      }

      .fxcalc-custom-title {
        padding: 0 8px;
        width: calc(100% - 16px);
      }
    }
  }
}

.fxcalc-responsive-group {
  display: flex;
  flex-direction: column;

  .fxcalc-form-group {
    margin-bottom: 1rem;
  }

  // @media screen and (max-width: 1180px) {
  //     flex-direction: row;
  //     margin-bottom: 1rem;
  //     justify-content: space-evenly;
  //     .fxcalc-form-group {
  //         margin-bottom: 0;
  //     }
  // }


  @media screen and (max-width: 1180px) {
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .fxcalc-form-group {
      margin-bottom: 1rem;
    }
  }
}

.fxcalc-preview-container {
  padding-bottom: 10px;

  .fxcalc-item-preview {
    text-align: center;
  }
}

.fxcalc-button-group {
  display: flex;
  justify-content: space-between;

  .fxcalc-save-button,
  .fxcalc-revert-button {
    font-size: 1.1em !important;
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
  }

  @media screen and (max-width: 1180px) {
    justify-content: space-evenly;
  }
}

.fxcalc-mode3-hint {
  color: #997000;
  padding: 10px;
  border-radius: 4px;
  background: #efefef;
  width: 200px;
}

.fxcalc-review {
  .button.fxcalc-ms {
    margin: 0 .5rem;
  }
}

.fxcalc-update-tips {
  color: #910000;
  padding: 0.5rem 0.7rem 0.2rem 1.5rem;
  background: #f8b9b9;
  border-radius: 0.5rem;
  margin: 1rem 0;
}

.fxcalc-shortcode-tip-container {
  color: #0a0091;
  padding: 0.25rem 0.75rem 0.25rem;
  background: #babaff;
  border-radius: 0.5rem;
  margin: 1rem 0;
}

.fxcalc-section {
  background: #fff;
  margin-bottom: 20px;
  padding: 0;
  line-height: 1;
  border: 1px solid #c3c4c7;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .04);

  .fxcalc-section-header {
    border-bottom: 1px solid #f0f0f1;

    h2 {
      font-size: 14px;
      padding: 8px 12px;
      margin: 0;
      line-height: 1.4;
      color: #1d2327;
      border-bottom: 1px solid #f0f0f1;
    }
  }

  .fxcalc-section-body {
    padding: 6px 10px 8px;
  }
}

.fxcalc-item-ads {
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;

  h3 {
    margin-bottom: .2em;
  }

  .switch-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #dcdcde;
    padding: 0 10px;
    margin-bottom: 10px;

    .switch-control {
      display: flex;
      align-items: center;
    }

    .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
      margin: 0 10px;

      input {
        opacity: 0;
        width: 0;
        height: 0;
      }

      input:checked+.slider {
        background-color: #b43cb4;
      }

      input:checked+.slider:before {
        transform: translateX(26px);
      }

      .slider {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
        cursor: pointer;

        &:before {
          position: absolute;
          content: "";
          height: 26px;
          width: 26px;
          left: 4px;
          bottom: 4px;
          background-color: white;
          transition: .4s;
        }

        &.round {
          border-radius: 34px;

          &:before {
            border-radius: 50%;
          }
        }
      }
    }
  }
}