@charset "utf-8";

@font-face {

   font-family: myFirstFont;

   src: url(../fonts/DroidKufi-Regular.ttf), url(../fonts/DroidKufi-Regular.eot) format('truetype');

}
*:focus {
  outline: none;
}
body{margin:0px; padding:0px; font-family: 'myFirstFont', serif; font-size:12px; font-weight: 100}

a{text-decoration: none; color: royalblue;}

.body{position: relative; width: 100%; min-height: calc(100vh - 0px); background-color: #ffffff;; direction: rtl; text-align: right;}
.contant{max-width: 1300px; margin: auto; left: 0px; right: 0px; position: relative;}

.overlay{position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 149; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */}

.shadow{box-shadow: 0 3px 6px -2px gray;}

.table {width: 100%; display: table; table-layout: fixed; position: relative}
.table .table_row{width: 100%; display: table-row; position: relative}
.table .table_row .table_cell{ display: table-cell; position: relative; vertical-align: middle;}

.padding-5px{padding: 5px;}

.fas{font-size: 1.1em;}
.far{font-size: 1.1em;}
.spinner{position: fixed; z-index: 1000; left: calc(50% - 45px); top: 50%; bottom: 50%; color: #8ebbc1;}

.hint{font-size:10px; color: #b0b0b8; }

/* <!------------------------------------- top header --------------------------------> */
#topHeader{ position: relative; height: 30px; line-height: 30px; font-size: 10px; width: 100%; color: #231f20; direction: rtl;}
#topHeader .right{position: absolute; margin: auto; right: 0px; top: 0px; text-align: right;}
#topHeader .left{position: absolute; margin: auto; left: 0px; top: 0px; text-align: left;}
#topHeader ul{margin: 0px; padding: 0px;}
#topHeader ul li{display: inline; margin: 0px; padding: 0px; padding: 5px; cursor: pointer;}
/* <!------------------------------------- top header --------------------------------> */

/* <!------------------------------------- mid header --------------------------------> */
#midHeader{ position: relative; line-height: 30px; font-size: 10px; width: 100%; color: #cdad3c; background-color: indigo; height: 120px; }
#midHeader .left{text-align: left;}
#midHeader .right{text-align: right;}
#midHeader .center{text-align: center;}
#midHeader img{max-height: 100px; padding: 0px; margin-top: 10px;}
#midHeader ul{margin: 0px; padding: 0px;}
#midHeader ul li{display: inline; margin: 0px; padding: 0px; padding: 5px;}
/* <!------------------------------------- mid header --------------------------------> */

/* <!------------------------------------- mid header fixed --------------------------------> */
#midHeaderFixed{ position: fixed; line-height: 30px; font-size: 10px; width: 100%; margin: auto; left: 0px; right: 0px; top: 0px; background-color: #231f20; z-index: 50; overflow: hidden; display: none; color: #cdad3c;}
#midHeaderFixed .left{text-align: left;}
#midHeaderFixed .right{text-align: right;}
#midHeaderFixed .center{text-align: center;}
/* <!------------------------------------- mid header fixed --------------------------------> */

/* <!------------------------------------- footer --------------------------------> */
#footer{ width: 100%; min-height: 100px; color: rgb(112, 112, 112); background-color: indigo;}
/* <!------------------------------------- footer --------------------------------> */


/* <!------------------------------------- menu --------------------------------> */
#menu{
   background: #333;
    color: #fff;
    position: fixed;
    right: 0;
    top: 0px;
    width: 300px;
    height: 100vh;
    z-index: 150;
    margin-right: -300px;
}
/* <!------------------------------------- menu --------------------------------> */

.cursor{ cursor: pointer;}

input[type=text],[type=password],[type=tel],[type=email], select ,textarea {

  /* Remove First */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none !important;
  width: 80%;
  padding: 4px 15px;
  margin: 8px 0;
  border: 1px solid #ccc;
  box-sizing: border-box;
  text-align:right;
  font-family: 'myFirstFont';
  border-radius: 5px;
  direction: rtl;
}

button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'myFirstFont', serif; font-size:12px; font-weight: 100;
  padding: 5px; margin: 5px;
}

.button {
    background-color: indigo;
    width: 100%;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1em;
    cursor: pointer;
    border-radius: 36px;
    height: 36px;
    font-family: 'myFirstFont';
  }

  .button:hover {
    background-color: #312f30;
  }

.alert{
  position: fixed;
  width: 80%;
  min-height: 100px;
  max-height: 75%;
  border: 3px solid indigo;
  z-index: 150;
  border-radius: 5px;
  background-color: lightcyan;
  margin: auto;
  top: 15%;
  left: 0;
  right: 0;
  display: none;
  overflow: auto;
  
}
.alert #alert_title{color: lightcyan; text-align: center;}
.alert #alert_body{text-align: center; position: relative;}
.alert button{margin: 3px;}
.alert .red{background-color: tomato; color: lightcyan;}
  
.searchlogo{position: absolute; margin: auto; top: calc(50% - 9px); left: -5px; font-size: 18px; cursor: pointer; border-right: 1px solid rgba(0, 0, 0, 0.5); width: 30px;}

.menu_slider {
  margin: auto;
  top: -12px;
  position: relative;
	margin: 0px;
	padding: 0px;
  width: 100%;
    /*overflow-x: scroll;*/
    /*background: #8ebbc1;*/
    /*white-space: nowrap;*/

  color: #FFFFFF;
  background-color: #980DFF;
	direction: rtl;
	text-align: right;
}

.menu_slider li {
    display: inline-block;
	vertical-align: middle;
    margin: 5px;
    padding: 2px 5px 2px 5px;
    /* if you need ie7 support */
    *display: inline;
    background-color: indigo; /*fac4c6*/
    border-radius: 5px;
    cursor: pointer;
    
}
.menu_slider li:hover
{
    background-color: #231f20;
    color: #fff;
}

.menu_slider .select
{
    background-color: #231f20;
    color: #fff;
}



h2{ color:#cdad3c;}

hr { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }

.box{display: inline-table; border: 1px solid #980DFF; border-radius: 10px; margin: 10px; cursor: pointer;}
.box:hover{background-color: rgb(233, 233, 233);}
.box .img{width: 100%; height: 189px; vertical-align: middle; position: relative;}
.box .title{width: 100%; min-height: 50px; vertical-align: middle; padding: 10px; text-align: right;}
.box .about{width: 100%; min-height: 50px; vertical-align: middle; padding: 10px; text-align: right;}
.box .about .readmoor{display: none;}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}


.card{margin-bottom: 10px; border: 1px solid #980DFF; border-radius: 5px; padding: 0px; position: relative;}
.card header{background-color: #980DFF; padding: 5px; position: relative; color: #FFFFFF;}
.card header .far{font-size: 1.5em;}
.card header .fas{font-size: 1.5em;}
.card .cbody{padding: 5px; position: relative;  margin-left: 0px;}

.expandable{position: relative;}
.expandable .fas{font-size: 0.5em; margin: 5px; color: darkgrey;}
.expandable .expandable-header{position: relative; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.1); height: 40px; line-height: 40px; cursor: pointer; font-size: 1.3em;}
.expandable .expandable-header:hover{font-weight: bold; color: green; background-color: #DFDFDF;}
.expandable .expandable-header .right{position: relative; margin: auto; right: 0px; display: inline-block; float: right;}
.expandable .expandable-header .left{position: relative; margin: auto; left: 5px; display: inline-block; float: left;}
.expandable .expandable-content{display: none; padding: 5px; background-color: #edf4f5; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }

.mylist{position: relative; width: 100%; direction: rtl;}
.mylist .item{position: relative; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.1); min-height: 40px; line-height: 40px; font-size: 1em;}
.mylist .item:hover{font-weight: bold; color: green; background-color: #DFDFDF;}
.mylist .item .right{position: relative; margin: auto; right: 0px; display: inline-block; float: right;}
.mylist .item .left{position: relative; margin: auto; left: 0px; display: inline-block; float: left;}
.mylist .item .center{position: relative; margin: auto; left: 0px; display: inline-block; width: 100%;}
.mylist .item .list-item__thumbnail{height: 40px; width: 40px; position: relative; border-radius: 50%; overflow: hidden;}


.padge{position: absolute; width: 1.5em; height: 1.5em; color: #edf4f5; background-color: red; font-size: 1em; text-align: center; line-height: 1.5em; border-radius: 50%; margin-top: -8px; margin-right: -7px; font-weight: bold; padding: 3px; display: none; cursor: pointer;}
.padge_fav{ color: #edf4f5; background-color: tomato; text-align: center; font-weight: bold; padding: 0 5px 0 5px; float: left; }


#login{position: fixed; width: 100%; height: 100vh; background-color: #fff; z-index: 1000; display: none;}
#login .loginbody{ width: 50%; height: 80%; position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; text-align: center; padding: 10px;}

#slideAds{ width:100%; height:100%; position: relative; overflow: hidden; white-space: nowrap; text-align: center;}

#slideAds .slideAdsDiv{position: relative; width:100%; display: inline-block; padding: 0px;}

#slideAds .background{background-size:cover; -webkit-filter: blur(30px); -moz-filter: blur(30px); -o-filter: blur(30px); -ms-filter: blur(30px); filter: blur(30px); width: 100%; height: calc(100% - 80px); position: absolute; }

#slideAds .slideAdsDiv img{margin: auto; left: 0; right:0; max-width:100%; max-height: 100%; position: relative; z-index: 1; padding: 0px; margin: 0px; bottom: 0px;}


#popup{position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 149; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */}
#popup .popup_contant{background-color: whitesmoke; height: calc(100vh - 100px); width: calc(100vw - 100px); position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; border-radius: 10px; z-index: 150;}
#popup .popup_contant .popup_head{position: absolute; margin: auto; top: 0; height: 50px; line-height: 50px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); width: 100%; font-size: 1.3em; color: rgba(0, 0, 0, 0.7);;}
#popup .popup_contant .popup_head .right{position: relative; margin: auto; right: 10px; display: inline-block; float: right;}
#popup .popup_contant .popup_head .left{position: relative; margin: auto; left: 10px; display: inline-block; float: left;}
#popup .popup_contant .popup_body{position: absolute; margin: auto; top: 51px; width: 100%; font-size: 0.9em; overflow-y: auto; height: calc(100vh - 160px); direction: rtl; text-align: right;}
#popup .popup_contant .popup_body .popup_description{padding: 5px;}


.card_in_paskit {position: relative}
.card_in_paskit .close {position: absolute; height: 30px;  width: 30px; vertical-align: middle; margin: auto; top: 5px; left: 5px; font-size: 22px; color: tomato; font-weight: 100; text-align: center; line-height: 30px; z-index: 100;}
.card_in_paskit .price {position: absolute; height: 20px; vertical-align: middle; margin: auto; bottom: 35px; left: 5px; font-size: 18px; font-weight: bold}
.card_in_paskit .img {position: relative; height: 80px;  width: 80px; vertical-align: middle;}
.card_in_paskit .cont {position: relative; height: 80px; vertical-align: top; text-align: right; direction: rtl; padding-right: 10px}
.card_in_paskit .table_cell img{position: absolute; margin: auto; right: 0px; left: 0px; top:0px; bottom: 0px; max-height: 80px; max-width: 80px; border-radius: 5px}
.card_in_paskit .vat_include_string{position: absolute; margin: auto; bottom: 5px; left: 5px;}

#alert_message{width: 93%; position: fixed; margin: auto; top: 20px; left: 0; right: 0; padding: 15px; color: white; z-index: 100; border-radius: 5px; font-size: 1.5em; text-align: center; display: none;}

@media screen and (max-width: 1080px) {
  .inline{margin: 0px; width: 98%; display: inline-block; min-height: 100px;  vertical-align: top;}
  .iBox{width: 47%; height: 230px; margin: 2px; margin-bottom: 4px;}
  #login .loginbody{ width: 80%;}

  .contant{width: 98%; margin: auto; left: 0px; right: 0px; position: relative;}
  
  
  /* <!------------------------------------- mid header fixed --------------------------------> */
#midHeaderFixed{ border-radius: 0px;}
#midHeaderFixed .left{text-align: left;}
#midHeaderFixed .right{text-align: right;}
#midHeaderFixed .center{text-align: center;}
/* <!------------------------------------- mid header fixed --------------------------------> */

#popup .popup_contant{width: calc(100vw - 50px);}

.menu_slider{ position: relative; overflow-x: auto; white-space:nowrap; -webkit-overflow-scrolling: touch; -ms-overflow-style: none;}

.wrapper {
  display: grid;
  grid-template-columns: 1fr;
}

}