/*@import (less) "../../../../application/webroot/css/less/init.less";*/

@main-color: #628038;
@second-color: #453e2e;
@dark-gray: #666666;
@light-gray: #E6E6E6;

section {
    padding-top: 0;
}
.btn-primary, .btn {
    background-color: @main-color;
    color: white;
    i {
        color: white;
    }
    &:hover {
        color: white;
        background-color: @second-color;
    }
}
.btn-danger {
    background-color: #dc3545;
    &:hover {
        background-color: #c82333;
    }
}
.btn-primary.disabled, .btn-primary:disabled {
    visibility: hidden;
}
.btn-primary.focus, .btn-primary:focus {
    box-shadow: none;
}
.buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#calendar-mode {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
    a, .btn { 
        &:hover {
            background-color: @main-color;
        }
        &.inactive {
/*            color: @main-color;*/
/*            background-color: transparent; */
            &:hover {
                color: white;
                background-color: @second-color;
                i {
                    color: white;
                }
            }
        }
    }
}
#calendar-view {
    border-top-right-radius: unset;
    border-bottom-right-radius: unset;
    padding-right: 16px;
}
#list-view {
    border-top-left-radius: unset;
    border-bottom-left-radius: unset;
    padding-left: 16px;
}
/*upcoming events*/
#mode_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid @light-gray;
    #calendar-mode {
        margin-bottom: 0;
    }
}
.resultRow {
    display: flex;
    gap: 2.5rem;
    padding: 1.75rem;
    background-color: @dark-gray;
    &:not(:last-child) {
        margin-bottom: 1rem;
    }
    .result-date {
        display: flex;
        flex-direction: column;
        align-self: flex-start;
        min-width: 190px;
        background-color: white;
        color: @main-color;
        font-weight: 600;
        line-height: 1;
        padding: 2rem;
        .year {
            font-size: 2.5em;
/*            margin-bottom: -20px;*/
        }
        .month {
            font-size: 3.1em;
            text-transform: uppercase;
        }
        .date {
            font-size: 6.2em;
            margin-bottom: -20px;
        }
    }
    &, .result-date {
        border-radius: 10px;
    }
    .result-details {
        display: flex;
        flex-direction: column;
        width: 100%;
/*        gap: 1rem;*/
        .section-title {
            line-height: 1;
            margin-bottom: 1rem;
        }
        /*.event-type {
            display: flex;
            gap: 0.5rem;
        }*/
        .event-desc {
            position: relative;
            .btn-green {
                position: absolute;
                top: -24px;
                right: 0;
                padding-top: 3px;
                padding-bottom: 2px;
                display: none;
                &.active {
                    display: block;
                }
            }
            p {
                margin-bottom: 0;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                &:not(:first-of-type) {
                    display: none;
                }
            }
            &.show {
                p {
                    -webkit-line-clamp: unset;
                    &:not(:first-of-type) {
                        display: -webkit-box;
                    }
                }
            }
        }
    }
}
@media only screen and (max-width: 991px) {
    .resultRow {
        padding: 1rem;
        gap: 1rem;
        .result-details {
            .section-title {
                font-size: 1.4em;
            }
        }
        .result-date {
            padding: 1rem;
            min-width: 150px;
        }
    }
}
@media only screen and (max-width: 767px) {
    #mode_wrapper {
        #calendar-mode {
            display: none;
        }
    }
    .resultRow {
        flex-direction: column;
        gap: 0.5rem;
        .result-date {
            flex-direction: row;
            gap: 0.5rem;
            padding: 0.7rem 0.5rem 0.5rem;
            .year, .month, .date {
                font-size: 2em;
                line-height: 0.5;
            }
        }
        .result-details {
            .section-title {
                font-size: 1.2em;
                margin-bottom: 0.5rem;
            }
            a {
                word-break: break-all;
            }
            .event-desc p {
                -webkit-line-clamp: 1;
            }
        }
    }
}
/*new events style*/
#registration {
    hr {
        border-color: @dark-gray;
        margin: 0.5rem 0;
    }
    select {
        margin-bottom: 0;
    }
    .btn-back {
        margin-bottom: 2rem;
    }
    .event-info-wrapper {
        margin-top: 2rem;
    }
    .event-info {
        span {
            color: @main-color;
        }
        &:last-child {
            display: flex;
            gap: 4px;
        }
    }
    #checkout-button {
        width: 100%;
        border: 1px solid @main-color;
    }
    .event-format {
        margin-bottom: 0.5rem;
    }
    .session-title {
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
        font-weight: bold;
    }
    .session-description {
        margin-bottom: 1rem;
    }
    .event-datetime {
        display: flex;
        gap: 1rem;
        > div {
            display: flex;
            gap: 0.5rem;
            align-items: center;
            background-color: @light-gray;
            padding: 5px 13px;
            border-radius: 5px;
            i {
                color: @main-color;
            }
        }
    }
    .event-option-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        .event-option-right-wrapper {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 5rem;
        }
    }
    .buttons {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 1rem;
    }
    .inactive-link {
        pointer-events: none;
        cursor: default;
        background-color: @dark-gray;
    }
    .invalid {
        cursor: not-allowed;
        a {
            pointer-events: none;
            color: @light-gray;
        }
    }
    input:not([type="submit"]), select {
        padding: 4px 12px;
        border: none;
        border-radius: 5px;
        background-color: @light-gray;
    }
    #powered {
        text-align: center;
    }
}
#attendee_questions, .container-wrapper {
    h2 span {
        font-size: 0.8em;
    }
    .price-type {
        font-size: 0.9em;
        span {
            color: @main-color;
        }
    }
    .group-name {
        text-transform: uppercase;
    }
    .question-wrapper {
        background-color: @light-gray;
        padding: 1rem 1.5rem;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 1rem;
        .question-title {
            color: @main-color;
        }
    }
    input:not([type="submit"],[type="radio"]), select, textarea {
        width: 100%;
        padding: 3px 1.2rem;
        border-radius: 5px;
        margin-bottom: 0.75rem;
        border: none;
        &[readonly] {
            background-color: @light-gray;
            border: 1px solid @dark-gray;
            opacity:  0.5;
        }
    }
    .radios-wrapper {
        display: flex;
        align-items: center;
        gap: 2rem;
    }
    .radio-wrapper {
        display: flex;
        align-items: center;
        gap: 1rem;
        label {
            margin-bottom: 0;
        }
    }
    .selection {
        display: flex;
        align-items: center;
        label {
            min-width: 120px;
            margin-right: 1rem;
        }
    }
}
.order-review-wrapper {
    background-color: @light-gray;
    padding: 1rem 1.5rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}
form[name="Checkout"] {
    textarea {
        width: 100%;
    }
}
#additional_information {
    min-height: 51vh
}
.ticket__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#cart_summary {
    min-height: ~'calc(100vh - 453px)';
    padding-top: 5rem;
}
#customer_details {
    .invalid {
        cursor: not-allowed;
        pointer-events: none;
        background-color: @light-gray;
        color: @dark-gray;
    }
}
.no-banner section {
    min-height: ~'calc(100vh - 453px)';
}
/*package*/
.package-info div {
    margin-top: -0.8rem;
    color: @light-gray;
}
.event-title {
    font-size: 1.5em;
    font-weight: bold;
}
.agree-wrapper {
    display: flex;
    align-items: center;
    input:not([type="hidden"]) {
        width: auto;
        margin-right: 1rem;
    }
}
#page-content {
    min-height: ~'calc(100vh - 453px)';
}
#cart .input-group-append {
    margin-left: auto;
}
#upcoming-events {
    .date {
        font-weight: 700;
    }
    .description, .session-description {
        margin-bottom: 1rem;
        &.ellipsis {
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box !important;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: normal;
        }
    }
}
.order-summary .cancel-order {
    margin-left: 0.5rem;
}

.session-info {
    display: flex;
    justify-content: space-between;
    .date {
        font-weight: 700;
    }
}
.event-address-name {
/*    font-weight: bold;*/
}
.event-address, .event-venue {
    margin-bottom: 0.5rem;
}
.event-free {
    color: rgb(90,20,0);
    text-transform: uppercase;
}

/* event filter in calendar */
#upcoming-events {
    position: relative;
}
#filterToggle {
    position: absolute;
    top: 0;
}
#search-wrapper {
    padding: 1rem;
    border: 1px solid #70707040;
    margin-bottom: 1rem;
    display: none;
    .row > div {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 1rem;
        margin-bottom: 1rem;
        label {
            margin-bottom: 0;
            flex-shrink: 0;
        }
        input, select {
            padding: 0.5rem 1rem;
            height: 36px;
            width: 100%;
        }
    }
    .filter-buttons {
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
    }
}