/* Page Layout */

body {
    display: flex;
    flex-flow: column;
    height: 100%;
}

.main-container {
    display: flex;
    flex-flow: row;
    height: 100%;
    overflow: scroll;
    margin-left: 24px;
    margin-right: 24px;
}

.map-wrapper{
    margin-top: 16px;
    margin-bottom: 16px;
    display: flex;
    flex-grow: 1;
    justify-content: center;
    flex-direction: row;
}

.map-style {
    height: 100%;
    width: 100%;
}

.rhs {
    margin-left: 24px;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 40%;
}

.background-container {
    background: var(--color-background-section);
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 24px;
    padding-bottom: 24px;
}

/* Page Layout Mobile */

@media screen and (max-width: 576px) {
    body {
        height: 50vh;
        min-height: -webkit-fill-available;
        min-height: -moz-available;
    }

    .main-container {
        flex-flow: column;
    }

    .map-style {
        flex-grow: 0;
        height: 297px
    }

    .rhs{
        margin-left: 0px;
    }

    .enter-location-layout{
        margin-top: 0px !important;
    }
}

/* Map */

#map-canvas-div {
    height: 100%;
    width: 100%;
}

/* Enter Location */

.enter-location-layout{
    margin-top: 16px;
}

/* Input */

#pac-container input, #pac-container textarea {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 0px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    color: #525252;
    font-size: 13px;
    caret-color: black;
}

#pac-container input:focus, #pac-container textarea:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid #216F7B;
    outline-width: 0;
}

/* Use Location Button */

.location-button-layout{
    display: flex;
    flex-flow: row;
    height: 44px;
    padding: 9px 0px;
    align-items: center;
    cursor: pointer;
}

.location-icon {
    content: url(../img/icons/location.png)
}

.location-icon-style {
    width: 23px;
    height: 23px;
}

.location-button{
    padding-left: 10px;
    color: var(--color-teal-700);
}

/* Share Location Button */

.share-location-layout{
    margin-top: 24px;
    display: flex;
    flex-flow: row;
    height: 42px;
    padding-top: 9px;
    padding-bottom: 9px;
    justify-content: center;
    cursor: pointer;
}

.share-location-button-outline{
    height: 42px;
}

.share-location-icon {
    content: url(../img/icons/share-light.png)
}

.share-location-icon-style {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    align-self: center;
}

/* Share Location Info */

.share-location-info-layout{
    margin-top: 16px;
    height: 32px;
    display: flex;
    flex-flow: row;
    justify-content: start;
}

.info-icon{
    content: url('../img/icons/info-solid-grey-fill.png')
}

.info-icon-style{
    width: 20px;
    height: 20px;
    margin-right: 14px;
}

.info-share-text-style{
    color: var(--color-icon-text-secondary) !important;
}

/* Travel History */

.travel-history-layout-wrapper{
    padding-top: 24px;
    padding-bottom: 16px;
}

.travel-histroy-layout{
    height: 100%;
    min-height: 300px;
}

.travel-history-list-style{
    overflow: auto;
    padding: 0px;
    margin-bottom: 0px;
}

.travel-history-heading-layout{
    margin-bottom: 20px;
}

.loader {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-icon-text-secondary);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    display: none;
}

.loader-layout{
    margin-left: 8px;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}