/* ==UserStyle==
@name         Sanakirja Dark
@namespace    Permik
@version      1.0.13
@license      CC-BY-SA-4.0
@author       Permik
@updateURL    https://raw.githubusercontent.com/Permik/sanakirja-org-dark/master/sanakirja-org-dark.user.css
@homepageURL  https://github.com/Permik/sanakirja-org-dark
==/UserStyle== */
@-moz-document domain("sanakirja.org"), domain("webxicon.org") {
html, body, .hs-links {
        background: #101010 !important;
        color: #c5c5c5;
    }
h1,h2,h3{
    color: #c5c5c5 !important;
}
div.content{
    width: auto;
}
body{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
body .sccm-container{
    color: inherit;
}
body .sccm-content{
    background: #101010;
    background-image: none;
}
body .dialog.shortcuts{
    left: initial;
    align-self: center;
}
body #wrapper{
    min-height: initial;
    margin: initial;
}
body #wrapper .hs-links{
    overflow: auto;
    height: auto;
}
body #wrapper .hs-links ul{
    padding-left: 16px;
    height: auto;
}
body #wrapper .hs-links ul{
    padding-left: 16px;
    height: auto;
}
body #wrapper .hs-links ul li a {
    color: #c5c5c5 !important;
    float: none;
}
body #wrapper .hs-links ul li a:hover {
    text-decoration: underline !important;
}
body #wrapper .hs-links ul li.hs-title a{
    font-size: 14px;
}
body #wrapper #header{
    position: initial;
    width: initial;
    height: initial;
    display: flex;
    align-items: center;
    padding: 8px;
    background-size: contain;
    justify-content: space-around;
    flex-wrap: wrap;
}
body #wrapper #header #hs_logo{
    float: none;
    margin: 0px;
}
body #wrapper #header .content{
    position: initial;
    left: initial;
    top: initial;
    float: none;
    height: auto;
    background: none;
    display: contents;
}
body #wrapper #header .content h1 {
    float:none;
    margin: 8px;
    display: inline-block;
    background: linear-gradient(to top, #f1d393 0%, #f1d393 45%, #d0aa57 55%, #d0aa57 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
body #wrapper #header .content h1 a{
    font-size: 26px;
    height: initial;
    width: initial;
    text-indent: initial;
}
body #wrapper #header .content ul {
    display: inline-block;
    float: none;
    margin: 0px;
}
body #wrapper #header .content ul li {
    float: none;
    padding: 0px 4px;
} 
body #wrapper .below_header{
    background: #151515 !important;
}
body #wrapper .below_header .content {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    flex-wrap: wrap-reverse;
    align-items: start;
}
body #wrapper .below_header .content #report_error{
    background: url('data:image/svg+xml;utf8,<svg focusable="false" style="fill:white;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"></path></svg>') no-repeat;
    float: none;
    display: flex;
    align-items: center;
}
body #wrapper .below_header .content #report_error a{
    height: initial;
    padding-top: initial;
}
body #wrapper .below_header .content #search .button{
    border-radius: 8px;
    background: url('data:image/svg+xml;utf8,<svg focusable="false" style="fill:white;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path></svg>') no-repeat center/40%, #4b8a8a;
    border: 2px solid #224040;
    box-shadow: inset 0px 24px 8px -16px #ffffff44, inset 0px 0px 8px #000000ff;
}
body #wrapper .below_header .content #search .button:hover{
    box-shadow: inset 0px 24px 8px -16px #cccccc44, inset 0px -32px 8px -16px #00000044, inset 0px 0px 8px #000000ff;
}
    
body #wrapper .below_header .content .suggestions{
    background: #222 !important;
    box-shadow: none !important;
}

body #wrapper .below_header .content .suggestions ul a {
    color: #c5c5c5 !important;
}

body #wrapper .below_header .content .suggestions ul a:hover {
    background: #2e2e2e !important;
}
body #wrapper .content{
    width: auto;
}
body #wrapper .content.index{
    width: auto;
    overflow: auto;
}
body #wrapper .content.search_results{
    width: auto;
    padding-top: 0px;
    padding-left: 0px;
    padding: 15px;
}

body #wrapper .content.search_results #right_banner{
    float:none;
    width: initial;
    min-height: initial;
    padding-left: 0px;
}
body #wrapper .content.search_results .lists .pronunciation ul li {
    display: flex;
}
body #wrapper .content.search_results .lists .pronunciation ul li:last-child {
    display: initial;
}
body #wrapper .push{
    height: initial;
    clear: initial;
}
body #footer{
    padding: 15px;
    height: initial;
    background-size: contain;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
body #footer ul {
    float: none;
    width: initial;
    margin: 5px;
}
body #footer ul li {
    padding-top: initial;
    float: none;
    margin: 5px;
}
body #footer .copyrights {
    margin-left: initial;
}
body #footer .copyrights p{
    width: initial;
    padding: initial;
}
body .dialog .dialog-content{
    background: #212121 !important;
    border: 1px solid #333 !important;
    border-radius: 24px;
}
body .dialog .dialog-footer{
    display: none;
}
input.fancy_large{
    background: #222;
    color: #C5C5C5 !important;
    border: 1px solid #333 !important;
    border-radius: 24px;
    padding-bottom: 10px !important;
}
body #tooltip{
        position: absolute;
    padding: 6px;
    font-size: smaller;
    width: 250px;
    background: #1d1d1d;
    border: 1px solid #333 !important;
}

#index_uutisboksi{
    float:none;
}
#clear_input span {
    line-height: 44px;
}
a {
    color: #9BAED2 !important;
}
a:hover {
    text-decoration: underline !important;
}
img[alt="Ääntäminen"]{
  width: 17px;
  height: 17px;
  padding-left: 17px;
  display: block !important;
  box-sizing: border-box !important;
  background: url('data:image/svg+xml;utf8,<svg focusable="false" style="fill:white;stroke:white;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z"></path></svg>') no-repeat center/100%;
}
#swap_languages img{
  display: block !important;
  box-sizing: border-box !important;
  background: url('data:image/svg+xml;utf8,<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z"></path></svg>') no-repeat center/60%, radial-gradient(ellipse at center,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 1) 45%,
      rgba(255, 255, 255, 0) 60%,
      rgba(255, 255, 255, 0) 100%
    ) !important;
  width: 24px;
  height: 24px;
  padding-left: 24px;
  border-radius: 50%;   
}
#swap_languages img:hover{
  background: url('data:image/svg+xml;utf8,<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z"></path></svg>') no-repeat center/60%, radial-gradient(ellipse at center,
      rgba(255, 255, 255, 1) 0%,
      rgb(175, 174, 174) 45%,
      rgba(255, 255, 255, 0) 60%,
      rgba(255, 255, 255, 0) 100%
    ) !important;
}
}