.fw-400 {
    font-weight: 400;
}
.card-tmpl {
    padding: 12px 42px 12px 20px;
}
.ctn-card-tmpl {
    display: flex;
    gap: 5px;
}
.icon-tmpl-list {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    border-radius: 50%;
    min-width: 39px;
    height: 39px;
    background-color: var(--color-green-2);
    color: var(--color-white);
}
.title-card-tmpl {
    font-size: 16px;
    font-weight: 400;
    color: #4D4D4F;
    margin-bottom: 0;
    line-height: normal;
}
.txt-card-tmpl {
    font-size: 12px;
    font-weight: 700;
    color: #666667;
    padding-top: 5px;
}
.txt-header {
    color: var(--color-black-1);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.ctn-form-tmpl {
    position: relative;
    padding: 32px 18px 0;
}
.ctn-vw-tmpl {
    margin-top: 20px;
    min-height: 120px;
    display: grid;
    grid-template-columns: 65% 35%;
    gap: 20px;
}
.sec-summernote {
    background-color: transparent;
}
.sec-list-tmpls {
    background-color: transparent;
}
.inp-tmpl-name {
    width: 70%;
    margin-bottom: 32px;
}
.txt-underline {
    color: var(--color-green-1);
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
}
.txt-underline:hover {
    cursor: pointer;
    color: var(--color-hover-bg-primary);
}
.ctn-link-prev {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.txt-tmpl {
    color: var(--color-black-1);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.ctn-summernote {
    margin: 26px 0;
}
.ctn-list-tmpls {
    background-color: transparent;
    border-radius: 8px;
    padding: 16px;
}
.header-list-tmpls {
    background-color: transparent;
    justify-content: space-between;
    align-items: center;
    border: none;
}
.btn-display-list-tmpls {
    padding: 0;
    display: none;
}
.btn-display-list-tmpls:focus {
    box-shadow: none;
    color: var(--color-black-2);
}
.btn-display-list-tmpls:not(.collapsed) {
    color: var(--color-black-2);
    background-color: transparent;
    box-shadow: none;
}
.circle-item {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 7px;
    background-color: var(--color-green-1);
    border-radius: 50%;
}
.body-list-tmpls {
    padding: 32px 0 0 0;
}
.sec-list-tmpls .ctn_search {
    min-width: 100%;
    width: 100%;
}
.list-cards-tmpls {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 100%;
    gap: 12px;
}
.card-lst-tmpls {
    min-height: 67px;
    padding: 12px;
    border-radius: 8px;
    background-color: var(--color-white);
    filter: drop-shadow(0px 4px 15.3px rgba(205, 205, 205, 0.25));
    border: 1px solid var(--color-white);
}
.card-lst-tmpls.active {
    border: 1px solid var(--color-green-4);
}
.card-lst-tmpls .ctn-sec-card {
    display: flex;
    gap: 12px;
}
.card-lst-tmpls .ctn-info-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.card-lst-tmpls .ctn-prev-tmpl {
    display: flex;
    justify-content: space-between;
}
.card-lst-tmpls .txt-tmpl.date {
    color: var(--color-black-2);
}
.ctn-btns-process-mobile {
    display: none;
    margin-top: 12px;
}
.reset-button {
    border: none;
    background: unset;
    box-shadow: unset;
    outline: unset;
}
.height-ctn-list {
    min-height: 360px;
}
.sec-list-tmpls .loader {
    width: 80px;
}
.sec-list-tmpls .ctn_pagination {
    justify-content: flex-end;
}
.sec-list-tmpls .big_tittle {
    font-size: clamp(27px, 1.6vw, 2.5vw);
}
.check_template:hover {
    cursor: pointer;
}
.inp-search-page {
    width: 40px;
    height: auto;
    text-align: center;
    border-radius: 4px;
    outline: none;
    background-color: black;
    color: white;
    border: none;
}
.accordion-button::after {
    content: "\f078" !important;
    font-family: 'Font Awesome 6 Free';
    font-weight: 600;
    font-size: 1rem;
    background-image: none !important;
    color: var(--color-black-2);
    width: auto !important;
    height: auto !important;
}
.accordion-button:not(.collapsed):after {
    color: var(--color-green-1);
}
.label-error {
    color: var(--color-error);
    font-size: 14px;
}
.ctn_pagination {
    margin: 40px 0 0 20px !important;
}
.btn-restore {
    position: absolute;
    top: -18px;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 28px;
    border-radius: 25px;
    background-color: #CBF8CD;
    color: var(--color-green-2);
    border: none;
}
.btn-restore .ctn-body {
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-restore .btn-txt {
    margin: 0;
    color: var(--color-green-2);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.btn-restore .icon-restore {
    font-size: 18px;
}
.ctn-btns-process-web {
    margin-top: 40px;
    display: flex;
    gap: 20px;
}
.btn_page_light.btn-outlined {
    padding: 0 32px;
    width: fit-content;
}
.ctn-valid-inp {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 6px;
    margin-top: 2px;
}
.ctn-valid-inp span {
    color: var(--color-black-1);
    font-size: 1rem;
    font-style: italic;
    font-size: 14px;
}
.ctn-valid-inp svg {
    color: var(--color-green-1);
    font-size: 14px;
}
.spinner-verify {
    color: var(--color-green-1);
    width: 14px;
    height: 14px;
    margin-right: 2px;
    --bs-spinner-border-width: 0.14rem;
}

/* modal actions start */
/* .modal-actions-dialog {
    width: 417px;
}
.modal-actions-content {
    position: relative;
    border-radius: 8px;
    color: var(--color-white);
    border: none;
}
.modal-actions-body {
    padding: 0;
}
.modal-actions-body .content-action {
    margin: 56px 32px 32px 32px;
}
.modal-actions-body .content-successful {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 32px 32px 32px 32px;
    padding: 32px 0;
}
.content-successful img {
    width: 140px;
}
.close-modal-actions {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 20px;
    border: none;
    background-color: unset;
    color: var(--color-black-2);
}
.btn-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    border-radius: 28px;
    box-shadow: unset;
    border: none;
    font-size: 16px;
    font-weight: 700;
    min-width: 140px;
}
.btn-filled {
    background-color: var(--color-green-1);
    color: var(--color-white);
}
.btn-outlined {
    background-color: var(--color-white);
    color: var(--color-green-1);
    border: 1px solid var(--color-green-1);
}
.btn-filled:hover {
    background-color: var(--color-hover-bg-primary);
}
.btn-outlined:hover {
    border-color: var(--color-hover-bg-primary);
    color: var(--color-hover-bg-primary);
}
.modal-actions-body .txt-title {
    color: var(--color-black-1);
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}
.modal-actions-body .txt-body {
    color: var(--color-black-2);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 24px 0 32px 0;
}
.modal-actions-body .ctn-buttons {
    display: flex;
    justify-content: space-between;
} */
/* modal actions end */

/* modal instructive start */
.modal_instructive_dialog {
    max-width: 90vw;
    width: 660px;
    margin: auto;
    height: 100%;
}
.modal_instructive_content {
    padding: 32px 40px 40px;
    border-radius: 8px;
}
.modal_instructive_title {
    color: var(--color-black-1);
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px; /* 114.286% */
}
.list_instructive {
    list-style: none;
    color: var(--color-black-2);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 18.2px */
}
.list_instructive li::before, .cr_green::before {
    content: '';
    position: relative;
    top: 3px;
    display: block;
    width: 12px;
    height: 12px;
    min-width: 12px;
    margin-right: 6px;
    border-radius: 50%;
    background-color: var(--color-green-1);
}
.cr_green::before {
    width: 8px;
    height: 8px;
    min-width: 8px;
    top: 0;
}
.close_icon_instructive {
    width: 32px;
    height: 32px;
    font-size: 20px;
    border: none;
    background: unset;
    margin-left: auto;
    border-radius: 8px;
    color: var(--color-black-2);
}
.btn_page_light {
    background-color: var(--color-white);
    border: 1px solid var(--color-green-1);
    color: var(--color-green-1);
    box-shadow: unset;
}
.btn_page_light:hover {
    background-color: var(--color-white);
    border: 1px solid var(--color-hover-bg-primary);
    color: var(--color-hover-bg-primary);
}
.ctn_list_nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 8px;
}
.list_nav {
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background-color: var(--color-list-nav);
}
.list_nav.active {
    background-color: var(--color-green-7);
}
.list_nav.passed {
    background-color: var(--color-green-1);
}
/* modal instructive end*/

/* modal preview start*/
.modal-dlg-prevw-tmpl {
    background-color: transparent;
    max-width: 100vw;
    width: 55vw;
    height: 100vh;
    margin: 0 auto;
    transition: all 0.5s !important;
}
.modal-ctn-prevw-tmpl {
    background-color: transparent;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
}
.modal-ctn-prevw-tmpl .ctn-prevw-pages {
    width: 100%;
    height: 100%;
    background-color: transparent;
    padding: 36px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 18px;
}
.modal-ctn-prevw-tmpl .prevw-page {
    width: 100%;
    height: auto;
    background-color: transparent;
}
.spinner-prevw {
    color: var(--color-green-3);
    width: 40px;
    height: 40px;
}
#modal_preview_template {
    background-color: rgb(10 10 10 / 50%);
}
.ctn-toolbar-prevw {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 32px;
    display: flex;
    justify-content: center;
    z-index: 9999;
}
.toolbar-prevw {
    display: flex;
    gap: 16px;
    min-width: 180px;
    min-height: 45px;
    background-color: rgb(10 10 10 / 75%);
    border-radius: 50px;
    padding: 0px 20px;
    font-size: 16px;
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
}
.toolbar-show {
    opacity: 1;
}
.toolbar-hide {
    opacity: 0;
}
.toolbar-info {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
}
.toolbar-zoom {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0px;
}
.toolbar-zoom .btn-zoom {
    cursor: pointer;
    width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: transparent;
    color: var(--color-white);
    border: none;
}
.toolbar-zoom .btn-zoom:hover {
    background-color: rgb(119 119 119 / 35%);
}
.toolbar-zoom .btn-zoom:disabled {
    color: var(--color-gray-1) !important;
    background-color: transparent !important;
    box-shadow: 0px 3px 11px #00000000 !important;
}
.toolbar-zoom .btn-zoom:disabled:hover {
    cursor: default !important;
    background-color: transparent !important;
}
/* modal preview end*/

/* CKEditor classes */
.cke_chrome, .cke_dialog_body{
    box-shadow: unset !important;
    border: none !important;
    background-color: var(--color-white) !important;
    box-shadow: 0px 3px 19px var(--color-box-shadow-2) !important;
    border-radius: 11px !important;
}
.cke_reset_all, .cke_reset_all *{
    font: normal normal normal 14px europa !important;
    color: unset !important;
}
.cke_button_on {
    background: var(--color-green-3) !important;
}
a.cke_button_off:hover, a.cke_button_off:focus, a.cke_button_off:active, a.cke_button_disabled:hover, a.cke_button_disabled:focus, a.cke_button_disabled:active {
    background: var(--color-green-3) !important;
} 
.cke_dialog_container{
    padding: 20px 0 !important;
}
.cke_dialog {
    margin: 20px !important;
    display: grid !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}
.cke_dialog_title{
    color: var(--color-black-1) !important;
    font-size: 16px !important;
}
a.cke_dialog_tab{
    color: var(--color-gray-1) !important;
}
a.cke_dialog_tab_selected{
    color: var(--color-green-1) !important;
}
input.cke_dialog_ui_input_text, input.cke_dialog_ui_input_password, textarea.cke_dialog_ui_input_textarea{
    height: 100% !important;
    border: 1.5px solid var(--color-gray-2) !important;
    border-radius: 12px !important;
    outline: none !important;
    padding: 4px 8px 4px !important;
    color: var(--color-gray-1) !important;
}
.cke_dialog_body label{
    display: block !important;
    margin-bottom: 4px !important;
}
a.cke_dialog_ui_button{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 12px 24px !important;
    border-radius: 28px !important;
    box-shadow: unset !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    min-width: 140px !important;
    cursor: pointer !important;
    color: var(--color-green-1) !important;
    border: 1px solid var(--color-green-1) !important;
    width: unset !important;
}
a.cke_dialog_ui_button:hover{
    border-color: var(--color-hover-bg-primary) !important;
    color: var(--color-hover-bg-primary) !important;
    background: none !important;
}
a.cke_dialog_ui_button_ok{
    background-color: var(--color-green-1) !important;
    color: var(--color-white) !important;
    border: none !important;
}
a.cke_dialog_ui_button_ok:hover{
    background-color: var(--color-hover-bg-primary) !important;
    color: var(--color-white) !important;
}
a.cke_dialog_ui_button_cancel{
    background-color: var(--color-white) !important;
    color: var(--color-green-1) !important;
    border: 1px solid var(--color-green-1) !important;
}
a.cke_dialog_ui_button_cancel:hover{
    border-color: var(--color-hover-bg-primary) !important;
    color: var(--color-hover-bg-primary) !important;
}
span.cke_dialog_ui_button{
    cursor: pointer !important;
}
select.cke_dialog_ui_input_select {
    cursor: pointer !important;
    height: 100% !important;
    border: 1.5px solid var(--color-gray-2) !important;
    border-radius: 12px !important;
    outline: none !important;
    padding: 4px 12px 4px !important;
    color: var(--color-gray-1) !important;
}
.cke_dialog_close_button{
    width: 20px !important;
    height: 20px !important;    
    cursor: pointer !important;
    border: none !important;
    background-position: center !important;
    background-size: 20px;
}
.cke_dialog_close_button:hover {
    background-color: transparent !important;
    border-color: transparent !important;
}
.cke_dialog_ui_labeled_content{
    width: 100% !important;
}
.cke_dialog_ui_labeled_content .cke_dialog_ui_input_text, select.cke_dialog_ui_input_select{
    width: unset !important;
}
.cke_dialog_ui_hbox_first, .cke_dialog_ui_hbox_child, .cke_dialog_ui_hbox_last {
    width: 50% !important;
    max-width: 50% !important;
}
.cke_dialog_contents_body{
    width: 100% !important;
    height: auto !important;
}
.txt-link-name .cke_dialog_ui_input_text, 
.txt-link-type select.cke_dialog_ui_input_select,
div.cke_dialog_ui_input_select
{
    width: 100% !important;
}
.url-options .cke_dialog_ui_hbox_first, 
.url-options .cke_dialog_ui_labeled_content,
.url-options .cke_dialog_ui_input_text,
.url-options div select.cke_dialog_ui_input_select{
    width: 100% !important;
}

/*  */

@media only screen and (min-width: 1281px) and (max-width: 1400px)
{
    .card-lst-tmpls .ctn-prev-tmpl {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
}

@media only screen and (max-width: 1280px)
{
    .ctn-vw-tmpl {
        min-height: 120px;
        display: grid;
        grid-template-columns: 100%;
        gap: 20px;
    }
    .ctn-btns-process-web {
        display: none;
    }
    .ctn-btns-process-mobile {
        display: flex;
        gap: 20px;
    }
    .inp-tmpl-name {
        width: 100%;
    }
    .ctn-list-tmpls {
        background-color: var(--color-white);
        filter: drop-shadow(0px 4px 15.3px rgba(205, 205, 205, 0.25));
    }
    .btn-display-list-tmpls {
        display: flex;
    }
    .ctn-form-tmpl {
        padding: 32px 0 0;
    }
    .header-list-tmpls .header-list {
        display: none;
    }
}

@media only screen and (max-width: 992px)
{
    .txt-card-tmpl {
        padding-top: 12px;
    }
    .ctn-card-tmpl {
        gap: 12px;
    }
    .btn-drpdwn:hover {
        background-color: transparent;
    }
    .list-cards-tmpls {
        margin-top: 24px;
    }
    .txt-underline {
        font-size: 14px;
    }
    .ctn-toolbar-prevw {
        display: none;
    }
    .modal-dlg-prevw-tmpl {
        width: 100vw;
    }
    .btn-restore {
        padding: 12px 20px;
    }
    .btn-restore .btn-txt {
        font-size: 14px;
    }
    .btn-restore .icon-restore {
        font-size: 16px;
    }

    /* modal */
    .modal_instructive_content {
        padding: 32px 32px 40px;
    }
    .modal_instructive_dialog {
        width: 560px;
    }
    .modal_instructive_title {
        font-size: 24px;
    }
  /* modal */
}

@media only screen and (max-width: 768px)
{
    .ctn-link-prev {
        justify-content: space-between;
    }
    .ctn-list-tmpls {
        padding: 12px;
    }
    .card-lst-tmpls .ctn-sec-card {
        gap: 14px;
    }
    .card-lst-tmpls .ctn-prev-tmpl {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    .modal-ctn-prevw-tmpl .ctn-prevw-pages {
        gap: 12px;
    }
    .ctn-btns-process-mobile button, .btn_modal_template {
        width: 100% !important;
    }
    .ctn-btns-process-mobile {
        flex-direction: column;
        gap: 12px;
    }
}


@media only screen and (max-width: 600px)
{

    /* CKEditor classes */

    .cke_dialog{
        margin: auto 20px !important;
        display: inline-table !important;
        width: 100% !important;
    }
    .cke_dialog_contents{
        width: 100% !important;
    }
    
    .cke_dialog_footer_buttons{
        padding: 14px !important;
    }
    .cke_dialog_ui_hbox{
        display: grid !important;
        gap: 8px !important;
    }
    a.cke_dialog_ui_button{
        padding: 12px !important;
        min-width: max-content !important;
    }
    .cke_dialog_footer_buttons .cke_dialog_ui_hbox{
        display: flex !important;
    }
    .cke_dialog_tabs{
        position: unset !important;
    }
    .ctn-dialog-char > table{
        width: unset !important;
    }
    .ctn-dialog-char a.cke_specialchar{
        width: 20px !important;
        height: 20px !important;
        padding: 1px !important;
    }
    .cke_dialog .ImagePreviewBox{
        width: 100% !important;
    }
    .cke_dialog_image_url .cke_dialog_ui_hbox_first{
        width: 100%  !important;
        max-width: unset !important;
    }
    div.cke_dialog_ui_input_select{
        width: 100% !important;
    }
    .cke_dialog_ui_labeled_content .cke_dialog_ui_input_text, select.cke_dialog_ui_input_select {
        width: 100% !important;
    }
    .cke_dialog_ui_hbox_first, .cke_dialog_ui_hbox_last, .cke_dialog_ui_select {
        width: 100% !important;
        max-width: unset !important;
    }
    .dialog-img-preview .cke_dialog_ui_hbox_first, .dialog-img-preview .cke_dialog_ui_hbox_last, .dialog-img-preview .cke_dialog_ui_select {
        width: 100% !important;
        max-width: unset !important;
    }
} 

@media only screen and (max-width: 576px)
{
/*     .modal-actions-dialog {
        width: auto;
        margin: 0 20px;
    }
    .modal-actions-body .btn-filled, .modal-actions-body .btn-outlined {
        font-size: 14px;
        width: 100%;
    }
    .modal-actions-body .ctn-buttons {
        flex-direction: column;
        gap: 12px;
    }
    .modal-actions-body .txt-title {
        font-size: 28px;
    }
    .modal-actions-body .txt-body {
        font-size: 14px;
    }
    .modal-actions-body .content-action {
        margin: 56px 12px 24px 12px;
    } */
}

@media only screen and (max-width: 530px){
    .ctn-dialog-char a.cke_specialchar{
        width: 18px !important;
        padding: 1px !important;
    }
    .ctn-dialog-char a.cke_specialchar span{
        font-size: 12px !important;
    }
}

@media only screen and (max-width: 490px){
    .ctn-dialog-char a.cke_specialchar{
        width: 14px !important;
    }
}

@media only screen and (max-width: 430px){
    .ctn-dialog-char a.cke_specialchar{
        width: 12px !important;
    }
    .ctn-dialog-char a.cke_specialchar span{
        font-size: 10px !important;
    }
}

@media only screen and (max-width: 390px){
    .ctn-dialog-char a.cke_specialchar{
        width: 10px !important;
    }
}

@media only screen and (max-width: 360px){
    .ctn-dialog-char a.cke_specialchar{
        width: 8px !important;
        height: 20px !important;
        padding: 1px !important;
    }

}