@font-face {
    font-family: 'kkrechner-icons';
    src:  url('../Fonts/kkrechner-icons.eot?swg2fp');
    src:  url('../Fonts/kkrechner-icons.eot?swg2fp#iefix') format('embedded-opentype'),
        url('../Fonts/kkrechner-icons.ttf?swg2fp') format('truetype'),
        url('../Fonts/kkrechner-icons.woff?swg2fp') format('woff'),
        url('../Fonts/kkrechner-icons.svg?swg2fp#kkrechner-icons') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.kkrechner-icons {
    font-family: 'kkrechner-icons' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.kkrechner {
    margin: 20px 0;
    padding: 0 15px;
    border: 2px solid #1f3e8c;
}

.kkrechner-header {
    margin: 0px -15px 20px;
    padding: 10px 15px;
    background: #1f3e8c;
    color: #fff;
}

.input-inline-text {
    display: table;
    width: 100%;
}
    .input-inline-text > * {
        display: table-cell;
    }
    
    .input-inline-text > span {
        padding-left: 10px;
        width: 20px;
    }
        .input-inline-text > span > span {
            display: block;
            width: 35px;
        }

.kkrechner-result, .kkrechner-results-header, .kkrechner-reset, .kkrechner-send, .kkrechner-send-msg {
    margin-bottom: 20px;
}

.kkrechner-results-header {
    display: block;
    font-weight: bold;
}

.kkrechner-result {
    padding: 17.25px;
    background: #fff;
    box-shadow: 1px 1px 2px #777;
    font-weight: bold;
    margin-top: -10px;
}

.kkrechner-results .kkrechner-result:last-of-type {
    margin-bottom: 20px;
}

.kkrechner-result-name {
    color: #7db816;
}

.kkrechner-result-value {
    float: right;
}

.kkrechner-reset {
    background: none;
    border: none;
    padding: 0;
}
    .kkrechner-reset .kkrechner-icons {
        vertical-align: text-bottom;
        color: #1f3e8c;
    }

.kkrechner-note {
    display: block;
    margin-bottom: 20px;
}

.kkrechner-noresults {
    opacity: .5;
}
    .kkrechner-noresults .kkrechner-result-name {
        color: inherit;
    }
    
    .kkrechner-noresults .kkrechner-result-value, .kkrechner-noresults .kkrechner-reset, .kkrechner-noresults .kkrechner-note {
        display: none;
    }

.kkrechner-btn-group > .kkrechner-btn {
    padding: 3.25px 15px;
    background: #ccc;
    color: #333;
    border: 1px solid #777;
    border-radius: 0;
    font-weight: normal;
    position: relative;
    float: left;
}
    .kkrechner-btn-group > .kkrechner-btn + .kkrechner-btn {
        margin-left: -1px;
    }
    
    .kkrechner-btn-group > .kkrechner-btn:first-child {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    
    .kkrechner-btn-group > .kkrechner-btn:last-child {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }

.kkrechner-extended-length .kkrechner-extended-weight, .kkrechner-extended-weight .kkrechner-extended-length {
    display: none;
}

.kkrechner-extended-length .kkrechner-btn#mode-length, .kkrechner-extended-weight .kkrechner-btn#mode-weight {
    background: #333;
    color: #fff;
    font-weight: bold;
}

.kkrechner-send .btn {
    color: #fff;
    background-color: #1f3e8c;
    border-color: #1f3e8c;
    white-space: normal;
}
    .kkrechner-send .btn:not([disabled]):hover, .kkrechner-send .btn:not([disabled]):focus {
        background-color: #172e69;
        border-color: #172e69;
    }
    
    .kkrechner-send .btn[disabled] {
        filter: none;
        opacity: 1;
    }

.kkrechner-send-msg > * {
    display: table-cell;
}
    .kkrechner-send-msg .kkrechner-icons {
        margin-right: 10px;
        color: #1f3e8c;
    }

.kkrecher form {
    margin: 0;
}

.kkrechner-error, .kkrechner-error .kkrechner-error-detail {
    display: none;
    color: #d80000;
}
.kkrechner .has-error .form-control {
    border-color: #d80000;
}
.kkrechner-error, .kkrechner-error .kkrechner-errror-detail + .kkrechner-error-detail {
    margin-top: 10px;
}

.kkrechner .form-group.has-error .kkrechner-error {
    display: block;
}

.kkrechner .form-group.has-error#not_valid .kkrechner-error-detail#not_valid,
.kkrechner .form-group.has-error#out_of_bounds .kkrechner-error-detail#out_of_bounds,
.kkrechner .form-group.has-error#out_of_lower_bounds .kkrechner-error-detail#out_of_lower_bounds,
.kkrechner .form-group.has-error#out_of_upper_bounds .kkrechner-error-detail#out_of_upper_bounds,
.kkrechner .form-group.has-error#too_small .kkrechner-error-detail#too_small {
    display: block;
}

.kkrechner select {
    height: unset;
}

.kkrechner-image {
    margin-bottom: 20px;
    width: 100%;
    height: auto;
    display: none;
}

.kkrechner-form-container .powermail_form {
    width: 50%;
}

.kkrechner-form-container .frame-header h5, .kkrechner-form-container .powermail_form .powermail_legend {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1f3e8c;
    margin-bottom: 30px !important;
}

@media screen and (max-width: 767px) {
    .kkrechner input {
        margin-top: 5px;
    }
    
    .kkrechner-extended .kkrechner-btn-group {
        width: 100%;
    }
    
    .kkrechner-extended .kkrechner-btn {
        width: 50%;
        margin-bottom: 5px;
    }
    
    .kkrechner-form-container .powermail_form {
        width: 100%;
    }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    .kkrechner-extended .kkrechner-btn-group {
        margin-right: -15px;
    }
    
    .kkrechner-extended .kkrechner-btn {
        padding-left: 10px;
        padding-right: 10px;
    }
}