:root {
  --cn-gradient-bg2: linear-gradient(to right,
    rgb(255, 0, 0),
    rgb(255, 0, 25),
    rgb(255, 0, 50),
    rgb(255, 0, 75),
    rgb(255, 0, 100),
    rgb(255, 0, 125),
    rgb(255, 0, 150),
    rgb(255, 0, 175),
    rgb(255, 0, 200),
    rgb(255, 0, 225),
    rgb(255, 0, 255),
    rgb(225, 0, 255),
    rgb(200, 0, 255),
    rgb(175, 0, 255),
    rgb(150, 0, 255),
    rgb(125, 0, 255),
    rgb(100, 0, 255),
    rgb(75, 0, 255),
    rgb(50, 0, 255),
    rgb(25, 0, 255),
    rgb(0, 0, 255),
    rgb(0, 25, 255),
    rgb(0, 50, 255),
    rgb(0, 75, 255),
    rgb(0, 100, 255),
    rgb(0, 125, 255),
    rgb(0, 150, 255),
    rgb(0, 175, 255),
    rgb(0, 200, 255),
    rgb(0, 225, 255),
    rgb(0, 255, 255),
    rgb(0, 255, 225),
    rgb(0, 255, 200),
    rgb(0, 255, 175),
    rgb(0, 255, 150),
    rgb(0, 255, 125),
    rgb(0, 255, 100),
    rgb(0, 255, 75),
    rgb(0, 255, 50),
    rgb(0, 255, 25),
    rgb(0, 255, 0),
    rgb(25, 255, 0),
    rgb(50, 255, 0),
    rgb(75, 255, 0),
    rgb(100, 255, 0),
    rgb(125, 255, 0),
    rgb(150, 255, 0),
    rgb(175, 255, 0),
    rgb(200, 255, 0),
    rgb(225, 255, 0),
    rgb(255, 255, 0),      
    rgb(255, 225, 0),
    rgb(255, 200, 0),
    rgb(255, 175, 0),
    rgb(255, 150, 0),
    rgb(255, 125, 0),
    rgb(255, 100, 0),
    rgb(255, 75, 0),
    rgb(255, 50, 0),
    rgb(255, 25, 0),
    rgb(255, 0, 0));}

.boks2 {
    border: 3px solid transparent;
    border-radius: 15px;
    padding: 5px;
    margin: 0;
    background: url('https://wallpapercave.com/dwp1x/wp5126154.jpg');
    background-size: 110% 110%;
    background-position: 50% 80%;
    overflow: visible;
    animation: slide-blur-above 1s, BorderPulse 15s infinite;
}

.widget-container {
    position: relative;
    width: 630px;
    height: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    overflow: visible;
}
.download-button, .select-all-button, .unselect-all-button {
  font-family: 'Times New Roman', serif;
  text-align: center;
  height: 40px;
  color: #ab22fe;
  border: 3px solid #2197f2;
  background-color: transparent;
  border-radius: 4px;
  background-position: left bottom;
  transition: all 0.5s ease-out;
  transform: scale(0.8);
  vertical-align: middle;
  z-index: 1;
}
.download-button {
    margin-top: 380px;
    margin-right: 30px;
    margin-bottom: 0px;
    margin-left: 100px;
    font-size: 22px;
    width: 500px;
    font-weight: bold;
}

.select-all-button {
    margin-top: 380px;
    margin-right: -30px;
    margin-bottom: 0px;
    margin-left: 30px;
    font-size: 21px;
    width: 300px;
}

.unselect-all-button {
    margin-top: 380px;
    margin-right: -30px;
    margin-bottom: 0px;
    margin-left: 20px;
    font-size: 21px;
    width: 300px;
}

.download-button:hover, .select-all-button:hover, .unselect-all-button:hover {
    font-weight: bold;
    color: #212121;
    border-radius: 4px;
    border: 3px solid transparent;
    background-image: var(--cn-gradient-bg2);
    background-size: 800% 500%;
    background-position: left bottom;
    transition: border 0s;
    cursor: pointer;
    transition: none;
    vertical-align: middle;
    transform: scale(0.9);
    animation: slideBackground 10s linear infinite, BorderPulse 7s infinite;
    transition: all 0.3s ease-out;
}

.border-style {
    position: absolute;
    display: block;
    bottom: -430px;
    left: 49%;
    transform: translateX(-50%);
    width: 600px;
    height: 55px;
    border: 3px solid #ab22fe;
    border-radius: 50px;
    background-color: #212121;
    padding: 0px;
}

.checkbox-group1 input[type="checkbox"],
.checkbox-group2 input[type="checkbox"] {
    margin-top: -3px;
    margin-right: 10px;
    margin-bottom: 0px;
    margin-left: 0px;
    vertical-align: middle;
}

.checkbox-group1 label {
    font-size: 12px;
    color: white;
    margin-top: 2px;
    margin-right: -50px;
    margin-left: 50px;
    margin-bottom: -5px;
}

.checkbox-group2 label {
    font-size: 12px;
    color: white;
    margin-top: 2px;
    margin-right: -50px;
    margin-left: 0px;
    margin-bottom: -5px;
    vertical-align: middle;
}

.checkbox-group1 label:hover {
    margin-top: -10px;
    margin-right: -50px;
    margin-bottom: -50px;
    margin-left: 40px;
    transform: translateY(0px) translateX(-3px);
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
    color: #ab22fe;
    background-color: #212121;
    border: 3px solid #2197f2;
    transition: border 0s;
    cursor: pointer;
    transition: none;
}

.checkbox-group2 label:hover {
    margin-top: -10px;
    margin-right: -50px;
    margin-bottom: -50px;
    margin-left: 0px;
    transform: translateY(0px) translateX(-13px);
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
    color: #ab22fe;
    background-color: #212121;
    border: 3px solid #2197f2;
    transition: border 0s;
    cursor: pointer;
    transition: none;
}

.checkbox-group1 label:active, .checkbox-group2 label:active {
  background-image: var(--cn-gradient-bg2);
  background-size: 800% 500%;
  animation: slideBackground 10s linear infinite, BorderPulse 7s infinite;
  font-weight: bold;
  color: #212121;}

@keyframes slideBackground {
  0% { background-position: 0% 50%; }
  100% { background-position: -800% 50%; }}

@keyframes BorderPulse {
  0% {border-color: rgba(255, 0, 0, 1);}
  1.67% {border-color: rgba(255, 0, 25, 0.75);}
  3.33% {border-color: rgba(255, 0, 50, 0.5);}
  5.00% {border-color: rgba(255, 0, 75, 0.75);}
  6.67% {border-color: rgba(255, 0, 100, 1);}
  8.33% {border-color: rgba(255, 0, 125, 0.75);}
  10.00% {border-color: rgba(255, 0, 150, 0.5);}
  11.67% {border-color: rgba(255, 0, 175, 0.75);}
  13.33% {border-color: rgba(255, 0, 200, 1);}
  15.00% {border-color: rgba(255, 0, 225, 0.75);}
  16.67% {border-color: rgba(255, 0, 255, 0.5);}
  18.33% {border-color: rgba(225, 0, 255, 0.75);}
  20.00% {border-color: rgba(200, 0, 255, 1);}
  21.67% {border-color: rgba(175, 0, 255, 0.75);}
  23.33% {border-color: rgba(150, 0, 255, 0.5);}
  25.00% {border-color: rgba(125, 0, 255, 0.75);}
  26.67% {border-color: rgba(100, 0, 255, 1);}
  28.33% {border-color: rgba(75, 0, 255, 0.75);}
  30.00% {border-color: rgba(50, 0, 255, 0.5);}
  31.67% {border-color: rgba(25, 0, 255, 0.75);}
  33.33% {border-color: rgba(0, 0, 255, 1);}
  35.00% {border-color: rgba(0, 25, 255, 0.75);}
  36.67% {border-color: rgba(0, 50, 255, 0.5);}
  38.33% {border-color: rgba(0, 75, 255, 0.75);}
  40.00% {border-color: rgba(0, 100, 255, 1);}
  41.67% {border-color: rgba(0, 125, 255, 0.75);}
  43.33% {border-color: rgba(0, 150, 255, 0.5);}
  45.00% {border-color: rgba(0, 175, 255, 0.75);}
  46.67% {border-color: rgba(0, 200, 255, 1);}
  48.33% {border-color: rgba(0, 225, 255, 0.75);}
  50.00% {border-color: rgba(0, 255, 255, 0.5);}
  51.67% {border-color: rgba(0, 255, 225, 0.75);}
  53.33% {border-color: rgba(0, 255, 200, 1);}
  55.00% {border-color: rgba(0, 255, 175, 0.75);}
  56.67% {border-color: rgba(0, 255, 150, 0.5);}
  58.33% {border-color: rgba(0, 255, 125, 0.75);}
  60.00% {border-color: rgba(0, 255, 100, 1);}
  61.67% {border-color: rgba(0, 255, 75, 0.75);}
  63.33% {border-color: rgba(0, 255, 50, 0.5);}
  65.00% {border-color: rgba(0, 255, 25, 0.75);}
  66.67% {border-color: rgba(0, 255, 0, 1);}
  68.33% {border-color: rgba(25, 255, 0, 0.75);}
  70.00% {border-color: rgba(50, 255, 0, 0.5);}
  71.67% {border-color: rgba(75, 255, 0, 0.75);}
  73.33% {border-color: rgba(100, 255, 0, 1);}
  75.00% {border-color: rgba(125, 255, 0, 0.75);}
  76.67% {border-color: rgba(150, 255, 0, 0.5);}
  78.33% {border-color: rgba(175, 255, 0, 0.75);}
  80.00% {border-color: rgba(200, 255, 0, 1);}
  81.67% {border-color: rgba(225, 255, 0, 0.75);}
  83.33% {border-color: rgba(255, 255, 0, 0.5);}
  85.00% {border-color: rgba(255, 225, 0, 0.75);}
  86.67% {border-color: rgba(255, 200, 0, 1);}
  88.33% {border-color: rgba(255, 175, 0, 0.75);}
  90.00% {border-color: rgba(255, 150, 0, 0.5);}
  91.67% {border-color: rgba(255, 125, 0, 0.75);}
  93.33% {border-color: rgba(255, 100, 0, 1);}
  95.00% {border-color: rgba(255, 75, 0, 0.75);}
  96.67% {border-color: rgba(255, 50, 0, 0.5);}
  98.33% {border-color: rgba(255, 25, 0, 0.75);}
  100% {border-color: rgba(255, 0, 0, 1);}}

@keyframes slide-blur-above {
    from {
        height: 0px;
        opacity: 0;
        filter: blur(100px);
    }
    to {
        height: 455px;
        opacity: 1;
        filter: blur(0px);}}

.gradient-cn2 {
  width: 750px;
  height: 5px;
  font-size: 0px;
  background-image: var(--cn-gradient-bg2);
  background-size: 800% 500%;
  color: black;
  border-radius: 2px;
  border: 1px solid transparent;
  display: inline-block;
  animation: slideBackground 20s linear infinite, BorderPulse 7s infinite;
  transition: all 0.3s ease-out;}