@font-face {
  font-family: 'icomoon';
  src:url('../fonts/icomoon/icomoon.eot?-rdnm34');
  src:url('../fonts/icomoon/icomoon.eot?#iefix-rdnm34') format('embedded-opentype'),
    url('../fonts/icomoon/icomoon.woff?-rdnm34') format('woff'),
    url('../fonts/icomoon/icomoon.ttf?-rdnm34') format('truetype'),
    url('../fonts/icomoon/icomoon.svg?-rdnm34#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}



/*static/Muli-ExtraLight.ttf
  static/Muli-Light.ttf
  static/Muli-Regular.ttf
  static/Muli-Medium.ttf
  static/Muli-SemiBold.ttf
  static/Muli-Bold.ttf
  static/Muli-ExtraBold.ttf
  static/Muli-Black.ttf
  static/Muli-ExtraLightItalic.ttf
  static/Muli-LightItalic.ttf
  static/Muli-Italic.ttf
  static/Muli-MediumItalic.ttf
  static/Muli-SemiBoldItalic.ttf
  static/Muli-BoldItalic.ttf
  static/Muli-ExtraBoldItalic.ttf
  static/Muli-BlackItalic.ttf*/

@font-face {
  font-family: Muli-Regular;
  src:  url(../fonts/Muli/static/Muli-Regular.ttf);
  font-weight: bold;
}

@font-face {
  font-family: Muli-ExtraBold;
  src:  url(../fonts/Muli/static/Muli-ExtraBold.ttf);
  font-weight: bold;
}


/* body */
body {
  width: 100%;
  /*min-height: 100vh;*/

  display: flex;
  justify-content: center;
  align-items: center;

  margin: 0;
  padding: 0;
  /*background: #d0d0d0;*/
  font-family: 'Muli-Regular',  sans-serif;
}


 .input_desactivate{
        

            height: 40px;
    background: #c1bbbb;
    color: white;
    border-radius: 20px;
    padding: 0px 40px 0px 40px;
    width: auto;
    font-size: 14px;
    font-family: 'Muli-ExtraBold', sans-serif;
}


        

.input_activate {
    background-color: #003058;
    border-color: #ffffff;

    cursor: pointer;

    height: 40px;

    color: white;
    border-radius: 20px;
    padding: 0px 40px 0px 40px;
    width: auto;
    font-size: 14px;
    font-family: 'Muli-ExtraBold', sans-serif;


}


  .required_select {

    /* width: 50%; */
    max-width: 420px;


}

.multi_hide{
    display: none;
}


textarea {
    /* height: 45px; */
    background-color: none;
    border: none;
    border-bottom: #6b96ca;
    border-bottom-style: groove;
    width: 51%;
    font-family: 'Muli-Regular', sans-serif;
    font-size: 16px;
    color: #757575;
    /* font: inherit; */
    background: #edeef0;
    padding-left: 12px;
    padding-top: 12px;
}

.content_input_file .carga{
      font-family: 'Muli-ExtraBold', sans-serif;
    font-size: 12px;
    color: #be003c;
    margin-bottom: 20px
}


.content_input_file{
    width: 500px;
    display: inline-block;
    margin-bottom: 20px;
}

.content_input_file label{
      font-family: 'Muli-ExtraBold', sans-serif;
    font-size: 16px;
    color: #3e5776;
    margin-bottom: 20px
}

.content_input_file em{
      font-family: 'Muli-ExtraBold', sans-serif;
    font-size: 12px;
    color: #3e5776;
    margin-bottom: 20px
}



.content_input_file input {
            
            font-size: 13px;
           width: auto;
        }
        

.title_form{
      font-family: 'Muli-ExtraBold', sans-serif;
    font-size: 18px;
    color: #3e5776;
    margin-bottom: 20px;
    display: none;
}

.title{
      font-family: 'Muli-ExtraBold', sans-serif;
    font-size: 18px;
    color: #3e5776;
    margin-bottom: 20px
}
	
.div_content{
	margin-bottom: 20px;
}



.position_content{
	/*width: 800px;*/
	max-width: 800px;
	background: white;
	text-align: center;
	padding: 20px

}



input {
		    height: 45px;
		    background-color: none;
		    border: none;
		    border-bottom: #6b96ca;
		    border-bottom-style: groove;
		    width: 50%;
		    font-family: 'Muli-Regular',  sans-serif;
		    font-size: 16px;
		    /*font: inherit;*/
		    background: #edeef0;
		        padding-left: 20px;
		}

.titulo{
	font-size: 14px;
	line-height: 26px;
	
	font-family: 'Muli-ExtraBold',  sans-serif;
}

input[type="submit"] {
	height: 40px;
    background: #002d58;
    color: white;
    border-radius: 20px;
    padding: 0px 40px 0px 40px;
    width: auto;
    font-size: 14px;
    font-family: 'Muli-ExtraBold',  sans-serif;

}


input[type="checkbox"] {
	height: 20px;
}

/* section */
section {
  /*width: 50%;*/
  min-height: inherit;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  position: relative;
}

section::before,
section::after {
  content: "";
  display: block;

  border-radius: 100%;

  position: absolute;
}



.light {
  --primary: hsl(209, 100%, 17%);
  --other: hsl(0, 0%, 14%);

 /* background: hsl(0, 0%, 98%);*/
}



/* h1 */
h1 {
  color: var(--other);
  padding: 8px 4px;
  border-bottom: 2px solid var(--other);
}


/* label */
label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;

  margin: 12px 0;

  cursor: pointer;
  position: relative;
}


/* input */
input[type="radio"]  {
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}


/* .design */
.design {
  width: 25px;
  height: 25px;

  border: 1px solid var(--other);
  border-radius: 100%;
  margin-right: 25px;

  position: relative;
}

.design::before,
.design::after {
  content: "";
  display: block;

  width: inherit;
  height: inherit;

  border-radius: inherit;

  position: absolute;
  transform: scale(0);
  transform-origin: center center;
}

.design:before {
  background: var(--other);
  opacity: 0;
  transition: .3s;
}

.design::after {
  background: var(--primary);
  opacity: .4;
  transition: .6s;
}


/* .text */
.text {
  color: var(--other);
  font-weight: bold;
}


/* checked state */
input[type="radio"]:checked+.design::before {
  opacity: 1;
  transform: scale(.6);
}


/* other states */
input[type="radio"]:hover+.design,
input[type="radio"]:focus+.design {
  border: 1px solid var(--primary);
}

input[type="radio"]:hover+.design:before,
input[type="radio"]:focus+.design:before {
  background: var(--primary);
}

input[type="radio"]:hover~.text {
  color: var(--primary);
}

input[type="radio"]:focus+.design::after,
input[type="radio"]:active+.design::after {
  opacity: .1;
  transform: scale(2.6);
}

.abs-site-link {
  position: fixed;
  bottom: 20px;
  left: 20px;
  color: hsla(0, 0%, 0%, .6);
  background: hsla(0, 0%, 98%, .6);
  font-size: 16px;
}


/*------------------------------------------   CHECKBOX ----------------------------------------*/

/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  /*font-size: 22px;*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
  
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
      position: absolute;
    top: 0;
        left: 0px;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border: 1px solid #d8dade;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
     background-color: #d8dade;
    border-radius: 2px;
    /* border: 1px solid #000000; */
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: black;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*------------------------------------------ END  CHECKBOX ----------------------------------------*/
.required_field {
    background: aquamarine;
    font-size: 18px;
    font-weight: bold;
    color: red;
    float: right;
    /* position: absolute; */
}

.asterisk_input::after {
content:" *"; 
color: #e32;
position: absolute; 
margin: 0px 0px 0px 5px; 
    font-size: x-large;
padding: 0 5px 0 0; }



.asterisk_selectxx::after {
content:" *"; 
color: #e32;
position: absolute; 
    margin: 0px 0px 0px 325px; 
    font-size: x-large;
padding: 0 5px 0 0; 

}


  .required_select {
	position: absolute;
    display: inline-block;
    /* position: absolute; */
    /* width: 0%; */
    max-width: 420px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* user-select: none;*/

}

.required_select span {
	float: right;
}


.required_select span::after {
    content: " *";
	color: #e32;
	position: absolute;
	margin: 0px 0px 0px 5px;
	font-size: x-large;
	padding: 0 5px 0 0;
}


.select_alert{
        border: 2px solid !important;
    border-color: #c10404 !important
}


.div_alerta {
    background-color: #e9a6ad;
    padding: 20px 0px 20px 0px;
    text-align: left;

    border-left: solid;
    border-color: #c10404;
    border-width: 5px;
   margin: 20px 0px 20px 0px;
        height: 21px;
            padding-left: 30px;
}


.div_alerta_text{
  margin-left: 30px;float: left;    width: 80%;
}



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

		div.cs-select {
			width: 95%;
		}

		.required_select {		
		       width: 85%;
		}

		input {
			width: 90%;
		}

		.checkmark {
         left: 0px !important;
    }


    .div_alerta {
                padding-left: 5px;
    }



}