#leftNavigation.hosted-banding-leftnav {
	background: #d2c2c2;
	min-width: 20rem;
}

.is-hosted-branding-logo {
	width: inherit;
}

.hosted-Content-rightside .module-body .element label {
    min-width: 450px;
}

.hosted-Content-rightside #newDashboard{
	height: calc(100% - 160px);
}

#hostedLeftNavigation .left-nav-container{
	margin-bottom: 40px !important;
}

#hostedFooterBar .hosted-app-footer{
	    position: fixed;
	    bottom: 0;
	    width: -webkit-fill-available;
	    display: inline-block;
	    width: 100%;
	    z-index : 3;
}

#hostedFooterBar .hosted-app-footer-content{
	   display: inline-block;
	   background-color: #f5f5f5;
	   width: 100%;
	   height: 36px;
}

 #hostedFooterBar .hosted-app-footer-copyright{
 		margin-right:20px;
 		font-size:12px;
 		padding-left: 20px;
 		font-family: Nunito;
 		color: rgba(0,0,0,.87);
 		z-index : 3;
 }


#hostedFooterBar .hosted-app-footer-content-row1{
	display: inline-block;
	padding: 12px;
}
#hostedFooterBar .hosted-app-footer-product-version{
	margin-left: 20px;
}

#hosted-navPath{
	line-height: 4rem;
    display: inline-flex;
    font-size: 18px;
    font-weight: normal;
    font-family: 'Nunito-Regular', 'Nunito';
}

.close-menu{
	font-size: 10px;
    position: absolute;
    left: -10px;
    top: 6px;
    display: inline-block;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    color: #47afe8;
}

@-moz-document url-prefix() {
	 /*your rules for firefox*/
    #anchorBall{
		left: 21.6rem !important;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
     /*your rules for chrome*/
     #anchorBall{ 
        left: 22.6rem !important;
     }
}

@media screen and (min-width: 440px), screen\9 { 
	/*IE 6,7,9,10 */
	#anchorBall{ 
        left: 22.6rem !important;
     }
}

@media \0screen {
 	 /*IE 8*/
	 #anchorBall{ 
        left: 22.6rem !important;
     }
 }

#anchorBall {
    border: 1px solid;
    border-radius: 50%;
    height: 1.4rem;
    width: 1.4rem;
    position: relative;
    cursor: default;
    background-color: #fda448;
    color: #3b3b3b;
    z-index: 1;
    -webkit-transition: 1s;
    transition: 1s;
    max-height: calc(100vh - 12.1rem)!important;
    display:none;
}

img#hosted-product-logo {
	padding-left: 16px;
	background: #65656a;
	padding-left: 16px;
	height: 3rem;
	width: 17.6rem;
	margin: 2.5rem 2.7rem !important;
	vertical-align: middle;
	line-height: 8rem;
	cursor: pointer;
}

.mat-button-toggle-label-content a {
	color: #c9c9c9 !important;
	font-family: Nunito;
	font-weight: 200;
	font-size: 13px !important;
	text-decoration: none;
}

#leftNavigation.hosted-banding-leftnav {
	min-width: 20rem;
}

.is-hosted-branding-logo {
	width: inherit;
}

.main-header{
	width: 200px;
    position: relative;
}

.header-profile-style {
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	border-radius: 30px;
	width: 2.9rem;
	height: 2.9rem;
	background: #333;
	border: 2px #fff;
	font-size: 16px;
	color: #fff;
	font-family: Nunito;
	margin-top: auto;
	margin-bottom: auto;
	margin-right: 15px;
	border: 2px #fff;
}

.header-help-style {
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	border-radius: 30px;
	width: 2.9rem;
	height: 2.9rem;
	border: 2px #fff;
	font-size: 16px;
	color: #868686;
	font-family: Nunito;
	margin-top: auto;
	margin-bottom: auto;
	margin-right: 15px;
	font-size: 18px;
    background: #fff;
}

.hosted-headers{
	display: inline-flex;
}

.header-help-style:hover{
	color: rgb(51,51,51);
}

.header-profile-style:hover{
	color: rgb(255,121,26);
}
.group-text{
	top: 6px;
    transform-origin: 105px 7.5px 0px;
    background-color: #434343;
    height: 2rem;
    padding-top: 6px;
    padding-left: 1rem;
    line-height: 2rem;
    vertical-align: middle;
    color: white;
    width: 96%;
}

.group-header-name{
	font-family: Nunito;
	line-height: 15px;
    color: #c9c9c9!important;
    text-transform: uppercase;
    padding: 4px;
}

.cache31 {
	border-width: 0px;
	position: absolute;
	left: 440px;
	top: 22px;
	width: 37px;
	height: 36px;
	font-family: 'SonicWallIconFont';
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
}
.icon-lightbulb-anchor{
	text-decoration: none;
}
#hostedBannerStrip .header-nav-btn-bar {
	position: absolute;
	left: calc(40% - 100px);
}

.ax_default {
	font-family: 'Nunito-Regular', 'Nunito';
	font-weight: 400;
	font-style: normal;
	font-size: 13px;
	color: #333333;
	line-height: normal;
}

.ax_default.ellipse.selected {
	background-color: white !important;
}

#u17505_img {
	border-width: 0px;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 49px;
	height: 49px;
}

#u17505 {
	border-width: 0px;
	position: absolute;
/* 	left: -15px; */
	top : 0px;
	width: 49px;
	height: 49px;
	font-family: 'SonicWallIconFont';
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
	top: 0px;
}

.main-header-container{
	display:flex;
}
#u17505_img.mouseOver {
	
}

#u17505.mouseOver {
	
}

#u17505_img.mouseDown {
	
}

#u17505.mouseDown {
	
}

#u17505_img.selected {
	background-color: white;
}

#u17505.selected {
	
}

#u17505_text {
	border-width: 0px;
	position: absolute;
	left: 14px;
	top: 12px;
	width: 45px;
	word-wrap: break-word;
}

#u17506_img {
	border-width: 0px;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 49px;
	height: 49px;
}

#u17506 {
	border-width: 0px;
	position: absolute;
	/* left: 320px; */
	top: 0px;
	width: 49px;
	height: 49px;
	font-family: 'SonicWallIconFont';
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
}

#u17506_img.mouseOver {
	
}

#u17506.mouseOver {
	
}

#u17506_img.mouseDown {
	
}

#u17506.mouseDown {
	
}

#u17506_img.selected {
	background-color: white;
}

#u17506.selected {
	
}

#u17506_text {
	border-width: 0px;
	position: absolute;
	left: 14px;
	top: 12px;
	width: 45px;
	word-wrap: break-word;
}

#u17504_img {
	border-width: 0px;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 49px;
	height: 49px;
}

#u17504 {
	border-width: 0px;
	position: absolute;
/* 	left: 140px; */
	top: 0px;
	width: 49px;
	height: 49px;
	font-family: 'SonicWallIconFont';
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
}

#u17504_img.mouseOver {
	
}

#u17504.mouseOver {
	
}

#u17504_img.mouseDown {
	
}

#u17504.mouseDown {
	
}

#u17504_img.selected {
	background-color: white;
}

#u17504.selected {
	
}

#u17504_text {
	border-width: 0px;
	position: absolute;
	left: 14px;
	top: 12px;
	width: 45px;
	word-wrap: break-word;
}

.open-menu{
	font-size: 10px;
    position: absolute;
    left: 20px;
    top: 6px;
    display: inline-block;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    color: #47afe8;
}

.margin-for-icons {
	margin-left: 50px;
}
#u23709 {
    border-width: 0px;
    position: absolute;
    left: 20px;
    top: 2px;
    width: 98px;
    height: 50px;
    font-family: 'Nunito-SemiBold', 'Nunito SemiBold', 'Nunito';
    font-weight: 650;
    font-style: normal;
    font-size: 20px;
    text-align: left;
}

#u23709 .menu-handler:hover {
    color: #ff791a;
}




#u23709_div {
    border-width: 0px;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 98px;
    height: 50px;
    background: inherit;
    background-color: rgba(255, 255, 255, 0);
    border: none;
    border-left: 0px;
    border-top: 0px;
    border-right: 0px;
    border-radius: 6px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'Nunito-SemiBold', 'Nunito SemiBold', 'Nunito';
    font-weight: 650;
    font-style: normal;
    font-size: 20px;
    text-align: left;
}

#u23709_text {
    border-width: 0px;
    position: absolute;
    left: 0px;
    top: 13px;
    width: 101px;
    white-space: nowrap;
}

#u29574 {
    position: absolute;
    left: 18px;
    top: 50px;
    width: 600px;
    height: 70px;
    border-width: 0px;
}

#u29574_div {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 600px;
    height: 70px;
    box-shadow: none;
    background: inherit inherit inherit inherit inherit inherit inherit inherit inherit;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    border-radius: 0px;
}

#u29574_text {
    position: absolute;
    left: 0px;
    top: 6px;
    width: 600px;
    word-wrap: break-word;
    border-width: 0px;
}
.hosted_title{ 
	font-family: Roboto-Regular, Roboto;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    height: 7rem;
    line-height: 3rem;
    vertical-align: middle;
    font-size: 40px;
    color: #333;
}

#hosted-path-name{
	height: 1.9rem;
   
    vertical-align: middle;
    font-size: 18px;
    color: #999;
    font-family: 'Nunito-Regular', 'Nunito';
}
  
.left-nav-is-open{
	display: table-cell;
}

.left-nav-is-closed{
	display: none;
}

#cache11 {
    font-size: 20px;
    color: #333333;
	font-family: 'Nunito-Regular', 'Nunito';
	line-height: 20px;
	position: relative;
    left: 38%;
   
}
#logonForm #cache11 {
	 font-size: 14px;
}

#hostedBannerStrip #cache11 {
    font-size: 26px;
}


#u29575 {
    position: absolute;
 	left: 22px;
    top: 114px;
    width: 19px;
    height: 19px;
    font-family: SonicWallIconFont;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    color: rgb(153, 153, 153);
    border-width: 0px;
    
}

#u29575_div {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 19px;
    height: 19px;
    box-shadow: none;
    font-family: SonicWallIconFont;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    color: rgb(153, 153, 153);
    background: inherit;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    border-radius: 0px;
}

#u29575_text {
    position: absolute;
    left: 0px;
    top: -2px;
    width: 15px;
    white-space: nowrap;
    border-width: 0px;
}

#u29591 {
    position: absolute;
    left: 50px;
    top: 100px;
    width: 62px;
    height: 19px;
    color: rgb(153, 153, 153);
    border-width: 0px;
}

#u29591_div {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 62px;
    height: 19px;
    box-shadow: none;
    color: rgb(153, 153, 153);
    background: inherit inherit inherit inherit inherit inherit inherit inherit inherit;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    border-radius: 0px;
}

#u29591_text {
    position: absolute;
    left: 0px;
    top: 1px;
    width: 62px;
    white-space: nowrap;
    border-width: 0px;
}

.traverse-path{
	font-size: 14px;
    color: #999999;
    font-family: Nunito-Regular;
}

.mat-menu-item{
	padding: 6px 18px;
	color: #c9c9c9 !important;
	font-size: 15px !important;
}

.sign-off-link{
	cursor: pointer;
}
.header-profile-anchor{
	color: #c9c9c9;
	text-decoration: none;
}

.mat-menu-content{
	color: white;
	opacity: 1;
	DISPLAY: grid;
	TOP: 58PX;
	RIGHT: 12PX;
	POSITION: absolute;
	border-radius: 5px;
	text-transform:capitalize;
	background: #333;
    border: 7px solid #333;;
    float: left;
    margin: 0;
}

.mat-menu-content:before {
    content:"";
    position: absolute;
    right: 9px;
    top: -20px;
    border-style: solid;
    border-width: 0 14px 14px 14px;
    border-color: transparent transparent #101010 #16151500;
    z-index:9999;
}
.mat-menu-content:after {
    content:"";
    position: absolute;
    right: 4px;
    top: -22px;
    width: 0;
    height: 0;
    border-width: 0 17px 17px 17px;
  
}



.hosted-banding-leftnav ::-webkit-scrollbar-track-piece {
    border-radius: 10px;
    background-color: #65656a !important;
}

/* Add global styles to this file, and also import other style files */
//
If
 
you
 
need
 
pre-defined
 
Material
 
themes
//
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

@import '~@angular/material/theming';

//
Plus
 
imports
 
for
 
other
 
components
 
in
 
your
 
app
.
//
 
Include
 
the
 
base
 
styles
 
for
 
Angular
 
Material
 
core
.


@
include
 
mat-core
();
//
 
Custom
 
Theme
//
 
1.
Create
 
Color
 
palletes
 
for
 
Primary
,
Accent
 
and
 
Warning
//
 
2.
$
sonic-red
:
 
(
50
:
 
#fae1e2
,
100
:
 
#ffd1b3
,
200
:
 
#f4b8ba
,
300
:
 
#e66165
,
400
:
 
#e03c41
,
500
:
 
#db1a20
,
600
:
 
#ce181e
,
700
:
 
#c7161c
,
800
:
 
#be1419
,
900
:
 
#a71014
,
A100
:
 
#ff8a80
,
A200
:
 
#ff5252
,
A400
:
 
#ff1744
,
A700
:
 
#d50000
,
contrast
:
 
(
50
:
 
$
black-87-opacity
,
100
:
 
$
black-87-opacity
,
200
:
 
$
black-87-opacity
,
300
:
 
$
black-87-opacity
,
400
:
 
$
black-87-opacity
,
500
:
 
white
,
600
:
 
white
,
700
:
 
white
,
800
:
 
$
white-87-opacity
,
900
:
 
$
white-87-opacity
,
A100
:
 
$
black-87-opacity
,
A200
:
 
white
,
A400
:
 
white
,
A700
:
 
white
,
)
);
$
sonic-blue
:
 
(
50
:
 
#deeaef
,
100
:
 
#b0cdd9
,
200
:
 
#80aec2
,
300
:
 
#4f8faa
,
400
:
 
#267596
,
500
:
 
#005d84
,
600
:
 
#00587c
,
700
:
 
#005172
,
800
:
 
#004765
,
900
:
 
#003a53
,
A100
:
 
#cfd8dc
,
A200
:
 
#b0bec5
,
A400
:
 
#78909c
,
A700
:
 
#455a64
,
contrast
:
 
(
50
:
 
$
black-87-opacity
,
100
:
 
$
black-87-opacity
,
200
:
 
$
black-87-opacity
,
300
:
 
$
black-87-opacity
,
400
:
 
white
,
500
:
 
white
,
600
:
 
$
white-87-opacity
,
700
:
 
$
white-87-opacity
,
800
:
 
$
white-87-opacity
,
900
:
 
$
white-87-opacity
,
A100
:
 
$
black-87-opacity
,
A200
:
 
$
black-87-opacity
,
A400
:
 
white
,
A700
:
 
$
white-87-opacity
,
)
);
$
sonic-orange
:
 
(
50
:
 
#fbebe4
,
100
:
 
#ffd1b3
,
200
:
 
#ffb585
,
300
:
 
#ff9957
,
400
:
 
#ff8128
,
500
:
 
#ff6b0b
,
600
:
 
#f0650a
,
700
:
 
#e6560a
,
800
:
 
#da5208
,
900
:
 
#be4307
,
A100
:
 
#ffd180
,
A200
:
 
#ffab40
,
A400
:
 
#ff9100
,
A700
:
 
#ff6d00
,
contrast
:
 
(
50
:
 
$
black-87-opacity
,
100
:
 
$
black-87-opacity
,
200
:
 
$
black-87-opacity
,
300
:
 
$
black-87-opacity
,
400
:
 
$
black-87-opacity
,
500
:
 
$
black-87-opacity
,
600
:
 
$
black-87-opacity
,
700
:
 
$
black-87-opacity
,
800
:
 
white
,
900
:
 
white
,
A100
:
 
$
black-87-opacity
,
A200
:
 
$
black-87-opacity
,
A400
:
 
$
black-87-opacity
,
A700
:
 
black
,
)
);
$
sonic-primary
:
 
mat-palette
($sonic-blue);


$
sonic-accent
:
  
mat-palette
($sonic-orange
,
A200
,
A100
,
A400
);


$
sonic-warn
:
    
mat-palette
($sonic-red);
//
 
Create
 
the
 
theme
 
object
 
(
a
 
Sass
 
map
 
containing
 
all
 
of
 
the
 
palettes
).


$
sonic-theme
:
 
mat-light-theme
($sonic-primary
,
$
sonic-accent
,
$
sonic-warn
);



@
include
 
angular-material-theme
($sonic-theme);



@import './assets/scss/var';

@import './assets/scss/base';

/*
 * Override default material design fonts ($mat-font-family)
 */
$
mat-font-family: 'Noto Sans ', sans-serif ;

body { // body or wrapper class font-family:Nunito;
	font-size: $s-font-small;
	color: $s-c-text;
	.
	mat-button-toggle
	,
	%mat-button-base,
	.mat-button,
	.mat-raised-button,
	.mat-fab,
	.mat-icon-button,
	.mat-mini-fab,
	.mat-card,
	.mat-checkbox,
	.mat-input-container,
	.mat-list,
	.mat-menu-item,
	.mat-radio-button,
	.mat-select,
	.mat-list
	.mat-list-item
	.mat-list-item-content,
	.mat-nav-list
	.mat-list-item
	.mat-list-item-content,
	.mat-simple-snackbar,
	.mat-tab-label,
	.mat-slide-toggle-content,
	.mat-toolbar,
	.mat-tooltip
	{
	font-family
	:
	inherit;
}

}
html {
	/* make sure we use up the whole viewport */
	width: 100%;
	min-height: 100%;
	font-size: 62.5%;
}

.s-dashboard-pg .chart-legend .legend-wrap {
	width: 105px;
}

//
Custom Classes
.s-badge {
	font-size: 11px;
	font-weight: normal;
	border-radius: 2px;
	padding: 2px 5px; &. s-badge-error , &.s-badge-onhold {
	background-color : $ s-c-error;
	color: $s-c-white;
}

&
.s-badge-warning {
	background-color: #ff8e28;
	color: $s-c-text;
}

&
.s-badge-good {
	background-color: $s-c-good;
	color: $s-c-text;
}

&
.s-badge-new {
	background-color: $s-c-info;
	color: $s-c-white;
}

}
.s-input-container-stacked {
	padding-top: 18px;
	padding-left: 8px;
}

.linkbutton {
	cursor: pointer;
	text-decoration: none;
}

.linkbutton:hover {
	color: #FF791A;
	text-decoration: underline;
}

.s-input-content {
	all: initial;
	margin: 1rem;
	color: #C9C9C9;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	-webkit-flex-wrap: nowrap; /* Safari 6.1+ */
	flex-wrap: nowrap; . s-input-label { display : flex;
	justify-content: flex-end;
	align-items: center;
	height: 3.3rem;
	min-height: 3.3rem;
	flex: 1;
	font-family: Nunito;
	font-size: 14px;
	color: #333333;
	font-weight: 700;
	margin-right: 2rem;
	text-align: right;
}

@media ( max-width : 481px) {
	.s-input-label {
		font-size: 13px;
	}
}

.s-input-fields {
	box-sizing: border-box;
	background-color: white;
	display: flex;
	flex-direction: column;
	flex: 1; .
	no-pointer-events: after{
        content: none;
}

.picker {
	width: 100%;
	text-align: right;
	cursor: pointer;
}

.s-select-field {
	box-sizing: border-box;
	background-color: white;
	display: flex;
	flex-direction: row;
	flex: 1;
	margin-right: -2.9rem; &: after { content : '\f0d7';
	font-family: FontAwesome;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	left: -2.9rem;
	color: #868686;
	height: 3.3rem;
	width: 2.9rem;
	z-index: 1;
	cursor: pointer;
	pointer-events: none;
}

&
:hover {
	select: not([ disabled ]){
          border: 1px solid #FF791A;
}

}
&
:focus {
	select: not([ disabled ]){
          border: 1px solid #FF791A;
}

}
select {
	width: 100%;
	max-width: 30rem;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	outline: none !important;
	padding: 0rem 2.9rem 0rem 1rem;
	border: 1px solid #CCCCCC;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	height: 3.3rem !important;
	min-height: 3.3rem !important;
	border-radius: 3px;
	font-family: Nunito;
	font-size: 13px;
	margin: 0;
	line-height: 1.2;
	color: #000000;
	text-align: left;
	cursor: pointer; option { background-color : #333333;
	color: #C9C9C9;
	min-height: 2.9rem !important;
	&:
	disabled
	{
	color
	:
	grey;
}

}
&
:disabled {
	color: #868686;
	cursor: not-allowed;
}

}
select::-ms-expand {
	display: none;
}

}
.s-select-field select:not ([disabled] ) { &:hover { &:after {
          color : #FF7919;
	
}

}
&
:focus { &:after { color:#FF7919;
	
}

}
}
input, textarea {
	max-width: 30rem;
	box-sizing: border-box;
	font-family: Nunito;
	font-size: 13px;
	padding-left: 1rem;
	height: 3.3rem !important;
	line-height: 3.3rem !important;
	min-height: 3.3rem !important;
	border-radius: 3px;
	border: 1px solid #CCCCCC;
	color: #000000;
	width: 100%;
	outline: none !important; &:
	focus: :-webkit-input-placeholder{
        opacity: 0;
}

&
:disabled {
	background-color: #F2F2F2;
	color: #999999;
}

&
:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset;
	box-shadow: 0 0 0px 1000px #FFFFFF inset;
	-webkit-text-fill-color: #000000;
}

&
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	color: #999999;
}

&
::-moz-placeholder { /* Firefox 19+ */
	color: #999999;
}

&
:-ms-input-placeholder { /* IE 10+ */
	color: #999999;
}

&
:-moz-placeholder { /* Firefox 18- */
	color: #999999;
}

&
:focus:not ([disabled] ) {
	border: 1px solid #FF791A;
}

&
:active:not ([disabled] ) {
	border: 1px solid #FF791A;
}

&
:hover:not ([disabled] ) {
	border: 1px solid #FF791A;
}

&
:focus:hover:not ([disabled] ) {
	border: 1px solid #FF791A;
}

}
textarea {
	height: auto !important;
	line-height: normal !important;
	min-height: 3.3rem;
}

}

/* dropdown styles */
.s-dropdown-container {
	position: relative;
	font-family: Nunito;
	font-size: 13px; . s-dropdown-box { display : flex;
	justify-content: space-between;
	align-items: center;
	max-width: 30rem;
	width: 100%;
	border: 1px solid #CCCCCC;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	height: 2.9rem !important;
	min-height: 2.9rem;
	border-radius: 3px;
	font-family: Nunito;
	font-size: 13px;
	margin: 0;
	line-height: 1.2;
	padding: 0 1rem;
	box-sizing: border-box;
	color: #000000;
	cursor: pointer; &: hover , & : focus {
        border : 1px solid #FF791A;
	outline: none !important;
	.
	s-dropdown-icon
	{
	color
	:
	#FF791A;
}

}
.s-dropdown-icon {
	color: #868686;
	transform: rotate(180deg);
	font-size: 11px;
	margin-left: 0.5rem;
}

.input-datepicker { &:hover , &:focus {
          border : 1pxsolid#FF791A;
	
}

height
:
 
2
.9rem
 
!
important
;
 
          
min-height
:
2
.9rem
 
!
important
;
 
          
border-left
:
 
none
 
!
important
;

          
border-right
:
 
none
 
!
important
;

        
}
}
.s-dropdown-active {
	border: 1px solid #FF791A;
	.
	s-dropdown-icon
	{
	color
	:
	#FF791A;
}

}
.dropdown-disabled {
	cursor: not-allowed;
	pointer-events: none;
	background-color: #F2F2F2;
	color: #999999;
}

.s-dropdown-options {
	cursor: pointer;
	padding: 0;
	overflow: auto;
	max-height: 200px;
	background: #333333;
	box-shadow: 0 0 1px #C9C9C9;
	position: absolute;
	top: 2.9rem;
	max-width: 30rem;
	width: 100%;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	z-index: 1;
	margin-bottom: 0;
	margin-top: 0;
}

.s-dropdown-options li {
	list-style-type: none;
	display: block;
	padding: 5px 10px;
	height: 19px;
	color: #C9C9C9;
	text-decoration: none;
	box-shadow: 0 -1px #666666 inset;
	transition: background .3s;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	background: #333333;
	box-shadow: 0 0 1px #C9C9C9;
	text-align: left !important; &: hover { background : #696969;
	color: #C9C9C9;
}

}
.option-disabled {
	cursor: not-allowed !important;
	pointer-events: none;
	color: grey !important;
}

@media ( max-width : 769px) {
	.s-dropdown-box {
		min-width: 10rem;
		max-width: 30rem;
	}
	.s-dropdown-options {
		min-width: 10rem;
		max-width: 30rem;
	}
}

}
.s-err-msg {
	font-size: 13px;
	font-family: Nunito;
}

}
//
datepicker
.input-datepicker {
	height: 2.9rem !important;
	min-height: 2.9rem !important;
	border-left: none !important;
	border-right: none !important;
}

.button-datepicker {
	width: 13px !important;
	height: 13px !important;
}

//
Used
 
to
 
override
 
md
 
styles


@media ( min-width : 769px) {
	.s-dialog-container {
		width: 640px !important;
	}
	.left-nav-container {
		height: calc(100vh - 12.1rem) !important;
	}
	.s-main-pg {
		height: calc(100vh - 22.3rem);
	}
}

@media ( min-width : 570px) and (max-width: 768px) {
	.s-dialog-container {
		width: 568px !important;
	}
}

@media ( min-width : 481px) and (max-width: 768px) {
	.left-nav-container {
		height: calc(100vh - 19.3rem) !important;
	}
	.s-main-pg {
		height: calc(100vh - 29.5rem);
	}
}

@media ( max-width : 480px) {
	.left-nav-container {
		height: calc(100vh - 16.9rem) !important;
	}
	.s-main-pg {
		height: calc(100vh - 27.1rem);
	}
}

@media ( max-width : 570px) {
	.s-dialog-container {
		width: 100vw !important;
		max-width: 100vw !important;
		padding: 0px !important;
	}
	.s-dialog-content {
		padding: 24px 16px 0px 16px !important;
	}
}

.tile {
	display: flex;
	padding: 16px;
	margin: 16px;
	border-radius: 2px;
	&.
	column
	{
	flex-direction
	:
	column;
}

&
.center {
	align-items: center;
}

&
.white {
	background-color: $s-bg-white;
	border: 1px solid #ccc;
}

}
//
Redesign Styles


.s-dialog-fltRight {
	float: right;
	margin-right: 1rem !important;
}

.s-dialog-label {
	padding-top: 10px;
	padding-left: 20px;
}

.s-dialog-fltRight.s-text-button {
	min-width: unset;
	height: unset;
	font-family: Nunito;
	background-color: unset;
	@media
	all
	and
	(-ms-high-contrast:none)
{
	background-color
	 
	:
	#515151
	;
	  
     
	min-width
	:
	10rem;
	       
  
}

border-radius
:
 
unset
;

  
border
 
:
 
none
;

  
cursor
 
:
 
pointer
;
   
  
padding
:
  
unset
;

  
font-size
:
  
13
px
;

  
color
:
 
#C9C9C9
;


  
float
:
 
right
;

  
margin-right
:
5px
 
!
important
;

  
height
 
:
 
3
.7rem
;
  

}
.s-dialog-fltRight.s-text-button:hover {
	color: #000000;
}

.s-dialog-content {
	margin: 24px;
	overflow: hidden; //
	width: 600px;
}

.s-dialog-marginTop-15 {
	margin-top: 15px;
}

.s-dialog-action-panel {
	display: flex;
	justify-content: flex-end;
	padding-top: 20px;
	padding-bottom: 20px; //
	Change float: right;
	margin-right: 20px !important; button { line-height : 2px;
	border-radius: 30px !important;
	height: 2px;
	border-color: rgba(134, 134, 134, 1);
	box-sizing: border-box;
	padding-top: 20px;
	padding-bottom: 20px; //
	Change vertical-align: center;
}

button:not (:last-child ){
	margin-right: 8px;
}

}
.s-dialog-action-panel button:nth-child(1) {
	border: 1px solid !important;
	color: #868686;
	background-color: rgba(255, 255, 255, 1);
}

.s-dialog-action-panel button:nth-child(1):hover {
	border-color: #ff791a !important;
}

.s-dialog-action-panel button:nth-child(2) {
	color: black;
	background-color: #ff791a;
}

.s-dialog-header {
	background-color: #515151;
	color: white;
	font-size: 16px;
	font-weight: 200;
	height: 45px; . icon-close-thin { color : #C9C9C9;
	font-size: 13px;
	cursor: pointer;
}

.icon-close-thin:hover {
	color: white;
}

.icon-close-thin:active {
	color: #FF791A;
}

div {
	font-family: Nunito;
	font-weight: 200;
	color: #C9C9C9;
	text-transform: uppercase;
}

.s-mobile-dialog-header {
	padding: 8px;
	background-color: black;
	color: white;
	box-shadow: 0 6px 6px -6px black;
	width: 100%;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.s-mobile-dialog-header md-icon {
	padding-right: 10px;
}

.s-desktop-dialog-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 45px;
	>
	div
	{
	padding
	:
	0rem
	2rem;
}

}
}
.s-dialog-button {
	display: flex;
	justify-content: flex-end;
	margin-right: 20px;
	margin-bottom: 20px;
	button: not(: last-child){
  margin-right: 10px;
}

}
.mat-dialog-container {
	padding: 0px 0px 16px 0px !important;
	border-radius: 5px !important;
}

.margin-right-dialog {
	margin-right: 24px;
}

//
TABS 
.s-tab { //use this class for the tab container. display:flex;
	justify-content: center;
	height: 6rem; // Override the height of the container based on UI
	requirements. margin-top : 16px !important;
	border-bottom: 1px solid #FF791A !important;
	padding: 0px 24px !important; . s-tab-item { //use this class for the
	tab items padding : 0 2rem;
	display: flex;
	min-width: 10rem;
	flex-direction: column;
	cursor: pointer;
	height: 100%;
	justify-content: center;
	align-items: center;
	border-bottom: 1px solid #FF791A;
	color: #868686;
	max-width: 50%;
}

.s-tab-item:hover {
	color: #333333;
}

.s-tab-item-active { // apply this class to the active tab color:#333333;
	border: 1px solid #FF791A;
	border-radius: 6px;
	border-bottom-right-radius: 0%;
	border-bottom-left-radius: 0%;
	border-bottom: none;
	background-color: #FAFAFA;
}

}
//
Vertical Tabs
.s-tab-rev {
	display: flex;
	border-right: 1px solid #FF791A !important;
	padding: 24px 15px 24px 24px !important;
	flex-direction: column;
	min-width: 200px;
	font-family: Nunito; . s-tab-item { padding : 1rem 0.5rem 1rem 1rem;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	height: 4rem;
	color: #868686;
	text-transform: uppercase;
}

.s-tab-item:hover {
	color: #333333;
}

.s-tab-item-active {
	color: #333333;
	border: 1px solid #FF791A;
	border-radius: 6px;
	border-bottom-right-radius: 0%;
	border-top-right-radius: 0%;
	border-right: none;
	background-color: #FAFAFA;
	width: 100%;
	border-bottom: 1px solid #FF791A;
}

}
@media ( max-width : 768px) {
	.s-tab { .s-tab-item { padding:0;
		
	}
}

}
//
MATERIAL TABS 
.mat-tab-header {
	border: none !important;
}

.mat-tab-label-container {
	display: flex;
	margin-top: 16px !important;
	padding: 0px 24px !important; . mat-tab-label { line-height : 4rem
	!important;
	cursor: pointer !important;
	display: flex;
	flex: 1;
	justify-content: center !important;
	align-items: center !important;
	color: #868686 !important;
	max-width: 50% !important;
	opacity: 1 !important;
	border-bottom: 1px solid #FF791A !important;
	background-color: none;
}

.mat-tab-label:hover {
	color: #333333 !important;
}

.mat-tab-label-active {
	color: #333333 !important;
	border: 1px solid #FF791A !important;
	border-radius: 6px !important;
	border-bottom-right-radius: 0% !important;
	border-bottom-left-radius: 0% !important;
	border-bottom: none !important;
	background-color: #FAFAFA !important;
}

.mat-ink-bar {
	display: none !important;
}

}
//
Side Nav

.s-sidenav-left {
	font-family: 'Nunito-Regular', 'Nunito';
	font-size: 13px;
	width: 23rem !important;
	border-left: 0.5rem;
	border-top: 0px;
	border-right: 0px;
	border-bottom: 0px;
	border-style: solid !important;
	border-color: #3B3B3B !important;
	background-color: #65656A !important;
	color: #C9C9C9 !important;
	outline: none;
	box-shadow: 0 0 0 0 !important;
	padding: 0px !important;
	margin: 0px !important;
	overflow: visible !important;
	button
	{
	margin-top
	:
	36px;
}

>
div { //
	box-shadow: -5px 0px 10px rgba(0, 0, 0, 0.35); md-checkbox { display :
	block;
	padding-bottom: 8px;
	padding-left: 0px !important;
}

md-select {
	padding-left: 0px !important;
}

md-input-container {
	padding-left: 0px !important;
}

}
.nav-logo-container {
	border-bottom: 1px solid #515151 !important;
}

.nav-logo {
	height: 3rem;
	width: 17.6rem;
	margin: 2.5rem 2.7rem 2.5rem 2.7rem !important;
	vertical-align: middle;
	line-height: 8rem;
	cursor: pointer;
}

.nav-heading {
	display: flex;
	border-bottom: 1px solid #515151 !important;
	padding: 1.5rem !important;
	height: 4rem; > div { margin-top : auto;
	margin-bottom: auto;
}

>
div:nth-child(1) {
	font-size: 24px;
	padding-right: 1.8rem;
	padding-left: 0.8rem;
	color: #FDA448;
}

>
div:nth-child(2) {
	color: #C9C9C9;
	font-size: 13px;
	font-weight: 300;
}

}
.nav-heading:hover {
	background-color: #3B3B3B;
	cursor: pointer;
}

.nav-content {
	background-color: #3B3B3B;
	border-bottom: 1px solid #65656A !important;
	padding: 0rem !important;
	color: white;
}

.nav-content.content-active {
	display: block;
	overflow-x: visible !important;
}

.nav-content:not (.content-active ){
	display: none;
}

.header-inactive {
	background-color: #65656A;
}

.header-active {
	background-color: #3B3B3B;
	border-bottom: 0px !important;
}

.content-inactive {
	display: none;
}

.content-active {
	display: block;
}

.utilities {
	background-color: #434343;
	height: 2rem;
	padding-left: 1rem;
	line-height: 2rem;
	vertical-align: middle;
}

.left-nav-container {
	overflow-y: auto;
	overflow-x: hidden;
	width: 24rem !important;
	padding-right: 1rem !important;
}

md-button-toggle-group {
	width: 23rem;
	box-shadow: none !important; md-button-toggle { color : #C9C9C9
	!important;
	font-family: Nunito;
	font-weight: 200;
}

.mat-button-toggle-checked {
	background-color: #434343 !important;
	display: inline !important;
}

.highlight-content { >label { >div{ background-color:#434343!important;
	
}

}
}
//
.highlight-content::before { //
	content: ""; //
	border: 1px solid; //
	border-radius: 50%; //
	height: 1.4rem; //
	width: 1.4rem; //
	position: absolute; //
	top: 0.75rem !important; //
	left: 22.1rem !important; //
	cursor: default; //
	background-color: #FDA448; //
	color: #3B3B3B; //
	z-index: 1;
	//
}

.mat-button-toggle-label-content {
	padding: 0rem 1.5rem 0rem 2.8rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	height: 3rem;
	font-family: Nunito;
	font-size: 13px;
	line-height: 3rem;
	vertical-align: middle;
}

.mat-button-toggle-label-content:hover {
	background-color: #434343;
}

.dash {
	font-size: 13px;
	color: #D7D7D7;
	padding-right: 2rem;
	width: 1.6rem;
}

}
}
//
CHECKBOX 
md-checkbox { .mat-checkbox-inner-container { height:1.9rem!important;
	width: 1.9rem !important;
	.
	mat-checkbox-ripple
	{
	display
	:
	none
	!important;
}

.mat-checkbox-background {
	background-color: white !important;
	border: 1px solid #868686 !important;
	border-radius: 3px;
	.
	mat-checkbox-checkmark-path
	{
	stroke
	:
	#FF791A
	!important;
}

}
.mat-checkbox-frame {
	border: none !important;
}

}
.mat-checkbox-inner-container:hover:not ([checked] ) { .mat-checkbox-background
	{ border:1pxsolid#333333!important;
	
}

}
&
:focus {
	outline: none !important;
}

}
//
Link buttons 
  a {
	border-width: 0px;
	color: #47AFE8;
	font-family: 'Nunito-SemiBold', 'Nunito SemiBold', 'Nunito';
	font-style: normal;
	font-size: 16px !important;
	font-weight: 400;
	line-height: normal;
	text-decoration: none;
	margin-right: 10px !important;
	white-space: nowrap;
	cursor: pointer;
}

/* Radio button */
.s-form-radio-button { .mat-radio-button { top:0;
	left: 0;
	align-items: center;
	height: 19px !important;
	width: 19px !important;
	box-shadow: none;
	font-weight: 400;
	border-width: 1px !important;
	border-color: dimgray;
	box-sizing: border-box;
}

.mat-radio-inner-circle { //
	top: 3px;
	color: #FF791A !important;
	background-color: #FF791A !important;
}

.mat-radio-outer-circle { //
	top: 3px;
	border-width: 1px !important;
	border-color: dimgray !important;
}

.mat-radio-checked .mat-radio-inner-circle {
	transform: scale(.65) !important;
}

.mat-radio-container {
	height: 19px !important;
	width: 19px !important;
}

}
//
Tooltip
.tooltip {
	display: inline;
	position: relative;
	font-family: $ s-font-nunito
}

.tooltip:hover:before {
	border: solid;
	border-color: #333333 transparent;
	border-width: 12px 12px 0 12px;
	content: "";
	left: 100%;
	transform: translatey(-50%) rotate(90deg);
	position: absolute;
	z-index: 99;
	top: 50%;
}

.tooltip:hover:after {
	background: #333;
	background: rgba(0, 0, 0, .8);
	border-radius: 3px;
	color: #fff;
	content: attr(title);
	padding: 12px 12px;
	position: absolute;
	z-index: 98;
	width: 220px;
	left: 106%;
	top: 50%;
	margin-left: 8px;
	transform: translateX(0%) translateY(-50%);
	height: auto;
	color: #C9C9C9
}

//
GRID

#s-table-container {
	background-color: white;
	position: relative;
	overflow: hidden;
	transition: 1s;
}

#s-table-inner-container {
	border-top: 1px solid #FF791A;
	position: relative;
	justify-content: center;
	text-align: left;
	color: #66656B;
	bottom: 0px;
	transition: 0.5s;
	width: 100%; //
	height: calc(100vh - 9.3rem - 40px);
}

.ag-font-style {
	user-select: text !important;
	-moz-user-select: text !important;
	-ms-user-select: text !important;
	-webkit-user-select: text !important;
}

.ag-root {
	border: 0px !important;
}

.ag-row:hover {
	background-color: #FFF2E9;
}

.ag-cell-no-focus {
	border: 0px !important;
}

.ag-row {
	font-weight: 600;
	font-family: 'Nunito';
	font-size: 12px !important;
	color: #666666;
	background-color: #FFFFFF;
	border-bottom: 1px solid #F2F2F2;
	padding: 0px 0px 0px 10px;
	padding-bottom: 8px;
	padding-top: 8px;
}

.ag-header-cell, .ag-floating-bottom {
	font-size: 12px !important;
	font-weight: 600;
	font-family: 'Nunito';
	color: #666666;
	background-color: #F2F2F2;
	padding: 0px 0px 0px 10px;
	border: 1px solid #E4E4E4;
	border-right: none !important;
}

.ag-cell.ag-cell-value#_entryidx {
	text-align: center;
}

.ag-bootstrap .ag-header-cell-label .ag-header-cell-text {
	text-transform: uppercase;
}

.grid-app-name {
	color: #47AFE8 !important;
}

.ag-header-cell-sorted-desc, .ag-header-cell-sorted-asc {
	/*background-color: #ececec !important;
   border: 1px solid #ddd;
   */
	height: inherit;
}

.ag-bootstrap .ag-floating-bottom .ag-row .ag-cell {
	font-weight: bold !important;
	margin-left: -10px;
}

.ag-bootstrap .ag-header-cell-label {
	padding: 2px 0px 0px 4px !important;
}

.ag-header-cell-text {
	font-weight: bold;
}

.ag-body .ag-row.ag-row-hover {
	background-color: rgba(255, 121, 26, 0.1);
}

.ag-bootstrap .ag-row-odd {
	background-color: #FFFFFF;
}

.ag-bootstrap .ag-row-selected {
	background-color: rgba(255, 121, 26, 0.1);
}

.ag-header-row {
	height: 2.8rem !important; > div { cursor : pointer;
	padding-top: 4px;
}

}
.ag-header-viewport {
	background-color: #F2F2F2;
}

.ag-grid-expando-open {
	position: absolute;
	padding: 3px;
	transform: rotate(180deg);
	font-size: 13px !important;
	color: #6B6B5B;
}

.ag-grid-expando-close {
	position: absolute;
	padding: 3px;
	transform: rotate(90deg);
	font-size: 13px !important;
	color: #6B6B5B;
}

.ag-grid-sort-asc {
	position: absolute;
	padding: 3px;
	color: #FF791A !important;
}

.ag-grid-sort-desc {
	position: absolute;
	padding: 3px;
	transform: rotate(180deg);
	color: #FF791A !important;
}

.ag-row {
	font-weight: 600;
	font-family: 'Nunito';
	font-size: 12px !important;
	color: #666666;
	background-color: #FFFFFF;
	border-bottom: 1px solid #F2F2F2;
	padding: 0px 10px 0px 10px;
	padding-bottom: 8px;
	padding-top: 8px;
}

.ag-row-level-1 {
	background-color: #FAFAFA !important;
}

.ag-cell-not-inline-editing {
	border-right: none !important;
}

.ag-cell {
	padding-left: 15px !important;
	height: 60% !important;
}

.ag-root ::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	background-color: #F5F5F5;
}

.ag-root ::-webkit-scrollbar-track-piece {
	background-color: #F5F5F5;
	border-radius: 10px;
}

.ag-root ::-webkit-scrollbar-thumb {
	background: gray;
	border-radius: 10px;
}

.ag-root::-webkit-scrollbar-track {
	background-color: #F5F5F5;
	border-radius: 10px;
}

.ag-bootstrap .ag-cell-not-inline-editing {
	padding: 0px;
	padding-top: 6px;
	padding-bottom: 6px;
	height: 100% !important;
}

.ag-bootstrap .cell-box {
	height: 29px
}

.ag-cell-focus, .ag-cell-no-focus {
	border: none !important;
}

.ag-cell:focus {
	border: none !important;
	outline: none;
}

.ag-group-value {
	margin-left: 30px;
	float: none;
}

.ag-body-viewport {
	overflow-x: auto !important;
	height: 100%;
}

.ag-body-container {
	float: left;
}

.ag-cell:hover { .hover-icon { display:inline;
	
}

}
.s-warn {
	color: $s-c-warn;
	padding-right: 10px;
	float: left;
}

.ag-cell:hover { .hover-icon { display:inline;
	
}

}
.hover-icon {
	display: none;
	color: #47AFE8 !important;
	cursor: pointer;
}

.mat-menu-content {
	background: #333333 !important;
	padding-top: 0px !important;
	padding-bottom: 0px !important; > span { color : #c9c9c9 !important;
	height: 29px !important;
	border-bottom: 1px solid #666666;
	font-size: 13px !important;
	padding-left: 10px;
	padding-right: 10px;
}

>
span:hover {
	background: #666666 !important
}

}
.mat-menu-panel {
	border-radius: 3px;
}

.ag-full-width-row {
	background-color: #FAFAFA !important;
}

.ag-grid-footer {
	background-color: #FAFAFA;
	height: 24px;
	position: relative;
	font-size: 12px;
	bottom: 0%;
	font-family: $ s-font-nunito;
	>
	div
	{
	>div{
	padding-top
	:
	4px;
}

}
}
.clear-filters {
	cursor: pointer;
	padding-left: 4px;
	margin-top: auto;
	margin-bottom: auto;
}

.header-icons {
	color: #868686;
	vertical-align: middle;
	cursor: pointer;
}

.header-icons:hover {
	color: black;
}

.search-box-container {
	background-color: white !important;
	padding: 5px;
	border-radius: 5px;
	border: 1px solid #FF791A !important;
	height: 25px; > input { border : none;
	height: 25px;
	padding-left: 8px;
}

>
input:hover {
	outline: none;
}

>
input:focus {
	outline: none;
}

}
.header-content {
	line-height: 39px;
	display: flex; > div { padding-right : 10px;
	cursor: pointer;
}

}
.filter-header {
	background-color: #FAFAFA;
	height: 39px;
	position: relative;
	margin-left: 0px;
}

.filter-header-content {
	background-color: #CDCDCD;
	height: auto;
	position: relative;
	margin-left: 0px;
	padding: 3px 8px 8px 0px;
}

.filter-box-container {
	display: flex;
	background-color: transparent;
	padding: 5px;
	border-radius: 5px;
	margin-left: 8px;
}

.filter-box-container>input {
	box-sizing: border-box;
	font-family: Nunito;
	font-size: 13px;
	padding-left: 5px;
	border-radius: 3px;
	border: 1px solid #CCCCCC;
	color: #000000;
	outline: none !important; &:
	focus: :-webkit-input-placeholder{
        opacity: 0;
}

&
:disabled {
	background-color: #F2F2F2;
	color: #999999;
}

&
:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset;
	box-shadow: 0 0 0px 1000px #FFFFFF inset;
	-webkit-text-fill-color: #000000;
}

&
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	color: #999999;
}

&
::-moz-placeholder { /* Firefox 19+ */
	color: #999999;
}

&
:-ms-input-placeholder { /* IE 10+ */
	color: #999999;
}

&
:-moz-placeholder { /* Firefox 18- */
	color: #999999;
}

&
:focus:not ([disabled] ) {
	border: 1px solid #FF791A;
}

&
:active:not ([disabled] ) {
	border: 1px solid #FF791A;
}

&
:hover:not ([disabled] ) {
	border: 1px solid #FF791A;
}

&
:focus:hover:not ([disabled] ) {
	border: 1px solid #FF791A;
}

}
.text-nunito {
	font-family: $ s-font-nunito !important;
	padding-left: 10px;
	font-size: $s-font-small !important;
}

.ag-cell>span>.s-link {
	font-size: 13px !important
}

.ag-cell>.s-link {
	font-size: 13px !important
}

.table-dot {
	vertical-align: middle;
	color: #CCCCCC;
	font-size: 4px;
}

.ag-cell-edit-input {
	width: 99% !important;
	border: 1px solid #CCCCCC;
	border-radius: 3px;
	height: 21px !important;
}

.mat-sidenav-container {
	background-color: white;
}

::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-track {
	background-color: #F5F5F5;
	border-radius: 10px;
}

::-webkit-scrollbar-thumb {
	background: gray;
	border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
	background: #555;
}

::-webkit-scrollbar-track-piece {
	background-color: #F5F5F5;
	border-radius: 10px;
}

.chkDiv {
	width: 111px;
	display: table-cell;
	text-align: left;
}

.checkbox .cr:hover {
	/* Circle 19px x 19px, Border 1px #868686 */
	border: 1px solid #333333
}

.chkbxContainer {
	width: 350px;
	display: table-cell;
	padding-left: 5px;
}

//
Toolbar

.box-shadow {
	border-width: 0px;
	position: absolute;
	left: 23.5rem;
	top: 0px;
	width: 8px;
	height: 100%;
	background-color: inherit;
	border: none;
	border-radius: 0px;
	-moz-box-shadow: -5px 0px 10px rgba(0, 0, 0, 0.349019607843137);
	-webkit-box-shadow: -5px 0px 10px rgba(0, 0, 0, 0.349019607843137);
	box-shadow: -5px 0px 10px rgba(0, 0, 0, 0.349019607843137);
}

/*date picker styles */
md-datepicker-content {
	background-color: #333333 !important;
	color: #C9C9C9 !important;
	border-radius: 10px !important;
	font-family: 'Nunito-Regular', 'Nunito'; . mat-calendar-controls {
	background-color : #333333 !important;
	color: #C9C9C9 !important;
}

.mat-calendar-period-button .mat-button .ng-star-inserted {
	color: #C9C9C9 !important;
}

.mat-datepicker-content .ng-star-inserted {
	background-color: #333333 !important; //
	border-radius: 10px !important;
}

.cdk-overlay-pane {
	border-radius: 10px !important;
}

.mat-calendar-arrow {
	border-top-color: #C9C9C9 !important;
}

.mat-calendar-table-header-divider::after {
	background: #C9C9C9 !important;
}

.mat-datepicker-content .ng-star-inserted {
	box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px
		rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12) !important;
	display: block !important;
	background-color: #333333 !important;
	color: #C9C9C9 !important;
}

.mat-calendar-header .ng-star-inserted {
	padding: 8px 8px 0 8px !important;
	background-color: #333333 !important;
	color: #C9C9C9 !important;
}

:not (.mat-calendar-body-disabled ):hover>.mat-calendar-body-cell-content:not
	(.mat-calendar-body-selected ), .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not
	(.mat-calendar-body-selected ) {
	background-color: #434343 !important;
}

.mat-calendar-table-header th .ng-star-inserted {
	background-color: #333333 !important;
	text-align: center !important;
	padding: 0 0 8px 0 !important;
	color: #C9C9C9 !important;
}

.mat-calendar-table-header-divider {
	background-color: #333333 !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	color: #C9C9C9 !important;
	::
	after
	{
	color
	:
	#C9C9C9
	!important;
}

}
.mat-calendar-table-header th {
	background-color: #333333 !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	color: #C9C9C9 !important;
}

.mat-calendar-body-label {
	background-color: #333333 !important;
	padding: 7.14286% 0 7.14286% 7.14286% !important;
	height: 0 !important;
	line-height: 0 !important;
	transform: translateX(-6px) !important;
	text-align: left !important;
	color: #C9C9C9 !important;
	:
	hover
	{
	background-color
	:
	#434343
	!important;
}

}
.mat-calendar-body-cell-content {
	position: absolute !important;
	top: 5% !important;
	left: 5% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 90% !important;
	height: 90% !important;
	border-width: 1px !important;
	border-style: solid !important;
	border-radius: 50% !important;
	border-color: 50% !important;
	background-color: #333333 !important;
	color: #C9C9C9 !important;
	cursor: pointer !important;
	:
	hover
	{
	background-color
	:
	#434343
	!important;
}

:active {
	background-color: #FF791A !important;
	transition: cubic-bezier(0.39, 0.575, 0.565, 1) !important;
}

:focus {
	background-color: #FF791A !important;
	transition: 2s !important;
}

}
.mat-calendar-body-selected {
	background-color: #FF791A !important;
	color: #C9C9C9 !important;
}

.mat-calendar-arrow {
	color: #C9C9C9 !important;
}

.mat-calendar-body-today:not (.mat-calendar-body-selected ) {
	border: 2px solid #FF791A !important;
	color: #C9C9C9 !important;
	background-color: #434343 !important;
}

}
//
STEPPER WIZARD 
.s-wizard {
	margin: auto;
	margin-top: 30px;
	display: flex;
	flex-wrap: nowrap; >
	div: not(: last-child){
     flex:1;
}

.s-wizard-row {
	display: flex;
	flex-wrap: nowrap;
}

.s-step-title {
	display: inline-block;
	padding: 5px;
	font-family: Nunito;
	font-size: 13px;
	text-transform: uppercase;
	color: #333333;
	transform: translateX(calc(( 100% - 4.9rem)*-0.5));
}

.s-box {
	width: 4.9rem;
	height: 4.9rem;
	font-family: Nunito;
	font-size: 20px;
	border-radius: 3px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.s-box-pending {
	background-color: #F2F2F2;
	color: #CCCCCC
}

.s-box-active {
	background-color: #FF791A;
	color: #333333;
}

.s-box-done {
	background-color: #99CC00;
	color: white;
}

.s-box-line {
	flex: 1;
	height: 2.4rem;
	border-bottom: 1px dashed #CCCCCC;
}

.s-solid {
	border-bottom: 1px solid #CCCCCC;
}

}
@media ( max-width : 675px) {
	.s-wizard { .s-box { width:3rem;
		height: 3rem;
		font-size: 16px;
	}
	.s-box-line {
		height: 1.5rem;
		border-bottom: 1px dashed #CCCCCC;
	}
	.s-step-title {
		transform: translateX(calc(( 100% - 3rem)*-0.5));
	}
}

}
//
Title pane level - 2 .title-pane2 {
	border-left: 3px solid #FF791A;
	padding-left: 20px;
	font-size: 16px !important;
	font-weight: 200 !important;
	margin-bottom: 20px;
	text-transform: uppercase;
	height: 29px;
	>
	div
	{
	padding-top
	:
	4px
}

}
//
.s-env-name {
	font-weight: 100;
	font-size: 14px;
	color: #F8702F;
	text-transform: uppercase
}

.s-text-button-active {
	min-width: 10rem;
	height: 2.9rem;
	font-family: Nunito;
	font-size: 13px;
	color: #000;
	background-color: #ff791a;
	border-radius: 1.5rem;
	border: none;
	cursor: pointer;
	padding: 0 20px;
	outline: 0;
}

.s-hint-text {
	font-family: Nunito;
	font-size: 12px;
	color: #68696B;
}

.s-text-body {
	font-family: Nunito;
	font-size: 14px;
	color: #333333;
	font-weight: 400;
}

.content-row {
	display: inline-flex;
}

.3424242 {
	display: flex;
}
}