@import "~bootstrap/scss/mixins/_banner";
@include bsBanner("");

// scss-docs-start import-stack
@import "~bootstrap/scss/_functions";
// Configuration
// Include any default variable overrides here
@import "_variables";

// Include remainder of required Bootstrap stylesheets
@import "~bootstrap/scss/_variables";
@import "~bootstrap/scss/_mixins";

$enable-dark-mode: false;

@import "~bootstrap/scss/_maps";
@import "~bootstrap/scss/_utilities";

// Layout & components
@import "~bootstrap/scss/_root";
@import "~bootstrap/scss/_reboot";
@import "~bootstrap/scss/_type";
@import "~bootstrap/scss/_images";
@import "~bootstrap/scss/_containers";
@import "~bootstrap/scss/_grid";
@import "~bootstrap/scss/_tables";
@import "~bootstrap/scss/_forms";
@import "~bootstrap/scss/_buttons";
@import "~bootstrap/scss/_transitions";
@import "~bootstrap/scss/_dropdown";
@import "~bootstrap/scss/_button-group";
@import "~bootstrap/scss/_nav";
@import "~bootstrap/scss/_navbar";
@import "~bootstrap/scss/_breadcrumb";
@import "~bootstrap/scss/_pagination";
@import "~bootstrap/scss/_badge";
@import "~bootstrap/scss/_alert";
@import "~bootstrap/scss/_progress";
@import "~bootstrap/scss/_list-group";
@import "~bootstrap/scss/_close";
@import "~bootstrap/scss/_placeholders";

// Helpers
@import "~bootstrap/scss/_helpers";

// Utilities
@import "~bootstrap/scss/utilities/_api";
// scss-docs-end import-stack

@import "_mixins";
@import "_tables";
@import "_flatpickr";
@import "_fonts";

body {
    background-color: #EEE;
    font-family: arial, verdana, helvetica, sans-serif;
    text-align: left;
}

h1 {
    font-size: 161.6%;
    font-weight: bold;
}

h2 {
    background-color: #EEE;
    border-radius: 4px;
    font-size: 146.5%;
    font-weight: bold;
    padding: .5em;
    text-shadow: 1px 1px 0 #FFF;
}

h3 {
    color: #003366;
    font-size: 131%;
    font-weight: bold;
}

hr {
    margin-bottom: .5em;
    margin-top: .5em;
}

.installer-main {
    background-color: #FFF;
    border-radius: 5px;
    box-shadow: 0 2px 2px 0 rgba(50, 50, 50, 0.5);
    margin-bottom: 3%;
    margin-top: 3%;
    padding: 1em;
}

ul,
ol {
    padding: 5px 5px 5px 20px;
}

#logo {
    background: url("../img/koha-logo.gif") no-repeat top center;
    margin-bottom: .5em;
    margin-top: 0;

    a {
        border-bottom: none;
        display: block;
        height: 74px;
        text-indent: -1000px;
    }
}

.alert {
    p {
        margin-bottom: 0;
    }
}

.bg-danger {
    padding: .2em .4em;
}

.step a,
.step input {
    font-size: 2em;
}

td {
    input {
        font-size: 1.5em;
    }
}

.step,
th {
    text-align: right;
}

#footer {
    border-top: 1px solid #ccc;
    font-style: italic;
    padding-top: 1em;
    text-align: center;
}

.update_error {
    color: #dc3545;
    font-weight: bold;
}

.text-info {
    color: #0D6EFD !important;
}

.text-warning {
    color: #8a6804 !important;
    background-color: #fff1c1;
}

.checkbox {
    margin-bottom: 1em;
}

fieldset {
    &.rows {
        border-width: 0;
        clear: left;
        float: left;
        font-size: 90%;
        margin: .9em 0 0 0;
        padding: 0;
        width: 100%;

        legend {
            border: 0;
            font-size: 110%;
            font-weight: bold;
            margin-bottom: 0;
            margin-left: 1em;
        }

        label {
            float: left;
            font-weight: bold;
            margin-right: 1em;
            text-align: right;
            width: 9em;

            &.error {
                color: #cc0000;
                float: none;
                margin-left: 1em;
                width: auto;
            }

            &.form-label {
                display: block;
                float: none;
                margin: 0;
                text-align: left;
                width: auto;
            }
        }

        span.label {
            border-radius: 0;
            color: inherit;
            display: inline;
            float: left;
            font-size: inherit;
            font-weight: bold;
            line-height: 1;
            margin-right: 1em;
            padding: .2em .6em .3em;
            text-align: right;
            vertical-align: baseline;
            white-space: normal;
            width: 9em;
        }

        fieldset {
            background-color: transparent;
            font-size: 100%;
            margin: 1em;
            padding: .3em;
        }

        ol {
            list-style-type: none;
            padding: 0 1em 0 1em;
        }

        li {
            clear: left;
            float: left;
            list-style-type: none;
            padding-bottom: 1em;
            width: 100%;
        }

        .hint {
            color: #666;
            font-size: .95rem;
            margin-left: 10.5em;
            margin-right: 4em;
            margin-top: .5em;
        }

        .form-control {
            width: auto;
        }

        .enrolmentperioddate {
            float: left;

            + .hint {
                margin-left: 0;
            }
        }
    }
}

label.required,
span.required {
    color: #C00;
}

span.required {
    font-style: italic;
    margin-left: .5em;
}

.breadcrumbs {
    background-color: #e6f0f2;
    margin: 1em 0;
    padding: .4em 2em;
}

/* Font Awesome isn't used in the installer, so add custom X icon */
.clear_date {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 3.175 3.175' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(-74.712 -91.722)'%3E%3Cpath d='M75.321 94.571a.207.207 0 0 0 .293 0l.686-.685.685.685a.207.207 0 0 0 .293 0l.284-.283a.207.207 0 0 0 0-.294l-.686-.685.686-.685a.207.207 0 0 0 0-.294l-.284-.283a.207.207 0 0 0-.293 0l-.685.685-.686-.685a.207.207 0 0 0-.293 0l-.283.283a.207.207 0 0 0 0 .294l.685.685-.685.685a.207.207 0 0 0 0 .294z' fill='%23c33'/%3E%3Cimage x='-117.25' y='-204.6' width='196.44' height='175.61' preserveAspectRatio='none'/%3E%3C/g%3E%3C/svg%3E");
    background-position: 5px 5px;
    background-repeat: no-repeat;
    content: "";
    display: inline-block;
    height: 16px;
    width: 16px;
}

span.breadcrumbs {
    display: block;
}

.selectall,
.deselectall {
    display: inline-block;
}

.selectall.mandatory,
.deselectall.optional {
    display: none;
}

#steps {
    border: 1px solid #EEE;
    border-radius: 5px;
    margin: 1em 0;
    padding: 1em;

    ol {
        font-size: 1.2rem;
        list-style-type: none;
        margin: 0;
    }
}

.open {
    color: #888;
}

.current {
    color: #000;
    font-weight: bold;
}

.complete {
    color: #008000;
}

.hint {
    color: #727272;
    font-size: 90%;
}

.fa-svg-icon {
    &.checkbox-square {
        &::before {
            background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z'/%3E%3C/svg%3E") 50% 50% no-repeat;
            background-size: 12px;
            content: "";
            display: inline-block;
            float: none;
            height: .8em;
            margin-right: .3rem;
            width: .8em;
        }
    }
}
