*, *:after, *:before {

  box-sizing:border-box;

  -moz-box-sizing:border-box;

  -webkit-box-sizing:border-box;

}

.blue {

  background: #33658A;

  color: #fff;

}

.navbar {

  padding: 10px 10%;

}

#logo {

  display: inline-block;

  margin-top: 7px;

  color: #fff;

}

#link {

  color: #fff;

  font-weight: bold;

  margin: 0 10px;

}

i { margin: 0 7px; }

#sidebarCollapse {

  color: #fff;

  background: transparent;

  outline: none;

  margin: 0 20px;

}

#sidebarCollapse:hover {

  color: #2abdfc;

  background: #fff;

  outline: none;

}

.wrapper {

  display: flex;

  width: 100%;

  align-items: stretch;

}.wrapper {

  display: flex;

  width: 100%;

  align-items: stretch;

}#sidebar {

    min-width: 250px;

    max-width: 250px;

    margin-top: 70px;

    background: #2f4858;

    color: #fff;

    transition: all 0.3s;

}

#sidebar.active{

	margin-left: -250px;

}



#sidebar .sidebar-header{

	padding: 20px;

	background: #c9ad75;

}

#sidebar ul.components{

	padding: 20px 0px;

}



#sidebar ul p{

	padding: 10px;

	font-size: 1.1em;

	display: block;

}



#sidebar ul li a{

	padding: 10px 10px 10px 20px;

	font-size: 1.1em;

	display: block;

    color: #fff;

    font-weight: bold;

}

#sidebar ul li a:hover {

    color: #ffde24;

    background: #69d1c560;

    text-decoration: none;

}



#sidebar ul li.active>a,

a[aria-expanded="true"] {

    color: #fff;

    background: #8a5fff;

}

a[data-toggle="collapse"] {

    position: relative;

}

.dropdown-toggle::after {

    display: block;

    position: absolute;

    top: 50%;

    right: 20px;

    transform: translateY(-50%);

}



#content {

    width: 100%;

    padding: 40px;

    min-height: 100vh;

    transition: all 0.3s;

    margin-top: 70px;

}

@media (max-width:800px) {

  #sidebar {

    margin-left: -250px;}

  #sidebar.active{

	margin-left: 0px;

  }

  #sidebarCollapse span{

	display: none;

  }

  .card {

    width:100%;

  }

}

@media (max-width:400px) {

  #sidebar {

    margin-top: -20px;

  }

  #logo {

    display: none;

  }

}



















table.professional {

  border-collapse: collapse;

  width: 100%;

  margin: 20px 0;

  font-family: Arial, sans-serif;

}



table.professional thead th {

  background-color: #2c3e50;

  color: #fff;

  font-size: 18px;

  font-weight: bold;

  text-align: left;

  padding: 12px;

}



table.professional tbody td {

  border-bottom: 1px solid #e6e6e6;

  padding: 12px;

}



table.professional tbody tr:nth-child(even) {

  background-color: #f9f9f9;

}



table.professional tbody tr:hover {

  background-color: #f1f1f1;

}