/* 
 Theme Name:   Registrationtheme
 Theme URI:    
 Description:  theme for registrations
 Author:       nathan.demoleucore
 Author URI:   https://aanmeldingen.eucore.be
 Template:     twentytwentyfour
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

 /* == Add your own styles below this line ==
--------------------------------------------*/

/* GLOBAL */
html, body {
  touch-action: manipulation;
  -ms-touch-action: manipulation;
  overscroll-behavior: none;
}
body {
    margin: 0 !important;
	background-color: ghostwhite !important;
}
:where(.wp-site-blocks) > *, :where(body .is-layout-flow) > *, :where(body .is-layout-constrained) > * {
	margin-block-start: 0;
}
:where(.wp-site-blocks *:focus) {
    outline-width: unset;
    outline-style: unset;
}
a:where(:not(.wp-element-button)) {
	text-decoration: none;
}
body .is-layout-flex {
	display: block !important;
}
header, footer, .wp-block-post-title, main > div:first-child {
	display: none;
}
.has-global-padding {
  padding-right: unset;
  padding-left: unset;
}
body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: unset;
    margin-left: auto !important;
    margin-right: auto !important;
}
:root :where(.is-layout-constrained) > *, :root :where(.is-layout-flow) > * {
	margin-block-start: 0;
}

/* HOME */
.home-content-group {
	position: relative;
}
.home-welkom-group {
	position: absolute;
	width: 50vw;
	height: 50vh;
    background: ghostwhite;
}
.home-welkom-group > h2 {
	position: absolute;
	display: block;
    width: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 5rem;
}
.welkom {
	top: 20vh;
    left: 19vw;
	color: #28282b;
}
.bienvenue {
	top: 30vh;
    left: 24vw;
	color: #606066;
}
.welcome {
	top: 40vh;
    left: 29vw;
	color: #9797a0;
}
.home-logo-group {
	position: absolute;
    left: 0;
    top: 49vh;
    height: 50vh;
    background: ghostwhite;
}
.home-language-group {
	position: absolute;
	right: 0;
	top: 0;
	height: 100vh;
}
.home-language-group > .wp-block-cover {
	min-height: 100vh;
}
.home-logo-group, .home-language-group {
    display: inline-block;
    width: 50vw;
}
.home-logo-group > figure {
	display: inline-block;
	position: relative;
    width: 24%;
	height: 49vh;
}
.home-logo-group > figure > img {
	position: absolute;
	display: block;
    width: 50%;
    height: auto;
    margin: 0 auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.home-logo-group > .eucore-logo > img {
    width: 65%;
}
.home-language-button-group > .home-language-button > div {
    display: block;
    margin: 3rem auto;
    width: 50%;
    text-align: center;
}
.home-language-button-group > .home-language-button > div > a {
    width: 100%;
    font-size: 2rem;
    padding: 1.3rem 0.8rem;
	background-color: #2c57a6;
    border: 2px solid #f9f9f9;
}
/* Aanmeldopties */
.aanmeld-main-group {
	width: 100vw;
    height: 100vh;
	background: linear-gradient(242deg, #fffaf0, #f8f8ff);
    background-size: 400% 400%;
    -webkit-animation: gradientbackground 46s ease infinite;
    -moz-animation: gradientbackground 46s ease infinite;
    animation: gradientbackground 46s ease infinite;
}
@-webkit-keyframes gradientbackground {
    0%{background-position:0% 83%}
    50%{background-position:100% 18%}
    100%{background-position:0% 83%}
}
@-moz-keyframes gradientbackground {
    0%{background-position:0% 83%}
    50%{background-position:100% 18%}
    100%{background-position:0% 83%}
}
@keyframes gradientbackground {
    0%{background-position:0% 83%}
    50%{background-position:100% 18%}
    100%{background-position:0% 83%}
}
div > .aanmeld-main-group > .aanmelden-title {
	padding-left: 2vw;
	margin-block-start: 2vh;
}
.aanmelden-opties > div > div {
	width: 100%;
    text-align: center;
}
.aanmelden-opties > div > div > a {
    font-size: 1.5rem;
    width: 75% !important;
    padding: 2rem;
    margin-top: 2rem;
	background-color: #2c57a6;
	border: 2px solid #f9f9f9;
}
.aanmelden-opties > .aanmelden-annuleerbtn > div > a {
	background-color: #DC143C;
}
.aanmelden-opties > .aanmelden-afmeldbtn > div > a {
	margin-top: 8rem;
}
/* Regform Persons */
#registration-form {
    width: 60vw;
    margin: 5vh auto;
	border-radius: 10px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	-moz-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#registration-form > h2 {
	margin-block-start: 0;
    margin-block-end: 0;
	text-align: center;
	color: ghostwhite;
	padding: 30px 0px;
    border-radius: 10px 10px 0px 0px;
    background-color: #2c57a6;
}
#registration-form > .registration-form-inner{
	padding: 50px 100px;
}
#registration-form > .registration-form-inner > label, #registration-form > .registration-form-inner > input  {
    display: block;
	font-size: 25px;
	margin-top: 40px;
	margin-left: 20px;
}
#registration-form > .registration-form-inner > input {
	display: block;
	width: 80%;
	margin-top: 10px;
	border: 0px;
	background-color: ghostwhite;
	border-bottom: 2px solid #2c57a6;
}
input[readonly], .hiddenlabel {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
#check-for-privacy, #check-for-safety {
	margin: 0px 20px;
}
#safety-block, #privacy-block {
	display: flex;
	position: relative;
    align-items: baseline;
}
#safety-block {
	margin-top: 50px;
}
#privacy-block {
	margin: 20px 0px 50px 0;
}
.check-for-privacy-text, .check-for-safety-text {
	width: 85%;
}
.check-for-safety-text > a {
	color: #2c57a6;
	text-decoration: underline;
}
#registration-form > .registration-form-inner > input[type="submit"] {
	display: block;
	width: 33%;
	margin: 0 auto;
	background-color: #2c57a6;
	color: ghostwhite;
	padding: 15px 0px;
	border-radius: 10px 0px;
	margin-top: 50px;
}
.cancel-form {
    position: relative;
    font-size: 1.2rem;
    color: ghostwhite;
    border-radius: 0px 10px 0px 10px;
    background-color: #DC143C;
    padding: 9px 20px;
    bottom: -20px;
    left: 95%;
}
.extra-info {
    font-size: 20px;
}
/* Table for admin */
.reg-table-container {
	position: absolute;
    left: 5vw;
}
#registrationtable {
	width: 85vw;
}
#registrationtable > thead > tr > th {
	text-align: center;
	padding: 10px;
	background-color: #28282b;
	color: ghostwhite;
}
#registrationtable > tbody > tr > td {
	padding: 10px 20px;
	border: 1px solid #28282b;
}
#registrationtable > tbody > tr > td:nth-child(11), #registrationtable > tbody > tr > td:nth-child(12) {
	text-align: center;
}
/* Filter Btns */
.filter-buttons {
	text-align: center;
	padding: 20px;
}
.filter-buttons > button {
    font-size: 0.9rem;
    background-color: #2c57a6;
    color: ghostwhite;
    border: 1px solid ghostwhite;
    border-radius: 5px;
    padding: 10px 20px;
	margin: 0px 20px;
}
.filter-buttons > button:hover {
	cursor: pointer;
}
#filter-date-range {
	margin-left: 0;
}
.filter-buttons > input {
    font-size: 0.9rem;
    padding: 7px 20px;
    border-radius: 5px;
}
/* BREAKPOINTS */
@media (max-width: 1400px){
	#registration-form > .registration-form-inner > label, #registration-form > .registration-form-inner > input {
		font-size: 20px;
	}
	.extra-info {
		font-size: 15px;
	}
}
@media (max-width: 1100px){
	.home-welkom-group > h2 {
		font-size: 1.8rem;
	}
	.home-logo-group > figure {
		width: 22%;
	}
	.home-language-button-group > .home-language-button > div > a, .aanmelden-opties > div > div > a {
		font-size: 0.6rem;
	}
	.aanmelden-opties > .aanmelden-afmeldbtn > div > a {
		margin-top: 3rem;
	}
	#registration-form {
		width: 90vw;
	}
	#registration-form > h2 {
		font-size: 1.5rem;
	}
	#registration-form > .registration-form-inner {
		padding: 15px 25px;
	}
	#registration-form > .registration-form-inner > input[type="submit"] {
		width: 35%;
		font-size: 1rem;
	}
	.cancel-form {
		font-size: 0.8rem;
		bottom: 0;
		left: 80%;
	}
}
@media screen and (orientation:portrait) and (max-width: 1100px){
	.home-welkom-group > h2 {
		font-size: 1.8rem;
		transform: translate(-65%, -250%);
	}
	.home-logo-group {
		top: 43vh;
		height: 57vh;
	}
	.home-logo-group > figure {
		width: 100%;
		height: 12vh;
	}
	.home-logo-group > .eucore-logo > img {
		width: 50%
	}
	.home-logo-group > figure >img {
		width: 30%;
	}
	.home-language-button-group > .home-language-button > div > a, .aanmelden-opties > div > div > a {
		font-size: 0.6rem;
	}
	.aanmelden-opties > .aanmelden-afmeldbtn > div > a {
		margin-top: 3rem;
	}
	#registration-form {
		width: 90vw;
	}
	#registration-form > h2 {
		font-size: 1.5rem;
	}
	#registration-form > .registration-form-inner {
		padding: 15px 25px;
	}
	#registration-form > .registration-form-inner > input[type="submit"] {
		width: 35%;
		font-size: 1rem;
	}
	.cancel-form {
		font-size: 0.8rem;
		bottom: 0;
		left: 80%;
	}
}