/*
 * VFL Styles 2024
 */


html {
  font-size: 10px;
}

body {
  background: #EEE;
  color: #333;
  font-weight: 400;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
}

h1 {
  margin: .3em 0 .5em;
  font-weight: 500;
  padding: 0 0;
  font-family: 'Open Sans', sans-serif;
}

p {
  line-height: 1.7;
  margin-bottom: 10px;
}

.logo-container {
  background-image: url("/assets/2015-cap48-42.png");
  background-position: bottom right;
  background-repeat: no-repeat;
  display:inline-block;
  width: 100%;
  text-align: center;
}

.nomusic {
  /* font-weight: lighter;*/
  text-align: center;
  cursor: pointer;
  font-size: 16px;
  white-space: normal;
}

.nomusic,
.nomusic:hover {
  color: #333;
}

.form-container {
  background-image: url("/assets/2016-logo-viva.png");
  background-position: bottom center;
  background-repeat: no-repeat;
}

label {
  font-weight: normal;
  cursor: pointer;
  font-size: 16px;
  display: block;
}

.table {
  margin-bottom: 10px;
}
.table>tbody>tr:first-child>td {
  border-top: 0 none;
}

.error {
  margin: 0 0 5px 0;
  color: #ff0000;
  font-style: italic;
  /*font-weight: 300; */
  width: 100%;
  font-size:14px;
}

button[type="submit"].button {
  border: 1px solid #dc4405;
  background-color: #dc4405;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  vertical-align: top;
  height: 48px;
  padding: 2px 30px 2px 20px;
  margin-left: 0px;
  margin-top: 10px;
  font-size: 16px;
  color: #FFFFFF;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  letter-spacing: 3px;
}

button[type="submit"].button:hover {
  background-color: rgba(247, 63, 2, 0.7);
  border: 1px solid transparent;
}





.goback {
  border:none;
  background-color: transparent;
  display: inline;
  outline: none;
  font-size: 16px;
  padding: 0;
  color: #f05022;
  margin-bottom: 10px;
  white-space: normal;
  text-align: left;
}
.goback:hover { text-decoration: underline; cursor: pointer;}

#inscription_sng_title { height: 48px; width: 100%; }


#ui-id-1 { border: 1px solid #153058; background-color: #FFFFFF; padding-left: 2px; color: #2f3292;
  font-family: 'PT Sans Narrow', sans-serif; font-size: 14px; width: 470px; max-height: 300px; overflow: auto;}
.ui-helper-hidden-accessible { display:none; }
#ui-id-1 li { list-style-type: none; width: 480px; padding-top: 2px;}
.ui-state-focus { color:#153058; background:#ffcf49; outline:none; }
.ui-state-focus:hover { cursor: pointer; }



@media screen and (max-width: 767px) {
  h1 { font-size: 24px; background-color: #fc6a08; color: white; padding: 0.1em .3em;}
  p { line-height: 1.4; text-align: justify;}
  #banner { display: none;}
  .nomusic { text-decoration: underline; }
}

@media screen and (min-width: 768px) {

  body {
    background-image: url(/assets/2024-bg-cropped.jpg);
    background-position: right top;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 10px;
    height: 100vh;
    color: rgb(51, 51, 51);
  }

  .vfl-content { padding: 10px 10px 0 10px; }

  #banner { display: block; background-color: rgba(255,255,255, .9); margin: 0 10px; padding: 10px; max-width: 560px; border-radius: 3px;}
  #banner > div { padding: 0;}

  button[type="submit"].button {
    font-size: 26px;
    font-weight: 600;
  }

  .arrow:after {
    content: "\203A";
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 5px;
    color: #fff;
    font-size: 60px;
    line-height: 40px;
    font-weight: 100;
  }

  h1 {
    /*color: rgb(51, 51, 51);*/
    color: #dc4405;
    text-shadow: none;font-size: 26px;
    padding: 0;
  }
 
  .container {
    max-width: 560px;
    padding: 10px;
    background-color: rgba(255,255,255, .9);
    border-radius: 5px;
    display:block;
    margin-left: 0;
    margin-bottom: 10px;
  }

  .container-nomusic {
    /*background-color: rgba(50,50,50, .6);*/
    background-color: rgba(255,255,255, .9);
    padding: 0; margin-bottom: 0;
    border-radius: 5px;
  }
  button.nomusic {
    font-size: 16px;
    font-weight: 600; text-decoration: underline;
  }

  .logo-container {
    width: 460px;
    background-image: none;
  }

  .logo-radio { position: absolute; right: 20px; bottom: 20px; }


  /*
  .nomusic,
  .nomusic:hover {
  }*/

  #transaction_validation { height: 60px; }

}