/* This CSS file has been verified to work in React as of July 2021. 
 * I've labeled each customization to better find them at quick glance. 
 * Some features have multiple customizations.
 * 
 * When adding a new customizaton, please add the heading Customization #", the STRY, a description, and the test location
 * 
 * Thank you, have a great day! */

/* Customization 1 
* BL: Change iframe objects such as youtube and brightcove videos to have a default width of 70% of its boundary
* Test location: https://dev-docs-servicenow.zoominsoftware.io/bundle/tools-tests/page/infodevtools/tools-tests/dita-tags/topic/objects.html */
iframe[data*='youtube'] {
  width: 70% !important;
  margin-left: auto !important; /* Automatic margin from left */
  margin-right: auto !important; /* Automatic margin from right */
}
iframe[src*='brightcove'] {
  width: 70% !important;
  margin-left: auto !important; /* Automatic margin from left */
  margin-right: auto !important; /* Automatic margin from right */
}
object[data*='.mp4'] {
  width: 70% !important;
  margin-left: auto !important; /* Automatic margin from left */
  margin-right: auto !important; /* Automatic margin from right */
}

/* Customization 2 
* BL: a table with the class of 'nav-card' zooms in
* Test location: https://dev-docs-servicenow.zoominsoftware.io/bundle/tools-tests/page/infodevtools/tools-tests/innovation/topic/zooming-buttons.html */
.nav-card img {
  /* Removes zoomin's default zooming in on  images*/
  pointer-events: none !important;
}
.nav-card a {
  /* Makes whole tile a link*/
  display: inline-block !important;
}
.nav-card span > span.ph {
  /* If a key is within the ph, make it inline and not break lines*/
  display: inline !important;
  padding: 1px !important;
}
.nav-card span.ph {
  /* Makes whole tile a link*/
  text-align: center !important;
  display: block !important;
  padding: 10px !important;
  color: #455464 !important;
}
.nav-card p {
  text-align: center !important;
}
.nav-card .nav-card-title {
  /* Make only the first ph bold like a title*/
  font-weight: bold !important; /* STRY11705241: bold nav-card-title only */
}
.nav-card tbody tr td:hover {
  /* Scale/zoom the hover of a tile up 1.15x*/
  -ms-transform: scale(1.15) !important; /* IE 9 */
  -webkit-transform: scale(1.15) !important; /* Safari 3-8 */
  transform: scale(1.15) !important;
  background-color: white !important;
  box-shadow: 1px 1px 7px 1px grey !important;
}
.nav-card tbody tr td:empty {
  /*STRY11547910: Do not scale empty table cells*/
  -ms-transform: scale(0) !important; /* IE 9 */
  -webkit-transform: scale(0) !important; /* Safari 3-8 */
  transform: scale(0) !important;
}
.nav-card tbody td {
  /* Adds vertical border in the table */
  border: 1px solid rgb(213, 209, 209) !important;
}
.nav-card tbody tr:first-child td {
  /* Removes top border in the table */
  border-top: 0 !important;
}
.nav-card tbody tr td:first-child {
  /* Removes left border in the table */
  border-left: 0 !important;
}
.nav-card tbody tr:last-child td {
  /* Removes bottom border in the table */
  border-bottom: 0 !important;
}
.nav-card tbody tr td:last-child {
  /* Removes right border in the table */
  border-right: 0 !important;
}
.nav-card a:hover {
  /*When you hover over a tile, do not underline it */
  text-decoration: none !important;
}
.nav-card-bkg img {
  /* Removes zoomin's default zooming in on  images*/
  pointer-events: none !important; /* SH: STRY11810762: a table with background images and no padding  */
}
.nav-card-bkg a {
  /* Makes whole tile a link*/
  display: inline-block !important;
}
.nav-card-bkg span > span.ph {
  /* If a key is within the ph, make it inline and not break lines*/
  display: inline !important;
  padding: 1px !important;
}
.nav-card-bkg span.ph {
  /* Makes whole tile a link*/
  text-align: center !important;
  display: block !important;
  padding: 10px !important;
  color: #455464 !important;
}
.nav-card-bkg p {
  text-align: center !important;
}
.nav-card-bkg .nav-card-title {
  /* Make only the first ph bold like a title*/
  font-weight: bold !important;
}
.nav-card-bkg tbody tr td:hover {
  /* Scale/zoom the hover of a tile up 1.15x*/
  -ms-transform: scale(1.15) !important; /* IE 9 */
  -webkit-transform: scale(1.15) !important; /* Safari 3-8 */
  transform: scale(1.15) !important;
  background-color: white !important;
  box-shadow: 1px 1px 7px 1px grey !important;
}
.nav-card-bkg tbody tr td:empty {
  /*STRY11547910: Do not scale empty table cells*/
  -ms-transform: scale(0) !important; /* IE 9 */
  -webkit-transform: scale(0) !important; /* Safari 3-8 */
  transform: scale(0) !important;
}
.nav-card-bkg tbody td {
  /* Adds vertical border in the table */
  border: 0 !important;
}
.nav-card-bkg tbody tr:first-child td {
  /* Removes top border in the table */
  border-top: 0 !important;
}
.nav-card-bkg tbody tr td:first-child {
  /* Removes left border in the table */
  border-left: 0 !important;
}
.nav-card-bkg tbody tr:last-child td {
  /* Removes bottom border in the table */
  border-bottom: 0 !important;
}
.nav-card-bkg tbody tr td:last-child {
  /* Removes right border in the table */
  border-right: 0 !important;
}
.nav-card-bkg a:hover {
  /*When you hover over a tile, do not underline it */
  text-decoration: none !important;
}
.nav-card-bkg > tbody > tr > td,
.nav-card-bkg > tbody > tr > th,
.nav-card-bkg > tfoot > tr > td,
.nav-card-bkg > tfoot > tr > th,
.nav-card-bkg > thead > tr > td,
.nav-card-bkg > thead > tr > th {
  padding: 0 !important;
  margin: 0 !important;
}

.bold {
      font-weight: bold;
}

.italic {
      font-style: italic;
}

/* Customization 3
 * BL: landing pages
 * Test Location: https://dev-docs-servicenow.zoominsoftware.io/bundle/waqanda-release-notes/page/release-notes/family-release-notes.html
*/
/*Main pane*/
.col-lg-7 {
  flex: 0 0 100% !important;
  max-width: 75% !important;
}
/*.section__head .container-fluid {
    max-width:93% !important;
}*/

/*right column*/
.col-lg-5 {
  flex: 0 0 25% !important;
  max-width: 25% !important;
  right: 5px;
}

/* Customization 4
 * SH: STRY11691066 legal disclaimers 
 * Test Location:  https://dev-docs-servicenow.zoominsoftware.io/bundle/tools-tests/page/infodevtools/tools-tests/innovation/topic/legal-disclaimer.html*/
.legal-disclaimer .title {
  font-size: 15px !important;
}
.legal-disclaimer p,
.legal-disclaimer ol,
.legal-disclaimer ul,
.legal-disclaimer dl {
  font-size: 12px !important;
}

/* Customization 5
 * BL: STRY11178334: adding borders to images when fig frame=all
 * Test location: https://dev-docs-servicenow.zoominsoftware.io/bundle/tools-tests/page/infodevtools/tools-tests/dita-tags/topic/fig-tag.html*/
.fig.figborder {
  border: 2px solid #c0c2c4 !important;
}

/*Customization 6
 * BL: STRY11560420: make images able to be centered
 * Test location: https://dev-docs-servicenow.zoominsoftware.io/bundle/tools-tests/page/infodevtools/tools-tests/dita-tags/topic/fig-tag.html */
img.align-center {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/*Customization 7
 * BL: STRY11397671: Hide borders for table with frame set to none
 * Test location: https://dev-docs-servicenow.zoominsoftware.io/bundle/tools-tests/page/infodevtools/tools-tests/dita-tags/topic/fig-tag.html */
.frame-none .entry.colsep-0.rowsep-0 {
  border: 0px !important;
}

/* Customization 8
 * SH: STRY52144953: fix figure caption display (keys in title)
Test Location: https://dev-docs-servicenow.zoominsoftware.io/bundle/quebec-governance-risk-compliance/page/product/grc-common/reference/r_WhatIsGRC.html
 * >> the fig caption for the first image shouldn't read () applications but Governance, Risk, and Compliance (GRC) applications */
figcaption {
  display: block !important;
  text-align: left !important;
}
figcaption span {
  display: inline !important;
  text-align: left !important;
}
.fig--title-label {
  display: none !important;
}

/* Customization 9
 * BL: PCDS00001101: customize solutions tiles
Test Location: https://dev-docs-servicenow.zoominsoftware.io/bundle/tools-tests/page/infodevtools/tools-tests/innovation/topic/better-together-landing.html
 * file:/Users/beth.lemesany/git/internal/doc/source/infodevtools/tools-tests/innovation/topic/better-together-landing2.dita 
 * Spec doc located here: https://servicenow.sharepoint.com/:w:/r/sites/eo.productcontent/_layouts/15/Doc.aspx?sourcedoc=%7B0607913E-E9DB-4BD8-8F23-C5141D89217C%7D&file=Solutions%20specifications.docx&action=default&mobileredirect=true&DefaultItemOpen=1&web=1 
 * See section 4.1.1*/

.sol-wrapper {
  display: flex;
  flex-wrap: wrap;
  
}
.sol-wrapper > div {
    width: 378px;
    height: 263px;
    margin: 16px 1px 1px 20px;
    padding: 20px;
    background-color: white;
    border: 1px solid #b9b9bb;
    position:relative;
    
}
.sol-icon > img {
    height: 54px!important;
    width: 54px;
    padding-bottom:10px;
    pointer-events: none !important;
    list-style: none !important;
}
.sol-title {
    padding-right:25px;
}
.sol-title a {
    font-family: Gilroy, sans-serif;
    font-weight: 800;
    font-size: 21px;
    line-height: 21px;
   }

ul.sol-product {
    list-style-type: none;
    padding-left: 0!important;
}
li.sol-product {
    list-style-type: none;
    margin-left: 0;
    padding-top: 0;
    margin-top: 0;
}
/*Customization 10
 * SH: STRY55480469: fix icon size*/
.icon {
    max-height: 20px !important;   
    width: auto; /* Preserve the image's aspect ratio */
}

/*/\* Customization 
 * BL: STRY53073803: customize better together flipcards
Test Location: https://dev-docs-servicenow.zoominsoftware.io/bundle/tools-tests/page/infodevtools/tools-tests/innovation/topic/better-together-landing.html *\/
.flip-card {
  background-color: transparent;
  height: 272px;
  width: 304px;
  perspective: 1000px; /\* Remove this if you don't want the 3D effect *\/
  display: inline-block;
}

/\* This container is needed to position the front and back side *\/
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/\* Do a horizontal flip when you move the mouse over the flip box container *\/
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/\* Position the front and back side *\/
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /\* Safari *\/
  backface-visibility: hidden;
}
div.flip-card-front {
  /\* Background-image is set dynamically by Javascript *\/
}
/\* Style the front side (fallback if image is missing) *\/
.flip-card-front {
  padding: 18px;
  background-color: rgba(41, 62, 64, 0.09);
  -webkit-backface-visibility: hidden; /\* Safari *\/
  backface-visibility: hidden;
}

.flip-card-topic-title {
  font-family: Gilroy, sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 21px;
  color: #293e40;
}

.flip-card-front li {
  font-family: Gilroy, sans-serif;
  font-size: 13.7px;
  font-weight: 700;
  display: inline-block;
  margin-left: -29px;
  pointer-events: none;
  -webkit-backface-visibility: hidden; /\* Safari *\/
  backface-visibility: hidden;
}

.flip-card-front a {
  color: black !important;
}

.flip-card-front img {
  width: 32px;
  height: 42px;
}
/\* Style the back side *\/
.flip-card-back {
  background-color: rgba(41, 62, 64, 0.09);
  padding: 10px;
  transform: rotateY(180deg);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #293e40;
}*/






/* Deprecated Customization 
* BL: links with the "nav-buttons" outputclass appear as buttons, like our front page.
* Test location: https://dev-docs-servicenow.zoominsoftware.io/bundle/tools-tests/page/infodevtools/tools-tests/innovation/topic/css-buttons.html
* DOESNT WORK 6/22/21. Opened PCDS00000586 
* FIXED 6/28/21, but We don't have this anywhere in our content. I'm throwing this to the garbage pile
.nav-buttons > li {
    font-size: 16px !important;
    width: 220px !important;
    margin: 5px !important;
    background-color: #B8E0D7 !important;
    display: inline-block !important;

}
.nav-buttons > li > a {
    color:#354142 !important;  
    display: block !important;
    padding: 21px !important;
}

.nav-buttons > li:hover {
    background-color: #ddede9 !important;
    transition: all .3s ease-in !important;
}


.nav-buttons > li >a:hover {
    color:#354142 !important;
    text-decoration: none !important;
    
}

ul.ul.nav-buttons {
    padding-left:0px !important;
}
*/