/*******************
# utility-ui.css

### Some utility classes and overrides based on the pattern library   [ https://www.figma.com/file/B1lbFu70mjeN2vNRQD9jpa/Farnell-Pattern-Library?node-id=0%3A1 ]

.mkt / #article selectors are used to properly override existing styles. 
Designed to work in conjunction with existing bootstrap styles

******************/


/*******************
 Colors
******************/

:root {
  --col-white: #FFFFFF;
  --col-grey-5  : #F8FAFC;
  --col-grey-10 : #F2F4F8;
  --col-grey-20 : #DDE1E6;
  --col-grey-30 : #C1C7CD;
  --col-grey-40 : #A2A9B0;
  --col-grey-50 : #878D96;
  --col-grey-60 : #697077;
  --col-grey-70 : #4D5358;
  --col-grey-80 : #343A3F;
  --col-grey-90 : #21272A;
  --col-grey-100: #121619;

  --col-green-10 : #E8F6EC;
  --col-green-20 : #A7F0BA;
  --col-green-30 : #6FDC8C;
  --col-green-40 : #42BE65;
  --col-green-50 : #24A148;
  --col-green-60 : #198038;
  --col-green-70 : #0E6027;
  --col-green-80 : #044317;
  --col-green-90 : #022D0D;
  --col-green-100: #071908;

  --col-blue-10 : #E5F6FF;
  --col-blue-20 : #BAE6FF;
  --col-blue-30 : #82CFFF;
  --col-blue-40 : #33B1FF;
  --col-blue-50 : #1192E8;
  --col-blue-60 : #0072C3;
  --col-blue-70 : #00539A;
  --col-blue-80 : #003A6D;
  --col-blue-90 : #012749;
  --col-blue-100: #061727;

  --col-red-10 : #FFF1F1;
  --col-red-20 : #FFD7D9;
  --col-red-30 : #FFB3B8;
  --col-red-40 : #FF8389;
  --col-red-50 : #FA4D56;
  --col-red-60 : #DA1E28;
  --col-red-70 : #A2191F;
  --col-red-80 : #750E13;
  --col-red-90 : #520408;
  --col-red-100: #2D0709;
}


.mkt .bg-white {
  background: #FFFFFF;
}

.mkt .bg-grey-5 {
  background: #F8FAFC;
}

.mkt .bg-grey-10 {
  background: #F2F4F8;
}

.mkt .bg-grey-20 {
  background: #DDE1E6;
}

.mkt .bg-grey-30 {
  background: #C1C7CD;
}

.mkt .bg-grey-40 {
  background: #A2A9B0;
}

.mkt .bg-grey-50 {
  background: #878D96;
}

.mkt .bg-grey-60 {
  background: #697077;
}

.mkt .bg-grey-70 {
  background: #4D5358;
}

.mkt .bg-grey-80 {
  background: #343A3F;
}

.mkt .bg-grey-90 {
  background: #21272A;
}

.mkt .bg-blue-10 {
  background: #E5F6FF;
}

.mkt .bg-blue-20 {
  background: #BAE6FF;
}

.mkt .bg-blue-30 {
  background: #82CFFF;
}

.mkt .bg-blue-40 {
  background: #33B1FF;
}

.mkt .bg-blue-50 {
  background: #1192E8;
}

.mkt .bg-blue-60 {
  background: #0072C3;
}

.mkt .bg-blue-70 {
  background: #00539A;
}

.mkt .bg-blue-80 {
  background: #003A6D;
}

.mkt .bg-blue-90 {
  background: #012749;
}

.mkt .bg-green-10 {
  background: #E8F6EC;
}

.mkt .bg-green-20 {
  background: #A7F0BA;
}

.mkt .bg-green-30 {
  background: #6FDC8C;
}

.mkt .bg-green-40 {
  background: #42BE65;
}

.mkt .bg-green-50 {
  background: #24A148;
}

.mkt .bg-green-60 {
  background: #198038;
}

.mkt .bg-green-70 {
  background: #0E6027;
}

.mkt .bg-green-80 {
  background: #044317;
}

.mkt .bg-green-90 {
  background: #022D0D;
}

.mkt .bg-red-10 {
  background: #FFF1F1;
}

.mkt .bg-red-20 {
  background: #FFD7D9;
}

.mkt .bg-red-30 {
  background: #FFB3B8;
}

.mkt .bg-red-40 {
  background: #FF8389;
}

.mkt .bg-red-50 {
  background: #FA4D56;
}

.mkt .bg-red-60 {
  background: #DA1E28;
}

.mkt .bg-red-70 {
  background: #A2191F;
}

.mkt .bg-red-80 {
  background: #750E13;
}

.mkt .bg-red-90 {
  background: #520408;
}

.mkt .text-white {
  color: #FFFFFF;
}

.mkt .text-grey-5 {
  color: #F8FAFC;
}

.mkt .text-grey-10 {
  color: #F2F4F8;
}

.mkt .text-grey-20 {
  color: #DDE1E6;
}

.mkt .text-grey-30 {
  color: #C1C7CD;
}

.mkt .text-grey-40 {
  color: #A2A9B0;
}

.mkt .text-grey-50 {
  color: #878D96;
}

.mkt .text-grey-60 {
  color: #697077;
}

.mkt .text-grey-70 {
  color: #4D5358;
}

.mkt .text-grey-80 {
  color: #343A3F;
}

.mkt .text-grey-90 {
  color: #21272A;
}

.mkt .text-blue-10 {
  color: #E5F6FF;
}

.mkt .text-blue-20 {
  color: #BAE6FF;
}

.mkt .text-blue-30 {
  color: #82CFFF;
}

.mkt .text-blue-40 {
  color: #33B1FF;
}

.mkt .text-blue-50 {
  color: #1192E8;
}

.mkt .text-blue-60 {
  color: #0072C3;
}

.mkt .text-blue-70 {
  color: #00539A;
}

.mkt .text-blue-80 {
  color: #003A6D;
}

.mkt .text-blue-90 {
  color: #012749;
}

.mkt .text-green-10 {
  color: #E8F6EC;
}

.mkt .text-green-20 {
  color: #A7F0BA;
}

.mkt .text-green-30 {
  color: #6FDC8C;
}

.mkt .text-green-40 {
  color: #42BE65;
}

.mkt .text-green-50 {
  color: #24A148;
}

.mkt .text-green-60 {
  color: #198038;
}

.mkt .text-green-70 {
  color: #0E6027;
}

.mkt .text-green-80 {
  color: #044317;
}

.mkt .text-green-90 {
  color: #022D0D;
}

.mkt .text-red-10 {
  color: #FFF1F1;
}

.mkt .text-red-20 {
  color: #FFD7D9;
}

.mkt .text-red-30 {
  color: #FFB3B8;
}

.mkt .text-red-40 {
  color: #FF8389;
}

.mkt .text-red-50 {
  color: #FA4D56;
}

.mkt .text-red-60 {
  color: #DA1E28;
}

.mkt .text-red-70 {
  color: #A2191F;
}

.mkt .text-red-80 {
  color: #750E13;
}

.mkt .text-red-90 {
  color: #520408;
}

/*******************
 Text and links
******************/

.mkt h1,
.mkt h2,
.mkt h3,
.mkt h4,
.mkt h5,
.mkt h6,
.mkt .h1,
.mkt .h2,
.mkt .h3,
.mkt .h4,
.mkt .h5,
.mkt .h6 {
  color: default;
}

.mkt .link-no-underline {
  text-decoration: none;
}

body .mkt {
  color:#697077;
}

.mkt a {
  color: #0072C3;
  text-decoration: underline;
}

/* Buttons*/

#article .mkt .btn {
  box-sizing: border-box;
  text-decoration: none;
  transition: 0.3s ease-in-out all;
  font-size: 15px;
  margin: 10px 0;
  padding: 8px 18px;
  line-height: 20px;
  border-style: solid;
  border-width: 2px;
}

#article .mkt .btn.active, #article .mkt .btn:active {
  outline: 0;
  background-image: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

#article .mkt .btn-primary {
  /*font-size: 13px !important;*/
  background-color: #0072C3;
  border-color: #0072C3;
  color: #fff;
  text-decoration: none;
  white-space: normal;
}

#article .mkt .btn-primary:hover {
  color: #fff;
  background-color: #003A6D;
  border-color: #003A6D;

}

#article .mkt .btn-primary:active {
  color: #fff;
  background: #33B1FF;
  border-color: #33B1FF;
}

#article .mkt .btn-primary:focus {
  color: #fff;
  background: #0072C3;
  border: 2px solid #82CFFF; 
  border-radius: 5px;
}

#article .mkt .btn-primary:active:focus {
  background: #003A6D;
}

#article .mkt .btn-secondary {
  background: #FFFFFF;
  border: 2px solid #0072C3;
  color: #0072C3;
  box-sizing: border-box;
  border-radius: 5px;
}

#article .mkt .btn-secondary-block {
  background: #FFFFFF;
  border: 2px solid #0072C3;
  color: #0072C3;
  box-sizing: border-box;
  border-radius: 5px;
  width: 100%;
}

#article .mkt .btn-secondary:hover,
#article .mkt .btn-secondary-block:hover {
  border-color: #003A6D;
  color: #003A6D;
  background-color: #FFFFFF;
}

#article .mkt .btn-ghost,
#article .mkt .btn-ghost:hover {
  background-color: transparent;
  color: #fff;
  border: 2px solid #fff;
}
#article .mkt .btn-group-lg > .btn, #article .mkt .btn-lg {
  padding: 10px 15px;
  font-size: 15px !important;
  line-height: 1.3333333;
  border-radius: 5px;
}

#article .mkt .btn-primary.active.focus, #article .mkt .btn-primary.active:focus, #article .mkt .btn-primary.active:hover, #article .mkt .btn-primary:active.focus, #article .mkt .btn-primary:active:focus, #article .mkt .btn-primary:active:hover, .open > #article .mkt .btn-primary.dropdown-toggle.focus, .open > #article .mkt .btn-primary.dropdown-toggle:focus, .open > #article .mkt .btn-primary.dropdown-toggle:hover {
  color: #fff;
  background: #0072C3;
  border-radius: 5px;
}

#article .mkt .btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
  border-radius: 5px;
}



/*******************
 List
******************/
.mkt .list-green-60 {
  list-style: #198038;
}

.mkt .list-none {
  list-style: none;
}

.mkt .list-green-60::before {
  content: "–";
  color: #42BE65;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  font-size: 1.2rem;
}

.mkt .ul-list-none {
  list-style: none;
}

.mkt li.tick {
  background: url(/wcsstore/ExtendedSitesCatalogAssetStore/cms/asset/images/common/uxui/icon-tick.svg) no-repeat left top;
  padding: 2px 0px 6px 28px;
  list-style: none;
  margin: 8px 0 0 -12px;
}




/*******************
 Borders
******************/

.mkt .border-style-solid {border-style: solid;}
.mkt .border-style-dotted {border-style: dotted;}

.mkt .border-width-1 {border-width: 1px;}
.mkt .border-width-2 {border-width: 2px;}
.mkt .border-width-3 {border-width: 3px;}


.mkt .border-1-grey-5 {
  border: solid 1px #F8FAFC;
}

.mkt .border-1-grey-10 {
  border: solid 1px #F2F4F8;
}

.mkt .border-1-grey-20 {
  border: solid 1px #DDE1E6;
}

.mkt .border-1-grey-30 {
  border: solid 1px #C1C7CD;
}

.mkt .border-1-grey-40 {
  border: solid 1px #A2A9B0;
}

.mkt .border-1-grey-50 {
  border: solid 1px #878D96;
}

.mkt .border-1-grey-60 {
  border: solid 1px #697077;
}

.mkt .border-1-grey-70 {
  border: solid 1px #4D5358;
}

.mkt .border-1-grey-80 {
  border: solid 1px #343A3F;
}

.mkt .border-1-grey-90 {
  border: solid 1px #21272A;
}

.mkt .border-1-blue-10 {
  border: solid 1px #E5F6FF;
}

.mkt .border-1-blue-20 {
  border: solid 1px #BAE6FF;
}

.mkt .border-1-blue-30 {
  border: solid 1px #82CFFF;
}

.mkt .border-1-blue-40 {
  border: solid 1px #33B1FF;
}

.mkt .border-1-blue-50 {
  border: solid 1px #1192E8;
}

.mkt .border-1-blue-60 {
  border: solid 1px #0072C3;
}

.mkt .border-1-blue-70 {
  border: solid 1px #00539A;
}

.mkt .border-1-blue-80 {
  border: solid 1px #003A6D;
}

.mkt .border-1-blue-90 {
  border: solid 1px #012749;
}

.mkt .border-1-green-10 {
  border: solid 1px #E8F6EC;
}

.mkt .border-1-green-20 {
  border: solid 1px #A7F0BA;
}

.mkt .border-1-green-30 {
  border: solid 1px #6FDC8C;
}

.mkt .border-1-green-40 {
  border: solid 1px #42BE65;
}

.mkt .border-1-green-50 {
  border: solid 1px #24A148;
}

.mkt .border-1-green-60 {
  border: solid 1px #198038;
}

.mkt .border-1-green-70 {
  border: solid 1px #0E6027;
}

.mkt .border-1-green-80 {
  border: solid 1px #044317;
}

.mkt .border-1-green-90 {
  border: solid 1px #022D0D;
}

.mkt .border-1-red-10 {
  border: solid 1px #FFF1F1;
}

.mkt .border-1-red-20 {
  border: solid 1px #FFD7D9;
}

.mkt .border-1-red-30 {
  border: solid 1px #FFB3B8;
}

.mkt .border-1-red-40 {
  border: solid 1px #FF8389;
}

.mkt .border-1-red-50 {
  border: solid 1px #FA4D56;
}

.mkt .border-1-red-60 {
  border: solid 1px #DA1E28;
}

.mkt .border-1-red-70 {
  border: solid 1px #A2191F;
}

.mkt .border-1-red-80 {
  border: solid 1px #750E13;
}

.mkt .border-1-red-90 {
  border: solid 1px #520408;
}

.mkt .border-2-grey-5 {
  border: solid 2px #F8FAFC;
}

.mkt .border-2-grey-10 {
  border: solid 2px #F2F4F8;
}

.mkt .border-2-grey-20 {
  border: solid 2px #DDE1E6;
}

.mkt .border-2-grey-30 {
  border: solid 2px #C1C7CD;
}

.mkt .border-2-grey-40 {
  border: solid 2px #A2A9B0;
}

.mkt .border-2-grey-50 {
  border: solid 2px #878D96;
}

.mkt .border-2-grey-60 {
  border: solid 2px #697077;
}

.mkt .border-2-grey-70 {
  border: solid 2px #4D5358;
}

.mkt .border-2-grey-80 {
  border: solid 2px #343A3F;
}

.mkt .border-2-grey-90 {
  border: solid 2px #21272A;
}

.mkt .border-2-blue-10 {
  border: solid 2px #E5F6FF;
}

.mkt .border-2-blue-20 {
  border: solid 2px #BAE6FF;
}

.mkt .border-2-blue-30 {
  border: solid 2px #82CFFF;
}

.mkt .border-2-blue-40 {
  border: solid 2px #33B1FF;
}

.mkt .border-2-blue-50 {
  border: solid 2px #1192E8;
}

.mkt .border-2-blue-60 {
  border: solid 2px #0072C3;
}

.mkt .border-2-blue-70 {
  border: solid 2px #00539A;
}

.mkt .border-2-blue-80 {
  border: solid 2px #003A6D;
}

.mkt .border-2-blue-90 {
  border: solid 2px #012749;
}

.mkt .border-2-green-10 {
  border: solid 2px #E8F6EC;
}

.mkt .border-2-green-20 {
  border: solid 2px #A7F0BA;
}

.mkt .border-2-green-30 {
  border: solid 2px #6FDC8C;
}

.mkt .border-2-green-40 {
  border: solid 2px #42BE65;
}

.mkt .border-2-green-50 {
  border: solid 2px #24A148;
}

.mkt .border-2-green-60 {
  border: solid 2px #198038;
}

.mkt .border-2-green-70 {
  border: solid 2px #0E6027;
}

.mkt .border-2-green-80 {
  border: solid 2px #044317;
}

.mkt .border-2-green-90 {
  border: solid 2px #022D0D;
}

.mkt .border-2-red-10 {
  border: solid 2px #FFF1F1;
}

.mkt .border-2-red-20 {
  border: solid 2px #FFD7D9;
}

.mkt .border-2-red-30 {
  border: solid 2px #FFB3B8;
}

.mkt .border-2-red-40 {
  border: solid 2px #FF8389;
}

.mkt .border-2-red-50 {
  border: solid 2px #FA4D56;
}

.mkt .border-2-red-60 {
  border: solid 2px #DA1E28;
}

.mkt .border-2-red-70 {
  border: solid 2px #A2191F;
}

.mkt .border-2-red-80 {
  border: solid 2px #750E13;
}

.mkt .border-2-red-90 {
  border: solid 2px #520408;
}

/*******************
 Border radius
******************/
.mkt .rounded-2 {
  border-radius: 2px;
}

.mkt .rounded-3 {
  border-radius: 3px;
}

.mkt .rounded-4 {
  border-radius: 4px;
}

.mkt .rounded-5 {
  border-radius: 5px;
}
/*******************
 Icons
******************/

.icon {
  width:24px;
  height: 24px;
}

.icon-tick {
  background:url(/wcsstore/ExtendedSitesCatalogAssetStore/cms/asset/images/common/uxui/icon-tick.svg)
}



/*******************
 Shadows
******************/
.mkt .shadow-s {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.mkt .shadow-l {
  box-shadow: 5px 12px 24px rgba(0, 0, 0, 0.2);
}

.mkt .shadow-xl {
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.2);
}

/*******************
 max-width
******************/
.mkt .max-width {
  max-width: 1980px;
  margin-left: auto;
  margin-right: auto;
  
}

@media only screen and (min-width: 1200px) {
  .mkt .search-container-inner {
    width: 980px;
    margin: auto;
  }
}
@media only screen and (min-width: 992px) {
  .mkt .show-answer .help-search-answer-content {
    max-width: 40vw;
  }
}
@media only screen and (max-width: 991px) {
  .mkt .faq-box {
    margin-bottom: 20px;
  }

}
@media only screen and (max-width: 768px) {
  .mkt .show-answer .help-search-answer-content {
    max-width: 80vw;
  }
  .mkt .search-close {
    font-size: 12px;
    top: 36px;
    right: 12px;
  }
  .mkt .close-img {
    width: 16px;
    height: 16px;
  }
}
@media only screen and (max-width: 600px) {
  .mkt .help-container h2 {
    font-size: 16px;
  }
  .mkt .faq-container {z-index: auto;}
  .mkt .search-mag-icon {
    right: 10px;
    top: 32px;
  }
  .mkt .faq-box .question:before {
    margin: 0 5px 0 -34px;
    font-size: 15px;
    padding: 3px 5px;   
  }
  .mkt .faq-box .question,
  .mkt .faq-box .answer-inner *  {
    font-size: 1.3rem;
    line-height: 1.5rem;
  }

  .mkt .suggestions {
    margin: auto;
    padding: 0;
    position: relative;
    left: 0;
    position: relative;
    z-index: 4;
    margin-left: 0;
    top: 55px;
  }

  .mkt .show-answer .help-search-answer-content {
    max-width: 90vw;
  }

  .mkt .suggestions > div {
    width: 100%;
  }

  .mkt .results-total {
    padding: 8px 16px;
    font-size: 12px;
  }
}