@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');

: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-touch-callout: none;
    -webkit-overflow-scrolling: auto;
    color: #2d3e58;
    font-weight: bold;
    font-size: 18px;
    font-family: 'Source Sans Pro', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.app-pointer {
    cursor: pointer;
}
.app-navbar {
    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: #2d3e58;
    background-image: linear-gradient(270deg, #536580, #2d3e58);
}
.app-container {    
    padding-left: max(15px, var(--safe-area-inset-left));
    padding-right: max(15px, var(--safe-area-inset-right));
    padding-bottom: max(15px, var(--safe-area-inset-bottom));
}
.app-greyscale {
    filter: grayscale(100%);
}
.app-sticky-top {
    position: -webkit-sticky;
    position: sticky;
    z-index: 100;
}
.app-shadow {
    transition: transform .2s;
    box-shadow: 3px 2px 4px 0px rgba(100, 100, 100, 0.4);
}
.app-card {
    transition: transform .2s;
    box-shadow: 3px 2px 4px 0px rgba(100, 100, 100, 0.4);
}
.app-card:hover {
    transform: scale(1.05);
}
.app-bg-white-trn {
    background-color: rgba(255, 255, 255, 0.8);
}
.app-btn {
    font-weight: bold;
    color:white;
    background-color: #2AC8B4;
    border-color: #2AC8B4;
}
.app-btn:hover, .app-btn:focus, .app-btn:active, .app-btn:active:focus {
    color:white;
    background-color: #2AC8B4;
    border-color: #2AC8B4;
}
.app-checkbox {
    width: 15px;
    height: 18px;    
}