body {
    background-color: rgb(245, 245, 245) !important;
}
.header {
    position: fixed;
    z-index: 2;
    width: 100%;
    height: 50px;
    /* background-color: #aa2f77;  */
    background: #5fb4bc;
    
    
} 

.navbar-content {
    z-index: 1;
    position: fixed;   
    height: 50px;
    width: 100%;
    margin-left: 230px;
    background-color: rgb(243 243 243);
    margin-top: 50px;
    transition: all 0.5s ease;
    box-shadow: 1px 1px 48px 0px rgba(0,0,0,0.19) inset;
}


.left-side-menu {
    position: fixed;
    z-index: 1;
    margin-top: 50px;
    width: 230px;
    min-height: 100%;
    top: 0%;
    left: 0%;
    background-color: #ffffff;
    color: #4e4e4e;
    transition: all 0.5s ease;
    font-size: 14px;
    overflow-x: hidden;
    box-shadow: 0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);
    font-family: 'Roboto', sans-serif;
}




.left-side-menu .scroll-container {
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
}

.left-side-menu .hide-scrollbar {
    /*FireFox*/
  scrollbar-width: none;
  /*IE10+*/
  -ms-overflow-style: -ms-autohiding-scrollbar;

}

.left-side-menu .hide-scrollbar::-webkit-scrollbar {
    /*Chrome, Safari, Edge*/
    display: none;
  }

.oh-logo {
    font-size: 24px;
}

.oh-logo-active {
    display: none;
}

.header-main .btn:focus {
    box-shadow: none;
}


.left-side-menu.active {
    width: 50px;
    transition: all 0.5s ease;
}

.left-side-menu.active .input-group {
    display: none;
    
}

.left-side-menu.active .leftsidemenu-arrow {
    display: none;
}

.left-side-menu.active .link-headline {
    display: none;
   
}

.left-side-menu.active .dd-small {
    display: none;
}

.header-left.active .oh-logo {
    display: none;

}
.header-left.active .oh-logo-active {
    display: initial;
    font-size: 24px;
}

.navbar-content.active {
    margin-left: 50px;
    transition: all 0.5s ease;
}

.left-side-menu.active .mb-1 {
    padding: 0px;
}

.left-side-menu.active .mb-1 .btn-toggle[aria-expanded="true"] {
    background-color: white;
}

.left-side-menu .link-headline {
    margin-left: 15px;
}

.oh-logo {
    
    color: rgb(82, 82, 82);
    
    text-decoration: none;
    font-size: 24px;
}

.left-side-menu .input-group {
    margin-left: 0.7rem;
    overflow: hidden;
    margin-top: 10px;
    
}

.left-side-menu .menu-links {
   
    list-style: none;
}
.left-side-menu .btn-toggle {
    position: relative; 
}
.left-side-menu .leftsidemenu-arrow {
    position: absolute;
    right: 10px;
    
    margin-top: 6px;
    transition: transform .35s ease;
    transform-origin: center;
    transform: rotate(90deg);

}

/* .dropdown-content {
    max-height: 1000px;
    overflow: hidden;
    transition: all 0.5s ease;
}

.dropdown-content ul {
    display: block;
    transition: all 0.5s ease;
}
.show {
    max-height: 0px; */


.left-side-menu .btn-toggle[aria-expanded="false"] .leftsidemenu-arrow {
    transform: rotate(0deg);
   

}

.left-side-menu .link-light{
    text-decoration: none;
    color: #b8c7ce;
}

.left-side-menu .text-light {
    color: #b8c7ce;
}
.left-side-menu .mb-1 {
    padding: 5px;
}

.left-side-menu .mb-1 .btn-toggle[aria-expanded="true"] {
    background-color: #2fa0aa50;
}
.left-side-menu .dd-small {
    background-color: #ffffff56;
    color: #4e4e4e; 
    font-family: 'Roboto', sans-serif;
    font-size: 14px ;
    margin-left: 20px;
    list-style-type: disc;
    margin-top: 15px;
}

.left-side-menu .dd-small li {
    margin-bottom: 7px;
}

.left-side-menu .dd-small li a {
    margin: 3px;
    color: #4e4e4e; 
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    font-size: 14px;
}

.left-side-menu .form-control {
    
    margin-bottom: 5px;
}

.header-left {
    position: fixed;
    overflow: hidden;
    width: 230px;
    color: rgb(88, 88, 88);
    /* background-color:#991e66; */
    background-color: #ffffff;
    height: 50px;
    transition: all 0.5s ease;
    
}


.header-right {
    position: fixed;
    right: 0%;
    height: 50px;
    
}
.header-left.active {
    width: 50px;
    transition: all 0.5s ease;
    color: rgb(88, 88, 88);
}

.header-main {
    position: fixed;
    height: 50px;
    width: 100%;
    margin-left: 230px;
    transition: all 0.5s ease;
    border-radius: none;
}

.header-main.active {
    margin-left: 50px;
    transition: all 0.5s ease;
}

.left-side-menu .btn:focus {
    box-shadow: none;
}
.left-side-menu .btn {
    white-space: nowrap; 
    width: 100%;
    text-align: left;
}
.left-side-menu .link-headline {
    display: inline;
    
}


/* Boxsidebar */

.boxsidebar {
    position: fixed;
    right: 0%;
    margin-top: 50px;
    min-height: 100%;
    width: 198px;
    background-color: rgb(253, 253, 253);
    border: 1px solid grey;
   
}

.boxsidebar .workflow-block {
    position: relative;
    height: 50px;
    width: 150px;
    background-color: white;
    border: 1px solid #367fa9;
    border-radius: 5px;
    margin: 15px;
    text-align: center;
}

/* Make p elements within buttons act as divs. */
.boxsidebar .btn p {
    margin: 0px;
    display: inline;
} 

/* Make p elements within workflow blocks act as divs. */
.workflow-block p {
    margin: 0px;
    display: flex;
    justify-content: center;
}

/* Sidebar header fixed. */
.boxside-header-container {
    position: fixed;
}


/* <<< */

/* Make boxsidebar scroll on overflow >>>*/
.boxsidebar{
    overflow-x: hidden;
}

.boxsidebar .scroll-container {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
}
/* <<< Make boxsidebar scroll on overflow*/

.boxside-header-container {
    background-color: white;
    padding-bottom: 5px;
    z-index: 1;
}

.boxsidebar .scroll-container {
    margin-top: 90px;
}

/* Boxside bar header >>> */
.boxsidebar .boxside-header {
    position: relative;
    width: 196px;
    margin-bottom: 5px;
}

.boxsidebar .boxside-header {
    padding: 5px;
    background-color:#d2d6de;
}

.boxsidebar .boxside-header .btn-close {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translate(-50%, -50%);
}
/* <<< Boxside bar header */

.boxsidebar .input-group {
    width: 170px;
    margin: 0.7rem;
}

.boxsidebar .dd-small-box {
   background-color: rgb(255, 255, 255);
    
}

.boxsidebar .boxsidebar-arrow {
    transition: transform .35s ease;
    transform-origin: 50% 50%;
    transform: rotate(90deg);
}
.boxsidebar .btn-toggle[aria-expanded="false"] .boxsidebar-arrow {
    transform: rotate(0deg);
}

.boxsidebar-icon {
    position: absolute;
    top: 0%;
    left: 0%;
    margin: 3px;
}

.boxsidebar .btn:focus {
    box-shadow: none;
}


/* forms */
.forms {
    position: relative;
   
   
    background-color: white;
    border: 0.5px solid #2f9faac2;
}

#main-content {
    background-color: rgb(245, 245, 245);
    min-width: 100%;
    min-height: 100vh;
  


}

#main-content {
   
    

}

body.left-side-menu-active-enabled #main-content {
    padding-left: 60px;


}

.content .form-header {
    position: relative;
    
    height: 40px;
    background-color: #2f9faac2;
}
.form-header .btn-toggle {
    width: 100%;
    height: 100%;
    
}
.form-header .btn-toggle p {
    display: inline;
}
.form-header-title {
    position: absolute;
    padding: 9px;
    color: white;
    margin-left: 2px;
    top: 0%;
    left: 0%;
}

.form-closebtn {
    position: absolute;
    top: 0%;
    right: 0%;
    padding: 12px;
}

.form-header .btn:focus {
    box-shadow: none;
}

.dropdown-content .show {
    display:block;
}

/* login page */

.login-form {
    position: relative;
    background-color: rgba(255, 255, 255, 0.788);
    max-width: 400px;
    max-height: 450px;
    margin: auto;
    text-align: left;
   
   
    padding: 50px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);;
}

.loginbackground {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;

    /* background: linear-gradient(135deg , #aa2f772c, #fafafa) */
    background: linear-gradient(217deg, #aa2f7756, rgba(255,0,0,0) 70.71%),
            
            linear-gradient(336deg, rgba(240, 140, 1, 0.308), rgba(0,0,255,0) 70.71%);
    
}

.login-form .login-form-input {
    background-color: rgba(255, 255, 255, 0);
    border-color: transparent;
    border-bottom-color: black;
    border-width: 0.5px;
    border-radius: 0%;
    
  
    margin-bottom: 25px;
}
.login-form .form-group .form-control:focus {
    box-shadow: none;
    outline: none;
    background-color: unset;
    color: unset;
    border-color: transparent;
    border-bottom-color: black;
  
}

.login-logo {
    position: relative;
    margin-bottom: 40px;
    font-size: 35px;
}

.login-form .btn {
    border-radius: 0;
    background-color: #007edf;
    

}

.login-form .btn:hover {
    background-color: #0067b6;
}

.login-form .formgroup-label {
    margin-bottom: 24px;
}
.copyright-container {
    position: relative;
    width: 100%;
    margin-top: 1%;
}
.copyright {
    position: relative;
}

.copyright svg {
    width: 100px;
}

.login-container {
    position: relative;
    min-height: 500px;
    margin-top: 12vh;
    width: 100%;
    text-align: center;
}

.login-form .btn {
    margin-top: 10px;
}

/* Rightsidebar */

.rightsidebar {

    z-index: 1;
    position: absolute;
    width: 0px;
    overflow: hidden;
    padding-top: 50px;
    background-color: rgb(255, 255, 255);
    right: 0;
    height: 100%;
    transition: all 0.5s ease;

}

.rightsidebar.active {
    z-index: 1;
    width: 260px;
    transition: all 0.5s ease;
}

.rightsidebar ul li .link-headline {
    display: inline-block;
    
    
}
.rightsidebar ul {
    list-style: none;
    padding: unset;
   
}

.rightsidebar ul li {
    
    white-space: nowrap;
   
    border-left: 1px solid black;

}

.rightsidebar ul li .link-headline{
    margin-left: 20px;
  
}

.rightsidebar ul li .rightsidebar-link-content {
    padding-top: 15px;
    padding-left: 20px;
    padding-bottom: 15px;
    background: none;
	color: inherit;
	border: none;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
.rightsidebar ul li button:active {
    background-color: turquoise;
}
/* navbar */
.nav-bar-ex {
    position: relative;
    width: 860px;
    height: 360px;
    background-color: white;
    transition: all 0.5s ease;
    
    
  
    box-shadow: 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);

   
}


.content {
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: auto;
    background-color: rgb(241, 241, 241);
    transition: all 0.5s ease;
    padding-left: 250px;
    padding-top: 120px;
}

.content.active {
    padding-left: 70px;
    transition: all 0.5s ease;
}

.content.active .nav-bar-ex {
    width: calc(860px + 180px);
    transition: all 0.5s ease;
}

.content-header {

    position: fixed;
    width: 100%;
    height: 50px;
    background-color: coral;
    margin-top: 100px;

}

.navbar-content .navbar-inner-content .navbar-content-btn {
    height: 50px;
    background-color: rgba(241, 241, 241, 0);
    color: rgb(82, 82, 82);
}

.navbar-content .navbar-inner-content .navbar-content-btn[aria-selected="true"] {
    background-color: rgb(241, 241, 241);
}

.navbar-content .navbar-inner-content .navbar-content-btn.active {
    border: none;
    box-shadow: 0 -5px 4px 0px #888888b8;
}




.navbar-right {
    display: inline;
    position: fixed;
    right: 0%;
    height: 50px;
    overflow: hidden;
    padding-left: 2px;
    
}

.content .nav-tabs .nav-item .nav-link.active {
    border-top: 2px solid #5fb4bc;
    color: rgb(82, 82, 82);
}

.content .nav-tabs .nav-item .nav-link {
    color: rgb(82, 82, 82);
}


/* forms */ 
.forms-ex {
    position: relative;
    /* box-shadow: 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%); */
    margin-top: 10px;
}

.forms-ex .mb-1 {
    width: 860px;
    transition: all 0.5s ease;
  
}

.content.active .forms-ex .mb-1 {
    width: calc(860px + 180px);
    transition: all 0.5s ease;
}

.datatables-ex {
    
    background-color: white;

}

.datatables-content {
    padding: 20px;
}

.datatables-searchbar {
    width: 100%;
    height: 30px;
    padding-top: 10px;
    padding-right: 20px;
}

.datatables-searchbar .input-group {
    float: right;
    width: 200px;
    
}

table thead tr th {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
  }