body {
    /*background: transparent url(https://picsum.photos/1366/768/?image=16) center center no-repeat;*/
    background: #336;
    background-attachment: fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
    font-family: 'Oxygen', sans-serif;
    font-size: 16px;
}

div#loader-bkg {
    position: fixed;
    z-index: 99999;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
}

div#container-ajax {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: white;
    z-index: 10000;
}

div#container-ajax form {
    position: fixed;
    width: 500px;
    max-width: 100%;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

div.central {
    margin: 20px auto;
    padding: 15px 20px;
    position: relative;
    box-shadow: 0px 1px 5px rgba(100,100,100,0.8);
    background: rgba(255,255,255,0.97);
    border-radius: 5px;
    max-width: 1600px;
    width: 90%;
}

div.central-login {
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgba(255,255,255,0.95);
    transform: translate(-50%, -50%);
    width: 400px;
    max-width: 80%;
}

div.central form {
    margin: 0;
    padding: 0;
}

div.central form label {
    font-size: 0.9em;
    font-weight: 600;
    color: #333;
}

div.central h1 {
    padding-top: 72px;
    background: transparent url(//static.conference.net.br/image/logo-tcongresso64.png) center top no-repeat;
    line-height: 1.3em;
    margin-top:  0;
}

div.central h3 {
    line-height: 1.5em;
}

div.central h1 small {
    font-size: 0.7em;
}

div.evento-usuario-lista {
    padding: 10px;
    margin: 15px 0;
    background: #f3faff;
    border: 1px dotted #abc;
    border-radius: 5px;
}

div.evento-usuario-lista h2 {
    margin-top: 0;
    padding-top: 0;
}

div.evento-usuario-lista ul {
    margin: 0;
    padding: 0;
    margin-left: 32px;
}

div.evento-usuario-lista ul li {
    list-style: none;
    margin: 10px 0;
    padding: 0;
    border-bottom: 1px solid #bcd;
}

div.evento-usuario-lista ul li ul.evento-usuario-lista-acesso, div#menuToggle ul#menu ul.evento-usuario-lista-acesso {
    margin: 0;
    padding: 0;
}

div.evento-usuario-lista ul li ul.evento-usuario-lista-acesso li, div#menuToggle ul#menu ul.evento-usuario-lista-acesso li {
    list-style: none;
    display: inline;
    margin: 10px 0;
    padding: 0 10px;
    border-bottom: none;
}

section#evento-inscricao-lista div {
    padding: 5px 10px;
    border-bottom: 1px solid #0262CD;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    transition: 0.5s background-color;
}

section#evento-inscricao-lista div h3:nth-child(1) {
    font-size: 1.6em;
    padding: 5px 0;
    background: transparent url(//static.conference.net.br/image/icon-conferencia32.png) 3px center no-repeat;
    padding-left: 40px;
}

section#evento-inscricao-lista div h4 {
    line-height: 1.7em;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 0;
}

section#evento-inscricao-lista div h3 a {
    padding-top: 6px;
    padding-bottom: 6px;
}

section#evento-inscricao-lista div p {
    display: block;
    min-height: 50px;
}

section#evento-inscricao-lista div:hover {
    background: #EDF3F9;
    transition: 0.5s background-color;
}

section#avaliacao-trabalho-info {
    display: block;
    background: white;
    margin: 5px auto;
    padding: 10px 20px 10px 20px;
    width: 95%;
    max-width: 900px;
    border: 1px dotted #def;
    border-radius: 5px;
}

section#avaliacao-trabalho-info h2, section#avaliacao-trabalho-info h4 {
    margin: 5px 0;
    padding: 0;
    font-family: Arial, helvetica, sans-serif;
}

section#avaliacao-trabalho-info div.avaliacao-trabalho-info-d {
    margin-top: 15px;
    line-height: 1.45em;
    font-family: Arial, helvetica, sans-serif;
}

a.inscrito-form-email {
    margin-right: 8px;
}

section#questionario-pergunta div {
    display: block;
    padding: 20px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #CCDDFF;
}

section#questionario-pergunta div p {
    margin-top: 0;
    padding-top: 0;
}

/* Editor Quill */
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
    content: '12';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
    content: '16';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
    content: '18';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    content: '20';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
    content: '24';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
    content: '32';
}

  /* Menu oculto */
  #menuToggle
  {
    display: block;
    position: relative;
    top: 0px;
    left: 0px;

    z-index: 1;

    -webkit-user-select: none;
    user-select: none;
  }

  #menuToggle input
  {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;

    cursor: pointer;

    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */

    -webkit-touch-callout: none;
  }

  /*
   * Just a quick hamburger
   */
  #menuToggle span
  {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;

    background: #041C54;
    border-radius: 3px;

    z-index: 1;

    transform-origin: 4px 0px;

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
  }

  #menuToggle span:first-child
  {
    transform-origin: 0% 0%;
  }

  #menuToggle span:nth-last-child(2)
  {
    transform-origin: 0% 100%;
  }

  /*
   * Transform all the slices of hamburger
   * into a crossmark.
   */
  #menuToggle input:checked ~ span
  {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
  }

  /*
   * But let's hide the middle one.
   */
  #menuToggle input:checked ~ span:nth-last-child(3)
  {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }

  /*
   * Ohyeah and the last one should go the other direction
   */
  #menuToggle input:checked ~ span:nth-last-child(2)
  {
    transform: rotate(-45deg) translate(0, -1px);
  }

  /*
   * Make this absolute positioned
   * at the top left of the screen
   */
  #menu
  {
    position: absolute;
    width: 300px;
    margin: -100px 0 0 -50px;
    padding: 50px;
    padding-top: 125px;

    background: #FFFBED;
    border: 1px solid rgb(106,225,179);
    border-radius: 0px 0px 10px 10px;
    box-shadow: 0px 0px 4px 1px rgba(106,225,179,0.65);
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */

    transform-origin: 0% 0%;
    transform: translate(0, -100%);

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  }

  #menu li
  {
    padding: 10px 0;
    font-size: 20px;
  }

  /*
   * And let's slide it in from the left
   */
  #menuToggle input:checked ~ ul
  {
    transform: none;
  }

  form input:not([type=submit]) {
      height: 32px;
      width: 96%;
      font-family: 'Play', sans-serif;
      font-size: 16px;
      color: #333;
      transition: all 0.25s ease-in;
      border: 1px solid #ccc;
      border-radius: 3px;
      padding: 5px;
      outline: none;
      display: block;
      margin: 10px 0;
      background: transparent url(//static.conference.net.br/image/icon-editar24.png) -30px center no-repeat;
  }

  form input[type=text].horario {
      width: 80px;
      font-family: 'Play', sans-serif;
      font-size: 16px;
      color: #333;
      transition: all 0.25s ease-in;
      border: 1px solid #ccc;
      border-radius: 3px;
      padding: 5px;
      outline: none;
      display: block;
      margin: 10px 0;
      background: none;
      text-align: center;
  }

  form input[type=color] {
      background: none;
  }

  form input[type=radio], form input[type=checkbox], form div.ql-tooltip input[type=text] {
      height: auto;
      width: auto;
      color: #333;
      transition: all 0.25s ease-in;
      border: none;
      border-radius: 0;
      padding: 0;
      outline: none;
      display: inline;
      margin: auto;
      background: none;
  }

  form input:focus:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]):not(.horario) {
      opacity: 1;
      padding-left: 42px;
      width: calc(96% - (37px));
      transition: all 0.25s ease-out;
      color: black;
      font-size: 1.05em;
      font-weight: bold;
      border-color: #777;
  }

  form input[type=text]:focus {
      background: white url(//static.conference.net.br/image/icon-editar24.png) 7px center no-repeat;
  }

  form input[type=url]:focus {
      background: white url(//static.conference.net.br/image/icon-url24.png) 7px center no-repeat;
  }

  form input[type=radio]:focus, form input[type=checkbox]:focus {
      opacity: 1;
      padding-left: 0;
      width: auto;
      transition: all 0.25s ease-out;
      color: black;
      font-size: 1em;
      font-weight: normal;
      border-color: transparent;
      background: none;
  }

  form input[type=color]:focus, form div.ql-tooltip input[type=text]:focus {
      opacity: 1;
      padding-left: 5px;
      transition: none;
      width: 96%;
      font-size: 1em;
      font-weight: normal;
      background: white;
      background-image: none;
  }

  form textarea {
      display: block;
      box-sizing: padding-box;
      overflow: hidden;
      outline: none;
      resize: none;

      padding: 5px;
      width: 96%;
      font-family: 'Play', sans-serif;
      font-size: 16px;
      margin: 10px 0;
      box-shadow: 2px 2px 8px rgba(black, 0.3);
      border: 1px solid #ccc;
      border-radius: 3px;
      background: transparent;
  }

  form textarea:focus {
      background: white;
  }

  form button[type=submit], form#form-email button[type=button].form-fechar {
      font-family: 'Play', sans-serif;
      border: none;
      color: white;
      padding: 18px 32px;
      text-align: center;
      text-decoration: none;
      display: block;
      font-size: 16px;
      padding-right: 64px;
      background: #075CA3 url(//static.conference.net.br/image/icon-enviar32.png) right center no-repeat;
      border-radius: 5px;
      transition: 0.3s all;
      margin: 10px auto;
      margin-top: 20px;
      min-width: 150px;
      cursor: pointer;
  }

  form button[type=submit]:hover, form#form-email button[type=button].form-fechar:hover {
      box-shadow: 0px 2px 8px rgba(2,140,255,0.8);
      background-color: #0262CD;
      transition: 0.5s all;
  }

  form select {
      font-family: 'Play', sans-serif;
      margin: 10px auto;
      padding: 5px 0;
  }

  form input[type=email] {
      background: transparent url(//static.conference.net.br/image/icon-email24.png) -30px center no-repeat;
  }

  form input[type=email]:focus {
      background: white url(//static.conference.net.br/image/icon-email24.png) 7px center no-repeat;
  }

  form input[type=search] {
      background: transparent url(//static.conference.net.br/image/icon-buscar24.png) -30px center no-repeat;
  }

  form input[type=search]:focus {
      background: white url(//static.conference.net.br/image/icon-buscar24.png) 7px center no-repeat;
  }

  form input[type=site] {
      background: transparent url(//static.conference.net.br/image/icon-local24.png) -30px center no-repeat;
  }

  form input[type=site]:focus {
      background: white url(//static.conference.net.br/image/icon-local24.png) 7px center no-repeat;
  }

  form input[type=password] {
      background: transparent url(//static.conference.net.br/image/icon-password24.png) -30px center no-repeat;
  }

  form input[type=password]:focus {
      background: white url(//static.conference.net.br/image/icon-password24.png) 7px center no-repeat;
  }

  form input[type=tel] {
      background: transparent url(//static.conference.net.br/image/icon-celular24.png) -30px center no-repeat;
  }

  form input[type=tel]:focus {
      background: white url(//static.conference.net.br/image/icon-celular24.png) 7px center no-repeat;
  }

  form input[type=number], input[type=text].numero {
      background: transparent url(//static.conference.net.br/image/icon-numero24.png) -30px center no-repeat;
  }

  form input[type=number]:focus, input[type=text].numero:focus {
      background: white url(//static.conference.net.br/image/icon-numero24.png) 7px center no-repeat;
  }

  form input[type=date], input[type=text].datahora, input[type=text].data {
      background: transparent url(//static.conference.net.br/image/icon-calendario24.png) -30px center no-repeat;
  }

  form input[type=date]:focus, input[type=text].datahora:focus, input[type=text].data:focus {
      background: white url(//static.conference.net.br/image/icon-calendario24.png) 7px center no-repeat;
  }

  form input[type=text].endereco {
      background: transparent url(//static.conference.net.br/image/icon-endereco24.png) -30px center no-repeat;
  }

  form input[type=text].endereco:focus {
      background: white url(//static.conference.net.br/image/icon-endereco24.png) 7px center no-repeat;
  }

  form input[type=text].empresa {
      background: transparent url(//static.conference.net.br/image/icon-empresa24.png) -30px center no-repeat;
  }

  form input[type=text].empresa:focus {
      background: white url(//static.conference.net.br/image/icon-empresa24.png) 7px center no-repeat;
  }

  form input[type=text].valor {
      background: transparent url(//static.conference.net.br/image/icon-valor24.png) -30px center no-repeat;
  }

  form input[type=text].valor:focus {
      background: white url(//static.conference.net.br/image/icon-valor24.png) 7px center no-repeat;
  }

  form input[type=text].horario:focus {
      background: none;
  }

  table {
      margin: 0 auto;
      width: 95%;
      border-spacing: 0;
      border-collapse: separate;
  }

  table tbody tr:hover {
      background-color: #eff0fb;
  }

  table td, table th {
      padding: 3px 0;
  }

.parent-cs {
    float: right;
    position: relative;
    left: -50%;
}

.element-cs {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    left: 50%;
}

.element-cs:after, .parent-cs:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

div.resumo-apresentacao {
    display: inline-block;
    width: 450px;
    max-width: 95%;
    margin: 20px 20px 0 0;
    font-family: Arial, helvetica, sans-serif;
    max-height: 500px;
    overflow-y: auto;
}

table.tbl-resumo thead tr th:last-child(1) {
    width: 40px;
}

/* Formulário de busca */
form#form-filtro {
    width: 100%;
    border-bottom: 1px solid #DDF;
    border-top: 1px solid #DDF;
    background: #FDFDFF;
    padding: 10px 0;
    margin-bottom: 15px;
}

form#form-filtro:hover, form#form-filtro:focus {
    border-bottom: 1px solid #AAF;
    border-top: 1px solid #AAF;
}

form#form-filtro div {
    margin: 0 auto;
    max-width: 95%;
    text-align: center;
}

form#form-filtro input[type=search] {
    display: inline-block;
    width: 200px;
    max-width: 95%;
}

form.form-email-mala ul {
    width: 100%;
    margin: 15px 0;
    padding: 0;
    text-align: center;
}

form.form-email-mala ul li {
    list-style-type: none;
    display: inline-block;
    margin: 5px 15px 5px 0;
}

form.form-email-mala ul li label {
    margin-left: 5px;
}

div.central table a.excluir {
    margin-left: 10px;
}

div.btn-atualizar {
    display: block;
    margin: 15px 15px 15px 0;
}

div.btn-atualizar:after {
    content:".";
    display: block;
    height: 0;
    visibility: hidden;
    clear:both;
    padding: 0;
}

div.btn-atualizar button[type=button] {
    display: inline-block;
    float: right;
    margin-right: 15px;
    padding: 10px;
    padding-right: 36px;
    background: transparent url(//static.conference.net.br/image/icon-sucesso24.png) right 10px center no-repeat;
    cursor: pointer;
    font-family: 'Play', sans-serif;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    transition: 0.5s background;
}

div.btn-atualizar button[type=button]:hover {
    transition: 0.5s background;
    background: #dfe url(//static.conference.net.br/image/icon-sucesso24.png) right 10px center no-repeat;
}

p.file-return {
    padding-bottom: 10px;
    border-bottom: 1px solid #def;
}

.js .input-file-trigger {
    font-weight: normal;
}

footer {
    margin: 20px auto;
    padding: 15px 20px;
    position: relative;
    box-shadow: 0px 1px 5px rgba(100,100,100,0.8);
    background: rgba(255,255,253,0.75);
    border-radius: 5px;
    max-width: 1600px;
    width: 90%;
}

footer nav h2 {
    font-size: 2em;
    margin: 25px 0 20px 0;
}

footer nav h3 {
    font-size: 1.7em;
    margin: 30px 0 20px 0;
}

footer nav h4 {
    font-size: 1.4em;
    margin: 30px 0 20px 0;
}

footer nav ul {
    margin: 0;
    padding: 0;
}

footer nav ul li {
    list-style-type: none;
    display: inline;
    margin: 10px;
    padding: 0;
}

.ql-snow {
    background: white;
}

@media only screen and (max-width: 639px) {
    div.central, footer {
        display: block;
        margin: 20px auto;
        padding: 5px 20px;
        transform: none;
        position: inherit;
        width: 600px;
        max-width: 80%;
    }
}
