/*********************************************************************/
/****************Product Order Details Design************************/
/*******************************************************************/

.hlone {
    font-size:30px;
    font-weight:600;
}

.hltwo {
    font-size:26px;
    font-weight:600;
}

.hlthree {
    font-size:22px;
    font-weight:600;
}

.hlfour {
    font-size:20px;
    font-weight:600;
}

.hlfive {
    font-size:18px;
    font-weight:600;
}

.hlfive_1 {
    font-size:18px;
    color: #6b6b6b;
}

.hlsix {
    font-size:16px;
    font-weight:600;
}

.hlsix_1 {
    font-size:16px;
    color: #6b6b6b;
}

.hlseven {
    font-size:14px;
    font-weight:600;
}

.hlseven_1 {
    font-size:14px;
    color: #6b6b6b;
}

.hleight {
    font-size:12px;
    font-weight:600;
}

.hleight_1 {
    font-size:12px;
    color: #6b6b6b;
}

.compeordricn {
    color:green;
    font-size: 16px;
}

.compordrtxt {
    color: #333;
    font-size:16px;
}

/*** Workflow for Order ***/

.orderworkflow {
    border:1px solid #e7e7e7;
    border-radius:4px;
}

.orderworkflow_ls {
    margin-top:10px;
}

.wfprogress {
    width: 92%;
    height: 40px;
    margin-left: 4%;
    position: relative;
}

.wfliner {
    width: 100%;
    height: 8px;
    position: absolute;
    top: 11px;
    background-color: #6b6b6b;
    box-shadow: none;
}



    /* *** Status 1 *** */
    .inactiveordricnone {
        color:#6b6b6b;
        font-size: 28px;
    }

    .inactiveordricnone .glyphicon-circle-arrow-right {
        background-color: #fff;
        position: absolute;
        left: 0%;
    }
    
    .inactiveordricnone .glyphicon-ok-sign {
        background-color: #fff;
        position: absolute;
        left: 0%;
        color:green;
    }
    
    .inactiveordrtxtone {
        color: #6b6b6b;
        font-size:18px;
        font-weight:600;
    }

    /* *** Status 2 *** */
    .inactiveordricntwo {
        color:#6b6b6b;
        font-size: 28px;
    }
    
    .activeordrtxttwo {
        color: #000;
        font-size:18px;
        position: absolute;
        left: 33%;
    }
    
    .inactiveordricntwo .glyphicon-circle-arrow-right {
        background-color: #fff;
        position: absolute;
        left: 33%;
    }

    .inactiveordricntwo .glyphicon-ok-sign {
        background-color: #fff;
        position: absolute;
        left: 33%;
        color:green;
    }
    
    .inactiveordrtxttwo {
        color: #6b6b6b;
        font-size:18px;
        font-weight:600;
    }

    

    /* *** Status 3 *** */
    .wflinerprogrs-3 {
        width: 33%;
        height: 8px;
        position: absolute;
        background-color: green;
        box-shadow: none;
    }

    .inactiveordricnthree {
        color:#6b6b6b;
        font-size: 28px;
        display:inline-block;
    }

    .activeordrtxtthree {
        color: #000;
        font-size:18px;
        position: absolute;
        left: 66%;
    }
    
    .inactiveordricnthree .glyphicon-circle-arrow-right {
        background-color: #fff;
        position: absolute;
        left: 66%;
    }

    .inactiveordricnthree .glyphicon-ok-sign {
        background-color: #fff;
        position: absolute;
        left: 66%;
        color:green;
    }
    
    .inactiveordrtxtthree {
        color: #6b6b6b;
        font-size:18px;
        font-weight:600;
    }

    

    /* *** Status 4 *** */

    .wflinerprogrs-4 {
        width: 66%;
        height: 8px;
        position: absolute;
        background-color: green;
        box-shadow: none;
    }

    .inactiveordricnfour {
        color:#6b6b6b;
        font-size: 28px;
        display:inline-block;
    }
    
    .activeordrtxtfour {
        color: #000;
        font-size:18px;
        position: absolute;
        left: 95%;
    }
    
    .inactiveordricnfour .glyphicon-circle-arrow-right {
        background-color: #fff;
        position: absolute;
        left: 100%;
    }

    .inactiveordricnfour .glyphicon-ok-sign {
        background-color: #fff;
        position: absolute;
        left: 100%;
        color:green;
    }
    
    

    /* *** Status 5 *** */

    .wflinerprogrs-5 {
        width: 100%;
        height: 8px;
        position: absolute;
        background-color: green;
        box-shadow: none;
    }

    .inactiveordricnfive {
        color:#6b6b6b;
        font-size: 28px;
        display:inline-block;
    }

    .inactiveordricnfive .glyphicon-circle-arrow-right {
        background-color: #fff;
        position: absolute;
        left: 100%;
    }

    .inactiveordricnfive .glyphicon-ok-sign {
        background-color: #fff;
        position: absolute;
        left: 100%;
        color:green;
    }

    /* *** Status 6 *** */
    .inactiveordricnsix {
        color:#6b6b6b;
        font-size: 28px;
        display:inline-block;
    }

    .inactiveordricnsix .glyphicon-circle-arrow-right {
        background-color: #fff;
        position: absolute;
        left: 100%;
    }

    .inactiveordricnsix .glyphicon-ok-sign {
        background-color: #fff;
        position: absolute;
        left: 100%;
        color:green;
    }

    /* *** Status 7 *** */
    .inactiveordricnseven {
        color:#6b6b6b;
        font-size: 28px;
        display:inline-block;
    }

    .inactiveordricnseven .glyphicon-circle-arrow-right {
        background-color: #fff;
        position: absolute;
        left: 100%;
    }

    .inactiveordricnseven .glyphicon-ok-sign {
        background-color: #fff;
        position: absolute;
        left: 100%;
        color:green;
    }
    

    /* *** Status 8 (possibly 'under review' status) */
    .inactiveordricneight {
        color:#6b6b6b;
        font-size: 28px;
        display:inline-block;
    }

    .inactiveordricneight .glyphicon-circle-arrow-right {
        background-color: #fff;
        position: absolute;
        left: 100%;
    }

    .inactiveordricneight .glyphicon-ok-sign {
        background-color: #fff;
        position: absolute;
        left: 100%;
        color:green;
    }

     /* *** Status 9 */
     .inactiveordricnnine {
        color:#6b6b6b;
        font-size: 28px;
        display:inline-block;
    }

    .inactiveordricnnine .glyphicon-circle-arrow-right {
        background-color: #fff;
        position: absolute;
        left: 100%;
    }

    .inactiveordricnnine .glyphicon-ok-sign {
        background-color: #fff;
        position: absolute;
        left: 100%;
        color:green;
    }

    /* *** Status 10 */
    .inactiveordricnten {
        color:#6b6b6b;
        font-size: 28px;
        display:inline-block;
    }

    .inactiveordricnten .glyphicon-circle-arrow-right {
        background-color: #fff;
        position: absolute;
        left: 100%;
    }

    .inactiveordricnten .glyphicon-ok-sign {
        background-color: #fff;
        position: absolute;
        left: 100%;
        color:green;
    }


    .ordrdtls_ur {
        padding-top: 10px;
        padding-left: 10px;
        border-left: 15px solid #ff0039;
        border-top: 1px solid #ff0039;
        border-bottom: 1px solid #ff0039;
        border-right: 1px solid #ff0039;
    }

    .ordrdtls_ur_glyph {
        display:inline-block;
        font-size: 35px;
        padding-right: 10px;
        color: #ff0039;
    }

    .ordrdtls_ur_text {
        display:inline-block;
    }

    .ordrdtls_ur_text_hl {
        color: #ff0039;
        font-size:16px
    }

    .ordrdtls_ur_text_sub {
        color: #ff0039;
    }

    /* *** All Statuses *** */
    .activeordricn {
        color:green;
        font-size: 28px;
    }

    .activeordricn .glyphicon-circle-arrow-right {
        background-color: #fff;
        position: absolute;
    }





.activeordrtxt {
    color: #000;
    font-size:18px;
    margin-left: 30px;
}













.ordrsmrydtls {
    /*padding: 10px;
    border: 1px solid #999;
    border-radius: 4px;*/
}

.ordrsmrydtls img {
    max-width:50px;
    max-height:50px;
}

.ordrdtlsdata {
    text-align:right;
}

.ordrbtn {
    margin-top: 20px;
    border: 1px solid red;
    border-radius: 4px;
    padding: 4px;
    text-align: center;
    font-weight: 600;
    color: #fff;
    font-size: 16px;
    background: red;
    width:30%;
}

a.viewprdct {
  display: block;
  width: 30%;
}

.viewprdctlnk {
    margin-top: 20px;
    border: 1px solid #000;
    border-radius: 4px;
    padding: 4px;
    text-align: center;
    font-weight: 600;
    color: #fff;
    font-size: 16px;
    background: #000;
}

/*a.viewprdct:hover,
a.viewprdct:active,
a.viewprdct:focus {
    margin-top: 20px;
    border: 1px solid #000;
    border-radius: 4px;
    padding: 4px;
    text-align: center;
    font-weight: 600;
    color: #fff;
    font-size: 16px;
    background: #000;
    width:30%;
}*/

/*** KEEPING THIS HERE just in case ***/
/*[id^="views-exposed-form-userlistview-block-"] {
    float: right;
 }*/

 /*** BUTTON ACTIONS ***/
 .orderworkflowshipping .btn-success {
    float:right;
 }

/*** Buyer and Seller Details ***/
.bsdtls {
    /*font-size: 40px;*/
    color: #000;
}

.bsdtls img {
    max-width:50px;
    max-height:50px;
}



/******************************************************/
/****************MOBILE DESIGN************************/
/****************************************************/

@media (max-width: 1050px) {

    .orderworkflow {
        border: 1px solid #e7e7e7;
        border-radius: 4px;
        margin-left: 5px;
    }

    .ordrdtlshipper {
        margin-left: 10px;
    }

}


@media (max-width: 991px) {
   
    .path-orderdetails .col-sm-9 {
        width: 100%;
    }

    .hlsix_1 {
        font-size: 14px;
        color: #6b6b6b;
    }

    .activeordrtxtfour {
        color: #000;
        font-size: 18px;
        position: absolute;
        left: 90%;
    }

    .orderworkflow {
        border: 1px solid #e7e7e7;
        border-radius: 4px;
        margin-left: 0px;
    }
        
}

@media (max-width: 850px) {

    /*.path-orderdetails .ordrdtlsdata,
    .path-orderdetails .ordrdtlslbl {
        font-size:12px;
    }*/

}

@media (max-width: 767px) {
   
    .ordrbtn {
        width:60%;
        margin-top: 40px;
    }
    
}

@media (max-width: 700px) {
   
    .wfprogress {
        width: 92%;
        height: 40px;
        margin-left: 0%;
        position: relative;
    }
    
}

@media (max-width: 500px) {
   
    .activeordrtxtfour {
        color: #000;
        font-size: 18px;
        position: absolute;
        left: 85%;
    }

    .activeordrtxtone,
    .activeordrtxttwo,
    .activeordrtxtthree,
    .activeordrtxtfour,
    .activeordrtxtfive {
        color: #000;
        font-size: 14px;
        position: absolute;
        left: 66%;
        width: 100%;
    }
    
}