/* make code color normal */
code {
    color: inherit;
}

/* Taken from https://github.com/Khan/khan-exercises/blob/master/css/khan-exercise.css line 136 */
.graphie svg {
    position: absolute !important;
    top: 0;
    left: 0;
}

/* Colors to match graphie colors */
.graphie_blue {
    color: #6495ED;
}
.graphie_orange {
    color: #FFA500;
}
.graphie_pink {
    color: #FF00AF;
}
.graphie_red {
    color: #DF0030;
}
.graphie_green {
    color: #28AE7B;
}
.graphie_gray {
    color: gray;
}
.graphie_purple {
    color: #9D38BD;
}

/* Validation for buttons */
.btn-outline-success.is-valid::before {
    font-family: 'bootstrap-icons';
    content: '\F26B\00a0'; /* check-circle + space */
    vertical-align: -.125em;
    line-height: 1;
}
.btn-outline-danger.is-invalid::before {
    font-family: 'bootstrap-icons';
    content: '\F333\00a0'; /* exclamation-circle + space */
    vertical-align: -.125em;
    line-height: 1;
}

/* validation for checkbox */
.form-check-input.is-valid ~ .form-check-label::after {
    font-family: 'bootstrap-icons';
    content: '\00a0\F26B'; /* space + check-circle */
    vertical-align: -.125em;
    line-height: 1;
    color: #198754;
}
.form-check-input.is-invalid ~ .form-check-label::after {
    font-family: 'bootstrap-icons';
    content: '\00a0\F333'; /* space + exclamation-circle */
    vertical-align: -.125em;
    line-height: 1;
    color: #dc3545;
}
.form-check-input.is-valid ~ .form-check-label,
.form-check-input.is-invalid ~ .form-check-label {
    color: inherit;
}

/* validation for textbox & list: use bootstrap-icons instead of built-in bootstrap validation icons */
.form-select.is-valid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23198754' class='bi bi-check-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E")
    !important;
    background-size: 16px 12px, calc(0.7em + 0.375rem) calc(0.7em + 0.375rem)
    !important;
}
.form-select.is-invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc3545' class='bi bi-exclamation-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/%3E%3C/svg%3E")
    !important;
    background-size: 16px 12px, calc(0.7em + 0.375rem) calc(0.7em + 0.375rem)
    !important;
}

/* validation for textbox: use bootstrap-icons instead of built-in bootstrap validation icons */
input[type="text"].form-control.is-valid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23198754' class='bi bi-check-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E")
    !important;
    background-size: calc(0.7em + 0.375rem) calc(0.7em + 0.375rem)
    !important;
}
input[type="text"].form-control.is-invalid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc3545' class='bi bi-exclamation-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/%3E%3C/svg%3E")
    !important;
    background-size: calc(0.7em + 0.375rem) calc(0.7em + 0.375rem)
    !important;
}

/* kekse tooltips */
.kekse-tooltip {
    margin: 0 !important;
    background: #333;
    color: white;
    padding: 4px 8px;
    font-size: 13px;
    border-radius: 4px !important;
    z-index: 1000;
}
.kekse-tooltip-arrow,
.kekse-tooltip-arrow::before {
    position: absolute;
    width: 8px;
    height: 8px;
    z-index: -1;
}
.kekse-tooltip-arrow::before {
    content: '';
    transform: rotate(45deg);
    background: #333;
}
.kekse-tooltip[data-popper-placement^='top'] > .kekse-tooltip-arrow {
    bottom: -4px;
}
.kekse-tooltip[data-popper-placement^='bottom'] > .kekse-tooltip-arrow {
    top: -4px;
}
.kekse-tooltip[data-popper-placement^='left'] > .kekse-tooltip-arrow {
    right: -4px;
}
.kekse-tooltip[data-popper-placement^='right'] > .kekse-tooltip-arrow {
    left: -4px;
}

/* special code tag usage in form tooltips */
.kexe-predicate-form-tooltip code {
    font-size: inherit;
}