@font-face {
    font-family: AgencyBold;
    src: url(fonts/AgencyFBBoldCondensed.ttf);
}

body {
    font-family: Arial;
    color: #333!important;
}

h1, h2, h3, h4, h5, h6, h7, h8, h9 {
    font-family: "Tahoma", "Times new roman", "AgencyBold" ;
    font-size: 1.6em;
}

p.title, h3.title {
    font-family: "Times new roman";
    font-weight: 700;
}

button, input, select, textarea {
    outline: none;
}

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
::-webkit-scrollbar {display:none;}
::selection {
    background: #E86850; /* WebKit/Blink Browsers */
    color: #ffffff;
}
::-moz-selection {
    background: #E86850; /* Gecko Browsers */
    color: #ffffff;
}
.blink_me {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {  
    50% { opacity: 0; }
}

.add-update-panel {
    width: 100%;
    height: 90%;
    background-color: #fcfcfc;
    margin-bottom: 50px;
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 0px solid red;
}

.btn-icon {
    display: inline-block;
    margin-left: 15px;
    margin-right: 15px;
    cursor: pointer;
    padding: 10px;
    text-align: center;
}

.btn-icon.selected {
    border: 4px solid green;
}
.btn-icon i.fa {
    font-size: 50px;
}

.picture {
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: 50% 50%;
    overflow: hidden;
}
.picture.photo-thumb {
    width: 48%;
    /*height:72px; */
    border: 1px solid #ccc;
    border-radius: 8px;
}

.picture.photo-thumb.small {
    width: 72px;
    height:72px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.indicator {
    margin-left: 5px;
    margin-right: 5px;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 0.7em!important;
}
.indicator.selected {
    border: 4px solid #8bc34a!important;
}
.indicator.black {
    color: white;
    background-color: #000!important;
}
.indicator.green {
    color: white;
    background-color: #8bc34a!important;
}
.indicator.red {
    color: white;
    background-color: #f44336!important;
}
.indicator.orange {
    color: black;
    background-color: #ffc107!important;
}
.indicator.yellow {
    color: black;
    background-color: #ffffcc!important;
}
.indicator.blue {
    color: white;
    background-color: #00bcd4!important;
}


#main {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    z-index: 0;
}

#main header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 70px;
    width: 100vw;
    z-index: 0;
}

#main .main-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 71px;
    bottom: 0;
    height: calc( 100vh - 71px );
    width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 50px;
    z-index: 0;
}
#refresh {
    position: absolute;
    right: 10px;
    top: 80px;
    width: 48px;
    height: 48px;
    line-height: 48px;
    vertical-align: middle;
    border: 0px solid blue;
    z-index: 100;
    text-align: center;
    background-color: #efefef;
}
#refresh .fa {
    font-size: 1.4em;
}
/*
#loading {
    position: absolute;
    right: 10px;
    bottom: 15px;
    width: 80px;
    height: 80px;
    line-height: 80px;
    vertical-align: middle;
    border: 0px solid blue;
    z-index: 100;
    text-align: center;
}
#loading .w3-spin {
    display: inline-block;
    width: 100%;
    height: 100%;
}
#loading .w3-spin .fa-spinner {
    font-size: 50px;
}
*/
#add-updates-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0px;
    left: 0;
    z-index: 200;
}
#add-updates-panel .content {
    position: absolute;
    top: 76px;
    right: 0;
    bottom: 0px;
    left: 0;
    z-index: 200;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

table tr th, table tr td {
    text-align: center!important;
}

ul.popup-menu {
    list-style:none!important;
    padding-left:0!important;
}
ul.popup-menu li {
    cursor: pointer;
    padding: 5px 10px;
}
ul.popup-menu li:hover {
    background-color: #ccc;
}

/* Time picker position ajustement */
.mdtp__wrapper {
    bottom: initial!important;
    top: 24px!important;
}

/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
.StripeElement {
    background-color: white;
    height: 40px;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
}

.StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
    border-color: #fa755a;
}

.StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}

.pricing-plan.active {
    border: 2px solid greenyellow;
}


/* w3.css overrides */

.w3-tiny {
    font-size: 0.8em!important;
}

.w3-small {
    font-size: 1.0em!important;
}

.w3-medium {
    font-size: 1.2em!important;
}

.w3-large {
    font-size: 1.4em!important;
}

.w3-xlarge {
    font-size: 1.6em!important;
}


.w3-xxlarge {
    font-size: 1.8em!important;
}

.w3-xxxlarge {
    font-size: 2.0em!important;
}

.w3-jumbo {
    font-size: 2.5em!important;
}
/*___________________*/
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 50px;
    margin-left: -120px;
}