@media(min-width:769px){
	.vertical-nav {
		min-width: 200px;
		width: 200px;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
		align-items: flex-start !important;
	}

	.page-content {
		width: calc(100% - 200px);
		margin-left: 200px;
		margin-top: 16px;
	}

	.home-logo {
		max-width: 140px;
	}
}

@media(max-width:768px){
	.vertical-nav {
		margin: 0 8px;
	}

	.navbar-collapse {
		position:fixed;
		left: 0;
		padding: 15px;
		width:300px;
		top:56px;
		height:100%;
		box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
	}
	
	.navbar-collapse.collapsing {
		/* height: auto; */
		-webkit-transition: left 0.3s ease;
		-o-transition: left 0.3s ease;
		-moz-transition: left 0.3s ease;
		transition: left 0.3s ease;
		left: -100%;
	}
	.navbar-collapse.show {
		left: 0;
		-webkit-transition: left 0.3s ease-in;
		-o-transition: left 0.3s ease-in;
		-moz-transition: left 0.3s ease-in;
		transition: left 0.3s ease-in;
	}
	.page-content {
		margin-top: 60px;
	}
	
	.home-logo {
		max-width: 140px;
	}
}			


.medium-form {
	max-width: 1000px;
}

.small-form {
	max-width: 600px;
	background-color: #f9f9f9;
	border: 1px solid #dddddd;
	padding: 20px;
	margin-top: 20px;
    border-radius: 4px;
}

.form_image {
    max-width:  100px;
    max-height: 100px;
}

.preview_image {
    animation-name: soft-animation;
    animation-duration: 8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    position: relative;
}

.inputImage {
    max-height: 300px;
    max-width: 100%
}


@keyframes soft-animation {
    100% {
      transform: translateY(-40px) scale(1.05);
    }
  }

.obj-fit {
    object-fit: cover !important;
    height: 260px;
}

.logo_image {
    max-width: 100px;
    max-height: 50px;
}

h1,h2 {
	color:rgb(47, 40, 112);
}

h3{
	color: rgb(135, 49, 130);
	font-size: 22px;
}

h4 {
    color: black;
	font-size: 18px;
}

#main {
	background-color: #f9f9f9;
	padding: 16px;
	border-radius: 8px;
}

label, .table-header {
	font-weight: bold;
}

.pointer {
    cursor: pointer;
}

body {
	color: #555;
    background-image: url(/assets/image/backdrop-home.jpg);
	background-repeat: no-repeat;
	background-size: cover;
    background-attachment: fixed;
}

#backdrop {
	background-image: url(/assets/image/backdrop-home.jpg);
	background-repeat: no-repeat;
	background-size: cover;
    background-attachment: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	/* position: absolute; */
	z-index: -10000;
}

#role-warning {
	font-weight: bold;
	color: red;
}

.filter {
	width: 175px;
	float: left;
}

.filters {
	max-width: 800px;
    float: right
}