html {
    font-size: 14px;
}


@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.titlediv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1em;
}

    .titlediv > div {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .titlediv > h2 {
        margin: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

.aBackTitle {
    font-size: xxx-large;
    margin-right: 0.2em;
}

.titlebutton {
    margin-left: 0.4em;
}

@media screen and (max-width: 620px) {
    .titlediv {
        justify-content: end;
    }

        .titlediv > h2 {
            display: none;
        }
}

.confirmation-card {
    max-width: 800px;
    margin-top: 2.5em;
}

.edit-card {
    max-width: 1000px;
    margin-top: 1em;
}

.card-body {
    overflow: auto !important;
}

table {
    width: 100% !important;
    text-align: center;
}

td {
    vertical-align: middle !important;
}

textarea {
    line-height: 2ch;
    background-image: linear-gradient(transparent, transparent calc(2ch), #E7EFF8 0px);
    background-size: 100% 2ch;
}

.subtitleLabel {
    font-size: 27px;
}

.terminalImage {
    max-height: 35px
}

.iconImageHome {
    max-width: 30px
}

.custom-container-cron {
    display: block;
    margin: 20px;
    padding: 20px;
}

.cronjobselector {
    padding: 20px;
    background: #e7e7e7;
}

    .cronjobselector .timesAndDates ul li,
    .cronjobselector .timesAndDates ul {
        list-style: none;
        margin: 0;
        padding: 0px 10px;
    }

    .cronjobselector select:disabled {
        background: #ccc;
    }



.item {
    height: 100%;
}

.dropzone {
    display: flex;
    height: 100px;
    width: 100px;
    margin: 10px;
    background-color: transparent;
    background-image: url(../images/placeholder.png);
    background-repeat: no-repeat;
    background-size: 100px 100px;
}

.draggable-dropzone--occupied {
    display: flex;
    justify-content: center;
}



.rectangle {
    position: relative;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.jstree-table-header-regular {
    background-color: white !important;
}

.jstree-default .jstree-themeicon-custom {
    background-size: contain !important
}

.iconTableTree {
    max-height: 25px
}


.select2-container--default .select2-selection--single {
    height: 100% !important
}

.jstree-table-header-regular {
}

.jstree-default .jstree-anchor {
    line-height: 24px !important;
    height: 35px !important;
    font-size: 20px !important;
}

div.jstree-table-cell-root-groupTree {
    line-height: 24px !important;
    min-height: 35px !important;
    font-size: 20px !important;
}

.transparent-tooltip {
    background: transparent;
    border: 1px solid red;
    box-shadow: none;
}

    .transparent-tooltip::before {
        border: none;
    }



.jstree-table-separator {
    height: auto !important;
}



.divTitlePage {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2em;
}

.h1TitlePage {
    margin: 0
}

.rolebtn {
    display: flex;
    align-items: center;
    margin-top: 0.2em;
}

.btn-table {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 30px !important;
}

/* Sliders */
.form-switch {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .form-switch span {
        margin-right: 0.8em;
        font-weight: 450;
    }

    .form-switch i {
        position: relative;
        display: inline-block;
        margin-right: .5rem;
        width: 46px;
        height: 26px;
        background-color: #e6e6e6;
        border-radius: 23px;
        vertical-align: text-bottom;
        transition: all 0.3s linear;
    }

        .form-switch i::before {
            content: "";
            position: absolute;
            left: 0;
            width: 42px;
            height: 22px;
            background-color: #fff;
            border-radius: 11px;
            transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
            transition: all 0.25s linear;
        }

        .form-switch i::after {
            content: "";
            position: absolute;
            left: 0;
            width: 22px;
            height: 22px;
            background-color: #fff;
            border-radius: 11px;
            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
            transform: translate3d(2px, 2px, 0);
            transition: all 0.2s ease-in-out;
        }

    .form-switch:active i::after {
        width: 28px;
        transform: translate3d(2px, 2px, 0);
    }

    .form-switch:active input:is(:checked) + i::after {
        transform: translate3d(16px, 2px, 0);
    }

    .form-switch input {
        display: none;
    }

        .form-switch input:checked + i {
            background-color: #4BD763;
        }

            .form-switch input:checked + i::before {
                transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
            }

            .form-switch input:checked + i::after {
                transform: translate3d(22px, 2px, 0);
            }

    .form-switch > input:disabled:checked + i {
        background-color: #4bd7637e;
    }

    .form-switch > input:disabled:not(:checked) + i::before {
        background-color: #e6e6e6;
    }

.table td {
    padding: .25em !important;
    font-size: 8pt;
}

.table th {
    padding: .25em !important;
    font-size: 12pt;
}

.btn {
    font-size: 0.8rem !important;
}

.table.fancytree-ext-table {
    font-size: 8pt;
}