:root {
    --safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-left: env(safe-area-inset-left);
    --safe-area-inset-right: env(safe-area-inset-right);  
    --safe-area-inset-bottom: env(safe-area-inset-bottom);   
}
body {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-overflow-scrolling: auto;
}
h1, .h1 {font-size: 1.4em}
h2, .h2 {font-size: 1.2em}
h3, .h3 {font-size: 1.1em}
h4, .h4 {font-size: 1.0em}
iframe {display: block} /* removes whitespace around iframes */
/*  */
.app-pointer {cursor: pointer}
.app-nav-button {min-width: 55px}
.app-nav-button-sm {min-width: 40px}
.app-nav-button-lg {min-width: 100px; min-height: 35px}
.app-form-button {min-width: 100px}
.app-modal-button {min-width: 100px}
/* Adjust top modal down for phone notches */
.app-modal {margin-top: max(15px, var(--safe-area-inset-top))}
.app-navbar-top {
    padding-top: max(15px, var(--safe-area-inset-top));
    padding-left: max(15px, var(--safe-area-inset-left));
    padding-right: max(15px, var(--safe-area-inset-right));
    background-color: #036;
}
.app-navbar-bottom {
    align-items: center;
    display: flex;
    width: 100%;
    justify-content: center;
    bottom: 0;
    padding-bottom: max(15px, var(--safe-area-inset-bottom));
    position: fixed;
    z-index: 9998;
}
.app-safe-margins {
    /* padding-top: max(15px, var(--safe-area-inset-top)); */
    padding-left: max(15px, var(--safe-area-inset-left));
    padding-right: max(15px, var(--safe-area-inset-right));
}
.app-card-shadow {
    transition: transform .2s;
    box-shadow: 3px 2px 4px 0px rgba(100, 100, 100, 0.2);
}
.app-fixed-center {
    align-items: center;
    display: flex;    
    height: 100vh;
    width: 100%;
    justify-content: center;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 9999;
}
.app-text-sm {
    font-size: .9em;
}
.app-cover-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    position: relative;
    height: 300px;
}
.app-gradient-bottom {
    height: 60px;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0, 0, 0, 1));
    position: absolute;
    bottom: 0;
    left: 0;
}
.dropdown-toggle::after {content: none} /* remove down arrow from dropdown menus */
.modal-dialog-slideout {
    min-height: 100%;    
    margin: 0 0 0 auto;
}
.modal.fade .modal-dialog.modal-dialog-slideout {
    -webkit-transform: translate(100%,0)scale(1);
    transform: translate(100%,0)scale(1);
}
.modal.fade.show .modal-dialog.modal-dialog-slideout {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
    display: flex;
    align-items: stretch;
    -webkit-box-align: stretch;
    height: 100%;
}
.modal.fade.show .modal-dialog.modal-dialog-slideout .modal-body {
    overflow-y: auto;
    overflow-x: hidden;    
}