/* HTML */
body {
    font-family: "Open Sans", sans-serif;
    color: #272829;
}

/* General font */
h1, h2, h3, h4, h5, h6 {
    font-family: "Raleway", sans-serif;
}

h4 {
    font-weight: bold !important;
    color: #0563BB;
    margin-bottom: 20px;
}

h5 {
    font-size: 16px !important;
    background-color: #0563BB;
    color: white;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    width: fit-content;
    padding: 4px;
}

/* General Color */
.prime-color{
    color: #0563BB;
}

.white-color{
    color: #efefef !important;
}

.prime-background{
    background-color: #0563BB !important;
}

.pure-white-background{
    background-color: #ffffff !important;
}

/* Elements */


/* Element class */
.param{
    font-size:12px !important;
    margin-bottom:5px;
}

.navbar{
    height:60px;
}

.navbar-brand{
    color: #0563BB !important;
    margin-left: 10px;
}

.menu{
    color: #efefef !important;
    background-color: #0563BB !important;
    font-size: 18px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left:20px;
}

.menu-active{
    color: #fff !important;
    background-color: #357bbd !important;
    font-size: 18px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left:20px;
}

.menu-icon{
    font-size:24px !important;
}

.card{
    border-color: #0563BB !important;
    flex: 0 0 auto; /* Prevent cards from shrinking or growing */
}

.card-filter{
    margin-right: 20px;
}
.card-header{
    background-color: #ffffff !important;
}

.y-scroll {
    display: flex !important; /* Use flexbox for horizontal alignment */
    flex-wrap: nowrap !important;
    gap: 0.5rem; /* Optional: spacing between cards */
    margin: 0px !important;
    max-width: 100%; /* Limit the width to the container */
    overflow-x: auto; /* Enable horizontal scrolling */
    overflow-y: hidden; /* Hide vertical scrolling */
    box-sizing: border-box; /* Include padding in width */
}



.btn{
    color: #ffffff !important;
}

.btn-sidebar{
    background-color: transparent;
    border-color: transparent;
    color: #ffffff;
}

.btn-sidebar:hover{
    background-color: #357bbd;
    border-color: transparent;
    color: #ffffff;
}

.btn-sidebar:not(:disabled):not(.disabled):active,
.btn-sidebar:not(:disabled):not(.disabled).active,
.show>.btn-sidebar.dropdown-toggle {
    color: #357bbd;
    background-color: transparent;
    border-color: transparent;
}

.btn-sidebar-active{
    background-color: #357bbd !important;
    border-color: transparent;
    color: #ffffff;
}

.btn-sidebar-active:hover{
    background-color: #357bbd !important;
    border-color: transparent;
    color: #ffffff;
}

.btn-sidebar-active:not(:disabled):not(.disabled):active,
.btn-sidebar-active:not(:disabled):not(.disabled).active,
.show>.btn-sidebar-active.dropdown-toggle {
    color: transparent !important;
    background-color: transparent;
    border-color: transparent;
}



.sidebar {
    margin: 0;
    padding: 0;
    width: 250px;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
  }
  
  .sidebar a {
    display: block;
    color: black;
    padding: 16px;
    text-decoration: none;
  }
   
  .sidebar a.active {
    background-color: #0563BB;
    color: white;
  }
  
  .sidebar a:hover:not(.active) {
    background-color: #555;
    color: white;
  }
  
  div.content {
    margin-left: 250px;
    padding: 1px 16px;
  }
  
  @media screen and (max-width: 700px) {
    .sidebar {
      width: 100%;
      height: auto;
      position: relative;
    }
    .sidebar a {float: left;}
    div.content {margin-left: 0;}
  }
  
  @media screen and (max-width: 400px) {
    .sidebar a {
      text-align: center;
      float: none;
    }
  }