#codeigniter_profiler {
  margin-left: 400px;
}

/*
Rood 1C 76M 76Y 0K
#ea5a3d

Oranje bruin  19C 42M 72Y 0K
#c79451

Lichtblauw 42C 15M 10Y 0K
#9ec1d8

Donkergroen 49C 24M 33Y 5K
#8ca6a5

Beige 8C 7M Y11 K0
#eeebe5
*/

/*
 * Import
 */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/*
 * Body
 */

body {  
  font-family: "Open Sans", sans-serif !important;
  background-color: #9ec1d8;
}

#content.fade-out {
    opacity: 0.6;
    transition: none;
}

.login.body-app {
  background-color: #fff;
}

.body-app {
  margin-top: 30px;
}

.dropdown-right {
  z-index: 1000;
  position: absolute;
  right: 0;
}

.dropdown-name a {
  border: 0 !important;
  color: #ea5a3d;
}
.dropdown-name .dropdown-menu,
.list-group {
  border: 0 !important;
  border-radius: 0 !important;
  background-color: #eeebe5;
}

/*
 * Alerts
 */

p.error {
  color: #ea5a3d;
}

.alert {
  margin-top: 30px;
}

.welldone {
  position: absolute;
  top: 0;
  left: 40%;
  max-height: 500px;
  z-index: 90;
}

/*
 * Card
 */

.card {
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent;
  ---padding: 30px;
} 

.card.white {
  background-color: #ffffff;
}

@media (min-width: 992px) {
  .card {
    ---padding: 50px;
  }
}

.general h1, 
.card h1 {
  text-align: center;
  color: #ea5a3d;
  text-transform: uppercase;
  font-weight: bold;
}

h1.black {
  color: #000000;  
  text-transform: capitalize;
}

.card h2 {
  color: #9ec1d8;
}

.card label.col-form-label {
  text-transform: uppercase;
  font-size: 24px;
  color: #ea5a3d;
  margin-top: -15px;
}

.general article,
.card article {
  background-color: #eeebe5 !important;  
}

.general article h2,
.card article h2 {
  text-align: center;
}

.card strong,
.card b {
  color: #ea5a3d;
}

.general article hr,
.card article hr,
.calendar tr.hr_top td hr,
.calendar tr.hr_bottom td hr {
    height: 2px;
    color: #9ec1d8;
    background-color: #9ec1d8;
    border: none;
}

.card .description {
    background-color: #fff;  
}

.dashboard .card-body {
    background-color: #eeebe5;  
}

.card .list-group-flush p {
  padding-left: 15px;
}

/**/

.card-overview {
  margin-bottom: 10px;
}
.card-overview .card-body {
  background-color: #fff;
}
.card-overview h5 {
    color: #ea5a3d;
}

/*
 * Accordion
 */

.accordion-button {
  padding: 10px 10px 10px 0;
}

.accordion-body {
  margin: 0;
  padding: 10px;
}

.accordion-body .form-check-input:disabled,
.accordion-body .form-check-input:disabled~.form-check-label, 
.accordion-body .form-check-input[disabled]~.form-check-label {
    cursor: default;
    opacity: 1;
}
.accordion-body .form-check-input:disabled {
  border: 1px solid #bbb;
}

.accordion-button:focus {
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
  font-weight: bold;
}

/*
 * Content
 */

main {
  margin-top: 20px !important;
}

.container-fluid.general {
  background-color: #eeebe5 !important;  
}

.container-fluid.general h2 {
  text-align: center;
  color: #ea5a3d;
}

/*
 * Sidebar
 */

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  ---z-index: 100; /* Behind the navbar */
  ---padding: 48px 0 0; /* Height of navbar */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
  background-color: #c79451 !important;
}

@media (max-width: 767.98px) {
  .sidebar {
    top: 3rem;
  }
}

.sidebar .nav-link {
  font-weight: 600;
  color: #eeebe5;
  padding: 3px 0 0 15px;
}

.sidebar-heading {
  font-size: .75rem;
  color: black;
}

.sidebar .nav-item .name {
  font-weight: 500;
  color: black;
}

/*
 * Heading courses parts
 */

.head_outer {
  width: 100%;
  height: 110px;
  overflow: hidden;
}
.head_middle {
  margin-left: -60px;
}
.head_rotate {
  background: white;
  transform: rotate(-3deg);
  height: 60px;
  width: 505px;
  padding-top: 1px;
  margin-top: 30px;
}
.head_inner {
  width: 500px;
  background: #ea5a3d;
  margin-top: -10px;
  margin-left: -1px;
  padding: 20px;
  font-weight: bold;
}
.head_text {
  text-transform: uppercase;
  margin-left: 70px;
  color: #eeebe5;
}

/*
 * Nav xs, sm
 */

.nav-bottom li.active a {
  color: black;
}
.nav-bottom .nav-item {
  width: 25%;
  background: #c79451;
}
.nav-bottom .nav-link {
  color: #eeebe5;
}
.nav-bottom .nav-item:hover {
  background: #ea5a3d;
}

/**/

.nav-heading {
  background-color: #ea5a3d;
  margin-bottom: 30px;
}

.nav-heading a {
  color: #eeebe5;
}

.offcanvas-header {
  color: #fff;
  background-color: #ea5a3d;
}

/*
 * Tables
 */

table.responsive {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}
@media screen and (max-width: 1100px) {
  table.responsive {
    border: 0;
  }
  table.responsive thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  table.responsive tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: 15px;
  }
  table.responsive td {
    display: block;
    text-align: right;
  }
  table.responsive td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
  table.responsive td:last-child {
    border-bottom: 0;
  }
}

/*
 * Forms
 */

#formfeedback {
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 9px;
}

#formfront {
  padding: 30px;
  background-color: #eeebe5;
}

@media screen and (min-width: 1099px) {
  #formfront label {
    text-align: right;
    font-weight: bold;
  }
}

.modal-content {
  border: 0 !important;
  border-radius: 0 !important;  
  background-color: #eeebe5;
}

/*
 * Calendar
 */

.calendar .cell {
  vertical-align: top;
}
.calendar .card {
  height: 100%;
  width: 100%;
  cursor: pointer;
}
.calendar .card:hover {
  background: #eeebe5;
}
.calendar .card .list-group-item {
  background: #9ec1d8;
}
.calendar tr.days td {
  width: 14%;
  ---height: 20px;
}
.calendar tr.numbers td {
  height: 100px;
}
.calendar tr.months th, 
.calendar tr.days td {
  text-align: center;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #eeebe5 !important;  
}
.calendar tr.hr_top td {
  padding: 15px 20px 0 20px;
  background-color: #eeebe5 !important;  
}
.calendar tr.hr_bottom td {
  padding: 0 20px 15px 20px;
  background-color: #eeebe5 !important;  
}
.calendar tr.months th[colspan="5"] {
  text-align: center;
  color: #ea5a3d;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 40px;
}

@media screen and (max-width: 1100px) {
  main {
    overflow: hidden;
  }
  .calendar table {
    width:inherit;
  }
  .calendar tr.months th[colspan="5"] {
    font-size: 20px;
  }
}