body{
      padding: 0px;
      margin: 0px;
      background-color:  #f9faf5;
     }
      body::-webkit-scrollbar {
          width: 1em;
      }
       
      body::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      }
       
      body::-webkit-scrollbar-thumb {
        background-color: darkgrey;
        outline: 1px solid slategrey;
      }

        .navbar .navbar-default{
          background-color: #337ab7;
          color: #fff;
        }
        .row-main{ 
          padding-right: 4px; 
          padding-left: 4px; 
          font-family: 'Droid Arabic Naskh','droid-arabic-naskh','Amiri', 'Scheherazade','DroidArabicNaskhRegular','Mirza'; 
          font-size: 14px;
          font-weight: bold;; 
        }
        .source{padding-left: 3px ; padding-right: 1px; padding-bottom: 10px} 

         .box, .rssbox {
        display: block;
        margin: 0px 0px 0px 0px; 
        padding:2px 1px 2px 5px;  
        
      }
        
      .box{

        background: #fff;
        box-shadow: 4px 6px 8px rgba(0, 0, 0, 0.15);
        border-radius: 10px 0px 10px 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        
      }

      .rssbox {
        min-width: 180px;
        padding-right: 4px;
        border-radius: 10px;
        direction: rtl;
      }
      .box-title {
        font-size: 1.1em; 
        color: white;
        background: #d9ffcc;
        width: 150px;
        display: inline-block; /*cons*/
        text-align: center;
        
        padding:3px 10px 00px 10px; 
        border-bottom: 2px solid rgba(0, 0, 0, 0.2);
        box-shadow: 0 1px 15px rgba(0, 0, 0, 0.15);
        border-radius: 10px 10px 00px 0px;


      }
      .fav{
        cursor: pointer;
        background: url('images/fav.png');
        background-repeat: no-repeat;
        background-size: 23px;
        width: 48px;
        height: 48px;

      }

      .fav.active{
        background: url('images/nofav.png');
        background-repeat: no-repeat;
        background-size: 23px;
      }



      .button-container > div {
        max-width: 95%;
      }
      .left-button {
        float: left;

      }
      .title .left-button{max-width: 5%;
      }

      


      .left-button > a{

        height: 20px;  
        width: 20px;
      }

      .box .left-button > a{

        display: block; 
        float: left; 
        margin-right: 10px; 
      }
      .rssbox .left-button > a {

        color: white; 
        display: block;  
      }

      .right-button {
        float: right;    
        min-height: 27px;
        padding-top: 2px;
      }
      b{
        color:white; 
        font-weight: normal;
      }
      .box p, .rssbox p {
        border-bottom: 1px solid #EBEBEB;        
        margin: 0;     
        padding-right: 2px
      }

      .box p img[data-toggle], .rssbox p img[data-toggle]{
        padding:0px;    
        padding-left: 4px;
      }

      .inrssbox{
        background: #01224f; 
        font-weight: bold; 
        padding: 3px; 
        margin-bottom: 10px;
      }
      .inrssbox .right-button div {
        white-space: nowrap; 
        max-width:130px; min-width:90px;  
        text-align: center;  
        border-radius: 10px; 
      }
      .inrssbox .right-button {
        padding-top: 0
      }

      @media(min-width:767px){

        .button-container > div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        }
        *::-ms-backdrop, .button-container > div{
          text-overflow: clip; 
        }/* IE11 */

      }


      @media(max-width:500px){

       .button-container > div {
        /*max-width: 85%;*/
        }                

      }





      .title  { 
        display: block;
        margin: 0px 0px 0px 0px; 
        padding:2px 1px 2px 5px;  
        border-radius: 10px 10px 10px 10px;
      }      


      .title p{ 
        border-bottom: 1px solid #EBEBEB;
      }      
      .noborders{
        border-width: 0!important;
      }
      .new-title  { background-color: #e6ffe5;
      }


      a:link {
          text-decoration: none;
      }

      a:visited {
          text-decoration: none;
      }

      a:hover {
          text-decoration: none;
      }

      a:active {
          text-decoration: none;
          text-decoration: bold;
          color: green
      }
      .bg-danger, .bg-success {
        padding: 0 5px;
      }
      ul {
        -webkit-padding-start: 5px
      }

    



      #boxA , #boxB {
        /*border: 3px solid #f66;*/
        float: right;
        margin:0px;


      }
      #boxA  {
        
        float: right;
        margin:0px; 
        width: 100%;

      }





#ui-datepicker-div{
  top:120px!important;
}

.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus{
  z-index: 1;
}



      .popover{
        width: 400px;
        max-width: 100%;
        transform: translateX(+400%)!important;
        -webkit-box-shadow:  -11px 20px 4px 1px rgba(0,0,0,.2)!important;
        box-shadow: 0 0 0px rgba(0,0,0,0.2); 
        left: -1595px!important;
      }
      .simgroup .popover{
        left: -1611px!important;
      }

      .popover .arrow {
          right: 95.5%!important;
          top: 2px;
      }
        .popover-title{
          background-color: white;
        }
      .popover-content{
         text-align: center;
         background-color: #f7f7f7; 

      }

      .custom-title  { 
        text-align: justify;
        margin: 0 auto; 
        padding-bottom: 5px; 
        min-height: 100px ;     
        font-family: Arial,Tahoma,Helvetica,Verdana,sans-serif;
        font-size: 15px;
        font-weight: 700;
        line-height: 25px;
        overflow-wrap: break-word;
        word-wrap: break-word;
      }
      .custom-title span{
        display: block;
        font-size: 11px;
        margin: 0px;
        color: #000059;
      }
      .custom-title span b{
        color: #000059;
      }
      .rssbox .custom-title span b{
          display: none;
      }
      @media (max-width: 500px){
        .custom-title span b{
          display: none;
        }
      }
      @media (min-width: 500px){
          .custom-title{
              font-family: 'Droid Arabic Naskh','droid-arabic-naskh','Amiri', 'Scheherazade','DroidArabicNaskhRegular','Mirza', cursive;
              font-size: 13px;              
              line-height: 24px;
          }
      }
      .miniature {
          float: right;
          margin-left: 10px;
          max-height: 100px;
          border: solid gainsboro;
          border-radius: 17px;
      }
.popover-content .btn{
  padding: 5px;
  font-size: large;
  margin: auto 1px;
}

      @media (max-width: 600px){

        .popover{
          /*max-width: 340px!important;*/
          width: 95%!important;
          left: -378%!important;
        }
        .popover .arrow {
          right: 93%!important;
        }
        .simgroup .popover{
          left: -381%!important;
        }
        .simgroup .popover .arrow {
          right: 95%!important;
        }

        .custom-title  { 
          text-align: right;
          font-size: 1.1em!important;
        }

      }
        .rssbox .popover{
          /*max-width: 414px!important;*/
          width: 95%!important;
          left: -378%!important;
        }

        .rssbox .popover .arrow {
          right: 95%!important;
        }
        .rssbox .custom-title  { 
          text-align: right;
          /*font-size: 1.2em!important;*/
        }
        .rssbox .left-button > a{
          float: left;
          margin-right: 5px;
        }
        body > .popover{

          position: fixed!important;
          transform: translateX(0%)!important; 
          -webkit-box-shadow: -11px 20px 4px 1px rgba(0,0,0,.2)!important;
          box-shadow: 0 0 0px rgba(0,0,0,0.2);
          width: 42%!important;
          left: 23%!important;
          top: 148px!important;
        }
        body > .popover .arrow{
          display: none;
        }
         body > .popover .popover-content{
          font-size: 15px;
          border-radius: 0 0 6px 6px;
          background-color: #23527c;
          color: white;
          margin: -1px;
          font-family: sans-serif;/*
          text-align: right;*/
          font-size: 14px;

         }


        .rssbox .left-button > a{
          float: left;
          margin-right: 5px;
        }

        .regfav{ padding-right: 12px; padding-left: 0px;   margin-top: 50px;   margin-bottom: 20px;padding-bottom: 4px; clear: both;
        
      }
      
      .regfav span{
        float: right;

      }
      .skew{
        width: 0;height: 0;border-style: solid;
      }
      .r_skew{
        border-width: 43px 20px 0 0;
      }
      .r_fav_skew{
        border-color: green transparent transparent transparent;
      }

      .r_reg_skew{
        border-color: #6a71e7 transparent transparent transparent;
      }
      .l_skew{
        border-width: 0 0 43px 20px;
      }
      .l_fav_skew{
        border-color: transparent transparent green transparent;
      }
      .l_reg_skew{
        border-color:  transparent transparent #6a71e7 transparent;
      }
      .square{
        margin:0 -1px; height: 43px ; width: fit-content;padding: 7px; color: white;    font-size: 20px;
      }
      .reg_form{
        margin: auto 15px;
      }

/*      @media (max-width: 500px) {

        .regfav{ padding-right: 0;
        
        }
        .r_skew{
          border-width: 40px 20px 0 0;
        }
        .l_skew{
          border-width: 0 0 40px 20px;
        }
        .square{
          height: 40px ; padding: 9px;   font-size: 18px;
        }
        .reg_form{
        margin: 0;
        }

      }*/
      @media (max-width: 320px) {

        .r_skew{
          border-width: 35px 12px 0 0;
        }
        .l_skew{
          border-width: 0 0 35px 12px;
        }
        .square{
          height: 35px ;   font-size: 18px;
        }
        .square span{
        display: none;
        }

      }
      .leftmenu{

        direction: rtl;
      }

      .leftmenu , .leftmenu  a{
        color: white; font-size: 1.1em;
      } 
      .leftmenu .item img{
        margin-left: 20px;height: 21px;
      } 
      .leftmenu .item span img{
        margin-left: 5px;
      } 


      .simmenu{
        padding: 2px;
        font-size: 17px; 
        font-style: bold;    
        padding-right: 2px;  
        border: solid #d3d3d3 3px;  
        border-top: none; 
        background-color: #3164a8; 
        padding-bottom: 10px;
      }
      .simmenu >div{
        text-align: center;
        margin: 2px;
        height: 100;
        float: inherit;
        max-width: 100%;
        display: inline-block;
        width: 98%;
      } 
      .simmenu >div h3{
        text-align: center; 
        font-style: italic; 
        color: white;

      } 
      .simmenu >div a{
        display: inline-block;
        color: white;
        margin-bottom: 15px;
        font-size: 15px;
        font-weight: bold;
        background: #5bc0de;
        padding: 7px 12px;
        border-radius: 8px;
      } 
      @media (max-width: 1200px) {
        .simmenu >div{        
          max-width: 45%;
        } 
      } 
      @media (max-width: 990px)
      {
        .simmenu >div{        
          max-width: 100%;
        } 
      } 
      @media (max-width: 767px)
      {
        .simmenu >div{        
          max-width: 45%;
        } 
      } 
      @media (max-width: 420px)
      {
        .simmenu >div{        
          max-width: 100%;
        } 
      }

      .needpadding{
        margin-top: 4px;
      }
      @media (min-width: 350px) 
      {
       .needpadding{
          margin-top: -4px;
        }
      }

      .threeitems {  
        display: -webkit-box;
        display: flex;
      }

      .threeitems > div {
         text-align: center;
      }
      .flame{ 
        position: relative; 
        left: 34px;  
        top: -13px;  
        margin-left: -22px; 
        height: 20px;  
        width: 20px;
      }


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







#wrapper, #wrapper2  {
    -ms-overflow-style: none;
   /* overflow: auto;*/

    padding-left: 1;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled,#wrapper2.toggled {
    padding-left: 330px;
}

#sidebar-wrapper, #sidebar-wrapper2 {
    z-index: 1000;
    position: fixed;
    left: 330px;
    display: none;
    width: 0;
    height: 100%;
    margin-left: -330px;
    overflow-y: auto;
    background: rgb(156, 156, 156);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#sidebar-wrapper {
    direction: ltr;
    background: #2f60a3;
}

/* Sidebar Styles */

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}


.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}
    #wrapper.toggled ,#wrapper2.toggled {
        padding-left: 330px;
    }
    #sidebar-wrapper,#sidebar-wrapper2 {
        width: 0;
    }
    #wrapper.toggled #sidebar-wrapper,#wrapper2.toggled #sidebar-wrapper2 {

        display: block;
        width: 330px;
    }


@media(min-width:768px) {

    #wrapper.toggled,#wrapper2.toggled {
    padding-left:  330px;
    }
      #wrapper.toggled{
    margin-top: 160px;
    }


    #sidebar-wrapper, #sidebar-wrapper2 {
        left: 330px;
        margin-left: -330px;
    }



    #wrapper ,#wrapper2 {
        padding-left: 0;
    }



    #wrapper.toggled ,#wrapper2.toggled {
        padding-left: 330px;
    }
    #sidebar-wrapper,#sidebar-wrapper2 {
        width: 0;
    }
    #wrapper.toggled #sidebar-wrapper,#wrapper2.toggled #sidebar-wrapper2 {
        width: 330px;
    }

}


#sidebar-wrapper2   {
 direction: ltr;
}

#sidebar-wrapper2 .box  {
 max-width: 310px;
 background: rgb(156, 156, 156);
 margin: auto;
 margin-top: 10px;
 direction: rtl;
}

.sidebar-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media(max-width:600px) {


    #wrapper.toggled #sidebar-wrapper,#wrapper2.toggled #sidebar-wrapper2 {
        width: 95%;/*
        max-width: 95%*/
    }

}












      /* ///////////// navbar//////////////*/






.colored{
    opacity: 0.4;   
    filter: alpha(opacity=40);
    background-position:center;
    background-repeat: no-repeat; 
    background-image: url('images/sp2.png');
}

.colored-white {

    background-position:center;
    background-repeat: no-repeat; 
    background-image: url('images/white.png');
}
/* mouse over link */
.colored:hover, .colored-white:hover  {
    background-image: url('images/yellow.png');

}

.colored-red {
    background-image: url('images/red.png');
}
.colored-blue {
    background-image: url('images/blue.png');
}
.colored-yellow {
    background-image: url('images/yellow.png');

}


  .popover {
    z-index: 1200;
  }
  #newrss{
    margin: -7px;
    padding: 0px;
    position: relative;
    left: 39px;
    top: 6px;
    height: 14px;
    width: 17px;
    background-color: red;
    font-size: 11px;
    display: none;

  }

  #wrapper  {
      margin-top: -30px;
  }
  #wrapper2  {
      margin-top: -30px;
  }




  /*shrink*/

   #wrapper.shrink  {
      margin-top: -100px;
  }
   #wrapper2.shrink   {
      margin-top: -100px;
  }

  /*end shrink*/
  #wrapper, #wrapper.shrink {
      margin-top: 160px;
  }

  .paginate{ margin-top:150px }





.leftmenu .item{
    background-color: #2f60a2;
    border: none;
    display: inline-block;
    min-width: 80px;
    padding: 2px;
    width: 100%;
    height: 26px;
}

/*dropdown menu*/
.dropbtn {
   background-color: #2f60a2;
    border: none;
    min-width: 80px;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;  
    left: 0px;
    min-width: 80px;
    background-color: #f9f9f9;  
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 5px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}

/*end drop down*/






/*No bootstrap navbar there anymore*/

    
  .mynavbar {
    direction: ltr;
    position: fixed;
    z-index: 1300;
    right: 0;
    left: 0;
    top: 0;

    background-color: #2f60a2;
    border-color: #285188;
    background-image: -webkit-gradient(linear, left 0%, left 100%, from(#3d78c7), to(#2f60a2));
    background-image: -webkit-linear-gradient(top, #3d78c7, 0%, #2f60a2, 100%);
    background-image: -moz-linear-gradient(top, #3d78c7 0%, #2f60a2 100%);
    background-image: linear-gradient(to bottom, #3d78c7 0%, #2f60a2 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3d78c7', endColorstr='#ff2f60a2', GradientType=0);

    height: 130px;
    font-weight: 100%
    margin-bottom: 0;
    font-size: 1.1em;

    }

  .mynavbar a {
    font-size: 13px;
    font-family: 'Droid Arabic Naskh','droid-arabic-naskh','Amiri', 'Scheherazade','DroidArabicNaskhRegular','Mirza', cursive;
    color: white;
    text-decoration: none;
  }

  .background{
    height: 100%;
    background-image: url("images/jedidinfoM.png");
    background-position:center;
    background-repeat: no-repeat; 
  }

  .background >div >div{
   /* background-color: grey;*/
    height: auto;
    padding: 40px 0px;

  }

  .menuitem{
  border-right: 1px solid #285188;
  padding: 0px 10px;

  }
  .menuitem img{
    /*width:25px;*/
  }


  /*hamburger menu*/

  .menucontainer {
      display: inline-block;
      cursor: pointer;
  }

  .bar1, .bar2, .bar3 {
    width: 30px;
      height: 2px;
      background-color: white;
      margin: 8px 0;
      transition: 0.4s;
  }

  .change .bar1 {
      -webkit-transform: rotate(-45deg) translate(-6px, 6px) ;
      transform: rotate(-45deg) translate(-6px, 6px) ;
  }

  .change .bar2 {
    opacity: 0;
  }

  .change .bar3 {
      -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
      transform: rotate(45deg) translate(-8px, -8px) ;
  }

  /*end hamburger menu*/
  /* bigest screen < 1000*/
  @media (min-width: 1000px) {

    .shrink .background{
      background-image: url("images/jedidinfo2.png");
    }

  }/*  end bigest screen < 1000*/


  /* big screen < 1000*/
  @media (max-width: 1000px) {

    .background{
      background-image: url("images/jedidinfo2.png");
      height: 100%;
    }

  }/*  end big screen < 1000*/

  /* big screen < 767*/
  @media (max-width: 767px) {
      .mynavbar {
        height: 65px;
      }

      .background >div >div{
      padding: 10px 0px 6px 0px;
      }

      .hiddenmenu .menuitem{
        display: none;
      }

    .background{
          background-position:right;
    }
     #wrapper, #wrapper2{
      margin-top: 65px;
  }

  }/*  end normal screen < 767*/

  @media (max-width: 460px) {
    
      .hiddenmenu2 .menuitem{
        display: none;
      }
    }
  /* small screen < 410*/
  @media (max-width: 410px) {

        .modifywidth  {
        width: 105%;
        margin-right: -15px;
        }
      .background{
          background-image: url("images/jedidinfoS.png");
          height: 100%;
      }/*
      #rss img {
        padding: 8px 0;
      }

      #rss span {
        display: none;
      }*/

  }/*  end small screen < 410*/


  /* small screen < 380*/
  @media (max-width: 460px) {


    .moot{display: none !important; }



  } /*  end small screen < 380*/


  @media (max-width: 300px) {
      #rss img {
        padding: 0 5 px ;
      }

      #menu .menuitem ,#rss .menuitem {
        border: 0;
        padding: 1px;
      }
/*    #rss {
      display: none !important;
    }*/
  }



  @media (max-width: 290px) {
    
    #rss span{
      display: none;
    }
    #rss img{
      margin: 8px;
    }
    
  }
  @media (max-width: 260px) {
    
    #rss{
      display: none;
    }
    
  }


  .mynavbar{
      -webkit-transition: all 0.4s cubic-bezier(0, 0.74, 0, 1.09);
      transition: all 0.4s cubic-bezier(0, 0.74, 0, 1.09);
  }

  .mynavbar.shrink {
    height: 65px;
  }



  .shrink .background >div >div{
    padding: 10px 0px 6px 0px;
  }
  .greyed{background-color: rgb(156, 156, 156)}
  .blued{background-color: #2f60a3}
  .reded{display: block!important;}
  .removerssborder{border-right: 0px!important;}




    .sites{
        direction: rtl; 
        border-right: 1px solid;
        padding-top: 1px;
    }

    .site{
        color: white;
        background-color: #3b43d5;
        border-radius: 28px 0 0 30px;
        height: 28px;
        margin: 14px 0;
        width: 100%;
    }
    
    .rank{
      padding: 4px 3px;

      width: 40px;
      float: right;
       
    }
    
    .roundstar{
      margin: 1px ;
        /*background: url(fav.png);*/
        cursor: pointer;
        width: 26px;
        height: 26px;
        border-radius: 13px;
        float: right;
        background-color: white;
       
    }
    .favrank{
      display: block;
      background: url(images/fav.png);
      background-repeat: no-repeat;
      background-position: top;
    }
    .favrank.active{
        background: url('images/nofav.png');
        background-repeat: no-repeat;
        background-position: top;
    }
    .ar{
      padding: 4px 10px;
      width: 130px;
        float: right;
        text-align: right;
    }
    .ar a{
      font-size: 13px;
      font-family: 'Droid Arabic Naskh','droid-arabic-naskh','Amiri', 'Scheherazade','DroidArabicNaskhRegular','Mirza', cursive;
      color: white;
      text-decoration: none;
    }
    .fr{
      padding: 4px 10px;
      width: 160px;
        float: left;
        text-align: left;
    }

  @media (max-width: 435px) {
    
    .fr{
      display: none;
    }
    .roundstar{

      margin-left: 1px;
      float: left;
    }
    
  }
  .inputpadding{

      padding-bottom: 3px;
  }



		/*sim & first*/


     @media (min-width: 601px){
      .firstpagenb{
        display: none;        
      }
      .firstpagename,.simpagename{
        display: inline;
        font-size: 17px;
        font-weight: bolder;
        
      }
      .firstpagenamea,.simpagenamea{
        padding: 4px 7px!important;
        
      }  
	}

    @media (max-width: 600px){
      .firstpagenb{
        display: inline;        
      }
      .firstpagename{
        display: none;  
        }   
    }
    @media (max-width: 400px){
      .simli{
        display: none!important;
        
      }
    }



		/*end sim & first*/
#down-arrow {
    -webkit-animation: mover 2s infinite  alternate;
    animation: mover 2s infinite  alternate;
    position: absolute;
    left: 35px;
    top: 9px;
    margin-left: -22px;
    height: 20px;
    width: 20px;
    display: none;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}
#reload-01 { background: url('images/white.png')  no-repeat -9999px -9999px; }
#reload-02 { background: url('images/red.png')    no-repeat -9999px -9999px; }
#reload-03 { background: url('images/blue.png')   no-repeat -9999px -9999px; }
#reload-04 { background: url('images/yellow.png') no-repeat -9999px -9999px; }
#reload-05 { background: url('images/fav.png')    no-repeat -9999px -9999px; }
#reload-06 { background: url('images/nofav.png')  no-repeat -9999px -9999px; }