/**
 * @file   CSS for util.js
 * @author Joseph Vrabel, U.S. Geological Survey <jvrabel@usgs.gov>
 * @preserve
 */

/*
.............................................
helpers
.............................................
*/
.util-unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/*
.............................................
util.alert
.............................................
*/

/* body blur effect */
body.blur>*:not(.modal, .tooltip) {
    -webkit-filter: blur(0.08rem) grayscale(60%);
    filter: blur(0.15rem) grayscale(70%);
}

/* backdrop */
.modal-backdrop {
    background-color: #555;
    transition-duration: 0ms;
}
.modal-backdrop.show {
    opacity: 0.15;
}

/* dialog */
#UtilAlert.modal .modal-dialog {
    transform: none;
    transition: transform 300ms linear;
    transition-timing-function: cubic-bezier(0.570, 0.280, 0.230, 1.650);
}
#UtilAlert.modal .modal-dialog .modal-body {
    max-height: 80vh;
    overflow-y: auto;
}
#UtilAlert.modal .modal-dialog .modal-footer {
    background-color: #f9f9f9;
}

/* effects */
#UtilAlert.modal.zoom .modal-dialog {
    transform: scale(0.7);
}
#UtilAlert.modal.zoom.show .modal-dialog {
    transform: scale(1);
}

#UtilAlert.modal.up .modal-dialog {
    transform: translateY(10rem);
}
#UtilAlert.modal.up.show .modal-dialog {
    transform: translateY(0);
}

#UtilAlert.modal.down .modal-dialog {
    transform: translateY(-10rem);
}
#UtilAlert.modal.down.show .modal-dialog {
    transform: translateY(0);
}

#UtilAlert.modal.left .modal-dialog {
    transform: translateX(10rem);
}
#UtilAlert.modal.left.show .modal-dialog {
    transform: translateX(0);
}

#UtilAlert.modal.right .modal-dialog {
    transform: translateX(-10rem);
}
#UtilAlert.modal.right.show .modal-dialog {
    transform: translateX(0);
}

#UtilAlert.modal.rotate .modal-dialog {
    transform: rotate(-60deg);
}
#UtilAlert.modal.rotate.show .modal-dialog {
    transform: rotate(0deg);
}

#UtilAlert.modal.scaleX .modal-dialog {
    transform: scaleX(0.5);
}
#UtilAlert.modal.scaleX.show .modal-dialog {
    transform: scaleX(1);
}

#UtilAlert.modal.scaleY .modal-dialog {
    transform: scaleY(0.5);
}
#UtilAlert.modal.scaleY.show .modal-dialog {
    transform: scaleY(1);
}

#UtilAlert.modal.skewX .modal-dialog {
    transform: scale(0.5) skewX(-60deg);
}
#UtilAlert.modal.skewX.show .modal-dialog {
    transform: scale(1) skewX(0deg);
}

#UtilAlert.modal.skewY .modal-dialog {
    transform: scale(0.5) skewX(60deg);
}
#UtilAlert.modal.skewY.show .modal-dialog {
    transform: scale(1) skewX(0deg);
}

/*
.............................................
util.notify
.............................................
*/

/* position containers */
.util-notify-container {
    overflow: visible;
    pointer-events: none;
    position: fixed;
    z-index: 999;
}
.util-notify-container.util-notify-left {
    left: 0;
}
.util-notify-container.util-notify-right {
    right: 0;
}
.util-notify-container.util-notify-top {
    top: 0;
}
.util-notify-container.util-notify-bottom {
    bottom: 0;
}
.util-notify-container.util-notify-center {
    left: 50%;
}

/* notification in container */
.util-notify {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    margin: 0.9375rem;
    max-height: 1000rem;
    padding: 1.6rem 2.1rem 1.6rem 1.6rem;
    pointer-events: auto;
    position: relative;
    transform: scale(1);
    transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.util-notify:hover {
    opacity: 1 !important;
}
.util-notify.util-notify-hide {
    max-height: 0;
    transform: scale(0);
}

/* visible-hidden transitions */
/* ...left... */
.util-notify-left .util-notify {
    left: 0;
}
.util-notify-left .util-notify-hide {
    left: -20rem;
}
/* ...right... */
.util-notify-right .util-notify {
    right: 0;
}
.util-notify-right .util-notify-hide {
    right: -20rem;
}
/* ...top center... */
.util-notify-top.util-notify-center .util-notify {
    transform: translateX(-50%);
    top: 0;
}
.util-notify-top.util-notify-center .util-notify-hide {
    transform: translateX(-50%);
    top: -10rem;
}
/* ...bottom center... */
.util-notify-bottom.util-notify-center .util-notify {
    transform: translateX(-50%);
    bottom: 0;
}
.util-notify-bottom.util-notify-center .util-notify-hide {
    transform: translateX(-50%);
    bottom: -10rem;
}

/* types */
.util-notify-default {
    background: white;
}
.util-notify-info {
    background: #17a2b8;
    border: 1px solid white;
    color: white;
}
.util-notify-success {
    background: #41a458;
    border: 1px solid white;
    color: white;
}
.util-notify-warning {
    background: #fcf8d7;
    border: 1px solid #e0c36c;
    color: #93761f;
}
.util-notify-danger {
    background: #d34545;
    border: 1px solid white;
    color: white;
}
.util-notify-custom {
    background: none;
    padding: 0;
}

/*
.............................................
util.tooltips
.............................................
*/

/* undo some bootstrap styling for custom templates */
.tooltip {
    font-family: inherit;
    font-size: 1rem;
}
.tooltip.show {
    opacity: inherit;
}
.tooltip-inner {
    background-color: inherit;
    border-radius: inherit;
    color: inherit;
    padding: inherit;
    text-align: inherit;
}

/* disabled */
.util-tooltips-disabled .tooltip {
    display: none;
}

/* themes */
.tooltip-dark .tooltip-inner {
    background: var(--bs-dark);
    border: 1px solid var(--bs-light);
    color: var(--bs-light);
}
.tooltip-dark.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--bs-light);
}
.tooltip-dark.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: var(--bs-light);
}
.tooltip-dark.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--bs-light);
}
.tooltip-dark.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: var(--bs-light);
}

.tooltip-light .tooltip-inner {
    background: var(--bs-light);
    border: 1px solid var(--bs-dark);
    color: var(--bs-dark);
}
.tooltip-light.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--bs-dark);
}
.tooltip-light.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: var(--bs-dark);
}
.tooltip-light.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--bs-dark);
}
.tooltip-light.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: var(--bs-dark);
}

.tooltip-primary .tooltip-inner {
    background: var(--bs-primary);
    border: none;
    color: var(--bs-white);
}
.tooltip-primary.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--bs-primary);
}
.tooltip-primary.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: var(--bs-primary);
}
.tooltip-primary.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--bs-primary);
}
.tooltip-primary.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: var(--bs-primary);
}

.tooltip-success .tooltip-inner {
    background: var(--bs-success);
    border: none;
    color: var(--bs-white);
}
.tooltip-success.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--bs-success);
}
.tooltip-success.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: var(--bs-success);
}
.tooltip-success.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--bs-success);
}
.tooltip-success.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: var(--bs-success);
}

.tooltip-warning .tooltip-inner {
    background: var(--bs-warning);
    border: none;
    color: var(--bs-white);
}
.tooltip-warning.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--bs-warning);
}
.tooltip-warning.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: var(--bs-warning);
}
.tooltip-warning.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--bs-warning);
}
.tooltip-warning.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: var(--bs-warning);
}

.tooltip-danger .tooltip-inner {
    background: var(--bs-danger);
    border: none;
    color: var(--bs-white);
}
.tooltip-danger.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--bs-danger);
}
.tooltip-danger.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: var(--bs-danger);
}
.tooltip-danger.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--bs-danger);
}
.tooltip-danger.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: var(--bs-danger);
}

/*
.............................................
jQuery.bootstrapToggle plugin
.............................................
*/
.btn-group-xs>.btn,
.btn-xs {
    border-radius: .2rem;
    font-size: .875rem;
    line-height: .5;
    padding: .35rem .4rem .25rem .4rem;
}
.checkbox label .toggle,
.checkbox-inline .toggle {
    margin-left: -1.25rem;
    margin-right: .35rem;
}
.toggle {
    overflow: hidden;
    position: relative;
}
.toggle.btn.btn-light,
.toggle.btn.btn-outline-light {
    border-color: rgba(0, 0, 0, .15);
}
.toggle input[type="checkbox"] {
    display: none;
}
.toggle-group {
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
    transition: left 0.35s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 200%;
}
.toggle.off .toggle-group {
    left: -100%;
}
.toggle-on {
    bottom: 0;
    border: 0;
    border-radius: 0;
    left: 0;
    margin: 0;
    position: absolute;
    right: 50%;
    top: 0;
}
.toggle-off {
    bottom: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    left: 50%;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.toggle-handle {
    background-color: white;
    border-width: 0 1px;
    height: 100%;
    margin: 0 auto;
    padding-bottom: 0;
    padding-top: 0;
    position: relative;
    width: 0;
}
.toggle.btn-outline-primary .toggle-handle {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.toggle.btn-outline-secondary .toggle-handle {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}
.toggle.btn-outline-success .toggle-handle {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}
.toggle.btn-outline-danger .toggle-handle {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}
.toggle.btn-outline-warning .toggle-handle {
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
}
.toggle.btn-outline-info .toggle-handle {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
}
.toggle.btn-outline-light .toggle-handle {
    background-color: var(--bs-light);
    border-color: var(--bs-light);
}
.toggle.btn-outline-dark .toggle-handle {
    background-color: var(--bs-dark);
    border-color: var(--bs-dark);
}
.toggle[class*="btn-outline"]:hover .toggle-handle {
    background-color: var(--bs-light);
    opacity: 0.5;
}

/* [default] must come first so classes below override */
.toggle.btn {
    min-height: 2.15rem;
    min-width: 3.7rem;
}
.toggle-on.btn {
    padding-right: 1.5rem;
}
.toggle-off.btn {
    padding-left: 1.5rem;
}
/* lg */
.toggle.btn-lg {
    min-height: 2.815rem;
    min-width: 5rem;
}
.toggle-on.btn-lg {
    padding-right: 2rem;
}
.toggle-off.btn-lg {
    padding-left: 2rem;
}
.toggle-handle.btn-lg {
    width: 2.5rem;
}
/* sm */
.toggle.btn-sm {
    min-height: 1.938rem;
    min-width: 3.125rem;
}
.toggle-on.btn-sm {
    padding-right: 1rem;
}
.toggle-off.btn-sm {
    padding-left: 1rem;
}
/* xs */
.toggle.btn-xs {
    min-height: 1.375rem;
    min-width: 2.19rem;
}
.toggle-on.btn-xs {
    padding-right: .8rem;
}
.toggle-off.btn-xs {
    padding-left: .8rem;
}

/*
.............................................
bootstrap
.............................................
*/

/* control pointers */
input[type=checkbox],
input[type=radio],
input[type=range],
option,
select,
.dropdown-menu li {
    cursor: pointer !important;
}

/* no input control shadows */
input:focus,
select:focus,
textarea:focus,
.btn:focus {
    box-shadow: inherit !important;
}

/* collapse speed */
.collapsing {
    transition: height 150ms linear;
}