/*
Theme Name: Unilever RTM Theme
Theme URI: http://dc-activ.com
Description: Unilever RTM Theme
Version: 0.2.9
Author: Gary Mould
Author URI: http://dc-activ.com
*/

/**
 * Fonts
 */

@font-face {
    font-family: 'DINWebPro-Black';
    src: url('/wp-content/themes/unilever-rtm-wp-theme/fonts/DINWebPro-Black.eot');
    src: url('/wp-content/themes/unilever-rtm-wp-theme/fonts/DINWebPro-Black.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/unilever-rtm-wp-theme/fonts/DINWebPro-Black.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DINWebPro-Bold';
    src: url('/wp-content/themes/unilever-rtm-wp-theme/fonts/DINWebPro-Bold.eot');
    src: url('/wp-content/themes/unilever-rtm-wp-theme/fonts/DINWebPro-Bold.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/unilever-rtm-wp-theme/fonts/DINWebPro-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DINWebPro-Medium';
    src: url('/wp-content/themes/unilever-rtm-wp-theme/fonts/DINWebPro-Medium.eot');
    src: url('/wp-content/themes/unilever-rtm-wp-theme/fonts/DINWebPro-Medium.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/unilever-rtm-wp-theme/fonts/DINWebPro-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DINWebPro-Light';
    src: url('/wp-content/themes/unilever-rtm-wp-theme/fonts/DINWebPro-Light.eot');
    src: url('/wp-content/themes/unilever-rtm-wp-theme/fonts/DINWebPro-Light.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/unilever-rtm-wp-theme/fonts/DINWebPro-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Font families */

.font-family-1-light {
	font-family: DINWebPro-Light;
}

.font-family-1-medium {
	font-family: DINWebPro-Medium;
}

.font-family-1-bold {
	font-family: DINWebPro-Bold;
}

.font-family-1-black {
	font-family: DINWebPro-Black;
}

/* Font sizes */

.font-size-12 {
	font-size: 12px;
}

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

.font-size-16 {
	font-size: 16px;
}

.font-size-18 {
	font-size: 18px;
}

.font-size-20 {
	font-size: 20px;
}

.font-size-24 {
	font-size: 24px;
}

.font-size-30 {
	font-size: 30px;
}

/**
 * Colors
 * 1 | #000 				| black
 * 2 | #FFF 				| white
 * 3 | #EFEFEF				| light gray
 * 4 | #D6D6D6				| medium gray
 * 5 | rgba(246,178,177,1)	| pink
 * 6 | rgba(246,178,177,.5)	| transparent pink
 * 7 | #0E67A8				| blue
 * 8 | #191919				| dark gray
 */

/* Text colors */

.color-text-1 {
	color: #000;
}

.color-text-2 {
	color: #FFF;
}

.color-text-5 {
	color: rgba(246,178,177,1);
}

.color-text-7 {
	color: #0E67A8;
}

/* Hover text colors */

.color-text-hover-5:hover {
	color: rgba(246,178,177,1);
}

/* BG colors */

.color-bg-1 {
	background-color: #000;
}

.color-bg-2 {
	background-color: #FFF;
}
.color-bg-3 {
	background-color: #EFEFEF;
}
.color-bg-4 {
	background-color: #D6D6D6;
}
.color-bg-5 {
	background-color: rgba(246,178,177,1);
}
.color-bg-6 {
	background-color: rgba(246,178,177,.5);
}
.color-bg-8 {
	background-color: #191919;
}

/* Border colors */

.color-border-2 {
	border-color: #FFF !important;
}

.color-border-3 { 
	border-color: #EFEFEF !important;
}

.color-border-5 {
	border-color: rgba(246,178,177,1) !important;
}

/**
 * Borders
 */

.border-width-2 {
	border-width: 2px !important;	
}

.border-width-4 {
	border-width: 4px !important;
}

/**
 * Header
 */

.header {
	min-height:65px;
}

/**
 * Navigation
 */

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
	background-color: rgba(246,178,177,1);
}

.nav-link:hover {
	padding-bottom: 11px;
	margin-top:-3px;
	color: inherit;
}

.nav-tabs .nav-link.active {
	color: inherit;
}

.nav-tabs .nav-item {
	margin-bottom: 0;
}

/**
 * Tabs
 */

.tab-content > .active {
	overflow: visible !important; /* Allow buttons to trespass the tab area on hover growing transition */
}

/**
 * Google charts table height
 */
.google-visualization-table,
.google-visualization-table > div:first-child,
.google-visualization-table-table {
	height: auto !important;
}

.strong {
	font-weight: bold !important;
}

/* fix for Bootstrap tabs to allow Google charts to load correctly */
.tab-content>.tab-pane {
	height: 1px;
	overflow: hidden;
	display: block;
	visibility: hidden;
}
.tab-content>.active {
	height: auto;
	overflow: auto;
	visibility: visible;
}

/* pen charts styles */
.pen_charts {
	width: 1060px;
}

.pen_charts_table {
	text-align: center;
	margin-top: 50px;
	margin-bottom: 50px;
	padding: 15px 10px 20px;
}

.google-visualization-table-type-number, .google-visualization-table-seq {
	text-align: center !important;
}

/* SKU charts styles */
.chartWithOverlay {
	position: relative;
}

.overlay {
	position: absolute;
	max-width: 100px;
}

.overlay_edit {
	top: 110px;   /* chartArea top  */
	left: 122px; /* chartArea left */
	border: 1px solid #3f8232;
}

.overlay_export {
	top: 115px;
	left: 175px;
}

.seed, .explode, .maintain {
	width: 100%;
	display: inline-block;
	padding: 3px 6px;
	box-sizing: border-box;
	text-align: right;
	font-size: 10px;
}

/*.ui-slider .ui-slider-handle {
	-webkit-clip-path: polygon(50% 0, 58% 38%, 100% 45%, 59% 56%, 50% 100%, 40% 56%, 0 45%, 40% 39%);
	clip-path: polygon(50% 0, 58% 38%, 100% 45%, 59% 56%, 50% 100%, 40% 56%, 0 45%, 40% 39%);
	background: orange !important;
	height: 40px !important;
	width: 40px !important;
	margin-left: -18px !important;
	margin-top: -7px !important;
}*/

/**
 * Buttons
 */

.btn-upload {
	/*margin-top: -5px;*/
}

.btn-tips {
	box-sizing: border-box;
	height: 38px;
}

.btn {
	transition: .05s box-shadow ease-in-out;
}

.btn:hover{
	transform: scale( 1.1, 1.1 );
	box-shadow: 1px 2px 4px 0px rgba(0,0,0,.15);
}

/**
 * Tips modal
 */
.modal.right .modal-dialog {
	position: fixed;
	margin: auto;
	width: 100%;
	max-width: 80%;
	height: 100%;
	-webkit-transform: translate3d(0%, 0, 0);
	-ms-transform: translate3d(0%, 0, 0);
	-o-transform: translate3d(0%, 0, 0);
	transform: translate3d(0%, 0, 0);
}

.modal.right .modal-content {
	height: 100%;
	overflow-y: auto;
}

.modal.right .modal-body {
	padding: 15px 15px 80px;
}

.modal.right.fade .modal-dialog {
	right: -320px;
	-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
	-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
	-o-transition: opacity 0.3s linear, right 0.3s ease-out;
	transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.show .modal-dialog {
	right: 0;
}

/* ----- MODAL STYLE ----- */
.modal-content {
	border-radius: 0;
	border: none;
}

.close {
	color: rgba(246,178,177,1);
	text-shadow: none;
	opacity: 1 !important;
}

.close:hover {
	color: #fff;
}

.modal li:not(:first-child),
.modal ul > li {
	margin-top: 10px;
}

.modal-title-1 {
	line-height: 1.3;
}

.modal-sku-arrow {
	height: 30px;
	width: 80%;
	background-color: rgba(246,178,177,1);
	left:10%;
	position: relative;
}

.modal-sku-arrow::before {
	width: 0; 
	height: 0; 
	border-top: 40px solid transparent;
	border-bottom: 40px solid transparent; 
	border-right:40px solid rgba(246,178,177,1); 
	display: block;
	content: '';
	left:-40px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.modal-sku-arrow::after {
	width: 0; 
	height: 0; 
	border-top: 40px solid transparent;
	border-bottom: 40px solid transparent; 
	border-left:40px solid rgba(246,178,177,1); 
	display: block;
	content: '';
	right:-40px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

/**
 * Multi select with search
 */
.chosen-container-multi .chosen-choices {
	height: 38px !important;
}
.chosen-results li {
	padding: 7px 10px !important;
}

/**
 * Forms
 */

.form-control {
	height: 50px;
}

.form-row {
	min-height: 60px;
}

/* To prevent unnecessary bottom margin below the last item. */

.form-group:last-child {
	margin-bottom:0;
}

/* Select2 */

.chosen-container-multi .chosen-choices,
.chosen-container-multi .chosen-choices .search-field input[type="text"] {
	height: 50px !important;
}

.chosen-container-multi .chosen-choices .search-choice {
	margin:12px 0 0 12px;
}

/**
 * Tables
 */

.table th {
	padding: 7px 9px 5px;
}
.table td {
	padding: 10px 9px 7px;
}

/**
 * Icons
 */

.icon-container {
	width: 86px;
	height: 86px;
}

.icon-container img {
    transform: translateX(-50%) translateY(-50%);
    left: 50%;
    top: 50%;
}

/**
 * Chart tables
 */

.google-visualization-table-td.table-cell-unilever {
	color: #0E67A8;
}

.google-visualization-table-td.table-cell-curve-above {
	color: #090;
	background-color: #cfc;
}

.google-visualization-table-td.table-cell-curve-below {
	color: #a00;
	background-color: #fcc;
}

.google-visualization-table-td.table-cell-drive-distribution {
	color: #a00;
}

/* Tooltip column */
/* There is no way to identify the th by any of its attributes*/
.google-visualization-table-th:nth-child(8) {
	display: none;
}

/*
 Export
 */

.table-header-export {
	font-size: 7px;
	padding:2px !important;
	line-height: 1;
	background-color: #f3cabe;
	border: none !important;
	font-weight: normal;
}

.table-cell-export {
	font-size: 7px;
	padding:2px !important;
	line-height: 1;
	border: none !important;
}

.table-header-export:not(:first-child),
.table-cell-export:not(:first-child) {
	border-left: 1px solid #f3cabe !important;
}

.table-cell-odd-export {
	background-color: #fceee9 !important;
}

/* Table left border. */
.table-header-export:first-child,
.table-cell-export:first-child {
	border-left: 1px solid #f3cabe !important;
}

/* Table right border. */
.table-header-export:last-child,
.table-cell-export:last-child {
	border-right: 1px solid #f3cabe !important;
}

/* Table bottom border. */
.google-visualization-table-tr-even:last-child .table-cell-export,
.table-cell-odd-export:last-child .table-cell-export {
	border-bottom: 1px solid #f3cabe !important;
}

/* Removes the weird grey border around the exported table. */
.tab-pane#export .google-visualization-table {
	border: 1px solid white !important;
}

.out-of-page {
	position: absolute;
	top: -99999px !important;
}

.home {
	background-image: url(/wp-content/themes/unilever-rtm-wp-theme/assets/images/unilever-rtm-background.jpg);
	background-size: cover;
	background-position: right top;
}

.home .container > .row:first-child,
.home h2 {
	color: white;
}