@import url(https://fonts.googleapis.com/css?family=Sigmar+One);
@import url(https://fonts.googleapis.com/css?family=Coda);
@import url(https://fonts.googleapis.com/css?family=Arimo);
@import url(https://fonts.googleapis.com/css?family=Lato:400,900);  /* <-- Just for the demo, Yes I like pretty fonts... */
@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

.perfect-square .square {
    float:left;
    position: relative;
    width: 15%;
    padding-bottom : 15%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    background-color: #06be0a;
    overflow:hidden;
}

.perfect-square .content {
    position:absolute;
    height:90%; /* = 100% - 2*5% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 5%;

}
.perfect-square .table{
    display:table;
    width:100%;
    height:100%;
}
.perfect-square .table-cell{
    display:table-cell;
    vertical-align:middle;
}
/*  For list */
.perfect-square ul{
    text-align:left;
    margin:5% 0 0;
    padding:0;
    list-style-position:inside;
}
.perfect-square li{
    margin: 0 0 0 5%;
    padding:0;
}


/*  For responsive images */

.perfect-square .content .rs{
    width:auto;
    height:auto;
    max-height:90%;
    max-width:100%;
}
/*  For responsive images as background */

.perfect-square .bg{
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover; /* you change this to "contain" if you don't want the images to be cropped */
    color:#fff;
}

.perfect-square .img1{
    background-image: url('https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg');
}
.perfect-square .img2{
    background-image: url('https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg');
}
.perfect-square .img3{
    background-image: url('https://farm4.staticflickr.com/3794/13893055574_3df0ab636b.jpg');
}

/*  following just for the demo */


.perfect-square  {
    font-size:20px;
    font-family: 'Lato',verdana, sans-serif;
    color: #fff;
    text-align:center;
    background:#ECECEC;
}
.perfect-square p{
    margin:0;
    padding:0;
    text-align:left;
}

.perfect-square .numbers{
    font-weight:900;
    font-size:35px;
}

.perfect-square #bottom {
    clear:both;
    margin:0 1.66%;
    width:89.68%;
    padding: 3.5%;
    background-color: #06be0a;
    color: #fff;
}
.perfect-square #bottom p{
    text-align:center;
    line-height:2em;
}
.perfect-square #bottom a{
    color: #000;
    text-decoration:none;
    border:1px solid #000;
    padding:10px 20px 12px;
    line-height:70px;
    background:#ccc;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.perfect-square #bottom a:hover{
    background:#ECECEC;
    border:1px solid #fff;
}

.perfect-square .room-disabled {
    background-color: #ffe407;
}

.perfect-square .not-available {
    background-color: #ff176d;
}

.perfect-square .not-available-room {
    background-color: #ff176d !important;
}

.perfect-square .today-available {
    background-color: #FFA500;
}

.perfect-square .today-available {
    background: rgb(255,165,0); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(255,165,0,1) 0%, rgba(255,165,0,1) 50%, rgba(255,23,109,1) 51%, rgba(255,23,109,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,165,0,1)), color-stop(50%,rgba(255,165,0,1)), color-stop(51%,rgba(255,23,109,1)), color-stop(100%,rgba(255,23,109,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(255,165,0,1) 0%,rgba(255,165,0,1) 50%,rgba(255,23,109,1) 51%,rgba(255,23,109,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(255,165,0,1) 0%,rgba(255,165,0,1) 50%,rgba(255,23,109,1) 51%,rgba(255,23,109,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(255,165,0,1) 0%,rgba(255,165,0,1) 50%,rgba(255,23,109,1) 51%,rgba(255,23,109,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(255,165,0,1) 0%,rgba(255,165,0,1) 50%,rgba(255,23,109,1) 51%,rgba(255,23,109,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa500', endColorstr='#ff176d',GradientType=1 ); /* IE6-9 */


}

.perfect-square .today-not-booked {

    background: rgb(255,165,0); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(255,165,0,1) 0%, rgba(255,165,0,1) 50%, rgba(6,190,10,1) 51%, rgba(6,190,10,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,165,0,1)), color-stop(50%,rgba(255,165,0,1)), color-stop(51%,rgba(6,190,10,1)), color-stop(100%,rgba(6,190,10,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(255,165,0,1) 0%,rgba(255,165,0,1) 50%,rgba(6,190,10,1) 51%,rgba(6,190,10,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(255,165,0,1) 0%,rgba(255,165,0,1) 50%,rgba(6,190,10,1) 51%,rgba(6,190,10,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(255,165,0,1) 0%,rgba(255,165,0,1) 50%,rgba(6,190,10,1) 51%,rgba(6,190,10,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(255,165,0,1) 0%,rgba(255,165,0,1) 50%,rgba(6,190,10,1) 51%,rgba(6,190,10,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa500', endColorstr='#06be0a',GradientType=1 ); /* IE6-9 */


}

.perfect-square .room-disabled .extra{
    color: white;
    font-size: 10px;
    clear:both;
    margin-top: -10px;
    text-align: center;
}

.perfect-square {
    cursor: pointer;
}

.perfect-square .square:hover {
    background-color: #002a80;
    cursor: pointer;

}

/*.perfect-square .square:hover {*/
    /*background-color: #002a80;*/
/*}*/

.modal #notification span.bad {
    color: red;
}


.page-header .page-header-top .page-logo .logo-default {
margin: -5.5px 0 0 0;
}

.logo-default {
    width : 307px;
    height: 80px;
}

#room-name p {
    font-family: 'Sigmar One', cursive;
    color: rgb(68, 118, 125);;
    font-size: 60px;
}

.topnav {
    margin-bottom: 50px;
}

.dash-res tbody tr:hover,
.dataTable tbody tr:hover{
    background-color: #88be77;
    cursor: pointer;
}

.source-website {
    background-color: #be6a30;
}

.btn-top {
    margin-left: 4px;
}

.discount-boot input{
}

.legend {
    font-size: 14px;
    height: 20px;
    margin: 2px;
    clear: both;
}
.legend-kop {
    color: #000000;
    clear:both;
}

.total-placeholder {
    font-size: 16px;
    font-weight: 800;
}

.report {
    font-family: Montserrat;
}

.report-pills-head {
    font-family: 'Roboto Slab', serif;
}

.company-name {
    margin-top: 0px;
    margin-bottom: -60px;
    font-family: 'Coda Caption';
    color: #57779E;
}

.company-name h1 {

    font-family: 'Coda Caption';
}

.page-header .page-header-menu {
    background: #0071FF;
}

.page-header .page-header-menu .hor-menu .navbar-nav > li.active > a, .page-header .page-header-menu .hor-menu .navbar-nav > li.active > a:hover, .page-header .page-header-menu .hor-menu .navbar-nav > li.current > a, .page-header .page-header-menu .hor-menu .navbar-nav > li.current > a:hover {
    color: #f1f1f1;
    background: rgb(32, 80, 140);
}

.page-footer {
    background: #0055BF;
    color: #a2abb7;
}

.page-prefooter {
    background: rgba(29, 95, 177, 0.44);
    color: #a2abb7;
}

.page-header .page-header-menu .hor-menu .navbar-nav > li > a {
    color: #FFFFFF;
}

/*Error */
.help-block {
    color: #ff0000;
}

.company-settings-logo {
    clear: both;
    float: none;
    display: block;
    margin-top: 20px;
    border: #0071ff 2px solid;
    width: 380px;
}

.user-settings-table {
    font-size: 20px;
}

.user-settings-table tbody td{
    padding: 10px;
}


.editable-cell {
  position: relative;
}

.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
  padding-right: 24px;
}

.editable-cell-text-wrapper {
  padding: 5px 24px 5px 5px;
}

.editable-cell-icon,
.editable-cell-icon-check {
  position: absolute;
  right: 0;
  width: 20px;
  cursor: pointer;
}

.editable-cell-icon {
  line-height: 18px;
  display: none;
}

.editable-cell-icon-check {
  line-height: 28px;
}

.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}

.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
  color: #108ee9;
}

.editable-add-btn {
  margin-bottom: 8px;
}