.tr_form {
  font-size: 1rem;
  max-width: 80ch;
  color: var(--wp--preset--color--primary);
  --wp--preset--color--textcolor:var(--wp--preset--color--primary);
}
.tr_form label, .tr_form fieldset legend { font-size:1rem; float:left }
.tr_form form {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-line-pack: end;
      align-content: flex-end;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5em;
}
.tr_form form>div {
  text-align: center;
  max-width: 50%;
}
.tr_form form>div>label {
  display: block;
}
.tr_form form>.wp-block-button {
  margin: 0 0  0 auto;
}

.tr_form .has-icon {position: relative;}
.tr_form .has-icon .baseicon{ position:absolute; z-index:1; left:0.45em; top:0.45em; background-color: var(--root--preset--color--secondary); }
.tr_form .has-icon .baseicon + input {padding:0.7em 1.33em 0.7em 3em}
.tr_form .has-icon input + .unit {position: absolute; right: 0.7em; top: 0.7em;}

.tr_form .notice{
  border: 5px solid var(--wp--preset--color--secondary);
  padding: 2em;
  border-radius: 1em;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  max-width: none;
}
.tr_form .notice .wp-element-select {max-width: 30ch}

.tr_form .checkboxes {padding-left: 0.85em}
.tr_form .checkboxes>label {display: inline-block;}

.tr_form [type=submit] {
  margin: auto;
  font-weight: bold;
  font-size: 1.25em;
}
.tr_form [role=tablist] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.tr_form [role=tab] {
  padding: 0.5em 1em;
  border: none;
  cursor: pointer;
  font-weight: bold;
  font-size: inherit;
  color: inherit;
  background-color: var(--wp--preset--color--tertiary);
}

.tr_form [role=tab][aria-selected=false]:not(:first-child):not(:hover) {
  -webkit-box-shadow: inset 0.5em -0.25em 0.5em -0.5em rgba(0, 0, 0, 0.5);
          box-shadow: inset 0.5em -0.25em 0.5em -0.5em rgba(0, 0, 0, 0.5);
}
.tr_form [role=tab][aria-selected=true], .tr_form [role=tab][aria-selected=false]:hover {
  background-color: var(--wp--preset--color--white);
}
.tr_form [role=tabpanel] {
  display: none;
  background-color: var(--wp--preset--color--white);
  -webkit-box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.5);
          box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.5);
  padding: 1.5em;
  border-radius: 2em;
  border-top-left-radius: 0;
}


.tr_form [role=tabpanel].active {
  display: block;
}
.tr_form [role=radiogroup] .baseicon.bg {
  font-size: 1.2rem;
  color: var(--wp--preset--color--primary-dark);
  background-color: var(--wp--preset--color--secondary);
}
.tr_form [role=radiogroup] {
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.2em;
}
.tr_form [role=radiogroup] legend {
  display: block;
}
.tr_form [role=radiogroup] label {
  font-size: 1.5rem;
  cursor: pointer;
  display: inline-block;
}
.tr_form [role=radiogroup] input {
  position: absolute;
  opacity: 0;
}
.tr_form [role=radiogroup] input:checked ~ label .baseicon.bg {
  color: var(--wp--preset--color--primary-dark);
  background-color: var(--wp--preset--color--tertiary);
}
.tr_form [role=radiogroup] input:checked + label .baseicon.bg {
  color: var(--wp--preset--color--primary-dark);
  background-color: var(--wp--preset--color--secondary);
}
.tr_form [role=radiogroup] input:focus-visible + label svg {
  outline: var(--wp--custom--focus--style);
  outline-offset: var(--wp--custom--focus--offset);
}
.tr_form .errors {
  width: 100%;
  max-width: none;
  padding: 1.5em;
  color: var(--wp--preset--color--white);
  background-color: var(--wp--preset--color--error);
}
.tr_form input.invalid {
  outline: 2px solid var(--wp--preset--color--error);
}




.tr_wdc_form label, .tr_wdc_form fieldset legend { font-size:1rem }
.tr_wdc_form .togglebox.showicon>.toggleHead {padding-left: 0}
.tr_wdc_form .togglebox.showicon>.toggleHead i { top: 16px;}

.tr_wdc_form .toggleHead img {width: 100px; height: 100px; -o-object-fit: cover; object-fit: cover; vertical-align:bottom}
.tr_wdc_form [role=radiogroup] { border: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0.2em;}
.tr_wdc_form [role=radiogroup] legend {display: block;}
.tr_wdc_form [role=radiogroup] figure {display:inline-block; border:2px solid transparent; -webkit-transition: borderColor 0.5s ease; -o-transition: borderColor 0.5s ease; transition: borderColor 0.5s ease; margin: 0}
.tr_wdc_form [role=radiogroup] div{text-align: center}
.tr_wdc_form [role=radiogroup] img{width: 200px; height: 200px; -o-object-fit: cover; object-fit: cover; vertical-align:bottom }
.tr_wdc_form [role=radiogroup] label {font-size: 1.5rem;cursor: pointer;display: inline-block;}
.tr_wdc_form [role=radiogroup] .wp-element-button {font-size: 0.75rem}
.tr_wdc_form [role=radiogroup] .checkbox + label {padding:0}
.tr_wdc_form [role=radiogroup] .checkbox + label::before {left: 6px; top: 40px; z-index: 5;}
.tr_wdc_form [role=radiogroup] .checkbox + label::after  {left: 13px; top: 50px; z-index: 6;}




.tr_iframe {overflow: hidden; height: 1500px; min-width:min( 100vw, var(--wp--style--global--content-size)); max-width:100%; 
    margin-left: calc(-1 * var(--wp--style--root--padding-left)) !important; 
    margin-right: calc(-1 * var(--wp--style--root--padding-right)) !important;}



.checkbox { opacity:0; position: absolute;}
.checkbox + label {display: inline-block; position: relative; padding-left: 40px; padding-top: 4px; cursor: pointer;}
.checkbox + label::before {
  content: " ";
  display: block;
  border: 2px solid;
  border-color: var(--wp--preset--color--primary);
  background-color: var(--wp--preset--color--tertiary);
  border-radius: 50%;
  cursor: pointer;
  height: 28px;
  width: 28px;
  position: absolute;
  left: 0;
  top: 0;
}
.checkbox + label::after {
  content: " ";
  border: 4px solid var(--wp--preset--color--primary-dark);
  border-top: none;
  border-right: none;
  height: 6px;
  left: 7px;
  opacity: 0;
  position: absolute;
  top: 9px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 13px;
}
.checkbox:checked + label::before {background-color: var(--wp--preset--color--secondary);}
.checkbox:checked + label::after {opacity: 1;}

.checkbox:focus-visible + label::before{ outline: var(--wp--custom--focus--style);  outline-offset: var(--wp--custom--focus--offset); }

.tr_preview_items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    --gap:1em;
    --cols:3;
    gap: var(--gap);
}
.tr_preview_item {
  --wp--preset--color--textcolor:var(--root--preset--color--textcolor);
    padding: 2em; 
    -webkit-box-sizing: border-box; 
            box-sizing: border-box;
    width: calc( ( 100% - (( var(--cols) - 1 ) * var(--gap)) )/var(--cols) );
    background-color: var(--wp--preset--color--white);
    -webkit-box-shadow: 0 1em 1.5em -0.5em rgba(0, 0, 0, 0.25);
            box-shadow: 0 1em 1.5em -0.5em rgba(0, 0, 0, 0.25);
    color: var(--root--preset--color--textcolor);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}


.tr_item .is-content-justification-space-between .has-text-align-right{ margin-left:auto; }
.tr_item p.has-small-font-size {margin-top: 0}
.tr_item .is-content-justification-space-between {
    margin-bottom: 0.5em;
    padding-bottom:0.5em;
}
.tr_item section>.is-content-justification-space-between:not(:last-child){
    border-bottom:1px solid
}
.tr_item .wp-block-group.is-layout-flow.has-small-font-size>* {
    -webkit-margin-before: 0;
            margin-block-start: 0;
}


.tr_form .pending::before {
    content: '';
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    top: 0;
}

.tr_form .pending::after {
  content: '';
  position: absolute;
  z-index: 2;
  top:50%;
  left:50%;
  width: 46px;
  height: 46px;
  margin-left:-26px;
  margin-top:-26px;
  border:5px solid var(--wp--preset--color--secondary);
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
}

ol { counter-reset: w__reset; list-style: none;  padding-left:2em;}
ol li { counter-increment: my-awesome-counter; position: relative;}
/*ol li::marker {font-weight: bold; color: var(--wp--preset--color--secondary); margin-right: 1em}*/
ol li::before {
  content: counter(my-awesome-counter);
  font-weight: bold; color: var(--wp--preset--color--secondary); 
  position: absolute;
  left: -1.85em;
}


@-webkit-keyframes spin {
  from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  50%  { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
  to   { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin {
  from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  50%  { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
  to   { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}



@media screen and (max-width:768px){
  .tr_preview_items {--cols:2;}
}
@media screen and (max-width:660px){
  .tr_form form {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
  .tr_form form>div { text-align: center; max-width: none;}
  .tr_form form>.wp-block-button { margin:0.85em 0 auto 0 }
}

@media(max-width:525px){
  .tr_form [role=tabpanel] {border-top-right-radius: 0;}
}
@media screen and (max-width:488px){
  .tr_preview_items {--cols:1;}

  .tr_form [role=tab] {width: 100%}
  .tr_form [role=tab][aria-selected=false]:not(:first-child):not(:hover) {
  -webkit-box-shadow: inset 0em -0.5em 0.5em -0.5em rgba(0, 0, 0, 0.5);
          box-shadow: inset 0em -0.5em 0.5em -0.5em rgba(0, 0, 0, 0.5);
  }
  ::-webkit-input-placeholder {font-size: 0.75em;}*/
}