/*SBS portal styles*/


html {
  scroll-behavior: smooth;
}
/*Visually-hidden used for ADA to hide Headings from view but keep in structure*/
.visually-hidden {position: absolute!important;
    width: 1px!important;
    height: 1px!important;
    padding: 0!important;
    margin: -1px!important;
    overflow: hidden!important;
    clip: rect(0,0,0,0)!important;
    white-space: nowrap!important;
    border: 0!important;}

a, a:link {color: #0065BD;}
a:visited {color: #287F9A;}
a:hover, a:focus {color: #CF112D; text-decoration: underline;}

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small {color: #6b6b6b;}

A.btn:hover {
  text-decoration: none;
}
A.btn-mfps, A.btn-mfps:link, A.btn-mfps:visited, A.btn-aquos, A.btn-aquos:link, A.btn-aquos:visited, A.btn-displays, A.btn-displays:link, A.btn-displays:visited {
  color: #ffffff;
}
/*----------- ADA Dropdown Selection Overides -----*/

::-moz-selection {
    background: rgba(0,115,230,1); /* blue */
    color: #fff;
    text-shadow: none;
}

::selection {
    background: rgba(0,115,230,1); /* blue */
    color: #fff;
    text-shadow: none;
}

/*---------------Elastic Search ADA Overrides-------------------*/

.ElasticSearch .PagerControl .Summary, .ElasticSearch .PagerControl .Total, .ElasticSearch .PagerControl .PageSizeLabel { color: #3d3d3d;}
.ElasticSearch.BusinessSearch .SearchBoxPanel .SearchBox a.SearchButton {     background: url(/Portals/_default/Skins/Sharp-SBS/img/top_search.png) no-repeat 12px 12px #777777;
    width: 40px;
    height: 39px;
    border-radius: 4px;}
.ElasticSearch.BusinessSearch .SearchBoxPanel .SearchBox a.SearchButton:hover { background: url(/Portals/_default/Skins/Sharp-SBS/img/top_search.png) no-repeat 12px 12px #000000;}

/*----------------X3 Product Catalog-----------------*/

/*Make download accordion type buttons full width*/
.DnnModule-X3SharpProductDetail #downloads button {
                width: 100%;
                background: none;
                border: none;
                color: #666;
                font-size: 16px;
                font-weight: 600;
                text-align: left;
}
 
.DnnModule-X3SharpProductDetail #downloads button:hover {
                text-decoration: underline;
}

/*Hover and focus styles on Prodcut catalog search page*/
a.product:hover .panel-heading {background-color: #555965; color: #ffffff;}
a.product:focus {outline:none;}
a.product:focus .panel {border: 1px solid #000000;
}
a.product:focus .panel-heading {background-color: #cecece; color: #000000; }

/*-------Bootstrap ADA OVERRIDES---------*/
/*===LABELS===*/
.label-default {background-color: #757575;}
.label-primary {background-color: #3a77ab;}
.label-success {background-color: #3D7D3C;}
.label-info, .label-warning {color: #000000;}
.label-danger {background-color: #D13131;}
/*===BUTTONS===*/
/*
.btn-primary, a.btn-primary {
    color: #ffffff;
    background-color: #3573A9;
	border-color: #3573A9; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary, a.btn-primary:hover, a.btn-primary:focus, a.btn-primary:active, {
	color: #ffffff;
    background-color: #214C71;
    border-color: #214C71;
}
.btn-primary:focus, a.btn-primary:focus {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
    box-shadow: 0 0 0 0.25rem rgb(49 132 253 / 50%);
}
*/

.btn-primary, a.btn-primary:link {
  color: #ffffff;
  background-color: #cf112d;
  border-color: #740309;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
  color: #ffffff;
  background-color: #3276b1;
  border-color: #285e8e;
}
a.btn-primary:visited { color: #ffffff;  border-color: #000000;}
.btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active {
  background-color: #cf112d;
  border-color: #740309;
}
.btn-primary .badge {
  color: #cf112d;
  background-color: #fff;
}
.btn-primary:focus, a.btn-primary:focus {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
    box-shadow: 0 0 0 0.25rem rgb(49 132 253 / 50%);
}

.btn-secondary, a.btn-secondary {
    color: #ffffff;
    background-color: #4F7A92;
	border-color: #ffffff; }
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active, .open .dropdown-toggle.btn-secondary, a.btn-secondary:hover, a.btn-secondary:focus, a.btn-secondary:active {
	color: #ffffff;
    background-color: #1C465A;
    border-color: #ffffff;
}
.btn-secondary:focus, a.btn-secondary:focus {
    color: #fff;
    background-color: #4F7A92;
    border-color: #0a58ca;
    box-shadow: 0 0 0 0.25rem rgb(49 132 253 / 50%);
}


.btn-tertiary, a.btn-tertiary {
    color: #fff;
  text-shadow: 0 -1px 0 rgb(0 0 0 / 25%);
  background-color: #02394A;
  border-color: #02394A #02394A #218388;}
.btn-tertiary:hover, .btn-tertiary:focus, .btn-tertiary:active, .btn-tertiary.active, .open .dropdown-toggle.btn-tertiary, a.btn-tertiary:hover, a.btn-tertiary:focus, a.btn-tertiary:active {
	border-color: #012632 #012632 #26969c;
  background-color: #29607A;
      color: #fff;
}
.btn-tertiary:focus, a.btn-tertiary:focus {
    color: #fff;
    background-color: #4F7A92;
    border-color: #0a58ca;
    box-shadow: 0 0 0 0.25rem rgb(49 132 253 / 50%);
}


.btn-success, a.btn-success {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}
.btn-success:hover, .btn-success:active, a.btn-success:hover, a.btn-success:active {
    color: #fff;
    background-color: #157347;
    border-color: #146c43;
}
.btn-success:focus, a.btn-success:focus {
    color: #fff;
    background-color: #157347;
    border-color: #146c43;
    box-shadow: 0 0 0 0.25rem rgb(60 153 110 / 50%);
}
.btn-danger, a.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.btn-danger:hover, .btn-danger:active, a.btn-danger:hover, a.btn-danger:active  {
    color: #fff;
    background-color: #bb2d3b;
    border-color: #b02a37;
}
.btn-danger:focus, a.btn-danger:focus {
    color: #fff;
    background-color: #bb2d3b;
    border-color: #b02a37;
    box-shadow: 0 0 0 0.25rem rgb(225 83 97 / 50%);
}
.btn-warning, a.btn-warning {
    color: #000;
    background-color: #ffc107;
    border-color: #ffc107;
}
.btn-warning:hover, .btn-warning:active, a.btn-warning:hover, a.btn-warning:active {
    color: #000;
    background-color: #ffca2c;
    border-color: #ffc720;
}
.btn-warning:focus, a.btn-warning:focus {
    color: #000;
    background-color: #ffca2c;
    border-color: #ffc720;
    box-shadow: 0 0 0 0.25rem rgb(217 164 6 / 50%);
}
.btn-info, a.btn-info {
    color: #000;
    background-color: #0dcaf0;
    border-color: #0dcaf0;
}
.btn-info:hover, .btn-info:active, a.btn-info:hover, a.btn-info:active  {
    color: #000;
    background-color: #31d2f2;
    border-color: #25cff2;
}
.btn-info:focus, a.btn-info:focus  {
    color: #000;
    background-color: #31d2f2;
    border-color: #25cff2;
    box-shadow: 0 0 0 0.25rem rgb(11 172 204 / 50%);
}

.btn-synappx, .btn-synappx:visited, a.btn-synappx:link {
  color: #ffffff;
  background-color: #187C88;
  border-color: #187B88;
}
.btn-synappx:hover, a.btn-synappx:hover,
.btn-synappx:focus,
.btn-synappx:active,
.btn-synappx.active,
.open .dropdown-toggle.btn-synappx {
  color: #ffffff;
  background-color: #06444c;
  border-color: #026B7A;
}
.btn-synappx:active,
.btn-synappx.active,
.open .dropdown-toggle.btn-synappx {
  background-image: none;
}
.btn-synappx.disabled,
.btn-synappx[disabled],
fieldset[disabled] .btn-synappx,
.btn-synappx.disabled:hover,
.btn-synappx[disabled]:hover,
fieldset[disabled] .btn-synappx:hover,
.btn-synappx.disabled:focus,
.btn-synappx[disabled]:focus,
fieldset[disabled] .btn-synappx:focus,
.btn-synappx.disabled:active,
.btn-synappx[disabled]:active,
fieldset[disabled] .btn-synappx:active,
.btn-synappx.disabled.active,
.btn-synappx[disabled].active,
fieldset[disabled] .btn-synappx.active {
  background-color: #f4bdae;
  border-color: #158290;
}
.btn-synappx .badge {
  color: #187C88;
  background-color: #fff;
}
/*===PAGINATION===*/
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover  {
	background-color: #3573A9;
    border-color: #3573A9;
}
.pagination>li>a:focus, .pagination>li>span:focus {outline-offset: -5px;
    outline: 3px solid black;}
.pagination > .active > a:focus, .pagination > .active > span:focus { outline-color: #ffffff;}

.form-control:focus {border-color: #004982;}



.paneOutline {
  border: 1px dotted #cccccc;
}
summary {display: list-item!important; margin-bottom: 15px;}
summary * {display: inline;}

/*Blockquote style override*/
blockquote footer::before {content: "";}



/*==========ADA linked footnotes==============*/
/**
 * Initialiazing a `footnotes` counter on the wrapper
 */
article {
  counter-reset: footnotes;
}

/**
 * Inline footnotes references
 * 1. Increment the counter at each new reference
 * 2. Reset link styles to make it appear like regular text
 */
a[aria-describedby="footnote-label"] {
  counter-increment: footnotes; /* 1 */
  text-decoration: none; /* 2 */
  color: inherit; /* 2 */
  cursor: default; /* 2 */
  outline: none; /* 2 */
}
.eds_news_Ozone-Sharp.eds_subCollection_news a[aria-describedby="footnote-label"] { color: inherit;}

/**
 * Actual numbered references
 * 1. Display the current state of the counter (e.g. `[1]`)
 * 2. Align text as superscript
 * 3. Make the number smaller (since it's superscript)
 * 4. Slightly offset the number from the text
 * 5. Reset link styles on the number to show it's usable
 */
a[aria-describedby="footnote-label"]::after {
  content: '[' counter(footnotes) ']'; /* 1 */
  vertical-align: super; /* 2 */
  font-size: 0.5em; /* 3 */
  margin-left: 2px; /* 4 */
  color: blue; /* 5 */
  text-decoration: underline; /* 5 */
  cursor: pointer; /* 5 */
}

/**
 * Resetting the default focused styles on the number
 */
a[aria-describedby="footnote-label"]:focus::after {
  outline: thin dotted;
  outline-offset: 2px;
}
footer :target {
  outline: #c81704 dashed 1px;
}
[aria-label="Back to content"] {
  font-size: 0.8em;
}

/*==========END FOOT NOTES==================*/
#hero
{
 /*  background: url(/portals/1/images/default-blue.jpg) center no-repeat;
  background-size: cover;
  min-height: 350px;*/
    background: url(/portals/1/images/Red-Background.png) center no-repeat;
    background-size: contain;
    background-position: right;
    min-height: 350px;
    background-color: #cf112d;
}

#hero.inner, #hero.product-detail
{
/*  min-height: 250px;*/
	 min-height: auto;
}
/* X3 Form checkbox bootstrap responsive fix */
#X3_FormBuilder .radio input[type=radio], #X3_FormBuilder .radio-inline input[type=radio], #X3_FormBuilder .checkbox input[type=checkbox], #X3_FormBuilder .checkbox-inline input[type=checkbox] {
	margin-left: 0px;
}

#wp-cybersecurity {background-image: url(/Portals/1/sbs-forms/images/doc-Cybersecurity-WhitePaper.png);}
#wp-IDC {background-image: url(/Portals/1/sbs-forms/images/doc-IDC-WhitePaper.png);}
#wp-active-learning-displays { background-image: url(/Portals/0/forms/images/doc-Active-Learning-with-Interactive-Displays.png); }
#wp-thermal-scanners { background-image: url(/portals/0/downloads/WhitePapers/images/doc-Guide-to-Thermal-Scanners.png); }
#wp-IoT-device-security { background-image: url(/portals/0/downloads/WhitePapers/images/doc-IoT-Device-Security.png); }

#cares-act-guide { background-image: url(/Portals/0/downloads/Flyers/images/doc-CARES-Act-Funding.png);}

.doc-thumb {
	width: 200px;
	border: 1px solid #DDDDDD;
	height: 150px;
	margin-top: 15px;
	margin-bottom: 15px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
}
.doc-thumb a { display: block; width: inherit; height: inherit;}

#skywell-big-advantages-infographic { background-image: url(/Portals/0/forms/images/doc-Skywell-Big-Advantages-Infographic.png); }
#skywell-better-option-infographic { background-image: url(/Portals/0/forms/images/doc-Skywell-Better-Option-Infographic.png); }
#skywell-water-thin-air-infographic { background-image: url(/Portals/0/forms/images/doc-Skywell-Water_From-Thin-Air-Infographic.png); }
#signage-in-school-infographic { background-image: url(/Portals/0/forms/images/doc-Where-to-Find-Digital-Signage-in-a-School-District_Infographic.png);}

#vid-skywell-lifestyle { background-image: url(/Portals/0/forms/images/Skywell_Lifestyle_thumb.jpg); }

#simply-smarter-healthcare-infographic { background-image: url(/Portals/0/downloads/Flyers/images/doc-simply-smarter-healthcare.png);}

#laptop-essentials-infographic {
  background-image: url(/Portals/0/downloads/Infographics/images/doc-Top-5-Laptop-Essentials-for-High-School-Students.png);
}

div.vidyard-player-container {
    border: 1px solid #dddddd;
}


/* ==========BOOTSTRAP 4 CARD DECKS===========*/
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: 4px;
}
.card-header {
  padding: .75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, .03);
  border-bottom: 1px solid rgba(0, 0, 0, .125);
}
.card-body {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.25rem;
}
.card-footer {
  padding: .75rem 1.25rem;
  background-color: rgba(0, 0, 0, .03);
  border-top: 1px solid rgba(0, 0, 0, .125);
}
.card-title {
  margin-bottom: .75rem;
}
.card > a .card-title {color: inherit; }
.card > a .card-body .card-text {color: #000000;}
/* Card deck*/
.card-deck {
  display: flex;
  flex-direction: column;
}
.card-deck .card {
  margin-bottom: 15px;
}

.card-deck .card a:hover {
text-decoration: none;
}
.card > a:hover .card-title {text-decoration: underline; background-color: #ededed; border-top-left-radius: 4px; border-top-right-radius: 4px;}

/* Card image caps*/
.card-img-top {
  width: 100%; /* Required because we use flexbox and this inherently applies align-self: stretch*/
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
@media handheld, only screen and (min-width:768px) {
  .card-deck {
    flex-flow: row wrap;
    margin-right: -15px;
    margin-left: -15px;
  }
  .card-deck .card {
    display: flex;
    /*      Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored*/
    flex: 1 0 0%;
    flex-direction: column;
    margin-right: 15px;
    margin-bottom: 0; /* Override the default*/
    margin-left: 15px;
  }
}
/*------------------------------
#. SIMPLY SMARTER PAGE LAYOUT STYLES
Base styles consistent across all Simply Smarter pages ONLY!!! No unique styles that only exist on one page
------------------------------*/
/* #.# SIMPLY SMARTER UNIVERSAL COLORS & FONTS
------------------------------*/
#simply-smarter .bg-gray {
  background-color: #E8E8E8;
}
#simply-smarter h1, #simply-smarter h2, #simply-smarter h3, #simply-smarter h4 {
  margin: 0;
  line-height: 1.1em;
}
#simply-smarter p.lead {font-family: "Montserrat", arial, sans-serif;}
#simply-smarter section .text h2, #simply-smarter section .text h3, #simply-smarter section .text h4 {
  margin-bottom: 10px;
}
/* #.# SIMPLY SMARTER FLEX & SPACING
------------------------------*/
#simply-smarter section {
  padding: 30px 0;
}
#simply-smarter section .container .flex {
  flex-direction: column;
	text-align: center;
}
#simply-smarter section .container .flex .image img {border: 1px solid #cccccc;}
#simply-smarter section .container .flex .image img.no-border {border: none;}
@media handheld, only screen and (max-width:767px) {
  /*	force all div.iimage in section blocks to display first and add padding between div.image and div.text*/
  #simply-smarter section .container .flex .image {
    order: 1;
    padding-bottom: 10px;
  }
  #simply-smarter section .container .flex .text {
    order: 2;
  }
}
@media handheld, only screen and (min-width:768px) {
  #simply-smarter section .container .flex {
    flex-direction: row;
    justify-content: space-between;
	  text-align: left;
  }
  #simply-smarter section .container .flex .text {
    width: 60%;
  }
	#simply-smarter section .container .flex > div:first-child { padding-right: 15px;}
}
#simply-smarter #hero a.btn, #simply-smarter section .text a.btn {
  margin-top: 1.1em;
}
/* #.# SIMPLY SMARTER HERO BANNER
------------------------------*/
#simply-smarter #hero {
  min-height: 190px;
  background-color: #cf112d;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
	text-align: center;
	background-image: none;
}
#simply-smarter #hero h1 {
  color: #ffffff;
  line-height: normal;
  font-size: 27px;
}
#simply-smarter #hero a.btn {
  margin-top: 1.1em;
}
@media handheld, only screen and (min-width:768px) {
  #simply-smarter #hero {
    background-image: url(/portals/0/images/globe.png), linear-gradient(270deg, rgba(112,3,9,1) 0%, rgba(206,17,43,1) 100%);
    background-repeat: no-repeat, no-repeat;
        background-position: 85% top, left;
/*    background-size: inherit, cover;*/
	  text-align: left;
  }
  #simply-smarter #hero h1 {
    width: 50%;
  }
}
@media handheld, only screen and (min-width:992px) {
      #simply-smarter #hero h1 {
    width: 58%;
  }
}
@media handheld, only screen and (min-width:1142px) {
  #simply-smarter #hero {
        background-size: 45%, auto;
  }
}
@media handheld, only screen and (min-width:1600px) {
  #simply-smarter #hero {
    min-height: 300px;
      align-items: center;
  }
    #simply-smarter #hero h1 {font-size: 37px;  width: 67%;}
   
}
/* #.# SIMPLY SMARTER SUBHEADING
------------------------------*/
#simply-smarter #subheading h2 {
  font-weight: normal;
  font-size: 20px;
  line-height: 1.4em;
}
#simply-smarter #subheading .lead {
  margin-bottom: 0;
	text-align: center;
}
@media handheld, only screen and (min-width:768px) {
	#simply-smarter #subheading .lead {
	text-align: left;
}
}


.sbs-whitepapers {
margin-bottom: 10px;
}

@media handheld, only screen and (min-width:768px) {
.sbs-whitepapers {
margin-bottom: 45px;
}
}