:root {
   /* New UI CSS */
   --new-background-color: #F9F7F7 ;
   --new-text-color:#707070;
   --new-border-color:#7D7D7D;
    --new-white-color:#fff;
    --new-lightborder-color: #8080801f;
    --new-shadow-color: #ced4da;
  /* End */
  --color-primary: #6246EA;
  --color-primary-variation: #d7c8ed;
  --color-primary-variation1: #897aa2;
  --color-white: #ffffff;
  --color-accent: #c8e3f0;
  --color-4: #1e3c7280;
  --color-5: #e77f7f;
  --color-6: #995b8d;
  --color-7: #a1c4fd;
  --color-8: #c2e9fb;
  --color-9: #6eb9f7;
  --color-white-2: #fefefe;
  --color-off-white: #eee;
  --color-accent: #c8e3f0;
  --color-red: #d92a2a;
  --color-dark-red: #EF5252;
  --color-red-shadow: #d92a2a30;
  --color-green: #0ba360;
  --color-green-shadow: #0ba36030;
  --color-green-2: #3cba92;
  --color-green-3: #35CF8B;
  --color-light-yellow:yellow;
  --color-yellow: #ffcc00;
  --color-yellow-translucent: #22201c99;
  --color-neon-yellow: #ffff00;
  --card-shadow: #00000017;
  --color-lightgrey: #8f8e8e;
  --color-black:  #000;
  --color-form-label: #9b9b9b;
  --color-off-grey:#c0bfbf;
  --color-box-shadow-1: #00000016;
  --color-box-shadow-2: #00000035;
}
input,div{outline: none;}
body {
  font-style: normal;
  font-size: 14px !important;
  line-height: 21px !important;
}

.font-para-title {
  color:  var(--color-primary);

  font-weight: 500;
}

.buyer-name {
  font-size: 16px;
  font-weight: 500;
}

.buyer-item {

  font-weight: 700;
  font-size: 1vw;
  color: var(--color-primary)
}

.right-border {
  border-right: 3px solid;
}

.bottom-border {
  border-bottom: 2px solid
}


.button-bar {
  display: flex;
  justify-content: space-between;
  border-radius: 10px;
  margin-top: 10px;
}

.button-bar button {
  color: var(--color-white);
  padding: 10px 20px;
  border: 0;
  font-weight: 600;
  outline: none;
  cursor: pointer;
}

.button-bar .red-btn {
  border-radius: 0 10px 0 10px;
  background: var(--color-red);
}
.button-bar .blue-btn {
  border-radius: 0 10px 0 10px;
  background: var(--color-primary);
}
.button-bar .green-btn {
  background: var(--color-green);
  border-radius: 10px 0 10px 0;
  background-position: center;
  transition: background 0.8s;
}
.button-bar button:hover {
  outline: none;
  background:  var(--color-primary) radial-gradient(circle, transparent 1%, var(--color-green) 1%) center/15000%;
}
.button-bar button:active {
  outline: none;
  background-size: 100%;
  transition: background 0s;
}
.button-bar button:focus {
  outline: none;
}

button:focus {
  outline: none !important;
}

.button-bar .lightgreen-btn {
  background: var(--color-green-3);
}

.button-bar .yellow-btn {
  background: var(--color-neon-yellow);
  color: black;
}

.button-bar .darkred-btn {
  background: var(--color-dark-red);
}
.lightgreen-btn:hover,
.yellow-btn:hover,
.darkred-btn:hover{
color: white;
}


.box-shadow-all {
  box-shadow: 0 2px 9px 0px #00000047;
}

.box-shadow-1 {
  box-shadow: 0 7px 8px 0px #00000047;
}


.blue-bg {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}

.right-align {
  justify-self: end;
}

/* Ripple effect */

.ripple {
  background-position: center;
  transition: background 0.8s;
}

.ripple:hover {
  background: orange radial-gradient(circle, transparent 1%, blue 1%) center/15000%;
}

.ripple:active {
  background-color: orange;
  background-size: 100%;
  transition: background 0s;
}

.common-btn{
  border-radius: 9px;
  background: var(--color-primary);
  border: 1px solid #c5c5c5;
  box-shadow: 0px 3px 6px #00000047;
  color: var(--color-white);
  padding: 10px 20px;
  border: 0;
  font-weight: 600;
  outline: none;
  cursor: pointer;
}

button:focus {
  outline: none;
}

.mat-tab-group {
}

.mat-progress-bar-background {
  /* fill: lightcoral !important; */
}

.fa-gradient {
  background: crimson;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.table-hover tbody tr:hover {
  background-color: var(--color-accent) !important;
}

#desktopHeader {
  position: fixed;
  background: var(--white);
  z-index: 1001;
  top: 0px;
  width: 100%;
  box-shadow: 0px 1px 11px 1px rgba(0, 0, 0, 0.25);
}

.outline-border-margin {
  margin: 0px 10px;
}

.vhcenter-div {
  align-items: center;
  justify-content: center;
  display: flex;
}

.form-design {
  border: 1px solid  var(--color-primary);
  padding: 18px;
  margin: 10px 0px;
  background: #d3d3d333;
  border-radius: 20px;
}

/* material class override */

.mat-button.mat-primary[disabled],
.mat-button.mat-accent[disabled],
.mat-button.mat-warn[disabled],
.mat-button[disabled][disabled],
.mat-icon-button.mat-primary[disabled],
.mat-icon-button.mat-accent[disabled],
.mat-icon-button.mat-warn[disabled],
.mat-icon-button[disabled][disabled],
.mat-stroked-button.mat-primary[disabled],
.mat-stroked-button.mat-accent[disabled],
.mat-stroked-button.mat-warn[disabled],
.mat-stroked-button[disabled][disabled] {
  background-color: rgba(0, 0, 0, 0.26);
  color: var(--color-white);
}

#pending.mat-form-field-appearance-legacy .mat-form-field-underline {
  bottom: 0.25em;
}

#toast .cdk-overlay-pane {
  margin-bottom: 30% !important;
}

.mat-snack-bar-container {
  border-radius: 20px !important;
  text-align: center !important;

  background:  var(--color-primary) !important;
  color: #c8e3f0 !important;
  border: 1px solid  var(--color-primary) !important;
}

.mat-tab-label,
.mat-tab-link {
  font-size: 15px !important;
}

.desktop-content-margin {
  margin-top: 130px;
  padding: 12px 30px;
  height: 100%;
}

.mat-form-field-appearance-outline .mat-form-field-outline {
  color:  var(--color-primary) !important;
}

.mat-form-field-appearance-outline .mat-form-field-outline-thick {
  color:  var(--color-primary) !important;
}

@media screen and (max-width: 1292px) {
  .desktop-content-margin {
    margin-top: 184px !important;
  }
}
@media screen and (max-width: 550px) {
  .desktop-content-margin {
    margin-top: 20px;
  }
}

@media screen and (max-width: 1000px) {
  /* .desktop-content-margin{margin-top: 160px;} */
}

@media screen and (max-width: 712px) {
  .desktop-content-margin {
    margin-top: 200px;
  }
}

.mat-datepicker-content-touch .mat-calendar {
  width: 54vh !important;
  height: 70vh !important;
}

/* .search-results{ height : 100vh; overflow-y: scroll; } */


.mat-tab-label {
  height: 48px;
  /* padding: 0 24px; */
  cursor: pointer;
  box-sizing: border-box;
  opacity: 0.6;
  min-width: 160px;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  position: relative;
  /* color: white!important; */
  border: 1px solid #ffffff !important;
  /* background-image: linear-gradient(to right, #FF512F 0%, #DD2476 51%, #FF512F 100%)!important; */
  background-color: #ffffff;
  margin: 0px 8px !important;
  border-radius: 16px !important;
}



body .mat-option:not([disabled]) .mat-option-text {
  color:  var(--color-primary);
  
  letter-spacing: 1px;
}

.select-lang {
  /* padding: 5px 20px; */

  font-weight: 500;
  color: var(--color-primary);
  border: 4px solid var(--color-primary);
  border-radius: 5px;
  letter-spacing: 1px;
  box-shadow: 5px 5px 14px #44485017;
  text-align: center;
  background: transparent;
  outline: none;
  cursor: pointer;
}

.select-lang option:hover {
  cursor: pointer;
}


.error-wrapper {
  color: var(--color-red);
  padding-top: 15px;
}

.common-button-wrapper {
  text-align: center;
  padding-top: 30px;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
  width: 70%;
  padding: 10px;
  border-radius: 4px;
  margin-top: 20px;
  transition: 0.3s all;
}

.alert-danger {
  color: #721C24;
  background-color: #F8D7DA;
  border-color: #F5C6CB;
  width: 70%;
  padding: 10px;
  border-radius: 4px;
  margin-top: 20px;
  transition: 0.3s all;
}

.invalid-feedback {
  display: block !important;
  font-weight: 600;
}

.no-data-wrapper {
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.no-data-wrapper div {
  font-size: 20px;
  color: var(--color-grey);
  text-transform: capitalize;
}

.select-wrapper {
  width: 100%;
  padding: 8px 6px;
  border: 3px solid var(--color-primary-variation);
}


.search-input-wrapper {
  position: relative;
  width: 30%;
}

.search-input-wrapper .form-field {
  margin-right: 8px;
  box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;
  box-sizing: border-box;
  transition: all 0.2s ease-in-out;
  appearance: none;
  border: none;
  width: 100%;
  outline: 0;
  font-size: 16px;
  border-radius: 9px;
  padding: 8px;
  background-color: #EBECF0;
  text-shadow: 1px 1px 0 #FFF;
}

.search-input-wrapper .form-field:focus {
  box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
}

.search-input-wrapper .search-wrapper {
  position: absolute;
  top: 4px;
  right: 12px;
  color: var(--color-primary);
  font-size: 18px;
  /* cursor: pointer; */
}
.search-input {
  position: relative;
  width: 100%;
}
.search-input .form-field {
  appearance: none;
  border: 1px solid var(--new-border-color);
  width: 100%;
  outline: 0;
  padding: 8px;
  background-color:white;
  border-radius: 3px;
  height: 45px;
  padding-right: 5%;
}

.search-input .form-field:focus {
  box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
}

.search-input .search-wrapper {
  position: absolute;
  top: 6px;
  right: 12px;
  color: var(--color-primary);
  font-size: 18px;
  /* cursor: pointer; */
}
.search-input .search-wrapper .fa-times {
  cursor: pointer;
}
.search-input-wrapper .search-wrapper .fa-times {
  cursor: pointer;
}

.red-error {
  border: 2px solid red !important;
}

.text-center {
  text-align: center;
}


.no-data-wrapper {
  display: flex;
  height:100%;
  justify-content: center;
  align-items: center;
}

.cursor-pointer {
  cursor: pointer;
}

.goback {
  display: inline-flex;
}

.goback .back-btn {
  /* position: absolute; */
  position: inherit;
  margin: 3px 14px;
  cursor: pointer;
}

.goback svg {
  cursor: pointer;
}

.no-width {
  min-width: auto !important;
}
.pos-relative {
  position: relative;
}
.column-min-width {
  min-width: 120px;
}
.mat-autocomplete-panel{
  top: 9px!important;
}

.mat-autocomplete-panel.mat-autocomplete-visible{
  border-top-left-radius: 4px!important;
    border-top-right-radius: 4px!important;
    border: 1px solid #2A4298!important;
}
.title-section {
  background: white;
  box-shadow: 0px 1px 9px var(--new-shadow-color);
  border-radius: 5px;
  color: #4B4B4B;
}

.needHelp a:hover {
  color:var(--color-primary) !important;
}

.NgxEditor__Dropdown .NgxEditor__Dropdown--Selected, .NgxEditor__Dropdown .NgxEditor__Dropdown--Open {
  color: #6246ea !important;
  background-color: #6246ea29 !important;
}
.NgxEditor__Content{
  min-height: 100px;
}
.NgxEditor__MenuItem.NgxEditor__MenuItem--Active, .NgxEditor__MenuItem .NgxEditor__MenuItem--Active {
  background-color: #e6e1fc !important;
  color: #6246ea !important;;
}
.info-icon{
  font-style: italic;
  font-size: 10px;
  font-weight: 700;
  color: #6546EA;
  cursor: pointer;
}