/* Active link styling */
 .active {
     top: 135px;
     left: 1167px;
     padding: 13px 18px 13px 0px;
     gap: 12px;
     opacity: 0px;
     background: #2E409B;
     color: #dee2e6;
 }

 .type_image {
     border: 1px solid !important;
     padding: 10px !important;
     box-shadow: 5px 10px #EAEAEA !important;
 }

 .old_design {
     display: none !important;
 }

 .new_design {
     display: none !important;
 }

 table {
     border-collapse: separate !important;
     border-radius: 14px !important;
     border: 0.5px solid #7090B066 !important;
 }

 .table th,
 .table td {
     border-top: 0px !important;
 }

 .table td,
 .table th {
     width: 16.66%;
     /* Divides the table into equal columns */
     text-align: center;
     vertical-align: middle;
 }

 .table thead th {
     border-bottom: 0px !important;
 }

 footer {
     max-width: 83% !important;
     width: 100% !important;
     margin-left: 24px !important;
     border-radius: 19px 19px 19px 19px;

 }

 .footer-container {
     margin-left: 24px !important;
     max-width: 98% !important;

 }

 .short-text {
     margin-right: 78% !important;
 }

 .long-text {
     margin-right: 64% !important;
 }

 .menu-text-close {
     display: none !important;
 }

 .logo-menu-close {
     opacity: 0;
 }

 #logo-menu {
     margin-left: 79px !important;
 }

 input::placeholder {
     text-align: right;
 }

 .logo-menu-close-side {
     opacity: 0;
 }

 .sidebar-toggler {
     position: absolute;
     top: 54px;
     right: 14rem;
     cursor: pointer;
     font-size: 24px;
     z-index: 1100;
     color: #333;
 }

 .sidebar-toggler-open {
     position: absolute;
     top: 52px;
     right: 31px;
     cursor: pointer;
     font-size: 24px;
     z-index: 1100;
     color: #333;
 }

 .sidebar a:hover {
     color: black;
     font-size: 16px;
     font-weight: 500;

 }

 .create_notification_cards:hover {
     box-shadow: 1px 8px 20px grey;
     -webkit-transition: box-shadow .6s ease-in;
 }

 /* .font-weight-bold:hover {
    color: black;
    font-size: 20px;
    font-weight: 500;

} */

 .footer-mobile {
     background-color: var(--Color-Primary, #2F43A5);
     color: #FFFFFF;
     padding: 1rem 0;
     position: relative;

 }

 .eml-ph {
     font-family: "Cairo";
     font-size: 16px;
     font-weight: 400;
     line-height: 29.98px;
     text-align: left;

 }

 .panel-but:hover {
     border: 2px solid var(--Color-Primary, #F19A01);
     border-radius: 50%;
 }

 .custom-control-input:checked~.custom-control-label::before {
     background-color: #2AA371;
     border-color: #2AA371;
 }

 .btn-primary {
     color: #fff;
     background: linear-gradient(90deg, #334BC0 0%, #2A387E 100%) !important;
     border-color: #357ebd;
     /*set the color you want here*/
 }

 .btn-primary:hover,
 .btn-primary:focus,
 .btn-primary:active,
 .btn-primary.active,
 .open>.dropdown-toggle.btn-primary {
     color: #fff;
     background-color: #00b3db;
     border-color: #285e8e;
     /*set the color you want here*/
 }

 .btn-info {
     color: #fff;
     background-color: linear-gradient(90deg, #334BC0 0%, #2A387E 100%);
     border-color: #357ebd;
     /*set the color you want here*/
 }

 .btn-info:hover,
 .btn-info:focus,
 .btn-info:active,
 .btn-info.active,
 .open>.dropdown-toggle.btn-info {
     color: #fff;
     background-color: #00b3db;
     border-color: #285e8e;
     /*set the color you want here*/
 }

 .active {
     width: 100% !important;
 }

 .active-padding {
     border-radius: 14px 0px 0px 14px;
 }

 /* Responsive styling */
 @media (max-width: 767.98px) {
     .sidebar {
         position: static;
         width: 100%;
         height: auto;
         padding: 16px;
         border-bottom: 1px solid #dee2e6;
     }
 }

 .sidebar-me {
     font-size: 16px;
     font-weight: 400;
     line-height: 23.52px;

 }

 .logo {
     width: 97.7px;
     height: 63px;
     top: 24px;
     left: 1261px;
     gap: 0px;
     opacity: 0px;

 }

 .sidebar {
     position: fixed;
     top: 0;
     right: 0;
     height: 100%;
     background-color: #f8f9fa;
     width: 261px;
     padding-right: 0;
 }

 .sidebar1 {
     border-left: 0px solid #dee2e6;
     position: fixed;
     top: 0;
     right: 0;
     height: 100%;
     width: 285px;

 }

 .profile {
     width: 40px;
     height: 40px;
     gap: 0px;
     opacity: 0px;

 }

 .nav {
     width: 100%;
     gap: 0px;
     border-radius: 17px 0px 0px 0px;
     opacity: 1;
 }


 nav.guest-navbar {
     width: auto;
 }

 #navbarSupportedContent {
     float: right;
     margin-right: 5%;
     margin-left: 4rem;

 }

 ul.navbar-nav.user_menu {
     margin-left: 0 !important;
 }

 .top_right_page_title-close {
     margin-right: 1%;
 }

 @media (min-width: 1366px) {}


 @media (max-width: 400px) {

     .sidebar-toggler-open {
         display: none !important;
     }

     .sidebar-toggler-close {
         display: none !important;
     }

 }

 .sidebar-toggle {
     display: none !important;
     /* Hidden by default, will be shown in mobile view */
 }

 button.close {
     float: left;
     width: 24px;
     height: 24px;
     padding: 3px;
     gap: 0px;
     opacity: 0px;
 }

 .alert svg,
 .alert i {
     float: right;
     width: 30px !important;
     height: 30px !important;
     padding: 3px !important;
     gap: 0px !important;
     opacity: 0px !important;
 }

 .alert p {
     float: right;
     color: var(--Color-Big-Title, #202327);

 }

 .altum-animate-fill-both {
     height: 76px !important;
     padding: 16px !important;
     gap: 16px !important;
     border-radius: 8px !important;
     border: 1px !important;
     opacity: 0px !important;
     border: 1px solid var(--Color-green, #33A36D) !important;
     margin-top: 40px !important;
 }

 .mt-custom {
     margin-top: 2.5rem !important;
 }

 @media (min-width: 1835px) {

     section.container,
     .section.container-fluid {
         max-width: 83% !important;
         width: 100%;
         margin-left: 24px !important;

     }
 }

 @media (min-width: 1400px) and (max-width: 1800px) {

     .header-card,
     .header-body {
         font-size: 12px;
     }

     .icon-card {
         width: 70px;
         height: 70px;
         top: 30.03px;
         left: -23px;
         gap: 0px;
         opacity: 0px;
         margin-left: 9%;
         position: absolute;
         margin-top: -13%;
     }

     .cards.create_notification_cards .custom-radio-box-main-icon {
         font-size: 20px;
     }

     .cards.create_notification_cards .custom-radio-box-main-icon {
         font-size: 20px;
     }

     .svg {
         width: 30px !important;
         height: 30px !important;
         top: 44px !important;
         left: 3px !important;
     }

     .sidebar {
         position: fixed;
         top: 0;
         right: 0;
         height: 100%;
         background-color: #f8f9fa;
         width: 233px;
         padding-right: 0;
     }

     .sidebar-me {
         font-size: 14px;
         font-weight: 400;
         line-height: 23.52px;
     }

     .font-weight-bold {
         font-weight: 500 !important;
     }

     .sidebar1 {
         border-left: 0px solid #dee2e6;
         position: fixed;
         top: 0;
         right: 0;
         height: 100%;
         width: 262px;
     }

     .logo {
         width: 71.7px;
         height: 49px;
         top: 24px;
         left: 1261px;
         gap: 0px;
         opacity: 0px;
         margin-left: 5rem;
     }

     #navbarSupportedContent {
         float: right;
     }

     .navbar-expand-lg {
         height: 6rem;

     }

 }

 .statistcs_cards .cards {
     height: auto !important;
 }

 @media (max-width: 1380px) {
     .collapse {
         margin-left: 61% !important;
     }

     .nav.navbar .collapse#navbarSupportedContent {
         margin-left: 2% !important;
     }
 }


 @media (min-width: 1200px) {

     .container-xl,
     .container-lg,
     .container-md,
     .container-sm,
     .container {
         max-width: 1140px;
         /* background: red; */
         margin-right: 16%;
     }

     .header-notifactons {
         margin-left: 42.2%;
     }

 }


 .login-mobile-but {
     width: 48px !important;
     height: 48px !important;
     margin-top: -8rem;
 }

 @media(min-width:800px) {
     .login-mobile {
         display: none !important;
     }

     .aos-butt {
         margin-right: 28rem !important;
     }
 }


 @media(max-width: 770px) {
     .login-web {
         display: none !important;
     }

     #whatsapp-form-container .collapse {
         margin-left: 0 !important;
     }

 }

 @media(max-width: 765px) and (min-width:501px) {
     .container-close-sidebar {
         margin-left: 0%;
         font-size: 16px;
         width: 100%;
     }

     iframe {
         width: auto !important;
         height: auto !important;
     }

     .navbar-nav .dropdown-menu {
         position: absolute;
         float: none;
     }

     .collapse:not(.show) {
         display: flex;
     }

     ul.navbar-nav.user_menu {
         margin-left: -72px !important;
     }

     .font-weight-bold {
         margin-top: 1rem !important;
     }

 }

 @media(width: 768px) {
     .header-notifactons {
         margin-left: 22.2%;
     }

     #navbarSupportedContent1Small {
         max-width: 100% !important;
     }

     .sidebar-toggler {
         position: absolute;
         top: 67px;
         right: 6%;
         cursor: pointer;
         font-size: 24px;
         z-index: 1100;
         color: #333;
     }


     .nav {
         gap: 0px !important;
         border-radius: 17px 0px 0px 0px;
         opacity: 1;
         width: 103%;
     }

     .sidebar1 .active {
         margin-top: 20%;

     }

     .sidebar1 {
         display: none !important;

     }

     .sidebar {
         display: none !important;

     }

     .container-close-sidebar {
         font-size: 16px !important;
         width: 100% !important;
     }


     .navbar-nav .dropdown-menu {
         position: absolute;
         float: none;
     }

     .collapse:not(.show) {
         display: flex;
     }

     ul.navbar-nav.user_menu {
         margin-left: -72px !important;
     }

     .font-weight-bold {
         margin-top: 1rem !important;
     }

     .alert p {
         float: right;
         color: var(--Color-Big-Title, #202327);
         font-size: 10px;
     }

     .altum-animate-fill-both {
         height: 61px !important;
         padding: 16px !important;
         gap: 16px !important;
         border-radius: 8px !important;
         border: 1px !important;
         opacity: 0px !important;
         border: 1px solid var(--Color-green, #33A36D) !important;
     }

     .alert svg,
     .alert i {
         float: right;
         width: 22px !important;
         height: 22px !important;
         padding: 3px !important;
         gap: 0px !important;
         opacity: 0px !important;
     }

     .label-text {
         font-family: "Cairo", sans-serif !important;
         font-size: 18px;
         font-weight: 800;
         line-height: 26.46px;
         margin-left: 0rem !important;

     }

     .closebtn {
         position: sticky;
         top: 0;
         font-size: 29px;
         margin-left: 18px;
         color: black;

     }

     .active {
         top: 135px;
         left: 1167px;
         padding: 13px 18px 13px 0px;
         gap: 12px;
         opacity: 0px;
         background: #2E409B;
         color: #dee2e6;
         border-radius: 8px !important;
     }

     .pagination {
         display: flex;
         padding-left: 0;
         list-style: none;
         border-radius: .25rem;
         width: 6rem;
     }

 }

 @media(max-width: 500px) {

     #top-nav-bar {
         height: 80px;
     }

     iframe {
         width: auto !important;
         height: auto !important;
     }

     iframe#qrIframe{
         width: 100% !important;
         height: 100% !important;
     }

     .footer {
         margin: 3rem 0 0 0;
         padding-top: 1rem;
         padding-bottom: 3rem;
         background: var(--white);
     }

     .td-mobile {
         white-space: nowrap;
     }

     .card-body table tr td {
         font-size: 10px;
     }

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

     .table th,
     .table td {
         padding: 0.3rem;
         padding-top: 0.5rem;

     }

     .custom-switch {
         padding-left: 1.25rem;
         font-size: 14px;
     }

     small,
     .small {
         font-size: 65%;
         font-weight: 400;
     }

     .shadow-none {
         padding: 0rem !important;
         right: 0.5rem !important;
     }

     .dir {
         direction: rtl !important;
     }

     .nav-tabs {
         display: flex;
         justify-content: space-around;
         align-items: self-start;
         align-content: space-between;
         width: 100% !important;
         flex-wrap: wrap-reverse;
     }

     #myTab {
         width: 100% !important;
     }

     .nav-item {
         flex: 1 0 auto;
         font-size: 12px;
         /* Ensure tabs can grow and shrink */
     }

     .nav-item.active {
         margin-right: auto;
         /* Push the active tab to the start */
     }

     .altumcode-live-counter-wrapper {
         margin-left: 4rem;

     }

     .modal-dialog {
         display: flex;
         justify-content: center;
         align-items: center;
         min-height: calc(100% - 1rem);
     }

     .modal-content {
         width: 100%;
         max-width: 500px;
         /* Adjust as needed */
     }

     .tdMobile {
         width: 109px;
         font-size: 11px;

     }

     .notification-create-preview-normal {
         position: inherit;
         left: 15%;
         bottom: 20px;
         z-index: 100;
     }

     .header-notifactons {
         margin-left: 22.2%;
     }


     .sidebar-toggler {
         position: absolute;
         top: 36px;
         right: 6%;
         cursor: pointer;
         font-size: 24px;
         z-index: 1100;
         color: #333;
     }


     .nav {
         gap: 0px !important;
         border-radius: 17px 0px 0px 0px;
         opacity: 1;
     }

     .sidebar1 .active {
         margin-top: 20%;

     }

     .sidebar1 {
         display: none !important;

     }

     .sidebar {
         display: none !important;

     }

     .container-close-sidebar {
         font-size: 16px !important;
         width: 100% !important;
     }

     .site-center-aligned {
         font: 12px Roboto, Arial, sans-serif;
         background-color: rgb(255, 255, 255);
         color: #fff;
         height: 100%;
         width: 92%;
         overflow: hidden;
         position: absolute;
         margin: 0;
         padding: 0;
     }

     .navbar-nav .dropdown-menu {
         position: absolute;
         float: none;
     }

     .collapse:not(.show) {
         display: flex;
     }

     .link-mobile {
         font-size: 10px;
     }

     ul.navbar-nav.user_menu {
         margin-left: -72px !important;
     }

     .font-weight-bold {
         margin-top: 1rem !important;
     }

     .font-weight-bold-mobile {
         margin-top: -1rem !important;
     }

     #dropdown-trigger {
         margin-top: 0rem !important;
         margin-left: 4.5rem !important;
     }

     .footer-container {
         margin-left: 1rem !important;
         max-width: 100% !important;
         padding-right: 10% !important;
     }

     .footer-container .st-mobile {
         line-height: 28px;
     }

     .alert p {
         float: right;
         color: var(--Color-Big-Title, #202327);
         font-size: 10px;
     }

     .altum-animate-fill-both {
         height: 61px !important;
         padding: 16px !important;
         gap: 16px !important;
         border-radius: 8px !important;
         border: 1px !important;
         opacity: 0px !important;
         border: 1px solid var(--Color-green, #33A36D) !important;
     }

     .alert svg,
     .alert i {
         float: right;
         width: 22px !important;
         height: 22px !important;
         padding: 3px !important;
         gap: 0px !important;
         opacity: 0px !important;
     }

     .label-text {
         font-family: "Cairo", sans-serif !important;
         font-size: 18px;
         font-weight: 800;
         line-height: 26.46px;
         margin-left: 0rem !important;

     }

     .closebtn {
         position: sticky;
         top: 0;
         font-size: 29px;
         margin-left: 18px;
         color: black;

     }

     .active {
         top: 135px;
         left: 1167px;
         padding: 13px 18px 13px 0px;
         gap: 12px;
         opacity: 0px;
         background: #2E409B;
         color: #dee2e6;
         border-radius: 8px !important;
     }

     .pagination {
         display: flex;
         padding-left: 0;
         list-style: none;
         border-radius: .25rem;
         width: 6rem;
     }

     p.font-weight-bold.mt-5.font-weight-bold-mobile.existing-notification-title {
         font-size: 12px;
         margin-right: 15px;
         margin-top: -0.7rem !important;
     }

     #top_right_page_title {
         margin-right: 1rem !important;

     }

     .svg-fir {
         float: inline-end !important;

     }
 }

 @media(width: 1440px) {

     .container-close-sidebar {
         margin-left: 0%;
         font-size: 16px;
         width: 92%;
     }

     ul.navbar-nav.user_menu {
         margin-left: 152px !important;
     }

     .sidebar-toggler {
         position: absolute;
         top: 54px;
         right: 19%;
         cursor: pointer;
         font-size: 24px;
         z-index: 1100;
         color: #333;
     }
 }

 @media (min-width: 992px) {

     .mb-lg-0,
     .my-lg-0 {
         margin-bottom: 0 !important;
         margin-right: 9rem;
     }

     .container-close-sidebar {
         max-width: 91%;
         margin-left: 2rem;
     }
 }

 .tab-pane.active.show {
     opacity: 1;
 }

 a.nav-link.sidebar-me.active {
     opacity: 1;
 }

 #admin-impersonate-user .font-weight-bold:hover {
     font-size: 13px;
     color: #7290c1;
 }

 .logo-land {
     width: 97.7px !important;
     height: 63px !important;
 }

 .footer {
     padding-top: 0.5rem !important;
 }

 .more-button-login {
     width: 145px !important;
     height: 44px !important;
     padding: 10px 16px 10px 16px;
     gap: 10px;
     border-radius: 50px;
     opacity: 0px;
     margin-top: 1.5rem;
     background: #3E489E;
     font-family: DIN Next LT Arabic;
     font-size: 16px;
     font-weight: 700;
     line-height: 20px;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
 }



 section>div {
     flex: 1;
     padding: 0.5rem;
 }

 input[id="control_01"],
 input[id="control_02"],
 input[id="control_03"] {
     display: none;

     &:not(:disabled)~label {
         cursor: pointer;
     }

     &:disabled~label {
         color: hsla(150, 5%, 75%, 1);
         border-color: hsla(150, 5%, 75%, 1);
         box-shadow: none;
         cursor: not-allowed;
     }
 }

 .boxes {
     width: 340px;
     height: 232px;
     padding: 58px 10px 58px 10px;
     gap: 10px;
     border-radius: 11px;
     opacity: 0px;
     background: #F4F4F4;
 }

 input[type="radio"]:checked+label {
     background: rgb(235, 241, 238);
     color: hsla(215, 0%, 100%, 1);
     box-shadow: 0px 0px 20px hsla(120, 0%, 61%, 0.75);
     border: 1px solid #3E84F2;
     position: relative;

     &::after {
         font-family: "FontAwesome";
         content: "\f00c";
         position: absolute;
         top: -10px;
         right: -10px;
         font-size: 16px;
         color: white;
         background: #3E84F2;
         border-radius: 50%;
         height: 20px;
         width: 20px;
         line-height: 20px;
         text-align: center;
         box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
     }
 }

 .altumcode-close {
     color: #000 ;
     margin: 2px !important;
     position: absolute !important;
     left: 5px !important;
 }

 @media(min-width:800px) {
    .screen-mobile {
        display: none !important;
    }
}

@media(max-width: 899px) {
    .screen-web {
        display: none !important;
    }
}