.codeblock {
  padding: 15px;
  border: 1px solid #666;
  background: #f4f4f4;
  color: var(--primary);
}

.codeblock {
  padding: 15px;
  border: 1px solid #ffffff;
  background: #ffffff;
  color: var(--primary);
}

.nav-tabs {
  border-bottom: 1px solid #ffffff;
}

body {
  margin: 0;
  /*font-family: var(--bs-body-font-family);*/
  /*font-size: var(--bs-body-font-size);*/
  /*font-weight: var(--bs-body-font-weight);*/
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  font-size: 12;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.visited {
  color: #0000ff;
  background-color: #fff;
  border-color: #ffffff #ffffff #fff;
}

.nav-link.visited {
  color: #0000ff;
  background-color: #fff;
  border-color: #ffffff #ffffff #fff;
}

a {
  color: rgb(0,0,255);
  transform: translateX(-11px);
  text-decoration: underline;
  font-family: 'Barlow Condensed', sans-serif;
}

a:hover {
  color: #0a58ca;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: #0000ff;
  background-color: #fff;
  border-color: #ffffff #ffffff #fff;
}

a:visited {
  /*color: #800080;*/
}

html {
}

// X-Small devices (portrait phones, less than 576px)// No media query for `xs` since this is the default in Bootstrap// Small devices (landscape phones, 576px and up)@media (min-width: 576px) ... // Medium devices (tablets, 768px and up)@media (min-width: 768px) ... // Large devices (desktops, 992px and up)@media (min-width: 992px) ... // X-Large devices (large desktops, 1200px and up)@media (min-width: 1200px) ... // XX-Large devices (larger desktops, 1400px and up)@media (min-width: 1400px) ... {
}

#user_group_label {
  cursor: pointer;
  margin-bottom: 0px;
  padding: 12px;
  border: 2px solid #d3394c;
  color: #d3394c;
  font-weight: bold;
}

input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

input:focus, select:focus, textarea:focus, button:focus {
  outline: none;
}

.drop {
  width: 90%;
  height: 220px;
  border: 3px dashed #DADFE3;
  border-radius: 15px;
  overflow: hidden;
  text-align: center;
  background: transparent;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  margin-top: 0px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 10px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.drop .cont {
  width: 500px;
  height: 170px;
  color: #8E99A5;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.drop .cont i {
  font-size: 40px;
  color: #787e85;
  position: relative;
}

.drop .cont .tit {
  font-size: 30px;
  text-transform: uppercase;
  font-weight: 900;
}

.drop .cont .desc {
  color: #787e85;
  font-size: 18px;
}

.drop .cont .browse {
  margin: 10px 25%;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  background: #00c993;
}

.drop input {
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: red;
  opacity: 0;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

#list {
  width: 100%;
  text-align: left;
  position: absolute;
  left: 0;
  top: 0;
}

.dashed_upload {
  height: 200px;
}

.files input {
  outline: 2px dashed #92b0b3;
  outline-offset: -10px;
  -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
  transition: outline-offset .15s ease-in-out, background-color .15s linear;
  padding: 120px 0px 85px 35%;
  text-align: center !important;
  margin: 0;
  width: 100% !important;
}

.files input:focus {
  outline: 2px dashed #92b0b3;
  outline-offset: -10px;
  -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
  transition: outline-offset .15s ease-in-out, background-color .15s linear;
  border: 1px solid #92b0b3;
}

.files {
  position: relative;
}

.files:after {
  pointer-events: none;
  position: absolute;
  top: 60px;
  left: 0;
  width: 50px;
  right: 0;
  height: 56px;
  content: "";
  background-image: url(https://image.flaticon.com/icons/png/128/109/109612.png);
  display: block;
  margin: 0 auto;
  background-size: 100%;
  background-repeat: no-repeat;
}

.color input {
  background-color: #eeeeee;
}

.files:before {
  position: absolute;
  bottom: 10px;
  left: 0;
  pointer-events: none;
  width: 100%;
  right: 0;
  height: 57px;
  content: " or drag it here. ";
  display: block;
  margin: 0 auto;
  color: #2ea591;
  font-weight: 600;
  text-transform: capitalize;
  text-align: center;
}

img {
}

a {
  width: 150;
  height: 112;
}

.d-inline-block {
  display: inline-block!important;
}

@media (prefers-reduced-motion:no-preference) {
  :root {
    scroll-behavior: hidden;
  }
}

@media (prefers-reduced-motion:no-preference) {
  :root {
    scroll-behavior: hidden;
  }
}

element style <div class="paragraph" > <a class="btn dropdown-toggle btn-mini" data-toggle="dropdown" href="#" > Action <span class="caret" > </span > </a > <di.navbar .nav li .dropdown-menu li a white-space: normal; style="width: 300px;" > <div > Long text goes here. </div > </div > </div > {
}

p {
  font-family: Barlow, sans-serif;
  font-size: 12;
}

.dropdown-menu {
  max-width: 300px;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: #ffffff;
  background-color: #fff;
  border-color: #ffffff #ffffff #fff;
}

.nav-link.active {
  color: #0000ff;
  background-color: #fff;
  border-color: #ffffff #ffffff #fff;
}

p {
  color: rgb(0,0,0);
  transform: translateX(21px) translateY(-13px) translateZ(171px);
  font-size: 12;
}

body {
  margin: 0;
  /*font-family: var(--bs-body-font-family);*/
  /*font-size: var(--bs-body-font-size);*/
  /*font-weight: var(--bs-body-font-weight);*/
  /*line-height: var(--bs-body-line-height);*/
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

<div class="dropdown" > <a class="btn btn-min dropdown-toggle" data-toggle="dropdown" href="#" > Action <span class="caret" > </span > </a > <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non nulla eu dui imperdiet eleifend in vel ligula. Ut tempor gravida leo. Sed in tellus justo. Nam vel nisl nulla. Proin sagittis semper nunc et vehicula. Proin quam lacus, feugiat quis diam in, malesuada posuere odio. Integer pharetra sed ante eget posuere. Nullam a dapibus leo, vitae gravida ligula. Praesent consectetur lorem et pellentesque imperdiet. Suspendisse vitae libero auctor, pharetra nunc eu, laoreet dui. Fusce posuere risus risus, id ultricies lectus aliquet et. Nullam eget orci et mauris lacinia sollicitudin non vel felis. Praesent eleifend risus et libero ultrices facilisis. </ul > </div > {
}

body {
}

a:visited: {
  color: rgb(128, 0, 128);
}