@import "fontawesome/css/all.css";

@font-face {
    font-family: 'bevanregular';
    src: url('bevan-regular-webfont.woff2') format('woff2'),
         url('bevan-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


/* ==========================================================================
    Base
========================================================================== */

body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 175%;
    font-weight: 400;
    color: #535550;
}

a {
    color: #535550;;
}

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

hr {
    border-top: 1px solid #e0e1ea;
    margin-top: 30px;
    margin-bottom: 30px;
}


/* ==========================================================================
    Structure
========================================================================== */

.container {
    max-width: 1170px;
}


/* ==========================================================================
    Headings
========================================================================== */

h1 {
    color: #fff;
    font-weight: 800;
    font-size: 60px;
    font-family: 'bevanregular', sans-serif;
}
h2,
h3 {
    font-weight: 700;
}

h2 {
    margin-top: 0;
    font-weight: 400;
}

h3 {
    font-size: 24px;
    color: #062a38;
}

h4 {
    font-size: 16px;
    color: #062a38;
    font-weight: 400;
}



/* ==========================================================================
    Boxed Template - Bar
========================================================================== */

.bar {
    height: 120px;
    background-color: #535550
}


/* ==========================================================================
    Logo
========================================================================== */

.header-left img {
    max-width: 150px;
    margin: 8px auto 0;
    display: block;
}


/* ==========================================================================
    Countdown
========================================================================== */

.countdown-container {
    background: #535550;
}

.countdown-wrapper {
    max-width: 1600px;
}

.countdown-wrapper h1 {
    font-weight: 300;
}

.countdown-wrapper h4 {
    font-weight: 500;
    color: rgba(255,255,255,0.85);
}


.countdown-box {
    font-size: 24px;
    font-weight: 400;
    padding-top: 20px;
}

.counter {
    font-size: 12px;
    text-transform: uppercase;
    margin-left: 5px;
}

.timer-wrap {
    width: 90px;
    height: 90px;
    border-radius: 100%;
    border: 3px solid #fff;
    display: inline-block;
    color: #fff;
    line-height: 20px;
    text-align: center;
    margin-left: 30px;
    background: #535550;
}


/* ==========================================================================
    Header image
========================================================================== */

.cover-image {
    position: relative;
    text-align: center;
}

/* ==========================================================================
    Buttons
========================================================================== */

.btn {
    border-radius: 0;
}

.btn-primary,
.btn-primary:focus {
    color: #fff;
    background-color: #535550;
    border-color: #535550;
    text-transform: uppercase;
    transition: all 0.25s ease-in-out;
    padding: 10px 25px 10px 25px;
    border-radius: 25px;
}

.btn-primary:focus {
    box-shadow: 0 0 0 3px rgba(116, 199, 226, 0.5);
}

.btn-primary:active,
.btn-primary:hover {
    background-color: #bbbbba !important;
    border-color: #bbbbba !important;
    box-shadow: none;
}


/* ==========================================================================
    Miscellaneous
========================================================================== */

.gray {
    background-color: #f7f7f7;
}

/* ==========================================================================
    Form
========================================================================== */

select,
input,
button {
    outline: none !important;
}

.form-control {
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #e0e1ea;
    border-radius: 0;
    box-shadow: none;
}


.form-control:focus {
    border-color: #535550
    outline: 0;
    box-shadow: 0 0 0 3px rgba(116, 199, 226, 0.5);
}

form small {
    color: #062a38;
    margin-left: 5px;
}

label {
    font-weight: 600;
}

.input-login,
.input-login:focus {
    border: 0 !important;
    outline: 0;
    box-shadow: none !important;
    background: #e2e2e2;
    text-align: center;
    font-size: 30px;
    color: #666;
}


/* Select
========================================================================== */

select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url('../img/arrow.png') !important;
    background-position: calc(100% - 10px) 50%;
    background-repeat: no-repeat;
    background-size: 12px 6px;
}

select::-ms-expand {
    display: none;
}

/* ==========================================================================
    Checkbox and Radio
========================================================================== */

input[type=checkbox],
input[type=radio] {
    display: none;
}

input[type=checkbox]+label,
input[type=radio]+label {
    position: relative;
    display: inline-block;
    border-radius: 50px;
}

input[type=checkbox]+label:before,
input[type=radio]+label:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 2px;
    width: 18px;
    height: 18px;
    border: 2px solid #cccccc;
    background-color: #ffffff;
}


/* Checkbox
========================================================================== */

input[type=checkbox]+label {
    padding-left: 35px;
}

input[type=checkbox]+label:before {
    left: 0;
}

input[type=checkbox]:checked+label:before {
    font-family: "Font Awesome 5 Pro";
    font-size: 16px;
    color: red;
    content: '\f00c';
    position: absolute;
    line-height: 14px;
}

/* Radio
========================================================================== */

input[type=radio]+label {
    padding-left: 40px;
}

input[type=radio]+label:before {
    left: 12px;
}

input[type=radio]+label:before {
    border-radius: 50%;
}

input[type=radio]:checked+label:after {
    content: "";
    position: absolute;
    left: 17px;
    top: 7px;
    width: 8px;
    height: 8px;
    background: #535550;
    border-radius: 50%;
}


/* ==========================================================================
    Validation
========================================================================== */

form.ng-submitted input[type=radio].ng-invalid+label:before,
form.ng-submitted input[type="checkbox"].ng-invalid+label:before,
form.ng-submitted input.ng-invalid,
form.ng-submitted select.ng-invalid {
    border: 2px solid #FF8AA4;
}


/* ==========================================================================
    Footer
========================================================================== */

footer p {
    line-height: 19px;
    text-align: center;
}


/* ==========================================================================
    Sweet Alert
========================================================================== */

.sweet-alert {
    border-radius: 0px;
}

.sweet-alert button {
    background-color: #74c7e2 !important;
    color: #ffffff;
    font-size: 15px;
    font-weight: normal;
    -webkit-border-radius: 0;
    border-radius: 0;
    padding: 6px 24px;
}

.sweet-alert button:hover {
    color: #ffffff;
    background-color: #bbbbba !important;
    transition: all 0.25s ease-in-out;
}

.sweet-alert p {
    color: #535550000;
    font-size: 15px;
    line-height: 28px;
    text-align: center;
    font-weight: 500;
}

.sweet-alert h2 {
    color: #535550
    font-size: 46px;
    line-height: 1.1;
    font-weight: 300;
    margin: 25px 0;
    padding: 0;
    line-height: 40px;
    display: block;
}

.sweet-alert .sa-icon.sa-info {
    border-color: #919191 !important;
}

.sweet-alert .sa-icon.sa-info::before,
.sweet-alert .sa-icon.sa-info::after  {
    background-color: #919191 !important;
}


/* ==========================================================================
    Animations
========================================================================== */

/* Fade In-Out */

.fade-animation.ng-enter {
    transition: 0.5s ease-in-out all;
    opacity: 0;
}

.fade-animation.ng-enter.ng-enter-active {
    opacity: 1;
}

.fade-animation.ng-leave {
    transition: 0.25s ease-in-out all;
    opacity: 1;
}

.fade-animation.ng-leave.ng-leave-active {
    opacity: 0;
}

/* ==========================================================================
    Media Queries
========================================================================== */

@media (min-width: 768px) {

    .code,
    .content {
        /* Bar + Image (+ margin) + Footer = 522.27px */
        min-height: calc(100vh - 522.27px);
    }

    .bar {
        height: 70px;
    }

    .header-left img {
        margin: 13.975px 0 0 0;
    }

    footer p {
        text-align: inherit;
    }
}

@media (min-width: 992px) {

    .code,
    .content {
        /* Bar + Image (+ margin) + Footer = 522.27px */
        min-height: calc(100vh - 550px);
    }
}

.header-container {
    background: #fff;
}

.menu-container {
    max-width: 1600px;
}

.reg-form-container {
    border: 3px solid #e2e2e2;
    border-radius: 5px;
    padding: 40px;
}

.menu-container ul {
    padding: 0;
    margin: 0;
    color: #535550;
    list-style-type: none;
}

.menu-container li {
    display: inline-block;
    margin-right: 60px;
    font-size: 16px;
}

.menu-container li:hover {
    cursor: pointer;
    border-bottom: 1px solid #fff;
}

.login-container {
    margin-top: -80px;
    border: 2px solid #e2e2e2;
    border-radius: 5px;
    max-width: 850px;
    background: #fff;
}

.code-row {
    justify-content: center !important;
}

.page-active {
    border-bottom: 1px solid #fff;
}

.content h2 {
    color: #535550;
    font-weight: 700 !important;
    margin-bottom: 25px;
    position: relative;
}

.content h2::after {
    content: " ";
    position: absolute;
    width: 50px;
    height: 3px;
    background: #535550;
    text-align: center;
    top: 45px;
    left: calc(50% - 25px);
}

.content p {
    
}

.item {
  }
  
  .item h3 {
    color: #535550;
    font-weight: 800;
    font-size: 18px;
    margin-top: 20px;
  }
  
  .item h4 {
    color: #777;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    line-height: 150%;
  }
  
  .item label {
      display: inline-block;
      width: 40%;
      background-color: #535550;
      padding: 20px;
      text-align: center;
      margin-bottom: 0;
      position: relative;
      font-size: 16px !important;
      text-transform: uppercase;
      color: #fff;
      cursor: pointer;
      font-weight: 500;
      height: 100%;
  }
  
  .item label:hover {
    background: #bbbbba;
  }
  
  .item input[type=checkbox]:not(old):checked + label, .item input[type=radio]:not(old):checked + label, .item input[type=checkbox]:not(old):checked + span + label, .item input[type=radio]:not(old):checked + span + label {
   background: red;
  }
  
  .item input[type=checkbox]:not(old) + label:before, .item input[type=checkbox]:not(old) + span + label:before {
    content: " ";
    position: absolute;
    left: 20px;
    top: 20px;
    font-size: 24px;
    width: 20px;
    height: 20px;
    border-radius: none;
    border: 2px solid #e9eef4;
    background: #fff;
  }
  
  .item input[type=checkbox]:not(old):checked + label:before, .item input[type=checkbox]:not(old):checked + span + label:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f14a";
    font-weight: 900;
    position: absolute;
    left: 20px;
    top: 15px;
    font-size: 22px;
    color: #905df7;
    background: none;
    width: 20px;
    height: 20px;
    border: none;
  }

  .item input[type=checkbox]:not(old),
.item input[type=radio]:not(old) {
  visibility: hidden;
}
.item input[type=checkbox]:not(old):checked + label,
.item input[type=radio]:not(old):checked + label,
.item input[type=checkbox]:not(old):checked + span + label,
.item input[type=radio]:not(old):checked + span + label {
  background: #bbbbba;
  border-radius: 50px;
}

.item input[type=radio]:not(old):checked + label:before,
.item input[type=radio]:not(old):checked + span + label:before {
  position: absolute;
  left: 20px;
  top: 20px;
  font-weight: 900;
  font-size: 20px;
  line-height: 20px;
  border: none;
  width: 20px;
  height: 20px;
  border: 6px solid #535550;
}

.item input[type=radio]:checked+label:after {
    display: none;
}


.item input[type=radio]:not(old)+ label:before,
.item input[type=radio]:not(old)+ span + label:before {
  content: " ";
  position: absolute;
  left: 20px;
  top: 20px;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  font-size: 1.5rem;
  border: 2px solid #e9eef4;
}


.social-icon {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: #fff;
    line-height: 30px;
    font-size: 18px;
    padding-top: 1px;
    color: #9ea5af;
    text-align: center;
    display: inline-block;
    margin-left: 10px;
}

.footer-address {
    color: rgba(255,255,255,0.75);
    font-size: 12px;
    display: inline-block;
    margin: 3px 0px 0px 10px;
}

.footer-links {
    color: rgba(255,255,255,0.75);
    font-size: 12px;
    margin-top: 10px;
}

.footer-links a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
}

.footer-links a:hover {
    color: rgba(255,255,255,0.75);
    text-decoration: underline;
}

.speaker img {
    max-width: 100%;
    height: auto;
}

.breakout {
    border: 2px solid #ddd;
    border-radius: 5px;
    padding: 25px;
    position: relative;
    background: #f6f7f8;
}

.breakout span {
    display: block;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #062a38;
}

.breakout-text {
    border: 2px solid #ddd;
    border-radius: 5px;
    padding: 25px;
    position: relative;
    z-index: 0;
    background: #fff;
}

.breakout-text p {
    font-size: 16px;
    line-height: 125%;
    margin: 10px 0;
}

.room-label {
    position: absolute;
    background: #535550;
    border-radius: 5px;
    bottom: -20px;
    left: -7px;
    width: calc(100% + 15px);
    text-align: center;
    color: #fff;
    padding: 5px 0;
    text-transform: uppercase;
    z-index: 1;
}

.form-control {
    border: 0;
    border-bottom: 3px solid #ddd;
}

.page-active {
    border-bottom: 2px solid #535550;
}

.headline {
    color: #fff !important; font-size: 80px; text-shadow: 2px 2px #000;
 }
 .subheadline {
    background: #535550; color: #fff; font-weight: bold; padding: 4px;width:370px; font-size: 24px;
 }
 
 .reg-form {background: #fff; position: relative; top: -200px; margin-left:auto;width:500px; padding:0;}
 .regy {
    height: 500px; overflow: auto;padding: 25px;
 }
 .body-style { overflow:hidden;}
 @media (max-width: 768px) {
    .headline {
    color: #fff !important; font-size: 40px; text-shadow: 2px 2px #000;
 }
 .subheadline {
    background: #535550; color: #fff; font-weight: bold; padding: 4px;width:100%; font-size: 20px;
 }
 .countdown-box {
     font-size: 18px;
     font-weight: 400;
     padding-top: 10px;
 }
 .counter {
     font-size: 10px;
     text-transform: uppercase;
     margin-left: 5px;
     position: relative;
     top: -5px;
 }
 .timer-wrap {
     width: 62px;
     height: 62px;
     border-radius: 100%;
     border: 3px solid #fff;
     display: inline-block;
     color: #fff;
     line-height: 20px;
     text-align: center;
     margin-left: 10px;
     background: #535550;
 }
 .timer-wrap:nth-child(1) {
     margin-left: 30px;
 }
 .reg-form {background: #fff; position: relative; top: -100px; margin-left:auto;width:100%; padding:0;}
 .body-style { overflow:auto;}
 .regy {
    height: unset; padding: 15px;
 }
 }