/*-----------------------------------------------------------  ADD/REMOVE FIELD GROUP  ---------*/
.field_group {
	border: 1px dashed black;
	margin-top: 10px;
}	

.buttons_field_group { text-align: center; }

.buttons_field_group span {
	background-color: red;
	color: white;
	padding: 4px 10px;
	margin: 5px 0;
	display: inline-block;
	cursor: pointer;
}

#add_fgroup { background-color: green; }
#remove_fgroup { background-color: red; }

select#unit_number_select {
	width: 25%;
	height: 28px;
	margin: 5px 6px 0 0;
}

input#unit_number_index{
	width: calc(100% - 26.2%);
	float: left;
}

form.default .field_group {
	border: none;
	margin-top: 20px;
	position: relative;
}

form.default .buttons_field_group {
	float: right;
	margin-bottom: 20px;
}

form.default .buttons_field_group #remove_fgroup {
	border: 1px solid;
	padding: 5px 20px;
	transition: all 0.2s linear;
}

form.default .buttons_field_group #add_fgroup {
	border: 1px solid;
	padding: 5px 20px;
	transition: all 0.2s linear;
}

form.default .buttons_field_group #remove_fgroup:hover,
form.default .buttons_field_group #add_fgroup:hover {
	transition: all 0.2s linear;
}

#remove_fgroup {
	background-color: #ff6347 !important;
	color: #ffffff;
	padding: 2px 7px;
	position: absolute;
	right: 0;
	top: -25px;
	cursor: pointer;
}

#remove_fgroup:hover{
	background: #ff0000;
}

@media screen and (min-width:499px) {
	.content_complement{
		width: calc(100% - 210px);
		display: table;
	}
}
 @media screen and (max-width:498px) {
	 .content_complement{
		width: calc(100%);
		display: table;
	}
}


/* Phone confirm area ----------------------------------------------------------------- */

.flex.phoneFlex {

}

.flex.phoneFlex .fx_2 {
}

.flex.phoneFlex .fx_2:nth-child(1) {
}
  
.flex.phoneFlex .fx_2:nth-child(2) {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    flex-wrap: nowrap;
    align-items: center;
	gap: 10px;
}

.phoneFlex label {
    width: fit-content !important;
    overflow: visible;
}

.phoneFlex input[type="checkbox"] {
    width: fit-content !important;
    margin: 0 !important;
    top: 0 !important;
}

form .flex div:nth-child(2) label, form .flex div:nth-child(3) label {
    width: fit-content;
}

form .flex .fx_3 input {
    width: 35%;
}

form .flex div:nth-child(1) {
    width: 45%;
}

form .flex div:nth-child(2), form .flex div:nth-child(3) {
    width: 26%;
    display: flex;
    justify-content: space-between;
}

form .flex div:nth-child(2) input, form .flex div:nth-child(3) input {
    width: 55%;
}


@media screen and (min-width:499px) {
	.flex.input input {
		max-width: 185px;
	}

	.flex.input input:nth-last-of-type(-n+2) {
	margin-left: 5px;
	}

	.flex.input {
		justify-content: space-between;
	}
}