/* CSS File for payroll.html */

#hero.payroll {
	background-image: url("/img/payroll-hero-hands-1200px-16x9.jpg"); /* Fallback */
    background-image: -webkit-image-set(
        url("/img/payroll-hero-hands-1200px-16x9.jpg") 1x,
        url("/img/payroll-hero-hands-2560px-16x9.jpg") 2x);
    background-image: image-set(
        url("/img/payroll-hero-hands-1200px-16x9.jpg") 1x,
        url("/img/payroll-hero-hands-2560px-16x9.jpg") 2x);
}

.gear-background {
	background-image: url("../img/background-gears-25alpha-1200px.png"); /* Fallback */
    background-image: -webkit-image-set(
        url("/img/background-gears-25alpha-1200px.png") 1x,
        url("/img/background-gears-25alpha-2560px.png") 2x);
    background-image: image-set(
        url("/img/background-gears-25alpha-1200px.png") 1x,
        url("/img/background-gears-25alpha-2560px.png") 2x);
	background-position: center;
	background-repeat: no-repeat;
}

/********************/
/*  Search Styling  */
/********************/
#search {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-top: 3rem;
	flex-wrap: wrap;
}
#search-field {
	height: 45px;
	border: 3px solid #003f5f;
	padding: 0 10px;
}
#search button {
	padding: 0;
    margin-left: -7px;
	height: 51px;
    width: 51px;
    border: 3px solid #003f5f;
    background: #003f5f;
    color: white;
}
#clear-search {
	display: none;
}
#clear-search.active {
	display: initial;
}

/********************/
/*  Filter Styling  */
/********************/
#filter {
	display: flex;
	flex-flow: row wrap;
    justify-content: center;
    align-items: center;
	margin: 10px 0;
	border: transparent;
}
#filter legend {
	font-weight: bold;
	color: #003f5f;
	font-size: 1.2rem;
}
#filter i {
	margin-right: 5px;
}
#filter label {
	border-radius: 18px;
	background-color: #003f5f;
	height: 40px;
	color: #ffffff;
	border: 3px solid #003f5f;
	min-width: 125px;
	font-weight: bold;
    align-items: center;
    display: flex;
    justify-content: center;
}
#filter label:hover {
	cursor: pointer;
}
#filter label.active {
	background-color: transparent;
	border: 3px solid #003f5f;
	color: #003f5f;
}
#filter input {
	display: none;
}
/* Possible Future Addition */
/* Not Used */
#filter button {
	border: none;
	background-color: transparent;
}
#filter button i {
	color: #919191;
}
#filter button.active i {
	color: #003f5f;
	cursor: pointer;
}
/* End Not Used */

/********************/
/* Results Styling  */
/********************/
#search-results {
	justify-content: center;
	display: flex;
}
#search-results p {
	font-size: 1.5rem;
	margin-top: 1.5em;
	margin-bottom: 0;
}
#search-results p span {
	font-weight: bold;
	color: #003f5f;
}
#search-results .loader {
	border: 8px solid #f3f3f3; /* Light grey */
	border-top: 8px solid #003f5f; /* Blue */
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin 2s linear infinite;
	margin-top: 20px;
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/********************/
/* Provider Styling */
/********************/
.info-background article#provider-tables {
	padding-bottom: 2rem;
}
#national-providers {
	grid-column: 2 / span 1;
	grid-row: 1;
    height: fit-content;
}
#regional-providers {
	grid-column: 4 / span 1;
	grid-row: 1;
    height: fit-content;
}
table.payroll-providers {
	border-collapse: collapse;
	margin-top: -150px;
	box-shadow: 0 0.5rem 1rem rgb(58 58 58 / 40%);
}
table.payroll-providers tr {
	height: 60px;
}
table.payroll-providers tr:nth-of-type(odd) {
	background-color: #ececec;
}
table.payroll-providers tr:nth-of-type(even) {
	background-color: #c7c7c7;
}
table.payroll-providers tr:hover {
	background-color: #3a3a3a;
	font-weight: bold;
	color: #ffffff;
}
table.payroll-providers tr:first-of-type {
	background-color: #003f5f;
	font-weight: bold;
	color: #ffffff;
}
table.payroll-providers tr:first-of-type:hover {
	background-color: #003f5f;
	font-weight: bold;
	color: #ffffff;
}
table.payroll-providers th {
	text-align: left;
	padding-left: 10px;
}
table.payroll-providers th:first-of-type {
	width: 68%;
}
table.payroll-providers td:first-of-type {
	border-right: 2px solid #ffffff;
}
table.payroll-providers td.no-results:first-of-type {
	border-right: none;
}
table.payroll-providers td {
	padding-left: 10px;
	font-weight: bold;
}
#footnotes {
	grid-column: 2 / span 3;
    font-size: small;
    padding-top: 3rem;
}
#footnotes ul {
	list-style-type: none;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    #hero.payroll {
        background-image: url("/img/payroll-hero-hands-640px-4x3.jpg"); /* Fallback */
        background-image: -webkit-image-set(
            url("/img/payroll-hero-hands-640px-4x3.jpg") 1x,
            url("/img/payroll-hero-hands-1920px-16x9.jpg") 2x);
        background-image: image-set(
            url("/img/payroll-hero-hands-640px-4x3.jpg") 1x,
            url("/img/payroll-hero-hands-1920px-16x9.jpg") 2x);
    }
    .gear-background {
        background-image: url("../img/background-gears-25alpha-640px.png"); /* Fallback */
        background-image: -webkit-image-set(
            url("/img/background-gears-25alpha-640px.png") 1x,
            url("/img/background-gears-25alpha-1920px.png") 2x);
        background-image: image-set(
            url("/img/background-gears-25alpha-640px.png") 1x,
            url("/img/background-gears-25alpha-1920px.png") 2x);
        background-size: auto 100%;
    }

    #search-field {
        width: 80%;
    }
    #filter legend {
        display: block;
    }
    #filter label {
        margin: 0 2.5px 10px 2.5px;
    }
	table.payroll-providers {
		margin-top: 50px;
	}
	table.payroll-providers:first-of-type {
		margin-top: -150px;
	}
	#regional-providers {
		grid-column: 2 / span 1;
		grid-row: 2;
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

    .gear-background {
        background-image: url("../img/background-gears-25alpha-640px.png"); /* Fallback */
        background-image: -webkit-image-set(
            url("/img/background-gears-25alpha-640px.png") 1x,
            url("/img/background-gears-25alpha-1920px.png") 2x);
        background-image: image-set(
            url("/img/background-gears-25alpha-640px.png") 1x,
            url("/img/background-gears-25alpha-1920px.png") 2x);
        background-size: auto 100%;
    }

    #search-field {
        width: 80%;
    }
    #filter legend {
        display: block;
    }
    #filter label {
        margin: 0 2.5px 10px 2.5px;
    }
	table.payroll-providers {
		margin-top: 50px;
	}
	table.payroll-providers:first-of-type {
		margin-top: -150px;
	}
	#regional-providers {
		grid-column: 2 / span 1;
		grid-row: 2;
	}
    
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

    .gear-background {
        background-image: url("../img/background-gears-25alpha-2048px.png");
    }

    #search-field {
        width: 70%;
    }
    #filter legend {
        display: contents;
    }
    #filter label {
        margin: 0 2.5px;
    }
    #filter label:first-of-type {
        margin-left: 10px;
    }
    
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

    .gear-background {
        background-image: url("../img/background-gears-25alpha-2048px.png");
    }

    #search-field {
        width: 50%;
    }
	#regional-providers {
		grid-column: 4 / span 1;
		grid-row: 1;
	}
	table.payroll-providers {
		margin-top: -150px;
	}
    
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

    #search-field {
        width: 30%;
    }

    .gear-background {
        background-image: url("../img/background-gears-25alpha-2048px.png");
        background-size: 100% auto;
    }
    
}