@import url("/BayportCorporate_Theme/Theme.BayportCorporate.css?12448");

.environment-ribbon {
  overflow: hidden;
  position: absolute;
  z-index: -5;
}
.environment-ribbon-inside {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 55px solid transparent;
  border-right: 55px solid transparent;
}

.phone .environment-ribbon-inside,
.tablet .environment-ribbon-inside {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: unset;
  border-right: unset;
  border-left: 20px solid transparent;
}

.phone .environment-ribbon-inside:after,
.tablet .environment-ribbon-inside:after {
    top: 16px;
    left: -25px;
    transform: rotate(-90deg);
}


.environment-ribbon-inside:after {
  position: absolute;
  top: -45px;
  left: 4px;
  transform: rotate(-45deg);
  color: white;
}

.Development div.environment-ribbon-inside {
    border-left-color: var(--color-info);
    border-top-color: var(--color-info);
}

.layout .Development.header {
    box-shadow: 0 0px 6px 0 var(--color-info);
}

.Development div.environment-ribbon-inside:after {
    content: "DEV";
    font-family: 'VAG Rounded Std', 'Open Sans', sans-serif;
    font-weight: 100;
    font-style: normal;
}

.Testing div.environment-ribbon-inside {
    border-left-color: var(--color-success);
    border-top-color: var(--color-success);
}

.layout .Testing.header {
    box-shadow: 0 0px 6px 0 var(--color-success);
}

.Testing div.environment-ribbon-inside:after {
    content: "QA";
    font-family: 'VAG Rounded Std', 'Open Sans', sans-serif;
    font-weight: 100;
    font-style: normal;
}

.UserAcceptance div.environment-ribbon-inside {
    border-left-color: var(--color-warning);
    border-top-color: var(--color-warning);
}

.layout .UserAcceptance.header {
    box-shadow: 0 0px 6px 0 var(--color-warning);
}

.UserAcceptance div.environment-ribbon-inside:after {
    content: "UAT";
    font-family: 'VAG Rounded Std', 'Open Sans', sans-serif;
    font-weight: 100;
    font-style: normal;
}

.Production div.environment-ribbon-inside,
.MZ_Production div.environment-ribbon-inside {
    border-left-color: var(--color-error);
    border-top-color: var(--color-error);
}

.layout .Production.header,
.layout .MZ_Production.header {
    box-shadow: 0 0px 6px 0 var(--color-error);
}

.Production div.environment-ribbon-inside:after,
.MZ_Production div.environment-ribbon-inside:after {
    content: "PROD";
    font-family: 'VAG Rounded Std', 'Open Sans', sans-serif;
    font-weight: 100;
    font-style: normal;
}