﻿/*******************************************/
/* BUSINESS_EXTENDED_DETAIL_1.CSS 為 BUSINESS_EXTENDED_DETAIL_1.html <main> 內用 CSS */
/*******************************************/

/* ________________________________________________________________________________ */
/* XS 超小屏幕（手机，大於 0px） 及共用 ___________________________________________ */
/* ________________________________________________________________________________ */
@media (min-width: 0px) {


    /* TABLE .START. */
    th {
        text-align:center;        
    }
    .table-bordered > tbody > tr > th {
      border-top:1px solid #fff;
      border-right:1px solid #fff;
      border-left:none;
      border-bottom:none;
      vertical-align:middle;
    }
    .table-bordered > tbody > tr > td {
      border-top:1px solid #fff;
      border-right:1px solid #fff;
      border-left:none;
      border-bottom:none;
      vertical-align:middle;
    }
    .table-curved {
        border-collapse: separate;
    }
    .table-curved {
        border:solid #fff 0;
        border-radius: 0;
        border-left:0;
    }
    .table-curved td, .table-curved th {
        border-left: 1px solid #fff;
        border-top: 1px solid #fff;
    }
    .table-curved th {
        border-top: none;
    }
    .table-curved th:first-child {
        border-radius: 0;
        padding-left:20px;
    }
    .table-curved td:first-child {
        padding-left:15px;
    }
    .table-curved td:last-child {
        padding-right:15px;
    }
    .table-curved th:last-child {
        border-radius: 0;
    }
    .table-curved th:only-child{
        border-radius: 20px 20px 0 0;
    }
    .table-curved tr:last-child td:first-child {
        border-radius: 0 0 0 0;
    }
    .table-curved tr:last-child td:last-child {
        border-radius: 0 0 0 0;
    }
    .tl {
        text-align:left;
    }
    .tr {
        text-align:right;
    }
    .tc {
        text-align:center;
    }
    .table-curved .clear-td-border {
        border-right: 0px;
    }

    .delete {
        padding:5px 9px 5px 9px;
        margin-right:8px;
        border-radius:10px;
    }


    /* TABLE .END. */

    .shoplist .btn {
        width:100%;
        margin:2px 0;
        vertical-align:middle;
        border-radius:10px;        
    }
    .icon_parduct {
        margin-left:10px;
    }
    hr {
        border-color:white;
    }
    h3 {
        margin-top:0;
        margin-bottom:10px;
    }

    .close span {
        font-size:30px;
        padding:0;
        margin:0;
    }

    /* shopping-setp */
    .shopping-setp {
        height: 29px;
        border-radius: 8px;
        text-align: center;
    }
        .shopping-setp > div {
            margin-bottom: 15px;
            height: 29px;
            line-height: 29px;
        }
        .shopping-setp > div:first-child {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        .shopping-setp > div:last-child {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
        .shopping-setp .active {
            position: relative;
            color: #FFF;
            background-color: #beaf9c;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
        .shopping-setp .active:after { 
            content: "";
            position: absolute;
            top: 4px; 
            width: 21px; 
            height: 21px;
            background: inherit; 
            border: inherit; 
            border-left-color: transparent;
            border-bottom-color: transparent; 
            border-radius: 0px 8px 0px 0px; 
            -webkit-border-radius: 0px 8px 0px 0px;
            -moz-border-radius: 0px 8px 0px 0px;
        }
        .shopping-setp .active:before,
        .shopping-setp .active:after {
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
        }
        .shopping-setp .active:before {
            left: -11px;
            background-color: white;
        }
        .shopping-setp .active:after {
            right: -11px;
            z-index: 1;
        }


    .rule {
        height: 200px;
        padding: 10px 30px;
        overflow-y: scroll;
        border: 1px solid #ccc;
    }


    /*__ form input telphone & fax____________________*/
    .form-group .form-inline input.t1 {
        display:inline-block;
        width:20%;
    }
    .form-group .form-inline input.t2 {
        display:inline-block;
        width:29.5%;
    }
    .form-group .form-inline input.t3 {
        display:inline-block;
        width:29.5%;
    }

    .form-group .form-inline .glyphicon-minus {
        display:inline-block;
        width:6%;
        text-align:center;
        line-height:34px;
    }

    .form-group .city,
    .form-group .canton{
        display: inline-block;
        width: 49%;
        margin-bottom: 5px;
    }
}

/* ________________________________________________________________________________ */
/* SM 小屏幕（平板，大於等於 768px） ______________________________________________ */
/* ________________________________________________________________________________ */
@media (min-width: 768px) {

    .delete {
        padding: 10px 9px 5px 9px;
        margin-right: 8px;
        border-radius: 0;
    }

    /* shopping-setp */
    .shopping-setp {
        height: 58px;
        border-radius: 0;
        text-align: center;
    }
    .shopping-setp > div {
        height: 58px;
        line-height: 58px;
        margin-bottom:15px;
    }
        .shopping-setp .active {
            position: relative;
            color: #FFF;
            background-color: #beaf9c;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
        .shopping-setp .active:after { 
            content: "";
            position: absolute;
            top: 8px; 
            width: 42px; 
            height: 42px;
            background: inherit; 
            border: inherit; 
            border-left-color: transparent;
            border-bottom-color: transparent; 
            border-radius: 0px 8px 0px 0px; 
            -webkit-border-radius: 0px 8px 0px 0px;
            -moz-border-radius: 0px 8px 0px 0px;
        }
        .shopping-setp .active:before,
        .shopping-setp .active:after {
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
        }
        .shopping-setp .active:before {
            left: -21px;
            background-color: white;
        }
        .shopping-setp .active:after {
            right: -21px;
            z-index: 1;
        }

    /*__ form input telphone & fax____________________*/
    .form-group .form-inline input.t1 {
        width:20%;
    }
    .form-group .form-inline input.t2 {
        width:30%;
    }
    .form-group .form-inline input.t3 {
        width:30%;
    }

    .form-group .form-inline .glyphicon-minus {
        display:inline-block;
        width:6%;
        text-align:center;
        line-height:34px;
    }
    .form-group .city,
    .form-group .canton{
        width: 49%;
        margin-bottom: 5px;
    }
}

/* ________________________________________________________________________________ */
/* MD 中等屏幕（桌面显示器，大於等於 992px） ______________________________________ */
/* ________________________________________________________________________________ */
@media (min-width: 992px) {

}

/* ________________________________________________________________________________ */
/* LG 大屏幕（大桌面显示器，大於等於 1200px） _____________________________________ */
/* ________________________________________________________________________________ */
@media (min-width: 1200px) {
   
}