/* ========== Grid (12-col, mobile-first) ========== */
.row { display: flex; flex-wrap: wrap; margin-left: -12px; margin-right: -12px; }
.row > [class*="col-"] { padding-left: 12px; padding-right: 12px; }

/* base cols (mobile) */
.col-1{flex:0 0 8.333%;max-width:8.333%}
.col-2{flex:0 0 16.666%;max-width:16.666%}
.col-3{flex:0 0 25%;max-width:25%}
.col-4{flex:0 0 33.333%;max-width:33.333%}
.col-5{flex:0 0 41.666%;max-width:41.666%}
.col-6{flex:0 0 50%;max-width:50%}
.col-7{flex:0 0 58.333%;max-width:58.333%}
.col-8{flex:0 0 66.666%;max-width:66.666%}
.col-9{flex:0 0 75%;max-width:75%}
.col-10{flex:0 0 83.333%;max-width:83.333%}
.col-11{flex:0 0 91.666%;max-width:91.666%}
.col-12{flex:0 0 100%;max-width:100%}

/* small ≥576px */
@media (min-width:576px){
  .col-sm-1{flex:0 0 8.333%;max-width:8.333%}
  .col-sm-2{flex:0 0 16.666%;max-width:16.666%}
  .col-sm-3{flex:0 0 25%;max-width:25%}
  .col-sm-4{flex:0 0 33.333%;max-width:33.333%}
  .col-sm-5{flex:0 0 41.666%;max-width:41.666%}
  .col-sm-6{flex:0 0 50%;max-width:50%}
  .col-sm-7{flex:0 0 58.333%;max-width:58.333%}
  .col-sm-8{flex:0 0 66.666%;max-width:66.666%}
  .col-sm-9{flex:0 0 75%;max-width:75%}
  .col-sm-10{flex:0 0 83.333%;max-width:83.333%}
  .col-sm-11{flex:0 0 91.666%;max-width:91.666%}
  .col-sm-12{flex:0 0 100%;max-width:100%}
}

/* medium ≥768px */
@media (min-width:768px){
  .col-md-1{flex:0 0 8.333%;max-width:8.333%}
  .col-md-2{flex:0 0 16.666%;max-width:16.666%}
  .col-md-3{flex:0 0 25%;max-width:25%}
  .col-md-4{flex:0 0 33.333%;max-width:33.333%}
  .col-md-5{flex:0 0 41.666%;max-width:41.666%}
  .col-md-6{flex:0 0 50%;max-width:50%}
  .col-md-7{flex:0 0 58.333%;max-width:58.333%}
  .col-md-8{flex:0 0 66.666%;max-width:66.666%}
  .col-md-9{flex:0 0 75%;max-width:75%}
  .col-md-10{flex:0 0 83.333%;max-width:83.333%}
  .col-md-11{flex:0 0 91.666%;max-width:91.666%}
  .col-md-12{flex:0 0 100%;max-width:100%}
}


.alert.alert-danger {
    background: #ffdfe6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border: solid 1px #cb0028;
}
.alert.alert-danger p#form_error-id-error {
    margin: 0;
    font-size: 17px;
    line-height: 22px;
    color: #cb0028;
    font-weight: 500;
    padding-right: 20px;
}

.alert-danger button.close {
    background: transparent;
    color: #cb0028ab;
    font-size: 34px;
    padding: 0;
    width: auto;
    font-weight: 700;
    border: 0;
    transition: 0.2s;
    height: auto;
    line-height: 0;
}



.alert-danger button.close:hover {
  color: red;
  background: transparent;
}


/* ========== Section + Card look ========== */
.order-status-section { background:#fff; padding:0px 0; }
.order-status-container { padding: 0 0 10px; } /* outer container only; screenshot shows page bg, not a card */

/* Title */
.order-status-title { margin-bottom: 6px; }
.order-status-title .order-title { 
  font-size: 34px; line-height: 1.2em; 
  font-weight: 500; 
  margin: 0 0 8px; 
}

.order-status-title .order-title strong {
  font-weight: inherit; 
}

.order-status-title + p,
.order-status-container > p { color:#222; margin: 0 0 22px; }

/* ========== Form ========== */
.order-status-form { margin-top: 8px; }
.order-status-form .form-group { margin-bottom: 18px; }

.order-status-form label { display:block; font-weight:500; font-size:16px; margin-bottom:6px; }
.order-status-form label#customer-number-id-error {
  color: red;
}

.order-status-form .text-danger { color:#c40000; }

/* Inputs */
.order-status-form .form-control {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid #cfcfcf;
  border-radius: 2px;
  outline: none;
  transition: border-color .15s ease;
  background:#fff;
}
.order-status-form .form-control:focus { border-color:#e6002d; }

/* Date inputs with calendar icon */
.input-group { display:flex; align-items:stretch; }
.input-group .form-control { border-right:0; border-radius:2px 0 0 2px; }
.input-group-append { display:flex; }
.input-group-text {
  display:flex; align-items:center; justify-content:center;
  padding: 0 12px;
  border: 1px solid #cfcfcf;
  border-left:0;
  background:#f1f1f1;
  border-radius:0 2px 2px 0;
  min-width: 40px;
}

/* Buttons */
.order-status-form .row .btn { 
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
    border: 0;
    padding: 10px 22px;
    border-radius: 0px;
    margin-top: 10px;
    font-weight: 500;
}

.order-status-form .row .submit-form {
  background:#e6002d; 
  color:#fff;
  margin-right:10px;
}
.order-status-form .row .submit-form:hover { background:#a10000; }

.order-status-form .row button.btn-info {
  background-color:#191919 !important; 
}
.order-status-form .row button.btn-info:hover { background-color:#191919c4; }

/* Error inline text */
.error { display:block; margin-top:6px; font-size:13px; color:#ff0000; }

/* Bottom message + red rule */
.order-status-container h5 { 
  font-size:18px; 
  font-weight:700; 
  color:#222; 
}

/* Spacing tweaks to mirror screenshot */
.order-status-form p strong {    
  font-weight: 600;
    font-size: 18px;
    line-height: 26px; 
  }
.order-status-title + p,
.order-status-form > .row > .col-md-12 p { margin-bottom: 14px; }

.order-status-section .mb-15 { margin-bottom: 15px !important; }
.order-status-container p strong {
    font-weight: 600;
}
.order-status-section .text-bottom {
  margin-bottom: 25px !important;
}

.order-status-section h5 strong { font-weight:inherit;  }

.order-status-section h5.text-danger  {
    color: #e6002d;  font-weight: 500; margin: 20px 0 10px;
}
.order-status-table h5 {
  font-weight: 500!important;
  margin-top: 0;
}

.order-status-section .order-status-table  {
    margin-top: 30px;
    width: 100%;
    overflow: hidden;
    overflow-x: auto;
}

.order-status-section .order-status-table.mt-3{
  margin-top: 60px;
}

.order-status-section .order-status-table table.table thead tr.table-header th {
    background: #111111;
    color:#fff;
    font-size:18px;
    font-weight:600;
    line-height:24px;
    text-align:left;
}

.order-status-section .order-status-table table.table tr td {
    font-size:16px;
    font-weight:500;
    line-height:24px;
    text-align:left;
    background-color: transparent;
}
.order-status-section .order-status-table table tbody tr:hover {
    background-color: #fff1f1db!important;
}

div.fancybox__content {
    padding: 25px !important;
    display: block;
    width: 100%;
}


	
/*------ |-- Order Details - Only popup css --| -----|*/
	body.page-order-detail {
        padding: 0!important;
    }
	.page-order-detail .fancybox__backdrop {
	    opacity:0;
	    animation: none!important;
	    transition: 0s!important;
	}

	.page-order-detail .fancybox__track button.carousel__button {
	     opacity:1;
	}

	.page-order-detail div#dialog-content {
	    box-shadow: 0 10px 50px -15px #2d2d2d; 
	}


@media (max-width: 1024px) { 

  .order-status-section h5 {
    font-size: 22px !important;
    line-height: 32px !important;
    margin: 0 0 10px;
  }

  .order-status-section .order-status-table.mt-3 {
    margin-top: 40px;
  } 

  .order-status-container .order-status-form .row .col-md-10 {
      flex: 100%;
      max-width: 100%;
  }
  

}



@media (max-width: 767px) { 
  
  .order-status-container .row { margin-top: 10px; }  
  .order-status-container .row .col-sm-3 {
    min-width: 150px;
    max-width: 150px;
  } 


} 



@media (max-width: 580px) {  

  .order-status-form .row .col-md-12 , 
  .order-status-form .row .col-sm-6 ,
  .order-status-form .row .col-sm-12 {
      width: 100%;
  }

  .order-status-form .form-control {
      padding: 8px 12px;
  }

}