/*site specifics*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@font-face {
    font-family: "Bangers";
    src: url('../fonts/Bangers/Bangers-Regular.ttf') format('truetype');
}
@font-face {
    font-family: "Anta";
    src: url('../fonts/Anta/Anta-Regular.ttf') format('truetype');
}
@font-face {
    font-family: "Poppins";
    src: url('../fonts/Poppins/Poppins-Regular.ttf') format('truetype');
}
@font-face {
    font-family: "Exo";
    src: url('../fonts/Exo/static/Exo-Regular.ttf') format('truetype');
}
@font-face {
    font-family: "Caveat";
    src: url('../fonts/Caveat/static/Caveat-Regular.ttf') format('truetype');
}
@font-face {
    font-family: "Readex_Pro";
    src: url('../fonts/Readex_Pro/static/ReadexPro-Regular.ttf') format('truetype');
}
@font-face {
    font-family: "Tajawal";
    src: url('../fonts/Tajawal/Tajawal-Regular.ttf') format('truetype');
}

@font-face {
    font-family: "Vazirmatn";
    src: url('../fonts/Vazirmatn/static/Vazirmatn-Regular.ttf') format('truetype');
}

body {
    font-family: 'Vazirmatn' !important;
    font-size: 1.0rem !important;
}

#PublicBody {
    font-family: 'Vazirmatn' !important;
    text-align: right !important;
}

#EditorData {

}

/*body {
    direction: rtl;
    text-align: right;
}*/

div.wrapper {
    direction: ltr;
}

aside.main-sidebar {
    direction: ltr;
    text-align: left;
}
/*      Gallery Type dropdown arrow     */
#GalleryTypeDropDown > span.select2.select2-container.select2-container--bootstrap4 > span.selection > span > span.select2-selection__arrow {
    left: 5px !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    left: 5px !important;
}

#dt-basic-example_length {
    text-align: left;
}

#dt-basic-example_filter > label > input {
    text-align: right;
}

.custom-file-input:lang(en) ~ .custom-file-label::after {
    content: "بحث";
}

/*      above code is for rtl design        */ 










.site-loader-color {
    color: #000000 !important;
    font-size: 50px !important;
}

.site-datatable-button-container {
    margin-left: 10px;
}

.button-create {
}

[class*="sidebar-dark-"] .sidebar a {
    color: #3C4048;
    font-weight: 500
}


[class*="sidebar-dark-"] {
    background-color: #EAEAEA;
}

.elevation-4 {
    box-shadow: -19px 0px 10px 3px rgb(0 0 0 / 20%), 0 10px 10px rgb(0 0 0 / 20%) !important;
}

.content-header {
    padding: 1.5rem 2rem 4rem 2rem !important;
}

.navbar-light .navbar-nav .nav-link {
    color: #3C4048;
}

.content-wrapper {
    background-color: #f5f5f5;
}

[class*="sidebar-dark"] .brand-link {
    border-bottom: 0px;
}

[class*="sidebar-dark"] .user-panel {
    border-bottom: 1px solid #d3d3d3;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-image: linear-gradient(to right, #c72500, #6d1900);
    color: #f5f5f5;
}

#body > div.wrapper > aside.main-sidebar.sidebar-dark-primary.elevation-4 > aside > div > nav > ul > li > a {
    margin: 0px;
}

    #body > div.wrapper > aside.main-sidebar.sidebar-dark-primary.elevation-4 > aside > div > nav > ul > li > a:hover {
        color: black;
        background-color: #f5f5f5;
    }

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active:hover, .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active:hover {
    color: #f5f5f5 !important;
    background-color: #c72500 !important;
}

#body > div.wrapper > aside.main-sidebar.sidebar-dark-primary.elevation-4 > aside > div > nav > ul > li.nav-item.has-treeview.menu-is-opening.menu-open > a {
    color: black;
    background-color: #f5f5f5;
}

#body > div.wrapper > aside.main-sidebar.sidebar-dark-primary.elevation-4 > aside > div > div > div.info > a:hover {
    color: black;
}


element.style {
}

.k-command-cell > .k-button {
    margin-left: 0.16em;
    margin-right: 0.16em;
}

.k-command-cell > .k-button, .k-edit-cell > .k-textbox, .k-edit-cell > .k-widget, .k-grid-edit-row td > .k-textbox, .k-grid-edit-row td > .k-widget {
    vertical-align: middle;
}

.k-grid-edit-row .k-button, .k-grid-edit-row .k-textbox, .k-grid-edit-row .k-widget {
    height: auto;
}

.k-button.k-primary {
    background-color: green !important;
    border-color: green !important;
}

.k-command-cell > .k-button.k-grid-edit {
    background-image: linear-gradient(to right, #eee, #ddd) !important;
}

.k-command-cell > .k-button.k-grid-Deleteitem {
    background-image: linear-gradient(to right, #E64848, #d63838) !important;
    color: #ddd;
}

.k-command-cell > .k-button.k-grid-cancel {
    background-image: linear-gradient(to right, #E64848, #d63838) !important;
    color: #ddd;
}

#body > div.wrapper > aside.main-sidebar.sidebar-dark-primary.elevation-4 > aside > div > nav > ul > li.nav-item.has-treeview.menu-is-opening.menu-open > a {
    color: #3c4048;
}

[class*="sidebar-dark-"] .nav-treeview > .nav-item > .nav-link {
    color: #3c4048;
}

    [class*="sidebar-dark-"] .nav-treeview > .nav-item > .nav-link:hover {
        color: #000;
    }

.page-item.active .page-link {
    background-color: #c72500;
    border-color: #c72500;
}

.page-link {
    color: black;
}

div.modal-body span.field-validation-error {
    color: red;
}

#body > div.wrapper > aside.main-sidebar.sidebar-dark-primary.elevation-4 > aside > div {
    overflow: hidden;
}

/*#body > div.wrapper > aside.main-sidebar.sidebar-dark-primary.elevation-4 > aside > div > nav > ul > li.nav-item.has-treeview.menu-is-opening.menu-open > a {
    color: #f5f5f5;
}*/

[class*="sidebar-dark-"] .nav-sidebar > .nav-item:hover > .nav-link, [class*="sidebar-dark-"] .nav-sidebar > .nav-item > .nav-link:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: #343a40;
}

/*ul.nav-treeview:hover {
}*/

#body > div.wrapper > aside.main-sidebar.sidebar-dark-primary.elevation-4 > aside > div > nav > ul > li.nav-item.has-treeview.menu-is-opening.menu-open > a {
    color: #343a40;
    background-color: #f5f5f5;
}

.nav-treeview .nav-item a {
    font-size: 15px;
    font-weight: 500;
}

[class*="sidebar-dark-"] .nav-treeview > .nav-item > .nav-link {
    color: #444a50;
}

.nav-treeview .nav-item .nav-icon {
    font-size: 1.0rem;
}

/*#body > div.wrapper > aside.main-sidebar.sidebar-dark-primary.elevation-4 > aside > div >
nav > ul > li.nav-item.has-treeview.active.menu-open:hover {
    color: #f5f5f5 !important;
}*/

.select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: #ced4da !important;
    -webkit-box-shadow: 0 0 0 0rem rgb(255 255 255 / 100%) !important;
    box-shadow: 0 0 0 0rem rgb(255 255 255 / 100%) !important;
}

.select2-container--bootstrap4 .select2-results__option--highlighted, .select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected="true"] {
    color: #fff !important;
    background-color: #c72500 !important;
}

.btn-primary {
    background-color: #c72500;
    border-color: #c72500;
}

/*#dt-basic-example > tbody > tr > td:nth-child(7) {
    padding: 5px;
}*/

.InvoiceImage:hover {
    transition: 0.2s ease-in-out;
    transform: scale(4.0);
}

.modal-body-program {
    padding: 0rem !important;
}

.modal-body-program-div {
    padding: 1rem !important;
}

.FilterDiv {
    background-color: #eaeaea;
    padding: 1rem;
}

.btn-light {
    background-color: #e5e5e5 !important;
    color: #000 !important;
}

.modal-body-program-div {
    font-size: 19px;
}

#attribute-modal {
    font-weight: 400
}

#attribute-modal-val {
    font-weight: 500
}

.modal-body-program-div img {
    border-radius: 10px;
    background-color: #eaeaea;
}

.FilterListDiv {
    color: black;
}

.btn-primary:hover {
    background-color: #6d2f2f !important;
    border-color: #6d2f2f !important;
}

.btn-primary:active {
    background-color: #6d2f2f !important;
    border-color: #6d2f2f !important;
}

.btn-primary:focus {
    background-color: #6d2f2f !important;
    border-color: #6d2f2f !important;
}

.nav-sidebar > .nav-item:hover {
    color: white !important;
}

.column-visibility-button {
    background-color: #6d2f2f !important;
    border-color: #6d2f2f !important;
}

div.dt-button-collection .dt-button {
    min-width: 100px !important;
}

div.dt-button-collection {
    position: absolute;
    z-index: 2001;
    background-color: #EAEAEA !important;
    border: 1px solid rgb(135 154 173);
    border-radius: 3px;
    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    padding: 0px 0px !important;
    width: 133px !important;
    color: red;
}

.dropdown-item.active, .dropdown-item:active {
    color: #000;
    text-decoration: none;
    background-color: #bfbfbf;
    font-weight: 500;
}

.dropdown-item:hover {
    background-color: #ccc;
}

.homeCardIcon {
    color: #eaeaea;
    font-size: 70px !important;
}

.HomeCardLabel {
    font-size: 20px !important;
}

.small-box-footer {
    font-size: 20px !important;
}

.info-box-icon {
    border-radius: 5px !important;
}

a.dashboardCard {
    color: #222;
}

    a.dashboardCard:hover {
        font-weight: 500;
        transform: scale(1.01);
        transition: ease 0.05s;
    }

.bg-my-green {
    color: #fff !important;
    background-color: #008500;
}

.bg-my-blue {
    color: #fff !important;
    background-color: #006985;
}

.bg-my-yellow {
    color: #fff !important;
    background-color: #858400;
}

.bg-my-red {
    color: #fff !important;
    background-color: #850000;
}

.saleBox div.dataTables_wrapper div.dataTables_filter input {
    width: 280px !important;
}

#exampleInputFile:hover {
    cursor: pointer;
}

.customerBox div.dataTables_wrapper div.dataTables_filter input {
    width: 210px !important;
}

.supportTicketBox div.dataTables_wrapper div.dataTables_filter input {
    width: 280px !important;
}

.warrantyClaimBox div.dataTables_wrapper div.dataTables_filter input {
    width: 280px !important;
}

.serviceBox div.dataTables_wrapper div.dataTables_filter input {
    width: 280px !important;
}

.filterProgramBox div.dataTables_wrapper div.dataTables_filter input {
    width: 280px !important;
}

table {
    background-color: white !important;
    border-radius: 5px;
}

    table.table-bordered.dataTable th:last-child,
    table.table-bordered.dataTable th:last-child,
    table.table-bordered.dataTable td:last-child,
    table.table-bordered.dataTable td:last-child {
        border-right-width: 0px !important;
    }

#Dashboard table.table td {
    border-left: 0px;
    border-right: 0px;
}

#Dashboard table {
    background-color: white !important;
    border-radius: 7px;
}



#Dashboard .HomeFilterProgram thead {
    background-image: linear-gradient(to right, #d5d5d5, #e9e9e9);
    color: #000;
}

#Dashboard .table thead th {
    border: 0px;
    font-size: 18px;
    font-weight: 500;
}

thead th:first-child {
    border-left: none;
    border-top-left-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
}

thead th:last-child {
    border-right: none;
    border-top-right-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topright: 4px;
}

#Dashboard table.table-bordered.dataTable {
    border-left: 0px solid #dee2e6;
    border-right: 0px solid #dee2e6;
    border-top: 0px;
}

div.tableHeader {
    font-size: 19px;
    font-weight: normal;
    color: #101c40;
}

.HomeFilterProgram div th {
    color: #101c40;
}

.HomeFilterProgram div tr {
    color: #101c40;
}

#home-filter-program tbody td:nth-child(2) > a {
    color: #101c40;
    text-decoration: underline;
}

#home-filter-program > tbody td:nth-child(2) > a:hover {
    color: royalblue;
}

#Dashboard table tr td p {
    margin-bottom: 4px !important
}

#home-filter-program > tbody > tr:nth-child(1) > td {
    border-top: 0px;
}

/*
    Service Table
*/

#Dashboard .HomeService thead {
    background-image: linear-gradient(to right,#d5d5d5, #e9e9e9);
    color: #000;
}

.HomeService div th {
    color: #101c40;
}

.HomeService div tr {
    color: #101c40;
}

#home-service tbody td:nth-child(2) > a {
    color: #101c40;
    text-decoration: underline;
}

#home-service > tbody td:nth-child(2) > a:hover {
    color: royalblue;
}

#home-service > tbody > tr:nth-child(1) > td {
    border-top: 0px;
}

#homeCreateService:hover, #homeCreateService:focus, #homeCreateService:active {
    background-color: #008500 !important;
    border-color: #008500 !important;
}

#homeCreateServiceDisabled:hover, #homeCreateServiceDisabled:focus, #homeCreateServiceDisabled:active {
    background-color: #bbb !important;
    border-color: #ccc !important;
}

#homeCreateOutgoingCall:hover, #homeCreateOutgoingCall:focus, #homeCreateOutgoingCall:active {
    background-color: #008500 !important;
    border-color: #008500 !important;
}

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

.card-success:not(.card-outline) > .card-header, .card-success:not(.card-outline) > .card-header a {
    color: #000000;
}

.card-success:not(.card-outline) > .card-header {
    background-color: #d5d5d5;
    border-bottom: 0px;
}

    .card-success:not(.card-outline) > .card-header .btn-tool {
        color: #777;
    }


#dt-basic-example_filter > label > input {
    margin-left: 0px;
    margin-right: 12px;
}

table td a {
    text-decoration: underline;
    color: #000;
}

    table td a:hover {
        text-decoration: underline;
        color: #0045ab;
    }


#SaleProfileDetails .modal-body-program-div, #ProfileCalls .modal-body-program-div,
#ProfileServiceHistory .modal-body-program-div, #ProfileFilterProgram .modal-body-program-div {
    font-size: 18px !important;
    padding: 1rem !important;
}

#SaleProfileDetails, #ProfileCalls, #ProfileServiceHistory, #ProfileFilterProgram {
    background-color: white;
    border-radius: 5px;
    border: 1px solid #d5d5d5;
    margin: 0px 5px 0px 5px;
}


    #SaleProfileDetails .modal-body-program-div img {
        border-radius: 10px;
        background-color: #e0e0e0;
    }

.ProfileTitle {
    font-size: 21px;
    font-weight: 500;
    margin-bottom: 10px;
}

#SaleProfileDetails .mainInfo, #ProfileCalls .mainInfo, #ProfileServiceHistory .mainInfo, #ProfileFilterProgram .mainInfo {
    font-weight: 500;
}

div.modal-body-program-div.service-th {
    border-bottom-left-radius: 0px;
    border-bottom: 1px solid #dddddd;
    border-bottom-right-radius: 0px;
}

.service-th div {
    font-weight: 500;
}

.SaleProfile .col-6 {
    padding-right: 0.5px;
}

#dt-basic-example_filter > label > input {
    width: 200px;
}

surveyDiv {
    border: 1px solid #000;
}

surveyDivContent {
    border: 1px solid #000;
}

#ConfirmSurveyButton {
    width: 32px;
    background-color: #fff;
    border: 1px solid #558700;
    color: #008500;
    border-radius: 100px;
}

    #ConfirmSurveyButton:hover {
        background-color: #008500;
        border: 1px solid #558700;
        color: #fff;
        border-radius: 100px;
    }

.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 0.5rem !important;
}

#Calendar a.fc-col-header-cell-cushion {
    color: black !important;
}

.fc-daygrid-block-event .fc-event-time, .fc-daygrid-block-event .fc-event-title {
    padding: 2px !important;
}

.fc-h-event {
    border: 0px !important;
    display: block;
}

.fc-event-title {
    width: 100%;
    font-weight: 500;
    font-size: 15px;
    /*text-align: center;*/
}

@media only screen and (max-width: 1600px) {
    .SaleProfileDetails {
        margin-bottom: 15px !important;
    }
}

@media only screen and (min-width: 1000px) and (max-width: 1300px) {
    #ProfileCalls, #ProfileServiceHistory, #SaleProfileDetails, #ProfileFilterProgram {
        min-width: 100% !important;
    }
}

@media only screen and (min-width: 1300px) and (max-width: 1400px) {
    #ProfileCalls, #ProfileServiceHistory, #SaleProfileDetails, #ProfileFilterProgram {
        min-width: 80% !important;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    #ProfileCalls, #ProfileServiceHistory, #SaleProfileDetails, #ProfileFilterProgram {
        min-width: 70% !important;
    }
}

.ElementTitle {
    font-size: 18px;
}

.GalleryThumbFont span {
    font-size: 16px;
}
.GalleryThumbFontStrong span {
    font-size: 18px;
}


.galleryRow {
    background-color: #f8f8f8;
    border: 1px solid #cacaca;
    padding: 0px !important;
    margin-right: 15px;
    border-radius: 3px;
}

.table-striped.files.row {
    padding-left: 15px !important;
}

#galleryDelImg:hover {
    transform: scale(1.1);
    transition: ease-in;
    color: #ffffffba !important;
}

.field-validation-error {
    color: red;
    font-weight: bold;
}

.navbar.bg-light {
    background-color: #fff !important;
    border: none;
}

/* This section is to override/remove the border radius and box shadow of cards. */
.publicCard.card {
    box-shadow: 0 0 0px rgba(0, 0, 0, 0), 0 0px 0px rgba(0, 0, 0, 0) !important;
}

.card-img-top {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}
/* This section is to override/remove the border radius and box shadow of cards. */

.newsTitle:hover {
    color: #072a7d !important;
}

#publicCarousel .carousel-fade .carousel-inner .carousel-item {
    transition: opacity ease-in-out !important;  
}

#detailCarousel .carousel-fade .carousel-inner .carousel-item {
    transition: opacity ease-in-out !important;
}

.carousel-item {
    transition: transform 0.5s ease;
}

.NewsDetailTitle {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 5px;
}

.NewsDetailPublishdate {
    font-size: 14px;
    font-weight: 500;
    color: #444;
}

.detailThumbImg:hover {
    cursor: pointer;
    transform: scale(1.03);
    transition: 0.2s ease;
}

.carousel-indicators li {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    margin: 0px 5px;
}

.carousel-indicators li:hover {
    transform: scale(1.1);
    transition: 0.2s ease;
}


            /*  FOOTER DESIGN   */
#Socials {
    display: flex;
    justify-content: center;
}

#SocialsLabel {
    display: flex;
    justify-content: center;
    font-size: 20px;
}
.singleSocial {
    margin: 3px 13px;
    padding: 3px;
    width: 45px;
}

    .singleSocial i {
        font-size: 45px;
    }
    .singleSocial svg {
        width: 45px;
        height: 100%;
    }

    .singleSocial:hover {
        transform: scale(1.2);
        transition: 0.1s ease;
    }   /*  FOOTER DESIGN   */


#DetailYTSpanIcon:hover {
    transform: scale(1.1) !important;
    transition: 0.1s ease-in-out;
    color: #ff0000e8;
}

#TopVideo .card-img-top {
    height: 500px;
}

#detailCarousel .carousel-item img {
    height: 500px;
}

#detailEditorContent div img {
    max-width: 1100px;
}

#detailEditorContent img {
    width: -webkit-fill-available;
    height: auto;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    width: 30px;
    height: 30px;
}

a.carousel-control-prev:hover, a.carousel-control-next:hover {
    transform: scale(1.07);
    transition: 0.05s ease-in-out;
}

#drawer-header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    flex-direction: row !important;
    padding-right: 1.2rem;
}

.k-filebrowser .k-tiles-arrange .k-dropdownlist {
    width: 10rem !important;
}

.select2.select2-container.select2-container--bootstrap4 {
    width: auto !important;
}

#PublicBody nav.navbar {
    border-bottom: 1px solid #ddd !important;
}


#categories a {
    font-size: 20px;
    color: white;
    text-decoration: underline;
    align-items: stretch;
    height: 110px;
}

#categories a:hover {
    transform: scale(1.01);
}


/*  Mobile  */
@media only screen and (max-width: 992px) {
    #TopVideo .card-img-top {
        height: auto;
    }
    #detailCarousel .carousel-item img {
        height: auto;
    }
    #detailEditorContent p {
        width: auto !important;
        flex-wrap: wrap;
    }
    /*#detailEditorContent img {
        width: auto !important;
        max-width: 900px;
    }*/
    #carousel-indicators > div > img {
        height: 40px !important;
    }
    div.drawer {
        z-index: 999999;
        width: 85vw;
    }

    .drawer-footer {
        padding: 1.6rem 1rem !important;
    }

    .nav-link {
        padding: 0.5rem 0rem;
    }

    .nav-item span:hover {
        border-bottom: 0px solid #33333300;
        color: #111 !important;
    }

    #Socials {
        display: flex;
        justify-content: space-evenly;
    }

    .drawer-footer #Socials {
        display: flex;
        justify-content: space-around;
    }

    #SocialsLabel {
        display: flex;
        justify-content: center;
        font-size: 40px;
    }

    .singleSocial {
        margin: 0px 0px;
        padding: 0px;
        width: 40px;
    }

        .singleSocial i {
            font-size: 40px;
        }

        .singleSocial svg {
            height: 40px;
            width: 100%;
        }

        .singleSocial:hover {
            transform: scale(1.3);
            transition: 0.1s ease;
        }

        .carousel-indicators {
            margin-bottom: 0px;
        }

        .carousel-indicators li {
            height: 5px;
            width: 22px;
            border-radius: 10%;
            margin: 0px 5px;
        }

        .carousel-indicators li:hover {
            transform: scale(1.1);
            transition: 0.2s ease;
        }
}
                        /*  Web  */
@media only screen and (min-width: 992px) {
    div.drawer {
        display: none !important;
    }
    .drawer-backdrop.show {
        opacity: 0 !important;
    }
    .drawer-backdrop {
        background-color: #f5f5f500 !important;
        width: 0vw !important;
    }
    .nav-item span:hover {
        border-bottom: 3px solid #333;
        transition: 0.1s ease-in-out;
        color: #111 !important;
    }
}