.dropbox {
  outline: 2px dashed grey; /* the dash box */
  outline-offset: -10px;
  background: lightcyan;
  color: dimgray;
  padding: 10px 10px;
  min-height: 200px; /* minimum height */
  position: relative;
  cursor: pointer;
}

.input-file {
  opacity: 0; /* invisible but it's there! */
  width: 100%;
  height: 200px;
  position: absolute;
  cursor: pointer;
}

.dropbox:hover {
  background: lightblue; /* when mouse over to the drop zone, change color */
}

.dropbox p {
  font-size: 1.2em;
  text-align: center;
  padding: 50px 0;
}

  @media only screen and (min-width: 1800px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}


.landing_container {
display: flex;
justify-content: center;
}

.landing-item {
border: 1px solid #fff;
background-color: #ffffff;
height: 250px;
max-width:300px;
flex: 1;
margin-left:10px;
margin-right:10px;
padding-left:10px;
padding-right:10px;
display: flex;
flex-flow: column;

}
.landing-item-list {
margin-bottom:2px
}
.landing-item-title {
font-weight: 600;

/*padding-left:5px;*/
margin-bottom:15px;
}
.landing-item-title-underline{
    display: inline-block;
  position: relative;
  text-align:left;
  }
  .landing-item-title-underline:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    display:block;
    max-width: 60px;
    background-color: #3c4e5a;
    -webkit-transform: scaleX(1);
transform: scaleX(1);

  }
.landing-item-list-title {
float:left;
/*padding-left:5px;*/

}
.landing-item-list-value {
float:right;
padding-right:5px;
}
.landing-button
{
width: 100%;
border: none;
background-color: #3c4e5a;
color: white;
height: 35px;
margin-bottom: 15px;


}
.submit-button
{
width: 100%;
border: none;
background-color: #3c4e5a;
color: white;
height: 35px;
margin-bottom: 15px;


}

.btn-container {
justify-content: space-between;
flex-direction: column;
height: 100vh;
display: flex;
}

.btn-holder {
display: table; text-align: center;

}
  .box2 {
display: inline-block;


}
.nomargin{
  padding: 0px;
  margin: 0px;
}
.booking_form_label {
  color : #3C4F58;
  font-size: 13px;
}
  .pagination > li > a, .pagination > li > span {
    color: #4e4e4e;


  }
  .navicon-checkbox
  {
    padding: 5%;
    border: 1px solid;
    width: 15px;
    height: 15px;
    float:left;
    margin-right:10px;
    cursor: pointer;
  }
  .navicon-checkbox > div {
    width:100%;
    height:100%;
  }

  .navicon-checkbox-selected{}
  .navicon-checkbox.selected > div
  {
    background-color:red;
  }
  .pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus {
    background-color: #3c4e5a;
    border-color: #3c4e5a;
  }
.modal {
text-align: center;
padding: 0!important;
}

.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}

.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
.nav-input-field{
border-radius: 0px; background: rgb(255, 255, 255); box-shadow: none;
}

  /*
      Navicon Footer Styling
  */
      html {
    position: relative;
    min-height: 100%;
  }
  body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    color: #333;
  }
  .footer {
    
      background-color: #3c4e5a ;
  }

  .container .text-muted {
    margin: 20px 10px;
    color:white;
    font-size: 14px;
  }

  /*
      Navicon Navvar Styling
  */

  .navbar-navicon{
      /*background-color: #3c4e5a !important;*/
      height: 70px;


  }
  .navbar-navicon .navbar-nav>li>a {
      color:white !important;
  }

  .navbar-navicon .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
      /*color:#d84754 !important;*/
      background-color: #3c4e5a !important;

  }
  .navbar-navicon .navbar-nav > .open > a
  {
      background-color: transparent !important;
  }
  .nav-container {
      margin-top: 10px;
  }
  .navbar-nav-icon {
      margin-left: 20px;
  }

  p {
      font-size: 12px;
      margin: 18px;
  }
  /*
      Navicon Tabs Styling
  */
  ul.navi-ul-tab {
      width:100%;
      float: left;
      margin: 0px;
      padding: 0px;
      border-bottom: 1px groove #f1f1f1;

      }

  li.navi-li-tab{
      min-width: 130px;
      float: left;
      /* padding:6px 19px; */
      margin: 15px 45px 0px 0px;
      color: #4e4e4e;
      list-style: none;
      text-align: left;
      /*
      border-top-left-radius: 1em;
      border-top-right-radius: 1em;
      background-color: #dfdfdf;
      */
  }
  li.navi-li-tab.small-tabs
  {
    padding-right: 20px;
    margin-right: 20px;
    min-width: 0px;

  }
  li.navi-li-tab:hover, li.navi-li-tab:hover a {
      /*background-color: #465c6a;*/
      color:black;
      cursor: pointer;
  }
  li.navi-li-tab a {
      text-decoration: none !important;
      color: inherit !important;
      font-size: 18px;
      
      
  }
  li.navi-li-tab a.active {
      text-decoration: none !important;
      color: inherit !important;
      font-size: 18px;
      
      
  }
  .active{
    display: inline-block;
  position: relative;
  text-align:left;
  text-decoration: none !important;
      color: black !important;
      font-weight: bold;
  }
  .active:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0px;
    left: 0;
    z-index:1500;
    display:block;
    background-color: #da4859;
    -webkit-transform: scaleX(1);
transform: scaleX(1);

  }




  /*
      Navicon Table Styling
  */
.parent {
    margin:0px 0 0;
    width:100%;
    border-bottom:4px solid #2E3D47 !important;
    position:relative !important;
    z-index:auto !important;
    
  }
  .timeline-container
  {
    position:absolute;
    
    width:80px;
    text-align: center
  }
  .child {
    background:#ffffff;
    width:20px;
    height:20px;
    border-radius:50%;
    border:4px solid #2E3D47;
    position:absolute;
    content:'';
    top:-8px;
  }

  .parent:before {
    left:0;
  }

  .parent:after {
    right:0;
  }

  .child {
    left:30px;
    /*margin-left:-8px;*/
  }

  .navicon-button
  {
    /*width: 90%;*/
    border: none;
    background-color: #3c4e5a;
    color: white;
    height: 35px;
    /*margin-bottom: 15px;*/


  }
  .navicon-button:disabled,
  .navicon-button[disabled]{
background-color: #5b7689;

}

  .timeline-header
  {
    position: relative;

  }
  /*
  .timeline-header:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -3px;
    left: 0;
    display:block;
    background-color: #cacaca;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  */
  .tabbox{
    border-style: groove;
    border-color:#f1f1f1 !important;
    display:flex; flex-wrap: nowrap; align-items: center;
    justify-content: left;
    min-height:35px;
    width:100%;
    padding-left: 10px;
    margin-bottom:10px;
    border-width:thin;
  }
  .tabbox > div{
      min-width:120px;
      display: flex;
      justify-content: center;
      position: relative;


  }
  .tabbox > div:hover {
      /*background-color: #465c6a;*/
      
      cursor: pointer;
  }
  .tabbox > div.active > span{
      color: #3d5058;
  }
  .tabbox > div.active:before{
    top: 125%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #3d5058;
    border-width: 7px;
    margin-left: -7px;
    background-color:transparent;


  }
  .tabbox-active-line{
    height: 2px;position: absolute !important;top: 29px;background-color: #3d5058;width: 100%;
  }
  .notification-badge{
    margin-left:5px;
    width: 23px;
    background-color : #da4859;
    color: white;
    text-align:center;
    font-weight: 400;
  }
  .table-striped>tbody>tr:nth-child(even)>td, 
.table-striped>tbody>tr:nth-child(even)>th {
 background-color: #f6f6f6;
 border: none;

}
.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
 background-color: #ffffff; 
}

.table-striped-inversed>tbody>tr:nth-child(even)>td, 
.table-striped-inversed>tbody>tr:nth-child(even)>th {
 background-color: #ffffff; 

 border: none;

}
.table-striped-inversed>tbody>tr:nth-child(odd)>td, 
.table-striped-inversed>tbody>tr:nth-child(odd)>th {
    background-color: #f6f6f6;

}
.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
  border: none;
}


  table thead{
      background-color: #ffffff;
      color: #aab7c0;
  }
  .table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
    background-color: #cfe5f3;
    cursor:pointer;
  }
  table tr
  {
    background-color: white;
  }
  tr button.btn {
    display: none;
  }

  tr:hover button.btn {
    display: block;
  }
  .book-no {
      /*margin-top: 20px;
      */
              text-align: center;

  }
  /*
  tr div.book-no {
    display: block;

  }

  tr:hover div.book-no {
    display: none;
  }*/
  .documents-row{
    min-height: 40px;
    display:flex; flex-wrap: nowrap; align-items: center;
  justify-content: left;


  }
  .table>tbody>tr>td {
      padding: 0px 0px;
      height: 100%;

  }
  .tableInner {
      /*
      margin-top:9px;
      margin-bottom:9px;
      display: inline-block;*/
      width: 100%;
      height: 100%;
  display:flex; flex-wrap: nowrap; align-items: center;
  min-height: 70px;
 /* justify-content: center; */

  }
  .tableInnerShort {
    /*
    margin-top:9px;
    margin-bottom:9px;
    display: inline-block;*/
    width: 100%;
    height: 100%;
display:flex; flex-wrap: nowrap; align-items: center;
min-height: 40px;
/* justify-content: center; */

}
  .tableHeader {
      /*text-align: center;*/
      padding-left:0px !important;
      padding-top:15px !important;
      padding-bottom:5px !important;

  }
  .navicon-table {
      font-size: 13px;
  }
.table-row-small
{
  min-height:35px  !important;
  cursor: default;
}
  /*
      Navicon Table Duplicate
  */
  .btn-lg {
    font-size: 18px;
    line-height: 1.33;
    border-radius: 4px;
    background-color: #3c4e5a;
    /*padding: 6px 18px;
    margin-top: 7px;
    margin-left: 5px;
    */
        border-color:  #3c4e5a;

  }
  .btn-small {
    /*font-size: 18px;*/
    line-height: 0.8;
    /*border-radius: 4px;*/
    background-color: #3c4e5a;
    /*padding: 6px 18px;
    margin-top: 7px;
    margin-left: 5px;
    */
        border-color:  #3c4e5a;

  }
  .open-top {
      border-bottom-right-radius: 16px;
      border-bottom-left-radius: 16px;
      background-color: #ffffff;
      color : black;
      margin-top: 0px;
      text-decoration: none;
  }
  .btn:focus,.btn:active {
     outline: none !important;
  }

  .round {
    border-radius: 16px;
  }
  .round-small {
    border-radius: 16px;
    padding: 1px 18px;
    margin-top: -1px;
    font-size: 15px;
  }

  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active,
  .btn-primary.active,
  .open .dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #465c6a;
    border-color:  #465c6a;
  }
  
  .duplicate {
      margin-left: 18px;
      border-radius: 2em;
      background-color: #3c4e5a;
  }


  /*
      Navicon Timeline Styling
  */

  .timeline-box {
     /* border-radius: 10px;
      border-color:  #465c6a;
      border:2px ;
      border-style: solid;
      
      text-align: center;
      */
  }
  .timeline-box > span {
      font-size:16px;
  }

  /*
      Navicon Timeline progress Styling
  */
 
  .marg {
      margin-top: 15px;
  }
  .navicon-btn-drop {
  font-size:14px !important;
  font-weight:bold !important;
  color:#233644 !important;
  text-align:left !important;
  /*background:linear-gradient(#E7E7E7, #F1F1F1) !important; */
  border-radius: 0px !important;
 font-size: 14px !important;font-weight: 500 !important;
 min-height: 36px !important;
  }
  .navicon-btn {
  font-size:14px !important;
  font-weight:bold !important;
  color:#233644 !important;
  width:300px !important;
  text-align:left !important;
  /*background:linear-gradient(#E7E7E7, #F1F1F1) !important; */
  border-radius: 0px !important;
 font-size: 14px !important;font-weight: 500 !important;
 min-height: 36px !important;
  }
 .caret.caret-reversed
  {
    border-top-width: 0 !important;
    border-bottom: 4px solid !important;

  }
  button[disabled]
  {
    background-color:#65696c;
  }
  .navicon-btn-caret {
      /*background:#F0F0F0 !important;*/
      border-radius:0px !important;
      width:40px !important;
  }
  .tableBookingNo
  {
    width:150px;padding-right:20px;
    padding-left: 10px !important;
  }
  #pageElement{
  display:flex; flex-wrap: nowrap; align-items: center;

  
 /* padding-left: 10px; */
  padding-right: 10px;

  }
  .navicon-center {
          display:flex; flex-wrap: nowrap; align-items: center;
          justify-content:center;

  }

    .nav_input {
      border-radius: 0px; 
      background: rgb(255, 255, 255) !important; 
      box-shadow: none;
}
.nav_checkbox {
  margin-right: 3px !important;

}
  .nav_checkbox_section {
    margin-bottom: 13px !important;
  }

  .datepicker table tr th {
text-align: center;
width: 30px;
height: 30px;
border-radius: 0px !important;
border: none;
}
.form-check-inline{
display:inline-block;
}
.form-check-inline+.form-check-inline {
  margin-left: 2.75rem;
}
.main-navicon{
font-family: Calibri;font-weight: 500;font-size: 15px;
color: #414f58;
background-color: #f6f6f6;
}

.navicon-ul {
    max-height:200px;/*The important part*/
  overflow-y:auto;/*Also...*/
  overflow-x:hidden;/*And the end of the important part*/

} 
.select2-container--bootstrap .select2-selection--single {
background: linear-gradient(#E6E6E6, #F1F1F1 ) !important;
}
 .ui-autocomplete { 
          cursor:pointer; 
          height:120px; 
          overflow-y:scroll;
          font-size: 14px !important;
          font-family: Calibri !important;
              padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.6;
      }    
      .ui-menu-item:hover{
      background-color: #EEEEEE !important;
    }

      .placeholder-nav{
        color: #b1b7ba;
        font-weight: 500;
      }
     .dropdown-menu > li {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.6;
  color: #333333;
  white-space: nowrap;
  }

  .dropdown-menu > li:hover {
    background-color: #EEEEEE;
  }

  section {
display: table;
width: 100%;
border-collapse: collapse;

}

section > * {
display: table-row;
}

section .col {
display: table-cell;
}
#block_container {
  display: flex;
  justify-content: left;
  width: 60%;
}
#bloc{
width:20%;
}
.menuOverlay {
 position:fixed; /*or  absolute*/
 top:0;
 left:0;
 width:100%;
 height: 250px;
 background:#ffffff;
 z-index: 1999; /* or  greater value */
 box-shadow: 1px 4px 3px 0px grey;

}
.menuOverlayBox{
height: 150px !important;
background-color: rgb(246, 246, 246);
}
.rfoInput{
margin: 0 auto;
width: 80%;

border: 0;
  border-bottom: 1px solid black !important;
  border-radius: 0px;
  /* background: rgb(129 67 67) !important; */
  box-shadow: none;
  /* background: blue; */
  background-color: rgb(246, 246, 246) !important;
}
.actionRfo{
margin: 0 auto;
background-color:white !important;float:left !important;width:50% !important;

border: 0;
  border-bottom: 1px solid black !important;
  border-radius: 0px;
  box-shadow: none;
  padding-left: 1px;

}
/* ============ desktop view ============ */
@media all and (min-width: 192px) {
  .navbar .navbar-header .menuOverlay{ display: none; }
  .navbar .navbar-header:hover .menuOverlay{ display: block; }
}	
.rfoInput::-webkit-input-placeholder {
 font-style: italic;
 text-align:center;
}
.actionRfo::-webkit-input-placeholder {
 font-style: italic;
 text-align:left;
}
.navicon-menu{

    width: 300px;
    float: right;
    text-align: right;
    border-color:rgb(60, 78, 90);
    border-radius: 0px;
    border-width: 2px;

}
/* ============ desktop view .end// ============ */