/**** element styles ****/
hr { border-color: #cccccc; margin: 0px; }

/**** header, main and footer divs ****/
.header-title { font-size: 30px; }

/**** class-based style modifiers ****/

.no-margins { margin: 0px; }

.with-margins { margin: 10px; }

.with-padding { padding: 10px;}

.col-centered { float: none; margin: 0 auto; }

.flag-icon-bordered {
	border: 1px solid #ddd
}

.centerblank {
    max-width:100%;
      margin-left: 5px;
      margin-right: 5px;
}

@media (min-width: 800px) {
  .centerblank{
        max-width:800px;
        margin:0 auto;
  }
}

.btn-info,
.btn-info:hover,
.btn-info:active,
.btn-info:visited,
.btn-info:focus,
.btn-info:disabled  {

    background-color: #73AD21 !important;
    border-color: #73AD21 !important;
	font-weight: 900 !important;
	font-size: 1.8em !important;
	font-family: Georgia !important;
    color:  black  !important;

}

.btn-outline-info,
.btn-outline-info:active,
.btn-outline-info:visited,
.btn-outline-info:focus {

    color:  #588519  !important;
    border-color: #73AD21 !important;
	font-size: large !important;
	font-weight: 500 !important;

}


.btn-outline-info:hover {
    color:  #73AD21  !important;
    border-color: #73AD21 !important;	
    background-color: #73AD21 !important;
    color:  black !important;
	
}


.btn-warning,
.btn-warning:hover,
.btn-warning:active,
.btn-warning:visited,
.btn-warning:focus {

    background-color:  #FFA507 !important;
    border-color:  #FFA507 !important;
	font-weight: 900 !important;
	font-size: 1.8em !important;
	font-family: Georgia !important;
	color: black !important;
}

.btn-outline-warning,
.btn-outline-warning:active,
.btn-outline-warning:visited,
.btn-outline-warning:focus {

    color:  #bd7a08  !important;
	font-size: large !important;
	font-weight: 500 !important;

}

.btn-outline-warning:hover {
    color:  black !important;
}


.sidenotify {
    padding-top:15px;

}

@media (min-width: 767px) {
    .sidenotify {
        padding-top:0px;
    
    }
}

.fade {
    -webkit-transition-duration: 0.1s; /* Safari */
    transition-duration: 0.1s;
}

.collapsing {
    transition: height 0.1s ease !important;
}

#bootstrap-overrides label { font-weight: normal;}

.star-left {
font-size: 25px;
margin-right:20px;

}

.star-right {
font-size: 25px;
 float:right;
 margin-left:20px;
      display:none;

}

@media (min-width: 600px) {
    .star-right {
      display:block;
  }
}

.destination {
  font-size: 25px;
}

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

.UP {
 font-size: 17px;
 text-decoration: line-through;
 color: #878ca8;
 float:right;
}

.stops {
 font-size: 20px;
 white-space: nowrap;
}

.airline_name {
 font-size: 17px;
 margin-left: 10px;
 white-space: nowrap;
}

.price {
font-size: 25px;
 color: #f76922;
 float:right;
}

.months {
  margin-left:50px;
  margin-right:50px;
}
.availability {
 float:right;
 font-size:15px;
}

@media (min-width: 650px) {
  .availability{
      font-size:17px;
  }
}

@media (min-width: 750px) {
  .availability{
      font-size:20px;
  }
}



.glink {
 float:right;
 margin-left:50px;
}

.deal-box {
  font-size: 20px;
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px;
  max-width: 800px;
  padding-bottom:20px;
  line-height:40px;
}

.deal-box-great {
  font-size: 20px;
  border-radius: 25px;
  border: 2px solid #FFA507;
  padding: 20px;
  max-width: 800px;
  padding-bottom:20px;
  line-height:40px;
}

.stroke {
   font-size: 40px;
   font-family: Gadugi;
   font-weight: bold;
  color: white;
  text-shadow:
   3px 3px 0 #000,
   -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}

.stroke-less {
   font-size: 20px;
   font-family: Gadugi;
  color: white;
  text-shadow:
   2px 2px 0 #000,
   -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}

.tagline {
    margin-top:-1.5em;
    margin-bottom:0.2em;

}

@media (min-width: 310px) {

    .stroke-less {
       font-size: 22px;
    }
    
    .tagline {
        margin-top:-1.5em;
        margin-bottom:0.5em;
    
    }

}

@media (min-width: 336px) {

    .tagline {
        margin-top:-0.8em;
        margin-bottom:0.5em;
    
    }

}


@media (min-width: 487px) {
    .stroke {
       font-size: 42px;
    }
    .stroke-less {
       font-size: 30px;
    }
    .tagline {
        margin-top:-0.5em;
        margin-bottom:1.5em;
    }
}

.demo_button, .demo_button:hover {
  border-radius: 15px ;
  height: 48px ;
  color: white;
  background-color:orange;
  padding-top: 4px;
  padding-bottom: 5px;
  text-shadow: none;
}

.image-box {
  /* Here's the trick */
  background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.3)), var(--image-url) center center;

  /* Here's the same styles we applied to our content-div earlier */
  color: white;
  height: 60vh;
  min-height:390px;
  /*display: flex;*/
  /*align-items: center;
  justify-content: center;*/
  padding: 10vh 0;
}


@media (min-width: 640px){
	.stroke {
		
		margin-right: 10%;
	}
	
}


.image-box-log-in {
  /* Here's the same styles we applied to our content-div earlier */
  background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0)), var(--image-url) center center;

  color: white;
  height: 30vh;
  /*display: flex;*/
  /*align-items: center;
  justify-content: center;*/
}


.item_detail_right {
    width: 600px;
    border: 1px solid blue;
    display: inline-block;
    vertical-align: top;
    line-height: normal;
    padding: 2px;
    margin: 2px;}


 /* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

.admintable {
	padding-left: 5px;
	padding-right: 5px;
}



.payment-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #ffffff;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}