/**
 * ARKON - Responsive grid
 ***************************
 * These rules are based on existing styles and are not "complete" on their own.
 * They will overwrite previously written conditions, both inline and in external stylesheets.
 * For optimal results these rules should be included after the rest.
 *
 * Code by Christel and Knut, Bennett Reklamebyrå
 */



/* Section 1: Generic rules --------------------------------------------- */

* {
  /* include padding and border in each elements total width/height */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

table,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="week"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="color"],
textarea {
  /* ACTIVATE IF YOU WANT RESPONSIVE INPUT FIELDS ON BIG SCREENS AS WELL */
  /* set dynamic width on all relevant items */
  width: 100% !important;
}

#headerBox, 
#contentBox, 
#footerBox {
  /* ACTIVATE IF YOU WANT RESPONSIVE CONTAINER WIDTH ON BIG SCREENS AS WELL */
  /* set dynamic width as standard for all devices */
  width: 100%; 
  min-width: auto;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="week"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="color"],
textarea {
  /* standardize input fields and textarea */
  border: 1px solid #ccc;
  padding: 6px 10px !important;
  vertical-align: middle !important;
}



/* Section 2: Form specific fields -------------------------------------- */

input#mobile_ac, input#fax_ac, input#office_ac, input#phone_ac {
  /* specific width for areacode */
  width: 45px !important;
}

input#mobile_ac + input[type="tel"],input#fax_ac + input[type="tel"],input#office_ac + input[type="tel"],input#phone_ac + input[type="tel"] {
  /* ACTIVATE  IF YOU WANT RESPONSIVE INPUT ON BIG SCREENS */
  /* calculate new width for phone input */
  float: right;
  margin-right: 2px;
  width: -webkit-calc(100% - 65px) !important;
  width:    -moz-calc(100% - 65px) !important;
  width:         calc(100% - 65px) !important;
}

select[name="category"], 
select[name="country"], 
select[name^="extraP"], 
select[name^=categories],
.chosen-container,
.dateExtraField > .chosen-container {
  /* reset width for dropdowns */
  width:100% !important;
}

.dateExtraField .chosen-single {
  /* add small spacing between dropdown-dates */
  margin-right: 5px;
}

input:focus,
select:focus,
textarea:focus {
  /* standardize focus */
  outline: none !important;
	border: 1px solid #36c;
  -webkit-box-shadow: 0 0 2px #09f;
     -moz-box-shadow: 0 0 2px #09f;
          box-shadow: 0 0 2px #09f;
}



/* Section 3: Header, footer and other containers ----------------------- */

#formHeader { 
  /* add padding to sides of main container, looks better on smaller devices */
  padding: 0 20px; 
}


.logo img {
  /* set dynamic width on logo in header */
  margin:0;
  padding:20px;
  display:block;
  max-width:100%;
}

#footerBox > a {
  /* fix link in footer */
  padding-right: 10px;
  display: block;
}

#footerContent {
  /* adjust position of logo in footer */
  padding-left:10px;
  background-position:right center;
}



/* Section 4: Mobile ---------------------------------------------------- */

@media screen and (max-width: 50em) { /* breakpoint at approx 800px */

  table,
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="url"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="week"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="color"],
  textarea,
  /* ...and lets make sure to overwrite hardcoded elements */
  #fname, #lname, #email, #birth, #street1, #street2, #placeName, #firm, #title, .extraFieldText, .eventRegInfoText {
    /* set dynamic width on all relevant items */
    width: 100% !important;
  }



  input#mobile_ac + input[type="tel"],input#fax_ac + input[type="tel"],input#office_ac + input[type="tel"],input#phone_ac + input[type="tel"] {
    /* calculate new width for phone input */
    float: right;
    margin-right: 2px;
    width: -webkit-calc(100% - 65px) !important;
    width:    -moz-calc(100% - 65px) !important;
    width:         calc(100% - 65px) !important;
  }


  #formHeader { 
    /* minimize padding on container to make more room for content */
    padding: 0px 0px;
  }

  #headerBox, 
  #contentBox, 
  #footerBox {
    /* set dynamic width as standard and remove static min-width for smaller devices */
    width: 100%; 
    min-width: auto;
  }

  #footerBox > a {
    /* adjust height/size */
    padding-bottom:10px;
  }

  #footerContent {
    /* adjust background placement */
    background-position:center bottom;
    padding-top:10px;
    padding-bottom:40px;
  }

  .logo,
  #footerContent {
    /* adjust content placement */
    text-align:center;
  }

  .logo img {
    /* make sure image is scalable on all platforms */
    width: 100%;
  }

  input#mobile_ac + input[type="tel"],input#fax_ac + input[type="tel"],input#office_ac + input[type="tel"],input#phone_ac + input[type="tel"] {
    /* remove margin */
    margin-right: 0px;
  }

  #extForms > tbody > tr:not(.headlineTr) {
    /* make the main tr's behave as table */
    display: table;
    width: 100% !important;
    padding-bottom: 10px;
  }

  #extForms > tbody > tr:not(.headlineTr):not(.eventRow) > th,
  #extForms > tbody > tr:not(.headlineTr):not(.eventRow) > td {
    /* make the main th's and td's behave as tr */
    display: table-row;
    width: 100% !important;
  } 

  #extForms > tbody > tr.eventRow > td:first-child {
    /* specific width for the main container of checkboxes et al. */
    width: 50px;
    padding-right: 0;
  }

  select[name="category"],
  select[name="country"], 
  select[name^="extraP"], 
  select[name^=categories],
  .chosen-container {
    /* set responsive width on dropdowns */
    width: 100% !important;
  }

  span.dateExtraField > .chosen-container {
    /* reset width on date dropdowns (this should remain static) */
    width: auto !important;
  }

}


@media screen and (max-width: 35em) { /* breakpoint at approx 560px */ 

  #contentBox #entry, 
  #headerBox #entry, 
  #footerBox #entry {
    /* minimize padding */
    padding: 12px 8px;
  }

  #akkreditering_personForm {
    /* minimize margins */
    margin: 8px;
  }

}
body {
    margin-top: 0;
    }

#headerBox {
    text-align: center;
}
#headerBox, #contentBox, #footerBox {
    box-sizing: border-box;
    display: block;
    margin: 0px auto;
    max-width: 800px;
    min-width: 0;
    padding: 0 30px;
}
#footerBox {
    margin-bottom: 20px;
}
#contentBox #entry {
    padding: 30px 0 0;
}
#contentBox {
    box-shadow: 0 0px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    background: #fdfdfd;
}
#headerBox #entry, #footerBox #entry {
    padding: 30px 0;
}
#headerBox .logo, .footerBox .logo {
    display: block;
    margin: 0 auto;
}
#footerContent {
    background-position: right center !important;
    font-family: sans-serif;
}
.logo img {
    height: auto;
    margin: 20px auto;
    max-width: 100%;
}
#contentBox h1 {
    border-bottom: 1px solid #ccc;
    color: #151515;
    font-family: "Circular-Pro-Book", sans-serif;
    font-size: 35px;
    font-variant: normal;
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 20px;
    padding-bottom: 10px;
    
}
h2 {
    border-bottom: 1px solid #151515 !important;
    color: #444;
    margin: 40px 0 10px;
    padding-bottom: 0px;
    text-transform: uppercase;
    font-weight: normal;
}
#contentBox #entry .infoText, #formCloseInfo, #contentBox div#entry p {
    color: #151515;
    font-family: "Circular-Pro-Book",sans-serif;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 1.5;
}

table {
    width: 100%;
}
th, td {
    font-family: "Circular-Pro-Book", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    padding: 5px 0 !important;
}
.eventTitle .eventTime {
    font-size: 14px;
    font-style: normal;
}
@media screen and (max-width: 840px) {
#headerBox, #contentBox, #footerBox {
    margin-left: 0px;
    margin-right: 0px;
}
}
tr.overLappingEvent td:first-child {
    display: table-cell !important;
}
.eventTitle:hover span {
    color: #000000;
}
.overLappingEvent .eventTitle:hover span {
    color: inherit;
}
@media screen and (max-width: 580px) {
#footerContent {
    padding: 20px 50% 20px 20px;
}
.ui-widget {
    font-size: 14px;
}
#headerBox, #contentBox, #footerBox {
    padding: 0 20px;
}
table .headlineTr {
    margin-top: 30px;
}
table tr {
    margin-bottom: 10px;
}
table tr, table th, table td {
    box-sizing: border-box;
    display: block;
    line-height: 1.5;
    max-width: 100%;
}
table .eventRow:not(.onlyForCategories) {
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
    padding-bottom: 10px;
}
table .eventRow:not(.onlyForCategories) th, table .eventRow:not(.onlyForCategories) td {
    display: table-cell;
}
form#akkreditering_personForm th {
    width: auto;
}
#fname, #lname, #email, #birth, #street1, #street2, #placeName, #firm, #title, .extraFieldText, .eventRegInfoText, .chosen-container, #mobile, #phone, #fax, #office_phone {
    max-width: 100%;
    /* width: auto !important; */
}
}
@media screen and (max-width: 360px) {
#mobile {
    max-width: 148px !important;
}
select[name="category"], [name="subCategory"], select[name="country"], select[name^="extraP"], select[name^="categories"] {
    width: 100%;
}
}
.sendFormButton {
    font-family: "Roboto", sans-serif !important;
    font-weight: normal;
	font-size: 17px;
	padding: 0 2rem;
    text-transform: uppercase;
	border: none;
    border-radius: 1px;
	text-decoration: none;
    color: #fff;
    background-color: #459c50;
    text-align: center;
    letter-spacing: .5px;
	height: 54px;
    line-height: 56px;
	position: relative;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
    z-index: 1;
    will-change: opacity, transform;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
	box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15);
}
.sendFormButton:hover {
    box-shadow: 0 10px 18px rgba(0,0,0,0.30), 0 9px 18px rgba(0,0,0,0.15);
}
#akkreditering_personForm {
    margin: 0 0 20px;
}
#akkreditering_personForm tbody tr td input {
    padding: 5px;
}
#akkreditering_personForm tbody tr td input[type="checkbox"] {
    height: 20px;
    margin-right: 5px;
    vertical-align: middle;
    width: 20px;
}
tr.overLappingEvent {
    text-decoration: none;
}
tr.overLappingEvent td {
    color: #ccc;
}
tr.overLappingEvent td:first-child {
    display: none;
}
.warningIcon, img[alt="tooltip"] {
    display: none;
}
i.fa.fa-exclamation-triangle {
    color: #ffd14a;
    font-size: 24px;
}

body {
    background-color: #FFFFFF !important;
}
label, th {
    font-weight: normal !important;
}
input[type="date" i], input[type="datetime-local" i], input[type="month" i], input[type="time" i], input[type="week" i] {
    font-family: "Circular-Pro-Book", sans-serif;
}