body,
html {
   margin: 0;
   padding: 0;
   background: #e5c304;
   font-family: 'Kdam Thmor Pro', sans-serif;
   background: url("../images/bg.jpg") no-repeat center center;
   background-size: cover;
}

* {
   transition: 0.2s;
   box-sizing: border-box;
}

*[title] {
   cursor: default;
}

.none {
   display: none !important;
}

.wrapper {
   padding-left: 30px;
   padding-right: 30px;
}

#login {
   width: 100%;
   height: 100%;
   display: block;
}

#login form {
   width: 500px;
   height: auto;
   border-radius: 15px;
   margin: 100px auto 0;
   display: table;
   background: #fff;
   padding: 15px 20px;
}

#login form img {
   margin: 0 auto 30px;
   display: block;
   max-height: 100px;
}

#login form p {
   color: #000;
   font-size: 18px;
   width: 100%;
   text-align: center;
   display: block;
}

#login form input {
   width: 100%;
   height: 50px;
   background: #fff;
   border: 0;
   border-radius: 10px;
   border: 1px solid #000;
   margin-bottom: 10px;
   font-size: 18px;
   padding-left: 20px;
   outline: none;
}

#login form button {
   width: 100%;
   height: 50px;
   background: #e5c304;
   border-radius: 10px;
   border: 0;
   font-size: 18px;
   color: #fff;
   cursor: pointer;
}

#login form button:hover {
   opacity: 0.8;
}

header {
   width: 100%;
   height: auto;
   display: table;
   background: #e5c304;
}

header .wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

header a.logo {
   display: table;
   text-decoration: none;
}

header a.logo,
header .center,
header .right {
   width: auto;
}

header h1 {
   font-size: 25px;
   color: #fff;
}

header .center {
   display: flex;
   justify-content: center;
   align-items: center;
}

header .center .balance {
   width: auto;
   height: auto;
   margin: 0px 20px;
}

header .center .balance .title {
   width: 100%;
   text-align: center;
   text-transform: uppercase;
   font-size: 12px;
   line-height: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
}

header .center .balance .title .butLoading {
   font-size: 20px;
   margin-left: 10px;
   cursor: pointer;
}

header .center .balance .title .butLoading:hover {
   color: #fff;
}

header .center .balance .value {
   font-size: 18px;
   font-weight: 900;
}

header .center .balance .value i {
   margin-right: 10px;
}

header .right {
   display: flex;
   justify-content: flex-end;
   align-items: center;
}

header .right .name {
   display: inline-table;
   font-size: 18px;
   color: #fff;
}

header .right .name i {
   margin-right: 10px;
}

header .right .exit {
   display: inline-table;
   margin-left: 30px;
   border: 1px solid #fff;
   border-radius: 15px;
   padding: 5px 15px;
   text-decoration: none;
   font-size: 18px;
   color: #fff;
}

header .right .exit:hover {
   background: #fff;
   color: #e5c304;
}

#filter {
   width: 100%;
   height: auto;
   display: flex;
   justify-content: center;
   align-items: center;
   background: #3D70AB;
   padding-top: 10px;
   padding-bottom: 10px;
   box-sizing: border-box;
   margin-bottom: 50px;
}

#filter .option {
   width: 100%;
   height: auto;
   box-sizing: border-box;
   margin-right: 10px;
}

#filter .option:last-child {
   margin-right: 0px;
}

#filter .option label {
   color: #fff;
   padding-right: 10px;
}

#filter .option select {
   width: 100%;
   height: 35px;
   display: inline-table;
}

#filter .option input {
   width: 100%;
   height: 35px;
   background: #fff;
   padding-left: 10px;
   display: block;
   border: 0;
   border-radius: 3px;
   outline: none;
   box-sizing: border-box;
}

#filter button {
   float: right;
   width: auto;
   display: table;
   background: #fff;
   padding: 5px 15px;
   border-radius: 10px;
   border: 0;
   font-size: 18px;
   color: #3D70AB;
   height: auto;
}

#content {
   width: 100%;
   height: auto;
   display: table;
}

#content p {
   width: 100%;
   display: table;
   text-align: center;
   color: #000;
   font-size: 18px;
}

#items {
   margin-top: 0px;
   width: 100%;
   height: auto;
}

#items .item {
   width: 100%;
   height: 100px;
   display: table;
   background: #fff;
   border-radius: 15px;
   padding: 10px 15px;
   margin-bottom: 30px;
   border: 2px solid #fff;
   cursor: default;
   box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.1);
}

#items .item:hover {
   border: 2px solid #e5c304;
}

#items .item .top {
   width: 100%;
   height: auto;
   display: flex;
   justify-content: flex-start;
   align-items: center;
}

#items .item .top .li {
   color: #000;
   font-size: 12px;
   font-weight: 100;
   margin-left: 20px;
   min-width: 280px;
}

#items .item .top .li.id {
   min-width: 100px;
}

#items .item .top .checkbox {
   margin-right: 20px;
}

#items .item .top input {
   width: 30px;
   height: 30px;
   display: block;
}

#items .item .top .color {
   width: auto;
   height: auto;
}

#items .item .top .color span {
   width: 15px;
   height: 15px;
   border-radius: 255px;
   display: block;
}

#items .item .top .color .green {
   width: 15px;
   height: 15px;
   border-radius: 255px;
   display: block;
   background: #5cc507;
}

#items .item .bottom {
   width: 100%;
   height: auto;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   flex-wrap: wrap;
   margin-top: 15px;
}

#items .item .bottom .td {
   width: 13%;
}

#items .item .bottom .img {
   position: relative;
   width: 150px;
}

#items .item .bottom .img .generate {
   width: 100%;
   height: 150px;
   padding: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #f1f1f1;
   text-align: center;
   text-transform: uppercase;
   font-weight: 900;
   font-size: 9px;
   line-height: 150%;
   color: rgba(0, 0, 0, 0.5);
}

#items .item .bottom .img .images {
   display: none;
   position: absolute;
   top: -10px;
   padding: 10px;
   background: #fff;
   box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.1);
   border-radius: 5px;
   z-index: 2;
}

#items .item .bottom .img .images .items {
   display: flex;
}

#items .item .bottom .img .images .imgItem {
   margin-right: 10px;
   position: relative;
}

#items .item .bottom .img .images .imgItem:last-child {
   /*margin-right: 0px;*/
}

#items .item .bottom .img .images .imgItem a {
   position: absolute;
   top: 0;
   width: 30px;
   height: 30px;
   background: #e5c304;
   color: #fff;
   text-decoration: none;
   font-size: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
}

#items .item .bottom .img .images .imgItem a.left {
   left: 0;
}

#items .item .bottom .img .images .imgItem a.right {
   right: 0;
}

#items .item .bottom .img .images .imgItem a:hover {
   background: #caad0c;
}

#items .item .bottom .img .images .imgItem .inputLoad {
   width: 100%;
   height: 30px;
   bottom: 0px;
   background: #e5c304;
   overflow: hidden;
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 18px;
}

#items .item .bottom .img .images .imgItem .inputLoad:hover {
   background: #caad0c;
}

#items .item .bottom .img .images .imgItem .inputLoad input {
   width: 100%;
   height: 100%;
   position: absolute;
   opacity: 0;
}

#items .item .bottom .img.active .images {
   display: flex;
}

#items .item .bottom .img.active .images .newImg {
   width: 150px;
   height: 150px;
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   color: rgba(0, 0, 0, 0.1);
   cursor: pointer;
   font-size: 20px;
   margin-right: 10px;
}

#items .item .bottom .img.active .images .newImg input {
   width: 100%;
   height: 100%;
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
}

#items .item .bottom .img .images .close {
   width: 30px;
   height: 150px;
   background: #e5c304;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   cursor: pointer;
   font-size: 18px;
}

#items .item .bottom .img .images .close:hover {
   background: #caad0c;
}

#items .item .bottom picture {
   width: 150px;
   height: 150px;
   display: block;
}

#items .item .bottom picture img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

#items .item .bottom .title {
   width: 100%;
   font-size: 16px;
   line-height: 20px;
}

#items .item .bottom .nameCol {
   color: #000;
   font-size: 12px;
   font-weight: 100;
   width: 100%;
   display: block;
   line-height: 12px;
   border-bottom: 1px solid #000;
   margin-bottom: 5px;
   padding-bottom: 2px;
}

#items .item .bottom .description {
   width: 100%;
   font-size: 16px;
   line-height: 20px;
}

#items .item .bottom .table {
   width: 100%;
}

#items .item .bottom .comment {
   width: 100%;
}

#items .item .bottom .comment textarea {
   width: 100%;
   height: 50px;
   font-size: 16px;
   padding: 5px;
   resize: none;
   outline: none;
}

#items .item .bottom .section {
   width: 100%;
   height: auto;
}

.editValue {
   min-width: 100px;
   min-height: 50px;
   border-radius: 4px;
   border: 1px solid rgba(0, 0, 0, 0.5);
   padding: 10px;
}

#items .item .bottom .section select {
   width: 100%;
   height: 45px;
   background: #fff;
   border: 1px solid rgba(0, 0, 0, 0.3);
   font-size: 14px;
   padding-left: 15px;
}

#items .item .bottom .section select.empty {
   border: 1px solid red;
}

#items .item .bottom .control {
   width: auto;
   height: auto;
   display: flex;
   align-items: center;
}

#items .item .bottom .control a {
   border-radius: 15px;
   width: auto;
   height: 40px;
   line-height: 40px;
   padding: 0px 10px;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid #e5c304;
   color: #e5c304;
   margin-left: 10px;
   text-decoration: none;
   font-weight: 900;
}

#items .item .bottom .control a:hover {
   background: #e5c304;
   color: #fff;
}

.editTextarea {
   width: 440px;
   height: 250px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: absolute;
   z-index: 2;
}

.editTextarea textarea {
   height: 100%;
   width: 90%;
   border: 0;
   outline: none;
   resize: none;
   padding: 5px;
   border-top: 1px solid rgba(0, 0, 0, 0.3);
   border-left: 1px solid rgba(0, 0, 0, 0.3);
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   font-size: 16px;
   font-family: 'Kdam Thmor Pro', sans-serif;
}

.editTextarea .button {
   background: #e5c304;
   padding: 10px;
   color: #fff;
   text-decoration: none;
   width: 12%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.editTextarea .button:hover {
   background: #caad0c;
}

.editTextarea .processing {
   position: absolute;
   top: -31px;
   background: #fff;
   text-decoration: none;
   padding: 5px 15px;
   color: #000;
   border-radius: 5px 5px 0px 0px;
   border: 1px solid #000;
   font-size: 13px;
}

.editTextarea .processing:hover {
   background: #caad0c;
   border: 1px solid #caad0c;
   color: #fff;
}

.actionForm {
   width: 33%;
   height: auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 20px;
}

.actionForm select {
   width: 70%;
   height: 45px;
   border: 1px solid rgba(0, 0, 0, 0.1);
   padding-left: 15px;
   font-size: 18px;
   color: #000;
   border-radius: 10px 0px 0px 10px;
}

.actionForm button {
   width: 30%;
   height: 45px;
   border: 0;
   color: #fff;
   font-size: 18px;
   background: #e5c304;
   border-radius: 0px 10px 10px 0px;
}

.actionForm button:hover {
   background: #caad0c;
}

.error {
   width: 100%;
   height: auto;
   background: #c57171;
   border-left: 5px solid #880d0d;
   color: #fff;
   font-size: 18px;
   padding: 10px 20px;
   font-weight: 100;
}

.navFooter {
   width: 100%;
   height: auto;
   display: table;
   margin-bottom: 50px;
}

.navFooter a {
   width: 35px;
   height: 35px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #000;
   font-size: 15px;
   margin-right: 10px;
   margin-bottom: 10px;
   float: left;
   border: 1px solid #000;
   border-radius: 4px;
   text-decoration: none;
}

.navFooter a:hover,
.navFooter a.active {
   color: #e5c304;
   border: 1px solid #e5c304;
}

#formControl .flex {
   width: 100%;
   height: auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

#formControl .buttons {
   width: auto;
   height: auto;
   display: flex;
   align-items: center;
   justify-content: flex-start;
}

#formControl .buttons a {
   color: rgba(0, 0, 0, 0.5);
   font-size: 16px;
   margin-right: 10px;
}

#formControl .buttons a:hover {
   color: rgba(0, 0, 0, 1);
}

#formControl .buttons a:last-child {
   margin-right: 0px;
}

#formControl .fixed {
   position: fixed;
   z-index: 999;
   top: 0px;
   left: 0px;
   padding: 10px 20px;
   background: #fff;
}

.icon {
   width: auto;
   height: 25px;
   padding: 5px 15px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 255px;
   color: #fff;
   font-size: 14px;
   margin-top: 5px;
}

.icon.green {
   background: #0e9649;
}

.icon.blue {
   background: #22abd5;
}

.icon.red {
   background: #ca2d2d;
}

.icon.yellow {
   background: #e5c304;
}

.icon i {
   margin-right: 5px;
}

.notification {
   width: 100%;
   height: auto;
   padding: 30px;
   border-radius: 30px;
   background: #fff;
   border: 5px solid rgba(0, 0, 0, 0.5);
   color: rgba(0, 0, 0, 0.5);
   font-size: 40px;
   text-align: center;
   margin: 30px auto;
}

.minNotif {
   color: red;
   font-size: 11px;
   font-weight: 900;
   width: 100%;
   line-height: 120%;
   margin-top: 10px;
   text-align: center;
}

#items .item .bottom .nnSection {
   width: auto;
   height: auto;
   position: absolute;
   margin-top: 5px;
   padding: 5px;
   background: #fff;
   z-index: 1;
}

#items .item .bottom .nnSection .title {
   color: rgba(0, 0, 0, 0.7);
   font-size: 13px;
}

#items .item .bottom .nnSection:hover {
   box-shadow: 3px 6px 9px rgba(0, 0, 0, 0.5);
   z-index: 2;
}

#items .item .bottom .nnSection .text {
   display: none;
   padding-top: 10px;
}

#items .item .bottom .nnSection .text p {
   width: auto;
   height: auto;
   padding: 0;
   margin: 0;
   font-size: 13px;
   color: rgba(0, 0, 0, 0.7);
}

#items .item .bottom .nnSection .text ul {
   margin: 0;
   padding: 0;
}

#items .item .bottom .nnSection .text ul li {
   font-size: 13px;
   display: table;
   color: rgba(0, 0, 0, 0.7);
}

#items .item .bottom .nnSection:hover .text {
   display: table;
}

.bScroll {
   position: fixed;
   bottom: 15px;
   right: 15px;
   width: 40px;
   height: 40px;
   font-size: 25px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #e5c304;
   border: 1px solid #e5c304;
   border-radius: 5px;
   cursor: pointer;
   background: #fff;
}

.bScroll:hover {
   color: #caad0c;
   border: 1px solid #caad0c;
}