*,
*::before,
*::after {  box-sizing: border-box;}

.ffr {
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    font-weight: 500;
}

.ffb {
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    font-weight: 700;
}



.wrapper {
    margin: 0 auto;
    width: 100%;
    max-width: 1140px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.container {
    position: relative;
    width: 100%;
    max-width: 550px;
    height: auto;
    display: flex;
    background: #ffffff;
    box-shadow: 0 0 5px #999999;
}

.credit {
    position: relative;
    margin: 25px auto 0 auto;
    width: 100%;
    text-align: center;
    color: #666666;
    font-size: 16px;
    font-weight: 400;
}

    .credit a {
        color: #222222;
        font-size: 16px;
        font-weight: 600;
    }

.col-left,
.col-right {
    padding: 30px;
    display: flex;
}

.col-left {
    width: 45%;
    /*-webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
    clip-path: polygon(0 0, 0% 100%, 100% 0);*/
   /* background: #44c7f5;*/
}

.col-right {
    padding: 50px 0px 30px 0;
    width: 48%;
    margin-left:20px;
}

.logo_outer{margin:35px 0 10px 0;}
.athi_head{font-size:1.8em;color:#6B4748;margin:15px 0 0px 20px;font-weight:bold;line-height:35px;}
.err_msg{font-size:14px;color:red;margin:5px 0px;}
.display_no{display:none;}


@media(max-width: 575.98px) {
    .container {
        flex-direction: column;
        box-shadow: none;
    }

    .col-left,
    .col-right {
        width: 100%;
        margin: 0;
        -webkit-clip-path: none;
        clip-path: none;
    }

    .col-right {
        padding: 30px;
    }

.logo_outer{width:200px;margin:0 auto;margin-top:15px;}
.athi_head{margin:25px 0 0px 0px;text-align:center;width:100%;}

}

.login-text {
    position: relative;
    width: 100%;
    color: #ffffff;
}

    .login-text h2 {
        margin: 0 0 15px 0;
        font-size: 30px;
        font-weight: 700;
    }

    .login-text p {
        margin: 0 0 20px 0;
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
    }

    .login-text .btn {
        display: inline-block;
        padding: 7px 20px;
        font-size: 16px;
        letter-spacing: 1px;
        text-decoration: none;
        border-radius: 30px;
        color: #ffffff;
        outline: none;
        border: 1px solid #ffffff;
        box-shadow: inset 0 0 0 0 #ffffff;
        transition: .3s;
        -webkit-transition: .3s;
    }

        .login-text .btn:hover {
            color: #44c7f5;
            box-shadow: inset 150px 0 0 0 #ffffff;
        }

.login-form {
    position: relative;
    width: 100%;
}

    .login-form h2 {
        margin: 0 0 15px 0;
        font-size: 22px;
        font-weight: 700;
    }

    .login-form p {
        margin: 0 0 10px 0;
        text-align: left;
        color: #666666;
        font-size: 15px;
    }

        .login-form p:last-child {
            margin: 0;
            padding-top: 3px;
        }

        .login-form p a {
            color: #44c7f5;
            font-size: 14px;
            text-decoration: none;
        }

    .login-form label {
        display: block;
        width: 100%;
        margin-bottom: 3px;
        letter-spacing: .5px;
    }

    .login-form p:last-child label {
        width: 60%;
        float: left;
    }

    .login-form label span {
        color: #ff574e;
        padding-left: 2px;
    }

    .login-form input {
        display: block;
        width: 100%;
        height: 35px;
        padding: 0 10px;
        outline: none;
        border: 1px solid #cccccc;
        border-radius: 30px;
    }

        .login-form input:focus {
            border-color: #ff574e;
        }

        .login-form button,
        .login-form input[type=button] {
            display: inline-block;
            width: 100%;
            margin-top: 15px;
            color: #1E9A46;
            font-size: 16px;
            letter-spacing: 1px;
            cursor: pointer;
            background: transparent;
            border: 1px solid #1E9A46;
            border-radius: 30px;
            box-shadow: inset 0 0 0 0 #1E9A46;
            transition: .3s;
            -webkit-transition: .3s;
        }

            .login-form button:hover,
            .login-form input[type=button]:hover {
                color: #ffffff;
                box-shadow: inset 250px 0 0 0 #1E9A46;
            }



                              /*      Top navigation*/


.top_navbody {
    position: fixed;
    left: 0;
    z-index: 1000;
    background-color: #fff;
    width: 100%;
    -webkit-box-shadow: 0 4px 6px -6px #222;
  -moz-box-shadow: 0 4px 6px -6px #222;
  box-shadow: 0 4px 6px -6px #222;display:inline-block;
}
.logo{width:100px;float:left;margin-top:4px;}
.logo_inner{width:100%;height:50px;}
.log_head{width:300px;margin:10px 0 0 10px;color:#6B4748;font-size:22px;float:left;}
.topout_container{ width:95%; margin:0 auto;}
.top_right{ width:80px;height:45px; float:right; text-align:center; margin-top:15px;font-size:22px;position:relative;cursor:pointer;}
.top_right .fa{ margin-left:15px; color:#289C46;}

.admin_head{font-size:15px;position:absolute;top:25px;right:10px;}
.top_right:hover .logout_outer{ display:block;}
.logout_outer{width:110px;height:40px;position:absolute;top:43px;border: 1px solid #D6DBDF;right:0px;background-color:white;
	border-radius: 5px; display:none;}
.logout_head{font-size:16px;padding:8px 0 8px 0px;cursor:pointer;text-align:center;	border-bottom: 1px solid #D6DBDF;}
.logout_head:hover{background-color:#E7F0D1;}

                                         /*   Left menu*/
.mid_outer{position:relative; top:70px;}
.left_outer{ background-color:#D2E4A6; width:15%; height:100vh;float:left;}
.home{font-size:15px;margin:10px 5px 0px 5px;padding:10px 0px 10px 10px;border-radius:5px;cursor:pointer;color:black;}
.home:hover{background-color:#B7D088;color:white;}
.fa-shopping-bag{font-size:20px;color:green;padding-right:10px;}
.fa-users{font-size:20px;color:green;padding-right:10px;}
.fa-handshake-o{font-size:20px;color:green;padding-right:10px;}
.fa-truck{font-size:20px;color:green;padding-right:10px;}
.fa-thumbs-up{font-size:20px;color:green;padding-right:10px;}
.fa-dashcube{font-size:20px;color:green;padding-right:10px;}
.menu_active{background-color:#B7D088;color:white;}

                                       /*     Right container*/
.right_outer{ width:78%;float:right;}
.right_outer1{width:79%; float:right;background-color:#EDEDED;}


                                  /*  Live order details*/
.col_dsply{width:100%;display:inline-block; }
.display_no{display:none;}
.chng_btn{width:50px;color:#fff;background-color:#B7D088;padding:3px 0;text-align:center;border-radius:5px;cursor:pointer;}
.chng_btn2{width:80px;color:#fff;background-color:#B7D088;padding:3px 0;text-align:center;border-radius:5px;cursor:pointer;}

                                               /* Order list*/
.list_head{font-size:16px;margin:5px 10px 10px 10px;float:left;width:50%;}
.list_head1{font-size:16px;margin:5px 10px 0px 10px;float:left;width:50%;}
.ord_userdetail{position: absolute; top: 60px; left: 250px;}
.left_arw{margin:0px 20px 10px 0px;width:30px;float:left;}
.lft_ord{width:550px;float:left;margin-left:10px;}
.trans_fileld{ margin-bottom:8px;font-size:14px;position:relative;}
.trans_totfil{margin-bottom:8px;font-size:14px;/*border-bottom:1px solid #C3C3C3;padding:4px;*/}
.list_lftdata{width:33%;float:left;}
.list_lfttotal{width:60%;float:left;text-align:left;}
.list_rightdata{width:64%;float:right;}
.list_righttotal{width:28%;float:right;text-align:right;}
.right_ord{width:320px;float:left;padding:0 30px;margin-left:35px;margin-top:-32px;}
.right_ord1{width:320px;float:left;padding:0 30px;margin-right:20px;margin-top:-32px;}
.right_ord2{width:320px;float:left;padding:0 30px;margin-right:36px;margin-top:-32px;}
.pay_stushead{font-size:18px;padding:10px 0;width:160px;float:left;}
.pay_data{font-size:16px;color:#259F48;}
.pri_table{width:65%;margin:10px 0px 0px 0px;border-bottom:1px solid #C3C3C3;}
.tbl_head{font-size:15px;padding:6px 5px;background-color:#D3E3FD;}
.tbl_body{font-size:13px;padding:2px 5px;margin:0px 0 1px 0;}
.tbl_sno{width:10%;padding-left:5px;text-align:left;float:left;}
.tbl_prod{width:60%;padding-left:5px;text-align:left;float:left;}
.tbl_qty{width:10%;padding-right:10px;text-align:right;float:left;}
.tbl_amnt{width:15%;padding-right:10px;text-align:right;float:right;}
.ordchnge_btn{width:100px;padding:5px 0px;text-align:center;color:#fff;background-color:#B7D088;border-radius:5px;margin:5px 0 0 100px;}
.list_center{width:5%;float:left;}
.ord_totalouter {width: 27%;margin: 20px auto; /*border:1px solid #C3C3C3;padding:8px;border-radius:5px;*/}
.ord_abandoned{width:90px;position:absolute;left:72%;top:0px;}
.ord_date{position: absolute; font-size: 11px; left: 2px; top: 26px; font-weight: 500; }

                                                           /*Tracking Css*/

.outer {
    height: 52vh;
    min-width: 20vw;
    flex: 1;
    
}

.progress {
  display: inline-flex;
  height: 100%;
  padding: 5vh 4%;
}
.progress > div {
  display: flex;
  flex-direction: column;
  color: #333;
}
.progress > div.left {
  padding-right: 20px;
  text-align: right;
}
.progress > div.left div:last-of-type:after {
  display: none;
}
.progress > div.left div:after {
  content: "";
  background: rgba(51, 51, 51, 0.1);
  border-radius: 2px;
  position: absolute;
  right: -20px;
  top: 10px;
  height: 101%;
  width: 1px;
  transform: translateX(50%);
}

.progress > div.right {
  padding-left: 20px;
}
.progress > div.right div.prev:after {
  transition: none;
}
.progress > div.right div.current {
  color: #333;
  font-weight: bold;
}
.progress > div.right div.current:before {
  background: #333;
  padding: 10px;
  transition: all 0.2s 0.15s cubic-bezier(0.175, 0.885, 0.32, 2);
}
.progress > div.right div.current:after {
  height: 0%;
  transition: height 0.2s ease-out;
}
.progress > div.right div.current ~ div {
  color: #666;
}
.progress > div.right div.current ~ div:before {
  background: #666;
  padding: 2.5px;
}
.progress > div.right div.current ~ div:after {
  height: 0%;
  transition: none;
}
.progress > div.right div:before {
  content: "✓"; 
  color: white; 
  background: green;
  padding: 4px 7px;
  border-radius: 50%;
  position: absolute;
  left: -20px;
  top: 10px;
  transform: translateX(-50%) translateY(-50%);
  transition: padding 0.0s ease;
}

    .progress > div.right div.current:before {
        background: green !important; /* Gold for the current step */
        padding: 6.5px 10px; /* Same padding to maintain uniformity */
    }

   

.progress > div.right div:after {
  content: "";
  background: green;
  border-radius: 1px;
  position: absolute;
  left: -20px;
  top: 18px;
  height: 105%;
  width: 2px;
  transform: translateX(-50%);
  transition: height 0.2s ease;
}

.progress > div div {
  flex: 1;
  position: relative;
  line-height: 20px;
  cursor: default;
  min-height: 72px;
}
.progress > div div:last-of-type {
  flex: 0;

}

.progress.dark {
  background: #333;
  display: inline-flex;
  height: 100%;
  width: 100%;
  padding: 5vh 10%;
  
}
.progress.dark > div {
  display: flex;
  flex-direction: column;
  color: #ccc;
}
.progress.dark > div.left {
  padding-right: 20px;
  text-align: right;
}
.progress.dark > div.left div:last-of-type:after {
  display: none;
}
.progress.dark > div.left div:after {
    content: "";
    background: rgba(211, 211, 211, 0.05);
    border-radius: 2px;
    position: absolute;
    right: -20px;
    top: 10px;
    height: 101%;
    width: 1px;
    transform: translateX(50%);
}
.progress.dark > div.right {
  padding-left: 20px;
}
.progress.dark > div.right div.prev:after {
  transition: none;
}
.progress.dark > div.right div.current {
  color: white;
  font-weight: bold;
}
.progress.dark > div.right div.current:before {
  background: white;
  padding: 2px;
  transition: all 0.2s 0.15s cubic-bezier(0.175, 0.885, 0.32, 2);
}
.progress.dark > div.right div.current:after {
  height: 0%;
  transition: height 0.2s ease-out;
}
.progress.dark > div.right div.current ~ div {
  color: #666;
}
.progress.dark > div.right div.current ~ div:before {
  background: #333;
  padding: 2.5px;
}
.progress.dark > div.right div.current ~ div:after {
  height: 0%;
  transition: none;
}
.progress.dark > div.right div:before {
  content: "";
  background: red;
  border-radius: 50%;
  position: absolute;
  left: -20px;
  top: 10px;
  transform: translateX(-50%) translateY(-50%);
  transition: padding 0.2s ease;
}
.progress.dark > div.right div:after {
  content: "";
  background: lightgray;
  padding:4px 10px;
  border-radius: 2px;
  position: absolute;
  left: -20px;
  top: 10px;
  height: 101%;
  width: 2px;
  transform: translateX(-50%);
  transition: height 0.2s ease;
}
.progress.dark > div div {
  flex: 1;
  position: relative;
  line-height: 20px;
  cursor: default;
  min-height: 30px;
}
.progress.dark > div div:last-of-type {
  flex: 0;
}

.done.current {
    color: #F6911D !important;
}
    .done.current:before {
        background: #FFD700 !important;
    }

.dark .done.current {
    color: #F6911D !important;
}
    .dark .done.current:before {
        background: #FFD700 !important;
    }


.done1.current {
    color: #F6911D !important;
}

    .done1.current:before {
        background: #FFD700 !important;
    }


.dark .done1.current {
    color: #F6911D !important;
}

    .dark .done1.current:before {
        background: #FFD700 !important;
    }

/* Default status indicator */
.progress > div.right div:before {
    content: "✔";
    color: white;
    background: green;
    padding: 4px 6px;
    border-radius: 50%;
    position: absolute;
    left: -20px;
    top: 10px;
    transform: translateX(-50%) translateY(-50%);
    transition: padding 0.2s ease;
    font-size: 15px;
}

/* Current step indicator */
.progress > div.right div.current:before {
    content: "✔"; /* Change this if needed */
   background-color:green;
    padding: 6.5px 10px;
    font-size:15px;
}

/* Remove checkmark for future steps */
.progress > div.right div.current ~ div:before {
    content: "✘"; /* Empty content for future steps */
    background: grey; /* Default color */
    padding:3.5px 6.5px;
    font-size:12.5px;
}



                                                        /*Admin Dashboard*/

.dash_outer{width:97%;margin-bottom:18px;padding:10px 5px 5px 5px;margin:20px 0px 0px 10px;}
.box_perform{ width:235px; float:left; margin:0px 5px 0px 5px; outline:none; border:none; border-radius:6px; background-color: #fff; padding:10px 10px; }
.perfor_logo{width:80px; float:left; text-align:center;}
.perfor_logo img{ width:65px; margin-top:10px;}
.perform_text1{width:120px; margin-top:18px; margin-left:5px; float:left; font-size:16px;font-weight:600;}
.perform_text1 span{ font-size:21px;font-weight:700;}
.perform_text2{width:100px; display:none; float:left; background-color:#E5F3EA; border-radius:5px; font-size:11px; padding:5px; margin-top:20px;}
.perform_text2 img{ width:10px; }
.center_chart{width:95%; margin-left:20px; background-color:#fff; margin-bottom:30px;border-radius:8px;}
.center_chart .botom_subhead {margin:10px 10px; padding-top:10px;font-weight:700;text-align:center;font-size:18px;}
.dash_table{width:95%;margin:10px 10px 10px 16px;}






/* Reset some basic styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Form container */
.form-container {
    
    background-color: #ffffff;
    padding: 0px;
    border-radius: 8px;
    width: 100%;
    max-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-container1 {
    background-color: #ffffff;
    padding: 0px;
    border-radius: 8px;
    width: 100%;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Labels */
label {
    font-weight: bold;
    margin-bottom: 5px;
}

/* Select box */
select {
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    transition: border 0.3s ease;
}

/* Input fields */
input[type="text"], input[type="date"] {
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    transition: border 0.3s ease;
}

/* Focus effect on inputs and select */
select:focus,
input[type="text"]:focus,
input[type="date"]:focus {
    border-color: #4caf50;
    outline: none;
}

/* Placeholder styling for text inputs */
input[type="text"]::placeholder {
    color: #aaa;
}

button {
    padding: 10px 15px;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size:15px;
    font-weight:700;
}

/* Button hover effect */
button:hover {
    background-color: #45a049;
}
.err_text1{color:red;font-size:12px;margin-left:15px;font-weight:700;margin-top:-8px;}

                                                   /* popup packed*/

.outerpopupedit{width:100%;height:100vh;position:fixed;background-color:rgba(0,0,0,0.45);z-index:1002;}
.popupbody{width:100%;height:100vh;display:flex;justify-content:center;align-items:center;}
.popup_qty{width:400px;height:160px;background-color:white;border-radius:5px;}
.popuparea{width:90%;margin:10px auto;margin-top:25px;}
.pop_head{width:100%;font-size:18px;word-spacing:3px;
text-align:center;text-transform:none;}
.pop_butn{width:80%;margin:0 auto;}
.pop_ok1{width:35%;text-align:center;float:left;padding:4px 0px;font-size:16px;
	background-color: #4CAF50;color:white;border-radius:5px;cursor:pointer;margin-top:10px;margin-left:10px;}
.pop_cancel1{width:35%;text-align:center;float:right;padding:4px 0px;font-size:16px;
		background-color:#BE1D2D;color:white;border-radius:5px;cursor:pointer;margin-top:10px;margin-right:25px;}	

                                                       /* popup Successfully*/

.outerpopupedit1{width:100%;height:100vh;position:fixed;background-color:rgba(0,0,0,0.45);z-index:1002;}
.outerpopupedit2{width:100%;height:100vh;position:fixed;background-color:rgba(0,0,0,0.45);z-index:1002;}
.popupbody1{width:100%;height:100vh;display:flex;justify-content:center;align-items:center;}
.popup_qty1{width:300px;height:100px;background-color:white;border-radius:5px;}
.popuparea1{width:90%;margin:10px auto;margin-top:28px;}
.pop_head1{width:100%;font-size:18px;word-spacing:3px;
text-align:center;text-transform:none;}

.right_customerstatus{ width:78%; position:absolute; top:0px;left:180px;}
.list_head3{font-size:16px;margin:5px 10px 10px -80px;float:left;width:50%;text-align:center;}
.list_lftdata1{width:33%;float:left;text-align:left;}
.list_rightdata1{width:58%;float:right;text-align:left;}
.pri_table1{width:65%;border-bottom:1px solid #C3C3C3;}
.right_outer3{ width:65%; position:absolute; top:0px;left:215px;}
.ord_leftarw{width: 100%;margin-top: 8px;}
/*.outerbody{width:1300px;margin:0px auto;}*/
/**/