* { box-sizing: border-box;}

body { background: #333333 /*url('site/images/discrete-connector/background-black-circuit.png')*/; background-size:100%; color: #fff; font-family: "Open Sans", "Arial", "sans-serif"; font-weight: 300; overscroll-behavior:none; }

a { font-size:12px; color:#e9123d; font-weight:400; }

.red-button { background-color: #e9123d; border: 1px solid transparent; border-radius:30px; padding:12px 23px; color:#fff; text-transform:uppercase; }
.red-button:hover { background-color: #fff; border: 1px solid #333; color:#e9123d; }
.edit-button { background-color: #fff; border: 1px solid transparent; border-radius:20px; padding:7px 13px; color:#666; text-transform:uppercase; font-size:10px; font-weight: 400; }
.edit-button:hover { border: 1px solid #333; }
.edit-button img { vertical-align:middle; }
.red-button a { color:inherit; }

#full_wrapper { width:100%; max-width: 1268px; margin: 0 auto; }
#title_block { background: #333333 url('../../../../../content/dam/molex/molex-dot-com/custom-cable-creator/background-black-circuits.png') no-repeat; background-size:cover; text-align:center; }
#title_block p { margin: 0 auto; width: 100%; }
.intro-text { margin-bottom: 20px;}
.intro-text p { font-weight: 400; }
.customInfo { display: flex; align-items: center; justify-content: space-between;}
#direct_block {  width: 36%; border-radius: 6px;background-color: #e9123d; float: right;padding-top: 3px;}
#direct_block a {color: white; font-size: 15px; margin: 0px 24px;}
.redbutton { font-size: 14px; padding: 13px; padding-left: 20px; padding-right: 20px; font-weight: 400; text-decoration: underline;}
.redbutton:hover { background-color: #fff; color:#e9123d; }

.header-container { padding:20px 0 10px 0; background: #333333; margin: 20px; box-sizing: border-box; width: auto;}
.header-container img { border:0; }
a.btn_exit { display:block; float:right; font-size:11px; font-weight:400; color:#e9123d; text-transform:uppercase; text-decoration:none; }
a.btn_exit span { font-size:40px; vertical-align:middle; }

a.btn_exit { display: inline-flex; align-items: center; justify-content: center;  font-size:16px; font-weight:400; color:#E30437; text-transform:uppercase; text-decoration:none; display: flex; align-items: center;}
a.btn_exit span { font-size:40px; vertical-align:middle; margin-right: 8px; font-family: 'Arial', sans-serif;}

.header { margin-top: 25px;}
.header img { border:0;}
.header .inner { display: flex; align-items: center; justify-content: space-between;}

.connector-flex-container img { margin-right: 10px; }
.connector-flex-container { display: flex; align-items: center; }

#customCableLoader {
  position: absolute;
  left: 50%;
  top: -5%;
  z-index: 1;
  width: 120px;
  height: 120px;
  margin: 160px 0 0 -76px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

#confirmationModal{
  position:fixed; 
  top:0; 
  left:0; 
  width:100%; 
  height:100%; 
  background-color:rgba(0,0,0,0.5);
  z-index: 999;

  div{
      background-color:white; 
      margin:10% auto; 
      padding:20px; 
      width:80%; 
      max-width:50%; 
      border-radius:5px;
      h1{
          color: red;
      }
      p{
          font-size:12px;
          line-height:1.5;
          color: black;
          a{
              font-weight:bold;
              color: red;
          }
      }
      button{
        background-color: red;
      }
  }
}

h1 { font-weight: 400; color: inherit; }
h2 { display: inline-block; font-weight:400; margin: 20px 0 20px 0 !important; vertical-align:top; color: inherit;}
h3 { color:#8a8a8a; font-weight:400; margin:0; }
h4 { color: #f3f3f3; font-weight: bold; margin-top: 12px;}

hr { height:1px; border:none; color:#ccc; background-color:#ccc; width:100%; text-align:center; margin: 15px auto 0 auto; }

dl { margin: 0; padding: 0; }
.pair { display: flex; justify-content: space-between; align-items: center; }
dt, dd { width: 50%; margin: 0; padding: 4px 0; box-sizing: border-box; }
dd { text-align: left; color: #333; font-size: 12px; font-weight: 400; }
dt { text-align: right; color: #333; font-size: 12px; font-weight: 400; }

div.side-line { display:block; position:relative; width: 100%; border-top: 2px solid #565656; text-align:center; height:40px; }
div.side-line span { background-color: #333; display:inline-block; position:absolute; font-size:27px; color: #8a8a8a; margin-top:-20px; margin-left:-65px; padding:0 25px 10px 25px; }
div.flexwrap { display: -ms-flexbox; width:100%; margin-bottom:50px; -ms-flex-pack: justify; }

div.gray-panel { background-color: #f3f3f3; border-radius:3px; padding:4% 6%; }
div.border-panel { background-color: #fff; border: 1px solid #4E575F; padding:4% 6%; width: 100%;}
div.border-panel dl { margin-top: 30px;}

#start_over { text-align:center; margin-bottom:30px; margin-top:30px; font-weight: 400; font-size: 14px;} 
div.warn_custom_map { text-align:center; color: #e9123d; font-size:12px; margin-bottom: 8px; }

#progress_bar { position:relative; width:100%; background-color: #222; border-radius: 3px;  z-index:500; padding: 30px 15px 0; }
#progress_bar.fixed { position: fixed; width: 100%; top: 0; border-radius: 0; padding: 2% 0 0 0; left: 0; }

#pba,#pbb { width:100%; }
#pba { margin-left:-5%; }
#pbb { margin-left:2.5%; }
#pba div,#pbb div { display:inline-block; width: 15%;  vertical-align:top; }
#pba div { border-top: 6px solid #444;  }
#pba div:first-child { border-top:none; }
#pbb div { margin-top:-39px; text-align: center; font-size: 12px; color: #8a8a8a; text-transform: uppercase; }
#pbb div span { display:block; color: #444; font-size:9em; line-height: 0.4em; }
#pbb div:nth-child(1) { color: #eee; }
#pbb div:nth-child(1) span { color: #e9123d; }

@keyframes start_here_ani { 0% {right:65%;} 50% {right:75%;} 100% {right:65%;} }
#start_here { position:absolute; right:70%;  animation: start_here_ani 2s infinite; }
#start_here_inner { background-color:#e9123d; color:#fff; font-size:10px; border-radius:3px; padding:4px 13px; float:left; font-weight: 400; }
#start_here_arrow { position:absolute; color:#e9123d;font-size:10px; left:98%; top:32%; }

.row {display: flex; }
.col-4 { flex: 1; }
.col-4:nth-child(1) { padding-right: 30px; padding-left: 0px; }
.col-4:nth-child(2) { padding-right: 15px; padding-left: 15px; }
.col-4:nth-child(3) { padding-right: 0px; padding-left: 30px; }

#connector_a_panel, #connector_b_panel { text-align:center; position: relative; }
#side_a_wrapper, #cable_wrapper, #side_b_wrapper { width: 100%; vertical-align:top; display:inline-block; margin-right:3%; }
#side_b_wrapper { margin-right:0; }
#side_a_draw, #side_b_draw { border: 1px solid #333; border-collapse: collapse; margin-left:auto; margin-right:auto; }
#side_a_draw td, #side_b_draw td { border: 1px solid #333; color:#333; min-width:15px; min-height:15px; }
#side_a_draw_pre, #side_b_draw_pre { font-size:9px; color:#333; font-weight:800; text-transform:uppercase; }
#side_a_draw_post, #side_b_draw_post { display:none; font-size:9px; color:#333; font-weight:800; text-transform:uppercase; }
.side_a_draw_clip, .side_b_draw_clip { display:inline-block; width:50px; height:15px; background-color: #333; }
#mirror_b_div { text-align:center; margin-bottom:15px; }

#btn_clear_a.unselected { background-color: #fff; border: 1px solid #333; color:#e9123d; font-weight: 400; }
#btn_clear_a { background-color: #fff; border: 1px solid #333; color:#e9123d; font-weight: 400; }
#btn_clear_b { position:absolute; right:6%; font-weight: 400;}
#btn_save_a, #btn_mirror_b, #btn_save_b { font-weight: 400; }
#side_b_latching_img_u,#side_b_latching_img_d { width:50%; vertical-align:top; margin-left:20px; }

#btn_save_cable { display:none; margin-top:20px; font-weight: 400; }
#btn_clear_cable { font-weight: 400;}
#cable_panel { width:100%; position: relative; }
#cable_panel select { color: #000;}
/* #cable_panel select option { font-weight: 400;} */
#cable_panel label,#cable_assembly_panel label { display: block; color: #333; font-size:12px; font-weight:800; margin-top:20px; margin-bottom:2px; }
.cable_length_pic { width:100%; }
#length_indicator { position:absolute; top:24%; width:100%; text-align:center; color:#000; font-size:0.8em; z-index:10; zoom:1; }

option { font-weight: 500; }
.column-title { margin-left: 40%; margin-bottom: 5px; font-size: 25px;}
#ghost_full { display:none; position: fixed; top:0px; left: 0px; bottom: 0px; right: 0px; background-color:#000; opacity:0.7; z-index:99; zoom:1; }
select:disabled { opacity: 0.7; cursor: not-allowed; }

#cable_assembly { display:none; margin-top:40px; width:100%; }
#cable_assembly_panel { padding: 4%; }
#cable_assembly_panel div.cable_third { display:inline-block; width:25%; margin: 0 3% 24px 0; color: #000;}
#cable_ties_note { display: none; color:#333; margin-bottom:10px; }
#to_form { font-size: 14px; font-weight: 400;}
#bundling div.bundling_option { position:relative; display:inline-block; width: 17.6%; color:#000; margin-right:2%; margin-bottom:30px; vertical-align: top; } 
#bundling div:last-child { margin-right:0; } 
#bundling div img { display:block; width:100%; max-width:200px; margin-bottom:9px; } 
#bundling #cb_ties_qty_div, #bundling #cb_clips_qty_div { width:100%; margin-bottom:0; display: none; margin-top: 20px;}
.bundling_option input[type="checkbox"] { transform: scale(1.1); margin: 0 1px; vertical-align: middle; }
.bundling_option label { display: inline-block !important; vertical-align: middle; margin-left: 5px; margin-top: 0px !important;}
#heat_shrink_fade,#tape_fade,#woven_fade { display:none; position: absolute; top:0px; left: 0px; bottom: 0px; right: 0px; background-color:#aaa; opacity:0.5; z-index:99; zoom:1; }
#cb_ties_qty_div label, #cb_clips_qty_div label { display: inline-block; }
#cb_ties_qty_div select, #cb_clips_qty_div select { width:30%; color: #000; }
.cable-flex-container img { margin-right: 10px; }
.cable-flex-container { display: flex; align-items: center; }
#label_wrapper { vertical-align:top; width: 400px; }

input[type=text] { width:100%; font-size: 15px; padding:7px; border: 1px solid #ddd; border-radius:3px; box-sizing: border-box; font-weight: 500; color: #000; }
select { width:100%; font-size: 15px; padding:7px; border: 1px solid #ddd; border-radius:3px; font-weight: 500; box-sizing: border-box; }
textarea { width:100%; margin-bottom: 20px; border: 1px solid #ddd; border-radius:3px; box-sizing: border-box; font-weight: 500; color: #000; }
#label_wrapper input[type=text] { width:auto; }

div.button_div { width:100% !important; text-align: center; }

#side_b_fade,#cable_fade { position: absolute; top:0px; left: 0px; bottom: 0px; right: 0px; background-color:#aaa; opacity:0.5; z-index:99; zoom:1; }
#connector_a_popup { display:none; width:50%; min-width:300px; position: absolute; top:550px; left: 25%; background-color: #f3f3f3; border-radius:3px; z-index: 600; zoom:1; padding:3% 3%; }
#connector_a_popup h2 { color: #333; } 
#connector_a_popup h2 span { font-weight:800; } 
#connector_a_popup a.btn_exit { display:block; float:right; font-size:14px; font-weight:400; color:#e9123d; text-transform:uppercase; text-decoration:none; }
#connector_a_popup a.btn_exit span { font-size:40px; font-weight:600; vertical-align:middle; }
#connector_a_popup ul { margin-left:15px; margin-top:7px; }
#connector_a_popup li { font-weight:400; color: #333; font-size: 12px; }
#connector_a_popup label { font-weight:800; }
#connector_a_popup div.flexwrap {  margin-bottom:20px; }
#connector_a_popup div.flexwrap div { display:inline-block; width:45%; }
#flexwrap_a_pop { display: flex; justify-content: space-between; color: #333;}
#side_a_popup_pic { width:100%; max-width:252px; max-height:148px;}
#connector_a_popup div.flexwrap div label { display: block; color: #333; font-size:12px; font-weight:800; margin-bottom:2px; }
#connector_a_popup hr { margin-bottom:30px; }

#connector_b_popup { display:none; width:50%; min-width:300px; position: absolute; top:550px; left: 25%; color:#333; background-color: #f3f3f3; border-radius:3px; z-index: 600; zoom:1; padding:3% 3%; }
#connector_b_popup h2 { color: #333; } 
#connector_b_popup h2 span { font-weight:800; } 
#connector_b_popup a.btn_exit { display:block; float:right; font-size:11px; font-weight:400; color:#e9123d; text-transform:uppercase; text-decoration:none; }
#connector_b_popup a.btn_exit span { font-size:40px; font-weight:300; vertical-align:middle; }
#connector_b_popup ul { margin-left:15px; margin-top:7px; }
#connector_b_popup li { font-weight:400; color: #333; font-size: 12px; }
#connector_b_popup label { font-weight:800; }
#connector_b_popup div.flexwrap {  margin-bottom:20px; }
#connector_b_popup div.flexwrap div { display:inline-block; width:45%; vertical-align: top; }
#flexwrap_b_pop { display: flex; justify-content: space-between; color: #333;}
#side_b_popup_pic { width:100%; max-width:252px; max-height:148px;}
#connector_b_popup div.flexwrap div label { display: block; color: #333; font-size:12px; font-weight:800; margin-bottom:2px; }
#connector_b_popup div.flexwrap div label.radio_horizontal { display: inline-block; margin-right:8px; }
#side_b_latching_img { display:inline-block; float:right; width:50%; }
#connector_b_popup hr { margin-bottom:30px; }

.customize_pinout { visibility: hidden; }

#pinout_configuration { display:none; } 

#pinout_b_panel { margin-left: 1%; float:left; width: 49%; vertical-align:top; padding:2%; overflow-x: auto; }
#pinout_a_panel { margin-right: 1%; float:left; width: 49%; vertical-align:top; padding:2%; padding-bottom: 2.15%; overflow-x: auto;}
#pinout_select_a_panel,#pinout_select_b_panel { width: 35%; vertical-align:top; background-color:transparent; text-align:center; border: 1px solid #aaa; color: #aaa; border-radius:3px; }
#pinout_select_a_panel div,#pinout_select_b_panel div { width: 150px; margin: 30px auto 0 auto; } 
#pinout_a_panel_sub, #pinout_b_panel_sub { width:100%; text-align:center; padding:0;}
#pinout_a_img_wrap, #pinout_b_img_wrap { width:100%; background-color:#fff; height:150px; }
#pinout_a_img, #pinout_b_img { max-width:95%; max-height:143px; margin-top:4px; }
#c_pinout_div { float:right; margin-right:4%; display:flex; align-items: center; gap: 10px; margin-top: 33px; }
.checkbox-wrapper { padding: 3px; display: inline-block; }
.checkbox-wrapper input[type="checkbox"] { transform: scale(1.2); margin: 0; }
#c_pinout_div label { margin: 0; }
#pinout_configuration #side_a_draw td, #pinout_configuration #side_b_draw td { min-width:25px; min-height:25px; }
.pinout-flex-container img { margin-right: 10px; }
.pinout-flex-container { display: flex; align-items: center; }
#customize_pinout { margin-left:20px; background-color: #e9123d; font-size: inherit; color: inherit; font-weight: 400;}
#customize_pinout img { vertical-align:middle; padding-right: 5px;}

.wire_panel { display:none; position: absolute; width:100%; top:1000px; max-width: 1268px; margin: 0 auto; background-color:#333; z-index:100; zoom:1; }
.wire_panel_left { display:inline-block; width:55%; background-color: #f3f3f3; padding: 5%; color:#333; }
.wire_panel_left h2 { color:#333; margin-bottom:5px; }
#wire_panel_links { text-align:center; }
#wire_panel_links a { margin: 0 10px; }
.wire_draw_wrap { text-align:center; margin-bottom: 30px; overflow-x: auto; }
#pinout_b_panel .wire_draw_wrap { margin-bottom: 12px; }
.wire_draw_wrap a { margin-left: 5px; margin-right: 5px; }
.wire_draw_a { border: 2px solid #e2e2e2; border-collapse: collapse; margin-left:auto; margin-right:auto; }
.wire_draw_a td { position:relative; border: 2px solid #e2e2e2; color:#777; min-width:35px; min-height:20px; font-size:9px; font-weight:800; text-align:left; }
.wire_draw_a td div { border: 1px solid #f3f3f3; font-size:14px; font-weight:400; color:#333; margin:3px; padding:3px 6px; text-align:center; line-height: 0.5;}
.wire_draw_a td span { display:block; position: absolute; right: 0px; top: 0px; width:12px; height:8px; background-color:#f3f3f3; }
.wire_draw_a_pre { font-size:9px; color:#333; font-weight:800; text-transform:uppercase; text-align: center; }
.wire_draw_a_post { display:none; font-size:9px; color:#333; font-weight:800; text-transform:uppercase; text-align: center; margin-bottom:4%; }
.wire_draw_a_clip { display:inline-block; width:50px; height: 32px; padding:10px; background-color: #000; color:#fff; }

.wire_draw_b { border: 2px solid #e2e2e2; border-collapse: collapse; margin-left:auto; margin-right:auto; margin-bottom: 0; }
.wire_draw_b td { position:relative; border: 2px solid #e2e2e2; color:#777; min-width:30px; min-height:25px; font-size:9px; font-weight:800; text-align:left; }
.wire_draw_b td div { border: 1px solid #f3f3f3; font-size:14px; font-weight:400; color:#333; margin:3px; padding:3px 6px; text-align:center; line-height: 0.5; }
.wire_draw_b td span { display:block; position: absolute; right: 0px; top: 0px; width:12px; height:8px; background-color:#f3f3f3; }
.wire_draw_b_pre { font-size:9px; color:#333; font-weight:800; text-transform:uppercase; text-align: center; margin-top: 4%;}
.wire_draw_b_post { font-size:9px; color:#333; font-weight:800; text-transform:uppercase; text-align: center; margin-bottom:4%; }
.wire_draw_b_clip { display:inline-block; width:50px; height:32px; padding:10px; background-color: #000; color:#fff; } 

#wire_panel_right { display:none; width:35%; background-color: #333; padding: 1% 5% 3% 5%; color:#333; vertical-align:top; }
#wire_panel_right_select { display:inline-block; width:35%; min-height:500px; background-color: #333; padding: 1% 5% 3% 5%; color:#f3f3f3; vertical-align:top; }
#wire_panel_right_select > div { width: 75%; margin: 60px auto 0 auto; border: 1px solid #aaa; border-radius:3px; text-align:center; } 
#wire_panel_right_select > div > div { width: 150px; margin: 30% auto 30% auto; color: #aaa; font-size: 16px; } 
.btn_save_wire { float:right; vertical-align:bottom; font-size: 14px; font-weight: 400;}
.btn_save_wire_cancel { float:right; margin-right:20px; vertical-align:bottom; }

#wire_edit_a_panel,#wire_edit_b_panel { border: 1px solid #565656; color: #f3f3f3; padding:5%; margin-top:15px; }
#wire_edit_a_panel h3,#wire_edit_b_panel h3 { color: #f3f3f3; }
#wire_a_display,#wire_b_display { display: inline-block; border: 1px solid #565656; width:35%; margin-right:2%; padding:6px; font-weight: bold; }
#wire_a_select,#wire_b_select { width:35%; color: #333; }

#wire_color_panel { border: 1px solid #565656; color: #f3f3f3; padding:5%; }
#wire_color_panel h3 { color: #f3f3f3; }
#wire_color_panel p { font-size:11px; margin:0; }
#wire_color_panel > div { display:inline-block; width:18%; margin: 5px 3% 5px 0; border: 2px solid #333; border-radius:3px; }
#wire_color_panel > div > div { display:inline-block; box-sizing: border-box; width:100%; height:40px; border: 2px solid #333; border-radius:3px; }
#wire_color_panel > div.colorselected { border: 2px solid #666; }

#form_panel_header { display:none; position: relative; margin-top:50px; }
#form_panel_header img { vertical-align: bottom; margin-bottom: 15px;}
#form_panel { display:none; position: relative; width:100%; background-color:#f3f3f3; padding: 50px 0; margin-bottom:50px; }
#form_panel label, #form_panel h2 { color: #333; font-weight:800; box-sizing: border-box; }
#form_panel input, #form_panel select { margin-bottom:10px; color: #000; font-weight: 500;}
#additional_form_info { display:none; margin-top:30px; }
div.field {width:80%; margin: 10px auto; box-sizing: border-box;}
div.discretec_row { width:80%; margin: 10px auto; box-sizing: border-box; }
div.discretec_thirdwidth { display:inline-block; width:30%; box-sizing: border-box; margin-right:3%; }
div.discretec_halfwidth { display:inline-block; width:48%; box-sizing: border-box; margin-right:3%; }
div.discretec_fullwidth { display:block; width:80%; margin: 10px auto; box-sizing: border-box; }
div.discretec_row div:last-child { margin-right:0; }
#submit_form { margin-top:20px; font-weight: 400; font-size: 14px;}

#ghost_full { display:none; position: fixed; top:0px; left: 0px; bottom: 0px; right: 0px; background-color:#000; opacity:0.7; z-index:99; zoom:1; }

#pricing_list table { min-width:250px; }
#pricing_list table th { background-color: #333; color:#fff; padding: 5px 15px; font-size:12px; font-weight:normal; text-align:left; }
#pricing_list table td { background-color: #fff; color:#333; padding: 5px 15px; font-size:12px; text-align:left; }

#pricing_list_float { display:none; position:fixed; bottom:0px; right:0px; background-color:#e9123d; padding:10px; border: 2px solid #fff; }
#pricing_list_float h3 { text-align:center; font-weight:bold; }
#pricing_list_float td { padding: 1px 4px; }

/* Base for label styling */
/* [type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}

[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 2em;
  cursor: pointer;
} */

/* checkbox aspect */
/* [type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 1.5em; height: 1.5em;
  border: 1px solid #aaa;
  background: #fff;
  border-radius: 0px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
} */

/* checked mark aspect */
/* [type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '✓';
  position: absolute;
  top: .2em; left: .115em;
  font-size: 1.7em;
  line-height: 0.8;
  color: #df202b;
  transition: all .2s;
  font-family: Helvetica, Arial, sans-serif;
} */

/* checked mark aspect changes */
/* [type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}

[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
} */

/* disabled checkbox */
/* [type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}

[type="checkbox"]:disabled:checked + label:after {
  color: #999;
}

[type="checkbox"]:disabled + label {
  color: #aaa;
} */

/* accessibility */
/* [type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
  border: 1px dotted blue;
} */

/* hover style just for information */
/* label:hover:before {
  border: 1px solid #4778d9!important;
}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 2.5em;
    cursor: pointer;
    display: inline-block;
    color: #666;
} */

/* [type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1.7em;
    height: 1.7em;
    border: 1px solid #aaa;
    border-radius: 100%;
    background: #fff;
} */

/* [type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 1.3em;
    height: 1.3em;
    background: #df202b;
    position: absolute;
    top: 0.25em;
    left: 0.28em;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

[type="radio"]:disabled + label:before {
    background: #ccc;
}

[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
} */

/* @media only screen and (max-width: 1100px) {
	#wire_draw_a td { min-width:25px; }
	#wire_draw_a td div { margin: 1px; padding: 1px 4px; font-size:10px; }
	#wire_draw_b td { min-width:25px; }
	#wire_draw_b td div { margin: 1px; padding: 1px 4px; font-size:10px; }
}

@media only screen and (max-width: 1000px) {
	#pinout_a_panel, #pinout_b_panel { width: 90%; margin-top:5px; }
	div.discretec_halfwidth,div.discretec_thirdwidth { width: 90%; margin-top:5px; }
}

@media only screen and (max-width: 640px) {
	div.flexwrap { display:block; }
	#side_a_wrapper,#cable_wrapper,#side_b_wrapper { width: 90%; }
	#connector_a_popup { left: 15%; }
	#connector_a_popup div.flexwrap div,#connector_a_popup div.flexwrap div { width:90%; }
	#connector_a_panel, #connector_b_panel { width:90%; }
	#pinout_select_a_panel,#pinout_select_b_panel { display:none; }
	#cable_assembly_panel div { width:90%; }
}

@media only screen and (max-width: 500px) {
	#progress_bar { display:none; }
} */