@import url("custom.css");

.pager-panel {
	margin:0.5rem 0;
	background-color:#1879B9;
	color:#fff;
	padding: 0.5rem;
    border-radius: 10px;	
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}
.pager-panel  div.page-text {
	padding: 5px 0.5rem;
}
.card {
	margin: 2px;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
	border-bottom: 5px solid #F39C12;
}

.suaCard {
	margin: 2px;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}
.suaCert-header {
	padding:1rem;
}
.suaCert-body .title {
	background-color: #f1f7fc;
	padding: 1rem;
}
.card-note {
	font-size:0.8rem;
	background-color: #FFF790;
	colour: #918700;
}
.suaCert-body .cert-text {
	padding: 0.5rem 1rem;
}
.card-img-top {
	padding: 0.5rem;
	width:100%;
	margin-top:1rem;
	height:auto;
	max-height: 200px;
}
.card-title {
	font-size:0.85rem;
	color: #1879B9;
	margin-bottom: .25rem;	
}
.card-text {
	font-size:0.8rem;
	color: #6c757d;
	margin:0;
}
.button-panel {
	margin:1rem 0;
}
.badge-orange {
	background-color:#F39C12;
	color:#fff;
}
.card-link {
	text-decoration: none;
	display:block;
}



#add-sua {
    position: fixed;
    bottom: 140px;
    right: 20px;
    background: rgba(24, 73, 104, 0.7);
    width: 50px;
    height: 50px;
    display: inline;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
}
#add-sua i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 12.5px;
    top: 10px;
    font-size: 30px;
}
#add-sua:hover {
     background: rgba(24, 73, 104, 0.9);
}
#add-sua:hover i {
    color: #fff;
}
#checkout {
    position: fixed;
    bottom: 80px;
    right: 20px;
    background: rgba(108, 117, 125, 0.7);
    width: 50px;
    height: 50px;
    display: inline;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
}

#checkoutBtn {
    position: fixed;
    bottom: 280px;
    right: 20px;
}

#addSUABtn {
    position: fixed;
    bottom: 340px;
    right: 20px;
}

#checkout.active {
    background: rgba(255, 0, 21, 0.7);
}
#checkout i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 10px;
    top: 10px;
    font-size: 28px;
}
/* #checkout:hover {
    background: rgba(255, 0, 21, 0.9);
} */
/* #checkout:hover i {
    color: #fff;
} */


.checkout-status {
/* 	position: absolute; */
/* 	    right: 5px;
    
    height: 20px;
    width:150px;
    display: inline; */
    right:0px;
    bottom: 0px;
}
.addtobag {
    position: absolute;
    right: 5px;
    top: 5px;
    background-color: rgb(255, 255, 255);
    width: 40px;
    height: 40px;
    display: inline;
    text-decoration: none;
   /* -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;*/
    cursor:pointer;
	border:1px solid black;
}

.addtobag i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 8px;
    top: 8px;
    font-size: 22px;
}
.addtobag:hover {
   /*background: rgba(255, 0, 21, 0.9);*/
}
.addtobag:hover i {
    color: #fff;
}
.addtobag.active {
    background: rgba(255, 0, 21, 0.7);
}
.sua-content, .cert {
	margin: 2px;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
	background-color:#fff;
}
.sua-header {
	background-color: #f1f7fc;
	border-bottom: 2px solid #ccc;
} 
.sua-header-text {
	margin: 10px;
}
.sua-body{
	padding: 1rem;
}
.sua-body .title {
	font-weight:bold;
	color:#1879B9;
	display:block;
}
.sua-body .row div {
	padding-bottom: 10px;
}
.img-sua {
	max-height:100%;
	width:100%;
	vertical-align: middle;
}
button {
	margin: 0 5px;
}
.cert-header {
	padding:1rem;
}
.cert-text label{
	color:#6c757d;
	font-size: 0.8em;
}
.cert-body .title {
	background-color: #f1f7fc;
	padding: 1rem;
}

.cert-body .cert-text {
 	padding: 0.5rem 1rem;
 }
 .btn-belizehole.btn-block {
 	width:97%;
 }
 .bottom-button-panel {
 	padding:10px;
 	padding-top:0;
 	width:100%;
 }
 .sua-list-header {
 	padding: 1rem;
 }
 
hr {
	  border-top: 1px solid #ccc;
}
.sua-panel {
	background-color:#fff;
	margin: 2px;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}
.card-body-right {
    padding: 0.2rem 0.5rem;
}
.card-list {
	/*height: 105px;*/
	min-height: 130px;
	position: relative;
	background-color:#fff;
	margin: 2px;
/* 	padding-bottom: 20px; */
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;	
}
img.card-img-left {
	padding: 0.5rem;
	margin:2px;
	border: 1px solid #53b6f4;
	background-color:#fff;
	max-width: 140px;
	max-height: 140px;
	object-fit:cover;	
}
div.card-img-div{
	width:120px;
	height:100px;
	
}
img.border-orange {
	border-left:5px solid orange;
}
img.border-green {
	border-left:5px solid green;
}
img.border-grey {
	border-left:5px solid #6c757d;
}
img.border-red {
	border-left:5px solid #dc3545;
}
img.border-dark {
	border-left:5px solid #343a40;
}
.diy {
	background-color:#f8f9fa;
}
.sua-heading {
	padding: 0.5rem 1rem;
}
.sua-verify-heading {
	padding: 1rem 2rem;
}
.row-photo{
	padding-bottom: 10px;
}
.qrcode {
	margin:0.5rem 0;
}
.card-body-left {
	padding: 5px;
	width: 150px;
}

@media only screen and (max-width: 320px) {
	.card-body-left {
		width: 83px;
	}
	img.card-img-left {
		padding: 0.25rem;
		width:75px;
	}	
	.jumbotron {
		padding: 2rem 0;
	}
	.pager-panel div.page-text {
	    padding: 0 1rem;
	}
	.addtobag{
		left:5px;
		bottom: 5px;
    	top: unset;		
	}
	.card-main{
		/* padding-left:50px; */
	}
}
@media only screen and (min-width: 321px) and (max-width: 499px) {
	.card-body-left {
		width: 100px;
	}
	img.card-img-left {
		padding: 0.5rem;
		width:90px;
	}	
	.jumbotron {
		padding: 2rem 0;
	}
	.pager-panel div.page-text {
	    padding: 0 1rem;
	}
	.addtobag{
		left:5px;
		bottom: 5px;
    	top: unset;
	}
	.card-main{
		/* padding-left:50px; */
	}
}
@media only screen and (min-width: 500px) and (max-width: 767px) {
	.card-body-left {
		width: 145px;
	}
	img.card-img-left {
		padding: 0.25rem;
		width:135px;
	}
	.addtobag{
		left:5px;
	}
	.card-main{
		padding-left:50px;
	}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.card-body-left {
		width: 150px;
	}
	img.card-img-left {
		padding: 0.5rem;
		width:140px;
	}
	.addtobag{
		left:5px;
	}
	.card-main{
		padding-left:50px;
	}		
}
@media only screen and (max-width: 499px) {
	h1.title {
		font-size: 1.5rem;
	}
}