/* ==========================================================================
   #BOX-SIZING
   ========================================================================== */
/**
 * More sensible default box-sizing:
 * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
 */
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  padding: 0;
  margin: 0;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.text-h5 {
  font-size: 25px;
  font-weight:550;
  margin-bottom:25px;
}

/* ==========================================================================
   #BACKGROUND
   ========================================================================== */
.bg-blue {
  background: #2c6ed5;
}

.bg-red {
  background: #fa4251;
}


/* ==========================================================================
   #SPACING
   ========================================================================== */

.p-t-10 {
  padding-top: 10px;
}


/* ==========================================================================
   #WRAPPER
   ========================================================================== */
.wrapper {
  margin: 0 auto;
  
}
.wrapper::after {
    content: "";
    clear: both;
    display: table;
	
}


/* ==========================================================================
   #BUTTON FORM
   ========================================================================== */

.btn-form-small {
/**/
  padding: 10px 10px;
  font-size: 14px;
  line-height:14px;
  margin:0;
  color: #555;
  background: transparent;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -o-border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
/**/
  font-family: 'Raleway', 'Montserrat', Arial, "Helvetica Neue", sans-serif;
  cursor: pointer;
  letter-spacing:1px;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  font-size: 14px;
/**/
 
}
.btn-form-small {
  background: #fefefe;
}

.btn-form-small:hover {
  background: #ddd;
}

/*======*/
.btn-f {
  display: inline-block;
  margin:3px;
  font-family: 'Raleway', 'Montserrat', Arial, "Helvetica Neue", sans-serif;
  cursor: pointer;
  letter-spacing:1px;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;

}

.f-medium {
  font-size:16px;
  line-height:26px;
  padding:10px 15px;
}

.f-small {
  font-size:14px;
  line-height:20px;
  padding:10px 15px;
}

.f-gray {
  background: #7b7a78;
  color:#fff;
}

.f-gray:hover {
  background: #c4c4c0;
  color:#fff;
}

.f-gray-light {
  background: #acaba8;
  color:#fff;
}

.f-gray-light:hover {
  background: #c4c4c0;
  color:#fff;
}

.f-red {
  background: #cc0000;
  color:#fff;
}

.f-red:hover {
  background: #8e0000;
  color:#fff;
}

.f-radius-10 {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -o-border-radius: 10px;
}

.f-radius-20 {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  -o-border-radius: 20px;
}

/*============*/
.btn-f-pill {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  -o-border-radius: 20px;
}

.border-f-radius-10 {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -o-border-radius: 10px;
}

.btn-f-gray-or {
  background: #35323d;
}

.btn-f-gray-or:hover {
  background: #4b4952;
}
.btn-f-blue {
  background: #3d85c6;
}

.btn-f-blue:hover {
  background: #306a9e;
}
.btn-f-gray-light {
  background: #eeeeee;
  color:#000;
}

.btn-f-gray-light:hover {
  background: #d6d6d6;
}
.btn-f-blue-dark {
  background: #244f76;/*#787772;*/
  color:#fff;
}
a.btn-f-blue-dark {
  color:#fff;
}
.btn-f-blue-dark:hover {
  background: #18354f;/*#000;*/
}
.btn-f-wrapper {
  margin:10px 0 10px 0;
}
/* ==========================================================================
   #FORM
   ========================================================================== */

input {
  outline: none;
  margin: 0;
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  width: 100%;
  font-size: 14px;
  font-family: inherit;
}
textarea {
  width: 100%;
  min-height: 100px;
  padding: 12px 20px;
  box-sizing: border-box;
  border-radius: 4px;
  border:none;
  font-size: 14px;
  font-family: inherit;
  resize: none;
}

.input-icon {
  position: absolute;
  font-size: 18px;
  color: #ccc;
  right: 8px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
}
.required::after {
  content: ' *';
  color: red;
  position:relative;
  top:10px;
  font-size: 25px;
}
.input-group {
  position: relative;
  margin-bottom: 20px;/*33px;*/
  /*border-bottom: 1px solid rgba(0, 0, 0, 0.2);*/
}
.label-input-style  {
  font-size: 14px;
  letter-spacing:1px;
  color: #555;
  line-height: 16px;
  
}

.input-style, .input-style-required {
  padding: 10px 10px;
  font-size: 14px;
  line-height:14px;
  margin-top:5px;
  color: #555;
  background: transparent;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -o-border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.input-style-0 {
  padding: 10px 10px;
  font-size: 14px;
  line-height:14px;
  margin-top:5px;
  color: #555;
  background: transparent;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -o-border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}/*avoid display table width input-style*/

textarea.input-style, textarea.input-style-required {
	line-height:20px;
}

.input-style::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #555;
}

.input-style:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #555;
  opacity: 1;
}

.input-style::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #555;
  opacity: 1;
}

.input-style:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #555;
}

.input-style:-ms-input-placeholder {
  /* Microsoft Edge */
  color: #555;
}

/* ==========================================================================
   #form
   ========================================================================== */
.form-heading {
margin: 15px;
border-radius: 5px;
padding: 30px;
background-color:#551b45;
box-shadow: 0px 5.6px 32px 0px rgba(0,0,0,0.15);
}
.form-heading::after {
    content: "";
    clear: both;
    display: table;
	
}
.form-body {
border-radius: 5px;
background:transparent;
padding:30px;
position:relative;
/*box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;*/
/*border: 1px solid rgba(76, 78, 100, 0.12);*/
}
.form-body  img{
display:block;
margin-bottom:30px;
}
.center-form-wrapper {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}

.column-form-wrapper {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
	flex-direction: column;
  	padding-top: 5px;
}
.column-form-wrapper button, .column-form-wrapper input{
  	float:right;
}
.column-form-wrapper div{
  	width:auto;
	margin-left:auto;
}
/*==== FLEX DIV FORM ===*/
.row-flex-form {
display:flex;
flex-wrap:nowrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-content: space-between;
padding:5px 10px;

}

.row-flex-form div{
display:inline-block;
padding: 5px;
}
.row-flex-form div.right-flex,
.row-flex-form input.right-flex {
margin-left:auto;

}

.filter-body{
 display: flex;
 flex-direction: column;
 /*flex-wrap: nowrap;*/
 justify-content: space-between;
 align-items: flex-start;
 /*align-content: space-around;*/
 gap:45px;

}

.filter-container{
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: flex-start;
 /*align-content: space-around;*/
 gap:25px;

}
@media screen and (max-width: 600px) {

.filter-container{ gap:45px;}


}

.input-filter{
 width:auto;

}

#ajax-html-filter{
 margin:0;
}

.filter-catalog #ajax-html-filter{
 margin-top:50px;
 border-top:1px solid #d6d4c1;
}
.filter-catalog .btn-filter {
  margin-top:20px;

}
/******************************/
.form-group {
border-bottom:1px solid #e5a2d0;
border-left:1px solid #e5a2d0;
border-radius:10px;
padding-left:10px;
margin:10px 0 10px 0;

}
.form-group div.input-group { display: table !important;  width:100%;}

.form-body p { font-size: 14px; text-align:center;padding:0;}
.form-body div.input-group { display: table !important;  width:100%;}
.label-input-style  { display: table-header-group; }
.input-style, .input-style-required { display: table-row-group; }
.input-style:focus + .label-input-style { color:#000; font-weight: 600; }
.input-style:focus { outline: none !important; border:1px solid #7db0df !important; }

.input-style-required:focus + .label-input-style { color:#000; font-weight: 600; }
.input-style-required:focus { outline: none !important; border:1px solid #7db0df !important; }

.form-body div.input-group.w-auto {
width:auto;
}

span.input-required {
	display:none;
	background:#acaba8;
	border-radius:5px;
	color:#fff;
	font-size:12px;
	padding:3px 12px;
	
}
.m-r-15 {margin-right:15px;}
.m-t-35 {margin-top:35px;}
.p-b-35 {margin-top:35px;}
/*********************************/
.form-body div.input-error {
	display: table;  
	width:100%; 
	border:1px solid #ffcccc; 
	margin-top:-15px;
	margin-bottom:10px;
	padding: 2px 3px 2px 3px;
	font-size:12px;
	color:#000;
	background-color:#ffebeb;
}

.form-body p.input-error {
	color:#000;
	background-color:#ffb8b8;
	border:1px solid #ff9f9f;
	border-radius:5px;
	padding:2px;
	margin:0;
	font-size:13px;
	line-height:13px;
	text-align:center;
}
.input-success {
	display: table;  
	width:100%; 
	border:1px solid #ccfee7;
	margin-bottom:5px;
	padding: 5px 3px 5px 3px;
	font-size:14px;
	color:#270;/*#000;*/
	/*font-weight:bold;*/
	background-color:#DFF2BF;/*#b2fddc;/*#00fb8b;/*#00c86f;/*#ffebeb;*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-o-border-radius: 10px;
}

/*=== WARNIG SUCCESS INFO ERROR ===*/
/*== SUCCESS ERROR WARNING INFO MSG==*/
.input-info-msg,
.input-success-msg,
.input-warning-msg,
.input-error-msg {
  margin: 10px 0;
  padding: 10px;
  border-radius: 3px 3px 3px 3px;
}
.input-info-msg i,
.input-success-msg i,
.input-warning-msg i,
.input-error-msg i {
  margin-right: 10px;
  
}
.input-info-msg {
  color: #059;
  background-color: #BEF;
}
.input-success-msg {
  color: #270;
  background-color: #DFF2BF;
}
.input-warning-msg {
  color: #9F6000;
  background-color: #FEEFB3;
}
.input-error-msg {
  color: #D8000C;
  background-color: #FFBABA;
}
/*------------------------------------------------------------------
[ Alert validate ]*/

.validate-input {
  position: relative;
  
}

.alert-validate::before {
  content: attr(data-validate);
  position: absolute;
  max-width: 70%;
  background-color: #fff;/*#433F52;*/
  border: 1px solid #ccc;
  border-radius: 2px;
  padding: 4px 25px 4px 8px;
  top: 68%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 2px;
  pointer-events: none;

  color: #555;
  font-size: 13px;
  line-height: 16px;
  text-align: left;

  visibility: hidden;
  opacity: 0;

  -webkit-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.alert-validate::after {
  content: "\f06a";
  font-family: FontAwesome;
  display: block;
  position: absolute;
  color: #000;
  font-size: 16px;
  top: 58%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 8px;
}

.alert-validate:hover:before {
  visibility: visible;
  opacity: 1;
}
#form-messages {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  padding: 4px 10px 4px 10px;
  margin: 15px 0;
  display: none;
}

@media (max-width: 992px) {
  .alert-validate::before {
    visibility: visible;
    opacity: 1;
  }
}