:root {
	--primary: #002554;
	--secondary: #0d0039;
	--bluegrey: #ececeb;
	--darkgrey: #A5A5A7;
	--tertiary: #555;
    --tart: #93328e;
	--pink: #f357a0;
	--darkgreeen: #41c11e;
	--lime: #bbd330;
	--white: #FFF;
	--red: #e63322;
	--darkred: #8a1d40;
	--lightgrey: #E2E2E2;
	--murkeyyellow: #dbbc7a;
    --borderradius:5px;
}
.topDetails{width: 100%;
	height: 4rem;
	/* background-image: url(../images/transparent_black.png); */
	background-color: var(--primary);
    padding:.6rem 1rem;
	/*position: absolute;
	top: 0px;*/
}
.cookie-header.alert {bottom: 4rem; background-color: var(--bluegrey); font-weight: 300;}
.cookie-header.alert .btn{margin-top:1rem;}
.container {max-width: 1200px; width: auto;}
.the-bg {background-image: url(../images/brand/clearwater_landing_bg.jpg); background-size: cover; background-position: center; border-bottom: 2rem solid var(--secondary);}
.panel-footer .btn {margin: 2px;}
.unlogged {background-image: url(../images/brand/bg.jpg); background-size: cover; background-attachment: fixed; min-height: 100vh; }
.unlogged::before {content: "  "; position: absolute; z-index: 0; width: 100%; height: 100%; display: flex; background-color: #FFF; top:0; left: 0; opacity: .3;}
.login-content {padding-bottom: 8rem; background-color: #FFF;}
.login-content h1 {color: var(--primary); padding-top: 4rem;}
body{font-family: 'Axiforma', sans-serif; position: relative; background-color: #FFF;}
h1, h2, h3, h4, h5, h6 {font-family: 'publico_headline_webbold', sans-serif;}
.login-container {position: relative;}
.nav-btns {position: absolute; right:30px; top:-50px; z-index: 2;}
.black-holder {background-size: cover; background-position: top;}
.black-holder .modal {color: #000;}
.content-left{background-color: var(--primary); padding:5rem 3rem; border-radius: 15px; font-size:18px;}
.login-box {max-width:50rem; background-color: #FFF; padding: 4rem; margin:8rem auto;}
.login-box h2 {margin:0; padding: 0; margin-bottom: 2rem;}
.adjust-block {padding: 1rem 0 3rem 0;}
.adjust-block-large {padding:3rem 0 4rem 0;}
.bg-secondary {background-color: var(--secondary);}
.bg-grey {background-color: var(--bluegrey);}

.pageFooter{ width:100%; z-index: 10001; background-color:var(--primary); color: #fff; font-size:15px; text-align: center; padding:10px; position: fixed; bottom: 0; }
.pageFooter a { text-decoration: underline; color: #FFF;}
.pageFooter p {	margin: 0;}

.primary {color: var(--primary);}
.flex-contain {display: flex; align-items:center; justify-content: space-between;}
.flex-contain .navbar-clear {margin-right:-5rem;}
.unlogged .logos {padding:0; text-align: center; width: 380px;} .logos img {max-width:250px;}
.logos {padding:3rem 0; text-align: center; }
.the-100 {max-width:100%;}
.main-hold {display: flex; align-items: center; padding-bottom: 3rem;}
.main-admin-hold {justify-content: center;}
.the-login-panel{position:relative;}
.admin-login-panel{background-color: rgba(255,255,255,.6); border-radius: 15px; padding:15px;}
.the-generate-password-panel{position:relative; background-color: var(--primary); max-width:600px; max-height:600px; display: flex; flex-direction: column; justify-content: center; padding: 3rem;}

#loginForm input.form-control {position:relative; background-color: rgba(255,255,255,.8); border: none; border-radius:0; color: #000; padding: 2px 20px; height: 30px;}
#loginForm ::placeholder {  opacity: 1; /* Firefox */}

.the-login-panel-heading h4.the-login-panel-title {text-transform:none; color:#000; font-size:4rem; letter-spacing: 1px; text-align: center; margin-bottom:25px; }
.the-login-panel .form-horizontal .control-label {text-align:right; padding-right: 0; padding-top:4px; font-weight: 400;}
.btn-login {color:#000;}
.btn-login.btn-primary {background-color:var(--primary) !important; color:#FFF; border-radius:3px; text-transform:none; font-size:14px; font-weight:bold; padding:6px 10px;}
.btn-login.btn-primary:hover {background-color:var(--tart) !important; color:#FFF !important;}

.btn.btn-light {background-image: none; background-color: #FFF; color: var(--primary); border:1px solid var(--primary);}
.btn.btn-light:hover {background-color: var(--primary); color: #FFF;}
.btn-login.btn-secondary {background-color:var(--secondary) !important; color:#FFF; text-transform:none; font-size:14px; font-weight:bold; padding:6px 10px; margin-right: -15px;}
.btn-login.btn-secondary:hover {background-color:var(--primary) !important; color:#FFF !important;}
.form-horizontal .flex-group {display: flex; margin-right: 0; margin-left: 0;}
.flex-group > label {background-color: var(--secondary); color:#FFF; font-weight: 400; width:120px; text-align: center !important;}
.flex-group > div {flex-grow: 1;}
.form-horizontal .flex-group:after {content:" "; width:10px; background-color: var(--secondary); height: 30px;}
.flex-group p {display: block;}

.register-link.btn-primary {border:1px solid #FFF !important;}
.cap input {position:relative; left:-10px;}
.btn-hold {padding-right:30px; padding-left:6px; margin-top: -10px; margin-bottom: 20px;}
.btn-hold p {margin-top: 10px; font-size:18px; padding-right: 40px;}

.nav-row {display: flex; flex-wrap: wrap; justify-content: flex-start;}
.nav-item {width:21%; margin:1.5%; font-size:2rem; border:1px solid var(--primary); font-weight:500; text-align: center; background-color: #fff; padding: 2rem; color: var(--primary); text-transform: uppercase; transition:all ease .3s;}
.nav-item-double {width:45%; background-color: var(--primary); color: #FFF;}
.nav-item img {max-width: 60px; padding: 0 1rem; margin-bottom: 1rem; filter: invert(0); display: block; margin: auto; margin-bottom: 1rem;}
.nav-item-double img {filter: invert(100%);}
.nav-item:hover {text-decoration: none; background-color: var(--primary); color: #FFF;}
.nav-item:hover img {filter: invert(100%);}
.nav-item-double:hover {background-color: var(--tart);}
.nav-row h2 {font-weight: 400; color:var(--primary);}
.link-row {margin-top: 2rem;} .link-row a {display: block;margin-bottom: 20px; font-size:20px;}
.link-row a img {max-width: 30px; margin: 0 10px;}
.bot-color {border-bottom: 2px solid var(--secondary);}
.topShadow.bot-color {border-bottom-width: 10px;}

.topnav {position: absolute; right: .5rem; top:0 ;}
.topnav--link {font-size: 15px; text-transform: uppercase; padding: 6px 1rem 4px 1rem; background-color: var(--primary); color:#FFF; margin: 1rem .5rem 1rem 0; display: inline-flex; align-items: center; transition: all ease .3s;}
.topnav--link img {width:15px; filter: invert(1); transition: all ease .3s; margin-right: .6rem; position: relative; top:-2px;}
.topnav--link:hover {color: white; background-color: var(--tart); text-decoration: none;}
.topnav--link:hover img {filter: invert(1);}
.report-menu{
    cursor:pointer
}
.report-menu.active{
    color: var(--primary);
    background-color: #fff;
    font-weight: bold;
}

.learner-nav {margin: 0;}

.lv2titles { margin-bottom: 3rem;}
.lv2titles h3, .lv3 h2 {font-size: 4rem; margin-top: 10px;} .lv2titles h6 {font-size: 16px; font-weight: 300;}
.lv2 {display: flex; flex-wrap: wrap; margin-bottom: 5rem; justify-content: stretch;}
.lv2--point {width:30%; position: relative; color: #000; margin:4rem 1%; padding: 0 1rem 0 2rem;}
.lv2--point img {border-radius: 50%; width: 100px; height: 100px; border: 2px solid white; filter: brightness(1); margin-right: 10px; position: relative; z-index: 2; transition: all ease .3s;}
.lv2--point p {position: absolute; bottom: 10px; width:100%;}
.lv2--point p .ti {display: block; margin-left: 110px ; margin-bottom: 8px; transition: all ease .3s; width:195px;}
.lv2--point p .st {display: inline-block; width:250px; margin-left: 20px; padding: 5px 15px 5px 90px; text-transform: uppercase;  background-color: #c8c8ca; font-weight: 500; transition: all ease .3s;}
.lv2--point p i {background-color: #495354; color:#FFF; padding:8px 10px; position: relative; top:1px; transition: all ease .3s; left:0;}
.lv2--point:hover p .st { background-color: var(--secondary); color:#FFF;}
.lv2--point:hover p i {transition-delay: .1s; background-color: transparent; color:#495354; left:-5px;}
.lv2--point:hover img {filter: brightness(1.1); border:2px solid var(--secondary);}


.lv3 h2 {background-color: var(--secondary); color: white; padding: 10px 5rem 10px 20px; text-align: center; margin: 0; font-size: 4.5rem;}
.lv3-banner {display: flex; justify-content: center;}
.lv3-banner > div {display: flex; flex-direction: column;  justify-content: center; background-color: var(--secondary);}
.lv3-banner > div.lv3-image {width: 40%;}
.lv3-banner > div.lv3-details {width: 60%;}
.lv3-banner > div > img {max-width: 100%;}
.lv3-details h2 {font-size: 4rem;}
.lv3-grey.lv3-banner > div {background-color: var(--bluegrey); color: #000;}
.lv3--rec-title {font-weight: 700; color: var(--primary); font-size: 2.3rem;}
/*.lv3top {display: flex; align-items: stretch; flex-wrap: wrap; justify-content: space-between;}
.lv3top div {width:48.5%; margin: 20px 0;}
.lv3top > div:first-child {background-color: #FFF; padding: 2rem; padding-top: 3rem; text-align: center; font-size: 16px; line-height: 27px;}*/
.lv3-descript {margin-bottom: 3rem; font-weight: 300;}
.lv3-details {background-color: var(--secondary); color: #FFF; padding:2rem 5rem;}
.lv3-details a {align-self: flex-start;}
.lv3top > div:first-child p {margin-bottom: 2rem;}
.lv3-points {display: flex; flex-wrap: wrap; margin-bottom: 7rem; /* justify-content: space-evenly;*/}
.lv3-point {font-weight:600; width:45%; margin:3rem 2.5%; display: flex; background-color: var(--darkgrey); align-items: center; color: black; text-decoration: none; transition: all ease .3s;}
.lv3-point > div:not(.lv3--image) {padding: 2rem;}
.lv3-point > div:not(.lv3--image) a {margin-bottom: -1rem; display: block;}
.lv3-point.active{background-color: var(--secondary); color: var(--white);}
.lv3-point.active > div:not(.lv3--image) a {color: var(--white) !important;}
.lv3--image {background-color: #c8c8ca; overflow: hidden; transition: all ease .3s; flex-shrink: 0; flex-grow: 0; position: relative;}
.lv3--image img {filter: brightness(1); transition: all ease .3s;}
.lv3-point .badge {font-size:15px; font-weight: 600; padding: 6px 7px 3px 7px}
.lv3-point:hover .lv3--image {background: #c8c8ca;}
.lv3-point:hover .lv3--image img { filter: brightness(1.2);}
.lv3-point a {color: var(--primary);}
.lv3-point a:hover {color: var(--tart); text-decoration: none;}
.lv3--contain {display: flex; align-items: center;}
.lv3--contain img {max-width:100px;}
.badge-complete {padding-right:4rem; margin-right: -3rem;}
.lv3-point .to-print {background-color: var(--tertiary); padding:1px 10px; color: #FFF; border-radius: 0 10px 10px 0;}
.lv3-point .to-print:hover {background-color: var(--primary); color: #FFF;}
.btn.btn-primary.btn-pinned {background-color: var(--tart) !important; padding:5px 16px !important;}
.btn.btn-primary.btn-unpinned {padding:5px 16px !important;}
.btn.btn-primary.btn-pinned img, .btn.btn-primary.btn-unpinned img  {max-width: 2rem; filter: invert(1);}
.btn.btn-primary.btn-unpinned:hover {background-color: var(--tart) !important; color: #FFF;}
.lv3--desc {padding-left: 3rem;}
.tags-holder {height: 70px; overflow: hidden; width:90%;}
.tags-holder a {display: inline-block;}
.btn.tags-more {font-size: 1.1rem !important; padding:4px 10px 2px 10px !important; margin-top: 1rem;}
.tags-more i {margin-left: 5px;}

h3.dark {font-size: 16px; font-weight: 400; background-color: var(--secondary); color: #FFF; padding: 10px; margin-bottom: 20px;}
.dark .pull-right a {margin-left: 5px;}
.panel-body .form-horizontal .control-label {font-weight: 500; font-size: 16px;} 

.one-block {background-color: #c7c7c7; color: #000; padding:10px;}
.one-block h3 {font-size: 16px; font-weight: 500; margin: 0; padding: 0;}
.one-block h3::after {content: " "; display: table; clear: both;}
.one-block a {color: #000; transition: all ease .3s; margin-left: 5px;}
.one-block a .glyphicon.glyphicon-eye-open {opacity: .4; transition: all ease .3s;}
.one-block a:hover {color: var(--secondary);}
.one-block a:hover .glyphicon.glyphicon-eye-open {opacity: 1;}
.two-block {margin-bottom: 20px;}
.two-block > div {padding: 6px 10px; background-color: #FFF; border-bottom: 1px solid #DDD;}
.two-block a {color: var(--secondary); transition: all ease .3s;}
.two-block a:hover {color: #000;}

.the-left-bar {margin-left: -30px;}
.nav-stacked a {background-color: #818181; color: #FFF;}
.nav.nav-stacked > li > a:hover, .nav.nav-stacked > li > a:focus {color: #FFF !important;}
.nav-stacked > li.active > a, .nav-stacked > li:hover > a { background-color: var(--secondary); color: #FFF !important;}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {background-color:var(--primary);}
.table-bordered > tbody > tr:hover > td {background-color:var(--bluegrey);}
.table-bordered th {background-color:var(--primary); color:#FFF; font-weight: 500;}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {background:none; background-color: var(--secondary);}
.pageContent .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus, .dropdown-menu>li:hover>a, .pageContent .btn-primary {background:none;
    background-color: var(--secondary); color:#FFF;}
.pageContent .btn-primary:hover {border:none;}
a.btn.btn-primary, a.btn.btn-secondary {background-image:none; background-repeat:no-repeat; background-color:var(--primary); color:#FFF; border-radius:0px; border:none; padding:5px 20px; font-size:15px; font-weight:500; text-transform:none; box-shadow:none;}
.btn.btn-primary:hover {background-color: #a6a6a6; color: #000;}

a.btn.btn-secondary {background-color:var(--secondary); color:#FFF;}
.btn.btn-secondary:hover {background-color: #a6a6a6; color: #000;}

.navbar-clear {margin-bottom: 0;}
@media screen and (max-width: 991px) { .navbar-clear { clear:both; float:none; margin-top:0; right:0;} }
.navbar-clear .navbar-nav > li > a {color:#000; background-color:#a6a6a6; margin-right: 10px; font-weight: 400; font-size: 14px; text-transform: uppercase;}
.navbar-clear .navbar-nav > li.active > a, .navbar-clear .navbar-nav > li:hover > a { background-color: var(--secondary); color: #FFF;}
.navbar-clear .nav .open > a, .navbar-clear .nav .open > a:hover, .navbar-clear .nav .open > a:focus { background-color:#FFF; color: var(--primary);}

/* learner dark nav */
.flex-contain .navbar-clear .dropdown-menu li > a, .flex-contain .navbar-nav > li > .dropdown-menu {background-color: #a6a6a6; color: #000; border-radius: 0; margin:0; padding: 0;}
.flex-contain .navbar-clear .dropdown-menu li > a {border-bottom: 1px solid rgba(0,0,0,.3); padding:6px 20px;}
.flex-contain .navbar-clear .dropdown-menu li:last-child > a {border-bottom: none;}
.flex-contain .navbar-clear .dropdown-menu li > a:hover  {background-color: var(--secondary); color: #FFF;}
.flex-contain .navbar-clear li > a:hover img, .navbar-clear .nav .open > a:hover img, .navbar-clear .nav .open > a:focus img, .navbar-clear .navbar-nav > li.active > a img {filter: invert(1);}

/* admin dark nav */
.admin-contain {margin-top: 2rem; margin-bottom: 2rem;}

/* progress bullets */
.pr-flex {background-color: #e0e0e0; padding:10px 20px; display: inline-block; margin:10px 0; border-radius: 5px; color: #344552; font-size: 16px; float: right; clear: both;}
.pr-flex i {margin-left: 10px; font-size: 14px;}
.pr-flex i.completed-circle {color:var(--primary)}
.pr-flex i.incomplete-circle {color:var(--secondary)}
.pr-flex > div {display: flex; justify-content: space-between;}
.pr-flex .lab {white-space: nowrap;}

.menu-tile{margin-bottom: 0; border-radius:0; padding:5px 15px; margin-top:10px;}
.dropdown-menu {min-width:210px;}
#loginerroralert{font-size: 13px; bottom: 10rem;}

/* resources */
.a-resource {background-color: #f2f3f4; max-width:100%;  margin-bottom: 10px;}
.a-resource > div {padding:10px 40px 20px 40px; display: flex; align-items: center; justify-content: space-between;}
.a-resource > div > div:first-child {padding-right: 40px;}
.a-resource h3 { font-weight: 900; color: var(--tertiary); font-size:2.6rem; margin:0; padding: 20px 0 10px 0;}
.a-resource p {font-size:2rem !important; color: var(--tertiary);}
.flex-resource {display:flex; align-items: flex-end; justify-content: flex-end;}
.flex-resource p {align-self: flex-start;}
.flex-resource a {background-color: var(--primary); border:2px solid var(--primary); padding:1rem; border-radius: 50%; color: #FFF; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; margin-top:-10px;}
.flex-resource a img {max-width: 40px; filter:invert(1); transition: all ease .3s;}
.flex-resource a:hover {color: var(--primary); background-color: #FFF; text-decoration: none;}
.flex-resource a:hover img {filter: invert(0);}

/* learning journey begin */
button.btn.filter-button {padding: 1px 10px; text-transform: uppercase; font-size: 1.3rem; border-radius: 0; border: none;}
#jrn-total {display:flex; flex-direction: row; flex-wrap:wrap; margin:0px -15px;}
.journey-block {color:#000; margin-bottom:3rem; position:relative;}
.journey-closer {position:absolute; width:10px; left:0; bottom:0; height:99px; background-color:#FFF; z-index:3; display:none;}
.journey-block .title {border-radius: 0px; border-bottom: 1px solid var(--secondary);}
.journey-block .title h3 {margin:0px; font-size: 2.6rem; color: var(--tertiary); font-weight: 900; padding-bottom: 3rem;}
.journey-block .title h3 .badge {position:relative; top: -5px; margin-left:5px;}
.journey-block .title h6 {color: var(--primary); font-size: 18px; font-weight: 900; margin-bottom:5px;}
.journey-block .the-progress-bar { background-color:#dcdcdc; color:#000; font-weight:300; font-size:14px; padding:1px 5px 2px 5px; margin:10px 0px; position:relative;}
.journey-block .the-progress-bar .the-complete-bar {width:40%; position: absolute; top:0; left:0; background-color:#9C0; height:100%; z-index:1;}
.journey-block .the-progress-bar .pc {position:relative; z-index:2;}
.journey-block .badge {border-radius:3px; padding:2px 5px; text-transform:uppercase; font-weight:300; font-size:12px;}
.title { /*border-left:10px solid #39C; */border-bottom:none;}
.learning-journey {margin-bottom: 5vw;}
.agency img {max-height:70px; margin-top:40px;}

#bundle_accordion h4 {padding-top:5px; color:var(--tertiary); font-size:2.4rem; line-height: 2.8rem; font-weight: 900; display: flex; align-items: center;} 
#bundle_accordion .module-data h4 {margin-bottom:8px; flex-basis: auto; flex-grow: 1;}
.alert{border:1px solid rgba(255,255,255,.6); border-radius:0;}
.alert.alert-dark {background-color:var(--primary); color:#FFF;} .alert.alert-light { color:#FFF; background-color:var(--primary);} .alert-black {background-color:#393534; color:#FFF !important;} .alert-progress {background-color:#f5e248; color:#000;}
.alert-progress h5 {color:#000;} .alert-black h5, .alert-dark h5, .alert-light h5 {color:#FFF;}
.alert.alert-info-dark{background-color:var(--primary)}
.panel-title > a {color:#FFF;} .panel-title a:hover {color:var(--primary);}
.block-description { padding:20px 20px 0 20px; color: #000}
.a-block {position: relative; z-index: 40; display:flex; align-items:stretch; align-content:stretch; flex-wrap:wrap; flex-direction:row;}
.a-module {width:100%; display:flex; flex-direction:column; align-content:stretch; align-items:stretch; justify-content:space-between; border-radius: 5px; overflow: hidden;
background: #e0e0e0;
margin-bottom:15px; margin-top:15px; position:relative;}
.a-module h4 {margin-top:0; margin-bottom: 5px;}
.a-module .left-bar {position:absolute; width:30px; left:-30px; top:65px; /*border-bottom:10px solid #39C;*/ display:none; z-index:2;}
.a-module .right-bar {position:absolute; width:30px; right:-30px; top:65px; /*border-bottom:10px solid #39C;*/ display:none; z-index:2;}
.journey-block .a-block:last-child .a-module .right-bar {display:none;}
.left-bar img {position:absolute; top:-6px; right:-19px;}
.a-module .details {position: relative; padding-top:50px;}
.a-module .details a:hover {color:var(--secondary);}
.a-module a {display:block; color: var(--primary); text-decoration: none;}
.a-module a span.more {text-decoration: underline;}
.a-module .module-data {padding:20px 28px; position:relative; font-weight: 600; display: flex; flex-direction: column; flex-grow: 1; align-items: stretch;font-size: 20px; line-height: 23px;; font-weight: normal;}
.a-module .i-bg {width: 25px; height: 20px; display: flex; position: absolute; right: 10px; top:5px; align-items: center; justify-content: center; transition: all ease .3s; font-size: 24px;display:none; }
.a-module .i-bg i {color:#FFF;} 
.a-block + .clearfix {/*border-bottom:10px solid #39C;*/ position:relative; margin:0px -15px;}
.blocker {border-left:10px solid #252525; height:15px; width:10px; position:absolute; bottom:0px; left:-10px;}
.blocker-right {/*border-right:10px solid #39C; */height:15px; width:10px; position:absolute; bottom:0px; right:0px;}
/* learning journey end */

/* launch buttons */
.a-module .launch {text-transform:none; font-weight: 600 !important; padding:14px 30px; background-color:var(--red); color:#FFF; font-size:21px; border-radius:4px; margin:0 20px 20px 27px; display: inline-block; align-self: flex-start;}
/*.a-module .launch.launch-completed {background-color:var(--primary); color:#FFF;}
.a-module .launch.launch-failed {background-color:var(--red); color:#FFF;}
.a-module .launch.launch-progress {background-color:#fddf0b; color:#000;}
.a-module .launch.launch-progress .i-bg i {color:#000;}*/
.a-module .launch:hover {background-color:var(--secondary); color:#FFF;}
.a-module .launch:hover .i-bg i {color: #000;}
/*.a-module .launch:hover .i-bg {transform:scale(.8,.8) rotate(45deg);}
.the-no {position:absolute; right:0; bottom:5px; height:20px; width:20px;}
/* launch buttons end */

/* stats */
.stat.COMPLETED {color: #28724F !important;}
.stat.IN-PROGRESS {color: #E57200 !important;}
.stat.PASSED {color: #28724F !important;}

/* labels */ 
.label-danger {background-color: #4B384C;}
.label-warning {background-color: #005670;}
.label-success {background-color: #28724F;}
.label-default {background-color: #85B09A;}
#divModulesTagHolder .label {margin:2px;}
.label-danger:hover, .label-warning:hover, .label-success:hover, .label-default:hover {background-color: var(--secondary) !important;}

/* learner side */
.admin-control-block.learner{background:none; background-color: #e0e0e0; border:none; border-radius: 0; box-shadow: none; padding:2rem 10px; margin-bottom:3rem;}
.btn.btn-primary.btn-blue, .learner-container .input-group-addon.btn.btn-default  {background:none; border:2px solid var(--primary); background-color: var(--primary); font-size: 18px; color:#FFF; padding:12px 15px; border-radius: 5px; margin-right: 10px; text-transform: none; width:auto;}
.btn.btn-primary.btn-blue.btn-active {border:2px solid var(--primary); background-color: #FFF; color: var(--primary);}
.btn.btn-primary.btn-blue:hover, .learner-container .input-group-addon.btn.btn-default:hover {background-color: var(--secondary);border:2px solid var(--secondary); color:#FFF;}
.learner-container .input-group-sm > .form-control{height:52px; font-size:16px; padding: 5px 10px; margin-right: 10px; border-radius: var(--borderradius);}
.learner-container .input-group-addon.btn.btn-default {margin-right: 10px; display: inline-block; padding:10px 17px; height:auto; font-size: 18px; text-shadow: none; font-weight: 700;}
.learner-container .input-group-addon.btn.btn-default .glyphicon {top:3px; margin-right: 5px;}
.learner-container .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {border-radius: 5px; display: inline-block; float: none; margin-right: 10px;}
.learner-container .input-group-sm > .form-control.large-input {width:40%;}
.learner-container .input-group {display: block;}
label.managed-label {font-weight: 900; text-align: left; font-size:16px !important; padding-bottom: 0 !important;}
.flex-row-bottom {display: flex; align-items: flex-end;}
.btn-group.managed-btn-group {padding-bottom: 6px;}
.btn-group.managed-btn-group > .btn:last-child:not(:first-child) {border-radius: var(--borderradius);}

.footer-nav-btns {padding:2rem 30px 1rem 30px; border-top: 1px solid #e0e0e0;}


/* progress in learning journey */
.glyphicon-stop {transform: rotate(-30deg);}
.glyphicon-stop{color:#E2E2E2; margin-right:5px;} .glyphicon-stop.green {color:var(--primary);} .glyphicon-stop.yellow {color:#ffcc00;}  .glyphicon-stop.red {color:var(--red);} 
.progress {background-image:none; background-color:var(--primary);}
.progress-bullets {padding:12px; font-size:12px; color:#BBB;} .progress-bullets i {margin-left:3px;}
.progress-bullets .green {color:var(--primary);} .progress-bullets .yellow {color:#FCCA03;}

/* badges */
.details .badge {padding: 11px 13px; font-size:20px; position: absolute; top:0; border-radius: 4px; text-transform: uppercase; color:#FFF;}
.badge.badge-progress {background-color:var(--darkgreeen);}
.badge.badge-failed {background-color:var(--secondary);}
.badge.badge-completed {background-color:var(--primary);}
.badge.badge-not-started {background-color:#999;}
.badge.badge-access-status {background-color:var(--primary);}
.badge.badge-resetdate {background-color:var(--red);}
/* badges end */

/* dashboard summaries */
#dashboardTabContent .pull-left h4 {margin-left: -15px;}
.tab-content-style {margin-top:0;}
.blockdiv {border-radius: var(--borderradius); padding:10px 20px 10px 20px; margin-bottom: 15px; position: relative; background-color: #CCC; cursor: default; color: var(--white); transition:all ease .2s;}
.blockdiv.blockdiv-total{background-color: var(--tertiary); color: #FFF;}
.blockdiv.blockdiv-completed{background-color: var(--secondary);}
.blockdiv.blockdiv-pending{background-color: #818181;}
.blockdiv.blockdiv-progress{background-color: rgb(193, 214, 131); color: #000;}
.blockdiv.blockdiv-login{background-color: #FFF; color:#000; border:1px solid #CCC;}
.blockdiv.blockdiv-module{background-color: var(--darkgreeen); color:#FFF;}
.blockdiv.blockdiv-module-cs0{background-color: #818181; color:#FFF;}
.blockdiv.blockdiv-module-cs1{background-color: var(--darkgreeen); color:#FFF;}
.blockdiv.blockdiv-module-cs2{background-color: var(--primary); color:#FFF;}
.blockdiv.blockdiv-module-cs3{background-color: var(--secondary); color:#FFF;}
.blockdiv.blockdiv-module-cs4{background-color: var(--primary); color:#FFF;}
.blockdiv h5 {width:90%; margin:6px;}
.blockdiv.blockdiv-progress h5 #t_lj_count {color: #000;}
.blockdiv span {display: block; font-weight: normal; }
.blockdiv span.the-data {font-size:3.3rem;  font-weight: 400;}
.blockdiv.blockdiv-module span.the-data {font-size:2.4rem;}
.blockdiv.blockdiv-module h5  {width:80%;}
.blockdiv i {position: absolute; right:20px; top:30%; font-size:3rem; width:40px; text-align: center; transition:all ease .3s; }
/* .blockdiv:hover {background-color: #CCC; color:#000; transition: all ease .6s;}
.blockdiv:hover i {right:30px;} */
.learner-heading { font-weight:bold; margin:2rem 0 4rem 0; font-size:3.5rem; color:var(--tertiary);}
.relt {position: relative;}
.agency {position: absolute; right:20px; top:0; transform:translateY(-30%);}

/* assessment */
#ua_assessment_container .list-group-item, #ua_assessment_container .list-group-item.active, #ua_assessment_container  .list-group-item.active:hover, #ua_assessment_container  .list-group-item.active:focus {padding:10px 15px;}
#ua_assessment_container .list-group-item .glyphicon {padding:4px 10px; width:35px;}
.flex-contain .nav .caret {color: #000 !important; border-top-color: #000 ; border-bottom-color: #000 ;}
.flex-contain .nav .active > a .caret, .flex-contain .nav .active > a:hover .caret, .flex-contain .nav .active > a:focus .caret, .flex-contain .nav a:hover .caret {color: #FFF !important; border-top-color: #FFF ; border-bottom-color: #FFF ;}
.course-seq-badge{background-color: var(--primary); color: #fff; width: 40px; padding:8px 0 5px 0; text-align: center; position: absolute; left:5px; top: 5px;}

.course-start-date-badge{color: var(--primary); font-size: 1rem; width: 40px; padding:8px 0 5px 0; text-align: center; position: absolute; right:5px; top: 5px;}
.course-start-date-nfo{color: var(--white); font-size: 1rem; margin-bottom: .6rem;}
.module-status-record {margin-bottom: .6rem;}
.duration {font-size:1.25rem;position: absolute; bottom: .5rem; width: 100%; text-align: center;}
.spn-block-status{ font-size: 1.25rem;}
.btn.btn-more {background-color: var(--pink); color: var(--white); padding:3px 10px 2px 10px; font-size:1rem; display: block; max-width:90px; margin-top: 2rem; margin-left: auto; margin-right: 0;}
.btn.btn-more i {position: relative; bottom: -2px;}
@media screen and (max-width: 1100px) { 
    .main-hold {flex-wrap: wrap; flex-direction: column;}
    .page-content{margin-top: 0;}
    .flex-contain .navbar-clear {margin-right:0;}
}

@media screen and (max-width: 991px) { 
    .the-login-panel {width:70vw; height: 70vw;}
    .black-holder h1 {margin-top: 5rem;}
    .nav-btns {top:-10px;}
    .logos {text-align: left; padding-left: 1.5rem;}
    .logos img {margin-left:0px;}
    .footer-nav-btns a {margin-bottom: 10px; margin-right: 10px;}
    .footer-nav-btns {padding:20px 10px; padding-bottom: 0;}
    .pr-flex {float: left; clear: both; margin-top:-10px; margin-bottom: 30px;}
    .lv2 {justify-content: center;}
    .lv2--point {width: 40%;}
    
}

@media screen and (max-width: 768px){
    .link-row a {font-size:18px;}
    .a-block {width:100%; margin:0 10px;}
    .journey-block .title h3, .journey-block .title h6 {padding-left: 10px; padding-right: 10px;}
    .learner-container .input-group-sm > .form-control.large-input {width:100%; margin-bottom: 10px;}
    .buttons-mobile {padding-left:23px;}
    .flex-row-bottom {display: block;}
    .managed-btn-group {padding-left:4px !important; padding-top:10px;}
    .flex-contain {display: block;}
    .flex-contain .nav {padding: 0 10px;}
    .flex-contain .nav > li {margin-bottom: 10px; display: inline-block;}
    .flex-contain .nav > li a {display: block;}
    .agency {position: static; text-align: left; margin:0 10px;}
    .navbar-nav .open .dropdown-menu {position: absolute;}

    .the-login-panel {width:90vw; min-height: 90vw; max-height: 100%;}
    .the-login-panel {width:auto; height: auto; min-width:auto; min-height: auto; max-width: auto; max-height: auto; border-radius:15px; margin-left:auto; margin-right: auto;}
    .login-box {width:100%; padding:2rem;}
    .btn-hold {padding: 0;}

    .nav-item {width:100%; margin: 0 0 15px 0; font-size: 1.5rem;}
    .nav-item img {max-width: 60px;}
    .lv2 {justify-content: center;}
    .lv2--point {width: 350px;}
    .lv2titles h3, .lv3 h2 {font-size: 23px;}
    .lv3top {margin: 0 0 3rem 0;}
    .lv3top div { margin: 0; width: 100%;}
    .lv3top .lv3--contain div {width: auto; align-self: flex-start;}
    .lv3-point {width:90%; margin: 5%; display: block;}
    .lv3--image img { width: 100%;}
    .lv3-banner, .lv3-banner > div {display: block;}
    .lv3-details {padding-top: 3rem; padding-bottom: 5rem;}
    
    .lv3-banner > div.lv3-image {width: 100%;}
    .lv3-banner > div.lv3-details {width: 100%;}

    .logos {padding: 0; padding-left: 3rem;}

    .topnav {position: relative; text-align: right;}
}

@media screen and (max-width: 500px){
    .lv2--point {margin: 4rem auto;}
}