/* Webent - Dee Flex Co., Ltd Japan C 2020 */
/* 
PAGE LAYOUT
*/
body {
      background-color: #E7E7E7;
}

#page-container-outer {
      position: relative;
      top: 0;
      left: 0;
      /*+border-radius: 5px;*/
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -khtml-border-radius: 5px;
      border-radius: 5px;
      background-color: #FFFFFF;
      margin: 25px auto 0px;
}

.live-event #page-container-outer {
      width: 100%;
      margin: 0;
      height: 100%;
      -moz-border-radius: 0;
      -webkit-border-radius: 0;
      -khtml-border-radius: 0;
      border-radius: 0;
      border: none;
      padding: 0;
}

.sign-in #page-container-outer, .sign-out #page-container-outer, .home-page #page-container-outer {
      width: 90%;
}

.user-event-list #page-container-outer {
      width: 95%;
}

#page-container-inner {
      margin: 6px 6px 10px 6px;
      position: relative;
      top: 0;
      height: auto;
      width: auto;
      left: 0;
      /*+border-radius: 5px;*/
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -khtml-border-radius: 5px;
      border-radius: 5px;
}

#pagecontent {
      position: relative;
      top: 0;
      left: 0;
}

#home_content {
      position: relative;
      top: 0;
      left: 0;
}

.clearfix.empty-line {
      position: relative;
      height: 1px;
      width: 100%;
      clear: both;
}

.clearfix.zero-height {
      position: relative;
      height: 0px;
      width: 100%;
}

.page-section-container.view {
      border: 1px solid #979797;
      max-width: 920px;
      margin: 10px auto 40px;
      /*+border-radius: 7px;*/
      -moz-border-radius: 7px;
      -webkit-border-radius: 7px;
      -khtml-border-radius: 7px;
      border-radius: 7px;
      padding-top: 14px;
      padding-bottom: 14px;
      clear: both;
}

.page-section-container.narrow {
      width: 722px;
}

.page-box {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      margin-bottom: 16px;
}

/*Forms*/
form.form-default-styling {
      width: 640px;
      margin: 10px auto 40px;
      border: 1px solid #979797;
      /*+border-radius: 6px;*/
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      -khtml-border-radius: 6px;
      border-radius: 6px;
      padding-bottom: 12px;
      padding-top: 12px;
}

form.form-default-styling.list {
      width: auto;
}

@media screen and (max-width: 750px) {
      form.form-default-styling {
            width: 90%;
      }
}

/*FOOTER*/
#page-container-outer .page-footer {
      margin: 0px auto 0px;
      background-color: #558ED7;
      position: relative;
      height: 37px;
      text-align: center;
}

/*Site Closed*/
.site-closed #page-container-outer {
      /*background-color: #3730F2;*/
      width: 95%;
}

.site-closed .notice {
      /*background-color: #DA8C98;*/
      margin-left: 100px;
      margin-right: 100px;
      margin-top: 50px;
      border: 1px solid #1F88D3;
      -moz-border-radius: 7px;
      -webkit-border-radius: 7px;
      -khtml-border-radius: 7px;
      border-radius: 7px;
      height: 160px;
      padding-top: 55px;
}

.site-closed form.page-footer-menu-button {
      margin-top: 29px;
      float: right;
      margin-bottom: 10px;
}

/* TITLES */
.section-page-title {
      display: block;
      text-align: center;
      font-size: 25px;
      height: 60px;
      padding-top: 25px;
}

/* LABELS */
label {
      float: left;
}

div.record-input label {
      position: relative;
      line-height: 34px;
      font-size: 14px;
      color: #007FDA;
      padding: 2px 0;
      left: 0px;
      top: 2px;
      width: 200px;
      text-align: right;
      /*background-color: #5423E7;*/
}

div.form-help-short-desc label {
      text-align: left;
      color: #9E9E9E;
}

dl.short-help {
      margin-top: 0;
      margin-left: 10px;
      margin-right: 10px;
      font-size: 11px;
      line-height: 16px;
      color: #9E9E9E;
      text-align: left;
}

dl.short-help dt {
      font-weight: bold;
}

dl.short-help dd {
      margin-left: 12px;
}

div.radio-group-container label {
      position: relative;
      font-size: 13px;
      color: #6C6C6C;
      vertical-align: top;
      top: 0px;
      padding: 0px;
      position: relative;
      left: 0px;
      top: 0px;
      margin: 0;
      line-height: 24px;
      float: left;
      text-align: left;
}

/* INPUTS */
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], select, input[type="color"] {
      font: 12px / 100% Verdana, sans-serif;
      color: #222;
      padding-left: 10px;
      /*+border-radius: 4px;*/
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      -khtml-border-radius: 4px;
      border-radius: 4px;
      background-color: #DAEFFF;
      border: 1px solid #9AD2FF;
      line-height: 16px;
      height: 28px;
      font-size: 14px;
}

div.record-input input, div.record-input select, div.record-input span {
      float: left;
      width: 240px;
      margin-top: 6px;
      margin-left: 14px;
      margin-bottom: 6px;
}

.record-input textarea {
      font: 12px / 100% Verdana, sans-serif;
      color: #222;
      float: left;
      padding-left: 10px;
      /*+border-radius: 4px;*/
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      -khtml-border-radius: 4px;
      border-radius: 4px;
      background-color: #DAEFFF;
      border: 1px solid #9AD2FF;
      line-height: 16px;
      margin-top: 6px;
      width: 400px;
      height: 100px;
      font-size: 14px;
      margin-left: 14px;
      padding-top: 10px;
      padding: 8px;
}

div.record-input {
      clear: left;
      position: relative;
      margin-left: 8px;
      margin-right: 8px;
}

div.radio-group-container {
      position: relative;
      top: 0;
      left: 0;
      width: 240px;
      float: left;
      margin-top: 16px;
      padding-left: 8px;
      border-left: 1px solid #D2D2D2;
      margin-left: 14px;
}

div.double-password-input {
      position: relative;
      top: 0;
      left: 0;
      width: 240px;
      float: left;
      border-left: 1px solid #D2D2D2;
      margin-left: 8px;
      padding-left: 0px;
}

div.record-input .double-password-input input {
      margin-left: 5px;
}

div.record-input input[type="color"] {
      width: 100px;
      padding: 0;
}

/*Radio Button*/
div.radio-group-container input[type="radio"] {
      float: left;
      width: 13px;
      clear: left;
      height: 22px;
      margin: 0 8px 0 0;
      padding-right: 0;
}

/*NON-INPUT*/
div.record-input span {
      position: relative;
      font-size: 14px;
      top: 6px;
      text-align: left;
      color: #6C6C6C;
      line-height: 22px;
      margin-top: 0;
      margin-bottom: 0;
      padding-bottom: 0;
      line-height: 32px;
      /*background-color: #2323E6;*/
}

div.record-input span.date {
      /*background-color: #E52373;*/
      display: inline;
      width: auto;
      margin: 0;
      padding: 0;
      line-height: 18px;
      top: 0;
}

div.record-input span.time {
      /*background-color: #2323E6;*/
      display: inline;
      width: auto;
      margin: 0;
      padding: 0 0 0 8px;
      font-weight: bold;
      line-height: 18px;
      top: 0;
}

div.record-input span.microsecond {
      /*background-color: #2323E6;*/
      display: inline;
      width: auto;
      margin: 0;
      padding: 0 0 0 8px;
      /*font-weight: bold;*/
      line-height: 18px;
      top: 0;
}

.view span.record-value {
      line-height: 18px;
      top: 12px;
      margin-bottom: 14px;
}

/* BUTTONS */
.item-list-table a.button-style-link {
      display: block;
      margin: 8px 0 2px;
      padding: 0 6px;
      font-size: 1.1em;
      line-height: 1.3em;
      /*+border-radius: 4px;*/
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      -khtml-border-radius: 4px;
      border-radius: 4px;
      min-width: 46px;
      text-align: center;
}

div.button-style-link {
      display: inline-block;
      position: relative;
      z-index: 1;
}

.button-style-link input[type="submit"], a.button-style-link, div.button-style-link a {
      margin: 4px;
      padding: 5px;
      border: 1px solid #4083DD;
      /*+border-radius: 5px;*/
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -khtml-border-radius: 5px;
      border-radius: 5px;
      font-size: 0.9em;
      line-height: 1.3em;
      background-color: #FFFFFF;
      color: #4083DD;
      display: inline-block;
      font-weight: normal;
}

.button-style-link input[type="submit"]:hover, a.button-style-link:hover, div.button-style-link a:hover {
      border: 1px solid #4083DD;
      background-color: #4083DD;
      color: #FFFFFF;
}

input[type="submit"] {
      cursor: pointer;
}

.form-default-styling .form-submit-buttons {
      width: 100%;
}

form.button-style-link {
      display: inline;
}

.form-submit-buttons {
      margin-top: 25px;
}

.button-input.thumb-image-menu input {
      font-size: 10px;
      padding: 2px;
      float: left;
}

.button-input.show input {
      color: #1CA900;
      border: 1px solid #1CA900;
}

.button-input.hide input {
      border: 1px solid #EB4F1A;
      color: #EB4F1A;
}

.button-input.allow input {
      color: #1CA900;
      border: 1px solid #1CA900;
}

.button-input.dissallow input {
      border: 1px solid #EB4F1A;
      color: #EB4F1A;
}

.keep-left.button-input {
      float: left;
}

.enter-site-menu-button.button-style-link input {
      margin-top: 32px;
      margin-bottom: 43px;
      font-size: 27px;
      padding: 13px;
}

div.button-style-link.page-footer-menu-button-right {
      float: right;
}

/*
div.button-style-link.page-footer-menu-button {
      
}
*/

div#lang_switcher form {
      overflow: hidden;
      display: block;
}

div#lang_switcher {
      float: right;
      overflow: hidden;
      height: 38px;
      position: relative;
      z-index: 10;
      margin-right: 16px;
      margin-left: 10px;
}

div#default-back-button {
      float: left;
      margin-left: 16px;
      margin-right: 10px;
}

.sign-in div.section-page-notice a {
      /*width: 55px;*/
      height: 28px;
      font-size: 1em;
      line-height: 1em;
      text-align: center;
      font-weight: normal;
      margin-top: 0;
      /*(*+placement: -2px 2px;*)
      position: relative;
      left: -2px;
      top: 2px;*/
      background-color: #1DA901;
      padding-left: 13px;
      padding-right: 13px;
}

/*Error Indicators*/
div.field-error {
      border-right: 7px solid #7596FF;
      background-color: #D3DEFF;
      /*+border-radius: 4px;*/
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      -khtml-border-radius: 4px;
      border-radius: 4px;
}

input.field-error {
      /*+border-radius: 6px 5px 6px 6px;*/
      -moz-border-radius: 6px 5px 6px 6px;
      -webkit-border-radius: 6px 5px 6px 6px;
      -khtml-border-radius: 6px 5px 6px 6px;
      border-radius: 6px 5px 6px 6px;
      border-left: 8px solid #FE0101;
}

form div.error-message {
      font-size: 17px;
      color: #515151;
      /*border-bottom: 3px solid #D9015A;*/
      border-bottom: 3px solid #FE0001;
      margin-left: 30px;
      margin-bottom: 29px;
      /*+border-radius: 11px;*/
      -moz-border-radius: 11px;
      -webkit-border-radius: 11px;
      -khtml-border-radius: 11px;
      border-radius: 11px;
      padding-top: 13px;
      font-weight: bold;
      margin-right: 30px;
      padding-bottom: 5px;
}

.sign-in div.section-page-notice.access-error, .sign-in div.section-page-notice.request-error {
      color: #FF2E2E;
      background-color: rgba(255, 46, 46, 0.168);
      padding: 9px;
      /*+border-radius: 8px;*/
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      -khtml-border-radius: 8px;
      border-radius: 8px;
      margin-bottom: 10px;
}

.sign-in div.section-page-notice.request-success {
      color: #1A9A00;
      background-color: rgba(46, 255, 46, 0.168);
      padding: 9px;
      /*+border-radius: 8px;*/
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      -khtml-border-radius: 8px;
      border-radius: 8px;
      margin-bottom: 10px;
}

/*Pager*/
div.record-pager {
      margin-top: 12px;
      text-align: right;
      border-top: 1px solid #BBBBBB;
      padding-top: 5px;
      margin-left: auto;
      margin-right: auto;
      width: 892px;
      /*+border-radius: 7px;*/
      -moz-border-radius: 7px;
      -webkit-border-radius: 7px;
      -khtml-border-radius: 7px;
      border-radius: 7px;
      padding-right: 9px;
      padding-left: 9px;
}

div.record-pager div.active-page a, div.record-pager div.active-page input {
      background-color: #3F77C0;
      color: #FFFFFF;
      border: 2px solid #3F77C0;
}

input.update-but {
      border: 2px solid #1CA900;
      margin: 2px;
      padding: 5px;
      font-size: 12px;
      font-weight: normal;
      /*+border-radius: 5px;*/
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -khtml-border-radius: 5px;
      border-radius: 5px;
      background-color: #FFFFFF;
      color: #1CA900;
}

input.cancel-but {
      border: 2px solid #D9005A;
      margin: 2px;
      padding: 5px;
      font-weight: normal;
      font-size: 12px;
      /*+border-radius: 5px;*/
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -khtml-border-radius: 5px;
      border-radius: 5px;
      background-color: #FFFFFF;
      color: #D9005A;
}

input.upload-but {
      border: 2px solid #1CA900;
      margin: 2px;
      padding: 5px;
      font-weight: normal;
      font-size: 12px;
      /*+border-radius: 5px;*/
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -khtml-border-radius: 5px;
      border-radius: 5px;
      background-color: #FFFFFF;
      color: #1CA900;
}

input.create-but {
      border: 2px solid #1CA900;
      margin: 2px;
      padding: 5px;
      font-size: 12px;
      font-weight: normal;
      /*+border-radius: 5px;*/
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -khtml-border-radius: 5px;
      border-radius: 5px;
      background-color: #FFFFFF;
      color: #1CA900;
}



/* TABLE FORMAT */


/* moved from photobase.css */
table.item-list-table {
      margin: 0 auto;
}


table.item-list-table.edit td {
      padding-top: 5px;
}

table.item-list-table tr {
      border-bottom: 1px solid #E7E7E7;
}

.item-list-table {
      margin: 0 auto;
}

.item-list-table th {
      text-align: left;
      padding-left: 5px;
      padding-right: 5px;
      font-weight: normal;
      background-color: #EBF3FF;
      font-size: 12px;
      line-height: 22px;
      border-bottom: 1px solid #C1C1C1;
}

.item-list-table td {
      padding-right: 5px;
      padding-left: 5px;
      font-size: 13px;
      text-align: left;
      color: #6A6A6A;
      line-height: 24px;
}

.item-list-table tr td {
      height: 24px;
}

.item-overview-table {
      margin: 0 auto;
}

.item-overview-table th {
      color: #007FDA;
      font-weight: normal;
      text-align: left;
      padding-right: 18px;
      line-height: 23px;
      font-size: 12px;
}

.item-overview-table td {
      font-size: 14px;
      line-height: 23px;
      color: #909090;
}

/*Special fields in tables*/
td input.agenda_duration {
      width: 56px;
}

td input.agenda_start_time_st {
      width: 108px;
      padding-left: 8px;
      /*padding-right: 8px;*/
}

td input.agenda_name {
      width: 300px;
}

/*SignUp*/
.sign-in .section-page-title {
      margin-top: 50px;
      padding-top: 0;
      height: auto;
}

.sign-in div.section-page-desc {
      margin-top: 20px;
      padding-bottom: 6px;
      text-align: left;
      margin-left: 15px;
      margin-right: 15px;
}

.sign-in form.form-default-styling {
      padding-bottom: 20px;
      padding-top: 20px;
      margin-top: 22px;
}

.sign-in .form-submit-buttons {
      margin-top: 17px;
}

@media screen and (max-width: 749px) {
      .sign-in div.section-page-desc, .sign-in div.section-page-notice {
            width: 90%;
            margin-right: auto;
            margin-left: auto;
            text-align: left;
      }
}

@media screen and (min-width: 750px) {
      /*
      form.form-default-styling {
            width: 90%;
      }
      */
      
      .sign-in div.section-page-desc, .sign-in div.section-page-notice {
            max-width: 646px;
            margin-right: auto;
            margin-left: auto;
            text-align: left;
      }
      
      .sign-in.register .page-section-container.view {
            max-width: 646px;
            margin-bottom: 20px;
      }
}

.sign-in span.signup-welcome-msg-big {
      font-size: 1.2em;
      line-height: 1.8em;
      color: #4083DD;
      /*font-weight: bold;*/
}

.sign-in ul {
      width: 90%;
      margin: 10px auto;
}

.sign-in li {
      color: #898989;
      margin-top: 10px;
}

.sign-in li span.point-title {
      color: #4083DD;
}

.sign-in li span.input-format {
      color: #D9015B;
}

/*Account Reset*/
.page-section-container.account-reset {
      border: 1px solid #CCC;
      margin: 20px;
      padding-bottom: 14px;
}

.page-section-container.account-reset div.record-input label {
      padding: 2px 0;
      width: 65px;
}

.page-section-container.account-reset div.welcome-enter div.button-input.button-style-link a.button-style-link {
      background-color: #FFFFFF;
      color: #1CA900;
      border: 2px solid #1CA900;
      font-size: 1em;
      margin-top: 22px;
}

/** CUSTOMER EVENT SITE PAGES **/
.event-status.button {
      position: relative;
      display: block;
      margin: 8px 0 2px;
      padding: 0 6px;
      font-size: 1.1em;
      line-height: 1.3em;
      /*+border-radius: 4px;*/
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      -khtml-border-radius: 4px;
      border-radius: 4px;
      min-width: 46px;
      text-align: center;
      border: 1px solid #E0E0E0;
      color: #FFFFFF;
      background-color: #E0E0E0;
}

.event-page-defaults div.button-style-link a, .event-page-defaults .button-style-link input[type="submit"], .event-page-defaults a.button-style-link {
      border: 0px solid #ECF3FF;
      background-color: #4083DD;
      color: #FFFFFF;
      font-weight: bold;
      padding-top: 7px;
      padding-bottom: 6px;
}

.event-status.button.STATUS_LIVE {
      background-color: #19D732;
      border: 1px solid #19D732;
      color: #000000;
}

.user-event-list table {
      margin-top: 20px;
}

.user-event-list th {
      background-color: #FFFFFF;
}

.user-event-list tr:not(:first-child) {
      height: 77px;
}

.user-event-list .item-list-table th {
      font-weight: normal;
      /*background-color: #8E8E8E;*/
      font-size: 16px;
      line-height: 26px;
      border-bottom: 1px solid #C1C1C1;
      color: #7A7A7A;
}

.user-event-list table td .date {
      font-weight: bold;
      color: #3F82DD;
      line-height: 13px;
      font-size: 13px;
}

.user-event-list table td .time {
      font-weight: normal;
      display: block;
      font-size: 17px;
      line-height: 17px;
}

.user-event-list table > tbody > tr > td:nth-child(1) {
      font-size: 16px;
      font-weight: normal;
}

.user-event-list table > tbody > tr > th:nth-child(2) {
      min-width: 85px;
}

.user-event-list table td a.button-style-link {
      /*+box-shadow: 2px 3px 10px #B1B1B1;*/
      -moz-box-shadow: 2px 3px 10px #B1B1B1;
      -webkit-box-shadow: 2px 3px 10px #B1B1B1;
      box-shadow: 2px 3px 10px #B1B1B1;
}

.user-event-list .button-input.button-style-link a.button-style-link {
      background-color: #737373;
      /*+box-shadow: 2px 2px 10px #8E8E8E;*/
      -moz-box-shadow: 2px 2px 10px #8E8E8E;
      -webkit-box-shadow: 2px 2px 10px #8E8E8E;
      box-shadow: 2px 2px 10px #8E8E8E;
}

.user-event-list .page-footer-menu-button.button-style-link a {
      background-color: #737373;
      /*+box-shadow: 2px 2px 10px #8E8E8E;*/
      -moz-box-shadow: 2px 2px 10px #8E8E8E;
      -webkit-box-shadow: 2px 2px 10px #8E8E8E;
      box-shadow: 2px 2px 10px #8E8E8E;
}

.user-event-list #lang_switcher .button-style-link input {
      background-color: #737373;
      /*+box-shadow: 2px 2px 10px #8E8E8E;*/
      -moz-box-shadow: 2px 2px 10px #8E8E8E;
      -webkit-box-shadow: 2px 2px 10px #8E8E8E;
      box-shadow: 2px 2px 10px #8E8E8E;
}

.user-event-list div#lang_switcher {
      overflow: visible;
}

.user-event-list div#lang_switcher form {
      overflow: visible;
}

/**  EVENT PAGE  **/
/*Remove Scroll Bars*/
.live-event .agenda-section-container div.agenda-section-content {
      -ms-overflow-style: none;
      scrollbar-width:none;
}

.live-event .agenda-section-container div.agenda-section-content::-webkit-scrollbar {
      display: none;
}

body.live-event {
      -ms-overflow-style: none;
      scrollbar-width:none;
}

body.live-event::-webkit-scrollbar {
      display: none;
}

/*Add Scroll Bars*/
/*.live-event #program-comments-content
{
	-ms-overflow-style: auto;
	scrollbar-width:12px;
}*/
/*.live-event #program-comments-content::-webkit-scrollbar
{
	display: block;
	width: 12px;
}*/
/** BUTTONS / COLOUR CO-ORD ITEMS - Extracted from below rules **/
.event-page-defaults .signed-in-user-name {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 202;
      float: right;
      margin-right: 16px;
      margin-top: 13px;
      padding-right: 11px;
      padding-left: 9px;
      /*+border-radius: 3px;*/
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      -khtml-border-radius: 3px;
      border-radius: 3px;
      background-color: #E0E0E0;
}

.welcome-box {
      color: black;
      border: 1px solid #979797;
      height: 58px;
}

.welcome-box .welcome-desc {
      color: #989898;
}

.welcome-box .welcome-enter a.button-style-link {
      color: #FFFFFF;
      background-color: #4083DD;
}

/** INFO  **/
.info-box {
      position: relative;
      top: 0;
      color: black;
      border: 1px solid #979797;
      height: auto;
      padding: 50px 16px 24px;
      margin: 75px auto 50px;
      text-align: center;
      border-radius: 7px;
}

.info-box .title {
      text-align: left;
      margin-left: 18px;
      margin-right: 18px;
}

.info-box .description {
      color: #989898;
      text-align: left;
}

.info-box .option-link a.button-style-link {
      color: #FFFFFF;
      background-color: #4083DD;
}

/** SINGIN  **/
.sign-in .login-box {
      color: black;
      border: 1px solid #CCC;
}

.sign-in .login-box .login-title {
      color: #4083DD;
}

.sign-in .login-box .login-message {
      color: #949494;
}

.sign-in .login-box .login-message-error {
      color: #EB5271;
}

.login-box .record-input label {
      width: 106px;
      margin-left: 12px;
      margin-right: 0px;
      padding-right: 9px;
}

/* General */
@media screen and (min-width: 660px) {
      .page-section-container.view {
            width: 90%;
      }
      
      /*
      div.record-input {
            background-color: #B523E5;
      }
      */
      
      /*Live Event*/
      .live-event .signed-in-user-name {
            grid-row-start: user-name-start;
            grid-row-end: user-name-end;
            grid-column-start: user-name-start;
            grid-column-end: user-name-end;
            margin-right: 0px;
      }
      
      .live-event #page-container-inner {
            position: relative;
            height: 100%;
            top: 0;
            left: 0;
            width: 100%;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: [left-gutter footer-start] 2% [header-start video-start top-comment-start user-name-start] 3fr 2fr [header-end video-end top-comment-end user-name-end] 2% [agenda-start comment-start vote-start footer-end] minmax(300px, 2fr) [user-name-end agenda-end comment-end vote-end right-gutter];
            grid-template-rows: [header-start user-name-start agenda-start] minmax(60px, 100px) [header-end user-name-end video-start comment-start vote-start agenda-minimise-end] max-content [video-end top-comment-start] 2fr [top-comment-end agenda-end footer-start] 42px [comment-end vote-end footer-end];
            /*+border-radius: 5px;*/
            -moz-border-radius: 0px;
            -webkit-border-radius: 0px;
            -khtml-border-radius: 0px;
            border-radius: 0px;
      }
      
      /** LOG IN / OUT **/
      .home-page #page-container-outer {
            /*height: 469px;*/
            margin-top: 80px;
      }
      
      /** WELCOME  **/
      .welcome-box {
            position: relative;
            top: 0;
            /* Problem - this is being enforced for some reason */
            height: 320px;
            width: 460px;
            border-radius: 7px;
            padding: 50px 10px 10px 16px;
            margin: 75px auto 50px;
            text-align: center;
      }
      
      .sign-in.register .welcome-box {
            height: 130px;
            padding: 0px;
            margin: 0px auto 50px;
            width: 90%;
            max-width: 646px;
      }
      
      .welcome-box .welcome-title {
            font-size: 42px;
            font-weight: lighter;
            text-align: left;
            margin-left: 18px;
      }
      
      .welcome-box .welcome-desc {
            font-size: 24px;
            font-weight: lighter;
            margin-left: 18px;
            text-align: left;
            line-height: 68px;
      }
      
      .welcome-box .welcome-enter {
            margin-top: 37px;
            margin-bottom: 59px;
      }
      
      .welcome-box .welcome-enter a.button-style-link {
            font-weight: bold;
            font-size: 36px;
            line-height: 50px;
            padding-left: 18px;
            padding-right: 18px;
            padding-top: 0px;
            padding-bottom: 6px;
            height: 50px;
      }
      
      .welcome-box hr {
            margin-top: 0px;
            margin-bottom: 8px;
      }
      
      /** INFO  **/
      .info-box {
            width: 80%;
      }
      
      .info-box .title {
            font-size: 42px;
            line-height: 42px;
            font-weight: lighter;
            margin-bottom: 22px;
      }
      
      .info-box .description {
            font-size: 22px;
            font-weight: lighter;
            margin-left: 18px;
            line-height: 32px;
      }
      
      .info-box .option-link {
            margin-top: 37px;
            margin-bottom: 59px;
      }
      
      .info-box .option-link a.button-style-link {
            font-weight: bold;
            font-size: 25px;
            line-height: 40px;
            padding-left: 13px;
            padding-right: 13px;
            padding-top: 0px;
            padding-bottom: 0px;
            height: 39px;
      }
      
      .info-box hr {
            margin-top: 0px;
            margin-bottom: 8px;
      }
      
      /** SIGN IN **/
      .sign-in #page-container-outer form.lang-switch-form {
            float: right;
            margin-bottom: 11px;
      }
      
      .sign-in .login-box {
            position: relative;
            width: 460px;
            border-radius: 7px;
            padding: 15px 10px 10px 16px;
            margin: 75px auto 50px;
      }
      
      .sign-in .login-box .login-title {
            font-size: 2rem;
            font-weight: lighter;
            text-align: left;
            margin-top: 18px;
            margin-bottom: 20px;
      }
      
      .sign-in .login-box .login-message {
            font-weight: lighter;
            text-align: left;
            margin-bottom: 12px;
            font-size: 20px;
      }
      
      .sign-in .login-box .login-message-error {
            font-weight: bold;
            text-align: left;
            margin-bottom: 14px;
            font-size: 20px;
      }
      
      .sign-in .login-box .login-message-error-desc {
            text-align: left;
            font-size: 1em;
            line-height: 1.2em;
            color: #606060;
      }
      
      .sign-in.register .record-input.user_email {
            width: 474px;
            margin: 0 auto;
      }
      
      .login-box .record-input {
            width: 410px;
      }
      
      .login-box .record-input input {
            float: left;
            width: 210px;
            margin-top: 6px;
            margin-left: 0px;
            margin-bottom: 6px;
      }
      
      .login-box .record-input label {
            width: 106px;
      }
      
      .login-box #login-but {
            float: left;
            clear: both;
            margin-top: 16px;
            position: relative;
            left: 123px;
            top: -3px;
            margin-left: 2px;
      }
      
      .login-box a.reset-password {
            clear: both;
            float: left;
            left: 125px;
            position: relative;
            color: #3F82DD;
            margin-top: 20px;
            margin-bottom: 6px;
      }
      
      /**  EVENT PAGE  **/
      .live-event .header-section {
            grid-row-start: header-start;
            grid-row-end: header-end;
            grid-column-start: header-start;
            grid-column-end: header-end;
            position: relative;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            margin-top: 0;
            margin-left: 0;
            margin-right: 0;
      }
      
      .live-event .header-section .header-title {
            float: left;
            position: relative;
            left: 12px;
            top: 40px;
            font-size: 44px;
            font-weight: lighter;
      }
      
      .live-event .header-section .header-bg {
            position: relative;
            height: 100%;
            width: 100%;
      }
      
      /*  - - - - -   AGENDA   - - - - -  */
      .live-event .agenda-section-container {
            grid-row-start: agenda-start;
            grid-row-end: agenda-end;
            grid-column-start: agenda-start;
            grid-column-end: agenda-end;
            position: relative;
            right: 0;
            top: 0;
            font-size: 10pt;
            line-height: 13pt;
            width: 100%;
            margin-top: 0;
            overflow: hidden;
            height: 100%;
            cursor: pointer;
            z-index: 110;
            border-bottom-left-radius: 6px;
      }
      
      .live-event .agenda-section-container.minimised {
            height: 96%;
            grid-row-end: agenda-minimise-end;
      }
      
      .live-event .agenda-section-background {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0.85;
      }
      
      .live-event .agenda-section-container div.agenda-section-title {
            position: absolute;
            height: 25px;
            right: 0;
            margin-top: 8px;
            text-align: right;
            font-weight: bold;
            font-size: 16px;
            padding-right: 16px;
      }
      
      .live-event .agenda-section-container div.agenda-section-content {
            position: relative;
            width: 100%;
            left: 0;
            /*top: 26%;*/
            top: 25px;
            height: 70%;
            padding-left: 4px;
            margin: 0 auto;
            width: 90%;
            padding-bottom: 28px;
            overflow: auto;
            scroll-snap-type: y mandatory;
      }
      
      .live-event .agenda-section-content div.agenda-item {
            position: relative;
            top: 0px;
            left: 0px;
            width: 100%;
            margin-bottom: 2px;
            line-height: 14pt;
            font-size: 11.6pt;
            scroll-snap-align: center;
      }
      
      .live-event .agenda-item .agenda-time {
            position: relative;
            float: left;
            width: 18%;
            text-align: right;
            overflow: hidden;
      }
      
      .live-event .agenda-item .agenda-name {
            position: relative;
            float: right;
            text-align: left;
            width: 79%;
            margin-bottom: 0px;
      }
      
      .live-event .agenda-item .agenda-comment {
            position: relative;
            float: right;
            font-size: 9pt;
            text-align: left;
            width: 79%;
            line-height: 14pt;
      }
      
      .live-event div.agenda-section-content div.agenda-item.now {
            font-size: 12pt;
            line-height: 28px;
            font-weight: bold;
            height: 26px;
      }
      
      /*  - - - - -   Video   - - - - -  */
      .live-event .video-section-container {
            grid-row-start: video-start;
            grid-row-end: video-end;
            grid-column-start: video-start;
            grid-column-end: video-end;
            position: relative;
            left: 0;
            top: 0;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            -khtml-border-radius: 6px;
            border-radius: 6px;
      }
      
      .live-event .video-section-container .video-section-content {
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 100;
      }
      
      /**  - - - - - TOP COMMENT - - - - -  **/
      .live-event .top-comment-container {
            grid-row-start: top-comment-start;
            grid-row-end: top-comment-end;
            grid-column-start: top-comment-start;
            grid-column-end: top-comment-end;
      }
      
      .live-event .top-comment {
            z-index: 200;
            position: relative;
            left: 0;
            top: 0;
            min-height: auto;
            width: 100%;
            margin-top: 20px;
            /*+border-radius: 4px;*/
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            -khtml-border-radius: 4px;
            border-radius: 4px;
            padding-bottom: 9px;
      }
      
      .live-event .top-comment-container.hide {
            display: none;
      }
      
      .live-event .top-comment .top-comment-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.8;
            z-index: 201;
            /*+border-radius: 5px;*/
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            -khtml-border-radius: 5px;
            border-radius: 5px;
      }
      
      .live-event .top-comment-title {
            position: relative;
            left: 0;
            top: 0;
            z-index: 202;
            font-size: 23px;
            font-weight: bold;
            text-align: left;
            margin: 7px 7px 7px 0px;
            width: 100%;
            padding: 8px 4px 4px 8px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
      }
      
      .live-event .top-comment .top-comment-content {
            position: relative;
            left: 0;
            top: 0;
            width: 100%;
            z-index: 202;
            padding-left: 10px;
            padding-top: 3px;
            font-size: 19px;
            line-height: 26px;
            text-align: justify;
            padding-right: 10px;
      }
      
      /*  - - - - -   Comment   - - - - -  */
      .live-event .comment-section-container {
            grid-row-start: comment-start;
            grid-row-end: comment-end;
            grid-column-start: comment-start;
            grid-column-end: comment-end;
            position: relative;
            top: 0px;
            left: 0px;
            z-index: 100;
            margin: 0;
            padding: 0;
      }
      
      .live-event .comment-section-container #program-comments-background {
            position: absolute;
            left: 0;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 5;
            margin-top: 70px;
            padding-top: 0;
      }
      
      .live-event .comment-section-container .comment-section-title {
            position: relative;
            width: 100%;
            height: 50px;
            text-align: left;
            font-weight: bold;
            font-size: 23px;
            margin: 0;
            z-index: 10;
            padding-top: 10px;
            padding-left: 10px;
      }
      
      .live-event .comment-section-container .comment-section-title .program-comment-but {
            position: relative;
            top: 2px;
            right: 10px;
            float: right;
            font-size: 13px;
            height: 28px;
            line-height: 25px;
            text-align: center;
            font-weight: bold;
            /*+border-radius: 5px;*/
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            -khtml-border-radius: 5px;
            border-radius: 5px;
            cursor: pointer;
            padding-left: 10px;
            padding-right: 10px;
      }
      
      .live-event .comment-section-container .program-comments-content-box {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 88%;
      }
      
      .live-event .comment-section-container #program-comments-content {
            position: relative;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            padding-left: 4px;
            padding-right: 4px;
            z-index: 10;
            overflow: auto;
      }
      
      .live-event #program-comments-content .comment-item {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            margin-bottom: 14px;
      }
      
      .live-event #program-comments-content .comment-item .comment-name {
            position: relative;
            float: left;
            top: 0px;
            font-size: 10pt;
            text-align: left;
            font-weight: bold;
            overflow: hidden;
            line-height: 14pt;
            padding-bottom: 4px;
            margin-right: 10px;
            margin-left: 10px;
      }
      
      .live-event #program-comments-content .comment-item .comment-date {
            position: relative;
            float: left;
            left: 0px;
            top: 0px;
            font-size: 9pt;
            width: 41px;
            text-align: left;
            padding-left: 0;
            line-height: 14pt;
            padding-bottom: 4px;
      }
      
      .live-event #program-comments-content .comment-item .comment-text {
            position: relative;
            float: left;
            left: 0px;
            top: 0px;
            font-size: 10pt;
            width: 100%;
            text-align: left;
            clear: both;
            line-height: 16pt;
            padding: 10px 10px 10px 15px;
      }
      
      .live-event .add-comment-container-outer.hide-comment-input {
            display: none;
      }
      
      /**  Comment Add Box **/
      .live-event #add-comment-container-outer {
            position: absolute;
            top: 0px;
            height: 100%;
            width: 100%;
            left: 0px;
            z-index: 100;
      }
      
      .live-event #add-comment-container-outer .add-comment-container-inner {
            position: relative;
            top: 0px;
            left: 0px;
            width: 97%;
            height: 238px;
            z-index: 100;
            /*+border-radius: 6px;*/
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            -khtml-border-radius: 6px;
            border-radius: 6px;
            overflow: hidden;
      }
      
      .live-event .add-comment-container-inner textarea.comment-input {
            position: relative;
            top: 8px;
            left: 0px;
            height: 168px;
            width: 96%;
            /*+border-radius: 5px;*/
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            -khtml-border-radius: 5px;
            border-radius: 5px;
            z-index: 300;
            font-size: 12pt;
            padding: 10px;
      }
      
      .live-event .add-comment-container-inner .program-comment-send-buttons {
            position: relative;
            left: 0;
            top: 0;
            height: 56px;
            z-index: 300;
            text-align: center;
            margin: 10px auto 0px;
            width: 258px;
            padding-left: 6px;
      }
      
      .live-event .add-comment-container-inner .program-comment-send-buttons div {
            position: relative;
            float: left;
            left: 0;
            top: 0;
            font-size: 1.2em;
            width: 117px;
            height: 43px;
            line-height: 46px;
            cursor: pointer;
            /*+border-radius: 8px;*/
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
            -khtml-border-radius: 8px;
            border-radius: 8px;
      }
      
      .live-event .add-comment-container-inner #program-comment-cancel-but {
            margin-left: 10px;
      }
      
      .live-event div.blocked {
            display: none;
      }
      
      /*  - - - - -   VOTE   - - - - -  */
      #program-vote-guest-container {
            grid-row-start: vote-start;
            grid-row-end: vote-end;
            grid-column-start: vote-start;
            grid-column-end: vote-end;
            position: relative;
            z-index: 400;
            width: 100%;
            overflow: auto;
            padding-bottom: 28px;
            /*+border-radius: 9px 0px 0px 9px;*/
            -moz-border-radius: 9px 0px 0px 9px;
            -webkit-border-radius: 9px 0px 0px 9px;
            -khtml-border-radius: 9px 0px 0px 9px;
            border-radius: 9px 0px 0px 9px;
      }
      
      #program-vote-guest-container.hide {
            display: none;
      }
      
      #program-vote-guest-container .vote-section-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 401;
      }
      
      #program-vote-guest-container .vote-section-foreground {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
      }
      
      #program-vote-guest-container .vote-section-foreground .vote-section-title {
            position: relative;
            width: 200px;
            z-index: 402;
            font-size: 24px;
            margin: 18px auto 9px;
            font-weight: bold;
      }
      
      #program-vote-guest-content {
            position: relative;
            z-index: 402;
            width: 95%;
            /*+border-radius: 5px;*/
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            -khtml-border-radius: 5px;
            border-radius: 5px;
            padding: 20px 15px 20px 11px;
            margin: 0 auto;
      }
      
      .vote-section-button-container {
            position: relative;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 402;
            height: 65px;
      }
      
      #program-vote-guest-input {
            position: relative;
            z-index: 403;
            width: 137px;
            top: 10px;
            /*+border-radius: 5px;*/
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            -khtml-border-radius: 5px;
            border-radius: 5px;
            padding: 2px 5px 0px;
            margin: 15px auto 0;
            font-size: 25px;
            line-height: 36px;
            font-weight: bold;
      }
      
      #program-vote-guest-input.enabled {
            cursor: pointer;
      }
      
      #program-vote-guest-content div.vote-panel {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
      }
      
      div.vote-panel div.vote-question {
            margin-bottom: 19px;
      }
      
      div.vote-panel div.vote-question div.vote-question-text {
            font-size: 18px;
            font-weight: bold;
      }
      
      div.vote-panel .vote-option {
            position: relative;
            top: 0;
            left: 0;
            min-height: 60px;
            /*height: auto;*/
            left: 0;
            width: 100%;
            clear: both;
            margin-bottom: 0px;
            margin-top: 6px;
            /*+border-radius: 4px;*/
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            -khtml-border-radius: 4px;
            border-radius: 4px;
            padding-top: 4px;
            padding-bottom: 4px;
            padding-left: 8px;
            cursor: pointer;
      }
      
      .vote-panel .vote-option .vote-button {
            position: relative;
            float: left;
            width: 40px;
            /*+border-radius: 15px;*/
            -moz-border-radius: 15px;
            -webkit-border-radius: 15px;
            -khtml-border-radius: 15px;
            border-radius: 15px;
            height: 30px;
            line-height: 30px;
            font-weight: normal;
            font-size: 12px;
            cursor: pointer;
      }
      
      .vote-panel .vote-option .vote-option-text {
            position: relative;
            float: left;
            /*height: 30px;*/
            /*line-height: 30px;*/
            margin-left: 18px;
            font-size: 16px;
            width: 76%;
            /*line-height: 22px;*/
            text-align: left;
      }
      
      /**  - - - - -   OTHER   - - - - -  **/
      .live-event div.status-section #event-status-indicator {
            position: relative;
            display: block;
            left: 0px;
            float: left;
            width: 48px;
            /*+border-radius: 5px;*/
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            -khtml-border-radius: 5px;
            border-radius: 5px;
            line-height: 14px;
            margin-right: 12px;
            padding: 5px;
      }
      
      .live-event hr {
            margin: 1em 0 0.2em;
      }
      
      .live-event .footer-content {
            grid-row-start: footer-start;
            grid-row-end: footer-end;
            grid-column-start: footer-start;
            grid-column-end: footer-end;
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
      }
      
      .live-event .footer-content-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
      }
}

@media screen and (min-width: 750px) {
      .info-box {
            width: 60%;
      }
}

/* Mobile */
@media screen and (max-width: 659px) {
      .page-section-container.view {
            width: 90%;
      }
      
      /*
      div.record-input {
            background-color: #23E6E6;
      }
      */
      
      div.record-input input {
            float: left;
            width: 210px;
            margin-top: 6px;
            margin-bottom: 6px;
            text-align: left;
      }
      
      div.record-input label {
            width: 116px;
            text-align: right;
            padding-left: 12px;
            /*background-color: #23E623;*/
      }
      
      /*LIVE EVENT*/
      .live-event #page-container-inner {
            position: relative;
            height: 100%;
            top: 0;
            left: 0;
            width: 100%;
            margin: 0;
            /*0px 30% 0px 0px; */
            padding: 0;
            display: grid;
            grid-template-columns: 2% [header-start video-start top-comment-start agenda-start comment-start vote-start footer-start] 7fr [header-end user-name-start] 3fr [video-end top-comment-end user-name-end agenda-end comment-end vote-end footer-end] 2%;
            grid-template-rows: [header-start user-name-start] minmax(45px, 65px) [header-end user-name-end agenda-start] minmax(60px, 0.5fr) [agenda-minimise-end video-start] max-content [video-end agenda-end vote-start top-comment-start] max-content [vote-end top-comment-end comment-start] minmax(220px, 2fr) [comment-end footer-start] 42px [footer-end];
            border-radius: none;
            border: none;
      }
      
      .live-event .signed-in-user-name {
            grid-row-start: user-name-start;
            grid-row-end: user-name-end;
            grid-column-start: user-name-start;
            grid-column-end: user-name-end;
      }
      
      /** LOG IN / OUT **/
      .home-page #page-container-outer {
            height: 469px;
            margin-top: 80px;
      }
      
      /** WELCOME  **/
      .welcome-box {
            position: relative;
            top: 27px;
            height: 320px;
            width: 90%;
            border-radius: 7px;
            padding: 50px 10px 10px 16px;
            margin: 50px auto;
            text-align: center;
      }
      
      .sign-in.register .welcome-box {
            height: 130px;
            padding: 0px;
            margin: 0px auto 50px;
      }
      
      .welcome-box .welcome-title {
            font-size: 34px;
            font-weight: lighter;
            text-align: left;
            margin-left: 18px;
            margin-bottom: 28px;
      }
      
      .welcome-box .welcome-desc {
            font-size: 24px;
            font-weight: lighter;
            margin-left: 18px;
            text-align: left;
            line-height: 28px;
      }
      
      .welcome-box .welcome-enter {
            margin-top: 37px;
            margin-bottom: 59px;
      }
      
      .welcome-box .welcome-enter a.button-style-link {
            font-weight: bold;
            font-size: 36px;
            line-height: 50px;
            padding-left: 18px;
            padding-right: 18px;
            padding-top: 0px;
            padding-bottom: 6px;
            height: 50px;
      }
      
      .welcome-box hr {
            margin-top: 0px;
            margin-bottom: 8px;
      }
      
      /** INFO  **/
      .info-box {
            width: 90%;
      }
      
      .info-box .title {
            font-size: 34px;
            line-height: 34px;
            font-weight: lighter;
            margin-bottom: 28px;
      }
      
      .info-box .description {
            font-size: 22px;
            font-weight: lighter;
            margin-left: 18px;
            text-align: left;
            line-height: 28px;
      }
      
      .info-box .option-link {
            margin-top: 37px;
            margin-bottom: 18px;
      }
      
      .info-box .option-link a.button-style-link {
            font-weight: bold;
            font-size: 20px;
            line-height: 32px;
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 0px;
            padding-bottom: 0px;
            height: 31px;
      }
      
      .info-box hr {
            margin-top: 0px;
            margin-bottom: 8px;
      }
      
      /** SIGN IN **/
      .sign-in #page-container-outer form.lang-switch-form {
            float: right;
            margin-bottom: 11px;
      }
      
      .login-box .record-input {
            margin: 0;
      }
      
      .login-box .record-input label {
            text-align: left;
      }
      
      .login-box #login-but {
            /*float: left;*/
            clear: both;
            margin-top: 16px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
            /*left: -4px;*/
            top: -3px;
      }
      
      .login-box a.reset-password {
            position: relative;
            top: 3px;
            margin-left: 30px;
            color: #3F82DD;
            white-space: nowrap;
            margin-left: auto;
            margin-right: auto;
            padding-left: 8px;
            margin-top: 20px;
            /*display: block;*/
      }
      
      .sign-in .login-box {
            position: relative;
            width: 90%;
            border-radius: 7px;
            padding: 10px 10px 10px 16px;
            margin: 75px auto 50px;
      }
      
      .sign-in .login-box .login-title {
            font-size: 26px;
            font-weight: lighter;
            text-align: left;
            margin-top: 18px;
            margin-bottom: 20px;
      }
      
      .sign-in .login-box .login-message {
            font-weight: lighter;
            text-align: left;
            margin-bottom: 12px;
            font-size: 20px;
      }
      
      .sign-in .login-box .login-message-error {
            font-weight: bold;
            text-align: left;
            margin-bottom: 14px;
            font-size: 20px;
      }
      
      .sign-in .login-box .login-message-error-desc {
            text-align: left;
            font-size: 1em;
            line-height: 1.2em;
            color: #606060;
      }
      
      .sign-in .login-box .spacer {
            display: none;
      }
      
      /**  EVENT PAGE  **/
      .live-event .header-section {
            grid-row-start: header-start;
            grid-row-end: header-end;
            grid-column-start: header-start;
            grid-column-end: header-end;
            position: relative;
            left: 0;
            top: 0;
            width: 100%;
            margin-top: 0;
            margin-left: 0;
            margin-right: 0;
      }
      
      .live-event .header-section .header-title {
            float: left;
            position: relative;
            left: 12px;
            top: 70px;
            font-size: 44px;
            font-weight: lighter;
      }
      
      .live-event .header-section .header-bg {
            position: relative;
            height: 100%;
            width: 100%;
      }
      
      /*  - - - - -   AGENDA   - - - - -  */
      .live-event .agenda-section-container {
            grid-row-start: agenda-start;
            grid-row-end: agenda-end;
            grid-column-start: agenda-start;
            grid-column-end: agenda-end;
            position: relative;
            left: 0;
            top: 0;
            font-size: 10pt;
            line-height: 13pt;
            width: 100%;
            margin-top: 0;
            overflow: hidden;
            height: 100%;
            cursor: pointer;
            z-index: 110;
      }
      
      .live-event .agenda-section-container.minimised {
            height: 90%;
            grid-row-end: agenda-minimise-end;
      }
      
      .live-event .agenda-section-background {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0.85;
      }
      
      .live-event .agenda-section-container div.agenda-section-title {
            position: absolute;
            height: 25px;
            right: 0;
            margin-top: 12px;
            text-align: right;
            font-weight: bold;
            font-size: 16px;
            padding-right: 13px;
      }
      
      .live-event .agenda-section-container div.agenda-section-content {
            position: relative;
            padding-top: 4px;
            padding-bottom: 4px;
            width: 100%;
            top: 0;
            left: 0;
            height: 100%;
            margin-left: 10px;
            width: 70%;
            padding-bottom: 36px;
            overflow: auto;
            scroll-snap-type: y mandatory;
      }
      
      .live-event .agenda-section-content div.agenda-item {
            position: relative;
            top: 0px;
            left: 0px;
            width: 100%;
            margin-bottom: 2px;
            line-height: 14pt;
            font-size: 11.6pt;
            scroll-snap-align: center;
      }
      
      .live-event .agenda-item .agenda-time {
            position: relative;
            float: left;
            width: 18%;
            text-align: right;
            overflow: hidden;
      }
      
      .live-event .agenda-item .agenda-name {
            position: relative;
            float: right;
            text-align: left;
            width: 79%;
            margin-bottom: 0px;
      }
      
      .live-event .agenda-item .agenda-comment {
            position: relative;
            float: right;
            font-size: 9pt;
            text-align: left;
            width: 79%;
            line-height: 14pt;
      }
      
      .live-event div.agenda-section-content div.agenda-item.now {
            font-size: 12pt;
            line-height: 28px;
            font-weight: bold;
            height: 26px;
      }
      
      /*  - - - - -   Video   - - - - -  */
      .live-event .video-section-container {
            grid-row-start: video-start;
            grid-row-end: video-end;
            grid-column-start: video-start;
            grid-column-end: video-end;
            position: relative;
            left: 0;
            top: 0;
            /*+border-radius: 6px;*/
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            -khtml-border-radius: 6px;
            border-radius: 6px;
      }
      
      .live-event .video-section-container .video-section-content {
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 100;
      }
      
      /**  - - - - - TOP COMMENT - - - - -  **/
      .live-event .top-comment-container {
            grid-row-start: top-comment-start;
            grid-row-end: top-comment-end;
            grid-column-start: top-comment-start;
            grid-column-end: top-comment-end;
      }
      
      .live-event .top-comment {
            z-index: 200;
            position: relative;
            left: 0;
            top: 0;
            min-height: 35px;
            margin: 0;
            width: 100%;
            /*+border-radius: 4px;*/
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            -khtml-border-radius: 4px;
            border-radius: 4px;
            padding-bottom: 9px;
      }
      
      .live-event .top-comment-container.hide {
            display: none;
      }
      
      .live-event .top-comment .top-comment-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.7;
            z-index: 201;
            /*+border-radius: 4px;*/
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            -khtml-border-radius: 4px;
            border-radius: 4px;
      }
      
      .live-event .top-comment-title {
            position: relative;
            left: 0;
            top: 0;
            z-index: 202;
            font-size: 16px;
            font-weight: bold;
            text-align: left;
            margin: 7px 7px 7px 0px;
            width: 100%;
            padding: 8px 4px 4px 8px;
      }
      
      .live-event .top-comment .top-comment-content {
            position: relative;
            left: 0;
            top: 0;
            z-index: 202;
            padding-left: 10px;
            padding-top: 3px;
            font-size: 14px;
            line-height: 20px;
            text-align: justify;
            padding-right: 10px;
      }
      
      /*  - - - - -   Comment   - - - - -  */
      .live-event .comment-section-container {
            grid-row-start: comment-start;
            grid-row-end: comment-end;
            grid-column-start: comment-start;
            grid-column-end: comment-end;
            position: relative;
            left: 0px;
            width: 100%;
            z-index: 100;
            margin-top: 7px;
      }
      
      .live-event .comment-section-container #program-comments-background {
            position: absolute;
            width: 100%;
            z-index: 5;
            height: 100%;
            top: 0px;
      }
      
      .live-event .comment-section-container .comment-section-title {
            position: relative;
            width: 98%;
            height: 30px;
            text-align: left;
            font-weight: bold;
            font-size: 21px;
            z-index: 10;
            margin-left: 9px;
      }
      
      .live-event .comment-section-container .comment-section-title .program-comment-but {
            position: relative;
            top: 2px;
            right: 10px;
            float: right;
            font-size: 13px;
            height: 28px;
            line-height: 25px;
            text-align: center;
            font-weight: bold;
            /*+border-radius: 5px;*/
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            -khtml-border-radius: 5px;
            border-radius: 5px;
            cursor: pointer;
            padding-left: 6px;
            padding-right: 6px;
      }
      
      .live-event .comment-section-container .program-comments-content-box {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 85%;
            margin-top: 0px;
      }
      
      .live-event .comment-section-container #program-comments-content {
            position: relative;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            padding-left: 4px;
            padding-right: 4px;
            z-index: 10;
            overflow: auto;
      }
      
      .live-event #program-comments-content .comment-item {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            margin-bottom: 14px;
      }
      
      .live-event #program-comments-content .comment-item .comment-name {
            position: relative;
            float: left;
            top: 0px;
            font-size: 10pt;
            text-align: left;
            font-weight: bold;
            overflow: hidden;
            line-height: 14pt;
            padding-bottom: 4px;
            margin-right: 10px;
            margin-left: 10px;
      }
      
      .live-event #program-comments-content .comment-item .comment-date {
            position: relative;
            float: left;
            left: 0px;
            top: 0px;
            font-size: 9pt;
            width: 41px;
            text-align: left;
            padding-left: 0;
            line-height: 14pt;
            padding-bottom: 4px;
      }
      
      .live-event #program-comments-content .comment-item .comment-text {
            position: relative;
            float: left;
            left: 0px;
            top: 0px;
            font-size: 10pt;
            width: 100%;
            text-align: left;
            clear: both;
            line-height: 16pt;
            padding: 10px 10px 10px 15px;
      }
      
      .live-event .add-comment-container-outer.hide-comment-input {
            display: none;
      }
      
      /**  Comment Add Box **/
      .live-event #add-comment-container-outer {
            position: absolute;
            top: 0px;
            height: 100%;
            width: 100%;
            left: 0px;
            z-index: 100;
      }
      
      .live-event #add-comment-container-outer .add-comment-container-inner {
            position: relative;
            top: 0px;
            left: 0px;
            width: 97%;
            height: 215px;
            z-index: 100;
            /*+border-radius: 6px;*/
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            -khtml-border-radius: 6px;
            border-radius: 6px;
            overflow: hidden;
      }
      
      .live-event .add-comment-container-inner textarea.comment-input {
            position: relative;
            top: 8px;
            left: 0px;
            height: 145px;
            width: 96%;
            /*+border-radius: 5px;*/
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            -khtml-border-radius: 5px;
            border-radius: 5px;
            z-index: 300;
            font-size: 12pt;
            padding: 10px;
      }
      
      .live-event .add-comment-container-inner .program-comment-send-buttons {
            position: relative;
            top: 8px;
            left: 0;
            height: 56px;
            z-index: 300;
            text-align: center;
            margin: 0 auto;
            width: 258px;
            padding-left: 6px;
      }
      
      .live-event .add-comment-container-inner .program-comment-send-buttons div {
            position: relative;
            float: left;
            left: 0;
            top: 0;
            font-size: 1.2em;
            width: 117px;
            height: 43px;
            line-height: 46px;
            cursor: pointer;
            /*+border-radius: 8px;*/
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
            -khtml-border-radius: 8px;
            border-radius: 8px;
      }
      
      .live-event .add-comment-container-inner #program-comment-cancel-but {
            margin-left: 10px;
      }
      
      .live-event div.blocked {
            display: none;
      }
      
      /**  - - - - -   VOTE   - - - - -  **/
      #program-vote-guest-container {
            grid-row-start: vote-start;
            grid-row-end: vote-end;
            grid-column-start: vote-start;
            grid-column-end: vote-end;
            position: relative;
            z-index: 400;
            width: 100%;
            overflow: hidden;
            padding-bottom: 28px;
            /*+border-radius: 0px 0px 9px 9px;*/
            -moz-border-radius: 0px 0px 9px 9px;
            -webkit-border-radius: 0px 0px 9px 9px;
            -khtml-border-radius: 0px 0px 9px 9px;
            border-radius: 0px 0px 9px 9px;
      }
      
      #program-vote-guest-container.hide {
            display: none;
      }
      
      #program-vote-guest-container .vote-section-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 401;
      }
      
      #program-vote-guest-container .vote-section-foreground {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
      }
      
      #program-vote-guest-container .vote-section-foreground .vote-section-title {
            position: relative;
            width: 200px;
            z-index: 402;
            font-size: 24px;
            margin: 18px auto 9px;
      }
      
      #program-vote-guest-content {
            position: relative;
            z-index: 402;
            width: 95%;
            /*+border-radius: 5px;*/
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            -khtml-border-radius: 5px;
            border-radius: 5px;
            padding: 20px;
            margin: 0 auto;
      }
      
      .vote-section-button-container {
            position: relative;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 402;
            height: 65px;
      }
      
      #program-vote-guest-input {
            position: relative;
            z-index: 403;
            top: 11px;
            width: 137px;
            /*+border-radius: 5px;*/
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            -khtml-border-radius: 5px;
            border-radius: 5px;
            padding: 5px;
            margin: 15px auto 0;
            font-size: 25px;
            font-weight: bold;
      }
      
      #program-vote-guest-input.enabled {
            cursor: pointer;
      }
      
      #program-vote-guest-content div.vote-panel {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
      }
      
      div.vote-panel div.vote-question {
            margin-bottom: 19px;
      }
      
      div.vote-panel div.vote-question div.vote-question-text {
            font-size: 18px;
            font-weight: bold;
      }
      
      div.vote-panel .vote-option {
            position: relative;
            top: 0;
            left: 0;
            /*height: 38px;*/
            min-height: 60px;
            left: 0;
            width: 100%;
            clear: both;
            margin-bottom: 0px;
            margin-top: 6px;
            /*+border-radius: 4px;*/
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            -khtml-border-radius: 4px;
            border-radius: 4px;
            padding-top: 4px;
            padding-bottom: 4px;
            padding-left: 8px;
            cursor: pointer;
      }
      
      .vote-panel .vote-option .vote-button {
            position: relative;
            float: left;
            width: 40px;
            /*+border-radius: 15px;*/
            -moz-border-radius: 15px;
            -webkit-border-radius: 15px;
            -khtml-border-radius: 15px;
            border-radius: 15px;
            height: 30px;
            line-height: 30px;
            font-weight: normal;
            font-size: 12px;
            cursor: pointer;
      }
      
      .vote-panel .vote-option .vote-option-text {
            position: relative;
            float: left;
            /*height: 30px;*/
            /*line-height: 30px;*/
            margin-left: 18px;
            font-size: 16px;
            width: 76%;
            text-align: left;
      }
      
      /**  - - - - -   OTHER   - - - - -  **/
      .live-event div.status-section #event-status-indicator {
            position: relative;
            display: block;
            left: 0px;
            float: left;
            width: 48px;
            /*+border-radius: 5px;*/
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            -khtml-border-radius: 5px;
            border-radius: 5px;
            line-height: 14px;
            margin-right: 12px;
            padding: 5px;
      }
      
      .live-event hr {
            margin: 1em 0 0.2em;
      }
      
      .live-event .footer-content {
            grid-row-start: footer-start;
            grid-row-end: footer-end;
            grid-column-start: footer-start;
            grid-column-end: footer-end;
            position: relative;
            top: 0px;
            left: 0px;
            width: 100%;
            overflow: hidden;
      }
      
      .live-event .footer-content-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
      }
}

@media screen and (max-width: 490px) {
      
      /*
      div.record-input {
            background-color: #23E4A4;
      }
      */
      
      div.record-input input, div.record-input span, div.record-input div {
            /*clear: left;*/
            float: left;
            position: relative;
            width: auto;
      }
      
      div.record-input input, div.record-input div {
            clear: left;
      }
      
      div.record-input label {
            text-align: right;
            padding-left: 12px;
      }
}

@media screen and (max-width: 420px) {
      div.record-input input, div.record-input span, div.record-input div {
            clear: left;
      }
      
      div.record-input label {
            text-align: left;
            padding-left: 0;
      }
}