@charset "utf-8";

:root {
    --wui-primary-color: #1890ff;
    --wui-primary-hover-color: #40a9ff;
    --wui-primary-active-color: #096dd9;
    --wui-primary-disabled-color: #2b70b4;

    --wui-danger-color: #ff504a;
    --wui-danger-hover-color: #f24e48;
    --wui-danger-active-color: #e64c46;
    --wui-danger-disabled-color: #da4f49;

    --wui-disabled-color: rgba(0,0,0,.25);
}

hr { margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #fbfbfb; }
/* WebKit browsers */
::-webkit-input-placeholder { color: #ccc; }
/* Mozilla Firefox 4 to 18 */
:-moz-placeholder { color: #ccc; }
/* Mozilla Firefox 19+ */
::-moz-placeholder { color: #ccc; }
/* Internet Explorer 10+ */
:-ms-input-placeholder { color: #ccc; }

/*-------------- Panel ------------*/
.wui-panel { background-color: #fff; border: 1px solid transparent; border-radius: 2px; box-shadow: 1px 0px 10px 1px rgba(0,0,0,0.06); border-color: #ddd; width: auto; }
.wui-panel-head, .wui-panel-heading { background-color: #fff; padding: 10px 15px; }
.wui-panel-title { color: #337ab7; font-size: 18px; font-weight: bold; }
.wui-panel-body { padding: 15px; }

/*-------------- GroupBox ------------*/
.wui-group-box { display: block; box-sizing: border-box; padding: 6px 8px; color: rgb(85, 85, 85); border: 1px solid #ccc; border-radius: 2px; min-height: 30px; line-height: 1.15; width: 100%; }

/*-------------- Button ------------*/
.wui-btn {
    display: inline-block;
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    outline: none;
    cursor: pointer;
    white-space: nowrap;
    -webkit-appearance: none;
    border-radius: 2px;
    box-sizing: border-box;
    text-decoration: none;
    padding: 4px 12px; 
    vertical-align: top;
    line-height: 20px;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.wui-btn-small { padding: 2px 9px; font-size: 11px; }

.wui-btn-primary { background: var(--wui-primary-color); border: 1px solid var(--wui-primary-color); color: #fff; }
.wui-btn-primary:hover { background: var(--wui-primary-hover-color); border: 1px solid var(--wui-primary-hover-color); }
.wui-btn-primary:active { background: var(--wui-primary-active-color); border: 1px solid var(--wui-primary-active-color); }
.wui-btn-primary[disabled], .wui-btn-primary[readonly] { background: var(--wui-primary-disabled-color); border: 1px solid var(--wui-primary-disabled-color); }

.wui-btn-success { background: #07c160; border: 1px solid #07c160; color: #fff; }
.wui-btn-success:hover { background: #07b75b; border: 1px solid #07b75b; }
.wui-btn-success:active { background: #2baa60; border: 1px solid #2baa60; }
.wui-btn-success[disabled], .wui-btn-success[readonly] { background: #548f6e; border: 1px solid #548f6e; color: #bbb; }

.wui-btn-warning { background: #ffc349; border: 1px solid #ffc349; color: #fff; }
.wui-btn-warning:hover { background: #f0b744; border: 1px solid #f0b744; }
.wui-btn-warning:active { background: #e7ae3c; border: 1px solid #e7ae3c; }
.wui-btn-warning[disabled], .wui-btn-warning[readonly] { background: #e7ae3c; border: 1px solid #e7ae3c; }

.wui-btn-danger { background: var(--wui-danger-color); border: 1px solid var(--wui-danger-color); color: #fff; }
.wui-btn-danger:hover { background: var(--wui-danger-hover-color); border: 1px solid var(--wui-danger-hover-color); }
.wui-btn-danger:active { background: var(--wui-danger-active-color); border: 1px solid var(--wui-danger-active-color); }
.wui-btn-danger[disabled], .wui-btn-danger[readonly] { background: var(--wui-danger-disabled-color); border: 1px solid var(--wui-danger-disabled-color); }

.wui-btn-default { background: #fff; border: 1px solid #ccc; color: #000; }
.wui-btn-default:hover { background: #f9f9f9; }
.wui-btn-default:active { background: #f2f2f2; }
.wui-btn-default[disabled], .wui-btn-default[readonly] { background: #f2f2f2; }

/*-------------- Anchor ------------*/
.wui-anchor { text-decoration: none; }
.wui-anchor-primary[disabled], .wui-anchor-danger[disabled] { color: var(--wui-disabled-color); cursor: not-allowed; pointer-events: none; }

.wui-anchor-primary { color: var(--wui-primary-color); }
.wui-anchor-primary:hover { color: var(--wui-primary-hover-color); }
.wui-anchor-primary:active { color: var(--wui-primary-active-color); }

.wui-anchor-danger { color: var(--wui-danger-color); }
.wui-anchor-danger:hover { color: var(--wui-danger-hover-color); }
.wui-anchor-danger:active { color: var(--wui-danger-active-color); }

/*-------------- Label ------------*/
.wui-label { display: inline-block; height: 30px; line-height: 30px; vertical-align: text-top; }

/*-------------- Image ------------*/
.wui-image { display: inline-block; height: 30px; line-height: 30px; width: 100%; }

/*-------------- Input ------------*/
.wui-input, .wui-select, .wui-combo-box-input input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 30px;
    
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 2px;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.wui-input { padding: 1px 8px 1px 8px; }
.wui-select { padding: 0px 4px; }
.wui-input:focus, .wui-select:focus, .wui-combo-box-input input:focus { outline: 0; border-color: #66afe9; }
.wui-input[disabled], .wui-select[disabled], .wui-input[readonly], .wui-select[readonly], fieldset[disabled] .wui-input { background-color: #fbfbfb; opacity: 1; }
.wui-input[disabled], .wui-select[disabled], fieldset[disabled] .wui-input { cursor: not-allowed; }

/*-------------- TextArea ------------*/
.wui-textarea {
    display: block;
    box-sizing: border-box;
    font: 400 13.3333px Arial;
    font-size: 14px;
    padding: 6px 8px;
    color: rgb(85, 85, 85);
    border: 1px solid #ccc;
    border-radius: 2px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    resize: vertical;
    min-height: 30px;
    line-height: 1.15;
    width: 100%;
    height: 30px;
}
.wui-textarea:focus { outline: 0; border-color: #66afe9; }
.wui-textarea[disabled], .wui-textarea[readonly] { background-color: #fbfbfb; opacity: 1; }
.wui-textarea[disabled] { cursor: not-allowed; }

/*----------- CheckBox -----------*/
.wui-checkbox { position: relative; display: inline-block; vertical-align: middle; width: 100%; height: 30px; line-height: 30px; }
.wui-checkbox input[type='checkbox'] { display: none; }
.wui-checkbox label {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
    width: 20px;
    height: 20px;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
.wui-checkbox label:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 2px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.wui-checkbox input[type='checkbox']:checked + label:before { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAz0lEQVRIS+3S0RGCMBAE0NsOLMUStIPrQKxErEToYDvQEizFDs7JDHHQgeFIQH7CL+EeuznIRg82cqXAf2u+VF2qXq2BxZZLVVVEHiRfnr9dBFbVCsDNzJ4icvTg2XBEY0ozu5Ksp1K7YVXdiciBJOPQAbQlWU2h4b0L7tA7gL2ZnUk2OegcuAZw6dXZAPgkMzN30jjDlTgcVtWAnX5rTEHdiXt3+oWnorPhfvIcNAnu8CosmGd7x8647zgHGfq2wEs3OjqvVF2qXq2BzZbrDcZ3Wh+AsBPrAAAAAElFTkSuQmCC) no-repeat center center; }
.wui-checkbox input[type='checkbox']:disabled + label:before { background-color: #fbfbfb; opacity: 1; }
.wui-checkbox input[type='checkbox']:readonly + label:before { background-color: #fbfbfb; opacity: 1; }

/*-------------- EditCombox ------------*/
.wui-edit-combox { display: inline-block; width: 100%; }
.wui-edit-combox-container { position: relative; display: flex; width: 100%; height: 30px; line-height: 30px; box-sizing: border-box; z-index: 0; }
.wui-edit-combox-input { flex: 1; z-index: 1; margin: 1px 20px 1px 1px; padding: 1px 8px 1px 8px; border: 0 solid transparent; }
.wui-edit-combox-select { flex: 1; z-index: 0; position: absolute; width: 100%; height: 30px; box-sizing: border-box; border-radius: 2px; border: 1px solid rgb(204, 204, 204); }
.wui-edit-combox-select:focus { outline: 0; border-color: #66afe9; }
.wui-edit-combox-input:focus { outline: 0; }
.wui-edit-combox-input:focus + .wui-edit-combox-select { outline: 0; border-color: #66afe9; }

/*-------------- Table ------------*/
.wui-table { display: inline-block; }
.wui-table-loading { opacity: 0.7; pointer-events: none; }
.wui-table-toolbar { padding-bottom: 5px; }
.wui-table-footer, .wui-table-bottom-bar { margin-top: 10px; }
.wui-table-content { position: relative; }
.wui-table table { width: 100%; background-color: transparent; border-collapse: collapse; border: none; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
.wui-table .wui-spin { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

.wui-table table th { background: #fafafa; position: relative; }
.wui-table table th:not(:last-child):before { position: absolute; top: 50%; right: 0; width: 1px; height: 15px; background-color: rgba(0,0,0,.06); transform: translateY(-50%); transition: background-color .3s; content: ""; }
.wui-table table th, .wui-table table td { border-bottom: 1px solid #f0f0f0; padding: 5px 15px; text-align: center; vertical-align: middle; }
.wui-table-row-selected { background-color: rgb(75 155 255); color: white; }
.wui-row > .wui-table, .wui-form-row > .wui-table, .wui-form-group > .wui-table { width: 100%; }
.wui-row-striped { background-color: #fafafa; }

.wui-table-bordered .wui-table-toolbar { border-left: 1px solid #ddd; border-top: 1px solid #ddd; border-right: 1px solid #ddd; padding-left: 5px; padding-top: 5px; padding-right: 5px; }
/* .wui-table-bordered table th { background-color: #fcfcfc; } */
.wui-table-bordered table th,
.wui-table-bordered table td { border: 1px solid #ddd; }
.wui-table-bordered table { border-top: 2px solid rgb(44 132 243); }
.wui-table-bordered table th:not(:last-child)::before { display: none; }

.wui-table-dark table { background: #383838; }
.wui-table-dark table th { background: #444; }
.wui-table-dark table th, .wui-table-dark table td { border: 1px solid #666; }

/*-------------- ComboBoxInput ------------*/
.wui-combo-box-input { display: inline-block; width: 100%; }
.wui-combo-box-input select { position: absolute; width: 90px; border-radius: 4px 0 0 4px; border: 1px solid rgba(0, 0, 0, 0); border-right: 1px solid #ccc; margin: 1px 0 1px 1px; height: 28px; padding-left: 8px; }
.wui-combo-box-input select:focus { outline: 0; }
.wui-combo-box-input select:focus + input { outline: 0; border-color: #66afe9; }
.wui-combo-box-input input { padding-left: 98px; }

/*-------------- ListBox ------------*/
.wui-list-box {
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    min-height: 30px;
    border-radius: 2px;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.wui-list-box:focus { outline: 0; border-color: #66afe9; }
.wui-list-box-item { min-height: 15px; margin-bottom: 5px; box-sizing: border-box; }
.wui-list-box-item:last-child { margin-bottom: 0px; }
.wui-list-box-item-selected { background-color: #f7f7f7; }

/*-------------- TabControl ------------*/
.wui-tab { }
.wui-tab-head { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; box-sizing: content-box; border-bottom: 1px solid #ccc; }
.wui-tab-head-item { position: relative; border: 1px solid #ccc; margin: 0px 2px -1px 0; padding: 0 20px; height: 23px; background: #f8f8f8; border-top-left-radius: 2px; border-top-right-radius: 2px; }
.wui-tab-head-item-active { background: #fff; border-bottom: 1px solid transparent; }
.wui-tab-head-item-title { line-height: 23px; }
.wui-tab-head-item-remove-button {
    width: 6px;
    height: 6px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAIFJREFUKFOl0aEKwmAUxfHfnkCwWgZ2WVKwrRncSy6ZByKYli2+gdG8vqA4NhwfQ/nYyfec/7n3JiKVRM6bbXghR92TD7jwDQ4JGe7Yo8UVy3HtqUqD6YF1uOOUYYcTUqzw/EUoUPWdF2hwxHkwhYQbtqPEDUp8anaafda/f4wmvAGhGQ8NOokWfAAAAABJRU5ErkJggg==);
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 2px;
    right: 2px;
    display: none;
    user-select: none;
}
.wui-tab-head-item:hover > .wui-tab-head-item-remove-button { display: block; opacity: 0.4; }
.wui-tab-head-item:hover > .wui-tab-head-item-remove-button:hover { opacity: 0.7; }
.wui-tab-head-item:hover > .wui-tab-head-item-remove-button:active { opacity: 1; }
.wui-tab-head-create-button { width: 20px; height: 23px; margin: 0px 2px -1px 0; border: 1px solid #ccc; display: flex; align-items: center; border-top-left-radius: 2px; border-top-right-radius: 2px; background: #fff; }
.wui-tab-head-create-button:hover { background: #fafafa; }
.wui-tab-head-create-button:active { background: #f6f6f6; }
.wui-tab-head-create-button-icon {
    width: 16px;
    height: 16px;
    flex: 1;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAGxJREFUOE9jZKAyYKSyeQzDx8B6BgYGbQYGhjBCQUSsl0EGOjAwMDiOGogRAtjCEBRe2AAoDA9gkWhEFsNm4CoGBgZRQoGPJB/KwMDwBsYfjWWcITf4EzbI6YIMDAzvCcU+sbFMyBy4/OA3EABwpQ8Vl12F8gAAAABJRU5ErkJggg==);
    background-repeat: no-repeat;
    background-position: center;
    user-select: none;
}
.wui-tab-body { padding: 6px 8px; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; }

/*-------------- TreeView ------------*/
.wui-tree-view { }
.wui-tree-root { margin: 0; padding: 0; }
.wui-tree-item { list-style-type: none; }
.wui-tree-item-line { display: flex; }
.wui-tree-item-switch { display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; transition: transform 0.3s; }
.wui-tree-item-switch-close { transform: rotate(-90deg); }
.wui-tree-item-header { line-height: 24px; padding: 0 4px; border-radius: 2px; cursor: default; }
.wui-tree-item-selected { background-color: #efefef; color: #4093ff; }
.wui-tree-children { padding-left: 20px; }

/*-------------- Message ------------*/
.wui-message-view { position: fixed; left: 1rem; right: 1rem; top: 20px; z-index: 1060; pointer-events: none; }
.wui-message-view .alert { 
    display: block; 
    min-width: 160px; 
    max-width: 480px; 
    white-space: normal; 
    opacity: 0; 
    top: -20px; 
    bottom: unset; 
    margin: 1rem auto 0 auto; 
    transition: opacity .3s linear, top .3s linear, bottom .3s linear; 
    pointer-events: auto;
}
.wui-message-view .alert.show { opacity: 1; bottom: unset; top: 20px; }
.wui-message-view.is-bottom .alert { top: unset; bottom: -20px; }
.wui-message-view.is-bottom .alert.show { top: unset; bottom: 20px; }

.alert { position: relative; padding: .75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: .25rem; }
.alert:last-child { margin-bottom: 0; }
.alert i { margin-right: 0.5rem; }

.alert-primary { color: #004085; background-color: #cce5ff; border-color: #b8daff; }
.alert-success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }
.alert-info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; }
.alert-danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }
.alert-warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba; }
.alert-secondary { color: #383d41; background-color: #e2e3e5; border-color: #d6d8db; }

.alert.is-bar { background-color: #fff; }
.alert.is-bar.alert-primary { border-left: 5px solid #007bff; }
.alert.is-bar.alert-success { border-left: 5px solid #28a745; }
.alert.is-bar.alert-info { border-left: 5px solid #50bfff; }
.alert.is-bar.alert-danger { border-left: 5px solid #dc3545; }
.alert.is-bar.alert-warning { border-left: 5px solid #ffc107; }
.alert.is-bar.alert-secondary { border-left: 5px solid #272d33; }

/*-------------- Paging ------------*/
.wui-paging-container { user-select: none; }
.wui-paging-button-container { display: inline-block; }
.wui-paging-button { text-decoration: none; padding: 5px 12px; color: black; cursor: default; display: inline-block; }
.wui-paging-button-default:hover { background: #fbfbfb; }
.wui-paging-button-default:active { background: #f3f3f3; }
.wui-paging-button-head { border-left: 1px solid #ccc; }
.wui-paging-button-head, .wui-paging-button-prev, .wui-paging-button-value, .wui-paging-button-next, .wui-paging-button-tail { border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.wui-paging-button-prev, .wui-paging-button-value, .wui-paging-button-next, .wui-paging-button-tail { border-left: 1px solid rgba(0, 0, 0, 0); }
.wui-paging-button-select { background-color: #4a9bff; border: 1px solid #4a9bff; color: #ffffff; }

/*-------------- GridSystem ------------*/
.wui-container { width: 100%; }
.wui-row { display: flex; }
.wui-justify-content-start { -ms-flex-pack: start!important; justify-content: flex-start!important; }
.wui-justify-content-center { -ms-flex-pack: center!important; justify-content: center!important; }
.wui-justify-content-end { -ms-flex-pack: end!important; justify-content: flex-end!important; }
.wui-justify-content-around { -ms-flex-pack: distribute!important; justify-content: space-around!important; }
.wui-justify-content-between { -ms-flex-pack: justify!important; justify-content: space-between!important; }
.wui-col-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; }
.wui-col-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
.wui-col-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
.wui-col-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
.wui-col-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; }
.wui-col-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
.wui-col-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; }
.wui-col-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; }
.wui-col-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
.wui-col-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; }
.wui-col-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; }
.wui-col-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
.wui-form-row { display: flex; margin-bottom: 5px; }
.wui-form-row label { font-size: 14px; color: gray; float: right; line-height: 30px; margin-right: 15px; }
.wui-form-group { margin-bottom: 15px; }
.wui-form-group:last-child { margin-bottom: 0px; }
.wui-form-group label { font-size: 14px; color: gray; display: inline-block; margin-bottom: 5px; user-select: none; }

/*-------------- Sidebar ------------*/
.wui-sidebar { display: none; position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow:hidden; z-index: 1000; }
.wui-sidebar-masking { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background: rgba(0, 0, 0, 0.1); }
.wui-sidebar-model { position: fixed; flex-direction: column; display: flex; }
.wui-sidebar-model-title { font-size: 16px; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; margin-left: 20px; margin-top: 15px; }
.wui-sidebar-model-close { width: 14px; height: 14px; float: right; margin-top: 16px; margin-right: 16px; transition: all 300ms ease; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAOUlEQVQYlWNgYGD4D8TGDLiBMVQNgzErOwcuxRhy2BTjNABZAp8tCMWEFBGtkCirifIM0cFDVIADAOrvG43QTSHZAAAAAElFTkSuQmCC"); background-position: center center; background-color: transparent; background-repeat: no-repeat; background-size:100% 100%; }
.wui-sidebar-model-close:hover { opacity: 0.8; }
.wui-sidebar-model-head { height: 48px; border-bottom: 1px solid #ebecec; align-items: center; }
.wui-sidebar-model-body { padding: 20px; flex: 1; }

/*-------------- Spin ------------*/
@keyframes wui-ant-rotate {
    to { transform: rotate(405deg); }
}
@keyframes wui-ant-spin-move {
    to { opacity: 1 }
}

.wui-spin { position: static; display: inline-block; opacity: 1; }
.wui-spin-dot { position: relative; display: inline-block; width: 1em; height: 1em; font-size: 20px; transform: rotate(45deg); animation: wui-ant-rotate 1.2s infinite linear; }
.wui-spin-dot-item { position: absolute; display: block; width: 9px; height: 9px; background-color: #1890ff; border-radius: 100%; transform: scale(.75); transform-origin: 50% 50%; opacity: .3; animation: wui-ant-spin-move 1s infinite linear alternate; }
.wui-spin-dot-item:nth-child(1) { top: 0; left: 0; }
.wui-spin-dot-item:nth-child(2) { top: 0; right: 0; animation-delay: .4s; }
.wui-spin-dot-item:nth-child(3) { right: 0; bottom: 0; animation-delay: .8s; }
.wui-spin-dot-item:nth-child(4) { bottom: 0; left: 0; animation-delay: 1.2s; }
.wui-spin-small .wui-spin-dot { font-size: 14px; }
.wui-spin-small .wui-spin-dot-item { width: 6px; height: 6px; }
.wui-spin-large .wui-spin-dot { font-size: 32px; }
.wui-spin-large .wui-spin-dot-item { width: 14px; height: 14px; }

/*-------------- Modal ------------*/
.wui-modal {
    position: fixed;
    top: 35px;
    left: 0;
    right: 0;
    z-index: 1050;
    overflow: auto;
    width: 560px;
    margin: auto;
    background-color: #ffffff;
    border: 1px solid #ddd;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    display: none;
    opacity: 0;
}
.wui-modal-header { border-bottom: 1px solid #eee; line-height: 40px; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
.wui-modal-header span { margin-left: 15px; font-size: 15px; font-weight: bold; }
.wui-modal-header>a { cursor: default; }
.wui-modal-header>a:hover { color: #c22; opacity: 0.8; }
.wui-min, .wui-max, .wui-close {
    display: block;
    color: #888;
    background-position: center center;
    background-color: transparent;
    background-repeat: no-repeat;
    height: 31px;
    width: 40px;
    line-height: 31px;
    -webkit-transition: background 0.2s;
    -moz-transition: background 0.2s;
    -o-transition: background 0.2s;
    transition: background 0.2s;
    font-family: FontAwesome;
    position: absolute;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    border-top: none;
    top: 0px;
    box-sizing: content-box;
    border-collapse: collapse;
}
.wui-close {
    right: 0px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAOUlEQVQYlWNgYGD4D8TGDLiBMVQNgzErOwcuxRhy2BTjNABZAp8tCMWEFBGtkCirifIM0cFDVIADAOrvG43QTSHZAAAAAElFTkSuQmCC");
}
.wui-close:hover {
    background-color: #e81123;
    color: #fff;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAOklEQVQYV2P4/+//+f/fv6cw4AAgOZAaCAMEsCjGkMOmGKcByBL4bEFVjE8R0QqJspoozxAdPMQGOABXELkNcbMs5wAAAABJRU5ErkJggg==");
}
.wui-min:hover, .wui-min:active, .wui-max:hover, .wui-max:active {
    color: #333;
    background-color: #ddd;
}
.wui-modal-body { overflow-y: auto; padding: 15px 20px; }
.wui-modal-footer {
    padding: 10px 20px;
    margin-bottom: 0;
    text-align: right;
    border-top: 1px solid #ddd;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
    -webkit-box-shadow: inset 0 1px 0 #ffffff;
    -moz-box-shadow: inset 0 1px 0 #ffffff;
    box-shadow: inset 0 1px 0 #ffffff;
}

/*-------------- Divider ------------*/
.wui-divider { display: inline-block; box-sizing: border-box; }
.wui-divider-horizontal { border-top: 1px solid rgba(0,0,0,.06); margin: 24px 0; width: 100%; }
.wui-divider-vertical { border-left: 1px solid rgba(0,0,0,.06); margin: 0 8px; height: 0.9em; }

/*-------------- Utility ------------*/
.wui-container-fluid { padding-bottom: 20px; }
.wui-not-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.wui-fieldset { border: 1px solid #ddd; padding: 30px 15px; position: relative; }
.wui-legend { margin-top: -1.2em; font-size: 14px; position: absolute; top: .5em; background: white; padding: 0 10px; margin-left: -10px; }
.wui-pt5 { padding-top: 5px !important; }
.wui-pt10 { padding-top: 10px !important; }
.wui-pt15 { padding-top: 15px !important; }
.wui-pt20 { padding-top: 20px !important; }
.wui-pb5 { padding-bottom: 5px !important; }
.wui-pb10 { padding-bottom: 10px !important; }
.wui-pb15 { padding-bottom: 15px !important; }
.wui-pb20 { padding-bottom: 20px !important; }
.wui-mt5 { margin-top: 5px !important; }
.wui-mt10 { margin-top: 10px !important; }
.wui-mt15 { margin-top: 15px !important; }
.wui-mt20 { margin-top: 20px !important; }
.wui-mb5 { margin-bottom: 5px !important; }
.wui-mb10 { margin-bottom: 10px !important; }
.wui-mb15 { margin-bottom: 15px !important; }
.wui-mb20 { margin-bottom: 20px !important; }
.wui-horizontal { display: flex; margin-bottom: 5px; }
.wui-spacing { margin-right: 5px; }
.wui-spacing:last-child { margin-right: 0; }

@media screen and (max-width: 979px) {
    .wui-modal-body {
        max-height: 490px;
    }
}

@media screen and (min-width: 980px) {
    .wui-modal-body {
        max-height: 650px;
    }
}