/*
    File: blue.css
    Copyright (c) 2024 Codejock Software
*/
:root {
    --white: #ffffff;
    --white-rgb: 255, 255, 255;
    --black: #000000;
    --goldenrod: #daa520;

    --link: #2780e3;
    --link-hilite: #e38a27;
    --link-hilite-bg: #e9f2fc;

    --primary: #1f66b5;
    --primary-hover: #2780e3;
    --primary-bg: #e9f2fc;
    --primary-bdr: #1f66b5;
    --primary-text: #a8ccf3;

    --light: #8a9097;
    --light-hover: #6e7378;
    --light-bg: #f3f3f4;
    --light-bdr: #6e7378;

    --dark: #373a3c;
	--dark-rgb: 55, 58, 60;
    --dark-hover: #2c2e30;
    --dark-bg: #ebebeb;
    --dark-bdr: #2c2e30;
    --dark-bar: #101112;
    --dark-darker: #252525;

    --danger: #ff0039;
    --danger-hover: #cc002d;
    --danger-bg: #ffe5eb;
    --danger-bdr: #cc002d;

    --success: #3fb618;
    --success-hover: #329113;
    --success-bg: #ebf7e7;
    --success-bdr: #329113;

    --gray: #adb5bd;
	--gray-hover: #8a9097;
    --gray-bg: #f6f7f8;
    --gray-bdr: #dbdddf;
    --gray-text: #111212;

    --tooltip: #7f7a68;
    --tooltip-border: #f7ce72;
    --tooltip-bg: #fff5d0;

    --page-bg: #c4cdd8;
}

/* === navigation menu === */
#topNav {
    color: var(--white) !important;
    background-color: var(--primary) !important;
}
#topNav ul.nav > li a {
    color: var(--dark) !important;
    font-weight: normal;
    border: none;
}
#topNav ul.nav > li > a > span {
    color: var(--primary-text) !important;
    font-size: 11px !important;
    line-height: 1.75em;
	text-transform: uppercase;
}
#topNav ul.nav > li {
    color: var(--white);
    border-left: unset;
	background-color: var(--primary);
}
#topNav ul.nav > li:hover {
	background-color: var(--primary-hover);
}
#topNav ul.nav > li a.dropdown-toggle {
    color: var(--white) !important;
	padding: 14px;
}
#topNav ul.nav > li:last-child {
    border-right: unset;
}
#topNav ul.nav > li.active > a > span {
    color: var(--primary-text) !important;
}
#topNav ul.nav > li.mega-menu > ul.dropdown-menu > li {
	border: 1px solid var(--primary-hover);
}
#topNav ul.nav > li.mega-menu > ul ul {
	margin-top: 0.5em !important;
}
/* === form buttons === */
.btn {
    margin: 0 0 0 0.6em !important;
}
.btn-lg {
    margin: 0 !important;
    float: unset !important;
}

/* -- button colors -- */
.btn-primary,
.btn-dark, 
.btn-light,
.btn-danger, 
.btn-success {
    float: right;
}

.btn-black {
    color: rgba(255,255,255,0.75) !important;
    border: 1px solid rgba(255,255,255,0.5) !important;
    border-radius: 4px;
    background-color: rgba(0,0,0,0.5) !important;
}
.btn-black:hover {
    color: var(--white) !important;
    background-color: rgba(0,0,0,0.75) !important;
}

.btn-primary {
    color: var(--white) !important;
    border: 1px solid var(--primary) !important;
    border-radius: 4px;
    background-color: var(--primary) !important;
}
.btn-dark {
    color: var(--white) !important;
    border: 1px solid var(--dark) !important;
    border-radius: 4px;
    background-color: var(--dark) !important;
}
.btn-light {
    color: var(--white) !important;
    border: 1px solid var(--light) !important;
    border-radius: 4px;
    background-color: var(--light) !important;
}
.btn-danger {
    color: var(--white) !important;
    border: 1px solid var(--danger) !important;
    border-radius: 4px;
    background-color: var(--danger) !important;
}
.btn-success {
    color: var(--white) !important;
    border: 1px solid var(--success) !important;
    border-radius: 4px;
    background-color: var(--success) !important;
}
.btn-disabled {
    color: var(--gray) !important;
    border: 1px solid var(--gray-bdr) !important;
    border-radius: 4px;
    background-color: var(--gray-bg) !important;
}
.btn-primary:hover {
    color: var(--white) !important;
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}
.btn-dark:hover {
    color: var(--white) !important;
    background-color: var(--dark-hover) !important;
    border-color: var(--dark-hover) !important;
}
.btn-light:hover {
    color: var(--white) !important;
    background-color: var(--light-hover) !important;
    border-color: var(--light-hover) !important;
}
.btn-danger:hover {
    color: var(--white) !important;
    background-color: var(--danger-hover) !important;
    border-color: var(--danger-hover) !important;
}
.btn-success:hover {
    color: var(--white) !important;
    background-color: var(--success-hover) !important;
    border-color: var(--success-hover) !important;
}
.btn-outline-primary {
    color: var(--primary) !important;
    border: 1px solid var(--primary-bdr) !important;
    border-radius: 4px;
    background-color: var(--white) !important;
}
.btn-outline-dark {
    color: var(--dark) !important;
    border: 1px solid var(--dark-bdr) !important;
    border-radius: 4px;
    background-color: var(--dark-bg) !important;
}
.btn-outline-light {
    color: var(--light) !important;
    border: 1px solid var(--light-bdr) !important;
    border-radius: 4px;
    background-color: var(--light-bg) !important;
}
.btn-outline-danger {
    color: var(--danger) !important;
    border: 1px solid var(--danger-bdr) !important;
    border-radius: 4px;
    background-color: var(--danger-bg) !important;
}
.btn-outline-success {
    color: var(--success) !important;
    border: 1px solid var(--success) !important;
    border-radius: 4px;
    background-color: var(--success-bg) !important;
}
.btn-outline-primary:hover {
    color: var(--white) !important;
    border: 1px solid var(--primary) !important;
    background-color: var(--primary) !important;
}
.btn-outline-dark:hover {
    color: var(--white) !important;
    border: 1px solid var(--dark) !important;
    background-color: var(--dark) !important;
}
.btn-outline-light:hover {
    color: var(--white) !important;
    border: 1px solid var(--light) !important;
    background-color: var(--light) !important;
}
.btn-outline-danger:hover {
    color: var(--white) !important;
    border: 1px solid var(--danger) !important;
    background-color: var(--danger) !important;
}
.btn-outline-success:hover {
    color: var(--white) !important;
    border: 1px solid var(--success) !important;
    border-radius: 4px;
    background-color: var(--success) !important;
}

.not-allowed {
    cursor: not-allowed !important;
}

.lh24 {
    line-height: 24px;
}
.lh26 {
    line-height: 26px;
}
.lh28 {
    line-height: 28px;
}

.tip {
    cursor: pointer !important;
}
[data-tooltip]:hover::after {
    display: block;
    position: absolute;
    content: attr(data-tooltip);
    color: var(--tooltip);
    border: var(--tooltip-border) 1px solid;
    background-color: var(--tooltip-bg);
    border-radius: 4px;
    padding: 10px;
    text-transform: none;
    font-size: 14px;
    line-height: 22px;
}

/* === margin === */
.m0 { margin: 0px !important; }
.m5 { margin: 5px !important; }
.m10 { margin: 10px !important; }
/* bottom */
.mb0 { margin-bottom: 0px !important; }
.mb5 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
/* top */
.mt0 { margin-top: 0px !important; }
.mt5 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
/* right */
.mr0 { margin-right: 0px !important; }
.mr5 { margin-right: 5px !important; }
.mr10 { margin-right: 10px !important; }
/* left */
.ml0 { margin-left: 0px !important; }
.ml5 { margin-left: 5px !important; }
.ml10 { margin-left: 10px !important; }

/* === padding === */
.p0 { padding: 0px !important; }
.p5 { padding: 5px !important; }
.p10 { padding: 10px !important; }
/* bottom */
.pb0 { padding-bottom: 0px !important; }
.pb5 { padding-bottom: 5px !important; }
.pb10 { padding-bottom: 10px !important; }

.float-unset {
    float: unset;
}

table > tbody > tr.active > td, 
.table > tbody > tr.active > th, 
.table > tbody > tr > td.active, 
.table > tbody > tr > th.active, 
.table > tfoot > tr.active > td, 
.table > tfoot > tr.active > th, 
.table > tfoot > tr > td.active, 
.table > tfoot > tr > th.active, 
.table > thead > tr.active > td, 
.table > thead > tr.active > th, 
.table > thead > tr > td.active, 
.table > thead > tr > th.active {
    background-color: var(--gray-bg);
}
.nav-tabs > li.active > a, 
.nav-tabs > li.active > a:focus, 
.nav-tabs > li.active > a:hover {
    border: 1px solid var(--gray-bdr);
    border-bottom-color: transparent;
    color: var(--primary) !important;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:active {
    color: var(--primary) !important;
}
.nav > li > a:focus, 
.nav > li > a:hover {
    background-color: var(--gray-bg);
    border-bottom-color: var(--gray-bdr);
}
section.alternate {
    background-color: var(--light-bg);;
}
a {
    color: var(--link);
    text-decoration: none;
}
a:hover, a:active {
    color: var(--link-hilite);
    text-decoration: none;
}
.hilite {
    color: var(--link-hilite);
}

#footer a.fsize11,
#footer a.fsize12,
#footer li a {
    color: var(--light) !important;
}
#footer a.fsize11:hover,
#footer a.fsize12:hover,
#footer a.fsize11:active,
#footer a.fsize12:active,
#footer li a:hover,
#footer li a:active {
    color: var(--link-hilite)!important;
}

.tp-caption a {
    color: var(--light);
}
.tp-caption a:hover,
.featured-box-minimal h4,
.glyphicon, .wi,
p.dropcap:first-letter,
.li, div.owl-carousel .caption,
.pagination > li > a, 
.pagination > li > span,
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus,
div.mega-price-table .pricing:hover h4,
div.mega-price-table .pricing-table i.fa, /* icons */
#blog a > span,
#blog h1 > span,
.cartContent a.remove_item:hover,
.owl-carousel.featured a.figure > span > i,
.btn-link,
.styleColor {
    color: var(--primary);
}
ul.side-nav a {
    color: var(--primary) !important;
    text-decoration: none !important;
}
ul.side-nav a:hover, 
ul.side-nav a:active {
    color: var(--dark) !important;
    text-decoration: none !important;
	background-color: var(--dark-bg) !important;
}
#toTop:hover, #toTop:active {
    color: white !important;
    text-decoration: none !important;
}

ul.side-nav ul li.hover > a {
    color: var(--link-hilite) !important;
    text-decoration: none !important;
    font-weight: normal !important;
}
ul.side-nav ul li.active > a {
    color: var(--primary) !important;
    text-decoration: none !important;
    font-weight: bold !important;
}

p.dropcap.color:first-letter,
span.badge,
#toTop:hover,
#bar, .slider-handle,
div.featured-box i.fa,
i.featured-icon,
.progress-bar-primary,
.modal-header,
.timeline .timeline-left .item:before,
.timeline .timeline-right .item:before,
.timeline .timeline-centered .item.pull-right:before,
.timeline .timeline-centered .item.pull-left:before,
div.mega-price-table .pricing-title, 
div.mega-price-table .pricing-head,
div.mega-price-table .pricing.popular,
#topNav ul.nav > li:hover > a:before, 
#topNav ul.nav > li.active > a:before,
.bg-primary {
    background-color: var(--primary);
}

/* icons, boxes */
i.featured-icon:after,
div.featured-box.nobg.border-only i.fa {
    color: var(--primary);
    border-color: var(--primary);
}
section.product-view-colors a:hover,
section.product-view-colors a.active,
i.featured-icon {
    border-color: var(--primary-hover);
}
i.featured-icon.empty {
    color: var(--primary) !important;
    border-color: var(--primary);
}

/* Top Nav */
#topNav ul.nav .dropdown-menu > li.active > a, 
#topNav ul.nav .dropdown-menu > li:hover > a, 
#topNav ul.nav .dropdown-menu > li:focus > a {
    color: var(--white) !important;
    background-color: var(--primary-hover);
}
#topNav ul.dropdown-menu > li:hover > a.dropdown-toggle:after { /* arrow sub-submenu */
    color: var(--white);
}

.btn-white {
    color: var(--primary);
}

.pagination > .active > a, 
.pagination > .active > span, 
.pagination > .active > a:hover, 
.pagination > .active > span:hover, 
.pagination > .active > a:focus, 
.pagination > .active > span:focus,
.open .dropdown-toggle.btn-primary,
.daterangepicker td.active, 
.daterangepicker td.active:hover {
    color: white !important;
    border-color: var(--primary) !important;
    background-color: var(--primary) !important;
}

/* embed title */
section header em,
h1 > em, h2 > em, h3 > em, h4 > em, h5 > em, h6 > em {
    font-style: normal;
    color: var(--primary);
}

/* Top Nav active/hover */
#topNav ul.nav > li.mega-menu > ul li:hover > a,
#topNav ul.nav > li.mega-menu > ul li.active > a,
#topNav ul.nav > li:hover:before,
#topNav ul.nav > li.active:before {
    background-color: var(--primary);
}
/* Top Nav color active */
#topNav .nav-pills.colored > li.active > a, 
#topNav .nav-pills.colored > li.active > a:hover, 
#topNav .nav-pills.colored > li.active > a:focus {
    color: var(--white);
    background-color: var(--primary-hover);
}

/* Misc */
.quick-links {
    font-weight: 500 !important;
}
.bg-primary,
.featured-box-minimal i.fa {
    background-color: var(--primary);
}

ul.list-icon li:before {
    color: var(--primary);
    font-size: 16px;
}
body.boxed #topBar {
    border-top: var(--primary) 4px solid;
}

.panel-epona {
    border: var(--primary) 1px solid;
}

.panel-epona > .panel-heading {
    background-color: var(--primary);
    color: var(--white);
}

/* Slider Captions */
.tp-caption.block_styleColor {
    background-color: var(--primary);
    color: var(--white);
}
.tp-caption.block_white {
    color: var(--primary);
}

/* flex slider */
.flexslider.flexFull .flex-direction-nav a:hover, 
.flexslider.flexContent .flex-direction-nav a:hover {
    background-color: var(--primary);
    color: var(--white);
}

/* essentials rewrite */
.alert.alert-default {
    border-left: var(--primary) 3px solid;
}

/* item box */
.item-box .item-hover .overlay {
    background-color: rgba(25,128,182,0.6);
}

/* normal state */
.sky-form .toggle i:before {
    background-color: var(--primary);
}

/* checked state */
.sky-form .radio input + i:after {
    background-color: var(--primary);
}
.sky-form .checkbox input + i:after {
    color: var(--primary);
}
.sky-form .radio input:checked + i,
.sky-form .checkbox input:checked + i,
.sky-form .toggle input:checked + i {
    border-color: var(--primary);
}
.sky-form .rating input:checked ~ label {
    color: var(--primary);
}

/* -------------------------------------------
   overrides
------------------------------------------- */
.refresh i:hover,
.refresh span:hover {
    color: var(--link-hilite) !important;
}
ul.side-nav > li.active > a {
    background-color: var(--primary-hover) !important;
}
ul.side-nav ul a {
    color: var(--primary);
}
.text-success {
    color: var(--gray-text);
}
a.text-success:hover,
a.text-success:focus {
    color: var(--primary);
}
.sky-form .fa-paperclip:hover {
    background-color: var(--primary) !important;
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    z-index: 2;
    color: var(--gray-text);
    background-color: var(--gray-bg);
    border-color: var(--gray-bdr);
}
table.dataGrid td a:hover,
table.dataGrid td a:active {
    color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    background-color: var(--gray-bg) !important;
    border-radius: 4px;
}
.pagination > li > input,
.pagination > li > button {
    color: var(--light);
}
.pagination > li.active > input,
.pagination > li.active > button {
    background-color: var(--primary);
    border-color: var(--primary);
}

/*-- callout w/ style color --*/
.callout.bg-primary,
.callout.bg-primary h2,
.callout.bg-primary h3,
.callout.bg-primary h4,
.callout.bg-primary p {
    color: var(--white);
    background-color: var(--primary);
}
.callout.bg-primary p {
    color: rgba(255,255,255,0.8);
}
.callout.bg-primary.arrow-up,
.callout.bg-primary.arrow-down {
    position: relative;
    padding: 30px;
}
.callout.bg-primary.arrow-down:after {
    content: ' ';
    position: absolute;
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid var(--primary);
    left: 50%; 
    margin-left: -10px;
    bottom: -20px;
}
.callout.bg-primary.arrow-up:after {
    content: ' ';
    position: absolute;
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid var(--primary);
    left: 50%; 
    margin-left: -10px;
    top: -20px;
}
body.boxed {
    background-color: var(--page-bg);
}