/*Emails tree*/

.no-tree-icon .x-tree-icon-leaf{
	display: none !important;
}

.no-tree-icon .x-tree-icon-parent{
	display: none !important;
}

.no-tree-icon .x-tree-icon-parent-expanded{
	display: none !important;
}

.emails-folder-badge {
	margin-left: 15px;
    font-size: 12px;
    font-weight: 700;
    color: #1a8be4;
}

.emails-folder-badge-total-count {
	margin-left: 15px;
	font-size: 12px;
	font-weight: 400;
	color: #1a8be4;
}

.emailsFoldersTree .x-mask{
	background-color: transparent; /*changes default mask color*/
}

.emailsFoldersTree .x-grid-cell-inner{
	cursor: pointer;
}

/*Emails grid*/

.email-grid-cell .x-grid-cell-inner{
	vertical-align: middle;
	padding: 0px;
}

div.email-grid-container{
	display: flex;
	justify-content: center;
	padding: 2px;
}

div.email-grid-container:hover .delete-email-icon{
	visibility:visible;
}

div.email-grid-date-separator {
	font-size:16px;
	font-weight:400;
	background-color: #f3f3f3;
	width:100%;
	padding-left:6px;
	padding-top:4px;
	padding-bottom:4px;
}

i.delete-email-icon{
	visibility:hidden;
	width: 22px;
	align-self: center;
	text-align: center;
	font-size: 22px;
	color:#00000099;
	cursor: pointer;
}

i.delete-email-icon:hover{
	color: #ff6666;
}

div.grid-sender-icon-container{
	display: flex;
	height: 32px;
	width: 36px;
	align-items: center;
	justify-content: center;
  	background-color: #5fa2dd;
  	border-radius: 50%;
  	margin-top: 8px;
  	margin-left: 4px;
}

div.grid-sender-icon-container-long-layout{
	display: flex;
	height: 28px;
	width: 32px;
	align-items: center;
	justify-content: center;
  	background-color: #5fa2dd;
  	border-radius: 50%;
}

span.grid-sender-icon{
	font-size: 16px;
	font-weight:600;
	color:white;
}

span.grid-sender-icon-long-layout{
	font-size: 14px;
	font-weight:600;
	color:white;
}

img.grid-sender-icon{
	width: 32px;
	height: 32px;
	border-radius: 50%;
}

img.grid-sender-icon-long-layout{
	width: 28px;
	height: 28px;
	border-radius: 50%;
}

div.email-grid-inner{
	display:flex;
	flex-direction: column;
	padding: 8px 8px 8px 8px;
	width: calc(100% - 58px);
}

div.email-grid-name-date{
	display:flex;
}

div.email-grid-fromAddress{
	flex:5;
	font-weight:400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size:16px;
	color:#000000de;
}

span.email-grid-fromAddress-long-layout{
	font-weight:400;
}

div.email-grid-subject{
	margin-top:1px;
	white-space: nowrap;
	font-weight:400;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size:14px;
}

span.email-grid-subject-long-layout{
	font-weight:400;
}

div.email-grid-clearText{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size:14px;
	color:#00000099;
}

div.email-grid-date-container{
	flex:1;
	display:flex;
	align-items: center;
	justify-content:flex-end;
}

div.emai-grid-date-inner{
	font-size:12px;
	color:#00000099;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

img.email-grid-archived-image{
	width:12px;
}

.clear-text-rowbody .x-grid-rowbody {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 100px; /*same as avatarColumn + iconColumn width*/
	color:#00000099;
}

.emails-grid-short-seen-color {
	color: #00000099 !important;
}

.emails-grid-seen-color {
	color: #000000de !important;
}

.emails-grid-unseen-color {
	color: #1a8be4 !important;
}

i.attachment-grid-icon {
	color: #1a8be4;
}

i.exclamation-grid-icon {
	color: #ff2d2d;
}

i.arrow-down-grid-icon {
	color: #5fa2dd;
}

.long-layout-row .x-grid-item:hover .delete-email-icon-long-layout{
	visibility:visible;
}

.delete-email-icon-long-layout {
	visibility:hidden;
	color:#00000099;
	cursor: pointer;
	width: 22px;
	text-align: center;
	font-size: 22px;
}

.delete-email-icon-long-layout:hover {
	color: #ff6666;
}

.emails-grid-long-layout-icon-column .x-grid-cell-inner {
	text-align: center !important;
}

.emails-grid-clear-trigger:before {
	content: "\f00d";
}

.emails-grid-criteria-trigger:before {
	content: "\f142";
}

.emails-grid-date-criterio .x-btn-inner {
	color: #919191;
}

.emails-grid-date-criterio .x-btn-icon-el {
	color: #919191 !important;
}

.search-info-text {
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}

/*Details panel - info*/

div.info-container{
	display: flex;
	height: 80px;
	margin-bottom: 10px;
}

div.sender-icon-container{
	display: flex;
	height: 80px;
	width: 80px;
	min-width: 80px;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
  	background-color: #5fa2dd;
}

div.info-details{
	display: flex;
	flex: 1;
	flex-direction: column;
    width: calc(100% - 90px);
}

span.sender-icon{
	font-size: 40px;
	font-weight:600;
	color:white;
}

img.sender-icon{
	width: 80px;
	height: 80px;
}

span.sender-name{
	font-size: 16px;
	color: #00000099;
	margin-top: 4px;
	margin-bottom: 4px;
	min-height: 17px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

span.send-date{
	font-size: 12px;
	color: #000000de;
	margin-top: 4px;
	margin-bottom: 4px;
}

span.email-subject{
	font-size: 14px;
	color: #000000de;
	margin-top: 4px;
	margin-bottom: 4px;
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*Details panel - receivers*/

div.receivers-container{
	display: flex;
	flex-direction: column;
	margin-bottom: 5px;
	border-bottom: 1px solid #00000015;
}

div.receivers{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 2px;
}

div.importance{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin-bottom: 2px;
}

span.receivers-label {
	margin-right: 10px;
	width: 40px;
	text-overflow: ellipsis;
	overflow: hidden;
}

span.receiver-chip{
	/*background-color: #0000001f*/;
	border: 1px solid #0000001f;
	font-size: 12px;
	color: #000000de;
	border-radius: 14px;
	height: 28px;
	line-height: 28px;
	padding-left: 12px;
	padding-right: 12px;
	margin-right: 5px;
	margin-bottom: 5px;
}

/*Details panel - attachments*/

.attachments-component{
	border-bottom: 1px solid #00000015;
	margin-bottom: 5px;
}

.attachments-container{
	display:flex;
	flex-wrap: wrap;
}

.emails-attachment{
	min-width: 120px;
	height: 50px;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-top: 5px;
	border-radius: 2px;
	border: 1px solid #0000001f;
	cursor: pointer;
	display:flex;
}

span.attachments-label{
	align-self: center;
	margin-right: 10px;
	width: 80px;
}

.emails-attachment:hover{
	border: 1px solid #1a8be41f;
}

.attachment-main-part{
	display:flex;
	flex: 1;
	align-items: center;
	padding-right: 4px;
	width: calc(100% - 40px); /*required so that filename overflows*/
}

.attachment-main-part:hover{
	background-color: #1a8be420;
}

img.email-attachment-archived-image{
	width:12px;
	margin-left: 4px;
}

.attachment-icon{
	width: 40px;
	min-width: 40px;
	font-size: 28px;
	text-align: center;
}

.attachment-details{
	flex: 1;
	display:flex;
	flex-direction: column;
	color: #00000099;
	width: calc(100% - 30px); /*required so that filename overflows*/
	padding-right: 5px;
}

.attachment-details-archived{
	width: calc(100% - 42px); /*extra space for archived image (width 12px)*/
}

.attachment-filename{
	color: #000000de;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.attachment-menu-part{
	display:flex;
	align-items: center;
	padding-right:10px;
	padding-left:10px;
}

.attachment-menu-part:hover{
	background-color: #1a8be420;
}

.attachment-menu-icon{
	color: #00000099;
}

/*Empty panel - background*/

.accounts-empty-panel {
 	position: relative;
}

.accounts-empty-panel:before {
 	opacity: 0.10;
    content: '\f0e0';
    font-family: FontAwesome;
    font-size: 45vw; 
    top: 50%;
    width: 100%;
    height: 100%;
    color: black; 
    position: absolute;
    text-align: center;
}

/*Email accounts tab panel*/
.email-accounts-tabpanel .x-tab-bar-plain {
	background: rgb(236, 236, 236) !important;
}

.email-accounts-tabpanel .x-panel-body-default {
	border-style: none;
}

.email-account-inner-tab .x-tab-bar-plain {
	background: transparent !important;;
}

.email-account-inner-tab .x-tab.x-tab-active.x-tab-default {
	background-color: #b3e5fc;
}

.email-account-inner-tab .x-tab-default-left {
	background-color: #e1f5fe;
}

.email-account-inner-tab .x-panel-body-default {
	background: #b3e5fc;
}

.email-accounts-fields-readonly .x-form-text {
	background-color: transparent !important;
}

.email-accounts-fields-readonly .x-form-trigger-wrap {
	background-color: #f5f5f5;
}

/*new email notification toast (and multiple emails)*/

.new-email-notification-toast {
	border-style: none !important;	
}

.new-email-notification-toast .x-window-body-default {
	background: linear-gradient(to bottom right, rgb(50,64,78, 1), rgb(50,64,78, 0.8)) !important;
}

.new-email-notification-toast .x-autocontainer-innerCt {
	padding: 4px !important;
}

.new-email-notification-toast-container {
	display: flex;
	flex-direction: column;
}

.new-email-notification-toast-header {
	display: flex;
	padding-bottom:5px;
}

.new-email-notification-toast-main-body {
	display: flex;
	flex-direction: column;
	padding-right:10px;
	padding-left:10px;
	padding-bottom:10px;
}

.new-email-notification-toast-account{
	font-weight:300;
	font-size:13px;
	color: #ffffff;	
	margin-left: 5px;
	flex-grow: 1;
	font-style: italic;
}

.new-email-notification-toast-icon{
	font-weight:400;
	font-size:14px;
	color: #ffffff;	
	margin-right: 5px;
}

.new-email-notification-toast-close-icon{
	color: #ffffff;	
	font-size:14px;
	opacity: 0.8;
	visibility: hidden;
	align-self: flex-end;
	cursor: pointer;
}

.new-email-notification-toast-close-icon-visible{
	visibility: visible;
}

div.new-email-notification-toast-fromAddress{
	font-weight:400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size:16px;
	color: #ffffff;
	flex-grow: 1;
	margin-right: 5px;
	cursor: context-menu;
}

div.new-email-notification-toast-subject{
	overflow: hidden;
	text-overflow: ellipsis;
	font-size:14px;
	color: #ffffff;
	opacity: 0.8;
	margin-top: 5px;
	cursor: context-menu;
	white-space: nowrap;
}

div.new-email-notification-toast-clear-text{
	overflow: hidden;
	text-overflow: ellipsis;
	font-size:13px;
	color: #ffffff;
	opacity: 0.8;
	margin-top: 5px;
	margin-bottom: 5px;
	height: 50px;
	cursor: context-menu;
}

/*send email notification toast*/

.send-email-notification-toast {
	border-style: none !important;	
}

.send-email-notification-toast-container {
	display: flex;
}

.send-email-notification-toast-progress-border {
	border: 2px solid #5fa2dd;
	height: 16px;
	display: flex;
	flex: 1;
	margin-left: 5px;
}

.send-email-notification-toast-progress-bar {
	background-color: #5fa2dd; 
	height: 12px;
	width: 20px;
	animation:progress-bar-send-email 14s linear infinite;
}

@keyframes progress-bar-send-email {
   	0% {
          width: 0%;
   	}
   	50% {
          width: 50%;
   	}
   	100% {
          width: 100%;
   	}
}

/*Emails general loading mask*/

.emailsMask{
    background-color:white;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.emailsMask .x-mask-msg-text{
	background-image: none;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.emailsMask-envelope{
	font-size: 100px;
	color: #5fa2dd;
	animation:scale 4s ease infinite;
}

.emailsMask-dots{
	display: flex;
	margin-top: 20px;
}

.emailsMask-dot{
	width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
	margin-left: 6px;
}

.emailsMask-dot-1{
	background-color: #62bd19;
	animation:pulsate1 2s ease-out 0.2s infinite;
}

.emailsMask-dot-2{
	background-color: #ff8000;
	animation:pulsate2 2s ease-out 0.2s infinite;
}

.emailsMask-dot-3{
	background-color: #0080ff;
	animation:pulsate3 2s ease-out 0.2s infinite;
}

@keyframes scale{
	0%{
		opacity:0.8;
		transform: scale(1);
	}
	50%{
		opacity:1;
		transform: scale(1.1);
	}
	100%{
		opacity:0.8;
		transform: scale(1);
	}
}


@keyframes pulsate1 {
   	0% {
          box-shadow: 0 0 0 0px rgba(98, 189, 25, 0.4);
   	}
   	33% {
          box-shadow: 0 0 0 20px rgba(98, 189, 25, 0);
   	}
   	100% {
          box-shadow: 0 0 0 0px rgba(98, 189, 25, 0);
   	}
}

@keyframes pulsate2 {
   	33% {
          box-shadow: 0 0 0 0px rgba(255,128,0, 0.4);
   	}
   	66% {
          box-shadow: 0 0 0 20px rgba(255,128,0, 0);
   	}
   	100% {
          box-shadow: 0 0 0 0px rgba(255,128,0, 0);
   	}
}

@keyframes pulsate3 {
   	66% {
          box-shadow: 0 0 0 0px rgba(0,128,255, 0.4);
   	}
   	99% {
          box-shadow: 0 0 0 20px rgba(90,128,255, 0);
   	}
   	100% {
          box-shadow: 0 0 0 0px rgba(0,128,255, 0);
   	}
}

/*Emails details loading mask*/

.emailDetailsPanel .x-mask{
	background-color: transparent; /*changes default mask bolor*/
}
.emailDetailsLoadingMask{
    background-color:rgba(255,255,255, 0.4);
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.emailDetailsLoadingMask .x-mask-msg-text{
	background-image: none;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.emailDetailsLoadingMask-border {
	border: 2px solid #5fa2dd;
	height: 16px;
	width: 150px;
	border-radius: 6px;
	display: flex;
	animation:progress-border 2s linear infinite;
}

.emailDetailsLoadingMask-bar {
	background-color: #5fa2dd; 
	height: 12px;
	width: 0px;
	border-radius: 2px;
	animation:progress 2s linear infinite;
}

@keyframes progress-border {
   	0% {
          justify-content: flex-start;
   	}
   	50% {
          justify-content: flex-start;
   	}
   	51% {
          justify-content: flex-end;
   	}
   	100% {
          justify-content: flex-end;
   	}
}

@keyframes progress {
   	0% {
          width: 0px;
   	}
   	50% {
          width: 146px;
   	}
   	100% {
          width: 0px;
   	}
}

/**Fab icon create email**/

.create-email-fab-icon{
    bottom: 24px; 
    right: 24px; 
}

/**Emails sendPanel**/
.emails-text-editor .x-html-editor-tb{
	border-style: none;
	background-color: #f6f6f6;
}

.emails-text-editor .x-toolbar-item{
	border-style: none;
}

.emails-text-editor .x-html-editor-input{
	padding: 5px 0px 5px 5px;
}

.emails-send-panel-toolbar{
	background-color: #f0f4c3;
}

.address-field-tag .x-tagfield-item{
	background-color: transparent;
	border-radius: 8px;
	border: 1px solid #0000001f;
}

/*Settings*/

.emails-settings-label{
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 20px;
}

.emails-settings-sublabel{
	font-weight: 600;
}

.emails-settings-panel {
	box-shadow: -2px 0 2px 0 rgba(0,0,0,0.14), -3px 0 1px -2px rgba(0,0,0,0.12), -1px 0 5px 0 rgba(0,0,0,0.20) !important;
}

.email-send-panel-settings .x-panel-body-default{
	border-style: none;
}

.email-send-panel-settings-toolbar{
	box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.20);
}

.email-settings-alternate-background-1{
	background-color: rgb(255, 255, 255);
}

.email-settings-alternate-background-2{
	background-color: rgb(246, 246, 246);
}

/**Export button**/

.email-export-button:before {
  content: "\f0e0";
  position: absolute;
  font-size: 1.2em;
  font-family: FontAwesome;
  color: rgb(255,155,0);
  left: 2px;
}

.email-export-button:after {
  content: "\f019";
  position: absolute;
  font-size: 1em;
  font-family: FontAwesome;
  left: 11px;
  top: 14px;
  color: #5fa2dd;
  background-color: white;
  border-radius: 50%;
  width:14px;
  height:14px;
  text-align:center;
}

.email-export-button.x-btn-disabled:before {
  color: #0000001e !important;
}

.email-export-button.x-btn-disabled:after {
  color: #0000001e !important;
}

/*Empty details panel mask*/

.emailsDetailsMask {
 	background-color:#f2f8ff;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.emailsDetailsMask .x-mask-msg-text{
	background-image: none;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.emailsDetailsMask-envelope{
	font-size: 100px;
	color: #5fa2dd;
}

div.emailsDetailsMask-text{
	margin-top: 20px;
}

span.emailsDetailsMask-text{
	font-size: 16px;
}

/*Emails panel*/

.emails-panel {
	border-style: solid none none none;
	border-width: 1px;
	border-color: #d0d0d0;
}

/*Account combobox on ModalPanelSendEmail*/
.emails-readonly-account-combo .x-form-trigger-wrap-default{
	border-style: none;
}

.emails-readonly-account-combo .x-form-item-label-default{
	font-style: italic;
	color: #00000099;
}

/*ModalPanelAddressBook*/

.address-book-tab-panel .x-tab-bar-default {
	background: #7fb5e4 !important;
}

/*ModalPanelCreateEmailAccountWizard*/

.create-account-wizard-progressbar-valid .x-progress-bar-default {
	background-color: #8bc34a;
}

.create-account-wizard-progressbar-invalid .x-progress-bar-default {
	background-color: #ff5722;
}

.create-account-wizard-fields-empty {
	background-color: #e3f2fd;
}

.create-account-wizard-window-header .x-window-header-default{
	border-bottom-width: 0px !important;
}

.create-account-wizard-window-header .x-window-header:after{
	content:"";
    display: block;
    height: 2px;
    width: calc(100% + 14px);
    position: absolute;
    bottom: 0px;
    left: -14px; /*offset padding*/
    transition: background 0.2s ease;
}

..create-account-wizard-window-header-20 .x-window-header:after {
	background: linear-gradient(to right, rgb(255, 56, 56) 0%,rgb(255, 56, 56) 20%,rgb(255, 56, 56) 20%,transparent 20%,transparent 100%);
}

.create-account-wizard-window-header-25 .x-window-header:after {
	background: linear-gradient(to right, rgb(255, 56, 56) 0%,rgb(255, 56, 56) 25%,rgb(255, 56, 56) 25%,transparent 25%,transparent 100%);
}

.create-account-wizard-window-header-33 .x-window-header:after {
	background: linear-gradient(to right, rgb(255, 56, 56) 0%,rgb(255, 56, 56) 25%,rgb(255, 56, 56) 33%,transparent 33%,transparent 100%);
}

.create-account-wizard-window-header-40 .x-window-header:after {
	background: linear-gradient(to right, rgb(255, 56, 56) 0%,rgb(255, 56, 56) 40%,rgb(255, 56, 56) 40%,transparent 40%,transparent 100%);
}

.create-account-wizard-window-header-50 .x-window-header:after {
	background: linear-gradient(to right, rgb(255, 56, 56) 0%,rgb(255, 56, 56) 50%,rgb(255, 56, 56) 50%,transparent 50%,transparent 100%);
}

.create-account-wizard-window-header-60 .x-window-header:after {
	background: linear-gradient(to right, rgb(255, 56, 56) 0%,rgb(255, 56, 56) 60%,rgb(255, 56, 56) 60%,transparent 60%,transparent 100%);
}

.create-account-wizard-window-header-66 .x-window-header:after {
	background: linear-gradient(to right, rgb(255, 56, 56) 0%,rgb(255, 56, 56) 66%,rgb(255, 56, 56) 66%,transparent 66%,transparent 100%);
}

.create-account-wizard-window-header-75 .x-window-header:after {
	background: linear-gradient(to right, rgb(255, 56, 56) 0%,rgb(255, 56, 56) 75%,rgb(255, 56, 56) 75%,transparent 75%,transparent 100%);
}

.create-account-wizard-window-header-80 .x-window-header:after {
	background: linear-gradient(to right, rgb(255, 56, 56) 0%,rgb(255, 56, 56) 80%,rgb(255, 56, 56) 80%,transparent 80%,transparent 100%);
}

.create-account-wizard-window-header-100 .x-window-header:after {
	background: linear-gradient(to right, rgb(255, 56, 56) 0%,rgb(255, 56, 56) 100%,rgb(255, 56, 56) 100%,transparent 100%,transparent 100%);
}

/*Emails card panel*/

.manageAccounts-trigger.x-form-trigger-default{
	width: 24px !important;
}

.manageAccounts-trigger:before {
	content: "\f040";
}

/*ModalPanelEmailDetails*/

.modal-panel-email-details-toolbar.x-docked-top {
	 border-bottom-width: 1px !important;
}