/* Dit is een aantekening in CSS. Hier vorm ik de opmaak van de pagina in css.*/

* {
  box-sizing: border-box;
  font-family: robotica MS, robotica, sans-serif !important;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: rgb(251, 251, 251);
}

/* Colors background and text */

.bg-red {
  background-color: #EB5757;
}

.bg-blue {
  background-color: #2F80ED;
}

.bg-green {
  background-color: #219653;
}

.bg-yellow {
  background-color: #F2C94C;
}

.color-black {
  color: #000000;
}

.color-white {
  color: #FFFFFF;
}

.color-secundair {
  color: grey;
}

/* Layout styles, like margins, floats etc... */

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.marginLeft-2 {
  margin-left: 2%;
}

.page {
  margin: 0 2%;
}

/* AUTHENTICATIEPAGINA */

input[id=username], input[type=password] {
  width: 80%;
  padding: 8px 10px;
  margin-left: 8%;
  margin-top: 8px;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for buttonsAbstract */

.buttonAbstract {
  background-color: #ff4500;
  color: white;
  padding: 8px 10px;
  margin-top: 20%;
  border: none;
  cursor: pointer;
  width: 80%;
  text-decoration: none;
  margin: 8px 0;
  margin-left: 8%;
}

/* Add a hover effect for buttonsAbstract */

.buttonAbstract:hover {
  opacity: 0.8;
}

/* Center the avatar image inside this container */

.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

/* Avatar image */

img.avatar {
  margin-top: 30%;
  width: 70%;
  border-radius: 3%;
}

/* Add padding to containers */

.container {
  padding: 16px;
}

.text {
  padding: 16px;
  padding: 8px 10px;
  margin-top: 20%;
  cursor: pointer;
  width: 80%;
  text-decoration: none;
  font-size: small;
  margin: 8px 0;
  margin-left: 8%;
}

/* The "Forgot password" text */

span.psw {
  float: right;
  padding-top: 16px;
}

.loginpage {
  width: 25%;
  height: 100%;
  float: right;
  background-color: white;
  overflow: hidden;
}

.backgroundimage {
  background-image: url("../images/backgroundimage5.jpg");
  background-size: cover;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  position: absolute;
  overflow: hidden;
}

/* OPMAAK VOOR HEADERS DESKTOP */

h1 {
  font-size: 6vw;
  color: black;
}

h2 {
  font-size: 4vw;
  color: black;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

h3 {
  font-size: 2vw;
}

p {
  font-size: 1.4vw;
  color: black;
  text-align: left;
}

/* EINDE HEADERS */

/* RESPONSIVE TOPNAV */

.topnav {
  height: 100%;
  width: 100%;
  background-color: rgb(251, 251, 251);
  margin-top: 1%;
  margin-bottom: 3%;
  border-radius: 4px;
  overflow: hidden;
  margin-left: 22%;
  width: 76%;
  max-height: 600px;
  max-width: 1000px;
  padding-top: 0%;
  padding-bottom: 0%;
}

/* Add a background color to the top navigation */

.logo {
  float: left;
  margin-left: 1%
}

.logo a img {
  max-height: 60px;
}

.logo a, .logo a:visited {
  text-decoration: none;
}

/* Style the links inside the navigation bar */

.topnav a {
  float: left;
  display: block;
  color: #333333;
  text-align: center;
  padding: 2%;
  text-decoration: none;
  font-size: 150%;
}

/* Hide the link that should open and close the topnav on small screens */

.topnav .mobilenav-icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */

.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */

.dropdown .dropbtn {
  font-size: 1.2vw;
  border: none;
  padding: 24%;
  background-color: inherit;
}

/* Style the dropdown content (hidden by default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown:hover .dropbtn {
  background-color: white;
  color: rgba(229, 40, 18, 0.9);
}

.topnav a:hover {
  opacity: 60%;
  transition: font-size 0.35s ease;
}

/* Add a grey background to dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */

.dropdown:hover .dropdown-content {
  display: block;
}

#button-uitloggen {
  background-color: rgba(229, 40, 18, 0.9);
  color: white;
  float: right;
  display: block;
  text-align: center;
  padding: 1%;
  text-decoration: none;
  margin-right: 1%;
  max-height: 60px;
  max-width: 201px;
  border-radius: 4px;
}

#button-uitloggen:hover {
  opacity: 0.6;
}

.iconHome {
  color: rgba(229, 40, 18, 0.9);
}

.iconBestanden {
  color: #219653;
}

.iconHelp {
  color: #2F80ED;
}

.iconContact {
  color: #EB5757;
}

.iconInfo {
  color: #F2C94C;
}

/* EINDE AUTHINTICATIEPAGINA */

/* OPMAAK PAGINA'S */


/* EINDE PAGINA'S */

/* OPMAAK HOOFDMENU */

/* Deze class en volgende id's zijn voor de opmaak van de gekleurde buttons */

.coloredbuttons {
  overflow: hidden;
  margin: 4% 8%; 
}

.bigbutton {
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 28px;
  border: none;
  border-radius: 4px;
  width: 49.7%;
  padding-top: 13%;
  padding-bottom: 13%;
}

.bigbutton:hover {
  opacity: 0.6;
  text-shadow: 0.3vw 0.3vw 0.5vw black;
}

/* EINDE HOOFDMENU */

/* OPMAAK UPLOADPAGINA */

.custom-upload {
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background: #567092;
  color: white;
  font-size: 1.5vw;
  width: 15%;
}

.custom-upload:hover {
  opacity: 80%;
}

#canvas {
  font-size: 1.2vw;
  float: left;
}

#imgpreview {
  float: left;
  max-height: 400px;
  max-width: 600px;
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  /* Safari */
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#overlay {
  position: fixed;
  /* Sit on top of the page content */
  display: none;
  /*Hidden by default*/
  width: 100%;
  /* Full width (cover the whole page) */
  height: 100%;
  /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  /* Black background with opacity */
  z-index: 2;
  /*Specify a stack order in case you're using a different order for other elements */
}

.backButton {
  width: 10%;
  padding: 0.5%;
  font-size: 1vw;
  margin-top: 1%;
  margin-bottom: 1%;
  overflow: hidden;
  background-color: #567092;
  color: white;
  border: none;
  border-radius: 4px;
}

.backButton:hover {
  opacity: 80%;
}

#submit-button {
  float: left;
  margin: 0%;
}

/* EINDE UPLOADPAGINA */

/* OPMAAK DOWNLOADPAGINA */

/* Table view files */

table {
  border-collapse: collapse;
  width: 100%;
}

.tableShare {
  border-collapse: collapse;
  width: 100%;
}

.object1 {
  width: 85%;
  height: 600px;
}

tbody, td {
  vertical-align: middle;
}

td, th {
  border: 1px solid #cccccc;
  padding: 2px;
}

td {
  border-left: none;
  border-right: none;
  border-top: none;
}

th {
  font-weight: bold;
  text-transform: uppercase;
}

/* OPMAAK TEGELVIEW FILEBROWSER*/

.downloaden-cardView {
  margin: 2%;
}

/* Float four columns side by side */

.column {
  float: left;
  width: 450px;
  padding: 0 10px;
  margin-bottom: 20px;
}

/* Remove extra left and right margins, due to padding in columns */

.row {
  margin: 0 -5px;
}

/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the counter cards */

.card {
  box-shadow: 8px 8px 16px 0 rgba(0, 0, 0, 0.324);
  text-align: center;
  background-color: #1E96FC;
  color: black;
  overflow: hidden;
  border-radius: 4px;
}

.cardFolder {
  box-shadow: 8px 8px 16px 0 rgba(0, 0, 0, 0.324);
  text-align: center;
  background-color: rgb(50, 47, 237);
  color: black;
  overflow: hidden;
  border-radius: 4px;
}

.divForOptions {
  border-top: 1px solid #050517;
  width: 100%;
  margin: 0;
  padding: 0;
}

.pCard {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 98%;
  margin: 1%;
  color: white;
  text-align: center;
  font-size: 1vw;
}

.iconCard {
  color: white;
  padding: 0;
  margin: 0;
  font-size: 48px;
}

.optionsButtons {
  border: none;
  color: white;
  background: none;
  margin: 6px;
  font-size: 2vw;
  padding: 0;
  border-bottom: 2px solid transparent;
}

.optionsButtons:hover {
  border-bottom: 2px solid white;
}

.nav-download {
  width: 100%;
  overflow: hidden;
}

.group-left {
  vertical-align: top;
  position: relative;
  width: 65%;
  white-space: nowrap;
  margin-left: 2%;
}

.buttonHeader {
  float: left;
  text-align: center;
  height: 56px;
  background: #567092;
  color: white;
  width: 33%;
  border: 1px solid;
  font-size: 1.5vw;
  margin: 1% 0;
  border-radius: 4px;
}

.buttonHeader2 {
  float: left;
  text-align: center;
  height: 56px;
  background: #567092;
  color: white;
  width: 15%;
  border: 1px solid;
  font-size: 1.5vw;
  margin: 1% 0;
  border-radius: 4px;
}

.buttonHeader3 {
  text-align: center;
  background: #567092;
  color: white;
  border: 1px solid;
  margin: 1% 0;
  border-radius: 4px;
  padding: 7px;
}

.buttonHeader:hover, .buttonHeader2:hover {
  opacity: 80%;
  color: white;
}

/* DOWNLOAD PAGE SEARCH */

.div-headerBestanden {
  position: relative;
  float: left;
  width: 100%;
}

.h3-headerBestanden {
  margin-left: 2%;
}

.group-right {
  float: right;
  width: 25%;
  margin-right: 2%;
}

/* Style the input container */

.input-container {
  display: flex;
  height: 56px;
  width: 100%;
  background: #F1F1F1;
  border-radius: 4px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  padding: 0;
  margin: 2% 0;
}

.icon {
  margin: 0 2%;
  height: 56px;
  text-align: center;
  border-top: none;
  border-left: none;
  color: black;
  font-size: 1.5vw;
}

.input-search {
  height: 56px;
  background: #F1F1F1;
  border: none;
  color: #969696;
  width: 100%;
  font-size: 1vw;
}

.label-search {
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 28px;
}

.div-menuOptionsMobile {
  display: none;
}

/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

/* Modal Content/Box */

.modal-content {
  background-color: #fefefe;
  border-radius: 4px;
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 40%;
  /* Could be more or less, depending on screen size */
}

/* The Close Button */

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover, .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.section-bestandenView {
  width: 100%;
  overflow: hidden;
}

/* EINDE DOWNLOADPAGINA */

/* Share Modal */

.shareLinkBox {
  display: block;
  position: absolute;
  width: 80%;
  background-color: black;
  border: 1px black;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* OPMAAK FOOTER */

.footer {
  overflow: hidden;
  left: 0;
  bottom: 0;
  width: 100%;
  color: black;
  text-align: center;
  margin-top: 2%;
  padding-top: 2%;
  padding-bottom: 2%;
}

.footerRight {
  margin-right: 0;
}

#rootFileBtn {
  float: left;
}

/* EINDE FOOTER */

.versiegeschiedenispagina {
  margin-top: 2%;
  width: 45%;
  overflow-x: hidden; 
  overflow-y: scroll;
}
/* MOBIELE OPMAAK (RESPONSIVE)*/

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

@media screen and (max-width: 800px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.mobilenav-icon {
    float: right;
    display: block;
  }
  .topnav a {
    font-size: 4vw;
  }
  .logo {
    display: block;
    width: 100%;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

@media screen and (max-width: 800px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive a.mobilenav-icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .logo {
    display: block;
    float: none;
    width: 100%;
  }
  .topnav.responsive .dropdown {
    float: none;
  }
  .topnav.responsive .dropdown-content {
    position: relative;
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

/* Responsive columns - one column layout (vertical) on small screens */

@media screen and (max-width: 800px) {
  .topnav {
    width: 100%;
    margin: 0;
    border-radius: 0;
  }
  .nav-container {
    margin-left: 0;
  }
  #button-uitloggen {
    position: relative;
    float: left;
    width: 100%;
    margin: 0;
    max-width: none;
    padding: 4%;
  }
  h1 {
    font-size: 8vw;
  }
  h2 {
    font-size: 6vw;
  }
  h3 {
    font-size: 4vw;
  }
  .downloaden-cardView {
    margin-bottom: 18%;
  }
  .column {
    width: 96%;
    padding: 0;
    display: block;
  }
  .card .cardFolder {
    float: left;
    text-align: center;
    height: 40%;
    width: 100%;
    font-size: 3vw;
  }
  .pCard {
    font-size: 2vw;
    width: 100%;
  }
  .iconCard {
    font-size: 48px;
  }
  .optionsButtons {
    float: left;
    text-align: center;
    width: 20%;
    margin: 0;
    font-size: 5vw;
  }
  .divForOptions {
    border: none;
  }
  .group-right {
    border-top: 1px solid #333333;
    float: left;
    width: 100%;
    margin-bottom: 2%;
  }
  .input-container {
    width: 100%;
    margin: 2% 0;
  }
  .input-search {
    width: 100%;
    font-size: 2vw;
  }
  .icon {
    font-size: 4vw;
  }
  .label-search {
    width: 97%;
    margin-left: 2%;
    font-size: 3vw;
    font-weight: bold;
  }
  #toolbar {
    display: none;
    margin: 0;
  }
  .buttonHeader {
    float: left;
    text-align: center;
    width: 33%;
    height: 100%;
    position: relative;
    margin: 0;
    padding: 4% 0;
    font-size: 4vw;
    border: none;
  }
  .div-menuOptionsMobile {
    display: inline-block;
    width: 100%;
    position: fixed;
    background-color: #FCF7F7;
    bottom: 0;
    padding: 0;
    margin: 0;
    overflow: auto;
  }
  .div-headerBestanden {
    border-top: 1px solid #333333;
  }
  /* AUTHENTICATIEPAGINA */
  .loginpage {
    width: 100%;
  }
  .backgroundimage {
    background: none;
    width: 100%;
  }
  #navButton-uploaden::after {
    content: " Bestanden";
  }
  #nav-button-formulieren::after {
    content: " Help";
  }
  #nav-button-beleid::after {
    content: " Info";
  }
  #nav-button-beheer::after {
    content: " Beheer";
  }
  #button-uitloggen {
    width: 100%;
    margin: 0;
  }
  .coloredbuttons {
    width: 100%;
    margin: 0;
    height: auto;
    position: relative;
    overflow: visible;
  }
  #button-uploaden {
    width: 100%;
    margin-top: 10%;
    margin-bottom: 2%;
  }
  #button-formulieren {
    width: 100%;
    margin: 2% 0;
  }
  #button-beleid {
    width: 100%;
    margin: 2% 0;
  }
  #button-beheer {
    width: 100%;
    margin: 2% 0;
  }
  .logo {
    margin: 0;
  }
}

/* OPMAAK BEHEERPAGINA */

#beheerlink {
  font-size: 1.5vw;
}

/* EINDE BEHEERPAGINA */

/* OPMAAK INFOPAGINA */

ul {
  font-size: 1.25vw;
  margin: 0;
  overflow: hidden;
}

#page-beleid #contact-left {
  float: left;
  width: 40%;
}

#page-beleid #info-right {
  float: right;
  width: 40%;
  margin-right: 20%
}

/* EINDE INFOPAGINA */