.appdrawerul li { direction : rtl !important ; }
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
    margin-right: calc(.5rem*(1 - var(--tw-space-x-reverse))) !important;
    margin-left: calc(.5rem*var(--tw-space-x-reverse)) !important
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
    margin-right: calc(.75rem*(1 - var(--tw-space-x-reverse)));
    margin-left: calc(.75rem*var(--tw-space-x-reverse)) ; 
}
.paddingb4 { padding-bottom : 4rem !important ; }
.tooltip {
    font-family: iransans !important;
}
.darkph::placeholder {
    color : #4a5772 !important
}
.lbl { 
    font : 12px iransans !important ; 
}
.gridjs { direction : rtl !important ; }
.gridjs-input {
    font: 12px iransans !important;
}
.gridjs-search { padding-bottom : 10px !important ; padding-left : 0 !important ;  }
.gridjs-th { padding : 0.5rem !important ; }
.gridjs-input {
    padding: 0.3rem 0.5rem
}
.gridjs-table .gridjs-td {
    padding: .5rem
}
#TXTToPersianPrice {
    font: 11px iransans !important;
}
input[type='file'] {
    color: transparent;
}
table {
    font: 13px iransans  ; 
    text-align: center; direction : rtl ; 
}
table th {
    font: 12px iransans;
}
.gridjs-table {
    font: 13px iransans !important;
    text-align: center;
}
.font9 {
    font-size: 9px !important;
}
.font10 {
    font-size: 10px !important;
}
.font11 {
    font-size: 11px !important;
}
.font12 { 
    font-size : 12px !important ; 
}
.font13 {
    font-size: 13px !important;
}
.font14{
    font-size: 14px !important;
}

.font15 {
    font-size: 15px !important;
}

.font16 {
    font-size: 16px !important;
}

.font17 {
    font-size: 17px !important;
}
.fontsans { font-family : iransans !important; }
.fonttitr { 
    font-family : titr !important ; font-weight : 100 !important ; 
}
textarea {
font-family : iransans  !important; 
}
.popover { background-color : white !important}
.fontshab { font-family : shab !important ; }
@media (min-width:1268px) {

}
@media (min-width:768px) {
    .brol {display:none}
    .ewalletsm {
        display: none; 
    }
    .bgacountant { max-width : 30% !important ; }
    .lg40 { max-width : 40% !important ; }
    .lg50 { max-width : 50% !important ; }
    .lg60 { max-width : 60% !important ; }
    .lg25 {
        max-width: 25% !important;
    }
    .lg20 {
        max-width: 20% !important;
    }
    .hfull_lg { height : 100vh  }
 
    .lg50widthfix { 
        width : 50% !important ; 
    }
    .nodata { margin : auto ; }
 }
@media (max-width:768px) {
 
    .rightm {
        width: 75% !important;
    }
    .ewalletlg { display : none ; }
    .ewalletsm {
        margin-top: -1rem !important;
    }
    .smrtl { direction : rtl !important ; }
    .pbhalfinsm { padding-bottom : 0.5rem !important ; }
}

@supports (animation: grow .5s cubic-bezier(.25, .25, .25, 1) forwards) {
    .tick {
        stroke-opacity: 0;
        stroke-dasharray: 29px;
        stroke-dashoffset: 29px;
        animation: draw .5s cubic-bezier(.25, .25, .25, 1) forwards;
        animation-delay: .6s
    }

    .circle {
        fill-opacity: 0;
        stroke: #10b981;
        stroke-width: 16px;
        transform-origin: center;
        transform: scale(0);
        animation: grow 1s cubic-bezier(.25, .25, .25, 1.25) forwards;
    }
}

@keyframes grow {
    60% {
        transform: scale(.8);
        stroke-width: 4px;
        fill-opacity: 0;
    }

    100% {
        transform: scale(.9);
        stroke-width: 8px;
        fill-opacity: 1;
        fill: #10b981;
    }
}

@keyframes draw {
    0%, 100% {
        stroke-opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
    }
}


 

.form-item {
    position: relative;
    margin-bottom: 15px;
}

    .form-item input {
        display: block;
        width: 100%;
        height: 45px;
        background: transparent;
        border: solid 1px #ccc;
        transition: all .3s ease;
        padding: 0 15px;
        border-radius: 9999px;
        text-align: center !important;
        font-family: iransans !important;
    }

textarea {
    text-align: center !important;
}

.form-item input:focus {
    border-color: #38AA9A ; font-family : iransans !important ; 
}

.form-item label {
    position: absolute; font : 12px iransans !important ; 
    cursor: text;
    z-index: 2;
    top: 10px;
    right: 10px;
    font-size: 11px;
    font-weight: bold;
    background: #fff;
    padding: 0 5px;
    color: #4a5772;
    transition: all .3s ease
}

.form-item input:focus + label,
.form-item input:valid + label {
    font-size: 11px;
    top: -12px
}

.form-item input:focus + label {
    color: #38AA9A
}

.text-danger {
    font: 11px iransans !important;
    color: #f000b9 ; direction : rtl ; 
}
 
select {
    text-align: center;
    border: solid 1px #a3a3a3 !important
}

.form-item .inp {
    display: block;
    width: 100%;
    height: 45px;
    background: transparent;
    border: solid 1px #a3a3a3;
    transition: all .3s ease;
    padding: 0 15px;
    border-radius: 20px;
    font-size: 14px;
}
 
.form-item .inp:focus {
    border-color: #38AA9A
}

    .form-item .inp:focus + label,
    .form-item .inp:valid + label {
        font-size: 11px;
        top: -12px
    }

    .form-item .inp:focus + label {
        color: #38AA9A
    }






label { font-family : iransans !important}


.shake {
    animation: shake-animation 3s ease infinite;
    transform-origin: 50% 50%;
    position: relative;
}




@keyframes shake-animation {
    0% {
        transform: translate(0,0)
    }

    1.78571% {
        transform: translate(5px,0)
    }

    3.57143% {
        transform: translate(0,0)
    }

    5.35714% {
        transform: translate(5px,0)
    }

    7.14286% {
        transform: translate(0,0)
    }

    8.92857% {
        transform: translate(5px,0)
    }

    10.71429% {
        transform: translate(0,0)
    }

    100% {
        transform: translate(0,0)
    }
}






.spinner {
    margin: 0;
    width: 50px;
    text-align: center;
    line-height: 0 !important;
    display: none
}

    .spinner > div {
        width: 8px;
        height: 8px;
        background-color: white;
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        animation: sk-bouncedelay 1s infinite ease-in-out both;
    }

    .spinner .bounce1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
        background-color: white;
    }

    .spinner .bounce2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
        background-color: white;
    }

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0)
    }

    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}