/* style.css */
/* fonts section == START */
    @font-face {
        font-family: montserratBlack;
        src: url('../fonts/Montserrat-Black.ttf');
    }
    .montserratBlack {
        font-family: montserratBlack, sans-serif !important;
    }

    @font-face {
        font-family: montserratBlackItalic;
        src: url('../fonts/Montserrat-BlackItalic.ttf');
    }
    .montserratBlackItalic {
        font-family: montserratBlack, sans-serif !important;
    }

    @font-face {
        font-family: montserratBold;
        src: url('../fonts/Montserrat-Bold.ttf');
    }
    .montserratBold {
        font-family: montserratBold, sans-serif !important;
    }

    @font-face {
        font-family: montserratBoldItalic;
        src: url('../fonts/Montserrat-BoldItalic.ttf');
    }
    .montserratBoldItalic {
        font-family: montserratBoldItalic, sans-serif !important;
    }

    @font-face {
        font-family: montserratExtraBold;
        src: url('../fonts/Montserrat-ExtraBold.ttf');
    }
    .montserratExtraBold {
        font-family: montserratExtraBold, sans-serif !important;
    }

    @font-face {
        font-family: montserratExtraBoldItalic;
        src: url('../fonts/Montserrat-ExtraBoldItalic.ttf');
    }
    .montserratExtraBoldItalic {
        font-family: montserratExtraBoldItalic, sans-serif !important;
    }

    @font-face {
        font-family: montserratExtraLight;
        src: url('../fonts/Montserrat-ExtraLight.ttf');
    }
    .montserratExtraLight {
        font-family: montserratExtraLight, sans-serif !important;
    }

    @font-face {
        font-family: montserratExtraLightItalic;
        src: url('../fonts/Montserrat-ExtraLightItalic.ttf');
    }
    .montserratExtraLightItalic {
        font-family: montserratExtraLightItalic, sans-serif !important;
    }

    @font-face {
        font-family: montserratItalic;
        src: url('../fonts/Montserrat-Italic.ttf');
    }
    .montserratItalic {
        font-family: montserratItalic, sans-serif !important;
    }

    @font-face {
        font-family: montserratLight;
        src: url('../fonts/Montserrat-Light.ttf');
    }
    .montserratLight {
        font-family: montserratLight, sans-serif !important;
    }

    @font-face {
        font-family: montserratLightItalic;
        src: url('../fonts/Montserrat-LightItalic.ttf');
    }
    .montserratLightItalic {
        font-family: montserratLightItalic, sans-serif !important;
    }

    @font-face {
        font-family: montserratMedium;
        src: url('../fonts/Montserrat-Medium.ttf');
    }
    .montserratMedium {
        font-family: montserratMedium, sans-serif !important;
    }

    @font-face {
        font-family: montserratMediumItalic;
        src: url('../fonts/Montserrat-MediumItalic.ttf');
    }
    .montserratMediumItalic {
        font-family: montserratMediumItalic, sans-serif !important;
    }

    @font-face {
        font-family: montserratRegular;
        src: url('../fonts/Montserrat-Regular.ttf');
    }
    .montserratRegular {
        font-family: montserratRegular, sans-serif !important;
    }

    @font-face {
        font-family: montserratSemiBold;
        src: url('../fonts/Montserrat-SemiBold.ttf');
    }
    .montserratSemiBold {
        font-family: montserratSemiBold, sans-serif !important;
    }

    @font-face {
        font-family: montserratSemiBoldItalic;
        src: url('../fonts/Montserrat-SemiBoldItalic.ttf');
    }
    .montserratSemiBoldItalic {
        font-family: montserratSemiBoldItalic, sans-serif !important;
    }

    @font-face {
        font-family: montserratThin;
        src: url('../fonts/Montserrat-Thin.ttf');
    }
    .montserratThin {
        font-family: montserratThin, sans-serif !important;
    }

    @font-face {
        font-family: montserratThinItalic;
        src: url('../fonts/Montserrat-ThinItalic.ttf');
    }
    .montserratThinItalic {
        font-family: montserratThinItalic, sans-serif !important;
    }
/* fonts section -- END */
/* replacing datatables */
.dt-buttons{
	float: unset !important;
	margin-bottom: 1%;
}
/* replacing boostrap */
.text-left {
    text-align: left !important;
}
.text-center {
    text-align: center !important;
}
.text-right {
    text-align: right !important;
}
.capitalizeFirstLetter {
    text-transform: capitalize;
}
.capitalizeAll {
    text-transform: uppercase;
}
.doUnderline {
	text-decoration: underline;
}
.noUnderlineNoColor {
    text-decoration: none !important;
    color: inherit !important;
}
.fontSize0p97x {
    font-size: 97% !important;
}
.fontSize1p05x {
    font-size: 105% !important;
}
.fontSize1p2x {
    font-size: 120% !important;
}
.fontSize1p25x {
    font-size: 125% !important;
}
.fontSize1p5x {
    font-size: 150% !important;
}
.fontSize2x {
    font-size: 200% !important;
}
.fontSize2p5x {
    font-size: 250% !important;
}
.heavyFont {
    font-weight: bolder !important;
}
.colorBlack {
    color: black !important;
}
.colorWhite {
    color: white !important;
}
.colorRed {
    color: red !important;
}
.floatLeft {
    float: left !important;
}
.floatRight {
    float: right !important;
}
.cursorPointer {
	cursor: pointer !important;
}
.width90px {
	width: 90px;
}
.width95px {
	width: 95px;
}
.width10p {
	width: 10%;
}
.width33pt33p {
	width: 33.33%;
}
.width14p {
	width: 14%;
}
.width15p {
	width: 15%;
}
.width16p {
	width: 16%;
}
.width20p {
	width: 20%;
}
.width25p {
	width: 25%;
}
.width30p {
	width: 30%;
}
.width35p {
	width: 35%;
}
.width40p {
	width: 40%;
}
.width70p {
	width: 70%;
}
.halfWidth {
	width: 50%;
}
.fullWidth {
	width: 100%;
}
.fullWidthHeight {
    width: 100% !important;
    height: 100% !important;
}
.centeredMargin {
    margin: 0 auto !important;
}
.marginAutoLeftRight {
	margin-right: auto !important;
	margin-left: auto !important;
}
.marginBottom0p {
	margin-bottom: 0px !important;
}
.marginBottom2p {
	margin-bottom: 2%;
}
.marginBottom3p {
	margin-bottom: 3%;
}
.marginBottom11p {
	margin-bottom: 11% !important;
}
.margin0 {
	margin: 0;
}
.margin2p {
	margin: 2%;
}
.marginTop2p {
	margin-top: 2%;
}
.marginTop18px {
	margin-top: 18px;
}
.marginTopBottom1pCenter {
	margin: 1% auto;
}
.positionRelative {
	position: relative;
}
.displayInFlex {
	display: inline-flex;
}
.hideMe {
	visibility: hidden;
	opacity: 0;
}
.showMe {
	visibility: visible !important;
	opacity: 1 !important;
}
.removeMe {
	display: none;
}
/* replacing boostrap */

/*replacing angular-datatables*/
.dataTables_length select {
	border: 1px solid rgb(169, 169, 169) !important;
}
/*replacing angular-datatables*/

.capitalizeFirstLetter {
	text-transform: capitalize;
}
.uppercase {
	text-transform: uppercase;
}
.strikethrough {
	text-decoration: line-through;
}
.italicize {
	font-style: italic;
}
.wordWrap {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/*GENERIC VIEWS*/
body{
	overflow-x: hidden;
	font-size: 16px;
	color: unset !important;
}

.overflowHide {
	overflow-y: hidden;
}

.mainBackground {
	/*background-color: #F4F2ED;*/
	background-color: white;
}

/* === FONT SECTION === */
	.font-topBar {
		color: white; /*color: #002D3E;*/
		font-family: montserratLight;
		/*text-align: justify;*/
		font-size: 13px;
		-webkit-text-stroke-width: 0.25px;
		line-height: 202%;
		letter-spacing: 0.2em;
	}

	.font-topBar a {
		color: white; /*color: #002D3E;*/
		font-family: montserratLight;
	}

	.font-menuBar {
		color: white; /*color: #002D3E;*/
		/*font-family: montserratLight;*/
		font-family: montserratExtraLight;
		/*text-align: justify;*/
		font-size: 14px;
		/*-webkit-text-stroke-width: 0.25px;*/
		line-height: 202%;
		letter-spacing: 0.2em;
	}

	.font-menuBar a{
		color: white; /*color: #002D3E;*/
		font-family: montserratLight;
	}

	.font-topBar:hover, .font-menuBar:hover {
		color: #F7CC61; /* this RGB config is equivalent to CMYK(3%, 19%, 73%, 0%) */
	}

	.font-contentHeaderExtraBold{
		/*color: rgb(5, 35, 59);  this RGB config is equivalent to CMYK(96%, 70%, 50%, 54%) */
		/* color: #002D3E;  this RGB config is equivalent to CMYK(96%, 70%, 50%, 54%) */
		/*font-family: montserratExtraBold;*/
		font-family: montserratRegular;
		text-align: justify;
		font-size: 21px;
		letter-spacing: 0.19em;
		/*padding-bottom: 50px;*/
	}

	.font-contentHeaderExtraBoldTight{
		/*color: rgb(5, 35, 59);  this RGB config is equivalent to CMYK(96%, 70%, 50%, 54%) */
		/* color: #002D3E;  this RGB config is equivalent to CMYK(96%, 70%, 50%, 54%) */
		font-family: montserratExtraBold;
		text-align: justify;
		font-size: 21px;
		letter-spacing: 0.09em;
		/*padding-bottom: 50px;*/
	}

	.font-contentBodyLightLarge{
		/* color: #002D3E;  this RGB config is equivalent to CMYK(96%, 70%, 50%, 54%) */
		font-family: montserratLight;
		text-align: left;
		font-size: 15px;
		letter-spacing: 0.10em;
		/*-webkit-text-stroke-width: 0.25px;*/
	}

	.font-contentBodyExtraBoldLarge{
		/* color: #002D3E;  this RGB config is equivalent to CMYK(96%, 70%, 50%, 54%) */
		font-family: montserratExtraBold;
		text-align: left;
		font-size: 15px;
		letter-spacing: 0.10em;
		/*-webkit-text-stroke-width: 0.25px;*/
	}

	.font-contentBodyMisc {
		/* color: #002D3E;  this RGB config is equivalent to CMYK(96%, 70%, 50%, 54%) */
		font-family: montserratLight;
		text-align: justify;
		font-size: 14px;
		letter-spacing: 0.05em;
		margin-bottom: 2em;
	}
	.font-focus {
		color: #F7CC61;
	}

	.font-contentBodyMiscOnly {
		/* color: #002D3E;  this RGB config is equivalent to CMYK(96%, 70%, 50%, 54%) */
		font-family: montserratLight;
		font-size: 14px;
		letter-spacing: 0.05em;
	}

/* === MISC === */
	.firstUserError {
		width: 40%;
		margin: 20px auto; 
	}
	.firstUserError:hover {
		color: inherit;
	}
	.backgroundImageNoOpacity {
		background-image: url('../img/topLogo.png'); background-repeat: no-repeat; background-position: 50% 10%;
	}
	.previewerProfileP {
		margin-top: 7%;
	}

	.backgroundImageNoPic {
		position: relative;
		overflow: hidden;
		margin-top: 5vw; margin-left: 2.5vw; width: 95vw;
	}

	.backgroundImage {
		position: relative;
		overflow: hidden;
		margin-top: 5vw; margin-left: 5vw; width: 88vw;
	}

	.backgroundImage:after {
		/*margin-top: 5vw;
		height: 10em;*/

		content: '';
		display: block;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;

		z-index: 1;
		opacity: 0.05;
		position: absolute;
		background-image: url('../img/topLogo.png');
		background-repeat: no-repeat;
		background-position: center 50%;
	}

	.comingSoon img {
		width: 20%; display: block; margin: 3% auto;
	}
	.customBtn {
		margin: 0px; text-decoration: none !important; cursor: pointer; border: 1px solid rgba(0, 45, 62, 0.6); background-color: #F9F9F4; border-radius: 5px !important; line-height: 1.5;
		/*font-size: 65%;*/
		color: #002D3E; padding: 6px 10px 6px 10px; 
	}
	.horizontalLines {
		align: center; border: lightgrey solid 1px;
	}
	.lightPadding {
		padding: 5px 10px;
	}
	.lightPaddingPercent {
		padding: 1% 2%;
	}
	.leB {
		/*background-color: #F9F9F4;*/
		background-color: #76233D;
		width: 20%;
		font-size: 19px;
		border-color: rgba(0, 45, 62, 0.6);
		/*color: #002D3E;*/
		color: white;
	}

	.inputBox {
		font-family: montserratLight;
		/*display: block;*/
		/*left: 42.7%;*/
		position: inherit;
		/*width: 100%;*/
		/*height: 34px;*/
		padding: 3px 6px;			    
		margin-bottom: 5px;
		font-size: 14px;
		line-height: 1.42857143;
		color: #555;
		background-color: #fff;
		background-image: none;
		border: 1px solid #ccc;
		border-radius: 2px;
		-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
		box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
		-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
		-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
		transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	}
	.errorText {
		color: red;
	}
	.errorTextStrong {
	    color: red;
	    font-weight: bolder;
	    font-size: 120%;
	}

	.mailContent {
		/*margin-top: 0%; width: 30%; position: relative; left: 36%;*/
		margin: 10px auto;
	}

	.mailContent th {
		padding-left: 3%;
	}

	.usermgmt {
	}

	.usermgmt th {
		padding-left: 1%;
	}
	.previewBox {
		background-color: #F9F9F4; border: 1px dashed black; padding: 10px;
	}

	.dataTables_wrapper {
		/* color: #002D3E;  this RGB config is equivalent to CMYK(96%, 70%, 50%, 54%) */
		font-family: montserratLight;
		text-align: justify;
		font-size: 14px;
		letter-spacing: 0.05em;
		margin-bottom: 2em;
	}

	.viewSelector {
		margin: 2.5% 0%;
	}
	.codingBox {
		padding: 1% 3%; color: black; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	}
	.usersTable {
		font-weight: bold;
	}
	.usersTable td {
		width:25%;
	}
	.userAction {
		white-space: nowrap; 
	}

	/* === NICE IOS checkbox. Thanks to @danielhannih! https://codemyui.com/ios-toggle-switch/ === */
		/* Checkbox body */
			.toggleSwitch label {
			  display: block;
			  width: 54px;
			  height: 32px;
			  margin: 0px auto;
			  border-radius: 100px;
			  transition: all 0.2s ease-in-out;
			  -webkit-transition: all 0.2s ease-in-out;
			  background-color: #E6E9EC;
			}

			.toggleSwitch input {
			  display: none;
			}


		/* The toggle */
			.toggleSwitch i {
			  height: 28px;
			  width: 28px;
			  background: #ffffff;
			  display: inline-block;
			  border-radius: 100px;
			  margin-top: 2px;
			  margin-left: 2px;
			  transition: all 0.2s ease-in-out;
			  -webkit-transition: all 0.2s ease-in-out;
			  pointer-events: none;
			  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
			}

			.toggleSwitch label:hover>i {
			  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.20);
			  transform: scale(1.01);
			}

			.toggleSwitch input:checked+label>i {
			  margin-left: 24px;
			}

			.toggleSwitch label:active {
			  background-color: #A6B9CB;
			}

			.toggleSwitch .toggleSwitch label:active>i {
			  width: 34px;
			  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
			}

			.toggleSwitch input:checked+label:active>i {
			  margin-left: 18px;
			}

			.toggleSwitch input:checked+label {
			  background-color: #008FFF;
			}

	/* === the tiny version === */
		/* Checkbox body */
			.toggleSwitch_tiny label {
			  display: block;
			  width: 40px;/*width: 54px;*/
			  height: 19px;/*height: 32px;*/
			  margin: 0px auto;
			  border-radius: 100px;
			  transition: all 0.2s ease-in-out;
			  -webkit-transition: all 0.2s ease-in-out;
			  background-color: #E6E9EC;
			}

			.toggleSwitch_tiny input {
			  display: none;
			}


		/* The toggle */
			.toggleSwitch_tiny i {
			  height: 10px;/*height: 28px;*/
			  width: 10px;/*width: 28px;*/
			  background: #ffffff;
			  display: inline-block;
			  border-radius: 100px;
			  margin-top: 2px;
			  margin-left: -20px;/*margin-left: 2px;*/
			  transition: all 0.2s ease-in-out;
			  -webkit-transition: all 0.2s ease-in-out;
			  pointer-events: none;
			  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
			}

			.toggleSwitch_tiny label:hover>i {
			  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.20);
			  transform: scale(1.01);
			}

			.toggleSwitch_tiny input:checked+label>i {
			  margin-left: 24px;
			}

			.toggleSwitch_tiny label:active {
			  background-color: #A6B9CB;
			}

			.toggleSwitch_tiny .toggleSwitch_tiny label:active>i {
			  width: 34px;
			  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
			}

			.toggleSwitch_tiny input:checked+label:active>i {
			  margin-left: 18px;
			}

			.toggleSwitch_tiny input:checked+label {
			  background-color: #008FFF;
			}

/* keyframe rotator */
@-webkit-keyframes zaRotator {
    0% {
        -webkit-transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes zaRotator {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.chartLoader {
	animation: zaRotator 1.2s linear infinite;
	color: orange; font-size: 50px;}
.dividingHr {width: 70%; margin: 4% auto;}

/*#controlRow{width: 50%;}*/

.chartNav{position: absolute;top: 12.5px;}
#leftNav{float: left;}
#rightNav{float: right;right: 0px;}
.calendarIconDiv {width: 10%; margin: 0 auto;}
.calendarCtrl {width: 65%; margin: 0 auto;}
#endDate {width: 30%; margin: 0 10px; float: left;}

/* === WEB/PC CSS === */
@media screen and (min-width: 901px) {
	.desktop_view {
		display: block;
	}
	.mobile_view {
		display: none;
	}
	.mobile_view_strict {
		display: none;
	}
	.desktop_view_strict {
		display: block;
	}

	/* chart */
		.dateInput {width: 35%; margin: 0 10px; float: left;}

	/* === MENU SECTION MOVEMENT. Check respective views for specific stylings === */
	
		.headerWrap {
			background-color: black; position: relative; height: 4.5em; padding: 1%; border-bottom: #002D3E solid 2px;
		}
		.menuText {
			height: 30px;
		}
		.showMenu {
			visibility: hidden;
			opacity: 0;
			transition: all 0.6s ease-in-out;
		}
		.dropDownMenu:hover .showMenu {
			visibility: visible;
			opacity: 1;
			transition: all 0.6s ease-in-out;
		}

		.showPersonal {
			visibility: hidden;
			opacity: 0;
			transition: all 0.6s ease-in-out;
		}
		.dropDownPersonal:hover .showPersonal {
			visibility: visible;
			opacity: 1;
			transition: all 0.6s ease-in-out;
		}
		.menuItem {
			z-index: 999; text-align: center; background-color: #002D3E; border: white solid 2px; padding: 3% 1%;
		}
		.menuItem img {
			width: 20%;
		}
		.menuItemSub {
			position: absolute; margin-left: 149px; 
			 z-index: 999; font-size: 80%; float: left; text-align: left; background-color: #002D3E; border: white solid 2px; padding: 1%;
		}
		.menuItemSub ul {
			list-style: none; padding-left: 5px;
		}

		.s_stats {
			width: 170px; margin-top: -170px;
		}
		.s_edits {
			width: 230px; margin-top: -129px;
		}
		.s_comms, .d_stats {
			width: 260px; margin-top: -86px;
		}
		.s_store, .d_edits {
			width: 230px; margin-top: -43px;
		}

		.userNamePadding {
			padding-left: 3%;
		}


	.dropDownMenu {
		margin-left: -0.8%; font-size: 18px !important; position: relative; float: left; width: 150px; cursor: pointer; top: 3px; left: 20px;
	}
	.showMenu {
		z-index: 999; position: absolute;
		margin-top: 26px;
		width: 150px; left: -22px;
	}

	.dropDownPersonal {
		position: relative; float: right; width: 70px; right: -20px; font-size: 40px; color: white; top: -5px; cursor: pointer; 
	}
	.showPersonal {
		z-index: 999; position: absolute; margin-top: 33px;
		/*width: 250px;*/
		/*width: 300px;*/
		
		width: auto;
		min-width: 300px;

		right: 6px; background-color: #002D3E; border: white solid 1px; padding: 0% 7.5%;
	}

	/* index/login page */
	.hrOnLogin {
		width: 50%;
	}

	/* profile page */
		.profileWrap {
			margin-left: 3%;
		}

		.profileIconDiv {
			width: 20%; text-align: center; float: left; 
		}
		.profileIconDiv img {
			width: 70%; display: block; margin: 3% auto;
		}
		.profileIconDivFirst {
			margin-left: 8vw;
		}

	/* order mgmt */
		.itemsPurchased ul {
			list-style: none;
		}
		.orderEditButton {
			padding: 2px 20px 2px 20px; border-radius: 0px
		}

	/* article mgmt */
		#articleDate {margin: 0px 0px 5px 0px}
		.desktopfloatLeft {
			float: left !important;
		}
		.articleCtrlAddDiv {
			background-color: #002D3E; width: 100%;
			border-radius: 20px;
		}
		.articleCtrlPlusIcon {
			color: white; font-size: 2vw;
		}

		.articleCtrlEditDiv {background-color: green;/*background-color: #002D3E*/; width: 100%;
			border-radius: 20px;
		}

		.articleCtrlPencilIcon {color: white; font-size: 2vw;}

		.articleCtrlDeleteDiv {background-color: red; /*width: 100%;*/
			border-radius: 20px;
		}

		.articleCtrlTrashIcon {color: white; font-size: 2vw;}

		.articleListContainer {width: 97%; padding: 1%; max-height: 100%; overflow-y: auto; height: 40vw;}

		.articleWrap {width: 10vw; height: 10vw; margin: 15px; float: left; border: 1px solid black; position: relative;}

		.articleWrapControl {display: none; position: absolute; width: 10vw; height: 10vw; padding: 5px; border-width: 2px 2px 25px 2px; border-style: solid;
			border-color: green;/*border-color: #002D3E;*/
		}

		.articleWrap img {width: 10vw; height: 10vw; padding: 0px 2px 2px 0px;}

		.articleBtnCtrlMain {float: right;}

		.articleCtrlBackDiv {}

		.articleCtrlBackIcon {color: #002D3E; font-size: 50px;}

		.articleCtrlSaveDiv {background-color: green; border-radius: 20px;}
		.articleCtrlUploadIcon {color: white; font-size: 30px;}

		.articleCtrlSavingDiv {background-color: transparent; border-radius: 20px;}
		.articleCtrlSavingIcon {
			animation: zaRotator 1.2s linear infinite;
			color: orange; font-size: 30px;}

		.portraitOutWrapDiv, .landscapeOutWrapDiv {float: left; margin-right: 7.5px;}
		
		.portraitOutWrapDiv img {width: 15vw; height: 20em; margin-left: 0; border: 1px solid black;}
		.landscapeOutWrapDiv img {width: 27vw; height: 15em; margin-left: 0; border: 1px solid black;}

		.portraitWrapControl {display: none;
			position: absolute; background-color: rgba(255, 255, 255, 0.5); width: 15vw; height: 20em;}
		.landscapeWrapControl {display: none; position: absolute; background-color: rgba(255, 255, 255, 0.5); width: 27vw; height: 15em;}

		.portraitDetails, .landscapeDetails {position: relative; top: 5%; width: 60%; margin: 0 auto;}
		.portraitCtrlDeleteWrap, .landscapeCtrlDeleteWrap {position: absolute; bottom: 10%; left: 11%; width: 100%;}
		.portraitCtrlDeleteDiv, .landscapeCtrlDeleteDiv {background-color: red; width: 80%;}

		.portraitUploadPlaceholder {margin: 0 auto; text-align: center; width: 15vw; position: relative;}
		.portraitUploadPlaceholder img {z-index: 1; width: 15vw; height: 20em; margin-left: 0; border: 1px solid black;}
		.portraitUploadProgressDiv {position: absolute; width: 80%; left: 10%; top: 45%;}
		.portraitNotGood {background-color: #ff5454 !important;}
		.portraitNotGoodMsg {color: white; font-weight: bold; /*width: 13vw;*/ height: 20em; margin-left: 0; position: absolute; margin-top: 20px;}

		.landscapeUploadPlaceholder {margin: 0 auto; text-align: center; width: 27vw; position: relative;}
		.landscapeUploadPlaceholder img {z-index: 1; width: 27vw; height: 15em; margin-left: 0; border: 1px solid black;}
		.landscapeUploadProgressDiv {position: absolute; width: 80%; left: 10%; top: 45%;}
		.landscapeNotGood {background-color: #ff5454 !important;}
		.landscapeNotGoodMsg {color: white; font-weight: bold; width: 27vw; height: 15em; margin-left: 0; position: absolute; margin-top: 20px;}
		
		.portraitAddNewOutWrap, .landscapeAddNewOutWrap {display: block !important; float: left; margin-right: 7.5px; background-color: #f5f5f5; border: 1px solid black;}
		
		.portraitAddNewWrap {width: 14.8vw; height: 19.9em; margin-left: 0; position: relative;}
		.landscapeAddNewWrap {width: 26.8vw; height: 14.5em; margin-left: 0; position: relative;}

		#optionUploadWrapText.portrait, #moodUploadWrapText.portrait{position: absolute; z-index: 4; background-color: rgba(0, 0, 0, 0.7); height: 107%; left: 0px; top: 0px;}
		#optionUploadWrapText.landscape, #moodUploadWrapText.landscape{position: absolute; z-index: 4; background-color: rgba(0, 0, 0, 0.7); height: 109.5%; left: 0px; top: 0px;}
		#optionDropAreaSplash, #moodDropAreaSplash{color: white; position: relative; font-size: 150%; top: 30%;}
		
		.portraitAddNewDiv, .landscapeAddNewDiv {position: relative; top: 20%;}
		
		.portraitAddNewPlus {border-radius: 50%; border: 2px dashed rgba(0, 0, 0, 0.3); font-size: 350%; width: 50%; margin: 15px auto; opacity: 0.4;}
		.landscapeAddNewPlus {border-radius: 50%; border: 2px dashed rgba(0, 0, 0, 0.3); font-size: 350%; width: 23%; margin: 15px auto; opacity: 0.4;}

		.portraitMoodDetails {position: relative; top: 35%; width: 60%; margin: 0 auto;}
		.landscapeMoodDetails {position: relative; top: 15%; width: 60%; margin: 0 auto;}

		.portraitMoodCtrlDeleteWrap {position: relative; top: 55%; left: 11%;}
		.landscapeMoodCtrlDeleteWrap {position: relative; top: 40%; left: 11%;}

		.stockInput {width: 33.33%;}

		.pricesWrapDiv, .pricesWrapRightDiv, .pricesWrapLeftDiv {
			border-top: 1px solid rgba(0, 0, 0, 0.2);
		}
		.pricesWrapRightDiv {
			border-right: 1px solid rgba(0, 0, 0, 0.2);
		}
		.pricesWrapLeftDiv {
			border-left: 1px solid rgba(0, 0, 0, 0.2);
		}
		.pricesDiv {
			border-bottom: 1px solid rgba(0, 0, 0, 0.2);
			border-top: 1px solid rgba(0, 0, 0, 0.2);
		    padding: 5px;
		    margin: 5px 0px;
		}
		.addCurBtn {
			margin-top: 20px;
		}
		.delCurBtn {position: absolute; right: -40.5%; top: 5%; font-size: 150%; background-color: rgba(125, 125, 125, 0.5); border-radius: 50%; width: 30px; height: 30px; text-align: center;}

	/* collections mgmt */
		.toggleAdjust {
			top: 7px !important;
		}
		.toggleAdjust input:not(:checked) + label {
			/*input:checked + label*/
			background-color: red !important;
		}
		.toggleAdjust i {
			position: relative;
			top: -8px;
		}

		.toggleWrap_tiny {
			position: absolute;/*position: relative;*/
			top: 16px;/*top: 2.75vh;*/
			right: 0%;/*left: -4%;*/
			height: 50px;
			margin: 0 auto;
			width: 20%;/*width: fit-content;*/
		}
		.toggleOff_tiny {
			float: left; color: #E6E9EC; padding: 0 5px; width: 45px; height: 20px;
		}
		.toggleMain_tiny {
			float: left;  padding: 0 5px;
		}
		.toggleOn_tiny {
			float: left; color: #008FFF; padding: 0 5px; width: 20px; height: 45px;
		}

		.addCollectionWrap {
			width: 40%;
		}
		.addCollectionInput {
			width: 60%; margin: 0 auto; float: left;
		}
		.delCollectionBtn {
		    position: absolute;
		    right: 29%;
		    top: 12px;
		    font-size: 150%;
		    background-color: rgba(125, 125, 125, 0.5);
		    border-radius: 50%;
		    width: 30px;
		    height: 30px;
		    float: left;
		    text-align: center;
		}
		.btnInCatMgmt {border-radius: 20px; font-size: 15px; font-weight: bold; border: 1px solid rgba(0,0,0,0.3);}
		.subDivClass {width: 45%; height: 20px; margin: 5px auto;}

		.collectionMgmtWrap{
			width: 33.33%; margin: 0 auto;
		}
	/* edits */
		.desktopWidth30p {
			width: 30%;
		}
		.instagramBox {
			/*width: 40%;
			height: 4em;*/
			width: 20vw;
			height: fit-content;
			border: 1px dashed black; padding: 10px; margin: 0 auto;
		}
		.instagramBoxText {
			/*float: left;position: relative;top: 5px; margin-right: 30px;*/
			position: relative;top: 5px;
		}
		.toggleWrap {
			position: relative;
			top: 3vh;
			left: -4%;
			height: 50px;
			margin: 0 auto; width: fit-content;
		}
		.toggleOff {
			float: left; color: #E6E9EC; padding: 0 5px; width: 45px; height: 20px;
		}
		.toggleMain {
			float: left;  padding: 0 5px;
		}
		.toggleOn {
			float: left; color: #008FFF; padding: 0 5px; width: 20px; height: 45px;
		}

		.radioSelector {
			float: left; margin-right: 3.5%;
		}
		.radioSelector input {
			margin-right: 5%;
		}
		.regRadioWidth {
			width: 80px;
		}
		.largeRadioWidth {
			width: 110px;
		}

		#dropAreaUploadText {position: absolute; z-index: 4; background-color: rgba(0, 0, 0, 0.7); width: 90%; height: 100%;}
		#dropAreaSplash {color: white; position: relative; font-size: 5vw; top: 30%;}

		.imageListContainer {width: 92%; padding: 1%; /*max-height: 100%; overflow-y: auto; height: 40vw; */background-color: rgba(125, 125, 125, 0.1); border: 1px dotted rgba(0,0,0,0.3);}
		.imageListWrap {width: 12vw; height: 18vw; margin: 15px; float: left; border: 2px solid rgba(0,0,0,0.3); position: relative; border-radius: 15px;}
		.imageListWrap img {width: 12vw; height: 18vw; padding: 0px 4px 4px 0px; border-radius: 15px;}

		.imageListAddNewOutWrap {display: block !important; float: left; margin-left: 15px; margin-right: 7.5px; background-color: #f5f5f5; border: 1px solid black; margin-top: 15px; border-radius: 15px;}
		.imageListAddNewWrap {width: 14vw; height: 16.45vw; margin-left: 0px;}
		.imageListAddNewPlus {border-radius: 50%; border: 2px dashed rgba(0, 0, 0, 0.3); font-size: 350%; width: 50%; margin: 15px auto; opacity: 0.4;}

		.imageListBtnWrap {position: absolute; bottom: 7px; width: 100%;}
		.imageListBtnDiv { width: 45%; float: left; border-radius: 30px; margin: 0 2.5%;}
		.imageListZoomIcon { background-color: green}
		.imageListTrashIcon { background-color: red}
		.imageSelected { border: 2px solid rgba(0, 255, 0, 1); }

		.imageListUploadPlaceholder {margin: 0 auto; text-align: center; /*width: 15vw;*/ position: relative; height: 100%;}
		/*.imageListUploadPlaceholder img {z-index: 1; width: 15vw; height: 62vw; margin-left: 0; border: 1px solid black;}*/
		.imageListUploadProgressDiv {position: absolute; width: 80%; left: 10%; top: 45%;}
		.imageListNotGood {background-color: #ff5454 !important;}
		.imageListNotGoodMsg {color: white; font-weight: bold; /*width: 80%; height: 20em; padding: 0% 2%; margin-left: 0;*/ position: absolute; margin-top: 20px; font-size: 100%;}


		.imageZoomMainImg { text-align: left;}
		#imageZoomed {max-height: 62vw;}
		.imageListTrashText { color: white; background-color: red; /*border-radius: 30px;*/ margin: 1% 0%; width: 150px; font-size: 110%;}
		.imageListTrashText:hover {background-color: rgba(255, 0, 0, 0.8); color: white; }

		.imageZoomLeftControl {
            z-index: 998 !important; cursor: pointer; position: absolute; top: 35vw; width: 50px; left: 5%;
        }
        .leftArrow {
            background-color: white; border: 2px solid transparent; border-radius: 50%; padding: 20% 29% 19% 27%; box-shadow: 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
        }
        .imageZoomRightControl {
            z-index: 998 !important; cursor: pointer; position: absolute; top: 35vw; width: 50px; right: 5%;
        }
        .rightArrow {
            background-color: white; border: 2px solid transparent; border-radius: 50%; padding: 20% 27% 19% 29%; box-shadow: 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
        }
        .leftArrow i, .rightArrow i {
            font-size: 25px; color: black;
        }
}

/* === SMALLER SCREENS CSS === */
@media screen and (max-width: 900px) {

	.desktop_view {
		display: none;
	}
	.mobile_view {
		display: block;
	}
	.mobile_view_strict {
		display: none;
	}
	.desktop_view_strict {
		display: block;
	}

	/* chart */
		.dateInput {width: 100%; margin: 5px 10px; float: left;}

	/* === MENU SECTION MOVEMENT. Check respective views for specific stylings === */
		
		.headerWrap {
			background-color: black; position: relative; height: 4.5em; padding: 1%; border-bottom: #002D3E solid 2px;
		}
		.menuText {
			height: 30px;
		}
		.showMenu {
			visibility: hidden;
			opacity: 0;
			transition: all 0.6s ease-in-out;
		}
		.dropDownMenu:hover .showMenu {
			visibility: visible;
			opacity: 1;
			transition: all 0.6s ease-in-out;
		}

		.showPersonal {
			visibility: hidden;
			opacity: 0;
			transition: all 0.6s ease-in-out;
		}
		.dropDownPersonal:hover .showPersonal {
			visibility: visible;
			opacity: 1;
			transition: all 0.6s ease-in-out;
		}
		.menuItem {
			z-index: 999; text-align: center; background-color: #002D3E; border: white solid 2px; padding: 3% 1%;
			width: 90%;
		}
		.menuItem img {
			width: 20%;
		}
		.menuItemSub {
			position: absolute;
			margin-left: 135px; /*margin-left: 149px; */
			 z-index: 999; font-size: 80%; float: left; text-align: left; background-color: #002D3E; border: white solid 2px; padding: 1%;
		}
		.menuItemSub ul {
			list-style: none; padding-left: 5px;
		}

		.menuItemSub li {
			font-size: 90% !important;
		}

		.s_stats {
			width: 64vw; margin-top: -164px;
		}
		.s_edits {
			width: 64vw; margin-top: -124px;
		}
		.s_comms, .d_stats {
			width: 64vw; margin-top: -83px;
		}
		.s_store, .d_edits {
			width: 64vw; margin-top: -41px;
		}

		.userNamePadding {
			padding-left: 3%;
		}


	.menuText i {
		margin-left: 17%;
	}

	.dropDownMenu {
		margin-left: -0.8%; font-size: 18px !important;
		position: absolute;
		float: left; width: 150px; cursor: pointer;
		top: 18px;
		left: 4vw;
	}
	.showMenu {
		z-index: 999; position: absolute;
		margin-top: 25px;
		width: 150px; left: -22px;
	}

	.dropDownPersonal {
		position: absolute;
		float: right; width: 70px;
		/*right: -9px;*/
		right: 0px;
		font-size: 40px; color: white;
		top: 7px;
	}
	.showPersonal {
		z-index: 999; position: absolute; margin-top: 36px;
		/*width: 250px;*/
		/*width: 300px;*/
		
		width: auto;
		min-width: 300px;

		/*right: 9px;*/
		right: 0px;
		background-color: #002D3E; border: white solid 1px; padding: 0% 7.5%;
	}

	.selectedOrder {
		background-color: #acbad4;
	}

	/* index/login page */
	.mobileWidth40p {
		width: 40% !important;
	}
	.mobileWidthFull {
		width: 100% !important;
	}
	.hrOnLogin {
		width: 90%;
	}

	/* profile page */
		.profileWrap {
			margin-left: 3%;
			height: 90vw;
		}

		.profileIconDiv {
			width: 40%; text-align: center; float: left; 
			margin-left: 6%;
		}
		.profileIconDiv img {
			width: 70%; display: block; margin: 3% auto;
		}
		.profileIconDivFirst {
			margin-left: 8vw;
		}

	/* edits */
		.instagramBox {
			width: 200px; height: 4em; border: 1px dashed black; padding: 10px; margin: 0 auto;
		}
		.instagramBoxText {
			/*float: left;position: relative;top: 5px; margin-right: 30px;*/
			display: none;
		}
		.toggleWrap {
			position: relative;
			/*top: 3vh;
			left: -4%;
			*/
			margin: 0 auto; width: fit-content;
		}
		.toggleOff {
			float: left; color: #E6E9EC; padding: 0 5px; width: 45px; height: 20px;
		}
		.toggleMain {
			float: left;  padding: 0 5px;
		}
		.toggleOn {
			float: left; color: #008FFF; padding: 0 5px; width: 20px; height: 45px;
		}

		.radioSelector input {
			margin-right: 5%;
		}
		.newFileName{
			 width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
		}

		#dropAreaUploadText {position: absolute; z-index: 4; background-color: rgba(0, 0, 0, 0.7); width: 90%; height: 100%;}
		#dropAreaSplash {color: white; position: relative; font-size: 5vw; top: 30%;}

		.imageListContainer {/*width: 92%; padding: 1%; max-height: 100%; overflow-y: auto; height: 40vw; */background-color: rgba(125, 125, 125, 0.1); border: 1px dotted rgba(0,0,0,0.3);}
		.imageListWrap {width: 70%; /*height: 18vw; */margin: 35px auto; /*float: left;*/ border: 2px solid rgba(0,0,0,0.3); position: relative; border-radius: 15px; text-align: center;}
		.imageListWrap img {width: 100%;/*; height: 18vw; padding: 0px 4px 4px 0px;*/ border-radius: 15px;max-height: 100vw;}

		.imageListAddNewOutWrap {width: 70%; display: block !important; margin: 35px auto; background-color: #f5f5f5; border: 1px solid black; border-radius: 15px;}
		.imageListAddNewWrap {/*width: 14vw; height: 16.45vw; margin-left: 0px;*/}
		.imageListAddNewPlus {border-radius: 50%; border: 2px dashed rgba(0, 0, 0, 0.3); font-size: 350%; width: 50%; margin: 15px auto; opacity: 0.4;}

		.imageListBtnWrap {position: absolute; bottom: 7px; width: 100%;}
		.imageListBtnDiv { width: 45%; float: left; border-radius: 30px; margin: 0 2.5%;}
		.imageListZoomIcon { background-color: green}
		.imageListTrashIcon { background-color: red}
		.imageSelected { border: 2px solid rgba(0, 255, 0, 1); }

		.imageListUploadPlaceholder {margin: 0 auto; text-align: center; /*width: 15vw;*/ position: relative; height: 100%;}
		/*.imageListUploadPlaceholder img {z-index: 1; width: 15vw; height: 62vw; margin-left: 0; border: 1px solid black;}*/
		.imageListUploadProgressDiv {position: absolute; width: 80%; left: 10%; top: 50%;}
		.imageListNotGood {background-color: #ff5454 !important;}
		.imageListNotGoodMsg {color: white; font-weight: bold; /*width: 80%; height: 20em; padding: 0% 2%; margin-left: 0;*/ position: absolute; margin-top: 20px; font-size: 100%;}


		.imageZoomMainImg { text-align: left;}
		.imageListTrashText { color: white; background-color: red; /*border-radius: 30px;*/ margin: 1% 0%; width: 150px; font-size: 110%;}
		.imageListTrashText:hover {background-color: rgba(255, 0, 0, 0.8); color: white; }

		.imageZoomLeftControl {
            z-index: 998 !important; cursor: pointer; position: absolute; top: 105vw; width: 50px; left: 1%;
        }
        .leftArrow {
            background-color: white; border: 2px solid transparent; border-radius: 50%; padding: 20% 29% 19% 27%; box-shadow: 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
        }
        .imageZoomRightControl {
            z-index: 998 !important; cursor: pointer; position: absolute; top: 105vw; width: 50px; right: 1%;
        }
        .rightArrow {
            background-color: white; border: 2px solid transparent; border-radius: 50%; padding: 20% 27% 19% 29%; box-shadow: 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
        }
        .leftArrow i, .rightArrow i {
            font-size: 25px; color: black;
        }
        #imageZoomed {
        	width: 75%;
        	max-height: 100vw;
        }

	/* article mgmt */
		.articleCtrlAddDiv {
			background-color: #002D3E; width: 100%;
			border-radius: 20px;
		}
		.articleCtrlPlusIcon {
			color: white; /*font-size: 2vw;*/font-size: 7vw;
		}

		.articleCtrlEditDiv {background-color: green;/*background-color: #002D3E*/; width: 100%;
			border-radius: 20px;
		}

		.articleCtrlPencilIcon {color: white; /*font-size: 2vw;*/font-size: 7vw;}

		.articleCtrlDeleteDiv {background-color: red; /*width: 100%;*/
			border-radius: 20px;
		}

		.articleCtrlTrashIcon {color: white; /*font-size: 2vw;*/font-size: 7vw;}

		.articleListContainer {width: 97%; padding: 1%; max-height: 100%; overflow-y: auto; height: 90vw;}

		.articleWrap {width: 50%; height: 100%; margin: 7vw auto; border: 1px solid black; position: relative;}

		.articleWrapControl {display: none; position: absolute; width: 100%; height: 100%; padding: 5px; border-width: 2px 2px 25px 2px; border-style: solid;
			border-color: green;/*border-color: #002D3E;*/
		}

		.articleWrap img {width: 100%; /*height: 10vw;*/ padding: 0px 2px 2px 0px;}

		.articleHeaderBtnRow {height: 80px; width: 80vw;}

		.addBtnSomeMore {
			position: relative;
			top: 12px;
			right: -42px;
		}

		.articleBtnCtrlMain {width: 100%; padding: 0% 5%;}

		.stockInput {}
		.articleWidth100p {width: 100% !important;}

		.articleCtrlBackDiv {position: absolute; left: 0px;}

		.articleCtrlBackIcon {color: #002D3E; font-size: 50px;}

		.articleCtrlSaveDiv {background-color: green; border-radius: 20px; position: relative; top: 10px; right: -40px;}
		.articleCtrlUploadIcon {color: white; font-size: 30px;}

		.articleCtrlSavingDiv {background-color: transparent; border-radius: 20px;}
		.articleCtrlSavingIcon {
			animation: zaRotator 1.2s linear infinite;

			position: relative; right: -35px; top: 9px;

			color: orange; font-size: 30px;}

		.colorsRow {margin-bottom: 10% !important;}

		.portraitOutWrapDiv {float: left; margin-left: 0.5%; margin-right: 0.5%; width: 49%;}
		.landscapeOutWrapDiv {float: left; margin-bottom: 2%; width: 100%;}
		
		.portraitOutWrapDiv img {width: 100%; height: 62vw; margin: 0 auto; border: 1px solid black;}
		.landscapeOutWrapDiv img {width: 100%; height: 12em; margin-left: 0; border: 1px solid black;}

		.portraitWrapControl {display: none;
			position: absolute; background-color: rgba(255, 255, 255, 0.5); width: 100%; height: 62vw;}
		.landscapeWrapControl {display: none; position: absolute; background-color: rgba(255, 255, 255, 0.5); width: 27vw; height: 15em;}

		.portraitDetails, .landscapeDetails {position: relative; top: 2%; width: 60%; margin: 0 auto;}
		.portraitCtrlDeleteWrap, .landscapeCtrlDeleteWrap {position: absolute; bottom: 10%; left: 11%; width: 100%;}
		.portraitCtrlDeleteDiv, .landscapeCtrlDeleteDiv {background-color: red; width: 80%;}

		.portraitUploadPlaceholder {margin: 0 auto; text-align: center; /*width: 15vw;*/ position: relative;}
		.portraitUploadPlaceholder img {z-index: 1; /*width: 15vw;*/ height: 62vw; margin-left: 0; border: 1px solid black;}
		.portraitUploadProgressDiv {position: absolute; width: 80%; left: 10%; top: 45%;}
		.portraitNotGood {background-color: #ff5454 !important;}
		.portraitNotGoodMsg {color: white; font-weight: bold; width: 100%; /*height: 20em;*/ padding: 0% 2%; margin-left: 0; position: absolute; margin-top: 20px; font-size: 100%;}

		.landscapeUploadPlaceholder {margin: 0 auto; text-align: center; /*width: 27vw;*/ position: relative;}
		.landscapeUploadPlaceholder img {z-index: 1; /*width: 27vw;*/ height: 15em; margin-left: 0; border: 1px solid black;}
		.landscapeUploadProgressDiv {position: absolute; width: 80%; left: 10%; top: 45%;}
		.landscapeNotGood {background-color: #ff5454 !important;}
		.landscapeNotGoodMsg {color: white; font-weight: bold; width: 100%; height: 15em; margin-left: 0; position: absolute; margin-top: 20px;}
		
		.portraitAddNewOutWrap {display: block !important; float: left; margin-left: 0.5%; margin-right: 0.5%; background-color: #f5f5f5; width: 49%; height: 62vw; border: 1px solid black;}
		.landscapeAddNewOutWrap {display: block !important; float: left; margin-right: 7.5px; background-color: #f5f5f5; width: 100%; height: 12em; border: 1px solid black;}
		
		.portraitAddNewWrap { height: 19.9em; padding: 0px 4px; position: relative;}
		.landscapeAddNewWrap {width: 100%; height: 12em; margin-left: 0; position: relative;}

		#optionUploadWrapText.portrait, #moodUploadWrapText.portrait{position: absolute; z-index: 4; background-color: rgba(0, 0, 0, 0.7); height: 62vw;; width: 100%; left: 0px; top: 0px;}
		#optionUploadWrapText.landscape, #moodUploadWrapText.landscape{position: absolute; z-index: 4; background-color: rgba(0, 0, 0, 0.7); height: 105.5%; width: 100%; left: 0px; top: 0px;}
		#optionDropAreaSplash, #moodDropAreaSplash{color: white; position: relative; font-size: 150%; top: 30%;}
		
		.portraitAddNewDiv, .landscapeAddNewDiv {position: relative; top: 8%;}
		
		.portraitAddNewPlus {border-radius: 50%; border: 2px dashed rgba(0, 0, 0, 0.3); font-size: 350%; width: 50%; margin: 15px auto; opacity: 0.4;}
		.landscapeAddNewPlus {border-radius: 50%; border: 2px dashed rgba(0, 0, 0, 0.3); font-size: 350%; width: 23%; margin: 15px auto; opacity: 0.4;}

		.portraitMoodDetails {position: relative; top: 35%; width: 60%; margin: 0 auto;}
		.landscapeMoodDetails {position: relative; top: 15%; width: 60%; margin: 0 auto;}

		.portraitMoodCtrlDeleteWrap {position: relative; top: 55%; left: 11%;}
		.landscapeMoodCtrlDeleteWrap {position: relative; top: 40%; left: 11%;}

		.pricesWrapDiv, .pricesWrapRightDiv, .pricesWrapLeftDiv {
			border: 1px solid rgba(0, 0, 0, 0.2);
			margin-bottom: 10%;
		}

		.pricesDiv {
			border-bottom: 1px solid rgba(0, 0, 0, 0.2);
			border-top: 1px solid rgba(0, 0, 0, 0.2);
		    padding: 5px;
		    margin: 5px 0px;
		}
		.addCurBtn {
			margin-top: 20px;
		}
		.delCurBtn {position: absolute; right: -40.5%; top: 5%; font-size: 150%; background-color: rgba(125, 125, 125, 0.5); border-radius: 50%; width: 30px; height: 30px; text-align: center;}

	/* collections mgmt */
		.toggleAdjust {
			top: 7px !important;
			position: relative !important;
			height: 35px !important;
		}
		.toggleAdjust input:not(:checked) + label {
			/*input:checked + label*/
			background-color: red !important;
		}
		.toggleAdjust i {
			position: relative;
			top: -8px;
		}

		.toggleWrap_tiny {
			position: absolute;/*position: relative;*/
			top: 16px;/*top: 3vh;*/
			right: 0%;/*left: -4%;*/
			height: 50px;
			margin: 0 auto;
			width: 20%;/*width: fit-content;*/
		}
		.toggleOff_tiny {
			float: left; color: #E6E9EC; padding: 0 5px; width: 45px; height: 20px;
		}
		.toggleMain_tiny {
			float: left;  padding: 0 5px;
		}
		.toggleOn_tiny {
			float: left; color: #008FFF; padding: 0 5px; width: 20px; height: 45px;
		}

		.addCollectionBtn {
			margin-top: 2%;
		}
		
		.delCollectionBtn {
		    position: absolute;
		    right: 23%;
		    top: 12px;
		    font-size: 150%;
		    background-color: rgba(125, 125, 125, 0.5);
		    border-radius: 50%;
		    width: 30px;
		    height: 30px;
		    float: left;
		    text-align: center;
		}
		.collectionMgmtWrap{
			width: 70%; margin: 0 auto;
		}
		.btnInCatMgmt {border-radius: 20px; font-size: 15px; font-weight: bold; border: 1px solid rgba(0,0,0,0.3);}
		.subDivClass {width: 45%; height: 20px; margin: 5px auto;}

}

/* === STRICTLY LARGE SCREENS === */
@media screen and (max-width: 450px) {
	.mobile_view_strict {
		display: block;
	}
	.desktop_view_strict {
		display: none;
	}
}

.nvd3 text, .nvtooltip {
	font-family: montserratLight !important;
	/*font-size: 14px !important;*/
	letter-spacing: 0.05em !important;
  /*font: normal 200px sans-serif !important;*/
}
.nvd3 .nv-noData, .nvd3.nv-noData {
	font-size: 13px !important;
	font-family: montserratLight !important;
	text-align: center !important;
	overflow-wrap: break-word !important;
	word-wrap: break-word !important;
}