/*
Responsive breakpoints
xs = max-width: 575px
sm = max-width: 767px
md = max-width: 991px
lg = max-width: 1199px
xl = min-width: 1200px
*/

@font-face {
  font-family: 'normal';
  src: url('../fonts/Inter-Medium.eot');
  src: url('../fonts/Inter-Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Inter-Medium.woff') format('woff'),
    url('../fonts/Inter-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'normal';
  src: url('../fonts/Inter-SemiBold.eot');
  src: url('../fonts/Inter-SemiBold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Inter-SemiBold.woff') format('woff'),
    url('../fonts/Inter-SemiBold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'heading';
  src: url('../fonts/Inter-Medium.eot');
  src: url('../fonts/Inter-Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Inter-Medium.woff') format('woff'),
    url('../fonts/Inter-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'heading';
  src: url('../fonts/Inter-SemiBold.eot');
  src: url('../fonts/Inter-SemiBold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Inter-SemiBold.woff') format('woff'),
    url('../fonts/Inter-SemiBold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

body { font-family: 'normal',sans-serif; font-weight: normal; font-size: 10pt; color: #112448; }

h1, h2, h3, h4, h5, h6 { font-family: 'heading',sans-serif; font-weight: normal; }

p { margin: 0; }

blockquote { font-size: inherit; border-left: 15px solid #eee; color: #606266;
             padding-top: 3px; padding-bottom: 6px; position: relative; border-radius: 10px 0 0 0; }
blockquote:before { content: "\f10d"; font-family: "Font Awesome 5 Pro"; font-weight: 900; font-size: 17px;
                    color: #888; position: absolute; left: -10px; top: 0px; }

iframe { border: none; margin: 0; padding: 0; }

.siteLogo {
  position: absolute; top: 20px; left: 30px;
  width: 48px; height: 48px;
  background: url("/images/Able-favicon-V8.png") no-repeat no-repeat;
}
.siteLogo:after {
  content: url("/images/able-logo-text.png");
  display: inline-block;
  width: 80px; height: 30px;
  margin-left: 60px; margin-top: 12px;
}
.ajaxSubmit-errorField { border-color: #D34228; }
.ajaxSubmit-errorMsg { display: none; color: #F00909; padding: 0px 2px; margin-top: 2px; min-width: 200px; text-align: left; }
.ajaxSubmit-errorMsg > p { margin: 0; padding: 0; }
.ajaxSubmit-errorMsg > p + p { margin-top: 2px; }
.form-group .ajaxSubmit-errorMsg { margin-bottom: -5px; }
.select2 + .ajaxSubmit-errorMsg { margin-top: 5px; }
.ajaxSubmit-errorMsg-nowrap .ajaxSubmit-errorMsg { overflow-x: visible; white-space: nowrap; }
.box-background { background: #fff; }

.debugStackDump { background: none; border: none; color: #000; word-break: keep-all;
                  white-space: pre-wrap; font: bold 8.5pt/12pt 'roboto mono',arial; color: #111; }
.debugStackDump b { color: #CC0000; }
.debugStackDump i, .debugStackDump em { color: blue; font-style: normal; }
.debugStackDump code { font-family: 'roboto mono'; color: green; display: block; }

/* Bootstrap customisation */

.modal.verticalCenter .modal-dialog { margin-top: 10%; transform: translateY(-10%); }
/*.modal.plsWait .modal-content { border-radius: 30px; border: 3px solid #39A1F0; }*/
.fade { transition: none; }
.modal-backdrop { display: none; }
.modal-backdrop.in { opacity: 0.2; }
.modal.in .modal-dialog { transition: none !important; }

.form-control, .form-group input[type=text], .form-group select, .form-group textarea { color: #13274B; }
.input-group.date input[type=text] { background: #fff; color: #13274B; }
.form-group .btn + .checkbox { display: inline-block; margin-left: 15px; }
.form-group.display-only { margin-bottom: 20px; }
.row.form-group.display-only > label + div { padding-top: 7px; } /* in line with bootstrap label padding */

/* screenLog custom styles */
.chinchang-screenLog { position:fixed; right:0; height: auto !important; top: 85px; min-width: 450px !important; max-height: 50vh; overflow:auto; padding: 0 !important;
  z-index:2147483647; font-family:'roboto medium','roboto','consolas',Helvetica,Arial,sans-serif; font-size: 1em; text-align:left;  background: #444; border: 4px solid #111; }
.chinchang-screenLog-title { position: fixed; width: 100%;  color: #fff; display: block; padding: 2px 5px 4px; background: #222; cursor: move; }
.chinchang-screenLog-btnClear { background-color: #555; border: none; }
.chinchang-screenLog-rows { margin: 40px 0; }
.chinchang-screenLog-row { line-height: normal; height: auto; word-wrap: break-word; color: #fff; font: normal 9pt arial,'roboto',sans-serif; padding: 3px 10px 3px 10px; max-width: 550px; }
.chinchang-screenLog-row.serverlog { color: #BFFFFE; font-family: 'roboto mono medium', Consolas, monospace; }
.chinchang-stackTrace { margin-left: 15px; padding: 3px 8px 0px; color: #000; }

body.dark-mode.AdminLTE .wrapper { background-image: none; }

/* jBox tooltip styles */
.jbox-style-info .jBox-container,
.jbox-style-info .jBox-pointer-bottom::after { box-shadow: 0 0 0px 2px rgb(192, 196, 232); }
.jBox-container, .jBox-content, .jBox-title { color: #666; font-size: 13px; font-family: Roboto, Helvetica, Arial, sans-serif }
.xxjBox-content, .jBox-pointer-bottom::after { background-color: #f8f8f8; }
.xxjBox-content { border-radius: 4px; }

/* flex */

.flex, .flex-fill { display: flex; }
.flex-fill > * { flex: 1; }
.flex-inline { display: inline-flex; }

.flex-column { display: flex; flex-direction: column; }
.flex-align-center { align-items: center; align-content: center; }
.flex-align-baseline { align-items: baseline; }
.flex-align-end { align-items: end; }
.flex-justify-center { justify-content: center; }
.flex-justify-end { justify-content: flex-end; }
.flex-space-between { justify-content: space-between; }
.flex-stretch { align-items: stretch; align-content: stretch; }
.flex0 { flex: 0; }
.flex1 { flex: 1; }
.flex1-scroll-y { flex: 1 1 0; overflow-y: scroll; }

.flex10pc { flex: 0 0 10%; }
.flex20pc { flex: 0 0 20%; }
.flex20pc { flex: 0 0 25%; }
.flex30pc { flex: 0 0 30%; }
.flex20pc { flex: 0 0 33%; }
.flex40pc { flex: 0 0 40%; }
.flex50pc { flex: 0 0 50%; }
.flex60pc { flex: 0 0 60%; }
.flex70pc { flex: 0 0 70%; }
.flex80pc { flex: 0 0 80%; }
.flex90pc { flex: 0 0 90%; }

.align-self-start { align-self: flex-start; }
.align-self-center { align-self: center; }
.align-self-end { align-self: flex-end; }

.gap5 { gap: 5px; }
.gap10 { gap: 10px; }
.gap15 { gap: 15px; }
.gap20 { gap: 20px; }
.gap25 { gap: 25px; }
.gap30 { gap: 30px; }
.gap35 { gap: 35px; }
.gap40 { gap: 40px; }
.gap45 { gap: 45px; }
.gap50 { gap: 50px; }

.grid { display: grid; }
.grid-fill { justify-content: stretch; align-content: stretch; }
.grid-cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.grid-row-gap-10 { row-gap: 10px; }
.grid-row-gap-15 { row-gap: 15px; }
.grid-row-gap-20 { row-gap: 20px; }
.grid-col-gap-10 { column-gap: 10px; }
.grid-col-gap-15 { column-gap: 15px; }
.grid-col-gap-20 { column-gap: 20px; }

/* Styles to initially hide elements. Without !important so they work with jQuery.show() */
.displaynone, .display-none, .displayonload, .hidden { display: none; }

/* Generic tweak styles. !important because they are intended to override existing styles. */

.m0  { margin: 0px !important }
.p0  { padding: 0px !important }

.mb0  { margin-bottom: 0px !important }
.mb1  { margin-bottom: 1px !important }
.mb2  { margin-bottom: 2px !important }
.mb3  { margin-bottom: 3px !important }
.mb4  { margin-bottom: 4px !important }
.mb5  { margin-bottom: 5px !important }
.mb6  { margin-bottom: 6px !important }
.mb7  { margin-bottom: 7px !important }
.mb8  { margin-bottom: 8px !important }
.mb9  { margin-bottom: 9px !important }
.mb10 { margin-bottom: 10px !important }
.mb15 { margin-bottom: 15px !important }
.mb20 { margin-bottom: 20px !important }
.mb25 { margin-bottom: 25px !important }
.mb30 { margin-bottom: 30px !important }
.mb35 { margin-bottom: 35px !important }
.mb40 { margin-bottom: 40px !important }

.mt0  { margin-top: 0px !important }
.mt1  { margin-top: 1px !important }
.mt2  { margin-top: 2px !important }
.mt3  { margin-top: 3px !important }
.mt4  { margin-top: 4px !important }
.mt5  { margin-top: 5px !important }
.mt6  { margin-top: 6px !important }
.mt7  { margin-top: 7px !important }
.mt8  { margin-top: 8px !important }
.mt9  { margin-top: 9px !important }
.mt10 { margin-top: 10px !important }
.mt15 { margin-top: 15px !important }
.mt20 { margin-top: 20px !important }
.mt25 { margin-top: 25px !important }
.mt30 { margin-top: 30px !important }
.mt35 { margin-top: 35px !important }
.mt40 { margin-top: 40px !important }

.ml0  { margin-left: 0px !important }
.ml1  { margin-left: 1px !important }
.ml2  { margin-left: 2px !important }
.ml3  { margin-left: 3px !important }
.ml4  { margin-left: 4px !important }
.ml5  { margin-left: 5px !important }
.ml10 { margin-left: 10px !important }
.ml15 { margin-left: 15px !important }
.ml20 { margin-left: 20px !important }
.ml25 { margin-left: 25px !important }
.ml30 { margin-left: 30px !important }

.mr0  { margin-right: 0px !important }
.mr2  { margin-right: 2px !important }
.mr3  { margin-right: 3px !important }
.mr4  { margin-right: 4px !important }
.mr5  { margin-right: 5px !important }
.mr10 { margin-right: 10px !important }
.mr15 { margin-right: 15px !important }
.mr20 { margin-right: 20px !important }
.mr25 { margin-right: 25px !important }
.mr30 { margin-right: 30px !important }

.pb0  { padding-bottom: 0px !important }
.pb1  { padding-bottom: 1px !important }
.pb2  { padding-bottom: 2px !important }
.pb3  { padding-bottom: 3px !important }
.pb4  { padding-bottom: 4px !important }
.pb5  { padding-bottom: 5px !important }
.pb6  { padding-bottom: 6px !important }
.pb7  { padding-bottom: 7px !important }
.pb8  { padding-bottom: 8px !important }
.pb9  { padding-bottom: 9px !important }
.pb10 { padding-bottom: 10px !important }
.pb15 { padding-bottom: 15px !important }
.pb20 { padding-bottom: 20px !important }

.pt0  { padding-top: 0px !important }
.pt1  { padding-top: 1px !important }
.pt2  { padding-top: 2px !important }
.pt3  { padding-top: 3px !important }
.pt4  { padding-top: 4px !important }
.pt5  { padding-top: 5px !important }
.pt6  { padding-top: 6px !important }
.pt7  { padding-top: 7px !important }
.pt8  { padding-top: 8px !important }
.pt9  { padding-top: 9px !important }
.pt10 { padding-top: 10px !important }
.pt15 { padding-top: 15px !important }
.pt20 { padding-top: 20px !important }

.pl0  { padding-left: 0px !important }
.pl1  { padding-left: 1px !important }
.pl2  { padding-left: 2px !important }
.pl3  { padding-left: 3px !important }
.pl4  { padding-left: 4px !important }
.pl5  { padding-left: 5px !important }
.pl10 { padding-left: 10px !important }
.pl15 { padding-left: 15px !important }
.pl20 { padding-left: 20px !important }
.pl30 { padding-left: 30px !important }
.pl40 { padding-left: 40px !important }

.pr0  { padding-right: 0px !important }
.pr1  { padding-right: 1px !important }
.pr2  { padding-right: 2px !important }
.pr3  { padding-right: 3px !important }
.pr4  { padding-right: 4px !important }
.pr5  { padding-right: 5px !important }
.pr10 { padding-right: 10px !important }
.pr15 { padding-right: 15px !important }
.pr20 { padding-right: 20px !important }
.pr30 { padding-right: 30px !important }
.pr40 { padding-right: 40px !important }

.width-fit-content { width: fit-content !important; }
.width-auto { width: auto !important; min-width: auto !important; max-width: auto !important; }
.w100p, .w100pc { width: 100% !important; min-width: 100% !important; max-width: 100% !important; }
.h100p, .h100pc { height: 100% !important; min-height: 100% !important; max-height: 100% !important; }

.w50  { width:  50px !important; min-width:  50px !important; max-width:  50px !important; }
.w75  { width:  75px !important; min-width:  75px !important; max-width:  75px !important; }
.w100 { width: 100px !important; min-width: 100px !important; max-width: 100px !important; }
.w125 { width: 125px !important; min-width: 125px !important; max-width: 125px !important; }
.w150 { width: 150px !important; min-width: 150px !important; max-width: 150px !important; }
.w175 { width: 175px !important; min-width: 175px !important; max-width: 175px !important; }
.w200 { width: 200px !important; min-width: 200px !important; max-width: 200px !important; }
.w225 { width: 225px !important; min-width: 225px !important; max-width: 225px !important; }
.w250 { width: 250px !important; min-width: 250px !important; max-width: 250px !important; }
.w275 { width: 275px !important; min-width: 275px !important; max-width: 275px !important; }
.w300 { width: 300px !important; min-width: 300px !important; max-width: 300px !important; }
.w350 { width: 350px !important; min-width: 350px !important; max-width: 350px !important; }
.w400 { width: 400px !important; min-width: 400px !important; max-width: 400px !important; }
.w450 { width: 450px !important; min-width: 450px !important; max-width: 450px !important; }
.w500 { width: 500px !important; min-width: 500px !important; max-width: 500px !important; }
.w760 { width: 760px !important; min-width: 760px !important; max-width: 760px !important; }

.w25pc { width:  25% !important; min-width:  25% !important; max-width:  25% !important; }
.w33pc { width:  33% !important; min-width:  33% !important; max-width:  33% !important; }
.w50pc { width:  50% !important; min-width:  50% !important; max-width:  50% !important; }

.h5  { height: 5px !important; }
.h10 { height: 10px !important; }
.h15 { height: 15px !important; }
.h20 { height: 20px !important; }
.h25 { height: 25px !important; }
.h30 { height: 30px !important; }
.h35 { height: 35px !important; }
.h40 { height: 40px !important; }
.h45 { height: 45px !important; }
.h50 { height: 50px !important; }
.vh100 { height: 100vh; }

.mw50 { max-width: 50px !important; }
.mw75 { max-width: 75px !important; }
.mw100 { max-width: 100px !important; }
.mw125 { max-width: 125px !important; }
.mw150 { max-width: 150px !important; }
.mw175 { max-width: 175px !important; }
.mw200 { max-width: 200px !important; }
.mw225 { max-width: 225px !important; }
.mw250 { max-width: 250px !important; }
.mw275 { max-width: 275px !important; }
.mw300 { max-width: 300px !important; }
.mw325 { max-width: 325px !important; }
.mw350 { max-width: 350px !important; }
.mw375 { max-width: 375px !important; }
.mw400 { max-width: 400px !important; }
.mw425 { max-width: 425px !important; }
.mw450 { max-width: 450px !important; }
.mw475 { max-width: 475px !important; }
.mw500 { max-width: 500px !important; }
.mw550 { max-width: 550px !important; }
.mw600 { max-width: 600px !important; }
.mw650 { max-width: 650px !important; }
.mw700 { max-width: 700px !important; }
.mw750 { max-width: 750px !important; }
.mw800 { max-width: 800px !important; }

.minw50 { min-width: 50px !important; }
.minw75 { min-width: 75px !important; }
.minw100 { min-width: 100px !important; }
.minw125 { min-width: 125px !important; }
.minw150 { min-width: 150px !important; }
.minw175 { min-width: 175px !important; }
.minw200 { min-width: 200px !important; }
.minw225 { min-width: 225px !important; }
.minw250 { min-width: 250px !important; }
.minw275 { min-width: 275px !important; }
.minw300 { min-width: 300px !important; }
.minw325 { min-width: 325px !important; }
.minw350 { min-width: 350px !important; }
.minw375 { min-width: 375px !important; }
.minw400 { min-width: 400px !important; }
.minw425 { min-width: 425px !important; }
.minw450 { min-width: 450px !important; }
.minw475 { min-width: 475px !important; }
.minw500 { min-width: 500px !important; }

.no-min-height { min-height: initial !important; }

.align-left, .taleft, .left { text-align: left !important; }
.align-center, .tacenter, .center { text-align: center !important; }
.align-right, .taright, .right { text-align: right !important; }

.floatleft, .float-left { float: left !important; }
.floatright, .float-right { float: right !important; }

.underline { text-decoration: underline !important; }
.hover-underline:hover { text-decoration: underline !important; }
.focus-underline:focus { text-decoration: underline !important; }

.posrelative { position:relative !important }
.posabsolute { position:absolute !important }

.curdefault { cursor: default !important }
.curwait { cursor: wait !important }
.curpointer { cursor: pointer !important }
.curhandno { cursor: url(../js/ahjqplugins/images/handno.cur),default !important }

.bordernone, .border-none { border: none !important }
.border-top { border-top: 1px solid #ddd !important; }
.border-bottom { border-bottom: 1px solid #ddd !important; }
.border-left { border-left: 1px solid #ddd !important; }
.border-right { border-right: 1px solid #ddd !important; }

.nowrap { white-space: nowrap !important; }
.nowrap-ellipsis { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

.valigntop, .valign-top { vertical-align: top !important; }
.valignmiddle, .valign-middle { vertical-align: middle !important; }

.uppercase { text-transform: uppercase !important }

.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-visble { overflow-x: visible; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-y-visble { overflow-y: visible; }
.overflow-y-auto { overflow-y: auto; }