<h3>
    {$tank->name}

    <a href="{$hosturl}/controllers/embryoslab.php?ac=colors" target="_blank" class="btn btn-success btn-sm pull-right" >
        <i class="fa fa-gear"></i>  Colors </a>
</h3>

<div class="row form-group">
    <div class="col-md-12">
        <label for="color_picker_cell" class="form-label col-md-2">Choose color:</label>
        {*<input type="color" class="color-picker " name="color_picker_cell" required="required" id="color_picker_cell">*}
        <select class="form-control col-md-3" id="color_picker_cell" required="required" style="max-width: 30% !important; margin-right:6%;">
            <option value="">Choose color</option>
            {foreach $colors as $color}
                <option value="{$color->color_name}">{$color->color_letter}</option>
            {/foreach}
        </select>
        
        <label for="tank_txt" class="form-label col-md-2">Location:</label>
        <input type="text" class="form-control col-md-3" name="tank_txt" id="tank_txt" style="max-width: 30% !important;">
    </div>
</div>
<div id="aspect-content">
    {foreach $levels as $level}
        <div class="aspect-tab">
            <input class="aspect-input" id="item-{$level.up_level_name}" name="aspect" type="checkbox">
            <label class="aspect-label" for="item-{$level.up_level_name}"></label>
            <div class="aspect-content">
                <div class="aspect-info">
                    <span class="aspect-name">Canister number {$level.up_level_name}</span>
                </div>
                <div class="aspect-stat">
                    <div class="all-opinions">
{*                        <span class="all-opinions-count">{$level.full}</span>*}
{*                        <span>/ {$total_cells}</span>*}
                        <span class="all-opinions-count">{$level.third_full}</span>
                        <span>/ {$level.full}</span>
                        <span>/ {$total_cells}</span>
                    </div>
                </div>
            </div>
            <div class="aspect-tab-content">
                <div class="sentiment-wrapper">
                    {foreach $level.sec_levels as $sec_level}
                        {if $sec_level.full > 0}
                            {if $tank->tank_type eq 1}
                                <div>
                                    <div class="div-fill" style="cursor: default;">
                                        <div class="opinion-header">
                                            <span>{$sec_level.cell_name}</span>
                                            <span>ID ({$sec_level.patient_id})</span>
                                            <span>({$sec_level.full}/{$level.sec_total})</span>
                                        </div>
                                    </div>
                                </div>
                            {elseif $tank->tank_type eq 2}
                                <div>
                                    <div class="div-fill"
                                         data-target="#last_level_{$level.up_level_name}_{$sec_level.cell_name}"
                                         data-toggle="modal" style="cursor: pointer;padding: 5px;">
                                        <div class="opinion-header text-center">
                                            <span>{$sec_level.cell_name}</span>
                                            <hr style="margin: 1px;"/>
                                            <div class="mt-checkbox-inline">
                                                {foreach $sec_level.third_levels as $th_le}
                                                    <label class="mt-checkbox">
                                                        {if $th_le.patient_id > 0}
                                                            <input checked="checked" class="last_cell_tank"
                                                                   disabled="disabled" type="checkbox"
                                                                   value="{$th_le.cell_part_name}">
                                                            {$th_le.cell_part_name}
                                                        {else}
                                                            <input class="last_cell_tank"
                                                                   data-cell-name="{$sec_level.cell_name}"
                                                                   data-name="last_cell_{$level.up_level_name}_{$sec_level.cell_name}"
                                                                   data-up-level="{$level.up_level_name}"
                                                                   name="last_cell[]" type="checkbox"
                                                                   value="{$th_le.cell_part_name}">
                                                            {$th_le.cell_part_name}
                                                        {/if}
                                                        <span></span>
                                                    </label>
                                                {/foreach}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {elseif $tank->tank_type eq 3}
                                <div>
                                    <div class="div-fill"
                                         data-target="#last_level_{$level.up_level_name}_{$sec_level.cell_name}"
                                         data-toggle="modal" style="cursor: pointer;padding: 5px;">
                                        <div class="opinion-header text-center">
                                            <span>{$sec_level.cell_name}</span>
                                            <hr style="margin: 1px;"/>
                                            <div class="mt-checkbox-inline">
                                                {foreach $sec_level.third_levels as $th_le}
                                                    {if $th_le.patient_id > 0}
                                                        <label class="mt-checkbox"
                                                               style="background: {$th_le.cell_color};padding: 3px 6px;margin: 2px;">
                                                            <input checked="checked" class="last_cell_tank"
                                                                   disabled="disabled" type="checkbox"
                                                                   value="{$th_le.cell_part_name}">
                                                            {$th_le.cell_part_name}
                                                            <span></span>
                                                        </label>
                                                    {else}
                                                        <label class="mt-checkbox" style="padding: 3px 6px;margin: 2px;">
                                                            <input class="last_cell_tank"
                                                                   data-cell-name="{$sec_level.cell_name}"
                                                                   data-name="last_cell_{$level.up_level_name}_{$sec_level.cell_name}"
                                                                   data-up-level="{$level.up_level_name}"
                                                                   name="last_cell[]" type="checkbox"
                                                                   value="{$th_le.cell_part_name}">
                                                            {$th_le.cell_part_name}
                                                            <span></span>
                                                        </label>
                                                    {/if}

                                                {/foreach}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {/if}
                        {else}
                            {if $tank->tank_type eq 3}
                                <div>
                                    <div class="div-empty" style="cursor: pointer;padding: 5px;"
                                         data-target="#last_level_{$level.up_level_name}_{$sec_level.cell_name}"
                                         data-toggle="modal">
                                        <div class="opinion-header text-center">
                                            <span>{$sec_level.cell_name}</span>
                                            <hr style="margin: 1px;"/>
                                            <div class="mt-checkbox-inline">
                                                <label class="mt-checkbox" style="padding: 3px 6px;margin: 2px;">
                                                    <input class="last_cell_tank"
                                                           data-cell-name="{$sec_level.cell_name}"
                                                           data-name="last_cell_{$level.up_level_name}_{$sec_level.cell_name}"
                                                           data-up-level="{$level.up_level_name}" name="last_cell[]"
                                                           type="checkbox" value="1"> 1
                                                    <span></span>
                                                </label>
                                                <label class="mt-checkbox" style="padding: 3px 6px;margin: 2px;">
                                                    <input class="last_cell_tank"
                                                           data-cell-name="{$sec_level.cell_name}"
                                                           data-name="last_cell_{$level.up_level_name}_{$sec_level.cell_name}"
                                                           data-up-level="{$level.up_level_name}" name="last_cell[]"
                                                           type="checkbox" value="2"> 2
                                                    <span></span>
                                                </label>
                                                <label class="mt-checkbox" style="padding: 3px 6px;margin: 2px;">
                                                    <input class="last_cell_tank"
                                                           data-cell-name="{$sec_level.cell_name}"
                                                           data-name="last_cell_{$level.up_level_name}_{$sec_level.cell_name}"
                                                           data-up-level="{$level.up_level_name}" name="last_cell[]"
                                                           type="checkbox" value="3"> 3
                                                    <span></span>
                                                </label>
                                                <label class="mt-checkbox" style="padding: 3px 6px;margin: 2px;">
                                                    <input class="last_cell_tank"
                                                           data-cell-name="{$sec_level.cell_name}"
                                                           data-name="last_cell_{$level.up_level_name}_{$sec_level.cell_name}"
                                                           data-up-level="{$level.up_level_name}" name="last_cell[]"
                                                           type="checkbox" value="4"> 4
                                                    <span></span>
                                                </label>
                                                <label class="mt-checkbox" style="padding: 3px 6px;margin: 2px;">
                                                    <input class="last_cell_tank"
                                                           data-cell-name="{$sec_level.cell_name}"
                                                           data-name="last_cell_{$level.up_level_name}_{$sec_level.cell_name}"
                                                           data-up-level="{$level.up_level_name}" name="last_cell[]"
                                                           type="checkbox"
                                                           value="5"> 5
                                                    <span></span>
                                                </label>
                                                <label class="mt-checkbox" style="padding: 3px 6px;margin: 2px;">
                                                    <input class="last_cell_tank"
                                                           data-cell-name="{$sec_level.cell_name}"
                                                           data-name="last_cell_{$level.up_level_name}_{$sec_level.cell_name}"
                                                           data-up-level="{$level.up_level_name}" name="last_cell[]"
                                                           type="checkbox"
                                                           value="6"> 6
                                                    <span></span>
                                                </label>
                                                <label class="mt-checkbox" style="padding: 3px 6px;margin: 2px;">
                                                    <input class="last_cell_tank"
                                                           data-cell-name="{$sec_level.cell_name}"
                                                           data-name="last_cell_{$level.up_level_name}_{$sec_level.cell_name}"
                                                           data-up-level="{$level.up_level_name}" name="last_cell[]"
                                                           type="checkbox"
                                                           value="7"> 7
                                                    <span></span>
                                                </label>
                                                <label class="mt-checkbox" style="padding: 3px 6px;margin: 2px;">
                                                    <input class="last_cell_tank"
                                                           data-cell-name="{$sec_level.cell_name}"
                                                           data-name="last_cell_{$level.up_level_name}_{$sec_level.cell_name}"
                                                           data-up-level="{$level.up_level_name}" name="last_cell[]"
                                                           type="checkbox"
                                                           value="8"> 8
                                                    <span></span>
                                                </label>
                                                <label class="mt-checkbox" style="padding: 3px 6px;margin: 2px;">
                                                    <input class="last_cell_tank"
                                                           data-cell-name="{$sec_level.cell_name}"
                                                           data-name="last_cell_{$level.up_level_name}_{$sec_level.cell_name}"
                                                           data-up-level="{$level.up_level_name}" name="last_cell[]"
                                                           type="checkbox"
                                                           value="9"> 9
                                                    <span></span>
                                                </label>
                                                <label class="mt-checkbox" style="padding: 3px 6px;margin: 2px;">
                                                    <input class="last_cell_tank"
                                                           data-cell-name="{$sec_level.cell_name}"
                                                           data-name="last_cell_{$level.up_level_name}_{$sec_level.cell_name}"
                                                           data-up-level="{$level.up_level_name}" name="last_cell[]"
                                                           type="checkbox"
                                                           value="10"> 10
                                                    <span></span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {else}
                                <div>
                                    <div class="div-empty" style="cursor: pointer;padding: 5px;"
                                         data-target="#last_level_{$level.up_level_name}_{$sec_level.cell_name}"
                                         data-toggle="modal">
                                        <div class="opinion-header text-center">
                                            <span>{$sec_level.cell_name}</span>
                                            <hr style="margin: 1px;"/>
                                            <div class="mt-checkbox-inline">
                                                <label class="mt-checkbox">
                                                    <input class="last_cell_tank"
                                                           data-cell-name="{$sec_level.cell_name}"
                                                           data-name="last_cell_{$level.up_level_name}_{$sec_level.cell_name}"
                                                           data-up-level="{$level.up_level_name}" name="last_cell[]"
                                                           type="checkbox" value="1"> 1
                                                    <span></span>
                                                </label>
                                                <label class="mt-checkbox">
                                                    <input class="last_cell_tank"
                                                           data-cell-name="{$sec_level.cell_name}"
                                                           data-name="last_cell_{$level.up_level_name}_{$sec_level.cell_name}"
                                                           data-up-level="{$level.up_level_name}" name="last_cell[]"
                                                           type="checkbox" value="2"> 2
                                                    <span></span>
                                                </label>
                                                <label class="mt-checkbox">
                                                    <input class="last_cell_tank"
                                                           data-cell-name="{$sec_level.cell_name}"
                                                           data-name="last_cell_{$level.up_level_name}_{$sec_level.cell_name}"
                                                           data-up-level="{$level.up_level_name}" name="last_cell[]"
                                                           type="checkbox" value="3"> 3
                                                    <span></span>
                                                </label>
                                                <label class="mt-checkbox">
                                                    <input class="last_cell_tank"
                                                           data-cell-name="{$sec_level.cell_name}"
                                                           data-name="last_cell_{$level.up_level_name}_{$sec_level.cell_name}"
                                                           data-up-level="{$level.up_level_name}" name="last_cell[]"
                                                           type="checkbox" value="4"> 4
                                                    <span></span>
                                                </label>
                                                <label class="mt-checkbox">
                                                    <input class="last_cell_tank"
                                                           data-cell-name="{$sec_level.cell_name}"
                                                           data-name="last_cell_{$level.up_level_name}_{$sec_level.cell_name}"
                                                           data-up-level="{$level.up_level_name}" name="last_cell[]"
                                                           type="checkbox"
                                                           value="5"> 5
                                                    <span></span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {/if}
                        {/if}
                    {/foreach}

                </div>
            </div>
        </div>
    {/foreach}
</div>


{literal}
    <style>
        #tanks_overlay {
            position: absolute;
            z-index: 99999;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: rgba(0, 0, 0);
            height: 100%;
            width: 100%;
            text-align: center;
            padding-top: 100px;
        }

        .bootbox-body {
            display: block;
            text-align: center;
            padding: 17px 14px 10px;
        }

        .w-100 {
            width: 100% !important;
        }

        .warning .modal-header {
            background: #df7000 !important;
            color: #fff;
        }

        /*body {*/
        /*    background-color: #6fcae7;*/
        /*    overflow-y: scroll;*/
        /*    overflow-x: hidden;*/
        /*}*/

        #aspect-content {
            margin: 50px 0 0;
            font-family: "Poppins", sans-serif;
        }

        #aspect-content * {
            box-sizing: border-box;
        }

        .aspect-tab {
            position: relative;
            width: 100%;
            max-width: 1000px;
            margin: 0 auto 10px;
            border-radius: 4px;
            background-color: #fff;
            box-shadow: 0 0 0 1px #ececec;
            opacity: 1;
            transition: box-shadow 0.2s, opacity 0.4s;
        }

        .aspect-tab:hover {
            box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.11);
        }

        .aspect-input {
            display: none;
        }

        .aspect-input:checked ~ .aspect-content + .aspect-tab-content {
            max-height: 3000px;
        }

        .aspect-input:checked ~ .aspect-content:after {
            transform: rotate(0);
        }

        .aspect-label {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            max-height: 80px;
            width: 100%;
            margin: 0;
            padding: 0;
            font-size: 0;
            z-index: 1;
            cursor: pointer;
        }

        .aspect-label:hover ~ .aspect-content:after {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTI0IDI0SDBWMGgyNHoiIG9wYWNpdHk9Ii44NyIvPgogICAgICAgIDxwYXRoIGZpbGw9IiM1NTZBRUEiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTE1Ljg4IDE1LjI5TDEyIDExLjQxbC0zLjg4IDMuODhhLjk5Ni45OTYgMCAxIDEtMS40MS0xLjQxbDQuNTktNC41OWEuOTk2Ljk5NiAwIDAgMSAxLjQxIDBsNC41OSA0LjU5Yy4zOS4zOS4zOSAxLjAyIDAgMS40MS0uMzkuMzgtMS4wMy4zOS0xLjQyIDB6Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=");
        }

        .aspect-content {
            position: relative;
            display: block;
            height: 80px;
            margin: 0;
            padding: 0 87px 0 30px;
            font-size: 0;
            white-space: nowrap;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
        }

        .aspect-content:before, .aspect-content:after {
            content: "";
            display: inline-block;
            vertical-align: middle;
        }

        .aspect-content:before {
            height: 100%;
        }

        .aspect-content:after {
            position: absolute;
            width: 24px;
            height: 100%;
            right: 30px;
            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTI0IDI0SDBWMGgyNHoiIG9wYWNpdHk9Ii44NyIvPgogICAgICAgIDxwYXRoIGZpbGw9IiNBOUFDQUYiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTE1Ljg4IDE1LjI5TDEyIDExLjQxbC0zLjg4IDMuODhhLjk5Ni45OTYgMCAxIDEtMS40MS0xLjQxbDQuNTktNC41OWEuOTk2Ljk5NiAwIDAgMSAxLjQxIDBsNC41OSA0LjU5Yy4zOS4zOS4zOSAxLjAyIDAgMS40MS0uMzkuMzgtMS4wMy4zOS0xLjQyIDB6Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=");
            background-repeat: no-repeat;
            background-position: center;
            transform: rotate(180deg);
        }

        .aspect-name {
            display: inline-block;
            width: 75%;
            margin-left: 16px;
            font-weight: 500;
            color: #242a32;
            white-space: normal;
            text-align: left;
            vertical-align: middle;
        }

        .aspect-stat {
            width: 40%;
            text-align: right;
        }

        .all-opinions,
        .aspect-name {
            font-size: 20px;
            line-height: 22px;
        }

        .all-opinions {
            color: #68af1f;
            text-align: left;
            font-size: 18px;
        }

        .aspect-content + .aspect-tab-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s;
        }

        .aspect-content > div,
        .aspect-stat > div {
            display: inline-block;
        }

        .aspect-content > div {
            vertical-align: middle;
        }

        .positive-count,
        .negative-count,
        .neutral-count {
            display: inline-block;
            margin: 0 0 0 20px;
            padding-left: 26px;
            background-repeat: no-repeat;
            font-size: 13px;
            line-height: 20px;
            color: #363636;
        }

        .positive-count {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiM3RUQzMjEiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEwIDE4LjU3MWMtNC43MjYgMC04LjU3MS0zLjg0NS04LjU3MS04LjU3MSAwLTQuNzI2IDMuODQ1LTguNTcxIDguNTcxLTguNTcxIDQuNzI2IDAgOC41NzEgMy44NDUgOC41NzEgOC41NzEgMCA0LjcyNi0zLjg0NSA4LjU3MS04LjU3MSA4LjU3MXpNMjAgMTBjMCA1LjUxNC00LjQ4NiAxMC0xMCAxMFMwIDE1LjUxNCAwIDEwIDQuNDg2IDAgMTAgMHMxMCA0LjQ4NiAxMCAxMHpNNSAxMS40MjdhNSA1IDAgMCAwIDEwIDAgLjcxNC43MTQgMCAxIDAtMS40MjkgMCAzLjU3MSAzLjU3MSAwIDAgMS03LjE0MiAwIC43MTQuNzE0IDAgMSAwLTEuNDI5IDB6bTEuMDcxLTVhMS4wNzEgMS4wNzEgMCAxIDAgMCAyLjE0MyAxLjA3MSAxLjA3MSAwIDAgMCAwLTIuMTQzem03Ljg1OCAwYTEuMDcxIDEuMDcxIDAgMSAwIDAgMi4xNDMgMS4wNzEgMS4wNzEgMCAwIDAgMC0yLjE0M3oiLz4KPC9zdmc+Cg==");
        }

        .negative-count {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNGRjZFMDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEwIDE4LjU3MWMtNC43MjYgMC04LjU3MS0zLjg0NS04LjU3MS04LjU3MSAwLTQuNzI2IDMuODQ1LTguNTcxIDguNTcxLTguNTcxIDQuNzI2IDAgOC41NzEgMy44NDUgOC41NzEgOC41NzEgMCA0LjcyNi0zLjg0NSA4LjU3MS04LjU3MSA4LjU3MXpNMjAgMTBjMCA1LjUxNC00LjQ4NiAxMC0xMCAxMFMwIDE1LjUxNCAwIDEwIDQuNDg2IDAgMTAgMHMxMCA0LjQ4NiAxMCAxMHpNNSAxNC45OThhLjcxNC43MTQgMCAwIDAgMS40MjkgMCAzLjU3MSAzLjU3MSAwIDAgMSA3LjE0MiAwIC43MTQuNzE0IDAgMSAwIDEuNDI5IDAgNSA1IDAgMSAwLTEwIDB6bTEuMDcxLTguNTdhMS4wNzEgMS4wNzEgMCAxIDAgMCAyLjE0MiAxLjA3MSAxLjA3MSAwIDAgMCAwLTIuMTQzem03Ljg1OCAwYTEuMDcxIDEuMDcxIDAgMSAwIDAgMi4xNDIgMS4wNzEgMS4wNzEgMCAwIDAgMC0yLjE0M3oiLz4KPC9zdmc+Cg==");
        }

        .neutral-count {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNCQUMyRDYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEwIDE4LjU3MWMtNC43MjYgMC04LjU3MS0zLjg0NS04LjU3MS04LjU3MSAwLTQuNzI2IDMuODQ1LTguNTcxIDguNTcxLTguNTcxIDQuNzI2IDAgOC41NzEgMy44NDUgOC41NzEgOC41NzEgMCA0LjcyNi0zLjg0NSA4LjU3MS04LjU3MSA4LjU3MXpNMjAgMTBjMCA1LjUxNC00LjQ4NiAxMC0xMCAxMFMwIDE1LjUxNCAwIDEwIDQuNDg2IDAgMTAgMHMxMCA0LjQ4NiAxMCAxMHpNNS43MTQgMTEuNDI3YS43MTQuNzE0IDAgMSAwIDAgMS40MjloOC41NzJhLjcxNC43MTQgMCAxIDAgMC0xLjQyOUg1LjcxNHptLjM1Ny01YTEuMDcxIDEuMDcxIDAgMSAwIDAgMi4xNDMgMS4wNzEgMS4wNzEgMCAwIDAgMC0yLjE0M3ptNy44NTggMGExLjA3MSAxLjA3MSAwIDEgMCAwIDIuMTQzIDEuMDcxIDEuMDcxIDAgMCAwIDAtMi4xNDN6Ii8+Cjwvc3ZnPgo=");
        }

        .aspect-info {
            width: 60%;
            white-space: nowrap;
            font-size: 0;
        }

        .aspect-info:before {
            content: "";
            display: inline-block;
            height: 44px;
            vertical-align: middle;
        }

        .chart-pie {
            position: relative;
            display: inline-block;
            height: 44px;
            width: 44px;
            border-radius: 50%;
            background-color: #e4e4e4;
            vertical-align: middle;
        }

        .chart-pie:after {
            content: "";
            display: block;
            position: absolute;
            height: 40px;
            width: 40px;
            top: 2px;
            left: 2px;
            border-radius: 50%;
            background-color: #fff;
        }

        .chart-pie-count {
            position: absolute;
            display: block;
            height: 100%;
            width: 100%;
            font-size: 14px;
            font-weight: 500;
            line-height: 44px;
            color: #242a32;
            text-align: center;
            z-index: 1;
        }

        .chart-pie > div {
            clip: rect(0, 44px, 44px, 22px);
        }

        .chart-pie > div,
        .chart-pie.over50 .first-fill {
            position: absolute;
            height: 44px;
            width: 44px;
            border-radius: 50%;
        }

        .chart-pie.over50 > div {
            clip: rect(auto, auto, auto, auto);
        }

        .chart-pie.over50 .first-fill {
            clip: rect(0, 44px, 44px, 22px);
        }

        .chart-pie:not(.over50) .first-fill {
            display: none;
        }

        .second-fill {
            position: absolute;
            clip: rect(0, 22px, 44px, 0);
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border-width: 3px;
            border-style: solid;
            box-sizing: border-box;
        }

        .chart-pie.positive .first-fill {
            background-color: #82d428;
        }

        .chart-pie.positive .second-fill {
            border-color: #82d428;
        }

        .chart-pie.negative .first-fill {
            background-color: #ff6e00;
        }

        .chart-pie.negative .second-fill {
            border-color: #ff6e00;
        }

        .aspect-tab-content {
            background-color: #f9f9f9;
            font-size: 0;
            text-align: justify;
        }

        .sentiment-wrapper {
            padding: 24px 30px 30px;
        }

        .sentiment-wrapper > div {
            display: inline-block;
            width: 20%;
            max-width: 390px;
            padding: 0 5px;
            box-sizing: border-box;
            vertical-align: top;
            cursor: default;
            margin: 5px 0px;
        }

        .sentiment-wrapper > div > div {
            width: 100%;
            padding: 16px 24px 20px;
            box-sizing: border-box;
            border-radius: 4px;
            background-color: #fff;
            border: 1px solid #707070;/*#ececec;*/
            text-align: left;
        }

        .div-fill {
            background-color: #f0c8c8 !important;/*#dd5b51 !important;*/
            cursor: pointer;
        }

        .div-empty {
            background-color: #fefefe !important;/*#64c312 !important;*/
        }

        .opinion-header {
            position: relative;
            width: 100%;
            margin: 0 0 0px;
            font-size: 15px;
            font-weight: 700;
            line-height: 20px;
            color: #242a32;
            text-transform: capitalize;
        }

        .opinion-header > span:nth-child(2) {
            position: absolute;
            right: 0;
        }

        .opinion-header + div > span {
            font-size: 13px;
            font-weight: 400;
            line-height: 22px;
            color: #363636;
        }

        @media screen and (max-width: 800px) {
            .aspect-label {
                max-height: 102px;
            }

            .aspect-content {
                height: auto;
                padding: 10px 87px 10px 30px;
            }

            .aspect-content:before {
                display: none;
            }

            .aspect-content:after {
                top: 0;
            }

            .aspect-content > div {
                display: block;
                width: 100%;
            }

            .aspect-stat {
                margin-top: 10px;
                text-align: left;
            }
        }

        @media screen and (max-width: 750px) {
            .sentiment-wrapper > div {
                display: block;
                width: 100%;
                max-width: 100%;
            }

            .sentiment-wrapper > div:not(:first-child) {
                margin-top: 10px;
            }
        }

        @media screen and (max-width: 500px) {
            .aspect-label {
                max-height: 140px;
            }

            .aspect-stat > div {
                display: block;
                width: 100%;
            }

            .all-opinions {
                margin-bottom: 10px;
            }

            .all-opinions + div > span:first-child {
                margin: 0;
            }
        }

    </style>
    <script>
        $(window).load(function () {
            // PAGE IS FULLY LOADED
            // FADE OUT YOUR OVERLAYING DIV
            $('#tanks_overlay').fadeOut();
        });
    </script>
    <script>
        /*document.addEventListener('DOMContentLoaded', function() {
            const colorPickers = document.querySelectorAll('.color-picker');

            colorPickers.forEach(picker => {
                picker.addEventListener('input', function() {
                    const checkboxName = this.getAttribute('data-checkbox');
                    const checkboxLabel = document.querySelector(`label.mt-checkbox input[name="${checkboxName}"]`).nextElementSibling;
                    checkboxLabel.style.backgroundColor = this.value;
                });
            });
        });*/
    </script>
{/literal}