/* ----------------------------------------------------------------
	Header and Nav/Sidebar Only Styles
-----------------------------------------------------------------*/
.sidebar {
    background-color: #005d79 !important;
    color: #fff;
}

.sidebar-toggle {
    color: #005d79;
    font-size: 2em !important;
	cursor: pointer;
	height:initial !important;
	width:initial !important;
	margin: 0px;
	position:relative;
}

body.pushable {
    background-color: #FFF !important;
}

.pusher {
  padding: 20px;
}

/* We're only dimming on mobile/tablets, so this is mobile & tablets only */
.ui.sidebar.visible ~ .pusher.dimmed {
		width: 100% !important;
		transition: all .2s linear !important;
	}

.ui.sidebar.visible ~ .pusher {
    width: calc(100% - 260px);
	transition: all .2s linear !important;
}

#toggle-btn {
  display: block;
}

.ui.left {
  transition: width .2s linear;
}

.sidebar.labeled.icon, .sidebar .labeled.icon {
  width: 84px !important;
  font-size: 1rem !important;
}

.menu.labeled > .item:hover {
	background: rgba(255,255,255,.1) !important;
}

.pusher.push {
  transform: translate3d(84px,0,0) !important;
  width: calc(100% - 84px) !important;
  transition: all .2s linear !important;
}
.pusher.pushall {
  transform: translate3d(0,0,0) !important;
  transition: all .2s linear !important;
}


.sidebar hr{
    opacity: .3;
    margin: 10px 0;
}

.sidebar .usercircle
,.sidebar .usercircle div
,.sidebar-icon
,.hide-sidebar-narrow {
    display: inline-block;
}

.sidebar-content {
    padding: 0 25px;
}

.sidebar-icon {
    font-size: 28px;
    padding: 5px 0;
}

.sidebar-icon-label {
    margin-top: 0;
}

.sidebar-content a {
    color: #fff;
    padding: 3px 0;
    display: block;
}

.sidebar.labeled .usercircle {
    padding-left: 16px;
}

.user-container {
	color:#FFF; 
	font-size:1.1rem; 
	background:rgba(255,255,255,.1) !important; 
	padding: 4px; 
	white-space: nowrap; 
	border-radius: 40px 8px 8px 40px;
}

.sidebar.labeled .user-container {
	border-radius:0px;
}

.sidebar a{
    text-decoration: none;
}

.sidebar a:hover{
    text-decoration: none;
}

.labeled .sidebar-content {
    padding: 0 0;
}

.sidebar .ui.accordion .title:not(.ui) {
    color: #fff;
    padding-bottom: 0;
}

.nested {
	background: none !important;
	font-size: 1.25rem !important;
}

.nested > .item {
	cursor:pointer;
	padding: 1em .5em .5em .1em !important;
	border-bottom: 1px solid #0D7B9C;
}

.sidebar-toplink {
	padding: 0px !important;
	background: none !important;
	min-width: 0px !important;
}

.item.onpage {
	background: rgba(255,255,255,.1) !important;
	color:#FFF !important;
}

.nested .menu {
	display:none;
}

.nested > .item > .menu > .item {
	padding-left: 1.75em !important;
}

.page-title-bar {
    padding-bottom: 20px;
}

.page-title-bar h1 {
    display: inline;
}

.page-title-bar-divider{
    margin-top: 8px;
}

.date-today {
    text-align: right;
    font-style: italic;
}

.logo-wide img {
    padding: 25px 0;
}

.logo-narrow, .website-title {
    color: #fff;
    font-weight: 300;
    text-align: center;
    font-size: 18px;
}

.logo-narrow {
    display: none;
	font-weight:400;
}

.website-title {
    margin-top: -20px;
    padding-bottom: 15px;
	white-space: nowrap;
}

.item:before {
    background: none !important;
}

.usercircle:before {
    content: attr(data-letters);
    display: inline-block;
    font-size: 1em;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5em;
    text-align: center;
    border-radius: 50%;
    vertical-align :middle;
    margin-right: 1em;
    color: #fff;
	background: #777;
	border:1px solid #FFF;
}
i.usercircle:before {
    line-height: unset;
    color: unset;
}
/* ----------------------------------------------------------------
	End Header and Nav/Sidebar Only Styles
-----------------------------------------------------------------*/


/* ----------------------------------------------------------------
	Colors
-----------------------------------------------------------------*/
.usercircle.pink:before {
    background: #e03997;
}
.usercircle.red:before {
    background: #B03060;
}
.usercircle.orange:before {
    background: #FE9A76;
}
.usercircle.yellow:before {
    background: #FFD700;
}
.usercircle.olive:before {
    background: #b5cc18;
}
.usercircle.green:before {
    background: #21ba45;
}
.usercircle.teal:before {
    background: #1cb4c9;
}
.usercircle.blue:before {
    background: #0E6EB8;
}
.usercircle.violet:before {
    background: #6435c9;
}
.usercircle.purple:before {
    background: #B413EC;
}
.usercircle.brown:before {
    background: #a5673f;
}
.usercircle.grey:before {
    background: #A0A0A0;
}
.usercircle.black:before {
    background: #000;
}
/* ----------------------------------------------------------------
	End Colors
-----------------------------------------------------------------*/


/* ----------------------------------------------------------------
	General Layout Styles
-----------------------------------------------------------------*/
.container {
	width:100%;
	position:relative;
    padding: 0px;
}

hr {
    height: 1px;
    background-color: #ccc;
    border: none;
}
h1 {
    font-weight: 600;
}

.pure-g [class *="pure-u"] {
    font-family: 'Lato', sans-serif;
    padding: 0 15px;
}

.full-width {
    padding: 0 0 !important;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-center .pure-img{
    display: inline-block !important;
}

.ui-widget-content {
	min-width:240px;
	height: 450px !important;
}

.dealerView{
	flex-grow: initial !important;
}

/* ----------------------------------------------------------------
	End General Layout Styles
-----------------------------------------------------------------*/


/* ----------------------------------------------------------------
	Spacer Utility Classes
-----------------------------------------------------------------*/
.spacer-top-5 {
    margin-top: 5px;
}
.spacer-top-10 {
    margin-top: 20px;
}
.spacer-top-20 {
    margin-top: 20px;
}
.spacer-top-23 {
    margin-top: 23px;
}
.spacer-top-30 {
    margin-top: 30px;
}
.spacer-top-40 {
    margin-top: 40px;
}
.spacer-top-45 {
    margin-top: 45px;
}
.spacer-top-50 {
    margin-top: 50px;
}
.spacer-bottom-10{
    margin-bottom: 10px;
}
.spacer-bottom-20{
    margin-bottom: 20px;
}
.spacer-bottom-40 {
    margin-bottom: 40px;
}
.spacer-bottom-50 {
    margin-bottom: 50px;
}
.spacer-bottom-60 {
    margin-bottom: 60px;
}
/* ----------------------------------------------------------------
	End Spacer Utility Classes
-----------------------------------------------------------------*/


/* ----------------------------------------------------------------
	Other Various Styling
-----------------------------------------------------------------*/

.etaText{
	min-width: 150px;
}

.font-lighter {
    font-weight: 500 !important;
}

.details-page .details {
    font-size: 16px;
    line-height: 22px;
}

td.details-control {
    max-width: 40px;
}

td.details-control .fa-plus{
    display: block;
}
td.details-control .fa-minus{
    display: none;
}
tr.shown td.details-control .fa-minus{
    display: block;
}
tr.shown td.details-control .fa-plus{
    display: none;
}

.no-sort::after {
    display: none!important;
}

.no-sort {
    pointer-events: none!important;
    cursor: default!important;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.login-form .segment {
    padding: 50px;
}

.login-form .forgot-password {
    text-align: right;
    display: block;
}

.login-form img {
    padding: 0 100px;
}

.login-form .website-title {
    color: #005d79;
    margin-top: 10px;
    padding-bottom: 0;
    font-weight: 400;
    font-size: 24px;
}

/* Dashboard */

.dashboard  {
	position: relative;
}

.ui.search>.results .result .content, .ui.search>.results .result .content .title {
	padding: 0px !important;
}

.ui.search>.results .result {
	padding: 20px;
}

.dashboard .card, .report .card {
    width: 100% !important;
    margin-bottom: 30px !important;
}

.dashboard .card-body {
    height: 285px;
    overflow-y: auto;
}

.card-container {
	position: relative;
}

.dashboard .placeholder {
	background:#e2e2e2;
	border-radius: 12px;
	height: 425px;
}

.dashboard .header {
    margin-top: unset !important;
    line-height: unset !important;
}

.dashboard .header .drag-handle, .dashboard .header .dropdown{
    float: right;
}

.dashboard .content{
    padding: 20px !important;
}

.dashboard .card table td{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

.dashboard .card-footer, .report .card-footer {
    background-color: #ededed !important;
}

.dashboard .card-footer a {
    text-decoration: none;
    color: #333333 !important;
}

.dashboard .header:hover {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.dashboard .header:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}
/* End Dashboard */

.report .card-footer, .report .accordion, .report .button {
    display: inline-block;
}

.report .cards .form button {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.report .cards .form button.clear {
    position: absolute;
    bottom: 10px;
    right: 120px;
}

.report .cards .form button.not-in-advanced {
    position: unset;
    bottom: unset;
    right: unset;
    margin-top: 23px;
}

.report .cards .form .active button {
    margin-bottom: 15px;
}

/* Buttons/Links */
.ui.primary.button, .ui.primary.button:focus {
    background-color: #005d79;
    font-weight: 300;
    text-transform: uppercase;
}

.ui.primary.button:hover {
    background-color: #0d7b9c;
}

.ui.mini.button {
    padding: 5px 10px;
    text-transform: uppercase;
}

button.invite{
	float:right;
}

.inviteUserButton{
	text-decoration: none;
	color:white !important;
}

.newFileButton{
	text-decoration: none;
	color:white !important;
}

.dt-buttons > .ui.button.recordsBtn{
	background: #005D79 !important;
	color: white !important;
}

.deleteUser{
	background-color: red !important;
}

.delete{
	background-color: red !important;
}

.docs.header {
	text-align: center;
    margin-bottom: 10px;
	font-size: 1em !important;
	text-decoration:none;
}

.docs.card {
	height: 90%;
}

.ui-widget-content.card {
	-webkit-box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #b4b4b4;
    box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #b4b4b4;
}

.ui-widget-content.raised.card {
	-webkit-box-shadow: 0 0 0 1px #b4b4b4, 0 2px 4px 0 rgba(34,36,38,.12), 0 2px 10px 0 rgba(34,36,38,.15);
	box-shadow: 0 0 0 1px #b4b4b4, 0 2px 4px 0 rgba(34,36,38,.12), 0 2px 10px 0 rgba(34,36,38,.15);
}

a {
    color: #000;
    text-decoration: underline;
}

a:hover {
    text-decoration: underline;
}

.dataTables_wrapper .input {
    padding-right: 15px;
}

.forgotLoginFormContainer{
	margin-right: auto;
	margin-left: auto;
}

#data-table > tbody > tr{
	cursor: pointer;
}

#data-table > tbody > tr:hover{
	background-color: #ededed
}

#crl-data-table > tbody > tr:hover{
	background-color: #ededed
}

.fields > .pure-g > .pure-u-1{
	padding-bottom: 15px;
}

#data-table td.sortField {
    display:none; 
}

.underQuota{
	background: #f9fafb;
	color:red;
}

.metQuota{
	background: green;
	color: white;
}

.card-body-extended{
	/* height: 328px !important; */
}

.userQuickLinks{
	width: 50%;
	margin-right: auto;
	margin-left:auto;
}

.userQuickLinks > a{
	text-decoration: none !important;
	color: #005D79;
}

#repQuotaFooter > tr{
	padding-top: 15px;
}

.adminView{
	visibility: hidden;
}

div.card-footer.priceList{
	border: 0px solid white !important;
	background-color: initial !important;
}

.shipDateDisclaim{
	font-style: italic;
}

/* ----------------------------------------------------------------
	End Other Various Styling
-----------------------------------------------------------------*/


/* ----------------------------------------------------------------
	Mobile Styling
-----------------------------------------------------------------*/
/* Mobile Show/Hide Utility Classes */
/* hideonmobile */
@media screen and (max-width:567px) {
    .hideonmobile{display:none !important}
}
/* showonmobile */
@media screen and (min-width:568px){
    .showonmobile{display:none !important}
}
/* hideonsmall */
@media screen and (max-width:767px) {
    .hideonsmall{
		display:none !important;
	}
	
	.ui.table:not(.unstackable) tr{
		display: flex !important;
	}
	
	.messageBoardContainer > .pure-u-1-4{
		padding: 0px !important;
	}
	
	.wholesalePriceList{
		margin-top: 10%;
	}
	
	.ui.mini.button.fabricAvail{
		padding: 5px 10px;
		font-size: initial !important;
	}
	
	.ui.card>.content>.header:not(.ui){
		font-size: 18px;
	}
	
	.dt-table{
		overflow-x: scroll;
	}
	
	.table.dataTable.table thead th.sorting:after{
	    top: 6px;
		right: 15px;
	}
	
	.table.dataTable.table thead th.sorting_desc:after{
		top: 2px;
		right: 15px;
	}
	
	div.title > button.ui.primary.button{
		position: relative;
		width: 100%;
		bottom: initial !important;
		right: initial !important;
		margin-top: 20px;
	}
	
	div.filterButtons{
		margin-right: auto;
		margin-left: auto;
	}
	
	div.filterButtons > button.ui.primary.button{
		position: relative;
		width: 100%;
		bottom: initial !important;
		right: initial !important;
		margin-top: 20px;
	}
	
	div.large.ui.label{
		width: inherit;
		text-align: center;
		float: initial !important;
		margin-top: 20px;
	}
	
	.ui.primary.button.invite{
		width: inherit;
	}
	
	.ui.celled.table tr td, .ui.celled.table tr th {
		min-width: 105px;
	}
	
	.ui.celled.table.customerInquiry tr td, .ui.celled.table.customerInquiry tr th {
		min-width: 125px;
	}
	
	.ui.celled.table.fabricInquiry tr td, .ui.celled.table.fabricInquiry tr th {
		min-width: 130px;
	}
	
	.ui.celled.table.orderInquiry tr td, .ui.celled.table.fabricInquiry tr th {
		min-width: 130px;
	}
	
	.ui.celled.table.bestSellersFabrics tr td, .ui.celled.table.bestSellersFabrics tr th {
		min-width: 110px;
	}
	
	.ui.celled.table.bestSellersStyles tr td, .ui.celled.table.bestSellersStyles tr th {
		min-width: 110px;
	}
	
	.ui.celled.table.priceList tr td, .ui.celled.table.priceList tr th {
		min-width: 110px;
	}
	
	.ui.celled.table.manageUserTable tr td, .ui.celled.table.manageUserTable tr th {
		min-width: 190px;
	}
	
	.ui.celled.table.manageFileCategories tr td, .ui.celled.table.manageFileCategories tr th {
		min-width: 160px;
	}
	
	.ui.table:not(.unstackable) tr>td, .ui.table:not(.unstackable) tr>th{
		min-width: 100px;
	}
	
	.ui.table.swatchSummary:not(.unstackable) tr>td, .ui.table:not(.unstackable) tr>th{
		min-width: 130px;
	}
	
	.ui.table.bestSellingFabrics:not(.unstackable) tr>td, .ui.table:not(.unstackable) tr>th{
		min-width: 130px;
	}
	
	.ui.table.recentOrders:not(.unstackable) tr>td, .ui.table:not(.unstackable) tr>th{
		min-width: 130px;
	}
	
	div.card-footer.priceList{
		width: 100%;
	}
	
	div.card-footer > button.priceList{
		position: relative !important;
		width: 100%;
		bottom: initial !important;
		right: initial !important;
	}
	
	div.field > button.ui.primary.button{
		position: relative;
		width: 100%;
		bottom: initial !important;
		right: initial !important;
		margin-top: 20px;
	}
	
	.repQuotaTable{
		overflow-x: scroll;
	}
	
	.messageBoard{
		overflow-x: scroll;
	}
	
	.paginate_button.item.next{
		display: none;
	}
	
	.paginate_button.item.previous{
		display: none !important;
	}
	
	.ui.stackable.menu.pagination{
		flex-direction: row;
		width: 100%;
	}
	
	.ui.stackable.menu.pagination > .item{
		min-width: 1em !important;
	}
	    
	
	.ui.stackable.menu > .item{
		width: initial !important;
		padding: 8px !important;
	}
	
	.ui.stackable.menu > .item.active{
		/*padding-top: inherit !important;*/
	}
	
	div.dt-buttons{
		display: grid !important;
	}
	
	div.dt-buttons > .ui.button{
		border-bottom: 1px solid rgba(34,36,38,.15);
		border-radius: initial !important;
	}
	
	#data-table_filter > label{
		text-align: center !important;
		float: left;
		margin-bottom: 15px !important;
	}
	
	.ui.stackable.grid:not(.vertically)>.row{
		text-align: center;
	}
	
	

/* showonmedium */
@media screen and (min-width:1024px) {
    .showonmedium{display:none !important}
}

/* hideonmedium */
@media screen and (max-width:1023px) {
    .hideonmedium{display:none !important}
}

/* hideonmobile-portrait */
@media screen and (max-width:567px) and (orientation:portrait) {
    .hideonmobile-portrait{display:none !important}
}
/* hideonmobile-portrait */
@media screen and (max-width:567px) and (orientation:landscape) {
    .showonmobile-portrait{display:none !important}
}
/* showonmobile-portrait */
@media screen and (min-width:568px) {
    .showonmobile-portrait{display:none !important}
}

/* hideonmobile-landscape */
@media all and (min-width: 568px) and (max-width:767px) and (orientation:landscape) {
    .hideonmobile-landscape{display:none !important}
}
/* End Mobile Show/Hide Utility Classes */


@media all and (max-width: 567px) {
    .container.rightside-margin {
        margin-right: unset;
    }
    .logo-wide {
        display: block;
    }
    .logo-narrow {
        display: none;
    }
    .login-form .segment {
        padding: 0;
    }
    .login-form .ui.segment {
        -webkit-box-shadow: unset;
        box-shadow: unset;
        margin: unset;
        padding: unset;
        border-radius: unset;
        border: unset;
    }
    .login-form img {
        padding: 40px 20px 0 20px;
    }
    .date-today {
        text-align: left;
    }
    .dashboard .card table td{
        max-width: unset;
        white-space: unset;
        overflow: unset;
        text-overflow: unset;
    }
}

@media all and (max-width: 768px) {
    .drag-handle {
        display: none;
    }
	
    .ui.mini.button {
        font-size: 9px;
    }
	
    .form .field {
        padding-bottom: 15px;
    }

}

/* ipad portrait and landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {
	
}



/* ----------------------------------------------------------------
	End Mobile Styling
-----------------------------------------------------------------*/