/* @import url("https://tself.com/resources/slds_styles/styles/salesforce-lightning-design-system.min.css"); */

:root {
    --header-background-color: rgb(1, 118, 211);
    --body-background-color: rgb(245, 245, 247);
    --card-background-color: none;
    --card-box-shadow: lightskyblue 0px 7px 29px 0px;
    --card-border: 2px solid lightcyan;
}

[data-theme="dark"] {
    --body-background-color: #01467f;
    --card-background-color: #cce8ff;
    --card-box-shadow: lightskyblue 0px 7px 29px 0px;
    --card-border: 2px solid #8d8d8d;
}

.slds-card {
    border-radius: 10px !important;
    background-color: var(--card-background-color) !important;
    box-shadow: var(--card-box-shadow) !important;
    border: var(--card-border) !important;
}

body {
    margin: 0;
    touch-action: manipulation;
    background-color: var(--body-background-color) !important;
}

#lwcTarget {
    overflow: auto;
    height: 100%;
}

.darkMode .slds-panel, .darkMode .slds-panel a {
    background-color: #cce8ff !important;
    box-shadow: lightskyblue 3px 3px 12px 0px !important;
    color: black;
}


.menuCloseIcon svg,
.menuCloseIcon:hover svg,
.menuCloseIcon:active svg,
.menuCloseIcon:focus svg {
    fill: rgb(1, 118, 211);
}

.darkMode .menuCloseIcon svg,
.darkMode .menuCloseIcon:hover svg,
.darkMode .menuCloseIcon:active svg,
.darkMode .menuCloseIcon:focus svg {
    fill: white;
}

.darkMode .slds-panel a:hover,
.darkMode .slds-panel a:active,
.darkMode .slds-panel a:focus {
    color: black;
    /*box-shadow: lightskyblue 0px 7px 10px 0px !important;*/
}



.modeIcon .slds-button.slds-button_icon.slds-button_icon-bare  svg {
    /*background-color: #404040 !important;*/
    width: 1.8rem !important;
    height: 1.8rem !important;
}

.modeIcon .slds-button.slds-button_icon.slds-button_icon-bare,
.modeIcon .slds-button.slds-button_icon.slds-button_icon-bare:active,
.modeIcon .slds-button.slds-button_icon.slds-button_icon-bare:focus,
c-exp-header .slds-button.slds-button_icon,
c-exp-header .slds-button.slds-button_icon:active,
c-exp-header .slds-button.slds-button_icon:focus {
    border: none !important;
    box-shadow: none;
}

c-exp-header .slds-button:hover svg {
    filter: drop-shadow(0px 0px 5px white);
}

.modeIcon .slds-button:hover svg {
    filter: drop-shadow(0px 0px 5px yellow);
}

/* https://getcssscan.com/css-box-shadow-examples */


.hidden {
    display: none;
    visibility: hidden;
}

#auraErrorMessage {
    display: none;
    visibility: hidden;
}

.modalContainer {
    z-index: 99999;
    height: 100vh;
    width: 100vw;
    position: absolute;
    font-size: 1rem;
    display: block;
    visibility: visible;
    color: white;
    top: 0;
    opacity: 1 !important;
}

c-exp:has(.darkMode) c-exp-dreamhost-navigator iframe {
    background-color: lightsteelblue !important;
}

c-exp:has(.darkMode) lightning-spinner, html:has(.darkMode) .slds-spinner_container {
    background-color: #cce8ff !important;
}

body:has(.newModal) :not(.newModal) {
    opacity: 0.9;
}

.newModal {
    position: absolute;
    background-color: red;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    max-width: 500px;
    /*text-align: center;*/
    padding: 20px 20px 20px 20px;
    pointer-events: initial;
    filter: none !important;
}

.modal {
    position: absolute;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    /*text-align: center;*/
    padding: 20px 20px 20px 20px;
    pointer-events: initial;
    filter: none !important;
}