/* widget
----------------------------------------------------------------------------------------------------------------------*/
.widget-content {
    width: 100%;
    height: 600px;
    margin: 0;
    padding: 0;
    background: none;
    position: relative;
    overflow: hidden;
}

a {
    outline: none!important;
}
*:active, *:focus {
    outline: none!important;
}

/* prime button
-------------------------------------------------------------------------------------*/
.widget-prime-button {
    width: auto;
    height: 44px;
    margin: 0;
    padding: 0 20px;
    background: #3c8dbc;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-decoration: none!important;
    overflow: hidden;
    border: none;
}
.widget-prime-button::after {
    content: ' ';
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    background: #1e282c;
    display: block;
    position: absolute;
    z-index: 0;
    transition: all 0.3s;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
}
.widget-prime-button:hover::after {
    transform: translateX(0);
    -webkit-transform: translateX(0);
}
.widget-prime-button > span {
    margin-top: 2px;
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none!important;
    z-index: 1;
}

/* top menu
-------------------------------------------------------------------------------------*/
.widget-content .widget-top-menu {
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    background: #222d32;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    z-index: 210;
}
.widget-content .widget-top-menu button {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0 20px;
    background: #222d32;
    border: none;
    border-top: 4px solid #222d32;
    transition: all 0.2s;
}
.widget-content .widget-top-menu button.border {
    margin-left: auto;
}
.widget-content .widget-top-menu button:hover {
    background: #1e282c;
    border-top-color: #3c8dbc;
}
.widget-content .widget-top-menu button i {
    font-size: 16px;
    color: #b8c7ce;
    line-height: 54px;
    transition: all 0.2s;
}
.widget-content .widget-top-menu button:hover i {
    color: #fff;
}
.widget-content .widget-top-menu button span {
    margin-left: 5px;
    font-size: 14px;
    color: #b8c7ce;
    line-height: 54px;
    transition: all 0.2s;
}
.widget-content .widget-top-menu button:hover span {
    color: #fff;
}
.widget-content .widget-top-menu button.widget-show-response {
    height: 40px;
    background: #dd4b39;
    border: none;
    border-radius: 6px;
}
.widget-content .widget-top-menu button.widget-show-response:hover {
    background: #bf4331;
}
.widget-content .widget-top-menu button.widget-show-response i {
    font-size: 16px;
    color: #fff;
    line-height: 40px;
}
.widget-content .widget-top-menu button.widget-show-response span {
    margin-left: 5px;
    font-size: 14px;
    color: #fff;
    line-height: 40px;
}

.widget-content .widget-scale-indicator {
    width: 150px;
    height: auto;
    margin: 0;
    padding: 7px;
    top: 60px;
    right: 0;
    background: rgba(30, 40, 43, 0.8);
    position: absolute;
    z-index: 210;
}
.widget-content .widget-scale-indicator p {
    margin: 0;
    text-align: center;
    font-size: 14px;
    color: #b8c7ce;
}

@media (max-width: 767px) {
    .widget-content .widget-top-menu button span {
        display: none;
    }
}

/* left bar
-------------------------------------------------------------------------------------*/
.widget-content .widget-left-bar {
    width: 240px;
    height: calc(100% - 60px);
    margin: 0;
    padding: 0;
    left: 0;
    top: 60px;
    background: #3c8dbc;
    position: absolute;
    transition: all 0.2s;
    z-index: 210;
}
.widget-content .widget-left-bar .widget-items-selector {
    width: auto;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.widget-content .widget-left-bar .widget-items-selector h3 {
    width: 100%;
    margin: 0;
    padding: 15px;
    font-size: 18px;
    color: #fff;
}
.widget-content .widget-left-bar .widget-items-selector .selects {
    width: 100%;
    height: auto;
    margin: 0 0 -10px;
    padding: 0 15px;
}
.widget-content .widget-left-bar .widget-items-selector .selects .select-wrap {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0 0 10px;
}
.widget-content .widget-left-bar .widget-items-selector .selects .select-wrap select {
    border-radius: 0;
}
.widget-content .widget-left-bar .widget-items-selector .selects .select-wrap:not(:first-child) {
    display: none;
}
.widget-content .widget-left-bar .widget-items-selector .items {
    width: 100%;
    height: 100%;
    margin: 15px 0 0;
    padding: 15px 0 0;
    background: #367fa9;
    display: none;
    overflow-x: hidden;
    overflow-y: scroll;
}
.widget-content .widget-left-bar .widget-items-selector .items .item {
    width: 170px;
    height: auto;
    margin: 0 auto 15px;
    padding: 5px;
    background: rgba(34, 45, 50, 0.3);
    cursor: pointer;
    border: 2px solid #222d32;
    border-radius: 20px;
}
.widget-content .widget-left-bar .widget-items-selector .items .item img {
    width: 100px;
    height: auto;
    margin: 0 auto 5px;
    padding: 0;
    display: block;
}
.widget-content .widget-left-bar .widget-items-selector .items .item p {
    margin: 0;
    text-align: center;
    color: #fff;
}
.widget-content .widget-left-bar .widget-items-selector .items .item p.item-name {
    font-size: 11px;
    text-transform: uppercase;
}
.widget-content .widget-left-bar .widget-items-selector .items .item p.item-price {
    margin-top: 3px;
    font-size: 14px;
}

.ui-draggable-helper {
    width: 150px;
    height: auto;
    margin: 0 auto 20px;
    padding: 5px;
    background: rgba(34, 45, 50, 0.3);
    cursor: pointer;
    border: 2px solid #222d32;
    border-radius: 20px;
    z-index: 3000;
}
.ui-draggable-helper img {
    width: 100px;
    height: auto;
    margin: 0 auto 5px;
    padding: 0;
    display: block;
}
.ui-draggable-helper p {
    margin: 0;
    text-align: center;
    color: #fff;
}
.ui-draggable-helper p.item-name {
    font-size: 11px;
    text-transform: uppercase;
}
.ui-draggable-helper p.item-price {
    margin-top: 3px;
    font-size: 14px;
}

@media (max-width: 767px) {
    .widget-content .widget-left-bar {
        left: -220px;
    }
}

/* cart
-------------------------------------------------------------------------------------*/
.widget-content .widget-cart {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 20px;
    left: 0;
    top: 0;
    background: rgba(60, 141, 188, 0.5);
    display: none;
    position: absolute;
    z-index: 300;
}
.widget-content .widget-cart .inner {
    width: auto;
    height: 100%;
    margin: 0;
    padding: 20px;
    background: #fff;
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
}
.widget-content .widget-cart h2 {
    margin: 0;
    color: #333;
}
.widget-content .widget-cart .widget-cart-content {
    width: auto;
    height: auto;
    margin: 20px 0 0;
    padding: 0;
}
.widget-content .widget-cart .widget-cart-content table {
    width: 100%;
    margin: 0;
    border-bottom: 1px solid #ddd;
}
.widget-content .widget-cart .widget-cart-content table td,
.widget-content .widget-cart .widget-cart-content table th {
    vertical-align: middle;
}
.widget-content .widget-cart .widget-cart-content table td img {
    width: 100px;
    padding: 7px;
    border: 1px solid #3c8dbc;
}
.widget-content .widget-cart .widget-cart-content table td span {
    color: #333;
}
.widget-content .widget-cart .widget-cart-content table td p.name {
    margin: 0;
    font-weight: 700;
    color: #333;
}
.widget-content .widget-cart .widget-cart-content table td .variations {
    width: auto;
    height: auto;
    margin: 5px 0 0;
    padding: 0;
}
.widget-content .widget-cart .widget-cart-content table td .variations p {
    margin: 0;
    font-size: 12px;
    color: #333;
}
.widget-content .widget-cart .widget-cart-content .widget-cart-actions {
    width: auto;
    height: auto;
    margin: 0 -10px;
    padding: 20px 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.widget-content .widget-cart .widget-cart-content .widget-cart-cost {
    margin: 0 auto 0 0;
    padding: 0 10px;
    font-size: 20px;
    color: #333;
}
.widget-content .widget-cart .widget-cart-content .widget-cart-actions button {
    margin: 0 10px;
}
.widget-content .widget-cart .widget-cart-order {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0 0 20px;
    display: none;
}
.widget-content .widget-cart .widget-cart-order form .form-group:last-child {
    margin: 0;
}
.widget-content .widget-cart .widget-cart-order form .form-group.required label:before {
    content: '* ';
    color: #dd4b39;
}
.widget-content .widget-cart .widget-cart-order form .form-group input[type='text'] {
    border-radius: 0;
}
.widget-content .widget-cart .widget-cart-order form .form-group textarea {
    border-radius: 0;
    resize: vertical;
}

/* item edit
-------------------------------------------------------------------------------------*/
.widget-content .widget-item-edit {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 20px;
    left: 0;
    top: 0;
    background: rgba(60, 141, 188, 0.5);
    display: none;
    position: absolute;
    z-index: 300;
}
.widget-content .widget-item-edit .inner {
    width: auto;
    height: 100%;
    margin: 0;
    padding: 20px;
    background: #fff;
    overflow-x: hidden;
    overflow-y: scroll;
}
.widget-content .widget-item-edit .widget-item-edit-content {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.widget-content .widget-item-edit .widget-item-edit-content .widget-item-edit-img {
    width: 320px;
    height: auto;
    margin: 0;
    padding: 10px;
    border: 1px solid #3c8dbc;
}
.widget-content .widget-item-edit .widget-item-edit-content .widget-item-edit-img img {
    width: 100%;
}
.widget-content .widget-item-edit .widget-item-edit-content .widget-item-edit-var {
    width: calc(100% - 320px);
    height: auto;
    margin: 0;
    padding: 0 0 0 30px;
}
.widget-content .widget-item-edit .widget-item-edit-content .widget-item-edit-var table {
    width: 100%;
    margin: 0;
    border-bottom: 1px solid #ddd;
}
.widget-content .widget-item-edit .widget-item-edit-content .widget-item-edit-var table tr td {
    vertical-align: middle;
}
.widget-content .widget-item-edit .widget-item-edit-content .widget-item-edit-var table tr td span {
    color: #333;
    white-space: nowrap;
}
.widget-content .widget-item-edit .widget-item-edit-content .widget-item-edit-var table tr td select {
    border-radius: 0;
}
.widget-content .widget-item-edit .widget-item-cost {
    width: auto;
    height: auto;
    margin: 0;
    padding: 20px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.widget-content .widget-item-edit .widget-item-cost h3 {
    margin: 0;
    font-size: 20px;
    color: #333;
}
.widget-content .widget-item-edit .widget-item-desc {
    width: auto;
    height: auto;
    margin: 0;
    padding: 20px 0 0;
    display: none;
    color: #333;
}

/* response
-------------------------------------------------------------------------------------*/
.widget-content .widget-response {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 20px;
    left: 0;
    top: 0;
    background: rgba(60, 141, 188, 0.5);
    display: none;
    position: absolute;
    z-index: 300;
}
.widget-content .widget-response .inner {
    width: auto;
    height: 100%;
    margin: 0;
    padding: 20px;
    background: #fff;
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
}
.widget-content .widget-response h2 {
    margin: 0;
    color: #333;
}
.widget-content .widget-response .widget-response-content {
    width: auto;
    height: auto;
    margin: 20px 0 0;
    padding: 0 0 20px;
}
.widget-content .widget-response .widget-response-content form .form-group:last-child {
    margin: 0;
}
.widget-content .widget-response .widget-response-content form .form-group.required label:before {
    content: '* ';
    color: #dd4b39;
}
.widget-content .widget-response .widget-response-content form .form-group input[type='text'] {
    border-radius: 0;
}
.widget-content .widget-response .widget-response-content form .form-group textarea {
    border-radius: 0;
    resize: vertical;
}
.widget-content .widget-response .widget-response-content form .form-group .widget-response-actions {
    width: auto;
    height: auto;
    margin: 0 -10px;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.widget-content .widget-response .widget-response-content form .form-group .widget-response-actions button {
    margin: 0 10px;
}
.widget-content .widget-response .widget-response-content form .form-group .alert {
    margin: 20px 0 0;
    display: none;
    text-align: left;
}

/* template
-------------------------------------------------------------------------------------*/
.widget-content .widget-template {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 20px;
    left: 0;
    top: 0;
    background: rgba(60, 141, 188, 0.5);
    display: none;
    position: absolute;
    z-index: 300;
}
.widget-content .widget-template .inner {
    width: auto;
    height: 100%;
    margin: 0;
    padding: 20px;
    background: #fff;
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
}
.widget-content .widget-template h2 {
    margin: 0;
    color: #333;
}
.widget-content .widget-template .widget-template-content {
    width: auto;
    height: auto;
    margin: 20px 0 0;
    padding: 0 0 20px;
}
.widget-content .widget-template .widget-template-content form .form-group:last-child {
    margin: 0;
}
.widget-content .widget-template .widget-template-content form .form-group.required label:before {
    content: '* ';
    color: #dd4b39;
}
.widget-content .widget-template .widget-template-content form .form-group input[type='text'] {
    border-radius: 0;
}
.widget-content .widget-template .widget-template-content form .form-group .widget-template-actions {
    width: auto;
    height: auto;
    margin: 0 -10px;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.widget-content .widget-template .widget-template-content form .form-group .widget-template-actions button {
    margin: 0 10px;
}
.widget-content .widget-template .widget-template-content form .form-group .alert {
    margin: 20px 0 0;
    display: none;
    text-align: left;
}

/* load
-------------------------------------------------------------------------------------*/
.widget-content .widget-load {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 20px;
    left: 0;
    top: 0;
    background: rgba(60, 141, 188, 0.5);
    display: none;
    position: absolute;
    z-index: 300;
}
.widget-content .widget-load .inner {
    width: auto;
    height: 100%;
    margin: 0;
    padding: 20px;
    background: #fff;
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
}
.widget-content .widget-load h2 {
    margin: 0;
    color: #333;
}
.widget-content .widget-load .widget-load-content {
    width: auto;
    height: auto;
    margin: 20px 0 0;
    padding: 0 0 20px;
}
.widget-content .widget-load .widget-load-content table {
    width: 100%;
    margin: 0;
    border-bottom: 1px solid #ddd;
}
.widget-content .widget-load .widget-load-content table td,
.widget-content .widget-load .widget-load-content table th {
    vertical-align: middle;
}
.widget-content .widget-load .widget-load-content table td span {
    color: #333;
}
.widget-content .widget-load .widget-load-content table td.buttons {
    width: 46px;
}
.widget-content .widget-load .widget-load-content table td button {
    width: 30px;
    height: 30px;
    background: #f4f4f4;
    border: 1px solid #ddd;
}
.widget-content .widget-load .widget-load-content table td button i {
    font-size: 16px;
    line-height: 29px;
}
.widget-content .widget-load .widget-load-content table td button.editTemplate i {
    color: #555;
}
.widget-content .widget-load .widget-load-content table td button.deleteTemplate i {
    color: #D64541;
}
.widget-content .widget-load .widget-load-content .widget-load-actions {
    width: auto;
    height: auto;
    margin: 0 -10px;
    padding: 20px 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.widget-content .widget-load .widget-load-content .widget-load-actions button {
    margin: 0 10px;
}

/* canvas
-------------------------------------------------------------------------------------*/
.widget-content .widget-canvas {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    position: absolute;
    overflow: hidden;
    z-index: 0;
}

/*--------------------------------------------------------------------------------------------------------------------*/