        .navbar{
            width: 15%;
            background-color: #203472;
            height: 100%;
            position: fixed;
            display: flex;
            flex-direction: column;
            padding: 2.5%;
	    z-index: 1;
	    top: 0;
        }
		
		.navbar-nav>li>a{
			padding: 0px;
			letter-spacing: 1px;
		}
        .nav-inner{
            display: flex;
            flex-direction: column;
            height: 100%;
            row-gap: 7rem;
        }
		
		.top-bar{
			min-height: 52px;
		}
		
        .logo{
            position: relative;
        }

        .logo::before{
            content: "";
            height: 100%;
            width: 5px;
            background-color: #c0d731;
            display: inline-block;
            position: absolute;
            left:-2.5vw;
        }

        .logo-img{
            width: 100%;
            height: auto;
            max-width: 180px;
            filter: brightness(100);
        }
		
		.navbar-right{
			float: none !important;
			clear:both !important;
		}
		
		.weblinks{
					display: flex;
			flex-direction: column;
			gap: 10px 0px;
		}
		.nav>li>a:hover, .nav>li>a:focus{
			background: transparent !important;
		}
        .weblink{
            color: #fff;
            padding-top: 0;
            text-transform: uppercase;
            font-size: 14px;
        }

	.weblink a{
            color: #fff;
            text-transform: uppercase;
            font-size: 14px;
	}

        .version{
            color: #fff;
            opacity: 0.5;
            text-shadow: 0px -2px 2px #000;
                }

        .top-bar{
            width: 85%;
            margin-left: auto;
            z-index: 1;
            padding-left: 30px;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            
        }

        .top-text{
            text-transform: uppercase;
            color: #203472;
            font-size: 14px;
            letter-spacing: 3px;
            margin: 0;
        }
		
		.btn-default{
			color: #203472;
			border-color: #203472;
		}
		
		.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover{
			background-color: #203472 !important;
		}
		
		.modal-content{
			padding: 20px;
			border-radius: 20px;
		}
		
		.modal .form-close, .modal .close{
			top: 0% !important;
			right: 2% !important;
			font-size: 45px;
			font-weight: 100;
			line-height: 1;
			color: #666;
		}
		
		
		.modal-header,.modal-footer{
			border: none;
		}
		
		.modal-title{
			color: #000;
			font-weight: bold;
		}
		
		.modal span[aria-label]{
			color: #000;
			font-weight: normal;
		}
		
		.modal .table{
			margin-top: 10px;
		}
		
		.modal span[role="checkbox"]{
			border: none;
			border-radius: 3px;
			background-color: #e5e5e5;
			color: #203472 !important;
			line-height: inherit !important;
		}
		
		li{
			list-style: none;
		}
			
		.navbar-right .dropdown{
			display: none;
		}
		
		
		.top-icon-container{
			margin-right: 0;
			display: flex;
			gap: 20px;
		}
		
		.logout{
			padding: 15px 30px 15px 0px;
		}
		
		.top-icon-container .dropdown{
			padding: 15px 10px;
		}
		
		.top-icon-container .dropdown-menu{
			left: 100%;
			transform: translateX(calc(-100% - 0.5px));
			margin: 0;
			border: none;
			background-color: #203472;
			box-shadow: none;
		}
		
		.top-icon-container .dropdown-menu>li>a:focus, .top-icon-container .dropdown-menu>li>a:hover{
				border: none;
				background-color: #203472;
		}
		
		.top-icon-container img{
			width: 22px
		}
		
		.top-icon-container .dropdown.open{
			background-color: #203472;
		}
		
		.top-icon-container .dropdown.open img{
			filter: brightness(100);
		}
		
		.top-icon-container .dropdown-menu a, .top-icon-container .dropdown-menu>li>a:focus, .top-icon-container .dropdown-menu>li>a:hover{
			color: #fff !important; 
			padding: 3px 20px;
		}
		
		.top-icon-container .caret{
			display: none;
		}

		@media(max-width: 1580px){
		.navbar{
			padding: 1%;
		}
		}

        @media(max-width: 1300px){
            .navbar{
                position: relative;
                width: 100%;
            }
            .nav-inner{
				display: block;
            }
            .navbar-nav{
                align-items: flex-end;
                width: 100%;
				text-align: right;
            }
			.logo{
				margin-top: 7px;
				float: left;
			}
            .version-container{
                display: none;
            }
            .weblink:first-child{
                padding-top: 0;
            }
			.top-bar{
				width: 100%;
			}
        }