html, body {
    margin:0;
}

/* Poppins
light 300
normal 400
medium 500
semi-bold 600
 */

body {
    background-color: #F5F6F8;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    padding:1em 2em 3em 2em;
    font-size:100%;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

div {
    box-sizing: border-box;
}

.clear {
    clear: both;
}

.errorMessage {
    color:red;
    font-weight: bold;
    margin:1em 0 1em 0;
}

.container {
    width:96%;
    margin-left:1em;
    padding-bottom: 6em;
}

.header {
    position: fixed;
    top:0;
    left:0;
    width:100%;
    background-color: white;
    z-index: 999;
}

.inactive {
    opacity: 0.25;
}

.top-nav {
    margin-left:1em;
}

.top-nav-section {
    float:left;
    margin:0 2em 0 2em;
    color:grey;
    font-size: 90%;
    padding:1.2em 0 1.2em 2.5em;
}
.top-nav-section a {
    text-decoration: none;
    color:grey;
}
.top-nav-section a:hover {
    color:#479880;
}
.top-nav-section.active a {
    color:#479880;
}

.top-nav-section.dashboard {
    font-width: 400;
    background-image: url('/img/icon_dashboard.png');
    background-repeat: no-repeat;
    background-position: 0 1.2em;
    background-size: 25px;
}
.top-nav-section.dashboard.active {
    background-image: url('/img/icon_dashboard_active.png');
}

.top-nav-section.account {
    background-image: url('/img/icon_account.svg');
    background-repeat: no-repeat;
    background-position: 0 1.2em;
    background-size: 22px;
}
.top-nav-section.account.active {
    background-image: url('/img/icon_account_active.png');
}

.top-nav-section.users {
    background-image: url('/img/icon_users.svg');
    background-repeat: no-repeat;
    background-position: 0 1.1em;
    background-size: 18px;
}
.top-nav-section.users.active {
    background-image: url('/img/icon_users_active.png');
}

.top-nav-section.alerts {
    background-image: url('/img/icon_alerts.svg');
    background-repeat: no-repeat;
    background-position: 0 1.1em;
    background-size: 18px;
}
.top-nav-section.alerts.active {
    background-image: url('/img/icon_alerts_active.png');
}

.top-nav-section.feedback {
    background-image: url('/img/icon_feedback.png');
    background-repeat: no-repeat;
    background-position: 0 1.1em;
    background-size: 24px;
}
.top-nav-section.feedback.active {
    background-image: url('/img/icon_feedback_active.png');
}

.top-nav-section.logout {
    background-image: url('/img/icon_logout.svg');
    background-repeat: no-repeat;
    background-position: 0 1.2em;
    background-size: 24px;
}
.top-nav-section.logout.active {
    background-image: url('/img/icon_logout_active.svg');
}

.top-nav-section.active {
    border-bottom:4px solid #479880;
    color:#479880;
    font-weight: bold;
}

.top-nav-section.search {
    float:right;
    display:none;
}

.dashboard-header, .data-header {
    margin-top:5em;
    width:100%;
    padding-bottom:2em;
    border-bottom: 1px solid gainsboro;
}

.data-header {
    border:0;
    padding-bottom:1em;
}





.dashboard-header-registrations-last-30-days, .dashboard-header-most-popular-ticket {
    float:right;
    background-color: white;
    padding:1.5em 2em 1.5em 2em;
    border-radius: 0.6em;
}

.dashboard-header-registrations-last-30-days {
    margin-right:1em;
}

.last-30-days-count, .most-popular-ticket-count {
    float:left;
    background-color: #479880;
    height: 3em;
    position: relative;
    width: 3em;
    border-radius: 50%;
    font-size:140%;
    margin-right:1em;
    text-align: center;
}
.last-30-days-count .number, .most-popular-ticket-count .number {
    height: 50%;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    color:white;
    font-weight: 600;
}
.last-30-days-text {
    font-size:80%;
    font-weight: 500;
    padding-top:1em;
    min-width:14em;
}

.most-popular-ticket-text {
    font-size:80%;
    padding-top:0.5em;
}
.most-popular-ticket-text-ticket-name {
    color:grey;
    font-weight: 600;
}
.most-popular-ticket-text-webinar-name {
    font-size:120%;
    font-weight: 500;
}


.dashboard-header-most-popular-ticket {
    width:44%;
}
.most-popular-ticket-text span {
    display: block;
}


.dashboard-header-logo-title-box {
    width:32%;
    float:left;
    margin-top:1em;
}
.dashboard-header-logo-title-box-logo {
    float:left;
}
.dashboard-header-logo-title-box-logo img {
    max-height:5em;
    max-width: 11em;
}
.dashboard-header-logo-title-box-title {
    padding-left:1.5em;
    float:left;
}
.dashboard-header-logo-title-box-title h1 {
    margin:0;
}
.dashboard-header-logo-title-box-title span {
    font-size: 190%;
    font-weight: 300;
    line-height: 0.7em;
}




.dashboard-lists-title, .data-graph-registrations-title, .data-user-statistics-title {
    color:black;
    font-size: 90%;
    font-weight:500;
    padding:2em 0 0 2.6em;
}
.dashboard-lists-title.open {
    background-image: url('icon_open_events.svg');
    background-repeat: no-repeat;
    background-position: 0.2em 2em;
    background-size: 24px;
}
.dashboard-lists-title.past {
    background-image: url('icon_past_events.svg');
    background-repeat: no-repeat;
    background-position: 0.4em 1.9em;
    background-size: 22px;
}
.data-graph-registrations-title.data {
    background-image: url('icon_open_events.svg');
    background-repeat: no-repeat;
    background-position: 0.2em 2em;
    background-size: 24px;
    margin-bottom: 1em;
}
.data-user-statistics-title.individual-user-statistics {
    background-image: url('icon_open_events.svg');
    background-repeat: no-repeat;
    background-position: 0.2em 2em;
    background-size: 24px;
    margin-bottom: 1em;
}

.dashboard-lists-list-row {
    background-color: white;
    margin-top:1em;
    padding:1em 1em 1em 2em;
    border-radius: 0.6em;
    border:1px solid #E7E7E7;
}

.list-item {
    float:left;
    width:14%;
}

.list-item a {
    text-decoration: none;
    color:inherit;
}

.list-item.title {
    padding-right:4em;
    width:24%;
}
.list-item.title h2 {
    font-weight:500;
    font-size: 130%;
    line-height:1.3em;
    margin-bottom:0;
}

.list-item-title-status {
    color: #3DE4B3;
    border:2px solid #3DE4B3;
    font-size: 70%;
    font-weight: 600;
    text-transform: uppercase;
    padding:1px 12px 1px 12px;
    border-radius: 1em;
    width:5em;
    text-align: center;
}
.list-item-title-date-time {
    font-weight:300;
    font-size:75%;
    color:grey;
}

.list-item.registrations, .list-item.live-views, .list-item.catch-ups {
    padding: 0 2em 0 2em;
    margin: 1em 0 1em 0;
    text-align: center;
}

.list-item.registrations, .list-item.live-views {
    border-right: 1px solid gainsboro;
}

.list-item-figure, .data-user-statistics-stats-counter span {
    font-weight: 600;
    font-size:200%;
}
.list-item-figure.registrations, .data-user-statistics-stats-counter.registrations span {
    color:#479880;
}
.list-item-figure.live-views, .data-user-statistics-stats-counter.live-views span {
    color:#F6B661;
}
.list-item-figure.catch-ups, .data-user-statistics-stats-counter.catch-ups span {
    color:#5685BD;
}

.list-item-subtitle {
    font-size:75%;
    font-weight: 500;
    color:grey;
    white-space: nowrap;
}

.list-item-title {
    margin-top:2.8em;
    line-height: 1.2em;
}

.list-item.marketing-toolkit, .list-item.webinar-data, .list-item.webinar-feedback {
    padding: 1em;
    border-radius: 1.2em;
    height:7em;
    margin:0.5em;
    font-size:90%;
    width:10%;
}

.list-item.marketing-toolkit span, .list-item.webinar-data span, .list-item.webinar-feedback span {
    display: block;
    font-weight: 500;
}

.list-item.marketing-toolkit {
    background-color: #E1FFF6;
    color:#479880;
    background-image: url('icon_toolkit.svg');
    background-repeat: no-repeat;
    background-position: 1em 1em;
    background-size: 24px;
}

.list-item.webinar-data {
    background-color: #FFF6EA;
    color:#FF9326;
    background-image: url('icon_data.svg');
    background-repeat: no-repeat;
    background-position: 1em 1em;
    background-size: 24px;
}

.list-item.webinar-feedback {
    background-color: #f2f8ff;
    margin-right:0;
    color:#5685bd;
    background-image: url('icon_feedback.svg');
    background-repeat: no-repeat;
    background-position: 1em 1em;
    background-size: 24px;
}



.list-item-percentage, .data-user-statistics-stats-percentage {
    position: relative;
    width:100%;
}

.list-item-percentage-track, .data-user-statistics-stats-percentage-track {
    color: #000!important;
    background-color: #f1f1f1!important;
    margin-top:0.6em;
    border-radius: 8px;
    width:75%;
}
.list-item-percentage-colour-bar, .data-user-statistics-stats-percentage-colour-bar {
    height:6px;
    color: #fff!important;
    border-radius: 8px;
}
.list-item-percentage-colour-bar.live-views, .data-user-statistics-stats-percentage-colour-bar.live-views {
    background-color: #F6B661 !important;
}
.list-item-percentage-colour-bar.catch-ups, .data-user-statistics-stats-percentage-colour-bar.catch-ups {
    background-color: #5685BD !important;
}

.list-item-percentage-percent, .data-user-statistics-stats-percentage-percent {
    font-size:60%;
    color:grey;
    font-weight: 600;
    width:20%;
    position: absolute;
    bottom:-4px;
    right:0;
}

.data-webinar-title-bar {
    background-color: #EEF0F3;
    border-radius: 0.6em;
    padding:1.5em;
    width:100%;
}
.title-bar-item {
    float:right;
    font-size:80%;
    margin-right: 3em;
}
.title-bar-item.title {
    float:left;
}
.title-bar-item.title h2 {
    margin:0;
    font-weight: 500;
    font-size: 170%;
}
.title-bar-item span {
    display: block;
    font-weight: 600;
}

.data-graph-registrations {
    display: flex;
}

.data-graph-registrations-graph, .data-graph-registrations-registrations-loader, .data-graph-registrations-registrations-ticket-registrations, .data-user-statistics {
    background-color: white;
    border-radius: 0.6em;
}
.data-graph-registrations-registrations-loader {
    margin-bottom:1em;
    padding:1em;
    font-size:80%;
}
.data-graph-registrations-registrations-loader img {
    width:33%;
    margin-bottom:0.4em;
}
.data-graph-registrations-registrations-loader span {
    font-weight:600;
    color:#E25439;
}

.data-graph-registrations-graph {
    width:64%;
    float:left;
    margin-right:1em;
    padding:2em 4em 2em 3em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.data-graph-registrations-registrations {
    width:34%;
    float:left;
}

.data-graph-registrations-registrations-ticket-registrations {
    padding:0 1em 1em 1em;
}

.data-ticket-registrations-ticket {
    padding: 1em 2em 1em 0;
    border-top: 2px dashed #E7E7E7;
    clear:both;
    display:flex;
    align-items: center;
}

.data-ticket-registrations-ticket-count {
    float:left;
    border: 4px solid #479880;
    line-height: 2.7em;
    width: 3em;
    height: 3em;
    min-width: 3em;
    /*position: relative;*/
    border-radius: 50%;
    margin-right:1em;
    text-align: center;
    font-size:120%;
}
.data-ticket-registrations-ticket-count .number {
    /*height: 50%;
    left: 50%;
    position: absolute;
    top: 46%;
    transform: translate(-50%, -50%);
    width: 50%;*/
    font-size:120%;
    color:#479880;
    font-weight: 600;
}

.data-ticket-registrations-ticket-name {
    font-size:90%;
    line-height: 1.2em;
}

.data-user-statistics {
    padding:1.5em;
    display: flex;
}

.data-user-statistics-stats {
    background-color: #F9F9F9;
    border-radius: 0.4em;
    padding:0.4em;
    margin-right:1.5em;
    display: flex;
    flex-grow: 1;
}
.data-user-statistics-stats.combined-list {
    flex-grow: 8;
    margin-right:0;
}

.data-user-statistics-stats-counter {
    background-color: white;
    padding:1.5em;
    border-radius: 0.4em;
    width:50%;
    text-align: center;
    font-size:80%;
    white-space: nowrap;
}
.data-user-statistics-stats-counter span {
    display:block;
}
.data-user-statistics-stats-actions {
    width:50%;
    padding-left:0.75em;
    font-size:80%;
    color:grey;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.data-user-statistics-stats-actions div {
    margin:0 0.25em 0 0;
    padding:0.75em;

}

.data-user-statistics-stats-actions div a {
    text-decoration:none;
    color:grey;
}

.data-user-statistics-stats-container {
    background-color: #FFFF02;
    padding:0.4em;
    border-radius: 0.4em;
    width:100%;
    display: flex;
}

.data-user-statistics-stats-container-heading {
    /*padding:1.5em;*/
    padding:1.1em;
    width:50%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.data-user-statistics-stats-container-heading .title {
    font-weight: bold;
}
.data-user-statistics-stats-container-heading .format {
    font-size:70%;
}

.data-user-statistics-stats-container-download {
    background-color: #F9F9F9;
    padding:1.5em;
    border-radius: 0.4em;
    width:50%;
    font-size:80%;
    text-align: center;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.data-user-statistics-stats-container-download img {
    margin:auto;
    display:block;
}
.data-user-statistics-stats-container-download a {
    margin-top:0.5em;
    text-decoration: none;
    color:grey;
}



.button {
    background-color:#e25439;
    padding:0.6em 1em 0.6em 1em;
    color:white;
    font-size:90%;
    font-weight:600;
    border-radius: 0.5em;
    cursor: pointer;
    width:12em;
}


.button.loader {
    background-color:#479880;
    float:right;
    margin:1.5em 0.5em 1em 3em;
}

.hide {
    display:none;
}
.show {
    display:block;
}


.listView {
    position: relative;
    top:-5px;
    background-color: #ffffff;
    padding: 0 2em 2em 2em;
}
.listView table {
    width:100%;
    border-collapse: collapse;
}
.listView table thead {
    font-size:80%;
    color: grey;
    /*white-space: nowrap;*/
}
.listView table thead tr {
    height: 4em;
}
.listView table td {
    border-bottom: 1px solid #e3e3e3;
    font-size: 85%;
    padding:0.75em;
}

.standard-box {
    background-color: white;
    padding: 1.5em 2em 1.5em 2em;
    border-radius: 0.6em;
}
.standard-box.fifty {
    max-width: 50%;
}
.standard-box.sixty-six {
    max-width: 66.6%;
}

label, input {
    display:block;
}
label {
    margin:0.3em 0 0.3em 0;
    font-weight: bold;
}

input {
    padding:0.6em;
    box-sizing: border-box;
    font-size: 100%;
}

input[type='text'], input[type='email'], input[type='password'] {
    min-width: 26em;
}

input[type='submit'] {
    margin-top:1em;
    min-width: 6em;
}

.authenticate-logo-title-box {
    float:left;
    margin:1em 0 1em 2em;
}

.authenticate-logo-title-box-logo {
    display:block;
}
.authenticate-logo-title-box-logo img {
    max-width:250px;
}
.authenticate-logo-title-box-title {
    display:block;
}
.authenticate-logo-title-box-title h1 {
    margin:0;
    display:inline;
}
.authenticate-logo-title-box-title span {
    font-size: 190%;
    font-weight: 300;
}

.account-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
}

.account-container div {
    width:20%;
    margin:2.5%;
    text-align: center;
}

.account-container div img {
    max-height:4em;
    display: block;
    margin:auto;
    margin-bottom:1.5em;
}