.box-grid-calcs {
padding-bottom: 1rem;
margin-bottom: 1rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1rem;
}
.box-grid-calcs-items-icon {
display: flex;
width: 100%;
height: 300px;
text-align: center;
vertical-align: middle;
font-weight: bold;
color: #fff;
justify-content: center;
align-items: center;
cursor: pointer;
}
.box-grid-calcs-items {
overflow: hidden;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
.calc1 {
background-color: blue;
}
.bg-calc1 {
background-color: blue;
}
.calc2 {
background-color: green;
}
.bg-calc2 {
background-color: green;
}
.calc3 {
background-color: red;
}
.bg-calc3 {
background-color: red;
}
.calc4 {
background-color: orange;
}
.bg-calc4 {
background-color: orange;
}
.calc5 {
background-color: pink;
}
.bg-calc5 {
background-color: pink;
}
.bg-purple {
background-color: purple;
}
.bg-black {
background-color: black;
}
.form-row.col {
overflow: hidden;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
flex: 1 0 0%;
}
.active-selector-frp:after,
.active-selector-frp-type:after,
.active-selector-slab:after,
.active-selector-connection:after,
.active-selector-column:after {
background-image: url(//www.afzir.com/wp-content/themes/afzir/assets/images/calc/checked.webp);
width: 30px;
height: 30px;
background-size: 30px 30px;
color: var(--themeColor--50);
content: " ";
font-family: Blue-Icon-Font;
position: absolute;
bottom: 2.5rem;
}
.active-selector-calc:after,
.active-selector-beam .box-grid-calcs-items-icon:after {
background-image: url(//www.afzir.com/wp-content/themes/afzir/assets/images/calc/checked.webp);
width: 30px;
height: 30px;
background-size: 30px 30px;
color: var(--themeColor--50);
content: " ";
font-family: Blue-Icon-Font;
position: relative;
}
div#choose-form-boxs { position: relative;
margin: 0 auto;
clear: both;
}
#choose_laminate_product .col-lg-6, #hoose_fabric_product .col-lg-6  {position: relative;  display: block;}
.selection-calculator-hide {  display: none !important;}
div#box-column-1 {
background-image: url(//www.afzir.com/wp-content/themes/afzir/assets/images/calc/frp/icon/beam/1.png);
background-size: contain;
background-repeat: no-repeat;
background-color: #aaa;
}
div#box-column-2 {
background-image: url(//www.afzir.com/wp-content/themes/afzir/assets/images/calc/frp/icon/beam/2.png);
background-size: contain;
background-repeat: no-repeat;
background-color: #aaa;
}
div#box-column-3 {
background-image: url(//www.afzir.com/wp-content/themes/afzir/assets/images/calc/frp/icon/beam/3.png);
background-size: contain;
background-repeat: no-repeat;
background-color: #aaa;
}
div#box-column-4 {
background-image: url(//www.afzir.com/wp-content/themes/afzir/assets/images/calc/frp/icon/beam/4.png);
background-size: contain;
background-repeat: no-repeat;
background-color: #aaa;
}
div#box-column-5 {
background-image: url(//www.afzir.com/wp-content/themes/afzir/assets/images/calc/frp/icon/beam/5.png);
background-size: contain;
background-repeat: no-repeat;
background-color: #aaa;
}
div#box-column-6 {
background-image: url(//www.afzir.com/wp-content/themes/afzir/assets/images/calc/frp/icon/beam/6.png);
background-size: contain;
background-repeat: no-repeat;
background-color: #aaa;
}
div#box-column-7 {
background-image: url(//www.afzir.com/wp-content/themes/afzir/assets/images/calc/frp/icon/beam/7.png);
background-size: contain;
background-repeat: no-repeat;
background-color: #aaa;
}
div#box-column-8 {
background-image: url(//www.afzir.com/wp-content/themes/afzir/assets/images/calc/frp/icon/beam/8.png);
background-size: contain;
background-repeat: no-repeat;
background-color: #aaa;
}
div#box-column-9 {
background-image: url(//www.afzir.com/wp-content/themes/afzir/assets/images/calc/frp/icon/beam/9.png);
background-size: contain;
background-repeat: no-repeat;
background-color: #aaa;
}
div#box-column-10 {
background-image: url(//www.afzir.com/wp-content/themes/afzir/assets/images/calc/frp/icon/beam/10.png);
background-size: contain;
background-repeat: no-repeat;
background-color: #aaa;
}
div#box-column-11 {
background-image: url(//www.afzir.com/wp-content/themes/afzir/assets/images/calc/frp/icon/beam/11.png);
background-size: contain;
background-repeat: no-repeat;
background-color: #aaa;
}
div#box-column-12 {
background-image: url(//www.afzir.com/wp-content/themes/afzir/assets/images/calc/frp/icon/beam/12.png);
background-size: contain;
background-repeat: no-repeat;
background-color: #aaa;
}
div#box-column-13 {
background-image: url(//www.afzir.com/wp-content/themes/afzir/assets/images/calc/frp/icon/beam/13.png);
background-size: contain;
background-repeat: no-repeat;
background-color: #aaa;
}
div#box-column-14 {
background-image: url(//www.afzir.com/wp-content/themes/afzir/assets/images/calc/frp/icon/beam/14.png);
background-size: contain;
background-repeat: no-repeat;
background-color: #aaa;
}
span.text-box-calc-frp {
position: relative;
display: block;
width: 155px;
float: left;
margin-top: 200px;
}
span.text-box-calc-frp-connection {
position: relative;
display: block;
width: 155px;
float: left;
margin-top: 270px;
}
div#beam_to_column_connection_two_side {
background-image: url(//www.afzir.com/wp-content/themes/afzir/assets/images/calc/frp/icon/connections/1.png);
background-size: contain;
background-repeat: no-repeat;
background-color: #aaa;
background-position: top center;
height: 340px; position:relative;
}
div#beam_to_column_connection_three_side {
background-image: url(//www.afzir.com/wp-content/themes/afzir/assets/images/calc/frp/icon/connections/2.png);
background-size: contain;
background-repeat: no-repeat;
background-color: #aaa;
background-position: top center;
height: 340px; position:relative;
}
div#beam_to_column_connection_four_side {
background-image: url(//www.afzir.com/wp-content/themes/afzir/assets/images/calc/frp/icon/connections/3.png);
background-size: contain;
background-repeat: no-repeat;
background-color: #aaa;
background-position: top center;
height: 340px; position:relative;
}
.box-beam_to_column_connection.active-selector-connection:after,
.active-selector-column:after,
.active-selector-slab:after {
left: 25px;
}
.calculator-form-content-box {
background-color: gainsboro;
padding-top: 3em;
padding-bottom: 3em;
margin-top: 3em;
}
div#round-column-box {
background-image: url(//www.afzir.com/wp-content/themes/afzir/assets/images/calc/frp/icon/column/2.png);
background-size: 250px 250px;
background-repeat: no-repeat;
background-color: #aaa;
background-position: top center;
height: 300px; position: relative;
}
div#rectangular-column-box {
background-image: url(//www.afzir.com/wp-content/themes/afzir/assets/images/calc/frp/icon/column/1.png);
background-size: 250px 250px;
background-repeat: no-repeat;
background-color: #aaa;
background-position: top center;
height: 300px;position: relative;
}
#choose_fabric_product .col-lg-6.col-md-6.col-sm-12, #choose_laminate_product .col-lg-6.col-md-6.col-sm-12 {
position: relative;
}
span.text-box-calc-frp-column {
position: relative;
display: block;
width: 155px;
float: left;
margin-top: 250px;
}
span.text-box-calc-frp-column {
position: relative;
display: block;
width: 155px;
float: left;
margin-top: 250px;
color: #fff
}
.choose-slab-boxs-item {
position: relative;
margin: 0 auto;
clear: both;
width: 100%;
flex-basis: 100%;
max-width: 100%;
}
.active-selector-beam .box-grid-calcs-items-icon:after {
margin-top: 195px;
}
.bg-ccc {
background-color: #ccc;
color: black;
font-size: 18px;
}
.bg-555 {
background-color: #555;
color: white;
font-size: 18px;
}
.bg-333 {
background-color: #333;
color: white;
font-size: 18px;
}
div#slab_one_side_box {
background-image: url(//www.afzir.com/wp-content/themes/afzir/assets/images/calc/frp/icon/slab/1.png);
background-size: 250px 250px;
background-repeat: no-repeat;
background-color: #aaa;
background-position: top center;
height: 300px; position: relative;
}
div#slab_two_side_box {
background-image: url(//www.afzir.com/wp-content/themes/afzir/assets/images/calc/frp/icon/slab/2.png);
background-size: 250px 250px;
background-repeat: no-repeat;
background-color: #aaa;
background-position: top center;
height: 300px; position: relative;
}
span.text-box-calc-frp-slab {
position: relative;
display: block;
width: 220px;
float: left;
margin-top: 231px;
color: #fff;
}
.button-run-calculator {
position: relative;
margin: 0 auto;
margin-top: 0px;
margin-left: auto;
background-color: #f47425;
color: white;
padding: 5px 20px;
position: relative;
display: inline-block;
text-transform: uppercase;
font-size: .97em;
letter-spacing: .03em;
cursor: pointer;
font-weight: bolder;
text-align: center;
text-decoration: none;
vertical-align: middle;
border-radius: 0;
margin-top: 0;
margin-left: 1em;
text-shadow: none;
line-height: 2.4em;
min-height: 2.5em;
padding: 0 1.2em;
padding-right: 1.2em;
padding-left: 1.2em;
padding-right: 1.2em;
padding-left: 1.2em;
max-width: 100%;
-webkit-transition: border .3s,background .3s,opacity .3s,color .3s,-webkit-transform .3s,-webkit-box-shadow .3s;
transition: border .3s,background .3s,opacity .3s,color .3s,-webkit-transform .3s,-webkit-box-shadow .3s;
-o-transition: transform .3s,border .3s,background .3s,box-shadow .3s,opacity .3s,color .3s;
transition: transform .3s,border .3s,background .3s,box-shadow .3s,opacity .3s,color .3s;
transition: transform .3s,border .3s,background .3s,box-shadow .3s,opacity .3s,color .3s,-webkit-transform .3s,-webkit-box-shadow .3s;
text-rendering: optimizeLegibility;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.button.primary.expand {
background-color: #f47425;
color: white;
position: relative;
display: block;
font-family: iransans;
line-height: 40px;
border-radius: 4px;
} table th {
text-transform: none;
background-color: #4caf50;
color: #fff;
}
.result-section tbody td, .result-section table th, .result-section table tr{ border: 1px solid #ddd !important;}
tbody td{padding: 7px 10px;
padding-right: 10px;
text-align: center;
line-height: 22px; border: 1px solid #ddd;
background-color: #f2f2f2;}
.result-section {
background-image: url(//www.afzir.com/wp-content/themes/afzir/assets/images/calc/graphpaper.webp);
background-repeat: repeat;
display: none;
}
.button.is-gloss {
background-color: #000;
padding: 5px;
color: #fff;
margin: 20px;
position: relative;
display: block;
text-align: center;
cursor: pointer;
}
.resualt-loading {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #ffffffd1;
display: block;
z-index: 999999999 !important;
width: 100%;
height: 100%;
}
.loader-wait-calc {
position: relative;
width: 250px;
height: 250px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
top: 40%;
}
#content p {
margin-bottom: 10px;
text-align: justify;
font-size: 16px;
line-height: 2em;
}
h2.loader-text-wait {
color: #ff6900;
font-weight: 500;
text-align: center;
font-family: consolas;
}