:root {
  --white:        #fefefd;
  --lightblue:    #47cafe;
  --blue:         #2ca6fc;
  --darkblue:     #021135;
  --lightgreen:   #cadc57;
  --darkgreen:    #788f08;
  --lightbrown:   #eddbb6;
  --darkbrown:    #ab8f5f;
  --grey:         #c5cbe9;
  --black:        #150d05;
}
@font-face {
  font-family: 'Kalam-Light';
  src: url(../webfonts/kalam/Kalam-Light.woff2) format('woff2');
}
@font-face {
  font-family: 'Kalam-Regular';
  src: url(../webfonts/kalam/Kalam-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Kalam-Bold';
  src: url(../webfonts/kalam/Kalam-Bold.woff2) format('woff2');
}


h1, h2, h3 {
  font-family: 'Kalam-Bold', sans-serif;
}
h4, h5, h6 {
  font-family: 'Kalam-Regular', sans-serif;
}
.btn-primary {
  --bs-btn-bg: var(--blue);
  --bs-btn-border-color: var(--blue);
  --bs-btn-hover-bg: var(--lightblue);
  --bs-btn-hover-border-color: var(--lightblue);
  --bs-btn-active-bg: var(--lightblue);
  --bs-btn-disabled-color: var(--grey);
  --bs-btn-disabled-bg: var(--blue);
  --bs-btn-disabled-border-color: var(--blue);
}
.btn-secondary {
  --bs-btn-bg: var(--darkgreen);
  --bs-btn-border-color: var(--darkgreen);
  --bs-btn-hover-bg: var(--lightgreen);
  --bs-btn-hover-border-color: var(--lightgreen);
  --bs-btn-active-bg: var(--lightgreen);
  --bs-btn-active-border-color: var(--lightgreen);
  --bs-btn-disabled-bg: var(--darkgreen);
  --bs-btn-disabled-border-color: var(--darkgreen);
}

main>.container {
  padding: 60px 15px 0;
}


.tooltipp {
  position: relative;
  /* making the .tooltipp span a container for the tooltipp text */
  border-bottom: 1px dashed #000;
  /* little indicater to indicate it's hoverable */
}

.tooltipp:before {
  content: attr(data-text);
  /* here's the magic */
  position: absolute;

  /* vertically center */
  top: 50%;
  transform: translateY(-50%);

  /* move to right */
  left: 100%;
  margin-left: 15px;
  /* and add a small left margin */

  /* basic styles */
  width: 200px;
  padding: 10px;
  border-radius: 10px;
  background: #000;
  color: #fff;
  text-align: center;

  display: none;
  /* hide by default */

  opacity: 0;
  transition: .3s opacity;
}

.tooltipp:hover:before {
  display: block;
  opacity: 1;
}


.tooltipp:after {
  opacity: 0;
  transition: .3s;
}

.tooltipp:hover:after {
  opacity: 1;
}

/* Dropzone overrides */
.dropzone {
  min-height: 150px;
  border: 2px solid rgba(0,0,0,.3);
  padding: 20px 20px;
}

/* XDEBUG */
.xdebug-error th
{
    font-family:monospace;
    font-weight:normal;
    font-size:15px;
    padding: 6px 6px 6px 6px;
    border:1px solid black;
    background: #FFCC99;    
    color:#000000;          
}
.xdebug-error > tr:first-child > th:first-child,
.xdebug-error > tbody > tr:first-child > th:first-child
{
    line-height:1.6em;
    padding: 10px 10px 10px 10px;
    border:1px solid #000000;
    background: #000000;          
    color:#FFFFFF;
}
.xdebug-error td
{
    font-size:14px;
    padding: 6px 6px 6px 6px;
    border:1px solid green;
    background: #D1FFE8;          
    color:#000000;
}
#dog-data {
  padding: 1rem 1rem 1rem 6rem;
  border: 2px solid var(--blue);
}
#dog-data .dog-image {
  position: absolute;
  left: -50px;
  top: -35px;
  border: 1px solid var(--grey);
}