body {
    overflow-x: hidden;
}

/*@media (min-width: 768px) {*/
/*    body {*/
/*        font-weight: lighter;*/
/*    }*/
/*}*/

.app-card {
    max-width: 15rem;
}

.app-card > .card-body {
    padding: 0.5rem;
}

@media (max-width: 768px) {
    .app-card {
        width: calc(50% - 10px);
    }

    .app-card > .card-header {
        padding: 0.4rem;
        font-weight: normal;
        font-size: 0.7rem;
    }

    .app-card > .card-body {
        padding: 0.2rem;
        font-weight: normal;
        font-size: 0.7rem;
    }

    #platform-main-container {
        padding: 0;
    }

}

.full-window {
    position: fixed;
    z-index: 11000;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border: solid 2px orange;
}

/*.targeted {*/
/* position: fixed;*/
/* z-index: 100;*/
/* !*background-color: white;*!*/
/* left: 20em;*/
/* top: 0;*/
/* height: 100%;*/
/* width: calc(100% - 50em) !important;*/
/* overflow-y: scroll;*/
/* margin: 0 !important;*/
/*}*/

/*.targeted-bg {*/
/* background-color: #FFFFEE;*/
/*}*/

/*.targeted-bg-dark {*/
/* background-color: #444;*/
/*}*/

/*** Bootstrap overrides ***/

.popover {
    z-index: 1030 !important;
}

.docPopover {
    z-index: 1031 !important;
}

.xl-popover {
    width: 80rem !important;
    max-width: 80vw !important;
    max-height: 40vh !important;
}

.large-popover {
    width: 40rem !important;
    max-width: 40vw !important;
    max-height: 40vh !important;
}

.auto-width-popover {
    max-width: 40vw !important;
}

.dropdown-menu {
    z-index: 1032 !important;
}

.tab-pane {
    height: 100%;
    overflow: auto;
}

#selectionOverlay {
    display: none;
    position: absolute;
    pointer-events: none;
    z-index: 999;
    opacity: 70%;
    border-width: 5px;
    border-style: solid;
}

#containerSelectionOverlay {
    display: none;
    position: absolute;
    pointer-events: none;
    z-index: 999;
    opacity: 70%;
    border-width: 1px;
    border-color: red !important;
    border-style: dotted;
}

#hoverOverlay {
    display: none;
    position: absolute;
    pointer-events: none;
    z-index: 999;
    opacity: 30%;
}

#eventShieldOverlay {
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
    /*width: 100vw;*/
    /*height: 100vh;*/
    z-index: 1001;
}

.show-mobile {
    display: none !important;;
}

.show-desktop {
    display: inline !important;
}

@media (max-width: 767px) {
    /*.targeted {*/
    /*  left: 15em;*/
    /*  width: calc(100% - 35em) !important;*/
    /*}*/
}

@media (max-width: 767px), (max-height: 575px) {
    /*.targeted {*/
    /* left: 0em;*/
    /* width: 100% !important;*/
    /*}*/

    .show-mobile {
        display: inline !important;;
    }

    .show-desktop {
        display: none !important;;
    }

    .modal-dialog {
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 100% !important;
    }

    .modal-body {
        height: 100% !important;
    }

    .modal-content {
        max-width: 100% !important;
        max-height: 100% !important;
        height: 100% !important;
    }

}

@media (max-width: 1199px), (max-height: 767px) {
    .modal-xl.modal-dialog {
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 100% !important;
    }

    .modal-xl .modal-body {
        height: 100% !important;
    }

    .modal-xl .modal-content {
        max-width: 100% !important;
        max-height: 100% !important;
    }
}

.opacity-001 {
    opacity: 1%;
}

.inlined-dialog {
    background-color: rgba(128, 128, 128, 0.1);
    padding: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
}

.drop-zone {
    padding: 0.2em;
    /*background-color: #999;
    opacity: 0.5;*/
}

.active-drop-zone {
    padding: 0.2em;
    background-color: Highlight;
}

.target-drop-zone {
    background-color: orange;
}

.text-decoration-underline {
    text-decoration: underline;
}

.text-decoration-line-through {
    text-decoration: line-through;
}

.text-decoration-none {
    text-decoration: none;
}

/*.popover {*/
/* z-index: 1001 !important;*/
/*}*/

/******* BV PATCH *******/

.form-group > div {
    height: 100%;
}

/******* Editor *******/

pre.ace_editor {
    margin-bottom: 0px;
}

.ace_editor {
    border: solid 1px lightgray;
}

.ace_fold {
    background-image: none !important;
    background-color: var(--info) !important;
    width: auto !important;
    color: white !important;
    height: 1rem !important;
}

.primary-marker {
    position: absolute;
    border: solid var(--info) 2px;
    background-color: var(--light);
}

.secondary-marker {
    position: absolute;
    border-bottom: solid var(--info) 2px;
}

.inspectable-marker {
    position: absolute;
    border-bottom: solid var(--info) 2px;
    background-color: var(--light);
    cursor: pointer !important;
    pointer-events: auto;
}

/****** Boostrap 5 patch ******/

.border-1 {
    border-width: 1px !important;
}

.border-2 {
    border-width: 2px !important;
}

.border-3 {
    border-width: 3px !important;
}

.border-4 {
    border-width: 4px !important;
}

.border-5 {
    border-width: 5px !important;
}

.rounded.rounded-0 {
    border-radius: 1px !important;
}

.rounded.rounded-1 {
    border-radius: 0.1rem !important;
}

.rounded.rounded-2 {
    border-radius: 0.3rem !important;
}

.rounded.rounded-3 {
    border-radius: 0.8rem !important;
}

.fs-1 * {
    font-size: 2.5rem;
}

.fs-2 * {
    font-size: 2rem;
}

.fs-3 * {
    font-size: 1.75rem;
}

.fs-4 * {
    font-size: 1.5rem;
}

.fs-5 * {
    font-size: 1.25rem;
}

.fs-6 * {
    font-size: 1rem;
}

.opacity-0 {
    opacity: 0;
}

.opacity-1 {
    opacity: 0.2;
}

.opacity-2 {
    opacity: 0.4;
}

.opacity-3 {
    opacity: 0.6;
}

.opacity-4 {
    opacity: 0.8;
}

.opacity-5 {
    opacity: 1;
}

#root-container.vertical-layout {
    flex-direction: column;
}

#root-container.vertical-layout {
    flex-direction: row;
}
#root-container.vertical-layout #content {
    width: 100%;
}
#root-container.vertical-layout nav {
    height: 100%;
}

#root-container.vertical-layout .navbar,
#root-container.vertical-layout .navbar-collapse {
    flex-direction: column;
}
#root-container.vertical-layout .navbar .navbar-nav {
    flex-direction: column;
}