/*------------------------------------------
0. BASICS & SHARED
------------------------------------------*/
#modal_cropper {z-index: 99999;}
.modal-header {padding: .75rem 1rem;}
.modal-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #6c757d;
}
.field-text {
    font-size: 13px;
    color: #6c757d;
}
body {font-size: 13px;}
ul {
    padding: 0;
    margin: 0;
}
ol {
    padding: 0;
    margin: 0;
    counter-reset: item;
}
ol li {
    list-style-type: none;
    counter-increment: item;
}
ol li:before {
    display: inline-block;
    padding-right: 0.25rem;
    font-weight: bold;
    text-align: right;
    content: counter(item) ".";
}
ol.nested li:before {content: counters(item, ".") ".";}


select {
    display: inline-block;
    font: inherit;
    width: 100%;
    height: 44px;
    font-size: 12px;
    line-height: 1.75em;
    padding: .5em 3.5em .5em 1em;
    margin: 11px 0;
    color: #999;
    background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
    background-position: calc(100% - 20px) calc(1em + 7px), calc(100% - 15px) calc(1em + 7px), calc(100% - 3.25em) 0;
    background-size: 5px 5px, 5px 5px, 1px 3.5em;
    background-repeat: no-repeat;
    outline: 0;
    border-color: #ccc;
    border-radius: 4px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
}
select.small-size {
    width: auto;
    height: auto;
    font-size: .75rem;
    line-height: normal;
    padding: .4em 2.75em .4em .75em;
    margin: auto 0;
    background-position: calc(100% - 12px) 1em, calc(100% - 7px) 1em, calc(100% - 2em) 0;
}
select:focus {
    background-image: linear-gradient(45deg, #28a745 50%, transparent 50%), linear-gradient(135deg, transparent 50%, #28a745 50%), linear-gradient(to right, #28a745, #28a745);
    background-position: calc(100% - 15px) 1.5em, calc(100% - 20px) 1.5em, calc(100% - 3.25em) 0;
    box-shadow: none;
}
select.small-size:focus {
    background-position: calc(100% - 7px) .85em, calc(100% - 12px) .85em, calc(100% - 2em) 0;
}
select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}
select.currency-select {
    width: 90px;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #999;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  box-shadow: 0 0 0px 1000px #fff inset;
  transition: background-color 5000s ease-in-out 0s;
}
.form-group.afy-inline {position: relative;}
.form-group.afy-inline .form-control {
    min-height: 44px;
    margin: 0;
    border-color: #ccc;
}
.form-group.afy-inline ::placeholder {color: #999;}
.form-group.afy-inline.with-icon .form-control {padding: 8px 48px 8px 16px;}
.form-group.afy-inline.with-icon .form-control:focus {
    background-color: transparent;
    box-shadow: 0 0 0 1px #28a745;
}
.form-group.afy-inline.with-icon .form-control-feedback {
    display: flex;
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 42px;
    min-height: 42px;
    background-color: #eaeaea;
    border-radius: 0 3px 3px 0;
    border-left: 1px solid #ccc;
    outline: none;
    cursor: pointer;
    transition:
    color ease-in-out 300ms,
    background-color ease-in-out 300ms,
    border-color ease-in-out 300ms,
    top ease-in-out 300ms,
    right ease-in-out 300ms,
    height ease-in-out 300ms,
    height ease-in-out 300ms;
}
.form-group.afy-inline.with-icon .form-control-feedback:hover {
    color: #6c757d;
    background-color: #dadada;
}
.form-group.afy-inline.with-icon .form-control-feedback:focus,
.form-group.afy-inline.with-icon .form-control-feedback:active {
    background-color: #cacaca;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .1);
    border-color: #b7b7b7;
    border-radius: 3px;
}
.form-group.afy-inline.with-icon .form-control-feedback::before,
.form-group.afy-inline.with-icon .form-control-feedback > * {margin: auto;}

.afy-radio-btn-container .checkmark:after {
    content: "";
    display: block;
    width: 6px;
    height: 8px;
    margin: 2px 0 0 4px;
    border-width: 0 2px 2px 0;
    border-style: solid;
    border-color: #fff;
    transform: rotate(45deg) scale(0);
}
.afy-radio-btn-container input[type="radio"]:checked ~ .checkmark:after {transform: rotate(45deg) scale(1);}

.afy-radio-btn-container .radio-circle {
    display: flex;
    position: relative;
    margin: auto auto auto -17px;
    height: 16px;
    width: 16px;
    background-color: #f8f9fa;
    border: 2px solid rgba(0, 0, 0, .1);
    border-radius: 8px;
    transition: all ease-in-out 300ms;
}
.afy-radio-btn-container input[type="radio"]:checked ~ .radio-circle {border-color: #28a745;}
.afy-radio-btn-container .radio-circle::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    margin: 2px;
    background-color: #28a745;
    border-radius: 4px;
    transform: scale(0);
    transition: transform ease-in-out 300ms;
}
.afy-radio-btn-container input[type="radio"]:checked ~ .radio-circle::after {transform: scale(1);}

.afy-checkbox,
.afy-checkbox-width-label {
    display: flex;
    position: relative;
}
.afy-checkbox {width: 16px;}
.afy-checkbox,
.afy-checkbox-width-label label {
    display: flex;
    font-size: 13px;
    line-height: 1;
    margin: auto 0;
    color: #6c757d;
    cursor: pointer;
}
.afy-checkbox-width-label.overflowable label {
    line-height: 1.3;
    margin: 0 auto auto 0;
}
.afy-checkbox-width-label label.smaller {font-size: 12px;}
.afy-checkbox input[type="checkbox"],
.afy-checkbox-width-label input[type="checkbox"] {
    -webkit-appearance: none;
    position: absolute;
    top: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
}
.afy-checkbox .afy-custom-checkbox,
.afy-checkbox-width-label .afy-custom-checkbox {
    position: relative;
    display: flex;
    min-width: 16px;
    width: 16px;
    max-width: 16px;
    height: 16px;
    margin: auto 0;
    background-color: #fff;
    border: 2px solid #d6d6d6;
    border-radius: 3px;
    transition: all ease-in-out 200ms;
}
.afy-checkbox .afy-checkbox-circle, .afy-checkbox-width-label .afy-checkbox-circle {border-radius: 50%;}
.afy-checkbox-width-label .afy-custom-checkbox {margin: auto 4px auto 0;}
.afy-checkbox-width-label.overflowable .afy-custom-checkbox {margin: 0 4px auto 0;}
.afy-checkbox :checked ~ .afy-custom-checkbox, .afy-checkbox-width-label :checked ~ .afy-custom-checkbox {border-color: #28a745;}
.afy-checkbox .afy-custom-checkbox::before,
.afy-checkbox-width-label .afy-custom-checkbox::before {
    content: "";
    display: block;
    width: 2.5px;
    height: 7px;
    margin: 2px 0 0 5px;
    background-color: #28a745;
    border-radius: 50em;
    transform: rotate(-40deg) scale(0);
    transform-origin: right bottom;
    transition: all ease-in-out 200ms;
    z-index: 1;
}
.afy-checkbox .afy-custom-checkbox::after,
.afy-checkbox-width-label .afy-custom-checkbox::after {
    content: "";
    display: block;
    width: 2.5px;
    height: 13px;
    margin: -4px 0 0 -3px;
    background-color: #28a745;
    border-radius: 50em;
    box-shadow: 0 0 0 1px #fff;
    transform: rotate(45deg) scale(0);
    transform-origin: left bottom;
    transition: all ease-in-out 200ms;
}
.afy-checkbox :checked ~ .afy-custom-checkbox::before, .afy-checkbox-width-label :checked ~ .afy-custom-checkbox::before {transform: rotate(-40deg) scale(1);}
.afy-checkbox :checked ~ .afy-custom-checkbox::after, .afy-checkbox-width-label :checked ~ .afy-custom-checkbox::after {transform: rotate(45deg) scale(1);}

.afy-checkbox-width-label.label-left input[type="checkbox"] {right: 0;}
.afy-checkbox-width-label.label-right input[type="checkbox"] {left: 0;}
.afy-checkbox-width-label.label-left .afy-custom-checkbox {margin: auto 0 auto 4px;}
.afy-checkbox-width-label.label-right .afy-custom-checkbox {margin: auto 4px auto 0;}



.checkbox-list .afy-checkbox-width-label {border-bottom: 1px solid #eee;}
.checkbox-list .afy-checkbox-width-label:last-child {border: none;}
.checkbox-list .afy-checkbox-width-label input[type="checkbox"] {top: 12px;}
.checkbox-list .afy-checkbox-width-label .afy-custom-checkbox {margin: auto -24px auto 8px;}
.checkbox-list .afy-checkbox-width-label label {
    font-size: 12px;
    line-height: 1.3;
    padding: 12px 12px 12px 32px;
}





.afy-add-new-item-btn {
    display: flex;
    font-size: .7rem;
    padding: 8px 16px 8px 12px;
    margin: 16px auto;
    color: #fff;
    background-color: #28a745;
    border-radius: 50em;
    cursor: pointer;
    transition: background-color ease-in-out 200ms;
}
.afy-add-new-item-btn .btn-icon {margin: auto 0;}
.afy-add-new-item-btn .btn-css-icon {display: flex;}
.afy-add-new-item-btn .horizontal-line {
	width: 12px;
    height: 2px;
    margin: auto;
    background-color: #fff;
}
.afy-add-new-item-btn .vertical-line {
	width: 2px;
    height: 12px;
    margin: auto 5px auto -7px;
    background-color: #fff;
}
.afy-add-new-item-btn .btn-label {
    white-space: nowrap;
    margin: auto auto auto 5px;
	overflow: hidden;
}
.afy-add-new-item-btn:hover {background-color: #218838;}
.afy-add-new-item-btn:active {
    background-color: #1e7e34;
    box-shadow: 0 0 0 .2rem rgba(40, 167, 69, .5);
}
.collapse-icon {transition: transform ease-in-out 200ms;}
.collapsed .collapse-icon {transform: rotate(180deg);}

/* Material Design Interactive Inputs */
.mat-outline-input-container-only {
    font-size: 16px;
    padding: 7px 0px;
    margin: 4px 0px;
}
.mat-outline-input-container input,
.mat-outline-input-container textarea,
.mat-outline-input-container .selected-dropdown {
    font-size: 12px;
    padding: 12px 16px;
    color: #999;
    background: none;
}
.mat-outline-input-container .selected-dropdown {height: 44px;}
.mat-outline-input-container .dropdown-list.show {top: 51px;}
.mat-outline-input-container .placeholder-txt {
    top: 20px;
    font-size: 12px;
}
.mat-outline-input-container input, .mat-outline-input-container textarea {z-index: 1;}
.mat-outline-input-container input:focus,
.mat-outline-input-container textarea:focus,
.mat-outline-input-container.filled input,
.mat-outline-input-container.filled textarea {z-index: 0;}
.mat-outline-input-container textarea,
.builder-dark-ui .mat-outline-input-container textarea {
    height: auto;
    resize: vertical;
    overflow-x: hidden;
    overflow-y: auto;
}
.mat-search-input input[type="text"] {
    position: absolute;
    top: 7px;
    bottom: 7px;
    height: 44px;
    margin: 0;
    border: none;
    cursor: pointer;
    z-index: 1;
}
.mat-search-input .selected-dropdown {
    display: flex;
    height: 44px;
}
.admin-content .mat-outline-input-container .caret,
.mat-outline-input-container input:focus ~ .caret,
.mat-outline-input-container .selected-dropdown.active ~ .caret,
.afy-alert-modal-fade .mat-outline-input-container .caret {top: 26px;}
.mat-search-input .dropdown-list {
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
}
.mat-search-input .dropdown-item {display: flex;}
.mat-search-input .dropdown-item.false {display: block !important;}
.mat-outline-input-container.dropdown-icon-list {min-width: 260px;}
/* .mat-outline-input-container.dropdown-icon-list, .mat-outline-input-container.mat-input-iconized {min-width: 260px;} */
.mat-outline-input-container.mat-input-iconized input {padding: 14px 36px 10px 16px;}
/* Material Design Interactive Inputs */

.dropdown-item.publish-content {
    min-height: auto;
    max-height: none;
}

.aspc-1x1 {
    width: 100%;
    height: 0;
    padding: 0 0 100% 0;
}
.aspc-2x3 {
    position: relative;
    width: 100%;
    height: 0;
    padding: 0 0 150% 0;
}
.aspc-9x16 {
    position: relative;
    width: 100%;
    height: 0;
    padding: 0 0 177.77777778% 0;
}
.aspc-16x9 {
    width: 100%;
    height: 0;
    padding: 0 0 56.25% 0;
}
.upload-image.aspc-1x1 {
    position: relative;
    width: 100%;
    padding: 0 0 100% 0;
}
.upload-image.aspc-16x9 {
    position: relative;
    width: 100%;
    padding: 0 0 56.25% 0;
}
.upload-image.aspc-2x3 {
    position: relative;
    width: 100%;
    padding: 0 0 150% 0;
}
.mat-input-alert {
	display: none;
    position: relative;
    max-width: 100%;
}
.mat-input-alert-text {
    font-size: 13px;
	padding: 16px 24px 16px 16px;
	margin: 4px 0 0 0;
    max-width: 100%;
    color: #fff;
    background-color: #dc3545;
    border-radius: 8px;
}
.mat-input-alert-close-btn {
    position: absolute;
    top: 10px;
    right: 8px;
    color: #fff;
}
.btn-warning:active, .btn-outline-warning:active {box-shadow: 0 0 0 .2rem rgba(255, 193, 7, .5);}
.text-indigo {color: #6610f2;}

.text-purple {color: #6f42c1;}
.bg-purple {background-color: #6f42c1;}
.border-purple {border-color: #6f42c1;}
.accordion .text-purple:after {border-color: transparent transparent #6f42c1 transparent;}

.text-pink {color: #e83e8c;}
.bg-pink {background-color: #e83e8c;}
.border-pink {border-color: #e83e8c;}

.text-orange {color: #fd7e14;}

.text-yellow {color: #ffc107;}

.text-teal {color: #20c997;}

.text-cyan {color: #17a2b8;}

.text-gray {color: #6c757d;}

.text-gray-dark {color: #343a40;}

.text-light {color: #f8f9fa;}

.text-dark {color: #343a40;}

.text-web {color: #4b84c1;}
.bg-web {background-color: #4b84c1;}
.border-web {border-color: #4b84c1;}
.accordion .text-web:after {border-color: transparent transparent #4b84c1 transparent;}

.text-android {color: #0b9bb3;}
.bg-android {background-color: #0b9bb3;}
.border-android {border-color: #0b9bb3;}
.accordion .text-android:after {border-color: transparent transparent #0b9bb3 transparent;}

.text-ios {color: #49a7ec;}
.bg-ios {background-color: #49a7ec;}
.border-ios {border-color: #49a7ec;}
.accordion .text-ios:after {border-color: transparent transparent #49a7ec transparent;}
.web .btn,
.web .btn:active {
    color: #fff;
    background-color: #4b84c1;
    border-color: #3b74b1;
}
.web .btn:focus {
    color: #3b74b1;
    border-color: #3b74b1;
}
.web .btn-outline {
    color: #3b74b1;
    background: none;
}
.web .btn:hover {
    color: #fff;
    background-color: #2f659e;
    border-color: #1f558e;
}
.web .btn:active {
    background-color: #4b84c1;
    border-color: #3b74b1;
    box-shadow: 0 0 0 3px rgba(75, 132, 193, .33);
}
.web .btn-flat,
.web .btn-flat:focus {
    color: #4b84c1;
    background: none;
    border-color: rgba(75, 132, 193, .33);
}
.web .btn-flat:hover {
    color: #fff;
    background-color: #4b84c1;
    border-color: #3b74b1;
}
.web .btn-flat:active {
    color: #fff;
    background-color: #5b94d1;
    border-color: #4b84c1;
}
.pwa .btn,
.pwa .btn:focus {
    color: #fff;
    background-color: #6f42c1;
    border-color: #5f32b1;
}
.pwa .btn-outline {
    color: #3b74b1;
    background: none;
}
.pwa .btn:hover {
    color: #fff;
    background-color: #562ea0;
    border-color: #461e90;
} 
.pwa .btn:active {
    background-color: #6f42c1;
    border-color: #5f32b1;
    box-shadow: 0 0 0 3px rgba(111, 66, 193, .33);
}
.pwa .btn-flat,
.pwa .btn-flat:focus {
    color: #6f42c1;
    background: none;
    border-color: rgba(111, 66, 193, .33);
}
.pwa .btn-flat:hover {
    color: #fff;
    background-color: #6f42c1;
    border-color: #5f32b1;
}
.pwa .btn-flat:active {
    color: #fff;
    background-color: #7f52d1;
    border-color: #6f42c1;
}
.android .btn,
.android .btn:focus {
    color: #fff;
    background-color: #0b9bb3;
    border-color: #008ba3;
}
.android .btn-outline {
    color: #008ba3;
    background: none;
}
.android .btn:hover {
    color: #fff;
    background-color: #058398;
    border-color: #007388;
}
.android .btn:active {
    background-color: #0b9bb3;
    border-color: #008ba3;
    box-shadow: 0 0 0 3px rgba(11, 155, 179, .33);
}
.android .btn-flat,
.android .btn-flat:focus {
    color: #0b9bb3;
    background: none;
    border-color: rgba(11, 155, 179, .4);
}
.android .btn-flat:hover {
    color: #fff;
    background-color: #0b9bb3;
    border-color: #008ba3;
}
.android .btn-flat:active {
    color: #fff;
    background-color: #1babc3;
    border-color: #0b9bb3;
}
.ios .btn,
.ios .btn:focus {
    color: #fff;
    background-color: #49a7ec;
    border-color: #3997dc;
}
.ios .btn-outline {
    color: #3997dc;
    background: none;
}
.ios .btn:hover {
    color: #fff;
    background-color: #3088ca;
    border-color: #2078ba;
}
.ios .btn:active {
    background-color: #49a7ec;
    border-color: #3997dc;
    box-shadow: 0 0 0 3px rgba(73, 167, 236, .34);
}

.ios .btn.btn-flat,
.ios .btn.btn-flat:focus {
    color: #49a7ec;
    background-color: #fff;
    border-color: rgba(73, 167, 236, .4);
}
.ios .btn.btn-flat:hover {
    color: #fff;
    background-color: #49a7ec;
    border-color: #3997dc;
}
.ios .btn.btn-flat:active {
    color: #fff;
    background-color: #59b7fc;
    border-color: #49a7ec;
}
.web .btn.disabled,
.pwa .btn.disabled,
.android .btn.disabled,
.ios .btn.disabled,
.web .btn.disabled:hover,
.pwa .btn.disabled:hover,
.android .btn.disabled:hover,
.ios .btn.disabled:hover {
    color: #6c757d !important;
    background-color: #fff;
    opacity: .33 !important;
}
.overlay.btn-dismiss-modal {opacity: 0;}
.afy-corfirmation-popper {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}
.afy-corfirmation-popper .overlay {
    background-color: #000;
    opacity: .66;
    transition: none;
}
.afy-corfirmation-popper.info-popper .btn.fa-times {
    position: absolute;
    right: -10px;
    top: -10px;
    width: 24px;
    padding: 5px 0;
    text-align: center;
    z-index: 1;
}
.afy-popper-content {
    position: absolute;
    max-width: 820px;
}
.afy-popper-body {
    box-shadow: 0 0 8px #000;
    border-radius: 7px;
}
.afy-popper-body .popper-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    left: -5px;
    top: 50%;
    background-color: white;
    box-shadow: 0 0 8px #000;
    transform: translate(0, -50%) rotate(45deg);
}
.afy-popper-body .popper-arrow.arrow-right {
    left: auto;
    right: -5px;
}
.afy-popper-body .popper-arrow.arrow-bottom {
    left: calc(50% - 21px);
    top: auto;
    bottom: -12px;
    background-color: #f8f9fa;
    transform: translate(-50%, -50%) rotate(45deg);
}
.afy-popper-content.win-right .popper-arrow.arrow-bottom {left: auto;}
.afy-corfirmation-popper .confirmation-message {
    display: flex;
    position: relative;
    padding: 20px 12px 22px 12px;
    background-color: #fff;
    border-radius: 8px 8px 0 0;
}
.afy-corfirmation-popper.info-popper .confirmation-message {border-radius: 8px;}
.confirmation-message .confirm-icon {
    font-size: 24px;
    margin: auto 8px auto 4px;
}
.confirmation-message .afy-confirm-text {
    font-size: 13px;
    text-align: left;
    line-height: normal;
    white-space: normal;
    max-width: 800px;
    padding: 0 12px;
    border-left: 1px solid #dc3545;
}
.confirmation-message .text-info + .afy-confirm-text {border-color: #17a2b8;}
.afy-popper-body .action-btn-group {
    position: relative;
    padding: 8px 16px 8px 16px;
    background-color: #f8f9fa;
    border-radius: 0 0 8px 8px;
    border-top: 1px solid rgba(0, 0, 0, .06);
}
.dropdown-item .plugin-icon,
.selected-dropdown .plugin-icon,
.required-plugin .plugin-icon {
    min-width: 20px;
    font-size: 1rem;
    text-align: center;
    margin: auto 0 auto 0;
}
.selected-dropdown .btn-remove,.dropdown-item .btn-remove {display: none;}
.dropdown-item .plugin-name,.selected-dropdown .plugin-name {margin: auto auto auto 4px;}
.mat-search-input-sm .dropdown-item .plugin-name,
.mat-search-input-sm .selected-dropdown .plugin-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    max-width: calc(100% - 24px);
    font-size: 11px;
    line-height: normal;
    white-space: normal;
    -webkit-line-clamp: 1;
    margin: auto auto auto 4px;
    overflow: hidden;
}
.mat-outline-input-container.mat-search-input.dropdown input:focus {
    color: #6c757d;
    box-shadow: none;
}
.afy-input-btn-group .input-hidden {
    padding: 0;
    border-radius: 0;
    cursor: pointer;
}
.required-plugin-container {
    display: flex;
    flex-wrap: wrap;
    margin: -4px;
}
.required-plugin {
    display: flex;
    font-size: .75rem;
    line-height: normal;
    padding: 4px 12px;
    margin: 4px;
    color: #6c757d;
    background-color: #f8f9fa;
    border: 1px solid rgba(0, 0, 0, .11);
    border-radius: 50rem;
    cursor: pointer;
}
.required-plugin .plugin-name {margin: auto auto auto 4px;}
.required-plugin .btn-remove {
    line-height: normal;
    padding: 4.5px 6.88px;
    margin: auto -8px auto 12px;
    color: #6c757d;
    background-color: rgba(108, 117, 125, .11);
    border: 1px solid rgba(108, 117, 125, .11);
}
.table th,
.table td {
    padding: .75rem 1rem;
    vertical-align: middle;
    outline: none;
}
.table th.btn-only,
.table td.btn-only {
    width: 1px;
    padding: .75rem;
    white-space: nowrap;
}
.table th {padding: .75rem 1.75rem .75rem 1rem;}
.table thead.sticky th {
    position: sticky;
    top: 0;
    background-color: #fff;
    box-shadow: 2px 0 0 1px #dee2e6;
    z-index: 1;
}
.table thead.thead-dark.sticky th {
    background-color: #343a40;
    box-shadow: 2px 0 0 1px #454d55;
}
.table td.cover-image {
    width: 180px;
    padding: 5px;
}
.publications .table th.cover-image, .publications .table td.cover-image {width: 68px;}
.table td.cover-image .uploaded-preview {
    position: relative;
    width: 170px;
}
.table td.cover-image img {
    margin: 0;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 0;
}
.table td.cover-image .afy-input-btn-group-container {
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    white-space: nowrap;
    padding: 4px;
    background-color: rgba(255, 255, 255, .9);
    box-shadow: 0 0 8px rgba(0, 0, 0, .22);
    border-radius: 50em;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity ease-in-out 300ms;
}
.table td.cover-image .uploaded-preview:hover .afy-input-btn-group-container {opacity: 1;}
.table .type-title {
    max-width: 300px;
    font-weight: 700;
}
.table .type-dsc {max-width: 400px;}
.table .type-url {word-break: break-all;}
.filtered-log-detail th,.filtered-log-detail td {vertical-align: top;}
.filtered-user th,.filtered-user td {font-weight: 700;}
.table-hover tbody tr:hover {background-color:rgba(0, 0, 0, .033);}
.user-list-table .table tr th:last-child,
.user-list-table .table tr td:last-child {
    width:1%;
    white-space:nowrap;
}
.user-list-table .table tr th.id-cell,
.user-list-table .table tr td.id-cell,
.user-list-table .table tr th.button-cell,
.user-list-table .table tr td.button-cell {
    width: 1px;
    white-space: nowrap;
}
.table {margin-bottom: 8px;}
.table td .separator {
    border-color: #dee2e6;
    margin: 0 4px 0 0;
}
.table.fill-content-prop {border-width: 1px 0 0 0;}
.table.fill-content-prop thead tr :first-child, .table.fill-content-prop tbody tr > :first-child {border-left: none;}
.table.fill-content-prop thead tr :last-child, .table.fill-content-prop tbody tr > :last-child {border-right: none;}
.table.fill-content-prop tbody tr:last-child > * {border-bottom: none;}
.table.fill-content-prop tbody tr:last-child > :first-child {border-bottom-left-radius: 8px;}
.table.fill-content-prop tbody tr:last-child > :last-child {border-bottom-right-radius: 8px;}
.table.fill-content-prop.table-with-footer tr:last-child > * {border-bottom: 1px solid #dee2e6;}
.table.fill-content-prop.table-with-footer tbody tr:last-child > :first-child, .table.fill-content-prop.table-with-footer tbody tr:last-child > :last-child {border-radius: 0;}
.table-icon-only-btn {
    width: 24px;
    text-align: center;
    padding: 5px 0;
    margin: auto 4px;
}
.table-icon-only-btn.fa-edit::before {margin: 0 -2px 0 0;}
table .dropdown-toggle::after {content: none;}
a.mat-ripple-fx,
a.mat-ripple-fx:hover {
    text-decoration: none;
    color: inherit;
}
.content-prop-header.with-btn {
    display: flex;
    line-height: 2;
    padding: 12px 16px;
    margin: 0;
}
.content-prop-header + .fixed-table-head {
    max-height: calc(100vh - 232px);
}







.full-width-data-table {width: 100%;}
.full-width-data-table .data-table-header {
    background: none;
    border-width: 0 0 1px 0;
    border-radius: 0;
}
.content-prop > .full-width-data-table .data-table-header {border-radius: 8px 8px 0 0;}
.full-width-data-table .data-table-footer {
    border-width: 0 0 0 0;
    border-radius: 0;
}
.content-prop .data-table-footer {border-radius: 0 0 8px 8px;}
.full-width-data-table .table {
    margin: 0;
    border: none;
}
.full-width-data-table th:first-child, .full-width-data-table td:first-child {border-left: none;}
.full-width-data-table th:last-child, .full-width-data-table td:last-child {border-right: none;}








.content-prop-header + .fixed-table-head .data-table-content {
    height: calc(100vh - 352px);
    overflow-x: hidden;
    overflow-y: auto;
}
.data-table-content.fixed-header .table thead th {
    position: sticky;
    top: 0;
    background-color: #fff;
    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, .1);
    border-width: 0 1px;
}
.afy-admin-page #mainNav {
    position: fixed;
    width: 100%;
    z-index: 1003;
}
#mainNav .navbar-brand {
    width: 160px;
    overflow: hidden;
    transition: width ease-in-out 300ms;
}
#mainNav.min .navbar-brand {width: 52px;}
.afy-admin-page .navbar .navbar-brand {padding: 8px 16px;}
.afy-admin-page .navbar .navbar-brand a {text-decoration: none;}
#mainNav .btn-collapser {margin: auto auto auto 0;}
#mainNav.min .btn-collapser {margin: auto auto auto 8px;}

.add-item-to-in-companent-purchases {cursor: pointer;}
#mainNav .in-component-purchases {display: none;}
#mainNav .in-component-purchases.item-added {display: flex;}
#mainNav .basic-action.item-cart {margin: auto 8px;}
#mainNav .basic-action.item-cart {transition: transform ease-out 150ms;}
#mainNav .adding .basic-action.item-cart {transform: scale(1.15);}
#mainNav .adding .basic-action .mat-ripple-fx, #mainNav .adding .basic-action .mat-ripple-fx .btn-icon {transition: none;}
#mainNav .adding .basic-action.item-cart .mat-ripple-fx {background-color: #00ab34;}
#mainNav .adding .basic-action.item-cart .btn-icon {color: #fff;}
#mainNav .afy-notify-badge {align-items: unset;}

#mainNav .user-log .nav-link .circle {border-color: #dfe0e1;}
#mainNav .dropdown-menu::before {
    right: 13px;
    left: auto;
    top: -5px;
    width: 10px;
    height: 10px;
    border-color: rgba(0,0,0,.33);
    box-shadow: -1px -1px 3px rgba(0, 0, 0, .33);
    transform: rotate(45deg);
}
#mainNav .dropdown-menu::after {
    content: "";
    position: absolute;
    right: 11px;
    left: auto;
    top: 0;
    width: 14px;
    height: 10px;
    background-color: white;
    z-index: -1;
}
.admin-nav {
    flex-direction: column;
    position: fixed;
    top: 52px;
    left: 0;
    right: auto;
    bottom: 0;
    min-width: 60px;
    width: 60px;
    max-width: 60px;
    font-size: .8rem;
    padding: 0;
    margin: 0;
    background-color: #fff;
    box-shadow: 0 3px 3px -2px rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 1px 8px 0 rgba(0, 0, 0, .12);
    overflow: hidden;
    transition: all ease-in-out 300ms;
    z-index: 1002;
}
.admin-nav .nav-link {
    display: flex;
    position: relative;
    flex-direction: row;
    text-align: left;
    padding: 5.5px 10px;
    color: #6c757d;
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: rgba(0, 0, 0, .06) transparent transparent transparent;
    cursor: pointer;
    transition: all ease-in-out 300ms;
}
.admin-nav .nav-link:hover {background-color: #f8f9fa;}
.admin-nav .nav-item:first-child .nav-link {border-color: transparent;}
.admin-nav .nav-item:last-child .nav-link {
    border-width: 1px 0;
    border-color: rgba(0, 0, 0, .06) transparent;
}
.admin-nav .nav-item .nav-link.active {
    color: #fff;
    background-color: #6c757d;
    border-color: rgba(0, 0, 0, .06) transparent;
}
.admin-nav .nav-item .nav-link.sub-active {
    color: #fff;
    background-color: #6c757d;
    border-color: rgba(0, 0, 0, .06) transparent;
}
.admin-nav-icon {
    min-width: 40px;
    font-size: 1rem;
    text-align: center;
    padding: 10px;
    margin: 0;
}
.nav-link-title {
    width: 0;
    margin: auto auto auto 0;
    white-space: nowrap;
    overflow: hidden;
    transition: width ease-in-out 300ms;
}
.admin-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 52px 0 0 60px;
    background-color: #f8f9fa;
    transition: all ease-in-out 300ms;
}
.admin-content > .header {
    position: fixed;
    left: 60px;
    right: 0;
    min-height: 48px;
    height: 48px;
    max-height: 48px;
    padding: 8px 16px;
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, .11);
    box-shadow: 0 0 3px rgba(0, 0, 0, .11);
    z-index: 1001;
}
.admin-content > .header .btn {
    padding: 5px 12px;
    border-radius: 4px;
}
.header .content-heading {
    display: flex;
    position: relative;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1;
    padding: 0;
}
.header-with-icon .content-heading {margin: auto 0;}
.admin-content .header-icon {padding: 9px 8px 8px 0;}
.header.search-in-content .content-heading {padding: 6px 0;}
.general .header .content-heading {padding: 5px 0;}
.separator {border-color: rgba(0,0,0,.11);}
.header .separator {
    height: 48px;
    margin: -9px 8px;
}
.header .separator.circle {
    position: relative;
    height: auto;
    margin: auto 8px;
    border-width: 7px 0 7px 7px;
    border-color: transparent #6c757d;
}
.header .separator.circle::before {
    content: "";
    position: absolute;
    left: -9px;
    top: -7px;
    border-width: 7px 0 7px 7px;
    border-style: solid;
    border-color: transparent #f8f9fa;
}
.header .app-icon,
.header .user-icon {
    width: 31px;
    height: 31px;
    margin: auto 4px auto 0;
}
.header .app-icon-name-status {margin: 0 auto;}
.header .app-name {
    width: 249px;
    font-size: .75rem;
    line-height: normal;
    margin: -2px 8px 0 2px;
    color: inherit;
}
.header .user-name {
    line-height: 1.5;
    margin: auto 8px auto 2px;
    color: inherit;
}
.header .user-name .text-muted {
    font-weight: 500;
    font-style: italic;
}
.header .basic-action-group {
    display: flex;
    margin: -8px 0 -7px 0;
}
.header .basic-action-group .separator {
    height: 47px;
    margin: 0 8px;
}
.header .basic-action-group .afy-notify-badge {
    left: 0;
    top: 0;
}
.header .basic-action,
.header .basic-action:hover {
    display: flex;
    color: inherit;
    text-decoration: none;
}
.header .basic-action .btn-icon {
    padding: 4px 4px 4px 6px;
    margin: auto 0;
    color: #00ab34;
}
.header .basic-action .btn-icon.fa-plus {
    width: 24px;
    font-size: 10px;
    text-align: center;
    line-height: 1;
    border-radius: 50%;
    padding: 7px 0;
    margin: auto 4px;
    color: #fff;
    background-color: #00ab34;
}
.header .basic-action .btn-title {
    font-size: .7rem;
    line-height: 1;
    padding: 0 6px 0 0;
    margin: auto 0;
}
.admin-content .content {opacity: 0;}
.admin-content .content.row {padding: 62px 16px 16px 16px;}
.admin-content.shopping-box .content.row, .admin-content.payment .content.row {padding: 62px 16px;}
.admin-content.general .content.row, .admin-content.app-list .content.row, .admin-content.app-detail .content.row {padding: 54px 8px 8px 8px;}
.admin-content.general .content.row > .row,
.admin-content.app-detail .content.row > .row {
    width: calc(100% + 16px);
    padding: 8px;
    margin: 0 -8px;
}
.admin-content.general .content.row > .row:first-child,
.admin-content.app-detail .content.row > .row:first-child {
    padding-top: 8px;
    margin: -6px -8px 0 -8px;
}
.admin-content .content.row > .row:nth-of-type(odd) {background: #fff;}
.admin-content .content.row > .row:last-child {padding-bottom: 0;}
.content-header-container .header {
    font-size: 14px;
    font-weight: 700;
    color: #6c757d;
}
.app-card-container {padding: 8px;}
.app-card {
    width: 100%;
    padding: 0;
    margin: 0;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 0 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    cursor: auto;
}
.app-card .divider {border-color: rgba(0,0,0,.06);}
.app-basic-info {
    display: block;
    padding: 16px;
    color: inherit;
    border-radius: 4px 4px 0 0;
    transition: background-color ease-in-out 300ms;
}
.app-basic-info:hover {
    text-decoration: none;
    color: inherit;
    background-color: #f8f9fa;
}
.app-version-info {
    font-size: .65rem;
    line-height: 1;
    margin: auto 0 3px 16px;
    color: #343a40;
    opacity: .44;
}
.app-basic-info > .app-version-info {
    position: absolute;
    top: 16px;
    right: 16px;
}
.app-version {
    font-weight: 700;
    margin: 0 0 0 2px;
}
.app-icon-name-status {
    display: flex;
    margin: 8px auto auto 0;
}
.app-icon,
.user-icon {
    width: 48px;
    height: 48px;
    margin: auto 0 auto 0;
    border-radius: 50%;
}
.app-name-status,
.plugin-name-status {
    display: flex;
    flex-direction: column;
    width: auto;
    margin: auto auto auto 8px;
}
.app-name {
    font-size: .875rem;
    font-weight: 700;
    line-height: normal;
    margin: 0 auto 2px 0;
    color: #6c757d;
}
.app-status {
    display: flex;
    flex-direction: row;
    font-size: .8rem;
    line-height: normal;
    font-weight: 700;
    margin: 0;
}
.app-status.waiting-for-review {color: #17a2b8;}
.app-status.in-review {color: #007bff;}
.app-status.rejected {color: #dc3545;}
.app-status.live {color: #28a745;}
.app-status .fa,
.app-status .far,
.app-status .fas {
    font-size: .875rem;
    margin: auto 2px auto 0;
}
.app-status .status-txt {margin: auto auto auto 0;}
.bug-etc-alerts {
    display: flex;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    margin: 2px auto auto 0;
}
.bug-alert {
    color: #e45865;
    margin: auto 10px auto 0;
}
.feedback {
    color: #fd7e14;
    margin: auto 0;
}
.bug-etc-alerts .strong {
    font-weight: 700;
    margin: auto 2px auto 4px;
}
.quick-info {
    font-size: .8rem;
    line-height: normal;
    padding: 8px;
}
.app-count-info {
    display: flex;
    opacity: .5;
}
.user-count {
    font-weight: 700;
    margin: auto 4px auto 0;
}
.app-platform-info {
    display: flex;
    justify-content: flex-end;
}
.platform-icon-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    max-width: 36px;
    font-size: 16px;
    line-height: normal;
    opacity: .5;
}
.platform-icon-logo.fa-apple {
    font-size: 18px;
    margin: -2.5px 0 0 0;
}
.platform-icon-logo.fa-globe-americas {font-size: 15px;}
.app-count-info .platform-icon-logo {
    min-width: auto;
    width: auto;
    margin: auto 8px auto 8px;
    opacity: 1;
}
.platform-icon-logo img {max-width: 28px;}
.admin-content .mat-outline-input-container, .afy-alert-modal-fade .mat-outline-input-container, .modal .mat-outline-input-container {min-height: auto;}
.admin-content .mat-outline-input-container + .input-helper {
    font-size: 12px;
    margin: -3px 0 8px 0;
}
.row:last-child > .col .mat-outline-input-container + .input-helper {margin: 2px 0 0 0;}
.admin-content .mat-outline-input-container input:focus,
.admin-content .mat-outline-input-container textarea:focus,
.admin-content .mat-outline-input-container .selected-dropdown.active {
    border-color: #28a745;
	box-shadow: 0 0 0 1px #28a745 inset;
}
.admin-content .web .mat-outline-input-container input:focus,
.admin-content .web .mat-outline-input-container textarea:focus,
.admin-content .web .mat-outline-input-container .selected-dropdown.active {
    border-color: #4b84c1;
	box-shadow: 0 0 0 1px #4b84c1 inset;
}
.admin-content .mat-outline-input-container input:focus ~ .placeholder-txt,
.admin-content .mat-outline-input-container textarea:focus ~ .placeholder-txt,
.admin-content .mat-outline-input-container .selected-dropdown.active ~ .placeholder-txt {
    color: #28a745;
    background: #fff;
}
.admin-content .web .mat-outline-input-container input:focus ~ .placeholder-txt,
.admin-content .web .mat-outline-input-container textarea:focus ~ .placeholder-txt,
.admin-content .web .mat-outline-input-container .selected-dropdown.active ~ .placeholder-txt {
    color: #4b84c1;
}
.admin-content tr:hover .mat-outline-input-container input:focus ~ .placeholder-txt,
.admin-content tr:hover .mat-outline-input-container textarea:focus ~ .placeholder-txt,
.admin-content tr:hover .mat-outline-input-container .selected-dropdown.active ~ .placeholder-txt,
.admin-content tr:hover .mat-outline-input-container.filled .placeholder-txt {
    background: #f7f7f7;
}
.admin-content .bg-light > .mat-outline-input-container input:focus ~ .placeholder-txt,
.admin-content .bg-light > .mat-outline-input-container textarea:focus ~ .placeholder-txt,
.admin-content .bg-light > .mat-outline-input-container .selected-dropdown.active ~ .placeholder-txt,
.admin-content .bg-light > .mat-outline-input-container.filled .placeholder-txt {
    background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%);
}
.recent-msgs > :first-child {border-radius: 7px 7px 0 0;}
.recent-msgs > :last-child {
    margin: auto 0 0 0;
    border-radius: 0 0 7px 7px;
}
.admin-content .recent-msgs .mat-outline-input-container {font-size: 16px;}
.admin-content .recent-msgs .mat-outline-input-container input:focus ~ .placeholder-txt,
.admin-content .recent-msgs .mat-outline-input-container textarea:focus ~ .placeholder-txt,
.admin-content .recent-msgs .mat-outline-input-container .selected-dropdown.active ~ .placeholder-txt,
.admin-content .recent-msgs .mat-outline-input-container.filled .placeholder-txt {
    background: #fff;
}
.admin-content .recent-msgs .bg-light .mat-outline-input-container input:focus ~ .placeholder-txt,
.admin-content .recent-msgs .bg-light .mat-outline-input-container textarea:focus ~ .placeholder-txt,
.admin-content .recent-msgs .bg-light .mat-outline-input-container .selected-dropdown.active ~ .placeholder-txt,
.admin-content .recent-msgs .bg-light .mat-outline-input-container.filled .placeholder-txt {
    color: #28a745;
    background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%);
}
.admin-content .recent-msgs.web .bg-light .mat-outline-input-container input:focus ~ .placeholder-txt,
.admin-content .recent-msgs.web .bg-light .mat-outline-input-container textarea:focus ~ .placeholder-txt,
.admin-content .recent-msgs.web .bg-light .mat-outline-input-container .selected-dropdown.active ~ .placeholder-txt,
.admin-content .recent-msgs.web .bg-light .mat-outline-input-container.filled .placeholder-txt {
    color: #4b84c1;
    background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%);
}
.admin-content .mat-outline-input-container .selected-dropdown {font-size: .75rem;}
.admin-content .mat-outline-input-container input:focus ~ .caret,
.admin-content .mat-outline-input-container .selected-dropdown.active ~ .caret {
    border-color: #28a745 transparent;
}
.admin-content .mat-outline-input-container .dropdown-item,
.afy-alert-modal-fade .mat-outline-input-container .dropdown-item {
    min-height: 36px;
    font-size: .75rem;
    line-height: 1;
    padding: 12px;
    color: #6c757d;
}
.admin-content .mat-outline-input-container.mat-search-input-sm .dropdown-item,
.afy-alert-modal-fade .mat-outline-input-container.mat-search-input-sm .dropdown-item {padding: 12px 8px;}
.admin-content .mat-outline-input-container .dropdown-item.active,
.afy-alert-modal-fade .mat-outline-input-container .dropdown-item.active {
    color: #0e7525;
    background-color: rgba(40, 167, 69, .11);
}
.admin-content .mat-outline-input-container .dropdown-item .btn-icon,
.admin-content .mat-outline-input-container .selected-dropdown .btn-icon,
.afy-alert-modal-fade .mat-outline-input-container .dropdown-item .btn-icon {margin: auto 4px auto 0;}
.admin-content .mat-outline-input-container .dropdown-item .btn-title,
.admin-content .mat-outline-input-container .selected-dropdown .btn-title,
.afy-alert-modal-fade .mat-outline-input-container .dropdown-item .btn-title {margin: auto auto auto 0;}
.admin-content .mat-outline-input-container.filled .placeholder-txt,.afy-alert-modal-fade.filled .placeholder-txt {color: #999;}
.form-row .col-auto button {
    padding: 12px 28px 12px 24px;
    border-radius: 5px;
}
.admin-content .mat-input-iconized .fa,
.admin-content .mat-input-iconized .fas,
.admin-content .mat-input-iconized .far,
.admin-content .mat-input-iconized .fab {
    top: 21px;
    right: 16px;
    font-size: 16px;
}
.admin-content .mat-input-iconized textarea + .placeholder-txt + .fa,
.admin-content .mat-input-iconized textarea + .placeholder-txt + .fas,
.admin-content .mat-input-iconized textarea + .placeholder-txt + .far,
.admin-content .mat-input-iconized textarea + .placeholder-txt + .fab {
    top: 4px;
    right: -3px;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 1;
    z-index: 1;
}
table.dataTable thead th {background-image: none;}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
    cursor: pointer;
    position: relative;
}
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before,
table.dataTable thead .sorting_desc_disabled:after {
    position: absolute;
    bottom: .9em;
    display: block;
    opacity: .3;
}
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before {
    right: 1em;
    content: "\2191";
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
    right: .5em;
    content: "\2193";
}
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:after {
    opacity: 1;
}
table.dataTable .action-row {
    box-sizing: border-box;
    width: 140px;
}
.data-table-header,
.data-table-footer {
    display: flex;
    font-size: 12px;
}
.dataTables_wrapper {padding: 0;}
.dataTables_wrapper table.dataTable {min-width: 100%;}
.dataTables_wrapper table.dataTable.no-footer {
    border: none;
    margin: 0;
}
.data-table-header {
    padding: 16px;
    background-color: rgba(0, 0, 0, .01);
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-color: #dee2e6;
    border-radius: 8px 8px 0 0;
}
.data-table-header .dataTables_length {margin: auto auto auto 0;}
.dataTables_length label,
.dataTables_filter label {
    padding: 0;
    margin: 0;
    color: #6c757d;
    cursor: default;
}
.dataTables_filter .search-icon {margin: auto 0;}
.dataTables_filter input {
    height: auto;
    padding: .25rem .5rem;
    margin: auto auto auto 8px;
    outline: none;
}
.data-table-header select {
    width: auto;
    height: auto;
    font-size: .75rem;
    line-height: normal;
    padding: .4em 2.75em .4em .75em;
    margin: auto 0 auto 4px;
    background-position: calc(100% - 12px) 1em, calc(100% - 7px) 1em, calc(100% - 2em) 0;
}
.data-table-header select:focus {background-position: calc(100% - 7px) .85em, calc(100% - 12px) .85em, calc(100% - 2em) 0;}
.data-table-footer {
    padding: 16px;
    background-color: rgba(0, 0, 0, .01);
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: #ececec;
    border-radius: 0 0 8px 8px;
}
.dataTables_info {
    display: flex;
    align-items: center;
    margin: auto auto auto 0;
    color: #6c757d;
}
.dataTables_info .current-page {
    font-weight: 700;
    margin: auto 0 auto 8px;
}
.data-table-footer .dataTables_paginate {
    display: flex;
    margin: auto 1px auto auto;
}
.dataTables_paginate .paginate_button {
    display: flex;
    min-width: 25px;
    height: 25px;
    text-align: center;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: auto -.5px;
    color: #6c757d;
    border-width: 1px;
    border-style: solid;
    border-color: #dedede;
    cursor: pointer;
    transition: all ease-in-out 100ms;
}
.dataTables_paginate .paginate_button.current {
    color: #fff;
    background-color: #28a745;
    border-color: #1d9037;
    z-index: 1;
    pointer-events: none;
}
.dataTables_paginate .paginate_button.disabled {
    color: #6c757d !important;
    border-color: #dedede !important;
    opacity: .5 !important;
}
.dataTables_paginate > .paginate_button:first-child {border-radius: 50em 0 0 50em;}
.dataTables_paginate > .paginate_button:first-child:focus {border-radius: 50em 2px 2px 50em;}
.dataTables_paginate > .paginate_button:last-child {border-radius: 0 50em 50em 0;}
.dataTables_paginate > .paginate_button:last-child:focus {border-radius: 2px 50em 50em 2px;}
.dataTables_paginate .paginate_button:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #586169;
    z-index: 1;
}
.dataTables_paginate .paginate_button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 58, 64, .3);
    border-radius: 2px;
    z-index: 1;
}
.dataTables_paginate span {display: flex;}
.dataTables_paginate span .paginate_button {padding: 0 8px;}
.dataTables_paginate span.ellipsis {
    min-width: 25px;
    height: 25px;
    padding: 0 8px 6px 8px;
    margin: auto -.5px;
    color: #6c757d;
    border-width: 1px;
    border-style: solid;
    border-color: #dedede;
    cursor: default;
    transition: all ease-in-out 100ms;
}
.user-list-table table.dataTable thead th {
    width: auto;
    padding-right: 25px;
}
.user-list-table table.dataTable thead .id-cell,
.user-list-table table.dataTable thead .button-cell {
    width: 1px;
    white-space: nowrap;
    padding-right: 25px;
}
.user-list-table table.dataTable tbody .button-cell {text-align: center;}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc {background-image: none;}
.recent-msgs table.dataTable tbody tr:last-child th:first-child, .recent-msgs table.dataTable tbody tr:last-child td:first-child {border-bottom-left-radius: 8px;}
.recent-msgs table.dataTable tbody tr:last-child th:last-child, .recent-msgs table.dataTable tbody tr:last-child td:last-child {border-bottom-right-radius: 8px;}
.recent-msgs table.dataTable.table-bordered {border: none;}

.app-subpages .content > .divider {
    min-width: calc(100% + 32px);
    margin: 20px -16px 12px -16px;
    border-color: rgba(0,0,0,.066);
}
.afy-alert-modal {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .66);
    z-index: 9999;
}
.afy-alert-modal .modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
}
.afy-alert-modal .afy-alert {
    min-width: 300px;
    max-width: 300px;
    font-size: .8rem;
    padding: 0;
    margin: auto;
    background-color: transparent;
    box-shadow: 0 6px 6px -3px rgba(0, 0, 0, .2), 0 10px 14px 1px rgba(0, 0, 0, .14), 0 4px 18px 3px rgba(0, 0, 0, .12);
    border: 1px solid #fff;
    border-radius: 5px;
    transform: scale(1);
    transition: all ease-in-out 200ms;
}
.afy-alert-modal.afy-modal-md .afy-alert {
    min-width: 640px;
    max-width: 640px;
}
.afy-alert-modal.afy-modal-lg .afy-alert {
    min-width: 600px;
    width: auto;
    max-width: 70%;
}
.afy-alert-modal.afy-modal-full .afy-alert {
    min-width: auto;
    max-width: calc(100% - 64px);
}
.afy-alert-modal.afy-modal-fs .afy-alert {
    display: flex;
    flex-direction: column;
    min-width: 90%;
    width: auto;
    max-width: calc(100% - 16px);
    max-height: calc(100% - 16px);
    overflow: hidden;
}
.afy-alert-modal.afy-modal-fs .afy-alert .alert-modal-body {
    max-height: calc(100% - 53px);
    overflow: hidden;
}
.afy-alert-modal.hidden {display: none;}
.afy-alert-modal.hidden .afy-alert {
    transform: scale(0);
    transition: all ease-in-out 200ms;
}
.afy-alert-modal .alert-modal-header {
    display: flex;
    font-weight: 700;
    padding: 12px 16px;
    color: #6c757d;
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    border-radius: 4px 4px 0 0;
}
.afy-alert-modal .alert-modal-header .modal-title {margin: auto auto auto 0;}
.afy-alert-modal .alert-modal-header .btn-dismiss-modal,
.afy-alert-modal .alert-modal-header .btn-dismiss-only-modal {
    line-height: normal;
    margin: auto -6px auto auto;
    padding: 8px 10px;
    cursor: pointer;
}
.afy-alert-modal .alert-modal-body {
    padding: 32px;
    background-color: #fff;
}
.afy-alert-modal .alert-modal-body p:last-child {margin-bottom: 0;}
.afy-alert-modal .alert-modal-footer {
    padding: 8px 16px;
    background-color: #fff;
    border-top: 1px solid rgba(0, 0, 0, .05);
    border-radius: 0 0 4px 4px;
}
.afy-alert-modal.afy-general-modal .afy-alert {
    transform: scale(0);
    transition: transform ease-in 100ms;
}
.afy-alert-modal.afy-general-modal .afy-alert.open {transform: scale(1);}
.afy-alert-modal.afy-general-modal .alert-modal-body {padding: 16px;}
.afy-alert-modal.afy-general-modal .alert-modal-body .save-status-icon {
    font-size: 30px;
    margin: auto auto 8px auto;
}
.afy-alert-modal.afy-general-modal .alert-modal-body p {
    font-size: 13px;
    line-height: 1.2;
}
.afy-alert-modal.afy-general-modal .alert-modal-footer {padding: 8px;}
.admin-content .floating-action-button {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    padding: 0 17px;
    background-color: #28a745;
}
.admin-content .floating-action-button .btn-icon {margin: auto;}
.basic-choices {
    display: flex;
    margin: auto 0 auto auto;
}
.basic-choices > div  {display: flex;}
.basic-choices .afy-radio-width-label {
    height: auto;
    padding: 7px 8px;
    margin: auto 0 auto 0;
}
.basic-choices .input-group-title {
    font-size: 12px;
    font-weight: 700;
    margin: auto 4px auto auto;
}
.basic-choices select {
    font-size: 12px;
    margin: auto auto auto auto;
}
.current-user-profile .user-picture {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.user-picture .upload-preview-container {margin: auto auto 1rem auto;}
.current-user-profile .user-picture .circle {
    position: relative;
    margin: auto;
    border-radius: 50%;
    overflow: hidden;
}
.current-user-profile .user-picture .circle::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 4px solid rgba(255, 255, 255, .33);
    border-radius: 50%;
}
.action-container .btn-sm {
    padding: 8px 12px;
    border-radius: 4px;
}
.btn-sm .label,
.btn-sm .btn-title {
    font-size: 13px;
    font-weight: normal;
    line-height: 1.4;
    margin: auto auto auto 0rem;
}
.action-container .btn-sm .label, .action-container .btn-sm .btn-title {font-size: 12px;}
.section-divider {
    position: relative;
    width: 100%;
    height: 16px;
    background-color: rgba(0, 0, 0, .02);
    border-top: 1px solid rgba(0, 0, 0, .1);
    overflow: hidden;
}
.section-divider::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 8px;
    top: -8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
}





.uploaded-preview.afy-ufi-uploader, .afy-ufi-uploader-both {position: relative;}
.afy-ufi-uploader-both .helper {
    min-width: auto;
    width: auto;
    max-width: none;
    margin: auto 0 auto .5rem;
}
.afy-ufi-uploader-both .helper .btn-remove {margin: auto 0 auto .5rem;}
.afy-ufi-uploader-both .upload-image .dummy-image {height: 100%;}
.afy-ufi-uploader .upload-image.aspc-16x9 {
    position: relative;
    width: 100%;
    padding: 0 0 56.25% 0;
}
.afy-ufi-uploader .upload-image .dummy-image,
.upload-image .cover-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 1px dashed rgba(0, 0, 0, .22);
    border-radius: 6px;
}
.afy-ufi-uploader .upload-image .uploaded-image-preview {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #cdcdcd;
    border-radius: 6px;
}
.afy-ufi-uploader .afy-input-btn-group-container {
    display: flex;
    position: absolute;
    left: 0;
    top: 11px;
    right: 0;
    bottom: 11px;
    width: auto;
}
.afy-ufi-uploader .afy-input-btn-group {
    display: flex;
    flex-direction: row;
    position: relative;
    width: auto;
    font-size: .8rem;
    padding: 4.5px .75rem;
    margin: auto;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 15px;
    overflow: visible;
    opacity: .66;
    cursor: pointer;
}
.afy-input-btn-group.outline-succes {
    color: #28a745;
    border-color: #28a745;
    opacity: 1;
}
.afy-ufi-uploader .afy-input-btn-group:hover,
.afy-ufi-uploader .afy-input-btn-group:focus,
.afy-ufi-uploader .afy-input-btn-group:active {
	color: #fff;
    border-color: #28a745;
    background-color: #28a745;
    opacity: 1;
	transition: color ease-in-out 300ms,background-color ease-in-out 300ms,border-color ease-in-out 300ms,box-shadow ease-in-out 100ms;
}
.afy-ufi-uploader.uploaded .afy-input-btn-group {display: none;}
.afy-ufi-uploader .afy-input-btn-group-container .helper {
    display: none;
    text-align: center;
    margin: auto;
    border: none;
    opacity: 0;
    transition: opacity ease-in-out 300ms;
}
.afy-ufi-uploader.uploaded .afy-input-btn-group-container .helper {display: block;}
.afy-ufi-uploader.uploaded:hover .afy-input-btn-group-container .helper {opacity: 1;}
.afy-ufi-uploader .helper .btn {
    min-width: 48px;
    width: 48px;
    max-width: 48px;
    font-size: 24px;
    padding: 5px 0;
    margin: auto;
    background-color: #fff;
    border-radius: 24px;
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
}
.afy-ufi-uploader .helper .btn:hover,
.afy-ufi-uploader .helper .btn:focus,
.afy-ufi-uploader .helper .btn.active {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.afy-ufi-uploader .afy-radio-width-label .mat-outline-input-container {margin: auto 0;}
.afy-ufi-uploader-both:hover .upload-image {
    background-color: #000;
    border-radius: 4px;
}
.afy-ufi-uploader-both .dummy-image {transition: opacity ease-in-out 200ms;}
.afy-ufi-uploader-both:hover .dummy-image {opacity: .5;}
.afy-ufi-uploader-both .afy-input-btn-group-container {
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    white-space: nowrap;
    padding: 4px 6px 4px 4px;
    background-color: rgba(255, 255, 255, .9);
    box-shadow: 0 0 8px rgba(0, 0, 0, .22);
    border-radius: 50em;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity ease-in-out 300ms;
}
.afy-ufi-uploader-both:hover .afy-input-btn-group-container, .afy-ufi-uploader-both.active .afy-input-btn-group-container {opacity: 1;}

.cms-admin .option-btn-container {
    display: flex;
    position: absolute;
    top: 50%;
    right: 4px;
    padding: 2px;
    background-color: rgba(255, 255, 255, .8);
    border-radius: 50em;
    opacity: 0;
    transform: translate(0, -50%);
    transition: opacity ease-in-out 300ms;
}
.cms-admin li:hover .option-btn-container {opacity: 1;}
.cms-admin .option-btn-container .option-btn {
    display: flex;
    width: 23px;
    height: 23px;
    text-align: center;
    padding: 0;
    margin: auto 0 auto 6px;
    border-radius: 50em;
    transition: width ease-in-out 300ms;
}
.cms-admin .option-btn-container .option-btn:first-child {margin-left: 0;}
.cms-admin .option-btn-container .option-btn:last-child {margin-right: 0;}
.cms-admin .option-btn-container .option-btn .btn-icon {
    line-height: 1.75;
    margin: auto;
}
.cms-admin .option-btn-container .option-btn:hover .btn-icon {line-height: 1.15;}
.cms-admin .option-btn-container .option-btn .btn-title {
    display: inline-block;
    width: 0;
    white-space: nowrap;
    margin: auto 0;
    overflow: hidden;
    transition: margin ease-in-out 300ms, width ease-in-out 300ms;
}
.cms-admin li:hover .option-btn:hover {
    width: auto;
    padding: 4px 6px;
}
.cms-admin .option-btn-container .option-btn.edit-btn:hover .btn-title {width: 30px;}
.cms-admin .option-btn-container .option-btn.reset-btn:hover .btn-title {width: 30px;}
.cms-admin .option-btn-container .option-btn.delete-btn:hover .btn-title {width: 40px;}
.cms-admin .option-btn-container .option-btn.disable-btn:hover .btn-title {width: 40px;}
.cms-admin .option-btn-container .option-btn.rezerved-btn:hover .btn-title {width: 50px;}
.cms-admin .option-btn-container .option-btn.check-btn:hover .btn-title {width: 50px;}

/* SUCCESS ANIMATION */
.success-checkmark {
    width: 88px;
    height: 88px;
    margin: 0 auto 1.5rem auto;
}
.success-checkmark .check-icon {
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: 50%;
    box-sizing: content-box;
    border: 4px solid #4CAF50;
}
.success-checkmark .check-icon::before {
    top: 3px;
    left: -2px;
    width: 30px;
    transform-origin: 100% 50%;
    border-radius: 100px 0 0 100px;
}
.success-checkmark .check-icon::after {
    top: 0;
    left: 30px;
    width: 60px;
    transform-origin: 0 50%;
    border-radius: 0 100px 100px 0;
    animation: rotate-circle 8s ease-in;
}
.success-checkmark .check-icon::before,
.success-checkmark .check-icon::after {
    content: '';
    height: 100px;
    position: absolute;
    background: #fff;
    transform: rotate(-45deg);
}
.success-checkmark .check-icon .icon-line {
    height: 5px;
    background-color: #4CAF50;
    display: block;
    border-radius: 2px;
    position: absolute;
    z-index: 10;
}
.success-checkmark .check-icon .icon-line.line-tip {
    top: 46px;
    left: 14px;
    width: 25px;
    transform: rotate(45deg);
    animation: icon-line-tip 1.412s;
}
.success-checkmark .check-icon .icon-line.line-long {
    top: 38px;
    right: 8px;
    width: 47px;
    transform: rotate(-45deg);
    animation: icon-line-long 1.412s;
}
.icon-circle {
    top: -3px;
    left: -3px;
    z-index: 10;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: absolute;
    box-sizing: content-box;
    border: 4px solid rgba(76, 175, 80, .5);
}
.icon-fix {
    top: 8px;
    width: 5px;
    left: 26px;
    z-index: 1;
    height: 85px;
    position: absolute;
    transform: rotate(-45deg);
    background-color: #fff;
}
@keyframes rotate-circle {
    0% {transform: rotate(-45deg);}
    5% {transform: rotate(-45deg);}
    12% {transform: rotate(-405deg);}
    100% {transform: rotate(-405deg);}
}
@keyframes icon-line-tip {
    0% {
        width: 0;
        left: 1px;
        top: 19px;
    }
    54% {
        width: 0;
        left: 1px;
        top: 19px;
    }
    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }
    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }
    100% {
        width: 25px;
        left: 14px;
        top: 45px;
    }
}
@keyframes icon-line-long {
    0% {
        width: 0;
        right: 46px;
        top: 54px;
    }
    65% {
        width: 0;
        right: 46px;
        top: 54px;
    }
    84% {
        width: 55px;
        right: 0px;
        top: 35px;
    }
    100% {
        width: 47px;
        right: 8px;
        top: 38px;
    }
}
/* END SUCCESS ANIMATION */

/* FAIL ANIMATION */
.fail-checkmark {
    width: 80px;
    height: 115px;
    margin: 0 auto;
}
.fail-checkmark .check-icon {
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: 50%;
    box-sizing: content-box;
    border: 4px solid #dc3545;
}
.fail-checkmark .check-icon::before {
    top: 3px;
    left: -2px;
    width: 30px;
    transform-origin: 100% 50%;
    border-radius: 100px 0 0 100px;
}
.fail-checkmark .check-icon::after {
    top: 0;
    left: 30px;
    width: 60px;
    transform-origin: 0 50%;
    border-radius: 0 100px 100px 0;
    animation: fail-rotate-circle 8s ease-in;
}
.fail-checkmark .check-icon::before,
.fail-checkmark .check-icon::after {
    content: '';
    height: 100px;
    position: absolute;
    background: #fff;
    transform: rotate(-45deg);
}
.fail-checkmark .check-icon .icon-line {
    height: 5px;
    background-color: #dc3545;
    display: block;
    border-radius: 2px;
    position: absolute;
    z-index: 10;
}
.fail-checkmark .check-icon .icon-line.line-tip {
    left: 26px;
    top: 22px;
    width: 50px;
    transform: rotate(45deg);
    transform-origin: left top;
    animation: fail-icon-line-tip 1.412s;
}
.fail-checkmark .check-icon .icon-line.line-long {
    top: 57px;
    right: 7px;
    width: 50px;
    transform: rotate(-45deg);
    transform-origin: left top;
    animation: fail-icon-line-long 1.412s;
}
.fail-checkmark .icon-circle {
    top: -3px;
    left: -3px;
    z-index: 10;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: absolute;
    box-sizing: content-box;
    border: 4px solid rgba(220, 53, 69, 0.5);
}
.fail-checkmark .icon-fix {
    top: 8px;
    width: 5px;
    left: 26px;
    z-index: 1;
    height: 85px;
    position: absolute;
    transform: rotate(-45deg);
    background-color: #fff;
}
@keyframes fail-rotate-circle {
    0% {transform: rotate(-45deg);}
    5% {transform: rotate(-45deg);}
    12% {transform: rotate(-405deg);}
    100% {transform: rotate(-405deg);}
}
@keyframes fail-icon-line-tip {
    0% {
        left: 17px;
        top: 17px;
        width: 0;
    }
    65% {
        left: 17px;
        top: 17px;
        width: 0;
    }
    100% {
        width: 50px;
    }
}
@keyframes fail-icon-line-long {
    0% {
        top: 57px;
        right: 57px;
        width: 0;
    }
    65% {
        top: 57px;
        right: 57px;
        width: 0;
    }
    100% {
        top: 57px;
        right: 7px;
        width: 50px;
    }
}
/* END FAIL ANIMATION */

/* AFY STEPPER */
.afy-stepper {
    display: flex;
    flex-direction: column;
    background-color: #fff;
}
.afy-stepper-header {
    font-weight: 700;
    margin: auto;
    opacity: .5;
}
.afy-stepper ul {
    display: flex;
    position: relative;
    width: 100%;
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: auto;
}
.afy-stepper ul::before {
    content: "";
    position: absolute;
    width: 100%;
    top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.afy-stepper ul li {
    position: relative;
    min-width: 24px;
    max-width: 24px;
    font-size: 12px;
    text-align: center;
    font-weight: 600;
    line-height: .5;
    padding: .5rem;
    margin: .5rem;
    color: #6c757d;
    background-color: #fff;
    border: 1px solid #aeb9c1;
    border-radius: 50%;
    cursor: pointer;
    transition: color ease-in-out 200ms, border-color ease-in-out 200ms, background-color ease-in-out 200ms, box-shadow ease-in-out 100ms;
}
.afy-stepper ul li.disable {
    pointer-events: none;
    color: #ddd;
    border-color: #ddd;
}
.afy-stepper ul li:first-child {margin-left: auto;}
.afy-stepper ul li:last-child {margin-right: auto;}
.afy-stepper ul li:hover {
    color: #fff;
    background-color: #7f8b94;
    border-color: #7f8b94;
}
.afy-stepper ul li:active {
    color: #fff;
    background-color: #28a745;
    border-color: #189735;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, .4);
}
.afy-stepper ul li.active {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
    pointer-events: none;
}
/* AFY STEPPER => END */

/* SYNC ICON ANIMATION */
.btn-big .btn-icon {font-size: 1.5rem;}
.btn-big .btn-title {font-size: 14px;}
.btn.animating {pointer-events: none;}
.animating .btn-icon {animation: syncing 1s linear infinite;}
@keyframes syncing {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(359deg);}
}






/*------------------------------------------
0. RICH TEXT EDITOR
------------------------------------------*/
.rt-editor-container {padding: 16px;}


/*------------------------------------------
01. INDEX(GENERAL) PAGE
------------------------------------------*/

/*------------------------------------------
02. APP-LIST PAGE
------------------------------------------*/
#searchInMyApps input {
    position: absolute;
    right: 18px;
    width: 0;
    height: 31px;
    font-size: .75rem;
    line-height: normal;
    outline-offset: 0;
    padding: 0;
    margin: auto 0 auto auto;
    border-radius: 15.5px;
    border-color: transparent;
    transition: all ease-in-out 300ms;
}
#searchInMyApps input:focus {
    width: 230px;
    padding: 6px 36px 6px 12px;
    background-color: #fff;
    border-color: #00ab34;
    box-shadow: none;
}
#searchInMyApps .fa-search {
    position: absolute;
    top: 8px;
    right: 18px;
    font-size: 15px;
    padding: 7px;
    color: #fff;
    background-color: #00ab34;
    border: 1px solid #00ab34;
    border-radius: 50%;
    transition: color ease-in-out 300ms,background-color ease-in-out 300ms;
    cursor: pointer;
}
#searchInMyApps input:focus ~ .fa-search {
    top: 9px;
    right: 19px;
    color: rgba(98, 0, 238, .33);
    color: rgba(0, 171, 52, .5);
    background-color: #fff;
    border: none;
}

/*------------------------------------------
02. APP-DETAIL PAGE
------------------------------------------*/
.app-detail .app-status,
.app-subpages .app-status {
    margin: 0 0 -2px 0;
}
.admin-card-container {padding: 8px;}
.admin-card-container .afy-card {
    width: 100%;
    margin: 0;
    border-radius: 5px;
    box-shadow: 0 0 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
.admin-card .card-image-container {
    position: relative;
    background-color: rgba(98, 0, 238, .11);

    /* background-color: rgba(0, 171, 52, .11); */
}
.app-detail .admin-card .card-image-container {background-color: rgba(232, 62, 140, .11);}
.admin-card .card-icon {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 32px;
    margin: auto;
    color: #6200ee;
    opacity: .33;
}
.app-detail .admin-card .card-icon {color: #e83e8c;}
.admin-card .card-icon::before {margin: auto;}
.admin-card .title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}
.admin-card .caption {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    margin: .0625rem .75rem .25rem .75rem;
}
.admin-card .caption strong {font-weight: 800;}
.admin-card .bodytext {font-size: 12px;}

#barChart {padding: 8px;}
#lineChart {width: 100%;}




.admin-content.app-detail .content.row > .row.platform-stats {
    width: 100%;
    padding: 2rem;
    margin: 0;
}
.row.platform-stats .col-2 {
    display: flex;
    flex-direction: column;
    position: relative;
    margin: auto -.5px;
    color: #9d6eff;
    color: #6c757d;
    border-width: 0 1px;
    border-style: dashed;
    border-color: #ddd;
}
.row.platform-stats .col-2:first-child {
    margin-left: auto;
    border-left: 0;
}
.row.platform-stats .col-2:last-child {
    margin-right: auto;
    border-right: 0;
}
.row.platform-stats .platform-icon-logo {
    max-width: none;
    font-size: 2rem;
    margin: auto auto 13px auto;
    opacity: 1;
}
.row.platform-stats .platform-icon-logo.fab {
    font-size: 2.25rem;
    margin: auto auto 8px auto;
}
.row.platform-stats .platform-icon-logo.pwa-logo {margin: auto auto 8px auto;}
.stats-card .platform-icon-logo, .stats-card .value {color: #ff8bbb;}
.stats-card.android .platform-icon-logo, .stats-card.android .value {color: #0b9bb3;}
.stats-card.ios .platform-icon-logo, .stats-card.ios .value {color: #49a7ec;}
.stats-card.pwa .platform-icon-logo, .stats-card.pwa .value {color: #6f42c1;}
.stats-card.web .platform-icon-logo, .stats-card.web .value {color: #4b84c1;}
.row.platform-stats .platform-icon-logo.pwa-logo img {
    max-width: 52px;
    margin: 12px auto 0 auto;
}
.row.platform-stats .title {
    font-size: .875rem;
    font-weight: 800;
    margin: 0 auto;
}
.row.platform-stats .value {
    font-size: 1.5rem;
    margin: 0 auto;
}
.row.platform-stats .caption {
    font-style: italic;
    margin: 0 auto auto auto;
}



.afy-card-top-header .card-image-container {
    width: 100%;
    padding-bottom: 40%;
    background-color: rgba(98, 0, 238, .11);
}
.afy-card-top-header .card-icon {
    font-size: 48px;
    color: #6200ee;
    opacity: .33;
}
.afy-card-top-header .fa-cpanel {font-size: 72px;}
.recent-msgs {
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #fff;
    border-radius: .5rem;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 0 0 4px rgba(0, 0, 0, .05);
}
.recent-msgs .header {
    display: flex;
    position: relative;
    padding: 8px 16px;
    color: #6c757d;
}
.recent-msgs .header-txt {
    font-size: 14px;
    font-weight: 700;
    margin: auto auto auto 0;
}
.recent-msgs .basic-action {margin: auto -6px auto auto;}
.recent-msgs .divider {
    position: relative;
    margin: 0;
    border-color: rgba(0, 0, 0, .07);
}
.recent-msgs-container {
    font-size: 14px;
    line-height: 1;
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-type: none;
}
.recent-msgs-container li {
    padding: 0;
    margin: 0;
}
.recent-msgs-container li > a,
.recent-msgs-container li > a:hover {
    display: flex;
    text-decoration: none;
    padding: 16px;
    margin: 0;
    color: inherit;
}
.recent-msgs-container li:last-child {border-radius: 0 0 7px 7px;}
.recent-msgs-container li:nth-last-of-type(odd) {background-color: #f8f9fa;}
.recent-msgs-container .msg-type-1 {color: var(--success);}
.recent-msgs-container .msg-type-2 {color: var(--info);}
.recent-msgs-container .msg-type-3 {color: var(--danger);}
.recent-msgs-container .msg-type-4 {color: var(--primary);}
.recent-msgs-container .msg-type-5 {color: var(--purple);}
.recent-msgs-container .msg-type-6 {color: var(--orange);}
li .msg-icon {
    min-width: 32px;
    font-size: 24px;
    text-align: center;
    margin: auto 8px auto 0;
}
li .msg-txt {margin: auto auto auto 0;}
li .msg-txt .title {
    font-size: 12px;
    font-weight: inherit;
    line-height: normal;
    color: inherit;
}
li .msg-txt .text-muted {line-height: normal;}

/*------------------------------------------
02. APP USER/ADMIN LIST
------------------------------------------*/
.filter-input,.user-list-table,.log-table {width: 100%;}
.table {font-size: 12px;}
.double-input .separator {
    width: 4px;
    height: 4px;
    margin: auto 2px;
    background-color: #bbb;
    border: 0 none;
    border-radius: 50%;
}

/* CUSTOMIZE SELECT OPTION INPUT for USER LIST PAGE */
.select2.select2-container.select2-container--default {
    font-size: 12px;
    color: #999;
    background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
    background-position: calc(100% - 20px) calc(1em + 7px), calc(100% - 15px) calc(1em + 7px), calc(100% - 3.25em) 0;
    background-size: 5px 5px, 5px 5px, 1px 44px;
    background-repeat: no-repeat;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border-radius: .25rem;
}
.select2.select2-container.select2-container--default.select2-container--open {
    background-image: linear-gradient(45deg, #28a745 50%, transparent 50%), linear-gradient(135deg, transparent 50%, #28a745 50%), linear-gradient(to right, #28a745, #28a745);
    background-position: calc(100% - 15px) 1.5em, calc(100% - 20px) 1.5em, calc(100% - 3.25em) 0;
    box-shadow: 0 0 0 2px rgb(40, 167, 69, .3);
    border-color: #28a745;
    border-radius: .25rem .25rem 0 0;
}
.select2.select2-container.select2-container--default ::placeholder {color: #999}
.select2.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    max-width: calc(100% - 40px);
    max-height: 42px;
    white-space: nowrap;
    margin: 0;
    overflow-x: auto;
}
.select2.select2-container .select2-selection--multiple .select2-selection__choice {margin: auto .25rem;}
.select2.select2-container .select2-selection--multiple .select2-selection__choice:first-child {margin: auto .25rem auto .5rem;}
.select2.select2-container.select2-container--default .select2-selection--multiple {
    min-height: auto;
    background: none;
    padding: 0;
    border: none;
    border-radius: 0;
    cursor: text;
}
.select2.select2-container.select2-container--default .select2-search--inline .select2-search__field {
    height: auto;
    padding: 0.75rem 1rem;
    margin: 0;
    border: none;
    outline: none;
    outline-offset: unset;
}
.select2-container--open .select2-dropdown {
    font-size: 12px;
    background-color: #fff;
    border: 1px solid #28a745;
    border-radius: 0 0 .25rem .25rem;
    box-shadow: 0 0 0 2px rgb(40, 167, 69, .3);
}
.select2-container.select2-container--default .select2-results__option {
    display: flex;
    position: relative;
    color: rgb(145, 137, 137);
    padding: 0.75rem 1rem;
}
.select2-container.select2-container--default .select2-results__option.select2-results__option--highlighted {color: #6c757d;}
.select2-container.select2-container--default .select2-results__option--selected {
    color: #28a745;
    background-color: rgb(40 167 69 / 10%);
}
.select2-container.select2-container--default .select2-results__option--selected::after {
    content: "\f00c";
    font-family: 'Font Awesome 5 Free';
    font-size: 10px;
    padding: .032rem .188rem;
    font-weight: 900;
    margin: auto 0 auto auto;
    color: #28a745;
    background-color: #fff;
    border: 1px solid #28a745;
    border-radius: 50%;
}
.select2-container.select2-container--default .select2-results__option:last-child {border-radius: 0 0 calc(.25rem + 1px) calc(.25rem + 1px);}
.select2-container.select2-container--default .select2-results__option.select2-results__option--highlighted {background-color: #f8f9fa}
/* END of -- CUSTOMIZE SELECT OPTION INPUT for USER LIST PAGE */

/*------------------------------------------
03. MESSSAGES
------------------------------------------*/
.basic-search-input {
    position: relative;
    width: 100%;
    padding: .75rem;
    margin: 0;
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .11);
    z-index: 1;
}
.basic-search-input input {
    width: 100%;
    padding: .375rem 2rem .375rem .75rem;
    margin: auto;
}
.basic-search-input .input-icon {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    color: #cfd1d4;
    transition: all ease-in-out 300ms;
}
.messages .recent-msgs {position: relative;}
.messages .recent-msgs .inbox-toolbar {padding: .5rem;}
.messages .inbox-toolbar-btn {
    padding: .5rem .75rem;
    margin: 0 0 0 .5rem;
    color: #6c757d;
}
.messages .inbox-toolbar-btn:first-child {margin: 0;}
.messages .separator + .inbox-toolbar-btn {margin: 0;}
.messages .separator {margin: auto .5rem;}
.messages ul {
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.messages .msg-list > ul {
    height: calc(100vh - 252px);
    max-height: calc(100vh - 252px);
    overflow-x: hidden;
    overflow-y: auto;
}
.messages .msg-list ul li {
    padding: 1rem 1.5rem;
    color: #6c757d;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    transition: color ease-in-out 300ms, background-color ease-in-out 300ms;
    cursor: pointer;
}
.messages .msg-list ul li.active {
    color: #343a40;
    background-color: #f8f9fa;
}
.messages .msg-attachment {
    min-width: 20px;
    font-size: 1rem;
    margin: 0 0 0 -.5rem;
}
.messages .msg-basics {width: calc(100% - 20px);}
.messages .msg-sender {
    display: flex;
    font-size: .7rem;
    font-weight: 700;
    margin: 0 0 .25rem 0;
}
.messages .send-time {
    font-weight: 400;
    margin: auto 0 auto auto;
}
.messages .msg-title {
    font-size: .8rem;
    font-weight: 700;
}
.messages .msg-title.header-txt {font-size: 1rem;}
.messages .msg-short-text {font-size: .75rem;}
.messages .msg-short-text :last-child {margin: 0;}
.messages .msg-detail {
    height: calc(100vh - 255px);
    overflow-x: hidden;
    overflow-y: auto;
}
.messages .msg-body {
    font-size: .8rem;
    padding: 1rem;
}
.messages .msg-body .text-area :last-child, .messages .msg-body :last-child {margin: 0;}
.messages .msg-attachment.true .divider {margin: 1rem 0;}
.messages .msg-attachment.true img {max-width: 100%;}
.messages .floating-toolbar {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 2rem;
    padding: .1rem .35rem .15rem .35rem;
    background-color: #fff;
    border-radius: .25rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .66);
    transform: translate(-50%, 0);
}
.new-msg-panel {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 1rem 1rem 210px;
    z-index: 9999;
}
.new-msg-panel .overlay {
    position: fixed;
    background-color: #000;
    opacity: .66;
}
.new-msg-panel .form {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    padding: 0;
    margin: auto 0 0 auto;
    background-color: #fff;
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: .25rem;
    box-shadow: 0 4px 8px #000;
}
.form-header {
    display: flex;
    flex-direction: row;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.3em;
    padding: 1rem;
    margin: 0;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #ccc;
}
.new-msg-panel .form-group {
    display: flex;
    flex-direction: column;
    font-size: .8rem;
    font-weight: 400;
    padding: 1rem;
    margin: 0;
}
.new-msg-panel .form-footer {
    display: flex;
    flex-direction: row;
    padding: 1rem;
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: #ccc;
}
.file-attachment-container li {
    position: relative;
    padding: .5rem .5rem .5rem .5rem;
    margin: 1rem 0 0 0;
    background-color: rgba(0, 0, 0, .05);
    border-radius: .25rem;
}
.file-attachment-container li:last-child {margin: 0;}
.file-attachment-container img {max-width: 64px;}
.file-attachment-container .file-data {margin: auto .8rem;}
.file-attachment-container .btn-remove {
    position: absolute;
    top: 1.25rem;
    right: 1rem;
    font-size: 1.125rem;
    padding: 0;
    background: none;
    color: #000;
    opacity: .5;
    transition: opacity ease-in-out 300ms;
}
.file-attachment-container .btn-remove:hover {opacity: 1;}
.new-msg-panel .form .afy-input-button-group {margin: 0 0 0 auto;}
.new-msg-panel .form .btn-send-msg {margin: 0 0 0 1rem;}

/*------------------------------------------
03. NOTIFICATIONS
------------------------------------------*/
.notification-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
    margin: 0 -.5rem;
}
.notification-container .col-lg-4 {
    padding: 0 .5rem;
    margin: 0 0 1rem 0;
}
.notification-container .col-lg-4 .card {
    height: 100%;
    border: 0px none;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .22);
}
.notification-container .col-lg-4 .card-title {
    font-size: .875rem;
    font-weight: 700;
}
.notification-container .col-lg-4 .card-title .icon-left {
    font-size: inherit;
    margin: 0 .25rem 0 0;
}
.notification-container .col-lg-4 p {font-size: .8rem;}
.notification-container .col-lg-4 p:last-child {margin: 0;}
.notification-container .col-lg-4 .card .list-group-item {
    background-color: transparent;
    border-width: 1px 0 0 0;
    border-color: rgba(0, 0, 0, .044);
}
.notification-container .col-lg-4 .card .btn-remove {
    color: #aaa;
    border-color: #ccc;
}
.notification-container .col-lg-4 .card .btn-remove:hover {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

/*------------------------------------------
04. PAYMENTS % INVOICES
------------------------------------------*/
.payments  .content.row,
.invoices  .content.row {
    height: calc(100vh - 52px);
    padding: 47px 0 0 0;
}
.payments table th, .payments table td, .invoices table th, .invoices table td {padding: 1rem;}
.payments table .badge-pill,
.invoices table .badge-pill {
    padding: .25rem .5rem;
    border-radius: 50em;
}
.payments table .action-container .btn,
.invoices table .action-container .btn {
    font-size: 12px;
    padding: 4px 8px;
    margin: 0 4px 0 0;
}
.payments table .action-container .btn:last-child, .invoices table .action-container .btn:last-child {margin: 0;}
.payments table .action-container .btn-pay:hover {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}
.payments table .action-container .btn-renew:hover {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}
.payments table .action-container .btn-remove:hover {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.payments table .action-container .btn-support:hover,
.invoices table .action-container .btn-support:hover {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}
.payments table .action-container .btn-bug-report:hover,
.invoices table .action-container .btn-bug-report:hover {
    color: #343a40;
    background-color: #ffc107;
    border-color: #ffc107;
}
.invoices .btn-file-view {
    font-size: 1.5rem;
    line-height: normal;
    padding: 4px 3px 4px 4px;
    color: #6c757d;
    background: none;
    border: 0px none;
    border-radius: 3px;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.invoices .btn-file-view:hover {
    color: #0a611d;
    background: #28a745;
}
.invoice-modal .modal-title {font-size: 1rem;}
.invoice-modal .btn-dismiss .title {font-size: .8rem;}
.invoice-modal .modal-footer .btn {
    color: #aaa;
    border-color: #ccc;
}
.invoice-modal .modal-footer .btn:hover {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}
.payment .price-samples {margin: 0;}
.payment .price-sample ul, .payment .price-sample .divider, .payment .price-sample .action-btn-group {display: none;}
.payment-animation {
    margin: auto;
}
.payment-animation [class*="-checkmark"] {
    margin: 0 auto -1.75rem auto;
    transform: scale(.6);
}
.payment-animation .check-icon::before, .payment-animation .check-icon::after, .payment-animation .icon-fix {background-color: #f8f9fa;}
.payment-animation-footer {
    display: flex;
    flex-direction: column;
    padding: .5rem 1rem;
    margin: auto auto 3rem auto;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    opacity: 0;
}
.payment-animation-footer .info-text {
    max-width: 300px;
    text-align: center;
}
.payment-animation-footer .btn {
    display: flex;
    font-size: 0.8rem;
    padding: .5rem 1rem;
    margin: auto;
    border-radius: 50em;
}
.payment-animation-footer .btn-icon {
    font-size: 1rem;
    margin: auto .5rem auto auto;
}
.payment-animation-footer .afy-btn-group {display: flex;}
.payment-animation-footer .afy-btn-group .btn {margin: auto .25rem;}
.payment-animation-footer .afy-btn-group .btn:first-child {margin-left: 0;}
.payment-animation-footer .afy-btn-group .btn:last-child {margin-right: 0;}

/*------------------------------------------
04. CMS
------------------------------------------*/
.cms-admin > .content.row {padding: 48px 0 0 0;}
.cms-main-sidebar {
    position: relative;
    width: 200px;
    min-height: calc(100vh - 99px);
    font-size: .8rem;
    white-space: nowrap;
    color: #6c757d;
    background-color: #f6f7f8;
    border-right: 1px solid rgba(0, 0, 0, .11);
    transition: width ease-in-out 100ms;
    overflow: hidden;
    z-index: 3;
}
.cms-main-sidebar .header {
    position: relative;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.cms-main-sidebar .header-title {
    font-weight: 700;
    padding: 12.5px 16px;
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.cms-main-sidebar .header-title .btn-collapser {
    text-align: center;
    min-width: 24px;
    width: 24px;
    padding: 5px 0px;
    margin: -4px -8px -4px auto;
}
.cms-main-sidebar.minimize .header-title .btn-collapser {
    margin-right: 0;
}
.cms-main-sidebar ul {
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.cms-main-sidebar > ul {
    height: calc(100vh - 195px);
    overflow-x: hidden;
    overflow-y: auto;
}
.cms-main-sidebar > ul > li {background-color: #fff;}
.cms-main-sidebar li a {
    display: block;
    position: relative;
    width: 100%;
    color: #6c757d;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.cms-main-sidebar li a .mat-ripple-fx {
    display: flex;
    padding: 8px 16px;
}
.cms-main-sidebar li a.active {
    color: #fff;
    background-color: #6c757d;
}
.cms-main-sidebar li ul {
    list-style: none;
    list-style-type: none;
    padding: 0;
    background-color: #f6f7f8;
}
.cms-main-sidebar li > ul {
    margin: -1px 0 0 0;
    border-top: 1px solid rgba(0, 0, 0, .05);
}
.cms-main-sidebar li > ul:last-child li:last-child a {border-bottom: 1px solid transparent;}
.cms-main-sidebar > ul > li > a {font-weight: 700;}
.cms-main-sidebar > ul > li > a::after {
    content: "";
    position: absolute;
    top: 16px;
    right: 14px;
    border-width: 0 4px 4px 4px;
    border-style: solid;
    border-color: #6c757d transparent;
    transition: all ease-in-out 200ms;
}
.cms-main-sidebar > ul > li > a.collapsed::after {transform: rotate(180deg);}
.cms-main-sidebar > ul > li > a > .mat-ripple-fx {padding-right: 40px;}
.cms-main-sidebar .plugin-icon {
    min-width: 24px;
    text-align: center;
    padding: 5px 0;
}
.cms-main-sidebar.minimize {width: 56px;}
.cms-main-sidebar .header .txt,
.cms-main-sidebar .plugin-name {
    width: 100%;
    white-space: nowrap;
    margin: auto auto auto 0;
    overflow: hidden;
    transition: width ease-in-out 300ms;
}
.cms-main-sidebar.minimize .header .txt,
.cms-main-sidebar.minimize .plugin-name {
    width: 0;
}
.cms-main-sidebar.minimize .filter-container .input-icon {
    right: 8px;
    top: 8px;
    padding: 11px 14px;
    cursor: pointer;
}
.cms-main-sidebar .collapser-btn {border-top: 1px solid rgba(0, 0, 0, .1);}
.cms-main-sidebar.minimize .collapser-btn .collapser-txt {
    width: 0;
    overflow: hidden;
}
.cms-main-sidebar.minimize .collapser-btn::after {right: 22px;}
.plugin-name-helper {
    position: fixed;
    font-size: 12px;
    padding: 4px 8px;
    background-color: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, .66);
    border-radius: 4px;
    z-index: 5;
}

/* CMS CONTAINER */
.cms-admin .cms-container {
    width: calc(100% - 200px);
    height: calc(100vh - 99px);
    color: #6c757d;
    background-color: #fff;
    transition: width ease-in-out 100ms;
}
.cms-admin .cms-container.maximize {width: calc(100% - 56px);}
.cms-admin .cms-container::after {
    content: none;
    top: 44px;
    left: 200px;
    background-color: #ececec;
    z-index: 2;
}
.cms-admin .cms-container.adaptor-added::after {content: none;}

/* Header Section */
.cms-header .cms-group-title {min-height: 45px;}
.cms-admin .cms-group-title .label-icon {margin: auto 4px auto 0;}
.cms-admin .cms-group-title .label-icon.btn-edit {
    padding: 7px 6.5px 7px 7.5px;
    border-radius: 50%;
}
.cms-admin .cms-header .filter-container {
    width: 100%;
    max-width: 201px;
}
.cms-admin .cms-group-title .basic-action {
    min-width: 190px;
    justify-content: center;
}
.cms-group-title .separator {
    height: 48px;
    margin: -8px 9px;
}
.cms-admin .content-prop.extended-features {
    position: relative;
    padding: 0;
    margin: 0 0 16px 0;
    border-radius: 26px;
    z-index: 30;
}
.cms-admin .content-prop.extended-features.opened {border-radius: 26px 26px 8px 8px;}
.extended-features .publish-target {min-width: 190px;}
.cms-admin .extended-features-header {
    display: flex;
    position: relative;
    flex-direction: row;
    padding: 12px;
    margin: 0;
    z-index: 3;
}
.cms-admin .extended-features-header .separator {height: 28px;}
.extended-feature {
    display: flex;
    flex-direction: row;
    width: auto;
    padding: 0;
    margin: auto 0;
}
.extended-feature-label {
    font-size: 13px;
    font-weight: 700;
}
.extended-feature .btn {
    display: flex;
    font-size: .8rem;
    padding: .25rem .75rem;
    margin: 0;
    color: #6c757d;
    border: 1px solid #ced4da;
}
.extended-feature .btn:hover {border-color: #28a745;}
.extended-feature .btn.active {
    color: #28a745;
    border-color: #28a745;
    box-shadow: 0 0 0 .2rem rgba(40, 167, 69, .5);
    pointer-events: none;
}
.extended-feature .btn-icon,
.extended-feature .btn-title {
    line-height: normal;
    margin: auto 0;
}
.extended-feature .btn-icon + .btn-title {
    margin: auto 0 auto 4px;
}
.extended-feature .label {
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    padding: 0 8px 0 0;
    margin: auto 0 auto auto;
}



/* Umarım Geçici Olacak */
.content-prop.add-publish-target {
    flex-direction: row;
    width: 100%;
}
.add-publish-target .afy-dropdown-group {
    min-width: 190px;
    width: auto;
    margin: auto auto auto 0;
}
.add-publish-target .label {margin: auto 0 auto auto;}
.add-publish-target .afy-dropdown-group .dropdown-menu {overflow: auto;}
.add-publish-target .afy-dropdown-group .dropdown-item.publish-content {border-top: 1px solid rgba(0, 0, 0, .07);}
.afy-grouped-prop .add-publish-target {padding: 8px;}



.cms-admin .afy-dropdown-group .dropdown-label {margin-right: auto;}
.cms-admin .afy-dropdown-group .dropdown-item.added {background-color: #f8f9fa;}
.cms-admin .afy-dropdown-group .dropdown-item.added::after {
    content: "\f00c";
    font-family: 'Font Awesome 5 Free';
    font-size: 10px;
    font-weight: 900;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    padding: 4px;
    margin: auto -4px auto 12px;
    color: #28a745;
    border: 1px solid #28a745;
    border-radius: 50em;
}
.extended-feature-prop-header {
    display: flex;
    padding: 8px 8px 8px 16px;
    border-top: 1px solid rgba(0, 0, 0, .07);
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.extended-feature-prop-header .title {
    font-size: 13px;
    font-weight: 700;
    margin: auto 0;
}
.extended-feature-prop-header .close-btn {
    margin: auto 0 auto auto;
    opacity: .66;
}
.extended-feature-prop-header .close-btn:hover {opacity: 1;}
.extended-feature-prop-header .close-btn .label-icon {
    font-size: .8rem;
    line-height: normal;
    margin: auto 0;
    border: 1px solid #82878c;
}
.extended-feature-prop-body {
    margin: 0;
    padding: 0;
    border-radius: 0 0 8px 8px;
}
.extended-feature-prop.settings .afy-inline-mat-input-row {
    padding: 0 0 0 1rem;
    margin: auto 0;
}
.extended-feature-prop.settings .afy-inline-mat-input-row .title {
    font-size: 13px;
    font-weight: 700;
    margin: auto 0 auto auto;
}
.extended-feature-prop.settings .afy-inline-mat-input-row .afy-radio-width-label {padding: .5rem;}
.extended-feature-prop.settings .extended-feature-prop-body .separator {height: 64px;}
.extended-feature-prop.settings .extended-feature-prop-body .extended-feature {padding: 0 1rem 0 0;}



/* List Section */
.scroll-box-container {
    position: relative;
    padding: 50px 0 0 0;
}
.scroll-box-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 200px;
    top: 51px;
    bottom: 0;
    width: 1px;
    background-color: #ececec;
    z-index: 2;
}
.scroll-box-container.with-filter-options {padding: 0;}
.scroll-box-container.pre-def {padding: 0;}
.scroll-box-container.sub-list {
    margin-left: -10px;
    border-left: 1px solid transparent;
}
.scroll-box-container.without-search {padding: 0;}
.cms-admin .cms-container .scroll-box {
    flex-direction: column;
    width: 210px;
    height: calc(100vh - 243px);
    overflow-x: hidden;
    overflow-y: auto;
}
.scroll-box-container.pre-def .scroll-box {height: calc(100vh - 145px);}
.scroll-box-container .branch-group-search {
    position: absolute;
    left: 0;
    top: 0;
    right: 9px;
    height: 51px;
    background-color: white;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: rgba(0,0,0,.1);
    z-index: 5;
}
.scroll-box-container.with-filter-options .branch-group-search {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 201px;
    min-height: 51px;
    height: auto;
}
.scroll-box-container.with-filter-options .branch-group-search .content-filter-group {
    display: flex;
    position: relative;
}
.scroll-box-container.with-filter-options .filter-icon {
    max-width: 28px;
    font-size: 12px;
    padding: 9px 7px 5px 7px;
    margin: auto 0 auto 8px;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
}
#filterIconClose {
    color: #fff;
    background-color: #6c757c;
}
.scroll-box-container.with-filter-options .branch-group-search.filter-container .form-group {width: 162px;}
.scroll-box-container.with-filter-options .filter-group {
    display: none;
    margin: 0;
    box-shadow: none;
    border: none;
}
.scroll-box-container.with-filter-options .filter-group .group-title {
    display: block;
    width: 200px;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
    margin: 0 -8px;
    border-width: 1px 0;
    border-style: solid;
    border-color: rgba(0, 0, 0, .1);
}
.scroll-box-container.with-filter-options .filter-group .footer {
    display: flex;
    width: 200px;
    padding: 8px 12px;
    margin: 0 -8px;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.scroll-box-container.with-filter-options .filter-group .btn-cms-save-all {width: 100%;}
.scroll-box-container .add-new-action,
.scroll-box-container .filter-group {
    position: relative;
    width: 200px;
    padding: 8px;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .075);
    z-index: 4;
}
.scroll-box-container .filter-group {padding: 0 8px;}
.scroll-box-container .add-new-action .basic-action {
    display: flex;
    font-size: 12px;
}
.scroll-box-container .add-new-action .basic-action .btn-icon {margin: auto 2px auto auto;}
.scroll-box-container .add-new-action .basic-action .btn-title {margin: auto auto auto 2px;}
.cms-admin .cms-card-list {
    position: relative;
    flex-direction: column;
    width: 200px;
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    z-index: 2;
}
.cms-admin .cms-card-list.has-status-item-list .item-status {
    font-size: 11px;
    padding: 6px 8px 0 8px;
    margin: 2px -8px auto -8px;
    border-width: 1px 0 0 0;
    border-style: solid;
}
.cms-admin .cms-card-list.has-status-item-list .item-status.is-waiting {
    color: #dc3545;
    border-color: rgba(220, 53, 69, .4);
}
.cms-admin .cms-card-list.has-status-item-list .item-status.is-confirmed {
    color: #28a745;
    border-color: rgba(40, 167, 69, .5);
}
.cms-admin .cms-card-list li {
    display: flex;
    position: relative;
    flex-direction: column;
    flex-shrink: 0;
    padding: 16px;
    border-bottom: 1px solid #ececec;;
}
.cms-admin .cms-card-list li.selected {
    padding: 16px 16px 8px 16px;
    background-color: #ececec;
}
.cms-card-list li::after {border-color: transparent transparent transparent #ececec;}
.cms-admin .cms-card-list li:last-child {border: none;}
.scroll-box-container.pre-def .cms-card-list li {
    padding: 0;
    border-bottom: 1px solid #ececec;
}
.scroll-box-container.pre-def .cms-card-list li.selected {
    color: #343a40;
    background-color: #ececec;
}
.cms-admin .cms-simple-card-item .card-live-data {flex-direction: row;}
.cms-admin .card-live-data {
    padding: 8px;
    box-shadow: 0 0 8px rgba(0, 0, 0, .1);
    border-radius: 6px;
    z-index: 1;
}
.cms-admin .selected .card-live-data {box-shadow: 0 0 8px rgba(0, 0, 0, .3);}
.scroll-box-container.pre-def .card-live-data {
    padding: 16px;
    background: none;
    box-shadow: none;
    border-radius: 0;
}
.cms-admin .card-edit-tools {
    height: 0;
    overflow: hidden;
    margin: -8px auto auto auto;
    box-shadow: 0 0 4px rgba(0, 0, 0, .2);
    opacity: 0;
    transition: height ease-in-out 200ms, margin-top ease-in-out 200ms;
    z-index: 0;
}
.cms-admin .selected .card-edit-tools {
    display: flex;
    height: 32px;
    overflow: hidden;
    margin: 8px auto auto auto;
    opacity: 1;
}
.cms-admin .selected .card-edit-tools.multiple {
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
}
.card-edit-tools.multiple .edit-tools-btn {
    padding: 4px;
    margin: 0 2px;
    background-color: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, .2);
    border-radius: 16px;
}
.cms-card-list .group-icon {
    font-size: 16px;
    margin: auto auto 4px 0;
}
.cms-card-list .cms-simple-card-item .group-icon {margin: auto 8px auto 0;}
.cms-card-list .cms-simple-card-item .group-icon.long-title {margin-top: 1px;}
.cms-admin .selected .card-edit-tools .btn-title {
    font-size: .75rem;
    line-height: 1.5;
    margin: auto auto auto 2px;
}
.cms-admin .cms-card-list .cms-simple-card-item .title {margin: auto auto auto 0;}

/* List Section :::: Blog */

/* List Section :::: Events */

/* List Section :::: Appointment */

/* List Section :::: Course */

/* List Section :::: Carousel & Gallery */
.cms-admin .carousel-item-card .card-live-data {padding: 0;}
.afy-carousel-bg-gradient {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    background: linear-gradient(transparent 10%, #fff 50%);
    z-index: 1;
}
.cms-admin .carousel-item-card .card-live-data .title {
    padding: 0 8px;
    margin: -10px 0 0 0;
    z-index: 1;
}
.cms-admin .carousel-item-card .card-live-data .bodytext {
    padding: 0 8px;
    margin: 0;
    z-index: 1;
}
.cms-admin .carousel-item-card .card-live-data .caption {
    font-size: 9px;
    padding: 0 8px 0 8px;
    margin: 0 0 8px 0;
    opacity: .66;
    z-index: 1;
}
.carousel-item-card .afy-carousel-divider {
    display: none;
    width: 66%;
    height: 2px;
    margin: 2px 8px;
    background-color: #6c757d;
    opacity: .5;
    z-index: 1;
}
.carousel-item-card .afy-carousel-divider.active {display: block;}
.afy-carousel-indicator {
    display: flex;
    position: relative;
    justify-content: center;
    padding: 0 0 5px 0;
    opacity: .5;
    z-index: 1;
}
.afy-carousel-indicator span {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    margin: auto 3px;
    background-color: rgba(0, 0, 0, .2);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, .3);
    border-radius: 4px;
    opacity: .6;
}
.afy-carousel-indicator span.active {opacity: 1;}
.afy-carousel-indicator span.active::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 1px;
    right: 1px;
    bottom: 1px;
    background-color: rgba(0, 0, 0, .3);
    border-radius: 50%;
}
.scroll-box-container.sub-list::after {
    content: "";
    height: 100%;
    top: 0;
    right: 9px;
    position: absolute;
    border-right: 1px solid #ebebeb;
}
.cms-admin .cms-card-list li.cms-gallery-card-item .card-live-data {
    padding: 0;
}
.cms-gallery-card-item .card-live-data .card-image {
    margin: 0;
}
.fancy-title-group {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80%;
    padding: .5rem;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3));
    z-index: 1;
}
.cms-admin .card-live-data .fancy-title-group .title {
    font-size: .875rem;
    margin: auto 0 0 0;
    color: #fff;
}
.cms-admin .card-live-data .fancy-title-group .bodytext {
    font-size: .75rem;
    margin: 0;
    color: #fff;
    opacity: .5;
}

/* List Section :::: Messaging */
.scroll-box-container.messaging-group-list,.scroll-box-container.main-list {z-index: 4;}
.scroll-box-container.messaging-group-list .scroll-box {height: calc(100vh - 196px);}
.scroll-box-container.messaging-group-list .add-new-action {
    width: 201px;
    padding: 9px 9px;
    border-right: 1px solid rgba(0, 0, 0, .075);
}
.scroll-box-container.messaging-group-list li.selected,.scroll-box-container.main-list li.selected {background-color: #ccc;}
.scroll-box-container.messaging-group-list li::after,
.scroll-box-container.main-list li::after {
    right: -8px;
    border-color: transparent transparent transparent #ccc;
}
.scroll-box-container.messaging-group-list .cms-inbox-item {flex-direction: row;}
.scroll-box-container.messaging-group-list .cms-inbox-item .group-icon {margin: auto 4px auto 0;}
.scroll-box-container.messaging-group-list .cms-inbox-item .title {margin: auto 0;}
.scroll-box-container.messaging-list {
    padding: 0;
    margin-left: -10px;
    z-index: 3;
}
.scroll-box-container.messaging-list.one-list-only {margin: 0;}
.scroll-box-container.messaging-list::after {
    content: "";
    position: absolute;
    top: 51px;
    right: 9px;
    bottom: 0;
    border-right: 1px solid #ececec;
}
.scroll-box-container.messaging-list .scroll-box {height: calc(100vh - 195px);}
.scroll-box-container.messaging-list .filter-container {
    width: 201px;
    border-right: 1px solid rgba(0, 0, 0, .075);
    border-bottom: 1px solid rgba(0, 0, 0, .075);
}
.scroll-box-container.messaging-list .filter-container .form-group {padding: 8.5px 9px;}
.cms-admin .cms-editor-container.messaging, .cms-admin .scroll-box-container + .cms-editor-container.messaging {width: calc(100% - 400px);}
.cms-admin .scroll-box-container.messaging-list.one-list-only + .cms-editor-container.messaging {width: calc(100% - 200px);}









/* Editor Section */
.scroll-box-container.pre-def.d-none + .cms-editor-container {
    width: 100%;
    margin: 0;
    z-index: 3;
}


/* Ortak Bir Modal Yapalım */
.afy-alert-modal.afy-modal-md.cms-edit-content-modal .afy-alert {min-width: 480px;}
.afy-alert-modal.afy-modal-lg.cms-edit-content-modal .afy-alert {min-width: 800px;}
.afy-alert-modal.afy-modal-lg.cms-edit-content-modal .alert-modal-body {
    max-height: calc(100vh - 200px);
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.alert-modal-body .action-btn-container {
    display: flex;
    margin: 8px 0 0 0;
}

@media (min-width:1920px) {
    .afy-alert-modal.afy-modal-lg.cms-edit-content-modal .afy-alert {min-width: 1024px;}
}


/* Blog, News, Events, Course ve benzerleri için ortak layout */
.row.cms-layout {
    padding: 0;
    margin: 0;
}
.row.cms-layout [class*="col"] {padding: 16px;}
.row.cms-layout .cms-basics-data {border-right: 1px solid rgba(0, 0, 0, .1);}
.row.cms-layout .simple-data {
    width: 240px;
    padding: 1rem;
}
.cms-basics-data .input-group {margin-top: 16px;}
.cms-basics-data .input-group .mat-outline-input-container {width: 100%;}
.cms-basics-data .input-group .mat-outline-input-container:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}
.row.cms-layout .content-status {display: flex;}
.content-status .title {
    font-size: 12px;
    margin: auto 0 auto -8px;
}
.content-status .afy-radio-width-label {
    height: auto;
    padding: 0 8px;
    margin: auto 0;
}
.content-status .separator {margin: auto 4px;}
.row.cms-layout-footer,
.cms-admin .afy-alert-modal .row.cms-layout-footer.alert-modal-footer {
    padding: 0;
    margin: 0;
}
.row.cms-layout-footer [class*="col"] {
    display: flex;
    padding: 12px 16px;
}
.row.cms-layout-footer .content-status-container {border-right: 1px solid rgba(0, 0, 0, .1);}
.row.cms-layout-footer .content-status {
    display: flex;
    margin: auto;
}
.row.cms-layout-footer .content-status .item-status {
    font-size: 12px;
    margin: auto auto auto 8px;
}
.row.cms-layout-footer .content-status .item-status.is-waiting {color: #dc3545;}
.row.cms-layout-footer .content-status .item-status.is-confirmed {color: #28a745;}
.cms-layout .row.plus-data {
    padding: 0 4px 4px 4px;
    margin: -8px -12px 0 -12px;
}
.cms-layout .row.plus-data > .row.input-group {
    padding: 0;
    margin: 0;
}
.cms-layout .row.plus-data [class*="col"] {padding: 0 8px;}
.plus-data > .row.input-group .mat-outline-input-container {
    width: auto;
    padding: 7px 0;
    margin: 0 .25rem;
}
.plus-data > .row.input-group .mat-outline-input-container:first-child {margin-left: 0;}
.plus-data > .row.input-group .mat-outline-input-container:last-child {margin-right: 0;}
.row.cms-layout .simple-input-editor {
    display: flex;
    flex-direction: column;
}
.row.cms-layout .simple-input-editor .mat-outline-input-container.fill-height {height: 100%;}
.row.cms-layout .simple-input-editor .mat-outline-input-container.fill-height:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}
.row.cms-layout .simple-input-editor .mat-outline-input-container.fill-height textarea {height: 100%;}
.non-resize textarea {resize: none;}





/* TinyMCE */
.afy-admin-page .tox-tinymce {
    border: 1px solid #ccc;
    border-radius: 4px;
}
.row.cms-layout .rt-editor-h-100 .tox-tinymce, .row.cms-layout .rt-plus-data textarea + .tox-tinymce {min-height: 100% !important;}
.row.cms-layout .rt-plus-data .plus-data + textarea + .tox-tinymce {min-height: calc(100% - 62px) !important;}
.row.cms-layout .rt-plus-data .plus-data + .plus-data + textarea + .tox-tinymce {min-height: calc(100% - 124px) !important;}
.row.cms-layout .rt-plus-data .plus-data + .plus-data + .plus-data + textarea + .tox-tinymce {min-height: calc(100% - 186px) !important;}
.row.cms-layout .rt-plus-data .plus-data + .plus-data + .plus-data + .plus-data + textarea + .tox-tinymce {min-height: calc(100% - 248px) !important;}


.row.cms-layout .rt-plus-data.textarea-rows-4 .plus-data + textarea + .tox-tinymce {
    min-height: calc(100% - 118px) !important;
    height: auto !important;
}
.row.cms-layout .rt-plus-data.textarea-rows-4 .plus-data + .filter-title.small + textarea + .tox-tinymce {
    min-height: calc(100% - 146px) !important;
    margin-top: 8px;
}
.rt-plus-data textarea {resize: none;}








/* TOX TINY MCE */
.tox .tox-menubar + .tox-toolbar-overlord .tox-toolbar__primary {border-bottom: 1px solid #ccc;}
.afy-admin-page .tox .tox-mbtn {color: #6c757d;}
.afy-admin-page .tox .tox-tbtn {
    width: 28px;
    height: 28px;
    margin: 0;
    border-radius: 0;
}
.afy-admin-page .tox .tox-split-button__chevron {width: 16px;}
.afy-admin-page .tox .tox-tbtn svg {
    fill: #90959a;
    transform: scale(.8);
}
.afy-admin-page .tox :not(svg):not(rect) {
    font-size: 12px;
    padding: 0;
    text-transform: none;
}
.afy-admin-page .tox .tox-split-button {
    margin: 0;
    border-radius: 0;
}
.afy-admin-page .tox .tox-mbtn {
    padding: 4px;
    margin: 0;
    border-radius: 0;
}
.afy-admin-page .tox .tox-statusbar {height: 24px;}
.afy-admin-page .tox .tox-statusbar a,
.afy-admin-page .tox .tox-statusbar__wordcount {padding: 4px 8px;}
.afy-admin-page .tox .tox-statusbar__path-item,
.afy-admin-page .tox:not([dir=rtl]) .tox-statusbar__path-item {
    padding: 4px 8px;
    margin: 0;
}
.afy-admin-page .tox .tox-statusbar__path-divider,
.afy-admin-page .tox:not([dir=rtl]) .tox-statusbar__path-divider {
    display: block;
    font-size: 14px;
    margin: 2px 0;
}
.afy-admin-page .tox .tox-statusbar__path-divider {clear: both;}
.afy-admin-page .tox .tox-statusbar__resize-handle {
    padding: 0;
    margin: auto 0 0 0;
}
.afy-admin-page .tox .tox-statusbar__resize-handle svg {fill: #ddd;}
.afy-admin-page .tox .tox-tbtn--enabled {background: #e0e1e2;}
.tox-tinymce-aux {z-index: 9999 !important;}
/* END OF TOX TINY MCE */






/* Editor Section :::: Market Place */
/* .marketplace-main .cms-basics-data, .marketplace-main .cms-rt-editor {pointer-events: none;}
.marketplace-main .cms-basics-data,
.marketplace-main .cms-rt-editor,
.marketplace-main .tox-tinymce iframe {
    opacity: .5;
    transition: opacity ease-in-out 300ms;
}
.marketplace-main #btnEdit {pointer-events: all;}
.marketplace-main.edit .cms-basics-data, .marketplace-main.edit .cms-rt-editor {pointer-events: all;}
.marketplace-main.edit .cms-basics-data, .marketplace-main.edit .cms-rt-editor, .marketplace-main.edit .tox-tinymce iframe {opacity: 1;} */













.cms-admin .radio-checkbox-options {display: flex;}
.cms-admin .cms-editor-container {
    width: 100%;
    height: calc(100vh - 145px);
    margin: 0;
}
.cms-admin .scroll-box-container + .cms-editor-container {
    width: calc(100% - 200px);
    margin: 0 0 0 -10px;
}
.cms-admin .cms-editor-container.two-col-list {width: calc(100% - 401px);}
.cms-admin .cms-editor {padding: 16px;}
.cms-admin .content-prop {margin: 0 0 1rem 0;}
.cms-admin .content-prop.overflow-hidden {
    max-height: calc(100vh - 178px);
    margin: 0;
}
.cms-admin .content-prop:last-child {margin: 0;}
.cms-admin .simple-content .content-prop {max-width: 800px;}
.cms-admin .afy-input-btn-group {
    font-size: .8rem;
    padding: 4.5px .75rem;
    border: 1px solid #ced4da;
    border-radius: 50em;
    cursor: pointer;
    transition: color ease-in-out 300ms,background-color ease-in-out 300ms,border-color ease-in-out 300ms,box-shadow ease-in-out 100ms;
}
.cms-admin .afy-input-btn-group:hover,
.cms-admin .afy-input-btn-group:focus,
.cms-admin .afy-input-btn-group:active {
    color: #fff;
    border-color: #28a745;
    background-color: #28a745;
}
.cms-admin .card-live-data .title {
    font-size: 12px;
    margin: 0 0 4px 0;
}
.cms-admin .afy-input-btn-group .input-title {white-space: nowrap;}
.cms-admin .card-live-data .caption {
    font-size: 10px;
    margin: 0 0 4px 0;
}
.cms-admin .card-live-data .bodytext,
.cms-admin .card-live-data .card-helper-txt {
    font-size: 11px;
    line-height: normal;
    margin: 0 0 4px 0;
}
.cms-admin .card-live-data .bodytext:last-child, .cms-admin .card-live-data .card-helper-txt:last-child {margin: 0;}
.cms-pill-tab.nav-tabs {
    position: relative;
    font-size: 12px;
    padding: 13px 14px;
    margin: -16px -16px 0 -16px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    border: none;
    z-index: 1;
}
.cms-pill-tab .tab-content {
    height: calc(100% - 50px);
    padding: 16px;
    background: #f8f9fa;
    overflow-x: hidden;
    overflow-y: auto;
}
.cms-pill-tab.nav-tabs .nav-item {margin: 0 4px;}
.cms-pill-tab.nav-tabs .nav-link {
    padding: 2px 12px;
    color: #6c757d;
    border-radius: 50em;
    border-color: #dee2e6;
    transition: color ease-in-out 200ms, background-color ease-in-out 200ms;
}
.cms-pill-tab.nav-tabs .nav-link.active {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}
.cms-pill-tab.nav-tabs .nav-link:active {
    color: #28a745;
    border-color: #28a745;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, .33);
}
.cms-pill-tab.nav-tabs + .tab-content {
    height: calc(100vh - 195px);
    padding: 16px;
    margin: 0 -16px -16px -16px;
    background: #f8f9fa;
    overflow-x: hidden;
    overflow-y: auto;
}

.cms-admin .afy-grouped-prop {background-color: #f8f9fa;}
.afy-grouped-prop .content-prop {
    padding: 0;
    background-color: #fff;
}
.afy-grouped-prop .group-info-prop {border-bottom: 1px solid rgba(0, 0, 0, .1);}
.afy-grouped-prop .afy-inline-mat-input-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 8px;
    margin: 0;
}
.afy-grouped-prop .afy-inline-mat-input-row.one-line .btn-sm {padding: 12px 20px;}
.afy-inline-mat-input-row [class*="col-"] {padding: 0 8px;}
.afy-grouped-prop .content-prop-header {
    margin: 0;
    padding: 16px;
}

.afy-grouped-prop .content-prop-header.collapser {
    border: none;
    border-radius: .5rem .5rem 0 0;
    opacity: 1;
}
.afy-grouped-prop .content-prop-header .collapser-title {
    font-size: inherit;
    font-weight: inherit;
}
.afy-grouped-prop .content-prop-header.collapser .collapser-icon {
    margin: auto 0 auto auto;
    transform: rotate(180deg);
    transition: transform ease-in-out 300ms;
}
.afy-grouped-prop .content-prop-header.collapser.collapsed .collapser-icon {transform: rotate(0);}
.afy-grouped-prop .content-prop-header.collapser + .collapsible-content .cms-layout {border-top: 1px solid rgba(0, 0, 0, 0.1);}



/*------------------------------------------------
CATALOGUE
------------------------------------------------*/
.catalogue-cms-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 31;
}
.catalogue-cms-header .cms-group-title {border: none;}
.afy-fancy-dropdown .dropdown-toggle {
    font-size: .8rem;
    padding: 5.5px 12px;
}
.afy-fancy-dropdown.show .dropdown-toggle {border-radius: .25rem .25rem 0 0;}
.dropdown.show .dropdown-toggle:focus, .dropdown.show .dropdown-toggle:active {box-shadow: none;}
.dropdown-toggle::after {
    vertical-align: .1em;
    margin: auto 0 auto 6px;
    border-width: 5px 5px 0 5px;
    border-style: solid;
    transition: transform ease-in-out 300ms;
}
.dropdown.show .dropdown-toggle::after {transform: rotate(180deg);}
.afy-fancy-dropdown .dropdown-menu {
    min-width: calc(100% + .25rem);
    padding: 0;
    margin: 0;
    color: #6c757d;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.3);
    border-color: #28a745;
    border-radius: 0 .25rem .25rem .25rem;
}
.afy-fancy-dropdown.dropdown .group-title {
    font-size: .85rem;
    font-weight: 700;
    padding: .5rem .75rem;
    color: #6c757d;
    background: linear-gradient(to bottom, #fff 0%, #fafafa 100%);
    border-radius: 0 calc(.25rem + 1px) 0 0;
    cursor: default;
    pointer-events: none;
}
.afy-fancy-dropdown.dropdown .dropdown-item {
    color: #6c757d;
    padding: 0;
}
.afy-fancy-dropdown.dropdown .dropdown-item:active {background-color: rgb(0, 123, 255, .1);}
.afy-fancy-dropdown.dropdown .mat-radio-btn-container {
    font-size: 0.8rem;
    padding: .75rem;
    margin: 0;
}
.afy-fancy-dropdown.dropdown .mat-radio-btn-container .label-icon {
    position: relative;
    min-width: 1.75rem;
    font-size: 1.25rem;
    margin: auto 0 auto 0;
}
.afy-fancy-dropdown.dropdown .mat-radio-btn-container .input-label {
    line-height: 1.5;
    margin: auto 0;
}
.afy-fancy-dropdown.dropdown .mat-radio-btn-container input[type=radio] {
    top: .5rem;
    right: .75rem;
    width: 1.25rem;
    height: 1.25rem;
    pointer-events: none;
}
.afy-fancy-dropdown.dropdown .mat-radio-btn-container .label-icon.label-aspc-icon {
    width: 1.75rem;
    margin: auto .5rem auto 0;
}
.label-icon.label-aspc-icon .square {
    width: 100%;
    border: 1px dashed #6c757d;
}
.label-icon.label-aspc-icon .aspc-16x9 {padding: 0 0 56.25% 0;}
.label-icon.label-aspc-icon .aspc-4x3 {padding: 0 0 75% 0;}
.label-icon.label-aspc-icon .horizontal-line {
    position: absolute;
    left: -4px;
    bottom: -4px;
    width: calc(100% + 4px);
    border-top: 1px solid #6c757d;
}
.label-icon.label-aspc-icon .vertical-line {
    position: absolute;
    left: -4px;
    bottom: -4px;
    height: calc(100% + 4px);
    border-left: 1px solid #6c757d;
}
.label-icon.label-aspc-icon .horizontal-line::after {
    content: "";
    position: absolute;
    right: -4px;
    top: -2px;
    border-width: 2px 0 2px 4px;
    border-style: solid;
    border-color: transparent transparent transparent #6c757d;
}
.label-icon.label-aspc-icon .vertical-line::before {
    content: "";
    position: absolute;
    right: -1px;
    top: -4px;
    border-width: 0 2px 4px 2px;
    border-style: solid;
    border-color: transparent transparent #6c757d transparent;
}

.afy-grouped-prop .afy-inline-mat-input-row.one-line.min-size .btn-sm {padding: 6.5px 12px 6.5px 10px;;}
.afy-grouped-prop .cat-nav.afy-inline-mat-input-row {font-weight: 500;}
.cat-depth-icon {
    margin: auto -4px auto 4px;
    color: #a7acb1;
    border-radius: 50%;
    transition: all ease-in-out 200ms;
}
.cat-nav .main-cat {
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    padding: 4px 12px;
    margin: auto 8px auto 0;
    color: #28a745;
    border: 1px solid #28a745;
    border-radius: 50em;
    transition: all ease-in-out 200ms;
    cursor: pointer;
}
.cat-nav .main-cat:hover {
    color: #fff;
    background-color: #28a745;
}
.cat-nav .main-cat:active {box-shadow: 0 0 0 3px rgba(40, 167, 69, .33);}
.main-cat .cat-depth-icon {
    min-width: 16px;
    line-height: 1.2;
    padding: 0 3px 0 5px;
    margin: auto -6px auto 2px;
    color: #fff;
    background-color: #28a745;
    transition: all ease-in-out 200ms;
}
.cat-nav .main-cat:hover .cat-depth-icon {
    color: #28a745;
    background-color: #fff;
}
.cat-nav .cat-list {
    display: flex;
    flex-wrap: wrap;
    margin: 4px 8px 4px -2px;
}
.category-nav-item {
    line-height: 1.5;
    white-space: nowrap;
    padding: 4px 12px;
    margin: 4px 2px;
    border: 1px solid #ccc;
    border-radius: 50em;
    transition: all ease-in-out 200ms;
    cursor: pointer;
}
.category-nav-item.active {
    color: #999;
    background-color: #eee;
    border-color: #ddd;
}
.category-nav-item:hover {
    color: #fff;
    background-color: #a7acb1;
    border-color: #a7acb1;
}
.category-nav-item:hover .cat-depth-icon {color: #fff;}
.category-nav-item:last-child .cat-depth-icon {display: none;}
.cat-nav .form-inline {margin: auto 0;}
.active-cat-prop {
    display: flex;
    padding: 16px;
}
.active-cat-name-group {
    display: flex;
    margin: auto auto auto 0;
}
.active-cat-name {
    font-size: 13px;
    white-space: nowrap;
    margin: auto 8px auto 0;
}
.active-cat-name {font-weight: 700;}
.active-cat-name-group .btn {
    min-width: 30px;
    padding: .5rem 0rem;
    margin: auto 2px;
    transition: all ease-in-out 200ms;
}
.active-cat-name-group .btn-save, .active-cat-name-group .btn-cancel {display: none;}
.active-cat-name-group:hover .btn-edit, .active-cat-name-group:hover .btn-delete {opacity: 1;}
#categoryTitle {
    height: calc(1.5em + .75rem + 2px);
    font-weight: 500;
    line-height: 1.55;
    padding: .375rem 1.125rem;
    border: 1px solid #ddd;
    color: #28a745;
    background-color: rgba(40, 167, 69, .1);
    border-radius: 50em;
    transition: all ease-in-out 200ms;
}
#categoryTitle:hover {
    border: 1px solid #28a745;
    background-color: #fff;
}
#categoryTitleInput {font-weight: 500;}
.active-cat-name-group #categoryTitleInput, .active-cat-name-group.editing #categoryTitle, .active-cat-name-group.editing .btn-edit {display: none;}
.active-cat-name-group.editing #categoryTitleInput, .active-cat-name-group.editing .btn-save, .active-cat-name-group.editing .btn-delete, .active-cat-name-group.editing .btn-cancel {display: inline-block;}
.active-cat-name-group.editing #categoryTitleInput {
    height: auto;
    padding: .719rem 1rem;
    margin: auto .5rem auto .75rem;
    border-color: #ccc;
}
.active-cat-name-xtr-btn-group {margin: auto 0 auto auto;}
.active-cat-name-xtr-btn-group .btn {
    padding: 5px 12px;
    margin: auto .25rem auto 0;
}
.active-cat-name-xtr-btn-group .btn:last-child {margin: auto 0;}
.create-group-header {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.create-group-header .action-btn-group {display: flex;}
.scrollable-table-wrapper {
    position: relative;
    width: 100%;
    max-height: calc(100vh - 371px);
    margin: 0 0 -1px 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.scrollable-table-wrapper .selected {background-color: rgba(40, 167, 69, .1);}
.output-group {transition: max-width ease-in-out 300ms;}
.output-group.not-selected {max-width: 0;}
#productTable th, #productTable td {vertical-align: middle;}
/*------------------------------------------------
./CATALOGUE
------------------------------------------------*/









.afy-grouped-prop .added-data-prop {
    display: flex;
    flex-direction: column;
    background-color: #f8f9fa;
    background-color: rgba(0, 0, 0, .02);
}
.afy-grouped-prop .added-data-prop.no-footer {border-radius: 0 0 8px 8px;}
.afy-grouped-prop .added-data-prop .content-prop-header {background-color: #fff;}
.afy-grouped-prop .afy-data-table-content {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
}
.afy-grouped-prop .afy-data-table-content.full-features-table {padding: 0 16px 16px 16px;}
.afy-grouped-prop .afy-data-table-content.full-features-table.full-width {padding: 0;}
.data-table-header.bg-no,.data-table-footer.bg-no {background-color: transparent;}
.data-table-header.rounded-no,.data-table-footer.rounded-no {border-radius: 0;}
.afy-grouped-prop .table {
    width: 100%;
    margin: 0 0 16px 0;
    background-color: #fff;
}
.afy-grouped-prop .action-group {
    padding: 16px 8px;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.afy-grouped-prop .action-group .btn {
    padding: 8px 12px;
    margin: 0 8px;
}
.afy-grouped-prop .afy-data-table-content .table th,
.afy-grouped-prop .afy-data-table-content .table td,
.afy-grouped-prop .afy-data-table-content .table th:last-child,
.afy-grouped-prop .afy-data-table-content .table td:last-child {
    vertical-align: top;
    border-width: 1px;
}
th.platform-title,
td.platform-title {
    width: 1px;
    white-space: nowrap;
}
td.platform-title {color: #6c757d;}
td.platform-title .platform-data {display: flex;}
td.platform-title .platform-icon {
    font-size: 16px;
    margin: auto 0;
}
.linkedin .platform-icon {color: #0072b1;}
.pinterest .platform-icon {color: #c8232c;}
.youtube .platform-icon {color: #c4302b;}
.facebook .platform-icon {color: #3b5998;}
.twitter .platform-icon {color: #38A1F3;}
.instagram .platform-icon {color: #e83e8c;}
.web .platform-icon {color: #4b84c1;}

.btn-share {
    display: inline-flex;
    padding: .25rem .75rem .25rem .5rem;
    margin: auto;
    border-radius: 4px;
}
.btn-share .platform-icon {margin: auto;}
.btn-share .btn-title {
    font-size: .75rem;
    margin: auto auto auto 4px;
}
.facebook-share {
    color: #fff;
    background-color: #3b5998;
}
.twitter-share {
    color: #fff;
    background-color: #38A1F3;
}

/* Editor Section :::: Advertisement */
.adv-platform-group {
    padding: 0;
    border-right: 1px solid rgba(0, 0, 0, .07);
}
.adv-platform-group:last-child {border: none;}
.adv-platform-header {
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.adv-platform-group ul.adv-list {
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    min-height: 190px;
    max-height: 190px;
    overflow-x: hidden;
    overflow-y: auto;
}
.adv-list li {
    padding: 12px;
    margin: 16px;
    background-color: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, .15);
    border-radius: 6px;
    cursor: pointer;
    transition: all ease-in-out 200ms;
}
.adv-list li.active {
    border-radius: 6px 12px 6px 6px;
    box-shadow: 0 0 8px rgba(0, 0, 0, .19), 0 0px 0px 1px rgba(40, 167, 69, .5), 0 0px 0px 4px rgba(40, 167, 69, .2);
}
.adv-list li .platform-data-group {display: flex;}
.adv-list li .platform-data {
    min-width: calc(100% - 24px);
    max-width: calc(100% - 24px);
}
.adv-list li .title {font-size: 12px;}
.adv-list li .bodytext {font-size: 11px;}
.adv-list li .item-status {
    min-width: 20px;
    max-width: 20px;
    font-size: 10px;
    padding: 4px;
    margin: -8px -8px auto auto;
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, .8);
    border-radius: 10px;
    box-shadow: 0 0px 0px 2px rgba(40, 167, 69, .2);
    transform: scale(0);
    transition: transform ease-in-out 200ms;
}
.adv-list li.active .item-status {transform: scale(1);}

/* Editor Section :::: Blog */
.blog-main {padding: 0;}
.blog-settings-basics {margin: 0;}
.blog-cover-image {
    padding: 16px;
    border-right: 1px solid rgba(0, 0, 0, .1);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.blog-text-data {
    display: flex;
    flex-direction: column;
    padding: 0;
}
.blog-text-data .row {
    height: 100%;
    padding: 8px 0;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.blog-text-data .row.blog-status {justify-content: center;}
.blog-text-data .row [class*="col-"] {margin: auto 0;}
.blog-text-data .content-prop-header {
    font-size: 12px;
    padding: 0;
    margin: auto 8px auto 0;
    border: none;
}
.blog-text-data .radio-checkbox-options .separator {margin: auto 8px;}

/* Editor Section :::: Maps */
.maps-settings-basics {margin: 0;}
.maps-cover-image {
    padding: 16px;
    border-right: 1px solid rgba(0, 0, 0, .1);
}
.maps-text-data {
    display: flex;
    flex-direction: column;
    padding: 0;
}
.maps-text-data .row {
    height: 100%;
    padding: 8px 0;
    margin: 0;
}
.maps-text-data .row [class*="col-"] {margin: auto 0;}

/* Editor Section :::: Team */
.team-settings-basics {margin: 0;}
.team-cover-image {
    min-width: 210px;
    max-width: 210px;
    padding: 16px;
    border-right: 1px solid rgba(0, 0, 0, .1);
}
.team-text-data {
    display: flex;
    flex-direction: column;
    padding: 0;
}
.team-text-data .row {
    padding: 8px;
    margin: 0;
}
.team-text-data .row [class*="col"] {
    padding: 0 8px;
    margin: 0;
}

/* Editor Section :::: Contact */
.contact-settings-basics {
    padding: 8px;
    margin: 0;
}
.contact-settings-basics .row {margin: 0;}
.contact-settings-basics [class*="col"] {
    padding: 0;
    margin: 0;
}
.contact-settings-basics .row [class*="col"] {padding: 0 8px;}
.contact-settings-basics .col.address {padding: 0 8px;}
.contact-settings-basics .col.address textarea {height: 110px;}

/* Editor Section :::: Events */
.event-main {padding: 0;}
.event-main.content-prop.overflow-hidden {max-height: none;}
.event-settings-basics {margin: 0;}
.event-main .event-basics {
    flex-wrap: nowrap;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.event-main .event-basics > [class*="col-"] {padding: 8px 16px;}
.event-main .event-basics .col-md-5 {border-right: 1px solid rgba(0, 0, 0, .1);}
.event-cover-image {
    padding: 16px;
    border-right: 1px solid rgba(0, 0, 0, .1);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.event-text-data {
    display: flex;
    flex-direction: column;
    padding: 0;
}
.event-text-data .row {
    flex-shrink: 0;
    padding: 8px 0;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.event-text-data .row.event-status {justify-content: center;}
.event-text-data .row [class*="col-"] {margin: auto 0;}
.event-text-data .content-prop-header {
    font-size: 12px;
    padding: 0;
    margin: auto 8px auto 0;
    border: none;
}
.event-text-data .radio-checkbox-options .separator {margin: auto 8px;}
.event-main .program-schedule {
    font-size: 12px;
    padding: 12px 16px;
}
.event-main .program-schedule .input-group {
    flex-wrap: nowrap;
    margin: 8px 0;
}
.event-main .program-schedule .input-group label {
    white-space: nowrap;
    margin: auto 8px auto 0;
}
.event-main .program-schedule .input-group input {
    width: 270px;
    margin: auto 0 auto auto;
}
.afy-data-table-content {padding: 0;}
.afy-data-table-content .content-prop-header {
    padding: 12px 16px;
    margin: 0;
}
.afy-data-table-content .table {border-width: 0;}
.afy-data-table-content .table thead {border-bottom: 2px solid #dee2e6;}
.afy-data-table-content .table th,.afy-data-table-content .table td {border-width: 0 1px 1px 0;}
.afy-data-table-content .table .link-url {word-break: break-all;}
.afy-data-table-content .table th:last-child,.afy-data-table-content .table td:last-child {border-right-width: 0;}








.afy-custom-data-table .option-circle {
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    vertical-align: middle;
    padding: 1px 0;
    color: #fff;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 50%;
}
.afy-custom-data-table .app-basic {display: flex;}
.afy-custom-data-table .app-status-icon {
    font-size: 8px;
    margin: auto .25rem auto 0;
}
.afy-custom-data-table .app-name {margin: auto 0;}
.afy-custom-data-table .app-status-icon.passive {color: #6c757d;}
.afy-custom-data-table .app-status-icon.active {color: #17a2b8;}
.afy-custom-data-table .plan-name {
    font-size: 11px;
    padding: 3.5px 12px;
    border: 1px solid;
    border-radius: 50em;
}
.afy-custom-data-table .plan-name.starter {
    color: #28a745;
    border-color: #28a745;
}
.afy-custom-data-table .plan-name.standard {
    color: #6f42c1;
    border-color: #6f42c1;
}
.afy-custom-data-table .plan-name.advanced {
    color: #49a7ec;
    border-color: #49a7ec;
}
.afy-custom-data-table .plan-period, .afy-custom-data-table .start-date, .afy-custom-data-table .expire-date {color: #6c757d;}
.afy-custom-data-table .start-date, .afy-custom-data-table .expire-date {font-weight: 700;}
/* .afy-custom-data-table .plan-period.annualy {}
.afy-custom-data-table .plan-period.monthly {} */
.afy-custom-data-table .plan-status {
    padding: 2.5px 12px;
    border: 1px solid;
    border-radius: 50em;
}
.afy-custom-data-table .plan-status.active {
    color: #17a2b8;
    border-color: #0792a8;
}
.afy-custom-data-table .plan-status.passive {
    color: #6c757d;
    border-color: #6c757d;
}




.afy-full-width-custom-data-table {
    width: auto;
    margin: 0;
}
.afy-custom-data-table .btn-only {
    width: 1px;
    white-space: nowrap;
    text-align: center;
    padding: .75rem .5rem;
}
.afy-custom-data-table thead th.sorting.btn-only {padding-right: 1.5rem;}
.afy-custom-data-table .not-include {color: #6d7275;}
/* .afy-custom-data-table thead th.sorting,.afy-custom-data-table thead th.sorting_asc,.afy-custom-data-table thead th.sorting_desc {padding-right: .75rem;} */
.afy-custom-data-table .btn-only .btn {
    display: inline-flex;
    width: 30px;
    height: 30px;
    line-height: normal;
    padding: 0;
}
.afy-custom-data-table .btn-only.action-row .btn {
    width: 100%;
    height: auto;
    line-height: 1.5;
    white-space: nowrap;
}
.afy-custom-data-table .btn-only.action-row .btn .btn-icon {
    width: 30px;
    margin: 0 .75rem 0 0;
    padding: .5625rem;
    border-right: 1px solid;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.afy-custom-data-table .btn-only.action-row .btn-outline-info:hover, .afy-custom-data-table .btn-only.action-row .btn-outline-info:hover .btn-icon {border-color: #058096;}
.afy-custom-data-table .btn-only.action-row .btn-outline-secondary:hover, .afy-custom-data-table .btn-only.action-row .btn-outline-secondary:hover .btn-icon {border-color: #465057;}
.afy-custom-data-table .btn-only.action-row .btn .btn-title {margin: auto auto auto 0;}


.afy-custom-data-table .btn-only .btn::before {margin: auto;}
.afy-data-table-content .action-group {padding: 16px;}
.afy-custom-data-table .action-btn-group {text-align: left;}
.afy-custom-data-table .action-btn-group .btn {
    width: auto;
    padding: .125rem .75rem;
}
.afy-custom-data-table .afy-popper-body .action-btn-group .btn {height: auto;}
.afy-custom-data-table .user-cell, .afy-custom-data-table .date-cell {white-space: nowrap;}
.afy-custom-data-table .user-icon {
    display: inline-flex;
    position: relative;
    font-size: 16px;
    color: rgba(0, 0, 0, .29);
    background-color: rgba(0, 0, 0, .1);
}
.afy-custom-data-table .user-icon::before {margin: auto;}
.afy-custom-data-table .user-photo {
    position: absolute;
    padding: 2px;
    border-radius: 50%;
}
.afy-custom-data-table .user-photo[src=""] {display: none;}
.afy-custom-data-table .user-icon + .user-name {margin-left: 4px;}
.afy-custom-data-table .comment-preview {
    display: block;
    position: relative;
    padding: 16px;
    margin: 0 0 10px 0;
    background-color: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, .3);
    border-radius: 8px;
}
.afy-custom-data-table .comment-preview::before {
    content: "";
    display: block;
    position: absolute;
    left: 30px;
    bottom: -8px;
    width: 10px;
    height: 16px;
    background-color: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, .3);
    transform: rotate(60deg);
}
.afy-custom-data-table .comment-preview::after {
    content: "";
    display: block;
    position: absolute;
    left: 20px;
    bottom: 0;
    width: 30px;
    height: 12px;
    background-color: #fff;
}
table.afy-custom-data-table.standard-tab-nav {border: none;}
.afy-custom-data-table.standard-tab-nav thead th {border-top: 0 none;}
.content-prop .afy-custom-data-table.full tr th:first-child, .content-prop .afy-custom-data-table.full tr td:first-child {border-left: 0 none;}
.content-prop .afy-custom-data-table.full tr th:last-child, .content-prop .afy-custom-data-table.full tr td:last-child {border-right: 0 none;}
.content-prop .afy-custom-data-table.full tr:last-child td {border-bottom: 0 none;}
.content-prop .afy-custom-data-table.full tr:last-child td:first-child {border: 0 none;}
.afy-custom-data-table.with-head-and-foot.standard-tab-nav .data-table-header {
    background-color: transparent;
    border-width: 0 1px 1px 1px;
}
.afy-custom-data-table.with-head-and-foot.standard-tab-nav .data-table-footer {background-color: transparent;}

.filled-inline-tab-nav {margin: 0 -1px;}
.afy-custom-data-table.with-head-and-foot.standard-tab-nav.filled-inline-tab-nav .data-table-header,
.afy-custom-data-table.with-head-and-foot.standard-tab-nav.filled-inline-tab-nav .data-table-footer {
    border: none;
}
/* Editor Section :::: Appointment */
.cms-admin .add-new-first-time {
    position: absolute;
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.cms-container.empty .cms-xtr-header, .cms-container.empty::after, .cms-container.empty .appointment-rule-thumb, .cms-container.empty .cms-editor-container {display: none;}
.appointment-data-header .textarea-container {height: calc(100% - 8px);}
.appointment-data-header textarea {height: 100%;}
.appointment-data-officer .content-prop-header {padding: 4px 16px 16px 16px;}
.officer-schedule {margin: -12px -4px;}
.officer-schedule .mat-search-input .dropdown-list {max-height: 300px;}
.officer-dropdown .dropdown-item {border-bottom: 1px solid rgba(0, 0, 0, .07);}
.officer-dropdown .dropdown-item:last-child {border: none;}
.cms-admin .officer-photo {
    width: 48px;
    height: 48px;
    margin: auto 8px auto 0;
    border-radius: 50%;
}
.cms-admin .officer-titr {font-size: 11px;}
.officer-dropdown .add-new .officer-photo {border: 1px solid #28a745;}
.officer-dropdown .officer-photo {
    display: flex;
    width: 36px;
    height: 36px;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #28a745;
}
.selected-dropdown .officer-photo {
    width: 20px;
    height: 20px;
}
.officer-dropdown .officer-name-titr {
    display: flex;
    margin: auto auto auto 0;
}
.officer-dropdown .officer-titr {margin: auto 4px auto auto;}
.cms-admin .officer-name {font-weight: 700;}
.cms-admin .afy-alert-modal {display: none;}
.cms-admin .afy-alert-modal.open {display: flex;}
.cms-admin .afy-alert-modal.open .afy-alert {animation: scale_modal 200ms forwards ease-in;}
@keyframes scale_modal {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
}
.cms-admin .afy-alert-modal .alert-modal-body, .cms-admin .afy-alert-modal .alert-modal-footer {padding: 16px;}
.cms-admin .afy-alert-modal .dataTables_wrapper {padding: 0;}
.cms-admin .afy-alert-modal .table {margin: 0;}
.cms-admin .afy-alert-modal .table th:nth-child(1), .cms-admin .afy-alert-modal .table td:nth-child(1), .cms-admin .afy-alert-modal .table th:nth-child(2), .cms-admin .afy-alert-modal .table td:nth-child(2) {text-align: center;}
.cms-admin .afy-alert-modal .table thead th, .cms-admin .afy-alert-modal .table thead td {padding: .75rem 2rem;}
.cms-admin .afy-alert-modal .table tbody th, .cms-admin .afy-alert-modal .table tbody td {padding: .25rem 2rem;}
.cms-admin .afy-alert-modal .table tbody th:nth-child(2), .cms-admin .afy-alert-modal .table tbody td:nth-last-child(2), .cms-admin .afy-alert-modal .table tbody th:last-child, .cms-admin .afy-alert-modal .table tbody td:last-child {padding: 0 .5rem;}
.cms-admin .afy-alert-modal .table tbody td.branches {padding: .5rem;}
.cms-admin .afy-alert-modal .table tbody td .group-name {
    display: inline-block;
    position: relative;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 12px;
    margin: 4px;
    color: #f8f9fa;
    background-color: #6c757d;
    border-radius: 50em;
    cursor: default;
}
.cms-admin .afy-alert-modal .table tbody td .group-name:first-child {margin-right: 0;}
.cms-admin .afy-alert-modal .table tbody td .group-name .btn-remove {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 23px;
    text-align: center;
    padding: 4.5px;
}
.cms-admin .afy-alert-modal .table tbody td .group-name:hover .btn-remove  {display: block;}
.cms-admin .afy-alert-modal .table tbody td select {
    width: 100%;
    font-size: 10px;
}
.cms-admin .afy-alert-modal .officer-photo {margin: auto;}
#officerAdd .afy-alert {min-width: 600px;}
#officerAdd .alert-modal-body {display: flex;}
#officerAdd .officer-name-titr {
    width: 100%;
    margin: -10px 0 0 16px;
}
.afy-alert-modal .upload-preview-container.officer-photo {
    min-width: 128px;
    width: 128px;
    height: 128px;
    margin: auto 0 16px 0;
    border-radius: 0;
}
.officer-photo .uploaded-preview, .officer-photo .uploaded-preview .aspc-1x1 {position: relative;}
.officer-photo .uploaded-preview .afy-input-btn-group-container {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: auto;
}
.officer-photo .uploaded-preview .afy-input-btn-group {
    display: flex;
    flex-direction: row;
    position: relative;
    width: auto;
    font-size: 12px;
    padding: 4px 8px;
    margin: auto;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 15px;
    overflow: visible;
    opacity: .66;
    cursor: pointer;
    transition: color ease-in-out 300ms,background-color ease-in-out 300ms,border-color ease-in-out 300ms,box-shadow ease-in-out 100ms;
}
.officer-photo .uploaded-preview.uploaded .afy-input-btn-group {display: none;}
.officer-photo .uploaded-preview.uploaded .helper {
    display: block;
    border: none;
    opacity: 0;
    transition: opacity ease-in-out 300ms;
}
.officer-photo .afy-input-btn-group-container:hover .helper {opacity: 1;}
.officer-photo .uploaded-preview .helper .btn {
    min-width: 48px;
    width: 48px;
    max-width: 48px;
    font-size: 24px;
    padding: 5px 0;
    margin: auto;
    background-color: #fff;
    border-radius: 24px;
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
    transition: color ease-in-out 300ms,background-color ease-in-out 300ms,border-color ease-in-out 300ms,box-shadow ease-in-out 100ms;
}
.officer-photo .uploaded-preview .helper .btn:hover,
.officer-photo .uploaded-preview .helper .btn:focus,
.officer-photo .uploaded-preview .helper .btn.active {
    color: #fff;
    background-color: #dc3545;
    border-color: #fff;
}
.officer-photo .uploaded-preview .afy-input-btn-group:hover,
.officer-photo .uploaded-preview .afy-input-btn-group:focus,
.officer-photo .uploaded-preview .afy-input-btn-group:active {
    color: #fff;
    border-color: #28a745;
    background-color: #28a745;
    opacity: 1;
}
.officer-photo .uploaded-preview .helper {
    display: none;
    min-width: 48px;
    width: 48px;
    max-width: 48px;
    margin: auto;
}
.added-officers-container {margin: 12px 0 0 0;}
.added-officers-container .dataTables_wrapper {
    padding: 0;
    margin: 0 -16px;
}
.added-officers-container .data-table-header {
    padding: 8px 16px;
    border-width: 1px 0 0 0;
    border-radius: 0;
}
.added-officers-container .data-table-content .table {
    margin: 0;
    border: none;
    table-layout: auto;
}
.added-officers-container .table-bordered th,
.added-officers-container .table-bordered td {
    padding: 8px;
    vertical-align: middle;
    white-space: nowrap;
}
.added-officers-container .table.table-bordered td {padding: 4px 8px;}
.added-officers-container .table.table-bordered th::before, .added-officers-container .table.table-bordered td::before, .added-officers-container .table.table-bordered th::after, .added-officers-container .table.table-bordered td::after {bottom: 7px;}
.added-officers-container .table-bordered .officer-photo-cell {
    width: 63px;
    min-width: 63px;
}
.added-officers-container .table-bordered .branches {
    min-width: 300px;
    white-space: normal;
}
.added-officers-container .table-bordered .add-group-cell {
    width: 100px;
    max-width: 100px;
}
.added-officers-container .table-bordered .btn-only {
    width: 46px;
    white-space: nowrap;
    text-align: center;
}
.added-officers-container .table-bordered .btn-only .btn {
    width: 30px;
    padding: 8px 0;
    text-align: center;
}
.added-officers-container .table-bordered .officer-photo-cell::before,.added-officers-container .table-bordered .officer-photo-cell::after {content: none;}
.added-officers-container .table-bordered th:first-child {border-width: 1px 1px 2px 0;}
.added-officers-container .table-bordered td:first-child {border-width: 1px 1px 1px 0;}
.added-officers-container .table-bordered th:last-child {border-width: 1px 0 2px 1px;}
.added-officers-container .table-bordered td:last-child {border-width: 1px 0 1px 1px;}
.added-officers-container .data-table-footer {
    padding: 8px 16px;
    border-width: 0 0 1px 0;
    border-radius: 0;
}
.added-officers-container .officer-photo {
    width: 48px;
    height: 48px;
    margin: auto;
}
.added-officers-container .table .group-name {
    display: inline-block;
    position: relative;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 12px;
    margin: 4px;
    color: #f8f9fa;
    background-color: #6c757d;
    border-radius: 50em;
    cursor: default;
}
.added-officers-container .table .group-name:first-child {margin-right: 0;}
.added-officers-container .table .group-name .btn-remove {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 23px;
    text-align: center;
    padding: 4.5px;
}
.added-officers-container .table .group-name:hover .btn-remove {display: block;}
.schedule-calendar select {
    width: 100%;
    height: calc(1.5em + 12px);
    font-size: 12px;
}
.added-officers-container .table-bordered select {
    width: 100%;
    height: 24px;
    font-size: 10px;
}
.added-officers-container .action-group {
    padding: 16px;
    margin: 0 -16px -4px -16px;
    border-radius: 0 0 8px 8px;
}

.check-connection-overlay {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}
.check-connection-overlay.floatable-size {
    flex-direction: column;
    position: relative;
    width: auto;
    height: auto;
    margin: auto;
}
.check-connection-overlay.floatable-size .info-text {
    max-width: 240px;
    font-size: 14px;
    text-align: center;
    margin: 1rem auto 3rem auto;
}
.cms-container > .check-connection-overlay {padding: 45px 0 0 201px;}
.check-connection-overlay .aligner {
    display: flex;
    position: relative;
    flex-direction: column;
    width: 100%;
    margin: 0;
    background-color: #fff;
    border-radius: 4px;
}
.check-connection-overlay.saving .aligner {background-color: rgba(0, 0, 0, .66);}
.cms-container > .check-connection-overlay .aligner {border-radius: 0;}
.table-hover tbody .schedule-officer:hover {background-color: inherit;}
.added-officers-container .table-bordered .schedule-officer td {
    background-color: #f8f9fa;
    border: 0 none;
}
.table-hover tbody .schedule-active, .table-hover tbody .schedule-active:hover {background-color: rgba(40, 167, 69, .1);}
.schedule-container {
    margin: 8px;
    background-color: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 0 0 3px rgba(0, 0, 0, .1);
    border-radius: 8px;
}
.schedule-header {
    padding: 16px 8px 16px 16px;
    margin: 0;
    border-bottom: 1px solid #dee2e6;
}
.schedule-content {
    padding: 0;
    margin: 0;
}
.schedule-content [class*="col"] {
    padding: 0;
    border-right: 1px solid rgba(0, 0, 0, .1);
}
.schedule-content [class*="col"]:last-child {border: none;}

.schedule-content [class*="col"] .schedule-calendar {padding: 16px;}
.schedule-calendar .weekdays,
.schedule-calendar .days {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-type: none;
}
.schedule-calendar .weekdays {
    font-weight: 700;
    border-bottom: 1px solid #ddd;
}
.schedule-calendar .weekdays li,
.schedule-calendar .days li {
    width: calc(14.2857142857% + 1px);
    text-align: center;
    line-height: 1.4;
    padding: 15px 8px;
    margin: -.5px;
    border-width: 1px;
    border-style: solid;
    border-color: #ddd;
    transition: color ease-in-out 300ms, background-color ease-in-out 300ms, box-shadow ease-in-out 50ms;
    cursor: pointer;
}
.schedule-calendar .days li:hover {
    color: #6c757d;
    background-color: rgba(108, 117, 125, .1);
}
.schedule-calendar .days li.selected:hover {
    color: #fff;
    background-color: rgba(40, 167, 69, .66);
}
.schedule-calendar .days li.selected,
.schedule-calendar .days li:active {
    font-weight: 800;
    color: #28a745;
    background-color: rgba(40, 167, 69, .2);
    border-color: #28a745;
    z-index: 1;
}
.schedule-calendar .days li:active {
    border-radius: 4px;
    box-shadow: 0 0 0 4px rgba(40, 167, 69, .5);
}
.schedule-calendar .days li.day-off {
    color: #f1aeb5;
    background-color: rgba(220, 53, 69, .1);
    border-color: #f1aeb5;
    pointer-events: none;
    z-index: 1;
}
.schedule-calendar .month-name,
.schedule-calendar .year {
    position: relative;
    z-index: 1;
}
.schedule-calendar .month-name {
    width: 70%;
    margin: 0 4px 0 36px;
}
.schedule-calendar .year {
    width: 30%;
    margin: 0 36px 0 4px;
}
.added-officers-container .table-bordered .schedule-calendar select {
    font-size: 12px;
    height: calc(1.5em + 12px);
}
.schedule-calendar .months {
    display: flex;
    position: relative;
    margin: 0 0 8px 0;
}
.schedule-calendar .monthly-nav {
    display: flex;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    transform: translate(0, -50%);
}
.schedule-calendar .monthly-nav .nav-icon {
    width: 24px;
    font-size: 12px;
    text-align: center;
    padding: 5px;
    color: #6c757d;
    border: 1px solid #6c757d;
    border-radius: 50%;
    cursor: pointer;
    opacity: .3;
    transition: opacity ease-in-out 300ms;
}
.schedule-calendar .monthly-nav .nav-icon:hover {opacity: 1;}
.schedule-calendar .monthly-nav .prev {
    padding: 5px 5px 5px 3px;
    margin: auto auto auto 0;
}
.schedule-calendar .monthly-nav .next {
    padding: 5px 3px 5px 5px;
    margin: auto 0 auto auto;
}
.schedule-content [class*="col"] .title {
    display: flex;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    padding: 8px;
    color: #6c757d;
}
.schedule-content [class*="col"].daily-availability .title {padding: 12px 8px 11px 8px;}
.schedule-content [class*="col"] .title .btn {
    line-height: 1;
    padding: 4px 8px 4px 6px;
}
.schedule-content .afy-checkbox-group .afy-checkbox-width-label, .edit-group-officer .afy-checkbox-group .afy-checkbox-width-label {padding: 8px;}
.general-availability .afy-checkbox-width-label label,
.edit-group-officer .afy-checkbox-width-label label {
    width: 100%;
    margin: auto 0;
}
.general-availability .description-label,
.edit-group-officer .description-label {
    font-size: 12px;
    font-weight: 500;
}
.general-availability .afy-checkbox-width-label input[type="checkbox"],
.edit-group-officer .afy-checkbox-width-label input[type="checkbox"] {
    -webkit-appearance: none;
    box-sizing: content-box;
    width: 16px;
    height: 16px;
    right: 7px;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}
.edit-group-officer .afy-checkbox-width-label input[type="checkbox"] {right: 11px;}
.general-availability .afy-checkbox-width-label .afy-custom-checkbox {margin: auto 0;}
.daily-availability .input-group {
    flex-direction: column;
    padding: 8px;
}
.daily-availability .input-group + .input-group {padding: 0 8px 8px 8px;}
.daily-availability .input-group label {
    width: 100%;
    margin: 0;
}
.daily-availability .input-group input {
    width: 100%;
    margin: 0;
}
.cms-admin .schedule-settings .scroll-box {
    width: 100%;
    height: 100%;
    max-height: 391px;
    overflow: hidden;
}
.cms-admin .schedule-settings .scroll-box ul {
    flex-direction: column;
    position: relative;
    width: 100%;
    height: calc(100% - 48px);
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-type: none;
    overflow-x: hidden;
    overflow-y: auto;
}
.cms-admin .schedule-settings .scroll-box ul li {
    min-height: 55px;
    font-size: 12px;
    font-weight: 700;
    padding: 16px;
    transition: background-color ease-in-out 300ms;
}
.cms-admin .schedule-settings .scroll-box ul li::before {background-color: rgba(0, 0, 0, .1);}
.cms-admin .schedule-settings .scroll-box ul li.disable {
    color: #6c757d;
    background-color: rgba(108, 117, 125, .1);
}
.cms-admin .schedule-settings .scroll-box ul li.disable::before {background-color: rgba(108, 117, 125, .11);}
.cms-admin .schedule-settings .scroll-box ul li.rezerved {
    color: #dc3545;
    background-color: rgba(220, 53, 69, .1);
}
.cms-admin .schedule-settings .scroll-box ul li.rezerved::before {background-color: rgba(220, 53, 69, .09);}
.cms-admin .schedule-settings .scroll-box ul li.available {
    color: #28a745;
    background-color: rgba(40, 167, 69, .1);
}
.cms-admin .schedule-settings .scroll-box ul li.available::before {background-color: rgba(40, 167, 69, .2);}
.cms-admin .schedule-settings .scroll-box ul li:last-child::before {content: none !important;}
.cms-admin .schedule-settings .scroll-box ul li .bodytext {font-size: 11px;}
.cms-admin .schedule-settings .scroll-box ul li .hour {margin: auto auto auto 0;}
.cms-admin .schedule-settings .scroll-box ul li.available .option-btn-container,
.cms-admin .schedule-settings .scroll-box ul li.rezerved .option-btn-container,
.cms-admin .schedule-settings .scroll-box ul li.disable .option-btn-container {
    display: flex;
    opacity: 1;
}
.cms-admin .schedule-settings .scroll-box ul li:hover .option-btn:hover .btn-title {margin-left: 2px;}
.cms-admin .schedule-settings .scroll-box ul li.available .option-btn-container {background-color: #e8f6ec;}
.cms-admin .schedule-settings .scroll-box ul li.rezerved .option-btn-container {background-color: #fceaec;}
.cms-admin .schedule-settings .scroll-box ul li.disable .option-btn-container {background-color: #f0f1f2;}
.cms-admin .schedule-settings .scroll-box ul li.available .option-btn-container .option-btn, .cms-admin .schedule-settings .scroll-box ul li.rezerved .option-btn-container .option-btn, .cms-admin .schedule-settings .scroll-box ul li.disable .option-btn-container .option-btn {display: none;}
.cms-admin .schedule-settings .scroll-box ul li.available:hover .option-btn-container .option-btn, .cms-admin .schedule-settings .scroll-box ul li.rezerved:hover .option-btn-container .option-btn, .cms-admin .schedule-settings .scroll-box ul li.disable:hover .option-btn-container .option-btn {display: flex;}
.cms-admin .schedule-settings .scroll-box ul li.available .option-btn-container .check-btn,
.cms-admin .schedule-settings .scroll-box ul li.rezerved .option-btn-container .rezerved-btn,
.cms-admin .schedule-settings .scroll-box ul li.disable .option-btn-container .disable-btn {
    display: flex;
    pointer-events: none;
}
.hours-footer {
    display: flex;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 12px 8px;
    box-shadow: 0 0 0 1px #dee2e6;
    z-index: 1;
}
@media (min-width: 1567px) {
    .schedule-content [class*="col"] .title {font-size: 13px;}
    .daily-availability .input-group {flex-direction: row;}
    .daily-availability .input-group + .input-group {padding: 0 8px 8px 8px;}
    .daily-availability .input-group label {
        width: auto;
        margin: auto auto auto 0;
    }
    .daily-availability .input-group input {
        width: auto;
        margin: auto 0 auto auto;
    }
    .cms-admin .schedule-settings .scroll-box {max-height: 361px;}
    .hours-footer {padding: 12px 16px;}
}
.officer-schedule-data {
    max-height: calc(100vh - 71px);
    overflow-x: hidden;
    overflow-y: auto;
}
.officer-schedule-data .table .last-past-appointment .status-badge {cursor: default;}
.officer-schedule-data .table .last-past-appointment > * {
    opacity: .5;
    pointer-events: none;
}
.officer-schedule-data .table .last-past-appointment .hour-cell {opacity: .3;}
.cms-admin .afy-alert-modal .officer-schedule-data .table .customer-photo img,
.cms-admin .afy-alert-modal .officer-schedule-data .table .customer-photo .fa {
    display: flex;
    width: 48px;
    height: 48px;
    font-size: 16px;
    background-color: #dfe3e6;
    border-radius: 50%;
}
.cms-admin .afy-alert-modal .officer-schedule-data .table .customer-photo .fa::before {
    margin: auto;
    color: #6c757d;
}
.cms-admin .afy-alert-modal .officer-schedule-data .table th, .cms-admin .afy-alert-modal .officer-schedule-data .table td {padding: .5rem 1rem;}
.cms-admin .afy-alert-modal .officer-schedule-data .table .hour-cell,
.cms-admin .afy-alert-modal .officer-schedule-data .table .photo-icon-cell {
    width: 50px;
    padding: .5rem;
}
.cms-admin .afy-alert-modal .officer-schedule-data .table .id-cell {padding: .5rem 1rem;}
.cms-admin .afy-alert-modal .officer-schedule-data .table .status-cell {
    width: 100px;
    text-align: center;
}
.cms-admin .afy-alert-modal .officer-schedule-data .table .edit-group {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.cms-admin .afy-alert-modal .officer-schedule-data .table .edit-group .change-status {width: 100%;}
.cms-admin .afy-alert-modal .officer-schedule-data .table .edit-group select {
    height: 27px;
    font-size: 11px;
    margin: auto 0 auto 0;
}
.cms-admin .afy-alert-modal .officer-schedule-data .table .edit-group .save-changes-btn {margin: auto 0 auto 8px;}
.cms-admin .officer-live-schedule {
    margin: -16px;
}
.cms-admin .officer-live-schedule > .col-md-4, .cms-admin .officer-live-schedule > .col-md-8 {padding: 0;}
.cms-admin .officer-live-schedule > .col-md-4 .row {height: 100%;}
.cms-admin .officer-live-schedule .officer-list {
    height: 100%;
    max-height: calc(100vh - 71px);
    padding: 0;
    border-right: 1px solid #dee2e6;
    overflow-x: hidden;
    overflow-y: auto;
}
.cms-admin .officer-live-schedule .officer-list .dropdown-item {
    padding: 8px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}
.cms-admin .officer-live-schedule .officer-list .dropdown-item.active {
    color: #28a745;
    background-color: rgba(40, 167, 69, .1);
    border-color: rgba(40, 167, 69, .1);
}
.cms-admin .officer-live-schedule .officer-list .dropdown-item:active {
    color: inherit;
    background-color: inherit;
}
.cms-admin .officer-live-schedule .officer-list .officer-photo {
    width: 38px;
    height: 38px;
}
.cms-admin .officer-live-schedule .officer-list .officer-titr {display: none;}
.cms-admin .officer-live-schedule .officer-list .officer-name {
    font-size: 11px;
    font-weight: 500;
    margin: auto auto auto 4px;
}
.cms-admin .officer-data {display: flex;}
.cms-admin .officer-data .officer-photo {
    width: 88px;
    height: 88px;
    margin: 0 10px 0 0;
    border-radius: 3px;
}
.officer-data .officer-text-data {margin: auto auto 0 0;}
.officer-data .officer-name {font-size: 13px;}
.officer-data .group-name {font-size: 11px;}
.status-cell .status-badge {font-size: 11px;}

/* Editor Section :::: Course */
.course .content-prop {
    padding: 0;
    background-color: #fff;
    overflow: hidden;
}
.course .content-prop.add-publish-target {padding: 1rem;}
.course .cms-editing-management-tools,
.course .cms-editor {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0;
}
.course .nav-tabs {
    position: relative;
    font-size: 12px;
    padding: 13px 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    border: none;
    z-index: 1;
}
.course .tab-content {
    height: calc(100% - 50px);
    padding: 16px;
    background: #f8f9fa;
    overflow-x: hidden;
    overflow-y: auto;
}
.course .nav-tabs .nav-item {margin: 0 4px;}
.course .nav-tabs .nav-link {
    padding: 2px 12px;
    color: #6c757d;
    border-radius: 50em;
    border-color: #dee2e6;
    transition: color ease-in-out 200ms, background-color ease-in-out 200ms;
}
.course .nav-tabs .nav-link.active {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}
.course .nav-tabs .nav-link:active {
    color: #28a745;
    border-color: #28a745;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, .33);
}
.course .content-prop .course-main {
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .11);
}
.course .content-prop .course-cover-image {
    padding: 16px;
    border-right: 1px solid rgba(0, 0, 0, .11);
}
.course .content-prop .course-text-data {
    display: flex;
    flex-direction: column;
    padding: 16px;
    margin: -15px 0;
}
.course .content-prop .course-text-data > .row {
    height: 100%;
    margin: auto -16px;
    border-bottom: 1px solid rgba(0, 0, 0, .11);
}
.course .content-prop .course-text-data > .row:last-child {border: none;}
.course .content-prop .course-text-data > .row > [class*="col"] {margin: 8px 0;}
.course .content-prop .course-text-data .mat-outline-input-container {margin: 0;}

.course .row.header {padding: 16px;}
.course .program-settings {
    padding: 0;
    margin: 0;
}
.course .course-program-list {
    font-size: 12px;
    padding: 0;
    border-width: 0 1px 0 0;
    border-style: solid;
    border-color: rgba(0, 0, 0, .11);
}
.course .list-header {
    display: flex;
    width: 100%;
    font-size: 12px;
    font-weight: 700;
    padding: 16px;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .11);
}
.course .list-header .btn {margin: -3px 0 -3px auto;}
.course .course-program-list ul {
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-type: none;
    overflow-x: hidden;
    overflow-y: auto;
}
.course .course-program-list ul li {
    padding: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .11);
    transition: all ease-in-out 300ms;
}
.course .course-program-list ul li.active {
    color: #28a745;
    background-color: rgba(40, 167, 69, .1);
    border-color: rgba(40, 167, 69, .2);
}
.course .course-program-list .program-list-item {
    display: flex;
    position: relative;
}
.program-list-item .program-name {
    display: flex;
    width: 100%;
    line-height: 2;
    padding: 16px;
    margin: auto auto auto 0;
    cursor: pointer;
}
.program-list-item .program-name strong {white-space: nowrap;}
.program-list-item .program-name strong::after {content: ':';}
.program-list-item .program-name .description {max-width: 100%;}
.course .course-program {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    padding: 0;
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: rgba(0, 0, 0, .11);
}
.course .course-program .list-header {position: relative;}
.course .course-program .list-footer {
    display: flex;
    width: 100%;
    font-weight: 700;
    padding: 12px 16px;
    margin: 0;
    border-bottom: 3px solid rgba(0, 0, 0, .11);
}
.course .course-program-list ul li.active .option-btn-container {background-color: #ebf6ec;}
.course .program-brief {padding: 8px 16px;}
.course .program-schedule {padding: 6px 16px;}
.course .program-schedule .input-group {
    flex-wrap: nowrap;
    margin: 8px 0;
}
.course .program-schedule .input-group label {
    white-space: nowrap;
    margin: auto 8px auto 0;
}
.course .program-schedule .input-group input {
    width: 270px;
    margin: auto 0 auto auto;
}
.course .course-program .list-footer .uploaded-preview {width: 100%;}
.course .course-program .list-footer .file-upload-w-txt {
    display: flex;
    position: relative;
    width: 100%;
}
.course .course-program .list-footer .aspc-1x1.mini-thumb {
    position: relative;
    width: 64px;
    padding: 0 0 64px 0;
}
.course .course-program .list-footer .file-url {
    max-width: calc(100% - 72px);
    font-weight: 500;
    font-style: italic;
    margin: auto auto 0 8px;
}
.course .course-program .list-footer .file-url.uploaded {
    font-weight: 600;
    font-style: normal;
}
.course .material-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-type: none;
}
.course .material-list ul li {
    display: flex;
    padding: 0 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    overflow: hidden;
}
.course .material-list .mat-outline-input-container {width: 100%;}
.course .material-list .helper {
    margin: 18px 0 18px auto;
    overflow: hidden;
}
.course .material-list .helper .btn {margin: 3px 8px 3px 12px}
.course-program-content ul {
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-type: none;
}
.course-program-content ul li {
    position: relative;
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .11);
}
.course-program-content ul li:last-child, .course-program-content ul li:only-child {border: none;}
.cms-editor .tab-pane {position: relative;}
.cms-editor .tab-pane .content-prop {background-color: #fff;}
.content-prop.add-new-program {
    position: absolute;
    top: 0;
    left: 50%;
    border-radius: 50em;
    padding: 0 16px;
    transform: translate(-50%, 0);
}
.content-prop.add-new-program .row {padding: 4px;}

.content-settings {margin: 0;}
.prog-content-list {
    padding: 0;
    border-right: 1px solid rgba(0, 0, 0, .11);
}
.prog-content-list ul {
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-type: none;
}
.prog-content-list ul li {
    position: relative;
    font-size: 12px;
    padding: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .11);
    transition: all ease-in-out 200ms;
}
.prog-content-list ul li.active {
    color: #28a745;
    background-color: rgba(40, 167, 69, .1);
    border-color: rgba(40, 167, 69, .2);
}
.prog-content-list ul li .content-name {
    display: inline-block;
    width: 100%;
    padding: 16px;
    cursor: pointer;
}
.prog-content-list ul li.active .option-btn-container {background-color: #ebf6ec;}
.prog-content-settings {padding: 0;}
.course .content-brief .material-list ul li:last-child {border: none;}
.course .content-brief .material-list ul li:only-child, .course .content-brief .material-list ul li:first-child {border-top: 1px solid rgba(0, 0, 0, .1);}
.course .content-brief .material-list .list-header {border: none;}

.session-requirement {
    flex-wrap: nowrap;
    padding: 0;
    margin: 0;
}
.preregister-options {
    flex-wrap: wrap;
    padding: 13.5px 16px;
    margin: auto;
}
.preregister-options .header {
    width: 100%;
    font-size: 12px;
    text-align: center;
    font-weight: 700;
    white-space: nowrap;
    margin: auto auto 4px auto;
}
.preregister-options .separator {margin: auto 8px;}
.preregister-options .header + label {margin: auto 0 auto auto;}
.preregister-options .separator + label {margin: auto auto auto 0;}
.preregister-dates {
    display: flex;
    padding: 16px;
    margin: auto 0 auto auto;
    border-left: 1px solid rgba(0, 0, 0, .1);
}
.preregister-dates .input-group {flex-wrap: nowrap;}
.preregister-dates label {
    font-size: 12px;
    white-space: nowrap;
    margin: auto 8px;
}
.register-dates {
    flex-wrap: nowrap;
    font-size: 12px;
    padding: 16px;
    margin: 0;
}
.register-dates .input-group {
    flex-wrap: nowrap;
    margin: auto 0;
}
.register-dates .separator {
    height: auto;
    margin: -16px 16px;
}
.register-dates .input-group label {
    white-space: nowrap;
    margin: auto 8px auto auto;
}
.register-dates .input-group input {width: 100%;}
.session-settings {
    flex-wrap: nowrap;
    margin: 0;
}
.session-settings .separator {
    height: auto;
    margin: 0 auto;
}
.session-settings .col-md-6 .row .col-md-6:first-child {padding-right: 8px;}
.session-settings .col-md-6 .row .col-md-6:last-child {padding-left: 8px;}
@media (min-width: 1567px) {
    .course .content-prop .course-text-data > .row > [class*="col"] {margin: auto 0;}
    .course .program-schedule {display: flex;}
    .course .program-schedule .input-group {padding: 0 4px;}
    .course .program-schedule .input-group:first-child {padding: 0 8px 0 0;}
    .course .program-schedule .input-group:last-child {padding: 0 0 0 8px;}
    .course .program-schedule .input-group label {margin: auto 4px auto 0;}
    .course .program-schedule .input-group input {
        width: 154px;
        padding: 8px;
    }
    .event-main .program-schedule {flex-wrap: nowrap;}
    .event-main .program-schedule .input-group {padding: 0 4px;}
    .event-main .program-schedule .input-group:first-child {padding: 0 8px 0 0;}
    .event-main .program-schedule .input-group:last-child {padding: 0 0 0 8px;}
    .event-main .program-schedule .input-group label {margin: auto 4px auto 0;}
    .event-main .program-schedule .input-group input {
        width: calc(100% - 72px);
        padding: 8px;
    }
}
.cms-admin .course li .option-btn-container {
    margin: auto 0;
}
.cms-admin .course .add-content-btn:hover .btn-title {width: 72px;}


/* Editor Section :::: Survey */
.afy-grouped-prop .afy-inline-mat-input-row.survey-info {padding: 8px 16px 8px 1px;}
.survey-status {
    display: flex;
    height: 100%;
    font-size: 12px;
    justify-content: center;
    padding: 8px 16px;
    margin: auto 0;
}
.survey-question-answer-container {
    display: flex;
    flex-direction: column;
    background-color: #f8f9fa;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.survey-question-answer-container ul {
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.survey-question-answer-container ul li {
    padding: 0;
    margin: 0 16px 16px 16px;
    background-color: #fff;
    box-shadow: 0 0px 0px 1px rgba(0, 0, 0, .07), 0 0px 0px 4px rgba(0, 0, 0, .05);
    border-radius: .5rem;
}
.survey-question-answer-container ul li .collapse-header {
    display: flex;
    padding: 16px;
    border-radius: .5rem .5rem 0 0;
    transition: background-color ease-in-out 300ms;
    cursor: pointer;
}
.survey-question-answer-container ul li .collapse-header.collapsed {border-radius: .5rem;}
.survey-question-answer-container ul li .collapse-header:hover {background-color: rgba(40, 167, 69, .05);}
.survey-question-answer-container ul li .collapse-header .title {font-size: 12px;}
.survey-question-answer-container ul li .collapsible-content {
    display: flex;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.survey-question-answer-container .survey-q-a-group {width: 100%;}
.survey-question-answer-container .survey-question {
    padding: 8px 16px;
    border-right: 1px solid rgba(0, 0, 0, .1);
}
.survey-question-answer-container .survey-answers {
    display: flex;
    padding: 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.survey-question-answer-container .survey-answers [class*="col-"] {
    padding: 8px 16px;
    border-right: 1px solid rgba(0, 0, 0, .1);
}
.survey-actions {
    display: flex;
    flex-direction: column;
    padding: 16px 8px;
}
.survey-actions > .btn {
    padding: 8px 8.75px;
    margin: 8px auto;
}
.survey-actions > .btn-delete-survey {margin-top: auto;}
.survey-actions > .btn-save-survey {margin-bottom: auto;}
.survey-info-prop .action-group {
    padding: 16px;
    border-top: 1px solid rgba(0, 0, 0, .1);
}


/* Editor Section :::: Video */


/* TARGETED COMPONENT SPECIALS */
.cms-no-content {
    display: flex;
    position: absolute;
    width: 100%;
    height: calc(100vh - 145px);
}
.cms-no-content .no-content-info {
    display: flex;
    flex-direction: column;
    max-width: 250px;
    text-align: center;
    margin: auto;
}
.no-content-info-icon {
    width: 32px;
    padding: 8px;
    margin: 8px auto 16px auto;
    border: 1px solid #28a745;
    border-radius: 50%;
}
.btn-no-content-first-time {margin: 16px auto 8px auto;}
.content-prop.component-prop.targeted-comp-prop {
    flex-direction: row;
    position: absolute;
    top: 0;
    left: 1px;
    padding: 16px 24px;
    margin: 0;
    box-shadow: none;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    border-radius: 0;
    z-index: 2;
}
.targeted-comp-prop .mat-outline-input-container {width: 100%;}
.targeted-comp-prop .mat-outline-input-container + .mat-outline-input-container {margin-left: 16px;}
.targeted-comp-prop .save-btn {
    white-space: nowrap;
    margin: auto 8px auto 24px;
}
.targeted-content-container {
    width: 100%;
    height: calc(100vh - 145px);
    padding: 116px 16px 16px 16px;
    overflow-x: hidden;
    overflow-y: auto;
}
.targeted-content-container .row  {
    padding: 0;
    margin: 0;
}
.targeted-content-container .cover-image {
    padding: 16px;
    border-right: 1px solid rgba(0, 0, 0, .1);
}
.targeted-content-container .cover-image .afy-input-btn-group-container {margin: 16px 0 0 0;}
.targeted-content-prop {padding: 0;}
.targeted-content-prop .prop-input-group {padding: 8px 16px;}
.targeted-content-prop .row.prop-input-group {
    padding: 4px 16px;
    border-top: 1px solid rgba(0, 0, 0, .1);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.targeted-content-prop .row.prop-input-group .col {padding: 0 8px}
.targeted-content-prop .row.prop-input-group .col:first-child {padding-left: 0;}
.targeted-content-prop .row.prop-input-group .col:last-child {padding-right: 0;}
@media (min-width: 1921px) {}


/* Editor Section :::: Carousel & Gallery */
.cms-editor-container.carousel-component,.cms-editor-container.tageted-component,.cms-editor-container.messaging {background-color: #f8f9fa;}
.cms-prop-row {
    position: relative;
    margin: 0;
}
.carousel-component .cms-editor,
.tageted-component .cms-editor,
.messaging .cms-editor {
    position: relative;
    padding: 0;
}
.cms-prop-row .content-prop {
    width: 100%;
    padding: 0;
    margin: 0 0 16px 0;
    background-color: #fff;
}
.component-prop-header {
    display: flex;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.component-prop-header .title {
    font-size: .85rem;
    font-weight: 700;
    line-height: normal;
}
.component-prop-footer {
    display: flex;
    padding: 9.5px 16px;
    margin: auto 0 0 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.gallery-images-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: .5rem;
}
.gallery-images-list .product-img {
    display: flex;
    flex-direction: column;
    position: relative;
    -ms-flex: 0 0 calc(20% - 1rem);
    flex: 0 0 calc(20% - 1rem);
    width: 100%;
    max-width: 20%;
    padding: .5rem;
    margin: .5rem;
    background-color: #fff;
    box-shadow: 0 0px 0px 1px rgba(0, 0, 0, 0.07), 0 0px 0px 4px rgba(0, 0, 0, 0.05);
    border-radius: 0.25rem;
}
.gallery-images-list .product-img.add-new-img {
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
}
.gallery-images-list .product-img .product-img-wrapper {
    border-radius: .125rem;
    overflow: hidden;
}
.gallery-images-list .product-img.add-new-img .product-img-wrapper {padding: 0 0 calc(100% - .25rem) 0;}
.gallery-images-list .order-input {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin: .5rem 0 auto 0;
}
.gallery-images-list .order-input .title {
    font-size: 12px;
    margin: auto .25rem auto auto;
}
.gallery-images-list .order-input input {
    width: auto;
    margin: auto auto auto 0;
}
.gallery-images-list .product-img .cover-badge {
    position: absolute;
    top: -2px;
    left: -2px;
    font-size: 10px;
    padding: 7px;
    color: #fff;
    background-color: #28a745;
    border-radius: 50em;
    transform: scale(0);
    transition: transform ease-in-out 200ms;
    z-index: 2;
}
.gallery-images-list .product-img.cover .cover-badge {transform: scale(1);}
.gallery-images-list .product-img .action-btn-group {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: .5rem;
    top: .5rem;
    right: .5rem;
    bottom: .5rem;
    background-color: rgba(0, 0, 0, .33);
    opacity: 0;
    border-radius: .125rem;
    transition: all ease-in-out 300ms;
    z-index: 1;
}
.gallery-images-list .product-img .action-btn-group.with-order {bottom: 49px;}
.gallery-images-list .product-img:hover .action-btn-group, .gallery-images-list .product-img .action-btn-group.confirmation {opacity: 1;}
.gallery-images-list .action-btn-group .btn-container {
    padding: 2px;
    background-color: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, .2);
    border-radius: 50em;
    margin: 2px auto;
}
.gallery-images-list .action-btn-group .btn-container:first-child {margin-top: auto;}
.gallery-images-list .action-btn-group .btn-container:last-child {margin-bottom: auto;}

/* Editor Section :::: Messaging */
.cms-admin .with-extended-features .content-prop.extended-features {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    border-width: 0 0 1px 1px;
    border-style: solid;
    border-color: #ececec;
}
.cms-admin .with-extended-features .extended-features-header {padding: 11px 12px;}
.messaging .content-prop.component-prop.targeted-comp-prop {
    top: auto;
    bottom: 0;
    padding: 3px 24px;
    border-top: 1px solid rgba(0, 0, 0, .1);
    border-bottom: none;
}
.messaging .targeted-content-container {
    height: calc(100vh - 195px);
    padding: 12px 8px 82px 8px;
}
.messaging .targeted-content-container .message-history {
    display: flex;
    flex-direction: column;
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.card-icon {
    display: flex;
    position: relative;
    padding: 12px 12px 10px 12px;
    margin: -8px -8px 8px -8px;
}
.cms-admin .card-live-data .card-icon .title {
    display: flex;
    font-weight: 700;
    margin: 0;
}
.card-icon .title-icon {
    font-size: 16px;
    margin: 1px auto auto 0;
}
.card-icon .title-text {margin: auto auto auto 4px;}
.cms-card-body {margin: -8px;}
.cms-admin .card-live-data .cms-card-body-item {
    font-size: 12px;
    padding: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.cms-admin .card-live-data .cms-card-body-item:last-child {border: none;}
.cms-card-body-item-icon {
    min-width: 24px;
    padding: 4px 0;
    text-align: center;
    margin: auto 2px auto 0;
    border-right: 1px solid rgba(0, 0, 0, .2);
}


/* Editor Section :::: Forms */
.admin-content .content.form-creator {
    width: 100%;
    flex-wrap: nowrap;
    height: calc(100vh - 51px);
    overflow-x: hidden;
    overflow-y: auto;
}
.admin-content .content.form-creator .recent-msgs {height: auto;}
.afy-form-element-content {
    width: 100%;
    flex-wrap: nowrap;
    padding: 4px 12px 16px 12px;
    margin: 0;
    background-color: #f8f9fa;
    border-radius: 0 0 8px 8px;
}
.admin-content .content.form-creator > .row.afy-form-element-content {
    width: calc(100% + 1rem);
    padding: 0;
    margin: .25rem -.5rem;
}
.afy-form-elements-container {
    padding: 16px 8px 0 8px;
    color: #6c757d;
}
.afy-form-element-title {
    font-weight: 700;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.afy-form-elements-container ul {
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.afy-form-element-item {
min-width: 400px;
height: auto;
margin-bottom: 16px
}
.afy-form-element-item.active {box-shadow: 0 0 0 1px #28a745, 0 0 0 4px rgba(40, 167, 69, .3);}
.afy-form-element-item:last-child {margin-bottom: 0;}
.afy-form-element-name {
    display: flex;
    padding: 12px;
    line-height: normal;
}
.element-icon {
    width: 40px;
    margin: auto 4px auto 0;
    opacity: .4;
}
span.element-icon.icon-only {
    width: 20px;
    margin: 3.966px 4px 3.966px 0;
}
.element-icon img {
    max-width: 100%;
    height: auto;
    margin: auto 0;
}
.element-title {
    font-size: 13px;
    font-weight: 700;
    margin: auto 0;
}
.collapser {
    display: flex;
    margin: auto 0 auto auto;
    cursor: pointer;
    opacity: .5;
    transition: opacity ease-in-out 300ms;
}
.collapser:hover, .collapser:focus, .collapser:active {opacity: 1;}
.collapser .collapser-icon {margin: auto 4px auto 0;}
.collapser .collapser-title {
    font-size: 13px;
    font-weight: 600;
    margin: auto 4px auto 0;
}
.collapser .caret {
    position: relative;
    margin: auto 0;
    transform: rotate(135deg);
    transition: transform ease-in-out 300ms;
}
.collapser.collapsed .caret {transform: rotate(0);}
.collapser .caret span {
    display: block;
    background-color: #6c757d;
}
.collapser .caret .h-border {
    position: absolute;
    top: 6px;
    width: 13px;
    height: 1px;
}
.collapser .caret .v-border {
    width: 1px;
    height: 13px;
    margin: auto 6px;
}
.afy-form-elements-container .afy-form-element-options {border-top: 1px solid rgba(0, 0, 0, .1);}
.afy-form-element-options li {border-bottom: 1px solid rgba(0, 0, 0, .05);}
.afy-form-element-options li:last-child {border: none;}
.afy-form-element-options li .row {margin: 0;}
.afy-form-element-options li .row [class*="col"] {
    display: flex;
    flex-direction: column;
    padding: 0 8px;
    border-right: 1px solid rgba(0, 0, 0, .05);
}
.afy-form-element-options li .row [class*="col"]:last-child {border: none;}
.requirement-options {
    display: flex;
    margin: auto;
}
.requirement-options label {font-size: 12px;}
.afy-form-element-footer {
    display: flex;
    padding: 8px;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.afy-form-element-footer .btn {
    width: 100%;
    padding: 8px;
    margin: 8px;
    border-radius: 4px;
}
.afy-form-preview {
    display: flex;
    width: 100%;
    min-height: calc(100vh - 174px);
    padding: 16px 0 0 16px;
}
.afy-form-preview .recent-msgs {width: 100%;}
.afy-form-preview .recent-msgs .header {padding: 10px 16px;}
.afy-form-preview .recent-msgs .header-icon {padding-right: 4px;}
.afy-form-sample {padding: 8px;}
.afy-form-preview .iphone-Xetc-like {
    margin: 24px auto;
    background-color: #343a40;
}
.afy-form-preview .iphone-Xetc-like .device-top-section {background-color: #52585d;}
.afy-form-preview .screen-section {
    padding: 16px 0;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, .33);
}
.afy-form-sample .row {margin: 0;}
.afy-form-sample .row [class*="col"] {padding: 0 8px;}
.afy-form-element-width {position: relative;}
.afy-form-element-width .mat-outline-input-container-only {
    padding: 8px;
    margin: 0 -4px;
    border-width: 1px;
    border-style: dashed;
    border-color: transparent;
    border-radius: 4px;
}
.afy-form-element-width:hover .mat-outline-input-container-only {border-color: rgba(0, 0, 0, .15);}
.afy-form-element-width .mat-outline-input-container-only .afy-form-element-helpers {
    top: -16px;
    right: 4px;
}

.afy-form-sample .device .screen-section .afy-radio-width-label,
.form-result-preview .afy-radio-width-label {
    height: auto;
    padding: 0;
}
.afy-form-sample .field-title,
.form-result-preview .field-title {
    font-size: 14px;
    margin: auto auto 8px 0;
}
.afy-form-sample .device .screen-section .afy-checkbox-width-label label,
.afy-form-sample .device .screen-section .afy-radio-width-label label,
.form-result-preview .afy-checkbox-width-label label,
.form-result-preview .afy-radio-width-label label {
    width: 100%;
    font-size: 14px;
    padding: 12px 12px 12px 22px;
    margin: auto 0 auto -20px;
}
.afy-form-sample .device .screen-section .afy-radio-width-label label {padding-left: 24px;}
.afy-form-sample .device .screen-section .afy-checkbox-width-label input[type="checkbox"],
.form-result-preview .afy-checkbox-width-label input[type="checkbox"] {
    top: 15px;
    left: .5px;
}
.afy-form-element-helpers {
    display: flex;
    position: absolute;
    top: -5px;
    right: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity ease-in-out 300ms;
    z-index: 999;
}
.afy-form-element-width:hover .afy-form-element-helpers,
.afy-form-element-helpers.active {
    height: 32px;
    opacity: 1;
}
.afy-form-element-helpers .btn {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: auto 2px;
    border-radius: 12px;
}
.afy-form-element-helpers .btn:first-child {margin: auto 2px auto 4px;}
.afy-form-element-helpers .btn:last-child {margin: auto 4px auto 2px;}
.afy-form-element-helpers .btn::before {margin: auto 0 auto 6px;}
.form-definition-prop {padding: 0;}
.form-result {
    padding: 12px;
    margin: 0;
    background-color: #f8f9fa;
    border-radius: 0 0 8px 8px;
}
.form-result-preview {
    padding: 4px;
    transition: width ease-in-out 200ms;
    overflow: hidden;
}
.form-result-preview.min {width: 60px;}
.form-result-preview.max {width: 375px;}
.form-result-preview .content-prop {padding: 0;}
.form-result-preview .content-prop-header {
    display: flex;
    padding: 12px 16px;
    margin: 0;
}
.form-result-preview .content-prop-header .header-icon {
    padding: 4px;
    margin: auto 0;
}
.form-result-preview .content-prop-header .header-txt {
    line-height: 1.2;
    white-space: nowrap;
    margin: auto 0;
    overflow: hidden;
    transition: width ease-in-out 200ms;
}
.form-result-preview.min .content-prop-header .header-txt {width: 0;}
.form-result-preview.max .content-prop-header .header-txt {width: 100%;}
.form-result-preview .afy-form-elements-container {
    min-width: 367px;
    padding: 8px;
    margin: 0;
}
.form-result-preview .afy-form-elements-container [class*="col"] {padding: 0 8px;}
.form-result-preview .afy-form-element-footer {min-width: 367px;}


.col.form-result-table {
    padding: 4px 4px 4px 12px;
}
.form-result-table .data-table-header, .form-result-table .data-table-footer {background: none;}
.form-result-table td .badge {
    padding: 6px 10px;
    border-radius: 50em;
}
.form-data-result .content-prop-header {
    display: flex;
    padding: 8px 16px 5px 16px;
    margin: 0;
}
.form-data-result .content-prop-header .header-txt {margin: auto auto auto 0;}
.form-data-result .content-prop-header .btn-closer {
    padding: 13px 13.875px 11px 13.875px;
    margin: auto -8px auto auto;
    color: #6c757d;
    border-radius: 50%;
}
.result-content .line-row {
    font-size: 13px;
    padding: 16px;
    border-bottom: 1px dashed rgba(0, 0, 0, .1);
}
.result-content .line-row:last-child {border: none;}
.result-content .line-key {
    font-weight: 700;
    margin: auto 2px auto 0;
}

/* Editor Section :::: Publications */
/* Genel Kullanabilirim */
.content-yn-group .cms-editor {
    position: relative;
    padding: 0;
}
.content-yn-group .cms-yes-content {padding: 16px;}
ul.comp-content-item-list {
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-type: none;
}
.comp-content-item {padding: 8px 16px;}
.comp-content-item:first-child {padding-top: 0;}
.comp-content-item:last-child {padding-bottom: 16px;}
.comp-content-item-container {
    background-color: #fff;
    box-shadow: 0 0px 0px 1px rgba(0, 0, 0, .07), 0 0px 0px 4px rgba(0, 0, 0, .05);
    border-radius: 8px;
}
.comp-content-item-header {
    display: flex;
    line-height: normal;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color ease-in-out 200ms;
}
.comp-content-item-header:hover {background-color: rgba(40, 167, 69, .05);}
.comp-content-item-header .comp-content-item-icon {
    font-size: 16px;
    margin: auto 4px auto 0;
}
.comp-content-item-header .title {
    font-size: 14px;
    margin: auto 0;
}
.comp-content-item-header .author {
    font-size: 12px;
    font-style: italic;
    margin: auto 0;
}
.row.component-data {
    margin: 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.row.component-data img.cover-image {
    width: 150px;
    padding: 16px;
    margin: 0 0 auto 0;
}
.component-detailed-data {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    border-left: 1px solid rgba(0, 0, 0, .1);
}
.component-detailed-data .comp-data-input-group {
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.component-detailed-data .comp-data-input-group .row {
    padding: 0 8px;
    margin: 0;
}
.component-detailed-data .comp-data-input-group [class*="col"] {padding: 0 8px;}
.comp-content-item-footer {
    display: flex;
    padding: 8px 12px;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
@media (min-width:1568px){
    .row.component-data img.cover-image {width: 200px;}
}
@media (min-width:1921px){
    ul.comp-content-item-list {display: flex;}
    .comp-content-item {
        width: 100%;
        padding: 16px;
    }
    .comp-content-item:first-child {padding: 16px;}
    /* .component-detailed-data .comp-data-input-group {
        display: flex;
        padding: 8px;
    }
    .component-detailed-data .comp-data-input-group .row {
        width: 100%;
        padding: 0;
    } */
}
/* @media (max-width:1919px){
} */






/* Editor Section :::: Publications */
/* List */
.cms-admin .content-prop.overflow-hidden.timeline-main {max-height: none;}
#tabStatsComments {max-height: calc(100vh - 284px);}
#tabStatsComments .scrollable-area {
    height: calc(100vh - 284px);
    padding: 0 0 52px 0;
    overflow-x: hidden;
    overflow-y: auto;
}
#tabStatsComments .scrollable-area + .alert-modal-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    box-shadow: 0 0 4px rgba(0, 0, 0, .2);
    border-color: rgba(0, 0, 0, .1);
}
#tabStatsComments thead th {
    position: sticky;
    top: 0;
    height: 44px;
    background-color: #fff;
    box-shadow: 2px 0 0 1px #dee2e6;
    z-index: 3;
}
#tabStatsComments tbody {
    height: calc(100% - 44px);
    overflow-y: auto;
}
.timeline-stats {font-size: 9px;}
.timeline-stat {
    display: inline-flex;
    margin: auto 0;
}
.timeline-stat .count {
    font-weight: 700;
    margin: auto 3px auto 0;
}
.timeline-stat::after {
    content: "";
    display: inline-block;
    width: 4px;
    height: 1px;
    margin: auto 0 auto 3px;
    background-color: #6c757d;
}
.timeline-stat:last-child::after {content: none;}
.timeline-stat .stat-icon {margin: auto 2px auto 0;}

/* Content */
.content-prop .nav-tabs {
    color: #6c757d;
    padding: 8px 8px 0 8px;
}
.content-prop .nav-link {
    padding: 4px 16px;
    color: inherit;
}
.content-prop .nav-tabs .nav-link.active,.content-prop .nav-tabs .nav-item.show .nav-link {color: #28a745;}
#design-tab.active,
#data-tab.active {
    background-color: #f8f9fa;
    border-color: #dee2e6 #dee2e6 #f8f9fa;
}
.content-prop .timeline-stats {
    font-size: 12px;
    padding: 12px 8px 0 8px;
}
.content-prop .timeline-stat .count {margin-right: 4px;}
.content-prop .timeline-stat::after {margin: auto 2px auto 5px;}






/* Editor Section :::: E-Ticaret */
/* Product List */
.product-list-prop .content-prop-header.with-btn {padding: 0 16px;}
.product-list-prop .content-prop-header .title {
    font-size: .85rem;
    font-weight: 700;
    line-height: normal;
    white-space: nowrap;
    margin: auto 0;
}
#nameBySummary {margin-left: -3px;}
#nameBySummary span {font-weight: 500;}
.product-list-prop .content-prop-header .separator {
    height: 52px;
    margin: 0 1rem;
}
.product-list-prop .content-prop-header .btn {
    white-space: nowrap;
    padding: .25rem .75rem;
    margin: auto 0;
    border-radius: 50em;
}
.product-list-prop .content-prop-header .btn-filter {
    padding: .25rem .75rem;
    margin: auto 0;
    color: #6c757c;
    border: 1px solid #ced4db;
}
.product-list-prop .content-prop-header .btn-filter:hover {
    color: #fff;
    background-color: #6c757c;
}
.product-list-prop .content-prop-header .btn-filter:active {
    box-shadow: 0 0 0 3px rgba(108, 117, 124, .33);
    border-color: #6c757c;
}
.product-list-prop .content-prop-header .btn-filter.active {
    color: #fff;
    background-color: #28a745;
}
.product-list-prop .content-prop-header .btn-filter.active:active {
    box-shadow: 0 0 0 3px rgba(40, 167, 69, .33);
    border-color: #28a745;
}
.product-list-prop .search-form {
    display: flex;
    position: relative;
    width: 100%;
}
.product-list-prop .search-form input {
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    margin: 0;
}
.product-list-prop .search-form .input-icon {
    position: absolute;
    top: 11px;
    right: 11px;
}
.product-list-prop .search-form .btn.input-icon {
    right: 1px;
    top: 1px;
    padding: 8px;
    color: #999;
    border-width: 0 0 0 1px;
    border-style: solid;
    border-color: #ced4da;
    border-radius: 0 3px 3px 0;
    z-index: 1;
}
.product-list-prop .search-form input:hover + .btn.input-icon,
.product-list-prop .search-form input:focus + .btn.input-icon {
    color: #28a745;
    border-color: #28a745;
}
.product-list-prop .search-form .btn.input-icon:hover, .product-list-prop .search-form .btn.input-icon:active, .product-list-prop .search-form .btn.input-icon.active {color: #28a745;}
.product-list-prop .search-form .btn.input-icon:active,
.product-list-prop .search-form .btn.input-icon.active {
    padding: 7px;
    border-width: 1px;
    box-shadow: 0 0 0 2px rgb(40, 167, 69, .5);
}
.product-list-prop .content-body-header {
    display: flex;
    padding: 8px 16px;
    border-bottom: 1px solid #e5e5e5;
}
.product-list-prop .select-all-none {display: flex;}
.product-list-prop .select-all-none .afy-checkbox-width-label {margin: auto;}
.product-list-prop .select-all-none label {font-size: 12px;}
.product-list-prop .select-all-none .bulk-action {
    display: none;
    margin: auto auto auto 8px;
}
.product-list-prop .select-all-none.select-partial .bulk-action, .product-list-prop .select-all-none.select-all .bulk-action {display: inline-block;}
.select-partial .afy-checkbox-width-label .afy-custom-checkbox {border-color: #28a745;}
.select-partial .afy-checkbox-width-label .afy-custom-checkbox::before {
    width: 8px;
    height: 2px;
    margin: auto;
    transform: none;
}
.product-list-prop .product-list {
    max-height: calc(100vh - 264px);
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.product-list-prop .product-list .product-brief {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.product-list-prop .product-list .product-item {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.product-list-prop .product-list .product-item:hover {background-color: #fafafa;}
.product-list-prop .product-item .product-detail-link {cursor: pointer;}
.product-list-prop .product-item .cover-image-container {
    position: relative;
    min-width: 72px;
    width: 72px;
    max-width: 72px;
    margin: 0 16px 0 8px;
    overflow: hidden;
}
.product-list-prop .product-item .cover-image-container .cover-image {
    background-size: cover;
    background-position: center center;
}
.product-list-prop .product-list .product-item .product-info {
    max-width: 50%;
    margin: auto auto auto 0;
}
.product-list-prop .min .product-list .product-item .product-info {max-width: calc(100% - 144px);}
.product-list-prop .product-item .name-and-sku {
    display: flex;
    margin: auto auto 0 0;
}
.product-list-prop .product-item .product-name {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    color: #6c757d;
}
.product-list-prop .product-item .product-name:hover {color: #343a40;}
.product-list-prop .product-item .product-sku {
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    margin: 2px auto auto 8px;
    color: #6c757d;
    opacity: .5;
}
.product-list-prop .product-item .product-sku:hover {opacity: 1;}
.product-status {
    display: flex;
    font-size: 13px;
    margin: 12px auto 8px 0;
}
.product-status .instock {margin: auto 8px auto 0;}
.product-status .switch-group {
    display: flex;
    cursor: pointer;
}
.product-status .switch-label {
    font-weight: 700;
    margin: auto auto auto 4px;
    color: #6c757d;
    opacity: .5;
}
.product-status .switch.checked + .switch-label {
    color: #28a745;
    opacity: 1;
}
.signed-icon-group-wrapper {
    display: flex;
    margin: 0 auto auto 0;
}
.signed-icon-group {
    display: flex;
    margin: auto 16px auto auto;
}
.signed-icon {
    margin: auto 4px auto auto;
    color: #28a745;
}
.status-off + .signed-icon-group-wrapper {opacity: .5;}
.status-off + .signed-icon-group-wrapper .signed-icon {color: #6c757c;}
.product-list-prop .product-item .signed-label {
    white-space: nowrap;
    line-height: 1;
    margin: auto 0;
}
.product-list-prop .product-item .price-and-shortcuts {
    display: flex;
    flex-direction: column;
    max-width: calc(50% - 190px);
    margin: auto 32px auto auto;
}
.product-list-prop .min .product-item .price-and-shortcuts {
    max-width: none;
    margin: 0 32px auto 112px;
}
.product-list-prop .min .product-item .product-price-group .currency {padding: 0;}
.product-list-prop .min .product-item .edit-options {margin: 2px auto auto 0;}
.product-list-prop .product-item .product-price-group {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.5rem;
    font-weight: 700;
    margin: auto 2px 8px auto;
}
.product-list-prop .product-item .product-price-group.flex-row-reverse {flex-wrap: wrap-reverse;}
.product-list-prop .min .product-item .product-price-group {margin: auto auto 2px 0;}
.product-list-prop .product-item .product-price-group .product-price {
    text-align: right;
    line-height: 1;
    word-break: break-all;
    margin: 0 0 auto auto;
}
.product-list-prop .product-item .product-price-group.flex-row-reverse .product-price {margin: 0 0 auto 4px;}
.product-list-prop .product-item .product-price-group .currency {
    line-height: 1;
    padding: 0 0 0 4px;
    margin: 0 0 auto auto;
}
.product-list-prop .product-item .product-price-group.flex-row-reverse .currency {margin: 0 0 auto 0;}
.product-list-prop .product-item .edit-options {margin: 2px 0 auto auto;}
.product-list-prop .product-item .product-direct-link {
    position: absolute;
    top: 50%;
    right: 0;
    font-size: 1.5rem;
    text-decoration: none;
    padding: 2px 12.5px;
    margin: auto 0;
    color: #6c757d;
    opacity: .5;
    transform: translate(0, -50%);
}
.product-list-prop .product-item .product-direct-link:hover {opacity: 1;}
.product-list-prop .content-body {width: 100%;}
.product-list-prop .content-body .cms-product-no-content {
    display: flex;
    width: 100%;
    height: 100%;
}
.product-list-prop .content-body .no-content-info {
    display: flex;
    margin: auto;
}
.product-list-prop .no-content-info .no-content-info-icon {
    text-align: center;
    margin: auto 8px auto 0;
}
.product-list-prop .no-content-info .no-content-info-text {margin: auto 0;}
.content-filters {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 0;
    min-height: calc(100vh - 278px);
    height: 100%;
    max-height: calc(100vh - 278px);
    white-space: nowrap;
    overflow: hidden;
    transition: all ease-in-out 300ms;
}
.content-filters.open {
    min-width: 300px;
    width: 300px;
    background-color: #f8f9fa;
    border-left: 1px solid #e5e5e5;
}
.cms-admin .content-filters .scroll-box {width: 100%;}
.content-filters .alert-modal-footer {
    position: relative;
    padding: 8px;
    box-shadow: 0 0 8px 0 rgb(0 0 0 / 30%);
    border: none;
    z-index: 1;
}
#btnFiltersApply {width: 100%;}
.filter-group {
    width: 276px;
    margin: 8px 12px;
    background-color: #fff;
    border-radius: .5rem;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 0 0 3px rgba(0, 0, 0, .05);
}
.filter-group.selected-filters {
    padding: 4px 4px 0 4px;
    margin: 8px 8px 4px 8px;
    background: none;
    box-shadow: none;
}
.filter-group:last-child {margin-bottom: 16px;}
.filter-group .collapse-header {
    position: relative;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    cursor: pointer;
}
.filter-group .collapse-header::after {
    content: "";
    position: absolute;
    top: 20px;
    right: 14px;
    border-width: 0 4px 4px 4px;
    border-style: solid;
    border-color: #6c757d transparent;
    transition: all ease-in-out 200ms;
}
.filter-group .collapse-header.collapsed::after {transform: rotate(180deg);}
.filter-group .collapse-header .collapse-title {
    display: block;
    position: relative;
    padding: 12px 40px 12px 16px;
    border-radius: 8px;
    z-index: 1;
}
.filter-group .filter-list-wrapper {
    position: relative;
    border-top: 1px solid #eee;
}
.filter-group .search-form {
    padding: 12px;
    margin: 0;
    border-bottom: 1px solid #eee;
}
.filter-group .search-form .input-icon {
    top: 21px;
    right: 21px;
}
.filter-list {
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-type: none;
}
.filter-label {
    display: flex;
    position: relative;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    padding: 12px 16px;
    margin: 0;
    cursor: pointer;
}
.filter-label.active {
    color: #28a745;
    background-color: rgba(40, 167, 69, .06);
}
#selectedFilterList {
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
}
#selectedFilterList li {
    padding: 2px 0;
    margin: auto 0;
}
#selectedFilterList li::after {
    content: ",";
    margin: auto 4px 0 -2px;
}
#selectedFilterList li.reset-filter::after {content: none;}
#selectedFilterList li.reset-filter .btn {
    padding: .25rem .5rem .25rem .25rem;
    line-height: 1;
    border-radius: 50em;
}
#selectedFilterList li [class*="-label"] {font-weight: 500;}
#selectedFilterList li [class*="-value"] {
    font-weight: 700;
    color: #28a745;
}
#selectedFilterList .added-cat + .added-cat::before {
    content: ",";
    margin: auto 2px 0 0;
}
#productDetail .nav-header,
#contentOrdersDetail .nav-header {
    display: flex;
    padding: 4px 12px 2px 0;
    background: linear-gradient(to bottom, #fff, #f8f9fa);
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    border-radius: 8px 8px 0 0;
}
#productDetail .inline-tabbed-content > .row {
    position: relative;
    margin: 0;
    border-top: 1px solid rgba(0,0,0,.11);
}
#productDetail .price-data {
    min-width: 200px;
    max-width: 200px;
}
#productDetail .nav-tabs {background-color: #f8f9fa;}
#productDetail .inline-tabbed-content > .row > .separator {
    position: absolute;
    left: 191px;
    bottom: 0px;
    height: 100%;
}
#backToListBtn,
#ordersBackToListBtn {
    padding: .719rem 1rem;
    margin: auto auto auto 0;
    cursor: pointer;
    opacity: .7;
}
#backToListBtn:hover, #ordersBackToListBtn:hover {opacity: 1;}
#productDetail .nav-header .btn-only {padding: .313rem .36rem;}
#productDetail .product-name {
    font-size: 1.5rem;
    font-weight: 700;
    padding: .75rem 1rem .25rem 1rem;
}
#productDetail.content-prop .nav-link {
    padding: 4px 8px;
    transition: all ease-in-out 300ms;
}
.min-main-sidebar #productDetail.content-prop .nav-link {padding: 4px 12px;}
#productDetail .cms-basics-data {
    width: 30%;
    padding: 0;
}
#productDetail .edit-data {
    width: 40%;
    padding: 20px 0 0 0;
    border-left: 1px solid rgba(0, 0, 0, .1);
}
#productDetail .edit-data .row.plus-data {
    padding: 0 4px;
    margin: 0;
}
#productDetail .edit-data .alert-modal-footer {
    padding: 8px;
    background-color: transparent;
}
#productDetail .basic-features {
    width: 30%;
    padding: 0;
}
#productDetail .basic-features .cat-list.vertical {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
}
#productDetail #catListSmall {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
#productDetail #catListSmall > ul {height: 100%;}
#productDetail .basic-features:last-child, #productDetail .basic-features.last-one {border: none;}
#productDetail .basic-features.price {padding-bottom: 8px;}
#productDetail .cat-list.vertical .cat-list-collapser {
    margin: 0;
    border-top: none;
}
#btnSimilarSearch {
    line-height: 1.4;
    white-space: nowrap;
    padding: 12px 16px;
    margin: auto 0 auto 8px;
}
#contentOrdersList,
#contentOrdersDetail {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    background-color: #fff;
}
#contentOrdersList .content-prop-header {
    width: 100%;
    padding: 1rem;
    margin: 0;
}
#contentOrdersList .content-prop-header + .afy-custom-data-table {
    width: 100%;
    max-height: none;
}
#contentOrdersList .content-prop-header + .ecommerce-table.fixed-table-head .data-table-content {
    height: auto;
    max-height: calc(100vh - 336px);
}
#contentOrdersDetail .nav-header {width: 100%;}
#contentOrdersDetail .order-table {
    padding: 0;
    border-right: 1px solid rgba(0, 0, 0, .1);
}
#orderProductTable {border-bottom: 1px solid #dee2e6;}
#orderProductTable td.cover-image, #refundsTable td.cover-image {width: 72px;}
#contentOrdersDetail .order-shipping-info {padding: 0;}
.order-shipping-info .title {
    font-size: 14px;
    font-weight: 700;
    padding: 0.75rem 1rem .7rem 1rem;
    border-bottom: 2px solid rgba(0, 0, 0, .1);
}
.order-detailed-info,
.shipping-detail-info {
    display: flex;
    flex-wrap: wrap;
    padding: 12px 8px 8px 8px;
}
.order-detailed-info .mat-outline-input-container,
.shipping-detail-info .mat-outline-input-container {
    width: calc(50% - 16px);
    margin: 0 8px;
}
.order-shipping-info .shipping-info .title {border-top: 2px solid rgba(0, 0, 0, .1);}
.order-shipping-footer {
    display: flex;
    padding: 16px;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.order-shipping-footer .btn {
    padding: 5.5px 12px;
    margin: auto 0 auto auto;
    border-radius: 4px;
}



/* ORTAK KULLANIMA TAŞIMAK LAZIM */
.cat-list-prop-container .content-prop-header {line-height: 1.35;}
.cat-list.vertical .cat-list-collapser {
    display: flex;
    position: relative;
    padding: .5rem;
    margin: .75rem -1rem 0 -1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.cat-list.vertical .cat-list-collapser .title {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    margin: auto auto auto 0;
}
.cat-list.vertical .cat-list-collapser .reset-selection {
    font-size: 0.875rem;
    padding: 0.25rem;
    cursor: pointer;
}
.cat-list.vertical .cat-list-collapser .collapser-icon {
    display: flex;
    position: relative;
    width: 24px;
    height: 24px;
    margin: auto -5px auto 0;
    cursor: pointer;
}
.cat-list.vertical .cat-list-collapser .collapser-icon::after {
    content: "";
    width: 8px;
    height: 8px;
    margin: auto;
    border-width: 0 2px 2px 0;
    border-style: solid;
    border-color: transparent #6c757d #6c757d transparent;
    transform: rotate(225deg) translate(-2px, -2px);
    transition: transform ease-in-out 200ms;
}
.cat-list.vertical .cat-list-collapser .collapser-icon.collapsed::after {transform: rotate(45deg);}
/* .cat-list.vertical {margin-bottom: -1rem;} */
.cat-list.vertical ul {
    position:relative;
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin:0;
}
.cat-list.vertical ul::before {
    content: "";
    display: block;
    position: absolute;
    top: -.125rem;
    bottom: 0;
    left: .5rem;
    width: 0;
    border-left: 1px solid #c6c7c8;
}
/* .cat-list.vertical .collapsible-content {margin: 0 -1rem;} */
.cat-list.vertical .collapsible-content {margin: 0;}
.cat-list.vertical .collapsible-content > ul {
    /* background-color: #f8f9fa; */
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.cat-list.vertical .collapsible-content > ul::before {content: none;}
.cat-list.vertical ul li {
    position: relative;
    line-height: 1em;
    padding: 0 0 0 1rem;
    margin: 0;
}
.cat-list.vertical .collapsible-content > ul > li {padding: 0;}
.cat-list.vertical .collapsible-content > ul > li::before {content: none;}
.cat-list.vertical ul li::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(.5em + .5rem);
    left: .5rem;
    width: .5rem;
    height: 0;
    margin-top: -1px;
    border-top: 1px solid #c6c7c8;
}
.cat-list.vertical ul li:last-child:before {
    bottom: 0;
    height: auto;
    background-color: #f8f9fa;
}
.cat-list.vertical ul li .cat-list-item-name {
    position: relative;
    width: 100%;
    padding: .5rem;
    margin: .125rem 0;
    cursor: pointer;
}
.cat-list.vertical ul li .cat-list-item-name::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 8px;
    height: 6px;
    border-width: 0 0 2px 2px;
    border-style: solid;
    border-color: #28a745;
    transform: rotate(-45deg) scale(0);
}
.cat-list.vertical ul li.active > .cat-list-item-name {
    font-weight: 600;
    color: #28a745;
    background-color: rgba(40, 167, 69, 0.1);
}
.cat-list.vertical ul li.active > .cat-list-item-name::after {
    transform: rotate(-45deg) scale(1);
    transform-origin: center;
    transition: transform ease-in-out 300ms;
}
.cat-list.vertical .collapsible-content > ul > li:first-child > .cat-list-item-name {margin-top: 0;}
.cat-list.vertical .collapsible-content > ul > li:last-child > .cat-list-item-name {margin-bottom: 0;}
.cat-list.vertical ul li ul li {font-size: 95%;}


.content-prop-group {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 216px);
}
.content-prop-input-group {
    padding: 1rem;
    margin: 0;
}
.content-prop-input-group .tox-tinymce {width: 100%;}
.cms-prop-header {
    padding: 1rem;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.product-list-prop .cms-prop-header .select-all-none {min-height: 28.59px;}
.cms-prop-footer {
    padding: 1rem;
    margin: auto 0 0 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
table .product-link {
    color: inherit;
    text-decoration: underline;
}
table .product-link:hover {color: #0069d9;}
/* ORTAK KULLANIMA TAŞIMAK LAZIM */








#productDetail .product-detail-header {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    margin: 4px 0 8px 0;
    opacity: .75;
}
#productDetail .product-price-group {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    word-break: break-all;
    padding: 0;
}
#productDetail .product-price-group.flex-column-reverse {flex-wrap: wrap-reverse;}
#productDetail .product-price-group .product-price {
    width: calc(100% + 16px);
    height: auto;
    padding: .25rem .5rem;
    margin: 4px -8px 4px -8px;
    font-size: 1.5rem;
    font-weight: 700;
}
#productDetail .product-price-group .currency {margin: auto auto auto 0;}
.price-action {padding: .5rem 0;}
.btn-price-action,
.view-content {
    font-size: 13px;
    padding: .5rem 0;
    cursor: pointer;
    transition: all ease-in-out 200ms;
}
.btn-price-action:hover, .view-content:hover {color: #28a745;}
.btn-price-action .btn-icon, .view-content .btn-icon {color: #28a745;}
#productDetail .product-status {margin-top: 0;}
#productDetail .signed-icon-group-wrapper {flex-direction: column;}
#productDetail .signed-icon-group {
    font-size: 12px;
    line-height: 1;
    margin: 4px 0 4px 0;
}
#productDetail .signed-icon {margin: 0 4px auto 0;}
#productImagesAll > .row {
    padding: 6px;
    margin: 0;
}
#productImagesAll .product-img {padding: 2px;}
#productImagesAll .product-img-wrapper {
    position: relative;
    overflow: hidden;
}
#productImagesAll .product-img img {
    position: absolute;
    left: 50%;
    top: 50%;
    min-width: 100%;
    max-width: fit-content;
    min-height: 100%;
    max-height: 100%;
    margin: 0;
    transform: translate(-50%, -50%);
}
#productImagesAll .order-input {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}
#productImagesAll .title {
    font-size: 12px;
    margin: auto 4px auto auto;
}
#productImagesAll .order-input input {width: 100%;}
#productImagesAll .cover-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 10px;
    padding: 7px;
    color: #fff;
    background-color: #28a745;
    border-radius: 50em;
    z-index: 2;
}
#productImagesAll .action-btn-group {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 2px;
    top: 2px;
    right: 2px;
    bottom: 2px;
    padding: 0;
    background-color: rgba(0, 0, 0, .33);
    opacity: 0;
    transition: all ease-in-out 300ms;
    z-index: 1;
}
#productImagesAll .cover-badge.d-none + .action-btn-group {white-space: nowrap;}
#productImagesAll .btn-container {
    padding: 2px;
    background-color: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, .2);
    border-radius: 50em;
    margin: 2px auto;
}
#productImagesAll .btn-container:first-child {margin-top: auto;}
#productImagesAll .btn-container:last-child {margin-bottom: auto;}
#productImagesAll .btn-container.d-none + .btn-container:last-child {margin: auto;}
#productImagesAll .product-img:hover .action-btn-group {opacity: 1;}
#addNewImage .product-img-wrapper {
    position: relative;
    padding: 0 0 calc(100% - 5px) 0;
    margin: auto;
    border: 2px dashed #28a745;
    border-radius: 8px;
    cursor: pointer;
}
#addNewImage .product-img-wrapper:active {
    box-shadow: 0 0 0 3px rgba(40, 167, 69, .33);
    border: 1px solid rgba(40, 167, 69, .66);
}
#addNewImage .btn-group {
    display: flex;
    position: absolute;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    transition: all ease-in-out 200ms;
}
#addNewImage .product-img-wrapper:hover .btn-group {background-color: rgba(40, 167, 69, .07);}
#addNewImage .btn-css-icon {
    position: relative;
    width: 25%;
    padding: 0 0 25% 0;
    margin: auto auto .5rem auto;
}
#addNewImage .btn-css-icon .horizontal-line {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: #28a745;
    transform: translate(0, -50%);
    transition: all ease-in-out 200ms;
}
#addNewImage .product-img-wrapper:hover .horizontal-line {background-color: #007d1d;}
#addNewImage .btn-css-icon .vertical-line {
    position: absolute;
    left: 50%;
    width: 2px;
    height: 100%;
    background-color: #28a745;
    transform: translate(-50%, 0);
    transition: all ease-in-out 200ms;
}
#addNewImage .product-img-wrapper:hover .vertical-line {background-color: #007d1d;}
#addNewImage .btn-title {
    margin: .5rem auto auto auto;
    color: #28a745;
    transition: all ease-in-out 200ms;
}
#addNewImage .product-img-wrapper:hover .btn-title {color: #007d1d;}
#productDetail .tab-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 1rem auto 1rem 1rem;
}
.nav-tabs-unformatted .nav-item.nav-link,
#productDetail .nav-tabs-unformatted .nav-item.nav-link {
    font-weight: 700;
    padding: 12px 8px;
    margin: 16px 8px;
    border-bottom: 1px solid transparent;
}
.nav-tabs-unformatted .nav-item.nav-link.active,
#productDetail .nav-tabs-unformatted .nav-item.nav-link.active {
    color: #28a745;
    border-bottom: 1px solid #28a745;
}
.tab-content-unformatted .tab-header {
    position: absolute;
    top: -62px;
    right: 8px;
    padding: 12px 12px 16px 12px
}
.tab-content-unformatted .tab-body > .row {
    margin: 0;
}
.tab-content-unformatted .option-list {
    -ms-flex: 0 0 calc(25% - 16px);
    flex: 0 0 calc(25% - 16px);
    max-width: calc(25% - 16px);
    min-height: calc(100vh - 310px);
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0 8px 8px 8px;
    background-color: #f8f9fa;
    box-shadow: 0 0 16px 1px #e5e5e5 inset;
    border-radius: 4px;
    z-index: 1;
}
.option-list .option-item {
    position: relative;
    font-size: 12px;
    font-weight: 700;
    line-height: 2;
    padding: 8px 16px;
    cursor: pointer;
}
.option-list .option-item:first-child {border-radius: 4px 4px 0 0;}
.option-list .option-item:last-child {border-radius: 0 0 4px 4px;}
.option-list .option-item::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 0;
    border-width: 8px 0 8px 0;
    border-style: solid;
    border-color: transparent transparent transparent #28a745;
}
.option-list .option-item.active::after {
    right: -6px;
    border-width: 8px 0 8px 6px;
}
.option-list .option-item:hover {
    background-color: rgba(40, 167, 69, .2);
}
.option-list .option-item.active {
    color: #fff;
    background-color: #28a745;
}
#tabTaxesShipping .tab-header {
    display: flex;
    padding: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, .11);
}
#tabTaxesShipping .tab-title {margin: 0;}
#tabTaxesShipping .tab-brief p:last-child {margin: 0;}
#tabTaxesShipping .switch-group {
    display: flex;
    white-space: nowrap;
    margin: .35rem 0 auto 1.5rem;
}
#tabTaxesShipping .switch-label {
    min-width: 44px;
    font-weight: 700;
    line-height: 1;
    margin: auto 0 auto 4px;
    color: #6c757d;
    opacity: .5;
    cursor: pointer;
}
#tabTaxesShipping .switch-group .checked + .switch-label {
    color: #28a745;
    opacity: 1;
}
.tab-body-section {
    padding: 12px 16px 16px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .11);
}
.tab-body-section:last-child {border: none;}
.tab-body-section p {margin: 0 0 .25rem 0;}
.tab-body-section p:last-child {margin: 0;}
.shipping-options {
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.shipping-option-item {margin: 16px 0;}
.shipping-option-item .afy-radio-width-label {
    height: auto;
    padding: 0;
    margin: 0;
}
.shipping-option-item .afy-radio-width-label input[type="radio"] {
    min-width: 16px;
    margin: 2.5px -17px auto 0px;
}
.shipping-option-item .afy-custom-radio {
    min-width: 16px;
    margin: 3.25px 0 auto 0;
}
.shipping-option-item label {margin: 0 auto auto 8px;}
.shipping-option-item .title {
    font-size: 1rem;
    font-weight: 700;
}
.shipping-option-item label input {display: none;}
.shipping-option-item :checked ~ label input {display: inline-block;}
.fixed-fee-btn {color: #28a745;}
.fixed-fee-btn:hover {
    color: #0056b3;
    text-decoration: underline;
}
#fixedFee {display: none;}
.tax-percent-group {
    display: flex;
    margin: 1rem 0;
}
.tax-percent {
    font-size: 1.25rem;
    font-weight: 700;
    margin: auto 0;
}
.disable .tax-percent {opacity: .5;}
#tabTaxesShipping .dimensions {padding-left: 1rem;}
#tabTaxesShipping .dimensions .col {
    display: flex;
    padding: 0;
}
#tabTaxesShipping .dimensions .col::after {
    content: "x";
    margin: auto 8px;
}
#tabTaxesShipping .dimensions .col.last::after {content: "";}
#tabTaxesShipping .unit {
    font-size: 13px;
    font-weight: 700;
    margin: auto 16px auto 0;
}
#tabTaxesShipping .dimensions .col.last + .unit {margin-left: -8px;}

#tabSimilar > .row {margin: 0;}
#tabSimilar .header .title {
    font-size: 14px;
    font-weight: 700;
}
#tabSimilar .filter-title {white-space: nowrap;}
#tabSimilar > .row > .col {
    min-height: calc(100vh - 164px);
    max-height: none;
    padding: 16px;
    overflow: unset;
}
#tabSimilar > .row > .product-simple-list {border-right: 1px solid rgba(0, 0, 0, .11);}
#tabSimilar .col .footer {
    display: flex;
    padding: 16px 0;
}





.cms-admin .content-prop.ecommerce-addons {
    max-height: calc(100vh - 178px);
    padding: 0;
    margin: 0;
    background-color: #fff;
}
.cms-admin .ecommerce-addons .content-prop-header {
    padding: 12px 16px;
    margin: 0;
}
.cms-admin .ecommerce-addons .content-prop-header .title {
    font-size: .85rem;
    font-weight: 700;
    margin: auto 2px auto 0;
}
.cms-admin .ecommerce-addons .content-prop-header .caption {font-weight: 400;}
.cms-admin .ecommerce-addons .content-prop-body {
    height: calc(100% - 44px);
    overflow-x: hidden;
    overflow-y: auto;
}
.cms-admin .ecommerce-addons .content-prop-body .smart-group {
    display: flex;
    flex-wrap: wrap;
    padding: 8px;
    margin: 0;
    list-style: none;
    list-style-type: none;
}
.cms-admin .ecommerce-addons .content-prop-body .plugin-item {
    display: flex;
    flex-direction: column;
    -ms-flex: 0 0 calc(25% - 8px);
    flex: 0 0 calc(25% - 8px);
    max-width: calc(25% - 8px);
    padding: 0;
    margin: 4px;
    border: 1px solid rgba(0, 0, 0, .11);
}
.cms-admin .ecommerce-addons .content-prop-body .basic-group {
    padding: 0;
    margin: 0 0 auto 0;
}
.cms-admin .ecommerce-addons .content-prop-body .plugin-icon {
    font-size: 1.25rem;
    padding: 8px 8px 4px 8px
}
.cms-admin .ecommerce-addons .content-prop-body .text-container {padding: 0 8px 8px 8px;}
.cms-admin .ecommerce-addons .content-prop-body .plugin-name {
    font-size: .8rem;
    font-weight: 700;
}
.cms-admin .ecommerce-addons .content-prop-body .author {
    font-size: .7rem;
    font-style: italic;
    padding: 0 0 8px 0;
}
.cms-admin .ecommerce-addons .content-prop-body p {
    font-size: .8rem;
    margin: 0 0 8px 0;
}
.cms-admin .ecommerce-addons .content-prop-body p:last-child {margin: 0;}
.cms-admin .ecommerce-addons .content-prop-body .basic-group + .divider {margin: auto 0 0 0;}
.cms-admin .ecommerce-addons .content-prop-body .footer-group {
    display: flex;
    padding: 8px;
    margin: 0;
}
.cms-admin .ecommerce-addons .content-prop-body .rating {margin: auto auto auto 0;}
.cms-admin .ecommerce-addons .content-prop-body .stars {
    font-size: 9px;
}







.products-table table {
    color: #6c757d;
}
.table td.product-cover-cell {
    width: 1px;
    padding: 0;
    white-space: nowrap;
}
.product-cover-cell .cover-image-container {
    position: relative;
    width: 100%;
    padding: .25rem;
}
.product-cover-cell img {
    width: 100%;
    margin: auto;
}
.products-table th,.products-table td {
    position: relative;
    max-width: 100px;
}
.products-table .action-container {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(40, 167, 69, .4);
    box-shadow: 0 0 16px #28a745 inset;
    opacity: 0;
    transition: all ease-in-out 300ms;
}
.products-table .action-container:hover {opacity: 1;}
.products-table .action-container .action-btn-container {
    padding: 4px;
    margin: auto;
    background-color: #fff;
    box-shadow: 0 0 8px #28a745;
    border-radius: 16px;
}
.products-table .action-container .btn-sm {padding: 2px 8px;}



.afy-alert-modal.afy-modal-lg.cms-edit-content-modal.two-col .alert-modal-body {overflow: hidden;}
.create-group {max-height: calc(100vh - 200px);}
.create-group .mat-outline-input-container + textarea + .tox-tinymce {
    min-height: 250px;
    height: calc(100% - 92px) !important;
}

.output-group {
    max-height: calc(100vh - 200px);
    border-left: 1px solid rgba(0, 0, 0, .1);
    overflow-x: hidden;
    overflow-y: auto;
}
.table-hover tbody tr.active {background-color: rgba(41, 168, 71, .1);}
.cms-admin .afy-alert-modal table.table.output-table th,
.cms-admin .afy-alert-modal table.table.output-table td {
    text-align: left;
    vertical-align: middle;
    padding: 8px 16px;
}
.cms-admin .afy-alert-modal table.table.output-table th {
    position: sticky;
    top: 0;
    background-color: #fff;
    border-width: 0 1px 2px 1px;
    border-style: solid;
    border-color: #dee2e6;
    box-shadow: 0 0 0 1px #dee2e6;
    z-index: 1;
}
.cms-admin .afy-alert-modal table.table.output-table td {
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: #dee2e6;
}
.cms-admin .afy-alert-modal table.table.output-table th:first-child,.cms-admin .afy-alert-modal table.table.output-table td:first-child {border-left: none;}
.cms-admin .afy-alert-modal table.table.output-table th:last-child,.cms-admin .afy-alert-modal table.table.output-table td:last-child {border-right: none;}
.cms-admin .afy-alert-modal table.table.output-table th.btn-only,
.cms-admin .afy-alert-modal table.table.output-table td.btn-only {
    width: 1px;
    text-align: center;
    white-space: nowrap;
}
.alert-modal-body.uploaded-images.image-library {
    padding: 0;
    max-height: calc(100vh - 180px);
}
.alert-modal-body.uploaded-images .add-new-image {
    display: flex;
    padding: 0 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.uploaded-images.image-library .image-list {
    width: 100%;
    background-color: #f8f9fa;
}
.alert-modal-body.uploaded-images.image-library .image-list li {
    width: 31.3333%;
    padding: 0 0 18% 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0px 0px 0px 4px rgba(0, 0, 0, .05);
    border: 0 none;
    border-radius: 4px;
}
.image-library.inventory .image-list li.cover {
    box-shadow: 0 0 0 1px #28a745, 0px 0px 0px 4px rgba(40, 167, 69, .33);
}
.image-library.inventory .image-list li .cover-badge {
    position: absolute;
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 10px;
    padding: 7px;
    color: #fff;
    background-color: #28a745;
    border-radius: 50em;
    transform: scale(0);
    transition: all ease-in-out 300ms;
}
.image-library.inventory .image-list li.cover .cover-badge {transform: scale(1);}
.alert-modal-body.uploaded-images .action-btn-group {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
    border-radius: 4px;
    opacity: 0;
    cursor: default;
    transition: all ease-in-out 300ms;
}
.alert-modal-body.uploaded-images.image-library .image-list li:hover .action-btn-group, .alert-modal-body.uploaded-images.image-library .image-list li.active .action-btn-group {opacity: 1;}
.alert-modal-body.uploaded-images .action-btn-group .btn-container {
    padding: 4px;
    background-color: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, .2);
    border-radius: 50em;
}
.alert-modal-body.uploaded-images .action-btn-group .btn-container {margin: auto 4px 16px 4px;}
.alert-modal-body.uploaded-images .action-btn-group .btn-container:first-child {margin-left: auto;}
.alert-modal-body.uploaded-images .action-btn-group .btn-container:last-child {margin-right: auto;}
.alert-modal-body.uploaded-images .action-btn-group .btn-container .btn-icon {margin-right: 0;}
.cms-layout.cms-float-layout {padding: 12px 8px;}
.cms-layout.cms-float-layout [class*="col"] {
    display: flex;
    padding: 2px 8px;
}
.cms-layout.cms-float-layout .mat-outline-input-container,
.cms-layout.cms-float-layout .form-group.afy-inline {
    width: 100%;
    margin: 0;
}
.cms-layout.cms-float-layout .action-btn-container {
    display: flex;
    width: calc(100% + 16px);
    padding: 12px 12px 12px 12px;
    margin: 0 -8px -12px -8px;
    border-top: 1px solid rgba(0, 0, 0, .05);
}
.cms-layout.cms-float-layout .action-btn-container .btn {margin: auto;}
.product-variant-modal .create-group,
.product-filter-modal .create-group {
    width: 250px;
    max-height: calc(100vh - 168px);
    overflow-x: hidden;
    overflow-y: auto;
}
.product-variant-modal .create-group + .output-group,
.product-filter-modal .create-group + .output-group {
    max-height: calc(100vh - 200px);
    margin: 0 0 -1px 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.product-variant-modal .create-group .action-btn-container,
.product-filter-modal .create-group .action-btn-container {
    padding: 4px 12px 16px 12px;
    margin: 0;
    border: none;
}
.afy-alert-modal.afy-modal-full.product-variant-modal .alert-modal-body {padding: 0;}






.content-with-inline-editor {display: flex;}
.overflow-x-auto {overflow-x: auto;}
.content-with-inline-editor .dataTables_wrapper {width: 100%;}
.customer-table .dataTables_wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.customer-table .dataTables_wrapper .data-table-header, .customer-table .dataTables_wrapper .data-table-footer {width: 100%;}
.customer-table .dataTables_wrapper .data-table-footer {
    padding: 15px 16px;
    margin: auto 0 0 0;
}
.content-prop-header + .ecommerce-table .data-table-header {
    padding: 8px 8px 8px 16px;
    border-width: 0 0 1px 0;
}
.content-prop-header + .ecommerce-table.fixed-table-head .data-table-content {height: calc(100vh - 336px);}
.content-prop-header + .ecommerce-table .data-table-footer {border-width: 1px 0 0 0;}
.ecommerce-table .table thead th {
    white-space: nowrap;
    border-top: none;
}
.ecommerce-table .table thead th.shipping-url {white-space: normal;}
/* .ecommerce-table .table tbody td {white-space: nowrap;} */
.ecommerce-table .table thead tr th:first-child, .ecommerce-table .table tbody tr td:first-child {border-left: none;}
.ecommerce-table .table thead tr th:last-child, .ecommerce-table .table tbody tr td:last-child {border-right: none;}
.ecommerce-table .table tbody td.shipping-url {
    white-space: normal;
    word-break: break-all;
}
.ecommerce-inline-prop-editor {
    min-width: 0;
    width: 0;
    max-width: 0;
    white-space: nowrap;
    overflow-x: hidden;
    transition: all ease-in 150ms;
}
.ecommerce-inline-prop-editor.active {
    min-width: 320px;
    width: 320px;
    max-width: 320px;
    border-left: 1px solid #ececec;
}
.ecommerce-inline-prop-editor.half-w.active {
    min-width: 50%;
    width: 50%;
    max-width: 50%;
}
.ecommerce-inline-prop-editor.size-sm.active {
    min-width: 240px;
    width: 240px;
    max-width: 240px;
}
.ecommerce-inline-prop-editor.size-lg.active {
    min-width: 480px;
    width: 480px;
    max-width: 480px;
}
.ecommerce-inline-prop-editor.left-side.active {
    border-left: none;
    border-right: 1px solid #ececec;
}
.ecommerce-inline-prop-editor .row {
    min-width: 319px;
    padding: 0 8px;
    margin: 0;
}
.ecommerce-inline-prop-editor.size-sm .row {min-width: 239px;}
.ecommerce-inline-prop-editor.size-lg .row {min-width: 479px;}
.ecommerce-inline-prop-editor .row [class*="col-"] {padding: 2px 4px;}
.ecommerce-inline-prop-editor .row.header {
    padding: 12px 12px 12px 16px;
    border-bottom: 1px solid #ececec;
}
.ecommerce-inline-prop-editor .row.sub-header {border-top: 1px solid #ececec;}
.ecommerce-inline-prop-editor .row.header .title {
    font-size: 12px;
    line-height: 1.8;
    margin: auto auto auto 0;
}
.ecommerce-inline-prop-editor .row.header .btn-close {
    line-height: 1.6;
    width: 21px;
    padding: 0 2px;
}
.ecommerce-inline-prop-editor .row.body {
    flex-direction: column;
    flex-wrap: nowrap;
    height: calc(100vh - 336px);
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.ecommerce-inline-prop-editor .row.footer {
    justify-content: space-between;
    padding: 16px 8px 15px 8px;
    border-top: 1px solid #ececec;
}
.ecommerce-inline-prop-editor .row.footer .btn {
    padding: 3px 9px;
    margin: 0 4px;
    border-radius: 50em;
}
.ecommerce-inline-prop-editor .row.inline-form-group {flex-wrap: nowrap;}
.ecommerce-inline-prop-editor .row.inline-form-group .col {padding: 2px 4px;}
.ecommerce-inline-prop-editor .btn-submit {
    margin: auto auto auto 4px;
}
.ecommerce-inline-prop-editor .btn-icon-only {
    padding: 8px 8.75px;
    border-radius: 50%;
}
.hp-table {
    height: 100%;
    border-top: 1px solid #ececec;
    overflow-x: hidden;
    overflow-y: auto;
}
.hp-table table {border: none;}
.fixed-table-head th {
    position: sticky;
    top: 0;
    background-color: #fff;
    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, .1), 0 -1px 0 #eee;
    border-width: 0 1px;
}
.returns-table .table.min .overflow-dots {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.returns-table .table.min .customer-info {max-width: 200px;}
.returns-table .table.min .customer-info-group {display: inline-block;}
.returns-table .table.min .customer-icons {display: none;}
.ecommerce-inline-prop-editor .row .customer-info {
    min-width: calc(100% + 16px);
    padding: 8px 16px;
    margin: 0 -8px;
    border-bottom: 1px solid #ececec;
}
.ecommerce-inline-prop-editor .customer-info-group {
    font-size: 13px;
    margin: 4px 0;
}
.ecommerce-inline-prop-editor .customer-icons {
    width: 16px;
    margin-right: 4px;
}
#customerOrderTable {border: none;}
#customerOrderTable thead th {border-width: 1px;}
.returns-table tbody td .product-name {
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    margin: 0 0 8px 0;
    color: #6c757d;
}
.returns-table tbody td .refund-description {color: #343a40;}
.returns-table tbody td .refund-description-heading {
    font-weight: 700;
}
#couponsTable th, #couponsTable td, #couponOrderTable td, #couponOrderTable th {white-space: pre-wrap;}
.ecommerce-terms {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.ecommerce-terms .recent-msgs {overflow: hidden;}
.ecommerce-terms .header {
    font-weight: 700;
    padding: 1rem;
    background-color: #f8f9fa;
    border-width: 1px 0;
    border-style: solid;
    border-color: #ececf1;
}
.ecommerce-terms .definition-text {border-bottom: 1px solid #ececf1;}
.ecommerce-terms ul {
    list-style: none;
    list-style-type: none;
}
.ecommerce-terms ul li {border-bottom: 1px solid #ececf1;}
.ecommerce-terms ul li:nth-child(odd) {background-color: #f8f9fa;}
.ecommerce-terms ul li:first-child {
    padding: 1rem;
    background: none;
}
.ecommerce-terms ul li:last-child {border: none;}
.general-terms-list {
    width: 33.333337%;
    padding: 1rem;
    border-right: 1px solid #ddd;
}
.general-terms-list:last-child {border: none;}
.refund-terms-list {
    width: 33.333337%;
    padding: 1rem;
}
.ecommerce-terms .action-btn {
    display: flex;
    width: 100%;
    padding: 1rem;
    color: #6c757d;
    border-radius: 0;
}
.ecommerce-terms .action-btn:hover {
    color: #fff;
    background-color: #6c757d;
}
.ecommerce-terms .action-btn .btn-title {text-align: left;}
.ecommerce-terms .btn-create {
    padding: .75rem 1rem;
    color: #28a745;
    border: 1px solid #28a745;
    border-radius: .25rem;
}
.ecommerce-terms .btn-create:hover {
    color: #fff;
    background-color: #28a745;
    border-color: #179634;
}
.ecommerce-terms .btn-create:active {box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, .5);}
/* ./Editor Section :::: E-Ticaret */





















/* Content Loading Spinner */
.lds-ring {
    display: inline-block;
    position: relative;
    width: 48px;
    height: 48px;
    margin: auto auto 16px auto;
  }
.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 48px;
    height: 48px;
    margin: 0px;
    border: 4px solid #28a745;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
    border-color: #28a745 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
    animation-delay: -.45s;
}
.lds-ring div:nth-child(2) {
    animation-delay: -.3s;
}
.lds-ring div:nth-child(3) {
    animation-delay: -.15s;
}
@keyframes lds-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}
.check-connection-overlay .info-text {
    font-size: 11px;
    color: #6c757d;
    margin: 8px auto auto auto;
}

/* Adaptor Section */
.adaptor-status-icon {
    display: flex;
    min-width: 22px;
    color: #6c757c;
    background-color: #f5f7f8;
    border-radius: 50%;
}
.adaptor-status-icon::before {margin: auto;}
.adaptor-properties {
    width: 100%;
    height: calc(100vh - 145px);
    padding: 16px;
    background-color: #f8f9fa;
    overflow-x: hidden;
    overflow-y: auto;
}
.adaptor-properties .content-prop {
    flex-direction: row;
    padding: 0;
    background-color: #fff;
}
.adaptor-properties .content-prop-header {
    padding: 16px;
    margin: 0;
}
.adaptor-properties .action-footer {
    display: flex;
    padding: 16px;
}
.adaptor-properties .btn,
.btn-cms-save-all {
    line-height: 1.2;
    padding: 8px 12px;
    margin: auto 0 auto auto;
}
.adaptor-settings {width: 100%;}
.adaptor-settings .action-footer {padding-top: 0;}
.adaptor-settings .action-footer .btn-sync {
    display: flex;
    padding: 5px;
    margin: auto 0;
}
.adaptor-settings .action-footer .btn-sync .btn-icon {color: #28a745;}
.adaptor-settings .action-footer .btn-sync .btn-title {
    color: #6c757d;
    padding: 0 0 0 8px;
    margin: auto 0;
    overflow: hidden;
}
.adaptor-settings .action-footer .btn-sync.animating .btn-title {padding: 0;}
.adaptor-settings .action-footer .sync-info {
    font-size: 13px;
    line-height: normal;
    padding: .5rem 1rem;
    margin: auto 0;
    border-radius: 50em;
}
.adaptor-settings .action-footer .sync-info-icon {margin: auto 4px auto -4px;}
.adaptor-settings .action-footer .sync-info-icon.fa-check {transform: scale(0);}
.adaptor-settings .action-footer .check-anim .sync-info-icon.fa-check {animation: checkanim 300ms linear forwards;}
@keyframes checkanim {
    0% {transform: scale(0);}
    70% {transform: scale(2);}
    100% {transform: scale(1);}
}

.adaptor-settings .input-group {
    flex-direction: column;
    padding: 8px 16px;
}
.map-settings {
    width: 100%;
    border-left: 1px solid rgba(0, 0, 0, .1);
}
.map-settings .scroll-container {
    max-height: calc(100vh - 294px);
    overflow-x: hidden;
    overflow-y: auto;
}
.map-settings .row {
    padding: 4px 8px;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    transition: background-color ease-in-out 300ms;
}
.map-settings .row:hover {background-color: #f8f9fa;}
.map-settings .col-6 {
    display: flex;
    font-size: 12px;
    padding: 0 8px;
    margin: auto 0;
}
.map-settings .col-6:first-child::after {
    content: ":";
    margin: auto 0 auto auto;
}
.map-settings select {width: 100%;}
.map-settings .action-footer {border-top: 1px solid rgba(0, 0, 0, .1);}



/* .adaptor-properties > .row {
    flex-direction: column;
    flex-wrap: nowrap;
    min-height: calc(100vh - 149px);
    height: calc(100vh - 149px);
    max-height: calc(100vh - 149px);
    padding: 16px;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.adaptor-properties > .row .adaptor-prop,
.adaptor-properties > .row .adaptor-map {
    flex: 0;
    max-width: 100%;
    padding: 0;
}
.adaptor-properties > .row .adaptor-prop {margin: 0 0 16px 0;}


.content-prop-body .row {
    flex-wrap: nowrap;
    font-size: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.content-prop-body .row:last-child {border: none;}
.content-prop-body .row .col {
    padding: 16px;
}
.content-prop-body .valuable-title {
    font-weight: 700;
    white-space: nowrap;
    margin: auto 4px auto 0;
}
.content-prop-body .valuable-title::after {content: ":";}
.content-prop-footer {
    display: flex;
    padding: 16px 16px 4px 16px;
    margin: 16px -16px -4px -16px;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.row .col.adaptor-data-col {
    display: flex;
    flex-wrap: nowrap;
    padding: 9.8px 16px;
    border-right: 1px solid rgba(0, 0, 0, .1);
}
.row .col.adaptor-data-col:last-child {border: none;}
.row .col.adaptor-data-col:only-child {border-right: 1px solid rgba(0, 0, 0, .1);}
.row .adaptor-data-col .valuable-title {margin-right: 10px;}
select.adaptor-data-list {
    width: 100%;
    font-size: 11px;
    margin: auto 0;
} */

/*------------------------------------------
05. NOTIFICATION CENTER
------------------------------------------*/
.admin-content.notification-center .content.row {margin: 0;}
.notification-center .content-prop {
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #fff;
}
.notification-center .cms-basics-data {
    width: 290px;
    border-right: 1px solid rgba(0, 0, 0, .1);
}
.notification-center .new-notification-form {padding: 1rem;}
.notification-center .new-notification-form .upload-preview-container {margin: 0 0 .75rem 0;}
.notification-center .new-notification-form .mat-outline-input-container:last-child {margin-bottom: -7px;}
.notification-center .uploaded-preview {position: relative;}
.upload-image .dummy-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-height: 100%;
    /* height: 100%;
    border: 1px dashed rgba(0, 0, 0, .22);
    border-radius: 6px; */
    margin: 0;
    border-radius: 4px;
}
.upload-image .uploaded-image-preview {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #cdcdcd;
    border-radius: 6px;
}
.notification-center .afy-input-btn-group-container {
    display: flex;
    position: absolute;
    left: 0;
    top: 11px;
    right: 0;
    bottom: 11px;
    width: auto;
}
.notification-center .afy-input-btn-group {
    display: flex;
    flex-direction: row;
    position: relative;
    width: auto;
    font-size: .8rem;
    padding: 4.5px .75rem;
    margin: auto;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 15px;
    overflow: visible;
    opacity: .66;
    cursor: pointer;
}
.notification-center .afy-input-btn-group:hover,
.notification-center .afy-input-btn-group:focus,
.notification-center .afy-input-btn-group:active {
	color: #fff;
    border-color: #28a745;
    background-color: #28a745;
    opacity: 1;
	transition: color ease-in-out 300ms,background-color ease-in-out 300ms,border-color ease-in-out 300ms,box-shadow ease-in-out 100ms;
}
.notification-center .uploaded .afy-input-btn-group {display: none;}
.notification-center .afy-input-btn-group-container .helper {
    display: none;
    text-align: center;
    margin: auto;
    border: none;
    opacity: 0;
    transition: opacity ease-in-out 300ms;
}
.notification-center .uploaded .afy-input-btn-group-container .helper {display: block;}
.notification-center .uploaded:hover .afy-input-btn-group-container .helper {opacity: 1;}
.notification-center .helper .btn {
    min-width: 48px;
    width: 48px;
    max-width: 48px;
    font-size: 24px;
    padding: 5px 0;
    margin: auto;
    background-color: #fff;
    border-radius: 24px;
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
}
.notification-center .helper .btn:hover,
.notification-center .helper .btn:focus,
.notification-center .helper .btn.active {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.notification-center .tab-content > .active {display: flex;}












.notification-center .send-with-filter-container {
    display: flex;
    flex-direction: column;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}
.notification-center .send-with-filter-options {
    display: flex;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.notification-center .send-with-filter-options .mat-outline-input-container {margin: auto .75rem;}
.notification-center .selected-send-option-container {
    display: flex;
    width: 100%;
    margin: 0 0 auto auto;
}
.notification-center .form-end-btn {
    display: flex;
    position: relative;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    padding: .75rem;
    margin: 0 0 0 auto;
    border-left: 1px solid rgba(0, 0, 0, .04);
}
.notification-center .form-end-btn.active {border-color: rgba(0, 0, 0, .1);}
.form-end-btn .btn {padding: 12px 24px;}
.notification-center .selected-send-option {
    display: none;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 100%;
    padding: 0 1rem;
    margin: 0;
    border-left: 1px solid rgba(0, 0, 0, .11);
}
.notification-center .selected-send-option .mat-outline-input-container {
    width: 100%;
    margin: auto .5rem;
}
.notification-center .member-check-list .header {
    font-weight: 600;
    padding: .75rem 1rem;
    background-color: #f8f9fa;
}
.notification-center .selected-send-option .btn-submit {
    white-space: nowrap;
    padding: 5.5px 16px;
    margin: auto 0 auto .25rem;
}
.notification-center .member-check-list {
    max-height: calc(100vh - 240px);
    overflow-x: hidden;
    overflow-y: auto;
}
.notification-center .member-check-list .table {margin: 0;}













.send-date-time ul {
    display: flex;
    flex-direction: column;
    height: calc(100% - 38px);
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-type: none;
}
.send-date-time li:nth-of-type(odd) {background-color: #f8f9fa;}
.send-date-time li label {font-size: 12px;}
.notification-center .afy-radio-width-label .mat-outline-input-container {
    margin: auto 0;
}
.selected-send-option .header {
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 0;
    margin: auto 8px auto 0;
}


/*------------------------------------------
06. APP SETTINGS
------------------------------------------*/
.app-settings > .content.row {padding: 62px 16px 16px 16px;}
.app-settings > .content.row > .col-xl-4 {padding: 0 8px;}
.app-settings > .content.row > .col-xl-4:first-child {padding: 0 8px 0 0;}
.app-settings > .content.row > .col-xl-4:last-child {padding: 0 0 0 8px;}
.app-settings-container .header {
    color: #fff;
    background-color: #6c757d;
    border-bottom: 1px solid rgba(0, 0, 0, .33);
    border-radius: 8px 8px 0 0;
}
.definition-text {padding: 16px;}
.definition-text h6 {
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 8px 0;
    color: #6c757d;
}
.definition-text p {
    padding: 0;
    margin: 0 0 8px 0;
}
.definition-text p:last-child {margin-bottom: 0;}
.app-settings-container ul {
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-type: none;
}
.app-settings-container ul li {
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #eee;
}
.app-settings-container ul li label {font-size: 12px;}
.app-settings-container ul li:last-child {border: none;}
.app-settings-container ul .afy-radio-width-label {
    padding: 24px 16px;
    border-bottom: 1px solid #eee;
}
.app-settings-container ul .with-mat-input {padding: 0 16px;}
.app-settings-container ul .header {
    margin: 0;
    color: #6c757d;
    background-color: rgba(0, 0, 0, .02);
    border-top: 1px solid rgba(0, 0, 0, .07);
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    border-radius: 0;
}
.app-settings-container ul .header-txt {font-size: 12px;}
.app-settings-container ul li a {
    display: flex;
    font-size: 12px;
    padding: 16px;
    color: #6C7580;
}
.app-settings-container ul li a:hover {
    text-decoration: none;
    color: #343a40;
    background-color: #f8f9fa;
}
.app-settings-container ul li a:active {
    color: #000;
    background-color: #f3f4f5;
}
.app-settings-container ul li a .btn-icon {
    font-size: 18px;
    margin: auto 4px auto 0;
}
.app-settings-container ul li a .btn-icon-right {
    font-size: 14px;
    margin: auto 0 auto auto;
}
.app-settings-container ul li a .btn-icon-right.fa-plus {font-size: 12px;}

.subscription .recent-msgs.app-settings-container.app-info-container {width: 100%;}
.app-settings-container.app-info-container .header, .subscription .recent-msgs.app-settings-container.app-info-container .definition-text {padding: 1rem;}
.app-settings-container.app-info-container .header {
    color: #343a40;
    background-color: rgba(0, 0, 0, .02);
    border-bottom: 1px solid #eee;
}
.app-settings-container.app-info-container .header-txt {font-size: 1rem;}
.app-settings-container ul.app-info-sum li {
    padding: 1rem;
    background-color: #fff;
}
.app-settings-container ul.app-info-sum li:first-child {border-top: 1px solid #eee;}
.app-settings-container ul.app-info-sum li:nth-child(odd) {background-color: rgba(0, 0, 0, .02);}
.app-settings-container ul.app-info-sum li span {
    display: inline-block;
    font-size: .8125rem;
    color: #343a40;
}
.app-settings-container ul.app-info-sum li .header {
    font-weight: 700;
    padding: 0;
    background: none;
    border: none;
}
.app-info-container .action-footer {
    display: flex;
    padding: 1rem;
}
.app-info-container .plan.btn {
    padding: .5rem .75rem;
    margin: 0 .25rem;
    border-radius: .25rem;
}
.app-info-container .plan.btn:first-child {margin-left: 0;}
.app-info-container .plan.btn:last-child {margin-right: 0;}

/*------------------------------------------
07. NEW APP
------------------------------------------*/
.new-app .content.row {height: calc(100vh - 50px);}
.new-app .recent-msgs {
    max-width: 556px;
    height: auto;
    margin: 0 0 auto 0;
    overflow: hidden;
}
.new-app .app-platform-info {
    justify-content: flex-start;
    padding: 1rem 1rem 0 1rem;
}
.new-app .platform-icon-logo img {max-width: 40px;}
.new-app .platform-icon-logo {
    min-width: 32px;
    max-width: 64px;
    font-size: 24px;
    margin: 0 .25rem 0 0;
    opacity: 1;
}
.new-app .platform-icon-logo.fa-android {color: #0b9bb3;}
.new-app .platform-icon-logo.fa-apple {
    font-size: 26px;
    margin-top: -2.5px;
    color: #49a7ec;
}
.new-app .platform-icon-logo.fa-globe-americas {
    color: #4b84c1;
    font-size: 22px;
}
.new-app .divider {margin: 1rem 0;}
.new-app img.afy-all-platform {
    max-width: 640px;
    width: 100%;
    padding: 0 1rem;
}
.new-app .brief-text {
    position: relative;
    padding: 1rem 1rem 0 1rem;
    margin: 0;
    background-color: #fff;
    box-shadow: 0 -.5rem .5rem #fff;
}
.new-app .input-group-container {padding: 0 1rem 1rem 1rem;}
.new-app .input-group .row {
    width: 100%;
    margin: 0;
}
.new-app .input-group .row .mat-outline-input-container {width: 100%;}
.new-app .upload-preview-container {
    position: relative;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}
.new-app .uploaded-preview {position: relative;}
.new-app .upload-image.aspc-1x1 {
    position: relative;
    width: 118px;
    height: 118px;
}
.new-app .afy-input-btn-group-container {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: auto;
}
.new-app .afy-input-btn-group {
    display: flex;
    flex-direction: row;
    position: relative;
    width: auto;
    font-size: 12px;
    padding: 4px 8px;
    margin: auto;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 15px;
    overflow: visible;
    opacity: .66;
    cursor: pointer;
    transition: color ease-in-out 300ms,background-color ease-in-out 300ms,border-color ease-in-out 300ms,box-shadow ease-in-out 100ms;
}
.new-app .afy-input-btn-group:hover,
.new-app .afy-input-btn-group:focus,
.new-app .afy-input-btn-group:active {
	color: #fff;
    border-color: #28a745;
    background-color: #28a745;
    opacity: 1;
}
.new-app .uploaded .afy-input-btn-group {display: none;}
.new-app .afy-input-btn-group-container .helper {
    display: none;
    text-align: center;
    margin: auto;
    border: none;
    opacity: 0;
    transition: opacity ease-in-out 300ms;
}
.new-app .helper .btn {
    min-width: 48px;
    width: 48px;
    max-width: 48px;
    font-size: 24px;
    padding: 5px 0;
    margin: auto;
    background-color: #fff;
    border-radius: 24px;
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
}
.new-app .uploaded .afy-input-btn-group-container .helper {display: block;}
.new-app .uploaded:hover .helper {opacity: 1;}
.new-app .helper .btn:hover,
.new-app .helper .btn:focus,
.new-app .helper .btn.active {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.new-app .footer .btn-sm {
    width: 100%;
    padding: .5rem .75rem;
    margin: 0;
}
.new-app .footer .btn.disabled {
    background-color: transparent;
    pointer-events: none;
    cursor: not-allowed;
}

/*------------------------------------------
06. DEVELOPER
------------------------------------------*/
.admin-content.developer .content.row > .row {
    width: calc(100% + 16px);
    padding: 8px;
    margin: -6px -8px 0 -8px;
}
.admin-content.developer .content.row {padding: 54px 8px 8px 8px;}
.developer .navbar-brand {margin: auto 6px auto 0;}
.developer img.for-light-theme {height: 30px;}
.developer-sign {
    font-size: 13px;
    color: #28a745;
    margin: auto auto 3px 0;
}
.show-all.btn {
    padding: 8px 12px;
    line-height: 1;
    border-color: rgba(0, 0, 0, .2);
    border-radius: 50rem;
}
.developer .admin-card .card-image-container {background-color: rgba(52, 58, 64, .11);}
.developer .admin-card .card-icon {color: #343a40;}
.developer .app-basic-info {padding: 0;}
.developer .app-name-status {padding: 28px 0;}
.developer .app-icon {
    width: 120px;
    height: 120px;
    border-radius: 4px 0 0 0;
    filter: grayscale(1);
    opacity: .3;
    transition: all ease-in-out 300ms;
}
.developer .app-basic-info:hover .app-icon {
    filter: grayscale(0);
    opacity: 1;
}
.developer .app-name {margin: auto auto 0 8px;}
.developer .app-status {margin: 4px auto 7px 8px;}
.admin-content.plugin-list > .content {padding: 54px 8px 8px 8px;}
.new-plugin .header .content-heading {
    padding: 6px 0;
}
.new-plugin .uploaded-preview {position: relative;}
.new-plugin .video-upload .upload-preview-container,.new-plugin .video-upload .uploaded-preview {height: 100%;}
.new-plugin .video-upload .upload-image.aspc-16x9 {
    width: auto;
    height: 100%;
    padding: 0 17.777778% 0 0;
    margin: auto 0 auto auto;
}
.new-plugin .video-upload .uploaded-image-preview {display: block;}
.new-plugin .video-upload iframe {
    width: 100%;
    height: 100%;
    border-radius: 6px;
}
.video-url-modal .alert-modal-body {padding: 4px 12px;}
.new-plugin .upload-image.aspc-1x1 {
    position: relative;
    width: 118px;
    height: 118px;
}
.new-plugin .upload-image.aspc-10x18 {
    width: 100%;
    padding: 0 0 177.7777778% 0;
}
.new-plugin .afy-input-btn-group-container {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: auto;
}
.video-upload .uploaded .afy-input-btn-group-container {
    left: 0;
    top: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
}
.new-plugin .afy-input-btn-group,
.keystore-files .afy-input-btn-group {
    display: flex;
    flex-direction: row;
    position: relative;
    width: auto;
    font-size: 12px;
    padding: 4px 8px;
    margin: auto;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 15px;
    overflow: visible;
    opacity: .66;
    cursor: pointer;
    transition: color ease-in-out 300ms,background-color ease-in-out 300ms,border-color ease-in-out 300ms,box-shadow ease-in-out 100ms;
}
.new-plugin .afy-input-btn-group:hover,
.new-plugin .afy-input-btn-group:focus,
.new-plugin .afy-input-btn-group:active,
.keystore-files .afy-input-btn-group:hover,
.keystore-files .afy-input-btn-group:focus,
.keystore-files .afy-input-btn-group:active {
	color: #fff;
    border-color: #28a745;
    background-color: #28a745;
    opacity: 1;
}
.android .keystore-files .afy-input-btn-group:hover,
.android .keystore-files .afy-input-btn-group:focus,
.android .keystore-files .afy-input-btn-group:active {
    background-color: #0b9bb3;
    border-color: #0999b1;
}
.android .keystore-files .afy-input-btn-group:active {box-shadow: 0 0 0 3px rgba(11, 155, 179, .33);}
.ios .keystore-files .afy-input-btn-group:hover,
.ios .keystore-files .afy-input-btn-group:focus,
.ios .keystore-files .afy-input-btn-group:active {
    background-color: #49a7ec;
    border-color: #3997dc;
}
.ios .keystore-files .afy-input-btn-group:active {box-shadow: 0 0 0 3px rgba(11, 155, 179, .33);}
.new-plugin .uploaded .afy-input-btn-group {display: none;}
.new-plugin .afy-input-btn-group-container .helper {
    display: none;
    text-align: center;
    margin: auto;
    border: none;
    opacity: 0;
    transition: opacity ease-in-out 300ms;
}
.new-plugin .helper .btn {
    min-width: 48px;
    width: 48px;
    max-width: 48px;
    font-size: 24px;
    padding: 5px 0;
    margin: auto;
    background-color: #fff;
    border-radius: 24px;
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
}
.new-plugin .uploaded .afy-input-btn-group-container .helper {display: block;}
.new-plugin .uploaded:hover .helper {opacity: 1;}
.new-plugin .helper .btn:hover,
.new-plugin .helper .btn:focus,
.new-plugin .helper .btn.active {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.plugin-basics {flex-wrap: nowrap;}
.plugin-basics .upload-preview-container {padding: 8px 0 0 8px;}
.plugin-basics-input-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 8px;
    margin: 0;
}
.plugin-basics-input-container > .row {width: 100%;}
.plugin-basics-input-container > .row:first-child {margin: auto auto 0 0;}
.plugin-basics-input-container > .row:last-child {margin: 0 auto 0 0;}
.plugin-basics-input-container > .row > .col:first-child {padding: 0 4px 0 0;}
.plugin-basics-input-container > .row > .col:last-child {padding: 0 0 0 4px;}
.plugin-basics-input-container > .row > .col .mat-outline-input-container {margin: 0;}
.plugin-basics-input-container > .row:last-child > .col .mat-outline-input-container {padding-bottom: 0;}
.plugin-database-tables .admin-card .card-image-container {
    -ms-flex: 0 0 64px;
    flex: 0 0 64px;
    min-width: 64px;
    width: 64px;
    max-width: 64px;
    height: 0;
    padding-bottom: 64px;
    background-color: rgba(40, 167, 69, .22);
}
.plugin-database-tables .admin-card.afy-card-horizontal .list-page-title-container {
    -ms-flex: 0 0 calc(100% - 64px);
    flex: calc(100% - 64px);
    min-width: calc(100% - 64px);
    width: calc(100% - 64px);
    max-width: calc(100% - 64px);
}
.plugin-database-tables .admin-card .card-icon {color: #28a745;}
.plugin-database-tables .admin-card .title {
    font-size: .8rem;
    margin: auto auto auto 10px;
    opacity: .6;
}
.plugin-database-tables .admin-card .title .fa {
    font-size: 14px;
    margin: auto 4px auto 0;
}
.plugin-requirement {padding: 16px 0;}
.plugin-price {padding: 0 0 16px 0;}
.plugin-source-code {padding: 16px;}
.new-plugin .non-image-upload {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}
.new-plugin .non-image-upload .afy-input-btn-group,
.keystore-files .non-image-upload .afy-input-btn-group {
    padding: 8px 12px;
    border-radius: 4px;
}
.uploaded-file-path {
    max-width: calc(100% - 65px);
    font-size: 12px;
    line-height: normal;
    letter-spacing: .02em;
    margin: auto auto auto 0;
    color: #6c757d;
}
.file-path {font-weight: 700;}
.plugin-detail .recent-msgs {height: auto;}
.developer .plugin-detail .app-icon {
    width: 31px;
    height: 31px;
    filter: none;
    border-radius: 4px;
    opacity: 1;
}
.developer .plugin-detail .app-name-status {padding: 0;}
.developer .plugin-detail .app-name {margin: -2px auto 0 2px;}
.developer .plugin-detail .app-status {margin: 0 0 -2px 2px;}

/*------------------------------------------
07. AFY-ADMIN
------------------------------------------*/
.admin-content.afy-admin .content.row {padding: 54px 8px 8px 8px;}
.admin-content.afy-admin .app-preview {padding: 8px;}
.admin-content.afy-admin .app-preview .device {
    background: none;
    box-shadow: none;
    transform: scale(.85);
    transform-origin: center top;
}
.admin-content.afy-admin .app-preview .device .carousel,
.admin-content.afy-admin .app-preview .device .carousel-inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.admin-content.afy-admin .app-preview .device .carousel-item {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
.admin-content.afy-admin .app-preview .app-sample-carousel-control {
    position: absolute;
    top: 40%;
    font-size: 16px;
    text-decoration: none;
    padding: 16px 19px;
    color: #fff;
    background-color: rgba(0, 0, 0, .33);
    border-radius: 50%;
    opacity: .33;
    transition: opacity ease-in-out 300ms;
}
.admin-content.afy-admin .app-preview .app-sample-carousel-control:hover {opacity: 1;}
.admin-content.afy-admin .app-preview .app-sample-carousel-control.prev {left: 32px;}
.admin-content.afy-admin .app-preview .app-sample-carousel-control.next {right: 32px;}
.admin-content.afy-admin .summary-content {padding: 0;}
.admin-content.afy-admin .summary-content .row {margin: 0;}
.admin-content.afy-admin .recent-msgs {
    display: flex;
    flex-direction: column;
}
.admin-content.afy-admin .summary-content .row.user-respond,.admin-content.afy-admin .summary-content .row > [class*="col"] {padding: 6px 4px;}
.admin-content.afy-admin .summary-content .row.user-respond p {padding: 16px;}
.afy-admin .admin-card .card-image-container {background-color: rgba(52, 58, 64, .11);}
.afy-admin .admin-card .card-icon {color: #343a40;}
.admin-content.afy-admin .app-info {color: #6c757d;}
.admin-content.afy-admin .app-info li {font-size: 12px;}
.admin-content.afy-admin .app-info li .msg-txt,.admin-content.afy-admin .app-info li .title {display: flex;}
.admin-content.afy-admin .app-info li .msg-txt {padding: 16px;}
.admin-content.afy-admin .app-info li .title {margin: auto 4px auto 0;}
.admin-content.afy-admin .app-info li .title::after {content: ":";}
.admin-content.afy-admin .app-info li .title-icon {
    min-width: 15px;
    margin: auto 4px auto 0;
}
.admin-content.afy-admin .app-info li .title-icon.fa-terminal {font-size: 80%;}
.admin-content.afy-admin .app-info li .title-text {margin: auto;}
.admin-content.afy-admin .app-info li .value {
    display: flex;
    flex-wrap: wrap;
    font-weight: 700;
    margin: auto auto auto 0;
}
.admin-content.afy-admin .app-info .platform-info {
    display: none;
    white-space: nowrap;
    margin: 5px;
}
.admin-content.afy-admin .app-info .platform-info.supported {display: flex;}
.admin-content.afy-admin .app-info .platform-icon-logo {
    min-width: auto;
    max-width: none;
    margin: auto 0;
}
.admin-content.afy-admin .app-info .platform-icon-logo.fab {font-weight: normal;}
.admin-content.afy-admin .app-info .platform-icon-logo.fa {font-weight: 900;}
.admin-content.afy-admin .app-info .platform-icon-logo.fa-google-play {font-size: 14px;}
.admin-content.afy-admin .app-info .platform-info-text {
    display: none;
    font-size: 90%;
    margin: auto 0 auto 4px;
}
.admin-content.afy-admin .app-info .supported .platform-icon-logo {opacity: 1;}
.admin-content.afy-admin .app-info .pwa-logo + .platform-info-text {color: #6610f2;}
.admin-content.afy-admin .app-info .fa-google-play,.admin-content.afy-admin .app-info .fa-google-play + .platform-info-text {color: #0b9bb3;}
.admin-content.afy-admin .app-info .fa-app-store,.admin-content.afy-admin .app-info .fa-app-store + .platform-info-text {color: #49a7ec;}
.admin-content.afy-admin .app-info .fa-globe-americas,.admin-content.afy-admin .app-info .fa-globe-americas + .platform-info-text {color: #4b84c1;}



.admin-content.afy-admin .summary-content .row .qr-container {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}
.admin-content.afy-admin .app-qr {
    display: flex;
    margin: 8px 16px;
}
.admin-content.afy-admin .app-qr-img {
    width: 96px;
    height: 96px;
    margin: auto 0;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.app-qr.pwa {color: #6610f2;}
.app-qr.android {color: #0b9bb3;}
.app-qr.ios {color: #49a7ec;}
.app-qr.web {color: #4b84c1;}
.app-qr.pwa .app-qr-img {border-color: #6610f2;}
.app-qr.android .app-qr-img {border-color: #0b9bb3;}
.app-qr.ios .app-qr-img {border-color: #49a7ec;}
.app-qr.web .app-qr-img {border-color: #4b84c1;}
.admin-content.afy-admin .app-qr-img.fa {
    display: flex;
    font-size: 48px;
}
.admin-content.afy-admin .app-qr-img.fa::before {
    margin: auto;
}
.app-qr-text {
    font-size: 90%;
    font-weight: 600;
    margin: auto auto auto 4px;
}




.admin-content.afy-admin .input-group {
    flex-direction: column;
    padding: 8px 16px 16px 16px;
}







.admin-content.afy-admin .review .messaging .recent-msgs {overflow-y: hidden;}
.admin-content.afy-admin .review .messaging .recent-msgs .header {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .22);
    z-index: 1;
}
.admin-content.afy-admin .message-history {
    position: relative;
    height: 100%;
    max-height: 384px;
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border-bottom: 1px solid #ced0d1;
    border-radius: 0;
}
.message-history .message-item {
    display: flex;
    position: relative;
    flex-direction: column;
    width: 100%;
    padding: 16px;
    margin: auto 0 auto auto;
}
.message-history .message-content {
    position: relative;
    width: 60%;
    max-width: 480px;
    padding: 16px 24px;
    margin: 0 0 12px auto;
    background-color: #f8fff9;
    border: 1px solid #c3dcca;
    border-radius: 8px;
    box-shadow: 0 4px 8px -4px rgba(0, 0, 0, .2);
    cursor: default;
}
.message-history .message-content::before,
.message-history .message-content::after {
    content: "";
    display: block;
    position: absolute;
}
.message-history .message-content::before {
    bottom: -12px;
    border-style: solid;
}
.message-history .message-content::after {
    bottom: -10px;
    border-style: solid;
}
.message-history .from-afy .message-content::before {
    right: 30px;
    border-width: 0 16px 12px 0;
    border-color: transparent #c3dcca transparent transparent;
}
.message-history .from-afy .message-content::after {
    right: 31px;
    border-width: 0 13px 10px 0;
    border-color: transparent #f8fff9 transparent transparent;
}
.message-history .user-info {
    display: flex;
    flex-direction: row-reverse;
}
.message-history .user-picture {
    display: flex;
    position: relative;
    width: 40px;
    height: 40px;
    margin: auto 0 auto 4px;
    background-color: rgba(0, 0, 0, .05);
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 50%;
    overflow: hidden;
}
.message-history .user-picture::before {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: .6;
}
.message-history .user-picture img {
    position: relative;
    width: 100%;
    margin: 0;
    z-index: 1;
}
.message-history .user-name {
    font-size: 12px;
    font-weight: 700;
    margin: auto 0;
    cursor: default;
}
.message-history .btn-delete-message {
    display: none;
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 2px;
    background-color: #fff;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, .3);
    border: none;
    border-radius: 50%;
}
.message-history .btn-delete-message .btn {
    font-size: 12px;
    padding: 8px 8.75px;
    border-radius: 50%;
}
.message-history .message-item:hover .btn-delete-message,
.message-history .message-item .btn-delete-message:focus,
.message-history .message-item .btn-delete-message:active {display: block;}
/* Incoming Message */
.message-history .from-customer .message-content {
    margin: 0 auto 12px 0;
    background-color: #fff;
    border: 1px solid #dadbdc;
}
.message-history .from-customer .message-content::before {
    left: 30px;
    border-width: 0 0 12px 16px;
    border-color: transparent transparent transparent #dadbdc;
}
.message-history .from-customer .message-content::after {
    left: 31px;
    border-width: 0 0 10px 13px;
    border-color: transparent transparent transparent #fff;
}
.message-history .from-customer .user-info {
    margin: auto auto auto 0;
    flex-direction: row;
}
.message-history .from-customer .user-picture {margin: auto 4px auto 0;}
.message-history .from-customer .btn-delete-message {
    left: 4px;
    right: auto;
}

/* FORUM */
.message-history .forum-message {
    display: flex;
    flex-direction: column;
    padding: 16px;
}
.forum-message .message-info {
    display: flex;
    position: relative;
    flex-direction: column;
    width: 60%;
    max-width: 480px;
    padding: 12px;
    margin: auto auto auto 0;
    border-radius: 8px 8px 0 0;
    background-color: #fff;
    box-shadow: 0px 0px 3px rgba(0,0,0,.33);
    z-index: 1;
}
.forum-message .message-info::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 4px;
    background-color: #fff;
    border-top: 1px solid rgba(0, 0, 0, .07);
}
.forum-message.from-afy .message-info {
    background-color: #f8fff9;
    border-radius: 8px 8px 0 0;
    margin: 0 0 0 auto;
}
.forum-message.from-afy .message-info::after {
    background-color: #f8fff9;
    border-color: rgba(40, 167, 69, .2);
}
.message-history .forum-message .user-info {margin: 0 0 8px 0;}
.forum-message .user-name {
    line-height: 1;
    margin: auto 0 0 0;
}
.forum-message .user-picture {
    width: 30px;
    height: 30px;
}
.forum-message .message-date {
    display: flex;
    font-size: 12px;
    margin: 0 8px 0 0;
    opacity: .75;
}
.forum-message.from-afy .message-date {
    flex-direction: row-reverse;
    margin: 0 0 0 8px;
    color: #28a745;
}
.forum-message .date-icon {
    display: flex;
    width: 30px;
    font-size: 15px;
    line-height: normal;
    margin: auto 0;
}
.forum-message .date-icon::before {margin: auto;}
.forum-message .send-date {
    margin: auto 0;
    line-height: normal;
}
.message-history .forum-message .message-content {
    width: 100%;
    padding: 1rem;
    margin: 0 0 8px 0;
    box-shadow: 0px 1px 4px rgba(0,0,0,.33);
    border: 0 none;
    border-radius: 0 0 8px 8px;
}
.message-history .forum-message .message-content img {
    display: block;
    width: 100%;
    margin: 0;
}
.forum-message .message-body {
    padding: 16px;
    margin: -.25rem -1rem .75rem -1rem;
}
.forum-message .message-body pre {
    font-family: "Open Sans";
    white-space: normal;
    margin: 0 0 .5rem 0;
}
.forum-message .message-body pre:last-child {margin: 0;}
.forum-message .message-content::before, .forum-message .message-content::after {content: none;}
.forum-message.from-afy .message-content {
    text-align: right;
    margin: 0 0 8px auto;
}
.forum-message .message-footer {
    display: flex;
    position: relative;
    width: auto;
    padding: 8px;
    margin: 0 -1rem -1rem -1rem;
    border-top: 1px solid rgba(0, 0, 0, .07);
    border-radius: 0 0 8px 8px;
}
.forum-message .message-footer .btn {margin: 4px;}
.forum-message .message-footer .btn-icon {margin-right: 3px;}
.forum-message.from-afy .message-footer {
    flex-direction: row-reverse;
    border-color: rgba(40, 167, 69, .2);
}
.forum-message.status-0 .message-info, .forum-message.status-0 .message-content {border: 1px solid #dc3545;}






.admin-content.afy-admin-deploy .recent-msgs {position: relative;}
.admin-content.afy-admin-deploy .action-response {
    display: none;
    position: absolute;
    bottom: -140px;
    width: 100%;
    text-align: center;
    background-color: #fff;
    border-radius: .5rem;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 0 0 4px rgba(0, 0, 0, .05);
}
.admin-content.afy-admin-deploy .action-response .response-text {padding: 16px;}
.admin-content.afy-admin-deploy .web .action-response .response-text {color: #4b84c1;}
.admin-content.afy-admin-deploy .pwa .action-response .response-text {color: #6f42c1;}
.admin-content.afy-admin-deploy .android .action-response .response-text {color: #0b9bb3;}
.admin-content.afy-admin-deploy .ios .action-response .response-text {color: #49a7ec;}
.admin-content.afy-admin-deploy .action-response .response-text strong {font-weight: 700;}
.admin-content.afy-admin-deploy .action-response .btn,
.admin-content.afy-admin-deploy .file-upload-container .btn {
    display: flex;
    margin: auto 8px;
}
.admin-content.afy-admin-deploy .action-response .btn:first-child,.admin-content.afy-admin-deploy .file-upload-container .btn:first-child {margin-left: 0;}
.admin-content.afy-admin-deploy .action-response .btn:last-child,.admin-content.afy-admin-deploy .file-upload-container .btn:last-child {margin-right: 0;}
.admin-content.afy-admin-deploy .action-response .btn-icon {
    font-size: 1rem;
    margin: auto 4px auto auto;
}
.admin-content.afy-admin-deploy .file-upload-container .btn-icon {margin: auto 4px auto auto;}
.admin-content.afy-admin-deploy .action-response .btn-title {font-size: .8rem;}
.admin-content.afy-admin-deploy.publish .publish-step .file-list {
    display: flex;
    padding: 16px;
}
.admin-content.afy-admin-deploy.publish .uploaded-file-path .header-txt {
    font-size: 12px;
    margin: auto 4px auto 0;
}
.admin-content.afy-admin-deploy.publish .uploaded-file-path .status-icon {
    min-width: 16px;
    width: 16px;
    font-size: 8px;
}
.admin-content.afy-admin-deploy.publish .publish-step .uploaded-file-path {
    display: flex;
    margin: auto;
}


/*------------------------------------------------
PROFILE
------------------------------------------------*/

/* GENELE TAŞIYALIM SONRA */
.switch {box-shadow: none;}
.switch.checked {box-shadow: 0 0 2px rgba(0, 0, 0, .3) inset;}
.switch-group-with-label {display: flex;}
.switch-group-with-label .switch-label {
    font-weight: 700;
    cursor: pointer;
}
.switch-group-with-label .switch-small + .switch-label {font-size: .85rem;}
.switch-label .active-value {color: #28a745;}
.switch-label .passive-value {color: #aeb5bb;}
.switch + .switch-label .active-value, .switch.checked + .switch-label .passive-value {display: none;}
.switch + .switch-label .passive-value, .switch.checked + .switch-label .active-value {display: block;}
/* GENELE TAŞIYALIM SONRA */

.cms-admin .cms-editor-container.profile .cms-editing-management-tools {min-height: 100%;}
.cms-admin .cms-editor-container.profile .cms-editor {
    display: flex;
    min-height: 100%;
    background-color: #f8f9fa;
}
.cms-admin .cms-editor-container.profile .content-prop {
    flex-direction: row;
    width: 100%;
    padding: 0;
    margin: 0 0 auto 0;
    background-color: #fff;
}
.cms-editor-container.profile .profile-settings {
    width: 100%;
    border-right: 1px solid rgba(0, 0, 0, .1);
}
.cms-editor-container.profile .content-prop .content-prop-header {
    display: flex;
    padding: .5rem 1rem;
    margin: 0;
}
.cms-editor-container.profile .content-prop-header .header-icon {
    padding-right: .25rem;
    margin: auto 0;
}
.cms-editor-container.profile .content-prop-header .header-txt {margin: auto 0;}
.cms-editor-container.profile .content-prop .content-prop-body {
    display: flex;
    flex-wrap: wrap;
    padding: .5rem;
}
.profile-option-item {
    display: flex;
    flex-direction: column;
    min-width: calc(33.3333% - 1rem);
    max-width: calc(33.3333% - 1rem);
    padding: 0;
    margin: .5rem;
    box-shadow: 0 0 8px rgba(0, 0, 0, .1);
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 8px;
}
.profile-option-item.active {border-color: rgba(40, 167, 69, .2);}
.profile-option-header {
    display: flex;
    font-weight: 700;
    padding: .5rem;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.active .profile-option-header {
    background: linear-gradient(to bottom, transparent, rgba(40, 167, 69, .03));
    border-color: rgba(40, 167, 69, .2);
}
.profile-option-icon {margin: auto .25rem auto 0;}
.active .profile-option-icon {color: #28a745;}
.profile-option-name {margin: auto auto auto 0;}
.profile-option-body {
    display: flex;
    flex-direction: column;
    font-size: .8125rem;
    padding: .5rem;
    margin: 0 0 auto 0;
}
.profile-option-body p {margin: 0 0 .5rem 0;}
.profile-option-body p:last-child {margin: 0;}
.profile-option-footer {
    display: flex;
    padding: .5rem;
}
.profile-option-body + .profile-option-footer {border-top: 1px solid rgba(0, 0, 0, .1);}
.profile-option-footer .required-plugin {
    width: 100%;
    font-size: .8125rem;
    font-weight: 700;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    cursor: auto;
}
.profile-option-footer .required-plugin .plugin-name {
    display: flex;
    margin: auto auto auto 0;
}
.required-plugin .plugin-name .value {font-weight: 700;}
.required-plugin .plugin-name .info-label {margin: auto auto auto .25rem;}
.profile-option-footer .required-plugin .requirement {
    font-weight: 700;
    margin: auto auto auto .25rem;
}
.profile-option-footer .plugin-price {
    display: flex;
    padding: 0;
    margin: auto 0 auto auto;
}
.profile-option-footer .plugin-price > * {margin: auto 0.25rem;}
.profile-option-footer .plugin-price > :last-child {margin-right: 0;}
.cms-editor-container.profile .profile-preview {
    display: flex;
    flex-direction: column;
}
.cms-editor-container.profile .profile-preview .content-prop-header {justify-content: center;}
.dashboard-device-preview {
    position: relative;
    min-width: 229.5px;
    height: 448px;
    padding: 1rem;
}
.device-resizer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: scale(.5) translate(-50%, -50%);
    transform-origin: left top;
}
.cms-editor-container.profile .device {
    background: none;
    box-shadow: none;
    border: none;
}
.cms-editor-container.profile .screen-group {
    overflow-x: hidden;
    overflow-y: auto;
}
.cms-editor-container.profile .profile-settings .content-prop-footer {
    display: flex;
    padding: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.cms-editor-container .profile-preview .afy-app-content-container {
    left: 10px;
    top: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    border-radius: 40px;
}

/*------------------------------------------
07. SETTINGS
------------------------------------------*/
#rightBar {
    width: 0;
    height: 0;
    margin: 0;
    color: #6c757d;
    background-color: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 0 0 4px rgba(0, 0, 0, .05);
    border-radius: .5rem;
    overflow: hidden;
    transition: all ease-in-out 300ms;
}
body.builder-dark-ui #rightBar {background-color: #343a40;}
#rightBar.active {
    width: 300px;
    height: auto;
    margin: 0 0 auto 1rem;
    overflow: visible;
}
#createAdminType {
    min-width: 300px;
    width: 300px;
    padding: 1rem;
    margin: 0;
}
#createAdminType .btn {
    display: flex;
    padding: 10px;
}
#createAdminType .btn-icon {
    font-size: 14px;
    line-height: 1;
    margin: auto .25rem auto auto;
}
#createAdminType .btn-icon.fa-trash-alt {margin: -1px .25rem auto auto}
#createAdminType .btn-title {
    font-size: 12px;
    margin: auto auto auto 0;
}
.bg-dark .mat-outline-input-container input:focus + .placeholder-txt,
.bg-dark .mat-outline-input-container.dropdown.clicked .placeholder-txt {
    top: -4px;
    left: 8px;
    color: #fff;
    background: #28a745;
    border-radius: 3px;
    padding: 3px 10px;
}
.bg-dark .mat-outline-input-container.filled .placeholder-txt {
    top: -4px;
    left: 8px;
    color: rgba(255, 255, 255, 0.5);
    background: #343a40;
    border-radius: 3px;
    padding: 3px 10px;
}
.selected-admin-info {padding: 0 .125rem;}
.selected-admin-info .value {margin: auto auto .5rem 0;}
#rightBar .action-group {
    display: flex;
    flex-wrap: nowrap;
    padding: .25rem 0 0 0;
}
#rightBar .action-group .btn {
    width: 100%;
    margin: auto .25rem;
}
#rightBar .action-group .btn:first-child {margin-left: 0;}
#rightBar .action-group .btn:last-child {margin-right: 0;}
.admin-content.settings {
    max-height: 100vh;
    overflow: hidden;
}
.admin-content.settings > .content.row {
    height: 100%;
    padding: 62px 16px 16px 16px;
    overflow-x: hidden;
    overflow-y: auto;
}
.admin-content.settings .content.row .current-user-profile {
    min-width: 320px;
    max-width: 320px;
}
.admin-content.settings .current-user-profile .recent-msgs {
    display: flex;
    flex-direction: column;
    padding: 1rem;
}
.admin-content.settings .current-user-profile .user-picture {
    height: auto;
    margin: auto auto 2rem auto;
}
.admin-content.settings .current-user-profile .user-picture .afy-input-btn-group-container {
    display: flex;
    position: relative;
    top: auto;
    left: auto;
    margin: 1rem auto 0 auto;
    transform: none;
    box-shadow: none;
    background: none;
    opacity: 1;
}
.admin-content.settings .current-user-profile .user-picture .upload-image {
    width: 150px;
    height: 150px;
    padding: 0;
    background: none;
    border-radius: 50%;
    margin: 0 auto;
    overflow: hidden;
}
.admin-content.settings .current-user-profile .user-picture .upload-image::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 4px solid #ecedef;
    border-radius: 50%;
}
.admin-content.settings .current-user-profile .user-picture .upload-image .dummy-image {opacity: 1;}
.information-prop-group {padding: 0 0 0 1rem;}
.information-prop-group > .recent-msgs {
    height: auto;
    margin: 0 0 1rem 0;
}
.information-prop-group > .recent-msgs:last-child {margin: 0;}
.action-group .btn {white-space: nowrap;}
.input-cases-container {
    padding: 0;
    margin: 0;
}
.input-cases-container .col-6 {
    padding: .5rem 1rem;
    border-right: 1px solid rgba(0, 0, 0, .07);
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.input-cases-container .col-6:nth-child(2n) {border-right: none;}
.input-cases-container .col-6:nth-last-child(2) {border-bottom: none;}
.input-cases-container .col-6:last-child {border: none;}
.input-cases-container .field-title {
    font-size: 14px;
    margin: auto auto 8px 0;
    color: #6c757d;
}

/*------------------------------------------
08. SUBSCRIPTION
------------------------------------------*/
.subscription .nav-tabs {background-color: #f8f9fa;}
.subscription .nav-tabs .nav-link {
	font-weight: 700;
    padding: 8px 24px;
    color: #6c757d;
    border-width: 0 1px;
    border-radius: 0;
	opacity: .66;
	transition: all ease-in-out 300ms;
}
.subscription .nav-tabs .nav-link:hover {opacity: 1;}
.subscription .nav-tabs .nav-link.active,
.subscription .nav-tabs .nav-item.show .nav-link {
	color: #28a745;
	opacity: 1;
}
.subscription .header > .title h1 {
	font-size: 36px;
    line-height: 1;
    margin: 0;
}
.content.standart-pages .container-fluid .container .row.price-samples {
    width: auto;
    padding: 0;
    margin: 16px -8px;
}
.row.price-samples .col-md-4 {
    padding: 8px;
    margin: 0;
}
.price-sample {
    height: 100%;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, .2);
}
.price-sample.starter.current-plan {box-shadow: 0 0 0 1px rgba(40, 167, 69, .66), 0 0 0 4px rgba(40, 167, 69, .33);}
.price-sample.starter.current-plan .divider {border-color: rgba(40, 167, 69, .33);}
.price-sample.standart.current-plan {box-shadow: 0 0 0 1px rgba(111, 66, 193, .66), 0 0 0 4px rgba(111, 66, 193, .33);}
.price-sample.standart.current-plan .divider {border-color: rgba(111, 66, 193, .33);}
.price-sample.advanced.current-plan {box-shadow: 0 0 0 1px rgba(73, 167, 236, .66), 0 0 0 4px rgba(73, 167, 236, .33);}
.price-sample.advanced.current-plan .divider {border-color: rgba(73, 167, 236, .33);}
.price-sample .price-title {
    font-size: 16px;
    font-weight: 700;
    padding: 16px 16px 2px 26px;
}
.price-sample .base-price {
	display: flex;
    line-height: 1;
	padding: 0 16px 16px 16px;
}
.price-sample .base-price.yearly-price, .billing-yearly .price-sample .base-price.monthly-price {display: none;}
.billing-yearly .price-sample .base-price.yearly-price {display: flex;}
.price-sample .price-currency {
    font-size: 16px;
    margin: auto 0 4px 0;
}
.price-sample .price-value {
    font-size: 36px;
    font-weight: 300;
}
.price-sample .period-term {
	position: relative;
    line-height: 1.2;
    margin: auto auto 4px 0;
    color: #6c757d;
}
.price-sample .period-term::before {
    content: "/";
    position: absolute;
    left: 0;
    top: -11px;
    font-size: 41px;
    font-weight: 300;
    opacity: .5;
}
.price-sample .period {
    font-size: 14px;
    margin: 0 0 0 16px;
}
.price-sample .term {
	font-size: 10px;
    margin: 0 0 0 11px;
    opacity: .6;
}
.price-sample ul {
	padding: 12px 0;
    margin: 0;
    list-style: none;
    list-style-type: none;
}
.price-sample ul li {
	font-size: 12px;
	padding: 4px 16px;
}
.price-sample ul li::before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	-moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
	line-height: 1;
	min-width: 16px;
    margin: auto 8px auto 0;
    opacity: .6;
}
.price-sample.starter ul li::before,.price-sample.starter ul li.not-include {color: #28a745;}
.price-sample.standart ul li::before,.price-sample.standart ul li.not-include {color: #6f42c1;}
.price-sample.advanced ul li::before,.price-sample.advanced ul li.not-include {color: #49a7ec;}
.price-sample ul li.include::before {content: "\f00c";}
.price-sample ul li.not-include::before {
	content: "\f111";
	font-weight: 400;
}
.price-sample .divider {margin: 0;}
.price-sample .action-btn-group {padding: 16px;}
.price-sample .select-price-btn {
    width: 100%;
    font-size: .875rem;
}
.compare-plan-btn {
    display: flex;
    font-size: 12px;
    padding: 8px 16px;
	margin: auto auto auto 0;
	border-width: 1px;
	border-style: solid;
	border-radius: 50em;
	transition: all ease-in-out 300ms;
    cursor: pointer;
}
.compare-plan-btn .btn-icon {
    font-size: 14px;
    margin: auto 4px auto 0;
}
.compare-plan-btn .btn-title {
    line-height: 1;
    margin: auto 0;
}
.price-plan-changer {
	position: relative;
	font-size: 11px;
    padding: 0 2px;
    margin: auto 0 auto auto;
    border: 2px solid #ddd;
    border-radius: 50em;
}
.price-plan-changer::before {
    content: "";
    position: absolute;
    top: 5%;
    left: 4px;
    width: 64px;
    height: 90%;
    margin: 0 -2px;
    background-color: #28a745;
    border-radius: 50em;
    transition: transform ease-in 75ms;
    z-index: 0;
}
.price-plan-changer.yearly-selected::before {transform: translateX(59px);}
.price-plan-label {
    position: relative;
    width: 64px;
    text-align: center;
    font-weight: 500;
    line-height: 1;
    padding: 6px;
    margin: auto -2px;
    cursor: pointer;
    border-radius: 0 50em 50em 0;
    opacity: .5;
    transition: all ease-in 50ms;
    z-index: 1;
}
.price-plan-label:first-child {border-radius: 50em 0 0 50em;}
.price-plan-label:hover {opacity: .66;}
.price-plan-changer.yearly-selected .active,
.price-plan-changer.monthly-selected .active {
    font-weight: 700;
    color: #fff;
    cursor: default;
    opacity: 1;
}
.label-title {
    display: inline-block;
    line-height: 1.6;
    vertical-align: middle;
}
.price-plan-input {display: none;}

.btn-outline-starter,
.compare-plan-btn {
	color: #28a745;
	border-color: #28a745;
}
.btn-outline-starter:hover,
.compare-plan-btn:hover {
	color: #fff;
	background-color: #28a745;
	border-color: #28a745;
}
.btn-outline-starter:focus,
.btn-outline-starter.focus,
.compare-plan-btn:focus,
.compare-plan-btn.focus {
	box-shadow: 0 0 0 .2rem rgba(40, 167, 69, .5);
}
.btn-outline-starter.disabled,
.btn-outline-starter:disabled,
.compare-plan-btn.disabled,
.compare-plan-btn:disabled {
	color: #28a745;
	background-color: transparent;
}
.btn-outline-starter:not(:disabled):not(.disabled):active,
.btn-outline-starter:not(:disabled):not(.disabled).active,
.compare-plan-btn:not(:disabled):not(.disabled):active,
.compare-plan-btn:not(:disabled):not(.disabled).active {
	color: #fff;
	background-color: #28a745;
	border-color: #28a745;
}

.btn-outline-standart {
	color: #6f42c1;
	border-color: #6f42c1;
}
.btn-outline-standart:hover {
	color: #fff;
	background-color: #6f42c1;
	border-color: #6f42c1;
}
.btn-outline-standart:focus,
.btn-outline-standart.focus {
	box-shadow: 0 0 0 .2rem rgba(111, 66, 193, .3);
}
.btn-outline-standart.disabled,
.btn-outline-standart:disabled {
	color: #6f42c1;
	background-color: transparent;
}
.btn-outline-standart:not(:disabled):not(.disabled):active,
.btn-outline-standart:not(:disabled):not(.disabled).active {
	color: #fff;
	background-color: #6f42c1;
	border-color: #6f42c1;
}

.btn-outline-advanced {
	color: #49a7ec;
	border-color: #49a7ec;
}
.btn-outline-advanced:hover {
	color: #fff;
	background-color: #49a7ec;
	border-color: #49a7ec;
}
.btn-outline-advanced:focus,
.btn-outline-advanced.focus {
	box-shadow: 0 0 0 .2rem rgba(73, 167, 236, .3);
}
.btn-outline-advanced.disabled,
.btn-outline-advanced:disabled {
	color: #49a7ec;
	background-color: transparent;
}
.btn-outline-advanced:not(:disabled):not(.disabled):active,
.btn-outline-advanced:not(:disabled):not(.disabled).active {
	color: #fff;
	background-color: #49a7ec;
	border-color: #49a7ec;
}

.content.standart-pages .container-fluid .container .row.compare-price-plans {
	width: auto;
    padding: 16px 0 0 0;
    margin: 0 -8px;
}
.subscription .table {margin: 0;}
.subscription .table th,
.subscription .table td {
    font-size: 10px;
    text-align: left;
}
.subscription .table td.price-sample {
	padding: 0;
    box-shadow: none;
    color: #6c757d;
}
.subscription .icon {
    min-width: 30px;
    width: 30px;
    max-width: 30px;
    font-size: 24px;
    text-align: center;
    margin: auto 16px auto 0;
}
.subscription .icon.fa-info {
    font-size: 12px;
    line-height: 1;
    padding: 8px 0;
    border: 1px solid  #4b84c1;
    border-radius: 50%;
}
.subscription .recent-msgs .definition-text {padding: 24px 32px;}
.subscription .recent-msgs .definition-text h3 {
    font-size: 18px;
    font-weight: 700;
    text-align: left;
    margin: 0 0 2px 0;
}
.subscription .recent-msgs .definition-text p {font-size: 14px;}
.subscription .price-samples-header {
    padding: 0 32px;
}
.subscription .price-samples-header .price-plan-changer {margin-top: -66px;}
.subscription .price-samples {
    padding: 16px;
    margin: 0;
}
.subscription .price-samples .col-md-4 {padding: 16px;}
.subscription-data-value {font-weight: 700;}

.app-subscription-status .app-name {
    font-size: inherit;
}
.app-subscription-status .plan-link {
    width: 100%;
    font-size: 12px;
}
.paypal-subscribe {
    width: auto;
    height: auto;
}
.btn-outline-orange {
	color: #fd7e14;
	border-color: #fd7e14;
}
.btn-outline-orange:hover {
	color: #fff;
	background-color: #fd7e14;
	border-color: #fd7e14;
}
.btn-outline-orange:focus,
.btn-outline-orange.focus {
	box-shadow: 0 0 0 .2rem rgba(253, 126, 20, .3);
}
.btn-outline-orange.disabled,
.btn-outline-orange:disabled {
	color: #fd7e14;
	background-color: transparent;
}
.btn-outline-orange:not(:disabled):not(.disabled):active,
.btn-outline-orange:not(:disabled):not(.disabled).active {
	color: #fff;
	background-color: #fd7e14;
	border-color: #fd7e14;
}
.badge-orange {
    color: #fff;
    background-color: #fd7e14;
}
.badge-purple {
    color: #fff;
    background-color: #6f42c1;
}
.badge-ios {
    color: #fff;
    background-color: #49a7ec;
}
.payment-options {background-color: #f8f9fa;}
.mat-inline-input-header,
.mat-inline-input-helper {
    font-size: 12px;
    opacity: .5;
}
.payment-method {
    padding: .25rem .75rem;
    margin: auto;
    color: #fff;
    background: #6c757d;
    border-radius: 4px;
    cursor: pointer;
    pointer-events: none;
}
.payment-method.collapsed {
    color: #6c757d;
    background-color: transparent;
    pointer-events: all;
}








/*------------------------------------------
09. PUBLISHING
------------------------------------------*/
.web .icon, .web .value, .web .header-txt {color: #4b84c1;}
.pwa .icon, .pwa .value, .pwa .header-txt {color: #6f42c1;}
.android .icon, .android .value, .android .header-txt {color: #0b9bb3;}
.ios .icon, .ios .value, .ios .header-txt {color: #49a7ec;}
.admin-content.publish .success-checkmark .check-icon::before, .admin-content.publish .success-checkmark .check-icon::after, .admin-content.publish .icon-fix {background-color: #f8f9fa;}
.admin-content.publish .recent-msgs .success-checkmark .check-icon::before, .admin-content.publish .recent-msgs .success-checkmark .check-icon::after, .admin-content.publish .recent-msgs .icon-fix {background-color: #fff;}
.ios .response-summary .header-txt,
.android .response-summary .header-txt {
    font-weight: 700;
    color: #6c757d;
    margin: auto auto auto 0;
}
.publish .response-summary .collapser {opacity: .75;}
.publish .response-summary .collapser:hover {opacity: 1;}
.publish .response-summary .definition-text {max-height: none;}
.publish .response-summary .status-icon {
    width: 20px;
    font-size: 10px;
    text-align: center;
    padding: .25rem;
    margin: auto .25rem auto 0;
    color: #dc3545;
    border: 1px solid #dc3545;
    border-radius: 50%;
}
.publish .response-summary .status-icon.success,
.publish .response-summary .uploaded-file-path .status-icon {
    color: #28a745;
    border-color: #28a745;
}
.response-summary .list-group {
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 0 0 4px rgba(0, 0, 0, .05);
    overflow: hidden;
}
.response-summary .list-group-item {
    margin: 0;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.07);
}
.response-summary .list-group-item:last-child {border: none;}
.info-message {
    font-size: 12px;
    font-weight: 600;
    margin: auto auto auto 0;
}
.publish .uploaded-file-path {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: none;
}
.publish .uploaded-file-path .btn-flat {
    width: auto;
    line-height: normal;
    padding: 8px 8.75px;
    margin: auto 0 auto auto;
    border-radius: 15px;
}
.uploaded-file-path .status-icon {
    min-width: 0;
    width: 0;
    font-size: 10px;
    text-align: center;
    padding: 0;
    margin: auto 0;
    border: 1px solid transparent;
    border-radius: 50%;
    overflow: hidden;
    transition: width ease-in-out 300ms,border ease-in-out 50ms;
}
.uploaded-file-path.uploaded .status-icon {
    min-width: 18px;
    width: 18px;
    padding: 3px 0;
    margin: auto 4px auto 0;
    border-width: 1px;
    border-style: solid;
}
.publish .keystore-files .file-path {margin: auto auto auto 0;}
.admin-content.publish .recent-msgs .publish-success-animation ~ .congratulations-text {padding: .5rem 1rem 1rem 1rem;}
.admin-content.publish .recent-msgs .publish-success-animation ~ .congratulations-text p {margin: 0 0 .5rem 0;}
.admin-content.publish .recent-msgs .publish-success-animation ~ .congratulations-text p:last-child {margin: 0;}
/*------------------------------------------
09. PUBLISHING > PLATFORM CHOOSE
------------------------------------------*/
.platform-choose {
    display: flex;
    flex-wrap: wrap;
    padding: 64px 16px 16px 16px;
}
.platform-choose .recent-msgs {
    display: flex;
    flex-direction: column;
    width: calc(25% - 12px);
    margin: 0 16px 0 0;
    height: auto;
}
.platform-choose .recent-msgs:last-child {margin: 0;}
.platform-choose .header {
    display: flex;
    flex-direction: column;
    padding: 8px;
}
.platform-choose .header .icon {
    font-size: 40px;
    margin: 12px auto 8px auto;
}
.platform-choose .header .icon.fa-globe-americas {
    font-size: 36px;
    margin: 16px auto 8px auto;
}
.platform-choose .header .icon.pwa {height: 40px;}
.platform-choose .header .header-txt {
    font-size: 18px;
    text-align: center;
    font-weight: 700;
    margin: 0 auto;
}
.platform-choose .recent-msgs .caption {
    font-size: 14px;
    text-align: center;
    margin: 0 auto;
}
.platform-choose .recent-msgs .definition-text {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    margin: auto;
    color: #6c757d;
    border-width: 1px 0;
    border-style: solid;
    border-color: #eee;
}
.platform-choose .recent-msgs .definition-text p {
    width: 100%;
    font-size: 12px;
    text-align: center;
}
.platform-choose .recent-msgs .definition-text p:first-child {margin: auto 0 8px 0;}
.platform-choose .recent-msgs .definition-text p:last-child {margin: 0 0 auto 0;}
.platform-choose .recent-msgs .action-container {
    display: flex;
    position: relative;
    height: auto;
    padding: 12px;
    margin: 0;
}
.platform-choose .recent-msgs .action-container .btn {
    width: 100%;
    font-size: 14px;
    line-height: 1.3;
    padding: 12px;
    margin: 0;
}

/*------------------------------------------
09. PUBLISHING > METHOD CHOOSE
------------------------------------------*/
.method-choose {
    display: flex;
    flex-wrap: wrap;
    padding: 64px 16px 16px 16px;
}
.method-choose .recent-msgs {
    display: flex;
    flex-direction: column;
    width: calc(50% - 8px);
    margin: 0 16px 0 0;
    height: auto;
}
.method-choose .recent-msgs:last-child {margin: 0;}
.method-choose .recent-msgs .header {padding: 16px;}
.method-choose .recent-msgs .definition-text {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    color: #6c757d;
    background-color: #f8f9fa;
    border-width: 1px 0;
    border-style: solid;
    border-color: #e5e5e5;
}
.method-choose .recent-msgs .definition-text p {margin-top: auto;}
.method-choose .recent-msgs .definition-text p:last-child {margin-bottom: auto;}
.method-choose .recent-msgs form {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    margin: 0;
}
.method-choose .recent-msgs form ul {width: 100%;}
.method-choose .recent-msgs form .afy-radio-width-label {
    height: auto;
    padding: 0;
    border-bottom: 1px solid #e5e5e5;
}
.method-choose .recent-msgs form .afy-radio-width-label .afy-custom-radio {margin: auto -28px auto 13px;}
.method-choose .recent-msgs form .afy-radio-width-label label {
    width: 100%;
    padding: 16px 16px 16px 32px;
}
.method-choose .recent-msgs form .afy-radio-width-label:last-child {border: none;}
.method-choose .action-container {
    display: flex;
    width: 100%;
    padding: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0 0 7px 7px;
}
.method-choose .action-container .next-step,
.next-step.with-price.btn {
    display: flex;
    margin: auto auto auto 0;
}
.method-choose .action-container .next-step.with-price, .next-step.with-price.btn {padding: 0;}
.next-step.with-price.btn {border-radius: 4px;}
.method-choose .action-container .next-step.with-price .btn-title,
.next-step.with-price.btn .btn-title {
    line-height: 1.5;
    padding: 8px 12px;
}
.method-choose .action-container .price,
.next-step.with-price.btn .price {
    display: flex;
    font-size: 18px;
    line-height: 1;
    padding: 7px;
    background-color: #fff;
    border-radius: 3px 0 0 3px;
}
.method-choose .action-container .price .icon, .next-step.with-price.btn .price .icon {margin: auto 0;}
.method-choose .action-container .price .value, .next-step.with-price.btn .price .value {margin: auto 0 auto 2px;}

/*------------------------------------------
09. PUBLISHING > STEPS
------------------------------------------*/
.publish-content {
    display: flex;
    flex-wrap: wrap;
    min-height: calc(100vh - 120px);
    max-height: calc(100vh - 120px);
    padding: 48px 0 0 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;

    /* background-color: #fff; */
}
.publish-step [class*="step-"] {
    max-width: 640px;
    padding: 1rem;
    margin: auto;

    background-color: #fff;
    border-radius: .5rem;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 0 0 4px rgba(0, 0, 0, .05);
}
.publish-step .header {margin: 0 0 12px 4px;}
.publish-step .recent-msgs .header {padding: 0;}
.publish-step .header .header-txt {
    font-size: 18px;
    font-weight: 700;
}
.publish-step .header.small .header-txt {font-size: 14px;}
.publish .definition-text {
    width: 100%;
    max-height: calc(100vh - 332px);
    margin: 0;
    color: #6c757d;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    overflow-x: hidden;
    overflow-y: auto;
}
.publish-step .definition-text ol {
    line-height: 1.8;
    padding: 0 0 0 26px;
}
.publish-step .definition-text ol li {text-indent: -26px;}
.publish-step .definition-text ol li:before {width: 26px;}
.publish .definition-text.just-guide {
    width: auto;
    margin: 0 -16px;
    border-width: 1px 0;
    border-color: #e8edf1;
    border-radius: 0;
}
.android .definition-text {
    background-color: rgba(11, 155, 179, 0.03);
    border-color: #0b9bb3;
}
.ios .definition-text {
    background-color: rgba(73, 167, 236, 0.03);
    border-color: #49a7ec;
}
.publish-step .input-container {margin: 12px 0 -12px 0;}
.publish-step .header + .input-container {margin: -4px 0 -12px 0;}
.publish-step [class*="step-"] .action-container {
    display: flex;
    margin: 16px 0 0 0;
}
.publish-step form > .action-container {
    display: flex;
    padding: 16px;
    background-color: #fff;
    border-top: 1px solid rgba(0, 0, 0, .11);
}
.app-icon-upload > .col {padding: 0 16px;}
.app-icon-upload > .col:first-child {border-right: 1px solid rgba(0, 0, 0, 0.07);}
.app-icon-upload > .col > .app-icon-data {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.app-icon-upload > .col > .app-icon-data .definition-text {margin: 0 0 auto 0;}
.publish-content .app-icon,
.response-summary .app-icon {
    min-width: 128px;
    width: 128px;
    max-width: 128px;
    min-height: 128px;
    height: 128px;
    max-height: 128px;
    margin: 16px auto;
    border: 1px solid #eee;
    border-radius: 1rem;
}
.app-icon-data .afy-input-btn-group.btn {
    padding: 8px 16px;
    margin: 0 auto;
}
.publish-step .step-3 > .row {
    margin: 0;
    flex-wrap: nowrap;
}
.publish-step .step-3 .column {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.publish-step .step-3 .input-group-col {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 1px);
    padding: 16px;
    margin: -.5px;
    border: 1px solid #eee;
}
.publish-step .step-3 .input-container,
.publish-step .step-3 .checkbox-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: calc(100% - 18px);
}
.publish-step .step-3 .input-group-col .input-container .mat-outline-input-container {
    width: 100%;
    margin: auto 0;
}
.publish-step .step-3 .checkbox-list .afy-checkbox-width-label {
    width: calc(100% + 32px);
    padding: 0 12px;
    margin: 0 -16px;
}
.publish-step .step-3 .checkbox-list .afy-checkbox-width-label label {width: 100%;}
.publish-step .step-3 > .row.screen-shots .input-group-col {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.publish-step .step-3 > .row.screen-shots .header {margin: auto;}
.publish-step .step-3 > .row.screen-shots .input-container {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin: 4px 0 -4px 0;
}
.publish-step .step-3 > .row.screen-shots .input-container .mat-outline-input-container {margin: auto 16px auto 0;}
.publish-step .step-3 > .row.screen-shots .input-container .mat-outline-input-container:last-child {margin-right: 0;}
.publish-step .step-3 > .row.action-container {padding: 16px;}
.publish-step .step-5 .input-container {margin: 12px 0 -8px 0;}

/*------------------------------------------
09. PUBLISHING > STEPPER
------------------------------------------*/
.publish .afy-stepper {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}
.android-publish .afy-stepper ul::before {border-color: #73c6d4;}
.android-publish .afy-stepper ul li:active,
.android-publish .afy-stepper ul li.active,
.android-publish .afy-stepper ul li.passed.active {
    background-color: #0b9bb3;
    border-color: #008ba3;
}
.android-publish .afy-stepper ul li:active {
    box-shadow: 0 0 0 3px rgba(11, 155, 179, .4);
    border-color: #008ba3;
}
.android-publish .afy-stepper ul li.passed {
    color: #fff;
    background-color: #8fd3e0;
    border-color: #73c6d4;
}
.android-publish .afy-stepper ul li.alert {
    color: #fff;
    background-color: #dc3545;
    border-color: #bd1828;
}
.ios-publish .afy-stepper ul::before {border-color: #c2e2fb;}
.ios-publish .afy-stepper ul li:active,
.ios-publish .afy-stepper ul li.active,
.ios-publish .afy-stepper ul li.passed.active {
    background-color: #49a7ec;
    border-color: #3997dc;
}
.ios-publish .afy-stepper ul li:active {
    box-shadow: 0 0 0 3px rgba(11, 155, 179, .4);
    border-color: #008ba3;
}
.ios-publish .afy-stepper ul li.passed {
    color: #fff;
    background-color: #9ecff5;
    border-color: #73b1e0;
}
.ios-publish .afy-stepper ul li.alert {
    color: #fff;
    background-color: #dc3545;
    border-color: #bd1828;
}

/*------------------------------------------
09. PUBLISHING > WEB/PWA
------------------------------------------*/
.web-publish .publish-content {padding: 64px 16px 16px 16px;}
.web-publish .publish-content .recent-msgs {
    max-width: 960px;
    margin: auto auto 16px auto;
}
.web-publish .publish-content .recent-msgs:last-child {margin: 0 auto auto auto;}
.web-publish .header-group {
    display: flex;
    padding: 16px;
}
.web-publish .icon {
    min-width: 30px;
    width: 30px;
    max-width: 30px;
    font-size: 24px;
    text-align: center;
    margin: 20px 8px auto 0;
}
.web-publish .header-group .icon {
    font-size: 12px;
    padding: 8px 0;
    margin: 0 8px auto 0;
    border: 1px solid#4b84c1;
    border-radius: 50%;
}
.web-publish .header-group h3 {
    font-size: 18px;
    font-weight: 700;
    text-align: left;
    margin: 5px 0 2px 0;
}
.web-publish .header-group .text-container :last-child {margin-bottom: 0;}
.web-publish .domain-name {
    display: flex;
    padding: 8px 16px;
    border-width: 1px 0;
    border-style: solid;
    border-color: #ddd;
}
.web-publish .domain-name .btn {
    padding: 11.5px 16px;
    margin: 11px 0 auto 8px;
    border-radius: 4px;
}
.web-publish .dns-pop3-options .col {padding: 0;}
.web-publish .dns-options {border-right: 1px solid #ddd;}
.web-publish .setup-info {
    width: 100%;
    font-size: 13px;
    padding: 0 32px 8px 36px;
    margin: -8px 0 0 0;
    list-style-position: inside;
}
.web-publish .setup-info li {
    font-weight: 600;
    padding: 12px 0;
    border-bottom: 1px dashed #ddd;
}
.web-publish .setup-info li:last-child {border: none;}
.web-publish .domain-options {width: 100%;}
.web-publish .domain-options .domain-name {border-bottom: none;}

/* hebofo-group: Head, Body, Foot Group */
.web-publish .hebofo-group {
    display: none;
    color: #6c757d;
    border-top: 1px solid #ddd;
}
.web-publish .hebofo-group .body {
    display: flex;
    flex-wrap: nowrap;
    border-width: 1px 0;
    border-style: solid;
    border-color: #ddd;
}
.web-publish .hebofo-group .body .includes {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-right: 1px solid #ddd;
}
.web-publish .hebofo-group .body .includes .title {
    width: 100%;
    font-size: 16px;
    font-weight: 700;
    padding: 12px 16px;
    border-bottom: 1px solid #ddd;
}
.web-publish .hebofo-group .body .includes ul {
    width: 100%;
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.web-publish .hebofo-group .body .includes ul li {
    padding: 12px 16px;
    border-bottom: 1px dashed #ddd;
}
.web-publish .hebofo-group .body .includes ul li:last-child {border: none;}
.web-publish .hebofo-group .body .includes ul li .icon {
    min-width: auto;
    width: auto;
    max-width: none;
    font-size: 1.125rem;
    text-align: center;
    margin: auto 0;
}
.web-publish .hebofo-group .body .price-group {
    display: flex;
    padding: 16px;
    white-space: nowrap;
}
.web-publish .hebofo-group .body .price {
    display: flex;
    position: relative;
    padding: 6px 12px;
    margin: auto 8px;
    border: 1px solid #4b84c1;
    border-radius: 4px;
}
.web-publish .hebofo-group .body .regular-price {border: none;}
.web-publish .hebofo-group .body .regular-price span {opacity: .5;}
.web-publish .hebofo-group .body .regular-price::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 100%;
    height: 1px;
    background-color: #4b84c1;
    transform: rotate(27.5deg) translate(0, -50%);
}
.web-publish .hebofo-group .body .regular-price::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 100%;
    height: 1px;
    background-color: #4b84c1;
    transform: rotate(-27.5deg) translate(0, -50%);
}
.web-publish .hebofo-group .price-sign {
    font-size: 1.5rem;
    font-weight: 800;
    margin: auto 0;
}
.web-publish .hebofo-group .body .price .value {
    font-size: 1.5rem;
    font-weight: 700;
    margin: auto 4px;
}
.web-publish .hebofo-group .body .price .period {margin: auto 0}
.url-validation .afy-alert {max-width: 600px;}
.url-validation .alert-modal-body {padding: 32px;}
.url-validation .alert-modal-body .search-result {
    display: flex;
    flex-direction: column;
    padding: 16px 0;
}
.url-validation .alert-modal-body .search-result .icon {
    font-size: 40px;
    margin: 0 0 4px 0;
}
.url-validation .alert-modal-body .search-result .value {font-size: 14px;}
.url-validation .alert-modal-body .search-result .divider {margin: 8px 0;}
.url-validation .alert-modal-body .search-result .small {font-size: 12px;}
.web-publish .afy-stepper-container {
    display: flex;
    position: relative;
    padding: 16px;
    background-color: #fff;
    border-top: 1px solid rgba(0, 0, 0, .11);
}
.web-publish .afy-stepper-container .btn {margin: auto 0;}
.web-publish .afy-stepper-container .btn:first-child {margin-right: auto;}
.web-publish .afy-stepper-container .btn:last-child, .web-publish .afy-stepper-container .btn:only-child {margin-left: auto;}
.web-publish .afy-stepper-container .btn-shopping-result {display: flex;}
.web-publish .afy-stepper-container .btn-shopping-result .btn-title {margin: auto 0 auto 3px;}
.web-publish .afy-stepper-container .btn-shopping-result .badge {
    top: auto;
    min-width: 16px;
    font-size: 10px;
    text-align: center;
    padding: 3px;
    margin: auto -3px auto -12px;
    border-radius: 10px;
    color: #fff;
    background-color: #3b74b1;
    opacity: 0;
    transition: all ease-in-out 300ms;
}
.web-publish .afy-stepper-container .btn-shopping-result:hover .badge,
.web-publish .afy-stepper-container .btn-shopping-result:active .badge {
    color: #3b74b1;
    background-color: #fff;
}
.animated-badge {
    display: none;
    position: fixed;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 7.15px;
    border-radius: 10px;
    color: #fff;
    background-color: #4b83c1;
    transition: left ease-in-out 800ms, top ease-in-out 800ms, scale ease-in-out 800ms;
    z-index: 1;
}



/*------------------------------------------
09. PUBLISHING > iOS
------------------------------------------*/
.ios-full-data {
    padding: 0;
    border-right: 1px solid #eee;
}
.ios-full-data:last-child {border: none;}
.ios-full-data .header {
    padding: 8px 20px;
    margin: 0;
    background: linear-gradient(to top, #f8f8f8, #fefefe);
    border-bottom: 1px solid #eee;
}
.ios-full-data:first-child .header {border-radius: 8px 0 0 0;}
.ios-full-data .header .header-txt {font-size: 13px;}
.ios-full-data .header + .input-container {padding: 8px 12px;}
.ios-full-data .input-group-col + .input-group-col .header {
    border-top: 1px solid #f3f3f3;
    border-radius: 0;
}
.ios-full-data:last-child .header {border-radius: 0 8px 0 0;}
.publish.ios .response-summary .checkbox-list .afy-checkbox-width-label .afy-custom-checkbox {margin: 11px -24px auto 8px;}
.publish.ios .response-summary .checkbox-list .afy-checkbox-width-label input[type="checkbox"] {left: 8px;}
.publish.ios .response-summary .checkbox-list .afy-checkbox-width-label label {
    font-size: 10px;
    line-height: 1.4;
    word-break: break-all;
}


/*------------------------------------------
09. PUBLISHING > PUBLISH FROM AFY
------------------------------------------*/
.afy-publish .publish-content {padding: 64px 16px 16px 16px;}
.afy-publish .publish-content .recent-msgs {
    padding: 16px;
    margin: auto;
}
.afy-publish .publish-content .header {
    padding: 0;
    margin: auto 0 12px 0;
}
.afy-publish .publish-content .header .header-txt {margin: auto;}












/* .publish .publish-step {
    display: flex;
    flex-direction: column;
}
.publish .publish-step .header .icon {
    font-size: 40px;
    margin: 20px auto 11px auto;
}
.publish .publish-step .header .icon.pwa {height: 40px;}
.publish .publish-step .caption {
    font-size: 14px;
    text-align: center;
    margin: 0 auto;
}
.publish .publish-step .afy-radio-width-label {border-top: 1px solid rgba(0, 0, 0, .07);}
.publish .publish-step .definition-text p {
    font-size: 12px;
    margin: 0 0 8px 0;
}
.publish .publish-step .definition-text p:last-child {margin-bottom: 0;}
.publish .publish-step .action-container {
    display: flex;
    position: relative;
    padding: 12px;
    margin: 0;
}
.publish .publish-step .btn {
    width: 100%;
    margin: 0;
    padding: 12px;
}
.web-publish .recent-msgs .definition-text {margin: 0;}
.web-publish .recent-msgs .definition-text h3 {
    font-size: 18px;
    font-weight: 700;
    text-align: left;
    margin: 0 0 2px 0;
}
.web-publish .recent-msgs .definition-text p {
    text-align: left;
}
.web-publish .domain-name,
.web-publish .www-files {
    display: flex;
    padding: 16px;
}
.publish .publish-step .domain-name .btn,
.publish .publish-step .www-files .btn {
    width: auto;
    width: auto;
    padding: 16px 24px;
    margin: auto auto auto 16px;
    border-radius: 4px;
}
.publish .publish-step .www-files .btn {
    padding: 12px 16px;
    margin: auto auto auto 40px;
}
.web-publish .icon {
    min-width: 30px;
    width: 30px;
    max-width: 30px;
    font-size: 24px;
    text-align: center;
    margin: auto 16px auto 0;
}
.web-publish .icon.fa-info {
    font-size: 12px;
    line-height: 1;
    padding: 8px 0;
    border: 1px solid#4b84c1;
    border-radius: 50%;
}
.web-publish .recent-msgs .definition-text.multi-col {
    display: flex;
    padding: 0;
}
.definition-text.multi-col .col-md-6 {padding: 16px;}
.web-publish .definition-text.multi-col .col-md-6 .icon {
    margin: 0 16px auto 0;
}
.web-publish .definition-text.multi-col .col-md-6 h3 {margin-top: 4px;}
.definition-text.multi-col .separator {
    margin: 0;
    border-color: rgba(0, 0, 0, .07);
}
.definition-text.multi-col .col-md-6 .divider {
    margin: 16px 0 16px 44px;
}
.definition-text.multi-col .col-md-6 .setup-info {
    width: 100%;
    font-size: 13px;
    padding: 0 0 0 44px;
    margin: -16px 0 0 0;
    list-style-position: inside;
}
.definition-text.multi-col .col-md-6 .setup-info li {
    width: 100%;
    font-weight: 600;
    text-align: left;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, .11);
}
.definition-text.multi-col .col-md-6 .setup-info li:last-child {border: none;}
.url-validation .afy-alert {max-width: 600px;}
.url-validation .alert-modal-body .d-flex {
    flex-direction: column;
    padding: 16px 0;
}
.url-validation .alert-modal-body .d-flex .icon {
    font-size: 40px;
    margin: 0 0 4px 0;
}
.url-validation .alert-modal-body .d-flex .value {font-size: 14px;}
.url-validation .alert-modal-body .d-flex .divider {margin: 8px 0;}
.url-validation .alert-modal-body .d-flex .small {font-size: 12px;}
.domain-name-availability .body {
    flex-wrap: nowrap;
    padding: 0;
    margin: 0;
}
.domain-name-availability .body .separator {
    height: auto;
    margin: 0;
    border-color: rgba(0,0,0,.07);
}
.domain-name-availability .xtrs {
    width: 100%;
    padding: 0;
    margin: auto auto auto 0;
}
.domain-name-availability .xtrs .title {
    display: block;
    width: 100%;
    font-size: 18px;
    font-weight: 700;
    padding: 16px 32px;
    color: #6c757d;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.domain-name-availability .xtrs ul {
    padding: 8px 32px;
    margin: 0;
    list-style: none;
    list-style-type: none;
}
.domain-name-availability .xtrs li {margin: 8px 0;}
.domain-name-availability .xtrs li .icon {
    min-width: auto;
    width: auto;
    max-width: none;
    font-size: 18px;
    margin: auto 4px auto 0;
}
.domain-name-availability .xtrs li .value {
    font-size: 14px;
    margin: auto 0;
}
.domain-name-availability .price {
    display: flex;
    padding: 16px;
    margin: auto 0;
}
.domain-name-availability .price .regular-price {
    display: flex;
    position: relative;
    padding: 8px 16px;
    margin: auto 16px auto 0;
    opacity: .5;
}
.domain-name-availability .price .regular-price::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 100%;
    height: 1px;
    background-color: #4b84c1;
    transform: rotate(27.5deg) translate(0, -50%);
}
.domain-name-availability .price .regular-price::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 100%;
    height: 1px;
    background-color: #4b84c1;
    transform: rotate(-27.5deg) translate(0, -50%);
}
.domain-name-availability .price .discounted-price {
    display: flex;
    padding: 12px;
    margin: auto 0;
    border: 1px solid #4b84c1;
    border-radius: 4px;
}
.domain-name-availability .price .icon {
    min-width: auto;
    width: auto;
    max-width: none;
    font-size: 20px;
    margin: auto 4px auto 0;
}
.domain-name-availability .price .value {
    font-weight: 700;
    margin: auto 0;
}
.publish .publish-step.continue-checkout .btn {
    width: auto;
    padding: 12px 16px;
}
.shopping-quick-result {
    display: flex;
    margin: auto auto auto 0;
}
* + .shopping-quick-result {margin: auto;}
.publish .publish-step.continue-checkout .btn-shopping-result {
    display: flex;
    position: relative;
    padding: 8px;
    margin: 0 16px 0 0;
    background: none;
    border: none;
}
.publish .publish-step.continue-checkout .btn-shopping-result .btn-icon {
    font-size: 24px;
    margin: auto 8px auto 0;
    color: #4b84c1;
}
.publish .publish-step.continue-checkout .btn-shopping-result .btn-title {
    font-size: 14px;
    color: #6c757d;
}
.hosting-packs {display: none;}
.hosting-packs .content-container {padding: 32px;}
.host-pkg-content {
    display: flex;
    position: relative;
    flex-direction: column;
    text-align: center;
    background-color: rgba(75, 131, 193, .011);
    box-shadow: 0 0 0 1px rgba(75, 131, 193, .11), 0 0 0 4px rgba(75, 131, 193, .11);
    border-radius: 8px;
}
.host-pkg-heading {
    font-size: 20px;
    font-weight: 700;
    margin: 32px auto 16px auto;
    color: #4b83c1;
}
.host-pkg-price-container {
    display: flex;
    position: absolute;
    top: -18px;
    left: 50%;
    padding: 8px 16px;
    color: #4b84c1;
    background-color: #fff;
    box-shadow: 0 0 0 1px rgba(75, 131, 193, .33), 0 0 0 4px rgba(75, 131, 193, .22);
    border-radius: 36px;
    transform: translate(-50%, 0%);
}
.domain-name-availability .price,
.host-pkg-price-container .price {
    font-size: 20px;
    line-height: 1;
    margin: auto 0 auto auto;
}
.domain-name-availability .period,
.host-pkg-price-container .period {
    font-size: 14px;
    line-height: 1;
    margin: auto auto auto 0;
}
.host-pkg-include {
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    background-color: #fff;
}
.host-pkg-include li {
    font-size: 12px;
    padding: 8px;
    color: #6c757d;
    border-bottom: 1px solid rgba(108, 117, 125, .11);
}
.host-pkg-include li:last-child {border: none;}
.publish .publish-step .host-pkg-content button {
    width: auto;
    padding: 12px 16px;
    margin: 16px auto;
    border-radius: 4px;
}
.publish .publish-step.continue-checkout .prev-step {margin: auto 24px auto 0;}
.shopping-cart-detail .alert-modal-header .icon {
    font-size: 14px;
    margin: auto 0 auto auto;
}
.shopping-cart-detail .alert-modal-header .badge {
    width: 14px;
    font-size: 8px;
    padding: 3px 0;
    margin: -4px 0 auto -4px;
    color: #fff;
    background-color: #4b84c1;
    border-radius: 50%;
}
.shopping-cart-detail .alert-modal-header .title {
    font-size: 14px;
    font-weight: 700;
    margin: auto auto auto 0;
}
.shopping-cart-detail .alert-modal-body {padding: 0;}
.purchased-list {
    padding: 8px;
    margin: 0;
    list-style: none;
    list-style-type: none;
}
.purchased-item {
    display: flex;
    flex-wrap: nowrap;
    margin: 8px 0;
    border: 1px solid rgba(75, 131, 193, .22);
    border-radius: 4px;
}
.purchased-item:first-child,.cart-empty + .purchased-item {margin-top: 0;}
.purchased-item:last-child {margin-bottom: 0;}
.purchased-item.cart-empty {margin: 0;}
.purchased-item .btn.remove-purchased-item {
    padding: 8px 8.75px;
    margin: auto 8px;
    border-radius: 15px;
}
.purchased-item-info {
    display: flex;
    flex-direction: column;
    padding: 8px;
    border-width: 0 1px;
    border-style: solid;
    border-color: rgba(75, 131, 193, .22);
}
.purchased-item.cart-empty .icon {
    font-size: 16px;
    color: #4b84c1;
    padding: 16px 0 16px 16px;
    margin: auto 4px auto auto;
}
.purchased-item.cart-empty .helper-text {margin: auto auto auto 0;}
.shopping-cart-detail .alert-modal-body .divider {border-color: rgba(75, 131, 193, .22);}
.shopping-cart-detail.web .item-type {
    display: flex;
    font-size: 14px;
    font-weight: 700;
    margin: auto auto 0 0;
    color: #4b84c1;
}
.shopping-cart-detail.web .item-type .icon {margin: auto 2px auto 0;}
.shopping-cart-detail.web .item-type .name {margin: auto 0;}
.shopping-cart-detail.web .item-content {
    font-size: 12px;
    margin: 0 auto auto 0;
    color: #6c757d;
}
.shopping-cart-detail.web .price {
    display: flex;
    flex-direction: column;
    font-size: 15px;
    font-weight: 700;
    padding: 8px;
    color: #4b84c1;
}
.shopping-cart-detail.web .price .value {
    font-size: 18px;
    margin: auto auto 0 auto;
}
.shopping-cart-detail.web .price .icon {
    margin: 0 auto auto auto;
}
.shopping-cart-detail .purchased-sum > * {
    display: flex;
    flex-wrap: nowrap;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    padding: 16px;
    color: #6c757d;
    border-bottom: 1px solid rgba(75, 131, 193, .22);
}
.shopping-cart-detail .purchased-sum > :last-child {border: none;}
.shopping-cart-detail .purchased-sum .value,.shopping-cart-detail .purchased-sum .icon {color: #4b84c1;}
.payment-methods {
    padding: 0;
    margin: 0;
}
.payment-methods li {border-bottom: 1px solid rgba(75, 131, 193, .22);}
.payment-methods li:last-child {border: none;}
.payment-icon {
    min-width: 30px;
    font-size: 18px;
    text-align: center;
    margin: auto 4px auto 0;
    color: #4b84c1;
}
#paymentOptions .title {
    font-size: 14px;
    text-align: center;
    padding: 16px;
    font-weight: 700;
    color: #4b84c1;
    border-bottom: 1px solid rgba(75, 131, 193, .22);
}
.all-success-modal .icon {
    font-size: 14px;
    margin: auto 4px auto auto;
}
.all-success-modal .title {
    font-size: 14px;
    font-weight: 700;
    margin: auto auto auto 0;
}
.all-success-modal .alert-modal-body {padding: 16px;}
.publish > .row > .col-lg-6 {
    max-width: 640px;
    padding: 0;
    margin: 0 0 16px 0;
}
.publish.success-return > .row.content {height: calc(100vh - 52px);}
.publish.success-return > .row.content .aligner {
    padding: 0 0 3rem 0;
    margin: auto;
}
.publish .publish-success-animation {margin: auto auto auto -96px;}
.publish .success-checkmark {
    margin: 0;
    transform: scale(.5);
    transform-origin: right center;
}
.publish.success-return h4 {
    font-weight: 700;
    margin: -4.75rem auto .5rem auto;
    color: #28a745;
}
.publish.success-return .congratulations-text {max-width: 480px;}
.publish.success-return .congratulations-text p {margin-bottom: .5rem;}
.publish.success-return .congratulations-text .signature {
    font-weight: 600;
    padding: .5rem 0 0 0;
    margin-bottom: 1.5rem;
    border-top: 1px dashed rgba(40, 167, 69, 0.4);
}
.publish .keystore-files .afy-special-btn, .publish .keystore-files .afy-input-btn-group {margin: auto 0 auto auto;}
.publish .uploaded-file-path {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: none;
}
.publish .uploaded-file-path:nth-last-of-type(even) {background-color: #f8f9fa;}

.publish .uploaded-file-path .file-path {
    line-height: 2.5;
    margin: auto auto auto 0;
}

.publish .uploaded-file-path.uploaded .btn-flat {display: block;}
.publish .col-lg-8 .row {
    border-top: 1px solid rgba(0,0,0,.11);
}
.publish .col-lg-8 .row .separator {
    margin: 0 -1px;
    border-width: 0 0 0 2px;
    z-index: 1;
}
.publish .uploaded-preview {
    position: relative;
    padding: 16px;
}
.publish .upload-image.aspc-g-play-featured-img {
    position: relative;
    width: 100%;
    padding: 0 0 48.828125% 0;
}
.publish .upload-image.aspc-1x1 {
    position: relative;
    width: 128px;
    height: 128px;
}
.publish .afy-input-btn-group-container {
    display: flex;
    position: absolute;
    left: 16px;
    top: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
}
.publish .upload-image.aspc-1x1 + .afy-input-btn-group-container {
    width: 128px;
    height: 128px;
}
.publish .uploaded-preview .afy-input-btn-group {margin: auto;}
.publish .uploaded-preview.uploaded .afy-input-btn-group {display: none;}
.publish .uploaded-preview .helper {
    display: none;
    text-align: center;
    margin: auto;
    border: none;
    opacity: 0;
    transition: opacity ease-in-out 300ms;
}
.publish .uploaded-preview .helper .btn {
    min-width: 48px;
    width: 48px;
    max-width: 48px;
    font-size: 24px;
    text-align: center;
    padding: 5px 0;
    margin: auto;
    color: #dc3545;
    background-color: #fff;
    border-color: #dc3545;
    border-radius: 24px;
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
}
.publish .uploaded-preview.uploaded .helper {display: block;}
.publish .uploaded .afy-input-btn-group-container:hover .helper {opacity: 1;}
.publish .upload-image .dummy-image,.publish .upload-image .uploaded-image-preview {border-radius: 0;}
.publish .upload-image.app-icon .dummy-image,.publish .upload-image.app-icon .uploaded-image-preview {border-radius: 16px;}
.publish .uploaded-preview .helper .btn:hover {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.app-extended-info .app-ss-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    padding: 0 8px;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
}
.app-extended-info .app-ss {
    min-width: 160px;
    width: 160px;
    max-width: 160px;
    padding: 16px 8px;
}
.app-extended-info .app-info-section {margin: 0;}
.publish .content-container {padding: 16px;} */


















/*------------------------------------------
08. CERTIFICATES
------------------------------------------*/
.certificates .recent-msgs .header {padding: 16px;}
.certificates .recent-msgs .header-txt {font-size: 18px;}
.certificates .recent-msgs .small.header-txt {font-size: 14px;}
.certificates .recent-msgs ul {
    list-style: none;
    list-style-type: none;
}
.certificates .recent-msgs .btn {
    width: 100%;
    font-size: 14px;
    white-space: nowrap;
    padding: 12px 20px;
    border-radius: 4px;
}
.certificates .definition-text {padding: 16px;}
.certificates .definition-text p {font-size: 14px;}
.certificates .uploaded-file-path {
    display: flex;
    width: 100%;
    max-width: none;
    padding: 16px;
}
.certificates .file-path {
    display: flex;
    width: 100%;
    padding: 0 16px 0 0;
}
.certificates .info-date {
    font-weight: 500;
    margin: auto 0 auto auto;
}
.certificates .uploaded-file-path .btn {
    width: auto;
    padding: 6px 12px;
}






.country-filter {
    width: 100%;
    max-width: calc(100% - 160px);
    padding: 0;
    margin: auto 8px;
}
.country-filter .mat-outline-input-container {width: 100%;}
.filtered-country-container {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    max-width: 100%;;
    padding: 0 4px;
    margin: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .11) 0%, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
}
.filtered-country-container .country-item {
    display: flex;
    position: relative;
    align-items: center;
    font-size: 12px;
    white-space: nowrap;
    padding: 6px 6px 6px 10px;
    margin: 10px 4px 8px 4px;
    background-color: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, .07);
    border: 1px solid rgba(0, 0, 0, .22);
    border-radius: 4px;
}
.country-item .btn.btn-remove {
    width: 24px;
    font-size: 10px;
    text-align: center;
    padding: 6px 0;
    margin: auto auto auto 4px;
}
.service-price-summary {font-size: 14px;}
.service-price-summary.table-bordered {border: none;}
.service-price-summary thead tr th:first-child,.service-price-summary tbody tr th {text-align: left;}
.service-price-summary .empty {border: none;}
.service-price-summary .btn-only {
    text-align: left;
    padding: .75rem;
}
.service-price-summary .price-row .heading {font-weight: 700;}
.service-price-summary.table-hover tbody tr:hover {background: none;}
.service-price-summary.table-hover tbody tr:hover th,
.service-price-summary.table-hover tbody tr:hover td {
    background-color: rgba(0, 0, 0, .04);
}
.service-price-summary.table-hover .price-row:hover th,
.service-price-summary.table-hover .price-row:hover td {
    background: none;
}
.service-price-summary.table-hover .price-row.hovered:hover th,
.service-price-summary.table-hover .price-row.hovered:hover td {
    background-color: rgba(0, 0, 0, .04);
}
tr.price-row.first th:not(.empty),
tr.price-row.first td:not(.empty),
tr.price-row.first:hover th:not(.empty),
tr.price-row.first:hover td:not(.empty) {
    border-top: 3px solid #dee2e6;
}
.payment-options > .d-flex {
    flex-direction: column;
    padding: 16px;
}
.payment-options .icon {
    font-size: 32px;
    margin: 8px auto 0 auto;
}
.payment-options .value {
    font-size: 14px;
    text-align: center;
    margin: 8px auto;
}


/*------------------------------------------
08. WEB-LIST PAGE
------------------------------------------*/
.web-site-list .app-icon {
    display: flex;
    width: 32px;
    height: 32px;
    font-size: 24px;
    color: #4b84c1;
}
.web-site-list .app-icon::before {margin: auto;}
.web-site-list .app-name {margin: auto auto auto 4px;}
.web-site-list .quick-info {padding: 12px 16px;}
.web-site-list .app-status {margin: auto auto auto 4px;}
img.item-qr-code {
    width: 128px;
    margin: 0 auto 32px auto;
}
.afy-store-qr-modal img.item-qr-code {width: 100%;}
.afy-store-qr-modal .icon {
    font-size: 14px;
    margin: auto 2px auto auto;
}
.afy-store-qr-modal .title {
    font-size: 14px;
    margin: auto auto auto 0;
}

/*------------------------------------------
DARK/LIGHT THEME
------------------------------------------*/
.builder-dark-ui .admin-nav {
    background-color: #242b33;
    border-right: 1px solid #000000;
}
.builder-dark-ui .admin-nav .nav-link {
    border-width: 1px 0 1px 0;
    border-color: #353e49 #000000 #000000 #000000;
}

/*------------------------------------------
RESERVATION (KATALOG vs... ile ORTAK KULLANILABİLİR)
------------------------------------------*/
.cms-layout .cms-image-gallery {
    width: 185px;
    padding: 0;
}
.cms-image-gallery .header {
    font-size: 12px;
    font-weight: 700;
    padding: .5rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.cms-image-gallery .added-images {
    padding: 6px;
    margin: 0;
}
.cms-image-gallery .added-images .product-img {
    display: flex;
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    padding: 4px;
}
.cms-image-gallery .product-img-wrapper {
    position: relative;
    margin: auto;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: .5rem;
    overflow: hidden;
    cursor: pointer;
}
.cms-image-gallery .product-img img {
    position: absolute;
    left: 50%;
    top: 50%;
    min-width: 100%;
    max-width: fit-content;
    min-height: 100%;
    max-height: 100%;
    margin: 0;
    transform: translate(-50%, -50%);
}
.cms-image-gallery .cover-badge {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 10px;
    padding: 7px;
    color: #fff;
    background-color: #28a745;
    border-radius: 50em;
    z-index: 2;
}
.cms-image-gallery .action-btn-group {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 4px;
    top: 4px;
    right: 4px;
    bottom: 4px;
    white-space: nowrap;
    padding: 0;
    background-color: rgba(0, 0, 0, .33);
    opacity: 0;
    border-radius: .5rem;
    transition: all ease-in-out 300ms;
    z-index: 1;
}
.cms-image-gallery .btn-container {
    padding: 2px;
    background-color: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, .2);
    border-radius: 50em;
    margin: 2px auto;
}
.cms-image-gallery .btn-container:first-child {margin-top: auto;}
.cms-image-gallery .btn-container:last-child {margin-bottom: auto;}
.cms-image-gallery .product-img:hover .action-btn-group {opacity: 1;}
.add-new-image .product-img-wrapper {border: 2px dashed #28a745;}
.add-new-image .product-img-wrapper.aspc-1x1 {padding-bottom: calc(100% - 3px);}
.add-new-image .product-img-wrapper.aspc-16x9 {padding-bottom: calc(56.25% - 3px);}
.add-new-image .product-img-wrapper:active {
    box-shadow: 0 0 0 3px rgba(40, 167, 69, .33);
    border: 1px solid rgba(40, 167, 69, .66);
}
.add-new-image .product-img-wrapper.aspc-1x1:active {padding-bottom: calc(100% - 1px);}
.add-new-image .product-img-wrapper.aspc-16x9:active {padding-bottom: calc(56.25% - 1px);}
.add-new-image .btn-group {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    color: #28a745;
    border-radius: 6px;
    transition: all ease-in-out 200ms;
}
.add-new-image .product-img-wrapper:hover .btn-group {
    color: #007d1d;
    background-color: rgba(40, 167, 69, .07);
}
.add-new-image .btn-group .btn-icon {margin: auto .25rem auto auto;}
.add-new-image .btn-group .btn-title {margin: auto auto auto 0;}

/* İkinci Blok */
.row.cms-layout .cms-image-gallery + .text-data {
    padding: .5rem;
    margin: 0;
}
/* rtf-editor ortak class olarak kullanılsa işler kolaylaşacaktır... */
.rtf-editor + .tox {
    width: 100%;
    min-height: 240px;
}

/* Üçüncü Blok - Bu aynı zamanda sonuncu büyük ihtimalle, daha fazlası sorun olacak gibi... */
.row.cms-layout .xtr-data-group {width: 280px;}
.actions-container {
    display: flex;
    padding: 1.5rem 1rem;
}
.actions-container .btn {margin: auto .5rem;}
.actions-container .btn:first-child {margin-left: 0;}
.actions-container .btn:last-child {margin-right: 0;}
.actions-container .btn:only-child {margin: auto;}
.data-container {margin: 0 0 auto 0;}

/* Enden tam boy tablo yapmak için ortak sınıflar */
.table.w-100 {
    margin: 0 0 -1px 0;
    border: none;
}
.table.w-100 th:first-child, .table.w-100 td:first-child {border-left: none;}
.table.w-100 th:last-child, .table.w-100 td:last-child {border-right: none;}

/* Add Data Actions */
.add-data-actions {
    flex-wrap: wrap;
    justify-content: center;
    white-space: nowrap;
    padding: .75rem;
}
.add-data-actions.actions-container .btn {margin: .25rem;}

/* Room Data Entry Status */
.row.cms-layout .reservation.content-status {
    flex-wrap: wrap;
    justify-content: space-evenly;
    white-space: nowrap;
}
.reservation.content-status .title {
    width: 100%;
    text-align: center;
    margin: 0 0 4px 0;
}
.reservation.content-status .separator {margin: auto 0;}
.reservation.content-status .afy-radio-width-label {padding: 0 4px;}

@media (min-width:1920px) {
    .cms-layout .cms-image-gallery, .row.cms-layout .xtr-data-group {width: 25%;}
    .cms-image-gallery .added-images .product-img {
        flex: 0 0 50%;
        width: 50%;
    }
    .reservation.content-status .title {
        width: auto;
        margin: auto .5rem auto 0;
    }
    .reservation.content-status .separator {margin: auto 4px;}
    .reservation.content-status .afy-radio-width-label {padding: 0 8px;}
}

/* TABBED LİSTELER DEĞİŞEBİLEN DURUM SENARYOLARI */
.basic-stat-container {
    display: flex;
    justify-content: center;
}
.basic-stat {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: .5rem 1rem;
    margin: 0;
    border-right: 1px solid #dee2e6;
}
.basic-stat:last-child {border: none;}
.basic-stat.available-room {color: #28a745;}
.basic-stat .label {
    font-size: 12px;
    line-height: normal;
    margin: auto .25rem auto 0;
}
.basic-stat .value {
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    margin: auto 0;
}
.add-new-action-container {
    display: flex;
    padding: .75rem;
    margin: 0;
    background-color: #f8f9fa;
    border-width: 1px 0;
    border-style: solid;
    border-color: rgb(0, 0, 0, .05);
}
.add-new-action-container .afy-add-new-item-btn {margin: auto;}
.reservation-list-container .card-live-data .title {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 2px 0;
}
.reservation-list-container .card-live-data .divider {
    margin: 4px -8px 6px -8px;
    border-color: rgba(0, 0, 0, 0.07);
}
.reservation-list-container .card-live-data .order-date-data {font-size: 10px;}
.cms-container.cms-reservation > .check-connection-overlay {padding-left: 0;}
.cms-container.cms-reservation .badge {
    width: 100%;
    font-size: inherit;
    font-weight: normal;
    padding: .5rem .8rem .45rem .75rem;
    color: #6c757d;
    background: none;
    border-width: 1px;
    border-style: solid;
    border-color: #6c757d;
}
.cms-container.cms-reservation .badge.badge-success {
    color: #28a745;
    border-color: #28a745;
}
.cms-container.cms-reservation .afy-alert-modal .payment-status .label {margin: auto 0;}
.cms-container.cms-reservation .afy-alert-modal .badge {
    width: auto;
    padding: 1rem 0 1rem .5rem;
    margin: auto 0;
    border: none;
}
.cms-container.cms-reservation .afy-alert-modal .badge .status-title {margin: auto auto auto .25rem;}
.cms-container.cms-reservation .afy-alert-modal .payment-status {
    display: flex;
    justify-content: center;
    background: #f8f9fa;
}
.cms-container.cms-reservation table .price-cell .title {font-size: inherit;}
.room-info.available .room-info-icon, .room-info.available .room-number {color: #28a745;}
.cms-card-item .room-info {
    font-size: 12px;
    font-weight: 700;
}
.cms-admin .cms-reservation .afy-alert-modal .table thead th,
.cms-admin .cms-reservation .afy-alert-modal .table thead td,
.cms-admin .cms-reservation .afy-alert-modal .table tbody th,
.cms-admin .cms-reservation .afy-alert-modal .table tbody td {
    text-align: left;
    padding: .75rem;
}
.cms-reservation .afy-alert-modal .table input {
    width: 100%;
    height: auto;
    margin: 0;
}
.cms-reservation .afy-alert-modal .table .price-cell input {width: auto;}

/*---------------------------------------------------------------
09. LIVE STREAM
---------------------------------------------------------------*/
.cms-admin .live-stream-list .card-live-data {padding: 6px;}
.live-stream-list .card-image {
    width: 40px;
    height: 40px;
    margin: 0 6px auto 0;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #ddd;
}
.live-stream-list .text-data {
    display: flex;
    flex-wrap: wrap;
    margin: -40px 0 0 48px;
}
.cms-admin .live-stream-list .text-data > * {
    width: 100%;
    line-height: 1.3;
    word-break: break-all;
    margin: 0;
}
.live-stream-list .text-data .title {
    font-weight: 700;
    margin: auto 0 0 0;
}
.live-stream-list .text-data .description {font-size: 10px;}
.live-stream-list .text-data .status {
    width: auto;
    max-width: 50%;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 5px;
    margin: 2px 0 auto 0;
    color: #fff;
    background-color: #ddd;
    border-radius: 50em;
}
.live-stream-list .text-data .status.waiting {background-color: #6c757d;}
.live-stream-list .text-data .status.on-line {background-color: #28a745;}

.live-stream-list .text-data .privacy-type {
    width: auto;
    max-width: 50%;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 4px;
    margin: 2px 0 auto 0;
    color: #6c757d;
}
.live-stream-list .text-data .privacy-type.public {color: #28a745;}
.live-stream-list .text-data .privacy-type.private {color: #dc3545;}


.live-stream-content .content-prop {padding: 0;}
.live-stream-content .afy-inline-mat-input-row {
    display: flex;
    flex-wrap: wrap;
}
.live-stream-content .group-info-prop .content-prop-header,
.live-stream-content .added-data-prop .content-prop-header {
    padding: 16px;
    margin: 0;
}
.live-stream-content .list-page-item-image {
    width: 204px;
    padding: 1rem;
    border-right: 1px solid rgba(0, 0, 0, .1);
}
.live-stream-content .cms-basics-data {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}
.live-stream-content .data-input-group {padding: .5rem;}
.live-stream-content .input-group {
    white-space: nowrap;
    margin: 0;
}
.live-stream-content .input-group.no-wrap {flex-wrap: nowrap;}
.live-stream-content .cms-editor .cms-basics-data .input-group > * {margin: .125rem .5rem;}
.live-stream-content .cms-editor .cms-basics-data .input-group .mat-outline-input-container {
    padding: 7px 0;
    opacity: 1 !important;
}
.live-stream-content .cms-basics-data .input-group.no-wrap .btn {
    font-size: .775rem;
    padding: .75rem 1rem;
    margin: auto .5rem;
    color: #999;
    border-color: #ccc;
    border-radius: 0.3rem;
    transition: color ease-in-out 200ms, background-color ease-in-out 200ms, box-shadow ease-in-out 0ms;
}
.live-stream-content .cms-basics-data .input-group.no-wrap .btn:hover {
    color: #fff;
    background-color: #999;
    border-color: #999;
}
.live-stream-content .cms-basics-data .input-group.no-wrap .btn:active {
    color: #fff;
    background-color: #888;
    box-shadow: 0 0 0 2px #ccc;
    border-color: #999;
}
.live-stream-content .group-info-prop .action-group {padding: 1rem;}
.live-stream-content .group-info-prop .action-group .btn {padding: .594rem 1rem;}
.live-stream-content .added-data-prop {border-top: 1px solid rgba(0, 0, 0, 0.1);}
.live-stream-content .cms-layout .rt-plus-data {padding-top: 5px;}
.live-stream-content .row.cms-layout .rt-plus-data .plus-data + textarea + .tox-tinymce {
    margin: 5px 0 0 0;
    min-height: calc(100% - 66px) !important;
}
.live-stream-content .row.cms-layout .rt-plus-data .plus-data + .plus-data + textarea + .tox-tinymce,
.live-stream-content .row.cms-layout .rt-plus-data .plus-data + .plus-data + .plus-data + textarea + .tox-tinymce,
.live-stream-content .row.cms-layout .rt-plus-data .plus-data + .plus-data + .plus-data + .plus-data + textarea + .tox-tinymce,
.live-stream-content .row.cms-layout .rt-plus-data .plus-data + .plus-data + .plus-data + .plus-data + .plus-data + textarea + .tox-tinymce {min-height: auto !important;}

/*=============================================================*/
/* 10. RESTAURANT/DIGITAL MENU
/*=============================================================*/
/* Shared */
.table-list {
    display: flex;
    flex-direction: column;
}
.table-list .add-new-btn {
    padding: 0.5rem 0.75rem;
    margin: 1rem auto;
}
.table-list table.table {
    width: 100%;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, .11);
}
.digitalmenu-content td.cover-image {width: 1px;}
th.portion-price, td.portion-price {white-space: nowrap;}
td .portion-price .value {font-weight: 700;}
td .portion-price .portion::after {
    content: "=";
    margin: auto .25rem;
}
.digitalmenu-content .badge {
    font-size: 12px;
    line-height: normal;
    padding: .25rem .75rem;
}

/* Category/Menu/Product Section */
.digitalmenu-content .cms-basics-data {
    min-width: 272px;
    width: 272px;
    max-width: 272px;
}
.afy-grouped-prop.digitalmenu-content .content-prop-header {
    padding: .75rem;
    background: none;
}
.digitalmenu-content .cms-basics-data .uploaded-preview {padding: .5rem .5rem 0 .5rem;}
.digitalmenu-content .cms-basics-data .input-group {
    padding: 0 .5rem .5rem .5rem;
    margin: .5rem 0 0 0;
}
.digitalmenu-content .cms-prop-footer {padding: .5rem;}
.digitalmenu-content .cms-prop-footer .content-status-container {
    margin: -.5rem -.5rem .5rem -.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.digitalmenu-content .cms-prop-footer .content-status .afy-radio-width-label:first-child {margin: auto 0 auto auto;}
.digitalmenu-content .cms-prop-footer .content-status .separator {height: 32px;}
.digitalmenu-content .cms-prop-footer .content-status .afy-radio-width-label:last-child {margin: auto auto auto 0;}
.digitalmenu-content .cms-basics-data .cms-prop-footer .btn {width: 100%;}
.digitalmenu-content .cms-layout .added-data-prop {background: none;}

/* Orders */
.digitalmenu-content .orders {margin: 0;}
.order-list-container {
    width: 272px;
    padding: 1rem;
    margin: 0;
}
.order-list {
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    box-shadow: 0 0px 0px 1px rgba(0, 0, 0, 0.07), 0 0px 0px 4px rgba(0, 0, 0, 0.05);
    border-radius: 0.5rem;
}
.order-list-item {
    position: relative;
    line-height: normal;
    border-bottom: 1px solid rgba(0, 0, 0, .11);
}
.order-list-item:last-child {border: none;}
.order-list-item .btn-delete {
    position: absolute;
    left: 22px;
    top: 24.5px;
    width: 0;
    height: 0;
    padding: 0;
    border-width: 0;
    overflow: hidden;
    transition: all ease-in-out 200ms;
}
.order-list-item.selected .btn-delete {
    left: 7px;
    top: 9px;
    width: 30px;
    height: 30px;
    padding: .5rem .547rem;
    border-width: 1px;
}
.order-list-item .order-data {
    display: flex;
    padding: .75rem 1rem;
    transition: all ease-in-out 200ms;
    cursor: pointer;
}
.order-list-item:hover .order-data {background-color: #f8f9fa;}
.order-list-item.selected .order-data {
    padding: .75rem 1rem .75rem 2.75rem;
    background-color: #f2f3f4;
    cursor: default;
    pointer-events: none;
}
.order-list-item:first-child .order-data {border-radius: .5rem .5rem 0 0;}
.order-list-item:last-child .order-data {border-radius: 0 0 .5rem .5rem;}
.order-list-item .order-data .order-item {
    margin: auto 0;
    font-size: 12px;
}
.order-list-item .order-data .order-item.icon {margin: auto 0 auto auto;}
.order-list-item .order-data .order-item .value {font-weight: 700;}
.order-detail {
    padding: 1rem;
    border-left: 1px solid rgba(0, 0, 0, .11);
}
.order-detail table.table {
    margin: 0;
    border: 1px solid rgba(0, 0, 0, .11);
}
.order-detail .type-portion, .order-detail .type-price {
    font-size: 14px;
    font-weight: 700;
}

/* Tables */
.digitalmenu-content .table-create-edit {margin: 0;}
.table-bg-image .uploaded-preview {
    min-width: 272px;
    width: 272px;
    max-width: 272px;
    padding: 1rem;
}
.table-create-edit .table-list {
    padding: 1rem;
    background-color: #f8f9fa;
    border-left: 1px solid rgba(0, 0, 0, .11);
}








/**********************************/ /*/ AFY TEMEL CSS EK /*/ /**********************************/
.app-ss-aspc.aspc-9x16 {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding: 0 0 177.77777778% 0;
}
.alert-modal-body {
    padding: 8px 16px;
    background-color: #fff;
}
.alert-modal-footer {
    display: flex;
    padding: 8px 16px;
    background-color: #fff;
    border-top: 1px solid rgba(0, 0, 0, .05);
}
.alert-modal-footer .btn {
    line-height: 1.2;
    padding: 8px 12px;
    margin: auto 0 auto 8px;
    border-radius: 4px;
}
.alert-modal-footer .btn:first-child {margin: auto 0 auto auto;}
.afy-checkbox-group {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-type: none;
}
.afy-checkbox-group .afy-checkbox-width-label {
    display: flex;
    position: relative;
    flex-direction: row;
    width: 100%;
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.afy-checkbox-group .afy-checkbox-width-label.border-none {border: none;}
.afy-checkbox-group input[type="checkbox"] {
    position: absolute;
    height: auto;
    margin: 3px 2px;
    opacity: 0;
}




@media (min-width:320px) {}
@media (min-width:375px) {
    /*---------------------------------------------------------------
	08. SUBSCRIPTION PAGE
	---------------------------------------------------------------*/
	.subscription .compare-price-plans {margin: 0;}
	.subscription .table th, .subscription .table td {font-size: 11px;}
	/*---------------------------------------------------------------
	08. END OF SUBSCRIPTION PAGE
	---------------------------------------------------------------*/
}
@media (min-width:414px) {
    /*---------------------------------------------------------------
	08. SUBSCRIPTION PAGE
	---------------------------------------------------------------*/
	.compare-plan-btn {font-size: 14px;}
	.compare-plan-btn .btn-icon {font-size: 16px;}
	.price-sample .price-title {
		font-size: 20px;
		padding: 16px 16px 4px 32px;}
	.price-sample .price-currency {font-size: 18px;}
	.price-sample .price-value {font-size: 48px;}
	.price-sample .period-term::before {font-size: 48px;}
	.price-sample .period {font-size: 18px;}
	.price-sample .term {font-size: 13px;}
	.price-sample ul li {
		font-size: 13px;
		padding: 8px 16px;
	}
	.price-plan-changer {font-size: 14px;}
	.price-plan-changer::before {width: 92px;}
	.price-plan-changer.yearly-selected::before {transform: translateX(96px);}
	.price-plan-label {
		width: 96px;
		padding: 8px;
	}
	.subscription .table th, .subscription .table td {font-size: 12px;}
	/*---------------------------------------------------------------
	08. END OF SUBSCRIPTION PAGE
	---------------------------------------------------------------*/
}
@media (min-width:576px) {
    .admin-nav {
        min-width: 180px;
        width: 180px;
        max-width: 180px;
    }
    .nav-link-title {width: 120px;}
    .admin-content {
        /* padding: 52px 0 0 180px; */
        padding: 52px 0 48px 180px;
    }
    .admin-content > .header.row {
        left: 180px;
        transition: left ease-in-out 300ms;
    }

    .admin-nav.min {
        min-width: 60px;
        width: 60px;
        max-width: 60px;
    }
    .admin-nav.min .nav-link-title {width: 0;}
    .admin-nav.min + .admin-content {padding: 52px 0 0 60px;}
    .admin-nav.min + .admin-content > .header.row {left: 60px;}

    /*---------------------------------------------------------------
	08. SUBSCRIPTION PAGE
	---------------------------------------------------------------*/
    /* .price-sample ul li, .subscription .table th, .subscription .table td {font-size: 13px;} */
    .payment-options .table th, .payment-options .table td {
        font-size: 14px;
        padding: 1rem;
    }
	/*---------------------------------------------------------------
	08. END OF SUBSCRIPTION PAGE
	---------------------------------------------------------------*/

    /*------------------------------------------
    07. NEW APP
    ------------------------------------------*/
    .new-app .input-group-container {flex-wrap: nowrap;}
    .new-app .upload-preview-container {margin: auto 8px auto 0;}
    .new-app .input-group .row {margin: 0 0 12px 0;}
    .new-app .footer .btn-sm {
        width: auto;
        margin: auto auto auto 0;
    }
}
@media (min-width:768px) {
    body {font-size: 14px;}

    /*------------------------------------------
    07. AFY ADMIN
    ------------------------------------------*/
    .admin-content.afy-admin .app-info li {font-size: 13px;}

    /*---------------------------------------------------------------
	08. SUBSCRIPTION PAGE
	---------------------------------------------------------------*/
	/* .subscription .container {padding: 32px 0;} */
	/*---------------------------------------------------------------
	08. END OF SUBSCRIPTION PAGE
	---------------------------------------------------------------*/


    /*------------------------------------------
    07. NEW APP
    ------------------------------------------*/
    .new-app .recent-msgs {margin: 0 auto auto auto;}
    .new-app .brief-text {padding: 0 1rem;}
    .new-app .content.row {
        background-size: cover;
        background-position: right bottom;
        background-repeat: no-repeat;
        background-image: url(/images/afy-all-devices-light.png);
    }
}
@media (min-width:992px) {
    .publish > .row > .col-lg-6, .publish > .row > .col-lg-4, .publish > .row > .col-lg-6, .publish > .row > .col-lg-8, .certificates > .row > .col-lg-4 {padding: 0 8px;}
    .publish > .row > .col-lg-6:last-child, .publish > .row > .col-lg-4:last-child, .certificates > .row > .col-lg-4:last-child {padding: 0 0 0 8px;}
    .publish > .row > .col-lg-6:first-child, .publish > .row > .col-lg-4:first-child, .certificates > .row > .col-lg-4:first-child {padding: 0 8px 0 0;}

    /*---------------------------------------------------------------
	08. SUBSCRIPTION PAGE
	---------------------------------------------------------------*/
	/* .content.standart-pages.pricing .container-fluid .container {padding: 32px 16px;} */
	/*---------------------------------------------------------------
	08. END OF SUBSCRIPTION PAGE
	---------------------------------------------------------------*/

    /*------------------------------------------
    07. AFY ADMIN
    ------------------------------------------*/
    .admin-content.afy-admin .app-info .platform-info-text {display: block;}
    
    /*------------------------------------------
    07. NEW APP
    ------------------------------------------*/
    .new-app .recent-msgs {margin: auto;}
}
@media (min-width:1025px) {}
@media (min-width:1200px) {
    /* .publish .publish-step .header {padding: 16px 8px;}
    .publish .publish-step .header .icon {
        font-size: 52px;
    }
    .publish .publish-step .header .icon.fa-globe-americas {
        height: 48px;
        margin: 20px auto 16px auto;
    }
    .publish .publish-step .header .icon.pwa {
        height: 48px;
        margin: 20px auto 16px auto;
    }
    .publish .publish-step .header-txt {font-size: 20px;}
    .publish .publish-step .header.small .header-txt {font-size: 16px;}
    .publish .publish-step .caption {font-size: 15px;}
    .publish .publish-step .definition-text {padding: 16px;}
    .publish .publish-step .definition-text p {font-size: 13px;} */

    /*------------------------------------------
    07. AFY ADMIN
    ------------------------------------------*/
    .admin-content.afy-admin .summary-content .row.user-respond, .admin-content.afy-admin .summary-content .row > [class*="col"] {padding: 8px;}
    .admin-content.afy-admin .app-info li .msg-txt {flex-direction: column;}
    .admin-content.afy-admin .app-info li .title-text {margin: auto 0;}
    .admin-content.afy-admin .app-info li .value {margin: 4px auto auto 20px;}
    .admin-content.afy-admin .app-info .platform-info.supported:first-child {margin: 5px 5px 5px 0;}
    .admin-content.afy-admin .app-info .platform-info-text {display: none;}

    /*------------------------------------------
    09. PUBLISHING
    ------------------------------------------*/
    /*------------------------------------------
    09. PUBLISHING > PLATFORM CHOOSE
    ------------------------------------------*/
    .platform-choose .header {padding: 16px 8px;}
    .platform-choose .header .icon {font-size: 52px;}
    .platform-choose .header .icon.fa-globe-americas {
        font-size: 46px;
        margin: 18px auto 8px auto;
    }
    .platform-choose .header .icon.pwa {
        height: 48px;
        margin: 18px auto 6px auto;
    }
    .platform-choose .recent-msgs .header-txt {font-size: 20px;}
    .platform-choose .recent-msgs .caption {font-size: 15px;}
    .platform-choose .recent-msgs .definition-text p {font-size: 13px;}
}
@media (min-width:1440px) {







    /* .publish .publish-step .header {padding: 32px 16px;}
    .publish .publish-step .header .icon {
        font-size: 64px;
        margin: 0 auto auto auto;
    }
    .publish .publish-step .header .icon.pwa {margin: 4px auto 12px auto;}
    .publish .publish-step .header .icon.fa-globe-americas {
        font-size: 50px;
        margin: 4px auto 12px auto;
    }
    .publish .publish-step .header-txt {font-size: 24px;}
    .publish .publish-step .header.small .header-txt {font-size: 18px;}
    .publish .publish-step .header.x-small .header-txt {font-size: 14px;}
    .publish .publish-step .caption {font-size: 18px;}
    .publish .publish-step .definition-text {padding: 16px;}
    .publish .publish-step .definition-text p {font-size: 14px;}
    .publish .publish-step .action-container {padding: 16px;} */
}
@media (min-width:1615px) {
    .admin-content.afy-admin .app-info .platform-info-text {display: block;}
}
@media (min-width:1920px) {
    /*------------------------------------------
    07. AFY ADMIN
    ------------------------------------------*/
    .admin-content.afy-admin .app-info li .msg-txt {flex-direction: row;}
    .admin-content.afy-admin .app-info li .value {margin: auto auto auto 0;}
    .admin-content.afy-admin .summary-content .row .qr-container {
        flex-direction: row;
        height: 100%;
        margin: auto 0;
        padding: 16px;
    }
    .admin-content.afy-admin .app-qr {
        flex-direction: column;
        margin: auto;
    }
    .app-qr-text {margin: 4px auto auto auto;}
    .admin-content.afy-admin .request {
        height: 100%;
        margin: 0;
    }
    .admin-content.afy-admin .request li {height: 33.333%;}
}
@media (min-width:1921px) {}





/* CİHAZLAR!!!!!! UMDUĞUM KADAR İYİ YAPABİLİRSEM DİĞER SAYFALARA DA TAŞIYALIM */
.iphone-x-etc .phone-sample {
    display: flex;
    position: relative;
    flex-direction: column;
    width: 395px;
    height: 832px;
    margin: auto;
    border-radius: 50px;
}
.iphone-x-etc .top-group {
    position: relative;
    width: 45.57%;
    height: 0;
    padding: 0 0 7.595% 0;
    margin: 0 auto -7.595% auto;
    box-shadow: 0 2px 0 -1px rgba(0, 0, 0, .22);
    border-radius: 0 0 20px 20px;
    z-index: 1;
}
.iphone-x-etc .aligner {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0 0 20px 20px;
}
.iphone-x-etc .camera {
    width: 5.56%;
    height: 0;
    padding: 0 0 5.56% 0;
    margin: auto 2px auto auto;
    border-radius: 50%;
}
.iphone-x-etc .sound-output {
    width: 66.6667%;
    height: 0;
    padding: 0 0 3.3337% 0;
    margin: auto auto auto 2px;
    border-radius: 50em;
}
.iphone-x-etc .screen-group {
    width: 375px;
    height: 812px;
    margin: auto;
    background-color: #fff;
    border-radius: 40px;
    overflow: hidden;
}
.iphone-x-etc .device-btn-group {
    position: absolute;
    bottom: 26px;
    left: 50%;
    width: 40%;
    height: 0;
    padding: 0 0 2.535% 0;
    background-color: #000;
    border-radius: 5px;
    transform: translate(-50%, 0);
    opacity: .5;
}
.dark-bezel .phone-sample {
    background-color: #50585e;
    box-shadow: 0 0 10px #000 inset;
}
.dark-bezel .top-group {
    background-color: #50585e;
    background-image: linear-gradient(to bottom, #000 -30%, #51585f 25%);
}
.dark-bezel .camera,.dark-bezel .sound-output {background-color: #000;}

.iphone-x-etc .device-status-bar {padding: 1rem 1.75rem 0 1.75rem;}
.iphone-x-etc .service-provider .provider, .iphone-x-etc .service-provider .fa-wifi, .iphone-x-etc .battery-location .battery-percent {display: none;}
.iphone-x-etc .service-provider .clock,
.iphone-x-etc .battery-location .fa-wifi {
    display: inline-block;
    margin: auto 4px;
}



/*-------------------------------------------------------*/
.afy-plugin-live-preview {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border: none;
    background-color: #fff;
    box-shadow: none;
    overflow: hidden;
    z-index: 1003;
    opacity: 0;
    transition: width ease 300ms;
}
.afy-plugin-live-preview.active {
    width: 380px;
    box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, .33);
    opacity: 1;
}
.afy-plugin-live-preview.iphone-x-etc .phone-sample {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: scale(.75) translate(-50%, -50%);
    transform-origin: left top;
}
.afy-plugin-live-preview.iphone-x-etc .top-group {z-index: 2;}
.afy-plugin-live-preview.iphone-x-etc .device-status-bar {
    position: relative;
    padding: 2px 24px;
    background-color: #fff;
}
.afy-plugin-live-preview.iphone-x-etc .left-indicators {margin: auto auto auto 12px;}
.afy-plugin-live-preview.iphone-x-etc .right-indicators {margin: auto 8px auto auto;}
.afy-plugin-live-preview.iphone-x-etc .device-status-bar .fa {font-size: 12px;}
.afy-plugin-live-preview .web-tamplate-frame {
    width: 100%;
    height: calc(100% - 21px);
    border: none;
}
.afy-preview-btn {
    position: absolute;
    left: .75rem;
    bottom: .75rem;
    width: 40px;
    font-size: 18px;
    text-align: center;
    padding: 10px;
    color: #28a745;
    background-color: #fff;
    border: 1px solid #28a745;
    box-shadow: 0 0 0 4px rgba(40, 167, 69, .3);
    border-radius: 50%;
    cursor: pointer;
    transition: left ease 300ms, transform ease 300ms;
    z-index: 1004;
}
.afy-preview-btn.breathing {animation: breathe_anim 1200ms infinite ease-in-out, rotate_anim 1200ms infinite ease-in-out;}
.afy-preview-btn:hover {transform: scale(1.1);}
.afy-preview-btn:focus,
.afy-preview-btn:active {
    color: #fff;
    background-color: #28a745;
}
.afy-preview-btn::after {
    /* content: ""; */
    position: absolute;
    left: -6px;
    top: 0;
    bottom: 0;
    width: 8px;
    background-color: #fff;
}
.afy-plugin-live-preview.active + .afy-preview-btn {left: 360px;}
@keyframes breathe_anim {
    0% {box-shadow: 0 0 0 0 rgba(40, 167, 69, .3);}
    50% {box-shadow: 0 0 0 4px rgba(40, 167, 69, .3);}
    99% {box-shadow: 0 0 0 0 rgba(40, 167, 69, .3);}
}
@keyframes rotate_anim {
    0% {transform: scale(1);}
    50% {transform: scale(1.1);}
    99% {transform: scale(1);}
}

/* DASHBOARD FOOTER */
.dashboard-footer {
    display: flex;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    /* background-color: #f8f9fa; */
    background: linear-gradient(to bottom, #fff, #f8f9fa);
    box-shadow: 0 0 0 1px rgb(0, 0, 0, .05);
    z-index: 1003;
}
.dashboard-footer .agreement-texts {
    display: flex;
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: auto 0 auto auto;
}
.dashboard-footer .agreement-texts a {
    display: flex;
    color: #6c757d;
    padding: .5rem;
    margin: auto .25rem;
    transition: color ease-in-out 300ms;
}
.dashboard-footer .agreement-texts .btn-icon {
    display: flex;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 0;
    transition: border-color ease-in-out 300ms, border-radius ease-in-out 300ms;
}
.dashboard-footer .agreement-texts .btn-icon::before {margin: auto;}
.dashboard-footer .agreement-texts a:hover {
    text-decoration: none;
    color: #28a745;
}
.dashboard-footer .agreement-texts a:hover .btn-icon {
    border-color: #28a745;
    border-radius: 15px;
}
.dashboard-footer .agreement-texts .title {
    font-size: 12px;
    font-weight: 400;
    margin: auto auto auto .125rem;
}
.dashboard-footer .separator {height: 48px;}
.dashboard-footer .payment-methods {
    margin: auto auto auto 0;
}
.dashboard-footer .payment-methods img {
    width: auto;
    height: 2.25rem;
    padding: .5rem;
    margin: auto .25rem;
    border-radius: .25rem;
}

/* AGREEMENT TEXT IN MODALS */
.agreement-text {color: #6c757d;}
.agreement-text h1, .agreement-text h2, .agreement-text h3, .agreement-text h4, .agreement-text h5, .agreement-text h6 {font-weight: 700;}
.agreement-text h2 {font-size: 20px;}
.agreement-text h3 {font-size: 18px;}
.agreement-text h4 {font-size: 16px;}