/* Questions?
    5ivecanons.com
    raul@5ivecanons.com
*/


/* Styles Reset */
html {
    scroll-behavior: smooth;
  }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, table {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}
ol, ul {
    /* list-style: none; */
    margin-left: var(--mp-20);
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
*, *::before, *::after {
    box-sizing: border-box;
  }
* {
    margin: 0;
}
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
input, button, textarea, select {
    font: inherit;
}
a{
    text-decoration: none;
    line-height: 1.6;
}
button{
    border: none;
    outline: none;
    background-color: inherit;
    overflow: hidden;
}
/* Scroll bars */
::-webkit-scrollbar {
    width: 3px;
    height: 5px;
}
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px var(--white); 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: var(--grey-1); 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: var(--grey-2);
    padding:10px; 
    border-radius: 10px;
    background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 38%, rgba(145, 155, 167, 1) 38%, rgba(145, 155, 167, 1) 64%, rgba(255, 255, 255, 0) 64%);
    background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 38%, rgba(145, 155, 167, 1) 38%, rgba(145, 155, 167, 1) 64%, rgba(255, 255, 255, 0) 64%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 38%, rgba(145, 155, 167, 1) 38%, rgba(145, 155, 167, 1) 64%, rgba(255, 255, 255, 0) 64%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1);                                    
}


/* Variables */
:root {
    /* Colors */
    --blue:#3D70B2;
    --blue-dark:#2E5C99;
    --black:#000000;
    --white: #FFFFFF;
    --grey-1:#919BA7;
    --grey-2:#606770;
    --grey-3: #222222;
    --red: #E71414;
    --purple: #B960A4;
    --blue-1-50:#3D70B280;  /* opacity: .50 */
    --blue-1-30:#3D70B24D;  /* opacity: .30 */
    --blue-1-10:#3D70B21A;  /* opacity: .10 */
    --grey-1-50:#919BA780;  /* opacity: .50 */
    --grey-1-30:#919BA74D;  /* opacity: .30 */
    --grey-1-20:#919BA733;  /* opacity: .20 */
    --grey-1-10:#919BA71A;  /* opacity: .10 */
    --grey-2-50:#60677080;  /* opacity: .50 */
    --grey-2-30:#6067704D;  /* opacity: .30 */
    --grey-2-10:#6067701A;  /* opacity: .10 */
    --white-20: #FFFFFF33; /* opacity: .20 */
    /* Font Sizes */
    --fs-40: 40px;
    --fs-36: 36px;
    --fs-30: 30px;
    --fs-28: 28px;
    --fs-24: 24px;
    --fs-22: 22px;
    --fs-20: 20px;
    --fs-18: 18px;
    --fs-16: 16px;
    --fs-14: 14px;
    --fs-12: 12px;
    --fs-10: 10px;
    /* Margin and Padding */
    --mp-5: 5px;
    --mp-10: 10px;
    --mp-14: 14px;
    --mp-15: 15px;
    --mp-20: 20px;
    --mp-25: 25px;
    --mp-30: 30px;
    --mp-40: 40px;
    --mp-50: 50px;
    --mp-60: 60px;
    --mp-70: 70px;
    --mp-80: 80px;
    /* Transition Time */
    --tt: 0.5s;
    --tt-2: 0.2s;
    /* Border Radius */
    --br-5: 5px;
    --br-10: 10px;
    --br-15: 15px;
    --br-20: 20px;
    /* Shadow */
    --shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.05);                                    
    /* Container */
    --cw: 1420px;
    --cw-r: 860px;
}

/* Custom Styles */
p, h1, h2, h3, h4, h5, h6, a, ol, ul, li, input, table{
    overflow-wrap: break-word;
    /*font-family: 'Gotham-Book','Times New Roman', Times, serif;*/
    font-style: normal;
    color: var(--black);
    font-family: 'Gotham-Book', system-ui;
    /*font-weight: 500;*/
}
input::placeholder{
    color: var(--grey-2);
    font: var(--fs-16) 'Gotham-Book','Times New Roman', Times, serif;
}
input:focus{
    outline: none !important;
}
h1{
    font-family: 'Gotham-Bold','Times New Roman', Times, serif;
    font-size: var(--fs-40);
    font-weight: 600;
}
h2{
    font-size: var(--fs-36);    
}
h3{
    font-size: var(--fs-30);
}
h4{
    font-size: var(--fs-28);
}
h5{
    font-size: var(--fs-22);
}
h6{
    font-size: var(--fs-20);
}
p, input{
    font-size: var(--fs-16);
}
a{
    font-size: var(--fs-18);
    transition: var(--tt);
    -moz-transition: var(--tt);
}
b{
    font-family: 'Gotham-Medium','Times New Roman', Times, serif;
}
/* Buttons */
.btn{
    display: block;
    border-radius: var(--br-5);
    padding: var(--mp-10) var(--mp-20);
    margin-top: var(--mp-5);
    margin-bottom: var(--mp-5);
    text-align: center;
    max-width: 250px;
    width: 100%;
    transition: var(--tt);
    -moz-transition: var(--tt);
}
.btn:hover{
    background-color: var(--black);
    color: var(--white);
}
/* Regular buttons */
.btn-1{
    font-family: 'Gotham-Bold','Times New Roman', Times, serif;
    background-color: var(--blue-dark);
    color: var(--white);
}
.btn-2{
    font-family: 'Gotham-Bold','Times New Roman', Times, serif;
    background-color: var(--blue);
    color: var(--white);
}
/* Disable button */
.btn-3, .btn-disabled{
    font-family: 'Gotham-Bold','Times New Roman', Times, serif;
    background-color: var(--blue-1-50);
    color: var(--white);
}
.btn-3:hover, .btn-disabled:hover{
    background-color: var(--blue-1-50);
    color: var(--white);
    cursor: not-allowed;
    pointer-events: all !important;
}
/* Cancel buttons */
.btn-4{
    background-color: var(--white);
    border: 2.5px solid var(--red);
    color: var(--red);
}
.btn-5{
    background-color: var(--white);
    border: 1px solid var(--red);
    color: var(--red);
}
.btn-4:hover, .btn-5:hover{
    background-color: var(--red);
    color: var(--white);
}
.btn-6{
    background-color: var(--white);
    border: 2.5px solid var(--black);
    color: var(--black);
}
.btn-7{
    background-color: var(--white);
    border: 1px solid var(--black);
    color: var(--black);
}


/* Link Hover */
.link-anchor{
    color: var(--black);
    padding: var(--mp-10) var(--mp-20);
    transition: var(--tt);
    -moz-transition: var(--tt);
    background-color: var(--white);
}
.link-anchor:hover{
    background-color: var(--grey-1-50);
    /*font-family: 'Gotham-Medium','Times New Roman', Times, serif; 
	background-color: #D3D3D3;*/
}
.link{
    color: var(--blue);
    display: -webkit-inline-flex;
    position: relative;
    transition: transform 0.25s ease-out;
    -moz-transition: transform 0.25s ease-out;
}
.link:hover{
    /* color: var(--black); */
}
.link::after {    
    content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
    border-radius: 50px;
	background-color: var(--blue);
	opacity: 0;
	transition: opacity 300ms, transform 300ms;
}
.link:hover::after,
.link:focus::after {
	opacity: 1;
	transform: translate3d(0, 0.2em, 0);
}
.link-icon{
    display: inline !important;
    width: fit-content !important;
}
.link-icon .circle{
    display:inline-block;
    align-items: center;
    vertical-align: middle;
    margin-right: var(--mp-10);
    margin-top: var(--mp-10);
    margin-bottom: var(--mp-10);
    background-color: var(--black);
    height: var(--mp-30);
    width: var(--mp-30);
    border-radius: 100%;
}
.link-icon:after {
    left: 42px;
    width: calc(100% - 42px);
}
/* Global Styles */
.bold{
    font-weight: bold;
}
.medium{
    font-weight: 500;
}
.light{
    font-weight: 300;
}
.uppercase{
    text-transform: uppercase;
}
.text-center{
    text-align: center !important;
}
.text-left{
    text-align: left !important;
}
.text-right{
    text-align: right !important;
}
.disclaimer{
    font-size: var(--fs-12) !important;
}
input{
    padding: 10px 20px;
    border-radius: 50px;
    border: var(--black) 1px solid;
    margin-bottom: 0;
}

.blue, .blue h1, .blue h2, .blue h3, .blue h4, .blue h5, .blue h6, .blue p, .blue a, .blue ul, .blue li{
    color: var(--blue) !important;
}
.black, .black h1, .black h2, .black h3, .black h4, .black h5, .black h6, .black p, .black a, .black ul, .black li{
    color: var(--black) !important;
}
.white, .white h1, .white h2, .white h3, .white h4, .white h5, .white h6, .white p, .white a, .white ul, .white li{
    color: var(--white) !important;
}
.grey-1, .grey-1 h1, .grey-1 h2, .grey-1 h3, .grey-1 h4, .grey-1 h5, .grey-1 h6, .grey-1 p, .grey-1 a, .grey-1 ul, .grey-1 li{
    color: var(--grey-1) !important;
}
.grey-2, .grey-2 h1, .grey-2 h2, .grey-2 h3, .grey-2 h4, .grey-2 h5, .grey-2 h6, .grey-2 p, .grey-2 a, .grey-2 ul, .grey-2 li{
    color: var(--grey-2) !important;
}
.red, .red h1, .red h2, .red h3, .red h4, .red h5, .red h6, .red p, .red a, .red ul, .red li{
    color: var(--red) !important;
}
.grey-1-30, .grey-1-30 h1, .grey-1-30 h2, .grey-1-30 h3, .grey-1-30 h4, .grey-1-30 h5, .grey-1-30 h6, .grey-1-30 p, .grey-1-30 a, .grey-1-30 ul, .grey-1-30 li{
    color: var(--grey-1-30) !important;
}
.grey-1-10, .grey-1-10 h1, .grey-1-10 h2, .grey-1-10 h3, .grey-1-10 h4, .grey-1-10 h5, .grey-1-10 h6, .grey-1-10 p, .grey-1-10 a, .grey-1-10 ul, .grey-1-10 li{
    color: var(--grey-1-10) !important;
}
.blue-background{
    background-color: var(--blue) !important;
}
.black-background{
    background-color: var(--black) !important;
}
.white-background{
    background-color: var(--white) !important;
}
.grey-1-background{
    background-color: var(--grey-1) !important;
}
.grey-2-background{
    background-color: var(--grey-2) !important;
}
.red-background{
    background-color: var(--red) !important;
}
.grey-1-30-background{
    background-color: var(--grey-1-30) !important;
}
.grey-1-10-background{
    background-color: var(--grey-1-10) !important;
}

.m-auto{
    margin: 0 auto;
}
.mw-200{
    max-width: 200px;
}
.mw-150{
    max-width: 150px;
}
.mw-100{
    max-width: 100px;
}
.mw-50{
    max-width: 50px;
}
.mw-40{
    max-width: 40px;
}
.mw-30{
    max-width: 30px;
}
.mw-20{
    max-width: 20px;
}
.mw-10{
    max-width: 10px;
}
.w-100{
    width: 100%;
}
.w-90{
    width: 90%;
}
.w-80{
    width: 80%;
}
.w-70{
    width: 70%;
}
.w-60{
    width: 60%;
}
.w-50{
    width: 50%;
}
.w-40{
    width: 40%;
}
.w-30{
    width: 30%;
}
.w-20{
    width: 20%;
}
.w-10{
    width: 10%;
}

.mb-0{
    margin-bottom: 0px !important;
}
.mb-5{
    margin-bottom: 5px !important;
}
.mb-10{
    margin-bottom: 10px !important;
}
.mb-15{
    margin-bottom: 15px !important;
}
.mb-20{
    margin-bottom: 20px !important;
}
.mb-25{
    margin-bottom: 25px !important;
}
.mb-30{
    margin-bottom: 30px !important;
}

.mt-0{
    margin-top: 0px !important;
}
.mt-5{
    margin-top: 5px !important;
}
.mt-10{
    margin-top: 10px !important;
}
.mt-15{
    margin-top: 15px !important;
}
.mt-20{
    margin-top: 20px !important;
}
.mt-25{
    margin-top: 25px !important;
}
.mt-30{
    margin-top: 30px !important;
}
/* Navbar */
.navbar{
    background: var(--black);
    color: var(--white);
    overflow: hidden;
    width: 100%;
    z-index: 999;
}
.navbar a, .navbar-item{
   display: inline-block;
   align-self: center;
}
.navbar-item{
    font-family: 'Gotham-Medium',system-ui;
    color: var(--white);
    font-weight: 500/*transition: var(--tt);
    -moz-transition: var(--tt);*/
}
.navbar-divider{
    display: inline-block;
    border-right: var(--white) solid 2px;
    height: 25px;
    margin: 0 var(--mp-40);
    align-self: center;
 }
.logo{
    margin-top: -5px;
    width: 100px;
    /*transition: var(--tt);
    -moz-transition: var(--tt);*/
    position: relative;
    z-index: 5;
}
/* .logo:hover{
    -webkit-transform: scale(1.05); 
    transform: scale(1.05);
} */
.box-nav-1{
    display: flex;
    flex: 6;
    align-self: center;
    z-index: 9;
}
.box-nav-2{
    flex: 1;
}
  
.menu .menu-btn {
    margin-right: 10px;
    float: right;
}
.menu-btn{
    background: url('/resource/SupportSiteIcons/SupportSiteIcons/menu-white.svg');
    background-position: center;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    transition: var(--tt);
    -moz-transition: var(--tt);
}
.menu-btn-close{
    background: url('/resource/SupportSiteIcons/SupportSiteIcons/close-white.svg');
}

/* .menu-btn img{
    width: 30px;
}
.menu-btn-close img{
    content: url('/resource/SupportSiteIcons/SupportSiteIcons/close-white.svg');
} */
  
.menu-content {
    display: none;
     position: absolute; 
    /*position: fixed;*/
    background-color: var(--black);
    min-width: 290px;
    z-index:4 ;/*-1; 4*/
    margin-top: 32px;
    padding-top: 32px;
    margin-left: -90px;
    
}

.menu-content a {
    float: none;
    /* margin: var(--mp-10) 0; */
    padding: 20px 15px;
    display: block;
    text-align: right;
}
.menu-content p{
    color: var(--white);
    display: inline-block;
    position: relative;
    top: 2px;
}
.menu-content img{
    width: 40px;
    display: inline-block;
    vertical-align:middle;
    margin-left: var(--mp-10);
}
.menu-content a:hover {
    background-color: var(--white-20);
    
}
.menu-content a:hover>p{
    font-family: 'Gotham-Medium';
}
.show{
    display: block !important;
}
.hide{
    display: none !important;
}
.menu-btn:hover{
    cursor: pointer;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}
/* .menu:hover .menu-content {
    display: block;
} */


/* Scroll Button */
.scroll-up{
    background-color: var(--white);
    border: 0.5px solid var(--grey-1-50);
    border-radius: var(--br-5);
    padding: var(--mp-10) 7px;
    filter:drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.3));
}
.scroll-up:hover{
    background-color: var(--grey-2-50);
    cursor: pointer;
}
.scroll-up img{
    width: 15px;
}


/* Containers Styles */
.container{
    max-width: var(--cw);
    margin: 0 auto;
    padding: var(--mp-10) var(--mp-10);
}
.container-flex{
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;  
}
.container-wrap{
    flex-wrap:wrap;
}
.container-column{
    flex-direction:column;
}
.container-center{
    justify-content: center;
    -webkit-justify-content:center;
    -ms-justify-content:center;
}
.container-space-between{
    justify-content: space-between;
    -webkit-justify-content:space-between;
    -ms-justify-content:space-between;
}

/* Search Component */
#search-input {
    border-radius: var(--br-5);
}
.box-search-1{
    flex-basis: 50%;
}
.box-search-2{
    flex-basis: 50%;
}
.ghost{
    height:72px/*height: 122px;*/ 
}
.search-component{
    /*margin-top:43px;/*43px; 59px; 75px;*/
    box-shadow: var(--shadow);
    -webkit-box-shadow: var(--shadow);
    -moz-box-shadow: var(--shadow);
    position: absolute;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
    /*position: fixed;*/
    width: 100%;
    z-index: 3;
    background: var(--white);
}
.search-component h1{
    font-size: var(--fs-28);
    /*font-family: 'Gotham-Medium','Times New Roman', Times, serif;*/
    font-family: 'Gotham-Medium', system-ui;
	font-weight: 500;
}
.search-form, .search-form input, .search-form .btn, .search-form h1{
    display: inline-block;
}
.search-form input{
    width: 99%;
    max-width: 100%;
    margin-left: 0;
}
.search-btn{
    vertical-align: middle;
    position: relative;
    z-index: 1;
    margin-left: -50px;
    margin-top: -5px;
    background: url('/resource/SupportSiteIcons/SupportSiteIcons/search.svg');
    background-position: center;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    transition: var(--tt);
    -moz-transition: var(--tt);
}
.search-btn:hover, .search-btn-close:hover{
    cursor: pointer;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}
.search-btn-close{
    background: url('/resource/SupportSiteIcons/SupportSiteIcons/close.svg');
    transition: var(--tt);
    -moz-transition: var(--tt);
}
.search-form{
    float: right;
    width: 100%;
    max-width: 650px;

}

.search-form img{
    width: 25px;
    vertical-align: middle;
    filter: grayscale(100%) contrast(1000%);
}
.search-form img:hover {
    filter:grayscale(0%) contrast(100%);
    cursor: pointer;
}
.search-trending-now, .search-suggested {
    display: none;
    margin-top: -1px;
    position: absolute;
    background: var(--white);
    width: calc(100% - 5px);
    border: 1px solid var(--black);
    /*border-radius: var(--br-20);*/
    border-radius: var(--br-5);
    max-width: 644px;
    max-height: 340px;/*390px;*/
    overflow-y: scroll;
    overflow-x: hidden;
}
.search-component ::-webkit-scrollbar {
    width: 3px;

}
.search-component ::-webkit-scrollbar-track {
    /*box-shadow: inset 0 0 50px var(--white);*/
    border-radius: 5px;
    
}
.search-component ::-webkit-scrollbar-thumb {
    background: var(--black); 
    border-radius: 5px;
}
.search-component ::-webkit-scrollbar-thumb {
    /* background: var(--grey-2); */
    border-radius: 10px;
    background: rgb(96,103,112);
    /*background: -moz-linear-gradient(180deg, rgba(96,103,112,0) 10%, rgba(96,103,112,1) 10%, rgba(96,103,112,1) 90%, rgba(96,103,112,0) 90%);
    background: -webkit-linear-gradient(180deg, rgba(96,103,112,0) 10%, rgba(96,103,112,1) 10%, rgba(96,103,112,1) 90%, rgba(96,103,112,0) 90%);
    background: linear-gradient(180deg, rgba(96,103,112,0) 10%, rgba(96,103,112,1) 10%, rgba(96,103,112,1) 90%, rgba(96,103,112,0) 90%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#606770",endColorstr="#606770",GradientType=1);*/
}
.search-trending-now a, .search-trending-now p, .search-suggested a, .search-suggested p{
    display: block;
    padding: var(--mp-14) var(--mp-20);
    color: var(--blue);
    transition: var(--tt);
    -moz-transition: var(--tt);
    text-align: left;
    font-size: var(--fs-18);
}

.search-trending-now p, .search-suggested p{
    background: var(--grey-1-10);
    border-radius: 0px;
    /*border-radius: var(--br-20) var(--br-20) 0 0;*/
    color: var(--grey-2);
    font-family: 'Gotham-Medium','Times New Roman', Times, serif;
    
}
.search-trending-now a:hover, .search-suggested a:hover{
    /* background: var(--grey-1-30); */
    color: var(--blue);
    /* font-family: 'Gotham-Medium','Times New Roman', Times, serif; */
}
.search-trending-now a:last-child, .search-suggested a:last-child{
    border-radius: 0 0 var(--br-20) var(--br-20);
}

/* Hover Effect search bar  */
.search-form .link{
    display: block;
    width: fit-content;
}
.search-form .link::after{
    bottom: 12px !important;
    left: 20px !important;
    width: calc(100% - 40px) !important;
    transform: translate3d(0, 0.2em, 0);
}

#no-suggested-results{
    display: none;
}


/* Notification Component */
.notification-component{
    background: var(--purple);
	position: relative;
    z-index: 2;
}
.notification-component *{
    color: var(--white);
    font-family: 'Gotham-Medium','Times New Roman', Times, serif;
}
.notification-component .link::after{
    background-color: var(--white);
}

.notification-component p, .notification-component a{ 
    font-size: var(--fs-18);
}

/* Components Styles */
.component{
    margin: var(--mp-30) auto var(--mp-80);
}
.title{
    text-align: center;
    margin-bottom: var(--mp-30);
}
.title h2{
    color: var(--black) !important;
}

.flex-1{
    flex:1;
}
.box-center{
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
}

.box-product{
    background: var(--grey-1-10);
    transition: var(--tt);
    -moz-transition: var(--tt);
    border-radius: var(--br-10);
    padding: var(--mp-20);
    text-align: center;
    margin: 10px;
   flex-basis: 49.5%;
}
.box-product:hover{
    background: var(--grey-1-30);
    cursor: pointer;
}
.box-product img{
    max-width: 150px;
    height: 60px;margin: 0 auto var(--mp-20);
}
.box-product h3{
    font-family: 'Gotham-Medium','Times New Roman', Times, serif;
}
.box-services{
    margin: var(--mp-10) var(--mp-10) var(--mp-30);
    text-align: center;
}
.box-services .link {
    font-family: 'Gotham-Medium', 'Times New Roman', Times, serif;
}
.box-services img{
    max-width: 60px;
    margin: 0 auto var(--mp-15);
    filter: grayscale(100%) contrast(0%);                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
    /*filter: grayscale(100%) contrast(1000%);*/
}

.box-services:hover>img{
    /* On Hover turn icon to blue */
    /* filter:grayscale(0%) contrast(100%); */
}
/* .box-product:hover>h3{
    font-family: 'Gotham-Bold','Times New Roman', Times, serif;
} */
.box-services:hover>.link::after {
	opacity: 1;
	transform: translate3d(0, 0.2em, 0);
}
/* .box-services:hover>h6 {
	font-family: 'Gotham-Medium','Times New Roman', Times, serif;
} */

.box-divider{
    border-right: var(--grey-2-30) solid 2px;
    height: 25px;
    position: relative;
    bottom: 30px;
    align-self: flex-end;
}


/* Components Implementation Styles */
pre{
    white-space: pre-wrap;
    background: var(--grey-3);
    color: var(--white);
    padding: var(--mp-20);
    max-width: var(--cw);
    margin: 0 auto;
    border-radius: 20px;
    font-family: monospace;
    font-size: var(--fs-14);
    line-height: 1.8;
    border: 10px solid var(--white);
}


/* Breadcrumb */
.breadcrumb p {
    color: var(--grey-2);
}
.breadcrumb p>a{
    font-family: 'Gotham-Medium','Times New Roman', Times, serif;
    color: var(--black);
}
.breadcrumb .link::after {    
    right: 12px;
	width:calc(100% - 12px);
	background-color: var(--black);
}
/* .breadcrumb a:hover{
    color: var(--blue);
} */

 .breadcrumb-back img{
    width: 15px;
    display: inline;
    align-self: center;
    margin-right: var(--mp-10);

}
.breadcrumb-back .link::after {
    left: 25px;
    right: 0;
    width:calc(100% - 25px);
}
/* Box Global */
.box-global{
    background: var(--grey-1-10);
    transition: var(--tt);
    -moz-transition: var(--tt);
    border-radius: var(--br-10);
    flex-basis: 49.5%;
    position: relative;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
    margin-bottom: var(--mp-10);
}
.box-global-header{
    display: flex;
    align-items: center;
    padding: var(--mp-20) 0 0 var(--mp-20);
}
.box-global-content{
    padding: 0 var(--mp-20) var(--mp-20);
}
.box-global-header h3{
    /*font-family: 'Gotham-Medium','Times New Roman', Times, serif;*/
    color: var(--black);
    flex-basis: 85%;
	font-family: 'Gotham-Medium', system-ui;
    font-weight: 500;
}
.box-global-header img{
    max-width: 120px;
    flex-basis: 15%;
}

.box-global-content a{
    display: block;
    width: fit-content;
    margin: var(--mp-20) 0;
   
}

/* Featured Component */
.featured-articles h6{
    font-family: 'Gotham-Medium','Times New Roman', Times, serif;
    margin-bottom: var(--mp-10);
    font-size: var(--fs-18);
}
.featured-articles img{
    max-width: 15px;
    display: inline-block;
    margin: 15px 5px -2px 0;
}
.featured-articles .articles{
    margin-left: 25px;
}
.featured-articles a{
    display: inline;
    width: fit-content;
    color: var(--black);
    margin-left: -25px;
}
/* .featured-articles a:hover{
    color: var(--blue);
} */
.featured-articles .link::after {    
    left: 22px;
    bottom: -3px;
	width:calc(100% - 25px);
	background-color: var(--black);
}

/* Article Components */
.article-component{
    display: flex;
}
.article-content {
    order: 1;
}
.article-sidebar {
    order: 2;
}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
.article-sidebar{
    flex-basis: 0%;
    border-left: .25px solid var(--grey-1-10);
    overflow: hidden !important;
    margin-left: var(--mp-60);
    transition: var(--tt);
    -moz-transition: var(--tt);
    box-shadow:0px 0px 5px 0px rgb(0 0 0 / 10%);
    -webkit-box-shadow:0px 0px 5px 0px rgb(0 0 0 / 10%);
    -moz-box-shadow:0px 0px 5px 0px rgb(0 0 0 / 10%);
}
.article-sidebar-show{
    flex-basis: 400px !important;
    border: none !important;
    box-shadow:-10px 0 20px -20px rgb(0 0 0 / 40%);
    -webkit-box-shadow:-10px 0 20px -20px rgb(0 0 0 / 40%);
    -moz-box-shadow:-10px 0 20px -20px rgb(0 0 0 / 40%);
}
.article-content{
    flex-basis: 100%;
}
.article-content .item{
    scroll-margin-top: 100px;
}
.article-sidebar .switch-sidebar img{
    width: 30px;
    border-radius: 10px 0 0 10px;
    transition: var(--tt);
    -moz-transition: var(--tt);
}
.article-sidebar .switch-sidebar{
    position: fixed;
    margin-left: -36px;
    margin-top: 2%;
    transition: var(--tt);
    -moz-transition: var(--tt);
    filter:invert(100%) grayscale(100%) contrast(1000%)  drop-shadow(-5px 0px 8px rgba(0, 0, 0, 0.3));
    opacity: 1;
    
}
.article-sidebar .switch-sidebar:hover{
    filter: invert(0%) grayscale(0%) contrast(100%)  drop-shadow(-5px 0px 8px rgba(0, 0, 0, 0.3));
    opacity: 1;
    cursor: pointer;
}
.switch-sidebar-flip{
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    border-radius: 0 10px 10px 0 !important;
}
.article-sidebar-content {
    opacity: 0;
    display: none;
}
.article-sidebar-content-show{
    display: block;
    position: fixed;
    opacity: 1;
    padding: var(--mp-20);
    top: 0;
    padding-top: 250px;
    background-color: transparent;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-bottom: var(--mp-80);
    z-index: 1 !important;
}
.footer {
    z-index: 4 !important;
    position: relative !important;
}
.footer-test {
    background: var(--black);
    padding: 300px 0;
    text-align: center;
    margin: 0 auto;
}
.footer-test * {
    color: var(--white);
}

.article-sidebar-content .section{
    padding: var(--mp-10);
}
.article-sidebar-content h6{
    font-family: 'Gotham-Medium','Times New Roman', Times, serif;
    font-size: var(--fs-18);
    margin-bottom: var(--mp-10);
}
.article-sidebar-content .section .link{
    margin: var(--mp-20) 0;
    display: block;
    width: fit-content;
}
.article-sidebar-content .section .link-anchor{
    display: block;
    margin-left: -20px;
}
.article-sidebar-content hr{
    width: 100%;
    border-top: 1px solid var(--grey-1);
    margin: var(--mp-10) auto;
    border-radius:var(--br-10) ;
}
.article-sidebar-content .btn-1{
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    background: var(--blue);
}
.article-sidebar-content .btn-1:hover{
    background: var(--blue-dark) !important;
}
.article-content h4, .article-content h5 {
    font-family: 'Gotham-Medium','Times New li-first', Times, serif;
}

.article-content .li-first, .article-content .li-first h5, .article-content .li-first a{
    font-family: 'Gotham-Medium','Times New Roman', Times, serif;
    font-size: var(--fs-22);
    
}
.article-content .li-first h5{
    margin-bottom: var(--mp-10);
}
.article-content .li-second{
    font-family: 'Gotham-Medium','Times New Roman', Times, serif;
    font-size: var(--fs-16);
    margin-bottom: var(--mp-10);
}
.article-content .item{
    margin-bottom: var(--mp-30);
}

.ol-first{
    list-style: decimal;
}
.ol-second{
    list-style: lower-alpha;
}
.article-content ul li{
    list-style-type: disc;
}
.article-content p{
    font-size: var(--fs-16);
}

.article-content .note{
    background-color: var(--grey-2);
    padding: var(--mp-10);
    border-radius: var(--br-10);
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
}
.article-content .icon{
    flex-basis: 60px;
    align-self: center;
}
.article-content .content{
    flex-basis: 100%;
    align-self: center;
}
.article-content .note img{
    width: 50px;
}
.article-content .content p{
   color: var(--white);
}




/* Search Results */
.search-result-item{
    border-radius: var(--br-10);
    border: 1px solid var(--grey-2);
    padding: var(--mp-20) var(--mp-30);
    display: block;
    margin: var(--mp-20) auto;
}
.search-result-item:hover{
    background: var(--grey-1-20);
    border: 1px solid var(--white);
}
.search-result h3, .search-result h5{
    font-family: 'Gotham-Medium','Times New Roman', Times, serif;
}
/* .search-results-container{
    height: 80vh;
    overflow-y: scroll;
    overflow-x: hidden;
} */
.search-results-bar p, .search-no-results a{
    font-family: 'Gotham-Medium','Times New Roman', Times, serif;
}
.search-results-bar{
    display: flex;
}
.search-results-bar .box-1, .search-results-bar .box-2{
    flex: 1;
    align-self: center;
}
.search-results-bar .box-2{
    justify-content: flex-end;
    display: flex;
}
.search-results-bar .box-2 p{
    margin-right: var(--mp-20);
        align-self: center;
}
.search-results-bar .box-2 select{
    /*New changes**font-family: 'Gotham-Light','Times New Roman', Times, serif;*/
    font-family: Arial, sans-serif !important;
    width: 210px;
    padding: var(--mp-10) var(--mp-15);
    border-radius: var(--br-10);
        align-self: center;
}

.cSupportCommunityFooter select {
    font-family: Arial, sans-serif !important;
}
select#selectedCategory {
    font-family: Arial, sans-serif !important;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 5.7 10' style='enable-background:new 0 0 5.7 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23000000;stroke-width:0.4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cpath class='st0' d='M0.3,4.4l1.2,1.2c0.1,0.1,0.2,0.1,0.3,0l1.2-1.2'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: 100% 50%;
}

.search-no-results {
    padding-left: var(--mp-20);
}
.search-no-results a{
    display: block;
    width: fit-content;
    margin: var(--mp-15) 0;
}
.search-no-results h5{
    color: var(--grey-2);
}


/* 404 */
.no-found-component {
    text-align: center;
    margin: var(--mp-80) auto;
}
.no-found-component img {
    max-width: 110px;
    margin: 0 auto;
    margin-bottom: var(--mp-20);
}


/* Contact Us */

.box-global-content .link-icon img{
    max-width: var(--mp-20);
    align-items: center;
    vertical-align: middle;
    margin: var(--mp-5) auto;
}


/* Tables */
/* This fix the issue with the tables inside the UL,OL articles */
ol .table, ul .table {
    margin-top: 10px;
}
ol .t-tile, ul .t-tile {
    margin-bottom: -10px;
    margin-top: 10px;
}
/* ol .table, ul .table {
    font-size: var(--fs-16) !important;
} */                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
.table {
    width: 100%;
    overflow-x: scroll;
    overflow-y: visible;
    padding: 0;
    font-size: var(--fs-16) !important;
}
.table table {
    width: 100%;
    text-align: left;
}
.table ul, table li {
    text-align: left !important;
}
.t-center td, .t-center th {
    text-align: center;
}
.t-tile {
    text-align: center;
    padding: var(--mp-10);
    background: var(--black);
    border-bottom: 0.5px solid var(--white);
}
.t-disclaimer {
    text-align: center;
    padding: var(--mp-10);
    background: var(--white);
    border-bottom: 0.5px solid var(--grey-1-30);
}
.t-tile h5 {
    color: var(--white) !important;
}
.table tr {
    border-bottom: 0.5px solid var(--grey-1-30);
}
.table td, .table th {
    padding: var(--mp-15);
    margin: 15px auto;
    vertical-align: middle;
    /* white-space: nowrap; */
}
.table tr:first-child {
    background-color: var(--black) !important;
    color: var(--white) !important;
    font-family: 'Gotham-Medium', 'Times New Roman', Times, serif;
}
.table tr:nth-child(n+1) {
    color: var(--grey-3);
}
.table tr:nth-child(odd) {
    background-color: var(--grey-1-20);
}


@media screen and (max-width: 1480px) {
    .box-services{
        flex-basis: 24%;
    }
    .box-services~.box-divider:nth-child(6){
        display: none;
    }
    .menu-content {
        right: 0;
        
    }
    .menu-content a{
        padding: 20px 40px;
    }
    
}

@media screen and (max-width: 992px) {
    .container, .pre{
        max-width: var(--cw-r);
    }
    
    .menu-content a{
        padding: 20px 85px;
    }

    .flex-1-md{
        flex: 1;
    }
    .search-component h1{
        font-size: var(--fs-22);
        margin-top: var(--mp-5);
    }
    .search-btn {
        margin-top: 0;
    }

    .notification-component *{
       text-align: center;
    }

    .article-sidebar-content-show{
        padding-top: 300px;
    }

    .search-form{
        max-width: 450px;
    }

    .search-trending-now, .search-suggested{
        max-width: 450px;
        margin-left: -20px;
    }

    .search-form input {
        width: 100%;
        margin-left: -20px;
    }
    .search-trending-now a, .search-trending-now p, .search-suggested a, .search-suggested p{
        font-size: var(--fs-16);
    }

   

}

@media screen and (max-width: 768px) {
    h1 {
        font-size: var(--fs-24);
    }
    h2 {
        font-size: var(--fs-20);
    }
    h3 {
        font-size: var(--fs-20);
    }
    h4,h5{
        font-size: var(--fs-18);
    }
    h6, a{
        font-size: var(--fs-16);
    }
    p , input{
        font-size: var(--fs-14);
    }
	.box-services .link {
        font-size: var(--fs-14);
    } 
    .search-form{
        max-width: 100%;
    }
	 .search-form input {
        padding: 7px 10px !important;
    }

    .search-trending-now, .search-suggested{
        width: 100%;
        max-width: 100%;
        margin: -1px auto !important;
        left: 50%;
        transform: translate(-50.5%);
        /* margin-left: var(--mp-5); */
    }
    .search-trending-now a, .search-trending-now p, .search-suggested a, .search-suggested p{
        font-size: var(--fs-14);
    }

    .menu-content{
        width: 100%;
    }
    
    .menu-content img{
        width: 35px;
    }
    .menu .menu-btn {
        margin-right: 0px;
        padding-right: 0px;
    }
    .menu-content a {
        padding: 15px 25px 15px 20px;
    }
    .navbar .container{
        padding:  5px var(--mp-10);;
    }
    .navbar-divider{
        margin: 0 var(--mp-14);/*var(--mp-10);*/
        height: 15px;
    }
    .navbar-item{
        margin-top: 2px;
        animation: none !important;
    }
    .logo{
        content: url('/resource/SupportSiteIcons/SupportSiteIcons/TiVo-Icon.svg');
        width: 18px;
        margin-top: -2px;
    }
    .box-product img{
        max-width: 80px;
        margin: 0 auto var(--mp-15);
    }
    .box-services~.box-divider{
        display: none;
    }

    .flex-1-sm{
        flex: 1;
    }
    .ghost{
        height: 93px/*80px;/*120px;*/
    }
    .search-component{
        /*margin-top: 10px;/*28px; /*50px;*/
    }
    .search-component .container-flex{
        display: block;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 0px;
        padding-bottom: 10px;
    }
    .notification-component p, .notification-component a{
        font-size: var(--fs-14);
    }
    .box-search-1, .box-search-2{
        flex: none;
        width: 100%;
    }
    .search-form{
        margin-top: 5px;
        float: none; 
    }
    
    .search-form input::placeholder {
        font: var(--fs-14) 'Gotham-Book','Times New Roman', Times, serif;
    }

    .box-global{
        flex-basis: 100%;
    }
    .box-global-header {
        padding: var(--mp-15) 0 0 var(--mp-20);
        /*margin-bottom: -25px;*/
        align-items: flex-start;
    }
    .box-global-content {
        padding: 0 var(--mp-60) var(--mp-5) var(--mp-20);
    }
    .box-global-content a {
        margin: var(--mp-10) 0;
    }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
    .box-global-header img{
        max-width: 90px;
        /*position: absolute;*/ 
        right: 20px;
    }

    .article-content .li-first, .article-content .li-first h5, .article-content .li-first a{
        font-size: var(--fs-16);
    }

    .article-content .li-second,  .article-content p{
        font-size: var(--fs-14);
    }
    .article-sidebar-content{
        padding: 0 0 var(--mp-20);
    }
    .article-component{
        display: flow-root;
        flex-wrap: wrap;
        padding-top: 0;
    }
    .article-content{
        order: 2;
        flex-basis: 100% !important;
    }
    .article-sidebar{
        order: 1;
        flex-basis: 100% !important;
        margin-left: 0;
        box-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        border: none;
    }
    .article-sidebar button{
        display: none;
    }  
    .article-sidebar-content, .article-sidebar-content-show{
        display: block;
        position: relative;
        opacity: 1;
        top: 0;
        padding-top: 0;
        z-index: 2 !important;
    }
    .article-sidebar-content hr{
        margin: var(--mp-20) auto;
    }
    .article-sidebar-content .scroll-up, .article-content .item-image{
        display: none;
    }
     /* Remove hover line on blue links  */
     .article-sidebar-content .link::after, .article-content .link::after, .box-services .link::after, .box-global-content .link::after, .search-no-results .link::after, .search-suggested-content .link::after, .featured-articles .link::after, .notification-component .link::after {
        background-color: transparent;
    }
    .search-form img{
        padding-right: 5px;
    }
    .search-results-bar .box-1 p{
        margin-bottom: var(--mp-20);
    }
    .search-results-bar {
        display: inline;
    }
    .search-results-bar .box-2 select{
        display: flex;
        justify-content: flex-end;
        flex: 2;
    }
    .search-results-bar .box-2 p{
        display: flex;
        flex: 1;
    }
    .search-result-item {
        padding: var(--mp-15);
        margin: var(--mp-10) auto;
    }
    .search-result-item h5 {
        font-size: var(--fs-14);
    }

    .no-found-component img {
        max-width: 80px;
    }

    .link-icon .circle{
        height: var(--mp-25);
        width: var(--mp-25);
    }
    .box-global-content .link-icon img{
        max-width: var(--mp-15);
        margin: var(--mp-5) auto;
    }

    .article-sidebar-content-show{
        height: 100%;
    } 

    /* Tables  */
    :root {
        --t-w-1: 140px;
        --t-w-2: 140px;
    }
    /* Table Responsive Variables  */
    .tr-1 {
        margin-left: calc(var(--t-w-1));
        width: calc(100% - (var(--t-w-1)));
    }
    .tr-1 td {
        min-width: calc(var(--t-w-1) + 50px);
    }
    .tr-1 th {
        width: var(--t-w-1);
    }
    .tr-1 td, .tr-1 th {
        height: calc(var(--t-w-1) - 80px);
    }
    .tr-2 {
        margin-left: calc(var(--t-w-2));
        width: calc(100% - (var(--t-w-2)));
    }
    .tr-2 td {
        min-width: calc(var(--t-w-2) + 50px);
    }
    .tr-2 th {
        width: var(--t-w-2);
    }
    .tr-2 td, .tr-2 th {
        height: calc(var(--t-w-2) - 0px);
    }
    /* Table Responsive  */
    .table-responsive {
        overflow-x: scroll;
        overflow-y: visible;
        padding: 0;
        font-size: var(--fs-12);
    }
    .table-responsive td {
        vertical-align: middle;
        border-right: 1px solid var(--grey-1-30);
    }
    .table-responsive tr:first-child th {
        background: var(--black) !important;
    }
    .table-responsive tr:nth-child(odd) th {
        background: var(--grey-1-20);
    }
    .table-responsive th {
        border-bottom: 1px solid var(--grey-1-30);
        border-right: 1px solid var(--grey-1-30);
        border-left: 1px solid var(--grey-1-30);
    }
    .table-responsive th {
        position: absolute;
        left: 0;
        margin-top: 0;
        margin-left: 20px;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    /* This fix the issue with the tables inside the UL,OL articles */
    ol .table-responsive th, ul .table-responsive th {
        margin-left: 30px !important;
    }
    .article-component .table-responsive th {
        margin-left: 10px;
    }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
    .table-responsive td, .table-responsive th {
        text-align: center;
        /* white-space: nowrap; */
    }
    /* Table */
    .table {
        font-size: var(--fs-12) !important;
    }
    .table td, .table th {
        text-align: center;
        padding: var(--mp-10);
    }
    .t-left td, .t-left th {
        text-align: left;
    }
/* New Mobile Styles */
    .title {
        margin: 0px auto 10px;
    }
    .component {
        margin: var(--mp-10) auto 45px;
    }
    .box-services:nth-last-child(-n+3) {
        margin-bottom: 0 !important;
    }
    .article-sidebar-content .btn-1 {
        max-width: 100%;
    }
    .article-sidebar-content .section {
        padding-top: 0;
    }
    .article-sidebar .link-anchor {
        padding: var(--mp-5) var(--mp-20);
    }
    .article-sidebar-content .section .link {
        margin: var(--mp-10) 0;
    }
    .article-sidebar .link-anchor, .article-sidebar .link {
        font-size: var(--fs-18);
    }
    .breadcrumb {
        margin-bottom: -15px;
    }
    .box-product {
        
        margin-bottom: 10px !important;
    }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
}
@media screen and (max-width: 480px) {
    .search-form input{
        max-width: 100%;
        margin-left: -20px;
    }
    .search-form input::placeholder { 
        font: var(--fs-10) 'Gotham-Book','Times New Roman', Times, serif;
    }
	.box-product {
        flex-basis: 46.5% !important;
        margin: 5px !important;
        
    }
}