@font-face {
    font-family: fixedGillSensMT;
    src: url("../assets/gillsansmt.ttf");
}

* {
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
body.reservation-panel {
    font-family: "Gill Sans MT", fixedGillSensMT;
    background-color: #000;
    background-image: url("../assets/images/background.jpg");
    background-repeat: no-repeat;
}

body.reservation-panel.club {
    min-width: 450px;
}

div.empty-space-3em {
    height: 3em;
    width: 100%;
    opacity: 0;
}
@media (max-width: 670px) {
    div.empty-space-3em {
        height: 2em;
    }
}

@media (max-width: 580px) {
    div.empty-space-3em {
        height: 1em;
    }
}

div.empty-space-05em {
    height: .5em;
    width: 100%;
    opacity: 0;
}
div.modal {
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,.5);
}
div.top-pink-line {
    width: 100%;
    height: 50px;
    background-color: #f2318f;
}

div.bottom-pink-line {
    width: 100%;
    height: 50px;
    background-color: #f2318f;
}
.top-pink-line div.main-container {
    position: relative;
    text-align: center;
    line-height: 50px;
    color: #fff;
}

.bottom-pink-line div.main-container {
    position: relative;
    text-align: center;
    line-height: 50px;
    color: #fff;
}

button.logout {
    width: 50px;
    height: 50px;
    border-radius: 0;
    background: none;
    background-image: url("../assets/images/logout.png");
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
}

button.logout:hover {
    background-color: rgba(255,255,255,.3);
}

button.logout:active {
    background-color: rgba(255,255,255,.4);
}

span.top {
    text-transform: uppercase;
    font-size: 1.5em;
}

span.bottom {
    font-size: 1.5em;
}

@media (max-width: 580px) {
    span.top {
        font-size: 1.3em;
    }
}
@media (max-width: 620px) {
    span.bottom {
        font-size: 1.2em;
    }
}

@media (max-width: 380px) {
    span.top {
        font-size: 1.1em;
    }

    span.bottom {
        font-size: .80em;
    }
}

div.main-container {
    position: relative;
    width: 100%;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
}

div.calendar-btns {
    position: absolute;
    top: calc(50% - 50px);
    top: -moz-calc(50% - 50px);
    top: -webkit-calc(50% - 50px);
}

@media (max-width: 670px) {
    div.calendar-btns {
        width: 100%;
        height: 82px;
        margin-top: 2em;
        position: relative;
    }
    div.calendar-btns a {
        top: 0;
    }
}

div.center-container {
    width: 100%;
    max-width: 540px;
    height: 100%;
    background-color: #fff;
    padding: 25px 10px;
    box-sizing: border-box;
}

button {
    background: #fff;
    border: 0;
    outline: none;
    border-radius: 5px;
    height: 43px;
    text-transform: uppercase;
    font-size: 1.5em;
    font-weight: normal;
}

button:hover {
    font-weight: bold;
    color:#f2318f;
}

button:active {
    color:#f2318f;
    background-color: #cbcbcb;
}

.form .control-group {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: .5em;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.form .control-group input[type="text"],
.form .control-group textarea {
    margin-bottom: 5px;
    background: #fff;
    width: calc(100% - 70px);
    width: -moz-calc(100% - 70px);
    width: -webkit-calc(100% - 70px);
}
.form .control-group textarea {
    border-color: rgb(228, 228, 228);
    resize: vertical;
}
.form .control-group label.type {
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    width: 100px !important;
    margin: 0 5px 5px 0;
    color: #f2318f;
    line-height: 1.6;
}
.form.details {
    padding: 25px 0;
}
.form.details .control-group input[type="text"],
.form.details .control-group textarea {
    width: calc(100% - 114px);
    width: -moz-calc(100% - 114px);
    width: -webkit-calc(100% - 114px);
}
.form.details .control-group select {
    width: calc(100% - 110px);
    width: -moz-calc(100% - 110px);
    width: -webkit-calc(100% - 110px);

}
.form.details .control-group label {
    vertical-align: top;
    width: calc(100% - 200px);
    width: -moz-calc(100% - 200px);
    width: -webkit-calc(100% - 200px);
    font-weight: bold;
    margin: 0 5px 0 0;;
    color: #f2318f;
    line-height: 1.6;
}
select.pink-theme {
    font-family: "Gill Sans MT", fixedGillSensMT;
    color: #f2318f;
}
select.pink-theme option{
    font-family: "Gill Sans MT", fixedGillSensMT;
    background-color: #f2318f;
    color: #fff;
}
select.pink-theme option:hover{
    box-shadow: 0 0 10px 100px #fff inset;
    color: #f2318f;
}

/*Login page*/
.main-container.center {
    text-align: center;
}

button.login {
    width: 47%;
    background: #fff;
    margin-top: 2em;
    display: inline-block;
}

@media (max-width: 580px) {
    button.login {
        margin-top: 1.4em;
        font-size: 1.3em;
    }
}
/*Pinpad*/
img.logo-standard {
    display: block;
    margin: auto;
}

@media (max-width: 580px) {
    img.logo-standard {
        width: 300px;
    }
}

@media (max-width: 380px) {
    img.logo-standard {
        width: 200px;
    }
}

/*todo add rest

/*calendar*/
#datepicker {
    position: relative;
    margin-left: 15px;
    margin-right: 15px;
}
table {
    border-collapse: collapse;
    border-style: hidden;
}
table td{
    width: 80px;
    height: 70px;
    background-color: #fff;
    border: 1px solid #000;
    text-align: center;
}
@media (max-width: 380px) {
    table td {
        width: 80px;
        height: 56px;
    }
}
table td a, table td span.ui-state-default{
    text-decoration: none;
    color: #000;
    font-size: 2.5em;
    height: 100%;
    width: 100%;
}

@media (max-width: 380px) {
    table td a, table td span.ui-state-default{
        font-size: 1.9em;
    }
}


table td.ui-state-disabled.undefined{
    background-color: #b6b6b6;
}
table td:hover{
    background-color: #f2f2f2;
    cursor: pointer;
}
table td:active{
    background-color: #e6e6e6;
    cursor: pointer;
}

table th {
    height: 40px;
    background: none;
    color: #fff;
    font-size: 1.4em;
}

@media (max-width: 380px) {
    table th {
        font-size: 1.2em;
    }
}

button.back {
    width: 50px;
    height: 50px;
    left: 0;
    position: absolute;
    cursor: pointer;
    color: white;
    border-radius: 0;
    background: none;
    background-image: url("../assets/images/left.png");
    background-repeat: no-repeat;
}

button.back:hover {
    background-color: rgba(255,255,255,.3);
}

button.back:active {
    background-color: rgba(255,255,255,.4);
}

a.ui-datepicker-prev {
    width: 32px;
    height: 50px;
    left: 0;
    position: absolute;
    cursor: pointer;
    color: white;
    background: none;
    background-image: url("../assets/images/l_medium.png");
    background-repeat: no-repeat;
}

@media (max-width: 380px) {
    a.ui-datepicker-prev {
        width: 16px;
        height: 25px;
        background-image: url("../assets/images/l_small.png");
    }
}

@media (max-width: 670px) {
    a.ui-datepicker-prev {
        top: 64px;
    }
}

@media (max-width: 670px) {
    a.ui-datepicker-prev.additional {
        width: 52px;
        height: 86px;
        background-image: url("../assets/images/l_big.png");
    }
}

a.ui-datepicker-prev:hover {
    background-color: rgba(255,255,255,.3);
}
a.ui-datepicker-prev:active {
    background-color: rgba(255,255,255,.4);
}

button.left {
    border-radius: 0;
    right: 0;
    left: auto;
}

button.left:hover {
    background-color: rgba(255,255,255,.3);
}

button.left:active {
    background-color: rgba(255,255,255,.4);
}

a.ui-datepicker-next {
    width: 32px;
    height: 50px;
    right: 0;
    position: absolute;
    cursor: pointer;
    color: white;
    background-image: url("../assets/images/r_medium.png");
    background-repeat: no-repeat;
}

@media (max-width: 380px) {
    a.ui-datepicker-next {
        width: 16px;
        height: 25px;
        background-image: url("../assets/images/r_small.png");
    }
}

@media (max-width: 670px) {
    a.ui-datepicker-next {
        top: 64px;
    }
}

@media (max-width: 670px) {
    a.ui-datepicker-next.additional {
        width: 52px;
        height: 86px;
        background-image: url("../assets/images/r_big.png");
    }
}
a.ui-datepicker-next:hover {
    background-color: rgba(255,255,255,.3);
}
a.ui-datepicker-next:active {
    background-color: rgba(255,255,255,.4);
}


table.ui-datepicker-calendar {
    margin-right: auto;
    margin-left: auto;
}

div.ui-datepicker-title {
    color:#f2318f;
    font-size: 2.1em;
    margin-bottom: .3em;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-transform: uppercase;
}
div.ui-datepicker-title span.ui-datepicker-year {
    display: none;
}

div.extra-months {
    position:relative;
    color: white;
    width: 100%;
    max-width: 566px;
    height: 0;
}

div.extra-months span.month {
    font-size: 1.6em;
    text-transform: uppercase;
    position: absolute;
    line-height: 55px;
}

div.extra-months span.before-month {
    left: 0;
}

div.extra-months span.after-month {
    right: 0;
}

@media (max-width: 670px) {
    div.ui-datepicker-title {
        padding-bottom: 50px;
    }
    div.extra-months {
        height: 0;
        top: 50px;
    }
    div.extra-months span.before-month {
        line-height: 80px;
        left: 55px;
    }

    div.extra-months span.after-month {
        line-height: 80px;
        right: 55px;
    }
}

@media (max-width: 580px) {
    div.ui-datepicker-title {
        font-size: 2em;
        line-height: 53px;
        margin-bottom: .45em;
    }
}

@media (max-width: 380px) {
    div.ui-datepicker-title {
        font-size: 1.7em;
        line-height: 55px;
        margin-bottom: .5em;
    }
    div.extra-months span.before-month {
        font-size: 1.3em;
        line-height: 55px;
        left: 42px;
    }

    div.extra-months span.after-month {
        font-size: 1.3em;
        line-height: 55px;
        right: 42px;
    }
}

/*Club plan*/
.club-plan {
    margin: auto;
    position: relative;
    width: 988px;
    height: 623px;
    background-image: url("../assets/images/club_plan_988.png");
    background-repeat: no-repeat;
}
#t1 {
    bottom: 234px;
    right: 111px
}
#t2 {
    top: 225px;
    right: 332px
}
#t3 {
    top: 124px;
    right: 332px
}
#t4 {
    top: 11px;
    right: 332px
}
#t5 {
    top: 11px;
    right: 417px
}
#t9 {
    bottom: 300px;
    left: 40px
}
#t10 {
    bottom: 206px;
    left: 40px
}
#t11 {
    bottom: 118px;
    left: 40px
}
#t12 {
    bottom: 31px;
    left: 49px
}
#t13 {
    top: 431px;
    left: 189px
}
#t14 {
    top: 344px;
    left: 189px
}
#D {
    top: 510px;
    left: 276px
}
#RB {
    top: 271px;
    left: 390px
}
#V1 {
    top: 107px;
    left: 78px
}
#V2 {
    top: 107px;
    left: 153px
}
#V3 {
    top: 20px;
    left: 78px
}
#V4 {
    top: 20px;
    left: 153px
}

.club-plan div.table {
    position: absolute;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.3em;
}

div.table.small {
    height: 36px;
    width: 36px;
    border-radius: 36px;
    background-color: #fff;
}

div.table.small span {
    color:#f2318f;
    line-height: 36px;
}

div.table.small.reserved {
    background-color: #f2318f;
}

div.table.small.completed {
    background-color: #15DD00;
}

div.table.small.missed {
    background-color: #FFD700;
}

div.table.small.reserved span {
    color:#fff;
}

div.table.medium {
    height: 50px;
    width: 50px;
    border-radius: 50px;
    background-color: #fff;
}

div.table.medium span {
    color:#f2318f;
    line-height: 50px;
}

div.table.medium.reserved {
    background-color: #f2318f;
}

div.table.medium.completed {
    background-color: #15DD00;
}

div.table.medium.missed {
    background-color: #FFD700;
}

div.table.medium.reserved span {
    color:#fff;
}

div.table.oval {
    height: 74px;
    width: 34px;
    border-radius: 17px / 37px;
    background-color: #fff;
}

div.table.oval span {
    color:#f2318f;
    line-height: 74px;
}

div.table.oval.reserved {
    background-color: #f2318f;
}

div.table.oval.completed {
    background-color: #15DD00;
}

div.table.oval.missed {
    background-color: #FFD700;
}

div.table.oval.reserved span {
    color:#fff;
}


@media (max-width: 1004px) {
    .club-plan {
        width: 620px;
        height: 390px;
        background-image: url("../assets/images/club_plan_620.png");
        background-repeat: no-repeat;
    }
    div.table.oval {
        height: 42px;
        width: 20px;
    }
    div.table.oval span {
        line-height: 45px;
        font-size: 13px;
    }
    div.table.small {
        height: 28px;
        width: 28px;
    }
    div.table.small span{
        line-height: 31px;
    }
    div.table.medium {
        height: 40px;
        width: 40px;
    }
    div.table.medium span{
        line-height: 42px;
    }
    #t1 {
        bottom: 145px;
        right: 65px
    }
    #t2 {
        top: 139px;
        right: 206px
    }
    #t3 {
        top: 76px;
        right: 206px
    }
    #t4 {
        top: 4px;
        right: 206px
    }
    #t5 {
        top: 4px;
        right: 259px
    }
    #t9 {
        bottom: 185px;
        left: 24px
    }
    #t10 {
        bottom: 126px;
        left: 24px
    }
    #t11 {
        bottom: 71px;
        left: 24px
    }
    #t12 {
        bottom: 17px;
        left: 30px
    }
    #t13 {
        top: 267px;
        left: 117px
    }
    #t14 {
        top: 213px;
        left: 117px
    }
    #D {
        top: 320px;
        left: 172px
    }
    #RB {
        top: 165px;
        left: 241px
    }
    #V1 {
        top: 70px;
        left: 52px
    }
    #V2 {
        top: 70px;
        left: 100px
    }
    #V3 {
        top: 17px;
        left: 52px
    }
    #V4 {
        top: 17px;
        left: 100px
    }
}


@media (max-width: 636px) {
    .club-plan {
        width: 450px;
        height: 283px;
        background-image: url("../assets/images/club_plan_450.png");
        background-repeat: no-repeat;
    }
    div.table.oval {
        height: 33px;
        width: 15px;
    }
    div.table.oval span {
        line-height: 35px;
        font-size: 12px;
    }
    div.table.small {
        height: 21px;
        width: 21px;
    }
    div.table.small span{
        line-height: 22px;
        vertical-align: top;
        font-size: 13px;
    }
    div.table.medium {
        height: 28px;
        width: 28px;
    }
    div.table.medium span{
        line-height: 28px;
        font-size: 15px;
    }
    #t1 {
        bottom: 105px;
        right: 47px
    }
    #t2 {
        top: 101px;
        right: 148px
    }
    #t3 {
        top: 56px;
        right: 148px
    }
    #t4 {
        top: 4px;
        right: 147px
    }
    #t5 {
        top: 4px;
        right: 186px
    }
    #t9 {
        bottom: 133px;
        left: 19px
    }
    #t10 {
        bottom: 90px;
        left: 19px
    }
    #t11 {
        bottom: 51px;
        left: 19px
    }
    #t12 {
        bottom: 11px;
        left: 24px
    }
    #t13 {
        top: 194px;
        left: 87px
    }
    #t14 {
        top: 155px;
        left: 87px
    }
    #D {
        top: 232px;
        left: 126px
    }
    #RB {
        top: 123px;
        left: 177px
    }
    #V1 {
        top: 50px;
        left: 39px
    }
    #V2 {
        top: 50px;
        left: 73px
    }
    #V3 {
        top: 12px;
        left: 39px
    }
    #V4 {
        top: 13px;
        left: 73px
    }
}

/*Overly*/
div.lightbox-overlay {
    position: fixed;
    top:0;
    left: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.5);
}
div.lightbox-container {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    max-width: 540px;
    min-width: 300px;
    margin: 20% auto;
    background-color: #f2318f;
    padding: 15px 0;
    text-align: center;
}

@media (max-width: 380px) {
    div.lightbox-container {
        padding: 15px 20px;
        min-width: 260px;
    }
}
div.lightbox-top {
    text-align: left;
    padding-left: 35px;
    padding-right: 35px;
}
div.lightbox-top p {
    display: inline-block;
    margin-left: 15px;
    vertical-align: top;
    margin-top: 10px;
    color: #fff;
    font-weight: bold;
    font-size: 1.3em;
}
div.lightbox-content {
    text-align: left;
    padding-left: 35px;
    padding-right: 35px;
}
div.lightbox-content p {
    margin: 15px 0 20px 0;
    color: #fff;
    font-size: 1.1em;
}
div.lightbox-content #lightbox-btn-container {
    position: relative;
    text-align: center;
}

.warning-sign {
    display:inline-block;
    width: 55px;
    height: 45px;
    background-image: url("../assets/images/warning.png");
    background-repeat: no-repeat;
}

button.btn {
    height: 36px;
    font-size: 1.3em;
    width: 47%;
    color: #f2318f;
    font-weight: normal;
}

button.btn:hover {
    font-weight: bold;
}

button.btn:active {
    background-color: #cbcbcb;
}

button.btn.no {
    margin-left: 3%;
}

button.btn.yes {
    margin-right: 3%;
}



.tables-reservations-overview {
    position: absolute;
    margin-bottom: 24px;
    right: 18px;
    bottom: 48px;
    width: 496px;
    height: 96px;
    /*height: 24px;*/
    background-color: #fff;
    border: 1px solid #f2318f;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

@media (max-width: 1004px) {
    .tables-reservations-overview {
        right: 0;
        bottom: 0;
        margin-bottom: 30px;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        width: 620px;
        height: 120px;
        /*height: 30px;*/
    }
}

@media (max-width: 636px) {
    .tables-reservations-overview {
        right: 0;
        bottom: 0;
        margin-bottom: 30px;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        width: 450px;
        height: 120px;
    }
}

.tables-reservations-overview .column {
    vertical-align: top;
    width: 25%;
    height: 100%;
    display: inline-block;
}

.column .row {
    height: 25%;
    width: 100%;
    line-height: 21px;
}

.column .row.extra {
    background-color: #fff;
    border-right: 1px solid #f2318f;
    border-left: 1px solid #f2318f;
    position: relative;
    left: -1px;
}

@media (max-width: 1004px) {
    .column .row {
        line-height: 30px;
    }
}

.row .table-id {
    background-color: #f2318f;
    color: #fff;
    width: 20%;
    height: 100%;
    display: inline-block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-bottom: 1px solid #fff;
    overflow: hidden;
}

.table-id span {
    text-align: center;
    display: block;
    width: 100%;
}

.row .customer {
    text-align: left;
    padding-left: 5px;
    color: #f2318f;
    width: 80%;
    height: 100%;
    display: inline-block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-bottom: 1px solid #f2318f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.no-border-bottom {
    border-bottom: 0 !important;
}

div.empty-space-3em.drop-on-full-screen {
    display: none;
}

@media (max-width: 1004px) {
    div.empty-space-3em.drop-on-full-screen {
        display: block;
    }
}