:root {
    --color-1: hsl(195, 100%, 42%); /* titles */
    --color-2: hsl(195, 67%, 45%); /* active tab */
    --color-3: hsl(195, 67%, 45%); /* default button hover */
    --color-4: hsl(204, 70%, 43%); /* room_qty_button */
    --color-5: hsl(195, 67%, 47%); /* accessories */
    --color-occupied: hsl(6, 57%, 57%);
    --color-available: hsl(127, 34%, 49%);
    --color-history: hsl(205, 8%, 50%);
    --color-today: hsl(0, 0%, 4%);
    --border-radius: 4px;
    --border-radius-2: 1px;
}

body {
	color: rgba(255, 255, 255, 0.85);
    /* set transparent background for iframe mode */
    background-color: transparent;
}

html.mode_window body {
    /* set dark background for window mode  */
    background-color: hsl(0, 0%, 10%);
}

a { color: rgba(255, 255, 255, 0.78);  }

h1, h2, h3, h4, h5, h6 {
	color: rgba(255, 255, 255, 0.88);
}

/* background colors */
.bc0:not(:hover), .bc-reset:not(:hover) { 
    background-color: hsl(205, 9%, 45%) !important;
    border-color:  hsl(205, 9%, 61%) !important;
} /* gray */
.bc1:not(:hover), .bc-cancel:not(:hover) {
    background-color: hsl(211, 16%, 35%)!important;
    border-color: hsl(211, 17%, 45%) !important;
} /* gray/blue */
.bc2:not(:hover), .bc-submit:not(:hover) { 
    background-color: hsl(167, 60%, 35%) !important;
    border-color: hsl(167, 66%, 45%) !important;
} /* green */
.bc3:not(:hover), .bc-next:not(:hover) { 
    background-color: 	hsl(204, 57%, 43%) !important;
    border-color: 	hsl(204, 65%, 53%) !important;
} /* blue */
.bc4:not(:hover) { 
    background-color: hsl(2, 53%, 48%) !important;
    border-color: hsl(2, 65%, 58%) !important;
} /* red */
.bc5:not(:hover) {
    background-color: hsl(283, 30%, 43%) !important;
    border-color: hsl(283, 39%, 53%) !important;
} /* violet */

div.message {
	background-color: #56A5DD;
    color: rgba(255, 255, 255, 1);
}

div.message.warning {
    background-color: hsl(33, 55%, 52%) !important;
    border-color: hsl(33, 62%, 62%) !important;
}
div.message.error {
    background-color: hsl(2, 53%, 48%) !important;
    border-color: hsl(2, 65%, 58%) !important;
}
div.message.info {
    background-color: hsl(167, 60%, 35%) !important;
    border-color: hsl(167, 66%, 45%) !important;
}
div.message.tip {
    background-color: 	hsla(204, 57%, 43%, 0.5) !important;
    border-color: 	hsla(204, 60%, 50%, 0.6) !important;
}
div.message.note {
    background-color: hsl(0, 0%, 21%);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

div.message a { 
    color: rgba(255, 255, 255, 0.9); 
}

.c0, .c0 a  { color: hsl(205, 9%, 55%) !important;} /* gray */
.c1, .c1 a { color: hsl(211, 16%, 35%) !important;} /* gray/blue */
.c2, .c2 a { color: hsl(167, 60%, 35%)!important;} /* green */
.c3, .c3 a { color: hsl(204, 57%, 43%) !important;} /* blue */
.c4, .c4 a { color: hsl(2, 53%, 48%) !important;} /* red */
.c5, .c5 a { color: hsl(283, 30%, 43%) !important;} /* violet */
.c6, .c6 a { color: hsl(33, 55%, 52%) !important;} /* orange */

div.bg_content {
    background-color: hsl(0, 0%, 14%);
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="time"],
textarea,
select {
    background-color: hsl(0, 0%, 20%);
    border: 1px solid hsl(0, 0%, 25%);
    color: rgba(255, 255, 255, 0.9);
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

/* https://dev.to/atndesign/a-trick-to-change-the-autocomplete-background-color-21ll */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1b1b1b inset !important;
  -webkit-text-fill-color: white !important;
}

button, input[type=button], .button, .links-to-buttons a  {
	background-color: hsl(0, 0%, 18%);
	color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.25);
}

button[disabled], .button[disabled] {

    background: #eee;
    border-color: #ddd;
    color: #9B9B9B;
    
	background-color: hsl(0, 0%, 9%);
	color: rgba(255, 255, 255, 0.45);
    border-color: rgba(255, 255, 255, 0.12);
}

button.tab {
	background-color: hsl(0, 0%, 18%);
	color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.25);
}

button.tab.active {
    background-color: hsl(0, 0%, 14%);
	color: rgba(255, 255, 255, 0.9);
    border-color: hsl(0, 0%, 16%);
    border-top-color: var(--color-2)
}

button.tab:hover {
    background-color: hsl(0, 0%, 30%);
	color: rgba(255, 255, 255, 0.95);
}

div.choose_rooms_envelope .line {
	border-color: rgba(255, 255, 255, 0.2);
}

table.item_box {
	background-color: hsl(0, 0%, 18%);
}

.item_box_extension {
	background-color: hsl(0, 0%, 18%);
}

.hilite .hilite_env {
	outline: 1px solid rgba(255, 255, 255, 0.15);;
    box-shadow:0 0 20px rgba(255, 255, 255, 0.20);
}

table.item_box td.content h2 {
	color: rgba(255, 255, 255, 0.7);
}

table.item_box button.room_qty_adjust {
	background-color: hsl(0, 0%, 18%);
	border-color: rgba(255, 255, 255, 0.2);
}

table.item_box input.room_qty {
    color: rgba(255, 255, 255, 0.9);
	background-color: var(--bgFormEls);
    border-color: rgba(255, 255, 255, 0.2);
}

.price_basic {
	color: rgba(255, 255, 255, 0.7);
}

.price_basic .price {
	color: rgba(255, 255, 255, 0.94);
}

.price_details_btn {
	background-color: hsl(0, 0%, 18%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	border-left: 1px solid rgba(255, 255, 255, 0.2);
	border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.price_details {
    background-color: hsl(0, 0%, 18%);
}

.price_details_table td {
    border-color: rgba(255, 255, 255, 0.2);
}

.price_details_table thead td {
	background-color: hsl(0, 0%, 12%);
	border-color: rgba(255, 255, 255, 0.2);
}

button.badge, a.button.badge {
	color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.25);
}

button.badge:hover, a.button.badge:hover {
	background-color: hsl(0, 0%, 10%);
	color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.6);
}

a.button.powered_system {
	color: rgba(255, 255, 255, 0.85);
    background-color: transparent;
    border-color: transparent;
}

a.button.powered_system:hover {
	background-color: hsl(0, 0%, 14%);
	color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.4);
}

div.table-responsive-wrapper {
   background-color: hsl(0, 0%, 14%);
}

table.availability thead {
    border-color: hsl(0, 0%, 35%);
}

table.availability td {
	background-color: hsl(0, 0%, 14%);
}

table.availability td.day {
    border-color: hsl(0, 0%, 35%);
}

table.availability td.saturday {
    background-color: hsl(240, 6%, 8%)
}
table.availability td.sunday {
	background-color: 	hsl(240, 6%, 3%);
}

table.availability td.today {
	background-color: var(--color-today);
}
table.availability td.newmonth {
    border-color: hsl(0, 0%, 35%);
}

table.availability td.label {
    color: rgba(255, 255, 255, 0.75);
}

.availability_color_meaning .item {
    background-color: hsl(0, 0%, 8%);
}

table.monthly_availability {
    outline: 1px solid hsl(0, 0%, 35%);
    background: hsl(0, 0%, 12%);
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2b2b2b+0,1a1a1a+49,141414+51,2d2d2d+99,262626+100 */
background: #2b2b2b; /* Old browsers */
background: -moz-linear-gradient(top,  hsl(0,0%,17%) 0%, hsl(0,0%,10%) 49%, hsl(0,0%,8%) 51%, hsl(0,0%,18%) 99%, hsl(0,0%,15%) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  hsl(0,0%,17%) 0%,hsl(0,0%,10%) 49%,hsl(0,0%,8%) 51%,hsl(0,0%,18%) 99%,hsl(0,0%,15%) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  hsl(0,0%,17%) 0%,hsl(0,0%,10%) 49%,hsl(0,0%,8%) 51%,hsl(0,0%,18%) 99%,hsl(0,0%,15%) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2b2b', endColorstr='#262626',GradientType=0 ); /* IE6-9 */

}

.content_box
, .dpayment_booking_box, .booking_box {
    background-color: hsl(0, 0%, 14%);
    border-color: hsl(0, 0%, 35%);
    color: rgba(255, 255, 255, 0.88);
}

.panel_title {
    color: rgba(255, 255, 255, 0.88);
}

.panel_content {
	background-color: hsl(0, 0%, 14%);
    border-color: hsl(0, 0%, 35%);
}

.bg_gradient_right_bottom {
    background: hsl(0, 0%, 12%);
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2b2b2b+0,1a1a1a+49,141414+51,2d2d2d+99,262626+100 */
background: #2b2b2b; /* Old browsers */
background: -moz-linear-gradient(top,  hsl(0,0%,17%) 0%, hsl(0,0%,10%) 49%, hsl(0,0%,8%) 51%, hsl(0,0%,18%) 99%, hsl(0,0%,15%) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  hsl(0,0%,17%) 0%,hsl(0,0%,10%) 49%,hsl(0,0%,8%) 51%,hsl(0,0%,18%) 99%,hsl(0,0%,15%) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  hsl(0,0%,17%) 0%,hsl(0,0%,10%) 49%,hsl(0,0%,8%) 51%,hsl(0,0%,18%) 99%,hsl(0,0%,15%) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2b2b', endColorstr='#262626',GradientType=0 ); /* IE6-9 */
}