stylesheets-redwood.md

Orange

Primary	Accent
#d0724f	#6E4E48

IO_ORANGE_860_FLUID_SS

:root {
  --pt-banner-background-color: #d0724f; /* Primary */
  --pt-border-contrast-color: #6E4C3F; /* Accent */
  --pt-strip-height: 0px;
}

:root.psc_form-small {
  --pt-strip-height: 0px;
}

/* JSMPros - https://www.youtube.com/watch?v=FuHJTVgw5fU */
/* Fluid Notifications */
#PT_HEADER .psc_confirmation-animate {
  margin-right: .5em;
  left: auto;
  width: 350px;
  margin-top: .5em;
}

/* Company Info - Welcome Message */
/* https://pe0ples0ft.blogspot.com/2018/10/pt857-custom-header-CompanyInfo-4.html */
#ioDBName {
  /* Align Welcome Message to the right */
  float: left;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

#ioWelcome {
  /* Align Welcome Message to the right */
  float: right;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

IO_ORANGE_860_PTCP_SS

:root {
  --pt-banner-background-color: #d0724f; /* Primary */
  --pt-border-contrast-color: #6E4C3F; /* Accent */
  --pt-strip-height: 0px;
}

:root.psc_form-small {
  --pt-strip-height: 0px;
}

#CompanyInfo.ps_box-headerbranding {
  background: var(--pt-banner-background-color);
  border-bottom: var(--pt-banner-background-color);
}

/* JSMPros - https://www.youtube.com/watch?v=ExiMhUcdsFE */
/* Classic Plus Notifications */
.pt_classic_plus .ps_box-toolshiddens .PTCPSAVEDIV {
    width: 350px;
    border-radius: .5em;

    /* to fix overflow text issue */
    height:auto;

    /* to make space for the close button */
    padding: .1em 2em 1em 1em;
    text-align: left;
}

/* Classic Plus Notification Close Buttons */
.pt_classic_plus .ps_box-toolshiddens .PTCPSAVEDIV #ptpopupclose {
    float:right;
    position: absolute;
    top: .2em;
    right: -.2em;
}

/* Company Info - Welcome Message */
/* https://pe0ples0ft.blogspot.com/2018/10/pt857-custom-header-CompanyInfo-4.html */
#ioDBName {
  /* Align Welcome Message to the right */
  float: left;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

#ioWelcome {
  /* Align Welcome Message to the right */
  float: right;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

Red

Primary	Accent
#D63B25	#6E3A34

IO_RED_860_FLUID_SS

:root {
  --pt-banner-background-color: #D63B25; /* Primary */
  --pt-border-contrast-color: #6E3A34; /* Accent */
  --pt-strip-height: 0px;
}

:root.psc_form-small {
  --pt-strip-height: 0px;
}

/* JSMPros - https://www.youtube.com/watch?v=FuHJTVgw5fU */
/* Fluid Notifications */
#PT_HEADER .psc_confirmation-animate {
  margin-right: .5em;
  left: auto;
  width: 350px;
  margin-top: .5em;
}

/* Company Info - Welcome Message */
/* https://pe0ples0ft.blogspot.com/2018/10/pt857-custom-header-CompanyInfo-4.html */
#ioDBName {
  /* Align Welcome Message to the right */
  float: left;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

#ioWelcome {
  /* Align Welcome Message to the right */
  float: right;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

IO_RED_860_PTCP_SS

:root {
  --pt-banner-background-color: #D63B25; /* Primary */
  --pt-border-contrast-color: #6E3A34; /* Accent */
  --pt-strip-height: 0px;
}

:root.psc_form-small {
  --pt-strip-height: 0px;
}

#CompanyInfo.ps_box-headerbranding {
  background: var(--pt-banner-background-color);
  border-bottom: var(--pt-banner-background-color);
}

/* JSMPros - https://www.youtube.com/watch?v=ExiMhUcdsFE */
/* Classic Plus Notifications */
.pt_classic_plus .ps_box-toolshiddens .PTCPSAVEDIV {
    width: 350px;
    border-radius: .5em;

    /* to fix overflow text issue */
    height:auto;

    /* to make space for the close button */
    padding: .1em 2em 1em 1em;
    text-align: left;
}

/* Classic Plus Notification Close Buttons */
.pt_classic_plus .ps_box-toolshiddens .PTCPSAVEDIV #ptpopupclose {
    float:right;
    position: absolute;
    top: .2em;
    right: -.2em;
}

/* Company Info - Welcome Message */
/* https://pe0ples0ft.blogspot.com/2018/10/pt857-custom-header-CompanyInfo-4.html */
#ioDBName {
  /* Align Welcome Message to the right */
  float: left;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

#ioWelcome {
  /* Align Welcome Message to the right */
  float: right;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

Green

Primary	Accent
#84AD6A	#577346

IO_GREEN_860_FLUID_SS

:root {
  --pt-banner-background-color: #84AD6A; /* Primary */
  --pt-border-contrast-color: #577346; /* Accent */
  --pt-strip-height: 0px;
}

:root.psc_form-small {
  --pt-strip-height: 0px;
}

/* JSMPros - https://www.youtube.com/watch?v=FuHJTVgw5fU */
/* Fluid Notifications */
#PT_HEADER .psc_confirmation-animate {
  margin-right: .5em;
  left: auto;
  width: 350px;
  margin-top: .5em;
}

/* Company Info - Welcome Message */
/* https://pe0ples0ft.blogspot.com/2018/10/pt857-custom-header-CompanyInfo-4.html */
#ioDBName {
  /* Align Welcome Message to the right */
  float: left;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

#ioWelcome {
  /* Align Welcome Message to the right */
  float: right;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

IO_GREEN_860_PTCP_SS

:root {
  --pt-banner-background-color: #84AD6A; /* Primary */
  --pt-border-contrast-color: #577346; /* Accent */
  --pt-strip-height: 0px;
}

:root.psc_form-small {
  --pt-strip-height: 0px;
}

#CompanyInfo.ps_box-headerbranding {
  background: var(--pt-banner-background-color);
  border-bottom: var(--pt-banner-background-color);
}

/* JSMPros - https://www.youtube.com/watch?v=ExiMhUcdsFE */
/* Classic Plus Notifications */
.pt_classic_plus .ps_box-toolshiddens .PTCPSAVEDIV {
    width: 350px;
    border-radius: .5em;

    /* to fix overflow text issue */
    height:auto;

    /* to make space for the close button */
    padding: .1em 2em 1em 1em;
    text-align: left;
}

/* Classic Plus Notification Close Buttons */
.pt_classic_plus .ps_box-toolshiddens .PTCPSAVEDIV #ptpopupclose {
    float:right;
    position: absolute;
    top: .2em;
    right: -.2em;
}

/* Company Info - Welcome Message */
/* https://pe0ples0ft.blogspot.com/2018/10/pt857-custom-header-CompanyInfo-4.html */
#ioDBName {
  /* Align Welcome Message to the right */
  float: left;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

#ioWelcome {
  /* Align Welcome Message to the right */
  float: right;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

Purple

Primary	Accent
#9e648c	#6E2456

IO_PURPLE_860_FLUID_SS

:root {
  --pt-banner-background-color: #9e648c; /* Primary */
  --pt-border-contrast-color: #6E2456; /* Accent */
  --pt-strip-height: 0px;
}

:root.psc_form-small {
  --pt-strip-height: 0px;
}

/* JSMPros - https://www.youtube.com/watch?v=FuHJTVgw5fU */
/* Fluid Notifications */
#PT_HEADER .psc_confirmation-animate {
  margin-right: .5em;
  left: auto;
  width: 350px;
  margin-top: .5em;
}

/* Company Info - Welcome Message */
/* https://pe0ples0ft.blogspot.com/2018/10/pt857-custom-header-CompanyInfo-4.html */
#ioDBName {
  /* Align Welcome Message to the right */
  float: left;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

#ioWelcome {
  /* Align Welcome Message to the right */
  float: right;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

IO_PURPLE_860_PTCP_SS

:root {
  --pt-banner-background-color: #9e648c; /* Primary */
  --pt-border-contrast-color: #6E2456; /* Accent */
  --pt-strip-height: 0px;
}

:root.psc_form-small {
  --pt-strip-height: 0px;
}

#CompanyInfo.ps_box-headerbranding {
  background: var(--pt-banner-background-color);
  border-bottom: var(--pt-banner-background-color);
}

/* JSMPros - https://www.youtube.com/watch?v=ExiMhUcdsFE */
/* Classic Plus Notifications */
.pt_classic_plus .ps_box-toolshiddens .PTCPSAVEDIV {
    width: 350px;
    border-radius: .5em;

    /* to fix overflow text issue */
    height:auto;

    /* to make space for the close button */
    padding: .1em 2em 1em 1em;
    text-align: left;
}

/* Classic Plus Notification Close Buttons */
.pt_classic_plus .ps_box-toolshiddens .PTCPSAVEDIV #ptpopupclose {
    float:right;
    position: absolute;
    top: .2em;
    right: -.2em;
}

/* Company Info - Welcome Message */
/* https://pe0ples0ft.blogspot.com/2018/10/pt857-custom-header-CompanyInfo-4.html */
#ioDBName {
  /* Align Welcome Message to the right */
  float: left;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

#ioWelcome {
  /* Align Welcome Message to the right */
  float: right;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

Blue

Primary	Accent
#1374BA	#2C526E

IO_BLUE_860_FLUID_SS

:root {
  --pt-banner-background-color: #1374BA; /* Primary */
  --pt-border-contrast-color: #2C526E; /* Accent */
  --pt-strip-height: 0px;
}

:root.psc_form-small {
  --pt-strip-height: 0px;
}

/* JSMPros - https://www.youtube.com/watch?v=FuHJTVgw5fU */
/* Fluid Notifications */
#PT_HEADER .psc_confirmation-animate {
  margin-right: .5em;
  left: auto;
  width: 350px;
  margin-top: .5em;
}

/* Company Info - Welcome Message */
/* https://pe0ples0ft.blogspot.com/2018/10/pt857-custom-header-CompanyInfo-4.html */
#ioDBName {
  /* Align Welcome Message to the right */
  float: left;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

#ioWelcome {
  /* Align Welcome Message to the right */
  float: right;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

IO_BLUE_860_PTCP_SS

:root {
  --pt-banner-background-color: #1374BA; /* Primary */
  --pt-border-contrast-color: #2C526E; /* Accent */
  --pt-strip-height: 0px;
}

:root.psc_form-small {
  --pt-strip-height: 0px;
}

#CompanyInfo.ps_box-headerbranding {
  background: var(--pt-banner-background-color);
  border-bottom: var(--pt-banner-background-color);
}

/* JSMPros - https://www.youtube.com/watch?v=ExiMhUcdsFE */
/* Classic Plus Notifications */
.pt_classic_plus .ps_box-toolshiddens .PTCPSAVEDIV {
    width: 350px;
    border-radius: .5em;

    /* to fix overflow text issue */
    height:auto;

    /* to make space for the close button */
    padding: .1em 2em 1em 1em;
    text-align: left;
}

/* Classic Plus Notification Close Buttons */
.pt_classic_plus .ps_box-toolshiddens .PTCPSAVEDIV #ptpopupclose {
    float:right;
    position: absolute;
    top: .2em;
    right: -.2em;
}

/* Company Info - Welcome Message */
/* https://pe0ples0ft.blogspot.com/2018/10/pt857-custom-header-CompanyInfo-4.html */
#ioDBName {
  /* Align Welcome Message to the right */
  float: left;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

#ioWelcome {
  /* Align Welcome Message to the right */
  float: right;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

Teal

Primary	Accent
#60b6ab	#5B6E6B

IO_TEAL_860_FLUID_SS

:root {
  --pt-banner-background-color: #60B6AB; /* Primary */
  --pt-border-contrast-color: #5B6E6B; /* Accent */
  --pt-strip-height: 0px;
}

:root.psc_form-small {
  --pt-strip-height: 0px;
}

/* JSMPros - https://www.youtube.com/watch?v=FuHJTVgw5fU */
/* Fluid Notifications */
#PT_HEADER .psc_confirmation-animate {
  margin-right: .5em;
  left: auto;
  width: 350px;
  margin-top: .5em;
}

/* Company Info - Welcome Message */
/* https://pe0ples0ft.blogspot.com/2018/10/pt857-custom-header-CompanyInfo-4.html */
#ioDBName {
  /* Align Welcome Message to the left */
  float: left;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

#ioWelcome {
  /* Align Welcome Message to the right */
  float: right;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

IO_TEAL_860_PTCP_SS

:root {
  --pt-banner-background-color: #60B6AB; /* Primary */
  --pt-border-contrast-color: #5B6E6B; /* Accent */
  --pt-strip-height: 0px;
}

:root.psc_form-small {
  --pt-strip-height: 0px;
}

#CompanyInfo.ps_box-headerbranding {
  background: var(--pt-banner-background-color);
  border-bottom: var(--pt-banner-background-color);
}

/* JSMPros - https://www.youtube.com/watch?v=ExiMhUcdsFE */
/* Classic Plus Notifications */
.pt_classic_plus .ps_box-toolshiddens .PTCPSAVEDIV {
    width: 350px;
    border-radius: .5em;

    /* to fix overflow text issue */
    height:auto;

    /* to make space for the close button */
    padding: .1em 2em 1em 1em;
    text-align: left;
}

/* Classic Plus Notification Close Buttons */
.pt_classic_plus .ps_box-toolshiddens .PTCPSAVEDIV #ptpopupclose {
    float:right;
    position: absolute;
    top: .2em;
    right: -.2em;
}

/* Company Info - Welcome Message */
/* https://pe0ples0ft.blogspot.com/2018/10/pt857-custom-header-CompanyInfo-4.html */
#ioDBName {
  /* Align Welcome Message to the right */
  float: left;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

#ioWelcome {
  /* Align Welcome Message to the right */
  float: right;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

Yellow

Primary	Accent
#F0CC71	#6E6754

IO_YELLOW_860_FLUID_SS

:root {
  --pt-banner-background-color: #F0CC71; /* Primary */
  --pt-border-contrast-color: #6E6754; /* Accent */
  --pt-strip-height: 0px;
}

:root.psc_form-small {
  --pt-strip-height: 0px;
}

/* JSMPros - https://www.youtube.com/watch?v=FuHJTVgw5fU */
/* Fluid Notifications */
#PT_HEADER .psc_confirmation-animate {
  margin-right: .5em;
  left: auto;
  width: 350px;
  margin-top: .5em;
}

/* Company Info - Welcome Message */
/* https://pe0ples0ft.blogspot.com/2018/10/pt857-custom-header-CompanyInfo-4.html */
#ioDBName {
  /* Align Welcome Message to the right */
  float: left;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

#ioWelcome {
  /* Align Welcome Message to the right */
  float: right;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

IO_YELLOW_860_PTCP_SS

:root {
  --pt-banner-background-color: #F0CC71; /* Primary */
  --pt-border-contrast-color: #6E6754; /* Accent */
  --pt-strip-height: 0px;
}

:root.psc_form-small {
  --pt-strip-height: 0px;
}

#CompanyInfo.ps_box-headerbranding {
  background: var(--pt-banner-background-color);
  border-bottom: var(--pt-banner-background-color);
}

/* JSMPros - https://www.youtube.com/watch?v=ExiMhUcdsFE */
/* Classic Plus Notifications */
.pt_classic_plus .ps_box-toolshiddens .PTCPSAVEDIV {
    width: 350px;
    border-radius: .5em;

    /* to fix overflow text issue */
    height:auto;

    /* to make space for the close button */
    padding: .1em 2em 1em 1em;
    text-align: left;
}

/* Classic Plus Notification Close Buttons */
.pt_classic_plus .ps_box-toolshiddens .PTCPSAVEDIV #ptpopupclose {
    float:right;
    position: absolute;
    top: .2em;
    right: -.2em;
}

/* Company Info - Welcome Message */
/* https://pe0ples0ft.blogspot.com/2018/10/pt857-custom-header-CompanyInfo-4.html */
#ioDBName {
  /* Align Welcome Message to the right */
  float: left;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

#ioWelcome {
  /* Align Welcome Message to the right */
  float: right;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

Brown

Primary	Accent
#BA9050	#6E552F

IO_BROWN_860_FLUID_SS

:root {
  --pt-banner-background-color: #BA9050; /* Primary */
  --pt-border-contrast-color: #6E552F; /* Accent */
  --pt-strip-height: 0px;
}

:root.psc_form-small {
  --pt-strip-height: 0px;
}

/* JSMPros - https://www.youtube.com/watch?v=FuHJTVgw5fU */
/* Fluid Notifications */
#PT_HEADER .psc_confirmation-animate {
  margin-right: .5em;
  left: auto;
  width: 350px;
  margin-top: .5em;
}

/* Company Info - Welcome Message */
/* https://pe0ples0ft.blogspot.com/2018/10/pt857-custom-header-CompanyInfo-4.html */
#ioDBName {
  /* Align Welcome Message to the right */
  float: left;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

#ioWelcome {
  /* Align Welcome Message to the right */
  float: right;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

IO_BROWN_860_PTCP_SS

:root {
  --pt-banner-background-color: #BA9050; /* Primary */
  --pt-border-contrast-color: #6E552F; /* Accent */
  --pt-strip-height: 0px;
}

:root.psc_form-small {
  --pt-strip-height: 0px;
}

#CompanyInfo.ps_box-headerbranding {
  background: var(--pt-banner-background-color);
  border-bottom: var(--pt-banner-background-color);
}

/* JSMPros - https://www.youtube.com/watch?v=ExiMhUcdsFE */
/* Classic Plus Notifications */
.pt_classic_plus .ps_box-toolshiddens .PTCPSAVEDIV {
    width: 350px;
    border-radius: .5em;

    /* to fix overflow text issue */
    height:auto;

    /* to make space for the close button */
    padding: .1em 2em 1em 1em;
    text-align: left;
}

/* Classic Plus Notification Close Buttons */
.pt_classic_plus .ps_box-toolshiddens .PTCPSAVEDIV #ptpopupclose {
    float:right;
    position: absolute;
    top: .2em;
    right: -.2em;
}

/* Company Info - Welcome Message */
/* https://pe0ples0ft.blogspot.com/2018/10/pt857-custom-header-CompanyInfo-4.html */
#ioDBName {
  /* Align Welcome Message to the right */
  float: left;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

#ioWelcome {
  /* Align Welcome Message to the right */
  float: right;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

Pink

Primary	Accent
#ca89ad	#6B294D

IO_PINK_860_FLUID_SS

:root {
  --pt-banner-background-color: #ca89ad; /* Primary */
  --pt-border-contrast-color: #6B294D; /* Dark */
  --pt-strip-height: 0px;
}

:root.psc_form-small {
  --pt-strip-height: 0px;
}

/* JSMPros - https://www.youtube.com/watch?v=FuHJTVgw5fU */
/* Fluid Notifications */
#PT_HEADER .psc_confirmation-animate {
  margin-right: .5em;
  left: auto;
  width: 350px;
  margin-top: .5em;
}

/* Company Info - Welcome Message */
/* https://pe0ples0ft.blogspot.com/2018/10/pt857-custom-header-CompanyInfo-4.html */
#ioDBName {
  /* Align Welcome Message to the right */
  float: left;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

#ioWelcome {
  /* Align Welcome Message to the right */
  float: right;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

IO_PINK_860_PTCP_SS

:root {
  --pt-banner-background-color: #ca89ad; /* Primary */
  --pt-border-contrast-color: #6B294D; /* Dark */
  --pt-strip-height: 0px;
}

:root.psc_form-small {
  --pt-strip-height: 0px;
}

#CompanyInfo.ps_box-headerbranding {
  background: var(--pt-banner-background-color);
  border-bottom: var(--pt-banner-background-color);
}

/* JSMPros - https://www.youtube.com/watch?v=ExiMhUcdsFE */
/* Classic Plus Notifications */
.pt_classic_plus .ps_box-toolshiddens .PTCPSAVEDIV {
    width: 350px;
    border-radius: .5em;

    /* to fix overflow text issue */
    height:auto;

    /* to make space for the close button */
    padding: .1em 2em 1em 1em;
    text-align: left;
}

/* Classic Plus Notification Close Buttons */
.pt_classic_plus .ps_box-toolshiddens .PTCPSAVEDIV #ptpopupclose {
    float:right;
    position: absolute;
    top: .2em;
    right: -.2em;
}

/* Company Info - Welcome Message */
/* https://pe0ples0ft.blogspot.com/2018/10/pt857-custom-header-CompanyInfo-4.html */
#ioDBName {
  /* Align Welcome Message to the right */
  float: left;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

#ioWelcome {
  /* Align Welcome Message to the right */
  float: right;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

Grey

Primary	Accent
#C9C3BD	#9E9995

IO_GREY_860_FLUID_SS

:root {
  --pt-banner-background-color: #C9C3BD; /* Primary */
  --pt-border-contrast-color: #9E9995; /* Accent */
  --pt-strip-height: 0px;
}

:root.psc_form-small {
  --pt-strip-height: 0px;
}

/* JSMPros - https://www.youtube.com/watch?v=FuHJTVgw5fU */
/* Fluid Notifications */
#PT_HEADER .psc_confirmation-animate {
  margin-right: .5em;
  left: auto;
  width: 350px;
  margin-top: .5em;
}

/* Company Info - Welcome Message */
/* https://pe0ples0ft.blogspot.com/2018/10/pt857-custom-header-CompanyInfo-4.html */
#ioDBName {
  /* Align Welcome Message to the Left */
  float: left;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

#ioWelcome {
  /* Align Welcome Message to the right */
  float: right;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

IO_GREY_860_PTCP_SS

:root {
  --pt-banner-background-color: #C9C3BD; /* Primary */
  --pt-border-contrast-color: #9E9995; /* Accent */
  --pt-strip-height: 0px;
}

:root.psc_form-small {
  --pt-strip-height: 0px;
}

#CompanyInfo.ps_box-headerbranding {
  background: var(--pt-banner-background-color);
  border-bottom: var(--pt-banner-background-color);
}

/* JSMPros - https://www.youtube.com/watch?v=ExiMhUcdsFE */
/* Classic Plus Notifications */
.pt_classic_plus .ps_box-toolshiddens .PTCPSAVEDIV {
    width: 350px;
    border-radius: .5em;

    /* to fix overflow text issue */
    height:auto;

    /* to make space for the close button */
    padding: .1em 2em 1em 1em;
    text-align: left;
}

/* Classic Plus Notification Close Buttons */
.pt_classic_plus .ps_box-toolshiddens .PTCPSAVEDIV #ptpopupclose {
    float:right;
    position: absolute;
    top: .2em;
    right: -.2em;
}

/* Company Info - Welcome Message */ 
/* https://pe0ples0ft.blogspot.com/2018/10/pt857-custom-header-CompanyInfo-4.html */
#ioDBName {
  /* Align Welcome Message to the right */
  float: left;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}

#ioWelcome {
  /* Align Welcome Message to the right */
  float: right;
  margin: 7px;
  /* Set line-height = CompanyInfo height to vertically align Welcome Message to the center */
  line-height: 17px;
  /* Set Text Color */
  color: #fff;
}