From 2e87baa4ddc0416aaa8a05f06bee361639ef5af1 Mon Sep 17 00:00:00 2001
From: Harry Bomrah <harry@rulingcom.com>
Date: Mon, 10 Apr 2017 16:16:47 +0800
Subject: [PATCH] added purchases ffrontend

---
 .../stylesheets/client_management/default.css | 707 ++++++++++--------
 .../stylesheets/client_management/rwd.css     |  20 +-
 .../client_managements_controller.rb          |  20 +
 .../_purchase_partial.html.erb                |  53 ++
 .../client_managements/contracts.html.erb     |  20 +-
 app/views/client_managements/history.html.erb |  20 +-
 .../client_managements/purchases.html.erb     |  94 +++
 app/views/shared/_header.html.erb             |   2 +-
 config/locales/en.yml                         |   3 +-
 config/locales/zh_tw.yml                      |   3 +-
 config/routes.rb                              |   1 +
 11 files changed, 618 insertions(+), 325 deletions(-)
 create mode 100644 app/views/client_managements/_purchase_partial.html.erb
 create mode 100644 app/views/client_managements/purchases.html.erb

diff --git a/app/assets/stylesheets/client_management/default.css b/app/assets/stylesheets/client_management/default.css
index 16e2921..ed617be 100644
--- a/app/assets/stylesheets/client_management/default.css
+++ b/app/assets/stylesheets/client_management/default.css
@@ -15,7 +15,7 @@ body {
 
 /* line 16, ../sass/default.scss */
 select.form-control {
-  background: url(/assets/client_management/arrow.png) no-repeat calc(100% - 10px) 50%;
+  background: #fff url(/assets/client_management/arrow.png) no-repeat calc(100% - 10px) 50%;
   padding: 6px 35px 6px 12px;
 }
 
@@ -431,39 +431,42 @@ select.form-control {
 .cp-main .cp-content .cp-submenu-box .submenu-item:active {
   box-shadow: none;
 }
-/* line 383, ../sass/default.scss */
-.cp-main .cp-content .cp-submenu-box .cp-filter-box {
-  float: left;
-  margin: 0 15px 10px 0;
+/* line 384, ../sass/default.scss */
+.cp-main .cp-content .cp-filter-box {
+  margin: 0 0 10px;
 }
 /* line 386, ../sass/default.scss */
-.cp-main .cp-content .cp-submenu-box .cp-filter-box select.form-control {
+.cp-main .cp-content .cp-filter-box + * {
+  clear: both;
+}
+/* line 389, ../sass/default.scss */
+.cp-main .cp-content .cp-filter-box .form-control {
   float: left;
   width: 200px;
   margin: 0 10px 10px 0;
 }
-/* line 391, ../sass/default.scss */
-.cp-main .cp-content .cp-submenu-box .cp-filter-box .btn {
+/* line 394, ../sass/default.scss */
+.cp-main .cp-content .cp-filter-box .btn {
   float: left;
   margin: 0 10px 10px 0;
 }
-/* line 395, ../sass/default.scss */
-.cp-main .cp-content .cp-submenu-box .cp-filter-box .btn-gray {
+/* line 398, ../sass/default.scss */
+.cp-main .cp-content .cp-filter-box .btn-gray {
   color: #333;
   background: #eee;
   border-color: #ccc;
 }
-/* line 399, ../sass/default.scss */
-.cp-main .cp-content .cp-submenu-box .cp-filter-box .btn-gray:hover {
+/* line 402, ../sass/default.scss */
+.cp-main .cp-content .cp-filter-box .btn-gray:hover {
   background: #ddd;
 }
-/* line 405, ../sass/default.scss */
+/* line 407, ../sass/default.scss */
 .cp-main .cp-content .cp-contract-detail {
   margin: 40px;
   border: 1px solid #ddd;
   padding: 40px;
 }
-/* line 409, ../sass/default.scss */
+/* line 411, ../sass/default.scss */
 .cp-main .cp-content .cp-contract-detail .sub-title {
   color: #337ab7;
   font-size: 20px;
@@ -471,15 +474,15 @@ select.form-control {
   width: 90%;
   margin: 60px 0 10px;
 }
-/* line 415, ../sass/default.scss */
+/* line 417, ../sass/default.scss */
 .cp-main .cp-content .cp-contract-detail .sub-title.ft {
   margin: 0 0 10px;
 }
-/* line 418, ../sass/default.scss */
+/* line 420, ../sass/default.scss */
 .cp-main .cp-content .cp-contract-detail .sub-title + .line-detail {
   border-top: 0px;
 }
-/* line 422, ../sass/default.scss */
+/* line 424, ../sass/default.scss */
 .cp-main .cp-content .cp-contract-detail .line-contract {
   width: 100%;
   margin: 0 auto 15px;
@@ -489,39 +492,39 @@ select.form-control {
   border-top: 1px dashed #dadada;
   padding: 15px 10px 0;
 }
-/* line 431, ../sass/default.scss */
+/* line 433, ../sass/default.scss */
 .cp-main .cp-content .cp-contract-detail .line-contract.qt .header-detail {
   width: calc(100% - 110px);
 }
-/* line 434, ../sass/default.scss */
+/* line 436, ../sass/default.scss */
 .cp-main .cp-content .cp-contract-detail .line-contract.qt .content-detail {
   width: 100px;
   text-align: right;
 }
-/* line 439, ../sass/default.scss */
+/* line 441, ../sass/default.scss */
 .cp-main .cp-content .cp-contract-detail .line-contract.hr {
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   padding: 15px 10px;
 }
-/* line 443, ../sass/default.scss */
+/* line 445, ../sass/default.scss */
 .cp-main .cp-content .cp-contract-detail .line-contract.hr .header-detail {
   font-size: 18px;
 }
-/* line 446, ../sass/default.scss */
+/* line 448, ../sass/default.scss */
 .cp-main .cp-content .cp-contract-detail .line-contract.hr .content-detail {
   color: #333;
   font-size: 18px;
 }
-/* line 450, ../sass/default.scss */
+/* line 452, ../sass/default.scss */
 .cp-main .cp-content .cp-contract-detail .line-contract.hr + div {
   border: none;
 }
-/* line 454, ../sass/default.scss */
+/* line 456, ../sass/default.scss */
 .cp-main .cp-content .cp-contract-detail .line-contract.file {
   padding: 15px 0 0;
 }
-/* line 456, ../sass/default.scss */
+/* line 458, ../sass/default.scss */
 .cp-main .cp-content .cp-contract-detail .line-contract.file .file-box {
   height: 30px;
   line-height: 8px;
@@ -529,16 +532,16 @@ select.form-control {
   font-size: 13px;
   margin: 6px 0 0;
 }
-/* line 463, ../sass/default.scss */
+/* line 465, ../sass/default.scss */
 .cp-main .cp-content .cp-contract-detail .line-contract.file .btn {
   float: right;
   margin: 0;
 }
-/* line 468, ../sass/default.scss */
+/* line 470, ../sass/default.scss */
 .cp-main .cp-content .cp-contract-detail .line-contract.buttons {
   padding: 15px 0 0;
 }
-/* line 471, ../sass/default.scss */
+/* line 473, ../sass/default.scss */
 .cp-main .cp-content .cp-contract-detail .line-contract:after {
   content: ".";
   display: block;
@@ -546,54 +549,61 @@ select.form-control {
   clear: both;
   visibility: hidden;
 }
-/* line 478, ../sass/default.scss */
+/* line 480, ../sass/default.scss */
 .cp-main .cp-content .cp-contract-detail .line-contract:first-child, .cp-main .cp-content .cp-contract-detail .line-contract:last-child {
   border-top: 0px dashed #dadada;
 }
-/* line 481, ../sass/default.scss */
+/* line 483, ../sass/default.scss */
 .cp-main .cp-content .cp-contract-detail .line-contract.middle {
   text-align: center;
 }
-/* line 484, ../sass/default.scss */
+/* line 486, ../sass/default.scss */
 .cp-main .cp-content .cp-contract-detail .line-contract .header-detail {
   color: #000;
   font-weight: 500;
   float: left;
   width: 160px;
 }
-/* line 490, ../sass/default.scss */
+/* line 492, ../sass/default.scss */
 .cp-main .cp-content .cp-contract-detail .line-contract ol.custom-module {
   background: rgba(0, 0, 0, 0.04);
   padding: 10px 10px 10px 30px;
   margin: 10px 0;
   border-radius: 4px;
 }
-/* line 496, ../sass/default.scss */
+/* line 498, ../sass/default.scss */
+.cp-main .cp-content .cp-contract-detail .line-contract div.requirement-text {
+  background: rgba(0, 0, 0, 0.04);
+  padding: 10px;
+  margin: 10px 0;
+  border-radius: 4px;
+}
+/* line 504, ../sass/default.scss */
 .cp-main .cp-content .cp-contract-detail .line-contract .content-detail {
   color: #888;
   float: right;
   width: calc(100% - 170px);
 }
-/* line 501, ../sass/default.scss */
+/* line 509, ../sass/default.scss */
 .cp-main .cp-content .cp-contract-detail .line-contract .btn {
   width: auto;
   margin: 20px 0;
 }
-/* line 505, ../sass/default.scss */
+/* line 513, ../sass/default.scss */
 .cp-main .cp-content .cp-contract-detail .line-contract .btn-gray {
   color: #333;
   background: #eee;
   border-color: #ccc;
 }
-/* line 509, ../sass/default.scss */
+/* line 517, ../sass/default.scss */
 .cp-main .cp-content .cp-contract-detail .line-contract .btn-gray:hover {
   background: #ddd;
 }
-/* line 515, ../sass/default.scss */
+/* line 523, ../sass/default.scss */
 .cp-main .cp-content .cp-requested-detail {
   padding: 40px 0;
 }
-/* line 517, ../sass/default.scss */
+/* line 525, ../sass/default.scss */
 .cp-main .cp-content .cp-requested-detail .line-detail {
   width: 80%;
   margin: 0 auto 15px;
@@ -603,7 +613,7 @@ select.form-control {
   border-top: 1px dashed #dadada;
   padding: 15px 0 0;
 }
-/* line 525, ../sass/default.scss */
+/* line 533, ../sass/default.scss */
 .cp-main .cp-content .cp-requested-detail .line-detail:after {
   content: ".";
   display: block;
@@ -611,48 +621,48 @@ select.form-control {
   clear: both;
   visibility: hidden;
 }
-/* line 532, ../sass/default.scss */
+/* line 540, ../sass/default.scss */
 .cp-main .cp-content .cp-requested-detail .line-detail:first-child, .cp-main .cp-content .cp-requested-detail .line-detail:last-child {
   border-top: 0px dashed #dadada;
 }
-/* line 535, ../sass/default.scss */
+/* line 543, ../sass/default.scss */
 .cp-main .cp-content .cp-requested-detail .line-detail.middle {
   text-align: center;
 }
-/* line 538, ../sass/default.scss */
+/* line 546, ../sass/default.scss */
 .cp-main .cp-content .cp-requested-detail .line-detail .header-detail {
   color: #000;
   font-weight: 500;
   float: left;
   width: 160px;
 }
-/* line 544, ../sass/default.scss */
+/* line 552, ../sass/default.scss */
 .cp-main .cp-content .cp-requested-detail .line-detail .content-detail {
   color: #888;
   float: right;
   width: calc(100% - 170px);
 }
-/* line 549, ../sass/default.scss */
+/* line 557, ../sass/default.scss */
 .cp-main .cp-content .cp-requested-detail .line-detail .btn {
   width: 150px;
   margin: 20px 0;
 }
-/* line 556, ../sass/default.scss */
+/* line 564, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history > div {
   margin: 0 0 30px;
 }
-/* line 559, ../sass/default.scss */
+/* line 567, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .box-request-history {
   margin: 0 0 30px;
 }
-/* line 562, ../sass/default.scss */
+/* line 570, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .sub-title {
   color: #888;
   font-size: 20px;
   font-weight: 400;
   margin: 0 0 20px;
 }
-/* line 568, ../sass/default.scss */
+/* line 576, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .item-history {
   border: 1px solid #ddd;
   padding: 10px 0 0;
@@ -661,7 +671,7 @@ select.form-control {
   border-radius: 4px;
   box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.05) inset;
 }
-/* line 575, ../sass/default.scss */
+/* line 583, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .item-history:after {
   content: ".";
   display: block;
@@ -669,15 +679,15 @@ select.form-control {
   clear: both;
   visibility: hidden;
 }
-/* line 582, ../sass/default.scss */
+/* line 590, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .item-history:last-child {
   margin: 0;
 }
-/* line 587, ../sass/default.scss */
+/* line 595, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .item-history .fa {
   margin: 0 10px 0 0;
 }
-/* line 590, ../sass/default.scss */
+/* line 598, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .item-history .site-title-history {
   display: block;
   border-bottom: 1px solid #ddd;
@@ -686,23 +696,23 @@ select.form-control {
   text-transform: uppercase;
   font-size: 18px;
 }
-/* line 597, ../sass/default.scss */
+/* line 605, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .item-history .site-title-history strong {
   margin: 0 0 0 10px;
   color: #666;
   font-weight: 600;
 }
-/* line 601, ../sass/default.scss */
+/* line 609, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .item-history .site-title-history strong:before {
   content: "[";
   padding: 0 5px 0 0;
 }
-/* line 605, ../sass/default.scss */
+/* line 613, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .item-history .site-title-history strong:after {
   content: "]";
   padding: 0 0 0 5px;
 }
-/* line 611, ../sass/default.scss */
+/* line 619, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .item-history .status-detail {
   position: absolute;
   right: -1px;
@@ -714,27 +724,27 @@ select.form-control {
   border-radius: 0 4px 0 4px;
   box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.05) inset;
 }
-/* line 621, ../sass/default.scss */
+/* line 629, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .item-history .status-detail.requested {
   background: #5cb85c;
 }
-/* line 624, ../sass/default.scss */
+/* line 632, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .item-history .status-detail.confirmed {
   background: #337ab7;
 }
-/* line 627, ../sass/default.scss */
+/* line 635, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .item-history .status-detail.purchased {
   background: #d9534f;
 }
-/* line 630, ../sass/default.scss */
+/* line 638, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .item-history .status-detail.pending {
-  background: #ccc;
+  background: #bbb;
 }
-/* line 634, ../sass/default.scss */
+/* line 642, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .item-history .info-site {
   margin: 0 0 10px;
 }
-/* line 636, ../sass/default.scss */
+/* line 644, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .item-history .info-site:after {
   content: ".";
   display: block;
@@ -742,7 +752,7 @@ select.form-control {
   clear: both;
   visibility: hidden;
 }
-/* line 643, ../sass/default.scss */
+/* line 651, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .item-history .info-site .url-site {
   float: left;
   padding: 0 10px;
@@ -750,7 +760,7 @@ select.form-control {
   font-size: 13px;
   line-height: 34px;
 }
-/* line 650, ../sass/default.scss */
+/* line 658, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .item-history .info-site .time-site {
   float: left;
   padding: 0 10px;
@@ -758,7 +768,89 @@ select.form-control {
   font-size: 13px;
   line-height: 34px;
 }
-/* line 659, ../sass/default.scss */
+/* line 666, ../sass/default.scss */
+.cp-main .cp-content .cp-addsite-history .item-history .receipt-site {
+  background: rgba(0, 0, 0, 0.005);
+  border-top: 1px solid #ddd;
+  display: none;
+  padding: 20px;
+}
+/* line 671, ../sass/default.scss */
+.cp-main .cp-content .cp-addsite-history .item-history .receipt-site .item-receipt {
+  background: #fff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
+  padding: 20px 10px;
+  position: relative;
+  border: 1px solid #ddd;
+  margin: 0 0 20px;
+  position: relative;
+  overflow-x: auto;
+}
+/* line 680, ../sass/default.scss */
+.cp-main .cp-content .cp-addsite-history .item-history .receipt-site .item-receipt:last-child {
+  margin: 0;
+}
+/* line 683, ../sass/default.scss */
+.cp-main .cp-content .cp-addsite-history .item-history .receipt-site .item-receipt:before {
+  background: rgba(0, 0, 0, 0.09);
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  left: -10px;
+  top: -10px;
+  content: "";
+  transform: rotate(-45deg);
+  display: block;
+}
+/* line 695, ../sass/default.scss */
+.cp-main .cp-content .cp-addsite-history .item-history .receipt-site .table-receipt {
+  width: 100%;
+  border: 0px solid #fff;
+  border-collapse: initial;
+}
+/* line 699, ../sass/default.scss */
+.cp-main .cp-content .cp-addsite-history .item-history .receipt-site .table-receipt th {
+  font-weight: 500;
+  font-size: 13px;
+  vertical-align: top;
+  border-bottom: 1px dashed #ddd;
+  padding: 0 5px 10px;
+}
+/* line 706, ../sass/default.scss */
+.cp-main .cp-content .cp-addsite-history .item-history .receipt-site .table-receipt td {
+  padding: 5px;
+  font-size: 13px;
+  color: #888;
+}
+/* line 711, ../sass/default.scss */
+.cp-main .cp-content .cp-addsite-history .item-history .receipt-site .table-receipt td.total {
+  color: #3a87ad;
+}
+/* line 714, ../sass/default.scss */
+.cp-main .cp-content .cp-addsite-history .item-history .receipt-site .table-receipt td.received {
+  color: #468847;
+}
+/* line 717, ../sass/default.scss */
+.cp-main .cp-content .cp-addsite-history .item-history .receipt-site .table-receipt td.pending {
+  color: #b94a48;
+}
+/* line 721, ../sass/default.scss */
+.cp-main .cp-content .cp-addsite-history .item-history .receipt-site .table-receipt td.status span {
+  font-weight: 600;
+}
+/* line 724, ../sass/default.scss */
+.cp-main .cp-content .cp-addsite-history .item-history .receipt-site .table-receipt td.status .pending {
+  color: #b94a48;
+}
+/* line 727, ../sass/default.scss */
+.cp-main .cp-content .cp-addsite-history .item-history .receipt-site .table-receipt td.status .cleared {
+  color: #468847;
+}
+/* line 732, ../sass/default.scss */
+.cp-main .cp-content .cp-addsite-history .item-history .receipt-site .table-receipt td.action a {
+  text-decoration: underline;
+}
+/* line 739, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .item-history .status-site {
   position: absolute;
   right: -1px;
@@ -770,19 +862,19 @@ select.form-control {
   border-radius: 0 4px 0 4px;
   box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.05) inset;
 }
-/* line 669, ../sass/default.scss */
+/* line 749, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .item-history .status-site.tk-open {
   background: #5cb85c;
 }
-/* line 672, ../sass/default.scss */
+/* line 752, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .item-history .status-site.tk-close {
   background: #888888;
 }
-/* line 675, ../sass/default.scss */
+/* line 755, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .item-history .status-site.tk-processing {
   background: #9f57b9;
 }
-/* line 679, ../sass/default.scss */
+/* line 759, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .item-history .action-site {
   background: rgba(0, 0, 0, 0.02);
   padding: 10px;
@@ -790,27 +882,33 @@ select.form-control {
   width: 100%;
   display: block;
   text-align: right;
+  min-height: 55px;
 }
-/* line 686, ../sass/default.scss */
+/* line 767, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-history .item-history .action-site a {
   margin: 0 0 0 6px;
 }
-/* line 689, ../sass/default.scss */
-.cp-main .cp-content .cp-addsite-history .item-history .action-site .btn-gray {
-  color: #333;
-  background: #eee;
-  border-color: #ccc;
+/* line 770, ../sass/default.scss */
+.cp-main .cp-content .cp-addsite-history .item-history .action-site .btn {
+  background: #fff;
+  border: 1px solid #ddd;
+  color: #222;
+  box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.05) inset;
 }
-/* line 693, ../sass/default.scss */
-.cp-main .cp-content .cp-addsite-history .item-history .action-site .btn-gray:hover {
-  background: #ddd;
+/* line 775, ../sass/default.scss */
+.cp-main .cp-content .cp-addsite-history .item-history .action-site .btn:hover {
+  background: rgba(0, 0, 0, 0.02);
 }
-/* line 700, ../sass/default.scss */
+/* line 778, ../sass/default.scss */
+.cp-main .cp-content .cp-addsite-history .item-history .action-site .btn:active {
+  box-shadow: none;
+}
+/* line 785, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step0 {
   margin: 80px auto 0;
   width: 80%;
 }
-/* line 703, ../sass/default.scss */
+/* line 788, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step0 a {
   display: block;
   margin: 0 0 30px;
@@ -825,7 +923,7 @@ select.form-control {
   overflow: hidden;
   text-decoration: none;
 }
-/* line 716, ../sass/default.scss */
+/* line 801, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step0 a .fa {
   color: #ccc;
   font-size: 30px;
@@ -837,7 +935,7 @@ select.form-control {
   line-height: 1;
   z-index: 1;
 }
-/* line 727, ../sass/default.scss */
+/* line 812, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step0 a .fa-sp {
   right: -40px;
   left: auto;
@@ -848,7 +946,7 @@ select.form-control {
   text-shadow: none;
   z-index: 0;
 }
-/* line 737, ../sass/default.scss */
+/* line 822, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step0 a span {
   font-size: 24px;
   line-height: 30px;
@@ -858,29 +956,29 @@ select.form-control {
   position: relative;
   z-index: 1;
 }
-/* line 746, ../sass/default.scss */
+/* line 831, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step0 a:hover {
   border: 1px solid #ddd;
   background: rgba(0, 0, 0, 0.02);
 }
-/* line 749, ../sass/default.scss */
+/* line 834, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step0 a:hover .fa {
   color: #337ab7;
 }
-/* line 752, ../sass/default.scss */
+/* line 837, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step0 a:hover span {
   color: #222;
 }
-/* line 758, ../sass/default.scss */
+/* line 843, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step0 .add-new .fa {
   left: 22px;
 }
-/* line 761, ../sass/default.scss */
+/* line 846, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step0 .add-new .fa-sp {
   left: auto;
   right: 0;
 }
-/* line 768, ../sass/default.scss */
+/* line 853, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step0 .sp-text {
   display: block;
   font-style: italic;
@@ -888,7 +986,7 @@ select.form-control {
   position: relative;
   width: 150px;
 }
-/* line 774, ../sass/default.scss */
+/* line 859, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step0 .sp-text span {
   background: #fff;
   padding: 0 15px 0 10px;
@@ -896,7 +994,7 @@ select.form-control {
   z-index: 2;
   color: #888;
 }
-/* line 786, ../sass/default.scss */
+/* line 871, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step0 .box-add-yours {
   display: none;
   margin: 0 30px 30px;
@@ -907,7 +1005,7 @@ select.form-control {
   text-align: left;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.04) inset;
 }
-/* line 795, ../sass/default.scss */
+/* line 880, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step0 .box-add-yours:before {
   content: "";
   width: 0;
@@ -920,19 +1018,19 @@ select.form-control {
   top: -10px;
   margin: 0 0 0 -5px;
 }
-/* line 807, ../sass/default.scss */
+/* line 892, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step0 .box-add-yours label {
   display: block;
   font-size: 18px;
   font-weight: 400;
   margin: 0 0 10px;
 }
-/* line 813, ../sass/default.scss */
+/* line 898, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step0 .box-add-yours .text-add-info {
   resize: none;
   margin: 0 0 20px;
 }
-/* line 818, ../sass/default.scss */
+/* line 903, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step0 .box-add-yours .line-add:after {
   content: ".";
   display: block;
@@ -940,7 +1038,7 @@ select.form-control {
   clear: both;
   visibility: hidden;
 }
-/* line 825, ../sass/default.scss */
+/* line 910, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step0 .box-add-yours .line-add .notice-text {
   float: right;
   width: calc(100% - 80px);
@@ -950,14 +1048,14 @@ select.form-control {
   color: #888;
   letter-spacing: 0.02em;
 }
-/* line 837, ../sass/default.scss */
+/* line 922, ../sass/default.scss */
 .cp-main .cp-content .cp-progress {
   position: relative;
   height: 60px;
   margin: 50px auto;
   width: 60%;
 }
-/* line 842, ../sass/default.scss */
+/* line 927, ../sass/default.scss */
 .cp-main .cp-content .cp-progress .tag-step {
   display: block;
   position: relative;
@@ -967,7 +1065,7 @@ select.form-control {
   font-size: 12px;
   border-radius: 4px;
 }
-/* line 850, ../sass/default.scss */
+/* line 935, ../sass/default.scss */
 .cp-main .cp-content .cp-progress .tag-step:before {
   content: "";
   width: 0;
@@ -980,12 +1078,12 @@ select.form-control {
   top: -6px;
   margin: 0 0 0 -6px;
 }
-/* line 862, ../sass/default.scss */
+/* line 947, ../sass/default.scss */
 .cp-main .cp-content .cp-progress .tag-step.active {
   background: #337ab7;
   color: #fff;
 }
-/* line 865, ../sass/default.scss */
+/* line 950, ../sass/default.scss */
 .cp-main .cp-content .cp-progress .tag-step.active:before {
   content: "";
   width: 0;
@@ -998,30 +1096,30 @@ select.form-control {
   top: -6px;
   margin: 0 0 0 -6px;
 }
-/* line 879, ../sass/default.scss */
+/* line 964, ../sass/default.scss */
 .cp-main .cp-content .cp-progress .step1 {
   position: absolute;
   left: -4px;
 }
-/* line 883, ../sass/default.scss */
+/* line 968, ../sass/default.scss */
 .cp-main .cp-content .cp-progress .step2 {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
 }
-/* line 888, ../sass/default.scss */
+/* line 973, ../sass/default.scss */
 .cp-main .cp-content .cp-progress .step3 {
   position: absolute;
   right: -10px;
 }
-/* line 893, ../sass/default.scss */
+/* line 978, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 {
   width: 80%;
   margin: 0 auto;
   position: relative;
   overflow: hidden;
 }
-/* line 899, ../sass/default.scss */
+/* line 984, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form {
   border-radius: 4px;
   border: 1px solid #ddd;
@@ -1029,15 +1127,15 @@ select.form-control {
   position: relative;
   padding: 0 0 64px;
 }
-/* line 906, ../sass/default.scss */
+/* line 991, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form.form2 {
   display: none;
 }
-/* line 909, ../sass/default.scss */
+/* line 994, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form.form3 {
   display: none;
 }
-/* line 912, ../sass/default.scss */
+/* line 997, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .form-title {
   border-bottom: 1px solid #ddd;
   margin: 0 20px 30px;
@@ -1046,7 +1144,7 @@ select.form-control {
   color: #666;
   padding: 20px 0;
 }
-/* line 920, ../sass/default.scss */
+/* line 1005, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .form-sub-title {
   font-size: 18px;
   color: #888;
@@ -1054,7 +1152,7 @@ select.form-control {
   margin: 0;
   position: relative;
 }
-/* line 926, ../sass/default.scss */
+/* line 1011, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .form-sub-title:before {
   content: "";
   height: 100%;
@@ -1066,13 +1164,13 @@ select.form-control {
   display: block;
   border-radius: 4px;
 }
-/* line 938, ../sass/default.scss */
+/* line 1023, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .default-mod-list {
   margin: 0;
   list-style: none;
   padding: 0;
 }
-/* line 942, ../sass/default.scss */
+/* line 1027, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .default-mod-list .item-mod {
   border: 1px solid #ddd;
   border-radius: 4px;
@@ -1084,7 +1182,7 @@ select.form-control {
   vertical-align: top;
   overflow: hidden;
 }
-/* line 952, ../sass/default.scss */
+/* line 1037, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .default-mod-list .item-mod:before {
   width: 20px;
   height: 20px;
@@ -1095,25 +1193,25 @@ select.form-control {
   top: -10px;
   transform: rotate(-45deg);
 }
-/* line 962, ../sass/default.scss */
+/* line 1047, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .default-mod-list .item-mod:nth-child(3), .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .default-mod-list .item-mod:nth-child(6) {
   margin: 0 0 10px;
 }
-/* line 965, ../sass/default.scss */
+/* line 1050, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .default-mod-list .item-mod .mod-name {
   font-size: 18px;
   display: block;
 }
-/* line 970, ../sass/default.scss */
+/* line 1055, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .default-mod-list .item-mod .mod-info {
   font-size: 13px;
   color: #aaa;
 }
-/* line 976, ../sass/default.scss */
+/* line 1061, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .box-drop {
   display: flex;
 }
-/* line 978, ../sass/default.scss */
+/* line 1063, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .box-drop .additional-mod-list {
   flex: 1;
   width: 50%;
@@ -1125,11 +1223,11 @@ select.form-control {
   position: relative;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.05) inset;
 }
-/* line 988, ../sass/default.scss */
+/* line 1073, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .box-drop .additional-mod-list .item-mod {
   margin: 0 0 15px;
 }
-/* line 990, ../sass/default.scss */
+/* line 1075, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .box-drop .additional-mod-list .item-mod span {
   background: rgba(255, 255, 255, 0.5);
   border: 1px solid rgba(0, 0, 0, 0.1);
@@ -1137,22 +1235,22 @@ select.form-control {
   border: 1px solid #ddd;
   border-radius: 4px;
   color: #337ab7;
-  padding: 5px 10px 5px 23px;
+  padding: 8px 10px 8px 23px;
   position: relative;
   cursor: pointer;
 }
-/* line 1000, ../sass/default.scss */
+/* line 1085, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .box-drop .additional-mod-list .item-mod span:before {
   content: "";
-  height: calc(100% - 10px);
+  height: calc(100% - 19px);
   position: absolute;
   left: 10px;
-  top: 5px;
+  top: 10px;
   width: 4px;
   background: #337ab7;
   display: block;
 }
-/* line 1014, ../sass/default.scss */
+/* line 1099, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .box-drop .selected-mod-list {
   flex: 1;
   width: 50%;
@@ -1164,7 +1262,7 @@ select.form-control {
   position: relative;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.05) inset;
 }
-/* line 1024, ../sass/default.scss */
+/* line 1109, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .box-drop .selected-mod-list:empty:before {
   content: "Drop item here to select";
   position: absolute;
@@ -1176,11 +1274,11 @@ select.form-control {
   width: 100%;
   text-align: center;
 }
-/* line 1035, ../sass/default.scss */
+/* line 1120, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .box-drop .selected-mod-list .item-mod {
   margin: 0 0 15px;
 }
-/* line 1037, ../sass/default.scss */
+/* line 1122, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .box-drop .selected-mod-list .item-mod span {
   background: rgba(255, 255, 255, 0.5);
   border: 1px solid rgba(0, 0, 0, 0.1);
@@ -1188,26 +1286,26 @@ select.form-control {
   border: 1px solid #ddd;
   border-radius: 4px;
   color: #337ab7;
-  padding: 5px 10px 5px 23px;
+  padding: 8px 10px 8px 23px;
   position: relative;
   cursor: pointer;
 }
-/* line 1047, ../sass/default.scss */
+/* line 1132, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .box-drop .selected-mod-list .item-mod span:before {
   content: "";
-  height: calc(100% - 10px);
+  height: calc(100% - 19px);
   position: absolute;
   left: 10px;
-  top: 5px;
+  top: 10px;
   width: 4px;
   background: #337ab7;
   display: block;
 }
-/* line 1062, ../sass/default.scss */
+/* line 1147, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .line-add {
   margin: 0 20px 20px;
 }
-/* line 1064, ../sass/default.scss */
+/* line 1149, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .line-add:after {
   content: ".";
   display: block;
@@ -1215,22 +1313,23 @@ select.form-control {
   clear: both;
   visibility: hidden;
 }
-/* line 1071, ../sass/default.scss */
+/* line 1156, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .line-add label {
+  color: #666;
   float: left;
   width: 25%;
   font-size: 18px;
   font-weight: 400;
   line-height: 1;
-  padding: 8px 0;
+  padding: 8px 8px 8px 0;
   text-align: left;
 }
-/* line 1080, ../sass/default.scss */
+/* line 1166, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .line-add .form-control {
   float: right;
   width: 75%;
 }
-/* line 1084, ../sass/default.scss */
+/* line 1170, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .line-add.box-buttons {
   position: absolute;
   left: 0;
@@ -1239,14 +1338,14 @@ select.form-control {
   text-align: center;
   margin: 0;
 }
-/* line 1091, ../sass/default.scss */
+/* line 1177, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .line-add.box-buttons .btn {
   width: 160px;
   display: inline-block;
   margin: 0 50px;
   float: none;
 }
-/* line 1101, ../sass/default.scss */
+/* line 1187, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .line-add .title-custom-check {
   display: inline-block;
   float: none;
@@ -1255,38 +1354,38 @@ select.form-control {
   color: #888;
   margin: 0 0 10px;
 }
-/* line 1110, ../sass/default.scss */
+/* line 1196, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .line-add .custom-check {
   margin: 9px 5px 0 0;
   display: inline-block;
   vertical-align: top;
 }
-/* line 1115, ../sass/default.scss */
+/* line 1201, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .line-add .custom-check2 {
   margin: 9px 5px 0 0;
   display: inline-block;
   vertical-align: top;
 }
-/* line 1120, ../sass/default.scss */
+/* line 1206, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .line-add .custom-module-detail {
   float: none;
   width: 100%;
   resize: none;
 }
-/* line 1125, ../sass/default.scss */
+/* line 1211, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .line-add .custom-template-detail {
   float: none;
   width: 100%;
   resize: none;
 }
-/* line 1130, ../sass/default.scss */
+/* line 1216, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .line-add .text-line {
   display: block;
   font-size: 18px;
   color: #888;
   margin: 0 0 10px;
 }
-/* line 1136, ../sass/default.scss */
+/* line 1222, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .line-add .title-rwd-check {
   display: inline-block;
   float: none;
@@ -1295,13 +1394,13 @@ select.form-control {
   color: #888;
   margin: 0 0 10px;
 }
-/* line 1145, ../sass/default.scss */
+/* line 1231, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .line-add .rwd-check {
   margin: 9px 5px 0 0;
   display: inline-block;
   vertical-align: top;
 }
-/* line 1151, ../sass/default.scss */
+/* line 1237, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .box-check-host {
   display: none;
   clear: both;
@@ -1312,23 +1411,23 @@ select.form-control {
   border-radius: 4px;
   padding: 20px;
 }
-/* line 1160, ../sass/default.scss */
+/* line 1246, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .box-check-host .text-check {
   color: #666;
   display: block;
   margin: 0 0 10px;
 }
-/* line 1165, ../sass/default.scss */
+/* line 1251, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .box-check-host .line-check-host {
   margin: 0 0 20px;
 }
-/* line 1167, ../sass/default.scss */
+/* line 1253, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .box-check-host .line-check-host input[type="radio"] {
   display: inline-block;
   margin: 0;
   vertical-align: middle;
 }
-/* line 1172, ../sass/default.scss */
+/* line 1258, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .box-check-host .line-check-host label {
   display: inline-block;
   float: none;
@@ -1338,37 +1437,49 @@ select.form-control {
   vertical-align: middle;
   margin: 0;
 }
-/* line 1181, ../sass/default.scss */
+/* line 1266, ../sass/default.scss */
+.cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .box-check-host .line-check-host label.left {
+  float: left;
+  line-height: 34px;
+  padding: 0 10px 0 0;
+}
+/* line 1273, ../sass/default.scss */
+.cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .box-check-host .line-check-host select.form-control.left {
+  float: left;
+  width: auto;
+  min-width: 100px;
+}
+/* line 1279, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .box-check-host .line-check-host .form-control {
   float: none;
   width: 100%;
 }
-/* line 1185, ../sass/default.scss */
+/* line 1283, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .box-check-host .line-check-host textarea {
   resize: none;
 }
-/* line 1188, ../sass/default.scss */
+/* line 1286, ../sass/default.scss */
 .cp-main .cp-content .cp-addsite-step1 .box-addsite-forms .box-form .box-check-host .line-check-host .text-check {
   color: #666;
   display: block;
   margin: 0 0 10px;
   padding: 0;
 }
-/* line 1199, ../sass/default.scss */
+/* line 1297, ../sass/default.scss */
 .cp-main .cp-content .box-add-yours {
   display: none;
 }
-/* line 1202, ../sass/default.scss */
+/* line 1300, ../sass/default.scss */
 .cp-main .cp-content .cp-profile-setting {
   padding: 40px 0;
 }
-/* line 1204, ../sass/default.scss */
+/* line 1302, ../sass/default.scss */
 .cp-main .cp-content .cp-profile-setting .line-profile {
   display: block;
   margin: 0 auto 30px;
   width: 80%;
 }
-/* line 1208, ../sass/default.scss */
+/* line 1306, ../sass/default.scss */
 .cp-main .cp-content .cp-profile-setting .line-profile:after {
   content: ".";
   display: block;
@@ -1376,7 +1487,7 @@ select.form-control {
   clear: both;
   visibility: hidden;
 }
-/* line 1215, ../sass/default.scss */
+/* line 1313, ../sass/default.scss */
 .cp-main .cp-content .cp-profile-setting .line-profile label {
   float: left;
   width: 25%;
@@ -1385,38 +1496,38 @@ select.form-control {
   line-height: 1;
   padding: 8px 0;
 }
-/* line 1223, ../sass/default.scss */
+/* line 1321, ../sass/default.scss */
 .cp-main .cp-content .cp-profile-setting .line-profile input {
   float: right;
   width: 75%;
 }
-/* line 1227, ../sass/default.scss */
+/* line 1325, ../sass/default.scss */
 .cp-main .cp-content .cp-profile-setting .line-profile textarea {
   float: right;
   width: 75%;
   min-height: 10em;
   resize: none;
 }
-/* line 1233, ../sass/default.scss */
+/* line 1331, ../sass/default.scss */
 .cp-main .cp-content .cp-profile-setting .line-profile .link-profile {
   display: block;
   text-align: center;
 }
-/* line 1237, ../sass/default.scss */
+/* line 1335, ../sass/default.scss */
 .cp-main .cp-content .cp-profile-setting .line-profile .pull-r {
   float: right;
   width: 75%;
   text-align: center;
 }
-/* line 1243, ../sass/default.scss */
+/* line 1341, ../sass/default.scss */
 .cp-main .cp-content .cp-profile-setting .line-profile .pull-r .btn {
   width: 100%;
 }
-/* line 1248, ../sass/default.scss */
+/* line 1346, ../sass/default.scss */
 .cp-main .cp-content .cp-function-box {
   margin: 0 0 30px;
 }
-/* line 1250, ../sass/default.scss */
+/* line 1348, ../sass/default.scss */
 .cp-main .cp-content .cp-function-box:after {
   content: ".";
   display: block;
@@ -1424,32 +1535,32 @@ select.form-control {
   clear: both;
   visibility: hidden;
 }
-/* line 1257, ../sass/default.scss */
+/* line 1355, ../sass/default.scss */
 .cp-main .cp-content .cp-function-box .pull-right {
   margin: 0 0 0 10px;
 }
-/* line 1260, ../sass/default.scss */
+/* line 1358, ../sass/default.scss */
 .cp-main .cp-content .cp-function-box .btn-gray {
   color: #333;
   background: #eee;
   border-color: #ccc;
 }
-/* line 1264, ../sass/default.scss */
+/* line 1362, ../sass/default.scss */
 .cp-main .cp-content .cp-function-box .btn-gray:hover {
   background: #ddd;
 }
-/* line 1268, ../sass/default.scss */
+/* line 1366, ../sass/default.scss */
 .cp-main .cp-content .cp-function-box label {
   color: #666;
   margin-right: 10px;
   margin-bottom: 5px;
 }
-/* line 1273, ../sass/default.scss */
+/* line 1371, ../sass/default.scss */
 .cp-main .cp-content .cp-function-box .cp-search-box {
   float: left;
   width: 70%;
 }
-/* line 1276, ../sass/default.scss */
+/* line 1374, ../sass/default.scss */
 .cp-main .cp-content .cp-function-box .cp-search-box:after {
   content: ".";
   display: block;
@@ -1457,7 +1568,7 @@ select.form-control {
   clear: both;
   visibility: hidden;
 }
-/* line 1284, ../sass/default.scss */
+/* line 1382, ../sass/default.scss */
 .cp-main .cp-content .cp-function-box .cp-search-box form:after {
   content: ".";
   display: block;
@@ -1465,39 +1576,39 @@ select.form-control {
   clear: both;
   visibility: hidden;
 }
-/* line 1291, ../sass/default.scss */
+/* line 1389, ../sass/default.scss */
 .cp-main .cp-content .cp-function-box .cp-search-box form > * {
   float: left;
   margin: 0 2% 0 0;
 }
-/* line 1294, ../sass/default.scss */
+/* line 1392, ../sass/default.scss */
 .cp-main .cp-content .cp-function-box .cp-search-box form > *:last-child {
   margin: 0;
 }
-/* line 1299, ../sass/default.scss */
+/* line 1397, ../sass/default.scss */
 .cp-main .cp-content .cp-function-box .cp-search-box .cp-select {
   width: 28%;
 }
-/* line 1302, ../sass/default.scss */
+/* line 1400, ../sass/default.scss */
 .cp-main .cp-content .cp-function-box .cp-search-box .cp-input {
   width: calc(68% - 120px);
 }
-/* line 1305, ../sass/default.scss */
+/* line 1403, ../sass/default.scss */
 .cp-main .cp-content .cp-function-box .cp-search-box .cp-submit {
   width: 40px;
   margin: 0 10px 0 0;
 }
-/* line 1309, ../sass/default.scss */
+/* line 1407, ../sass/default.scss */
 .cp-main .cp-content .cp-function-box .cp-search-box .cp-reset {
   width: 70px;
 }
-/* line 1313, ../sass/default.scss */
+/* line 1411, ../sass/default.scss */
 .cp-main .cp-content .cp-function-box.bottom {
   position: absolute;
   right: 30px;
   bottom: 0;
 }
-/* line 1319, ../sass/default.scss */
+/* line 1417, ../sass/default.scss */
 .cp-main .cp-content .cp-message-box {
   border: 1px solid #ddd;
   border-radius: 4px;
@@ -1506,28 +1617,28 @@ select.form-control {
   margin: 0 0 20px;
   text-align: center;
 }
-/* line 1328, ../sass/default.scss */
+/* line 1426, ../sass/default.scss */
 .cp-main .cp-content .cp-loading-box {
   padding: 40px 0;
   text-align: center;
 }
-/* line 1331, ../sass/default.scss */
+/* line 1429, ../sass/default.scss */
 .cp-main .cp-content .cp-loading-box .loading-text {
   color: #888;
   display: block;
   margin: 0 0 20px;
 }
-/* line 1336, ../sass/default.scss */
+/* line 1434, ../sass/default.scss */
 .cp-main .cp-content .cp-loading-box .fa {
   color: #ccc;
 }
-/* line 1340, ../sass/default.scss */
+/* line 1438, ../sass/default.scss */
 .cp-main .cp-content .list-servers {
   margin: 0 0 20px;
   padding: 0;
   list-style: none;
 }
-/* line 1344, ../sass/default.scss */
+/* line 1442, ../sass/default.scss */
 .cp-main .cp-content .list-servers .item-servers {
   border: 1px solid #ddd;
   padding: 10px 0 0;
@@ -1536,11 +1647,11 @@ select.form-control {
   border-radius: 4px;
   box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.05) inset;
 }
-/* line 1351, ../sass/default.scss */
+/* line 1449, ../sass/default.scss */
 .cp-main .cp-content .list-servers .item-servers:last-child {
   margin: 0;
 }
-/* line 1354, ../sass/default.scss */
+/* line 1452, ../sass/default.scss */
 .cp-main .cp-content .list-servers .item-servers .name-server {
   display: block;
   border-bottom: 1px solid #ddd;
@@ -1549,18 +1660,18 @@ select.form-control {
   text-transform: uppercase;
   font-size: 18px;
 }
-/* line 1362, ../sass/default.scss */
+/* line 1460, ../sass/default.scss */
 .cp-main .cp-content .list-servers .item-servers .info-server {
   margin: 0 0 10px;
 }
-/* line 1364, ../sass/default.scss */
+/* line 1462, ../sass/default.scss */
 .cp-main .cp-content .list-servers .item-servers .info-server .address-server {
   display: block;
   text-decoration: none;
   margin: 0 0 10px;
   padding: 0 10px;
 }
-/* line 1369, ../sass/default.scss */
+/* line 1467, ../sass/default.scss */
 .cp-main .cp-content .list-servers .item-servers .info-server .address-server a {
   display: block;
   position: relative;
@@ -1568,7 +1679,7 @@ select.form-control {
   word-wrap: break-word;
   word-break: break-all;
 }
-/* line 1375, ../sass/default.scss */
+/* line 1473, ../sass/default.scss */
 .cp-main .cp-content .list-servers .item-servers .info-server .address-server a .fa {
   color: #888;
   font-size: 12px;
@@ -1576,7 +1687,7 @@ select.form-control {
   left: 0;
   top: 7px;
 }
-/* line 1384, ../sass/default.scss */
+/* line 1482, ../sass/default.scss */
 .cp-main .cp-content .list-servers .item-servers .info-server .regdate-server {
   display: block;
   font-size: 13px;
@@ -1584,12 +1695,12 @@ select.form-control {
   padding: 0 10px 0 32px;
   position: relative;
 }
-/* line 1390, ../sass/default.scss */
+/* line 1488, ../sass/default.scss */
 .cp-main .cp-content .list-servers .item-servers .info-server .regdate-server a {
   word-wrap: break-word;
   word-break: break-all;
 }
-/* line 1394, ../sass/default.scss */
+/* line 1492, ../sass/default.scss */
 .cp-main .cp-content .list-servers .item-servers .info-server .regdate-server .fa {
   color: #888;
   font-size: 12px;
@@ -1597,7 +1708,7 @@ select.form-control {
   left: 11px;
   top: 3px;
 }
-/* line 1403, ../sass/default.scss */
+/* line 1501, ../sass/default.scss */
 .cp-main .cp-content .list-servers .item-servers .status-server {
   position: absolute;
   right: -1px;
@@ -1609,15 +1720,15 @@ select.form-control {
   border-radius: 0 4px 0 4px;
   box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.05) inset;
 }
-/* line 1413, ../sass/default.scss */
+/* line 1511, ../sass/default.scss */
 .cp-main .cp-content .list-servers .item-servers .status-server.online {
   background: #5cb85c;
 }
-/* line 1416, ../sass/default.scss */
+/* line 1514, ../sass/default.scss */
 .cp-main .cp-content .list-servers .item-servers .status-server.offline {
   background: #d9534f;
 }
-/* line 1420, ../sass/default.scss */
+/* line 1518, ../sass/default.scss */
 .cp-main .cp-content .list-servers .item-servers .action-server {
   background: rgba(0, 0, 0, 0.02);
   padding: 10px;
@@ -1625,28 +1736,34 @@ select.form-control {
   width: 100%;
   display: block;
   text-align: right;
+  min-height: 55px;
 }
-/* line 1427, ../sass/default.scss */
+/* line 1526, ../sass/default.scss */
 .cp-main .cp-content .list-servers .item-servers .action-server a {
   margin: 0 0 0 6px;
 }
-/* line 1430, ../sass/default.scss */
-.cp-main .cp-content .list-servers .item-servers .action-server .btn-gray {
-  color: #333;
-  background: #eee;
-  border-color: #ccc;
+/* line 1529, ../sass/default.scss */
+.cp-main .cp-content .list-servers .item-servers .action-server .btn {
+  background: #fff;
+  border: 1px solid #ddd;
+  color: #222;
+  box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.05) inset;
 }
-/* line 1434, ../sass/default.scss */
-.cp-main .cp-content .list-servers .item-servers .action-server .btn-gray:hover {
-  background: #ddd;
+/* line 1534, ../sass/default.scss */
+.cp-main .cp-content .list-servers .item-servers .action-server .btn:hover {
+  background: rgba(0, 0, 0, 0.02);
 }
-/* line 1441, ../sass/default.scss */
+/* line 1537, ../sass/default.scss */
+.cp-main .cp-content .list-servers .item-servers .action-server .btn:active {
+  box-shadow: none;
+}
+/* line 1544, ../sass/default.scss */
 .cp-main .cp-content .list-ticket {
   margin: 0 0 20px;
   padding: 0;
   list-style: none;
 }
-/* line 1445, ../sass/default.scss */
+/* line 1548, ../sass/default.scss */
 .cp-main .cp-content .list-ticket li {
   border: 1px solid #ddd;
   padding: 10px 0 0;
@@ -1655,7 +1772,7 @@ select.form-control {
   border-radius: 4px;
   box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.05) inset;
 }
-/* line 1452, ../sass/default.scss */
+/* line 1555, ../sass/default.scss */
 .cp-main .cp-content .list-ticket li:after {
   content: ".";
   display: block;
@@ -1663,15 +1780,15 @@ select.form-control {
   clear: both;
   visibility: hidden;
 }
-/* line 1459, ../sass/default.scss */
+/* line 1562, ../sass/default.scss */
 .cp-main .cp-content .list-ticket li:last-child {
   margin: 0;
 }
-/* line 1464, ../sass/default.scss */
+/* line 1567, ../sass/default.scss */
 .cp-main .cp-content .list-ticket li .fa {
   margin: 0 10px 0 0;
 }
-/* line 1467, ../sass/default.scss */
+/* line 1570, ../sass/default.scss */
 .cp-main .cp-content .list-ticket li .subject-ticket {
   display: block;
   border-bottom: 1px solid #ddd;
@@ -1680,11 +1797,11 @@ select.form-control {
   text-transform: uppercase;
   font-size: 18px;
 }
-/* line 1475, ../sass/default.scss */
+/* line 1578, ../sass/default.scss */
 .cp-main .cp-content .list-ticket li .info-ticket {
   margin: 0 0 10px;
 }
-/* line 1477, ../sass/default.scss */
+/* line 1580, ../sass/default.scss */
 .cp-main .cp-content .list-ticket li .info-ticket:after {
   content: ".";
   display: block;
@@ -1692,7 +1809,7 @@ select.form-control {
   clear: both;
   visibility: hidden;
 }
-/* line 1484, ../sass/default.scss */
+/* line 1587, ../sass/default.scss */
 .cp-main .cp-content .list-ticket li .info-ticket .number-ticket {
   float: left;
   padding: 0 10px;
@@ -1700,7 +1817,7 @@ select.form-control {
   font-size: 13px;
   line-height: 34px;
 }
-/* line 1491, ../sass/default.scss */
+/* line 1594, ../sass/default.scss */
 .cp-main .cp-content .list-ticket li .info-ticket .type-ticket {
   float: left;
   padding: 0 10px;
@@ -1708,7 +1825,7 @@ select.form-control {
   font-size: 13px;
   line-height: 34px;
 }
-/* line 1498, ../sass/default.scss */
+/* line 1601, ../sass/default.scss */
 .cp-main .cp-content .list-ticket li .info-ticket .time-ticket {
   float: left;
   padding: 0 10px;
@@ -1716,7 +1833,7 @@ select.form-control {
   font-size: 13px;
   line-height: 34px;
 }
-/* line 1507, ../sass/default.scss */
+/* line 1610, ../sass/default.scss */
 .cp-main .cp-content .list-ticket li .status-ticket {
   position: absolute;
   right: -1px;
@@ -1728,19 +1845,19 @@ select.form-control {
   border-radius: 0 4px 0 4px;
   box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.05) inset;
 }
-/* line 1517, ../sass/default.scss */
+/* line 1620, ../sass/default.scss */
 .cp-main .cp-content .list-ticket li .status-ticket.tk-open {
   background: #5cb85c;
 }
-/* line 1520, ../sass/default.scss */
+/* line 1623, ../sass/default.scss */
 .cp-main .cp-content .list-ticket li .status-ticket.tk-close {
   background: #888888;
 }
-/* line 1523, ../sass/default.scss */
+/* line 1626, ../sass/default.scss */
 .cp-main .cp-content .list-ticket li .status-ticket.tk-processing {
   background: #9f57b9;
 }
-/* line 1527, ../sass/default.scss */
+/* line 1630, ../sass/default.scss */
 .cp-main .cp-content .list-ticket li .action-ticket {
   background: rgba(0, 0, 0, 0.02);
   padding: 10px;
@@ -1748,22 +1865,28 @@ select.form-control {
   width: 100%;
   display: block;
   text-align: right;
+  min-height: 55px;
 }
-/* line 1534, ../sass/default.scss */
+/* line 1638, ../sass/default.scss */
 .cp-main .cp-content .list-ticket li .action-ticket a {
   margin: 0 0 0 6px;
 }
-/* line 1537, ../sass/default.scss */
-.cp-main .cp-content .list-ticket li .action-ticket .btn-gray {
-  color: #333;
-  background: #eee;
-  border-color: #ccc;
+/* line 1641, ../sass/default.scss */
+.cp-main .cp-content .list-ticket li .action-ticket .btn {
+  background: #fff;
+  border: 1px solid #ddd;
+  color: #222;
+  box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.05) inset;
 }
-/* line 1541, ../sass/default.scss */
-.cp-main .cp-content .list-ticket li .action-ticket .btn-gray:hover {
-  background: #ddd;
+/* line 1646, ../sass/default.scss */
+.cp-main .cp-content .list-ticket li .action-ticket .btn:hover {
+  background: rgba(0, 0, 0, 0.02);
 }
-/* line 1548, ../sass/default.scss */
+/* line 1649, ../sass/default.scss */
+.cp-main .cp-content .list-ticket li .action-ticket .btn:active {
+  box-shadow: none;
+}
+/* line 1656, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket {
   border: 1px solid #ddd;
   padding: 10px 0 0;
@@ -1772,7 +1895,7 @@ select.form-control {
   border-radius: 4px;
   box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.05) inset;
 }
-/* line 1555, ../sass/default.scss */
+/* line 1663, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket:after {
   content: ".";
   display: block;
@@ -1780,19 +1903,19 @@ select.form-control {
   clear: both;
   visibility: hidden;
 }
-/* line 1562, ../sass/default.scss */
+/* line 1670, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket:last-child {
   margin: 0;
 }
-/* line 1567, ../sass/default.scss */
+/* line 1675, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .header-comments {
   border-bottom: 1px solid #ddd;
 }
-/* line 1569, ../sass/default.scss */
+/* line 1677, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .header-comments .fa {
   margin: 0 10px 0 0;
 }
-/* line 1572, ../sass/default.scss */
+/* line 1680, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .header-comments .subject-ticket {
   display: block;
   border-bottom: 1px solid #ddd;
@@ -1801,11 +1924,11 @@ select.form-control {
   text-transform: uppercase;
   font-size: 18px;
 }
-/* line 1580, ../sass/default.scss */
+/* line 1688, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .header-comments .info-ticket {
   margin: 0 0 10px;
 }
-/* line 1582, ../sass/default.scss */
+/* line 1690, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .header-comments .info-ticket:after {
   content: ".";
   display: block;
@@ -1813,7 +1936,7 @@ select.form-control {
   clear: both;
   visibility: hidden;
 }
-/* line 1589, ../sass/default.scss */
+/* line 1697, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .header-comments .info-ticket .number-ticket {
   float: left;
   padding: 0 10px;
@@ -1821,7 +1944,7 @@ select.form-control {
   font-size: 13px;
   line-height: 34px;
 }
-/* line 1596, ../sass/default.scss */
+/* line 1704, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .header-comments .info-ticket .type-ticket {
   float: left;
   padding: 0 10px;
@@ -1829,7 +1952,7 @@ select.form-control {
   font-size: 13px;
   line-height: 34px;
 }
-/* line 1603, ../sass/default.scss */
+/* line 1711, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .header-comments .info-ticket .time-ticket {
   float: left;
   padding: 0 10px;
@@ -1837,7 +1960,7 @@ select.form-control {
   font-size: 13px;
   line-height: 34px;
 }
-/* line 1612, ../sass/default.scss */
+/* line 1720, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .header-comments .status-ticket {
   position: absolute;
   right: -1px;
@@ -1849,27 +1972,27 @@ select.form-control {
   border-radius: 0 4px 0 4px;
   box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.05) inset;
 }
-/* line 1622, ../sass/default.scss */
+/* line 1730, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .header-comments .status-ticket.tk-open {
   background: #5cb85c;
 }
-/* line 1625, ../sass/default.scss */
+/* line 1733, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .header-comments .status-ticket.tk-close {
   background: #888888;
 }
-/* line 1628, ../sass/default.scss */
+/* line 1736, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .header-comments .status-ticket.tk-processing {
   background: #9f57b9;
 }
-/* line 1633, ../sass/default.scss */
+/* line 1741, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .comments-group {
   border-bottom: 40px solid #eee;
 }
-/* line 1635, ../sass/default.scss */
+/* line 1743, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .comments-group:last-child {
   border-bottom: 0;
 }
-/* line 1638, ../sass/default.scss */
+/* line 1746, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .comments-group .post-comments {
   color: #888;
   padding: 20px 30px 30px;
@@ -1877,32 +2000,32 @@ select.form-control {
   text-align: justify;
   line-height: 2;
 }
-/* line 1644, ../sass/default.scss */
+/* line 1752, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .comments-group .post-comments a {
   color: #337ab7;
   text-decoration: underline;
   word-wrap: break-word;
   word-break: break-all;
 }
-/* line 1650, ../sass/default.scss */
+/* line 1758, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .comments-group .post-comments p {
   text-align: justify;
   line-height: 2;
 }
-/* line 1654, ../sass/default.scss */
+/* line 1762, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .comments-group .post-comments br {
   content: "";
   clear: both;
   display: block;
   margin: 0 0 10px;
 }
-/* line 1660, ../sass/default.scss */
+/* line 1768, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .comments-group .post-comments img {
   max-width: 100%;
   height: auto;
   margin: 0 0 20px;
 }
-/* line 1667, ../sass/default.scss */
+/* line 1775, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .comments-group .talk-comments .box-talk {
   margin: 0 30px 30px;
   border: 1px solid #ddd;
@@ -1912,7 +2035,7 @@ select.form-control {
   overflow: hidden;
   background: rgba(0, 0, 0, 0.015);
 }
-/* line 1676, ../sass/default.scss */
+/* line 1784, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .comments-group .talk-comments .box-talk .header-talk .talk-title {
   background: #337ab7;
   color: #fff;
@@ -1923,7 +2046,7 @@ select.form-control {
   position: relative;
   padding: 10px 10px 10px 35px;
 }
-/* line 1685, ../sass/default.scss */
+/* line 1793, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .comments-group .talk-comments .box-talk .header-talk .talk-title .fa {
   font-size: 18px;
   line-height: 20px;
@@ -1934,22 +2057,22 @@ select.form-control {
   padding: 0;
   margin: 0;
 }
-/* line 1697, ../sass/default.scss */
+/* line 1805, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .comments-group .talk-comments .box-talk .response-talk {
   border-bottom: 1px solid #ddd;
   margin: 0 0 20px;
 }
-/* line 1700, ../sass/default.scss */
+/* line 1808, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .comments-group .talk-comments .box-talk .response-talk:last-child {
   border-bottom: 0;
   margin: 0;
 }
-/* line 1704, ../sass/default.scss */
+/* line 1812, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .comments-group .talk-comments .box-talk .response-talk .author-talk {
   padding: 10px 30px;
   position: relative;
 }
-/* line 1707, ../sass/default.scss */
+/* line 1815, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .comments-group .talk-comments .box-talk .response-talk .author-talk .pic-author {
   height: 30px;
   width: 30px;
@@ -1959,19 +2082,19 @@ select.form-control {
   margin: 0 10px 0 0;
   vertical-align: middle;
 }
-/* line 1716, ../sass/default.scss */
+/* line 1824, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .comments-group .talk-comments .box-talk .response-talk .author-talk .pic-author img {
   height: 100%;
   width: auto;
   margin: 0 0 20px;
 }
-/* line 1721, ../sass/default.scss */
+/* line 1829, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .comments-group .talk-comments .box-talk .response-talk .author-talk .name-author {
   font-size: 18px;
   display: inline-block;
   vertical-align: middle;
 }
-/* line 1726, ../sass/default.scss */
+/* line 1834, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .comments-group .talk-comments .box-talk .response-talk .author-talk .time-author {
   display: inline-block;
   vertical-align: middle;
@@ -1982,7 +2105,7 @@ select.form-control {
   font-size: 13px;
   line-height: 18px;
 }
-/* line 1735, ../sass/default.scss */
+/* line 1843, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .comments-group .talk-comments .box-talk .response-talk .author-talk .time-author:before {
   content: "";
   width: 8px;
@@ -1992,7 +2115,7 @@ select.form-control {
   left: 5px;
   top: 8px;
 }
-/* line 1746, ../sass/default.scss */
+/* line 1854, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .comments-group .talk-comments .box-talk .response-talk .text-talk {
   padding: 10px 30px;
   color: #888;
@@ -2000,7 +2123,7 @@ select.form-control {
   line-height: 2;
   margin: 0 0 20px;
 }
-/* line 1752, ../sass/default.scss */
+/* line 1860, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .comments-group .talk-comments .box-talk .response-talk .text-talk a {
   color: #337ab7;
   text-decoration: underline;
@@ -2009,25 +2132,25 @@ select.form-control {
   font-size: 14px;
   line-height: 2;
 }
-/* line 1760, ../sass/default.scss */
+/* line 1868, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .comments-group .talk-comments .box-talk .response-talk .text-talk p {
   text-align: justify;
   line-height: 2;
 }
-/* line 1764, ../sass/default.scss */
+/* line 1872, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .comments-group .talk-comments .box-talk .response-talk .text-talk br {
   content: "";
   clear: both;
   display: block;
   margin: 0 0 10px;
 }
-/* line 1770, ../sass/default.scss */
+/* line 1878, ../sass/default.scss */
 .cp-main .cp-content .cp-comments-ticket .comments-group .talk-comments .box-talk .response-talk .text-talk img {
   max-width: 100%;
   height: auto;
   margin: 0 0 20px;
 }
-/* line 1784, ../sass/default.scss */
+/* line 1892, ../sass/default.scss */
 .cp-main .cp-login-page .cp-login-box {
   background: rgba(0, 0, 0, 0.02);
   border-radius: 4px;
@@ -2037,14 +2160,14 @@ select.form-control {
   border: 1px solid #ddd;
   padding: 40px;
 }
-/* line 1792, ../sass/default.scss */
+/* line 1900, ../sass/default.scss */
 .cp-main .cp-login-page .cp-login-box .line-login {
   display: block;
   margin: 0 auto 20px;
   width: 80%;
   max-width: 200px;
 }
-/* line 1797, ../sass/default.scss */
+/* line 1905, ../sass/default.scss */
 .cp-main .cp-login-page .cp-login-box .line-login:after {
   content: ".";
   display: block;
@@ -2052,7 +2175,7 @@ select.form-control {
   clear: both;
   visibility: hidden;
 }
-/* line 1804, ../sass/default.scss */
+/* line 1912, ../sass/default.scss */
 .cp-main .cp-login-page .cp-login-box .line-login .icon-lock {
   width: 80px;
   display: block;
@@ -2062,50 +2185,50 @@ select.form-control {
   margin: 0 auto 20px;
   text-align: center;
 }
-/* line 1812, ../sass/default.scss */
+/* line 1920, ../sass/default.scss */
 .cp-main .cp-login-page .cp-login-box .line-login .icon-lock .fa {
   color: #666;
   line-height: 70px;
   font-size: 50px;
 }
-/* line 1818, ../sass/default.scss */
+/* line 1926, ../sass/default.scss */
 .cp-main .cp-login-page .cp-login-box .line-login .text-input {
   display: block;
   font-size: 16px;
   font-weight: 400;
 }
-/* line 1824, ../sass/default.scss */
+/* line 1932, ../sass/default.scss */
 .cp-main .cp-login-page .cp-login-box .line-login input[type="text"], .cp-main .cp-login-page .cp-login-box .line-login input[type="password"] {
   width: 100%;
   border-radius: 4px;
   border: 1px solid #ccc;
   padding: 5px;
 }
-/* line 1829, ../sass/default.scss */
+/* line 1937, ../sass/default.scss */
 .cp-main .cp-login-page .cp-login-box .line-login input[type="text"]:focus, .cp-main .cp-login-page .cp-login-box .line-login input[type="password"]:focus {
   outline: none;
 }
-/* line 1833, ../sass/default.scss */
+/* line 1941, ../sass/default.scss */
 .cp-main .cp-login-page .cp-login-box .line-login input[type="submit"] {
   width: 100%;
 }
-/* line 1838, ../sass/default.scss */
+/* line 1946, ../sass/default.scss */
 .cp-main .cp-login-page .cp-forgot-box {
   width: 80%;
   max-width: 600px;
   margin: 0 auto 30px;
   text-align: center;
 }
-/* line 1843, ../sass/default.scss */
+/* line 1951, ../sass/default.scss */
 .cp-main .cp-login-page .cp-forgot-box p {
   margin: 0;
 }
-/* line 1846, ../sass/default.scss */
+/* line 1954, ../sass/default.scss */
 .cp-main .cp-login-page .cp-forgot-box a {
   font-size: 15px;
   letter-spacing: 0.05em;
 }
-/* line 1849, ../sass/default.scss */
+/* line 1957, ../sass/default.scss */
 .cp-main .cp-login-page .cp-forgot-box a span {
   color: #888;
   font-size: 13px;
@@ -2113,17 +2236,17 @@ select.form-control {
   padding: 0 5px;
 }
 
-/* line 1860, ../sass/default.scss */
+/* line 1968, ../sass/default.scss */
 .cp-footer .container {
   border: 1px solid #ddd;
 }
-/* line 1863, ../sass/default.scss */
+/* line 1971, ../sass/default.scss */
 .cp-footer .cp-footer-info {
   text-align: center;
   padding: 10px 0;
 }
 
-/* line 1869, ../sass/default.scss */
+/* line 1977, ../sass/default.scss */
 .clear:after {
   content: ".";
   display: block;
@@ -2132,7 +2255,7 @@ select.form-control {
   visibility: hidden;
 }
 
-/* line 1877, ../sass/default.scss */
+/* line 1985, ../sass/default.scss */
 .go-back-top {
   background: rgba(51, 122, 183, 0.9);
   text-align: center;
@@ -2147,7 +2270,7 @@ select.form-control {
   border-radius: 2px;
   z-index: 1050;
 }
-/* line 1891, ../sass/default.scss */
+/* line 1999, ../sass/default.scss */
 .go-back-top:hover {
   background: #337ab7;
 }
diff --git a/app/assets/stylesheets/client_management/rwd.css b/app/assets/stylesheets/client_management/rwd.css
index 0331990..c24f5ae 100644
--- a/app/assets/stylesheets/client_management/rwd.css
+++ b/app/assets/stylesheets/client_management/rwd.css
@@ -73,32 +73,32 @@
     text-align: center;
   }
 
-  /* line 92, ../sass/rwd.scss */
-  .cp-main .cp-content .cp-submenu-box .cp-filter-box {
+  /* line 93, ../sass/rwd.scss */
+  .cp-main .cp-content .cp-filter-box {
     clear: both;
     float: none;
     width: 100%;
     margin: 0 0 10px;
   }
-  /* line 97, ../sass/rwd.scss */
-  .cp-main .cp-content .cp-submenu-box .cp-filter-box select.form-control {
+  /* line 98, ../sass/rwd.scss */
+  .cp-main .cp-content .cp-filter-box .form-control {
     float: none;
     width: 100%;
     margin: 0 0 10px;
   }
-  /* line 102, ../sass/rwd.scss */
-  .cp-main .cp-content .cp-submenu-box .cp-filter-box .btn {
+  /* line 103, ../sass/rwd.scss */
+  .cp-main .cp-content .cp-filter-box .btn {
     float: left;
     margin: 0 10px 10px 0;
   }
-  /* line 106, ../sass/rwd.scss */
-  .cp-main .cp-content .cp-submenu-box .cp-filter-box .btn-gray {
+  /* line 107, ../sass/rwd.scss */
+  .cp-main .cp-content .cp-filter-box .btn-gray {
     color: #333;
     background: #eee;
     border-color: #ccc;
   }
-  /* line 110, ../sass/rwd.scss */
-  .cp-main .cp-content .cp-submenu-box .cp-filter-box .btn-gray:hover {
+  /* line 111, ../sass/rwd.scss */
+  .cp-main .cp-content .cp-filter-box .btn-gray:hover {
     background: #ddd;
   }
   /* line 116, ../sass/rwd.scss */
diff --git a/app/controllers/client_managements_controller.rb b/app/controllers/client_managements_controller.rb
index 453eb1c..9eaafab 100644
--- a/app/controllers/client_managements_controller.rb
+++ b/app/controllers/client_managements_controller.rb
@@ -232,6 +232,26 @@ class ClientManagementsController < CPanelController
     end
   end
 
+  def purchases
+    if !params[:query].present?
+      site_requests =  SiteRequest.any_of({:site_id.in => current_cpanel_user.registered_site_ids.collect{|id| id.to_s}, :request_contract.ne => nil},{:c_panel_user_id => current_cpanel_user.id, :request_contract.ne => nil}).asc(:created_at)
+      @purchases = site_requests.collect{|sr| sr.request_contract.contract_purchase if sr.request_contract.contract_purchase != nil}
+      @purchases.delete(nil)
+      @purchases = Kaminari.paginate_array(@purchases).page(params[:page]).per(15)
+    else
+      site_requests = SiteRequest.where(:site_id => params[:query], :request_contract.ne => nil).asc(:created_at)
+      @purchases = site_requests.collect{|sr| sr.request_contract.contract_purchase if sr.request_contract.contract_purchase != nil}
+      @purchases.delete(nil)
+      @purchases = Kaminari.paginate_array(@purchases).page(params[:page]).per(15)
+    end
+    if request.xhr?
+      render :partial => "purchase_partial"
+    else
+      @user_sites = current_cpanel_user.registered_sites.collect{|rs|[rs.title, rs.id.to_s]}
+      @user_sites << ["New site request", "newsite"] 
+    end
+  end
+
   def confirm_contract
     contract = RequestContract.where(:uid => params[:contract_uid]).first rescue nil
     contract.confirmed = true
diff --git a/app/views/client_managements/_purchase_partial.html.erb b/app/views/client_managements/_purchase_partial.html.erb
new file mode 100644
index 0000000..e217fa2
--- /dev/null
+++ b/app/views/client_managements/_purchase_partial.html.erb
@@ -0,0 +1,53 @@
+<% @purchases.each do |purchase| %>
+<% contract = purchase.request_contract %>
+<div class="item-history">
+  <span class="site-title-history"><a href="" onclick="return false;">Purchase for contract : <%= contract.uid %></a></span>
+  <div class="info-site">
+    <span class="url-site"><i class="fa fa-money" aria-hidden="true"></i>Total : <%= purchase.total_amount %> NTD.</span>
+    <span class="url-site"><i class="fa fa-money" aria-hidden="true"></i>Amount Received : <span style="color:green;"> <%= purchase.total_amount_recieved %></span> NTD.</span>
+    <span class="time-site"><i class="fa fa-clock-o" aria-hidden="true"></i>Time :&nbsp;&nbsp;<%= purchase.created_at.strftime("%d %B, %Y %H:%M") %></span>
+  </div>
+  <% if !purchase.purchase_receipts.blank? %>
+    <div class="receipt-site">
+      <% purchase.purchase_receipts.each do |receipt| %>
+        <div class="item-receipt">
+          <table class="table-receipt" cellspacing="5">
+            <tbody>
+              <tr>
+                <th>Receipt Number</th>
+                <th>Total Amount</th>
+                <th>Amount Received</th>
+                <th>Amount Pending</th>
+                <th>Receipt Status</th>
+              </tr>
+              <tr>
+                <td class="number"><%= receipt.receipt_number %></td>
+                <td class="total"><%= receipt.amount %></td>
+                <td class="received"><%= receipt.amount_received %></td>
+                <td class="pending"><%= receipt.amount_pending %></td>
+                <td class="status">
+                  <% if receipt.is_pending? %>
+                    <span class="pending">Pending</span>
+                  <% else %>
+                    <span class="cleared">Cleared</span>
+                  <% end %>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+  <% if purchase.cleared? %>
+    <span class="status-detail pending">Cleared</span>
+  <% else %>
+    <span class="status-detail purchased">Pending</span>
+  <% end %>
+  <% if !purchase.purchase_receipts.blank? %>
+    <span class="action-site">
+      <a href="#" class="btn btn-receipt">Receipts</a>
+    </span>
+  <% end %>
+</div>
+<% end %>
\ No newline at end of file
diff --git a/app/views/client_managements/contracts.html.erb b/app/views/client_managements/contracts.html.erb
index 6e6b1f8..5573ae4 100644
--- a/app/views/client_managements/contracts.html.erb
+++ b/app/views/client_managements/contracts.html.erb
@@ -14,16 +14,16 @@
   <div class="cp-submenu-box">
     <a href="<%= cpanel_myhistory_path %>" class="submenu-item">Requests</a>
     <a href="<%= cpanel_mycontracts_path %>" class="submenu-item active">Contracts</a>
-    <a href="#" class="submenu-item">Purchases</a>
-    <div class="cp-filter-box">
-      <form action="" method="get">
-        <%= select_tag "q",  options_for_select(@user_sites, params[:q]), :prompt => "All", :class => "form-control" %>
-        <input type="submit" value="Filter" class="btn btn-success">
-        <% if params[:q].present? %>
-          <a href="/cpanel/contracts" class="btn btn-gray">Clear</a>
-        <% end %>
-      </form>
-    </div>
+    <a href="<%= cpanel_mypurchases_path %>" class="submenu-item">Purchases</a>
+  </div>
+  <div class="cp-filter-box clear">
+    <form action="" method="get">
+      <%= select_tag "q",  options_for_select(@user_sites, params[:q]), :prompt => "All", :class => "form-control" %>
+      <input type="submit" value="Filter" class="btn btn-success">
+      <% if params[:q].present? %>
+        <a href="/cpanel/contracts" class="btn btn-gray">Clear</a>
+      <% end %>
+    </form>
   </div>
   <div class="cp-addsite-history">
     <div class="box-request-history">
diff --git a/app/views/client_managements/history.html.erb b/app/views/client_managements/history.html.erb
index c0c8ddc..913aefc 100644
--- a/app/views/client_managements/history.html.erb
+++ b/app/views/client_managements/history.html.erb
@@ -14,16 +14,16 @@
   <div class="cp-submenu-box">
     <a href="<%= cpanel_myhistory_path %>" class="submenu-item active">Requests</a>
     <a href="<%= cpanel_mycontracts_path %>" class="submenu-item">Contracts</a>
-    <a href="#" class="submenu-item">Purchases</a>
-    <div class="cp-filter-box">
-      <form action="" method="get">
-        <%= select_tag "q",  options_for_select(@user_sites, params[:q]), :prompt => "All", :class => "form-control" %>
-        <input type="submit" value="Filter" class="btn btn-success">
-        <% if params[:q].present? %>
-          <a href="/cpanel/history" class="btn btn-gray">Clear</a>
-        <% end %>
-      </form>
-    </div>
+    <a href="<%= cpanel_mypurchases_path %>" class="submenu-item">Purchases</a>
+  </div>
+  <div class="cp-filter-box clear">
+    <form action="" method="get">
+      <%= select_tag "q",  options_for_select(@user_sites, params[:q]), :prompt => "All", :class => "form-control" %>
+      <input type="submit" value="Filter" class="btn btn-success">
+      <% if params[:q].present? %>
+        <a href="/cpanel/history" class="btn btn-gray">Clear</a>
+      <% end %>
+    </form>
   </div>
   <div class="cp-addsite-history">
     <div class="box-request-history">
diff --git a/app/views/client_managements/purchases.html.erb b/app/views/client_managements/purchases.html.erb
new file mode 100644
index 0000000..c970033
--- /dev/null
+++ b/app/views/client_managements/purchases.html.erb
@@ -0,0 +1,94 @@
+<% content_for :page_menu do %>
+ 	<ul class="list-sidebar">
+    <li class="item-sidebar"><a class="btn-sidebar" href="/cpanel/sites"><i class="fa fa-home" aria-hidden="true"></i><%= t("client_management.my_sites") %></a></li>
+    <li class="item-sidebar"><a class="btn-sidebar" href="<%= cpanel_myprofile_path %>"><i class="fa fa-address-card" aria-hidden="true"></i><%= t("client_management.profile") %></a></li>
+    <li class="item-sidebar active"><a class="btn-sidebar" href="<%= cpanel_myhistory_path %>"><i class="fa fa-history" aria-hidden="true"></i><%= t("client_management.history") %></a></li>
+    <li class="item-sidebar"><a class="btn-sidebar" href="#"><i class="fa fa-question-circle-o" aria-hidden="true"></i><%= t("client_management.help_and_faq") %></a></li>
+    <li class="item-sidebar"><a class="btn-sidebar" href="#"><i class="fa fa-user-circle-o" aria-hidden="true"></i><%= t("client_management.get_in_contact") %></a></li>
+  </ul>
+<% end %>
+<section class="cp-content col-md-10">
+  <h2 class="cp-page-title">
+    History
+  </h2>
+  <div class="cp-submenu-box">
+    <a href="<%= cpanel_myhistory_path %>" class="submenu-item">Requests</a>
+    <a href="<%= cpanel_mycontracts_path %>" class="submenu-item">Contracts</a>
+    <a href="<%= cpanel_mypurchases_path %>" class="submenu-item active">Purchases</a>
+  </div>
+  <div class="cp-filter-box clear">
+    <form action="" method="get">
+      <%= select_tag "q",  options_for_select(@user_sites, params[:q]), :prompt => "All", :class => "form-control" %>
+      <input type="submit" value="Filter" class="btn btn-success">
+      <% if params[:q].present? %>
+        <a href="/cpanel/purchases" class="btn btn-gray">Clear</a>
+      <% end %>
+    </form>
+  </div>
+ <div class="cp-addsite-history">
+    <div class="box-request-history">
+      <h3 class="sub-title">Purchases</h3>
+      <div id="history-loading" class="cp-loading-box" style="display: none;">
+        <span class="loading-text">
+          <%= t("client_management.loading_purchases") %>
+        </span>
+        <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
+      </div>
+      <div id="error-msg-area" class="cp-message-box hide">
+        <div class="message-text">
+          Sorry, we found nothing.
+        </div>
+      </div>
+      <div id="history-holder">
+      </div>
+    </div>
+    <div class="cp-pagination" id="pagination-area">
+      <nav aria-label="Page navigation"></nav>
+    </div>
+  </div>
+</section>
+<script type="text/javascript">
+  $(document).on("click", ".confrim-btn",function(){
+    if(!confirm("Are you sure?")){
+      return false;
+    }
+  })
+  var urlVars = getUrlVars();
+  var pageNo = (urlVars["page"] ? parseInt(urlVars["page"]) : 1),
+      query = urlVars["q"],
+      loader = $("#history-loading"),
+      holder = $("#history-holder"),
+      errorArea = $("#error-msg-area"),
+      paginationArea = $("#pagination-area");
+
+  var getObjects = function(page){
+    pageNo = page;
+    holder.hide();
+    loader.show();
+    paginationArea.hide();
+    $.ajax({
+      url : "/cpanel/purchases",
+      data : {"page" : page, "query" : query},
+      dataType : "html",
+      type : "get"
+    }).done(function(html){
+      setTimeout(function(){
+        holder.html(html).show();
+        loader.hide();
+        var total_pages = parseInt(holder.find("input[type=hidden].total-pages").val());
+        if (total_pages > 1){
+          constructPagination(page, total_pages);
+        }
+      }, 500);
+    })
+  }
+
+  $(document).ready(function(){
+    getObjects(pageNo);
+    //receipt toggle
+    $(document).on("click",".btn-receipt", function(event){
+      $(this).parent().siblings('.receipt-site').slideToggle();
+      event.preventDefault();
+    })
+  })
+</script>
\ No newline at end of file
diff --git a/app/views/shared/_header.html.erb b/app/views/shared/_header.html.erb
index 80692ad..78a6db3 100644
--- a/app/views/shared/_header.html.erb
+++ b/app/views/shared/_header.html.erb
@@ -6,7 +6,7 @@
         <div class="link-user">
           <span><i class="fa fa-user-circle-o" aria-hidden="true"></i><%= current_cpanel_user.name %></span>
           <ul class="user-menu">
-            <li><a href="#"><i class="fa fa-address-card" aria-hidden="true"></i>Profile</a></li>
+            <li><a href="/cpanel/myprofile"><i class="fa fa-address-card" aria-hidden="true"></i>Profile</a></li>
             <li><a href="/cpanel/logout"><i class="fa fa-sign-out" aria-hidden="true"></i>Logout</a></li>
           </ul>
         </div>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 90fce93..32e714e 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -51,4 +51,5 @@ en:
     amount: Total Amount
     amount_received: Amount Received
     amount_pending: Amount Pending
-    receipt_status: Receipt Status
\ No newline at end of file
+    receipt_status: Receipt Status
+    loading_purchases: Loading Purchases
\ No newline at end of file
diff --git a/config/locales/zh_tw.yml b/config/locales/zh_tw.yml
index cdebed4..d6c52fa 100644
--- a/config/locales/zh_tw.yml
+++ b/config/locales/zh_tw.yml
@@ -51,4 +51,5 @@ zh_tw:
     amount: Total Amount
     amount_received: Amount Received
     amount_pending: Amount Pending
-    receipt_status: Receipt Status
\ No newline at end of file
+    receipt_status: Receipt Status
+    loading_purchases: Loading Purchases
\ No newline at end of file
diff --git a/config/routes.rb b/config/routes.rb
index 72f6335..6b98943 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -46,6 +46,7 @@ Rails.application.routes.draw do
       # history
       get "history" => "client_managements#history", as: "cpanel_myhistory"
       get "contracts" => "client_managements#contracts", as: "cpanel_mycontracts"
+      get "purchases" => "client_managements#purchases", as: "cpanel_mypurchases"
       get "request/:request_uid" => "client_managements#see_request"
       get "contract/:contract_uid" => "client_managements#see_contract", as: "cpanel_contract_show"
       patch "contract/:contract_uid/update_contract" => "client_managements#update_contract"