:root {
    /*heightDelta*/
    --topnav-top: 62px;
    --topnav-btm: 65px;
    --bottom-nav: 50px;
    --bottomnavbar: 50px;
    --delta-from-top: var(--topnav-top);

    /*logo*/
    --logo-color: #FE1251;

    /*navbar*/
    --primary-navbar-background: #2d3c4d;
    --primary-navbar-color: #fff;

    /*background*/
    --primary-background: #fff;
    --secondary-background: #f5f8fa;
    --tertiary-background: #ff6200;
    --quarternary-background: #f3f2ef;

    /*title color*/
    --primary-title: #2d3c4d;
    --secondary-title: #fff;
    --tertiary-title: #42A5F5;
    --quarternary-title: #999;

    /*primary colors*/
    /*primary text*/
    --primary-text: #000000a6;
    --darkgray: #757575;
    --darkgreen: #2d2d2d;
    --darkcyan: #009688;
    --darkblue: #0d1b48;

    /*accent colors*/
    --primary-accent: #ff5722;
    --secondary-accent: #E91E63;
    --tertiary-accent: #21cf7a;
    --quarternary-accent: #e60023;
    --blue: #3b7ddd;

    --ruby: #E91E63;
    --vivid-pink: #FE1251;
    --jagger: #1c1053;
    --orange: #f56a00;
    --green: #009688;
    --purple: #5a1eec;
    --purple-light:  #4D61FC;
    --yellow: #fac541;

    /*tertiary colors*/
    --lightgray: #c5c8cf;
    --lightblue: #42A5F5;
    --jeansblue: #dce6f1;

    /*hover colors*/
    --salmon-hvr: #e87a6d;
    --action-btn-hvr: #c1a075;
    --ruby-hvr: #d21d5a;
    --aliceblue: #f5f9fe;
    
    /*text colors*/
    --text-preview: #86898d;
    --comment-background: #f3f6fa;
    --conversation-background: #e5ddd5;
    --conversation-header: #ededed;
    --placeholder-gray: #9E9E9E;
    --border-gray: rgba(0, 0, 0, .125);
    --border-light: #edf0f7;

    /*status color*/
    --online: #31bb31;
    --offline: #B71C1C;

    /*button color*/
    --primary-btn: #3b7ddd;
/*    --primary-btn: #FE1251;*/
    --secondary-btn: #4ad295;
    --tertiary-btn: #2078f4;
    --quarternary-btn:  #e7f3ff;
    --action-btn: #deb887;
    --lg-dark-btn: linear-gradient(-153deg,#020f29,#202a3e 95%);
    --count-badge: linear-gradient(-153deg,#F44336,#E91E63 95%);

    /*box color*/
    --box-gray: #f5f8fa;

    /*label color*/
    --primary-label: #2d3c4d;
    --secondary-label: #fff;
    --tertiary-label: #ff750f;

    /*add item popup*/
    --newItem-popup: 85vh;
    --newItem-hdr-minHeight: 125px;
    --newItem-hdr-Height: auto;
    --newItem-hdr-maxHeight: 200px;
    --newItem-confirm: 65px;

    /*gradients*/
    --gradient-lightgrey: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
};

body, h1, h2, h3, h4, h5, h6 {
    line-height: 1.5;
}

body {
    font-size: 14px;
    overflow-x: hidden;
    margin: 0;
    font-size: .875rem;
    font-weight: 400;
    text-align: left;
    background-color: var(--primary-background);
    font-family: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Fira Sans,Ubuntu,Oxygen,Oxygen Sans,Cantarell,Droid Sans,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Lucida Grande,Helvetica,Arial,sans-serif!important;
/*    font-family: "Roboto", sans-serif;*/
}

body, html, html a {
    -webkit-font-smoothing: antialiased;
    -webkit-font-smoothing: subpixel-antialiased;
}

a {
    /*color: #fff!important;*/
}

footer {

}

/*.list-inline-item a {
    color: #fff!important;
    font-weight: 500;
}*/

.action-btn {
    width: 75px;
    height: 30px;
    padding: 5px;
    line-height: 20px;
    background: var(--action-btn);
    color: #fff;
    font-size: 0.825rem;
}

.btn:hover {
    cursor: pointer;
}

/*option {
    color: var(--primary-text);
    font-weight: 600;
}*/

.opened {
    display: block!important;
}

.closed, .hidden {
    display: none!important;
}

.topnavbar {
    position: fixed;
    z-index: 99;
    top: 0px;
    width: 100vw;
    height: var(--topnav-top);
    background: var(--primary-navbar-color);
    -webkit-transition: background .5s ease;
    transition: background .5s ease;
}

.navbar-transparent {
    background: transparent!important;
}

.navbar-transparent > #ul-topnav-btm {
    background: none!important;
}

.main-bg-gradient {
/*    background: linear-gradient(180deg, rgb(27 61 95 / 80%), rgba(49, 75, 107, 0.5) 50%, rgba(0, 0, 0, 0.4) 100%) !important;*/
}

.landingpage-bg-image {
    background: url(../../assets/images/porsche-911-house.jpg) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-position-y: 85% !important;
}

.hero-section {
/*    background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);*/
    position: relative;
    overflow: hidden;
    padding-top: var(--delta-from-top);
}

.hero-section button[type="submit"] {
    width: 150px;
}

#brand-col {
    padding-left: 0px;
    display: inline-flex;
    justify-content: space-between;
}

#brandLbl {
    background: url(../../assets/images/brandname-iprofid.png) no-repeat center center;
    background-size: contain!important;
    width: 150px;
    height: 32px;
    transform: scale(.8);
}

.brand-label-transparent {
    background: url(../../assets/images/brandname-iprofid-transparent.png) no-repeat center center!important;
    background-size: contain;
    width: 150px;
    height: 32px;
    transform: scale(.8);
}

body[data-theme=dark] #brandLbl,
.navbar-transparent  #brandLbl {
    background: url(../../assets/images/brandname-iprofid.png) no-repeat center center!important;
    background-size: contain!important;
    width: 150px;
    height: 32px;
    transform: scale(.8);
}

.brand-logo {
    background: url(../../assets/images/favicon-32x32.png) no-repeat center center;
    width: 32px;
    height: 32px;
    margin-right: 5px;
}

.sidebar-brand-icon {
    background: url(../../assets/images/favicon-32x32.png) no-repeat center center;
    width: 32px;
    height: 32px;
    aspect-ratio: 16 / 9;
    position: relative;
    left: -5px;
}

/*#brandLbl::first-letter {

}*/

.bg-gradient-gray {
    background: linear-gradient(-180deg, #f0f2f5 50%, #fff);
}

.bg-dark {
    background: var(--darkgreen);
}

#ul-topnav-top{
    height: var(--topnav-top);
    padding: 0px;
    justify-content: space-evenly;
    background: var(--primary-navbar-color);
    -webkit-box-shadow: 0 0 30px rgba(7,51,84,0.17);
    box-shadow:  0 0 30px rgba(7,51,84,0.17);
}

#sidemenu-col {
    padding-left: 0px;
    width: fit-content;
}

#sidemenu-col .nav-item {
    height: var(--topnav-top);
    padding: 1.4em 0.1rem!important;
}

#ul-topnav-top-search {
    width: 100%;
    background: var(--secondary-background);
    height: 75px;
    padding: 0px;
    display: none;
    position: absolute;
    top: var(--delta-from-top);
}

/*#ul-topnav-btm {
    height: var(--topnav-btm);
    position: relative;
    min-width: 375px;
    padding: 17.5px 15px 15px;
}*/

.fixedToTop {
    position: fixed!important;
    top: 0px;
    z-index: 99;
}

/*#ul-topnav-btm > .nav-item {
    padding: 5px 10px;
    min-width: 85px;
    width: fit-content;
    max-width: 20%;
    text-align: center;
    height: 47.5px;
}*/

.list-inline-item > a:hover {
    cursor: pointer;
}

nav ul > li[name="dashboard"]:hover,
nav ul > li[name="market"]:hover,
nav ul > li[name="home"]:hover,
nav ul > li[class*="subnav-link"]:hover,
nav ul > li[class*="active-link"] {
/*    border-bottom: 4px solid var(--blue);*/
}

#sidemenu {
    position: relative;
    height: fit-content;
}

/*.bar1, .bar2, .bar3 */
.bar {
    width: 20px;
    height: 3px;
    background-color: var(--border-gray);
    margin: 4px 0px;
    position: relative;
    transition: 0.4s;
    border-radius: 2.5px;
}

.bar2 {
    /*width: 75%;*/
    /*margin-left: auto;*/
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-5.8px, 5.8px) ;
    transform: rotate(-45deg) translate(-5.8px, 5.8px) ;
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-3.7px, -4.5px);
    transform: rotate(45deg) translate(-3.7px, -4.5px) ;
}

#sideMenuBtn {
    vertical-align: super;
}

#alert-div{
    z-index: 9999;
    top: 0px;
    position: fixed;
    width: 100%;
}

.popUpDetailAttendeeBox {
    vertical-align: sub;
}

.popUpDetailAttendeeBox,
.popUpTimeSlotBox,
.scheduleConfirmationBox {
    display: inline-flex;
}

.popUpDetailAttendeeImg {
    width: 17.5px;
    height: 17.5px;
    border-radius: 17.5px;
}

.tooltip {
    position: relative;
    display: inline-block;
    opacity: 1!important;
}

.tooltip-attendees {
    display: inline-flex!important;
}

.tooltip .tooltiptext {
    visibility: hidden;
    min-width: 120px;
    width: -webkit-fill-available;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 33.33%;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.alert{
    border-radius: 0px!important;
}

.rootContainer {
    position: relative;
}

.topSection {
    position: relative;
/*    margin-top: var(--delta-from-top);*/
    min-height: 230px;
    height: -webkit-fill-available;
    height: -moz-available;
}

.bottomnavbar {
    height: var(--bottomnavbar);
    box-shadow: 2px -4px 12px 0 rgba(0,0,0,.05);
    position: fixed;
    z-index: 999;
    bottom: -1px;
    background: rgba(255, 255, 255);
    width: 100%;
    border-top: rgba(255, 255, 255);
    display: none;
}

.bottomnavbar ul li a {
    padding: 0em 1em;
}

.nav-item[name="add-icon"] {
    background: #fff;
    padding: 0.2em;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    position: relative;
    top: -20px;
    box-shadow: 2px -4px 12px 0 rgba(0, 0, 0, .05);
}

.nav-item[name="add-icon"] a {
    background: var(--primary-btn);
    color: var(--secondary-label);
    width: 40px;
    height: 40px;
    padding: 5px 8px !important;
    border-radius: 50%;
    position: relative;
}

.mainsubnavbar {
    height: 40px;
    background-color: #fff;
    border-bottom: 1px solid #cccccc;
    width: 100%;
    position: fixed;
    top: 90px;
    z-index: 99;
    left: 0px;
}

#mainsidenav {
    background: #fff;
    padding: 0px;
    max-width: 525px;
    width: 100vw;
    z-index: 1002;
    position: fixed;
    top: var(--topnav-top);
    right: 0px;
    height: 100vh;
    transition: all ease-out .25s;
    box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
}

#app-root {
    height: auto;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    left: 0px;
    width: 100%;
    background: var(--primary-background);
}

#ul-bottomnav {
    padding-left: 0px;
    height: var(--bottom-nav);
    justify-content: space-around;
}

#ul-mainnav {
    height: 50px;
}

.nav-item {
    height: inherit;
    list-style: none;
}

.nav-item-sm {
    padding: 0.1rem;
}

/*.nav-item[name="index"] .nav-link {
    padding: 0rem 1rem!important;
    border-radius: 5px 20px 5px 20px;
    background: var(--jagger);
}*/

.sidenavitem {
    height: 50px;
    padding: 0px;
    line-height: 50px!important;
    list-style: none;
    transition: all ease-out 0.25s;
}

.sidenavitem:hover {
    cursor: pointer;
    background-color: #e8f0fe;
}

.sidenavitem:hover .db-icon,
.sidenavitem:hover .db-sn-title {
    color: var(--lightblue);
}

/*.nav-item[name="index"]{
    background-color: #e55b15;
}
*/
.nav-item:hover{
    cursor: pointer;
}


.nav-item[name="profile"]:hover,
.nav-item[name="chat"]:hover,
.nav-item[name="notifications"]:hover {
    /*border-bottom: 2.5px solid #ff6618*/
}

.nav-item[name="dashboard"]:hover,
.nav-item[name="market"]:hover,
.nav-item[name="home"]:hover,
.nav-item[name="cards"]:hover {
    /*background:#f0ffff;*/
}

.nav-item[name="market"]:hover  #categoryMenu {
    display: inline-grid!important;
}

.mainnav-item {
    line-height: 50px;
}

.nav-link {
    background: none;
    border: 0;
    color: var(--bs-nav-link-color);
    display: block;
    font-size: var(--bs-nav-link-font-size);
    font-weight: var(--bs-nav-link-font-weight);
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.nav-link:hover {
    color: var(--blue)!important;
}

.nav-link .primary-btn:hover {
    color: #fff!important;
}

.nav-link i {
    width: 24px;
    color: var(--primary-text);
}

/*.subnav-link {
    margin-left: 5px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 20px;
    min-width: 85px;
    width: fit-content;
    max-width: 20%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    text-align: center;
    color: var(--darkgray);
    height: 25px;
}

.subnav-link:hover {
    cursor: pointer;
    color: var(--jagger);
}*/

.Header {
    color: var(--primary-title);
    font-size: 1.5rem;
    font-weight: 700;
    padding: 5px 15px;
    text-shadow: 0 0 black;
}

.subHeader {
    margin: 5px;
    color: var(--primary-title);
    font-size: 1.25rem;
    font-weight: 700;
    padding: 5px 0px;
    text-shadow: 0 0 black;
}

.primary-label {
    color: var(--primary-label);
    font-size: .925rem;
    font-weight: 600;
    padding: 5px;
}

.secondary-label {
    color: var(--secondary-label);
    font-size: .75rem;
    font-weight: 500;
    padding: 5px;
}

#footerContainer{
    padding-top: 8rem;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    opacity:0.1;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: lightgray; 
    -webkit-box-shadow: inset 0 0 6px lightgray; 
}

.video-content {
  float: left;
  height: 100%;
  position: relative;
  width: 100%;
}

.banner-video {
  height: inherit;
  opacity: 1;
  position: relative;
  transition: all 0.5s ease 0s;
  width: inherit;
  overflow: hidden;
}

#_mainBckgrndPlayer {
  transform: scale(2.5);
}

#mainSMContent{   
    list-style: none;
}

.bg-gradient-lightgrey {
    background: var(--gradient-lightgrey);
}

.h-30 {
    height: 30px!important;
}

.h-35 {
    height: 35px!important;
}

.h-40 {
    height: 40px!important;
}

.h-45 {
    height: 45px!important;
}

.lg-h-55 {
    height: 55px!important;
}

.lg-h-65 {
    height: 65px!important;
}

.h-fit-content {
    height: fit-content!important;
}

.min-h-33p {
    min-height: 33.33%!important;
}

.min-h-50p {
    min-height: 50%!important;
}

.min-h-67p {
    min-height: 66.66%!important;
}

.min-h-75p {
    min-height: 75%!important;
}

.min-h-100p {
    min-height: 100%!important;
}

.mL-0 {
    margin-left: 0px!important;;
}

.m-5 {
    margin: 5px!important;
}

.m-10 {
    margin: 10px!important;
}

.m-15 {
    margin: 15px!important;
}

.mL-5 {
    margin-left: 5px!important;
}

.mL-10 {
    margin-left: 10px!important;
}

.mL-15 {
    margin-left: 15px!important;
}

.mR-0 {
    margin-right: 0px!important;
}

.mR-5 {
    margin-right: 5px!important;
}

.mR-10 {
    margin-right: 10px!important;
}

.mR-15 {
    margin-right: 15px!important;
}

.mT-auto {
    margin-top: auto!important;
}

.mT-0 {
    margin-top: 0px!important;
}

.mT-5 {
    margin-top: 5px!important;
}

.mT-10 {
    margin-top: 10px!important;
}

.mT-20 {
    margin-top: 20px!important;
}

.mT-25 {
    margin-top: 25px!important;
}

.mT-30 {
    margin-top: 30px!important;
}

.mB-auto {
    margin-bottom: auto!important;
}

.mB-0 {
    margin-bottom: 0px!important;
}

.mB-5 {
    margin-bottom: 5px!important;
}

.mB-15 {
    margin-bottom: 15px!important;
}

.mB-25 {
    margin-bottom: 25px!important;
}

.pD-0 {
    padding: 0px!important;
}

.pD-5 {
    padding: 5px!important;
}

.pD-10 {
    padding: 10px!important;
}

.pD-15 {
    padding: 15px!important;
}

.pD-25 {
    padding: 25px!important;
}

.pT-0 {
    padding-top: 0px!important;
}

.pT-10 {
    padding-top: 10px!important;
}

.pT-25 {
    padding-top: 25px!important;
}

.pL-0 {
    padding-left: 0px!important;
}

.pR-0 {
    padding-right: 0px!important;
}

.minW-25p {
    min-width: 25%!important;
}

.minW-50 {
    min-width: 50px!important;
}

.minW-50p {
    min-width: 50%!important;
}

.minW-75 {
    min-width: 75px!important;
}

.minW-75p {
    min-width: 75%!important;
}

.minW-100p {
    min-width: 100%!important;
}

.minW-fit-content {
    min-width: fit-content!important;
}

.maxW-fit-content {
    max-width: fit-content!important;
}

.mW-25 {
    max-width: 25px!important;
}

.mW-50 {
    max-width: 50px!important;
}

.mW-75 {
    max-width: 75px!important;
}

.mW-100 {
    max-width: 100px!important;
}

.mW-150 {
    max-width: 150px!important;
}

.mW-200 {
    max-width: 200px!important;
}

.mW-250 {
    max-width: 250px!important;
}

.bR-none {
    border: none!important;
}

.bR-5 {
    border-radius: 5px!important;
}

.posRel {
    position: relative!important;
}

.posAbs {
    position: absolute!important;
}

.inline-grid {
    display: inline-grid!important;
}

.inline-flex {
    display: inline-flex!important;
}

.flex {
    display: flex!important;
}

.scale-75 {
    transform: scale(0.75);
}

.fW-500 {
    font-weight: 500!important;
}

.limeGreen {
    color: #21cf7a!important;
}

.ruby {
    color: #e91e63!important;
}

.bg-W {
    background-color: #fff!important;
}

.bg-Lightgray {
    background-color: #f9f9f9!important;
}

.fS-25 {
    font-size: 0.25rem!important;
}

.fS-50 {
    font-size: 0.50rem!important;
}

.fS-75 {
    font-size: 0.75rem!important;
}

.fS-100 {
    font-size: 1rem!important;
}

.fS-125 {
    font-size: 1.25rem!important;
}

.fS-150 {
    font-size: 1.5rem!important;
}

.fS-175 {
    font-size: 1.75rem!important;
}

.fS-200 {
    font-size: 2rem!important;
}

.fW-400 {
    font-weight: 400!important;
}

.fW-500 {
    font-weight: 500!important;
}

.fW-600 {
    font-weight: 600!important;
}

.fW-700 {
    font-weight: 700!important;
}

.borderGray {
    border: 1px solid #ccc!important;
}

.borderGray-light {
   border: 1px solid var(--border-light);
}

.clr-white {
    color: #fff!important;
}

.table-white {
    background: #fff!important;
}

.stroke-white {
    stroke: #fff!important;
}

.noBorder{
    border: none!important;
}

.inlineFlex {
    display: inline-flex!important;
}

.shadowbox {
    -webkit-box-shadow: 0px 1px 2px 0px #ccc;
    box-shadow: 0px 1px 2px 0px #ccc;
}

.shadowbox-inset {
    -webkit-box-shadow: inset 0px 1px 2px 0px #ccc;
    box-shadow: inset 0px 1px 2px 0px #ccc;
}

.canvasbox {
    -webkit-box-shadow: 0px 1px 2px 1px #eee;
    box-shadow: 0px 1px 2px 1px #eee;
    /*border-radius: 25px!important;*/
    background: var(--primary-background);
}

.shadowtext {
    text-shadow: rgb(0, 0, 0) 0px 2px 4px;
}

#search-li {
    position: relative;
    /*padding: 0.85rem 0.1rem;*/
}

#main-menu-btn {
    position: fixed!important;
    top: 15px;
    cursor: pointer;
    color: #fff;
    position: absolute;
}

#main-menu-btn:hover {
    cursor: pointer;
    color: #b99867;
}

/*#dashboard-link,
#market-link,
#payment-link,
#features-link,
#login-link,
#home-link,
#cards-link,
#profile-link {
    font-size: 0.875rem;
    display: block;
    transition: all ease-out 0.25s;
    margin-left: 5px;
    letter-spacing: 1px;
}*/

#additem-link {
    color: #fff;
}

#dashboard-link:hover,
#market-link:hover,
#payment-link:hover,
#features-link:hover,
#login-link:hover,
#home-link:hover,
#cards-link:hover,
#profile-link:hover {
    /*font-weight: 600;*/
}

._tnIcon {
    stroke: var(--primary-btn);
    /*stroke: var(--primary-navbar-color);*/
}

._tnIcon-white {
    stroke: #fff;
}

.primary-btn {
    background-color: var(--primary-btn);
    color: #fff !important;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 1rem;
    line-height: 1.4rem;
    font-weight: 500;
    border-radius: 0.3rem;
    display: inline-flex;
    width: max-content;
}

.primary-btn:hover {
    background-color: #1c3fb7;
    color: var(--secondary-label) !important;
}

/*#dashboard-link-icon,
#market-link-icon,
#home-link-icon,
#cards-link-icon,
#profile-link-icon,
#cards-link-icon,
#notify-link-icon {
    height: 25px;
    width: 20px;
    color: var(--primary-text);
    position: relative;
    top: -16.5px;
    display: none;

}

#home-link-icon {
    fill: var(--primary-text);
}

.link-icon-lbl {
    font-size: 0.7rem;
    top: -35px;
    color: var(--primary-text);
    position: relative;
}*/

.nav-item[name="dashboard"],
.nav-item[name="market"],
.nav-item[name="payment"],
.nav-item[name="features"],
.nav-item[name="login"] {
    color: var(--primary-text);
}

.nav-item[name="login"] a{
    display: inline-flex;
    padding-right: 0px;
    padding-top: 7.5px;
}

.nav-item[name="login"] a i {
    width: 24px;
}

/*.nav-item[name="dashboard-icon"]:hover,
.nav-item-sm[name="account"]:hover {
    cursor: pointer;
}

.nav-item[name="dashboard-icon"]:hover #dashboard-link-icon,
.nav-item[name="market-icon"]:hover #market-link-icon,
.nav-item[name="cards-icon"]:hover #cards-link-icon,
.nav-item[name="notifications-icon"]:hover #notify-link-icon {
    color: var(--salmon);
}

.nav-item[name="home-icon"]:hover #home-link-icon{
    fill: var(--salmon);
}

.nav-item[name="dashboard-icon"]:hover .link-icon-lbl,
.nav-item[name="market-icon"]:hover .link-icon-lbl,
.nav-item[name="home-icon"]:hover .link-icon-lbl,
.nav-item[name="cards-icon"]:hover .link-icon-lbl,
.nav-item[name="notifications-icon"]:hover .link-icon-lbl {
    color: var(--salmon);
}*/

/* override tui-date-picker */
.tui-datepicker {
    left: -12px;
    z-index: 1;
    border-color: #d5d5d5;
}

.tui-datepicker-input,
.tui-datepicker-input.tui-has-focus {
    height: max-content;
    border: none;
}

#tui-date-picker-target,
#dash-enddate,
#dash-startdate {
    display: block;
    width: 100%;
    height: 30px;
    padding: 0.25rem .75rem; 
    font-size: 0.825rem;
    font-weight: 300;
    line-height: 1.5;
    color: #424767;
    background-color: #fff;
    background-clip: padding-box;
    border: .0625rem solid var(--border-light);
    border-radius: .45rem;
    box-shadow: 0 4px 30px rgb(0 0 0 / 5%);
    transition: all .3s ease-in-out;
}


#account-link:hover {
    text-decoration: underline;
}

.info-box {
    border-radius: 5px;
    width: auto;
    position: relative;
    min-height: fit-content;
    background: var(--lightgray);
    padding: 5px;
    top: 15px;
    margin-bottom: 25px;
}

#back-to-top {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    display: none;
    align-items: center;
    justify-content: center;
    width: 9rem;
    height: 2.8rem;
    padding: 0 .75rem;
    gap: 0.5rem;
    border-radius: 999px;
    background: #fff;
    color: #000;
    border: 1px solid #000;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

#back-to-top:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

#back-to-top svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    color: inherit; /* lets stroke use current color */
}

#back-to-top span {
    font-weight: 600;
    white-space: nowrap;
    color: inherit;
}

.material-icons:hover {
    cursor: pointer;
}

/**************************************************************/
/********************BEGIN  STARTPAGINA CSS********************/
/**************************************************************/

.qckSrchTtl {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 2.25rem;
    text-align: left;
    font-weight: 700;
    color: var(--primary-navbar-color);
    text-align: center;
}

.qckSrchMfBdy {
    display: flex;
    margin: 5px 0px 5px 0px;
    font-weight: 500;
    border-radius: 2.5px;
}

#marketsortrow {
/*  height: inherit;
  width: -webkit-fill-available;
  max-width: 100%;
  top: 0px;
  left: 0px;
  position: absolute;
  object-fit: cover;*/
}

#quickSearchHdr{
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 500;
  width: 100%;
  line-height: 40px;
}

#quickSearchRow {
  width: 100%!important;
  display: grid;
  height: 50%;
}

#quickSearchBtn {
  height: 45px;
  color: #fff;
  margin: 5px 2px;
  padding: 0.65rem 1.65rem;
  font-size: 1.15rem;
  border-radius: 6px;
  line-height: 1.2;
  display: inline-flex;
  justify-content: space-between;
  font-weight: 600;
  background: var(--blue);
  width: 100%;
  text-align: center;
  transition: all ease-out .25s;
  max-width: 150px;
}

#quickSearchBtn i {
/*  margin-left: 5px;*/
}

#quickSearchBtn:hover {
  cursor: pointer;
  background-color: var(--primary-btn);
}

#quickSearchBtn:hover i {
  margin-left: 10px!important;
}

#quickSearchFooter {
  display: grid;
  padding: 0px;
}

@media screen and (max-width: 575px) {
    .mastheadSubLeft {
        margin-left: 0%!important;
    }

    .qckSrchTtl {
        font-size: 1.75rem;
        width: 275px;
        text-align: left;
        padding-left: 0px;
    }

    .qckSrchSbTtl {
        text-align: left!important;
        margin-left: 0px!important;
        margin-right: 0px!important
    }

    .qckSrchMfCntr, .qckSrchCntr {
        margin-left: 0px!important;
    }

    .mainSearchDiv {
        padding-left: 0px!important;
    }

}

@media screen and (max-width: 420px) {
    .qckSrchSbTtl {
        margin-bottom: 20px!important;
    }
}

.qckSrchSbTtl {
    text-align: center;
    line-height: 1.6;
    letter-spacing: -.44px;
    color: var(--primary-navbar-color);
    margin: 1.5rem 1rem;
    width: fit-content;
    padding: 5px 0px;
    height: fit-content;
    border-radius: 6px;
}

.qckSrchMf {
    font-size: 1.125rem;
    height: 40px;
    line-height: 1;
    width: auto;
    padding: 9px 5px;
    text-align: center;
    color: var(--primary-text);
}

.qckSrchActive {
    color: var(--blue);
}

.qckSrchMf:hover {
    cursor: pointer;
}

.qckSrchMfCntr {
    max-width: 250px;
    background-color: rgb(239 239 239);
    border-radius: 5px 5px 0px 0px;
    margin-left: 1rem;
}

.qckSrchCntr {
    display: inline-flex;
    background-color: rgb(239 239 239);
    border-radius: 0px 5px 5px 5px;
    margin-left: 1rem;
    max-width: 625px;
}

.version-status {
    position: absolute;
    z-index: 3;
    color: #fff;
    right: -50%;
    top: 5px;
    width: auto;
    padding: 0rem 0.5rem;
    border-radius: 2px;
    font-size: 0.925rem;
}

.topheaderSection {
    background: url(../../assets/images/background-8.png) no-repeat;
    background-size: cover;
    background-position-y: 31%;
}

header.masthead {
    height: 60vh;
    background: rgb(0 0 0 / 50%);

}

header.masthead h1 {
    font-size: 2rem;
}

.mastHeadcontainer {
    height: 100%;
    display: flex;
    padding-top: 7rem;
    padding-bottom: 7rem;
    position: relative;
    width: 100%;
}

.mastheadSubLeft {
    height: auto;
    padding: 0px;
    position: relative;
    width: 100%;
    max-width:655px;
}

.mastheadSubRight {

}

.keyFiguresSection {
    position: absolute;
    bottom: 0;
    color: #ffff;
    width: 100%;
}

.gray-circle {
    background-color: #fdfdff;
    border-radius: 50% !important;
    width: 80px;
    height: 80px;
}

@media screen and (min-width: 576px) {
    .hero-section {
        padding-top: 8rem;
    }
}

@media screen and (min-width: 1400px) {
    .headerWave {
        top: -232px;
    }
}

@media screen and (min-width: 1200px) {
    .keyfigure {
         font-size: 3em;
    }
}

@media screen and (max-width: 991px) {
    header.masthead {
        background-position-x: 50%;
        height: 650px;
    }
    header.masthead h1 {
        font-size: 3rem;
    }  

    .mastHeadcontainer {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

@media screen and (max-width: 576px) {
    .mastheadSubRight {
        display: none;
    }

    .qckSrchCntr {
        max-width: 375px;
        margin-right: 0px!important;
    }

    .version-status {
        right: -55%;
        top: 10px;
        font-size: 0.725rem;
    }
}

@media screen and (max-height: 750px) {
    header.masthead {
        height: 90vh;
    }
}

/*@media screen and (max-width: 450px) {
    .mastHeadcontainer {
        height: calc(100vh - 240px)!important;
    }
}
*/
/*@media screen and (max-width: 725px) {
    .mastHeadcontainer {
        height: calc(100vh - 270px)!important;
    }
}*/

#home-nav {
    height: 425px;
    padding: 20px 0px;
    /*background: var(--border-light);*/
    /*border-top: 2.5px solid var(--aliceblue);*/
}

.home-nav-ul {
    height: 425px;
    padding: 10px;
    width: 100%;
    overflow-x: hidden;
    display: inline-flex;
    justify-content: space-between;
}

.shade-div {
    position: absolute;
    left: 0%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    background-image: radial-gradient(circle farthest-corner at 50% 50%, transparent 74%, #fff);
}

.home-nav-li {
    color: var(--primary-text);
    list-style: none;
    margin-left: auto;
    margin-right: auto;
    line-height: 50px;
    font-weight: 600;
}

.home-nav-li:hover {
    cursor: pointer;
}

.marquee li {
  display: block;

  white-space: nowrap;
  position: relative;

  -webkit-animation: marquee 20s linear infinite;
  -moz-animation: marquee 20s linear infinite;
  -ms-animation: marquee 20s linear infinite;
  -o-animation: marquee 20s linear infinite;
  animation: marquee 20s linear infinite;
}

@-webkit-keyframes marquee {
  0% { right: 0; }
  100% { right: 100%; }
}
@-moz-keyframes marquee {
  0% { right: 0; }
  100% { right: 100%; }
}
@-ms-keyframes marquee {
  0% { right: 0; }
  100% { right: 100%; }
}
@-o-keyframes marquee {
  0% { right: 0; }
  100% { right: 100%; }
}
@keyframes marquee {
  0% { right: 0; }
  100% { right: 100%; }
}

.latestItems {
    /*background: var(--box-gray);*/
}

#latest-items {
    margin-top: 25px;
    margin-bottom: 25px;
    overflow-y: scroll;
    min-height: 270px;
    padding: 0px 10%;
    /* margin: 25px 5% 25px 5%; */
    width: 100%;
}

.latestItemOutline {
    height: 80%;
    width: 285px;
    border-radius: 5px;
    text-align: center;
    display: inline-flex;
    padding: 5px;
    overflow: hidden;
    display: inline-flex;
    /* background: var(--primary-background);*/
}


.latest-items-ul {
    display: inline-flex;
    padding-left: 0px;
    margin-bottom: 0px;
    overflow: hidden;
    max-width: 1115px;
}

.lastest-item-ul >
.card-lg-outline {
    min-width: 360px!important;
}

.latest-items-li {
    list-style: none;
    border-radius: 5px;
    display: inline-block;
    width: 25%;
    padding: 5px;
    height: 90%;
    /*padding: 0% 2% 0% 0%;*/
    /*border: 1px solid var(--border-gray);*/
    margin: 0px 15px!important;
}

.latest-item-info {
    position: absolute;
    bottom: 10px;
    text-align: left;
    width: 235px;
}

.latest-item-img {
    height: 100%;
    width: 95%;
    border-radius: 5px;
    object-fit: cover;
    /* object-position: -25px; */
    transition: 0.5s ease-out all;
}

.latest-item-img:hover {
    cursor: pointer;
    transform: scale(1.1);
}

.latest-item-title {
    position: relative;
    height: 30px;
    padding: 5px 7.5px;
    color: var(--primary-text);
    font-weight: 600;
    font-size: 1.075rem;
    text-overflow: ellipsis;
    overflow: hidden;
}

.latest-item-price {
    letter-spacing: 0.015em;
    font-style: normal;
    font-weight: 700;
    -webkit-font-smoothing: antialiased;
    font-size: 1rem;
    color: var(--primary-accent);
    width: fit-content;
    max-width: 150px;
    margin-left: 10px;
    /* text-shadow: 0 4px 16px rgb(55 64 77 / 50%); */
    /* border-radius: 25px; */
    /* top: -5px; */
    position: relative;
    /* text-align: left;*/
}


#categoryMenu {
    min-width: 100%;
    height: fit-content;
    display: none;
    position: absolute;
    top: var(--topnav-top);
    z-index: 999;
    left: 0%;
    padding: 0.5% 6.33%;
    -webkit-box-shadow: inset 0px 1px 2px rgb(0 0 0 / 20%);
    box-shadow: inset 0px 1px 2px rgb(0 0 0 / 20%);
    background-color: var(--primary-background);
    border-bottom: 1px solid var(--lightgray);
}

#categoryMenu::before {
    /* content: "";
    height: 15px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #000;
    position: absolute;
    width: 15px;
    top: -15px;
    left: 34%;*/
}

.catMenuTitle {
    color: var(--jagger);
    height: 50px;
    padding: 10px;
    font-size: 1.5rem;
    font-weight: 600;
}

.catMenuUl {
    display: inline-grid;
    height: fit-content;
    max-height: -webkit-fill-available;
    overflow-y: scroll;
    padding: 20px;
    width: fit-content;  
}

.catMenuLi {
    list-style: none;
    display: inline-flex;
    height: 40px;
    line-height: 1.3;
    font-size: 1.05rem;
    color: var(--primary-text);
    padding: 5px;
    border-bottom: 1px solid var(--lightgray);
}

.level-one-list {
    min-width: 250px;
    padding: 5px 10px;
    top: 76px;
    margin-left: 200px;
    height: 40px;
}

.level-one-title {
    color: var(--primary-title);
    font-size: 0.825rem;
    font-weight: 600;
}

.catMenuLi .level-one-list {
    display: none;
}

.catMenuLi:hover > .level-one-list {
    display: inline-grid;
    position: absolute;
    border-bottom: 1px solid var(--lightgray);
}

.catMenuLi-logo {
    margin-right: 10px;
    top: -3px;
    position: relative;
}

.catMenuLi-lbl {
    color: var(--primary-title);
    font-size: 0.825rem;
    font-weight: 600;
    min-width: 175px;
    line-height: 1.2;
    padding: 5px;
}

.catMenuLi-lbl:hover, .level-one-title:hover {
    cursor: pointer;
    color: var(--blue);
    text-decoration: underline;
}

.showcase .showcase-text {
    padding: 3rem;
}

.showcase .showcase-img {
    min-height: 30rem;
    background-size: cover;
}

.subscriptions {
    background: var(--box-gray);
    width: 83.33%;
    position: relative;
    border-radius: 10px;
    padding: 1rem;
}

.subscriptions > .sectionHeader {
    margin-left: 7%!important;
}

.subscribeCard {
    height: fit-content;
    /* padding-bottom: 30px; */
    width: 90%;
    max-width: 360px;
    background: #fff;
    margin: auto;
    margin-bottom: 25px;
    border-radius: 5px;
    transition: 0.5s ease-out all;
}

.subscribeCard:hover {
    bottom: 10px;
    position: relative;
    cursor: pointer;
    box-shadow: 0px 10px 10px 0px #d3d3d3!important;
    -webkit-box-shadow: 0px 10px 10px 0px #d3d3d3!important;
}

.subscribeCard-header {
    height: 150px;
    border-radius: 2.5px 2.5px 0px 0px;
}

.subscribeCard-body {
    width: 100%;
    position: relative;
    padding: 15px 10px;
}

.subscribeImg {
    width: 100%;
    max-height: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: auto;
    border-radius: 5px 5px 0px 0px;
}

.subscribeCard-title {
    color: var(--secondary-label);
    font-size: 0.975rem;
    font-weight: 500;
    height: 30px;
    text-align: center;
    padding: 2.5px 10px 2.5px 10px;
    position: relative;
    border-radius: 25px;
    min-width: 90px;
    width: fit-content;
    background: var(--primary-accent);
}

.subscribeCard-price {
    color: var(--primary-text);
    font-size: 1.5rem;
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid var(--primary-text);
    font-weight: 600;
}

.subscribeCard-features {
    margin: 25px 15px 0px;;
    text-align: left;
    height: fit-content;
}

.subscribe-feature-list {
    padding: 0px;
    display: grid;
}

.featureCheck {
    height: 25px;
    width: 25px;
    margin-right: 10px;
}

.subscribe-feature {
    list-style: none;
    display: inline-flex;
    color: var(--primary-text);
}

.subscribeCard-subscribe {
    position: absolute;
    top: 17.5px;
    right: 10px;
}

.subscribe-btn {
    background-color: #fff;
    height: 30px;
    color:  var(--lightblue);
    /*border: 1px solid var(--lightblue);*/
    /* border-radius: 5px; */
    line-height: 12.5px;
    margin: auto;
    /* margin-top: 10px; */
    padding: 7.5px;
    font-size: 0.825rem;
    font-weight: 500;
    width: 90px;
    text-align: center;
    transition: all ease-out .25s;
}

.subscribe-btn:hover {
    color: #fff;
    background-color: var(--lightblue);
    font-weight: 600;
}

.icon-screen-desktop,
.icon-layers,
.icon-check {
    height: 3.25rem;
}

@media (min-width: 768px) {
    .showcase .showcase-text {
      padding: 7rem;
    }
}

.features-icons {
    margin-top: 50px;
    padding-top: 1.5rem;
    padding-bottom: 7rem;
}

.features-icons .features-icons-item {
    max-width: 20rem;
}

.features-icons .features-icons-item .features-icons-icon {
    height: 7rem;
}

.features-icons .features-icons-item .features-icons-icon i {
    font-size: 4.5rem;
}

.features-icons .features-icons-item:hover .features-icons-icon i {
    font-size: 5rem;
}

.testimonials {
    padding-top: 7rem;
    padding-bottom: 7rem;
}

.testimonials .testimonial-item {
    
}

.testimonials .testimonial-item img {
    max-width: 12rem;
    -webkit-box-shadow: 0px 5px 5px 0px #adb5bd;
    box-shadow: 0px 5px 5px 0px #adb5bd;
}

.call-to-action {
    position: relative;
    background-color: #343a40;
    background: url("../../assets/images/bg-masthead.jpg") no-repeat center center;
    background-size: cover;
    padding-top: 7rem;
    padding-bottom: 7rem;
}

.call-to-action .overlay {
    position: absolute;
    background-color: #212529;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.3;
}

/**************************************************************/
/**************** EINDE STARTPAGINA CSS ***********************/
/**************************************************************/

section {
    padding: 0.5rem 0rem;
    /*padding: 2.5rem 0rem 7.5rem 0rem;*/
}

.sectionHeader {
    height: 75px;
    color: var(--darkblue);
    font-size: 2.25rem;
    font-weight: 700;
    margin: 0px 10% 0px 10%;
    padding: 10px;
    text-align: center;
    width: 80%;
}

.sectionSubHeader {
    height: 50px;
    color: var(--darkblue);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0px;
    padding: 10px;
    text-align: left;
    width: 100%;
}

#timeline-posts {
  padding: 0px;
}

#main-search-category {
    background-color: #f2f6fa9e;
    margin-right: 1px;
    max-width: 130px;
    border: 1px solid #f2f6fa;
}

/* #main-search::-webkit-input-placeholder { 
  color: var(--primary-text);
  font-weight: 500;
}

#main-search::-moz-placeholder { 
  color: var(--primary-text);
  font-weight: 500;
}
#main-search:-ms-input-placeholder { 
  color: var(--primary-text);
  font-weight: 500;
}
#main-search:-moz-placeholder { 
  color: var(--primary-text);
  font-weight: 500;
} */

.userStatus {
    height: 10px;
    width: 10px;
    border-radius: 5px;
}

.online {
    background-color:var(--online);
    border: 1.5px solid white;
}

.offline {
    background-color: var(--offline);
    border: 1.5px solid white;
}

#login-btn-outline {
    padding: 0px 5px 0px 5px;
    height: 35px;
    position: relative;
    width: 190px;
    border-radius: 2px;
    top: 22.5px;
}

#login-btn-outline:hover {
    cursor: pointer;
}

#login-btn-outline:hover #main-loginbtn {
    font-weight: 500;
}

#main-loginbtn {
    color: var(--primary-text);
    text-align: center;
    font-size: 0.875rem;
    width: auto;
    font-weight: 700;
    line-height: 30px;
}


#searchall-small {
    display: none;
}

#main-search-small {
    width: 100%;
    outline-style: none;
    border: none;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-left: 15px;
    height: 2rem;  
}

.mainprofileheader {
    min-height: 50px;
    overflow-x: hidden;
    background-color: #ffffff;
    position: relative;
    transition: .4s;
    -webkit-box-shadow: 0 5px 3px -5px rgba(0,0,0,.15);
    box-shadow: 0 5px 3px -5px rgba(0,0,0,.15);
}

/*#notifyIcon,
#favoritesIcon,
#indexIcon{
    height: 24px;
    position: relative;
    top: -2.5px;
    vertical-align: super;
}*/

#notifyIcon,
#indexIcon,
#favoritesIcon {
    height: 27.5px;
    width: 27.5px;
    border-radius: 25px;
    padding: 4px;
    top: -4px;
    position: relative;
    border: 1px solid var(--border-light);
}

#indexIcon:hover {
    background: #1d5786; 
}

#indexIcon {
    background: var(--primary-navbar-color);
}


#notifyIcon {
    /*border: 2px solid var(--primary-navbar-color);*/
}

#bmrkCntLbl-top,
#ntfyCntLbl-top,
#chatCntLbl-top  {
    color: var(--secondary-label); 
    height: inherit;
    position: relative;
    top: 0px;
    padding: auto;
    font-size: 0.65rem;
    font-weight: 500;
    margin: auto;
}

#bmrkCnt-top,
#ntfyCnt-top,
#chatCnt-top {
    position: absolute;
    top: 15%;
    margin-left: 12.5px;
    display: none; 
    background: var(--count-badge);
    height: 17.5px;
    min-width: 17.5px;
    width: auto;
    max-width: 30px;
    border-radius: 30px;
    text-align: center;
    padding: 1px 4px 0px 4px;
    z-index: 2;
    color: #fff;
}

#ntfyCnt-top {

}

#chatCnt-top {
    margin-left: 10px;
}

#ntfyCnt-btm {
    position: fixed;
    display: none;
    right: 27.5px;
    bottom: 27.5px;
    font-size: 0.6rem;
    background: #F44336;
    height: 17.5px;
    min-width: 17.5px;
    width: auto;
    max-width: 30px;
    border-radius: 30px;
    text-align: center;
    padding: 0px;
    z-index: 2;
    color: #fff;
}

#notify-link-icon{
    
}

#notifyIcon:hover {
    cursor: pointer;
    transform: rotatez(10deg);
}

#profile-avatar-min {

}

#profile-menu-sm {
    font-weight: 500;
    z-index: 100; 
    background: #fff; 
    height: auto; 
    width: 135px;
    border-radius: .5px;
    position: absolute;
    right: 10%;
    padding: 5px;
    box-shadow: 0px 0px 1px 1px var(--border-gray);
    -webkit-box-shadow: 0px 0px 1px 1px var(--border-gray);
}

#profile-menu-sm > li {
    list-style: none;
}

/*.avatar-sm { //verplaatst naar cards.css
    width: 30px;
    height: 30px;
    border-radius: 15px;
}

.avatar-md {
    width: 60px;
    height: 60px;
    border-radius: 30px;
}*/

.avatar-md:hover,
.avatar-sm:hover {
    cursor: pointer;
}

.userStatus-container {
    max-width: 25px!important;
    position: relative;
    top: 22.5px;
    left: 35px;
    z-index: 2;
}

.userAvatar-container {
    max-width: fit-content;
    padding: 0px;
}

#msr {
    top: 50px;
    position: absolute;
    left: auto;
    width: min-content;
    border: none;
}

.openSearchResults {
    border: 1px solid var(--bs-border-color-translucent) !important;
    transition-timing-function: ease;
}


#innerResultBox {
    border-radius: 5px;
    padding: 5px;
/*    border-bottom: 1px solid var(--border-gray);*/
}

#userSearchResHdr,
#itemSearchResHdr {
    height: 40px;
    padding: 10px 15px;
    font-size: 0.825rem;
    font-weight: 600;
}

#userSearchRes {

}

/*#userSearchRes,
#itemSearchRes {
    max-height: 250px;
    overflow-y: scroll;
    min-height: 50px;
    min-width: 375px;
    display: inline-grid;

}*/

.mainsearchresult:last-child {
/*    border-radius: 0px 0px 25px 25px;*/
}

/*#vw_all_res {
    height: 40px;
    padding: 10px 0px;
    color: var(--lightblue);
    font-weight: 500;
    font-size: 0.825rem;
    border-bottom: 1px solid var(--border-gray);
}

#vw_all_res:hover {
    cursor: pointer;
    text-decoration: underline;
}*/

/*.msli {
    width: inherit;
    padding: 7.5px;
    height: 50px;
    background: #fff;
    display: -webkit-inline-box;
}

.msli:hover {
    cursor: pointer;
    background-color: var(--aliceblue);
    border-radius: 5px;
}

.no_res_reply {
    height: 35px;
    font-size: 0.825rem;
    color: var(--text-preview);
}*/

.avtr-sr {
    height: 35px;
    width: 35px;
    position: relative;
    left: 10px;
    border-radius: 20px;
    object-fit: cover;
}

.srFnLb {
    position: relative;
    left: 25px;
    line-height: 20px;
    font-size: 0.975rem;
    font-weight: 600;
    color: var(--primary-text);
}

.resSubLbl {
    position: relative;
    left: 25px;
    line-height: 20px;
    font-size: 0.875rem;
    color: var(--text-preview);
}

.search_match_perc {
    padding: 7.5px;
    color: var(--text-preview);
    font-size: 0.725rem;
    height: 30px;
    display: none;
}


#closeSMLi{
    margin-bottom: 8rem;
}

#closeSideMenuBtn {
    float: left;
}

#closeSMa {
    padding: 12.5px;
}

#btnLogout:hover,
#profile-avatar-min:hover {
    cursor: pointer;
}

#loginIcon,
#chatIcon,
#settingsIcon,
#profileIcon,
#logoutIcon {
    position: relative;
    top: -1.5px;
    margin-right: 5px;
    height: 17.5px;
    width: 17.5px;
}

#sidesidemenu-navbar {
  padding-top: 8rem;
}

#sidesidemenu-hoofdmenu {
    padding: 0px;
}

.sidenavlink {
    height: 50px;
    line-height: 35px!important;
    padding: 0px;
    font-size: 0.925rem;
    font-weight: 500;
}

svg polyline .svgGreen {
    fill: #66BB6A;
    -webkit-text-fill-color: #66BB6A;
}

svg path .svgGray {
    fill: #37474f;
    -webkit-text-fill-color: #37474f;
}

.space10 {
    margin-bottom: 10px!important;
}

.space25 {
    margin-bottom: 25px!important;
}


/**********************pagination *********************/

.pagination {
    float: left;
    width: max-content;
    display: -webkit-inline-box;
    height: 40px;
}

.pages {
    height: inherit;
    padding:4px;
    display: inline-flex;
/*    top: 5px;
    position: relative;*/
}

/*.prevpage,
.pagenum,
.nextpage {
    height: 50px;
    min-width: 10px;
    color: #000;
    text-align: center;
    font-size: 0.875rem;
    margin-left: 5px;
    margin-right: 5px;
}*/

.pagenum {
    height: 30px;
    width: 30px;
    padding: 2px;
    border-radius: 2.5px;
    color: var(--primary-text);
    background-color: var(--primary-background);
    text-align: center;
    font-weight: 600;
    /* font-size: 0.725rem; */
    line-height: 24px;
    margin-left: 5px;
    margin-right: 5px;
    border: 1px solid var(--border-light);
}

.nextpage,
.prevpage {
    padding: 4px;
}


#prevpage-icon,
#nextpage-icon {
    color: var(--primary-btn);
    border-radius: 25px;
    height: 32px;
    line-height: 32px;
    transition: all ease-out 0.25s;
}

#prevpage-icon:hover,
#nextpage-icon:hover{
    /*background: var(--primary-text);*/
    color: var(--ruby);
}

.pagenum[status="active"] {
    font-weight: 600;
    color: var(--ruby);
    /*background: var(--box-gray);*/
    /*transform: scale(1.15);*/
    /*border: 1px solid var(--primary-text);*/
}

.pagenum:hover {
    color: var(--ruby);
    background: var(--box-gray);
}

.prevpage:hover,
.pagenum:hover,
.nextpage:hover {
    cursor: pointer;
}

/**********************pagination *********************/

/********************** upload controls ***************/

#itemMediaUploadPrev,
#profileMediaUploadPrev {
  position: absolute;
  background: rgb(255 255 255 / 75%);
  overflow-x: scroll;
  width: 100%;
  left: 0px;
  z-index: 3;
  white-space: nowrap;
  display: none; 
  /*display: inline-flex;*/
  padding: 15px 5px 0px 5px;
  min-height: 100px;
  height: max-content;
  max-height: 250px;
}

#addItemMediaBtn {
  height: 35px;
  margin: 15px;
  width: 125px;
  position: relative;
  padding: 5px;
  text-align: center;
  border-radius: 20px;
  font-size: 0.825rem;
  font-weight: 500;
  background-color: var(--primary-background);
  color: var(--primary-accent);
  border: 1px solid var(--tertiary-btn);
  display: none;
}

#addItemMediaBtn:hover {
  background-color: var(--tertiary-btn);
  color: #fff;
}

#closeItemImgPrev:hover,
#addItemMediaBtn:hover {
  cursor: pointer;
}

/********************** end upload controls ***************/

#ul-topnav-top,
#ul-topnav-btm {
/*    padding-left: 1.333333%;
    padding-right: 1.333333%;*/
}

.masthead  {
    padding-left: 6.333333%;
    padding-right: 6.333333%;
}

@media screen and (max-width: 1300px) {
    .nav-item[name="dashboard"],
    .nav-item[name="market"],
    .nav-item[name="payment"],
    .nav-item[name="features"],
    .nav-item[name="home"],
    .nav-item[name="cards"] {
        display: none!important;
    } 
}

@media screen and (max-width: 1120px) {
    .latest-items-li {
        width: 32%;
        margin: 0% 1% 1% 0%; 
    }
}

@media screen and (max-width: 1100px) {

}

@media screen and (max-width: 991px) {
    #main-additembtn {
        font-size: 0.825rem!important;
        font-weight: 500;
        text-align: center;
    }

    #quickSearchRow {
        width: 85%!important;
        margin: 15px auto 30px!important;
    }

    .qckSrchCntr {
        height: fit-content;
        display: inline-grid;
        margin-right: 15px;
    }

    .sm-h-40 {
        height: 40px!important;
    }

    .sm-h-45 {
        height: 45px!important;
    }

    .sm-h-50 {
        height: 50px!important;
    }

    .pD-sm-10 {
        padding: 10px!important;
    }

    .pD-sm-15 {
        padding: 15px!important;
    }

    .dropdown-lg

    .latest-items-li {
        width: 100%
    }

    #timeline-top-row > div {
        flex-direction: column-reverse;
    }

    .info-box {
        min-height: 250px;
    }

    #home-nav {
        padding: 20px 0px;
    }

    .usp {
        width: 25%;
    }

    .usp .icon {
        width: 32px!important;
        height: 32px!important;
    }

    .usp span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        width: 75px;
        padding-left: 0px!important; 
        font-size: 0.725rem!important;
        line-height: 1.33;
        font-weight: 500!important;
        vertical-align: text-top;
        color: var(--darkgray);
        text-align: center!important;
        position: relative;
        top: 5px!important;
        left: -7.5px;
    }

    .latest-items-li {
        width: 41%;
    }
}

@media screen and (max-width: 925px) {
    #dashboard-link-icon,
    #market-link-icon,
    #home-link-icon,
    #cards-link-icon,
    #profile-link-icon,
    #notify-link-icon {
        display: block;
        line-height: 48px;
    }

    .bottomnavbar,
    .profile-footer {
        display: block;
    }

    .nav-item[name="additem"] {
        display: none!important;
    }
}

@media screen and (max-width: 768px) {
    #ul-topnav-btm {
        overflow-x: overlay;
        overflow-y: hidden;
    }

    .topSection {
        min-height: 500px!important;
    }

    #main-search {
        line-height: 30px;
    }

    #latest-items{
        margin: 35px 0px!important;
        width: 100%;
    }

    #dashboard-link,
    #market-link,
    #payment-link,
    #features-link,
    #home-link,
    #cards-link,
    #profile-link {
        display: none;
    }

    .primary-btn {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    #indexIcon {
        top: -7.5px!important;
    }

    .subscribeCard {
        width: 95%!important;
    }

    #profile-avatar-min {
        top: -2.5px;
    }

    .features-icons {
        padding-top: 7rem!important;
    }


    #msr {
        /*position: absolute;
        width: 80vw;
        top: var(--topnav-top);
        left: -15vw;*/
    }
    
    #ul-topnav-top[dest="P"] {
        /*height: 0px!important;*/
    }

    #mainsidenav,
    #mainSMContent {
        top: var(--topnav-top)!important;
        /*width: 100vw!important;*/
    }

    #mainsidenav{
        /*height: calc(100% - 40px)!important;*/
    }

    .latest-items-li {
        width: 100%;
    }

}

@media screen and (max-width: 350px) {

    #pagination-container {
        width: 90%;
        margin-top: 170px!important;
    }

    #profile-wrapper {
        margin-top: 50px!important;
    }

    #timeline-top-row {
        margin: 0px;
    }

    .mainprofileheader {
        padding-left: 15px;
    }


}