/*
 * Sure Framework UX - Global Stylesheet
 * (c) Copyright 2020-2023, Sure Microsystems Ltd
 *
 * Description: UX framework styles
 *
 * Modification History
 * 09.09.2022 - Added fullscreen icon
 * 27.06.2021 - Initial prototype
*/


/* Limitless 2.3 - Overrides & extensions */
/* -------------------------------------- */

/* HTML - Overrides to base elements */
input {
    filter: none;
}

/* Page Header - Adjustments to title sizes */
.page-header .page-title {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.page-header .page-title i {
    font-size: 1.25em;
}

/* Navigation Bar - Brand text and icon styling */
.navbar-brand-text {
    padding-top: .8125rem;
    padding-bottom: .8125rem;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.572;
    text-align: left;
    text-transform: uppercase;
}
.navbar-brand-icon {
    padding: 0.5rem 1rem 0 0;
}

.navbar-dark .navbar-brand-text a,
.navbar-dark .navbar-brand-text a:hover,
.navbar-dark .navbar-brand-text a:link {
    color: #e0e0e0
}

.navbar-dark .navbar-brand-text a:hover {
    color: #fff;
}

.sidebar-dark .nav-sidebar > .nav-item-open > .nav-link:not(.disabled),
.sidebar-dark .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light .card[class*="bg-"]:not(.bg-light):not(.bg-white):not(.bg-transparent) .nav-sidebar > .nav-item-open > .nav-link:not(.disabled), .sidebar-light .card[class*="bg-"]:not(.bg-light):not(.bg-white):not(.bg-transparent) .nav-sidebar > .nav-item > .nav-link.active {
    background-color: #2196f3;
}

.sidebar-xs .sidebar-main .sidebar-user .media > div:first-child {
    display: inherit !important;
}

/* Modal - Modal padding overrides */
.modal-header .close {
    padding-top: 1.4rem;
}
@media (min-width:576px) {
    .modal-dialog.modal-md {
        max-width: 780px;
    }
}

/* Dropdown - Enable events for disabled items */
.dropdown-item.ux-disabled {
    pointer-events: auto;
    color: #999;
    background-color: transparent;
    cursor: default
}

/* Select2 - Overrides */
.select2-selection--multiple .select2-search--inline {
    width: 50%;
}
.select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
    color: #000;
}
.select2-results__option.loading-results {
    display: none;
}
.select2-results__option.loading-results + .select2-results__option {
    margin-top: 0;
}
.select2.select2-container--disabled {
    background-color: #fafafa;
}

/* Cards - Overrides */
.card-header {
    padding-top: 0.8rem;
    padding-bottom: 0.75rem;
}
.card-title > i {
    /*font-size: 1.25rem;*/
}

/* Accordian - Remove animation */
.collapsing {
    -webkit-transition: height .01s ease;
    -o-transition: height .01s ease;
    transition: height .01s ease;
}

/* Colours - Changes to the Limitless built-in colours */
.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #cfbe8a;
}

/* Forms - Changes to the Limitless form controls */
legend {
    padding-bottom: 0.325rem;
}
.form-check-label.text-muted {
    cursor: default;
}
.form-control::placeholder {
    text-transform: none !important;
}

.wizard > .steps > ul {
    border-bottom: 1px solid rgba(0,0,0,.125);
}
.wizard > .content {
    margin-top: 1.25rem;
}
.wizard > .actions {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    border-top: 1px solid rgba(0,0,0,.125);
    background-color: #fafafa;
}
.wizard > .actions > ul > li + li {
    margin-left: .5rem;
}
.wizard > .steps > ul > li.done.disabled > a > span {
    background-color: #eee !important;
    border-color: #eee !important;
}
.wizard > .steps > ul > li.done.disabled::after, .wizard > .steps > ul > li.done.disabled::before {
    background-color: #eee !important;
}

/* Icons - Additional sizes */
.icon-1-5x {
    font-size: 1.5rem;
}
.icon-2-5x {
    font-size: 2.5rem;
}
.icon-3-5x {
    font-size: 3.5rem;
}


/* Extended Styles - Extra custom styles to Limitless template */
/* ----------------------------------------------------------- */

/* Form controls */
.form-control.ux-required,
.uniform-checker.ux-required > span, .uniform-choice.ux-required > span,
.select2-container--default .select2-selection--single.ux-required,
.select2-container--default .select2-selection--multiple.ux-required,
.ux-thumbnail.ux-required {
    background: linear-gradient(135deg, #2196F3 6px, white 6px);
}

.form-control:disabled.ux-required,
.form-control[readonly].ux-required,
.ux-thumbnail.ux-required,
.select2-container--disabled .select2-selection.ux-required {
    background: linear-gradient(135deg, #2196F3 6px, #fafafa 6px); /* #999 */
}

.form-control:not(.border-1):not(.border-2):not(.border-3):focus,
.uniform-checker.focus > span, .uniform-choice.focus > span, .uniform-uploader.focus > span.filename,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.ux-table-list--focus {      
    border-color: #2196F3; /* Set focus highlight */
}

.select2-container--disabled.select2-container--focus .select2-selection--single {
    border-color: #ddd; /* Disabled focus highlight */
}

.custom-radio:focus + label:before {
    outline: 1px solid black;
    outline: 1px auto -webkit-focus-ring-color;
}

textarea.ux-textarea.ux-no-resize {
    resize: none;
}

/* Datatables - Additional styling to limitless datatables */
.datatable-footer, .card-body .datatable-footer {
    padding: 10px;
}
.dataTables_info, .dataTables_paginate {
    margin-bottom: 0;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:focus,
.dataTables_paginate .paginate_button.current:hover {
    background-color: #2196f3;
}
.dataTable th, .dataTable td {
    white-space: nowrap;
}

/* Spectrum - Additional styling */
.sp-container {
    z-index: 10000;
}
.sp-container .sp-choose {
    background-color: #2196f3;
}
.sp-container .sp-cancel {
    margin-left: .25rem;
    margin-right: 0;
    float: right;
}

/* Switchery - Additional sizes */
.form-check-label.disabled .switchery {
    cursor: default;
}
.form-check-switchery:not(.dropdown-item).switchery-xs {
    padding-left: 2.625rem;
}
.form-check-switchery:not(.dropdown-item).switchery-xs.form-check-right {
    padding-right: 2.625rem;
    padding-left: 0;
}

.switchery-xs .switchery {
    margin-top: .125rem; 
    width: 1.875rem;
    height: .875rem;
}

.switchery-xs .switchery > small {
    width: .875rem;
    height: .875rem;
}

/* Uniform - Checkbox and radio changes */
.uniform-checker span, .uniform-choice span {
    border-color: #ddd;
}

.uniform-choice span::after {
    border-color: #333;
}

/* Typeahead - Corrections to plugin styles to match Limitless */
.typeahead__container, .typeahead__field input.form-control {
    font-family: Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.5385;
}

.typeahead__container, .typeahead__field input.form-control {
    background-color: transparent;
}

.typeahead__field input.form-control {
    min-height: calc(1.5385em + .875rem + 2px);
    padding-top: .4375rem;
    padding-bottom: .4375rem;
}

/* UX option to style typeahead as dropdown */
.typeahead__container.ux-typeahead-dropdown .typeahead__list {
    padding: 0.5rem 0;
}
.typeahead__container.ux-typeahead-dropdown .typeahead__list > li {
    border-top: none;
}

.typeahead__field .form-control-feedback i {
    line-height: calc(1.5385em + .875rem + 2px);
}

.input-group .typeahead__container:first-child .form-control {
    border-radius: .1875rem;
}

.typeahead__dropdown, .typeahead__list {
    margin-top: 0;
}

.typeahead__result .typeahead__list {
    padding-top: 0;
    padding-bottom: 0;
    max-height: 390px;
    overflow-y: auto;
}

.typeahead__result .typeahead__list li > a, .typeahead__result .typeahead__list li > a:hover,
.typeahead__result .typeahead__list li > a:active, .typeahead__result .typeahead__list li > a:focus {
    padding: .5rem 1rem;
}

.typeahead__result .typeahead__list li > a.item {
    overflow: hidden;
    white-space: nowrap;
    width: 80%;
}

.modal-dialog .typeahead__container .typeahead__result .typeahead__list {
    max-height: 240px;
}

.typeahead__list .typeahead__group > a, .typeahead__list .typeahead__group > a:hover,
.typeahead__list .typeahead__group > a:focus {
    text-transform: uppercase;
    font-weight: 400;
    color: rgba(255,255,255,.5);
    background-color: #607d8b;
    border-color: #607d8b;
}

.typeahead__dropdown .typeahead__dropdown-item > a, .typeahead__list .typeahead__item > a {
    display: flex;
    padding: .5rem 1rem;
    align-items: center;
}

/* TODO: Light mode only create dark mode version */
/* Bootstrap-datepicker - Bootstrap and Limitless styling for the bootstrap-datepicker plugin not now included in the Limitless template */
/* https://github.com/uxsolutions/bootstrap-datepicker */
.datepicker.datepicker-dropdown {
    top: 0;
    left: 0;
    margin: 0;
    padding: 14px
}

.datepicker table {
    margin: 0
}

.datepicker table tr td.day:hover {
    background-color: #f5f5f5;
    cursor: pointer
}

.datepicker table tr td.new,
.datepicker table tr td.old {
    color: #999
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
    background-color: transparent;
    color: #999;
    cursor: default
}

.datepicker table tr td.today,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today:hover {
    background-color: #f5f5f5
}

.datepicker table tr td.range,
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:hover,
.datepicker table tr td.range:hover {
    background-color: #f5f5f5;
    border-radius: 0
}

.datepicker table tr td.range.today,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today.active:hover,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today:hover {
    background-color: #f5f5f5
}

.datepicker table tr td span.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active:hover,
.datepicker table tr td.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active:hover {
    background-color: #2196F3 !important;
    color: #fff
}

.datepicker table tr td span {
    display: block;
    width: 31%;
    padding: 7px 12px;
    float: left;
    margin: 1%;
    cursor: pointer;
    border-radius: 3px
}

.datepicker table tr td span:hover,
.datepicker table tr th.prev:hover,
.datepicker table tr th.next:hover,
.datepicker table tfoot tr th:hover {
    background-color: #f5f5f5
}

.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
    background-color: transparent;
    color: #999;
    cursor: default
}

.datepicker table tr td span.new,
.datepicker table tr td span.old {
    color: #999
}

.datepicker table th.datepicker-switch {
    font-size: 15px;
    font-weight: 400
}

.datepicker table tfoot tr th,
.datepicker table thead tr:first-child th {
    cursor: pointer;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 1
}

.datepicker table .cw {
    width: 16px;
    padding: 0 2px 0 5px;
    vertical-align: middle
}

.datepicker table thead tr:first-child th.cw {
    cursor: default;
    background-color: transparent
}

.datepicker .table-condensed td,
.datepicker .table-condensed th {
    text-align: center;
    padding: 10px;
    border-radius: 3px;
    border: 0;
    line-height: 1
}

.datepicker .table-condensed th.dow {
    padding-top: 14px;
    color: #999
}

.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
    background-color: transparent
}

.datepicker table tr td.today {
    background-color: inherit;
    border: 2px solid red;
}

/* TODO: Light mode only create dark mode version */
/* Bootstrap-datetimepicker - Bootstrap and Limitless styling for the bootstrap-datetimepicker plugin not now included in the Limitless template */
/* https://github.com/Eonasdan/bootstrap-datetimepicker */
.bootstrap-datetimepicker-widget {
    list-style: none;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    display: block;
    margin: 0;
    padding: 4px;
    width: 19em;
}

@media (min-width: 768px) {
    .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
        width: 38em;
    }
}

@media (min-width: 992px) {
    .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
        width: 38em;
    }
}

@media (min-width: 1200px) {
    .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
        width: 38em;
    }
}

.bootstrap-datetimepicker-widget.dropdown-menu.top:before {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #ccc;
    border-top-color: rgba(0, 0, 0, 0.2);
    bottom: -7px;
    left: 6px;
}

.bootstrap-datetimepicker-widget.dropdown-menu.top:after {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid white;
    bottom: -6px;
    left: 7px;
}

.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:before {
    left: auto;
    right: 6px;
}

.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:after {
    left: auto;
    right: 7px;
}

.bootstrap-datetimepicker-widget .list-unstyled {
    margin: 0;
}

.bootstrap-datetimepicker-widget a[data-action] {
    /*padding: 6px 0;*/
    padding: 0;
}

.bootstrap-datetimepicker-widget a[data-action]:active {
    box-shadow: none;
}

.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
    width: 54px;
    font-weight: bold;
    font-size: 1.2em;
    margin: 0;
}

.bootstrap-datetimepicker-widget button[data-action] {
    padding: 6px 10px;
}

.bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Increment Hours";
}

.bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Increment Minutes";
}

.bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Decrement Hours";
}

.bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Decrement Minutes";
}

.bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Show Hours";
}

.bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Show Minutes";
}

.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Toggle AM/PM";
}

.bootstrap-datetimepicker-widget .btn[data-action="clear"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Clear the picker";
}

.bootstrap-datetimepicker-widget .btn[data-action="today"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Set the date to today";
}

.bootstrap-datetimepicker-widget .picker-switch {
    text-align: center;
}

.bootstrap-datetimepicker-widget .picker-switch::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Toggle Date and Time Screens";
}

.bootstrap-datetimepicker-widget .picker-switch td {
    padding: 0;
    margin: 0;
    height: auto;
    width: auto;
    line-height: inherit;
}

.bootstrap-datetimepicker-widget .picker-switch td span {
    line-height: 2.5;
    height: 2.5em;
    width: 100%;
}

.bootstrap-datetimepicker-widget table {
    width: 100%;
    margin: 0;
}

.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th {
    text-align: center;
    border-radius: 4px;
}

.bootstrap-datetimepicker-widget table th {
    height: 20px;
    line-height: 20px;
    width: 20px;
}

.bootstrap-datetimepicker-widget table th.picker-switch {
    width: 145px;
}

.bootstrap-datetimepicker-widget table th.disabled,
.bootstrap-datetimepicker-widget table th.disabled:hover {
    background: none;
    color: #777777;
    cursor: not-allowed;
}

.bootstrap-datetimepicker-widget table th.prev::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Previous Month";
}

.bootstrap-datetimepicker-widget table th.next::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Next Month";
}

.bootstrap-datetimepicker-widget table thead tr:first-child th {
    cursor: pointer;
}

.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background: #eeeeee;
}

.bootstrap-datetimepicker-widget table td {
    height: 48px;
    line-height: 48px;
    width: 54px;
}

.bootstrap-datetimepicker-widget table td.cw {
    font-size: .8em;
    height: 20px;
    line-height: 20px;
    color: #777777;
}

.bootstrap-datetimepicker-widget table td.day {
    height: 20px;
    line-height: 20px;
    width: 20px;
}

.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td.second:hover {
    background: #eeeeee;
    cursor: pointer;
}

.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new {
    color: #777777;
}

.bootstrap-datetimepicker-widget table td.today {
    position: relative;
}

.bootstrap-datetimepicker-widget table td.today:before {
    content: '';
    display: inline-block;
    border: solid transparent;
    border-width: 0 0 7px 7px;
    border-bottom-color: #337ab7;
    border-top-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 4px;
    right: 4px;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #337ab7;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.bootstrap-datetimepicker-widget table td.active.today:before {
    border-bottom-color: #fff;
}

.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover {
    background: none;
    color: #777777;
    cursor: not-allowed;
}

.bootstrap-datetimepicker-widget table td span {
    display: inline-block;
    width: 54px;
    height: 48px;
    line-height: 48px;
    cursor: pointer;
    border-radius: 4px;
}

.bootstrap-datetimepicker-widget table td span:hover {
    background: #eeeeee;
}

.bootstrap-datetimepicker-widget table td span.active {
    background-color: #337ab7;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.bootstrap-datetimepicker-widget table td span.old {
    color: #777777;
}

.bootstrap-datetimepicker-widget table td span.disabled,
.bootstrap-datetimepicker-widget table td span.disabled:hover {
    background: none;
    color: #777777;
    cursor: not-allowed;
}

.bootstrap-datetimepicker-widget.usetwentyfour td.hour {
    height: 27px;
    line-height: 27px;
}

.bootstrap-datetimepicker-widget.wider {
    width: 21em;
}

.bootstrap-datetimepicker-widget .datepicker-decades .decade {
    line-height: 1.8em !important;
}

.input-group.date .input-group-addon {
    cursor: pointer;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


/* UX Styles - Sure framework styles */
/* --------------------------------- */

/* Helper - Additional helper styles */

/* Page - General page styles */
.ux-background-cover {
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.ux-page-subtitle {
    font-size: 0.75rem;
    text-transform: uppercase;
}

/* Sidebar Navigation - Additional styles for vertical navigation */
.ux-sidebar-tooltip {
    display: none;
    padding-left: 1rem;
    padding-right: 1rem;
}
.sidebar-xs .ux-sidebar-tooltip {
    display: inherit;
}

/* Modal - Extra style for limitless modal dialogs */
.modal-header.ux-modal-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: #fff;
}

.ux-modal-intro {
    padding: .9375rem 1.25rem;
    border-width: 1px 0 1px 0;
    border-style: solid;
}

.ux-modal-search {
    padding: .9375rem 1.25rem;
    border-width: 1px 0 1px 0;
    border-style: solid;
}
.ux-modal-search > .row {
    margin-bottom: 0;
}
.ux-modal-search .col-form-label {
    font-weight: 500;
}

.modal-footer.ux-modal-footer {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    border-top-width: 1px;
}
.ux-modal-footer > .form-check {
    margin-bottom: 0;
}

.ux-modal-fullscreen {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 1%;
}
.ux-modal-fullscreen > form, .ux-modal-fullscreen .modal-content {
    min-height: 100%;
    height: auto;
    border: 0;
    border-radius: 0;
}
.ux-modal-fullscreen .modal-body {
    min-height: 100%;
    height: auto;
}

/* Forms - Extra styles for general forms */
.ux-form-legend {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-bottom: 1.25rem;
    padding-top: .625rem;
    padding-bottom: 0.325rem;
    font-weight: 700 !important;
    font-size: .75rem;
    text-transform: uppercase;
    line-height: inherit;
    color: inherit;
    white-space: normal;
    border-bottom: 1px solid #ddd;
}

/* Buttons - Extra styling for buttons */
button.ux-disabled {
    color: #999 !important;
    border-color: #999 !important;
}

/* Tables - Additional styles for tables */
.ux-table > tbody > tr.ux-row-select,
.ux-table > tbody > tr.ux-row-select a,
.ux-table > tbody > tr:hover.ux-row-select {
    background-color: #2196f3 !important;
    !important;
    color: #fff !important;
}
.ux-col-fit {
    white-space: nowrap;
    width: 1%;
}
.ux-table-list td {
    border-left: 0;
    border-right: 0;
}

/* Dropdown - Dropdown control styles */
.ux-dropdown, .ux-dropdown > option.placeholder {
    visibility: hidden;
}
.ux-dropdown-search {
    min-width: 420px;
}

/* List - List control styles  */
.ux-list {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 300px;
    padding: 1rem;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .1875rem;
}
.ux-list-group {
    padding: .5rem 0;
    cursor: default;
    font-weight: 500;
    margin-bottom: .5rem;
}
.ux-list-group:first-child {
    padding-top: 0;
}

/* Chat - Chat list control styles  */
.ux-chat {
    display: flex;
    flex-direction: column-reverse;
    padding: 1.25rem 1.25rem;
    overflow-y: auto;
}
.modal-dialog .ux-chat {
    min-height: auto;
    max-height: 340px;
}

/* Field Help - Context and pop-up help */
.ux-control-help {
    position: absolute;
    right: 0;
    top: 0;
    padding-left: .875rem;
    padding-right: .875rem;
    line-height: calc(1.5385em + .875rem + 2px);
    min-width: 1rem;
    color: #2196F3;
    cursor: pointer;
}

/* Field Icon - Custom icon */
.ux-control-icon {
    position: absolute;
    right: 0;
    top: 0;
    padding-left: .875rem;
    padding-right: .875rem;
    line-height: calc(1.5385em + .875rem + 2px);
    min-width: 1rem;
    color: #2196F3;
    cursor: pointer;
}
.ux-control-offset {
    padding-right: 3.5rem;   /* Correct icon position with a field button enabled */
}

.ux-control-help > a:hover, .ux-control-icon > a:hover {
    color: #0a6ebd !important;
}

/* Field Clear - Clear input field */
.ux-control-clear {
    position: absolute;
    right: 0;
    top: 0;
    padding-left: .875rem;
    padding-right: .875rem;
    line-height: calc(1.5385em + .875rem + 2px);
    min-width: 1rem;
    cursor: pointer;
}
.ux-control-clear > a {
    color: #999 !important;
}
.ux-control-clear > a:hover {
    color: #333 !important;
}

/* Error - Input field error */
.ux-control-error {
    color: #7f231c;
    background-color: #fde1df !important;
    border-color: #f55246;
}
.ux-control-error.form-control::placeholder {
    color: #be827e;
}

/* Alerts - Customised alert messages */
.ux-page-alert > .alert, .ux-form-alert > .alert, .ux-modal-alert > .alert {
    margin-bottom: 0;
    font-weight: 500;
    border-width: 1px 0 1px 0;
    border-radius: 0;
}

.ux-upload-alert {
    display: block;
    margin-top: .5rem;
    color: #f44336;
}

/* Block UI - Icon styling */
.ux-spinner {
    font-size: 1.6rem;
    color: #324148;
}

/* Console - Text output control */
.ux-console {
    height: 100%;
    font-family: Courier New, Courier, monospace;
    font-size: 14px;
    color: #eee;
    background-color: rgb(47,60,67);
    overflow-y: scroll;
    white-space: pre-wrap;
    border: 0;
}

/* Media controls */
.ux-thumbnail {
   /*padding: .4375rem;*/
    text-align: center;
    border: 1px solid #ddd;
}
.ux-thumbnail img.ux-image {
    padding: .4375rem;
    max-width: 100%;
    height: auto;
    min-height: calc(1.5385em + .875rem + 8px);
}

.ux-media-doc {
    margin: .625rem !important;
    float: left;
    width: 280px;
}
.ux-media-doc .card-body {
    text-align: center;
}
.ux-media-doc .card-body i {
    font-size: 4rem;
}
.ux-media-doc .card-footer p {
    height: 40px;
}

.ux-palette {
    border: 2px solid #ddd !important;
    cursor: pointer;
}
.ux-palette.active {
    border-color: #2196f3 !important;
}

/* Icons - Additional and Limitless replacement icons */
[data-action="ux-fullscreen"]::after {
    content: "";
}

/* Animations - General animation styles */
/* Navbar warning */
@keyframes ux-col-warning {
    0%, 100% {
        background-color: #32414b;
    }

    50% {
        background-color: #c62828;
    }
}

.ux-navbar-warning {
    animation: ux-col-warning 5s infinite;
}

.trumbowyg-button-pane button {
    padding: .4375rem .875rem;
}