#dhub .publish_frame {
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
    font-family: 'Maven Pro', Verdana, sans-serif;
    font-size: 16px;
}

#dhub .publish_frame > .caption {
    margin: 12px 0;
    font-size: 1.2em;
}

#dhub .publish_frame > .options_wpr {
    width: 100%;
    box-sizing: border-box;
}

#dhub .publish_frame .button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    padding-left: 50px;
    margin-bottom: 15px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: left;
    cursor: default;
    transition: background-color 0.3s ease;
    user-select: none;
    box-sizing: border-box;
    position: relative;
}

#dhub .publish_frame .button:hover {
    background-color: #e6e6e6;
}

#dhub .publish_frame .button > span {
    display: inline-flex;
    width: 100%;
    font-size: 16px;
    color: #555;
}

#dhub .publish_frame .button > .text {
    color: rgb(0,0,0);
    height: 30px;
    font-size: 1em;
    font-family: 'Noto Sans', Verdana, sans-serif;
    font-weight: bold;
    align-items: center;
}

#dhub .publish_frame .button > .desc {
    font-size: 0.88em;
}

#dhub .publish_frame .button:before {
    content: '';
    width: 45px;
    height: 45px;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
}

#dhub .publish_frame .button[data-type="dft_content"]:before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="rgb(247,213,54)"><path d="M280-240q-17 0-28.5-11.5T240-280v-80h520v-360h80q17 0 28.5 11.5T880-680v600L720-240H280ZM80-280v-560q0-17 11.5-28.5T120-880h520q17 0 28.5 11.5T680-840v360q0 17-11.5 28.5T640-440H240L80-280Z"/></svg>');
}

#dhub .publish_frame .button[data-type="catalog"]:before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="rgb(247,213,54)"><path d="M280-80q-33 0-56.5-23.5T200-160q0-33 23.5-56.5T280-240q33 0 56.5 23.5T360-160q0 33-23.5 56.5T280-80Zm400 0q-33 0-56.5-23.5T600-160q0-33 23.5-56.5T680-240q33 0 56.5 23.5T760-160q0 33-23.5 56.5T680-80ZM208-800h590q23 0 35 20.5t1 41.5L692-482q-11 20-29.5 31T622-440H324l-44 80h480v80H280q-45 0-68-39.5t-2-78.5l54-98-144-304H40v-80h130l38 80Z"/></svg>');
}

#dhub .publish_frame .button[data-type="survey"]:before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="rgb(247,213,54)"><path d="M640-160v-280h160v280H640Zm-240 0v-640h160v640H400Zm-240 0v-440h160v440H160Z"/></svg>');
}

#dhub .publish_frame .button[data-type="wanted_notice"]:before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="rgb(247,213,54)"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>');
}

#dhub .publish_frame .button[data-type="sos"]:before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="rgb(247,213,54)"><path d="M200-160v-80h64l79-263q8-26 29.5-41.5T420-560h120q26 0 47.5 15.5T617-503l79 263h64v80H200Zm240-480v-200h80v200h-80Zm238 99-57-57 142-141 56 56-141 142Zm42 181v-80h200v80H720ZM282-541 141-683l56-56 142 141-57 57ZM40-360v-80h200v80H40Z"/></svg>');
}

#dhub .publish_frame .button > .trigger {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: default;
}

/* Modale & Form */ 

#dhub .publish_frame .go-wgt_vfconst {
    height: 100%;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

#dhub .publish_frame .go-wgt_vfconst .cell {
    display: flex;
    align-items: center;
}

#dhub .publish_frame .go-wgt_vfconst > .top_bar {
    width: 100%;
    background-color: rgba(28,70,154,0.02);
    border-bottom: 1px solid rgba(24,24,24,0.1);
    height: 45px;
    padding: 0 5px;
    box-sizing: border-box;
    position: sticky;
    margin-bottom: 5px;
    justify-content:space-between;
    cursor: default;
    user-select: none;
}

#dhub .publish_frame .go-wgt_vfconst .top_bar > span {
    display: inline-flex;
    align-items: center;
    height: calc(100% - 12px);
    background-color: yellow;
    position: relative;
}

#dhub .publish_frame .go-wgt_vfconst .top_bar > .go_back {
    width: 40px;
    border: 1px solid rgba(24,24,24,0.1);
    border-radius: 8px;
    background-color: rgba(28,70,154,0.02);
}

#dhub .publish_frame .go-wgt_vfconst .top_bar > .go_back:hover {
    background-color: rgb(247,213,54);
}

#dhub .publish_frame .go-wgt_vfconst .top_bar > .go_back:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="rgb(24,24,24)"><path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/></svg>');
}

#dhub .publish_frame .go-wgt_vfconst .top_bar > .title {
    width: max-content;
    padding: 0 5px;
    font-size: 0.88em;
    background-color: unset;
}

#dhub .publish_frame .go-wgt_vfconst .top_bar > .next.publish {
    width: max-content;
    padding: 0 8px;
    padding-left: 25px;
    border: 1px solid rgba(24,24,24,0.1);
    border-radius: 5px;
    background-color: rgba(247,213,54,0.7);
}

#dhub .publish_frame .go-wgt_vfconst .top_bar > .next.publish:hover {
    background-color: rgb(247,213,54);
}

#dhub .publish_frame .go-wgt_vfconst .top_bar > .next.publish:before {
    content: '';
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 20px;
    top: calc(50% - 10px);
    left: 2px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="rgb(24,24,24)"><path d="M440-160v-326L336-382l-56-58 200-200 200 200-56 58-104-104v326h-80ZM160-600v-120q0-33 23.5-56.5T240-800h480q33 0 56.5 23.5T800-720v120h-80v-120H240v120h-80Z"/></svg>');
}

#dhub .publish_frame .go-wgt_vfconst .top_bar > .next.publish.wf_ahr:before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="rgba(24,24,24,1)"><path d="M204-318q-22-38-33-78t-11-82q0-134 93-228t227-94h7l-64-64 56-56 160 160-160 160-56-56 64-64h-7q-100 0-170 70.5T240-478q0 26 6 51t18 49l-60 60ZM481-40 321-200l160-160 56 56-64 64h7q100 0 170-70.5T720-482q0-26-6-51t-18-49l60-60q22 38 33 78t11 82q0 134-93 228t-227 94h-7l64 64-56 56Z"/></svg>');
  /*! Animate --- */
  -moz-animation: spin 1s infinite linear;
  -o-animation: spin 1s infinite linear;
  -webkit-animation: spin 1s infinite linear;
  animation: spin 1s infinite linear;
}

#dhub .publish_frame .go-wgt_vfconst .top_bar > .next.publish .text {
    position: relative;
    font-size: 0.88em;
}

#dhub .publish_frame .go-wgt_vfconst .top_bar > .next.publish .trigger {
    position: absolute;
    width: 100%;
    height: 100%;
    display: inline-block;
    left: 0;
    top: 0;
    opacity: 0;
}

#dhub .publish_frame .go-wgt_vfconst .top_bar > .progress {
    position: absolute;
    left: 0; bottom: -1px;
    width: 0;
    height: 0;
    border-bottom: 2px solid rgb(28,70,154);
    display: none; 
}

#dhub .publish_frame .go-wgt_vfconst > .forms-content {
    height: calc(100% - 50px);
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    padding: 10px 0;
    padding-bottom: 60px
}

#dhub .publish_frame .go-wgt_vfconst > .forms-content::-webkit-scrollbar {
    width: 2px !important;
    background: rgba(247,213,54, 0.3);
}

#dhub .publish_frame .go-wgt_vfconst form > .profile {
    width: inherit;
    justify-content: space-between;
    height: max-content;
    margin-bottom: 16px;
}

#dhub .publish_frame .go-wgt_vfconst form .profile > .photo {
    background-color: rgb(247,213,54);
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(24,24,24,0.1);
}

#dhub .publish_frame .go-wgt_vfconst form .profile > .right-box {
    flex-direction: column;
    width: calc(100% - 40px);
    padding: 0 8px;
}

#dhub .publish_frame .go-wgt_vfconst form .profile .fullname {
    font-size: 0.78em;
    color: rgb(28,70,154);
    font-weight: bold;
    display: inline-flex;
    width: 100%;
}

#dhub .publish_frame .go-wgt_vfconst form > .grp {
    margin: 30px 0;
    padding: 0 8px;
}

#dhub .publish_frame .go-wgt_vfconst form .field-layout {
  display: inline-flex;
    flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  vertical-align: top;
}

#dhub .publish_frame .go-wgt_vfconst form.catalog .field-layout:first-child {
    margin-right: 10px;
}

#dhub .publish_frame .go-wgt_vfconst form .field-layout > label {
    display: inline-flex;
    width: 100%;
  box-sizing: border-box;
  position: relative;
  font-family: 'Noto Sans', Verdana, sans-serif;
  font-size: 0.68em;
  height: 25px;
    align-items: center;
    width: max-content;
    padding: 0 8px;
    color: rgba(28,70,154,0.8)
}

#dhub .publish_frame .go-wgt_vfconst form .custom-resize {
    outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  border: 0;
  border-bottom: 1px solid rgba(28,70,157, 0.1);
    background-color: unset;
    font-family: 'Noto Sans', Verdana, sans-serif;
    display: inline-block;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  font-family: 'Noto Sans';
  font-size: 0.88em;
  padding: 0 8px;
  background-color: rgba(244, 244, 244, 0.8);
  height: 50px;
}

#dhub .publish_frame .go-wgt_vfconst form .custom-resize.cost {
    font-size: 1.2em;
}

#dhub .publish_frame .go-wgt_vfconst form .custom-resize::placeholder {
    font-size: 0.9em;
}

#dhub .publish_frame .go-wgt_vfconst form textarea.custom-resize {
    min-height: 250px;
    font-size: 0.98em;
}

#dhub .publish_frame .go-wgt_vfconst form textarea.custom-resize::placeholder {
    font-size: 1.2em;
}

#dhub .publish_frame .go-wgt_vfconst form > .images-box {
   width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#dhub .publish_frame .go-wgt_vfconst .images-box > .image {
    display: inline-flex;
    box-sizing: border-box;
    width: 100%;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 5px;
    padding: 10px;
}

#dhub .publish_frame .go-wgt_vfconst .images-box .image > canvas {
    width: 100%;
}

#dhub .publish_frame .go-wgt_vfconst .images-box .image > i {
    display: inline-block;
    position: absolute;
}

#dhub .publish_frame .go-wgt_vfconst .images-box .image > i.mask {
    width: 100%;
    height: 100%;
    left: 0; top: 0;
}

#dhub .publish_frame .go-wgt_vfconst .images-box .image > i.remove {
    width: 25px;
    height: 25px;
    top: 5px; right: 5px;
    display: none;
}

#dhub .publish_frame .go-wgt_vfconst .images-box .image > i.remove:before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="rgb(255,255,255)"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>');
    background-color: rgb(61,62,62);
}

#dhub .publish_frame .go-wgt_vfconst .images-box > .image:hover > i.mask {
    background-color: rgba(24,24,24,0.05);
}

#dhub .publish_frame .go-wgt_vfconst .images-box > .image:hover > i.remove {
    display: inline-block;
}

#dhub .publish_frame .go-wgt_vfconst > .asset-box {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgb(240,240,242);
    height: 50px;
    width: 100%;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(24,24,24,0.1);
    box-sizing: border-box;
    border-right: 0;
    border-left: 0;
}

#dhub .publish_frame .go-wgt_vfconst .asset-box > .item {
    display: inline-block;
    width: 35px;
    height: 35px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(24,24,24,0.1);
    margin: 6px;
}

#dhub .publish_frame .go-wgt_vfconst .asset-box > .item:hover {
    background-color: rgba(28,70,154,0.2);
}

#dhub .publish_frame .go-wgt_vfconst .asset-box > .item:before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

#dhub .publish_frame .go-wgt_vfconst .asset-box > .images:before {
    background-size: 120%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="rgba(24,24,24,0.8)"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm40-160h480L570-480 450-320l-90-120-120 160Zm100-280q25 0 42.5-17.5T400-620q0-25-17.5-42.5T340-680q-25 0-42.5 17.5T280-620q0 25 17.5 42.5T340-560Z"/></svg>');
}

#dhub .publish_frame .go-wgt_vfconst .asset-box > .video_link:before {
    background-size: 90%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="rgba(24,24,24,0.8)"><path d="m300-180 160-100-160-100v200Zm220-470h160v-60H520v60ZM120-40q-33 0-56.5-23.5T40-120v-320q0-33 23.5-56.5T120-520h480q33 0 56.5 23.5T680-440v320q0 33-23.5 56.5T600-40H120Zm620-360v-40q0-38-18.5-70T672-560h8q50 0 85-35t35-85q0-50-35-85t-85-35h-50v60h50q25 0 42.5 17.5T740-680q0 25-17.5 42.5T680-620h-50v60q-8 0-15-10t-15-10h-30v-40h-50q-25 0-42.5-17.5T460-680q0-25 17.5-42.5T520-740h50v-60h-50q-50 0-85 35t-35 85q0 32 15 57.5t39 42.5H280v-260q0-33 23.5-56.5T360-920h480q33 0 56.5 23.5T920-840v360q0 33-23.5 56.5T840-400H740Z"/></svg>');
}

@media only screen and (max-width: 548px) {
    #dhub .publish_frame .go-wgt_vfconst form > .grp {
        flex-direction: column;
    }

    #dhub .publish_frame .go-wgt_vfconst form.catalog .field-layout:first-child {
        margin-right: 0;
        margin-bottom: 16px;
    }
}