/* --------------------------------------------------------
CP Branding
Styles for the branding and branding preview
--------------------------------------------------------- */

.branding {
  margin: 40px auto;
  font-size: 14px;
}

/* Branding: controls
--------------------------------------------------------- */

.minicolors-swatch  {
  border: none;
  margin-right: 10px;
  border-radius: 50%;
}
.minicolors-swatch span {
  background-image: none;
  border: 2px solid #ddd;
  border-radius: 50%;
  box-shadow: none;
}

.branding .minicolors.minicolors-theme-default .minicolors-input {
  border: none;
  color: #9E9E9E;
  font-family: Consolas, Courier New, Courier, monospace;
  font-size: 14px;
  width: auto;
  height: auto;
  box-shadow: none;
}


/* Specific branding controls - colour pickers */

label[for="id_background_colour"],
label[for="id_text_colour"],
label[for="id_link_text_colour"],
label[for="id_help_text_colour"],
label[for="id_success_text_colour"],
label[for="id_error_text_colour"],
label[for="id_button_text_colour"],
label[for="id_button_background_colour"]{
  min-width: 180px;
}

/* Clear buttons */
label[for="logo-clear_id"],
label[for="banner_image-clear_id"],
label[for="background_image-clear_id"] {
  font-size: 12px;
  color: #F05EA3;
}
#logo-clear_id,
#banner_image-clear_id,
#background_image-clear_id {
  margin-left: 10px;
}

/* Prevent select from causing x overflow */
#id_font {
  max-width: 100%;
}

/* File inputs*/

.branding input[type="file"]{
  line-height: 0;
}

ul.errorlist {
    background: #EE4C4D;
    color: #fff;
    padding: 13px;
    padding-left: 41px;
    position: relative;
}

ul.errorlist::before {
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    content: "\e101";

    position: absolute;
    left: 15px;
    top: calc(50% - 6px);
    color: #fff;
}


/* Branding: preview area
--------------------------------------------------------- */

.branding-preview {
  background-color: #EDEDED;
  padding: 20px 20px 0;
  font-size: 13px;
  margin-top: 20px;
  width: 100%;
}
.branding-preview__logo.previewing {
  background-size: cover;
  background-color: transparent;
}
.branding-preview__header {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTAyNHB4IiBoZWlnaHQ9IjEwMjRweCIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0iYmFja2dyb3VuZDogI0Q2RDZENjsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0Ny4xICg0NTQyMikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+c2hpbTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJzaGltIj48L2c+CiAgICA8L2c+Cjwvc3ZnPg==');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 0;
  max-width: 500px;
  margin: auto;
}
.branding-preview__header.previewing {
  background-size: cover;
  background-color: transparent;
}
.branding-preview__content {
  background-color: #fff;
  padding: 20px;
  max-width: 500px;
  margin: auto;
}

.branding-preview__logo {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTAyNHB4IiBoZWlnaHQ9IjEwMjRweCIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0iYmFja2dyb3VuZDogI0Q2RDZENjsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0Ny4xICg0NTQyMikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+c2hpbTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJzaGltIj48L2c+CiAgICA8L2c+Cjwvc3ZnPg==');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 80px;
  height: 80px;
  float: left;
}
.branding-preview__logo.previewing {
  background-size: contain;
  background-color: transparent;
}
.branding-preview__text {
  margin-left: 20px;
  float: right;
  width: calc(100% - 100px);
}

.branding-preview__field {
  display: block;
  margin-right: 10px;
  border: 1px solid #ccc;
  height: 1.5em;
  float: left;
  width: 70px;
}

.branding-preview__button {
  margin-top: 5px;
  display: inline-block;
  padding: 3px 9px 5px;
  border-radius: 4px;
  background-color: #ccc;
  color: #fff;
}
.branding-preview__button:hover,
.branding-preview__button:active,
.branding-preview__button:focus {
  color: #fff;
  text-decoration: none;
}

.branding-preview__text--text {color: #ccc;}
.branding-preview__text--link {color: #ccc;}

.branding-preview__text--success span {border-color: #ccc;}
.branding-preview__text--success {color: #ccc;}

.branding-preview__text--help span {border-color: #ccc;}
.branding-preview__text--help {color: #ccc;}

.branding-preview__text--error span {border-color: #ccc;}
.branding-preview__text--error {color: #ccc;}