/* 
BEAKERAPPS, LLC
DATE: 4/1/2017
VERSION: 1.0
*/

/* Fonts */
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900);

/* Global -------------------------------------------------------------------------------------------------------------------- */
*,*:after, *:before {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; transition: all 150ms ease-in-out; -webkit-transition: all 150ms ease-in-out;}
html {margin: 0; padding: 0;}
body {margin: 0; padding: 0; width: 100%; height: 100%; background: #FBFBFB;  cursor: default;}
body, input, textarea, button, select, a { font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #444; font-size: 12px; line-height: 14px; font-weight: 400; -webkit-font-smoothing: antialiased; -webkit-appearance: none; outline: none;}
a {text-decoration: none;}
ul {margin: 0; padding: 0; list-style: none;}
table { border-collapse:collapse; empty-cells: show; }

/* Common -------------------------------------------------------------------------------------------------------------------- */
.no-ani { transition: none; -webkit-transition: none; }
.no-scroll{ overflow: hidden; }
.spacer { float: left; width: 100%; height: 50px; }
.ta-left { text-align: left; }
.ta-center { text-align: center; }
.ta-right { text-align: right; }
.right { float: right; }
.left { float: left; }
.color-green { color: #00B259; }
.color-red { color: #EC1D23; }
.color-orange { color: #FF9326; }
.color-gray { color: #CCCCCC; }
.color-black { color: #000000; }
.overflow-visible { overflow: visible !important; }
.note { float: left; width: 100%; border-top: 1px solid #EEEEEE; padding: 20px; margin-top:30px; color: #CCCCCC; text-align: center; }

.loader { display: none; float: left; width: 100%; padding: 50px; text-align: center; }
.loader img { display: inline-block; width: 70px; height: 70px; }
.loader.loading { display: block; }

.loader-fullscreen { display: none; float: left; position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 100%; background: rgba(255,255,255,0.9); }
.loader-fullscreen img { float: left; width: 100px; height: 100px; position: fixed; top: 50%; left: 50%; margin: -50px 0 0 -50px; }
.loader-fullscreen.loading { display: block; }

.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }

.px-5 { width: 5px; }
.px-10 { width: 10px; }
.px-15 { width: 15px; }
.px-20 { width: 20px; }
.px-25 { width: 25px; }
.px-30 { width: 30px; }
.px-35 { width: 35px; }
.px-40 { width: 40px; }
.px-45 { width: 45px; }
.px-50 { width: 50px; }
.px-55 { width: 55px; }
.px-60 { width: 60px; }
.px-65 { width: 65px; }
.px-70 { width: 70px; }
.px-75 { width: 75px; }
.px-80 { width: 80px; }
.px-85 { width: 85px; }
.px-90 { width: 90px; }
.px-95 { width: 95px; }
.px-100 { width: 100px; }
.px-150 { width: 150px; }
.px-200 { width: 200px; }

.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }
.mt-35 { margin-top: 35px; }
.mt-40 { margin-top: 40px; }
.mt-45 { margin-top: 45px; }
.mt-50 { margin-top: 50px; }
.mt-55 { margin-top: 55px; }
.mt-60 { margin-top: 60px; }
.mt-65 { margin-top: 65px; }
.mt-70 { margin-top: 70px; }
.mt-75 { margin-top: 75px; }
.mt-80 { margin-top: 80px; }
.mt-85 { margin-top: 85px; }
.mt-90 { margin-top: 90px; }
.mt-95 { margin-top: 95px; }
.mt-100 { margin-top: 100px; }

.mr-5 { margin-right: 5px; }
.mr-10 { margin-right: 10px; }
.mr-15 { margin-right: 15px; }
.mr-20 { margin-right: 20px; }
.mr-25 { margin-right: 25px; }
.mr-30 { margin-right: 30px; }
.mr-35 { margin-right: 35px; }
.mr-40 { margin-right: 40px; }
.mr-45 { margin-right: 45px; }
.mr-50 { margin-right: 50px; }
.mr-55 { margin-right: 55px; }
.mr-60 { margin-right: 60px; }
.mr-65 { margin-right: 65px; }
.mr-70 { margin-right: 70px; }
.mr-75 { margin-right: 75px; }
.mr-80 { margin-right: 80px; }
.mr-85 { margin-right: 85px; }
.mr-90 { margin-right: 90px; }
.mr-95 { margin-right: 95px; }
.mr-100 { margin-right: 100px; }

.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-25 { margin-bottom: 25px; }
.mb-30 { margin-bottom: 30px; }
.mb-35 { margin-bottom: 35px; }
.mb-40 { margin-bottom: 40px; }
.mb-45 { margin-bottom: 45px; }
.mb-50 { margin-bottom: 50px; }
.mb-55 { margin-bottom: 55px; }
.mb-60 { margin-bottom: 60px; }
.mb-65 { margin-bottom: 65px; }
.mb-70 { margin-bottom: 70px; }
.mb-75 { margin-bottom: 75px; }
.mb-80 { margin-bottom: 80px; }
.mb-85 { margin-bottom: 85px; }
.mb-90 { margin-bottom: 90px; }
.mb-95 { margin-bottom: 95px; }
.mb-100 { margin-bottom: 100px; }

.ml-5 { margin-left: 5px; }
.ml-10 { margin-left: 10px; }
.ml-15 { margin-left: 15px; }
.ml-20 { margin-left: 20px; }
.ml-25 { margin-left: 25px; }
.ml-30 { margin-left: 30px; }
.ml-35 { margin-left: 35px; }
.ml-40 { margin-left: 40px; }
.ml-45 { margin-left: 45px; }
.ml-50 { margin-left: 50px; }
.ml-55 { margin-left: 55px; }
.ml-60 { margin-left: 60px; }
.ml-65 { margin-left: 65px; }
.ml-70 { margin-left: 70px; }
.ml-75 { margin-left: 75px; }
.ml-80 { margin-left: 80px; }
.ml-85 { margin-left: 85px; }
.ml-90 { margin-left: 90px; }
.ml-95 { margin-left: 95px; }
.ml-100 { margin-left: 100px; }

.min-px-100 { min-width: 100px; }
.min-px-200 { min-width: 200px; }
.min-px-300 { min-width: 300px; }
.min-px-400 { min-width: 400px; }
.min-px-500 { min-width: 500px; }
.min-px-600 { min-width: 600px; }
.min-px-700 { min-width: 700px; }
.min-px-800 { min-width: 800px; }
.min-px-900 { min-width: 900px; }
.min-px-1000 { min-width: 1000px; }


.error-handling { display: block; position: fixed; bottom: -70px; left: 0; z-index: 9999; width: 100%; height: 70px;  }
.error-handling.error { background: #EC1D23; -ms-transform: translate3d(0px, -70px, 0px); -webkit-transform: translate3d(0px, -70px, 0px); transform: translate3d(0px, -70px, 0px); }
.error-handling.success { background: #03D122; -ms-transform: translate3d(0px, -70px, 0px); -webkit-transform: translate3d(0px, -70px, 0px); transform: translate3d(0px, -70px, 0px); }
.error-handling .text { float: left; padding: 20px; line-height: 30px; font-size: 16px; color: #FFFFFF; }
.error-handling .close-btn { float: right; margin: 15px 15px 0 0; height: 40px; width: 40px; background: url("../images/layout/close-white@4x.png") center center no-repeat; background-size: 50px 50px; cursor: pointer; }
.error-handling .close-btn:hover { background-color: rgba(255,255,255,0.2); }


.inline-loader { display: inline-block; vertical-align: middle; margin: 0 5px 0 0; border: 3px solid #EEEEEE; border-radius: 50%; border-top: 3px solid #DD6C10; border-right: 3px solid #DD6C10; width: 16px; height: 16px; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; }

@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }


/* Sidebar */
.sidebar { position: fixed; top: 0; left: 0; width: 200px; height: 100%; background: #1B1F23; overflow: hidden; }
.sidebar .top { float: left; width: 100%; height: calc(100% - 80px); overflow-x: hidden; overflow-y: auto; }
.sidebar .top .logo { float: left; width: 100%; height: 80px; border-bottom: 1px solid #333C44; }
.sidebar .top .logo img { float: left; width: 200px; height: 80px; }
.sidebar .top .logo:hover { background-color: #333C44; }
.sidebar .top .search { position: relative; float: left; width: 100%; height: 60px; border-bottom: 1px solid #333C44; }
.sidebar .top .search .input { float: left; width: calc(100% - 60px); height: 60px; padding: 0 0 0 20px; background: transparent; border: none; color: #FFFFFF; font-size: 16px; font-weight: 500; }
.sidebar .top .search .input::-webkit-input-placeholder { color: #808099; }
.sidebar .top .search .button { float: right; width: 60px; height: 60px; background: url("../images/layout/search@4x.png") center center no-repeat; background-size: 60px 60px; border: none; cursor: pointer; }
.sidebar .top .search .button:hover { background-color: #333C44; }
.sidebar .top .menu { float: left; width: 100%; }
.sidebar .top .menu li { position: relative; float: left; width: 100%; }
.sidebar .top .menu li:first-child { border-bottom: 1px solid #333C44; }
.sidebar .top .menu li .arrow { display: none; position: absolute; top: 20px; right: 0; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right:10px solid #FBFBFB; }
.sidebar .top .menu li .link { float: left; width: 100%; height: 60px; padding: 0 20px 0 20px; font-size: 16px; line-height: 60px; color: #FFFFFF; font-weight: 500; }
.sidebar .top .menu li .link:hover { background-color: #333C44; }
.sidebar .top .menu li.selected .arrow { display: block; }
.sidebar .top .menu li.selected .link { color: #DD6C10; }
.sidebar .top .menu li.sub-selected .arrow { display: block; }

.sidebar .bottom { float: left; width: 100%; height: 80px; border-top: 1px solid #333C44; }
.sidebar .bottom .account { position: relative; float: left; width: 100%; height: 80px; padding: 20px; cursor: pointer; }
.sidebar .bottom .account:hover { background-color: #333C44; }
.sidebar .bottom .account .image { position: relative; float: left; width: 40px; height: 40px; background: transparent; }
.sidebar .bottom .account .image .noti{ z-index: 2; position: absolute; top: -4px; right: 0px; float: left; display: none; background: #DD6C10; width: 18px; height: 18px; margin: 0; vertical-align: middle; font-size: 10px; line-height: 18px; font-weight: 900; color: #FFFFFF; text-align: center; border-radius: 50%; }
.sidebar .bottom .account .image img { float: left; width: 40px; height: 40px; border-radius: 50%; border:1px solid rgba(255,255,255,0.2); overflow: hidden; object-fit: cover; object-position: 50% 50%; }
.sidebar .bottom .account .name { float: left; width: 70px; font-size: 16px; line-height: 40px; color: #FFFFFF; font-weight: 500; margin: 0 10px 0 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .bottom .account .icon { float: left; width: 20px; height: 40px; background: url("../images/layout/options-blue@4x.png") center center no-repeat; background-size: 40px 40px; }
.sidebar .bottom .account .dropdown { display: none; position: absolute; bottom: 81px; left: 0; float: left; width: 100%; background: #333C44; }
.sidebar .bottom .account .dropdown li { position: relative; float: left; width: 100%; border-bottom: 1px solid #535E69; }
.sidebar .bottom .account .dropdown li:last-child { border-bottom: 1px solid #535E69; }
.sidebar .bottom .account .dropdown li a { float: left; width: 100%; font-size: 16px; line-height: 60px; color: #FFFFFF; font-weight: 500; padding: 0 20px 0 20px; }
.sidebar .bottom .account .dropdown li a:hover { background-color: #434D56; }

.sidebar .bottom .account .dropdown li.system-tasks .noti{ display: none; background: #DD6C10; width: 18px; height: 18px; margin: 0 0 0 5px; vertical-align: middle; font-size: 10px; line-height: 18px; font-weight: 900; color: #FFFFFF; text-align: center; border-radius: 50%; }
.sidebar .bottom.noti-progress .account .image .noti, .sidebar .bottom.noti-progress .account .dropdown li.system-tasks .noti{ display: inline-block; animation: notiPulse 1s infinite; background: #DD6C10;  }
.sidebar .bottom.noti-success .account .image .noti, .sidebar .bottom.noti-success .account .dropdown li.system-tasks .noti{ display: inline-block; background: #00B259;  }
.sidebar .bottom.noti-failed .account .image .noti, .sidebar .bottom.noti-failed .account .dropdown li.system-tasks .noti{ display: inline-block; background: #EC1D23;  }
@-webkit-keyframes notiPulse { 0% { -webkit-box-shadow: 0 0 0 0 rgba(221, 108, 16, 0.8); } 70% { -webkit-box-shadow: 0 0 0 10px rgba(221, 108, 16, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(221, 108, 16, 0); } }
@keyframes notiPulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(221, 108, 16, 0.8); box-shadow: 0 0 0 0 rgba(221, 108, 16, 0.8); } 70% { -moz-box-shadow: 0 0 0 10px rgba(221, 108, 16, 0); box-shadow: 0 0 0 10px rgba(221, 108, 16, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(221, 108, 16, 0); box-shadow: 0 0 0 0 rgba(221, 108, 16, 0); } }
.sidebar .bottom .account.toggled { background-color: #333C44; } 
.sidebar .bottom .account.toggled .dropdown { display: block; }
.sidebar .bottom .account.toggled .image .noti { display: none !important; }


/* Page */
.page { position: absolute; top: 0; right: 0; width: calc(100% - 200px); height: 100%; overflow: hidden; background: #FBFBFB; }
.paging { float: left; width: 100%; margin-top: 40px; }
.paging .prev { float: left; height: 50px; line-height: 50px; padding: 0 20px 0 50px; margin: 0 10px 0 0; font-size: 16px; font-weight: 500; color: #333333; background: #FFFFFF; border: 1px solid #EEEEEE;  background: url("../images/layout/page-prev-arrow@4x.png") left center no-repeat #FFFFFF; background-size: 50px 50px; }
.paging .next { float: left;  height: 50px; line-height: 50px; padding: 0 50px 0 20px; margin: 0 10px 0 0; font-size: 16px; font-weight: 500; color: #333333; background: #FFFFFF;  border: 1px solid #EEEEEE;  background: url("../images/layout/page-next-arrow@4x.png") right center no-repeat #FFFFFF; background-size: 50px 50px; }
.paging .prev-none { float: left; height: 50px; line-height: 50px; padding: 0 20px 0 50px; margin: 0 10px 0 0; font-size: 16px; font-weight: 500; color: #CCCCCC; background: #FFFFFF; border: 1px solid #EEEEEE;  background: url("../images/layout/page-prev-arrow@4x.png") left center no-repeat #FBFBFB; background-size: 50px 50px; }
.paging .next-none { float: left;  height: 50px; line-height: 50px; padding: 0 50px 0 20px; margin: 0 10px 0 0; font-size: 16px; font-weight: 500; color: #CCCCCC; background: #FFFFFF;  border: 1px solid #EEEEEE;  background: url("../images/layout/page-next-arrow@4x.png") right center no-repeat #FBFBFB; background-size: 50px 50px; }

.paging .page-num { float: right; line-height: 50px; font-size: 16px; color: #333333; }



/* Mobile Nav */
.mobile-nav { display: none; position: fixed; top: 0; left: 0; z-index: 99; width: 100%; height: 60px; background: #1B1F23; }
.mobile-nav .menu-btn { float: left; width: 60px; height: 60px; background: url("../images/layout/nav-btn@2x.png") center center no-repeat transparent; background-size: 40px 40px; }
.mobile-nav .menu-txt { float: left; font-size: 17px; line-height: 60px; font-weight: 700; color: #FFFFFF; }


/* Header */
.header { position: absolute; top: 0px; left: 0px; width: 100%; height: 80px; padding: 15px 40px 15px 40px; background: #FFFFFF; border-bottom: 1px solid #EEEEEE; }
.header .left { float: left; }
.header .left .back-arrow { float: left; width: 50px; height: 50px; margin: 0 10px 0 0; background: url("../images/layout/back-arrow@4x.png") center center no-repeat #FFFFFF; background-size: 50px 50px; border: 1px solid #FFFFFF; }
.header .left .back-arrow:hover { background-color: #FFFFFF; border: 1px solid #EEEEEE; }
.header .left .title { float: left; font-size: 18px; line-height: 50px; font-weight: 500; }
.header .left .title-dropdown { position: relative; top: -1px; left: 0px; float: left; background: #FFFFFF; }
.header .left .title-dropdown .button { float: left; border: 1px solid #FFFFFF; cursor: pointer; padding: 0 15px 0 15px; }
.header .left .title-dropdown .button:hover { border: 1px solid #EEEEEE; }
.header .left .title-dropdown .button .text { float: left; font-size: 18px; line-height: 50px; font-weight: 500; }
.header .left .title-dropdown .button .arrow { display: inline-block; width: 20px; height: 20px; margin: 14px 0 0 5px; background: url("../images/layout/dropdown-arrow@4x.png") center center no-repeat #FFFFFF; background-size: 50px 50px; }
.header .left .title-dropdown .dropdown { display: none; position: absolute; top: 50px; left: 0px; z-index: 999; background: #FFFFFF; border: 1px solid #EEEEEE; width: auto !important; min-width: 100%; max-width: 300px;  }
.header .left .title-dropdown .dropdown li { float: left; border-bottom: 1px solid #EEEEEE; width: 100%; }
.header .left .title-dropdown .dropdown li:last-child { border-bottom: 0;}
.header .left .title-dropdown .dropdown li a { float: left; font-size: 18px; line-height: 50px; font-weight: 500; padding: 0 15px 0 15px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header .left .title-dropdown .dropdown li a:hover { background-color: #FBFBFB; }
.header .left .title-dropdown.toggled .button { border: 1px solid #EEEEEE; }
.header .left .title-dropdown.toggled .button .arrow { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.header .left .title-dropdown.toggled .dropdown { display: block; }

.header .right { float: right; }
.header .right .options-dropdown { position: relative; float: left; margin: 0 0 0 5px; }
.header .right .options-dropdown .button { float: left; width: 50px; height: 50px; border: 1px solid #FFFFFF; background: url("../images/layout/options-gray@4x.png") center center no-repeat #FFFFFF; background-size: 40px 40px; cursor: pointer; }
.header .right .options-dropdown .button:hover { border: 1px solid #EEEEEE; }
.header .right .options-dropdown .dropdown { display: none; position: absolute; top: 49px; right: 0px; z-index: 999; background: #FFFFFF; border: 1px solid #EEEEEE; width: auto !important; min-width: 100%; max-width: 300px;  }
.header .right .options-dropdown .dropdown li { float: left; border-bottom: 1px solid #EEEEEE; width: 100%; }
.header .right .options-dropdown .dropdown li:last-child { border-bottom: 0;}
.header .right .options-dropdown .dropdown li a { float: left; font-size: 14px; line-height: 40px; font-weight: 500; padding: 0 15px 0 15px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header .right .options-dropdown .dropdown li a:hover { background-color: #FBFBFB; }
.header .right .options-dropdown.toggled .button { border: 1px solid #EEEEEE; }
.header .right .options-dropdown.toggled .dropdown { display: block; }
.header .right .text-dropdown { position: relative; top: -1px; left: 0px; float: left; margin: 0 0 0 5px; }
.header .right .text-dropdown .button { float: left; border: 1px solid #FFFFFF; cursor: pointer; padding: 0 15px 0 15px; background-color: #FFFFFF; }
.header .right .text-dropdown .button:hover { border: 1px solid #EEEEEE; }
.header .right .text-dropdown .button .text { float: left; font-size: 14px; line-height: 50px; font-weight: 500; }
.header .right .text-dropdown .button .arrow { display: inline-block; width: 20px; height: 20px; margin: 14px 0 0 5px; background: url("../images/layout/dropdown-arrow@4x.png") center center no-repeat #FFFFFF; background-size: 50px 50px; }
.header .right .text-dropdown .dropdown { display: none; position: absolute; top: 50px; right: 0px; z-index: 999; background: #FFFFFF; border: 1px solid #EEEEEE; width: auto !important; min-width: 100%; max-width: 300px;  }
.header .right .text-dropdown .dropdown li { float: left; border-bottom: 1px solid #EEEEEE; width: 100%; }
.header .right .text-dropdown .dropdown li:last-child { border-bottom: 0;}
.header .right .text-dropdown .dropdown li a { float: left; font-size: 14px; line-height: 40px; font-weight: 500; padding: 0 15px 0 15px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header .right .text-dropdown .dropdown li a:hover { background-color: #FBFBFB; }
.header .right .text-dropdown.toggled .button { border: 1px solid #EEEEEE; }
.header .right .text-dropdown.toggled .button .arrow { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.header .right .text-dropdown.toggled .dropdown { display: block; }
.header .right .add-button { float: left; width: auto; height: 50px; font-size: 14px; line-height: 50px; font-weight: 500; color: #FFFFFF; padding: 0 45px 0 15px; margin: 0 0 0 5px; background: url("../images/layout/plus-white@4x.png") right center no-repeat #DD6C10; background-size: 50px 50px; cursor: pointer; }
.header .right .add-button:hover { background-color: #F08024; }


.header-bar { float:left; width: 100%; background: #FFFFFF; padding: 10px; margin: 0 0 10px 0; border: 1px solid #EEEEEE; }
.header-bar .title { float: left; padding: 0 0 0 10px; float: left; font-size: 18px; line-height: 40px; font-weight: 500; }
.header-bar .right .sort-text { float: left; font-size: 14px; line-height: 40px; font-weight: 500; color: #CCCCCC; margin: 0 10px 0 0; }
.header-bar .right .sort-dropdown { position: relative; float: left; margin: 0 0 0 5px; }
.header-bar .right .sort-dropdown .button { float: left; border: 1px solid #FFFFFF; cursor: pointer; padding: 0 10px 0 15px; background-color: #FFFFFF; }
.header-bar .right .sort-dropdown .button:hover { border: 1px solid #EEEEEE; }
.header-bar .right .sort-dropdown .button .text { float: left; font-size: 14px; line-height: 40px; font-weight: 500; }
.header-bar .right .sort-dropdown .button .arrow { display: inline-block; width: 20px; height: 20px; margin: 10px 0 0 5px; background: url("../images/layout/dropdown-arrow@4x.png") center center no-repeat #FFFFFF; background-size: 50px 50px; }
.header-bar .right .sort-dropdown .dropdown { display: none; position: absolute; top: 40px; right: 0px; z-index: 999; background: #FFFFFF; border: 1px solid #EEEEEE; width: auto !important; min-width: 100%; max-width: 300px;  }
.header-bar .right .sort-dropdown .dropdown li { float: left; border-bottom: 1px solid #EEEEEE; width: 100%; }
.header-bar .right .sort-dropdown .dropdown li:last-child { border-bottom: 0;}
.header-bar .right .sort-dropdown .dropdown li a { float: left; font-size: 14px; line-height: 40px; font-weight: 500; padding: 0 15px 0 15px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-bar .right .sort-dropdown .dropdown li a:hover { background-color: #FBFBFB; }
.header-bar .right .sort-dropdown.toggled .button { border: 1px solid #EEEEEE; }
.header-bar .right .sort-dropdown.toggled .button .arrow { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.header-bar .right .sort-dropdown.toggled .dropdown { display: block; }

/* Middle */
.middle { position: absolute; top: 80px; left: 0px; width: 100%; height: calc(100% - 80px); overflow-x: hidden; overflow-y: auto; }
.middle .content { float: left; width: 100%; height: auto; min-height: 100%; padding: 40px; overflow-x: auto; }
.middle .content .box { float: left; width: 100%; border: 1px solid #EEEEEE; background-color: #FFFFFF; padding: 20px; }
.middle .footer { float: left; width: 100%; height: 80px; background: #FFFFFF; border-top: 1px solid #EEEEEE; font-size: 14px; line-height: 80px; color: #CCCCCC; text-align: center; }

/* Date Table */
.table-wrapper { float: left; width: 100%; }
.data-table { float: left; width: 99.9%; margin: 0; text-align: left; table-layout:fixed; }
.data-table tr { cursor: pointer; border: 1px solid #EEEEEE; background: #FFFFFF; }
.data-table tr.noclick { cursor: default; }
.data-table tr:hover { background: #FBFBFB; }
.data-table tr:first-child { border: 0; }
.data-table tr:first-child:hover { background: #FFFFFF; cursor: default; }
.data-table.no-hover tr { cursor: default; }
.data-table.no-hover tr:hover { background: #FFFFFF; }
.data-table tr th { padding: 10px 15px 10px 15px; background: #FBFBFB; font-size: 12px; line-height: 12px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.data-table tr td { padding: 15px 20px 15px 20px; font-size: 12px; line-height: 12px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.data-table tr.highlight { background-color: #FFFBFB !important; }
.data-table tr .checkbox { float: left; width: 12px; height: 12px; margin: 0; padding: 0; }
.data-table tr .account-image { display: inline-block; width: 40px; height: 40px; background: #FFFFFF; border-radius: 50%; overflow: hidden; vertical-align: middle; }
.data-table tr .account-image  img { float: left; width: 40px; height: 40px; object-fit: cover; object-position: 50% 50%; }
.data-table tr .text-wrapper { display: inline-block; vertical-align: middle; }
.data-table tr .sub-text { display: block; margin: 5px 0 0 0; color: #CCCCCC; width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.data-table tr .item-image { float: left; height: 60px; }
.data-table a:hover { color: #DD6C10; }

.data-table .table-options { position: relative; float: right; width: 20px; height: 20px; }
.data-table .table-options .btn { position: relative; float: right; margin: -5px -5px 0 0; width: 40px; height: 30px; border: 1px solid transparent; background: url("../images/layout/options-gray@4x.png") center center no-repeat; background-size: 40px 40px; cursor: pointer; }
.data-table .table-options .btn:hover { background-color: #FFFFFF; border: 1px solid #EEEEEE; }
.data-table .table-options .options { display: none; position: absolute; top: 24px; right: -5px; z-index: 2; width: 160px; background: #FFFFFF; border: 1px solid #EEEEEE; }
.data-table .table-options .options li { float: left; width: 100%; border-bottom: 1px solid #EEEEEE; }
.data-table .table-options .options li:last-child { border-bottom: 0; }
.data-table .table-options .options li a { float: left; width: 100%; padding: 15px; }
.data-table .table-options .options li a:hover { background: #EEEEEE; }
.data-table .table-options.toggled .options { display: block; }
.data-table .table-options.toggled .btn { z-index: 3; border: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; background-color: #FFFFFF; }


.data-table tr.row-attention { animation: rowAttention 1000ms; animation-iteration-count: 2; }
@-webkit-keyframes rowAttention { 0% { background-color: #FFFFFF; } 50% { background-color: #E3E5E8; } 100% { background-color: #FFFFFF; } }
@keyframes rowAttention { 0% { background-color: #FFFFFF; } 50% { background-color: #E3E5E8; } 100% { background-color: #FFFFFF; } }



/* No Content Section */
.no-content-section { display: none; float: left; width: 100%; }
.no-content-padding { padding: 0 40px 0 40px; }
.no-content-section .heading { float: left; width: 100%; padding: 40px 0px 20px 0px; text-align: center; }
.no-content-section .drag-drop-area { float: left; width: 100%; padding: 40px; background: #FFFFFF; border: 2px dashed #EEEEEE; text-align: center; color: #CCCCCC; cursor: pointer; }
.no-content-section .drag-drop-area:hover { color: #333333; }

/* Upload Section */
.upload-content-section { display: block; float: left; width: 100%; margin: 0 0 40px 0; }
.upload-content-section .drag-drop-area { float: left; width: 100%; padding: 40px; background: #FFFFFF; border: 2px dashed #EEEEEE; text-align: center; color: #CCCCCC; cursor: pointer; }
.upload-content-section .drag-drop-area:hover, .drag-drop-area.hovered { color: #333333; border-color: #AAAAAA; }


/* Search */
.header.search { padding: 20px 40px 15px 40px; height: 140px; }
.header.search .search-bar { position: relative; float: left; width: 100%; margin: 0 0 10px 0; }
.header.search .search-bar .search-input { float: left; width: 100%; height: 50px; padding: 0 20px 0 50px; background: #FBFBFB  url("../images/layout/search-black@4x.png") left center no-repeat; background-size: 50px 50px; border: 1px solid #EEEEEE; font-size: 16px; line-height: 48px; font-weight: 500; -webkit-appearance: none; }

.header.search .search-options { float: left; width: 100%; }

.header.search .search-options .sort-dropdown { position: relative; float: left; margin: 0 10px 0 0; }
.header.search .search-options .sort-dropdown .button { float: left; border: 1px solid #FFFFFF; cursor: pointer; padding: 0 10px 0 15px; background-color: #FFFFFF; }
.header.search .search-options .sort-dropdown .button:hover { border: 1px solid #EEEEEE; }
.header.search .search-options .sort-dropdown .button .text { float: left; font-size: 14px; line-height: 40px; font-weight: 500; }
.header.search .search-options .sort-dropdown .button .arrow { display: inline-block; width: 20px; height: 20px; margin: 10px 0 0 5px; background: url("../images/layout/dropdown-arrow@4x.png") center center no-repeat #FFFFFF; background-size: 50px 50px; }
.header.search .search-options .sort-dropdown .dropdown { display: none; position: absolute; top: 40px; left: 0px; z-index: 999; background: #FFFFFF; border: 1px solid #EEEEEE; width: auto !important; min-width: 100%; max-width: 300px;  }
.header.search .search-options .sort-dropdown .dropdown li { float: left; border-bottom: 1px solid #EEEEEE; width: 100%; }
.header.search .search-options .sort-dropdown .dropdown li:last-child { border-bottom: 0;}
.header.search .search-options .sort-dropdown .dropdown li a { float: left; font-size: 14px; line-height: 40px; font-weight: 500; padding: 0 15px 0 15px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header.search .search-options .sort-dropdown .dropdown li a:hover { background-color: #FBFBFB; }
.header.search .search-options .sort-dropdown.toggled .button { border: 1px solid #EEEEEE; }
.header.search .search-options .sort-dropdown.toggled .button .arrow { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.header.search .search-options .sort-dropdown.toggled .dropdown { display: block; }


.header.search .search-options .search-button { float: right; width: 110px; height: 40px; background: #DD6C10; color: #FFFFFF; font-size: 16px; line-height: 40px; font-weight: 500; text-align: center; border: 0; -webkit-appearance: none; cursor: pointer; }
.header.search .search-options .search-button:hover { background-color: #F08024; }

.header.search .search-button-right { float: right; width: 110px; height: 40px; background: #DD6C10; color: #FFFFFF; font-size: 16px; line-height: 40px; font-weight: 500; text-align: center; border: 0; -webkit-appearance: none; cursor: pointer; }
.header.search .search-button-right:hover { background-color: #F08024; }

.middle.search { top: 140px; height: calc(100% - 140px); }

.header-bar.search { padding: 20px 40px 20px 40px;  }
.header-bar.search .search-bar { position: relative; float: left; width: calc(100% - 140px); }
.header-bar.search .search-bar .search-input { float: left; width: 100%; height: 50px; padding: 0 20px 0 50px; background: #FBFBFB  url("../images/layout/search-black@4x.png") left center no-repeat; background-size: 50px 50px; border: 1px solid #EEEEEE; font-size: 16px; line-height: 48px; font-weight: 500; -webkit-appearance: none; }

.header-bar.search .search-button-right { float: right; width: 130px; height: 50px; background: #DD6C10; color: #FFFFFF; font-size: 16px; line-height: 40px; font-weight: 500; text-align: center; border: 0; -webkit-appearance: none; cursor: pointer; }
.header-bar.search .search-button-right:hover { background-color: #F08024; }


@-webkit-keyframes ring { 0% { -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); opacity: 0.0;} 50% { opacity: 1.0;} 100% { -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); opacity: 0.0; } }
@keyframes ring { 0% { transform: scale(0.1, 0.1); opacity: 0.0;} 50% { opacity: 1.0;} 100% { transform: scale(1.2, 1.2); opacity: 0.0; } }


/* Live Stats */
.live-stats { position: absolute; top: 0; left: 0; float: left; width: 100%; height: 100%; min-height: 800px; margin: 0; border: none; overflow: hidden; }
.live-stats .top { float: left; width: 100%; height: 60px; margin: 0; background: #1B1F23; }
.live-stats .top .logo { float: left; width: 140px; height: 60px; background: url(../images/layout/logo-straight@4x.png) center center no-repeat; background-size: cover; }
.live-stats .top .title { float: left; padding: 0 20px 0 10px; font-size: 18px; line-height: 60px; margin: 0; font-weight: 500; color: #FFFFFF;}

.live-stats .top .title .ring-container { position: relative; top: -1px; right: 2px;  display: inline-block; width: 6px; height: 6px; margin: 0 5px 0 0; vertical-align: middle; }
.live-stats .top .title .ring-container .circle { position: absolute; top: 0px; left: 0px; float: left; width: 6px; height: 6px; background-color: #E90000; border-radius: 50%; }
.live-stats .top .title .ring-container .ringring { position: absolute; left: -5px; top: -5px; height: 16px; width: 16px; -webkit-animation: ring 900ms ease-out infinite; animation: ring 900ms ease-out infinite; opacity: 0.0; border: 2px solid #E90000; -webkit-border-radius: 50%;}


.live-stats .top .time-dropdown { position: relative; top: 0px; left: 0px; float: right; margin: 0; }
.live-stats .top .time-dropdown .button { float: left; border: 1px solid #FFFFFF; cursor: pointer; padding: 0 12px 0 15px; margin: 10px 10px 0 10px; background-color: #FFFFFF; }
.live-stats .top .time-dropdown .button:hover { border: 1px solid #EEEEEE; }
.live-stats .top .time-dropdown .button .text { float: left; font-size: 14px; line-height: 40px; font-weight: 500; }
.live-stats .top .time-dropdown .button .arrow { display: inline-block; width: 20px; height: 20px; margin: 10px 0 0 5px; background: url("../images/layout/dropdown-arrow@4x.png") center center no-repeat #FFFFFF; background-size: 50px 50px; }
.live-stats .top .time-dropdown .dropdown { display: none; position: absolute; top: 50px; right: 10px; z-index: 999; background: #FFFFFF; border: 1px solid #EEEEEE; width: auto !important; min-width: 100%; max-width: 300px;  }
.live-stats .top .time-dropdown .dropdown li { float: left; border-bottom: 1px solid #EEEEEE; width: 100%; }
.live-stats .top .time-dropdown .dropdown li:last-child { border-bottom: 0;}
.live-stats .top .time-dropdown .dropdown li a { float: left; font-size: 14px; line-height: 40px; font-weight: 500; padding: 0 15px 0 15px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-stats .top .time-dropdown .dropdown li a:hover { background-color: #FBFBFB; }
.live-stats .top .time-dropdown.toggled .button { border: 1px solid #EEEEEE; }
.live-stats .top .time-dropdown.toggled .button .arrow { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.live-stats .top .time-dropdown.toggled .dropdown { display: block; }
.live-stats .main-stats { float: left; width: 100%; height: 150px; padding: 20px; }
.live-stats .main-stats .stats { float: left; width: 100%; height: 100%; border: 1px solid #EEEEEE; background: #FFFFFF; }
.live-stats .main-stats .stats li { float: left; width: 50%; height: 100%; padding: 25px 0 0 0; text-align: center; }
.live-stats .main-stats .stats li:first-child { border-right: 1px solid #EEEEEE; }
.live-stats .main-stats .stats li .centered { position: relative; display: inline-block; padding: 0 0 0 65px; text-align: left; }
.live-stats .main-stats .stats li .centered .icon { position: absolute; top: 0; left: 0; float: left; margin: 0; width: 50px; height: 50px; }
.live-stats .main-stats .stats li .centered .title { float: left; clear: both; margin: 0 0 5px 0; font-size: 18px; line-height: 18px; font-weight: 400; white-space: nowrap; }
.live-stats .main-stats .stats li .centered .data { float: left; clear: both; font-size: 28px; line-height: 28px; font-weight: 500; white-space: nowrap; }
.live-stats .chart-wrapper { position: relative; float: left; display: block; width: 100%; max-width: 100%; height: calc(100% - 210px); padding: 20px; background: #FFFFFF; border-top: 1px solid #EEEEEE; overflow: hidden; overflow-x: auto; }
.live-stats .chart { position: relative; height: 100%; display: block; white-space: nowrap; text-align: center; }
.live-stats .chart li { position: relative; width: 180px; display: inline-block; height: 100%; padding: 70px 0 0px 0; }
.live-stats .chart li .bar-wrapper { position: relative; float: left; width: 100%; height: calc(100% - 180px); }
.live-stats .chart li .bar-wrapper .bar { position: absolute; bottom: 0; left: 50%; margin-left: -30px; width: 60px; min-height: 10px; background: #DDDDDD; }
.live-stats .chart li .bar-wrapper .bar .stats-info { position: relative; top: -50px; left: -40px; float: left; width: 140px; height: 60px; padding: 0; text-align: center; }
.live-stats .chart li .bar-wrapper .bar .stats-info .scans { display: block; font-size: 18px; line-height: 18px; font-weight: 500; }
.live-stats .chart li .bar-wrapper .bar .stats-info .rate { display: block; color: #333; font-size: 12px; line-height: 14px; }
.live-stats .chart li .bar-wrapper .bar .stats-info .hours { display: block; color: #999999; font-size: 12px; line-height: 14px; }
.live-stats .chart li .bar-wrapper .bar .stats-info .rate .icon { display: inline-block; width: 10px; height: 10px; margin: 0 3px 0 0; background: url("../images/layout/rate_small@2x.png") center center no-repeat; background-size: cover; vertical-align: middle; }
.live-stats .chart li .account-info { position: relative; float: left; width: 100%; height: 180px; padding: 20px 0 0 0; }
.live-stats .chart li .account-info .badge { content: attr(data-content); position: absolute; z-index: 2; top: 20px; right: 40px; width: 30px; height: 30px; background: #FFFFFF; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.20); border-radius: 50%; -webkit-border-radius: 50%; font-size: 14px; line-height: 30px; font-weight: 500; text-align: center; }
.live-stats .chart li .account-info .account-image { position: relative; display: inline-block; width: 100px; height: 100px; background: #EEEEEE center center no-repeat; background-size: cover; border-radius: 50%; overflow: hidden; vertical-align: middle; }
.live-stats .chart li .account-info .account-name { display: block; width: 100%; padding: 10px 0 0 0; font-size: 16px; line-height: 18px; }

/* Change */
.live-stats .main-stats .stats li.change .centered .icon { transform: scale(1.1); }
.live-stats .main-stats .stats li.change .centered .data { color: #DD6C10; }
.live-stats .chart li.change .bar-wrapper .bar { background: #DD6C10; }
.live-stats .chart li.change .bar-wrapper .bar .stats-info .scans { color: #DD6C10; transform: scale(1.1); }
.live-stats .chart li.change .bar-wrapper .bar .stats-info .rate { color: #DD6C10; transform: scale(1.1); }

/* Rank */
.live-stats .chart li.rank-1 .account-info .badge { background: #D4AF37; color: #FFFFFF; }
.live-stats .chart li.rank-2 .account-info .badge { background: #C0C0C0; color: #FFFFFF; }
.live-stats .chart li.rank-3 .account-info .badge { background: #9F7A34; color: #FFFFFF; }


.live-stats .chart li.rank-1 .account-info .account-image { border: 2px solid #D4AF37; }
.live-stats .chart li.rank-2 .account-info .account-image { border: 2px solid #C0C0C0; }
.live-stats .chart li.rank-3 .account-info .account-image { border: 2px solid #9F7A34; }


  

/* Dashboard */
.dash-stats { float: left; width: 70%; height: 500px; margin: 0 40px 40px 0; background: #FFFFFF; border: 1px solid #EEEEEE; overflow: hidden; }
.dash-stats .top { float: left; width: 100%; height: 60px; margin: 0; border-bottom: 1px solid #EEEEEE; }
.dash-stats .top .title { float: left; padding: 0 30px 0 30px; font-size: 18px; line-height: 60px; margin: 0; font-weight: 500;}
.dash-stats .top .time-dropdown { position: relative; top: 0px; left: 0px; float: right; margin: 0; }
.dash-stats .top .time-dropdown .button { float: left; border: 1px solid #FFFFFF; cursor: pointer; padding: 0 12px 0 15px; margin: 10px 10px 0 10px; background-color: #FFFFFF; }
.dash-stats .top .time-dropdown .button:hover { border: 1px solid #EEEEEE; }
.dash-stats .top .time-dropdown .button .text { float: left; font-size: 14px; line-height: 40px; font-weight: 500; }
.dash-stats .top .time-dropdown .button .arrow { display: inline-block; width: 20px; height: 20px; margin: 10px 0 0 5px; background: url("../images/layout/dropdown-arrow@4x.png") center center no-repeat #FFFFFF; background-size: 50px 50px; }
.dash-stats .top .time-dropdown .dropdown { display: none; position: absolute; top: 50px; right: 10px; z-index: 999; background: #FFFFFF; border: 1px solid #EEEEEE; width: auto !important; min-width: 100%; max-width: 300px;  }
.dash-stats .top .time-dropdown .dropdown li { float: left; border-bottom: 1px solid #EEEEEE; width: 100%; }
.dash-stats .top .time-dropdown .dropdown li:last-child { border-bottom: 0;}
.dash-stats .top .time-dropdown .dropdown li a { float: left; font-size: 14px; line-height: 40px; font-weight: 500; padding: 0 15px 0 15px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-stats .top .time-dropdown .dropdown li a:hover { background-color: #FBFBFB; }
.dash-stats .top .time-dropdown.toggled .button { border: 1px solid #EEEEEE; }
.dash-stats .top .time-dropdown.toggled .button .arrow { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.dash-stats .top .time-dropdown.toggled .dropdown { display: block; }
.dash-stats .top .expand-live-stats { float: right; width: 40px; height: 40px; margin: 10px 10px 0 0; border: 1px solid #FFFFFF; background: url("../images/layout/expand@4x.png") center center no-repeat; background-size: 40px 40px; cursor: pointer; }
.dash-stats .top .expand-live-stats:hover { border: 1px solid #EEEEEE; /*background-image: url("../images/layout/expand_hover@4x.png");*/ }
.dash-stats .chart-wrapper { display: block; width: 100%; max-width: 100%; overflow: hidden; overflow-x: auto; }
.dash-stats .chart { display: block; white-space: nowrap; text-align: center; }
.dash-stats .chart li { display: inline-block; width: 140px; height: 440px; padding: 40px 0 40px 0; background: #FFFFFF; cursor: pointer; }
.dash-stats .chart li:hover { background: #FBFBFB; }
.dash-stats .chart li:hover .bar-wrapper .bar { background: #DD6C10 !important; }
.dash-stats .chart li:hover .bar-wrapper .bar .text { -ms-transform: translate(-35px, -30px); -webkit-transform: translate(-35px, -30px); transform: translate(-35px, -30px); }
.dash-stats .chart li:hover .bar-wrapper .bar .text .hours { display: block; color: #CCCCCC; }
.dash-stats .chart li .bar-wrapper { position: relative; float: left; width: 100%; height: 270px; }
.dash-stats .chart li .bar-wrapper .bar { position: absolute; bottom: 0; left: 50%; margin-left: -15px; width: 30px; min-height: 10px; background: #DDDDDD; }
.dash-stats .chart li .bar-wrapper .bar .center { float: left; width: 100%; position: relative; }
.dash-stats .chart li .bar-wrapper .bar .text { position: absolute; top: 0; left: 0; float: left; width: 100px; -ms-transform: translate(-35px, -20px); -webkit-transform: translate(-35px, -20px); transform: translate(-35px, -20px); }
.dash-stats .chart li .bar-wrapper .bar .text .scans { display: block; }
.dash-stats .chart li .bar-wrapper .bar .text .hours { display: none; color: #FFFFFF; font-size: 10px; }
.dash-stats .chart li .account-info { float: left; width: 100%; height: 120px; padding: 20px 0 0 0; }
.dash-stats .chart li .account-info .account-image { display: inline-block; width: 40px; height: 40px; background: #FFFFFF; border-radius: 50%; overflow: hidden; vertical-align: middle; }
.dash-stats .chart li .account-info .account-image  img { float: left; width: 100%; height: 100%; object-fit: cover; }
.dash-stats .chart li .account-info .account-name { display: block; width: 100%; padding: 10px 0 0 0; }



.dash-accounts { float: left; width: calc(30% - 40px); height: 500px; margin: 0 0 40px 0; background: #FFFFFF; border: 1px solid #EEEEEE; }
.dash-accounts .top { float: left; width: 100%; height: 60px; margin: 0; border-bottom: 1px solid #EEEEEE; }
.dash-accounts .top .title { float: left; padding: 0 30px 0 30px; font-size: 18px; line-height: 60px; margin: 0; font-weight: 500;}
.dash-accounts .top .status-dropdown { position: relative; top: 0px; left: 0px; float: right; margin: 0; }
.dash-accounts .top .status-dropdown .button { float: left; border: 1px solid #FFFFFF; cursor: pointer; padding: 0 12px 0 15px; margin: 10px 10px 0 10px; background-color: #FFFFFF; }
.dash-accounts .top .status-dropdown .button:hover { border: 1px solid #EEEEEE; }
.dash-accounts .top .status-dropdown .button .text { float: left; font-size: 14px; line-height: 40px; font-weight: 500; }
.dash-accounts .top .status-dropdown .button .arrow { display: inline-block; width: 20px; height: 20px; margin: 10px 0 0 5px; background: url("../images/layout/dropdown-arrow@4x.png") center center no-repeat #FFFFFF; background-size: 50px 50px; }
.dash-accounts .top .status-dropdown .dropdown { display: none; position: absolute; top: 50px; right: 10px; z-index: 999; background: #FFFFFF; border: 1px solid #EEEEEE; width: auto !important; min-width: 100%; max-width: 300px;  }
.dash-accounts .top .status-dropdown .dropdown li { float: left; border-bottom: 1px solid #EEEEEE; width: 100%; }
.dash-accounts .top .status-dropdown .dropdown li:last-child { border-bottom: 0;}
.dash-accounts .top .status-dropdown .dropdown li a { float: left; font-size: 14px; line-height: 40px; font-weight: 500; padding: 0 15px 0 15px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-accounts .top .status-dropdown .dropdown li a:hover { background-color: #FBFBFB; }
.dash-accounts .top .status-dropdown.toggled .button { border: 1px solid #EEEEEE; }
.dash-accounts .top .status-dropdown.toggled .button .arrow { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.dash-accounts .top .status-dropdown.toggled .dropdown { display: block; }
.dash-accounts .list { float: left; width: 100%; height: 438px; overflow: hidden; overflow-y: auto; }
.dash-accounts .list li { float: left; width: 100%; padding: 15px 20px 15px 20px; cursor: pointer; }
.dash-accounts .list li:hover { background: #FBFBFB; }
.dash-accounts .list li .account-image { float: left; width: 40px; height: 40px; margin-right: 10px; background: #FFFFFF; border-radius: 50%; overflow: hidden; vertical-align: middle; }
.dash-accounts .list li .account-image  img { float: left; width: 100%; height: 100%; object-fit: cover; }
.dash-accounts .list li .info { float: left; width: calc(100% - 50px); margin: 5px 0 0 0; }
.dash-accounts .list li .info .name { float: left; width: 100%; }
.dash-accounts .list li .info .status { float: left; width: 100%; font-size: 10px; color: #CCCCCC; }
.dash-accounts .list li.online .info .status .icon { display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: #36D900; vertical-align: middle; border-radius: 50%; }
.dash-accounts .list li.offline .info .status .icon { display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: #CCCCCC; vertical-align: middle; border-radius: 50%; }



.logs-box { float: left; width: 100%; margin: 0 0 40px 0; background: #FFFFFF; border: 1px solid #EEEEEE; }
.logs-box .top { float: left; width: 100%; height: 60px;  margin: 0; border-bottom: 1px solid #EEEEEE; }
.logs-box .top .title { float: left; padding: 0 30px 0 30px; font-size: 18px; line-height: 60px; font-weight: 500; }

.logs-box .top .type-dropdown { position: relative; float: left; margin: 8px 0 0 8px; }
.logs-box .top .type-dropdown .button { float: left; border: 1px solid #FFFFFF; cursor: pointer; padding: 0 15px 0 15px; background-color: #FFFFFF; }
.logs-box .top .type-dropdown .button:hover { border: 1px solid #EEEEEE; }
.logs-box .top .type-dropdown .button .text { float: left; font-size: 14px; line-height: 40px; font-weight: 500; }
.logs-box .top .type-dropdown .button .arrow { display: inline-block; width: 20px; height: 20px; margin: 10px 0 0 5px; background: url("../images/layout/dropdown-arrow@4x.png") center center no-repeat #FFFFFF; background-size: 50px 50px; }
.logs-box .top .type-dropdown .dropdown { display: none; position: absolute; top: 40px; right: 0px; z-index: 999; background: #FFFFFF; border: 1px solid #EEEEEE; width: auto !important; min-width: 100%; max-width: 300px;  }
.logs-box .top .type-dropdown .dropdown li { float: left; border-bottom: 1px solid #EEEEEE; width: 100%; }
.logs-box .top .type-dropdown .dropdown li:last-child { border-bottom: 0;}
.logs-box .top .type-dropdown .dropdown li a { float: left; font-size: 14px; line-height: 40px; font-weight: 500; padding: 0 15px 0 15px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logs-box .top .type-dropdown .dropdown li a:hover { background-color: #FBFBFB; }
.logs-box .top .type-dropdown.toggled .button { border: 1px solid #EEEEEE; }
.logs-box .top .type-dropdown.toggled .button .arrow { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.logs-box .top .type-dropdown.toggled .dropdown { display: block; }


.logs-box .top .time-dropdown { position: relative; top: 0px; left: 0px; float: right; margin: 0; }
.logs-box .top .time-dropdown .button { float: left; border: 1px solid #FFFFFF; cursor: pointer; padding: 0 12px 0 15px; margin: 10px 10px 0 10px; background-color: #FFFFFF; }
.logs-box .top .time-dropdown .button:hover { border: 1px solid #EEEEEE; }
.logs-box .top .time-dropdown .button .text { float: left; font-size: 14px; line-height: 40px; font-weight: 500; }
.logs-box .top .time-dropdown .button .arrow { display: inline-block; width: 20px; height: 20px; margin: 10px 0 0 5px; background: url("../images/layout/dropdown-arrow@4x.png") center center no-repeat #FFFFFF; background-size: 50px 50px; }
.logs-box .top .time-dropdown .dropdown { display: none; position: absolute; top: 50px; right: 10px; z-index: 999; background: #FFFFFF; border: 1px solid #EEEEEE; width: auto !important; min-width: 100%; max-width: 300px;  }
.logs-box .top .time-dropdown .dropdown li { float: left; border-bottom: 1px solid #EEEEEE; width: 100%; }
.logs-box .top .time-dropdown .dropdown li:last-child { border-bottom: 0;}
.logs-box .top .time-dropdown .dropdown li a { float: left; font-size: 14px; line-height: 40px; font-weight: 500; padding: 0 15px 0 15px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logs-box .top .time-dropdown .dropdown li a:hover { background-color: #FBFBFB; }
.logs-box .top .time-dropdown.toggled .button { border: 1px solid #EEEEEE; }
.logs-box .top .time-dropdown.toggled .button .arrow { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.logs-box .top .time-dropdown.toggled .dropdown { display: block; }

.logs-box .logs-wrapper { float: left; width: 100%; max-height: 500px; overflow: hidden; overflow-y: auto; overflow-x: auto; }
.logs-box .logs-wrapper .logs { display: table; width: 100%; min-width: 800px; }
.logs-box .logs-wrapper .logs li { display: table-row; width: 100%; font-size: 12px; }
.logs-box .logs-wrapper .logs li:hover { background: #FBFBFB; }
.logs-box .logs-wrapper .logs li .date { display: table-cell; width: 150px; padding: 15px 0px 15px 30px; color: #CCCCCC; }
.logs-box .logs-wrapper .logs li .log { display: table-cell; width: calc(100% - 150px); padding: 15px 30px 15px 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logs-box .logs-wrapper .logs li .log a { font-weight: 700; }
.logs-box .logs-wrapper .logs li .log a:hover { color: orange; }
.logs-box .logs-wrapper .logs li .log .account-image { display: inline-block; width: 40px; height: 40px; margin-right: 10px; background: #FFFFFF; border-radius: 50%; overflow: hidden; vertical-align: middle; }
.logs-box .logs-wrapper .logs li .log .account-image  img { float: left; width: 100%; height: 100%; object-fit: cover; }

.logs-box .logs-wrapper .items { display: table; width: 100%; min-width: 800px; }
.logs-box .logs-wrapper .items li { display: table-row; width: 100%; font-size: 12px; line-height: 16px; }
.logs-box .logs-wrapper .items li:hover { background: #FBFBFB; }
.logs-box .logs-wrapper .items li .date { display: table-cell; width: 150px; padding: 15px 0px 15px 30px; color: #CCCCCC; }
.logs-box .logs-wrapper .items li .log { display: table-cell; width: calc(100% - 150px); padding: 15px 30px 15px 0px; }
.logs-box .logs-wrapper .items li .log a { font-weight: 700; }
.logs-box .logs-wrapper .items li .log a:hover { color: orange; }
.logs-box .logs-wrapper .items li .log .item-image { display: inline-block; width: 80px; height: 60px; margin-right: 10px; background: #FFFFFF; text-align: center; overflow: hidden; vertical-align: middle; }
.logs-box .logs-wrapper .items li .log .item-image img { display: inline-block; width: auto; height: 60px; }
.logs-box .logs-wrapper .items li .log .info { display: inline-block; width: calc(100% - 95px); vertical-align: middle; }





/* Items Details */
.item-details { float: left; width: 100%; margin: 0 0 40px 0; background: #FFFFFF; border: 1px solid #EEEEEE; }
.item-details .item-details-image { float: left; width: 20%; padding: 30px 30px 30px 30px; height: 100%; max-height: 650px; overflow: hidden; overflow-y: auto; }
.item-details .item-details-image .has-image { position: relative; display: none; float: left; width: 100%; border-bottom: 1px solid #EEEEEE; padding-bottom: 0px; margin-bottom: 20px; }
.item-details .item-details-image .has-image .title { float: left; width: 100%; margin: 0 0 10px 0; font-weight: 700; }
.item-details .item-details-image .has-image .image { float: left; width: 100%; margin: 0 0 0 0; height: auto; }
.item-details .item-details-image .has-image .link.download-btn { background: url("../images/layout/download-gray@4x.png") center center no-repeat; background-size: 50px 50px; }
.item-details .item-details-image .has-image .link.delete-btn { background: url("../images/layout/delete@4x.png") center center no-repeat; background-size: 50px 50px; }
.item-details .item-details-image .has-image .link { float: left; width: 50%; height: 50px; margin: 0 0 0 0; text-align: center; font-size: 14px; line-height: 40px; font-weight: 500; background-color: #FFFFFF; }
.item-details .item-details-image .has-image .link:hover { background-color: #FBFBFB; }


.item-details .item-details-image .upload-image { display: block; float: left; width: 100%; }
.item-details .item-details-image .upload-image .image { float: left; width: 100%; height: auto; margin: 0 0 5px 0; }
.item-details .item-details-image .upload-image .file-select { float: left; width: 100%; padding: 10px; height: 40px; margin: 0 0 5px 0; border: 1px solid #EEEEEE; font-size: 12px; }
.item-details .item-details-image .upload-image .file-upload { float: left; width: 100%; margin: 0 0 5px 0; padding: 0 20px 0 20px; height: 40px; border: 0; cursor: pointer; background: #DD6C10; color: #FFFFFF; font-weight: 500; }
.item-details .item-details-image .upload-image .file-upload:hover { background-color: #F08024; }

.item-details .item-details-list { float: right; width: 80%; border-left: 1px solid #EEEEEE; }
.item-details .item-details-list li { float: left; width: 100%; padding: 20px; border-bottom: 1px solid #EEEEEE; cursor: pointer; }
.item-details .item-details-list li:last-child { border-bottom: 0; }
.item-details .item-details-list li:hover { background: #FBFBFB; }
.item-details .item-details-list li.toggled { cursor: default; background: #FBFBFB; }
.item-details .item-details-list li .title { float: left; width: 100px;  font-weight: 700; }
.item-details .item-details-list li .details-static { display: block; float: right; width: calc(100% - 150px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.item-details .item-details-list li.toggled .details-static { display: none; }
.item-details .item-details-list li .account-image { display: inline-block; width: 40px; height: 40px; background: #FFFFFF; border-radius: 50%; overflow: hidden; vertical-align: middle; }
.item-details .item-details-list li .account-image  img { float: left; width: 100%; height: 100%; object-fit: cover; }

.item-details .item-details-list li .details-editable { display: none; float: right; width: calc(100% - 150px); }
.item-details .item-details-list li.toggled .details-editable { display: block; }
.item-details .item-details-list li .details-editable .input { float: left; width: 100%; height: 40px; padding: 10px; margin: 0 0 5px 0; border: 1px solid #EEEEEE; background: #FFFFFF; }
.item-details .item-details-list li .details-editable .select { float: left; width: 100%; height: 40px; padding: 10px; margin: 0 0 5px 0; border: 1px solid #EEEEEE; background: url("../images/layout/dropdown-arrow@4x.png") right center no-repeat #FFFFFF; background-size: 50px 50px; }
.item-details .item-details-list li .details-editable .cancel { float: left; margin: 0 5px 0 0; padding: 0 20px 0 20px; height: 40px; border: 0; cursor: pointer; font-weight: 500; background: #DDDDDD; }
.item-details .item-details-list li .details-editable .cancel:hover { background: #EEEEEE; }
.item-details .item-details-list li .details-editable .save { float: left; margin: 0 5px 0 0; padding: 0 20px 0 20px; height: 40px; border: 0; cursor: pointer; background: #DD6C10; color: #FFFFFF; font-weight: 500; }
.item-details .item-details-list li .details-editable .save:hover { background-color: #F08024; }



/* Accound Details */
.account-details { float: left; width: 100%; margin: 0 0 40px 0; background: #FFFFFF; border: 1px solid #EEEEEE; }
.account-details .account-details-image { float: left; width: 20%; padding: 30px; height: 100%; }
.account-details .account-details-image .has-image { display: block; float: left; width: 100%; }
.account-details .account-details-image .has-image .title { float: left; width: 100%; margin: 0 0 10px 0; font-weight: 700; }
.account-details .account-details-image .has-image .account-image { display: block; width: 100%; height:0; padding-bottom: 100%; margin: 0 0 10px 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background: center center no-repeat #CCCCCC; background-size: cover;  }
.account-details .account-details-image .has-image .link { float: left; width: 100%; margin: 5px 0 0 0; text-align: center; font-size: 14px; line-height: 40px; font-weight: 500; background: #FFFFFF; border: 1px solid #EEEEEE; }
.account-details .account-details-image .upload-image { display: none; float: left; width: 100%; }
.account-details .account-details-image .upload-image .image { float: left; width: 100%; height: auto; margin: 0 0 5px 0; }
.account-details .account-details-image .upload-image .account-image { display: block; width: 100%; height:0; padding-bottom: 100%; margin: 0 0 10px 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background: center center no-repeat #CCCCCC; background-size: cover; }

.account-details .account-details-image .upload-image .file-select { float: left; width: 100%; padding: 10px; height: 40px; margin: 0 0 5px 0; border: 1px solid #EEEEEE; font-size: 12px; }
.account-details .account-details-image .upload-image .file-upload { float: left; width: 100%; margin: 0 0 5px 0; padding: 0 20px 0 20px; height: 40px; border: 0; cursor: pointer; background: #DD6C10; color: #FFFFFF; font-weight: 500; }
.account-details .account-details-image .upload-image .file-upload:hover { background-color: #F08024; }

.account-details .account-details-list { float: right; width: 80%; min-height: 400px; border-left: 1px solid #EEEEEE; }
.account-details .account-details-list li { float: left; width: 100%; padding: 20px; border-bottom: 1px solid #EEEEEE; cursor: pointer; }
.account-details .account-details-list li:last-child { border-bottom: 0; }
.account-details .account-details-list li:hover { background: #FBFBFB; }
.account-details .account-details-list li.toggled { cursor: default; background: #FBFBFB; }
.account-details .account-details-list li .title { float: left; width: 100px; font-weight: 700; }
.account-details .account-details-list li .details-static { display: block; float: right; width: calc(100% - 150px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.account-details .account-details-list li.toggled .details-static { display: none; }
.account-details .account-details-list li .account-image { display: inline-block; width: 40px; height: 40px; background: #FFFFFF; border-radius: 50%; overflow: hidden; vertical-align: middle; }
.account-details .account-details-list li .account-image  img { float: left; width: auto; height: 40px; margin-left: 50%; -webkit-transform: translate3d(-50%,0px,0px); -ms-transform: translate3d(-50%,0px,0px); transform: translate3d(-50%,0px,0px); }

.account-details .account-details-list li .details-editable { display: none; float: right; width: calc(100% - 150px); }
.account-details .account-details-list li.toggled .details-editable { display: block; }
.account-details .account-details-list li .details-editable .input { float: left; width: 100%; height: 40px; padding: 10px; margin: 0 0 5px 0; border: 1px solid #EEEEEE; background: #FFFFFF; }
.account-details .account-details-list li .details-editable .select { float: left; width: 100%; height: 40px; padding: 10px; margin: 0 0 5px 0; border: 1px solid #EEEEEE; background: url("../images/layout/dropdown-arrow@4x.png") right center no-repeat #FFFFFF; background-size: 50px 50px; }
.account-details .account-details-list li .details-editable .cancel { float: left; margin: 0 5px 0 0; padding: 0 20px 0 20px; height: 40px; border: 0; cursor: pointer; font-weight: 500; background: #DDDDDD; }
.account-details .account-details-list li .details-editable .cancel:hover { background: #EEEEEE; }
.account-details .account-details-list li .details-editable .save { float: left; margin: 0 5px 0 0; padding: 0 20px 0 20px; height: 40px; border: 0; cursor: pointer; background: #DD6C10; color: #FFFFFF; font-weight: 500; }
.account-details .account-details-list li .details-editable .save:hover { background-color: #F08024; }



/* Settings Details */
.settings-section { float: left; width: 100%; padding: 20px 40px 20px 40px; margin: 0; background: #FFFFFF; border: 1px solid #EEEEEE; }
.settings-section .title { float: left; width: 100%; font-size: 18px; line-height: 18px; margin: 0; font-weight: 500; }



/* Modal Box */
.modal-box { display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 9999; width: 100%; height: 100%; background: rgba(0,0,0,0.2); overflow: scroll; }
.modal-box.toggled { display: block; }
.modal-box .box { display: block; width: 600px; background: #FFFFFF; margin: 30px auto 30px auto; overflow: hidden; }
.modal-box .box .top { float: left; width: 100%; height: 60px; background: #EEEEEE; }
.modal-box .box .top .title { float: left; margin: 0 0 0 20px; font-size: 16px; line-height: 60px; font-weight: 500; }
.modal-box .box .top .close-btn { float: right; width: 40px; height: 40px; margin: 10px 10px 0 0; background: url("../images/layout/close@4x.png") center center no-repeat #EEEEEE; background-size: 50px 50px; cursor: pointer; }
.modal-box .box .top .close-btn:hover { background-color: #FFFFFF; }
.modal-box .box .tabs { float: left; width: 100%; height: 60px; padding: 0 40px 0 40px; background: #DDDDDD; }
.modal-box .box .tabs li { float: left; height: 40px; padding: 0 15px 0 15px; margin: 20px 0 0 0; line-height: 40px; cursor: pointer; }
.modal-box .box .tabs li:hover { background: #EEEEEE; }
.modal-box .box .tabs li.current { background: #FFFFFF; }
.modal-box .box .tab-content { display: none; float: left; width: 100%; }
.modal-box .box .tab-content.current { display: block; }

.modal-box .box .content { float: left; width: 100%; min-height: 200px; padding: 40px; }
.modal-box .box .content .form-list { float: left; width: 100%; }
.modal-box .box .content .form-list li { float: left; width: 100%; margin: 0 0 15px 0; }
.modal-box .box .content .title { float: left; width: 100%; margin: 0 0 5px 0; font-size: 12px; line-height: 12px; font-weight: 500; }
.modal-box .box .content .input { float: left; width: 100%; height: 40px; padding: 10px; margin: 0 0 0 0; border: 1px solid #EEEEEE; background: #FFFFFF; }
.modal-box .box .content .select { float: left; width: 100%; height: 40px; padding: 10px; margin: 0 0 0 0; border: 1px solid #EEEEEE; background: url("../images/layout/dropdown-arrow@4x.png") right center no-repeat #FFFFFF; background-size: 50px 50px; }
.modal-box .box .content .save { float: left; margin: 0 5px 0 0; padding: 0 20px 0 20px; height: 40px; border: 0; cursor: pointer; background: #DD6C10; color: #FFFFFF; font-weight: 500; }
.modal-box .box .content .save:hover { background-color: #F08024; }
.modal-box .box .content .error { border-color: red !important; }


/* Match Attributes */
.match-attributes { float: left; width: 100%; }
.match-attributes .top-section { float: left; width: 100%; margin: 0 0 10px 0; }
.match-attributes .top-section .file-name { float: left; width: 50%; width: calc(100% - 160px); overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; line-height: 40px; font-weight: 700; }
.match-attributes .top-section .done-btn { float: right; width: 150px; height: 40px; background: #DDDDDD; color: #FFFFFF; text-align: center; font-size: 14px; line-height: 40px; font-weight: 500; border: 0; }
.match-attributes .top-section .done-btn.ready { background: #DD6C10; cursor: pointer;  }

.match-attributes .matched-section { float: left; width: 100%; margin: 0 0 20px 0; }
.match-attributes .matched-section .matched-section-list { float: left; width: 100%; border: 1px solid #EEEEEE; text-align: left; font-size: 12px; }
.match-attributes .matched-section .matched-section-list .no-matches { display: none; float: left; width: 100%; text-align: center; padding: 10px; color: #999999; }
.match-attributes .matched-section.no-matches .matched-section-list .no-matches { display: block; }
.match-attributes .matched-section .matched-section-list .matched-section-row { float: left; width: 100%; border-bottom: 1px solid #F7F7F7; }
.match-attributes .matched-section .matched-section-list .matched-section-row:last-child { border-bottom: 0; }
.match-attributes .matched-section .matched-section-list .matched-section-row.highlighted { background: #F7F7F7; font-weight: 700; } 
.match-attributes .matched-section .matched-section-list .matched-section-row .col { float: left; overflow: hidden; text-align: left; padding: 5px 10px 5px 10px; text-overflow: ellipsis; white-space: nowrap; }
.match-attributes .matched-section .matched-section-list .matched-section-row .col.col1 { width: 33.333%; }
.match-attributes .matched-section .matched-section-list .matched-section-row .col.col2 { width: 33.333%; }
.match-attributes .matched-section .matched-section-list .matched-section-row .col.col3 { width: 33.333%; text-align: right; }
.match-attributes .matched-section .matched-section-list .matched-section-row .col.col3 a { color: #DD6C10; }

.match-attributes .unmatched-section { float: left; width: 100%; }
.match-attributes .unmatched-section .unmatched-section-lists { float: left; width: 50%; width: calc(100% - 160px); border: 1px solid #EEEEEE; }
.match-attributes .unmatched-section .unmatched-section-lists .unmatched-section-top { float: left; width: 100%; background: #F7F7F7; font-weight: 700; }
.match-attributes .unmatched-section .unmatched-section-lists .unmatched-section-top .col { float: left; width: 50%; overflow: hidden; text-align: center; padding: 5px 10px 5px 10px; text-overflow: ellipsis; white-space: nowrap; }
.match-attributes .unmatched-section .unmatched-section-lists .unmatched-section-top .col.col1 { width: 50%; }
.match-attributes .unmatched-section .unmatched-section-lists .unmatched-section-top .col.col2 { width: 50%; }

.match-attributes .unmatched-section .unmatched-section-lists .unmatched-system-attributes { float: left; width: 50%; padding: 10px; }
.match-attributes .unmatched-section .unmatched-section-lists .unmatched-system-attributes .attribute { float: left; width: 100%; height: 40px; margin: 0 0 10px 0; padding: 0 10px 0 10px; border: 1px solid #EEEEEE; text-align: center; background: #F7F7F7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 40px; cursor: pointer; }
.match-attributes .unmatched-section .unmatched-section-lists .unmatched-system-attributes .attribute.selected { background: #E6F5E9; border-color: #16BF37; }

.match-attributes .unmatched-section .unmatched-section-lists .unmatched-file-attributes { float: right; width: 50%; padding: 10px; }
.match-attributes .unmatched-section .unmatched-section-lists .unmatched-file-attributes .attribute { float: left; width: 100%; height: 40px; margin: 0 0 10px 0; padding: 0 10px 0 10px; border: 1px solid #EEEEEE; text-align: center; background: #F7F7F7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 40px; cursor: pointer; }
.match-attributes .unmatched-section .unmatched-section-lists .unmatched-file-attributes .attribute.selected { background: #E6F5E9; border-color: #16BF37; }

.match-attributes .unmatched-section .match-btn { float: right; width: 150px; height: 40px; background: #DDDDDD; color: #FFFFFF; text-align: center; font-size: 14px; line-height: 40px; font-weight: 500; border: 0; }
.match-attributes .unmatched-section .match-btn.ready {  background: #16BF37; cursor: pointer; }


/* Index */
.index-top { position: absolute; top: 0; left: 50%; margin-left: -200px; z-index: 2; width: 100%; max-width: 400px; }
.index-top .logo { float: left; width: 100%; border: 0; text-align: center; }
.index-top .logo img { display: inline-block; width: 100%; max-width: 400px; height: auto; }

.index-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; float: left; }
.index-wrapper .index-admins { float: left; width: 50%; height: 100%; padding: 200px 0 0 0; background: #1B1F23; text-align: center; }
.index-wrapper .index-admins .header-text { font-size: 28px; line-height: 28px; padding: 0; margin: 0; color: #FFFFFF; }
.index-wrapper .index-admins .admins-icon { display: inline-block; width: 100%; max-width: 320px; }
.index-wrapper .index-admins .admins-btn { display: block; margin: 0 auto 8px auto; width: 340px; height: 70px; color: #FFFFFF; font-size: 18px; line-height: 70px; background: #333C44; }
.index-wrapper .index-admins .description-text { font-size: 16px; line-height: 16px; color: #333C44; }
.index-wrapper .index-employees { float: left; width: 50%; height: 100%; padding: 200px 0 0 0; background: #333C44; text-align: center; }
.index-wrapper .index-employees .header-text { font-size: 28px; line-height: 28px; padding: 0; margin: 0; color: #FFFFFF; }
.index-wrapper .index-employees .employees-icon { display: inline-block; width: 100%; max-width: 320px; }
.index-wrapper .index-employees .employees-btn { display: block; margin: 0 auto 8px auto; width: 340px; height: 70px; color: #FFFFFF; font-size: 18px; line-height: 70px; background: #DD6C10; }
.index-wrapper .index-employees .description-text { font-size: 16px; line-height: 16px; color: #535E69; }

.index-footer { float: left; width: 100%; padding: 40px 0 40px 0; border-top: 1px solid #EEEEEE; background: #FFFFFF; text-align: center; color: #999999; }



/* Sign In */
.blue-bg { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 250px; background: #1B1F23; }
.signin-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
.signin { float: left; width: 100%; height: auto; min-height: 100%; }
.signin-box { display: block; width: 100%; max-width: 400px; margin: 0 auto 0 auto; overflow: hidden; }
.signin-box .logo { float: left; width: 100%; background: #1B1F23; border: 0; border-left: 1px solid #333C44; border-right: 1px solid #333C44; }
.signin-box .logo img { float: left; width: 100%; height: auto; }
.signin-box .form { float: left; width: 100%; padding: 30px; border: 1px solid #EEEEEE; border-top: 0; background: #FFFFFF; }

.signin-box .form .back-arrow { float: left; width: 40px; height: 40px; margin: 0 10px 0 0; background: url("../images/layout/back-arrow@4x.png") center center no-repeat #FFFFFF; background-size: 50px 50px; border: 1px solid #FFFFFF; cursor: pointer; }
.signin-box .form .back-arrow:hover { background-color: #FFFFFF; border: 1px solid #EEEEEE; }

.signin-box .form .top-text { float: left; width: 100%; margin-bottom: 30px; }
.signin-box .form .top-text.with-button { width: calc(100% - 50px); }
.signin-box .form .top-text .title-text { float: left; width: 100%; font-size: 18px; line-height: 20px; font-weight: 700; }
.signin-box .form .top-text .sub-text { float: left; width: 100%; color: #CCCCCC; }

.signin-box .form .signin-form { float: left; width: 100%; }
.signin-box .form .section { float: left; width: 100%; margin-bottom: 20px; }
.signin-box .form .title { float: left; width: 100%; margin: 0 0 5px 0; font-size: 12px; line-height: 12px; font-weight: 500; }
.signin-box .form .input { float: left; width: 100%; height: 40px; padding: 10px; margin: 0 0 0 0; border: 1px solid #EEEEEE; background: #FFFFFF; }
.signin-box .form .select { float: left; width: 100%; height: 40px; padding: 10px; margin: 0 0 0 0; border: 1px solid #EEEEEE; background: url("../images/layout/dropdown-arrow@4x.png") right center no-repeat #FFFFFF; background-size: 50px 50px; }
.signin-box .form .submit { float: left; width: 100%; height: 40px; margin: 10px 0 0 0; border: 0; cursor: pointer; background: #DD6C10; color: #FFFFFF; font-weight: 500; }
.signin-box .form .submit:hover { background-color: #F08024; }
.signin-box .form .options { float: left; width: 100%; margin: 20px 0 0 0; text-align: center; }
.signin-box .form .options a { color: #CCCCCC; }
.signin-box .form .options a:hover { color: orange; }
.signin-box .form .error { border-color: red !important; }

.signin-footer { float: left; width: 100%; padding: 40px 0 40px 0; border-top: 1px solid #EEEEEE; background: #FFFFFF; text-align: center; color: #999999; }


/* Download */
.download-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
.download { float: left; width: 100%; height: auto; min-height: 100%; }
.download-box { display: block; width: 100%; max-width: 400px; margin: 0 auto 0 auto; overflow: hidden; }
.download-box .logo { float: left; width: 100%; background: #1B1F23; border: 0; border-left: 1px solid #333C44; border-right: 1px solid #333C44; }
.download-box .logo img { float: left; width: 100%; height: auto; }
.download-box .form { float: left; width: 100%; padding: 30px; border: 1px solid #EEEEEE; border-top: 0; background: #FFFFFF; }

.download-box .form .back-arrow { float: left; width: 40px; height: 40px; margin: 0 10px 0 0; background: url("../images/layout/back-arrow@4x.png") center center no-repeat #FFFFFF; background-size: 50px 50px; border: 1px solid #FFFFFF; cursor: pointer; }
.download-box .form .back-arrow:hover { background-color: #FFFFFF; border: 1px solid #EEEEEE; }

.download-box .form .top-text { float: left; width: 100%; margin-bottom: 30px; }
.download-box .form .top-text.with-button { width: calc(100% - 50px); }
.download-box .form .top-text .title-text { float: left; width: 100%; font-size: 18px; line-height: 20px; font-weight: 700; }
.download-box .form .top-text .sub-text { float: left; width: 100%; color: #CCCCCC; }

.download-box .form .signin-form { float: left; width: 100%; }
.download-box .form .section { float: left; width: 100%; margin-bottom: 20px; }
.download-box .form .title { float: left; width: 100%; margin: 0 0 5px 0; font-size: 12px; line-height: 12px; font-weight: 500; }
.download-box .form .input { float: left; width: 100%; height: 40px; padding: 10px; margin: 0 0 0 0; border: 1px solid #EEEEEE; background: #FFFFFF; }
.download-box .form .select { float: left; width: 100%; height: 40px; padding: 10px; margin: 0 0 0 0; border: 1px solid #EEEEEE; background: url("../images/layout/dropdown-arrow@4x.png") right center no-repeat #FFFFFF; background-size: 50px 50px; }
.download-box .form .submit { float: left; width: 100%; height: 40px; margin: 10px 0 0 0; border: 0; cursor: pointer; background: #DD6C10; color: #FFFFFF; font-weight: 500; }
.download-box .form .submit:hover { background-color: #F08024; }
.download-box .form .options { float: left; width: 100%; margin: 20px 0 0 0; text-align: center; }
.download-box .form .options a { color: #CCCCCC; }
.download-box .form .options a:hover { color: orange; }
.download-box .form .error { border-color: red !important; }

.download-box .form .download-section { float: left; width: 100%; text-align: center; }
.download-box .form .download-section .download-btn { display: inline-block; width: 170px; height: 170px; background: url("../images/layout/download-app@4x.png") center center #DD6C10; background-size: cover; cursor: pointer; }
.download-box .form .download-section .download-btn:hover { background-color: #F08024; }

.download-box .form .app-version { float: left; width: 100%; margin-top: 20px; color: #CCCCCC; text-align: center; }

.download-footer { float: left; width: 100%; padding: 40px 0 40px 0; border-top: 1px solid #EEEEEE; background: #FFFFFF; text-align: center; color: #999999; }





/* BREAK -  1024px -------------------------------------------------------------------------- */

@media all and (max-width: 1024px) {


/* Sidebar */
.sidebar { left: -200px; border-right: 1px solid #333C44; }
.sidebar .top .menu li.selected .arrow { display: none; }

/* Page */
.page { position: relative; top: 0; right: 0; width: 100%; height: 100%; overflow: hidden; }


/* Middle */
.middle { position: relative; top: 0px; left: 0px; width: 100%; height: auto; overflow-x: hidden; overflow-y: auto; }
.middle .content { float: left; width: 100%; height: auto; min-height: 100%; padding: 10px; overflow-x: auto; }
.middle.search { top: auto; height: auto; }

/* Mobile Nav */
.mobile-nav { display: block; }

/* Header */
.header { position: relative; float: left; height: auto; margin: 60px 0 0 0; padding: 10px 10px 10px 10px; }
.header .left .title { padding: 0 10px 0 10px; line-height: 50px; }

/* Search */
.header.search { padding: 10px 10px 10px 10px; height: auto; }


/* Dashboard */
.dash-stats { margin: 0 20px 20px 0;  }
.dash-stats .top .title { padding: 0 20px 0 20px; }
.dash-accounts { width: calc(30% - 20px); margin: 0 0 20px 0; }
.dash-accounts .top .title { padding: 0 20px 0 20px; }
.logs-box {  margin: 0 0 0 0;  }
.logs-box .top .title { padding: 0 20px 0 20px; }


/* Date Table */
.table-wrapper { float: left; width: 100%; overflow: auto; }
.data-table { float: left; width: auto; min-width: 99%; margin: 0; text-align: left; table-layout:fixed; }


/* Items Details */
.item-details {  margin: 0 0 10px 0; }

.item-details .item-details-image { float: left; width: 30%; padding: 10px; height: 100%; max-height: 650px; overflow: hidden; overflow-y: auto; }
.item-details .item-details-list { float: left; width: 70%; }


/* Accound Details */
.account-details {  margin: 0 0 10px 0; }

.account-details .account-details-image { float: left; width: 30%; padding: 10px; height: 100%; max-height: 650px; overflow: hidden; overflow-y: auto; }
.account-details .account-details-list { float: left; width: 70%; }


/* Body */
body.sidebar-toggled .sidebar { left: 0px; }
body.sidebar-toggled .page { left: 200px; }
body.sidebar-toggled .mobile-nav { left: 200px; }

}


/* BREAK -  768px -------------------------------------------------------------------------- */

@media all and (max-width: 768px) {

.hide-mobile { display: none; }


/* Page */
.paging {  margin-top: 10px; }


/* Header */
.header .right { float: left; padding: 10px 0 0 0; margin: 10px 0 0 0; border-top: 1px solid #EEEEEE; width: 100%; }
.header .right .options-dropdown .dropdown { left: 0px; right: auto;  }
.header .right .text-dropdown .dropdown { right: auto; left: 0px }


/* Index */
.index-top { left:0; margin-left: 0; width: 100%; max-width: 100%; }
.index-top .logo img { display: inline-block; width: 100%; max-width: 320px;}

.index-wrapper { position: relative; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; float: left; }
.index-wrapper .index-admins { float: left; width: 100%; height: auto; padding: 120px 0 50px 0;  text-align: center; }
.index-wrapper .index-employees { float: left; width: 100%; height: auto; padding: 50px 0 50px 0;  text-align: center; }

.index-wrapper .index-admins .header-text { font-size: 20px; line-height: 20px; padding: 0; margin: 0; }
.index-wrapper .index-admins .admins-icon { display: inline-block; width: 100%; max-width: 220px; }
.index-wrapper .index-admins .admins-btn { display: block; margin: 0 auto 8px auto; width: 220px; height: 70px;  font-size: 14px; line-height: 70px; }
.index-wrapper .index-admins .description-text { font-size: 14px; line-height: 14px; }

.index-wrapper .index-employees .header-text { font-size: 20px; line-height: 20px; padding: 0; margin: 0;  }
.index-wrapper .index-employees .employees-icon { display: inline-block; width: 100%; max-width: 220px; }
.index-wrapper .index-employees .employees-btn { display: block; margin: 0 auto 8px auto; width: 220px; height: 70px;  font-size: 14px; line-height: 70px; }
.index-wrapper .index-employees .description-text { font-size: 14px; line-height: 14px;  }

/* Modal Box */
.modal-box .box { display: block; width: 100%;margin: 0 0 0 0; }

/* Live Stats */
.live-stats { min-height: 600px; }
.live-stats .main-stats { height: 120px; }
.live-stats .main-stats .stats li .centered { padding: 0 0 0 45px; }
.live-stats .main-stats .stats li .centered .icon { width: 30px; height: 30px; }
.live-stats .main-stats .stats li .centered .title { font-size: 12px; line-height: 12px; }
.live-stats .main-stats .stats li .centered .data { font-size: 16px; line-height: 16px; }
.live-stats .chart-wrapper { height: calc(100% - 180px); }
.live-stats .chart li .bar-wrapper { height: calc(100% - 180px); }


/* Dashboard */
.dash-stats { width: 100%; margin: 0 0 10px 0;  }
.dash-accounts { width: 100%; margin: 0 0 10px 0; }
.logs-box {  margin: 0 0 0 0;  }

}

/* BREAK -  640px -------------------------------------------------------------------------- */

@media all and (max-width: 640px) {

/* Items Details */
.item-details .item-details-image { float: left; width: 100%; padding: 10px; height: auto; min-height: 300px; overflow: hidden; overflow-y: auto; }
.item-details .item-details-list { float: left; width: 100%; border-left: none; border-top: 1px solid #EEEEEE; }


/* Accound Details */
.account-details .account-details-image { float: left; width: 100%; padding: 10px; height: auto; min-height: 200px; overflow: hidden; overflow-y: auto; }
.account-details .account-details-list { float: left; width: 100%; border-left: none; border-top: 1px solid #EEEEEE;}


}



/* BREAK -  375px -------------------------------------------------------------------------- */

@media all and (max-width: 375px) {

/* Live Stats */
.live-stats .top .title { padding: 0 0px 0 0px; }
.live-stats .main-stats { padding: 10px; }

}