:root {
    --front-header-height: 56px;

  --tblr-body-bg: #d1f1fd;
  --tblr-body-color:#000;

  --tblr-primary:#5f82ba;
  --tblr-primary-fg:rgb(255, 255, 255);
  --tblr-primary-darken:#4b6999;

  

--tblr-bg-surface: white;


    
}


.btn-primary{

  --tblr-primary:#039266;
  --tblr-primary-fg:rgb(255, 255, 255);
  --tblr-primary-darken:#007754;

  --tblr-btn-border-color:#67bba2;
}

.btn-outline-primary {
    --tblr-btn-color: rgb(49, 49, 49);
    --tblr-btn-border-color: #67bba2;
}



.empty-icon {
  font-size: 3rem;
}


.navbar {
    --tblr-navbar-bg: #e9f5fa;
}

header.navbar {
    position: relative;
    z-index: 1;
}



main::before {
    content: "";
    position: fixed;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: auto;
    height: calc(100vh);
    aspect-ratio: 2 / 3;
    background: url("/assets/css/front-skin-en-za-light/left-bg.webp")
        no-repeat left center / auto 100%;
    pointer-events: none;
    z-index: -1;
}

main::after {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    width: auto;
    height: calc(100vh);
    aspect-ratio: 2 / 3;
    background: url("/assets/css/front-skin-en-za-light/right-bg.webp")
        no-repeat right center / auto 100%;
    pointer-events: none;
    z-index: -1;
}

@media (max-width: 800px) {

    main::after {
        content: none;
    }

    main {
        isolation:auto;
        margin: 20px;
        background: white;
    }
}