:root {
  --body-font: "Segoe UI", "Helvetica", "Arial", sans-serif;
  --title-font: "Segoe UI", "Helvetica", "Arial", sans-serif;

  --embed-body-font: "Open Sans", "Helvetica", "Arial", sans-serif;
  --online-font: "Panton Online";

  --cropper-bg-width: 1200px;
  --cropper-bg-height: 450px;
  --cropper-bg-offset: center;
  --cropper-bg-size: calc(100% + -200px), auto;
  --cropper-bg-image: url(../resources/email-pattern.png);

  --gen-video-thumb-bg-width: 1920px;
  --gen-video-thumb-bg-height: 1080px;
  --gen-video-thumb-bg-offset: center;
  --gen-video-thumb-bg-size: calc(100% + -200px), auto;
  --gen-video-thumb-bg-image: url(../resources/placeholder.jpg);
  --gen-video-thumb-effect-offset: 600px 1080px;
  --gen-video-thumb-effect-color: rgb(0, 45, 116);

  --brand-video-thumb-bg-width: 1920px;
  --brand-video-thumb-bg-height: 1080px;
  --brand-video-thumb-bg-offset: center;
  --brand-video-thumb-bg-size: calc(100% + -200px), auto;
  --brand-video-thumb-bg-image: url(../resources/placeholder.jpg);
  --brand-video-thumb-effect-offset: 600px 1080px;
  --brand-video-thumb-effect-color: rgb(0, 45, 116);
  --brand-video-thumb-logo-image: url(../resources/logos/tsus.png);

  --shsu-banner-bg-width: 1600px;
  --shsu-banner-bg-height: 400px;
  --shsu-banner-bg-offset: center;
  --shsu-banner-bg-size: calc(100% + -200px), auto;
  --shsu-banner-bg-image: url(../resources/email-pattern.png);
  --shsu-banner-effect-offset: 0px 0px;
  --shsu-banner-effect-color: rgb(0, 45, 116);

  --tsus-banner-bg-width: 1600px;
  --tsus-banner-bg-height: 400px;
  --tsus-banner-bg-offset: center;
  --tsus-banner-bg-size: calc(100% + -200px), auto;
  --tsus-banner-bg-image: url(../resources/email-pattern.png);
  --tsus-banner-logo-image: url(../resources/logos/tsus.png);
  --tsus-banner-effect-offset: 0px 0px;
  --tsus-banner-effect-color: rgb(0, 45, 116);
}

body {
  margin: 0;
  color: #ffffff;
  font-size: 1rem;
  font-family: "Segoe UI", "Helvetica", "Arial", sans-serif;
  font-weight: 500;
  background: #202020;
  width: 100%;
}

a{
  color:#fe5000;
}

.loading{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#202020;
  transition:opacity 2s;
  z-index:1000000;
}

.loading.complete{
  opacity:0;
  pointer-events: none;
}

.loading .bar_wrapper{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  text-align:center;
  font-size:80%;
  color:#777;
  transition:opacity .15s;
  opacity: 1;
}

.loading.complete .bar_wrapper{
  opacity:0;
}

.bar_text{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 161px;
  height: 161px;
}

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  top:50%;
  left:50%;
  width: 100%;
  height: 100%;
  border: 3px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.8s cubic-bezier(0.5, 0, 0.15, 1) infinite;
  border-color:  transparent transparent #fff transparent ;
  transform: translate(-50%,-50%);
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.4s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.15s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.2725s;
}
.lds-ring div:nth-child(4) {
  animation:none;
  border-color:  #ffffff10 ;
}
@keyframes lds-ring {
  0% {
    transform: translate(-50%,-50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%,-50%) rotate(360deg);
  }
}

.input_section_title_wrapper{
  padding: 20px 40px;
  transition:padding .3s;
  background: #191919;
}

.input_section_title_wrapper.sel{
  padding: 20px 90px;
}

.input_section_title {
  width: fit-content;
  font-size: 160%;
  font-weight: 700;
  line-height:1em;
  user-select:none;
  cursor:pointer;
}

.input_section_title span {
  display: inline-block;
  overflow:hidden;
  max-width: 0;
  margin-right: 0.25em;
  opacity: 0;
  transition:max-width 1s, opacity 2s;
  vertical-align:bottom;
}

.input_section_title:hover span {
  max-width: 3em;
  opacity: 1;
}

.master_wrapper {
  position: absolute;
  width: 100%;
  min-height: calc(100% - 1.6em - 40px);
  background: #202020;
  min-width: 1080px;
  max-width: 1600px;
  white-space: nowrap;
  display:flex;
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.input_section_nav {
  position:relative;
  flex-shrink: 0;
  width: 210px;
  padding: 40px 30px 40px 0;
  margin-right: calc(40px + .6em);
  white-space: nowrap;
  transition: width .3s, margin .3s;
}

.input_section_nav_effect{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 26px;
  transform: translateX(100%);
  background: linear-gradient(90deg, transparent 7px, #1a1a1a 10px, #5f3535 11px, #492929 12px, transparent);
  animation: hue 10s infinite;
  overflow: hidden;
}

.input_section_nav_effect_inner {
  position: absolute;
  top: 0;
  right: 0;
  height: 5%;
  width: 16px;
  background: linear-gradient(180deg, #202020, transparent);
}

@-webkit-keyframes hue {
  0%  { -webkit-filter: hue-rotate(0deg)}
  100%  { -webkit-filter: hue-rotate(360deg)}
}

.input_section_nav_effect::before, .input_section_nav_effect::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 85%;
  width: 16px;
  background: linear-gradient(0deg, transparent, #202020 15%, #202020 85%, transparent);
  animation: bounce linear 15s infinite;
  transform: translateY(-100%);
  opacity: 1;
}

.input_section_nav_effect::after {
  animation-delay: 15s;
}

@-webkit-keyframes bounce {
  0%  { top: 0; transform: translateY(-100%); opacity:1;}
  12.5%  { opacity:.25;}
  25%  { opacity:1;}
  37.5%  { opacity:.25;}
  50%  { opacity:1;}
  62.5%  { opacity:.25;}
  75%  { opacity:1;}
  87.5%  { opacity:.25;}
  100%  { top: 100%; transform: translateY(100%); opacity:1;}
}

.input_section_nav_inner{
  width: 100%;
}

.input_section_nav.sel {
  width: 10px;
}

.input_section_nav .section_title {
  position: relative;
  display: block;
  width: calc(100% + 44px);
  margin: 0 0 20px 0;
  background: #fff;
  font-size: 120%;
  font-weight: 700;
  color: #202020;
  user-select: none;
  line-height: 1em;
  white-space: nowrap;
  border-radius: 0 3px 3px 0;
  box-sizing: border-box;
  overflow: hidden;
  transition: color 0.3s, padding 0.3s, width .3s;
  z-index:1;
}

.input_section_nav.sel .section_title {
  color: white;
  width: calc(100% + 46px);
}

.nav_expand{
  position: absolute;
  right: 0;
  top: 0;
  width: 60px;
  height: 100%;
  transition: width 0.3s;
  cursor: pointer;
}

.sel .nav_expand{
  padding-left: 30px;
  width: 30px;
}

.nav_expand::before, .nav_expand::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 17px;
  height: 17px;
  background: #000;
  border-radius: 3px;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform 1s, right 1s;
}

.nav_expand::after {
  content: "";
  background: #fff;
  border-radius: 0;
  transform: translate(calc(-50% + 4px), -50%) rotate(45deg);
}

.sel .nav_expand::before, .sel .nav_expand::after {
  right:1px;
}

.sel .nav_expand::after {
  transform: translate(calc(-50% - 4px), -50%) rotate(45deg);
}

.nav_home_expand {
  padding: 16px 16px 16px 40px;
  width: fit-content;
  cursor: pointer;
}

.input_section_nav_options{
  width: 100%;
  overflow: hidden;
  padding-left: 30px;
  box-sizing: border-box;
  margin-top: -15px;
}

.input_section_nav_heading{
  position: relative;
  width: fit-content;
  height: 43px;
  vertical-align: bottom;
  font-size: 1.15em;
  font-weight: 700;
  color: #fff;
  box-sizing: border-box;
  padding: 9px 30px 9px 0;
  margin: 15px 0 8px 12px;
  user-select: none;
  background: linear-gradient(90deg, #2f2f2f, transparent 0%);
  transition: color 0.3s, background 0.3s, opacity 0.3s;
  white-space: nowrap;
  overflow: hidden;
  border-bottom: 1px solid white;
  cursor:pointer;
}

.input_section_nav_heading::before, .input_section_nav_heading::after{
  content: "";
  position: absolute;
  top: calc(50% + 4px);
  right: 0;
  width: 13px;
  height: 13px;
  background: #fff;
  border-radius: 3px;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: top .5s;
}

.input_section_nav_heading::after{
  transform: translate(-50%, -50%) rotate(45deg);
  top: calc(50% + 8px);
  background: #202020;
  border-radius: 0;
}

.collapse.input_section_nav_heading::before, .collapse.input_section_nav_heading::after{
  top: 50%;
}

.collapse.input_section_nav_heading::after{
  top: calc(50% - 4px);
}

.input_section_nav_group{
  overflow:hidden;
  max-height:400px;
  transition:max-height .3s, opacity .5s;
  position: relative;
  opacity:1;

}

.collapse + .input_section_nav_group{
  max-height:0;
  opacity:0;
}

.input_section_nav_option {
  width: fit-content;
  height: 39px;
  vertical-align: bottom;
  font-size: 90%;
  font-weight: 700;
  color: #aaa;
  box-sizing: border-box;
  padding: 9px 12px 9px 12px;
  user-select: none;
  cursor: pointer;
  background: linear-gradient(90deg, #2f2f2f, transparent 0%);
  transition: color 0.3s, background 0.3s, opacity 0.3s;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.sel .input_section_nav_option {
  opacity: 0;
}

.input_section_nav_option:hover {
  color: #fff;
}

.input_section_nav_option::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  transition: width 0.3s, opacity.3s;
  opacity: 0;
}

.input_section_nav_option.sel {
  color: #fff;
  background: linear-gradient(90deg, #2f2f2f, transparent);
  border-radius: 3px;
}

.input_section_nav_option.sel::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #666666;
  opacity: 1;
}

.log_nav_option {
  display: inline-block;
  margin: 20px 0 8px 10px;
  background: #202020;
  color: #ffffff;
  font-weight: bold;
  font-size: 80%;
  padding: 6px 18px 7px 18px;
  border-radius: 50px;
  box-shadow: inset 0 0 0px 1px #646464;
  cursor: pointer;
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.input_outer_wrapper {
  margin-top:20px;
  flex-grow: 1;
  background: #202020;
  white-space: normal;
  transition: width 0.3s;
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.preview_outer_wrapper {
  position: relative;
  max-width: 920px;
  background: #fff;
  vertical-align: top;
  box-sizing: border-box;
  padding: 70px 40px 40px 40px;
  border-radius: 3px;
  margin-bottom: 60px;
  margin-top: -30px;
}

.preview_outer_wrapper.hidden {
  display: none;
}

.preview_outer_wrapper::after {
  content: "Preview";
  position: absolute;
  left: 0;
  top: 0;
  color: #202020;
  padding: 20px 60px;
  font-family: "Segoe UI", "Helvetica", "Arial", sans-serif;
  font-weight: 700;
  font-size: 120%;
}

.preview {
  max-width: 800px;
  margin-left: 20px;
  display: none;
}

.preview.display {
  display: block;
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.input_section {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 60px 60px 0;
  display: none;
}

.input_section.display {
  display: block;
}

.section_title_wrapper{
  margin-bottom:40px;
}

.input_section .section_title {
  font-family: var(--title-font);
  font-size: 160%;
  font-weight: 700;
  vertical-align: middle;
  line-height: 1em;
}

.input_section .section_subtitle {
  position:relative;
  width:fit-content;
  font-size: 120%;
  font-weight: 700;
  padding: 3px 30px 3px 0;
  margin-bottom:.75em;
  user-select:none;
  cursor:pointer;
}

.input_section .section_subtitle.collapse {
  width:fit-content;
  font-size: 120%;
  font-weight: 700;
  padding-bottom:2px;
  margin-bottom:.75em;
}

.input_section .section_subtitle::before, .input_section .section_subtitle::after{
  content: "";
  position: absolute;
  top: calc(50% + 4px);
  right: 0;
  width: 13px;
  height: 13px;
  background: #fff;
  border-radius: 3px;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: top .5s;
}

.input_section .section_subtitle::after{
  transform: translate(-50%, -50%) rotate(45deg);
  top: calc(50% + 8px);
  background: #202020;
  border-radius: 0;
}

.input_section .section_subtitle.collapse::before{
  top: calc(50% - 2px);
}

.input_section .section_subtitle.collapse::after{
  top: calc(50% - 6px);
}

.input_section .subsection_wrapper{
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  width: 100%;
  align-items: center;
  transition:max-height .3s, opacity .5s;
  position: relative;
  opacity:1;
  padding-bottom: 1em;
}


.input_section .subsection_wrapper::after{

}

.section_subtitle + .subsection_wrapper{
  max-height:500px;
}

.input_section .section_subtitle.collapse + .subsection_wrapper{
  overflow-Y:clip;
  max-height:0;
  opacity:0;
}

.input_section .input_wrapper{
  width: 100%;
}

.section_title_link_btn {
  display: inline-block;
  margin-left: 1.3em;
  width: 1.3em;
  height: 1.3em;
  border-radius: 3px;
  border: 1px solid white;
  vertical-align: middle;
  background: url(../resources/link.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
  cursor: pointer;
  transition: transform .5s, background .3s;
}

.section_title_link_btn:hover {
  background-color:rgb(255 255 255 / 10%);
  transform:scale(1.1);
}

.section_title_link_btn.pulse {
  animation: pulse 0.5s 1;
}

.input_section .tool_desc {
  display:none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 60%;
  max-width: 1000px;
  transform: translate(-50%, -50%);
  color: #ffffff;
  line-height: 150%;
  z-index: 10000000;
}

.input_section .tool_desc::after {
  content:'';
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  aspect-ratio: 1/1;
  transform: translate(200%, -200%);
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 169.05 169.05'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff%3B %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='m93.58 84.53L169.05 9.05l-9.05-9.05-75.48 75.47L9.05 0 0 9.05l75.47 75.47L0 160l9.05 9.05 75.48-75.48 75.48 75.48 9.05-9.05-75.47-75.48Z'/%3E%3C/svg%3E");
  background-size: cover;
}

.input_section .tool_desc::before {
  content:'';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120vw;
  height: 120vh;
  transform: translate(-50%, -50%);
  background: rgb(32 32 32 / 97%);
  backdrop-filter: blur(20px);
}

.input_section .tool_desc_inner{
  position:relative;
  padding:0 60px;
  max-height:70vh;
  overflow-y:scroll;
  z-index: 1;
  text-shadow: 0 0 10px black, 0 0 5px black;
}

.tool_desc_title{
  font-size: 160%;
  font-weight: 700;
  line-height: 1em;
  margin-bottom:20px;
}

.input_section p:first-of-type {
  margin-top: 0;
}
.input_section p:last-of-type {
  margin-bottom: 0;
}

.input_section .tool_desc span {
  font-size: 80%;
  color: #888;
}

.input_section .tool_desc code{    
  padding: 0.125em 0.25em;
  background: #020202;
  border-radius: 3px;
  margin: 0 0.25em;
}

.tool_desc_marginfix {
  height: 40px;
}

.tool_desc_checkbox {
  display: none;
  opacity: 0;
}

.tool_desc_checklabel {
  display: inline-block;
  vertical-align: middle;
  height: 22px;
  box-sizing: border-box;
  margin-left: 10px;
  text-align: center;
  padding: 5px 12px;
  border-radius: 15px;
  line-height: 1em;
  font-size: 70%;
  cursor: pointer;
  background: #626262;
  color: white;
}

.tool_desc_checklabel::before {
  content: "Help";
}

.tool_desc_checkbox:checked + .tool_desc {
  display: block;
}

.tool_desc_checklabel_inner {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
}

.line_wrapper {
  position: relative;
  display: flex;
  gap: 6px 1em;
  width: 100%;
}

.bottom_line_wrapper {
  position: relative;
  width: 100%;
  display: flex;
  gap: 1em;
}

.label {
  flex-grow: 0;
  flex-shrink: 1;
  width: 100%;
  font-size: .7em;
  line-height:1em;
  font-weight: 400;
  padding-bottom: 6px;
  white-space: nowrap;
}

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

.label span {
  color: #888;
  font-size: 80%;
  font-weight: 700;
}

.vertical_divider {
  width: 2px;
  height: 100px;
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  margin-top: auto;
  background: #333;
  border-radius: 1px;
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.add_line_btn {
  position: absolute;
  top: 50%;
  right: 0;
  width: 19px;
  height: 19px;
  vertical-align: middle;
  cursor: pointer;
  border: 10px solid rgb(0 0 0 / 0%);
  border-radius: 50%;
  transform: translateY(-50%);
}

.add_line_btn::before, .add_line_btn::after {
  content: "";
  position: absolute;
  width: 100%;
  border-bottom: 3px solid #ffffff;
  border-radius:1px;
  top: 50%;
  transform: translateY(-50%);
}

.add_line_btn::after {
  transform: translateY(-50%) rotate(90deg);
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.input_line_wrapper {
  display: flex;
  gap: 1em;
  align-items: center;
  width: 100%;
  padding: 10px 0 14px 40px;
  box-sizing: border-box;
  border-bottom: 1px solid #333;
  transition: transform 0.3s, opacity 0.15s;
  position: relative;
}

.input_line_wrapper.over {
  transform: scale(1.025, 1.025);
}

.input_line_wrapper:first-of-type {
  padding-top: 0;
}

.input_line_wrapper:last-of-type {
  border-bottom: none;
}

.input_line_wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -10px;
  width: 20px;
  height: 20px;
  background: url(../resources/reorder.svg);
  background-position: center;
  background-repeat: no-repeat;
  border: 10px solid transparent;
  border-radius: 50%;
  transform: translateY(-50%);
  opacity: 0.65;
  cursor: pointer;
  transition: opacity 0.15s;
  transition-delay: 0.15s;
}

.input_line_wrapper.over::after {
  opacity: 1;
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/



.input_line_wrapper .type,
.input_line_wrapper .tab {
  min-width: 85px;
  flex-shrink: 1;
  flex-grow: 0;
}

.input_line_wrapper .type {
  min-width: 65px;
}

.input_line_wrapper .text {
  width: calc(80% - 40px);
}

.key_pt_list_input_title input,
.highlight_attr_input input.text,
.header_input_line input,
.input_line_wrapper .text input,
.input_line_wrapper .title input,
.input_line_wrapper .url input,
.input_line_wrapper .tab select,
.input_line_wrapper .type select {
  display: block;
  width: 100%;
  height: 32px;
  font-family: var(--body-font);
  padding: 1px 4px;
  border: 2px solid #ffffff;
  border-radius: 3px;
  box-sizing: border-box;
  cursor: pointer;
}

textarea {
  display: block;
  width: 100%;
  border: none;
  border-radius: 3px;
  font-family: "Segoe UI";
  resize: vertical;
  min-height: 100px;
  padding: 4px 6px;
  box-sizing: border-box;
  font-size: 0.85em;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.input_line_wrapper .close {
  position: relative;
  width: 21px;
  aspect-ratio: 1;
  cursor: pointer;
  border: 10px solid rgb(32 32 32);
  border-radius: 13px;
  background: #e74545;
  transition: transform .3s;
  margin: -10px;
  align-self: end;
}

.input_line_wrapper .close:hover {
  transform: scale(1.1) rotate(7deg);
}

.input_line_wrapper .close::after, .input_line_wrapper .close::before  {
  content: "";
  position: absolute;
  width: 50%;
  height: 2px;
  background:white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.input_line_wrapper .close::before {
  transform: translate(-50%,-50%) rotate(-45deg);
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

input[type="checkbox"] {
  display: none;
}

.check_label {
  display: block;
  position: relative;
  background: #fff;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  border: 8px solid #fff;
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px #232323;
  transition: all 0.6s;
  cursor: pointer;
  transition:box-shadow .3s;
}

.check_label:hover {
  box-shadow: inset 0 0 0 2px rgb(0 0 0 / 10%);
}

input[type="checkbox"]:checked + .check_label {
  border: 0 solid rgba(255, 255, 255, 0);
  box-shadow: inset 0 0 0 0 #232323;
}

input[type="checkbox"]:not(checked) + .check_label::after {
  content: "";
  position: absolute;
  height: 17px;
  width: 6px;
  border-right: 2px solid #222;
  border-bottom: 2px solid #222;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) rotate(45deg);
  opacity:0;
  transition:opacity .3s;
}

input[type="checkbox"]:not(checked):hover + .check_label::after {
  opacity:.4;
}

input[type="checkbox"]:checked + .check_label::after {
  content: "";
  position: absolute;
  height: 17px;
  width: 6px;
  border-right: 2px solid #222;
  border-bottom: 2px solid #222;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) rotate(45deg);
  opacity:1;
}

input[type="checkbox"]:checked:hover + .check_label::after {
  opacity:1;
}

input[type="checkbox"]:disabled + .check_label {
  background: #6f6f6f;
  border: 8px solid #6f6f6f;
  box-shadow: inset 0 0 0 2px #5e5e5e;
  cursor: not-allowed;
}

/*///////////////////////////////////////////////////*/

.radio_label {
  display: block;
  position: relative;
  background: #fff;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  border: 8px solid #fff;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #232323;
  transition: all 0.6s;
  cursor: pointer;
  transition: box-shadow .3s;
}

.radio_label:hover {
  box-shadow: inset 0 0 0 0 transparent;
}

input[type="checkbox"]:checked + .radio_label {
  border: 0 solid rgba(255, 255, 255, 0);
  box-shadow: inset 0 0 0 0 #232323;
}

input[type="checkbox"] + .radio_label::after {
  content: "";
  position: absolute;
  width: 0;
  aspect-ratio: 1/1;
  background:#232323;
  border-radius:50%;
  top: 50%;
  left: 50%;
  opacity:0;
  transform: translate(-50%, -50%) rotate(45deg);
  transition:width .3s, opacity .3s;
}

input[type="checkbox"]:not(checked):hover + .radio_label::after {
  width:14px;
  opacity:.4;
}

input[type="checkbox"]:checked + .radio_label::after {
  width:14px;
  opacity:1;
}

input[type="checkbox"]:checked:hover + .radio_label::after {
  opacity:1;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.clipboard_button {
  position: relative;
  padding: 16px 25px 16px 58px;
  width: fit-content;
  background: #45aae8;
  color: #fff;
  border-radius: 3px;
  font-weight: 700;
  font-size: 80%;
  user-select: none;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.25s, color 0.15s, transform .3s;
  line-height: 0;
  overflow: hidden;
}

.clipboard_button::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 40px;
  left: 0;
  top: 0;
  box-shadow: 0 0 7px 3px rgb(0 0 0 / 30%);
  border-radius:3px;
}

.clipboard_button::after {
  content: '';
  position: absolute;
  background-image: url(../resources/code_copy.svg);
  background-size: 45%;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 40px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .5s;
}

.clipboard_button:hover::after {
  transform: translateY(-50%) rotate(7deg) scale(1.05);
}

.clipboard_button:hover {
  background: #88c1e3;
  transform:scale(1.05);
}

.clipboard_button:active {
  background: #555;
  box-shadow: inset 0 0 0 2px white;
  color: #eee;
}

.clipboard_button.disabled {
  background: #444444;
  color: #777;
  cursor:not-allowed;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.url.clipboard_button {
  background: #2a52b6;
}

.url.clipboard_button::after {
  background-image: url(../resources/snap_url.svg);
}

.url.clipboard_button:hover {
  background: #829ad6;
}

.url.clipboard_button:active {
  background: #555;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.clear.clipboard_button {
  background: #e84545;
}

.clear.clipboard_button::after {
  background-image: url(../resources/reset.svg);
  background-size: 50%;
}

.clear.clipboard_button:hover::after {
  transform: translateY(-50%) rotate(-15deg) scale(1.05);
}

.clear.clipboard_button:hover {
  background: #ff7f7f;
}

.clear.clipboard_button:active {
  background: #555;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.import.clipboard_button {
}

.import.clipboard_button::after {
  background-image: url(../resources/import.svg);
}

.import.clipboard_button.disabled::before {
  opacity:.3;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.input_color_wrapper {
  flex-shrink: 1;
  flex-grow: 0;
}

.color_selector_button, .color_selector_button_gray {
  position: relative;
  display: block;
  width: 96px;
  height: 32px;
  border: none;
  box-shadow: inset 0 0 5px 0 rgb(255 255 255 / 15%);
  border-radius: 3px;
  box-sizing: border-box;
  background-color: rgb(249, 249, 249);
  cursor: pointer;
  transition: box-shadow 0.3s;
  overflow: hidden;
}

.color_selector_button::before, .color_selector_button_gray::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 100%;
  background-color: #cccccc;
  border-radius: 3px;
  box-shadow: 0 0 7px 3px rgb(0 0 0 / 50%);
  transition: background .3s;
}

.color_selector_button.ol div{
  position: absolute;
  top: 7px;
  left:unset;
  right: 6px;
  width: calc(100% - 46px);
  height: calc(100% - 12px);
  border-radius: 3px;
  box-sizing: border-box;
  border: 2px dashed grey;
  pointer-events: none;
}

.color_selector_button:hover::before, .color_selector_button_gray:hover::before {
  background-color: #ffffff;
}

.color_selector_button::after, .color_selector_button_gray::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 34px;
  padding-top: 32px;
  background-image: url(../resources/format-color-fill-dark.svg);
  background-size: 75% auto;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateY(-50%);
  transition: background 0.3s;
  transition: transform .5s;
}

.color_selector_button:hover::after, .color_selector_button_gray:hover::after {
  transform:translateY(-50%) rotate(7deg) scale(1.1);
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.color_selector_wrapper{
  position: absolute;
  width: 200px;
  padding: 30px 4px 4px 30px;
  font-size: 80%;
  border: 1px solid white;
  background: #202020;
  border-radius: 5px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8), inset 0 0 15px 0 black;
  z-index: 10;
  display: none;
  overflow: hidden;
  cursor: auto;
  transform: translateY(-32px);
}

.color_selector_wrapper.gray{
  width: 232px;
}

.color_selector_wrapper.show{
  display: block;
}

.color_selector_close {
  position: absolute;
  top: 5px;
  left: 5px;
  height: 21px;
  aspect-ratio: 1;
  border-left: 1px solid #ffffff12;
  border-top: 1px solid #ffffff12;
  border-radius: 3px;
  cursor: pointer;
  background: #e74545;
}

.color_selector_close::before,
.color_selector_close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 2px;
  background: white;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: width 0.3s, transform 0.3s;
}

.color_selector_close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.color_selector_close:hover::before,
.color_selector_close:hover::after {
  width: 70%;
  transform: translate(-50%, -50%) rotate(135deg);
}

.color_selector_close:hover::after {
  width: 70%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.color_selector_label_col {
  position: absolute;
  top: 6px;
  left: 30px;
  user-select: none;
}

.color_selector_label_col .color_selector_label {
  display: inline-block;
  width: 32px;
  margin-right: 8px;
  text-align: center;
}

.color_selector_label_col .color_selector_label:nth-of-type(1)::after{
  content:'A';
}

.color_selector_label_col .color_selector_label:nth-of-type(2)::after{
  content:'B';
}

.color_selector_label_col .color_selector_label:nth-of-type(3)::after{
  content:'C';
}

.color_selector_label_col .color_selector_label:nth-of-type(4)::after{
  content:'D';
}

.color_selector_label_col .color_selector_label:nth-of-type(5)::after{
  content:'E';
}

.color_selector_label_col .color_selector_label:nth-of-type(6)::after{
  content:'F';
}

.color_selector_label_col .color_selector_label:nth-of-type(7)::after{
  content:'G';
}

.color_selector_label_col .color_selector_label:nth-of-type(8)::after{
  content:'H';
}

.color_selector_label_col .color_selector_label:nth-of-type(9)::after{
  content:'I';
}

.color_selector_label_col .color_selector_label:nth-of-type(10)::after{
  content:'J';
}


.gray .color_selector_label_col .color_selector_label:nth-of-type(1)::after{
  content:'1';
}

.gray .color_selector_label_col .color_selector_label:nth-of-type(2)::after{
  content:'2';
}

.gray .color_selector_label_col .color_selector_label:nth-of-type(3)::after{
  content:'3';
}

.gray .color_selector_label_col .color_selector_label:nth-of-type(4)::after{
  content:'4';
}

.gray .color_selector_label_col .color_selector_label:nth-of-type(5)::after{
  content:'5';
}

.gray .color_selector_row + .color_selector_row {
  display:none;
}
/*//////////////////////////////////////////////////////////////////////////////*/





.color_selector_label_row {
  position: absolute;
  top: 37px;
  left: 12px;
  user-select: none;
}

.color_selector_label_row .color_selector_label {
  height: 40px;
}

.color_selector_label_row .color_selector_label:nth-of-type(1)::after{
  content:'1';
}

.color_selector_label_row .color_selector_label:nth-of-type(2)::after{
  content:'2';
}

.color_selector_label_row .color_selector_label:nth-of-type(3)::after{
  content:'3';
}

.color_selector_label_row .color_selector_label:nth-of-type(4)::after{
  content:'4';
}

.color_selector_label_row .color_selector_label:nth-of-type(5)::after{
  content:'5';
}

.color_selector_label_row .color_selector_label:nth-of-type(6)::after{
  content:'6';
}

.color_selector_label_row .color_selector_label:nth-of-type(7)::after{
  content:'7';
}

.color_selector_label_row .color_selector_label:nth-of-type(8)::after{
  content:'8';
}

.color_selector_label_row .color_selector_label:nth-of-type(9)::after{
  content:'9';
}

.color_selector_label_row .color_selector_label:nth-of-type(10)::after{
  content:'10';
}


.gray .color_selector_label_row .color_selector_label:nth-of-type(1)::after{
  content:'Gr';
  margin-left: -2px;
}

.gray .color_selector_label_row .color_selector_label:nth-of-type(1) ~ .color_selector_label{
  display:none;
}



.color_selector_option {
  position: relative;
  width: 32px;
  height: 32px;
  display: inline-block;
  margin: 0 8px 8px 0;
  transition: all 0.3s;
  vertical-align: middle;
  box-shadow: 1px 1px 4px 0 rgb(0 0 0 / 20%),
    inset 0 0 0 1px rgb(255 255 255 / 25%);
  user-select: none;
  cursor: pointer;
  overflow: hidden;
  border: none;
  border-radius: 3px;
}

.color_selector_option:hover {
  transform:scale(1.1);
  box-shadow: 1px 1px 4px 0 rgb(0 0 0 / 50%),
  inset 0 0 0 1px rgb(255 255 255 / 25%);
}

.color_selector_option.sel {
  box-shadow: 0 0 3px 1px rgb(45 160 230), inset 0 0 0 1px white,
    inset 0 0 3px 0 rgb(0 0 0 / 90%), inset 0 0 6px 0 rgb(0 0 0 / 70%);
}

.color_selector_option.sel::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  border: 8px solid white;
  border-left: 8px solid transparent;
  border-top: 8px solid transparent;
}

/*////////////////////////////////////////////////////////////////////////*/

.r1 button.color_selector_option:nth-of-type(1) {
  background-color: #d06023;
}

.r1 button.color_selector_option:nth-of-type(2) {
  background-color: #09205c;
}

.r1 button.color_selector_option:nth-of-type(3) {
  background-color: #fbdb03;
}

.r1 button.color_selector_option:nth-of-type(4) {
  background-color: #f9b05c;
}

.r1 button.color_selector_option:nth-of-type(5) {
  background-color: #f68e1e;
}

/*////////////////////////////////////////////////////////////////////////*/

.gray .r1 button.color_selector_option:nth-of-type(1) {
  background-color: #222222;
}

.gray .r1 button.color_selector_option:nth-of-type(2) {
  background-color: #555555;
}

.gray .r1 button.color_selector_option:nth-of-type(3) {
  background-color: #999999;
}

.gray .r1 button.color_selector_option:nth-of-type(4) {
  background-color: #cccccc;
}

.gray .r1 button.color_selector_option:nth-of-type(5) {
  background-color: #ffffff;
}

/*////////////////////////////////////////////////////////////////////////*/

.r2 button.color_selector_option:nth-of-type(1) {
  background-color: #6f0000;
}

.r2 button.color_selector_option:nth-of-type(2) {
  background-color: #f55254;
}

.r2 button.color_selector_option:nth-of-type(3) {
  background-color: #de77b1;
}

.r2 button.color_selector_option:nth-of-type(4) {
  background-color: #b0519f;
}

.r2 button.color_selector_option:nth-of-type(5) {
  background-color: #633963;
}

.r3 button.color_selector_option:nth-of-type(1) {
  background-color: #002d74;
}

/*////////////////////////////////////////////////////////////////////////*/

.r3 button.color_selector_option:nth-of-type(2) {
  background-color: #4c8dcb;
}

.r3 button.color_selector_option:nth-of-type(3) {
  background-color: #97c0e6;
}

.r3 button.color_selector_option:nth-of-type(4) {
  background-color: #42c6e8;
}

.r3 button.color_selector_option:nth-of-type(5) {
  background-color: #00ffff;
}

/*////////////////////////////////////////////////////////////////////////*/

.r4 button.color_selector_option:nth-of-type(1) {
  background-color: #0e4023;
}

.r4 button.color_selector_option:nth-of-type(2) {
  background-color: #4a5d22;
}

.r4 button.color_selector_option:nth-of-type(3) {
  background-color: #aaca19;
}

.r4 button.color_selector_option:nth-of-type(4) {
  background-color: #8add66;
}

.r4 button.color_selector_option:nth-of-type(5) {
  background-color: #2c9947;
}

/*////////////////////////////////////////////////////////////////////////*/

.r5 button.color_selector_option:nth-of-type(1) {
  background-color: #b49e94;
}

.r5 button.color_selector_option:nth-of-type(2) {
  background-color: #98999b;
}

.r5 button.color_selector_option:nth-of-type(3) {
  background-color: #17222d;
}

.r5 button.color_selector_option:nth-of-type(4) {
  display: none;
}

.ol .r5 button.color_selector_option:nth-of-type(4) {
  background-color: #ffffff;
  display: inline-block;
}

.r5 button.color_selector_option:nth-of-type(4)::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  display: block;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 3px;
  box-sizing: border-box;
  border: 1px dashed grey;
}

.r5 button.color_selector_option:nth-of-type(5) {
  display: none;
}

/*////////////////////////////////////////////////////////////////////////*/


.r6 button.color_selector_option:nth-of-type(1) {
  background-color: #F56423;
}

.r6 button.color_selector_option:nth-of-type(2) {
  background-color: #004853;
}

.r6 button.color_selector_option:nth-of-type(3) {
  background-color: #465D7B;
}

.r6 button.color_selector_option:nth-of-type(4) {
  background-color: #A3D237;
}

.r6 button.color_selector_option:nth-of-type(5) {
  background-color: #BBDDF6;
}

/*////////////////////////////////////////////////////////////////////////*/


.r7 button.color_selector_option:nth-of-type(1) {
  background-color: #BAA596;
}

.r7 button.color_selector_option:nth-of-type(2) {
  background-color: #DDCDAE;
}

.r7 button.color_selector_option:nth-of-type(3) {
  display: none;
}

.r7 button.color_selector_option:nth-of-type(4) {
  display: none;
}

.r7 button.color_selector_option:nth-of-type(5) {
  display: none;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.pix_effect_slider {
  display: block;
  padding-top: 0;
}

input[type="range"].pix_effect_slider {
  width: 100%;
  background-color: transparent;
  -webkit-appearance: none;
  margin-top: 6px;
}

input[type="range"].pix_effect_slider {
  -webkit-appearance: none;
  width: calc(100% - 3px);
  height: 16px;
  background: #888;
  outline: none;
  -webkit-transition: 0.3s;
  transition: background 0.3s;
  border-radius: 20px;
  box-shadow: inset 0 0 0 2px #888;
}

input[type="range"].pix_effect_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  background: #202020;
  cursor: pointer;
  border-radius: 20px;
  border: 5px solid #cccccc;
  box-shadow: 0 0 5px 0 rgb(0 0 0 / 30%);
  transition: border 0.3s;
}

input[type="range"].pix_effect_slider:hover::-webkit-slider-thumb {
  border: 5px solid #fff;
}

input[type="range"].pix_effect_slider::-moz-range-thumb {
  width: 25px;
  height: 20px;
  background: #202020;
  border-radius: 7px;
  border: 5px solid #ccc;
  cursor: pointer;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.add_bullet_input {
  position: absolute;
  top: 50%;
  right: 0;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  cursor: pointer;
  border: 10px solid rgb(0 0 0 / 0%);
  border-radius: 50%;
  transform: translateY(-50%);
}

.add_bullet_input::after {
  content: "";
  position: absolute;
  width: 100%;
  border-bottom: 4px solid #ffffff;
  top: 50%;
  transform: translateY(-50%);
}

.add_bullet_input::before {
  content: "";
  position: absolute;
  width: 100%;
  border-bottom: 4px solid #ffffff;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.preview_wrapper:hover .upload_form_ddtext {
  opacity: .8;
}

.upload_form_ddtext.demo {
  opacity: 1;
  background: rgb(0 0 0 / 85%);
}

.upload_form_ddtext {
  color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s, transform 0.3s;
  text-align: center;
  font-size: 1.5em;
  font-weight: 500;
  line-height: 1.5em;
  background: rgb(0 0 0 / 85%);
  padding: 100%;
  white-space: nowrap;
}

.upload_input {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload_form {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 1000;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.preview_wrapper {
  position: relative;
  overflow: hidden;
  outline: 4px solid #333333;
  border-radius: 3px;
  margin:4px;

}

.effect_zoom {
  transform: scale(0.6);
  margin: -80px -240px;
}

.effect_wrapper {
  position: relative;
  overflow: hidden;
  --bg-brightness:brightness(1);
}

.background_group {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
}

.main_image {
  position: absolute;
  top: -100px;
  left: -100px;
  padding: 100px;
  filter: var(--bg-brightness);
}

.cl1 .main_image,
.cl2 .main_image {
  /*filter: unset;*/
}

.effect_group_0 {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../resources/masks/mask_blackout.png);
  background-size: 200%;
  image-rendering: pixelated;
  mix-blend-mode: multiply;
}

.effect_group_1,
.effect_group_2 {
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: screen;
}

.cl1 .effect_group_1 .effect_color,
.cl1 .effect_group_2 .effect_color,
.cl2 .effect_group_1 .effect_color,
.cl2 .effect_group_2 .effect_color {
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: color;
  opacity: 0.3;
}

.cl2 .effect_group_1 .effect_color,
.cl2 .effect_group_2 .effect_color {
  opacity: 0.75;
}

.effect_group_1 .blur_img {
  position: absolute;
  top: -100px;
  left: -100px;
  background-color: black;
  background-repeat: repeat;
  padding: 100px;
  filter: blur(20px) var(--bg-brightness);
}

.effect_group_2 .blur_img {
  position: absolute;
  top: -100px;
  left: -100px;
  position: absolute;
  background-color: black;
  background-repeat: repeat;
  padding: 100px;
  filter: var(--bg-brightness);
}

.effect_group_1 .effect_img_1,
.effect_group_2 .effect_img_1 {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../resources/masks/mask.png);
  background-size: 200%;
  image-rendering: pixelated;
  mix-blend-mode: screen;
  opacity: 0.5;
}

.cl1 .effect_group_1 .effect_img_1,
.cl1 .effect_group_2 .effect_img_1 {
  opacity: 0.2;
}

.cl2 .effect_group_1 .effect_img_1,
.cl2 .effect_group_2 .effect_img_1 {
  opacity: 0.3;
}

.effect_group_1 .effect_img_2,
.effect_group_2 .effect_img_2 {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../resources/masks/mask_blackout_sparse.png);
  background-size: 200%;
  image-rendering: pixelated;
  mix-blend-mode: multiply;
}

.effect_group_2 .effect_img_2 {
  background-image: url(../resources/masks/mask_blackout_sparse_diff.png);
}

.color_img_0 {
  position: absolute;
  top: 0px;
  left: 0px;
  background: #000000;
  opacity: 0;
}

.color_img_1 {
  position: absolute;
  top: 0px;
  left: 0px;
  background: #000000;
  opacity: 0.1;
}

.cl1 .color_img_1 {
  opacity: 0.1;
}

.cl2 .color_img_1 {
  opacity: 0.1;
}

.color_img_2 {
  position: absolute;
  top: 0px;
  left: 0px;
  mix-blend-mode: color;
}

.cl1 .color_img_2 {
  opacity: 0.15;
}

.cl2 .color_img_2 {
  opacity: 0.5;
}

.upload_img_ico {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  margin: 20px;
  background: hsl(0deg 0% 100% / 60%);
  border-radius: 5px;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);
}

.upload_img_ico::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%;
  height: 75%;
  background: url(../resources/add-photo-alternate.svg);
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 5px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 8px white) drop-shadow(0 0 3px white);
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.image_picker{
  position:relative;
  border-radius: 3px;
  background: #fff;
  cursor:pointer;
  overflow:hidden;
}

.image_picker_preview {
    width: 100px;
    height: 100px;
    background: #ccc;
    background-size: cover;
    background-position:center;
}

.image_picker_btn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  background: rgb(255 255 255 / 60%);
  border-radius: 5px;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);
  transform: translate(-50%, -50%);
  transition:background .3s;
}

.image_picker:hover .image_picker_btn {
  background: rgb(255 255 255 / 100%);
}

.image_picker_btn::after {
  content:'';
  position: absolute;
  top: 50%;
  left: 50%;
  width:30px;
  height:30px;
  background:url(../resources/img_search_dark.svg);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 8px white) drop-shadow(0 0 3px white);
  transition:transform .3s;
}

.image_picker:hover .image_picker_btn::after {
  transform: translate(-50%, -50%) scale(1.05) rotate(5deg);
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.controls_wrapper {
  margin-top: 20px;
  display:flex;
  gap: 1em;
}


.ctrl_box_wrapper{
  display: flex;
  flex-wrap: wrap;
  flex-grow: 0;
  flex-shrink: 0;
  gap: 0 10px;
}


.ctrl_box {
  width: 100px;
  aspect-ratio:1;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  display: inline-block;
  vertical-align: bottom;
}

.ctrl_tpl,
.ctrl_tpr,
.ctrl_btl,
.ctrl_btr {
  width: 45%;
  top: 0;
  height: 0;
  padding-top: 45%;
  position: absolute;
  transform: translate(-45%, -45%) rotate(45deg);
  cursor: pointer;
  background: #888;
  border-radius: 4px;
  transition: background 0.3s;
}

.ctrl_tpl:hover,
.ctrl_tpr:hover,
.ctrl_btl:hover,
.ctrl_btr:hover {
  background: #fff;
}

.ctrl_tpr {
  right: 0;
  transform: translate(45%, -45%) rotate(45deg);
}

.ctrl_btl {
  top: unset;
  bottom: 0;
  transform: translate(-45%, 45%) rotate(45deg);
}

.ctrl_btr {
  top: unset;
  right: 0;
  bottom: 0;
  transform: translate(45%, 45%) rotate(45deg);
}

.ctrl_nu,
.ctrl_nd,
.ctrl_nl,
.ctrl_nr {
  width: 34%;
  aspect-ratio: 1;
  position: absolute;
  left: 50%;
  top: 23%;
  transform: translate(-50%, -50%) rotate(-45deg);
  cursor: pointer;
  background: #ccc;
  border-radius: 5px 5px 5px 30px;
  transition: background 0.3s;
}

.ctrl_nu:hover,
.ctrl_nd:hover,
.ctrl_nl:hover,
.ctrl_nr:hover {
  background: #fff;
}

.ctrl_nu::after,
.ctrl_nd::after,
.ctrl_nl::after,
.ctrl_nr::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  aspect-ratio: 1;
  text-align: center;
  transform: translate(-50%, -50%);
  border-right: 4px solid rgb(32 32 32);
  border-top: 4px solid rgb(32 32 32);
  border-radius: 3px;
}

.ctrl_nd {
  left: 50%;
  top: 77%;
  transform: translate(-50%, -50%) rotate(135deg);
}

.ctrl_nl {
  left: 23%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(225deg);
}

.ctrl_nr {
  left: 77%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}


.ctrl_rst {
  width: 20%;
  aspect-ratio: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  background: #888;
  border-radius: 4px;
  transition: background 0.3s;
}

.ctrl_rst:hover {
  background: #fff;
}

.ctrl_rst::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40%;
  padding-top: 40%;
  background: #202020;
  transform: translate(-50%, -50%);
  border-radius: 2px;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.lvl_wrapper {
  width: 20px;
  height: 100px;
  position: relative;
  display: inline-flex;
  gap:8px;
  flex-direction: column;
  vertical-align: bottom;
}

.lvl_pls,
.lvl_rst,
.lvl_mns {
  width: 100%;
  height: 28px;
  background: #ccc;
  cursor: pointer;
  position: relative;
}

.lvl_pls:hover,
.lvl_rst:hover,
.lvl_mns:hover {
  background: #fff;
  transition: background 0.3s;
}

.lvl_rst {
  border-radius: 10px;
  background: #888;
}

.brightness .lvl_rst:after {
  width: 18px;
  height: 18px;
  background: url(../resources/br.svg);
  background-repeat: none;
}

.lvl_pls {
  border-radius: 3px 3px 0 0;
}

.lvl_mns {
  border-radius: 0 0 3px 3px;
}

.lvl_pls:after,
.lvl_mns:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%);
  background: #202020;
  border-radius: 1px;
}

.lvl_pls:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 12px;
  transform: translate(-50%, -50%);
  background: #202020;
  border-radius: 1px;
}

.lvl_rst:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #202020;
  transform: translate(-50%, -50%);
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Begin Home */


.home_content_wrapper{
  max-width: 800px;
  line-height:1.5em;
  margin-bottom:60px;
}

.home_section_title{
  font-size: 160%;
  font-weight: 700;
  vertical-align: middle;
  line-height: 1em;
  margin-bottom:20px;
}

.suggestion_grid_wrapper {
  margin-top:20px;
  width:920px;
  display: grid;
  gap: 1.25em;
  grid-template-columns: repeat(3, 1fr);
}

.suggestion_grid_option {
  aspect-ratio: 1.5;
  background: #e0e1e4;
  color: #232323;
  border-radius: 5px;
  cursor:pointer;
  transition:transform .3s, background .3s;
  position:relative;
}

.suggestion_grid_option::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  transform:translate(-.5em, -.5em);
  width: 1em;
  height: 1em;
  background: #232323;
  border-radius: 50%;
  transition:transform 1s;
}

.suggestion_grid_option:hover {
  transform:scale(1.05);
  background:#ffffff;
}

.suggestion_grid_option:hover::after {
  animation: wiggle 1.3s infinite;
}

.suggestion_grid_option_title {
  width: 100%;
  box-sizing: border-box;
  padding:1.6em 1.6em 0 1.6em;
  font-size: 1.25em;
  font-weight: 700;
}

.suggestion_grid_option_body {
  width: 100%;
  box-sizing: border-box;
  padding:1em 2em;
}

.suggestion_guide{
  margin-top: 4em;
  max-width:800px;
}

.suggestion_guide h1{
  font-size: 160%;
}

.suggestion_guide a {
  display:block;
  position: relative;
  padding: 16px 25px 16px 58px;
  width: fit-content;
  background: #f56522;;
  text-decoration:none;
  color: #fff;
  border-radius: 3px;
  font-weight: 700;
  font-size: 80%;
  margin-top: 20px;
  user-select: none;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.25s, color 0.15s, transform .3s;
  line-height: 0;
  margin-right: 20px;
  overflow: hidden;
}

.suggestion_guide a::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 40px;
  left: 0;
  top: 0;
  box-shadow: 0 0 7px 3px rgb(0 0 0 / 30%);
  border-radius:3px;
}

.suggestion_guide a::after {
  content: '';
  position: absolute;
  background-image: url(../resources/guide.svg);
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 40px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .5s;
}

.suggestion_guide a:hover::after {
  transform: translateY(-50%) rotate(7deg) scale(1.05);
}

.suggestion_guide a:hover {
  background: #ff8f5a;
  transform:scale(1.05);
}

.suggestion_guide a:active {
  background: #555;
  box-shadow: inset 0 0 0 2px white;
  color: #eee;
  outline:none;
}

/* End Home */
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Begin Outgoing Links */

.link_btn_input_wrapper {
}

.section_id_links .input_line_wrapper .type {
  width: 20%;
}

.section_id_links .input_line_wrapper .title,
.section_id_links .input_line_wrapper .url {
  width: 40%;
}

/* End Outgoing Links */
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Begin Key Points List */

.key_pt_list_input_subtitle{
  width:100%;
}

.key_pt_list_input_title {
  width: 20%;
}

.key_pt_list_input_check {

}

.section_id_keypoints .input_color_wrapper {

}

/* End Key Points List */
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Begin Text Highlight */

.highlight_input {

}

.highlight_input_text_wrapper{
  width:100%;
}

.vert_divider {
  width: 2px;
  height: 32px;
  display: inline-block;
  vertical-align: middle;
  background: #333;
  border-radius: 1px;
  margin-top: calc(0.8em + 6px);
}

.section_id_highlight .input_color_wrapper {
  
}

.highlight_attr_wrapper {
  display: flex;
  gap: 10px;
}

.highlight_attr_input,
.highlight_attr_check {
  width: 40%;
  min-width: 400px;
}

.highlight_attr_check {
  width: fit-content;
  min-width: unset;
}

.highlight_attr_check .label svg {
  width: 15px;
  height: .75em;
}

/* End Text Highlight */
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Begin Next Steps */

.section_id_nextsteps .input_line_wrapper .text {
  width: 100%;
}

/* End Next Steps */
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Begin Divider */

.separator_input_title {
  padding: 10px 0 20px 0;
}

.separator_input_wrapper {
  width: calc(100% - 40px);
  margin-bottom: 30px;
  border-bottom: 1px solid #333;
}

.separator_input_wrapper:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.section_id_separator .input_title{
  width:100%;
  margin-bottom:10px;
}

.header_line_wrapper{
}

.header_input_line{
  width:100%;
}

.input_color_wrapper + .header_input_line{
  flex-grow: 1;
}

.header_number.header_input_line{
  display:inline-block;
  vertical-align: top;
  width:80px;
}

.div_list_input_color{
  display:inline-block;
  vertical-align:top;
}

.div_margin_selector{
  display:inline-block;
  vertical-align:top;
}

.div_list_input_color .title {
  font-size: 80%;
  font-weight: 400;
  padding-bottom: 6px;
  user-select: none;
}

.div_list_input_color .color_selector_option:nth-of-type(1) {
  background-color: rgb(34 34 34);
}

.div_list_input_color .color_selector_option:nth-of-type(2) {
  background-color: rgb(85 85 85);
}

.div_list_input_color .color_selector_option:nth-of-type(3) {
  background-color: rgb(153 153 153);
}

.div_list_input_color .color_selector_option:nth-of-type(4) {
  background-color: rgb(204 204 204);
}

.div_list_input_color .color_selector_option:nth-of-type(5) {
  background-color: rgb(255 255 255);
}

.section_id_separator .input_color_wrapper {
}

#div_header_title_input, #div_header_subtitle_input{
  width:100%;
}

/* End Divider */
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Begin Video Embed */

.video_input_wrapper {
  width: calc(100% - 40px);
  max-width: 920px;
  margin-bottom: 30px;
  border-bottom: 1px solid #333;
}

.video_input_wrapper:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

.video_input_wrapper .input_title {
  flex-grow: 1;
  flex-shrink: 0;
}

.video_input_wrapper .input_title:has(#general_input_title_input){
  width: 100%;
}

.video_input_wrapper .input_title input, .video_input_wrapper .input_timecode input {
  display: block;
  width: 100%;
  height: 32px;
  font-family: var(--body-font);
  padding: 1px 4px;
  border: 2px solid #ffffff;
  border-radius: 3px;
  box-sizing: border-box;
}

.video_input_wrapper .input_timecode {
  max-width: 20%;
  flex-grow: 0;
  flex-shrink: 1;
  white-space:nowrap;
  display: flex;
  flex-wrap: wrap;
}

.video_input_wrapper .input_timecode input{
  width: 45%;);
}

.video_input_wrapper .input_timecode .input_timecode_div{
  width: 10%;
  text-align:center;
  align-self: center;
}

/* End Video Embed */
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Begin Image Cropper */

.section_id_cropper .preview_wrapper {
  position: relative;
  width: var(--cropper-bg-width);
  height: var(--cropper-bg-height);
  background: #ffffff;
  margin-bottom: 20px;
  cursor: pointer;
  overflow: hidden;
  transition: height 0.3s;
}

.cropper_preview_background {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 100px;
  background-color:black;
}

.cropper_preview_background .layer_1{
  position: absolute;
  width: calc(100% - 180px);
  height: calc(100% - 180px);
  top: 90px;
  left: 90px;
  background-image: var(--cropper-bg-image);
  background-size: cover;
  background-position: center;
  filter: blur(10px) saturate(0.75);
  opacity:.8;
}

.cropper_preview_background .layer_2{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: var(--cropper-bg-image);
  background-size: var(--cropper-bg-size);
  background-position: var(--cropper-bg-offset);
  background-repeat:no-repeat;
  transition: background 0.155s;
}

.cropper_control_section{
  margin-top:20px;
  display:flex;
  gap: 1em;
}

.cropper_position{
  width: 130px;
}

.cropper_zoom .label {
  width: 28px;
}

.cropper_position,
.cropper_zoom {

}

.cropper_zoom {
  margin-left: 20px;
}

.cropper_ctrl_height {
  height: 100px;
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.cropper_ctrl_height input[type="radio"] {
  display: none;
}

.cropper_ctrl_height label {
  padding: 6px 10px;
  padding-left: 30px;
  position: relative;
  margin-bottom: 6px;
  display: block;
  border-radius: 3px;
  font-size: 80%;
  text-align: center;
  font-weight: 700;
  width: 60px;
  background: #ccc;
  color: black;
}

.cropper_ctrl_height label::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #202020;
  transform: translate(-50%, -50%);
}

.cropper_ctrl_height input[type="radio"] + .radio::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: width 0.15s, height 0.15s, opacity 0.15s;
}

.cropper_ctrl_height input[type="radio"]:checked + .radio::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%);
  opacity: 1;
}

.cropper_download {
  display: inline-block;
  vertical-align: top;
}

.cropper_input_wrapper {
  width: 240px;
  height: 100px;
  position: relative;
}

.cropper_input_title input {
  width: 100%;
  height: 32px;
  font-family: var(--body-font);
  padding: 1px 4px;
  border: 2px solid #ffffff;
  border-radius: 3px;
  box-sizing: border-box;
}

.sub_label {
  color: #888;
  margin-top: 8px;
}

#clipboard_div_input {
  position: absolute;
  right: 0;
  top: 0;
  margin-top: 0;
}

/* End Image Cropper */
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Begin SHSU Course Banner */

.section_id_shsubanner .shsubanner_bgctrl_wrapper{max-width: 160px;}

.section_id_shsubanner .shsubanner_pixelctrl_wrapper{
  max-width: 100px;
}

.section_id_shsubanner .effect_zoom {
  transform: scale(0.6);
  margin: -80px -320px;
}

.section_id_shsubanner .preview_wrapper {
  width: calc(var(--shsu-banner-bg-width) * .6);
  height: calc(var(--shsu-banner-bg-height) * .6);
}

.section_id_shsubanner .effect_wrapper {
  width: var(--shsu-banner-bg-width);
  height: var(--shsu-banner-bg-height);
}

.section_id_shsubanner .main_image {
  width: var(--shsu-banner-bg-width);
  height: var(--shsu-banner-bg-height);
  background-position: var(--shsu-banner-bg-offset);
  background-size: var(--shsu-banner-bg-size);
  background-image: var(--shsu-banner-bg-image);
}

.section_id_shsubanner .effect_group_0 {
  background-position: var(--shsu-banner-effect-offset);
  width: var(--shsu-banner-bg-width);
  height: var(--shsu-banner-bg-height);
}

.section_id_shsubanner .effect_group_1,
.section_id_shsubanner .effect_group_2 {
  width: var(--shsu-banner-bg-width);
  height: var(--shsu-banner-bg-height);
}

.section_id_shsubanner .cl1 .effect_group_1 .effect_color,
.section_id_shsubanner .cl1 .effect_group_2 .effect_color,
.section_id_shsubanner .cl2 .effect_group_1 .effect_color,
.section_id_shsubanner .cl2 .effect_group_2 .effect_color {
  width: var(--shsu-banner-bg-width);
  height: var(--shsu-banner-bg-height);
  background: var(--shsu-banner-effect-color);
}

.section_id_shsubanner .effect_group_1 .blur_img {
  background-image: var(--shsu-banner-bg-image);
  background-position: var(--shsu-banner-bg-offset);
  background-size: var(--shsu-banner-bg-size);
  width: var(--shsu-banner-bg-width);
  height: var(--shsu-banner-bg-height);
}

.section_id_shsubanner .effect_group_2 .blur_img {
  background-image: var(--shsu-banner-bg-image);
  background-position: var(--shsu-banner-bg-offset);
  background-size: var(--shsu-banner-bg-size);
  width: var(--shsu-banner-bg-width);
  height: var(--shsu-banner-bg-height);
}

.section_id_shsubanner .effect_group_1 .effect_img_1,
.section_id_shsubanner .effect_group_2 .effect_img_1 {
  background-position: var(--shsu-banner-effect-offset);
  width: var(--shsu-banner-bg-width);
  height: var(--shsu-banner-bg-height);
}

.section_id_shsubanner .effect_group_1 .effect_img_2,
.section_id_shsubanner .effect_group_2 .effect_img_2 {
  background-position: var(--shsu-banner-effect-offset);
  width: var(--shsu-banner-bg-width);
  height: var(--shsu-banner-bg-height);
}

.section_id_shsubanner .color_img_0 {
  width: var(--shsu-banner-bg-width);
  height: var(--shsu-banner-bg-height);
}

.section_id_shsubanner .color_img_1 {
  width: var(--shsu-banner-bg-width);
  height: var(--shsu-banner-bg-height);
}

.section_id_shsubanner .color_img_2 {
  width: var(--shsu-banner-bg-width);
  height: var(--shsu-banner-bg-height);
  background: var(--shsu-banner-effect-color);
}

.section_id_shsubanner .disable{
  opacity: .3;
  pointer-events: none;
}

.section_id_shsubanner .image_picker_wrapper {
  display: inline-block;
  vertical-align: top;
}

.section_id_shsubanner .image_picker_preview {
  background-image:var(--shsu-banner-bg-image);
}

/* End SHSU Course Banner */
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Begin TSUS Course Banner */

.section_id_tsusbanner .tsusbanner_bgctrl_wrapper{max-width: 160px;}

.section_id_tsusbanner{
  --tsus-banner-dev: none;
}

.dev .section_id_tsusbanner{
  --tsus-banner-dev: block;
}

.section_id_tsusbanner .effect_zoom {
  transform: scale(0.6);
  margin: -80px -320px;
}

.section_id_tsusbanner .preview_wrapper {
  width: calc(var(--tsus-banner-bg-width) * .6);
  height: calc(var(--tsus-banner-bg-height) * .6);
}

.section_id_tsusbanner .effect_wrapper {
  width: var(--tsus-banner-bg-width);
  height: var(--tsus-banner-bg-height);
}

.section_id_tsusbanner .main_image {
  width: var(--tsus-banner-bg-width);
  height: var(--tsus-banner-bg-height);
  background-position: var(--tsus-banner-bg-offset);
  background-size: var(--tsus-banner-bg-size);
  background-image: var(--tsus-banner-bg-image);
}

.section_id_tsusbanner .effect_group_0 {
  background-position: var(--tsus-banner-effect-offset);
  width: var(--tsus-banner-bg-width);
  height: var(--tsus-banner-bg-height);
  display: var(--tsus-banner-dev);
}

.section_id_tsusbanner .cl0 .effect_group_0 {
  display: none;
}

.section_id_tsusbanner .effect_group_1,
.section_id_tsusbanner .effect_group_2 {
  width: var(--tsus-banner-bg-width);
  height: var(--tsus-banner-bg-height);
  display: var(--tsus-banner-dev);
}


.section_id_tsusbanner .cl0 .effect_group_1,
.section_id_tsusbanner .cl0 .effect_group_2 {
  display: none;
}

.section_id_tsusbanner .cl1 .effect_group_1 .effect_color,
.section_id_tsusbanner .cl1 .effect_group_2 .effect_color,
.section_id_tsusbanner .cl2 .effect_group_1 .effect_color,
.section_id_tsusbanner .cl2 .effect_group_2 .effect_color {
  width: var(--tsus-banner-bg-width);
  height: var(--tsus-banner-bg-height);
  background: var(--tsus-banner-effect-color);
}

.section_id_tsusbanner .effect_group_1 .blur_img {
  background-image: var(--tsus-banner-bg-image);
  background-position: var(--tsus-banner-bg-offset);
  background-size: var(--tsus-banner-bg-size);
  width: var(--tsus-banner-bg-width);
  height: var(--tsus-banner-bg-height);
}

.section_id_tsusbanner .effect_group_2 .blur_img {
  background-image: var(--tsus-banner-bg-image);
  background-position: var(--tsus-banner-bg-offset);
  background-size: var(--tsus-banner-bg-size);
  width: var(--tsus-banner-bg-width);
  height: var(--tsus-banner-bg-height);
}

.section_id_tsusbanner .effect_group_1 .effect_img_1,
.section_id_tsusbanner .effect_group_2 .effect_img_1 {
  background-position: var(--tsus-banner-effect-offset);
  width: var(--tsus-banner-bg-width);
  height: var(--tsus-banner-bg-height);
}

.section_id_tsusbanner .effect_group_1 .effect_img_2,
.section_id_tsusbanner .effect_group_2 .effect_img_2 {
  background-position: var(--tsus-banner-effect-offset);
  width: var(--tsus-banner-bg-width);
  height: var(--tsus-banner-bg-height);
}

.section_id_tsusbanner .color_img_0 {
  width: var(--tsus-banner-bg-width);
  height: var(--tsus-banner-bg-height);
}

.section_id_tsusbanner .color_img_1 {
  width: var(--tsus-banner-bg-width);
  height: var(--tsus-banner-bg-height);
  display: var(--tsus-banner-dev);
}

.section_id_tsusbanner .cl0 .color_img_1 {
  display: none;
}

.section_id_tsusbanner .color_img_2 {
  width: var(--tsus-banner-bg-width);
  height: var(--tsus-banner-bg-height);
  background: var(--tsus-banner-effect-color);
  display: var(--tsus-banner-dev);
}

.section_id_tsusbanner .cl0 .color_img_2 {
  display: none;
}

.section_id_tsusbanner .disable{
  opacity: .3;
  pointer-events: none;
}

.section_id_tsusbanner .image_picker_wrapper {
  display: inline-block;
  vertical-align: top;
}

.section_id_tsusbanner .image_picker_preview {
  background-image:var(--tsus-banner-bg-image);
}

.tsusbanner_controls_wrapper {
  margin-top: 20px;
  width: 1200px;
  white-space:nowrap;
}

.dev_pix_wrapper{
  display: none;
  gap: 1em;
}

.dev .dev_pix_wrapper{
  display: inline-block;
}

.tsusbanner_bgctrl_wrapper,
.tsusbanner_pixelctrl_wrapper{
}

.tsusbanner_pixelctrl_wrapper{
  width: 100px;
}

.tsus_uni_logo{
  position: absolute;
  width: 550px;
  height: 250px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image:var(--tsus-banner-logo-image);
  background-position: center;
  background-size: contain;
  background-repeat:no-repeat;
  filter: drop-shadow(0 0 50px rgb(0 0 0 / 60%)) drop-shadow(0 0 5px rgb(0 0 0 /30%));
}

.tsus_uni_logo.inv{
  filter: drop-shadow(0 0 50px rgb(255 255 255 / 60%)) drop-shadow(0 0 5px rgb(255 255 255 /45%));
}

.uni_select_input, .partner_select_input{
  width: 100%;
  height: 32px;
  font-family: var(--body-font);
  padding: 1px 4px;
  border: 2px solid #ffffff;
  border-radius: 3px;
  box-sizing: border-box;
  cursor: pointer;
}

.logo_selection_wrapper{
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.logo_invert_wrapper{
}

.logo_type_wrapper{
  width: 100%;
}

/* End TSUS Course Banner */
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Start SamPoly Branded Course Banner */

.poly.section_id_tsusbanner .dev_pix_wrapper{
  display: flex;
}

.poly.section_id_tsusbanner .tsusbanner_pixelctrl_wrapper {
  display: none;
}


.poly.section_id_tsusbanner .ultra_color_slider_wrapper{
  /*display: none;*/
}

.poly.section_id_tsusbanner  .effect_zoom .main_image {
  z-index: -1;
}

.poly.section_id_tsusbanner  .effect_zoom .effect_group_0 {
  display:block;
  background-image: url(../resources/masks/sampoly_banner_mask_neg.png);
  background-size: 100%;
  background-position: center;
  image-rendering: unset;
}

.poly.section_id_tsusbanner  .effect_zoom .effect_group_1{
  display: block;
}

.poly.section_id_tsusbanner  .effect_zoom .effect_group_1 .blur_img{
  background-image: url(../resources/masks/sampoly_banner_mask_pos.png);
  background-size: auto;
  background-position: center;
  mix-blend-mode: normal;
  opacity: 1;
  filter: unset;
}

.poly.section_id_tsusbanner  .effect_zoom .effect_group_1 .effect_color{
  background: var(--tsus-banner-effect-color);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  opacity: 1;
}
 
.poly.section_id_tsusbanner  .effect_group_1 .effect_img_1,
.poly.section_id_tsusbanner  .effect_group_1 .effect_img_2,
.poly.section_id_tsusbanner  .effect_group_2{
  display:none;
}

.poly.section_id_tsusbanner  .color_img_0{
  z-index: -1;
}

.poly.section_id_tsusbanner  .color_img_1{
  display: block;
  background: unset;
  opacity: 1;
}

.poly.section_id_tsusbanner  .color_img_1::before, 
.poly.section_id_tsusbanner  .color_img_1::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--tsus-banner-effect-color);
  opacity: .6;
}

.poly.section_id_tsusbanner  .color_img_1::before{
  opacity: .5;
  mix-blend-mode: color;
}

/*///////// Color slider Med //////////*/

.poly.section_id_tsusbanner .cl2 .color_img_1::before{
  opacity: .35;
}

.poly.section_id_tsusbanner .cl2 .color_img_1::after{
  opacity: .55;
}

/*///////// Color slider low //////////*/

.poly.section_id_tsusbanner .cl1 .color_img_1::before{
  opacity: .25;
}

.poly.section_id_tsusbanner .cl1 .color_img_1::after{
  opacity: .35;
}

/*///////// Color slider zero //////////*/

.poly.section_id_tsusbanner .cl0 .color_img_1::before{
  opacity: .15;
}

.poly.section_id_tsusbanner .cl0 .color_img_1::after{
  opacity: .25;
}


.poly.section_id_tsusbanner  .effect_zoom .tsus_uni_logo{
  width: 420px;
  height: 125px;
}


/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Begin General Video Thumbnail */



/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.section_id_genvidthumb .vid_thumb_bgctrl_wrapper{
  max-width: 160px;
}

.section_id_genvidthumb .vid_thumb_pixelctrl_wrapper{
  max-width: 100px;
}

.section_id_genvidthumb .effect_zoom {
  transform: scale(0.5);
  margin: -270px -480px;
}

.section_id_genvidthumb .preview_wrapper {
  width: calc(var(--gen-video-thumb-bg-width) * .5);
  height: calc(var(--gen-video-thumb-bg-height) * .5);
}

.section_id_genvidthumb .effect_wrapper {
  width: var(--gen-video-thumb-bg-width);
  height: var(--gen-video-thumb-bg-height);
}

.section_id_genvidthumb .main_image {
  width: var(--gen-video-thumb-bg-width);
  height: var(--gen-video-thumb-bg-height);
  background-position: var(--gen-video-thumb-bg-offset);
  background-size: var(--gen-video-thumb-bg-size);
  background-image: var(--gen-video-thumb-bg-image);
}

.section_id_genvidthumb .effect_group_0 {
  background-position: var(--gen-video-thumb-effect-offset);
  width: var(--gen-video-thumb-bg-width);
  height: var(--gen-video-thumb-bg-height);
}

.section_id_genvidthumb .effect_group_1,
.section_id_genvidthumb .effect_group_2 {
  width: var(--gen-video-thumb-bg-width);
  height: var(--gen-video-thumb-bg-height);
}

.section_id_genvidthumb .cl1 .effect_group_1 .effect_color,
.section_id_genvidthumb .cl1 .effect_group_2 .effect_color,
.section_id_genvidthumb .cl2 .effect_group_1 .effect_color,
.section_id_genvidthumb .cl2 .effect_group_2 .effect_color {
  width: var(--gen-video-thumb-bg-width);
  height: var(--gen-video-thumb-bg-height);
  background: var(--gen-video-thumb-effect-color);
}

.section_id_genvidthumb .effect_group_1 .blur_img {
  background-image: var(--gen-video-thumb-bg-image);
  background-position: var(--gen-video-thumb-bg-offset);
  background-size: var(--gen-video-thumb-bg-size);
  width: var(--gen-video-thumb-bg-width);
  height: var(--gen-video-thumb-bg-height);
}

.section_id_genvidthumb .effect_group_2 .blur_img {
  background-image: var(--gen-video-thumb-bg-image);
  background-position: var(--gen-video-thumb-bg-offset);
  background-size: var(--gen-video-thumb-bg-size);
  width: var(--gen-video-thumb-bg-width);
  height: var(--gen-video-thumb-bg-height);
}

.section_id_genvidthumb .effect_group_1 .effect_img_1,
.section_id_genvidthumb .effect_group_2 .effect_img_1 {
  background-position: var(--gen-video-thumb-effect-offset);
  width: var(--gen-video-thumb-bg-width);
  height: var(--gen-video-thumb-bg-height);
}

.section_id_genvidthumb .effect_group_1 .effect_img_2,
.section_id_genvidthumb .effect_group_2 .effect_img_2 {
  background-position: var(--gen-video-thumb-effect-offset);
  width: var(--gen-video-thumb-bg-width);
  height: var(--gen-video-thumb-bg-height);
}

.section_id_genvidthumb .color_img_0 {
  width: var(--gen-video-thumb-bg-width);
  height: var(--gen-video-thumb-bg-height);
}

.section_id_genvidthumb .color_img_1 {
  width: var(--gen-video-thumb-bg-width);
  height: var(--gen-video-thumb-bg-height);
}

.section_id_genvidthumb .color_img_2 {
  width: var(--gen-video-thumb-bg-width);
  height: var(--gen-video-thumb-bg-height);
  background: var(--gen-video-thumb-effect-color);
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.video_thumb_text_wrapper {
  position: absolute;
  top: 364px;
  left: 192px;
  width: calc(100% - 364px);
  height: calc(100% - 460px);
  font-family: var(--online-font);
  font-size: 72px;
  font-weight: 300;
  letter-spacing: 0.005em;
  text-shadow: 0 0 30px rgb(0 0 0 / 40%);
  overflow: hidden;
}

.video_thumb_text_1 {
  position: absolute;
  top: 0;
}

.video_thumb_text_sub_wrapper {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.video_thumb_text_2 {
  font-size: 96px;
  font-weight: 700;
}

.video_thumb_text_3 {
  margin-top: 8px;
}

.video_thumb_logo {
  position: absolute;
  width: 224px;
  height: 160px;
  top: 146px;
  left: 196px;
  background: url(../resources/shsu_logo.svg);
  background-repeat: no-repeat;
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);
}

.thumbnail_controls_wrapper {
  margin-top: 20px;
  width: 1206px;
}

.ultra_color_slider_wrapper {
  width: 100%;
  margin-top:12px;
}

.ultra_pixelcolor_wrapper {
  width: 95px;
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.pix_effect_slider {
  display: block;
  padding-top: 0;
}

.text_input_wrapper {
  width: 400px;
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}

.text_input_line {width: 100%;}

.text_input_line:last-of-type {
  margin-bottom: 0;
}

.text_input_line_split {
  display: inline-block;
  margin-right: 20px;
  width:calc(30% - 10px);
}

.text_input_line_split:last-of-type {
  width:calc(70% - 10px);
  margin-right: 0;
}

.text_input_college,
.text_input_number,
.text_input_name {
  width: 100%;
  height: 32px;
  font-family: var(--body-font);
  padding: 1px 4px;
  border: 2px solid #ffffff;
  border-radius: 3px;
  box-sizing: border-box;
}

.text_input_name {
  width: calc(100% - 1px);
}

.vid_thumb_dl_btn_wrapper {
  margin-top: auto;
}

.vid_thumb_dl_btn {
  position:relative;
  width: 70px;
  height: 100px;
  background-color: #45aae8;
  border-radius: 3px;
  transition: background 0.3s, transform 0.3s;
}

.vid_thumb_dl_btn::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:32px;
  height:32px;
  background-image: url(../resources/download.svg);
  background-position: center;
  background-repeat: no-repeat;
  transform:translate(-50%, -50%);
  transition: transform 0.3s;
}

.vid_thumb_dl_btn:hover {
  background-color: #bbbbbb;
  transform:scale(1.05);
}

.vid_thumb_dl_btn:hover::after{
  transform:translate(-50%, -50%) rotate(3deg);
}


/* End General Video Thumbnail */
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Begin Branded Video Thumbnail */

.dev .dev_pix_wrapper, .cj.section_id_brandvidthumb  .dev_pix_wrapper, .poly.section_id_brandvidthumb  .dev_pix_wrapper{
  display: flex;
}


.cj .vid_thumb_pixelctrl_wrapper, .poly.section_id_brandvidthumb  .tsusbanner_pixelctrl_wrapper {
  opacity:.2;
  pointer-events: none;
}



.section_id_brandvidthumb .vid_thumb_bgctrl_wrapper{
  width: 160px;
}

.section_id_brandvidthumb .vid_thumb_pixelctrl_wrapper {
  width: 100px;
}

.vid_thumb_pixelctrl_wrapper.hidden{
  display:none;
}

.dev .vid_thumb_pixelctrl_wrapper.hidden{
  display:inline-block; 
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.section_id_brandvidthumb .effect_zoom {
  transform: scale(0.5);
  margin: -270px -480px
}

.section_id_brandvidthumb .preview_wrapper {
  width: calc(var(--brand-video-thumb-bg-width) * .5);
  height: calc(var(--brand-video-thumb-bg-height) * .5);
}

.section_id_brandvidthumb .effect_wrapper {
  width: var(--brand-video-thumb-bg-width);
  height: var(--brand-video-thumb-bg-height);
}

.section_id_brandvidthumb .main_image {
  width: var(--brand-video-thumb-bg-width);
  height: var(--brand-video-thumb-bg-height);
  background-position: var(--brand-video-thumb-bg-offset);
  background-size: var(--brand-video-thumb-bg-size);
  background-image: var(--brand-video-thumb-bg-image);
}

.section_id_brandvidthumb .effect_group_0 {
  background-position: var(--brand-video-thumb-effect-offset);
  width: var(--brand-video-thumb-bg-width);
  height: var(--brand-video-thumb-bg-height);
}

.section_id_brandvidthumb .effect_group_1,
.section_id_brandvidthumb .effect_group_2 {
  width: var(--brand-video-thumb-bg-width);
  height: var(--brand-video-thumb-bg-height);
}

.section_id_brandvidthumb .cl1 .effect_group_1 .effect_color,
.section_id_brandvidthumb .cl1 .effect_group_2 .effect_color,
.section_id_brandvidthumb .cl2 .effect_group_1 .effect_color,
.section_id_brandvidthumb .cl2 .effect_group_2 .effect_color {
  width: var(--brand-video-thumb-bg-width);
  height: var(--brand-video-thumb-bg-height);
  background: var(--brand-video-thumb-effect-color);
}

.section_id_brandvidthumb .effect_group_1 .blur_img {
  background-image: var(--brand-video-thumb-bg-image);
  background-position: var(--brand-video-thumb-bg-offset);
  background-size: var(--brand-video-thumb-bg-size);
  width: var(--brand-video-thumb-bg-width);
  height: var(--brand-video-thumb-bg-height);
}

.section_id_brandvidthumb .effect_group_2 .blur_img {
  background-image: var(--brand-video-thumb-bg-image);
  background-position: var(--brand-video-thumb-bg-offset);
  background-size: var(--brand-video-thumb-bg-size);
  width: var(--brand-video-thumb-bg-width);
  height: var(--brand-video-thumb-bg-height);
}

.section_id_brandvidthumb .effect_group_1 .effect_img_1,
.section_id_brandvidthumb .effect_group_2 .effect_img_1 {
  background-position: var(--brand-video-thumb-effect-offset);
  width: var(--brand-video-thumb-bg-width);
  height: var(--brand-video-thumb-bg-height);
}

.section_id_brandvidthumb .effect_group_1 .effect_img_2,
.section_id_brandvidthumb .effect_group_2 .effect_img_2 {
  background-position: var(--brand-video-thumb-effect-offset);
  width: var(--brand-video-thumb-bg-width);
  height: var(--brand-video-thumb-bg-height);
}

.section_id_brandvidthumb .color_img_0 {
  width: var(--brand-video-thumb-bg-width);
  height: var(--brand-video-thumb-bg-height);
}

.section_id_brandvidthumb .color_img_1 {
  width: var(--brand-video-thumb-bg-width);
  height: var(--brand-video-thumb-bg-height);
}

.section_id_brandvidthumb .color_img_2 {
  width: var(--brand-video-thumb-bg-width);
  height: var(--brand-video-thumb-bg-height);
  background: var(--brand-video-thumb-effect-color);
}

.section_id_brandvidthumb .text_input_wrapper{
  width:414px;
}

.section_id_brandvidthumb .text_input_number{
  margin-left:0;
  width:100%;
}

.section_id_brandvidthumb .logo_invert_wrapper{
  margin-left:0;
}

.section_id_brandvidthumb .video_thumb_logo{
  top: 190px;
  width:700px;
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 10px rgb(0 0 0 / 80%)) drop-shadow(0 0 30px var(--brand-video-thumb-effect-color));
  box-shadow:unset;
  background-image: var(--brand-video-thumb-logo-image);
}

.section_id_brandvidthumb .video_thumb_logo.inv{
  filter: drop-shadow(0 0 30px var(--brand-video-thumb-effect-color));
}

.section_id_brandvidthumb .cl2 .video_thumb_logo{
  filter: drop-shadow(0 0 10px rgb(0 0 0 / 50%)) drop-shadow(0 0 60px var(--brand-video-thumb-effect-color));
}

.section_id_brandvidthumb .cl2 .video_thumb_logo.inv{
  filter: drop-shadow(0 0 60px var(--brand-video-thumb-effect-color));
}

.section_id_brandvidthumb .cl1 .video_thumb_logo{
  filter: drop-shadow(0 0 10px rgb(0 0 0 / 80%));
}

.section_id_brandvidthumb .cl1 .video_thumb_logo.inv{
  filter: unset;
}

.cj .effect_group_0 {
  background-image: url(../resources/masks/TDCJ_mask_inv.png);
  background-size: 100%;
  background-position: center;
  image-rendering: unset;
}

.cj .effect_group_2 {
  display:none;
}

.cj .effect_group_1 .blur_img {
  filter: blur(2px);
}

.cj .effect_group_1 .effect_color {
  position: absolute;
  top: 0px;
  left: 0px;
  width: var(--brand-video-thumb-bg-width);
  height: var(--brand-video-thumb-bg-height);
  background-color:var(--brand-video-thumb-effect-color);
  opacity:.7;
}

.cj .cl3 .effect_group_1 .effect_color {
  opacity:.6;
  mix-blend-mode: normal;
}

.cj .cl2 .effect_group_1 .effect_color {
  opacity: 0.4;
  mix-blend-mode: normal;
}

.cj .cl1 .effect_group_1 .effect_color {
  opacity:.25;
  mix-blend-mode: normal;
}

.cj .effect_group_1 .effect_img_1{
  display: none;
} 

.cj .effect_group_1 .effect_img_2{
  background-image: url(../resources/masks/TDCJ_mask.png);
  background-size: 100%;
  background-position: center;
  image-rendering: unset;
  mix-blend-mode: multiply;
  opacity: 1;
}

.cj .cl1 .effect_group_1 .effect_img_2,
.cj .cl1 .effect_group_2 .effect_img_2,
.cj .cl2 .effect_group_1 .effect_img_2,
.cj .cl2 .effect_group_2 .effect_img_2,
.cj .cl3 .effect_group_1 .effect_img_2,
.cj .cl3 .effect_group_2 .effect_img_2 {
  opacity: 1;
}

.cj .color_img_0 {
  position: absolute;
  top: 0px;
  left: 0px;
  background: #000000;
  opacity: 0;
}

.cj .cl3 .color_img_2 {
  opacity: 0.35;
}

.cj .cl2 .color_img_2 {
  opacity: 0.2;
}

.cj .cl1 .color_img_2 {
  opacity: 0.05;
}

.section_id_brandvidthumb .effect_zoom .video_thumb_logo, 
.section_id_brandvidthumb .effect_zoom .cl3 .video_thumb_logo,
.section_id_brandvidthumb .effect_zoom .cl2 .video_thumb_logo,
.section_id_brandvidthumb .effect_zoom .cl1 .video_thumb_logo{
  filter: drop-shadow(0 0 8px rgb(0 0 0 / .8));
}

.cj .video_thumb_logo, 
.cj .cl3 .video_thumb_logo,
.cj .cl2 .video_thumb_logo,
.cj .cl1 .video_thumb_logo{
  filter: drop-shadow(0 0 10px var(--brand-video-thumb-effect-color));
}

.section_id_brandvidthumb .effect_zoom .cl0 .effect_group_0,
.section_id_brandvidthumb .effect_zoom .cl0 .effect_group_1,
.section_id_brandvidthumb .effect_zoom .cl0 .effect_group_2,
.section_id_brandvidthumb .effect_zoom .cl0 .color_img_2{
  display:none;
}

.section_id_brandvidthumb.cj .effect_group_0,
.section_id_brandvidthumb.cj .effect_zoom .effect_group_1,
.section_id_brandvidthumb.cj .effect_zoom .color_img_1,
.section_id_brandvidthumb.cj .effect_zoom .color_img_2{
  display:block;
}

.section_id_brandvidthumb .effect_zoom .color_img_1{
  background: linear-gradient(90deg, black 20%, transparent);
  opacity: 0.3;
}

.section_id_brandvidthumb.cj .video_thumb_text_wrapper {
  font-family:Montserrat;
}



/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Start Branded Video Thumbnail */

.poly .ultra_color_slider_wrapper{
  /*display: none;*/
}

.poly.section_id_brandvidthumb .effect_zoom .main_image {
  z-index: -1;
}

.poly.section_id_brandvidthumb .effect_zoom .effect_group_0 {
  display:block;
  background-image: url(../resources/masks/sampoly_mask_neg.png);
  background-size: 100%;
  background-position: center;
  image-rendering: unset;
}

.poly.section_id_brandvidthumb .effect_zoom .effect_group_1{
  display: block;
}

.poly.section_id_brandvidthumb .effect_zoom .effect_group_1 .blur_img{
  background-image: url(../resources/masks/sampoly_mask_pos.png);
  background-size: auto;
  background-position: center;
  mix-blend-mode: normal;
  opacity: 1;
  filter: unset;
}

.poly.section_id_brandvidthumb .effect_zoom .effect_group_1 .effect_color{
  background: var(--brand-video-thumb-effect-color);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  opacity: 1;
}
 
.poly.section_id_brandvidthumb .effect_group_1 .effect_img_1,
.poly.section_id_brandvidthumb .effect_group_1 .effect_img_2,
.poly.section_id_brandvidthumb .effect_group_2{
  display:none;
}

.poly.section_id_brandvidthumb .color_img_0{
  z-index: -1;
}

.poly.section_id_brandvidthumb .color_img_1{
  background: unset;
  opacity: 1;
}

.poly.section_id_brandvidthumb .color_img_1::before, 
.poly.section_id_brandvidthumb .color_img_1::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--brand-video-thumb-effect-color);
  opacity: .75;
}

.poly.section_id_brandvidthumb .color_img_1::before{
  opacity: .5;
  mix-blend-mode: color;
}

/*///////// Color slider Med //////////*/

.poly.section_id_brandvidthumb .cl2 .color_img_1::before{
  opacity: .35;
}

.poly.section_id_brandvidthumb .cl2 .color_img_1::after{
  opacity: .55;
}

/*///////// Color slider low //////////*/

.poly.section_id_brandvidthumb .cl1 .color_img_1::before{
  opacity: .25;
}

.poly.section_id_brandvidthumb .cl1 .color_img_1::after{
  opacity: .35;
}

/*///////// Color slider zero //////////*/

.poly.section_id_brandvidthumb .cl0 .color_img_1::before{
  opacity: .15;
}

.poly.section_id_brandvidthumb .cl0 .color_img_1::after{
  opacity: .25;
}

.poly.section_id_brandvidthumb .cl0 .color_img_2{
  display: block;
}

/*////////////////////////////////////*/

.poly.section_id_brandvidthumb .color_img_2{
  display: block;
  background: unset;
  border-left: 5px solid white;
  border-bottom: 5px solid white;
  left: 78px;
  top: unset;
  bottom: 67px;
  width: calc(100% - 247px);
  height: calc(100% - 240px);
  opacity: 1;
  mix-blend-mode: unset;
}

.poly.section_id_brandvidthumb .color_img_2::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 4px;
  width: 46px;
  aspect-ratio: 1;
  border-top: 5px solid white;
  border-right: 5px solid white;
  transform: translateY(calc(50% + 3.5px)) rotate(45deg);
}


.poly.section_id_brandvidthumb .effect_zoom .video_thumb_logo{
  filter:unset;
  top: 124px;
  left: 209px;
  width: 427px;
  height: 160px;
}

.poly .video_thumb_logo > div {
  position: relative;
  display: block;
  right: -1346px;
  top: 8px;
  width: 157px;
  aspect-ratio: 1;
  background: url(../resources/logos/shsu_sh.png);
  background-size: contain;
}

.poly .video_thumb_text_wrapper {
  font-family: "SHSU-Flexa";
  text-transform: uppercase;
  font-weight: 400;
  top: 319px;
  left: 207px;
  text-shadow: 0 0 30px var(--brand-video-thumb-effect-color);
}

.poly .video_thumb_text_sub_wrapper {
  letter-spacing: .01em;
}

.poly .video_thumb_text_2 {
  margin-left: -3px;
  font-size: 123px;
  font-weight: 500;
  -webkit-text-stroke: 2px white;
  color: transparent;
  margin-bottom: -15px;
}

.poly .video_thumb_text_3{
  margin:unset;
}


.poly .color_selector_wrapper .r1 .color_selector_option:nth-of-type(3),
.poly .color_selector_wrapper .r1 .color_selector_option:nth-of-type(4),
.poly .color_selector_wrapper .r3 .color_selector_option:nth-of-type(5),
.poly .color_selector_wrapper .r4 .color_selector_option:nth-of-type(3),
.poly .color_selector_wrapper .r6 .color_selector_option:nth-of-type(5),
.poly .color_selector_wrapper .r7 .color_selector_option:nth-of-type(2){
  opacity: 0;
  pointer-events: none;
}

/*




*/


/* End Branded Video Thumbnail */
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Begin Changelog */

.changelog_wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 500px;
  max-width: 860px;
  padding: 40px;
  padding-right: 10px;
  background: #191919;
  border: 1px solid #646464;
  border-radius: 5px;
  transform: translate(-50%, -50%);
  outline: 10000px solid rgb(0 0 0 / 75%);
  color: #ccc;
}

.changelog_wrapper .section_title{
  font-size: 1.3em;
  font-weight: 700;
  color: #fff;
  margin-bottom:10px;
}

.changelog_wrapper.hidden {
  display: none;
}

.changelog_wrapper .title {
  font-size: 1.3em;
  font-weight: 700;
  margin-bottom: 30px;
  color: #fff;
}

.changelog_content_wrapper{
  position: relative;
}

.changelog_content_wrapper::before, .changelog_content_wrapper::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% - 9px);
  height: 40px;
  background: linear-gradient(180deg, #191919 5%, transparent);
}

.changelog_content_wrapper::after {
  top: unset;
  bottom:-1px;
  background: linear-gradient(0deg, #191919 5%, transparent);
}

.changelog_content {
  max-height: 80vh;
  overflow-y: scroll;
  padding-right: 24px;
  padding-bottom: 40px;
}

.changelog_wrapper .close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border: 10px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}

.changelog_wrapper .close::before,
.changelog_wrapper .close::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 100%;
  height: 1px;
  background: white;
  transform: translateY(-50%) rotate(-45deg);
}

.changelog_wrapper .close::after {
  transform: translateY(-50%) rotate(45deg);
}

.changelog_wrapper span {
  display: block;
  font-size: 1.15em;
  font-weight: 700;
  color: #fff;
}

.changelog_wrapper p {
}

.changelog_wrapper li {
  margin-bottom: 8px;
}

.changelog_wrapper ul {
  margin-bottom: 18px;
}

/* End Changelog */
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/







.ultra_glow_box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1176px;
  height: 500px;
  background: #202020;
  z-index: 1000;
  box-shadow: 0 0 60px 10px rgb(0 0 0 / 70%);
  overflow: hidden;
  border-radius: 6px;
  display: none;
  border: 2px solid white;
  outline: 20000px solid rgb(0 0 0 / 70%);
  padding: 30px 0 0 30px;
  flex-wrap: wrap;
}

.ultra_glow_box.show {
  display: flex;
}

.header_wrapper{
  flex-shrink: 0;
  width: 100%;
}

.ultra_glow_box .header {
  font-weight: 700;
  font-size: 120%;
  position: relative;
  user-select: none;
  padding-bottom: 30px;
}

#ultra_img_selector_nav_wrapper {
  flex-shrink: 1;
  padding-right: 30px;
}

.ultra_img_selector_nav_option {
  position: relative;
  width: fit-content;
  font-size: 82%;
  padding: 10px 0;
  display: block;
  user-select: none;
  cursor: pointer;
  border: none;
  background-color: unset;
  font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  font-weight: 300;
  color: white;
  text-align: left;
  transition: color 0.3s, background 0.3s, opacity 0.3s;
}

.ultra_img_selector_nav_option.active {
  width: 100%;
  color: #fff;
  background: linear-gradient(90deg, #2f2f2f, transparent);
  border-radius: 3px;
  padding-left: 10px;
  margin-left: -10px;
  box-sizing: content-box;
}

.ultra_img_selector_nav_option::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  transition: width 0.3s, opacity.3s;
  opacity: 0;
  background-color: #666666;
}

.ultra_img_selector_nav_option.active::after {
  width: 100%;
  opacity: 1;
}

.ultra_img_selector_nav_option.stock {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 30px;
  color: #ccc;
  margin: 30px 0 0 -10px;
  transition:color .3s, border-color .3s;
}

.ultra_img_selector_nav_option.stock.active {
  width: fit-content;
  color: white;
  border-color: white;
}

.ultra_img_selector_nav_option.stock.active::after {
  display: none;
}

.ultra_img_selector_img_section_wrapper {
  flex-grow: 1;
  width:75%;
  height: 444px;
  padding: 0;
  box-shadow: inset -5px 5px 5px 0px rgb(0 0 0 / 8%), inset -1px 1px 7px 4px rgb(0 0 0 / 30%);
  border-radius: 8px 0 0 0;
}

.ultra_img_selector_img_section {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  display: none;
  padding: 20px;
  box-sizing: border-box;
}

.ultra_img_selector_img_section.active {
  display: grid;
  grid-gap: 18px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: min-content;
}

.ultra_img_selector_img_section.stock.active {
  display: block;
}

.ultra_img_selector_img_section.stock h2 {
  font-size: 1.125em;
  margin: 1.75em 0 1.15em 0;
}

.ultra_img_selector_img_section.stock h2:first-of-type {
  margin-top: 0;
}

.ultra_img_selector_img_section.stock i {
  color: #999;
}

.oer_button_grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  height: fit-content;
  margin:30px 0;
}

.oer_button_grid a {
  flex-shrink: 0;
  display: block;
  text-decoration: none;
  color: white;
  padding: 7px 12px;
  border: 1px solid white;
  border-radius: 3px;
  cursor: pointer;
  font-size: .8em;
  line-height: 1em;
  transition: transform .3s;
  user-select: none;
}

.oer_button_grid a:hover {
  transform: scale(1.1);
  background: #444444;
}

.stock_divider{
  width:100%;
  border-bottom:1px solid #444;
  margin:30px 0;
}

.img_ex_wrapper {
  display: flex;
  gap: 20px;
}

.img_ex {
  width: 25%;
  flex-shrink: 1;
}

.img_ex img {
  width: 100%;
  border-radius: 5px;
  margin-top: 4px;
}

.ultra_img_selector_img_option {
  padding: 0;
  aspect-ratio: 4/1;
  display: block;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center top !important;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  user-select: none;
  cursor: pointer;
  background-image: url(../classic_banners/banners/other/email-pattern.png);
  border: none;
  border-radius: 3px;
}

.ultra_img_selector_img_option.selected {
  box-shadow: 0 0 11px 5px rgb(45 160 230), inset 0 0 0 2px white;
}

.ultra_img_selector_img_option.selected::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0px;
  border: 16px solid rgba(255, 255, 255, 0);
  border-right: 16px solid white;
  border-bottom: 16px solid white;
}

.upload_title {
   font-weight: 300;
   margin-top: 20px;
}

.upload_text {
   font-size: 85%;
   width: 70%;
   line-height: 150%;
   display: inline-block;
}

.upload_text span{
   font-size: 90%;
   font-style: italic;
}

.banner_close {
  position: absolute;
  top: 0;
  right: -12px;
  margin:23px 30px;
  width: 20px;
  height: 20px;
  vertical-align: bottom;
  cursor: pointer;
  border: 10px solid rgb(0 0 0 / 0%);
  border-radius: 50%;
}

.banner_close::after, .banner_close::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: white;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  border-radius: 50%;
}

.banner_close::before {
  transform: translateY(-50%) rotate(45deg);
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.non_chrome_warning {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000ee;
  display:none;
}

.non_chrome_warning.vis{
  display:block;
}

.non_chrome_warning .text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%;
  max-width: 600px;
  transform: translate(-50%, -50%);
  font-size: 2em;
  line-height: 1.5em;
  padding-bottom:2.5em;
}

.non_chrome_warning .text::after {
  content:'Continue Without Chrome';
  position: absolute;
  bottom: 0;
  right: 0;
  width: fit-content;
  padding:.125em .5em;
  border:2px solid white;
  border-radius: 4px;
  cursor:pointer;
  font-size: .85em;
}

.non_chrome_warning .title {
  font-size: 1.25em;
  font-weight: 700;
  padding-bottom: .25em;
  margin-bottom: .5em;
  width: fit-content;
  border-bottom: 3px solid white;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Begin Scrollbar */

/* width */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  border-radius: 3px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #000;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}


/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@-webkit-keyframes pulse {
  0% {
    outline: 0 solid rgba(200, 200, 200, 1);
  }
  70% {
    outline: 20px solid rgba(200, 200, 200, 0);
  }
  100% {
    outline: 0 solid rgba(200, 200, 200, 0);
  }
}

@-webkit-keyframes wiggle {
  0% {
    transform: translate(-2em, -.5em) scale(.5);
    opacity:0;
  }
  10% {
    opacity:0;
  }
  80% {
    transform: translate(-.5em, -.5em);
    opacity:1;
  }
  85% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

/* End Scrollbar */
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Begin Preview Styles */

.em-dash:after {
  content: "\2014";
}

.en-dash:after {
  content: "\2013";
}

.link_btn_preview_inner_wrapper {
}

.ultra_hyperlink {
  text-decoration: none;
  padding: 20px;
  background: #292929;
  border-radius: 5px;
  font-size: 1rem;
  font-family: var(--embed-body-font);
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  transition: background 0.3s;
  user-select: none;
}

.ultra_hyperlink:hover {
  background: #3f3f3f;
}

.ultra_hyperlink span {
  text-decoration: underline;
  font-size: 0.875rem;
}

.bullet_preview_inner_wrapper {
  color: #000000;
}

.list_block {
  padding: 20px;
  background: #f9f9f9;
  border-radius: 5px;
  border: 1px solid #dddddd;
  font-size: 0.875rem;
  font-family: var(--embed-body-font);
  font-weight: 400;
  line-height: 1.5;
  color: #262626;
}

.list_block_anti {
  padding: unset;
  background: unset !important;
  border: unset !important;
}

.list_block .title {
  font-size: 1em;
}

.list_block a {
  color: #2075a3;
  line-height: inherit;
  text-decoration: underline;
}

.list_block li {
  margin-top: 8px;
}

.list_block.focus {
  border-radius: 12px;
  padding: 18px;
  border: 3px dashed #ccc;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.highlight {
  position: relative;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  background-color: var(--background-color); 
  font-size: 0.875rem;
  font-family: var(--embed-body-font);
  font-weight: 400;
  line-height: 160%;
  color: #262626;
  margin: 20px 0;
}
.highlight.focus {
  border-radius: 12px;
  border: 3px dashed var(--border-color);
}
.highlight.big {
  font-size: 1.3em;
}
.highlight.center {
  text-align: center;
}
.highlight .title {
  font-size: 1em;
  font-weight: bold;
}
.highlight li {
  margin-top: 8px;
}
.highlight.quiz {
  padding: 26px 20px;
  font-style: italic;
}
.highlight.quiz::before,
.highlight.quiz::after {
  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='10px' y='10px' viewBox='0 0 1000 1000' style='enable-background:new 0 0 1000 1000;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bopacity:0.2;%7D%0A%3C/style%3E%3Cg class='st0'%3E%3Cpolygon points='497.34,806.25 475.13,806.25 475.13,828.46 475.13,977.79 475.13,1000 497.34,1000 646.68,1000 668.88,1000 668.88,977.79 668.88,828.46 668.88,806.25 646.68,806.25 '/%3E%3Cpath d='M787.87,199.81c-27.5-24.32-60.11-42.78-96.93-54.88c-36.18-11.89-77.36-17.92-122.38-17.92 c-42.97,0-82.52,5.98-117.56,17.77c-35.57,11.97-67.39,30.21-94.57,54.23c-54.48,48.13-84.26,107.62-88.51,176.84l-1.28,20.83 l20.71,2.57l137.11,17.01l20.15,2.5l4.29-19.85c8.46-39.18,23.69-68.32,45.26-86.59c21.57-18.27,47.99-27.15,80.77-27.15 c33.98,0,59.83,8.32,79.01,25.44c18.42,16.47,27.38,35.47,27.38,58.1c0,16.04-4.94,30.4-15.09,43.9 c-4.3,5.5-19.7,21.34-74.49,65.88c-46.43,37.75-76.82,71.36-92.91,102.76c-16.08,31.37-24.23,71.25-24.23,118.54 c0,4.57,0.18,16.69,0.54,36.01l0.4,21.8h21.81h135.51h22.6l-0.39-22.6c-0.85-49.07,4.77-68.42,8.2-75.59 c4.25-8.91,16.88-25.81,52.88-55.74c63.35-52.67,103.87-93.66,123.88-125.31c20.79-32.86,31.34-68.33,31.34-105.4 C871.36,307.09,843.27,248.83,787.87,199.81z'/%3E%3C/g%3E%3Cg%3E%3Cpolygon points='429.18,740.4 406.97,740.4 406.97,762.61 406.97,911.94 406.97,934.15 429.18,934.15 578.51,934.15 600.72,934.15 600.72,911.94 600.72,762.61 600.72,740.4 578.51,740.4 '/%3E%3Cpath d='M719.7,133.96c-27.5-24.32-60.11-42.78-96.93-54.88c-36.18-11.89-77.36-17.92-122.38-17.92 c-42.97,0-82.52,5.98-117.56,17.77c-35.57,11.97-67.39,30.21-94.57,54.23C233.78,181.29,204,240.78,199.75,310l-1.28,20.83 l20.71,2.57l137.11,17.01l20.15,2.5l4.29-19.85c8.46-39.18,23.69-68.32,45.26-86.59c21.57-18.27,47.99-27.15,80.77-27.15 c33.98,0,59.83,8.32,79.01,25.45c18.42,16.47,27.38,35.47,27.38,58.1c0,16.04-4.94,30.4-15.09,43.9 c-4.3,5.5-19.7,21.34-74.49,65.88c-46.43,37.75-76.82,71.36-92.91,102.76c-16.08,31.37-24.23,71.25-24.23,118.54 c0,4.57,0.18,16.69,0.54,36.01l0.4,21.8h21.81h135.51h22.6l-0.39-22.6c-0.85-49.07,4.77-68.42,8.2-75.59 c4.25-8.91,16.88-25.81,52.88-55.74c63.35-52.67,103.87-93.66,123.88-125.31c20.79-32.86,31.34-68.33,31.34-105.4 C803.19,241.24,775.1,182.98,719.7,133.96z'/%3E%3C/g%3E%3C/svg%3E%0A");
  position: absolute;
  top: 0;
  left: 15px;
  width: 25px;
  height: 25px;
  padding: 6px;
  box-sizing: content-box;
  background: #fff;
  border-width: inherit;
  border-color: inherit;
  border-style: solid;
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: inset 0 0 3px 0px rgb(0 0 0 / 10%);
}
.highlight.quiz::after {
  top: unset;
  left: unset;
  bottom: 0;
  right: 15px;
  transform: translateY(50%);
}
.highlight.quote {
  padding: 26px 20px;
  font-style: italic;
}

.highlight.quote::before,
.highlight.quote::after {
  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='10px' y='10px' viewBox='0 0 1000 1000' style='enable-background:new 0 0 1000 1000;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bopacity:0.2;%7D%0A%3C/style%3E%3Cg id='dots_shadow'%3E%3Cg class='st0'%3E%3Cpath d='M514.5,915.5h-379V623.6c0-107.5,22.4-192.3,67.1-254.4c44.7-62.2,121.4-117,230-164.7l81.9,155.1 c-66.8,31.4-113,62.6-138.5,93.7c-25.6,31.1-39.8,67.8-42.7,110.2h181.2V915.5z'/%3E%3Cpath d='M1000,915.5H621V623.6c0-107.5,22.4-192.3,67.1-254.4c44.7-62.2,121.4-117,230-164.7l81.9,155.1 c-66.8,31.4-113,62.6-138.5,93.7c-25.6,31.1-39.8,67.8-42.7,110.2H1000V915.5z'/%3E%3C/g%3E%3C/g%3E%3Cg id='dots'%3E%3Cg%3E%3Cpath d='M446.4,849.5h-379V557.6c0-107.5,22.4-192.3,67.1-254.4c44.7-62.2,121.4-117,230-164.7l81.9,155.1 c-66.8,31.4-113,62.6-138.5,93.7c-25.6,31.1-39.8,67.8-42.7,110.2h181.2V849.5z'/%3E%3Cpath d='M931.9,849.5h-379V557.6c0-107.5,22.4-192.3,67.1-254.4c44.7-62.2,121.4-117,230-164.7l81.9,155.1 c-66.8,31.4-113,62.6-138.5,93.7c-25.6,31.1-39.8,67.8-42.7,110.2h181.2V849.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  position: absolute;
  top: -15px;
  left: 15px;
  width:35px;
  height:35px;
}

.highlight.quote::after {
  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 1000' style='enable-background:new 0 0 1000 1000;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bopacity:0.2;%7D%0A%3C/style%3E%3Cg id='dots_shadow'%3E%3Cg class='st0'%3E%3Cpath d='M621,226.5h379v291.9c0,107.5-22.4,192.3-67.1,254.4c-44.7,62.2-121.4,117-230,164.7L621,782.4 c66.8-31.4,113-62.6,138.5-93.7c25.6-31.1,39.8-67.8,42.7-110.2H621V226.5z'/%3E%3Cpath d='M135.5,226.5h379v291.9c0,107.5-22.4,192.3-67.1,254.4c-44.7,62.2-121.4,117-230,164.7l-81.9-155.1 c66.8-31.4,113-62.6,138.5-93.7c25.6-31.1,39.8-67.8,42.7-110.2H135.5V226.5z'/%3E%3C/g%3E%3C/g%3E%3Cg id='dots'%3E%3Cg%3E%3Cpath d='M552.8,160.5h379v291.9c0,107.5-22.4,192.3-67.1,254.4c-44.7,62.2-121.4,117-230,164.7l-81.9-155.1 c66.8-31.4,113-62.6,138.5-93.7c25.6-31.1,39.8-67.8,42.7-110.2H552.8V160.5z'/%3E%3Cpath d='M67.4,160.5h379v291.9c0,107.5-22.4,192.3-67.1,254.4c-44.7,62.2-121.4,117-230,164.7L67.4,716.4 c66.8-31.4,113-62.6,138.5-93.7c25.6-31.1,39.8-67.8,42.7-110.2H67.4V160.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  top: unset;
  left: unset;
  bottom: -15px;
  right: 15px;
}

.highlight.tip{
  border-color: var(--border-color);
  border-radius:10px;
  box-shadow:inset 0 0 0 2px white, inset 0 0 3px 1px var(--border-color);
  padding-top:30px;
}

.highlight.tip::before{
  content: 'Quick Tip';
  position: absolute;
  display: block;
  top: 1px;
  left: 8px;
  width: fit-content;
  margin-bottom: 12px;
  padding: 10px 26px 10px 12px;
  font-size: 1.25em;
  font-weight: 600;
  font-style: italic;
  line-height: .9em;
  background-color:white;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 410.13 979.68'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23231f20; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M15,583.41l148.6-.12L28.12,954.56c-7.65,20.97,21.37,35.18,33.24,16.28L407.81,419.19c6.26-9.97-.91-22.92-12.68-22.92l-148.6,.12L382.01,25.12c7.65-20.97-21.37-35.18-33.24-16.28L2.32,560.49c-6.26,9.97,.91,22.92,12.68,22.92Z'/%3E%3C/svg%3E");
  background-position: calc(100% - 13px) center;
  background-repeat: no-repeat;
  background-size: auto 57%;
  border-radius:50px;
  transform:translateY(-50%);
  border-width: inherit;
  border-color: inherit;
  border-style: solid;  
  white-space: nowrap;
}

.highlight a {
  color: #2075a3;
  line-height: inherit;
  text-decoration: underline;
}

.highlight .attribution {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
  color: #444;
  text-align: right;
  font-size: 14px;
  font-style: normal;
  margin-bottom: -6px;
}

.highlight .attribution.left {
  text-align: left;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.nextsteps {
  position: relative;
  padding: 20px 20px 10px 20px;
  font-size: 0.875rem;
  font-family: var(--embed-body-font);
  font-weight: 400;
  line-height: 160%;
  color: #262626;
  margin: 0 20px 0 0;
  border-radius: 14px;
  width: 100%;
  box-sizing: border-box;
  background-color: rgb(33 153 72 / 15%);
  box-shadow: 0 0 0 4px inset #ffffff, 0 0 6px 3px inset rgb(33 153 72 / 75%);
  border: 3px dashed rgb(33 153 72 / 75%);
}

.nextsteps svg {
  display: inline-block;
  width: 60px;
  filter: drop-shadow(2px 2px 0 rgb(200 200 200));
  vertical-align: bottom;
}

.nextsteps .title {
  font-size: 130%;
  font-weight: 700;
  font-style: italic;
  display: inline-block;
  vertical-align: bottom;
  margin-right: 6px;
}

.nextsteps a {
  color: #2075a3;
  line-height: inherit;
  text-decoration: underline;
}

.nextsteps li {
  list-style-type: disc;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.divider {
  width: 100%;
  border-bottom: 1px solid #333;
  margin: 40px 0;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.title_block {
  position: relative;
  width: 100%;
  font-family: Montserrat, sans-serif;
  font-size: 2.5em;
  font-weight: 300;
  background: linear-gradient(90deg, rgb(76 141 203 / 20%), rgb(76 141 203 / 10%));
  border-radius: 3px 3px 0 0;
  margin: 30px 0 40px 0;
  min-height: calc(1.4em + 30px);
  color: #232323;
  border-color: rgb(30 30 30);
  box-sizing: border-box;
  padding: 30px;
}

.title_block.section{
  margin-top: calc(30px + 0.3125em);
  padding-top: calc(30px + 0.3125em);
}

.title_block::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  border-right: 1px solid rgb(0 0 0 / 15%);
  border-radius: inherit;
}

.title_block::after {
  content:'';
  display: block;
  position: absolute;
  width: 100%;
  height: 10px;
  bottom: -10px;
  left: 0;
  background-color: var(--accent-color);
  border-radius: 0 0 3px 3px;
}

.title_block.section .section{
  position: absolute;
  top:0;
  left:0;
  padding:10px 30px;
  font-size: 50%;
  font-weight: 300;
  border-radius:3px 3px 3px 0;
  background-color:var(--accent-color);
  transform:translateY(-50%);
  color:#ffffff;
}

.title_block .subtitle{
  display:block;
  font-size:60%;
  opacity:70%;
  margin-top:.5em;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.heading_block {
  position: relative;
  width: calc(100% - 1px);
  font-family: Montserrat, sans-serif;
  padding: 15px 30px;
  font-size: 160%;
  font-weight: 300;
  background: linear-gradient(90deg, #efefef, #efefef66);
  border-radius: 3px;
  margin: 30px 0;
  min-height: calc(1.4em + 30px);
  color: #232323;
  border-color: rgb(30 30 30);
  box-sizing: border-box;
}

.heading_block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-bottom: 1px solid rgb(0 0 0 / 15%);
  border-right: 1px solid rgb(0 0 0 / 15%);
  border-radius: inherit;
}

.heading_block .subtitle {
  display: block;
  font-size: 80%;
  font-weight: 300;
  margin-top: 0.5em;
  opacity: 0.75;
}

.heading_block.accent {
  padding: 15px 70px 15px 30px;
}

.heading_block .marker {
  display: none;
}

.heading_block.accent .marker {
  display: block;
  position: absolute;
  width: fit-content;
  min-width:40px;
  height: calc(100% - 4px);
  top: -3px;
  right: 10px;
  padding:10px 5px 0 5px;
  box-sizing:border-box;
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  border-radius: 2px 5px 0 0;
  z-index: 1;
  filter: dropshadow();
  font-size: 1em;
  color: #ffffff;
  text-align:center;
}

.heading_block.accent .marker::before{
  content: "";
  position: absolute;
  bottom: -19px;
  left: 0;
  width:100%;
  height:20px;
  background-color: inherit;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 0%, 0% 100%);
}

.heading_block.accent .marker div {
  position:relative;
  display:inline-block;
  width:fit-content;
  font-weight: bold;
  padding: 0 0px 2px 0px;
}

.heading_block.accent .marker div::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(100%);
  border: 1px solid;
  border-color: inherit;
  background: rgb(0 0 0 / 20%);
  border-radius: 1px;
  opacity: 20%;
  transform: translateX(-50%);
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.k_wrap {
  position: relative;
  width: 100%;
  padding-top: calc(56.25%);
  margin-bottom: 20px;
  border-radius: 5px;
  overflow: hidden;
}

.k_wrap iframe,
.k_wrap video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border:none;
}

.k_wrap::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  box-shadow: inset 0 0 10px #00000011;
  border-radius: 4px;
}

/* End Preview Styles */