.unset {
    all: unset;
}
.centered-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* Use modern box-sizing model everywhere */
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

nav {
    background-color: #f0f0f0;

}

/* Content images must never overflow their column. Many product pages carry a
   legacy width="800" attribute; max-width:100% caps that to the available width
   on narrow windows/phones while height:auto preserves the aspect ratio. */
main img {
    max-width: 100%;
    height: auto;
}

table {
    table-layout: fixed; /* Prevent table layout issues */
    width: 100%; /* Force table to fit the container */
}

td {
    word-wrap: break-word; /* Break long words */
    overflow-wrap: break-word; /* Modern equivalent of word-wrap */
}

/* ------- Basic page layout ------- */
body, html {
    height: 100%;
    min-height: 100%;
}
html {
    padding: 0;
    margin: 0;
    min-height: 100%;
}
body {
    background-color: #4b4b4d;
    padding: 0;
    margin: 0;
}
#body-bg {
    background-color: #f8f8f8;
}
.container {
    /*width: 1156px;*/
    margin: 0 auto;
}
#body-bg > .container {
    background-color: #f0f0f0;
}

header {
    padding: 10px 35px 10px 35px;
    /*border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;*/
    background-color: #363636;/*#4b4b4d;*/
}

#logo {
    background: url(/images/logo-craftsman-3ead1c6ff4fe33495c150da763998da2.png) left center no-repeat;
    background-size: contain;
    display: block;
    width: 634px;
    max-width: 100%;
    aspect-ratio: 634 / 66;
    height: auto;
}
#login-buttons {
    padding-right: 15px;
    padding-left: 15px;
    /*box-sizing: content-box;*/
}
#login-buttons .account-button {
    color: #fff;
    display: block;
    background: #a0a0a0;
    padding: 5px 5px 5px 10px;
    font-weight: 200;
    margin-bottom: 5px;
    text-decoration: none;
    cursor:pointer;
    border-radius: 5px;
}

.block {
    text-align: justify;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12pt;
}

.bottom12 {
    margin-bottom: 12pt;
}

.rightAlign {
    text-align: right;
}

.tableButton {
    margin-left: 5px;
    margin-right: 0px !important;
}
.account-button:hover {
    background: #808080 !important;
}

#login-buttons a.account-button:after {
    display: block;
    float: right;
    text-align: right;
    content: " ►";
}

#login-status {
    color: #fff;
    font-weight: 200;
    font-size: 0.79em;
}
#login-status dl {
    margin-top: 0;
}
#login-status dt {
    color: #b8b8b8;
}
#login-status dd {
    margin-left: 0;
}

#nav-main {
    padding: 0 50px;
}

#main-bg {
    background-color: #f0f0f0;
    padding-bottom: 24px;
    /*border-top-left-radius: 10px;*/
    /*border-top-right-radius: 10px;*/
}

#main-bg-fade {
    /*background: url(/images/bg-gradient-0c412b37883f6286c9dd80ab447a914e.svg) top left repeat-x;*/
    /*background-size: auto 678px;*/
    /*background-image: linear-gradient(to bottom, rgba(0,0,0,0) 100px, #f0f0f0 339px);*/
}

#left-sidebar {
    border-right: 1px solid black;
    padding-left: 0px;
    min-width: 200px;
}

main {
    margin: 0 35px;
    padding: 15px 35px 15px 35px;
    border-radius: 10px;

    background-color: #fff; /* fallback */
    background-color: rgba(255, 255, 255, 0.8);
}

h1 {
    font-size: 2.2em;
    margin-top: 0;
    font-weight: normal;
}
h2 {
    font-weight: normal;
}
h3 {
    font-size: 1.1em;
    font-weight: bold;
    margin-top: 1.2em;
}
h4 {
    font-size: 1em;
    font-weight: bold;
    margin-top: 1em;
}

#footer-wrapper {
    background: #363636; /*#4b4b4d;*/
    padding-top: 1em;
    padding-bottom: 1em;
    /*margin: 0 auto;*/
}
/*
#footer-sitemap {
    padding: 0 70px 15px 70px;
    background: #cccccd;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
#footer-sitemap a {
    color: #000;
}
#footer-sitemap .pure-menu.pure-menu-open {
    background: none;
    border: none;
}
#footer-sitemap .pure-menu.pure-menu-open .pure-menu-selected a {
    background: none;
    color: #dc002e;
}
#footer-sitemap .pure-menu.pure-menu-open .pure-menu-heading {
    font-weight: bold;
    padding-left: 0;
}
*/

footer {
    text-align: left;
}
#legal-links, #legal-links a {
    color: #fff;
    font-weight: 200;
}
#legal-links a {
}
#legal-links li {
    display: inline;
}
#legal-links li:before {
    content: " | ";
}
#legal-links li:first-child:before {
    content: "";
}

a:link, a:visited {
    color: #dc002e;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
/* ------- Typography ------- */

/*@import url("//hello.myfonts.net/count/2aaad9");*/
@font-face {font-family: 'BankGothicTL-Medium';src: url('/css/webfonts/2AAAD9_0_0-c886e0df972100b2e09eb4454407b251.eot');src: url('/css/webfonts/2AAAD9_0_0-c886e0df972100b2e09eb4454407b251.eot#iefix') format('embedded-opentype'),url('/css/webfonts/2AAAD9_0_0-9b4688d8b81af8a4f06cb9cba98daf37.woff') format('woff'),url('/css/webfonts/2AAAD9_0_0-c4d6ef75bbaf04322433c4446608ddd3.ttf') format('truetype');}

h1 {
    font-family: BankGothicTL-Medium;
}

#navbarNav > ul > li > a {
    font-family: BankGothicTL-Medium;
    font-size: 12pt;
    color: #000;
    margin: 0 16px;
    text-decoration: none;
}

#navbarNav > ul > li > ul > li > a  {
    font-size: 11pt;
    color: #000;
    text-decoration: none;
}

.dropdown-item:hover , #navbarNav > ul > li > a:hover {
    text-decoration: underline;
}
#nav-main, #nav-main.pure-menu .pure-menu-open li {
    background-color: #f0f0f0;
    width: 200px;
}
#nav-main.pure-menu.pure-menu-open a {
    border: 0;
}
#nav-main.pure-menu li.pure-menu-selected a {
    color: #dc002e;
    background-color: inherit;
}
#nav-main.pure-menu > ul {
    position: inherit;
}
#nav-main li > ul {
    box-shadow: 1px 5px 4px 3px rgba(0,0,0,0.2);
}

.list-plain {
    padding-left: 0;
}
.list-plain li {
    list-style-type: none;
}



#bottom > section {
    border-top: solid 1px #b8b8b8;
    padding-bottom: 1em;
    margin-top: 1em;
}
#bottom > section:last-child {
    padding-bottom: 0;
}

#bottom > section {
    padding-top: 1em;
}



/* ------- Home page ------- */

.intro-video {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}
.other-video {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    margin-bottom: 1cm;
}
#featured-citation blockquote {
    padding: 0 75px;
    font-weight: bold;
    text-align: center;
}

.citation cite {
    font-weight: normal;
}
.citation cite {
    display: block;
    width: 100%;
    margin-top: 1em;
}
cite img {
    margin-right: 30px;
}
cite .client {
    display: inline-block;
    text-align: left;
}



.clients {
    text-transform: uppercase;
}
.clients ul, .clients li {
    color: #dc002e;
    padding-left: 0;
    display: inline;
}
.clients li:before {
    content: "· ";
}
.clients li:first-child:before {
    content: "";
}



.dateline {
    margin-top: 1em;
}
.news-item .dateline + h4, .news-item h2 {
    margin: 0;
}

.news-item .subtitle {
    margin: 0;
}



.divider-right {
    padding-right: 15px;
}
.divider-left {
    border-left: solid 1px #b8b8b8;
    padding-left: 15px;
}


/* Provide a plain variant of the pure menus */
.menu-plain.pure-menu {
    border: 0;
    background: transparent;
}
.menu-plain.pure-menu li {
    padding-left: 0;
    font-weight: 200;
}
.menu-plain.pure-menu li a {
    padding-left: 0;
    padding: 0;
}
.menu-plain.pure-menu li a:hover {
    background-color: transparent;
}
.menu-plain.pure-menu .pure-menu-heading {
    border-bottom: 0;
    color: #000;
    font-weight: normal;
}

#primary > section {
    padding-bottom: 1em;
    border-bottom: solid 1px #b8b8b8;
    margin-bottom: 1em;
}
#primary > section:last-child {
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 1em;
}
#primary, #bottom, #legal-links {
    font-weight: 200;
    line-height: 1.4;
}


/* Help unstyled forms to look reasonable */
form tr {
    padding: 0.5em 0;
}


/* Sidebar */

.space-above {
    margin-top: 1em;
}

.sidebar-menu > ul {
    padding-left: 0;
    margin-bottom: 0.2em;
}
.sidebar-menu-parent ul {
    padding-left: 5px;
}
.sidebar-menu-heading {
    text-transform: uppercase;
    font-weight: bold;
    margin: 2em 0 0em;
}

section.news-item {
    font-size: 10pt;
}
.no-top-margin {
    margin-top: 0em !important;
}
.sidebar-menu-heading > a {
    color: #000;
}

.sidebar-menu ul > li {
    list-style-type: none;
    font-size: 11pt;
}
.sidebar-menu .sidebar-menu-selected > a {
    color: #000;
}
.sidebar-menu li > ul {
    margin: 0.5em;
}

#left-sidebar h3 {
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    margin: 1em 0 0.5em 0;
}
#left-sidebar h3 a {
    color: #000;
}
#left-sidebar .dateline {
    font-weight: 200;
    margin: 0;
}
#left-sidebar .news-item {
    margin-bottom: 0.5em;
}



.flash, .errorExplanation {
    display: block;
    padding: 1em 15px;
    border-radius: 10px;
}
.flash, .flash a, .errorExplanation, .errorExplanation a {
    color: #fff;
}
.flash.error, .errorExplanation {
    background: #820;
}
.flash.success {
    background: #085;
}
.flash.notice {
    background: #038;
}
.errorExplanation h2 {
    font-family: inherit;
    font-weight: normal;
    margin: 0;
}


.details-table th {
    padding-right: 15px;
    text-align: right;
    color: #444;
}
.details-table tr {
    border-bottom: solid 1px #b8b8b8;
}
.details-table th, .details-table td {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}

.active-tab {
    background-color: #DC002E !important;
    font-size: 10pt;
    color: #fff !important;
    transition: color 0.2s ease-in-out;
    margin: 2px;
    border: 1px solid black !important;
}

.bg-tab {
    background-color: #a0a0a0;
    font-size: 10pt;
    color: #000 !important;
    transition: color 0.2s ease-in-out;
    margin: 2px;
    border: 1px solid black !important;
}

#tabs {
    background: none;
    font-size: 0.79em;
    border-bottom: solid 1px black;
    margin-bottom: 1em;
}
#tabs li a {
    background: #b9b9b9;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #000;
    padding: 3px 15px 2px 15px;
    border: solid 1px #aaa;
}
#tabs li.pure-menu-selected a, #tabs li a:hover {
    text-decoration: underline !important;
}

.pure-table {
    font-size: 0.79em;
    background-color: #fff;
}



section h2 {
    margin-top: 0;
}


.unactivated-user-highlight {
    background: #fcc;
}
.administrator-highlight {
    background: #cdf;
}


.spaced-column {
    padding: 0 7px;
}

.image-center {
    margin: 0 auto;
    display: block;
}
.image-right {
    float: right;
}

.space-below {
    margin-bottom: 1em;
}

.news-item h3 {
    margin-top: 0.5em;
}

.news-item h2 {
    font-size: 14pt;
    font-weight: bold;
    margin-bottom: 0.5em;
}

.news-item a {
    margin-bottom: 0.5em;
}

#benefits h2 {
    border-bottom: solid 1px #b8b8b8;
    font-size: 14pt;
    font-weight: bold;
    margin-top: 2em;
}

.pure-skin-h2m .button-wide {
    display: block;
}


.pure-skin-h2m .button-large {
    font-size: 110%;
}

.pure-skin-h2m .button-xlarge {
    font-size: 125%;
}
.btn-group-h2m {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.btn-h2m {
    color: #ffffff !important;
    background-color: #DC002E;
    border-color: #DC002E;
    margin-right: 10px;
}

.btn-h2m:hover,
.btn-h2m:focus,
.btn-h2m:active,
.btn-h2m.active,
.open .dropdown-toggle.btn-h2m {
    color: #ffffff;
    background-color: #b00025;
    border-color: #b00025;
    text-decoration: none;
}

.btn-h2m:active,
.btn-h2m.active,
.open .dropdown-toggle.btn-h2m {
    background-image: none;
}

.btn-h2m.disabled,
.btn-h2m[disabled],
fieldset[disabled] .btn-h2m,
.btn-h2m.disabled:hover,
.btn-h2m[disabled]:hover,
fieldset[disabled] .btn-h2m:hover,
.btn-h2m.disabled:focus,
.btn-h2m[disabled]:focus,
fieldset[disabled] .btn-h2m:focus,
.btn-h2m.disabled:active,
.btn-h2m[disabled]:active,
fieldset[disabled] .btn-h2m:active,
.btn-h2m.disabled.active,
.btn-h2m[disabled].active,
fieldset[disabled] .btn-h2m.active {
    background-color: #DC002E;
    border-color: #DC002E;
}

.btn-h2m .badge {
    color: #DC002E;
    background-color: #ffffff;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover
{
    color: #b00025;
    background-color: #eee;
    border-color: #ddd;
}

.pagination > .active > a
{
    color: white;
    background-color: #DC002E !Important;
    border: solid 1px #DC002E !Important;
}

.pagination > .active > a:hover
{
    color: white;
    background-color: #b00025 !Important;
    /*border: solid 1px #5A4181;*/
}

/* ------- Responsive / mobile ------- */
@media (max-width: 991.98px) {
    header {
        padding: 10px 15px;
    }
    main {
        margin: 0 10px;
        padding: 15px;
    }
    /* Login buttons sit below the logo; give them breathing room */
    #login-buttons {
        margin-top: 10px;
    }
    /* Below lg the sidebar becomes an offcanvas panel, so its grid column is
       empty — collapse it so it leaves no border/gap above the content. */
    #left-sidebar {
        min-width: 0;
        border: none;
        margin: 0;
        padding: 0;
    }
    #featured-citation blockquote {
        padding: 0 15px;
    }
    .divider-left {
        border-left: none;
        padding-left: 0;
    }
}

@media (max-width: 575.98px) {
    main {
        margin: 0 5px;
        padding: 12px 10px;
    }
    h1 {
        font-size: 1.7em;
    }
}

/* ------- Lightbox (tap-to-zoom product screenshots) ------- */
.zoomable {
    cursor: zoom-in;
}
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000; /* above Bootstrap offcanvas/modal/tooltip layers */
    padding: 20px;
    background: rgba(0, 0, 0, 0.85);
    cursor: zoom-out;
    align-items: center;
    justify-content: center;
}
.lightbox-overlay.open {
    display: flex;
}
.lightbox-overlay img {
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}

/* At lg+ the responsive offcanvas renders as a static sidebar. Bootstrap sets
   the offcanvas-body to `display:flex` (row) at this breakpoint, which lays the
   stacked menu out horizontally — force it back to a normal vertical block and
   strip the offcanvas padding/scroll so the desktop sidebar looks as before. */
@media (min-width: 992px) {
    #left-sidebar .offcanvas-body {
        display: block;
        padding: 0;
        overflow: visible;
    }
}