@import url(https://fonts.googleapis.com/earlyaccess/droidarabickufi.css);

  html,p,h1,h2,h3,h4,h5,h6,p,a,th,td{
      font-family: 'Droid Arabic Kufi', serif;

  }
 .content-wrapper{
     background-color:#cccccc;
              background-size: 100% 100% !important;

  }
.box-primary{
    overflow-x: auto;
}
.box-primary .table th{
    text-align: center;
    font-size: 16px;
}
.box-primary .table td{
    text-align:center;
    font-size: 15px;
}
.tr:hover{
    background-color: #b9cef3;
    cursor: pointer;
}
.box-primary .table li{
    font-size:19px;
}
.box-primary .table .btn{
    height: 25px;
    line-height: 10px;
    font-size: 15px;
}
.left{
    float:left;
}

.right{
    float:right;
}

/* min Jquery CSS elements for autocomplete */
.ui-autocomplete { position: absolute; cursor: default; }    
.ui-menu { list-style:none; padding: 2px; margin: 0; display:block; float: left; background-color:#f9f9f9; border: 1px solid #efefef; border-radius: 3px 3px 3px 3px; }

.ui-menu .ui-menu {
        margin-top: -3px;
}
.ui-menu .ui-menu-item {
        margin:0;
        padding: 0;
        zoom: 1;
        float: left;
        clear: left;
        width: 100%;
        font-family:arial;
}
.ui-menu .ui-menu-item a {
        text-decoration:none;
        display:block;
        padding:.1em .3em;
        line-height:1.5;
        zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover, .ui-menu .ui-menu-item a.ui-state-active {
        font-weight: bold;
}



/* Responsive*/


/*==========  Mobile First Method  ==========*/
 
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
    .box-primary h4{
        font-size: 13px;
    }
    .box-primary .table th{
    text-align: center;
    font-size: 12px;
}
.box-primary .table td{
    text-align:center;
    font-size: 12px;
}
}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
 .box-primary h4{
        font-size: 13px;
    }
    .box-primary .table th{
    text-align: center;
    font-size: 12px;
}
.box-primary .table td{
    text-align:center;
    font-size: 12px;
}
    
    
}


/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
   .box-primary h4{
        font-size: 13px;
    }
    .box-primary .table th{
    text-align: center;
    font-size: 12px;
}
.box-primary .table td{
    text-align:center;
    font-size: 12px;
}
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
 .box-primary h4{
        font-size: 16px;
    }
    .box-primary .table th{
    text-align: center;
    font-size: 15px;
}
.box-primary .table td{
    text-align:center;
    font-size: 14px;
}
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
 .box-primary h4{
        font-size: 16px;
    }
    .box-primary .table th{
    text-align: center;
    font-size: 15px;
}
.box-primary .table td{
    text-align:center;
    font-size: 14px;
}
}
.add{
    min-height: 750px;
}
.success{
    color:green;
}
.wrong{
    color:red;
}

.navbar{
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );  opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
}
.dropdown-toggle{
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );   opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
    
}
.logo{
    background:#0b499e !important;
    color:white;
    
}
.logo-lg, .logo-mini{
    background:#0b499e !important;
    color:white;
}
.main-footer{
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
color:#7faeef;
height: 50px;
}


.main-footer p{
    text-align: left;
    font-weight: bold;
}
.main-sidebar{
        border-top:2px solid #F54489;
}
.user-header{
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
}
.box-primary{
    border-color:#F54489 !important;
}
.text-primary{
    color:#1e5799;
}
.box-title{
        color:#1e5799;

}
.label-primary{
     background-color:#05ab3c;
}
.content-header{
    padding:20px;
}
.content-header h1{
    color:#05ab3c;
    margin-right:5%;
}
.p_info{
    padding:20px;
}
.modal-dialog{
    margin-top:100px;
}
.modal-header{
    background-color: #ef017c;
    color:white;
}
.modal-header .close{
    color:white !important;
    font-size: 15px;
  
}
.modal-body input{
    margin-bottom:30px;
}
.pp{
    padding:0px;
    margin:30px;
}

.package{
    width:100%;
    height: 180px;
    border-radius: 0px;
    margin-bottom: 30px;
    -webkit-box-shadow: 0px -1px 2px 0px rgba(147,161,250,1);
-moz-box-shadow: 0px -1px 2px 0px rgba(147,161,250,1);
box-shadow: 0px -1px 2px 0px rgba(147,161,250,1);
    color:white !important;

}

.package .image {
    width:100%;
}
.package .image img{
    width:100%;
    height: 140px;
}
.price{
    background-color:#ef017c;
    color:white !important;
    padding:4px;
    height:50px;
  -webkit-box-shadow: -1px 1px 5px 0px rgba(240,48,173,1);
-moz-box-shadow: -1px 1px 5px 0px rgba(240,48,173,1);
box-shadow: -1px 1px 5px 0px rgba(240,48,173,1);
        border-radius: 20px 20px 0px 0px;

}
.price h4{
    text-align: center;
    color:white;
    line-height: 15px;

}
.p_name{
    background-color:#ef017c;
    height: 45px;
    padding:2px;
    color:white !important;
    margin-bottom: 20px;
    border-radius: 0px 0px 20px 20px;
}

.p_name h5{
    text-align: center;
    color:white;
    
}

.p_name h4{
    text-align: center;
    color:white;    
    
}
.package:hover{
    cursor: pointer;
    -webkit-box-shadow: 0px -2px 1px 0px rgba(147,161,250,1);
-moz-box-shadow: 0px -2px 1px 0px rgba(147,161,250,1);
box-shadow: 0px -2px 1px 0px rgba(147,161,250,1);
}

.no{
   width:120px;
    background-color: #b9cef3;
    border-radius:0px;
    float: right;
    padding:5px;
   height: 30px;
    margin:3px;
}
.numbers{
    height: 200px;
    overflow-y: auto;
    overflow-x: auto;
    border:1px solid #2989d8;
    padding:10px;
    margin-bottom: 20px;
}

.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}
.auto_input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}
.auto_input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}
.auto_input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9; 
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}
.table{
    overflow-x: auto !important;
}
.box{
        overflow-x: auto !important;

}
.form-group{
    margin-bottom: 25px !important;
}
.content-wrapper{
    height: 100%;
    overflow: hidden;
}

   .navbar-nav .m_item{
       border:none !important;
       border-left: none !important;
       float:right !important;
       text-align: right !Important;

   }
   .navbar-nav li a{
                     border-left: none !important;

   }
   .navbar-nav li a span{
       color:white;

   }
   .box-header h5{
       color:#e31b1b;
   }
   .box-header h3{
       color:white;
background: #ff309; /* Old browsers */
background: -moz-linradient(to bottom, #ff3019 0%,#cf0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXIm1aear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-ggeTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );       border-radius: 5px;
       padding-top:10m: 10px;
       padding-left: 20px;
       padding-rightpx;
       padding-botto: 20px;
       float: right;
    
   }
   .box-header h4{
       color:white!important;
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );       border-radius: 5px;
       padding-top:10px;
       padding-bottom: 10px;
       padding-left: 20px;
       padding-right: 20px;
       float: right;
    
   }
    .title{
       color:white !important;
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );       border-radius: 5px;
       padding-top:10px;
       padding-bottom: 10px;
       padding-left: 20px;
       padding-right: 20px;
       float: right;
    
   }
   .box{
       overflow-x:auto !important;
   }
   .btn{
       border-radius:  0px; 
   }
   .has-error .help-block {
       top:5px;
   }

   .margin_pp{
       margin:30px !important;
   }
   #login_a_message{
       text-align: center !important;
   }
   .show_packages{
       overflow-y:no-display;
   }
   .close{
      width:15px;
      height: 15px;
   }
   .op tr th{
       font-size: 13px !important;
   }
   
   .invoices td{
       font-size: 12px !important;
   }
   
   .detail th{
       text-align: right;
   }
   .btn-primary{
       background-color: #F54489 !important;
       border:none;
   }
   .padding-5{
       margin-bottom: 5px;
   }
   .search_date input{
       height:28px;
   }
   .search_date .btn{
       height: 28px;
       width:115%;
   }
   .par{
       color:black;
       text-align: center;
       margin:2px;
   }
   .notify{
       text-align: center;
       background-color:#f0eef0;
       padding:2px;
       color:#0b499e;
       
   }
   .welcome{
       background-color: #F54489;
       color:white;
       padding:4px;
       height: 30px;
       text-align: center;
       font-weight: bold;
   }
   .welcome a{
       color:white !important;
   }
   .main_table th{
      font-size: 12px !important;
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );  
      text-align: center !important;
color:white;

   }
     .main_table td{
      font-size: 15px !important;
      text-align: center !important;

   }
   .main_table tr:hover{
       background-color: #fbafaf;
   }
   .main_label{
       width:99%;
       margin:0px auto;
         background-color: #F54489;
         height:50px;
         border-radius: 5px;
         color:white;
         text-align: center;
         line-height: 50px;
         font-weight: bold;
         margin:5px;
         font-size: 14px !important;
   }
   
   .main_lbl a{
       font-size: 13px !important;
   }
   /* entire container, keeps perspective */
.flip-container {
  -webkit-perspective: 1000;
  margin: 50px auto;
  
}

/* flip the pane when clicked */

.flip-container, .front, .back {
	width:100%;
}

/* flip speed goes here */
.flipper {
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	position: relative;
        height:260px;
        padding:0px;
        
}
.flipper:hover{
    cursor: pointer;
}

/* hide back of pane during swap */
.front, .back {
	-webkit-backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;

}

.front img{
    width:100%;
    height:170px;
    
}
/* back, initially hidden pane */
 .glyphicon-send , .glyphicon-info-sign , .glyphicon-refresh , .glyphicon-stop{
       color: #F54489 !important;
   }
   .text-danger{
       color: #c815a8 !important;

   }
   .customer_info a{
       color:#c815a8 !important;
   }
   .fa-credit-card{
       color:#F54489;
   }
   .glyphicon-refresh{
       color:#de3f8c !important;
   }
   .price_btn{
       background-color: #bd1868 !important;
   }
   .main_label{
       font-size: 13px !important;
   }
   .main_lbl a{
       font-size: 13px !important;
   }
   .m_item a:hover{
       color:white !important;
       background-color: #0b499e !important;
   }

  .product_name{
      color:white;
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );       text-align: center;
      padding:10px;
      border-radius: 5px;
      
  }
  .p_item{
      width:100% !important;
      float:right;
      height: 240px;
      border-radius:10px;
      padding:2px;
      background-color: whitesmoke;
      border:0.5px solid #e01212;
      margin:10px;
      
  }
  .p_item img{
      width:100% !important;
      height:80% !important;
      border-radius: 10px 10px 0px 0px ;
  }
  .p_item h5{
      width:100%;
      background-color: whitesmoke;
      text-align: center;
      color:#e01212;
      font-size:14px !important;
  }
  .p_item:hover{
      cursor: pointer;
      border:2px solid #d10b0b;
  }
  .main_table .fa , .glyphicon{
      color: #e31b1b !important;
  }
  .btn-danger{
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );  
color:white !important;  
  
  }
  .btn-danger .glyphicon{
      color:white !important;
  }
    .info-box{
            background-color:whitesmoke;
            cursor: pointer;
        }
  .info-box-number{
      color:black;
  }
  .info-box-text{
      color:Red;
  }