.seven-cols{
padding:7px;
}
.box-shadow{
	box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important;
}
.marginr{
	margin-right: 10px;
}
	@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */    
@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}
.filtercell__label {
    color: #666;
    display: block;
    margin-bottom: 10px;
}
.btn-info-ocb{
 background-color: #337ab7;
    border-color: #2e6da4;
    color: #fff;
}
.page-date-header{
	background-color : #eee;
   float: left;
   width:100%;
   margin-top: 7px;   

}
.page-date-header h4{
  margin-left:10px;
}
.page-date-header h5{
	color  : red;
	text-align: center;	
}

.section-subheading{
	background-color : #609dd2;
	float: left;
    width: 100%;
    padding-left: 6px;
}
.departure-date-container{
	padding-top : 15px;
	float: left;
	width: 100%;
}
 .section-heading{
 background-color: #fff;
 border-bottom: 1px solid #ccc;
 float: left;
 font-size: 15px;
 margin-top: 7px;
 padding: 7px;
 width: 100%;
 }

 .section-heading b{
     background: rgb(255, 255, 255) none repeat scroll 0% 0%;
      color: rgb(51, 122, 183);
       text-transform: uppercase;
 }
.modal-section-heading{
	background-color : #609dd2;
	float: left;
	width: 100%;
	padding-left: 12px;
}

.section-padding{
 margin-top : 10px;
}
.section-padding-sb{
	padding: 5px 5px 5px 0px;
}
.tour-details-section{
	float :left;
	width :100%;
	padding : 5px;
}
.button-region{
	float: left;
	width:100%;
	padding:20px;
}
.medium-sb-width{
	width:150px;
	border: 1px solid #d3b6d7;
    border-radius: 4px;
}
.app-button{
	background-color: grey;
    border: 1px solid grey;
    border-radius:14px;
    box-shadow:0 0 1px 1px #b3b3b3;
    padding: 3px;
    width: 106px;
}
.section-content{
	float :left;
	width :100%;
	padding : 5px;
}
.app-button.clicked{
   
  box-shadow:0 0 0px 0px grey;
}
.alertbox-ocb{
    border: 1px solid transparent;
    border-radius: 4px;
    margin-top: 5px;
    padding: 8px;
 }
 .info-sign{
 	margin-right: 10px;
 }
.deckmodal-body{
	height:auto;
	padding:6px;
}
#shipDeckImageDiv{
	margin-top:20px;
}
.modal-row-padding{
	padding-left :30px;
}
.deckDescr{
	background-color:#609dd2;
	padding:5px;
	margin-top :5px;
	margin-bottom :5px;
}
.cabinColorCodes{
	margin-top:32px;
	padding-left:14px;
}
#cabinAvailDiv > div{
 margin-top:15px; 
} 

.redCol {
    background-color: red;
    border-radius: 5px;
    color: #000000;
    float: left;
    height: 48px;
    line-height: 30px; 
    text-align: center;
    width: 100%;
}
.redCol:hover {
    background-color: darkred !important;
    box-shadow: 0 0 5px 2px red;
}
.greenCol:hover {
    background-color: darkgreen !important;
    box-shadow: 0 0 5px 2px green;
}

.yellowCol:hover {
	background-color:#ff9800 !important;
	box-shadow: 0 0 5px 2px yellow;
}

.blueCol:hover {
	background-color:#0276FD !important;
	box-shadow: 0 0 5px 2px #0276FD;
}

.magentaCol:hover {
	background-color:#D9187C !important;
	box-shadow: 0 0 5px 2px #FF43A4;
}
.greenCol{

	background-color: #00CC00;
	border-radius: 5px;
    color: #000000;
    float: left;
    height: 48px;
    line-height: 30px; 
    text-align: center;
    width: 100%;
}

.yellowCol{

	background-color: #FFFF00;
    border-radius: 5px;
    color: #000000;
    float: left;
    height: 48px;
    line-height: 30px; 
    text-align: center;
    width: 100%;
}

.blueCol{

	background-color: #4E9FFE;
    border-radius: 5px;
    color: #000000;
    float: left;
    height: 48px;
    line-height: 30px; 
    text-align: center;
    width: 100%;
}

.magentaCol{
	background-color: #FF43A4;
	border-radius: 5px;
    color: #000000;
    float: left;
    height: 48px;
    line-height: 30px; 
    text-align: center;
    width: 100%;
}

.cabinInvtInfo {
    background-color: aqua;
    color: #000000;
    float: left;
    height: 19px;
    line-height: normal;
 	border-radius: 0 0 4px 4px;
    width: 100%;
}
.cabinInvtTotal {
    color: blue;
    float: left;
    height: 15px;
    line-height: normal;
    width: 33%;
}

.cabinInvtRsvd {
    color: red;
    float: left;
    height: 15px;
    line-height: normal;
    width: 33%;
}
.cabinInvtAvail {
    color: green;
    float: left;
    height: 15px;
    line-height: normal;
    width: 33%;
}
.cabinDiv{
	margin-top: 15px;
	margin-bottom: 15px; 
	float: left; 
	padding: 20px; 
	border: 1px solid rgb(204, 204, 204);
	width:100%;
}
.cabin-details{
	float:left;
	width:100%;
	margin-bottom: 10px;
}
.cabin-details-label{
	font-weight:normal;
	margin-left:15px;
}
.cabin-details-label-right{
	font-weight:normal;
	margin-left:15px;
}
.cabin-details-content{
	width:100%;
	border-bottom: 1px solid #aaa;
	margin-top:2px;
}
.change-cabin{
	padding:5px;
}
.sub-section-heading{
	background-color : #9e9e9e;
	float: left;
    width: 100%;
    padding-left: 6px;
}
.sub-section-content{
	float:left;
	width :100%;
	padding-top: 10px;
}
.service-radio{
	padding-left: 30px;
    width: 4%;
}

.serviceTable{
	width:100%;
}

.serviceTable td{
	padding-left: 5px;
    padding-top: 5px;
}
.serviceTable span{
	margin-bottom:2px;
}
.summaryTable th,td{
	padding-left: 5px;
    padding-top: 5px;
}
.summaryTable{
	width:100%;
}
.required-star{
    color:red;
}
.custform-row{ 
  margin-top:10px;
  float:left;
  width:100%;
}
.custform-label{
	padding-left:40px;
}
.custform-input{
	padding-left:25px;
}
.custform-input > input{
	width:223px;
}
.custform-input > select{
	width:223px;
}
.custform-input > textarea{
	height:27px;
	width:223px;
}
.fleft {
	width: auto;
	float: left;
	margin-right:14px;
}
.fleft > input {
	width: 100%;
	}
#travlerForm .col-sm-12 {
margin-top: 15px;
}
.fleft > input, .fleft select {
	height: 27px;
	max-width: 150px;
}
.fleft .title {
font-weight: bold;
padding-bottom: 5px;
}
@media only screen
  and (min-width: 320px)
  and (max-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
      .fleft{
          float:none;
      }
      .fleft > input, .fleft select{
          width:100%;
          max-width:100%;
      }

}

@media only screen
  and (min-width: 768px)
  and (max-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 1) {
      .fleft > input, .fleft select{
      max-width: 94px;
      }

}

/* Landscape */
@media only screen
  and (min-width: 768px)
  and (max-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 1) {
      .fleft > input, .fleft select{
      max-width: 135px;
      }
     

}
@media only screen
  and (min-width: 320px)
  and (max-width: 480px)
  and (-webkit-min-pixel-ratio: 2) {
      .fleft{
          float:none;
      }
      .fleft > input, .fleft select{
          width:100%;
          max-width:100%;
      }

}

@media only screen
  and (min-width: 768px)
  and (max-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-pixel-ratio: 1) {
      .fleft > input, .fleft select{
      max-width: 94px;
      }

}

/* Landscape */
@media only screen
  and (min-width: 768px)
  and (max-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-pixel-ratio: 1) {
      .fleft > input, .fleft select{
      max-width: 135px;
      }
     

}
.has-error .error-text {
    display: inline;
}
.error-text {
    color: #fb3f44;
    display: none;
    margin-left: 2em;
}

.has-error .form-control {
    border-color: red !important;
}
.has-error .custform-input{
    border-color: red !important;
}
.overlay {
    background-color:#EFEFEF;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    top: 0px;
    left: 0px;
    opacity: .5; /* in FireFox */ 
    filter: alpha(opacity=50); /* in IE */
}