@font-face {font-family: 'Tajawal';src: url(../webfonts/Tajawal-Medium.ttf);}
@font-face {font-family: 'JF';src: url(../fonts/JF-Flat-Regular.ttf);}

html {

    scroll-behavior: smooth;

  }

body{

    font-family: 'Tajawal', sans-serif;

    text-align: right;

}

p{
    font-weight: bold;
    font-family: 'JF', sans-serif;
    line-height: 2em;
}

/* Common used */

.rtl{

    direction: rtl !important;

}

.ltr{

    direction: ltr !important;

}

.bg-gray{

    background-color: #f4f4f4;

}

.hover-box-shaddow:hover{

    box-shadow: 0 0 5px 1px #80808030;

}

.hover-rotate-x:hover{

    transform: rotateX(360deg);

}

.transition-slow{

    transition: .8s all;

}

.transition-fast{

    transition: .3s all;

}

.z-1{

    z-index: 1;

}

.hover-rotate-parent:hover .hover-rotate{

    transform: rotateY(360deg);

}

.cursor-pointer{

    cursor: pointer;

} 

.img-review-place, .img-review-button{

    width: 100%;

    height: 200px;

    object-fit: cover;

}

.img-review-remove{

    position: absolute;

    left: 25px;

    top: 10px;

}

.img-review-preview{

    position: absolute;

    right: 25px;

    top: 10px;

}

.vertical-heading { 

    writing-mode:tb-rl;

    -webkit-transform:rotate(-180deg);

    -moz-transform:rotate(-180deg);

    -o-transform: rotate(-180deg);

    -ms-transform:rotate(-180deg);

    transform: rotate(-180deg);

    padding: 95px 0 40px 0;

}

  .vertical-heading:before { 

    content:"";

    padding-top: 25px;

    border-left: 2px dotted gray;

    bottom: 0;

    left: 7px;

    position: absolute;

}        

  .vertical-heading:after { 

    content:"";

    padding-top: 75px;

    border-left: 2px dotted gray;

    top: 0;

    left: 7px;

    position: absolute;

}



/* Unique styles */

.tooltip

{

    pointer-events: none;

}

.note-editor.note-frame .note-editing-area .note-editable

{

    text-align: initial;

}


.center-form-shaddow-effect

{

  position: relative;

}

.center-form-shaddow-effect:before, .center-form-shaddow-effect:after

{

  z-index: -1;

  position: absolute;

  content: "";

  bottom: 15px;

  left: 10px;

  width: 50%;

  top: 80%;

  max-width:300px;

  background: #777;

  -webkit-box-shadow: 0 15px 10px #777;

  -moz-box-shadow: 0 15px 10px #777;

  box-shadow: 0 15px 10px #777;

  -webkit-transform: rotate(-3deg);

  -moz-transform: rotate(-3deg);

  -o-transform: rotate(-3deg);

  -ms-transform: rotate(-3deg);

  transform: rotate(-3deg);

}

.center-form-shaddow-effect:after

{

  -webkit-transform: rotate(3deg);

  -moz-transform: rotate(3deg);

  -o-transform: rotate(3deg);

  -ms-transform: rotate(3deg);

  transform: rotate(3deg);

  right: 10px;

  left: auto;

}

.custom-checkbox-style-container {

    display: block;

    position: relative;

    transform: translateX(35%);

    cursor: pointer;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

  }

.custom-checkbox-style-checkmark {

position: absolute;

top: 0;

left: 0;

height: 15px;

width: 15px;

background-color: #d0cdcd;

/* border: 1px solid #b6b7b9; */

}

.custom-checkbox-style-container:hover input ~ .custom-checkbox-style-checkmark {

background-color: rgb(173, 170, 170);

}

.custom-checkbox-style-container input:checked ~ .custom-checkbox-style-checkmark {

background-color: #2196F3;

}

.custom-checkbox-style-checkmark:after {

content: "";

position: absolute;

display: none;

}

.custom-checkbox-style-container input:checked ~ .custom-checkbox-style-checkmark:after {

display: block;

}

.custom-checkbox-style-container .custom-checkbox-style-checkmark:after {

left: 5px;

top: 3px;

width: 4px;

height: 8px;

border: solid white;

border-width: 0 2px 2px 0;

-webkit-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

}

#homepage-navbar .navbar-nav li a.nav-link{

    /* color: white; */

    opacity: .9;

    min-width: 114px;

    transition: .3s all;



}

#homepage-navbar .navbar-nav li a.nav-link:hover{

    opacity: 1;

    background-color: #dc3545;

    color: white;

}

#top-header.navbar-scrolled{

    opacity: 0; 

}

#homepage-navbar.navbar-scrolled{

    position: fixed;

    width: 100%;

    z-index: 101;

    top:0;

}

#homepage-navbar.navbar-scrolled .navbar-brand img{

    width:150px;

}
@media(max-width: 1024px){
    #homepage-navbar .navbar-collapse{
        position: fixed;
        background: #b92a38fa;
        top: 0px;
        right: 0px;
        width: 50vw;
        height: 100vh;
        z-index: 2147483647;
        transition: 0.3s all;
        opacity: 1;
    }
    
    #homepage-navbar .navbar-nav li a.nav-link {
        color: white;
        text-align: right;
        padding: 15px 25px;
        font-size: .85em;
    }
    
    #homepage-navbar .navbar-nav li a.nav-link i.fa{
        padding-left: 20px;
    }
    
    
    .collapse:not(.show) {
        display: flex;
        right: -50vw !important;
    }
    
    #homepage-navbar .navbar-nav{
        height: 100vh;
        padding-right: 0;
        padding-top: 5px;
    }
}

#index-wrapper #header {

    height:100%;

    width:100%;

    position:relative;

    }

#index-wrapper #header #carouselExampleFade{

    position:absolute;

    width:100%;

    height:100%;

    z-index:-1;

}

#index-wrapper #header .carousel,

#index-wrapper #header .carousel-inner {

    width:100%;

    height:100%;

    z-index:0;

    overflow:hidden;

}

#index-wrapper #header .item {

    width:100%;

    height:100%;

    background-position:center center;

    background-size:cover;

    z-index:0;

}

/* #content-wrapper {

    position:absolute;

    z-index:1 !important;

    min-width:100%;

    min-height:100%;

} */





#header{

    position: relative;

    /* background:#262626 url('../img/index-car-bg.jpg') center no-repeat; */

    background-size: cover;

    background-color: white;

}

#header:after{

    left: 0;

    top: 0;

    content: "";

    position: absolute;

    width: 100%;

    height: 100%;

    background:#0e315dc4;

}



#index-wrapper #contact{

    position: relative;

}



/* #index-wrapper #contact:hover:after{

    filter: grayscale(0%);

    /* opacity: 1; */

} */



/* #index-wrapper #contact::after{

    content:"";

    position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    width: 100%;

    background: url(../../assets/img/index-car-bg-1.png) left no-repeat;

    filter: grayscale(100%);

    z-index: -1;

    transition: all .5s;

    opacity: 0.3;

} */



/* Data Table */

#DataTables_Table_0_wrapper #DataTables_Table_0_length{

    text-align: center;

    margin-bottom:20px;

}

@media(min-width:720px){

    #DataTables_Table_0_wrapper #DataTables_Table_0_length{

        text-align: right;

    }

}

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: 1px solid #dee2e6;

}

.dt-print-view{
    direction: rtl;
}

.dt-print-view .d-print-none{
    display: none;
}


#DataTables_Table_0_wrapper #DataTables_Table_0_filter{

    text-align: center;

    margin-bottom:20px;

}

#DataTables_Table_0_wrapper .dataTables_filter label {

    width: 100%;

    text-align: center;
}

#DataTables_Table_0_wrapper .dataTables_filter input {

    display: block;
/* 
    margin-right: 0.5em;

    margin-left: 0; */

    margin-top: 10px;

    width: 100%;

}



#DataTables_Table_0_wrapper #DataTables_Table_0_info{

    text-align: right;

    margin-top: 20px;

}



#DataTables_Table_0_wrapper #DataTables_Table_0_paginate{

    text-align: center;

    margin-top: 20px;

}



/* Bootstrap */

.page-item:first-child .page-link {

    border-radius: 0 .25rem .25rem 0;

}

.page-item:last-child .page-link {

    border-radius: .25rem 0 0 .25rem;

}

/* fast select */
/* 
.fstSingleMode .fstQueryInput, .fstElement{

    display: block;

    width: 100%;

    height: calc(1.5em + .75rem + 2px);

    padding-top: .375rem;

    padding-bottom: .375rem;

    font-size: 1rem;

    font-weight: 400;

    line-height: 1.5;

    color: #495057;

    background-color: #fff;

    background-clip: padding-box;

    border: 1px solid #ced4da;

    border-radius: .25rem;

}

.fstNoResults {

    font-size: 1em;

}

.fstSingleMode.fstActive .fstControls{

    margin-top: -2px;

}

.fstResultItem {

    font-size: 1em;

    padding: .5em .71429em;

}

.fstToggleBtn {

    font-size: 1em;

    padding: 0 .95rem;

}

.fstToggleBtn:after {

    right: unset;

    left: 1em;

} */


/* Select 2 */
.select2-container{
    width: 100% !important;
}

.select2-container .select2-selection--single {
    height: 38px;
    border: 1px solid #ced4da;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 2.5;
}

/* Loader */

.loader{

    position: fixed;

    top: 0;

    right: 0;

    width: 100%;

    height: 100%;

    background-color: white;

    z-index: 1000;

}

.loader .gooey{

position: absolute;

top: 50%;

left: 50%;

width: 160px;

height: 40px;

margin: -20px 0 0 -71px;

background: white;

filter: contrast(20);

}

.loader .dot{

position: absolute;

width: 16px;

height: 16px;

top: 12px;

left: 15px;

filter: blur(4px);

background: #000;

border-radius: 50%;

transform: translateX(0);

animation: dot 2.8s infinite;

}   

.loader .dots{

transform: translateX(0);

margin-top: 12px;

margin-left: 31px;

animation: dots 2.8s infinite;

}

.loader span{

    display: block;

    float: left;

    width: 16px;

    height: 16px;

    margin-left: 16px;

    filter: blur(4px);

    background: #000;

    border-radius: 50%;

}

@keyframes dot{

    50% {transform: translateX(75px);}

}

@keyframes dots{

    50% {transform: translateX(-20px);}

}

/* sidebar */

.page-wrapper.toggled .sidebar-wrapper {

    left: unset;

    right: 0px;

    text-align: right;

}

@media (min-width: 1px) and (max-width: 1024px) {
  
    .page-wrapper.toggled .sidebar-wrapper {
        right: -280px;
    }

    .page-wrapper.toggled.sidebar-hovered .sidebar-wrapper {
        right: 0px;
    }

    .page-wrapper.toggled .page-content .overlay {
        display: none;
    }

    .page-wrapper.toggled.sidebar-hovered .page-content .overlay {
        display: block;
    }
    
  }

@media screen and (min-width: 768px){

    .page-wrapper.toggled .page-content {

        padding-left: unset;

        padding-right: 80px;

    }

}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after {

    content: "\f104";

    right: unset;

    left: 25px;

    top: unset;

}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after {

    -webkit-transform: rotate(-90deg);

    transform: rotate(-90deg);

    right: unset;

    left: 25px;

}

.sidebar-wrapper .sidebar-menu ul li a {

    padding: 15px 20px 15px 30px;

}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before {

    margin-right: unset;

    margin-left: 10px;

}

.mCS-dir-rtl>.mCSB_inside>.mCSB_container {

    margin-right: 0;

    margin-left: 0;

}

.sidebar-wrapper .sidebar-menu ul li a i {

    margin-right: unset;

    margin-left: 10px;

}

.sidebar-wrapper .sidebar-menu ul li a .menu-text {

    text-align: right;

}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .badge, .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .label {

    margin-left: unset;

    margin-right: auto;

}

.sidebar-brand{
    top: 0;
}

.sidebar-wrapper .sidebar-brand > a {

    text-align: center;

}

.sidebar-wrapper .sidebar-header .user-pic {

    margin-right: unset;

    margin-left: 15px;

}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li {

    padding-left: unset;

    padding-right: 25px;

}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul {

    padding: 10px 0;

}

.default-theme .sidebar-wrapper .sidebar-menu a:hover i, .default-theme .sidebar-wrapper .sidebar-menu a:hover:before, .default-theme .sidebar-wrapper .sidebar-menu li.active a i {

    color: #1f8ed2;

}

#toggle-sidebar{

    position: fixed;

    right: 20px;

    bottom: 20px;

    border-radius: 50%;

    z-index: 2;

    box-shadow: 1px 1px 4px 0.6px #0000008e;

    width: 60px;

    height: 60px;

    line-height: 55px;

    font-size: 35px;    
    
    background-color: #ec0b43;

    border-color: #c90b3b;

}

.sidebar-wrapper {

    left: unset;

    -webkit-transition: left unset;

    transition: left unset;

    right: -280px;

    -webkit-transition: right .3s ease, width .3s ease;

    transition: right .3s ease, width .3s ease;    

}

.page-wrapper.pinned:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .user-pic {

    width: 43px;

}

.default-theme.sidebar-bg .sidebar-wrapper:before {

    background-color: #292d40;

}

.default-theme.sidebar-bg .sidebar-wrapper .sidebar-menu ul li a i {

    background-color: #2e4f77;

}

.default-theme.sidebar-bg .sidebar-wrapper .sidebar-menu .sidebar-dropdown div {

    background-color: #2d435d;

}

.default-theme .sidebar-wrapper .sidebar-menu .header-menu span {

    color: #dedede;

}

.default-theme.sidebar-bg .sidebar-wrapper .sidebar-menu ul li a i:hover {

    background-color: #1e3d63;

}

.default-theme .sidebar-wrapper .sidebar-menu a:hover i, .default-theme .sidebar-wrapper .sidebar-menu a:hover:before, .default-theme .sidebar-wrapper .sidebar-menu li.active a i {

    color: #e6e6e6;

}

@media (min-width: 1px) and (max-width: 1024px) {
    .container.p-5{
        padding: 3rem 1rem !important;
    }
  }

.note-toolbar{
    direction: ltr;
}