.jsx .CssToolTemplate {

  --jsx--css-clean-start-2--all-tags--font-family: LibreFranklin, "Franklin Gothic Medium", Tahoma, Verdana;



  
  


  
  
}






@media only screen and (min-width: 2px) and (max-width: 239px) and (min-height: 2px) and (max-height: 99999px) and (orientation: portrait) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_d05_very_small_xxs_portrait;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_d05_very_small_xxs_portrait__CssToolTemplate__theme_base;
  }
}

@media only screen and (min-width: 2px) and (max-width: 99999px) and (min-height: 2px) and (max-height: 239px) and (orientation: landscape) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_d05_very_small_xxs_landscape;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_d05_very_small_xxs_landscape__CssToolTemplate__theme_base;
  }
}


@media only screen and (min-width: 240px) and (max-width: 320px) and (min-height: 240px) and (max-height: 99999px) and (orientation: portrait) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_e02_mobile_xs_portrait;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_e02_mobile_xs_portrait__CssToolTemplate__theme_base;
  }
}

@media only screen and (min-width: 240px) and (max-width: 99999px) and (min-height: 240px) and (max-height: 320px) and (orientation: landscape) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_e02_mobile_xs_landscape;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_e02_mobile_xs_landscape__CssToolTemplate__theme_base;
  }
}


@media only screen and (min-width: 321px) and (max-width: 375px) and (min-height: 321px) and (max-height: 99999px) and (orientation: portrait) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_e04_mobile_s_portrait;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_e04_mobile_s_portrait__CssToolTemplate__theme_base;
  }
}

@media only screen and (min-width: 321px) and (max-width: 99999px) and (min-height: 321px) and (max-height: 375px) and (orientation: landscape) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_e04_mobile_s_landscape;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_e04_mobile_s_landscape__CssToolTemplate__theme_base;
  }
}


@media only screen and (min-width: 376px) and (max-width: 430px) and (min-height: 376px) and (max-height: 99999px) and (orientation: portrait) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_e06_mobile_sm_portrait;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_e06_mobile_sm_portrait__CssToolTemplate__theme_base;
  }
}

@media only screen and (min-width: 376px) and (max-width: 99999px) and (min-height: 376px) and (max-height: 430px) and (orientation: landscape) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_e06_mobile_sm_landscape;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_e06_mobile_sm_landscape__CssToolTemplate__theme_base;
  }
}


@media only screen and (min-width: 431px) and (max-width: 480px) and (min-height: 431px) and (max-height: 99999px) and (orientation: portrait) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_e08_mobile_md_portrait;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_e08_mobile_md_portrait__CssToolTemplate__theme_base;
  }
}

@media only screen and (min-width: 431px) and (max-width: 99999px) and (min-height: 431px) and (max-height: 480px) and (orientation: landscape) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_e08_mobile_md_landscape;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_e08_mobile_md_landscape__CssToolTemplate__theme_base;
  }
}


@media only screen and (min-width: 481px) and (max-width: 767px) and (min-height: 481px) and (max-height: 99999px) and (orientation: portrait) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_h03_tablet_s_portrait;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_h03_tablet_s_portrait__CssToolTemplate__theme_base;
  }
}

@media only screen and (min-width: 481px) and (max-width: 99999px) and (min-height: 481px) and (max-height: 767px) and (orientation: landscape) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_h03_tablet_s_landscape;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_h03_tablet_s_landscape__CssToolTemplate__theme_base;
  }
}


@media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 768px) and (max-height: 1024px) and (orientation: portrait) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_h05_tablet_sm_portrait;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_h05_tablet_sm_portrait__CssToolTemplate__theme_base;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 768px) and (max-height: 1024px) and (orientation: landscape) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_h05_tablet_sm_landscape;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_h05_tablet_sm_landscape__CssToolTemplate__theme_base;
  }
}


@media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 1025px) and (max-height: 1194px) and (orientation: portrait) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_h07_tablet_md_portrait;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_h07_tablet_md_portrait__CssToolTemplate__theme_base;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1194px) and (min-height: 768px) and (max-height: 1024px) and (orientation: landscape) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_h07_tablet_md_landscape;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_h07_tablet_md_landscape__CssToolTemplate__theme_base;
  }
}


@media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 1195px) and (max-height: 99999px) and (orientation: portrait) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_h09_tablet_lg_portrait;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_h09_tablet_lg_portrait__CssToolTemplate__theme_base;
  }
}

@media only screen and (min-width: 1195px) and (max-width: 99999px) and (min-height: 768px) and (max-height: 1024px) and (orientation: landscape) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_h09_tablet_lg_landscape;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_h09_tablet_lg_landscape__CssToolTemplate__theme_base;
  }
}


@media only screen and (min-width: 1025px) and (max-width: 1365px) and (min-height: 1025px) and (max-height: 1365px) and (orientation: portrait) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_l02_laptop_sm_portrait;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_l02_laptop_sm_portrait__CssToolTemplate__theme_base;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1365px) and (min-height: 1025px) and (max-height: 1365px) and (orientation: landscape) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_l02_laptop_sm_landscape;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_l02_laptop_sm_landscape__CssToolTemplate__theme_base;
  }
}


@media only screen and (min-width: 1025px) and (max-width: 1440px) and (min-height: 1366px) and (max-height: 1440px) and (orientation: portrait) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_l03_laptop_md_portrait;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_l03_laptop_md_portrait__CssToolTemplate__theme_base;
  }
}

@media only screen and (min-width: 1366px) and (max-width: 1440px) and (min-height: 1025px) and (max-height: 1440px) and (orientation: landscape) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_l03_laptop_md_landscape;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_l03_laptop_md_landscape__CssToolTemplate__theme_base;
  }
}


@media only screen and (min-width: 1025px) and (max-width: 1600px) and (min-height: 1441px) and (max-height: 1600px) and (orientation: portrait) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_l07_laptop_lg_portrait;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_l07_laptop_lg_portrait__CssToolTemplate__theme_base;
  }
}

@media only screen and (min-width: 1441px) and (max-width: 1600px) and (min-height: 1025px) and (max-height: 1600px) and (orientation: landscape) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_l07_laptop_lg_landscape;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_l07_laptop_lg_landscape__CssToolTemplate__theme_base;
  }
}


@media only screen and (min-width: 1025px) and (max-width: 1920px) and (min-height: 1601px) and (max-height: 1920px) and (orientation: portrait) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_s02_display_xl_portrait;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_s02_display_xl_portrait__CssToolTemplate__theme_base;
  }
}

@media only screen and (min-width: 1601px) and (max-width: 1920px) and (min-height: 1025px) and (max-height: 1920px) and (orientation: landscape) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_s02_display_xl_landscape;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_s02_display_xl_landscape__CssToolTemplate__theme_base;
  }
}


@media only screen and (min-width: 1025px) and (max-width: 2560px) and (min-height: 1921px) and (max-height: 2560px) and (orientation: portrait) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_s04_display_xxl_portrait;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_s04_display_xxl_portrait__CssToolTemplate__theme_base;
  }
}

@media only screen and (min-width: 1921px) and (max-width: 2560px) and (min-height: 1025px) and (max-height: 2560px) and (orientation: landscape) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_s04_display_xxl_landscape;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_s04_display_xxl_landscape__CssToolTemplate__theme_base;
  }
}


@media only screen and (min-width: 1025px) and (max-width: 3840px) and (min-height: 2561px) and (max-height: 3840px) and (orientation: portrait) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_s08_display_qhd_portrait;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_s08_display_qhd_portrait__CssToolTemplate__theme_base;
  }
}

@media only screen and (min-width: 2561px) and (max-width: 3840px) and (min-height: 1025px) and (max-height: 3840px) and (orientation: landscape) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_s08_display_qhd_landscape;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_s08_display_qhd_landscape__CssToolTemplate__theme_base;
  }
}


@media only screen and (min-width: 1025px) and (max-width: 7680px) and (min-height: 3841px) and (max-height: 7680px) and (orientation: portrait) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_t04_tv_4k_portrait;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_t04_tv_4k_portrait__CssToolTemplate__theme_base;
  }
}

@media only screen and (min-width: 3841px) and (max-width: 7680px) and (min-height: 1025px) and (max-height: 7680px) and (orientation: landscape) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_t04_tv_4k_landscape;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_t04_tv_4k_landscape__CssToolTemplate__theme_base;
  }
}


@media only screen and (min-width: 1025px) and (max-width: 15360px) and (min-height: 7681px) and (max-height: 15360px) and (orientation: portrait) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_t08_tv_8k_portrait;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_t08_tv_8k_portrait__CssToolTemplate__theme_base;
  }
}

@media only screen and (min-width: 7681px) and (max-width: 15360px) and (min-height: 1025px) and (max-height: 15360px) and (orientation: landscape) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_t08_tv_8k_landscape;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_t08_tv_8k_landscape__CssToolTemplate__theme_base;
  }
}


@media only screen and (min-width: 1025px) and (max-width: 25360px) and (min-height: 15361px) and (max-height: 25360px) and (orientation: portrait) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_t16_tv_16k_portrait;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_t16_tv_16k_portrait__CssToolTemplate__theme_base;
  }
}

@media only screen and (min-width: 15361px) and (max-width: 25360px) and (min-height: 1025px) and (max-height: 25360px) and (orientation: landscape) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_t16_tv_16k_landscape;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_t16_tv_16k_landscape__CssToolTemplate__theme_base;
  }
}


@media only screen and (min-width: 1025px) and (max-width: 999999px) and (min-height: 25361px) and (max-height: 999999px) and (orientation: portrait) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_t99_tv_xxxl_portrait;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_t99_tv_xxxl_portrait__CssToolTemplate__theme_base;
  }
}

@media only screen and (min-width: 25361px) and (max-width: 999999px) and (min-height: 1025px) and (max-height: 999999px) and (orientation: landscape) {

  .jsx .CssToolTemplate {
    --theme_name: CssToolTemplate__theme_base;
    --theme_name__CssToolTemplate: theme_base;
    --responsive_size: responsive_size_t99_tv_xxxl_landscape;
    --responsive_size__CssToolTemplate__theme_base: responsive_size_t99_tv_xxxl_landscape__CssToolTemplate__theme_base;
  }
}


.jsx .CssToolTemplate.theme_layout_example {

  



  
  --jsx--CssToolTemplate--toolHtmlElement--font-size: 1rem;


  
  



  --jsx--CssToolTemplate--toolHtmlElement--margin: 1rem 0 1rem 0;

  --jsx--CssToolTemplate--toolHtmlElement--padding: 1rem 0 1rem 0;
  --jsx--CssToolTemplate--toolHtmlElement--class1--padding: 1rem;

  --jsx--CssToolTemplate--toolHtmlElement--class1--font-size: 1.2rem;

}









@media only screen and (min-width: 2px) and (max-width: 239px) and (min-height: 2px) and (max-height: 99999px) and (orientation: portrait) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_d05_very_small_xxs_portrait;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_d05_very_small_xxs_portrait__CssToolTemplate__theme_layout_example;
  }
}

@media only screen and (min-width: 2px) and (max-width: 99999px) and (min-height: 2px) and (max-height: 239px) and (orientation: landscape) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_d05_very_small_xxs_landscape;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_d05_very_small_xxs_landscape__CssToolTemplate__theme_layout_example;
  }
}


@media only screen and (min-width: 240px) and (max-width: 320px) and (min-height: 240px) and (max-height: 99999px) and (orientation: portrait) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_e02_mobile_xs_portrait;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_e02_mobile_xs_portrait__CssToolTemplate__theme_layout_example;
  }
}

@media only screen and (min-width: 240px) and (max-width: 99999px) and (min-height: 240px) and (max-height: 320px) and (orientation: landscape) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_e02_mobile_xs_landscape;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_e02_mobile_xs_landscape__CssToolTemplate__theme_layout_example;
  }
}


@media only screen and (min-width: 321px) and (max-width: 375px) and (min-height: 321px) and (max-height: 99999px) and (orientation: portrait) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_e04_mobile_s_portrait;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_e04_mobile_s_portrait__CssToolTemplate__theme_layout_example;
  }
}

@media only screen and (min-width: 321px) and (max-width: 99999px) and (min-height: 321px) and (max-height: 375px) and (orientation: landscape) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_e04_mobile_s_landscape;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_e04_mobile_s_landscape__CssToolTemplate__theme_layout_example;
  }
}


@media only screen and (min-width: 376px) and (max-width: 430px) and (min-height: 376px) and (max-height: 99999px) and (orientation: portrait) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_e06_mobile_sm_portrait;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_e06_mobile_sm_portrait__CssToolTemplate__theme_layout_example;
  }
}

@media only screen and (min-width: 376px) and (max-width: 99999px) and (min-height: 376px) and (max-height: 430px) and (orientation: landscape) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_e06_mobile_sm_landscape;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_e06_mobile_sm_landscape__CssToolTemplate__theme_layout_example;
  }
}


@media only screen and (min-width: 431px) and (max-width: 480px) and (min-height: 431px) and (max-height: 99999px) and (orientation: portrait) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_e08_mobile_md_portrait;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_e08_mobile_md_portrait__CssToolTemplate__theme_layout_example;
  }
}

@media only screen and (min-width: 431px) and (max-width: 99999px) and (min-height: 431px) and (max-height: 480px) and (orientation: landscape) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_e08_mobile_md_landscape;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_e08_mobile_md_landscape__CssToolTemplate__theme_layout_example;
  }
}


@media only screen and (min-width: 481px) and (max-width: 767px) and (min-height: 481px) and (max-height: 99999px) and (orientation: portrait) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_h03_tablet_s_portrait;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_h03_tablet_s_portrait__CssToolTemplate__theme_layout_example;
  }
}

@media only screen and (min-width: 481px) and (max-width: 99999px) and (min-height: 481px) and (max-height: 767px) and (orientation: landscape) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_h03_tablet_s_landscape;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_h03_tablet_s_landscape__CssToolTemplate__theme_layout_example;
  }
}


@media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 768px) and (max-height: 1024px) and (orientation: portrait) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_h05_tablet_sm_portrait;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_h05_tablet_sm_portrait__CssToolTemplate__theme_layout_example;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 768px) and (max-height: 1024px) and (orientation: landscape) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_h05_tablet_sm_landscape;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_h05_tablet_sm_landscape__CssToolTemplate__theme_layout_example;
  }
}


@media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 1025px) and (max-height: 1194px) and (orientation: portrait) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_h07_tablet_md_portrait;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_h07_tablet_md_portrait__CssToolTemplate__theme_layout_example;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1194px) and (min-height: 768px) and (max-height: 1024px) and (orientation: landscape) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_h07_tablet_md_landscape;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_h07_tablet_md_landscape__CssToolTemplate__theme_layout_example;
  }
}


@media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 1195px) and (max-height: 99999px) and (orientation: portrait) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_h09_tablet_lg_portrait;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_h09_tablet_lg_portrait__CssToolTemplate__theme_layout_example;
  }
}

@media only screen and (min-width: 1195px) and (max-width: 99999px) and (min-height: 768px) and (max-height: 1024px) and (orientation: landscape) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_h09_tablet_lg_landscape;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_h09_tablet_lg_landscape__CssToolTemplate__theme_layout_example;
  }
}


@media only screen and (min-width: 1025px) and (max-width: 1365px) and (min-height: 1025px) and (max-height: 1365px) and (orientation: portrait) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_l02_laptop_sm_portrait;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_l02_laptop_sm_portrait__CssToolTemplate__theme_layout_example;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1365px) and (min-height: 1025px) and (max-height: 1365px) and (orientation: landscape) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_l02_laptop_sm_landscape;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_l02_laptop_sm_landscape__CssToolTemplate__theme_layout_example;
  }
}


@media only screen and (min-width: 1025px) and (max-width: 1440px) and (min-height: 1366px) and (max-height: 1440px) and (orientation: portrait) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_l03_laptop_md_portrait;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_l03_laptop_md_portrait__CssToolTemplate__theme_layout_example;
  }
}

@media only screen and (min-width: 1366px) and (max-width: 1440px) and (min-height: 1025px) and (max-height: 1440px) and (orientation: landscape) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_l03_laptop_md_landscape;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_l03_laptop_md_landscape__CssToolTemplate__theme_layout_example;
  }
}


@media only screen and (min-width: 1025px) and (max-width: 1600px) and (min-height: 1441px) and (max-height: 1600px) and (orientation: portrait) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_l07_laptop_lg_portrait;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_l07_laptop_lg_portrait__CssToolTemplate__theme_layout_example;
  }
}

@media only screen and (min-width: 1441px) and (max-width: 1600px) and (min-height: 1025px) and (max-height: 1600px) and (orientation: landscape) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_l07_laptop_lg_landscape;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_l07_laptop_lg_landscape__CssToolTemplate__theme_layout_example;
  }
}


@media only screen and (min-width: 1025px) and (max-width: 1920px) and (min-height: 1601px) and (max-height: 1920px) and (orientation: portrait) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_s02_display_xl_portrait;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_s02_display_xl_portrait__CssToolTemplate__theme_layout_example;
  }
}

@media only screen and (min-width: 1601px) and (max-width: 1920px) and (min-height: 1025px) and (max-height: 1920px) and (orientation: landscape) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_s02_display_xl_landscape;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_s02_display_xl_landscape__CssToolTemplate__theme_layout_example;
  }
}


@media only screen and (min-width: 1025px) and (max-width: 2560px) and (min-height: 1921px) and (max-height: 2560px) and (orientation: portrait) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_s04_display_xxl_portrait;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_s04_display_xxl_portrait__CssToolTemplate__theme_layout_example;
  }
}

@media only screen and (min-width: 1921px) and (max-width: 2560px) and (min-height: 1025px) and (max-height: 2560px) and (orientation: landscape) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_s04_display_xxl_landscape;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_s04_display_xxl_landscape__CssToolTemplate__theme_layout_example;
  }
}


@media only screen and (min-width: 1025px) and (max-width: 3840px) and (min-height: 2561px) and (max-height: 3840px) and (orientation: portrait) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_s08_display_qhd_portrait;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_s08_display_qhd_portrait__CssToolTemplate__theme_layout_example;
  }
}

@media only screen and (min-width: 2561px) and (max-width: 3840px) and (min-height: 1025px) and (max-height: 3840px) and (orientation: landscape) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_s08_display_qhd_landscape;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_s08_display_qhd_landscape__CssToolTemplate__theme_layout_example;
  }
}


@media only screen and (min-width: 1025px) and (max-width: 7680px) and (min-height: 3841px) and (max-height: 7680px) and (orientation: portrait) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_t04_tv_4k_portrait;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_t04_tv_4k_portrait__CssToolTemplate__theme_layout_example;
  }
}

@media only screen and (min-width: 3841px) and (max-width: 7680px) and (min-height: 1025px) and (max-height: 7680px) and (orientation: landscape) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_t04_tv_4k_landscape;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_t04_tv_4k_landscape__CssToolTemplate__theme_layout_example;
  }
}


@media only screen and (min-width: 1025px) and (max-width: 15360px) and (min-height: 7681px) and (max-height: 15360px) and (orientation: portrait) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_t08_tv_8k_portrait;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_t08_tv_8k_portrait__CssToolTemplate__theme_layout_example;
  }
}

@media only screen and (min-width: 7681px) and (max-width: 15360px) and (min-height: 1025px) and (max-height: 15360px) and (orientation: landscape) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_t08_tv_8k_landscape;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_t08_tv_8k_landscape__CssToolTemplate__theme_layout_example;
  }
}


@media only screen and (min-width: 1025px) and (max-width: 25360px) and (min-height: 15361px) and (max-height: 25360px) and (orientation: portrait) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_t16_tv_16k_portrait;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_t16_tv_16k_portrait__CssToolTemplate__theme_layout_example;
  }
}

@media only screen and (min-width: 15361px) and (max-width: 25360px) and (min-height: 1025px) and (max-height: 25360px) and (orientation: landscape) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_t16_tv_16k_landscape;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_t16_tv_16k_landscape__CssToolTemplate__theme_layout_example;
  }
}


@media only screen and (min-width: 1025px) and (max-width: 999999px) and (min-height: 25361px) and (max-height: 999999px) and (orientation: portrait) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_t99_tv_xxxl_portrait;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_t99_tv_xxxl_portrait__CssToolTemplate__theme_layout_example;
  }
}

@media only screen and (min-width: 25361px) and (max-width: 999999px) and (min-height: 1025px) and (max-height: 999999px) and (orientation: landscape) {

  .jsx .CssToolTemplate.theme_layout_example {
    --theme_name: CssToolTemplate__theme_layout_example;
    --theme_name__CssToolTemplate: theme_layout_example;
    --responsive_size: responsive_size_t99_tv_xxxl_landscape;
    --responsive_size__CssToolTemplate__theme_layout_example: responsive_size_t99_tv_xxxl_landscape__CssToolTemplate__theme_layout_example;
  }
}


.jsx .CssToolTemplate.color_theme_navy {

  --jsx--css-clean-start-2--all-tags--color: white;



  --jsx--CssToolTemplate--main--background-color: navy;
  --jsx--CssToolTemplate--main--color: white;

  --jsx--CssToolTemplate--toolHtmlElement--class1--background-color: steelblue;
  --jsx--CssToolTemplate--toolHtmlElement--class1--color: aqua;

}




.jsx .CssToolTemplate.color_theme_green_grey {

  --jsx--css-clean-start-2--all-tags--color: white;



  --jsx--CssToolTemplate--main--background-color: darkgreen;
  --jsx--CssToolTemplate--main--color: white;

  --jsx--CssToolTemplate--toolHtmlElement--class1--background-color: green;
  --jsx--CssToolTemplate--toolHtmlElement--class1--color: lime;

}





.jsx .CssToolTemplate {
  background-color: var(--jsx--CssToolTemplate--main--background-color);
  color:            var(--jsx--CssToolTemplate--main--color);

  padding:          var(--jsx--CssToolTemplate--toolHtmlElement--padding);
  margin:           var(--jsx--CssToolTemplate--toolHtmlElement--margin);
  width:            var(--jsx--CssToolTemplate--toolHtmlElement--width);
}



.jsx .CssToolTemplate .toolHtmlElement.class1 {

  font-size: var(--jsx--CssToolTemplate--toolHtmlElement--class1--font-size);
  padding:   var(--jsx--CssToolTemplate--toolHtmlElement--class1--padding);



  background-color: var(--jsx--CssToolTemplate--toolHtmlElement--class1--background-color);
  color:            var(--jsx--CssToolTemplate--toolHtmlElement--class1--color);

}

.jsx .CssToolTemplate .toolHtmlElement.class2 {

}