/* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }

 /* Firefox */
 input[type=number] {
    appearance: textfield;
     -moz-appearance: textfield;
 }

 .x2f1 {
     display: flex;
     flex-direction: column;
     gap: 0px;
     background: #fff;
     border: 1px solid #e5ebf4;
     border-radius: 18px;
     box-shadow: 0 18px 35px rgba(15, 23, 42, 0.08);
     padding: 25px;
 }

 .x2d1 {
     padding: 7px 10px 7px 5px;
     align-items: center;
 }

 .x2d2 {
     flex-direction: row;
     width: 33%;
     /* justify-content:space-between; */
     align-items: center;
     padding: 5px 2px;
 }

 .x2d1,
 .x2d2 {
     background: #fff;
     border-radius: 14px;
     display: flex;
     /* border: 1px solid #f1c1c1; */
     border: 1px solid rgba(15, 23, 42, 0.1);
     box-shadow: 0 16px 35px rgba(42, 15, 15, 0.12);
     position: relative;
 }

 .x2d1:focus-within,
 .x2d2:focus-within,
 .input-shell:focus-within {
     box-shadow: 0 16px 25px rgba(193, 6, 6, 0.15);
     /* border-color: #f11717cc; */
     border-color: #f1c1c1;
 }

 .input-shell {
     box-shadow: 0 18px 30px rgba(15, 23, 42, 0.1);
     border-radius: 16px;
     border: 1px solid rgba(15, 23, 42, 0.12);
     background: #fff;
     padding: 12px 14px;
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }

 .input-shell .x2in1,
 .x2d1 .x2in1,
 .x2d2 .x2in1 {
     background: transparent;
 }

 .x2d3 {
     background: transparent;
     padding: 0;
     gap: 10px;
     align-items: normal;
     border: none;
     box-shadow: none;
     grid-column: 1 / span 3;
 }

 .x2d4 {
     display: flex;
     gap: 5px;
     justify-content: center;
     align-items: center;
 }

 .x2d4>input {
     width: 35px;
     text-align: center;
    font-family: var(--font-01);
     font-size: 16px;
     font-weight: bold;
     color: #222;
 }

 .x2i1 {
     height: 20px;
     width: 20px;
     margin-left: 10px;
     margin-right: 10px;
 }

 .x2in1 {
     font-size: 14px;
     font-family: var(--font-01);
     padding: 5px;
     border: 0;
     width: 100%;
     color: #222;
 }

 #x2in2 {
     font-size: 16px;
     line-height: 16px;
     font-weight: normal;
     width: 100%;
 }

 .x2in1:focus {
     outline: none;
 }

 .x2lb1,
 .x2s1 {
     text-align: left;
 }

 .x2lb1 {
     display: block;
     color: #000;
     font-size: 14px;
     margin-bottom: 2px;
     font-family: var(--font-01);
     padding: 0 15px;
 }

 .x2s1 {
     color: #000000;
     font-family: var(--font-2);
     font-size: 12px;
     font-weight: normal;
     display: block;
 }

 /* .x2td1{width:30px; display:flex; align-items:center; justify-content:center;} */
 .x2i3 {
     height: 20px;
     filter: opacity(0.5)
 }

 .x2s3 {
     border-right: 1px solid #cdc1c1;
     width: 30px;
     text-align: center;
     display: flex;
     justify-content: center;
 }

 .x2bt1,
 .x2bt2 {
     background: url('../img/icons/arrow.svg') no-repeat center center;
     width: 11px;
     height: 21px;
     border: 0;
 }

 .x2bt2 {
     transform: rotate(180deg);
 }

 #x2bt3 {
     background: var(--color-5);
     color: #fff;
     font-family: var(--font-2);
     font-size: 20px;
 }

 .x2d5 {
     display: flex;
     gap: 20px;
 }

 .x2td1 {
     padding: 7px !important;
     font-size: 15px !important;
 }

 #x2bt3 {
     border-radius: 10px;
     padding: 8px 20px 3px;
     border: 3px solid var(--color5);
     box-shadow: 0px 0px 15px 1px #0005;
     width: 50%;
     font-family: var(--font-1);
     font-weight: bold;
     font-size: 16px;
     line-height: 16px;
 }

 #x2d6 {
     width: 100%;
     font-family: var(--font-1);
     font-size: 17px;
     font-weight: bold
 }

 #x2s4 {
     display: block;
     text-align: center;
     font-family: var(--font-2);
     color: #111;
     font-size: 11px;
     font-weight: normal;
     word-spacing: 2px;
     letter-spacing: 1px;
 }

 .x2u1 {
     position: absolute;
     overflow: auto;
     max-height: 250px;
     height: fit-content;
     width: 100%;
     top: 45px;
     left: 0;
     background: #fff;
     z-index: 100;
     border: 2px solid #ccc;
     border-radius: 5px;
     border-top: 0;
     display: none;
 }

 .x2l1 {
     border-bottom: 1px solid #ccc;
     padding: 7px 20px;
     font-size: 14px;
     display: flex;
 }

 .x2l1:hover {
     color: var(--color3);
     background: #e3e3e3;
 }

 .x2s5 {
     padding: 7px 20px;
     display: block;
     background: var(--color5);
     color: #fff;
 }

 .x2s8::after {
     content: "";
     width: 0;
     height: 0;
     border-left: 8px solid transparent;
     border-right: 8px solid transparent;
     border-top: 5px solid var(--color9);
     display: block;
     margin-left: 5px;
 }

 .x2s8 {
     padding: 5px;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .x2fs1 {
     border: 0;
     margin-bottom: 5px;
     display: grid;
     grid-gap: 40px 30px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
 }

 #x2p1 {
     font-size: 12px;
     color: #c96e20;
 }

 #x2p4 {
     padding: 10px 20px;
     margin: 20px 0;
     background: #e7e7e7;
     color: #222;
     font-size: 15px;
 }

 .x2lg1 {
     grid-column: 1 / span 3;
 }

 .x2lg1,
 .x2h1 {
     width: 100%;
     display: block;
     font-size: 30px;
     font-family: var(--font-01);
     color: #000;
     padding: 10px 0;
     margin: 0px 0 10px;
     font-weight: 500;

 }

 .x2h1 {
     margin: 0;
 }

 .x2lb2 {
     display: block;
    color: var(--color-04);
     font-size: 14px;
     margin-bottom: 10px;
     font-family: var(--font-01);
     padding: 0;
     font-weight: 500;
 }

.x2d17 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.x2d17 .x2d18 {
    order: 1;
}

.x2d17 #x2p2 {
    order: 2;
    margin: 0;
}

.x2d17 .ko1 {
    order: 3;
    width: 100%;
    margin: 0;
    padding: 0;
}

 .x2d18 {
     margin-right: 15px;
     padding: 10px;
    display: flex;
    align-items: center;
 }

 .x2d18>input {
     scale: 1.35;
 }


 .x2d19 {
     grid-column: 1 / span 2;
 }

 #x2d16 {
     grid-column: 1 / span 2;
 }

 .x2d20 {
     grid-column: 3 / span 2;
 }

 #x2d21 {
     align-items: end;
     /* margin-bottom: 30px; */
     gap: 30px;
     /* flex-wrap: wrap; */
     margin: 10px 0 30px;
 }

 #x2d22 {
     grid-column: 2 / span 2;
 }

 .x2d23 {
     display: flex;
     justify-content: space-around;
     gap: 30px;
     margin-bottom: 15px;
 }

 .x2d23>div {
     width: 50%;
 }

 #x2p2 {
     font-size: 14px;
 }

 #x2p3 {
     display: none;
 }

 .x2e2 {
     align-items: flex-start;
 }

 .x2e3 {
     justify-content: flex-end;
     margin-top: 30px;
 }




.x2e1 {
    background-color: var(--color-02);
    color: white;
    border: none;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    align-items: center;
    display: flex;
    justify-content: center;
}


.x2e1:hover  {
    background-color: var(--color-04);
}

 .x2e4 {
     display: none;
     margin-top: 5px;
 }


 /* summary */
 .x2u3 {
     list-style: none;
     margin-bottom: 5px;
 }

 .x2u3>li {
     display: flex;
     padding: 5px 0;
     border-top: 1px solid #ddd;
 }

 /* .x2u3 > li:nth-child(2n-1){ background:$tr_color2;} */
 .x2b1,
 .x2s7 {
     font: normal 14px var(--font2);
     padding: 5px;
 }

 .x2b1 {
     color: #222222;
     width: 30%;
     padding: 5px;
 }

 .x2s7 {
     color: #222;
 }

 .x2hh1 {
     font-size: 18px !important;
     font-weight: bold !important;
     color: #555 !important;
     padding: 10px !important;
     text-indent: 0 !important;
     background: none !important;
 }

 .x2e5 {
     display: none !important;
 }

 #x2i2 {
     border-radius: 5px;
 }

 #x2p5 {
     font-size: 14px;
 }

 .x2bt3 {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     border: none;
     background: var(--color-14);
     color: #000000;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition: background 0.2s ease, transform 0.2s ease;
     font-size: 25px;
 }

 .x2bt4 {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     border: none;
     background: var(--color-14);
     color: #000000;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition: background 0.2s ease, transform 0.2s ease;
     font-size: 25px;

 }


 @media screen and (max-width:1130px) {
     .x2d3 {
         grid-column: 1 / span 4;
     }

     #x2d15,
     #x2d24,
     #x2d25,
     #x2d26,
     #x2d27,
     #x2d28,
     #x2d29 {
         grid-column: span 2
     }

     #x2d30,
     #x2d31,
     #x2d32,
     #x2d33 {
         grid-column: span 2
     }

     #x2d21>div {
         /* width: 50%; */
     }

     .x2d2 {
         width: 100%;
         justify-content: space-evenly;
     }
 }

 @media screen and (max-width:768px) {
     #x2d16 {
         grid-column: span 4
     }

     #x2d21 {
         justify-content: center;
     }

     #x2d30,
     #x2d31,
     #x2d32,
     #x2d33 {
         grid-column: span 4;
     }
 }

 @media screen and (max-width: 800px) {
     .x2d2 {
         width: 48%;
         justify-content: space-between;
     }

     .x2d5 {
         flex-wrap: wrap;
     }
 }

 @media screen and (max-width:665px) {
     .x2fs1 {
         min-width: auto;
         grid-template-columns: repeat(2, minmax(0, 1fr));
         grid-gap: 32px 18px;
     }

     .x2f1 {
         padding: 22px 20px;
     }

     .x2d5 {

         gap: 22px;
         flex-wrap: wrap;
     }

     .x2d2 {
         width: 47%;
         justify-content: space-between;
         /* flex-direction: column; */
     }

     .x2e3 {
         justify-content: center;
     }

     .x2s3 {
         border: none;
     }

     .x2d19,
     .x2d20 {
         grid-column: 1 / span 4;
     }

     #x2d15,
     #x2d24,
     #x2d25,
     #x2d26,
     #x2d27,
     #x2d28,
     #x2d29 {
         grid-column: span 4;
     }


     .x2h1 {
         text-align: center;
     }

     .x2f1 {
         margin: 15px 0 !important;
     }
 }

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

     /* #x2d15,
     .x2d19,
     .x2d20,
     #x2d24,
     #x2d25,
     #x2d26,
     #x2d27,
     #x2d28,
     #x2d29,
     #x2d30,
     #x2d31,
     #x2d32,
     #x2d33 {
         grid-column: 1 / -1;
     } */

     .x2fs1 {
         grid-template-columns: 1fr;
         grid-gap: 26px;
     }

     #x2d34 {
         flex-direction: column;
         gap: 25px !important;
     }

     .x2f1 {
         margin: 20px 0 0;
     }

     #x2d21>div {
         /* width: 100%; */
     }
     .x2e1:hover {
        width: 100%
    }

     /* 
     .x2d1,
     .x2d2 {
         width: 100%;
         padding: 12px;
         gap: 12px;
         flex-wrap: wrap;
     } */

     /* .x2d1 .x2s3,
     .x2d2 .x2s3 {
         border-right: none;
         width: auto;
         margin-bottom: 6px;
         justify-content: flex-start;
     } */

     .x2d2 {
         width: 100%;
         gap: 5px;
     }

     .x2s8 {
         align-self: flex-end;
         margin-left: 0;
     }

     .x2d4 {
         width: 32%;
         justify-content: space-between;
     }

 }

 @media screen and (max-width:420px) {
     .x2f1 {
         padding: 18px 16px;
     }

     .x2fs1 {
         grid-gap: 22px;
     }

     .x2d1,
     .x2d2 {
         padding: 10px 12px;
     }

     .x2lb1 {
         padding: 0;
     }

     .x2d4 {
         width: 46%;
     }

     /* .x2d4>input {
         width: 100%;
         max-width: 100%;
     } */

     .x2bt3,
     .x2bt4,
     .x2bt1,
     .x2bt2 {
         width: 34px;
         height: 34px;
     }
 }

 @media screen and (max-width:478px) {
     .x2d2 {
         width: 100%;
     }

     .x2e1 {
         padding: 10px 38px;
     }
 }