/* =========================
   DEFINITIONS PANEL
========================= */

.terminalTopActions button.defIcon:hover,
.terminalTopActions button.defIcon:target,
.terminalTopActions button.defIcon.active{
    background:transparent !important;
    opacity:0.8;
}
.terminalTopActions button.defIcon:before,
.terminalTopActions button.defIcon:hover:before,
.terminalTopActions button.defIcon:target:before{
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background-image: url('../img/svg/terminal-ui.svg');
    background-repeat: no-repeat;
    background-size: 274px 108px !important;
    background-position: -238px -38px !important;
}
.definitionsPanel{
    position:absolute;
    top:44px;
    right:12px;
    z-index:30200;
    width:330px;
    max-height:460px;
    padding:12px;
    border-radius:8px;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 8px 28px rgba(0,0,0,.22);
    backdrop-filter:blur(10px);
    text-align:left;
    overflow:hidden;
}
.definitionsPanel h5{
    margin:0 0 10px 0;
    padding:0;
    font-size:14px;
    font-weight:400;
    color:#222;
}
input#definitionsSearch{
    position: relative;
    z-index: 3;    
    width: calc(100% - 22px);
    height: 32px;
    margin: 0 0 10px 0;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #fff;
    color: #333;
    font-size: 13px;
    background-color: #fff;
    background-image: url(../img/svg/gray-search.svg);
    background-size: 28px 28px;
    background-position: 99.5% 3px;
    background-repeat: no-repeat;
}
.definitionsList{
    max-height:350px;
    overflow-y:auto;
}
span.definitionsHint {
    display: block;
    margin: 0 0 10px 10px;
    font-size: 14px;    
    letter-spacing: 0.01em;
}
body.dark-theme .definitionsHint{
    color:#bdbdbd;
}
input#definitionsSearch[type=text]::placeholder{
    color:#777;
    opacity:1;
}
body.dark-theme input#definitionsSearch[type=text]::placeholder{
    color:#bdbdbd;
    opacity:1;
}
.calc-ui .definitionTerm{
    width:100%;
    min-height:34px;
    margin:0 0 6px 0;
    padding:8px 10px;
    border-radius:7px;
    border:1px solid rgba(112,174,64,.14) !important;
    background:rgba(112,174,64,.06) !important;
    color:#222 !important;
    font-size:13px;
    font-weight:400;
    text-align:left;
    cursor:pointer;
}

.calc-ui .definitionTerm:hover,
.calc-ui .definitionTerm:target{
    background:rgba(112,174,64,.14) !important;
    border-color:#70ae40 !important;
    color:#3f7f25 !important;
}

.definitionsSearchWrap{
    position:relative;
    width:100%;
}

.definitionsSearchWrap em.placeholder{
    position: absolute;
    left: 12px;
    top: 16px;
    z-index: 2;
    transform: translateY(-50%);
    font-style: normal;
    font-size: 14px;
    font-weight: 300;
    color: #777;
    pointer-events: none;
    line-height: 1;
}

.definitionsSearchWrap em.placeholder.hidden{
    display:none;
}

body.dark-theme .definitionsSearchWrap em.placeholder{
    color:#bdbdbd;
}

.definitionDetails{
    max-height:350px;
    overflow-y:auto;
}

button.definitionsBack{
    height:30px;
    margin:0 0 10px 0;
    padding:5px 10px;
    border-radius:6px;
    border:1px solid #ddd !important;
    background:#f2f2f2 !important;
    color:#333 !important;
    font-size:12px;
    font-weight:300;
    cursor:pointer;
}

button.definitionsBack:hover,
button.definitionsBack:target{
    background:#70ae40 !important;
    border-color:#70ae40 !important;
    color:#fff !important;
}

.definitionDetails h4{
    margin:0 0 8px 0;
    padding:0;
    color:#222;
    font-size:15px;
    font-weight:500;
}

.definitionDetails p{
    margin:0;
    color:#555;
    font-size:13px;
    line-height:1.45;
}

.definitionsEmpty{
    padding:8px 0;
    color:#777;
    font-size:13px;
}

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

body.dark-theme .definitionsPanel h5,
body.dark-theme .definitionDetails h4{
    color:#e8e8e8;
}

body.dark-theme input#definitionsSearch{
    background:#1f1f1f;
    border-color:#555;
    color:#e8e8e8;
}

body.dark-theme .definitionTerm{
    background:rgba(112,174,64,.12) !important;
    border-color:rgba(112,174,64,.25) !important;
    color:#e8e8e8 !important;
}

body.dark-theme .definitionTerm:hover,
body.dark-theme .definitionTerm:target{
    background:rgba(112,174,64,.2) !important;
    border-color:#70ae40 !important;
    color:#dff5d8 !important;
}

body.dark-theme .definitionDetails p{
    color:#cfcfcf;
}

body.dark-theme button.definitionsBack{
    background:#333 !important;
    border-color:#555 !important;
    color:#e8e8e8 !important;
}

#definitionDetails .buttons{
    display:flex;
    gap:8px;
    margin-top:14px;
}

#definitionDetails .buttons button{
    flex:1;
    height:34px;
    border:none;
    border-radius:6px;
    font-size:13px;
    font-weight:400;
    cursor:pointer;
}

button.definitionsBack{
    background:#e8e8e8;
    color:#444;
}

button.definitionsBack:hover{
    background:#dcdcdc;
}

button.copy{
    background:#70ae40;
    color:#fff;
}

button.copy:hover{
    background:#5f9c34;
}

body.dark-theme button.definitionsBack{
    background:#3a3a3a;
    color:#e8e8e8;
}

body.dark-theme button.definitionsBack:hover{
    background:#464646;
}
@media(max-width:768px){
    .definitionsPanel{
        position:fixed;
        top:52px;
        right:10px;
        left:auto;
        width:calc(100% - 44px);
        max-width:330px;
        z-index:30200;
    }
    .terminalTopActions button.defIcon{
        width:28px;
        height:28px;
    }
    .terminalTopActions button.defIcon:before{
        width:28px;
        height:28px;
        background-size:196px 90px;
        background-position:-94px -2px;
    }
    .terminalTopActions button.defIcon:hover:before,
    .terminalTopActions button.defIcon:target:before,
    .terminalTopActions button.defIcon.active:before{
        background-position:-94px -58px;
    }
}