.creative-cp-bubble-sidebar-wrapper.thin {
  width: 60px;
  border-radius: 5px; }

.creative-cp-bubble-sidebar-wrapper.normal {
  width: 150px;
  border-radius: 15px; }

.creative-cp-bubble-sidebar-wrapper.wide {
  width: 260px;
  border-radius: 25px; }

.creative-cp-bubble-sidebar-wrapper.attached {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 0; }
  .creative-cp-bubble-sidebar-wrapper.attached .creative-cp-bubble-sidebar {
    border-radius: 0; }
    .creative-cp-bubble-sidebar-wrapper.attached .creative-cp-bubble-sidebar .header:nth-child(2),
    .creative-cp-bubble-sidebar-wrapper.attached .creative-cp-bubble-sidebar .item:nth-child(2) {
      border-top-left-radius: 0;
      border-top-right-radius: 0; }
    .creative-cp-bubble-sidebar-wrapper.attached .creative-cp-bubble-sidebar .header:last-child,
    .creative-cp-bubble-sidebar-wrapper.attached .creative-cp-bubble-sidebar .item:last-child {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0; }

.creative-cp-bubble-sidebar {
  position: relative;
  width: 100%;
  z-index: 99;
  user-select: none; }
  .creative-cp-bubble-sidebar .slider {
    position: absolute;
    z-index: 100;
    transition: top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), width 0.5s, height 0.5s; }
  .creative-cp-bubble-sidebar .header {
    position: relative;
    padding-bottom: 1.5em;
    background: transparent;
    text-align: center;
    cursor: pointer;
    z-index: 101;
    transition: border-radius 1s; }
    .creative-cp-bubble-sidebar .header img {
      width: 50%;
      height: 50%;
      padding: 1em;
      border-radius: 20%; }
    .creative-cp-bubble-sidebar .header .text {
      padding: 0 0.25em; }
  .creative-cp-bubble-sidebar .item {
    position: relative;
    padding: 1em;
    background: transparent;
    text-align: center;
    cursor: pointer;
    z-index: 101;
    transition: border-radius 1s; }
    .creative-cp-bubble-sidebar .item img {
      width: 25%;
      height: 25%;
      padding: 1em;
      border-radius: 20%; }
    .creative-cp-bubble-sidebar .item .text {
      padding: 0 0.25em; }

.creative-cp-bubble-sidebar.thin {
  font-size: small;
  border-radius: 5px; }
  .creative-cp-bubble-sidebar.thin .header {
    margin-bottom: 0;
    padding-bottom: 0; }
  .creative-cp-bubble-sidebar.thin .item img {
    width: 50%;
    height: 50%;
    padding: 0.5em; }
  .creative-cp-bubble-sidebar.thin .header:nth-child(2),
  .creative-cp-bubble-sidebar.thin .item:nth-child(2) {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px; }
  .creative-cp-bubble-sidebar.thin .header:last-child,
  .creative-cp-bubble-sidebar.thin .item:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px; }

.creative-cp-bubble-sidebar.normal {
  font-size: medium;
  border-radius: 15px; }
  .creative-cp-bubble-sidebar.normal .header:nth-child(2),
  .creative-cp-bubble-sidebar.normal .item:nth-child(2) {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px; }
  .creative-cp-bubble-sidebar.normal .header:last-child,
  .creative-cp-bubble-sidebar.normal .item:last-child {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px; }

.creative-cp-bubble-sidebar.wide {
  font-size: large;
  border-radius: 25px; }
  .creative-cp-bubble-sidebar.wide .header:nth-child(2),
  .creative-cp-bubble-sidebar.wide .item:nth-child(2) {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px; }
  .creative-cp-bubble-sidebar.wide .header:last-child,
  .creative-cp-bubble-sidebar.wide .item:last-child {
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px; }
