/* ABD theme - herschreven op basis van het aangeleverde CSS-bestand.
*
* Aannames:
* - "C641C" is geïnterpreteerd als #C6411C
* - "#f f f f f f" is genormaliseerd naar #FFFFFF
*
* Kleurmapping:
* - Primary:   #000000
* - Secondary: #C6411C
* - White:     #FFFFFF
* - Gray:      #878787
*/

:root {
   --abd-primary: #000000;
   --abd-primary-hover: #1a1a1a;
   --abd-primary-active: #262626;
   --abd-primary-light: #f2f2f2;

   --abd-secondary: #C6411C;
   --abd-secondary-hover: #b23a19;
   --abd-secondary-active: #9e3416;
   --abd-secondary-light: #f6e2dd;

   --abd-white: #ffffff;
   --abd-gray: #878787;
   --abd-gray-light: #f2f2f2;
   --abd-gray-mid: #d9d9d9;
   --abd-gray-border: #bfbfbf;
   --abd-gray-border-hover: #cfcfcf;

   --text-color: #000000;
   --text-color-gray: #878787;
   --text-color-danger: #d9534f;

   --success: #5cb85c;
   --success-hover: #449d44;
   --success-active: #398439;
   --success-border: #2d672d;
   --success-border-hover: #419641;

   --warning: #ffb400;
   --warning-hover: #cc9000;
   --warning-active: #a87700;
   --warning-border: #805a00;
   --warning-border-hover: #c28900;

   --danger: #d9534f;
   --danger-hover: #c9302c;
   --danger-active: #ac2925;
   --danger-border: #8b211e;
   --danger-border-hover: #c12e2a;
}

a {
   color: var(--abd-secondary);
}

a:hover,
a:focus {
   color: var(--abd-secondary-hover);
}

.crtl-badge--primairy {
   background-color: var(--abd-primary);
}

.crtl-badge--secondary {
   background-color: var(--abd-secondary);
}

.crtl-badge--alert {
   background-color: var(--danger);
}

.crtl-icon--primary {
   color: var(--abd-primary);
}

.crtl-icon--secondary {
   color: var(--abd-secondary);
}

.crtl-label--primary {
   background: var(--abd-primary);
}

.crtl-label--secondary {
   background: var(--abd-secondary);
}

[class^="crtl-datepicker__picker__calendar__date"] label::after {
   background: var(--abd-primary);
}

[class^="crtl-datepicker__picker__calendar__date"] input[type="radio"]:checked ~ label em {
   color: var(--abd-primary);
}

.form-control:focus {
   border-color: var(--abd-primary);
}

.form-group .error-field input,
.form-group-inline .error-field input {
   border-color: var(--danger);
   color: var(--danger);
}

.radio input[type="radio"]:focus + label::before,
.checkbox input[type="radio"]:focus + label::before,
.radio input[type="checkbox"]:focus + label::before,
.checkbox input[type="checkbox"]:focus + label::before {
   border-color: var(--abd-primary);
}

.radio input[type="radio"]:checked + label::after,
.checkbox input[type="radio"]:checked + label::after {
   background: var(--abd-primary);
}

.radio input[type="checkbox"]:checked + label::after,
.checkbox input[type="checkbox"]:checked + label::after {
   color: var(--abd-primary);
}

.crtl-infobox__content {
   background-color: var(--abd-primary-light);
}

.crtl-infobox--pointer-left .crtl-infobox__content::before,
.crtl-infobox--pointer-right .crtl-infobox__content::before {
   border-color: transparent transparent var(--abd-primary-light);
}

.crtl-message--success::before {
   border-color: rgba(92, 184, 92, 0.3);
}

.crtl-message--success::after {
   content: "\e902";
   color: var(--success);
}

.crtl-message--warning::before {
   border-color: rgba(255, 180, 0, 0.3);
}

.crtl-message--warning::after {
   content: "\e903";
   color: var(--warning);
}

.crtl-message--error::before {
   border-color: rgba(217, 83, 79, 0.3);
}

.crtl-message--error::after {
   content: "\e904";
   color: var(--danger);
}

.crtl-form-list__row__infobox-toggle {
   color: var(--abd-secondary);
}

.crtl-stepper {
   display: flex;
   height: 55px;
   -ms-flex-pack: justify;
   justify-content: space-between;
   margin: 3px 5px 35px;
   padding: 0 3px;
   position: relative;
}

.crtl-stepper::before {
   background: var(--abd-gray-light);
   content: "";
   left: 0;
   position: absolute;
   right: 0;
   transition: all .2s ease;
   border-radius: 5px;
   bottom: 6px;
   height: 10px;
}

@media (min-width: 768px) {
   .crtl-stepper {
       height: 55px;
       padding: 0 30px;
       margin-left: 0;
       margin-right: 0;
   }

   .crtl-stepper::after {
       background: var(--abd-primary);
       border-radius: 5px 0 0 5px;
       bottom: 6px;
       content: "";
       height: 10px;
       left: 0;
       position: absolute;
       right: 0;
       transition: all .2s ease;
       width: 30px;
   }
}

.crtl-stepper > [class^="crtl-stepper__item"] {
   -ms-flex: 1 1 0;
   flex: 1 1 0;
   position: relative;
}

.crtl-stepper > [class^="crtl-stepper__item"]::before {
   background: transparent;
   content: "";
   left: 0;
   position: absolute;
   right: 0;
   transition: all .2s ease;
   border-radius: 5px;
   bottom: 6px;
   height: 10px;
}

.crtl-stepper > [class^="crtl-stepper__item"] a {
   display: block;
   height: 100%;
   min-width: 40px;
   position: absolute;
   text-align: center;
   transform: translateX(-50%);
   z-index: 1;
}

@media (min-width: 768px) {
   .crtl-stepper > [class^="crtl-stepper__item"] a {
       height: 55px;
   }
}

.crtl-stepper > [class^="crtl-stepper__item"] a,
.crtl-stepper > [class^="crtl-stepper__item"] a:active,
.crtl-stepper > [class^="crtl-stepper__item"] a:focus,
.crtl-stepper > [class^="crtl-stepper__item"] a:hover {
   color: var(--abd-gray);
   text-decoration: none;
}

.crtl-stepper > [class^="crtl-stepper__item"] a[href]:hover {
   color: var(--abd-secondary);
}

.crtl-stepper > [class^="crtl-stepper__item"] a[href]:hover::after {
   transform: scale(1.2);
}

.crtl-stepper > [class^="crtl-stepper__item"] a::after {
   background: var(--abd-gray);
   border-radius: 50%;
   border: solid 6px var(--abd-white);
   bottom: 0;
   content: "";
   display: block;
   left: 50%;
   position: absolute;
   transition: all .2s ease;
   height: 22px;
   margin-left: -11px;
   width: 22px;
}

.crtl-stepper > [class^="crtl-stepper__item"] a [class^="crtl-stepper__item__icon"] {
   display: block;
   font-size: 22px;
}

.crtl-stepper > [class^="crtl-stepper__item"] a [class^="crtl-stepper__item__icon"]:before {
   left: 50%;
   position: absolute;
   height: 18px;
   width: 22px;
   text-align: center;
   top: 0;
   transform: translateX(-50%);
}

@media (min-width: 768px) {
   .crtl-stepper > [class^="crtl-stepper__item"] a [class^="crtl-stepper__item__icon"] {
       display: none;
   }
}

.crtl-stepper > [class^="crtl-stepper__item"] a [class^="crtl-stepper__item__text"] {
   font-size: 16px;
   text-transform: uppercase;
   white-space: nowrap;
}

@media (max-width: 480px) {
   .crtl-stepper > [class^="crtl-stepper__item"] a [class^="crtl-stepper__item__text"] {
       display: none;
   }
}

.crtl-stepper > [class^="crtl-stepper__item"]:first-child a {
   margin-left: -17px;
   transform: translateX(0);
}

@media (min-width: 768px) {
   .crtl-stepper > [class^="crtl-stepper__item"]:first-child a {
       margin-left: -30px;
   }
}

.crtl-stepper > [class^="crtl-stepper__item"]:first-child a::after {
   left: 20px;
}

@media (min-width: 768px) {
   .crtl-stepper > [class^="crtl-stepper__item"]:first-child a::after {
       left: 30px;
   }
}

.crtl-stepper > [class^="crtl-stepper__item"]:first-child a [class^="crtl-stepper__item__icon"]::before {
   transform: translateX(0);
   left: 9px;
}

.crtl-stepper > [class^="crtl-stepper__item"]:last-child {
   -ms-flex-positive: 0;
   flex-grow: 0;
}

@media (min-width: 768px) {
   .crtl-stepper > [class^="crtl-stepper__item"]:last-child.crtl-stepper__item--completed::before {
       width: 30px;
   }
}

.crtl-stepper > [class^="crtl-stepper__item"]:last-child a {
   transform: translateX(-100%);
   margin-left: 17px;
}

@media (min-width: 768px) {
   .crtl-stepper > [class^="crtl-stepper__item"]:last-child a {
       margin-left: 30px;
   }

   .crtl-stepper > [class^="crtl-stepper__item"]:last-child a::after {
       right: 19px;
       left: auto;
   }
}

.crtl-stepper > [class^="crtl-stepper__item"]:last-child a [class^="crtl-stepper__item__icon"]::before {
   transform: translateX(0);
   left: auto;
   right: 9px;
}

.crtl-stepper > [class^="crtl-stepper__item"].crtl-stepper__item--completed::before {
   background-color: var(--abd-primary);
}

.crtl-stepper > [class^="crtl-stepper__item"].crtl-stepper__item--completed a::after {
   border-color: var(--abd-primary);
   background: var(--abd-primary-hover);
}

.crtl-stepper > [class^="crtl-stepper__item"].crtl-stepper__item--active a,
.crtl-stepper > [class^="crtl-stepper__item"].crtl-stepper__item--active a:active,
.crtl-stepper > [class^="crtl-stepper__item"].crtl-stepper__item--active a:focus,
.crtl-stepper > [class^="crtl-stepper__item"].crtl-stepper__item--active a:hover {
   text-decoration: none;
   color: var(--abd-primary);
}

.crtl-stepper > [class^="crtl-stepper__item"].crtl-stepper__item--active a::after {
   border-color: var(--abd-primary);
   background: var(--abd-white);
}

.btn-default {
   color: var(--abd-primary);
   background-color: var(--abd-gray-light);
   border-color: var(--abd-gray-light);
}

.btn-default:focus,
.btn-default.focus {
   color: var(--abd-primary);
   background-color: var(--abd-gray-mid);
   border-color: var(--abd-gray-border);
}

.btn-default:hover {
   color: var(--abd-primary);
   background-color: var(--abd-gray-mid);
   border-color: var(--abd-gray-border-hover);
}

.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
   color: var(--abd-primary);
   background-color: var(--abd-gray-mid);
   border-color: var(--abd-gray-border-hover);
}

.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus {
   color: var(--abd-primary);
   background-color: #c7c7c7;
   border-color: var(--abd-gray-border);
}

.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
   background-image: none;
}

.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus {
   background-color: var(--abd-gray-light);
   border-color: var(--abd-gray-light);
}

.btn-default .badge {
   color: var(--abd-gray-light);
   background-color: var(--abd-primary);
}

.btn-primary {
   color: var(--abd-white);
   background-color: var(--abd-primary);
   border-color: var(--abd-primary);
}

.btn-primary:focus,
.btn-primary.focus {
   color: var(--abd-white);
   background-color: var(--abd-primary-hover);
   border-color: var(--abd-primary);
}

.btn-primary:hover {
   color: var(--abd-white);
   background-color: var(--abd-primary-hover);
   border-color: var(--abd-primary-active);
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
   color: var(--abd-white);
   background-color: var(--abd-primary-hover);
   border-color: var(--abd-primary-active);
}

.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
   color: var(--abd-white);
   background-color: var(--abd-primary-active);
   border-color: var(--abd-primary);
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
   background-image: none;
}

.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
   background-color: var(--abd-primary);
   border-color: var(--abd-primary);
}

.btn-primary .badge {
   color: var(--abd-primary);
   background-color: var(--abd-white);
}

.btn-success {
   color: var(--abd-white);
   background-color: var(--success);
   border-color: var(--success);
}

.btn-success:focus,
.btn-success.focus {
   color: var(--abd-white);
   background-color: var(--success-hover);
   border-color: var(--success-border);
}

.btn-success:hover {
   color: var(--abd-white);
   background-color: var(--success-hover);
   border-color: var(--success-border-hover);
}

.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
   color: var(--abd-white);
   background-color: var(--success-hover);
   border-color: var(--success-border-hover);
}

.btn-success:active:hover,
.btn-success.active:hover,
.open > .dropdown-toggle.btn-success:hover,
.btn-success:active:focus,
.btn-success.active:focus,
.open > .dropdown-toggle.btn-success:focus,
.btn-success:active.focus,
.btn-success.active.focus,
.open > .dropdown-toggle.btn-success.focus {
   color: var(--abd-white);
   background-color: var(--success-active);
   border-color: var(--success-border);
}

.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
   background-image: none;
}

.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled.focus,
.btn-success[disabled].focus,
fieldset[disabled] .btn-success.focus {
   background-color: var(--success);
   border-color: var(--success);
}

.btn-success .badge {
   color: var(--success);
   background-color: var(--abd-white);
}

.btn-info {
   color: var(--abd-white);
   background-color: var(--abd-secondary);
   border-color: var(--abd-secondary);
}

.btn-info:focus,
.btn-info.focus {
   color: var(--abd-white);
   background-color: var(--abd-secondary-hover);
   border-color: var(--abd-secondary-active);
}

.btn-info:hover {
   color: var(--abd-white);
   background-color: var(--abd-secondary-hover);
   border-color: var(--abd-secondary-active);
}

.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
   color: var(--abd-white);
   background-color: var(--abd-secondary-hover);
   border-color: var(--abd-secondary-active);
}

.btn-info:active:hover,
.btn-info.active:hover,
.open > .dropdown-toggle.btn-info:hover,
.btn-info:active:focus,
.btn-info.active:focus,
.open > .dropdown-toggle.btn-info:focus,
.btn-info:active.focus,
.btn-info.active.focus,
.open > .dropdown-toggle.btn-info.focus {
   color: var(--abd-white);
   background-color: var(--abd-secondary-active);
   border-color: var(--abd-secondary-active);
}

.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
   background-image: none;
}

.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled.focus,
.btn-info[disabled].focus,
fieldset[disabled] .btn-info.focus {
   background-color: var(--abd-secondary);
   border-color: var(--abd-secondary);
}

.btn-info .badge {
   color: var(--abd-secondary);
   background-color: var(--abd-white);
}

.btn-warning {
   color: var(--abd-white);
   background-color: var(--warning);
   border-color: var(--warning);
}

.btn-warning:focus,
.btn-warning.focus {
   color: var(--abd-white);
   background-color: var(--warning-hover);
   border-color: var(--warning-border);
}

.btn-warning:hover {
   color: var(--abd-white);
   background-color: var(--warning-hover);
   border-color: var(--warning-border-hover);
}

.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
   color: var(--abd-white);
   background-color: var(--warning-hover);
   border-color: var(--warning-border-hover);
}

.btn-warning:active:hover,
.btn-warning.active:hover,
.open > .dropdown-toggle.btn-warning:hover,
.btn-warning:active:focus,
.btn-warning.active:focus,
.open > .dropdown-toggle.btn-warning:focus,
.btn-warning:active.focus,
.btn-warning.active.focus,
.open > .dropdown-toggle.btn-warning.focus {
   color: var(--abd-white);
   background-color: var(--warning-active);
   border-color: var(--warning-border);
}

.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
   background-image: none;
}

.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled.focus,
.btn-warning[disabled].focus,
fieldset[disabled] .btn-warning.focus {
   background-color: var(--warning);
   border-color: var(--warning);
}

.btn-warning .badge {
   color: var(--warning);
   background-color: var(--abd-white);
}

.btn-danger {
   color: var(--abd-white);
   background-color: var(--danger);
   border-color: var(--danger);
}

.btn-danger:focus,
.btn-danger.focus {
   color: var(--abd-white);
   background-color: var(--danger-hover);
   border-color: var(--danger-border);
}

.btn-danger:hover {
   color: var(--abd-white);
   background-color: var(--danger-hover);
   border-color: var(--danger-border-hover);
}

.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
   color: var(--abd-white);
   background-color: var(--danger-hover);
   border-color: var(--danger-border-hover);
}

.btn-danger:active:hover,
.btn-danger.active:hover,
.open > .dropdown-toggle.btn-danger:hover,
.btn-danger:active:focus,
.btn-danger.active:focus,
.open > .dropdown-toggle.btn-danger:focus,
.btn-danger:active.focus,
.btn-danger.active.focus,
.open > .dropdown-toggle.btn-danger.focus {
   color: var(--abd-white);
   background-color: var(--danger-active);
   border-color: var(--danger-border);
}

.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
   background-image: none;
}

.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled.focus,
.btn-danger[disabled].focus,
fieldset[disabled] .btn-danger.focus {
   background-color: var(--danger);
   border-color: var(--danger);
}

.btn-danger .badge {
   color: var(--danger);
   background-color: var(--abd-white);
}