﻿
:root {
    --dt-row-selected: #fff1cc;
    --dt-row-selected-text: #212529;
}

.blueText {
    color: #14afca;
}

.tabButtons
{
    padding:10px;
}

/*used in text editor*/
.custom-dropdown-variable {
    width: 250px;
    overflow-y: scroll;
    max-height: 400px;
}

#pendingChanges {
    width: 100%;
    height: 30px;
    background-color: #f776008c;
    font-size: 14px;
    font-weight: bold;
    padding-left: 20px;
    padding-top: 3px;
    text-align:center;
}
#pageIntro {
    background-color: #d1e7df;
    font-size: 14px;
    font-weight: bold;
    padding-left: 20px;
    padding-top: 10px;
    position: absolute;
    z-index: 100;
    margin-left: 210px;
    width: calc(100vw - 220px);
}
#pageIntroTitle {
    font-size: 16px !important;
    font-weight: bold;
}

.popoverHelp {
    cursor: help;
}
.pageHelp {
    cursor: help;
}

.popoutHelpTitle {
    color: white;
    background: #14afca;
    font-size: 16px !important;
    font-weight: bold;
}

/*select2*/
.select2Button {
    min-width: 65px;
}

.select2InputGroup {
    height: calc(1.5em + 0.75rem + 2px) !important;
}

.input-group > .select2-container {
    width: auto;
    flex: 1 1 auto;
}

    .input-group > .select2-container .select2-selection--single {
        /*      height: calc(1.5em + 0.75rem + 2px) !important;*/
    }
/*datatable*/
.dt-buttons {
    float: right;
}

.dataTables_filter {
    float: left;
}

/*datatable card view*/
.cards tbody tr {
    float: left;
    width: 25rem;
    margin: 0.5rem;
    border: 0.0625rem solid rgba(0,0,0,.125);
    border-radius: .25rem;
    box-shadow: 0.25rem 0.25rem 0.5rem rgba(0,0,0,0.25);
}

.cards tbody td {
    display: block;
}

.table tbody label {
    display: none;
}

.cards tbody label {
    display: inline;
    position: relative;
    font-size: 85% !important;
    width: 25%;
    float: left;
    color: #808080;
    min-width: 4rem;
    margin-left: 0;
    margin-right: 1rem;
    text-align: left;
}

tr.selected label {
    color: #404040;
}

.table .fa-light {
    /*  font-size: 2.5rem;*/
    text-align: center;
}

.cards .fa-light {
    /*  font-size: 7.5rem;*/
}

a {
    cursor: pointer;
}
/*form elements*/
    .form-group {
    margin-bottom:0.2rem;
}
/*
.form-control {
    height: calc(1.5em + .5rem + 2px);
}
    */
.btn-minus {
    /* height: calc(1.5em + 0.75rem + 3px);*/
    height:28px;
}
.btn-plus {
    height: 28px;
    /*  height: calc(1.5em + 0.75rem + 3px);  */
}
.input-group-text {
    height: 28px;
    
}
.input-group-button {
    height: 28px;
}


.tableSpinner .btn-minus {
    height: 21px;
}
.tableSpinner .btn-plus {
    height: 21px;
}

.tableSpinner .input-group-text {
    height: 21px;
}

.tableSpinner .form-control {
    height: 21px;
}

.tableSpinner button {
    height: 21px;
}

.treeBorder {
    border-color: #14afca;
    border-width: 1px;
    border-radius: 4px;
    border-style: solid;
}

#external-events {
  
}

    #external-events h4 {
        font-size: 16px;
        margin-top: 0;
        padding-top: 1em;
    }

    #external-events .fc-event {
        margin: 3px 0;
        cursor: move;
    }

    #external-events p {
        margin: 1.5em 0;
        font-size: 11px;
        color: #666;
    }

        #external-events p input {
            margin: 0;
            vertical-align: middle;
        }

.notification_counter {
    position: absolute;
    top: 8px;
    /*right: 5px;*/
    min-width: 20px;
    background-color: #D93F3F;
    border-radius: 5px;
    text-align: center;
    color: white;
    font-size: small;
    font-weight: bold;
}

.groupSeachSideBar {
    max-width: 500px;
    width: calc(100% - 50px);
}
.groupSearchTree {
    height: calc(100vh - 120px);
    overflow-y: scroll;
}


.list-group-item + .list-group-item {
     border-top-width: 1px!important;
}

.side-barHeader {
    background-color: #14afca;
    color: white;
    text-align: center;
     margin-bottom: 20px;
    padding: 5px;
}

/*
.jstree li.jstree-open > a.jstree-anchor > i.jstree-checkbox,
.jstree li.jstree-closed > a.jstree-anchor > i.jstree-checkbox {
    display: none!important;
}

.jstree-default .jstree-leaf > .jstree-ocl {
    display: none !important;
}
    */

.card-header .accicon {
    float: right!important;
    font-size: 16px;
    width: 1.2em;
}

.jstree-default .jstree-clicked {
    background-color: #14afca;
    color: white!important;
}

[data-toggle="collapse"] .fa:before {
    content: "\f102";
}

[data-toggle="collapse"].collapsed .fa:before {
    content: "\f103";
}
.card .card-body {
    padding: .5em;
}



.card {
    margin-bottom: 0px !important;
    margin-top: 5px !important;
}

.card-header {
    cursor: pointer;
    border-bottom: none;
    padding-left: 0.3rem;
    padding-right: 0.3em;
    /*    display: block !important;*/
    font-size: 14px;
}
.card-header-page {
    font-size: 16px !important;
    font-weight: bold;
    border-left-color: #14afca !important;
    border-left-width: 3px !important;
}

.card-header-page-span {
    padding-bottom: .2em !important;
    padding-top: .2em !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl
{
    padding-left:0px;
    padding-right:0px;
}
.nav {
    font-size: 14px;
}

.select2-container--bootstrap4 .select2-selection--single {
    height: 29px!important;
}

.select2-selection--multiple:before {
    content: "";
    position: absolute;
    right: 7px;
    top: 42%;
    border-top: 5px solid #888;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    height: 29px !important;
}


.dataTable .select2-container--bootstrap4 .select2-selection--single {
    height: 22px !important;
}
    .dataTable .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered
    {
        line-height:18px;
    }
    /*table expand*/
    td.details-control::before {
        display: inline-block;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        font: var(--fa-font-light);
        /*  content: "\f02a\0020\0020\f324";*/
        content: "\f324";
        cursor: pointer;
        /*   background: url('https://www.datatables.net/examples/resources/details_open.png') no-repeat center center;*/
    }

tr.shown td.details-control::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-light);
   /* content: "\f02a\0020\0020\f322";*/
    content: "\f322";
    cursor: pointer;
    /* background: url('https://www.datatables.net/examples/resources/details_close.png') no-repeat center center;*/
}


table.dataTable {
font-size: 12px;
}

.table.dataTable .btn.btn-sm {
    padding: 3px 10px;
    font-size: 13px;
}
table.dataTable tr.dtrg-group.dtrg-level-0 th {
    font-weight: bold;
    padding: 0;
}

.tableGroupHeaderCard {
    margin-top: 0px !important;
}

table.dataTable.table > tbody > tr.selected > * .dt-row-selected {
    background-color: #fff1cc;
    color: #212529;
}

table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected .dt-row-selected {
    background-color: #fff1cc;
    color: #212529;
}

dt-row-selected {
    background-color: #fff1cc;
    color: #212529;
}


table.dataTable tbody td.select-checkbox:before,
table.dataTable tbody td.select-checkbox:after,
table.dataTable thead th.select-checkbox:before,
table.dataTable thead th.select-checkbox:after {
    display: block;
    position: absolute;
    top: 1.2em;
    left: 50%;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
}

table.dataTable tbody td.select-checkbox:before,
table.dataTable thead th.select-checkbox:before {
    content: ' ';
    margin-top: -6px;
    margin-left: -6px;
    border: 1px solid black;
    border-radius: 3px;
}

.tableSelectColumn {
    /*   max-width: 30px !important;*/
    width: 15px !important;
    padding-right: 5px !important;
}
.serialNumberDetails .list-group-item {
    padding-left: 2rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
    display: block !important;
}
.form-check-inline {
    margin-right: .25rem; 
}


.clickable {
    cursor: pointer;
    color: blue;
}

    .clickable:hover {
        text-decoration: underline;
    }

.tableWarningRow {
    background-color: #efd6d6f5 !important;
}

.dark .tableWarningRow {
    color: red !important;
    background-color: revert !important;
}

.tableWarningCell {
    background-color: #efd6d6f5 ;
}

.dark .tableWarningCell {
    color: red !important;
    background-color: revert!important;
}

.tableGroup .input-group-text {
    height: 21px !important;
    font-size: 12px;
}

.tableGroup .form-control {
    height: 21px !important;
    font-size: 12px;
}
  
.globalSearchResults{
    margin-top:0px !important;
    width:100% !important;
}

.filterhead
{
   padding-right:4px!important;
}

.tableSelect {
    border-radius: 4px;
    border-color: #ced4da;
    background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='grey' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
    background-position: calc(100% - 0.2rem) center !important;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

    .tableSelect option:checked {
        background-color: #00bcd4
    }

body.dark .tableSelect {
    border-radius: 4px;
    border-color: #6e6e6e;
    color: #ced4da;
    background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='grey' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
    background-position: calc(100% - 0.2rem) center !important;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

    body.dark .tableSelect option {
        background-color: #2d2d30
    }

        body.dark .tableSelect option:checked {
            background-color: #1b1b1c
        }

body.dark .table-bordered {
    border-color: #6e6e6e;
    border-right-width: 1px !important;
    border-bottom-width: 1px !important;
}

.table-hover > tbody > tr:hover {
     background-color: #dee2e6;
}

.tableHighlight {
    background-color: #dee2e6;
}

.editColumn {
    cursor: pointer;
}

table.dataTable td {
    vertical-align: middle !important;
}


.horizontalCentreColumn {
   text-align:center;
}

.editHeader
{
    font-size:16px;
    font-weight:bold;
}

.hidden {
    display: none;
}
.copy {
    cursor: pointer;
}



/* flexible multi column list*/
.items {
    display: flex;
    flex-wrap: wrap;
    /*  margin-left: -10px; */
    margin-top: -10px;
}

    .items .item {
        flex: 1 0 200px;
        box-sizing: border-box;
      padding-left:10px;
      padding-right:10px;
        margin-left: 15px;
        margin-top: 5px;
    }

.topIcons {
    color: #00b2ca;
    padding-left :.5rem;
    padding-right:.5rem;
}

.nav-tabs {
border-bottom:none;
}

.nav-pills .nav-link {
    color: #00b2ca !important;
    border-color: #00b2ca !important;
    font-weight: normal !important;
    border: 1px solid;
    border-radius: .25rem;
    padding: 0.3rem 0.75rem;
    margin:0 3px 0 3px;
}

.nav-pills .nav-link.active {
  background-color: #00b2ca;
  color:white!important;
}

    .nav-pills .nav-link.alertTab {
        background-color: #f776008c;
        color: #495057 !important;
    }

.custom-control-label {
    /* margin-bottom: 0.5rem;
    vertical-align: middle;*/
    padding-top: 4px;
}

.custom-radio {
padding-top:4px;
}

.actionButtons {
    color: #00b2ca;
    cursor: pointer;
}

    .actionButtons:hover {
        color: #17a2b8;
    }

.dropDownTable {
    width:100%;
padding:0px;
border:none;
}

.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu a::after {
        transform: rotate(-90deg);
        position: absolute;
        right: 6px;
        top: .8em;
    }

    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-left: .1rem;
        margin-right: .1rem;
    }

.dropdown-submenu-left > .dropdown-menu {
    left: -100%;
    top: 0;
    margin: 0;
    padding: 0;
    right: 100%;
}

.first-sub-menu {
    width: 12rem;
    left: -105% !important;
}

.droppableList{
overflow-y:auto;
}

.droppableList .fc-event {
    margin: 3px 0;
    cursor: move;
}

.fc-event-main {
overflow:hidden;
}

.footerButtons {
    position: fixed;
    bottom: 5px;
    width: calc(100% - 220px);
    z-index:20;
}

.list-group-item {
 padding-bottom: 0.25rem;
 padding-top:0.25rem;
}

.form-check-input {
    margin-top: 0.2rem;
}

.linkDisabled {
    opacity: 0.5;
   cursor: not-allowed;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.warningText {
color:red;
}
    .select2-container .select2-selection--multiple .select2-selection__rendered li {
        margin: 0;
    }

.side-menu > .side-menu-body > ul li a, .side-menu > .container > .side-menu-body > ul li a, .side-menu > .container-fluid > .side-menu-body > ul li a {
    padding: 4px 15px;
}

.inline.select2-container {
display:inline-block;
}

body.waiting * {
    cursor:wait!important;
}

ul.licenseList li {

    list-style-type: square;

}

.brandingIcon  {
   max-height: 40px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
}

.brandingIcon a:hover {
    margin: 0px !important;
    height: 45px;
}

.footerBlankDiv {
    height: 50px
}
/*stops checkbox text being coloured if validation used*/
.custom-control-input.is-invalid ~ .custom-control-label, .custom-control-input.is-valid~.custom-control-label {
    color: revert;
}

.disabledListRow {
    background-color: rgba(0,0,0,.03);
}

/*seems to get overridden somewhere*/
.note-editor .note-toolbar > .note-btn-group, .note-popover .popover-content > .note-btn-group {
display:inline-flex;
}

.searchIcon::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-light);
    /* content: "\f02a\0020\0020\f322";*/
    content: "\f002";
    cursor: pointer;
    padding-right:2px;
}


table.dataTable input.dt-select-checkbox {
    appearance: checkbox;
    width: 16px;
    height: 16px;
}

    table.dataTable input.dt-select-checkbox:checked:after {
        content: "";
    }

    table.dataTable input.dt-select-checkbox:indeterminate:after {
        content: "";
        background-color: transparent;
    }

table.dataTable.table.table-striped > tbody > tr:nth-of-type(2n+1).selected {
    background-color: #fff1cc;
}

.custom-control-inline-radio-label {
padding-top:12px;
}

.help-icon {
    display: none;
}

@media (max-width: 991px) {
    .footerButtons {
            width: calc(100% - 20px);
        }
    }

    @media (min-width: 410px) {
        .items .item {
            max-width: calc(50% - 10px);
        }
    }

    @media (min-width: 620px) {
        .items .item {
            max-width: calc(33.33333% - 10px);
        }
    }

    @media (min-width: 830px) {
        .items .item {
            max-width: calc(25% - 10px);
        }
    }

    @media (min-width: 1040px) {
        .items .item {
            max-width: calc(20% - 10px);
        }
    }

    @media (min-width: 1250px) {
        .items .item {
            max-width: calc(16.66667% - 10px);
        }
    }

    @media (min-width: 1460px) {
        .items .item {
            max-width: calc(14.28571% - 10px);
        }
    }

    @media (min-width: 1670px) {
        .items .item {
            min-width: calc(12.5% - 10px);
        }
    }


