.sp-loading8 {
  margin: 0px auto;
  font-size: 10px;
  position: absolute;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.7);
  border-right: 1.1em solid rgba(255, 255, 255, 0.7);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.7);
  border-left: 1.1em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
.sp-loading8,
.sp-loading8:after {
  border-radius: 50%;
  width: 4em;
  height: 4em;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}



.btnPrevOrderProcess
{
    color:#fff; font-size:15px;
        padding: 5px 20px;
    margin: 0 5px;
    border-radius: 4px;
    cursor:hand; cursor:pointer;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d7e7d+0,686868+100 */
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #686868 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#686868 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #7d7e7d 0%,#686868 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#686868',GradientType=0 ); /* IE6-9 */

-webkit-box-shadow: -1px 1px 0px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 1px 0px 0px rgba(0,0,0,0.75);
box-shadow: -1px 1px 0px 0px rgba(0,0,0,0.75);}
.btnPrevOrderProcess span
{
    vertical-align:middle !important;
}
     #dwo-can
    {
        font-size:13px; vertical-align:top;
    }
    #dwo-head {
           border-bottom: 1px dashed #D6D6D6;
    padding: 0 0 9px 0;
    background-color: #FDFDFD;
    /*position: fixed; z-index:2;*/
    width: 100%;
    }
    #dwo-head-process {
    }

        #dwo-head-process a {
            padding: 5px 30px;
           
            color: #fff;
            display: inline-block;
            text-align: center;
            position: relative;
             height:80px; vertical-align:top;
        }

        .sp-head-process-title {
            color:#D4D4D4; font-weight:normal; font-size:14px; transition:all 500ms;
        }
        .sp-head-process-title-active{
          color:#000; font-size:14px;
        }
    .sp-head-process-number
    {
         display:block; width:42px; height:42px; border-radius:50%; background-color:#f6f6f6;text-align:center; margin:0 auto;
         position:relative; transition:all 800ms; color:#e1e1e1;
    }

    .sp-head-process-number-fill {
        transform: rotateY(360deg);
        -o-transform: rotateY(360deg);
        -moz-transform: rotateY(360deg);
        -webkit-transform: rotateY(360deg);
        -ms-transform: rotateY(360deg);
        background-color: #4ECEF5;
        color:#fff;
    }
        .sp-head-process-number span {
            position: absolute;
            z-index: 2;
            font-family: Arial !important;
            
            font-size: 25px;
            top: 7px;
            left: 13px;
        }
    .sp-head-process-line
    {
        position:absolute; top:50px; left:0px; width:102%; height:3px; background-color:#f6f6f6;
    }
    .sp-head-process-line-full
    {
        position:absolute; top:0px; right:0px;height:3px; width:0px; background-color:#4ECEF5;
    }
     #dwo-body {
         text-align:right;
    }

    #dwo-majols-selection-can {
        width: 400px;
        font-size: 13px;
        background-color: #fcfcfc;
        margin: 50px 20px;
        min-height: 200px;
        display: inline-block;
        vertical-align: top;
        -webkit-box-shadow: -1px 1px 1px 0px rgba(112,112,112,1);
        -moz-box-shadow: -1px 1px 1px 0px rgba(112,112,112,1);
        box-shadow: -1px 1px 1px 0px rgba(112,112,112,1);
        border-top: 1px solid #DAD8D8;
        border-right: 1px solid #DAD8D8;
    }
    #dwo-majols-selection-head {
        padding: 5px;
        color: #fff;
        text-align: center;

        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e570e7+0,c85ec7+47,a849a3+100;Pink+3D+%233 */
background: #e570e7; /* Old browsers */
background: -moz-linear-gradient(top,  #e570e7 0%, #c85ec7 47%, #a849a3 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3',GradientType=0 ); /* IE6-9 */

    }

    .sp-majol-remove {
        vertical-align: middle !important;
        margin: 7px 0 0 0 !important;
    }
    
     #dwo-majols-selection-body {
         transition:all 500ms;
    }
     #dwo-majols-selection-foot
     {
         padding:15px;
     }
        #dwo-majols-selection-body a {
            display: block;
            padding: 10px;
            border-bottom: 1px solid #e1e1e1;
         }

            #dwo-majols-selection-body a span {
                margin: 0 5px; cursor:hand; cursor:pointer;
            }
    #dwo-majols-can {
        width: 400px;
        font-size: 13px;
        background-color: #fcfcfc;
        display: inline-block;
        -webkit-box-shadow: -1px 1px 1px 0px rgba(112,112,112,1);
        -moz-box-shadow: -1px 1px 1px 0px rgba(112,112,112,1);
        box-shadow: -1px 1px 1px 0px rgba(112,112,112,1);
        margin: 50px 20px;
        border-top: 1px solid #DAD8D8;
        border-right: 1px solid #DAD8D8;
    }
    .dwo-majols-box
    {

    }
    .dwo-majols-head {
        background-color: #4ECEF5;
        padding: 5px;
        color: #fff;
        border-bottom:1px solid #fff; cursor:hand; cursor:pointer;
    }
    .dwo-majols-head span {
        
        margin:0 5px;
    }
    .dwo-majols-body{ position:relative;
    }
    .dwo-majols-body a {
        display:block; padding:10px ; border-bottom:1px solid #e1e1e1; cursor:hand; cursor:pointer;
      
    }
    #sp-majol-pointer
    {
        position:absolute; top:0px; left:0px; display:none;transition:all 400ms;z-index:9999999;

           
    background-color: #282829;
    color: #fff;
    padding: 5px;
    width: 10px;
    height: 45px;


    }
      #sp-majol-pointer span
    {
           margin: 12px -4px 0px 0px;

    }
   .dwo-majols-body .a-product-majol:hover
{
       background-color:#4ECEF5;
   }
        .dwo-majols-body a:hover {
           font-weight:bold;  
           transition:all 400ms;
        }
        .dwo-majols-body a span {
            margin:0 5px;
        }

        .dwo-majols-body a span.fa-remove {
           display:none;
        }
    #dwo-majols-selection-body .icon-info {
        display: none;
    }

.dwo-processBody {
    direction: rtl;
    text-align: right;

    display:flex; flex-direction:column;
}


#dwo-processBody-1 {
}
    #dwo-processBody-2 {
         display:none;
    }

    #dwo-processBody-2-inner1 {
         width:49%; display:inline-block; vertical-align:top;
    }
    #dwo-processBody-2-inner2 {
        width: 49%;
        display: inline-block;
    }
    
     #dwo-processBody-3 {
        display: none;
    }
    #dwo-processBody-4 {
        display: none;
    }

    #dwo-foot
    {

    }
   
    .div-product-majol-descript {
        display: none;
        position: absolute; z-index:999;
        top: 0px;
        left: 0px;
        background-color: #CBE3FB;
        width: 250px;
        min-height: 100px;
        padding: 10px;
        -webkit-box-shadow: 1px 1px 1px 0px rgba(92,92,92,1);
        -moz-box-shadow: 1px 1px 1px 0px rgba(92,92,92,1);
        box-shadow: 1px 1px 1px 0px rgba(92,92,92,1);
        border: 1px solid #fff;
    }
    .div-product-majol-descript h3 {
         color:#000; border-bottom:1px dotted #fff; font-weight:bold;
    }
        .div-product-majol-descript p {
            color: rgba(92,92,92,1); text-align:justify; font-size:12px; color:#000;  
        }
    .sp-majol-help-triangle {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 15px 15px 15px;
        border-color: transparent transparent #CBE3FB transparent;
        position: absolute;
        top: -7px;
        left: 6px;
    }
    .dwo-sp-circle {
        border: 3px solid #fff;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        display: inline-block;
        text-align: center;
        vertical-align: middle !important;
        webkit-box-shadow: 1px 1px 1px 0px rgba(111, 111, 111, 0.75);
    -moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);
    box-shadow: 1px 1px 1px 0px rgba(111, 111, 111, 0.75);
    }
     .dwo-sp-circle-blue {
        border: 3px solid #4ECEF5;
         
    }
    .dwo-sp-fillCircle {
        width: 20px;
        height: 20px;
        display: inline-block;
        border-radius: 50%;
        background-color: #4ECEF5;
        vertical-align: middle !important;
        transition: all 600ms;
    }
    .dwo-sp-fillCircle-disable {
        width: 20px;
        height: 20px;
        display: inline-block;
        border-radius: 50%;
        background-color: #fff;
        vertical-align: middle !important;
        transition: all 600ms;
    }
    
     #dwo-designType-items {
        width: 300px;
    }
    #dwo-designType-items a {
         display:block; padding:5px; color:#000;
    }
        #dwo-designType-items a span {
            vertical-align: middle !important;
        }
    #dwo-logo-pic-place
    {
        width:100px; height:100px; border:1px solid #e1e1e1; display:inline-block;
    }
    .dwo-inputitem
    {
        margin:5px; padding:5px;
    }
    .dwo-inputitem label {
        width:150px; display:inline-block; vertical-align:top;
    }
        .dwo-inputitem input {
            width: 250px; border:1px solid #e1e1e1; padding:5px;
        }
        .dwo-inputitem textarea {
            width: 250px;
            border: 1px solid #e1e1e1;
            padding: 5px;
        }


.dwo-section-item {
    margin: 5px;
    padding: 5px;
    display: flex;
    
    align-items: center;
}
        .dwo-section-item label {
            width: 300px;
            display: inline-block;
            vertical-align: top;
        }
    .dwo-section-item input {
        width: 250px;
        border: 1px solid #e1e1e1;
        padding: 5px;
        margin:5px 0px;
    }
        .dwo-section-item textarea {
            width: 250px;
            border: 1px solid #e1e1e1;
            padding: 5px;
        }
        .dwo-section-item span {
            display:inline-block; vertical-align:middle; margin:0 auto; display:inline-flex; align-items:center;
        }
    #dwo-order-form-can
    {
        display:inline-block;
    }
     #dwo-order-final-descript {
         vertical-align: top;
    display: inline-block;
    margin: 15px 10px;
    width: 300px;
    text-align: justify;
    padding: 10px;
    /* font-weight: bold; */
    font-size: 13px;
    
    /*-webkit-box-shadow: -1px 1px 1px 0px rgba(0,0,0,0.4);
    -moz-box-shadow: -1px 1px 1px 0px rgba(0,0,0,0.4);
    box-shadow: -1px 1px 1px 0px rgba(0,0,0,0.4);
    border: 1px solid #fff;*/

    }
.h3-optional {
    padding: 5px;
    color: #464646;
    font-weight: bold;
    display: flex;
}
    .dwo-add-new-item {
        border: 1px solid gray;
        display: inline-block;
        padding: 5px 14px;
        margin: 0 5px;
        background-color: #808080;
        color: #fff;
    }
    .dwo-add-new-item span {
        margin:0px 0px 0px 0px;vertical-align:middle;
    }
    .sp-green-check
    {
        vertical-align:middle !important; color:#4ECEF5; font-size:20px; transition:all 600ms;
    }
    .sp-disable-check {
        vertical-align: middle !important;
        transition: all 600ms;
        color: #fff;
        font-size: 20px;
    }

    .a-dw-submit
    {
          padding:5px 20px; margin:0 5px; border-radius:4px;  font-size:15px;  cursor:hand; cursor:pointer;
         color:#fff;
         /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#49c0f0+0,2cafe3+100;Blue+3D+%2311 */
background: #49c0f0; /* Old browsers */
background: -moz-linear-gradient(top,  #49c0f0 0%, #2cafe3 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #49c0f0 0%,#2cafe3 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #49c0f0 0%,#2cafe3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0', endColorstr='#2cafe3',GradientType=0 ); /* IE6-9 */


-webkit-box-shadow: -1px 1px 1px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 1px 1px 0px rgba(0,0,0,0.75);
box-shadow: -1px 1px 1px 0px rgba(0,0,0,0.75);

    }
.a-dw-submit:hover {

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#499bea+0,207ce5+100;Blue+3d+%237 */
background: #499bea; /* Old browsers */
background: -moz-linear-gradient(top,  #499bea 0%, #207ce5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #499bea 0%,#207ce5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #499bea 0%,#207ce5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 ); /* IE6-9 */


 
}




        .a-dw-submit span
        {
            vertical-align: middle !important; margin:0 5px;
        }



        
    .a-dw-submit2
    {
          padding:5px 20px; margin:0 5px; border-radius:4px;  font-size:15px;  cursor:hand; cursor:pointer;
         color:#fff;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e570e7+0,c85ec7+47,a849a3+100;Pink+3D+%233 */
background: #e570e7; /* Old browsers */
background: -moz-linear-gradient(top,  #e570e7 0%, #c85ec7 47%, #a849a3 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #e570e7 0%,#c85ec7 47%,#a849a3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3',GradientType=0 ); /* IE6-9 */


-webkit-box-shadow: -1px 1px 1px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 1px 1px 0px rgba(0,0,0,0.75);
box-shadow: -1px 1px 1px 0px rgba(0,0,0,0.75);

    }
.a-dw-submit2:hover {

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fb83fa+0,e93cec+100;Pink+3D+%232 */
background: #fb83fa; /* Old browsers */
background: -moz-linear-gradient(top,  #fb83fa 0%, #e93cec 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #fb83fa 0%,#e93cec 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #fb83fa 0%,#e93cec 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb83fa', endColorstr='#e93cec',GradientType=0 ); /* IE6-9 */


 
}
  .a-dw-submit2 span
        {
            vertical-align: middle !important; margin:0 5px;
        }








  #dwo-processBody-5-inner{

          width: 80%; min-height:250px;
    border: 1px solid #F1F0F0;
    margin: 2% auto;
    padding: 1%;
     background-color: #FDFDFD;
        -webkit-box-shadow: -1px 1px 1px 0px rgba(0,0,0,0.4);
    -moz-box-shadow: -1px 1px 1px 0px rgba(0,0,0,0.4);
    box-shadow: -1px 1px 1px 0px rgba(0,0,0,0.4);
    text-align:center;
  }

#dwo-processBody-5-inner  img {
    width:100px; vertical-align:middle; margin:0 auto;
}
#dwo-processBody-5-inner p  {
     font-size:17px; padding:0 10px;
}





    .icon-info {
        vertical-align: middle !important;
    }

    .lb-dwo-user-input {
           background-color: #F7F7F7;
    color: #3A3939;
    border: 1px dotted #EAE8E8;
    padding: 5px;
    margin: 5px 0px;
    border-radius:5px;
         
    }
        .lb-dwo-user-input span {
            vertical-align: middle !important;
            margin: 0 5px;
        }
 
        /***********************************/

        .wo-head-title
        {
            font-weight: bold;
    border-bottom: 2px solid gray;
    color: #000;
    padding:5px 0px;
        }


        #h2-orderId
        {
             float:left; background-color:#4ECEF5; color:#fff; padding:5px;

        }
         #h2-orderId span:nth-child(1)
        {
            color:#000
        }
           #h2-orderId span:nth-child(2)
        {
            color:#fff; font-size:20px;font-family:Arial; margin:0 5px; vertical-align:middle;
        }

           .sp-wo-majol-title
           {
               margin:0 5px !important;
           }
           /*******************************************************/
         

            .blinkMajol {
                border-top:1px solid #fff;
        -webkit-animation-direction: normal;
        -webkit-animation-duration:1000ms;
        -webkit-animation-iteration-count: 4;
        -webkit-animation-name: blink;
        -webkit-animation-timing-function: ease-out;
        animation-direction: normal;
        animation-duration: 1000ms;
        animation-iteration-count:4;
        animation-name: blink;
        animation-timing-function: ease-out;
    }
            @-webkit-keyframes blink {
        0% {
            background: rgba(3, 250, 136, 1);
        }

        50% {
            background: rgba(255,0,0,0);
        }

        100% {
            background: rgba(3, 250, 136, 1);
        }
    }

    @keyframes blink {
        0% {
            background: rgba(3, 250, 136, 0.50);
        }

        50% {
            background: rgba(255,0,0,0);
        }

        100% {
            background: rgba(3, 250, 136, 0.50);
        }
    }