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

@black: #000;
@grey-002: gray;

@black: #4A4A4A;
@orange: #F55D3E;
@orangeTransparent: #F55D3Ed9;
@greenBlue: #0D7488;
@greenBlueTransparent: #0d7488d9;
@lightGray: #EDEDED;
@gray: #C7C7C7;

/*@media (min-width: 1200px) {
    .modal-lg, .modal-xl {
        max-width: 1100px;
    }
}*/
.modal {
    color: @black;
    p {
        font-size: 1em;
    }
    .modal-content {
        border: none;
    }
    .modal-header {
        padding: 0;
        border-bottom: none;
        position: relative;
        height: 0;
        .btn-close {
            position: absolute;
            top: -26px;
            right: -26px;
            border-radius: 54px;
            line-height: 1;
            border: none;
            font-size: 1em;
            width: 54px;
            height: 54px;
            z-index: 1;
        }
    }
	.modal-body {
		/*.modal-date {
			&.event-header-date {
				position: absolute;
				top: 1rem;
				right: -24px;
				height: 4rem;
				font-size: 2em;
				background: @blue;
				padding: 0.5rem 1rem;
				color: white;
				&:after {
					content: '';
					display: block;
					position: absolute;
					width: 24px;
					height: 24px;
					bottom: -24px;
					right: 0;
					border-bottom: 12px transparent solid;
					border-right: 12px transparent solid;
					border-left: 12px #004570 solid;
					border-top: 12px #004570 solid;
				}
			}
		}*/
        border-radius: 8px; 
        padding: 2.5rem;
        display: flex;
        flex-direction: column;
        .btn-close {
            position: absolute;
            top: -16px;
            right: -5px;
            padding: 16px;
            opacity: 1;
        }
        .event-title {
            color: @greenBlue;
            font-size: 2.25em;
            margin-bottom: 1rem;
        }
        .event-header-date {
            color: @grey-002;
            display: none;
        }
        .event-date, .event-address {
            font-size: 1.25em;
            font-weight: 700;
            color: @orange;
            margin-bottom: 0;
        }
        .event-address {
            margin-bottom: 1rem;
        }
        .left {
            padding: 2.5rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
			.event-title {
				font-weight: 400;
                margin-bottom: 0.5rem;
                line-height: 1;
			}
			.event-date, .event-address {
				font-size: 1.2em;
			}
            .event-ages {
                display: none;
            }
			.event-description {
/*				margin-top: 0.8rem;*/
			}
		}
        .event-image {
            background-size: cover;
            background-position: center;
            width: 100%;
            height: auto;
            min-height: 500px;
            margin-top: -1px;
            margin-bottom: -1px;
            border-top-right-radius: 6px;
            border-bottom-right-radius: 6px;
        }
	}
    .modal-footer {
        .btn-event {
            display: inline-flex;
        }
    }
}

.modal-footer .btn-group {
    gap: 1rem;
    .event-registration .btn {
        border-radius: 0;
    }
}

@media only screen and (max-width: 1199px) {
    .modal .modal-body .left .event-title {
        font-size: 1.5rem;
    }
}
@media only screen and (max-width: 991px) {
    .modal .modal-body .event-image {
        display: none;
    }
    .modal-footer .btn-group {
        gap: 0.5rem;
        flex-direction: column;
        align-items: center;
        width: 100%;
        .event-registration {
            width: 100%;
        }
        .btn {
            width: 100%;
            border-top-left-radius: 25px !important;
            border-top-right-radius: 25px !important;
            border-bottom-left-radius: 25px !important;
            border-bottom-right-radius: 25px !important;
        }
    }
}
@media only screen and (max-width: 425px) {
	.modal {
		.modal-body {
			/*.modal-date.event-header-date {
				font-size: 1.2em;
				right: -8px;
				height: 2.4rem;
				line-height: 1;
				&:after {
					width: 8px;
					height: 8px;
					bottom: -8px;
					border-width: 4px;
				}
			}
			.btn-close {
				font-size: 1em;
			}*/
			.modal-padding {
				.event-title {
					font-size: 1.2em;
				}
				.event-date, .event-address {
					font-size: 1em;
				}
				.event-description {
					font-size: 0.9em;
				}
			}
		}
	}
}