/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/rBHvpRWBkgyW99dXT88n7yEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/NX1NravqaXESu9fFv7KuqiEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/SKK6Nusyv8QPNMtI4j9J2yEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/gFXtEMCp1m_YzxsBpKl68iEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/zhcz-_WihjSQC0oHJ9TCYPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

body {
  background-color: #E6E8E7;
  font-family: 'Montserrat'; font-size: 14px;
  /*  background-image: url(/img/sf-bug_logo_1color-gray_small.png); */
  /*background-image: url(https://images8.alphacoders.com/802/802526.jpg);
  background-position: -590% 180%;
  */

}
table#pageContainer {
  width: 100%;
  max-width: 1000px;
  border-spacing: 0px;
  padding: 0px;
  border-style: solid;
  border-width: 1px;
  border-color: #646569;
  background-color: white;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

td#pageHeader {
  padding: 0px;
  background-color: white;
  background-image: url(/img/sf_logo_2color_header_small.png);
  background-repeat: no-repeat;
  height: 115px;
  vertical-align:middle;
  border-style: none none solid none;
  border-width: 3px;
  border-color: #646569;
}

td#pageBody {
  text-align: left;
  padding-bottom: 10px;
  padding-left: 5px;
  padding-right: 5px;
}
table#headerTable {
  width: 100%;
  vertical-align: middle;
}

td#leftHeader {
  width: 200px;
}
td#headerTitle {
  vertical-align: middle;
}
td#headerTitle a {
  text-decoration: none;
  color: black;
}

td#loginInfo {
  width: 200px;
}

#loginInfoArea {
  width: 400px;
}

p.notice {
  width: 400px;
  border-width: 1px;
  border-color: black;
  border-style: solid;
  background-color: red;
  color: yellow;
}

p.notice2 {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  border-width: 1px;
  border-color: black;
  border-style: solid;
  background-color: green;
  color: white;
  padding: 10px;
}

p.noticeSparkle {
  background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo,
  violet, red);
}

p.notice2 a {
  color: white;
}

p.notice a{
  color: black;
}


.userMessage {
  color: red;
  font-weight: bold;
  text-align: center;
}

.normalButton {
  width: 100px;
  margin-bottom: 2px;
}

.errors {
  color: red;
}

/* all this loading css is optional style sugar;
   it'll work fine without it. just not look pretty. */
.loading-text {
  background: #FFC129;
  color: black;
  font-weight: bold;
  padding: 3px;
  border-radius: 5px;
  -o-border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
}
.loading-text .place-img-content {
  margin: 0 3px 0 1px;
}
.loading.top {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 0px;
  -webkit-border-top-left-radius: 0px;
  -webkit-border-top-right-radius: 0px;
}
.loading.left {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-bottomleft: 0px;
  -webkit-border-top-left-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
}
.loading.bottom {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  -moz-border-radius-bottomleft: 0px;
  -moz-border-radius-bottomright: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -webkit-border-bottom-right-radius: 0px;
}
.loading.right {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  -moz-border-radius-topright: 0px;
  -moz-border-radius-bottomright: 0px;
  -webkit-border-top-right-radius: 0px;
  -webkit-border-bottom-right-radius: 0px;
}
.loading-masked { overflow: hidden; }
.loading-error {
  color: #FFF;
  background: red;
}

.hidden {
  display:none;
}

.hiddenPopup {
  display:none;
}

div.empListing {
  width: 190px;
  height: 305px;
  border-spacing: 0px;
  padding: 0px;
  padding-top: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: #6C4D23;
  background-color: white;
  text-align: center;
  float: left;
  overflow: hidden;
  margin: 1px;
  flex-shrink: 1;
  /* flex-grow: 1; */
}
div.SFCNempListing {
  width: 195px;
  height: 365px;
  border-spacing: 0px;
  padding: 0px;
  border-style: solid;
  border-width: 1px;
  border-color: #6C4D23;
  background-color: white;
  text-align: center;
  float: left;
  overflow: hidden;
  margin: 1px;
}

div#mobileBody {
  /*background-color: white;*/
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

div#mobileContainer {
  background-color: white;
}

div#applicationsDiv {
  width: 60%;
  float: left;
  max-width: 600px;
  min-width: 335px;
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content: center;
  -webkit-justify-content: center;
}

div#documentsDiv {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content: center;
  -webkit-justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

div.depPolicyDiv {
  margin: 0px 10px;
}

div.depPolicyHeader {
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: larger;
  border-bottom: solid 1px black;
  text-transform: uppercase;
}

div.applicationsGroupDiv {
  clear: both;
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content:center;
  -webkit-justify-content: center;
  
}

div.applicationDiv {
  clear: both;
  width: 165px;
  height: 225px;
  padding: 10px;
  text-align: center;
}

div.applicationDiv img {
  height: 150px;
}

div.applicationDiv2 {
 clear: both;
  width: 165px;
  height: 225px;
  padding: 10px;
  text-align: center;
  flex-grow: 1;
}

div#empNewsDiv {
  border-style: solid;
  border-color: black;
  border-width: 1px;
  float: left;
  width: 335px;
  height: 100%;
  padding: 5px;
  min-width: 300px;
}

div.benchmarkGraph {
  width: 600px;
  max-width: 100%;
  overflow-x: auto;
}

.textsmall {
  font-size: 80%;
}

table.borderedTable {
  border: 1px solid black;
  border-collapse: collapse;
}
table.borderedTable td {
  border: 1px solid black;
}
table.borderedTable th {
  border: 1px solid black;
}
.alignRight {
  text-align: right;
}
.alignCenter {
  text-align: center;
}
.center {
  margin-left: auto;
  margin-right: auto;
}

li.invalid {
  color: red;
}

li.valid {
  color: green;
}

a.timecardLinks {
  background-color: #CCC;
  width: 200px;
  height: 80px;
  border: 1px solid black;
  border-radius: 5px;
  margin: 10px;
  text-decoration: none;
  font-size: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Search Bar Styles */

.searchWrapper {
  position: relative;
  display: flex;
  min-width: 100px;
}
.search-icon {
  position: absolute;
  top: 6px;
  left: 8px;
  width: 14px;
}

.clear-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 10px;
  cursor: pointer;
  <!-- visibility: hidden; -->
}

.search {
  border: 1px solid grey;
  border-radius: 5px;
  height: 20px;
  width: 100%;
  padding: 2px 23px 2px 30px;
  outline: 0;
  background-color: #F5F5F5;
}

.search:hover, .search:focus {
  border: 1.5px solid #DB0032;
  background-color: white;
}

.rotate {
  animation: rotation 60s infinite linear;
}

.outageTable {
  border-collapse: collapse;
  cell-padding: 5px;
  text-align: left;
  margin:0 auto;
}
.outageUpdate {
  font-style: italic;
  border-top: 1px solid black;
}

.outageRow {
  border: 1px solid black;
  vertical-align: top;
}

.outageRow td {
  padding-right: 10px;
}

.activeOutage {
  border-color: red;
  border-width: 2px;
  background-color: #EEE;
}

.resolvedOutage {
  background-color: #DDD;
}

.innerCircle {
  display: flex;
  align-items: center;
  justify-content: center;
  --circle-radius: 80%; /* changed as percent value */
  
  height: 100%;
  width: 100%;
  --mask: radial-gradient(circle farthest-side at center center, transparent var(--circle-radius), #000 calc(var(--circle-radius) + 2px) 100%) 50% 50%/100% 100% no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  background: rgb(255, 255, 255);
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(20deg);
  }
}