/* Define fonts
----------------------------------------------------------*/
/*
@font-face
{
    font-family: HelveticaNeueLight;
    src: url(/Content/Fonts/HelveticaNeueLTCom-Lt.ttf);
}

@font-face
{
    font-family: HelveticaNeueUltraLight;
    src: url(/Content/Fonts/HelveticaNeueLTCom-UltLt.ttf);
}

@font-face
{
    font-family: HelveticaNeueMedium;
    src: url(/Content/Fonts/HelveticaNeueLTCom-Md.ttf);
}
*/

/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
html
{
    height: 100%;
}

body
{
    background-repeat: repeat-y; /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(top, #DEE9EF 0%, #F0F5F8 50%, #DEE9EF 100%); /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, #DEE9EF 0%, #F0F5F8 50%, #DEE9EF 100%); /* Opera */
    background-image: -o-linear-gradient(top, #DEE9EF 0%, #F0F5F8 50%, #DEE9EF 100%); /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #DEE9EF), color-stop(0.5, #F0F5F8), color-stop(1, #DEE9EF)); /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top, #DEE9EF 0%, #F0F5F8 50%, #DEE9EF 100%); /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to bottom, #DEE9EF 0%, #F0F5F8 50%, #DEE9EF 100%);
    font-size: 100%;
    font-family: Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #696969;
    height: 100%;
}
body.modal
{
    background: none;
}

a
{
    color: #3f688d;
    text-decoration: none;
}

a:hover
{
    color: #333;
    text-decoration: underline;
}

a:active
{
    color: #1d60ff;
}

p, ul
{
    margin-bottom: 20px;
    line-height: 1.6em;
}

header, footer, nav, section
{
    display: block;
}


/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #000;
}

h1
{
    font-size: 2em;
    padding-bottom: 0;
    margin-bottom: 0;
}

h2
{
    margin: 0;
    padding: 0 0 10px 0;
    font-size: 28px;
    font-weight: 100;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5, h6
{
    font-size: 1em;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page
{
    min-width: 620px;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    position: relative;
}
.modal .page
{
    max-width: 100%;
    width: 100%;
}

header, #header
{
    position: relative;
    margin-bottom: 0px;
    color: #000;
    padding: 0;
}
header h1, #header h1
{
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    color: #fff;
    border: none;
    line-height: 2em;
    font-size: 32px !important;
    text-shadow: 1px 1px 2px #111;
}
header h2#dev
{
    bottom: 20px;
    color: #F58220;
    left: 50px;
    margin-left: -50px;
    font-size: 15px;
    position: absolute;
    text-align: right;
    width: 220px;
}

#breadcrumbs
{
    background: Black url(images/breadcrum_background.png) repeat-x;
    position: absolute; /*width: 100%;*/
    height: 35px;
    bottom: 15px;
    right: 0;
    left: 0;
    border: 1px solid #606972;
    border-radius: 5px;
    padding: 5px 0;
    line-height: 200%;
}
#breadcrumbs a.level0
{
    margin-left: 17px;
    font-size: 12pt;
    font-weight: normal;
    color: #3996df;
}
#breadcrumbs a.level1, #breadcrumbs span.level1
{
    margin-left: 5px;
    font-size: 12pt;
    font-weight: normal;
    color: White;
}
#breadcrumbs a:hover
{
    text-decoration: none;
}

#body
{
    /*height: 100%*/
}

#nav
{
    float: left;
    margin-right: 10px;
    height: 100%;
    overflow: hidden;
}

#designMain
{
    background-color: #f2f2f2;
    padding: 30px;
    border: 1px solid #ededed;
    font-size: 12px;
    position: absolute;
    min-width: 94%;
}
.modal #designMain
{
    background-color: transparent;
}

#main
{
    overflow: hidden;
    font-size: 12px;
    height: 100%;
}
.modal #main
{
    background-color: transparent;
}

#details
{
    float: left;
    width: 100%;
    position: relative;
}

.panel
{
    background-color: #f2f2f2;
    position: relative;
    border: 1px solid #ededed;
    margin: 0;
    margin-bottom: 10px;
    padding: 30px;
    padding-top: 10px;
    padding-bottom: 20px;
}
.panel table
{
    background-color: #f7f7f7; /*width: 100%;*/
    width: 740px;
    margin-left: -31px;
    margin-right: -31px;
    margin-bottom: -11px;
}

.panel h2
{
    text-transform: capitalize;
}

.announcement
{
    background-color: #FFF5A1;
    padding-bottom: 10px;
    padding-right: 40px;
}

.announcement .close
{
    position: absolute;
    color: transparent;
    right: 20px;
    top: 10px;
}

.announcement .close:after
{
    color: #696969;
    content: "x";
    font-weight: bold;
}

.announcement:first-child p, .announcement:last-child table
{
    margin-top: 0;
    padding-top: 0;
}

.announcement:last-child p, .announcement:last-child table
{
    margin-bottom: 0;
    padding-bottom: 0;
}

/* resest table styles */
.announcement table, .announcement table tr, .announcement table td, .announcement table tbody, .announcement table tbody tr, .announcement table tbdoy td
{
    background: none;
    border: none;
    bottom: auto;
    clear: none;
    cursor: default; /* didn't really know what the default for display should be*/ /*display: inline;*/
    float: none; /*font-family: Arial, Helvetica, sans-serif; 	    font-size: medium;*/
    font-style: normal;
    font-weight: normal;
    height: auto;
    left: auto;
    letter-spacing: normal;
    line-height: normal;
    max-height: none;
    max-width: none;
    min-height: 0;
    min-width: 0;
    overflow: visible;
    position: static;
    right: auto;
    text-align: left;
    text-decoration: none;
    text-indent: 0;
    text-transform: none;
    top: auto;
    visibility: visible;
    white-space: normal;
    width: auto;
    z-index: auto;
    margin: inherit;
    padding: inherit;
}

#childList
{
    /*margin-top: 50px;*/
    margin-top: 30px;
}
#details
{
    width: 550px;
}
#list.half, #details.half
{
    width: 650px;
}

footer, #footer
{
    background-color: #fff;
    color: #999;
    padding: 10px 0;
    text-align: center;
    line-height: normal;
    margin: 0 0 30px 0;
    font-size: .9em;
    border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
}


/* TAB MENU
----------------------------------------------------------*/

#mainMenu
{
    background-color: #f2f2f2;
    width: 230px; /*height: 100%;*/
}

ul#menu
{
    /*border-top: 1px solid #ededed;*/
    border-top: 1px solid #fff;
    margin: 0;
    padding: 0;
    line-height: 150%; /*border-bottom: 1px solid #dbddef;*/ /*border-bottom: 1px solid #fff;*/
}
ul#menu li:first-child
{
    border-top: 0;
}
ul#menu li:last-child
{
    border-bottom: 1px solid #fff;
}
ul#menu li
{
    list-style: none; /*background-color: #f3f8fc;*/
    background-color: #f2f2f2; /*border-top: 1px solid #dbddef;*/
    border-bottom: 1px solid #fff;
    padding: 15px 30px 15px 20px; /*color: rgba(128,128,128,1);*/
    font-weight: 100;
}
ul#menu li a
{
    /*font-size: .8em;*/ /*color: #878080;*/
    color: #3f688d;
    margin: 0; /*margin-left: 8px;             margin-bottom: 10px;*/
    text-decoration: none;
    border: 0;
    cursor: pointer;
}
ul#menu li:first-child a
{
    /*border: 0;*/
}
ul#menu li a:active
{
    text-decoration: none;
}
ul#menu li a:hover
{
    /*background-color: #fff;*/ /*color: #303941;*/
    color: #f58220;
    text-decoration: none;
}
ul#menu li.disabled a
{
    color: #999;
}
ul#menu li.home a, ul#menu li.inbox a
{
    background: transparent url(images/icons/icon-home-2.png) no-repeat center -24px;
    overflow: hidden;
    padding: 5px 16px;
    background-color: #eee;
}
ul#menu li.home span, ul#menu li.inbox span
{
    margin-left: -9999px;
    visibility: hidden;
}
ul#menu li.inbox a
{
    background: #efefef url(images/icons/icon-inbox.png) no-repeat center center;
}
ul#menu li.selected a
{
    /*background-color: #fff;*/ /*color: #303941;*/
    color: #3f688d;
}
ul#menu li a.subItem
{
    font-size: .8em;
    line-height: 110%;
    margin-left: 30px; /*color: #878080;*/
    color: #3f688d;
    font-weight: 400;
    margin-top: 10px; /*padding: 0 0 8px;*/ /*color: rgba(128,128,128,1);*/
}
ul#menu li a.subSubItem
{
    font-size: .8em;
    line-height: 110%;
    margin-left: 50px; /*color: #878080;*/
    color: #3f688d;
    font-weight: 400;
    margin-top: 10px; /*padding: 0 0 8px;*/ /*color: rgba(128,128,128,1);*/
}
ul#menu li a.selected
{
    font-size: .8em;
    line-height: 110%;
    margin-left: 35px; /*color: #252a2e;*/
    color: #f58220;
    font-weight: 700;
    margin-top: 10px; /*padding: 0 0 8px;*/
}
ul#menu li a.itemSelected
{
    line-height: 110%;
    color: #f58220;
    font-weight: 700;
    margin-top: 10px; /*padding: 0 0 8px;*/
}
ul#menu li a.subSelected
{
    font-size: .8em;
    line-height: 110%;
    margin-left: 50px; /*color: #252a2e;*/
    color: #f58220;
    font-weight: 700;
    margin-top: 10px; /*padding: 0 0 8px;*/
}

ul#menu li a.selected:before, ul#menu li a.subSelected:before, ul#menu li a.itemSelected:before
{
    font-size: 140%;
    content: "\0BB \020"; /*content: ">>";*/
    margin-left: -16px;
}

ul#menu li.home a:hover, ul#menu li.inbox a:hover, ul#menu li.home.selected a, ul#menu li.inbox.selected a
{
    background-color: #fff;
    text-decoration: none;
}
ul#menu li.home a:hover, ul#menu li.home.selected a
{
    background-position: center 8px;
}


/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

fieldset
{
    border: 1px solid #ddd;
    border: none;
    padding: 0 1.4em 1.4em 1.4em;
    padding: 10px 10px 10px;
    margin: 0 0 1.5em 0;
    margin: 0;
}
legend
{
    display: none;
    font-size: 1.2em;
    font-weight: bold;
}

textarea
{
    min-height: 75px;
    width: 300px;
}

input
{
}
input.button
{
    /*border: solid 1px #BFBBBB !important;*/
    border: solid 1px #ededed !important;
    background: none;
    text-decoration: none;
    cursor: pointer;
    margin-right: 5px;
    width: 207px; /*background-color: transparent;*/
    background-color: #fff;
    line-height: 160%;
    margin-bottom: 5px;
    padding: 5px 8px 5px 0;
    font-size: 120%;
    color: #3f688d;
}
input.buttonsmall
{
    border: solid 1px #ededed !important;
    background: none;
    text-decoration: none;
    cursor: pointer;
    margin-right: 5px;
    width: 105px;
    background-color: #fff;
    line-height: 160%;
    margin-bottom: 5px;
    padding: 5px 8px;
    font-size: 120%;
    color: #3f688d;
}
input[type="text"], input[type="password"]
{
    border: 1px solid #ccc;
    padding: 2px;
    padding: 3px 2px;
    font-size: 1.2em;
    color: #444;
    width: 200px;
    width: 300px;
}
input[type="submit"]
{
    font-size: 1.2em;
    padding: 5px;
}
input.datetime, input.ani
{
    width: 125px;
    margin-right: 5px;
}
input.pincode
{
    width: 75px;
}
input.number, select.number, .list-numbers select
{
    width: 75px;
}
input.medium
{
    width: 75px;
}
input.big
{
    width: 150px;
}
input.calendar
{
    width:130px;
    height:18px;
}
input.small
{
    width: 35px;
}
input.time
{
    width: 40px;
}

select
{
    border: 1px solid #ccc;
    padding: 2px;
    font-size: 1.2em;
    color: #444;
}
input.disabled, select.disabled
{
    background-color: #eee;
    color: #aaa;
}

#frmApplication .enable-pincode
{
    display: none;
}

#frmAccount #Password
{
    width: 185px;
}


/* TABLES
----------------------------------------------------------*/

table
{
    border: solid 1px #ededed;
    border-collapse: collapse;
}
table.noborder, table.noborder td
{
    border: 0;
}
tr
{
}
tr.commercial td
{
    border: 0;
    padding-bottom: 10px;
    padding-top: 10px;
}
th
{
    display: none;
    padding: 6px 0 5px 6px;
    text-align: left;
    background-color: #e8eef4;
    border: solid 1px #e8eef4;
    vertical-align: bottom;
}
td
{
    background-color: #fff; /*padding: 3px;*/
    vertical-align: middle;
    height: 45px;
    border-top: solid 1px #ededed;
}
/*tr:nth-child(2n) td {
                background-color: #f7f7f7;
            }*/
tr.current td
{
    background-color: #fee;
    background-color: #dee9ef;
    color: #000;
    font-weight: bold;
}
tr.inactive td
{
    color: #aaa;
    text-decoration: line-through;
}

td.center, th.center
{
    text-align: center;
}
/*th.date, th.datetime, */th.time, th.number, th.percentage, /*td.date, td.datetime, */ td.time, td.number, td.percentage
{
    text-align: right;
}
th.id, td.id
{
    text-align: right;
}

td b.rec
{
    font-weight: normal;
}
td b.rec.active
{
    color: #ed1c24;
}
td.checkbox, td.input, td.select
{
    padding: 0;
    text-align: center;
}
td.checkbox input
{
    padding: 0;
}
th.datetime, td.datetime
{
    width: 110px;
    width: 135px;
}
td.destination
{
    width: 150px; /*80*/
}
td.description
{
    /*padding-top: 10px;                 padding-left: 2px;                 padding-right: 2px;                 padding-bottom: 0px;                 /*width: 325px;*/
    font-size: 130%;
    font-weight: 100;
}

td.description span.status
{
    width: 300px;
}
/*td.arrow:before
            {
                content: "\0BB \020";
            }*/
td.arrow
{
    font-size: 200%;
    vertical-align: middle; /*color: #c9c8c8;*/ /*color: #3f688d; */
    color: #367db6;
    width: 57px; /*padding-top: 10px;*/
    height: 50px;
}
th.name, td.name
{
    /*width: 150px;                 white-space: nowrap;                 padding: 0;*/
    font-size: 130%;
    font-weight: 100;
}
th.name2, td.name2
{
    white-space: nowrap;
}
td.order
{
}
td.order b
{
    color: #aaa;
    display: block;
    font-size: 10px;
    text-align: right;
    width: 15px;
}
tr:hover td.order b
{
    color: #333;
}
td.priority
{
    padding: 0 2px;
}
td.priority select
{
    font-size: 10px;
    padding: 0;
}

td.in, td.ivr
{
    background-color: #f4f4f4;
}
td.attempt
{
    background-color: #F8F8F8;
}
td.small, th.small
{
    min-width: 0 !important;
    width: 35px;
}
td.action, th.action
{
    min-width: 0 !important;
    width: 35px;
}
td.action, th.action last-child
{
    padding-right: 20px;
}
td.status
{
    width: 30px;
    vertical-align: top;
}
td.status b
{
    display: block;
    width: 10px;
    height: 10px;
    margin-top: 11px;
    margin-left: 10px;
    border: 1px solid #ededed;
}

.report td.status b, .report.monitor td.status b.Presence, .report.monitor td.status b.CallState
{
    margin: 1px;
}

.report.monitor td.status b.CallState
{
    height: inherit;
    width: 100px;
    padding: 0;
    color: #ffffff;
    text-align: center;
}

td.status .check-box
{
    margin: 15px;
}

td.reporttype
{
    width: 100px;
}
td.tumbnail
{
    width: 165px;
}
td.tumbnail img.tumbnailPic
{
    height: 150px;
    width: 150px;
}
td.tumbnail img.type
{
    height: 150px;
    position: absolute;
    left: 0px;
}
td.commDescription
{
    padding: 10px 5px 0px 5px;
    vertical-align: top;
    font-weight: 100;
    width: 470px;
}
td.commDescription span.title
{
    font-size: 180%;
    font-weight: bold;
}
td.commDescription span.subTitle
{
    font-size: 130%;
}
td.commDescription span.text
{
    font-size: 115%;
}
td.commDescription a
{
    color: #696969;
}
td.extra
{
    vertical-align: top;
    padding-top: 15px;
}
td.extra div
{
    height: 150px;
    position: relative;
}
td.extra span.label
{
    font-size: 90%;
    font-weight: bold;
}
td.extra span.datetime
{
    font-size: 115%;
    padding-left: 10px;
}
td.extra img
{
    width: 80px;
    position: absolute;
    bottom: 0px;
    right: 0px;
}

table.queuetype td
{
    background-color: transparent;
    height: 21px;
}

.accounts .action
{
    width: 150px;
}

.status .true, .status .enabled, .status .active, .status .success, .status .available
{
    background-color: #ebd417; /* Yellow */
}
.status .false, .status .disabled, .status .inactive, .status .agentnoanswer, .status .callernoanswer, .status .aborted, .status .unavailable
{
    background-color: #f58220; /* Orange */
}
.status .paused, .status .scheduled, .status .pause
{
    background-color: #dedede; /* Grey */
}
.status .inprogress, .status .handling
{
    background-color: #7670b3; /* Purple */
}
.status .cancelled
{
    background-color: #efefef; /* Light grey */
}
/*  
    .status .inactive {
        background-color: Red;  /* Red */
/*}*/


.subitems td.checkbox
{
    padding-top: 4px;
}
.subitems td.header input, .subitems td.select select
{
    width: 215px;
}
.subitems td.select.small select
{
    width: 100px;
}
.subitems input, subitems select
{
    max-width: 150px !important;
}
.subitems td.action
{
    padding: 0;
}
.subitems td.action a
{
    background-color: #fff;
    border: 1px solid #ccc;
    display: block;
    margin: 2px 1px;
    overflow: hidden;
    padding: 4px 6px 3px;
}
.subitems td.action a:hover
{
    border-color: #777;
}
.subitems a.item.down, .subitems a.item.up
{
    background-image: url(/Content/images/icons/icon-arrowdown.png);
    background-position: center;
    background-repeat: no-repeat;
    width: 6px;
}
.subitems a.item.up
{
    background-image: url(/Content/images/icons/icon-arrowup.png);
}
.subitems tr:first-child a.item.up
{
    background-image: url(/Content/images/icons/icon-arrowup-o.png);
}
.subitems tr:last-child a.item.down
{
    background-image: url(/Content/images/icons/icon-arrowdown-o.png);
}
.subitems a.item span
{
    margin-left: -9999px;
}

.reports .type
{
    padding: 2px 2px 0;
}
.reports .type b
{
    background: transparent url(/Content/images/icons/icon-report-default.png) left top no-repeat;
    display: inline-block;
    margin: 0;
    width: 16px;
    height: 15px;
    margin-left: 6px;
    margin-top: 6px;
}
.reports .type .ApplicationLog
{
    background-image: url(/Content/images/icons/icon-report-application-log.png);
}
.reports .type .Counters
{
    background-image: url(/Content/images/icons/icon-report-counters.png);
}
.reports .type .Extension
{
    background-image: url(/Content/images/icons/icon-report-extension.png);
}
.reports .type .Inbound
{
    background-image: url(/Content/images/icons/icon-report-inbound.png);
}
.reports .type .Outbound
{
    background-image: url(/Content/images/icons/icon-report-outbound.png);
}
.reports .type .Recordings
{
    background-image: url(/Content/images/icons/icon-report-recordings.png);
}
.reports .type .ScheduledCampaigns
{
    background-image: url(/Content/images/icons/icon-report-scheduled.png);
}
.reports .type .Stored
{
    background-image: url(/Content/images/icons/icon-report-stored.png);
}
.reports .type .Variables
{
    background-image: url(/Content/images/icons/icon-report-var.png);
}

.legend
{
}
.legend table
{
    width: auto !important;
    border: 0px !important;
    padding: 0px !important;
    margin: 0px !important;
}
.legend td
{
    background-color: #fff !important;
    height: 25px !important;
    padding: 0px !important;
    margin: 0px !important;
    vertical-align: bottom !important;
    border: 0px !important;
}
.legend td.status
{
    padding: 0px !important;
    margin: 0px !important;
    vertical-align: bottom !important;
}
.legend td.status b
{
    padding: 0px !important;
    margin: 0px !important;
    background-position-y: -2px;
}
.legend h4
{
    margin-bottom: 5px;
}

.dataTables_wrapper
{
    overflow-x: auto;
    /*margin-left: -31px;*/
    /*width: 740px;*/
    margin: 0;
    padding: 0;
}

.report
{
    /*margin-right: 30px;*/
    width: 100% !important;
    margin: 0 !important;
}

.report thead tr th
{
    display: table-cell;
}
.report tbody tr td
{
    height: auto;
}
.report th
{
    /*text-align: center;*/
    font-size: 100%;
    font-weight: bold;
    white-space: nowrap;
}
.report tfoot td
{
    background-color: #e8eef4 !important;
    font-weight: bold;
    height: auto;
    white-space: nowrap;
}
.report td
{
    min-width: 60px;
    font-size: 100%;
    white-space: nowrap;
}
.report th.callid, .report td.callid
{
    width: 250px;
}
.report tbody tr:hover td
{
    background-color: #eee;
    color: #000;
}
.report tr.c_0 td, .report tr.c_0 td a
{
    color: #aaa;
}

.report.extensionavail, .report.recordingstats
{
}
.report.extensionavail td
{
    text-align: left;
}
.extensionavail .status .available, .extensions .status .available
{
    background-color: #ebd417;
}
.extensionavail .status .handling, .extensions .status .handling
{
    background-color: #7670b3;
}
.extensionavail .status .pause, .extensions .status .pause
{
    background-color: #dedede;
}
.extensionavail .status .unavailable, .extensions .status .unavailable
{
    background-color: #f58220;
}

.extensions .status .idle
{
    background-color: #CCCCCC;
}
.extensions .status .incall
{
    background-color: #33CC00; /*33CC00*/
}
.extensions .status .setup, .extensions .status .alerting
{
    background-color: #FA4510; /*CC3300*/
}
.extensions .status .aftercallwork
{
    background-color: #990066; /*FF6600*/
}

.report.extension
{
}
.report.extension td.status
{
    max-width: 20px;
    width: 0;
    padding: 0;
}

.report.stored td.value
{
    text-align: left;
}

.report.variables
{
    width: 100%;
}
.report .date, .report .time
{
    width: 100px;
}
.report .freq
{
    width: 60px;
}

.monitor
{
}

.monitor td
{
    padding: 1px 0 1px 6px;
}

.report.monitor tr:first-child th
{
    text-align: left;
}
.monitor .graph
{
    padding: 1px;
    width: 200px;
}
.monitor .graph .progress
{
    background-color: #fff;
    display: block;
    padding: 1px;
    padding: 0;
}
.monitor .graph .progress span
{
    float: left;
    height: 17px;
    height: 19px;
}
.monitor .graph .progress .avail
{
    background-color: #9f9;
}
.monitor .graph .progress .queue
{
    background-color: #F58220;
}
.monitor .graph .progress .unused
{
    background-color: #fff;
}

.monitor-refresh
{
}
.monitor-refresh input
{
    margin: 0 5px 0 0;
}


/* MISC  
----------------------------------------------------------*/

#inbox
{
    float: left;
    margin-right: 10px;
    width: 600px;
}

.clear
{
    clear: both;
}

.error
{
    color: Red;
}

.success
{
    color: Green;
}

nav, #menucontainer
{
    /*margin-top: 40px;*/ /*width: 230px;*/ /*height: 100%;*/
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
}
nav.options
{
    background-color: transparent;
    display: block;
    clear: both;
    min-height: 50px;
    border: 0;
    position: absolute;
    height: 34px;
    right: 30px;
    top: 10px;
}
nav.options li
{
    margin-bottom: 5px;
}
nav.options a, a.button
{
    background-color: #fff;
    border: solid 1px #ededed !important;
    padding: 5px 8px;
    min-height: 23px !important;
    height: auto;
    font-size: 120%;
    line-height: 160%;
    width: 230px;
}
nav.options a:hover
{
    text-decoration: none;
}

nav.options a span
{
    font-size: 150%;
    line-height: 120%;
    position: absolute;
    right: 15px;
    color: #367db6;
}
nav.options a.noborder
{
    border: 0 !important;
}
/*
            nav.options a:hover, a.button:hover {
                border-color: #ccc !important;
                -moz-box-shadow: 0 0 5px #ccc;
                -webkit-box-shadow: 0 0 5px #ccc;
                box-shadow: 0 0 5px #ccc;
            }
            nav.options a.noborder:hover {
                -moz-box-shadow: none;
                -webkit-box-shadow: none;
                box-shadow: none;
            }
            */
nav.smallOptions
{
    background-color: transparent;
    display: block;
    border: 0;
    position: absolute;
    height: 34px;
    left: 10px;
}
nav.smallOptions ul
{
    position: absolute;
    top: -125px;
}
nav.smallOptions li
{
    margin-bottom: 1px;
}
.smallNavPic
{
    width: 65px;
}

.symbol
{
    width: 15px;
    text-align: center;
}

/*---Child Options button----*/

nav.ChildOptions
{
    display: block;
    clear: both;
    min-height: 30px;
    border: 0;
    position: relative;
    height: auto;
    right: 0; /* top: -54px;   */
    margin-left: 395px;
}
nav.ChildOptions a
{
    border: solid 2px #ededed !important;
    margin-bottom: 5px;
    padding: 5px 8px;
    min-height: 23px !important;
    height: auto;
    font-size: 120%;
    line-height: 160%;
}

nav.ChildOptions a:hover
{
    text-decoration: none;
}

nav.ChildOptions a span
{
    font-size: 150%;
    line-height: 120%;
    position: absolute;
    right: 15px;
    color: #367db6;
    float: right !important;
}

nav.ChildOptions a.noborder
{
    border: 0 !important;
}

.margin
{
    margin-right: 75px !important;
}

.ChildHeader
{
    position: absolute;
    margin-top: 1px !important;
}

/*-----*/

nav.actions
{
    background-color: transparent;
    display: block;
    clear: both;
    min-height: 30px;
    border: 0;
    position: relative;
}
nav.actions li
{
    float: left;
    position: relative;
}

nav.actions a, a.button
{
    background-color: #fff;
    border: solid 1px #ededed !important;
    padding: 5px 8px;
    min-height: 23px !important;
    height: auto;
    font-size: 120%;
    line-height: 160%;
    width: 230px;
}

nav.actions a:hover
{
    text-decoration: none;
}

nav.actions a span
{
    font-size: 150%;
    line-height: 120%;
    position: absolute;
    right: 15px;
    color: #367db6;
}

nav.actions a.noborder
{
    border: 0 !important;
}

a.backlink, a.backlink:hover
{
    font-size: 150%;
    background-color: #fff;
    border: solid 1px #ededed !important;
    float: left;
    padding: 5px;
    margin: 0 5px;
    margin-left: -18px;
    text-decoration: none;
}

.filler
{
    height: 29px;
}

.contact-sales
{
    display: inline-block;
    margin-top: 5px;
}

header
{
    height: 130px;
    position: relative;
}
div#title
{
    display: block;
    float: left;
}
header #title a
{
    background: transparent url(images/logo_klein_l4.png) no-repeat left top;
    height: 57px;
    overflow: hidden;
    position: absolute;
    width: 205px;
}
header #title a span
{
    margin-left: -9999px;
}

header nav
{
    /*bottom: 0;*/
    position: absolute;
}


#logindisplay
{
    color: #35404a;
    float: right;
    text-align: right; /*margin-top: 26px;*/
    margin-top: 17px;
    margin-right: 15px;
    font-size: 11px;
    height: 70px;
    display: inline;
    width: 480px;
}
#logindisplay a
{
    color: #3996df;
    text-decoration: none;
}
#logindisplay a:hover
{
    color: #000;
    text-decoration: none;
}
#customer
{
    float: right;
    display: inline;
}

#customer img
{
    height: 60px;
}

/* Styles for validation helpers
-----------------------------------------------------------*/

.field-validation-error
{
    color: #ff0000;
}

.field-validation-error
{
    background: transparent url(/Content/images/icons/icon-error.png) no-repeat left center;
    color: #f00;
    height: 16px;
    margin: 5px;
    overflow: hidden;
    position: absolute;
    width: 16px;
    text-indent: 100%;
    white-space: nowrap;
}
.field-validation-error span
{
    margin-left: -9999px;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000 !important;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}


/* Styles for editor and display helpers
----------------------------------------------------------*/

.recType-hint
{
    color: #ff0000;
    margin-left: 20px;
}

.recType-hint-step
{
    color: #ff0000;
    margin-left: 5px;
}

.label
{
    cursor: pointer;
}
.label:hover
{
    text-decoration: underline;
}
.display-label
{
    margin: 1em 0 0 0;
}

.editor-label
{
    clear: left;
    float: left; /*padding-top: 5px;*/
    width: 150px; /*margin: 1em 0 0 0;*/
}

.display-field
{
    margin: 0.5em 0 0 0;
}

.editor-label + .editor-field
{
    padding-left: 140px;
}
.showMode-wrapper
{
    padding-left: 15px;
    float: right;
    width: 110px;
    text-align: center
}

.editor-field
{
    margin: 0 0 10px 10px; /*position: relative;*/
}
.option-span-wrapper input
{
    width: 270px;   
}
.showMode-title
{
    padding-bottom: 12px;
    text-align: left;
}
.showMode-title-wrapper
{
    text-align: left !important;
}
.editor-field
{
    margin: 0 0 10px 10px; /*position: relative;*/
}
.editor-field .ui-datetime
{
    background: #fff;
    border: solid 1px #555;
    bottom: 24px;
    height: 200px;
    left: 0;
    padding: 5px;
    width: 260px;
    overflow: hidden;
    position: absolute;
}
.editor-field .ui-datetime-calendar
{
    float: left;
}
.editor-field .ui-datetime-calendar a
{
    cursor: pointer;
}

.editor-field input[type="checkbox"]
{
    display: inline-block;
}

.editor-field input, .editor-field select
{
    margin-top: -5px;
}

.editor-field select
{
    max-width: 306px;
}
.editor-field select.small
{
    width: 75px;
}
.editor-field select.medium
{
    width: 150px;
}

.editor-field.subitems table
{
    border: 0;
}

.editor-field.subitems table tbody tr td
{
    height: auto;
    background-color: transparent;
    border: 0;
}

.editor-field.subitems table tbody tr td.action, th.action
{
    width: auto;
}

.editor-field .queuetype
{
    width: auto;
    background-color: transparent;
    margin: 0;
}

.editor-buttons
{
    /*border-top: solid 1px #ccc;*/
    margin: 20px 0 0;
    padding: 10px 0 0;
    text-align: center;
}

.text-box
{
    width: 30em;
    width: 250px;
}
.text-box.multi-line
{
    height: 6.5em;
}

.tri-state
{
    width: 6em;
}

#clone.availability tbody {
    visibility:collapse
}

table.availability, table.calendar, .availability, .calendar {
    border: 1px solid #ccc;
    height: 168px;
    margin: 0;
    width: 655px;
}
.subText b.day
{
    /*color: #000;*/
    text-decoration: underline;
}
.availability th, .availability td, .calendar th, .calendar td
{
    display: table-cell;
    font-family: monospace;
    font-size: 11px;
    margin: 0; /*padding: 3px 1px;*/
    height: auto;
    border: solid 1px #e8eef4;
}
.availability th, .calendar th
{
    background-color: #eee;
    border-bottom: 1px solid #ccc;
    text-align: center;
    vertical-align: middle;
}
.calendar th
{
    text-align: right;
    padding: 2px 5px;
}
.availability th.day
{
    border-right: 1px solid #ccc;
    padding: 2px 4px; /*text-align: right;*/
}
.availability th.dummy
{
    background-color: #fff;
}
.availability th a
{
}
.availability th a:hover
{
}

.availability td.avail, .calendar td.a
{
    color: #fff;
    cursor: default;
}
.availability td.avail:hover, .calendar td.a:hover
{
    background-color: #3f688d !important;
    color: #3f688d !important;
}
.calendar td.a:hover a
{
    color: #eee !important;
}
.availability.erase td.avail:hover, .calendar.erase td.a:hover
{
    background-color: #f33 !important;
    color: #f33 !important;
}
.availability td.avail.e
{
    background-color: #e7e7e7;
    color: #e7e7e7;
}
.availability td.avail.o
{
}
.availability td.avail.a0
{
}
.availability td.avail.a1
{
    background-color: #3f688d;
    color: #3f688d;
}
.availability tfoot td
{
    text-align: center;
}
.calendar td
{
    text-align: center;
}
.calendar td.we
{
    background-color: #e8eef4;
}
.calendar td.off
{
    background-color: #dfdfdf;
}
.calendar td.a
{
}
/* Selected date */
.calendar td.a.s
{
    background-color: #3f688d;
}
/* Holiday */
.calendar td.a.s.h
{
    background-color: #688D3F;
}
.calendar td.a.s a
{
    color: #eee;
}

#calendar-container, #weekplan-container
{
    overflow: hidden;
    overflow-x: scroll;
    width: 640px; /*padding-bottom:10px;*/
}

.list-container
{
    border: solid 1px #ccc;
    height: 80%;
    max-height: 400px;
    overflow-x: auto;
}
.list-container table
{
    width: 100%;
}
.list-container .application td
{
    font-weight: bold;
}

.editor-field
{
    min-height: 20px;
}

.editor-field.editor-codes
{
    background-color: rgba(127, 127, 127, 0.10);
    border: 1px solid #ccc;
    height: 199px;
    padding: 0;
    position: relative;
    width: 304px;
    overflow-x: hidden;
    overflow-y: auto;
}
.editor-field.editor-codes table
{
    border: 0;
    width: 100%;
    z-index: 1;
}
.editor-field.editor-codes td
{
    background-color: #fff;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 0;
    padding: 0;
}
.editor-field.editor-codes tr:first-child td
{
    border-top: 0;
}
.editor-field.editor-codes td.button
{
    width: 60px;
}
.editor-field.editor-codes input
{
    border: 0;
    width: 100%;
}
.editor-field.editor-codes a.code.delete
{
    border: 1px solid #ccc;
    color: #ccc;
    display: block;
    font-size: 10px;
    margin: 1px 1px 1px 5px;
    padding: 3px 0 4px;
    text-align: center;
}
.editor-field.editor-codes a.code.delete:hover
{
    border-color: #333;
    color: #333;
}
.editor-field.editor-codes span.nocodes
{
    background-color: #eee;
    border-bottom: 1px solid #ccc;
    color: #777;
    display: block;
    padding: 4px 0;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 0;
}

.editor-field.editor-uploadcontainer
{
    height: 25px;
    padding-left: 150px;
}
.editor-field .editor-upload
{
    border: solid 1px #ccc;
    display: none;
    padding: 4px;
    width: 300px;
}
.editor-field .editor-upload input[type=file]
{
    width: 100%;
}

.editor-field.editor-duplicates
{
    border: 1px solid #ccc;
    height: 193px;
    padding: 0;
    position: relative;
    width: 500px;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 1.2em;
}

.editor-field.editor-duplicates table
{
    border: 0;
    width: 100%;
    z-index: 1;
}

.editor-field.editor-duplicates span.nocodes
{
    background-color: #eee;
    border-bottom: 1px solid #ccc;
    color: #777;
    display: block;
    padding: 4px 0;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 0;
}

nav ul
{
    clear: both;
    overflow: hidden;
    overflow: visible;
    margin: 0;
    padding: 0;
}
nav li
{
    /*float: left;*/
    list-style-type: none;
    padding: 0;
}
nav li a
{
    display: block; /*margin-right: 4px;*/ /*padding: 2px 4px;*/
}
nav li:first-child a
{
    border: 0;
}
nav li a.year
{
    display: inline-block;
    padding-bottom: 1px;
    text-align: center;
    width: 16px;
}
nav li div
{
    margin: 0 10px;
}
.Priority
{
    font-size: 10px;
}
.order b
{
    font-size: 10px;
}
.order:hover b
{
    color: #000;
}
.icon
{
    background-position: left top;
    background-repeat: no-repeat;
    display: inline-block; /*float: left;*/
    vertical-align: middle;
    height: 15px; /*16px;*/
    margin-right: 2px;
    overflow: hidden;
    width: 16px;
}
.icon span
{
    margin-left: -9999px;
}
.icon.invisible
{
    visibility: hidden;
}
.icon.down
{
    background-image: url(/Content/images/icons/icon-arrowdown-o.png);
}
.icon.down:hover
{
    background-image: url(/Content/images/icons/icon-arrowdown.png);
}
.icon.up
{
    background-image: url(/Content/images/icons/icon-arrowup-o.png);
}
.icon.up:hover
{
    background-image: url(/Content/images/icons/icon-arrowup.png);
}

.date-selection
{
    /*border: solid 1px #e8eef4;*/
    margin-bottom: 5px;
    margin-right: 30px;
    padding: 2px 4px;
    line-height: 25px;
}
.date-selection #export a, .date-selection #export a:hover
{
    color: #000;
    cursor: default;
    text-decoration: none;
}
.date-selection span.date
{
    display: none;
    font-size: 12px;
    padding: 2px 4px;
}
.date-selection.readonly span.date
{
    display: inline-block;
}
.date-selection span.date span
{
    display: inline-block;
    font-size: 1.2em;
    padding: 0 8px 0 4px;
}
.date-selection select
{
    max-width: 175px;
}
.date-selection select.day, .date-selection.readonly select.month, .date-selection.readonly select.year
{
    display: inline;
}
.date-selection.readonly select.day, .date-selection.readonly select.month, .date-selection.readonly select.year
{
    display: none;
}

.date-selection .filter-container
{
    display: inline;
}

a.year, a.year:hover, a.holidays, a.holidays:hover, a#reset, a#reset:hover
{
    padding: 5px;
    background-color: #fff;
    border: 1px solid #ededed;
    text-decoration: none;
    font-size: 130%;
}

a.holidays, a.holidays:hover, a#reset, a#reset:hover
{
    font-size: 100%;
}

#loader
{
    background: #fff url(/Content/Images/mcin-32.gif) no-repeat 5px center;
    border: solid 1px #ccc;
    border-top: none;
    display: none;
    font-size: 14px;
    left: 50%;
    margin-left: -80px;
    padding: 12px 0 12px 50px;
    position: fixed;
    text-align: left;
    top: 0;
    width: 80px;
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    -moz-border-radius-bottomleft: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

/* ### LOGIN ### */
.LoginOptions
{
    /*     clear: both;     margin-top: 40px;     */
    margin-top: 12px;
    overflow: hidden;
    padding-left: 0;
}
.LoginOptions li
{
    float: left;
    list-style-type: none;
    width: 160px;
}

#lgnBtnSubmit
{
    text-align: left;
}

/* DT */
/* css for timepicker */
.ui-timepicker-div .ui-widget-header
{
    margin-bottom: 8px;
}
.ui-timepicker-div dl
{
    text-align: left;
}
.ui-timepicker-div dl dt
{
    height: 25px;
    margin-bottom: -25px;
}
.ui-timepicker-div dl dd
{
    margin: 0 10px 10px 65px;
}
.ui-timepicker-div td
{
    font-size: 90%;
}
.ui-tpicker-grid-label
{
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}

.ui-datepicker
{
    font-size: 80%;
}

.ui-datepicker th
{
    display: table-cell;
}
.ui-datepicker td
{
    height: auto;
}

/* ### AGENT ### */
.agent .page
{
    position: relative;
    width: 500px;
}
.agent header
{
    height: 100px;
    position: relative;
}
.agent header h2
{
    bottom: -40px;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    left: 10px;
}
.agent header h2.logoff
{
    font-weight: normal;
    left: auto;
    right: 10px;
}
.agent input
{
    width: 100px;
}
.agent p
{
    margin: 10px 20px;
    text-align: center;
}
.agent .extension
{
    color: #7670b3;
    font-weight: bold;
}
.agent .status
{
    border: solid 1px #ededed;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    margin: 0 80px 30px;
    padding: 10px;
}
.agent .status.alert
{
    background-color: #f00;
    color: #fff;
    margin-bottom: 10px;
}
.agent .status.available
{
    background-color: #ebd417;
    color: #777;
}
.agent .status.handling
{
    background-color: #7670b3;
}
.agent .status.pause
{
    background-color: #dedede;
    color: #777;
}
.agent .status.unavailable
{
    background-color: #f58220;
}
.agent #refresh
{
    color: #777;
    font-size: 10px;
    position: absolute;
    right: 0;
    text-align: right;
}


.agent #agentmain
{
    background-color: #fff;
    overflow: hidden;
    padding: 30px;
    border: 1px solid #BEB8B8;
    font-size: 12px;
}

/* Help */

section.help h3
{
    float: left;
    font-size: 12px;
    line-height: 1.6em;
    margin: 0;
    padding: 9px 6px 2px 0;
}

.helpTitle
{
    margin: 0;
    margin-left: 13px;
    margin-top: 8px;
    border: 0;
    color: #3f688d;
    text-decoration: none;
    line-height: 150%;
}

a.help
{
    color: #aaa;
}
a.help sup
{
    font-size: 11px;
}
a.help:hover
{
    color: #333;
}

ul.help-toc
{
    border-bottom: 1px solid #ccc;
    margin-right: 30px;
    padding-left: 10px;
}
ul.help-toc li
{
    display: inline-block;
    margin: 0;
}
ul.help-toc a
{
    border-left: solid 1px #ccc;
    display: block;
    margin: 0;
    padding: 2px 6px;
}
ul.help-toc li:first-child a
{
    border-left: 0;
}
ul.help-toc a.current
{
    color: #F58220;
}

.topic.js
{
    display: none;
}

#design
{
    margin-right: 30px;
    overflow: hidden;
}
#design h3
{
    border-bottom: 1px solid #ccc;
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 4px;
}
#design h3 a.selected, #design h3 a.selected:hover
{
    color: #333;
    text-decoration: none;
}

/*#design h3 a
    {
        background-color: #fff;
        border: solid 1px #ededed !important;
        padding: 5px 8px;
        min-height: 23px !important;
        height: auto;
        font-size: 100%;
        line-height: 160%;
        width: 150px;
        display: inline-block;
        font-weight: normal;
    }*/

#builder
{
    /*background-color: #fff;*/
    border: 1px solid #ccc;
    border: 0;
    min-height: 412px;
    padding: 0;
}
#builder .flow-container
{
    border: 1px solid #ccc;
    margin-bottom: 21px;
    overflow: auto;
}
.deletedNodes-container
{
    border: 1px solid #ccc;
    margin-bottom: 21px;
    overflow: auto;
    background-color: white;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
    min-height: 150px;
}
.deletedNodes-container-item
{
    border: 1px solid #ccc;
    margin-top: 3px;
    padding: 3px;
    background-color: white;
}
#builder h3
{
    border-bottom: 0;
}
#builder ul
{
    margin-bottom: 0;
}

#steps
{
    float: left;
    padding-right: 20px;
    width: 210px;
    margin-top: 24px;
}
#steps ul
{
    margin: 0;
    padding: 0;
}
#steps .prompts-container
{
    max-height: 460px;
    overflow-x: auto;
}
#steps .prompts
{
    /*display: none;*/
}
#steps li
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#steps li a
{
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 3px 3px;
    border: 1px solid #ccc;
    border-top: 0;
    display: block;
    height: 24px;
    overflow: hidden;
    padding: 2px 4px 0 26px !important;
}
#steps li:first-child a
{
    border-top: 1px solid #ccc;
}
#steps li a:hover
{
    background-color: #eee;
}
#steps ul.prompts a
{
    padding-left: 2px !important;
}
#steps ul.prompts li:first-child a
{
    border-top: none;
}
#steps li.category a, #steps li.category:hover a
{
    background-color: #fff;
    border-left-color: #fff;
    border-right-color: #fff;
    cursor: default;
    font-weight: bold;
    padding-left: 0;
    text-decoration: none;
    color: #000;
}
#steps li.category:first-child a
{
    border-top-color: #fff;
}
#steps .prompts li a
{
    background-color: transparent;
}

div.flow
{
    margin-left: 230px /*5px*/;
}
.flow .actions ul
{
    margin: 0;
    overflow: hidden;
    padding: 0;
}
.flow .actions li
{
    background-color: #fff;
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.flow .actions a
{
    border: 1px solid #ccc;
    border-width: 1px 1px 0 0;
    display: inline-block;
    height: 20px; /*overflow: hidden;*/
    padding: 3px 8px 0;
}
.flow .actions li:first-child a
{
    border-left-width: 1px;
}
.flow .actions a:hover
{
    background-color: #eee;
}

div #readOnlyFlow
{
    margin-left: 0px;
}
#readOnlyFlow span.dynatree-node:hover
{
    background-color: transparent;
    cursor: initial;
}

#readOnlyFlow span.dynatree-active
{
    background-color: transparent;
}

#readOnlyFlow span.dynatree-node a:hover
{
    text-decoration: none;
    cursor: text;
}

section.step
{
}
section.step h2, section.prompt h2
{
    display: none;
}
#cboxTitle span.step
{
    background-position: 2px center;
    background-repeat: no-repeat;
    background-image: url(images/flow/step.png);
    padding-left: 22px;
}
#cboxTitle span.step.Audio, ul.steps .step.Audio a
{
    background-image: url(images/flow/step-play.png);
}
#cboxTitle span.step.Connector, ul.steps .step.Connector a
{
    background-image: url(images/flow/step-connector.png);
}
#cboxTitle span.step.Decision, ul.steps .step.Decision a
{
    background-image: url(images/flow/step-if.png);
}
#cboxTitle span.step.Http, ul.steps .step.Http a
{
    background-image: url(images/flow/step-xml.png);
}
#cboxTitle span.step.Input, ul.steps .step.Input a
{
    background-image: url(images/flow/step-getkeys.png);
}
#cboxTitle span.step.Origin, ul.steps .step.Origin a
{
    background-image: url(images/flow/step-origin.png);
}
#cboxTitle span.step.Outbound, ul.steps .step.Outbound a
{
    background-image: url(images/flow/step-call.png);
}
#cboxTitle span.step.Statistical, ul.steps .step.Statistical a
{
    background-image: url(images/flow/step-counter.png);
}
#cboxTitle span.step.SubScript, ul.steps .step.SubScript a
{
    background-image: url(images/flow/step-jump.png);
}
#cboxTitle span.step.Return, ul.steps .step.Terminator a
{
    background-image: url(images/flow/step-return.png);
}

#cboxTitle span.step.Mail, ul.steps .step.mai a
{
    background-image: url(images/flow/step-email.png);
}
#cboxTitle span.step.men, ul.steps .step.men a
{
    background-image: url(images/flow/step-menu.png);
}
#cboxTitle span.step.NAW, ul.steps .step.naw a
{
    background-image: url(images/flow/step-naw.png);
}
#cboxTitle span.step.Record, ul.steps .step.rec a
{
    background-image: url(images/flow/step-record.png);
}
#cboxTitle span.step.SetVariable, ul.steps .step.set a
{
    background-image: url(images/flow/step-setvar.png);
}
#cboxTitle span.step.Store, ul.steps .step.sto a
{
    background-image: url(images/flow/step-store.png);
}

#cboxTitle span.step.asr, ul.steps .step.asr a
{
    background-image: url(images/flow/step-asr.png);
}
#cboxTitle span.step.ssr, ul.steps .step.ssr a
{
    background-image: url(images/flow/step-ssr.png);
}

section.step .options-container, section.prompt .options-container
{
    display: none;
    border-left: 2px solid #ccc;
    padding-left: 8px;
}
section.step .options-container.active, section.prompt .options-container.active
{
    display: block;
}
section.step.if .options-container.dayOfWeek
{
    overflow: hidden;
}
section.step.if .options-container.dayOfWeek .column
{
    float: left;
    width: 120px;
}
section.step.mai #variables thead, section.step.sto #variables thead
{
    display: none;
}
#cboxTitle section.step h
{
    background-position: left 3px;
    background-repeat: no-repeat;
    background-image: url(images/flow/step.png);
}

.backtotop
{
    clear: both;
    padding-top: 20px;
}
.backtotop a
{
    border-top: 1px solid #aaa;
    color: #aaa;
    display: inline-block;
    font-size: 10px;
    padding-top: 10px;
    text-align: center;
    width: 200px;
}
.backtotop a:hover
{
    border-color: #777;
    color: #777;
}


.SubTextLeftPadding
{
    padding-left: 20px;
}


/* TAB SUB MENU
----------------------------------------------------------*/

ul#submenu
{
    /*border-right: 1px solid #efefef;*/
    margin: 0;
    padding: 0;
    position: relative;
    text-align: right;
}
ul#submenu li
{
    /*display:block;*/
    list-style: none;
}

ul#submenu li a
{
    font-weight: bold;
    margin: 0;
    text-decoration: none; /*min-height:50px;*/
}
ul#submenu li:first-child a
{
    /*border: 0;*/
}
ul#submenu li a:active
{
    text-decoration: none;
}
ul#submenu li a:hover
{
    color: #F58220;
    text-decoration: underline;
}

ul#submenu li.selected a
{
    /*background-color: #fff;*/
    background-color: #ffffff;
    color: #F58220;
    padding-left: 5px;
}

table#submenu
{
    border-color: #EFF3F7 !important;
    position: relative;
    top: 2px !important;
    z-index: 100;
}

table#submenu tr
{
    border-top-color: #EFF3F7 !important;
    border-left-color: #EFF3F7 !important;
    border-right-color: #EFF3F7 !important;
    border-bottom: #ffffff !important;
}

table#submenu td
{
    padding: 3px;
    border-bottom-color: #ffffff;
}
table#submenu td:hover
{
    /*background-color:white;*/
}

.submenuNotselected
{
    background-color: #EFF3F7;
    padding-left: 5px;
    padding-right: 5px;
}

.submenuSelected
{
    background-color: #ffffff;
}

a.submenu
{
    /*background-color: #efefef;*/
    font-weight: bold;
    margin: 0;
    text-decoration: none;
    color: #3f688d;
}
a.submenu:hover
{
    color: #F58220;
    text-decoration: underline;
}
a.submenu.link
{
    color: #666666;
}

/*
table#SubTable
{
   border-color:#EFF3F7 !important;  
}
table#SubTable tr
{
    border-color:#EFF3F7 !important;
}

table#SubTable td
{
    background-color:#EFF3F7 !important; 
    border-color:#EFF3F7 !important;
}

*/


/* Style for sms chat dialog box
----------------------------------------------------------*/
.ui-widget-header
{
    background: #D4E1E7 /*{bgColorHeader}*/;
    color: #222222 /*{fcHeader}*/;
    font-weight: bold;
}

.ui-widget-content
{
    background: #D3D3D3 /*{bgColorContent}*/;
    color: #222222 /*{fcContent}*/;
    border: none;
    padding: 5px;
}

#smsChatHistory, #userInfo
{
    display: none;
    border: 1px solid #aaaaaa;
    border-top: 0;
    background-color: #ffffff;
}


/* mcin Dialog style
----------------------------------------------------------*/

.ui-dialog .ui-dialog-buttonpane
{
    background: #ffffff;
    margin-top: 0px;
    border: 1px solid #aaaaaa;
    border-top: 0;
}

.ui-dialog .ui-widget-content
{
    background: #ffffff;
    border: 1px solid #aaaaaa;
    border-top: 0;
}


/* Quick alert
----------------------------------------------------------*/
/*
.ui-helper-clearfix
{
    height:20px !important;
}*/

.ui-dialog
{
    position: absolute;
}

.ui-dialog-titlebar
{
    height: 20px;
    display: block;
}

.ui-dialog .ui-dialog-content
{
    top: 0px;
    overflow: visible;
}

#alertFormContainer
{
    background-color: rgb(239, 239, 239);
    display: none;
    font-size: 12px;
}

#alertFormContainer .statusContainer
{
    width: 768px;
    height: 20px;
    border: 1px solid #ccc;
    border-right: 0;
    margin: 0;
    padding: 0;
    margin-top: 10px;
    margin-bottom: 30px;
    padding: 0;
    display: block;
    clear: both;
}

#alertFormContainer .statusContainer ul
{
    margin: 0;
    padding: 0;
    width: 100%;
}

#alertFormContainer .statusContainer li
{
    display: block;
    float: left;
    width: 191px;
    height: 20px;
    border-right: 1px solid #ccc;
    list-style-type: decimal;
    margin: 0;
    line-height: 20px;
    text-align: center;
    background-color: rgb(239, 239, 239);
}

#alertFormContainer .statusContainer li a, #alertFormContainer .statusContainer li a:hover
{
    text-decoration: none;
}

#alertFormContainer .statusContainer li.selected, #alertFormContainer .statusContainer li.selected a, #alertFormContainer .statusContainer li.selected a:hover
{
    font-weight: bold;
    color: #f58220;
    background-color: #fff;
    text-decoration: none;
}

#alertFormContainer .editor-label
{
    width: 250px;
}

#alertFormContainer .editor-label + .editor-field
{
    padding-left: 250px;
}

#alertFormContainer .editor-field
{
    min-height: 20px;
}

#alertFormContainer .field-validation-error
{
    margin-top: 0;
}

#alertFormContainer input, #alertFormContainer p, #alertFormContainer h3
{
    font-size: 1em;
}

#alertFormContainer #activateConfirm
{
    text-align: center;
}

#alertFormContainer #numbers
{
    width: 200px;
    height: 150px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: white;
    border: 1px solid gray;
    font-size: 1em;
}
#alertFormContainer #numbers table
{
    border: 0;
    width: 100%;
    z-index: 1;
}

#alertFormContainer #numbers table td
{
    height: auto;
}

#calendarContainer
{
    min-height: 300px;
}

#weekplanContainer #list, #calendarContainer #list
{
    float: none;
    width: auto;
    position: inherit;
    margin: auto;
    margin-bottom: auto;
    font-size: 80%;
}

#weekplanContainer #weekplan-container, #calendarContainer #calendar-container
{
    overflow-x: auto !important;
    width: auto !important;
}

#calendarContainer #controls
{
    display: none;
}

#calendarContainer .calendar td.a:hover
{
    background-color: inherit !important;
    color: inherit !important;
}
#calendarContainer .calendar td.a:hover a
{
    color: inherit !important;
    text-decoration: none;
    cursor: default;
}
#calendarContainer .calendar td.we.a:hover
{
    background-color: rgb(232, 238, 244) !important;
}
#calendarContainer .calendar td.s.a:hover
{
    background-color: rgb(63, 104, 141) !important;
}
#calendarContainer .calendar td.s:hover a
{
    color: #fff !important;
}
#calendarContainer input, #weekplanContainer input
{
    font-size: 1em;
}


/* Application flow option
----------------------------------------------------------*/

ul.Application-toc
{
    border-bottom: 1px solid #ccc;
    margin-right: 30px;
    padding-left: 0px /*10px*/;
}
ul.Application-toc li
{
    display: inline-block;
    margin: 0;
}
ul.Application-toc a
{
    border-left: solid 1px #ccc;
    display: block;
    margin: 0;
    padding: 2px 3px 2px 3px /*2px 6px*/;
}
ul.Application-toc li:first-child a
{
    border-left: 0;
    margin-left: 0px;
}
ul.Application-toc a.current
{
    color: #F58220;
}


.dropdownlist
{
    font-size: 12px;
}

.ExtensionColumnPadding
{
    padding-top: 3px !important;
}


/*
*/
.highlight
{
    background-color: Yellow;
}

.filterTextBox
{
    width: 150px !important;
}

.showActiveCheckbox
{
    width: 12.5px;
    height: 11.5px;
    padding: 0px;
    margin: 0px;
}

#Designer
{
    /*background-color: #fff;*/
    border: 1px solid #ccc;
    border: 0;
    min-height: 360px;
    padding: 0;
}

.filteredCustomers
{
    list-style: none;
    list-style-position: inside;
    width: 300px;
    margin: 0;
    padding: 0;
}
.filteredCustomers li a
{
    outline: 0;
}
.filteredCustomers li a:focus, .filteredCustomers li a:hover
{
    color: #F58220;
}
.filteredCustomers li
{
    position: relative;
    border: 1px solid #ccc;
    background-color: #F4F4F4;
    border-top: none;
    padding: 2px;
    width: 300px;
}
.filteredCustomers li span
{
    position: absolute;
    right: 2px;
}


/* LoginOption on Account PartialForm
----------------------------------------------------------*/

table#OptionTable
{
    /*border-color:#EFEFEF !important;  */ /*position:relative;*/ /*top:2px !important;*/ /*z-index:100;*/ /*background:#EFEFEF !important;*/
    background-color: transparent !important;
    width: 100%;
    margin: 0;
    margin-bottom: 30px;
    border: 0;
}

table#OptionTable tr
{
    /*border-top-color:#EFEFEF !important;     border-left-color:#EFEFEF !important;     border-right-color:#EFEFEF !important;     border-bottom:#EFEFEF !important;     background:#EFEFEF !important;*/
}

table#OptionTable td
{
    border: 0;
    padding: 0;
    height: auto; /*border-bottom-color:#EFEFEF;     background:#EFEFEF !important;*/
    background-color: transparent !important;
}

table#OptionTable td input
{
    margin: 0;
}

/*
New replace to proper section
*/

.clickable
{
    cursor: pointer;
    border: #000;
}
/*
.clickable td:first-child
{
    background-color: #fff;
}
.clickable td
{
    background-color: #B5DAF7;
}
*/
td a, .clickable a, .clickable a:active, .clickable a:visited, .clickable a:hover
{
    /*color: #000;*/
    color: #3f688d;
    text-decoration: none;
}
.subText
{
    color: #999393;
    font-size: 80%;
}

.noData
{
    /*border:0px;*/
    padding: 0px;
    margin: 0px;
}
.noData td
{
    border: 0px;
    padding: 5px;
    height: 42px;
    padding-left: 30px;
    border-top: solid 1px #ededed;
}

.numbers
{
    width: 100%;
}

.filter
{
    background-color: #ECECEC;
    border: solid 1px #f2f2f2;
    border-left: solid 1px #ededed;
    border-right: solid 1px #ededed;
    width: 710px;
    min-height: 45px;
    line-height: 45px;
    margin-left: -31px;
    vertical-align: middle; /*padding-left: 30px;*/
    padding-right: 30px;
    text-align: right;
}

.Numberfilter
{
    background-color: #ECECEC;
    border: solid 1px #f2f2f2;
    border-left: solid 1px #ededed;
    border-right: solid 1px #ededed;
    width: 710px;
    min-height: 45px;
    line-height: 45px;
    margin-left: -31px;
    vertical-align: middle; /*padding-left: 30px;*/
    padding-right: 30px;
    text-align: right;
    margin-top: 50px;
}

.filter div
{
    width: 100%;
    margin-left: 5px;
}


.mcinDialog
{
    position: absolute;
    font-size: 12px;
    height: 50px !important;
    min-height: 200px;
}
.mcinDialog button
{
    border: solid 1px #BFBBBB !important;
    background: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    margin-right: 5px !important;
    width: 100px !important;
    background-color: transparent !important;
    line-height: 160% !important;
    margin-bottom: 5px !important;
    padding: 5px 8px !important;
    font-size: 120% !important;
    color: #3f688d !important;
    -webkit-border-radius: 0px !important /*{cornerRadius}; */;
}
.mcinDialogConfirmMessage
{
    height: 93px !important;
}

.PageTotalValue
{
    padding-right: 10px !important;
    text-align: right;
    display: table-cell;
    border: none !important;
    position: relative;
}

#navhidden
{
    float: left;
    width: 244px;
    height: 100%;
    visibility: hidden;
}

#frmPrompt
{
    font-size: 12px;
}

.showDiv
{
    display: block;
}

/* xmlrpc */

.parameter
{
    margin-bottom: 5px;
}

#request, #result, #debug
{
    min-width: 500px;
    min-height: 200px;
}

#request, #result
{
    background-color: rgb(232, 238, 244);
    border: 1px solid #ccc;
    padding: 5px;
    overflow: auto;
    color: #3f688d;
}

.builderPanel
{
    position: relative;
}

.builderPanel .options
{
    margin-right: -30px;
}

.builderPanel .audios, .builderPanel .statisticals, .builderPanel .variables, .builderPanel .noData
{
    width: 100%;
}

.topic img
{
    width: 670px;
    border: 2px solid #3f688d;
}

/* feedback form */

#feedback input["radio"]
{
    margin-bottom: 5px;
}

#feedback .editor-label
{
    width: 100px;
}

#feedback .editor-field
{
    margin-left: 0;
    line-height: 160%;
}

#feedback .editor-label + .editor-field
{
    padding-left: 100px;
}

#feedback .reasons
{
    list-style-type: none;
    padding-left: 0;
    margin-left: -5px;
    line-height: 180%;
}

#feedback .reasons > li
{
    list-style-type: none;
    padding-left: 30px;
    text-indent: -30px;
}

#feedback .reasons > li input[type=radio]
{
    vertical-align: middle;
    width: 22px;
}

#popupWindow
{
    line-height: 0;
    font-size: 0;
    color: transparent;
    background-image: url('/content/images/opentab.png');
    background-repeat: no-repeat;
    position: absolute;
    display: block;
    right: 5px;
    top: 5px;
    width: 20px;
    height: 20px;
}

#closeWindow
{
    display: none;
}

.subItem
{
    padding-left: 5px;
}


.title h2
{
    display: inline-block;
}

.feature
{
    background-color: #f58220; /* Orange */
    padding: 7px 5px 5px 5px;
    margin-top: -10px;
    margin-right: 5px;
    text-align: center;
    vertical-align: middle;
    border-radius: 20px;
    font-size: 120%;
    color: #fff;
    width: 100px;
    height: 20px;
    display: inline-block;
}

.model
{
    background-color: #7670b3; /* Purple */
    padding: 7px 5px 5px 5px;
    margin-top: -10px;
    margin-right: 5px;
    text-align: center;
    vertical-align: middle;
    border-radius: 20px;
    font-size: 120%;
    color: #fff;
    width: 100px;
    height: 20px;
    display: inline-block;
}


/* for step show/hide check box */
.divShowhideColumn
{
    /*width: 0%;
    position: relative;
    float: right;
    margin-right:-80px ;*/
}

.divHeaderShowhideColumn
{
    margin: -18px 5px 25px -5px;
}

#dlgConfirmSave
{
    height:94px !important;
}

.invalid {
    color: red !important;
    font-weight: bold !important;
}

#export[disabled], #schedule[disabled] {
    cursor: not-allowed;
}