.webinar-container {
    background-color: var(--back-color);
    width: 100%;
    margin-top: 10px
}

.webinar-title {
    float: left;
   
    margin: 16px var(--side-padding);
    padding: 4px;
    font-size: 22px;
    text-align: left;
    border-bottom: 2px solid var(--text-color)
}

.webinar-detail {
    float: left;
    width: calc(60% - var(--side-padding) - 16px);
    margin: 4px 16px 4px var(--side-padding);
    padding: 4px;
    list-style-type: none;
    font-size: 16px;
    text-align: left
}

.webinar-detail li {
    float: left;
    width: 100%;
    margin: 4px 0;
    margin-bottom: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    list-style-type: none
}

.webinar-detail li .webinar-detail-title {
    width: 150px
}

.webinar-detail li .webinar-detail-content {
    flex: 1;
    padding: 4px;
    border-bottom: 1px solid var(--text-color)
}

.webinar-training-options {
    float: right;
    position: sticky;
    position: -webkit-sticky;
    top: 50px;
    width: calc(36% - 0px - var(--side-padding));
    margin: 8px var(--side-padding) 8px 4px;
    z-index: 9
}

.webinar-description,
.webinar-speaker {
    float: left;
    width: calc(60% - var(--side-padding) - 16px);
    margin: 4px 16px 4px var(--side-padding);
    pointer-events: none;
    z-index: 5
}

.webinar-description-content,
.webinar-description-title {
    float: left;
    width: 100%;
    margin: 4px 0;
    text-align: initial;
    pointer-events: all
}

.webinar-description-title {
    font-size: 22px;
    padding: 4px 0;
    border: 0;
    border-bottom: 2px solid var(--text-color)
}

.webinar-speaker-info {
    float: left;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start
}

.webinar-speaker-image {
    width: 150px;
    height: 150px;
    margin: 8px;
    border: 4px solid var(--back-color);
    border-radius: 50%;
    box-shadow: var(--box-shadow)
}

.webianr-speaker-meta {
    margin: 40px 8px 8px 8px;
    text-align: left
}

.webinar-training-container {
    float: left;
    width: 100%;
    border: 2px solid var(--gray-light);
    background-color: var(--back-color);
    z-index: 9
}

.webinar-training-container:not(:first-child) {
    margin-top: 16px
}

.webinar-training-container h3 {
    float: left;
    width: 100%;
    text-align: left;
    padding: 8px 16px
}

.webinar-training-container p {
    float: left;
    width: 100%;
    text-align: left;
    padding: 8px 16px
}

.webinar-registration-form a {
    float: left;
    width: calc(100% - 64px);
    margin: 4px 32px;
    padding: 8px;
    border: 1px solid var(--primary)
}

.webinar-registration-form a:hover {
    color: var(--back-color);
    background-color: var(--primary)
}

.webinar-registration-form {
    background-color: var(--back-color);
    z-index: 9
}

.webinar-note {
    color: var(--text-color);
    background-color: var(--yellow-light);
    z-index: 9
}

.webinar-training-option-total,
.webinar-training-price {
    float: left;
    width: 100%;
    padding: 4px 1px;
    text-align: left;
    background-color: var(--back-color);
    border-top: 2px solid var(--gray-light)
}

.webinar-training-price.selected {
    /*background-color: var(--secondary-light);*/
    color: var(--text-color)
}

.webinar-training-price-title {
    float: left;
    width: 100%;
    padding: 4px;
    text-align: left;
    /*border-bottom: 1px solid var(--text-color)*/
}

.webinar-training-selector {
    float: right;
    background-color: transparent;
    color: var(--text-color);
    cursor: pointer
}

.webinar-training-selector:hover {
    color: var(--primary-dark)
}

.webinar-training-price-value {
    float: left;
    width: 100%;
    padding: 4px;
    text-align: right
}

.webinar-training-option-total {
    font-size: 18px
}

.webinar-training-option-total #webinar-total {
    float: right
}

.webinar-training-option-total .has-amount {
    color: var(--primary);
    font-weight: 700
}

.webinar-cart-control {
    float: left;
    width: 100%;
    display: none
}

.webinar-cart-control.show {
    display: flex;
    align-items: center;
    justify-content: center
}

.webinar-training-form {
    z-index: 10
}

.webinar-buy-button {
    float: left;
    padding: 12px;
    margin: 4px;
    height: 44px;
    background-color: var(--primary);
    color: var(--back-color);
    border: 2px solid var(--secondary);
    font: var(--font-size);
    font-weight: 700;
    text-align: left;
    cursor: pointer
}

.webinar-buy-button i {
    color: var(--secondary)
}

.webinar-goto-cart-dropdown-container {
    float: left;
    margin: 4px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start
}

.webinar-goto-cart-dropdown-container .webinar-buy-button {
    margin: 0
}

.webinar-goto-cart-dropdown-container .webinar-dropdown-button {
    background-color: var(--primary);
    border: 2px solid var(--secondary);
    border-left: 0;
    height: 44px;
    color: var(--back-color);
    transition: all .3s;
    padding: 12px
}

.webinar-goto-cart-dropdown-container .webinar-dropdown-button i {
    transform: rotate(0);
    transition: all .3s
}

.webinar-goto-cart-dropdown-container.show .webinar-dropdown-button i {
    transform: rotate(-180deg)
}

.webinar-goto-cart-dropdown-master {
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 5
}

.webinar-goto-cart-dropdown-container .webinar-goto-cart-dropdown-child {
    position: absolute;
    top: 44px;
    width: 100%;
    max-height: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
    transition: all .3s;
    z-index: 2
}

.webinar-goto-cart-dropdown-container.show .webinar-goto-cart-dropdown-child {
    max-height: 100px
}

.webinar-goto-cart-dropdown-child .webinar-buy-button {
    border-top: 0;
    font: var(--font-size);
    font-weight: 700
}

@media screen and (max-width:900px) {

    .webinar-description,
    .webinar-detail,
    .webinar-speaker {
        width: calc(100% - var(--side-padding) - var(--side-padding));
        margin: 4px var(--side-padding)
    }

    .webinar-training-options {
        position: relative;
        float: left;
        top: 0;
        width: calc(100% - var(--side-padding) - var(--side-padding));
        margin: 4px var(--side-padding)
    }
}