*{
    font-family:"Times New Roman", Times, serif;
}

iframe #cameraSource{display:none;}
 .login-container .input-div > label {
    color:#888;
    font-size:18px;
    font-weight:bold;
}
 .login-container .extra > label,.login-container .extra a {
    font-family:Arial !important;
}
 .user-dashboard *{
    font-family:Arial !important;
}
 #divMainMenu,#divMainMenuList{
    color:#fff !important;
    background:#159BD7 !important;
}
 #divMainMenu td{
    color:#fff !important;
    background: transparent !important;
}
 #divMainMenuList .mainMenu .mainMenu-logo > img{
    width: 120px;
    height: auto;
    padding: 0;
    filter: grayscale(100%) brightness(1%) invert(1);
}
 #divMainMenuList .mainMenu tr:not(:first-child) img{
    height:20px;
}
 #divMainMenuList .mainMenu tr:nth-child(2) td>img{
    filter:invert(1);
}
 #divMainMenuList .mainMenu tr:not(:first-child):not(:last-child):hover td{
    background:#fff !important;
    color:#222 !important;
}
 #divMainMenuList .mainMenu tr:nth-child(2):hover td>img{
    filter: invert(0);
}
 #divMainMenuList .mainMenu tr:hover td>img{
    filter: invert(1);
}
 #divMainMenu_bg{
     background: rgba(0,0,0,0.2);
     position: absolute;
     opacity: 0;
     transition: opacity 1s;
}
 .menuLogout{
     margin-top: 30px;
     padding: 10px 20px;
     border-radius: 20px;
     border: none;
     cursor: pointer;
     background: #fff;
     font-weight: bold;
}
 #rightFrameHeader{
     background: rgb(255,255,255);
     background: linear-gradient(180deg, rgba(255,255,255,1) 50%, rgba(239,239,239,1) 100%);
     height:70px;
     padding-left: 100px;
     transition: height 1s;
     color: transparent;
     border-bottom: 1px solid rgba(0,0,0,0.1);
}
 #rightFrame_button{
    top: 18px;
    left: 20px;
    z-index: 999999;
    height: auto;
    width: auto;
}
 #rightFrame_logo{
    position:absolute;
    top:20px;
    margin-left:-60px;
    left: 50%;
    z-index: 999999;
}
 #rightFrame_logo img{
    width:120px;
    height:auto;
    padding:0;
}
 #divMainMenu{
    box-shadow:0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    z-index: 999999;
}
 #divMainMenu td{
    background:#fff;
    color:#888;
    border-color:transparent;
}
 #divMainMenuList{
    background:#fff;
}
 #rightFrame_profile{
    position:absolute;
    top:23px;
    right:20px;
    display:flex;
    align-items:center;
    z-index: 999999;
    padding:5px;
}
 .profile img{
    width:15px;
    height:16px;
}
 .burger-nh{
    cursor:pointer;
}
 .burger-nh div {
     width: 25px;
     height: 3px;
     border-radius: 3px;
     background-color: #159BD7;
     margin: 4px;
}
 .three-dots{
    margin: 5px 15px;
}
 .three-dots div{
    width:5px;
    height:5px;
    background-color:#159BD7;
    margin:4px 0;
     border-radius:50%;
     cursor:pointer;
}
 .greeting{
     position: relative;
     width: 100%;
     margin-top: 0px;
     z-index: 99;
}
 .greeting .container{
     width:100%;
     padding: 10px;
     display: flex;
     background: #159BD7;
}
 .greeting .container label{
    font-size:25px !important;
}
 .greeting .container label:not(:nth-child(2)){
    color:#000;
    font-weight:bold;
}
 .greeting .container label:nth-child(2){
    color:#fff;
    padding-left:4px;
}
 .annoucement {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding-bottom: 50px;
}
 .annoucement .container{
     width: 90%;
     height: 180px;
     background: #eee;
     margin-top: -100px;
     border-radius: 20px;
     box-shadow: 0px 12px 20px 0px rgb(0 0 0 / 16%), 0px 15px 10px 0 rgb(0 0 0 / 12%);
   	 position: relative;
}
 .annoucement .bg{
     background: rgb(238,238,238);
     background: linear-gradient(180deg, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%);
     width: 100%;
     height: 120px;
    /*border-radius: 0px 0px 20px 20px;
    */
}
.annoucement .content{height:100%;width:100%;}
 .annoucement .slide{
    width:100%;
    height:100%;
    vertical-align:middle;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content: center;
}
 .prev, .next {
     cursor: pointer;
     margin-top: 75px;
     width: auto;
     color: black;
     font-weight: bold;
     font-size: 18px;
     transition: 0.6s ease;
     border-radius: 0 3px 3px 0;
     user-select: none;
     position: absolute;
}
 .prev {left:15px;}
 .next {right:15px;}

 .prev img, .next img{
    height:30px;
    width: 25px;
}
 .prev:hover, .next:hover {
}
 .dots{
     text-align: center;
     height: 25px;
     display: flex;
     align-items: center;
     width: 100%;
     justify-content: center;
   	 position: absolute;
   	 bottom: 0;
   	 margin-bottom: 15px;
}
 .dot {
     cursor: pointer;
     height: 10px;
     width: 10px;
     margin: 0 2px;
     background-color: #bbb;
     border-radius: 50%;
     display: inline-block;
     transition: background-color 0.6s ease;
}
 .active, .dot:hover {
     background-color: #717171;
     height:15px;
     width:15px;
}
 .page-title{
     position: absolute;
     margin-top: -80px;
     z-index: 100;
     display: flex;
     width: 100%;
     justify-content: center;
}
 .page-title .container {
     padding: 15px 25px;
     border-radius: 15px;
     text-align: center;
     background: #fff;
     box-shadow: 9px 8px 15px 0 rgb(0 0 0 / 16%), 10px 8px 8px 0 rgb(0 0 0 / 12%);
}
 .page-title h1{
    color: #888;
     margin:0;
}
 .user-info{
    font-family: Arial;
}
 .user-info #greet{
    color:#fff;
    font-size:20px;
    font-weight:bold;
}
 .user-info #staffName{
    font-size:30px;
    font-weight:bold;
    white-space:pre-wrap;
    text-transform:capitalize;
}
 .user-info #staffID{
    font-size:15px;
}
 .user-info #staffPost{
    font-size:15px;
    text-transform:capitalize;
}
 .user-dashboard{
     position:relative;
     width:100%;
     min-height:500px;
     background:#fff;
     display: flex;
     flex-direction: column;
     align-items: center;
}
 .user-dashboard .title{
     width:100%;
     padding: 10px;
     display: flex;
     background: #159BD7;
}
 .user-dashboard .title h1{
    color:#fff;
    margin:0;
    padding: 0px 20px;
}
 .user-dashboard > .container{
     width: 98%;
}
 .user-dashboard .col2{
     display: grid;
     margin-top: 15px;
     width: 100%;
     grid-template-columns: 49.5% 49.5%;
     grid-auto-rows: minmax(300px, auto);
     gap:1%;
}
 .user-dashboard .col1{
     display: grid;
     margin-top: 15px;
     width: 100%;
     grid-template-columns: 100%;
     grid-auto-rows: minmax(300px, auto);
     gap: 20px;
}
 .col1,.col2 div{
    background:none;
}
 @media screen and (max-width: 680px) {
     .user-dashboard .col2{
         grid-template-columns: 100%;
         gap: 2%;
    }
     .col1 .chart-wrap .container{
        width:92%;
    }
}
 .outletFilter{
     background: #159BD7;
     width: 100%;
     height: 150px;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .outletFilter .container{
    width: 90%;
    display: flex;
    flex-direction: column;
}
 .outletFilter .container > div:last-child{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
 .outletFilter .container > div{
    margin-bottom:10px;
}
 .topBar-outletList {
    height:30px;
    margin:10px 0px;
}
 .topBar-outletList .container{
    margin: 0 20px;
}
 .topBar-outletList .container div:first-child{
    float:left;
}
 .topBar-outletList .container div:last-child{
    float:right;
}
 .topBar-outletList .title h1{
    margin:0;
    color:#888;
    font-size:18px;
}
 .topBar-outletList .view-type {
    display: flex;
}
 .topBar-outletList .view-type div{
    height:20px;
    width:20px;
    border-radius:4px;
    margin:0px 4px;
    background-color:#159BD7;
}
 .outletList-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
}
 .outletList{
     display: grid;
     margin: 10px;
     grid-template-columns: 165px 165px;
     grid-auto-rows: minmax(160px, auto);
     gap: 20px;
}
 .outletList .outlet-lv{
   	 display: flex;
     flex-direction: column;
     align-items: center;
     background: #fff;
     border-radius: 5px;
     overflow: hidden;
     position:relative;
     /*box-shadow: 6px 8px 6px 0px rgb(0 0 0 / 20%);*/
   	 box-shadow: 0px 5px 6px 2px rgb(0 0 0 / 20%);
     cursor: pointer;
}
 .outlet-lv img{
    height:auto;
    width:100px;
   padding:5px;
}
 .outlet-lv .caption{
     height: 50px;
     background: #159BD7;
     margin-top: -5px;
     color: #fff;
     font-weight: bold;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     padding: 5px 10px;
     white-space: pre-wrap;
   	 position: absolute;
     bottom: 0;
   	 width: 100%;
}
.outlet-lv .caption span{padding:5px;}
.fromTo-date-filter{
    display: flex;
    height: 30px;
  	width: 100%;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 10px;
}
.fromTo-date-filter .separator{height:30px;width:2px;background:#aaa;}
.fromTo-date-filter label{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.fromTo-date-filter label > div{
    padding: 0px 5px;
  	width:30px;
    height: 30px;
    display: flex;
    align-items: center;
}
.fromTo-date-filter input[type="date"]{
  border:none;
  width:100px;
}


.routePlan{
	display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.routePlan .container {
    width: 90%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.routePlan-lv {
    background: #e9e9e9;
    width: 100%;
    margin: 0px 10px 15px 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 20%);
}

.routePlan-lv > img {
    width: 80px;
    height: auto;
    padding: 5px;
    margin: 10px;
    border-radius: 5px;
    border: 1.5px solid #159BD7;
}

.routePlan .detail {padding: 5px 10px;margin: 10px 0px;display: flex;flex-direction: column;}
.routePlan .detail h2{font-size: 16px;margin: 0;margin-bottom: 10px;}
.routePlan .detail span{color: #ACACAC;font-size: 14px;margin-bottom: 5px;display: flex;align-items: center;}
.routePlan .detail span > img{margin-right: 5px;height: 14px;width: auto;}
.routePlan .btnList {margin-top:10px;}
.routePlan .btnList button{
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 10px;
  	border: none;
    width: 80px;
}
.routePlan .btnList button{color: #ACACAC;border: 1px solid #ACACAC;}

 .yellowBox-wrap{
    width: 100%;
    padding: 15px;
    display:flex;
    flex-direction:column;
    align-items:center;
}
 .yellowBox-wrap .container{
     width: 90%;
     padding: 50px 20px;
     background: #fcc42c;
     border-radius: 50px;
     display: flex;
     align-items: center;
     flex-direction: column;
     box-shadow: inset -5px 0px 20px 0px #fff, -3px 8px 8px 0 rgb(0 0 0 / 12%);
}
 .yellowBox-wrap .card{
    display: flex;
    flex-direction: column;
    align-items: center;
}
 .greyBox-wrap .card{
    display: flex;
    flex-direction: row;
    align-items: center;
}
 .yellowBox-wrap .title, .greyBox-wrap .title{
    font-size: 20px;
}
 .greyBox-wrap .title{
    margin: 20px 0px;
}
 .yellowBox-wrap .value{
    font-size: 40px;
    font-weight: bold;
    color: #fff;
}
 .greyBox-wrap .value{
    font-size: 40px;
    font-weight: bold;
    color: #000;
}
 .yellowBox-wrap hr{
     background: #fff;
     border: 1px solid #FFF;
     width: 100%;
     opacity: 0.5;
     margin: 40px 0px;
}
 .greyBox-wrap {
    width:auto;
    /*padding:15px*/;
    display:flex;
    flex-direction:column;
    align-items:center;
}
 .greyBox-wrap .container{
    width:90%;
    padding:20px;
    background:#eee;
    border-radius: 20px;
}
 .greyBox-wrap .chart{
    height:300px;
    display:flex;
    justify-content: flex-end;
}
 .greyBox-wrap .chart > div{
    /*width:50%;
    */
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
 .greyBox-wrap h2, .greyBox-wrap label{
    font-size: 25px;
}
 .greyBox-wrap canvas{
    margin-right:-30px;
}
 .noBox-wrap {
    width:100%;
    padding:15px;
    display:flex;
    flex-direction:column;
    align-items:center;
}
 .noBox-wrap .container{
    width:100%;
    padding: 50px 20px;
    background:transparent;
    border-radius: 50px;
}
 .noBox-wrap .title{
    width:100%;
    font-size:30px;
    color:#888;
    text-align:center;
    margin-bottom: 20px;
}
 .noBox-wrap .chart{
    height:300px;
    display:flex;
    justify-content: center;
}
 .noBox-wrap .chart > div{
    width:500px;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
 .chart-wrap{
    width:100%;
    height:700px;
    display:flex;
    flex-direction:column;
    align-items:center;
}
 .chart-wrap .container{
    width:96%;
    padding:15px;
    background:#eee;
    border-radius:20px;
    overflow: hidden;
}
 h1.title{
    padding: 10px 20px;
    color:#888;
    font-weight: bold;
}
 .chart-bar{
    width:98%;
    height:50px;
    margin-bottom:20px;
    display:flex;
    justify-content: space-between;
}
 .chart-title{
    float:left;
    display: flex;
    align-items: center;
}
 .chart-title span{
    padding: 0px 20px;
    font-size: 25px;
    color: #888;
}
 .chart-option{
    float:right;
    width:50%;
    max-width:275px;
    font-size: 15px;
    color: #888;
}
 .chart{
    width:100%;
    height:400px;
}
 .outletFilter .filArea,.outletFilter .filDate{
    display:flex;
    height:30px;
    align-items:center;
    justify-content:center;
    background:#fff;
    border-radius:10px;
}
 .outletFilter .filArea .separator{
    width:4px;
    height:20px;
    background:#aaa;
     margin: 5px;
}
 .outletFilter .filter-option{
    width:100%;
    font-size: 15px;
    color: #888;
}
 .outletFilter .filter-option > input{
    border: none;
    margin: 10px;
    outline:none;
    width: 85%;
}
 .outletFilter .filter-option .select{
    height:28px;
    border-radius: 10px;
}
 .outletFilter .filter-option .select:focus{
    margin-top:20px;
}
 .outletFilter .filter-option .select:focus{
    min-height:120px;
}
 .outletFilter .filter-option .option{
    min-height:28px;
    border-radius: 10px;
    color:#000;
}
.select > input:checked + label{
     order: 1;
     z-index:2;
     background:#fff;
     border-top:none;
     position:relative;
     height: 51px;
}

 .outletFilter .filDate{
    padding:0px 10px;
    width:50%;
    margin-left: 0px;
}
 .outletFilter .filDate input{
    width:100%;
    border:none;
    outline:none;
}
/*.outletFilter .filter-option > img{
    width: 15px;
    height: 15px;
    right: 0px;
    top: 7px;
    z-index: 2;
    position:absolute;
}
 */
 .outletFilter .filSearch{
    display:flex;
    height:30px;
    align-items:center;
    justify-content:center;
    background:#fff;
    border-radius:10px;
    padding: 0px 10px;
    width:50%;
}
 .outletFilter .filSearch div{
    width:25px;
     height:25px;
     background:#fff;
}
 .outletFilter .filSearch input{
    border: none;
    width: 100%;
    font-size;
    outline:none;
}
 .outletFilter .filSearch input::placeholder{
    font-style: italic;
}
 .chart-option2{
    float:right;
    font-size: 15px;
    color: #888;
}
 .chart-option2 span{
    color:#000;
    padding-right:10px;
}
 .chart-option2 span,.option-wrap2{
    display:inline-block;
}
 .option-wrap2{
    background: rgba(255,255,255,0.8);
    padding: 8px 0px;
    border-radius: 20px;
}
 .selectop2t{
    display:none;
}
 .selectop2t:checked + label{
    background: #159BD7;
    color: #fff;
}
 .select2 .option2{
    padding: 8px 12px;
    border-radius: 18px;
}
 .option2:hover{
    cursor: pointer
}
 .toggleFilter{
    height: auto;
    width: 30px;
    padding: 10px;
    border-radius: 15px;
    cursor: pointer;
}
 .option-wrap{
    width: 100%;
    position: relative;
}
 .select {
     display:flex;
     flex-direction: column;
     position:relative;
     width:100%;
     height:51px;
     cursor: pointer;
     background: #fff;
}
 .option {
     padding:0 30px 0 10px;
     min-height:51px;
     display:flex;
     align-items:center;
     background:#fff;
    /*border-top:#222 solid 1px;
    */
     position:absolute;
     top:0;
     width: 100%;
     pointer-events:none;
     order:2;
     z-index:1;
     transition:background .4s ease-in-out;
     box-sizing:border-box;
     overflow:hidden;
     white-space:nowrap;
     cursor: pointer;
}
 .option:hover {
     background: rgba(0,0,0,0.02);
     border: 1px solid #eee;
}
 .tgf{
    height:100%;
    width:100%;
}
 .tgf .select{
     min-height: 155px;
     max-height: 155px;
     overflow: overlay;
     position: absolute;
     border-radius: 15px;
     box-shadow: 0px 4px 5px 0 rgb(0 0 0 / 16%);
     border:none;
    outline:none;
}
 .tgf .select .option {
     position:relative;
     pointer-events:all;
}
 .select:focus{
     min-height: 155px;
     max-height: 155px;
     overflow: overlay;
     position: absolute;
     border-radius: 15px;
     box-shadow: 0px 4px 5px 0 rgb(0 0 0 / 16%);
     border:none;
    outline:none;
}
 .select:focus .option {
     position:relative;
     pointer-events:all;
}
 .select input {
     opacity:0;
     position:absolute;
     left:-99999px;
}
.select input:checked + label {
     order: 1;
     z-index:2;
     background:#fff;
     border-top:none;
     position:relative;
     height: 51px;
}

/*.select input:checked + label:after {
    /*content:'';
     width: 0;
     height: 0;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     border-top: 5px solid #333;
     position:absolute;
     right:10px;
     top:calc(50% - 2.5px);
     pointer-events:none;
     z-index:3;
    */
}
/*.select input:checked + label:before {
     position:absolute;
     right:0;
     height: 40px;
     width: 40px;
     content: '';
     background: transparent;
}
*/
/*Outlet Main*/
 .title {
}
 .title h1{
    font-size:20px;
    padding:0px 10px;
}
 .outlet-address{
    background: #159BD7;
}
 .outlet-address .container{
    height: 70px;
    padding: 10px;
    position: relative;
}
 .outlet-address label{
    font-weight: bold;
}
 .outlet-address .container .val{
    width:200px;
     color:#fff;
}
 .outlet-img{
     position: absolute;
     right: 15px;
     bottom: 15px;
     width: 100px;
     height: 100px;
     border-radius: 5px;
     overflow: hidden;
}
 .outlet-img img{
    width:100px;
    height:100px;
    
}
 .outlet-img .outlet-stat{
     background: #fff;/*rgba(255,255,255,0.7);*/
     position: absolute;
     width: 100px;
     padding: 5px 0px;
     bottom: 0;
     text-align: center;
   	 height: 12px;
}
 .sub-title {
    background:#eee;
    padding:10px;
}
 .sub-title h2{
    margin:0;
}
 .outlet-attd{
    padding:10px
}
 .outlet-attd .container{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
 .outlet-attd button {
     border: 1px solid #159BD7;
     outline: none;
     padding: 5px;
     background: #fff;
     color: #159BD7;
     border-radius: 5px;
     width:24%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
   	 position: relative;
}
 .outlet-attd button:first-child > img{
    filter:invert(55%) sepia(51%) saturate(3179%) hue-rotate(169deg) brightness(97%) contrast(84%);
}
 .outlet-attd button > img {
     width: 15px;
     height: auto;
     margin-left: 5px;
}

 .outlet-attd .checked{
     background: #159BD7;
     color: #fff;
 }
.outlet-attd .checked:first-child > img{
     filter: unset;
}
.outlet-attd .checked:not(:first-child) > img{
     filter: grayscale(1) contrast(26);
}

.outlet-attd button .bg{display:none;}
 .outlet-attd .checked .bg{
	width: 100%;
    height: 100%;
    padding: 0px;
    position: absolute;
    border: 1px solid transparent;
    border-radius: 5px;
    background: rgba(200,200,200,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
  }

 .outlet-tasks ul, .outlet-details ul{
    padding:0px 15px;
}
 .outlet-tasks li{
    display:flex;
    align-items:center;
    justify-content:flex-start;
   	position: relative;
    cursor: pointer;
}
 .outlet-tasks li > label{
    width:100%;
    padding:10px;
    cursor: pointer;
}
 .outlet-details li {
    padding: 0px 10px;
}
 .outlet-details li .label{
    display: flex;
    align-items: center;
}
 .outlet-details li:first-child .label img{
    filter: grayscale(1) contrast(8);
}
 .outlet-details li .label label{
    width: 100%;
    padding: 10px;
    color: #aaa;
}
 .outlet-details li .value{
   	height: 20px;
}
 .sub-title-wBack {
     background: #eee;
     padding: 15px;
     display: flex;
     align-items: center;
   	 position: relative;
}
 .sub-title-wBack button {
     padding: 0;
     border: none;
     background: none;
     position: absolute;
     margin-top: -2px;
   	 display: flex;
    cursor: pointer;
}
 .sub-title-wBack h2 {
     margin: 0;
     width: 100%;
     text-align: center;
}
 a.btn-callNow {
     float: right;
     background: #08A0A4;
     color: #fff;
     border: none;
     border-radius: 8px;
     padding: 4px 4px;
     display: flex;
     align-items: center;
     justify-content: space-evenly;
     width: 85px;
     margin-top: -15px;
}
 .camera{
    display:flex;
    justify-content:center;
}
 .camera .container{
     border: 1px solid #d8d8d8;
     border-radius: 10px;
     overflow: hidden;
   	 width:100%;
   	display: flex;
    flex-direction: column;
    position: relative;
}
 .camera .camera-box{
    width: 100%;
   	height: 270px;
    margin: 0;
}
 .camera .camera-box img{
    width: 100%;
    height: 100%;
    object-fit: fill;
}
 .camera .btnList{
    display:flex;
    align-items: center;
}
 .camera .btnList .separator{
    width: 3px;
    height: 35px;
    background: #d8d8d8;
}
 .camera button {
     width: 100%;
     background: #fff;
     border: none;
     padding: 15px 30px;
     display: flex;
     align-items: center;
     justify-content: space-around;
}

 button.btn-sync {
    float: right;
    background: #08A0A4;
    color: #fff;
    border: 1px solid transparent;
	border-radius: 4px;
    padding: 2px 6px;
    margin-top: -20px;
    margin-right: 10px;
   	font-weight: bold;
}

 .synced {
   border: 1px solid #08A0A4 !important;
   color: #08A0A4 !important;
   background: transparent !important;
}

label.list-radioBtn{
  display: flex;
  align-items: center;
  font-weight: bold;
}

.list-radioBtn input[type="radio"] {
-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    width: 15px;
    height: 15px;
    padding: 2px;
    background-clip: content-box;
    border: 2px solid #bbbbbb;
    border-radius: 50%;
  position: absolute;
    right: 25px;
}

.list-radioBtn input[type="radio"]:checked {
	background-color: #08A0A4;
	border-color: #08A0A4;
}

.list-radioBtn img {
    margin-left: 10px;
}

.task-btn-action{
    display: flex;
    justify-content: center;
    margin: 20px 0px; 
}

button.btn-save{
  background: #159BD7;
  color: #fff;
  padding: 10px 50px;
  border: none;
  border-radius: 25px;
}

.sub-title-wIcon{
  display: flex;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  background: #eee;
  padding: 10px;
  position: relative;
}

.sub-title-wIcon .btn-add{
  position: absolute;
  top:20px;
  right:20px;
  background: none;
  outline: none;
  color: #08A0A4;
  border: 1px solid #08A0A4;
  border-radius: 10px;
  padding: 5px 10px;
}


.sub-title-wIcon img{
  margin: 0px 10px; 
}

.btnList-msl {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.btn-msl {
padding: 10px 20px;
    border-radius: 5px;
    margin-right: 15px;
    background: #aaa;
    cursor: pointer;
}

.success{background:#08A0A4;color:#fff !important;}
.danger{background:#D91111;color:#fff !important;}
.warning{background:#F2A341;color:#fff !important;}
.theme-color{background:#159BD7;color:#fff !important;}

.greyOut{filter: contrast(0.5) brightness(0.5);}

.product-list li {
  display: flex;
  flex-direction: column;
  padding: 5px 0px;
  position: relative;
}

.product-list li > label {
    width: 100%;
    padding: 10px 0px;
}

.product-list.priceCheck li > label {
    width: 100%;
	padding: 15px 0px 15px 5px;
}

.priceCheck input.price{
	background: transparent;
    color: #fff;
    border: none;
    min-width: 25px;
    max-width: 30px;
    text-align: right;
    padding: 5px 10px;
}

.box-qty {
    display: flex;
    padding: 4px 8px;
    border-radius: 5px;
    position: absolute;
    right: 6px;
    top: 11px;
}

.tool-msl{padding: 0px 10px;position:relative;height:35px;margin:10px 0px;}
.tool-msl .option-wrap{width:275px !important;}
.tool-msl > button{
  position: absolute;
  right: 10px;
  height: 35px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

.dd-option{position: absolute;z-index: 1;}
.dd-option .select{background:#fff; border-radius:10px;height:35px;}
.dd-option .select .option{background:#fff; border-radius:10px;min-height:35px;}
.dd-option .option-wrap{width:300px;}
.dd-option .option{padding:0px 10px;}
.dd-option .option img{display:none;}
.dd-option .select:focus{
  min-height: 105px;
  max-height: 105px;
}
.dd-option .select input:checked + label{
  background:#eee;
  height: 35px;
  display: flex;
  justify-content: space-between;
  color: #777;
}
.dd-option .select input:checked + label > img{
  display: block; 
}


#popUpConfirm{
  border:none !important;
  border-radius:10px;
  overflow:hidden;
  box-shadow:5px 6px 5px 0px rgb(0 0 0 / 10%);
}
#popUpConfirm .IOSForm table{height: auto !important;}
#popUpConfirm .IOSForm_Header{
  background: linear-gradient(rgb(255, 255, 255) 50%, rgb(239, 239, 239) 100%);
  color: #555;
}
#popUpConfirm.IOSForm_body{padding:0px !important;}

.popUpConfirm .content {
    min-height: 42%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popUpConfirm .btnList {
    display: flex;
    border-top: 2px solid #eee;
}

.popUpConfirm .btnList .separator{
    width: 3px;
    height: 30px;
    background: #eee;
}

.popUpConfirm .btnList button {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: none;
}

iframe{
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
}

iframe #conVideo{width:100%;}

/* The Modal  */
.popUp {
  display: none; 
  position: fixed; 
  z-index: 1;
  padding-top: 0; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: none;
  background-color:rgba(0,0,0,0.2);;
}
      
/* popUp Content */
.popUp-container{
  background-color: #fafafc;/*#fdfdfd*/
  margin: auto;
  padding: 5px 10px;
  border: 1px solid #d8d8d8;
  border-radius: 5px;
  /*width: 430px;*/
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}

.popUp-head{
    display: flex;
    align-items: center;
    padding: 0px 10px;
    margin: -5px -10px;
  background: linear-gradient(180deg, rgba(255,255,255,1) 50%, rgba(239,239,239,1) 100%);
}

.popUp-body{
	display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80px;
    min-width: 200px;
  	flex-direction: column;
}

.popUp-body > div{
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.confirmation{
  flex-direction: column;
}
.confirmation .btnList{
	display: flex;
    flex-direction: row;
    margin-top: 20px; 
      width: 100%;
}

.popUp label{font-size: 18px;font-weight: bold;}
.popUp hr{margin: 5px -10px;border: none; height: 2px;}
.popUp button {
    margin: 5px 10px;
    padding: 4px 8px;
    width: 100%;
    border: 1px solid #d8d8d8;
    border-radius: 5px;
}
.popUp button:hover {
    filter: contrast(0.9);
}
.popUp-body input{
 width:100%;
 border: 1px solid #d8d8d8;
 margin: 5px;
}

.symbol-check > span, .symbol-xmark > span{
    margin-top: -4px;
    margin-left: -1px;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
}
.progress{flex-direction: column;}
.progress > span{padding: 5px;
}

.progress .symbol-check, .progress .symbol-xmark{
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    color: #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    padding: 5px;
}

.alert .symbol-check, .alert .symbol-xmark{
display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    border-radius: 50%;
    color: #fff;
    padding: 2px;
    margin-left: 10px;
}

.alert .symbol-check{background: #4B974B;}
.alert .symbol-xmark{background: #FF5959;}

/* The Close Button */
.popUp-close {
  width: 5%;
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.popUp-close:hover, .popUp-close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

button{cursor:pointer;}

.promo-list li {
    border: none;
}

.promo-item {
    display: flex;
    background: #eee;
    padding: 15px 10px;
    border-radius: 10px;
  width: 100%;
}

.promo-desc {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 130%;
}

.promo-desc > button {
    border: 1px solid #888;
    border-radius: 10px;
    padding: 5px;
    width: 100px;
}

.promo-img {
    width: 50%;
    min-width: 150px;
      display: flex;
    justify-content: flex-end;
}

.promo-img img {
    width: auto;
    height: 100px;
}
.promo-entry li{position: relative;}
.promo-entry .container {
    display: flex;
    flex-direction: column;
}

.promo-entry .container > div {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.promo-entry label.title {
    margin: 10px 15px;
    padding: 10px;
    border-radius: 10px;
    background: #eee;
    font-weight: bold;
  	position: relative;
}

.promo-entry textarea {
  	margin: auto;
    width: 90%;
    border: 2px solid #eee;
    border-radius: 10px;
    height: 100px;
}

label.title > img.chevron{
    position: absolute;
    right: 10px;
}

.share-form .chevron-slide{
    height: 0px;
  	overflow: hidden;
  	transition: all .5s ease-in-out;
}

.share-form .chevron-slide.slide-down{
    height: auto !important;
}

.photo-grid-upload{
    display: flex;
    flex-direction: column;
    margin: 15px;
    padding: 0px 10px;
    background: #eee;
    border-radius: 10px;
}

.photo-grid-upload label.title2{
padding: 10px 0px;
}
.photo-grid-upload .container{
display: grid;
    grid-template-columns: 100px 100px;
    grid-auto-rows: minmax(120px,auto);
    margin-bottom: 20px;
  gap: 15px;
}

.photo-grid-upload .card{
	border: 1px solid #aaa;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;  
}
.photo-grid-upload .card > img.upload{
position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-x{
  position: absolute;
  width: 20px;
  height: 20px;
  right: -8px;
  top: -8px;
  z-index:1;
}

.photo-grid-upload .card label{
	color: #aaa;
    border: 1px solid #aaa;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px; 
}



.product-price-check{
  background: #e9e9e9;
  margin: 20px;
  padding: 20px;
  border-radius: 10px
}

.product-price-check .product-detail{
    display: grid;
    grid-template-columns: 60% 40%;
}
.product-price-check .product-detail > div:first-child{display: flex;flex-direction: column;align-items: center;}
.product-price-check .product-detail .name{font-weight:bold; font-size:16px;}
.product-price-check .product-detail .barcode{height:95px;}
.product-price-check .product-detail .product-img{display: flex;justify-content: center;}
.product-price-check .product-detail .product-img img{margin-right: -15px;}
.product-price-check .product-detail > div:last-child{display: flex;justify-content: center;}
.product-price-check .product-detail .last-price{font-size: 14px;}
.product-price-check .product-detail .price{display: flex;align-items: center;position: relative;margin: 10px 0px;}
.product-price-check .product-detail .price span{
  font-size: 25px;
  font-weight: bold;
  position: absolute;
  left: 20px; 
  /*color: #777;*/
}
.product-price-check .product-detail .price input{
  width: 80px;
  padding: 15px 10px 15px 65px;
  border: none;
  border-radius: 5px;
  font-size: 25px;
  font-weight: bold;
  outline: none;
}

.numPad{
  display: flex;
  justify-content: center;
  background: #ddd;
  padding: 20px;
  border-radius: 10px;
}

.numPad .container{
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-column-gap: 50px;
  grid-row-gap: 20px;
}

.numPad .container > div{
  background: #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: bold;
  box-shadow: 0px 3px 10px 1px rgb(0 0 0 / 20%);
}

.numPad .container > div.blue{background:#159BD7;color:#fff;}

/*@media screen and (max-width: 720px), screen and (max-height: 420px) {
  .camera-box{height:500px;}
}*/

@media (orientation: landscape) and (max-width: 900px)  {
  .camera .container{
    display: flex;
    flex-direction: row;
    position: relative;
  }
  .camera .camera-box{height:365px;}
  .camera .btnList {
    position: absolute;
    transform: rotate(270deg);
    right: 0;
    bottom: 149px;
  }
  .camera button{
	width: 100%;
    border: none;
    display: flex;
    height: 36px;
    align-items: center;
    justify-content: space-around; 
  }
}

.promo-desc span {
    position: absolute;
    bottom: 25px;
    left: 130px;
}

.share-form .title > span{
  padding-left:5px;
}

.share-form .txtarea{
  padding: 0px 15px;
  width: 100%;
}

.spinner{
  height: 30px;
  margin-top: 0px;
  margin-left: 0px;
}
.spinner .bg{
  position: absolute;
  z-index: 1;
  height: 30px;
  width: auto;
}
.spinner .ring{
    margin-top: -3px;
    margin-left: 0px;
    position: absolute;
    z-index: 1;
    height: 36px;
  	width: auto;
}

.spinAnimate {
  animation-name: spin;
  animation-duration: 500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

.loader{
	position: relative;
    width: 100%;
    /*height: 700px;*/
    z-index: 999999;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader .loader-bar{
	position: relative;
    background: #159BD7;
    display: flex;
    height: 20px;
    border-radius: 13px;
    margin: 10px 0px;
    padding: 4px 6px;
    align-items: center;
    overflow: hidden;
}

.loader .bar{
	position: absolute;
    background: #fff;
    width: 50px;
    height: 20px;
    border-radius: 10px;
}

.barAnimate {
  animation-name: bar-loading;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

@keyframes bar-loading {
    from {width:20px;}
    to {width:95%;}
}