#patternDiv {
    border: dotted 2px #e6e6e6;
    background-color: #ffffff;
    overflow: scroll;
    height: 90vh;
    max-width: 80%;
}

.pt_sewing_endpoint{
    fill: #64bdc0;
    font-family: Arial, sans-serif;;
}
.pt_key{
    fill: #000000;
    font-family: Arial, sans-serif;;
}
.pt_key.pt_link{
    fill: url(#linkKeyGradient);
}
.polyline_key{
    fill: none;
    stroke-width: 0.5;
    stroke: #000000;
}
.polyline_ref{
    fill: none;
    stroke-width: 0.5;
    stroke: #eea377;
}
.polyline_facing {
    fill: none;
    stroke: #000000;
    stroke-width: 0.5;
    stroke-dasharray: 2;
}

.polyline_facing_sa{
    fill: none;
    stroke: blue;
    stroke-width: 0.5;
    stroke-dasharray: 2;
}
.polyline_sew{
    fill: none;
    stroke: #64bdc0;
    stroke-width: 0.5;
    stroke-dasharray: 2;

}
.line_key{
    fill: none;
    stroke: #000000;
    stroke-width: 0.5;
}
.polyline_ctr{
    fill: none;
    stroke: #552883;
    stroke-width: 0.5;
    stroke-dasharray: 2 1 1 1;
}
.curve_key{
    fill: none;
    stroke-width: 0.5;
    stroke: #000000;
}
.curve_facing{
    fill: none;
    stroke: #000000;
    stroke-width: 0.5;
    stroke-dasharray: 2;
}
.curve_sew{
    fill: none;
    stroke: #64bdc0;
    stroke-width: 0.5;
    stroke-dasharray: 2;

}
.circle_key{
    fill: none;
    stroke: #000000;
    stroke-width: 0.5;
}
.ellipse_key{
    fill: none;
    stroke-width: 0.5;
    stroke: #000000;
}
.rect_key{
    fill: none;
    stroke: #000000;
    stroke-width: 0.5;
}
.pt_curve{
    fill: #58d961;
    font-family: Arial, sans-serif;;
}
.pt_curve.pt_link{
    fill: url(#linkCurveGradient);
}
.dart_leg{
    fill: none;
    stroke: blue;
    stroke-width: 0.5;
    stroke-dasharray: 2;
}
.pt_pleat{
    fill: #a7a6a4;
    font-family: Arial, sans-serif;;
}
.line_guide{
    fill: none;
    stroke: #9D05FF;
    stroke-width: 0.5;
}
.line_out_pleat{
    fill: none;
    stroke: #b92600;
    stroke-width: 0.5;
    stroke-dasharray: 2;
}
.line_in_pleat{
    fill: none;
    stroke: #000eb9;
    stroke-width: 0.5;
    stroke-dasharray: 2;
}
.line_neutral_pleat{
    fill: none;
    stroke: #a7a6a4;
    stroke-width: 0.5;
    stroke-dasharray: 2;
}
.pt_blue{
    fill: blue;
    font-family: Arial, sans-serif;;
}
.pt_purple{
    fill: #552883;
    font-family: Arial, sans-serif;;
}
.pt_red{
    fill: #b92600;
    font-family: Arial, sans-serif;;
}
.pt_dkBlue{
    fill: #000eb9;
    font-family: Arial, sans-serif;;
}

.pt_ref{
    fill: #eea377;
    font-family: Arial, sans-serif;;
}
.pt_ref.pt_link{
    fill: url(#linkRefGradient);
}
.circle_ref{
    fill: none;
    stroke: #eea377;
    stroke-width: 0.5;
}
.circle_grid{
    fill: none;
    stroke: #a7a6a4;
    stroke-width: 0.5;
}
.line_ref{
    fill: none;
    stroke: #eea377;
    stroke-width: 0.5;
}
.curve_ref{
    fill: none;
    stroke-width: 0.5;
    stroke: #eea377;
}
.curve_match{
    fill: none;
    stroke: #ea0f80;
    stroke-width: 0.5;
    stroke-dasharray: 2;
}
.line_match{
    fill: none;
    stroke: #ea0f80;
    stroke-width: 0.5;
    stroke-dasharray: 2;
}

.pt_notch_match{
    fill: none;
    stroke: #ea0f80;
    stroke-width: .8;
}
.pt_parts_align{
    fill: none;
    stroke: #0bf1c3;
    stroke-width: .8;
    font-family: Arial, sans-serif;;
}
.pt_notch_align{
    fill: none;
    stroke: #000eb9;
    stroke-width: .8;
}
.pt_notch_align.pt_link{
    fill: url(#linkNotchAlignGradient);
}
.pt_notch_fr{
    fill: #ea0f80;
    font-family: Arial, sans-serif;;
}
.pt_notch_fr.pt_link{
    fill: url(#linkNotchFrGradient);
}
.pt_notch_bk{
    fill: #7700e2;
    font-family: Arial, sans-serif;;
}
.pt_notch_bk.pt_link{
    fill: url(#linkNotchBkGradient);
}
.pt_info{
    fill: darkgreen;
    font-family: Arial, sans-serif;;
}
#arrow{
    fill: darkgreen;
    stroke: none;
}
/*pattern seam allowance*/
.seam_allowance{
    fill: none;
    stroke: blue;
    stroke-width: 0.5;
}
/*pattern outline*/
.outline{
    fill: none;
    stroke: #000000;
    stroke-width: 0.5;
}
/*Reserved for software only*/
.pt_prelim{
    fill: lime;
}
.line_prelim{
    fill: none;
    stroke: lime;
    stroke-width: 0.5;
}
.ray_fash{
    fill: none;
    stroke: orangered;
    stroke-width: 0.5;
    stroke-dasharray: 2;
}

.text_grid{
    fill: #a7a6a4;
    font-family: Arial, sans-serif;
}

.line_info{
    fill: none;
    stroke: darkgreen;
    stroke-width: 0.5;
}

.line_green{
    fill: none;
    stroke: #58d961;
    stroke-width: 0.8;
}
.button{
    fill: none;
    stroke: #06c2ff;
    stroke-width: 0.5;
    stroke-dasharray: 1;
}
.buttonhole{
    fill: none;
    stroke: #06c2ff;
    stroke-width: 0.5;
}
.buttonhole_ctr{
    fill: #06c2ff;
    stroke: none;
}
.selected_layer{
    background: #caeed0;
}
.hide_item{
    display: none !important;
}
.hidden_txt{
    color:orange;
}
.hidden_active_txt{
    color: red;
}
.visible_active_txt{
    color: #399135;
}
.disabled {
    pointer-events:none;
    opacity:0.6;
}

/* These are all for multi-size grading*/
.dropdown-item {
    display: flex;
    align-items: center;
}
.grade_0_dd{
    fill: none;
    stroke: #000000;
    stroke-width: 2;
}
.grade_1_dd{
    fill: none;
    stroke: #000000;
    stroke-width: 2;
    stroke-dasharray: 4,4;
}
.grade_2_dd{
    fill: none;
    stroke: #000000;
    stroke-width: 2;
    stroke-dasharray: 8,4,2,2,2,4;
}
.grade_3_dd{
    fill: none;
    stroke: #000000;
    stroke-width: 2;
    stroke-dasharray: 2,2;
}
.grade_4_dd{
    fill: none;
    stroke: #000000;
    stroke-width: 2;
    stroke-dasharray: 2,2,4,4,2,2,4,2;
}
.grade_5_dd{
    fill: none;
    stroke: #000000;
    stroke-width: 2;
    stroke-dasharray: 8,6;
}
.grade_6_dd{
    fill: none;
    stroke: #000000;
    stroke-width: 2;
    stroke-dasharray: 2,4,4,8;
}
.grade_7_dd{
    fill: none;
    stroke: #000000;
    stroke-width: 2;
    stroke-dasharray: 4,8;
}
.grade_8_dd{
    fill: none;
    stroke: #000000;
    stroke-width: 2;
    stroke-dasharray: 8,1,1,4;
}
.grade_9_dd{
    fill: none;
    stroke: #000000;
    stroke-width: 2;
    stroke-dasharray: 8,2,4,2;
}
.grade_10_dd{
    fill: none;
    stroke: #000000;
    stroke-width: 2;
    stroke-dasharray: 1,4,6,2,1;
}
.grading_pattern_rs{
    fill: white;
}
.base-custom-bg {
    background-color: #c2fad4;
}