.lu-main-top,
.lu-main-btn-modal,
.lu-backdrop-cover,
.lu-frm-dec-lft,
.lu-actual-lt-block,
.wrp-placehld-client-lote,
.wrp-get-lote-from,
.btn-add-ditails-wrp,
.add-ditails-radio-wrp,
.blk-succs-row,
.lu-main-svg,
.lote-from-svg-wrp,
.success-top-lu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.lu-form-wrp::-webkit-scrollbar,
.wrp-success::-webkit-scrollbar {
    display: none;
}

.wrp-success {
    display: none;
}

/* /// */

/* input[type=text], input[type=checkbox] {
    border:none;
} */


/* Start Main Block Button */
.lu-main-blks {
    background: rgba(20, 34, 56, 0.85);
    padding: 24px;
    overflow: hidden;

    border-radius: 16px;
    font-family: 'DM Sans', sans-serif;
}

.lu-main-blks,
.client-lote,
.lot-confirm,
.wrp-success {
    box-sizing: border-box;
}

.lu-main-top {
    margin-bottom: 14px;
    gap: 12px;
}

.lu-main-svg {
    width: 26px;
    height: 26px;
    padding: 8px;
    border: 1px solid #4fc8a040;
    border-radius: 13px;
    background: #4fc8a01f;
    box-sizing: content-box;
}

/* .lu-main-svg {
    width: 23px;
    height: 22px;
    padding: 10px;
    border: 1px solid #4fc8a040;
    border-radius: 13px;
    background: #4fc8a01f;
} */

.lu-main-top-right,
.succes-title-top {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1.4;
}

.lu-main-top-right,
.sbm,
.btn-send-again,
.btn-to-lote-select {

    font-weight: 700;
}

.lu-main-top-right,
.lu-desc-in,
.lu-main-btn-title {
    color: #4fc8a0;
}

.lu-main-title {
    color: #e8edf8;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 8px;
}

.lu-main-dsc {
    font-size: 13px;
    color: #c8daffbf;
    line-height: 1.65;
    margin-bottom: 20px;
}

.lu-main-btn-modal {

    background: #4fc8a026;
    justify-content: center;
    width: 100%;
    gap: 8px;
    outline: none;
    padding: 8px 18px;
    transition: box-shadow 0.2s linear 0s, background 0.2s linear 0s;
}

.succes-title-top,
.lu-main-btn-modal,
.lu-form-wrp,
.wrp-success {
    border-radius: 20px;
}

.lu-main-btn-modal,
.lot-confirm,
.btn-add-ditails-title,
.add-ditails-radio-wrp label,
.success-sub-small,
.reslt-succes-deflt {
    font-size: 13px;
    font-weight: 600;
}

.lu-main-btn-modal:hover {
    background: #4fc8a033;
    border-color: #4fc8a080;
    box-shadow: 0 4px 16px #4fc8a026;
}

.lu-dot-top {
    width: 10px;
    height: 10px;
    background: #5ddcb0;
    box-shadow: 0 0 8px #4fc8a0e6, 0 0 2px #4fc8a0;
}

/* End Main Block Button */


/* Start Cover */
.lu-backdrop-cover {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    justify-content: center;
    background: rgba(6, 14, 26, 0.75);
    z-index: 1100000 !important;
}

/* End Cover */




.lu-form-wrp,
.wrp-success {
    position: relative;
    background: #0e1c36f5;
    min-height: 20vh;
    overflow-x: hidden;
    border: 1px solid #ffffff47;
    box-shadow: 0 0 0 1px #ffffff0f inset, 0 40px 100px #000000bf, 0 0 80px #4fc8a014, 0 0 0 1.5px #4fc8a00f;
}

/* start dec top left */
.lu-frm-dec-lft {
    gap: 8px;
    padding: 18px 28px 0;
}

.dec-lft-1,
.dec-lft-2,
.dec-lft-3 {
    height: 6px;
    box-shadow: 0 0 8px #4fc8a0b3;
}

.dec-lft-1,
.dec-lft-3,
.lu-dot-top,
.btn-lu-close,
.btn-lu-close-success,
.btn-add-ditails-ico,
.remove-img,
.img-succ-top {
    border-radius: 50%;
}

.dec-lft-1 {
    width: 6px;
    background: #5ddcb0;
}

.dec-lft-2 {
    width: 24px;
    border-radius: 4px;
    background: linear-gradient(90deg, #3b82f6, #5ddcb0);
}

.dec-lft-3 {
    width: 6px;
    background: #ffffff26;
}

/* end dec top left */

.btn-lu-close,
.btn-lu-close-success {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 10px;
    height: 35px;
    background: #ff641e1f;
    border: 1.5px solid #ff641e73;
    transition: box-shadow 0.2s linear 0s, background 0.2s linear 0s;
}

.btn-lu-close:hover,
.btn-lu-close-success:hover {
    background: #ff641e40;
    border-color: #ff641eb3;
    box-shadow: 0 0 0 4px #ff641e14, 0 4px 18px #ff641e47;
}

.btn-lu-close img,
.btn-lu-close-success img {
    display: block;
}


.lu-frm-title,
.success-sub-title {
    padding: 22px 28px 0;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 7px;
    letter-spacing: -0.03em;
    font-family: 'Sora', sans-serif;
}

/* Start forms */

.lu-frm-title,
.lu-actual-lt-title,
.lote-outer-lu,
.officine-outer-lu,
.lu-frm-title,
.client-lote,
.lote-hint-title,
.sbm,
.btn-add-ditails-wrp,
.btn-add-ditails-ico,
.add-ditails-radio-wrp label,
#lu-user-name,
.add-ditails-img-wrp label,
.success-sub-title,
.success-sub-small,
.btn-send-again,
.btn-to-lote-select {
    color: #dce8ffe0;
}

#lu-main-frm,
.wrp-success {
    padding: 20px 28px 28px;
    font-family: 'Sora', sans-serif;
}

.field-disactive {
    opacity: 0.25;
    pointer-events: none;
}


.lu-actual-lt-block,
.sbm,
.btn-send-again,
.btn-to-lote-select,
.block-get-lote-from,
.btn-add-ditails-wrp {
    gap: 10px;
}

.lu-actual-lt-block,
.sbm,
.block-get-lote-from,
.wrp-add-ditais,
.wrp-content-success {
    background: #f5e6c80f;
}

.lu-actual-lt-block,
.lot-confirm-chk,
.block-get-lote-from,
.wrp-get-lote-from label,
.btn-add-ditails-wrp,
.wrp-add-ditails-main,
.add-ditails-radio-wrp label,
#lu-user-name,
.add-ditails-img-wrp label,
.wrp-content-success {
    padding: 15px 15px;
}

.lu-actual-lt-block,
.wrp-input-lote {
    margin-bottom: 10px;
}

.lu-actual-lt-block,
.lote-outer-lu,
.officine-outer-lu,
.sbm,
.btn-to-lote-select,
.btn-send-again,
.lot-confirm-chk,
.block-get-lote-from,
.wrp-add-ditais,
.add-ditails-radio-wrp label,
#lu-user-name {
    border: 1px solid #f5e6c82e;
    border-radius: 12px;
}

/* .lu-actual-lt-block {
    display: none;
} */

.lu-actual-lt-title,
.blk-succs-name {
    font-size: 13px;
    font-weight: 500;
}

.lu-actual-lt-num {
    font-family: "Sora", sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #faf3e1b3;
    line-height: 1;
    text-shadow: 0 0 10px #faf3e126;
}

/* Selectors */
.sel,
.get-lote-from-title,
.wrp-get-lote-from label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.13em;
    display: block;
    margin-bottom: 7px;
}

.lote-outer-lu,
.officine-outer-lu {
    width: 100%;
    margin-bottom: 14px;
    padding: 13px 40px 13px 15px;
    background: #13243f;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: border-color 0.2s;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.lote-outer-lu:focus,
.officine-outer-lu:focus {
    border-color: rgba(79, 200, 160, 0.55);
    box-shadow: 0 0 0 3px rgba(79, 200, 160, 0.12);
}

.lote-outer-lu,
.officine-outer-lu,
.lu-main-btn-modal,
.btn-lu-close,
.btn-lu-close-success,
.sbm,
.btn-to-lote-select,
.btn-send-again,
#lot-confirm-chk+label,
.add-ditails-radio-wrp label,
.btn-add-ditails-wrp,
.add-ditails-img-wrp label {
    cursor: pointer;
}

.lote-outer-lu:hover,
.officine-outer-lu:hover {
    border-color: #4fc8a066;
}

.lote-outer-lu::-webkit-scrollbar,
.officine-outer-lu::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.input-lote-title,
.sel,
.add-ditails-title {
    color: #b9d2f0eb;
    text-transform: uppercase;
}

.input-lote-title {
    display: block;
    background-color: #2563eb;
    width: fit-content;
    margin: 0px auto 14px auto;
    padding: 3px 10px;
    font-size: 9.8px;
    border-radius: 10px;
    font-weight: 800;
    text-shadow: 0 1px 4px #00000066;
    box-shadow: 0 2px 10px #2563eb66;
}

.lu-main-btn-modal,
#lu-main-frm .client-lote {
    border: 1px solid #4fc8a04d;
}

.wrp-input-lote .client-lote {
    display: block;
    width: 100%;
    height: auto !important;
    background-color: transparent;
    padding: 16px;
    border-radius: 16px;
    outline: none;
    font-size: 36px;
    font-weight: 800;
    font-family: 'Sora', sans-serif;
    text-align: center;
    letter-spacing: 0.04em;
    caret-color: #5ddcb0;
}

/* On input warn and errors */

.lote-input-success {
    border-color: #05966980 !important;
    box-shadow: 0 0 0 3px #0596691a;
    color: #5ddcb0;
    text-shadow: 0 0 16px #4fc8a080;
}

.lote-input-warn {
    border-color: #fbbf2480 !important;
    box-shadow: 0 0 0 3px #fbbf2414;
}

.lote-input-error {
    border-color: #ef444480 !important;
    box-shadow: 0 0 0 3px #ef444414;
}

.wrp-input-lote {
    position: relative;
}

.wrp-placehld-client-lote {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    gap: 10px;
    justify-content: center;
}

.dec-lcient-lt {
    width: 28px;
    height: 5px;
    border-radius: 3px;
    background: #4fc8a066;
}

.lote-hint-title {
    display: block;
    margin-bottom: 10px;
    font-size: 11px;
    text-align: center;
    line-height: 1.5;
}

/* Client lote */

.sbm,
.btn-send-again,
.btn-to-lote-select {
    padding: 15px;
    width: 100%;
    font-size: 15px;
    outline: none;
}

.sbm,
.btn-to-lote-select,
.btn-send-again,
.block-get-lote-from {
    margin-top: 14px;
}

.wrp-add-ditais {
    margin-top: 12px;
}

/* checkbox */

.lot-confirm {
    display: none;
    position: relative;
}

.lot-confirm-chk {
    display: block;
}

.conf-chk-title {
    margin-left: 30px;
}

.lot-confirm:has(.client_lote_less) .lot-confirm-chk {
    background: #fbbf241a;
    border: 1px solid #fbbf24b5;
    color: #fde68af2;
}

.lot-confirm:has(.client_more_err) .lot-confirm-chk {
    background: #ef44441a;
    border: 1px solid #ef444466;
    color: #fca5a5f2;
}

#lot-confirm-chk {
    display: none;
}

#lot-confirm-chk+label::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 15px;
    width: 18px;
    height: 18px;
    background: transparent;
    border-radius: 4px;
    overflow: hidden;
}

#lot-confirm-chk:checked+label::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    width: 20px;
    height: 20px;
    background-image: url(/images/lotes/lt_by_usr/check_m.svg);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 4px;
}

.client_lote_less+label::before {
    border: 1px solid #fbbf24b5;
}

.client_lote_less:checked+label::after {
    background-color: #fbbf24e6;
}

.client_more_err+label::before {
    border: 1px solid #ef444466;
}

.client_more_err:checked+label::after {
    background-color: #ef4444e6;
}

/* Radio Block */

.get-lote-from-title {
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 0 12px #f5ebd74d;
}

.get-lote-from-title,
.wrp-get-lote-from label {
    color: #f5ecd9;
    text-align: center;
}

/* !!! Ne zabit perevesti v display:none; */
.block-radio-wrp {
    display: none;
}

.wrp-get-lote-from label {
    background: #f5ebd724;
    width: 100px;
    border: 1.5px solid #f5ebd780;
    cursor: pointer;
    transition: transform 100ms linear 0s;
}

.wrp-get-lote-from label:hover {
    background: #f5ebd730;
    transform: translateY(-2px);
}

.add-ditails-radio-wrp label:hover {
    border-color: #4fc8a04d;
    background: #4fc8a00f;
    transform: translateY(-2px);
}


.wrp-get-lote-from label,
.lote-from-svg-wrp,
.add-ditails-img-wrp label,
.wrp-content-success,
.lu-clt-lote {
    border-radius: 12px;
}

.wrp-get-lote-from {
    margin-top: 20px;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
}

/* .lote-from-svg-wrp {
    display: block;
    width: 13px;
    height: 13px;
    margin: 0px auto 10px auto;
    padding: 10px 16px 15px 10px;
    background: #f5ebd733;
} */

.lote-from-svg-wrp {
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0px auto 10px auto;
    background: #f5ebd733;
}

input[name="get_lote_from"],
input[name="qty_people"],
input[name="qty_time_wait"],
input[name="is_recived_today_tie"],
input[name="lu_upload_file"] {
    display: none;
}

#get_lote_from_office:checked+label,
#get_lote_from_phone_or_site:checked+label,
#get_lote_from_isready:checked+label {
    background: #f5ebd74d;
    border-color: #faf3e1f2;
    box-shadow: 0 0 24px #f5ebd74d, 0 0 0 1px #faf3e166 inset;
}

/* block add ditails not required */
.wrp-add-ditais {
    overflow: hidden;
}

.btn-add-ditails-wrp:hover {
    background-color: #ffffff26;
}


#qty-people-10:checked+label,
#qty-people-20:checked+label,
#qty-people-40:checked+label,
#qty-people-more-40:checked+label,
#qty-time-wait-15:checked+label,
#qty-time-wait-30:checked+label,
#qty-time-wait-60:checked+label,
#qty-time-wait-2h:checked+label,
#qty-time-wait-more-2h:checked+label,
#yes-resived-today-tie:checked+label,
#not-resived-today-tie:checked+label,
.succes-titel-green {

    background: #4fc8a02e;
    border-color: #4fc8a08c;
    color: #7dedc8;
    box-shadow: 0 0 16px #4fc8a026, 0 2px 8px #00000033;
    text-shadow: 0 0 8px #4fc8a04d;
}


.btn-add-ditails-ico {
    width: 12px;
    height: 12px;
    border: 1px solid #dce8ffe0;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    box-sizing: content-box;
    line-height: 1.4;

}

.btn-add-ditails-title {
    word-spacing: 3px;
}

.btn-add-distails-arrow {
    margin-left: auto;
}

.wrp-add-ditails-main {
    border-top: 1px solid #ffffff29;
}

/* content ditails */
.wrp-add-ditails-main {
    display: none;
}

.add-ditails-title span {
    position: relative;
    top: 2px;
    display: inline-block;
    width: 3px;
    height: 11px;
    margin-right: 8px;
    border-radius: 2px;
    background: linear-gradient(180deg, #5ddcb0, #4fc8a04d);
}

.add-ditails-radio-wrp,
.add-ditails-img-wrp {
    margin-bottom: 13px;
    padding: 11px 0px 16px 0px;
    border-bottom: 1px solid #ffffff0d;
    gap: 9px;
}

.add-ditails-radio-wrp label,
#lu-user-name,
.add-ditails-img-wrp label {
    background: #ffffff0d;
}

.add-ditails-title,
.lu-user-title {
    display: inline-block;
    width: 100%;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.13em;
}

.lu-user-title {
    color: #dce8ff94;
    line-height: 19px;
}

.arr-lu {
    position: relative;
    top: 0px;
    font-size: 15px;
}


.lu-user-pref {
    color: #4fc8a0d9;
    font-weight: 600;
}

#lu-user-name {
    width: 100%;
    outline: none;
    caret-color: #5ddcb0;
}

#lu-user-name:focus {
    border-color: #4fc8a073;
}

/* img upload */

.add-ditails-img-wrp label {
    display: block;
}

.add-ditails-img-wrp label img {
    display: block;
    width: 22px;
    height: 22px;
    margin: 0px auto;
}

.add-ditails-img-wrp label {
    border: 1.5px dashed #fff4d640;
}

.add-ditails-img-wrp label:hover {
    background-color: #ffffff1f;
    border-color: #fff4d659;
}

.lu-upload-img-title {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
}

.lu-upload-img-title,
.lu-upload-img-subtitle {
    display: block;
    width: 100%;
    text-align: center;
}

.lu-upload-img-subtitle {
    margin-bottom: 10px;
}

.wrp-preview-img-lu {
    position: relative;
}

.wrp-preview-img-lu,
#preview-img-lu-small {
    display: none;
}

#preview-img-lu {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 10px;
}

#preview-img-lu-small {
    width: 40px;
    height: 40px;
    object-fit: cover;

}

.remove-img {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px 4px 8px;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

/* btn submit success */

.success-sbm {
    background: linear-gradient(135deg, #4fc8a0, #059669e6);
    border: none;
    color: #052418;
    box-shadow: 0 4px 20px #4fc8a04d;
}

/* End forms */


/* Block success */
.success-top-lu {
    margin: 16px auto 0px auto;
    border: 4.5px solid #60a5fab3;
    border-radius: 50%;

}

.img-succ-top {
    display: block;
    width: 50px;
    height: 50px;
    margin: 11px;
    padding: 12px;
    overflow: visible;
}

.succes-title-top {
    margin: 25px auto 20px;
    width: fit-content;
    padding: 2px 12px;
    font-weight: 600;
    border-width: 1px;
    border-style: solid;
    margin-bottom: 12px;
    box-shadow: none;
}

.succes-titel-blue {
    background: rgba(99, 102, 241, 0.12);
    border-color: #6366f159 !important;
    color: #a5b4fc;
}

.succes-titel-red {
    background: #ef44441a;
    border-color: #ef444440 !important;
    color: #fca5a5;
}

.succes-titel-yelow {
    background: #fbbf241f;
    border-color: #fbbf244d !important;
    color: #fde68a;
}

.success-sub-title {
    padding-top: 7px;
    text-align: center;
}

.success-sub-small {
    margin-top: 12px;
    font-weight: 500;
    text-align: center;
}

.wrp-content-success {
    margin-top: 28px;
    background-color: #ffffff14;
    border: 1px solid #ffffff29;
}

.blk-succs-row {
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid #ffffff29;
}

.blk-succs-name {
    color: #b9d2f099;
    white-space: nowrap;
}

.reslt-succes-deflt {
    color: #c9a05a;
}

.wait-time-wrp,
.qty-pepl-wrp,
.is-resiv-wrp,
.get-lte-frm-wrp,
.usr-name-onsite-wrp,
.lu-photo-lt-wrp,
.succes-titel-blue,
.succes-titel-red,
.succes-titel-yelow,
.succes-titel-green {
    display: none;
}

.lu-clt-lote {
    font-size: 22px;
    font-weight: 800;
    padding: 8px 16px 7px;
    border: 1.5px solid transparent;
    line-height: 1;
}

.btn-send-again {
    background-color: #ffffff00;

}

.btn-send-again:hover {
    background: #ffffff1f;
}

.btn-to-lote-select:hover {
    box-shadow: 0 8px 28px #4fc8a066;
    transform: translateY(-1px);
}

/* ////// */
.btn-blue-lu {
    background: rgba(99, 102, 241, 0.12);
    border-color: #6366f159;
    color: #a5b4fc;
}

.btn-blue-lu:hover {
    background: #6366f152;
}

.btn-red-lu {
    background: #ef44441a;
    border-color: #ef444466;
    color: #fca5a5f2;
}

.btn-red-lu:hover {
    background: #d9565642;
}

.btn-yellow-lu {
    background: #fbbf241a;
    border: 1px solid #fbbf24b5;
    color: #fde68af2;
}

.btn-yellow-lu:hover {
    background: #fbbf2436
}

.success-top-lu {
    position: relative;
    width: 83px;
    height: 83px;
    justify-content: center;
}

.img-succ-top {
    position: absolute;
}

.img-succ-top-green {
    opacity:0;
    background: #0596692e;
    border: 1.5px solid #5ddcb099;
    
}

.img-scucc-top-blu {
    opacity:1;
    background: #2563eb26;
    border: 1.5px solid #60a5fa99;
}

.img-succ-top-hidde {
    animation: opachidde 500ms linear 500ms forwards 1;
}

.img-succ-top-show {
    animation: opacshow 500ms linear 550ms forwards 1;
}

.img-succ-outer {
    animation: bordercolorchg 100ms linear 1.400s forwards 1;
}

@keyframes opacshow {
    from {opacity:0;}
    to {opacity: 1;}
}

@keyframes opachidde {
    from {opacity:1;}
    to {opacity: 0;}
}

@keyframes bordercolorchg {
    from {border-color:#60a5fab3;}
    to {border-color:#5ddcb099;}
}

/* ---- Start media querys */
@media screen and (min-width: 1000px) {

    /* .lu-main-blks {
        max-width: 340px;
    } */
    .lu-main-blks {
        max-width: 100%;
    }

    .wrp-get-lote-from label {
        width: 101px;
        flex: 1;
    }

    .lu-form-wrp,
    .wrp-success {
        width: 520px;
        max-height: 99vh;
    }
}

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

    .lu-main-blks,
    .lu-form-wrp,
    .wrp-success {
        width: 100%;
        max-height: 94vh;
    }

    .wrp-get-lote-from label {
        width: 100%;
    }

    .succes-title-top {
        text-align: center;
    }
}