@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
body{
    font-family: "Rubik", sans-serif !important;

}
.custom-p-sm-sec{
    width: 100%;
    height: 40vh;
    background-color: red;
    position: relative;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    direction: rtl;
    flex-wrap: wrap;
    font-family: "Rubik", sans-serif ;
}
.custom-p-sm-sec h2{
    font-size: 2.5em;
    width: 100%;
    text-align: center;
    margin:0%;
    color:#fff;
    z-index: 2;
    font-family: "Rubik", sans-serif ;

}
.bg-p{
    z-index:1;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.overlay-p{
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color:rgba(0,0,0,.35);
}
.custom-p-sm-sec p{
    font-size: 1.25em;
    width: 100%;
    text-align: center;
    margin:0%;
    color:#fff;
    z-index: 2;
    font-family: "Rubik", sans-serif ;

}

.custom-sec-text{

    height: 50vh;
    width: 100%;
    display: flex;
    position: relative;

}
.sec-text-col{
    width: 50%;

    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}
.sec-text-col h3{
    width: 100%;
    margin:1% 0%;
    text-align: center;
    font-size: 2.4em;
    font-family: "Rubik", sans-serif ;

}
.sec-text-col h4{
    width: 100%;
    margin:0%;
    text-align: center;
    font-size: 1.8em;
    font-weight: 700;

}
.sec-text-col p{
    width: 80%;
    margin:0%;
    text-align: center;
    

}
.sec-text-col-row{
    width: 100%;
    height: 50%;
    display: flex;
}
.sec-text-col-item{
    width: 25%;
    display: flex;
    flex-wrap: wrap;
}
.sec-text-col-item img{
    height: 100px;
    width: 100px;
    margin: 0 auto;
    position: relative;
}
.sec-text-col-item span{
    width: 100%;
    text-align: center;
}
.custom-sec-choose-set-type{
    position: relative;
    height: 50vh;
    width: 100%;
    display: flex;
}

.sec-box-col{
    display: flex;
    align-items: center;
    justify-content:center;
    align-content:center;
    height: auto;
}
.select-set-type-box{

    width: 35%;
    margin:0.75%;
    height: 24vh;
    border: 1px solid #000;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: space-around;
    flex-wrap: wrap;
    background-color: transparent;
    cursor: pointer;
    
}

.select-set-type-box:hover{
    background-color: rgba(0,0,0,.35);
}
.select-set-type-box-active{
    background-color: rgba(0,0,0,.35);

}
.select-set-type-box img{
    width: 80%;
    z-index: -1;
    height: 70%;
}
.select-set-type-box p{
    width: 100%;
}

.custom-sec-calc-all-c{
    width: 100%;
    position: relative;
    height: 0;
    overflow: hidden;
    font-family: "Rubik", sans-serif ;

}

.reload-screen{
    width: 100%;
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
    direction: rtl;
    font-size: 1.5em;
    font-weight: 600;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #fff;
    z-index: 100;
}

.custom-sec-first-row{
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45vh;
    align-content: center;
}
.custom-sec-calc-all-c h4{
    width: 100%;
    font-size: 2em;
    text-align: center;
    margin: 0;
    margin-top: 2.5%;
    font-family: "Rubik", sans-serif ;

}

.custom-sec-calc-all-c h4 span{
    color: rgb(95, 175, 38);
}
.select-type-of-shape{
    width: 15%;
    height: 60%;
    margin:0 2%;
    text-align: center;
    border:1px solid #000;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.custom-sec-calculator-section{
    width: 100%;
    height: 85vh;
    position: relative;
    display: flex;
}
.custom-sec-calculator-section-half{
    width: 50%;
    height: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
}

.straight_shape_container_row{
    width: 70%;
    height: 25vh;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.shape_width_inc{
    width: 100%;
    height: 10.5vh;
    position: relative;
    display: flex;
    align-content: center;
    justify-content: space-around;
    align-items: center;
}
.shape_width_inc_div{

    width: 25%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    right: -10%;
    position: relative;
}
.shape_width_inc_div h4{
    font-size: 1.05em;
    width:100%;
    text-align:center;
    margin:0%;
}
.shape_width_inc_div p{
    font-size: 1.05em;
    width:100%;
    text-align:center;
    margin:0%;
    direction: rtl;
}
.shape_width_inc_div span{
    color: gray;
    font-size: .9em;
    width:100%;
    text-align:center;
    margin:0%;
    
}
.width_straight_arrow{
    width: 35%;
    height: 1px;
    background-color: rgb(0, 0, 0);
}

.straight_shape_box{
    width: 75%;
    height: 20vh;
    background-color: aqua;
    border: 1px dashed #000;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.straight_shape_box_container{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.the_shape_span_lines{
    height: 100%;
    border-right: 1px dashed #000;
    direction: rtl;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    color: #fff;
    text-align: center;
    font-size: .65em;
}
.the_shape_span_lines_singles{
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    font-weight: 500;
    color: #fff;
    text-align: center;
    font-size: .65em;
}
.straight_shape_box span{
    font-size: 1.75em;
    color: #fff;
    position: absolute;
    left: 2.5%;
    top: 2.5%;
    font-weight: 700;
}
.shape_depth_indc{
    width: 20%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    
}
.shape_depth_indc h4{
    font-size: 1.05em;
    width: 100%;
    text-align: center;
    margin:0%;
}
.shape_depth_indc p{
    font-size: 1.05em;
    width: 100%;
    text-align: center;
    margin:0%;
    direction: rtl;
}
.calucaltor_shape_container_row{
    width: 80%;
    height: 15vh;
    margin: 5% 2.5%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-evenly;
    align-content: center;
}
.calucaltor_shape_container_row p{
    font-size: 2em;
    font-weight: 700;
    margin: 0;
}
.calucaltor_shape_container_row_calcs_row{
    width: 90%;
    height: 100%;
    background: pink;
    display: flex;
    flex-direction: row-reverse;
    font-family: "Rubik", sans-serif ;

}
.calucaltor_shape_container_div_box {

    width: 25%;
    height: 100%;
    

}
.calucaltor_shape_container_div_box h5{
    width: 100%;
    height: 5vh;
    margin: 0%;
    background: red;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Rubik", sans-serif ;

}
.calucaltor_shape_container_div_box_wrapper{

    width: 100%;
    height: 12.5vh;
    

}
.calucaltor_shape_container_div_box_wrapper_list_wrap{
    font-family: "Rubik", sans-serif ;

    width: 100%;
    height:10vh;
    background-color: rgb(217, 217, 217);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0%;

    justify-content: space-around;
}
.calucaltor_shape_container_div_box_wrapper_list_wrap select{
    width: 90% !important;
    border-radius: none !important;
    height: 40px !important;
    border: 1px solid #000 !important;
    outline:none !important;
    text-align:center !important;
    direction: rtl !important;
    border-radius: 0px !important;
}
.calucaltor_shape_container_div_box_wrapper_list_wrap_width_holder{
    width: 90%;
    height: 40px;
    border: 1px solid #000;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    direction: rtl;
}
.calucaltor_shape_container_div_box_wrapper_list_wrap_width_holder input{
    border: none !important;
    outline:none !important;
    width:40px;
    text-align: left;
}
.calucaltor_shape_container_div_box_wrapper_list_wrap_width_holder span{
    font-size: .7em;
    margin: 0;
    margin-right: .5%;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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


.custom-sec-calc-price-footer{

    border-top: 1.5px dashed #000;

    width: 100%;
    height: auto;
    direction: rtl;

}
.rash_shape_container_row{
    width: 20%;
    height: 65vh;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    top: 12.25%;
    right: .5%;
}

.rash_shape_box{
    width: 95%;
    height: 100%;
    background-color: aqua;
    border: 1px dashed #000;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.rash_shape_box_container{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
}
.rash_shape_width_inc{
    position: absolute;
    width: 100%;
    height: 50%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    transform: rotate(90deg);
    right: -100%;

}
.rash_shape_width_inc_div{

    width: 100%;
    height: 50%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    transform: rotate(-90deg);

}
.rash_shape_width_inc_div h4{
    font-size: 1.05em;
    width:100%;
    text-align:center;
    margin:0%;
}
.rash_shape_width_inc_div p{
    font-size: 1.05em;
    width:100%;
    text-align:center;
    margin:0%;
    direction: rtl;
}
.rash_shape_width_inc_div span{
    color: gray;
    font-size: .9em;
    width:100%;
    text-align:center;
    margin:0%;
    
}
.width_rash_arrow{
    width: 35%;
    height: 1px;
    background-color: rgb(0, 0, 0);
}
.rash_shape_depth_indc{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    position: relative;
    top: 2.5%;
}
.rash_shape_depth_indc h4{
    font-size: 1.05em;
    width: 100%;
    text-align: center;
    margin:0%;
}
.rash_shape_depth_indc p{
    font-size: 1.05em;
    width: 100%;
    text-align: center;
    margin:0%;
    direction: rtl;
}
.rash_shape_box span {
    font-size: 1.75em;
    color: #fff;
    position: absolute;
    left: 2.5%;
    top: 2.5%;
    font-weight: 700;
}

.the_shape_span_lines_rash {
    width: 100%;
    border: none;
    border-bottom: 1px dashed #000;
    direction: rtl;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    color: #fff;
    font-size: .65em;
    text-align: center;
}


.hat_shape_box{
    width: 95%;
    height: 80%;
    background-color: aqua;
    border: 1px dashed #000;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.hat_shape_box span {
    font-size: 1.75em;
    color: #fff;
    position: absolute;
    left: 2.5%;
    top: 2.5%;
    font-weight: 700;
}
.hat_shape_container_row {
    width: 20%;
    height: 55vh;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    top: 36.5%;
    left: 16%;
}
#shapes_calc_h_section{
    right: 5%;
    font-family: "Rubik", sans-serif ;

}
.hat_shape_width_inc{
    position: absolute;
    width: 100%;
    height: 50%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    transform: rotate(90deg);
    right: 100%;
}
.hat_shape_width_inc_div{
    width: 100%;
    height: 50%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    transform: rotate(-90deg);

}
.hat_shape_width_inc_div h4 {
    font-size: 1.05em;
    width: 100%;
    text-align: center;
    margin: 0%;
}
.hat_shape_width_inc_div p {
    font-size: 1.05em;
    width: 100%;
    text-align: center;
    margin: 0%;
    direction: rtl;
}
.hat_shape_width_inc_div span {
    color: gray;
    font-size: .9em;
    width: 100%;
    text-align: center;
    margin: 0%;
}
.hat_shape_depth_indc{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    position: relative;
    top: -.5%;
}
.hat_shape_depth_indc h4 {
    font-size: 1.05em;
    width: 100%;
    text-align: center;
    margin: 0%;
}
.hat_shape_depth_indc p {
    font-size: 1.05em;
    width: 100%;
    text-align: center;
    margin: 0%;
    direction: rtl;
}
.hat_shape_box_container{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
}

.shapes_height_the_indc{
    position: absolute;
    width: 20%;
    left: 40%;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    top: 45%;
}
.shapes_height_the_indc span{
    color: gray;
    font-size: .9em;
    width: 100%;
    text-align: center;
    margin: 0%;
}
.shapes_height_the_indc p{
    font-size: 1.05em;
    width: 100%;
    text-align: center;
    margin: 0%;
    direction: rtl;
}
.del-col{
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding-right: 5%;
}
.del-col-row{
    height: 7.5vh;
    width: 100%;
    position: relative;

}
.del-col h4{
    width: 100%;
    text-align: right;
    margin: 1.5% 0;
}
.del-col p {
    width: 70%;
    margin: 1% 0;
}

.del-col-right{
    font-size: 1.15em;
}
.all_order_info_col{
    width: 40%;
    height: auto;
    background-color: #edeaea;
    border: 1px dashed #000;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    color: #052a59;
    justify-content: center;
    padding: 2%;
    font-family: "Rubik", sans-serif ;

    
}
.all_order_info_col h5{
    font-size: 1.7em;
    margin: 2% 0;
    margin-top: 5%;
    width: 100%;
}
.all_order_info_col_inner {
    font-size: 1.2em;
    margin: 2% 0;
    margin-top: 5%;
}
.all_order_info_col_inner h5{
    margin: 0;
    font-size: 1.2em;
    width: 100%;
}
.all_order_info_col_inner p{
    margin: 0;
    font-size: 1em;
    margin: 1.5% 0;
}
.all_order_info_col_inner_row p{
    font-size: .95em;
    margin: 0;
}
.the_price_div{
    width: 100%;
    font-size: 1.5em;
    padding-right: 5%;
}
.btc-calc-button{
    font-size: 1.2em !important;
    margin-right: 5% !important;
    padding: 15px 10px !important;
    background-color: #052a59 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 150px !important;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
}


@media screen and (max-width: 767px) {
    .sec-text-col-item img {
        height: 60px;
        width: 60px;
        margin: 0 auto;
        position: relative;
    }
    .custom-sec-text {
        height: 85vh;
        width: 100%;
        display: flex;
        position: relative;
        flex-wrap: wrap;
    }
    .custom-sec-choose-set-type {
        position: relative;
        height: auto;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
    .select-type-of-shape {
        width: 15%;
        height: 50%;
        margin: 0 2%;
        text-align: center;
        cursor: pointer;
    }
    .custom-sec-first-row {
        width: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 15vh;
        align-content: center;
    }
    .all_order_info_col {
        width: 80%;
        height: auto;
        background-color: #edeaea;
        border: 1px dashed #000;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        align-items: flex-start;
        justify-content: center;
        padding: 2%;
    }
    .custom-sec-calculator-section {
        width: 100%;
        height: auto;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        flex-wrap: wrap;
        align-content: flex-start;
        min-height: 80vh;
        padding-bottom: 30%;
    }
    .custom-sec-calculator-section-half {
        width: 100%;
        height: auto;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: flex-start;
        margin-top:5%;
    }
    .calucaltor_shape_container_row {
        width: 95%;
        height: 15vh;
        margin: 5% 2.5%;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-evenly;
        align-content: center;
    }
    #shapes_calc_h_section {
        right: 0%;
        transform: scale(.85);
    }
    .rash_shape_container_row {
        width: 20%;
        height: 50vh;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        top: 23%;
        right: .5%;
    }
    .hat_shape_container_row {
        width: 20%;
        height: 46.5vh;
        position: absolute;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        top: 48.5%;
        left: 16%;
    }
    .straight_shape_box {
        width: 75%;
        height: 12vh;
    }
 
    .shapes_height_the_indc {
        position: absolute;
        width: 20%;
        left: 40%;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        top: 105%;
    }
    .calucaltor_shape_container_row_calcs_row {
        width: 92.5%;
        height: 100%;
        background: pink;
        display: flex;
        flex-direction: row-reverse;
    }
    .calucaltor_shape_container_div_box h5 {
        width: 100%;
        height: 5vh;
        margin: 0%;
        background: red;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .8em;
    }
    .calucaltor_shape_container_row p {
        font-size: 2em;
        font-weight: 700;
        margin: 0;
        margin: 0 1%;
    }
  
}