@import 'https://fonts.googleapis.com/css?family=Roboto';
/* js folder */

body {
    padding: 0;
    margin: 0;
    background-color: #fff;
    font-family: "Roboto", sans-serif;
}

.step-wrapper {
    padding: 20px 0;
    display: none;
}

.step-wrapper.active {
    display: block;
}

.step-indicator {
    border-collapse: separate;
    display: table;
    margin-left: 0px;
    position: relative;
    table-layout: fixed;
    text-align: center;
    vertical-align: middle;
    padding-left: 0;
    padding-top: 20px;
}

.step-indicator li {
    display: table-cell;
    position: relative;
    float: none;
    padding: 0;
    width: 1%;
}

.step-indicator li:after {
    background-color: #ccc;
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    width: 100%;
    top: 32px;
}

.step-indicator li:after {
    left: 50%;
}

.step-indicator li:last-child:after {
    display: none;
}

.step-indicator li.active .step {
    border-color: #4183D7;
    color: #4183D7;
}

.step-indicator li.active .caption {
    color: #4183D7;
}

.step-indicator li.complete:after {
    background-color: #87D37C;
}

.step-indicator li.complete .step {
    border-color: #87D37C;
    color: #87D37C;
}

.step-indicator li.complete .caption {
    color: #87D37C;
}

.step-indicator .step {
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #ccc;
    color: #ccc;
    font-size: 24px;
    height: 64px;
    line-height: 64px;
    margin: 0 auto;
    position: relative;
    width: 64px;
    z-index: 1;
}

.step-indicator .step:hover {
    cursor: pointer;
}

.step-indicator .caption {
    color: #ccc;
    padding: 11px 16px;
}

#rcorners3 {
    border-radius: 15px;
    background: #a19958;
    padding: 20px;
}

.bg-gray {
    background-color: #888888;
}

.bg-lightgray {
    background-color: #cccccc;
}

/* upload css */
.file-drop-area {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 25px;
    border: 1px dashed rgba(255, 255, 255, 0.826);
    border-radius: 3px;
    transition: 0.2s;
}

.file-drop-area:hover {
    border-color: black;
    border-style: dashed;
    border-width: medium;
}

.choose-file-button {
    flex-shrink: 0;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    padding: 8px 15px;
    margin-right: 10px;
    font-size: 12px;
    text-transform: uppercase;
}

.file-message {
    font-size: small;
    font-weight: 300;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-input {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
    opacity: 0;
}

.QuoteStatusPending {
    background: #ff0000;
    color: #ffffff;
  }
  
.QuoteStatusPaid {
    background: #33FF3C;
    color: #000000;
  }

.QuoteStatusNot {
    background: #ffe9bd;
    color: #000000;
  }
.QuoteStatusDetrack {
    background: #3c15ff;
    color: #ffffff;
  }
.tdwidth {
    text-align:right;
    width:1%;
    white-space: nowrap;
}
.tdwidthcenter {
    text-align:center;
    width:2%;
    white-space: nowrap;
}

.messagesx {
    display: none;
}
.wtwhitetext {
    font-size: x-large;
    color: #ffffff;

}
.wttopbar {
    height: 55px;

    /* Full-height: remove this if you want "auto" height */
    width: 100%;

    /* Set the width of the sidebar */
    position: fixed;

    /* Fixed Sidebar (stay in place on scroll) */
    z-index: 2;

    /* Stay on top */
    top: 0;

    /* Stay at the top */
    left: 0;
    /* background-color: rgb(227, 44, 44); */
    background-color: #000000;
    /* Black */
    /* Disable horizontal scroll */
    padding: 16px;
}

.middlex {
    position: absolute;
    top: 160px;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.btn-betel { 
    color: #ffffff; 
    background-color: #18A9B5; 
    border-color: #130269; 
  } 
   
  .btn-betel:hover, 
  .btn-betel:focus, 
  .btn-betel:active, 
  .btn-betel.active, 
  .open .dropdown-toggle.btn-betel { 
    color: #ffffff; 
    background-color: #BED630; 
    border-color: #130269; 
  } 
   
  .btn-betel:active, 
  .btn-betel.active, 
  .open .dropdown-toggle.btn-betel { 
    background-image: none; 
  } 
   
  .btn-betel.disabled, 
  .btn-betel[disabled], 
  fieldset[disabled] .btn-betel, 
  .btn-betel.disabled:hover, 
  .btn-betel[disabled]:hover, 
  fieldset[disabled] .btn-betel:hover, 
  .btn-betel.disabled:focus, 
  .btn-betel[disabled]:focus, 
  fieldset[disabled] .btn-betel:focus, 
  .btn-betel.disabled:active, 
  .btn-betel[disabled]:active, 
  fieldset[disabled] .btn-betel:active, 
  .btn-betel.disabled.active, 
  .btn-betel[disabled].active, 
  fieldset[disabled] .btn-betel.active { 
    background-color: #18A9B5; 
    border-color: #130269; 
  } 
   
  .btn-betel .badge { 
    color: #18A9B5; 
    background-color: #ffffff; 
  }

  .navbar {
    background-color: #3b4957;
    
}

.navbar-brand,
.navbar-nav .nav-link {
    padding: 0.5rem 1rem;
  line-height: 1.5;
  text-decoration: none;
  border-bottom: 3px solid transparent;
    
}

.navbar-nav .nav-link:hover {
  border-bottom: 3px solid rgb(255, 255, 255);
}

.nav-link.active {
  border-bottom: 3px solid #ffd700;
  color: black;
}

.dropdown-item {
    color: #212529;
}

.dropdown-item.active,
.dropdown-item:active,
.dropdown-item:focus {
    background-color: #e2e3e5;
    color: #212529;
}

.dropdown-divider {
    background-color: #e2e3e5;
}

.bg-black {
    background-color: black;
}

.bg-gold {
    color: #ffd700;
}

.nav-pills .nav-link:not(.active) {
    background-color: #fff;
    color: black;
}

/* active*/
.nav-pills .nav-link {
    background-color: rgba(0, 255, 0, 0.5);
    color: white;
}

.btn-outline.rlbtn-btn {
    border-color: #ffd700;
    outline-color: #ffd700;
    color: #ffd700;
}