/* Fonts */
@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-Semibold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-SemiboldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

/* Link styles */
a:link, a:visited, a:hover, a:active {
    color: #195bae;
}

/* Grid font size */
.small-font .x-grid-cell-inner  {
    font-size: 11px;
}

/* Multiline grid rows */
.x-grid-multiline-row .x-grid-cell-inner {
    white-space: normal;
}

/* Grid rows vertical align */
.x-grid-with-row-lines .x-grid-td {
    vertical-align: middle;
}

/* Small panel header */
.small-header .x-header-text {
    font-size: 13px;
    line-height: 15px;
}

/* HTML Editor toolbar bottom border */
.x-html-editor-tb {
    border-bottom-width: 1px !important;
}

/* All Items CB Label Style */
.x-form-cb-all-label {
    margin-left: 16px;
}

/* Selection in combobox highlighting */
.x-boundlist-selected {
    background: #e6e6e6;
    border-color: #e6e6e6;
    font-weight: bold;
}

.menu-item-arrow-left {
    width: 12px;
    height: 9px;
    top: 8px;
    left: 0;
    position: absolute;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAJCAYAAAAGuM1UAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wwfCg0pGL3NZQAAAGRJREFUGNOVzjEKhEAQRNGnbORRxFQ8yeZ6KJOJJt2jbC4exXRMRERExw+dFP2pKlJKzoQQXFBh/MijwQ91mfHc448a7hoqjJuwcydEfM9h+TAlvhEWDNstOcJxWospV4AZHeIKHXEQzBNcU9YAAAAASUVORK5CYII=');
}

.x-datepicker-month .x-btn-inner {
    color: grey;
}

.right-collapse-arrow .x-tool-img {
    background-position: 0 -176px;
}

.right-collapse-arrow .x-collapsed .x-tool-img {
    background-position: 0 -192px;
}

.labels-bold-15 {
    font-size: 15px;
    font-weight: bold;
}

.border-grey-3 {
    font: normal 13px OpenSans;
    border: 3px solid #e1e1e1!important;
}

.x-grid-tree-node-expanded{
    background-color: #f0f0f0;
}

.x-grid-tree-node-expanded ~ .x-grid-row {
    background-color: #f0f0f0;
}

.x-grid-tree-node-expanded ~ .x-grid-row-focused .x-grid-td {
    background-color: #e0e0e0;
}

.x-grid-tree-node-expanded ~ .x-grid-row-over .x-grid-td {
    background-color: #e0e0e0;
}

.x-grid-row-focused .x-grid-tree-node-expanded {
    background-color: #e0e0e0;
}

.x-grid-row-over .x-grid-tree-node-expanded {
    background-color: #e0e0e0;
}

.swap-column-tree .x-grid-cell.x-grid-td.x-grid-cell-treecolumn {
    overflow: visible;
}
.swap-column-tree .x-grid-cell.x-grid-td.x-grid-cell-treecolumn img {
    display: none;
}
.swap-column-tree .x-grid-cell.x-grid-td.x-grid-cell-treecolumn img.x-tree-icon-parent,
.swap-column-tree .x-grid-cell.x-grid-td.x-grid-cell-treecolumn img.x-tree-expander {
    display: block;
}
.swap-column-tree .x-grid-cell.x-grid-td.x-grid-cell-treecolumn .x-grid-cell-inner-treecolumn {
    height:0;
    left:-17px;
    overflow:visible;
    position:relative;
    padding: 0;
    top: -6px;
    width: 0px;
}

.swap-column-tree .x-grid-tree-node-leaf .x-grid-cell.x-grid-td.x-grid-cell-treecolumn {
    position: inherit;
}

/*== Flat design == */

/* Menu buttons at panel */
.add-menu-button {
    background: url("../../images/flat_design_icons.png") 0 0;
    height: 24px;
    width: 24px;
}

.x-add-menu-button-active, .x-add-menu-button-over {
    background: url("../../images/flat_design_icons.png") -25px 0;
}

.extra-menu-button {
    background: url("../../images/flat_design_icons.png") -79px 0;
    width: 33px;
    height:24px;
}
.x-extra-menu-button-active, .x-extra-menu-button-over {
    background: url("../../images/flat_design_icons.png") -48px 0;
}

.edit-menu-button {
    background: url("../../images/flat_design_icons.png") -23px -99px;
    width: 28px;
    height:24px;
}
.x-edit-menu-button-active, .x-edit-menu-button-over {
    background: url("../../images/flat_design_icons.png") -23px -35px;
}

/* Single buttons at panel */
.task-watching-icon {
    background: url("../../images/flat_design_icons.png") -255px -97px;
    height: 26px;
    width: 26px;
}
.task-not-watching-icon {
    background: url("../../images/flat_design_icons.png") -255px -160px;
    height: 26px;
    width: 26px;
}

.task-recurrent-icon {
    background: url("../../images/flat_design_icons.png") 0 -243px;
    height: 16px;
    width: 16px;
}

.task-recurrent-ended-icon {
    background: url("../../images/flat_design_icons.png") 0 -265px;
    height: 16px;
    width: 16px;
}

.task-actions-tooltip-icon {
    background: url("../../images/flat_design_icons.png") -22px -221px;
    height: 13px;
    width: 13px;
}

.task-actions-tooltip-icon:hover {
    background: url("../../images/flat_design_icons.png") -38px -221px;
}

.add-task-button-single {
    background: url("../../images/flat_design_icons.png") -235px -130px;
    height: 26px;
    width: 26px;
}

.x-add-task-button-single-over {
    background: url("../../images/flat_design_icons.png") -235px -66px;
}

.add-button-single {
    background: url("../../images/flat_design_icons.png") 0 0;
    height: 26px;
    width: 26px;
}

.x-add-button-single-over {
    background: url("../../images/flat_design_icons.png") -25px 0;
}

.add-button-single input::-webkit-file-upload-button {
    cursor: pointer;
}

.add-button-single input{
    height: 25px;
    width: 25px;
}

.delete-button-single {
    background: url("../../images/flat_design_icons.png") -222px 0;
    height: 25px;
    width: 25px;
}

.x-delete-button-single-over {
    background: url("../../images/flat_design_icons.png") -247px 0;
}

.archive-button {
    background: url("../../images/flat_design_icons.png") -344px 0;
    height: 25px;
    width: 31px;
}

.x-archive-button-over {
    background: url("../../images/flat_design_icons.png") -376px 0;
}

.unarchive-button {
    background: url("../../images/flat_design_icons.png") -277px 0;
    height: 25px;
    width: 31px;
}

.x-unarchive-button-over {
    background: url("../../images/flat_design_icons.png") -309px 0;
}

.export-button {
    background: url("../../images/flat_design_icons.png") -154px 0;
    height: 28px;
    width: 24px;
}
.x-export-button-over {
    background: url("../../images/flat_design_icons.png") -128px 0;
}

/* Menu styles */
.flat-menu {
    border-width: 0;
    box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.15);
}

.flat-menu-button-item {
    color: #747474;
    font-family: 'Open Sans', sans-serif;
    font-weight:400;
    font-size: 14px;
    padding: 0 10px 0 61px;
    width: 100%!important;
    left: 0!important;
    display: table;
}
.flat-menu.add-menu .flat-menu-button-item:hover {
    color: #00c783;
}

.flat-menu.add-menu .flat-menu-button-item {
    padding: 0 10px 0 50px;
}

.flat-menu-button-item-wrap,
.flat-menu-button-item .x-menu-item-link,
.flat-menu-button-item .x-menu-item-text {
    display: table-cell;
    vertical-align: middle;
}

.flat-menu-button-item .menu-item-arrow-left {
    top: 15px
}

.flat-menu-button-item .x-menu-item-link,
.flat-menu-button-item .x-menu-item-text {
    color: #747474;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight:400;
    padding: 0;
}

.flat-menu-button-item-inner {
    line-height: 18px !important;
}

.flat-menu-button-item:hover {
    background-color: #e5f7f1;
    color: #747474;
    cursor: pointer;
}

.flat-menu-button-item.x-disabled,
.download-button-disabled .x-menu-item-text {
    color: #c6c6c6;
}

.add-menu-button-icon,
.extra-menu-button-icon {
    width: 24px;
    height: 24px;
    top: 7px;
    left: 19px;
    position: absolute;
}

/* Menu buttons list */
.x-btn-add-menu-button-active .x-btn-flat-arrow,
.x-btn-extra-menu-button-active .x-btn-flat-arrow {
    width:0;
    height:0;
    position:absolute;
    border-left: 15px solid transparent;
    border-bottom: 10px solid white;
    border-right:15px solid transparent;
    top: 26px;
    z-index: 30000;
}
.x-btn-add-menu-button-active .x-btn-flat-arrow {
    right: -2px;
}


.x-btn-extra-menu-button-active .x-btn-flat-arrow {
    right: 2px;
}

/* Add buttons */
.add-button .add-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -205px -100px;
}

.x-add-button-over .add-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -205px -35px;
}

.add-button-disabled .add-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -205px -162px;
}

/* Extra buttons */
.send-email-button .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -50px -98px;
}

.x-send-email-button-over .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -50px -34px;
}

.send-email-button-disabled .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -50px -160px;
}

.send-sms-button .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -77px -98px;
}

.x-send-sms-button-over .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -77px -34px;
}

.send-sms-button-disabled .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -77px -160px;
}

.required-approval-button .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -108px -131px;
}

.x-required-approval-button-over .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -108px -67px;
}

.required-approval-button-disabled .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -108px -194px;
}

.edit-button .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -25px -98px;
}

.x-edit-button-over .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -25px -34px;
}

.edit-button-disabled .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -25px -160px;
}

.add-task-button .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -234px -131px;
}

.x-add-task-button-over .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -234px -67px;
}

.add-task-button-disabled .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -234px -194px;
}

.calendar-button .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -228px -99px;
}

.x-calendar-button-over .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -228px -35px;
}

.calendar-button-disabled .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -228px -161px;
}

.make-active-button .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -155px -100px;
}

.x-make-active-button-over .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -155px -36px;
}

.make-active-button-disabled .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -155px -162px;
}

.make-inactive-button .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -180px -100px;
}

.x-make-inactive-button-over .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -180px -36px;
}

.make-inactive-button-disabled .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -180px -162px;
}

.close-button .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") 0 -98px;
}

.x-close-button-over .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") 0 -34px;
}

.close-button-disabled .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") 0 -160px;
}

.change-password-button .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -131px -98px;
}

.x-change-password-button-over .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -131px -34px;
}

.change-password-button-disabled .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -131px -160px;
}

.login-as-button .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -131px -130px;
}

.x-login-as-button-over .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -131px -66px;
}

.login-as-button-disabled .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -131px -192px;
}

.delete-button .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") 0 -98px;
}

.x-delete-button-over .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") 0 -34px;
}

.delete-button-disabled .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") 0 -160px;
}

.download-button .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -157px -130px;
}

.download-button-over .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -157px -66px;
}

.download-button-disabled .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -157px -191px;
}

.configuration-button .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -184px -130px;
}

.x-configuration-button-over .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -184px -65px;
}

.configuration-button-disabled .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -184px -191px;
}

.log-action-button .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -208px -130px;
}

.x-log-action-button-over .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -208px -66px;
}

.log-action-button-disabled .extra-menu-button-icon {
    background: url("../../images/flat_design_icons.png") -208px -191px;
}

/* grayed out combobox item */
.x-combo-grayed-out-item {
    color: lightgray;
    background-color: whitesmoke;
    font-style: italic;
}

/*Refine list check/uncheck buttons */
.check-all, .uncheck-all {
    border-bottom: 1px dotted #000;
}

.check-all:hover, .uncheck-all:hover {
    cursor: pointer;
    color: #195bae;
    border-bottom-color: #195bae;
}

.info-icon {
    max-height: 16px;
    max-width: 16px;
    margin: auto 0;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 5px;
}

#job-screen-details-form-for-tutor-body,
#job-screen-details-form-for-expert-body,
#job-screen-details-form-for-group-body,
#job-screen-availability-form-body {
    background-color: #e7ecf0;
}