﻿@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: 500; color: #121212; }
::-webkit-input-placeholder { color: #999999 !important; font-weight: 600 !important; font-family: 'Open Sans', sans-serif; }
:-moz-placeholder { color: #999999 !important; font-weight: 600 !important; font-family: 'Open Sans', sans-serif; }
::-moz-placeholder { color: #999999 !important; font-weight: 600 !important; font-family: 'Open Sans', sans-serif; }
:-ms-input-placeholder { color: #999999 !important; font-weight: 600 !important; font-family: 'Open Sans', sans-serif; }
input { outline: none; }
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; }
.circle-icon-red { display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; font-size: 25px; color: #bd280c; border: 2px solid #bd280c; border-radius: 50%; }
.circle-icon-green { display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; font-size: 25px; color: #299317; border: 2px solid #299317; border-radius: 50%; }
.d-flex { display: flex !important; align-items: center; }
.justify-content-start { -ms-flex-pack: start !important; justify-content: flex-start !important; }
.justify-content-center { -ms-flex-pack: center !important; justify-content: center !important; }
.justify-content-between { -ms-flex-pack: justify !important; justify-content: space-between !important; }
.justify-content-end { -ms-flex-pack: end !important; justify-content: flex-end !important; }

/*************************
  Basic margin padding
*************************/
.m-0 { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; }
.p-0 { padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; }
.no-padding { padding: 0 !important; margin: 0 !important; }

.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 !important }
.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 }

/*************************
  Old 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: 170px; }
.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; }

/*-----------------------------------*/
/*  New Login Screen
/*-----------------------------------*/
.login-wrap { max-width: 100%; width: 100%; width: 100vw; height: 100%; height: 100vh; }
.login-inner { display: flex; flex-wrap: wrap; min-height: 100vh; height: 100%; }
.login-left { width: 67%; position: relative; display: flex; align-items: center; justify-content: center; padding: 30px; background: #030734; }
.login-left:after { content: ''; width: 100%; height: 100%; background-color: rgba(13, 56, 99, 0.5); position: absolute; top: 0; left: 0; }
.login-left .inner-wrap { width: min(98rem, 95%); z-index: 1 }
.login-left .ezcrm-cards { position: relative; width: 60vw; height: 40vw; max-width: 580px; max-height: 320px; margin: 90px auto 0px; color: white; perspective: 1000px; transform-origin: center; }
.login-left .ezcrm-cards__content { position: absolute; width: 100%; height: 100%; transform-origin: center; transform-style: preserve-3d; transform: translateZ(-30vw) rotateY(0); animation: carousel 25s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards; }
.login-left .ezcrm-cards__item { display: flex; justify-content: center; align-items: center; flex-direction: column; position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 40px; width: 60vw; height: 40vw; max-width: 580px; max-height: 320px; box-shadow: 0 5px 20px rgba(0, 0, 0, .1); border-top-left-radius: 40px; border-bottom-right-radius: 40px; transform-origin: center; }
.login-left .ezcrm-cards__item i { color: #062d4c; font-size: 46px; margin-bottom: 10px; }
.login-left .ezcrm-cards__item .title { color: #fff; font-size: 24px; font-weight: 600; margin-bottom: 10px; }
.login-left .ezcrm-cards__item .descr { color: #062d4c; font-size: 18px; text-align: center; }
.login-left .ezcrm-cards__item:nth-child(1) { background: #54d3c5; transform: rotateY(0) translateZ(39vw); }
.login-left .ezcrm-cards__item:nth-child(2) { background: #ebd135; transform: rotateY(72deg) translateZ(39vw); }
.login-left .ezcrm-cards__item:nth-child(3) { background: #80d78d; transform: rotateY(144deg) translateZ(39vw); }
.login-left .ezcrm-cards__item:nth-child(4) { background: #5ebce7; transform: rotateY(216deg) translateZ(39vw); }
.login-left .ezcrm-cards__item:nth-child(5) { background: #ffac32; transform: rotateY(288deg) translateZ(39vw); }

@keyframes carousel {
    0%, 10% { transform: translateZ(-35vw) rotateY(0); }
    15%, 25% { transform: translateZ(-35vw) rotateY(-72deg); }
    35%, 45% { transform: translateZ(-35vw) rotateY(-144deg); }
    50%, 60% { transform: translateZ(-35vw) rotateY(-216deg); }
    70%, 80% { transform: translateZ(-35vw) rotateY(-288deg); }
    90%, 100% { transform: translateZ(-35vw) rotateY(-360deg); }
}

.login-left .wave-wrap { position: fixed; top: 23%; transform: rotate(272deg); left: 0; }
.login-left .wave-wrap:after { content: ''; display: block; left: 0; top: 0; width: 100%; height: 100%; z-index: 11; transform: translate3d(0, 0, 0); }
.login-left .wave { position: fixed; top: 0; left: 0; opacity: .10; background: #ffffff; width: 1500px; height: 1300px; transform-origin: 50% 48%; border-radius: 43%; animation: drift 35000ms infinite linear; }
.login-left .wave.two { animation: drift 15000ms infinite linear; opacity: .1; background: #94e8f1; }
.login-left .wave.three { animation: drift 25000ms infinite linear; background-color: #ffffff; }

@keyframes drift {
    from { transform: rotate(0deg); }
    from { transform: rotate(360deg); }
}

.login-right { width: 33%; display: flex; align-items: center; justify-content: center; padding: 32px 24px; }
.login-right .inner-wrap { width: min(420px, 90%); }
.login-right .inner-wrap .logo { margin-bottom: 70px; text-align: center; }
.login-right .inner-wrap .logo img { max-width: 250px; max-height: 90px; }
.login-right .inner-wrap h1 { position: relative; font-size: 32px; font-weight: 600; padding-bottom: 12px; margin: 20px 0 20px 0; line-height: 1.25; }
.login-right .inner-wrap h1:before { content: ''; background-color: #f49a0d; width: 40px; height: 4px; border-radius: 20px; position: absolute; bottom: 0; }
.login-right .inner-wrap form { width: 100%; }
.login-right .input-wrap label { color: #424242; margin-bottom: 8px; font-weight: 600; }
.login-right .input-wrap .input { position: relative; margin-bottom: 24px; }
.login-right .input-wrap .input .start-icon { color: #2899d3; font-size: 26px; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); }
.login-right .input-wrap .input .start-icon + input { padding-left: 58px; }
.login-right .input-wrap input { color: #121212; display: block; width: 100%; height: 54px; border: 1px solid #b9c1cf; border-radius: 30px; padding: 14px 16px; appearance: none; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); }
.login-right .input-wrap input:focus, .login-right .captcha-wrap input:focus { border: 2px solid #116fb9; }
.login-right .captcha-wrap { display: flex; justify-content: space-between; gap: 20px; padding-top: 10px; }
.login-right .captcha-wrap input { color: #121212; display: block; width: 100%; height: 54px; border: 1px solid #c6cdd9; border-radius: 30px; padding: 14px 16px; padding-left: 25px; appearance: none; background-color: #f5f5f5; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); }
.login-right .captcha-wrap .captcha { color: #106bb3; border: 1px solid #c6cdd9; border-radius: 30px; padding: 14px 26px; margin-left: 0; appearance: none; background-color: #e4f2f9; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); }
.login-right button { display: block; width: 100%; background-color: #116fb9; border-radius: 30px; border: none; padding: 14px 24px; cursor: pointer; color: #fff; text-align: center; font-weight: 600; margin-top: 35px; -webkit-transition: all .4s; -moz-transition: all .4s; -o-transition: all .4s; transition: all .4s; }
.login-right button:hover { background-color: #0d82df; }
.login-right .info { color: #6b7280; margin-bottom: 30px; }
.login-right .copyright { margin: 25px 0 0; color: #6b7280; font-size: 14px; }
.login-right .alert { padding: 11px 16px; font-size: 14px; line-height: 20px; border-left: 3px solid #a94442; border-radius: 8px; margin-bottom: 30px; }


/*-----------------------------------*/
/*  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 { max-width: 170px; 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; font-size: 16px; 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: 13px; 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: #082749; 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: 40px; display: block; margin: 8px 0px; }
.permission-wrapper .logo-box .name { font-family: 'Roboto', sans-serif; color: #fbd933; font-size: 15px; line-height: 20px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 7px; }
.permission-wrapper .logo-box .description { font-size: 14px; margin-bottom: 8px; line-height: 18px; }
.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 dashed #0c6898; margin: 10px 0; background-color: #f7f7f7; -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); border-radius: 10px; }

#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: 500; 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; }

.custom-switch { display: inline-flex; }
.custom-switch label { background-color: #e9e9e9; line-height: 1; text-align: center; padding: 10px 20px 10px 30px; border-radius: 20px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); }
.custom-switch input[type=radio] { margin-top: 2px; z-index: 1 }
.custom-switch label > input[type=radio]:checked + span:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #a3e5a3; border-radius: 20px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); }
.custom-switch label:last-of-type > input[type=radio]:checked + span:before { background-color: #f5a6a6; }
.custom-switch .radio-inline > input[type=radio]:checked + span > span { position: relative; }

/*-----------------------------------*/
/*  TPV Summary
/*-----------------------------------*/
.tpv-topwrap { display: flex; justify-content: center; width: 100%; padding: 16px 8px; font-size: 18px; border-top-left-radius: 10px; border-top-right-radius: 10px; background-color: #f3f3f3; box-shadow: 0 5px 5px 0 rgba(0, 40, 75, .07); }
.tpv-topwrap .inner { width: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.tpv-topwrap p { font-size: 28px; color: #005dc8; font-weight: 600; }
.tpv-bottomwrap { display: flex; flex-direction: column; justify-content: center; width: 96%; margin: 25px auto 25px; }
.tpv-bottomwrap .tpv-title { font-size: 18px; font-weight: 600; line-height: 24px; letter-spacing: 0.02em; color: #005dc8; border: 1px solid #79b3f5; border-width: 1px 1px 0px; border-radius: 12px 12px 0px 0px; background: rgb(255, 255, 255); padding: 5px 10px; max-width: calc(100% - 16px); width: max-content; }
.tpv-bottomwrap .subtitle { color: #10418b; font-weight: 600; padding-bottom: 5px; border-bottom: 1px solid #999999; }
.tpv-bottomwrap .inner { padding: 20px 0 10px 0; border-radius: 0px 12px 12px; border: 1px solid #79b3f5; background-color: #e8f0fc; }
.tpv-bottomwrap .inner .form-group { margin-bottom: 10px; }
.tpv-bottomwrap .inner .value { color: #39414c; }
.tpv-bottomwrap .inner label, .tpv-bottomwrap .inner .value { font-weight: 600; line-height: 20px; word-break: break-word; }
.tpv-bottomwrap .inner.vertform .form-group { margin-bottom: 0px; }
.tpv-bottomwrap .inner.vertform label, .tpv-bottomwrap .inner.vertform .value { margin-bottom: 8px; }
.ml-wizard { width: 95%; display: flex; margin: 10px 0; }
.ml-wizard .ml-wizard-step { flex: 1; float: left; padding: 0; position: relative; }
.ml-wizard .ml-wizard-step .ml-wizard-dot { position: absolute; background-color: #fff; width: 76px; height: 76px; display: block; top: 0px; left: 50%; margin-left: -35px; border-radius: 50%; box-shadow: 0 0 20px 0 rgba(0,0,0,0.07), 0 1px 18px 0 rgba(0,0,0,0.06), 0 3px 5px -1px rgba(0,0,0,0.1); }
.ml-wizard .ml-wizard-step .ml-wizard-dot { display: flex; align-items: center; justify-content: center; background-color: #fff; }
.ml-wizard .ml-wizard-step .ml-wizard-dot i { font-size: 45px; color: #9E9E9E }
.ml-wizard .ml-wizard-step .progress { position: relative; background-color: transparent; border-radius: 0; height: 2px; -webkit-box-shadow: none; box-shadow: none; margin: 40px 0 50px; }
.ml-wizard .ml-wizard-step .title { color: #9E9E9E; text-align: center; font-size: 18px; font-weight: 600; line-height: 18px; }
.ml-wizard .ml-wizard-step:first-child .progress { left: 50%; width: 50%; }
.ml-wizard .ml-wizard-step:last-child .progress { width: 50%; }
.ml-wizard .ml-wizard-step.failed .ml-wizard-dot { border: 3px solid #b00020; }
.ml-wizard .ml-wizard-step.failed .title, .ml-wizard .ml-wizard-step.failed .ml-wizard-dot i { color: #b00020; }
.ml-wizard .ml-wizard-step.completed .ml-wizard-dot { border: 3px solid #27AE60; }
.ml-wizard .ml-wizard-step.completed .title, .ml-wizard .ml-wizard-step.completed .ml-wizard-dot i { color: #27AE60; }
.ml-wizard .ml-wizard-step.started .ml-wizard-dot { border: 3px solid #005dc8; }
.ml-wizard .ml-wizard-step.started .title, .ml-wizard .ml-wizard-step.started .ml-wizard-dot i { color: #005dc8; }
.ring { animation: ring 1s infinite; }

@keyframes ring {
    0% { }
    10% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); }
    20% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); }
    30% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); }
    40% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); }
    50% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); }
    60% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); }
    70% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); }
    80% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); }
    90% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); }
    100% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); }
}

.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; margin: 0 auto; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; color: #fff; border-bottom: 0; border-top-left-radius: 8px; border-top-right-radius: 8px; background-color: #337ab7; box-shadow: 0 1px 5px 0 rgba(162, 162, 163,.85); }
.modal-header .close { float: none; font-size: 22px; color: #fff; opacity: 0.6; }
.modal .close { float: none; display: flex; justify-content: flex-end; font-size: 22px; color: #fff; opacity: 0.6; }
.modal-content { float: left; width: 100%; background: #ffffff; border: 0px solid #d6d7e9; border-radius: 8px; z-index: 1; padding: 0px; box-shadow: 0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12); }
.modal-title { display: flex; flex-grow: 1; font-family: WeblySleekUISemibold,Arial,sans-serif; font-size: 22px; line-height: 36px; font-weight: 400; }
.modal-body { float: left; width: 100%; padding: 20px 22px 0px 22px; font-size: 16px; font-weight: 400; }
.modal-body p { line-height: 20px; }
.modal-body strong { color: #0c2074; }
.modal .modal-footer { float: left; width: 100%; padding: 20px 0; border: 0; text-align: center; }
.modal .form-horizontal .form-group { margin-right: 0px; margin-left: 0px; }
.modal .form-horizontal .control-label { text-align: left; }
.modal .form-horizontal .form-group label { font-weight: 400; font-size: 14px; color: #0c2074; }
.modal .form-horizontal .form-control { font-size: 14px; background: #fff; }
.modal-backdrop.in { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6; }
.modal-open { padding: 0 !important; }
.modal-backdrop { visibility: hidden !important; }
.modal.in { background-color: rgba(0, 0, 0, 0.6); }

@media (min-width:992px) and (max-width:1024px) {

    .tpv-bottomwrap { width: 96%; }
    .login-left, .login-right { width: 100%; }
    .login-left .ezcrm-cards__item:nth-child(1) { background: #54d3c5; transform: rotateY(0) translateZ(55vw); }
    .login-left .ezcrm-cards__item:nth-child(2) { background: #ebd135; transform: rotateY(72deg) translateZ(55vw); }
    .login-left .ezcrm-cards__item:nth-child(3) { background: #80d78d; transform: rotateY(144deg) translateZ(55vw); }
    .login-left .ezcrm-cards__item:nth-child(4) { background: #5ebce7; transform: rotateY(216deg) translateZ(55vw); }
    .login-left .ezcrm-cards__item:nth-child(5) { background: #ffac32; transform: rotateY(288deg) translateZ(55vw); }
}

@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%; }
    .tpv-bottomwrap { width: 96%; }
    .login-left, .login-right { width: 100%; }
    .login-left .ezcrm-cards__item:nth-child(1) { background: #54d3c5; transform: rotateY(0) translateZ(55vw); }
    .login-left .ezcrm-cards__item:nth-child(2) { background: #ebd135; transform: rotateY(72deg) translateZ(55vw); }
    .login-left .ezcrm-cards__item:nth-child(3) { background: #80d78d; transform: rotateY(144deg) translateZ(55vw); }
    .login-left .ezcrm-cards__item:nth-child(4) { background: #5ebce7; transform: rotateY(216deg) translateZ(55vw); }
    .login-left .ezcrm-cards__item:nth-child(5) { background: #ffac32; transform: rotateY(288deg) translateZ(55vw); }
}

@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; }
    .ml-wizard { width: 98%; }
    .ml-wizard .ml-wizard-step .ml-wizard-dot { width: 56px; height: 56px; margin-left: -25px; }
    .ml-wizard .ml-wizard-step .ml-wizard-dot i { font-size: 38px; }
    .ml-wizard .ml-wizard-step .title { font-size: 16px; }
    .tpv-topwrap p { font-size: 24px; }
    .tpv-bottomwrap { width: 92%; }
    .tpv-bottomwrap .inner .form-group { margin-bottom: 0px; }
    .tpv-bottomwrap .inner .value { margin-bottom: 8px; }
    .login-left, .login-right { width: 100%; }
    .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; }
}
