fleet/frontend/pages/admin/OrgSettingsPage/_styles.scss

.org-settings {
  &__page-description {
    font-size: $x-small;
    color: $core-fleet-black;
    @include sticky-settings-description;
  }

  &__sandbox-demo-message {
    margin-top: 3.5rem;
  }

  &__side-nav {
    .org-settings-form {
      .form-field__label {
        .buttons {
          top: 22px;
        }
      }
    }

    .org-info .app-config-form {
      &__inputs {
        width: 60%;
      }
    }

    .info-banner {
      margin-top: $pad-medium;
    }

    .app-config-form {
      width: 100%;

      .form-field {
        width: 100%;

        &__label {
          width: 100%;
        }
      }

      &__section {
        @include clearfix;
        margin: 0 0 $pad-large;
        animation: fade-in 200ms ease-out;

        .upcaret::after {
          content: url("../assets/images/icon-collapse-black-16x16@2x.png");
          transform: scale(0.5);
          border-radius: 0px;
          position: relative;
          top: 8px;
          margin: $pad-xsmall;
        }

        .downcaret::after {
          content: url("../assets/images/icon-chevron-black-16x16@2x.png");
          transform: scale(0.5);
          border-radius: 0px;
          position: relative;
          top: 8px;
          margin: $pad-xsmall;
          margin-right: 18px;
        }

        h2 {
          padding-bottom: $pad-small;
          max-width: 100%;
          font-size: $medium;
          font-weight: $regular;
          color: $core-fleet-black;
          border-bottom: solid 1px $ui-fleet-black-10;
          margin: 0 0 $pad-xxlarge;

          @media (min-width: $break-990) {
            max-width: 65%;
          }
        }

        .smtp-status {
          display: flex;
          justify-content: space-between;
        }

        .empty-table__container {
          margin: 96px 0 1.5rem;

          @media (min-width: $break-990) {
            max-width: 65%;
          }
        }

        .smtp-options {
          font-size: 15px;
          font-weight: $bold;
          color: $core-fleet-black;
          padding-left: 15px;

          em {
            font-style: normal;
          }

          &--configured {
            em {
              color: $ui-success;
            }
          }

          &--notconfigured {
            em {
              color: $ui-error;
            }
          }
        }
      }

      &__section-description {
        font-size: $x-small;
        color: $core-fleet-black;
        width: 100%;

        @media (min-width: $break-990) {
          width: 60%;
        }
      }

      &__inputs {
        width: 100%;
        float: left;
        padding-right: $pad-small;
        box-sizing: border-box;

        @media (min-width: $break-990) {
          width: 60%;
        }

        .input-field {
          width: 100%;
        }

        &--smtp {
          margin: 0 0 $pad-medium;

          .form-field {
            width: 29%;
            float: right;

            &:first-child {
              float: left;
              width: 69%;
            }

            &:nth-child(2) {
              padding-top: 6px;
            }

            &--checkbox {
              clear: both;
              width: 100%;
              float: none;
            }
          }
        }

        &--usage {
          margin-top: $pad-large;
        }

        &--preview {
          margin: $pad-medium 0;
        }

        &--webhook,
        &--agents {
          margin-bottom: $pad-large;

          .yaml-ace__label {
            min-height: 0;
          }
        }
      }

      &__details {
        float: right;
        width: 40%;
        height: 87px;

        .icon-tooltip {
          margin: $pad-xlarge 0;
        }

        .hint {
          color: $core-fleet-black;

          &--brand {
            color: $core-vibrant-blue;
          }
        }
      }

      &__avatar-preview {
        text-align: center;

        img {
          border-radius: $border-radius;
          max-height: 80px;
          max-width: 150px;
          border: 1px solid $ui-fleet-black-10;
          background-color: $ui-light-grey;
          position: relative;
          bottom: -29px;
          padding: $small;
          transform: initial;
        }

        p {
          color: $core-fleet-purple;
          font-size: 18px;
          font-weight: $bold;
          margin-top: 0;
        }
      }

      &__smtp-section {
        @include clearfix;
      }

      &__component-label {
        margin: $pad-medium 0 0;
        font-size: $x-small;
      }

      &__component-details {
        margin: 0 0 $pad-medium;
        font-size: $x-small;
      }

      &__yaml {
        width: calc(90% - 50px);
        margin-bottom: $pad-medium;
      }

      &__host-status-webhook-preview-modal {
        .flex-end {
          margin-top: 20px;
          display: flex;
          justify-content: flex-end;
        }
      }

      &__advanced-options {
        margin-bottom: $pad-large;
      }

      .component__tooltip-wrapper {
        margin-bottom: $pad-xsmall;
      }
    }
  }
}