#main-wrapper[data-layout=vertical] .app-header.fixed-header {
	-webkit-transition: 0.2s ease-in;
	transition: 0.2s ease-in
}
#main-wrapper[data-layout=vertical] .app-header.fixed-header .notification
	{
	top: 20px
}
#main-wrapper[data-layout=vertical] .app-header.fixed-header .navbar {
	background: #fff;
	padding: 0 15px;
	border-radius: 15px;
	-webkit-box-shadow: 1px 0px 20px 0px rgba(0, 0, 0, 0.12);
	box-shadow: 1px 0px 20px 0px rgba(0, 0, 0, 0.12);
	margin-top: 15px
}
.page-wrapper {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
    background-color: #a7b1a7a6;
}
.body-wrapper {
	position: relative;
	min-height: calc(100vh - var(--navbar-height) - var(--footer-height));
}
.content-wrapper {
	position: relative;
	min-height: 100%;
}
.body-wrapper::before {
	content: "";
	background-position: bottom;
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	opacity: 0.5;
}
.body-wrapper>.container-fluid, .body-wrapper>.container-lg,
	.body-wrapper>.container-md, .body-wrapper>.container-sm, .body-wrapper>.container-xl,
	.body-wrapper>.container-xxl {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px;
	-webkit-transition: 0.2s ease-in;
	transition: 0.2s ease-in
}
@media ( max-width :767.98px) {
	.body-wrapper>.container-fluid, .body-wrapper>.container-lg,
		.body-wrapper>.container-md, .body-wrapper>.container-sm,
		.body-wrapper>.container-xl, .body-wrapper>.container-xxl {
		padding: 30px 20px
	}
}
#main-wrapper[data-layout=vertical][data-header-position=fixed] .app-header
	{
	position: fixed;
	z-index: 10
}
#main-wrapper[data-layout=vertical][data-header-position=fixed] .body-wrapper>.container-fluid,
	#main-wrapper[data-layout=vertical][data-header-position=fixed] .body-wrapper>.container-lg,
	#main-wrapper[data-layout=vertical][data-header-position=fixed] .body-wrapper>.container-md,
	#main-wrapper[data-layout=vertical][data-header-position=fixed] .body-wrapper>.container-sm,
	#main-wrapper[data-layout=vertical][data-header-position=fixed] .body-wrapper>.container-xl,
	#main-wrapper[data-layout=vertical][data-header-position=fixed] .body-wrapper>.container-xxl
	{
	padding-top: calc(70px + 15px)
}
@media ( min-width :1200px) {
	#main-wrapper[data-layout=vertical][data-header-position=fixed][data-sidebartype=mini-sidebar] .app-header
		{
		width: 100%
	}
	#main-wrapper[data-layout=vertical][data-header-position=fixed] .app-header
		{
		width: calc(100% - 270px)
	}
}

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Roboto';
	font-family: 'Exo2';
}
body{
    background: #fff;
}

.dpdc-header{
    text-align: center;
    font-weight: bold;
}

.errorMessage{
    font-size: 12px;
    color: red;
    text-align: center;
    font-weight: bold;
}
.errorDescription{
    padding: 24px;
    font-size: 18px;
    color: red;
    text-align: center;
    font-weight: bold;
}

.search-container{
    position: relative;
    min-width: 400px;
    max-width: 600;
    text-align: center;
    background: #fff;
    border: 2px solid #ccc;
}
.navbar {
	height: var(--navbar-height);
	background-color: #06477f;
	display: flex;
	justify-content: center;
}
.navbar::before {
	background-position: bottom;
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
}
.navbar-image{
    position: absolute;
	height: var(--navbar-height);
}

.footer {
	left: 0;
	bottom: 0;
	background: rgb(255, 255, 205);
	min-height: var(--footer-height);
}
.copyright{
	background-color: var(--yellow-2);
	padding: 1px;
	font-weight: bold;
	text-align: center;
	font-size: 12px;
}

#output{
    position: absolute;
    width: 300px;
    top: -75px;
    left: 0;
    color: #fff;
}

#output.alert-success{
    background: rgb(25, 204, 25);
}

#output.alert-danger{
    background: rgb(228, 105, 105);
}

.search-container::before,.search-container::after{
    content: "";
    position: absolute;
    width: 100%;height: 100%;
    top: 3.5px;left: 0;
    background: #ccc;
    z-index: -1;
    -webkit-transform: rotateZ(4deg);
    -moz-transform: rotateZ(4deg);
    -ms-transform: rotateZ(4deg);
    border: 1px solid #ccc;
}

.search-container::after{
    top: 5px;
    z-index: -2;
    -webkit-transform: rotateZ(-2deg);
    -moz-transform: rotateZ(-2deg);
    -ms-transform: rotateZ(-2deg);
}

.avatar{
    width: 250px;
    height: 40px;
    margin: 0px 0px 20px 25px;
    background-image: url("/static/images/dpdc/login-logo.gif");
}

.form-box input{
    width: 94%;
    padding: 10px;
    text-align: center;
    height:25px;
    border: 1px solid #ccc;
    background: #fafafa;
    transition:0.2s ease-in-out;
}

.form-box select{
    width: 100%;
    padding: 10px;
    text-align: center;
	alignment-adjust:middle;
    height:40px;
    border: 1px solid #ccc;;
    background: #fafafa;
    transition:0.2s ease-in-out;
}

#customerNumber{
    height: 40px;
}

#searchButton, #retryButton{
    font-weight: bold;
}

.logo{
    height: 40px;
}

.logo-box{
    padding: 10px 0px;
}

.logo-container{
    padding: 0px;
    width: auto;
}


.footer{
    width: 100%;
    padding: 0px;
    height: var(--footer-height);
}

.label{
  margin-top: 25px;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

th, td {
    text-align: center;
    vertical-align: middle;
}

.btn{
	font-weight: bold;
}

.btn:hover {
	color: #000;
}

.button-search{
	background-color: var(--yellow-2);
	border: var(--yellow-2);
	border-style: solid;
}

.button-search:disabled {
	background-color: #dddddd;
	border: #dddddd;
	border-style: solid;
	color: #222222;
	opacity: 0.75;
}

.button-search:hover {
	background-color: #fff;
	border: var(--yellow-2);
	border-style: outset;
}

.button-reset{
	background-color: var(--blue-d);
	border: var(--blue-d);
	border-style: solid;
	color: #fff;
}

.button-reset:hover {
	background-color: #fff;
	border: var(--blue-d);
	border-style: outset;
}

.button-reset-card{
	background-color: var(--blue-2);
	border: var(--blue-2);
	border-style: solid;
}

.button-reset-card:hover {
	background-color: #fff;
	border: var(--blue-2);
	border-style: outset;
}

.button-print {
    min-width: 350px;
    max-width: 500px;
}

.right-table {
    text-align: right;
    padding: 0px 15px 0px 0px !important;
}

.left-table {
    text-align: left;
    padding: 0px 0px 0px 15px !important;
}