/*
*   DesignTool Styling
*
*   General,Layout
*/
#overlay_dt_protection {
    background:#000;
    z-index:9999;
    top:94px;
    left:0;
    position:absolute;
    height:600px;
    width:960px;
    opacity:0.8;
    display:none;
}
#overlay_dt_protection p {
    background-color:#FFF;
    padding:20px;
    color:#000;
    margin:auto;
    margin-top:200px;
    width:300px;
    height:50px;
    overflow:hidden;
    border-radius:10px;
}
#designToolLoader {
    height:120px;
    text-align:center;
    padding-top:30px; margin:15px; background:#fff; box-shadow:1px 1px 2px rgba(0,0,0,0.1); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.1); -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.1);
}
#designToolLoader img,#designToolLoader h3,#designToolLoader h4 {
    display:block;
    text-align:center;
    margin:auto;
}
#designTool br.clear {
    margin:0;
    padding:0;
    height:0;
    width:0;
    clear:both;
}

body .test-ratioMM {
    display:none;
    width:1000mm;
    height:1px;
}


.opt-borderStyle .measure-unit {
    margin-top: 1px !important;
}

.DesignElement-panel, .TextBox-panel {
    color: #333333;
    padding-bottom: 8px;
}
.DesignElement-panel label, .TextBox-panel label {
    color: #717171;
}

#designTool .right-panel .bottom {
    border-top:0;
}
#designTool .right-panel .top h1, #designTool .right-panel .bottom h1  {
    font-size: 22px;
    padding-top: 8px;
}

hr.grey {
    border:0;
    border-top:1px solid #a2a2a2;
}
a.activeTab {
    color:#333;
    font-weight:bold;
    text-decoration:none;
    cursor:default;
}
a.activeTab:hover {
    text-decoration:none;
}

/*
*   TEXTBOX AND TEXTBOX PANELS
*/
.TextBox-panel {
    display:none;
}
.TextBox-panel h1, .DesignElement-panel h1 {
    margin:0;
    padding:0;
    margin-top:0px;
    margin-bottom:10px;
    font-size:22px;
    font-style:normal;
    text-shadow:none;
    color:#fff;
}


#designTool .right-panel .top, #designTool .right-panel .bottom {background: none repeat scroll 0 0 rgba(0, 0, 0, 0);}

.TextBox-panel input[type=radio], .DesignElement-panel input[type=radio] {
    display:block;
    width:14px;
    padding:2px;
    height:18px;
    float:left;
    border:0;
    background:#E2E2E2;
    border-radius:3px;
}
.TextBox-panel input.small, .DesignElement-panel input.small {
    width:60px;
}
.TextBox-panel input.style-btn, .DesignElement-panel .tool-btn {
    width:24px;
    height:24px;
    float:left;
    font-family:Times new roman, sans-serif;
    font-size:16px;
    background:none;
    background-color:#FFF;
    color:#000;
    border-radius:2px;
    line-height:20px;
    padding:2px;
    margin-right:4px;
}
.TextBox-panel input.text-in {
    width:124px;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    margin:0;
}
.TextBox-panel .style-btn.bold {
    font-weight:bold;
}
.TextBox-panel .style-btn.italic {
    font-style:italic;
}
.TextBox-panel .style-btn.underline {
    text-decoration:underline;
}
.TextBox-panel .style-btn:hover {
    background-color:#EEE;
}
.TextBox-panel .style-btn.active {
    background-color:#D8D8D8;
}

.DesignElement-panel .opt-fixing {
    margin-top: 10px;
    display:none;
    float: left;
}
.DesignElement-panel .opt-fixing .measure-unit {
    margin-top: 0;
}

/*
*   Design Element
*/
#designElement {
    display:none;
    position:relative;
    overflow:hidden;
    cursor: inherit !important;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    overflow: visible;
}
#designElement.shadowed {
    box-shadow: 2px 2px 10px #7F7F7F;
    border: 5px solid #D7D8E8;
}
#designElement .shape-box {
    padding:0;
    margin:0;
    position:absolute;
    z-index:8;
    top:0;
    left:0;
    border:none !important;
    background-color:transparent;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
#designElement .border-box {
    padding:0;
    margin:0;
    position:absolute;
    z-index:10;
    top:0;
    left:0;
    border-color:#000;
    border-style:solid;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
#designElement .corner-border-box {
    position:absolute;
    z-index:11;
    padding:0;
    margin:0;
    background:inherit;
    background-color:inherit;
    border-color:inherit;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
#designElement.shadowed.activeDrag {
    box-shadow:5px 5px 10px #545454;
    cursor:move;
}
#designElement .textbox {
    display:block;
    color:#000;
    padding:6px;
    position:absolute;
    top:0;
    left:0;
    z-index:100;
    cursor:move;
    vertical-align:middle;
    height:auto;
    text-align:center;
    overflow: hidden;
    cursor: inherit !important;
}
#designElement .textbox .moveHandle, #designElement .imagebox .moveHandle {
    height: 1200px !important;
    width: 800px !important;
    background-color: transparent !important;
    opacity: 0 !important;
    color: transparent !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    cursor: inherit !important;
}
#designElement #textbox.active {
    border:6px dashed #0025b9;
    padding:0px;
}
#designElement #textbox:hover {
    border:6px dashed #0025b9;
    padding:0px;
}
#designElement .textbox.activeDrag {
    border:6px dashed #057F82;
    padding:0px;
}
#designElement #textbox.selected {
    border:6px dashed #0025b9;
    padding:0px;
}
#designElement .textbox input , #designElement .textbox .txtWBlock, #designElement .textbox .moveHandle {
    font-size:inherit;
    font-weight:inherit;
    font-style:inherit;
    text-decoration:inherit;
    font-family:inherit;
    color:inherit;
    border:0;
    margin:0 !important;
    padding:0 !important;
    text-indent:0 !important;
    height:inherit;
    width:auto;
    background:transparent;
    text-align:center;
    cursor: inherit !important;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
#designElement .textbox .txtWBlock {
    visibility: hidden;
    cursor: inherit !important;
}

/*
*   VIEW STYLING
*/


#designTool .view .toolbar .btn span {
    display: inline-block;
    margin: 0;
}



.fixing-dot {
    height:2px;
    width:2px;
    padding:2px;
    border-radius:3px;
    border:1px solid #6B6B6B;
    background:#FFFFFF;
    position:absolute;
    z-index:1000;
    top:auto;
    left:auto;
    right:auto;
    bottom:auto;
}

/*
 *  POPUPS
 *  Add char box
*/

.add_char_box .inner {
    position:relative;
    width:auto;
    height:300px;
}
.add_char_box .inner .heading {
    position:absolute;
    top:0;
    left:0;
    background:#E0E0E0;
    z-index:810;
    padding:10px;
    width:280px;
    font-size:14px;
}
.add_char_box ul {
    position:absolute;
    top:40px;
    left:0;
    padding:0;
    margin:0;
    z-index:805;
    height:240px;
    width:auto;
    overflow:auto;
}
.add_char_box li {
    list-style:none;
    float:left;
    height:36px;
    width:36px;
    margin:5px;
    padding:2px;
}
.add_char_box li .char {
    font-size:36px;
    height:36px;
    width:36px;
    text-align:center;
    cursor:pointer;
}
#wrapper {
    position: static;
}
/* General popup bg, images popup */
#popupBg {
    position:fixed;
    z-index:1000;
    background:rgba(0,0,0,0.8);
    display:none;
    top:0;
    left:0; width:auto !important; height:100% !important; right:0; bottom:0;
}
#images-popup,#message-popup,#help-popup {
    position: absolute;
    z-index: 3000;
    background: #FFF;
    opacity: 1;
    display: none;
    top: 321px;
    left: 50%;
    overflow-y: scroll;
    overflow-x: hidden;

    -moz-box-shadow: 0px 3px 20px #000;
    -webkit-box-shadow: 0px 3px 20px #000;
    box-shadow: 0px 3px 20px #000;
}
#message-popup * {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
#message-popup {
    box-shadow: 2px 2px 8px rgba(0,0,0,0.6);
    overflow: hidden;
    margin-left: 0 !important;
}
#images-popup .body,#message-popup .body,#help-popup .body {
    padding:20px;
    text-align:left;
    margin:0;
}

#images-popup .body .tab-navi.activeTab {
    background: #4A6491;
}
#images-popup .body .tab {
    clear:both;
}
#images-popup .close,#message-popup .close,#help-popup .close {
    position:absolute;
    top:10px;
    right:14px;
    cursor:pointer;
    font-size:40px;
    font-weight:bold;
}
#images-popup ul.images {
    padding:0;
    margin:0;
}
#images-popup ul.images li {
    padding:0;
    margin:0;
    height:100px;
    width:100px;
    list-style:none;
    float:left;
    margin-right:8px;
    margin-bottom:8px;
}
#images-popup ul.images li img {
    max-height:100px;
    max-width:100px;
    cursor:pointer;
}
#images-popup .user {
    display:none;
    overflow:auto;
    height:330px;
}
#images-popup .site {
}



.fontfamilyInput {
    cursor:pointer;
}
.fontfamilyInput:disabled {
    background-color:#FFF;
}
.imagebox {
    position:absolute;
    top:0;
    left:0;
    z-index:200;
    padding:1px;
    overflow: hidden;
    cursor:move;
}
.imagebox img {
    cursor:move;
}
.imagebox:hover {
    border:0;
    border-right:1px dashed #aaa;
    border-bottom:1px dashed #aaa;
}
.imagebox.active {
    border-right:1px dashed #0025b9;
    border-bottom:1px dashed #0025b9;
}

.imagebox .ui-resizable-e { width: 30px; right: -1px;}
.imagebox .ui-resizable-s { height: 30px; bottom: -1px; }
.imagebox .ui-resizable-se { height: 30px; width: 30px; bottom: -1px; right: -5px; cursor: se-resize !important; background: none; }
.imagebox.active .ui-resizable-e, .imagebox:hover .ui-resizable-e {background:rgba(51,51,51,0.1) url(../img/touch_right.png) right center no-repeat;}
.imagebox.active .ui-resizable-s, .imagebox:hover .ui-resizable-s {background:rgba(51,51,51,0.1) url(../img/touch_down.png) bottom center no-repeat;}
.imagebox.active .ui-resizable-se, .imagebox:hover .ui-resizable-se {background:url(../img/touch_corner.png) right bottom no-repeat;}

/* STEP 1 */

.sign-type-box.checked {
    background:#d8e6fd !important;
    border:1px solid #ccc !important;
}
.sign-type-box .input {
    width: 100%;
    margin:0;
    padding:0;
    vertical-align:middle;
}
.sign-type-box .input h2 {
    font-size: 22px;
}
.sign-type-box .input b {
    line-height:30px;
    margin:0;
    padding:0;
    display:block;
    float:left;
    font-size:18px;
    width:190px;
    margin-bottom:10px;
}
.sign-type-box img {
    display: block;
    margin: auto;
    padding-bottom: 10px;
    max-width: 240px;
    max-height: 200px;
}

.sign-type-box.checked .content {
    background:#d8e6fd !important;
}
.step_selectMaterial .sign-type-box {
    text-align: center;
}
.step_selectMaterial .sign-type-box:hover .content {
    background: transparent;
}

ul.pricing-subs {
    padding:0;
    margin:0;
}
ul.pricing-subs li {
    list-style:none;
    background-color:#444;
    border-bottom:1px solid #222;
    padding:5px;
    margin:0;
    display:none;
    font-size: 15px;
}
ul.pricing-subs li.grey {
    background-color:#d7d7d7;
}

ul.pricing-subs li {
    color:#fff;
}
.pricing-subs .fixing .included {
    font-size: 12px;
    color: #868686;
}
.pricing-total {
    font-size: 1.7rem;
    background-color: #EEEEEE;
    border-bottom: 1px solid #FFFFFF;
    padding: 10px 5px;
    color: #555;
}

.pricing-total .global-currency-symbol {
   
}
hr.prices-hr {
    border:0;
    border-bottom:1px solid #CCC;
    padding:0;
    margin:0;
    margin-bottom:10px;
    margin-top:5px;
}


.tool-form .form-errors {
    background:#B76666;
    padding:10px;
    margin-top:20px;
    margin-bottom:20px;
    border-radius:6px;
    display:none;
}
.tool-form .form-errors p {
    color:#FFF;
    font-size:12px;
    line-height:14px;
    padding:0;
    margin:0;
}
.tool-form .form-errors h4 {
    font-family:Arial, sans-serif;
    color:#FFF;
    font-size:16px;
    line-height:20px;
    padding:0;
    margin:0;
    background:transparent;
}
.tool-form .inputRow {
    width:auto;
    line-height:normal; min-height:34px;
}
.tool-form .inputRow label {
    padding:2px 0 2px 0;
    margin:5px 0 5px 0;
    width:auto;
    min-height:20px;
    line-height:20px;
    display:block;
    float:none;
}
.tool-form .inputRow input {
}
.tool-form .inputRow input:focus {
}
.tool-form .inputRow select {
}
.shipping_cost_msg {
    display:none;
}
.disc_box {
    padding-bottom:10px;
}

#info_title_box {
    background: rgba(0,0,0,0.7);
    box-shadow:0 1px 3px rgba(0,0,0,0.3);
    border-radius:0;
    padding:5px;
    position:absolute;
    top:0;
    left:0;
    z-index:9900;
    line-height:18px;
    font-size:12px;
    color:#FFF;
    display:none;
}


#designToolSave li {
    list-style: none;
}

.fontFamilyLoadIndicator {
    height: 79px;
    padding-top: 91px;
    display: none;
}
#tutorial_video {
    width: 420px;
    height: 315px;
    z-index: 99;
    display: none;
}
.savingLoader {
    padding: 3.5rem;
    font-size: 2em;
}


#designPreview .elementHolder {
    width: 100%;
}
#designPreview .overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
}



#basic-modal-content {display:none;}

/* Overlay */
#simplemodal-overlay {background-color:#000;}

/* Container */
#simplemodal-container {height:520px; width:680px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
#simplemodal-container a {color:#ddd;}
#simplemodal-container a.modalCloseImg {background:url(../img/basic/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container h3 {color:#84b8d9;}
.designheadercorrection{font-size:1rem!important;}
#basic-modal-content{position:fixed;top:0;left:0; right:0; bottom:0; padding:20px;background:#fff;z-index:9999999;}
#basic-modal-content iframe{width:100%; height:260px; margin:0 auto; display:block;}
#basic-modal-content a {text-align:center;font-size:1.3rem;text-transform: uppercase;display:table;margin:0 auto;}
.myoverlay{display:none;width:100%;position:fixed;height:100%;z-index:9999998;background:rgba(0, 0, 0, 0.8);top:0;left:0;}

/*.sign-type-box.checked, .sign-type-box.checked:hover, .sign-type-box.checked:active, .sign-type-box.checked:focus{background: none repeat scroll 0 0 rgba(0, 0, 0, 0)!important;border: medium none!important;}*/

.responsive-circle1 {
    height: 2px;
    background-color: #CCCCCC;
    overflow: visible;
    position: relative;
}

.responsive-circle1::before,
.responsive-circle1::after,
.responsive-circle1 > i {
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle1 > .circle3 {
    right: 0;
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle1 > .circle1 {
    left: 33%;
    left: calc(33% - 9px); 
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle1 > .circle2 {
    left: 66%;
    left: calc(66% - 9px);
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle2 {
    height: 2px;
    background-color: #CCCCCC;
    overflow: visible;
    position: relative;
}

.responsive-circle2::before,
.responsive-circle2::after,
.responsive-circle2 > i {
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle2 > .circle3 {
    right: 0;
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle2 > .circle1 {
    left: 33%;
    left: calc(33% - 9px); 
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle2 > .circle2 {
    left: 66%;
    left: calc(66% - 9px);
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}


.responsive-circle3 {
    height: 2px;
    background-color: #CCCCCC;
    overflow: visible;
    position: relative;
}

.responsive-circle3::before,
.responsive-circle3::after,
.responsive-circle3 > i {
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle3 > .circle3 {
    right: 0;
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle3 > .circle1 {
    left: 33%;
    left: calc(33% - 9px); 
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle3 > .circle2 {
    left: 66%;
    left: calc(66% - 9px);
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle4 {
    height: 2px;
    background-color: #FF0000;
    overflow: visible;
    position: relative;
}
.responsive-circle4::before,
.responsive-circle4::after,
.responsive-circle4 > i {
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle4 > .circle3 {
    right: 0;
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}


.responsive-circle4 > .circle1 {
    left: 33%;
    left: calc(33% - 9px); 
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle4 > .circle2 {
    left: 66%;
    left: calc(66% - 9px);
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.red3 {
    height: 2px;
    background-color: #ff0000;
    overflow: visible;    
	left: 9px;
	width:calc(66% - 9px);
    position: relative;
}

.red2 {
    height: 2px;
    background-color: #ff0000;
    overflow: visible;    
	left: 9px;
	width:calc(33% - 9px);
    position: relative;
}



.responsive-circle1 {
    height: 2px;
    background-color: #CCCCCC;
    overflow: visible;
    position: relative;
}

.responsive-circle1::before,
.responsive-circle1::after,
.responsive-circle1 > i {
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle1 > .circle3 {
    right: 0;
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle1 > .circle1 {
    left: 33%;
    left: calc(33% - 9px); 
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle1 > .circle2 {
    left: 66%;
    left: calc(66% - 9px);
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle2 {
    height: 2px;
    background-color: #CCCCCC;
    overflow: visible;
    position: relative;
}

.responsive-circle2::before,
.responsive-circle2::after,
.responsive-circle2 > i {
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle2 > .circle3 {
    right: 0;
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle2 > .circle1 {
    left: 33%;
    left: calc(33% - 9px); 
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle2 > .circle2 {
    left: 66%;
    left: calc(66% - 9px);
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}


.responsive-circle3 {
    height: 2px;
    background-color: #CCCCCC;
    overflow: visible;
    position: relative;
}

.responsive-circle3::before,
.responsive-circle3::after,
.responsive-circle3 > i {
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle3 > .circle3 {
    right: 0;
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle3 > .circle1 {
    left: 33%;
    left: calc(33% - 9px); 
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle3 > .circle2 {
    left: 66%;
    left: calc(66% - 9px);
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle4 {
    height: 2px;
    background-color: #FF0000;
    overflow: visible;
    position: relative;
}
.responsive-circle4::before,
.responsive-circle4::after,
.responsive-circle4 > i {
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle4 > .circle3 {
    right: 0;
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}


.responsive-circle4 > .circle1 {
    left: 33%;
    left: calc(33% - 9px); 
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle4 > .circle2 {
    left: 66%;
    left: calc(66% - 9px);
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.red3 {
    height: 2px;
    background-color: #ff0000;
    overflow: visible;    
	left: 9px;
	width:calc(66% - 9px);
    position: relative;
}

.red2 {
    height: 2px;
    background-color: #ff0000;
    overflow: visible;    
	left: 9px;
	width:calc(33% - 9px);
    position: relative;
}

.responsive-circle1 > .circle3 {
    right: 0;
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle1 > .circle1 {
    left: 33%;
    left: calc(33% - 9px); 
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle1 > .circle2 {
    left: 66%;
    left: calc(66% - 9px);
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle2 {
    height: 2px;
    background-color: #CCCCCC;
    overflow: visible;
    position: relative;
}

.responsive-circle2::before,
.responsive-circle2::after,
.responsive-circle2 > i {
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle2 > .circle3 {
    right: 0;
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle2 > .circle1 {
    left: 33%;
    left: calc(33% - 9px); 
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle2 > .circle2 {
    left: 66%;
    left: calc(66% - 9px);
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}


.responsive-circle3 {
    height: 2px;
    background-color: #CCCCCC;
    overflow: visible;
    position: relative;
}

.responsive-circle3::before,
.responsive-circle3::after,
.responsive-circle3 > i {
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle3 > .circle3 {
    right: 0;
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle3 > .circle1 {
    left: 33%;
    left: calc(33% - 9px); 
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle3 > .circle2 {
    left: 66%;
    left: calc(66% - 9px);
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle4 {
    height: 2px;
    background-color: #FF0000;
    overflow: visible;
    position: relative;
}
.responsive-circle4::before,
.responsive-circle4::after,
.responsive-circle4 > i {
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle4 > .circle3 {
    right: 0;
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}


.responsive-circle4 > .circle1 {
    left: 33%;
    left: calc(33% - 9px); 
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle4 > .circle2 {
    left: 66%;
    left: calc(66% - 9px);
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.red3 {
    height: 2px;
    background-color: #ff0000;
    overflow: visible;    
	left: 9px;
	width:calc(66% - 9px);
    position: relative;
}

.red2 {
    height: 2px;
    background-color: #ff0000;
    overflow: visible;    
	left: 9px;
	width:calc(33% - 9px);
    position: relative;
}



.responsive-circle1 {
    height: 2px;
    background-color: #CCCCCC;
    overflow: visible;
    position: relative;
}

.responsive-circle1::before,
.responsive-circle1::after,
.responsive-circle1 > i {
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle1 > .circle3 {
    right: 0;
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle1 > .circle1 {
    left: 33%;
    left: calc(33% - 9px); 
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle1 > .circle2 {
    left: 66%;
    left: calc(66% - 9px);
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle2 {
    height: 2px;
    background-color: #CCCCCC;
    overflow: visible;
    position: relative;
}

.responsive-circle2::before,
.responsive-circle2::after,
.responsive-circle2 > i {
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle2 > .circle3 {
    right: 0;
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle2 > .circle1 {
    left: 33%;
    left: calc(33% - 9px); 
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle2 > .circle2 {
    left: 66%;
    left: calc(66% - 9px);
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}


.responsive-circle3 {
    height: 2px;
    background-color: #CCCCCC;
    overflow: visible;
    position: relative;
}

.responsive-circle3::before,
.responsive-circle3::after,
.responsive-circle3 > i {
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle3 > .circle3 {
    right: 0;
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle3 > .circle1 {
    left: 33%;
    left: calc(33% - 9px); 
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle3 > .circle2 {
    left: 66%;
    left: calc(66% - 9px);
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle4 {
    height: 2px;
    background-color: #FF0000;
    overflow: visible;
    position: relative;
}
.responsive-circle4::before,
.responsive-circle4::after,
.responsive-circle4 > i {
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle4 > .circle3 {
    right: 0;
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}


.responsive-circle4 > .circle1 {
    left: 33%;
    left: calc(33% - 9px); 
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle4 > .circle2 {
    left: 66%;
    left: calc(66% - 9px);
    background: #FF0000;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FF0000;
    position: absolute;
    content: "";
    top: -7px;
}

.red3 {
    height: 2px;
    background-color: #ff0000;
    overflow: visible;    
	left: 9px;
	width:calc(66% - 9px);
    position: relative;
}

.red2 {
    height: 2px;
    background-color: #ff0000;
    overflow: visible;    
	left: 9px;
	width:calc(33% - 9px);
    position: relative;
}