:root {
    --my-global-color-lighttext: #e0d8d8;
}

.align-left {
   float: left;
   clear: both;
}

.align-right {
   float: right;
    clear: both;
}

img.content-image {
    float: left;
    padding: 1rem;
}

div.elementor-button-wrapper > a {
    text-decoration:none !important;
}

/* Ensure bullets on home page subhead are the right color. */
/* Elementor lost its mind and won't use the assigned color without this. */
.elementor-16328 .elementor-element.elementor-element-406607b .elementor-icon-list-icon svg path {
    fill: var( --e-global-color-accent ) !important;
}

/* Products overview page */
     section.asna-products-container {
        display:flex;
        flex-direction: row;   
        flex-wrap: wrap;
        justify-content: center;
    }

    section.asna-products-container section.products {
        display:flex;
        flex-direction: row;   
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 2em;
        row-gap: 2em;
        max-width: 1500px;
        padding: 1rem; 
     }

     section.asna-products-container section.products div.product {
        max-width: 33rem;

        background-color: whitesmoke;
        padding: 1rem;
        border-radius: .3rem; 
     }

     section.asna-products-container section.products div.product p.title {
        display: flex;
        flex-direction: row;   
        align-items: center;
     }

     section.asna-products-container section.products div.product p.title span:first-child {
        padding-right: 1.5rem;
     }

     section.asna-products-container section.products div.product p.title span:nth-child(2) {
        font-size: 2rem;
     }

     section.asna-products-container section.products div.product p:nth-child(2) {
        font-style: italic;
        border-bottom: 2px solid #f7640f;   
        padding-bottom: 1rem;
     }

     section.asna-products-container .symbol-r::before {
        position: relative; top: -1em; font-size: 50%;         
        content: "\00AE";
        display: inline;
    }

    section.asna-products-container .symbol-tm::before {
        position: relative; top: -1em; font-size: 50%;         
        content: "\2122";
    }

    section.asna-products-container section.products a {
        color: gray;
}
/* Products overview page */

/* Embedded page/post image */
    .thumbnail {
       padding: 1rem;
       margin-right: 2rem;
       display: flex;
       flex-wrap: wrap;
       flex-direction: column;   
       justify-content: center;
    }

    .thumbnail img {
        display: block;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        height: auto;
        vertical-align: middle;
        border: 0;   
    }    

    .thumbnail small {
       display: inline-block;
       margin-top: 1rem;
    }

    small.center-caption {
       align-self: center;
    }

    small.short-caption {
       max-width: 32ch;
    }
/* embedded page/post image */

/* work-around translate button at top of screen */
    .asna-xlate-link {
        color: white;
        background-color: #f7640f;
        padding: .6rem;
        border-radius: .5rem;
    }
/* work-around translate button at top of screen */

/* Article series list */
    body.single-post div.asna-article-series {
       background-color: lightgray;
       display: inline-block;
       padding: 1rem 3rem 0 0;
       border-radius: .5rem;
       margin-bottom: 4rem;
       box-shadow: 0 0 0 2px #f7640f, 0 0 0 8px lightgray;          
    }

    body.single-post div.asna-article-series > p {
       margin-left: 2rem;
    }   

    body.single-post div.asna-article-series ul {
       /*list-style: none;*/
       padding-left: 2.5rem;
       list-style-position: inside;
       line-height: .8rem;
       padding-bottom: 2rem;
    }   
/* Article series list */


/* Post blockqouote */
main.type-page blockquote,
body.single-post blockquote {
  font-size: 1rem;
  width:75%;
  margin: 2rem 0 2rem 4rem;
  font-family: Open Sans;
  color: #555555;
  padding:1.2rem 30px 1.2rem 2.5rem;
  border-left:8px solid  #f7640f ;
  line-height: 1.6;
  background:#ebebeb;
}
/* Post blockqouote */

/* 
    Post anchor tag -- the intent here was to make links in posts more visible. 
    it needs more work.
*/
/*
main.type-page a:not(div.asna-sidebar-menu a), 
body.single-post main#content a:not(div.asna-sidebar-menu a){
    color: #1d1d1d !important;
    text-decoration: underline;
}
*/

body.single-post main#content a:hover {
    color: #f7640f !important;
}

div.asna-sidebar-container a {
    text-decoration: none;
}

div.asna-main-nav-menu a {
    color: black !important;
}
/* Post anchor tag */


/* Post typography */
body.single-post div.asna-post-content p, 
body.single-post div.asna-post-content li
{
    line-height: 1.6rem !important;
}

/* Post typography */

/* Let's talk form on home page */
div.lets-talk-home-form label {
    color: white;
    font-weight: 400 !important;
}

div.lets-talk-home-form div.wpforms-head-container {
    display: flex;
    justify-content: center;
}

div.lets-talk-home-form .wpforms-title {
    color: white;    
  font-weight: 600 !important;      
}


div.lets-talk-home-form .lets-talk-home-form-button {
    background-color: #f7640f  !important;
    color: #003366 !important;
    width: 100%;    
    font-weight: 600;
}

div.lets-talk-home-form .mailcheck-error, 
div.lets-talk-home-form .wpforms-error 
{
    color: white !important;
}

div.lets-talk-home-form .mailcheck-error a, 
div.lets-talk-home-form .wpforms-error a
{
    color: white !important;
}
/* Let's talk form on home page */

.asna-main-nav-menu li {
    text-decoration: none !important;
}
/* Let's talk form on home page */


/* I'm not sure where this is important :( */
ul.spaced-list li {
    margin-bottom: .8rem;
}

/* ASNA Elementor custom widgets CSS */

.asna-callout-container {
   display: flex;
   justify-content: flex-start;
   align-items: center;   
   background-color: #d3d3d3;
   border-radius: .3rem;
   padding: 1rem 2rem;
   gap: 1rem;
}

.asna-callout-container p {
   margin: 0 !important;
}

.asna-pullquote {
    float: left;
    clear: all;
    margin: .5rem 1.5rem .5rem 1rem !important;
    background: none !important;
    width: 225px !important;
    text-align: right;
    font-size: 1em;
    line-height: 1.4em;
    /* border-right is specified in the widget */
    border-left: none !important;
    padding: 0 1em 0 0 !important;    
}

.asna-pullquote + p {
    max-width: 85%;
}

.asna-subhead {    
    color: var(--e-global-color-primary);
    font-family: var( --e-global-typography-primary-font-family ), Sans-serif;
    font-weight: var( --e-global-typography-primary-font-weight );    
    font-size: 1.75rem;
    margin-top: 2.5rem;
}

.asna-subhead h4 {    
    margin: 0 !important;
}

.asna-subhead h3
figure.asna-center-image img {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

figure.asna-center-image {
   text-align: center;
}

figure.asna-image figcaption,
figure.asna-center-image figcaption
{
   padding-top: 1rem;
}
/* Elementor custom widgets CSS */

/* wpforms submit button */
button[type=submit].wpforms-submit {
    color: #003366 !important;
    background-color: #f7640f !important;    
}
/* wpforms submit button */

table.product-versions {
   --circle-size: 1.2rem;
   --cell-padding: .2rem;
   --heading-background-color: whitesmoke;
   /* blue color */
   --odd-zebra-stripe: rgba(135,206,250,.2);
   /* gold color */
   --even-zebra-stripe: rgba(255,215,0,.2);
   --even-zebra-stripe: rgba(227,218,201,.4);
   --border-color: gray;
   --table-font-size: .8rem;
}


h4.product-versions {
   margin-top: 3rem;
}
table.product-versions .fa-circle-check {
   color: green;
   font-size: var(--circle-size);
}

table.product-versions .fa-circle-xmark {
   color: red;
   font-size: var(--circle-size);
}

table.product-versions .fa-circle-1,
table.product-versions .fa-circle-2,
table.product-versions .fa-circle-3,
table.product-versions .fa-circle-4,
table.product-versions .fa-circle-5 {  
  font-size: var(--circle-size);
  color: yellow;
  background-color: black;
  border-radius: 50%;
  display: inline-block;
  width: var(--circle-size);
  height: var(--circle-size);
}

table.product-versions td, table.product-versions th {
   width: 4rem;
   text-align: center;
   font-size: var(--table-font-size);
}

table.product-versions {
   border-spacing: 0;
}

table.product-versions td, table.product-versions th {
   padding: var(--cell-padding);
}

table.product-versions thead tr {
   background-color: var(--heading-background-color);
}

table.product-versions tbody tr:nth-child(odd) {
  background-color: var(--odd-zebra-stripe);
}

table.product-versions tbody tr:nth-child(even) {
  background-color: var(--even-zebra-stripe);
}

table.product-versions tbody tr td, table.product-versions thead tr th {
   border-right: 1px solid var(--border-color);
   border-top: 1px solid  var(--border-color);
}

table.product-versions tbody tr td:first-child, table.product-versions thead tr th:first-child {
   border-left: 1px solid  var(--border-color);
}

/* the next two look bad! Way too generic. */

table tr:last-child td {
   border-bottom: 1px solid  var(--border-color);
}



/* Downloads page  */

section.downloads .readme-button {
    background-color: lightgray;
    border: 1px solid whitesmoke;
    border-radius: .4rem;
    padding: .2rem .5rem
}

section.downloads .download-product {
    margin-left: 1rem;
    margin-bottom: .2rem;
}

section.downloads .download-group:not(:first-child) {
    margin-top: 1rem;    
}

section.downloads .download-group {
    margin-bottom: .2rem;
}

section.downloads h3.download-group {
    font-size: 1.4rem;
}


section.downloads {
    margin-left: 3rem;
}

section.downloads .download-product a:hover {
    text-decoration: underline;
}



a.file-download-button {
    text-decoration: none;
    background-color:  #f7640f;
    color: #003366;
    padding: .3rem .8rem;
    border-radius: .3rem;
    font-size: 1.1rem;
    margin-bottom: 2rem;
    display: inline-block;    
    margin-bottom: 0;
}

a.file-download-button:hover span.file-download-button-text,
a.file-download-button:hover svg.fa-download {
    color:  #e0d8d8 !important;
}

section.case-study-sidebar p,
section.case-study-sidebar h4,
section.case-study-sidebar h5,
section.case-study-sidebar li
{
    color: #ebebeb;
}

section.case-study-sidebar {
    padding: 0 4rem 0 0;
}

section.case-study-sidebar ul {
    list-style-type: square;             
}    


/* Do not show profile stuff on 'account' page. */
div.um-account-profile-link,
div.um-account-meta-img {
    display: none;
}


/* Add to password prompt on 'account' page. */
div.um-field-label label[for="single_user_password"] {
    margin-top: 4rem;
}

div.um-field-label label[for="single_user_password"]::after {
    content: " (Required to update account)" !important;
}




/* Set text color on downloads page */
div.download-product a {
    color: #7d7872;
}


/* Hide the Ultimate Member avatar image placeholder. */
div.um-misc-img {
    display: none !important;
}    


/*
 | These selectors are attempting to select page or post content.
 | page = div[data-elementor-type='wp-page'] div.e-con-inner
 | post =  main#content.post.type-post
 
 | Note the :not(.category-white-paper) selector. This keeps
 | the rules out of sidebars with class .category-white-paper.
 | I've only seen this on the Crisis Decade sidebar, but it 
 | might lurk elsewhere. 
 */
div[data-elementor-type='wp-page'] div.e-con-inner ul,
main#content.post.type-post:not(.category-white-paper) li > ul {
    margin-bottom: 0 !important;
}

div[data-elementor-type='wp-page'] div.e-con-inner ul,
main#content.post.type-post:not(.category-white-paper) ul {
    margin-bottom: 1rem !important;
}

div[data-elementor-type='wp-page'] div.e-con-inner,
main#content.post.type-post:not(.category-white-paper) {
    padding-bottom: 3rem;
}    

/*
div[data-elementor-type='wp-page'] div.e-con-inner a,
main#content.post.type-post:not(.category-white-paper) a {
    text-decoration: underline dashed #f7640f;
    color: #303030;
    text-decoration-color: #7a7a7a;
    text-decoration-color: #f7640f;
    text-decoration-thickness: 2px;
}   
*/

div[data-elementor-type='wp-page'] div.e-con-inner li:not(:last-child),
main#content.post.type-post:not(.category-white-paper) li:not(:last-child) {
   margin-bottom: 1rem;
}



/*
 | Each container on the home page must have a class of 'asna-home-page-section' so that the 
 | page and post values from above don't apply.
 */
div.asna-home-page-section a {
    text-decoration: none;
    color: #f7640f;
}

/* Separate post tags (at bottom of article) */
main#content.post.type-post    div.post-tags span.tag-links a 
{
   margin-right: .5rem;
}


/* 
  This intends to change the look of the archive page that displays tags (and I think categories).
  For example, this page: https://asna.com/en/tag/dg-ibmi/
*/

h1.entry-title,
h1.entry-title a {
    color: #080808;
    font-size: 1.8rem;
}

h2.entry-title,
h2.entry-title a {
    color: #080808;
    font-size: 1.5rem;
}


/*
div.um-cover, 
div.um-header {
    display: none;
}
*/

/*
header.page-header h1.entry-title::before 
{
      content: "User: ";
}
*/


.product-supported {
        background-color: #4ADE80;
}

.product-retired {
        background-color: #FB7185;
}

.product-beta {
        background-color: #8ed8f8;
}

.platform-outline {
        border-top: 1px solid rgb(72, 70, 70);
        border-bottom: 1px solid rgb(72, 70, 70);
        border-left: 1px solid rgb(72, 70, 70);
}

.platform-outline:last-child {
        border-right: 1px solid rgb(72, 70, 70);
}


.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.mt-4 {
  margin-top: 1rem;
}

.ml-6 {
  margin-left: 1.5rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.ml-16 {
  margin-left: 4rem;
}

.ml-12 {
  margin-left: 3rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.flex {
  display: flex;
}

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

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.gap-4 {
  gap: 1rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.border-gray-800 {
  --tw-border-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-border-opacity));
}

.border-slate-600 {
  --tw-border-opacity: 1;
  border-color: rgb(71 85 105 / var(--tw-border-opacity));
}

.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}

.bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}

.bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.p-4 {
  padding: 1rem;
}

.p-2 {
  padding: 0.5rem;
}

.pl-4 {
  padding-left: 1rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.italic {
  font-style: italic;
}

.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity));
}

.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity));
}

.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity));
}

.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity));
}

.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity));
}

.underline {
  text-decoration-line: underline;
}

.decoration-gray-800 {
  text-decoration-color: #1f2937;
}

.decoration-gray-400 {
  text-decoration-color: #9ca3af;
}

.underline-offset-2 {
  text-underline-offset: 2px;
}

/*
Header exceptions for anchor tag styling. 
- language switcher
- Account dropdown
- ASNA logo 
*/

div.trp_language_switcher_shortcode a, 
ul.elementor-nav-menu a,
div[data-id="9190c43"] a {
    
    border-bottom: none;
    padding-bottom: 0;
    color: black;
}

ul#menu-1-aac7e36 li:last-child {
    margin-bottom: 0 !important;
}

/*
a {
   text-decoration: underline;
   text-decoration-skip-ink: auto;
   text-underline-offset: .2rem;
   text-decoration-style: solid;
   text-decoration-color: #f7640f;
   text-decoration-thickness: 1px;
   color: #303030;
   
   &:hover {

      text-decoration-thickness: 3px;
   }

}
*/

comments.area a, .page-content a {
    text-decoration: none;
}