/* Show it is fixed to the top */
html, body {
    height: 100%;
}
html {
    position: relative;
    min-height: 100%;
}

body {
    font-family: 'Evonik Prokyon Regular';
}

header {
    position: relative;
    z-index: 1031;
}

main {
    padding-bottom: 100px;
    margin-top: 227px;
}

header div.fixed-top {
    background-color: #fff;
}

* {
    border-radius: 0 !important;
}

@font-face {
    font-family: 'Evonik Prokyon Regular';
    src: url(/fonts/EvonikProkyon-Regular.woff);
}

.prok {
    font-family: 'Evonik Prokyon Regular';
}

@font-face {
    font-family: 'Evonik Prokyon Medium';
    src: url(/fonts/EvonikProkyon-Medium.woff);
}

.prok-medium {
    font-family: 'Evonik Prokyon Medium';
}

@font-face {
    font-family: 'Evonik Prokyon Bold';
    src: url(/fonts/EvonikProkyon-Bold.woff);
}

.prok-bold {
    font-family: 'Evonik Prokyon Bold';
}

@font-face {
    font-family: 'Evonik Antares';
    src: url(/fonts/EvonikAntares-Regular.woff);
}

.atares {
    font-family: 'Evonik Antares';
}

a, a:hover, a:focus, a:visited {
    color: #000;
    font-family: 'Evonik Prokyon Medium';
    text-transform: uppercase;
}

span[role="button"] {
    cursor: pointer;
}

.bg-light {
    background-color: #FFF !important;
}

.breadcrumb {
    padding: 0.5rem 1rem;
    background-color: #dbd7d4;
}

.form-control:focus {
    color: #000;
    background-color: #fff;
    border-color: #991d85;
    outline: 0;
    box-shadow: none;
}

.form-signin {
    width: 100%;
    max-width: 420px;
    padding: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.card-header {
    background-color: #dbd7d4;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #e9e6df;
}

.input-group-text {
    background-color: #e9e6df;
    border: 1px solid #e9e6df;
}

hr {
    border: 0;
    clear: both;
    display: block;
    width: 96%;
    background-color: #eee;
    height: 1px;
}

h1, .h1 {
    background-color: #991d85;
    padding: 8px 15px 6px 15px;
    color: #fff;
    margin-top: 0;
    font-size: 30px;
    margin-bottom: 33px;
    text-transform: uppercase;
    font-family: 'Evonik Prokyon Medium';
    word-spacing: 0.2em;
}

.pointer {
    cursor: pointer;
}

.btn-primary.disabled, .btn-primary:disabled, .btn-primary, .page-item.active .page-link, .btn-secondary:hover,
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle {
    color: #fff !important;
    background-color: #991d85;
    border-color: #991d85;
}

    .btn-primary:hover {
        color: #fff;
        background-color: #000;
        border-color: #000;
    }

.btn-secondary {
    color: #fff;
    background-color: #000;
    border-color: #000;
}

.btn:focus, .btn.focus {
    box-shadow: none !important;
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #000;
}

.table th, .table td {
    border-top: 0;
}

.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
    border: none;
}

.footer {
    bottom: 0;
    display: none;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    line-height: 60px; /* Vertically center the text there */
    background-color: #e9e6df;
}

.input-error {
    border: 1px solid red !important;
}


.sortable, .dropdown-toggle, dropdown-menu a, dropdown-item {
    cursor: pointer !important;
}

select.selectpicker {
    display: block !important;
}



body > .container div.card {
    margin-bottom: 20px;
}

.footer > .container {
    padding-right: 15px;
    padding-left: 15px;
}

.code {
    font-size: 80%;
}

.hasnousers {
    background-color: rgba(220, 53, 69, 0.7) !important;
}


/*start password meter directive styles*/
.pass-meter {
    width: 100%;
    padding-top: 3px;
    padding-bottom: 4px;
}

    .pass-meter.hidden {
        display: none;
    }

.pass-meter-col {
    float: left;
    width: 25%;
    padding: 1px;
}

    .pass-meter-col .indicator {
        border-radius: 3px;
        background-color: #eee;
        height: 5px;
    }

    .pass-meter-col.poor .indicator {
        background-color: #ef4e3a;
    }

    .pass-meter-col.weak .indicator {
        background-color: #F27B1C;
    }

    .pass-meter-col.good .indicator {
        background-color: #66cc33;
    }

    .pass-meter-col.strong .indicator {
        background-color: #33A7E3;
    }

.pass-meter .pass-meter-message {
    width: 100%;
    text-align: right;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 10px;
    line-height: 10px;
    font-style: bold;
    color: #555;
    min-height: 7px;
}
/*end password meter directive styles*/

/*Start 404 page styles*/
.body404 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMC8yOS8xMiKqq3kAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAABHklEQVRIib2Vyw6EIAxFW5idr///Qx9sfG3pLEyJ3tAwi5EmBqRo7vHawiEEERHS6x7MTMxMVv6+z3tPMUYSkfTM/R0fEaG2bbMv+Gc4nZzn+dN4HAcREa3r+hi3bcuu68jLskhVIlW073tWaYlQ9+F9IpqmSfq+fwskhdO/AwmUTJXrOuaRQNeRkOd5lq7rXmS5InmERKoER/QMvUAPlZDHcZRhGN4CSeGY+aHMqgcks5RrHv/eeh455x5KrMq2yHQdibDO6ncG/KZWL7M8xDyS1/MIO0NJqdULLS81X6/X6aR0nqBSJcPeZnlZrzN477NKURn2Nus8sjzmEII0TfMiyxUuxphVWjpJkbx0btUnshRihVv70Bv8ItXq6Asoi/ZiCbU6YgAAAABJRU5ErkJggg==);
}

.error-template {
    padding: 40px 15px;
    text-align: center;
}

.error-actions {
    margin-top: 15px;
    margin-bottom: 15px;
}

    .error-actions .btn {
        margin-right: 10px;
    }
/*end 404 page styles*/

/* Start Graphical Bar*/
.graphicalbar td {
    padding: 0.15rem !important;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

.horizontal .progress-bar {
    float: left;
    height: 45px;
    width: 100%;
    padding: 12px 0;
}

.horizontal .progress-track {
    position: relative;
    width: 100%;
    height: 20px;
    background: #ebebeb;
}

.horizontal .progress-fill {
    position: relative;
    background: #666;
    height: 20px;
    width: 50%;
    color: #fff;
    text-align: center;
    font-family: "Lato","Verdana",sans-serif;
    font-size: 12px;
    line-height: 20px;
}

.rounded .progress-track,
.rounded .progress-fill {
    border-radius: 3px;
    box-shadow: inset 0 0 5px rgba(0,0,0,.2);
}
/* End Graphical Bar*/
/* show status as colors in selectbox */
/**************************************/
select.products.status.ng-not-empty.step-1,
select.products option.status.step-1 {
    background-color: #DC6B2F;	/* orange */
}

select.products.status.ng-not-empty.step-2,
select.products option.status.step-2 {
    background-color: #C99700;	/* gelb */
}

select.products.status.ng-not-empty.step-3,
select.products option.status.step-3 {
    background-color: #789D4A;	/* dunkelgrün */
}

select.products.status.ng-not-empty.step-4,
select.products option.status.step-4 {
    background-color: #991D85;	/* evonik purple */
	color: #fff;
}

select.products.status.ng-not-empty.step-5,
select.products option.status.step-5 {
    background-color: #991D85;	/* evonik purple */
	color: #fff;
}

select.products select option.status:hover {
    color: #000;
    background-color: #991d85 !important;
}
select.products option[disabled] {
    background-color: #fff;
}
/**************************************/
.list-group-item:hover {
    background-color: #e9e6df;
}

.form-inline .form-control {
    max-width: 100%;
}

.btn-petrol {
    background-color: #008C95;
    color: #fff;
}

.bg-secondary {
    background-color: #e9e6df !important;
}

h2, .h2 {
    background-color: #dbd7d4;
    padding: 8px 15px 6px 15px;
    color: #000;
    margin-top: 0;
    font-size: 30px;
    margin-bottom: 33px;
    text-transform: uppercase;
    font-family: 'Evonik Prokyon Medium';
    word-spacing: 0.2em;
}

.status-icon {
    max-height: 40px;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #991d85 !important;
}

.custom-control-label::before {
    background-color: #dbd7d4;
}

.tooltipicon {
    max-width: 20px;
}
/**********loader********/

.loader {
    width: 100%;
    height: 100%;
    padding: 15px;
    margin: auto;
    top: 400px;
    position: fixed;
}
.loader-inner {
    width: 52px;
    margin: auto;
}
@-webkit-keyframes ball-pulse-sync {
    33% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
    66% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes ball-pulse-sync {
    33% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
    66% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
.ball-pulse-sync > div:nth-child(1) {
    -webkit-animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
    animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
}
.ball-pulse-sync > div:nth-child(2) {
    -webkit-animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
    animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
}
.ball-pulse-sync > div:nth-child(3) {
    -webkit-animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
    animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
}
.ball-pulse-sync > div {
    background-color: #991D85;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block;
}
/* IE 11 fix */
tr.d-flex td, tr.d-flex th {display: block;}
.tooltip-inner {min-width: 450px;}