@media
	  only screen
    and (max-width: 760px), (min-device-width: 768px)
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    tr {
      margin: 0 0 1rem 0;
    }

    tr:nth-child(odd) {
      background: #ccc;
    }

		td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		td:before {
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		td.title:nth-of-type(1):before { content: "Nome"; }
		td.title:nth-of-type(2):before { content: "Grau de Parentesco"; }
		td.title:nth-of-type(3):before { content: "Data de Nascimento"; }
		td.title:nth-of-type(4):before { content: "CPF (opcional)"; }

    .dependentes .form-control{
      width: 100%;
    }
	}
.select2-container--bootstrap .select2-selection{
	border: none;
	background: #f1f2f3;
	box-shadow: none;
}

.form-control{
	height: 50px;
}

.select2-container{
	height: 50px;
}

.selection{
	height: 50px;
	display: block;
}

.selection span, .select2-selection{
	
}

.select2-container--bootstrap .select2-selection--single{
	height: 50px;
}
	
.select2-selection__rendered {
	display: flex  !important;
    align-items: center;
    height: 40px ;
}

.pix-code{
	background: #F8F8F8;
	font-size: 1rem;
}

@media(min-width: 992px){
	.pix-code{
		font-size: 1.5rem;
	}
}

.pt3{
	padding-top: 20px;
}

.pb3{
	padding-bottom: 20px;
}


@media(max-width: 992px){
	.d-block{
		display: block;
	}

	.d-lg-block{
		display: none;
	}
}

@media(min-width: 992px){
	.d-lg-block{
		display: block;
	}

	.d-block{
		display: none;
	}
}

.notifyjs-corner{
	width: calc(100% - 10px);
}
.notifyjs-container{
	
}

.notifyjs-bootstrap-base{
	padding: 15px  !important;
	font-size: 16px;
    text-transform: uppercase;
	border-radius: 30px !important;
	border: none !important;
}

.notifyjs-bootstrap-error, .notifyjs-bootstrap-success{
	background: rgba(229,229,229,1) !important;
	text-shadow: none !important;
	color: #333 !important;
	text-align: center;
}