#footer {
    display: none;
}

#navigation {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(255, 255, 255, 0.15);
    padding: 0;
}

#navTabsWrapper .navTab {
    background-color: #f1f1f9;
    color: #666;
    margin: 0.5rem 0.25rem 0rem 0rem;
    padding: 0.25rem 0.25rem;
    border-radius: 0.5rem;
    border-width: 1px;
    border-color: transparent;
    height: 1.8rem;
}

.phynxNoTouch #navTabsWrapper .navTab:not(.theOne):hover, #navTabsWrapper .navTab:hover {
    background-color: #f1f1f9;
    border-color: #4650dd;
    color: #333;
}

#navTabsWrapper .navTab.theOne {
    background-color: #4650dd;
    color: #fff;
}

#navTabsWrapper .navTab.theOne:hover {
    background-color: #212bb5;
}

#navTabsWrapper .tabImg, #navTabsWrapper .smallTabImg {
    margin-top: calc(0.5rem - 16px);
}

#container {
    background: #e9e4e0 !important;
}

#wrapper, #contentScreen, #contentScreenLeft, #contentScreenRight {
    background: #f4f4f4 !important;
}

/* todo: need to cleanup hardcodes js-styles first
#contentLeft, #contentRight {
    background-color: #fff;
}
*/

#desktopWrapper {
    background-color: #f4f4f4;
    max-width: 1460px;
    margin-left: auto;
    margin-right: auto;
}

.SpellbookContainer {
    background: #f8f9fa;
    margin-right: 0;
}

.SpellbookSpell .spell {
    background: #fff;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15);
    border-radius: 0.5rem;
}

.SpellbookSpell .spell .backgroundColor2 {
    background: #4650dd !important; /* don't know why it is hardcoded sometimes */
    color: #fff !important;
    border-radius: 0.5rem 0.5rem 0 0;
}

#desktopWrapper, #wrapper, #contentScreen {
    min-height: -webkit-fill-available !important;
}

#wrapper, #contentScreen {
    min-width: -webkit-fill-available !important;
}

.bigButton {
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    background-color: #f1f1f9;
    color: #333;
}

.bigButton:hover {
    border: 1px solid rgba(0, 0, 0, 0.5);
    background-color: #4650dd;
    color: #fff;
}

.backgroundColor1 {
    background-color: #4650dd;
    color: #fff;
}

.backgroundColor1 .iconic, .tableWeightLight .lastSelected .iconic {
    color: #f0f0f0 !important;
}

.backgroundColor1 .iconic:hover, .tableWeightLight .lastSelected .iconic:hover {
    color: #fff !important;
}

.tableWeightLight .lastSelected {
    background-color: #4650dd;
    color: #fff;
}

.phynxNoTouch #contentScreen tr:not(.noHover):not(.lastSelected):not(.extendedButton) {
    transition: all ease 100ms !important;
    background-color: #f1f1f9;
    color: #333;
}

.phynxNoTouch #contentScreen tr:not(.noHover):not(.lastSelected):not(.extendedButton):hover {
    transition: all ease 500ms !important;
}


.phynxNoTouch #contentScreen tr:not(.noHover):not(.lastSelected):not(.extendedButton) .iconic {
    color: #666;
}

.phynxNoTouch #contentScreen tr:not(.noHover):not(.lastSelected):not(.extendedButton):hover {
    background-color: #9196e1;
    color: #fff;
}

.phynxNoTouch #contentScreen tr:not(.noHover):not(.lastSelected):not(.extendedButton):hover .iconic {
    color: #fff !important;
}

table.contentBrowser tr.kategorieTeiler, table.contentBrowser tr.kategorieTeiler:hover {
    background-color: #4650dd !important;
    color: #fff !important;
}

table.contentBrowser > tbody > tr:not(.kategorieTeiler):hover {
    background-color: #9196e1 !important;
    color: #fff !important;
}

table.contentBrowser > tbody > tr:not(.kategorieTeiler) {
    transition: background-color ease 100ms !important;
    background-color: #e9e9f0;
    color: #000;
}

table.contentBrowser > tbody > tr:not(.kategorieTeiler):nth-child(odd) {
    background-color: #fcfcff;
    color: #000;
}

table.contentBrowser > tbody > tr[id^=Browser], input[type=button], input[type=submit]  {
    cursor: pointer;
}

.iconic.trash_stroke {
    color: #dc3545 !important;
}

.iconic.trash_stroke:hover {
    color: #ff0000 !important;
}

.contextMenu, .popup.ui-draggable {
    border: 1px solid;
    border-color: rgba(0, 0, 0, 0.5);
    border-radius: 0.5rem;
    box-shadow: 0.25rem 0.25rem 0.5rem 0.125rem rgba(0, 0, 0, .35);
    padding: 0.25rem;
    background-color: #fff;
}

#cMHeader, .contextMenu .cMHeader, .popup.ui-draggable .popupHeader {
    padding: 10px;
    cursor: move;
    margin: calc(-0.25rem - 1px) calc(-0.25rem - 1px) 0 calc(-0.25rem - 1px);
    border-radius: 0.5rem 0.5rem 0 0;
    font-weight: 700;
}

.closeContextMenu, .minimizeContextMenu {
    width: 22px;
}

#darkOverlay, .darkOverlay {
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(5px);
    opacity: 1.0 !important;
}

input[type=text], input[type=submit], input[type=password], input[type=radio], input[type=checkbox], input[type=date], input[type=number], input[type=month], select {
    background-color: #f0f0f0;
    color: #333;
}

input[type=text]:focus, input[type=submit]:focus, input[type=password]:focus, input[type=radio]:focus, input[type=checkbox]:focus, input[type=date]:focus, input[type=number]:focus, input[type=month]:focus, select:focus {
    background-color: #fff;
    color: #000;
}

input[type=text] {
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    border-bottom-color: #9E9EF0;
}

@media screen and (min-width: 1200px) {
    body {
        font-size: 0.9em;
    }

    table {
        font-size: 14px;
    }

    input[type=text], input[type=submit], input[type=password], input[type=radio], input[type=checkbox], input[type=date], input[type=number], input[type=month], select {
        font-size: inherit;
    }

    *:not(.prettyTitle) > small {
        font-size: 12px;
    }
}

@media only screen and (max-width: 1000px) {
    #busyBox {
        height: 32px !important;
        margin-top: -10px !important;
        margin-left: -2px !important;
    }

    .SpellbookSpell > .spell {
        margin-bottom: 0 !important;
    }

    .SpellbookSpell .spell .backgroundColor2 {
        border-radius: 0.5rem;
    }
}

@media only screen and (min-width: 1001px) {

    .browserContainer.contentBrowser {
        width: 418px !important;
    }

}