/***************************
    General
***************************/
*,
*:before,
*:after
{
    box-sizing: border-box;
}
html
{
    /*height: 100%;*/
    min-height: 100%;
    margin: 0;
    padding: 0;
}
body
{
   /* height: 100%;*/
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif !important;
    /*
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    */
}
.noscroll
{
    position: fixed;
    width: 100%;
}

h1,h2,h3,h4,h5,h6{
    font-weight:bold !important;
}
.sidebar a{
    color:#fefefe;
}
.sidebar a:hover{
    color:#fefefe;
}
.main a{
    color:#919191;
}
.glyphicon-pencil{
        margin: 0 5px;
}
.hide{
    display:none;
}
/***************************
    Layout
***************************/
.left
{
    float: left;

    margin: 0;
}
.clearfix:after
{
    display: block;
    visibility: hidden;
    clear: both;

    height: 0;

    content: '.';
}
.table-layout1
{
    margin: 20px 0;
}
.table-layout1 dt
{
    font-weight: bold;

    float: left;

    width: 200px;
}
.location-list
{
    margin: 0;
    padding: 0;

    list-style: none;
}

.margin-top
{
    margin-top: 20px;
}
.margin-bottom
{
    margin-bottom: 20px;
}
.margin-none.form-group
{
    margin-bottom: 0;
}
.main .no-padding
{
    padding-right: 0;
    padding-left: 0;
}
.table-detail-item,
.table-detail-item-sent
{
    cursor: pointer;
}
.gray
{
    color: #aaa;
}
.bold
{
    font-weight: bold;
}
.font-large
{
    font-size: 200%;
}

.main .nav-pills>li.active>a,
.main .nav-pills>li.active>a:focus,
.main .nav-pills>li.active>a:hover{
    background-color: #555;
}
/***************************
    Module
***************************/
.module-wrapper
{
    position: relative;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;

    display: none;

    width: 100%;
    height: 100%;

    background: rgba(0,0,0,.7);
}
.module
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    overflow: scroll;

    margin: auto;

    border-radius: 5px;
    background: #fefefe;
    box-shadow: 2px 2px 5px #212121;
}
.module > h2
{
    margin: 15px 30px;
}
.module > h2 > i
{
    margin-right: 10px;
}
.closeBtn
{
    position: absolute;
    top: 15px;
    right: 15px;

    cursor: pointer;
}
.closeBtn > i
{
    font-size: 1.7em;
}
.btn-wrapper
{
    text-align: right;
}
/***************************
    Form
****************************/
input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
textarea,
select
{
    outline-color: #4caf50;
}
select option:hover
{
    background: #4caf50;
}
.form-group .input-group.date,
.form-group .input-group.price
{
    padding-right: 15px;
    padding-left: 15px;
}

.salesrecords-filter .form-group .input-group.date
{
    padding-right: 0;
    padding-left: 0;
}

/****************************
    Main
*****************************/

.wrapper.container-fluid
{
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}


/****************************
    Header
*****************************/
header
{
    position: fixed;
    z-index: 3;

    width: 100%;
    height: 50px;

    background: #68a6ce;
    box-shadow: 0 1px 8px;
}

/****************************
    Navigation & Sidebar
*****************************/
.menu-icon
{
    display: none;

    padding: 15px 0 0 20px;
}
.menu-icon > i
{
    font-size: 1.4em;

    color: #fefefe;
}
.menu-icon > .close
{
    display: none;

    opacity: 1;
}
.menu-icon > .close:hover
{
    opacity: 1;
}
.sidebar.open
{
    left: 0;
        width: 100%;
}
.main.open
{
   /* left: 250px;*/
}
.logo
{
    display: inline-block;

    width: 250px;
    height: 100%;

    text-align: center;
    vertical-align: top;

    background: #4caf50;
}
.logo > h1
{
    font-size: 1em;
    line-height: 25px;

    display: inline-block;

    margin: 12px auto;
    padding: 0 15px;

    color: #fefefe;
}
.login
{
    position: absolute;
    top: 12px;
    right: 20px;

    display: inline-block;

    cursor: pointer;

    color: #fefefe;
}
.login-username i
{
    margin-right: 10px;
}
.logout
{
    display: none;

    padding: 30px;

    text-align: center;

    background: #212121;
}
.login:hover .logout
{
    display: block;
}
.sidebar
{
    /*position: absolute;*/
    z-index: 1;
    /*top: 50px;*/
    margin-top: 50px;
    float: left;
    width: 250px;
    min-height: 100vh;
    background: #68a6ce;
    box-shadow: 1px 0 5px;
    /*padding-bottom: 32767px;*/
    padding-bottom: 50px;
    /*margin-bottom: -32767px;*/
    position: fixed;
    overflow: scroll;
    height: 600px;
}
.sidebar > h2
{
    font-size: 1em;

    margin: 0;
    padding: 20px 20px 0 20px;

    color: #fefefe;
}

.sidebar-menu
{
    list-style: none;

    transition: all .2s linear;
}
.sidebar-menu > li
{
    font-size: 1.1em;

    margin: 25px 0;
    padding: 0 20px 0 0;

    cursor: pointer;
    transition: all .2s linear;

    color: #fefefe;
}
.sidebar-menu > li > i
{
    float: right;

    margin: 5px 0 0 0;
}
.sidebar-menu > li > i.sub-menu-open
{
    display: none;
}
.sub-menu
{
    display: none;

    margin: 10px 0;
    padding: 0 0 0 10px;

    list-style: none;
}
.sub-menu > li
{
    font-size: .9em;

    margin: 15px 0;
    transition: all  0.3s;
}
.sub-menu > li:before
{
    margin: 0 5px 0 0;

    content: '-';
}

.sub-menu > li:hover
{
    transform:translateX(5px);
    color:#4caf50;
}
.sub-menu > li:hover a{
    color:#4caf50;
    text-decoration: none;
}

/****************************
    Contents Area
*****************************/
.main
{
    /*position: relative;
    top: 50px;
    left: 250px;

    float: left;

    width: calc(100% - 250px);
    padding: 25px;*/
        /* position: relative; */
    /* top: 50px; */
    /* left: 250px; */
    margin: 50px 250px 0;
    float: left;
    width: calc(100% - 250px);
    padding: 25px;

}
.main.signin{
    max-width:400px;
    position: absolute;
     top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%); /* Safari用 */
    transform: translate(-50%, -50%);
}
.title
{
    font-size: 2em;

    margin: 0 0 20px 0;
}
.signin .title{
    text-align: center;
}
.has-btn
{
    display: inline-block;

    margin-right: 30px;
}
.title > i
{
    margin: 0 20px;
}
.content
{
    margin: 50px 20px;
}
/* Sign In*/
.signin .content{
    margin: 0 20px;
}

.signin i{
    margin-right:5px;
    color:#616161;
}
.signin input[type="email"],
.signin input[type="text"]{
    width: 100%;
    border-radius: 5px;
    padding: 10px;
        border: 2px solid #616161;
}
.signin input[type="email"]:focus,
.signin input[type="text"]:focus{
    outline: none;
  box-shadow: 0px 0px 5px #4caf50;
}

.signin .btn{
    width:200px;
    margin:20px auto;
    display:block;
}
.main .btn-success,
.module-wrapper .btn-success{
     background: #4caf50;
    box-shadow: 2px 3px 0px #367138;
    color:#fefefe;
    border: none;
}
.main .btn-success:hover,
.module-wrapper .btn-success:hover{
    box-shadow: 0px 0 0 #000000;
    background:#4caf50;
    -webkit-transform: translate(2px,3px);
       -moz-transform: translate(2px,3px);
        -ms-transform: translate(2px,3px);
         -o-transform: translate(2px,3px);
            transform: translate(2px,3px);
}
.message-box
{
    display: none;
    color: red;
}
#ok-message-box {
    width:100%;
    background-color: #D9EDF7;
    color: #3A87AD;
    margin: 10px 0 20px;
    border: 1px solid #BCE8F1;
    padding:30px;
}
#error-message-box {
    width:100%;
    background-color: #F2DEDE;
    color: #B94A48;
    margin: 10px 0 20px;
    border: 1px solid #EED3D7;
    padding:30px;
}

.form-horizontal .control-label.attachment,
.module-wrapper .form-horizontal .control-label.message
{
    padding-top: 0;
}
.main .form-horizontal .form-group
{
    margin-right: 0;
}

/******************************

    Modal

******************************/
.modal-title{
    font-size:2em;
}
.modal-title i{
    margin-right:10px;
    margin-left: 10px;
}

#shift-pp .modal-dialog{
    height: 500px;
    overflow: scroll;
}
#shift-pp .modal-title{
    text-align: center;
}
#edit-campaign .input-group.date{
    padding-left:0;
}
#edit-notification .input-group.date{
    padding-left:0;
    padding-right:0;
}
#add-treatment .modal-dialog{
    width:700px;
}
#add-treatment .modal-title{
    text-align: center;
}
#add-treatment .module-table-wrapper{
        padding: 15px;
}
#add-treatment form{
    padding: 20px 0;
    border: 1px solid #ddd;
    border-top: 0;
}
#next-available .modal-dialog{
        width: 450px;
}
#next-available .modal-title{
    text-align: center;
}
#edit-treatment .modal-dialog{
    width:700px;
}
#edit-treatment form{
    padding:10px 10px 0 10px;
}
#treatment-checkout .modal-dialog{
        width: 1024px;
}
#payment-method .modal-dialog{
    width:500px;
}
#pay .modal-dialog{
        width: 900px;
    height: 800px;
    overflow: scroll;
}
#pay .modal-title{
    text-align: center;
}
/*Module Wrapper Size*/
.detail-message .module
{
    max-width: 800px;
       max-height: 400px;
    padding: 20px;
}

.detail-message-sent .module
{
    max-width: 800px;
    max-height: 500px;
    padding: 20px;
}

.edit-user .module
{
    max-width: 700px;
    max-height: 600px;
    padding: 20px;
}
.add-purchase .module
{
    max-width: 500px;
    max-height: 450px;
    padding: 20px;
}

.customer-info-item .lock-label
{
    display: inline-block;
    color: white;
    background-color: #FFD1C8;
    margin-left: 16px;
    padding: 4px 8px;
}

.lock-checkbox label
{
    position:relative;
    top:-4px;
}

.lock-checkbox input
{
    position:relative;
    top:3px;
}

.edit-customerInfo .module
{
    max-width: 700px;
    max-height: 600px;
    padding: 20px;
}
.edit-attendance .module
{
    max-width: 600px;
    max-height: 480px;
    padding: 20px;
}
.edit-sales .module
{
    max-width: 600px;
    max-height: 480px;
    padding: 20px;
}
.view-shift-module .module
{
    max-width: 400px;
    max-height: 300px;
    padding: 20px;
}
.edit-shift-module .module
{
    max-width: 400px;
    max-height: 300px;
    padding: 20px;
}
.add-treatment .module
{
    max-width: 700px;
    max-height: 450px;
    padding: 20px;
}

.edit-treatment .module
{
    max-width: 700px;
    max-height: 410px;
    padding: 20px;
}

.next-available-time .module
{
    max-width: 400px;
    max-height: 220px;
    padding: 20px;
}
.treatment-checkout .module
{
    max-width: 980px;
    max-height: 700px;
    padding: 20px;
}
.payment-method .module
{
    max-width: 500px;
    max-height: 680px;
    padding: 20px;
}

.pay .module
{
    max-width: 800px;
    max-height: 680px;
    padding: 20px;
}
.show-information .module{
    max-width: 600px;
    max-height: 400px;
    padding: 20px;
}
.edit-location .module{
       max-width: 400px;
    max-height: 300px;
    padding: 20px;
}
.edit-product .module{
       max-width: 400px;
    max-height: 300px;
    padding: 20px;
}
.edit-course .module{
       max-width: 450px;
    max-height: 450px;
    padding: 20px;

}
.edit-campaign .module{
       max-width: 700px;
    max-height: 450px;
    padding: 20px;

}
/* Add Notification */
.add-notification .form-group .input-group.date{
    padding-right:0;
    padding-left:0;
}
.term-to
{
    margin: 5px 0;
}
/* All Notifications*/
.edit-notification .module
{
    max-width: 600px;
    max-height: 500px;
    padding: 20px;
}

/* Punch In Punch Out */
.punchinOut-message
{
    font-size: 1.5em;
}
.punchinOut-message span
{
    margin: 0 10px;
}
.check
{
    display: none;
}
/*Search Customer Info*/
.search-result h2{
    display: inline-block;
    margin-right:10px;
}
.search-result .hits{
    display: inline-block;
}
.pagenation{
    top: 20px;
    right: 20px;
    width: 450px;
}

.pagenation ul{
    list-style: none;
    display: inline-flex;
    margin: 0;
    padding: 0;
}
.pagenation ul li {
    display: inline-block;
    margin-right: 10px;
}

/* View Customer Info */
.form-horizontal .control-label.point-label
{
    padding-top: 15px;
}

/* Attedndance Records*/
.attendance-filter
{
    padding: 20px;

    border-radius: 5px;
    background: #f1f1f1;
}
.attendance-result
{
    margin-top: 50px;
    position: relative;
}
.pagenation-left{
    position: absolute;
    bottom: -10px;
    left: 20px;
    list-style: none;
    display: inline-flex;
}
.pagenation-left li{
    width: 30px;
    text-align: center;
}
.export-file{
    position: absolute;
    right: 30px;
}
.export-file button{
    padding:5px 20px;
}
.export-file button span{
    margin-right:5px;
}
.attendance-filter.form-inline select.form-control
{
    width: 100%;
}
/* Sales Records*/
.salesrecords-filter
{
    padding: 20px;

    border-radius: 5px;
    background: #f1f1f1;
}
.salesrecords-filter.form-inline .form-control{
    width:100%;
}

/* View Shift */
.view-shift-header
{
    margin-bottom: 30px;
}
.prev-month a,
.next-month a
{
    font-size: 1.6em;

    padding-top: 5px;

    text-align: center;

    color: #919191;
}
.date-pick .date
{
    font-size: 1.7em;

    text-align: center;
}
.view-shift-location
{
    margin: 20px 0;
}
.view-shift-table tbody tr td:first-child
{
    font-weight: bold;

    padding: 20px 25px;

    text-align: center;
    vertical-align: middle;
}
.view-shift-table tbody tr td:nth-child(n+2)
{
    font-weight: 600;

    position: relative;

    padding: 20px;

    transition: all .2s linear;
    vertical-align: middle;

    color: #919191;
}

.edited
{
    background: #ebd26e;
}
.edited:after
{
    font-size: 1em;

    position: absolute;
    top: 5px;
    right: 10px;

    content: 'Edited';

    color: #616161;
}
.view-shift-table tbody tr td div:first-child
{
    text-transform: uppercase;
}
.wanted > div:first-child
{
    color: #d53e3e;
}

.shift-pp
{
    cursor: pointer;
}
/* View Shift Per Person*/
.view-shift-module h2
{
    font-size: 1.3em;
    font-weight: bold;

    margin: 10px 0;
    margin-bottom: 0;

    color: #212121;
}
.view-shift-table-pp tbody tr td:first-child
{
    font-weight: bold;

    padding: 20px 25px;

    text-align: center;
    vertical-align: middle;
}
.view-shift-table-pp tbody tr td:nth-child(n+2)
{
    font-weight: 600;

    position: relative;

    padding: 20px;

    transition: all .2s linear;
    vertical-align: middle;

    color: #919191;
}
.location i,
.time i
{
    margin-right: 5px;
}
/* Edit Shift */

.edit-shift-header
{
    margin-bottom: 30px;
}
.prev-month a,
.next-month a
{
    font-size: 1.6em;

    padding-top: 5px;

    text-align: center;

    color: #919191;
}
.date-pick .date
{
    font-size: 1.7em;

    text-align: center;
}
.edit-shift-location
{
    margin: 20px 0;
}
.edit-shift-table tbody tr td:first-child
{
    font-weight: bold;

    padding: 20px 25px;

    text-align: center;
    vertical-align: middle;
}
.edit-shift-table tbody tr td:nth-child(n+2)
{
    font-weight: 600;

    position: relative;

    padding: 20px;

    transition: all .2s linear;
    vertical-align: middle;

    color: #919191;
}
.edit-shift-table tbody tr td:nth-child(n+2):before
{
    font-size: 1.2em;

    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;

    display: none;

    width: 100%;
    height: 100%;
    padding: 20px;

    content: 'Edit';
    cursor: pointer;
    text-align: center;
    vertical-align: middle;

    color: #fefefe;
    background: rgba(76,175,80,.7);
}
.edit-shift-table tbody tr td:nth-child(n+2):hover:before
{
    display: block;
}
.edit-shift-table tbody tr td.not-selected, .view-shift-table tbody tr td.not-selected,
.edit-shift-table tbody tr td.tba, .view-shift-table tbody tr td.tba{background-color:#e8e8e8;}
.edited
{
    background: #ebd26e;
}
.edited:after
{
    font-size: 1em;

    position: absolute;
    top: 5px;
    right: 10px;

    content: 'Edited';

    color: #616161;
}
.edit-shift-table tbody tr td div:first-child
{
    text-transform: uppercase;
}
.wanted > div:first-child
{
    color: #d53e3e;
}

/* Treatment Calendar */

.information-box
{
    margin-bottom: 30px;
    padding: 20px;

    color: #fefefe;
    border-radius: 5px;
    background: #4caf50;
}
.information-box > h3
{
    margin-top: 0;
}

.information-box > h3 > i
{
    margin-right: 10px;
}
.information-box > div
{
    font-size: 1.2em;
}
.information-box > div i
{
    margin-right: 5px;
}
.information-title{
        background: none;
    box-shadow: none;
    border: none;
    cursor:pointer;
}

.show-information .module-table-wrapper{
    margin-top:30px;
}
.wrap-word{
    word-wrap: break-word;
}
.treatment-calendar.table
{
    /* width:1230px;*/
}

.treatment-calendar .timeline
{
    width: 30px;
    max-width: 30px;
}
.treatment-calendar th:nth-child(n+2):before
{
    position: relative;
    top: 1px;

    display: inline-block;

    width: 13px;
    height: 13px;
    margin-right: 5px;

    content: '';

    border-radius: 50%;
    background: #a5aeaf;
}
/*.treatment-calendar th:nth-child(3):before
{
    background: #ebd26e;
}
.treatment-calendar th:nth-child(4):before
{
    background: #e49866;
}
.treatment-calendar th:nth-child(5):before
{
    background: #68a6ce;
}
.treatment-calendar th:nth-child(6):before
{
    background: #a5aeaf;
}*/

.treatment-calendar td
{
    min-width: 100px;
}
.schedule-time
{
    height: 80px;

    text-align: center;
}
.treatment-calendar .treatment-item
{
    position: relative;

    padding-top: 15px;
    padding-right: 0;
    padding-left: 0;

    cursor: pointer;
    transition: all .3s;
}
/*
.treatment-calendar .treatment-item:hover
{
    background: rgba(0,0,0,.1);
}
*/

.hour
{
    height: 20px;

    border-top: 1px solid #ccc;
}
.min
{
    height: 20px;

    border-top: 1px dotted #cecece;
}
/*
.treatment-calendar td:nth-child(2) .schedule
{
    background: rgba(115,198,181,.6);
    transiton:all 0.3s ease-out;
}
.treatment-calendar td:nth-child(3) .schedule
{
    background: rgba(235,210,110,.6);
    transiton:all 0.3s ease-out;
}
.treatment-calendar td:nth-child(4) .schedule
{
    background: rgba(228,152,102,.6);
    transiton:all 0.3s ease-out;
}
.treatment-calendar td:nth-child(5) .schedule
{
    background: rgba(104,166,206,.6);
    transiton:all 0.3s ease-out;
}
.treatment-calendar td:nth-child(6) .schedule
{
    background: rgba(165,174,175,.6);
    transiton:all 0.3s ease-out;
}

.treatment-calendar td:nth-child(2) .schedule:hover
{
    background: rgba(115,198,181,1);
}
.treatment-calendar td:nth-child(3) .schedule:hover
{
    background: rgba(235,210,110,1);
}
.treatment-calendar td:nth-child(4) .schedule:hover
{
    background: rgba(228,152,102,1);
}
.treatment-calendar td:nth-child(5) .schedule:hover
{
    background: rgba(104,166,206,1);
}
.treatment-calendar td:nth-child(6) .schedule:hover
{
    background: rgba(165,174,175,1);
}*/

.treatment-calendar td .schedule{background:#dcdcdc;color:#fff;transiton:all 0.3s ease-out;}
.treatment-calendar td .schedule.web {background:#CC5A59;color:#fff;transiton:all 0.3s ease-out;}
.treatment-calendar td .schedule.walkin {background:#FFD1C8;color:#fff;transiton:all 0.3s ease-out;}

.treatment-calendar td .schedule:hover{background:#e8e8e8;}
.treatment-calendar td .schedule.web:hover{background:#ffb3b3;}
.treatment-calendar td .schedule.walkin:hover{background:#ffeae6;}


.schedule
{
    position: absolute;
    top: 15px;

    display: block;
    overflow: hidden;

    width: 100%;
    height: 120px;
    padding: 10px;

    color: #fefefe;
}
.schedule.min90
{
    height: 120px;
}
.schedule.min60
{
    height: 80px;
}
.schedule.min45
{
    height: 60px;
}
.schedule.min20
{
    height: 20px;
}

.schedule-content
{
    display: table-cell;

    vertical-align: middle;
}
.schedule-content .course div,
.schedule-content .customer div{
	padding:0;
}

/* Add Treatment */
.add-treatment .module-table-wrapper
{
    padding: 20px;
}
.add-treatment form
{
    padding: 20px 0;

    border: 1px solid #ddd;
    border-top: 0;
}
#member .course-dropdown .control-label,
#newCustomer .course-dropdown .control-label,
.edit-course .course-dropdown .control-label{
    padding-left: 0;
    padding-right: 27px;
}

#member .course-dropdown .dropdown-padding,
#newCustomer .course-dropdown .dropdown-padding,
.edit-course .course-dropdown .dropdown-padding{
    padding-right:0;
    padding-left:3px;
}
/* Edit Treatment */

.edit-treatment .module-table-wrapper
{
    padding: 20px;
}
.edit-treatment form
{
    padding: 20px 0;

    border: 1px solid #ddd;
    border-radius: 5px;
}

.edit-treatment-2 .module-table-wrapper
{
    padding: 20px;
}
.edit-treatment-2 form
{
    padding: 20px 0;

    border: 1px solid #ddd;
    border-radius: 5px;
}
/*Next Available Time*/
.next-available-time h2
{
    font-size: 1.6em;
}
.next-available-time .form-horizontal
{
    overflow: hidden;
}
.form-control.form-hour
{
    font-size: 2em;

    height: 60px;
}
.form-hour-2
{
    font-size: 3em;

    text-align: center;
}

.btn.okbtn
{
    display: block;

    width: 200px;
    margin: 10px auto 0;
}
/* Treatment Check Out */
.treatment-checkout form{
    overflow: hidden;
}
#treatment-checkout .form-group .checkbox label
{
    font-weight: bold;

    padding-top: 7px;
}
#treatment-checkout .radio label
{
    font-weight: bold;
}
.form-horizontal .control-label.text-left{
    text-align: left;
}
.form-horizontal .coupon.radio.text-left{
    text-align: left;
}
#treatment-checkout .checkbox label,
#treatment-checkout .radio label{
    padding-left:15px;
}
#treatment-checkout .purchase select
{
    height: 30px;
    margin-bottom: 5px;
    padding: 6px;
}
.form-horizontal .coupon.radio
{
    margin-bottom: 5px;
    padding-top: 7px;

    text-align: right;
}
.form-horizontal .gift-certificate{
    padding-left: 35px;
}
.form-horizontal .gc-number{
padding: 0;

}
.proceedbtn
{
    width: 200px;
}

.margin-bottom-xs{
    margin-bottom:5px;
}
.l_point.margin-bottom-xs{
    padding: 7px 0 0;
}
/* Payment Method */
#payment-method .form-horizontal.center-block
{
    float: none;
}
.payment-detail
{
    padding: 5px 15px 10px;

    border-radius: 5px;
    background: #f1f1f1;
}
.payment-detail .form-group
{
    margin-bottom: 0;
}
.payment-detail .form-group.gray label
{
    padding-top: 0;
}
.payment-detail .form-group.gray p
{
    min-height: 20px;
    padding-top: 0;
    padding-bottom: 0;
}
.method-coupon
{
    font-weight: bold;

    color: #4caf50;
}
#payment-method hr
{
    margin: 10px 0 0;

    border-top: 2px solid #e4e4e4;
}
.payment-method hr:nth-child(2)
{
    margin-bottom: 10px;
}
.form-group.total
{
    font-size: 1.8em;
    font-weight: bold;
}
.choose-method
{
    font-size: 1.5em;

    margin-top: 15px;
}
.form-control.method-point
{
    display: inline-block;

    width: 60%;
    margin-right: 5px;
}
.payment-method-form.form-group
{
    margin-bottom: 5px;
}
.paybtn
{
    width: 150px;
    margin-top: 10px;
}
#l_total2 i{
    margin-right:10px;
}
.loading {
    margin: 4px 0 0 0;
    position: relative;
}
.loading img{
    display: none;
}

/* Finish */
#pay h3{
   text-align: left;
    font-size: 1.2em;
    margin-top: 0;
    font-weight: bold;
}
#pay .form-horizontal{
    overflow: hidden;
}
#pay .form-horizontal .control-label{
    text-align:left;
}
.form-horizontal .control-label.paymentinfo-child{
    font-size: 0.9em;
    color: #919191;
    font-weight: 400;
    min-height:10px;
    padding-top:0;
}
.form-control-static.paymentinfo-child{
    font-size: 0.9em;
    color: #919191;
    font-weight: 400;
    min-height:10px;
    padding-top:0;
    text-align: right;
}
.width-big.form-control-static.paymentinfo-child.col-sm-1{
    width:9.33333333%;
}
.finishBtnWrapper{
    display: inline-block;
    margin: 10px;
}
.finishBtn{
    width:150px;
}
.finishBtn i{
    margin-right:5px;
}
/* Add Campaign */

.add-campaign .form-group .input-group.date{
    padding-right:0;
    padding-left:0;
}
.add-course .price{
    padding-left:15px;
    padding-right:15px;
}
/* Add Course */
.radio-inline.bold{
    font-weight:bold;
}
.add-course.form-horizontal .radio-inline{
    padding-left:35px;
}
/* Add Product */
.add-product.form-horizontal .radio-inline{
    padding-left:35px;
}
/* All Courses */
.all-courses-table.table-responsive{
    overflow-x:visible;
}
.main .content .table-responsive {
    overflow-x:visible;
}

/* Edit Campaign*/
.edit-campaign .form-group .input-group.date{
    padding-left:0;
    padding-right: 0;

}
/* Add User */
.passwordNote{
    padding: 10px;
    border: 1px solid #4caf50;
    border-radius: 5px;
}
/**********************************
 Print
***********************************/
@media print {
        header,
        .footer,
        .main {
            display: none;
        }
    }
/**********************************
 Mobile
***********************************/

@media screen and (min-width: 1440px)
{
    /*.treatment-calendar.table{
    width:auto;
}
 .treatment-calendar td{
    width:auto;
}   */
}
@media (min-width:1200px)
{
    .next-available-time .col-lg-offset-3
    {
        margin-left: 22%;
    }
}
@media screen and (max-width:1200px)
{
    .form-inline.attendance-filter .form-group,
    .form-inline.salesrecords-filter .form-group
    {
        margin-bottom: 10px;
    }
    .salesrecords-filter .form-group .input-group.date
    {
        padding-right: 15px;
        padding-left: 15px;
    }
    .schedule{
    	font-size:0.8em;
    }

}

@media screen and (max-width:1100px)
{
    #shift-pp .modal-dialog,
    #add-treatment .modal-dialog,
    #next-available .modal-dialog,
    #edit-treatment .modal-dialog,
    #treatment-checkout .modal-dialog,
    #payment-method .modal-dialog,
    #pay .modal-dialog
    {
        margin: 64px auto 0 auto;
        width:80%;
    }
}

@media screen and (max-width:768px)
{
    header{
        position: absolute;
    }
    .menu-icon
    {
        display: inline-block;

        cursor: pointer;
    }
    .logo
    {
        width: 160px;

        background: transparent;
    }
    .logo > h1
    {
        font-size: .7em;
    }
    .login-username i
    {
        display: none;
    }
    .username
    {
       font-size: 1em;
    }

    .sidebar
    {
    position: relative;
    left: -250px;
    height: auto;
    /* height: 100%; */
    box-shadow: none;
    min-height: 100%;
    }
    .main
    {
       position: absolute;
    /* top: 65px; */
    margin-top: 60px;
    margin-left:0px;
    /* left: 0; */
    padding: 25px 10px;
    width: 100%;
    }
    .main.open{
        display: none;
    }
    .information-box > h3{
        font-size:1.2em;
    }
    .content{
        margin: 30px 0px;
    }
    .form-inline.attendance-filter .form-group
    {
        margin-bottom: 10px;
    }
    .date-pick .date{
        width:calc( 100% - 120px );
        padding:5px;
        font-size: 1.4em;
        float:left;
    }
    .date-pick .prev-month,
    .date-pick .next-month{
        width:60px;
        float:left;
        text-align: center;
        padding:5px;
        margin-bottom: 15px;
    }
    .view-shift-header .pull-right{
        width:100%;
    }
    .row{margin-right:0px; margin-left:0px;}
}

@media screen and (max-width:480px){
    .title{
        font-size:1.4em;
    }
    .has-btn{
        margin: 0 0 20px 0;
        display: block;
    }
    .search-result h2{
        font-size:1.4em;
            margin-bottom: 30px;
    }
    .pagenation{
        margin-bottom: 10px;
        text-align: right;
        position: static;
    }
    .search-result{
        padding:0;
    }
    .passwordNote{
        width: 90%;
        font-size: 11px;
        box-sizing: border-box;
        margin: 10px auto;
    }
    .pagenation-left{
        position: static;
            padding: 10px;
    }

    #shift-pp .modal-dialog,
    #add-treatment .modal-dialog,
    #next-available .modal-dialog,
    #edit-treatment .modal-dialog,
    #treatment-checkout .modal-dialog,
    #payment-method .modal-dialog,
    #pay .modal-dialog
    {
        margin: 64px auto 0 auto;
        width:96%;
    }
}
/* ADDED by Nasu-san */
/* for modal validation message */
.modal .message-box{
    padding: 0 15px 0 25px;
}
​
/* for delete confirm or other notification modal */
.bootbox.modal{
    z-index: 1061;
}
​
.bootbox.modal + .modal-backdrop{
    z-index: 1060;
}
​
.punchinOut-message.punchinOut-punch_in .check,
.punchinOut-message.punchinOut-punch_in .punchInOut{
    color: rgb(76, 175, 80);
    display: inline-block;
}
​
.punchinOut-message.punchinOut-punch_out .check,
.punchinOut-message.punchinOut-punch_out .punchInOut{
    color: rgb(243, 156, 18);
    display: inline-block;
}
​
header a,
header a:hover{
    color: #fff;
    text-decoration: none;
}
​
a.btn-success,
a.btn-primary,
a.btn-warning,
a.btn-danger{
    color: #fff;
    text-decoration: none;
}
#l_body{word-break: break-word;}
/* .treatment-calendar td:nth-child(1) .block, .treatment-calendar td:nth-child(2) .block, .treatment-calendar td:nth-child(3) .block, .treatment-calendar td:nth-child(4) .block, .treatment-calendar td:nth-child(5) .block, .treatment-calendar td:nth-child(6) .block{background: #555;} */
.treatment-calendar td:nth-child(1) .block, .treatment-calendar td:nth-child(2) .block, .treatment-calendar td:nth-child(3) .block, .treatment-calendar td:nth-child(4) .block, .treatment-calendar td:nth-child(5) .block, .treatment-calendar td:nth-child(6) .block{background: #4886ce;}
/* .treatment-calendar td:nth-child(1) .block:hover, .treatment-calendar td:nth-child(2) .block:hover, .treatment-calendar td:nth-child(3) .block:hover, .treatment-calendar td:nth-child(4) .block:hover, .treatment-calendar td:nth-child(5) .block:hover, .treatment-calendar td:nth-child(6) .block:hover{background: #212121;} */
.treatment-calendar td:nth-child(1) .block:hover, .treatment-calendar td:nth-child(2) .block:hover, .treatment-calendar td:nth-child(3) .block:hover, .treatment-calendar td:nth-child(4) .block:hover, .treatment-calendar td:nth-child(5) .block:hover, .treatment-calendar td:nth-child(6) .block:hover{background: #78b6fe;}

.labeled{padding-top: 7px;}
.pagenation .block{display: inline-block;width: 30px;text-align: center;}
.pagenation .disabled{display: inline-block;}
ul.foo {display:table;table-layout:fixed;width: 100%;}
ul.foo li {display:table-cell;vertical-align:middle;text-align:center;border-left:5px solid white;padding:0 10px;}
ul.foo li.web {background-color:#CC5A59;color:#fff;}
ul.foo li.walkin {background-color:#FFD1C8;color:#fff;}
ul.foo li.nopref {background-color:#dcdcdc;color:#fff;}
ul.foo li:first-child {border:none;}
.numbers, .close{z-index:-1;}

/*
checkout時に仮CustomerNoの場合は色変更
*/
.customerNohighlight > .selectize-input
{
    background-color: yellow !important;
}