* { padding:0px; margin:0px; }
img { border:none; outline:none; }
body { background:#fff; }
a { text-decoration:none; }

.bgWhite { background:#fff; }
.primaryRed { background:#ab212c; }
.primaryGreen { background:#7d8411; }
.primaryDarkYellow { background:#dd9c02; }
.primaryRedTwo { background:#cd212f; }

.colorOne { color: #fff; }
.colorTwo { color:#878787; }


.paid { background: #87de75; border-color: #87de75; color: #ffffff; }
.pending { background: #f39c12; border-color: #f39c12; color: #ffffff; }
.cancel { background: #e74c3c; border-color: #e74c3c; color: #ffffff; }
.pad7 {padding: 7px;}
.mainPage { width:100%; }
.clrwhite{ color: #ffffff;}

/***** HEADER *****/

header { position:fixed; width:100%; float:left; background:#000; z-index:99; height:60px; color:#fff; }
.main-header.header { position:fixed; }

.logoArea { width:280px; height:auto; float:left; padding:5px 0px; text-align:center; }
.logoArea img { width:auto; height:50px; }

.menuArea { width:100px; float:left; height:60px; }
.menuArea i { font-size:36px; color:#fff; margin-top:13px; text-indent:15px; }

.areaNotification { width:50px; float:right; height:60px; position:relative; cursor:pointer; }
.areaMsg { width:50px; float:right; height:60px; position:relative; cursor:pointer; }
.areaCmnts { width:50px; float:right; height:60px; position:relative; cursor:pointer; }

.areaNotification:hover, .areaMsg:hover, .areaCmnts:hover { background:#8d5ba0; }
.areaNotification i, .areaMsg i, .areaCmnts i { font-size:16px; color:rgba(255,255,255,0.9); position: absolute; display: block; width: auto; height: auto; top: 50%; left: 50%; transform: translate(-50%,-50%); }



.welcomeUser { width:auto; float:right; height:60px; margin-right:25px; position:relative; }
.welcomeUser span.userIcon { padding:0px 10px 0px 15px; }
.welcomeUser span.userIcon i { font-size:30px; line-height:60px; }
.welcomeUser .welcomeUserInner { height:100%; float:right; }
.welcomeUser .welcomeUserInner span { cursor:pointer; position:relative; }
.welcomeUser h5 { display:inline-block; line-height:45px; }
.welcomeUser h5 a { color:#fff; }
.welcomeUser h5 a:hover { text-decoration:none; }
.welcomeUser .welcomeUserInner span { font-size:14px; color:##8d5ba0; padding:0 5px 0 1px; cursor:pointer; }

.profileDropDown { width:200px; height:auto; background:#fff; box-shadow: 0 0 0px 5px #e7e7e7; position:absolute; right:0px; border:1px solid #d6d6d6; }
.profileDropDown ul { list-style-type:none; margin:0px; }
.profileDropDown ul li { display:block; border-bottom:1px solid #d6d6d6; padding:10px 10px 12px; }
.profileDropDown ul li:hover { }
.profileDropDown ul li:last-child { border:none; }
.profileDropDown ul li i { color:#878787; }
.profileDropDown ul li span > a { color:#878787; }
.profileDropDown ul li span > a:hover { text-decoration:none; }

/***** // HEADER *****/



/***** SECTION *****/

section { width:100%; float:left; }

.mainBdy { width:100%; float:left; margin:60px 0px 0px; padding:20px 0px 60px; min-height:1000px; background:#ececec; }

.mainBdy .leftSide { width:230px; height:100%; /*position:fixed;*/ /*background:#ececec;*/ float:left; top:30px; }
.mainBdy .rightSide { width:100%; margin-left:0px; background:#ececec; float:left; }
.mainBdy .rightSide .rightSideTop { width:100%; float:left; }
.mainBdy .rightSide .rightSideTop h2 { font-size:24px; color:#000; text-indent:30px; margin:15px 0px; }
.mainBdy .rightSide .rightSideTop h2 span { width:auto; padding-left: 20px; font-size: 16px; margin:0px;  }
.mainBdy .rightSide .rightSideTop span.select-date-display { color:#cd212f; }
.mainBdy .rightSide .rightSideTop a.OnlinePayment { float: right; padding: 5px 10px; background: #ab212c; color: #fff; font-size:16px; border-radius: 2px; margin-right: 10px; text-indent: 0; transition: background-color 0.5s ease; }
.mainBdy .rightSide .rightSideTop a.OnlinePayment:hover { background:#000; }

.mainBdy .rightSide a { color:#ab212c; }
.mainBdy .rightSide .rightSideDown { width:100%; float:left; }
.mainBdy .rightSide .rightSideDown .row { margin:0px; }
.mainBdy .rightSide .rightSideDown .col-lg-1,
.mainBdy .rightSide .rightSideDown .col-lg-10, 
.mainBdy .rightSide .rightSideDown .col-lg-11, 
.mainBdy .rightSide .rightSideDown .col-lg-12, 
.mainBdy .rightSide .rightSideDown .col-lg-2, 
.mainBdy .rightSide .rightSideDown .col-lg-3, 
.mainBdy .rightSide .rightSideDown .col-lg-4, 
.mainBdy .rightSide .rightSideDown .col-lg-5, 
.mainBdy .rightSide .rightSideDown .col-lg-6, 
.mainBdy .rightSide .rightSideDown .col-lg-7, 
.mainBdy .rightSide .rightSideDown .col-lg-8, 
.mainBdy .rightSide .rightSideDown .col-lg-9, 
.mainBdy .rightSide .rightSideDown .col-md-1, 
.mainBdy .rightSide .rightSideDown .col-md-10, 
.mainBdy .rightSide .rightSideDown .col-md-11, 
.mainBdy .rightSide .rightSideDown .col-md-12, 
.mainBdy .rightSide .rightSideDown .col-md-2, 
.mainBdy .rightSide .rightSideDown .col-md-3, 
.mainBdy .rightSide .rightSideDown .col-md-4, 
.mainBdy .rightSide .rightSideDown .col-md-5, 
.mainBdy .rightSide .rightSideDown .col-md-6, 
.mainBdy .rightSide .rightSideDown .col-md-7, 
.mainBdy .rightSide .rightSideDown .col-md-8, 
.mainBdy .rightSide .rightSideDown .col-md-9, 
.mainBdy .rightSide .rightSideDown .col-sm-1, 
.mainBdy .rightSide .rightSideDown .col-sm-10, 
.mainBdy .rightSide .rightSideDown .col-sm-11, 
.mainBdy .rightSide .rightSideDown .col-sm-12, 
.mainBdy .rightSide .rightSideDown .col-sm-2, 
.mainBdy .rightSide .rightSideDown .col-sm-3, 
.mainBdy .rightSide .rightSideDown .col-sm-4, 
.mainBdy .rightSide .rightSideDown .col-sm-5, 
.mainBdy .rightSide .rightSideDown .col-sm-6, 
.mainBdy .rightSide .rightSideDown .col-sm-7, 
.mainBdy .rightSide .rightSideDown .col-sm-8, 
.mainBdy .rightSide .rightSideDown .col-sm-9, 
.mainBdy .rightSide .rightSideDown .col-xs-1, 
.mainBdy .rightSide .rightSideDown .col-xs-10, 
.mainBdy .rightSide .rightSideDown .col-xs-11, 
.mainBdy .rightSide .rightSideDown .col-xs-12, 
.mainBdy .rightSide .rightSideDown .col-xs-2, 
.mainBdy .rightSide .rightSideDown .col-xs-3, 
.mainBdy .rightSide .rightSideDown .col-xs-4, 
.mainBdy .rightSide .rightSideDown .col-xs-5, 
.mainBdy .rightSide .rightSideDown .col-xs-6, 
.mainBdy .rightSide .rightSideDown .col-xs-7, 
.mainBdy .rightSide .rightSideDown .col-xs-8, 
.mainBdy .rightSide .rightSideDown .col-xs-9 { padding:0px 5px }



.sectionHead { width:100%; float:left; padding:5px 15px; box-sizing:border-box; background:#7d8411; margin: 0 0 20px; }
.sectionHead h2 { font-size: 18px; color: #fff; display: inline-block; margin: 10px 0px; }
.sectionHead .headIconSection { float:right; width:auto; margin:0px 0px; }
.sectionHead .headIconSection span { margin:10px 5px; float:inherit; }
.sectionHead .headIconSection i { font-size:18px; color:#fff; }

.mainBdy .rightSide .rightSideDown .sectionOne { width:100%; float:left; min-height:300px; }

.boxSection { width:100%; float:left; background:#fff; }
.boxSection .boxInner { width:46%; float:left; margin:10px 2%; }
.boxSection .boxInner .boxInside { width:100%; height:120px; border:1px solid #f8f8f8; }
.boxSection .boxInner .boxInside img { max-width: 50%; text-align: center; padding: 25px 0px 0px; }
.boxSection .boxInner h3 { font-size:16px; font-weight:normal; margin:0px 0px 5px; padding:0px; }
.boxSection .boxInner h4 { font-size:14px; font-weight:normal; margin:5px 0px 0px; padding:0px; }
.boxSection .boxInner .boxInsideOne { width:40%; float:left; position:relative; height:100%; text-align:center; }
.boxSection .boxInner .boxInsideOne i { font-size:48px; color:rgba(255,255,255,0.9); position: absolute; display: block; width: auto; height: auto; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.boxSection .boxInner .boxInsideTwo { width:60%; float:left; position:relative; height:100%; text-align:center; }
.boxSection .boxInner .boxInsideTwo span.cv { position: absolute; display: block; width: 100%; height: auto; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.boxSection .boxInner .boxInsideAll { width:1000%; float:left; }


.earningGraphArea { width:100%; float:left; background:#fff; box-shadow: 0 0 10px 5px #e7e7e7; min-height:400px; }



.mainBdy .rightSide .rightSideDown .sectionTwo { width:100%; float:left; margin:15px 0px; min-height:300px; }

.listMenu { width:98%; float:left; box-shadow: 0 0 10px 5px #e7e7e7; /*margin-left:2%;*/ min-height:400px; background:#fff; }
.listMenu ul { list-style-type:none; width:94%; margin:0 auto; }
.listMenu ul li { float:left; width:100%; padding:10px 5px; box-sizing:border-box; color:#878787; border-bottom: 1px solid #ccc; }
.listMenu ul li:last-child { border:none; }
.listMenu ul li span { float: right; border-radius: 3px; padding: 2px 5px; color: #fff; width: 25px; height: 25px; text-align: center; }

.listOnlineOrder { width:100%; float:left; box-shadow: 0 0 10px 5px #e7e7e7; min-height:400px; background:#fff; }
.listOnlineOrder .orderBdymain { width:100%; float:left; padding:5px 15px; box-sizing:border-box; }
.listOnlineOrder .orderBdymain ul { list-style-type:none; width:100%; }
.listOnlineOrder .orderBdymain ul li { float:left; }

.listOnlineOrder .orderBdymain ul li.widthOne { width:25%; }
.listOnlineOrder .orderBdymain ul li.widthTwo { width:20%; }
.listOnlineOrder .orderBdymain ul li.widthThree { width:15%; }
.listOnlineOrder .orderBdymain ul li.widthFour { width:10%; }
.listOnlineOrder .orderBdymain ul li.widthFive { width:5%; }
.listOnlineOrder .orderBdymain ul li.widthSix { width:50%; }
.listOnlineOrder .orderBdymain ul li.widthSeven { width:33%; }

.listOnlineOrder .orderBdymain .orderBdyHead { width: 100%; float: left; background: #f5f3f3; padding: 10px 10px; box-sizing: border-box; }
.listOnlineOrder .orderBdymain .orderBdyHead h3 { font-size: 14px; margin: 0px; color: #1d1d1d; font-weight: bold; }
.listOnlineOrder .orderBdymain .orderBdyDb { width:100%; float:left; margin-top:25px; }
.listOnlineOrder .orderBdymain .orderBdyDb ul { width:100%; float:left;  }
.listOnlineOrder .orderBdymain .orderBdyDb .loopResAll { border-bottom: 1px solid #f1f1f1; float: left; display: block; width: 100%; }
.listOnlineOrder .orderBdymain .orderBdyDb .loopResAll:last-child { border:none; }
.listOnlineOrder .orderBdymain .orderBdyDb ul li {  padding:10px 0px; }

.listOnlineOrder .orderBdymain .orderBdyDb h3 { font-size:15px; margin:0px; font-weight:normal; color:#3e3d3d; }
.listOnlineOrder .orderBdymain .orderBdyDb span { font-size:13px; font-weight:normal; color:#fff; border-radius:3px; padding:5px 10px; }

.listOnlineOrder .orderBdymain .progress-content { font-size:15px; margin:0px; font-weight:normal; color:#3e3d3d; }



.mainBdy .rightSide .rightSideDown .sectionThree { width:100%; float:left; min-height:300px; }

.orderProgress { width:100%; float:left; box-shadow: 0 0 0px 1px #e7e7e7; /*margin-left:2%;*/ background:#fff; min-height:450px; }
.orderProgress .orderProgressBdy { width: 100%; float: left; margin: 5px 0px; padding: 5px 15px; box-sizing: border-box; }
.orderProgress .orderProgressBdy h2 { font-size:16px; font-weight:normal; }

.customerFeed { width:100%; float:left; box-shadow: 0 0 0px 1px #e7e7e7; background:#fff; min-height:450px; }
.customerFeed .customerFeedBdy { width:100%; float:left; }
.customerFeed .customerFeedBdy ul { list-style-type:none; width:96%; margin:0px 2%; }
.customerFeed .customerFeedBdy ul li { display:table; width:100%; padding:10px 25px; box-sizing:border-box; border-bottom:1px solid #d6d6d6; }
.customerFeed .customerFeedBdy ul li:last-child { border:none; }
.customerFeed .customerFeedBdy .customerFeedBdyPic { width:60px; height:60px; float:left; }
.customerFeed .customerFeedBdy .customerFeedBdyPic i { font-size:50px; color:#878787; margin:8px 0px; }
.customerFeed .customerFeedBdy .customerFeedBdyDb { width:auto; }
.customerFeed .customerFeedBdy .customerFeedBdyDb h4 { font-size:15px; font-weight:600; color:#878787; margin:10px; }
.customerFeed .customerFeedBdy .customerFeedBdyDb h4 span { font-size:12px; float:right; font-weight:normal; }
.customerFeed .customerFeedBdy .customerFeedBdyDb p { font-size:13px; color:#878787; margin:10px; }


.areaTimeline { width:100%; float:left; box-shadow: 0 0 0px 1px #e7e7e7; background:#fff; min-height:450px; }

.areaTimeline .areaTimelineBdy { width:100%; float:left; }
.areaTimeline .areaTimelineBdy ul { list-style-type:none; width:96%; margin:0px 2%; }
.areaTimeline .areaTimelineBdy ul li { display:table; width:100%; padding:10px 25px; box-sizing:border-box; position:relative; }
.areaTimeline .areaTimelineBdy ul li:last-child { border:none; }
.areaTimeline .areaTimelineBdy .areaTimelineBdyPic { width: 60px; height: 60px; float: left; line-height: 84px; background: #878787; border-radius: 50px; margin-top:12px; }
.areaTimeline .areaTimelineBdy .areaTimelineBdyPic i { font-size: 50px; color: #fff; margin: 5px 6px; text-align: center; }
.areaTimeline .areaTimelineBdy .areaTimelineBdyDb { width:calc(100% - 95px); float: left; border: 1px solid #d6d6d6; position: relative; margin-left: 25px; padding: 15px 0px 10px; }

.areaTimeline .areaTimelineBdy .areaTimelineBdyDb:after { position: absolute; top: 27px; left: -14px; display: inline-block; border-top: 14px solid transparent; border-right: 14px solid #ffffff; border-left: 0 solid #ffffff;
border-bottom: 14px solid transparent; content: " "; }
.areaTimeline .areaTimelineBdy .areaTimelineBdyDb:before { position: absolute; top: 26px; left: -15px; display: inline-block; border-top: 15px solid transparent; border-right: 15px solid #d6d6d6; border-left: 0 solid #e7e7e7;
border-bottom: 15px solid transparent; content: " "; }

.areaTimeline .areaTimelineBdy .areaTimelineBdyDb h4 { font-size:15px; font-weight:600; color:#878787; margin:10px; }
.areaTimeline .areaTimelineBdy .areaTimelineBdyDb h4 span { font-size:12px; float:right; font-weight:normal; }
.areaTimeline .areaTimelineBdy .areaTimelineBdyDb p { font-size:13px; color:#878787; margin:10px; }

.mainBdy .rightSide .rightSideDown .sectionFour { width:100%;  float:left; min-height:300px;  margin:25px 0px; }
/***** // SECTION *****/





/***** FOOTER *****/

footer { width:100%; float:left; position:relative; z-index:99; padding:15px 0px; background:#8d5ba0; text-align:center; color:#fff; }
footer a { color:#fff; text-decoration:underline; }
footer a:hover { color:#fff; }

/***** // FOOTER *****/
.modal {
  overflow-y:auto;
}

.orderlist_icon { width: 6px; float: right; margin: -14px; cursor: pointer;}


.ShowHowMain { position: fixed; width:120px; right: 0; top: 50%; }
.ShowHowMain span { width: auto; float: right; background: #1d1d1d; color: #fff; font-size: 17px; padding: 5px 10px; border-radius: 5px 0px 0px 5px; cursor: pointer; }

.ShowHow { position:relative; }
.ShowHow ul { list-style-type:none; }
.ShowHow ul li { float: right; width: 100%; background: #ccc; margin: 10px 0px 10px 8px; padding: 10px 15px 10px 10px; border-radius: 10px 0px 0px 10px; color: #000; text-align: center; cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.5s ease; }
.ShowHow ul li:hover { background: #956dac; color: #fff; margin-right:5px; }
.ShowHow ul li.activeShowHow { background:#956dac; color:#fff; margin-right:5px; }


.orderBdyHead.orderBdyHeadRes { display:none; }


.admin-stepinfon { float:left; margin-left:10px; }
.admin-stepinfon h2 { color:#dd4b39; font-size:24px; }
.admin-stepinfon ul { list-style-type:none; }
.admin-stepinfon ul li { display:block; font-size:14px; color:#333; margin:8px 0px; }
.admin-stepinfon ul li b { font-size:17px; color:#1d1d1d; }


.rightSide .rightSideMenu { max-width:100%; width: calc(100% - 31px); float:left; background:#1d1d1d; margin-left:30px; }
.rightSide .rightSideMenu ul { list-style-type:none; }
.rightSide .rightSideMenu ul li { float:left;  }
.rightSide .rightSideMenu ul li a { color:#fff; display:inline-block; font-size:16px; padding:15px 25px; }
.rightSide .rightSideMenu ul li a:hover { background:#7d8411; }

.rightSide .rightSideMenu.sticky {
  position: fixed;
  top: 62px;
  z-index:999;
  max-width:100%;
  width: calc(100% - 31px);
}

.rightSide .rightSideMenu.sticky + .content {
  padding-top: 60px;
}

.rightSide .rightSideMenu.sticky  {
 animation-name: stickNav;
 animation-duration:0.9s; /* or: Xms */
 animation-iteration-count: 1;
 animation-direction: left; /* or: normal */
 animation-timing-function: ease-in-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
 animation-fill-mode: forwards; /* or: backwards, both, none */
 animation-delay: 0s; /* or: Xms */
}

@-webkit-keyframes stickNav {
  0%   { margin-top: -50%; }
  100% { margin-top: 0%; }
}
@-moz-keyframes stickNav {
  0%   { margin-top: -50%; }
  100% { margin-top: 0%; }
}
@-o-keyframes stickNav {
  0%   { margin-top: -50%; }
  100% { margin-top: 0%; }
}
@keyframes stickNav {
  0%   { margin-top: -50%; }
  100% { margin-top: 0%; }

}