/**

   ++++++++++++++++++++++++++++++++++++++++++++++++++++++
   AUTHOR  : Designcollection
   PROJECT : TBL - Bootstrap 4+ Table Design
   VERSION : 1.0
   ++++++++++++++++++++++++++++++++++++++++++++++++++++++
   
**/

/** # [Table of contents]

* BODY
# 01 - Table Id#
# 02 - Table Class
# 03 - Table TR
# 04 - Table TD 
# 05 - Table Border
# 06 - Table Responsive
# 07 - Footer 

# [Color codes]

Head BG : #0e3042 (Navy Blue)
Text Color : #333333 (Black)
BG Color   : #1f3f50 (light Navy)

a (standard):   #333 (black)
a (hover):    #ccc (gray)

**/

/* Smartphones (portrait and landscape) -- -- -- -- -- - */

@media screen and (min-width: 320px) and (max-width: 667px) {
	/* Styles */
	/* Force table to not be like tables anymore */
	#tbl .no-more-tables table, #tbl .no-more-tables thead, #tbl .no-more-tables tbody, #tbl .no-more-tables th, #tbl .no-more-tables td, #tbl .no-more-tables tr {
		display: block;
	}
	/* Hide table headers (but not display: none;, for accessibility) */
	#tbl .no-more-tables thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	#tbl .no-more-tables tr {
		border: 1px solid #ccc;
	}
	#tbl .no-more-tables td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50% !important;
		white-space: normal;
		text-align: left;
	}
	#tbl .no-more-tables td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
		text-align: left;
		font-weight: bold;
	}
	/* 	Label the data 	*/
	#tbl .no-more-tables td:before {
		content: attr(data-title);
	}
	#tbl .table td, #tbl .table th {
		border-top: transparent;
		border-bottom: 1px solid #006699;
	}
	#tbl .table .thead-dark th {
		color: #fff;
		background-color: #006699;
		border-color: #006699;
	}
	#tbl .table {
		border-left: 1px solid #006699;
		border-right: 1px solid #006699;
		font-weight: 300;
		font-size: 15px;
		font-family: 'Roboto', sans-serif;
	}
	#tbl .table.table-borderless td, #tbl .table.table-borderless th {
		border-top: transparent;
		border-bottom: transparent;
	}
	#tbl .table.table-borderless tr:last-child {
		border-bottom: 1px solid #006699 !important;
	}
	#tbl .table.table-sm {
		font-size: 14px;
		font-family: 'Roboto', sans-serif;
	}
	#tbl .table-dark {
		color: #fff;
		background-color: #006699;
	}
	#tbl .table-dark td {
		border-color: #006699;
	}
}
/* iPads (portrait and landscape) -- -- -- -- -- - */

@media screen and (min-width: 668px) and (max-width: 1223px) {
	/* Styles */
	#tbl .table td, #tbl .table th {
		border-top: transparent;
		border-bottom: 1px solid #006699;
	}
	#tbl .table .thead-dark th {
		color: #fff;
		background-color: #006699;
		border-color: #006699;
	}
	#tbl .table {
		border-left: 1px solid #006699;
		border-right: 1px solid #006699;
		font-weight: 300;
		font-size: 15px;
		font-family: 'Roboto', sans-serif;
	}
	#tbl .table.table-borderless td, #tbl .table.table-borderless th {
		border-top: transparent;
		border-bottom: transparent;
	}
	#tbl .table.table-borderless tr:last-child {
		border-bottom: 1px solid #006699 !important;
	}
	#tbl .table.table-sm {
		font-size: 14px;
		font-family: 'Roboto', sans-serif;
	}
	#tbl .table-dark {
		color: #fff;
		background-color: #006699;
	}
	#tbl .table-dark td {
		border-color: #006699;
	}
	#tbl .table-responsive-ipad {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: -ms-autohiding-scrollbar;
	}
	#tbl table thead tr th.size-one {
		width: 35%;
	}
	#tbl .table-responsive-ipad>.table>thead>tr>th {
		white-space: nowrap;
	}
}
/* Desktops and laptops -- -- -- -- -- - */

@media screen and (min-width: 1224px) {
	/* Styles */
	#tbl .table td, #tbl .table th {
		border-top: transparent;
		border-bottom: 1px solid #006699;
	}
	#tbl .table .thead-dark th {
		color: #fff;
		background-color: #006699;
		border-color: #006699;
	}
	#tbl .table {
		border-left: 1px solid #006699;
		border-right: 1px solid #006699;
		font-weight: 300;
		font-size: 15px;
		font-family: 'Roboto', sans-serif;
	}
	#tbl .table.table-borderless td, #tbl .table.table-borderless th {
		border-top: transparent;
		border-bottom: transparent;
	}
	#tbl .table.table-borderless tr:last-child {
		border-bottom: 1px solid #006699 !important;
	}
	#tbl .table.table-sm {
		font-size: 14px;
		font-family: 'Roboto', sans-serif;
	}
	#tbl .table-dark {
		color: #fff;
		background-color: #006699;
	}
	#tbl .table-dark td {
		border-color: #006699;
	}
	#tbl table thead tr th.size-one {
		width: 12%;
	}
}
/* Large screens -- -- -- -- -- - */

@media screen and (min-width: 1824px) {
	/* Styles */
}
body {
	font-family: 'Roboto', sans-serif;
}
/* Table text blink */

#tbl .blink {
	animation: blinks 3s linear infinite;
	color: #008000;
	font-weight: 400;
}
@keyframes blinks {
	50% {
		opacity: 0;
	}
}
#tbl .blink_me {
	animation: blinker 3s linear infinite;
	color: #FF0000;
	font-weight: 400;
}
@keyframes blinker {
	50% {
		opacity: 0;
	}
}
@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}
@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}
@keyframes Gradient-red {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}
#tbl .bg-blink-red {
	background: linear-gradient(-45deg, #ffaaaa, #ff8080, #ff5555, #ff2a2a);
	background-size: 400% 400%;
	-webkit-animation: Gradient-red 15s ease infinite;
	-moz-animation: Gradient-red 15s ease infinite;
	animation: Gradient-red 15s ease infinite;
	font-weight: 400;
}
@keyframes Gradient-green {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}
#tbl .bg-blink-green {
	background: linear-gradient(-45deg, #bce5ba, #9ad79d, #5cb76e, #309244);
	background-size: 400% 400%;
	-webkit-animation: Gradient-green 15s ease infinite;
	-moz-animation: Gradient-green 15s ease infinite;
	animation: Gradient-green 15s ease infinite;
	font-weight: 400;
}
p.footer {
	margin: 50px 0px;
}