/*-webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out;*/

body {font-family: "Roboto";}
a {color: #007bff; text-decoration: none; background-color: transparent; transition: 0.3s all ease-in-out; color: var(--theme-color-main);}
a:hover, a:focus {text-decoration: none !important; outline: none !important; -webkit-box-shadow: none; box-shadow: none;}

.main-container {background-color: var(--box-bg-1) !important;}

.btn-general {background-color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 14px; border: 1px solid #dee2e6; color: var(--font-color);}
.btn-general:hover {background-color: #fff; color: var(--theme-color-main);}
.btn-general-colored {background-color: var(--btn-bg); padding: 6px 14px; border-radius: 6px; font-size: 16px; border: 1px solid #dee2e6; color: var(--btn-font-color);}
.btn-general-colored:hover {background-color: var(--btn-bg); color: var(--btn-highlight-font-color);}
.btn-general-sm-colored {background-color: var(--btn-bg); padding: 4px 12px; border-radius: 6px; font-size: 14px; border: 1px solid #dee2e6; color: var(--btn-font-color);}
.btn-general-sm-colored:hover {background-color: var(--btn-bg); color: var(--btn-highlight-font-color);}
.btn-full {width: 100%;}
.text-theme-color {color: var(--theme-color-main); cursor: help;}
a.btn-general {padding: 4px 8px;}

#sidebar {min-width: var(--sidebar-width); max-width: var(--sidebar-width); color: #fff; transition: 0.3s all ease-in-out; position: fixed; background: var(--box-1-bg); margin-top: 58px; margin-left: var(--sidebar-width-neg);
    border-right: 1px solid var(--box-1-border-color);}
#sidebar ul.left-menu-bar {padding: 12px;}
#sidebar.active {margin-left: 0px;}
#sidebar.active ~ .right-container .page-container {margin-left: var(--sidebar-width);}
#sidebar li:has(ul.show) > a i  {color: white;}
#sidebar li:has(ul.show) > a  {background: var(--theme-color-main) !important; color: white;}
#sidebar ul li {font-size: 16px; position: relative; margin-bottom: 4px;}
#sidebar ul li i {margin-left: -24px; position: absolute; top: 14px; color: var(--font-color); transition: 0.3s all ease-in-out;}
#sidebar ul li a {padding: 10px 0 8px 34px; display: block; color: var(--font-color); position: relative; border-radius: 4px; transition: 0.3s all ease-in-out; font-size: 14px;}
#sidebar ul li a:hover {background-color: var(--theme-color-main); color: white;}
#sidebar ul li a:hover > i {color: white;}
#sidebar ul li ul li {margin-bottom: 0px;}
#sidebar ul li ul li a {background-color: transparent !important; padding: 10px 0 8px 26px; margin-right: 12px; border: 1px dashed transparent;}
#sidebar ul li ul li a:hover {color: var(--theme-color-main); background: #fff !important; border-radius: 0px; padding: 10px 0 8px 26px;
    border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-right: 1px dashed; border-top: 1px dashed; border-bottom: 1px dashed;
    margin-right: 12px;}
#sidebar ul li.active a {background-color: var(--theme-color-main);}
#sidebar ul li.active ul li.active a {background-color: white !important; border-radius: 0px; border-top-right-radius: 4px; border-bottom-right-radius: 4px;
    border-top: 1px dashed var(--theme-color-main); border-bottom: 1px dashed var(--theme-color-main); border-right: 1px dashed var(--theme-color-main);
    color: var(--theme-color-main);}
#sidebar ul li.active > a, #sidebar ul li.active > a i {color: white;}
#sidebar ul li > ul {margin-left: 16px; border-left: 1px dashed var(--theme-color-main);}
#sidebar ul li.active > ul {border-left: 1px dashed var(--theme-color-main);}
#sidebar ul li > ul li {font-size: 14px;}

.user-dropdown {position: relative; border-radius: 4px;}
.user-dropdown button {width: 140px; height: 35px; overflow: hidden; background: var(--theme-color-main); border: 1px solid transparent; border-radius: 4px;
    padding-left: 38px; font-size: 14px; color: white; position: relative;}
.user-dropdown button img {height: 100%; background: white; position: absolute; top: 0px; left: 0px;}
.user-dropdown .dropdown-menu {border-color: #d5d5d5; border-radius: 5px; position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(6px, 48px);}
.user-dropdown .dropdown-menu li {border-bottom: 1px solid hsl(var(--black) / 0.03);}
.user-dropdown .dropdown-menu .dropdown-item {display: flex; align-items: center; gap: 10px; padding: 4px 10px; transition: 0.3s all ease-in-out; font-size: 14px;}
.user-dropdown .dropdown-menu .dropdown-icon {width: 18px;}
.user-dropdown .dropdown-caret:after {content: ""; position: absolute; z-index: -1; width: 1rem; height: 1rem; background: #fff !important;
    background: inherit; top: -0.480rem; right: 0.95rem; left: auto; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);
    transform: rotate(45deg); border-radius: 0.125rem; border-width: 1px 0 0 1px; border-style: solid; border-color: #d5d5d5;}

.notifications-dropdown {position: relative;}
.notifications-dropdown .icon {font-size: 18px;}
.notifications-dropdown button {width: 35px; height: 35px; border-radius: 4px; overflow: hidden; border: 1px solid #cbcbcb;}
.notifications-dropdown button img {width: 100%; height: 100%; object-fit: cover;}
.notifications-dropdown .dropdown-menu {border-color: #d5d5d5; border-radius: 5px; position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(16px, 44px); min-width: 250px;}
.notifications-dropdown .dropdown-menu li {border-bottom: 1px solid hsl(var(--black) / 0.03);}
.notifications-dropdown .dropdown-menu .dropdown-item {display: flex; align-items: center; gap: 10px; padding: 4px 10px; transition: 0.3s all ease-in-out; font-size: 14px;}
.notifications-dropdown .dropdown-menu .dropdown-icon {width: 18px;}
.notifications-dropdown .dropdown-caret:after {content: ""; position: absolute; z-index: -1; width: 1rem; height: 1rem; background: #fff !important;
    background: inherit; top: -0.480rem; right: 0.95rem; left: auto; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);
    transform: rotate(45deg); border-radius: 0.125rem; border-width: 1px 0 0 1px; border-style: solid; border-color: #d5d5d5;}
.notifications-dropdown .header {padding-bottom: 4px;}
.notifications-dropdown .header .heading {font-size: 14px; font-weight: 600;}
.notifications-dropdown .header .action {font-size: 12px;}
.notifications-dropdown .footer .action {font-size: 12px; display: block; margin-top: 8px;}
.notifications-dropdown .notification-items {max-height: 200px; overflow: hidden;}
.notifications-dropdown .notification-item {background: #edf2f9; padding: 4px 0px 4px 0px; cursor: pointer; border-top:1px solid #d5d5d5; transition: 0.3s all ease-in-out;}
.notifications-dropdown .notification-item:hover {background: #e1e7ef;}
.notifications-dropdown .notification-item .avatar {padding: 5px 30px;}
.notifications-dropdown .notification-item .content {font-size: 12px; text-align: left; padding:4px 0px 0px 10px; }
.notifications-dropdown .notification-item .content p {margin-bottom: 0px; color: var(--font-color);}
.notifications-dropdown .notification-item .content i {color: var(--theme-color-main); font-size: 10px;}
.notifications-dropdown .notification-item .time {font-size: 10px;}
.notifications-dropdown .notification-item .icon {padding: 5px 6px 5px 6px; color: var(--theme-color-main); border: 1px solid var(--theme-color-main); border-radius: 50px;}
.notifications-dropdown .unread-badge {position: absolute; top: -14px; font-size: 12px; background: red; color: white; padding: 0px 4px; border-radius: 4px; right: -14px;}

#sidebar .dropdown-toggle::after {content: ""; display: block; position: absolute; right: 12px; height: 0.4rem; width: 0.4rem; border-right: 1px solid;
    border-bottom: 1px solid; border-top: 0em solid; border-left: 0em solid transparent; top: 50%; -webkit-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg);
    transition: 0.3s all ease-in-out;}
#sidebar .dropdown-toggle.collapsed::after {transform: translateY(-50%) rotate(-45deg);}

.footer p {padding: 0px 20px; color: var(--font-color); font-size: 14px;}

.navbar {border-bottom: 1px solid var(--box-1-border-color); border-radius: 0; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; 
    padding: 0.5rem 1rem; position: fixed; width: 100%; background: var(--box-1-bg); z-index: 100;}

.nav .nav-link {padding-right: 0; padding-left: 0; display: block; padding: 0.5rem 1rem;}
.nav .nav-item {text-align: center; margin-right: 10px;}
.nav .nav-item:last-child {margin-right: 0px;}
.nav .header-icon-menu-item {text-align: center; margin-right: 10px; border: 1px solid var(--theme-color-main); border-radius: 4px; padding:4px 8px 0px 8px;}

.main-logo {max-width: 210px; padding: 0px 20px; display: block;}
.main-favicon {display: none;}

.right-container {width: 100%; padding: 0; min-height: 100vh; transition: 0.3s all ease-in-out;}

.breadcrumb-wrapper {background-color: var(--theme-color-main); height: 240px; padding: 130px 0px 20px 0px;}
.breadcrumb-wrapper h2 {font-size: 24px; color: #fff; margin:0px 0px 4px 0px;}
.breadcrumb-wrapper p {font-size: 16px; margin-bottom: 6px;}
.breadcrumb-wrapper .left {font-size: 14px; color: #fff;}
.breadcrumb-wrapper .right {font-size: 14px; color: #fff; text-align: right; margin-top: 18px;}
.breadcrumb-wrapper .right button {margin-left: 10px;}

.content-wrapper-form {margin-top: 20px;}
.page-container-form {margin-top: 0px; padding-top: 20px; transition: 0.3s all ease-in-out; background-color: #f1f4f6;}
.content-wrapper-form .branding-logo {max-height: 100px;}
.form-wrapper-outer {background-color: var(--box-1-bg); width: 100%; min-height: 100px; border-radius: 4px; padding: 10px; font-size: 14px; border:1px solid var(--box-1-border-color);}
.form-body-outer {background-color: #f1f4f6;}

.content-wrapper {margin-top: -44px;}
.json-output {background-color: #f5f5f5; border: 1px solid #ddd; padding: 15px; font-family: monospace; font-size: 0.9em; line-height: 1.4;
  white-space: pre-wrap; word-break: break-all; color: #333;}
.create-random-string {cursor: pointer;}

.page-container {margin-top: -60px; padding-top: 20px; transition: 0.3s all ease-in-out; background-color: #f1f4f6;}

.danger-bg {background-color:var(--danger-bg);}
.danger-color {color:var(--danger-color);}
.danger-bg-color {background-color:var(--danger-color);}
.primary-bg {background-color:var(--primary-bg);}
.primary-color {color:var(--primary-color);}
.primary-bg-color {background-color:var(--primary-color);}
.info-bg {background-color:var(--info-bg);}
.info-color {color:var(--info-color);}
.info-bg-color {background-color:var(--info-color);}
.success-bg {background-color:var(--success-bg);}
.success-color {color:var(--success-color);}
.success-bg-color {background-color:var(--success-color);}
.theme-bg-color {background: var(--theme-color-main);}

.dashboard-stats-item-t1 {border-radius: 4px; padding: 10px; margin-bottom: 20px; border: 1px solid var(--box-2-border-color); position: relative; overflow: hidden;}
.dashboard-stats-item-t1 .icon-outside {position: absolute; bottom: -5px; right: -5px; font-size: 3rem;}
.dashboard-stats-item-t1 .content {display: flex; gap: 10px;}
.dashboard-stats-item-t1 .content .text {font-size: 1.25rem;}
.dashboard-stats-item-t1 .content .icon {font-size: 1rem; padding: 0px 2px; border-radius: 4px; color: #f8f9fa; height: 23px; margin-top: 4px; min-width: 26px; text-align: center;}
.dashboard-stats-item-t1 .count {font-size: 2.25rem; font-weight: bold;}

.dashboard-stats-item-t2 {border-radius: 4px; padding: 10px; margin-bottom: 20px; border: 1px solid var(--box-2-border-color); background-image: url(../images/stats-box-bg.png); 
    background-repeat: no-repeat; background-size: contain; background-color: #fff;}
.dashboard-stats-item-t2 .icon-outside {}
.dashboard-stats-item-t2 .content {display: flex; gap: 10px; border-bottom: 1px solid var(--box-1-border-color); margin-bottom: 10px; color: var(--theme-color-main); position: relative;}
.dashboard-stats-item-t2 .content .count {font-size: 2.25rem; font-weight: 700;}
.dashboard-stats-item-t2 .content .icon {font-size: 1.5rem; border-radius: 4px; padding: 2px 6px; color: white; position: absolute; right: 0; top: 6px; text-align: center; width: 40px;}
.dashboard-stats-item-t2 .text {font-size: 1rem; font-weight: 500; color: var(--theme-color-main);}

.dashboard-activity-container {background: var(--box-1-bg); border-radius: 4px; margin-bottom: 20px;}
.dashboard-activity-container .heading {padding: 12px 0px 4px 10px; border-bottom: 1px solid var(--box-1-border-color);}
.dashboard-activity-container .heading h2 {font-size: 1.25rem; color: var(--theme-color-main);}
.dashboard-activity-container .activity-item {display: flex; align-items: center; margin: 0px 10px; border-bottom: 1px solid #ededed; margin-bottom: 10px;}
.dashboard-activity-container .activity-item .avatar {    width: 70px; border: 1px solid #ededed; border-radius: 50px; margin: 10px;}
.dashboard-activity-container .activity-item .content {}
.dashboard-activity-container .activity-item .content .text {font-size: 16px;}
.dashboard-activity-container .activity-item .content .datetime {font-size: 14px;}

.dashboard-recent-container {background: var(--box-1-bg); border-radius: 4px; margin-bottom: 20px;}
.dashboard-recent-container .heading {padding: 12px 0px 4px 10px; border-bottom: 1px solid var(--box-1-border-color);}
.dashboard-recent-container .heading h2 {font-size: 1.25rem; color: var(--theme-color-main);}
.dashboard-recent-container .recent-item {display: flex; align-items: center; margin: 0px 10px; border-bottom: 1px solid #ededed; margin-bottom: 10px;}
.dashboard-recent-container .recent-item .icon {width: 43px; border: 1px solid #ededed; border-radius: 50px; margin: 10px; text-align: center;
    font-size: 18px; padding: 6px; color: var(--theme-color-main);}
.dashboard-recent-container .recent-item .content {}
.dashboard-recent-container .recent-item .content .text {font-size: 16px;}
.dashboard-recent-container .recent-item .content .datetime {font-size: 14px;}

.dashboard-chart-container {background: white; border-radius: 4px; border: 1px solid var(--box-1-border-color); min-height: 400px; margin-bottom: 20px;}
.dashboard-chart-container .chart {padding: 12px;}
.dashboard-chart-container .heading {padding: 12px 0px 4px 10px; border-bottom: 1px solid var(--box-1-border-color);}
.dashboard-chart-container .heading h2 {font-size: 1.25rem; color: var(--theme-color-main);}

.datatable-wrapper {background-color: white; border-radius: 4px; border:1px solid var(--box-1-border-color); overflow: auto;}
.datatable-wrapper .info {display: inline-block; float: left; font-size: 14px; margin: 2px 10px; padding: 2px; color: var(--font-color); font-weight: 600;}
.datatable-wrapper .btn {padding: 0px 5px 0px 5px;}
.datatable-wrapper .dt-layout-row:first-child {display: none !important;}
.datatable-wrapper .dt-layout-row:last-child {padding: 0px 10px 0px 10px; font-size: 14px;}
.datatable-wrapper .controls {text-align: right; padding: 15px 15px 2px 0px;}
.datatable-wrapper .controls select {padding: 4px 4px; border-radius: 4px; border: 1px solid var(--box-1-border-color); color: var(--font-color); font-size: 14px;}
.datatable-wrapper .controls input {padding: 4px 4px; border-radius: 4px; border: 1px solid var(--box-1-border-color); color: var(--font-color); font-size: 14px;}
.datatable-wrapper label {background: #3a57e8; padding: 3px; color: white; border: 1px solid #aaaaaa;}
.datatable-wrapper table {}
.datatable-wrapper th {border-top: 1px solid var(--box-1-border-color); border-bottom: 1px solid var(--box-1-border-color) !important; font-size: 16px; padding: 14px;}
.datatable-wrapper td {font-size: 14px; border: 1px solid var(--box-1-border-color) !important;}
.datatable-wrapper thead {background-color: #fbfbfb;}

div.dt-container {overflow: auto;}
div.dt-container.dt-empty-footer tbody > tr:last-child > * {border-bottom:1px solid var(--box-1-border-color) !important;}
div.dt-container .dt-paging .dt-paging-button {padding: 6px 12px !important; border-radius: 4px !important; border: 1px solid var(--box-1-border-color) !important;}
div.dt-container .dt-paging .dt-paging-button:hover {background: var(--btn-bg) !important; color: #fff !important;}
div.dt-container .dt-paging .dt-paging-button.current {background: var(--btn-bg) !important; color: #fff !important;}
div.dt-container .dt-paging .dt-paging-button.current:hover {background: var(--btn-bg) !important; color: #fff !important;}
.dataTable.stripe > tbody > tr:nth-child(odd) > *, .dataTable.display > tbody > tr:nth-child(odd) > * {}
.dataTable > thead > tr > th, .dataTable > thead > tr > td {padding: 14px; border: 1px solid var(--box-1-border-color);}

.form-wrapper {background-color: var(--box-1-bg); width: 100%; min-height: 500px; border-radius: 4px; padding: 10px; font-size: 14px; border:1px solid var(--box-1-border-color);}
.form-wrapper input, .form-wrapper select {font-size: 14px; padding: 8px;}
.form-wrapper-field-settings {min-height: 310px !important;}
.form .form-group {padding: 4px;}
.form .form-group label {color: var(--font-color); font-weight: 600;}
.form .form-group a {margin: 6px 0px 0px 0px; color: var(--btn-font-color);}
.form .form-group button {margin: 6px 0px 0px 0px; color: var(--btn-font-color);}
.form .form-group select {margin: 6px 0px 0px 0px; color: var(--font-color);}
.form .form-group .form-control {margin-top: 6px; background: #f9f9f9;}
.form .form-group .form-checks {background: #f9f9f9; padding: 6px; border-radius: 4px; border: 1px solid #dee2e6; margin-top: 6px;}
.form .form-group .form-check {display: inline-block; margin: 0px 10px;}
.form .form-group .form-check .form-check-input, .form .form-group .form-check .form-check-label {cursor: pointer; padding: 2px 0px 0px 2px;}
.form .form-group .form-radios {background: #f9f9f9; padding: 8px; border-radius: 4px; border: 1px solid #dee2e6; margin-top: 6px;}
.form .form-group .form-radio {display: inline-block; margin: 0px 10px; cursor: pointer;}
.form .form-group .form-radio .form-radio-input, .form .form-group .form-radio .form-radio-label {cursor: pointer;}
.form .form-group .select2 {margin-top: 6px; border: 1px solid #dee2e6; border-radius: 6px;}
.form .select2-selection {border:0px !important; background: #f9f9f9; padding: 3px 0px 7px 0px;}
.form .form-grouped-fields {padding: 10px; margin:4px 4px; border: 1px solid #dee2e6; border-radius: 4px; background: #f1f4f6; margin-bottom: 20px;}
.form .form-grouped-fields-setting {padding: 10px; border: 1px solid #dee2e6; border-radius: 4px !important; background: #f1f4f6; flex-grow: 1; padding-left: 50px;}
.form .form-grouped-fields .item {padding: 10px; border: 1px dashed #dee2e6; border-radius: 4px; margin-bottom: 10px;}
.form .form-group .input-group .input-group-text {margin: 6px 0px 0px 0px;}
.form .form-group .input-group .input-group-text i {color: var(--font-color);}
.form .form-group .input-group i {color: var(--btn-font-color);}
.form .form-group .input-group .field-setting {color: var(--btn-font-color); background: var(--theme-color-main); border: 0px;}
.form .input-group .field-setting {color: var(--btn-font-color); background: var(--theme-color-main); border: 0px;}
.form .options-container {padding: 10px; margin: 4px; border: 1px dashed var(--box-1-border-color); border-radius: 4px; overflow-x: hidden;
    overflow-y: auto; height: 176px;}
.form .error-small, .form .required-sign {color: red; font-size: 12px;}
.form .error-input {border:1px solid red;}
.overview-container {padding: 10px; margin: 10px 0px; border: 1px solid var(--box-1-border-color); border-radius: 4px; background: #f5f5f5;}
.multi-fields-container {display: flex; padding: 0px 6px; position: relative;}
.multi-fields-container .sort-handle {position: absolute; height: 100%; left: 5px;}
.sort-handle-inner, .sort-handle {cursor: move;}
.add-more, .remove-last {cursor: pointer;}

.form-csv-wrapper {background-color: var(--box-1-bg); width: 100%; min-height: 500px; border-radius: 4px; padding: 10px; font-size: 14px; border:1px solid var(--box-1-border-color);}
.form-csv-wrapper .sheet {padding: 10px; margin:8px 4px; border: 1px solid #dee2e6; border-radius: 4px; background: #f1f4f6; width: 100%;}
.form-csv-wrapper .sheet .jexcel_container {width: 100%; overflow: auto;}
.form-csv-wrapper .sheet .jtabs-content {width: 100%; overflow: auto;}
.form-csv-wrapper .table-main {max-height: 400px; overflow: auto; margin-top: 20px; margin-bottom: 10px; border: 1px solid var(--box-1-border-color);}
.form-csv-wrapper .condition-class {display: none;}
.form-csv-wrapper .download-generation-hide {display: none;}
.form-csv-wrapper .progress-bar {transition: 0.3s all ease-in-out; background: var(--theme-color-main);}

.documents-wrapper {background-color: white; border-radius: 4px; border:1px solid var(--box-1-border-color); padding: 10px;}
.documents-wrapper .search-box {padding: 10px; gap: 10px; align-items: center;}
.documents-wrapper .filter-selects {padding: 10px 0px 0px 0px;}
.documents-wrapper .filter-selects select {width: 82%; float: right;}
.documents-wrapper .filter-buttons ul {gap: 10px; padding: 6px; list-style: none; background: var(--box-2-bg); align-items: center; border-radius: 4px;
    display: flex; margin: 8px 8px; float: right; border:1px solid var(--box-2-border-color);}
.documents-wrapper .filter-buttons ul li {list-style: none; text-align: center; line-height: normal;}
.documents-wrapper .filter-buttons ul li button {background: white; color: var(--font-color); border: 1px solid var(--box-1-border-color); padding: 4px 20px;
    border-radius: 4px; font-size: 14px;}
.documents-wrapper .filter-buttons ul li button.active {background-color: var(--theme-color-main); color: white;}
.documents-wrapper .document-item {margin: 10px 10px; border: 1px solid var(--box-2-border-color); border-radius: 4px;}
.documents-wrapper .document-item figure {text-align: center; padding: 10px; margin: 0px;}
.documents-wrapper .document-item figure img {max-height: 166px; max-width: 100%; border: 0px solid var(--box-1-border-color);}
.documents-wrapper .document-item .data {position: relative; padding: 10px 14px; background-color: var(--box-2-bg);}
.documents-wrapper .document-item .data h2 {font-size: 16px; margin: 0; color: var(--font-color);}
.documents-wrapper .document-item .data p {padding: 0px; margin: 0px; font-size: 12px; margin-top: 4px;}
.documents-wrapper .document-item .data .actions-menu {position: absolute; top: 10px; right: 4px;}
.documents-wrapper .document-item .data .actions-menu .dropdown-item {font-size: 12px;}
.documents-wrapper .document-item .data .actions-menu .dropdown-toggle i {font-size: 20px;}
.documents-wrapper .document-item .data .actions-menu .dropdown-toggle::after {content: unset;}
.documents-wrapper .document-item .data .actions-menu .btn-check:checked+.btn, 
.documents-wrapper .document-item .data .actions-menu .btn.active, .btn.show, 
.documents-wrapper .document-item .data .actions-menu .btn:first-child:active, 
.documents-wrapper .document-item .data .actions-menu :not(.btn-check)+.btn:active {border-color: transparent !important;}

.documents-wrapper .btn-check:checked+.btn, 
.documents-wrapper .btn.active, 
.documents-wrapper .btn.show, 
.documents-wrapper .btn:first-child:active, 
.documents-wrapper :not(.btn-check)+.btn:active {border-color: transparent !important;}

.designer-wrapper {margin-top: 94px; overflow: hidden; width: 100%; height: 2000px;}
.designer-wrapper .controls {background-color: #2d2d2d; height: 100%; /*padding-bottom: 100px;*/}
.designer-wrapper .controls .top {border-bottom: 1px solid #545454;}
.designer-wrapper .controls .top ul {padding: 0px; margin: 0px; display: flex;}
.designer-wrapper .controls .top ul li {list-style: none; display: inline-block; width: 33.33%; text-align: center; padding: 10px 10px 10px 10px; 
    border-right: 1px solid #545454; cursor: pointer; transition: 0.3s all ease-in-out;}
.designer-wrapper .controls .top ul li:hover {background: var(--box-2-bg);}
.designer-wrapper .controls .top ul li:hover a {color: var(--font-color);}
.designer-wrapper .controls .top ul li.active {background: var(--box-2-bg);}
.designer-wrapper .controls .top ul li.active a {color: var(--font-color);}
.designer-wrapper .controls .top ul li a {font-size: 24px;}
.designer-wrapper .controls .top ul li:last-child a {border-right: 0px;}
.designer-wrapper .controls .middle-flex {display: flex; padding:10px 20px; text-align: center;}
.designer-wrapper .controls .middle-flex input {border-radius: 4px; background: white; font-size: 14px;}
.designer-wrapper .controls .middle-flex button {margin-left: 10px;}
.designer-wrapper .controls .middle-template {display: flex; padding:10px 20px; text-align: center;}
.designer-wrapper .controls .middle-template .inactive {background: var(--box-2-bg); color: var(--font-color);}
.designer-wrapper .controls .middle-template .btn-group {width: 100%;}
.designer-wrapper .controls .middle-template button {padding: 6px 6px;}
.designer-wrapper .controls .middle-normal {padding:10px 20px; text-align: center;}
.designer-wrapper .controls .middle-normal input {border-radius: 4px; background: white;}
.designer-wrapper .controls .middle-normal button {margin-left: 10px;}
.designer-wrapper .controls .file-upload-input {display: none;}
.designer-wrapper .controls .bottom {padding: 0px 12px 0px 12px; height: 580px; overflow: auto; scrollbar-width: 10px; scrollbar-color: #2d2d2d;}
.designer-wrapper .controls .bottom::-webkit-scrollbar {width: 10px;}
.designer-wrapper .controls .bottom::-webkit-scrollbar-track {background: #2d2d2d;}
.designer-wrapper .controls .bottom::-webkit-scrollbar-thumb {background-color: darkgray; border-radius: 10px; border: 2px solid #2d2d2d;}

.designer-wrapper .controls .bottom ul {padding: 0px; margin: 0px;}
.designer-wrapper .controls .bottom ul li {list-style: none; display: inline-block; float: left; width: 46%; text-align: center; padding: 24px 0px; border: 1px solid #545454;
    margin: 2%; border-radius: 4px; background: #424242; cursor: pointer; font-size: 12px;}
.designer-wrapper .controls .bottom ul li:hover {background-color: #fff;}
.designer-wrapper .controls .bottom ul li:hover > a {color: var(--theme-color-main);}
.designer-wrapper .controls .bottom ul li a {color: #fff;}
.designer-wrapper .controls .bottom ul li.image {padding: 7px; height: 74px; overflow: hidden; position: relative;}
.designer-wrapper .controls .bottom ul li.image:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.designer-wrapper .controls .bottom ul li.image img {vertical-align: middle; max-height: 100%; max-width: 45px;}
.designer-wrapper .controls .bottom ul .delete-element-btn {content: ''; width: 0; height: 0; border-style: solid; border-width: 0 30px 30px 0;
  border-color: transparent var(--theme-color-main) transparent transparent; right: 0; top: 0; position: absolute;}
.designer-wrapper .controls .bottom ul .delete-element-btn i {position: absolute; left: 16px; top: 2px; color: white; font-size: 12px;}
.designer-wrapper .controls .bottom ul li.background {padding: 7px; height: 74px; overflow: hidden; position: relative;}
.designer-wrapper .controls .bottom ul li.background img {max-height: 58px;/* width: 100%;*/}
.designer-wrapper .controls .bottom ul li.text {padding: 28px 10px; height: 74px; overflow: hidden; position: relative;}
.designer-wrapper .controls .bottom ul li.tag {padding: 28px 10px; height: 74px; overflow: hidden; position: relative;}
.designer-wrapper .controls .bottom ul li.template {padding: 4px; height: 54px; overflow: hidden; position: relative;}
.designer-wrapper .controls .bottom ul li.template:before {content: ""; display: inline-block; height: 100%; vertical-align: middle;}
.designer-wrapper .controls .bottom ul li.template img {vertical-align: middle; max-width: 90%; max-height: 100%;}
.designer-wrapper .controls .bottom ul li.template-portrait {padding: 7px; height: 80px; overflow: hidden; position: relative;}
.designer-wrapper .controls .bottom ul li.template-portrait:before {content: ""; display: inline-block; height: 100%; vertical-align: middle;}
.designer-wrapper .controls .bottom ul li.template-portrait img {vertical-align: middle; max-height: 100%; max-width: 45px;}
.designer-wrapper .controls .bottom ul .view-template-btn {content: ''; width: 0; height: 0; border-style: solid; border-width: 0 30px 30px 0;
  border-color: transparent var(--theme-color-main) transparent transparent; right: 0; top: 0; position: absolute;}
.designer-wrapper .controls .bottom ul .view-template-btn i {position: absolute; left: 16px; top: 2px; color: white; font-size: 12px;}
.designer-wrapper .controls .bottom ul li.no-records {width: 96% !important; color: var(--font-highlight-color);}

.designer-wrapper .canvas-container {height: 2000px; width: 100%; display: flex; justify-content: center; position: relative; background-image: url(../images/dots-bg.png);}
.designer-wrapper .canvas-landscape {width: 1020px; height: 690px; zoom:1; top: 80px;}
.designer-wrapper .canvas-portrait {width: 690px; height: 1020px; zoom:1; top: 146px;}
.designer-wrapper .canvas {text-align: left; display: inline-block; vertical-align: top; border: 2px dashed grey; position: relative;
    background-image: var(--design-background); background-repeat: no-repeat; background-size: cover; background-position: center;}
.designer-wrapper .canvas:after {display: block; width: 100%; height: 100%; text-align: center; color: #999;}
.designer-wrapper .canvas .guide {border-color: blue; border-style: dotted;}
.designer-wrapper .element {width: auto; height: auto; border: 0px solid black; cursor: pointer; position: absolute; overflow: visible; border: 1px dotted transparent;}
.designer-wrapper .element:hover {border: 1px dotted #adadad;}
.designer-wrapper .element img {width: 100%; height: 100%;}
.designer-wrapper .element.selected {background-color: #f5f5f5 !important; border: 1px dotted #adadad;}
.designer-wrapper .element-inner {padding-left:4px; width: auto; height: auto;}

.designer-wrapper .styling-bar {padding: 5px 0px 6px 12px; display: inline-block; width: 526px; visibility: hidden; text-align: center; position: absolute; top: 24px;
    border-radius: 4px; border: 1px solid var(--box-1-bg); background: var(--box-1-bg);}
.designer-wrapper .styling-bar svg {height: 18px; padding: 2px 0px 0px 0px;}
.designer-wrapper .editor-item {display: inline-block; float: left; width: 40px !important; cursor: pointer; background: white; height: 30px;
    margin: 0px 2px; border-radius: 4px; border: 1px solid var(--box-2-border-color);}
.designer-wrapper .editor-item-selected {background: var(--theme-color-main); color: #fff;}
.designer-wrapper .editor-item-selected svg {fill: #fff;}
.designer-wrapper .editor-item-size {padding: 4px; text-align: center; width: 50px !important;}
.designer-wrapper .editor-item-family {padding: 4px; text-align: center; width: 100px !important;}

.editor-wrapper {background-color: var(--box-1-bg); width: 100%; min-height: 500px; border-radius: 4px; padding: 10px; font-size: 14px; border:1px solid var(--box-1-border-color);}
.editor-wrapper .control-left {}
.editor-wrapper .control-left label {font-size: 14px; font-weight: 600; color: var(--font-color);}
.editor-wrapper .control-left button {background: #fafafa; border: 1px solid var(--box-1-border-color); color: var(--font-color);}
.editor-wrapper .control-left select {border: 1px solid var(--box-1-border-color);}
.editor-wrapper .control-left input {border: 1px solid var(--box-1-border-color);}
.editor-wrapper .control-right {}
.editor-wrapper .control-right label {font-size: 14px; font-weight: 600; color: var(--font-color);}
.editor-wrapper .control-right button {background: #fafafa; border: 1px solid var(--box-1-border-color); color: var(--font-color);}
.editor-wrapper .control-right select {border: 1px solid var(--box-1-border-color);}
.editor-wrapper .control-right input {border: 1px solid var(--box-1-border-color);}
.editor-container__editor-wrapper {background: #ffffff;}

.template-fields-list {padding: 0px; border: 1px dotted var(--box-1-border-color); overflow: hidden;}
.template-fields-list li {list-style: none; display: block; border-bottom: 1px solid var(--box-2-border-color); font-size: 12px; padding: 4px 10px 4px 10px; font-style: italic;}

.settings-wrapper {background-color: var(--box-1-bg); width: 100%; min-height: 500px; border-radius: 4px; padding: 10px; font-size: 14px; border:1px solid var(--box-1-border-color);}
.settings-wrapper .tabs {padding: 0px 0px 8px 10px; margin: 0px -10px 6px -10px;}
.settings-wrapper .tabs li {list-style: none; display: inline-block; padding: 0px 4px 2px 4px; margin: 0px 10px;}
.settings-wrapper .tabs li.active {border-bottom: 2px solid var(--theme-color-main);}
.settings-wrapper .tabs li a {color: var(--font-color); text-decoration: none; font-size: 16px;}
.settings-wrapper form {padding: 10px 10px;}
.settings-wrapper .table-main {padding: 10px; margin: 14px 0px 0px 0px; overflow: auto;}
.settings-wrapper .table-main .actions-menu .dropdown-item {font-size: 12px;}
.settings-wrapper .table-main .actions-menu .dropdown-toggle i {font-size: 20px;}
.settings-wrapper .table-main .actions-menu .dropdown-toggle::after {content: unset;}
.settings-wrapper .table-main .actions-menu .btn-check:checked+.btn, 
.settings-wrapper .table-main .actions-menu .btn.active, .btn.show, 
.settings-wrapper .table-main .actions-menu .btn:first-child:active, 
.settings-wrapper .table-main .actions-menu :not(.btn-check)+.btn:active {border-color: transparent !important;}
.settings-wrapper .controls {padding: 10px 10px 0px 10px;}
.settings-wrapper .controls .dropdown, .settings-wrapper .controls-wrapper input {display: inline-block;}
.settings-wrapper .controls .left {padding: 4px 0px; border-radius: 4px;}
.settings-wrapper nav {padding: 0px 10px;}
.settings-wrapper nav ul li a {font-size: 14px;}
.active>.page-link, .page-link.active {background-color: var(--theme-color-main); border-color: var(--theme-color-main); color: #fff !important;}
.page-item .page-link {color: var(--theme-color-main);}

.modal-general .modal-header {background-color: var(--theme-color-main); color: #FFF;}
.modal-general .modal-header .btn-close {color: #FFF !important;}
.modal-default .modal-header {background-color: var(--theme-color-main); color: #FFF;}
.modal-default .modal-header .btn-close {color: #FFF !important;}

.hover-underline-animation {display: inline-block; position: relative;}
.hover-underline-animation::after {content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: -2px; left: 0; background-color: var(--theme-color-main);
  transition: transform 0.25s ease-out;}
.hover-underline-animation:hover::after {transform: scaleX(1);}
.hover-underline-animation.left::after {transform-origin: bottom right;}
.hover-underline-animation.left:hover::after {transform-origin: bottom left;}
.hover-underline-animation.center::after {transform-origin: bottom center;}
.hover-underline-animation.center:hover::after {transform-origin: bottom center;}
.hover-underline-animation.right::after {transform-origin: bottom left;}
.hover-underline-animation.right:hover::after {transform-origin: bottom right;}

.general-toast {z-index: 1000;}

.image-input-wrapper {border: 1px solid #dee2e6; border-radius: 4px; overflow: auto; text-align: center; position: relative;}
.image-input-wrapper img {}
.uploaded-file-container {border: 1px solid #dee2e6; padding: 4px; border-radius: 6px;}
.upload-exist {display: inline-block; font-size: 16px; font-weight: 600; cursor: pointer;}
.remove-uploaded-file {cursor: pointer;}
.file-upload {display: none;}
.file-upload-label {height: 100%; border-right: 1px solid #dee2e6; display: flex; padding: 0px 12px; cursor: pointer; position: 
    absolute; left: 0; background-color: #f9f9f9; text-align: center; align-items: center;}
.table-thumb {width: 30px;}
.btn-table-action {font-size: 12px; border-radius: 0px;}
.all-check, .single-check {cursor: pointer;}
.url-validation-errors {margin: 0px !important;}
.required {color: red;}
.input-group-filter {width: 300px; display: inline-flex;}
.select2 {margin-top: 6px; border: 1px solid #dee2e6; border-radius: 6px; padding: 4px;}
.select2-selection {border:0px !important; background: #f9f9f9; padding: 0px 0px 0px 0px;}
.select2-container--default .select2-selection--single .select2-selection__arrow {top: 4px !important;}
.modal-list-container {border: 1px solid #dee2e6; margin: 6px; padding: 10px; border-radius: 4px;}
.modal-list-container .item {display: block; background: var(--box-2-bg); border: 1px solid var(--box-1-border-color); border-radius: 4px; overflow: auto; position: relative; padding: 8px;}
.modal-list-container .item button.edit {position: absolute; right: 4px; top: 4px;}
.modal-list-container .item button.delete {position: absolute; right: 46px; top: 4px;}

.ui-draggable-container {position: absolute; outline: 1px dashed #cccccc; background-color: rgba(255, 255, 255, 0.5); box-sizing: border-box; opacity: 0.9;}
.ui-draggable-clone {visibility: visible !important;}
.ui-draggable-hidden {visibility: hidden;}
.ui-rotatable-handle {height: 16px; width: 16px; cursor: pointer; background-image: url(../images/rotate.png); background-size: 100%; left: 2px; bottom: 2px; position: absolute; top: 0;}
.smart-guide {position: absolute; border-color: #ff4aff; border-style: solid; border-width: 0px; z-index: 1; box-sizing: border-box; min-height: 1px; min-width: 1px;}
.smart-guide.guide-x {height: 1px; border-top-width: 1px;}
.smart-guide.guide-y {width: 1px; border-left-width: 1px;}
.element-options {gap: 7px; left: 50%; top: -32px; opacity: 0; display: flex; margin-bottom: 5px; visibility: hidden;
    position: absolute; align-items: center; justify-content: center; transform: translate(-50%, 0); background: #f5f5f5 !important;
    padding: 2px; border-radius: 4px;}       
.element-options.element-options-active {opacity: 1; height: auto; visibility: visible;}
.element-options a {width: 24px; height: 24px; display: flex; font-size: 12px; color: #585858; border-radius: 50%;
    align-items: center; position: relative; justify-content: center;}
.element-options a svg {display: block; width: 24px; height: 24px;}
.element-option-tooltip-text {left: 50%; opacity: 0; bottom: 100%; height: 30px; color: #fff; display: flex; padding: 0 10px; visibility: hidden;
position: absolute; white-space: nowrap; border-radius: 4px; margin-bottom: 5px; transform: translate(-50%, 0);
background: rgba(0, 0, 0, 0.8); font: 500 0.75rem / 1.8333333333em "SF Pro Text"; font-size: 16px;}
.element-option-edit-textarea {border: 0px; width: 100%; height: 100%; padding: 0; background-color: #f5f5f5;}
.element-options a:hover .element-option-tooltip-text {opacity: 1; visibility: visible;}
.loader {color: var(--font-highlight-color); text-align: center; margin-top: 10px; font-size: 50px;}
.loader2 {color: var(--font-highlight-color); text-align: center; margin-top: 6px; font-size: 30px;}

.file-upload {display: none;}
.custom-file-upload {border: 1px solid #ccc; display: inline-block; padding: 6px 12px; cursor: pointer;}

.subscription-renew-features {padding: 0px; border-top: 1px solid #dee2e6; margin-top: 12px;}
.subscription-renew-features li {list-style: none; display: block; border-left: 1px solid #dee2e6; border-right: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; padding: 4px;}
.subscription-status {background: var(--theme-color-main); padding: 1px 8px; margin-left: 10px; border-radius: 4px; color: white;}

.dd {position: relative; display: block; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 20px;}
.dd-list {display: block; position: relative; margin: 0; padding: 0; list-style: none;}
.dd-list .dd-list {padding-left: 30px;}
.dd-collapsed .dd-list {display: none;}
.dd-item, .dd-empty, .dd-placeholder {display: block; position: relative; margin: 0; padding: 0; min-height: 20px; font-size: 13px; line-height: 20px;}
.dd-handle:hover {color: #cccccc; background: #fff;}
.dd-item > button[data-action="collapse"]:before {content: '-';}
.dd-placeholder {margin: 5px 0; padding: 0; min-height: 30px; background: white; border: 1px dashed #cccccc; box-sizing: border-box; -moz-box-sizing: border-box;}
.dd-item > button:before {content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0;}
.dd-dragel {position: absolute; pointer-events: none; z-index: 9999;}
.dd-dragel > .dd-item .dd-handle {margin-top: 0;}
.dd-dragel .dd-handle {-webkit-box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1); box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1);}
.dd-handle {
    display: block;
    height: 34px;
    margin: 5px 0;
    padding: 6px 10px;
    color: #333;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid #CCC;
    background: #F6F6F6;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.dd-item > button {
    display: block;
    position: relative;
    cursor: pointer;
    float: left;
    width: 25px;
    height: 20px;
    margin: 7px 0;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    border: 0;
    background: transparent;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    font-weight: bold;
}
.dd-empty {
    margin: 5px 0;
    padding: 0;
    min-height: 30px;
    background: #f2fbff;
    border: 1px dashed #b6bcbf;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 1px dashed #bbb;
    min-height: 100px;
    background-color: #e5e5e5;
    background-image: -webkit-linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%, white), -webkit-linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%, white);
    background-image: -moz-linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%, white), -moz-linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%, white);
    background-image: linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%, white), linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%, white);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
}

.note-toolbar .note-btn {color: #646464 !important;}
.ck-content p {margin-top: 0px; margin-bottom: 0px;}

@media (max-width: 2733px) {
    .designer-wrapper .canvas-portrait {zoom:0.8; top: 100px;}
}
@media (max-width: 2050px) {
    .designer-wrapper .canvas-portrait {zoom:0.80; top: 100px;}
}
@media (max-width: 1822px) {
    .designer-wrapper .canvas-landscape {zoom:1; top: 80px;}
    .designer-wrapper .canvas-portrait {zoom:0.70; top: 110px;}
}
@media (max-width: 1708px) {
    .designer-wrapper .canvas-landscape {zoom:0.95; top: 80px;}
    .designer-wrapper .canvas-portrait {zoom:0.65; top: 120px;}

    .designer-wrapper .controls .bottom {height: 580px;}
}
@media (max-width: 1518px) {
    .designer-wrapper .canvas-landscape {zoom:0.80; top: 100px;}
    .designer-wrapper .canvas-portrait {zoom:0.55; top: 150px;}

    .designer-wrapper .controls .bottom {height: 500px;}
}
@media (max-width: 1367px) {
    .designer-wrapper .canvas-landscape {zoom:0.72; top: 110px;}
    .designer-wrapper .canvas-portrait {zoom:0.48; top: 170px;}

    .designer-wrapper .controls .bottom {height: 430px;}
}
@media (max-width: 1242px) {
    .designer-wrapper .canvas-landscape {zoom:0.55;}
    .designer-wrapper .canvas-portrait {zoom:0.42; top: 210px;}

    .designer-wrapper .controls .bottom {height: 430px;}
}

@media (max-width: 1093px) {
    .designer-wrapper .canvas-landscape {zoom:0.5;}
    .designer-wrapper .canvas-portrait {zoom:0.35; top: 210px;}

    .designer-wrapper .controls .bottom {height: 430px;}
}
@media (max-width: 991.98px) {

    .main-logo {display: none;}
    .main-favicon {display: block; margin-right: 10px; height: 36px;}
    .page-container {min-width: 100%;}

    .breadcrumb-wrapper {height: 286px;}
    .breadcrumb-wrapper .right {text-align: left; margin-top: 0px;}
    .breadcrumb-wrapper .right .btn {margin-right: 10px; margin-left: 0px;}
    .breadcrumb-wrapper p {text-align: left;}

    .datatable-wrapper .controls {text-align: left;}
    .datatable-wrapper .controls input {margin:10px 10px 0px 10px;}
    .datatable-wrapper .controls select {margin:10px 10px 0px 10px;}

    .documents-wrapper .filter-buttons ul {float: left;}

    .designer-wrapper .controls {width: 100%; height: 308px;}
    .designer-wrapper .controls .bottom {max-height: 182px;}

    .notifications-dropdown .dropdown-menu {min-width: 200px;}
    .notifications-dropdown .notification-item .avatar {padding: 2px 0px 0px 25px;}
    .notifications-dropdown .notification-item .content {padding: 4px 8px 0px 10px;}

    .designer-wrapper .canvas-landscape {zoom:0.35;}
    .designer-wrapper .canvas-portrait {zoom:0.3; top: 200px;}
    .designer-wrapper .styling-bar {top: 16px; zoom:0.5;}

    .designer-wrapper .controls .bottom {height: 430px;}
}

@media (max-width: 911.98px) {
    .designer-wrapper .canvas-landscape {zoom:0.5;}
    .designer-wrapper .canvas-portrait {zoom:0.35; top: 210px;}
}