.event-join-now {
    background-color: #3B80E8;
    border: 1px solid #3B80E8;
    border-radius: 10px;
    color: white;
}

.event-join-now:hover {
    background: #E3EEFF;
    border: 1px solid #E3EEFF;
    color: #296ED6;
}

.align-right {
    text-align: right !important;
}

.course-price {
    color: #6255A4;
    font-weight: 700;
    font-size: 20px;
}


/* ------------------------------- Left Modal ------------------------------- */

.modal-left {
    display: flex;
    flex-direction: column;
    height: 550px;
    left: 50%;
    max-height: calc(100vh - 100px);
    max-width: calc(100vw - 20px);
    opacity: 0;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .2s;
    visibility: hidden;
    width: 600px;
    z-index: -1;
}

.modal_conditions {
    background: #fff;
    bottom: 0;
    height: auto;
    left: auto;
    max-height: none;
    max-width: 100%;
    opacity: 1;
    right: -110%;
    top: 0;
    transform: none;
    visibility: visible;
    width: 466px;
}

.modal-left.js-modal-shown {
    opacity: 1;
    visibility: visible;
    z-index: 9992;
}

.modal_conditions.js-modal-shown {
    right: 0;
}

.modal__content {
    background: #fff;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.modal__header {
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
    padding: 10px 54px;
    position: relative;
    width: 100%;
}

.modal__body {
    flex-grow: 1;
    padding: 25px 15px;
    position: relative;
}

.modal__footer {
    border-top: 1px solid #f0f0f0;
    padding: 15px 17px;
}

.modal__scrollable {
    bottom: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 15px;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1;
}

.modal__closer.closer {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.closer {
    align-items: center;
    cursor: pointer;
    display: flex;
    height: 20px;
    justify-content: center;
    position: relative;
    width: 20px;
}

.modal__closer_left {
    left: 20px;
    right: auto;
}

.overlay-left {
    pointer-events: initial;
    backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, .55);
    bottom: 0;
    height: 100vh;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: .2s;
    visibility: hidden;
    width: 100vw;
}

.overlay-left-show {
    opacity: 1;
    visibility: visible;
}

.cart-product-title {
    font-weight: 600;
    font-size: 16px;
    color: #00082a !important;
}

.cart-product-counter {
    font-weight: 600;
    font-size: 16px;
    color: #00082a !important;
}

.cart-product-price {
    font-weight: 600;
    font-size: 16px;
    color: #00a046 !important;
}

.cart-product-discount {
    font-size: 14px;
    text-decoration: line-through;
    color: #e3e3e3 !important;
    font-weight: 400;
}

.cart-text-warning {
    color: #dc9409;
    font-weight: 400;
}

.order-success-part-title {
    font-weight: 600;
    font-size: 1.25rem;
    color: #00082a99;
}

.order-success-part-value {
    font-weight: 600;
    font-size: 1.25rem;
    color: #00082a;
}

.order-success-part-border-bottom {
    border-bottom: 1px solid #e8e3e3;
}

.cart-product-border-bottom {
    border-bottom: 1px solid #e8e3e3;
}

.certificate-list-item {
    border: 1px solid #E8E8E8;
    margin-bottom: 24px;
    padding: 20px;
    border-radius: 5px;
}

.certificate-list-item:hover {
    box-shadow: 0 0 13px rgb(0 0 0 / 30%);
    transition: all 0.5sease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -webkit-transition: all 0.5sease;
}

/* ------------------------------- Alerts ------------------------------- */

.alert-new {
    display: flex;
    position: fixed;
    z-index: 100000;
    backdrop-filter: blur(8px);
    border-radius: 10px;
    padding: 18px 20px;
    max-width: calc(100vw - 60px);
    width: 400px;
    right: 30px;
    top: 100px;
    font-size: 15px;
}

.alert-new > .fas {
    font-size: 21px;
    padding-right: 10px;
}

.alert-new-success {
    background-color: rgb(231 244 238);
    border: 1px solid #40C284;
    color: #40C284;
}

.alert-new-warning {
    background-color: rgb(249, 246, 214);
    border: 1px solid #F57A31;
    color: #F57A31;
}

.alert-new-danger {
    background-color: rgba(248, 231, 231, 0.4);
    border: 1px solid #FF3A3A;
    color: #FF3A3A;
}

.btn-event-view {
    background-color: #00cc51;
    border: 1px solid #06b54b;
    border-radius: 10px;
    color: white;
}

.btn-event-view:hover {
    background-color: #ebfaf1;
    border: 1px solid #06b54b;
    border-radius: 10px;
    color: #00cc51;
}

.btn-event-pay {
    background-color: rgba(2, 182, 179, 0.12);
    border: 1px solid #15a799;
    border-radius: 10px;
    color: #1db9aa;
}

.btn-event-pay:hover {
    background-color: #1db9aa;
    border: 1px solid #1db9aa;
    border-radius: 10px;
    color: white;
}

.event-lebel-center {
    align-items: center;
    display: flex;
}


.status_not_actual {
    background-color: rgb(221 188 42 / 45%) !important;
    color: #644503 !important;
}

.status_process {
    background-color: rgb(10 146 3) !important;
    color: #ffffff !important;
}

.status_planned {
    background-color: rgb(0 184 224) !important;
    color: #ffffff !important;
}

.status_finished {
    background-color: #444DAA !important;
    color: #ffffff !important;
}

.status_unknown {
    background-color: rgb(201 205 205 / 25%) !important;
    color: #959a9a !important;
}

.event-item:hover {
    box-shadow: 0 0 13px rgb(0 0 0 / 30%);
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
}

.event-lesson-order-number {
    color: #1e88e5;
    background-color: rgb(68 77 170 / 12%);
    border: 3px solid #1e88e5;
    border-radius: 50%;
    display: flex
;
    justify-content: center;
    align-items: center;
    margin: 0 auto 15px;
    font-size: 11px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
}

.event-lesson-finished {
    color: #444daa;
    background-color: rgb(68 77 170 / 12%);
    border: 3px solid #444daa;
}

.event-lesson-process {
    color: rgb(10 146 3) !important;
    background-color: rgb(10 146 3 / 12%);
    border: 3px solid rgb(10 146 3);;
}
.event-lesson-planned {
    color: rgb(0 184 224);
    background-color: rgb(0 184 224 / 12%);
    border: 3px solid rgb(0 184 224);
}

.event-lesson-unknown {
    color: #6c757d;
    background-color: rgb(0 184 224 / 12%);
    border: 3px solid #6c757d;
}

.event-lesson-not_actual {
    color: #6c757d;
    background-color: rgb(0 184 224 / 12%);
    border: 3px solid #6c757d;
}

.event-lesson-status {
    justify-content: center;
    align-items: center;
    margin: 0 auto 15px;
    font-size: 11px;
    border-radius: 10%;
}