p, h1, h2, table, tr, td, th, div, img, label {
  border: 0px solid red;
}

table, th, td {
  border: 0px solid black;
  margin: 0px;
  padding: 0px;
}

/* ===============================
** LOGIC
  

        


================================== */


/* ===============================
** COLORS AND FONT SIZE
================================== */

:root {

    --col-main-d3:#0A260C;
    --col-main-d2:#145A32;
    --col-main-d1:#239B56;
    --col-main-n:#2ECC71;
    --col-main-l1:#82E0AA;
    --col-main-l2:#D5F5E3 ;
    --col-main-l3: #EAFAF1;

    --col-contrast-1:#F4511E;
    --col-contrast-2:#1E88E5;
    --col-contrast-3:xxx;

    --col-brand-d:#239B56;
    --col-brand:#2ECC71;

    /* Greys, darkest on top */
    --col-greys-d3: #191919;
    --col-greys-d2: #424242;
    --col-greys-d1: #6A6A6A;
    --col-greys-n: #939393;
    --col-greys-l1: #BBBCBC;
    --col-greys-l2: #E4E5E5;
    --col-greys-l3: #F8F9F9;

    --col-green: #2ECC71;
    --col-light-green: #deffec;
    --col-red: #f7b4ad;
    --col-light-red: #fff1f0;
    --col-yellow: #ffd51c;
    --col-light-yellow: #fffad6;


    /* sizes */
    /*--font-size-xxl: 2.2em;*/
    --font-size-xl: 2.2em;
    --font-size-l: 1.6em;
    --font-size-m: 1.2em;
    --font-size-s: 0.85em;
    --font-size-xs: 0.65em;
}


/* ===============================
** STANDARD ELEMENTS
================================== */

body {
   padding:0px;
   margin:0px;
   height: 100%;
   background-color: white;
}

html {
    /*margin-left: calc(100vw - 100%); /* Avoid different positioning with and without scroll bar */
   height: 100%;
}


/* ===============================
** WARNINGS
================================== */

.warning-red {
    background-color: var(--col-red);
    color: white;
    font-weight: 700;
}

.chart-bg-red {
    background-color: var(--col-light-red);
    border: 3px solid var(--col-red);
}

.chart-bg-green {
    background-color: var(--col-light-green);
    border: 3px solid var(--col-green);
}

.chart-bg-yellow {
    background-color: var(--col-light-yellow);
    border: 3px solid var(--col-yellow);
}

.chart-bg-transparent {
    background-color: transparent;
    border: 3px solid transparent;
}


/* ===============================
** DIV BLOCKS
================================== */


/*

.content-wrapper

    .header-outer
        .header-inner
            .header-left
            .header-right
    
    .canvas-outer
        .canvas
            .container
    


*/


.content-wrapper {
    background-color: transparent;
    margin: 0px;
    padding: 0px 0px 160px;
    width: 100%;
}


.header-outer {
    margin-bottom: 10px;
    height: 60px;
    padding: 0px 30px;
    background-color: var(--col-main-n);
}

.header-inner {
    width: 100%;
    height:100%;
    /*overflow: hidden;  add this to contain floated children */
}

.header-left {
    float: left;
    position: relative;
    height:100%;
    background-color: transparent;
    width: 60px;
}

.header-right {
    float: right;
    position: relative;
    height:100%;
}

.canvas-outer {
    padding: 0px 30px;
}

.canvas{
    margin: 0 auto;
    padding: 0px;
    width: 100%;
    /*max-width: 1000px;*/
}


.container{
    width: 100%;
    background-color: blue;
}

.full-height {
    position: relative; /* needed for footer positioning*/
    height: auto !important; /* real browsers */
    min-height: 100%; /* real browsers */
    background-color: transparent;
}



.footer-outer {
    position: absolute;;
    bottom: 0px;
    width: 100%;
    margin-top: 40px;
    height: 80px;
    padding: 0px 30px;
    background-color: var(--col-main-n);
}

.footer-inner {
    position: relative;
    width: 100%;
    height:100%;
}

.footer-left {
    float: left;
    position: absolute;
    top:50%;
    left:0%;
    transform: translate3d(-0%,-50%,0);
    -webkit-transform: translate3d(-0%,-50%,0);
    -moz-transform: translate3d(-0%,-50%,0);
    -o-transform: translate3d(-0%,-50%,0);

}

.footer-right {
    float: right;
    position: absolute;
    top:50%;
    right:0%;
    transform: translate3d(-0%,-50%,0);
    -webkit-transform: translate3d(-0%,-50%,0);
    -moz-transform: translate3d(-0%,-50%,0);
    -o-transform: translate3d(-0%,-50%,0);

}


.chart {
    padding:0px;
    background-color: transparent;
}

.chart-height {
    height: 280px;
}


/* ===============================
** COLOR SCHEMES AND FONTS
================================== */

.color-scheme {
    width: 100px; 
    height: 100px; 
    margin: 10px; 
    float:left;
    border: 1px solid transparent;
}


/* ===============================
** CENTERED POSITIONING
================================== */

/* must be within position: relative div */

.center-horiz {
    position: absolute;
    top:50%;
    left:0%;
    transform: translate3d(-0%,-50%,0);
    -webkit-transform: translate3d(-0%,-50%,0);
    -moz-transform: translate3d(-0%,-50%,0);
    -o-transform: translate3d(-0%,-50%,0);
}

.center-horiz-no-left-adjust {
    position: absolute;
    top:50%;
    transform: translate3d(-0%,-50%,0);
    -webkit-transform: translate3d(-0%,-50%,0);
    -moz-transform: translate3d(-0%,-50%,0);
    -o-transform: translate3d(-0%,-50%,0);
}


.center-horiz-and-vertical {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate3d(-50%,-50%,0);
    -webkit-transform: translate3d(-50%,-50%,0);
    -moz-transform: translate3d(-50%,-50%,0);
    -o-transform: translate3d(-50%,-50%,0);
}

.center-vertical {
    position: absolute;
    top:00%;
    left:50%;
    transform: translate3d(-50%,-0%,0);
    -webkit-transform: translate3d(-50%,-0%,0);
    -moz-transform: translate3d(-50%,-0%,0);
    -o-transform: translate3d(-50%,-0%,0);
}


/* ===============================
** PRICING TABLE
================================== */

.price-parent {
    height: 100px;
    border-bottom: 1px solid grey;
    position: relative;
}

.col-1 {
    background-color: yellow;
    background-color: transparent;
    width: calc(25%);
    height: 100%;
    float:left;
}
.col-2 {
    background-color: blue;
    background-color: transparent;
    width: calc(50%);
    height: 100%;
    float:left;
}
.col-3 {
    background-color: pink;
    background-color: transparent;
    width: calc(25%);
    height: 100%;
    float:left;
}


.price-col-1-logo {
    background-color: yellow;
    background-color: transparent;
    width: calc(20%);
    height: 40px;
    float:left;
}



.price-prod-name {
    position:relative;
    width: 100%;
    background-color: transparent;
}

.price-logo {
    max-height:50px;
    max-width:120px;    
}



/* ===============================
** NAME CLEANING API
================================== */

table.name-claning {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

.name-claning-button {
    background-color: #0AB74A;
    border: none;
    color: white;
    padding: 0px;
    margin: 0px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    border-radius: 0px;
    -webkit-appearance: none; /* Avoid strange look on iPhone */
    width: calc(100%);
    height:80px;
    font-size: 1.2em;
}

.name-claning-input {
    width: calc(100%);
    height:74px;
    border: 3px solid #0AB74A;
    background-color: var(--col-main-l3);
    border-radius: 0px;
    padding-left: 10px;
    font-size: 1.2em;
    color:black;
}

/* ===============================
** LOGIN / SIGNUP / LOGOUT / RESET PW
================================== */

.login-box {
    margin: 0 auto;
    width:220px;
    height:300px;
    background-color:var(--col-main-l2);
    border: 3px solid var(--col-main-d1);
    padding: 25px 25px 5px 25px;
}

.login-sections {
    width: 100%;
    border: 0px solid red;
    padding: 0px;
}

.login-field {
    width: calc(100% - 16px);
    height: 70%;
    border: 3px solid var(--col-brand);
    background-color: var(--col-main-l3);
    border-radius: 0px;
    padding-left: 10px;
    font-size: 1em;
}


.form-button {
    background-color: var(--col-brand);
    border: none;
    color: white;
    padding: 0px;
    margin: 0px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    border-radius: 0px;
    border-bottom: 3px solid #03A651;
    -webkit-appearance: none; /* Avoid strange look on iPhone */
    width: calc(100% - 0px);
    height: 70%;
    font-size: 1em;
}

.form-button:hover {
    background-color:#03A651;
}



/* ===============================
** MAGIC MATCHER
================================== */

.magic-shadow {
    width:calc(100%-50px);
    margin:0px 0px 15px 0px;
    padding:22px ;
    background-color: white;

}

.magic-button-mother {
    width: 80%;
    height: 70px;
    margin: 0 auto;
    background-color: transparent;
    padding-top: 5px;
}

.magic-button-daughter {
    width: calc(30% - 28px);
    margin:0px 5px;
    padding: 5px;
    border-radius: 0px;
    background-color: #dbdbdb;
    border: 4px solid #d4d4d4;
    float:left;
}

.magic-button-daughter-stop-this-mp {
    width: calc(10% - 28px);
    margin:0px 5px;
    padding: 5px;
    border-radius: 0px;
    background-color: #dbdbdb;
    border: 4px solid #d4d4d4;
    float:left;
}


.magic-button-daughter-dummy {
    width: calc(33.33% - 28px);
    float:left;
    height:1px;
    background-color: transparent;
}


.magic-button-daughter:hover {
    background: #c4c4c4;
    border-color: #c4c4c4;
    transition: all 0.4s ease 0s;
}


table.magic {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}


td.magic {
    border: 0px solid #dddddd;
    text-align: left;
    padding: 3px 8px;
}


/* ===============================
** FREEZE TOP ROW 
================================== */

.fixme {

    width: 100%;
    z-index: 1;
}



/* ===============================
** TOOLTIP - 
================================== */


.tooltip {
  position: relative;
}
.tooltip:hover {
} 

.tooltip-border {
    border: 1px solid transparent;
}
.tooltip-border:hover {
    border: 1px solid var(--col-brand);
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: var(--col-brand);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -70px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -7px;
  border-width: 7px;
  border-style: solid;
  border-color: var(--col-brand) transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

p.tooltip {
    font-size:var(--font-size-xs);    
    color: white;
    text-align: center;
    line-height: 1.03em;

}

/* ===============================
** TABLE
================================== */

.crop-overflow-text-in-table {
    width:100%;
    overflow:hidden;
    height:20px;
    line-height:20px;
}

/* ===============================
** MATRIX TABLE
================================== */

table.matrix {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}


th.matrix, td.matrix {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 3px 5px;
    margin: 3px 5px;
}


/* ===============================
** OUTLIER TABLE
================================== */

table.outliers {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}


th.outliers, td.outliers {
    border-bottom: 1px solid #dddddd;
    text-align: left;
    padding: 3px 5px;
    margin: 3px 5px;
}



@media (max-width: 576px) {
    .hide-tbl-col-on-mobil {display: none}
}
@media (min-width: 576px) {
    .hide-tbl-col-on-desktop {display: none}
}


/* ===============================
** MAP:
================================== */
#map {
    height:600px;
    border:0px solid #26394b;

}

/* ===============================
** HEART-LOGO
================================== */

.heart-wrapper {
    position: relative;
    background-color: transparent;
    width: 60px;
}

.heart-row{
    overflow: hidden; /* add this to contain floated children */
}

.heart-pixel{
    height: 3px;
    width:  3px;
    background-color: var(--col-main-n);
    border: 0.1px solid var(--col-main-n);
    float:left;
}

/* ===============================
** HAMBURGER MENU
================================== */

/*
.hamburger {
  background: transparent;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}
*/


/* ===============================
** SCREEN SIZE ADJUSTMENT
** viewport-identifier is for debugging (se base.html)
** canvas is the width of the site
** body font-size is relative to em-sizes
================================== */

/* INITIAL SETTINGS */
/*.container{width: calc(100% - 80px); padding: 0px 40px;}*/


/* VIEWPORT WIDTH: 0->320
/* ======================================*/
@media (min-width: 0px) {
    .viewport-identifier {background-color: pink}
    .container{width: calc(100% - 30px); padding: 0px 15px;}
    body{font-size: 11px;}
}


/* VIEWPORT WIDTH: 320 | iPhone 4 / 5 / SE | 
/* ======================================*/
@media (min-width: 320px) {
    .viewport-identifier {background-color: green}
    .container{width: calc(100% - 30px); padding: 0px 15px;}
    body{font-size: 11px;}
}


/* VIEWPORT WIDTH: 360 | Galaxy S5 | 
/* ======================================*/
@media (min-width: 360px) {
    .viewport-identifier {background-color: blue}
    .container{width: calc(100% - 30px); padding: 0px 15px;}
    body{font-size: 11px;}
}


/* VIEWPORT WIDTH: 375 | iPhone 6/7/8 | iPhone X
/* ======================================*/
@media (min-width: 375px) {
    .viewport-identifier {background-color: deeppink}
    .container{width: calc(100% - 30px); padding: 0px 15px;}
    body{font-size: 13px;}
}


/* VIEWPORT WIDTH: 411 | iPhone 6/7 | Pixel 2/2XL | iPhone 6/7/8 Plus
/* ======================================*/
@media (min-width: 411px) {
    .viewport-identifier {background-color: lime}
    .container{width: calc(100% - 30px); padding: 0px 15px;}
    body{font-size: 13px;}
}


/* VIEWPORT WIDTH: 576
/* ======================================*/
@media (min-width: 576px) {
    .viewport-identifier {background-color: cyan}
    .container{width: calc(100% - 80px); padding: 0px 40px;}
    body{font-size: 14px;}
}


/* VIEWPORT WIDTH: 768 | iPad
/* ======================================*/
@media (min-width: 768px) {
    .viewport-identifier {background-color: rgb(50,50,50)}
    .container{width: calc(100% - 30px); padding: 0px 15px;}
    body{font-size: 14px;}
}


/* VIEWPORT WIDTH: 992 | iPad Pro
/* ======================================*/
@media (min-width: 992px) {
    .viewport-identifier {background-color: yellow}
    .container{width: calc(100% - 60px); padding: 0px 30px;}
    body{font-size: 15px;}
}


/* VIEWPORT WIDTH: 1200
/* ======================================*/
@media (min-width: 1200px) {
    .viewport-identifier {background-color: pink}
    .container{width: calc(100% - 80px); padding: 0px 40px;}
    body{font-size: 15px;}
}