:root { --primary-color: #47853b; --secondary-color: #396a2f; }
body { background-color: #fff; overflow-x: hidden; overflow-y: scroll; width: 100vw; height: 100vh; max-width: 100%; max-height: 100%; color: #444 }
html, input, textarea, select, button, pre { font-family: IRANSansX; font-size: 14px; direction: rtl; }
svg { vertical-align: middle }
img { height: auto; vertical-align: middle }
a[href] { text-decoration: none; color: #369 }
hr { border: 1px solid #333; margin: 20px 0 }

button, a.button { font-weight: bold; box-sizing: border-box; background: var(--primary-color); border: none; color: #fff; height: 44px; padding: 14px 22px; display: flex; justify-content: center; align-items: center; line-height: 1; gap: 8px; border-radius: 5px; cursor: pointer }

button[disabled], a.button.disabled { filter: grayscale(1); pointer-events: none; }

input:not([type="checkbox"]).rtl { direction: rtl }

input:not([type="checkbox"]).rtl::placeholder, input:not([type="checkbox"]).rtl::placeholder { text-align: left }

input[type="checkbox"] { width: 20px }

input:not([type="checkbox"]), textarea { unicode-bidi: plaintext; box-sizing: border-box; border-radius: 10px; background-color: rgba(42, 40, 49,.03); border: 1px solid rgba(200,200,200,0.2); caret-color: var(--primary-color); color: #666; font-size: 14px; font-weight: 500; line-height: 20px; outline: none; padding: 10px 15px; width: 100%; backdrop-filter: blur(10px) }

input:not([type="checkbox"]):focus, textarea:focus { color: #444; border: 1px solid var(--primary-color); }

textarea { resize: none }

input:not([type="checkbox"]).error, textarea.error { border: 1px solid #ff5454; }

input[data-ignore="true"] { display: none }

a[href][class^=btn-] { color: #777 }

button.btn:not([class^=btn-]), a.button { padding: 12px 0; width: 192px; font-weight: 500; height: 42px; cursor: pointer; text-align: center; position: relative; border: none; outline: none; color: #fff; background: var(--tertiary-color); border-radius: 5px; -webkit-appearance: none; -webkit-tap-highlight-color: #fff0 }

[class^=btn-] { background: #fff0; border-radius: 5px; position: relative; color: #000; overflow: hidden; width: 100%; height: 48px; max-width: 200px; margin: 1rem 0; border: 1px solid #777; box-sizing: border-box; transition: 0.5s ease-in-out; display: flex; line-height: 64px; justify-content: center; align-items: center; text-align: center; gap: 5px; z-index: 1; font-weight: 700; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 0 20px; cursor: pointer }
[class^=btn-] span { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
[class^=btn-]:hover { border: 1px solid #777 }

[class^=btn-]:before, [class^=btn-] > span:before, [class^=btn-]:after, [class^=btn-] > span:after { z-index: -1; box-sizing: border-box; transition: 0.5s ease-in-out }

.btn-0:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #492b05; transform: translateX(-100%) }

.btn-0:hover { color: #ded1c2 }

.btn-0:hover:before { transform: translateX(0) }

.btn-1:before { content: ""; position: absolute; top: 0; right: -50px; bottom: 0; left: 0; border-right: 50px solid #fff0; border-bottom: 80px solid #1d665f; transform: translateX(-100%) }

.btn-1:hover { color: #cbeae7 }

.btn-1:hover:before { transform: translateX(0) }

.btn-1-2:before, .btn-1-2:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-bottom: 80px solid #142036 }

.btn-1-2:before { right: -50px; border-right: 50px solid #fff0; transform: translateX(-100%) }

.btn-1-2:after { left: -50px; border-left: 50px solid #fff0; transform: translateX(100%) }

.btn-1-2:hover { color: #c8cdd6 }

.btn-1-2:hover:before { transform: translateX(-40%) }

.btn-1-2:hover:after { transform: translateX(40%) }

.btn-2:before, .btn-2:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0 }

.btn-2:before { right: -50px; border-right: 50px solid #fff0; border-bottom: 80px solid #0c6025; transform: translateX(-100%) }

.btn-2:after { left: -50px; border-left: 50px solid #fff0; border-top: 80px solid #0c6025; transform: translateX(100%) }

.btn-2:hover { color: #c4e7cf }

.btn-2:hover:before { transform: translateX(-49%) }

.btn-2:hover:after { transform: translateX(49%) }

.btn-3:before, .btn-3:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-top: 40px solid #081c1c; border-bottom: 40px solid #081c1c }

.btn-3:before { border-right: 40px solid #fff0; transform: translateX(-100%) }

.btn-3:after { border-left: 40px solid #fff0; transform: translateX(100%) }

.btn-3:hover { color: #c3cbcb }

.btn-3:hover:before { transform: translateX(-30%) }

.btn-3:hover:after { transform: translateX(30%) }

.btn-4:before, .btn-4:after, .btn-4 span:before, .btn-4 span:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #705240 }

.btn-4:before { transform: translate(-100%,-100%) }

.btn-4:after { transform: translate(-100%,100%) }

.btn-4 span:before { transform: translate(100%,-100%) }

.btn-4 span:after { transform: translate(100%,100%) }

.btn-4:hover { color: #eee2da }

.btn-4:hover:before { transform: translate(-50%,-50%) }

.btn-4:hover:after { transform: translate(-50%,50%) }

.btn-4:hover span:before { transform: translate(50%,-50%) }

.btn-4:hover span:after { transform: translate(50%,50%) }

.btn-5:after { content: ""; width: 0; height: 0; transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: #fff0 #08604b #fff0 #fff0; position: absolute; top: 0; right: 0 }

.btn-5:before { content: ""; width: 0; height: 0; transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: #fff0 #fff0 #fff0 #08604b; position: absolute; bottom: 0; left: 0 }

.btn-5:before, .btn-5:after { content: ""; position: absolute; width: 0; height: 0; border: 0 solid; transform: rotate(360deg) }

.btn-5:before { bottom: 0; left: 0; border-color: #fff0 #fff0 #fff0 #08604b }

.btn-5:after { top: 0; right: 0; border-color: #fff0 #08604b #fff0 #fff0 }

.btn-5:hover { color: #c3e7df }

.btn-5:hover:before, .btn-5:hover:after { border-width: 80px 262.5px }

.btn-6 small { position: absolute; display: block; width: 0; height: 0; border-radius: 50%; background-color: var(--primary-color); transition: width 0.4s ease-in-out,height 0.4s ease-in-out; transform: translate(-50%,-50%); z-index: -1 }

.btn-6:hover { color: #fff !important; border-color: var(--primary-color) }

.btn-6:hover small { width: 225%; height: 562.5px }

.btn-7:before, .btn-7:after, .btn-7 span:before, .btn-7 span:after { content: ""; position: absolute; top: 0; width: 25.25%; height: 0; background-color: #621144 }

.btn-7:before { left: 0 }

.btn-7:after { left: 50% }

.btn-7 span:before, .btn-7 span:after { top: auto; bottom: 0 }

.btn-7 span:before { left: 25% }

.btn-7 span:after { left: 75% }

.btn-7:hover { color: #e8c6dc }

.btn-7:hover:before, .btn-7:hover:after, .btn-7:hover span:before, .btn-7:hover span:after { height: 80px }

.btn-8:before, .btn-8:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--primary-color) }

.btn-8:before { transform: translateY(-100%) }

.btn-8:after { transform: translateY(100%) }

.btn-8:hover { color: #fff }

.btn-8:hover:before { transform: translateY(-50%) }

.btn-8:hover:after { transform: translateY(50%) }

.btn-9:before, .btn-9:after, .btn-9 span:before, .btn-9 span:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 0; background-color: rgb(19 94 97 / .25); transition: 0.4s ease-in-out }

.btn-9:after, .btn-9 span:before { top: auto; bottom: 0 }

.btn-9 span:before, .btn-9 span:after { transition-delay: 0.4s }

.btn-9:hover { color: #c7e6e8 }

.btn-9:hover:before, .btn-9:hover:after, .btn-9:hover span:before, .btn-9:hover span:after { height: 80px }

.btn-10:before, .btn-10:after, .btn-10 span:before, .btn-10 span:after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 80px; background-color: rgb(77 77 77 / .25); transition: 0.4s }

.btn-10:after, .btn-10 span:before { left: auto; right: 0 }

.btn-10 span:before, .btn-10 span:after { transition-delay: 0.4s }

.btn-10:hover { color: #fff !important }

.btn-10:hover:before, .btn-10:hover:after, .btn-10:hover span:before, .btn-10:hover span:after { width: 250px }

.btn-11:hover { color: #fff !important; background: var(--primary-color) }

[class^=btn-][disabled] { background: gray !important; border: 1px solid gray !important; pointer-events: none; }

.passholder { position: relative }

.passholder > input { padding-inline-start: 10px; padding-inline-end: 37px; }

.passholder > input[data-dir="ltr"] { padding-inline-start: 37px; padding-inline-end: 10px; }

.passholder i { user-select: none; position: absolute; inset-inline-end: 0; top: 0; height: 100%; width: 45px; display: flex; justify-content: center; align-items: center; cursor: pointer; }

.flex-space { display: flex; justify-content: space-between; width: 100%; align-items: center; }


@scope(.notifications) {

    :scope { z-index: 12; position: fixed; right: 20px; display: flex; flex-direction: column; bottom: 20px }

    .notification { width: 360px; background: #fff; border-inline-end: 4px solid #333; box-shadow: 0 0 20px 2px rgb(0 0 0 / .05),0 0 4px 0 rgb(0 0 0 / .1); box-sizing: border-box; display: grid; grid-template-columns: 64px auto 30px; opacity: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; margin-bottom: 10px }

    .notification .content { padding: 10px; box-sizing: border-box }

    .notification .content .title { display: block; padding-bottom: 10px; font-weight: 700 }

    .notification .content .desc { display: block; font-size: 13px; line-height: 1.5 }

    .notification .img { width: 64px; background: #333; display: flex; justify-content: center; align-items: center; border-left: 1px solid rgb(0 0 0 / .2); box-sizing: border-box; position: relative }

    .notification.success .img { background: #559646 !important }

    .notification.success { border-inline-end: 4px solid #559646 }

    .notification.info .img { background: #1e9994 !important }

    .notification.info { border-inline-end: 4px solid #1e9994 }

    .notification.warning .img { background: #d0b425 !important }

    .notification.warning { border-inline-end: 4px solid #d0b425 }

    .notification.error .img { background: #db2a30 !important }

    .notification.error { border-inline-end: 4px solid #db2a30 }

    .notification .img .delay { position: absolute; width: 100%; right: 0; bottom: 0; background: rgb(0 0 0 / .2) }

    .notification .img img { width: 48px; height: 48px }

    .notification .img i { color: #fff; font-size: 32px }

    .notification .tools { width: 32px; display: flex; align-items: center; flex-direction: column }

    .notification .tools i { margin-top: 5px; cursor: pointer; font-size: 18px;color:#777 }
}

@media screen and (max-width:1023px) {
    .notifications { bottom: 20px }
}

@media screen and (max-width:550px) {
    @scope(.notifications) {
        :scope .notification { width: 100% }
        :scope { position: fixed; z-index: 999; right: 20px; display: flex; left: 20px; bottom: 20px; flex-direction: column}
    }
      
    }