Add project files.

SysApp/wwwroot/css/atg-lib/atg-upload.css

@@ -0,0 +1,498 @@
+.u-overlay{
+    position:absolute;
+    width: 100vw;
+    height: 100vh;
+    left: 0;
+    top: 0;
+    z-index: 10000;
+   background: rgba(0,0,0, .2);
+}
+
+.u-scroll {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+}
+
+
+@media (min-width: 768px){
+    .nav-tupload .item .name {
+        display:block!important
+    }
+}
+
+@media (min-width: 996px){
+    .breadcrumb {
+        width: 60% !important
+    }
+}
+
+@media (min-height: 800px) {
+    .u-container {
+        height: 100vh!important
+    }
+
+    .u-wrapper {
+        margin: 0 !important;
+        height: 80vh !important
+    }
+}
+
+.u-container {
+    width: 100%;
+    height: 100%;
+}
+
+.u-n-wrapper {
+    box-shadow: 0 0 10px 0 rgb(0 0 0 / 15%);
+    width: 100%;
+    height: 800px;
+    overflow: hidden;
+    border-radius: 5px
+}
+
+.u-wrapper {
+    border-radius: 5px;
+    overflow:hidden;
+    height: 800px;
+    width: 80vw;
+    margin: 150px 0;
+    background-color: #fff;
+    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
+    transition: all 0.35s ease-in-out
+}
+
+.container-tupload {
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #edebe9;
+}
+
+.nav-tupload .item{
+    padding: 12px 10px;
+    transition: all .3s ease-in-out
+}
+
+.nav-tupload .item span{
+    color: #333;
+    line-height: 22px;
+}
+    .nav-tupload .item .name {
+        display: none
+    }
+.nav-tupload .item .atg{
+    color: #154ab9
+}
+    .nav-tupload .item .atg:last-child {
+        color: #232323 !important
+    }
+
+.nav-tupload .item:hover{
+    background-color: rgb(243, 242, 241)
+}
+[data-dropdown] .sub-item {
+    border-radius: 5px;
+    overflow: hidden;
+    position: fixed;
+    background: #fff;
+    width: 180px;
+    z-index: 10001;
+    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
+    height: 0;
+    transition: height 0.3s ease-out
+}
+
+    [data-dropdown] .sub-item.show {
+        height: auto;
+    }
+[data-dropdown].active > .dropdown {
+    background: rgb(222 222 222)
+}
+[data-dropdown] .sub-item .item {
+    transition: .3s all ease-in-out;
+    padding: 10px 15px;
+    color: #333
+}
+
+    [data-dropdown] .sub-item .item:hover {
+        background-color: rgb(243, 242, 241)
+    }
+
+.bt-close {
+    padding: 12px 25px;
+    background: #7367f0;
+    color: #fff;
+    transition: .3s all ease-in-out
+}
+
+    .bt-close:hover {
+        background: #8d1a1e
+    }
+
+.u-c-file{
+    height: calc(100% - 54px);
+    width: 100%;
+    overflow-x: hidden;
+}
+
+.u-row{
+    width: 100%;
+    padding: 25px 25px 0 25px;
+}
+
+.breadcrumb{
+    width: 80%
+}
+
+.breadcrumb .dropdown,
+.breadcrumb .item,
+.breadcrumb .sep {
+    flex: 0 0 auto;
+    padding: 5px 8px;
+    color: #333;
+    transition: .3s all ease-in-out;
+    white-space: nowrap;
+}
+
+    .breadcrumb .item.ellipsis {   
+        max-width: 160px;
+    }
+
+    .breadcrumb .item:hover {
+        background: #f3f2f1;
+    }
+
+
+
+.breadcrumb > .item:last-child{
+    font-weight: 600;
+    cursor: default !important;
+    background: #fff !important;
+    text-overflow: inherit !important;
+    max-width: max-content !important;
+    overflow: visible !important
+}
+
+.breadcrumb > .citem[data-dropdown] > .sub-item{
+    top: 28px;
+    min-width: 160px !important
+}
+    .breadcrumb > .citem[data-dropdown] > .sub-item > .item {
+        padding:10px;
+        font-size: .8rem
+    }
+
+.modal {
+    visibility: hidden;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 0;
+    overflow: auto;
+    opacity: 1;
+    background-color: rgba(0,0,0,0.2);
+    transition: all 0.25s ease-in-out
+}
+    .modal.show {
+        visibility: visible;
+        opacity: 1;
+        height: 100%;
+    }
+
+.modal-content {
+    border-radius: 5px;
+    overflow: hidden;
+    visibility: hidden;
+    height: 0;
+    margin: 0 auto;
+    padding: 25px;
+    background: #fff;
+    border: 1px solid #edebe9;
+    width: 80%;
+    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
+    transition: height 0.3s ease-in-out
+}
+
+
+.modal-content.show{
+    visibility: visible;
+    height: auto
+}
+
+.grid-folder > .grid-sizer,
+.grid-folder > .grid-item,
+.grid-file > .grid-sizer,
+.grid-file > .grid-item{
+    width: 100%;
+}
+
+.grid-folder > .grid-item {
+    padding: 15px 5px
+}
+.grid-file > .grid-item {
+    padding: 6px
+}
+
+@media (min-width:300px) {
+    .grid-folder > .grid-sizer,
+    .grid-folder > .grid-item,
+    .grid-file > .grid-sizer,
+    .grid-file > .grid-item {
+        width: 50% !important;
+    }
+}
+
+@media (min-width:600px) {
+    .grid-folder > .grid-sizer,
+    .grid-folder > .grid-item,
+    .grid-file > .grid-sizer,
+    .grid-file > .grid-item {
+        width: 33.33% !important;
+    }
+}
+
+@media (min-width:992px) {
+    .grid-folder > .grid-sizer,
+    .grid-folder > .grid-item,
+    .grid-file > .grid-sizer,
+    .grid-file > .grid-item {
+        width: 25% !important;
+    }
+}
+
+@media (min-width: 1400px){
+    .grid-folder > .grid-sizer,
+    .grid-folder > .grid-item,
+    .grid-file > .grid-sizer,
+    .grid-file > .grid-item {
+        width: 16.66% !important;
+    }
+}
+@media (min-width: 1920px) {
+    .grid-folder > .grid-sizer,
+    .grid-folder > .grid-item,
+    .grid-file > .grid-sizer,
+    .grid-file > .grid-item {
+        width: 12.56% !important;
+    }
+}
+
+.conFile {
+    position: relative;
+    padding: 4px;
+    background: #fff;
+    border-radius: 5px;
+    -webkit-box-shadow: 0 1px 3px 1px rgb(1 1 0 / 5%);
+    box-shadow: 0 1px 3px 1px rgb(1 1 0 / 5%);
+    transition: all .3s ease-in-out;
+    cursor:pointer
+}
+
+.conFile:hover{
+    border: solid 1px rgba(0,0,0, .15)
+}
+
+.imagePreview {
+    overflow: hidden;
+    transition: all .3s ease-in-out;
+    border-radius: 5px
+}
+
+.conFile img, .imagePreview {
+    width: 100%
+}
+
+.conFolder{
+    padding-top: 15px;
+    transition: background .3s ease-in-out
+}
+
+    .conFolder:hover {
+        background: #F3F2F1
+    }
+
+        .conFolder:hover .btCon, .btCon:hover, .conFolder.active .btCon {
+            display: flex
+        }
+
+    .conFolder.active {
+        background: #EDEBE9;
+    }
+
+.conFolder.active .btSelect{
+    background:#7367f0;
+    border: 1px solid #fff;
+}
+.btCon:hover .atg {
+    display:block;
+    color: #333
+}
+
+.conFolder.active .atg{
+    display: block;
+    color: #fff
+}
+
+.folder-front {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    z-index: 2;
+}
+
+.have-file {
+    box-shadow: 0 1px 3px 2px rgb(1 1 0 / 20%);
+    position: absolute;
+    top: 12%;
+    left: 5%;
+    right: 5%;
+    bottom: 10%;
+    background-color: white;
+    z-index: 1;
+}
+
+
+.btCon {
+    display: none;
+    position: absolute;
+    width: 35px;
+    height: 35px;
+    right: 0;
+    top: 0;
+    z-index:2;
+}
+
+.btSelect{
+    border: #333 1px solid;
+    width: 18px;
+    height: 18px;
+    background: #fff;
+    border-radius: 50%;
+}
+
+.btSelect .atg{
+    display: none;
+    font-size: 9px
+}
+
+.folder {
+    width: 100%;
+    padding: 10% 15% 0 15%;
+    cursor:default
+}
+.conImg, .conImg img{
+    width: 100%
+}
+
+.conImg, .folderName{
+    cursor: pointer
+}
+
+.numF{
+    color:#eeeeee;
+    font-size: .8rem;
+    position:absolute;
+    bottom: 8%;
+    left: 8%;
+    z-index: 4
+}
+
+.folderName {
+    margin-top: 20px;
+    margin-bottom: 10%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    max-width: 95%;
+    text-align: center;
+    font-size: .8rem
+}
+
+.con-slide-upload {
+    position: absolute;
+    background: #fff;
+    right: -350px;
+    top: 0;
+    bottom: 0;
+    width: 300px;
+    z-index: 15;
+    max-width: 100%;
+    box-shadow: 0 0 10px 0 rgb(0 0 0 / 15%);
+    transition: right .3s ease-in-out;
+}
+
+.con-slide-upload.show{
+    right: 0px;
+}
+
+.slide-upload{
+    padding-bottom: 25px
+}
+
+.c-slide-header {
+    margin: 24px 20px
+}
+
+.slide-upload .sl-close {
+    color: #201f1e;
+    font-size: 1rem;
+    cursor: pointer;
+    padding: 5px 10px;
+    transition: all .3s ease-in-out
+}
+
+        .slide-upload .sl-close:hover {
+            background-color: #edebe9
+        }
+
+.slide-upload .header{
+    margin: 34px 20px 20px
+}
+
+.scroll-slide-upload{
+    width: 100%;
+    height: calc(100% - 139px);
+    overflow: hidden;
+}
+.scroll-slide-upload .scroll-content{
+    padding: 0 20px
+}
+.scroll-slide-upload .item:not(:first-child){
+    margin-top: 20px
+}
+
+.text-infor {
+    font-size: .75rem;
+    color: #17a2b8
+}
+
+.text-infor.ellipsis{
+    max-width: 170px
+}
+
+    .c-text .atg {
+        font-size: 1rem;
+        color: #919899
+    }
+
+.c-progress {
+    height: 2px;
+    position: relative;
+    background-color: #f4f4f4;
+}
+
+    .c-progress .value {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        transition: width 200ms cubic-bezier(.1,.9,.2,1);
+        transition: background-color .35s ease-in;
+        left: 0;
+        background-color: #0078d4;
+    }
+
+.upl-des {
+    font-size: .72rem;
+    color: #919899
+}

SysApp/wwwroot/css/atg-lib/datepicker.css

@@ -0,0 +1,778 @@
+.air-datepicker-cell.-year-.-other-decade-, .air-datepicker-cell.-day-.-other-month- {
+    color: var(--adp-color-other-month)
+}
+
+    .air-datepicker-cell.-year-.-other-decade-:hover, .air-datepicker-cell.-day-.-other-month-:hover {
+        color: var(--adp-color-other-month-hover)
+    }
+
+.-disabled-.-focus-.air-datepicker-cell.-year-.-other-decade-, .-disabled-.-focus-.air-datepicker-cell.-day-.-other-month- {
+    color: var(--adp-color-other-month)
+}
+
+.-selected-.air-datepicker-cell.-year-.-other-decade-, .-selected-.air-datepicker-cell.-day-.-other-month- {
+    color: #fff;
+    background: var(--adp-background-color-selected-other-month)
+}
+
+.-selected-.-focus-.air-datepicker-cell.-year-.-other-decade-, .-selected-.-focus-.air-datepicker-cell.-day-.-other-month- {
+    background: var(--adp-background-color-selected-other-month-focused)
+}
+
+.-in-range-.air-datepicker-cell.-year-.-other-decade-, .-in-range-.air-datepicker-cell.-day-.-other-month- {
+    background-color: var(--adp-background-color-in-range);
+    color: var(--adp-color)
+}
+
+.-in-range-.-focus-.air-datepicker-cell.-year-.-other-decade-, .-in-range-.-focus-.air-datepicker-cell.-day-.-other-month- {
+    background-color: var(--adp-background-color-in-range-focused)
+}
+
+.air-datepicker-cell.-year-.-other-decade-:empty, .air-datepicker-cell.-day-.-other-month-:empty {
+    background: none;
+    border: none
+}
+
+.air-datepicker-cell {
+    border-radius: var(--adp-cell-border-radius);
+    box-sizing: border-box;
+    cursor: pointer;
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    z-index: 1
+}
+
+    .air-datepicker-cell.-focus- {
+        background: var(--adp-cell-background-color-hover)
+    }
+
+    .air-datepicker-cell.-current- {
+        color: var(--adp-color-current-date)
+    }
+
+        .air-datepicker-cell.-current-.-focus- {
+            color: var(--adp-color)
+        }
+
+        .air-datepicker-cell.-current-.-in-range- {
+            color: var(--adp-color-current-date)
+        }
+
+    .air-datepicker-cell.-disabled- {
+        cursor: default;
+        color: var(--adp-color-disabled)
+    }
+
+        .air-datepicker-cell.-disabled-.-focus- {
+            color: var(--adp-color-disabled)
+        }
+
+        .air-datepicker-cell.-disabled-.-in-range- {
+            color: var(--adp-color-disabled-in-range)
+        }
+
+        .air-datepicker-cell.-disabled-.-current-.-focus- {
+            color: var(--adp-color-disabled)
+        }
+
+    .air-datepicker-cell.-in-range- {
+        background: var(--adp-cell-background-color-in-range);
+        border-radius: 0
+    }
+
+        .air-datepicker-cell.-in-range-:hover {
+            background: var(--adp-cell-background-color-in-range-hover)
+        }
+
+    .air-datepicker-cell.-range-from- {
+        border: 1px solid var(--adp-cell-border-color-in-range);
+        background-color: var(--adp-cell-background-color-in-range);
+        border-radius: var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius)
+    }
+
+    .air-datepicker-cell.-range-to- {
+        border: 1px solid var(--adp-cell-border-color-in-range);
+        background-color: var(--adp-cell-background-color-in-range);
+        border-radius: 0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0
+    }
+
+        .air-datepicker-cell.-range-to-.-range-from- {
+            border-radius: var(--adp-cell-border-radius)
+        }
+
+    .air-datepicker-cell.-selected- {
+        color: #fff;
+        border: none;
+        background: var(--adp-cell-background-color-selected)
+    }
+
+        .air-datepicker-cell.-selected-.-current- {
+            color: #fff;
+            background: var(--adp-cell-background-color-selected)
+        }
+
+        .air-datepicker-cell.-selected-.-focus- {
+            background: var(--adp-cell-background-color-selected-hover)
+        }
+
+.air-datepicker-body {
+    transition: all var(--adp-transition-duration) var(--adp-transition-ease)
+}
+
+    .air-datepicker-body.-hidden- {
+        display: none
+    }
+
+.air-datepicker-body--day-names {
+    display: grid;
+    grid-template-columns: repeat(7, var(--adp-day-cell-width));
+    margin: 8px 0 3px
+}
+
+.air-datepicker-body--day-name {
+    color: var(--adp-day-name-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    text-align: center;
+    text-transform: uppercase;
+    font-size: .8em
+}
+
+    .air-datepicker-body--day-name.-clickable- {
+        cursor: pointer
+    }
+
+        .air-datepicker-body--day-name.-clickable-:hover {
+            color: var(--adp-day-name-color-hover)
+        }
+
+.air-datepicker-body--cells {
+    display: grid
+}
+
+    .air-datepicker-body--cells.-days- {
+        grid-template-columns: repeat(7, var(--adp-day-cell-width));
+        grid-auto-rows: var(--adp-day-cell-height)
+    }
+
+    .air-datepicker-body--cells.-months- {
+        grid-template-columns: repeat(3, 1fr);
+        grid-auto-rows: var(--adp-month-cell-height)
+    }
+
+    .air-datepicker-body--cells.-years- {
+        grid-template-columns: repeat(4, 1fr);
+        grid-auto-rows: var(--adp-year-cell-height)
+    }
+
+.air-datepicker-nav {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--adp-border-color-inner);
+    min-height: var(--adp-nav-height);
+    padding: var(--adp-padding);
+    box-sizing: content-box
+}
+
+.-only-timepicker- .air-datepicker-nav {
+    display: none
+}
+
+.air-datepicker-nav--title, .air-datepicker-nav--action {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center
+}
+
+.air-datepicker-nav--action {
+    width: var(--adp-nav-action-size);
+    border-radius: var(--adp-border-radius);
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none
+}
+
+    .air-datepicker-nav--action:hover {
+        background: var(--adp-background-color-hover)
+    }
+
+    .air-datepicker-nav--action:active {
+        background: var(--adp-background-color-active)
+    }
+
+    .air-datepicker-nav--action.-disabled- {
+        visibility: hidden
+    }
+
+    .air-datepicker-nav--action svg {
+        width: 32px;
+        height: 32px
+    }
+
+    .air-datepicker-nav--action path {
+        fill: none;
+        stroke: var(--adp-nav-arrow-color);
+        stroke-width: 2px
+    }
+
+.air-datepicker-nav--title {
+    border-radius: var(--adp-border-radius);
+    padding: 0 8px
+}
+
+    .air-datepicker-nav--title i {
+        font-style: normal;
+        color: var(--adp-nav-color-secondary);
+        margin-left: .3em
+    }
+
+    .air-datepicker-nav--title:hover {
+        background: var(--adp-background-color-hover)
+    }
+
+    .air-datepicker-nav--title:active {
+        background: var(--adp-background-color-active)
+    }
+
+    .air-datepicker-nav--title.-disabled- {
+        cursor: default;
+        background: none
+    }
+
+.air-datepicker-buttons {
+    display: grid;
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column
+}
+
+.air-datepicker-button {
+    display: inline-flex;
+    color: var(--adp-btn-color);
+    border-radius: var(--adp-btn-border-radius);
+    cursor: pointer;
+    height: var(--adp-btn-height);
+    border: none;
+    background: rgba(255,255,255,0)
+}
+
+    .air-datepicker-button:hover {
+        color: var(--adp-btn-color-hover);
+        background: var(--adp-btn-background-color-hover)
+    }
+
+    .air-datepicker-button:focus {
+        color: var(--adp-btn-color-hover);
+        background: var(--adp-btn-background-color-hover);
+        outline: none
+    }
+
+    .air-datepicker-button:active {
+        background: var(--adp-btn-background-color-active)
+    }
+
+    .air-datepicker-button span {
+        outline: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%
+    }
+
+.air-datepicker-time {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    grid-column-gap: 12px;
+    align-items: center;
+    position: relative;
+    padding: 0 var(--adp-time-padding-inner)
+}
+
+.-only-timepicker- .air-datepicker-time {
+    border-top: none
+}
+
+.air-datepicker-time--current {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    font-size: 14px;
+    text-align: center
+}
+
+.air-datepicker-time--current-colon {
+    margin: 0 2px 3px;
+    line-height: 1
+}
+
+.air-datepicker-time--current-hours, .air-datepicker-time--current-minutes {
+    line-height: 1;
+    font-size: 19px;
+    font-family: "Century Gothic",CenturyGothic,AppleGothic,sans-serif;
+    position: relative;
+    z-index: 1
+}
+
+    .air-datepicker-time--current-hours:after, .air-datepicker-time--current-minutes:after {
+        content: "";
+        background: var(--adp-background-color-hover);
+        border-radius: var(--adp-border-radius);
+        position: absolute;
+        left: -2px;
+        top: -3px;
+        right: -2px;
+        bottom: -2px;
+        z-index: -1;
+        opacity: 0
+    }
+
+    .air-datepicker-time--current-hours.-focus-:after, .air-datepicker-time--current-minutes.-focus-:after {
+        opacity: 1
+    }
+
+.air-datepicker-time--current-ampm {
+    text-transform: uppercase;
+    align-self: flex-end;
+    color: var(--adp-time-day-period-color);
+    margin-left: 6px;
+    font-size: 11px;
+    margin-bottom: 1px
+}
+
+.air-datepicker-time--row {
+    display: flex;
+    align-items: center;
+    font-size: 11px;
+    height: 17px;
+    background: linear-gradient(to right, var(--adp-time-track-color), var(--adp-time-track-color)) left 50%/100% var(--adp-time-track-height) no-repeat
+}
+
+    .air-datepicker-time--row:first-child {
+        margin-bottom: 4px
+    }
+
+    .air-datepicker-time--row input[type=range] {
+        background: none;
+        cursor: pointer;
+        flex: 1;
+        height: 100%;
+        width: 100%;
+        padding: 0;
+        margin: 0;
+        -webkit-appearance: none
+    }
+
+        .air-datepicker-time--row input[type=range]::-webkit-slider-thumb {
+            -webkit-appearance: none
+        }
+
+        .air-datepicker-time--row input[type=range]::-ms-tooltip {
+            display: none
+        }
+
+        .air-datepicker-time--row input[type=range]:hover::-webkit-slider-thumb {
+            border-color: var(--adp-time-track-color-hover)
+        }
+
+        .air-datepicker-time--row input[type=range]:hover::-moz-range-thumb {
+            border-color: var(--adp-time-track-color-hover)
+        }
+
+        .air-datepicker-time--row input[type=range]:hover::-ms-thumb {
+            border-color: var(--adp-time-track-color-hover)
+        }
+
+        .air-datepicker-time--row input[type=range]:focus {
+            outline: none
+        }
+
+            .air-datepicker-time--row input[type=range]:focus::-webkit-slider-thumb {
+                background: var(--adp-cell-background-color-selected);
+                border-color: var(--adp-cell-background-color-selected)
+            }
+
+            .air-datepicker-time--row input[type=range]:focus::-moz-range-thumb {
+                background: var(--adp-cell-background-color-selected);
+                border-color: var(--adp-cell-background-color-selected)
+            }
+
+            .air-datepicker-time--row input[type=range]:focus::-ms-thumb {
+                background: var(--adp-cell-background-color-selected);
+                border-color: var(--adp-cell-background-color-selected)
+            }
+
+        .air-datepicker-time--row input[type=range]::-webkit-slider-thumb {
+            box-sizing: border-box;
+            height: 12px;
+            width: 12px;
+            border-radius: 3px;
+            border: 1px solid var(--adp-time-track-color);
+            background: #fff;
+            cursor: pointer;
+            -webkit-transition: background var(--adp-transition-duration);
+            transition: background var(--adp-transition-duration)
+        }
+
+        .air-datepicker-time--row input[type=range]::-moz-range-thumb {
+            box-sizing: border-box;
+            height: 12px;
+            width: 12px;
+            border-radius: 3px;
+            border: 1px solid var(--adp-time-track-color);
+            background: #fff;
+            cursor: pointer;
+            -moz-transition: background var(--adp-transition-duration);
+            transition: background var(--adp-transition-duration)
+        }
+
+        .air-datepicker-time--row input[type=range]::-ms-thumb {
+            box-sizing: border-box;
+            height: 12px;
+            width: 12px;
+            border-radius: 3px;
+            border: 1px solid var(--adp-time-track-color);
+            background: #fff;
+            cursor: pointer;
+            -ms-transition: background var(--adp-transition-duration);
+            transition: background var(--adp-transition-duration)
+        }
+
+        .air-datepicker-time--row input[type=range]::-webkit-slider-thumb {
+            margin-top: calc(var(--adp-time-thumb-size)/2*-1)
+        }
+
+        .air-datepicker-time--row input[type=range]::-webkit-slider-runnable-track {
+            border: none;
+            height: var(--adp-time-track-height);
+            cursor: pointer;
+            color: rgba(0,0,0,0);
+            background: rgba(0,0,0,0)
+        }
+
+        .air-datepicker-time--row input[type=range]::-moz-range-track {
+            border: none;
+            height: var(--adp-time-track-height);
+            cursor: pointer;
+            color: rgba(0,0,0,0);
+            background: rgba(0,0,0,0)
+        }
+
+        .air-datepicker-time--row input[type=range]::-ms-track {
+            border: none;
+            height: var(--adp-time-track-height);
+            cursor: pointer;
+            color: rgba(0,0,0,0);
+            background: rgba(0,0,0,0)
+        }
+
+        .air-datepicker-time--row input[type=range]::-ms-fill-lower {
+            background: rgba(0,0,0,0)
+        }
+
+        .air-datepicker-time--row input[type=range]::-ms-fill-upper {
+            background: rgba(0,0,0,0)
+        }
+
+.air-datepicker {
+    --adp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    --adp-font-size: 14px;
+    --adp-width: 246px;
+    --adp-z-index: 100;
+    --adp-padding: 4px;
+    --adp-grid-areas: "nav" "body" "timepicker" "buttons";
+    --adp-transition-duration: .3s;
+    --adp-transition-ease: ease-out;
+    --adp-transition-offset: 8px;
+    --adp-background-color: #fff;
+    --adp-background-color-hover: #f0f0f0;
+    --adp-background-color-active: #eaeaea;
+    --adp-background-color-in-range: rgba(92, 196, 239, .1);
+    --adp-background-color-in-range-focused: rgba(92, 196, 239, .2);
+    --adp-background-color-selected-other-month-focused: #8ad5f4;
+    --adp-background-color-selected-other-month: #a2ddf6;
+    --adp-color: #4a4a4a;
+    --adp-color-secondary: #9c9c9c;
+    --adp-accent-color: #4eb5e6;
+    --adp-color-current-date: var(--adp-accent-color);
+    --adp-color-other-month: #dedede;
+    --adp-color-disabled: #aeaeae;
+    --adp-color-disabled-in-range: #939393;
+    --adp-color-other-month-hover: #c5c5c5;
+    --adp-border-color: #dbdbdb;
+    --adp-border-color-inner: #efefef;
+    --adp-border-radius: 4px;
+    --adp-border-color-inline: #d7d7d7;
+    --adp-nav-height: 32px;
+    --adp-nav-arrow-color: var(--adp-color-secondary);
+    --adp-nav-action-size: 32px;
+    --adp-nav-color-secondary: var(--adp-color-secondary);
+    --adp-day-name-color: #ff9a19;
+    --adp-day-name-color-hover: #8ad5f4;
+    --adp-day-cell-width: 1fr;
+    --adp-day-cell-height: 32px;
+    --adp-month-cell-height: 42px;
+    --adp-year-cell-height: 56px;
+    --adp-pointer-size: 10px;
+    --adp-poiner-border-radius: 2px;
+    --adp-pointer-offset: 14px;
+    --adp-cell-border-radius: 4px;
+    --adp-cell-background-color-hover: var(--adp-background-color-hover);
+    --adp-cell-background-color-selected: #5cc4ef;
+    --adp-cell-background-color-selected-hover: #45bced;
+    --adp-cell-background-color-in-range: rgba(92, 196, 239, 0.1);
+    --adp-cell-background-color-in-range-hover: rgba(92, 196, 239, 0.2);
+    --adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);
+    --adp-btn-height: 32px;
+    --adp-btn-color: var(--adp-accent-color);
+    --adp-btn-color-hover: var(--adp-color);
+    --adp-btn-border-radius: var(--adp-border-radius);
+    --adp-btn-background-color-hover: var(--adp-background-color-hover);
+    --adp-btn-background-color-active: var(--adp-background-color-active);
+    --adp-time-track-height: 1px;
+    --adp-time-track-color: #dedede;
+    --adp-time-track-color-hover: #b1b1b1;
+    --adp-time-thumb-size: 12px;
+    --adp-time-padding-inner: 10px;
+    --adp-time-day-period-color: var(--adp-color-secondary);
+    --adp-mobile-font-size: 16px;
+    --adp-mobile-nav-height: 40px;
+    --adp-mobile-width: 320px;
+    --adp-mobile-day-cell-height: 38px;
+    --adp-mobile-month-cell-height: 48px;
+    --adp-mobile-year-cell-height: 64px
+}
+
+.air-datepicker-overlay {
+    --adp-overlay-background-color: rgba(0, 0, 0, .3);
+    --adp-overlay-transition-duration: .3s;
+    --adp-overlay-transition-ease: ease-out;
+    --adp-overlay-z-index: 99
+}
+
+.air-datepicker {
+    background: var(--adp-background-color);
+    border: 1px solid var(--adp-border-color);
+    box-shadow: 0 4px 12px rgba(0,0,0,.15);
+    border-radius: var(--adp-border-radius);
+    box-sizing: content-box;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(4, max-content);
+    grid-template-areas: var(--adp-grid-areas);
+    font-family: var(--adp-font-family),sans-serif;
+    font-size: var(--adp-font-size);
+    color: var(--adp-color);
+    width: var(--adp-width);
+    position: absolute;
+    transition: opacity var(--adp-transition-duration) var(--adp-transition-ease),transform var(--adp-transition-duration) var(--adp-transition-ease);
+    z-index: var(--adp-z-index)
+}
+
+    .air-datepicker:not(.-custom-position-) {
+        opacity: 0
+    }
+
+    .air-datepicker.-from-top- {
+        transform: translateY(calc(var(--adp-transition-offset) * -1))
+    }
+
+    .air-datepicker.-from-right- {
+        transform: translateX(var(--adp-transition-offset))
+    }
+
+    .air-datepicker.-from-bottom- {
+        transform: translateY(var(--adp-transition-offset))
+    }
+
+    .air-datepicker.-from-left- {
+        transform: translateX(calc(var(--adp-transition-offset) * -1))
+    }
+
+    .air-datepicker.-active-:not(.-custom-position-) {
+        transform: translate(0, 0);
+        opacity: 1
+    }
+
+    .air-datepicker.-active-.-custom-position- {
+        transition: none
+    }
+
+    .air-datepicker.-inline- {
+        border-color: var(--adp-border-color-inline);
+        box-shadow: none;
+        position: static;
+        left: auto;
+        right: auto;
+        opacity: 1;
+        transform: none
+    }
+
+        .air-datepicker.-inline- .air-datepicker--pointer {
+            display: none
+        }
+
+    .air-datepicker.-is-mobile- {
+        --adp-font-size: var(--adp-mobile-font-size);
+        --adp-day-cell-height: var(--adp-mobile-day-cell-height);
+        --adp-month-cell-height: var(--adp-mobile-month-cell-height);
+        --adp-year-cell-height: var(--adp-mobile-year-cell-height);
+        --adp-nav-height: var(--adp-mobile-nav-height);
+        --adp-nav-action-size: var(--adp-mobile-nav-height);
+        position: fixed;
+        width: var(--adp-mobile-width);
+        border: none
+    }
+
+        .air-datepicker.-is-mobile- * {
+            -webkit-tap-highlight-color: rgba(0,0,0,0)
+        }
+
+        .air-datepicker.-is-mobile- .air-datepicker--pointer {
+            display: none
+        }
+
+        .air-datepicker.-is-mobile-:not(.-custom-position-) {
+            transform: translate(-50%, calc(-50% + var(--adp-transition-offset)))
+        }
+
+        .air-datepicker.-is-mobile-.-active-:not(.-custom-position-) {
+            transform: translate(-50%, -50%)
+        }
+
+    .air-datepicker.-custom-position- {
+        transition: none
+    }
+
+.air-datepicker-global-container {
+    position: absolute;
+    left: 0;
+    top: 0
+}
+
+.air-datepicker--pointer {
+    --pointer-half-size: calc(var(--adp-pointer-size) / 2);
+    position: absolute;
+    width: var(--adp-pointer-size);
+    height: var(--adp-pointer-size);
+    z-index: -1
+}
+
+    .air-datepicker--pointer:after {
+        content: "";
+        position: absolute;
+        background: #fff;
+        border-top: 1px solid var(--adp-border-color-inline);
+        border-right: 1px solid var(--adp-border-color-inline);
+        border-top-right-radius: var(--adp-poiner-border-radius);
+        width: var(--adp-pointer-size);
+        height: var(--adp-pointer-size);
+        box-sizing: border-box
+    }
+
+.-top-left- .air-datepicker--pointer, .-top-center- .air-datepicker--pointer, .-top-right- .air-datepicker--pointer, [data-popper-placement^=top] .air-datepicker--pointer {
+    top: calc(100% - var(--pointer-half-size) + 1px)
+}
+
+    .-top-left- .air-datepicker--pointer:after, .-top-center- .air-datepicker--pointer:after, .-top-right- .air-datepicker--pointer:after, [data-popper-placement^=top] .air-datepicker--pointer:after {
+        transform: rotate(135deg)
+    }
+
+.-right-top- .air-datepicker--pointer, .-right-center- .air-datepicker--pointer, .-right-bottom- .air-datepicker--pointer, [data-popper-placement^=right] .air-datepicker--pointer {
+    right: calc(100% - var(--pointer-half-size) + 1px)
+}
+
+    .-right-top- .air-datepicker--pointer:after, .-right-center- .air-datepicker--pointer:after, .-right-bottom- .air-datepicker--pointer:after, [data-popper-placement^=right] .air-datepicker--pointer:after {
+        transform: rotate(225deg)
+    }
+
+.-bottom-left- .air-datepicker--pointer, .-bottom-center- .air-datepicker--pointer, .-bottom-right- .air-datepicker--pointer, [data-popper-placement^=bottom] .air-datepicker--pointer {
+    bottom: calc(100% - var(--pointer-half-size) + 1px)
+}
+
+    .-bottom-left- .air-datepicker--pointer:after, .-bottom-center- .air-datepicker--pointer:after, .-bottom-right- .air-datepicker--pointer:after, [data-popper-placement^=bottom] .air-datepicker--pointer:after {
+        transform: rotate(315deg)
+    }
+
+.-left-top- .air-datepicker--pointer, .-left-center- .air-datepicker--pointer, .-left-bottom- .air-datepicker--pointer, [data-popper-placement^=left] .air-datepicker--pointer {
+    left: calc(100% - var(--pointer-half-size) + 1px)
+}
+
+    .-left-top- .air-datepicker--pointer:after, .-left-center- .air-datepicker--pointer:after, .-left-bottom- .air-datepicker--pointer:after, [data-popper-placement^=left] .air-datepicker--pointer:after {
+        transform: rotate(45deg)
+    }
+
+.-top-left- .air-datepicker--pointer, .-bottom-left- .air-datepicker--pointer {
+    left: var(--adp-pointer-offset)
+}
+
+.-top-right- .air-datepicker--pointer, .-bottom-right- .air-datepicker--pointer {
+    right: var(--adp-pointer-offset)
+}
+
+.-top-center- .air-datepicker--pointer, .-bottom-center- .air-datepicker--pointer {
+    left: calc(50% - var(--adp-pointer-size)/2)
+}
+
+.-left-top- .air-datepicker--pointer, .-right-top- .air-datepicker--pointer {
+    top: var(--adp-pointer-offset)
+}
+
+.-left-bottom- .air-datepicker--pointer, .-right-bottom- .air-datepicker--pointer {
+    bottom: var(--adp-pointer-offset)
+}
+
+.-left-center- .air-datepicker--pointer, .-right-center- .air-datepicker--pointer {
+    top: calc(50% - var(--adp-pointer-size)/2)
+}
+
+.air-datepicker--navigation {
+    grid-area: nav
+}
+
+.air-datepicker--content {
+    box-sizing: content-box;
+    padding: var(--adp-padding);
+    grid-area: body
+}
+
+.-only-timepicker- .air-datepicker--content {
+    display: none
+}
+
+.air-datepicker--time {
+    grid-area: timepicker
+}
+
+.air-datepicker--buttons {
+    grid-area: buttons
+}
+
+.air-datepicker--buttons, .air-datepicker--time {
+    padding: var(--adp-padding);
+    border-top: 1px solid var(--adp-border-color-inner)
+}
+
+.air-datepicker-overlay {
+    position: fixed;
+    background: var(--adp-overlay-background-color);
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    transition: opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease),left 0s,height 0s,width 0s;
+    transition-delay: 0s,var(--adp-overlay-transition-duration),var(--adp-overlay-transition-duration),var(--adp-overlay-transition-duration);
+    z-index: var(--adp-overlay-z-index)
+}
+
+    .air-datepicker-overlay.-active- {
+        opacity: 1;
+        width: 100%;
+        height: 100%;
+        transition: opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease),height 0s,width 0s
+    }

SysApp/wwwroot/css/atg-lib/waves.min.css

@@ -0,0 +1,7 @@
+/*!
+ * Waves v0.7.6
+ * http://fian.my.id/Waves 
+ * 
+ * Copyright 2014-2018 Alfiana E. Sibuea and other contributors 
+ * Released under the MIT license 
+ * https://github.com/fians/Waves/blob/master/LICENSE */.waves-effect{position:relative;cursor:pointer;display:inline-block;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.waves-effect .waves-ripple{position:absolute;border-radius:50%;width:100px;height:100px;margin-top:-50px;margin-left:-50px;opacity:0;background:rgba(0,0,0,.2);background:-webkit-radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);background:-o-radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);background:-moz-radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);background:radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;-webkit-transition-property:-webkit-transform,opacity;-moz-transition-property:-moz-transform,opacity;-o-transition-property:-o-transform,opacity;transition-property:transform,opacity;-webkit-transform:scale(0) translate(0,0);-moz-transform:scale(0) translate(0,0);-ms-transform:scale(0) translate(0,0);-o-transform:scale(0) translate(0,0);transform:scale(0) translate(0,0);pointer-events:none}.waves-effect.waves-light .waves-ripple{background:rgba(255,255,255,.4);background:-webkit-radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);background:-o-radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);background:-moz-radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);background:radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%)}.waves-effect.waves-classic .waves-ripple{background:rgba(0,0,0,.2)}.waves-effect.waves-classic.waves-light .waves-ripple{background:rgba(255,255,255,.4)}.waves-notransition{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;transition:none!important}.waves-button,.waves-circle{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(circle,#fff 100%,#000 100%)}.waves-button,.waves-button-input,.waves-button:hover,.waves-button:visited{white-space:nowrap;vertical-align:middle;cursor:pointer;border:none;outline:0;color:inherit;background-color:rgba(0,0,0,0);font-size:1em;line-height:1em;text-align:center;text-decoration:none;z-index:1}.waves-button{padding:.85em 1.1em;border-radius:.2em}.waves-button-input{margin:0;padding:.85em 1.1em}.waves-input-wrapper{border-radius:.2em;vertical-align:bottom}.waves-input-wrapper.waves-button{padding:0}.waves-input-wrapper .waves-button-input{position:relative;top:0;left:0;z-index:1}.waves-circle{text-align:center;width:2.5em;height:2.5em;line-height:2.5em;border-radius:50%}.waves-float{-webkit-mask-image:none;-webkit-box-shadow:0 1px 1.5px 1px rgba(0,0,0,.12);box-shadow:0 1px 1.5px 1px rgba(0,0,0,.12);-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s}.waves-float:active{-webkit-box-shadow:0 8px 20px 1px rgba(0,0,0,.3);box-shadow:0 8px 20px 1px rgba(0,0,0,.3)}.waves-block{display:block}