.moby__content-body.bckd8{
    background-color: #f8f8f8;
}

.layer-black{
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, .68);
    z-index: 99999996;
}

.in-layer-center{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    color: #fff;
}


.modal-footer button{
    border-radius: 4px;
}

.txt-center{
    text-align: center !important;
}

.txt-right{
    text-align: right !important;
}

.txt-left{
    text-align: left !important;
}

table button{
    padding:5px 10px;
}

button:disabled{
    background-color: #e6e6e6 !important;
    opacity: 1 !important;
}

button .ic-abs{
    position: absolute;
    top: 3px;
    right: 3px;
    font-size: 10px;
}

button.s11{
    font-size: 11px;
}

button.s10{
    font-size: 10px;
}

button.nobr{
    border: 0px !important;
    outline: none;
}

button.no{
    border: 0px;
    outline: none;
    background-color: transparent;
}

button.dshd{
    border: 1px dashed #ddd;
}

button.blue{
    color: #fff !important;
    background-color: rgb(64, 129, 233) !important;
}

button.green{
    color: #fff !important;
    background: radial-gradient(circle, transparent 1%, rgb(3, 172, 14) 1%) center center / 15000% rgb(3, 172, 14) !important;
    background: #096A61 !important;
    background: #eb8b16 !important;
    background: rgb(67, 90, 59) !important;
}


button.orange{
    color: #fff !important;
    background-color: rgb(240, 157, 2) !important;
}

button.orangered{
    color: #fff !important;
    background-color: rgb(243, 78, 18) !important;
}

button.orangered[role="on"]{
    position: relative;
    color: #fff !important;
    background-color: rgb(248, 149, 113) !important;
}


button.blue .ic{
    /* display: inline-block; */
}


button.blue[role="on"] .ic{
    color: transparent;
}

button.grey{
    color: #777 !important;
    background-color: rgb(250, 249, 249) !important;
    border-radius: 4px;
    border: 1px solid #e8e8e8 !important;
}

button.grey:hover{
    color: #111;
    background-color: rgb(243, 240, 240);
}

button.grey[role="on"]{
    color: #fff !important;
    background-color: rgb(187, 185, 185) !important;
}

button.blue:hover{
    background-color: rgb(54, 116, 216) !important;
}

button.blue[role="on"]{
    color: #fff !important;
    background-color: rgb(152, 184, 235) !important;
}

button.green:hover, button.green:focus{
    background-color: rgb(1, 139, 10)!important;
    background-color: rgb(8, 98, 89) !important;
    background: #cf8428 !important;
    background: rgb(93, 116, 86) !important;

}

button.green[role="on"]{
    color: #fff !important;
    background-color: rgb(188, 236, 191) !important;
    background-color: rgb(178, 240, 233) !important;
    background-color: #cf8428 !important;
    background-color: rgb(70, 83, 65) !important;
}

button.red-br{
    color: red !important;
    border: 1px solid red !important;
    background-color: #fff !important;
    outline: none;
}

button.red-br[role="on"]{
    color: rgb(243, 177, 177) !important;
    border: 1px solid rgb(248, 184, 184) !important;
    background-color: #fff !important;
}

button.btn[role="on"]{
    color: #fff !important;
    opacity: 0.5;
}

button[disabled], button[disabled="disabled"], button[disabled="disabled"]:hover{
    color: #888 !important;
    background-color: #d8d8d8 !important;
}

button.cddwn[disabled="disabled"]{
    color: #444 !important;
    background-color: #f0f0f0 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

button.cddwn[disabled="disabled"] span{
    color: #888 !important;
}

button.is-loading-custome, button.none.is-loading, button.blue.is-loading, button.green.is-loading, button.btn.is-loading, a.is-loading{
    position: relative;
}

/* button.is-loading[role="on"]:after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 1.4em;
    height: 1.4em;
    border: 2px solid #f3f3f3;
    border-top-color: rgb(243, 243, 243);
    border-right-color: rgb(243, 243, 243);
    border-radius: 50%;
    border-right-color: transparent;
    border-top-color: transparent;
    -webkit-animation: spinAround 1s infinite linear;
    animation: spinAround 1s infinite linear;
} */
button.is-loading:focus{
    outline: none;
}

.is-loading.color-none[role="on"]{
    color: transparent !important;
}

button.none.is-loading[role="on"]:after, button.grey.is-loading[role="on"]:after, button.blue.is-loading[role="on"]:after, button.green.is-loading[role="on"]:after, button.btn.is-loading[role="on"]:after,a.is-loading[role="on"]:after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 1.4em;
    height: 1.4em;
    border: 2px solid #f3f3f3;
    /* border-top-color: rgb(243, 243, 243);
    border-right-color: rgb(243, 243, 243); */
    border-radius: 50%;
    border-right-color: transparent;
    border-top-color: transparent;
    -webkit-animation: spinAround 1s infinite linear;
    animation: spinAround 1s infinite linear;
    opacity: 1;
}

.is-loading-search:after{
    content: "";
    display: none;
    position: absolute;
    top: calc(65% / 2);
    right: 12px;
    width: 1.4em;
    height: 1.4em;
    border: 2px solid #f3f3f3;
    /* border-top-color: rgb(243, 243, 243);
    border-right-color: rgb(243, 243, 243); */
    border-radius: 50%;
    border-right-color: transparent;
    border-top-color: transparent;
    -webkit-animation: spinAround 1s infinite linear;
    animation: spinAround 1s infinite linear;
    opacity: 1;
    z-index: 9;
}

.is-loading-search.green:after{
    border-color: rgb(67, 90, 59);
    border-right-color: transparent;
    border-top-color: transparent;
}

.is-loading.green[role="on"]:after{
    border-color: rgb(12, 212, 12);
    border-top-color: transparent;
    border-right-color: transparent;
}

.is-loading.red-br[role="on"]:after{
    border-color: red !important;
    border-top-color: transparent !important;
    border-right-color: transparent !important;
}

.single-loading.green{
    border-color: rgb(12, 212, 12);
    border-top-color: transparent;
    border-right-color: transparent;
}

.single-loading.orange{
    border-color: orange;
    border-top-color: transparent;
    border-right-color: transparent;
}

.single-loading.red{
    border-color: rgb(248, 32, 24);
    border-top-color: transparent;
    border-right-color: transparent;
}

.single-loading.red-br{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 1.4em;
    height: 1.4em;
    /* border: 2px solid #f3f3f3;
    border-top-color: rgb(243, 243, 243);
    border-right-color: rgb(243, 243, 243); */
    border: 2px solid;
    /* border-top-color: rgb(243, 243, 243);
    border-right-color: rgb(243, 243, 243); */
    border-radius: 50%;
    border-right-color: transparent;
    border-top-color: transparent;
    -webkit-animation: spinAround 1s infinite linear;
    animation: spinAround 1s infinite linear;
}

.icon-gender{
    display: inline-block;
    padding-right: 6px;
}

.icon-gender .ic-male{
    color: rgb(20, 117, 245);
    display: none;
}

.icon-gender .ic-female{
    color: rgb(248, 171, 184);
    display: none;
}

.icon-gender[role="male"] .ic-male{
    display: inline-block;
}

.icon-gender[role="female"] .ic-female{
    display: inline-block;
}

.is-loading-custome.is-green[role="on"]:after{
    border: 2px solid rgb(34, 177, 34);
    border-top-color: transparent;
    border-right-color: transparent;
}

.is-loading-custome.red-br[role="on"]:after{
    border: 2px solid red;
    border-top-color: transparent;
    border-right-color: transparent;
}

.is-loading-custome[role="on"]:after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 1.4em;
    height: 1.4em;
    /* border: 2px solid #f3f3f3;
    border-top-color: rgb(243, 243, 243);
    border-right-color: rgb(243, 243, 243); */
    border-radius: 50%;
    /* border-right-color: transparent;
    border-top-color: transparent; */
    -webkit-animation: spinAround 1s infinite linear;
    animation: spinAround 1s infinite linear;
    opacity: 1;
}

button.orangered[role="on"]:after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 1.4em;
    height: 1.4em;
    border: 2px solid #f3f3f3;
    border-top-color: rgb(243, 243, 243);
    border-right-color: rgb(243, 243, 243);
    border-radius: 50%;
    border-right-color: transparent;
    border-top-color: transparent;
    -webkit-animation: spinAround 1s infinite linear;
    animation: spinAround 1s infinite linear;
}

/* button.orangered[role="on"] span{
    color: transparent !important;
} */

button.none[role="on"] span, button.orangered[role="on"] span, button.blue.is-loading[role="on"], button.green.is-loading[role="on"]{
    color: transparent !important;
}

.ic-wa{
    color: #00E676;
}

.ic-cp{
    color: orange;
}

button.orangered[disabled="disabled"]
{
    background-color: #d4d4d4;
    color: #bbb;
}

.fl-left{
    float: left;
}

.fl-right{
    float: right;
}

.tbl{
	display: table;
	width: 100%;
	height: 100%;
	position: relative;
}

.intbl{
	display: table-cell;
	width: 100%;
	height: 100%;
	vertical-align: middle;
}


.hide{
    display: none !important;
}

.show{
    display: block !important;
}

.div{
  display: block;
  width: 100%;
  position: relative;
}

.divH{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
  }

.clr-float{
    clear: both;
    display: table;
}

.clr-float:before{
    content: '';
    clear: both;
    display: table;
}


.zidx{
    z-index: 9999993;
    /* position: relative; */
}

.zidx-re{
    z-index: 9999993;
    position: relative;
}

.sli_icon-symbol-male{
    color: rgb(54, 107, 230);
    font-weight: 900;
}


.sli_icon-symbol-female{
    color: rgb(219, 130, 145);
    font-weight: 900;
}

.ts{
    text-shadow: 0px 1px 0px #999;
}

.bg-color-purple{
    background-color: purple;
}

.bg-color-blue{
    background-color: #689df6;
}

.bg-color-orange{
    background-color: orange;
}

.bg-color-green{
    background-color: #34a853;
}

.bc-yw{
    background-color: rgb(250, 250, 223);
}

.bc-grey{
    background-color: rgb(189, 186, 186);
    color: #333 !important;
}

.bc-f0{
    background-color: #f0f0f0 !important;
}

.bc-red{
    background-color: rgb(245, 77, 77);
    color: #fff !important;
}

.bc-orange{
    background-color: orange !important;
    color: #fff !important;
}

.bc-green-w{
    background-color: rgb(180, 243, 180);
    color: #333 !important;
}

.bc-green{
    background-color: rgb(29, 167, 29);
    background-color: rgb(46, 180, 46);
    background-color: #096A61 !important;
    color: #fff !important;
}

.bc-purple{
    background-color: rgb(139, 16, 139);
}

.bc-green:hover, .bc-orange:hover{
    opacity: .5;
}

.bc-grey .label{
    color: #888 !important;
}

.bc-red .label{
    color: #ddd !important;
}

.bc-orange .label{
    color: #ddd !important;
}

.bc-green-w .label{
    color: #888 !important;
}

.bc-green .label{
    color: #ddd !important;
}

.color-transparent{
    color: transparent !important;
}

.color-black{
    color: #111;
}

.color-black666{
    color: #666;
}
.color-grey{
    color: #888;
}

.color-red, .color-red .ic{
    color: rgb(204, 39, 39) !important;
}

.color-orange, .color-orange .ic{
    color: orange !important;
}

.color-orangered, .color-orangered .ic{
    color: orangered !important;
}

.color-green, .color-green .ic{
    color: rgb(29, 167, 29) !important;
    /* color: #096A61 !important; */
}

.color-green[role="on"]{
    color: rgb(208, 223, 221) !important;
}

.label.color-green{
    color: rgb(27, 173, 27) !important;
    color: rgb(39, 170, 39) !important;
    /* color: rgb(69, 184, 69) !important; */
    /* color: rgb(255, 123, 0)!important; */
}

.color-blue{
    color: rgb(101, 150, 241) !important;
}

.bx-sz-bx{
    box-sizing: border-box;
}

.br-ou-none, .br-ou-none:focus{
    outline: none !important;
}

.br-btm-dd{
    border-bottom: 1px solid #ddd;
}

.br-1-sld{
    border: 1px solid;
}

.br-1-sld-d{
    border: 1px solid #ddd;
}

.br-1-sld-green{
    border: 1px solid rgb(29, 167, 29);
}

.br-green-f{
    border-color: rgb(54, 187, 63) !important;
}

.br-green-f:hover{
    border-color: rgb(34, 220, 46) !important;
}

.br-green{
    border-color: rgb(29, 167, 29) !important;
    color: rgb(29, 167, 29) !important;
}


.br-red{
    border-color: red !important;
    color: red !important;
}

.br-red-f{
    border-color: rgb(238, 67, 67) !important;
    color: rgb(238, 67, 67) !important;
}

button.rds4{
    border-radius: 4px !important;
}

.br-rds2{
    border-radius: 2px !important;
}

.br-rds4{
    border-radius: 4px !important;
}

.br-rds8{
    border-radius: 8px !important;
}

.br-rds12{
    border-radius: 12px !important;
}

.br-rds18{
    border-radius: 18px !important;
}

.br-rdsb12{
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

.br-rds50p{
    border-radius: 50%;
}

.up-txt{
    text-transform: uppercase;
}

.first-up-txt{
    text-transform:capitalize;
}

.lower-txt{
    text-transform: lowercase;
}


.dotli{
    padding-left: 12px;
    box-sizing: border-box;
    position: relative;
}

.dotli:before{
    content: '';
    width: 5px;
    height: 5px;
    line-height: 100%;
    background-color: #777;
    border-radius: 50%;
    position: absolute;
    left: 0px;
    top: calc(50% - 2px);
}

.dotli.lr{
    margin-left: 8px;
}

.txud{
    text-decoration: underline !important;
}

.txt-decoration-none{
    text-decoration: none !important;
}
/* error  */
.br-error{
   border-color: rgb(214, 36, 36) !important; 
   outline: none !important;
}

.alert-error{
    background-color: rgb(209, 54, 54) !important;
    color: #f8f8f8 !important;
    text-shadow: 0px 1px 0px #333 !important;
}

.alert-error button.close{
    color: #f8f8f8 !important;
    text-shadow: 0px 1px 0px #333 !important;
    outline: none !important;
}
/* end error  */


.msg-page{
    display: block;
    width: 100%;
    position: relative;
}

.msg-page .boxit{
    padding: 15px;
    border-radius: 4px;
    background-color: rgb(217, 248, 221);
    color: rgb(11, 124, 11);
    font-size: 15px;
    text-align: center;
    margin-bottom: 15px;
    border: 1px solid rgb(184, 243, 193);
    box-shadow: 0px 2px 6px -1px #ccc;
}
/* splash */


.splash-tbl{
    display: block;
    height: 100%;
    width: 100%;
    background-color: #eee;
    margin-bottom: 0px;
    background-image: linear-gradient(89deg,#eee,#cfcfcf);
    
    background-size: 99% 100%;
    background-repeat: no-repeat;
    -webkit-animation: animation-lr 1.3s linear 1ms infinite backwards;
    animation: animation-lr 1.3s linear 1ms infinite backwards;
    position: absolute;
    top: 0px;
}

.splash-tbl.bc-blue{
    background-image: linear-gradient(89deg,#2f2290,#281b8a);
}

.splash{
    position: relative;
    display: block;
    background-color: #ddd;
    overflow: hidden;
    border-radius: 2px;
}

.splash-dis{
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    box-sizing: border-box;
    z-index: 999999993;
}

.splash-dis.wth{
    background-color: #fff
}

.splash-dis .logo-ctr{
    width: 72px;
    height: 62px;
    background-size: 100% 100%;
    display: inline-block;
    position: relative;
    animation: opacityztou 2s infinite;
}

.splash-dis .logo-ctr:after{
    content:'';
    position: absolute;
    z-index: 3;
    background-image: url('/assets/greensphere/icon/favicon.png');
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    left: 0px;
    top: 0px;

}


/* 
.splash-dis .logo-ctr:before{
    content: '';
    position: absolute;
    left:-30%;
    top: -32%;
    width: 150%;
    height: 150%;
    z-index: 1;
    background-image: url('/assets/svg/loading.green.svg');
    background-size: 110% 110%;
    box-sizing: border-box;

} */

/* .splash-dis .logo-ctr:after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 1.4em;
    height: 1.4em;
    border: 2px solid #f3f3f3;
    border-top-color: rgb(243, 243, 243);
    border-right-color: rgb(243, 243, 243);
    border-radius: 50%;
    border-right-color: transparent;
    border-top-color: transparent;
    -webkit-animation: spinAround 1s infinite linear;
    animation: spinAround 1s infinite linear;
    opacity: 1;

} */

/* sidebar */
.moby__aside-holder .moby__side-bar .moby__drawer-menu li.spl{
    display: block;
    box-sizing: border-box;
    padding: 5px 15px;
    margin-bottom: 12px;
}

.moby__aside-holder .moby__side-bar .moby__drawer-menu li.spl.bts{
    height: 25px;
    /* background-color: pink; */
}

.inspl{
    position: relative;
    display: block;
    height: 15px;
    background-color: #ddd;
    overflow: hidden;
    border-radius: 2px;
}

.moby__aside-holder .moby__side-bar .moby__drawer-menu li.spl .inspl{
    position: relative;
    display: block;
    height: 15px;
    background-color: #ddd;
    overflow: hidden;
    border-radius: 2px;
}

.moby__aside-holder .moby__side-bar .moby__drawer-menu li.spl .inspl.bc-blue{
    background-color:#31239b;
}

a.btn .ic-absx{
    position: absolute;
    top: 3px;
    right: 10px;
    font-size: 9px;
}

li.spl .inspl.w75{
    width: 75%;
}

li.spl .inspl.w50{
    width: 50%;
}

.w50{
    width: 50px;
    display: inline-block;
}

.w90{
    width: 90px;
    display: inline-block;
}

.w100{
    width: 100px;
    display: inline-block;
}

.w110{
    width: 110px;
}

.w120{
    width: 120px;
}

.w125{
    width: 125px;
}

.w130{
    width: 130px;
}

.w140{
    width: 140px;
}

.w160{
    width: 160px;
}

.w180{
    width: 180px;
}

.w210{
    width: 210px;
}

.w240{
    width: 240px;
}

.w780{
    width: 780px;
}

.w720{
    width: 720px;
}

.w680{
    width: 680px;
    max-width: 680px;
}

.w520{
    width: 520px;
    max-width: 520px;
}

.w480{
    width: 480px;
}

.w460{
    width: 460px;
}

.w420{
    width: 420px;
}

.w360{
    width: 360px;
}

.w16p{
    width: 16%;
}

.w20p{
    width: 20%;
}

.w25p{
    width: 25%;
}

.w30p{
    width: 30%;
}

.width-col-3{
    width: 33.33333%;
}

.w33p{
    width: 33.333333%;
}

.w34p{
    width: 34%;
}

.w35p{
    width: 35%;
}

.w40p{
    width: 40%;
}

.w45p{
    width: 45%;
}

.w66p{
    width: 66%;
}

.w50p{
    width: 50%;
}

.w50px{
    width: 50%;
}

.w60p{
    width: 60%;
}

.w65p{
    width: 65%;
}

.w70p{
    width: 70%;
}

.w75p{
    width: 75%;
}

.w75p{
    width: 75%;
}

.w90p{
    width: 90%;
}

.w70min10p{
    width: calc(66% - 10px);
}

span.label{
    color: #888;
    line-height: 120%;
}

.w100p{
    width: 100% !important;
}

.h100p{
    height: 100% !important;
}

.h5{
    height: 5px;
    line-height: 100%;
    margin-bottom: 0px;
}

.h8{
    height: 8px;
}

.h10{
    height: 10px;
}

.h12{
    height: 12px;
}

.h14{
    height: 14px;
}

.h15{
    height: 15px;
}

.h16{
    height: 16px;
}

.h18{
    height: 18px;
}

.h20{
    height: 20px;
}

.h25{
    height: 25px;
}

.h30{
    height: 30px;
}

.height-row-3{
    height: 33.33333%;
}

.h34{
    height: 34px !important;
}

.h36{
    height: 36px;
}

.h70{
    height: 70px !important;
}
/* end splash */

/* box upload center */

.box-img-upload{
    display: block;
    width: 100%;
    height: 100%;
}

.box-img-upload .box-area-imgupload{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

.box-img-upload[aria-upload="true"] .box-area-imgupload{
    display: block;
}

.box-img-upload a{
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    color: #666;
}

.box-img-upload a:hover{
    color: #111;
}

.box-img-upload[aria-upload="true"] a{
    display: none;
}

.box-img-upload a .box-imgu-load{
    display: none;
}

.box-img-upload .del-img{
    display: none;
    background-color: #fff;
}

.box-img-upload .del-img.right-btm-absolute{
    position: absolute;
    z-index: 4;
    bottom: 5px;
    right: 5px;
}

.box-img-upload[aria-upload="true"] .del-img{
    display: inline-block;
}

/* UPLOAD SELECTED */
.box-upload-sel{
    display: block;
    width: 100%;
    position: relative;
}

.box-upload-sel .cmd-select-upload{
    width: 100%;
    border: 1px solid #ddd;
    padding: 7px 10px;
    border-radius: 8px;
    box-sizing: border-box;
    display: block;
    color: #333;
}

.box-upload-sel .cmd-select-upload .label-name{
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding-right: 20px;
    color: #888;
}

.box-upload-sel .cmd-select-upload .label-icon{
    position: absolute;
    right: 8px;
    top: 12px;
    color: #999;
}

.box-upload-sel .cmd-select-upload:hover{
    border-color: #bbb;
    box-shadow: 1px 1px 2px -1px #bbb;
}

.box-upload-sel .cmd-select-upload:hover .label-name{
    color: #333;
}

.box-upload-sel input[type="file"]{
    display: none;
}

/* checkbox */

.area-checkbox{
    position: relative;
    box-sizing: border-box;
    padding-left: 26px;
    color: #888;
}

.area-checkbox .btn{
    outline: none;
    position: absolute;
    width: 16px;
    height: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    left: 0px;
    color: rgb(14, 189, 14);
}

.area-checkbox .btn:before{
    content: '\f1af';
    font-family: 'Flaticon2';
    position: absolute;
    left: 2px;
    top: 2px;
    z-index: 2;
    font-size: 12px;
    display: none;
}

.area-checkbox[role="on"] .btn:before{
    display: inline-block;
}

.area-checkbox:hover{
    color: #333;
    cursor: default;
}

.area-checkbox:hover .btn{
    cursor: default;
    border-color: #999;
}

.area-checkbox[role="on"]{
    color: #333;
}

.area-checkbox .btn:focus{
    border-color: #999;
}

.area-checkbox .btn:focus + span{
    color: #333;
}

.area-checkbox[role="on"] .btn{
    border-color: rgb(14, 189, 14);
}

/* end checkbos */

.area-overflow{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.area-overflow .overflow-head{
    display: block;
    /* width: unset; */
    height: 32px;
    background-color: #efefef;
    background-color: rgb(231, 245, 255);
    border-bottom: 1px solid #e8e8e8;
}

.area-overflow .overflow-head table{
    /* height: 100%; */
}

.area-overflow .overflow-head table tbody tr td{
    height: 32px;
}

.area-overflow .overflow-body{
    display: block;
    /* width: 100%; */
    height: calc(100% - 34px);
    position: relative;
    padding-bottom: 3px;
}

.area-overflow .overflow-body table .input-box{
    width: 100%;
    height: 28px;
    border: 1px solid #e0e0e0;
}

.area-overflow .overflow-body .dropdown{
    width: 100% !important;
}

.area-overflow .overflow-body .area-sync-pd button.btn{
    font-weight: normal !important;
    font-size: 12px !important
}

.area-overflow .overflow-body .area-sync-pd button.btn:focus{
    outline: none;
}

.area-overflow .overflow-body table .dropdown ul.dropdown-menu li{
    padding: 0px !important;
    margin: 0px !important;
    border: 0px !important;
}

.area-overflow .overflow-body table .dropdown .bs-searchbox input[type="text"]{
    padding:2px 5px;
}

.scroll-y{
    overflow-y: auto;
    overflow-x: visible;
}

.scroll-x{
    overflow-y: visible;
    overflow-x: scroll;
}

.scroll-xy{
    overflow: auto;
}

.area-overflow table, .area-overflow table tbody, .area-overflow table tbody tr{
    position: relative;
    /* width: 100%; */
}

.area-overflow table tbody tr td .td-iner{
    padding: 10px 8px;
    line-height: 16px;
    line-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    color: #444;
    position: relative;
}

.area-overflow table.pd-tb0 tbody tr td .td-iner{
    padding-bottom: 0px !important;
    padding-top: 0px !important;
}

.area-overflow table.pd-tb5 tbody tr td .td-iner{
    padding-bottom: 5px !important;
    padding-top: 5px !important;
}

.area-overflow .overflow-body table tbody tr{
    border-bottom: 1px solid #e8e8e8;
}

.area-overflow td{
    box-sizing: border-box;
}

.area-overflow td.br-r{
    border-right: 1px solid #eee;
}

.area-overflow td.w-30{
    width: 30px !important;
}

.area-overflow td.w-35{
    width: 35px !important;
}

.area-overflow td.w-40{
    width: 40px !important;
}

.area-overflow td.w-45{
    width: 45px !important;
}

.area-overflow td.w-50{
    width: 50px !important;
}


.area-overflow td.w-60{
    width: 60px !important;
}

.area-overflow td.w-70{
    width: 70px;
}

.area-overflow td.w-80{
    width: 80px;
}

.area-overflow td.w-90{
    width: 90px;
}

.area-overflow td.w-100{
    width: 100px;
}

.area-overflow td.w-120{
    width: 120px !important;
}

.area-overflow td.w-140{
    width: 140px !important;
}

.area-overflow td.w-150{
    width: 150px !important;
}

.area-overflow td.w-160{
    width: 160px !important;
}

.area-overflow td.w-180{
    width: 180px !important;
}

.area-overflow td.w-190{
    width: 190px !important;
}

.area-overflow td.w-200{
    width: 200px !important;
}

.area-overflow td.w-220{
    width: 220px !important;
}

.area-overflow td.w-240{
    width: 240px !important;
}

.area-overflow table.no-pd td{
    padding: 0px !important;
}

.area-overflow td.pd-lr3{
    padding:0px 3px 0px 3px !important;
}

.area-overflow table tr td .btn-act{
    display: none;
}

.area-overflow table tr[aria-role="true"] td .btn-act{
    display: inline-block;
}

.area-overflow table tr[status-paid="true"] td .btn-act{
    display: none;
}

.area-overflow table tr td .icon-paid{
    display: none;
}

.area-overflow table tr[status-paid="true"] td .icon-paid{
    display: inline-block;
}
/* DROP DOWN FOCUS */
.area-ddwn-focus{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0px;
}

.area-ddwn-focus[role="on"]{
    z-index: 8;
}

.area-ddwn-focus .area-list-focus{
    position: absolute;
    width: 100%;
    left: 0px;
    background-color: #fff;
    box-shadow: 1px 2px 6px -1px #ddd;
    max-height: 240px;
    border-radius: 4px;
    padding: 2px 0px;
    border: 1px solid #ddd;
    display: none;
    overflow-y: auto;
}

.area-ddwn-focus[role="on"] .area-list-focus{
    display: block;
}

.area-ddwn-focus[aria-role="bottom"] .area-list-focus{
    bottom: calc(100% + 2px);
}

.area-ddwn-focus[aria-role="top"] .area-list-focus{
    top: calc(100% + 2px);
}

.area-ddwn-focus .area-list-focus ul, .area-ddwn-focus .area-list-focus ul li{
    margin: 0px !important;
    padding: 0px !important;
    width: 100%;
    list-style: none;
    border: 0px !important;
}

.area-ddwn-focus .area-list-focus ul li.select{
    border-bottom: 1px solid #ebebeb !important;
    padding:9px 10px !important;
    display: block;
    width: 100%;
    color: #333;
    font-weight: normal;
    cursor: pointer;
    left: 0px !important;
}


.area-ddwn-focus .area-list-focus ul li:last-child{
    border-bottom: 0px !important;
}

.area-ddwn-focus .area-list-focus ul li.select:hover{
    background-color: #f0f0f0;
    color: #111;
}

/* END DROPDOWN FOCUS */

/* form control */
input.form-control.phone{
    width: 40%;
}

textarea.noreseize{
    resize: none;
}
/* handling error */
input.form-control.error, textarea.form-control.error, input.error,button.error{
    border-color: rgb(200, 27, 27) !important;
    box-shadow: none !important;
}

input.form-control.error, textarea.form-control.error:focus{
    outline: none !important;
    box-shadow: none !important;
}

label.error, span.error{
    color: rgb(200, 27, 27) !important;
    font-size: 12px !important;
    font-weight: normal;
    line-height: 120%;
    display: block;
}

.new-modal .dropdown select.error~button.btn.dropdown-toggle, .dropdown select.error~button.btn.dropdown-toggle{
    border-color: rgb(200, 27, 27) !important; 
}

.new-modal .dropdown select.error~button.btn.dropdown-toggle:focus, .dropdown select.error~button.btn.dropdown-toggle:focus{
    outline: none !important;  
}

.new-dropdown{
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}

.new-dropdown .boxed{
    position: absolute;
    padding-top: 5px;
    display: none;
}

.new-dropdown .boxed.bottomright{
    top:100%;
    right: 0px;
}

.new-dropdown .boxed .inboxed{
    display: block;
    width: 260px;
    height: 50px;
    background-color: aqua;
}
/* hendling error */


/* footer */
.moby__footer-holder, .moby__footer-holder h3, .moby__footer-holder .moby__footer-list li a{
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}

.ffairal{
    font-family: Arial, Helvetica, sans-serif;
}
/* end footer */

.ws-m-680, .ws-m-520{
    display: none;
}



.arimage-resize{
    width: 100%;
    height: 100%;
    display: inline-block;
    position: relative;
    overflow: hidden;
    /* background-color: #f2f2f2; */
    text-align: center;
    font: 0/0 a;
}

.arimage-resize img{
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
    font: 16px/1 Arial sans-serif;
    width: auto;
    height: auto;
}

.arimage-resize:before{
    content: ' ';
    height: 100%;
    vertical-align: middle;
    font-size: 0px;
    display: inline-block;
}

.br-cgreen:focus{
    border-color: rgb(75, 179, 75) !important;
    caret-color: rgb(18, 168, 18);
}

.btn-error{
    border-color: rgb(190, 4, 4) !important;
    color: red !important;
    background-color: #fff !important;
}

.no-br{
    border: none !important;
}

.no-br-r{
    border-right: none !important;
}

.no-bg{
    background-color: transparent !important;
}

.font-wg0{
    font-weight: normal !important;
}

.font-wg25{
    font-weight: 250;
}

.font-wg5{
    font-weight: 500;
}

.font-wgb{
    font-weight: bold;
}

.fsize9{
    font-size: 9px !important;
}

.fsize10{
    font-size: 10px !important;
}

.fsize11{
    font-size: 11px !important;
}

.fsize12{
    font-size: 12px !important;
}

.fsize13{
    font-size: 13px !important;
}

.fsize14{
    font-size: 14px !important;
}

.fsize15{
    font-size: 15px !important;
}


.fsize16{
    font-size: 16px !important;
}

.fsize18{
    font-size: 18px !important;
}

.fsize20{
    font-size: 20px !important;
}

.fsize24{
    font-size: 24px !important;
}

.form-control{
    box-shadow: none !important;
}

.box-shadow-none{
    box-shadow: none !important;
}

.row-lr5{
    margin-left: -5px !important;
    margin-right: -5px !important;
}

.row-lr10{
    margin-left: -10px !important;
    margin-right: -10px !important;
}

.row-lr15{
    margin-left: -15px !important;
    margin-right: -15px !important;
}

.mg-lr0{
    margin-left: 0px !important;
    margin-right: 0px !important; 
}

.mg-center{
    margin: auto auto;
}

.mg-t10{
    margin-top: 10px;
}

.mg-t50{
    margin-top: 50px;
}

.mg-t35{
    margin-top: 35px;
}

.mg-t30{
    margin-top: 30px;
}

.mg-t25{
    margin-top: 25px;
}

.mg-t15{
    margin-top: 15px;
}

.mg-t20{
    margin-top: 20px;
}

.mg-tb20{
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.mg-tb25{
    margin-top: 25px !important;
    margin-bottom: 25px !important;
}

.mg-l0{
    margin-left: 0px !important;
}

.mg-l10{
    margin-left: 10px;
}

.mg-l25{
    margin-left: 25px !important;
}

.mg-l30{
    margin-left:30px !important;
}

.mg-b10{
    margin-bottom: 10px !important;
}

.mg-b15{
    margin-bottom: 15px !important;
}

.mg-b20{
    margin-bottom: 20px !important;
}

.mg-b25{
    margin-bottom: 25px !important;
}

.mg-b30{
    margin-bottom: 30px !important;
}

.mg-b8{
    margin-bottom: 8px;
}

.mg-b5{
    margin-bottom: 5px !important;
}

.mg-b0{
    margin-bottom: 0px !important;
}

.mg-r10{
    margin-right: 10px !important;
}

.mg-r5{
    margin-right: 5px !important;
}

.mg-r0{
    margin-right: 0px !important;
}

.mg-last-r0:last-child{
    margin-right: 0px !important;
}

.mg-l10{
    margin-left: 10px !important;
}

.mg-l5{
    margin-left: 5px !important;
}

.mg-last-l0:last-child{
    margin-left: 0px !important;
}

.mg-null{
    margin: 0px !important;
}

.pd0{
    padding: 0px !important;
}

.pd-t10{
    padding-top: 10px !important;
}

.pd-t15{
    padding-top: 15px !important;
}

.pd-t20{
    padding-top: 20px !important;
}

.pd-t25{
    padding-top: 25px !important;
}

.pd-t30{
    padding-top: 30px !important;
}

.pd-tb0{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.pd-tb10{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.pd-tb15{
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.pd-tb20{
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.pd-tb30{
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

.pd-b0{
    padding-bottom: 0px !important;
}

.pd-b10{
    padding-bottom: 10px;
}

.pd-b15{
    padding-bottom: 15px !important;
}

.pd-b25{
    padding-bottom: 25px !important;
}

.pd5{
    padding: 5px !important;
}

.pd10{
    padding: 10px !important;
}

.pd-tb5{
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.pd-tb30{
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

.pd-tb20{
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.pd-tb15{
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.pd-t5{
    padding-top: 5px !important;
}

.pd-l0{
    padding-left: 0px !important;
}

.pd-lr0{
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.pd-lr5{
    padding-right: 5px !important;
    padding-left: 5px !important;
}


.pd-lr10{
    padding-right: 10px !important;
    padding-left: 10px !important;
}

.pd-lr15{
    padding-right: 15px !important;
    padding-left: 15px !important;
}

.pd-lr20{
    padding-right: 20px !important;
    padding-left: 20px !important;
}

.pd-lr30{
    padding-right: 30px !important;
    padding-left: 30px !important;
}

.pd-r10{
    padding-right: 10px !important;
}

.pd-r0{
    padding-right: 0px !important;
}

.pd-l10{
    padding-left: 10px !important;
}

.pd-null{
    padding: 0px !important;
}

.pd-tbnull{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.pd-lr-null{
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.ovw-fix{
    overflow: unset !important;
}

.icfs10{
    font-size: 10px;
}

ul.dropdown-menu li{
    position: relative !important;
}

.dropdown-item.pdtb5{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.ic-r{
    position: absolute;
    right: 0px;
    top: calc(40% / 2);
}

span.dot{
    margin: 0px 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-sizing: border-box;
    display: inline-block;
}

span.dot.w4{
    width: 4px;
    height: 4px;
}

span.dot.w6{
    width: 6px;
    height: 6px;
}

span.dot.brc{
    background-color: #ccc;
}

span.dot.rt{
    margin-left: 0px;
}

.label{
    color: #888;
}

span.ic{
    margin-right: 4px;
}

/* NOT FOUND */

.notfound{
    display: block;
    text-align: center;
    padding:0px 0px 35px 0px;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

.notfound img{
    width: 320px;
    /* margin-bottom: -5%;
    margin-top: -10%; */
}

.notfound a.btnb{
    display: inline-block;
    padding: 11px 20px;
    margin-top: 30px;
    box-sizing: border-box;
    border-radius:4px;
    font-size: 16px;
}

/* END NOT FOUND */

/* animate */


/* POSITION ABSOLUTE */
.ps-top10{
    top: 10px !important;
}

.ps-top15{
    top: 15px !important;
}

.ps-top18{
    top: 18px !important;
}

/* alert */

.alert[role="alert"]{
    z-index: 99999993 !important
}
/* end alert */


.loading-abs{
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
}

.pd-lr-box .card .card-body{
    padding-top: 20px;
}

label.error, span.error{
    color: rgb(200, 27, 27) !important;
    font-size: 12px !important;
    font-weight: normal;
    line-height: 120%;
    display: block;
    padding-top: 3px;
}

label.error:before, span.error:before{
    content: '\e08b';
    font-family: 'Simple-Line-Icons';
    padding-right: 4px;
    font-size: 10px;
}


/* LOADING ELE */

.load-ele:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,.88);
    top: 0px;
    left: 0px;
    z-index: 2;
    display: none;
}

.load-ele:after{
    content: "";
    display: none;
    position: absolute;
    top: 20px;
    bottom: 0;
    left: 0;
    right: 0;
    /* margin: auto; */
    margin-left: auto;
    margin-right: auto;
    width: 2.1em;
    height: 2.1em;
    border: 2px solid rgb(20, 126, 247);
    border-top-color: rgb(243, 243, 243);
    border-right-color: rgb(243, 243, 243);
    border-radius: 50%;
    border-right-color: transparent;
    border-top-color: transparent;
    -webkit-animation: spinAround 1s infinite linear;
    animation: spinAround 1s infinite linear;
    opacity: 1;
    z-index: 3;
}

.load-ele.load-ele-clr-blue:after{
    border: 2px solid rgb(20, 126, 247);
    border-top-color: rgb(243, 243, 243);
    border-right-color: rgb(243, 243, 243);
}

.load-ele[aria-load="true"]:before, .load-ele[aria-load="true"]:after{
    display: block;
}
/* END LOADING ELE */


/* CHECK BOX */

.a-check-box{
    padding-left: 18px;
    color: #666;
    position: relative;
}

.a-check-box:before{
    content: '';
    width: 12px;
    height: 12px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    display: inline-block;
    position: absolute;
    top: 1px;
    left: 0px;
    border-radius: 2px;
}

.a-check-box:after{
    content: '\f1af';
    font-family: 'Flaticon2';
    box-sizing: border-box;
    display: none;
    position: absolute;
    top: -3px;
    left: 2px;
    border-radius: 2px;
    z-index: 1;
    font-size: 9px;
    color: rgb(46, 180, 46);
}

.a-check-box[role="on"]:before{
    border-color: rgb(46, 180, 46);
}

.a-check-box[role="on"]:after{
    display: inline-block;   
}

.a-check-box[role="on"]{
    color:#111; 
}

.nav-link:last-child{
    margin-right: 0px !important;
}

@media(min-width:1023px)
{
    .moby__stat-card.stat-cards-shadow{
        box-shadow: none !important;
        border: 0px !important;
    }
    
    .pd-lr-box{
        padding-left: 15px !important;
        padding-right: 15px !important;
        background-color: transparent !important;
    }

    .pd-lr-box .card{
        background-color: #fff;
        border: 1px solid #e3e8ea !important;
        border-radius: 4px;
        box-shadow: 2px 2px 6px -2px #ddd;
        /* box-shadow: 0 2px 20px 0 rgb(0 0 0 / 5%), 0 10px 4px 0 rgb(0 0 0 / 5%), 0px 1px 11px 0px rgb(0 0 0 / 5%); */
    }

    .pd-lr-box .card .card-body{
        padding-top: 20px;
    }
}

@media(max-width:680px)
{
    
    .w-h-mobile{
        display: none !important;
    }

    .wh-m-680{
        display: none !important;
    }

    input.form-control.phone{
        width: 55%;
    }

    .ws-m-680{
        display: inline-block !important;
    }

    .alert-error, .alert-success{
        right: 2px !important;
        width: calc(100% - 4px);
    }

    .w50px, .w360, .w680, .w520, .w480, .w460{
        width: 100%;
    }

    .box-tabing[role="true"] .tab-vl .fl-left{
        width: calc(100% - 80px);
    }

    .splash-dis .logo-ctr{
        width: 62px;
        height: 56px;
    }
}

@media(max-width:567px){
    .notification-holder.notification-popover .dropdown-menu.dropdown-menu-right{
        right: -25px;
        top: 40px;
    }

    .notification-holder.setting-popover-h .dropdown-menu.dropdown-menu-right{
        top: 40px;
    }
}

@media(max-width:520px)
{
    .wh-m-520{
        display: none !important;
    }

    .ws-m-520{
        display: inline-block !important;
    }


}



/* animate */

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 20px;
  }
  .lds-ellipsis div {
    position: absolute;
    top: 12px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #096A61;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
  }
  .lds-ellipsis div:nth-child(1) {
    left: 6px;
    animation: lds-ellipsis1 0.6s infinite;
    opacity: .5;
  }
  .lds-ellipsis div:nth-child(2) {
    left: 12px;
    animation: lds-ellipsis2 0.6s infinite;
    
  }
  .lds-ellipsis div:nth-child(3) {
    left: 36px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(4) {
    left: 64px;
    animation: lds-ellipsis3 0.6s infinite;
    opacity: .5;
  }
  @keyframes lds-ellipsis1 {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes lds-ellipsis3 {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }
  @keyframes lds-ellipsis2 {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(24px, 0);
    }
  }
  
  @keyframes opacityztou{
      0% {
          opacity: .25;
      }
      20% {
          opacity: .5;
      }
      40% {
          opacity: .75;
      }
      60%{
          opacity: 1;
      }
      80% {
          opacity: .75;
      }
      100% {
          opacity: .5;
      }
  }

@-webkit-keyframes spinAround{
    0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}
}
@keyframes spinAround{
    0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}
}


@-webkit-keyframes animation-lr{
    0%{background-position:-300px;}100%{background-position:300px;}
}

@keyframes animation-lr{
    0%{background-position:-300px;}100%{background-position:300px;}
}

@keyframes expand-top-5{
    0%{top:0%}
    100%{top:calc(100% + 5px)}
}

@-webkit-keyframes expand-top-5{
    0%{top:0%}
    100%{top:calc(100% + 5px)}
}

.topToBottom[role="true"]{
    animation: topToBottom ease .5s;
    -webkit-animation: topToBottom ease .5s;
    -moz-animation: topToBottom ease .5s;
    -o-animation: topToBottom ease .5s;
    -ms-animation: topToBottom ease .5s;
    top: 0px;
}

.topToBottom[role="false"]{
    animation: bottomToTop ease .5s;
    -webkit-animation: bottomToTop ease .5s;
    -moz-animation: bottomToTop ease .5s;
    -o-animation: bottomToTop ease .5s;
    -ms-animation: bottomToTop ease .5s;
    top: -100%;
}


@keyframes topToBottom {
    0% {
        top:-100%;
    }
    100% {
        top:0px;
    }
}

@keyframes bottomToTop {
    0% {
        top:0px;
    }
    100% {
        top:-100%;
    }
}

.bottomUp[role="true"]{
    animation: bottomUp ease .5s;
    -webkit-animation: bottomUp ease .5s;
    -moz-animation: bottomUp ease .5s;
    -o-animation: bottomUp ease .5s;
    -ms-animation: bottomUp ease .5s;
    bottom: 0px;
}

.bottomUp[role="false"]{
    animation: bottomToBot ease .5s;
    -webkit-animation: bottomToBot ease .5s;
    -moz-animation: bottomToBot ease .5s;
    -o-animation: bottomToBot ease .5s;
    -ms-animation: bottomToBot ease .5s;
    bottom: -100%;
}



/* AREA BOX UPLOAD IMAGE AND PREVIEW NEW */
.area-preview-upload{
    position: relative;
    width: 100%;
    height: 155px;
    background-color: #f1f1f6;
    transition: all ease-in-out 0.5s;
    border: 1px dashed #ddd;
}

.area-preview-upload.view-card{
    height: 125px;
}

.area-preview-upload:hover{
    background-color: #ebebeb;
}

.area-preview-upload .area-img-preview{
    position: relative;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 3;
    display: inline-block;
}

/* .area-preview-upload[aria-upload="true"] .area-img-preview{
    display: block;
} */

.area-img-preview .cover-img, .area-img-preview .body-cover-preview{
    width: 100%;
    height: 100%;
    display: inline-block;
    position: relative;
    overflow: hidden;
    /* background-color: #f2f2f2; */
    text-align: center;
    font: 0/0 a;
}

.area-img-preview.view-cover .cover-img, .area-img-preview.view-cover .body-cover-preview{
    font: unset;
}

.area-img-preview .preview-img{
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
}

.area-preview-upload[aria-upload="true"] .area-img-preview .cover-img{
    z-index: 10;
}

.area-preview-upload[aria-upload="true"] .area-img-preview .preview-img{
    /* display: none; */
}

.area-img-preview .cover-img:before{
/* , .area-img-preview .preview-img:before{ */
    content: ' ';
    height: 100%;
    vertical-align: middle;
    font-size: 0px;
    display: inline-block;
}

.area-img-preview .cover-img img, .area-img-preview .preview-img img{
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
    font: 16px/1 Arial sans-serif;
    width: auto;
    height: auto;
    top: 0px;
}

.area-img-preview.view-cover .cover-img img, .area-img-preview.view-cover .preview-img img{
    background-size: cover !important;
    object-fit: cover;
    font: unset;
}
.area-preview-upload[aria-upload="true"] .area-navi-close{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
}

.area-preview-upload .area-navi-close button{
    color: rgb(189, 43, 43);
    border:1px solid rgb(189, 43, 43);
    background-color: #fff;
    box-sizing: border-box;
    padding: 3px 10px;
    /* border: 0px; */
    border-radius: 4px;
    line-height: 100%;
    transition: all ease-in-out 0.5s;
    display: none;
}

.area-preview-upload[aria-upload="true"] .area-navi-close button{
    display: block;
}

.area-preview-upload .area-navi-close button .text{
    font-size: 11px;
}

.area-preview-upload .area-navi-close button:hover{
    background-color: rgb(189, 43, 43);
    color: #fff;
}

.area-preview-upload .area-button{
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    top: 0px;
    z-index: 4;
}

.area-preview-upload[aria-upload="true"] .area-button{
    display: none;
}

.area-preview-upload[role='true'] .area-button{
    display: none;
}

.area-preview-upload .area-button a{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 100%;
}

.area-preview-upload .area-button a .area-select-icon{
    color: #777;
}

.area-preview-upload .area-button a[role="on"] .area-select-icon{
    display: none;
}
.area-preview-upload .area-button a .area-loading{
    display: none;
}

.area-preview-upload .area-button a[role="on"] .area-loading{
    display: block;
}
/* END AREA BOX UPLOAD IMAGE AND PREVIEW NEW */


.color-whatsapp{
    color: #00E676;
}

/* RADIO BUTTON */
.area-radio-button{
    box-sizing: border-box;
    padding: 10px 0px;
    position: relative;
}

.area-radio-button a{
    margin-right: 12px;
    /* background-color: pink; */
    padding: 0px 0px 0px 20px;
    box-sizing: border-box;
    border-radius: 18px;
    position: relative;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-size: 14px;
    color: #666;
}

.to-fsize12 .area-radio-button a{
    font-size: 12px;
}

.area-radio-button a:before{
    content: '';
    width: 13px;
    height: 13px;
    background-color: #ccc;
    position: absolute;
    left: 0px;
    top: 3px;
    border-radius: 50%;
}

.area-radio-button.cbox a:before{
    border-radius: 2px !important;
}

.area-radio-button.cbox a:after{
    content: "\f00c";
    font-family: FontAwesome;
    position: absolute;
    z-index: 3;
    left: 13px;
    top: 6px;
    color: #777;
    display: none;
}

.area-radio-button a:hover{
    color: #526E48;
}


.area-radio-button a:hover:before{
    background-color: #526E48;
}

.area-radio-button a[role="on"]{
    color: #526E48;
}



.area-radio-button a[role="on"]:before{
    background-color: #526E48;
}

.area-radio-button a:last-child{
    margin-right: 0px;
}

.area-radio-button.md-full{
    padding: 0px;
}

.area-radio-button.md-full a{
    width: 100%;
    display: block;
    box-sizing: border-box;
    padding: 6px 8px 0px 30px;
    background-color: #fff;
    border: 1px solid #ddd;
}

.area-radio-button a:before{
    left: 12px;
    top: 9px;
}

.area-radio-button.md-full a:hover{
    background-color: #ebebeb;
    box-shadow: 2px 2px 6px -2px #888;
}

.area-radio-button.node-orange a{
    color: #666;
}

.area-radio-button.node-orange a:hover{
    color: #eb8b16;
    background-color: #eb8b16;
    background-color: #ebebeb;
    color: #333;
}

.area-radio-button.node-orange a:before{
    background-color: #8888;
    background-color: #f0f0f0;
}

.area-radio-button.node-orange a:hover:before{
    background-color: #eb8b16;
    background-color: #fff;
    background-color: #666;
    background-color: #ccc;
}

.area-radio-button.cbox.node-orange a:hover:after{
    color: #eee;
    display: inline-block;
}

.area-radio-button.node-orange a[role="on"]{
    color: #fff;
    background-color: #eb8b16;
}

.area-radio-button.node-orange a[role="on"]:before{
    background-color: #fff;
}

.area-radio-button.cbox.node-orange a[role='on']:after{
    color: #eb8b16;
    display: inline-block;
}

/* END RADIO BUTTON */

/* AREA SENDING WHATSAPP */

.document-chat{
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    background-color: #f8f8f8;
}

.area-chat{
    margin: auto auto;
    position: relative;
    height: 100%;
    max-width: 680px;
}

.area-chat .iner-chat{
    position: relative;
    width: 100%;
    display: block;
    padding-top: 140px;
    text-align: center;
}


.area-chat .iner-chat .label{
    color: #333;
    font-weight: 300;
    font-size: 20px;
}

.area-chat .iner-chat .label.br-bottom{
    border-bottom: 1px solid #dadde1;
    padding-bottom: 20px;
    color: #777;
    font-size: 18px;
}

.area-chat .iner-chat a.button{
    border-radius: 26px;
    padding: 15px 32px;
    background-color: #0b6e63;
    display: inline-block;
    margin: 60px 0px;
    color: #fff;
    font-size: 18px;
    font-weight: 300;
}

.area-chat .iner-chat a.button:hover, .area-chat .iner-chat a.button:hover{
    background-color: #3ba599;
}


/* END AREA SENDING WHATSAPP */


table tbody tr td .td-iner-def{
    padding: 8px 8px;
    line-height: 16px;
    line-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    color: #444;
    position: relative;
    border-right: 1px solid #ddd;
}

table tbody tr td:last-child .td-iner-def{
    border-right: 0px;
}

.form-checkbox{
    /* padding-left: 35px; */
}

.input-checkbox{
    /* display: none; */
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 0px;;
}

.label-checkbox{
    font-size: 13px;
    color: #999;
    line-height: 1.4;
    display: block;
    position: relative;
    padding-left: 26px;
    cursor: pointer;
    z-index: 2;
}

.label-checkbox:before{
    content: "\f00c";
    font-family: FontAwesome;
    font-size: 13px;
    color: transparent;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 2px;
    background: #fff;
    border: 1px solid #e6e6e6;
    left: 0;
    top: 50%;
}

.input-checkbox:checked ~ .label-checkbox::before {
    color: #526E48;
    border-color: #526E48;
}

.area-checkbox-a {
    position: relative;
}

.area-checkbox-a a{
    position: relative;
    padding-left: 20px;
    color: #333;
}

.area-checkbox-a a:before{
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    top: 1px;
    left: 0px;
    background-color: #ebebeb;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.area-checkbox-a a:after{
    content: "\f00c";
    font-family: FontAwesome;
    position: absolute;
    left: 2px;
    top: -2px;
    font-size: 12px;
    z-index: 3;
    display: none;
}

.area-checkbox-a a:hover,.area-checkbox-a a[role="on"] span{
    color: #526E48;
}

.area-checkbox-a a[role="on"]:before{
    background-color: #526E48;
}
.area-checkbox-a a[role="on"][area-role="false"]:before{
    background-color: #ddd;
}

/* .area-checkbox-a a:hover,.area-checkbox-a a[area-role="false"] span{
    color: #888;
    cursor: pointer;
} */

.area-checkbox-a a:hover[area-role="true"]{
    color: #526E48;
}

.area-checkbox-a a[area-role="false"]{
    cursor: default;
    color: #888;
}

.area-checkbox-a a[role="on"]:after{
    color: #fff;
    display: block;
}

.area-checkbox-a input{
    display: none;
}


/* TABLE MODIEF */
table.tbl-purchase{
    display: block;
    width: 100%;
    overflow: auto;
}

table.tbl-purchase tr{
    display: block;
}

table.br-bottom tr th, table.br-bottom tr td{
    border-bottom: 1px solid #ddd;
}

table.br-bottom tr:last-child td{
    border-bottom: 0px;
}

table .col-inner{
    /* padding: 4px 3px; */
    /* line-height: 16px; */
    /* line-height: 100%; */
    /* overflow: hidden;
    box-sizing: border-box;
    color: #444;
    position: relative; */
}

table.tbl-purchase th{
    background-color: #d1e1f0;
    color: #444;
    font-weight: 500;
    font-size: 12px;
}

table th .col-inner{
    padding: 6px 10px;
}

table td .col-inner{
    /* padding: 8px 10px; */
    overflow: hidden;
    /* background-color: pink; */
    padding: 4px 6px;
    box-sizing: border-box;
}


table .col-inner button{
    padding: 1px;
    height: unset;
}

table.tbl-purchase{
    min-height: 100%;
    background-color: #fbfbfb;
    /* background-color: pink; */
    border-spacing: unset;
    width: 100%;
    /* background-color: aqua; */
}

table.tbl-purchase th, table.tbl-purchase td{
    border-right: 1px solid #e8e8e8;
}

table.tbl-purchase th:last-child{
    border-right: 0px;
}

table.tbl-purchase tr{
    border-bottom: 1px solid #e8e8e8;
}

table.tbl-purchase td{
    font-size: 12px;
    line-height: unset;
}

table.tbl-purchase input, table.tbl-purchase select{
    padding: 4px 5px;
    border: 1px solid #ddd;
    background-color: #fefefe;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    height: 30px;
}

table.tbl-purchase input:focus{
    background-color: #fff;
    border-color: #ccc;
}

table.tbl-purchase .area-checkbox-a a:after{
    /* top: -1px; */
}

table.tbl-purchase .tr.sling td{
    background-color: rgb(249, 249, 234) !important;
}

table.tbl-purchase .btn{
    height: 32px !important;
    line-height: unset !important;
    padding: 0px 8px;
}

table.tbl-purchase .w110px{
    width: 110px;
}

table.tbl-purchase .w90px{
    width: 90px;
}

table.tbl-purchase .w70px{
    width: 70px;
}

table.tbl-purchase .w65px{
    width: 65px;
}

table.tbl-purchase .w50px{
    width: 50px;
}

table.tbl-purchase .txt-right, table.tbl-purchase .txt-right input{
    text-align: right;
}

table.tbl-purchase .txt-center, table.tbl-purchase .txt-center input{
    text-align: center;
}

/* table.tbl-purchase tbody{
    width: 100%;
    border-spacing: unset;
    display: block;
}

table.tbl-purchase tr{
    display: block;
    width: 100%;
} */

/* END TABLE MODIEF */

.bts-horizontal{
    width: 2px;
    height: 100%;
    display: inline-block;
    margin: 0px 10px;
    background-color: #ddd;
    border-right: 1px solid #f8f8f8;
}

/* BUTTON CLEAR TEXTAREA */
.area-button-clear{
    position: relative;
}

.area-button-clear button{
    display: none;
    position: absolute;
    z-index: 9;
    padding:3px 6px 2px;
    border: 0px;
    top: 7px;
    border-radius: 4px;
    opacity: 1;
    outline: none;
}

.area-button-clear button.top-5{
    top: 5px;
}

.area-button-clear button.top-8{
    top: 8px;
}

.area-button-clear button[role="on"]{
    /* opacity: 0.5; */
    background-color: rgb(67, 90, 59) !important;
    color: #fff;
}

.area-button-clear button.in-right{
    right: 6px;
}

.area-button-clear[role="true"] button{
    display: block;
}

/* END BUTTON CLEAR TEXTAREA` */

/* PROPER MODAL */
.prover-modal-view{
    display: block;
    position: fixed;
    z-index: 9999999;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    /* background-color: pink; */
}

.prover-modal-view.white{
    background-color: rgba(255,255,255,.58);
}

.prover-modal-view.black{
    background-color: rgba(0,0,0,.48);
}

.modal-home{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.modal-home .insed-body.pdtb20{
    padding-top: 20px;
    padding-bottom: 20px;
}

.modal-home.full{
    height: 100%;
}

.modal-home .insed-body .arinsed{
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 13px;
    box-shadow: 1px 2px 6px -1px #aaa;
    position: relative;
}

.modal-home.full .insed-body .arinsed{
    height: 100%;
}

.modal-home .insed-body .arinsed .load{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 3;
    background-color: #fff;
}

.modal-home .insed-body .arinsed .header-box{
    display: block;
    width: 100%;
    position: relative;
    text-align: center;
    padding: 10px 15px;
}


.modal-home .insed-body .arinsed .header-box b{
    font-size: 18px;
}

.modal-home .insed-body .arinsed .header-box a.close{
    position: absolute;
    right: -13px;
    top: -5px;
    font-size: 14px;
    line-height: 100%;
    padding: 4px;
}

.modal-home .insed-body .arinsed .header-box a.close.r15{
    right: 15px;
}

.modal-home .insed-body .arinsed .fxbox{
    position: relative;
    display: block;
    height: calc(100% - 42px);
}

.modal-home .insed-body .arinsed .fxbox.w860{
    width: 860px;
}

.modal-home .insed-body .arinsed .fxbox.w720{
    width: 720px;
}

.modal-home .insed-body .arinsed .fxbox.w620{
    width: 620px;
}

.modal-home .insed-body .arinsed .fxbox .artbl{
    width: 100%;
    position: relative;
    height: 100%;
}

.modal-home .insed-body .arinsed .fxbox .artbl .hdtbl{
    display: block;
    height: 48px;
    background-color: #f8f8f8;
    padding-top: 8px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.modal-home .insed-body .arinsed .fxbox .artbl .hdtbl .src{
    height: 28px;
    width: 190px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    margin-top: 2px;
    background-color: #fff;
    padding: 0px 10px;
}

.modal-home .insed-body .arinsed .fxbox .artbl .hdtbl .navi{
    float: right;
}

.modal-home .insed-body .arinsed .fxbox .artbl .hdtbl .navi .btn-navi{
    height: 28px;
    padding: 0px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
}

.modal-home .insed-body .arinsed .fxbox .artbl .bdytbl{
    display: block;
    height: calc(100% - 106px);
}


.modal-home .insed-body .arinsed .fxbox .artbl .bdytbl .headertbl{
    display: block;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    padding: 0px 12px;
    background-color: #e8e8e8;
}


.modal-home .insed-body .arinsed .fxbox .artbl .bdytbl .ar-load{
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 30px;
    text-align: center;
    z-index: 6;
    background-color: rgba(255,255,255, .68);
    display: none;
}

.modal-home .insed-body .arinsed .fxbox .artbl .bdytbl .ar-load img{
    width: 40px;
    height: 40px;
}

.modal-home .insed-body .arinsed .fxbox .artbl .bdytbl[aria-role="true"] .ar-load{
    display: block;
}

.modal-home .insed-body .arinsed .fxbox .artbl .foottbl{
    display: block;
    position: relative;
    width: 100%;
    height: 58px;
    background-color: #f8f8f8;
    box-sizing: border-box;
    padding: 10px 20px 0px;
    border-top: 1px solid #eee;
}

.modal-home .insed-body .arinsed .fxbox .artbl .foottbl .inf{
    padding-top: 4px;
    font-size: 12px;
}

.modal-home .insed-body .arinsed .fxbox .artbl .foottbl button{
    padding:6px 8px 5px;
    color: #666;
    margin-right: 6px;
    border: 1px solid #ccc;
    background-color: #f8f8f8;
}

.modal-home .insed-body .arinsed .fxbox .artbl .bdytbl .intblx{
    background-color: #fff;
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.modal-home .insed-body .arinsed .fxbox .artbl .bdytbl .intblx ul{
    width: 100%;
    position: relative;
    display: block;
}

.modal-home .insed-body .arinsed .fxbox .artbl .bdytbl .intblx ul li{
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
    padding: 7px 12px;
    background-color: #fff;
}

.modal-home .insed-body .arinsed .fxbox .artbl .bdytbl .intblx ul li .td-iner{
    padding: 3px 8px;
}

.modal-home .insed-body .arinsed .fxbox .artbl .bdytbl .intblx ul li.sling{
    background-color: rgb(251, 253, 255);
}

.modal-home .insed-body .arinsed .fxbox .artbl .bdytbl .intblx ul li:hover{
    background-color: rgb(253, 247, 236);
}

.modal-home .insed-body .arinsed .fxbox.no .artbl .bdytbl .intblx ul li:hover{
    background-color: transparent;
}

.modal-home .insed-body .arinsed .fxbox .artbl .bdytbl .intblx ul li tr:hover{
    background-color: rgb(253, 247, 236);
}

.arinsed .ar-popup{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    z-index: 6;
    background-color: rgba(255,255,255,.68);
}

.arinsed .ar-popup .in-popup{
    display: block;
    width: 100%;
    position: relative;
    height: 100%;
    overflow-y: hidden;
}

.arinsed .ar-popup .in-popup .mdl-popup{
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 0px;
}

.arinsed .ar-popup .in-popup .mdl-popup .box-popup{
    width: 420px;
    height: 520px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 1px 3px 8px -1px #999;
    margin: auto auto;
}

.arinsed .ar-popup .in-popup .mdl-popup .box-popup .hdr{
    display: block;
    width: 100%;
    padding: 15px 20px;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
    background-color: #f0f0f0;
    border-radius: 4px 4px 0px 0px;
}

.arinsed .ar-popup .in-popup .mdl-popup .box-popup .hdr .cls{
    position: absolute;
    top: 0px;
    right: 0px;;
}

.arinsed .ar-popup .in-popup .mdl-popup .box-popup .bdy{
    display: block;
    width: 100%;
    height: calc(100% - 111px);
    box-sizing: border-box;
    background-color: #fff;
    position: relative;
}

.arinsed .ar-popup .in-popup .mdl-popup .box-popup .bdy .hdry{
    display: block;
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
}

.arinsed .ar-popup .in-popup .mdl-popup .box-popup .bdy .hdry input{
    border: 1px solid #eee;
    border-radius: 2px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 3px 7px;
}

.arinsed .ar-popup .in-popup .mdl-popup .box-popup .bdy .hdry input:focus{
    background-color: #f8f8f8;
}

.arinsed .ar-popup .in-popup .mdl-popup .box-popup .bdy .in-bdy{
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: calc(100% - 48px);
    position: relative;
}

.arinsed .ar-popup .in-popup .mdl-popup .box-popup .bdy .load{
    position: absolute;
    z-index: 7;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .68);
    box-sizing: border-box;
    padding-top: 25px;
    text-align: center;
}

.arinsed .ar-popup .in-popup .mdl-popup .box-popup .bdy .load img{
    width: 28px;
    height: 28px;
}

.arinsed .ar-popup .in-popup .mdl-popup .box-popup .bdy .in-bdy .area-inbody{
    display: block;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.arinsed .ar-popup .in-popup .mdl-popup .box-popup .bdy .in-bdy ul{
    border-top: 1px solid #eee;   
}

.arinsed .ar-popup .in-popup .mdl-popup .box-popup .bdy .in-bdy ul li{
    border-bottom: 1px solid #eee;
    padding: 8px 20px;
    line-height: 100%;
}

.arinsed .ar-popup .in-popup .mdl-popup .box-popup .bdy .in-bdy ul li.sling{
    background-color: rgb(248, 251, 255);
}

.arinsed .ar-popup .in-popup .mdl-popup .box-popup .bdy .in-bdy ul li:hover{
    background-color: rgb(253, 247, 236);   
}

.arinsed .ar-popup .in-popup .mdl-popup .box-popup .bdy .in-bdy ul li .ar-check{
    height: 32px;
    width: 28px;
    display: block;
}

.arinsed .ar-popup .in-popup .mdl-popup .box-popup .bdy .in-bdy ul li .ar-check span.check{
    width: 14px;
    height: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: inline-block;
    line-height: 100%;
    box-sizing: border-box;
    padding-top: 0px;
}

.arinsed .ar-popup .in-popup .mdl-popup .box-popup .bdy .in-bdy ul li .ar-check span.check .icon{
    display: none;
    color: #fff;
    font-size: 10px;
}

.arinsed .ar-popup .in-popup .mdl-popup .box-popup .bdy .in-bdy ul li[role='on'] {
    background-color: rgb(253, 247, 236);   
}

.arinsed .ar-popup .in-popup .mdl-popup .box-popup .bdy .in-bdy ul li[role='on'] .ar-check span.check{
    border-color: orange;
    background-color: orange;
}

.arinsed .ar-popup .in-popup .mdl-popup .box-popup .bdy .in-bdy ul li[role='on'] .ar-check span.check .icon{
    display: inline-block;
}


.arinsed .ar-popup .in-popup .mdl-popup .box-popup .foot{
    display: block;
    padding: 15px 20px;
    display: block;
    position: relative;
    box-sizing: border-box;
    border-top: 1px solid #ddd;
    background-color: #f0f0f0;
}

.prover-modal-box{
    position: absolute;
    z-index: 3;
    display: block;
}

.prover-modal-box.w240{
    width: 240px;
}

.prover-modal-box.mn-child{
    width: 450px;
}

.prover-modal-box.sld-lr{
    height: 100%;
    right: -100%;
}

.prover-modal-box.sld-lr.w330{
    width: 330px;
}

.prover-modal-box-inar{
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-shadow: 1px 3px 8px -1px #bbb;
}

.prover-modal-box-inar .box-head{
    display: block;
    width: 100%;
    height: 56px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0px 15px;
    border-bottom: 1px solid #ebebeb;
}

.prover-modal-box-inar .box-head a.close{
    position: absolute;
    right: 5px;
    top: 7px;
    font-size: 14px;
    width: 40px;
    height: 40px;
    z-index: 2;
    text-align: center;
    border-radius: 8px;
}

.prover-modal-box-inar .box-head a.close:hover{
    background-color: #eee;
}

.prover-modal-box-inar .box-head a.close span{
    transform: rotate(180deg)
}

.prover-modal-box-inar .box-head .title{
    font-family: "Roboto";
    font-weight: 400;
    font-size: 18px;
    color: #444;
}

.prover-modal-box-inar .box-body{
    display: block;
    width: 100%;
    height: calc(100% - 56px);
    background-color: #fbfbfb;
    position: relative;
}


.prover-modal-box-inar .box-body .inar-x{
    display: block;
    position: relative;
    overflow-y: auto;
    overflow-x: none;
    height: 100%;
    width: 100%;
    display: block;
}

.prover-modal-box-inar .box-body .inar-x ul{
    width: 100%;
    display: block;
    position: relative;
    box-sizing: border-box;
    padding: 10px;
}

.prover-modal-box-inar .box-body .inar-x ul li{
    display: block;
    width: 100%;
    margin-bottom: 8px;
    /* box-shadow: 1px 1px 6px -2px #ccc; */
}

.prover-modal-box-inar .box-body .inar-x ul li:last-child{
    margin-bottom: 0px;
}

.prover-modal-box-inar .box-body .inar-x ul li:last-child{
    /* margin-bottom: 0px; */
}

.notif-slide ul li a{
    display: block;
    width: 100%;
    position: relative;
    border-radius: 4px;
    border: 1px solid transparent;
    /* margin-bottom: 10px; */
    box-sizing: border-box;
    padding:10px 8px;
    font-family: 'Nunito Sans';
}

.notif-slide ul li a:hover{
    background-color: #fff;
    border-color: #e8e8e8;
}

.notif-slide ul li a[aria-read="false"]{
    background-color: rgb(250, 250, 236);
    border-color: rgb(240, 240, 215);
}

.notif-slide ul li a .fl{
    padding-right: 10px;
    position: relative;
    float: left;
}

.notif-slide ul li a .fl .arimg{
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
    overflow: hidden;
    box-sizing: border-box;
    float: left;
    background-color: #ddd;
    border-radius: 50%;
}

.notif-slide ul li a .fl .arimg img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

.notif-slide ul li a .fr{
    float: right;
    width: calc(100% - 42px);
    box-sizing: border-box;
    position: relative;
    line-height: 120%;
}

.notif-slide ul li a .fr .content{
    color: #555;
    padding-bottom: 3px;
}

.notif-slide ul li a .fr .content span{
    color: #555;
}

.notif-slide ul li a .fr .content b{
    color: #111;
    font-weight: 600;
}

.notif-slide ul li a .fr .datetime{
    color: #777;
    font-size: 11px;
}

.prover-modal-box-in{
    position: relative;
    display: block;
    z-index: 3;
    width: 100%;
    padding-top: 10px;
}

.prover-modal-box-in .up-arrow{
    position: absolute;
    width: 29px;
    height: 10px;
    top: 0px;
    z-index: 2;
    background-color: transparent;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url('/assets/images/component/arrow-up.png');
}

.prover-modal-box-in .up-arrow.r{
    right: 16px;
}

.prover-modal-box-in .up-arrow.l{
    left: 16px;
}

.prover-modal-box-in .ar-list{
    display: block;
    width: 100%;
    position: relative;
    display: block;
    background-color: #fff;
    border-radius: 7px;
    -webkit-box-shadow: 0 0 15px rgb(0 0 0 / 15%), 0 0 1px 1px rgb(0 0 0 / 10%);
    box-shadow: 0 0 15px rgb(0 0 0 / 15%), 0 0 1px 1px rgb(0 0 0 / 10%);
}



.prover-modal-box-in .ar-list .list{
    display: block;
    width: 100%;
    padding:0px 7px 0px 7px;
}

.prover-modal-box-in .ar-list .list .inlist{
    display: flex;
    position: relative;
    width: 100%;
    border-bottom: 1px solid #ddd;
    padding: 10px 0px 10px 7px;
    white-space: nowrap;
}

.prover-modal-box-in .ar-list .list:last-child .inlist{
    border-bottom: 0px;
}

.prover-modal-box-in .ar-list .list .inlist .l-nm{
    display: flex;
    width: calc(100% - 47px);
    padding-top: 8px;
    padding-right: 10px;
    box-sizing: border-box;
    height: 36px;
    font-size: 15px;
    color: #555;
}

.prover-modal-box-in .ar-list .list .inlist .l-icon{
    display: flex;
    flex: none;
    box-sizing: border-box;
    height: 36px;
    text-align: center;
    color: #ddd;
    width: 47px;
    position: relative;
}

.prover-modal-box-in .ar-list .list .inlist .l-icon svg{
    fill: #999;
}

.prover-modal-box-in .ar-list .list .inlist:hover{
    cursor:pointer !important;
}

.prover-modal-box-in .ar-list .list .inlist:hover .l-nm{
    color: #111;
}

.prover-modal-box-in .ar-list .list .inlist:hover .l-icon svg{
    fill: #333;
}
/* END PROPER MODAL */


/* MODAL STATUS ABSEN */
.ar-modal-rel{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.modal-BotToTop{
    position: absolute;
    left: calc(50% - 210px);
    width: 420px;
    background-color: #fff;
    border: 1px solid #eee;
    box-shadow: 1px 2px 8px -1px #888;
}

.ar-modal-absen{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.modal-absen{
    width: 380px;
    left: calc(50% - 190px);
    text-align: center;
    padding: 25px 40px 10px;
    border-radius: 23px;
    margin-bottom: 12px;
}

.modal-absen[role="true"]{
    animation: BottomUp ease .5s;
    -webkit-animation: BottomUp ease .5s;
    -moz-animation: BottomUp ease .5s;
    -o-animation: BottomUp ease .5s;
    -ms-animation: BottomUp ease .5s;
    bottom: 0px;
}

.modal-absen[role="false"]{
    animation: BottomBtm ease .5s;
    -webkit-animation: BottomBtm ease .5s;
    -moz-animation: BottomBtm ease .5s;
    -o-animation: BottomBtm ease .5s;
    -ms-animation: BottomBtm ease .5s;
    bottom: -100%;
}

.modal-absen a.close{
    position: absolute;
    top: -10px;
    right: -20px;
    /* background-color: #eee; */
    box-sizing: border-box;
    padding: 8px 8px 7px 8px;
    font-size: 13px;
    line-height: 100%;
    border-radius: 4px;
    color: #333;
    z-index: 3;
}

.modal-absen .title{
    font-size: 16px;
    margin-bottom: 35px;
    color: #333;
}

.modal-absen .title b{
    color: #777;
    font-weight: normal;
    font-size: 12px;
}

.modal-absen .title .time{
    font-size: 11px;
    color: #555;
    font-weight: bold;
    margin-top: 3px;
}

.modal-absen .body{
    box-sizing: border-box;
}

.modal-absen button.cmd-submit{
    width: 100%;
    border-radius: 23px;
    margin-bottom: 20px;
    padding:12px 15px;
    box-sizing: border-box;
    box-shadow: 1px 2px 4px -1px #888;
    font-weight: bold;
    font-size: 12px;
    position: relative;
}

.modal-absen button.cmd-submit .label{
    color: #d8d8d8;
    font-weight: normal;
    padding-left: 4px;
}

.modal-absen button.cmd-submit[disabled="disabled"] .label{
    color: #fff !important;
}

.modal-absen button.cmd-submit .ic{
    position: absolute;
    right: 15px;
    top: 13px;
    font-size: 16px;
}

.modal-absen button.cmd-submit .ics{
    color: #fff;
    display: none;
}

.modal-absen button.cmd-submit[aria="true"] .ics{
    display: block;
}

.modal-absen button.in{
    background-color: rgb(11, 170, 11);
    border: 0px;
    color: #fff;
}

.modal-absen button.in[disabled="disabled"]{
    background-color: rgb(215, 241, 215) !important;
    background-color: rgb(197, 196, 196) !important;
    color: #ccc !important;
    color: #777 !important;
    box-shadow: none;
}

.modal-absen button.out{
    background-color: rgba(255, 166, 0, 0.952);
    border: 0px;
    color: #fff;
}

.modal-absen button.out[disabled="disabled"]{
    background-color: rgba(240, 225, 198, 0.952) !important;
    color: #ccc !important;
    box-shadow: none;
}

.ar-modal-absen .ar-absen-screen{
    display: block;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
    z-index: 5;
    background-color: #636363;
    display: none;
}

.ar-modal-absen[aria-role="true"] .ar-absen-screen{
    display: block;
}

.ar-modal-absen .ar-absen-screen .iner{
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.ar-modal-absen .ar-absen-screen .iner .media-screen{
    display: block;
    width: 100%;
    height: 100%;
    /* background-color: aqua; */
    position: relative;
}


.ar-modal-absen .ar-absen-screen .iner .media-alert{
    display: block;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
    display: none;
}

.ar-modal-absen .ar-absen-screen[aria-role="true"] .iner .media-alert{
    display: block;
}

.ar-modal-absen .ar-absen-screen .iner .media-alert .arin{
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.ar-modal-absen .ar-absen-screen .iner .media-alert .arin .msg{
    box-sizing: border-box;
    padding:35px 20px;
    color: #111;
    position: relative;
    display: block;
}

.ar-modal-absen .ar-absen-screen .iner .media-alert .arin .msg a.close{
    position: absolute;
    right: 18px;
    top: 18px;
    font-size: 14px;
}

.ar-modal-absen .ar-absen-screen .iner .media-alert .arin .msg .ttl{
    color: rgb(13, 180, 13);
    font-size: 16px;
    margin-bottom: 15px;
}

.ar-modal-absen .ar-absen-screen .iner .media-alert .arin .msg .ic{
    font-size: 36px;
    color: rgb(23, 204, 23);
}

.ar-modal-absen .ar-absen-screen .iner .media-screen-loading{
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    text-align: center;
}


.ar-modal-absen .ar-absen-screen .iner .media-screen-loading img{
    width: 90px;
}

.modal-absen .ar-field{
    display: block;
    margin-bottom: 20px;
}

.modal-absen .ar-field .btsfld{
    height: 1px;
    margin: 10px 0px;
    position: relative;
}

.modal-absen .ar-field .btsfld.br{
    background-color: #ddd;
    margin: 20px 0px;
}

.modal-absen .ar-field textarea{
    border: 1px solid #ddd;
    resize: none;
    width: 100%;
    box-sizing: border-box;
    padding:8px 12px;
    outline: none;
    height: 80px;
    margin-bottom: -6px;
}

.modal-absen .ar-field textarea[disabled="disabled"]{
    color: #bbb;
}

.modal-absen .ar-field select{
    width: 65%;
    height: 32px;
    border: 1px solid #ddd;
    padding: 0px 5px;
    background-color: #fff;
}

.modal-absen .ar-field textarea:focus, .modal-absen .ar-field select:focus{
    border-color: rgb(132, 175, 243);
    outline: none;
}

.modal-absen .ar-field.tx-l{
    text-align: left;
}

.modal-absen .ar-field.tx-l .in span.tx{
    color: green;
}

.modal-absen .ar-field.tx-l .out span.tx{
    color: orange;
}

.modal-absen .ar-field .ar-file{
    display: none;
    position: relative;
    width: 100%;
}
.modal-absen .ar-field .ar-file[role="true"]{
    display: block;
}

.modal-absen .ar-field .ar-file a.btn-selected{
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 10px 15px;
    display: block;
    position: relative;
    overflow: hidden;
}

.modal-absen .ar-field .ar-file a.btn-selected[role="on"]:before{
    content: '';
    left: 0px;
    top: 0px;
    position: absolute;
    background-color: rgba(255,255,255, .68);
    display: block;
    width: 100%;
    height: 100%;;
    z-index: 2;
}

.modal-absen .ar-field .ar-file a.btn-selected[role="on"]:after{
    content: '';
    right: 6px;
    top: calc((100% - 30px) / 2);
    width: 30px;
    height: 30px;
    background-image: url('/assets/svg/loading.blue.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    z-index: 4;
}

.modal-absen .ar-field .ar-file a.btn-selected[aria-role="false"] span{
    color: #ddd;
}

.modal-absen .ar-field .ar-file .ic{
    transform: rotate(-45deg);   
}

.modal-absen .ar-field .ar-file .lbl-name{
    box-sizing: border-box;
    padding-left: 20px;
    font-size: 12px;
    line-height: 100%;
}

.modal-absen .ar-field .ar-file .lbl-name .label-upload.green{
    color: rgb(16, 179, 16);
}

/* end modal absen */
/* END MODAL STATUS ABSEN */

.zmdtri{
    position: relative;
    display: inline-block;
}

.mdtri{
    font-size: 10px;
    color: rgba(247, 38, 38, 0.705);
}

.mdtri:before{
    content:"*)";
    font-weight: bold;
}

.mdtri.l{
    position: absolute;
    left: -10px;
    top: 0px;
}

.mdtri.r{
    position: absolute;
    right: -8px;
    top: 0px;
}

/* COL GROUP */
.area-col-group{
    display: block;
}

.col-group{
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

.col-group .col-left{
    margin-bottom: 0px;
    display: inline-block;
}

.col-group .col-right{
    margin-left: auto;
}

.area-col-group .col-group{
    /* margin-bottom: 3px; */
}

.area-col-group .col-group:last-child{
    margin-bottom: 0px;
    /* background-color: rgb(245, 248, 251); */
}

.area-col-group.group-br-bottom .col-group{
    border-bottom: 1px dashed #ccc;
    padding: 0px 8px 5px 8px;
    margin-bottom: 3px;
    box-sizing: border-box;
}

.area-col-group.group-br-bottom .col-group:last-child{
    margin-bottom: 0px;
    border-bottom: 0px;
    padding-bottom: 0px;
}
/* END COL GROUP */

/* FORM GROUP */
.input-group-addon, .input-group-btn, .input-group .form-control {
    display: table-cell;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.input-group-addon, .input-group-btn {
    /* width: 1% !important; */
    white-space: nowrap;
    vertical-align: middle;
}

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    /* font-family: 'Glyphicons Halflings'; */
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: unset !important;
}
/* END FORM GROUP */

/* TABLE STATIC */

.table-static{
    display: block;
}

/* .table-static tr th{
    display: block;
} */

/* table .th-col, table .td-col{
    padding: 10px 8px;
    line-height: 16px;
    line-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    color: #444;
    position: relative;
}

.table-static th{
    background-color: #ccc;
}  */

/* END TABLE STATIC */

.d-inline-block{
    display: inline-block;
}

/* ANIMATE */
@keyframes BottomUp {
    0% {
        bottom:-100%;
    }
    100% {
        bottom:0px;
    }
}

@keyframes BottomBtm {
    0% {
        bottom:0px;
    }
    100% {
        bottom:-100%;
    }
}

@keyframes bottomUp{
    0% {
        bottom:-100%;
    }
    100% {
        bottom:0px;
    }
}

@keyframes bottomToBot{
    0% {
        bottom:0px;
    }
    100% {
        bottom:-100%;
    }
}