/*
* CI Colors:
* Darkblue:       #010f3e
* Darkblue lighter: #01497C
* Turquoise:      #00CEB4
* Red:            #FF441C
* Yellow:         #FFD330
* Dark gray:      #4E5455
* Light gray:     #BEC5C8
*/

:root {
  --ci-darkblue: #010f3e;
  --ci-darkbluelight: #01497C;
  --ci-turquoise: #00CEB4;
  --ci-red: #FF441C;
  --ci-yellow: #FFD330;
  --ci-darkgray: #4E5455;
  --ci-gray: #BEC5C8;
  --ci-lightgray: #F4F4F4;
  --ci-seabluedarker: #075575;
  --ci-seabluelighter: #85B0C9;
}


body {
    margin: 0;
    /* background-image: url('../backgrounds/Background_Marina_Birdview_2.jpg');
    #background-repeat: no-repeat; */
    font-family: "Titillium Web", sans-serif;
    font-weight:normal;
}

header {
    color: white;
    height: 400px;
    margin-left:-150px;
    margin-right:-150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    position: relative;
    background-image: url('../backgrounds/Background_Marina_Birdview_7.jpg');
}

.landingpage_text_box h2 {
    margin-bottom: 50px;
}
.landingpage_text_box ul li {
    line-height: 3;
}



.image_landingpage {
    text-align: center;
}
.image_landingpage > img {
    width: 450px;
}

img.screen_border {
    border: 4px solid black;
}

.sticky-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--ci-darkbluelight);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    display: none;
    z-index: 1000;
}

.sticky-menu a {
    color: white;
    text-decoration: none;
}

footer {
    background-color: #f1f1f1;
    text-align: center;
    padding: 20px;
    position: relative;
}

footer a {
    text-decoration: none;
    color: #333;
    margin: 0 10px;
}



/* ============================
            FONTS
========================= */
/* syncopate-regular - latin */
/* syncopate-regular - latin */
@font-face {
  font-family: 'Syncopate';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/syncopate-v19-latin/syncopate-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/syncopate-v19-latin/syncopate-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/syncopate-v19-latin/syncopate-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/syncopate-v19-latin/syncopate-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/syncopate-v19-latin/syncopate-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/syncopate-v19-latin/syncopate-v19-latin-regular.svg#Syncopate') format('svg'); /* Legacy iOS */
}
/* syncopate-700 - latin */
@font-face {
  font-family: 'Syncopate';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/syncopate-v19-latin/syncopate-v19-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/syncopate-v19-latin/syncopate-v19-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/syncopate-v19-latin/syncopate-v19-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/syncopate-v19-latin/syncopate-v19-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/syncopate-v19-latin/syncopate-v19-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/syncopate-v19-latin/syncopate-v19-latin-700.svg#Syncopate') format('svg'); /* Legacy iOS */
}


/* titillium-web-regular - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/titillium-web-v15-latin/titillium-web-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/titillium-web-v15-latin/titillium-web-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/titillium-web-v15-latin/titillium-web-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/titillium-web-v15-latin/titillium-web-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/titillium-web-v15-latin/titillium-web-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/titillium-web-v15-latin/titillium-web-v15-latin-regular.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}
/* titillium-web-700 - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/titillium-web-v15-latin/titillium-web-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/titillium-web-v15-latin/titillium-web-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/titillium-web-v15-latin/titillium-web-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/titillium-web-v15-latin/titillium-web-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/titillium-web-v15-latin/titillium-web-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/titillium-web-v15-latin/titillium-web-v15-latin-700.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}

/*
* General definitions
*/


a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a.textlink {
  color: var(--ci-darkbluelight);
}

.turquoise {
  color: var(--ci-turquoise);
}

.darkblue {
  color: var(--ci-darkblue);
}

.displayred {color: red;}
.displaygreen {color: green;}
.displayyellow {color: yellow;}
.displayoff {color: gray;}

.error {
  color: var(--ci-red);
  font-weight: bold;
}

.green {
  color: green;
}

input.error  {
  border: 3px solid var(--ci-red) !important;
}

.warning {
  color: var(--ci-yellow);
  font-weight: bold;
}

.centercontent {
  text-align: center;
}
.leftaligncontent {
  text-align: left;
}
.rightaligncontent {
  text-align: right;
}

.nopadding {
  padding:0 !important;
}

select.downarrow {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}

.main-button {
  color: white;
  letter-spacing: 0.1em;
  height: 60px;
  min-width: 250px;
  border-radius: 60px;
  border: none;
  vertical-align: middle;
  text-align: center;
  display: block;
  margin: auto;
  margin-top: 15px;
  line-height: 3.5;
  background-color: var(--ci-gray);
  box-shadow: 0px 0px 5px 1px #2d2d2d7d;
  cursor: pointer;
  text-decoration: none;
}

.preferred-button {
  background-color: var(--ci-darkbluelight);
}

.main-button:hover {
  background-color: var(--ci-turquoise);
  text-decoration: none;
}

.box-note {
  background-color: var(--ci-lightgray);
  margin: 10px 0 10px 0;
  padding: 10px;
  text-align: center;
}

.door-code-title {
  font-size: 25px;
  color: var(--ci-darkblue);
  font-family: "Titillium Web", sans-serif;
  font-weight:bold;
}

.door-code {
  font-size: 25px;
  color: white;
  text-align: center;
  padding:0 10px 0 10px;
  background-color: var(--ci-yellow);
  font-family: "Titillium Web", sans-serif;
  font-weight:bold;
}

.bookingnotes {
  max-width: 586px;
  padding: 10px;
  margin: auto;
  text-align: center;
  color: var(--ci-yellow);
  background-color: white;
}

.demonote {
  text-align: center;
  padding: 10px;
  border: 2px solid var(--ci-yellow);
  background-color: white;
}

/*
* Startpage
*/
.section .section-center {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.centered {
	text-align: center;
}

.centrallogo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 200px;
  margin-top: 15%;
}

.buttons_startpage {
  position: relative;
  bottom: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  left: 50%;
  transform: translate(-50%, -50%);
}

.paragraph_startpage {
  text-align: center;
  color: white;
  font-family: "Titillium Web", sans-serif;
  font-weight: bold;
    margin-top: 15px;
}

.whitebutton {
  display: block;
  text-align: center;
  background-color: white;
  color: #010f3e;
  font-family: "Syncopate", sans-serif;
  outline:none;
  border: none;
  border-radius: 20px;
  padding: 10px 25px 10px 25px;
}

.whitebutton:hover {
  color: #00CEB4;
  -ms-transform: scale(1.05); /* IE 9 */
  -webkit-transform: scale(1.05); /* Safari 3-8 */
  transform: scale(1.05);
}

.payment-logo-banner {
  margin-top: 15px;
  border: 2px solid var(--ci-lightgray);
  border-radius: 5px;
}

img.payment-logo {
  height: 30px;
  margin: 0 10px 0 0;
  -webkit-filter: grayscale(1) brightness(1.2);
  filter: grayscale(1) brightness(1.2);
}

img.payment-logo.visa {
  height: 20px;
}

img.payment-logo.googlepay {
  height: 60px;
  margin: -10px 0 -10px -10px;
}

img.payment-logo.amex {
  height: 45px;
  margin: -10px 0 -10px -10px;
}

h1, h2, h3, h4, h5 {
  color: var(--ci-darkblue);
  font-family: "Titillium Web", sans-serif;
  font-weight: bold;
  text-align: center;
}

h1 {
  font-size: 25px;
}

h2 {
  font-size: 22px;
  margin-top: 30px;
}

h3 {
  font-size: 20px;
  margin-top: 30px;
}

h4 {
  font-size: 18px;
  margin-top: 30px;
}


/*
* Specific definitions
*/
#top-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background: linear-gradient(45deg, var(--ci-seabluedarker) 20%, var(--ci-seabluelighter) 100%) no-repeat 0 0 fixed;
}

#top-banner img {
  height: 60%;
}

#maincontent {
  margin: auto;
  padding-top: 20px;
  max-width: 600px;
}

.legalPage h1, .legalPage h2, .legalPage h3, .legalPage h4 {
  text-align: left;
}

.booking-form {
  color: var(--ci-darkblue);
  font-family: "Titillium Web", sans-serif;
  font-weight:normal;
}

.booking-form h1, .booking-form h2, .booking-form h3, .booking-form h4, .booking-form h5 {
  text-align: center;
  margin-bottom: 30px;
}

.booking-form input.form-control, select.form-control {
  background-color: var(--ci-lightgray);
  height: 45px;
}

.booking-form .form-group {
  margin-top: 10px;
}

.booking-form .error {
  color: var(--ci-red);
}

.booking-form .onelineLabelAndField {
  height: 40px;
  line-height: 40px;
}

.booking-form .onelineLabelAndField select {
  height:40px;
}

.booking-form .onelineLabelAndField input[type=checkbox] {
  margin:15 0 15 5;
  transform: scale(1.8);
}

.booking-form input.input-muted {
  color: var(--ci-darkgray);
  background-color: var(--ci-gray);
}

.booking-form #totalfee {
  font-size: 25px;
  color: var(--ci-darkbluelight);
  font-weight: bold;
}

.login-form {
  max-width: 300px;
  margin: auto;
}

.login-form h1, .login-form h2, .login-form h3, .login-form h4 {
  text-align: center;
  margin-bottom: 20px;
}

.login-form input {
  max-width: 400px;
  margin-bottom: 10px;
}

.form-table-input {
  width: 200px;
}

#mapmask {
  overflow:hidden;
  position:relative;
}

#mapattribution {
  position: absolute;
  bottom: 0;
  left: 0;
  color: black;
  background-color: white;
  opacity: 0.5;
  padding: 3px;
}

table.table-v1 {
  width: 100%;
}

table.table-v1 th, td {
    padding:7px 10px 7px 10px;
    letter-spacing: 0.05em;
    font-family: "Titillium Web", sans-serif;
    background-color: var(--ci-lightgray);
}

table.table-v1 tr {
  border:2px solid white;
}

table.table-v1 th {
  width: 30%;
  font-weight: normal;
  color: var(--ci-darkgray);
}

table.table-v1 td {
  font-weight: bold;
  color: var(--ci-darkblue);
}


.landingPageButton {
  display: block;
  width: 80%;
  margin: auto;
  margin-bottom: 10px;
  text-align: center;
  vertical-align: middle;
}

.landingPageButton a {
  display: block;
  color: var(--ci-darkgray);
  font-family: "Titillium Web", sans-serif;
  font-weight:bold;
  background-color: var(--ci-lightgray);
  border-radius: 5px;
  width: 100%;
  line-height: 30px;
  text-align: center;
  margin: auto;
  vertical-align: middle;
}

.landingPageButton a:hover {
  background-color: var(--ci-turquoise);
  color: white;
}

.landingPageButton a:active {
  background-color: var(--ci-turquoise);
  color: white;
}

.landingpageparagraph {
  width: 80%;
  margin: auto;
}


#legal-footer {
  color: var(--ci-gray);
  text-align: center;
  background-color: white;
  margin:20px;
}

#legal-footer a {
  color: var(--ci-gray);
}

#legal-footer a:hover {
  color: var(--ci-darkblue);
}

#freeberthstable {
  background: white;
  width: 100%;
  text-align: center;
  font-weight: bold;
}

#freeberthstable tr {
  height: 3em;
}

#freeberthstable tr:hover>td {
  background-color: white;
}

#freeberthstable th {
  height: 3em;
  padding:5px;
}

#freeberthstable td {
  padding:5px;
  border:5px solid white;
}

#freeberthstable td.highlighted {
  background-color: var(--ci-gray);
  font-weight: bold;
}

#freeberthstable td.radiocell {
  background-color: white;
}

#freeberthstable tr:hover>td.radiocell {
  background-color: white;
}

/* Customize the label (the container) */
.radiocontainer {
  display: block;
  position: relative;
  padding: 20px 0 20px 5px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.radiocontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.customradiobutton {
  position: absolute;
  top: 8;
  left: 5;
  height: 25px;
  width: 25px;
  margin: auto;
  background-color: var(--ci-gray);
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radiocontainer:hover input ~ .customradiobutton {
  background-color: var(--ci-turquoise);
}

/* When the radio button is checked, add a blue background */
.radiocontainer input:checked ~ .customradiobutton {
  background-color: var(--ci-turquoise);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.customradiobutton:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radiocontainer input:checked ~ .customradiobutton:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radiocontainer .customradiobutton:after {
  top: 7px;
  left: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
}

/*
* Admin Pages
*/


table.admintable th {
  min-width: 100px;
  padding: 5px 10px 5px 10px;
  border-bottom: thin solid black;
}

table.admintable td {
  min-width: 100px;
  padding: 5px 10px 5px 10px;
}

table.admintable tbody tr:hover {
    color: white;
    background-color: #003366DD;
}

table.admintable tbody tr:hover>td {
    color: white;
    background-color: #003366DD;
}

table.admintable-horizontal th {
  width: 200px;
  padding: 5px 10px 5px 10px;
  border-right: thin solid black;
}

table.admintable-horizontal tr.topborder {
  border-top: 2px solid black;
}

#scrollcalendar {
  overflow-x: auto;
  white-space: nowrap;
}

#scrollcalendar table.headertable {
  position:absolute;
  width: 200px;
  background-color: white;
  border-right: thin solid black;
}

#scrollcalendar table.datatable {
  margin-left: 200px;
}

#scrollcalendar table.datatable th.weekend {
  background-color: #BBBBBB;
  color: #003366DD;
}

#scrollcalendar td {
  width: 30px;
  white-space: nowrap;
  padding: 10px;
}

#scrollcalendar td.free {
  background-color: inherit;
  border-right: thin solid white;
}

#scrollcalendar td.bookedstart {
    white-space: nowrap;
  background: linear-gradient(110deg, white 20%, #003366DD 40%);
}

#scrollcalendar td.booked {
  background-color: #003366DD;
}

#scrollcalendar td.bookedend {
  background: linear-gradient(290deg, white 20%, #003366DD 40%);
}

#scrollcalendar td.bookedonenight {
    white-space: nowrap;
    color: white;
    overflow:visible;
  background: linear-gradient(110deg, white 20%, #003366DD 30%, #003366DD 70%, white 80%);
}

#scrollcalendar td.longtermusage {
  background-color: #00336688;
}

#scrollcalendar td.longtermusagebutfree {
  border-right: thin solid white;
  background: linear-gradient(0deg, #00336688 20%, white 30%, white 100%);
}

#scrollcalendar td.outofseason {
  border-right: thin solid white;
  background-color: #BBBBBB;
}

#scrollcalendar td a {
    color: white;
    display: block;
    margin: -10px;
    padding: 10px;
}

#scrollcalendar td a:hover {
    color: white;
    background-color: #003366DD;
}

#scrollcalendar td a.iconlink {
    color: #00336688;
    display: block;
}

#scrollcalendar td a.iconlink:hover {
    color: #003366;
    background-color: transparent;
}

#scrollcalendar tr.statistics {
  color: #BBBBBB;
}

#scrollcalendar table.datatable tr.statistics th.weekend {
  background-color: #BBBBBB;
  color: white;
}

#scrolltable {
  overflow-x: auto;
  white-space: nowrap;
}


/*
* Toggle Menu
*/

.navbar {
  height: 60px;
}

a.nav-link, #navbarDropdown {
  color: white;
}

a.nav-link:hover, #navbarDropdown:hover {
  color: white;
  background-color: #003366;
}

a.nav-link:clicked, #navbarDropdown:clicked {
  color: #003366DD;
  background-color:: white;
}



#navbarDropdown:hover {
  color: white;
}

.admin-content h1, .admin-content h2, .admin-content h3, .admin-content h4 {
  color: var(--ci-darkblue);
  text-align: left;
}

#headerMarinaName {
  margin-left: 10px;
  font-family: "Titillium Web", sans-serif;
  font-weight:normal;
}

.topmenu-bg {
  color: white;
  background: linear-gradient(45deg, var(--ci-seabluedarker) 10%, var(--ci-seabluedarker) 50%, var(--ci-seabluelighter) 100%) no-repeat 0 0 fixed;
}

.menu-bg {
  color: white;
  background-color: var(--ci-seabluedarker);
}

.menu-bg a {
  color: white;
  background-color: var(--ci-seabluedarker);
}

.menu-topborder {
  border-top: 1px solid var(--ci-seabluedarker) !important;
}

.small-menu {
  font-size: 0.6em;
}

.list-group a:hover {
  color: var(--ci-darkbluelight);
  background-color: white;
}

.list-group a.selected {
  color: var(--ci-darkblue);
  background-color: white;
}

.navbar {
 position: relative;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 padding-top: 0.5rem;
 padding-bottom: 0.5rem;
}
.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-sm,
.navbar > .container-md,
.navbar > .container-lg,
.navbar > .container-xl,
.navbar > .container-xxl {
 display: flex;
 flex-wrap: inherit;
 align-items: center;
 justify-content: space-between;
}





.list-group {
 display: flex;
 flex-direction: column;
 padding-left: 0;
 margin-bottom: 0;
 border-radius: 0.25rem;
}

.list-group-item-action {
 width: 100%;
 color: #495057;
 text-align: inherit;
}
.list-group-item-action:hover, .list-group-item-action:focus {
 z-index: 1;
 color: #495057;
 text-decoration: none;
 background-color: #f8f9fa;
}
.list-group-item-action:active {
 color: #212529;
 background-color: #e9ecef;
}

.list-group-item {
 position: relative;
 display: block;
 padding: 0.5rem 1rem;
 color: #212529;
 text-decoration: none;
 background-color: #fff;
 border: 1px solid rgba(0, 0, 0, 0.125);
}
.list-group-item:first-child {
 border-top-left-radius: inherit;
 border-top-right-radius: inherit;
}
.list-group-item:last-child {
 border-bottom-right-radius: inherit;
 border-bottom-left-radius: inherit;
}
.list-group-item.disabled, .list-group-item:disabled {
 color: #6c757d;
 pointer-events: none;
 background-color: #fff;
}
.list-group-item.active {
 z-index: 2;
 color: #fff;
 background-color: #0d6efd;
 border-color: #0d6efd;
}
.list-group-item + .list-group-item {
 border-top-width: 0;
}
.list-group-item + .list-group-item.active {
 margin-top: -1px;
 border-top-width: 1px;
}

.list-group-horizontal {
 flex-direction: row;
}
.list-group-horizontal > .list-group-item:first-child {
 border-bottom-left-radius: 0.25rem;
 border-top-right-radius: 0;
}
.list-group-horizontal > .list-group-item:last-child {
 border-top-right-radius: 0.25rem;
 border-bottom-left-radius: 0;
}
.list-group-horizontal > .list-group-item.active {
 margin-top: 0;
}
.list-group-horizontal > .list-group-item + .list-group-item {
 border-top-width: 1px;
 border-left-width: 0;
}
.list-group-horizontal > .list-group-item + .list-group-item.active {
 margin-left: -1px;
 border-left-width: 1px;
}

.list-group-flush {
 border-radius: 0;
}
.list-group-flush > .list-group-item {
 border-width: 0 0 1px;
}
.list-group-flush > .list-group-item:last-child {
 border-bottom-width: 0;
}

.list-group-item-primary {
 color: #084298;
 background-color: #cfe2ff;
}
.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
 color: #084298;
 background-color: #bacbe6;
}
.list-group-item-primary.list-group-item-action.active {
 color: #fff;
 background-color: #084298;
 border-color: #084298;
}

.list-group-item-secondary {
 color: #41464b;
 background-color: #e2e3e5;
}
.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
 color: #41464b;
 background-color: #cbccce;
}
.list-group-item-secondary.list-group-item-action.active {
 color: #fff;
 background-color: #41464b;
 border-color: #41464b;
}

.list-group-item-success {
 color: #0f5132;
 background-color: #d1e7dd;
}
.list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus {
 color: #0f5132;
 background-color: #bcd0c7;
}
.list-group-item-success.list-group-item-action.active {
 color: #fff;
 background-color: #0f5132;
 border-color: #0f5132;
}

.list-group-item-info {
 color: #055160;
 background-color: #cff4fc;
}
.list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
 color: #055160;
 background-color: #badce3;
}
.list-group-item-info.list-group-item-action.active {
 color: #fff;
 background-color: #055160;
 border-color: #055160;
}

.list-group-item-warning {
 color: #664d03;
 background-color: #fff3cd;
}
.list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus {
 color: #664d03;
 background-color: #e6dbb9;
}
.list-group-item-warning.list-group-item-action.active {
 color: #fff;
 background-color: #664d03;
 border-color: #664d03;
}

.list-group-item-danger {
 color: #842029;
 background-color: #f8d7da;
}
.list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus {
 color: #842029;
 background-color: #dfc2c4;
}
.list-group-item-danger.list-group-item-action.active {
 color: #fff;
 background-color: #842029;
 border-color: #842029;
}

.list-group-item-light {
 color: #636464;
 background-color: #fefefe;
}
.list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus {
 color: #636464;
 background-color: #e5e5e5;
}
.list-group-item-light.list-group-item-action.active {
 color: #fff;
 background-color: #636464;
 border-color: #636464;
}

.list-group-item-dark {
 color: #141619;
 background-color: #d3d3d4;
}
.list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus {
 color: #141619;
 background-color: #bebebf;
}
.list-group-item-dark.list-group-item-action.active {
 color: #fff;
 background-color: #141619;
 border-color: #141619;
}

.d-flex {
 display: flex !important;
}

.redborder {
  border: 2px solid red;
}

#wrapper {
 overflow-x: hidden;
}

#sidebar-wrapper {
 min-height: 100vh;
 margin-left: -15rem;
 transition: margin 0.25s ease-out;
}

#sidebar-wrapper .sidebar-heading {
 padding: 0.875rem 1.25rem;
 font-size: 0.8em;
 height: 60px;
 font-family: "Titillium Web", sans-serif;
 font-weight:normal;
}

#sidebar-wrapper .sidebar-footer {
 bottom:0;
 width:100%;
 padding: 0.875rem 1.25rem;
 font-size: 0.8em;
 height: 60px;
 font-family: "Titillium Web", sans-serif;
 font-weight:normal;
}

#sidebar-wrapper .sidebar-logo {
 width: 150px;
 padding: 0 10px 0 0;
}

#sidebar-wrapper .list-group {
 width: 15rem;
}

#page-content-wrapper {
 min-width: 100vw;
}

body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
 margin-left: 0;
}

@media (min-width: 768px) {
 #sidebar-wrapper {
   margin-left: 0;
 }

 #page-content-wrapper {
   min-width: 0;
   width: 100%;
 }

 body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
   margin-left: -15rem;
 }
}