@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;1,400&display=swap');


body {
	font-family: 'Montserrat', sans-serif;
	background-color: #fff;
	color: #242424;
}

.container {
	padding-top: 16rem;
	padding-bottom: 6rem;
	min-height: calc(100% + -4.5rem);
	min-height: calc(100vh + -4.5rem);
	max-width: 826px;
}

nav ul {
	margin-bottom: 0;
}

a:hover {
  color: #242424;
  text-decoration: none;
}

.flag {
	margin-bottom: 1px;
}

.btn, button {
	padding: 1rem 2rem !important;
	min-width: 12rem;
	height: auto !important;
	margin: 0 auto;
	width: auto;
}

button.form-control {
	width: auto;
}

.rounded {
	border-radius: 10rem !important;
}

.btn-outline-primary {
    color: #fff;
    background-color: #0082fb;
    border: none;
}

.btn-primary {
    color: #fff;
    background-color: #0082fb;
    border: none;
}

.btn-danger {
	background-color: #e43a35;
	border: none !important;
}

#sidebar {
	background: #242424;
}

#sidebar .sidebar-header {
	background: none !important;
}

.table-striped tbody tr:nth-of-type(odd) {
	background-color: #fff;
}

.table-hover tbody tr:hover {
	background-color: initial;
}

#sidebar ul li a {
	border-left: 3px solid transparent;
	color: #0082fb;
}

#sidebar ul li a:hover {
	border-left: 3px solid #0082fb;
}

.img-thumbnail {
	border: none;
	background-color: #fff;
}

#carriers-show .h2#carrier_designation {
	font-weight: 700;
	font-size: 3rem;
}

#carriers-show .control-label {
	display: none;
}

#carriers-show #carrier_birthdate, 
#carriers-show #carrier_breed, 
#carriers-show #carrier_sterilized {
	font-size: 1.8rem;
}

#carrier_details {
	font-weight: 400;
	font-size: 1rem;
}

.card-header {
	font-weight: 700;
}

.card-header.h5 {
	font-weight: 700;
	font-size: 1rem;
	padding: 1rem 1.25rem;
}

.card {
	overflow: hidden;
}

.table {
	margin: 0 15px 15px 15px;
	width: calc(100% + -30px);
}

th, td {
	width: auto !important;
}

tbody > tr {
	border: 1px solid #dfdfdf;
}

.table thead {
	background-color: #f7f7f7;
	-moz-border-radius: 0.25rem 0.25rem 0 0;
	-webkit-border-radius: 0.25rem 0.25rem 0 0;
	border-radius: 0.25rem 0.25rem 0 0;
	border: 1px solid #dfdfdf;
}

.table thead th {
	border-bottom: none;
}

.table th, .table td {
	border-top: none;
}

th.h5 {
	color: #242424;
}

.table-hover tbody tr:hover {
	background-color: initial;
}

div#carriers-show .form-group {
	margin-bottom: 0;
}

div#carriers-show > form > div > div:nth-child(2) > img {
	float: right;
	max-height: 16rem;
}

div#carriers-show .col-sm-2 {
	max-width: 50%;
}

div#carriers-show div.col-sm-9.img-thumbnail {
	max-width: 100%;
	width: 100%;
	flex: none;
}

div#carriers-show > form > div.row:nth-child(3) > div.col-sm-auto:first-child {
	width: 50%;
	margin: 0;
	padding: 0 2rem 0 0;
	text-align: right;
}

div#carriers-show > form > div.row:nth-child(3) > div.col-sm-auto:nth-child(2) {
	margin: 0 !important;
	padding-left: 2rem;
}

#carriers-index > .row > p.h2 {
	padding-left: 1rem;
}

#carriers-index > div.row:nth-child(3) > div.col-sm-2 {
	max-width: 12rem;
	margin: 3rem auto 0 auto !important;
	padding: 0;
}

#carriers-index > div.row:nth-child(3) {
	display: block;
	text-align: center;
}

#register .card > .card-body > form > div.form-group:nth-child(6),
#login .card > .card-body > form > div.form-group:nth-child(5) {
	margin-top: 4rem;
}

.btn.btn-link {
	padding: 0 !important;
    background: #fff;
    border: none;
    color: #242424;
    text-decoration: underline;
}

.btn-link:hover {
	color: #0082fb;
}

#carriers-create > form > div.row:nth-child(5) > div.col-7,
#carriers-create > form > div.row:nth-child(5) > div.col-5,
#carriers-edit > form > div.row:nth-child(6) > div.col-7,
#carriers-edit > form > div.row:nth-child(6) > div.col-5 {
	max-width: 100%;
    width: 100%;
    flex: auto;
}

#carriers-create > form > div.row:nth-child(4),
#carriers-edit > form > div.row:nth-child(5) {
	margin: 0 0 1rem 0;
    border: 1px solid #ced4da;
    padding: 1rem;
    border-radius: 0.25rem;	
}

#carriers-create > form > div.row:nth-child(4) > div.col-sm-6:first-child,
#carriers-edit > form > div.row:nth-child(5) > div.col-sm-6:first-child {
	min-height: 12rem;
	background-color: #ced4da;
}

#carriers-create > form > div.row:nth-child(4) > div.col-sm-6 > p,
#carriers-edit > form > div.row:nth-child(5) > div.col-sm-6 > p {
	line-height: 10;
	margin-top: 1rem;
	background-color: #ced4da;
	text-align: center;
}

#carriers-create > form > div.row:nth-child(7) > div.col-sm-2, 
#carriers-edit > form > div.row:nth-child(8) > div.col-sm-2 {
	max-width: 33.33%;
}

#carriers-create > form > div.row:nth-child(4) > div.col-sm-6:first-child,
#carriers-edit > form > div.row:nth-child(5) > div.col-sm-6:first-child {
	padding-left: 0;
	padding-right: 0;
}

#carriers-edit > form > div.row:nth-child(5) > div.col-sm-6:first-child > img.img-thumbnail {
	margin-bottom: 0 !important;
}

#carriers-edit > form > div.row:nth-child(5) > div.col-sm-6:nth-child(2) {
	padding-right: 0;
}

#carriers-create > form > div.row:nth-child(4) > div.col-sm-6:nth-child(2) > .form-group > label,
#carriers-edit > form > div.row:nth-child(5) > div.col-sm-6:nth-child(2) > .form-group > label {
	display: block;
	text-align: center;
	margin: 1rem auto;
} 


#carriers-create > form > div.row:nth-child(4) > div.col-sm-6:nth-child(2) > .form-group > label:nth-child(2),
#carriers-edit > form > div.row:nth-child(5) > div.col-sm-6:nth-child(2) > .form-group > label:nth-child(2) {
	width: 70%;
}

#carriers-create > form > div.row:nth-child(4) > div.col-sm-6:nth-child(2) > div > p,
#carriers-edit > form > div.row:nth-child(5) > div.col-sm-6:nth-child(2) > div > p {
	text-align: center;
}

#login .card > .card-body > form > div.form-group:nth-child(5) > div > button {
	margin-bottom: 1rem;
}

#home .card-body {
	text-align: center;
	font-size: 1.8rem;
	line-height: 10;
}

/** Modal Box **/

.modal-content {
	border-radius: 0;
}

.modal-header {
	border: none;
	border-radius: 0;
	background-color: #242424;
}

h5.modal-title {
	font-size: 1.25rem;
	color: #fff;
}

div.modal button.close {
	font-size: 1.8rem;
	font-weight: 400;
	color: #fff;
	text-shadow: none;
	opacity: 1;
	min-width: auto !important;
	width: auto !important;
	padding: 1rem !important;
}

div.modal .close:hover {
  color: #fff;
}

div.modal-body {
	font-size: 1rem !important;
}

.modal-footer {
	border: none;
	border-radius: 0;
}

.dropdown > button {
	border-radius: 0;
	color: #242424;
	background-color: #ced4da;
}

.dropdown > button:hover {
	background-color: #a2a7ad;
}

.dropdown-toggle:not(:disabled):not(.disabled):active,
.dropdown-toggle:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
	background-color: #a2a7ad;
}

div.modal button.dropdown-item {
	border-radius: 0;
}

.modal button.btn.btn-danger {
	background-color: #e43a35;
	border: none !important;
}

.modal button.btn.btn-danger:hover {
	background-color: #d81f26;
	border: none !important;
}

#medal-show h5 {
	margin-left: 1rem;
}

#medal-show h4,
#medal-sent h4,
#welcome-sent h4 {
	text-align: center;
}

#medal-show .col-sm-3,
#medal-sent .col-sm-3,
#welcome-sent .col-sm-3 {
    max-width: none;
}

#medal-show a > img {
	max-width: 12rem;
	margin-bottom: 1rem;
}



#medal-show > div > div > div > .card-body > div:nth-child(3) > div:nth-child(2) {
	max-width: none;
	width: auto;
	flex: none;
}

#medal-show > div > div > div > .card-body > div:nth-child(3) {
	margin-right: 0 !important;
	margin-top: 2rem !important;
}

#medal-show .row {
	margin: 0;
}

#medal-show h3 {
	font-size: 3rem;
	font-weight: 700;
}

#medal-show span.active-badge {
	margin: 0 1rem;
}

.container#medal-show > div > div > .card > .card-body > div > .card > .card-body > h6:nth-child(1),
.container#medal-show > div > div > .card > .card-body > div > .card > .card-body > h6:nth-child(3) {
	display: none;
}

.container#medal-show > div > div > .card > .card-body > div > .card > .card-body > h5:nth-child(2),
.container#medal-show > div > div > .card > .card-body > div > .card > .card-body > h5:nth-child(4) {
	margin-left: 0;
}

.container#medal-show > div > div > .card > .card-body > div > .card > .card-body > h5:nth-child(2) {
	margin-bottom: 1rem;
}

.container#medal-show > div > div > .card > .card-body > div.row:first-child {
	border-bottom: 1px solid #dfdfdf;
	padding-bottom: 1rem;
	margin: 0 1rem 2rem 1rem !important;
}

#owners-manage > .card > .card-body > form > div.row.mt-4:nth-child(7) {
	padding: 0 2rem;
}

#owners-manage > .card > .card-body > form > div.row.mt-4:nth-child(7) > div.col-sm-3.m-3 {
	margin: 0 auto !important;
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
}


/** Media Queries **/

@media (max-width: 768px) {
	#content {
	    min-width: 100%;
	}

	.container#carriers-index {
		max-width: 480px;
	}

	table button {
		min-width: auto !important;
		width: auto !important;
	}

	#carriers-show div.row:nth-child(5) tr {
		display: inline-block;
		text-align: center;
		padding: 1.25rem 0;
	}

	.table thead {
		display: none;
	}

	tr {
		display: grid;
		margin-bottom: 1rem;
	}

	th, td {
		width: 100% !important;
		text-align: center;
	}

	tbody > tr {
		padding: 1rem 0;
	}

	#carriers-show > div.row.mt-3 > table > tbody > tr > td:nth-child(3) > div.row:first-child {
		display: block;
		text-align: center;
	}

	#carriers-show > div.row.mt-3 > table > tbody > tr > td:nth-child(3) > div.row:first-child > div.col-sm-4 {
		margin: auto;
		max-width: 100%;
		margin-bottom: 1rem;
	}

	#carriers-show > div.row.mt-3 > table > tbody > tr > td:nth-child(3) > div.row:first-child > div.col-sm-4 > button {
		display: block;
	}


	#login .card > .card-body > form > div.form-group:nth-child(5) > div > button {
		margin: 0 auto 1rem auto;
		display: block;
	}

	#login .card > .card-body > form > div.form-group:nth-child(5) > div > a {
		display: block;
	}

	button {
		width: 70% !important;
		margin-left: auto;
		margin-right: auto;
	}

	table button {
		min-width: 70% !important;
	}

	.modal-footer {
		display: block;
		text-align: center;
	}

	.modal-footer button {
		margin: 0 0 1rem 0;
	}

	div.dropdown-menu {
		width: 70%;
	}

	button.dropdown-item {
		text-align: center;
	}
}

@media (max-width: 575.98px) {

	.container {
		padding-top: 8rem;
	}

	div#carriers-show > form > div > div:nth-child(2) > img {
		max-height: none;
	}

	td.medal-btn1 > div > div {
		margin-bottom: 1.25rem;
	}

	.table-striped tbody tr:nth-of-type(odd) {
		background-color: #fff;
	}

	#carriers-show .table {
		margin-top: 1.25rem;
	}

	div#carriers-show > form > div.row:nth-child(3) > div.col-sm-auto:first-child {
		width: 100%;
		text-align: center;
		padding: 1 rem;
		text-align: center;
		margin-bottom: 1.25rem;
	}

	div#carriers-show .col-sm-2 {
		width: 100%;
		max-width: 100%;
	}

	td.medal-btn2 {
		margin-top: -1rem;
	}

	#carriers-index > div.row:first-child {
		display: block;
	}

	p.h2 {
		text-align: center;
		margin-bottom: 2rem;
	}

	#register .card > .card-body > form > div.form-group:nth-child(6) > div {
		text-align: center;
	}

	#carriers-create > form > div.row:nth-child(7) > div.col-sm-2,
	#carriers-edit > form > div.row:nth-child(8) > div.col-sm-2 {
		max-width: 100%;
	}
	
	.modal-footer {
		display: block;
	}

	.modal-footer button {
		display: initial;
		margin: .5rem 0;
	}

	.modal-footer > :not(:last-child) {
	    margin-right: 0;
	}

	#owners-manage > .card > .card-body > form > div.row.mt-4:nth-child(7) {
		padding: 0;
	}

	#owners-manage > .card > .card-body > form > div.row.mt-4:nth-child(7) > div.col-sm-3.m-3 {
		margin: 1rem auto !important;
	    flex: 0 0 100%;
	    max-width: 100%;
	}

	.modal {
		padding: 0 !important;
	}

	.container#medal-show > div > div > .card > .card-body > div > div > div > h3 {
		text-align: center
	}

}

@media (min-width: 576px) {
	
	#medal-show h4,
	#medal-sent h4,
	#welcome-sent h4 {
		text-align: left;
	    font-size: 1rem;
	    font-weight: 700;
	    margin-left: -1rem;
	}


	#medal-show .col-sm3,
	#medal-sent .col-sm-3,
	#welcome-sent .col-sm-3 {
	    max-width: none;
	}

}

@media (min-width: 1920px) {
	
	.container {
		max-width: 54rem;
	}

}