:root {
    --dwc-color: #369fcc;
    --dwc-highlight: #dcf1fd;
    --dwc-gradient: #c8d6e1;

    --dwc-generic: #7d898c;
    --dwc-generic-focus: #5a6369;
    --dwc-generic-active: #596a70;
    --dwc-generic-disable: #709094;
    --dwc-generic-selected: #899898;

    --dwc-wiki: #0d6efd;
    --dwc-wiki-focus: #0b5ed7;
    --dwc-wiki-active: #0a58ca;
    --dwc-wiki-disable: #0d6efd;
    --dwc-wiki-selected: #518be0;

    --dwc-store: #FF7F50;
    --dwc-store-focus: #d26841;
    --dwc-store-active: #a85234;
    --dwc-store-disable: #f87b4c;
    --dwc-store-selected: #f88e67;

    --dwc-support: #6f42c1;
    --dwc-support-focus: #6115de;
    --dwc-support-active: #550ec7;
    --dwc-support-disable: #7948d5;
    --dwc-support-selected: #835acc;
    --dwc-support-accent: #e5d7fd;

    --dwc-msg: #0bc515;
    --dwc-msg-focus: #08a815;
    --dwc-msg-active: #079413;
    --dwc-msg-disable: #0ac419;
    --dwc-msg-selected: #3eab47;
    --dwc-msg-accent: #d7fdd9;

    --dwc-inv: #c40000;
    --dwc-inv-focus: #980606;
    --dwc-inv-active: #830505;
    --dwc-inv-disable: #e01e1e;
    --dwc-inv-selected: #b96c6c;
    --dwc-inv-accent: #e3a7a7;

    --dwc-edit-color: #198754;

    --dwc-body-color: #212529;
    --dwc-body-bg: #fff;
    --dwc-border-color: #bebebe;
    --dwc-side-nav-bg: #eeeeee;
    --dwc-page-nav: #606060;
    --dwc-login-color: #daeeff;

    --dwc-trace: #079413;
    --dwc-debug: #be9011;
    --dwc-info: #0b5ed7;
    --dwc-warn: #d26841;
    --dwc-error: #620e07;
    --dwc-fatal: #d0210a;
}

#landingVideo {
    background-color: black;
    position: fixed;
    top: 58px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    z-index: -1000;
    object-fit: cover;
}
.login {
    position: fixed;
    top: 70px;
    right: 10px;
    z-index: 100;
    display: none;
    background: transparent;
}
.login-card {
    color: var(--dwc-login-color);
    min-width: 330px;
    border: #0dcaf0 solid 1px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.45);
}
.login-card .form-control {
    color: var(--dwc-login-color);
    background-color: rgba(0,0,0,0.5);
}
.showLogin {
    display: block;
}

.side-nav-expanded {
    background-color: var(--dwc-side-nav-bg);
    width: 170px;
    min-width: 170px;
    max-width: 170px;
    min-height: calc(100vh - 72px);
}
.side-nav-collapsed {
    background-color: var(--dwc-side-nav-bg);
    width: 45px;
    min-width: 45px;
    max-width: 45px;
    min-height: calc(100vh - 72px);
}
.category-nav {
    border-radius: 5px;
    min-height: calc(100vh - 154px);
}
.moduleTitle {
    cursor: pointer;
    text-decoration: none;
    color: var(--dwc-body-color);

}
.category-nav-title {
    cursor: pointer;
    color: var(--dwc-page-nav);
}
.category-dropdown-menu {
    background-color: transparent;
    border: none;
}
.dropdown-item {
    color: black;
}
.dropdown-item:active {
    color: black;
    background: transparent;
}

/**/
.nav-item a {
    color: var(--dwc-page-nav) !important;
}
.nav-mod-header-link {
    color: var(--dwc-page-nav);
}
/**/

.selectableCard {
    cursor: pointer;
}
.selectableItem {
    cursor: pointer;
}
.selectableItem:hover {
    background-color: var(--dwc-highlight);
}
.selected-item {
    border: 1px solid var(--dwc-wiki);
}

.text-link {
    cursor: pointer;
    text-decoration: underline;
}

.gradient-right {
    background-image: linear-gradient(to right, var(--dwc-body-bg) , var(--dwc-gradient));
}

/* Resources Styling */

.title-header {
    display: flex;
    flex-direction: row;
    margin: 1rem;
}

.title-header-left {
    flex-grow: 1;
}

.title-header-right {
    text-align: right;
}


.wiki-article {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.wiki-body {
    flex-grow: 1;
    min-width: 300px;
    padding-right: 15px;
    padding-bottom: 15px;
}

.wiki-body-padding {
    padding-right: 28px;
}

.wiki-info-headroom {
    height: 5rem;
}

.wiki-info-tab-home {
    position: fixed;
    width: 500px;
    height: 1.5em;
    text-align: right;
    top: 480px;
    right: -228px;
    margin: auto;
/*    position: absolute;*/
/*    top: 360px;*/
/*    right: -110px;*/
/*    height: 1.5em;*/
/*    margin: auto;*/
}

.wiki-info-tab-home {
    transform: rotate(-90deg);
}

.wiki-info-tab {
    position: fixed;
    width: 500px;
    height: 1.5em;
    text-align: right;
    top: 480px;
    right: -228px;
    margin: auto;
    /*position: absolute;*/
    /*top: 360px;*/
    /*right: -120px;*/
    /*height: 1.5em;*/
    /*margin: auto;*/
}

.wiki-info-tab {
    transform: rotate(-90deg);
}

.wiki-info-tab-title {
    display: inline-block;
    margin: 0 5px 0 5px;
    padding: 0 10px 0 10px;
    border: .05rem solid black;
    border-radius: 5px;
}
.wiki-info-tab-spacer {
    display: inline-block;
    margin: 0 5px 0 5px;
    padding: 0 10px 0 10px;
}

.wiki-info {
    max-width: 300px;
    min-width: 200px;
}

.hide {
    display: none;
}

.article-topic-list {
    border: .05rem solid var(--dwc-border-color);
    border-radius: 5px;
    margin: 0.1rem;
}

.article-topic-entry {
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
}

.article-topic-details {
    flex-direction: column;
    flex-grow: 1;
    padding: 0;
    margin: 0;
    border: .05rem solid var(--dwc-border-color);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.article-topic-title {
    padding: 0.5rem;
    margin: 0;
    line-height: 0.8rem;
    background-color: rgba(140, 70, 20, 0.2);
}

.article-topic-summary {
    padding: 0.5rem;
    margin: 0;
    font-size: small;
    overflow: hidden;
}

.article-topic-info-subheading {
    padding-left: 0.5rem;
    margin: 0;
    font-size: x-small;
    overflow: hidden;
}

.article-topic-info {
    padding: 0;
    margin: 0;
    border: .05rem solid var(--dwc-border-color);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.article-topic-author {
    padding: 0.5rem;
    margin: 0;
    line-height: 0.8rem;
    font-size: small;
    background-color: rgba(140, 70, 20, 0.2);
}

.article-topic-date {
    padding: 0.5rem;
    margin: 0;
    font-size: small;
}


.alert-fixed {
    position: fixed;
    text-align: center;
    vertical-align: middle;
    top: 5px;
    left: 25px;
    right:25px;
    height: 50px;
    z-index: 9999;
}

.alert-fixed-success {
    margin: auto;
    max-width: 500px;
    text-align: center;
    vertical-align: middle;
    height: 100%;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.alert-fixed-danger {
    margin: auto;
    max-width: 500px;
    text-align: center;
    vertical-align: middle;
    height: 100%;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.to-top-arrow {
    color: #a6d5ec;
    position: fixed;
    size: 34px;
    bottom: 8px; /* Place the button at the bottom of the page */
    left: 8px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    cursor: pointer;
    opacity: 0;
}
.to-top-show {
    opacity: 1;
}

.cart-icon {
    font-size: 1.5rem;
    color: lightskyblue;
}

.cart-item-count {
    margin-left: -12px;
    font-size: 1rem;
    font-weight: bold;
    color: white;
    -webkit-text-stroke: 1px black;
    text-shadow: -1px -1px black;
    z-index: 99;
}

.card-section {
    padding: 5px 5px 5px 5px;
    outline: 0.1em solid #a6d5ec;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.list-group-subitem {
    padding-left: 25px;
    font-size: small;
}

.color-generic {
    color: var(--dwc-generic);
}

.btn-generic {
    color: #fff;
    background-color: var(--dwc-generic);
    border-color:  var(--dwc-generic);
}
.btn-generic:hover {
    color: #fff;
    background-color: var(--dwc-generic-focus);
    border-color: var(--dwc-generic-active);
}
.btn-check:focus + .btn-generic, .btn-generic:focus {
    color: #fff;
    background-color: var(--dwc-generic-focus);
    border-color: var(--dwc-generic-active);
    box-shadow: 0 0 0 0.25rem  rgba(var(--dwc-generic), 0.5);
}
.btn-check:checked + .btn-generic, .btn-check:active + .btn-generic, .btn-generic:active, .btn-generic.active, .show > .btn-generic.dropdown-toggle {
    color: #fff;
    background-color: var(--dwc-generic-active);
    border-color: var(--dwc-generic-focus);
}
.btn-check:checked + .btn-generic:focus, .btn-check:active + .btn-generic:focus, .btn-generic:active:focus, .btn-generic.active:focus, .show > .btn-generic.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--dwc-generic), 0.5);
}
.btn-generic:disabled, .btn-generic.disabled {
    color: #fff;
    background-color: var(--dwc-generic-active);
    border-color: var(--dwc-generic-active);
}


.btn-outline-generic {
    color: var(--dwc-generic-active);
    border-color: var(--dwc-generic-active);
}
.btn-outline-generic:hover {
    color: #fff;
    background-color: var(--dwc-generic-active);
    border-color: var(--dwc-generic-active);
}
.btn-check:focus + .btn-outline-generic, .btn-outline-generic:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--dwc-generic-active), 0.5);
}
.btn-check:checked + .btn-outline-generic, .btn-check:active + .btn-outline-generic, .btn-outline-generic:active, .btn-outline-generic.active, .btn-outline-generic.dropdown-toggle.show {
    color: #fff;
    background-color: var(--dwc-generic-active);
    border-color: var(--dwc-generic-active);
}
.btn-check:checked + .btn-outline-generic:focus, .btn-check:active + .btn-outline-generic:focus, .btn-outline-generic:active:focus, .btn-outline-generic.active:focus, .btn-outline-generic.dropdown-toggle.show:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--dwc-generic-active), 0.5);
}
.btn-outline-generic:disabled, .btn-outline-generic.disabled {
    color: var(--dwc-generic-active);
    background-color: transparent;
}

.btn-edit {
    color: var(--dwc-edit-color);
}


.color-wiki {
    color: var(--dwc-wiki);
}

.btn-wiki {
    color: #fff;
    background-color: var(--dwc-wiki);
    border-color:  var(--dwc-wiki);
}
.btn-wiki:hover {
    color: #fff;
    background-color: var(--dwc-wiki-focus);
    border-color: var(--dwc-wiki-active);
}
.btn-check:focus + .btn-wiki, .btn-wiki:focus {
    color: #fff;
    background-color: var(--dwc-wiki-focus);
    border-color: var(--dwc-wiki-active);
    box-shadow: 0 0 0 0.25rem  rgba(var(--dwc-wiki), 0.5);
}
.btn-check:checked + .btn-wiki, .btn-check:active + .btn-wiki, .btn-wiki:active, .btn-wiki.active, .show > .btn-wiki.dropdown-toggle {
    color: #fff;
    background-color: var(--dwc-wiki-active);
    border-color: var(--dwc-wiki-focus);
}
.btn-check:checked + .btn-wiki:focus, .btn-check:active + .btn-wiki:focus, .btn-wiki:active:focus, .btn-wiki.active:focus, .show > .btn-wiki.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--dwc-wiki), 0.5);
}
.btn-wiki:disabled, .btn-wiki.disabled {
    color: #fff;
    background-color: var(--dwc-wiki-active);
    border-color: var(--dwc-wiki-active);
}


.btn-outline-wiki {
    color: var(--dwc-wiki-active);
    border-color: var(--dwc-wiki-active);
}
.btn-outline-wiki:hover {
    color: #fff;
    background-color: var(--dwc-wiki-active);
    border-color: var(--dwc-wiki-active);
}
.btn-check:focus + .btn-outline-wiki, .btn-outline-wiki:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--dwc-wiki-active), 0.5);
}
.btn-check:checked + .btn-outline-wiki, .btn-check:active + .btn-outline-wiki, .btn-outline-wiki:active, .btn-outline-wiki.active, .btn-outline-wiki.dropdown-toggle.show {
    color: #fff;
    background-color: var(--dwc-wiki-active);
    border-color: var(--dwc-wiki-active);
}
.btn-check:checked + .btn-outline-wiki:focus, .btn-check:active + .btn-outline-wiki:focus, .btn-outline-wiki:active:focus, .btn-outline-wiki.active:focus, .btn-outline-wiki.dropdown-toggle.show:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--dwc-wiki-active), 0.5);
}
.btn-outline-wiki:disabled, .btn-outline-wiki.disabled {
    color: var(--dwc-wiki-active);
    background-color: transparent;
}

.tag_primary {
    border: 1px solid var(--dwc-wiki);
    border-radius: 3px;
}

.tag_selected_primary {
    background-color: var(--dwc-wiki-selected);
}


.color-support {
    color: var(--dwc-support);
}

.btn-support {
    color: #fff;
    background-color: var(--dwc-support);
    border-color: var(--dwc-support);
}
.btn-support:hover {
    color: #fff;
    background-color: var(--dwc-support-focus);
    border-color: var(--dwc-support-active);
}
.btn-check:focus + .btn-support, .btn-support:focus {
    color: #fff;
    background-color: var(--dwc-support-focus);
    border-color: var(--dwc-support-active);
    box-shadow: 0 0 0 0.25rem rgba(var(--dwc-support), 0.5);
}
.btn-check:checked + .btn-support, .btn-check:active + .btn-support, .btn-support:active, .btn-support.active, .show > .btn-support.dropdown-toggle {
    color: #fff;
    background-color: var(--dwc-support-active);
    border-color: var(--dwc-support-focus);
}
.btn-check:checked + .btn-support:focus, .btn-check:active + .btn-support:focus, .btn-support:active:focus, .btn-support.active:focus, .show > .btn-support.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--dwc-support), 0.5);
}
.btn-support:disabled, .btn-support.disabled {
    color: #fff;
    background-color: var(--dwc-support-disable);
    border-color: var(--dwc-support-disable);
}


.btn-outline-support {
    color: var(--dwc-support);
    border-color: var(--dwc-support);
}
.btn-outline-support:hover {
    color: #fff;
    background-color: var(--dwc-support);
    border-color: var(--dwc-support);
}
.btn-check:focus + .btn-outline-support, .btn-outline-support:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--dwc-support), 0.5);
}
.btn-check:checked + .btn-outline-support, .btn-check:active + .btn-outline-support, .btn-outline-support:active, .btn-outline-support.active, .btn-outline-support.dropdown-toggle.show {
    color: #fff;
    background-color: var(--dwc-support);
    border-color: var(--dwc-support);
}
.btn-check:checked + .btn-outline-support:focus, .btn-check:active + .btn-outline-support:focus, .btn-outline-support:active:focus, .btn-outline-support.active:focus, .btn-outline-support.dropdown-toggle.show:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--dwc-support), 0.5);
}
.btn-outline-support:disabled, .btn-outline-support.disabled {
    color: var(--dwc-support);
    background-color: transparent;
}

.color-store {
    color: var(--dwc-store);
}

.btn-store {
    color: #fff;
    background-color: var(--dwc-store);
    border-color: var(--dwc-store);
}
.btn-store:hover {
    color: #fff;
    background-color: var(--dwc-store-focus);
    border-color: var(--dwc-store-active);
}
.btn-check:focus + .btn-store, .btn-store:focus {
    color: #fff;
    background-color: var(--dwc-store-focus);
    border-color: var(--dwc-store-active);
    box-shadow: 0 0 0 0.25rem rgba(var(--dwc-store), 0.5);
}
.btn-check:checked + .btn-store, .btn-check:active + .btn-store, .btn-store:active, .btn-store.active, .show > .btn-store.dropdown-toggle {
    color: #fff;
    background-color: var(--dwc-store-active);
    border-color: var(--dwc-store-focus);
}
.btn-check:checked + .btn-store:focus, .btn-check:active + .btn-store:focus, .btn-store:active:focus, .btn-store.active:focus, .show > .btn-store.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--dwc-store), 0.5);
}
.btn-store:disabled, .btn-store.disabled {
    color: #fff;
    background-color: var(--dwc-store-disable);
    border-color: var(--dwc-store-disable);
}

.btn-outline-store {
    color: var(--dwc-store);
    border-color: var(--dwc-store);
}
.btn-outline-store:hover {
    color: #fff;
    background-color: var(--dwc-store);
    border-color: var(--dwc-store);
}
.btn-check:focus + .btn-outline-store, .btn-outline-store:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--dwc-store), 0.5);
}
.btn-check:checked + .btn-outline-store, .btn-check:active + .btn-outline-store, .btn-outline-store:active, .btn-outline-store.active, .btn-outline-store.dropdown-toggle.show {
    color: #fff;
    background-color: var(--dwc-store);
    border-color: var(--dwc-store);
}
.btn-check:checked + .btn-outline-store:focus, .btn-check:active + .btn-outline-store:focus, .btn-outline-store:active:focus, .btn-outline-store.active:focus, .btn-outline-store.dropdown-toggle.show:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--dwc-store) 0.5);
}
.btn-outline-store:disabled, .btn-outline-store.disabled {
    color: var(--dwc-store);
    background-color: transparent;
}

.color-msg {
    color: var(--dwc-msg);
}

.btn-msg {
    color: #fff;
    background-color: var(--dwc-msg);
    border-color:  var(--dwc-msg);
}
.btn-msg:hover {
    color: #fff;
    background-color: var(--dwc-msg-focus);
    border-color: var(--dwc-msg-active);
}
.btn-check:focus + .btn-msg, .btn-msg:focus {
    color: #fff;
    background-color: var(--dwc-msg-focus);
    border-color: var(--dwc-msg-active);
    box-shadow: 0 0 0 0.25rem  rgba(var(--dwc-msg), 0.5);
}
.btn-check:checked + .btn-msg, .btn-check:active + .btn-msg, .btn-msg:active, .btn-msg.active, .show > .btn-msg.dropdown-toggle {
    color: #fff;
    background-color: var(--dwc-msg-active);
    border-color: var(--dwc-msg-focus);
}
.btn-check:checked + .btn-msg:focus, .btn-check:active + .btn-msg:focus, .btn-msg:active:focus, .btn-msg.active:focus, .show > .btn-msg.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--dwc-msg), 0.5);
}
.btn-msg:disabled, .btn-msg.disabled {
    color: #fff;
    background-color: var(--dwc-msg-active);
    border-color: var(--dwc-msg-active);
}


.btn-outline-msg {
    color: var(--dwc-msg-active);
    border-color: var(--dwc-msg-active);
}
.btn-outline-msg:hover {
    color: #fff;
    background-color: var(--dwc-msg-active);
    border-color: var(--dwc-msg-active);
}
.btn-check:focus + .btn-outline-msg, .btn-outline-msg:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--dwc-msg-active), 0.5);
}
.btn-check:checked + .btn-outline-msg, .btn-check:active + .btn-outline-msg, .btn-outline-msg:active, .btn-outline-msg.active, .btn-outline-msg.dropdown-toggle.show {
    color: #fff;
    background-color: var(--dwc-msg-active);
    border-color: var(--dwc-msg-active);
}
.btn-check:checked + .btn-outline-msg:focus, .btn-check:active + .btn-outline-msg:focus, .btn-outline-msg:active:focus, .btn-outline-msg.active:focus, .btn-outline-msg.dropdown-toggle.show:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--dwc-msg-active), 0.5);
}
.btn-outline-msg:disabled, .btn-outline-msg.disabled {
    color: var(--dwc-msg-active);
    background-color: transparent;
}


.color-inv {
    color: var(--dwc-inv);
}

.btn-inv {
    color: #fff;
    background-color: var(--dwc-inv);
    border-color:  var(--dwc-inv);
}
.btn-inv:hover {
    color: #fff;
    background-color: var(--dwc-inv-focus);
    border-color: var(--dwc-inv-active);
}
.btn-check:focus + .btn-inv, .btn-inv:focus {
    color: #fff;
    background-color: var(--dwc-inv-focus);
    border-color: var(--dwc-inv-active);
    box-shadow: 0 0 0 0.25rem  rgba(var(--dwc-inv), 0.5);
}
.btn-check:checked + .btn-inv, .btn-check:active + .btn-inv, .btn-inv:active, .btn-inv.active, .show > .btn-inv.dropdown-toggle {
    color: #fff;
    background-color: var(--dwc-inv-active);
    border-color: var(--dwc-inv-focus);
}
.btn-check:checked + .btn-inv:focus, .btn-check:active + .btn-inv:focus, .btn-inv:active:focus, .btn-inv.active:focus, .show > .btn-inv.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--dwc-inv), 0.5);
}
.btn-inv:disabled, .btn-inv.disabled {
    color: #fff;
    background-color: var(--dwc-inv-active);
    border-color: var(--dwc-inv-active);
}


.btn-outline-inv {
    color: var(--dwc-inv-active);
    border-color: var(--dwc-inv-active);
}
.btn-outline-inv:hover {
    color: #fff;
    background-color: var(--dwc-inv-active);
    border-color: var(--dwc-inv-active);
}
.btn-check:focus + .btn-outline-inv, .btn-outline-inv:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--dwc-inv-active), 0.5);
}
.btn-check:checked + .btn-outline-inv, .btn-check:active + .btn-outline-inv, .btn-outline-inv:active, .btn-outline-inv.active, .btn-outline-inv.dropdown-toggle.show {
    color: #fff;
    background-color: var(--dwc-inv-active);
    border-color: var(--dwc-inv-active);
}
.btn-check:checked + .btn-outline-inv:focus, .btn-check:active + .btn-outline-inv:focus, .btn-outline-inv:active:focus, .btn-outline-inv.active:focus, .btn-outline-inv.dropdown-toggle.show:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--dwc-inv-active), 0.5);
}
.btn-outline-inv:disabled, .btn-outline-inv.disabled {
    color: var(--dwc-inv-active);
    background-color: transparent;
}

.tag_primary {
    border: 1px solid var(--dwc-inv);
    border-radius: 3px;
}

.tag_selected_primary {
    background-color: var(--dwc-inv-selected);
}

.generic-icon {
    color: var(--dwc-body-color);
}

.caret-right {
     transition: transform 1s;
}
.caret-right-open {
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    transform: rotate(90deg);
}

.alert-support {
    color: #3b0896;
    background-color: #dcccfa;
    border-color: #ccb4f8;
}
.alert-support .alert-link {
    color: #06357a;
}
.alert-store {
    color: #932e08;
    background-color: #fad5c8;
    border-color: #f8c2ae;
}
.alert-store .alert-link {
    color: #FF7F50;
}

.upload-modal {
    border-radius: 5px;
}

.tag-dialog {
    border-radius: 5px;
    position: fixed;
    z-index: 98;
}

.grid_image_div {
    float: left;
    width: 100px;
    height: 125px;
    padding: 2px;
}
.grid_image_element {
    width: 100px;
    height: 100px;
    vertical-align: middle;
    object-fit: contain;
}
.grid_image_selected {
    border: 2px solid var(--dwc-store);
}
.grid_image_selected_primary {
    border: 2px solid var(--dwc-wiki);
}

.store_line_image {
    max-height: 35px;
    padding: 2px;
    object-fit: contain;
    aspect-ratio: 1 / 1;
    cursor: pointer;
}
.store_card_image {
    width: 50%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    float: left;
    border: 2px solid var(--dwc-border-color);
    border-radius: 5px;
    margin: 5px;
}
.store_image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    float: left;
    border: 2px solid var(--dwc-border-color);
    border-radius: 5px;
    margin: 5px;
}

.store-item-description {
    white-space: pre-wrap;
}
.store_card_description {
    max-height: 250px;
    overflow: clip;
}

.store_grid_wrapper {
    display: grid;
    max-width: 1200px;
    gap: 0.5rem;
}
@media (min-width: 768px) {
    .store_grid_wrapper { grid-template-columns: repeat(2, 1fr); }
    .store_image { max-width: 250px; }
}
@media (min-width: 992px) {
    .store_grid_wrapper { grid-template-columns: repeat(3, 1fr); }
}

.orderHistory {
    height: 0px;
    display: none;
}
.orderHistoryExpand {
    height: auto;
    display: block;
}

.card {
    background: transparent;
}

.nav-login a{
    color: var(--dwc-login-color) !important;
}

/* image manager */

.image-manager__item {
    visibility: visible;
    height: auto;
}
.image-manager__item-hide {
    visibility: hidden;
    height: 0;
}

.image-manager__caret {
    display: inline-block;
}

.image-manager__caret-hide {
    display: none;
}

/* Autocomplete Order Search */
.autocomplete {
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid var(--dwc-border-color);
    border-bottom: none;
    border-top: none;
    border-radius: 5px;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: var(--dwc-body-bg);
    border-bottom: 1px solid var(--dwc-border-color);
    border-radius: 5px;
}

/*when hovering an item:*/
.autocomplete-items div:hover {
    background-color: var(--dwc-body-bg);
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
    background-color: var(--dwc-wiki-focus) !important;
    color: var(--dwc-body-bg);
}

/* Filter Nav Styles */

.filter-page {
    background: transparent;
    font-size: medium;
    display: flex;
    vertical-align: middle;
    text-align: center;
    padding-top: 5px;
    position: relative;
}
.filter-page-spacer {
    flex-grow: 1;
}

.filter-nav {
    background-color: var(--dwc-side-nav-bg);
    border: 1px solid var(--dwc-border-color);
    border-radius: 5px;
    font-size: medium;
    display: flex;
    vertical-align: middle;
    padding-top: 10px;
    position: relative;
}
.filter-nav-date {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 3px;
    color: var(--dwc-body-color);
    font-size: 0.75rem;
}
.filter-title {
    font-weight: bold;
    padding: 5px 0 0 5px;
}
.filter-nav-links {
    display: inline-flex;
    list-style: none;
}
.filter-nav-links li {
    color: var(--dwc-body-color);
    border-radius: 5px;
    text-decoration: none;
    padding: 5px;
    cursor: pointer;
}
.filter-nav-links a {
    text-decoration: none;
}
.filter-nav-links li:hover {
    background-color: var(--dwc-wiki-selected);
}
.filter-nav-links .current {
    border: 1px solid var(--dwc-wiki-selected);
}
.notification-edit {
    text-decoration: none;
}
.filter-nav-padding {
    margin-left: 5px;
    margin-right: 5px;
}

.filter-page-item-count {
    height: 2rem;
    border-radius: 5px;
    margin-right: 2rem;
}

/* Folder Tree */
/* Remove default bullets */

.folder-nav {
    height: 0%;
    transition: width 1s;
    display: none;
}
.folder-nav-collapse {
    height: auto;
    display: block;
}

ul, #folderTree {
    list-style-type: none;
}

#folderTree {
    margin: 0;
    padding: 0;
}

/* Style the caret/arrow */
.caret {
    cursor: pointer;
    -webkit-user-select: none; /* Safari */
    user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
    content: "\25B6";
    color: black;
    display: inline-block;
    margin-right: 6px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
    transform: rotate(90deg);
}

/* Hide the nested list */
.nested {
    display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
    display: block;
}

/* Support and Ticket Styling */

.support-list-header {
    display: flex;
    flex-direction: row;
    padding-left: 1rem;
    padding-right: 1rem;
}

.support-list-title {
    flex-grow: 1;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.2;
}

.support-list-item {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.2;
    margin-left: 1rem;
}

.card-hide-overflow {
    overflow-x: hidden;
}

.ticket-container {
    display: flex;
    flex-direction: column;
    margin: 5px 0 0 0;
    padding-right: 30px;
    padding-left: 5px;
}
.ticket-detail-body {
    flex-grow: 1;
    min-width: 300px;
    padding-bottom: 15px;
}

.ticket-detail-info {
    max-width: 300px;
    min-width: 200px;
}
.ticket-due-date {
    font-weight: bold;
}
.ticket-assigned-person {
    font-size: larger;
}

.ticket-detail {
    opacity: 1;
    max-height: 500px;
    transition-property: max-height, opacity;
    transition-duration: 0.8s, 0.4s;
}

.ticket-detail.ticket-detail-hide {
    opacity: 0;
    max-height: 0;
    overflow-y: clip;
}

.sla-color-box {
    float: right;
    width: 55px;
    height: auto;
    border: var(--dwc-border-color) .1em solid;
}

/* Notes Body */
.support-ticket {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
}

@media only screen and (min-width: 900px) {
    .support-ticket {
      flex-direction: row;
  }
}

.ticket-body {
    flex-grow: 1;
    min-width: 300px;
    padding-bottom: 15px;
}
.ticket-info-tab {
    position: absolute;
    top: 300px;
    right: -60px;
    height: 1.5em;
    margin: auto;
}

.ticket-info-tab {
    transform: rotate(-90deg);
}

.ticket-info-tab-title {
    display: inline-block;
    margin: 0 5px 0 5px;
    padding: 0 10px 0 10px;
    border: .05rem solid black;
    border-radius: 5px;
}
.ticket-info-tab-spacer {
    display: inline-block;
    margin: 0 5px 0 5px;
    padding: 0 10px 0 10px;
}

.ticket-info {
    max-width: 350px;
    min-width: 250px;
}

/* Note Body */
.note-container {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
}

@media only screen and (min-width: 550px) {
    .note-container {
      flex-direction: row;
  }
}

.note-address {
    background-color: rgba(225, 171, 250, 0.3);
    padding: 5px;
    min-width: 175px;
}

.note-address-agent {
    background-color: rgba(144, 144, 144, 0.4);
}

.note-address-form {
    background-color: rgba(165, 220, 255, 0.4);
}

.note-content {
    flex-grow: 1;
    /*min-width: 375px;*/
    padding: 5px;
}

.image_upload {
    display: inline-block;
    border: 1px solid var(--dwc-wiki);
    border-radius: 3px;
    margin: 3px;
    line-height: 2.5rem;
}

.btn-remove {
    cursor: pointer;
    color: red;
    border-radius: 3px;
}

.btn-remove:hover {
    border: 1px solid red;
    background-color: lightcoral;
}

.simple-border-item {
    padding: 3px;
    border: 1px solid var(--dwc-border-color);
    border-radius: 5px;
}

.release-notes__list {
    line-height: 1rem;
    padding-bottom: 1rem;
}

.release-notes__list li {
    line-height: 1.5rem;
    list-style: disc;
}

.enbolden {
    font-weight: bolder;
}

/* table styled flex container */

.nav-item-table {
    table-layout:fixed;
    width:100%;
}

.nav-item-table-row {
    display: table-row;
}

.nav-item-table-cell {
    display: table-cell;
    white-space: pre;
}

.nav-item-table-cell-big {
    display: table-cell;
    white-space: pre;
    overflow-x: hidden;
    text-overflow: ellipsis;
    width:100%;
}

.nav-item-table-header {
    font-weight: bolder;
    font-size: larger;
}

.nav-item-table-push-right {
    text-align: right;
}

.return-character-padding {
    padding-right: 0.3rem;
}

/* messaging styles */

.messageDefault {
    font-weight: normal;
}

.messageRead {
    font-weight: normal;
}

.messageUnread {
    font-weight: bold;
}

.message-container {
    height: auto;
    width: auto;
}

.message-list {
    display: inline;
    float: left;
    border: 0.1rem solid grey;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: visible;
    transition-property: visibility, width, opacity;
    transition-duration: 0s, 0.8s, 0.4s;
}

.message-list__expand-half {
    width: 50%;
    opacity: 1;
}

.message-list__expand-full{
    width: 0;
    opacity: 0;
}

.message-list__hide {
    height: 0;
    visibility: hidden;
}

.message-reader {
    display: inline;
    float: right;
    border: 0.1rem solid grey;
    border-radius: 5px;
    height: 100%;
    width: 0;
    opacity: 0;
    visibility: hidden;
    transition-property: visibility, width, opacity;
    transition-duration: 0s, 0.8s, 0.4s;
    transition-delay: 0s, 0s, 0.4s;
}

.message-reader__expand-half {
    width: 50%;
    opacity: 1;
}

.message-reader__expand-full {
    width: 100%;
    opacity: 1;
}

.message-reader__show {
    visibility: visible;
}

.message-titleBar {
    position: relative;
    padding: 0.5rem;
    width: 100%;
    background-color: var(--dwc-msg-accent);
}

.message-titleText {
    font-size: 2rem;
    margin-right: 4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-titleBtn {
    position: absolute;
    display: inline-block;
    top: 0;
    right: 0.4rem;
    font-size: 1.5rem;
}

.message-button {
    display: inline-block;
}

.message-body__container {
    padding: 0.5rem;
}

.message-header {
    font-family: monospace;
    font-size: smaller;
}

.message-body {

}

/* Reports */
.header-container {
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
}
.header-container_col-1 {
    flex-grow: unset;
    text-align: left;
}
.header-container_col-2 {
    flex-grow: 1;
    width: 75%;
    white-space: nowrap;
    text-align: center;
}
.header-container_col-3 {
    flex-grow: 1;
    width: 25%;
    white-space: nowrap;
    text-align: right;
}

/* Inventory Styles */

.inv_image_box {
    float: left;
}

.inv_image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border: 2px solid var(--dwc-border-color);
    border-radius: 5px;
    margin: 5px;
}

.inv-select-resize {
    width: 100%;
}
@media (min-width: 768px) {
    .inv-select-resize { width: 50%; }
}

.inv-detail {
    opacity: 1;
    /*max-height: 500px;*/
    max-height: calc(100vh - 20px);
    transition-property: max-height, opacity;
    transition-duration: 0.4s, 0.4s;
    overflow-y: auto;
    overflow-x: hidden;
}

.inv-detail.inv-detail-hide {
    opacity: 0;
    max-height: 0;
    overflow-y: clip;
}

.inv-table-col {
    width: 20%;
    opacity: 1;
}

.inv-table-col.inv-tale-col-hide {
    width: 0;
    opacity: 0;
}

.toggle-header {
    position: relative;
}

.toggle-icon {
    max-width: 75px;
    position: absolute;
    right: 8px;
    top: -4px
}

.inv-note {
    display: unset;
}

.inv-note-hide {
    visibility: hidden;
    display: none;
}

.inv-assignHist-label {
    display: unset;
}

.inv-assignHist-label-hide {
    visibility: hidden;
    display: none;
}

.inv-assignHist-field {
    display: unset;
}

.inv-assignHist-field-hide {
    visibility: hidden;
    display: none;
}

/* Dates and SLA */
.colorClass_green {
    color: var(--dwc-trace);
}

.colorClass_red {
    color: var(--dwc-error);
}

.System {
    color: var(--dwc-body-color);
}

.bg-System {
    color: var(--dwc-body-color);
}

.Trace {
    color: var(--dwc-trace);
}

.bg-Trace {
    background-color: var(--dwc-trace);
}

.Debug {
    color: var(--dwc-debug);
}

.bg-Debug {
    background-color: var(--dwc-debug);
}

.Info {
    color: var(--dwc-info);
}

.bg-Info {
    background-color: var(--dwc-info);
}

.Warn {
    color: var(--dwc-warn);
}

.bg-Warn {
    background-color: var(--dwc-warn);
}

.Error {
    color: var(--dwc-error);
}

.bg-Error {
    background-color: var(--dwc-error);
}

.Fatal {
    color: var(--dwc-fatal);
}

.bg-Fatal {
    background-color: var(--dwc-fatal);
}

dialog:modal {
    max-width: 80vw;
}

.modal-sm {
    width: 95vw;
}

.modal-md {
    width: 95vw;
}

.modal-lg {
    width: 95vw
}
.pictureChooser {
    height: 75vh;
}

@media (min-width: 534px) {
    .modal-sm { width: 80vw }
    .modal-md { width: 80vw }
    .modal-lg { width: 90vw }
}

@media (min-width: 768px) {
    .modal-sm { width: 50vw }
    .modal-md { width: 75vw }
    .modal-lg { width: 80vw }
}
@media (min-width: 992px) {
    .modal-sm { width: 30vw }
    .modal-md { width: 50vw }
    .modal-lg { width: 80vw }
}