/* FIND THE HEX CODE >>   #298271   << AND REPLACE WITH site-color-1 from /stylesheets/styles.css */

/* Layout */
body { font: 14px/1.42857 "Open Sans", sans-serif; color: #333; background-color: #f8f8f8; }
a { color: #298271; }
.container { position: relative; }
.btn { border-radius: 4px; }
label.error{color:red}
.text-white { color:#fff!important; }
.btn-primary { background-color:hsl(23,74%,48%)!important; border-color:hsl(23,74%,48%)!important; outline:none!important; }
.btn-primary:hover { background-color:hsl(23,74%,58%)!important }
.btn-blue { background-color:hsl(211,54%,38%); border-color:hsl(211,54%,38%); color:#fff; }
.btn-blue:hover { background-color:hsl(211,54%,48%); border-color:hsl(211,54%,48%); color:#fff; }
.btn-tan { background-color:hsl(47,35%,43%); border-color:hsl(47,35%,43%); color:#fff; }
.btn-tan:hover { background-color:hsl(47,35%,53%); border-color:hsl(47,35%,53%); color:#fff; }

/* Style Checkboxes with Custom look
  THE LABEL for ATTRIBUTE VALUE MUST MATCH THE INPUT id FOR THIS TO WORK
*/
input[type=checkbox] { display: none; }
input[type=checkbox] + label { cursor: pointer; position: relative; padding-left: 36px; }
input[type=checkbox] + label:before { content: ""; display: block; width: 24px; height: 24px; position: absolute; top: 0; left: 0; background: #fff; border: 1px solid #666; }
input[type=checkbox]:checked + label:before { content: "\f00c"; padding-left: 2px; font-family: "FontAwesome"; font-size: 24px; color: hsl(192, 39%, 44%); line-height: 0.75; text-align: center; }
input[type=checkbox] + label.select-all:before { width: 18px; height: 18px; font-size: 18px; line-height: 0.85; }
.input-well { display: block; padding: 15px !important; background: #fff; }
.input-well label { display: block; font-size: 12px; color: #666; line-height: 1.25; text-align: left !important; font-weight: 400 !important; }
.input-well input[type=checkbox] + label:before { top: 2px; }

/* Navbar */
.navbar { border-radius: 0; border: none; margin-bottom: 0; position: fixed; top: 0; left: 0; right: 0; z-index: 2; }
.navbar-brand { font-family: "Montserrat", sans-serif; }
.navbar-brand .fa { margin-right: 5px; }
.navbar a { color: #fff !important; }
.navbar a:hover { opacity: 0.75; }
.navbar .navbar-toggle { color: #fff; font-size: 20px; padding: 2px 9px; }

/* Login Page */
.logo-wrap { margin: 75px 0 0; }
.login-wrap { width: 400px; margin: 0 auto; padding: 3px; border: 1px #ccc solid; border-radius: 4px; background: #fff; box-shadow: #000 0 0 20px -10px; }
.login-wrap .alert { margin-bottom: 3px; }
.login-tabs { width: 100%; }
.login-tabs:after { display: table; content: ""; clear: both; }
.login-tabs .btn { width: 50%; float: left; border: none; border-radius: 0; padding: 15px 0; }
.login-tabs .btn:first-child { border-radius: 4px 0 0 0; }
.login-tabs .btn:last-child { border-radius: 0 4px 0 0; }
.login-form-item { padding: 35px; }
.login-form-item h3 { font-family: "Montserrat", sans-serif; color: #333; padding: 0 0 20px; margin: 0 0 20px; border-bottom: 1px #eee solid; }
.login-form-item .control-group { margin-bottom: 10px; }


/* Sidebar */
.sidebar-wrap { padding-top: 50px; width: 300px; height: 100vh; overflow: auto; background: hsl(211,54%,38%); position: fixed; top: 0; left: 0; bottom: 0; z-index: 1; }
.sidebar-company { padding: 25px; }
.sidebar-company-logo { text-align: center; margin-bottom: 15px; }
.sidebar-company-logo img { max-width: 250px; height: auto; margin: 0 auto; }
.sidebar-company-name { font-size: 18px; font-family: "Montserrat", sans-serif; text-align: center; color: #fff; }
.sidebar-list { margin: 0; padding: 0; border-top: 1px #409887 solid; }
.sidebar-list-item { list-style: none; }
.sidebar-list-link { display: block; color: #fff; padding: 8px 0; border-bottom: 1px #409887 solid; position: relative; }
.sidebar-list-link:hover, .sidebar-list-link:active, .sidebar-list-link:focus, .sidebar-list-link.open { background: #444; color: #fff; text-decoration: none; }
.sidebar-list-link-icon { display: block; width: 30px; text-align: center; position: absolute; top: 8px; left: 8px; }
.sidebar-list-link-name { display: inline-block; width: 100%; padding: 0 40px; }
.sidebar-list-link-arrow { position: absolute; top: 7px; right: 11px; }
.sidebar-list-link-count { font-style: normal; display: inline-block; background: #666; color: #fff; padding: 2px 7px; font-size: 11px; position: absolute; top: 8px; right: 8px; }
.sidebar-list-dropdown { display: none; margin: 0; padding: 0; background: #0d5043; }
.sidebar-list-dropdown-item { list-style: none; }
.sidebar-list-dropdown-link { color: #fff; display: block; padding: 8px 0; border-bottom: 1px #09463a solid; position: relative; }
.sidebar-list-dropdown-link:hover, .sidebar-list-dropdown-link:active, .sidebar-list-dropdown-link:focus { background: #083a30; color: #fff; text-decoration: none; }
.sidebar-list-dropdown-link-icon { display: block; width: 30px; text-align: center; position: absolute; top: 8px; left: 8px; }
.sidebar-list-dropdown-link-name { display: inline-block; width: 100%; padding: 0 40px; }
.sidebar-list-dropdown-link-arrow { position: absolute; top: 7px; right: 11px; }
.sidebar-list-dropdown-link-count { font-style: normal; display: inline-block; background: #666; color: #fff; padding: 2px 7px; font-size: 11px; position: absolute; top: 8px; right: 8px; }

/* Content Wrap */
.content-wrap { margin-left: 300px; padding: 75px 45px 50px; }
.content-wrap .page-header { margin-top: 0; }
.content-wrap .panel-title { font-family: "Montserrat", sans-serif; }
.content-wrap .table { margin-bottom: 0; font-size: 13px; }
.content-wrap .table tr:first-child th { border-top: none; }

/* Guest Loyalty */
.guest-loyalty .points-title { color: #444; text-align: center; display: block; font-size: 26px; font-weight: bold; margin-bottom: 10px; }
.guest-loyalty .points-earned { color: #3c763d; font-size: 30px; font-weight: bold; margin-left: 10px; display: inline-block; }
.guest-loyalty .points-description { color: #444; text-align: center; text-transform: uppercase; margin-bottom: 10px; }
.guest-loyalty .points-description b { color: red; }
.guest-loyalty .earn-and-redeem h3 { margin: 0 0 10px; color: #298271; }
.guest-loyalty .points-trophy { text-align: center; font-size: 50px; border-radius: 50%; width: 70px; height: 70px; margin: 0 auto; background: #fff; color: #298271; }
.guest-loyalty .table { table-layout: fixed; width: 100%; white-space: nowrap; }
.guest-loyalty .table .row-1 { width: 5%; }
.guest-loyalty .table .row-2 { width: 12%; }
.guest-loyalty .table .row-3 { width: 20%; }
.guest-loyalty .table .row-4 { width: 25%; }
.guest-loyalty .table .row-5 { width: 10%; }
.guest-loyalty .table .row-6 { width: 10%; }
.guest-loyalty .table .row-7 { width: 10%; }
.guest-loyalty .table .row-8 { width: 8%; }
.guest-loyalty .table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guest-loyalty .control-label { font-size: 13px; }

/* Dashboard.cfm */
.propertyNotes { width: 100%; border: 1px #ccc solid; padding: 5px 10px; }

/* Profile Page */
.profile-wrap .control-group { margin-bottom: 10px; }
.profile-wrap .control-group:last-child { margin: 0; }

/* Datepicker */
#ui-datepicker-div { z-index: 7000 !important; font-size: 16px; line-height: 24px; }
.ui-datepicker { border: 0; background: #f5f5f5; border-radius: 0; box-shadow: #000 0 0 50px -14px; }
.ui-datepicker .ui-datepicker-header { background: none; border: none; padding: 0 !important; font-weight: normal; }
.ui-datepicker .ui-datepicker-title { width: 100%; margin: 0 auto !important; background: #298271; border-bottom: 1px solid #609B9E; color: #fff; text-align: center; }
.ui-datepicker-calendar th { font-weight: normal; }
.ui-datepicker-calendar td span, .ui-datepicker-calendar td a { padding: 0; background: #298271 !important; border: #FCF8E3 !important; font-size: 12px; color: #fff !important; line-height: 24px; text-align: center !important; }
.ui-datepicker-calendar td a:hover { background: #fff !important; color: #298271 !important; font-weight: bold; }

/* Responsive */
@media (max-width: 1200px) {
  .guest-loyalty .panel-body { overflow: auto; }
  .guest-loyalty .table { table-layout: auto; }
  .guest-loyalty .table td { overflow: visible; }
}
@media (max-width: 992px) {
  .sidebar-wrap { position: relative; width: 100%; height: auto; bottom: auto; left: auto; right: auto; top: auto; }
  .content-wrap { margin: 0; padding: 20px 25px; }
}
@media (max-width: 768px) {
  .nav.navbar-nav { display: none; }
}
@media (max-width: 320px) {
  body { min-width: 320px; overflow-x: hidden; }
}