* {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }

            a {
                text-decoration: none;
                transition: all .4s ease-in-out;
                color: inherit;
            }

            .btn-primary:not(:disabled):not(.disabled).active,
            .btn-primary:not(:disabled):not(.disabled):active,
            .show>.btn-primary.dropdown-toggle {
                color: #fff;
                background-color: var(--main);
                border-color: var(--main);
            }

            a,
            button,
            input[type="button"] {
                cursor: pointer;
                transition: all .5s ease-in-out;
            }

            a:focus,
            a:hover {
                text-decoration: none;
                color: inherit;
            }

            button {
                background: transparent;
                border: none;
            }

            button:focus {
                outline: none
            }

            .list-inline-item:not(:last-child),
            ul {
                margin-right: 0;
            }

            ul {
                padding-left: 0;
                padding-right: 0;
                transition: all .4s ease-in-out;
                margin: 0;
            }

            ul li {
                list-style-type: none
            }

             :focus {
                outline: none;
            }

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

            .text-right {
                text-align: right
            }

            .text-left {
                text-align: left
            }

            .padd-0 {
                padding-left: 0;
                padding-right: 0
            }

            table.dataTable {
                width: 100% !important;
            }

            .padd-5 {
                padding-left: 5px;
                padding-right: 5px
            }

            .sec-padd {
                padding-top: 50px;
                padding-bottom: 50px;
            }

            .sec-marg {
                margin-top: 75px;
                margin-bottom: 75px;
            }

            .pl-10 {
                padding-left: 10px;
            }

            .pr-10 {
                padding-right: 10px;
            }

            .pt-10 {
                padding-top: 10px;
            }

            .pb-10 {
                padding-bottom: 10px;
            }

            .pl-20 {
                padding-left: 20px;
            }

            .pr-20 {
                padding-right: 20px;
            }

            .pt-20 {
                padding-top: 20px;
            }

            .pt-100 {
                padding-top: 100px
            }

            .pb-20 {
                padding-bottom: 20px;
            }

            .ml-10 {
                margin-left: 10px;
            }

            .mr-10 {
                margin-right: 10px;
            }

            .mt-10 {
                margin-top: 10px;
            }

            .mb-10 {
                margin-bottom: 10px;
            }

            .ml-20 {
                margin-left: 20px;
            }

            .mr-20 {
                margin-right: 20px;
            }

            .mt-20 {
                margin-top: 20px;
            }

            .mb-20 {
                margin-bottom: 20px !important;
            }

            .m-20 {
                margin: 20px;
            }

            .p-15 {
                padding: 15px;
            }

            .r-0 {
                border-radius: 0 !important;
            }

            .p-0 {
                padding: 0 !important;
            }

            .f-b {
                font-weight: 600;
            }

            .mx-1 {
                margin-left: .25rem !important;
            }

            .ratting {
                color: #ccc;
                font-size: 14px;
            }

            .ratting span {
                color: #777;
                margin: 0 5px;
            }

            .ratting .active {
                color: var(--yellow)
            }

             :focus {
                box-shadow: none !important;
                border-color: inherit;
            }

            .d-none {
                display: none
            }

            .d-block {
                display: block
            }

            .owl-carousel {
                direction: ltr
            }

            .dropdown-toggle::after {
                display: none
            }

            .dropdown {
                display: inline-block;
            }

            .dropdown .dropdown-menu {
                float: none;
                text-align: start;
            }

            .dropdown .dropdown-toggle {
                position: relative;
                width: 40px;
                height: 36px;
                text-align: center;
                background-color: #eee;
                display: block;
                border-radius: 4px;
                line-height: 30px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }

            .dropdown .dropdown-toggle span {
                width: 17px;
                height: 2px;
                display: block;
                background: #6B6B6B;
                margin: 2px 0;
                transition: .4s all ease-in-out;
            }

            .dropdown.show .dropdown-toggle {
                background: var(--yellow);
            }

            .dropdown.show .dropdown-toggle span:first-child {
                transform: translateY(7px)rotate( -45deg);
                background: #fff;
            }

            .dropdown.show .dropdown-toggle span:nth-child(2) {
                display: none
            }

            .dropdown.show .dropdown-toggle span:last-child {
                transform: rotate( 45deg);
                background: #fff;
            }

            .dropdown-menu.show {
                box-shadow: 0 0 3px #ccc;
                border: navajowhite;
                padding: 0;
                border-radius: 5px;
                min-width: 92px;
                transform:none !important;
                left: 0 !important;
                right: 0;
                top: 41px !important;
            }

            .dropdown .dropdown-item {
                display: block;
                width: 100%;
                padding: 7px;
                clear: both;
                font-weight: 400;
                color: #555;
                text-align: inherit;
                white-space: nowrap;
                background-color: transparent;
                border: 0;
                border-bottom: 1px solid #ccc;
                font-size: 13px;
            }

            select.form-control:not([size]):not([multiple]) {
                height: auto;
            }

            input::-webkit-outer-spin-button,
            input::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }

            p {
                margin: 0;
            }

            .flex-grow-1 {
                flex-grow: 1
            }

            input[type=checkbox],
            input[type=radio] {
                position: relative;
                width: 20px;
                height: 20px;
                vertical-align: middle;
                transform: scale(.8);
            }

            input[type=checkbox]:before {
                top: 0;
                left: 0;
                width: 20px;
                height: 20px;
                border: 1px solid var(--main);
                content: "";
                position: absolute;
                background: var(--main);
                border-radius: 3px;
            }

            input[type=checkbox]:checked::after {
                background: transparent;
                border: 2px solid #fff;
                top: 0px;
                left: 7px;
                width: 7px;
                height: 15px;
                /* border: 1px solid #000; */
                content: "";
                position: absolute;
                border-top-color: transparent;
                border-left-color: transparent;
                transform: rotate(45deg);
            }

            input[type=radio]:before {
                top: 0;
                left: 0;
                width: 20px;
                height: 20px;
                border: 1px solid var(--yellow);
                content: "";
                position: absolute;
                background: #fff;
                border-radius: 50%;
            }

            input[type=radio]:checked::after {
                top: 50%;
                left: 50%;
                width: 12px;
                height: 12px;
                content: "";
                position: absolute;
                transform: translate(-50%, -50%);
                background: var(--yellow);
                border-radius: 50%;
            }

             :root {
                --main: #2B726F;
                --white: #ffffff;
                --gray: #6B6B6B;
                --text: #8A8A8A;
                --yellow: #FEDB3A;
            }

            .gray {
                color: #dddd;
            }

            .red-color {
                color: #EC2F2F
            }

            .black-color {
                color: #000000 !important;
            }

            .orange-color {
                color: var(--yellow)
            }

            .main-color {
                color: var(--main) !important;
            }

            .f-12 {
                font-size: 12px;
            }

            .grey-color {
                color: #999;
            }

            .font-18 {
                font-size: 18px;
            }

            .font-20 {
                font-size: 20px;
            }

            .font-11 {
                font-size: 11px;
            }

            .under-line {
                text-decoration: underline;
            }

            .po_R {
                position: relative;
                z-index: 1
            }

            .btn-main {
                display: block;
                background: var(--main);
                color: var(--white);
                padding: 0;
                border-radius: 5px;
                text-align: center;
                text-shadow: 0 0;
                line-height: 40px;
                height: 40px;
                padding: 0px 15px;
                white-space: nowrap;
            }

            .btn-yellow {
                background: var(--yellow);
                color: #fff;
            }

            .btn-main.btn-gray {
                background: #EEE;
                color: #555;
            }

            .btn-main-w {
                background: #fff;
                color: var(--main);
            }

            textarea {
                resize: none;
            }

            .j-b {
                justify-content: space-between;
            }

            .r-50 {
                border-radius: 50%;
            }

            .m-auto {
                margin: auto;
                display: table;
            }

            .star-rating {
                font-size: 35px;
                color: #aaa;
            }

            .star-rating .fa-star {
                color: #FFB119;
            }

            @font-face {
                font-family: "icon";
                src: url(../fonts/fontawesome-webfont.ttf);
            }

            @font-face {
                font-family: "myFont";
                src: url(../fonts/FontsFree-Net-URW-DIN-Arabic-1.ttf);
            }

            .sidenav {
                height: 100%;
                width: 250px;
                position: fixed;
                z-index: 1;
                top: 0;
                right: 0;
                background-color: #2B726F;
                transition: 0.5s;
                overflow-y: auto;
            }

            .sidenav .closebtn {
                position: absolute;
                top: 0;
                right: 25px;
                font-size: 36px;
                margin-left: 50px;
            }

            #main {
                transition: all .5s ease-in-out;
                margin-right: 250px;
            }

            .sideclosenav {
                right: -250px;
            }

            #main.mainclosenav {
                margin-right: 0;
            }

            #main .body-content {
                padding: 30px 3% 30px 11%;
            }

            body {
                direction: rtl;
                text-align: right;
                font-family: "myFont";
                word-spacing: 1px;
                background: #FCFCFC;
                color: #000000;
                font-size: 14px;
                overflow-x: hidden;
                position: relative
            }

            #main {
                background: #F6F6F6;
                min-height: 100vh
            }

            .header-index {
                padding: 25px 0;
                background-color: transparent;
                box-shadow: none
            }

            header {
                padding: 10px 0;
                position: relative;
                background-color: #FFFFFF;
                box-shadow: 2px 0px 3px 0px #EEE
            }

            header>img {
                position: absolute;
                top: -100%;
                z-index: -1
            }

            header>img:first-of-type {
                right: -13%;
            }

            header>img:last-of-type {
                left: -13%;
            }

            .the_logo {
                margin-inline-end: 25px;
            }

            .header-index .the_logo img {
                max-height: 100px;
            }

            .the_logo img {
                max-height: 70px;
                width: auto;
                height: auto;
            }

            .nav_link a {
                font-weight: bolder;
                color: #000;
                white-space: nowrap;
                margin: 0px 22px
            }

            .creat_login {
                flex-shrink: 0
            }

            .creat_login .btn-main {
                margin: 0px 10px;
            }

            .creat_login .btn-main:first-child {
                background-color: #fedb3a;
            }

            .creat_login .btn-main:last-of-type {
                border: 1px solid var(--white)
            }

            .header-index .the_languge {
                color: var(--white)
            }

            .the_languge {
                margin-right: 25px;
                color: #000000
            }

            .close_nav,
            .open_nav {
                display: none;
                cursor: pointer
            }

            .info_index:after {
                content: "";
                background-image: url(../imgs/Rectangle%204077.png);
                display: block;
                width: 50%;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-position: center center;
                height: 88vh;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -2;
            }

            .the_imgs_info>img:first-child {
                display: block;
                margin-right: auto;
                margin-left: 50px;
                margin-bottom: 100px;
                width: 300px;
                height: 570px;
            }

            .the_imgs_info>img:not(:first-child) {
                position: absolute;
                top: 100px;
                right: 40px;
                border-radius: 30px;
                width: 240px;
                height: 170px;
            }

            .the_imgs_info>img:nth-child(2) {
                top: 300px
            }

            .the_imgs_info>img:last-child {
                top: 40px;
                right: 60px;
                z-index: 10
            }

            .the_text_info {
                margin-left: 50px;
                margin-top: 70px
            }

            .the_text_info h1 {
                font-weight: bolder;
                font-size: 45px;
            }

            .the_text_info p {
                margin: 25px 0;
                color: var(--text);
                max-height: 90px;
                overflow: hidden;
            }

            .the_text_info a:nth-child(2) {
                color: #000000;
                background: transparent
            }

            .Our_advantages_box {
                border-radius: 10px;
                padding: 20px 10px;
                background-color: var(--white);
                margin: 10px 0px
            }

            .text_title {
                max-width: 640px;
                margin: 10px auto 25px;
                color: var(--text);
            }

            .Our_advantages_box p {
                color: var(--gray);
                max-height: 105px;
                overflow: hidden
            }

            .who_are_we_index:after {
                content: "";
                background-image: url(../imgs/Group%2016793.png);
                display: block;
                width: 40%;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-position: center center;
                height: 100%;
                position: absolute;
                right: 0px;
                top: 0px;
                z-index: -1;
            }

            .who_are_we_index .the_imgs_info>img:first-child {
                height: 500px;
                width: 265px;
                margin-top: 40px;
                margin-left: 50px;
                margin-bottom: 40px;
            }

            .who_are_we_index .the_text_info p {
                max-height: 125px
            }

            .who_are_we_index .the_text_info {
                margin-top: 90px
            }

            .all_Our_advantages>img {
                position: absolute;
                left: -25%;
                top: 0;
                z-index: -1;
            }

            .Application-pages {
                padding: 0px 80px
            }

            .owl_Application-pages .owl-item.active.center {
                border-radius: 10px;
                transform: scale(1);
                padding: 15px;
            }

            .owl_Application-pages .owl-item.active.center:after {
                content: '';
                background-image: url(../imgs/Group%2013050.png);
                width: 100%;
                height: 100%;
                position: absolute;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                display: block;
                top: 0;
                left: 0;
                z-index: -1
            }

            .owl_Application-pages .owl-item.active {
                transform: scale(.8);
                transition: .3s linear;
            }

            .outer_screen_download {
                background-color: var(--main);
                padding: 30px 0px;
                overflow: hidden
            }

            .outer_screen_download>img {
                position: absolute;
                top: 0;
                z-index: -1
            }

            .outer_screen_download>img:first-of-type {
                top: 10%;
                right: -13%
            }

            .outer_screen_download>img:last-of-type {
                left: -16%
            }

            .text_download {
                color: var(--white);
                margin-top: 60px
            }

            .img_download {
                margin-bottom: -290px;
                margin-top: 100px;
                transform: rotate(17deg);
            }

            .img_download img {
                width: 460px;
                height: 650px
            }

            .img_download img:first-child {
                transform: scale(0.8);
            }

            .img_download img:last-child {
                transform: scale(0.9);
            }

            .text_download p {
                max-height: 115px;
                overflow: hidden;
                margin: 35px 0
            }

            .the_link_download a {
                transform: scale(0.9);
            }

            .img_person_opinions {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                position: relative;
            }

            .all_Customer_opinions>img {
                position: absolute;
                bottom: -35%;
                left: -13%;
                z-index: -1
            }

            .item_Customer_opinions {
                padding: 30px 20px;
                background-color: var(--white);
                border-radius: 10px
            }

            .img_person_opinions img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }

            .img_person_opinions span {
                width: 40px;
                height: 40px;
                background-color: var(--main);
                border-radius: 50%;
                position: absolute;
                color: #FFFFFF;
                text-align: center;
                line-height: 40px;
                font-size: 20px;
                bottom: -10px;
                right: -10px
            }

            .text_person_opinions {
                color: var(--text);
                margin: 20px 0px;
                max-height: 100px;
                overflow: hidden;
                text-align: center;
            }

            .the_starts_opinions li {
                margin: 0px 2px;
                color: var(--gray)
            }

            .the_starts_opinions li.active {
                color: var(--yellow)
            }

            footer {
                padding: 20px 0px
            }

            footer:after {
                content: "";
                position: absolute;
                display: block;
                width: 100%;
                height: 100%;
                background-image: url(../imgs/footer_img.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
                top: 0px;
                left: 0px;
                z-index: -1
            }

            .logo_footer {
                max-height: 60px;
            }

            .text_info_footer {
                margin: 22px 0px;
                color: var(--gray);
                max-height: 100px;
                overflow: hidden;
            }

            .social_footer {
                font-size: 20px;
                color: var(--gray)
            }

            .social_footer li {
                margin-left: 20px
            }

            .t_l_footer {
                font-weight: bolder;
                margin: 20px 0
            }

            .under_footer {
                color: var(--gray)
            }

            .link_footer ul li {
                margin: 10px 0;
                color: var(--gray);
            }

            .link_footer ul li i {
                margin-left: 15px
            }

            .login-page .form-content {
                width: 500px;
                max-width: 100%;
                margin: 30px auto;
                padding: 30px;
                border-radius: 20px;
                color: var(--main);
                background: var(--white);
            }

            .form-group label {
                display: inline-block;
                margin-bottom: .5rem;
                font-weight: 600;
                color: var(--gray);
                font-size: 13px;
                margin-bottom: 10px;
            }

            .form-control {
                border: 1px solid #fbfbfb;
                padding: 12px;
                border-radius: 5px;
                background: #fbfbfb;
                font-size: 13px;
            }

            .form-control::placeholder {
                color: #BFBFBF;
            }

            input.form-control[readonly] {
                background-color: #fbfbfb;
                cursor: pointer
            }

            .form-content .btn-main {
                width: 100%;
            }

            .login-page .form-content h5 {
                font-size: 20px;
                color: var(--main);
                text-align: center;
                font-weight: 600;
            }

            .fasla>span {
                color: #000000;
                font-weight: bolder
            }

            .fasla:after,
            .fasla:before {
                content: "";
                display: block;
                flex-grow: 1;
                height: 1px;
                background-color: darkgrey;
            }

            .Ancillary-info-form {
                font-size: 10px;
                padding: 5px 0;
                display: block;
                color: var(--gray)
            }

            .form-create-account input[type=checkbox]:before {
                border: 1px solid var(--yellow);
                background: var(--yellow);
                border-radius: 2px;
            }

            .icone_po_A {
                position: absolute;
                left: 5px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 15px;
            }

            .show_password {
                position: absolute;
                left: 5px;
                top: 40px;
                font-size: 17px;
                color: var(--text);
                cursor: pointer;
            }

            .form-abs {
                position: absolute;
                left: 5px;
                top: 40px;
                font-size: 14px;
                color: var(--text);
                cursor: pointer;
            }

            .show_password:after {
                content: "\f06e";
                font-family: "FontAwesome";
            }

            .active.show_password:after {
                content: "\f070";
                font-family: "FontAwesome";
            }

            .outer-body-page {
                padding: 25px;
                background: #FFFFFF;
                border-radius: 15px;
                margin: 30px 0px;
            }

            .outer-body-page .the-title {
                border-radius: 10px;
                background-color: #F9F9F9
            }

            .outer-body-page p {
                line-height: 2;
                color: var(--text)
            }

            .condition_num:after {
                content: "";
                display: block;
                position: absolute;
                width: 28px;
                height: 2px;
                background: var(--main);
                border-radius: 20px;
                bottom: -15px;
                right: 0px;
            }

            .inear-common-questions {
                border: 1px solid #EEE;
                border-radius: 10px;
                margin: 8px 0px
            }

            .inear-common-questions>p {
                padding: 25px
            }

            .op-cl-acor {
                border-radius: 10px;
                background-color: #F9F9F9;
                cursor: pointer
            }

            .op-cl-acor.active {
                color: #FFFFFF;
                background-color: var(--main)
            }

            .op-cl-acor.active>span {
                transform: rotate(180deg);
            }

            .inear-common-questions:not(:first-of-type)>p {
                display: none
            }

            .images-upload-block {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                border: 3px solid #EEE;
                position: relative
            }

            .images-upload-block.gray-img {
                width: 100px;
                height: 100px;
                border-radius: 0;
                border: 1px dashed #eee;
                border-radius: 5px;
            }

            .images-upload-block.gray-img .upload-img {
                width: 100%;
                height: 100%;
                border-radius: 0;
                margin: 0;
                top: 0;
                z-index: none;
                z-index: 0;
                border-radius: 5px;
            }

            .images-upload-block.profileimg {
                width: 60px;
                height: 60px;
                margin-left: 10px;
            }

            .images-upload-block .upload-img,
            .images-upload-block .uploaded-block .close {
                position: absolute;
                width: 25px;
                height: 25px;
                border-radius: 50%;
                background: var(--main);
                bottom: -20px;
                overflow: hidden;
                display: flex;
                color: #FFFFFF;
                font-size: 12px;
                opacity: 1;
                justify-content: center;
                align-items: center;
                z-index: 3;
                right: 50%;
                transform: translateX(50%);
            }

            .images-upload-block .image-uploader {
                position: absolute;
                width: 100%;
                height: 100%;
                opacity: 0
            }

            .images-upload-block img {
                border-radius: 50%;
                max-width: 100%;
                width: 100%;
                height: 100%;
            }

            .images-upload-block.gray-img img {
                border-radius: 5px;
            }

            .images-upload-block .uploaded-block {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }

            .form-service-type label {
                margin: 0px;
                margin-inline-start: 15px
            }

            .line {
                text-decoration: underline;
            }

            .top-logo {
                width: 100%;
                background: #2B726F;
                display: block;
                text-align: center;
            }

            .top-info {
                text-align: center;
            }

            .top-logo img {
                width: 110px;
                height: auto;
                margin: 35px 0;
            }

            .top-nav {
                text-align: center;
                height: 159px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: url(../imgs/bg.png);
                background-size: 100% 100%;
                position: relative;
            }

            .top-nav::before {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                content: "";
                background: rgba(0, 0, 0, 0.5);
            }

            .top-nav img {
                width: auto;
                height: auto;
                max-width: 90%;
                z-index: 1;
            }

            .top-info {
                padding: 15px;
                margin: 20px 0;
            }

            .top-info img {
                border: 2px solid #eee;
                background-color: #ccc;
                width: 100px;
                height: 100px;
                border-radius: 0 8px 0 8px;
            }

            .top-info h5 {
                font-size: 18px;
            }

            .top-info h6 {
                font-size: 13px;
                padding-inline-start: 10px;
                color: #999;
            }

            .nav-links a {
                color: #fff;
                padding: 8px;
                display: block;
                position: relative;
                margin: 10px 0;
                font-size: 14px;
                padding: 6px;
                padding-inline-start: 10px
            }

            .nav-links a img {
                width: 17px;
                height: 17px;
                margin: 10px;
                vertical-align: middle;
            }

            .nav-links a img:last-child {
                display: none;
            }

            .nav-links ul>li.active a img:first-child {
                display: none;
            }

            .nav-links ul>li.active a img:last-child {
                display: inline-block;
            }

            .nav-links ul>li.active>a {
                color: #FEDB3A;
                text-shadow: 0 0;
            }

            .nav-links ul>li.active a::before {
                width: 3px;
                height: 100%;
                background: var(--yellow);
                right: 0;
                top: 0px;
                position: absolute;
                content: ""
            }

            .nav-links ul>li a::after {
                width: 6px;
                height: 6px;
                border: 1px solid #eee;
                content: "";
                position: absolute;
                top: 50%;
                transform: translateY(-50%)rotate( 45deg);
                left: 15px;
                border-top: none;
                border-right: none;
            }

            .nav-links ul>li.active a::after {
                border-color: var(--yellow);
            }

            .nav-links ul ul a {
                padding: 5px 30px;
                color: #eee;
                margin: 0;
            }

            .nav-links ul ul a::before {
                width: 10px;
                height: 10px;
                background: #ccc;
                right: 0;
                top: 10px;
                border: none !important;
                position: absolute;
                border-radius: 50%;
            }

            .nav-links ul ul li.active a::before {
                background: #2B726F;
            }

            .nav-links li a span img {
                display: inline-block
            }

            table.dataTable thead th,
            table.dataTable thead td {
                border-bottom: none;
            }

            table.dataTable th {
                background: var(--main);
                color: #fff;
                text-align: center;
                padding: 12px 2px !important;
                font-weight: 500;
                font-size: 15px;
            }

            table th {
                background: var(--main);
                color: #fff;
                padding: 15px !important;
            }

            table {
                border-collapse: collapse;
                border-bottom: 1px solid #eee;
                margin-bottom: 20px;
            }

            tr {
                border-bottom: 1pt solid #EEE;
            }

            table td {
                padding: 15px !important;
            }

            .timepicker table td {
                padding: 0 !important;
            }

            .dataTables_wrapper {
                background: #fff;
            }

            table.dataTable.no-footer {
                border-bottom: none;
            }

            table.dataTable thead tr {
                outline: thin solid transparent;
            }

            .table-img {
                width: 100px;
                height: 70px;
                border-radius: 10px;
                min-width: 100px;
                min-height: 70px;
                overflow: hidden;
                margin: 9px 0;
            }

            .table-img.img-s {
                width: 70px;
                height: 50px;
                min-width: 70px;
                min-height: 50px;
            }

            .top-link {
                color: #fff;
                margin: 0 4px;
                padding: 5px;
                font-size: 14px;
            }

            .user-info img {
                width: 40px;
                height: 40px;
                border-radius: 10px;
                border: 2px solid #fff;
                min-width: 40px;
                min-height: 40px;
                background-color: #eee;
            }

            .user-info p span {
                display: block;
                margin-inline-start: 5px;
            }

            header.dashboard {
                background: #2B726F;
                padding: 5px 10px 5px 10%;
                color: #fff;
                display: flex;
                justify-content: space-between;
            }

            .title h4,
            h4.name {
                font-weight: 600;
                color: var(--gray);
                font-size: 17px;
            }

            h6.name {
                font-weight: 600;
                color: var(--gray);
                font-size: 14px;
            }

            .title p {
                font-size: 12px;
                color: var(--text);
            }

            .title {
                padding: 20px 15px;
            }

            .card {
                padding: 20px 15px;
                background: #fff;
                border: none;
                border-radius: 0;
                margin-bottom: 12px;
            }

            .fliter-w-depts {
                display: flex;
                flex-wrap: wrap;
            }

            .span {
                background: #F3F3F3;
                color: #989898;
                border-radius: 5px;
                margin-inline-end: 10px;
                padding: 6px 10px;
                min-width: 80px;
                margin-top: 10px;
                display: inline-block;
                height: 35px;
            }

            .btn-add {
                width: 20px;
                height: 20px;
                background: var(--yellow);
                border-radius: 50%;
                color: #fff;
                font-size: 14px;
            }

            .fliter-w-depts .span.active,
            .span:hover {
                background: var(--main);
                color: #fff;
            }

            .dataTables_wrapper {
                padding: 15px 0;
                font-size: 13px;
            }

            .dataTables_wrapper .form-control {
                padding: 5px;
                background: #F9F9F9;
            }

            .dataTables_wrapper .dataTables_length,
            .dataTables_wrapper .dataTables_filter,
            .dataTables_wrapper .dataTables_info,
            .dataTables_wrapper .dataTables_paginate {
                padding: 0 10px;
            }

            .dataTables_wrapper .page-item .page-link {
                color: #666;
                border: none;
                background-color: transparent;
                border-radius: 4px;
                padding: 5px;
                min-width: 25px;
                text-align: center;
            }

            .dataTables_wrapper .page-item.previous .page-link {
                background: var(--yellow);
                color: #fff;
            }

            .dataTables_wrapper .page-item.next .page-link {
                background: #eee;
            }

            .dataTables_wrapper .page-item.active .page-link {
                z-index: 1;
                color: var(--yellow);
                background-color: transparent;
                border: none;
            }

            table.dataTable td {
                color: #6B6B6B;
                text-align: center;
                vertical-align: baseline;
                text-shadow: 0 1px #ccc;
            }

            table.dataTable td:last-child {
                text-align: end;
            }

            table img {
                width: 50px;
                height: 50px;
                border-radius: 5px;
            }

            div.dataTables_wrapper div.dataTables_filter label {
                width: 100%;
            }

            div.dataTables_wrapper div.dataTables_filter input {
                margin-left: .5em;
                display: inline-block;
                width: 100%;
                padding: 9px;
            }

            div.dataTables_wrapper div.dataTables_length select {
                width: 80px;
                padding: 9px;
            }

            .dataTables_wrapper .form-control:focus {
                border-color: var(--yellow);
            }

            .modal.fade.show {
                opacity: 1;
                display: flex !important;
                flex-direction: column;
                justify-content: center;
            }

            .modal-footer {
                justify-content: center;
                padding: 1rem;
                border-top: none;
            }

            .modal-footer .btn-primary {
                color: #fff;
                background-color: var(--main);
                border-color: var(--main);
                width: 50%;
                margin: 0 5px;
                padding: 10px;
                font-size: 14px;
            }

            .modal-body {
                padding: 30px;
            }

            .modal-footer .btn-secondary {
                color: var(--gray);
                background-color: #eee;
                border-color: #eee;
                width: 50%;
                margin: 0 5px;
                padding: 10px;
                font-size: 14px;
            }

            .modal-footer .btn-secondary:hover {
                color: #fff;
                background-color: var(--main);
            }

            .modal-footer .btn-primary:hover {
                color: var(--gray);
                background-color: #eee;
            }

            .table-content {
                background-color: #fff;
                position: relative;
            }

            .table-content .table-abs {
                position: absolute;
                left: 15px;
                top: 13px;
                width: 100%;
                display: flex;
                justify-content: flex-end;
            }

            .table-abs .form-control {
                flex: 1;
            }

            .table-abs .select2-container {
                width: 137px!important;
                margin-inline-end: 9px;
            }

            .form-group .select2-container {
                font-size: 13px;
            }

            .table-abs .form-group {
                white-space: nowrap;
                display: flex;
                align-items: center;
                margin: 0;
            }

            .table-abs .select2-container--default .select2-selection--single .select2-selection__rendered {
                padding: px !important;
            }

            .details {
                width: 700px;
                max-width: 100%;
            }

            .details-img {
                position: relative;
            }

            .details-abs {
                position: absolute;
                left: 10px;
                top: 10px;
                z-index: 10;
            }

            .icon {
                width: 35px;
                height: 35px;
                text-align: center;
                border-radius: 50%;
                display: block;
                margin-bottom: 10px;
                padding: 0;
            }

            .icon img {
                height: 100%;
                width: 100%;
            }

            .details-slider img {
                width: 100%;
                height: 300px;
            }

            .price {
                font-size: 15px;
                font-weight: 600;
                color: var(--main);
            }

            .price .del {
                color: #777;
                text-decoration: line-through;
                font-weight: normal;
            }

            .w-200 {
                width: 200px;
                max-width: 100%;
            }

            .prag {
                font-size: 13px;
                color: #989797;
                line-height: 24px;
                margin-top: 10px;
                text-align: justify;
                margin-bottom: 10px;
            }

            .name2 {
                font-weight: 600;
                color: #000;
                font-size: 14px;
            }

            .select2-container--default .select2-selection--single .select2-selection__rendered {
                color: #444;
                line-height: auto;
                padding: 10px;
            }

            .select2-container--default .select2-selection--single {
                background-color: #fbfbfb;
                border: none;
                border-radius: 4px;
                height: auto;
            }

            .select2-container--default .select2-selection--single .select2-selection__arrow {
                height: 26px;
                position: absolute;
                top: 50%;
                right: unset;
                width: 20px;
                left: 0;
                transform: translateY(-50%);
            }

            .select2-container--default .select2-selection--single .select2-selection__arrow b,
            .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
                left: 50%;
                margin-left: -4px;
                margin-top: -2px;
                position: absolute;
                top: 50%;
                width: 8px;
                height: 8px;
                border: 1px solid #888;
                transform: rotate( 45deg) translateY(-10px);
                border-top: none;
                border-left: none;
            }

            .select2-dropdown {
                background-color: white;
                border: 1px solid #fbfbfb;
                box-shadow: 0 2px 4px #ccc;
            }

            .select2-results__option {
                padding: 13px;
                user-select: none;
                -webkit-user-select: none;
                font-size: 13px;
                border-bottom: 1px solid #eee;
                font-weight: 600;
                color: var(--gray) !important;
            }

            .select2-container--default .select2-search--dropdown .select2-search__field {
                border: 1px solid #eee;
                background: #fbfbfb;
            }

            .select2-container--default .select2-results__option[aria-selected=true],
            .select2-container--default .select2-results__option--highlighted[aria-selected],
            .select2-container--default .select2-results__option:hover {
                background-color: var(--yellow);
                color: #fff !important;
            }

            textarea.form-control {
                height: 130px;
            }

            .form-control:focus {
                border-color: var(--yellow);
            }

            .main-input {
                height: 100px;
                margin: 3px;
                width: 100px;
                position: relative;
            }

            .main-input .file-input,
            .mult-img input {
                position: absolute;
                opacity: 0;
                width: 100%;
                right: 0;
                height: 74px;
            }

            .file-name {
                background: #f6f6f6;
                width: 100%;
                height: 100%;
                text-align: center;
                font-size: 47px;
                border-radius: 3px;
                margin: 0 auto;
                border: 1px dashed #ccc;
                line-height: 100px;
                font-size: 35px;
                color: #444;
            }

            .mult-img-result {
                display: flex;
                margin-top: 15px;
                flex-wrap: wrap;
                align-items: flex-start;
                background: #FFF;
            }

            .mult-img-result .img-uploaded {
                width: 100px;
                height: 100px;
                margin: 5px;
                cursor: pointer;
                transition: all .3s;
                position: relative;
                transition: .3s ease;
                border-radius: 11px;
            }

            .mult-img-result .img-uploaded img {
                width: 100%;
                height: 100%;
                min-height: 40px;
                transition: all .3s;
                border-radius: 5px;
            }

            .mult-img-result .img-uploaded .remove-appendedd {
                position: absolute;
                width: 20px;
                height: 20px;
                font-size: 14px;
                top: 5px;
                right: 6px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #FFFFFF;
                background-color: var(--main);
                border-radius: 50%;
                font-style: normal;
            }

            .time-result {
                padding-bottom: 10px;
                align-items: center;
                display: flex;
            }

            .time-result .remove-li {
                background: #f00;
                color: #fff;
                border-radius: 50%;
                width: 25px;
                height: 25px;
                font-size: 15px;
                line-height: 22px;
                margin-top: 11px;
                font-weight: 600;
            }

            .radio-label {
                position: relative;
                padding: 10px;
                border-radius: 5px;
                overflow: hidden;
                z-index: 1;
                margin-inline-end: 10px;
                font-weight: normal !important;
                min-width: 100px;
            }

            .radio-label span {
                color: #888;
                transition: all .5s ease-in-out;
            }

            .radio-label .radio-check {
                background: #fbfbfb;
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                content: "";
                z-index: -1;
                transition: all .5s ease-in-out;
            }

            .radio-label input:checked+span {
                color: #fff;
            }

            .radio-label input:checked~.radio-check {
                background: var(--main);
            }

            .radio-label input:checked:before {
                border: 1px solid #fff;
            }

            .radio-label input {
                transform: scale(.7);
            }

            .radio-label input:checked::after {
                background: #fff;
                border: 3px solid var(--main);
                width: 17px;
                height: 17px;
            }

            .text-small {
                width: 60px;
                background: #fbfbfb;
                border: navajowhite;
                margin-inline-start: 10px;
                padding: 3px;
                box-shadow: 0 0 2px #ccc;
            }

            table .btn-gray {
                background: #f5f5f5;
                color: #000;
                padding: 9px 10px;
                min-width: 80px;
                display: inline-block;
                border-radius: 5px;
                border: 1px solid #ccc;
            }

            .order-nav {
                justify-content: space-between;
                justify-content: space-between;
                background: #fff;
                border: none;
                margin-bottom: 14px;
            }

            .order-nav.nav-tabs .nav-item {
                margin-bottom: -1px;
                flex: 1;
                text-align: center;
            }

            .order-nav.nav-tabs .nav-link {
                border: 1px solid transparent;
                border-top-left-radius: .25rem;
                border-top-right-radius: .25rem;
                padding: 15px 10px;
                font-weight: 600;
                color: #a7a5a5;
                border: none;
                border-radius: 0;
                position: relative;
            }

            .order-nav.nav-tabs .nav-link::after {
                width: 1px;
                height: 20px;
                background: #eee;
                content: "";
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: -1px;
            }

            .order-nav.nav-tabs .nav-item.show .nav-link,
            .order-nav.nav-tabs .nav-link.active {
                background: var(--main);
                color: #fff;
            }

            table.dataTable>thead>tr>th:not(.sorting_disabled),
            table.dataTable>thead>tr>td:not(.sorting_disabled) {
                padding: 10px 0px;
            }

            .table td,
            .table th,
            table th,
            table td {
                padding: 15px 0;
            }

            .user-box {
                display: flex;
                align-items: center;
            }

            .user-box>img {
                width: 40px;
                height: 40px;
                min-width: 40px;
                min-height: 40px;
                border-radius: 10px;
                background-color: #eee;
                margin-inline-end: 10px;
            }

            .order-list {
                padding: 0;
            }

            .order-list li {
                padding: 18px 25px;
                display: flex;
            }

            .order-list li:nth-child(odd) {
                background: #FCFCFC;
            }

            .order-list li h6 {
                font-weight: 600;
                color: var(--gray);
                font-size: 13px;
                margin: 0;
            }

            .order-list li h6:first-child {
                flex-basis: 40%;
            }

            .order-list li h6:last-child {
                flex-basis: 60%;
            }

            .order-div {
                background: #fff;
                min-height: 380px;
                margin-bottom: 20px;
            }

            .order-footer {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: row;
            }

            .order-footer .btn-main {
                margin: 0 10px;
            }

            .another_reason {
                display: none
            }

            .finish {
                width: 100%;
                height: 100vh;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background: url(../imgs/1111.png);
                background-color: #fff;
            }

            .append-imgs {
                display: flex;
                flex-wrap: wrap;
            }

            .append-imgs .img-uploaded {
                position: relative;
                padding: 20px;
            }

            .append-imgs .img-uploaded .remove-appendedd {
                width: 30px;
                height: 30px;
                left: 0;
                top: 0;
                background: red;
                color: #fff;
                position: absolute;
                text-align: center;
                line-height: 30px;
                border-radius: 50%;
                font-style: normal;
                font-weight: 600;
                font-size: 23px;
            }

            .append-imgs .img-uploaded img {
                width: 200px;
                height: 150px;
            }

            .img-inputs {
                width: 50px;
                height: 50px;
                position: relative;
                border-radius: 50%;
                overflow: hidden;
            }

            .img-inputs .img-input {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
            }

            .img-inputs .file-name {
                background: #000;
                color: #fff;
                width: 100%;
                height: 100%;
                justify-content: center;
                display: flex;
                align-items: center;
                font-size: 38px;
            }

            .wallet {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                padding: 40px 20px;
            }

            .wallet-box {
                position: relative;
                margin-bottom: 30px;
            }

            .wallet-box input[type="radio"] {
                position: absolute;
                width: 100%;
                height: 100%;
                opacity: 0;
            }

            .wallet-box ul {
                border: 1px solid #ccc;
                border-radius: 10px;
                overflow: hidden;
                box-shadow: 0 0 8px #eee;
                background: #fff;
                transition: all .4s ease-in-out;
            }

            .wallet-box li:nth-child(even) {
                background: #F9F9F9;
            }

            .wallet-box li {
                padding: 10px;
                display: flex;
                transition: all .4s ease-in-out;
            }

            .wallet-box li h6:first-child {
                flex-basis: 40%;
                color: var(--main);
            }

            .wallet-box h6 {
                display: inline-block;
                margin-bottom: .5rem;
                font-weight: 600;
                font-size: 13px;
                margin-bottom: 0px;
                transition: all .4s ease-in-out;
            }

            .wallet-box h6:last-child {
                position: relative;
            }

            .wallet-box h6:last-child::before {
                content: ":";
                left: 0;
                top: 0;
                width: 10px;
                height: 10px;
                position: relative;
                color: #000;
            }

            .wallet-box input[type="radio"]:checked+ul h6 {
                color: #fff;
            }

            .wallet-box input[type="radio"]:checked+ul,
            .wallet-box input[type="radio"]:checked+ul li:nth-child(even) {
                background: var(--main);
                border-color: var(--main);
            }

            .sub-box {
                display: flex;
                flex-direction: revert;
                align-items: center;
                justify-content: space-between;
                padding: 10px 15px;
                background: #fff;
                margin-bottom: 20px;
            }

            .sub-box>div {
                flex: 1;
            }

            .sub-box img {
                width: 40px;
                margin-inline-end: 20px;
            }

            .sub-box h4 {
                width: 120px;
                text-align: center;
                border-inline-start: 1px solid #ccc;
                padding: 10px 0;
            }

            .visa-box {
                display: flex;
                align-items: center;
                margin-bottom: 20px;
            }

            .visa-box>label {
                background: #FCFCFC;
                border: 1px solid #eee;
                border-radius: 10px;
                padding: 15px;
                display: flex;
                margin-inline-start: 20px;
                flex: 1;
            }

            .visa-box label img {
                margin-inline-end: 20px;
                max-width: 70px;
            }

            .setting-item {
                display: flex;
                justify-content: space-between;
                background: #fff;
                padding: 20px;
                align-items: center;
                font-size: 20px;
                margin-bottom: 15px;
            }

            .setting-item h6 {
                margin: 0;
            }

            .setting1_box {
                border: 1px solid #eee;
                width: 500px;
                max-width: 100%;
                margin-bottom: 20px;
            }

            .setting1_box h6 {
                background: #eee;
                padding: 15px;
                font-size: 13px;
                color: #000;
            }

            .setting1_box input[type=checkbox]:before,
            .times input[type=checkbox]:before {
                background: #fff;
            }

            .setting1_box input[type=checkbox]:checked::before,
            .times input[type=checkbox]:checked::before {
                background: var(--main);
            }

            .setting1_box label {
                display: block;
                padding: 10px;
                border-bottom: 1px solid #eee;
                margin: 0;
                font-weight: 600;
                color: #adacac;
                font-size: 12px;
            }

            .setting1_box input[type=checkbox]:checked+span,
            .times input[type=checkbox]:checked+span {
                color: #555;
            }

            .btn-delete {
                width: 25px;
                height: 25px;
                background: #CE4E45;
                border-radius: 50%;
                color: #fff;
                font-size: 20px;
                line-height: 20px;
                padding-bottom: 4px;
            }

            .select2-container {
                display: block;
                width: 100% !important;
            }

            .times {
                width: 450px;
                max-width: 100%;
            }

            .times input[type=checkbox]+span {
                color: #adacac;
            }

            .Delivery .form-group div span {
                font-size: 12px;
                font-weight: 600;
                color: #999;
            }

            .Delivery label {
                color: #000;
                font-size: 14px;
            }

            .Delivery .form-group {
                margin-bottom: 30px;
            }

            .Delivery .form-group div {
                padding-inline-start: 20px;
            }

            .Delivery .form-group div .span {
                margin: 3px;
                min-width: 58px;
                text-align: center;
                padding: 10px 0;
            }

            .switch {
                position: relative;
                display: inline-block;
                width: 35px;
                height: 19px;
                margin: 0 4px;
                transform: scale(.9);
            }

            .switch input {
                opacity: 0;
                width: 0;
                height: 0;
            }

            .switch input:checked+.span-check {
                background-color: var(--main);
            }

            .switch .span-check:before {
                position: absolute;
                content: "";
                width: 13px;
                height: 13px;
                left: 3px;
                bottom: 3px;
                background-color: white;
                -webkit-transition: .4s;
                transition: .4s;
            }

            .switch .span-check {
                position: absolute;
                cursor: pointer;
                top: 0;
                right: 0;
                bottom: 0;
                background-color: #555;
                -webkit-transition: .4s;
                transition: .4s;
                width: 100%;
                height: 100%;
                text-align: left;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding: 4px;
                color: #fff;
                border-radius: 13px;
            }

            .switch .span-check.round:before {
                border-radius: 50%;
            }

            .switch input:checked+.span-check::before {
                background-color: #fff;
            }

            .switch input:checked+.span-check:before {
                -webkit-transform: translateX(14px);
                -ms-transform: translateX(14px);
                transform: translateX(14px)
            }

            .message,
            .notify {
                display: flex;
                align-items: flex-end;
                margin-bottom: 35px;
            }

            .message>img,
            .notify img {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                margin: 0 10px;
                border: 2px solid #fff;
            }

            .message-prag,
            .notify-prag {
                padding: 20px;
                background: #f8f8f8;
                border-radius: 13px;
                color: #989898;
                position: relative;
            }

            .message-prag p,
            .notify p {
                font-size: 13px;
                text-shadow: 0 1px #ccc;
            }

            .send-message .message-prag,
            .notify-prag {
                background: rgba(254, 219, 58, 15%);
            }

            .recive-message {
                flex-direction: row-reverse;
            }

            .time-abs {
                position: absolute;
                bottom: -20px;
                font-size: 12px;
            }

            .all-chat {
                height: 500px;
                overflow-y: auto;
            }

            .chat-footer {
                display: flex;
                justify-content: space-between;
                background: #FBFBFB;
                padding: 10px;
                border-radius: 0 0 10px 10px;
                border: 1px solid #eee;
            }

            .chat-footer textarea {
                flex: 1;
                background: transparent;
                border-color: transparent;
                height: 38px;
            }

            .chat-footer .btn-main {
                width: 150px;
            }

            .notify-prag .delete-notify {
                position: absolute;
                top: 0;
                left: 0;
                width: 25px;
                height: 25px;
                background: #CE4E45;
                border-radius: 10px 0 10px 0;
                color: #fff;
                font-size: 18px;
                line-height: 20px;
                padding-bottom: 5px;
            }

            div.dataTables_wrapper div.dataTables_filter label,
            div.dataTables_wrapper div.dataTables_length label {
                position: relative;
            }

            div.dataTables_wrapper div.dataTables_filter label::before {
                font-family: "icon";
                content: "\f002";
                position: absolute;
                left: 4px;
                top: 50%;
                transform: translateY(-50%);
                color: #aaa;
                font-weight: 500;
            }

            div.dataTables_wrapper div.dataTables_length label::before {
                content: "";
                position: absolute;
                left: 4px;
                left: 13px;
                top: 50%;
                transform: translateY(-50%)rotate( 46deg);
                color: #aaa;
                font-weight: 500;
                margin-left: -4px;
                margin-top: -2px;
                position: absolute;
                width: 8px;
                height: 8px;
                border: 1px solid #888;
                border-top: none;
                border-left: none;
            }

            .imgfile {
                position: relative;
                position: relative;
                background-image: url(../imgs/upload-to-cloud.png);
                background-size: contain;
                background-position: top left;
            }

            .imgfile::before {
                left: 0;
                width: 40px;
                height: 100%;
                top: 0;
                background: url(../imgs/upload-to-cloud.png);
                position: absolute;
                content: "";
                background-repeat: no-repeat;
                background-position: center;
            }

            .table-abs .select2-container--default .select2-selection--single .select2-selection__rendered {
                color: #444;
                line-height: auto;
                padding: 6px;
            }

            .details-slider .owl-dots {
                position: absolute;
                bottom: 0;
                width: 100%;
                display: flex;
                justify-content: center;
                left: 0;
                padding: 10px;
            }

            .details-slider .owl-dots .owl-dot {
                width: 5px;
                height: 5px;
                background: #aaa;
                border-radius: 50%;
                margin: 3px;
                display: inline-block;
                transition: all .4s ease-in-out;
            }

            .details-slider .owl-dots .owl-dot.active {
                background: var(--yellow);
                transform: scale(1.7);
            }

            .details div.d-flex ul.d-flex li {
                margin-inline-start: 10px;
                font-size: 13px;
                color: #666;
            }

            .all-comments li {
                background: #fff;
                display: flex;
                padding: 20px;
                margin-bottom: 10px;
                align-items: flex-start;
            }

            .comment-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .comment-header>div {
                display: flex;
            }

            .all-comments .prag {
                margin: 0;
            }

            .all-comments li>img {
                width: 60px;
                height: 60px;
                min-width: 60px;
                min-height: 60px;
                border-radius: 50%;
                margin-inline-end: 16px;
            }

            table.dataTable>tbody>tr.child ul.dtr-details>li {
                border-bottom: 1px solid #efefef;
                padding: 0.5em 0;
                display: flex;
            }

            table.dataTable>tbody>tr.child ul.dtr-details {
                display: block;
                width: 100%;
            }

            table .btn-primary,
            table .btn-primary:hover {
                color: #fff;
                background-color: #2b726f;
                border-color: #2b726f;
            }

            table .btn .fa-arrow-up:before {
                content: "\f106";
            }

            table .btn .fa-arrow-down:before {
                content: "\f107";
            }

            .sub-menu {
                display: none;
            }

            .bootstrap-datetimepicker-widget table {
                width: auto;
                margin: 0;
                background: #fff;
            }

            .input-group-text {
                background-color: #fbfbfb;
                border: 1px solid #fbfbfb;
                border-radius: 0;
            }

            #main.mainclosenav {
                margin-right: 60px;
            }

            .sideclosenav {
                right: 0;
                width: 60px;
            }

            .sideclosenav .top-logo img {
                width: 55px;
            }

            .sideclosenav .nav-links ul>li a::after {
                display: none;
            }

            .sideclosenav .text {
                display: none
            }
            /* .sideclosenav .nav-links a:hover {
                width: 250px;
            } */

            @media (min-width: 576px) {
                .modal-dialog {
                    width: 470px;
                }
            }

            @media (min-width: 992px) {
                .modal-lg {
                    max-width: 800px;
                    width: 100%;
                }
            }
            /*Extra small devices (portrait phones, less than 576px)*/

            @media (max-width: 575.98px) {
                .creat_login {
                    flex-shrink: unset;
                }
                .creat_login .btn-main {
                    margin: 0px 2px;
                    padding: 5px 5px;
                    line-height: 20px;
                    font-size: 9px;
                    height: 30px;
                }
                .the_logo img {
                    max-height: 50px !important;
                }
            }
            /*Small devices (landscape phones, less than 768px)*/

            @media (max-width: 767.98px) {
                .table-abs .btn-main {
                    margin: 10px 0;
                }
                .sub-box {
                    display: flex;
                    flex-direction: column;
                }
                .sub-box h4 {
                    border: none;
                }
                .table-content .table-abs {
                    position: relative;
                    left: 0;
                    top: 10px;
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    margin: 0;
                }
                .order-nav.nav-tabs .nav-item {
                    flex-basis: 50%;
                }
                .open_nav,
                .close_nav {
                    display: block;
                }
                .close_nav {
                    position: absolute;
                    left: 10px;
                    top: 10px;
                }
                .nav_link {
                    position: fixed;
                    top: 0px;
                    right: 0px;
                    background-color: rgba(0, 0, 0, 0.8);
                    width: 80%;
                    height: 100%;
                    z-index: 100;
                    display: block !important;
                    padding: 50px 15px;
                    transform: translateX(100%)
                }
                .nav_link.active {
                    transform: translateX(0)
                }
                .nav_link>li {
                    margin-bottom: 25px;
                }
                .nav_link a {
                    color: #FFFFFF
                }
                .info_index:after {
                    display: none
                }
                .the_text_info {
                    margin-top: 30px;
                    margin-bottom: 30px
                }
                .the_imgs_info>img:first-child {
                    margin-bottom: 30px
                }
                .sec-marg {
                    margin-top: 30px;
                    margin-bottom: 30px;
                }
                .header-index .the_languge {
                    color: #000000;
                }
                .the_languge {
                    margin-right: 0px
                }
                .who_are_we_index .the_text_info {
                    margin-top: 30px;
                }
                .who_are_we_index:after {
                    width: 100%;
                    height: 600px;
                }
                .img_download {
                    margin-top: 30px
                }
                .the_link_download img {
                    max-height: 50px !important
                }
                .text_download {
                    margin-top: 0px
                }
                footer:after {
                    display: none
                }
                footer {
                    background-color: #eff4f3;
                    padding-top: 20px !important
                }
                #main .body-content {
                    padding: 30px 1% 30px 1%;
                }
                .sidenav {
                    right: -250px;
                }
                .body-content {
                    padding: 6px;
                }
                #main {
                    margin-right: 0px;
                }
                .top-nav img {
                    width: auto;
                    height: auto;
                    max-width: 54px;
                }
                .top-nav {
                    text-align: center;
                    height: 79px;
                }
                .sideclosenav {
                    right: 0px;
                }
                #main.mainclosenav {
                    margin-right: 0;
                    overflow: hidden;
                    transform: translateX(-250px);
                }
                .sidenav {
                    width: 250px;
                }
                header.dashboard {
                    padding: 5px 10px 5px 5px;
                }
            }
            /*Medium devices (tablets, less than 992px)*/

            @media (max-width: 991.98px) {
                .the_logo {
                    margin-inline-end: 15px;
                }
                .nav_link a {
                    margin: 0px 5px
                }
                .the_logo img {
                    max-height: 71px;
                }
                .the_text_info {
                    margin-left: 0px;
                }
                .the_text_info h1 {
                    font-size: 30px
                }
            }
            /*Large devices (desktops, less than 1200px)*/

            @media (max-width: 1199.98px) {}
            /*============================ start loader================================== */

            .loader {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 9999999999;
                background: rgba(0, 0, 0, .5);
                overflow: hidden;
                display: -webkit-flex;
                display: -moz-flex;
                display: -ms-flex;
                display: -o-flex;
                display: flex;
                -ms-align-items: center;
                align-items: center;
                justify-content: center;
            }

            .loader img {
                animation: logoeffect2 1s linear 0s infinite;
                position: relative;
                width: 50px;
            }

            @keyframes logoeffect2 {
                0% {
                    top: 0;
                }
                20% {
                    top: -15px;
                    filter: grayscale(70%);
                    transform: rotateY(180deg) perspective(600px) scale(1.1);
                }
                40% {
                    top: 0;
                    filter: grayscale(0%);
                    transform: rotateY(0deg) perspective(600px) scale(1);
                }
                100% {
                    top: 0;
                    transform: rotateY(0deg) perspective(600px) scale(1);
                }
            }
            /*============================ end loader================================== */

             ::-webkit-scrollbar,
            body::-webkit-scrollbar,
            .scroll::-webkit-scrollbar {
                width: 6px;
            }

             ::-webkit-scrollbar-track,
            body::-webkit-scrollbar-track,
            .scroll::-webkit-scrollbar-track {
                box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            }

             ::-webkit-scrollbar-thumb,
            body::-webkit-scrollbar-thumb,
            .scroll::-webkit-scrollbar-thumb {
                background-color: var(--main);
                outline: 1px solid var(--main);
            }


.form-group .dropdown{
    padding: 0;
   }

            .form-group .dropdown .dropdown-toggle{
                position: relative;
                border: none;
                align-items: flex-start;
                font-size: 13px;
                color: #495057;
                padding: 21px 11px;
                border-radius: 5px;
                background-color: #fbfbfb;
            }
            #derp-check{
                border: 1px solid #fedb3a;
                border-radius: 5px;
                top: 4px;
                position: relative;
                overflow-y: scroll;
                max-height: 221px;
            }
            .form-group .dropdown .dropdown-toggle i{
                position: absolute;
                left: 6px;
                font-size: 15px;
                color: #4e5969;
                font-weight: 900;
            }

            .hig-drop{
                overflow-y: scroll;
                max-height: 218px;
                /*top: 49px !important;*/
                display: none;
            }

            .add-opn{
                display: block;
            }

            .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle{
                background-color: #fbfbfb;
                border: 1px solid #fedb3a;
            }



            /*.the_languge .dropdown-toggle{*/
            /*    position: relative;*/
            /*}*/