body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 54px;
    max-width: 54px;
    height: 28px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0 !important;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 3px;
}

input:checked+.slider {
    background-color: #2196F3;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

form.NewMajles {
    max-width: unset;
    margin: 1rem 0;
}

form.NewMajles input,
select,
textarea {
    max-width: unset;
}

form.NewMajles .form-group {
    max-width: unset;
    margin-bottom: unset;
}

form.NewMajles .btn {
    display: unset;
    height: 40px !important;
    margin: 0 1rem;
}

form.NewMajles ul {
    padding: 0;
}

.form-group.justify-content-around {
    max-width: unset;
}


.form-group.justify-content-around .btn {
    width: 180px;
    display: unset;
    margin: .5em 0;
}

.form-select {
    background-position: left .75rem center !important;
    font-family: MSFont !important;
    letter-spacing: -.014rem;
}

.form-select option {
    font-family: MSFont !important;
}

.leaflet-popup-content {
    font-family: MSFont !important;
}

.chosen-container-multi .chosen-choices {
    border: 1px solid #ced4da !important;
    background: none !important;
}

.chosen-container-multi .chosen-choices li.search-choice {
    border-radius: 5px !important;
    border: 1px solid #aaa !important;
    color: forestgreen !important;
    line-height: 20px !important;
    background: none !important;
}

.chosen-rtl .chosen-choices li.search-choice {
    padding: 3px 20px 3px 5px !important;
}

.chosen-rtl .chosen-choices li.search-choice .search-choice-close {
    right: 4px !important;
    top: 8px !important;
    left: auto !important;
}


.checkb {
    text-align: center;
    margin: 0;
    clear: both;
    /*height: 4rem;*/
    display: inherit;
    justify-content: center;
    align-items: center;
    direction: rtl;
}

img[onclick] {
    cursor: pointer;
}

#textEl {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}

div.AddToHomeScreenModal {
    width: 100%;
    height: 100%;
    display: block;
    background: #c4cddc;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 99999;
    direction: rtl;
    padding: 30px 20px;
}

div.AddToHomeScreenModal .btn {
    display: initial;
    margin: 0 !important;
    width: 100% !important;
}

.Container {
    margin: 10px;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.LogoImageContainer {
    width: 72px;
    height: 72px;
    border-radius: 13px;
    box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.16);
    background-color: #A80000;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    margin: auto;
}

.image {
    width: 64px;
}

.HelpSection {
    margin: 50px 0;
    background-color: white;
    padding: 15px;
    border-radius: 6px;
    text-align: justify;
}

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

.row:hover {
    box-shadow: none !important;
}

.btn {
    display: unset;
    height: 40px !important;
    margin: 0 1rem;
    padding: .375rem 3.5rem !important;
    width: unset !important;
}

.form-check .form-check-input {
    float: right;
    margin-left: unset;
}

.form-check-input {
    width: 1em !important;
    height: 26px !important;
}

.form-check-label {
    max-width: unset;
}

.ltr {
    direction: ltr !important;
}

.leaflet-popup-content {
    text-align: right;
    direction: rtl;
}

.blink_me {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.card-img-top {
    max-height: 229px;
    min-height: 229px;
    object-fit: cover;
}

textarea.form-control {
    min-height: calc(1.5em + .75rem + 120px);
}

div.popover {
    direction: ltr;
}

@media (min-width: 768px) {
    .list-group-horizontal-md>.list-group-item:first-child {
        border-bottom-right-radius: .25rem;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-top-right-radius: .25rem;
    }

    .list-group-horizontal-md>.list-group-item:last-child {
        border-top-left-radius: .25rem;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: .25rem;
        border-top-right-radius: 0;
    }

    .list-group-horizontal-md>.list-group-item+.list-group-item {
        border-top-width: 1px;
        border-right-width: 0;
        border-left-width: 1px;
    }
}

.list-group-horizontal-md .form-check-input {
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
}

.list-group-horizontal-md label {
    padding: 0 .5em !important;
}

.diagonal-box {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(45deg, #05bb65, #5c00ff);
    transform: skewY(-45deg);
    width: 100px;
    height: 35px;
    color: #fff;
    font-weight: bold;
}

.content {
    margin: 0;
    padding: 5px 50px;
    position: relative;
}

.modal-header .btn-close {
    margin: -.5rem auto -.5rem -.5rem !important;
}

.w-100 {
    max-width: unset !important;
}

.btn-footer {
    color: #fff !important;
    padding: 0 1rem;
    white-space: nowrap;
}

.menu {
    white-space: nowrap;
}

@media (max-width: 576px) {
    nav .btn {
        margin: 0 .1rem !important;
    }
}

@media (max-width: 400px) {
    nav .btn {
        margin: 0 .25rem !important;
    }
}

@media (max-width: 867px) {
    nav .btn {
        margin: 0 .28rem !important;
    }
}

@media (max-width: 855px) {
    .hidden-tablet {
        display: none;
    }
}

@media (max-width: 576px) {
    .table-responsive td {
        display: revert !important;
    }
}

.d-blockruby {
    display: block ruby;
    text-align: center;
}

#preview {
    width: 680px;
    padding: 1px 1rem;
    margin: auto;
}

.poster {
    /*    position: relative;*/
    width: 600px !important;
    /*    min-height: 900px;*/
    font-family: 'Estedad';
    word-spacing: normal !important;
    letter-spacing: normal !important;
    text-align: justify;
}

.poster>p,
.poster .title,
.poster .maintext>p,
.poster .maintext>p b,
.poster .people>p,
.poster>span,
.poster .ab>span,
.poster .times>span,
.poster>div,
.poster .text-muted,
.poster .address,
.poster .zirnevis,
.poster .address>div,
.poster div,
.poster>a,
.poster .maintext>b,
.poster>b {
    word-spacing: normal !important;
    letter-spacing: normal !important;
}

.poster .bg-1 {
    border: .5rem #144324 solid;
    border-bottom: 1.3rem #144324 solid;
    border-radius: 1rem;
    background-color: #1443240a;
}

.poster .bg-2 {
    border: .5rem #000 solid;
    border-bottom: 1.3rem #000 solid;
    border-radius: 1rem;
    background-color: #0000000a;
}

.poster .bg-3 {
    border: .5rem #f7e400 solid;
    border-bottom: 1.3rem #f7e400 solid;
    border-radius: 1rem;
    background-color: #f7e4000a;
}

.poster .bg-4 {
    border: .5rem #800d00 solid;
    border-bottom: 1.3rem #800d00 solid;
    border-radius: 1rem;
    background-color: #800d000a;
}

.poster .bg-5 {
    border: .5rem #011993 solid;
    border-bottom: 1.3rem #011993 solid;
    border-radius: 1rem;
    background-color: #0119930a;
}

.poster div.flag {
    height: 570px;
    position: absolute;
}

.poster img.flag {
    width: 150px;
    position: absolute;
    top: -10px;
    height: 570px;
}

.poster .logo {
    width: 100px;
    position: absolute;
    right: 23px;
    bottom: 190px;
}

.poster .maintext {
    padding: 0 1rem;
    /*        max-height: 400px;*/
    margin-top: 1rem;
    /*        width: 100%;*/
    /*        overflow: hidden;*/
}

.poster .people {
    text-align: center;
}

.poster .people .title {
    height: 40px;
    position: relative;
    background-color: darkgreen;
    text-align: center;
    font-weight: bold;
    margin: 1rem 6rem 0 !important;
    padding: .5rem .5rem;
    color: white;
    font-family: 'Arabic UI Display';
    width: fit-content;
}

.poster .people .title:after {
    content: "";
    position: absolute;
    left: -20px;
    bottom: 0;
    width: 40px;
    height: 40px;
    border-left: 20px solid darkgreen;
    border-radius: 50%;
}

.poster .people .title:before {
    content: "";
    position: absolute;
    right: -20px;
    bottom: 0;
    width: 40px;
    height: 40px;
    border-right: 20px solid darkgreen;
    border-radius: 50%;
}

.poster .people p {
    color: green;
    /*font-family: 'Arabic UI Display';*/
    font-size: x-large;
    margin: 0;
    word-spacing: normal !important;
    letter-spacing: normal !important;
}

.poster .ab {
    height: 40px;
    position: relative;
    background-color: darkred;
    text-align: center;
    font-weight: bold;
    margin: 1rem 3rem !important;
    padding: .3rem 1rem;
    color: white;
    font-family: 'IBM Plex Sans Arabic';
    font-size: large;
    width: fit-content;
}

.poster .ab:after {
    content: "";
    position: absolute;
    left: -20px;
    bottom: 0;
    width: 0;
    height: 0;
    border-right: 20px solid darkred;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}

.poster .ab:before {
    content: "";
    position: absolute;
    right: -20px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid darkred;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}

.poster .bg-1 .ab {
    background-color: #144324 !important;
}

.poster .bg-1 .ab:after {
    border-right-color: #144324 !important;
}

.poster .bg-1 .ab:before {
    border-left-color: #144324 !important;
}

.poster .bg-2 .ab {
    background-color: #000 !important;
}

.poster .bg-2 .ab:after {
    border-right-color: #000 !important;
}

.poster .bg-2 .ab:before {
    border-left-color: #000 !important;
}

.poster .bg-3 .ab {
    background-color: #f7e400 !important;
}

.poster .bg-3 .ab:after {
    border-right-color: #f7e400 !important;
}

.poster .bg-3 .ab:before {
    border-left-color: #f7e400 !important;
}

.poster .bg-4 .ab {
    background-color: #800d00 !important;
}

.poster .bg-4 .ab:after {
    border-right-color: #800d00 !important;
}

.poster .bg-4 .ab:before {
    border-left-color: #800d00 !important;
}

.poster .bg-5 .ab {
    background-color: #011993 !important;
}

.poster .bg-5 .ab:after {
    border-right-color: #011993 !important;
}

.poster .bg-5 .ab:before {
    border-left-color: #011993 !important;
}

.poster .address {
    background-color: #fff;
    border-radius: 1rem;
    text-align: center;
    padding: 1rem;
    border: #eee solid 2px;
    box-shadow: 0 0 10px #999;
    /*font-family: 'IBM Plex Sans Arabic';*/
    font-weight: bold;
    margin-bottom: 1rem;
}

.poster .times {
    /*color: #3399ff;*/
    color: navy;
    font-weight: bold;
    /*font-family: MSFont !important;
        text-shadow: 0 0 10px;*/
    /*font-family: 'Arabic UI Display';*/
    /*text-shadow: none;*/
    margin: 1.5rem 1rem 1rem;
    text-align: center;
    border-radius: .5rem;
    border: 1px solid cadetblue;
    background: #fff;
    padding: .5rem 0;
    position: relative;
}

.poster .times::before {
    border-top: 1px solid #fff;
    width: 3.2rem;
    content: ' ';
    position: absolute;
    top: -1px;
    right: .5rem;
}

.poster .times::after {
    content: '🔔 زمان';
    position: absolute;
    top: -0.92rem;
    right: .55rem;
    text-shadow: none;
    /*text-shadow: -2px -2px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff;*/
    color: cadetblue;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    font-family: 'IBM Plex Sans Arabic';
}

.poster .zirnevis {
    border-top: 2px #eee solid;
    text-align: center;
    padding: .5rem;
    margin-bottom: 1rem;
}

.poster .col-9 {
    min-height: 570px;
}

.poster .copyright {
    color: #fff;
    font-family: 'IBM Plex Sans Arabic';
    font-size: small;
    font-weight: bolder;
    margin-top: -21px;
}

.poster .copyright span {
    /*            padding: 0 .5em;*/
    margin: 0 .3em;
    /*            background-color: #fff;*/
}

.set-logo {
    text-align: center;
    background-color: #a800000a;
    margin-top: 1rem;
    border-radius: 1rem;
}

.set-logo:before {
    content: "تنظیم علامت";
    width: 100%;
    display: block;
    padding: 1rem;
}

.set-logo img {
    height: 100px;
    margin: 1rem;
    border: #a80000 solid 1px;
    width: 100px;
    border-radius: .5rem;
    padding: 1rem;
    cursor: pointer;
    background-color: #fff;
}

.set-logo img:hover {
    background-color: #a800000a;
}

.set-flag {
    text-align: center;
    background-color: #1987540a;
    margin-top: 1rem;
    border-radius: 1rem;
}

.set-flag:before {
    content: "تنظیم پرچم";
    width: 100%;
    display: block;
    padding: 1rem;
}

.set-flag img {
    margin: 1rem;
    border: 1px #198754 solid;
    width: 100px;
    border-radius: .5rem;
    padding: 1rem;
    cursor: pointer;
    background-color: #fff;
}

.set-flag img:hover {
    background-color: #1987540a;
}

.dashboard {}

.dashboard .menu {
    /*        background-color: #a80000;
        color: #fff;
        padding-top: 1rem;
        border-radius: 1rem;
        margin-bottom: 1rem;
        text-align: center;
        display: initial;
        white-space: initial;*/
    color: #fff;
    padding-top: 1rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
    text-align: center;
    display: initial;
    white-space: initial;
    background-color: #000;
    clear: both;
    background-image: url(/res/bg-menu.png);
    background-size: 60px;
}

.dashboard .menu .btn {
    display: block !important;
    margin: .3rem !important;
    padding: .4rem !important;
    height: auto !important;
    color: #fffd;
    background-color: #e8e8e8;
    background: rgb(255, 255, 255);
    background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .35) 100%);
    transition: all .7s;
    font-size: 1rem;
    font-weight: bold;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    text-shadow: 0 0 5px #0009;
    border: 1px solid #fff1;
    text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
}

@media (min-width: 767px) {
    .dashboard .menu .btn {
        width: 100% !important;
    }
}

@media (max-width: 576px) {
    .poster .row {
        flex-direction: row;
    }

    .poster .row:first-child {
        border-radius: 1rem;
        margin: 0;
    }

    .set-flag img {
        margin: 1rem 0;
    }

    .poster .copyright {
        margin-right: 10px;
        margin-left: 10px;
    }
}

.leaflet-popup-content {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.has-error {
    box-shadow: 0 0 .3rem red;
}

text {
    font-family: MSFont !important;
}

.btn-icon {
    font-size: 1.5rem;
}

.btn-outline-danger {
    color: #a80000;
    border-color: #a80000;
}

.btn-outline-danger:hover {
    color: #fff;
    background-color: #a80000;
    border-color: #a80000;
}

.btn-check:active+.btn-outline-danger,
.btn-check:checked+.btn-outline-danger,
.btn-outline-danger.active,
.btn-outline-danger.dropdown-toggle.show,
.btn-outline-danger:active {
    color: #fff;
    background-color: #a80000;
    border-color: #a80000;
}

.cel-video {
    width: 100% !important;
    background-color: #000;
}

.cel-video iframe {
    height: unset !important;
    min-height: 10.5rem !important;
}

@media (max-width: 768px) {
    .cel-video iframe {
        min-height: 18.5rem !important;
    }
}

.cel-video-title {
    margin: 0 auto 2rem;
    font-size: unset !important;
    padding: unset !important;
    width: 100%;
    text-align: center;
    text-shadow: none !important;
    background: url(bg-header.png) #8a0000 no-repeat center -10rem;
    color: #fff;
}

.live .text-left {
    display: grid !important;
}

.live .text-left a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#goTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    /* Hidden by default */
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 50%;
    padding: 15px;
    cursor: pointer;
    z-index: 1000;
    /* Ensure it's above other elements */
}

#goTopBtn:hover {
    background-color: #0056b3;
}

.NewMajles .row {
    --bs-gutter-x: 0 !important;
}

.form-control::placeholder {
  color: #6c757d91;
  opacity: 1;
  font-size: 10pt;
}

.NewMajles .form-group:last-child {
  justify-content: right !important;
}

nav {
  display: flex !important;
}