/* VARIABLES //////////////////////////////////////*/

 :root {
    /* COLORS */
    --color-heading: /*#002C77;*/ #001F52;
    --color-base-text: #001F52;
    --color-gray-bg: #F8FAFC;
    --color-blueGray: #E5EDF4;
    --color-blueGray-Hover: #d1e0ec;
    --color-white: #FFFFFF;
    --color-link-blue: #2c6ef2;
    --gradient-greenToBlue: linear-gradient(254deg, #00AC41 0%, #019FD0 100%);

    /* TYPOGRAPHY */
    --font-heading: "MMC Display", sans-serif;
    --font-primary: "Noto Sans", sans-serif;
    --font-size-base: 18px;
    --font-size-h1: 32px;
    --font-size-h2: /*29px;*/ 26px;
    --font-size-h3: /*26px;*/ 20px;
    --font-size-h4: /*23px;*/ 18px;
 }


 /* BLOG - BASIC */

 /* TYPOGRAPHY */
.blog-basic-version .bold-text {
   font-weight: 700;
}

.blog-basic-version a {
   color: var(--color-link-blue);
   text-decoration: underline;
   font-family: var(--font-primary);
   font-size: var(--font-size-base);
   font-style: normal;
   font-weight: 400;
   width: 100%;
   line-height: 27px;
   margin: 0;
   padding-bottom: 16px;
}

.blog-basic-version :is(h1 a, h2 a, h3 a, h4 a, p a) {
   color: var(--color-link-blue);
   text-decoration: underline;
   font: inherit;
}

.blog-basic-version a:hover {
   text-decoration: none;
}

 .blog-basic-version h1 {
   color: var( --color-heading);
   font-family: var(--font-heading);
   font-size: var(--font-size-h1);
   font-style: normal;
   font-weight: 400;
   width: 100%;
 }

.blog-basic-version h2 {
   color: var( --color-heading);
   font-family: var(--font-heading);
   font-size: var(--font-size-h2);
   font-style: normal;
   font-weight: 700;
   width: 100%;
   margin: 0;
   padding-bottom: 20px;
 }

 .blog-basic-version .blog-column-title h2 {
   padding: 0;
 }

.blog-basic-version h3 {
   color: var( --color-heading);
   font-family: var(--font-heading);
   font-size: var(--font-size-h3);
   font-style: normal;
   font-weight: 700;
   width: 100%;
   margin: 0;
   padding-bottom: 26px;
 }

.articleContent .blog-basic-version h4 {
   color: var( --color-heading);
   font-family: var(--font-heading);
   font-size: var(--font-size-h4);
   font-style: normal;
   font-weight: 600;
   width: 100%;
   margin: 0;
   padding-bottom: 12px;
 }

.blog-basic-version p {
   color: var(--color-base-text);
   font-family: var(--font-primary);
   font-size: var(--font-size-base);
   font-style: normal;
   font-weight: 400;
   width: 100%;
   line-height: 27px;
   margin: 0;
   padding-bottom: 16px;
 }

 /* GENERAL */
.blog-basic-version {
   display: flex;
   flex-flow: column;
   box-sizing: border-box;
   width: 100%;
}

.blog-basic-version .blog-basic-section {
   padding-bottom: 20px;
}

 /* TABLE */

.blog-basic-version .blog-table {
   display: flex;
   width: 100%;
   flex-flow: column;
}

.blog-basic-version .blog-table tbody {
   width: 100%;
}

.blog-basic-version .blog-table tr {
   display: flex;
   width: 100%;
   flex-flow: row;
}

.blog-basic-version .blog-table tr:hover {
   background-color: var(--color-blueGray-Hover);
}

.blog-basic-version .blog-table tr:nth-child(odd) {
   background-color: var(--color-blueGray);
}

.blog-basic-version .blog-table tr:nth-child(odd):hover {
   background-color: var(--color-blueGray-Hover);
}

.blog-basic-version .blog-table th {
   display: flex;
   width: 100%;
   padding: 24px;
   justify-content: flex-start;
   background-color: var(--color-heading);
   color: var(--color-white);
   font-family: VAR(--font-primary);
   font-size: var(--font-size-base);
   font-style: normal;
   font-weight: 700;
}

.blog-basic-version .blog-table td {
   display: flex;
   width: 100%;
   padding: 24px;
   justify-content: flex-start;
   color: var(--color-heading);
   font-family: VAR(--font-primary);
   font-size: var(--font-size-base);
   font-style: normal;
   font-weight: 400;
}

 /* BLOG - TWO COLUMN */
.blog-basic-version .blog-column-section-wrap {
   display: flex;
   width: 100%;
   padding: 48px 0;
   flex-flow: row;
   box-sizing: border-box;
   justify-content: space-between;
}

.blog-basic-version .blog-column-section {
   display: flex;
   width: 49%;
   padding: 24px;
   flex-flow: column;
   box-sizing: border-box;
   background-color: var(--color-gray-bg);
}

.blog-basic-version .blog-column-stripe {
   width: 100%;
   height: 4px;
   background: var(--gradient-greenBlue, linear-gradient(254deg, #00AC41 0%, #019FD0 100%));
}

.blog-basic-version .blog-column-section .blog-column-title {
   display: flex;
   flex-flow: row;
   align-items: center;
}

.blog-basic-version .blog-column-section .blog-column-title img {
   max-width: 120px;
   max-height: 120px;
}

/* UNORDERED LIST */
.blog-basic-version li {
   color: var(--color-base-text);
   font-family: var(--font-primary);
   font-size: var(--font-size-base);
   font-style: normal;
   font-weight: 400;
   line-height: 27px;
   width: 100%;
   padding-bottom: 14px;
}