/* ##### MOBILE STYLING FOR ONLINE RESERVATIONS ##### */
body.gomobile > div#wrap{position:fixed;overflow:scroll;}

@media only screen and (max-width: 480px) {

}
@media only screen and (min-width: 240px) and (max-width: 600px) {
    body div#modal{box-shadow:none;}
    body div#modal > div.content{overflow-y:scroll;}

    div.mobileBP{display:block;}

    body div#modal > div.content .hl1,
    body div#modal > div.content .hl2,
    body div#modal > div.content .hl3,
    body div#modal > div.content .hl4,
    body div#modal > div.content .sh1,
    body div#modal > div.content .sh2,
    body div#modal > div.content .sh3,
    body div#modal > div.content .sh4{margin:1% 0 2% 0;line-height:90%;}

    body div#modal > div.content .hl1,
    body div#modal > div.content .sh1{letter-spacing:-2px;}
    body div#modal > div.content .hl2,
    body div#modal > div.content .sh2{letter-spacing:-1px;}

    body div#modal > div.content{width:94vw;margin:3vw;padding:0 3vw;position:fixed;top:0;right:0;bottom:0;left:0;box-sizing:border-box;}

    body div#modal > div.content p{margin:8px 0 12px 0;font-size:120%;line-height:120%;}
    body div#modal > div.content select{padding:1% 2%;border-radius:20px;font-size:100%;line-height:100%;}

    body div#modal > div.content div.table.found_trips{width:100%;}
    body div#modal > div.content div.table > div.row{font-size:90%;}
    body div#modal > div.content div.table.checkout > div.row{overflow:hidden;}
    body div#modal > div.content div.table.checkout > div.row > div{margin-bottom:-99999px;padding:.25% .5% 99999px .5% !important;position:relative;}

    body div#modal > div.content div.blocks.trip_totals div.table.checkout > div.row.gearrental > div:nth-child(1),
    body div#modal > div.content div.blocks.trip_totals div.table.checkout > div.row.totals > div:nth-child(1){width:75%;}

    body div#modal > div.content div.blocks.whosgoing{}
    body div#modal > div.content div.blocks.whosgoing span{width:100%;margin:0 0 2% 0;float:left;}
    body div#modal > div.content div.blocks.whosgoing span > label{width:20%;display:inline-block;}
    body div#modal > div.content div.table.found_trips > div.row > div span.icon.dos{margin:2px 3px 0 -10px;float:left;}

    body div#modal > div.content div.blocks.dates_of_trip{}
    body div#modal > div.content div.blocks.dates_of_trip p{margin:0 0 5px 0;}
    body div#modal > div.content div.blocks.dates_of_trip p > label{width:20%;margin:0 10px 0 0;float:left;text-align:right;}

    body div#modal > div.content div.blocks.table{}
    body div#modal > div.content div.blocks.table > div.row{}
    body div#modal > div.content div.blocks.table > div.row > div{width:100%;}
    body div#modal > div.content div.blocks.table > div.row > div > p > label{width:22%;float:left;text-align:right;}

    body div#modal > div.content input.med, body div#modal > div.content select.med{width:40%;}

    body div#modal > div.content div.blocks.trip_totals div.table.checkout > div.row > div{width:15%;}
    body div#modal > div.content div.blocks.trip_totals div.table.checkout > div.row > div:nth-child(2){width:10%;}
    body div#modal > div.content div.blocks.trip_totals div.table.checkout > div.row.totals > div:nth-child(2){width:20%}
    body div#modal > div.content div.blocks.trip_totals div.table.checkout > div.row > div:nth-child(3){width:40%;}

    body div#modal > div.content div.table.stripeinfo div.StripeElement{width:100%;}

    /* MOVE CRISP CHAT LINK OUT OF WAY */
    body div.crisp-client div#crisp-chatbox{}
    body div.crisp-client div#crisp-chatbox > div > div{right:auto !important;left:45% !important;bottom:6px !important;}


    body div#modal ul.blocks,
    body div#modal ul.blocks > li,
    body div#modal ul.blocks.gridB,
    body div#modal ul.blocks.gridB > li,
    body div#modal ul.blocks.gridC,
    body div#modal ul.blocks.gridC > li,
    body div#modal ul.blocks.gridD,
    body div#modal ul.blocks.gridD > li{width:100%;clear:both;}

    /* UPGRADES */
    body div#modal > div.content div.blocks.upgrades{}
    body div#modal > div.content div.blocks.upgrades ul.upgrades{}
    body div#modal > div.content div.blocks.upgrades ul.upgrades >li{width:100%;}

    /* INNER MODAL */
    body div#modal > div.content div.innermodal{width:100%;position:fixed;top:5px;right:5px;bottom:5px;left:5px;z-index:600;overflow-y:scroll;}
    body div#modal > div.content div.innermodal div.innercontent{width:90%;min-height:100%;margin:0;top:0;right:0;bottom:0;left:3px;position:relative;}
    body div#modal > div.content div.innermodal div.close{min-width:20px;padding:1%;text-align:center;font-size:160%;border:2px solid #333;border-radius:20px;position:fixed;top:5px;right:5px;left:auto;background:#FFF;z-index:100;box-shadow:3px 3px 10px rgba(0,0,0,.4);cursor:pointer;}

    body div#modal > div.content ul.blocks.howmany{width:100%;}
    body div#modal > div.content ul.blocks.howmany > li{width:50%;clear:none;}
    body div#modal > div.content ul.blocks.howmany > li:nth-child(1){width:43%;}
    body div#modal > div.content ul.blocks.howmany > li:nth-child(2){width:57%;}
    body div#modal > div.content ul.blocks.howmany > li .title{font-size:120%;line-height:130%;}
    body div#modal > div.content ul.blocks.howmany > li p{}
    body div#modal > div.content ul.blocks.howmany > li p > label{width:50px;}
    body div#modal > div.content ul.blocks.howmany > li p > label select{width:90%;margin:1% 2%;padding:0 10%;}

    body div#modal > div.content div.dates_of_trip{}
    body div#modal > div.content div.dates_of_trip ul.blocks{margin:2% 0;}
    body div#modal > div.content div.dates_of_trip ul.blocks > li{}
    body div#modal > div.content div.dates_of_trip ul.blocks > li p{}
    body div#modal > div.content div.dates_of_trip ul.blocks > li p label{width:30%;margin:0 1% 0 0;line-height:150%;}
    body div#modal > div.content div.dates_of_trip ul.blocks > li input.datepicker{width:50%;}
    body div#modal > div.content div.dates_of_trip input[type=submit]{float:right;}

    body div#modal > div.content div.blocks.table.customerinfo{}
    body div#modal > div.content div.blocks.table.customerinfo > div.row > div p > label{width:90%;text-align:left;}
    body div#modal > div.content div.blocks.table.customerinfo > div.row > div input.text.med{width:50%;}

    body div#modal > div.content .button{padding:0 4%;font-size:120%;line-height:140%;}

    body div#modal > div.content ul.divers_snorkelers{}
    body div#modal > div.content ul.divers_snorkelers > li{margin:0;padding:0;}
    body div#modal > div.content ul.divers_snorkelers > li div.table.diverdetails{}
    body div#modal > div.content ul.divers_snorkelers > li div.table.diverdetails > div.row{}
    body div#modal > div.content ul.divers_snorkelers > li div.table.diverdetails > div.row > div{width:100%}
    body div#modal > div.content ul.divers_snorkelers > li div.table.diverdetails > div.row > div:nth-child(3),
    body div#modal > div.content ul.divers_snorkelers > li div.table.diverdetails > div.row > div:nth-child(4),
    body div#modal > div.content ul.divers_snorkelers > li div.table.diverdetails > div.row > div:nth-child(5),
    body div#modal > div.content ul.divers_snorkelers > li div.table.diverdetails > div.row > div:nth-child(6){width:50%;}
    body div#modal > div.content ul.divers_snorkelers > li div.table.diverdetails > div.row > div p > label{font-size:80%;line-height:100%;}

    body div#modal > div.content ul.divers_snorkelers > li div.table.customer > div.row > ul.gearrentals{}
    body div#modal > div.content ul.divers_snorkelers > li div.table.customer > div.row > ul.gearrentals > li{clear:none;}

    body div#modal > div.content div.blocks.upgradesInfo ul.blocks.upgradeblock > li p label{width:35px;}
}