/* Define the font-family for the website */
@font-face {
    font-family: BoldMondriaan;
    src: url(/fonts/FilsonPro-Bold.woff2);
}
@font-face {
    font-family: outlinedBold;
    src: url(/fonts/11S0BLTO.TTF);
}

:root {
    --rocm-blue: #293586;
    --rocm-red: #650c16;
    --rocm-orange: #b27709;
    --rocm-yellow: #f09904
}

.bg-orange {
    background-color: var( --rocm-yellow);
}

.footer {
    text-align: center;
    padding: 3px;
    background-color: DarkSalmon;
    color: white;
}
.downloadFile{
    color: blueviolet;
    text-decoration: underline;
}
.downloadFile:hover{
    color:red;
}

/*nav bar*/
img.aboutimg {
    object-fit: scale-down;
}

.container-nav-bar {
    display: -webkit-box;
    display: flex;
    justify-content: space-around;
    -webkit-box-align: center;
    align-items: center;
    background: #111;
    /*margin: 25px 0; Removed for optimalisation */
    box-shadow: 0 5px 15px -10px #111;
}
.navbar-center{
    display: flex;
    justify-content: center;
    background-color: #111 ;

}

.item {
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    padding: 5px;
    font-size: larger;
}
.item:hover{
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}
.item:nth-of-type(n+4) {
    -webkit-box-ordinal-group: 3;
    order: 2;
}
@media all and (max-width: 800px) {
    .container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-align: stretch;
        align-items: stretch;
    }



    .item {
        text-align: center;
        border-bottom: 1px solid #111;
    }
}


* {
    box-sizing: border-box;
}

.middle {
    margin: 20px auto;
}

.trash-can.tiny {
    transform: scale(1.7);
    transition: 2s;

}

.trash-can {
    box-sizing: border-box;
    width: 17px;
    height: 19px;
    position: relative;
    cursor: pointer;
}

.top {
    height: 3px;
    width: 100%;
    position: relative;
    top: -1px;

    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}

.top .handle {
    width: 11px;
    height: 6px;
    margin: 0 auto;
    position: relative;
    left: 0px;
    border-radius: 50% 50%;
    border: 2px solid #373d87;
}

.top .handle:after {
    content: "";
    display: block;
    width: 65%;
    height: 50%;
    position: relative;
    top: 25%;
    left: 17.5%;
    border-radius: 50% 50%;
    background: #FFF;
}

.top .base {
    height: 2px;
    position: relative;
    bottom: 2px;
    background: #373d87;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.body {
    width: 13px;
    height: 16px;
    position: relative;
    margin: 0 auto;
    border: 2px solid #373d87;
    background: #FFF;
}

.body .line {
    background: #373d87;
    position: absolute;
    height: 10px;
    width: 1px;
    left: 1px;
    top: 1px;
}

.body .line.second {
    left: 3.5px;
}

.body .line.third {
    left: 7px;
}


.trash-can:hover .top {
    transform: rotate(50deg) skew(0deg) translate(2px, -7px);
    transition: 1.46s;
}


.bounce {
    -webkit-animation-name: bounce;
    -moz-animation-name: bounce;
    -o-animation-name: bounce;
    animation-name: bounce;

    -webkit-animation-duration: 3s;
    -moz-animation-duration: 3s;
    -o-animation-duration: 3s;
    animation-duration: 3s;
}

@-webkit-keyframes bounce {
    0% {
        transform:translateX(0%) scale(2);
    }

    100% {
        transform:translateX(0%) scale(1);
        opacity: 0.5;
    }
}

.requests {
    color: #ac1424;
}
.enrollTableHeader{
    color: white;
}
/* Style the profile image */
img.profile_img{
    width: 350px;
    object-fit: scale-down;
}

/*Style for profile image on laptop screen*/
@media only screen and (min-width: 992px)
{
    img.profile_img {
        width: 100%;
    }
}

.opleidingtype{
    color: #ac1424;
    font-size: large;
}

/* Style the slider container */
.slider {
    width: 500px;
    height: 300px;
    background-color: yellow;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    text-align: center;
    overflow: hidden;
}

/* Style the container for the images in the slider */
.image-container {
    width: 1500px;
    background-color: pink;
    height: 300px;
    clear: both;
    position: relative;
    -webkit-transition: left 2s;
    -moz-transition: left 2s;
    -o-transition: left 2s;
    transition: left 2s;
}

/* Style individual slides */
.slide {
    float: left;
    margin: 0px;
    padding: 0px;
    position: relative;
}

/* Style the first slide when it is selected */
#slide-1:target ~ .image-container {
    left: 0px;
}

/* Style the second slide when it is selected */
#slide-2:target ~ .image-container {
    left: -500px;
}

/* Style the third slide when it is selected */
#slide-3:target ~ .image-container {
    left: -1000px;
}
/*
The .buttons class styles the container for the slide buttons.
It positions the buttons relatively and moves them up by 20px.
*/
.buttons {
    position: relative;
    top: -20px;
}

/*
The .buttons a class styles the individual slide buttons.
It displays the buttons as inline blocks, sets their dimensions,
and applies a border-radius and background color.
*/
.buttons a {
    display: inline-block;
    height: 15px;
    width: 15px;
    border-radius: 50px;
    background-color: lightgreen;
}

/*
The input#registration_form_agreeTerms.form-check-input class styles the "agree to terms" checkbox.
It positions the element relatively, moves it 45% of the view width to the left, and scales it up by 1.45.
*/
input#registration_form_agreeTerms.form-check-input{
    position: relative;
    left: 45vw;
    transform: scale(1.45);
}

/*
The .klik-hier class styles the "click here" link.
It applies a text-decoration of underline.
*/
.klik-hier {
    text-decoration: underline;
}

/*
The body class resets the default margins on the body element.
*/
body {margin: 0;}

/*
The ul class styles unordered lists.
It removes the default list-style.
*/
ul{
    list-style-type: none;
}

/*
The ul.topnav class styles the navigation menu.
It removes the default list-style, sets the margin and padding to 0,
hides any overflow, and sets the background color to #333 (dark grey).
*/
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

/* Style the top navigation */
ul.topnav li {
    float: left;  /* Float the list items to the left */
}

/* Style the links inside the navigation */
ul.topnav li a {
    display: block;  /* Display the links as blocks */
    color: white;  /* Make the text white */
    text-align: center;  /* Center the text */
    padding: 14px 16px;  /* Add some padding */
    text-decoration: none;  /* Remove the default text decoration */
    list-style-type: none;  /* Remove the default list style */
}

/* Change the background color on hover */
ul.topnav li a:hover:not(.active) {
    background-color: #111;  /* Dark gray background color */
}

/* Style the active link */
ul.topnav li a.active {
    background-color: #04AA6D;  /* Green background color */
}

/* Float the "right" list items to the right */
ul.topnav li.right {
    float: right;
}

/* Make the navigation responsive on smaller screens */
@media screen and (max-width: 600px) {
    /* Make the "right" list items float to the left */
    ul.topnav li.right,
    ul.topnav li {
        float: none;
    }
}

/* Style the horizontal rule */
hr {
    color: #1a191a;  /* Dark gray color */
}

/* Style the login section */
.login-forum {
    min-height: 10vh;  /* Set the minimum height to 10% of the viewport height */
}

/* Style the active link */
.active {
    text-decoration: underline;  /* Underline the active link */
    color: rgb(33, 37, 41);  /* Dark gray color */
}

/* Style the event description section */
.eventdesc {
    background-color: #ac1424;  /* Red background color */
}

/* Style the event description textarea */
textarea#event_form_description.form-control {
    height: 30vh;  /* Set the height to 30% of the viewport height */
}

/* Style the table cells */
td {
    border: 3px solid black;  /* Add a black border */
    background-color: white;  /* Set the background color to white */
}

/* Style the event table */
.event-table {
    border: 3px solid black;  /* Add a black border */
}

/* Style the table headers */
th {
    background-color: #373d87;  /* Dark blue background color */
    color: black;  /* Black text color */
}

/* Style the "remove" button */
.gg-remove {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(1.7);  /* Increase the size of the button */
    width: 30px;
    height: 30px;
    border: 2px solid;  /* Add a border */
    border-radius: 30px;  /* Round the corners */
    background-color: red;  /* Red background color */
}

/* Style the "remove" button's icon */
.gg-remove::before {
    content: "";  /* Add content */
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 10px;
    height: 2px;
    background: currentColor;  /* Use the current text color */
    border-radius: 5px;  /* Round the corners */
    top: 12px;  /* Position the icon in the center */
    left: 7.5px;
}

/* Style the jumbotron */
.jumbotron {
    position: static;  /* Remove the position property */
    max-height: 300px;  /* Set the maximum height to 300px */
    object-fit: cover;  /* Scale the image to cover the jumbotron */
    width: 100vw;  /* Set the width to 100% of the viewport width */
}

/* Style the hyperlinks */
.hyperlink {
    color: #1a191a;  /* Dark gray color */
    font-size: small;  /* Smaller font size */
}

/* Change the hyperlink style on hover */
.hyperlink:hover {
    text-decoration: none;  /* Underline the text */
    color: #1a191a;  /* Dark gray color */
}

/* Style the body */
body {
    background: linear-gradient(to right, #ac1424 50%, #2d3584 50%);  /* Add a gradient background */
    background-repeat: no-repeat;  /* Don't repeat the gradient */
    background-attachment: fixed;  /* Fix the background in place */
    background-size: cover;  /* Scale the background to cover the entire element */
    color: #1a191a;  /* Dark gray text color */
    font-family: BoldMondriaan;  /* Use the BoldMondriaan font family */
}

/* Style the labels */
label {
    text-decoration: underline;  /* Underline the text */
}
.card-title{
    text-decoration: underline;
}

.large-input {
    width: 400px; /* Adjust the width as needed */
    padding: 10px; /* Optional: Add some padding for better appearance */
}

form{
    display: inline-block;
}
.buttondiv1:hover{
    background-color: #293586;
}
.buttondiv2:hover{
    background-color: #650c16;
}
.buttondiv3:hover{
    background-color: #b27709;
}
/* Style the top image in the cards */
.card-img-top {
    border-radius: inherit;  /* Inherit the border radius from the parent element */
    margin-top: -20px;  /* Move the image up by 20px */
    object-fit: scale-down;  /* Scale the image down if it is larger than the container */
    max-height: 200px;  /* Set the maximum height to 200px */
}



/* Style the grid container */
#grid {
    display: grid;  /* Enable grid layout */
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    grid-gap: 2vw;  /* Add a gap between the grid items */
    background-color: #f09904;  /* Add a background color */
    width: 80vw;  /* Set the width to 80% of the viewport width */
    justify-content: center;  /* Center the items horizontally */
    align-self: center;  /* Center the container vertically */
    margin-left: 9vw;  /* Add a left margin of 9% of the viewport width */
    margin-right: 9vw;  /* Add a right margin of 9% of the viewport width */
    border: 3vw solid #f09904;  /* Add a border with a width of 3% of the viewport width */
}



/* Style the grid items */
#grid > div {
    font-size: 30px;  /* Set the font size to 30px */
    padding: .5em;  /* Add padding */
    color: #ffffff;  /* Make the text white */
    background: #b9dcff;  /* Light blue background color */
    text-align: center;  /* Center the text */
    box-shadow: 2px 2px 2px #1a191a;  /* Add a shadow to the element */
    border-radius: 0px;  /* Inherit the border radius from the parent element */
}

.about-text {
    width: 80vw;
    margin-left: 9vw;  /* Add a left margin of 10% of the viewport width */
    margin-right: 9vw;  /* Add a right margin of 10% of the viewport width */
    text-align: center;  /* Center the text */
    border: 2vw solid #f09904;  /* Add a border with a width of 2% of the viewport width */
    background-color: #f09904
}

.basic-orange-div {
    width: 80vw;
    margin-left: 9vw;  /* Add a left margin of 10% of the viewport width */
    margin-right: 9vw;  /* Add a right margin of 10% of the viewport width */
    border: 2vw solid #f09904;  /* Add a border with a width of 2% of the viewport width */
    background-color: #f09904
}

/* Style the event images */
.event-img {
    width: 80vh;  /* Set the width to 80% of the viewport height */
    height: auto;  /* Set the height to automatically adjust to the image aspect ratio */
    box-shadow: 8px 12px 8px rgb(82, 80, 80);  /* Add a shadow to the element */
}

/* Style the submit button */
.submitButton {
    background-color: #1a191a;  /* Dark gray background color */
}

/* Style the form group */
.form-group {
    background-color: #f09904;  /* Orange background color */
    margin-left: 15vw;  /* Add a left margin of 15% of the viewport width */
    margin-right: 15vw;  /* Add a right margin of 15% of the viewport width */
    text-align: center;  /* Center the text */
}

/* Change the grid item style on hover */
#grid > div:hover {
    transform-origin: center;  /* Transform the element around its center */
    transform: scale(1.1);  /* Increase the size of the element */
    transition: 1.5s;  /* Add a transition effect */
    border-radius: 45px;
}

/* Style the "enroll" button */
.enroll-button {
    box-shadow: 4px 2px 2px;  /* Add a shadow to the element */
}

/* Change the "enroll" button style on hover */
.enroll-button:hover {
    color: #ac1424;  /* Red text color */
}

/* Change the style of the links on hover */
a:hover {
    color: white;  /* Make the text white */
    text-decoration: none;
}

/* Style the login section */
.login {
    margin: 7vh;  /* Add a top and bottom margin of 7% of the viewport height */
}

/* Hide the slides by default */
.mySlides {
    display: none;
}

/* Style the card body */
.card-body {
    block-size: max-content;  /* Set the block size to the maximum content size */
}

/* Style the headings */
h1 {
    color: #1a191a;  /* Dark gray color */
    font-size: xx-large;  /* Large font size */
}
h3 {
    font-size: large;  /* Large font size */
    color: #1a191a;  /* Dark gray color */
}
/* Style the headings */
h5 {
    color: #8c8c91;  /* Light gray color */
}

/* Style the login labels */
.login-label {
    font-size: larger;  /* Increase the font size */
}

/* Style the "enroll" button */
.enroll-button {
    color: black;  /* Black text color */
    padding: 5px;  /* Add padding */
    border: 3px solid black;  /* Add a black border */
}

/* Style the slider */
.slider {
    margin-top: 60px;  /* Add a top margin of 60px */
    transform: scale(1.4);  /* Increase the size of the element */
}

/* Style the slides */
img.slide {
    object-fit: scale-down;  /* Scale the image down if it is larger than the container */
    background-color: #f09904;  /* Orange background color */
}

/* Style the "more info" links */
.moreinfolinks {
    color: black;  /* Black text color */
}

/* Change the "more info" link style on hover */
.moreinfolinks:hover {
    color: black;  /* Black text color */
    text-decoration: none;  /* Underline the text */
}

/* Style the about text section */


/* Style the links */
a {
    color: white;  /* Make the text white */
    text-decoration: none}

/* Style the login section */
::content
.Login {
    margin-left: -70px;  /* Add a left margin of -70px */
    background-color: #f09904;  /* Orange background color */
    height: 100vh;  /* Set the height to 100% of the viewport height */
    width: 80vw;  /* Set the width to 80% of the viewport width */
}

/* Style the image border */
.image-border {
    height: 200px;  /* Set the height to 200px */
    background: #b9dcff;  /* Light blue background color */
}

/* Style the paragraphs */
p {
    font-size: large;  /* Large font size */
    color: #1a191a;  /* Dark gray color */
}

/* Style the "add events" button */
button.addeventsbtn {
    width: 80vw;  /* Set the width to 80% of the viewport width */
    margin-left: -3vw;  /* Add a left margin of -3% of the viewport width */
    background-color: #b9dcff;  /* Light blue background color */
    font-size: xx-large;  /* Very large font size */
}

/* Change the "add events" button style on hover */
button.addeventsbtn:hover {
    text-decoration: none;  /* Underline the text */
    transform: scale(1.05);  /* Increase the size of the element */
}

/* Style the grid for viewports with a width between 320px and 480px */
@media (min-width: 320px) and (max-width: 480px) {
    #grid {
        grid-template-columns: repeat(1, 1fr);  /* Set the grid to have 1 column */
    }
}

/* Style the grid for viewports with a width between 481px and 768px */
@media (min-width:481px) and (max-width:768px) {
    #grid {
        grid-template-columns: repeat(2, 1fr);  /* Set the grid to have 2 columns */
    }
}

/* Style the form group for viewports with a width up to 800px */
@media(max-width: 800px) {
    .form-group {
        background-color: #f09904;  /* Orange background color */
        margin-left: 0vw;  /* Remove the left margin */
        margin-right: 0vw;  /* Remove the right margin */
        text-align: center;  /* Center the text */
        margin-bottom: 0vw;  /* Remove the bottom margin */
    }
    .btn {
        margin: 10%;  /* Add a top and bottom margin of 10% */
    }
}
.buttondiv1 {
    background-color: #2d3584;
    color: white;
    font-size: 16px;
    border: 1px solid black;
    border-radius: 10%;
}
.buttondiv2{
    background-color: #ac1424 ;
    color: white;
    font-size: 16px;
    border: 1px solid black;
    border-radius: 10%;
}
.pastevents{
    transform: scale(1.3);
    background-color: #2d3584;
    color: white;
    font-size: 16px;
    border: 1px solid black;
    border-radius: 10%;
}
.buttondiv3{
    background-color: #f09904;
    color: white;
    font-size: 16px;
    border: 1px solid black;
    border-radius: 10%;
}
.inlogbutton{
    transform: scale(1.3);
    background-color: #2d3584;
    color: white;
    font-size: 16px;
    border: 1px solid black;
    border-radius: 10%;
}

.inlogbutton:hover {
    background-color: #1d2252;
}

.buttondiv:hover {
    background-color: darkblue;
}

div.alert {
    text-align: center;
}

.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}
.outlineBold{
    font-size: xxx-large;
}
.active, .accordion:hover {
    background-color: #ccc;
}

.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
}

.accepted {
    background-color: green;
}



.text-right { text-align: right; }
.text-left { text-align: left; }
.hidden { display: none; }
.card:hover .hover-me, .hover-me:hover { text-decoration: underline; }
.text-rocm-red { color: var(--rocm-red); }
.text-rocm-blue { color: var(--rocm-blue); }
.text-rocm-yellow { color: var(--rocm-orange); }
.rocm-btn-sm { font-size: 12px;}