canvas {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    margin-left:20px;
    margin-right:20px;
    margin-top:10px;
}
#output_logo_profile canvas {
    border-radius: 0%;
    width: 320px !important;
    height: 100px !important;
}
.box-switch, .box-switch-2fa {
        cursor: pointer;
        text-indent: -9999px;
        width: 50px;
        height: 25px;
        background: #D5D4D4;
        display: block;
        border-radius: 25px;
        position: relative;
        float:left;
}
.box-switch:after, .box-switch-2fa:after {
        content: '';
        position: absolute;
        top: 2px;
        left: 3px;
        width: 20px;
        height: 20px;
        background: #fff;
        border-radius: 15px;
        transition: 0.3s;
}
input:checked + .box-switch, input:checked + .box-switch-2fa {
      background: var(--first-color-savebutton);
}
input:checked + .box-switch:after, input:checked + .box-switch-2fa:after {
      left: calc(100% - 3px);
      transform: translateX(-100%);
}
.box-switch:active:after, .box-switch-2fa:active:after {
        width: 30px;
}

.overlay-profile {
  position: absolute;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1;
  width: 80px;
  height:80px;
  transition: .5s ease;
  opacity:0.4;
  color: white;
  font-size: 20px;
  text-align: center;
  border-radius:50%;
  margin-left:20px;
  margin-top:10px;
}

#bg-profile:hover .overlay-profile {
  opacity: 0.7;
}

.overlay-logo_profile {
  position: absolute;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1;
  width: 320px;
  height: 100px;
  transition: .5s ease;
  opacity:0.4;
  color: white;
  font-size: 20px;
  text-align: center;
  border-radius:0%;
  margin-left:20px;
  margin-top:10px;
}

#bg-logo_profile:hover .overlay-logo_profile {
  opacity: 0.7;
}


.tooltip {
    display:inline-block;
    position:relative;
    border-bottom:1px dotted #666;
    text-align:left;
}

.tooltip .bottom {
    min-width:175px;
    top:30px;
    left:10%;
    transform:translate(-20%, 0);
    padding:10px 10px;
    color:#797979;
    background-color:#FFF;
    font-weight:normal;
    font-size:10px;
    border-radius:4px;
    position:absolute;
    z-index:1;
    box-sizing:border-box;
    border:1px solid #e2e2e2;
    display:none;
}

.tooltip:hover .bottom {
    display:block;
}

.tooltip .bottom i {
    position:absolute;
    bottom:100%;
    left:20%;
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
    border-bottom: 1px solid #FFF;
}

.tooltip .bottom i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,50%) rotate(45deg);
    background-color:transparent;
    border:1px solid #e2e2e2;
    box-shadow:0 1px 8px transparent;
}