.sf_tabs_visibility .el-tabs__nav .is-disabled {
    display: none;
}
* {
    word-break: keep-all;
}
.select2 {
    position: relative;
    overflow: hidden;
    display: block;
    margin-bottom: 12px;
    width: auto;
    height: auto;
    border-bottom: 0;
    border-radius: 10px;
    font-size: 14px;
}
.select2 i.toggle {
    position: absolute;
    z-index: 4;
    right: 1.5em;
    top: 1.6em;
    color: #ccc
}
.select2 .title,
.select2 .placeholder {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 0.3rem;
    background: rgba(255, 255, 255, 1);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
}
.select2 > label > input {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    cursor: pointer;
}


.select2>label>input:checked ~i.toggle.icon-plus {
    display: none;
}
.select2>label>input:checked ~i.toggle.icon-minus {
    display: block;
}
.select2>label>input:not(:checked) ~i.toggle.icon-minus {
    display: none;
}
.select2>label>input:not(:checked) ~i.toggle.icon-plus {
    display: block;
}
.select2>label>input:not(:checked) ~label.option input:not(:checked)~.title {
    display: none !important;
}

.select2>label>input:disabled {
    cursor: no-drop;
}

.select2 label > span.placeholder {
    position: relative;
    z-index: 0;
    display: inline-block;
    width: 98%;
    height: auto;
    border-top: 0;
}
.select2 label.option {
    display: block;
    overflow: hidden;
    z-index: 1;
    width: 100%;
    transition: all 1s ease-out;
}
.select2 label.option span.title {
    position: relative;
    z-index: 2;
    transition: background 0.3s ease-out;
}
.select2 label.option span.title i.icon {
    padding-right: 8px;
    color: rgba(146, 168, 209, 1);
}
.select2 label.option span.title:hover {
    color: #fff;
    background: rgba(146, 168, 209, 0.5);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
}

.select2 label.option input {
    display: none;
}
.select2 label.option input:checked~span.title {
    position: absolute;
    display: block;
    z-index: 1;
    top: 0;
    font-size: 12px;
    background: #fff;
    border-top: 0;
    box-shadow: none;
    color: inherit;
    width: 100%;
}
.select2 label.option input:disabled~span.title {
    background: #f9f9f9 !important;
    color: #aaa;
}
.select2 label.option input:disabled~span.title:hover {
    color: #aaa;
    background: none;
    cursor: no-drop;
}

/******************************************/
/* @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); */
@import url("/public/library/fonts_google_Poppins.css");
* {
        font-family: Inter var,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
.el-form-item__label{
    font-weight: 500;
    font-size: 14px;
    color: rgb(55 65 81);
    padding-bottom: 0px !important;
}
.el-input__inner{
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
}
.el-upload-dragger {
    width: 100%;
}
.upload-is-disabled .el-upload{
    cursor: not-allowed;
}
.upload-is-disabled .el-upload-dragger{
    cursor: not-allowed;
    background-color: #E7E7E8D4;
}
.el-upload--text {
    width: 100%;
}
.region-container {
   position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    background-color: rgba(0, 0, 0, 0.7);
    background-color: transparent;
    z-index: 1999;

    cursor: crosshair;
    overflow: hidden !important;
    display: none;
}
.region-container-all {
  height: 100%;
  overflow-y: scroll;
}
.region-container-overlay {
    position: absolute;
    top: 0rem;
    left: 0;
    width: 100%;

    /* background-color: red; */
    z-index: 2500;
    cursor: crosshair;

    display: none;
}
.hide__region {
    z-index: 2000;
    position: absolute;
    border: 4px solid red;
    opacity: 1 !important;
    display: block;
}

@media only screen and (min-width: 539px) {
    .filterlarge {
        display: none !important;
    }
    .hidden-sm-and-up-custom {
        display: none !important;
    }
}
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: inline-block;
    width: 8px;
    height: 8px;
    cursor: pointer;
    background:
      linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,#C0C4CC 45%,#C0C4CC 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%),
      linear-gradient(135deg, transparent 0%,transparent 43%,#C0C4CC 45%,#C0C4CC 55%,transparent 57%,transparent 100%);
  }
/* @media only screen and (max-width: 538px) {
    .hidden-xs-only-custom {
        display: none !important;
    }
    thead th:first-of-type {
        padding: 1px !important;
    } 
    .el-table td:first-of-type {
        padding: 0px  !important;
        height: auto  !important;
    }
    table.el-table__body td:first-of-type >.cell>div{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }
    table.el-table__body td:first-of-type >.cell>div>div:first-of-type{
        width: 80%;
        padding: 2px;
    }
    table.el-table__body td:first-of-type >.cell>div>div:nth-of-type(2){
        margin-right: 10px !important;
        display: flex;
        align-items: center;
    }
    .SF_HW_mobile_body .el-table__body{
        margin-bottom: 2rem;
    }
    .el-table__empty-block{
        width: auto !important;
    }
    .el-table__fixed{
        display: none;
    }
    .el-table__fixed-right{
        display: none;
    }
    .el-step__main {
        display: none;
    }
    .filtermini {
        display: none !important;
    }
    .filterlarge {
        display: block !important;
    }

    .progress {
        padding: 2%;
    }

    .el-steps {
        background: #F9F9F9;

        margin: 0 0 0 !important;
    }

    .el-step.is-horizontal .el-step__line {
        background: repeating-linear-gradient(to right,#C0C4CC 0,#C0C4CC 5px,transparent 5px,transparent 7px);
        left: 5px;
        right: 1px;
    }

    .el-step:last-of-type.is-flex {
        max-width: 100% !important;
        display: grid !important;

    }

    .el-step.is-horizontal:not(:last-child) .is-wait .el-step__icon {
        display: none;
    }
    .el-step.is-horizontal:not(:first-child) .is-success .el-step__icon {
        display: none;
    }
    .cell:empty {
        display: none;

    }
    .is-leaf:empty {
        display: none;

    }

    table {
        border: 1px solid #ccc;
        border-collapse: collapse;
    }
    .el-table__header {
        width: 100% !important;
    }

    colgroup {
        display: none;
    }
    td,
    th {
        display: block;
        border: none;
        border-bottom: 0 solid #eee;
        position: relative;
    }
    .el-table--scrollable-x .el-table__body-wrapper {
        overflow-x: auto;
    }
    .el-table__header-wrapper {
        display: block;
        width: 90% !important;
        margin: 10px;
    }

    table.el-table__body {
        width: 100% !important;
        max-width: 100%;
        margin-bottom: 0;
        border: 0;
        border-collapse: collapse !important;

    }
    table.el-table__body tr {
        border: 1px solid #ccc;
        margin-top: 4%;
        border-radius: 7px;
        padding: 0 !important;
        width: 100% !important;
    }
    table.el-table__body td:first-child {
        border: 3px solid #aaa;
        margin-top: 1%;
        border-radius: 10px;
    };


} */
.selectSteps {
    min-width: 220px;
    min-height: 40px;
    margin: auto;
    border-radius: 9px;
    box-shadow: 0 1em 2em -1.5em rgb(0 0 0 / 50%);
}

.el-row--flex {
    flex-wrap: wrap !important;
}
.app-name {
    font-size: 25px;
    text-align: center;
    margin-bottom: 50px;
}
header {
    box-shadow: rgba(0, 0, 0, 0.03) 0 2px 0 0;
}
a {
    text-decoration: none;
}
body {
    margin: 0 ! important;
    background-color: rgb(243 244 246 / 1);
}
#header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: white;
}
#app {
    padding: 10px 30px;
    position: relative;
}
.el-drawer {
    width: 50% !important;
}
.max-width-4 {
    /* max-width: 82rem; */
    margin: auto;
}
nav {
    height: 100%;
    display: flex;
    align-items: center;
}
.itemName {
    color: #D1D0D0;
}
.image__:focus-within {
    background-color: rgba(255, 255, 255, 0.8) !important;
}
.nav-ico {
    color: #797979;
    font-size: 30px;
    cursor: pointer;
}
.right-header-el {
    margin-left: auto;
    order: 2;
}
.el-collapse {
    border-top: 1px solid #EBEEF5;
    border-bottom: unset;
    margin: 15px 0;
}
.el-collapse-item__wrap{
    border-bottom: unset;
}
.el-collapse-item__header{
    padding: 0px 0px 0px 0px;
    font-size: 14px;
    border-bottom: unset;
}
.el-collapse-item__content {
    padding: 30px 0px 0 0px;
    font-size: 13px;
    color: #303133;
    /* line-height: 1.769230769230769; */
    border-top: 1px solid #DCDFE6;
}
.shadowed {
    box-shadow: 0 0 11px 0 #E3E3E3;
    padding: 5px 10px 10px;
    background-color: white;
    margin: 15px 0;
    border-radius: 5px;
}
.fixed {
    box-shadow: 0 0 11px 0 #E3E3E3;
    padding: 10px !important;
    background-color: white;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    margin: auto !important;
}
.navigation-stick {
    position: sticky;
    top: 70px;
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 11px 0 #e3e3e3;
    border-radius: 10px;
}
.navigation-stick .el-divider__text {
    background-color: white !important;
    font-size: 15px;
}
.shadowed .el-divider__text {
    background-color: white !important;
    font-size: 15px;
}
.el-menu--horizontal > .el-menu-item {
    height: 75px !important;
    line-height: 75px !important;
}
.el-menu--horizontal>.el-menu-item.is-active {
    font-weight: 600;
}
.el-menu--horizontal > .el-submenu .el-submenu__title {
    height: 75px !important;
    line-height: 75px !important;
}
.right {
    text-align: right;
}
.left {
    text-align: left;
}
.center {
    text-align: center;
}
.el-divider__text {
    background-color: #fcfcfc;
    font-size: 15px;
}
.image {
    width: 50%;
    display: block;
    margin: auto;
}
.el-upload-list__item-name {
    height: 22px;
}
.el-table {
    margin-bottom: 18px;
}
.el-table__empty-block {
    height: auto !important;
}
.el-steps {
    /* max-width: 600px;*/
    margin: auto auto 20px !important;
}
.el-radio, .el-checkbox{
    padding-bottom: 9px;
}
.el-button {
    margin-bottom: 10px;
}
.el-step__title {
    line-height: normal;
}
.el-input-number__decrease,
.el-input-number__increase {
    bottom: 1px;
}
.el-input-number__decrease > i,
.el-input-number__increase > i {
    padding-top: 10px;
}
thead th {
    background-color: #f5f7fa ;
}
.table-fix-filter-height .el-table{
    max-height: none !important;
}

.txt-right {
    text-align: right;
}
.txt-center {
    text-align: center;
}


.StepProgress {
    position: relative;
    padding-left: 45px;
    list-style: none;
    cursor: pointer;
}
.StepProgress::before {
    display: inline-block;
    content: '';
    position: absolute;
    top: 0;
    left: 15px;
    width: 10px;
    height: 100%;
    border-left: 2px solid #CCC;
}
.StepProgress-item {
    position: relative;
    counter-increment: list;
}
.StepProgress-item:not(:last-child) {
    padding-bottom: 20px;
}
.StepProgress-item::before {
    display: inline-block;
    content: '';
    position: absolute;
    left: -30px;
    height: 100%;
    width: 10px;
}
.StepProgress-item::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: -37px;
    width: 12px;
    height: 12px;
    border: 2px solid #CCC;
    border-radius: 50%;
    background-color: #FFF;
}
.StepProgress-item.is-done::before {
    border-left: 2px solid #C0C4CC;
}
.StepProgress-item.is-done::after {
    content: "✔";
    font-size: 10px;
    color: #FFF;
    text-align: center;
    border: 2px solid #C0C4CC;
    background-color: #C0C4CC;
}
.StepProgress-item.current::before {
    border-left: 2px solid #C0C4CC;
}
.StepProgress-item.current::after {
    content: counter(list);
    padding-top: 1px;
    width: 19px;
    height: 18px;
    top: -4px;
    left: -40px;
    font-size: 14px;
    text-align: center;
    color: #C0C4CC;
    border: 2px solid #C0C4CC;
    background-color: white;
}
.StepProgress strong {
    display: block;
}
.iconsTasksHeader {
    margin-right: 15px;
}

.el-drawer__body {
    padding: 0;
}
.el-drawer__header {
    padding-bottom: 16px;
}

input:disabled {
    background-color: #393D44 !important;
    background-color: #393D44D4 !important;
    background-color: #E7E7E8D4 !important;

    color: #fff !important;
    color: #575757 !important;
    color: #707275 !important;
    border: 1px double #C5C7CA6B !important;
}
.el-dialog {
    width: 30%;
}
@media only screen and (max-width: 900px) {
    .el-dialog {
        width: 50% !important;
    }
}
@media only screen and (max-width: 600px) {
    .el-dialog {
        width: 100% !important;
    }
}
.el-menu {
    border: 0;
}
.el-table .cell {
    text-align: left;
}
.card__content {
    display: flex;
}

.media__media img {
    width: 100%;
    height: 100%;
}
.SF_card {
    box-sizing: border-box;
    /* height: 100%; */
}
.SF_card .el-card__body {
    /* height: 100%; */
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
    /* text-align: ; */
}
.dataview.vertical {
    display: grid;
}

.dataview.horizontal {}
.badge-container {
    position: relative;
    width: 100%;
}
.badge-container .el-badge {
    z-index: 99;
    position: absolute;
    right: -0.5rem;
    top: -0.5rem;
}

/** mlsùldf  */


.video-js {
    ;
    /* width: 100%; */
}


video {
    height: auto;
    width: auto;
}
/**  */

.plyr__video-embed {
    width: 100%;
}
.plyr__video-embed iframe {
    position: relative
}

.jumbotron {
    box-sizing: border-box;
    /* width: 100%;
    min-height: 30vh; */
    display: flex;
    flex-direction: column;
    padding: 3rem;
    background-size: cover;
}


.card-1 {
    width: 100%;
    height: 7rem;

    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-auto-rows: 2fr 3fr;


    row-gap: 8px;
    column-gap: 15px;

    padding: 1rem;
}

.card-1-content,
.card-2-content {
    height: 100%;
    width: 100%;

    background-color: #dfeaf4;
    display: flex;
    align-items: center;
    padding: 0.3rem;

    color: #00519980;
}
.card-1-content:nth-child(1) {
    grid-row: 1 / span 2;
    grid-column: 1 / span 1;

    justify-content: center;

    font-size: 2rem;
}
.card-1-content:nth-child(2) {
    grid-row: 1 / span 1;
    grid-column: 2 / span 1;

    padding-left: 1rem;
    font-size: 1rem;

}
.card-1-content:nth-child(3) {
    grid-row: 2 / span 1;
    grid-column: 2 / span 1;

    padding-left: 1rem;

    font-size: 0.8rem;
}


.card-2 {
    width: 100%;
    height: 12rem;

    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 2fr 1fr 1fr;


    row-gap: 8px;
    column-gap: 15px;

    padding: 1rem;
}


.card-2-content:nth-child(1) {
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;

    justify-content: center;

    font-size: 2rem;
}
.card-2-content:nth-child(2) {
    grid-row: 2 / span 1;
    grid-column: 1 / span 1;

    padding-left: 1rem;
    font-size: 1rem;
}


.fb-form-select .el-tag {
    padding: 0.4rem 1rem 0.4rem 2rem;
    margin-left: -2rem;

    height: 2rem;
    border-radius: 0;
}


.fb-description {
    font-size: 1.1rem;
}
.fb-form-header > .title {
    font-size: 1.4rem;
    font-weight: bold;

    white-space: pre; /* CSS2 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap; /* HP printers */
    white-space: -o-pre-wrap; /* Opera 7 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word; /* IE */
}


.ghx-stat-fields .el-tag--error,
.fb-tag .el-tag--error,
.fb-form .el-tag--error,
.fb-form .el-tag--danger,
.ghx-stat-fields .el-tag--danger,
.fb-tag .el-tag--danger {
    background-color: #fed5e3;
    border: none !important;
    color: #634851;
}
.ghx-stat-fields .el-tag--warning,
.fb-tag .el-tag--warning,
.fb-form .el-tag--warning {
    background-color: #ebe7ff;
    border-color: transparent;
    color: #605c74;
}

.ghx-stat-fields .el-tag--success,
.fb-tag .el-tag--success,
.fb-form .el-tag--success {
    background-color: #daf8e7;
    border-color: transparent;
    color: #4e6859;
}

.fb-btn-tag {
    /* width: 8rem; */
    text-align: center;
    padding: 0.5rem 1rem;
    background-color: #dfe1e6;
    background-color: #efefef;
    /* border: 1px solid rgb(66, 82, 110); */
    color: rgb(66, 82, 110);
    font-size: 1rem;

    /* text-transform: uppercase; */
    /* font-weight: 600; */

}

.fb-controls {
    height: 4rem;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    column-gap: 1rem;
}
.fb-controls button {
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 0.5rem;

    border-radius: 0;
    padding: 0.75rem 2rem;
    /* width: 9rem; */
    font-weight: bold;

    border: none;
    cursor: pointer;
    background-color: #efefef;
    /* background-color: transparent; */
    color: rgb(66, 82, 110);
}
.fb-controls button span {
    font-size: 1rem;
}
.fb-form input {
    border-radius: 0;
}
.fb-form textarea {
    resize: none;
    border-radius: 0;
    box-sizing: border-box;
    padding: 0.8rem;
    height: 15rem !important;

    font-size: 1rem;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
}
.fb-item-title {
    font-weight: bold;
    font-size: 0.9rem;
}
.screenshot-btn {


}
._ok-button {
z-index: 5555;
cursor: pointer;
transition: transform 0.2s;
width: 16rem;
height: 4.7rem;
border-radius: 0;
font-size: .9rem;
color: white;
background: #ff4040;
border: none;
position: fixed;
top: 0rem;
right: 0rem;
/* transform: translateX(-50%); */

  z-index: 999;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); */
}

.document-editor {
    border: 1px solid var(--ck-color-base-border);
    border-radius: var(--ck-border-radius);

    /* Set vertical boundaries for the document editor. */
    max-height: 700px;

    /* This element is a flex container for easier rendering. */
    display: flex;
    flex-flow: column nowrap;
}

.document-editor__toolbar {
    /* Make sure the toolbar container is always above the editable. */
    z-index: 1;

    /* Create the illusion of the toolbar floating over the editable. */
    box-shadow: 0 0 5px hsla( 0,0%,0%,.2 );

    /* Use the CKEditor CSS variables to keep the UI consistent. */
    border-bottom: 1px solid var(--ck-color-toolbar-border);
}

/* Adjust the look of the toolbar inside the container. */
.document-editor__toolbar .ck-toolbar {
    border: 0;
    border-radius: 0;
}

.document-editor__editable-container {
    padding: 10px;
    background: var(--ck-color-base-foreground);

    /* Make it possible to scroll the "page" of the edited content. */
    overflow-y: scroll;
}

.document-editor__editable-container .ck-editor__editable {
    /* Set the dimensions of the "page". */
    width: 75%;
    min-height: 3cm;

    /* Keep the "page" off the boundaries of the container. */
    padding: 1cm 2cm 2cm;

    border: 1px hsl( 0,0%,82.7% ) solid;
    border-radius: var(--ck-border-radius);
    background: white;

    /* The "page" should cast a slight shadow (3D illusion). */
    box-shadow: 0 0 5px hsla( 0,0%,0%,.1 );

    /* Center the "page". */
    margin: 0 auto;
}

.document-editor .ck-content,
.document-editor .ck-heading-dropdown .ck-list .ck-button__label {
    font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
}


.document-editor .ck-heading-dropdown .ck-list .ck-button__label {
    line-height: calc( 1.7 * var(--ck-line-height-base) * var(--ck-font-size-base) );
    min-width: 6em;
}

/* Scale down all heading previews because they are way too big to be presented in the UI.
Preserve the relative scale, though. */
.document-editor .ck-heading-dropdown .ck-list .ck-button:not(.ck-heading_paragraph) .ck-button__label {
    transform: scale(0.8);
    transform-origin: left;
}

/* Set the styles for "Heading 1". */
.document-editor .ck-content h2,
.document-editor .ck-heading-dropdown .ck-heading_heading1 .ck-button__label {
    font-size: 2.18em;
    font-weight: normal;
}

.document-editor .ck-content h2 {
    line-height: 1.37em;
    padding-top: .342em;
    margin-bottom: .142em;
}

/* Set the styles for "Heading 2". */
.document-editor .ck-content h3,
.document-editor .ck-heading-dropdown .ck-heading_heading2 .ck-button__label {
    font-size: 1.75em;
    font-weight: normal;
    color: hsl( 203, 100%, 50% );
}

.document-editor .ck-heading-dropdown .ck-heading_heading2.ck-on .ck-button__label {
    color: var(--ck-color-list-button-on-text);
}

/* Set the styles for "Heading 2". */
.document-editor .ck-content h3 {
    line-height: 1.86em;
    padding-top: .171em;
    margin-bottom: .357em;
}

/* Set the styles for "Heading 3". */
.document-editor .ck-content h4,
.document-editor .ck-heading-dropdown .ck-heading_heading3 .ck-button__label {
    font-size: 1.31em;
    font-weight: bold;
}

.document-editor .ck-content h4 {
    line-height: 1.24em;
    padding-top: .286em;
    margin-bottom: .952em;
}

/* Set the styles for "Paragraph". */
.document-editor .ck-content p {
    font-size: 1em;
    line-height: 1.63em;
    padding-top: .5em;
    margin-bottom: 1.13em;
}

.document-editor .ck-content blockquote {
    font-family: Georgia, serif;
    margin-left: calc( 2 * var(--ck-spacing-large) );
    margin-right: calc( 2 * var(--ck-spacing-large) );
}

.sf_sub_form_right .el-form-item__label{
    float: left;
    text-align: right;
    padding: 0 12px 0 0;
}
.sf_sub_form_left .el-form-item__label{
    float: left;
    text-align: left;
}
.sf_sub_form_top .el-form-item__label{
    float: none;
    text-align: left;
}
.sf_lg_selected{
    color: #f72b3c;
    background: #ff00000f;
}
.primary-theme-alert {
    background-color: #E0F2FA;
    color: #008dd1;
}