/**
 * Gleam-PHP
 *
 * An open source mini development framework for PHP
 *
 * Copyright (c) 2021 by rxiaob (https://github.com/rxiaob/gleam-php)
 *
 * @author     rxiaob <rxiaob@qq.com>
 * @copyright  rxiaob <rxiaob@qq.com>
 * @license    http://www.apache.org/licenses/LICENSE-2.0
 * @link       https://github.com/rxiaob/gleam-php
 */

/* html */

*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-color: #fff;
    color: #212529;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover,
a:focus {
}

/* iconfont by https://www.layui.com/doc/element/icon.html */

@font-face {
    font-family: iconfont;
    src: url(../font/iconfont.eot?v=256);
    src: url(../font/iconfont.eot?v=256#iefix) format('embedded-opentype'), url(../font/iconfont.woff2?v=256) format('woff2'), url(../font/iconfont.woff?v=256) format('woff'), url(../font/iconfont.ttf?v=256) format('truetype'), url(../font/iconfont.svg?v=256#layui-icon) format('svg')
}

.iconfont {
    font-family: iconfont !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.iconfont-close::before {
    content: "\1006"
}

.iconfont-loading::before {
    content: "\e63d"
}

.iconfont-loading1::before {
    content: "\e63e"
}

.iconfont-down:before{
    content:"\e61a"
}

.iconfont-up:before{
    content:"\e619"
}

.iconfont-loading,
.iconfont-loading1 {
    display: inline-block;
    -webkit-animation-duration: .2s;
    -webkit-animation-fill-mode: both;
    animation-duration: .2s;
    animation-fill-mode: both;
    -webkit-animation-name: anim-rotate;
    animation-name: anim-rotate;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@keyframes anim-rotate {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes anim-rotate {
    from {
        -webkit-transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg)
    }
}

/* form */

label {
    height: 30px;
    line-height: 30px;
    margin-right: 5px;
}

input[type='text'],
input[type='password'],
input[type='number'],
input[type='color'] {
    height: 30px;
    padding: 0 10px;
    border: solid #ccc 1px;
    border-radius: 2px;
    background: #fff;
    color: #666;
    font-size: 12px;
    vertical-align: middle;
    transition: all 0.5s;
}

input[type='number'] {
    width: 80px;
    padding-right: 5px;
}

input[type='range'] {
    margin-top: 0px;
}

input[type='range'] + label {
    margin-left: 5px;
}

input[type='color'] {
    padding: 3px;
}

select {
    height: 30px;
    padding: 0 0 0 5px;
    border: solid #ccc 1px;
    border-radius: 2px;
    background: #fff;
    color: #666;
    font-size: 12px;
    vertical-align: middle;
    transition: all 0.5s;
}

input.h40,
select.h40 {
    height: 40px;
    font-size: 14px;
}

textarea {
    resize: vertical;
    border: solid #ccc 1px;
    padding: 5px 10px;
    background: #fff;
    color: #666;
    font-size: 12px;
    line-height: 20px;
    transition: all 0.5s;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #666;
}

.btn,
.upload-btn,
.datagrid-nav > a,
input[type='button'],
input[type='reset'],
input[type='submit'],
button {
    height: 30px;
    padding: 0 10px;
    border-width: 0;
    border-radius: 5px;
    background: #17a2b8;
    background: #00b899;
    background: #549AF0;
    color: #fff;
    font-size: 12px;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    transition: all 0.5s;
}

.btn.red,
.btn.green,
.btn.blue,
.btn.orange,
.btn.black,
.btn.gray,
input.red,
input.green,
input.blue,
input.orange,
input.black,
input.gray,
button.red,
button.red,
button.green,
button.blue,
button.orange,
button.black,
button.gray {
    border-style: solid;
    border-width: 1px;
    background: #fff;
}

.btn,
.datagrid-nav > a {
    display: inline-block;
    line-height: 30px;
}

div.btn {
    display: block;
}

button:hover,
input[type='button']:hover,
input[type='reset']:hover,
input[type='submit']:hover {
    opacity: 0.8;
}

/* input tip */

.input-tip {
    display: none;
    position: absolute;
    z-index: 99999;
    padding: 7px 10px;
    border: solid #dc3545 1px;
    border-radius: 5px;
    box-shadow: 1px 1px 50px rgba(200, 200, 200, .3);
    background: #fff;
    color: #dc3545;
}

.input-tip:after {
    content: "";
    display: block;
    position: absolute;
    left: 5px;
    top: -16px;
    border-width: 8px;
    border-style: solid dashed dashed;
    border-color: transparent transparent #dc3545;
    font-size: 0;
    line-height: 0;
}

/* upload */

.upload-btn {
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin-left: 5px;
}

.upload-btn > input {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 0;
    opacity: 0;
}

.upload-btn::before {
    content: attr(data-text);
    position: relative;
    z-index: 2;
    line-height: 30px;
}

/* switch */

label.switch {
    position: relative;
    display: inline-block;
    min-width: 46px;
    font-size: 12px;
    text-align: center;
}

label.switch > input {
    vertical-align: middle;
}

label.switch > input::before {
    position: absolute;
    top: 3px;
    left: 0;
    width: 100%;
    height: 24px;
    padding: 0 6px;
    border-radius: 16px;
    line-height: 22px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.5s;
}

label.switch > input:not(:checked)::before {
    content: attr(data-no);
    border: solid #d2d2d2 1px;
    background: #fff url(/res/img/form/switch_circle_grey.png) no-repeat left center;
    padding-left: 24px;
    text-align: left;
    color: #999;
}

label.switch > input:checked:before {
    content: attr(data-yes);
    border: solid #5fb878 1px;
    background: #5fb878 url(/res/img/form/switch_circle_white.png) no-repeat right center;
    padding-right: 24px;
    text-align: right;
    color: #fff;
}

/* quote */

.quote {
    margin-bottom: 10px;
    padding: 15px;
    line-height: 1.6;
    border-left: 5px solid #5fb878;
    border-radius: 0 2px 2px 0;
    background-color: #FAFAFA
}

.quote-gray {
    border-color: #eee;
    border-style: solid;
    border-width: 1px 1px 1px 5px;
    background: 0 0
}

/* badge */

.badge {
    display: inline-block;
    padding: 1px 4px;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    background-color: #fff;
    color: #666;
}

.badge-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    background-color: #ff5722;
    color: #fff;
}

/* progress */

.progress {
    display: inline-block;
    width: 100px;
    border-radius: 4px;
    background: #d9d9d9;
    color: #fff;
}

.progress > b {
    position: relative;
    display: block;
    padding: 3px 3px;
    border-radius: 4px;
    background: #17a2b8;
    text-align: right;
}

.progress > b.star:after {
    content: '\20';
    position: absolute;
    top: 50%;
    right: 0;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-right: -8px;
    background: url(/res/img/16x16/star.png) no-repeat;
}

div.progress,
li.progress,
dd.progress {
    display: block;
    width: 100%;
}

/* color */

.red {
    color: #dc3545;
    border-color: #dc3545;
}

.green {
    color: #28a745;
    border-color: #28a745;
}

.blue {
    color: #1e9fff;
    border-color: #1e9fff;
}

.orange {
    color: #f37b1d;
    border-color: #f37b1d;
}

.black {
    color: #2f4056;
    border-color: #2f4056;
}

.gray {
    color: #ccc;
    border-color: #ccc;
}

/* background-color */

.bg-red,
b.bg-red {
    background-color: #ff5722;
    background-color: #dc3545;
    color: #fff;
}

.bg-green,
b.bg-green {
    background-color: #009688;
    background-color: #28a745;
    color: #fff;
}

.bg-blue,
b.bg-blue {
    background-color: #1e9fff;
    background-color: #17a2b8;
    color: #fff;
}

.bg-orange,
b.bg-orange {
    background-color: #f37b1d;
    color: #fff;
}

.bg-pink {
    background-color: #e83e8c;
    color: #fff;
}

.bg-teal {
    background-color: #20c997;
    color: #fff;
}

.bg-darkblue {
    background-color: #007bff;
    color: #fff;
}

.bg-yellow {
    background-color: #ffb800;
    background-color: #ffc107;
    color: #fff;
}

.bg-black,
b.bg-black {
    background-color: #2f4056;
    color: #fff;
}

.bg-gray {
    background-color: #fafafa;
    color: #666;
}

/* tabs */

.tabs {
    background-color: #fff;
}

.tabs > dt {
    position: relative;
    border-bottom: solid #e0e0e0 1px;
    height: 35px;
}

.tabs > dt > a {
    position: relative;
    display: inline-block;
    height: 36px;
    margin-top: -1px;
    margin-left: -1px;
    padding: 0 20px;
    line-height: 35px;
    font-size: 14px;
    cursor: pointer;
}

.tabs > dt > a.active {
    border: solid #e0e0e0 1px;
    border-bottom: none;
    background-color: #fff;
}

.tabs > dd {
    display: none;
    padding: 20px;
    background: #fff;
}

.tabs > dd:first-of-type {
    display: block;
}

.tabs-simple > dt a.active {
    border: none;
    border-bottom: solid #28a745 2px;
}

.tabs-card {
    border: solid #e0e0e0 1px;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}

.tabs-card > dt {
    background-color: #f2f2f2;
}

.tabs-step {
    counter-reset: stepindex;
}

.tabs-step > dt a {
    border: none;
    border-bottom: solid #dc3545 1px;
    font-family: iconfont !important;
    font-style: normal;
}

.tabs-step > dt a.active {
    border-bottom: solid #28a745 1px;
}

.tabs-step > dt a::after {
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 2em;
    height: 2em;
    margin-left: -1em;
    border-radius: 2em;
    background: #dc3545;
    color: #fff;
    font-size: 6px;
    line-height: 2em;
    text-align: center;
    counter-increment: stepindex;
    content: counter(stepindex);
}

.tabs-step > dt a.active::after {
    background: #28a745;
}

/* popup */

.popup {
    display: none;
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
}

.popup > dl,
.popup-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 10px;
    box-shadow: 1px 1px 50px rgba(0, 0, 0, .3);
    text-align: left;
}

.popup > dl > dt,
.popup-head {
    position: relative;
    padding-left: 20px;
    padding-right: 80px;
    height: 40px;
    line-height: 40px;
    border-bottom: solid #eee 1px;
    background-color: #f8f8f8;
    font-size: 14px;
    color: #333;
    overflow: hidden;
}

.popup .popup-close {
    position: absolute;
    top: 12px;
    right: 15px;
    width: 16px;
    height: 16px;
    background: url(/res/img/form/popup_close.png) no-repeat;
    cursor: pointer;
}

.popup > dl > dd,
.popup-body {
    height: 100%;
    padding: 20px;
}

.popup iframe,
.popup-iframe {
    border: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

/* sidebar */

@keyframes move_right {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0%);
    }
}

.sidebar {
    display: none;
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
}

.sidebar > dl,
.sidebar-box {
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background: #fff;
    box-shadow: 1px 1px 50px rgba(0, 0, 0, .3);
    text-align: left;
    -webkit-animation-name: move_right;
    animation-name: move_right;
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.sidebar > dl > dt,
.sidebar-head {
    position: relative;
    padding-left: 20px;
    padding-right: 80px;
    height: 40px;
    line-height: 40px;
    border-bottom: solid #eee 1px;
    background-color: #f8f8f8;
    font-size: 14px;
    color: #333;
    overflow: hidden;
}

.sidebar .sidebar-close {
    position: absolute;
    top: 12px;
    right: 15px;
    width: 16px;
    height: 16px;
    background: url(/res/img/form/popup_close.png) no-repeat;
    cursor: pointer;
}

.sidebar > dl > dd,
.sidebar-body {
    height: 100%;
}

.sidebar iframe,
.sidebar-iframe {
    border: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

/* drop-menu */

.drop-menu {
    position: relative;
    display: inline-block;
    line-height: 20px;
    cursor: pointer;
}

div.drop-menu {
    display: block;
    cursor: pointer;
}

.drop-menu i.triangle {
    display: inline-block;
    margin-left: 2px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #ccc;
}

.drop-menu:hover i.triangle {
    border-top-width: 0;
    border-bottom: 6px solid #ccc;
}

.drop-menu.btn {
    line-height: 30px;
}

.drop-menu.btn > i.triangle {
    border-top-color: #fff;
    border-bottom-color: #fff;
}

.drop-menu > ul {
    display: none;
    position: absolute;
    z-index: 9999;
    left: 0;
    margin-top: -1px;
    min-width: 100%;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background: #fff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.drop-menu > ul > li {
    display: block;
    padding: 5px 10px;
    white-space: nowrap;
    line-height: normal;
    color: #666;
}

.drop-menu > ul > li:not(:first-child) {
    border-top: solid #eee 1px;
}

.drop-menu > nav {
    display: none;
    position: absolute;
    z-index: 9999;
    left: 0;
    padding: 5px 10px;
    border: solid #ccc 1px;
    white-space: nowrap;
    line-height: normal;
    background: #fff;
    color: #666;
    text-align: left;
}

.drop-menu > p {
    display: none;
    position: relative;
    z-index: 9999;
    padding: 5px 10px;
    border: solid #ccc 1px;
    line-height: normal;
    background: #fff;
    color: #666;
    text-align: left;
}

.drop-menu:hover > p:not(:empty),
.drop-menu:hover > nav,
.drop-menu:hover > ul {
    display: block;
}

/* timeline */

.timeline {
    border-left: solid #eee 2px;
    margin-left: 5px;
}

.timeline li {
    position: relative;
    padding: 10px;
    margin: 10px 10px 10px 15px;
    border: solid #eee 1px;
    border-radius: 5px;
}

.timeline li::after {
    content: '';
    position: absolute;
    top: 15px;
    left: -7px;
    display: inline-block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 6px solid #ccc;
}

.timeline li::before {
    content: '';
    position: absolute;
    top: 15px;
    left: -22px;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    border: solid #ccc 1px;
    background: #fff;
}

.timeline li.red {
    border-color: #dc3545;
    background: #dc3545;
    color: #fff;
}

.timeline li.red::after {
    border-right-color: #dc3545;
}

.timeline li.red::before {
    border-color: #dc3545;
}

.timeline li.green {
    border-color: #28a745;
    background: #28a745;
    color: #fff;
}

.timeline li.green::after {
    border-right-color: #28a745;
}

.timeline li.green::before {
    border-color: #28a745;
}

.timeline li.blue {
    border-color: #1e9fff;
    background: #1e9fff;
    color: #fff;
}

.timeline li.blue::after {
    border-right-color: #1e9fff;
}

.timeline li.blue::before {
    border-color: #1e9fff;
}

.timeline li.orange {
    border-color: #f37b1d;
    background: #f37b1d;
    color: #fff;
}

.timeline li.orange::after {
    border-right-color: #f37b1d;
}

.timeline li.orange::before {
    border-color: #f37b1d;
}

/* crumb */

.crumb {
    padding: 15px 0;
    font-size: 14px;
}

.crumb a {
    display: inline-block;
}

.crumb a:not(:first-of-type):before {
    content: '/';
    display: inline-block;
    margin: 0 10px;
    color: #ccc;
}

/* title */

.title,
.dataderails-title{
    position: relative;
    border-bottom: solid #e0e0e0 1px;
    background-color: #fafafa;
    font-size: 14px;
    color: #17a2b8;
}

.title > b,
.dataderails-title > b {
    display: inline-block;
    height: 35px;
    padding: 0 20px;
    line-height: 35px;
    border-bottom: solid #17a2b8 2px;
    text-align: center;
}

.title[data-text]::before,
.dataderails-title[data-text]::before {
    content: attr(data-text);
    display: inline-block;
    height: 35px;
    padding: 0 20px;
    line-height: 35px;
    border-bottom: solid #17a2b8 2px;
    text-align: center;
}

.title > b > i.iconfont,
.dataderails-title > b > i.iconfont {
    position: absolute;
    left: 2px;
}

/* alert */

.alert {
    position: relative;
    min-height: 50px;
    margin-bottom: 15px;
    padding-left: 60px;
    padding-right: 30px;
    border: solid #eee 1px;
    line-height: 50px;
    font-size: 16px;
    transition: all 0.5s;
}

.alert-success {
    border-color: #CCEAC4;
    background: #EDFCE9 url(/res/img/32x32/accept.png) no-repeat 15px center;
    color: #3F5A04;
}

.alert-failed {
    border-color: #EAC7C7;
    background: #FCE9E9 url(/res/img/32x32/delete.png) no-repeat 15px center;
    color: #D33300;
}

.alert-warning {
    border-color: #E9E6C7;
    background: #FCFAE9 url(/res/img/32x32/warning.png) no-repeat 15px center;
    color: #DC6200;
}

.alert-close {
    position: absolute;
    right: 15px;
    font-family: iconfont !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: pointer;
}

.alert-close::before {
    content: "\1006"
}

/* datagrid */

.datagrid-head:after,
.datagrid-foot:after {
    content: " ";
    display: block;
    clear: both;
}

.datagrid-head {
    background: #fff;
    padding: 10px;
    border:1px solid #e0e0e0;
    border-radius: 4px 4px 0 0;
    border-bottom: 0;
}

.datagrid-nav {
    float: left;
}

.datagrid-search {
    float: right;
    text-align: right;
}

.datagrid-search button {
    margin-left: 5px;
}

.datagrid-search button:before {
    content: "\e615    \641c\7d22";
    font: 14px iconfont;
}

.datagrid-page {
    float: right;
    font-size: 14px;
    color: #212529;
}

.datagrid-page a {
    display: inline-block;
    margin-right: 5px;
    padding: 0 5px;
    text-align: center;
    color: #e0e0e0;
}

.datagrid-page a[href] {
    color: #212529;
}

.datagrid-page a.active {
    border-radius: 20px;
    background: #17a2b8;
    color: #fff;
}

.datagrid-page a.page-first:not([href]),
.datagrid-page a.page-last:not([href]),
.datagrid-page a.page-up:not([href]),
.datagrid-page a.page-down:not([href]) {
    display: none;
}

.datagrid-page a.page-first::before {
    content: "\9996\9875";
}

.datagrid-page a.page-last::before {
    content: "\5c3e\9875";
}

.datagrid-page a.page-up::before {
    content: "\4e0a\4e00\9875";
}

.datagrid-page a.page-down::before {
    content: "\4e0b\4e00\9875";
}

.datagrid-table {
    width: 100%;
    margin: 20px 0;
    margin-top: 0;
    background: #fff;
}

.datagrid-table th {
    position: relative;
    padding: 8px 5px;
    background-color: #f3f3f3;
    border-bottom: solid #e0e0e0 1px;
    font-size: 14px;
    color: #333;
    text-align: center;
}

.datagrid-table th a {
    display: block;
    cursor: pointer;
}

.datagrid-table th a.arrow-up {
    position: absolute;
    top: 10px;
    right: 2px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 6px solid #e0e0e0;
    border-top-color: #e0e0e0;
}

.datagrid-table th a.arrow-down {
    position: absolute;
    top: 20px;
    right: 2px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #e0e0e0;
    border-bottom-color: #e0e0e0;
}

.datagrid-table th a.arrow-active {
    border-top-color: #2f4056;
    border-bottom-color: #2f4056;
}

.datagrid-table tr:hover {
    background: #f3f3f3;
}

.datagrid-table td {
    position: relative;
    border-right: solid #e0e0e0 1px;
    border-bottom: solid #e0e0e0 1px;
    padding: 8px 5px;
    font-size: 12px;
    color: #666;
    text-align: center;
    vertical-align: middle;
}

.datagrid-table td:last-child {
    border-right: none;
}

.datagrid-table td.left {
    text-align: left;
}

.datagrid-table td.right {
    text-align: right;
}

.datagrid-table td.ico {
    text-align: left;
    padding-left: 25px;
    background: url(/res/img/16x16/bullet_white.png) no-repeat 5px center;
}

.datagrid-table td.red {
    text-align: left;
    padding-left: 25px;
    background: url(/res/img/16x16/bullet_red.png) no-repeat 5px center;
}

.datagrid-table td.green {
    text-align: left;
    padding-left: 25px;
    background: url(/res/img/16x16/bullet_green.png) no-repeat 5px center;
}

.datagrid-table td.blue {
    text-align: left;
    padding-left: 25px;
    background: url(/res/img/16x16/bullet_blue.png) no-repeat 5px center;
}

.datagrid-table td.orange {
    text-align: left;
    padding-left: 25px;
    background: url(/res/img/16x16/bullet_orange.png) no-repeat 5px center;
}

.datagrid-table td.star {
    text-align: left;
    padding-left: 25px;
    background: url(/res/img/16x16/bullet_star.png) no-repeat 5px center;
}

.datagrid-table td.male {
    text-align: left;
    padding-left: 25px;
    background: url(/res/img/16x16/user.png) no-repeat 5px center;
}

.datagrid-table td.female {
    text-align: left;
    padding-left: 25px;
    background: url(/res/img/16x16/user_female.png) no-repeat 5px center;
}

.datagrid-table td.no-data {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
}

.datagrid-table td.no-data:before {
    content: "\65e0\6570\636e";
}

/* datagrid-tree */

.datagrid-tree-dl {
    position: relative;
    padding-top: 20px;
}

.datagrid-tree-dt {
    position: relative;
    display: inline-block;
    padding: 10px 15px;
    border: solid #e0e0e0 1px;
    border-radius: 5px;
    background: #fff;
    white-space: nowrap;
}

.datagrid-tree-dd {
    position: relative;
    padding-left: 30px;
}

.datagrid-tree-dl:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 0;
    left: -15px;
    width: 15px;
    height: 40px;
    border-bottom: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
}

.datagrid-tree-dl:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    left: -15px;
    width: 15px;
    height: 100%;
    border-left: 1px solid #e0e0e0;
}

.datagrid-tree-dd .datagrid-tree-dl:last-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: -15px;
    width: 15px;
    height: 40px;
    border-bottom: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    border-bottom-left-radius: 5px;
}

/* datagrid-tree-timeline */

.datagrid-tree-timeline {
    display: flex;
    position: absolute;
    top: 40px;
    left: 100%;
    margin-left: 1px;
    border-top: solid #e0e0e0 1px;
    padding-left: 20px;
}

.datagrid-tree-timeline:not(.desc)::after {
    content: '\20';
    position: absolute;
    left: 100%;
    top: -9px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-left: 8px solid #e0e0e0;
}

.datagrid-tree-timeline.desc::after {
    content: '\20';
    position: absolute;
    left: 100%;
    top: -9px;
    width: 0;
    height: 0;
    margin-left: -8px;
    border: 8px solid transparent;
    border-right: 8px solid #e0e0e0;
}

.datagrid-tree-timeline-li {
    position: relative;
    margin-right: 20px;
    margin-top: 20px;
}

.datagrid-tree-timeline-li::before {
    content: '\20';
    position: absolute;
    left: 50%;
    top: -28px;
    right: 0;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 12px;
    background: #e0e0e0;
}

.datagrid-tree-timeline-li::after {
    content: '\20';
    position: absolute;
    left: 50%;
    top: -20px;
    right: 0;
    width: 1px;
    height: 20px;
    background: #e0e0e0;
}

.datagrid-tree-timeline-dt {
    position: relative;
    padding: 10px;
    border: solid #e0e0e0 1px;
    border-radius: 5px;
    background: #fff;
    white-space: nowrap;
}

.datagrid-tree-timeline-dd {
    padding-left: 50px;
    padding-top: 0;
    background: #fff;
}

/* datamodify */

.datamodify > .tabs > dd {
    padding: 0;
}

.datamodify-items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 20px;
    background: #fff;
}

.datamodify-item,
.datamodify-items > li {
    position: relative;
    width: 100%;
    min-height: 30px;
    margin-bottom: 15px;
    padding-left: 120px;
    font-size: 12px;
    color: #666;
    text-align: left;
}

.datamodify-item.col2,
.datamodify-items > li.col2 {
    width: 50%;
}

.datamodify-item.col3,
.datamodify-items > li.col3 {
    width: 33.33%;
}

.datamodify-item.col4,
.datamodify-items > li.col4 {
    width: 25%;
}

.datamodify-item.datamodify-group,
li.datamodify-group {
    width: 100%;
    padding: 0 10px;
    background: #fafafa;
    line-height: 30px;
    font-size: 14px;
    color: #333;
}

.datamodify-caption {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 120px;
    height: 100%;
    padding-right: 10px;
    line-height: 30px;
    font-size: 14px;
    color: #333;
    text-align: right;
    vertical-align: middle;
}

.datamodify-caption::after {
    content: " :";
}

.datamodify-items::after {
    content: " ";
    display: block;
    clear: both;
}

.datamodify b.tip {
    margin-left: 5px;
}

.datamodify p.tip {
    margin-top: 5px;
    line-height: 20px;
}

.datamodify-foot {
    padding-left: 140px;
}

.datamodify-foot button {
    padding-left: 20px;
    padding-right: 20px;
}

/* dataderails */

.dataderails-table {
    width: 100%;
    margin: 0;
    background: #fff;
}

.dataderails-table > caption {
    background: #eee;
    padding: 10px 15px;
    font-size: 14px;
    color: #000;
    text-align: left;
}

.dataderails-table tr {
    background: #fafafa;
}

.dataderails-table tr:nth-of-type(odd) {
    background: #fff;
}

.dataderails-table tr:nth-of-type(even) {
    background: #f9f9f9;
}

.dataderails-table th {
    width: 120px;
    min-width: 120px;
    padding: 10px;
    border-bottom: solid #f4f4f4 1px;
    font-size: 12px;
    color: #656565;
    vertical-align: top;
    text-align: left;
}

.dataderails-table td {
    position: relative;
    padding: 10px;
    border-bottom: solid #f4f4f4 1px;
    font-size: 12px;
    color: #656565;
    vertical-align: top;
    text-align: left;
    word-wrap: break-word;
}

/* ckeditor */

.ck-editor__editable {
    min-height: 300px;
}

/* tagsinput */

div.tagsinput {
    width: 300px;
    height: 100px;
    border: 1px solid #ccc;
    padding: 0 5px 5px 0;
    background: #fff;
    overflow-y: auto;
}

div.tagsinput span.tag {
    display: block;
    float: left;
    height: 22px;
    border: 1px solid #eee;
    border-radius: 5px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    margin-left: 5px;
    margin-top: 5px;
    padding: 0 5px;
    background: #f3f3f3;
    line-height: 22px;
    text-decoration: none;
    font-size: 12px;
    color: #333;
}

div.tagsinput span.tag a {
    font-weight: 700;
    color: #999;
    text-decoration: none;
    font-size: 12px;
}

div.tagsinput input {
    width: 80px;
    height: 22px;
    margin-left: 5px;
    margin-top: 5px;
    border: 1px solid transparent;
    outline: 0;
    background: 0 0;
    font-size: 12px;
    color: #666;
}

div.tagsinput div {
    display: block;
    float: left
}

.tags_clear {
    clear: both;
    width: 100%;
    height: 0
}

.not_valid {
    background: #FBD8DB !important;
    color: #90111A !important
}