/******************************************************************************************
 *  Universal Form Element 
 *****************************************************************************************/
#form select, #form input, #form textarea,
#form .design_textfield, #form div.design_content .design_textfield {
    width: 100%;
    margin: 0 !important;
    font-size: 100%;
    min-width: 100px;
}

#form .form-group {
    margin: 0;
    margin-bottom: 15px;
}

    #form #dvSameAsCustomer .col-md-6, #form .form-group > div {
        margin-bottom: 10px;
    }

#form input[type=checkbox], #form input[type=radio] {
    width: 20px !important;
    min-width: 20px !important;
    height: initial;
    display: inline;
}

#form select option {
    height: 40px;
}

#form .btn.btn-primary {
    padding: 6px 12px;
    font-size: 150%;
    text-align: center;
}

#form-wrap {
    padding: 0 5% 0;
}

#grand_total {
    padding: 6px 12px;
}

a.back-link {
    float: right;
}
/*required field*/
.form-group .control-label.req:after {
    content: "*";
    color: red;
}

.req div {
    position: relative;
}

    .req div:before {
        position: absolute;
        content: '*';
        color: red;
        left: -10px;
        top: 0;
    }

/*Select*/
.custom-select {
    display: inline-block;
    max-width: 100%;
    padding: .375rem 1.75rem .375rem .75rem;
    padding-right: .75rem\9;
    color: #55595c;
    vertical-align: middle;
    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' �0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;
    background-image: none\9;
    -webkit-background-size: 8px 10px;
    background-size: 8px 10px;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
    -moz-appearance: none;
    -webkit-appearance: none;
}

select[size] {
    height: 34px;
}

legend a {
    display: none;
}

#form-title-row {
    margin-top: 2%;
}

/*Checkboxes*/
.design_list_horizontal label, label.light {
    font-weight: 100;
}
ol.design_list_vertical {
    border:none !important;
}

fieldset.form-group.row {
    padding: 0 0 20px !important;
}

#form-wrap {
    width: 98%;
}
/*MetroWorks Specific*/
td.wrapping-table-text {
    width: 30%;
    text-align: left !important;
}

td.pass-col {
    width: 20%;
}

td.qtyCol {
    width: 10%;
}

div#terms {
    font-size: 90% !important;
}

    div#terms li {
        margin-bottom: 10px;
    }
    /*Modal*/
    div#terms .modal-body {
        padding: 20px;
    }

    div#terms h4.modal-title {
        font-size: 190%;
        padding: 20px 0 0 0;
    }

    div#terms button.close {
        margin-top: 0px;
        padding: 0;
        cursor: pointer;
        background: #000;
        color: #fff;
        font-size: 40px;
        font-weight: 100;
        display: block;
        height: 40px;
        width: 40px;
        border-radius: 50%;
        position: relative;
        right: -40px !important;
        top: -40px !important;
        z-index: 9;
        filter: alpha(opacity=100);
        opacity: 1;
    }
/*Mobile Check boxes*/
@media (max-width: 768px) {
    ol.design_list_horizontal.weekday-list {
        list-style-type: none;
    }

        ol.design_list_horizontal.weekday-list li {
            display: block;
            width: 25%;
            /* text-align: left; */
            float: left;
        }

    #form ol.design_list_horizontal.weekday-list li input[type=checkbox] {
        width: auto;
        min-width: 10px;
        display: inline-block;
    }

    #form-wrap legend.col-form-legend.col-md-12 {
        border-radius: 10px 10px 0 0;
    }

    #form-wrap fieldset {
        border: none;
    }
}

/* This will make date picker icons sit nicely inside a bootstrap-style box if it's inside a container div with class form-control. That wrapper is all that needs to be added to the html when adding a datepicker to a form. */
/* example: <div class="form-control"><ektdesignns_calendar [attributes]><input /><img /></ektdesignns_calendar></div> */

#metroworks .form-control img:first-of-type {
    margin-right: 20px;
}

#metroworks .form-control img {
    float: right;
    margin-right: -40px;
}