@import 'quiron-general-icon.css';
/*
 * Hoja de estilos para la prealta
 *
 * Copyright(c) Divisa Informática y Telecomunicaciones S.A.
 */


/* Prealta nueva */
.carpetapaciente .btn.borderBottom {
	font-weight: bold;
	border: 1px solid #008488;
	border-radius: 20px;
	background-color: #008488;
	color: #ffffff;
	width: 20rem;
	padding: 10px;
}

.carpetapaciente .btn.borderBottom:hover {
	border: 1px solid #008488;
    background-color: #008488;
    color: #fff!important;
}

.carpetapaciente .borderBottomReverse {
	font-weight: bold;
	border: 1px solid #008488;
	border-radius: 20px;
	color: #008488!important;
	background-color: #ffffff;
	width: 20rem;
	padding: 10px;
}

.carpetapaciente .btn.borderBottomReverse:hover {
	border: 1px solid #fff;
    background-color: #cacaca;
    color: #fff!important;
    font-weight: bold;
}

.boxFormHead.headPrealta {
	background-color: transparent;
	border: none;
}

.prealtaVolverPaso2 {	
	padding: 24px 0 0 12px;
    display: flex;
    cursor: pointer;
}

.prealtaVolverPaso2:hover, .prealtaCerrar:hover {	
	color: #008488;
}

.prealtaVolverPaso2 .icon-flecha {
	transform: rotate(90deg);
    font-size: 50%;
    margin-right: 18px;
}

.prealtaCerrar {	
	padding: 24px 24px 0 0;
    display: flex;
	cursor: pointer;
	justify-content: flex-end;
    align-items: center;
}

.prealtaCerrar .icon-cerrar {
    font-size: 50%;
	margin-right: 12px;
	color: #008488;
}

.prealtaContentdorIconosCerrarVolver {
	display: flex;
    justify-content: space-between;
}

.boldFont {
	font-weight: bold;
}

.titleText {
	color: #008488;
	font-weight: bold;
	font-size: 1.3em;
}

.newCheckboxUI label {
	min-height: auto;
    padding-left: 0;
}

.newCheckboxUI input[type='checkbox'] {
	width: 19px;
	height: 19px;
	margin: 0 6px 0 0;
	top: 5px;
	left: 0;
	position: relative;
	background-color: #ffffff;
	display: inline-block;
	visibility: visible;
	border: 1px solid #008488;
	-webkit-appearance: none;
	outline: none;
}

.newCheckboxUI input[type='checkbox']:checked {
	width: 19px;
	height: 19px;
	position: relative;
	top: 5px;
	left: 0;
	background-color: #008488;
	display: inline-block;
	visibility: visible;
	-webkit-appearance: none;
	outline: none;
}

.newCheckboxUI input[type='checkbox']:checked:after {
	content: '\2713\0020';
	width: 19px;
	height: 19px;
	color: #ffffff;
	font-weight: bold;
	position: absolute;
	top: -3px;
	left: 2px;
}

.newSelectUI select {
	border: none;
	border-bottom: 1px solid #008488;
}

.btn-link {
	color: #000;
}

.spanDown{
	position: absolute;
	right: 24px;
	margin-top: 12px;
}

.whiteBackground {
	background-color: #ffffff;
}

.loginField label {
	width: auto;
	color: #008488;
}

.greenColor {
	color: #008488;
}

#suggestFormPrealta.modal-footer {
	border-top: none;
}

.newInputUINormal {
	border-radius: 0;
	border: none;
	border-bottom: 1px solid #4B4F54;
	color: #000;
}

.newInputUIValid {
	border-radius: 0;
	border: none;
	border-bottom: 1px solid #008488;
	color: #000;
}

.newInputUIInvalid {
	border-radius: 0;
	border: none;
	border-bottom: 1px solid red;
	color: #000;
}

.divDniInput {
	display: flex;
}

.divTypeDoc {
	width: 25%;
	margin-right: 10px;
}

#suggestFormPrealta .modal-footer {
	border-top: none;
}

.fa-close.faPreAlta {
	position: relative;
	float: right;
	right: 24px;
}

.fa-close.faPreAlta::before {
	color: #008488;
	padding-right: 5px;
}

.clearPrealta {
	clear: both;
}

.preAltaDontShow {
	display: none;
}

.navbar-brand {
	margin: 0 auto;
    float: inherit;
}

.boxFormContent {
	margin: 0 0 24px 0;
}

.boxHeader {
	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
}

.boxHeader i {
    font-size: 180%;
	color: #008488;
    margin-top: 48px;
}

.prealtaVolverPaso2 + .boxHeader i {
    margin-top: 6px;
}
.boxFormContent .errores {
	margin-left: 48px;
}

.boxFormContent .titleText {
	margin: 0 48px;
}

.boxFormContent .shadowInfo {
	width: 100%;
	margin: 0 0 24px 0;
    padding: 0 48px 24px 48px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.06);
}

.boxSection {
	margin: 0 48px;
}

form {
	margin: 0 48px;
}

.divDniInput select {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #008488;
	margin-right: 20px;
	padding: 0;
    max-width: 10rem;
}

form .loginField input {
	width: 100%;
    border-radius: 0;
    border: none;
	border-bottom: 1px solid #008488;
	padding: 0;
}

form .loginField .divTypeDoc {
    margin-right: 24px;
    max-width: 10rem;
}

form .bloqueFecha {
	display: flex;
	flex-direction: column;
}

form .bloqueFecha .campos {
	display: flex;
}

body.popupBody .bloqueFecha fieldset label {
	display: none;
}

form .bloqueFecha input {
	max-width: 4em;
}

.bloqueFecha .campos span {
	margin: 0 12px;
	color: #008488;
}

form .contentError label, form .contentError legend  {
	color:  #A01D2D!important;
}

form .contentError input, form .contentError select {
    border-bottom: 1px solid  #A01D2D;
}

form .prealta-error {
	color:  #A01D2D!important;
    font-size: 90%;
	margin-top: 4px;
}

form input[type="radio"] {
	display: none;
}

form div.loginField .groupRadio legend {
	font-weight: bold;
    color: #505050;
    font-size: 13px;
    border: none;
    margin-bottom: 12px;
}

body.popupBody form div.loginField .groupRadio label {
	width: 90px;
	min-width: 90px;
	height: 90px;
	min-height: 90px;
    border-radius: 50%;
    border: 1px dashed #008488;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

body.popupBody form div.loginField .groupRadio label:first-child {
	margin-right: 24px;
}

form .groupRadio [class^=icon-] {
	font-size: 200%;
}

form .contentFieldset {
	display: flex;
	align-items: center;
}

form input[type="radio"] + [class^=icon-],
form input[type="radio"] + label > [class^=icon-] { 
	cursor: pointer; 
}

form input[type="radio"]:checked + [class^=icon-], form input[type="radio"]:checked + [class^=icon-] + span{
	color: #008488;
}

form .loginField + .loginField {
	margin-top: 12px;
}

form .contentEmail {
	position: relative;
}

form .contentEmail [class^=icon-] {
	position: absolute;
	right: 12px;
}

.acordeon {
	position: relative;
	color:#4B4F54;
	background-color: #EFEFEF;
}

.acordeon .card {
    border-bottom: 1px solid #DEDEDE;
}

.acordeon .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
	padding: 12px 48px;
	cursor: pointer;
}

.acordeon .icon-flecha {
    display: flex;
    align-items: center;
    justify-content: center;
	width: 24px;
	min-width: 24px;
    height: 24px;
    min-height: 24px;
	font-size: .65rem;
    border: 1px solid #4b4f54;
    border-radius: 50%;
	transform: rotate(180deg);
}

.acordeon [aria-expanded="true"] .icon-flecha {
	transform: rotate(0deg);
}

.acordeon .card-body {
	padding: 12px 48px;
}

.modal-body {
	text-align: center;
	padding: 48px 48px 0 48px;
}

.modal-body .titulo {
	font-weight: bold;
}

.modal-body .label-registro {
	font-weight: normal;
}

.modal-body .campo-registro {
	font-weight: bold;
	font-size: 120%;
	color: #008488;
}


.modal-body .contentModales {
	padding-bottom: 24px;
}

.modal-footer {
	padding: 0 48px 48px 48px;
}

.modal-footer .botones {
	margin-top: 24px;
	text-align: center;
}

.modalFalso{
	padding: 24px;
    background: #fff;
    text-align: center;
}

.modalFalso .contentIcon, .modal-body .contentIcon {
	margin-bottom: 12px;
    display: flex;
    justify-content: center;
}

.modalFalso i[class^='icon-'], .modal-body i[class^='icon-']:not(.icon-confirmacion) {
	border-radius: 50%;
	background: #eee;
	min-width: 40px;
	min-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;    
}

.modalFalso i[class^='icon-']:before, .modal-body i[class^='icon-']:not(.icon-confirmacion):before {
	color:  #A01D2D;
}


.modal-body .contentIconOk .icon-confirmacion {
	font-size: 5rem;
}

.modal-body .contentIconOk .icon-confirmacion:before {
	color: #008488;
}

.modalFalso .btn {
	margin-top: 24px;
}


/*Media querys*/
@media screen and (max-width: 767px) {
	.carpetapaciente .loginField input:not([type="checkbox"]):not([type="radio"]), .carpetapaciente .loginField select {
		height: auto!important;
	}
}

@media screen and (max-width: 620px) {
	.boxFormHead.headPrealta img {
		width: 70%;
	}

	div.pageForm .boxForm .loginField label {
		width: 100%;
		display: block;
	}

	form {
		margin: 0 24px;
	}

	.acordeon .card-header {
		padding: 12px 24px;
	}

	.modal-footer .botones {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.modal-footer .botones button:first-child, .botones a:first-child {
		margin-bottom: 24px;
	}
}