.dl-horizontal dt {
    white-space: normal;
}

.label {
    font-size: 1rem;
    font-weight: bold;
}

.separate {
    width: 0;
    height: 1rem;
    border: 1px solid #dee2e6;
}

ul.ui-autocomplete {
    z-index: 1100;
    max-height: 200px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 20px;
}

body {
    /*--themeColor: #fff;*/
}

/*-------------------- Navbar --------------------*/
.theme-navbar {
    background-color: var(--themeColor) !important;
}

    .theme-navbar .filter > i {
        padding-top: .675rem !important;
        color: #fff;
        background-color: var(--themeColor) !important;
    }
    /*---------- Navbar Brand ----------*/
    .theme-navbar .navbar-brand {
        color: #fff;
        font-size: 1rem;
    }

    .theme-navbar a, .theme-navbar i, .theme-navbar span {
        color: #fff;
        font-size: 1rem;
    }

        .theme-navbar a:hover, .theme-navbar i:hover {
            color: #fff;
        }
    /*---------- Button ----------*/
    .theme-navbar button {
        color: #fff;
        border-color: #fff !important;
        background-color: var(--themeColor) !important;
    }

        .theme-navbar button:hover {
            color: var(--themeColor);
            border-color: #fff !important;
            background-color: #fff !important;
        }

/*----------------------------------------------*/
/*-------------------- Main --------------------*/
.theme-main {
    --font-size: .85rem;
}

    .theme-main input,
    .theme-main select,
    .theme-main i {
        font-size: var(--font-size);
        font-stretch: normal;
    }

    /*---------- Button ----------*/
    .theme-main button.btn {
        font-size: var(--font-size);
        color: var(--themeColor);
        border-color: var(--themeColor);
    }

        .theme-main button.btn:hover {
            color: #fff;
            background-color: var(--themeColor);
        }


    /*--------------- OptionBar ---------------*/
    .theme-main .filter > i {
        padding-top: .675rem !important;
        color: #fff;
        background-color: var(--themeColor) !important;
    }

    /*---------- Badge ----------*/
    .theme-main .badge-label {
        margin: auto;
        padding: .5rem !important;
        color: #fff;
        background-color: var(--themeColor) !important;
        font-size: .85rem;
        vertical-align: middle;
        text-align: center;
    }

    .theme-main .badge-filter {
        color: #fff;
        background-color: var(--themeColor) !important;
        vertical-align: middle;
        text-align: center;
    }

        .theme-main .badge-filter:hover {
            color: #fff;
            background-color: #f00 !important;
        }

        .theme-main .badge-filter span {
            color: #fff;
        }

    /*---------- Button ----------*/
    .theme-main a.btn {
        color: var(--themeColor);
        border: 1px solid var(--themeColor);
    }

        .theme-main a.btn:hover {
            color: #fff;
            background-color: var(--themeColor);
        }

        .theme-main a.btn.action {
            color: #fff;
            background-color: var(--themeColor);
        }

            .theme-main a.btn.action:hover {
                color: var(--themeColor);
                border: 1px solid var(--themeColor);
            }


    /*--------------- Pagination ---------------*/
    .theme-main a[name="prev"].page-link,
    .theme-main a[name="next"].page-link {
        color: var(--themeColor);
        border: 1px solid var(--themeColor);
    }

        .theme-main a[name="prev"].page-link:hover,
        .theme-main a[name="next"].page-link:hover {
            color: #fff;
            background-color: var(--themeColor);
        }

/*-----------------------------------------------*/
/*-------------------- Modal --------------------*/
/*480x800, 480x854, 540x960, 720x1280, 1080x1920*/
@media screen and (min-width: 320px) and (max-width: 480px) {
    .theme-modal .document {
        min-height: 10rem;
        height: 100%;
        width: 100%;
    }
}

/* 854 ~ 1280 */
@media only screen and (min-width: 481px) and (max-width: 1280px) {
    .theme-modal .document {
        min-height: 24rem;
        height: 100%;
        width: 100%;
    }
}


/* 1920px 至更大 */
@media only screen and (min-width: 1281px) {
    .theme-modal .document {
        min-height: 48rem;
        height: 100%;
        width: 100%;
    }
}

.theme-modal .modal-header {
    color: #fff;
    background-color: var(--themeColor);
}

/*padding-top: .675rem !important;*/
.theme-modal .input-group > .input-group-append > a,
.theme-modal .input-group > .input-group-prepend > a {
    margin: 0;
    height: calc(1.5em + 0.75rem + 2px) !important;
    font-size: var(--font-size);
    text-decoration: none;
}

    .theme-modal .input-group > .input-group-append > a > i {
        /*padding-top: .675rem !important;*/
    }

/*.theme-modal .input-group.verify > input {
        border-color: #ccc;
        border-right-color: transparent !important;
    }*/
.theme-modal input.verify {
    /*border-right-color: transparent !important;*/
}

    .theme-modal input.verify.failed {
        border-color: #f00;
    }

    .theme-modal input.verify.checked {
        border-color: #0f0;
    }

.theme-modal a {
    text-decoration: none;
}

    .theme-modal a.verify {
        position: absolute;
        right: .675rem;
        padding-top: .675rem;
    }

        .theme-modal a.verify.failed {
            display: block;
            color: #f00;
        }

        .theme-modal a.verify.checked {
            display: block;
            color: #0f0;
        }

        .theme-modal a.verify > .fa-times,
        .theme-modal a.verify > .fa-check {
            display: none;
        }

        .theme-modal a.verify.failed > .fa-times {
            display: block;
        }

        .theme-modal a.verify.checked > .fa-check {
            display: block;
        }
/*---------- Button ----------*/
.theme-modal .close {
    color: #000;
    text-shadow: 0 1px 0 #e00;
    cursor: pointer;
}

    .theme-modal .close:hover {
        color: #f00;
        text-shadow: 0 1px 0 #c00;
    }


.theme-modal a[name="modal-plus"] {
    color: #fff;
    background-color: var(--themeColor);
}

.theme-modal .themebtn,
.theme-modal a[name="modal-save"],
.theme-modal a[name="modal-new"],
.theme-modal a[name="modal-bind"],
.theme-modal a[name="modal-next"],
.theme-modal a.theme {
    margin: 0 .25rem;
    color: var(--themeColor);
    border: 1px solid var(--themeColor);
    background-color: #fff;
    text-decoration: none;
}

    .theme-modal .themebtn:hover,
    .theme-modal a[name="modal-save"]:hover,
    .theme-modal a[name="modal-new"]:hover,
    .theme-modal a[name="modal-bind"]:hover,
    .theme-modal a[name="modal-next"]:hover,
    .theme-modal a.theme:hover {
        color: #fff;
        background-color: var(--themeColor);
    }

.theme-modal a[name="modal-close"] {
    color: #999;
    background-color: #fff;
    border: 1px solid #999;
}

    .theme-modal a[name="modal-close"]:hover {
        color: #fff;
        background-color: #999;
    }


.theme-modal a[name="modal-save2"],
.theme-modal a.blue {
    margin: 0 .25rem;
    color: #06f;
    background-color: #fff;
    border: 1px solid #06f;
}

    .theme-modal a[name="modal-save2"]:hover,
    .theme-modal a.blue:hover {
        color: #fff;
        background-color: #06f;
    }


.theme-modal a.brown {
    margin: 0 .25rem;
    color: #cc6600;
    background-color: #fff;
    border: 1px solid #cc6600;
}

    .theme-modal a.brown:hover {
        color: #fff;
        background-color: #cc6600;
    }

.theme-modal a[name="modal-return"],
.theme-modal a.gray {
    margin: 0 .25rem;
    color: #999;
    border: 1px solid #999;
}

    .theme-modal a[name="modal-return"]:hover,
    .theme-modal a.gray:hover {
        color: #fff;
        background-color: #999;
    }

.theme-modal a[name="modal-call"],
.theme-modal a[name="modal-sms"],
.theme-modal a.green {
    margin: 0 .25rem;
    color: #4CAF50;
    background-color: #fff;
    border: 1px solid #3e8e41;
    text-decoration: none;
}

    .theme-modal a[name="modal-call"]:hover,
    .theme-modal a[name="modal-sms"]:hover,
    .theme-modal a.green:hover {
        color: #fff;
        background-color: #4CAF50;
    }

.theme-modal a[name="modal-remove"],
.theme-modal a[name="modal-delete"],
.theme-modal a[name="modal-drop"],
.theme-modal a.red {
    margin: 0 .25rem;
    color: #f00;
    background-color: #fff;
    border: 1px solid #f00;
    text-decoration: none;
}

    .theme-modal a[name="modal-remove"]:hover,
    .theme-modal a[name="modal-delete"]:hover,
    .theme-modal a[name="modal-drop"]:hover,
    .theme-modal a.red:hover {
        color: #fff;
        background-color: #f00;
    }


/*-------------------------------------------------*/
/*-------------------- Gallery --------------------*/
.gallery {
    margin: 0;
    padding: 0;
    /*width: 600px;*/
}
    /*--------------- Image Wrapper ---------------*/
    .gallery .image-wrapper {
        /*margin-bottom: 10px;*/
        position: relative;
        width: 100%;
        height: 24rem;
        overflow: hidden;
        background-color: #eee;
    }

        .gallery .image-wrapper .next,
        .gallery .image-wrapper .prev {
            position: absolute;
            display: inline-block;
            color: white;
            background-color: rgba(0, 0, 0, 0.6);
            font-weight: bold;
            font-size: 1rem;
            border-radius: 0 3px 3px 0;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
        }

        .gallery .image-wrapper .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

            .gallery .image-wrapper .prev:hover,
            .gallery .image-wrapper .next:hover {
                background-color: rgba(0, 0, 0, 0.8);
            }

        .gallery .image-wrapper .image {
            display: block;
            margin: auto;
            height: 100%;
            /*width: 80%;*/
            z-index: 9;
        }

            .gallery .image-wrapper .image a img {
                border: 0;
            }

            .gallery .image-wrapper .image .image-description {
                position: absolute;
                bottom: 0px;
                left: 0px;
                padding: 7px;
                text-align: left;
                width: 100%;
                z-index: 2;
                color: #000;
            }

                .gallery .image-wrapper .image .image-description .description-title {
                    display: block;
                }

    /*--------------- Controls ---------------*/
    .gallery .controls {
        float: right;
        padding: .5rem;
        /*height: auto;*/
    }

    /*--------------- NAV ---------------*/
    .gallery .nav {
        position: relative;
        width: 100%;
        background-color: #CCC;
    }

        .gallery .nav .next,
        .gallery .nav .prev {
            position: absolute;
            display: inline-block;
            margin: auto;
            padding: 1rem;
            height: 100%;
            width: auto;
            color: white;
            font-weight: bold;
            font-size: 1.25rem;
            line-height: 160%;
            background-color: #666;
            user-select: none;
            -webkit-user-select: none;
            text-decoration: none;
            cursor: pointer;
            z-index: 10;
        }

        .gallery .nav .prev {
            border-radius: 0 3px 3px 0;
        }

        .gallery .nav .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

            .gallery .nav .prev:hover,
            .gallery .nav .next:hover {
                background-color: #000;
            }

        /*--------------- Thumbs ---------------*/
        .gallery .nav .thumbs {
            width: 100%;
            overflow: hidden;
        }

    .gallery .thumbs .thumb-list {
        position: relative;
        float: left;
        margin: 0 .5rem;
        min-height: 4rem;
        width: 9000px;
        list-style: none;
    }

    .gallery .thumbs li {
        float: left;
        /*padding-right: 5px;*/
    }

        .gallery .thumbs li a {
            display: block;
        }

            .gallery .thumbs li a img {
                height: 4rem;
                width: 4rem;
                border: 5px solid #CCC;
                display: block;
            }

            .gallery .thumbs li a.active img {
                border: 5px solid var(--themeColor);
            }

/*--------------- Transform ---------------*/
.transform45 {
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.transform90 {
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.transform135 {
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}

.transform180 {
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}