/* ==========================================================================
   Author's custom styles
   ========================================================================== */


/* FAB Speed Dial*/

.black {
    color: black;
}

.form {
    width: 300px;
}

.bgimg-1 {
    background-image: url("../img/bg/bg.png");
    background-position: top;
    background-size: cover;
    width: 100%;
}

.bgimg-1:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("../img/bg/bg.png");
    width: 100%;
    height: 100%;
    opacity: 0.2;
    z-index: -1;
}

.btn-radius {
    height: 45px;
    border-radius: 25px;
}

.width-70 {
    width: 70px;
}

.width-100 {
    width: 100px;
}

.width-150 {
    width: 150px;
}

.height100 {
    height: 100%;
}

.height70 {
    height: 70%;
}

.width-300 {
    width: 300px;
}

md-input-container {
    margin-top: 8px;
    font-size: 15px;
}

.margin-top-100 {
    margin-top: 100px;
}

.margin-top-50 {
    margin-top: 50px;
}

.margin-top-15 {
    margin-top: 15px;
}

.margin-8 {
    margin: 8px;
}

.padding-0 {
    padding: 0px !important;
}

.padding-20 {
    padding: 20px;
}

.padding-top-50 {
    padding-top: 50px;
}

.padding-left-10 {
    padding-left: 10px;
}

.padding-right-10 {
    padding-right: 10px;
}

.padding-left-30 {
    padding-left: 30px;
}

.border-radius-15 {
    border-radius: 15px;
}

md-card {
    margin: 10px;
    box-shadow: none;
}

.btn-on-img {
    position: absolute;
    margin: 20px;
    margin-top: 15px;
}

md-icon.size-50 {
    font-size: 50px;
    height: 55px;
    width: 45px;
}

md-card-title-text > h4 {
    margin-bottom: 0px;
    font-size: inherit;
}

md-card-title-text > p {
    font-size: 13px;
    color: #888;
}

/*md-toolbar {*/
/*background-color: rgb(255, 255, 255) !important;*/
/*}*/

md-tabs-wrapper {
    background-color: #f1f4f6 !important;
}

/*.container-fluid {*/
/*background-color: #ffffff !important;*/
/*}*/

.overflow-hidden {
    overflow: hidden;
}

.nearby {
    overflow: auto !important;
    height: 100% !important;
}

.fabSpeedDial .text-capitalize {
    text-transform: capitalize;
}

.fabSpeedDial .md-fab:hover, .fabSpeedDial .md-fab.md-focused {
    background-color: #000 !important;
}

.fabSpeedDial p.note {
    font-size: 1.2rem;
}

.fabSpeedDial .lock-size {
    position: absolute;
    top: 0px;
}

md-card.fabSpeedDial {
    position: relative;
}

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.btn {
    color: white;
    border-radius: 20px;
}

.btn-fb {
    background-color: #3b5998;
}

.btn-git {
    background-color: #333;
}

.btn-fb-messenger {
    background-color: #0084ff !important;
}

.btn-phone {
    background-color: #50ca33 !important;
}

.btn-map-marker {
    background-color: #e74c3c !important;
}
.btn-ok {
    height: 45px;
    margin-right: 4px;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}

.btn-cancel {
    color: white;
    background-color: black;
    height: 45px;
    margin-left: 4px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}



/*https://freetuts.net/su-dung-media-css-tao-responsive-cho-website-660.html*/

/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
@media only screen
and (max-device-width: 320px)
and (max-device-height: 480px)
and (-webkit-min-device-pixel-ratio: 2) {

    md-card {
        height: auto !important;
    }

    .image {
        height: auto !important;
    }
}

/*!* ----------- iPhone 5 and 5S ----------- *!*/

/* Portrait and Landscape */
@media only screen
and (max-device-width: 320px)
and (max-device-height: 568px)
and (-webkit-min-device-pixel-ratio: 2) {

    md-card {
        height: auto !important;
    }

    .image {
        height: auto !important;
    }
}

/*!* ----------- iPhone 6 Plus ----------- *!*/

/* Portrait and Landscape */
/*@media only screen*/
/*and (min-device-width: 414px)*/
/*and (max-device-width: 736px)*/
/*and (-webkit-min-device-pixel-ratio: 3) {*/
/*.main {*/
/*height: 612px;*/
/*}*/
/*}*/

/* ----------- iPhone 6 ----------- */



md-content.main {
    min-height: 475px;
    overflow: hidden;
    background-color: transparent;
}

md-tab-content.ng-scope.md-no-scroll {
    height: 800px;
}

md-content.tab-body {
    overflow: scroll;
}

.image {
    width: 100%;
    height: auto;
}

footer {
    /*position: absolute;*/
    bottom: 0;
    width: 100%;
    height: 55px;
}

/* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
#map {
    height: 100%;
}







/**
sidenav
 */


.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: white;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 18px;
    color: black;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}