﻿h1, h2, h3, h4, h5, h6{color:#000000;line-height:1.4em; margin: 0 0 15px;}
h1{font-size:36px;}
h2{font-size:1.6em;}
h3{font-size:1.4em;}
h4{font-size:1.2em;}
h5{font-size:1.1em;}
h6{font-size:1em;}.required{color:red;}.bouquetImg {padding-top: 20px;}
#dropZoneHeaderFooter{background: none repeat scroll 0 0 #f7f7f7; border-radius: 8px 8px 8px 8px; box-shadow: 0 1px 2px rgba(0,0,0,.4); float: left; margin-left: 15px; margin-right: 15px; text-align: center; width: 95%}
.contentdiv{border-radius: 10px 10px 10px 10px; box-shadow: 0 1px 3px rgba(0,0,0,.4);margin: 0 0 30px; padding: 1px;}.dropZone{background-color: #fff; left: 0; overflow-y: auto; position: relative; top: 0}#dropPanel{width: 95%; padding: 2% 3%; height: 20%; min-height: 350px}#dropPanel{background: none repeat scroll 0 0 #fff; border-radius: 8px 8px 8px 8px; box-shadow: 0 1px 2px rgba(0,0,0,.4); float: left; height: 400px; margin: 15px;}.loadDiv{display: none}

#CreditCard_btn{border-style:none;border-color:inherit;border-width:medium;background:url('images/confirm order.png') no-repeat left top;height:31px;width:145px;}
.viewItemStyle {
    float: left;
    font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
    font-size: 12px;
    margin: 1px;
    padding: 1px; 
    height: 270px; width:250px;
    z-index: 1;
}
.viewItemStyle img{background-color:rgba(0, 0, 0, 0);height:auto;position:relative;width:100%;}
.viewItemStyleVases {
    float: left;
    font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
    font-size: 12px;
    margin: 1px;
    padding: 1px;
    height: 270px;
    width: 250px;
    z-index: 100;
    opacity: 0.7;
}
.viewItemStyleVases img{background-color:rgba(0, 0, 0, 0);height:auto;position:relative;width:100%;z-index:1;}
#divProgressBar1{background-color: #000; bottom: 0; left: 0; margin: 0; opacity: .5; overflow: hidden; padding: 0; position: fixed; right: 0; top: 0; z-index: 1000}#divMessage1{background-color: #fff; border: 1px solid #000; left: 43%; padding: 10px; position: fixed; top: 30%; vertical-align: middle; width: 14%; z-index: 1001}
@media screen and (max-width:1100px){
    #dropZoneHeaderFooter{width: 91%;/*width: 94%;*/padding: 1% 1%; height: 43px}#dropPanel{width: 90%; padding: 2% 3%; height: 20%; min-height: 350px;}
    .viewItemStyle {
        max-width: 100% ;
        width: 49%;
        height: 250px;
    }
    .viewItemStyleVases {
        max-width: 100%;
        width: 49%;
        height: 250px;
    }
.viewItemStyle img{width:100%;}
.viewItemStyleVases img{width:100%;}
element.style{left:100%;top:100%;}

}
@media screen and (max-width: 1050px) {
    #dropPanel {
        min-height: 285px;
    }
    .viewItemStyle {
        max-width: 100%;
        width: 45%;
        height: 198px;
    }

    .viewItemStyleVases {
        max-width: 100%;
        width: 45%;
        height: 198px;
    }

    .viewItemStyle img {
        width: 100%;
    }

    .viewItemStyleVases img {
        width: 100%;
    }
}

@media screen and (max-width:885px) {
    #dropPanel {
        min-height: 245px;
    }
.viewItemStyle{width:142px;height:198px;}
.viewItemStyleVases{width:142px;height:198px;}
.viewItemStyle img{width:100%;}
.viewItemStyleVases img{width:100%;}
}
@media screen and (max-width:725px) {
    #dropPanel {
        min-height: 245px;
    }
    .viewItemStyle{width:132px;height:184px;}
.viewItemStyleVases{width:132px;height:184px;}
.viewItemStyle img{width:100%;}
.viewItemStyleVases img{width:100%;}
}
@media screen and (min-width:576px) and (max-width:675px) {
    #dropPanel {
        min-height: 225px;
    }

    .viewItemStyle {
        width: 100px;
        height: 184px;
        padding-top: 30px;
    }

    .viewItemStyleVases {
        width: 100px;
        height: 184px;
        padding-top: 30px;
    }

    .viewItemStyle img {
        width: 100%;
    }

    .viewItemStyleVases img {
        width: 100%;
    }
}
@media screen and (max-width:530px) {
   #dropPanel{min-height: 245px;/* margin: 3px 0*/}
    .viewItemStyle{width:140px;height:151px;}
.viewItemStyleVases{width:140px;height:151px;}
.viewItemStyle img{width:100%;}
.viewItemStyleVases img{width:100%;}
}

@media screen and (max-width:420px) {
    #dropPanel {
        min-height: 223px; /* margin: 3px 0*/
    }

    .viewItemStyle {
        width: 110px;
        height: 154px;
    }

    .viewItemStyleVases {
        width: 110px;
        height: 154px;
    }

    .viewItemStyle img {
        width: 100%;
    }

    .viewItemStyleVases img {
        width: 100%;
    }
}
@media screen and (max-width:360px) {
    #dropPanel {
        min-height: 223px; /* margin: 3px 0*/
    }

    .viewItemStyle {
        width: 100px;
        height: 154px;
    }

    .viewItemStyleVases {
        width: 100px;
        height: 154px;
    }

    .viewItemStyle img {
        width: 100%;
    }

    .viewItemStyleVases img {
        width: 100%;
    }
    .date-time-main .order__dates .order__dates-col {
        width: calc(100% - 18px);
        margin: 0 5px;
        display: inline-block;
    }
    /*.date-time-main .order__dates .order__dates-col .order__dates-item {
        height: 74px;
    }*/
}
@media screen and (max-width:320px) {
    #dropPanel {
        min-height: 223px; /* margin: 3px 0*/
    }

    .viewItemStyle {
        width: 90px;
        height: 154px;
    }

    .viewItemStyleVases {
        width: 90px;
        height: 154px;
    }

    .viewItemStyle img {
        width: 100%;
    }

    .viewItemStyleVases img {
        width: 100%;
    }
    .date-time-main .order__dates .order__dates-col {
        width: calc(100% - 18px);
        margin: 0 5px;
        display: inline-block;
    }
    .ui-datepicker table {
        width: 100%;
        font-size: .3em;
        border-collapse: collapse;
        margin: 0 0 .4em;
    }
       /* .date-time-main .order__dates .order__dates-col .order__dates-item {
            
            height: 74px;
        }*/
}
@media screen and (min-width:576px) and (max-width:599px) {
    .date-time-main .order__dates .order__dates-col {
        width: calc(100% - 18px);
        margin: 0 5px;
        display: inline-block;
    }
    .ui-datepicker table {
        width: 100%;
        font-size: .3em;
        border-collapse: collapse;
        margin: 0 0 .4em;
    }
}
