/* ==========================
   LOCATION MODAL
========================== */

.location-modal{
    position:fixed !important;

    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100vw !important;
    height:100vh !important;

    background:rgba(0,0,0,.48) !important;

    padding:0 !important;
    margin:0 !important;

    box-sizing:border-box !important;

    z-index:2147483647 !important;

    overflow:hidden !important;
}


/* ==========================
   LOCATION BOX
========================== */

.location-box{
    position:absolute !important;

    top:50% !important;
    left:50% !important;

    transform:translate(-50%, -50%) !important;

    width:380px !important;
    max-width:calc(100vw - 40px) !important;

    max-height:90vh !important;

    margin:0 !important;

    background:#fff !important;

    border-radius:22px !important;

    padding:20px !important;

    box-sizing:border-box !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    box-shadow:0 18px 50px rgba(0,0,0,.30) !important;
}


/* ==========================
   HEADER
========================== */

.location-header{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    width:100% !important;

    margin:0 0 18px 0 !important;
}


/* ==========================
   TITLE
========================== */

.location-header h3{
    margin:0 !important;

    font-size:24px !important;
    font-weight:700 !important;

    color:#111 !important;

    text-align:left;
}


/* ==========================
   CLOSE
========================== */

.location-close{
    width:34px !important;
    height:34px !important;

    min-width:34px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin-left:auto !important;
    padding:0 !important;

    border:none !important;
    border-radius:50% !important;

    background:#eeeeee !important;
    color:#333 !important;

    font-size:24px !important;
    font-weight:500 !important;

    line-height:1 !important;

    cursor:pointer !important;
}


/* ==========================
   FORM
========================== */

.location-box .form-group{
    margin-bottom:14px !important;
}


.location-box .form-group label{
    display:block !important;

    margin-bottom:5px !important;

    font-size:15px !important;
    font-weight:600 !important;

    color:#222 !important;
}


.location-box .form-group input,
.location-box .form-group select{
    display:block !important;

    width:100% !important;
    height:46px !important;

    padding:0 15px !important;

    box-sizing:border-box !important;

    border:1px solid #d9d9d9 !important;
    border-radius:12px !important;

    background:#fff !important;

    color:#222 !important;

    font-size:15px !important;

    outline:none !important;

    margin:0 !important;
}


/* ==========================
   PLACE
========================== */

.location-box #locationplace{
    width:100% !important;
    height:46px !important;

    box-sizing:border-box !important;
}


/* ==========================
   CURRENT LOCATION
========================== */

.location-box #detectLocation{
    width:100% !important;
    height:46px !important;

    box-sizing:border-box !important;

    border-radius:12px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    cursor:pointer !important;

    border:1px solid #d7d7d7 !important;

    background:#fff !important;
    color:#222 !important;

    font-size:15px !important;
    font-weight:600 !important;
}


/* ==========================
   SAVE LOCATION
========================== */

.location-box #saveLocation{
    width:100% !important;
    height:46px !important;

    box-sizing:border-box !important;

    border-radius:12px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    cursor:pointer !important;

    border:none !important;

    background:#d40000 !important;
    color:#fff !important;

    font-size:16px !important;
    font-weight:700 !important;
}


/* ==========================
   MOBILE
========================== */

@media(max-width:768px){

    .location-modal{
        top:0 !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;

        width:100vw !important;
        height:100vh !important;

        padding:0 !important;
    }


    .location-box{
        top:50% !important;
        left:50% !important;

        transform:translate(-50%, -50%) !important;

        width:calc(100vw - 24px) !important;
        max-width:420px !important;

        max-height:92vh !important;

        border-radius:20px !important;

        padding:18px !important;
    }

}