@font-face {
    font-family: "Montserrat";
    src: url("./fonts/Montserrat-VariableFont_wght.ttf");
}
@font-face {
    font-family: "Open Sans";
    src: url("./fonts/OpenSans-VariableFont_wdth,wght.ttf");
}
/* Variables */
:root {
    /*** MAIN COLORS ***/
    /* primary color 1*/
    --primary-color-1: #133d73;

    /* primary color 2*/
    --primary-color-2: #fb4d42;

    /* secondary color 1*/
    --secondary-color-1: #ffffff;

    /* secondary color 2*/
    --secondary-color-2: #1d7269;

    /* secondary color 3*/
    --secondary-color-3: #333333;

    /* content background*/
    --main-background: var(--secondary-color-1);
    --dark-background: var(--primary-color-1);

    /* main border*/
    --main-border: #acacac;
    --highlight-border: var(--primary-color-1);

    /* default icon color*/
    --default-icon: var(--secondary-color-2);

    /*** MAIN COMPONENTS COLOR CUSTOMISATION ***/
    /* CTA BUTTON */
    --cta-btn-text: var(--secondary-color-1);
    --cta-btn-bg: var(--secondary-color-2);
    --cta-btn-hover-text: var(--secondary-color-1);
    --cta-btn-hover-bg: var(--secondary-color-2);

    /* SECONDARY BUTTON */
    --secondary-btn-text: var(--secondary-color-3);
    --secondary-btn-bg: var(--secondary-color-1);
    --secondary-btn-border-color: var(--primary-color-1);
    --secondary-btn-hover-text: var(--secondary-color-3);
    --secondary-btn-hover-bg: var(--secondary-color-1);
    --secondary-btn-hover-border-color: var(--secondary-color-2);

    /* DISABLED BUTTON */
    --disabled-btn-text: var(--secondary-color-3);
    --disabled-btn-bg: #e0e0e0;
    --disabled-btn-border-color: var(--main-border);

    /* TEXTS */
    --s-big-header: var(--primary-color-1);
    --s-page-heading: var(--primary-color-1);
    --s-title: var(--secondary-color-3);
    --s-subtitle: var(--secondary-color-3);
    --s-field-caption: var(--secondary-color-3);
    --s-logo-text: var(--primary-color-1);
    --s-caption-or-link: var(--secondary-color-3);
    --s-normal-text: var(--secondary-color-3);
    --s-text-button-text: var(--secondary-color-3);
    --s-menu-text: var(--secondary-color-3);
    --s-small-text: var(--secondary-color-3);
    --placeholder-text: #acacac;
    --s-link-hover: var(--secondary-color-2);
    --s-link-hover-no-underline: var(--secondary-color-2);

    --highlight-text: var(--primary-color-1);
    --light-text: var(--secondary-color-1);
    --info-text: var(--secondary-color-3);

    /* MENU */
    --menu-text: var(--secondary-color-1);
    --menu-bg: var(--primary-color-1);
    --menu-hover-text: var(--primary-color-1);
    --menu-hover-bg: var(--secondary-color-1);

    /* DROPDOWN */
    --dropdown-hover-text: var(--secondary-color-1);
    --dropdown-hover-bg: var(--secondary-color-2);

    /* OTHERS */
    --tab-highlight: var(--secondary-color-2);
    --list-table-header-text: var(--secondary-color-1);
    --list-table-header-bg: var(--primary-color-1);
    --import-file-border: var(--primary-color-1);
    --selected-file-border: var(--primary-color-2);
    --info-bar-bg: #e4f1fa;
    --info-bar-text: var(--primary-color-1);

    /* BORDER RADIUS */
    --border-radius-xs: 4px;
    --border-radius-small: 10px;
    --border-radius-medium: 20px;
    --border-radius-big: 40px;
}

/* App.vue */
#app {
    font-family: "Montserrat", sans-serif;
    color: var(--secondary-color-3);
}

html {
    font-size: 14px;
}

body {
    background: linear-gradient(rgba(19, 61, 115, 0.9), rgba(19, 61, 115, 0.9)),
        url("./img/sign-bg.png") repeat;
}

.s-main-view {
    background: var(--main-background);
    border-radius: var(--border-radius-small);
}
.s-main-view-bg {
    background: transparent;
}

a {
    color: var(--secondary-color-3);
}

a,
a:focus * {
    text-decoration: none;
}

/* borders */
.border-top {
    border-top: 1px solid var(--main-border);
}
.border-bottom {
    border-bottom: 1px solid var(--main-border);
}

/* Application classes */
/* page header*/
.s-page-header-bg {
    background: var(--main-background);
}

/*global font styles className*/
.s-big-header {
    color: var(--s-big-header);
}
.s-page-heading {
    color: var(--s-page-heading);
}
.s-title {
    color: var(--s-title);
}
.s-subtitle {
    color: var(--s-subtitle);
}
.s-field-caption {
    color: var(--s-field-caption);
}
.s-logo-text {
    color: var(--s-logo-text);
}
.s-caption-or-link {
    color: var(--s-caption-or-link);
}
.s-normal-text {
    color: var(--s-normal-text);
}
.s-text-button-text {
    color: var(--s-text-button-text);
}
.s-menu-text {
    color: var(--s-menu-text);
}
.s-small-text {
    color: var(--s-small-text);
}
input::placeholder {
    color: var(--placeholder-text);
}
.s-link-hover:hover,
.s-link-hover:focus {
    color: var(--s-link-hover);
}
.s-link-hover-no-underline:hover *,
.s-link-hover-no-underline:focus * {
    color: var(--s-link-hover-no-underline);
}
/*global colors*/
.s-red {
    color: #fb4d42;
}
.s-yellow {
    color: #ffa500;
}
.s-blue {
    color: #133d73;
}
.s-gray {
    color: #333333;
}
.s-green {
    color: #1d7269;
}

/* radio input*/
.radio input[type="radio"] + .radio-label:before {
    border: 1px solid var(--main-border);
}

.radio input[type="radio"]:checked + .radio-label:before {
    background: var(--default-icon);
}

/* checkbox input */
.checkbox-option .checkmark {
    border-color: var(--main-border);
}
.checkbox-option .checkmark:after {
    border-color: var(--default-icon);
}
.table-checkbox.checkbox-option input:checked ~ span > .checkmark {
    background: var(--list-table-header-bg);
}
.table-checkbox.checkbox-option .checkmark {
    border-radius: var(--border-radius-xs);
}
.table-checkbox.checkbox-option .checkmark:after {
    border-color: var(--secondary-color-1);
    border-width: 0 2px 2px 0;
    height: 14px;
}
.s-hidden-input:checked + .checkbox-option .checkmark {
    background: var(--list-table-header-bg);
}
.s-hidden-input + .checkbox-option .checkmark {
    border-radius: var(--border-radius-xs);
}
.s-hidden-input + .checkbox-option .checkmark:after {
    border-color: var(--secondary-color-1);
    border-width: 0 2px 2px 0;
    height: 14px;
}

/* input number */
.s-input-number-container .input-number,
.s-input-number-container .input-number-decrement,
.s-input-number-container .input-number-increment {
    border-color: var(--main-border);
}
.s-input-number-container .input-number-decrement {
    border-top-left-radius: var(--border-radius-xs);
    border-bottom-left-radius: var(--border-radius-xs);
}
.s-input-number-container .input-number-increment {
    border-top-right-radius: var(--border-radius-xs);
    border-bottom-right-radius: var(--border-radius-xs);
}

/* SearchUser component*/
.search-user .su-input {
    border-color: var(--main-border);
}
.search-user .su-list .su-list-item {
    border-color: var(--highlight-border);
    border-radius: var(--border-radius-medium);
}
.search-user .su-cards {
    border-color: var(--main-border);
    border-bottom-left-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
}
/* SearchUser person card focus style*/
.search-user .su-cards .card-focus {
    background: var(--dropdown-hover-bg);
}
.search-user .su-cards .card-focus .person-card-img,
.search-user .su-cards .card-focus .s-normal-text,
.search-user .su-cards .card-focus .s-small-text {
    color: var(--dropdown-hover-text);
}

/* vue-tel-input */
.vue-tel-input .vti__dropdown .vti__dropdown-list {
    border: 1px solid var(--main-border);
    border-bottom-left-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
}
.vue-tel-input .vti__dropdown .vti__dropdown-list .vti__dropdown-item {
    color: var(--s-normal-text);
    font-size: 0.75rem;
}
.vue-tel-input .vti__dropdown .vti__dropdown-list .highlighted {
    background: var(--dropdown-hover-bg);
    color: var(--dropdown-hover-text);
}
/* ModalOverlay.vue*/
.modal .modal-overlay {
    background: #f8f8f8;
}
.modal .modal-content {
    background: var(--main-background);
    border-radius: var(--border-radius-medium);
}
.modal .modal-header {
    border-color: var(--main-border);
}
.modal .s-input.s-input-error {
    border-bottom: 1px solid #fb4d42;
}
.modal .process-form .process-label {
    border-color: var(--main-border);
    border-radius: var(--border-radius-small);
}
.modal .process-form input[type="radio"]:checked + .process-label {
    background-color: var(--dropdown-hover-bg);
}
.modal .process-form input[type="radio"]:checked + .process-label * {
    color: var(--dropdown-hover-text);
}
.modal .preview-list-item {
    border-radius: var(--border-radius-medium);
}
/* Toast.vue */
.s-toast-message {
    border-radius: var(--border-radius-small);
    border-color: var(--main-border);
}

/* ImportDocuments.vue*/
div.import-document .drag-area {
    border-color: var(--import-file-border);
    border-radius: var(--border-radius-small);
}
div.import-document .drag-area .file-upload-label,
div.import-document .drag-area .file-upload-single-line-label {
    color: var(--highlight-text);
    border-color: var(--highlight-border);
    border-radius: var(--border-radius-medium);
}
div.import-document .drag-area .drag-area-icon {
    color: var(--default-icon);
}

/* PersonCard.vue*/
/* person card on hover style */
.person-card-hover-effect-enable:hover {
    background: var(--dropdown-hover-bg);
}
.person-card-hover-effect-enable:hover .person-card-img,
.person-card-hover-effect-enable:hover .s-normal-text,
.person-card-hover-effect-enable:hover .s-small-text {
    color: var(--dropdown-hover-text);
}

/* SignButton.vue*/
a.sign-button,
button.sign-button {
    border-radius: var(--border-radius-big);
}
.sign-button.s-button-cta {
    background: var(--cta-btn-bg);
    color: var(--cta-btn-text);
}
.sign-button.s-button-cta:hover,
.sign-button.s-button-cta:focus {
    background: var(--cta-btn-hover-bg);
    color: var(--cta-btn-hover-text);
}
.sign-button.s-button-secondary {
    background: var(--secondary-btn-bg);
    color: var(--secondary-btn-text);
    border-color: var(--secondary-btn-border-color);
}
.sign-button.s-button-secondary:hover,
.sign-button.s-button-secondary:focus {
    background: var(--secondary-btn-hover-bg);
    color: var(--secondary-btn-hover-text);
    border-color: var(--secondary-btn-hover-border-color);
}
.sign-button.s-button-disabled {
    background: var(--disabled-btn-bg);
    color: var(--disabled-btn-text);
    border-color: var(--disabled-btn-border-color);
}

/* SignPopup.vue*/
.s-popup .s-popup-content {
    border: 1px solid var(--main-border);
    border-radius: var(--border-radius-small);
}
.s-popup .s-popup-content .s-popup-list-item:hover,
.s-popup .s-popup-content .s-popup-list-item:focus {
    background: var(--dropdown-hover-bg);
    border-radius: var(--border-radius-small);
}
.s-popup .s-popup-content .s-popup-list-item:hover *,
.s-popup .s-popup-content .s-popup-list-item:focus * {
    color: var(--dropdown-hover-text);
}

/* SignPopover.vue*/
.s-popover .s-popover-content {
    border: 1px solid var(--main-border);
    border-radius: var(--border-radius-small);
}

/* SignDropdown.vue*/
.sign-dropdown .selection {
    border-color: var(--main-border);
}
.sign-dropdown .selection + .items {
    border-color: var(--main-border);
    background: var(--main-background);
    border-bottom-left-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
}
.sign-dropdown .items .item-active {
    color: var(--dropdown-hover-text);
    background-color: var(--dropdown-hover-bg);
}

/* TypeToSearch.vue*/
.type-to-search .tts-input {
    border-color: var(--main-border);
}
.type-to-search .tts-options {
    border-color: var(--main-border);
    background: var(--main-background);
}
.type-to-search .tts-options .tts-option-active {
    color: var(--dropdown-hover-text);
    background-color: var(--dropdown-hover-bg);
}
.type-to-search .tts-options .tts-option-active .s-normal-text,
.type-to-search .tts-options .tts-option-active .s-small-text {
    color: var(--dropdown-hover-text);
}
.type-to-search .tts-results .tts-item {
    border-radius: var(--border-radius-small);
    border-color: var(--main-border);
}

/* SingleDocument.vue */
.s-file {
    border-color: var(--import-file-border);
    border-radius: var(--border-radius-small);
}
/* single document drag drop placeholder */
.s-drop-before:before,
.s-drop-after:after {
    border-radius: var(--border-radius-small);
}

/* ExpandedPanel.vue */
.s-expanded-panel {
    border-color: var(--main-border);
    border-radius: var(--border-radius-small);
}
.s-expanded-icon {
    color: var(--default-icon);
}

/* SearchComponent.vue*/
.search-component input.search-input {
    border-color: var(--main-border);
    border-radius: var(--border-radius-big);
}

/* Mainmenu.vue*/
.s-main-menu {
    background: var(--menu-bg);
    border-top-right-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
}
.s-main-menu .nav-link,
.s-main-menu .nav-item {
    color: var(--menu-text);
}
.s-main-menu .nav .nav-link.router-link-active,
.s-main-menu .nav .nav-link:hover,
.s-main-menu .nav .nav-link:focus {
    background: var(--menu-hover-bg);
    color: var(--menu-hover-text);
}
.s-main-menu .nav .nav-header .nav-link.router-link-active:not(:focus),
.s-main-menu .nav .nav-header .nav-link:hover {
    background: var(--menu-bg);
    color: var(--menu-text);
}
.s-main-menu .nav .nav-link-search {
    border-color: var(--main-border);
}
.s-main-menu .nav .nav-link-search:hover {
    background-color: var(--menu-bg);
    color: var(--menu-text);
}
.s-main-menu .nav .nav-link-search input {
    background-color: var(--menu-bg);
    color: var(--menu-text);
}
.s-main-menu .nav .nav-link-profile {
    border-color: var(--main-border);
}

/* MobileMenu.vue*/
.s-main-menu-mobile {
    background: var(--menu-bg);
    color: var(--menu-text);
}
.s-main-menu-mobile .s-main-menu-mobile-title {
    color: var(--menu-text);
}
.s-mobile-nav {
    background: var(--menu-bg);
}
.s-mobile-nav .close-menu,
.s-mobile-nav .nav-link,
.s-mobile-nav .nav-item {
    color: var(--menu-text);
}
.s-mobile-nav .nav-link.router-link-active,
.s-mobile-nav .nav-link:hover,
.s-mobile-nav .nav-link:focus {
    background: var(--menu-hover-bg);
    color: var(--menu-hover-text);
}
.s-mobile-nav .nav-link-search:hover {
    background-color: var(--menu-bg);
    color: var(--menu-text);
}
.s-mobile-nav .nav-link-search input {
    background-color: var(--menu-bg);
    color: var(--menu-text);
}

/* InvitationUserMenu.vue*/
.s-invitation-menu {
    background: var(--menu-bg);
    color: var(--menu-text);
}
.s-invitation-menu .s-normal-text {
    color: var(--menu-text);
}

/* Tabtitle.vue*/
.s-tab .s-tab-item {
    border-bottom: 2px solid var(--main-background);
}
.s-tab .s-tab-item:hover {
    border-bottom: 2px solid var(--tab-highlight);
}
.s-tab .s-tab-item.active {
    border-bottom: 2px solid var(--tab-highlight);
}

/* ListTable.vue*/
.list-table .list-table-body {
    border-color: var(--main-border);
    border-bottom-left-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
}
.list-table .list-table-title {
    background: var(--list-table-header-bg);
    color: var(--list-table-header-text);
    border-top-left-radius: var(--border-radius-small);
    border-top-right-radius: var(--border-radius-small);
}
.list-table .list-table-body .list-item {
    border-color: var(--main-border);
}
.list-table .list-table-body .list-item-extended.list-item .item {
    border-color: var(--main-border);
}

/* Accordion.vue and AccordionItem.vue*/
.s-accordion .s-page-header {
    border-radius: var(--border-radius-small);
}
.s-accordion .s-accordion-content .s-accordion-item {
    background: var(--main-background);
    border-radius: var(--border-radius-medium);
}
.s-accordion .s-accordion-content .s-accordion-item .details {
    border-top: 1px solid var(--main-border);
}
.s-accordion .s-accordion-content .s-accordion-item .input {
    border-color: var(--main-border);
}
.s-accordion .s-accordion-content .s-accordion-item .message-input {
    border-color: var(--main-border);
    border-radius: var(--border-radius-small);
}

/* RequestEdit.vue and RequestEdit components*/
/* basic info */
.request .deadline .today {
    border: 1px solid #133d73;
}
.request .document-list .file-icon-center,
.request .document-list .add-template-icon {
    color: var(--default-icon);
}
.request .basic-info .archive-message-input {
    border-color: var(--main-border);
    border-radius: var(--border-radius-small);
}

/* add people*/
.request .add-people .phrase-item {
    border-color: var(--main-border);
}
.request .add-people .phrase-item:hover {
    background: var(--dropdown-hover-bg);
    border-radius: var(--border-radius-xs);
}
.request .add-people .phrase-item:hover .s-normal-text {
    color: var(--dropdown-hover-text);
}

/* signature layout*/
.request .signature-layout .selected .s-file {
    border-color: var(--selected-file-border);
}

/* send request*/
.request .send-request .request-details {
    border-right: 1px solid var(--main-border);
}

/*RequestAccept.vue and RequestAccept components*/
/* RequestAccept header*/
.request-accept .request-accept-header {
    background: var(--main-background);
    border-bottom: 1px solid var(--main-border);
    border-top-left-radius: var(--border-radius-small);
    border-top-right-radius: var(--border-radius-small);
}
.request-accept .request-accept-header .deadline .today {
    border: 1px solid #133d73;
}
.request-accept .request-accept-header .identity-option {
    border: 1px solid var(--main-border);
}
.request-accept .request-accept-header .message-input {
    border-color: var(--main-border);
    border-radius: var(--border-radius-small);
}
/* RequestAccept document list*/
.request-accept .request-accept-content .info-bar {
    border-radius: var(--border-radius-xs);
}
.request-accept .request-accept-content .metadata-input,
.request-accept .request-accept-content .tts-input {
    border-radius: var(--border-radius-xs);
}
.request-accept .request-accept-content .document-list .file-icon-center {
    color: var(--default-icon);
}
@media (min-width: 1200px) {
    .request-accept .request-accept-content .document-list .selected .s-file {
        border-color: var(--selected-file-border);
    }
}
/* RequestAccept content*/
.request-accept .manager {
    border-color: var(--main-border);
    border-radius: var(--border-radius-medium);
}
.request-accept .request-accept-content .message .message-content {
    background: var(--dark-background);
}
.request-accept .request-accept-content .message .message-name {
    color: var(--light-text);
}
.request-accept .request-accept-content .message .message-text {
    color: var(--light-text);
}
.request-accept .request-accept-content .reply .input {
    border-color: var(--main-border);
    border-radius: var(--border-radius-small);
}
/* SigningProcess.vue and child components*/
.signing-process .legal-entity .legal-entity-item,
.signing-process .legal-entity .edit-legal-entity {
    border-color: var(--main-border);
    border-radius: var(--border-radius-small);
}
.signing-process .legal-entity .le-selected {
    border-color: var(--highlight-border);
}
.signing-process .signature-style .selected-signature-image {
    border-color: var(--main-border);
    border-radius: var(--border-radius-small);
}
.signing-process .signature-style .highlight-method {
    border-color: var(--highlight-border);
}
.signing-process .signature-style .signature-images .signature-image img,
.signing-process .signature-style .signature-images .signature-image .text-image {
    border-color: var(--main-border);
    border-radius: var(--border-radius-small);
}

/* Login views */
.s-login-area-wrapper .login-area {
    background: var(--main-background);
    border-radius: var(--border-radius-small);
}
.s-login-area-wrapper .login .login-input,
.s-login-area-wrapper .password .password-input,
.s-login-area-wrapper .confirm .identity-option {
    border: 1px solid var(--main-border);
}

.s-login-area-wrapper .confirm .confirm-content,
.s-login-area-wrapper .invitation .invitation-content {
    border-radius: var(--border-radius-small);
}
.s-login-area-wrapper .invitation .invitation-input {
    border-color: var(--main-border);
}
.s-login-area-wrapper .language-tab .selection {
    border-top-left-radius: var(--border-radius-small);
    border-top-right-radius: var(--border-radius-small);
}

/* Dashboard.vue*/
.dashboard .panel {
    background: var(--main-background);
    border-radius: var(--border-radius-small);
}
.dashboard .panel .notification {
    background-color: var(--info-bar-bg);
    color: var(--info-bar-text);
    border-radius: var(--border-radius-small);
}
.dashboard .panel .panel-body .stats-panels .box,
.dashboard .panel .panel-body .actions-buttons .button-box {
    border-radius: var(--border-radius-small);
}
.dashboard .panel .panel-body .actions-buttons .button-box-send {
    background: var(--cta-btn-bg);
}
.dashboard .panel .panel-body .actions-buttons .button-box-send:hover,
.dashboard .panel .panel-body .actions-buttons .button-box-send:focus {
    background: var(--cta-btn-hover-bg);
}
.dashboard .panel .panel-body .actions-buttons .button-box-send * {
    color: var(--cta-btn-text);
}
.dashboard .panel .panel-body .actions-buttons .button-box-send:hover *,
.dashboard .panel .panel-body .actions-buttons .button-box-send:focus * {
    color: var(--cta-btn-hover-text);
}
.dashboard .panel .panel-body .actions-buttons .button-box-sign {
    background: var(--secondary-btn-bg);
    border-color: var(--secondary-btn-border-color);
}
.dashboard .panel .panel-body .actions-buttons .button-box-sign:hover,
.dashboard .panel .panel-body .actions-buttons .button-box-sign:focus {
    background: var(--secondary-btn-hover-bg);
    border-color: var(--secondary-btn-hover-border-color);
}
.dashboard .panel .panel-body .actions-buttons .button-box-sign * {
    color: var(--secondary-btn-text);
}
.dashboard .panel .panel-body .actions-buttons .button-box-sign:hover *,
.dashboard .panel .panel-body .actions-buttons .button-box-sign:focus * {
    color: var(--secondary-btn-hover-text);
}
.dashboard .panel .panel-body .stats-panels .box {
    border-color: var(--main-border);
}
.dashboard .panel .panel-body .calendar-wrapper .vc-container {
    border-radius: var(--border-radius-small);
}

.dashboard .panel .panel-body .request-received-color {
    color: #702966;
}
.dashboard .panel .panel-body .request-sent-color {
    color: #236bca;
}
.dashboard .panel .panel-body .request-completed-color {
    color: #1d7269;
}
.dashboard .panel .panel-body .request-aborted-color {
    color: #fb4d42;
}
.dashboard .panel .panel-body .today {
    border: 1px solid #133d73;
    background-color: #ffffff;
}
.dashboard .panel .panel-body .today-content {
    color: #1a202c;
}
.dashboard .panel .panel-body .received {
    background-color: #702966;
}
.dashboard .panel .panel-body .received-content {
    color: #ffffff;
}
.dashboard .panel .panel-body .sent {
    background-color: #236bca;
}
.dashboard .panel .panel-body .sent-content {
    color: #ffffff;
}

/* Request List views */
.request-list .s-page-header .filter-status-icon {
    border-color: var(--main-border);
    color: var(--default-icon);
}
.request-list .s-page-header .filter-status-icon.filter-status-active {
    background: var(--dropdown-hover-bg);
    color: var(--dropdown-hover-text);
}
.request-list .s-content .message-input {
    border-color: var(--main-border);
    border-radius: var(--border-radius-small);
}
.request-list .identity-option {
    border: 1px solid var(--main-border);
}

/* TemplateLists.vue, TemplatesTable.vue DocumentTemplate.Vue, RequestTemplate.vue*/
.template-list .user-filter .filter-icon.filter-active {
    background: var(--dropdown-hover-bg);
    color: var(--dropdown-hover-text);
}
.document-template .s-page-header {
    border-radius: var(--border-radius-medium);
}
.document-template .s-content {
    background: var(--main-background);
    border-radius: var(--border-radius-medium);
}
.document-template .s-content .info .info-input {
    border-color: var(--main-border);
}
.document-template .s-content .info .message-input {
    border-color: var(--main-border);
    border-radius: var(--border-radius-small);
}

.request-template .phrase-item {
    border-color: var(--main-border);
}
.request-template .phrase-item:hover {
    background: var(--dropdown-hover-bg);
    border-radius: var(--border-radius-xs);
}
.request-template .phrase-item:hover .s-normal-text {
    color: var(--dropdown-hover-text);
}
.request-template .document-list .file-icon-center,
.request-template .document-list .add-template-icon {
    color: var(--default-icon);
}

/* ContactLists.vue*/
.contact-list .user-filter .filter-icon.filter-active {
    background: var(--dropdown-hover-bg);
    color: var(--dropdown-hover-text);
}
.contact-list .modal .s-member {
    border-color: var(--main-border);
    border-radius: var(--border-radius-medium);
}

/* Settings.vue and Settings components]*/
.settings-content .profile-information .s-profile-image {
    border-color: var(--main-border);
    border-radius: var(--border-radius-small);
}
.settings-content .profile-information .s-profile-image .upload-button {
    border-color: var(--main-border);
}
.settings-content .profile-information .s-form .s-input {
    border-color: var(--main-border);
}
.settings-content .profile-information .s-info-panel {
    border-color: var(--main-border);
    border-radius: var(--border-radius-small);
}
.settings-content .profile-information .change-password .password-input {
    border-color: var(--main-border);
}
.settings-content .phrases .list {
    border-color: var(--main-border);
    border-radius: var(--border-radius-small);
}
.settings-content .phrases .list .phrase {
    border-color: var(--main-border);
}
.settings-content .phrases .message-input {
    border-color: var(--main-border);
    border-radius: var(--border-radius-small);
}
.settings-content .signatures .signature-list .signature img {
    border-color: var(--main-border);
    border-radius: var(--border-radius-small);
}

/* SignatureCanvas.vue */
div.draw-canvas canvas {
    border-radius: var(--border-radius-small);
    border-color: var(--main-border);
}

/* HelpCenter components*/
.help-center-landing .s-page-header {
    border-color: var(--main-border);
}
.help-center-landing .s-content .s-box {
    border-color: var(--main-border);
    border-radius: var(--border-radius-medium);
}
.help-center-search .s-content .filter-active {
    background: var(--dropdown-hover-bg);
    color: var(--dropdown-hover-text);
}
.help-center-search .criteria .s-expanded-header-block {
    border-color: var(--main-border);
}
.help-center-search .criteria .results .item {
    border-color: var(--main-border);
}
.help-center-list .s-page-header .filter-active {
    background: var(--dropdown-hover-bg);
    color: var(--dropdown-hover-text);
}
.help-center-list .s-expanded-header-block {
    border-color: var(--main-border);
}
.help-center-list .results .item {
    border-color: var(--main-border);
}
.help-center-feedback .text-input {
    border-color: var(--main-border);
}
.help-center-feedback .message-input {
    border-color: var(--main-border);
    border-radius: var(--border-radius-small);
}
.s-support-note .document-list .file-icon-center {
    color: var(--default-icon);
}
.s-edit-support-note .s-page-header {
    border-radius: var(--border-radius-medium);
}
.s-edit-support-note .s-content {
    background: var(--main-background);
    border-radius: var(--border-radius-medium);
}
.s-edit-support-note .text-input {
    border-color: var(--main-border);
}
.s-edit-support-note .article-theme-picture {
    border-color: var(--main-border);
    border-radius: var(--border-radius-small);
}
.s-edit-support-note .article-theme-picture .upload-button {
    border-color: var(--main-border);
}
.s-edit-support-note .document-list .file-icon-center {
    color: var(--default-icon);
}

/* SearchResult.vue*/
.search-results .criteria .s-expanded-header-block {
    border-color: var(--main-border);
}
.search-results .criteria .sub-criteria {
    border-color: var(--main-border);
}
/* 404.vue*/
.not-found .s-content .box {
    border-radius: var(--border-radius-small);
}
/* Reports */
.s-chart-type {
    border-radius: var(--border-radius-medium);
    border-color: var(--main-border);
}
.report-preview .s-content .filter-icon {
    border-color: var(--main-border);
    color: var(--default-icon);
}
.report-preview .s-content .filter-icon.filter-active {
    background: var(--dropdown-hover-bg);
    color: var(--dropdown-hover-text);
}
.report-preview .s-table-preview thead th {
    background: var(--list-table-header-bg);
    color: var(--list-table-header-text);
}
.report-tables .s-table-preview thead th {
    background: var(--list-table-header-bg);
    color: var(--list-table-header-text);
}
/*** NOTE: CUSTOMER SPECIFIC REQUEST WILL BE IN CUSTOM CONFIG STYLE.CSS ***/