$white: #FFF;
$darkYellow: #F8BF25;
$lightBlue: #51ACCB;

#adminmenu {
  #toplevel_page_dikitale {
    .wp-menu-image {
      box-sizing: border-box;
      padding: 5px;
      height: 34px;
      width: 34px;

      img {
        padding: 0;
        width: 24px;
        height: 24px;
      }
    }
  }
}

.dikitale-admin {
  display: flex;
  justify-content: space-between;
  column-gap: 20px;

  header, .banner {
    //background-color: $darkYellow;
    //height: 68px;
    margin-bottom: 15px;
  }

  table {
    width: 100%;
    margin-bottom: 15px;

    &:last-child {
      margin-bottom: 0;
    }

    tbody {
      th {
        text-align: left;
        width: 165px;
        padding-right: 5px;
        vertical-align: top;
      }

      td {
        input[type=text],
        input[type=email] {
          width: 100%;
        }
      }
    }
  }

  section {
    display: flex;
    margin-bottom: 15px;

    &.bg-white {
      background: #FFFFFF 0 0 no-repeat padding-box;
      box-shadow: 0 2px 6px #23282D12;
    }

    main {
      flex: 1;
      padding: 20px;
    }

    aside {

    }

    form {
      flex: 1;
    }
  }

  .btn-group {
    display: flex;
    column-gap: 5px;

    button {
      background-color: #51ACCB;
      color: $white;
      border: 0;
      line-height: 26px;
      padding: 0 15px;
      display: flex;
      align-items: center;

      &.dikitale-loading {
        font-size: 0;

        &:after {
          content: " ";
          display: block;
          width: 12px;
          height: 12px;
          margin: 0;
          border-radius: 50%;
          border: 2px solid #fff;
          border-color: #fff transparent #fff transparent;
          animation: lds-dual-ring 1.2s linear infinite;
        }

        @keyframes lds-dual-ring {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
      }
    }
  }

  > main {
    flex: 1;
  }

  .colors {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;

    .color {
      display: flex;
      column-gap: 10px;
      align-items: center;
      margin-bottom: 15px;

      label[for] {
        font-weight: 700;
        min-width: 100px;
      }
    }
  }

  &.dashboard {
    section {
      max-width: 768px;
    }
  }

  .dikitale-sidebar {
    width: 284px;

    section {
      display: block;
      margin-bottom: 15px;

      picture {
        display: block;
        //background-color: $darkYellow;
        //height: 198px;
      }

      main {
        margin-right: 0;
        border-radius: 3px;
        opacity: 1;
        background: #FFFFFF 0 0 no-repeat padding-box;
        box-shadow: 0 2px 6px #23282D12;

        h3 {
          margin-top: 0;
        }
      }
    }
  }
}