/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/
/*----  General styles ---*/
@import url('https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,600,700,800,900&display=swap');

/* General styling */
html, body{
    margin: 0;
    padding: 0;  
    max-width: 100%;
    overflow-x: hidden;
    height: 100%;
}

body{
    font-family: 'Roboto', sans-serif;  
    background-image: url("../img/hero_img_lg1.jpg");    
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

.invisible{
    display: none;
}

#main{
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    min-height: 90%;
    position: relative;
}

#index-main, 
#signin-main, 
#messaging{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#signup-main{
        position: absolute;
        top: 55%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    } 

/* to fix oversized text and images in select for avatar and thumbnail */
#signup-select li img, 
#skiresort-select li img{
    height: 30px;
    width: 30px;
}

/* to fix oversized text and images in select for avatar and thumbnail */
#signup-select li span, 
#skiresort-select li span{
    font-size: 12px;
}

/* Index page intro text with icons */
.fa, .fas{
    font-size: 24px;
}

.fa-mandalorian{
    font-size: 28px;
}

.intro-title,
#messaging-title{
    font-size: 27px;
}

#index-list li{
    line-height:250%
}
/* Finish - Index page intro text with icons*/

.index-link{
    color: white;
}

/* Navbar */
#navbar{
    background-color: #A4352C;
}

#navbar-logo{
    margin-left: 10px;
}

#buttons-container{
    position: absolute;
    width: 80%;
    bottom: 5%;
    -ms-flex-line-pack: center;
    align-content: center;
}

#signup-form{
    font-size: 15px;
    background-color: #E6F4F1;
}

.material-icons{
    color: #336C8F;
}

#menu-burger{
    color: white;
}

.btn-small{
    background-color: #336C8F;
    font-size: 12px;
    margin: 3px 2px 3px 0;
}
/* End - Navbar */

/* Buttons */
.bnts{
    margin-right: 1px;
}

.btn-small .waves-effect{
    color: #6B9FC5;
    background-color: #6B9FC5;
}

.search-btn{
    margin-top: 0.15em;
    margin-bottom: 0.15em; 
    margin-right: 0.15em; 
}

.card-image{
    width: 45px;
    height: 45px;
}

.location-card{
    width: 300px;
    height: auto;
}

#card-div{
    margin: auto;
    float: left;
}

/* Flashed messages */ 
.message-board{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; 
    background-color: #6B9FC5;   
    margin-top: 0.2em;
    border: 0.5px solid #fafafa;
}

.message-board p{
    margin: 0;
    max-width: 100%;
    font-size: 1.2em;
    font-weight: 400;
    color: white;
}/* End - Flashed messages */ 

.center{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#intro-cont{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#intro{
    margin: auto;
}

#intro-title{
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}

#trip-search-title{
    padding-top: 10px;
    margin-top: 3px;
    margin-bottom: 0px;
}

/* Search panel */
#search-trips-panel{
    margin-bottom: 2px;
}

.search-btn-box{
    padding-left: 0px;
    margin-right: 10px;
    padding-right: 0px;
}

#search-skiresorts-panel{
    padding-bottom: 0px;
    padding-top: 5px;
    margin: 3px 0 5px 0;
    padding-right: 0px;
    padding-left: 0px;
}

/* Ski resorts cards */
.td{
    padding: 0px;
}

.ski-resort-card{
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 0;
    margin-bottom: 0;
}

#new-trip-card .card-content,
/* to fix oversized text and images in select for avatar and thumbnail */
#new-skiresort-card .card-content,
#signup-card .card-content{
    padding: 15px;
}

.ski-resort-content{
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 0px;
    padding-right: 14px;
    padding-left: 14px;
}

.skiresort-title {
    font-size: 1.2em;
    font-weight: 600;
    color: #0056B2;
    text-transform: uppercase;
}

.skiresort-description{
    color: #0056B2;
    font-size: 0.9em;
    font-weight: 500;
    text-align: justify;
    text-justify: inter-word;
}

.skiresort-info{
    font-weight: 400;
    text-align: justify;
    text-justify: inter-word;
}

.thumbnail-div{
    padding: 0;
}

.avatar-thumbnail{
    margin-bottom: 0px;
}

.thumbnail{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.ski-snowboard-title{
    font-size: 1.3em;
    font-weight: 600;
    text-transform: uppercase;
    color: #0056B2;
}
/* End - Ski resorts cards */

/* Trips  */
.trip-card{
    border: #0056B2 solid 1.5px;
}
.trip-cell{
    padding: 5px 0 0 0;
}

.trip-main,
.buttons-row{
    margin-right: 0;
    margin-bottom: 5px;
}

.trip-p{
    margin-top: 2.5px;
    margin-bottom: 0;
}

/* Style horizontal lines in a trip */
.hr-1{
    height:0.05px;
    width:90%;
}

.hr-2{
    height:0.03px;
    width:70%;
}

.hr-3{
    height:0.03px;
    width:80%;
}

.hr{
    color:#808080;
	background:#808080;
}

.buttons-box{
    padding-left: 0px;
    padding-right: 25px;
}

.avatar-div{
    padding: 0;
}

.avatar-title,
.trip-skiresort-title{
    font-size: 1.4em;
}

.trip-skiresort-title{
    color: #A4352C;
}

.avatar,
.trip-thumbnail{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
}

/* Color or the intro card */
.blue.darken-2{
    background-color: #336C8F !important;
}

.blue.lighten-5{
    background-color: #A0ACBD !important;
}

/* Float bubble to open a user's profile and all ski resorts */
a[data-tool-tip] {
    position: relative;
}

a[data-tool-tip]::after {
    content: attr(data-tool-tip);
    display: block;
    position: absolute;
    background-color: #A4352C; 
    padding: 0.8em;
    color: white;
    border-radius: 10px;
    font-size: 0.8em;
    bottom: 0;
    
    white-space: nowrap;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition:
     bottom ease-out 150ms,
     webkit-transform ease-out 150ms;
    transition:
     bottom ease-out 150ms,
     -webkit-transform ease-out 150ms;
    -o-transition:
     transform ease-out 150ms,
     bottom ease-out 150ms;
}

a[data-tool-tip]:hover::after {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    bottom: 100%;
}
/* End - Float bubble to open a user's profile */

/*  Modal for users' profiles */
.user-profile{
    left: 0;
    right: 0;
    background-color: #fafafa;
    padding: 0;
    max-height: 60%;
    max-width: 96%;
    will-change: top, opacity;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

.user-profile h5{
    color:  #A4352C;
}

.user-profile p{
    color:  #336C8F;
}
/* End - Modal for users' profiles */
/* End - Trips  */

/* Footer */
#footer-img{
    width: 5em;
    height: 5em;
}

#footer-modal{
    width: 200px;
    height: 200px;
    bottom: 0;
}

#footer-content{
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

#footer-panel{
    margin-top: 0px;
    margin-bottom: 0px;
    padding-right: 15px;
    padding-top: 15px;
    padding-left: 15px;
    padding-bottom: 15px;
}

#footer-title{
    color:#336C8F;
    font-size: 1.1em;
    font-weight: bold;
    margin-top: 0.15em;
}

#footer-text{
    font-size: 0.7em;
    color: #336C8F;
    margin-bottom: 0.1em;
}

.footer-btn{
    font-size: 1.4em;
}

#footer-btn-mobile{
    font-size: 1em;
}
/* End - Footer */

/* self-close button for contact_me.html  */
#message-close{
    font-size: 0.9em;
}
.close-button {    
    border-radius: 50%;
}
.close-button .material-icons{    
    color: #A4352C;
}



@media screen and (max-width: 2000px){
    #main{
        max-width: 40%;
    }
    #messaging{
        width: 50%;
    }
}

@media screen and (max-width: 1600px){
    #main{
        max-width: 55%;
    }
    #messaging{
        width: 55%;
    }
}

@media screen and (max-width: 1024px){
    #main{
        max-width: 65%;
    }
    #messaging{
        width: 60%;
    }
    #mobile-demo {
        height: 300px;
        width: 160px;
        padding-bottom: 0;
    }  
}

@media screen and (max-width: 992px){
    /* minimize mobile sidenav menu  */
    #mobile-demo{
        height: 300px;
        width: 160px;
        padding-bottom: 0;
    }  
    #main{
        max-width: 70%;
    }
    #messaging{
        width: 60%;
    }
}

@media screen and (max-width: 786px){
    /* minimize mobile sidenav menu  */
    #mobile-demo {
        height: 295px;
        width: 180px;
        padding-bottom: 0;
    }  
    /*  Logo size smaller */
    #navbar-logo{
        font-size: 2.5em;
    }   
    #main{
        max-width: 90%;
    }
    #messaging{
        width: 70%;
    }
    #messaging-title{
        font-size: 23px;
    }
    
}

/* Hide horizontal line under Avatar and Ski resort in trips on bigger screens */
@media screen and (min-width: 600px){
    .invisible-hr{
        display: none;
    }
}

@media screen and (max-width: 640px){
    #main{
        max-width: 93%;
    }
    #messaging{
        width: 80%;
    }
    #messaging-title{
        font-size: 20px;
    }
}

@media screen and (max-width: 576px){
    /* minimize mobile sidenav menu  */
    #mobile-demo{
        height: 290px;
        width: 180px;
        padding-bottom: 0;
    }  
    /*  Logo size smaller */
    #navbar-logo{
        font-size: 1.8em;
    }   
    #main{
        max-width: 95%;
    }
    #messaging{
        width: 85%;
    }
    #messaging-title{
        font-size: 18px;
    }
}

@media screen and (max-width: 375px){
    /*small phones*/
    /*  Logo size smaller */
    #navbar-logo{
        font-size: 1.5em;
    }   
    /* minimize mobile sidenav menu */
    #mobile-demo{
        height: 300px;
        width: 180px;
        padding-bottom: 0;
    }  
    #main{
        max-width: 98%;
    }
    #messaging{
        width: 95%;
    }
    #messaging-title{
        font-size: 16px;
    }
    #search-btn-box{
        padding-left: 3px;
        margin-right: 25px;
        padding-right: 0px;
    }
    /* to allow better placement of signup form on mobile screens */
    #signup-main{
        position: absolute;
        top: 60%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }   
}

@media screen and (max-width: 325px){
/* to allow better placement of signup form on mobile screens */
    #signup-main{
        position: absolute;
        top: 70%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    } 
}

@media screen and (max-width: 285px){
    /*very small phones*/
    /*  Logo size smaller */
    #navbar-logo{
        font-size: 1.3em;
        margin-left: 0px;
    }   
    .menu-item{
        margin-left: 2px;
        margin-right: 2px;
        padding-left: 2px;
        padding-right: 5px;
    }
    #search-btn-box{
        padding-left: 3px;
        margin-right: 20px;
        padding-right: 0px;
    }
    #search-fields .input-field{
        padding-right: 3px;
        margin-right: 0px;
        padding-left: 0px;
        margin-left: 0px;
        margin-bottom: 0px;
        padding-bottom:0px;
    }
    #search-btn{
        font-size: 8px;
    }
    #messaging{
        width: 95%;
    }
    #messaging-title,
    #page-not-found-title{
        font-size: 15px;
    }
    /* to allow better placement of signup form on mobile screens */
    #signup-main{
        position: absolute;
        top: 70%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }   
    /* to make datepciker modal smaller for the smallest devices */
    .datepicker-modal{
        -webkit-transform: scaleX(0.8) scaleY(0.8) !important;
        -ms-transform: scaleX(0.8) scaleY(0.8) !important;
        transform: scaleX(0.8) scaleY(0.8) !important;
    }
}