body {
    font-size: 14px;
    padding-top: 56px;
    background-color: #ececec !important;
}

@media screen and (max-width: 990px) {
    body {
        padding-top: 65px;
    }
}



#navbarTitle {
    left: 50%;
    top: 25%;
    transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
    .container {
        padding: 0;
        margin: 0;
        width: 100%;
        max-width: 768px;
    }
}

@media (max-width: 576px) {
    .navbar-title {
        max-width: 50vw;
        font-size: 1rem;
    }

}

.ace_editor {
    height: 600px;
}

.boostrapdangerbackground {
    color: #721c24;
    background-color: #f8d7da
}

.bootstrapsuccessbackground {
    color: #155724;
    background-color: #d4edda
}

.codebox {
    border: 1px solid black;
    box-shadow: 2px 1px;
    padding: 5px;
    border-radius: 3px;
}

.mainnavbar {
    background-color: #0487D9 !important;
    color: white !important;
}

.largecheckbox {
    width: 20px;
    height: 20px;
}

#clearsearch,
#clearsearchpage {
    background-color: white;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

#maincontent {
    padding: 14px;
}

/*
    replacements for jquery mobile css

#menubackbutton {
    border-color: #ddd;
    text-shadow: 0 1px 0 #f3f3f3;
    border-radius: 0.3125em;
    font-weight: 700;
}

#menubackbutton i {
    background-color: #0487D9;
}
*/
.menubackbutton {
    color: white;
    padding: 0.3em 0.5em;
}

.navbar-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70vw;
    margin: 0 auto;
    text-align: center;
    font-size: 1.2rem;
}

.mainpagelist {

    padding: 0;
    list-style: none;
}

.mainpagelistelement {
    display: block;
    position: relative;
    overflow: visible;
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: 400;
    line-height: 1.3;
    font-family: sans-serif;
    background-color: #f6f6f6;
    border-color: #bbb;
    color: #333;
    text-shadow: 0 1px 0 #f3f3f3;
}

.mainpagelistelement:hover {
    background-color: #eee;
}

.mainpagelistelement a {
    border-color: #ddd;
    color: #333;
    text-shadow: 0 1px 0 #f3f3f3;
    margin: 0;
    display: block;
    position: relative;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    text-decoration: none !important;
    user-select: none;
    cursor: pointer;
    padding: 0.7em 1em;
    font-weight: 700;
    font-size: 16px;
    border-width: 1px 0 0;
    border-style: solid;
    border-right-width: 1px;
    border-left-width: 1px;
}

.searchresulttext:hover {
    background-color: #eee;
}

.searchresultlink {
    color: #1a0dab;
    font-size: 18px;
    text-decoration: none;

}

.mainpagelistheader {
    padding: 0.5em 1.143em;
    font-size: 14px;
    font-weight: 700;
    cursor: default;
    outline: 0;
    border-right-width: 1px;
    border-left-width: 1px;
    margin: 0;
    display: block;
    position: relative;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background-color: #0487D9 !important;
    color: white !important;
    text-shadow: none !important;
}

/* CSS For Bedside Clinical Guidelines Web App */
/* Created and maintained by James Mitchell, Software and Systems Engineering, School of Computing and Mathematics, Keele University 
	
	Version 1.5 April 2021
	
*/

/*
	Contents:
	1. Main Page attributes 
	2. Text Attributes
	3. 
*/

/* 

	
	
1. Main Page attributes
-------------------------------------------------------------------------------- 
	
*/

.modal {
    overflow-y: auto !important;
}


.input-group .form-control {
    margin: 0px !important;
}

.container {
    width: 95%;
}

/* 
      
  2. Text attributes
  -------------------------------------------------------------------------------- 
      
  */

.btn-link {
    background-color: #007bff !important;
    color: white !important;
    text-shadow: none !important;
    margin: 0px !important;
}

button {
    white-space: normal !important;
    word-wrap: break-word;
}

label {
    font-size: 14px !important;
}

.ui-page-theme-a,
.ui-content,
.ui-footer,
.ui-bar-inherit,
.ui-panel-wrapper {
    background-color: #ececec !important;
}

.ui-li-divider {
    background-color: #0487D9 !important;
    color: white !important;
    text-shadow: none !important;
}

.ui-loader {
    display: none;
}

.ui-title {
    margin: 0 10% !important;
    margin-top: 20px;
    font-weight: bold !important;
}

.ui-link {
    color: #38c;
    font-weight: 700;
}

h3 .ui-link, .warningred .ui-link, .warningorange .ui-link{
    color: white;
}

.modalbutton,
.modallink {
    text-decoration: underline;
}

ul:not(.navbar-nav, .select2-results__options) {
    padding-left: 20px;
    font-size: 14px;
    margin-bottom: 0px !important;
}

li:not(.nav-item, .mainpagelistelement) {
    padding-bottom: 8px;
}

li p {
    padding: 0px;
    margin: 0px;
}

.blueHR {
    border-top: 1px solid #0487D9;
}

a.ui-btn {
    white-space: normal !important;
}

.card {
    background-color: #fafafa;
    margin: 10px 0;
    border-radius: 10px;
    border: #E1E5E8 1px solid;
    /*box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);*/
    /*-webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16);*/
}

.card-body {
    padding: 10px !important;
}

.card-header {
    background-color: #295E80 !important;
    border-bottom: 0px !important;
}

.card img:not(.originalwidth) {
    width: 100%;
}

.section,
section h2,
.card h2 {
    /*margin: 0px 0px 10px 0px !important;*/
    text-align: center;
    font-size: 1em;
    background-color: #295E80;
    /*padding: 10px 0px 10px 0px;*/
    color: white;
    font-weight: bolder;
    text-shadow: none;
}

.section,
.card h3,
.sub-heading {
    margin: 10px 0px 10px 0px !important;
    text-align: center;
    font-size: 1em;
    font-weight: bold;
    background-color: #047FCC;
    padding: 8px 3px 8px 3px;
    color: white;
    text-shadow: none;
    opacity: 0.8;

    /*border-bottom: 3px solid #1f3f62;*/
    /* Border for h3 headers*/
}

.section,
section img {
    border: 1px solid gray !important;
    max-width: 100% !important;
}

.info {
    color: #059;
    background-color: #BEF;
}

.sup-info {
    font-style: italic;
    font-size: 0.8em;
}

.sub-heading {
    font-weight: bold;
}

.highlight {
    background-color: #fff34d;
    -moz-border-radius: 5px;
    /* FF1+ */
    -webkit-border-radius: 5px;
    /* Saf3-4 */
    border-radius: 5px;
    /* Opera 10.5, IE 9, Saf5, Chrome */
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    /* FF3.5+ */
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    /* Saf3.0+, Chrome */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    /* Opera 10.5+, IE 9.0 */
}

.wrap {
    white-space: normal !important;
}

.paraWrap {
    text-align: center;
    font-size: 0.8em;
    font-weight: 200;
}

.ui-header {
    background-color: #0487D9 !important;
    color: white !important;
    text-shadow: none !important;
    font-weight: bold !important;
}

.ui-header h1 {
    color: white;
    line-height: 2em;
}

.ui-header h3 {
    padding-top: 30px !important;
}

.ui-header .ui-title {
    font-size: 0.8em;
    white-space: normal !important;
    min-height: 30px;
}

input::placeholder {
    color: gray;
    font-size: 1em;
    font-weight: 200;
    font-style: italic;
}

.ui-footer {
    background-color: transparent !important;
    border: none !important;
    font-size: 0.8em !important;
}

.ui-footer h4 {
    font-weight: 300;
    padding: 0px;
    margin: 0px;
}

/* Tables -----------------------------------------------------------------*/

/* 
  Generic Styling, for Desktops/Laptops with horizontal scroll
  */

table:not(.table, .notablestyle) {
    display: block;
    width: 100%;
    border-collapse: collapse;
    overflow: scroll;
    /* Scrollbar are always visible */
    overflow: auto;
    /* Scrollbar is displayed as it's needed */
    /*
    border: 1px solid #bea2a2;*/
}

.notablestyle,
.notablestyle tr,
.notablestyle td {
    border: 0;
}

/* Zebra striping on List View ----------------------------------------------------*/
table:not(.noalternatingrows) tr:nth-of-type(odd) {
    background: #eee;
}

.accordian {
    border-color: #CC7700 !important;
    border: 1px solid;
    padding: 5px;
    border-radius: 5px;
}

td,
th {
    padding: 6px;
    border: 1px solid #ccc;
    text-align: left;
}

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

/* Warnings -----------------------------------------------------------------------*/

blockquote {
    border: 1px solid;
    margin: 0px 0px 5px 0px;
    padding: 15px;
    background-repeat: no-repeat;
    background-position: 10px center;
    color: #D8000C;
    background-color: #FFBABA;
}

.warning {
    background-color: #FF4141 !important;
}

.warning {
    color: white;
    padding: 12px;
    text-align: center !important;
    text-shadow: none !important;
    margin-bottom: 10px !important;
    border-radius: 5px;
}

.alert-title {
    margin-bottom: 0 !important;
}

.alert-orange {
    background-color: #FF9941;
    color: white;
}

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

.infoText {
    text-align: center;
    color: gray;
    font-size: 1em;
    margin: 0;
    margin-bottom: 10px;
}

.flowchart {
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Test Highlight Styling -----------------------------------------------------------*/
mark {
    border-radius: 3px;
    background-color: #ff9a00 !important;
    padding: 3px;
}

/* Overlay Animation Image ----*/

.tableContainer {
    width: 100%;
}

.overlay {
    opacity: 0.7;
    position: absolute;
    margin-top: 10%;
    animation: linear infinite alternate;
    -webkit-animation: linear infinite alternate;
    animation-name: run;
    -webkit-animation-name: run;
    animation-duration: 5s;
    -webkit-animation-duration: 5s;
}

@-webkit-keyframes run {
    0% {
        left: 0;
    }

    50% {
        left: 70%;
    }

    100% {
        left: 0;
    }
}

@keyframes run {
    0% {
        left: 0;
    }

    50% {
        left: 70%;
    }

    100% {
        left: 0;
    }
}

.flowchart,
.flowchart h2,
.calcResults,
.calcResults h2 {
    background-color: #28a745 !important;
}

.calcResults {
    text-align: center;
    text-shadow: none;
    font-size: 1.2em;
    color: white;
}

.fbtn {
    width: 100% !important;
}



/* -------------- NO BORDER CARD ------------------------------------------------------*/

.no-border {
    border: 0px !important;
    margin: 0px !important;
}

button:not(#clearsearch, #clearsearchpage, #searchButton) {
    margin-bottom: 5px !important;
}

.badge {
    text-shadow: none !important;
    padding: 5px !important;
}

.flowchartCard {
    border: 1px solid #28a745 !important;
}

.flowchartCard h3 {
    background-color: #047FCC !important;
    font-size: 1em !important;
}

h2 {
    margin-bottom: 0px !important;
}


table {
    margin-bottom: 10px;
}



/*----------- CARD BORDER -----------------------------------------------------------------*/
.cMain {
    padding: 20px;
    margin: 0px;
}


/*------------ OVERLAY MODAL for TABLES -----------------------------------------------------*/
.modal-full {
    min-width: 95%;
    margin: 0;
}

.modal-full .modal-content {
    min-height: 95vh;
}

.modal-header {
    width: 100% !important;
    border-bottom: none !important;
    margin: 0px !important;
}

.close {
    margin: 0px !important;
}

.dukes button {
    margin-bottom: 0px !important;
}

/*---------- Flowchart Check box -------------------------------------------------------*/

.was-validated input[type=checkbox] {
    padding-left: 50px;
}

/*---------- Dukes style selectors -----------------------------------------------------*/

#calculate button {
    background-color: blue !important;
}

#localPO a {
    color: red !important;
}

#doseCalc {
    padding-top: 0px !important;
    margin-top: 0px !important;
}

.calculationCard {
    border-color: #CC7700 !important;
    border: 1px solid;
}

.calculationCard button {
    width: 100%;
}

.restart {
    width: 25%;
    max-width: 82px;
}

.fullwidth {
    width: 100% !important;
    max-width: 100% !important;
}

.modaldropdownheader {
    font-weight: bold;
    text-decoration: none;
}

.whitelink {
    color: white;
}

.narrowalert {
    padding: 0;
}

#labelQuestion,
#labelQuestion2,
.labelQuestion {
    display: block;
    margin: 0 0 0.4em;
}

h6 {
    background-color: #CC7700 !important;
    margin: 0px 0px 10px 0px !important;
    text-align: center !important;
    font-size: 1em !important;
    font-weight: bold !important;
    padding: 8px 3px 8px 3px !important;
    color: white !important;
    text-shadow: none !important;
    opacity: 0.8 !important;
}

.dodw {
    text-align: center;
}

.sub-sub-header {
    margin: 15px 0px 5px 0px;
}

.sub-sub-header-centered {
    margin: 15px 0px 5px 0px;
    text-align: center;
    font-size: 1.1em;

}

.acronym {
    color: purple !important;
    border-bottom: 3px dotted purple;
}

.localinfo {
    color: #bd0508 !important;
    border-bottom: 3px dotted #bd0508;
    font-weight: bold;
}

/*
  CSS means these have to go last
  */


.hide {
    display: none;
}

#resultsOutput,
#resultsOutput2 {
    width: 100%
}

.flowchart {
    padding: 10px;
}

.ui-radio {
    margin-bottom: 2px;
    text-align: left;
}

ui-radio label {
    cursor: pointer;
    background-color: #eee;
    border: solid 1px #bbb;
    text-shadow: 0 1px 0 #f3f3f3;
}

.ui-radio label:hover {
    cursor: pointer;
    background-color: #ddd;
}

.ui-check {
    margin-bottom: 5px;
}

.ui-check label {
    cursor: pointer;
    background-color: #eee;
    border: solid 1px #bbb;
    text-shadow: 0 1px 0 #f3f3f3;
    padding: 10px;
    font-weight: bold;
    border-radius: 5px;
    width: 100%;
}

.ui-check label:hover {
    cursor: pointer;
    background-color: #ddd;
}

.ui-check label input {
    margin-right: 10px;
}

.kidneys {
    background-image: url('/images/kidneys-svgrepo-com.svg');
    background-size: 16px;
    width: 16px;
    height: 16px;
    display: inline-block;
    color: white;
}

.stomach {
    background-image: url('/images/stomach-1-svgrepo-com.svg');
    background-size: 16px;
    width: 16px;
    height: 16px;
    display: inline-block;
    color: white;
}

.azsort {
    background-image: url('/images/azsort.svg');
    background-size: 36px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    display: inline-block;
    color: white;
}

#instructionsDiv {
    position: fixed;
    width: 250px;
    height: 200px;
    top: 60px;
    left: 10px;
}

/* Split.js */
.split,
.gutter.gutter-horizontal {
    float: left;
}

.split,
.gutter.gutter-horizontal {
    height: 150vh;
}

.gutter {
    cursor: w-resize;
    height: 150vh;
}

.gutter.gutter-horizontal {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
}

.split {
    overflow-y: scroll;
    overflow-x: hidden;
}

.simpletable,
.simpletable th,
.simpletable td {
    border: 1px solid black;
    border-collapse: collapse;
}

.centertexttable th,
.centertexttable td {
    text-align: center;
}

.handpointer {
    cursor: pointer;
}

.leftlist {
    text-align: left;
}

.infoblue {
    color: #047FCC;
}

.stripedtable tbody tr:nth-child(odd) td {
    background-color: #c6d9f1;
}

.whitetablebackground {
    background-color: white;
}

.palebluetablebackground {
    background-color: #c6d9f1;
}

.guidelinewarning ul {
    text-align: center;
    list-style-position: inside;
}

.darkheadertable thead th,
.blackbackgroundtable {
    color: white;
    background-color: black;
    text-align: center;
}

/*
    add this as a class on an internal id on a page to ensure any href pointed at it scrolls to the correct position
*/
.hreflink {
    scroll-margin-top: 56px;
}

.tablecolumnsalternatingbackground col:nth-child(odd) {
    background: white;
}

.tablecolumnsalternatingbackground col:nth-child(even) {
    background: #eee;
}

.btn-primary {
    background-color: #295E80 !important;
    border-color: grey;
}