.searchSettingsWrap{
    position:relative;
    width:100%;
    max-width:332px;
}

button.searchSettingsToggle{
    position:absolute;
    top:2px;
    right:3px;
    z-index:5;
    width:32px;
    height:32px;
    padding:0;
    margin:0;
    border:none !important;
    background:transparent !important;
    cursor:pointer;
    opacity:.7;
}

button.searchSettingsToggle:hover,
button.searchSettingsToggle:target,
button.searchSettingsToggle.active{
    background:transparent !important;
    opacity:1;
}

button.searchSettingsToggle:before{
    position: relative;
    right: 27px;
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background-image: url('../img/svg/terminal-ui.svg');
    background-repeat: no-repeat;
    background-size: 202px 98px;
    background-position: -174px -2px;
}

button.searchSettingsToggle:hover:before,
button.searchSettingsToggle:target:before{
    background-position:-174px -62px;
}

button.searchSettingsToggle.active:before{
    background-position:-174px -63px;
}

.searchSettingsPanel{
    position: absolute;
    top: 42px;
    left: 0;
    z-index: 1002;
    width: 275px !important;
    min-height: 226px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    backdrop-filter: blur(10px);
    text-align: left;
}

.searchSettingsPanel h4{
    margin:0 0 10px 0;
    padding:0;
    font-size:14px;
    font-weight:400;
    color:#222;
}

.searchSettingsPanel label{
    display:flex;
    align-items:center;
    gap:8px;
    min-height:26px;
    margin:0 0 6px 0;
    font-size:13px;
    font-weight:300;
    color:#333;
    cursor:pointer;
}

.searchSettingsPanel label:last-child{
    margin-bottom:0;
}

.searchSettingsPanel input[type="checkbox"]{
    width:14px;
    height:14px;
    margin:0;
    accent-color:#70ae40;
}

.searchSettingsPanel div#searchSettingsPanel.searchSettingsPanel button.active {
    background: rgba(112,174,64,.12);
    border: 1px solid #70ae40;
    border-radius: 8px;
    color: #70ae40;
}


body.dark-theme button.searchSettingsToggle:before{
    background-position:-174px -2px;
}

body.dark-theme button.searchSettingsToggle:hover:before,
body.dark-theme button.searchSettingsToggle:target:before,
body.dark-theme button.searchSettingsToggle.active:before{
    background-position:-174px -62px;
}

body.dark-theme .searchSettingsPanel{
    background:rgba(33,33,33,.92);
    border:1px solid #4a4a4a;
    color:#fff;
}

body.dark-theme .searchSettingsPanel h4{
    color:#bdbdbd;
}

body.dark-theme .searchSettingsPanel label{
    color:#e8e8e8;
}

body.dark-theme .searchSettingsWrap input#searchForm{
    background-position:calc(100% - 38px) 3px;
}

button#searchSettingsToggle:hover,
button#searchSettingsToggle:target {
    background: transparent;
}

@media(max-width:768px){
    .searchSettingsWrap{
        max-width:100%;
    }

    .searchSettingsWrap input#searchForm{
        max-width:calc(100% - 32px);
        padding-right:42px;
        background-position:calc(100% - 38px) 6px !important;
    }

    .searchSettingsPanel{
        left:0;
        right:auto;
        width:220px;
    }
}

.searchSettingsWrap{
    position: relative;
    z-index: 2;
    width:100%;
    max-width:332px;
}

.searchSettingsWrap input#searchForm{
    padding-right:42px;
    background-position:calc(100% - 2px) 4px;
}

button.searchSettingsToggle{
    position:absolute;
    top:2px;
    right:16px;
    z-index:5;
    width:32px;
    height:32px;
    padding:0;
    margin:0;
    border:none !important;
    background:transparent !important;
    cursor:pointer;
    opacity:.7;
}

button.searchSettingsToggle:hover,
button.searchSettingsToggle:target,
button.searchSettingsToggle.active{
    background:transparent !important;
    opacity:1;
}

button.searchSettingsToggle:before{
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background-image: url('../img/svg/terminal-ui.svg');
    background-repeat: no-repeat;
    background-size: 264px 98px !important;
    background-position: -182px -2px;
    filter: contrast(0.15);  
}

button.searchSettingsToggle:hover:before,
button.searchSettingsToggle:target:before,
button.searchSettingsToggle.active:before{
    background-size: 264px 98px !important;
    background-position: -182px -2px;
}

.searchSettingsPanel{
    position: absolute;
    top: 42px;
    right: 0;
    z-index: 1002;
    width: 230px;
    min-height: 226px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    backdrop-filter: blur(10px);
    text-align: left;
}
.searchSettingsPanel h4,
.terminalGlossaryPanel h4{
    margin:0 0 10px 0;
    padding:0;
    font-size:15px;
    font-weight:400;
    color:#222;
}
.searchOptions .searchSettingsActions {
    display:flex;
    gap:8px;
}
.searchOptions .searchSettingsActions,
.searchOptions .searchSettingsActions button {
    margin-top: 0;
}
body.dark-theme .searchSettingsActions button {
    background: linear-gradient(rgb(63, 63, 63) 0%, rgb(48, 48, 48) 100%) !important;
}
body.dark-theme .searchSettingsActions button:hover,
body.dark-theme .searchSettingsActions button:target,
body.dark-theme .calc-ui #formCard div.functions button:not(#searchSettingsToggle):hover,
body.dark-theme .calc-ui #formCard div.functions button:target {
    background-color: var(--ppi-green-dark) !important;
    border: 1px solid var(--ppi-green-dark) !important;
    color: var(--ppi-white);
}
body.dark-theme .calc-ui #formCard div.functions button.period:hover, 
body.dark-theme .calc-ui #formCard div.functions button.period:target {
    background-image: url('../img/svg/period.svg');
    background-size: 14px 14px;
    background-position: 6px 9px;
    background-repeat: no-repeat;
}

.searchOptions{
    display:flex;
    flex-direction:column;
    gap:6px;
}
button.searchOption,
.dark-theme button.searchOption {
    height: 32px;
}
button.searchOption{
    width: 100%;
    margin: 0 0 8px 0;
    padding: 6px 10px 8px 8px;
    border-radius: 7px;
    border: 1px solid #e7e7e7 !important;
    background: #f6f6f6 !important;
    color: #333 !important;
    font-size: 13px;
    font-weight: 300;
    text-align: left;
    cursor: pointer;
    vertical-align: top;
}
button.searchOption:before {
    content: "";
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    width: 16px;
    height: 16px;
    border: none;
    background-size: 16px auto;
    background-image: url('../img/svg/checkbox.svg');
    background-position: 0 0;
}
button.searchOption:hover:before {
    background-size: 16px auto;
    background-image: url('../img/svg/checkbox.svg');
    background-position: 0 -32px;
}
button.searchOption.active:before {
    background-size: 16px auto;
    background-image: url('../img/svg/checkbox.svg');
    background-position: 0 -144px;
}
div.functions.main div.searchSettingsPanel span.intro {
    display: block;
    padding-bottom: 10px;
    font-size: 14px;
}
div.functions.main div.searchOptions {
    display: block;
    height: fit-content;
    margin-bottom: 5px;
}
button.searchOption span {
    position: relative;
    top: -3px;
    left: 6px;
}
button.searchOption:hover,
button.searchOption:target{
    border-color:#70ae40 !important;
    background:rgba(112,174,64,.08) !important;
    color:#3f7f25 !important;
}
button.searchOption.active{
    border-color: #9ecc7a !important;
    background: linear-gradient(to bottom, rgb(207 235 205) 0%, rgb(187 222 182) 100%) !important;
    color: #317018 !important;
}
button.searchOption i {
    position: relative;
    top: -1px;
    display: inline-block;
    padding: 1px 8px 2px 8px;
    background: rgb(201 223 189);
    border-radius: 100px;
    font-style: normal;
    line-height: 1em;
    font-size: 12px;
}
button.searchOption.active i {
    height: 16px;
    background: rgb(94 150 50);
    border-radius: 4px;
    margin: 0 0 0 5px;
    font-size: 11px;
    line-height: 15px;
    color: #fff;
}

button.searchSettingsSave,
button.searchSettingsDefault,
button.searchTermsOpen,
button.terminalGlossaryClose{
    display: inline-block;
    width: auto;
    height: 34px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid #cfcccc !important;
    background: linear-gradient(to bottom, rgb(242 242 242) 0%, rgb(226 226 226) 100%);
    color: #333 !important;
    font-size: 12px;
    font-weight: 300;
    cursor: pointer;
    line-height: 1em;
}

button.searchSettingsSave {
    width: 96px;
    margin-right: 15px;
}
button.searchSettingsDefault {
    width: 140px;
}

button.searchTermsOpen{
    width:100%;
    margin-top:8px;
}

button.searchSettingsSave:hover,
button.searchSettingsSave:target,
button.searchSettingsDefault:hover,
button.searchSettingsDefault:target,
button.searchTermsOpen:hover,
button.searchTermsOpen:target,
button.terminalGlossaryClose:hover,
button.terminalGlossaryClose:target{
    background:#70ae40 !important;
    border-color:#70ae40 !important;
    color:#fff !important;
}

body.dark-theme div.functions.main div.searchOptions * {
    color: #f4f4f4;
}

@media(max-width:768px){
    div.functions.main div.searchSettingsWrap {
        max-width: 100%;
        opacity: 1;
    }
    .searchSettingsWrap input#searchForm,
    .searchSettingsWrap input#searchForm:focus,
    .searchSettingsWrap input#searchForm:hover,
    .searchSettingsWrap input#searchForm:target{
        max-width: calc(100% - 85px);
        padding-right: 72px;
        background-color: #ffffff !important;
        background-position: calc(100% - 4px) 6px !important;
        opacity: 1;
    }

    .searchSettingsPanel,
    .terminalGlossaryPanel{
        left:20px;
        right:auto;
        width:260px;
    }
}

.dark-theme .functions.common,
.dark-theme .functions.secondary {
    background: var(--ppi-dark-panel);
    border: 1px solid #454545 !important;
}