/*
|------------------------------------------------------------------
	[Table of contents]:

	1. FORM DESIGN
	2. Math Captcha
	3. Button
	4. RESPONSIVE

|-------------------------------------------------------------------

/*
|----------------------------------------------------------------------------
	1. FORM DESIGN
|----------------------------------------------------------------------------
*/
form#contactForm8 {
    background-color: rgb(248 248 248 / 0.7);
    padding: 30px;
    height: 100%;
}
#contactForm8 .form-group{
    position: relative;
}
#contactForm8 .form-control {
    border: 1px solid #ced4da;
	border-radius: 0;
    font-size: 14px;
    line-height: 24px;
	padding: 6px 12px;
    outline: 0 none;
    width: 100%;
}
#contactForm8 .form-label {
    font-weight: 400;
    display: block;
    color: #151515;
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: .0rem;
}
#contactForm8 .form-label em {
    color: var(--color-primary);
    font-style: normal;
    margin-left: 3px;
}
#contactForm8 .sub-text {
    font-weight: 400;
    font-size: 12px;
}
#contactForm8 .sub-text em {
    color: var(--color-primary);
    font-style: normal;
    margin-left: 3px;
}
#contactForm8 .form-control:valid ~ .form-label, #contactForm8 .form-control:focus ~ .form-label {
    bottom: 35px;
	color: #222;
	padding-left: 0;
	text-transform: capitalize;
    transition: bottom 0.25s ease-in 0s;
}
#contactForm8 .form-control:focus {
	border-color: var(--color-primary);
	box-shadow: 0 1px 1px rgba(19, 145, 166, 0.075) inset, 0 0 8px rgba(19, 145, 166, 0.6);
}
#contactForm8 .has-error .form-control {
    border-color: #ce0606;
}
#contactForm8 .has-error .form-control:focus {
    border-color: #ce0606;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.075) inset, 0 0 6px 0 #ce0606;
}
#contactForm8 .help-block.with-errors {
    color: #d10808;
    font-size: 12px;
    margin: 0 0;
    position: absolute;
}
#msgContactSubmit.h3.text-center.text-danger {
    text-align: left;
    padding: 15px;
    font-weight: 400;
    margin-top: 20px;
    font-size: 15px;
    border: 1px solid rgba(var(--bs-danger-rgb),var(--bs-text-opacity))!important;

}
#contactForm8 #message.form-control:focus ~ label, #contactForm8 #message.form-control:valid ~ label {
    bottom: 100%;
}
#contactForm8 #message.form-control {
    resize: none;
}
#contactForm8 .text-success {
	text-align: left;
	padding: 15px;
	font-weight: 400;
	margin-top: 20px;
	font-size: 15px;
    border: 1px solid rgba(var(--bs-success-rgb),var(--bs-text-opacity))!important;
}

#contactForm8 .input-group-btn ~ .form-control {
    border-radius: 0 4px 4px 0;
	cursor: not-allowed;
	padding-left: 10px;
}
#contactForm8 .input-group-btn > .btn {
    background-color: #1391a6;
    border: 1px solid #1391a6;
    border-radius: 4px 0 0 4px;
    padding: 4.5px 14px;
	height: 34px;
}
#contactForm8 .input-group-btn > .btn > input[type="file"] {
    display: none;
}

/*upload file b4 fix*/
.form-group.attachmentFile .input-group-btn ~ .form-control {
	width: calc(100% - 90px);
	margin-left: -5px;
	border-left: none;
	display: inline;
}
.form-group.attachmentFile .input-group-btn > .btn {
	width: 90px;
	margin-top: -5px;
	height: 38px;
}


/*
|----------------------------------------------------------------------------
	Mgsstyle Checkbox
|----------------------------------------------------------------------------
*/
.mgsstyle-checkbox.mgscheckbox-style li {
    display: inline-block;
	width: auto;
    margin: 0 3% 0 0;
}
.mgsstyle-checkbox.mgscheckbox-style.list-unstyled  {
    margin-bottom: .2rem !important;
}

.mgsstyle-checkbox.mgscheckbox-style li:last-child {
    margin: 0;
}
.mgsstyle-checkbox.mgscheckbox-style input[type="checkbox"] {
	opacity: 0;
    position: absolute;
}
.mgsstyle-checkbox.mgscheckbox-style label  {
	position: relative;
	padding: 2px 30px;
	font-size: 14px;
	font-size: 12px;
	color: #000;
}
.mgsstyle-checkbox.mgscheckbox-style label:before {
	border: 1px solid #a0a0a0;
	content: "";
	left: 0;
	position: absolute;
	top: 0px;
	width: 20px;
	height: 20px;
}
.mgsstyle-checkbox.mgscheckbox-style :checked + label:before {
	border: 10px solid var(--color-primary);
	content: "";
	left: 0;
	position: absolute;
	top: 0px;
	width: auto;
	height: auto;
}



/*
|----------------------------------------------------------------------------
| Math Captcha
|----------------------------------------------------------------------------
*/
#humanCheckCaptchaBox {
    font-size: 14px;
}
#humanCheckCaptchaBox, #humanCheckCaptchaInput, #firstDigit, #secondDigit,  #mathfirstnum, #mathsecondnum {
    display: inline;
}
#humanCheckCaptchaInput.form-control {
    height: 30px;
    margin-left: 10px;
    padding: 4px;
    text-align: center;
    width: 45px;
}
#firstDigit #mathfirstnum, #secondDigit #mathsecondnum {
	border: none;
	box-shadow: none;
    width: 30px;
    height: 30px;
	padding: 0;
    pointer-events: none;
    text-align: center;
}


/*
|----------------------------------------------------------------------------
	5. Button
|----------------------------------------------------------------------------
*/
.btn {
	font-size: 16px;
	overflow: hidden;
	padding: 6px 20px;
}
.btn-custom {
    background-color: var(--color-primary);
    color: #fff;
    padding: 10px 30px;
    font-size: 14px;
    -webkit-box-shadow: 0 0 1px transparent;
    box-shadow: 0 0 1px transparent;
    display: inline-block;
    position: relative;
    transition-duration: 0.3s;
    vertical-align: middle;
}
.btn-custom::before {
    background-color: var(--color-primary);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
	transition-duration: 0.3s;
    z-index: -1;
}
.btn-custom:hover, .btn-custom:focus, .btn-custom:active {
    background-color: #166ab5;
    border-color: #166ab5;
    color: #fff;
}
.btn-custom:hover::before, .btn-custom:focus::before, .btn-custom:active::before {
    border: 1px solid #166ab5;
}
.btn-transparent {
	color: #fff;
}
.btn.btn-custom.disabled {
    opacity: 1;
	pointer-events: auto;
    padding: 10px 30px;
    font-size: 15px;
    border-color: var(--color-primary);
}

/*
|----------------------------------------------------------------------------
	6. RESPONSIVE
|----------------------------------------------------------------------------
*/
@media screen and (max-width: 767px) {
	.intro-text {
		margin: 0 0 50px;
	}
}
@media screen and (max-width: 320px) {
	#firstDigit #mathfirstnum, #secondDigit #mathsecondnum {
		width: 20px;
	}
}