.my-checkbox  {display:inline-block; }
	.my-checkbox  span.titl{font-size:14px; }
	.my-checkbox label{padding-left:0px; }
		.toggle {
			position: relative;
			display: inline-block;
			margin-right:6px;
			width: 34px;
			height: 20px;
			cursor: pointer;
			-webkit-tap-highlight-color: transparent;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
		.toggle span {
			position: absolute;
			top: 4px;
			left: 4px;
			width: 16px;
			height: 16px;
			display: block;
			background: #f06678;
			border-radius: 10px;
			-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
			box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
			-webkit-transition: all .2s ease;
			-o-transition: all .2s ease;
			transition: all .2s ease;
		}
		.cus-chkbox:checked + .toggle:before, #cbx2:checked + .toggle:before {
			background: #8ac6e8;
		}
		.toggle:before {
			content: "";
			position: relative;
			top: 3px;
			left: 3px;
			width: 36px;
			height: 18px;
			font-size: 10px;
			display: block;
			background: #ffcdcd;
			border-radius: 8px;
			-webkit-transition: background .2s ease;
			-o-transition: background .2s ease;
			transition: background .2s ease;
		}
		.toggle span:before {
			content: "";
			position: absolute;
			display: block;
			margin: -18px;
			width: 56px;
			height: 56px;
			background: rgba(255, 123, 176, 0.5);
			border-radius: 50%;
			-webkit-transform: scale(0);
			-ms-transform: scale(0);
			transform: scale(0);
			opacity: 1;
			pointer-events: none;
		}
		.cus-chkbox:checked + .toggle span:before, #cbx2:checked + .toggle span:before {
			-webkit-transform: scale(1);
			-ms-transform: scale(1);
			transform: scale(1);
			opacity: 0;
			-webkit-transition: all .4s ease;
			-o-transition: all .4s ease;
			transition: all .4s ease;
		}
		.cus-chkbox:checked + .toggle span, #cbx2:checked + .toggle span {
			background: #0052b0;
			-webkit-transform: translateX(20px);
			-ms-transform: translateX(20px);
			transform: translateX(20px);
			-webkit-transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
			-o-transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
			transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
			-webkit-box-shadow: 0 3px 8px rgba(255, 123, 176, 0.2);
			box-shadow: 0 3px 8px rgba(255, 123, 176, 0.2);
		}
		
    /* .avatar-container {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      overflow: hidden;
      background-color: #ccc;
      position: relative;
    } */
    
    /* .avatar-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    } */
    
    .avatar-container input[type="file"] {
      width: 100%;
      height: 100%;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;
    }

    .avatar-container {
      position: relative;
      display: inline-block;
    }

    .avatar-container img {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      object-fit: cover;
    }

    .edit-icon {
      position: absolute;
      bottom: 10px;
      right: 10px;
      font-size: 20px;
      background-color: #fff;
      color: #000;
      border-radius: 50%;
      padding: 5px;
      cursor: pointer;
      border: 1px solid #dedede;
    }