/***** reset box-sizing *****/
.popup-container *, .popup-container *::before, .popup-container *::after,
#cform-container *, #cform-container *::before, #cform-container *::after,
#popup-container-form-wrapper *, #popup-container-form-wrapper *::before, #popup-container-form-wrapper *::after {
    box-sizing: border-box;
}




/***** start ****   cform section *****/
#cform-container {
	width: 100%;
	max-width: 800px;
	margin: 20px auto;
	padding: 20px;
    padding-top: 50px;
	background-color: #fff;
	border: 2px solid #eee;
}
#cform-container input[type=text],
#cform-container input[type=email] {
	width: 100%;
	margin: 0 0 10px 0;
	border: 2px solid #ddd;
}
#cform-container textarea {
	width: 100%;
	margin: 0 0 10px 0;
	height: 100px;
	border: 2px solid #ddd;
}
#cform-container textarea:focus,
#cform-container input[type=text]:focus,
#cform-container input[type=email]:focus {
	border-color: #aacfe4;
}
#cform-container textarea::placeholder,
#cform-container input[type=text]::placeholder,
#cform-container input[type=email]::placeholder {
	color: #c0c0c0;
}
#cform-container input[type=submit] {
	background-color: #e5e5e5;
    border: 3px solid #bfbfbf;
    color: #9b9b9b;
}
#cform-container input[type=submit]:hover {
	background-color: #dad8d8;
    border: 3px solid #9c9c9c;
    color: #666666;
}
#popup-container-form-wrapper {
	width: calc(100% - 20px);
	margin: 10px;
	padding: 10px;
    padding-top: 50px;
	background-color: #fff;
	border: 2px solid #c7c7c7;
}
#popup-container-form-wrapper p {
	margin: 0 0 15px 0;
}
#popup-container-form-wrapper input[type=text],
#popup-container-form-wrapper input[type=email] {
	width: 100%;
	margin: 0;
	padding: 5px 10px;
	border: 2px solid #c7c7c7;
}
#popup-container-form-wrapper textarea {
	width: 100%;
	padding: 5px 10px;
	margin: 0;
	height: 100px;
	border: 2px solid #c7c7c7;
}
#popup-container-form-wrapper textarea:focus,
#popup-container-form-wrapper input[type=text]:focus,
#popup-container-form-wrapper input[type=email]:focus {
	border-color: #aacfe4;
}
#popup-container-form-wrapper textarea::placeholder,
#popup-container-form-wrapper input[type=text]::placeholder,
#popup-container-form-wrapper input[type=email]::placeholder {
	color: #c0c0c0;
}

.scode-form-container {
	width: calc(100% - 20px);
    max-width: 800px;
	margin: 10px auto;
	padding: 10px;
    padding-top: 46px;
	background-color: #fff;
	border: 8px solid #cfcfcf;
    border-radius: 6px;
}
.scode-form-container p {
	margin: 0 0 15px 0;
}
.scode-form-container input[type=text],
.scode-form-container input[type=email] {
	width: 100%;
	margin: 0;
	padding: 5px 10px;
	border: 2px solid #9b9b9b;
}
.scode-form-container textarea {
	width: 100%;
	padding: 5px 10px;
	margin: 0;
	height: 100px;
	border: 2px solid #9b9b9b;
}
.scode-form-container input,
.scode-form-container  textarea {
    color: #4057a5;
}
.scode-form-container textarea:focus,
.scode-form-container input[type=text]:focus,
.scode-form-container input[type=email]:focus,
.scode-form-container textarea:focus-visible,
.scode-form-container input[type=text]:focus-visible,
.scode-form-container input[type=email]:focus-visible {
	border-color: #acacac;
    outline-color: #acacac;
}
.scode-form-container textarea::placeholder,
.scode-form-container input[type=text]::placeholder,
.scode-form-container input[type=email]::placeholder {
	color: #c0c0c0;
}


.checkbox-label {
	display: block !important;
	margin: 0 0 10px 0;
	cursor: pointer;
	user-select: none;
	position: relative;
}
.checkbox-label span {
	padding-left: 30px;
}
.checkbox-label input[type=checkbox] {
	position: absolute;
	z-index: -1;
	opacity: 0;
	display: block;
	width: 0;
	height: 0;
}

.checkbox-label span:before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	position: absolute;
	left: 0;
	top: 0;
	border: 2px solid #9b9b9b;
}

.checkbox-label input[type=checkbox] + span:after {
	content: "";	
	opacity: 0;
	transition: opacity 0.3s ease;
}
.checkbox-label input[type=checkbox]:checked + span:after {
	display: inline-block;
	width: 12px;
	height: 12px;
    background-color: #5a95c9;
	position: absolute;
	left: 5px;
	top: 5px;
	opacity: 1;
}
 
 
.checkbox-label span:hover:after {
	filter: brightness(110%);
}
 
.checkbox-label span:active:before,
.checkbox-label span:active:after {
	filter: brightness(80%);
}




.scode-form-container input[type=button],
#popup-container-form-wrapper input[type=button] {
	width: 70%;
	margin: 0 auto;
	padding: 10px;
	background-color: #e5e5e5;
    border: 3px solid #c7c7c7;
    color: #9b9b9b;
}
.scode-form-container input[type=button]:hover,
#popup-container-form-wrapper input[type=button]:hover {
	background-color: #dad8d8;
    border: 3px solid #9c9c9c;
    color: #666666;
}
.button-p {
	text-align: center;
}
.btn-color {
	animation: color-change 1s infinite;
  }
  
  @keyframes color-change {
	50% { color: blue; }
  }
  .cform-success-mess {
	padding: 100px 10px;
	color: green;
	text-align: center;
  }
  .cform-error-mess {
	padding: 100px 10px;
	color: red;
	text-align: center;
  }
  .cf-field-error {
	border-left: 1px solid #ce4b4b !important;
	border-top: 1px solid #ce4b4b !important;
  }
  .cf-field-error-txt {
	margin: 0 0 3px 0 !important;
	padding: 0;
	color: #ce4b4b;
	font-size: 11pt;
	line-height: normal;
  }

.cform-desc {
	margin: 0 0 20px 0;
	padding: 0;
	font-size: 12pt;
}
/***** end ******   cform section *****/


/***** start ****   popup section *****/


.popup-show-bg {
	position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0;
    background-color: rgba(0,0,0,.6);
    z-index: 9999999;
    display: none;
}

.popup__close {
	position: fixed;
    right: 10px;
    top: 10px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    z-index: 9;
    fill: #910000;
}
.popup__close:hover {
    fill: #ff0000;
}
.popup-close-button {
	width: 44px;
    height: 44px;
    padding: 6px !important;
    font-size: 0;
    border: none;
    background-color: transparent !important;
    cursor: pointer;
}
.popup-container {
	background: #fff;
    margin: 0 auto;
	min-height: 100px;
	max-width: 600px;
    width: 100%;
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    z-index: 1;
	-moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.popup-container label, .popup-container h1 {
	display: none;
}
/***** end ******   popup section *****/  


/************ @media ***********/

@media screen and (min-width: 400px) {
	#popup-container-form-wrapper {
		width: calc(100% - 30px);
		margin: 15px;
		padding: 20px;
        padding-top: 50px;
	}
}