@font-face {font-family: "Kathen";
    src: url("../font/Kathen.eot"); /* IE9*/
    src: url("../font/Kathen.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../font/Kathen.woff2") format("woff2"), /* chrome、firefox */
    url("../font/Kathen.woff") format("woff"), /* chrome、firefox */
    url("../font/Kathen.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("../font/Kathen.svg#Kathen") format("svg"); /* iOS 4.1- */
}
  
@font-face {font-family: "Poppins";
    src: url("../font/Poppins.eot"); /* IE9*/
    src: url("../font/Poppins.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../font/Poppins.woff2") format("woff2"), /* chrome、firefox */
    url("../font/Poppins.woff") format("woff"), /* chrome、firefox */
    url("../font/Poppins.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("../font/Poppins.svg#Kathen") format("svg"); /* iOS 4.1- */
}

html, body{
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.text-poppin{
    font-family: 'Poppins';
}

.text-kathen{
    font-family: 'Kathen';
}

.bg-blue{
    background: #a2f1fc;
}


.thank-container{
    height: 100vh;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.checkout-box{
    border: 1px solid #e4e4e4;
    border-radius: 30px;
    padding: 30px;
    max-width: 500px;
}

.high-box{
    display: inline-block;
    padding: 10px 15px;
    border-radius: 10px;
    color: #FFF;
}

.form-group-title{
    background-color: #1e88e5;
    color: #FFF;
    padding: 5px;
    text-align:center
}

.col-form-label{
    font-weight: 600 !important;
}

.float-label-margin{
    margin-top: 16px;
    margin-bottom: 15px;
}

.text-green{
    color: #00a65a;
}

.text-red{
    color: #a60000;
}

.box-header{
    display: flex;
    border-bottom: 1px solid #000;
    padding-top: 10px;
    padding-bottom: 10px;
}

.box-title{
    margin-bottom: 0px;
}

span.form-control{
    min-height: 38.55px;
}

.form-control.grey-read[readonly]{
    background-color: #eee;
}

.btn-list *:not(:last-child){
    margin-right: 10px;
}

.btn-list *{
    margin-bottom: 10px;
}

.worklist-title-box{
    background-color: #ccfec8;
    margin-top: 15px;
    margin-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

.worklist-title-box > div{
    padding-top: 10px;
    padding-bottom: 10px;
}

.worklist-title-box > div:not(:last-child){
    margin-right: 15px;
}

.worker-section{
    margin-bottom: 15px;
}

.worker-section > div{
    border-bottom: 1px solid #E4E4E4;
    margin-bottom: 20px;
}

.order_wrapper{
    border-bottom: 1px solid #E4E4E4;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.timeline-horizontal {
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
  
.li-horizontal {
    transition: all 200ms ease-in;
}
  
.timestamp-horizontal {
    margin-bottom: 20px;
    padding: 0px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 100;
}
  
.status-horizontal {
    padding: 10px 40px;
    display: flex;
    justify-content: center;
    border-top: 2px solid #D6DCE0;
    position: relative;
    transition: all 200ms ease-in;
}

.status-horizontal h4 {
    font-weight: 600;
}
  
.status-horizontal:before {
    content: "";
    width: 25px;
    height: 25px;
    background-color: white;
    border-radius: 25px;
    border: 1px solid #ddd;
    position: absolute;
    top: -15px;
    left: 42%;
    transition: all 200ms ease-in;
}
  
.status-horizontal-complete {
    padding: 10px 40px;
    display: flex;
    justify-content: center;
    border-top: 2px solid #27AE60;
    position: relative;
    transition: all 200ms ease-in;
}

.status-horizontal-complete h4 {
    font-weight: 600;
    color:#27AE60;
}
  
.status-horizontal-complete:before {
    content: "";
    width: 25px;
    height: 25px;
    background-color: white;
    border-radius: 25px;
    border: 1px solid #27AE60;
    position: absolute;
    top: -15px;
    left: 42%;
    transition: all 200ms ease-in;
}
  
.status-horizontal-fail {
    padding: 10px 40px;
    display: flex;
    justify-content: center;
    border-top: 2px solid #FF0000;
    position: relative;
    transition: all 200ms ease-in;
}

.status-horizontal-fail h4 {
    font-weight: 600;
    color:#FF0000;
}
  
.status-horizontal-fail:before {
    content: "";
    width: 25px;
    height: 25px;
    background-color: white;
    border-radius: 25px;
    border: 1px solid #FF0000;
    position: absolute;
    top: -15px;
    left: 42%;
    transition: all 200ms ease-in;
}