/* ==========================================================================
   Project:     Third Wave Digital Knowledgebase
   Date:        02/03/2021 - File created	
   Created by:  Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

/* ========================================================================== 
     Typography
========================================================================== */

body {background: #343A40; color: #444}
body,h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6, .btn {font-family: 'Roboto', sans-serif;margin-top: 0px }
h1, .h1 {font-size: 17px; font-weight: 300; letter-spacing: 3px;line-height: 1.4}
h2, .h2 {font-size: 24px; font-weight: 500}
h3, .h3 {font-size: 16px; font-weight: 700}

/* ==========================================================================
     Basic Elements
========================================================================== */

/* Links */
a {color: #007BFF;}
a:hover, a:focus {text-decoration:underline;}

/* Images */
img {max-width: 100%; height: auto;}

/* ==========================================================================
     Skip Nav
========================================================================== */	

.skip{position:absolute;top:-1000px;left:15px;width:auto;height:auto;text-align:center;overflow:hidden;transition:.25s;background:#343A40;width:auto;height:auto;overflow:visible;padding:10px;color:#fff;font-weight:700;font-size:12px;z-index:99;text-decoration:underline}
	.skip:active,.skip:focus,.skip:hover{left:15px;top:15px;color: #fff}

/* ==========================================================================
     Site Skin
========================================================================== */

header {}
     header img {width: 220px}

main {position: relative;overflow-x:hidden;background:#fff}
     main p {line-height: 1.6}

footer {background: #343A40}
     footer ul {font-size: 16px;}
     footer li { position:relative;padding: 0px; width: 44px;}
     footer li a {position:relative;color: #343A40;}
     footer li::before {z-index: 0;content: "";position: absolute;width: 30px;height: 30px;border-radius: 6px;background: white;position: absolute;top: -6px;left: 7px;-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);}
     footer li .fa {position: relative; z-index:1;}
     footer li a:hover, footer li a:focus {color: #000}
     footer hr {border-top: 1px solid rgba(255,255,255,.1)}

/* ==========================================================================
     Components
========================================================================== */

/* Alert */
.alert-wrapper {padding: 10px 35px 10px 10px; margin: 0px; border-top: none; border-left: none; border-right:none; position: relative;} 
     .alert-wrapper a {color:#a94442; text-decoration:underline}
     .alert-wrapper .btn-close-alert {box-shadow:none; padding: 0px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 10px; background:none; border:none; width: 25px; height: 25px}
     .alert-wrapper .btn-close-alert::before, .alert-wrapper .btn-close-alert::after {content: ''; height: 20px;border-left: 1px solid #a94442;position: absolute;left: 12px;top: 2.5px}
     .alert-wrapper .btn-close-alert::before {transform: rotate(45deg);}
     .alert-wrapper .btn-close-alert::after {transform: rotate(-45deg);}

/* Search */
.search-wrapper {position: relative;background: #fff}
     .homepage .search-wrapper {background: url(/img/bg-search.jpg) center center no-repeat; background-size: cover;}
     .homepage .search-wrapper, .homepage .search-wrapper .container-fluid {height: 300px}
     .search-wrapper form {position: relative; width: 100%}
     .search-wrapper label {}
     .search-wrapper input {background: #F5F7FA; border: none; box-shadow:none; height: 80px;font-size: 17px; }
     .search-wrapper input::placeholder {color: #343A40}
     .search-wrapper input:-ms-input-placeholder {color: #343A40}
     .search-wrapper input::-ms-input-placeholder {color: #343A40}
     .search-wrapper .btn { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);background:none; box-shadow:none;}
     .search-wrapper .btn-search {left: 5px;}
     .search-wrapper .btn-search img {}
     .search-wrapper .btn-voice {right: 5px;font-size: 12px; color: #666; text-transform: none;}
     .search-wrapper .btn-voice img {margin-right: 5px;}

.search-suggestions {background: #F3F7FB; border-radius: 2px; position: absolute; z-index: 1; top: calc(100% + 2px); overflow-y:auto; left: 0px; width: 100%; transition: all 250ms ease-out; opacity: 0; visibility: hidden;transition: all 500ms ease-out;-webkit-transform: translateY(-15px); -ms-transform: translateY(-15px);transform: translateY(-15px);}
     .search-suggestions::-webkit-scrollbar {-webkit-appearance: none;width:5px;}
     .search-suggestions::-webkit-scrollbar-track-piece {margin: 15px 0px;}
     .search-suggestions::-webkit-scrollbar-thumb {border-radius: 4px;background-color: rgba(0,0,0,.3);}
     .search-suggestions.active {opacity: 1; visibility: visible;-webkit-transform: translateY(0px); -ms-transform: translateY(0px);transform: translateY(0px);}
     .search-wrapper .text-muted {font-size: 13px; color: #999!important}
     .search-wrapper li {margin-bottom: 10px}
     .search-wrapper a {color: #333}
     .search-wrapper .btn-close-suggestions {box-shadow:none; padding: 0px; position: absolute; top: 22px; right: 10px; background:none; border:none; width: 25px; height: 25px}
     .search-wrapper .btn-close-suggestions::before, .search-wrapper .btn-close-suggestions::after {content: ''; height: 20px;border-left: 1px solid #999;position: absolute;left: 12px;top: 2.5px}
     .search-wrapper .btn-close-suggestions::before {transform: rotate(45deg);}
     .search-wrapper .btn-close-suggestions::after {transform: rotate(-45deg);}

.search-navigation {}
     .search-navigation li {position: relative;}
     .search-navigation .active a {color: #007BFF !important}
     .search-navigation .active::after {content:""; background: #007BFF; height: 2px; position: absolute; bottom: -3px; left: 0px; width: 100%;}

.pagination {}
     .pagination .btn {position: relative; height: 31px; width: 31px; position: relative }
     .pagination .btn-prev {margin-right: 5px; background: url(/img/icon-pagination-blue.svg) center center no-repeat #F5F5FA; background-size: 15px 15px; webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg);transform: rotate(-180deg);}
     .pagination .btn-prev:disabled {background: url(/img/icon-pagination-grey.svg) center center no-repeat #F5F5FA; background-size: 15px 15px; webkit-transform: rotate(0deg); -ms-transform: rotate(0deg);transform: rotate(0deg);}
     .pagination .btn-next {background: url(/img/icon-pagination-blue.svg) center center no-repeat #F5F5FA; background-size: 15px 15px;}
     .pagination .btn-next:disabled {background: url(/img/icon-pagination-grey.svg) center center no-repeat #F5F5FA; background-size: 15px 15px; webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg);transform: rotate(-180deg);}

.submenu {}
     .submenu h2 {font-weight: 400; font-size: 11px;  letter-spacing: 1.5px; color: #898989;margin-bottom: 30px;}
     .submenu hr {border-top: 1px solid #E6E6E6}
     .submenu ul li a {color: #444}
     .submenu ul li a:hover, .submenu ul li a:focus {}
     .submenu ul li {margin-bottom: 10px}
     .submenu ul li.active a {color: #007BFF; font-weight: 500}

.breadcrumb {background:none; font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 0px}
     .breadcrumb a {color: #898989}

.offcanvas-search {position: absolute; top: 0px;  z-index: 1; transition: all 500ms ease;right: calc(-90% - 80px); width: 90%;min-height: 210px;max-height: 550px;}
     .offcanvas-scroll {height: 250px; overflow-y:scroll;overflow-x:hidden;}
     .offcanvas-scroll::-webkit-scrollbar {-webkit-appearance: none;width:5px;}
     .offcanvas-scroll::-webkit-scrollbar-track-piece {}
     .offcanvas-scroll::-webkit-scrollbar-thumb {border-radius: 4px;background-color: rgba(0,0,0,.3);}
     .offcanvas-search .btn-close-search {position: absolute;}
     .offcanvas-search.active {-webkit-transform: translateX(calc(-100% - 80px)); -ms-transform: translateX(calc(-100% - 80px)); transform: translateX(calc(-100% - 80px));}
     
.btn-offcanvas-search {background: #fff; border-radius: 30px;box-shadow: 0px 0px 15px 0px rgba(0,0,0,.1); border: none;  transition:all  150ms ease;padding: 0px; position: absolute; z-index:1}
     .btn-offcanvas-search img {width: 45%} 
     .btn-offcanvas-search:hover, .btn-offcanvas-search:focus {-webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);box-shadow: 0px 0px 15px 0px rgba(0,0,0,.2); }
     .btn-offcanvas-search.active {background: url(/img/icon-close.svg) center center no-repeat; background-size: 25px 25px;}

/* ==========================================================================
     Templates
========================================================================== */

/* Search Article */
article main {min-height: 580px}
article section p {line-height: 1.9}
article section > p:first-child {font-size: 19px; font-weight: 300; line-height: 1.5; padding-left: 20px; border-left: 4px solid #007BFF; margin-bottom: 30px}
article section .row {margin: 50px 0px; border-bottom: 1px solid #eee;padding-bottom: 30px}
article section .row:last-child {padding-bottom: 0px; border-bottom: none; margin-bottom: 0px}
article li {margin-bottom: 10px;line-height:1.6}
article img {box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 20%); }

/* ==========================================================================
     CMS Classes & Components
========================================================================== */

/* Lists */
.list-blue {color:#007BFF; padding-left: 15px;margin-bottom: 0px}
     .list-blue li {margin-bottom: 10px}
     .list-blue a {color: #333}

/* Text */
.text-blue {color:#007BFF}

/* ==========================================================================
     Media Queries
========================================================================== */

@media (min-width: 0px) {
     /* Header */
     header .row {justify-content: center;}
     header img {margin-bottom: 15px;}
     
     /* Components */
     .search-wrapper input {padding: 0px 15px 0px 60px}
     .search-wrapper .btn-voice {display:none}
     .btn-offcanvas-search {width: 40px; height: 40px;top: 15px;right: 15px;}
     .offcanvas-search .btn-close-search { top: 20px; left: -20px}
}


@media (min-width:480px) {
     /* Components */
     .search-wrapper input {padding: 0px 145px 0px 60px}
     .search-wrapper .btn-voice {display:block}
}

@media (min-width: 576px) {
     /* Header */
     header .row {justify-content: flex-start;}
     header img {margin-bottom: 0px;}
}

@media (min-width:480px) and (max-width:767px) {.col-ms-1,.col-ms-10,.col-ms-11,.col-ms-12,.col-ms-2,.col-ms-3,.col-ms-4,.col-ms-5,.col-ms-6,.col-ms-7,.col-ms-8,.col-ms-9{float:left;position:relative;min-height:1px;padding-right:15px;padding-left:15px}.col-ms-12{width:100%}.col-ms-11{width:91.66666667%}.col-ms-10{width:83.33333333%}.col-ms-9{width:75%}.col-ms-8{width:66.66666667%}.col-ms-7{width:58.33333333%}.col-ms-6{width:50%}.col-ms-5{width:41.66666667%}.col-ms-4{width:33.33333333%}.col-ms-3{width:25%}.col-ms-2{width:16.66666667%}.col-ms-1{width:8.33333333%}.col-ms-pull-12{right:100%}.col-ms-pull-11{right:91.66666667%}.col-ms-pull-10{right:83.33333333%}.col-ms-pull-9{right:75%}.col-ms-pull-8{right:66.66666667%}.col-ms-pull-7{right:58.33333333%}.col-ms-pull-6{right:50%}.col-ms-pull-5{right:41.66666667%}.col-ms-pull-4{right:33.33333333%}.col-ms-pull-3{right:25%}.col-ms-pull-2{right:16.66666667%}.col-ms-pull-1{right:8.33333333%}.col-ms-pull-0{right:auto}.col-ms-push-12{left:100%}.col-ms-push-11{left:91.66666667%}.col-ms-push-10{left:83.33333333%}.col-ms-push-9{left:75%}.col-ms-push-8{left:66.66666667%}.col-ms-push-7{left:58.33333333%}.col-ms-push-6{left:50%}.col-ms-push-5{left:41.66666667%}.col-ms-push-4{left:33.33333333%}.col-ms-push-3{left:25%}.col-ms-push-2{left:16.66666667%}.col-ms-push-1{left:8.33333333%}.col-ms-push-0{left:auto}.col-ms-offset-12{margin-left:100%}.col-ms-offset-11{margin-left:91.66666667%}.col-ms-offset-10{margin-left:83.33333333%}.col-ms-offset-9{margin-left:75%}.col-ms-offset-8{margin-left:66.66666667%}.col-ms-offset-7{margin-left:58.33333333%}.col-ms-offset-6{margin-left:50%}.col-ms-offset-5{margin-left:41.66666667%}.col-ms-offset-4{margin-left:33.33333333%}.col-ms-offset-3{margin-left:25%}.col-ms-offset-2{margin-left:16.66666667%}.col-ms-offset-1{margin-left:8.33333333%}.col-ms-offset-0{margin-left:0}}

@media (max-width: 600px) {
     /* Components */
     .search-wrapper nav {overflow-x:scroll;overflow-y:hidden;margin-bottom: 5px;}
     .search-wrapper nav::-webkit-scrollbar {width: 7px;height: 7px; background: #F5F7FA;border-radius:4px}
	.search-wrapper nav::-webkit-scrollbar-thumb { border-width:0px;background: rgba(0,0,0,.1); border-radius:4px}
     .search-wrapper nav ul {width: 600px;}
}

@media (max-width: 767px) {
     /* Submenu */
     .submenu {visibility: hidden; opacity:0; overflow:hidden; height: 0px;background: #F3F7FB; transition: opacity 500ms ease}
     .submenu.active {visibility: visible;opacity: 1; overflow:visible; margin-bottom: 30px; padding: 30px;}
     .submenu.active ul {padding-bottom: 30px}
     .submenu ul {-webkit-column-count: 2; -moz-column-count: 2; column-count: 2;-webkit-column-gap: 10px; -moz-column-gap: 10px;column-gap: 10px;}
}

@media (min-width: 768px) {
     /* Bootstrap */
     .container-fluid {padding-left: 30px; padding-right: 50px}

     /* Templates */
     .search-article main > .container-fluid > .row > .col-sm-3 {background: #F3F7FB}
}


@media(min-width: 992px) {
     /* Components */
     .btn-offcanvas-search {width: 60px; height: 60px;top: 30px;right: 30px;}
     .offcanvas-search .btn-close-search { top: 20px; left: -80px}
   
}


@media (min-width: 1200px) {

}

/* ==========================================================================
     CMS
========================================================================== */	

/* Ckeditor */
.cke_combopanel {width: 300px !important;  height:300px !important}
.cke_panel_listItem * {float:none !important;text-align:left !important;margin:0px !important;text-transform:none !important; display: block !important; }
   
/* ==========================================================================
     Bootstrap
========================================================================== */	

/* Grid */
.container-fluid {max-width: 1200px}

/* Badges */
.badge.badge-light {background: #F5F5FA; border-radius: 5px; font-size: 10px; margin: 5px 5px 5px 0px;font-weight:600; color: #007BFF; transition: background .15s ease-in-out; padding: 5px 7.5px}
.badge.badge-light:hover, .badge.badge-light:focus {background: #E6E6E6; color: #007BFF}

/* Backgrounds */
.bg-blue {background: #007BFF}

/* Shadows */
.shadow-md {box-shadow: 0px 0px 15px 0px rgba(0,0,0,.2);}

/* Buttons */
.btn {font-size: 12px; text-transform: uppercase; padding: 6px 15px; border-radius: 2px; box-shadow: 0px 0px 5px 0px rgba(0,0,0,.2);}
.btn-secondary:focus {color: #fff}