@charset "utf-8";
html { height: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 400; color: #121212; }
::-webkit-input-placeholder { color: #acacac !important; font-weight: 400 !important; font-family: 'Roboto', sans-serif; }
:-moz-placeholder { color: #656565 !important; font-weight: 400 !important; font-family: 'Roboto', sans-serif; }
::-moz-placeholder { color: #656565 !important; font-weight: 400 !important; font-family: 'Roboto', sans-serif; }
:-ms-input-placeholder { color: #656565 !important; font-weight: 400 !important; font-family: 'Roboto', sans-serif; }
input { outline: none; color: #7a7a7a; }
b, strong { font-weight: 600; }
p { line-height: 24px; }
ul { list-style-type: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { line-height: 1.2; }
a:hover { text-decoration: none; }
.btn, .btn:hover { transition: all .2s ease-in-out; }
    .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus { outline: none; }
.btn-primary, .btn-primary:active { border-color: transparent; outline: none; font-weight: 500; background: #70dc70; }
    .btn-primary:hover, .btn-primary:focus { border-color: transparent; background: #6cb96c; }
.btn-rounded, .btn-rounded:active { border-color: transparent; color: #fff; outline: none; padding: 8px 12px; font-size: 16px; height: 48px; font-weight: 600; background: #164d68; border-radius: 6px; }
    .btn-rounded:hover, .btn-rounded:focus { border-color: transparent; color: #fff; background: #6cb96c; }
.text-dark { color: #121212 }
.redtxt { color: #df0000; }
.bluetxt { color: #0c6898; }
.orangetxt { color: #f59024; }
.greentxt { color: #47ab47; }
.btn-block { display: block; width: 100%; }
.full-height, .full-height .full-height { height: 100%; }
.center-block { display: block; margin-left: auto; margin-right: auto; }
.fw-400 { font-weight: 400; }
.fw-600 { font-weight: 600; }
.text-16 { font-size: 16px !important; }

/*************************
  Basic margin padding
*************************/
.m-0 { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; }
.p-0 { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; }
.no-padding { padding: 0; margin: 0; }

.mt-0 { margin-top: 0 !important }
.mt-5 { margin-top: 5px }
.mt-10 { margin-top: 10px }
.mt-15 { margin-top: 15px }
.mt-20 { margin-top: 20px }
.ml-10 { margin-left: 10px; }

.mb-0 { margin-bottom: 0 }
.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 }

.pr-15 { padding-right: 15px }
.pl-5 { padding-left: 5px; }
.pl-8 { padding-left: 8px; }
.pl-10 { padding-left: 10px }
.pl-15 { padding-left: 15px }
.mr-15 { margin-right: 15px; }

.pt-0 { padding-top: 0 }
.pt-5 { padding-top: 5px }
.pt-10 { padding-top: 10px }
.pt-15 { padding-top: 15px }
.pt-20 { padding-top: 20px }

.pb-0 { padding-bottom: 0 }
.pb-5 { padding-bottom: 5px }
.pb-10 { padding-bottom: 10px }
.pb-15 { padding-bottom: 15px }
.pb-20 { padding-bottom: 20px }

.ptb-0 { padding: 0 }
.ptb-10 { padding: 10px 0 }
.ptb-20 { padding: 20px 0 }

.mtb-0 { margin: 0 }
.mtb-10 { margin: 10px 0 }
.mtb-15 { margin: 15px 0 }
.mtb-20 { margin: 20px 0 }

/*************************
  Login Screen
*************************/
.contentWrapper { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; overflow: auto; background-color: #fff; }
.contentWrapper .content { width: 50%; }
.contentWrapper .loginfooter { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; position: relative; color: #666666; font-size: 0.78em; margin-bottom: 25px; }
.contentWrapper .loginfooter img { max-width: 140px; }
.header-logo { padding: 40px 0px; }
.header-logo img { max-width: 325px; }
.escosales-login .login-form { background: #ebebeb; padding: 20px 30px; border-radius: 17px; box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); }
.escosales-login .login-form .form-group { margin-bottom: 10px; }
span.input-icon { cursor: pointer; color: #ccc; float: right; margin-top: -28px; margin-right: 10px; z-index: 4; position: relative; }
.escosales-login .login-form .form-control { height: 48px; font-size: 16px; line-height: 19px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.23); box-shadow: none; }
.escosales-login .login-form .form-control:hover { border-color: #5891af; }
.escosales-login .login-form .form-control:focus { border-color: #5891af; box-shadow: none; }
.escosales-login .login-form .form-control.wauto { width: auto; display: inline-block; }
.captcha { position: relative; border: 1px solid #b9d0dc; margin-left: 5px; font-weight: 600; padding: 12px 15px; border-radius: 6px; background: #d6e3e9; color: #0e6592; }
.escosales-login .login-form .hr-lines { display: flex; justify-content: center; position: relative; margin: 15px 0; margin-left: -15px; margin-right: -15px; text-align: center; }
.escosales-login .login-form .hr-lines p { position: relative; display: inline-block; margin: 0; padding: 0 20px; background-color: #ebebeb; }
.escosales-login .login-form .hr-lines:before { content: " "; height: 1px; width: 100%; background: #adadad; display: block; position: absolute; top: 50%; }
.escosales-marketing-banner { overflow: hidden; background-size: cover; background-repeat: no-repeat; background-image: linear-gradient(to bottom,rgba(36, 122, 167,.9) 35%,rgba(36, 122, 167,.9) 80%),url(../images/login-bg.jpg); }
.escosales-marketing-banner-text { padding: 0 10px; width: 85%; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.3); margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.graph { position: relative; width: 500px; height: 486px; margin: auto; background-repeat: no-repeat; background-image: url(../images/infographic.png); color: #808281; font-size: 16px; font-weight: 600; text-shadow: none; }
.graph .service1 { position: absolute; top: 65px; left: 114px; width: 115px; text-align: center; line-height: 18px; }
.graph .service2 { position: absolute; top: 57px; right: 106px; width: 120px; text-align: center; line-height: 18px; }
.graph .service3 { position: absolute; top: 214px; right: 27px; width: 95px; text-align: center; line-height: 18px; }
.graph .service4 { position: absolute; bottom: 83px; right: 111px; width: 101px; text-align: center; line-height: 18px; }
.graph .service5 { position: absolute; bottom: 78px; left: 112px; width: 105px; text-align: center; line-height: 18px; }
.graph .service6 { position: absolute; top: 198px; left: 26px; width: 105px; text-align: center; line-height: 18px; }

/*-----------------------------------*/
/*  Landing Screen
/*-----------------------------------*/
.bg-section { position: relative; background: #fff; min-height: 180px; border-bottom: 1px solid #d2d6de; }
.wrapper { width: 100%; }
.page-inner { width: 100%; margin: 0px 20px 0px 0px; background-color: transparent; min-height: calc(100vh - 145px); }
.page-wrapper { position: relative; background: #e7ecf3; padding: 0; -webkit-transition: -webkit-transform 0.3s ease-in-out, margin 0.3s ease-in-out; -moz-transition: -moz-transform 0.3s ease-in-out, margin 0.3s ease-in-out; -o-transition: -o-transform 0.3s ease-in-out, margin 0.3s ease-in-out; transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out; }
.navbar-side { z-index: 0; }
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: transparent; border-color: transparent; }
.dropdown-menu > li > a { display: block; padding: 3px 15px; clear: both; font-weight: 400; line-height: 1.42857143; color: #333; white-space: nowrap; font-size: 13px; }
.dropdown-menu > li > a i { color: #1F1F1F; }
.panel-default .panel-heading { padding: 15px 0; margin-bottom: 15px; background: none; border-bottom: 1px solid #d8d8d8; font-size: 14px; color: #000; font-weight: 600; border-radius: 0; }
.panel-default .panel-body { padding: 10px 0px; }
.box-shadowdesign { position: relative; margin-top: -90px; }
.boxshow-27119 { padding: 0 20px; border-radius: 10px; border: 1px solid #dedede; box-shadow: 0 0px 25px 0 rgba(0,0,0,0.05), 0 2px 15px 0 rgba(0,0,0,0.10); }
.tablesub-header { text-align: left; font-size: 16px; font-weight: 600; letter-spacing: 0.5px; }

.top-navbar { margin: 0px; min-height: 65px; background: transparent; border: none; }
    .top-navbar .nav > li > a > i { margin-right: 3px; font-size: 16px; }
    .top-navbar .navbar-brand { padding: 15px 0px 0px 15px; height: auto; }
.navbar-brand > img { min-width: 50px; max-width: 180px; height: auto; }
.top-navbar .nav > li { position: relative; display: inline-block; margin: 0px; padding: 0px; margin-right: 10px; }
    .top-navbar .nav > li:last-child { position: relative; display: inline-block; margin: 0px; padding: 0px; margin-right: 0px; }
    .top-navbar .nav > li > a { position: relative; display: block; padding: 15px 5px 0px 5px; color: #000000; margin: 0px; }
        .top-navbar .nav > li > a:hover, .top-navbar .nav > li > a:focus { text-decoration: none; background: transparent; }
.navbar-top-links { margin-right: 20px; font-size: 13px; }
.arrow { float: right; margin-top: 8px; }
.fa.arrow:before { content: "\f104"; }
.active > a > .fa.arrow:before { content: "\f107"; }
.dropdown-user li { margin: 8px 0; }
.navbar-header { background: transparent; }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: transparent; border: 0; }
.navbar-default .navbar-toggle { background-color: transparent; border: 0; }
    .navbar-default .navbar-toggle .icon-bar { background-color: #FFF; }
.dropdown-menu > li > a > strong { color: #0866C6; padding: 5px 0; display: inline-block; font-weight: 500; }
.datetime-info { position: absolute; right: 25px; bottom: 7px; font-size: 11px; color: #000; }

.permission-wrapper .logo-box { width: 100%; position: relative; background: #0c4e6f; color: #fff; padding: 10px; text-align: center; border-radius: 10px; box-shadow: 0 0 6px rgba(0,0,0,0.16); -webkit-transition: all .25s cubic-bezier(.02,.01,.47,1); transition: all .25s cubic-bezier(.02,.01,.47,1); }
    .permission-wrapper .logo-box:hover { background: #4d7690; box-shadow: 0 10px 10px rgba(0,0,0,.40); -webkit-transform: translateY(-7px); transform: translateY(-7px); -webkit-transition-delay: 0s !important; transition-delay: 0s !important; }
    .permission-wrapper .logo-box .top { position: relative; }
        .permission-wrapper .logo-box .top span { font-size: 45px; display: block; margin: 10px 0px; }
    .permission-wrapper .logo-box .name { font-family: 'Roboto', sans-serif; color: #fbd933; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 7px; }
    .permission-wrapper .logo-box .description { font-size: 12px; margin-bottom: 3px; line-height: 14px; }
    .permission-wrapper .logo-box .right-tick { color: #81ec81; position: absolute; right: 7px; font-size: 16px; }

    .permission-wrapper .logo-box.dimdiv { opacity: 0.5 }
        .permission-wrapper .logo-box.dimdiv:hover { transform: none; box-shadow: none; background-color: #0c4e6f; opacity: 0.5; cursor: not-allowed; }

.upload-file { position: relative; border-radius: 8px; background: #e9eef3; padding: 10px; width: 100%; height: 100%; }
    .upload-file .outer { display: flex; justify-content: center; align-items: center; text-align: center; padding: 15px 0; border: 1px dashed #093a71; border-radius: 4px; background: #F0F6FB; min-height: 200px; }
    .upload-file .file-input { position: relative; }
        .upload-file .file-input input { opacity: 0; position: absolute; width: 100%; height: 100%; cursor: pointer; }
.filelist li { display: flex; align-items: center; color: #727272; font-size: 14px; margin-bottom: 3px; word-break: break-word; }
    .filelist li i { font-size: 16px; color: #0d57ab; padding-right: 5px; }
    .filelist li a { color: #121212; text-decoration: underline; }
.canvasbox { border: 1px solid #d3d3d3; margin: 10px 0; background-color: #ffffff; -webkit-box-shadow: inset 0px 0px 30px 0px rgba(227,227,227,1); -moz-box-shadow: inset 0px 0px 30px 0px rgba(227,227,227,1); box-shadow: inset 0px 0px 30px 0px rgba(227,227,227,1); }

#terms-wrapper { position: relative; width: 100%; height: 600px; overflow: auto; margin-bottom: 10px; }
.ssb_down { display: none; background-color: #33ccaa; bottom: 0; cursor: pointer; position: absolute; right: 0; border-radius: 0px; }
.ssb_sb { background-color: #1855ad; cursor: pointer; position: absolute; right: 0; border-radius: 10px; }
.ssb_sb_down { background-color: #1855ad; }
.ssb_sb_over { background-color: #1855ad; }
.ssb_st { background-color: #d7d7d7; cursor: pointer; height: 100%; position: absolute; right: 0; top: 0; border-radius: 10px; }
.ssb_up { display: none; background-color: #33ccaa; cursor: pointer; position: absolute; right: 0; top: 0; border-radius: 0px; }
#terms-wrapper #divPageBodyHTML { width: 100%; height: 100%; padding-right: 30px; position: relative; }
    #terms-wrapper #divPageBodyHTML .complogo img { max-width: 230px; height: auto; }
    #terms-wrapper #divPageBodyHTML h3 { color: #000; font-weight: 600; font-size: 22px; margin-bottom: 20px; line-height: 28px; }
    #terms-wrapper #divPageBodyHTML p { margin-bottom: 15px; line-height: 24px; word-break: break-word; }
    #terms-wrapper #divPageBodyHTML .table-card { margin-bottom: 20px; }
    #terms-wrapper #divPageBodyHTML .table, #terms-wrapper #divPageBodyHTML .table-border { background-color: #fff; margin-bottom: 0 }
        #terms-wrapper #divPageBodyHTML .table > thead > tr > th { color: #222222; font-size: 16px; padding: 6.5px 16px; font-weight: 600; white-space: nowrap; background-color: #e7ecf3; vertical-align: top; border-bottom: 1px solid #b1b8c1; }
        #terms-wrapper #divPageBodyHTML .table > tbody > tr > td { color: #222222; font-size: 16px; padding: 16px; font-weight: 400; line-height: 20px; vertical-align: middle; border: 0; }
        #terms-wrapper #divPageBodyHTML .table-border > tbody > tr > td { color: #222222; font-size: 16px; padding: 16px; font-weight: 400; line-height: 20px; vertical-align: middle; border: 1px solid #b1b8c1; }
    #terms-wrapper #divPageBodyHTML tr td.bg { background-color: #f2f6fd; }
    #terms-wrapper #divPageBodyHTML ul.list { list-style-type: decimal; margin-left: 30px; }
        #terms-wrapper #divPageBodyHTML ul.list li { line-height: 28px; }

.main-footer { background: #fff; padding: 10px 30px; border-top: 1px solid #d2d6de; font-size: 11px; }
    .main-footer .logo img { max-width: 125px; height: auto; }
    .main-footer .copyright { text-align: right }

/*------------------------------------------------------------------*/
/*	Modal Popup
/*------------------------------------------------------------------*/
.modal { text-align: center; padding: 0 !important; }
    .modal:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -4px; }
.modal-dialog { display: inline-block; text-align: left; vertical-align: middle; }
.modal-header { padding: 10px 15px; border-bottom: 0; background: #1c93d1; -webkit-background-clip: padding-box; float: left; width: 100%; }
.modal-content { background: #f6f6f1; border: 0px solid #d6d7e9; border-radius: 0; position: relative; z-index: 1; }
.modal-body { padding: 10px 15px 0px 15px; font-size: 14px; line-height: 20px; background: #fff; }
    .modal-body p { font-weight: 400; line-height: 20px; }
    .modal-body strong { color: #0c2074; }
h4.modal-title { font-size: 18px; font-weight: 500; color: #fff; line-height: 25px; }
.modal-header .close { margin-top: 0px; font-size: 30px; font-weight: 400; color: #fff; opacity: 1; }
.modal-footer { padding: 5px 8px; text-align: center; border: 0; background: #fff; border-top: 1px solid #e8e8e8; float: left; width: 100%; }
.modal .close { color: #fff; opacity: 1; padding: 8px 12px 0px 0px; font-size: 25px; float: none; position: absolute; right: 0; top: 0; }


@media (min-width:992px) and (max-width:1024px) {
}

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

    .canvasbox { width: 100%; height: 180px; }
    #terms-wrapper #divPageBodyHTML h3 { font-size: 20px; line-height: 26px; }
    .contentWrapper .content { width: 58%; }
}

@media (max-width: 767px) {

    .header-logo img { max-width: 275px; }
    .escosales-login .login-form { max-width: 95%; padding: 20px 25px; }
    .contentWrapper .content { width: 95%; }
    .contentWrapper .loginfooter { justify-content: center; gap: 10px; }
    .escosales-login .login-form .form-control.wauto { width: 68%; }
    .bg-section { min-height: inherit; }
    .box-shadowdesign { margin-top: 30px; }
    .datetime-info { display: none }
    .top-navbar { display: flex; justify-content: center; align-items: center; flex-direction: column; }
        .top-navbar .navbar-brand { float: none; padding: 0; }
    .navbar-brand > img { max-width: 200px; margin: auto; }
    .top-navbar .nav > li > a { padding: 15px 5px 10px 5px; }
    .boxshow-27119 { padding: 0 10px; }
    .no-h-padding { padding-left: 0px !important; padding-right: 0px !important; }
    .canvasbox { width: 100%; height: 150px; }
    .upload-file .outer { padding: 15px; }
    .btn-xs { padding: 8px 20px !important; }
    #terms-wrapper #divPageBodyHTML h3 { font-size: 18px; line-height: 26px; }
    .main-footer { padding: 10px; text-align: center !important; }
        .main-footer .copyright { text-align: center }
}

@media (max-width: 360px) {

    .escosales-login .login-form .form-control.wauto { width: 135px; }
    .escosales-login .login-form { padding: 20px; }
    .header-logo { padding: 15px 0px; }
    .escosales-login .login-form hr { margin: 20px -15px 20px -15px; }
    .contentWrapper .content { margin: 0 auto; }
}