@font-face {
    font-family: "ULPGC-icon";
    src: url("fonts/ULPGC-icon.eot");
    src: url("fonts/ULPGC-icon.eot") format("embedded-opentype"), url("fonts/ULPGC-icon.ttf") format("truetype"), url("fonts/ULPGC-icon.woff") format("woff"), url("fonts/ULPGC-icon.svg") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  body, p, table{
    font-family: "Rubik", "Open Sans", sans-serif !important;
  }
  #signature-page {
    margin-left: 12px;
  }
  #app {
    max-width: 1440px;
    margin: 0 auto;
    padding: 10px;
  }
  .signature-app .signature-form input, .signature-app .signature-form textarea,.signature-app .signature-form .ulpgcds-form__item{
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
  .signature-app .row{
    width: 100%;
  }
  .signature-app .row > div {
    overflow: visible !important;
  }
  
  /* signature is highlighted when it is in 'copied' state */
  /* CSS code: credits to people here: https://stackoverflow.com/questions/28365839 */
  .signature-copied {
    background: linear-gradient(90deg, #377B33 50%, transparent 50%),
                linear-gradient(90deg, #377B33 50%, transparent 50%),
                linear-gradient(0deg, #377B33 50%, transparent 50%),
                linear-gradient(0deg, #377B33 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
    padding: 10px;
    animation: border-dance 10s infinite linear;
}

  @keyframes border-dance {
    0% {
      background-position: 0 0, 100% 100%, 0 100%, 100% 0;
    }
    100% {
      background-position: 100% 0, 0 100%, 0 0, 100% 100%;
    }
  }

  .logo-list-wrapper{
    position: relative;
    margin-bottom: 20px;
  }
  .logo-list{
    position: absolute;
    width:100%;
    padding-bottom: 30px;
  }
  .signature-app .logo-item {
    /* border: 0 none; */
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 2px solid #0066a1;
    transition: all .2s ease-in-out;
    white-space: nowrap;
    background-color: #f6f7f7;
    border: 0 none;
    border-style: solid;
    text-align: left;
    font-weight: normal;
    font-size: 0.9em;
    padding: 2px 10px;
  }
  .signature-app .logo-item:hover, .signature-app .logo-item:focus{
    /* border-bottom-color: #ffa100;
    color: #ffa100; */
    color: white;
    background-color: #0066a1;
  }

  .signature-app label button {
    border: 0 none;
    color: #565a5c;
    text-align: left;
  }
  .signature-app #signature {
    margin-top: 40px;
  }
  .signature-app .ulpgcds-messages.ulpgcds-messages--status {
    margin: 20px 0 0;
  }
  .signature-app .logo-help {
    position: absolute;
  }
  #example-title {
    display: block;
    margin-top: 40px;
  }

  #example .ulpgcds-tab-content {
    padding: 0;
    background-color: white;
  }

  #example {
    margin: 20px;
    padding: 20px;
    border: 2px solid #0066a1;
    position: relative;
  }
  #example:before {
    content: "";
    position: absolute;
    top: -2;
    right: -2;
    border-width: 0 32px 32px 0;
    border-style: solid;
    border-color: #0066a1 #fff;
  }
  #example p{
    font-size: 0.8em;
    margin: 0.8em;
  }

  /* Textos de ayuda */
  #help-text .ulpgcds-accordion__title {
    font-size: 0.8em;
  }

  #help-text ol,
  #help-text ul {
    font-size: 1em;
  }

  #help-text li {
    padding-bottom: 0px;
    font-size: 1em;
  }