/* CSS Document */

body {
	font-family: 'Avenir', sans-serif;
	font-size: 17px ;
  	padding-top: 80px;
	-webkit-font-smoothing: antialiased;
	color:  #FFF;
	color: var(--body-font);
	background:  #8996A0;
	background: var(--body-bg-color);
	min-height: 100vh;
	position: relative;
	margin: 0;
    padding-bottom: 354px;
}

footer {
	bottom: 0;
    width: 100%;
    z-index: -1;
}


body.staticHeader {
  	padding-top: 0px;
}


.homenav {
	background-color: #FFF;
	background-color:var(--navbar-color);
}

.navbar {
    height: 80px;
	box-shadow: 0px 1px 5px rgba(51, 51, 51, 0.3);
	margin-bottom: 0px;
     border-radius: 0;
}

.logo-img-header {
	width: 150px;
}

.help-icon {
	float:right;
	width:50px;
}

.ah {
	font-family: 'Avenir-Heavy', sans-serif;
}

.text-lb {
	color: #474b56;
}


.text-w {
	color: #FFF;
}

.text-lg {
	color: #2b2f31	;
}

.text-o {
	color: #ecac2e;
}
.text-g {
	color: #848484;
}
.text-r {
	color: #b24444;
}
.text-green {
	color: #449d44;
}

.text-blue {
	color: #49a3b3;
}

.orange-link {
	text-decoration: none;
}
.orange-link:hover {
	color: #e89a00;
	text-decoration: none;
}
.green-link {
	text-decoration: none;
}
.green-link:hover {
	color: #3d733d;
	text-decoration: none;
}

.blue-link {
	text-decoration: none;
    cursor: pointer;
	color: #49a3b3;
}
.blue-link:hover {
	color: #65b0f3;
    cursor: pointer;
	text-decoration: none;
}


.red-link {
	text-decoration: none;
    cursor: pointer;
}
.red-link:hover {
	color: #942222;
	text-decoration: none;
}


.grey-link {
	text-decoration: none;
}
.grey-link:hover {
	color: #000;
	text-decoration: none;
}

.white-link {
	text-decoration: none;
}
.white-link:hover {
	color: #eee;
	text-decoration: none;
}


h1 {
	font-family: 'Avenir-Heavy', sans-serif !important;
	font-size: 60px  !important;
	font-weight: 800 !important;
}

h2 {
	font-size: 28px  !important;
	line-height: 1.29 !important;
}

h3 {
	font-size: 17px  !important;
	line-height: 1.41 !important;
}

h4 {
	font-family: 'Avenir-Heavy', sans-serif !important;
	font-size: 40px !important;
	font-weight: 900 !important;
}

h5 {
  font-size: 22px !important;
  line-height: 1.55 !important;
}

h6 {
  font-family: 'Avenir-Heavy', sans-serif !important;
  font-size: 29px !important;
  font-weight: 900 !important;
  line-height: 1.03 !important;
  letter-spacing: 1px !important;
}



.f-white{
	color: #ffffff !important;
}

.f-blackish {
	color: #474b56 !important;
}


.large-btn {

    vertical-align: middle;
	height: 50px;
	border-radius: 100px;
	font-family: 'Avenir', sans-serif;
	font-size: 18px;
	letter-spacing: 0.2px;
	text-align: center;
	color: #ffffff;
	-moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px;
    text-shadow: none;
    -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
    -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}


.btn-fleet-primary {
	color: #FFF;
	color: var(--btn-primary-font);  
	background: #df7a00;
	background: var(--btn-primary-bg);
}



.btn-fleet-primary:hover { 
	color: #FFF; 
	color: var(--btn-primary-font-hover); 
	background: #FF7800;
	background: var(--btn-primary-bg-hover);  
	border: 1px solid #FF7800;
	border: 1px solid var(--btn-primary-bg-hover);  
}

.btn-fleet-primary:focus { 
	outline: 0;  
	color: #FFF;
	color: var(--btn-primary-font);  
	background: #df7a00;
	background: var(--btn-primary-bg);
}

.btn-fleet-primary:active { 
	outline: 0; 
	color: #FFF;
	color: var(--btn-primary-font);  
	background: #df7a00;
	background: var(--btn-primary-bg); 
	-moz-box-shadow: none; 
	-webkit-box-shadow: none; 
	box-shadow: none; 
}

.btn-fleet-primary:active:focus, .btn-fleet-primary.active:focus { 
	outline: 0; 
	color: #FFF;
	color: var(--btn-primary-font); 
	background: #df7a00;
	background: var(--btn-primary-bg);  
}

.f-h {
	height:100%;
}
.f-w {
	width:100% !important;
}

.m40 {
	margin-bottom: 40px;
}

.m20 {
	margin-bottom: 20px;
}

.m15 {
	margin-bottom: 15px;
}

.m10 {
	margin-bottom: 10px;
}

.mt20 {
	margin-top: 20px;
}
.mt60 {
	margin-top: 60px;
}
.mt90 {
	margin-top: 90px;
}

.noPad {
	padding: 0 !important;
}

.footer-big {
	padding-top:50px;
	min-height: 296px;
	background-color: #ffffff;
     border-top: 1px solid #CCC;
}
.footer-small {
	height: 58px;
	padding-top:18px;
	background-color: #ffffff;
	border-top: 1px solid #eee;
	font-family: 'Avenir', sans-serif;
	font-size: 14px;
	background: #8996A0;
	background: var(--primary-color);
	color: #FFF;
	color: var(--primary-color-font);
}

.footer-header {
	font-family: 'Avenir-Heavy', sans-serif;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 1.6px;
	color: #2b2f31;
	display: block;
	margin-bottom: 20px;
}

.footer-subtext {
	font-family: 'Avenir', sans-serif;
	font-size: 14px;
	color: #474b56;
	display: block;
	margin-bottom: 10px;
}

.headerinfo {
    float: right;
    list-style: none;
	width: 140px;
     padding-top: 12px;
}


li.dropdown:hover > ul.dropdown-menu {
    display: block;
}

.dd-header {
	text-align: center;
	padding-top: 15px;
	padding-bottom: 15px;
	background: #f0eee9;
}
.dd-subheader {
	padding-top: 15px;
	padding-left: 21px;
	padding-bottom: 9px;
  	letter-spacing: 1.6px;
}
.dd-text {

	padding-left: 21px;
	color: #2b2f31;
	padding-bottom: 20px;

}

ul.dropdown-menu {
	padding:0;
    width: 190px;
}
li.divider {
    margin: 0 !important;
}
.smalldivider {
	width: 80%;
    margin: 0 auto;
}

table.smalltext {
    font-size: 14px;
}


div.flash-message {
	padding-top: 10px;
	padding-bottom: 10px;
	font-weight: 900;
	font-style: normal;
	font-stretch: normal;
	line-height: 1;
	letter-spacing: 1px;
	font-size: 22px;
    width: 80%;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: center;
    border-radius: 14px;
}

div.flash-message.error {
	background-color: #f1b4b4;
	color: rgba(99, 43, 42, 0.64);
}

div.flash-message.success {
	background-color: #c0e0bf;
	color: #547562;
}

div.flash-message.warning {
	background-color: #f5dab0;
	color: #c18017;
}


.vmid {
	vertical-align: middle !important;
}


@media screen and (max-device-width : 1400px) {
	h1 {
		font-size: 50px !important;
	}
	h2 {
		font-size: 23px !important;

	}
	.logo-img-header {
   	 	width: 110px;
	}
	.help-icon {
		width: 40px;
		margin-top: 1px;
	}
	body {
	    padding-top: 50px;
	}
	.navbar {
		padding-top: 0;
		padding-bottom: 0;
   	 	height: 55px;
	}
	.pbnav {
		height: 60px;
	}
	.pbusernav {
    	 margin-top: 60px !important
	}
	.headerBtn {
		padding-top: 6px !important;
		min-width: 10px !important;
		height: 36px;
		width: 140px;
	}
	.dropdown-menu {
		position: absolute;
		left: -20px;
	}
}

@media screen and (min-device-width : 1249px) and (max-device-width : 1400px) {

	.container {
		width: 1000px;
	}

}

@media screen and (min-device-width : 1199px) and (max-device-width : 1249px) {

	.container {
		width: 950px;
	}

}

@media screen and (min-device-width : 993px) and (max-device-width : 1059px) {
	.container {
		width: 900px;
	}

}

@media screen and (min-device-width : 769px) and (max-device-width : 830px) {
	.container {
		width: 720px;
	}

}
@media screen and (max-device-width : 992px) {
	h1 {
		font-size: 50px !important;
	}
	h2 {
		font-size: 22px !important;
	}
	h3 {
		font-size: 15px !important;
	}
	h4 {
		font-size: 35px !important;
	}
	h5 {
		font-size: 17px !important;
	}

}

@media screen and (max-device-width : 768px) {
	.container {
		padding-left: 30px;
		padding-right: 30px;
	}
	h1 {
		font-size: 35px !important;
	}
	h2 {
		font-size: 16px !important;
	}
	h3 {
		font-size: 12px !important;
	}
	h4 {
		font-size: 27px !important;
	}
	h5 {
		font-size: 14px !important;
	}
}


@media screen and (max-device-width : 580px) {
	.footer-big {
		padding-top: 0;
	}
	.footer-header {
    	margin-top: 20px;
	}
}

@media screen and (min-device-width : 1200px) {

	.navbar {
		padding-top: 0;
		padding-bottom: 0;
		height: 70px;
	}
}


/* Styles the thumbnail */

a.lightbox img {
height: 150px;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
margin: 94px 20px 20px 20px;
}

/* Styles the lightbox, removes it from sight and adds the fade-in transition */

.lightbox-target {
position: fixed;
top: -100%;
width: 100%;
background: rgba(0,0,0,.7);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img {
margin: auto;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Styles the close link, adds the slide down transition */

a.lightbox-close {
display: block;
width:50px;
height:50px;
box-sizing: border-box;
background: white;
color: black;
text-decoration: none;
position: absolute;
top: -80px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}

.lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}

.lightbox-target:target a.lightbox-close {
	top: 0px;
}

.validInput {
	border: 1px solid green !important;
}
.invalidInput {
	border: 1px solid red !important;
}

.onlyMobile {
	display: none;
}
.onlyScreen {
	/* display: block; */
}

@media screen and (max-device-width : 768px) {
	body {
    	padding-bottom: 600px;
	}
	.onlyMobile {
		display: block;
	}
	.onlyScreen {
		display: none !important;
	}
	ul.login {
    	margin-top: -3px;
		background: #FFF;
	}
}

@media screen and (max-device-width : 500px) {
	.footer-right {
		width: 100%;
		text-align: left;
		margin-top: 10px;
	}
	.footer-left {
		width: 100%;
		text-align: left;
	}
}


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

	.headerinfo {
		display: none;
	}
}

.follow-icon {
    width: 30px;
    margin-right: 9px;
    cursor: pointer;
}

.nowrap {
	white-space:nowrap;	
}

ul.login {
    margin-right: -70px;
    margin-top: -6px;
		background: #FFF;	
}
ul#login-dp {
	padding: 10px;	
}

.link-underline {
    text-decoration: underline;	
}



.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}




@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

#lg-rotate-left {
	font-size:20px;
    font-family: FontAwesome;
}
#lg-rotate-right {
	font-size:20px;
    font-family: FontAwesome;
}
.lg-image {
		-webkit-transform-origin: center center !important;
}

.north {
	transform:rotate(0deg) !important;
	-ms-transform:rotate(0deg) !important; /* IE 9 */
	-webkit-transform:rotate(0deg) !important; /* Safari and Chrome */
}
.west {
	transform:rotate(90deg) !important;
	-ms-transform:rotate(90deg) !important; /* IE 9 */
	-webkit-transform:rotate(90deg) !important; /* Safari and Chrome */
}
.south {
	transform:rotate(180deg) !important;
	-ms-transform:rotate(180deg) !important; /* IE 9 */
	-webkit-transform:rotate(180deg) !important; /* Safari and Chrome */
}
.east {
	transform:rotate(270deg) !important;
	-ms-transform:rotate(270deg) !important; /* IE 9 */
	-webkit-transform:rotate(270deg) !important; /* Safari and Chrome */
}

.img-help {
    width: 23px;
	
}

  .ui-tooltip, .arrow:after {
	  
    border: 1px solid #dddddd;
  }
  .ui-tooltip {
	  
	  
  width: 280px;
  background-color: #f9f8f7;
  border: solid 1px #dddddd;
	  
	font-family: 'Avenir-Heavy', sans-serif;
	font-size: 15px;
	font-weight: 900;
	line-height: 1.47;
	text-align: left;
	color: #474b56;
    padding: 10px 20px;
	  
    border-radius: 10px	;
    box-shadow:none;
    margin-left:280px;
  }
  .arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
  }
  .arrow.top {
    top: -16px;
    bottom: auto;
  }
  .arrow.left {
    left: 20%;
  }
  .arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
	  
  background-color: #f9f8f7;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .arrow.top:after {
    bottom: -20px;
    top: auto;
  }


.error-message {
	color: #b24444;
    text-align: center;
    font-weight: bold;
}



.stdinputform label:not(.checkbox-inline) {
	font-size: 14px;
	font-weight: bold;
	text-align: left;
	display: block;
     margin-bottom: 20px;
    margin-top: 10px;
}

.stdinputform input:not([type='checkbox']), .stdinputform select {
	height: 34px !important;
	border-radius: 4px !important;
	border: solid 1px #d8dde6 !important;
	padding-left: 12px !important;
	font-size: 12px !important;
	width: 100% ;
}

.stdinputform select.whitebg {
	background-color: #FFF !important;
}


.stdinputform input.readonly, .stdinputform select.readonly, .stdinputform textarea.readonly {
	background-color: #eee !important;
}
.stdinputform textarea {
	
	width: 100%;
	height: 75px;
	display: block;
	max-width: none;
	min-width: 0;
    border-radius: 4px !important;
    border: solid 1px #d8dde6 !important;
    padding-left: 12px !important;
    font-size: 12px !important;
    padding-top: 5px;
}




 /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 24px;
}

.switch.small {
  width: 50px;
}


.switch.medium {
  width: 80px;
}

.switch.narrow {
  	width: 40px;
	height: 20px;
	margin: 0;
	margin-top: 4px;
}





/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}


.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider.readonly {
	pointer-events: none;
}

.switch.medium > .slider:before{
    left: 24px;
}

.switch.medium > .slider.closed:before{
    left: 2px;
}


.switch.narrow > .slider:before{
    height: 17px;
    width: 17px;
    left: 3px;
}

input:checked + .slider {
  background-color: #4bca81;
}

input:not(checked) + .slider {
  background-color: red;
}

input:focus + .slider {
  box-shadow: 0 0 1px #4bca81;
}

input:checked + .slider:before {
  -webkit-transform: translateX(33px);
  -ms-transform: translateX(33px);
  transform: translateX(33px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.slider.open {
    font-size: 11px;
    text-align: left;
    color: #ffffff;
    padding-top: 4px;
    padding-left: 7px;
}

.slider.won {
    font-size: 11px;
    text-align: left;
    color: #ffffff;
    padding-top: 4px;
    padding-left: 7px;
}


.slider.closed {
    font-size: 11px;
    text-align: right;
    color: #ffffff;
    padding-top: 4px;
    padding-right: 7px;
}

.slider.small {
    padding-top: 5.5px;
}


.slider.small:before {
    height: 15px;
    width: 15px;
    left: 5px;
    bottom: 5px;
}

.slider.small.open:before {
    left: -1px;
}

.switch.narrow > .slider.open:before {
    left: -13px;
}

.opSwitchText {
	font-size: 12px;
    position: absolute;
    margin-left: -60px;
    margin-top: 5px;
}

.search-header {
	margin: 0;
}


.pbnav {
	background: #ecac2e;
	color: #FFF;	
}
.header-profile-pic {
	border-radius: 50%;
	width:40px;
    height: 40px;	
}

.pbheaderinfo {
    float: right;
    list-style: none;
}

.pbheader-link {
    margin-right: 30px;
	color: #FFF;
}

.pbheaderinfo.links {
    margin-top: 8px;
}

.logo-img-pb-header {
    width: 150px;
    margin-top: -4px;	
}
.pbusernav {
	background: #df7a00;
	background: var(--btn-primary-bg);
    color: #FFF;
    height: 30px;
    padding: 0;
    min-height: 0;
    z-index: 1;
}
.pbusername {
    padding-top: 4px;
    text-align: right;
    display: block;
}

.quicksearchmag {
	cursor: pointer;
}


.fcnf-ta {
    width: 180px;
	margin: 0 auto;
	margin-top:10px;
}



.fileIssueModalContent {
    padding: 20px;
	text-align: center;
	color: #474b56;
}

.fileIssueModalContent > .header {
	font-size: 30px;
	font-weight: bold;
}

.fileIssueModalContent > .content {
	font-size: 17px;
    margin-bottom: 40px;
}



.b-fix {
	padding-top: 6px !important;
}

.orange-button {

    vertical-align: middle;
    padding-top: 12px;
	min-width: 190px;
	height: 50px;
	border-radius: 100px;
	background-color: #ecac2e;
	font-family: 'Avenir', sans-serif;
	font-size: 18px;
	letter-spacing: 0.2px;
	text-align: center;
    color: #474b56;
    font-weight: bold;
	-moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px;
    text-shadow: none;
    -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
    -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}

.orange-button:hover { color: #474b56; background: #ffba32;  border: 1px solid #ffba32;  }

.orange-button:focus { outline: 0;  color: #474b56; background: #d69920; border: 1px solid #d69920; }

.orange-button:active { outline: 0; color: #474b56; background: #d69920 !important; border: 1px solid #d69920 !important; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }

.orange-button:active:focus, .orange-button.active:focus { outline: 0; background: #d69920;  color: #474b56;border: 1px solid #d69920; }

.green-button {
	background-color: #5cb85c;
	color: #FFF;
}

.green-button:hover { color: #fff; background: #449d44;  border: 1px solid #449d44;  }

.green-button:focus { outline: 0;  color: #fff; background: #449d44; border: 1px solid #449d44; }

.green-button:active { outline: 0; color: #fff; background: #449d44 !important; border: 1px solid #449d44 !important; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }

.green-button:active:focus, .green-button.active:focus { outline: 0; background: #449d44;  color: #fff;border: 1px solid #449d44; }



#addlOptionsDiv {
    border: 1px solid;
    padding-bottom: 10px;
}