@font-face {
  font-family: "ClashGrotesk";
  src: url("../fonts/ClashGrotesk-Regular.woff"),
    url("../fonts/ClashGrotesk-Regular.woff2");
  font-family: "ClashGroteskBold";
  src: url("../fonts/ClashGrotesk-Semibold.woff"),
    url("../fonts/ClashGrotesk-Semibold.woff2");
}
body {
  background: url("../img/Mobile-App-Hero-BG-Image-2-1.png"),
    linear-gradient(140deg, #142f29 10%, #000000 18%);
  background-color: #f0f0f0 !important;
  background-attachment: fixed;
  font-family: "ClashGrotesk", sans-serif !important;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.clash_grotesk_bold {
  font-family: "ClashGroteskBold", sans-serif;
}
/* Style the button that is used to open and close the collapsible content */
/* .collapsible {
  background-color: blue;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
} */

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

/* Style pour le cercle en haut des cadres dans la vue du choix entre express et dynamique et pour le choix de l'inspecteur */
.selection_circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid black;
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #fff;
  transition: background-color 1s;
}

.selected {
  border-color: #2fedbf !important;
  border-width: 4px !important;
}

.selected .selection_circle {
  background-color: #2fedbf;
}

#next-button {
  transition: all 1s;
  opacity: 0;
}
.next_button_show {
  opacity: 1 !important;
}
.cursor_pointer {
  cursor: pointer;
  transition: border-color 0.5s ease-out, border-width 0.5s 0.5s ease;
}

.create_new {
  background-color: #2fedbf !important;
  text-decoration: none !important;
}

.vimeo {
  background-color: #86c9ef !important;
}

.btn-download,
.btn-edit {
  font-weight: bold;
  text-align: center;
}

.btn-download {
  background-color: #2fedbf;
}

.btn-edit {
  background-color: white;
  border: 1px solid black;
}

/* 
.btn_qrcard {
  width: initial;
  margin-bottom: 5px;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  padding: 10px;
} */
.nav-link.active {
  color: #30e8bb !important;
}

.see_qrcode {
  background-color: #30e8bb !important;
  color: #000 !important;
}

.edit_qrcode {
  background-color: #ff9b6ab8;
}

.dl_qrcode {
  background-color: #e1e1e1;
}

/* .qr_card_row {
  border: 1px solid #000;
  background-color: #909090;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  margin-bottom: 15px;
}

.qr_card_col1 {
  display: grid;
  width: 70%;
}

.qr_card_col2 {
  width: 30%;
  display: grid;
} */

.goback {
  text-decoration: underline;
}

.gobk {
  margin-top: 15px;
  margin-left: 15px;
}

.seemore {
  width: 100%;
  background-color: #e2e2e2 !important;
  padding: 10px;
  margin-top: 15px;
  cursor: pointer;
  border-radius: 8px;
}

.myVcImg {
  height: 95px;
  width: 95px;
  border-radius: 50%;
  background-position: center center !important;
  background-size: cover !important;
  margin: 10px auto 20px auto;
}

.topbanner_vcard {
  align-items: center;
  display: grid;
  margin: auto;
}

.short_actions {
  display: flex;
}

.short_actions_img {
  width: 30px;
  height: auto;
  margin: auto;
  margin-bottom: 10px;
}

.my_short_act {
  align-items: center;
  display: grid;
  margin: auto;
  padding: 5px 7%;
  cursor: pointer;
}

.myInfoline {
  display: flex;
  column-gap: 25px;
  border-bottom: 1px solid #cacaca;
  padding-bottom: 35px;
}

.myInfoSpan {
  color: #909090;
  font-size: 14px;
}

li.myInfoline:not(:last-child) {
  margin-bottom: 35px;
}

.socials_img {
  width: 45px;
  height: auto;
  margin-right: 5px;
}

.dl_vcard {
  width: 100%;
  background-color: #000 !important;
  color: #fff !important;
  padding: 10px;
  cursor: pointer;
  border-radius: 8px;
}

.dl_vcard:hover {
  background-color: rgb(39, 39, 39) !important;
}

.company-header-avatar {
  width: 95px;
  height: 95px;
  -webkit-border-radius: 60px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 60px;
  -moz-background-clip: padding;
  border-radius: 60px;
  background-clip: padding-box;
  margin: 10px auto 20px auto;
  background-size: cover;
  background-position: center center;
}
.internet {
  background: #d9d9d9 !important;
}

.ytb {
  background-color: #c4302b !important;
}

.fb {
  background-color: #3b5998 !important;
}

.insta {
  background: conic-gradient(
    from 180deg at 50% 50%,
    #ffc935 18.976226449012756deg,
    #f58529 49.387160539627075deg,
    #515bd4 154.2852544784546deg,
    #8134af 231.6749882698059deg,
    #dd2a7b 310.62570333480835deg,
    #f58529 353.3640646934509deg
  ) !important;
}

.linkedin {
  background: #0077b5 !important;
}

.snap {
  background: #fffc00 !important;
}

.reddit {
  background: #ff5700 !important;
}

.twitch {
  background: #6441a5 !important;
}

.opensea {
  background: #0ff1ce !important;
}

.soundcloud {
  background: #f70 !important;
}

.spotify {
  background: #81b71a !important;
}

.twitter {
  background: #00acee !important;
}