/* email-settings-form */
.form h3 {
    color: var(--262626, #262626);
    font-family: var(--font-primary);
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
}
.form .text_description {
    color: #7B7B7B;
    font-family: var(--font-primary);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-top: 8px;
}
.form .field-group {
    margin-bottom: 20px;
}

.form .field-group label{
    color: #262626;
    font-family: var(--font-primary);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    padding-bottom: 8px;
    margin-bottom: 0px;
}
.field-button .button {
    border-radius: 12px;
    background: var(--main-color);
    color: #FFF;
    text-align: center;
    font-family: var(--font-primary);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    padding: 16px 36px;
    border: none;
}
.field-button .btn-cancel {
    padding: 16px 36px;
    color: var(--main-color);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}
.field-group .cwi_uploader button {
	background-color: #9C63F4;
	width: 56px;
	height: 100%;
	border-radius: 0 8px 8px 0;
	border-left: none;
	border-top: 1px solid #D4D3D3;
	border-right: 1px solid #D4D3D3;
	border-bottom: 1px solid #D4D3D3;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.field-group .cwi_uploader button * {
	pointer-events: none;
}
.field-group .cwi_uploader {
	height: 56px;
	display: flex;
}
.field-group .cwi_uploader .icon-upload {
    content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1060_80)'%3E%3Cpath d='M0.713867 15V16.4286C0.713867 17.1863 1.01489 17.9131 1.55071 18.4489C2.08652 18.9847 2.81325 19.2857 3.57101 19.2857H16.4282C17.1859 19.2857 17.9126 18.9847 18.4485 18.4489C18.9843 17.9131 19.2853 17.1863 19.2853 16.4286V15' stroke='white' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M5.71387 5.71387L9.99958 0.713867L14.2853 5.71387' stroke='white' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M10 0.713867V13.571' stroke='white' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1060_80'%3E%3Crect width='20' height='20' fill='white'%3E%3C/rect%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E ");
}
.field-group .cwi_uploader input {
	border: 1px solid #D4D3D3;
	height: 100%;
	border-radius: 8px 0 0 8px;
}
.form .field-group input,
.form .field-group select {
    padding: 10px 16px;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #262626;
    width: 100%;
    border: 1px solid #D4D3D3;
    display: block;
    border-radius: 8px;
    outline: none;
    height: 56px;
}
.form .field-group #from_email{
    margin-top: 16px;
}
.form .field-group textarea{
    color: #262626;
    font-family: var(--main-color);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #D4D3D3;
    background: #FFF;
    width: 100%;
    outline: none;
    padding-right: 60px !important;
}


/* CheckBox Swithc Style */
.form .field-group-checkbox-switch .switch {
    display: inline-block;
    position: relative;
    width: 60px;
    height: 30px;
    padding: 0px;
    
}
  
.form .field-group-checkbox-switch .switch input {
    display:none;
}
  
.form .field-group-checkbox-switch .slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
}
  
.form .field-group-checkbox-switch .slider:before {
    background-color: #fff;
    bottom: 3px;
    content: "";
    height: 24px;
    left: 3px;
    position: absolute;
    transition: .4s;
    width: 24px;
}
  
.form .field-group-checkbox-switch {
    display: flex;
    justify-content: space-between;
    margin-bottom: 27px;
}
.form .field-group-checkbox-switch label {
    padding: 0px;
    margin: 0px;
}
.form .field-group-checkbox-switch input:checked + .slider {
    background-color: var(--main-color);;
}

.form .field-group-checkbox-switch input:checked + .slider:before {
    transform: translateX(26px);
}

.form .field-group-checkbox-switch .slider.round {
    border-radius: 34px;
}

.form .field-group-checkbox-switch .slider.round:before {
    border-radius: 50%;
}

/* End Checkbox Style */

/* field-test-email */
.form .field-test-email,
.form .spam-check {
    display: flex;
    gap: 24px;
    align-items: center;
    display: flex;
    justify-content: space-between;
}
.form .field-test-email button {
    display: inline-flex;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--main-color);;
    box-shadow: 0px 8px 20px 0px rgba(156, 99, 244, 0.20);
    color:#FFF;
    text-align: center;
    font-family: var(--font-primary);
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    border: none;
    height: 40px;
}

.form .preview-action {
    display: flex;
    align-items: center;
    display: flex;
    justify-content: space-between;
}
.form .preview-action .preview-action-button {
    display: flex;
    gap: 16px;
}
.form .preview-action a{
    display: inline-flex;
    height: 40px;
    padding: 16px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid var(--main-color);;
    background: #FFF;
    box-shadow: 0px 8px 20px 0px rgba(156, 99, 244, 0.20);
    color: var(--main-color);;
    text-align: center;
    font-family: var(--font-primary);
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 133.333% */
}
.status-spam {
    width: 148px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #e8f4e8;
    text-align: center;;
    line-height: 56px;
}
.status-spam  .icon-check {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cmask id='mask0_2839_103' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_2839_103)'%3E%3Cpath d='M9.55028 17.3093L4.58105 12.34L5.2945 11.6266L9.55028 15.8823L18.7061 6.72656L19.4195 7.44001L9.55028 17.3093Z' fill='%23139011'/%3E%3C/g%3E%3C/svg%3E");
    position: relative;
    top: 5px;
    right: 5px;
}
.status-passed{
    color: #139011;
    text-align: center;
    font-family: var(--font-primary);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
}
.btn-close {
    display: inline-flex;
    padding: 16px 32px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    background: var(--main-color);;
    box-shadow: 0px 8px 20px 0px rgba(156, 99, 244, 0.20);
    color: #FFF;
    text-align: center;
    font-family: var(--font-primary);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 133.333% */
    margin: 0 auto;
    position: absolute;
    left:50%; 
    transform:translate(-50%); 
}

.form .field-group-radio,
.form .field-group-checkbox {
    display: flex;
    margin-bottom: 0px;
}

.form .field-group-checkbox  {
    margin-top: 30px;
}
.form .icon-add {
    content: url("data:image/svg+xml,%0A%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_680_5231)'%3E%3Cpath d='M10 5.71436V14.2858' stroke='%239C63F4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.71484 10.0001H14.2863' stroke='%239C63F4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.0006 0.714355H5.00056C2.63362 0.714355 0.714844 2.63314 0.714844 5.00007V15.0001C0.714844 17.367 2.63362 19.2858 5.00056 19.2858H15.0006C17.3675 19.2858 19.2863 17.367 19.2863 15.0001V5.00007C19.2863 2.63314 17.3675 0.714355 15.0006 0.714355Z' stroke='%239C63F4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_680_5231'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
#continue_if_not_same_form  {
    margin-top: 20px;
    align-items: center;
    
}
#continue_if_not_same_form  span {
    width: 200px;
}
#continue_if_not_same_form input[type="number"] {
    width: 200px;
}
.form .field-group-radio input[type="radio"] {
    width: 20px;
    height: 20px;
    outline: none;
    border: none;
    accent-color: #9C63F4;
    margin-right: 8px;
}
.form .field-group-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    outline: none;
    border: none;
    accent-color: #9C63F4;
    margin-right: 8px;
    padding: 0px !important
}
.form .field-group-flex {
    display: flex;
    gap: 16px;
    position: relative;
}

.form .inner-repeater {
    padding: 30px;
    background: #9d63f412;
    border-radius: 8px;
    margin-bottom: 20px;
}
.deep-inner-repeater-list,
.outer-list {
    position: relative;
}

.icon-close {
    position: absolute;
    right: -12px;
    top: -12px;

}
form .icon-close {
    content: url("data:image/svg+xml,%3Csvg fill='%23000000' width='24px' height='24px' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 0c-8.836 0-16 7.163-16 16s7.163 16 16 16c8.837 0 16-7.163 16-16s-7.163-16-16-16zM16 30.032c-7.72 0-14-6.312-14-14.032s6.28-14 14-14 14 6.28 14 14-6.28 14.032-14 14.032zM21.657 10.344c-0.39-0.39-1.023-0.39-1.414 0l-4.242 4.242-4.242-4.242c-0.39-0.39-1.024-0.39-1.415 0s-0.39 1.024 0 1.414l4.242 4.242-4.242 4.242c-0.39 0.39-0.39 1.024 0 1.414s1.024 0.39 1.415 0l4.242-4.242 4.242 4.242c0.39 0.39 1.023 0.39 1.414 0s0.39-1.024 0-1.414l-4.242-4.242 4.242-4.242c0.391-0.391 0.391-1.024 0-1.414z'%3E%3C/path%3E%3C/svg%3E");
}
.form .field-group-flex .icon-delete {
    top: 16px;
    right: -24px;
    position: absolute;
}
.form .icon-delete {
	content: url("data:image/svg+xml,%0A%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1061_585)'%3E%3Cpath d='M1.42773 5H18.5706' stroke='%23BE2C2C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.57227 5H16.4294V17.8571C16.4294 18.236 16.2788 18.5994 16.011 18.8673C15.7431 19.1351 15.3797 19.2857 15.0008 19.2857H5.00084C4.62195 19.2857 4.25859 19.1351 3.99068 18.8673C3.72278 18.5994 3.57227 18.236 3.57227 17.8571V5Z' stroke='%23BE2C2C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.42773 4.99995V4.28566C6.42773 3.33846 6.80401 2.43005 7.47378 1.76028C8.14355 1.09051 9.05196 0.714233 9.99916 0.714233C10.9464 0.714233 11.8548 1.09051 12.5245 1.76028C13.1943 2.43005 13.5706 3.33846 13.5706 4.28566V4.99995' stroke='%23BE2C2C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.85742 9.28784V15.0043' stroke='%23BE2C2C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.1426 9.28784V15.0043' stroke='%23BE2C2C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1061_585'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.btn-add {
    color: var(--main-color);;
}


.form .field-group .radio-group {
	display: flex;
	padding-top: 8px;
}

.form .field-group .radio-group .input-radio {
	display: flex;
	margin-right: 40px;
}
.form .field-group .radio-group .input-radio label {
    font-family: "var(--font-primary)", Sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
}

.form .field-group .radio-group .input-radio input.type,
.form .field-group .radio-group .input-radio input[type="radio"]{
	width: 20px;
	height: 20px;
	outline: none;
	border: none;
	accent-color: #9C63F4;
	margin-right: 8px;
}
.form .group-radio label {
    display: flex;
}
.form .cs_info_button {
    display: flex;
    position: relative;
}

.form span.cs_info_trigger {
    width: 20px;
    height: 20px;
    display: inline-block;
    cursor: pointer;
}

.form .cs_info_button.actv .cs_info_trigger svg path {
    stroke: #9C63F4;
}

.form .cs_info_popover {
    visibility: hidden;
    position: absolute;
    top: 35px;
    right: -45px;
    width: 320px;
    background-color: #fff;
    padding: 16px 24px;
    border-radius: 16px;
    z-index: -999;
    box-shadow: 0 4px 28px rgb(0 0 0 / 15%);
    text-align: left;
}

.form .cs_info_button.actv .cs_info_popover {
    visibility: visible;
    z-index: 999;
    transition: visibility 0.35s linear 0s;
}

.form .cs_info_popover::before {
    content: '';
    position: absolute;
    display: inline-block;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 19px solid #fff;
    top: -10px;
    right: 38px;
}

.form .cs_info_title {
    font-size: 13px;
    line-height: 16px;
    color: #262626;
    font-weight: 700;
    font-family: var(--font-primary);
    margin-bottom: 8px;
}

.form .cs_info_content {
    font-size: 13px;
    line-height: 16px;
    font-family: var(--font-primary);
    font-weight: 500;
}

.form span.cs_info_close {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMDAwMDIgMUwxIDkiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMSAxTDkuMDAwMDIgOSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=);
    width: 10px;
    height: 10px;
    display: inline-block;
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer;
}
.form .submit {
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    color: #FFFFFF;
    background: var(--main-color);;
    border-radius: 12px;
    margin: 0 auto;
    cursor: pointer;
}

.form .dropdown .select-btn {
	font-family: var(--font-primary);
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 24px;
	display: block;
	width: 100%;
	min-height: 58px;
	height: auto;
	color: #262626;
	padding: 16px;
	background: #FFFFFF;
	border: 1px solid #D4D3D3;
	border-radius: 8px;
	display: block;
	overflow: scroll;
}

.form .dropdown .select-btn::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.form .dropdown .select-btn {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

.select-btn p {
	margin: 0px;
	display: block;
	width: auto;
	position: relative;
	overflow: hidden;
}

.form .dropdown {
	margin-bottom: 0px;
}

.form .dropdown dd, .form .dropdown dt {
	margin: 0px;
	padding: 0px;
}

.form .dropdown ul {
    
}

.form .dropdown dd {
	position: relative;
    
}

.form .dropdown dt a span, .multiSel span {
	cursor: pointer;
	display: inline-block;
	padding: 0 3px 2px 0;
	position: relative;
    background-color: white;

}
.form .dropdown .select-btn {
    /* inline SVG */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A%23424242%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%204.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A");
    background-position: right 18px center;
    background-repeat: no-repeat;
    background-size: auto 20px;
    outline: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

.form .dropdown dt a span, .multiSel span:before {
	position: relative;
	content: ',';
}

.form .dropdown dt a span, .multiSel span:first-child:before {
	content: ' ';
}

.form .dropdown dd ul {
	background: #FFFFFF;
	box-shadow: 0px 16px 28px rgba(0, 0, 0, 0.05);
	border-radius: 8px;
	border: 0;
	display: none;
	left: 0px;
	padding: 8px;
	position: absolute;
	top: 2px;
	width: 100%;
	list-style: none;
	height: 176px;
	overflow: auto;
	z-index: 999;
}

.form .dropdown dd ul li {
	font-family: var(--font-primary);
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 24px;
	color: #262626;
}

.form .dropdown span.value {
	display: none;
}

.form .dropdown dd ul li a {
	padding: 5px;
	display: block;
}

.form .dropdown dd ul li a:hover {
	background-color: #fff;
}

.form .select-btn {
	position: relative;
}

.hida {
	display: block;
	width: 100%;
	height: 100%;
}

.form .dropdown dd ul li input {
	padding: 0;
	height: initial;
	width: initial;
	margin-bottom: 0;
	display: none;
	cursor: pointer;
}

.form .dropdown dd ul li label:before {
    content: url("data:image/svg+xml,%0A%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='19' height='19' rx='2.35714' fill='white' stroke='%23D4D3D3'/%3E%3C/svg%3E%0A");
    position: relative;
    top: 3px;
}

.form .dropdown dd ul li label {
	padding: 8px;
	font-family: var(--font-primary);
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 24px;
	color: #262626;
    display: flex;
    gap: 10px;
}

.form .dropdown dd ul li label:hover {
	background: rgb(156 99 244 / 10%);
	border-radius: 8px;
}

.form .dropdown dd ul li input:checked + label:before {
    content: url("data:image/svg+xml,%0A%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='19' height='19' rx='2.35714' fill='%239C63F4' stroke='%239C63F4'/%3E%3Cg clip-path='url(%23clip0_673_4112)'%3E%3Cpath d='M4.42773 11.3286L6.76773 14.3371C6.84669 14.4397 6.94787 14.5231 7.06366 14.581C7.17945 14.6389 7.30686 14.6698 7.43631 14.6714C7.56367 14.6729 7.68976 14.646 7.80541 14.5926C7.92107 14.5392 8.02337 14.4607 8.10488 14.3628L15.5706 5.32855' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_673_4112'%3E%3Crect width='12' height='12' fill='white' transform='translate(4 4)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.form .field-group select {
    background-color: white;
  /* inline SVG */
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A%23424242%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%204.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A");
  background-position: right 18px center;
  background-repeat: no-repeat;
  background-size: auto 20px;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
.form .field-group select::-ms-expand {
    display: none;
  }

  .avatar-upload {
    position: relative;
    max-width: 205px;
    margin: 10px auto;
  }

  .avatar-upload .avatar-edit {
    position: absolute;
    right: 12px;
    z-index: 1;
    top: 10px;
  }
  .avatar-upload .avatar-edit input {
    display: none;
  }
  .avatar-upload .avatar-edit input + label {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-bottom: 0;
    border-radius: 100%;
    background: #FFFFFF;
    border: 1px solid transparent;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    font-weight: normal;
    transition: all 0.2s ease-in-out;
  }
  .avatar-upload .avatar-edit input + label:hover {
    background: #f1f1f1;
    border-color: #d6d6d6;
  }
  .avatar-upload .avatar-edit input + label:after {
    content: url("data:image/svg+xml,%3Csvg width='20px' height='20px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.625 15C5.625 14.5858 5.28921 14.25 4.875 14.25C4.46079 14.25 4.125 14.5858 4.125 15H5.625ZM4.875 16H4.125H4.875ZM19.275 15C19.275 14.5858 18.9392 14.25 18.525 14.25C18.1108 14.25 17.775 14.5858 17.775 15H19.275ZM12.2914 5.46127C12.5461 5.13467 12.4879 4.66338 12.1613 4.40862C11.8347 4.15387 11.3634 4.21212 11.1086 4.53873L12.2914 5.46127ZM7.20862 9.53873C6.95387 9.86533 7.01212 10.3366 7.33873 10.5914C7.66533 10.8461 8.13662 10.7879 8.39138 10.4613L7.20862 9.53873ZM12.2914 4.53873C12.0366 4.21212 11.5653 4.15387 11.2387 4.40862C10.9121 4.66338 10.8539 5.13467 11.1086 5.46127L12.2914 4.53873ZM15.0086 10.4613C15.2634 10.7879 15.7347 10.8461 16.0613 10.5914C16.3879 10.3366 16.4461 9.86533 16.1914 9.53873L15.0086 10.4613ZM12.45 5C12.45 4.58579 12.1142 4.25 11.7 4.25C11.2858 4.25 10.95 4.58579 10.95 5H12.45ZM10.95 16C10.95 16.4142 11.2858 16.75 11.7 16.75C12.1142 16.75 12.45 16.4142 12.45 16H10.95ZM4.125 15V16H5.625V15H4.125ZM4.125 16C4.125 18.0531 5.75257 19.75 7.8 19.75V18.25C6.61657 18.25 5.625 17.2607 5.625 16H4.125ZM7.8 19.75H15.6V18.25H7.8V19.75ZM15.6 19.75C17.6474 19.75 19.275 18.0531 19.275 16H17.775C17.775 17.2607 16.7834 18.25 15.6 18.25V19.75ZM19.275 16V15H17.775V16H19.275ZM11.1086 4.53873L7.20862 9.53873L8.39138 10.4613L12.2914 5.46127L11.1086 4.53873ZM11.1086 5.46127L15.0086 10.4613L16.1914 9.53873L12.2914 4.53873L11.1086 5.46127ZM10.95 5V16H12.45V5H10.95Z' fill='%23000000'/%3E%3C/svg%3E");
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
  }
  .avatar-upload .avatar-preview {
    width: 192px;
    height: 192px;
    position: relative;
    border-radius: 100%;
    border: 6px solid #F8F8F8;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
  }
  .avatar-upload .avatar-preview > div {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  


.field-group.success input{
    border-color: #2ecc71;
  }
  
  .field-group.error input{
    border-color: #e74c3c;
  }
  
  .field-group i{
    visibility: hidden;
    position: absolute;
    top: 36px;
    right: 10px;
  }
  
  .field-group i.fa-eye {
    visibility: visible;
    cursor: pointer;
  }
  
  .field-group i.fa-eye-slash {
    visibility: hidden;
    cursor: pointer;
  }
  
  .field-group.success i.fa-check-circle {
    visibility: visible;
    color: #2ecc71;
    top: 36px;
    right: 30px;
  }
  
  .field-group.error i.fa-exclamation-circle{
    visibility: visible;
    color: #e74c3c;
    top: 36px;
    right: 30px;
  }
  
  .field-group small{
    visibility: hidden;
    bottom: 0;
    left: 0;
  }
  
  .field-group.error small{
    visibility: visible;
    color: #e74c3c;
  }

  .action-button .action > ul {
    position: absolute;
    text-align: right;
    list-style: none;
    margin: 0;
    width: 172px;
    right: -8px;
    top: 42px;
    z-index: 9;
    display: none;
    padding-left: 0px;
   
}
.action-button .action > ul.active {
    display: block;
    margin-left: -125px;
    height: fit-content;   
}
.action-button .action > ul::after {
    content: "";
    position: absolute;
    display: inline-block;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 19px solid #fff;
   top: -10px;
    right: 0px;
}

.popup-action li {
    cursor: pointer;
}
.action-button .action > ul a {
    display: block !important;
    padding: 15px 24px !important;
    color: #000;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    cursor: pointer;
}
.action-button .action {
    position: relative;
}
.action-button .action .action-trigger {
    width: 5px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}
.action-button .action .action-trigger .dot {
    width: 5px;
    height: 5px;
    background-color: #6F6F6F;
    display: block;
    margin-bottom: 3px;
    border-radius: 50%;
}
.action-button .action .action-trigger .dot:last-child {
    margin-bottom: 0;
}
.action-button .action .action-trigger:hover .dot {
    background-color: var(--main-color);
}
.icon-edit {
    margin-bottom: -5px;
    margin-right: 10px;
    width: 20px;
    height: 20px;
    content: url('data:image/svg+xml,%3Csvg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0_2_336)"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M15.3077 1.21289C15.184 1.21289 15.0616 1.2376 14.9476 1.28558C14.8335 1.33356 14.7303 1.40383 14.6438 1.49227L14.639 1.49716L2.96085 13.1186L1.43601 18.5644L6.88186 17.0396L18.5033 5.36145L18.5056 5.35914C18.5926 5.27282 18.6617 5.17012 18.7089 5.05696C18.756 4.94381 18.7803 4.82244 18.7803 4.69986C18.7803 4.57727 18.756 4.4559 18.7089 4.34275C18.6617 4.22959 18.5926 4.12689 18.5056 4.04057L18.5032 4.03813L15.9716 1.49229C15.8851 1.40384 15.7819 1.33356 15.6679 1.28558C15.5539 1.2376 15.4314 1.21289 15.3077 1.21289ZM14.5597 0.363865C14.7965 0.26422 15.0508 0.212891 15.3077 0.212891C15.5646 0.212891 15.8189 0.26422 16.0557 0.363865C16.2918 0.463212 16.5057 0.60859 16.685 0.791506C16.6856 0.792054 16.6861 0.792602 16.6866 0.793151L19.2098 3.33057C19.2103 3.33101 19.2107 3.33145 19.2111 3.3319C19.3913 3.51091 19.5343 3.72374 19.632 3.95817C19.7299 4.19319 19.7803 4.44526 19.7803 4.69986C19.7803 4.95445 19.7299 5.20653 19.632 5.44154C19.5343 5.67601 19.3912 5.88888 19.2111 6.06791C19.2106 6.06832 19.2102 6.06873 19.2098 6.06914L7.49784 17.8383C7.43698 17.8994 7.36133 17.9438 7.27824 17.9671L0.849671 19.7671C0.675724 19.8158 0.489032 19.7669 0.361302 19.6391C0.233573 19.5114 0.184669 19.3247 0.233374 19.1508L2.03337 12.7222C2.05664 12.6391 2.10101 12.5634 2.16216 12.5026L13.9313 0.790552C14.1104 0.608085 14.324 0.46304 14.5597 0.363865Z" fill="%23000001"/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id="clip0_2_336"%3E%3Crect width="20" height="20" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A');
}
.icon-delete {
    margin-bottom: -5px;
    margin-right: 10px;
    width: 20px;
    height: 20px;
	content: url("data:image/svg+xml,%0A%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1061_585)'%3E%3Cpath d='M1.42773 5H18.5706' stroke='%23BE2C2C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.57227 5H16.4294V17.8571C16.4294 18.236 16.2788 18.5994 16.011 18.8673C15.7431 19.1351 15.3797 19.2857 15.0008 19.2857H5.00084C4.62195 19.2857 4.25859 19.1351 3.99068 18.8673C3.72278 18.5994 3.57227 18.236 3.57227 17.8571V5Z' stroke='%23BE2C2C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.42773 4.99995V4.28566C6.42773 3.33846 6.80401 2.43005 7.47378 1.76028C8.14355 1.09051 9.05196 0.714233 9.99916 0.714233C10.9464 0.714233 11.8548 1.09051 12.5245 1.76028C13.1943 2.43005 13.5706 3.33846 13.5706 4.28566V4.99995' stroke='%23BE2C2C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.85742 9.28784V15.0043' stroke='%23BE2C2C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.1426 9.28784V15.0043' stroke='%23BE2C2C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1061_585'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.icon-edit {
    margin-bottom: -5px;
    margin-right: 10px;
    width: 20px;
    height: 20px;
    content: url('data:image/svg+xml,%3Csvg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0_2_336)"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M15.3077 1.21289C15.184 1.21289 15.0616 1.2376 14.9476 1.28558C14.8335 1.33356 14.7303 1.40383 14.6438 1.49227L14.639 1.49716L2.96085 13.1186L1.43601 18.5644L6.88186 17.0396L18.5033 5.36145L18.5056 5.35914C18.5926 5.27282 18.6617 5.17012 18.7089 5.05696C18.756 4.94381 18.7803 4.82244 18.7803 4.69986C18.7803 4.57727 18.756 4.4559 18.7089 4.34275C18.6617 4.22959 18.5926 4.12689 18.5056 4.04057L18.5032 4.03813L15.9716 1.49229C15.8851 1.40384 15.7819 1.33356 15.6679 1.28558C15.5539 1.2376 15.4314 1.21289 15.3077 1.21289ZM14.5597 0.363865C14.7965 0.26422 15.0508 0.212891 15.3077 0.212891C15.5646 0.212891 15.8189 0.26422 16.0557 0.363865C16.2918 0.463212 16.5057 0.60859 16.685 0.791506C16.6856 0.792054 16.6861 0.792602 16.6866 0.793151L19.2098 3.33057C19.2103 3.33101 19.2107 3.33145 19.2111 3.3319C19.3913 3.51091 19.5343 3.72374 19.632 3.95817C19.7299 4.19319 19.7803 4.44526 19.7803 4.69986C19.7803 4.95445 19.7299 5.20653 19.632 5.44154C19.5343 5.67601 19.3912 5.88888 19.2111 6.06791C19.2106 6.06832 19.2102 6.06873 19.2098 6.06914L7.49784 17.8383C7.43698 17.8994 7.36133 17.9438 7.27824 17.9671L0.849671 19.7671C0.675724 19.8158 0.489032 19.7669 0.361302 19.6391C0.233573 19.5114 0.184669 19.3247 0.233374 19.1508L2.03337 12.7222C2.05664 12.6391 2.10101 12.5634 2.16216 12.5026L13.9313 0.790552C14.1104 0.608085 14.324 0.46304 14.5597 0.363865Z" fill="%23000001"/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id="clip0_2_336"%3E%3Crect width="20" height="20" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A');
}

.popup-action:before {
    position: absolute;
    height: 100%;
    width: 100%;
    content: '';
    left: 0;
    top: 0;
    border-radius: 8px;
    box-shadow: 0px 16px 28px rgb(0 0 0 / 5%);
    z-index: -1;
    border-radius: 8px;
    background: #fff;
}