a {
    cursor: pointer;
}

:root {
    --dark: #52bed9;
    --primary: #ddf2f7;
}

body, h1, h2, h3, h4, h5, h6, p, input, select, textarea {
    font-family: iranyekannumber;
    display: block;
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    position: relative;
    direction: ltr;
    padding: 0;
    margin: 0;
}

body {
    font-size: 11px;
    position: relative;
    overflow-y: scroll;
    margin: 0;
    padding: 0;
    font-family: iranyekannumber;
    background: #f4f9fa;
    background: var(--primary);

}


.row {
    margin-right: 0;
    margin-left: 0;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
}

.rp-container-header {
    padding: 0;
    direction: rtl;
    display: block;
    font-size: 13px;
    font-weight: bold;
    color: #2f2f2f;
    font-size: 0;
    padding: 2px;
    background: white;
}

.rp-container-title {
    vertical-align: middle;
    border-radius: 10px;
    padding: 4px 8px;
    margin: 0px;
    font-size: 14px;
    color: #4a4a4a;
    cursor: pointer;
    line-height: 30px;
    color: var(--dark);
}

.rp-container-close-button {
    font-size: 20px;
    vertical-align: middle;
    color: red;
    cursor: pointer;
    padding: 4px;
    margin-right: 4px;
}

.rp-container-close-button:hover {
    color: orange;
}

.rp-container-body {
    direction: rtl;
    position: relative;
    min-height: 100px;
    background: #fbfbfb;
    background: url(../img/back/bgwhite2.webp);
    background-position: center;
    background-size: cover;
    background-repeat: repeat;
}

.rp-container-page {
    background: white;
    padding-bottom: 100px;
}

.rp-container-tab-header-button.selected {
    background: #89cdf5;
    color: white;
    border-color: #89cdf5;
}

.rp-container-tab-header-close {
    display: inline-block;
    font-size: 20px;
    vertical-align: middle;
    cursor: pointer;
    padding: 4px;

}

.rp-container-tab-header-title {
    vertical-align: middle;
    /* background: #f7f7f7; */
    border-radius: 10px;
    padding: 0px 8px;
    margin: 0px;
    font-size: 12px;
    min-width: 50px;
    display: inline-block;
}

.rp-container-body-tab-container {
}

.so-home-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.so-window {

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: white;
}

.so-window-header {

    height: 45px;

    padding: 10px;

    line-height: 40px;

    text-align: center;

    position: absolute;

    z-index: 1;

    left: 0;

    right: 0;

    top: 0;

    height: 60px;

    box-shadow: 0px 3px 5px rgba(0, 0, 0, .1);

    border-radius: 0 0 10px 10px;

    background: white;

    color: var(--dark);

    border-radius: 0;

    text-align: right;
}

.so-window-header .rp-container-close-button {

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    padding: 0 10px;

    width: 50px;

    height: 40px;

    line-height: 40px;

    font-size: 30px;

    color: #ffc60e;

    margin: 10px;

    color: var(--dark);
}

.so-window.no-border .so-window-header {
    display: none;
}

.so-window-body {

    position: relative;

    height: 100%;

    width: 100%;
}

.so-panel {

    position: relative;
}

.so-fix {

    height: 100%;

    display: flex;

    flex-direction: column;
}

.so-fix-bottom {

    height: auto;

    z-index: 1;


    padding: 0;
}


.so-fix-middle {

    height: 100%;

    z-index: 0;

}

.so-fix-alight-center {
}

.so-tab {

}

.so-window .so-panel {

    padding: 0;



    margin-top: 0;

    width: 100%;

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    top: 60px;

    overflow-y: scroll;
}

.so-window .so-tab {

}

.so-dialog .so-panel {

}

.so-dialog .so-tab {

}

.so-button {
    width: 100%;
    height: 50px;
    padding: 5px;
    line-height: 40px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 8px;
    /* background: #ea1414; */
    font-size: 15px;
    font-weight: bold;
    color: #828282;
    border: none;
}

.so-padding-15 {

    padding: 15px;
}

.so-padding-25 {

    padding: 25px;
}

.so-home {

    max-width: 100%;

    margin: 0px auto;

    height: 100%;

    padding-top: 80px;

    padding-bottom: 0;

    position: relative;

    z-index: 0;

}

.so-home-header {

    padding-right: 6px;

    height: 80px;

    background: #ffffff;

    position: fixed;

    top: 0;

    right: 0;

    left: 0;

    z-index: 1;

    direction: rtl;

    padding: 0;

    font-size: 16px;

    padding: 10px;

    border-radius: 0;

}

.so-home-header .so-home-header-title {

    display: inline-block;

    vertical-align: middle;
}

.so-home-header .so-home-header-title span.fa-lang {

    display: block;

    font-size: 18px;

    padding: 5px 15px;

    color: #c31b7d;

    font-weight: bold;

    color: #686868;
}

.so-home-header .so-home-header-title span.en-lang {

    padding: 5px 15px;

    font-size: 12px;

    color: #949494;
}

.so-home-header .so-icon {

    display: inline-block;

    vertical-align: middle;

    font-size: 36px;

    color: #1c2d56;

    padding: 6px 8px 0;

    line-height: 40px;

    margin: 5px;

    cursor: pointer;

    font-weight: bold;
}

.so-home-header .so-image {

    max-height: 60px;

    vertical-align: middle;

    display: inline-block;

    margin: 0px;

    right: 0;

    top: 0;

    background: white;

    float: right;

    vertical-align: middle;

    border-radius: 15px;

    background: white;
}

.so-home-header .so-title {

    display: inline-block;

    vertical-align: middle;

    font-size: 14px;

    font-weight: bold;

    display: none;

    margin-right: 10px;
}

.so-home-footer-menu {

    background: #5d71a0;

    position: fixed;

    left: 0;

    right: 0;

    bottom: 0;

    height: 55px;

    z-index: 1;

    box-shadow: 0px -5px 4px rgb(146 146 146 / 10%);

    display: none;
}

.so-home-content {

    overflow: scroll;

    position: fixed;

    left: 0;

    right: 0;

    top: 80px;

    bottom: 0;
}

.so-tab-contents {

    position: relative;
}

.so-tab-content {
    transform: scale(.5);
    transition: all ease .4s;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0;
    background: red;
}

.so-tab-content.selected {
    display: block;
    transform: scale(1);
    opacity: 1;
    z-index: 10;
}


.so-tab-headers {

    font-size: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    direction: rtl;

}

.so-tab-header {

    display: inline-block;

    height: 60px;


    font-size: 11px;

    flex-grow: 1;

    text-align: center;


    padding: 4px;

    color: white;

    border: 3px solid transparent;
}

.so-tab-header:hover, .so-tab-header:focus {
    text-decoration: none;
}

.so-tab-header.selected {
    color: #fff709;
    text-decoration: none;
    background: #6b7fad;
    border: 3px solid #5d71a0;
}

.so-tab-header.selected .las {

    transform: scale(1.3);

    margin-top: 5px;

    border-color: #fff709;

    border-radius: 100px;

    padding: 3px;
}

.so-tab-header.selected .so-title {

    opacity: 0;
}

.so-tab-header .so-title {

    display: block;

    font-size: 10px;
}

.so-tab-header .las {

    font-size: 30px;

    transition: all ease .4s;

    border-color: transparent;

    border: 1px solid transparent;

    border-radius: 0;
}

.so-menu-container {

    font-size: 0;

    text-align: center;

    direction: rtl;

    text-align: center;

    color: white;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    overflow: auto;

    width: 100%;

}

.so-menu-btn {

    display: inline-block;

    vertical-align: middle;

    height: 85px;

    width: 80px;

    font-size: 11px;

    background: none;

    border: none;

    margin: 1px;

    color: black;

    margin-bottom: 10px;

    padding: 0;

    text-align: center;

    vertical-align: top;

    text-decoration: none;
}

.so-menu-icon {

    width: 54px;

    height: 50px;

    background: white;

    display: block;

    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important;

    margin: 0px auto;

    border-radius: 8px;

    margin-bottom: 5px;
}

.so-menu-btn:hover {

    text-decoration: none;
}

.so-menu-btn:hover .so-menu-icon {
    box-shadow: none;

}

.so-menu-btn .las {

    font-size: 30px;

    line-height: 50px;

    color: #f15a22;
}

.so-menu-btn .so-title {

    line-height: 15px;

    font-size: 10px;

    font-weight: bold;

    padding: 0;

    margin: 0;

    display: block;

    color: #697ead;
}

.dialog-panel {
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 10;
    background: #f9f9f9;
    display: flex;
    align-items: self-start;
    justify-content: center;

    background: #00000038;
    border-radius: 3px;
    overflow-y: auto;
    padding-bottom: 50px;
    padding-top: 50px;
}

.dialog-panel > .dialog-panel-form {
    background: #fcfcfc;
    min-width: 400px;

    box-shadow: 0px 0px 10px rgba(0, 0, 0, .1);
    border-radius: 3px;

    max-width: 90%;

    position: relative;

    direction: rtl;

    overflow-y: visible;

}

body.mobile-view .dialog-panel {
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 0;
}

body.mobile-view .dialog-panel > .dialog-panel-form {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    margin: 0px;
    border-radius: 0;
}

body.mobile-view .dialog-panel-form > .dialog-panel-content {
    max-height: calc(100% - 40px);
}

.dialog-panel-form .dialog-panel-header {
    height: 40px;
    border-radius: 5px 5px 0 0;
    padding: 10px;
    line-height: 20px;
    font-size: 13px;
    color: #ffffff;
    border-bottom: 1px solid #f3f3f3;
    border-radius: 0;
    background: #8ece3f;
}

.dialog-panel-form .dialog-panel-header .rp-container-title {
    height: 40px;
    border-radius: 5px 5px 0 0;
    padding: 5px;
    line-height: 22px;
    font-size: 12px;
    font-weight: 900;
    color: #ffffff;
    border-radius: 0;
    letter-spacing: .5px;
}

@media screen and (min-width: 768px) {
    .dialog-panel > .dialog-panel-form {
        min-width: 600px;
    }
}

.dialog-panel-header .dialog-panel-close-button {
    background: none;
    border: none;
    position: absolute;
    left: 0;
    top: 0;
    padding: 8px 12px;
    color: #ffffff;
}

.dialog-panel-header .dialog-panel-close-button:hover, .dialog-panel-header .dialog-panel-close-button:active, .dialog-panel-header .dialog-panel-close-button:focus {
    outline: none;
    color: red;
}

.dialog-panel-header .dialog-panel-close-button .las {
}

.dialog-panel-form .dialog-panel-header .las {
    font-size: 22px;
    vertical-align: middle;
    line-height: 22px;
}

.dialog-panel-form .dialog-panel-footer {

    left: 0;
    bottom: 0;
    right: 0;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 0 0 5px 5px;

}

.dialog-panel-form > .dialog-panel-content {

    overflow-y: visible;
    padding: 10px;
    background: #fbfbfb;
    z-index: 1;
    position: relative;
    min-height: 100px;
}

.dialog-panel-body-text {
    padding: 15px;
    text-align: center;
    font-size: 14px;
}

.dialog-color-blue .dialog-panel-form .dialog-panel-header {
    color: white;
    background: #4ca8f7;
}

.dialog-color-blue .dialog-panel-header .dialog-panel-close-button {
    color: #f9ff95;
}

.rp-container-window {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background: #efefef;
}

.rp-panel-full {

    position: fixed;

    left: 0;

    right: 0;

    bottom: 0;

    top: 0;

    background: whitesmoke;

    height: 100vh;

    width: 100%;
}

.so-button:hover, .so-button:focus {
    opacity: .9;
    text-dicoration: none;
    outline: none;
}

.so-back-info {
    background-color: #06a2c8;
    color: white !important;
}

.so-back-success {
    background-color: #71dc18;
    color: white !important;
}

.so-back-none {
    background-color: transparent;
    color: gray;
}

/* اطمینان از هماهنگی در سایزهای کوچک */
.main-content-row {
    padding-top: 15px;
}

.img-container img {
    max-width: 100%;
    height: auto;
}

.responsive-text {
    font-size: 1.2em;
}

@media (max-width: 768px) {
    .responsive-text {
        font-size: 1em; /* کاهش اندازه فونت در سایزهای کوچک */
    }

    .main-content-row {
        margin-top: 100px; /* تنظیم فاصله در سایزهای موبایل */
    }
}

/* استایل اصلی جعبه‌های متنی */
.so-form input {
    height: 40px;
    padding: 10px;
    font-size: 1.2em;
}

/*مخفی کردن دکمه های بالا و پایین در جبه متن ورود موبایل*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}


.so-dock {
    width: 100%;
    height: 100%;
    max-width: 768px; /* حداکثر عرض برای سایز تبلت */
    margin: 0 auto;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
}

@keyframes logo-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .mrCCUlogo {
        animation: logo-spin infinite 50s linear;
    }
}

/* کنترل کامل روی select و option */
#ostan, #shahr {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    color: #000;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 14px;
}

/* حالت تیره مرورگر */
@media (prefers-color-scheme: dark) {
    #ostan, #shahr {
        background-color: #222;
        color: #fff;
        border-color: #555;
    }
}

.so-fix-content-bottom {

    justify-content: flex-end;
}

.bg-image-1 {


    background-image: url(../img/logo.png);

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;

    margin-top: -60px;

    max-height: 150px;

    height: 150px !important;
}

.so-text-2 {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin: 0px;
    padding: 5px 0;
    line-height: 30px;
    color: #f26722;
}

.so-text-3 {
    text-align: center;
    font-size: 15px;
    font-weight: normal;
    margin: 0px;
    padding: 5px 0;
    line-height: 30px;
    color: #7b7b7b;
}

.so-text-4 {
    text-align: center;
    font-size: 12px;
    font-weight: normal;
    margin: 0px;
    padding: 5px 0;
    line-height: 30px;
    color: #7b7b7b;
}

.so-form {
    width: 100%;
    display: flex;
    box-shadow: 0 1px 7px 0 rgb(255 255 255 / 10%);
    align-items: center;
    border-radius: 8px;
    position: relative;
}

.login-input3 {
    font: inherit;
    color: #06a2c8;
    border: 0;
    line-height: 30px;
    padding: 6px 0 7px;
    min-width: 0;
    background: none;
    box-sizing: content-box;
    animation-name: mui-auto-fill-cancel;
    letter-spacing: inherit;
    animation-duration: 10ms;
    -webkit-tap-highlight-color: transparent;
    font-size: 13px;
    font-weight: bold;
    outline: none;
    border: 2px solid #06a2c8;
    border-radius: 10px;
    background: #ffffff;
}

.login-input3::placeholder {
    color: #aeafb1;
}


input.birthdaydate {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid #06a2c8;
    border-radius: 10px;
    background: #ffffff;
    color: #06a2c8;
    justify-content: center;
}

input.birthdaydate::placeholder {
    color: #aeafb1;
}

.centered-input {
    width: 100% !important;
%;
    display: flex;
    justify-content: center; /* وسط‌چین کردن */
}

.so-form .birthdaydate {
    width: 100% !important;
    max-width: none !important;
    display: block;
}

.centered-input input {
    width: 100% !important; /* پر کردن کل ظرف */
}

.login-input {
    font: inherit;
    color: #06a2c8;
    width: 100%;
    border: 0;
    line-height: 40px;
    margin: 0;
    display: block;
    padding: 6px 0 7px;
    min-width: 0;
    background: none;
    box-sizing: content-box;
    animation-name: mui-auto-fill-cancel;
    letter-spacing: inherit;
    animation-duration: 10ms;
    -webkit-tap-highlight-color: transparent;
    font-size: 18px;
    font-weight: bold;
    outline: none;
    border: 2px solid #06a2c8;
    border-radius: 10px;
    background: #ffffff;
}

.login-input::placeholder {
    color: #aeafb1;
}


.ltr {
    direction: ltr;
}

.text-center {
    text-align: center !important;
}

.so-back-cancel {

    background: #e0e0e0;

    color: #828282;
}

.f-msg {
    font-size: 14px;
    font-weight: bold;
    color: #ff5200;
}

.f-msg {
}

.f-msg-hidden {
    display: none;
}

.f-msg-show {
}

.f-msg {
    position: fixed;
    z-index: 999999;
    right: 0;
    left: 0;
    top: 60px;
    text-align: center;
    line-height: 50px;
    font-size: 16px;
    color: white;
    padding: 0;
    direction: rtl;
    height: auto;
    background: #38c0e8;
}


.f-msg.f-msg-error {
    background: #f13333e0;
    color: white;
}

@keyframes SHW {
    from {

    }
    to {
        left: 15px;
        top: 80px;
        bottom: auto;

        margin: 0;
    }
}


.login-msg {
    font-size: 14px;
    font-weight: bold;
    color: #ff5200;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
    /*CSS transitions*/
    -o-transition-property: none !important;
    -moz-transition-property: none !important;
    -ms-transition-property: none !important;
    -webkit-transition-property: none !important;
    transition-property: none !important;
    /*CSS transforms*/
    -o-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
    /*CSS animations*/
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
}

.login-input-underline {
    padding-left: 17px;
    letter-spacing: 38px;
    border: 0;
    background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size: 50px 1px;
    background-repeat: repeat-x;
    background-position-x: 35px;
    width: 250px;
    text-align: left;
    margin: 0px auto;

    overflow: hidden;
    background-color: transparent;
}

.login-input-underline::selection {
    background: none;
    color: red;
}

.login-input-underline::-moz-selection {
    background: none;
    color: red;
}

.login-input3-underline {
    padding-left: 17px;
    letter-spacing: 38px;
    border: 0;
    background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size: 50px 1px;
    background-repeat: repeat-x;
    background-position-x: 35px;
    width: 250px;
    text-align: left;
    margin: 0px auto;

    overflow: hidden;
    background-color: transparent;
}

.login-input3-underline::selection {
    background: none;
    color: red;
}

.login-input3-underline::-moz-selection {
    background: none;
    color: red;
}

#divInner {
    left: 0;
    position: sticky;
}

#divOuter {
    width: 190px;
    overflow: hidden;
}

.login-confirm-timer {

    font-size: 13px;

    font-weight: bold;

    color: #d08909;
}

.t-confirm .btn-link {
    position: absolute;
    left: 0;
    top: 0;
    padding: 0px 5px;
}

.btn-link {
    font-size: 13px;
    font-weight: bold;
}

.btn-link:hover, .btn-link:focus {
    text-decoration: none;
}

.so-box {

    border-radius: 16px;

    text-align: right;

    direction: rtl;

    padding: 10px;

    color: white;

    font-size: 12px;

    font-weight: bold;

    width: 100%;
}

.so-back-linear-blue {
    background: linear-gradient(
            254.57deg, #5b6f9e 1.22%, #8fa4d6 51.64%, #5d709f);
    background: #06a2c8;
    border-radius: 0;
}

.so-menu-link {

    display: block;

    font-size: 12px;

    font-weight: bold;

    text-align: center;

    padding: 8px 0;

    margin-top: 10px;

    direction: rtl;
}

.so-menu-link:hover, .so-menu-link:focus {
    text-decoration: none;
}

.so-menu-link .las {
    font-size: 18px;
    font-weight: bold;
    vertical-align: middle;
    margin-left: 5px;
}

.so-back-white {

    background: white;
}

.so-menu-separtor {
    height: 1px;
    background: #e2e6f1;
    margin: 5px 0;
}


.form-control {
    line-height: 30px;
    background: white;
    font-size: 15px;
    border: 2px solid #385a64;
    box-shadow: none;
    font-weight: bold;
    height: auto;
    padding: 5px;
}

.form-control:focus, .form-control:hover {
    box-shadow: 0px 0px 0px 1px #93fefe;
}


.so-radio-list-button {
    font-size: 0;

}

.so-radio-list-button button {
    border: 1px solid gray;
    padding: 10px;
    font-size: 12px;
    font-weight: bold;
    background: white;
    border-radius: 5px;
    min-width: 50px;
    margin: 1px;
    min-width: 99%;
}

.so-radio-list-button button:hover, .so-radio-list-button:focus {
    background: gray;
    color: white;
}

.input-label {

    position: relative;

    padding: 0;

    font-size: 0;
}

.input-label span {

    position: absolute;

    left: 0;

    bottom: 0;

    top: 0;

    width: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #385a64;

    color: white;

    font-size: 13px;

    font-weight: bold;
}

.input-label input {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    line-height: 30px;
    padding: 5px;
    margin: 0;
    height: 40px;
    font-size: 18px;
    font-weight: bold;
    outline: none;
}

.input-label input:focus, .input-label:hover {
    outline: none;
}

.input-label-50 {
    padding-left: 50px;
}

.input-label-50 span {
}

.input-label-50 input {

    margin-left: 50px;

}

.t-charge-page {

    background-color: #eefdfd;
}

.t-charge-page .img-back {
    background: url(../img/back/pay.png);
    background-position: center top;
    background-size: contain;
    background-repeat: no-repeat;
    min-height: 300px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin-top: 50px;
}


/****************************************************************/

.ms-page {

}

.ms-header {

    left: 0;

    right: 0;

    top: 0;

    z-index: 999;

    padding-right: 50px;

    min-height: 40px;

    direction: rtl;

    text-align: right;

    margin-bottom: 10px;
}

.ms-map {

}

.ms-footer {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 999;

    margin: 10px;
}

.ms-header .so-back {

    background: white;

    box-shadow: 0px 2px 5px rgb(0 0 0 / 10%);

    border: none;

    font-size: 30px;

    font-weight: bold;

    line-height: 30px;

    padding: 0;

    margin: 0;

    width: 40px;

    height: 40px;

    padding: 5px;

    border-radius: 10px;

    position: absolute;

    right: 0;

    top: 0;
}

.ms-header .so-back .las {

}

.ms-header .so-title {

    display: block;

    width: 100%;

    height: 40px;

    line-height: 30px;

    font-size: 14px;

    font-weight: bold;

    color: black;

    background: white;

    border-radius: 10px;

    padding: 5px 10px;

    box-shadow: 0px 2px 5px rgb(0 0 0 / 10%);
}

.ms-panel-select-service {

    text-align: center;

    font-size: 0;
}

.ms-button-service-type {

    background: none;

    border: none;

    font-size: 13px;

    width: 30%;

    background: white;

    height: 50px;

    line-height: 20px;

    text-align: center;

    padding: 5px;

    margin: 1%;

    vertical-align: middle;

    border-radius: 10px;

    color: #474779;

    font-weight: bold;
}

.ms-panel-location-selection {

}

.ms-location-row {

    height: 40px;

    background: white;

    border-radius: 10px;

    line-height: 40px;

    font-size: 14px;

    font-weight: bold;

    position: relative;

    padding: 0 10px;

    color: red;
}

.ms-location-row .las {

    font-size: 24px;

    position: absolute;

    left: 0;

    bottom: 0;

    top: 0;

    padding: 10px;

    line-height: 20px;

    border-right: 1px solid #e8e8e8;
}

.ms-location-row .so-title {

}

.ms-choose-location {

    padding: 0;

    background: white;

    margin-bottom: 5px;
}

.ms-choose-location .las {

    font-size: 24px;

    background: #2b5167;

    color: white;

    padding: 5px;

    vertical-align: middle;
}

.ms-choose-location .so-title {

    vertical-align: middle;

    font-size: 12px;

    font-weight: bold;

    color: #2b5167;
}

.ms-header-panel {

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    margin: 10px;


    z-index: 999;

    min-height: 40px;

}

.t-transactions-page {

    padding: 15px;

    overflow-y: auto;
}

.t-transaction-row {

    height: auto;

    background: #f9f9f9;

    margin-bottom: 3px;

    line-height: 24px;

    font-size: 12px;

    font-weight: bold;

    padding: 5px;

    border-radius: 10px;
    position: relative;
}

.t-transaction-row .so-success {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    padding: 5px;
}

.t-transaction-row .so-vahed {
    font-size: 10px;
    font-weight: normal;
    vertical-align: middle;
}

.t-transaction-row .so-type {

    display: block;

    width: 100%;
}

.t-transaction-row .so-value {

    font-size: 16px;

    font-weight: bold;

    padding: 8px;

    background: white;

    padding: 0 10px;

    border-radius: 10px;

    background: #bcffbc;
}

.t-transaction-row-mines.t-transaction-row .so-value {
    background: #ffc4c4;
}

.t-transaction-row .so-date {
    float: left;
    vertical-align: middle;
    color: #4d4d7b;
}

.t-transaction-row .so-time {

    float: left;

    margin-left: 5px;

    vertical-align: middle;

    color: #a4a3c7;

    font-weight: normal;
}

.t-transaction-row .so-detail {
    display: block;
}

.t-transaction-row-mines {

    background: #ffe5e5;
}

.bank-callback {
    background: white;
    width: 300px;
    margin: 0px auto;
    direction: rtl;
    margin-top: 20px;
}

.bank-callback .msg {
    display: block;
    text-align: center;
    padding: 20px;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 50px;
}

.bank-callback .btn {
    background: red;
    border: none;
    width: 100%;
    line-height: 30px;
    font-size: 15px;
    font-weight: bold;
}

.bank-callback .btn.success {
    background: #33ee2b;
}

.me-hospital-list {

    padding: 0px;

    background: whitesmoke;
}

.hospital-row {

    display: block;

    font-size: 15px;

    font-weight: bold;

    padding: 10px;

    background: white;

    border-radius: 0;

    margin: 0;

    box-shadow: 0px 3px rgb(180 180 180 / 15%);

    min-height: 75px;

    background: #ffffff;

    margin-bottom: 5px;

    margin-top: 5px;
}

.hospital-row .logoUrl {

    display: inline-block;

    float: right;

    width: 55px;

    height: 55px;

    background: #f3f3f3;

    border-radius: 15px;

    border: none;

    margin-left: 10px;

    background-image: url(../img/back/hospital.png);

    background-position: center;

    background-size: contain;

    background-repeat: no-repeat;
}

.hospital-row .name {

    display: block;

    font-size: 14px;

    padding: 5px;

    font-weight: bold;
}

.hospital-row .img {

}

.hospital-row .centerTypeName {
    font-size: 12px;
    font-weight: normal;
}

.me-meeting-list {
    overflow-y: scroll;
}

.so-home-index-image {
    background: url(../img/back/home-bg-1.jpg);
    height: 300px;
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
    margin-top: -50px;
}

.so-home-index-text {

    font-size: 14px;

    color: #6f6f6f;

    padding: 15px;

    text-align: center;

    font-weight: bold;

    width: 100%;

    margin: 15px;

    border-radius: 10px;

    padding: 15px;

    overflow: hidden;

}

.so-home-index-text a {

    display: block;

    margin: 5px 0;

    background: white;

    padding: 8px;

    margin-top: 10px;
}

.so-home-index-search {
    display: block;
    width: 100%;

    font-size: 13px;
    font-weight: bold;
    padding: 5px 15px;

    margin: 15px 0;
    height: auto;

    margin-bottom: 10px;
    position: relative;

    left: 0;
    right: 0;
    top: 0;
    z-index: 100;

}

.so-home-index-search span.input-text {
    background: #ffffff;
    padding: 12px;
    vertical-align: middle;
    display: inline-block;
    border-radius: 100px;
    padding-right: 40px;
    width: 100%;
    height: 50px;
    box-shadow: 0px 0px 0px 5px rgb(0 0 0 / 6%);
    border: 4px solid #52bed9;
}

.so-home-index-search span.las {

    color: white;

    font-size: 28px;

    vertical-align: middle;

    position: absolute;

    right: 20px;

    top: 5px;

    color: #ffffff;

    background: #52bed9;

    border-radius: 100px;

    width: 40px;

    height: 40px;

    margin: 5px 0;

    padding: 0;

    line-height: 40px;
}

.so-user-index-box {

    margin: 0 15px;

    font-size: 13px;

    color: #f7921e;

    background: #ffffff;

    text-align: center;

    border-radius: 10px;

    padding: 5px 15px;

    border: 1px solid #ffc60e;

    margin-bottom: 50px;
}

.so-user-index-box h4 {

    padding: 10px;

    font-size: 14px;

    font-weight: bold;
}

.so-user-index-box .so-menu-btn {

    height: auto;

    width: 100%;

    padding: 8px 0;

    background: #f7921e;

    margin-top: 10px;

    color: white;
}

.so-hospital-list-search {


    padding-left: 100px;

    position: relative;

    background: var(--dark);

    padding: 10px;
}

.so-hospital-filter-more {
    padding: 5px 0;
    color: white;
    line-height: 20px;
}

.so-filter-more {
    padding: 5px;
    color: white;
    margin: 0;
    background: none;
    border: none;
    color: white;
    font-size: 12px;
}

.so-filter-more:hover {
    color: yellow;
}

.so-hospital-filter-search .form-control {
    border: none;
    font-size: 16px;
    line-height: 50px;
    padding: 0 10px;
    direction: rtl;
    text-align: right;
    background: #f7f7f7;
    border: 2px solid #f7f7f7;
    height: 50px;
    box-shadow: none;
}

.so-hospital-filter-more .form-control {
    border: none;
    font-size: 16px;
    line-height: 50px;
    padding: 0 10px;
    direction: rtl;
    text-align: right;
    background: #f7f7f7;
    border: 2px solid #f7f7f7;
    height: 50px;
    box-shadow: none;
}

.so-hospital-filter-search .btn {

    padding-left: 100px;

    position: absolute;

    left: 1px;

    top: 1px;

    height: 48px;

    width: 100px;

    font-size: 12px;

    font-weight: bold;

    text-align: center;

    direction: rtl;

    padding: 0;

    background: #52bed9;

    border: none;
}


.so-hospital-filter-search .btn .las {
    vertical-align: middle;
    font-size: 14px;
}

.so-hospital-info {

}

.so-hospital-profile {

    background: var(--primary);

    padding-bottom: 10px;
}

.so-hospital-address {

    padding: 10px;

    background: white;

    font-size: 12px;

    font-weight: bold;

    color: #a4a4a4;

    line-height: 24px;
}

.so-hospital-address .address {

    white-space: pre-line;

    display: block;

    font-size: 14px;

    color: #3d3d3d;
}

.so-hospital-profile .logo {

    display: block;

    width: 100%;

    height: 80px;

    margin: 0px auto;

    background-position: center;

    background-size: auto 60px;

    background-repeat: no-repeat;

    background-image: url(../img/back/hospital.png);

}

.so-hospital-profile .name {

    font-size: 16px;

    text-align: center;

    padding: 10px;

    background: white;

    margin: 10px 15px;

    border-radius: 100px;

    font-weight: bold;

    color: #0287cf;

}

.so-hospital-profile .detail {

    padding: 0px 20px;

    display: block;
}

.me-meeting-list {

    padding: 5px;

    margin-top: 20px;
}

.so-hospital-info .meeting-list {
}


.me-meeting-list h4 {

    margin-bottom: 20px;

    font-size: 14px;

    font-weight: bold;
}

.meeting-row {

    background: white;

    margin-bottom: 20px;

    padding: 0;

    direction: rtl;

    overflow: hidden;
}

.meeting-row .sickName {

    display: block;

    font-size: 16px;

    font-weight: bold;

    color: #51c2ff;

    line-height: 40px;
}

.meeting-row .bedName {

    vertical-align: middle;

    background: #eff7dd;

    padding: 2px 5px;

    border-radius: 10px;

    display: inline-block;
}

.meeting-row .roomName {

    vertical-align: middle;

    background: #ffdfd5;

    padding: 2px 5px;

    border-radius: 10px;

    display: inline-block;
}

.meeting-row .btn_play {

    border: none;

    background: #c0ecf7;

    display: block;

    width: 100%;

    line-height: 30px;

    border-radius: 0;

    border-top: none;

    color: black;
}

.meeting-row .btn_play .las {
    font-size: 18px;
    margin-bottom: 4px;
    vertical-align: middle;
    margin-left: 10px;
}

.so-hospital-filter-search {

    position: relative;
}

.meeting-row .meeting-row-info {

    padding: 10px;

    height: 80px;

    background: #ffffff;
}

.so-panel-play {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
}

.so-panel-play video {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
}


.so-menu-container1 {

    font-size: 0;

    text-align: center;

    direction: rtl;

    text-align: center;

    color: white;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin: 10px;

    flex-wrap: wrap;

    overflow: auto;

    background: var(--light);

    border-radius: 30px 30px 0 0;

    padding: 20px 20px 0 20px;

    clear: both;
}

.so-menu-btn1 {

    display: inline-block;

    vertical-align: middle;

    min-height: 90px;

    font-size: 11px;

    background: none;

    border: none;

    margin: 1px;

    color: black;

    margin-bottom: 15px;

    padding: 0;

    text-align: center;

    vertical-align: top;

    text-decoration: none;

    max-width: 90px;
}

.so-menu-icon1 {

    width: 25vw;

    max-width: 120px;

    height: 60px;

    background: white;

    display: block;

    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important;

    margin: 0px auto;

    border-radius: 8px;

    margin-bottom: 5px;

    max-width: 100%;
}

.so-menu-btn1:hover {

    text-decoration: none;
}

.so-menu-btn1:hover .so-menu-icon1 {
    box-shadow: none;

}

.so-menu-btn1 .las {

    font-size: 40px;

    line-height: 60px;

    color: var(--green);
}

.so-menu-icon1 img {
    width: auto;
    height: 50px;
    margin-top: 3px;
    max-width: 100%;
}

.so-menu-btn1 .so-title {

    line-height: 15px;

    font-size: 10px;

    font-weight: bold;

    padding: 0;

    margin: 0;

    display: block;

    color: #75997d;
}


.input-container2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 20px;
}

.character-input2 {
    font-family: 'Courier New', Courier, monospace;
    font-size: 24px;
    text-align: center;
    border: none;
    outline: none;
    width: 30px;
    height: 50px;
    margin: 0 5px;
    border-radius: 5px; /* Change to 50% for circular boxes */
    border: 2px solid rgb(7, 77, 123);
    background-color: transparent;
}

.character-input2:focus {
    outline: none;
    border: 2px solid rgb(18, 166, 215);
}

.login-input-underline::-moz-selection {
    background: none;
    color: red;
}