a:link, a:visited, a:active {
    color: #607AA7;
    outline: none !important;
}

a:hover {
    color: #000033;
    text-decoration: underline;
}

a.bluebold {
    color: #006B8A;
    font-weight: bold;
}
 
a.greybold {
    color: #666;
    font-weight: bold;
}

a.lkDeleteIcon {
    color: #990000;
    font-size:1.1em;
    font-weight: bold;
    text-decoration: none;
}
a.edit {
    color: #fff;
}
a.cancel {
    color: #fff;
}
a.trash {
    color:#fff;
}
a.save {
    color: #fff;
}

a.normal{
    font-size:1em;
    font-weight:normal;
}
a.noUnderline{
	 text-decoration: none;
}
.routeColour{
	color: #ffc1c1;
}
.scheduleColour{
	color: #66cdaa;
}

.img-fill{
	display: block; 
	width: 100%; 
	height: auto;
}

.site-colour {
    color: #607AA7;
}

.site-header {
    background: linear-gradient(#4f6384,#6b89bb);
    color: #fff;
}

.title-flex {
    flex-direction: column;
    display: flex;
}

.text-truncate {
    max-width: 100%;
}

.text-excel {
    color: #21804b;
}

.text-pdf {
    color: #ff2116;
}
.med-white-italic{
    color:#fff;
    font-style:italic;
    font-size:1em;
}

a.white {
    color: #fff;
    text-decoration: none;
}

.small-white{
    color: #fff;
    font-size:0.8em;
}
.small {
    font-size: 0.8em;
}

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

.headerTitle {
    font-size: 2.2em;
}

.greybold {
    color: #585858;
    font-weight: bold;
}

.logIcons {
    font-size: 1.2em;
}

.bg-medium {
    background-color: #ECECEC;
	border-bottom:1px solid #ccc;
}

.bg-medium-high {
    background-color: #ECECEC;
    border-bottom: 1px solid #ccc;
    padding-top:8px;
    padding-bottom:3px;
    margin-top:25px;
}

.bg-light {
    background-color: #eee;
    padding: 5px 5px;
    border-bottom: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
}

.darkGrey{
    color:#383838;
    font-weight:bold;
}

.navbarIcons {
    padding-right: 5px;
    padding-top: 1px
}

.bottomSpace {
margin-bottom:20px;
}

.bottomSpaceSmall {
    margin-bottom: 10px;
}

.bigTopSpace {
    margin-top: 100px;
}

.topSpace {
    margin-top: 20px;
}

.leftSpace{
    margin-left:5px;
}

.rightSpace {
    margin-right: 5px;
}

.newAlert {
    background: #990000;
    font-weight: bold;
    color: #fff;
    padding: 2px;
    margin-left: 5px;
}

.siteBanner{
    margin-left:-15px;
}

#txtSearchOverlay {
    padding-left: 20px;
    padding-top: 10px;
    padding-right: 10px;
}

#dSearchOverlay {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: -3px;
    border: #ddd solid 1px;
    left: 225px;
    top: 220px;
    width: 250px;
    position: absolute;
    z-index: 200;
    background-color: #ffffff;
    transform: translate(-90%,-90%);
    -ms-transform: translate(-90%,-90%);
}

/*main grids*/
table.grid {
    border: 0;
    margin-bottom: 20px;
}

    table.grid th {
        font-weight: bold;
        border: 0;
        /* border-bottom: 2px solid #666;*/
        color: #fff;
        background: #6b89bb;
        padding: 5px;
    }
    
table.grid th a{
    text-decoration:none;
    color: #fff;
}
table.emailGrid {
    border: 0;
    margin-bottom: 20px;
}

    table.emailGrid th {
        font-weight: bold;
        border: 0;
        /* border-bottom: 2px solid #666;*/
        color: #fff;
        background: #6b89bb;
        padding: 3px;
    }

        table.emailGrid th a {
            text-decoration: none;
            color: #fff;
        }
table.grid2 {
    border: 0;
    margin-bottom: 20px;
}

    table.grid2 th {
        font-weight: bold;
        border: 0;
        /* border-bottom: 2px solid #666;*/
        color: #fff;
        background: #6b89bb;
        padding: 5px;
    }

        table.grid2 th a {
            text-decoration: none;
            color: #fff;
        }

table.grid2 tbody td {
    border: 0;
    padding: 3px;
    vertical-align :top;
}

    table.grid2 tr.lastrow {
        border-bottom: 1px solid #ccc;
    }

table.grid3 {
    border: 0;
    margin-bottom: 20px;
}

    table.grid3 th {
        font-weight: bold;
        border: 0;
        border-top: 1px solid #666;
        color: #fff;
        background: #6b89bb;
        padding: 5px;
    }

        table.grid3 th a {
            text-decoration: none;
            color: #fff;
        }

    table.grid3 tbody td {
        border: 0;
        border-top: 1px solid #ccc;
        padding: 3px;
        vertical-align: top;
    }

    table.grid3 tr:last-child {
        border-bottom: 1px solid #ccc;
    }

table.grid4 {
    border: 1px solid #ccc;
    margin-bottom: 20px;
}

    table.grid4 th {
        font-weight: bold;
        border: 0;
        border-top: 1px solid #ccc;
        color: #666;
        background: #d9d9d9;
        padding: 2px;
    }

        table.grid4 th a {
            text-decoration: none;
            color: #666;
        }

    table.grid4 tbody td {
        border: 0;
        border-top: 1px solid #ccc;
        padding: 2px;
        vertical-align: top;
    }

    table.grid4 tr:last-child {
        border-bottom: 1px solid #ccc;
    }

    table.grid4 td.accdec {
        background: #0a7e37;
        color: #fff;
        padding: 0 3px 0 3px;        
    }
    table.grid4 td.feedback {
        background: #651f8a;
        color: #fff;
        padding: 0 3px 0 3px;
    }

table.grid tbody td{
    border:0;
    border-bottom:1px solid #ccc;
    padding: 5px;
}

table.grid tr.pager  td{
    border-bottom:0;
    padding:8px 5px 8px 0px;
}

.btnCommandRightSpace{
    padding-right:0;
}

/*end of main grids*/

table.noborder {
   padding: 5px;
}

table.noborder td {
   border: 0;
   padding: 3px;
}

    table.noborder th {
        border: 0;
        padding: 3px;
        vertical-align: top;
        border-bottom: 1px solid #cccccc;
    }

    table.noborder td {
        border-bottom: 1px solid #cccccc;
        vertical-align: top;
    }

table.zero-border {
    border:0;
    padding: 5px;
}

    table.zero-border td {
        border: 0;
        padding: 3px;
    }


tr.blueHeader th a{
    color: #fff;
} 

tr.blueHeader th{
    background-color: #006B8A;
    color: #fff;
    font-weight: bold;
    padding:3px;
}

.page td {
    background-color: #cccccc;
    padding: 2px;
    vertical-align: top;
}

.helpIcon {
    margin-bottom: 5px;
    display: inline-block;
    margin-right:10px;
    padding-bottom:2px;
}

.helpItem {
    display: none;
    margin-left: 17px;
    margin-bottom: 20px;
}

.helpContents{
    padding-left:20px;
}

.alt td {
    background: rgba(0, 0, 0, 0.05)
}

.alt th {
    background: rgba(0, 0, 0, 0.05)
}
.right{
    text-align:right;
}

.centre {
    text-align: center;
}

.top {
    vertical-align:top;
}

.bold{
    font-weight:bold;
    color:#666;
}

td.bgNone {
    background-color: #e0e0e0;
    vertical-align:middle;
}

td.bgFail {
    background-color: #ffb0b0;
    vertical-align: middle;
}

td.bgSuccess {
    background-color: #d0edd7;
    vertical-align: middle;
}

.ajaxUpdateFailed {
    text-align: center;
    width: 100%;
	 border: solid 1px #F9B9B0;
    display: inline-block;
    border-radius: 10px;
    font-size: 1.2em;
    padding: 15px;
    color: #000000;
    background: #ffcccc;
    display: inline-block;
}
     .ajaxUpdateFailed::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        content: "\f057";
        margin-right: 10px;
    }

.ajaxUpdateSuccess {
    text-align: center;
    color: #000000;
    border: solid 1px #AEC8AF;
    display: inline-block;
    border-radius: 10px;
    font-size: 1.2em;
    padding: 15px;
    width: 100%;
    background: #CAE5C8;
}

    .ajaxUpdateSuccess::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        content: "\f058";
        margin-right: 10px;
    }

.ajaxUpdateWarning {
    text-align: center;
    width: 100%;
    border: 1px solid #E6B800;
    display: inline-block;
    border-radius: 10px;
    font-size: 1.2em;
    padding: 15px;
    color: #000000;
    background: #FFDF5B;
}

    .ajaxUpdateWarning::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        content: "\f06a";
        margin-right: 10px;
    }

#sticky-element {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 10000;
    margin-left: auto;
    width: 100%;
    margin-right: auto;
    max-width: 1150px;
}

.online {
    width: 85px;
    background: #669900;
    color: #fff;
    margin-top: 2px;
    padding: 2px 0 2px 0;
    text-align: center
}

.offline {
    width: 85px;
    background: #666666;
    color: #fff;
    margin-top: 2px;
    padding: 2px 0 2px 0;
    text-align: center
}

.userDetailsSeparator {
    width: 300px;
    height: 3px;
    background: #fff
}

.headerIcon {
    padding: 0 3px 0 3px;
    margin: 0 3px 0 3px;
}
.bottom-border-grey {
    border-bottom: 1px solid #cccccc;
}
.min10 {
    min-width: 10px;
}
.min20 {
    min-width: 20px;
}
.min30 {
    min-width: 30px;
}
.min50 {
    min-width: 50px;
}
.min60 {
    min-width: 60px;
}
.min70 {
    min-width: 70px;
}
.min100 {
    min-width: 100px;
}
.min120 {
    min-width: 120px;
}
.min150 {
    min-width: 150px;
}

.min200{
    min-width:200px;
}

.min250 {
    min-width: 250px;
}

.min300 {
    min-width: 300px;
}

.min350 {
    min-width: 350px;
}

.min400 {
    min-width: 400px;
}

.min500 {
    min-width: 500px;
}
.maxWidth8 {
    max-width: 8px;
    width:1px;
}
.maxWidth50 {
    max-width: 50px;
}
.maxWidth60 {
    max-width: 60px;
}
.maxWidth70 {
    max-width: 70px;
}
.maxWidth100 {
    max-width: 100px;
}
.maxWidth120 {
    max-width: 120px;
}
.maxWidth150 {
    max-width: 150px;
}
.maxWidth180 {
    max-width: 180px;
}
.maxWidth200 {
    max-width: 200px;
}
.maxWidth250 {
    max-width: 250px;
}
.maxWidth300 {
    max-width: 300px;
}
.maxWidth400 {
    max-width: 400px;
}

.maxWidth500{
    max-width:500px;
}

.maxWidth600 {
    max-width: 600px;
}

.maxWidth700 {
    max-width: 700px;
}

.maxWidth800 {
    max-width: 800px;
}

.maxWidth900 {
    max-width: 900px;
}

.maxWidth1000 {
    max-width: 1000px;
}

.maxWidth1200 {
    max-width: 1200px;
}

.fullWidth{
    width:100%;
}
.widt70 {
    width: 70px;
}

.width100 {
    width: 100px;
}

.width200 {
    width: 200px;
}

.width400 {
   width: 400px;
}

.maxwidth500 {
    width: 500px;
}
/*Settings for horizontal scroll of wide tables*/
/*---------------------------------------------*/
.table-xs {
    width: 544px;
}

.table-sm {
    width: 576px;
}

.table-md {
    width: 768px;
}

.table-lg {
    width: 992px;
}

.table-xl {
    width: 1200px;
}

.dropdown-divider-lochlochy {
    margin-top: 0rem;
    padding-top: 0rem;
    padding-right: 1.5rem;
    padding-bottom: 0.1rem;
    padding-left: 1.5rem;
    display: block;
    background: #dee5e9;
    width: 100%;
    clear: both;
    border-top: 1px solid #cbcccd;
    border-bottom: 1px solid #cbcccd;
}

.dropdown-item-last{
    padding-bottom:1rem;
}

.dropdown-menu-first {
    padding-top: 0rem;
}

.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    background-color: #6b89bb;
}

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 576px) {
    .table-sm {
        width: 100%;
    }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }

    .table-xl {
        width: 100%;
    }
}
/*---------------------------------------------*/
/*End of settings for horizontal scroll of wide tables*/


.internal {
    display: inline;
}

.gridContainerFloatLeft {
    float: left;
}

.gridContainerFloatLeft .btn{
    color: #fff;
}

.gridLeft {
    display: inline-block;
    padding-left:10px;
}

.gridRight {
    /*display: inline-block;*/
    float: right;
    padding-right:10px;
}

.clearFix {
    clear: both;
}

.clearFixLeft{
    clear:left;
}

.clearFixRight{
    clear:right;
}

.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;
}

.wide {
    width:100%;
    max-width:100%;
}

.highlight{
    border:1px solid red;
}

.hihglightRow{
    background:#b9b9b9;
    cursor:pointer;
}

.red-bold {
    font-weight: bold;
    color: #cc0000;
}

.red {
    color: #cc0000;
}
.red-grey{
    color: #eec9c9;
}

.red-header {
    background: #cc0000;
    width: 100%;
    color: #ffffff;
    font-weight: bold;
    padding: 2px;
}

/*bs4-pager*/

/*List View pager css*/
.lvpager span span {
    display: inline-block;
    min-width: 30px;
    padding: 3px 5px;
    text-align: center;
    line-height: 1.42857143;
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #6c757d;
    border-color: #6c757d;
}

.lvpager a{
    padding: 3px 5px;
    margin-right: -1px;
    line-height: 1.42857143;
    color: #007bff;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}
    .lvpager a:hover {
        z-index: 2;
        color: #23527c;
        background-color: #eee;
        border-color: #ddd;
    }


/*Grid view pager css*/
.pager a,
.pager span {
    display:inline-block;
    min-width:30px;
    padding: 3px 5px;
    text-align:center;
    line-height: 1.42857143;
    color: #475b7b;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}

.pager span {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #6c757d;
    border-color: #6c757d;
}

.pager a:hover,
.pager a:focus {
    z-index: 2;
    color: #475b7b;
    font-weight:normal;
    background-color: #eee;
    border-color: #ddd;
}

.pager td {
    padding: 0;
}
/*end pager */

/*list view pager css*/
.lvpager a,
.lvpager span span {
    display: inline-block;
    min-width: 30px;
    padding: 3px 5px;
    text-align: center;
    line-height: 1.42857143;
    color: #475b7b;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}

.lvpager span span {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #6c757d;
    border-color: #6c757d;
}

.lvpager a:hover,
.lvpager a:focus {
    z-index: 2;
    color: #475b7b;
    font-weight: normal;
    background-color: #eee;
    border-color: #ddd;
}

.lvpager td {
    padding: 0;
}
/*end pager */



.bg-lightgrey {
    background-color: #efefef;
}

.gridContainer .btn {
    color: #fff;
}

.btnWhite .btn{
    color: #fff;
}


.btn-lightgrey {
    color: #979797;
    background-color: #efefef;
    border-color: #efefef
}

a.btn-lightgrey {
    color: #000;
    background-color: #efefef;
    border-color: #efefef
}
    .btn-lightgrey:hover {
        color: #000;
        background-color: #d4d4d4;
        border-color: #efefef
    }
a.btn-lightgrey:hover {
    color: #000;
    background-color: #d4d4d4;
    border-color: #efefef
}

.btn-lightgrey:focus, .btn-gog.focus {
    box-shadow: 0 0 0 .2rem #d4d4d4;
}

    .btn-lightgrey.disabled, .btn-gog:disabled {
        color: #000;
        background-color: #d4d4d4;
        border-color: #efefef
    }

    .btn-lightgrey:not(:disabled):not(.disabled):active, .btn-gog:not(:disabled):not(.disabled).active, .show > .btn-gog.dropdown-toggle {
        color: #fff;
        background-color: #efefef;
        border-color: #efefef
    }

        .btn-lightgrey:not(:disabled):not(.disabled):active:focus, .btn-gog:not(:disabled):not(.disabled).active:focus, .show > .btn-gog.dropdown-toggle:focus {
            box-shadow: 0 0 0 .2rem rgba(38, 105, 171, 0.5)
        }


.btn-outline-ellipsis {
    color: #ced4da;
    background-color: transparent;
    background-image: none;
    border-color: #ced4da;
    -webkit-appearance: none !important;
}

    .btn-outline-ellipsis:hover {
        color: #222;
        background-color: #ececec;
        border-color: #ced4da;
        -webkit-appearance: none !important;
    }

    .btn-outline-ellipsis:focus, .btn-outline-ellipsis.focus {
        box-shadow: 0 0 0 .2rem rgba(128,189,255,0.5);
        -webkit-appearance: none !important;
    }

    .btn-outline-ellipsis.disabled, .btn-outline-ellipsis:disabled {
        color: #99cccc;
        background-color: transparent;
        -webkit-appearance: none !important;
    }

    .btn-outline-ellipsis:not(:disabled):not(.disabled):active, .btn-outline-ellipsis:not(:disabled):not(.disabled).active, .show > .btn-outline-ellipsis.dropdown-toggle {
        color: #fff;
        background-color: #ececec;
        border-color: #80bdff;
        -webkit-appearance: none !important;
    }

        .btn-outline-ellipsis:not(:disabled):not(.disabled):active:focus, .btn-outline-ellipsis:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-ellipsis.dropdown-toggle:focus {
            box-shadow: 0 0 0 .2rem rgba(128,189,255,0.5);
        }

.btnLinkFa {
    color: #fff;
    margin-bottom: 2px;
}

.noLineBreak {
    white-space: nowrap;
}

.breakWords{
    word-break:break-all;
}

.breakWord {
    word-break:break-word;
}

table.grid th.rotateRoles {
     color: #fff;
    white-space: nowrap;
    font-weight: normal;
    vertical-align: bottom;
}
th.rotateRoles div {
    transform: rotate(270deg);
    position: relative;
    width: 20px;
    bottom: 3px;
    text-align: left;
}
table.grid th.rotatePermissions {
    color: #fff;
    white-space: nowrap;
    font-weight: normal;
    vertical-align :bottom;
}
th.rotatePermissions div {
    transform: rotate(270deg);
    position: relative;
    width: 20px;
    bottom: 3px;
    text-align: left;
}

table.grid td.borderRight {
    border-right: 1px solid #ccc;
}
table.grid th.borderRight {
    border-right: 1px solid #ccc;
}
.subHeader {
    background: #ccc;
    padding: 4px;
    font-weight: bold;
    color: #666;
    width: 100%;
}
.subSubHeader {
    background: #eee;
    padding: 4px;
    color: #666;
    width: 100%;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

input[type='checkbox'] {
    height: 20px;
    width: 20px;
    margin-bottom: 3px;
    vertical-align: middle;
    accent-color: #28a745;
}


.txtBoxPadding input[type="checkbox"] {
    margin-right: 5px;
    vertical-align: middle;
}

.chkBoxPaddingLeft input[type="checkbox"] {
    margin-left: 5px;
    vertical-align: middle;
}

.txtBoxPadding input[type="radio"] {
    margin-right: 5px;
    vertical-align:middle;
}

.chkBoxRightPadding {
    margin-left: 5px;
}

input[type='radio'] {
    height: 20px;
    width: 20px;
    accent-color: #28a745;
}

.radio-label {
    display: inline-block;
    vertical-align: middle;
}

.formatRadioButtonList label {
    margin-left: 10px;
}

.chkUserGrid {
    width: 5%;
}
.keyCheckBox {
    margin: 0;
    padding: 0;
    cursor: pointer;
}
.passPhraseCheckBox {
    display:inline;
    position: absolute;
    left: 40px;
    top: -5px;    
}
.backgroundPaleYellow1 {
    background: #ffffcc;
}
.backgroundPaleYellow2 {
    background: #fdfde8;
}
.backgroundAlt {
    background: rgba(0, 0, 0, 0.05)
}
.backgroundAltBottomLine {
    background: rgba(0, 0, 0, 0.05);
	 border-bottom:1px solid #ccc;
}
.backgroundGrey1 {
    background: #ddd;
}
.backgroundGrey2 {
    background: #eeeeee;
}
.backgroundPaleGreen{
    background:#beeab9
}
.foregroundDarkGreen {
    color:#247024
}
.foregroundBrown {
    color: #a5722b
}
.borderRight{
    border-right:1px solid #cccccc;
}
.checkboxlistformat label {
    margin-left: 5px;
}

.checkboxlistformatright label {
    margin-right: 5px;
}

input.dat, a.dat input {
    background: #ffffff;
    padding: 2px 20px 2px 2px;
    width: 125px;
	 border:1px solid #ced4da;
	line-height:1.5;
	padding: 0.375rem 0.375rem;
}

input.datTime {
    width: 90px;
    padding: 2px 20px 2px 2px;
    border: 1px solid #ced4da;
    line-height: 1.5;
    padding: 0.375rem 0.375rem;
}
input.dat::-ms-clear {/*Hide the X on right of text box in IE*/
    display: none;
}


/*End of ajax upload styles*/
.row {
    display: flex;
}

/* Create two equal columns that sits next to each other */
.column25 {
    flex: 25%;
    padding: 5px;
}
.column50 {
    flex: 50%;
    padding: 5px;
}
.column33 {
    flex: 33%;
    padding: 5px;
}
.column66 {
    flex: 66%;
    padding: 5px;
}
.column100 {
    flex:100%;
    padding: 5px;
}
.sortable-list {
    background-color: #eee;
    list-style: none;
    margin: 0;
    height: 500px;
    padding: 10px;
    overflow: auto;
    width: 252px;
    border: 1px solid #6b89bb;
}
.sortable-list-lg {
    background-color: #eee;
    list-style: none;
    margin: 0;
    height: 300px;
    padding: 10px;
    overflow: auto;
    border: 1px solid #6b89bb;
}
    .sortable-list::-webkit-scrollbar {
        width: 10px;
    }
    .sortable-list::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    }

    .sortable-list::-webkit-scrollbar-thumb {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    }

.sortable-item {
    background-color: #FFF;
    border: 1px solid #ccc;
    font-size: 0.9em;
    cursor: move;
    display: block;
    margin-bottom: 5px;
    padding: 3px 0;
    text-align: center;
    width:220px;
}

.sortable-item-lg {
    background-color: #FFF;
    border: 1px solid #ccc;
    font-size: 0.9em;
    cursor: move;
    display: block;
    margin-bottom: 5px;
    padding: 3px 0;
    text-align: center;
}
.sortable-item-inbuilt {
    background-color: #e3eeff;
}

.sortable-header {
    width: 252px;
    font-weight: bold;
    background: #6b89bb;
    color: #fff;
    text-align: center;
}

.sortable-header-lg {
    font-weight: bold;
    background: #6b89bb;
    color: #fff;
    text-align: center;
}

.sortable-delete{
    text-align:right;
    border:0px;
    margin:-10px 2px 2px 0;
    padding:0 0 0 3px;   
    
}

.dsortable-audio {
    text-align: right;
    border: 0px;
    margin: -7px 5px 0 0;
    padding: 0 0 0 3px;
}

.dsortable-noaudio {
    text-align: right;
    border: 0px;
    margin: -7px 5px 0 0;
    padding: 0 0 0 3px;
    font-size: 1.0em;
    font-weight: bold;
    color:lightgrey;
}

a.sortable-audio {
    font-size: 1.0em;
    font-weight: bold;
    color:green;
    text-decoration: none;
}

a.sortable-delete {
    font-size:1.2em;
    font-weight:bold;
    color: darkred;
    text-decoration:none;
}

.llcolour {
    color: #6b89bb;
}

/*add a search icon to the navbar search text box*/
.input-wrapper:before {
    content: "\f002";
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: normal;
    color: #ccc;
    text-decoration: inherit;
    padding-right: 0.5em;
    position: absolute;
    right: 0;
    top: 8px;
}

/*Settings for horizontal scroll of wide tables*/
/*---------------------------------------------*/
.table-xs {
    width: 544px;
}

.table-sm {
    width: 576px;
}

.table-md {
    width: 768px;
}

.table-lg {
    width: 992px;
}

.table-xl {
    width: 1200px;
}


/* Small devices (landscape phones, 544px and up) */
@media (min-width: 576px) {
    .table-sm {
        width: 100%;
    }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }

    .table-xl {
        width: 100%;
    }
}
/*---------------------------------------------*/
/*End of settings for horizontal scroll of wide tables*/

.tblcontainer {
    display: flex;
    overflow-x: auto;
}

.tooltip-inner {
    text-align: left;
}

td.bgRoute{
    background-color: #ffc1c1;
}

td.bgActiveTemplate {
    background-color: #c8c8ff;
}

td.bgTemplate {
    background-color: #d9ffdb;
}

select, option.selected {
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    #albumlist div {
        margin-bottom: 7px;
    }


    #albumlist img {
        display: block;
        border: 1px solid #333300;
    }

hr.grey {
    border-color: #6c757d;
    height:1px;
    margin-right:10px;
}
tr.rowHover:hover {
    background-color: #e6e6e6;
    cursor: pointer;
}
tr.rowHover2:hover {
    background-color: #e6e6e6;
    cursor: pointer;
}
tr.rowHover4:hover {
    background-color: #e6e6e6;
    cursor: pointer;
}
tr.rowHover5:hover {
    background-color: #e6e6e6;
    cursor: pointer;
}
tr.rowHover7:hover {
    background-color: #e6e6e6;
    cursor: pointer;
}
tr.rowHover8:hover {
    background-color: #e6e6e6;
    cursor: pointer;
}
tr.rowHover9:hover {
    background-color: #e6e6e6;
    cursor: pointer;
}
.rowHover3 {
    cursor: pointer;
}

tr.rowHover6 {
    background-color: #ffeded;
    cursor: pointer;
}
tr.rowHover6:hover {
    background-color: #ffbfbf;
    cursor: pointer;
}
td.doubleBorderTop {
    border-top: 2px solid #ccc;
    -moz-box-shadow: 0px 2px 0px #ccc; /* Firefox 3.6 and earlier */
    -webkit-box-shadow: 0px 2px 0px #ccc; /* Safari and Chrome */
    box-shadow: 0px 2px 0px #ccc;
}
table.grid td.thickBorderTop {
    border-top: 3px solid #ccc;
}

/*status colours*/
.statUnknown {
    background: #fff;
    border: 1px solid #000;
    color: #000;
}
.statInServiceFaults {
    background: #ffba00;
    border: 1px solid #000;
    color: #fff;
}
.statInService {
    background: #1e8d00;
    border: 1px solid #000;
    color: #fff;
}
.statOutOfService {
    background: #b00101;
    border: 1px solid #000;
    color: #fff;
}
.statOverDue {
    background: #aa00f1;
    border: 1px solid #000;
    color: #fff;
}
.tableSelect {
    border: 1px solid #ced4da;
    cursor: pointer;
    border-left: 0px solid #fff;
    border-right: 0px solid #fff;
}
.user1 {
    font-size: 1.2em;
    color: #228b22;
}
.user2 {
    font-size: 1.2em;
    color: #CD7F32;
}
.user3 {
    font-size: 1.2em;
    color: silver;
}
.user4 {
    font-size: 1.2em;
    color: #FFD700;
}
.user5 {
    font-size: 1.2em;
    color: #6495ed;
}
.user6 {
    font-size: 1.2em;
    color: #cc0000;
}
.user7 {
    font-size: 1.2em;
    color: #4a5c79;
}
.user8 {
    color: #4a5c79;
}
.bottomline{
    border-bottom:1px solid #ccc;
}
.bottomfeintline {
    border-bottom: 1px solid #ebedf0;
}

.headerError {
    font-size: 1em;
    color: #c70101;
    background: #fff;
}
.signal-green {
    background-color: #0bb14d;
}
.text-lightgrey {
    color: #979797;
}
.fluid-img img {
    max-width: 100%;
    height: auto;
}

/*CK Editor*/
.ck-editor__editable_inline {
    min-height: 400px;
}

#mDetails img {
    max-width: 100%;
    height: auto;
}

.clockBox{
    font-size:1.2em;
    border: 1px solid #ccc;
    padding:10px 25px 10px 25px;
    vertical-align:central;
    align-content:center;
}

.clockRailBox {
    font-size: 1.2em;
    border: 1px solid #ccc;
    padding: 10px 25px 10px 25px;
    vertical-align: central;
    align-content: center;
}

.clockMarker {
    font-size: 1.2em;
    padding: 10px 15px 10px 15px;
    vertical-align: central;
    align-content: center;
}
.clockSelect {
    font-size: 1.2em;
    border: 1px solid #ccc;
    padding: 10px 0 10px 15px;
    width: 78px;
    align-content: center;
}
.clockRail {
    background-color: #fbe986;
}
.clockNow {
    background-color: #afd5b7;
}
.clockOff {
    background-color: #fff;
}
.yellowBackText{
	background-color: #fbe986;
	padding:2px 5px 2px 5px;
}
.greenBackText{
	background-color: #afd5b7;
	padding:2px 5px 2px 5px;
}