.spinner {
    display: inline-block;
    width: 20px;
    height: 18px;

    border: 4px solid rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    text-align: center;
    border-top-color: #ffffff;
    animation: spin 0.9s infinite linear;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

#generateReportBtn {
    background-color: #2C3CA3;
    width: 150px;
    height: 40px;
 
}

#monthdiv, #yeardiv {
    float: left;
    margin-right: 10px;
}

#month, #year {
    margin-top: 10px;
}
#generateNote {
margin-top:30px;
}
#archiveBox {
    background-color: #f2f2f2;
    border: 1px solid black;
    text-wrap: wrap;
	
    /*    width: 40vw;*/
    margin-left: 20px;
    padding: 10px;
}
    #archiveBox h3 {
      font-size:  1.2em;
    }
.tableauPNG {
}
#dateSelection {
display:inline-flex;
}

.nodata {
    width: 100%;
    text-align: center;
    border-style: solid;
    border-width: thin;
    padding: 5px;
    margin-bottom: 15px;
}

.historicalReports {
    display: none;
}

table th, td {
    padding: 10px;
}

th[colspan="2"] {
    text-align: center;
}

.captionPadding {
    padding-left: 235px;
}

/* tab data page icon hover/focus states */
.ieso-tab-directory span.ieso-callout-heading ul.ieso-tabs li a:hover, .ieso-tab-directory span.ieso-callout-heading ul.ieso-tabs li a:focus {
    outline-color: #808080;
    outline: thin dotted;
}


@media screen and (max-width: 992px) {
	#dateSelection{
		display:grid;
	}
}
@media screen and (max-width: 1080px) {
	#dateSelection{
		display:grid;
	}
}

@media screen and (max-width: 768px) {
	#dateSelection {
		display:grid;
	}
	#dateSelection .row{
		display:grid;
	}
	#archiveBox{
		width:auto;
	}
}