@media (max-width: 1500px) {
    #embedChatIframe {
        height: 574px!important;
    }
    #chatContainer {
        height: 102%!important;
    }
}

@media (min-width: 1450px) {
    #eventLogo {
        max-width: 33%!important;
    }
}

@media (min-width: 1300px) {
    #askButton {
        margin-top: -32px!important;
    }
    #questionInput {
        max-height: 204px!important;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1620px;
    }
    #chatRow {
        padding-left: 15px!important;
        margin-right: 7.5px;
    }
    #askButton {
        margin-top: -20px;
    }
    #titleBox {
        max-width: 70%;
    }
    .content-row {
        padding-top: 0.2%!important;
    }
    #eventLogo {
        max-width: 38.5%;
    }
    #questionInput {
        max-height: 138px;
    }
    .loading-area {
        margin-top: 45%;
    }
    #loadingText {
        margin-top: 49%!important;
    }
    #timerContainer {
        min-height: 500px;
    }
}

@media (max-width: 1199px) {
    .container {
        max-width: 1200px;
    }
    .media-element {
        padding-left: 30px!important;
        padding-right: 30px!important;
    }
    #eventLogo {
        max-width: 47%;
    }
    #titleBox {
        max-width: 80%;
        margin-top: 0%!important;
    }
    .content-row {
        padding-top: 0%!important;
    }
    #chatRow {
        padding-left: 15px!important;
        padding-right: 15px!important;
        padding-bottom: 30px!important;
        padding-top: 1.5rem!important;
        margin-top: 30px;
        margin-left: -9px;
        margin-right: -9px;
    }
    .chat-window {
        min-height: 507px;
        margin-bottom: 40px;
    }
    .chat-window-only {
        padding-left: 15px!important;
        padding-right: 15px!important;
    }
    .video-with-chat-only {
        padding-left: 15px!important;
        padding-right: 15px!important;
    }
    .qa-window-only {
        padding-left: 40px!important;
        padding-right: 40px!important;
    }
    #askButton {
        margin-top: 30px!important;
        width: 100px;
    }
    .loading-area {
        margin-top: 183px;
    }
    .descriptionCol {
        padding-left: 31px!important;
        padding-right: 31px!important;
        padding-top: 1.5rem!important;
    }
    #timerContainer {
        min-height: 300px;
    }
}

@media (max-width: 992px) {
    body {
        overflow-x: hidden;
    }
    #eventLogo {
        max-width: 48%;
        margin-top: -3%!important;
        margin-bottom: -12px!important;
    }
    #titleBox {
        max-width: 94%;
        margin-top: 0%!important;
    }
    .content-row {
        margin-top: -2%!important;
    }
    #embedChatIframe {
        padding-bottom: 0.3%;
    }
    h1 {
        font-size: 21pt!important;
    }
    h2 {
        font-size: 15pt!important;
    }
    h5 {
        font-size: 11.5pt!important;
    }
    label {
        font-size: 10.5pt!important;
    }
    .form-control {
        font-size: 11.5pt!important;
    }
    #timer div {
        max-height: 85px!important;
        max-width: 85px!important;
        font-size: 30px!important;
        font-weight: 600!important;
    }
    #timer div span {
        font-size: 12px!important;
        margin-top: 6px!important;
    }
}

@media (max-width: 768px) {
    #eventLogo {
        max-width: 57%;
        margin-top: -5%!important;
        margin-bottom: -6px!important;
    }
    #titleBox {
        max-width: 90%;
        margin-bottom: -1%!important;
    }
    .companyLogoSpacer {
        display: none;
    }
    .descriptionContainer {
        padding-left: 28px!important;
        padding-right: 28px!important;
        padding-top: 28px!important;
        padding-bottom: 28px!important;
    }
}

@media (max-width: 576px) {
    .container {
        max-width: 576px;
    }
    #eventLogo {
        max-width: 67%;
        margin-top: -5%!important;
        margin-bottom: -10px!important;
    }
    #titleBox {
        max-width: 100;
        margin-bottom: -4%!important;
    }
    #embedChatIframe {
        padding-bottom: 0.6%;
    }
    .content-row {
        padding-top: 4.5%!important;
    }
    p {
        font-size: 12px!important;
    }
    h1 {
        font-size: 19pt!important;
    }
    h2 {
        font-size: 14pt!important;
    }
    h4 {
        font-size: 14pt!important;
    }
    h5 {
        font-size: 11pt!important;
    }
    label {
        font-size: 10pt!important;
    }
    .form-control {
        font-size: 11pt!important;
    }
    #timerContainer {
        min-height: 200px;
    }
    #timer div {
        padding-top: 8px!important;
        margin-left: 4px!important;
        margin-right: 4px!important;
    }
    #timer div span {
        font-size: 12px!important;
    }
}

@media (max-width: 511px) {
    #embedChatIframe {
        height: 597px!important;
    }
    #eventLogo {
        max-width: 73%;
        margin-top: -5%!important;
        margin-bottom: -10px!important;
    }
}

@media (max-width: 476px) {
    .container {
        max-width: 476px;
    }
    #eventLogo {
        max-width: 80%;
        margin-top: 0%!important;
        margin-bottom: -4px!important;
    }
    #titleBox {
        margin-bottom: -4%!important;
    }
    .descriptionContainer {
        padding-left: 25px!important;
        padding-right: 25px!important;
        padding-top: 25px!important;
        padding-bottom: 25px!important;
    }
    #timerContainer {
        min-height: 118px;
    }
    #timer div {
        margin-top: 4px;
        margin-bottom: 4px;
        max-height: 80px!important;
        max-width: 80px!important;
        font-size: 26px!important;
    }
    #timer div span {
        font-size: 11px!important;
        margin-top: 2px!important;
    }
}

@media (max-width: 445px) {
    #eventLogo {
        max-width: 84%;
    }
    #timerContainer {
        min-height: 240px;
    }
    #timer {
        max-width: 250px;
    }
}

.container {
    max-width: 1620px;
}

html {
    height: 100%;
}

body {
    background-color: #ffffff;
    background-image: url("../images/pinstripe-light.png");
    font-family: "Roboto", sans-serif;
    font-size: 14.7px;
    font-weight: 400;
    line-height: 18px;
    min-height: 100%;
    display: flex;
}

label {
    font-size: 11pt;
}

#eventLogo {
    animation-name: logoAnimation;
    animation-duration: 1.5s;
}

#eventLogo img {
    /*padding-top: 10%;*/
    padding-bottom: 0%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#titleRow {
    text-align: center;
    margin-top: 0%;
    animation-name: logoAnimation;
    animation-duration: 1.5s;
}

.video-window {
    animation-name: videoAnimation;
    animation-duration: 1.5s;
}

.ultra-container {
    background-color: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: .25rem;
    background-clip: border-box;
}

#videoContainer {
    padding: 6px;
}

#chatContainer {
    background-color: rgb(90, 90, 90);
    background-color: rgba(90, 90, 90, 0.1);
    border-radius: 7px;
    animation-name: videoAnimation;
    animation-duration: 1.5s;
    height: 100%;
}

#chatRow {
    animation-name: videoAnimation;
    animation-duration: 1.5s;
}

.chat-window {
    color: #333;
    animation-name: videoAnimation;
    animation-duration: 1.5s;
}

.chat-window iframe {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#chatRow {
    height: 100%;
}

#formContainer {
    animation-name: logoAnimation;
    animation-duration: 0.4s;
}

#askButtonContainer {
    text-align: center!important;
    animation-name: logoAnimation;
    animation-duration: 0.4s;
}

#askButton {
    width: 120px;
}

#questionLabel {
    margin-top: 18px;
}

#questionInput {
    resize: none;
}

.formInputContainer {
    position: relative;
}

#loadingCircle {
    width: 5rem;
    height: 5rem;
}

#loadingText {
    color: rgba(90, 90, 90, 0.7);
    font-size: 18pt;
    padding-top: 18px;
    animation-name: logoAnimation;
    animation-duration: 0.4s;
}

.loading-area {
    display: none;
    margin-left: auto;
    margin-right: auto;
}

.invalid-tooltip {
    background-color: rgba(220, 53, 69, 0.7);
    animation-name: logoAnimation;
    animation-duration: 0.4s;
}

.invalid-tooltip-right {
    right: 0!important;
}

#embedChatIframe {
    padding-top: 6px;
    padding-left: 6px;
    padding-right: 6px;
    position: relative;
    width: 100%;
    height: 594px;
    z-index: 1;
}

#logoutButton {
    width: 150px;
    animation-name: videoAnimation;
    animation-duration: 1.5s;
}

#anonymusCheckContainer {
    margin-top: 10px;
    margin-bottom: 10px;
}

#anonymusCheckLabel {
    margin-top: 3px;
}

.descriptionContainer {
    line-height: 20px;
    padding-top: 2.1rem;
    padding-bottom: 2.1rem;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    animation-name: videoAnimation;
    animation-duration: 1.5s;
    height: 100%;
}

.descriptionContainer strong {
    font-weight: 600!important;
}

#timerContainer {
    padding: 6px;
    display: flex;
}

#timer div {
    background-color: rgba(255, 255, 255, 0.6);
    color: rgba(47, 47, 47, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 5px;
    width: 100px;
    height: 105px;
    font-size: 35px;
    font-weight: 600;
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 6px;
    max-height: 96px;
}

#timer div span {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 500;
}

#loginInfoText {
    margin-top: 21.7px!important;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

h1 {
    color: rgb(17, 17, 17);
    font-size: 26pt;
    display: inline;
    font-weight: 550;
}

h2 {
    color: rgb(60, 60, 60);
    font-size: 19pt;
    display: inline;
}

h4 {
    color: rgb(51, 51, 51);
    font-size: 17pt;
    font-weight: 550;
    display: inline;
}

h5 {
    color: rgb(95, 95, 95);
    font-size: 13.5pt;
    font-weight: 450;
}

p {
    font-size: 14px;
}

.form-control {
    font-size: 0.95rem;
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #a8bcdd;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(168, 188, 221, 0.22);
}

.card {
    background-color: rgba(255, 255, 255, 0.4);
}

@keyframes logoAnimation {
    0% {
        opacity: 0.0;
        -webkit-opacity: 0.0;
    }
    100% {
        opacity: 1.0;
        -webkit-opacity: 1.0;
    }
}

@keyframes videoAnimation {
    0% {
        opacity: 0.0;
        -webkit-opacity: 0.0;
    }
    30% {
        opacity: 0.0;
        -webkit-opacity: 0.0;
    }
    100% {
        opacity: 1.0;
        -webkit-opacity: 1.0;
    }
}

@keyframes chatAnimation {
    0% {
        opacity: 0.0;
        -webkit-opacity: 0.0;
        min-height: 0px;
        height: 0px;
    }
    80% {
        opacity: 0.0;
        -webkit-opacity: 0.0;
        min-height: 0px;
        height: 0px;
    }
    100% {
        opacity: 1.0;
        -webkit-opacity: 1.0;
        min-height: 423px;
        height: 100%;
    }
}