body { margin: 0px; padding: 0px; }
h2 { font-size: 1.3rem; }
.wrapper { overflow: hidden; position: relative; width: 100%; height: 100vh; -moz-transition: filter .3s ease-in-out;
    -webkit-transition: filter .3s ease-in-out; transition: filter .3s ease-in-out; }
.wrapper.scrollEnabled .page3, .wrapper.scrollEnabled .page4 { overflow-y: auto; }
.page { opacity: 0; height: 0px; width: 100%; -moz-transition: height .3s ease-in-out, opacity .5s ease-in-out;
    -webkit-transition: height .3s ease-in-out, opacity .5s ease-in-out;
    transition: height .3s ease-in-out, opacity .5s ease-in-out; overflow: hidden; background: lightgrey; }
.header { width: 100%; height: 50px; border: 1px solid grey; cursor: pointer; position: relative; background: #f5f6f7; }

.page1 { margin-top: 0; background: url("../img/shop-bg.jpg"); background-size: cover; }
.page1 .container { margin-top:5%;}
.page1 h1 { text-align: center; font-size: 1.5rem; margin-bottom: 1.5rem; }
.page1 h1 .logo { display: inline-block; width: 155px; height: 55px; padding: 0.5rem 1rem; margin-right: 0;
    background-image: url("../img/logo_white.png"); background-repeat: no-repeat; background-position: center center;
    background-size: 90px auto; border-bottom: 1px solid #c2cfd6; }
.errorMessageContainer { display: none; }
.page1 .errorMessage { text-align: center; margin-bottom: 10px; color: #b94a48; }

.page2 {}
.page2 .container, .page3 .container { padding: 40px; }
.header2 { cursor: default; }
.header:hover .stepTitle { opacity: 1; }
.header .stepValue { margin-left: 10px; top: 50%; transform: translateY(-50%); position: absolute; }
.header .stepTitle { margin-right: 10px; top: 50%; transform: translateY(-50%); position: absolute; right: 0px; opacity: 0;
    transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;}

.header2 .stepValue { color: #007bff; text-align: left; text-shadow: 1px 1px 2px lightgrey; font-weight: bold; font-size: 20px; }
.header2 .stepTitle { opacity: 1 !important; }

.page3 {  }

.page.current { display: block; opacity: 1; overflow-y: auto; }
.page1.current { height: 100vh;  }
.page2.current { height: calc(100vh - 50px);  }
.page3.current { height: calc(100vh - 50px * 2);  }
.page4.current { height: auto;  }
.importContainer { /*margin-top: 50%; transform: translateY(-50%);*/ transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; }
.importContainer:hover { -webkit-box-shadow: 0px 0px 20px -3px #007bff;
    -moz-box-shadow: 0px 0px 20px -3px #007bff;
    box-shadow: 0px 0px 20px -3px #007bff; }
.importContainer .importHeader .salesLogo { float: left; height: 34px; }
.importContainer .importHeader .stockLogo { float: left; height: 28px; }
.importContainer .importHeader h2 { float: left; margin-left: 10px; }
.importContainer .importInfo { clear: both; min-height: 300px; }
.JSUploadForm { box-shadow: none; padding: 0px; }
.JSUploadForm ul.JSpreveiw { float: right; width: calc(100% - 140px); margin-top: -38px; }
.JSUploadForm ul.JSpreveiw li { border-bottom: 0px; background: none; padding: 0px; width: 100%; }
.JSUploadForm ul.JSpreveiw li tr:first-child td:first-child { width: 0px !important; padding: 0px !important; }
.JSUploadForm ul.JSpreveiw li tr:first-child td:first-child div { display: none; }
.JSUploadForm ul.JSpreveiw li span { color: #212529;}
.startJSuploadButton { width: 165px; clear: both; float: left; max-width: 140px; background: #007bff; }
.JSUploadForm .JSFileChoos { width: 50%; clear: both; float: left; max-width: 140px; background: none; color: #666; text-decoration: underline; }
.startJSuploadButton:hover { color: white; text-decoration: none;}
.JSFileCount { margin: 5px 0 0 41px; font-size: 12px; color: #212529; }
.importUploadResponse { height: 50px; }
.importUploadResponse div { display: none; position: absolute; width: calc(100% - 90px); }
.btnOpenPage3, .btnOpenPage4 { display: none; margin-top: 40px; width: 150px; margin-left: 50%; transform: translateX(-50%); }
.cardForgotPassword { display: none; }
.card-footer { background: none; }
.spinnerContainer { display: none; width: 100vw; height: 100vh; position: fixed; top: 0px; left: 0px; background: rgba(0,0,0,.25); }
.spinnerContainer img { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 100px;}
.ui-progressbar { position: relative; }
.progress-label { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); /*color: #fff;*/ }
.ui-widget-header { background: #007bff; }
.resultContainer, .logContainer, .resultAlert { display: none; }
.resultTitle, .logTitle { margin-top: 30px; }
.importPreview { width: 100%; padding: 15px; border: 2px solid grey; border-radius: 10px; background: #fff; }
.importLog { border-radius: 10px; border: 2px solid grey; background: #fff; overflow-y: auto; height: 400px; width: 100%; padding: 15px; }
.importLog ul { padding: 0px; margin: 0px; }
.btnConfirm, .btnTryAgain { margin-top: 10px; display: none; }
.btnConfirm a, .btnTryAgain a { width: 165px; /* margin-left: 50%; transform: translateX(-50%); */ }
.dataTables_scrollHeadInner, .dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable, .dataTables_wrapper.no-footer div.dataTables_scrollBody>table { width: 100% !important; }
table.dataTable tbody td.dt-right { padding: 8px 18px; }