:root {
    --bs-modal-width :800px;
}


html {
    font-size: 100%;
}
body,
input,
select,
textarea,
button
{
    font-size: 1em;
    line-height: 1.3em;
    font-family: "PT Sans", Arial, Helvetica, sans-serif /*{global-font-family}*/;
    color : #636466;
}

body {
  background-color: #f9f9f9;
}

container {
    padding-right : 5px;
    padding-left : 5px;
}
label {
    margin-top : 4px;
}

input, select, textarea {
    border-radius: 0.3em;
    box-shadow: 1px 2px 2px 1px #ddd;
    border: 1px solid #ddd;
}

input, select  {
    height : 1.7em;
}

input:focus {
  box-shadow: 2px 2px 2px 2px #8eb294;
  border: 0 solid #72b07f;
}

h2 {
  font-size: 1.5em;
  font-weight: bold;
}

h3 {
  font-size: 1.2em;
  font-weight: bold;
}

h4 {
    font-size: 1em;
}

#headerlogo {
    position : relative;
    width : 107px;
    height : 35px;
    top:0;
    margin-left : auto;
    margin-right : auto;
    margin-bottom: 0.5em;
    background-image: url("../../images/logo_keizersVisser_107x35.png");
}
#logo_row {
    height : 45px;
}

ul {
     list-style: none;
}

#popup-info ul {
    list-style-type:inherit;
}

#popup-info a {
    color : #636466;
}

#popup-info a:visited {
  color : #636466;
}

#popup-info a:hover {
  color : #72b07f;
  background-color: white;
}

.list-group-horizontal {
    height : 1.5em;
}

#headermenu .list-group-horizontal {
    height: 1.2em;
}

#main {
    transition: margin-left .5s;
    padding: 2px;
    max-width : 1024px;
}

header {
    background-color: #e9e9e9;
    height : 100px;
}

.btn {
    font-weight: bold;
    color : white;
    background-color: #ababab;
    padding : 0.2em 10px 0.2em 10px;
}

.btn:hover {
    background-color:#72b07f;
    color : white;
}

.btn-form {
    width : 100%;
}

#headertitle {
    color: #72b07f;
    font-size: 1em;
    font-weight: bold;
    min-height: 1.1em;
    margin: -20px auto 0 auto;
}

.backButton {
    cursor : pointer;
}

a:hover {
    background-color: #72b07f;
    color : white;
}

footer {
    max-width : 1024px;
    position:fixed;
    bottom : 100px;
    margin-left: auto;
    margin-right : auto;
}

.list-group li:first-child {
    border-radius: 0.5em 0.5em 0 0;
}

.list-group li:last-child {
    border-radius: 0 0 0.5em 0.5em;
}

.list-group li:only-child {
    border-radius: 0.5em 0.5em 0.5em 0.5em;
}

.list-group-horizontal li:first-child {
    border-radius: 0.5em 0 0 0.5em;
}

.list-group-horizontal li:last-child {
    border-radius: 0 0.5em 0.5em 0;
}
.list-group-horizontal li:only-child {
    border-radius: 0.5em 0.5em 0.5em 0.5em;
}

.list-group-item {
    display: block;
    font-weight: bold;
    color : white;
    background-color: #aaaaaa;
    border-bottom: 1px solid #ddd;
}

.list-group-item a {
    text-decoration: none;
    display:block;
    margin-bottom: 10px;
}

a:visited {
    color : white;
}

.btn a:hover {
    background-color:  #72b07f;
}

.popup-panel {
    background-color: white;
    max-width: 600px;
}

.cmspage {
  padding : 10px;
}

.row {
    padding: 5px 0 5px 0;
}

.subclass {
    margin-left : 20px;
}
.card {
  border-radius: 0.5em;
}

#topHeader {
    margin-left : 0;
    margin-right : 0;
}

@media ( width > 665px) {
    header {
        height : 120px;
    }
  #headerlogo {
      width : 161px;
      height : 53px;
      top:0;
      background-image: url("../../images/logo_keizersVisser_161x53.png");
  }
  #logo_row {
      height : 60px;
  }
}

@media ( width > 768px) {
    header {
        height : 140px;
    }

    #headerlogo {
        width: 214px;
        height: 70px;
        top: 0;
        background-image: url("../../images/logo_keizersVisser_214x70.png");
    }
    #logo_row {
        height : 80px;
    }
    
    #popup-info img {
    margin-left: 10px;
    margin-right: 10px;
}
}

.orange {
    color: darkgreen;
    font-weight: bold;
}

.red {
    color: darkred;
    font-weight: bold;
}

input[type="number"] {
    width: 5em;
}