/* Settings Header */

#wpz-custom-css-js-settings-header {
  background      : $dsMediumPurple;
  position        : relative;
  padding         : 16px 23px;
  justify-content : space-between;
  display         : flex;
  flex-wrap       : wrap;
  align-items     : center;
  border-radius   : 16px 16px 0 0;
  font-family     : $fontGeneral;
  font-weight     : 600;

  .wpz-custom-css-js-settings-logo {

    display     : flex;
    align-items : center;
    row-gap: 15px;

    @media (max-width : 750px) {
      justify-content : center
      }

    @media (max-width : 500px) {
      flex-direction: column;
      }

    img {
      display        : inline-block;
      vertical-align : middle;
      margin-right   : 10px;
      width          : 25px;
      }

    h1 {
      margin         : 0;
      color          : #fff;
      font-size      : 15px;
      font-weight    : 600;
      display        : inline-block;
      vertical-align : middle;
      }
    }

  @media (max-width : 750px) {
    justify-content : center;

    .wpz-custom-css-js-settings-logo {
      width      : 100%;
      margin     : 0 auto 8px;
      text-align : center;
      }

    #wpz-custom-css-js-header-links {
      text-align : center;
      }
    }
  }

#wpz-custom-css-js-settings-header-links a {
  text-decoration     : none;
  color               : #fff;
  font-size           : 12px;
  font-weight         : 500;
  //margin-left         : 20px;
  padding             : 8px 12px 8px 12px;
  display             : inline-block;
  border-radius       : 4px;
  background-size     : 14px;
  background-repeat   : no-repeat;
  background-position : left center;
  box-shadow          : none;

  @media (max-width: 500px) {
    display: none;
    }

  &:hover {
    opacity : 1;
    color   : #fff;
    }
  }

#wpz-custom-css-js-settings-header-link-settings {
  background-image : url(../img/settings.svg);
  display          : none !important;
  }

#wpz-custom-css-js-settings-header-link-support {
  background-image : url(../img/documentation.svg);
  }