/*=================================================================================*/
/*=================================================================================*/
/*=================================================================================*/
/*=================================================================================*/
/*===========================| DESIGNED BY  HOSSAM HILAL |=========================*/
/*=================================================================================*/
/*=================================================================================*/
/*====================================|| 2018 ||===================================*/
/*=================================================================================*/
/*=================================================================================*/
/*=================================================================================*/




@font-face
{
  font-family: 'Cairo';
  src: url('../fonts/Cairo-Regular.eot');
  src: url('../fonts/Cairo-Regular.woff2') format('woff2'),
       url('../fonts/Cairo-Regular.woff') format('woff'),
       url('../fonts/Cairo-Regular.ttf') format('truetype'),
       url('/fonts/Cairo-Regular.svg.Cairo-Regular') format('svg'),
       url('/fonts/Cairo-Regular.eot?.iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face
{
  font-family: 'Cairo-Bold';
  src: url('../fonts/Cairo-Bold.eot');
  src: url('../fonts/Cairo-Bold.woff2') format('woff2'),
       url('../fonts/Cairo-Bold.woff') format('woff'),
       url('../fonts/Cairo-Bold.ttf') format('truetype'),
       url('../fonts/Cairo-Bold.svg.Cairo-Bold') format('svg'),
       url('../fonts/Cairo-Bold.eot?.iefix') format('embedded-opentype');
     
  font-weight: normal;
  font-style: normal;
}


body
{
    direction: rtl;
    font-family: 'Cairo';
}


.login-bg
{
    background: url(../images/bg.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

a {color: #fff; text-decoration: none !important; }

a:hover {    color: #fff;}

.bahr-btn { color: #fff !important; }


.bahr-btn
{
    width: 100%;
    background: #5b90da;
    border-radius: 25px;
    font-size: 15px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.26);
    max-width: 400px;
    margin: auto;
    height: 40px;
    text-align: center;
}


::placeholder {color: #dadada !important; }

.ahtam-dark-btn:focus ,
.ahtam-light-btn:focus
{
    box-shadow: none;
}

.form-control 
{
    height: 35px;
    border-radius: 8px;
    line-height: 35px;
    font-size: 14px;
    margin-bottom: 10px;
    color:darkblue;
}

.form-control:focus 
{
    box-shadow: 0px 1px 2px 0px rgba(165, 113, 113, 0.3);
    border: 1px solid #cc8080;
}

.nice-select 
{
  width: 100%;
  height: 40px;
  border-radius: 25px;
  margin-bottom: 10px;
  line-height: 35px;
  text-align: right !important;
  padding: 0 40px 0 10px !important;
  border: 1px solid #2593bc !important;
}

.nice-select .current {    color: #dadada !important; font-size: 14px;}

.nice-select .list {  right: 0;   text-align: center;  }

.nice-select .option 
{   
    line-height: 30px;    
    min-height: 30px;  
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.nice-select::after
{
    border-bottom: 2px solid #2593bc;
    border-right: 2px solid #2593bc;
    height: 8px;
    left: 12px;
    right: auto;
    width: 8px;
}

.nice-select .option:hover, 
.nice-select .option.focus,
.nice-select .option.selected.focus 
{
    background-color: #c1e2e9;
    color: #2593bc;
}


/*
colors

   first         color   : #ce8f7e ;
   second        color   : #a15858 ;
                         : #a7523c ;
   header name           : #8c2e3c ;

  
*/


/*******************************************************************************************************************/
/*==============================================//  LOG PAGE   //=================================================*/
/*******************************************************************************************************************/


.login-page {
  padding: 70px 0;
}
.login-logo {
  text-align: center;
  margin-bottom: 60px;
}

.login-logo img {
  width: 150px;
  height: 120px;
  margin: auto;
}

.log-box {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 81px 0px rgba(0, 0, 0, 0.09);
  max-width: 500px;
  margin: auto;
}

.log-box ul {
  list-style: none;
}

.log-tabs {
  height: 50px;
  line-height: 50px;
    border-bottom: 1px solid #f3f3f3;
}

.reg-tab { border-left: 1px solid #f3f3f3;}

.active-tab { color: #268cb2 !important; }
.active-pic { display: none;}


.active-tab .active-pic {

    display: block;
    margin-top: 15px;

}
.active-tab .gray-pic { display: none;}

.hide-box { display: none;}


.log-tabs img {

    height: 25px;
    width: 25px;
    margin-left: 10px;
  margin-top: 15px;
}

.log-tabs ul {
  display: flex;
  width: 100%;
  padding: 0;
  margin: 0;
 text-align: right;
}


.log-tabs li {

    width: 50%;
    color: #c8c8c8;
    padding: 0 20px;
 display: flex;
}


.log-body {
  padding: 30px 20px 10px 20px ;
}


.log-body img {

    height: 20px;
    width: 16px;

}


.field-box {
  position: relative;
  max-width: 400px;
  margin: auto;
  height: 50px;
    margin-bottom: 15px;
}


.field-box img {

    position: absolute;
    top: 11px;
    right: 13px;
    z-index: 99;

}

.field-box .form-control {
  padding: 0 40px 0 10px !important;
  height: 40px;
  border-radius: 25px;
  border: 1px solid #2593bc;
  color:darkblue;
}


/*******************************************************************************************************************/
/*******************************************************************************************************************/
/*******************************************************************************************************************/
/*******************************************************************************************************************/
/*******************************************************************************************************************/
/*===========================================//          Header   //===============================================*/
/*******************************************************************************************************************/
/*******************************************************************************************************************/
/*******************************************************************************************************************/
/*******************************************************************************************************************/
/*******************************************************************************************************************/

.ahtam-header {

    height: 50px;
    width: 100%;
    background-color:transparent;
    position: absolute;
    top: 0;
    right: 0;
    max-width: 300px;
}

.ahtam-header .icofont 
{
  color:#1c344a;
  font-size: 25px;
    height: 50px;
  line-height: 60px;
}



.ahtam-header .menu 
{
    position: absolute;
    right: 12px;
    top: -5px;
    text-align: right;
}

.nav .ico-close 
{
    position: absolute;
    left: 11px;
    top: -4px;
    color: #fff;
    cursor: pointer;
}


.nav 
{
    position: fixed;
    right: 0;
    top: 0;
    width: 250px;
    background-color: #1e2c39;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    height: 100vh;
    z-index: 9999;
}

.nav.nav-view {    transform: translateX(0);  }

.nav ul
{
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
    width: 100%;
    padding-top: 50px;
    font-size: 14px;
}

.nav ul li 
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.nav ul li a
{
    color: #fff;
    text-align: right;
    padding: 12px 40px 12px 20px;
    border-bottom: none;
}

.dropdown-item img
{
    height: 20px;
    width: 20px;
    margin-left: 20px;
    text-align: right;
}



.dropdown-item:hover ,
.dropdown-item:focus 
{
    color: #fff;
    text-decoration: none;
    background-color: #1c2f41;

}


.nav-overlay {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    display: none;

}
















/*******************************************************************************************************************/
/*******************************************************************************************************************/
/*******************************************************************************************************************/
/*******************************************************************************************************************/
/*******************************************************************************************************************/
/*===========================================//     HOME BODY  //===============================================*/
/*******************************************************************************************************************/
/*******************************************************************************************************************/
/*******************************************************************************************************************/
/*******************************************************************************************************************/
/*******************************************************************************************************************/

.homemenue-bodybox 
{
  direction: ltr;
  width: calc( 100% - 250px);
  float: left;
}

.homemenue-bodybox  .container-fluid { padding: 0;}

.homemenue-bodybox  .row { padding: 0;} 


.body-head
{
  background: #f8f8f8;
  height: 50px;
  width: 100%;
}

.body-head img 
{
  width: 30px;
  height: 30px;
  text-align: right;
  margin-left: 10px;
}


.homemenue-bodybox .container-fluid 
{
  padding: 0;
}

.body-head h3 
{
  margin: 0;
  height: 50px;
  font-size: 14px;
  text-align: right;
  direction: rtl;
  padding: 5px 15px;
  position: relative;
}

.body-head .placename-span 
{
  float: left;
}

.body-head span 
{
  height: 40px !important;
  padding: 0 10px;
  border-radius: 5px;
  background: #f2f2f2;
  float: right;
  line-height: 40px;
}


.nav-head img 
{
  width: 180px;
  margin: auto;
}

.nav-head 
{
  text-align: center;
  margin-bottom: 24px;
}

@media (max-width:991px)
{
    .homemenue-bodybox {     width:100% !important; }
    .body-head {    padding-right: 50px;  }
}

@media (min-width:992px)
{
    .nav  { transform: translateX(0);  }
}




.act {

    background-color: #1c2f41;

}








/*******************************************************************************************************************/
/*******************************************************************************************************************/
/*******************************************************************************************************************/
/*******************************************************************************************************************/
/*******************************************************************************************************************/
/*===========================================//     DETAILS PAGE  //===============================================*/
/*******************************************************************************************************************/
/*******************************************************************************************************************/
/*******************************************************************************************************************/
/*******************************************************************************************************************/
/*******************************************************************************************************************/



.bg-color { background: #fcfcfc;}

.content {
  padding: 20px 15px;
  direction: rtl;
}

.askinfo-box {
  text-align: center;
  padding: 20px 0 0 0;
}

.askinfo-box p {
  color: #1c3449;
  font-family: 'cairo-bold';
}
.search-box {
  max-width: 350px;
  margin: auto;
  position: relative;
}
.search-box .form-control {
  height: 45px;
  border-radius: 25px;
  border: 1px solid rgba(0, 0, 0, 0.26);
  padding: 5px 15px;
    background: #fcfcfc;
    color: #c4c4c4;
}
.search-box .btn {
  position: absolute;
  top: 0;
  left: 0;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  height: 45px;
  border-bottom-right-radius: 25px;
  color: #fff;
  background: #1c3449;
  font-size: 13px;
  border: 1px solid #1c3449;
}

.reserve-body {
  margin: 40px 0 0 0;
  border: 1px solid rgba(0, 0, 0, 0.26);
  border-radius: 15px;
  padding: 40px 0;
  max-width: 900px;
  direction: rtl;
  text-align: initial;
}
.reserve-body .form-control {
  border: 1px solid rgba(0, 0, 0, 0.26);
  padding: 0 15px !important;
    background: #fcfcfc;
}
.reserve-body .field-box {
  max-width: 100%;
}
.reserve-body p {
  height: 45px;
  line-height: 45px;
  color: #1c3449;
  font-size: 15px;
  font-family: 'cairo-bold';
}
.reserve-body .btn {
  background: #1c3449;
  background: linear-gradient( 180deg, rgb(32,39,45) 0%, rgb(28,53,75) 100%);
  border: 1px solid transparent;
  border-color: linear-gradient( 180deg, rgb(32,39,45) 0%, rgb(28,53,75) 100%);
  border-radius: 25px;
  font-size: 15px;
  height: 40px;
  color: #fff;
  min-width: 75px;

}


.reserve-body .nice-select {
    padding: 0 15px !important;
    border: 1px solid rgba(0, 0, 0, 0.26) !important;
    background: #fcfcfc;
}

.form-btns {
  text-align: center;
  margin: 20px 0;
}

.form-btns .btn {
    margin: 0 10px;
}


.full-box .col-6 {
    display: flex;
    float: right;
}

.full-box .col-4 {
    display: flex;
    float: right;
}

.btn-info:focus , .btn-info:hover
{
    box-shadow: none;
    background: #ff9800 !important;
    border-color: #ff9800;

}









@media (min-width:320px) and ( max-width:768px)
{
    .body-head h3 {    font-size: 11px;    padding: 5px 3px; }
    .nav ul {
    padding-top: 10px;
}
    .nav-head img {
    width: 130px;
    height: 45px;
}
    
    .nav-head {
    margin-bottom: 20px;
}
    
    .nav ul li a {
    padding: 6px 40px 5px 20px;
    font-size: 13px;
}
    .box-a .col-3:nth-child(4) {

    padding-right: 0px;

}
    
    .box-a .col-3:nth-child(3) {

    padding: 0 5px;

}
    
    .box-a .btn {

    padding: 0;
    font-size: 12px;
    min-width: 56px;

}
     .box-a .col-4:nth-child(3) {

    padding-right: 0px;

}
    .box-a .col-4:nth-child(1)  { padding-left:5px;}
    .box-a .col-4:nth-child(2) { padding: 0 5px; }
    
    .reserve-body .form-control , .reserve-body .nice-select {
    padding: 0 4px !important;
    font-size: 12px;

}
    
    .box-b .col-6:nth-child(1)  { padding-left:5px; padding-right: 0;}
    .box-b .col-6:nth-child(2) { padding-left: 0; padding-right: 5px; }
    
    .box-b .col-4:nth-child(1)  { padding-left:5px; padding-right: 0;}
    .box-b .col-4:nth-child(2)  { padding:0 5px;}
    .box-b .col-4:nth-child(3) { padding-left: 0; padding-right: 5px; }
}


@media (min-width:320px) and ( max-width:480px)
{
    .form-btns .btn {

    width: 42%;
    float: right;
    margin-bottom: 10px;

}
    
    .log-tabs li {
    width: 50%;
    color: #c8c8c8;
    padding: 0px 8px;
    display: flex;
    font-size: 12px;
}
    
    .log-tabs img {
    height: 20px;
    width: 20px;
    margin-left: 10px;
    margin-top: 15px;
}
    
    
}

@media (min-width:481px) and ( max-width:575px)
{
    .form-btns .btn {

    margin: 0 4px;
    font-size: 12px;
    padding: 0 5px;
    float: right;

}
    
}

@media (min-width:576px) and ( max-width:768px)
{
   .form-btns .btn { margin: 6px 6px;}
}








.home-boxx {
    margin-top: 60px;
}

.home-boxx .col-sm-6 {
    margin-bottom: 40px;
}


#home-boxx-logo { text-align: center;}
#home-boxx-logo img {
    max-width: 340px;
    max-height: 250px;
    margin: auto;
}

#myclock {

    text-align: center;
    max-width:312px;
    margin: auto;
    background: #1e2c38 !important;
    border-radius: 10px;
    box-shadow: 0 0 5px 1px rgba(27, 25, 25, 0.5);
    height: 100%;
    padding: 10px;

}

#monthrow th {

    color: #Fff !important;
    background-color: #1d3040 !important;
    border-radius: 0;

}


#next {
    float: left; 
}

#prev {
    float: right; 
}

#prev, #next {

    color: #Fff !important;
    font-size: 35px;
    padding: 0;
    background: none;
    font-weight: 400;
    border: none;

}

#calendar {
    color: #1D3040;
    font: 14px sans-serif;
    background-color: #f3f3f3;
    border: 1px solid #f3f3f3;
    border-collapse: separate;
    border-spacing: 5px;
    border-radius: 10px;
    min-width: 50px;
    box-shadow: 0 0 5px 1px rgba(27, 25, 25, 0.5);
    margin: auto;
}