.x3fs1{
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    grid-gap:10px;
    padding:28px;
    border: 0;
    background: rgba(15, 23, 42, 0.78);
    box-shadow: 0 24px 70px -30px rgba(15, 23, 42, 0.75);
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.08);
}
.x3lb1, .x3lb2{
    font-family: var(--font-default);
    color:#e2e8f0;
    padding:12px 10px;
    display:inline-block;
}
.x3in1,.x3sl1,.x3bt1{
    width:96%;
    margin:0 2%;
    border:1px solid rgba(255,255,255,0.08);
    box-sizing: border-box;
    padding:12px 14px;
    font-size:1em;
    background:rgba(255,255,255,0.05);
    color:#e2e8f0;
    border-radius:14px;
}
.x3bt1{
    background:linear-gradient(135deg, #f59e0b, #f97316);
    color:#111827;
    cursor:pointer;
    border-radius:16px;
    font-weight:700;
}
#x3d0_createButton{ grid-column:6/7}
#x3d0_createButton > .x3bt1{ background:linear-gradient(135deg, #f59e0b, #fbbf24);}
.x3d1{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* modalbox form */
.x3d2{
    background:rgba(15, 23, 42, 0.82);
    display: flex;
    justify-content: end;
    /* align-items: center; */
    padding:0 18px;
    border-radius: 18px 18px 0 0;
    border:1px solid rgba(255,255,255,0.06);
}
.x3d2 ~ .x3d2{border-radius:0;}
.x3d2:last-child{border-radius:0 0 18px 18px;}
.x3d2:nth-child(2n){ background:rgba(30, 41, 59, 0.82)}
/* field container */
.x3d3{
    width:50%;
}
.x3d4{
    margin: 10px 0;
}
.x3s2{
    font-family: var(--font-default);
    color:#e2e8f0;
    padding:14px 20px;
    width:100%;
    margin:2px 0;
}
.x3se2{clear:both; margin:20px;  padding:28px;
    border: 0;
    background: rgba(15, 23, 42, 0.78);
    box-shadow: 0 24px 70px -30px rgba(15, 23, 42, 0.75);
    border-radius: 24px;
    border:1px solid rgba(255,255,255,0.08);
}
.x3s2:first-child{ border-right:1px solid rgba(255,255,255,0.08); text-align: right;}
.x3h12{color: #e2e8f0; text-align: center;}
.x3h22{color:#e2e8f0; font-size:20px; font-weight:700; margin-top:30px;}
.x3in2, .x3bt2{
    margin:5px;
    border:1px solid rgba(255,255,255,0.08);
    box-sizing: border-box;
    padding:12px 15px;
    font-size:1em;
    border-radius:14px;
    font-family: var(--font-default);
    width:100%;
}
.x3in2{background:rgba(255,255,255,0.05); color:#e2e8f0;}
.x3in3 {
    width: 70% !important;
}
.x3bt2{background:linear-gradient(135deg, #f59e0b, #f97316); /* border:2px solid var(--color-dark4) */
    box-shadow:0 18px 40px -24px rgba(245, 158, 11, 0.8);
    border-radius:999px;
    color:#111827;
    font-weight:700;
}
[data-check]:checked + label{
    background:linear-gradient(135deg, #f59e0b, #f97316);
    color:#111827;
}
[data-check] + label{
    font-family: var(--font-default);
    color:#e2e8f0;
    cursor:pointer;
    background:rgba(255,255,255,0.05);
    margin:5px;
    border-radius: 12px;
    border:1px solid rgba(255,255,255,0.08);
}
[data-check]{display: none;}

[data-status="0"]{opacity:0.45}

  /* dropdown menu styles - START */
  .z1s1 {
    position: relative;
    cursor: pointer;
    display: inline-block;

        background: rgba(255,255,255,0.05);
        color: #e2e8f0;
    font-family: var(--font-default);
    box-sizing: border-box;
        padding: 11px 14px;
    font-size: 1em;
        border-radius: 14px;
    width: 100%;
    margin: 5px 5px 5px 5px;
        border:1px solid rgba(255,255,255,0.08);
  }
  .z1s1:after {
    position: absolute;
    content: "";
        border-left: 2px solid #cbd5e1;
        border-top: 2px solid #cbd5e1;
    padding: 2.3px;
    right: 4px;
    top: 20%;
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);

  }
  .z1u2 {
    padding: 2px;
    display: none;
    margin: 0;
    border: none;

        background: rgba(15, 23, 42, 0.96);
    margin: -2px 5px 5px 5px;
        border-radius: 14px;
    width: 99%;
    line-height: 1.5;
        border:1px solid rgba(255,255,255,0.08);
  }

  .z1u2 li {
    list-style: none;
  }
  .z1u2 li:hover {
        background: rgba(245, 158, 11, 0.16);
    color: #fff;
  }
  /* dropdown menu styles - END */



  /* @media screen and (max-width:700px){ .x3se2{width: 98%; }} */

  @media screen and (max-width: 768px) {
    .x3fs1{
        display: block;
    }
    .x3bt1{
        margin-top: 10px;
    }
    .x3in3 {
    width: 100% !important;
}
}

@media screen and (max-width: 600px) {
    .x3d2{
        flex-direction: column;
        align-items: flex-start;
        /* text-align: left; */
        /* align-items: center; */
        padding: 0 15px;
            border-bottom: 1px solid var(--color-dark2);
    }
    .x3d3{
        width: 100%;
    }
    .x3s2:first-child{
        text-align: left;border-right: none;font-weight: bold;
    }
    #z1hr1{display: none;}
}