:root {
    --bg-primary: #18a4a3;
    --text-white: #ffffff;
    --text-black: #000000;
    --btn-primary-bg: #616561;
    --btn-primary-bg-hover: #616561;
    --form-input-placeholder: #999999;
    --progress-bar-animation-bg: #dadada;
    --color-1:#00b1eb;

    --bs-border-radius: 0rem;
    --bs-border-radius-lg: 0rem;
    --bs-body-font-size: 13px;
    --color-4: #191919;
    --color-5: #dedede; 
}
body{color:#676a6c; background-color:#f8f8f8;}
.form-floating > label {
    color: var(--form-input-placeholder);
    font-size:14px;
}

.form-floating>.form-control-plaintext~label::after, .form-floating>.form-control:focus~label::after, .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after{background-color:transparent;}
.form-control:focus, .btn:focus-visible{box-shadow:none; border-color:var(--color-1);}
.btn{font-size:13px; font-weight:600;}
.btn-lg{padding:14px 14px 15px;}
.btn-primary-link{color:var(--color-1);}
.btn-primary {
    --bs-btn-color: var(--text-white);
    --bs-btn-bg: var(--btn-primary-bg);
    --bs-btn-border-color: var(--btn-primary-bg);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--btn-primary-bg-hover);
    --bs-btn-hover-border-color: var(--btn-primary-bg-hover);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--btn-primary-bg-hover);
    --bs-btn-active-border-color: var(--btn-primary-bg-hover);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--btn-primary-bg);
    --bs-btn-disabled-border-color: var(--btn-primary-bg);
}
.btn-gray {
    --bs-btn-color: var(--text-black);
    --bs-btn-bg: var(--color-5);
    --bs-btn-border-color: var(--color-5);
    --bs-btn-hover-color: var(--text-black);
    --bs-btn-hover-bg: var(--color-5);
    --bs-btn-hover-border-color: var( --color-5);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--text-black);
    --bs-btn-active-bg: var( --color-5);
    --bs-btn-active-border-color: var( --color-5);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--text-black);
    --bs-btn-disabled-bg: var(--color-5);
    --bs-btn-disabled-border-color: var(--color-5);
}

.btn-group-lg > .btn, .btn-lg {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 1.25rem;
    --bs-btn-border-radius: var(--bs-border-radius-lg);
}

.bg-primary {
    background-color: var(--bg-primary) !important;
}
/* #region Toaster css*/
.app-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  min-width: 260px;

  background: #198754;
  color: white;
  border-radius: 6px;
  box-shadow: 0 6px 14px rgba(0,0,0,.15);

  transform: translateX(120%);
  opacity: 0;
  transition: all .35s ease;
  z-index: 9999;
}

.app-toast.show {
  transform: translateX(0);
  opacity: 1;
}

.toast-body {
  padding: 12px 14px;
  font-size: 14px;
}

.toast-progress {
  height: 4px;
  background: rgba(255,255,255,.2);
}

.toast-progress div {
  height: 100%;
  width: 100%;
  background: #fff;
}

.app-toast.show #toastBar {
  animation: toastTimer 5s linear forwards;
}

@keyframes toastTimer {
  from { width: 100%; }
  to   { width: 0%; }
}

/* #endregion*/
.middle-box-error {
    max-width: 450px;
    z-index: 100;
    margin: 100px auto 0;
    padding: 20px;
    background-color: #fff;
    border:1px solid #eee;
}

    .middle-box-error .alert-content {
        display:block;
        padding:15px 0;
    }

    .middle-box-error .footer-btn-cont {
        padding:20px 0 0 0;
        border-top:1px solid #eee;
        text-align:right;
    }
.middle-box {
    max-width: 400px;
    z-index: 100;
    margin: 0 auto;
    padding-top: 60px;
}

.input-validation-error.form-control:focus {
    border-color: #ced4da;
    background-color: #ffffff;
    color: #000000;
}

.input-validation-error.form-control {
    border-color: #ed5565;
    background-color: #fef0f0;
    color: #ed5565;
}

    .input-validation-error.form-control + label {
        color: #ed5565;
    }

#progressBar {
    height: 15px;
    position: relative;
    margin-bottom: 0px;
}

    #progressBar > div {
        height: 100%;
        text-align: right;
        line-height: 22px;
        width: 0;
        box-sizing: border-box;
    }

    #progressBar .text-remaining {
        font-size: 12px;
        width: 100%;
    }

#spanTimer {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.progress, .progress-bar {
    border-color: #ff4e3b;
}
/*Loader Animation Start*/
#progressBar {
    background-color: var(--progress-bar-animation-bg);
}

    #progressBar > div {
        background-color: var(--color-1);
    }
.product-name {
    margin: 26px 0 0 0;
    font-size: 34px;
    font-weight: normal;
    color: #fff;
    padding: 0;
}

.loginlogo {
    height: 80px;
}