formPostulanteStyle.css

body {
    background:url(/img/fondoform.svg);
    background-size: cover;
    background-attachment: fixed;
    background-blend-mode: multiply;
    font-family: "normal";
    position: relative;
    width: 100%;
    height: 100%;
    font-family:'Shippori Antique B1';
    /* background-repeat:repeat;
    height:100vh;width:100vw;  
    align-items:"middle";
    background-attachment: fixed; */
    
}
#head{text-align:center}
 form{/*max-width:300px;
    width:90%;position:relative;
    left:50%;
    top:10%;padding:40px;
    border-radius:4px;
    transform:translate(-50%,10%);*/
   
    } 
.card {
    border: none
}
li {
    padding: 0;
    display: inline-block; 
    width: 80px; 
    text-align: center; 
    letter-spacing:normal; 
    vertical-align: middle;
    line-height: 1.1;
}
button {
 
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.image {
    position: relative
}

.image span {
    background-color: #506BEE;
    color: #fff;
    padding: 6px;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    font-size: 13px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -0px;
    right: 0px
}

.user-details h4 {
    color: #506BEE
}

.ratings {
    font-size: 30px;
    font-weight: 600;
    display: flex;
    justify-content: left;
    align-items: center;
    color: #f9b43a
}

.user-details span {
    text-align: left
}

.inputs label {
    display: flex;
    margin-left: 3px;
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 4px
}

.inputs input {
    font-size: 14px;
    height: 40px;
    border: 2px solid #ced4da
}

.inputs input:focus {
    box-shadow: none;
    border: 2px solid #506BEE
}

.about-inputs label {
    display: flex;
    margin-left: 3px;
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 4px
}

.about-inputs textarea {
    font-size: 14px;
    height: 100px;
    border: 2px solid #ced4da;
    resize: none
}

.about-inputs textarea:focus {
    box-shadow: none
}

.btn {
    font-weight: 600
}

.btn:focus {
    box-shadow: none
}

select {
    display: block;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 20px;
    height: 40px;
    padding: 5px 10px
}

select:focus {
    outline: none
}

.add-experience:hover {
    background: #506BEE;
    color: #fff;
    cursor: pointer;
    border: solid 1px #506BEE
}

.content-select select{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
.content-select{
	max-width: 250px;
	position: relative;
}
 
.content-select select{
	display: inline-block;
	width: 100%;
	cursor: pointer;
  	padding: 7px 10px;
  	height: 42px;
  	outline: 0; 
  	border: 0;
	border-radius: 0;
	background: #f0f0f0;
	color: #7b7b7b;
	font-size: 1em;
	color: #999;
	font-family: 
	'Quicksand', sans-serif;
	border:2px solid rgba(0,0,0,0.2);
    border-radius: 12px;
    position: relative;
    transition: all 0.25s ease;
}
 
.content-select select:hover{
	background: #B1E8CD;
}
 
/* 
Creamos la fecha que aparece a la izquierda del select.
Realmente este elemento es un cuadrado que sólo tienen
dos bordes con color y que giramos con transform: rotate(-45deg);
*/
.content-select i{
	position: absolute;
	right: 20px;
	top: calc(50% - 13px);
	width: 16px;
	height: 16px;
	display: block;
	border-left:4px solid #2AC176;
	border-bottom:4px solid #2AC176;
	transform: rotate(-45deg); /* Giramos el cuadrado */
	transition: all 0.25s ease;
}
 
.content-select:hover i{
	margin-top: 3px;
}

h4{
    color: #ffffff;
    text-transform: capitalize;
    
    font-size: large;
}
form[name="postulante"]{
    color: #ffffff;
}
label:hover {
    color: #bfbfbf;
}
/*ICONOS Y PLACEHOLDER

.size-placeholder::placeholder{
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: right center;
    
 
}
/*Nombre
.nombre-ph::placeholder{
    background-image: url(../img/placeholder/name_ph.png);
}
Apellido
#apellido::placeholder{
    background-image: url(../img/placeholder/lastname_ph.png);
}
Email
#correo::placeholder{
    background-image: url(../img/placeholder/email_ph.png);
}
Numero de documento*/
#nroDocument::-webkit-outer-spin-button,
#nroDocument::-webkit-inner-spin-button
{
    -webkit-appearance: none;
    margin: 0;
}
#nroDocument[type=number] {
    -moz-appearance: textfield;
}
/*
.nroDocument-ph::placeholder{
    background-image: url(../img/placeholder/nroDocumento_ph.png);
    margin-left: 5px;
}
Direccion
#direccion::placeholder{
    background-image: url(../img/placeholder/adress_ph.png);
    background-size: 14px 14px;
}*/
/*Telefono*/
#telefono::-webkit-outer-spin-button,
#telefono::-webkit-inner-spin-button
{
    -webkit-appearance: none;
    margin: 0;
}
#telefono[type=number] {
    -moz-appearance: textfield;
}
/*
.telefono-ph::placeholder{
    background-image: url(../img/placeholder/telephone_ph.png);  
} 
/*Modal Estudio
#institucionEstudio::placeholder{
    background-image: url(../img/placeholder/studios_ph.png);  
}
#temaDeEstudio::placeholder{
    background-image: url(../img/placeholder/studios_ph.png);  
}

#institucionExperiencia::placeholder{
    background-image: url(../img/placeholder/studios_ph.png);  
}
#cargo::placeholder{
    background-image: url(../img/placeholder/cargo_ph.png);  
}

#descripcion::placeholder{
    background-image: url(../img/placeholder/description_ph.png);  
}
#refNombre::placeholder{
    background-image: url(../img/placeholder/name_ph.png);  
}*/
#refTel::-webkit-outer-spin-button,
#refTel::-webkit-inner-spin-button
{
    -webkit-appearance: none;
    margin: 0;
}
#refTel[type=number] {
    -moz-appearance: textfield;
}
/*
.telefono-ph::placeholder{
    background-image: url(../img/placeholder/telephone_ph.png);  
} 
#motivoSalida::placeholder{
    background-image: url(../img/placeholder/motivoSalida_ph.png);  
}
#relacion::placeholder{
    background-image: url(../img/placeholder/relacion_ph.png);  
}
*/
/*Prueba Font Awesome*/

.FA{
    font-family: 'Shippori Antique B1',FontAwesome;
}