/*---------------------------------------------GENERAL----*/
html, body {font-size:12px; font-family:'Open Sans', sans-serif; font-weight:300; box-sizing:border-box;}
body {position:relative; width:100%; min-height:100vh; overflow-x:hidden;}

a {color:inherit;}
a:hover {color:inherit; text-decoration:none;}

.homeA {width: 100%;display: block;}

#mainContainer {padding:30px 40px;}

#homeBtns {margin: auto; width: 100%; justify-items: center; display: grid;}
.homeList {display: contents;}

.hidden {display:none!important;}

.chbx_container {text-align: center; padding-top: 0.5rem;}
.fil_ia_lab {font-size:12px; padding:0.5rem 0.5rem 0rem 0.5rem;}

/*---------------------------------------------TEXT----*/
.textLeft {text-align:left;}
.textRight {text-align:right;}
.textCentre {text-align:center;}

h2 {font-size:2rem; border-bottom:1px solid #0265ac; padding-bottom:4px;}
h3 {font-size:1.5rem; border-bottom:1px solid #0265ac; padding-bottom:3px;}

.homeHeader {text-align: center; padding-top: 1rem;}

.fontSemiBold {font-weight:500;}
.fontBold {font-weight:600;}

.styleItalic {font-style:italic;}

.font10 {font-size:10px;}
.font12 {font-size:12px;}

/*---------------------------------------------COLOURS----*/
.bgBlue {background:linear-gradient(145deg, #0265ac, #093250);}
.bgWhite {background-color:#eee;}

/*---------------------------------------------DISPLAY----*/
.db {display:block;}

.fullw {width:100%;}

/*---------------------------------------------SPACING----*/
.m-t-5 {margin-top:5px;}
.m-t-10 {margin-top:10px;}
.m-t-20 {margin-top:20px;}
.m-t-30 {margin-top:30px;}
.m-t-40 {margin-top:40px;}
.m-t-50 {margin-top:50px;}
.m-t-60 {margin-top:60px;}

.m-r-5 {margin-right:5px;}
.m-r-10 {margin-right:10px;}

.m-b-5 {margin-bottom:5px;}
.m-b-10 {margin-bottom:10px;}
.m-b-20 {margin-bottom:20px;}
.m-b-30 {margin-bottom:30px;}
.m-b-40 {margin-bottom:40px;}

.p-10 {padding:10px;}

.p-l-10 {padding-left:10px;}

/*---------------------------------------------FORMS----*/
.formGroup {position:relative;}

label {font-weight:600; margin-bottom:2px; margin-left:-2px; font-style:italic; font-size:10px;}

input {border:1px solid #ddd; border-radius:5px; padding:5px 10px;}
textarea {border:1px solid #ddd; border-radius:5px; padding:5px 10px;}
.select {position:relative;}
.select::after {position:absolute; top:50%; right:7px; transform:translateY(-50%); display:block; content:'\f078'; font-family:'Font Awesome 5 Pro'; font-weight:900; pointer-events:none;}
.select select {appearance:none; border:1px solid #eee; border-radius:5px; padding:5px 10px; background:transparent;}

label.error {display:block; text-align:right; font-size:0.8em; font-style:italic; color:#0265ac;}

input:disabled {background:#eee; cursor:not-allowed;}

/*---------------------------------------------HEADER----*/
header {width:100%; height:10px; background:linear-gradient(145deg, #0265ac, #093250); color:#fff; position:relative;}
#headerList {position:absolute; top:5px; right:10px; background: #093250; list-style:none; padding:0 10px; margin:0; border-radius:0 0 3px 3px;}
#headerList li {display:inline-block; padding:3px; cursor:pointer; font-size:14px;}

.page_head{ padding-bottom: 4px; border-bottom: 1px solid #0265ac; }
.head_type{ display:inline; border-bottom: none; }
.head_info{ float:right; border-bottom: none; }
.head_doubled{ display:inline; border-bottom: none;}
.head_info_doubled{ float:right; border-bottom: none; }

/*---------------------------------------------SIDEBAR----*/
#sidebar {width:200px; background:linear-gradient(145deg, #0265ac, #093250); height:100vh;  position:fixed; top:0; left:-200px; color:#fff; transition:left 0.3s; z-index:100;}
#sidebar.open {left:0;}
/* #sidebarTrigger {position:absolute; top:20px; right:-30px; width:30px; height:30px; background:#0265ac; cursor:pointer; line-height:30px; font-size:16px; text-align:center; border-radius:0 3px 3px 0;} */
#sidebar .sideMenu {position:absolute; top:150px; left:0; width:100%; height:calc(100vh - 160px); overflow:auto; list-style:none; padding:0;}
#sidebar .sideMenu li > a {display:block; border-bottom:1px solid #aaa; padding:7px 15px; transition:all 0.4s;}
#sidebar .sideMenu li:first-child > a {border-top:1px solid #aaa;}
#sidebar .sideMenu li > a:hover {background: #093250; padding-left:20px;}

#appLogo {width:calc(100% - 20px); margin:20px auto; max-width:100px;}
#appLogo img {width:100%;}
#appLogoHome {width:calc(100%); margin: auto; max-width:200px;background:linear-gradient(145deg, #0265ac, #093250); border-radius: 1rem;}
#appLogoHome img {width:100%;padding: 1em;}

/*---------------------------------------------BREADCRUMBS----*/
#breadcrumbs {font-size:0;}
#breadcrumbs::before {display:inline-block; content:''; font-size:1rem; margin-right:2px; width:10px; background:#093250; border-radius:3px 0 0 3px; height:28px;}
#breadcrumbs ul {list-style:none; padding:0; font-size:0; display:inline-block; position:relative; bottom:10px;}
#breadcrumbs li {display:inline-block; font-size:1rem; margin-right:2px;}
#breadcrumbs li a {display:block; padding:5px 10px; background:#093250; color:#fff; position:relative;}
#breadcrumbs li:last-child a {background: #0265ac;}
#breadcrumbs li:last-child a::after {display:block; position:absolute; top:0; right:-14px; height:0; width:0; border-top:14px solid transparent; border-bottom:14px solid transparent; border-left:14px solid #0265ac; content:'';}

/*---------------------------------------------TABLES----*/
.salmonTable thead {background-color:#093250; color:#fff; border-radius:3px 3px 0 0; overflow:hidden;font-size: 0.9rem;}

.salmonTable tbody tr:not(:last-child) {border-bottom:1px solid #ccc;}
.salmonTable tbody tr {transition:background-color 0.3s; cursor:default;}
.salmonTable tbody tr:hover {background:linear-gradient(145deg, #0265ac, #093250); color: #fff}

.salmonTable tfoot {background-color:#093250; color:#fff; border-radius:0 0 3px 3px; font-size:0.5rem;}

.salmonTable td, .salmonTable th {padding:3px 4px;}

.salmonTable .actionList {list-style:none; padding:0; margin:0;}
.salmonTable .actionList li {display:inline-block; background-color:#aaa; color:#fff; width:20px; height:20px; border-radius:3px; line-height:20px; text-align:center; cursor:pointer; transition:all 0.4s;}
.salmonTable .actionList li:hover {background: #0265ac;}

.salmonTable .tableFilters {margin:10px 0 0; background:#ddd; padding:10px;}

.salmonTable .tableToolbar {margin-bottom:5px; margin-top:10px; display:flex; justify-content:space-between; flex-wrap:wrap;}
.salmonTable .tableNav {list-style:none; padding:0; margin-bottom:0; font-size:0; display:inline-block;}
.salmonTable .tableNav li {display:inline-block; background-color:#093250; color:#fff; font-size:16px; height:30px; width:30px; line-height:30px; text-align:center; cursor:pointer;}
.salmonTable .tableNav > li:first-child {border-radius:3px 0 0 3px;}
.salmonTable .tableNav > li:last-child {border-radius:0 3px 3px 0;}
.salmonTable .tableNav > li:not(:last-child) {margin-right:1px;}
.salmonTable .tableFiltersBtn {display:inline-block; width:30px; height:30px; background:linear-gradient(145deg, #0265ac, #093250); color:#fff; cursor:pointer; border-radius:3px; text-align:center; line-height:30px; position:relative; bottom:2px;}

/*---------------------------------------------BUTTONS----*/
.btn {display:inline-block; cursor:pointer; padding:5px 15px; background-color:#093250; color:#fff; font-weight:600; transition:all ease 0.4s;}
.btn:hover {opacity:0.8; color: #fff;}

.btnBlue {background:linear-gradient(145deg, #0265ac, #093250); color:#fff;transition:all ease 0.4s;}
.btnBlue:hover {opacity:0.8; color:#fff;}
.btnBlack {background:linear-gradient(145deg, #093250, #012e50); color:#fff;transition:all ease 0.4s;}
.btnBlack:hover {opacity:0.8; color:#fff;}

.btnList {margin: 1rem 1rem 1rem 1rem; width: 25%; position: relative; padding: 0.5rem;}

.btn.disabled {opacity:0.5; cursor:not-allowed; pointer-events:none;}

/*---------------------------------------------DEBUG----*/
pre {background:#eee; border:1px solid #ddd; border-radius:3px; padding:5px;}

/*---------------------------------------------LOADERS----*/
.showLoading {display:none;}
.loading .showLoading {display:block;}
.loading .hideLoading {display:none;}

.loadIndicator {font-style:italic; color:#aaa; font-size:1.2rem;}
.loadIndicator i {display:block; color:#0265ac; font-size:2.5rem; width:20px; margin:0 auto;}

/*---------------------------------------------NOTIFICATIONS----*/
#toasterContainer {text-align:center; list-style:none; padding:0; max-width:300px; width:calc(100% - 10px); position:fixed; top:30px; left:50%; transform:translateX(-50%); z-index:200;}
.toaster {background:#444; border-radius:3px; color:#fff; padding:10px 10px 15px; margin-top:5px; opacity:0; transition:all 0.3s; position:relative; top:-5px; pointer-events:none;}
.toaster.open {opacity:1; top:0; pointer-events:all;}
.toasterTitle {font-weight:600; font-size:1.1em;}
.toasterButtons {margin-top:10px;}

.systemMessage {margin-bottom:10px; border-radius:3px; background:#ddd; padding:10px 15px; font-style:italic; color:#444;}
.systemMessage.noticeMessage {background:#CBDEEC;}
.systemMessage.warningMessage {background: #ECE7CB;}
.systemMessage.errorMessage {background:#ECCBCB;}

/*---------------------------------------------LISTS----*/
.bubbleList {list-style:none; padding:0; margin:0; font-size:10px;}
.bubbleList li {display:inline-block; background:#aaa; color: #fff; padding:3px 6px; border-radius:3px; margin-right:3px;}

.optionList {list-style:none; padding:0; margin:0;}
.optionList li::before {display:inline; color:#0265ac; margin-right:5px; content:'\f054'; font-family:'Font Awesome 5 Pro'; font-weight:900; position:relative; top:1px;}

/*---------------------------------------------MODALS----*/
#modalWindow h2 {font-size:1.5rem;}
#modalOverlay {background:rgba(0,0,0,0.85); position:fixed; top:0; left:0; width:100%; height:100vh; z-index:100; display:none;}
#modalWindow {background:#fff; padding:15px 20px; border-radius:3px; position:fixed; top:20px; left:50%; transform:translateX(-50%); width:calc(100% - 40px); max-width:600px; z-index:101; display:none;}
#modalX {position:absolute; top:0; right:5px; color:#444; padding:10px; cursor:pointer; font-size:16px;}
#modalBody {padding:0 10px 15px;}

/*---------------------------------------------SYNC----*/
.splashDisplay {text-align:center;}
.splashDisplay i {font-size:40px;}

#fetchInProgress i, #finalizeDisplay i {color:#0265ac;}
#fetchCompleted i {color:#209733;}
#fetchError i {color:#972020;}

/*--------------------------------------------- ----*/