Cookies

by Andrey Izman

HTML

<div class="v-application ">


<div data-v-4821bacf="" data-v-add44012="" class="container first-layer container--fluid ma-0 pa-0">
  <div data-v-4821bacf="" class="first-layer-card v-card v-sheet theme--light rounded-0" style="background-color: rgb(36, 37, 55); border-color: rgb(36, 37, 55);">
    <div data-v-4821bacf="" class="v-card__text d-flex flex-wrap justify-center align-md-center">
      
      <div data-v-4821bacf="" class="d-flex mx-auto cookies-top">
        <div data-v-4821bacf="" class="v-image v-responsive flex-grow-0 flex-md-shrink-1 ml-md-auto  theme--light" style="height: 41px; width: 38px;">
          <div class="v-responsive__sizer" style="padding-bottom: 107.895%;"></div>
          <div class="v-image__image v-image__image--cover" style="background-image: url(&quot;https://s3.eu-west-1.amazonaws.com/dev-assets-cms.cyberghostvpn.com/js/cookie-consent/fonts/first_layer_image.svg&quot;); background-position: center center;"></div>
          <div class="v-responsive__content" style="width: 38px;"></div>
        </div>
        <div data-v-4821bacf="" class="header pl-6">
          <p data-v-4821bacf="" class="white--text">We use cookies and other technologies to help keep our site secure and reliable. I agree and may revoke or change my consent at any time with effect in the future.<br></p>
        </div>
      </div>
      
      
      <div data-v-4821bacf="" class="d-flex mx-auto ml-xl-0 flex-column flex-md-row">
        <div data-v-4821bacf="" class="moreButton mx-5 my-2 my-md-0"><button data-v-4821bacf="" type="button" class="v-btn v-btn--outlined theme--dark v-size--large"><span class="v-btn__content"><span data-v-4821bacf="" class="font-weight-bold"> Change Settings</span></span></button></div>
        <div data-v-4821bacf="" class="acceptButton mx-5 my-2 my-md-0 mr-md-auto"><button data-v-4821bacf="" type="button" class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--large"><span class="v-btn__content"><span data-v-4821bacf=""...

CSS

.container.fill-height {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.first-layer[data-v-4821bacf] {
  font-family: montserrat,verdana,sans-serif;
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 99999;
}
.v-sheet.v-card:not(.v-sheet--outlined) {
  box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
}
.first-layer .first-layer-card[data-v-4821bacf] {
  display: flex;
}
.v-application .mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.v-application .d-flex {
  display: flex !important;
}

/*media*/
.v-application .flex-md-row {
  flex-direction: row !important;
}

/*media*/
.v-application .align-md-center {
  align-items: center !important;
}

.v-application .justify-center {
  justify-content: center !important;
}

.v-application .flex-wrap {
  flex-wrap: wrap !important;
}

.cookies-top {
    color: rgba(0,0,0,.6);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.375rem;
  letter-spacing: .0071428571em;
}

.first-layer .first-layer-card .header[data-v-4821bacf] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 49vw;
  font-size: 15px;
}

.v-application .pl-6 {
  padding-left: 24px !important;
}