/*
    Version: 1.0
    Theme Name: Zafyr
    Text Domain: zafyr.ru
    License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

* {
    margin: 0;
    border: 0;
    padding: 0;
    outline: none;
    list-style: none;
    line-height: 125%;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    letter-spacing: .06em;
    text-decoration: none;
    background-size: cover;
    box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    font-family: "Nunito", sans-serif;
}

*:before,
*:after {
    box-sizing: border-box;
    font-family: "Nunito", sans-serif;
}

img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

body {
    color: #333;
    display: flex;
    padding: 0 24px;
    font-size: 16px;
    min-height: 100vh;
    /* color: #1A1E17; */
    padding-bottom: 24px;
    flex-direction: column;
}

nav,
main,
#system_pages .container {
    width: 100%;
    margin: 0 auto;
    max-width: 620px;
}

main {
    flex: 1%;
    gap: 24px;
    display: flex;
    flex-direction: column;
}


/* Шапка */
nav,
#system_pages .head {
    display: flex;
    padding: 24px 0;
    align-items: center;
    justify-content: center;
}

nav h1,
#system_pages .head p {
    font-size: 48px;
    color: #2E7D32;
    font-weight: 800;
    letter-spacing: -.06em;
}

nav.single,
#system_pages .head {
    justify-content: space-between;
}

nav.single > a,
nav.single > i,
#system_pages .head > s {
    width: 50px;
    height: 50px;
    display: flex;
    color: #666;
    cursor: pointer;
    min-width: 50px;
    background: #fff;
    align-items: center;
    border-radius: 12px;
    justify-content: center;
    box-shadow: 0 0 6px 0 rgb(51 51 51 / 12%);
}


/* Стилизация блока лайв */
#live,
#sadaka,
#action {
    gap: 18px;
    display: flex;
    padding: 18px;
    border-radius: 8px;
    align-items: center;
    background: #D65232;
    box-shadow: 0 0 6px 0 rgb(51 51 51 / 18%);
}

#live i.icon,
#action i.icon {
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: #EE5C3E;
    background-size: 24px;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 6px 0 rgb(51 51 51 / 12%);
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNGRUZBRjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBkPSJNMTIgMTMuNWExLjUgMS41IDAgMSAwIDAtM2ExLjUgMS41IDAgMCAwIDAgM20tMy40NDkgMi4yMDVhNS4yIDUuMiAwIDAgMS0xLjE0OC0xLjdhNS4xOSA1LjE5IDAgMCAxIDEuMTQ4LTUuNzFNMTguMDcgNS41YTkuMTUgOS4xNSAwIDAgMSAyLjcxOSA2LjVhOS4xNSA5LjE1IDAgMCAxLTIuNzIgNi41TTE1LjI0IDguMjk1YTUuMiA1LjIgMCAwIDEgMS4xNDggMS43YTUuMTkgNS4xOSAwIDAgMS0xLjE0OCA1LjcxTTUuNTEyIDE4LjVBOS4xNSA5LjE1IDAgMCAxIDIuNzkzIDEyYzAtMi40MzguOTc4LTQuNzc2IDIuNzItNi41Ii8+PC9zdmc+");
}

#sadaka,
#action {
    background-color: #58975b;
}

#action i.icon {
    background-color: #2e7d32;
}

#live h5,
#sadaka h5,
#action h5 {
    gap: 3px;
    color: #fff;
    display: flex;
    font-size: 17px;
    font-weight: 800;
    line-height: 100%;
    flex-direction: column;
}

#live h5 span,
#action h5 span {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
}

#action h5 {
    gap: 6px;
    font-size: 16px;
}

#action h5 span {
    font-size: 11px;
}

#live > a,
#sadaka > a,
#live > button,
#action > button {
    opacity: .3;
    height: 40px;
    color: #333;
    display: flex;
    padding: 0 18px;
    font-size: 12px;
    cursor: pointer;
    min-height: 40px;
    font-weight: 700;
    margin-left: auto;
    background: #fff;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 6px 0 rgb(51 51 51 / 12%);
}

#live.success > button,
#live.success > a,
#action > button,
#sadaka > a {
    opacity: 1;
}

#sadaka {
    padding: 24px;
    transition: .2s;
    flex-direction: column;
}

#sadaka h5 {
    gap: 12px;
    font-weight: 700;
}

#sadaka h5 span {
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    text-transform: none;
}

#sadaka a {
    width: 100%;
}


/* Стилизация предыдущих проповедей */
#records {
    gap: 12px;
    display: flex;
    flex-direction: column;
}

#records h2 {
    color: #333;
    font-size: 23px;
    font-weight: 400;
    font-weight: 700;
    margin-bottom: 6px;
}

#records .item,
#system_pages .links a {
    gap: 6px;
    color: #333;
    padding: 18px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    background: #F9F9F9;
    box-shadow: 0 0 3px 0 rgb(51 51 51 / 9%);
}

#records .item i.icon,
#system_pages .links a i.icon {
    height: 40px;
    display: block;
    min-width: 40px;
    border-radius: 50%;
    background-size: 24px;
    background-color: #2E7D32;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 3px 0 rgb(51 51 51 / 6%);
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNGRUZBRjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBkPSJNMTQuNTgxIDkuNDAyQzE2LjE5NCAxMC43MTggMTcgMTEuMzc1IDE3IDEyLjVzLS44MDYgMS43ODMtMi40MTkgMy4wOThhMjMgMjMgMCAwIDEtMS4yOTIuOTljLS4zNTYuMjUtLjc1OS41MDgtMS4xNzYuNzYyYy0xLjYwOS45NzgtMi40MTMgMS40NjctMy4xMzQuOTI2Yy0uNzIyLS41NDItLjc4Ny0xLjY3NS0uOTE4LTMuOTQzQTMzIDMzIDAgMCAxIDggMTIuNWMwLS41NjMuMDIzLTEuMTkyLjA2LTEuODMzYy4xMzItMi4yNjcuMTk3LTMuNDAxLjkxOS0zLjk0M2MuNzIxLS41NDEgMS41MjUtLjA1MiAzLjEzNC45MjZjLjQxNy4yNTQuODIuNTEyIDEuMTc2Ljc2MmEyMyAyMyAwIDAgMSAxLjI5Mi45OSIvPjwvc3ZnPg==");
}

#records .item.info i.icon {
    background-color: #fff;
    box-shadow: 0 0 6px 0 rgb(51 51 51 / 12%);
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMyRTU2M0EiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBkPSJNMTIuMTQ3IDN2OWw2IDMiLz48L3N2Zz4=");
}

#records .item > i:last-child,
#system_pages .links a > i:last-child {
    display: flex;
}

#records .item p,
#system_pages .links span {
    gap: 6px;
    flex: 100%;
    display: flex;
    font-size: 15px;
    overflow: hidden;
    font-weight: 700;
    line-height: 100%;
    margin-left: 12px;
    white-space: nowrap;
    flex-direction: column;
}

#records .item p span {
    gap: 12px;
    opacity: .9;
    color: #666;
    display: flex;
    font-size: 12px;
    font-weight: 700;
    justify-content: space-between;
}

#system_pages {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: 9;
    padding: 0 24px;
    position: fixed;
    transition: .35s;
    visibility: hidden;
    backdrop-filter: blur(6px);
    background: rgb(255 255 255 / 66%);
}

#system_pages.visible {
    opacity: 1;
    visibility: visible;
}

#system_pages .links {
    gap: 18px;
    display: flex;
    margin-top: 24px;
    flex-direction: column;
}

#system_pages .head p {
    color: #444;
}

#system_pages .head > s {
    color: #fff;
    background: #D65232;
}

#system_pages .links a {
    box-shadow: 0 0 4px 0 rgb(51 51 51 / 12%);
}


/* Страница проповеди */
main > h2 {
    color: #444;
    margin: 0 -24px;
    padding: 18px 0;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    border-radius: 3px;
    box-shadow: 0 0 6px 0 rgb(51 51 51 / 12%);
}

main > h2 i {
    color: #D65232;
}

#action {
    padding: 24px;
    transition: .2s;
}

#content {
    flex: 1%;
    gap: 24px;
    color: #333;
    margin: -12px;
    padding: 24px;
    display: flex;
    margin-top: 0;
    font-size: 15px;
    overflow: hidden;
    position: relative;
    margin-bottom: -24px;
    flex-direction: column;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(51 51 51 / 12%);
}

#content .live_hide {
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    font-weight: 700;
    position: absolute;
    transition: height 1s ease;
}

#content .live_hide:before,
#content .live_hide:after {
    content: '';
    left: 0;
    right: 0;
    top: 24px;
    bottom: 0;
    z-index: 2;
    height: 100%;
    position: absolute;
    backdrop-filter: blur(6px);
    background: rgb( 255 255 255 / 85%);
}

#content .live_hide:after {
    top: 0;
    bottom: auto;
    height: 26px;
    backdrop-filter: none;
    background: linear-gradient(to bottom, transparent, rgb(255 255 255 / 85%));
}

#content .live_hide span {
    top: 24px;
    left: 48px;
    z-index: 2;
    right: 48px;
    color: #444;
    transition: 1s;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    padding: 18px 24px;
    position: absolute;
    background: #F9F9F9;
    letter-spacing: .08em;
}

#content .live_hide span:before,
#content .live_hide span:after {
    content: '';
    top: 0;
    bottom: 0;
    left: -48px;
    width: 48px;
    position: absolute;
    background: linear-gradient(to right, transparent, #F9F9F9);
}

#content .live_hide span:after {
    left: auto;
    right: -48px;
    transform: rotate(-180deg);
}

#content p {
    font-size: .95rem;
    line-height: 150%;
}

#content blockquote, #content q {
    gap: 18px;
    padding: 24px;
    display: flex;
    margin: 0 -12px;
    border-radius: 6px;
    flex-direction: column;
    background-color: #E8F5E9;
    border-left: 4px solid #2E7D32;
    box-shadow: 0 0 4px 0 rgb(51 51 51 / 9%);
}

#content blockquote i, #content q i {
    color: #666;
    font-weight: 700;
    font-size: .75rem;
    text-align: center;
    letter-spacing: .09em;
}

#content blockquote span, #content q span {
    color: #333;
    font-size: .9rem;
    font-weight: 400;
    line-height: 150%;
    text-align: justify;
    letter-spacing: .09em;
}

#content q {
    background-color: #FFF8E1;
    border-left-color: #F4B400;
}

#content q::before, #content q::after {
    display: none;
}

#content blockquote b, #content q b {
    font-weight: 500;
    color: #1B5E20;
    font-size: 1.2rem;
    text-align: right;
    font-style: italic;
    line-height: 1.8em;
}

#content q b {
    color: #A67C00;
}

#content p.info {
    color: #444;
    font-weight: 500;
    line-height: 1.6em;
    letter-spacing: .06em;
}

#content p.info + button {
    color: #444;
    padding: 18px;
    font-size: .8rem;
    transition: .35s;
    margin-top: auto;
    font-weight: 700;
    border-radius: 8px;
    background: #E8F5E9;
    letter-spacing: .08em;
    box-shadow: 0 0 4px 0 rgb(51 51 51 / 9%);
}

#content p.info + button.active {
    color: #666;
    background: #F9F9F9;
}


/* Страница авторизации */
form {
    gap: 24px;
    display: flex;
    margin-top: 24px;
    flex-direction: column;
}

.field {
    gap: 6px;
    display: flex;
    flex-direction: column;
}

.field > label {
    opacity: .66;
    font-size: 13px;
    font-weight: 300;
    padding-left: 12px;
    text-transform: lowercase;
}

.field textarea,
.field textarea + .handler,

.field .file > label,
.field input[type="url"],
.field input[type="text"],
.field input[type="password"],
.field input[type="datetime-local"] {
    width: 100%;
    height: 50px;
    font-size: .9em;
    min-height: 50px;
    overflow: hidden;
    line-height: 24px;
    padding: 13px 24px;
    border-radius: 6px;
    background: rgb( 255 255 255 / 66%);
    box-shadow: 0 0 6px 0 rgb(51 51 51 / 12%);
}

.field textarea + .handler {
    left: -200vw;
    z-index: -99;
    height: auto;
    position: absolute;
}

.field .arabic {
    text-align: right;
    font-size: 18px;
}

form p.error {
    display: none;
    font-size: 18px;
    font-weight: 800;
    color: #D65232;
}

form button {
    color: #fff;
    display: flex;
    margin-top: 24px;
    font-weight: 700;
    line-height: 50px;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    background-color: #58975b;
}

.field .file {
    display: flex;
    overflow: hidden;
    position: relative;
    border-radius: 6px;
    box-shadow: 0 0 6px 0 rgb(51 51 51 / 12%);
}

.field .file > input {
    display: none;
}

.field .file > label {
    cursor: pointer;
    box-shadow: none;
    border-radius: 0;
}

.field .audio_preview {
    top: 0;
    left: 0;
    bottom: 0;
    opacity: 0;
    width: 100%;
    display: flex;
    font-size: .9em;
    transition: .25s;
    min-height: 50px;
    line-height: 24px;
    position: absolute;
    visibility: hidden;
    background: #fff;
}

.field .audio_preview.visible {
    opacity: 1;
    visibility: visible;
}

.field .audio_preview audio {
    flex: 1;
    height: 50px;
    background: #f1f3f4;
}

.field .audio_preview i.close,
.field .file i.preview_open {
    width: 50px;
    display: flex;
    cursor: pointer;
    min-width: 50px;
    color: #D65232;
    background: #fff;
    align-items: center;
    justify-content: center;
}

.field .file i.preview_open {
    color: #2E7D32;
}

.field .file i.preview_open svg {
    width: 30px;
    height: auto;
}



/*  */
form #content {
    gap: 36px;
    padding: 0;
    box-shadow: none;
    background: none;
    overflow: visible;
    position: relative;
    margin-bottom: 100px;
}

form #content_btns {
    top: 0;
    left: 0;
    right: 0;
    gap: 12px;
    z-index: 2;
    padding: 24px;
    display: flex;
    margin: 0 -24px;
    position: sticky;
    border-radius: 6px;
    backdrop-filter: blur(12px);
    box-shadow: 0 0 3px 0 rgb(51 51 51 / 12%);
}

form #content_btns p {
    width: 100%;
    display: flex;
    height: 36px;
    font-size: 12px;
    color: #1A1E17;
    font-weight: 700;
    border-radius: 6px;
    background: #fff;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 6px 0 rgb(51 51 51 / 9%);
}

form #content .block {
    gap: 24px;
    display: flex;
    padding: 24px;
    padding-top: 36px;
    border-radius: 6px;
    position: relative;
    background: #f9f9f9;
    flex-direction: column;
    border: 1px solid rgb(51 51 51 / 6%);
    box-shadow: 0 0 3px 0 rgb(51 51 51 / 6%);
}

form #content .block .actions {
    gap: 12px;
    left: 50%;
    top: -24px;
    display: flex;
    padding: 9px 12px;
    position: absolute;
    border-radius: 6px;
    background: #f9f9f9;
    backdrop-filter: blur(6px);
    transform: translateX(-50%);
    box-shadow: 0 0 6px 0 rgb(51 51 51 / 12%);
}

form #content .block .actions > * {
    width: 30px;
    height: 30px;
    display: flex;
    min-width: 30px;
    color: #244430;
    background: #fff;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 3px 0 rgb(51 51 51 / 6%);
}

form #content .block .actions svg {
    width: auto;
    height: 18px;
}

form #content .block .actions .delete {
    color: #D65232;
}

form #content .block:first-child .actions .to_up {
    opacity: .33;
    cursor: no-drop;
}

form #content .block:last-child .actions .to_down {
    opacity: .33;
    cursor: no-drop;
}

form .submit {
    left: 50%;
    right: 0;
    bottom: 0;
    z-index: 9;
    width: 100vw;
    height: 100px;
    display: flex;
    padding: 0 24px;
    position: fixed;
    max-width: 644px;
    align-items: center;
    backdrop-filter: blur(6px);
    transform: translateX(-50%);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

form .submit button {
    margin: 0;
    width: 100%;
}



/* Загрузка */
#loading {
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    z-index: 999;
    height: 100vh;
    display: flex;
    position: fixed;
    visibility: hidden;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(60px);
    transition: opacity .2s, visibility .2s;
}

#loading.visible {
    opacity: 1;
    visibility: visible;
}

#loading .icon {
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 120px;
    height: 120px;
    display: flex;
    color: #244430;
    max-width: 120px;
    border-radius: 9px;
    position: absolute;
    background: #fff;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 6px 0 rgb(51 51 51 / 12%);
}

#loading svg {
    width: 60px;
    height: 60px;
    min-width: 60px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}





#player {
    left: 50%;
    bottom: 0;
    opacity: 0;
    z-index: 9;
    width: 100vw;
    display: flex;
    position: fixed;
    max-width: 644px;
    padding: 18px 24px;
    visibility: hidden;
    align-items: center;
    background: #F9F9F9;
    transform: translateX(-50%);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    justify-content: space-between;
    box-shadow: 0 0 6px 0 rgb(51 51 51 / 12%);
}

#player.visible {
    opacity: 1;
    visibility: visible;
}

#player h6 {
    gap: 3px;
    color: #333;
    display: flex;
    font-size: 16px;
    font-weight: 700;
    flex-direction: column;
}

#player h6 span {
    color: #666;
    font-size: 13px;
    font-weight: 600;
}

#player .buttons {
    position: relative;
}

#player .buttons > div {
    width: 40px;
    height: 40px;
    display: flex;
    color: #fff;
    transition: .2s;
    min-width: 40px;
    border-radius: 9px;
    align-items: center;
    background: #1B5E20;
    justify-content: center;
    box-shadow: 0 0 6px 0 rgb(51 51 51 / 12%);
}

#player .buttons > div svg {
    width: 25px;
    height: auto;
}

#player .buttons > .play,
#player .buttons > .stop {
    cursor: pointer;
}

#player .buttons > .stop,
#player .buttons > .wait {
    top: 0;
    opacity: 0;
    color: #D65232;
    visibility: hidden;
    position: absolute;
    background: #fff;
}

#player.load .wait,
#player.played .stop {
    opacity: 1;
    visibility: visible;
}

#player .buttons > .wait {
    color: #1A1E17;
}

#player .buttons > .wait svg {
    animation: spin 2s linear infinite;
}

#player.played .buttons .play {
    opacity: 0;
}