@font-face {
    font-family: VCR_OSD_MONO;
    src: url('VCR_OSD_MONO.ttf');
    
  }
  @font-face{
    font-family: MinecraftRegular ; 
    src:url('MinecraftRegular-Bmg3.otf');
  }
  @font-face{
    font-family: impact ; 
    src:url('impact.ttf');
  }
  @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap');
body{
  
    width:100%;
    height:600px;
}
.field{
    margin-top: -45px;
}

.loaderContainer{
    /* background-color: #0069d9; */
    width:100%;
    position: absolute;
   margin-top:180px;
   margin-left: -30px;
   overflow:hidden;
}
.loaderDiv{
    margin:auto;
    /* background-color: #393838; */
    width:15%;
    height:15%;
}
.loaderDiv img{
    width:128px;
    height:128px;
    
}
.card-header h2 a {
    font-weight: 600 !important;
    color:#000;font-family: 'Muli', sans-serif;
}
.liSpace a{
    color:#fff;
}

/* #textFab{
    height: 40px;
    width: 290px;
    border-radius: 10px;
    border: 2px solid #ccc;
} */
.card-header h2 a .fa{
    font-weight: 600 !important;
    color:rgb(73, 158, 225);
}
.card-header h2 a .fa {
    
    /* margin-left:180px; */
    transition: 0.6s ease;
    float:right;
    align-items: flex-end;
    justify-content: stretch;
}
div.show:hover div.card-header a .fa{
    transform: rotate(45deg) !important;
}
.card-header:hover h2 a .fa{
    
    transform: rotate(90deg) !important;
}

/* .card-header:hover h2 a .fa:active, .card-header:hover h2 a .fa:focus{
    
    
} */


p{
    font-size :14px;
}
.navbar-default{
    background-color: #0A0E39;
}
.liSpace {
    display: block;
    padding: 10px;
      /* border: 1px solid pink; */
}
  .nav-item a{
      color:#038fca;font-family: 'Muli', sans-serif;
  }
  .nav-link{
      background-color: #fff;

  }
  .leftULContainer, .MiddleUlContainer, .rightULContainer label{
      font-size:13px;
  }

.card-header{
    background:rgb(231, 231, 231);
}

.configContainer{
    /* background-color: darkgoldenrod; */
    width:100%;
    height:85%;
}
.innerContainer{
    /* background-color: #393838; */
    width:100%;
    height:100%;
    margin:auto;
    /* border:2px solid grey; */
}

.row{
    /* background-color: purple; */
    width:100%;
    height:100%;
    margin:auto;
 }
.sideContainer{
    /* background-color: white; */
    position: absolute;
    width: 100%;
    left: 0;
    height:530px; 
    /* overflow-y:scroll;  */
    
}


  
 
  .custom-btn{
      background-color: #e7e7e7;
      border:none;
      display: inline-block;
      padding:1rem 1rem 1rem 1rem;
      margin-top: 0.1rem;
      /* margin-left: -0.7rem; */
      text-align:center;
      color:#393838;
      font-size: 80%;
      font-weight: 480;
      letter-spacing: 0.1em;
  }
  /* .custom-btn img{
      width:15%;
  } */
  #longCanvas{
    background-image: url("../img/transLong.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;	 width:100%!important;
    /* display:none; */
  }
  .canvas-container{width:100%!important;}
  #kneeCanvas{
    background-image: url("../img/transKnee.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;	 width:100%!important;
    /* display:none;  */
  }
  #longAnkleCanvas{
    background-image: url("../img/transLongAnkle.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;	  width:100%!important;
    /* display:none; */
  }
  #mediumAnkleCanvas{
    background-image: url("../img/transMediumAnkle.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;	 width:100%!important;
    /* display:none;  */
  }
  #ankleCanvas{
    background-image: url("../img/Ankle.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;	  width:100%!important;
    /* display:none; */
  }


  #canvas{
    width:100%;
    height:100%;
    /* border:1px solid grey; */
}
#canvas1{
    width:100%;
    height:100%;
    /* border:1px solid grey; */
}
.bottomContainer{
   
       width: 100%;
    float: left;
    /* margin-right: 35px; */
    /* height: 70px; */
    text-align: center;
    padding-top: 30px;
    margin: 0px;
}
.bottomContainer p{
    font-size: 14px;
}




/* MODAL  TYPE OF MODEL*/
.modelSocksContainer{
    position: absolute;
    margin-left:8%;
    width:27%;
    margin-top:5%;
}
.close {
    color: #1185e0; 
    opacity: 1;
}
.modal-title {
    letter-spacing: 0ch;
    font-size:18px;
}
.modelSocks ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    /* background-color: red;    */
}
.modelSocks ul li{
       display: inline;
    /* background-color: #1185e0; */
    /* height: 100%; */
    position: relative;
    width: auto;
    /* height: 250px; */
    float: left;    margin-right:3px; margin-left:3px; margin-bottom:10px;
}
.float-right-2{float:right!important; margin-left:0px;}
.modelSocks ul li img{
        width:45px;
    padding-left: 4px;
    padding-bottom: 6px;
    margin-left: 0px;
    /* clear: both; */
    float: left;
}
.modelSocks ul li img:hover{
   cursor: pointer;
    border:1px solid #1185e0; 
    opacity: .7;
}
.sockTypeActive{
    border:1px solid #1185e0;  
}





/* MODAL  TYPE OF SPORTS*/
.typesOfSocksContainer{
    /* background-color: #1185e0; */
    position: absolute;
    margin-left:8%;
    width:27%;
    margin-top:9.5%;
}

.typeSport ul{
    /* background-color:green; */
    list-style-type: none;
    margin: 0;
    padding-bottom: 5px;
   /* padding-left:10px; */
    /* background-color: red;    */
     margin-left:0px; padding:0px;
}
.typeSport ul li{
   
    display: inline;
    background-color: #ffffff;
    letter-spacing: .1ch;
    line-height:20px;
    margin-left: 9px;
    /* padding-left: 50px; */
    padding: 5px 10px 5px 10px;
    border: 1px solid;
    box-shadow: 1px 3px #cccccc; font-size:13px; float:left; margin-bottom:10px;
}

.activeTypeOfSport{
    background-color: #1185e0 !important;
    color:white;  
}

.typeSport ul li:hover {
   cursor: pointer;
   background-color: #1185e0;
   color:white;
}


/* MODAL COLORS */
.colorsContainer{
    position: absolute;
    margin-left:8%;
    width:27%;
    margin-top:17%;
}

.colorOneHeading{
    /* background-color: purple; */
    margin-top:-12px;
    letter-spacing: .2ch;
    font-weight:500;
}
.colorOneImages{
    /* background-color: yellow; */
    width:100%;
    margin-top:-7px;
    padding-bottom:15px;
    /* height:50px; */
}
.colorOneImages ul{
    list-style-type: none;
    margin: 0;padding:0px;

}
.colorOneImages ul li{
   display:inline;
   padding-left:0px;
   padding-right:0px;
   margin-left:0px;
 
  
}
.colorOneImages ul li img{
    width:25px;
    padding:2px 2px 2px 2px;
    box-shadow: 1px 2px 2px #6c6c6c;
        /* border:1px solid black; */
        margin-bottom: 5px;
}
.colorOneImages ul li img:hover{
    border:2px solid #1185e0;
    cursor: pointer;
}
.colorOneImageActive{
    border:2px solid #1185e0;
}

/* MODAL  FABRIC*/
.fabricContainer{
    position: absolute;
    margin-left:8%;
    width:27%;
    margin-top:13.5%;
}

.fabrics ul{
    list-style-type: none;
    margin: 0;
    padding-bottom: 0px;
   
    /* background-color: red;    */
}
.fabrics ul li{
   padding:2px;
    letter-spacing: .2ch;
}


.modal-content{
    /* -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0);
    -moz-box-shadow: 0 5px 15px rgba(0,0,0,0);
    -o-box-shadow: 0 5px 15px rgba(0,0,0,0);
    box-shadow: 0 5px 15px rgba(0,0,0,0); */
    
}


/* MODAL  SOCKS DESIGNS*/
.sockDesignsContainer{
    position: absolute;
    margin-left:8%;
    width:27%;
    margin-top:10%;
   
}

.sockDesigns ul{
    list-style-type: none;
    margin: 0;
    padding-bottom: 0px;padding:0px;

}
.sockDesigns ul li{
    /* padding:2px; */
    display:inline;
    width:500px;
    height:500px;
    /* background-color: blue; */
    /* padding:3px 3px 3px 3px; */
 
}
.sockDesigns ul li img{
    width:106px;
     padding:10px;
}
.sockDesigns ul li img:hover{
    /* background-color: #1185e0; */
    cursor: pointer;
    border:3px solid #1185e0;
}

.sockDesignActive{
    border:3px solid #1185e0;
}

/* MODAL  EXTRA OPTIONS*/
.extraOptionContainer{
    position: absolute;
    margin-left:8%;
    width:27%;
    margin-top:10%;
   
}
.legPartHeading{
    background-color:#b0e1f6;
    height:40px;
}
.legPartHeading h6{
    margin-top:-3px;
    font-size:13px;
    font-weight: bold;
}
.legPartContentContainer{
    background-color: #f0f9fd;
}
.legPartContentInner{
    width:100%;
    margin-left:0px;
}
.normalContainerInner{
    /* background-color: purple; */
    width:100%;
    margin-left:0px;
}
.completeContainer{
    background-color: #f0f9fd;
}
.completeContainerInner{
    /* background-color: brown; */
    width:100%;
    margin-left:0px;
}
.completeContainerInner p{
    font-size:10px;
    margin-top:-5px;
    margin-left:50px;
}


.ankleContainer{
    background-color: white;
    margin-top:-10px;
}
.ankleContainerInner{
    /* background-color: blue; */
    width:100%;
    margin-left:0px;
}
.softContainerInner{
    /* background-color: blue; */
    width:100%;
    margin-left:0px;
}
.ankleInnerColor{
    /* background-color:peru; */
    width:80%;
    margin-left:25px;
}
.footerLegPartContainer{
    background-color: #f0f9fd;
}
.footerLegPartContainerInner{
  
    width:100%;
    margin-left:0px;
}

.ULwrapper{
    float:left;
}
.ULwrapper ul{
    list-style-type: none;
}

.footPartHeading{
    background-color:#b0e1f6;
    height:40px;
}
.footPartHeading h6{
    margin-top:-3px;
    font-size:13px;
    font-weight: bold;
}

/* QUNATITY */
.quantiesContainer{
    position: absolute;
    margin-left:8%;
    width:27%;
    margin-top:19.3%;
}

.quantityULLeft{
   
    float:left;
    list-style-type: none;
    /* width:50%; */ padding:0 4px;
}
.quantityULLeft li,.quantityULRight li{
  margin-left:0px;
  font-size: 13px;
  padding-bottom:10px;
  font-weight: 600;
}
.quantityULLeft li input,.quantityULRight li input{
    border-radius: 3px;
    border: 1px solid #1185e0;
    padding-left:0px;
}
.quantityULRight{
    float:right;
    list-style-type: none;
}
  /* IMAGE UPLOAD CONTAINER */
  .chooseFileContainer{
      /* background-color: chartreuse; */
      text-align:center;
  }
  .chooseFile{
      /* margin:auto; */
      /* width:50px !important; */
      /* height:10% !important; */
      /* border-radius:none !important; */
      /* background-color: #1185e0; */
      
  }



 /* --------------------------------------------------------------------------------------- */

/*  */


  
#style-3::-webkit-scrollbar-track
{
	/* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5; */
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar
{
	width: 3px;
	background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar-thumb
{
    /* background-color: #000000; */
    border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #1185e0;
}
.mesh-img {
    width: auto;
    height: 200px;
    margin-bottom: 20px;
}
.socksContainer li:nth-child(1):after {
        content: 'Long-socks';
    /* position: absolute; */
    /* bottom: 0; */
    /* left: 0; */
    font-size: 11px;
    margin-bottom: 0;
    /* line-height: 1.3; */
    /* width: 100%; */
    clear: both;
    float: left;
}
.socksContainer li:nth-child(2):after {
    content: 'Knee-socks';
    /* position: absolute; */
    /* bottom: 0; */
    /* left: 103px; */
    font-size: 11px;
    /* margin-bottom: 20px; */
    /* line-height: 1.3; */
    float: left;
    clear: both;
}
.socksContainer li:nth-child(3):after {
   content: 'Long-Ankle';
    /* position: absolute; */
    /* bottom: 0; */
    /* left: 180px; */
    font-size: 11px;
    /* margin-bottom: 20px; */
    /* line-height: 1.3; */
    float: left;
    clear: both;
}
.socksContainer li:nth-child(4):after {
       content: 'Medium Ankle';
    /* position: absolute; */
    /* bottom: 0; */
    /* left: 258px; */
    font-size: 11px;
    /* margin-bottom: 20px; */
    /* line-height: 1.3; */
    float: left;
    clear: both;
}
.socksContainer li:nth-child(5):after {
        content: 'Ankle Socks';
    /* position: absolute; */
    /* bottom: 0; */
    /* left: 355px; */
    font-size: 11px;
    /* margin-bottom: 20px; */
    /* line-height: 1.3; */
    float: left;
    clear: both;
}
#delete1{
    color:red;
    border-radius: 20px;
}
#add1{
    color:#00f;
    border-radius: 20px;
}
p.border-bottom{margin-bottom:0px;}
.colors{margin-top:10px;}
#abcd .card{
border-bottom: 1px solid #ccc !important;
margin-bottom: 5px !important;
}
#abcd .card .card-header{
    padding: 0rem 1.25rem !important;
    }

#accordionExample .card{
    border-bottom: 1px solid #ccc !important;
}
#extraOption input[type=checkbox]{
    width: 25px;
    height: 15px;
    margin: 10px 5px;
}
.price{
    top:10px;
    position: absolute;
    right: 0px;
    color:#000;box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12)
;
background-color:#f7f7f7;   
}
.addfix .price{
    top:10px;
    position: absolute;
    right: 0px;
    color:#000;
    width:auto;
}
#add, #delete{
    font-size:21px;
}

.t-cost{
    display:inline-block;
}
.t-cost input{
    width:25%;
}

.ad-im{
    border: 1px solid;
    padding: 50px;
}
.nav-tabs .nav-link.active {
    color: #ffffff !important;
    background-color: #0069d9 !important;
    
}

#text1 .colorOneImages ul li{
    margin-left:0px !important;
}
#lines .lineclr ul li{
    margin-left: 0px !important;
}
.custom-file{
    border: 2px solid;
    height: 130px;
}
/*#horizontal:focus, #vertical:focus, #lines-btn:focus, #small-font:focus, #large-font:focus{*/
/*    background-color:#0069d9;*/
/*    color:#fff;*/
/*}*/

.alignText.active, .fontalign.active, .lineAlign.active{
    background-color:#0069d9 !important;
    color:#fff !important;
}

#horizontal, #vertical, #small-font, #large-font{
    background-color:#ccc;
    border:1px solid #0069d9;
}

.custom-file-label::after{
    content:'' !important;
    background: none;
}
.custom-file-label{
    height: calc(1.5em + 1.75rem + 2px) !important;
    border: none !important;
}
.custom-file-input{
    height: calc(2.5em + 0.75rem + 2px) !important;
}
.nav-tabs{
    border:none !important;
}
@media(min-width:768px){
    .modal.left.fade .modal-dialog{
		left: -67%;;
		-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
		   -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
		     -o-transition: opacity 0.3s linear, left 0.3s ease-out;
            transition: opacity 0.3s linear, left 0.3s ease-out;
            width:33%;
    }
    .modal-footer{
        display:none !important;
    }
}

@media(max-width:600px){
    .sideContainer{
        width: 100%;
    left: 0;
    height: 330px !important;
    position: relative;
    }
    .bottomContainer {
        /* width: 88%; */
        float: right;
        /* margin-right: 35px; */
        /* height: 70px; */
        padding: 15px;
        margin-top: 71px !important;
    }
    .hi-100, .dummy1, #img-view{
        height:100% !important;
    }
    .price {
    top: 10px;
    position: absolute;
    left: 18px !important;
    color: #000;
    float:left !important;
    }
    .addfix canvas {
                width: 100% !important;
                height: 100% !important;
            }
            .addfix .price {
    top: 10px;
    position: absolute;
    left: 0 !important;
    color: #000;
    width: 100% !important;
    float: left !important;
}
.col-sm-8.addfix{
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-top: 30px;
    float: left;
    left: 24px !important;
}
#img-view{
        margin-left: -118px;
}
}
#front_img, #back_img, #right_img, #left_img{
    max-width: 100%;
    height: auto;
    /*margin-left: -21px;*/
    border: 1px solid #ddd;
    box-shadow: 0px 0px 6px #bbb8b8;
}


.footer-note{
    float: right;
    margin: 7px 30px 0px 0px;
    width: 62%;
}
.addfix#main-view #canvas:before{
    margin-left:-55px;
    content:'';
}
#main-view #canvas:before{
    margin-left:-115px;
    content:'';
}

#img-view, #style-3{
    z-index:1;
}


.button-5 {
  width: auto;
    border-radius: 5px;
    background-color: #063dd8;
    background-image: #F4F200;
    background-image: -moz-linear-gradient(top, #fff 0%, #F4F200 100%);
    background-image: -webkit-linear-gradient(top, #fff 0%,#F4F200 100%);
    background-image: linear-gradient(to bottom, #8d8cff 0%,#042ab5 100%);
    background-size: 300px;
    background-repeat: no-repeat;
    background-position: 0%;
    -webkit-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
    font-family: 'Muli', sans-serif;
    font-weight: 600;color:#fff; font-size:14px;
}
.button-5:hover {
     background-position: -270%;
    transition: background 300ms ease-in-out;
    color: #fff;
}
.price-inner-content{padding:0px 10px 0px 10px;}
.price-inner-content p{font-size:15px;margin-bottom:10px;}
.price-inner-content p b{font-family: 'Muli', sans-serif;}
.price-heading h4{background-image: linear-gradient(to right top, #8192ac, #8196b0, #8299b4, #829db8, #82a1bc); color:#fff; padding:10px 0; text-align:center;}
.a2a_default_style a{margin:0 0px!important;}
.upper-canvas {width:100%!important;}

.quanties{float:left; width:100%; margin-top:10px;}