/* 触发按钮 */
.mycelium_trigger_drawer {
    position: fixed;
    z-index: 99999;
    bottom: 40px;
    right: 20px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(255, 255, 255);
    box-shadow: rgba(185, 191, 197, 0.4) 0px 4px 10px;
    width: 40px;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.mycelium_iconpark_icon {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}

.mycelium_iconpark_icon::after {
    position: absolute;
    width: 49px;
    height: 49px;
    left: -5px;
    top: 8px;
    content: '';
    background: linear-gradient(180deg, rgba(227, 241, 241, 0.31) 0%, #E0EEEE 76.11%);
    filter: blur(4.19522px);
}

.mycelium_iconpark_icon-robot {
    width: 40px;
    height: 40px;
    z-index: 100000;
    position: relative;
    background-image: url('https://s3.bmp.ovh/imgs/2023/06/08/a46d1a4b46ea2efe.png');
    /* background-image: url('https://cdn.jsdelivr.net/npm/mycelium_plugin@1.0.2/img/robot.png'); */
    background-size: 100% 100%;
}

.mycelium_trigger_tipBox {
    position: absolute;
    top: -40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px 12px;
    height: 32px;
    width: 72px;
    background: rgba(55, 65, 77, 0.85);
    border-radius: 4px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #FFFFFF;
    box-sizing: border-box;
    visibility: hidden;
}

.mycelium_trigger_tipBox::after {
    position: absolute;
    bottom: -4px;
    left: 32px;
    content: '';
    width: 0;
    height: 0;
    border-top: 4px solid rgba(55, 65, 77, 0.85);
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.mycelium_trigger_drawer:hover .mycelium_trigger_tipBox {
    visibility: visible;
}

/* 遮罩 */
.mycelium_drawer_overlay {
    z-index: 99999;
    background: #fff;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: linear-gradient(270deg, rgba(77, 91, 108, 0.2) 0%, rgba(77, 91, 108, 0) 40%);
}

.mycelium_drawer_content {
    box-sizing: border-box;
    position: absolute;
    width: 400px;
    height: calc(100% - 200px);
    right: 20px;
    top: 100px;
    background: #FFFFFF;
    border: 1px solid #EEF0F2;
    box-shadow: 0px 10px 20px rgba(185, 191, 197, 0.35);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 弹框顶部 */
.mycelium_drawer_header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    height: 52px;
    background: #FFFFFF;
}

.mycelium_drawer_header_icon {
    width: 28px;
    height: 28px;
    background-image: url('https://s3.bmp.ovh/imgs/2023/06/08/69bf6b2df7bfc7dd.png');
    /* background-image: url('https://cdn.jsdelivr.net/npm/mycelium_plugin@1.0.2/img/robot1.png'); */
    background-size: 100% 100%;
}

.mycelium_drawer_header_text {
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #161D24;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mycelium_drawer_close_button {
    color: #B7BFC9;
    font-size: 18px;
    cursor: pointer;
}

/* 弹框内容 */
.mycelium_drawer_container {
    padding: 0 24px;
    height: calc(100% - 136px);
    overflow: scroll;
    display: flex;
    flex-direction: column;
}
.mycelium_drawer_container::-webkit-scrollbar {
    display: none;
}

#mycelium_create_voice_form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
}

/* 表单项 */
.mycelium_form_item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
    width: 100%;
}

.mycelium_form_item_half {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
    width: 50%;
}

.mycelium_form_item_title {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 2px;
    height: 20px;

    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #48515D;
}

.mycelium_form_item_require {
    font-size: 18px;
    height: 14px;
    color: #DD2222;
}

.mycelium_form_inline {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 4px;
}

.mycelium_form_item_answer {
    width: 100%;
}

/* 输入框 */
input.mycelium_form_input {
    width: 100%;
    padding: 6px 12px;
    border: 1px solid #F5F6F8;
    outline: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    background: #F5F6F8;
    border-radius: 4px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 22px;
    color: #161D24;
    caret-color: #C4C5C6;
}

input.mycelium_form_input::-webkit-input-placeholder {
    color: #C9CACB;
}

input.mycelium_form_input:hover {
    background: #F1F3F5;
}

input.mycelium_form_input:focus {
    background: #FFFFFF;
    border: 1px solid #4DBC5F;
}

.mycelium_form_divable {
    width: 100%;
    min-height: 80px;
    /* border: 1px solid #6e6e6e; */
    background: #F5F6F8;
    outline: none;
    /* 隐藏聚焦时外边框 */
    padding: 10px;
    padding-bottom: 50px;
    white-space: pre-wrap;
    overflow: hidden;
    overflow-y: auto;
    word-break: break-all;
    border: 1px solid #F5F6F8;
    outline: none;
    box-sizing: border-box;
    flex: 1;
    border-radius: 4px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    line-height: 20px;
    color: #161D24;
    caret-color: #C4C5C6;
}

.mycelium_form_divable::-webkit-input-placeholder {
    color: #C9CACB;
}

.mycelium_form_divable:hover {
    background: #ECEFF2;
}

.mycelium_form_divable:focus {
    border: 1px solid #4DBC5F;
    background: #FFFFFF;
}

/* 上传按钮 */
.mycelium_video_upload_button {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 12px;
    gap: 4px;
    height: 28px;
    width: 88px;
    background: #FFFFFF;
    border: 1px solid #E5E7EA;
    border-radius: 4px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #5F6374;
    cursor: pointer;
}
.mycelium_video_upload_button_ok {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 12px;
    gap: 4px;
    height: 28px;
    width: 88px;
    background: #FFFFFF;
    border: 1px solid #E5E7EA;
    border-radius: 4px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #5F6374;
    cursor: pointer;
}
.mycelium_video_upload_file {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 6px;
}
.mycelium_video_upload_file_item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    gap: 10px;
    width: 100%;
    /* height: 36px; */
    background: #F7F9FA;
    border-radius: 2px;
    box-sizing: border-box;

    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #48515D;
}
.mycelium_video_upload_file_item_icon {
    flex: 0 0 12px;
    cursor: pointer;
}

.mycelium_file_upload_button {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 12px;
    gap: 4px;
    width: 88px;
    height: 28px;
    background: #FFFFFF;
    border: 1px solid #E5E7EA;
    border-radius: 4px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #5F6374;
    cursor: pointer;
}
.mycelium_file_upload_file {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 6px;
}
.mycelium_file_upload_file_item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    gap: 10px;
    width: 100%;
    /* height: 36px; */
    background: #F7F9FA;
    border-radius: 2px;
    box-sizing: border-box;

    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #48515D;
}
.mycelium_file_upload_file_item_icon {
    flex: 0 0 12px;
    cursor: pointer;
}

/* 选择器 */
.mycelium_form_input_seletc_box {
    position: relative;
}

.mycelium_form_input_seletct_content {
    width: 100%;
    box-sizing: border-box;
    height: 36px;
    padding: 7px 36px 7px 12px;
    background: #F5F6F8;
    border-radius: 4px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #161D24;
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mycelium_form_input_seletct_content:hover {
    background: #ECEFF2;
}

.mycelium_form_input_seletct_icon {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.mycelium_form_input_seletct_wrap {
    display: none;
    width: 350px;
    max-width: 100%;
    /* min-width: 350px; */
    position: absolute;
    top: 40px;
    transition: transform 1s;
    -moz-transition: -moz-transform 1s;
    -webkit-transition: -webkit-transform 1s;
    -o-transition: -o-transform 1s;

    box-sizing: border-box;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    background: #FFFFFF;
    border: 1px solid #F5F6F7;
    box-shadow: 0px 4px 15px rgba(185, 191, 197, 0.25);
    border-radius: 4px;
    z-index: 9;
}

/* .mycelium_form_input_seletct_wrap::before{
    position: absolute;
    content: '';
    border-bottom: 10px solid #eee;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}
.mycelium_form_input_seletct_wrap::after{
    position: absolute;
    content: '';
    border-bottom: 10px solid #fff;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
} */
.mycelium_form_input_seletct_wrap .mycelium_form_item_seletct_search {
    width: 100%;
}
input.mycelium_form_item_seletct_search_search_input {
    width: 100%;
    padding: 6px 12px;
    border: 1px solid #F5F6F8;
    outline: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    background: #F5F6F8;
    border-radius: 4px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 22px;
    color: #161D24;
    caret-color: #C4C5C6;
}

input.mycelium_form_item_seletct_search_search_input::-webkit-input-placeholder {
    color: #C9CACB;
}

input.mycelium_form_item_seletct_search_search_input:hover {
    background: #F1F3F5;
}

input.mycelium_form_item_seletct_search_search_input:focus {
    background: #FFFFFF;
    border: 1px solid #4DBC5F;
}

.mycelium_form_input_seletct_wrap .mycelium_form_input_seletct_wrap_list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* padding: 4px; */
    width: 100%;
    box-sizing: border-box;
    max-height: 130px;
    overflow: scroll;
}
.mycelium_form_input_seletct_wrap .mycelium_form_input_seletct_wrap_list::-webkit-scrollbar {
    display: none;
}
.mycelium_form_input_seletct_wrap .mycelium_form_input_seletct_wrap_list .mycelium_form_input_seletct_wrap_item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 8px 8px 12px;
    gap: 6px;
    width: 100%;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #161D24;
    box-sizing: border-box;
}
.mycelium_form_input_seletct_wrap .mycelium_form_input_seletct_wrap_list .mycelium_form_input_seletct_wrap_item:hover {
    background-color: #F8F9FA;
}

.mycelium_form_input_seletct_wrap .mycelium_form_input_seletct_wrap_list .mycelium_form_input_seletct_wrap_item-select {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 8px 8px 12px;
    gap: 6px;
    width: 100%;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;

    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    color: #4DBC5F;
    box-sizing: border-box;
}


/* 日期选择 */
.mycelium_form_datepicker {
    border: 1px solid #F1F3F5;
    filter: drop-shadow(0px 4px 15px rgba(185, 191, 197, 0.25));
    border-radius: 4px;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}
.mycelium_form_datepicker-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    gap: 8px;
    box-sizing: border-box;
    height: 48px;
    background: #FAFAFA;
    cursor: pointer;
}
.mycelium_form_date_prev {
    width: 10%;
    font-family: cursive;
}
.mycelium_form_date_year-prev {
    width: 10%;
    font-family: cursive;
}
.mycelium_form_date_time {
    width: 60%;

    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: #161D24;
}
.mycelium_form_date_next {
    width: 10%;
    font-family: cursive;
}
.mycelium_form_date_year-next {
    width: 10%;
    font-family: cursive;
}
.mycelium_form_datepicker-week {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 4px;
    padding: 0 20px;
    box-sizing: border-box;
    margin-top: 8px;
    width: 100%;
    height: 32px;
    justify-content: space-between;
}
.mycelium_form_datepicker-week div {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 10px;
    gap: 10px;
    width: calc(100%/7);
    height: 32px;
    border-radius: 2px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    color: #9C9DA0;
    box-sizing: border-box;
    margin-bottom: 8px;
}
.mycelium_form_datepicker-day {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}
.mycelium_form_datepicker_item-time, .mycelium_form_datepicker_item-notMonth {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* padding: 6px 10px; */
    gap: 10px;
    width: calc(100%/7);
    height: 32px;
    border-radius: 2px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    box-sizing: border-box;
    margin-bottom: 8px;
    position: relative;
}
.mycelium_form_datepicker_item-cell {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.mycelium_form_datepicker_item-cell:hover  {
    background: #F1F7F2;
    color: #161D24;
}
.mycelium_form_datepicker_item-active-cell {
    background: #4DBC5F;
    color: #FFFFFF;
}
.mycelium_form_datepicker_item-active-cell:hover {
    background: #4DBC5F;
    color: #FFFFFF;
}
.mycelium_form_date_prev:hover,
.mycelium_form_date_next:hover,
.mycelium_form_date_time:hover div:hover div{
    color: #4DBC5F;
}
/* .mycelium_form_datepicker_item-activeDay {
    color: #4DBC5F !important;
} */
.mycelium_form_datepicker_item-notMonth {
    color: #c0c4cc !important;
}

/* 弹框底部 */
.mycelium_drawer_footer {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    gap: 10px;
    height: 64px;
    background: #FCFCFC;
    border-top: 1px solid #F3F5F6;
    border-radius: 0px 0px 4px 4px;
}

.mycelium_drawer_footer_button_text {
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #5F6374;
    cursor: pointer;
}

.mycelium_drawer_footer_buttons {
    display: flex;
    padding: 0px;
    gap: 10px;
    height: 36px;
}

.mycelium_drawer_footer_button_cancel {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 16px;
    gap: 4px;
    height: 36px;
    background: #FFFFFF;
    border: 1px solid #E5E7EA;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #5F6374;
}

.mycelium_drawer_footer_button_create {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 16px;
    gap: 4px;
    height: 36px;
    background: #3B4554;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    color: #FFFFFF;
}

/* 创建成功 */
.mycelium_drawer_container_successs {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
}
.mycelium_drawer_container_successs_tipText {
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #161D24;
}
.mycelium_drawer_container_successs_buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    padding: 0px;
    gap: 10px;
    height: 36px;
}
.mycelium_drawer_container_successs_button_next {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 16px;
    gap: 4px;
    cursor: pointer;
    height: 36px;
    background: #FFFFFF;
    border: 1px solid #E5E7EA;
    border-radius: 4px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #5F6374;
}
.mycelium_drawer_container_successs_button_look {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 16px;
    gap: 4px;
    cursor: pointer;
    height: 36px;
    background: #3B4554;
    border-radius: 4px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    color: #FFFFFF;
}

.tree {
    list-style-type: none;
}

.node {
    padding: 0 !important;
}

.parent_node {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: block !important;
    height: auto !important;
    position: relative;
}

.second_node {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: block !important;
    height: auto !important;
    position: relative;
}

.expand_node {
    position: relative;
}

.mycelium_form_input_seletct_wrap_item_icon {
    position: absolute;
    right: 10px;
    content: ">";
    transform: rotate(90deg);
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 4px;
    color: #30A242;
}

.mycelium_form_input_seletct_wrap_item_icon:hover {
    background-color: #c9cacbbe;

.custom_node {
}

.mycelium_form_input_seletct_wrap .mycelium_form_input_seletct_wrap_list .parent_node.mycelium_form_input_seletct_wrap_item:hover {
    background-color: transparent !important;
}

.node_hidden {
    display: none !important;
}

.mycelium_form_input_seletct_wrap_item .mycelium_form_input_seletct_wrap_list {
    border-left: 1px solid #C9CACB;
    border-radius: 12px;
}