{literal}
<style>
    body {
        font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        background-color: #fff;
        font-weight: 300; }

    p {
        color: #b3b3b3;
        font-weight: 300; }

    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
        font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }

    a {
        -webkit-transition: .3s all ease;
        -o-transition: .3s all ease;
        transition: .3s all ease; }
    a, a:hover {
        text-decoration: none !important; }

    .content {
        padding: 1rem 0}

    h2 {
        font-size: 20px; }

    .custom-table {
        min-width: 900px; }
    .custom-table thead tr, .custom-table thead th {
        border-top: none;
        border-bottom: none !important; }
    .custom-table tbody th, .custom-table tbody td {
        color: #777;
        font-weight: 400;
        padding-bottom: 0px;
        padding-top: 0px;
        font-weight: 300; }
    .custom-table tbody th small, .custom-table tbody td small {
        color: #b3b3b3;
        font-weight: 300; }

    .custom-table tbody tr th, .custom-table tbody tr td {
        position: relative;
        -webkit-transition: .3s all ease;
        -o-transition: .3s all ease;
        transition: .3s all ease; }
    .custom-table tbody tr th:before, .custom-table tbody tr th:after, .custom-table tbody tr td:before, .custom-table tbody tr td:after {
        -webkit-transition: .3s all ease;
        -o-transition: .3s all ease;
        transition: .3s all ease;
        content: "";
        left: 0;
        right: 0;
        position: absolute;
        height: 1px;
        background: #bfbfbf;
        width: 100%;
        opacity: 0;
        visibility: hidden; }
    .custom-table tbody tr th:before, .custom-table tbody tr td:before {
        top: -1px; }
    .custom-table tbody tr th:after, .custom-table tbody tr td:after {
        bottom: -1px; }

    .custom-table tbody tr:hover th:before, .custom-table tbody tr:hover th:after, .custom-table tbody tr:hover td:before, .custom-table tbody tr:hover td:after {
        opacity: 1;
        visibility: visible; }
    .custom-table tbody tr.active th, .custom-table tbody tr.active td {
        background: rgba(0, 0, 0, 0.03); }
    .custom-table tbody tr.active th:before, .custom-table tbody tr.active th:after, .custom-table tbody tr.active td:before, .custom-table tbody tr.active td:after {
        opacity: 1;
        visibility: visible; }

    /* Custom Checkbox */
    .control {
        display: block;
        position: relative;
        margin-bottom: 25px;
        cursor: pointer;
        font-size: 18px; }

    .control input {
        position: absolute;
        z-index: -1;
        opacity: 0; }

    .control__indicator {
        position: absolute;
        top: 2px;
        left: 0;
        height: 20px;
        width: 20px;
        border-radius: 4px;
        border: 2px solid #ccc;
        background: transparent; }

    .control--radio .control__indicator {
        border-radius: 50%; }

    .control:hover input ~ .control__indicator,
    .control input:focus ~ .control__indicator {
        border: 2px solid #007bff; }

    .control input:checked ~ .control__indicator {
        border: 2px solid #007bff;
        background: #007bff; }

    .control input:disabled ~ .control__indicator {
        background: #e6e6e6;
        opacity: 0.6;
        pointer-events: none;
        border: 2px solid #ccc; }

    .control__indicator:after {
        font-family: 'icomoon';
        content: '\e5ca';
        position: absolute;
        display: none; }

    .control input:checked ~ .control__indicator:after {
        display: block;
        color: #fff; }

    .control--checkbox .control__indicator:after {
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -52%);
        -ms-transform: translate(-50%, -52%);
        transform: translate(-50%, -52%); }

    .control--checkbox input:disabled ~ .control__indicator:after {
        border-color: #7b7b7b; }

    .control--checkbox input:disabled:checked ~ .control__indicator {
        background-color: #007bff;
        opacity: .2;
        border: 2px solid #007bff; }
    .custom-table tbody td {
        color: #777;
        font-weight: 400;
        padding-bottom: 0px;
        padding-top: 0px;
        font-weight: 300;
        padding: 0;
    }
    .custom-table tbody tr th {
        text-align: center;
        vertical-align: middle;
        font-weight: bold;
    }
    .table thead th {
        text-align: center;
        vertical-align: middle;
        font-weight: bold;
        color: #212529;
    }
    .custom-table tbody tr th{
        color: #212529;
    }
    .custom-table tr{
        height: 43px;
    }
    .table-bordered th, .table-bordered td {
        border: 1px solid #444;
    }
    .table-responsive > .table-bordered {
        border: 1px solid #dee2e6;
    }
    table.table-child {
        width: 100%;
    }
    .table-child td{
        padding: 10px 5px!important;
        border:1px solid #000

    }
    table.table-child tr{
        height:10px;
    }
    table.table-child td{
        border: 1px solid rgb(57, 57, 57);
    }
    .btnCAn{
        margin: 5px 0;
        width: 95%;
        background-color: #4f81bd;
        border: 3px solid #385d8a;
        border-radius: 10px;
    }
    .title{
        text-align: center;
        font-weight: bold;
        color: #000000;
        margin-bottom: 17px;
        font-size: 15px;
    }
    .emptyCell{
        background-color: transparent;
    }

    .reserveMeCell{
        background-color: red;
    }

    .reserveOtherCell{
        background-color: gray;
    }


    .change_color{
        background-color: transparent;
    }

    .upperCellsDiv thead, th , tr {
        background-color: unset;
    }

    .lowerCellsDiv thead, th , tr {
        background-color: unset;
    }

    .table-child thead, th , tr {
        background-color: unset;
    }


</style>
{/literal}

<div class="modal fade" id="tankLocationModal" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document" style="    width: 1280px;">
        <div class="modal-content" style="width: 1400px;">
            <form action="" class="form-horizontal" id="tankLocationForm" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <input type="hidden" id="specTabId" value="{$specTabId}"/>
                <input type="hidden" id="specCanId" value="{$specCanId}"/>
                <input type="hidden" id="preview" value="{$preview}"/>
                <div class="modal-body" style="padding: 2em 1em 1em;">
                    <div class="portlet box grey-cascade">
                        <div class="portlet-body">
                            <div class="row">
                                <div class="tabbable tabbable-custom tabbable-noborder"  id="rowCancelTab">
                                    <ul class="nav nav-tabs">
                                        <li class="aw_3d_list active txtc wds48"> 
                                            <a href="#tabUpper" data-toggle="tab"> Upper</a>
                                        </li>
                                        <li class="aw_3d_list txtc wds48">
                                            <a href="#tabLower" data-toggle="tab" > Lower</a>
                                        </li>
                                    </ul>

                                    <div class="tab-content">
                                        <div class="tab-pane  active  " id="tabUpper">
                                            <div class="container-fluid" style="    padding-right: 0; padding-left: 0;">
                                                <div class="row">
                                                    <div class="col-sm-2 wds10">
                                                        <h2 class="title">Upper Cans (A)</h2>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="A1" data-location="A" data-no="1">Canister A1</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="A2" data-location="A" data-no="2">Canister A2</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="A3" data-location="A" data-no="3">Canister A3</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="A4" data-location="A" data-no="4">Canister A4</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="A5" data-location="A" data-no="5">Canister A5</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="A6" data-location="A" data-no="6">Canister A6</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="A7" data-location="A" data-no="7">Canister A7</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="A8" data-location="A" data-no="8">Canister A8</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="A9" data-location="A" data-no="9">Canister A9</button>

                                                    </div>
                                                    <div class="col-sm-8 wds80" id="upperCellsDiv">


                                                    </div>
                                                    <div class="col-sm-2 wds10">
                                                        <h2 class="title">Upper Cans (B)</h2>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="B1"  data-location="B" data-no="1">Canister B1</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="B2"  data-location="B" data-no="2">Canister B2</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="B3"  data-location="B" data-no="3">Canister B3</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="B4"  data-location="B" data-no="4">Canister B4</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="B5"  data-location="B" data-no="5">Canister B5</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="B6"  data-location="B" data-no="6">Canister B6</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="B7"  data-location="B" data-no="7">Canister B7</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="B8"  data-location="B" data-no="8">Canister B8</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="B9"  data-location="B" data-no="9">Canister B9</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="tab-pane" id="tabLower">
                                            <div class="container-fluid" style="    padding-right: 0; padding-left: 0;">
                                                <div class="row">
                                                    <div class="col-sm-2 wds10">
                                                        <h2 class="title">Lower Cans (A)</h2>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="A10"  data-location="A" data-no="10">Canister A10</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="A11"  data-location="A" data-no="11">Canister A11</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="A12"  data-location="A" data-no="12">Canister A12</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="A13"  data-location="A" data-no="13">Canister A13</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="A14"  data-location="A" data-no="14">Canister A14</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="A15"  data-location="A" data-no="15">Canister A15</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="A16"  data-location="A" data-no="16">Canister A16</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="A17"  data-location="A" data-no="17">Canister A17</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="A18"  data-location="A" data-no="18">Canister A18</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="A19"  data-location="A" data-no="15">Canister A19</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="A20"  data-location="A" data-no="20">Canister A20</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="A21"  data-location="A" data-no="21">Canister A21</button>
                                                    </div>
                                                    <div class="col-sm-8 wds80" id="lowerCellsDiv">





                                                    </div>
                                                    <div class="col-sm-2 wds10">
                                                        <h2 class="title">Lower Cans (B)</h2>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="B10"  data-location="B" data-no="10">Canister B10</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="B11"  data-location="B" data-no="11">Canister B11</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="B12"  data-location="B" data-no="12">Canister B12</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="B13"  data-location="B" data-no="13">Canister B13</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="B14"  data-location="B" data-no="14">Canister B14</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="B15"  data-location="B" data-no="15">Canister B15</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="B16"  data-location="B" data-no="16">Canister B16</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="B17"  data-location="B" data-no="17">Canister B17</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="B18"  data-location="B" data-no="18">Canister B18</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="B19"  data-location="B" data-no="19">Canister B19</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="B20"  data-location="B" data-no="20">Canister B20</button>
                                                        <button type="button" class="btnCAn btn-primary tankCanBtn" id="B21"  data-location="B" data-no="21">Canister B21</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btnCAn btn-secondary" data-dismiss="modal" style=" width: 25%;">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>


{literal}
<script>
    var specTabId = $("#specTabId").val();
    var specCanId = $("#specCanId").val();

    if (specTabId != "") {
        $('a[href="' + specTabId + '"]').click();
    }

    if (specCanId != "") {
        $("" + specCanId).trigger('click');
    }





</script>     

{/literal}


