/* Style the header */
/* 1F2022 */


:root {
    --primary-color: #9E160C;
    --secondary-color: #0C949E;
    --background-color: #222222;
    --block-header-height: 241px;
}

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--background-color);
}

header {
    padding: 10px;
    text-align: center;
    font-size: 35px;
    color: white;
    background-color: var(--background-color);
}

/* Style the content */
article {
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
    background-color: #f1f1f1;
    color: black;
    padding: 10px;
    height: calc(100% - var(--block-header-height));
}

/* Style the footer */
footer {
    background-color: #777;
    padding: 10px;
    text-align: center;
    color: white;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 600px) {
    section {
        -webkit-flex-direction: column;
        flex-direction: column;
    }
}


/* For mobile phones: */


[class*="col-"] {
    padding: 10px;   
    border-radius: 13px;
  }
  
  .col-3 {-webkit-flex: 25%; -ms-flex: 25%; flex: 25%; max-width: 25%;}
  .col-6 {-webkit-flex: 50%; -ms-flex: 50%; flex: 50%; max-width: 50%;}
  .col-12 {-webkit-flex: 100%; -ms-flex: 100%; flex: 100%; max-width: 100%;}

  @media (max-width: 600px) {
    .col-3 {-webkit-flex: 100%; -ms-flex: 100%; flex: 100%; max-width: 100%;}   
    .col-6 {-webkit-flex: 100%; -ms-flex: 100%; flex: 100%; max-width: 100%;}
    .col-12 {-webkit-flex: 100%; -ms-flex: 100%; flex: 100%; max-width: 100%;}
    .articleIcon {display: none;}
    .articleHeading {height: auto !important;}
    article {height: auto !important;}
  }

  @media screen and (max-width: 1024px) and (min-width: 601px) {
    .col-3 {-webkit-flex: 50%; -ms-flex: 50%; flex: 50%; max-width: 50%;}   
    .col-6 {-webkit-flex: 50%; -ms-flex: 50%; flex: 50%; max-width: 50%;}
    .col-12 {-webkit-flex: 25%; -ms-flex: 25%; flex: 100%; max-width: 100%;}
    .articleHeading {height: auto !important;}
  }


.outsystemsLogo {
    background-image: url("../images/outsystems_logo.png");
    background-position: center;
    background-repeat: no-repeat;
    width: 307px;
    height: 75px;
    display: inline-block;
}

.intersystemsLogo {
    background-image: url("../images/cache_logo_small.png");
    background-position: center;
    background-repeat: no-repeat;
    width: 287px;
    height: 69px;
    display: inline-block;
}

.fhirLogo {
    background-image: url("../images/fhir_hl7_logo_small.png");
    background-position: center;
    background-repeat: no-repeat;
    width: 287px;
    height: 70px;
    display: inline-block;
}

.smartAppLogo {
    background-image: url("../images/smart_logo_horizontal.png");
    background-position: center;
    background-repeat: no-repeat;
    width: 287px;
    height: 49px;
    display: inline-block;
}

.outSystemsArticle {
    text-align: center;
    background-color: var(--background-color);
    color: white;
}

.content {
    display: flex;
    flex-wrap: wrap;
}

h5 {
    color: var(--primary-color);
    font-size: large;
    margin-block-start: 0.5em;
    margin-block-end: 0;
}

.article h5 {
    color: black;
}

.redBorder {
    border: 1px solid red;
}

.greenBorder {
    border: 1px solid green;
}

.section1 {
    /*display: flex;*/
    background-color: var(--background-color);
}

.full-width {
    width: 100%;
    max-width: none!important;
}

.table {
    max-width: 1024px;
    margin: auto;
}

.row {
    display: flex;
    flex-wrap: wrap; 
}

.articleWrapper {
    width: 100%; 
    height: 100%;
    background-color: var(--background-color); 
    padding: 10px;
}

.articleHeading {
    width: 100%; 
    height: 41px;
    text-align: center; 
}

.articleHeading h5 {
    color: white;
    padding: 10px;
}

.articleHeading.first h5 {
    background-color: var(--primary-color);
}

.articleHeading.second h5 {
    background-color: var(--secondary-color);
}

.articleIcon {
    width: 100%; 
    text-align: center; 
}

ul {
    list-style: none; /* Remove default bullets */
}

ul li::before {
    color: var(--primary-color);
}

ul li::before {
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: var(--primary-color); /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */ 
    width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: -1em; /* Also needed for space (tweak if needed) */
}