/*productDescription*/
.secificationsTable caption{
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    color: #444444;
    padding-bottom: 8px;
    padding-top: 8px;
}

.secificationsTable tr,td,th{
    padding: 8px;
    border-bottom: 1px solid #dddddd;
}

tr:nth-child(even) {
    background-color: #f3f3f3;
}

.productDescriptionTitle {
    color: #444444;
    font-weight: bold;
}

.productDescription {
    font-size: 18px;
    color: #444444;
    padding:4px;
    line-height: 1.25;
}
.productDataSheet{
    font-size: 18px;
    color: #444444;
    padding:4px;
    line-height: 1.25;
    text-align: left;
}

.listTitle1 {
    color: #444444;
    font-size: 15px;
    font-weight: bold;
    text-align: right;
    width:50%;
}

.listTitle2 {
    color: #444444;
    font-size: 15px;
    font-weight: bold;
    text-align: right;
    width:10%;
}
.listTitle3 {
    color: #444444;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
}

.listTitle4 {
    color: #444444;
    font-size: 15px;
    font-weight: bold;
    text-align: right;
    width:30%;
    
}
.listTitle5 {
    color: #444444;
    font-size: 15px;
    font-weight: bold;
    text-align: right;
    width:40%;
    
}

.listInformation {
    color: #444444;
    font-size: 15px;
    text-align: left;
}

.imageInformation{
    font-size: 18px;
    color: #444444;
    padding:8px;
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin: 1px;

}

.imageTitle{
    font-size: 18px;

    color: #444444;
    padding:4px;
    margin: 1px;
    margin-top: 18px;
    font-weight: bold;

}

.secificationsTable {
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
    border-spacing: 8px;
    margin: 0px, auto;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) ;
    margin-bottom: 40px;
    margin-top: 40px;
    max-width: 1200px;
    
}
.secificationsTable tbody tr:first-of-type{
    border-top: 2px solid #229ac8;

}
.secificationsTable tbody tr:last-of-type{
    border-bottom: 2px solid #229ac8;

}
#urgent {
    color: rgb(255, 0, 0);
}

th{
    font-family: 'Open Sans', sans-serif;;
    font-size: 16px;
    font-weight: 700;
    background-color: #229ac8;
    color: #fff;
    padding-top: 8px;
    padding-bottom: 8px;
}

th.listTitle3 {
    font-family: 'Open Sans', sans-serif;;
    font-size: 16px;
    font-weight: 700;
    background-color: #229ac8;
    color: #fff;
    padding-top: 8px;
    padding-bottom: 8px;
}
#qtySetList{
    text-align: right;
}
#itemSetList{
    text-align: left;
}


@media(max-width: 650px) {
       
    .secificationsTable{
        min-width: 350px;
    }
    .listInformation{
        font-size: 16px;
    }
    .listTitle1,.listTitle2,.listTitle3,.listTitle4,.listTitle5{
        text-align: center;
        width:100%;
        font-size: 16px;
        padding: 4px; 
        display: grid;
    }
    .listInformation{
        text-align: center;
        padding: 4px;
         display: grid;
    }
    #setList td:nth-of-type(1){
        display: block;
        padding:0.75px;
        padding-top: 2px;
        padding-bottom: 2px;
    }
    #setList td:nth-of-type(1)::before{
        content:"Qty: ";
    }
    #setList td:nth-of-type(2)::before{
        content:"Item(s) ";
    }
    #setList td::before{
        font-weight: bold;
    }
    #setList .listTitle4{
        font-weight: 100;
    }
}
.mainDescription{
    text-align: center;
    font-family: 'Open Sans', sans-serif;
}
/*productDescription*/

/*AWG vs mm^2*/

.AWGMMTable{
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
    border-spacing: 8px;
    margin: 0px, auto;
    min-width: 400px;
    border-radius: 5px 5px 8 0;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) ;
    
}
.AWGMMTable tbody tr:last-of-type{
    border-bottom: 2px solid #229ac8;

}

@media(max-width: 650px) {
        .AWGMMTable{
            min-width: 300px;
        }
        .AWGMMTable,#setList th{
            display:none;
        }
        .AWGMMTable td::before{
            font-weight: bold;
            text-transform: capitalize;
        }
        .AWGMMTable td:nth-of-type(1)::before{
            content:"AWG: ";
        }
        .AWGMMTable td:nth-of-type(2)::before{
            content:"MM\00B2: ";
        }
        .AWGMMTable th{
            font-family: 'Open Sans', sans-serif;
            font-weight: bold;
            font-size: 18px;
        }
        .AWGMMTable td{
            display: block;
            padding:0.75px;
            padding-top: 2px;
            padding-bottom: 2px;
        } 

        .AWGMMTable,#setList tbody tr:first-of-type{
        border-bottom: 2px solid #229ac8;

        }
    }

.listAWGData{
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
    color: rgb(0, 0, 0);
    padding:8px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin: 1px;
    padding: 8px;
    border-bottom: 1px solid #dddddd;
}
.listMMData{
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
    color: rgb(0, 0, 0);
    padding:8px;
    margin-left: auto;
    margin-right: auto;
    margin: 1px;
    padding: 8px;
    border-bottom: 1px solid #dddddd;
    text-align: center;
}
.AWGMMTable caption{
    font-weight: bold;
    font-size: 18px;
    font-family:'Open Sans', sans-serif;;
    text-align: center;
    color: rgb(0, 0, 0);
    padding-bottom: 8px;
    padding-top: 8px;
}
.AWGMMTable th{
    font-family: 'Open Sans', sans-serif;;
    font-size: 16px;
    font-weight: 700;
    background-color: #229ac8;
    color: #fff;
    padding-top: 8px;
    padding-bottom: 8px;
    
}

.AWGMMTable tr:nth-child(even) {
    background-color: #f3f3f3;
}

/*AWG vs mm^2*/

.hidden {
    display: none;
}  
  
.unit-select {
    display: inline-block;
    position: relative;
    margin: 0px;
    width: 75px; /* Adjust width as needed */
    padding: 0;
}

.unit-select2 {
    display: grid;
    justify-content: center;
    margin: 0px;
    margin-bottom: 10px;
    width: 100%; /* Adjust width as needed */
    padding: 0;
}  

.value-input-add {
    display: inline-block;
    position: relative;
    width: 150px; /* Adjust width as needed */
    padding: 0; 
}

.value-input2 {
    display: grid;
    justify-content: center;
    width: 100%; /* Adjust width as needed */
    padding: 0; 
}
   
.control-label1 {
    width: 100%;
    font-size: 12px;
}

.control-label-add {
    position: relative;
    width: 280px;
    font-weight: bold;
    font-size: 15px;
}

.control-label2 {
    display: grid;
    justify-content: center;
    width: 100%;
    height: 20px;
    font-weight: bold;
    font-size: 25px;
}

.control-label3 {
    display: grid;
    justify-content: center;
    width: 100%;
    height: 20px;
    font-weight: bold;
    font-size: 15px;
}
input[type="number"][readonly] {
    background-color: #fff; /* Set the background color to white */
}

.main-box {
    display: flex;  
    width: 100%;
    justify-content: center;
    align-items: center;
}

.box {
    text-align: center;
    display: block;
    width: 500px;
    background-color: #fff;
    background-image: none;
}

.out-container {
    display: flex;
    justify-content: center; /* Center the in-container horizontally */
    height: 200px;
}

.in-container {
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    width: 80%;
    height: 200px;
}

.data-box {
    display: flex;
    /*0flex-wrap: wrap;*/
}

.control-label-add {
    margin-bottom: 10px; /* Add margin bottom for separation */
}

.value-unit-container {
    display: flex;
    flex-wrap: nowrap;
}

.value-input-add,
.unit-select {
    flex: 0 0 auto;
    margin-right: 0px;
}

@media (max-width: 540px) {
    .data-box {
        flex-wrap: wrap; /* Allow wrapping on smaller screens */
        text-align: center;
    }
    
    .label-row {
       flex: 0 0 100%;
    }
    
    .box {
        display: block;
        width: 350px;  
    }
    .value-unit-container {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
    }
}

/*@media (min-width: 970px) {
    .box {
        margin-left: auto;
        margin-right: auto;
    }*/