#scf-price-updater {
  max-width: 100%;
  width: 100%;
  color: #555e6f;

  .navbar {
    background-color: #fff;
    margin-bottom: 1rem;
    margin-left: -20px;
    width: calc(100% + 20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    .navbar-items {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-left: 20px;

      .nav-item-container {
        list-style-type: none;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 0;

        .nav-item:first-child {
          padding-left: 0;
        }

        .nav-item {
          font-size: 0.9rem;
          margin: 0;

          .nav-item-link, .nav-logo {
            display: block;
            padding: 20px;
            text-decoration: none;
            color: #a8a8a8;
            border-bottom: 2px solid transparent;
            transition: all 250ms ease-in-out;
          }

          .nav-logo {
            color: #3c434a;
            padding-left: 0;

            span {
              font-weight: bold;
              text-transform: uppercase;
            }
          }

          .nav-item-link:hover {
            color: #555e6f;
          }

          .nav-item-link.nav-active {
            color: #555e6f;
            font-weight: 500;
            background: rgba(0, 0, 0, 0.03);
            border-bottom: 2px solid #5488BF;
          }
        }
      }
    }
  }

  .content {
    position: relative;
    margin-right: 20px;

    .notifications {
      position: absolute;
      top: 0;
      right: 0;

      .notification.notification-warning {
        border-left: 4px solid #dba617;
      }

      .notification.notification-success {
        border-left: 4px solid #00a32a;
      }

      .notification.notification-error {
        border-left: 4px solid #d63638;
      }

      .notification.fadeIn {
        opacity: 1;
      }

      .notification {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        margin-bottom: 1rem;
        margin-left: auto;
        margin-right: 0;
        padding: 5px 10px;
        border-radius: 4px;
        border-left: 4px solid #dba617;
        width: max-content;
        max-width: 30vw;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);
        opacity: 0;
        transition: opacity 250ms;

        .close__notification {
          padding: 8px;
          color: #a8a8a8;
          position: absolute;
          top: 0;
          right: 0;
          transition: all 250ms ease-in-out;
        }

        .close__notification:hover {
          cursor: pointer;
          color: #861111;
        }

        .notification-message {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-right: 1.5rem;

          .notification-icon {
            font-size: 1rem;
            margin-right: 1rem;
          }
        }
      }
    }

    .wp-notices {
      .notice {
        margin: 0;
      }
    }
  }

  .form-button {
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    padding: 5px 20px;
    transition: all 250ms ease-in-out;
    border: none;
    background: #757575;
    line-height: 2.15384615;
    min-height: 30px;
    margin: 0;
    cursor: pointer;
    -webkit-appearance: none;
    border-radius: 4px;
    box-sizing: border-box;
    color: #fff;
  }

  .form-button:hover {
    background: #acacac;
  }

  .form-upload {
    width: max-content;
    background: #fff;
    color: #555e6f;
    border: 2px solid #dcdfe6;
  }

  .form-upload:hover {
    background: #ececec;
  }

  .form-button.button-primary {
    background: #46a0fc;
  }

  .form-button.button-primary:hover {
    background: #81baf4;
  }

  a {
    color: #46a0fc;
  }

  .page-columns {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .column:nth-child(odd) {
      margin-right: 10px;
    }

    .column:nth-child(even) {
      margin-left: 10px;
    }

    .column {
      display: block;
      width: 100%;

      .content-box {
        margin: 20px 0;

        .box-header, .box-content {
          padding: 10px 20px;
        }

        .box-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #fdfdfd;
          border-top-left-radius: 4px;
          border-top-right-radius: 4px;
          border-bottom: 1px solid #e3e8ee;

          .box-header-title {
            font-weight: bold;

            .box-header-icon {
              margin-right: 0.5rem;
            }
          }
        }

        .box-content {
          background: #fff;
          border-bottom-right-radius: 4px;
          border-bottom-left-radius: 4px;

          .box-form {
            .form-item {
              margin-bottom: 1rem;

              .form-item-label {
                font-size: 0.9rem;
                font-weight: 500;
                margin-bottom: 0.3rem;
              }

              #form-data-file {
                display: none;
              }

              textarea.form-input {
                height: 200px;
              }

              .form-input {
                background: #fff;
                border-radius: 4px;
                border: 1px solid #dcdfe6;
                width: 100%;
                height: 40px;
              }

              .form-item-description {
                color: #6B6B6B;
                font-size: 0.8rem;
                margin-top: 0.3rem;
                font-style: italic;
              }

              .switch {
                position: relative;
                display: inline-block;
                width: 54px;
                height: 26px;

                .form-switch {
                  opacity: 0;
                  width: 0;
                  height: 0
                }

                .form-switch:checked + .slider {
                  background-color: #46a0fc;
                }

                .form-switch:focus + .slider {
                  box-shadow: 0 0 1px #46a0fc;
                }

                .form-switch:checked + .slider:before {
                  -webkit-transform: translateX(26px);
                  -ms-transform: translateX(26px);
                  transform: translateX(26px);
                }

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

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

                .slider.round {
                  border-radius: 34px;
                }

                .slider.round:before {
                  border-radius: 50%;
                }
              }

              > * {
                display: block;
              }

              .choices {
                margin-bottom: 0;

                .choices__inner {
                  background: #fff;
                  border-radius: 4px;
                  border: 1px solid #dcdfe6;
                  width: calc(100% - 18px);
                  height: max-content;
                  padding: 8px;
                  min-height: 40px;
                  overflow: auto;

                  .choices__input {
                    height: 40px;
                    background: transparent;
                    border:none;
                    margin: 0;
                    padding: 0;
                  }

                  .choices__input:active, .choices__input:focus {
                    background: transparent;
                    border:none;
                    box-shadow: none;
                    outline: none;
                  }

                  .choices__list {
                    .choices__item {
                      border-radius: 4px;
                      background: #bbb;
                      border: none;

                      .choices__button {
                        border-left: 1px solid #fff;
                      }
                    }
                  }

                  .choices__list--multiple {
                    .choices__item {
                      margin-bottom: 2px;
                    }
                  }
                }

                .choices__list--dropdown {
                  background: #fff;
                  border-radius: 4px;
                  border: 1px solid #dcdfe6;
                  width: calc(100% - 2px);
                }
              }
            }

            .form-item:last-child {
              margin-bottom: 0;

              * {
                display: inline-block;
              }
            }
          }
        }
      }
    }
  }

  .error {
    color: #d63638!important;
  }

  .success {
    color: #00a32a!important;
  }
}