﻿/* global whitespace fix (for browser compatibility */

#toolbar-softphone-icon, #toolbar-softphone-icon-disabled {
    padding-top: 3px;
}
input {
    outline: none;
    outline-style: none;
    outline-offset: 0;
    border: 1px solid #696969;
}

input:focus {
    outline: none;
    outline-style: none;
    outline-offset: 0;
    border-width: 1px;
}

    input:disabled {
        border: 1px solid #BEBEBE;
    }

    body, h1, h2, h3, h4, h5, h6, p, div, span, ol, ul, li, form, fieldset, img {
        margin: 0;
        padding: 0;
    }
.Body{ 
    background-color:#fff;margin:0;padding:0;
    background-image:url(../Images/Logo.png);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center; 
    min-width:850px;
    min-height:600px;
}
body { font:16px Tahoma, Verdana; color:#000; background:#fff;}
/*td { font:11px/12px Arial, Tahoma; }*/
h1, h2, h3, h4, h5, h6 { line-height:normal; }
img { border:0; }
textarea {  font-family:Verdana,Tahoma; font-size:12px;resize: none; }
small { font-size:80%; }
table { border-spacing:0; /*border-collapse:collapse;*/ padding:0;}
p { margin:0 0 10px; }
h1 { font-size:2em; margin:0 0 5px; }
h2 { font-size:1.4em;  margin :0 0 5px; }
h5 {
    font-size: 1em;
}
.l { text-align:left; }
.c { text-align:center; vertical-align:middle;}
.r { text-align:right; }
.j { text-align:justify; }
.no-overflow { overflow:hidden; }
.clear { clear:both; height:1px; line-height:1px; font-size:1px; overflow:hidden; }
.no-wrap { white-space:nowrap; }
.vtop, .v-t { vertical-align:top; }
.vmiddle, .v-m { vertical-align:middle; }
.auto { width:auto !important; }
.left {float:left;}
.right {float:right !important;}
.b {font-weight:bold;}
.full-width {width:100%;}
.no-border { border:none !important;}
.bottom-margin {margin-bottom:5px;}
html,body,form {
	margin:0;
	padding:0;
	/*height:100%; cause chrome to have scroll bars*/ /* needed for container min-height */
}

table .l
{
	text-align:left;
}

table .r
{
	text-align:right;
}

a img{border:none;}
a {color:#000;text-decoration:none;}
a:hover{color:#000000;cursor:pointer;text-decoration:underline;}
.icon {
    width: 18px;
    height: 18px;
    border: none;
    display: block;
    float: left;
}

    .icon img {
        display: block;
        padding: 1px;
        margin: 0 !important;
        width: 16px;
        height: 16px;
    }

.icon:hover {
    background-color: #C9DEF5 !important;
}

.icon-disabled {
    /*opacity: 0.5;
    filter: alpha(opacity=50);
    -webkit-filter: grayscale(1);
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url(#greyscale);
    filter: gray;*/
}

.icon-disabled:hover {
    background-color: transparent !important;
}

.icon-disabled:hover { background-color: transparent !important; }

.disabled:hover { background-color: transparent !important; }


fieldset {
    border-width:1px;
	border-style:solid;
	border-color:#ccc;

    padding: 2px 0 2px 0;
}

textarea.full { width:100%; }
input.fulltext, textarea.fulltext, select.fulltext { width:325px !important; }
input.mediumtext, textarea.mediumtext, select.mediumtext  { width: 215px; }
input.shorttext { width:115px; }
input.tinytext { width:50px; }
input.urltext { width:284px; }

/*Search TextBox*/
#SearchAllRegions {
	height:20px;
	width:18px;
    padding-right: 2px;
}

#SearchAllRegions:hover
 {
     background-color: #C9DEF5;
}
#SearchAllRegions img{
    padding: 2px;
}
.WaterMarked {
	/*height:18px;*/
	/*width:150px;*/
	padding:2px 0 0 2px;
	border:1px solid #BEBEBE !important;
	background-color:#FFF;
	color:#A2A4A5;
    font-size: 11px;
}
.TextFieldSearch
{
    text-align:left;
    margin-left: 0.2em;
    height:18px;
    float:right;
    margin-top:2px;
    border:1px solid #007ACC;
    /*font-size: 11px;*/
    
}

.vertical-text {
    display:block;
    _writing-mode: tb-rl;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);

	font-size:12px;
	margin-top:50px;
}

.ipfx-ui-icon {
    border: 1px solid #ADADAD;
    background-color: #E1E1E1;
    display: block;
}
.ipfx-ui-icon:hover {
    border: 1px solid #0078D7;
    background-color: #E5F1FB;
    display: block;
}

/*Login Page*/
.LoginBox 
{
    margin: 0 auto; 
    display:block;
    width:300px; 
}

.LoginMessageBox 
{
    margin: 0 auto; 
    border: solid 1px #E6E2D8; 
    background-color:#F7F6F3;
    width:99%;
}

.logout, a:link{text-decoration:none;}
.logout, a:visited{text-decoration:none;}
.logout, a:hover{text-decoration:none;}
.logout, a:active{text-decoration:none;}

.GreyColor{color:Gray;}
.BlackColor{color:Black;}
.RedColor{color:Red;}

.h-gradient
{
    background-color: #EEEEF2;
}

.gradient
{    background-color: #EEEEF2;
}

    #tbqueueAgents td {
        background-image: url(../Images/nav-bar-separator.png);
        background-repeat: no-repeat;
        background-position: right top;
        text-align: center; 
        color: #444;
    }

/********* Phone formater ***********/

#pf_loading {padding-top:2px; display:inline;}

/*********** ERROR PAGE ************/
#errorpage {
    width:600px;
    margin:70px auto;
    font-size:14px;
    font-family:Verdana,Tahoma;
}

.errorheader 
{
    border-bottom:solid 1px #000;
    display:block;
    font-weight:bold;
}

.errorheader img 
{
    margin-right:5px;
    float:left;
}

.errorheader p
{
    display:block;
    float:left;
    margin-top:50px;
}

.errorbody 
{
    display:block;
    margin-top:5px;
    text-align:center;
    background-color:#D0E4FC;
    border:solid 1px #C4D9F9;
    padding:10px 5px 10px 5px;
}

#tree_wrp_currcall {
    display:none;
}


/**************** Custom Grid Styles START    *****************/
.ipfxgrid
{
    display:block;
    float:left;
    background-color:#fff;
    width:100%;
}

.ipfxgrid div, .ipfxgrid div, .ipfxgrid div
{
	float:left;
	display:block;
}

.header
{
    width:100%;
	-moz-user-select: none;
	height:18px;
	background: #d5dbdd;
	border-bottom:solid 1px #cdd2d7;
    border-top:solid 1px #cdd2d7;
}

div#header {
	padding:0;
	background:#ddd;
    top:0;
    left:0;
    position:relative;
}

.header .column
{
	font-family:Verdana,Tahoma;
    font-size:10px;
    padding: 2px 2px 3px 3px;
    height:11px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    border:0;
}

.header .column span
{
	display:inline;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	height:12px;
}
.header .column .text 
{
	float:left;
	height:12px;
	vertical-align:middle;
	cursor:pointer;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.header .column img
{
	overflow:hidden;
	cursor:pointer;
}

.header .columnSeparator 
{
	width:1px;
	display:block;
	height:18px;
	cursor:w-resize;
	background-color:#cdd2d7;
	padding:0;
}

.gridSplitter 
{
	position:absolute;
	z-index:7000;
	cursor:w-resize;
	border:0;
	width:1px;
	background-color:#000;
	display:none;
}

.row 
{
    width:100%;
	padding-top:1px;
	padding-bottom:2px;
	border-top:solid 1px Transparent;
	border-bottom:solid 1px #EAE9E1;
	height:15px;
	font-size:10px;
	font-family:Verdana,Tahoma;
}

.selected
{
	/*border-top:solid 1px #4B4B6F;*/
	/*border-bottom:solid 1px #4B4B6F;*/
	background-color:#3399ED;
}

.selected-no-border
{
	background-color:#3399ED;
}

.row .column 
{	
	padding: 2px 2px 0px 1px;
	height:13px;
	overflow:hidden;
    text-overflow:ellipsis;
  white-space:nowrap;
}

.row .image 
{
	/*border:solid 1px pink;*/
	text-align:center;
	padding: 0px 2px 0px 2px;
	height:16px;
}

.row .cimage 
{
	/*border:solid 1px pink;*/
	text-align:center;
	padding: 0px 2px 2px 2px;
	height:16px;
}
/**************** Custom Grid Styles END    *****************/

.Breadbcrumbtoolbar{
    display:block;
    margin:0;
    color:#000;
    font-size:12px;
    padding-top:0;
    vertical-align:middle;
    /*background:url(../Images/nav-bar-bg.png) repeat-x;*/
    /*height:25px;*/
    padding: 1px 0 0 3px;
    background-color: #EEEEF2;
}

/*Voicemail ToolBar*/
#gridvmtoolbar 
{
    border:solid 1px #C4C1B7;
    background: #000 url(../Images/GridVMToolBar/toolbar-bg.png) repeat-x;
    margin: 0 auto;
    height:24px;
}

#tbv-volume-speaker {
    height: 22px;
    width: 22px;
    float: left;
}
    #tbv-volume-speaker img {
        padding: 2px;
        padding-top: 5px;
    }

#tbv-volume-value {
    width: 26px;
    height: 16px;
    border: 1px solid #707070; 
    margin-top: 2px;
    float: left;
    font-size: 11px;
}
#tbv-volume-button {
    float: left;
    width: 17px;
    height: 20px;
    margin: 2px;
}

#tbv-volume-button a {
    float: left;
    width: 17px;
    height: 10px;
    margin: 0 !important;
}

#gridvmtoolbar .button a {
    /*border:solid 1px #111;*/
    cursor: pointer;
    height: 22px;
    width: 22px;
    float: left;
}

#tbvm-position {
    width: 200px;
    height: 20px;
    float: left;
    display: block;
    margin-left: 8px;
    margin-right: 4px;
}

#tbvm-position-slider {
    margin-top: 10px;
    height: 3px;
    border: 1px solid #B0B0B0 !important;
    background-color: #E7EAEA;
}
#tbvm-position .ui-slider-handle {
    background-color: #DDDDDD !important;
    width: 4px !important;
    height: 14px !important;
    margin-top: -3px !important;
    border: #707070 1px solid !important;
}

#tbv-volume-button-up, #tbv-volume-button-down {
    width: 17px !important;
    height: 10px !important;
}
/*******************/
/*Operator Notes Div*/
.OperatorNotes {
    width: 300px;
    display: none;
    position: absolute;
    z-index: 6001;
    font-size: 11px;
    color: #575757;
}

.OperatorNotes div 
{
	display:block;
	margin:0;
	padding:0;
}

.OperatorNotes .separator 
{
	height:3px;
}

.OperatorNotes .top
{
	background-image:url(../Images/Grid/top.gif);
}

.OperatorNotes .bottom 
{
	background-image:url(../Images/Grid/bottom.gif);
} 

.OperatorNotes .content 
{                
	display:block;	
	border-right:solid 1px #767676;
	border-left:solid 1px #767676;
	padding: 0 4px 0 4px;
	background: #e4e5f0 url(../Images/Grid/bgOperNotes.gif) repeat-x;
}


/*Conference Dialog*/
.headerCss 
{
    font-size:12px;
}
.DialogContent 
{
    padding:10px;
    font-size:12px;
    font-family:Verdana,Tahoma;
    text-align:center;
    background-color:#ECE9D8;
}

.DialogContent a:hover 
{
    text-decoration:none;
}

#dialog_usercallsettings
{
    position:absolute;
    top:0;
    left:0;
    width:400px;
    margin:0;
    padding:0;
    display:none;    
}


/************ iPager **************************/
.ui-ipager {display:block;height:30px;font-size:11px;background-color: #FFF; padding: 0 0 0 2px;}
.ui-ipager img{ padding-left:1px;margin-top:-1px;}
.ui-ipager div.GridFooterText{ padding-top:10px;}
    .ui-ipager a {
        /*background-color: #EAEAEA;*/
        /*border: solid 1px #ADADAD;*/
        border: solid 1px transparent;
        /*width: 41px;*/
        /*height: 18px; */
        display: block;
        float: left;
        margin-top: 8px;
        margin-right: 10px;
    }

    .ui-ipager a:hover {
        background-color: #E4F1FD;
        border: solid 1px #7FB5EB;
    }


/***********  Breadcrumb  *********************/

#breadcrumb-buttons {
    display:block;
    float:left;
}

.BreadbcrumbRight{
    color:#000;
    font-size:12px;
    padding-top:6px;
    padding-left:4px;
    height:20px;
    float:left;
}

#SearchAllRegions {
    display:none;
    margin:2px; 
    float:right;
    cursor:pointer;
}

#breadcrumb-dd-mnu {
    display:none;
    width:16em;
}

#breadcrumb-dd-mnu li {
    width:16em;
}

#breadcrumb-wrapper {
    display:block;
    float:left;
}

#bcFirst {
    display:block;
}
#bcFirstDD {
    display:block;
}

.selected-button-20{
	background:url(../Images/Icons/20_selected_bg.png) repeat-x;
	outline:0;
	border:solid 1px #F3CB59 !important;
	-moz-border-radius: 0.2em 0.2em 0.2em 0.2em;
    border-radius: 0.2em 0.2em 0.2em 0.2em;	
}

.participant-icon
{
    background:url(../Images/Icons/22x22_btn_grid.png);
    background-position: -3px -223px;
}

#monitorframesdiv {
	display:none;
	float:left;
	height:0;
	width:0;
}

/* used to stop draggable items being selected*/
.nonselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.v-resizer-hover {
    border-left:solid 1px #979797 !important;
    width: 2px !important; 
    border-right:solid 1px #979797 !important;
}

.h-resizer-hover {
    border-top:solid 1px #979797 !important;
    height: 2px !important;
    border-bottom:solid 1px #979797 !important;
}


#key-overlay {
    filter: alpha(opacity=25); /* support: IE8 */
    opacity: 0.25;
    background-color: #0078d7;
    position: absolute;
    z-index: 100;
}

/**************** iLIST *********************/
div.ui-list {
    border: solid 1px #A9B1B8;
}
ul.ui-list {    list-style-type:none;    overflow:auto;}
ul.ui-list li {    padding: 0;    display:block;    height:16px;    margin:1px 1px 1px 1px;}
ul.ui-list a , ul.ui-list a:hover{    display:block;    height:15px;    color : #000; overflow:hidden;}
ul.ui-list a div {    padding:1px 0 0 2px;    display:block;    float:left;    vertical-align:middle;    }
div.ui-list input { display:block; clear:left; float:left; padding:1px 0 0 2px;margin:0;}
ul.ui-list .selected {    background-color:#3399ED;    border:0;}

.transparent-border {
    border: solid 1px transparent;
}


@-moz-keyframes spin {
    0% { -webkit-transform: rotate(0deg); transform:rotate(0deg); }
    25% { -webkit-transform: rotate(90deg); transform:rotate(90deg); }
    25.5% { -webkit-transform: rotate(90deg); transform:rotate(90deg); }
    50% { -webkit-transform: rotate(180deg); transform:rotate(180deg); }
    50.5% { -webkit-transform: rotate(180deg); transform:rotate(180deg); }
    75% { -webkit-transform: rotate(270deg); transform:rotate(270deg); }
    75.5% { -webkit-transform: rotate(270deg); transform:rotate(270deg); }
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); transform:rotate(0deg); }
    25% { -webkit-transform: rotate(90deg); transform:rotate(90deg); }
    25.5% { -webkit-transform: rotate(90deg); transform:rotate(90deg); }
    50% { -webkit-transform: rotate(180deg); transform:rotate(180deg); }
    50.5% { -webkit-transform: rotate(180deg); transform:rotate(180deg); }
    75% { -webkit-transform: rotate(270deg); transform:rotate(270deg); }
    75.5% { -webkit-transform: rotate(270deg); transform:rotate(270deg); }
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
@keyframes spin { 
    0% { -webkit-transform: rotate(0deg); transform:rotate(0deg); }
    25% { -webkit-transform: rotate(90deg); transform:rotate(90deg); }
    25.5% { -webkit-transform: rotate(90deg); transform:rotate(90deg); }
    50% { -webkit-transform: rotate(180deg); transform:rotate(180deg); }
    50.5% { -webkit-transform: rotate(180deg); transform:rotate(180deg); }
    75% { -webkit-transform: rotate(270deg); transform:rotate(270deg); }
    75.5% { -webkit-transform: rotate(270deg); transform:rotate(270deg); }
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}

.grid-icon {
    width:16px;
    height:16px;
}

.grid-icon-large {
    width: 32px;
    height: 32px;
}