/* Reset */
*,*::before,*::after{box-sizing: border-box}
/* Basic */
html{scroll-behavior: smooth}
body{margin: 0; background: #e9ffff; color: #555555; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif; font-size: 17px; -webkit-font-smoothing: antialiased; line-height: 1.65; word-wrap: normal; padding-top: 55px}
/* Header */
.header-wrapper{position: fixed; inset: 0 0 auto 0; min-height: 55px; display: flex; align-items: center; background: #007a66; box-shadow: 0px 0px 3px 0px rgba(50, 50, 50, 0.6); z-index: 7}
.header-wrapper:after{content: ""; position: absolute; top: 100%; min-height: 100vh; background: rgba(0,0,0,.29); width: 100%; z-index: -1; opacity: 0; transition: opacity .3s ease-in-out,z-index 0s ease,top .3s ease-in-out; transform: translateY(calc(-100% - 72px))}
.header-wrapper .container{display: flex; align-items: center; width: 100%}
.header-search{display: flex; align-items: center; justify-content: center; margin-right: 14px}
.header-search .search-group{display: flex; align-items: center; background: #fff; border-radius: 7px; overflow: hidden; height: 38px; border: 1px solid #e6e6e6; transition: border .3s ease}
.header-search input[type="text"]{padding-left: 10px; margin-bottom: auto}
.header-search .search-group-wrapper{position: relative}
.header-search .search-group input{width: 100%; max-width: 220px; height: 38px; line-height: 38px; padding-left: 10px; padding-right: 10px; border: 0; outline: none; font-size: .95rem}
.header-search .search-group button{border: 0; color: #007a66; height: 100%; width: 42px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .25s ease}
.header-search .search-suggestions{position: absolute; top: calc(100% + 6px); left: 0; width: 100%; background: #fff; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.12); z-index: 22; display: none; max-height: 280px; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth}
.header-search .search-suggestions::-webkit-scrollbar{width: 6px}
.header-search .search-suggestions::-webkit-scrollbar-thumb{background: #007a66; border-radius: 3px}
.header-search .search-suggestions::-webkit-scrollbar-track{background: transparent}
.header-search .search-suggestions li{white-space: normal; word-break: break-word}
.header-search .search-suggestions.active{display: block}
.header-search .search-suggestions ul{list-style: none; margin: 0; padding: 6px 0}
.header-search .search-suggestions li{text-align: left; padding: 5px 10px; cursor: pointer; transition: background .15s ease}
.header-search .search-suggestions li:hover{background: #e9ffff}
@media (max-width: 767px){
    .search-group{max-width: 100%}
    .btn-menu-sidebar{margin-right: 16px}
}
.header-content{display: flex; align-items: center; margin-left: auto}
.header-menu{display:flex; align-items:center; gap:8px}
.header-menu>a{display: none; padding: 10px 16px; margin: 0 5px; align-items: center; border-radius: 4px; transition: color .3s ease, background-color .3s ease}
.header-menu>a:link,
.header-menu>a:visited{transition: color 0.1s ease; color: #ffffff; text-decoration: none}
.header-menu>a:hover{transition: color 0.3s ease}
.account-wrapper{align-items: center; display: flex; margin-left: 20px}
.account-wrapper .account-content-wrapper{display: none; position: relative; margin-right:1.25rem}
.account-wrapper .account-content-wrapper .header-account-btn{cursor: pointer; width: 36px; font-size: 18px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%}
.account-wrapper .account-content-wrapper .header-account-btn .flex-shrink{flex-shrink: 0; display: flex}
.header-account-detail{text-align: left; position: absolute; right: 0; top: calc(100% + 8px); box-shadow: 0 4px 15px rgba(0,0,0,.1); background: #fff; width: 340px; opacity: 0; transition: opacity .3s ease-out; z-index: -1; transform: scale(0); padding: 1.25rem}
.btn-logout{display: block; background: #fff; color: #c62828; text-decoration: none; margin-top: 18px}
.header-account-detail .header-account-wrapper{align-items: center; margin-bottom: 1rem; display: flex}
.header-account-detail .header-account-wrapper .image-wrapper{font-size: 18px; display: flex; width: 50px; height: 50px; align-items: center; justify-content: center; --bs-bg-opacity: 1; background-color: #007a66; color: #fff; border-radius: 50%; margin-right: 1rem}
.header-account-detail .header-account-wrapper .user-name{font-size: .975rem; line-height: 150%; margin-bottom:0}
.btn-menu-sidebar{font-size: 18px; cursor: pointer; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%}
.header-side-menu{position: absolute; top: 100%; right: 0; max-width: 380px; width: 100%; background: #fff; height: calc(100dvh - 55px); z-index: 12; transform: translateX(100%); transition: transform .4s ease-in-out; overflow-y: auto; margin-bottom: 10px; padding-top: 1.25rem; padding-bottom: 5rem}
.header-side-menu-account{display: block; position: relative; padding-bottom: 1.25rem; padding-left: 1rem}
.header-side-menu-account:after{content: ""; position: absolute; left: 16px; right: 16px; top: 100%; display: block; height: 1px; background: #e6e6e6}
.header-side-menu-account-wrapper{display: flex; align-items: center; margin-bottom: 1rem}
.header-side-menu-account-wrapper .image-wrapper{font-size: 18px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; --bs-bg-opacity: 1; background-color: #007a66; color: #fff; border-radius: 50%; margin-right: 1rem}
.header-side-menu-account-wrapper .user-name{font-size: .875rem; line-height: 150%; margin-bottom: 0}
.header-side-menu ul{list-style: none; margin: 0; padding: 0}
.header-side-menu ul li{padding: 0; margin-bottom: .375rem}
.header-side-menu ul li:hover{background-color: #e9ffff}
.header-side-menu ul li a{display: block; padding: 5px 16px; margin: 0; text-align: left; text-decoration: none}
.header-side-menu ul li a:last-child{margin-bottom: 0}
.header-side-menu ul li a:hover{text-decoration: none}
.header-side-menu ul li.active{background-color: #e9ffff; border-radius: 4px}
.header-side-menu ul li.mobile-only{display: block}
.header-wrapper button{color: unset; border: 0; background: #fff}
.header-side-menu-active{transform: translateX(0)}
.header-active:after{top: 100%; opacity: 1; z-index: 3; transform: translateY(0)}
.header-account-active{opacity: 1; transform: scale(1)}
.btn-menu-sidebar-active,
.btn-menu-account-active{background-color: #e9ffff!important}
.btn-menu{padding: 10px 16px; font-size: 1rem; line-height: 150%; margin-bottom: 12px; display: flex; align-items: center; border-radius: 4px; transition: color .3s ease, background-color .3s ease}
@media (max-width:1199px){
    .header-side-menu ul li a{padding: 4px 16px}
}
@media (max-width:767px){
    .header-side-menu{max-width: 100%; padding-bottom: 110px}
    .header-account-detail{display: none}
}
@media (min-width:576px){
    .header-wrapper .container{max-width: 540px}
    .header-side-menu{padding-right: 2.5rem; padding-left: 1rem; padding-top: 1.875rem}
}
@media (min-width:768px){
    .header-wrapper  .container{max-width: 720px}
    .account-wrapper .account-content-wrapper{display: flex}
    .header-side-menu-account{display: none}
    .header-side-menu{padding-bottom: 1.875rem}
    .header-side-menu ul li{margin-bottom: .375rem}
}
@media (min-width:992px){
    .header-wrapper .container{max-width: 960px}
    .header-menu>a{display: block}
    .account-wrapper .account-content-wrapper{margin-right: 1.875rem}
    .header-side-menu ul li.mobile-only{display: none}
}
@media (min-width:1200px){
    .header-wrapper .container{max-width: 1140px}
}
@media (min-width:1400px){
    .header-wrapper .container{max-width: 1320px}
}
/* Content */
.content{position: relative; width: 90%; max-width: 960px; margin: 0 auto}
.content p{margin: 0 0 16px}
.content h1,
.content h2{text-align: center; color: #0f5f8a}
.content h1{font-size: 1.6rem; margin-bottom: 16px}
.content h2{font-size: 1.3rem}
.content h3{font-size: 1.1rem}
.content h2 a:link,
.content h2 a:visited{transition: color 0.1s ease}
.content h2 a:hover{transition: color 0.3s ease}
 @media (max-width:767px){ 
    .content h1{font-size: 22px}
    .content h2{font-size: 20px}
    .content h3{font-size: 14px}
    .content img{width: 100%}
}
.content .form{display: flex; flex-direction: column; gap: 12px}
.content .form .btn{align-self: flex-start; width: auto; min-width: 160px}
.content .img-wrapper{text-align: center}
.content img{display: block; margin: 0 auto; box-shadow: 3px 3px 4px #999}
/* Контентні списки */
.content ul{margin: 12px 0; padding-left: 22px; list-style: disc}
.content ul li{margin-bottom: 6px; line-height: 1.6; color: #555}
/* Wrapper block */
.wrapper-block{position: relative; background: #fff; box-shadow: 0 1px 2px rgba(34,36,38,.15); padding: 2px 16px; margin: 24px 0}
.wrapper-block .title{position: relative; display: inline-block; background-color: #007a66; color: #fff; font-weight: 600; padding: 8px 18px 8px 24px; border-radius: 0 6px 6px 0; margin-left: -24px; margin-bottom: 12px; white-space: nowrap}
.wrapper-block .title::after{content: ""; position: absolute; left: 0; bottom: -8px; width: 0; height: 0; border-right: 8px solid #077362; border-bottom: 8px solid transparent}
.wrapper-block h1.title{font-size: 18px}
.wrapper-block h2.title{font-size: 1.1rem}
.wrapper-block ul{margin: 8px 0 0; padding-left: 20px; list-style-type: disc; list-style-position: outside}
.wrapper-block ul li{margin-top: 8px}
@media (max-width: 800px){
    .wrapper-block .title{display: block; margin-left: 0; border-radius: 6px; text-align: center; white-space: normal; padding: 10px}
    .wrapper-block .title::after{display: none}
}
/* Wrapper block Word */
.content,
.wrapper-block{overflow-wrap: break-word}
.wrapper-block.word .part-speech-title,
.wrapper-block.word .opposite-title{color: #1f6f9a; font-style: italic}
.wrapper-block.word .part-speech-body,
.wrapper-block.word .opposite-body{margin-left: 16px}
.wrapper-block.word .part-speech-body.word-forms{display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start}
.wrapper-block.word .word-forms .word_form_block{flex: 0 0 auto; min-width: 240px}
.word-forms .word_form_block + .word_form_block{border-left: 1px solid #e0e0e0; padding-left: 16px}
@media (max-width: 600px){
    .wrapper-block.word .part-speech-body.word-forms{flex-direction: column; gap: 10px}
    .wrapper-block.word .word-forms .word_form_block{min-width: 100%}
    .word-forms .word_form_block + .word_form_block{border-left: none; padding-left: 0}
}
.wrapper-block.word p{margin: 0}
/* word form block */
.wrapper-block.word .part-speech-body p{margin: 0}
.word_form_block i{color: #000}
@media only all and (max-width: 750px){
    .word_form_block{margin: 0 15px 5px 0}
}
/* Learn */
.personal-dict-toolbar{display: flex; align-items: center; justify-content: space-between; gap: 12px}
.personal-dict-toolbar .personal-dict-info{display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0}
.personal-dict-toolbar .personal-dict-info .personal_count_word{white-space: nowrap; max-width: 100%}
.personal-dict-toolbar .personal-dict-info .personal-limit{white-space: nowrap}
@media (max-width: 600px) {
    .personal-dict-toolbar{align-items: flex-start}
    .personal-dict-toolbar .personal-dict-info{flex-direction: column; align-items: flex-start}
}
/* Message */
#message{display: none; margin-bottom: 15px; padding: 8px 12px; background: #fff; border: 1px solid #d4d9de; color: #333}
#message span{display: block}
/* Topic Content */
.topic-content p{margin-bottom: 1rem}
.topic-content ul{list-style: disc outside; padding-left: 1.25rem;}
.topic-content ul li{padding: 0 0 5px 2px}
.topic-content ul li::marker{color: #007a66}
.topic-content ul li span{margin-right: 8px}
.topic-content ul li:not(:last-child){border-bottom: 1px solid lightblue}
.topic-content ul li:first-child{margin-top: 1rem}
.topic-content ul li:last-child{margin-bottom: 1rem}
.topic-content .responsive-container{width: 100%; padding: 0 12px}
.topic-content .topic-list{display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px}
.topic-content .topic-box{background: #fff; display: flex; flex-direction: column; border: 1px solid #d9d9d9; border-radius: 6px; box-shadow: 0 8px 14px -10px rgba(0, 0, 0, 0.2); transition: box-shadow 0.25s ease, border-color 0.25s ease}
.topic-content .topic-box:hover{box-shadow: 0 12px 20px -10px rgba(0, 0, 0, 0.45); border-color: #999}
.topic-content .topic-box img{width: 100%; aspect-ratio: 800 / 492; object-fit: cover; display: block; border-radius: 6px 6px 0 0; box-shadow: none}
.topic-content .topic-box h2{margin: 12px; font-size: 1.05rem; text-align: center; line-height: 1.3}
@media (max-width: 991px) {
    .topic-content .topic-list{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 479px) {
    .topic-content .topic-list{grid-template-columns: repeat(2, 1fr); gap: 16px}
    .topic-content .topic-box h2{font-size: 0.95rem}
}
/* Border */
.border{border: 1px solid rgba(34, 36, 38, 0.15); border-radius: .25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out}
/* Buttons */
.btn,
input[type="submit"]{background-color: #007a66; color: #ffffff; font-size: 0.95rem; margin: 4px 0; padding: 8px 16px; border-radius: 6px; border: 1px solid #007a66; cursor: pointer}
input[type="submit"]:hover{filter: brightness(0.95)}
input[type="submit"]:focus-visible{outline: none; box-shadow: 0 0 0 2px rgba(0,160,135,.3)}
input[type="submit"].deleteButton{background-color: #ff0000; border-color: #ff0000}
input[type="text"],
input[type="password"]{width: 100%; padding: 6px; margin-bottom: .8em; border: 1px solid #C3CBD4; font-family: inherit}
a.btn{color: #fafdfc; text-decoration: none}
.btn:hover,
.btn:focus{text-decoration: none}
textarea{width: 100%; padding: 6px; margin-bottom: .8em; border: 1px solid #C3CBD4; font-family: inherit; min-height: 100px; resize: vertical}
input[type="text"]:focus-visible,
input[type="password"]:focus-visible,
textarea:focus-visible,
select:focus-visible{outline: none; border-color: #007a66; box-shadow: 0 0 0 2px rgba(0,160,135,.2)}
::placeholder{color: #6c757d; opacity: .7}
select{border: 1px solid #C3CBD4; padding: 6px 32px 6px 6px; appearance: none; background-color: #fff; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 292 292'><path fill='%23007CB2' d='M287 69H18c-10 0-15 12-7 20l128 128c4 4 10 4 14 0L294 89c8-8 2-20-7-20z'/></svg>"); background-repeat: no-repeat; background-position: right .7em center; background-size: .65em auto}
/* PageNavi */
.pagenavi{padding: 0 20px 10px; text-align: center}
.pagenavi a,
.pagenavi span{display: inline-block; padding: 4px 10px; margin: 3px 3px 0 0; background: #fff; border: 1px solid #d4d9de; text-decoration: none; color: inherit}
.pagenavi a:hover,
.pagenavi a:focus-visible{background-color: #e9ffff; outline: none}
.pagenavi span.current{background-color: #f0f0f0; font-weight: 600; cursor: default}
/* Letter */
.letter{width: 100%; margin-top: 10px; text-align: center}
.letter a{display: inline-block; margin: 4px; padding: 6px 10px; color: #0f5f8a; text-decoration: none; border-radius: 4px}
.letter a:hover,
.letter a:focus-visible{background-color: #e9ffff; outline: none}
/* Users list */
.users{display: flex; flex-wrap: wrap; gap: 10px}
.users a{display: inline-flex; align-items: center; padding: 6px 12px; color: #337ab7; border: 1px solid #e2e2e2; text-decoration: none; border-radius: 4px}
.users a:hover,
.users a:focus-visible{background-color: #eee; color: #286090; outline: none}
/*  Table */
table{width: 100%}
table.infotable{width: 100%; border-collapse: collapse; margin-bottom: 10px; color: #4d4f53}
table.infotable td{padding: 6px 8px; border: 1px solid #C4C9CD; vertical-align: top}
table.infotable a{color: #0f5f8a; text-decoration: none}
table.infotable a:hover{color: #679CCB}
table.infotable .english a{color: #0f5f8a}
table.infotable .fa{cursor: pointer}
@media (max-width: 600px){
    table.translate,
    table.translate thead,
    table.translate tbody,
    table.translate tr,
    table.translate td{display: block; width: 100%}
    table.translate thead{display: none}
    table.translate tr{background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 12px; margin-bottom: 12px}
    table.translate td{display: flex; justify-content: space-between; align-items: flex-start; padding: 6px 0; border: none}
    table.translate td::before{content: attr(data-label); font-weight: 600; color: #555; margin-right: 12px; white-space: nowrap}
    table.translate td:last-child{justify-content: flex-end}
}
/* Img Thumb */
.upload-img-wrapper{position: relative; display: inline-block}
.upload-img-wrapper .img-thumb{position: relative; margin: 4px 4px 5px 0}
.upload-img-wrapper .img-thumb img{width: 100px; height: auto; vertical-align: top; border: 2px solid #8A8D92; margin: 0 1px}
.upload-img-wrapper .img-thumb .cancel-wrap{position: absolute; top: 2px; right: 3px; background-color: #f6f6f6; font-size: 12px; line-height: 0.8; padding: 4px; cursor: pointer}
.upload-img-wrapper.gallery .img-thumb img{width: 300px; height: auto}
.upload-img-wrapper input[type="file"]{position: absolute; left: 0; top: 0; font-size: 100px; opacity: 0; cursor: pointer}
/* Mistake */
#button-mistake{display: flex; justify-content: space-between; align-items: center}
#button-mistake button{padding: 5px; border: none; background: none; color: #b42121; cursor: pointer}
#button-mistake i{cursor: pointer}
#hide-close-form-mistake{display: none}
#form-send-mistake{display: none; margin-top: 5px}
#message-mistake{display: block}
/* Hint */
#hint{position: absolute; z-index: 1000; display: none; min-width: 280px; max-height: 200px; overflow: auto; margin-top: -1.3rem; padding: 5px 0; background: #fff; border: 1px solid #d8e4e7}
#hint a{display: block; cursor: pointer}
#hint ul{margin: 0; padding: 0}
#hint ul li{list-style: none}
/* Notice */
.notice{border-radius: 4px; overflow: hidden; margin: 13px 0; padding: 10px; border-left-width: 5px; border-left-style: solid; border-color: #f6b73c; background: #fff3d4; color: #000}
.notice.nospace{white-space: normal}
.notice p:first-child{margin-top: 0}
.notice p:last-child{margin-bottom: 0}
.notice a{outline: none; overflow: auto; font-weight: bold}
.notice i{color: #000}
.notice i.fa{text-indent: 0}
/* Link */
a{color: #0f5f8a; text-decoration: underline}
a:hover,
a:focus{text-decoration-thickness: 1px}
/* Sortable */
.ui-sortable-helper{display: table; background: #f0f0f0}
/* FAQ */
.faq-item{margin-bottom: 10px}
.faq-question{list-style: none; cursor: pointer; padding-left: 22px; position: relative; color: inherit; font-weight: normal}
.faq-question::-webkit-details-marker{display: none}
.faq-question::before{content: "+"; position: absolute; left: 0; top: 0.15em; font-size: 18px; line-height: 1; color: #007a66; transition: transform .2s ease}
.faq-item[open] .faq-question::before{content: "–"}
.faq-answer{margin-left: 22px; margin-top: 6px; color: #555; line-height: 1.6}
.faq-answer{margin-top: 10px; padding-left: 1.5em; line-height: 1.6}
/* upload sound wrapper */
.upload-sound-wrapper .audio-upload{display: inline-block}
.upload-sound-wrapper .upload-sound-btn{width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35); cursor: pointer; transition: all 0.2s ease}
.upload-sound-wrapper .upload-sound-btn:hover{transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45)}
.upload-sound-wrapper .upload-sound-btn:active{transform: translateY(0); box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3)}
.upload-sound-wrapper .upload-sound-btn input[type="file"]{position: absolute; opacity: 0; pointer-events: none}
.upload-sound-wrapper .upload-icon{font-size: 18px; color: #fff; line-height: 1}
.upload-sound-wrapper audio{vertical-align: middle}
/* Alertable */
.alertable{position: fixed; z-index: 9999; top: 38vh; left: calc(50% - 150px); width: 300px; background: white; border-radius: 4px; padding: 20px; margin: 0 auto}
.alertable-overlay{position: fixed; z-index: 9998; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .5)}
.alertable-message{margin-bottom: 20px}
.alertable-prompt{margin-bottom: 20px}
.alertable-input{width: 100%; border-radius: 4px; box-shadow: none; border: solid 1px #ccc; font-family: inherit; font-size: inherit; color: inherit; padding: 6px 12px; display: block; margin-bottom: 10px}
.alertable-buttons{text-align: right}
.alertable-ok{background: #007a66; border: solid 1px #007a66; font-family: inherit; font-size: inherit; color: white; border-radius: 4px; padding: 6px 12px; margin-left: 4px; cursor: pointer}
.alertable-ok:hover,
.alertable-ok:focus,
.alertable-ok:active{background-color: #007a66}
.alertable-cancel{border: solid 1px #ddd; background: white; font-family: inherit; font-size: inherit; color: #888; border-radius: 4px; padding: 6px 12px; margin-left: 4px; cursor: pointer}
.alertable-cancel:hover,
.alertable-cancel:focus,
.alertable-cancel:active{background-color: #f2f2f2}
.fa{display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background-color: currentColor; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-size: contain; mask-repeat: no-repeat; mask-position: center}
.fa-edit{mask-image: url('/templates/icons/edit.svg')}
.fa-folder-open{mask-image: url('/templates/icons/folder-open.svg')}
.fa-list{mask-image: url('/templates/icons/list.svg')}
.fa-bullhorn{mask-image: url('/templates/icons/bullhorn.svg'); color: #0f5f8a; cursor: pointer}
.fa-trash{mask-image: url('/templates/icons/trash.svg')}
.fa-eye{mask-image: url('/templates/icons/eye.svg')}
.fa-eye-slash {mask-image: url('/templates/icons/eye-slash.svg')}
.fa-sort{mask-image: url('/templates/icons/sort.svg')}
.fa-heart-o{mask-image: url('/templates/icons/heart.svg')}
.fa-check{mask-image: url('/templates/icons/check.svg')}
.fa-close{mask-image: url('/templates/icons/x.svg')}
.fa-file-text-o{mask-image: url('/templates/icons/file-text.svg')}
.fa-file-word-o{mask-image: url('/templates/icons/file-word.svg')}
.fa-calendar{mask-image: url('/templates/icons/calendar.svg')}
.fa-thumbs-o-up{mask-image: url('/templates/icons/thumbs-up.svg')}
.fa-search{mask-image: url('/templates/icons/search.svg')}
.fa-user{mask-image: url('/templates/icons/user.svg')}
.fa-bars{mask-image: url('/templates/icons/menu.svg')}
.fa-tags{mask-image: url('/templates/icons/tags.svg')}
.fa-search-plus{mask-image: url('/templates/icons/search-plus.svg')}

.sound-wrapper{position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px}
.play-sound{width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #0f5f8a; background-color: currentColor; mask-image: url('/templates/icons/bullhorn.svg'); mask-repeat: no-repeat; mask-position: center; z-index: 2}
.sound-wave{position: absolute; width: 24px; height: 24px; opacity: 0; pointer-events: none}
.sound-wave rect{fill: #0f5f8a; transform-origin: center bottom; transform: scaleY(0.4)}
.sound-wrapper.is-playing .sound-wave{opacity: 1}
.sound-wrapper.is-playing .play-sound{background-color: rgba(15, 95, 138, 0.15)}
.sound-wrapper.is-playing .sound-wave rect:nth-child(1){animation: wave 0.8s infinite ease-in-out}
.sound-wrapper.is-playing .sound-wave rect:nth-child(2){animation: wave 0.8s infinite ease-in-out .15s}
.sound-wrapper.is-playing .sound-wave rect:nth-child(3){animation: wave 0.8s infinite ease-in-out .3s}
.sound-wrapper.is-loading .sound-wave{opacity: 0.3}
.play-sound.disabled{pointer-events: none; opacity: 0.5; cursor: not-allowed}
@keyframes wave{
    0%, 100%{transform: scaleY(0.4)}
    50%{transform: scaleY(1)}
}

/* Contact */
.contact{margin: 20px 0}
/* Admin Sidebar */
.admin-sidebar{height: 100%; width: auto; position: fixed; top: 0; left: 0; background-color: #111; padding-top: 60px}
.admin-sidebar a{padding: 8px 8px 8px 8px; text-decoration: none; color: #818181; display: block}
.admin-sidebar i{font-size: 26px; text-align: right}
.admin-sidebar a:hover{color: #f1f1f1}
.admin-sidebar ul{margin-top: 20px}
.admin-sidebar ul li a.red{color: red}
@media screen and (max-height: 450px){
  .admin-sidebar{padding-top: 15px}
}
/* Input password eye */
.input-password-eye .field-icon{position: absolute; margin-left: -28px; margin-top: 4px; z-index: 2; font-size: 18px; color: #007a66}
.input-password-eye .icon-eye::before,
.input-password-eye .icon-eye-blocked::before{content: ""; display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain}
.input-password-eye .icon-eye::before{-webkit-mask-image: url("/templates/icons/eye.svg"); mask-image: url("/templates/icons/eye.svg")}
.input-password-eye .icon-eye-blocked::before{-webkit-mask-image: url("/templates/icons/eye-slash.svg"); mask-image: url("/templates/icons/eye-slash.svg")}
/* Action Form */
.action_form{color: #717b85; text-align: center}
.action_form input[type="text"],
.action_form input[type="password"]{text-indent: 2px; width: 50%; padding: 5px 3px 5px 7px; background-color: #fff !important}
.action_form input[type="text"]{margin-bottom: 8px}
.action_form input[type="submit"]{width: 50%; padding: 6px}
.action_form .remind_link{text-align: center}
.action_form .action_link{text-align: center; color: #0f5f8a; cursor: pointer}
.action_form .notice{margin-top: 0}
.action_form .registration{display: none}
@media (max-width:767px){ 
    .action_form input[type="text"],
    .action_form input[type="password"]{width: 100%}
    .action_form input[type="submit"]{width: 100%}
}
/* Example Wrapper */
#example-wrapper{margin: 0; padding: 0}
#example-wrapper p{margin: 0 0 0 20px; padding: 0}
#example-wrapper .eng{margin-bottom: 0}
#example-wrapper .ukr{font-style: italic; margin-bottom: 7px; font-size: 1rem}
#example-wrapper .more{margin-left: 20px; padding: 0; background: none; border: none; border-bottom: 1px dotted #6b4a2f; font: inherit; color: #6b4a2f; cursor: pointer}
#example-wrapper .more:hover,
#example-wrapper .more:focus-visible{color: #4a321f; border-bottom-color: #4a321f; outline: none}
#example-wrapper .examples-hidden{display: none; content-visibility: auto; contain-intrinsic-size: 600px}
/* Btn Icon */
.btn-icon{display: inline-flex; align-items: center; justify-content: center; height: 1.8em; width: 1.8em; padding: 0; border-radius: 0.4em; border: 1px solid #ddd; background-color: #fff; color: #444; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease}
.btn-icon:hover{background-color: #f5f5f5; border-color: #ccc}
.btn-icon:active{transform: scale(0.96)}
.btn-icon:focus-visible{outline: none; border-color: #2684ff}
.btn-icon .icon{width: 1.1em; height: 1.1em; background-color: currentColor; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain}
.btn-add .icon{-webkit-mask-image: url("/templates/icons/add-plus.svg"); mask-image: url("/templates/icons/add-plus.svg")}
.btn-add{color: #2e7d32}
.btn-add:hover{background-color: #e8f5e9}
.btn-delete .icon{-webkit-mask-image: url("/templates/icons/x.svg"); mask-image: url("/templates/icons/x.svg")}
.btn-delete{color: #c62828}
.btn-delete:hover{background-color: #fdecea}
/* Footer */
.site-footer{background: #007a66; color: #ffffff; text-align: center; padding: 25px 10px; box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1); margin-top: 40px; min-height: 51px}
.site-footer p{margin: 0; letter-spacing: 0.5px}
.site-footer a{color: #ffffff}
@media (max-width: 767px) {
    .site-footer{padding: 20px 5px}
}
/* Other */
.fa{line-height: 1}
.deleteIconHide{display: none}
.clear {clear:both}
.center{text-align: center}
.transcription{margin: 0 3px; color: #0f5f8a; white-space: nowrap}
#myLinks{display: none}
.row_word_table{display: flex; flex-wrap: wrap}
.row_word_table div{width: 50%}
.row_word_table.full div{width: 100%}
@media screen and (max-width: 600px){
    .row_word_table div{width: 100%}
}
.form_word p{color: #818181}
.form_irregular_word{color: #4a4a4a; white-space: pre-wrap}