/* CSS reset default spacing */
body, h1, h2, h3, h4, h5, h6, td, tr, p {
    padding: 0;
    margin: 0;
}

/* Variables */
body {
    --gray: rgb(50, 50, 50);
    --gray-rgb: 50, 50, 50;
    --ship-gray: rgb(30, 30, 30);
    --ship-gray-rgb: 30, 30, 30;
    --eucalyptus-green: #3AFC97;

    --spacer: 0.75rem;
    --border-radius: 0.6rem;
}


body {
    font-family: 'Segoe UI', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 18px;
    text-shadow: 0 1px 2px black;

    -webkit-font-smoothing: antialiased;


    min-height: 100vh;

    background: linear-gradient(to bottom right, #000, #3b3a3a);

    display: flex;
    align-items: center;
    justify-content: center;

    color: white;
}

.dialog-layout {
    width: 460px;
}
.dialog {
    width: 100%;
    background-color: var(--gray);
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    overflow: hidden;
}
.dialog-border {
    width: 10px;
    background: var(--eucalyptus-green);
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}
.dialog main {
    /* Fallback for browsers that don't support linear gradients: solid color overlay */
    background: rgba(0, 0, 0, 0.5), url("../img/factory-img.png");
    
    /* For browsers that support linear gradients: gradient overlay */
    background: linear-gradient(rgba(var(--gray-rgb), 0.5), rgba(var(--ship-gray-rgb), 1)), url("../img/factory-img.png");

    background-size: 100% 100%;

    /* Turn on hardware acceleration to remove artifact on the rounded borders of the image(the rounded borders of dialog parent) */
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

/* Images */
.img-icon {
    max-height: 89px;
    max-width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
}
.img-logo-horizontal {
    max-height: 48px;
    max-width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
}
.img-header {
    padding-left: calc(4 * var(--spacer));
    padding-right: calc(4 * var(--spacer));
}

.img-badge {
    width: 250px;
    max-width: 100%;
}

/* Tables */
.table-img-badge {
    width: 100%;
}
@media screen and (max-width: 420px)  {
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
    .table-img-badge .img-badge {
        width: 180px;
    }
    .table-img-badge td {
        text-align: center;
        padding-right: 0 !important;
    }
    .table-img-badge tr:first-child {
        padding-top: calc(2 * var(--spacer)) !important;
    }
    .table-img-badge td {
        padding-bottom: calc(2 * var(--spacer)) !important;
    }
}
.table-img-badge {
    border-spacing: 0 calc(2 * var(--spacer));
}
.table-img-badge tr td:first-child {
    padding-right: calc(2 * var(--spacer));
}

/* Animation */
.slide-in {
    transform: translateX(100%);
    animation: slide-in 0.4s forwards;
    -webkit-animation: slide-in 0.4s forwards;
}

@keyframes slide-in {
    100% {
      transform: translateX(0%);
      opacity: 1;
    }
}
  @-webkit-keyframes slide-in {
    100% {
      -webkit-transform: translateX(0%);
      opacity: 1;
    }
}

/* Headings */
h1, h2 {
    font-weight: 500;
    font-size: 1.5rem;
}

/* Misc bootstrap-like classes */
.px-m {
    padding-left: var(--spacer);
    padding-right: var(--spacer);
}
.px-h {
    padding-left: calc(2 * var(--spacer));
    padding-right: calc(2 * var(--spacer));
}

.py-m {
    padding-top: var(--spacer);
    padding-bottom: var(--spacer);
}
.py-h {
    padding-top: calc(2 * var(--spacer));
    padding-bottom: calc(2 * var(--spacer));
}
.pb-h {
    padding-bottom: calc(2 * var(--spacer));
}

.my-h-n {
    margin-top: calc(-2 * var(--spacer));
    margin-bottom: calc(-2 * var(--spacer));
}

.gap-h {
    gap: calc(2 * var(--spacer));
}

.center {
    display: block;
    margin: 0 auto;
}

.d-flex {
    display: flex;
}
.flex-column {
    flex-direction: column;
}
.align-items-center {
    align-items: center;
}
.justify-items-center {
    justify-content: center;
}

.box-shadow {
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.4);
}


/* Text alignment, to cut the space above and below text from the text box */
/* This one has too low support in browsers for now
.leading-trim {
    text-box-trim: trim-both;
    text-box-edge: ex alphabetic;
}
*/
.leading-trim {
    line-height: 1.5;
}
.leading-trim::before, .leading-trim::after {
    content: '';
    display: flow-root;
    height: 0;
    width: 0;
}
.leading-trim::before {
    margin-bottom: calc(-6em / 16);
}
.leading-trim::after {
    margin-top: calc(-6em / 16);
}