* { box-sizing: border-box; }
select { -webkit-appearance:none; }
.tippy-tooltip { font-family: robotoCondensed; font-size: 13px; }
body { font-family: roboto; font-size: 13px; margin: 0; padding: 0; overflow: hidden; line-height:  150%; background-color: #fff; }
a:link, a:visited { color: #3f51b5 ; text-decoration: none; outline: none; }
a:hover { color: #fa4122; }
dt { color: #505050; font-family: robotoBold; }
dd { overflow: hidden; }
sup { position: absolute; top: -5px; right: -8px; color: #cc0001; padding: 0 5px; border-radius: 50%; font-size: 12px; font-family: robotoBold; }
.fancy-scroll::-webkit-scrollbar { width: 5px; /*height: 5px;*/ }
.fancy-scroll::-webkit-scrollbar-thumb { background: #d4d4d4; }
.fancy-scroll::-webkit-scrollbar-track { background: transparent; }
.show-in-phone { display: none; }
div.header { margin: 15px 0 15px 0; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAYAAABS3WWCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NEQ5RDgxQzc2RjQ5MTFFMjhEMUNENzFGRUMwRjhBRTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NEQ5RDgxQzg2RjQ5MTFFMjhEMUNENzFGRUMwRjhBRTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0RDlEODFDNTZGNDkxMUUyOEQxQ0Q3MUZFQzBGOEFFNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0RDlEODFDNjZGNDkxMUUyOEQxQ0Q3MUZFQzBGOEFFNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvXFWFAAAAAYSURBVHjaYvj//z8D0/Pnz/8zgFgAAQYAS5UJscReGMIAAAAASUVORK5CYII=) repeat-x scroll 0 10px; }
div.header span { font-family: robotoBold; font-size: 15px; color: #505050; padding: 0 15px 0 0; background-color: #fff; }
#login-box { margin-top: 100px; background-color: #fff; width: 370px; margin: 100px auto 0 auto; border-radius: 5px; padding-bottom: 10px; border-bottom: #e8e8e8 3px solid; overflow: hidden; }
span.user-name { font-family: robotoBold; font-size: 16px; display: block; padding: 5px 0;}
span.date-label { color: #999; font-size: 13px; font-family: robotoCondensedLight; }
i { vertical-align: middle; margin: 0 0 3px 0; }
i.more { padding: 10px; cursor: pointer; }
i.blog {background-color: #707070; color: #fff !important; border-radius: 50%; line-height: 24px;}
div.inner { padding: 0 25px; }
div.detail-text { margin: 15px 0 20px 10px; border-left: #e8e8e8 5px solid; padding: 5px 15px; font-size: 15px; line-height: 160%; }
#app-logo { text-align: center; padding: 20px 0 0 0; }
#app-logo img { max-width: 70%; }
#work-area { overflow: auto; }
.page-content { /*overflow: hidden;*/ padding: 30px; min-height: 500px; position: relative; }
h3.page-title i { vertical-align: middle; margin: 0 5px 3px 0; color: #505050; }

.inner-page-top { height: 60px; width: 100%; background-color: #fff; border-bottom: #d4d4d4 1.5px solid; }

#popup-title { background-color: #f5f5f5; padding: 15px; border-bottom: #d4d4d4 1px solid; }
#popup-title i { vertical-align: middle; margin: 0 5px 3px 0; }
#popup-title label { font-family: robotoBold; font-size: 16px; }
#popup-inner { padding: 30px; overflow: auto;    }
#popup-footer { position: absolute; width: 100%; left: 0; bottom: 0; border-top: #d4d4d4 1px solid; padding: 15px 10px; background-color: #f5f5f5; }

.modal-inner { padding: 25px; background-color: #fff; }
.modal-button-set { padding: 15px; border-top: #d4d4d4 1px solid; }

#left-col { float: left; background-color: #f5f5f5; height: 100%; position: relative; }
#menu-col { float: left; width: 300px; /*overflow-y: scroll;*/ }
#menu-col a { color: #505050; text-decoration: none; display: block; }
#menu-col ul { margin: 30px 20px; }
#menu-col ul li { padding: 8px 15px 5px 15px; font-family: robotoBold; font-size: 14px; color: #707070; border-radius: 3px; margin-bottom: 4px; }
#menu-col ul li:hover { background-color: #eaeaea; cursor: pointer; }
#menu-col ul li.selected { background-color: #3f51b5; color: #fff; }
#menu-col ul li.selected:hover { background-color: #3e4a90; }
#menu-col i { vertical-align: middle; margin-right: 12px; }

.parent { position: relative; }
.parent .sub { position: absolute; left: 100%; width: 100%; top: 0; display: none; z-index: 100; -webkit-box-shadow: 0px 2px 21px 0px rgba(0,0,0,0.47);
-moz-box-shadow: 0px 2px 21px 0px rgba(0,0,0,0.47);
box-shadow: 0px 2px 21px 0px rgba(0,0,0,0.47);
background-color: #eaeaea;
min-width: 250px;
}
.parent:hover > .sub { display: block; }
.sub ul { padding: 0; margin: 0 !important; background-color: #eaeaea; }
.sub ul li { padding: 0 !important; }
.sub ul li a { display: block; padding: 13px 15px; }
.sub ul li a:hover { background-color: #0066cc; color: #fff !important; }

#close-menu { bottom: 10px; text-align: center; position: absolute; width: 50px; left: 5px; }
#close-menu i { padding: 8px; color: #707070; }
#close-menu i:hover { cursor: pointer; background-color: #d4d4d4; padding: 8px; border-radius: 50%; }

#icon-col { width: 52px; float: left; background-color: #3f51b5; color: #fff; position: relative; }
#icon-col a { color: #fff; }
#icon-col ul li { text-align: center; margin: 5px 0; padding: 5px 0; }
#icon-col i { padding: 8px; border-radius: 50%; }
#icon-col i:hover { cursor: pointer; background-color: #303f9f; color: #fff;  }
#icon-col i.selected { cursor: default; background-color: #303f9f; }
#icon-col .hide-menu { bottom: 10px; text-align: center; position: absolute; width: 100%; left: 0; }
#icon-col .v-tooltip .tooltiptext.right { top: 5px; }

td.action i { color: #505050; font-size: 18px; padding: 5px; }
td.action i:hover { color: #fff; background-color: #3f51b5; cursor: pointer; border-radius: 3px; }
td.action i.disabled { color: #e8e8e8 !important; }
td.action i.disabled:hover { cursor: default; background-color: transparent; }
.inline-panel { padding: 0px 20px 5px 20px; border-radius: 3px; background-color: #f9f9f9; }
.top-panel { position: absolute; top: 20px; right: 20px; z-index: 1000; }

.pagination-container { padding-top: 15px; border-top: #d4d4d4 1px solid; }
ul.pagination { float: right; }
.pagination li { float: left; border-left: #d4d4d4 1px solid; border-top: #d4d4d4 1px solid; border-bottom: #d4d4d4 1px solid;}
.pagination li a { display: block; padding: 5px 10px; }
.pagination li:first-child { border-radius: 3px 0 0 3px; }
.pagination li:last-child { border-right: #d4d4d4 1px solid; border-radius: 0 3px 3px 0; }
.pagination li a:hover { background-color: #f9f9f9; }
.pagination li.active { background-color: #eee; }
.pagination-button { overflow: hidden; margin: 0 4px; border-radius: 2px; }
.pagination-button i { line-height: 36px; vertical-align: middle; margin-bottom: 0; padding: 0px 5px; color: #707070; }
.pagination-button:hover { cursor: pointer; background-color: #3f51b5; }
.pagination-button:hover i { color: #fff; }
i.icon-button { cursor: pointer; vertical-align: middle; padding: 12px; font-size: 18px; }
i.icon-button.inline { margin-left: -42px; }

.status { cursor: default; padding: 6px 10px 5px 10px; border-radius: 3px; font-size: 12px; }
.status.publish { background-color: #009900; color: #fff; }
.status.wait { background-color: #87508d; color: #fff; }
.status.denied { background-color: #cc0001; color: #fff; }

.avatar { border-radius: 50%; overflow: hidden; }
.avatar.size-90 { width: 90px; height: 90px; }
.avatar.size-72 { width: 72px; height: 72px; }
.avatar img { width: 100%; }

.dashboard-box { float: left; width: 50%; padding-right: 15px; margin-bottom: 20px; }
.inner-top { padding: 15px; }
.inner-left { float: left; border-right: #d4d4d4 1px solid; border-left: #d4d4d4 1px solid; overflow: auto; }
ul.user-list { margin: 0; padding: 0; }
ul.user-list li { position: relative; float: left; line-height: 26px; margin: 10px; border: #e8e8e8 1px solid; padding: 15px; overflow: hidden; border-radius: 5px; border-bottom: #eac6bc 3px solid; width: 200px; }
ul.user-list li:hover { cursor: pointer; background-color: #f5f5f5; border-bottom: #9cc39f 3px solid; }
ul.user-list li div { position: absolute; right: 0; top: 10px; border: #d4d4d4 1px solid; }
ul.user-list li span { font-family: robotoBold; display: block; }
.profile-img { background-repeat: no-repeat; background-size: cover; background-position: center center; }
.radio-button { background-color: #f5f5f5; color: #242424; padding: 10px 20px; border-radius: 3px; }
.radio-button:hover { cursor: pointer; background-color: #e8e8e8; color: #0066cc; }
.radio-button.selected { background-color: #3f51b5; color: #fff; }
.panel { margin: 20px 0 40px 0; background-color: #f9f9f9; padding: 20px; }

.row-agent-success { background-color: #fbe5d7; }
.row-qc-ok { background-color: #ecf7ec; }
.row-qc-fail { background-color: #f5e3e3; }
.cell-sale:hover { background-color: #e8e8e8; cursor: pointer; }

.sidenav { height: 100%; width: 0; overflow: auto; position: fixed; z-index: 1100; top: 0; left: 0; background-color: #fff; overflow-x: hidden; transition: 0.5s;  }
.sidenav.open { width: 600px; }
#sidenav-content { overflow: hidden; padding: 30px; }
.sidenav.right { left: inherit; right: 0; }
#main { transition: margin-right .5s; position: relative; }
#main.nav-open { margin-right: 600px; }
#golge { background-color: #2b3258; opacity: 0.4; z-index: 90; position: absolute; width: 100%; height: 100%; }
#sidenav-close-icon { position: absolute; right: 0; top: 0; color: #242424; cursor: pointer; padding: 10px; }
.section-header { margin-bottom: 20px; border-bottom: #e8e8e8 1.25px solid; position: relative; height: 32px; }
.section-header label { cursor: pointer; font-family: robotoBold; font-size: 14px; background-color: #fff; position: absolute; left: 0; top: 3px; padding: 15px 15px 0 0; color: #3f51b5;}
table.regular td { padding: 7px 0; }

.icon-link i { font-size: 18px; margin-right: 5px; float: left; }
.icon-link span { float: left; }
.icon-link:hover { color: #009900; }

.tab-container { height: 41px; border-bottom: #e8e8e8 1px solid; margin-bottom: 30px; }
.tab-container .tab { float: left; color: #505050; padding: 10px 20px; margin-bottom: -1.25px; font-family: robotoMedium; cursor: pointer; }
.tab-container .tab:hover { border-bottom: #d74319 2.5px solid; color: #d74319; }
.tab-container .tab.selected { color: #0066cc; border-bottom: #0066cc 2.5px solid; cursor: default; }

.user-cover { background-color: #3f51b5; color: #fff; }
.user-detail-table { overflow: hidden; margin-top: 40px; padding: 20px; }
.user-profile-panel {overflow: hidden; }
.user-profile-panel .profile-img { position: absolute;top: 20px;left: 20px; }
.user-profile-panel h4 { margin-left: 130px; }

.employee-card-image { position: absolute; right: 0px; top: 10px; }
.table-add-icon { position: absolute; top: 4px; left: 0; }
.tippy-bubble { cursor: default; font-size: 16px !important; }
.criteria-container { position: absolute; right: 10px; top: 15px; }
tr.marked td { text-transform: uppercase; }
#criteriaPanel .v-fields { min-height: 71px; }
.popup-top-panel { padding: 10px 20px; border-bottom: #d4d4d4 1px solid; background-color: #f5f5f5; }
.check-list-container { width: 800px; }
.v-custom-check {
    border-radius: 4px;
    background-color: #f5f5f5;
    color: #707070;
    margin: 0 8px 8px 0;
    display: inline-block;
    padding: 4px 8px; 
    cursor: pointer;
}

.v-custom-check:hover {
    background-color: #e8e8e8;
}

.v-custom-check.active {
    background-color: #009900;
    color: #fff;
}

.copyright { overflow: hidden; text-align: center; padding: 10px; font-size: 13px; color: #666; }

.main-menu, .sub-menu { overflow: hidden; padding: 10px 15px; cursor: default; border-radius: 6px; font-family: robotoBold; }
.main-menu { background-color: #f2f2f2; margin: 0 0 5px 0; }
.main-menu:hover { background-color: #eaeaea; }
.sub-menu { background-color: #f9f9f9; margin: 0 0 5px 20px; }
.sub-menu:hover { background-color: #f2f2f2; }
.main-menu label, .sub-menu label { line-height: 26px; }
.main-menu label.order-num, .sub-menu label.order-num { color: #999; margin-right: 8px; }
.main-menu i.action, .sub-menu i.action { float: right; padding: 5px; cursor: pointer; margin: 0 0 0 5px; border-radius: 3px; font-size: 16px; }
.main-menu i.action:hover, .sub-menu i.action:hover { color: #fff; background-color: #0066cc; }

.image-box { position: relative; overflow: hidden; margin: 5px; height: 150px; border: #e8e8e8 3px solid; border-radius: 5px; float: left; }
.image-box:hover { border: #0066cc 3px solid; cursor: pointer; }
.image-box img { height: 150px; }
.image-box div { position: absolute; bottom: 20px; left: 0px; width: 100%; text-align: center; }
.image-box div i { background-color: #242424; color: #fff; border-radius: 50%; padding: 5px; margin: 2px; }
.image-box div i:hover { background-color: #ffcc00; color: #242424; }

.inner-nav { border: #d4d4d4 1px solid; overflow: hidden; background-color: #fff; border-radius: 5px; margin: 20px 0; }
.inner-nav ul { list-style: none; }
.inner-nav li { font-size: 15px; list-style: none; float: left; padding: 10px 20px; border-right: #d4d4d4 1px solid; }
.inner-nav li:hover { background-color: #f2f2f2; cursor: pointer; }
.inner-nav li.selected { background-color: #3f51b5; color: #fff; cursor: default; font-weight: bold; }
form.outer { border: #d4d4d4 1px solid; padding: 10px 20px; background-color: #f9f9f9; }

/* TELEFON */
@media (max-width: 767px) {
    .sidenav.open { width: 100%; }
    #main.nav-open { margin-right: 100%; }
    .show-in-phone { display: inherit; }
    .hide-in-phone { display: none; }
    #mobile-menu-icon { position: absolute; padding: 10px; z-index: 1000; right: 0px; top: 5px; }
    #left-col { width: 100%; display: none; }
    #left-col.show { display: block; }
    #icon-col, #close-menu { display: none; }
    #menu-col { width: 100%; overflow: auto; }
    #login-box { width: 90%; border: #d4d4d4 1px solid; margin-top: 50px; }
    .dashboard-box { float: none; width: 100%; padding-right: 0; margin-bottom: 20px; }
    #top-bar { display: none; position: fixed; left: 0; top: 0; width: 100%; padding: 10px 15px 0 15px; overflow: hidden; background-color: #f5f5f5; border-bottom: #d4d4d4 1px solid; }
    #top-bar img { height: 45px; }
    #criteriaPanel div.v-fields.to-left, #criteriaPanel div.el.to-left { float: none; }
    #criteriaPanel input, #criteriaPanel select { min-width: 100%; }
    #criteriaPanel #startDate, #criteriaPanel #name { margin-bottom: 10px; }
    #criteria-button {width: 100%; margin-top: 10px; text-align: center;} 
    .daily-sale { float: none !important; margin: 0 !important; width: 100% !important; }   
    .row.sale { padding-right: 15px !important; }
    .row.sale label { float: right; display: block; line-height: 26px; }
    .maas-row.mobile { margin-top: 30px; background-color: #f5f5f5; border-radius: 8px; padding: 10px 20px; }
    .maas-row.mobile .row { overflow: hidden; margin-bottom: 10px; padding-top: 10px; border-top: #d4d4d4 1px solid; }
    .maas-row.mobile label { font-weight: bold; float: left; }
    .maas-row.mobile span { float: right; }
    .check-list-container { width: 100%; }
    .criteria-container.pdt { overflow: hidden; position: unset; float: none; right: unset; top: unset; width: 100%; margin-top: 60px; }
}
/* TABLET DIKEY */
@media only screen and (width : 768px) {
    
}

/* TABLET YATAY */
@media only screen and (width : 1024px) {
    
}

/* ALL MOBILE */
@media only screen and (max-width : 1024px) {
}