/*--- CONTAINER ---*/

.cmp-container.black-opaque-border-padding {
  --container-background: #00000040;
  --container-border-top: 2px solid #000000;
  --container-border-right: 2px solid #000000;
  --container-border-bottom: 2px solid #000000;
  --container-border-left: 2px solid #000000;
  --container-border-radius-top-right: 5px;
  --container-border-radius-top-left: 5px;
  --container-border-radius-bottom-right: 5px;
  --container-border-radius-bottom-left: 5px;
  --container-padding-top: 20px;
  --container-padding-right: 20px;
  --container-padding-bottom: 20px;
  --container-padding-left: 20px;
}
.cmp-container.black-opaque-padding-no-border {
  --container-background: #00000040;
  --container-border-top: 2px solid #00000000;
  --container-border-right: 2px solid #00000000;
  --container-border-bottom: 2px solid #00000000;
  --container-border-left: 2px solid #00000000;
  --container-border-radius-top-right: 5px;
  --container-border-radius-top-left: 5px;
  --container-border-radius-bottom-right: 5px;
  --container-border-radius-bottom-left: 5px;
  --container-padding-top: 20px;
  --container-padding-right: 20px;
  --container-padding-bottom: 20px;
  --container-padding-left: 20px;
}
.cmp-container.black-opaque-border-no-padding {
  --container-background: #00000040;
  --container-border-top: 2px solid #00000080;
  --container-border-right: 2px solid #00000080;
  --container-border-bottom: 2px solid #00000080;
  --container-border-left: 2px solid #00000080;
  --container-border-radius-top-right: 5px;
  --container-border-radius-top-left: 5px;
  --container-border-radius-bottom-right: 5px;
  --container-border-radius-bottom-left: 5px;
  --container-padding-top: 0px;
  --container-padding-right: 0px;
  --container-padding-bottom: 0px;
  --container-padding-left: 0px;
}
.cmp-container.black-opaque-plain {
  --container-background: #00000040;
  --container-border-top: 1px solid #00000000;
  --container-border-right: 1px solid #00000000;
  --container-border-bottom: 1px solid #00000000;
  --container-border-left: 1px solid #00000000;
  --container-border-radius-top-right: 5px;
  --container-border-radius-top-left: 5px;
  --container-border-radius-bottom-right: 5px;
  --container-border-radius-bottom-left: 5px;
  --container-padding-top: 0px;
  --container-padding-right: 0px;
  --container-padding-bottom: 0px;
  --container-padding-left: 0px;
}
.cmp-container.white-opaque-border-padding {
  --container-background: #ffffff1a;
  --container-border-top: 2px solid #ffffff40;
  --container-border-right: 2px solid #ffffff40;
  --container-border-bottom: 2px solid #ffffff40;
  --container-border-left: 2px solid #ffffff40;
  --container-border-radius-top-right: 5px;
  --container-border-radius-top-left: 5px;
  --container-border-radius-bottom-right: 5px;
  --container-border-radius-bottom-left: 5px;
  --container-padding-top: 20px;
  --container-padding-right: 20px;
  --container-padding-bottom: 20px;
  --container-padding-left: 20px;
}
.cmp-container.white-opaque-padding-no-border {
  --container-background: #ffffff1a;
  --container-border-top: 2px solid #00000000;
  --container-border-right: 2px solid #00000000;
  --container-border-bottom: 2px solid #00000000;
  --container-border-left: 2px solid #00000000;
  --container-border-radius-top-right: 5px;
  --container-border-radius-top-left: 5px;
  --container-border-radius-bottom-right: 5px;
  --container-border-radius-bottom-left: 5px;
  --container-padding-top: 20px;
  --container-padding-right: 20px;
  --container-padding-bottom: 20px;
  --container-padding-left: 20px;
}
.cmp-container.white-opaque-border-no-padding {
  --container-background: #ffffff1a;
  --container-border-top: 2px solid #ffffff40;
  --container-border-right: 2px solid #ffffff40;
  --container-border-bottom: 2px solid #ffffff40;
  --container-border-left: 2px solid #ffffff40;
  --container-border-radius-top-right: 5px;
  --container-border-radius-top-left: 5px;
  --container-border-radius-bottom-right: 5px;
  --container-border-radius-bottom-left: 5px;
  --container-padding-top: 0px;
  --container-padding-right: 0px;
  --container-padding-bottom: 0px;
  --container-padding-left: 0px;
}
.cmp-container.white-opaque-plain {
  --container-background: #ffffff1a;
  --container-border-top: 1px solid #00000000;
  --container-border-right: 1px solid #00000000;
  --container-border-bottom: 1px solid #00000000;
  --container-border-left: 1px solid #00000000;
  --container-border-radius-top-right: 5px;
  --container-border-radius-top-left: 5px;
  --container-border-radius-bottom-right: 5px;
  --container-border-radius-bottom-left: 5px;
  --container-padding-top: 0px;
  --container-padding-right: 0px;
  --container-padding-bottom: 0px;
  --container-padding-left: 0px;
}
.cmp-container.plain {
  --container-background: #00000000;
  --container-border-top: 1px solid #00000000;
  --container-border-right: 1px solid #00000000;
  --container-border-bottom: 1px solid #00000000;
  --container-border-left: 1px solid #00000000;
  --container-border-radius-top-right: 0px;
  --container-border-radius-top-left: 0px;
  --container-border-radius-bottom-right: 0px;
  --container-border-radius-bottom-left: 0px;
  --container-padding-top: 0px;
  --container-padding-right: 0px;
  --container-padding-bottom: 0px;
  --container-padding-left: 0px;
}