/* ---------------------------------- Body --------------------------------- */
/* ========================================================================= */

body {
  /* background: #ECECEC; */
  font-family: Verdana, sans-serif; 
  font-size: 11pt; 
  line-height: 18pt;
  background-color: #F47D20; 
  width: 960px; 
  margin: 0px auto 0px auto;
}

#main {
   background: url("elixir-header.png") right 25px top 15px no-repeat ;
}
#portal-header {
  margin: 0px auto 20px auto;
  padding-top: 15px;
}
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

h1 {
  font-size: 32px; 
  line-height: 39px; 
}
h2 {
  font-size: 24px; 
  line-height: 29px;
  text-align: center; 
}
h3 {
  font-size: 19px; 
  line-height: 23px; 
}
h4 {
  font-size: 11pt; 
  line-height: 18pt; 
}

p {
  font-size: 11pt;
  line-height: 18pt;
  text-align: justify;
  clear: both; 
}
p.note_gdpr {
  text-align: center;
  font-weight: 600;
  padding: 10px 0px;
  margin: 10px 30px;
}
p.note_photo {
  text-align: justify;
  font-weight: 400; 
  padding: 10px 0px;
  margin: 10px 30px;
}
p.agreement {
  font-style: italic;
}
p.note_thanks {
  text-align: center;
  font-weight: 600;
  padding: 10px 0px 50px 0px;
  margin: 10px 30px;
}
span.detail {
  font-weight: 600;
}
p.footer {
  text-align: center;
  font-size: 10pt;
}

a {
  color: #007bb3;
  text-decoration: none;
}

a:hover, a:focus {
  color: #004666;
  text-decoration: underline;
}

.understand,
.agree_participant_booklet,
.agree_contribution_booklet,
.agree_accommodation {
  font-weight: 600;
}

#personal,
#contribution,
#accommodation_warning,
#accommodation, {
/* #allow_submit  { */
  display: block;
}
#allow_submit  {
  display: none;
}

/* ---------------------------- Setting for forms -------------------------- */
form {
  font-size: 11pt;
  line-height: 18pt;
}

fieldset { 
  border: 1px solid #ECECEC;
  font-size: 11pt;
  line-height: 18pt;
  padding: 10px 30px;
  margin: 10px 30px;
}

legend {
  font-size: 11pt;
  line-height: 18pt;
  padding-left: 1em;
  padding-right: 1em;
}

label {
  font-size: 11pt;
  line-height: 18pt;
  float: left;
  width: 100%;
  padding: 0.8em 5px 0.1em 0px;
  clear: both; 
}

input[type=text],
input[type=email],
textarea {
  font-size: 11pt;
  line-height: 18pt;
  width: 100%;
  padding: 5px 15px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
}
input[type=checkbox] {
  margin-right: 10px;
}
input:focus, 
select:focus, 
textarea:focus { 
  outline: none !important;
  border: 1px solid #d9d9d9; 
  box-shadow: 0 0 5px #F47D20;

  /* background: url(select_small_arrow_bottom.png) no-repeat 98% 50% #ffffff; */

}

select {
  font-size: 11pt;
  line-height: 18pt;
  width: 100%;
  padding: 5px 15px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;

  background: url(select_small_arrow_bottom.png) no-repeat 98% 50% #ffffff;

  -webkit-appearance: none; /* To gain control over the appearance on WebKit ( Safari and Chrome ) */
  -moz-appearance: none; /* To gain control over the appearance on Gecko ( Firefox )*/
  appearance: none;
}

button { 
  font-size: 11pt;
  line-height: 18pt;
  width: 100%;
  padding: 5px 15px;
  border: 1px solid #d9d9d9;
  background: #F8B58A;
  color: #000000;
  font-weight: 400;
  border-radius: 5px;
}

/* ------------------------ Styles for Mobile Devices ---------------------- */
/* ========================================================================= */
/* https://responsivedesign.is/develop/browser-feature-support/
                                media-queries-for-common-device-breakpoints/ */

/* --------------- Smartphones (portrait and landscape) -------------------- */
@media only screen and (min-width : 768px) and (max-width : 1040px) {

  body {
    width: 100%;
  }

}

/* --------------- Smartphones (portrait and landscape) -------------------- */
@media only screen and (min-width : 481px) and (max-width : 767px) {

  body {
    width: 100%;
  }

}

/* --------------- Smartphones (portrait and landscape) -------------------- */
@media only screen and (max-width : 480px) {

  body {
    width: 100%;
  }
  p.note {
    margin: 0px;
  }
  fieldset {
    margin: 0px;
    padding: 0px;
    border: solid 0px;
    /* border-bottom: solid 1px grey; */
  }
  legend {
    padding: 10px 0px 0px 0px;
    margin: 0px;
    font-weight: 600;
  }
  p.note_gdpr {
    padding: 0px;
    margin: 0px;
  }
  p.note_photo {
    padding: 0px;
    margin: 20px 0px;
  }
  p.footer {
    text-align: center;
  }
}

/* --------------- Smartphones (portrait and landscape) -------------------- */
@media only screen and (max-width : 1040px) {

  body {
    background-color: #FFFFFF;
    padding: 0px;
    margin: 0px;
  }
  #portal-logo img {
    width: 20%;
  }
  #main {
   background-size: 50%;
  }
  h2 {
    color: #F47D20;
  }
  legend {
    color: #F47D20;
  }
  p.footer {
    text-align: center;
  }

}


/* ------------------------------------------------------------------------- */
/* https://www.w3schools.com/css/css_rwd_mediaqueries.asp */

/* Extra small devices (phones, 600px and down) */
/* @media only screen and (max-width: 600px) {
    .example {background: red;}
} */

/* Small devices (portrait tablets and large phones, 600px and up) */
/* @media only screen and (min-width: 600px) {
    .example {background: green;}
} */

/* Medium devices (landscape tablets, 768px and up) */
/* @media only screen and (min-width: 768px) {
    .example {background: blue;}
} */

/* Large devices (laptops/desktops, 992px and up) */
/* @media only screen and (min-width: 992px) {
    .example {background: orange;}
} */

/* Extra large devices (large laptops and desktops, 1200px and up) */
/* @media only screen and (min-width: 1200px) {
    .example {background: pink;}
} */