/**
 * @file
 * Subtheme specific CSS.
 */
 


/** Body config **/

.container-fluid {
    padding-right: 0px;
padding-left: 0px;
}

.col {
      padding-right: 0px;
padding-left: 0px;
}

.row {
    margin-right: 0px;
margin-left: 0px;
}

.node .field--type-image {
    float: none;
    margin: 0 0 0 0;
}

h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a {
    font-weight: 400;
    
}
p {
    font-weight: 400;
    
}
.node__content {
  font-size: 1.071em;
  margin-top: 0px;
}

.jumbotron .btn-primary {
    margin-left: 15px;
}

.jumbotron .banner-container .btn-primary {
    margin-left: 0px;
}

.banner-container {
    min-height: 150px;
}
.image-container {
  flex: 1;                    /* Fill the available space */
  display: flex;              /* Flexbox to center the image */
  align-items: stretch;       /* Stretch image to match height */
}
.banner.img.lazyload img {
  width: 100%;                /* Fill the container's width */
  height: 100%;               /* Match the container's height */
  object-fit: cover;          /* Maintain aspect ratio and crop if necessary */
}

/*
h1 {
  font-size: 70px !important;
  line-height: 80px !important;
}
@media (max-width: 767px){
  h1{
    font-size: 36px !important;
    line-height: 42px !important;
  }
} 
*/

/** Header config **/

.header {
    text-align: right;
    
    
}


/*========================== Navbar =========================*/    

/*========== Navbar media phone =============*/ 

@media (max-width: 991px) {

.justify-content-end {
justify-content: flex-start !important;
}

.form-inline {
line-height: 3; 
}

.navbar-collapse .navbar-nav .nav-link {
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); /* Soft shadow instead of a hard line */
width: 100%;
font-size: x-large !important;
}
.nav {
    padding-top: 10px;
}

}

/*========== Navbar media phone =============*/ 

.navbar-expand-lg {
  float: left;
  
  margin-right: 10px; /* Optional: Adds spacing between floated elements */
    }

    
    .form-inline {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center
    justify-content: flex-start !important;
  
    text-align: left;
}




.navbar-collapse .navbar-nav a, .link {
    color: #ffffff;
}

.navbar-collapse .navbar-nav .nav-link {
    position: relative;
padding-bottom:0px;
Padding-top:0px;
text-decoration: none;
font-size: large;
  transition: color 0.3s ease-in-out;
}

.navbar-collapse .navbar-nav .nav-link:before {
 /*   
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: #353535;
visibility: hidden;
 -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
    
.navbar-collapse .navbar-nav .nav-link:hover:before {

visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
*/


}

.navbar-collapse .navbar-nav .nav-link:hover {
  color: rgba(255, 255, 255, 0.5); /* Faded white effect */
  mix-blend-mode: difference; /* Creates an inverted highlight effect */
}



.block-sw-boot4-account-menu {
    float: right;
}



.navbar {
    position: fixed;
    top: 1rem; /* Moves navbar down by 1rem */
    left: 1rem; /* Moves navbar 1rem from the left */
    right: 1rem; /* Moves navbar 1rem from the right */
    width: calc(100% - 2rem); /* Ensures full width minus left/right margins */
    border-radius: 10px; /* Adjust the value for more/less rounding */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0rem;
    padding-right: 0rem;
    
    background: linear-gradient(
  rgba(0, 0, 0, 0.5) 0%, 
  rgba(0, 0, 0, 0.3) 100%
);
    /* background-color: #00CCE4; */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari support */
    will-change: backdrop-filter;
    transform: translate3d(0, 0, 0);
}

.navbar-brand {
    display: inline-block;
     padding-top: 7px;
    padding-bottom: 0rem;
    padding-right: 0rem;
     max-width: 140px;
    padding-left: 0.7rem;
     
}
.icon-bar {
	width: 22px; 
	height: 2px;
	background-color: #B6B6B6;
	display: block;
	transition: all 0.2s;
	margin-top: 4px;
}

.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler {
    border: none;
    background: transparent;
    padding: 0rem 0,7rem .5rem .75rem;

}


.float-right {
      float: right;
}

.navbar-toggler .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
  background-color: #00e4ff;
}
 
.navbar-toggler .middle-bar {
  opacity: 0;
  background-color: #00cce4;
}
 
.navbar-toggler .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
  background-color: #00b2c7;
}
 
.navbar-toggler.collapsed .top-bar {
  transform: rotate(0);
}
 
.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
}
 
.navbar-toggler.collapsed .bottom-bar {
  transform: rotate(0);
}

.nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}

.nav-link {
    display: block;

}


/*========================== Navbar =========================*/    

/** Cookie compliance configuration **/

/*.eu-cookie-compliance-banner-info {
    color: #ffffff;
    background-color: #016b83;
    border-color: #016b83;
}*/



/** Site footer configuration **/

.site-footer .content {
  
    color: rgba(255, 255, 255, 0.9);
}

.site-footer .block {
    margin-top:0rem;
    padding-top:0px;
    border:none;
}

.site-footer__bottom .region {
    margin-top: 20px;
    float: right;
    padding-right: 10px;
    margin-right: 0px;
margin-left: 0px;
}

.site-footer__top .block-menu, .site-footer__bottom .block {
    
       
    padding-left:0px;
    padding-right:10px;
    
}
.region-footer-first {
    padding-left:15px ;
}
.region-footer-second {
    padding-left:15px ;
}
.region-footer-third {
    padding-left:30px ;
}
.region-footer-fourth {
    padding-left:15px ;
}

.menu--footer a, .link {
 
    font-size: 1rem;
}

.site-footer .nav-link:hover {
  color: rgba(255, 255, 255, 0.95);
}
.site-footer .nav-link{
  color: rgba(255, 255, 255, 0.8);
  padding-left: 0px;
}

/** Continer-fluid edge to edge **/


/** Hero block config 
.jumbotron {
    background:none;
}
**/


/** Image alignment in node **/


/** Paragraph 1 config **/

/* a hacky way to hide the page sections we do not want*/
[role=heading],
aside.col-sm-3,
.field--label,
h1.page-header {
    display: none;
}

body {
    margin-top: 0px;
}
/* lägg till important nedan*/
.container,
.col-sm-9 {
    width: 100%;
    padding: 0px;
    /*max-width: 1440px;*/
}

/*end hack */
/*
.img-responsive {
    max-height: 1000px;
    object-fit: cover;
}

.my-container {
    display: flex !important;
    flex-direction: row;
    padding: 100px;
}

.my-container > div {
    margin: 50px;
}

.field--item {
    font-size: 25px;
}

.image1, .image2 {
    width: 40%;
}

.image-pair {
    justify-content: space-between;
}*/

/******* Paragraph Types config ******/




.lead {

    font-size: 1rem;
    text-align: center;
}

.lead .form-group{
    padding-left: 0px;
    padding-right: 0px;

}

.lead-hb {

    display: block;
  margin-left: auto;
  margin-right: auto;
  float: none;
  padding-left: 1rem;
  padding-right: 1rem;
padding-bottom: 2rem;

}
.lead-hb img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}


/* Hero image config*/
.paragraph--type--hero-image img {
    height: 100%;
    width: 100%;
}
/* Image with text fields config*/ /*
.paragraph--type--image-with-text-fields img {
    height: 100%;
    width: 100%;
    display: block;
}
*/

.jumbotron {
  position: relative; /* Ensure .jumbotron is the reference for absolute positioning */
  background-size: cover;
  background-position: center;
  overflow: hidden; /* Prevent overlay from spilling outside the .jumbotron */
}

.jumbotron .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Cover the full width of the .jumbotron */
  height: 100%; /* Cover the full height of the .jumbotron */
  z-index: 1; /* Place the overlay above the background but below the content */
  pointer-events: none; /* Ensure the overlay does not block interactions */
}

.jumbotron .container {
  position: relative; /* Ensure the content stays above the overlay */
  z-index: 2; /* Place the content above the overlay */
}

.paragraph--type--image-with-text-fields {
  padding-bottom: 2rem;
}


.paragraph--type--image-with-text-fields .header {
  text-align: center;
  margin-top: 1rem;
}

.paragraph--type--image-with-text-fields .jumbotron {
  background-position: top;
  
  height: 100%;
  -moz-background-size: cover;
  padding-top:0px;
  padding-bottom:0px;
}

.paragraph--type--image-with-text-fields .btn-center {
  padding-bottom:15px;
 
}


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

.paragraph--type--image-with-text-left .lead{
  text-align:left;
 
 
}


/* Image with text right config*/
.paragraph--type--image-with-text-right img {
    height: 100%;
    width: 100%;
    display: block;
  
}
.paragraph--type--image-with-text-right {
  padding-bottom: 2rem;
}


.paragraph--type--image-with-text-right .header {
  text-align: center;
  margin-top: 1rem;
}

.paragraph--type--image-with-text-right .jumbotron {
  text-align: center;
  background-position: top;
  min-height: 500px;
  height: 100%;
  -moz-background-size: cover;
}


/* Multi icon Column config*/
.paragraph--type--three-column img {
    height: 100%;
    width: 100%;
    display: block;
  
}
.paragraph--type--three-column {
  margin-top: -2rem;
  padding-bottom: 2rem;
  text-align: center;
}

.paragraph--type--_-columns {
  margin-top: -2rem;
  padding-bottom: 2rem;
  text-align: center;
}

.header_i {
  text-align: center;
  color: #00e4ff;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.icon_circle {
      text-align: center;
      border-radius: 50%;
      background-color: #0066FF;
      color: #ffffff;
      padding: 3rem;
      font-size: 3rem;
      height: 40px;
      width: 40px; 
      float: none;
    margin: auto;
    
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
    }
/*
@media (max-width: 767px){
  .icon_circle{
    height: 20px;
      width: 20px; 
      font-size: 2rem;
      padding: 2rem;
  }
}     
  */  
.icon_item svg{
    position: absolute;
    width: 1em;
    height: 1em;
    transform: translate(-50%, -50%);
    fill: #ffffff;
      }
.i1 {
background: rgb(2,208,255);
background: radial-gradient(circle, rgba(2,208,255,1) 62%, rgba(255,255,255,1) 65%);
}

.i2 {
background: #02c0eb;
background: radial-gradient(circle, rgba(2,192,235,1) 62%, rgba(255,255,255,1) 65%);
}
.i3 {
background: #02acd2;
background: radial-gradient(circle, rgba(2,172,210,1) 62%, rgba(255,255,255,1) 65%);
}

.i4 {
background: #00a0b3;
background: radial-gradient(circle, rgba(0,160,179,1) 62%, rgba(255,255,255,1) 65%);
}

.ia {
background: #00a0b3;
background: radial-gradient(circle, rgba(0,160,179,1) 62%, rgba(255,255,255,1) 65%);
      color: #ffffff;
  /*    padding: 2rem;
      font-size: 2rem; */
      height: 40px;
      width: 40px; 
      float: none;
    margin: auto;
}

.paragraph--type--six-columns {
  margin-top: -2rem;
  padding-bottom: 2rem;
  text-align: center;
}
/* ----------------------------------------*/
/* 4 Column2 config*/
div.icon-text-container {
  display: flex !important; /* Ensure Flexbox is applied */
  align-items: flex-start !important; /* Top-align items */
  padding-bottom: 1rem;
}

div.icon-text-container .icon-circle {
  width: 40px !important; /* Ensure icon size is respected */
  height: 40px !important;
  border-radius: 50% !important;
  /*background-color: #ccc !important; /* Placeholder */ */
  display: flex !important; /* Flexbox for centering within the circle */
  justify-content: center !important; /* Center icon horizontally */
  align-items: center !important; /* Center icon inside the circle */
  margin-right: 10px !important; /* Space between icon and text */
}

div.icon-text-container .text {
  flex: 1 !important; /* Ensure text takes up remaining space */
}
.icon-circle .svg-inline--fa {
  font-size: 2rem; /* Increase size of the icon */
  color: #00a0b3;
}
.icon-circle i {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* X, Y, blur-radius, color */
}

/* ----------------------------------------*/

/* Twelve icon Column config*/
.ib {
background: #00a0b3;
background: radial-gradient(circle, rgba(0,160,179,1) 62%, rgba(255,255,255,1) 65%);
      color: #ffffff;
     /* padding: 2rem;
      font-size: 2rem; */
      height: 40px;
      width: 40px; 
      float: none;
    margin: auto;
}
.lead_b {
    margin-left: 1rem;
    margin-right: 1rem;
    font-size: 1rem;
    font-weight: 500;
    color:#ffffff;
}

.paragraph--type--twelve-columns {
  margin-top: -2rem;
  padding-bottom: 2rem;
  text-align: center;
}
/*
h6 {
 font-size: 12px !Important;
}
*/




/* Image pair config*/

/* Image with text config*//*
.paragraph--type--image-with-text img {
    height: 100%;
    width: 100%;
    display: block;
}
*/
/* Hero banner config*/
.paragraph--type--hero-banner .jumbotron {
    height: 100vh;
    /*text-align: center;*/
    /*padding-top: 6rem;*/
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover; 
    background-position: center;
}

.paragraph--type--hero-banner .jumbotron .webp .jumbotron-fluid {
    background-size: cover; 
    background-position: center;
}
/*
@media (max-width: 767px){
.hero_image {
    background: #ffffff;
  
    
}
}
@media (min-width: 768px){
*/
.webp .hero_image {
    background-image: url('/sites/default/files/2020-01/hrbyra_bg2.webp');
    background-size: cover; 
    background-position: center;
    
}

.hero_image {
    background-image: url(/sites/default/files/2023-03/hrbyra_blue4.jpg);
    background-size: cover; 
    background-position: center;
}

/*}*/


.container-b {
width: 100%;
padding: 0px;
max-width: 1440px;
margin-right: auto;
margin-left: auto;
/*text-align: left;*/
}

.lead-hb1 {

    display: block;
  margin-left: auto;
  margin-right: auto;
  float: none;
  padding-left: 1rem;
  padding-right: 1rem;
  color: #ffffff;

}


.lead-ha svg{
    padding-top:50px;
    margin-left: 1rem;
    margin-right: 1rem;
    width: 5rem;
    fill: #00b2c7;
}

.paragraph--type--hero-banner .banner img {
    max-width: 325px;
}

/* Hero banner2 config*/
.paragraph--type--hero-banner2 .jumbotron {
    height: 100vh;
    /*text-align: center;*/
    /*padding-top: 6rem;*/
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover; 
    background-position: center;
}

.jumbotron .jumbotron-fluid {
    background-size: cover; 
    background-position: center; 
    height: 100vh; 
    width: 100%; 
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

/* Hero banner overlay config*/
.hero {
  position: relative; /* Make the container the positioning context for the overlay */
  background-size: cover;
  background-position: center;
  overflow: hidden; /* Prevents overlay or child elements from exceeding bounds */
}

.hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Ensures overlay covers the full width of the hero */
  height: 100%; /* Ensures overlay covers the full height of the hero */
  background-color: rgba(0, 0, 0, 0.5); /* Default semi-transparent black */
  z-index: 1; /* Places the overlay above the background image */
  pointer-events: none; /* Ensures the overlay does not block interaction */
}

.hero .container {
  position: relative; /* Ensure the content stays above the overlay */
  z-index: 2;
  color: #fff; /* Default white text for contrast */
}

/* Banner pair config*/
.paragraph--type--banner-pair .jumbotron {
    height: 100%;
    color: #ffffff;
    justify-content: left;
    
}
.paragraph--type--banner-pair .lead {

    text-align: left;
    
}


.tjanster {
    background-image: url(/sites/default/files/2019-10/tjanster_dark.png);
    background-size: cover; 
    background-position: center;
}

/*
.webp .tjanster {
    background-image: url(/sites/default/files/2019-10/tjanster_dark.webp);
    background-size: cover; 
    background-position: center;
}

.no-webp .tjanster {
    background-image: url(/sites/default/files/2019-10/tjanster_dark.png);
    background-size: cover; 
    background-position: center;
}
*/
.office {
    background-image: url(/sites/default/files/2019-09/utbildning.png);
    background-size: cover; 
    background-position: center;
}
/*
.webp .office {
    background-image: url(/sites/default/files/2019-09/utbildning.webp);
    background-size: cover; 
    background-position: center;
    
}
.no-webp .office {
    background-image: url(/sites/default/files/2019-09/utbildning.png);
    background-size: cover; 
    background-position: center;
}
*/
.target {
    background-image: url(/sites/default/files/2019-10/test_dark_0.png);
    background-size: cover; 
    background-position: center;
}
/*
.webp .target {
    background-image: url(/sites/default/files/2019-10/test_dark_0.webp);
    background-size: cover; 
    background-position: center;
    
}
.no-webp .target {
    background-image: url(/sites/default/files/2019-10/test_dark_0.png);
    background-size: cover; 
    background-position: center;
}
*/

.surveyb {
    background-image: url(/sites/default/files/2019-10/survey_dark_0.png);
    background-size: cover; 
    background-position: center;
}
/*
.webp .surveyb {
    background-image: url(/sites/default/files/2019-10/survey_dark_0.webp);
    background-size: cover; 
    background-position: center;
    
}
.no-webp .surveyb {
    background-image: url(/sites/default/files/2019-10/survey_dark_0.png);
    background-size: cover; 
    background-position: center;
}
*/



/* Banner config*/
.paragraph--type--banner .jumbotron {
    height: 100%;
      display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover; 
    background-position: center;
}

.banner img{
    max-height: 70%;
    width: 100%;
      display: block;
  margin-left: auto;
  margin-right: auto;
  float: none;
    flex-grow: 1;               /* Allow the image to expand and fill the space */
  height: 100%;               /* Ensure it matches the left column's height */
  object-fit: cover;          /* Crop the image if needed, maintaining aspect ratio */
  width: 100%;                /* Make sure it fills the column horizontally */
}

.webp .tjanster_p {
    background-image: url(/sites/default/files/2019-10/tjanster_light.webp);
    background-size: cover; 
    background-position: center;
    
}
/*
.no-webp .tjanster_p {
    background-image: url(/sites/default/files/2019-10/tjanster_light.jpg);
    background-size: cover; 
    background-position: center;
}
*/
.tjanster_p {
    background-image: url(/sites/default/files/2023-03/face_right_blond.jpg);
    background-size: cover; 
    background-position: center;
}

.webp .produkter_p {
    background-image: url(/sites/default/files/2019-10/utbildning_stor.webp);
    background-size: cover; 
    background-position: center;
    
}
/*
.no-webp .produkter_p {
    background-image: url(/sites/default/files/2019-10/utbildning_stor.jpg);
    background-size: cover; 
    background-position: center;
}*/
.produkter_p {
    background-image: url(/sites/default/files/2023-03/road.jpg);
    background-size: cover; 
    background-position: center;
}
.webp .assessment_p {
    background-image: url(/sites/default/files/2019-10/test_light.webp);
    background-size: cover; 
    background-position: center;
    
}
/*
.no-webp .assessment_p {
    background-image: url(/sites/default/files/2019-10/test_light.jpg);
    background-size: cover; 
    background-position: center;
}*/
.assessment_p {
    background-image: url(/sites/default/files/2019-10/test_light.jpg);
    background-size: cover; 
    background-position: center;
}
.webp .survey_p {
    background-image: url(/sites/default/files/2019-10/survey_light.webp);
    background-size: cover; 
    background-position: center;
    
}
/*
.no-webp .survey_p {
    background-image: url(/sites/default/files/2019-10/survey_light.jpg);
    background-size: cover; 
    background-position: center;
}*/
.survey_p {
    background-image: url(/sites/default/files/2023-03/face_blue.jpg);
    background-size: cover; 
    background-position: center;
}
.webp .msurvey_p {
    background-image: url(/sites/default/files/2020-05/minisurvey2.webp);
    background-size: cover; 
    background-position: center;
    
}
/*
.no-webp .msurvey_p {
    background-image: url(/sites/default/files/2020-05/minisurvey2.jpg);
    background-size: cover; 
    background-position: center;
}
*/
.msurvey_p {
    background-image: url(/sites/default/files/2020-05/minisurvey2.jpg);
    background-size: cover; 
    background-position: center;
}

/* ----------------------------------------*/

/* Footer config*/
.region-footer-second svg{
    width: 3em;
    height: 2em;
    fill: #ffffff;
}
.site-footer {
    line-height: 1rem;
}


/* ----------------------------------------*/

/* Webform config*/

.table thead th {
    background: #00a0b3;
}
.sticky-header table tr th {
    background: #00a0b3;
}

.progress-step:not(:last-child)::after {
    z-index: 0;
}
/* 
.webform-progress-tracker .progress-step::after {

    background-color: rgb(2,208,255);
}

.progress-marker {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.webform-progress-tracker .progress-step.is-active:hover .progress-marker {
background: rgb(2,208,255);
background: radial-gradient(circle, rgba(2,208,255,1) 62%, rgba(255,255,255,1) 65%);

}

.webform-progress-tracker .progress-step:not(.is-active) .progress-marker, .webform-progress-tracker .progress-step:hover .progress-marker {

background: #00a0b3;
background: radial-gradient(circle, rgba(0,160,179,1) 62%, rgba(255,255,255,1) 65%);
}

.progress-step.is-active .progress-marker {
background: rgb(2,208,255);
background: radial-gradient(circle, rgba(2,208,255,1) 63%, rgba(255,255,255,1) 68%);
}

.progress-step.is-complete .progress-marker {

    background-color: #02c0eb;

}
*/
.survey {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.survey .fieldset-legend {
      background: #ffffff;
}

.form-radio {
    background: radial-gradient(circle, rgba(0,160,179,1) 62%, rgba(255,255,255,1) 65%);
}

.alert-success {

    color: #ffffff;
    background-color: #02acd2;
    border-color: #00a0b3;

}


.btn-primary {
    background: linear-gradient(
  rgba(0, 0, 0, 0.5) 0%, 
  rgba(0, 0, 0, 0.3) 100%)!important;
      backdrop-filter: blur(10px)!important;
    -webkit-backdrop-filter: blur(10px)!important; /* Safari support */
    will-change: backdrop-filter!important;
    transform: translate3d(0, 0, 0)!important;
  border-color: rgba(0, 0, 0, 0) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: linear-gradient(
  rgba(0, 0, 0, 0.5) 0%, 
  rgba(0, 0, 0, 0.3) 100%)!important;
      backdrop-filter: blur(10px)!important;
    -webkit-backdrop-filter: blur(10px)!important; /* Safari support */
    will-change: backdrop-filter!important;
    transform: translate3d(0, 0, 0)!important;
    border-color: rgba(0, 0, 0, 0) !important;
    color: rgba(255, 255, 255, 0.5)!important;
  mix-blend-mode: difference!important;
}