@import url("../branding/type.css");

#bodyDiv {
	background-color: #E8EAE9 !important;
	font-family: 'Open Sans',Verdana,Helvetica,sans-serif !important;
	font-size: 80%;
}

body {
	background-color: #E8EAE9;
	font-family: 'Open Sans',Verdana,Helvetica,sans-serif !important;
	font-size: 80%;
}

label, input, select, textarea, button, a, p, pre {
	font-family: 'Open Sans',Verdana,Helvetica,sans-serif !important;
}


/** Overridden **/
/*body { font-family: Arial; background-color: #ffffff; }    OLD     */
/*
input, input[type=checkbox], input[type=radio], select, textarea, button.genericBtn { font-family: Arial; }

div.mdlContainer .mdlHeader{ background-color: #2A467A; }

div.tabHolder > div.tab { color: #666666; }
div.tabHolder div.active { color:#9fce56; border-bottom:3px solid #B7EB66; }

div.tabComponent { padding-top: 26px; }

/** REBRANDING **/

/* Spacing between header and working area */
.tabContentContainer .tabContent.active .body { padding-top: 10px; }

/* Header */
div.tabContainer {
	background: #000000 !important;
	font-family: 'Open Sans',Verdana,Helvetica,sans-serif !important;
	height: 60px !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
}

/* Setting headers of open functionalities */
div.tabScrollContainer div.tabMainScrollContainer {
	padding-left: 100px !important;
}

div.tabContainer div.divScrollContainer {
	margin-top: 8px !important;
}

/* Left arrow to move on scroll for open functionalities */
div.tabContainer div.tabScrolLeft {
	background-image: url("../_img/menu_left_v2.png") !important;
	width: 19px;
	margin-top: 8px;
	height: 15px;
}
/* Right arrow to move on scroll for open functionalities */
div.tabContainer div.tabScrolRight {
	background-image: url("../_img/menu_right_v2.png") !important;
	width: 19px;
	margin-top: 8px;
	height: 15px;
}

/* Deloitte home page logo at right up corner */
.pnl_APIA_LOGO div:nth-child(2) div img {
    width: 50% !important;
}

/* Deloitte home logo in header */
div.tabContainer div.tabHome {
	width: 145px !important;
	height: 32px;
	margin-top: 9px !important;
	background-image: url("../_img/deloitte_logo_v2.png") !important;
	background-color: black;
}

/* View cookies button */
.ot-sdk-show-settings {
	display: inline-block;
    margin-bottom: 4px;
    text-align: center;
    width: 70%;
    margin-top: 5px;
    background-color: #00A3E0 !important;
    color: white;
    border: none;
    border-radius: 2px;
    padding: 10px;
    font-weight: bold;
}
.ot-sdk-show-settings:hover {
	cursor: pointer;
}

/* Tab arrow to menu in header */
div.tabContainer div.tabMenu {
	margin-top: 10px !important;
	background-image: url("../_img/menu_v2.png") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	height: 40px;
}

/* Tab arrow to open menu in header */
div.tabContainer div.activeMenu { transform: scaley(-1); }

/* Tab user in header */
#tabUser {
	margin-top: 9px !important;
}

/* Functions menu */
#tab-2 {
	background-color: #4B4B4A;
	height: auto !important;
	opacity: 1.0;
}

div.tab.tabUser.active { border-color: #464646; background-color: #464646; }
div.tabContainer div.tabScrollContainer div.tab { border-width: 2px; }
div.tabContainer div.active { border-color: #97999B; background-color: #97999B; background-image: none; box-shadow: none; }
div.tab.tabHome.active { border-color: inherit; background-color: inherit; }

li.menuClose>span.over {
	color: #86BC25;
}

li.menuOpen>span {
	color: #86BC25;
}

li.menuOpen>span.over {
	color: #86BC25;
}

li.menuFunctionality>span.over {
	color: #0076A8;
}

/* Searched functionality */
#tab-2 .searchElementOver { color: #0076A8; }

/* Users menu */
#tab-3 {
	background-color: #4B4B4A;
	opacity: 1.0;
}

.tabUser>div:hover {
	color: #86BC25;
}

/* Work area */
iframe.tabContent {
	margin-top: 60px;
}

form div.dataContainer div.tabComponent { margin-bottom: 10px; }

div.tabContentContainer {
	margin-top: 60px;
}

div.tabContentContainer .active { top: 0px; }

/* Setting modal */
#configModal .header {
	background: #000000 !important;
}

div.modalContent .header {
	background: #000000 !important;
}

/* Body */
/* Body header (setting little bar on body) */
#body .header {
	height: 0px !important;
}

/* Footer */
div.theFooter {
	background-color: #2B2B2B !important;
	height: 44px;
}
/* Footer Apia Version */
div.theFooter div.version {
	color: #D0D0CE;
	font-size: 12px;
	padding-top: 5px;
}

/* Panel titles */
.planelContainer .panel .title {
	color: #000000 !important;
	font-size: 16px !important;
}

.planelContainer .panel .title span {
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	white-space: nowrap;
	width: 85%;
}

/* Background blocker */ 
.no-keyboard-focus > .mask { z-index: 5; }



/* Primary buttons */
.formContainer .genericBtn, .genericBtn.suggestedAction {
	background: #00A3E0 !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 2px !important;
	font-weight: bold;
}

/* Secundary buttons */
.genericBtn {
	background: #FFFFFF !important;
	color: #00A3E0 !important;
	border: 1px solid #00A3E0 !important;
	border-radius: 2px !important;
	padding-left: 0px;
	padding-right: 0px;
}

/* Disabled buttons */
.genericBtn:disabled {
	background: #D0D0CE !important;
}

/* All big buttons, effect on click */
.genericBtn:active {
	padding-left: 3px;
	padding-top: 3px;
}

/* Buttons on modals */
.modalOptionsContainer .optionAdd {
	background-color: #FFFFFF !important;
	color: #00A3E0 !important;
	border: 1px solid #00A3E0 !important;
	border-radius: 2px !important;
	box-shadow: none;
}

/* Tabs */
div.tabHolder>div.tab {
	background-color: #97999B;
	color: #FFFFFF;
	border-bottom: 3px solid #97999B;
}

/* Tab active */
div.tabHolder div.tab.active {
	background-color: #0076A8 !important;
	color: #FFFFFF !important;
	border-bottom: 3px solid #0076A8 !important;
}

/* Tab document when marked */
div.tabHolder div.docsMarked {
	background: #43B02A;
	border-bottom: 3px solid #43B02A !important;
	color: #000000 !important;
	font-weight: bold;
}

/* Tab comments when marked */
div.tabHolder div.marked {
	background-color: #43B02A;
	border-bottom: 3px solid #43B02A !important;
	color: #000000 !important;
	font-weight: bold;
}

.modalOptionsContainer .option.document { min-width: 320px; }

/* Input */
input[type="text"], input[type="password"], #fieldValue input {
	border: 1px solid #D0D0CE;
	border-radius: 0px;
	height: 19px;
	padding: 5px;
}

/* Navigation input on tables */
div.navButtons input[type="text"]{
	padding: unset;
}

/* Filters input on tables */
.filter input[type="text"]{
	padding: 0 0 0 3px;
}

/* Input */
table input[type="text"] { border: 1px solid #D0D0CE; border-radius: 0px;	height: 19px; padding: 5px 0px; text-indent: 10px; width: 94%; }
div.gridHeader table thead tr th input { text-indent: 0px; }

/*Adjust for date picker because is an input */
.datePicker.dateInput { text-indent: 5px; }

/* Textareas */
.contentTab .field textarea{
	padding: 5px 0px;
	width: 100% !important;
	border: 1px solid #D0D0CE;
	border-radius: 0px;
	text-indent: 5px;
}

/* Field options in modals */
.modalOptionsContainer .option {
	border: 1px solid #D0D0CE;
	border-radius: 0px;
	box-shadow: none;
}

/* Custom date picker */
.datePickerCustom.clonedPicker{ width: auto; }

/* Checkboxes */
input[type="checkbox"] { border: 0px; color: #00A3E0; outline: 2px solid #00A3E0; outline-offset: -2px; -webkit-appearance: initial;
    appearance: initial; width: 15px !important; height: 15px; border: none; background: #FFFFFF; position: relative; }
input[type="checkbox"]:checked { background: #FFFFFF; }
input[type="checkbox"]:checked:after { content: "\2714"; color: #00A3E0; position: absolute; left: 50%; top: 44%; -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); font-size: 14px; }
.modalOptionsContainer .option input[type="checkbox"]{ width: 15px !important; margin-top: 4px !important; }
input[type="checkbox"][disabled] { outline: 2px solid #97999B; }

/* Radiobuttons */
.tabComponent input[type="radio"] { display: none; }
.tabComponent input[type="radio"]+span { display: inline-block; }
.tabComponent input[type="radio"]:checked+span::before { width: 8px; height: 8px; background: #00A3E0; background-clip: content-box;	margin: 0 5px; }
.tabComponent input[type="radio"]+span::before { content: ''; display: inline-block; width: 8px; height: 8px;	background: transparent; border: 2px solid #00A3E0; border-radius: 50%;
	padding: 2px; margin: 0 5px; vertical-align: text-top; }

/* Radiobuttons (diferent type) */
.oneLineRadio input[type="radio"] { display: none; }
.oneLineRadio input[type="radio"]+label { display: inline-block; }
.oneLineRadio input[type="radio"]:checked+label::before { width: 8px; height: 8px; background: #00A3E0; background-clip: content-box;	margin: 0 5px; }
.oneLineRadio input[type="radio"]+label::before { content: ''; display: inline-block; width: 8px; height: 8px;	background: transparent; border: 2px solid #00A3E0; border-radius: 50%;
	padding: 2px; margin: 0 5px; vertical-align: text-top; }

/* Combobox (basic format for filters and fields) */
select{ border: 1px solid #D0D0CE; border-radius: 0px; background: #FFFFFF url("../_img/select-combobox.png") no-repeat 98% 50%;
     min-width: 60px; overflow: hidden; -webkit-appearance: none; padding-right: 20px;
}

/* IE adjust */
input[type=checkbox]::-ms-check { color: #00A3E0; }
input[type="checkbox"]::-ms-expand { display: none; } 

/* Combobox arrow hidde on IE */
select::-ms-expand { display: none; }

/* Combobox field (give more height for combobox fields) */
.contentTab .field select {
	box-sizing: content-box !important;
	height: 19px;
	padding: 5px 0px 5px 0px;
	text-indent: 3px;
	width: 100%;
}

/* Modal header */
div.mdlContainer .mdlHeader { background-color: #000000; border-bottom: 0px; margin-bottom: 0px; }

/* Modal body */
div.mdlContainer div.mdlBody { width: 100%; }
div.mdlContainer div.mdlBody div.scroll_container { height: auto !important; }
div.mdlContainer div.mdlBody div.scroll_container div.gridBody.gridBodyModal { height: 100%; min-height: 271px; }

/* Modal footer */
div.mdlContainer div.gridFooter { width: 100% !important; }
div.mdlContainer .mdlFooter { margin-top: 0px; }

/* Modal buttons (example: Confirm) */
.modalContent .footer .button { color: #0076A8; }
.modalContent .footer .close  { color: #0076A8; }

/* Modal about */
.aboutContainer { height: 100%; background-color: #FFFFFF; }
.aboutDivUrl > a { color: #00A3E0; }


/* MOBILE REBRANDING */

/* Text areas */
.mobile-mode .contentTab .field textarea { width: 100% !important; }
#textComment { width: 94% !important; }



.tabLoading{ background-image: url("../_img/spinner.gif"); }

td.dpError input { border-color: red; }

.campaign img { max-width: 100%; }