/**
 * event platform specific css
 */

.site-header-eventplatform {
    /** z-index should be higher than overlay element's z-index value (which is 2000) **/
    z-index: 3000;
    position: absolute;
    width: 100%;
}

/* btn-translucent */
a.btn.btn-translucent-eventplatform,
button.btn.btn-translucent-eventplatform {
    background-color: rgba(0,0,0,0.4);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    padding: 8px;
    line-height: normal;
}

a.btn.btn-translucent-eventplatform:hover,
button.btn.btn-translucent-eventplatform:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* button.btn.btn-translucent:active {}     SAME AS DEFAULT */
a.btn.btn-translucent-eventplatform:disabled,
button.btn.btn-translucent-eventplatform:disabled {
    color: #cccccc;
    background-color: #ffffff;
}

a.btn.btn-translucent-eventplatform .v2ui-Spinner-icon .path1::before,
button.btn.btn-translucent-eventplatform .v2ui-Spinner-icon .path1::before {
    color: #ffffff;
}

a.btn.btn-translucent-eventplatform .v2ui-Spinner-icon .path2::before,
button.btn.btn-translucent-eventplatform .v2ui-Spinner-icon .path2::before {

    color: #ffffff;
}


/* btn-cta */
a.btn.btn-cta-eventplatform,
.eventsplatform button.btn.btn-cta-eventplatform[type="button"] {
    background: #006efa;
    border: none;
    color: #ffffff;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 16px;
    line-height: normal;
}

.eventsplatform button.btn.btn-cta-eventplatform[type="button"] i {
    font-size: 24px;
    color: #ffffff;
}

a.btn.btn-cta-eventplatform:hover,
button.btn:hover:not(.btn-link, button.btn .button--transparent),
.eventsplatform button.btn.btn-cta-eventplatform[type="button"]:hover {
    background-color: #0055cc;
    color: #ffffff;
}

a.btn.btn-cta-eventplatform:active,
.eventsplatform button.btn.btn-cta-eventplatform[type="button"]:active {
    background-color: #0055cc;
}

a.btn.btn-cta-eventplatform:disabled,
.eventsplatform button.btn.btn-cta-eventplatform[type="button"]:disabled {
    color: #cccccc;
    background-color: #ffffff;
}
a.btn.btn-cta-eventplatform.disabled,
.eventsplatform button.btn.btn-cta-eventplatform[type="button"].disabled {
    padding: 5px 16px;
}

a.btn.btn-cta-eventplatform .v2ui-Spinner-icon .path1::before,
.eventsplatform button.btn.btn-cta-eventplatform[type="button"] .v2ui-Spinner-icon .path1::before {
    color: #ffffff;
}

a.btn.btn-cta-eventplatform .v2ui-Spinner-icon .path2::before,
.eventsplatform button.btn.btn-cta-eventplatform[type="button"] .v2ui-Spinner-icon .path2::before {
    color: #ffffff;
}

/* btn-danger */
a.btn.btn-danger-eventplatform,
.eventsplatform button.btn.btn-danger-eventplatform[type="button"] {
    background-color: #e12437;
    color: #ffffff;
    border: none;
    font-size: 14px;
    font-weight: bold;
    padding: 8px;
    line-height: normal;
}

.eventsplatform button.btn.btn-large.btn-danger-eventplatform[type="button"],
.eventsplatform button.btn.btn-large.btn-danger-eventplatform[type="button"]:hover {
    border-radius: 8px;
    font-size: 16px;
    color: #ffffff;
}

button.btn:hover:not(.btn-link.btn-large, button.btn .button--transparent).btn-large

button.btn:hover:not(.btn-link.btn-large, button.btn .button--transparent).btn-large {
    border-radius: 8px;
}

a.btn.btn-danger-eventplatform:hover,
.eventsplatform button.btn.btn-danger-eventplatform[type="button"]:hover {
    background-color: #b41c2c;
}

a.btn.btn-danger-eventplatform:active
.eventsplatform button.btn.btn-danger-eventplatform[type="button"]:active {
    background-color: #b41c2c;
}

a.btn.btn-danger-eventplatform:disabled,
.eventsplatform button.btn.btn-danger-eventplatform[type="button"]:disabled {
    color: #cccccc;
    background-color: #ffffff;
}

a.btn.btn-danger-eventplatform .v2ui-Spinner-icon .path1::before,
.eventsplatform button.btn.btn-danger-eventplatform[type="button"] .v2ui-Spinner-icon .path1::before {
    color: #ffffff;
}

a.btn.btn-danger-eventplatform .v2ui-Spinner-icon .path2::before,
.eventsplatform button.btn.btn-danger-eventplatform[type="button"] .v2ui-Spinner-icon .path2::before {
    color: #ffffff;
}


/* btn-borderless */
.btn.btn-borderless-eventplatform,
a.btn.btn-borderless-eventplatform,
button.btn.btn-borderless-eventplatform {
    background: none;
    border: none;
    color: #006bff;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    padding: 8px;
    line-height: normal;
}

a.btn.btn-borderless-eventplatform:hover,
button.btn.btn-borderless-eventplatform:hover {
    background-color: #cccccc;
    color: #006efa;
}

a.btn.btn-borderless-eventplatform:active,
button.btn.btn-borderless-eventplatform:active {
    background-color: #ebebeb;
    color: #006efa;
}

a.btn.btn-borderless-eventplatform:disabled,
button.btn.btn-borderless-eventplatform:disabled {
    color: #cccccc;
    background-color: #ffffff;
}

a.btn.btn-borderless-eventplatform .v2ui-Spinner-icon .path1::before,
button.btn.btn-borderless-eventplatform .v2ui-Spinner-icon .path1::before {
    color: #006efa;
}

a.btn.btn-borderless-eventplatform .v2ui-Spinner-icon .path2::before,
button.btn.btn-borderless-eventplatform .v2ui-Spinner-icon .path2::before {
    color: #006efa;
}

/* btn-close */
.btn.btn-close-eventplatform,
a.btn.btn-close-eventplatform {
    border: none;
}

.btn-close-eventplatform:hover,
a.btn-close-eventplatform:hover,
.btn-close-eventplatform:active,
a.btn-close-eventplatform:active,
.btn-close-eventplatform:focus,
a.btn-close-eventplatform:focus {
    text-decoration: none;
    outline: 0;
    border-radius: 4px;
    border: none;
}

.btn-close-eventplatform:hover,
a.btn-close-eventplatform:hover,
.btn-close-eventplatform:active,
a.btn-close-eventplatform:active,
.btn-close-eventplatform:focus,
a.btn-close-eventplatform:focus {
    text-decoration: none;
    outline: 0;
    border-radius: 4px;
}

.btn.btn-close-eventplatform.btn-close-eventplatform:hover,
a.btn.btn-close-eventplatform.btn-close-eventplatform:hover {
    background-color: #cccccc;
}

.btn.btn-close-eventplatform.btn-close-eventplatform:active,
a.btn.btn-close-eventplatform.btn-close-eventplatform:active,
.btn.btn-close-eventplatform.btn-close-eventplatform:focus,
a.btn.btn-close-eventplatform.btn-close-eventplatform:focus {
    background-color: #ebebeb;
}

.btn-close-eventplatform__icon {
    font-size: 35px;
    color: #999999;
}

.tag-label-eventplatform {
    color: #999999;
    font-size: 11px;
    font-weight: bold;
    border-radius: 4px;
    border: solid 1px #999999;
    padding: 1px 3px;
    line-height: 11px;
}

.eventsplatform h1 {
    font-size: 48px;
    color: #333333;
    line-height: normal;
}

.eventsplatform h3 {
    font-size: 24px;
    color: #333333;
    font-weight: bold;
}

.eventsplatform h4 {
    font-size: 20px;
    color: #333333;
    font-weight: bold;
}

/* eventplatform link */
.eventsplatform a:not(.MuiButtonBase-root, .kepuikit-link-root) {
    font-size: 14px;
    color: #006efa;
}
.eventsplatform a:not(.MuiButtonBase-root, .kepuikit-link-root):hover, 
.eventsplatform a:not(.MuiButtonBase-root, .kepuikit-link-root):active {
    color: #0055cc;
}

.eventsplatform a:not(.MuiButtonBase-root, .kepuikit-link-root):disabled {
    color: #cccccc;
}

.eventsplatform a:not(.MuiButtonBase-root, .kepuikit-link-root),
.eventsplatform a:not(.MuiButtonBase-root, .kepuikit-link-root):active,
.eventsplatform a:not(.MuiButtonBase-root, .kepuikit-link-root):hover,
.eventsplatform a:not(.MuiButtonBase-root, .kepuikit-link-root):visited,
.eventsplatform a:not(.MuiButtonBase-root, .kepuikit-link-root):disabled {
    text-decoration: none;
    font-weight: bold;
}

/* form controls */
.eventsplatform-form-label {
    font-size: 14px;
    font-weight: bold;
    font-style: normal;
    line-height: normal;
    color: #888888;
    margin: 24px 0 0;

}

.eventsplatform-form-control {
    color: #333333;
}

.eventsplatform-form-label__err {
    font-size: 13px;
    color: #e12437;
}

input.eventsplatform-form-control, textarea.eventsplatform-form-control {
    margin: 8px 0 0;
    padding: 7px 8px 8px;
    border-radius: 4px;
    border: solid 1px #cccccc;
    background-color: #ffffff;
}


/* Color Scheme */
.grayscale-1-eventplatform {
    color: #333333;
}
.grayscale-2-eventplatform {
    color: #666666;
}
.grayscale-3-eventplatform {
    color: #888888;
}
.grayscale-4-eventplatform {
    color: #999999;
}
.grayscale-5-eventplatform {
    color: #cccccc;
}
.grayscale-6-eventplatform {
    color: #d9d9d9;
}
.grayscale-7-eventplatform {
    color: #ebebeb;
}
.grayscale-8-eventplatform {
    color: #f4f4f4;
}
.grayscale-bg-1-eventplatform {
    background-color: #333333;
}
.grayscale-bg-2-eventplatform {
    background-color: #666666;
}
.grayscale-bg-3-eventplatform {
    background-color: #888888;
}
.grayscale-bg-4-eventplatform {
    background-color: #999999;
}
.grayscale-bg-5-eventplatform {
    background-color: #cccccc;
}
.grayscale-bg-6-eventplatform {
    background-color: #d9d9d9;
}
.grayscale-bg-7-eventplatform {
    background-color: #ebebeb;
}
.grayscale-bg-8-eventplatform {
    background-color: #f4f4f4;
}

.success-eventplatform {
    color: #3cd2af;
}
.danger-eventplatform {
    color: #fa3748;
}
.acknowledgement-eventplatform {
    color: #006efa;
}
.unread-eventplatform {
    color: #e0edfe;
}

/* this is a little different than the normal kms width */
.eventsplatform .system-width {
    margin: auto;
    width: 960px;
}
@media (max-width: 480px) {
    .eventsplatform .system-width {
        width: auto;
        margin-right: 16px;
        margin-left: 16px;
    }
}
@media (max-width: 767px) and (min-width: 481px) {
    .eventsplatform .system-width {
        width: auto;
        margin-right: 24px;
        margin-left: 24px;
    }
}
@media (max-width: 978px) and (min-width: 768px) {
    .eventsplatform .system-width {
        width: 720px;
    }
}
@media (min-width: 1200px) {
    .eventsplatform .system-width {
        width: 1140px;
    }
}
@media (min-width: 1336px) {
    .eventsplatform .system-width {
        width: 1200px;
    }
}
@media (min-width: 1600px) {
    .eventsplatform .system-width {
        width: 1200px;
    }
}

.eventsplatform .truncateManager__more, .eventsplatform .truncateManager__less-link {
    color: #006BFF;
    font-size: 16px;
    font-weight: bold;
    line-height: 22px;
}

.eventsplatform .nav-tabs.nav-tabs > .active > a,
.eventsplatform .nav-tabs.nav-tabs > .active > a.btn,
.eventsplatform .nav-tabs.nav-tabs > .active > a:hover,
.eventsplatform .nav-tabs.nav-tabs > .active > a.btn:hover,
.eventsplatform .nav-tabs.nav-tabs > .active > a:focus,
.eventsplatform .nav-tabs.nav-tabs > .active > a.btn:focus,
.eventsplatform .nav-tabs li a.active,
.eventsplatform .nav-tabs li a.btn.active {
    border-bottom-color: #006bff;
}

/* grid gaps */
@media (max-width: 1199px) {
    .grid-eventplatform   {
        margin-bottom: -16px;
        margin-right: -16px;
    }

    .grid-eventplatform .grid-item-eventplatform {
        margin-bottom: 16px;
        margin-right: 16px;
    }
}

@media (min-width: 1200px) {
    .grid-eventplatform {
        margin-bottom: -32px;
        margin-right: -32px;
    }

    .grid-eventplatform .grid-item-eventplatform {
        margin-bottom: 32px;
        margin-right: 32px;
    }
}

body.eventsplatform #wrap {
    /* 58px of the header height + 30px padding */
    padding-top: 88px;
}

body.wide-entry.eventsplatform #wrap {
    /* 60px of the header height */
    padding-top: 0;
}

/* override v2ui */
@media (max-width: 767px) {
    body.wide-entry.eventsplatform.module-default.controller-entry.action-view #wrap.container {
        padding-top: 60px;
    }
}

@media (max-width: 979px) {
    body.eventsplatform #wrap {
        padding-top: 80px;
    }
}


body.eventsplatform.header-overlap #wrap {
    padding-top: 0;
}

.eventsplatform .media-thumbnail.media-thumbnail::before {
    background-image: none;
}

/** modal */
.eventsplatform:not(.action-edit) .modal {
    width: 789px;
    border-radius: 8px;
    margin: 0 auto;
    position: relative;
    left: 0;
}
@media(min-width: 1200px) {
    .eventsplatform:not(.action-edit) .modal {
        width: 789px;
        margin-left: auto;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .eventsplatform:not(.action-edit) .modal {
        width: 720px;
    }
}

@media (max-width: 767px) {
    .eventsplatform:not(.action-edit) .modal {
        width: 100%;
        margin: 0;
        left: 0;
        top: 0;
        border-radius: 0;
    }
}

.eventsplatform:not(.action-edit) .modal.fade.in {
    border-left: none;
    border-right: none;
    box-shadow: none;
}

@media (max-width: 767px) {
    .eventsplatform:not(.action-edit) .modal.fade.in {
        top: 0;
    }
}

.eventsplatform .modal-header {
    text-align: center;
}
.eventsplatform .modal .modal-header h3 {
    font-weight: bold;
    color: #333333;
}

@media (max-width: 767px){
    .eventsplatform .modal .modal-header h3 {
        font-size: 24px;
    }
}

.eventsplatform .modal-body {
    max-height: 68vh;
    overflow-y: auto;
}
@media (max-width: 767px){
    .eventsplatform .modal-body {
        max-height: 84vh;
        height: 84vh;
    }
}

.eventsplatform .modal-backdrop {
    opacity: 0.7;
}

.eventsplatform .modal-container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
    z-index: 2000;
    max-width: 100vw;
    overflow-x: hidden;
}

body.modal-open {
    overflow-y: hidden;
}

/** modal end */

/* entry top components */
.entry-title__top-components {
  float: right;
  min-width: 380px;
  width: 380px;
}
@media (min-width: 1200px) {
    .entry-title-and-top-components {
        display: flex;
    }
    .entry-title__top-components {
        margin-left: 12px;
    }
}

.entry-title__top-components .entry-cta {
  display: flex;
}
@media (max-width: 1200px) {
  .entry-title__top-components {
    float: none;
    clear: both;
  }
}
@media (max-width: 480px) {
  .entry-title__top-components {
    text-align: center;
  }
}