/*************************************************************************************
*  Body style
*************************************************************************************/
body {
    font: normal 12px verdana,arial,tahoma;
}
html, body {
    margin:0;
    padding:0;
    border:0 none;
    overflow:hidden;
    height:100%;
    width:100%;
}

/*************************************************************************************
*  Accordion. Set Bold font for active (expanded) panel.
*************************************************************************************/
.x-accordion-hd {
  font-weight:bold;
}

.x-panel-collapsed .x-accordion-hd {
  font-weight:normal;
}

/*************************************************************************************
*  Header
*************************************************************************************/
#header{
   border:0 none;
   background:#1E4176 url(images/hd-bg.gif) repeat-x 0 0;
   padding-top:3px;
   padding-left:3px;
}
/*.docs-header .x-panel-body {
    background:transparent;
}*/ 

#header .api-title,
#header .api-title a,
#header .api-title a:link,
#header .api-title a:visited,
#header .api-title a:hover {
    font: normal bold 13px Tahoma, Verdana, Arial, Helvetica, sans-serif;
    color: #EDF1F9;
    margin:5px;
    text-decoration: none;
}

#header .logout {
    margin:5px;
}

#header .logout,
#header .logout a,
#header .logout a:link,
#header .logout a:visited,
#header .logout a:hover {
    font: normal bold 11px Tahoma, Verdana, Arial, Helvetica, sans-serif;
    color: #EDF1F9;
}


/*************************************************************************************
*  Loading indicator
*************************************************************************************/

.loading-indicator {
    font-size:11px;
    background-image:url('../../ext/resources/images/default/grid/loading.gif');
    background-repeat: no-repeat;
    background-position:top left;
    padding-left:20px;
  height:18px;
  text-align:left;
}
#loading-mask{
  position:absolute;
  left:0;
  top:0;
    width:100%;
    height:100%;
    z-index:20000;
    background-color:white;
}
#loading{
  position:absolute;
  left:45%;
  top:40%;
  padding:2px;
  z-index:20001;
    height:auto;
}
#loading img {
    margin-bottom:5px;
}
#loading .loading-indicator{
  background:white;
  color:#555;
  font:bold 13px tahoma,arial,helvetica;
  padding:10px;
  margin:0;
    text-align:center;
    height:auto;
} 

/*************************************************************************************
*  Left Accordion Panel
*************************************************************************************/
#left-panel .x-accordion-hd {
  background: transparent url('images/left-panel-header.png') repeat-x scroll 0 -9px;
  font-weight: bold;
  padding-bottom:8px;
  padding-top:8px;
  font-size: 13px;
}
#left-panel .x-toolbar {
  background: transparent url('images/left-panel-toolbar-bg.png') repeat-x scroll 0 -9px;
}

#left-panel .x-panel-collapsed .x-accordion-hd {
  background: transparent url('ext/resources/images/default/panel/light-hd.gif') repeat-x scroll 0 -9px;
  font-weight: normal;
}
#left-panel .x-panel-header-text {
  padding-left: 6px;
}

/*************************************************************************************
*  Calls Grid Panel
*************************************************************************************/
.x-grid3-row .callerNumberCell { 
  background:#f7f7f7!important;
  color: #004080; 
}
.x-grid3-row-alt .callerNumberCell {background:#f0f0f0 !important;}
.x-grid3-row-over .callerNumberCell {background:#efefef !important;}
.x-grid3-row-selected .callerNumberCell {background:#DFE8F6 !important;} 


.x-grid3-row .calleeNumberCell { 
  background:#f7f7f7 !important;
  color: #004080; 
}
.x-grid3-row-alt .calleeNumberCell {background:#f0f0f0 !important;}
.x-grid3-row-over .calleeNumberCell {background:#efefef !important;}
.x-grid3-row-selected .calleeNumberCell {background:#DFE8F6 !important;} 


.callerNameCell { 
/*  color: #1F3F3F; */
}

.calleeNameCell { 
  /*color: #1F3F3F; */
}

/*
.x-grid3-row{cursor:default;border:1px solid #ededed;border-top-color:#fff;width:100%;}
.x-grid3-row-alt{background-color:#fafafa;}
.x-grid3-row-over{border:1px solid #ddd;background:#efefef url(../images/default/grid/row-over.gif) repeat-x left top;} 
.x-grid3-row-selected{background:#DFE8F6!important;border:1px dotted #a3bae9;} 
*/

/*************************************************************************************
*  Call Details Panel
*************************************************************************************/
.details-full {
  border-top: 1px solid #99BBE8;
}

.audio-files-list-grid {
  border-top: 1px solid #99BBE8;
}

.call-data {
  padding-top: 5px;
  padding-bottom: 5px;
}

.call-data.right-panel {
  padding-left: 5px;
  padding-right: 5px;
}

.call-data.right-panel .call-download-link {
  padding-top: 5px;
  padding-bottom: 7px;
  text-align: center;
}

.call-data.bottom-panel table.call-details-data td,
.call-data.bottom-panel table.call-file-data td {
  padding-left: 5px;
  padding-right: 5px;
}

.call-data table {
  width: 100%;
}

.call-data {
  font-size: 11px;
}

.call-data td {
  height: 1.5em;
  white-space: nowrap;
}

.call-data-group {
 /*margin-top: 1em;*/
 width: 100%;
 border-bottom:2px solid #222222;
 
}

.call-data-title {

  color: #555555;
}

.call-data-title {
  width: 10em;
}

.details-view-menu .x-menu-item-checked {
  border:1px dotted #a3bae9 !important;
  background:#DFE8F6;
  padding:0;
}

/*************************************************************************************
*  Call Search Panel
*************************************************************************************/
/* style for collapsedTitleTextEl */
.x-layout-collapsed #title {
  color:#15428B;
  font-family:tahoma,arial,verdana,sans-serif;
  font-size:11px;
  font-size-adjust:none;
  font-style:normal;
  font-variant:normal;
  font-weight:bold;
  line-height:15px;
  margin-top: 2px;
  margin-left: 5px;
}

/*************************************************************************************
*  Calls Folders Panel
*************************************************************************************/
.folders-tree .x-tree-selected {
    border:1px dotted #a3bae9;
    background:#DFE8F6;
}
.folders-tree .x-tree-node .x-tree-selected a span{
  background:transparent;
  color:#15428b;
  font-weight:bold;
}


#help-window .x-window-body {
    background: #FFFFFF !important;
}

#help-window .x-window-body p {
        margin:10px;
}

/*************************************************************************************
*  Ext.ux.Toolbar.IcoTextItem
*************************************************************************************/
.x-toolbar .ytb-ico-text {
  background-position:0 2px;
  background-repeat:no-repeat;
  padding:2px 5px 2px 20px;
}

.calls-grid-state.icon-error {
  color:#CC3333;
}

/*************************************************************************************
*  UserGroupEditPanel
*************************************************************************************/
.user-permissions {
  padding: 10px 15px 10px 15px;
  margin-top: 15px;
  border-top: 1px solid #B5B8C8; 
}
.user-permissions legend {
  font-size: 13px;
}
.user-permissions .x-tab-panel-header-plain .x-tab-strip-spacer {
  border-bottom: 0; 
}
.x-check-group-alt {
    background: #D1DDEF;
    border-top:1px dotted #B5B8C8;
    border-bottom:1px dotted #B5B8C8;
}
.user-permissions label.x-form-item-label {
  font-weight: bold;
}

/*************************************************************************************
*  Override styling for basic HTML elements (p, ul, ol...) inside panel with style 'plain-text'
*************************************************************************************/
.plain-text {
  font-size:12px;
  font-family: tahoma,arial,helvetica,sans-serif;
}
.plain-text p {
  /*padding: 0 0 0.5em 0;*/
  margin: 0;
}
.plain-text em {
  /*bringing italics back to the em element*/
  font-style:italic;
}
.plain-text blockquote,
.plain-text ul,
.plain-text ol,
.plain-text dl {
  /*giving blockquotes and lists room to breath*/
  margin:1em;
}
.plain-text ol,
.plain-text ul,
.plain-text dl {
  /*bringing lists on to the page with breathing room */
  margin-left:2em;
}
.plain-text ol li {
  /*giving OL's LIs generated numbers*/
  list-style: decimal outside;  
  margin-bottom:0.25em;
}
.plain-text ul li {
  /*giving UL's LIs generated disc markers*/
  list-style: disc outside;
  margin-bottom:0.25em;
}
.plain-text dl dd {
  /*giving UL's LIs generated numbers*/
  margin-left:1em;
} 
.plain-text fieldset {
  padding:0.5em;
  margin-bottom:1em;
} 




/*************************************************************************************
*  Folder Sorting Rules
*************************************************************************************/
.folder-sort-rule-condition .var {
  color: #0000D2;
  padding-left: 5px;
  padding-right: 5px;
  /*font-weight: bold;*/
  text-decoration: underline;
}

.folder-sort-rule-condition .val {
  color: #000000;
  padding-left: 5px;
  padding-right: 5px;
  font-weight: bold;
}

.folder-sort-rule-condition .or-and {
  color: #FF0000;
  padding-left: 10px;
  padding-right: 10px;
}

/*************************************************************************************
*  Call Details: Notes
*************************************************************************************/
.note-wrap {
  margin-bottom: 4px;
  border:1px solid #A3F830;
}
.note-wrap.x-view-selected{
	border:1px solid #6CB3E6;
}
.note-wrap.x-view-over{
	border:1px solid #6CB3E6;
}
/*.note-wrap.x-view-over.x-view-selected{
	border:1px solid #6CB3E6;
}*/

.created-by-info, 
.edited-by-info {
  background: #83E298 none repeat scroll 0 0 !important;
  font-size: 11px;
  padding: 4px;
}
.x-view-selected .created-by-info,
.x-view-selected .edited-by-info{
  background: #96C8ED none repeat scroll 0 0 !important;
}
.x-view-over .created-by-info,
.x-view-over .edited-by-info{
  background: #6CB3E6 none repeat scroll 0 0 !important;
}


.created-by-info .user-name,
.edited-by-info .user-name {
  font-weight: bold;
}

.note {
  padding: 4px;
}

/*
.x-view-selected .note {
  background: #E9FEC2 none repeat scroll 0 0 !important;
}
*/

.x-view-over .note {
  background: #EBF3FA none repeat scroll 0 0 !important;
}