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

@black: #000;

/*@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: 0 15px;
        display: flex;
        flex-direction: column;
        .btn-close {
            margin-left: auto;
            margin-right: -1rem;
        }
        .event-header-date {
            color: @grey-002;
            display: none;
        }
        .event-date {
            font-size: 0.8em;
            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;
        }
        .session-info {
            display: flex;
            justify-content: space-between;
        }
	}
    .modal-footer {
        .btn-event {
            display: inline-flex;
        }
    }
}

@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;
    }
}
@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;
				}
			}
		}
	}
}