/* =================================================================================== */
/*                                      main.css                                       */
/*                                                                                     */
/*           This file is part of the asset suite for the Diagrams website.            */
/*                                https://diagrams.app                                 */
/*                                                                                     */
/*                     Copyright (c) 2017-2022 Structured Path GmbH                    */
/* =================================================================================== */

/* ----------------------------------------------------------------------------------- */
/* General                                                                             */
/* ----------------------------------------------------------------------------------- */

:root {
  --ci-color-teal: #25b4b4;
  --ci-color-green: #6da798;
  --ci-color-yellow: #dcd296;
  --ci-color-magenta: #d4306c;
  --ci-color-monochrome-lightest: #f5fafa;
  --ci-color-monochrome-light: #e7f2f2;
  --ci-color-monochrome-medium: #8db0b0;
  --ci-color-monochrome-dark: #315b5b;
  --ci-color-monochrome-darkest: #0b3232;
}

/* 
 * Change body background color to light gray to force dark scroll bar in WebKit.
 * https://stackoverflow.com/a/7762045/670119
 */
body {
  background-color: #F2F2F2;
}

/* ----------------------------------------------------------------------------------- */
/* Announcement Bar                                                                    */
/* ----------------------------------------------------------------------------------- */

.sqs-announcement-bar-close {
  background: none !important;
}

/* ----------------------------------------------------------------------------------- */
/* Headings                                                                            */
/* ----------------------------------------------------------------------------------- */

/*
 * Tweak the default vertical margins of h2 and h3 headings in the main parts of all 
 * pages except for the home page.
 */
main .main-content > *:not([id^=home-]) h2 {
  margin-top: 2.2em;
}

main .main-content > *:not([id^=home-]) h2:first-child {
  margin-top: 1.2em;
}

main .main-content > *:not([id^=home-]) h3 {
  margin-top: 1.7em;
}

main .main-content > *:not([id^=home-]) h3:first-child {
  margin-top: 0.5em;
}

/* ----------------------------------------------------------------------------------- */
/* Download Button                                                                     */
/* ----------------------------------------------------------------------------------- */

.download-button::before {
  content: '';
  background-size: 100%;
  display: inline-block;
  width: 11px;
  height: 12px;
  margin-right: 6px;
}

.download-button::after {
  content: 'Download';
}

.download-button-dark::before {
  background: url(https://assets.diagrams.app/img/press/download-arrow_white.svg);
}

.download-button-light::before {
  background: url(https://assets.diagrams.app/img/press/download-arrow_dark.svg);
}

.download-button-dark, .download-button-light {
  text-decoration: none !important;
  font-size: 16px;
  padding: 3px 12px 3px 8px;
  border-radius: 13.5px;
}

.download-button-dark {
  color: white;
  background: var(--ci-color-green);
  border: 1px solid var(--ci-color-green);
}

.download-button-light {
  color: var(--ci-color-monochrome-darkest);
  background: var(--ci-color-monochrome-lightest);
  border: 1px solid var(--ci-color-monochrome-light);
}

/* ----------------------------------------------------------------------------------- */
/* Newsletter (Shared)                                                                 */
/* ----------------------------------------------------------------------------------- */

.newsletter-block .newsletter-form-footnote > p {
  display: inline-block;
  max-width: 400px;
}

/* Custom text after submitting newsletter form. */
.newsletter-block .form-submission-text {
  margin-top: 40px;
}

.newsletter-block .form-submission-text p {
  margin: 0;
}

.newsletter-block .newsletter-form-field-wrapper .field-error {
  color: var(--ci-color-magenta);
  background: #f8d6e1;
}

/* ----------------------------------------------------------------------------------- */
/* Footer                                                                              */
/* ----------------------------------------------------------------------------------- */

#preFooter {
  display: none;
}

#footer h3 {
  color: white;
}

#footer h3 + p {
	margin-top: 1.2em;
}

#footer a:hover {
  color: white;
  text-decoration: none !important;
}

#footer .partners {
  position: relative;
  top: -10px;
}

#footer .partners a {
  display: block;
}

#footer .partners a:not(:last-child) {
  margin-bottom: 20px;
}

#footer .partners img {
  max-width: 180px;
  max-height: 100%;
  width: 100%;
  height: auto;

  opacity: 0.5;
}

#footer .copyright {
  margin: 0;
  font-weight: bold;
  color: white;
}

#footer .trademarks {
  margin: 0;
  line-height: 1.3;
  font-size: 10pt;
}

/* Phone */
@media only screen and (max-width: 640px) {
  #footer .col {
    margin: 10px 0px;
  }

  #footer .trademarks {
    margin-top: 12px;
  }
}




/* ----------------------------------------------------------------------------------- */
/* TO BE SORTED                                                                        */
/* ----------------------------------------------------------------------------------- */

/* alternative heading classes (for SEO) */
.h1, .h2, .h3 {
  color: var(--ci-color-monochrome-darkest);
  font-weight: 700;
  margin: 1em 0 .5em;
}

.h1 {
  font-size: 36px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1.2em;
}

.h2 {
  font-size: 26px;
  letter-spacing: 0.9px;
  line-height: 1.4em;
}

.h3 {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  line-height: 1.4em;
}

/* A smaller version of the normal text size. */
.footnote {
  font-size: 13px;
  line-height: 1.5em;
}

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

.img-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.flex-container {
  display: flex;
}

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

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

.flex-xcenter-ycenter {
  justify-content: center;
  align-items: center;
}

/* Navigation Bar Button */
.enable-nav-button #headerNav nav>div:not(.folder):last-child a, .enable-nav-button #sidecarNav nav>div:not(.folder):last-child a {
  padding: 0.8em 2em !important;
}

/* Add underline text decoration to all links within the main content except buttons (pages, blog posts). */
.main-content a:not(.sqs-block-button-element) {
  text-decoration: underline;
}

/* Remove rounded text field corners on mobile. */
input {
  border-radius: 0px;
}

/* Mark required fields in forms red (e.g. contact form). */
span.required {
  color: var(--ci-color-magenta);
}

@media only screen and (max-width: 640px) {
  .sqs-cookie-banner-v2 {
    display: none !important;
  }
}

/* A small New badge/pill for texts */
.new-badge-small, .new-badge-small-inline {
  font-size: 0.9em;
  color: var(--ci-color-teal);
  
  padding: 0px 8px;
  border: 2px solid var(--ci-color-teal);
  border-radius: 20px;
}

.new-badge-small-inline {
  display: inline;
  margin-right: 6px;
}

/* Table of contents code section */
ol.toc-list {
  list-style-type: none;
  padding: 0;
}