html{
    font-family: 'Roboto', sans-serif;
    /*font-family: 'Open Sans', sans-serif !important;*/
    font-weight: 400;
    height: 100%;
    color: rgba(0,0,0, 0.87);
    font-size: 14px;
}
body{
    background-size: cover;
    height: 100%;
    max-width: 100%;
    background-repeat: no-repeat;
    font-weight: 400;
}

.italic{ font-style: italic;}
.width-auto{ width: auto !important;}
.capitalize{ text-transform: capitalize; }
.pointer{ cursor: pointer; }
.bold{ font-weight: 500 !important; }
.full-width{ width: 100%; }
.no-border{border: none !important;}
.hidden{
    display: none !important;
}

h1::first-letter, h2::first-letter, h3::first-letter, h4::first-letter {
    text-transform: uppercase;
}
h1, h2, h3, h4{
    margin: 0;
    line-height: initial;
    -webkit-font-smoothing: antialiased !important;
}
h1, .h1{
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -1px;
}
h2, .h2{
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -1px;
}
h3, .h3{
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}
h4, .h4{
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.5px;
}
.caption{
    letter-spacing: -0.2px;
    font-size: 0.86rem !important;
    font-weight: 300 !important;
}
.overline{
    letter-spacing: 0.5px;
    font-size: 0.86rem;
    text-transform: uppercase;
}
.link{
    font-weight: 500;
    font-size: 0.86rem;
    letter-spacing: -0.25px;
}
.button{
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: -0.4px;
}
.chip, label{
    font-weight: 400;
    font-size: 1rem;
}
#toast-container {
    bottom: 4rem;
    z-index: 10005 !important;
}
.toast, .toast .btn{
    font-size: 1rem;
}
.disabled, ::placeholder{ /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgba(0,0,0,0.3) !important;
}
.input-field{
    margin: 0;
    border:0.5rem solid transparent;
    color: rgb(34, 34, 34) !important;
    background-color: rgb(255, 255, 255) !important;
    border-radius: 1.5rem;
    padding:0 1rem !important;
    box-shadow: rgb(176 176 176) 0px 0px 0px 1px inset !important;
}
.input-field textarea, .input-field input, .input-field select{
    padding-top: 14px !important;
    font-size: 1.25rem !important;
    font-weight: 500;
    letter-spacing: -0.5px;
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}
.input-field .materialize-textarea{
    padding-top: 25px !important;
    min-height: 50px;
}
.input-field .prefix{
    padding: 8px 0px;
}
.input-field label{
    left: 0 !important;
    margin-top: 0.5rem;
    margin-left: 1rem;
    font-size: 1rem;
}
.input-field>input[type]:-webkit-autofill:not(.browser-default)+label, .input-field>input[type=datetime-local]:not(.browser-default)+label, .input-field>input[type=date]:not(.browser-default)+label, .input-field>input[type=time]:not(.browser-default)+label,
.input-field>label:not(.label-icon).active {
    -webkit-transform: translateY(0px) scale(0.8);
    transform: translateY(0px) scale(0.8);
}
.default-select select{
    margin-top: 0;
    height: 4rem;
    padding: 0;
}
.default-select .input-field label {
    left: 0.75rem !important;
    margin-top: -5px;
    margin-left: 8px;
    font-size: 0.8rem;
}
.clear-input{
    cursor: pointer;
    position: absolute;
    right: 0.5rem;
    top: 1.2rem;
    color: #999999;
    font-size: 20px;
}
.body-md{
    font-size: 1rem !important;
}
.toast-action{
    margin: 0 !important;
}
.btn, .btn-text{
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: -0.4px;
}
.btn, .chip{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.btn{
    padding: 0 1.5rem;
    background-color: #F2F2F6;
    line-height: 3rem;
    height: 3rem;
    border-radius: 1.5rem;
    color: #007AFE;
    text-transform: initial;
    max-width: 100%;
    box-shadow: none;
}
.btn-large{
    padding: 0 1.5rem;
    line-height: 4rem;
    height: 4rem;
}
.btn-small{
    padding: 0 1rem;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 1rem;
}
.btn-flat{
    background-color: transparent;
}
.btn:hover{
    opacity: 0.8;
}
.rounded{
    width: 0;
    overflow: inherit;
}
.rounded span{
    margin-left: -0.7rem;
}

.theme{background-color: #007AFE;}
.high-emphasis {color: rgba(0,0,0, 0.87);}
.medium-emphasis {color: rgba(0,0,0, 0.6);}


.green{background-color: #B7F397 !important;color: #1B5E20;}
.green-text{color: #1B5E20 !important;}
.blue{background-color: #007AFE !important;}
.blue-text{color: #007AFE !important;}
.red{background-color: #ff385a !important;}
.red-text{color: #ff385a !important;}

.pac-container {
    background-color: #FFF;
    z-index: 99999;
    position: fixed;
    display: inline-block;
    float: left;
}
.m0, .m-0{margin: 0;}
.mb-0{margin-bottom: 0;}
.mb-05{margin-bottom: 5px;}
.ml-1{margin-left: 10px !important;}
.ml-2{margin-left: 20px;}
.mb-1{margin-bottom: 10px;}
.mb-2{margin-bottom: 20px;}
.mt-05{margin-top: 5px;}
.mt-0{margin-top: 0;}
.mt-1{margin-top: 10px;}
.mt-2{margin-top: 20px;}
.mt-3{margin-top: 30px;}
.mr-0{margin-right: 0 !important;}
.mr-1{margin-right: 10px;}

.p-05{padding: 5px;}
.pb-1{padding-bottom: 10px;}
.pb-2{padding-bottom: 20px;}
.pl-0{padding-left: 0;}
.pl-1{padding-left: 10px;}
.pl-2{padding-left: 20px;}
.pr-0{padding-right: 0;}
.pr-1{padding-right: 10px;}
.pr-2{padding-right: 20px;}
.pt-1{padding-top: 10px;}
.pt-2{padding-top: 20px;}

.p20{
    padding-left:20px;
    padding-right:20px;
}
.p0, .p-0{padding: 0 !important;}

.browser-default{
    background-color: transparent;
    border: none;
    margin: 1px 0 9px 0;
    border-bottom: 1px solid #9e9e9e;
}
a:not(.btn){
    color: rgba(0, 0, 0, 0.87);
}
.sidenav {
    max-width: 85vw;
}
/* Turn on custom 8px wide scrollbar */
::-webkit-scrollbar {
    width: 4px; /* 1px wider than Lion. */
    /* This is more usable for users trying to click it. */
    background-color: rgba(0,0,0,0);
    -webkit-border-radius: 100px;
}
/* hover effect for both scrollbar area, and scrollbar 'thumb' */
::-webkit-scrollbar:hover {
    background-color: rgba(0, 0, 0, 0.09);
}
/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
::-webkit-scrollbar-thumb:vertical {
    /* This is the EXACT color of Mac OS scrollbars.
       Yes, I pulled out digital color meter */
    background: #cccccc;
    -webkit-border-radius: 100px;
}
::-webkit-scrollbar-thumb:vertical:active {
    background: rgba(0,0,0,0.61); /* Some darker color when you click it */
    -webkit-border-radius: 100px;
}

.icon-img{
    width: 1rem;
    height: 1rem;
    content: "";
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    vertical-align: middle;
    margin: -0.2em 0.2em 0 0;
}
.icon-md {
    width: 1.33rem;
    height: 1.33rem;
}
.size-2 {
    width: 2rem;
    height: 2rem;
}
.size-2-2 {
    width: 2.2rem;
    height: 2.2rem;
}
.icon-lg {
    width: 1.8rem;
    height: 1.8rem;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: -24px;
    height: 48px;
    width: 48px;
    border-radius: 50%;
    box-shadow: 0 0 2px 0 #555;
    background: #ffffff;
}
.cover-photo{
    background-position:center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.profile-photo{
    background-position:center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.br-1rem{border-radius: 1rem;}
.br-50{border-radius: 50px;}

@media screen and (min-width: 601px){
    .mobile_element{
        display: none !important;
    }
}
@media screen and (max-width: 601px){
    .desktop_element{
        display: none;
    }
    .modal .modal-content{
        max-height: 70vh;
    }
    /*.modal:not(.bottom-sheet){
        top: 0 !important;
        bottom:  0 !important;
        height: 100% !important;
        max-height: 100% !important;
    }*/
    body{
        background-color: #FFFFFF;
    }
}
@media only screen and (min-width: 992px){
    #toast-container {
        top: auto;
        right: auto;
        bottom: 10%;
        left: 7%;
        font-size: 14.5px;
    }
}