.flex_layout.training_grid {
}

.flex_layout.training_grid .trainingen_wrapper {
}
.flex_layout.training_grid .content_container {
	padding-left: 2.5rem; position: relative;
	max-width: 800px;
}
.flex_layout.training_grid .content_container::before {
	content: ''; position: absolute; top: 0; left: 0; z-index: 2;
	width: 1rem; height: 45px; background-color: var(--page-bg);
}

.flex_layout.training_grid .content_text {
    margin-bottom: 2rem;
    font-size: 1rem;
    color: #03597e;
}

.flex_layout.training_grid .training-filter {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.flex_layout.training_grid .training-filter select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    font-size: 1rem;
    padding: 1rem;
    border: 1px solid #CDDEE5;
    border-radius: 4px;
    background-color: #fff;
    color: var(--iz-text-primary);
    cursor: pointer;

    width: fit-content;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='5' viewBox='0 0 9 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.63125 0.392822L4.5 3.09694L7.36875 0.392822L8.25 1.22531L4.5 4.76782L0.75 1.22531L1.63125 0.392822Z' fill='%23032D3F'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: calc(100% - 1rem) 50%;
}

.flex_layout.training_grid .grid_wrapper {
    display: flex;
    flex-direction: column;
    border-radius: 1.5rem;
    overflow: hidden;
}

.flex_layout.training_grid .training-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
	gap: 1rem;
    background-color: var(--iz-grey-lightest);
    padding: 1.5rem;
    border-bottom: 4px solid transparent;
}

.flex_layout.training_grid .training-block:nth-child(even) {
    background-color: var(--iz-grey);
}

.flex_layout.training_grid .training-info {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    flex: 1;
    color: #03597e;
    font-size: 1.1rem;
}

.flex_layout.training_grid .training-info div {
	min-width: 170px; font-weight: 500;
}
.flex_layout.training_grid .training-info > div > span {
    font-size: 0.9rem; font-weight: 400;
}


.flex_layout.training_grid .training-info strong {
    font-weight: 600;
    display: block;
    color: #03597e;
    margin-bottom: 0.25rem;
}

/* DIALOG */
.flex_layout.training_grid #trainingPopup {
	max-width: var(--site-grid); color: var(--iz-text-primary);
}
.flex_layout.training_grid #trainingPopup::backdrop {
	background-color: var(--iz-blue-dark); opacity: 0.6;
}
.flex_layout.training_grid #trainingPopup .close-popup {
	background-color: transparent; padding: 0; right: 1.5rem; top: 1.5rem;
}
.flex_layout.training_grid #trainingPopup .close-popup svg {
	max-width: 100%; height: auto;
}
.flex_layout.training_grid #trainingPopup .dialog-wrapper {
	display: flex; flex-wrap: wrap; gap: 2rem 1.25rem;
}
.flex_layout.training_grid #trainingPopup .popup-heading {
	width: 100%;
}
.flex_layout.training_grid #trainingPopup .popup-heading > * {
	max-width: 560px; width: 100%; color: var(--iz-text-primary);
}
.flex_layout.training_grid #trainingPopup .training-data,
.flex_layout.training_grid #trainingPopup .form {
	width: calc(50% - (1.25rem / 2));
}
.flex_layout.training_grid #trainingPopup .training-data {
	display: flex; flex-direction: column; gap: 1.5rem;
}
.flex_layout.training_grid #trainingPopup .training-data .data-title {
	font-size: 1rem; display: block;
}
.flex_layout.training_grid #trainingPopup .training-data .data-value {
	font-size: 22.5px; display: block; font-weight: 500;
}
.flex_layout.training_grid #trainingPopup .training-data .checkbox {
	display: flex; align-items: center; gap: 1rem;
}
.flex_layout.training_grid #trainingPopup .training-data input[type="checkbox"] {
	display: none;
}
.flex_layout.training_grid #trainingPopup .training-data .checkmark {
	width: 1.5rem; height: 1.5rem; background-color: #ffffff; 
	border: 1px solid #82ACBF; display: block; flex-shrink: 0;
}
.flex_layout.training_grid #trainingPopup .training-data input[type="checkbox"]:checked + .checkmark {
	background-color: var(--iz-blue);
}

.flex_layout.training_grid #trainingPopup:not(:has(#signupCheckbox:checked)) .form {
	display: none;
}
.flex_layout.training_grid #trainingPopup .form .gform_required_legend {
	display: none;
}
.flex_layout.training_grid #trainingPopup .form input[type="text"],
.flex_layout.training_grid #trainingPopup .form input[type="email"],
.flex_layout.training_grid #trainingPopup .form textarea {
	background: #ffffff; border: 1px solid #82ACBF; padding: 0.75rem;
}
.flex_layout.training_grid #trainingPopup .form input[type="text"]:focus,
.flex_layout.training_grid #trainingPopup .form input[type="email"]:focus,
.flex_layout.training_grid #trainingPopup .form textarea:focus {
	border-color: var(--iz-blue-dark);
}
.flex_layout.training_grid #trainingPopup .form .gfield label {
	font-weight: 500;
}
.flex_layout.training_grid #trainingPopup .form input[type="submit"] {
	padding: 0.5rem 1rem;
}

@media screen and (max-width: 992px) {
	.flex_layout.training_grid .training-block {
		flex-direction: column; align-items: flex-start;
	}
}
@media screen and (max-width: 767px) {
	.flex_layout.training_grid .training-filter,
	.flex_layout.training_grid .training-info {
		flex-direction: column;
		gap: 0.5rem;
	}
	.flex_layout.training_grid .training-info div {
		width: 100%;
	}
	.flex_layout.training_grid .training-filter select {
		width: 100%;
	}

	.flex_layout.training_grid #trainingPopup .close-popup {
		width: 2rem; height: 2rem; top: 0.25rem; right: 0.25rem;
	}
	.flex_layout.training_grid #trainingPopup .training-data,
	.flex_layout.training_grid #trainingPopup .form {
		width: 100%;
	}
}