@charset "utf-8";
/* CSS Document */

@-webkit-keyframes setbackgroundcolor {
    to {
        background: transparent;
        color: whitesmoke;
    }
}
input:-webkit-autofill {
    /*自动填入文本颜色*/
    -webkit-text-fill-color: whitesmoke !important;
    /*自动填入光标颜色*/
    caret-color: white;
    /*背景透明；原理：动画由透明变有背景色；参数：背景色属性、动画时间、动画速度曲线、延迟时间*/
    transition: background-color 0s linear 3600s;
}

.no-padding {padding: 0 !important;}
.form-readonly {cursor: pointer;}
.elementbox {
    position: relative;
    width: 520px;
    padding: .3em 0;
}
.feedback {transition: .2s;}
.to-hide {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 0;
    overflow: hidden;
}
.unfold {
    position: absolute;
    top: 1.4em;
    right: 1em;
}

.datetimepicker, .table-condensed {
    width: 100%;
}
.datetimepicker table {
    /*table-layout: fixed;*/
    width: 90%;
    margin: auto;
    border-collapse: separate;
    border-spacing: 5px;
}
.datetimepicker table th, .datetimepicker table td {
    padding: .9em !important;
    width: calc(100% / 7) !important;
    text-align: center;
    word-break: break-all;
}
.day, .month {
    box-shadow: inset 0 0 0 1px #353535 !important;
    border-radius: 4px !important;
    transition: .2s;
}
.day:hover {
    background: transparent !important;
    box-shadow: inset 0 0 0 1px #786753 !important;
}
.datetimepicker table tr td.disabled {
    box-shadow: none !important;
}
.datetimepicker table tr td.disabled:hover {
    box-shadow: none !important;
    cursor: not-allowed;
}
.datetimepicker table tr td.today, .datetimepicker table tr td.today:hover {
    background: transparent;
    box-shadow: inset 0 0 0 1px #C4A886 !important;
}
.month:hover {
    background: transparent !important;
    box-shadow: inset 0 0 0 1px #C4A886 !important;
}
.datetimepicker table tr td.active, .datetimepicker table tr td.active:hover,
.active, .active:hover {
    color: #1a1a1a !important;
    background: #C4A886 !important;
    box-shadow: none !important;
}
.datetimepicker thead {
    box-shadow: 0 5px 1px -4px #838383;
    cursor: default;
}
.switch:hover {background: transparent !important;}
.next i, .prev i {color: #ddd;}
.next:hover, .prev:hover {background: transparent !important;}
.old {
    visibility: hidden;
    /*通过js判断是否有某一行日期(7个)全部为上个月的日期(.old)来决定display是否为none*/
}
.new {display: none;}
.custom-disabled, .custom-disabled:hover {
    background: linear-gradient(-45deg, transparent 48.5%, #3e3e3e 49.5%, #3e3e3e 36.5%, transparent 51.5%) !important;
    border: 1px solid #3e3e3e !important;
}

#table {
    color: whitesmoke;
    width: 100%;
    height: 100%;
    position: fixed;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    overflow: auto;
    padding-top: 75px;
    padding-bottom: 100px;
}
.retour {
    display: block;
    text-align: right;
    color: #C4A886;
    transition: .2s;
}
.retour:hover {
    color: whitesmoke;
    text-decoration: underline;
}

#tablebox {
    margin: auto;
    padding-top: 15px;
}
.logobox {
    width: 100px;
    margin: auto auto 10px;
}
.logobox img {width: 100px;}

h1 {
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 1.4em;
    font-weight: 400;
    color: #C4A886;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}
.attention {
    margin-bottom: .3em;
    padding: .8em;
    font-size: .9em;
    border-radius: .3em;
    background: rgba(101, 83, 61, 0.5);
}

#modellist {padding: .5em 0;}
.modelselect {
    margin: .5em auto;
    padding: .8em;
    width: 92%;
    text-align: center;
    border: 1px solid #3e3e3e;
    border-radius: 4px;
    cursor: pointer;
    transition: .2s;
}

#numchoose {padding: 1em .5em;}
.numselect {
    display: block;
    margin: 0 1%;
    padding: .8em;
    float: left;
    width: 18%;
    text-align: center;
    border: 1px solid #3e3e3e;
    border-radius: 4px;
    cursor: pointer;
    transition: .2s;
}
.numselect:hover, #needmore:hover, .modelselect:hover {border-color: #C4A886;}
.numselect-active, .modelselect-active {
    color: #1a1a1a;
    background: #C4A886;
    border-color: #C4A886;
}
#numplus {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: .5em;
}
#needmore {
    margin: .5em auto 0 auto;
    padding: .8em;
    width: 18%;
    border: 1px solid #3e3e3e;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
}
#needmore p {color: #fff !important;}
#addnum, #subnum, #numselectmore {
    display: block;
    padding: .8em;
    float: left;
    width: 18%;
    text-align: center;
    color: #fff;
    cursor: pointer;
}
#numselectmore {
    color: #1a1a1a;
    background-color: #C4A886;
    border: 1px solid #C4A886;
    border-radius: 4px;
}

.input-group {padding-bottom: .6em;}
.input-group-addon, .form-control {
    background: transparent;
    border-color: #4e4e4e;
    transition: .2s;
}
.glyphicon {
    color: #4e4e4e;
    transition: .3s;
}
.form-control {
    height: 60px;
    color: whitesmoke;
    font-size: .9em !important;
    border-left: 1px dotted rgba(78, 78, 78, 0.5);
}
.form-control:focus {
    border-color: #C4A886;
    border-left: 1px dotted rgba(78, 78, 78, 0.5);
    box-shadow: none;
}
.form-control:read-only {background: transparent;}

#timebox h2 {
    margin-bottom: .3em;
    padding: .5em 1em;
    color: white;
    background: rgba(98, 98, 98, 0.5);
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    border-radius: 4px;
}
#timebox h3 {padding: .5em 0;}
#timelistbox {padding-bottom: 1em;}
.hourslist {padding-bottom: .8em;}
.times {
    padding: .8em;
    margin: .3em 1%;
    float: left;
    width: 48%;
    text-align: center;
    border: 1px solid #3e3e3e;;
    border-radius: 4px;
    cursor: pointer;
    transition: .1s;
}
.times:hover {
    border-color: #C4A886;
    background: rgba(117, 97, 73, 0.5);
}
.time-active, .time-active:hover  {
    color: #1a1a1a;
    border-color: #C4A886;
    background: #C4A886;
}
.glyphicon-ok-circle {color: greenyellow;}
.glyphicon-remove-circle {color: red;}

#clientinfo h2 {
    padding: 0 0 1em 0;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 1.2em;
    font-weight: normal;
    color: #C4A886;
}

#to-check {
    margin-top: .8em;
    height: 60px;
    color: black;
    font-size: 1.2em;
    font-weight: bold;
    background-color: #C4A886;
    border: 0;
    border-radius: 4px;
    transition: .2s;
}
#to-check:hover, .f-button:hover {
    color: whitesmoke;
    background-color: #87714f;
}

#check-box {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: +100;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, .85);
    overflow: auto;
}
#check-in {
    position: relative;
    margin: auto;
    padding: 2em 1em 1em 1em;
    width: 520px;
    background: #2d2d2d;
    border-radius: .3em;
}
#check-info {
    margin: 0 auto 1em auto;
    width: 350px;
    font-size: 1.1em;
}
#check-info h2 {
    padding-bottom: .8em;
    color: #C4A886;
    font-size: 1.2em;
    text-align: center;
}
#expire {
    padding-bottom: .9em;
    color: #ff390d;
    font-size: .8em;
    display: none;
}
#expire span {
    color: #ff390d;
    padding-right: .5em;
}
#check-info p {padding-bottom: .3em;}
.check-icon{
    padding-right: 1em;
    color: #C4A886;
}
.ok-icon {
    display: none;
    padding-left: 1em;
}
.f-button {
    display: block;
    margin: 0 auto .6em auto;
    padding: .5em 1.2em;
    color: black;
    font-size: 1.2em;
    font-weight: bold;
    background-color: #C4A886;
    border: 0;
    border-radius: .2em;
    transition: .2s;
}
.xclose {
    position: absolute;
    top: .5em;
    right: 1em;
    cursor: pointer;
    transition: .2s;
}
.xclose span:hover {color: #fff!important;}

#warn-box, #successinfo {
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    color: yellow;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    background: rgba(0, 0, 0, 0.85);
    border-radius: 5px;
    z-index: 100;
}
#warn-icon, #message-icon {
    display: block;
    padding: 20px 20px 10px 20px;
    color: yellow;
    font-size: 1.2em;
    text-align: center;
}
#warn-info, #successmessage {
    display: block;
    padding: 0 20px 20px 20px;
    text-align: center;
    font-size: 1em;
    font-weight: normal;
}
#warn-close, #messageclose {
    position: absolute;
    right: 2%;
    top: 1%;
    color: #C4A886;
    cursor: pointer;
    z-index: +1;
}
#warn-close:hover, #messageclose:hover {color: #fff;}
#successinfo, #message-icon {color: #2cff23;}


@media (max-width: 1280px) {
    .elementbox {width: 365px;}
    .datetimepicker {padding: 0;}
    .datetimepicker table {width: 100%;}
    #table {
        padding-top: 60px;
        padding-bottom: 70px;
    }
    #loginbox {
        width: 365px;
        padding-top: 10px;
    }
    .logobox {
        width: 70px;
        margin: auto auto 7px;
    }
    .logobox img {width: 70px;}
    #tablebox {padding-top: 10px;}
    h1 {padding: 14px;}
    .form-control {
        height: 45px;
        font-size: .8em;
    }
    #to-check {height: 45px;}
    #check-in {width: 365px;}
    #check-info {width: 280px;}
    #warn-box, #successinfo {width: 350px;}
}

@media (max-width: 580px) {
    .datetimepicker table th {
        padding-left: .8em !important;
        padding-right: .8em !important;
    }
    .elementbox {width: 350px;}
    #check-in {width: 350px;}
    #check-info {width: 260px;}
}