/* MetroUI Override
----------------------------------------------------------*/

@font-face {
    font-family: 'Segoe UI Bold';
    src: url('/fonts/segoeuib.ttf');
    font-weight: normal;
    font-style: normal;
}

.metro .container {
    width: 100% !important;
    margin: 0 auto;
}

.metro form {
    margin: 0;
}

.metro div,
.metro span,
.metro p {
  /*font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;*/
  /*font-weight: normal;
  font-style: normal;*/
}

.metro h1, .metro h2, .metro h3, .metro h4, .metro h5, .metro h6 {
    /*margin: 0; 
    margin-bottom: 10px;*/
}

.metro h4 {
    /*font-weight: normal;
    font-style: normal;*/
    /*font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;*/
}

.metro ul,
.metro ol {
  /*letter-spacing: 0.0em;*/
}

.metro div.bold,
.metro span.bold,
.metro p.bold {
  /*font-family: 'Segoe UI Semibold_', 'Open Sans Bold', Verdana, Arial, Helvetica, sans-serif !important;*/
  font-weight: bold !important;
}

ul.no-margin {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
}

.metro .dataTable thead .sorting_asc:after,
.metro .dataTable thead .sorting_desc:after,
.metro .dataTable thead .sorting:after {
  float: left !important;
}

.metro .dataTables_wrapper .dataTables_paginate {
  float: left !important;
  text-align: left !important;
}

.metro .dataTables_wrapper .dataTables_info {
  float: right !important;
  padding-top: 11px !important;
}

.metro .dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-block !important;
  float: none !important;
}

.metro.window-overlay.inactive {
    background-color: rgba(0, 0, 0, 0.498039);
    top: 0;
    position: absolute;
    z-index: 1015;
}

.metro .place-right {
    float: right !important;
}

.metro .fg-cyan {
    color: #31b1e0 !important;
}

.metro .bg-hover-cyan:hover {
    background-color: #31b1e0 !important;
}
.metro .bg-hover-cyanLight:hover {
    background-color: rgba(28, 183, 236, 0.1);
}

/* Grid Table
----------------------------------------------------------*/
table.gridTable {
    margin-bottom: 7px;
    width: 100%;
}

    table.gridTable > thead { display: none; }
    table.gridTable > colgroup { display: none; }

    table.gridTable > tbody > tr
    {
        display: inline-block !important;
        width: 300px;
        min-height: 120px;
        margin: 3px 3px 3px 3px;
        cursor: pointer;
        border: 1px #eaeaea solid;
        padding: 10px 10px 0 10px;
    }

    table.gridTable > tbody > tr:hover
    {
        outline: 3px #1ba1e2 solid;
    }

    table.gridTable > tbody > tr > td { }

    table.gridTable > tbody > tr > td.icon
    {
        float: left;
        margin-right: 10px;
        height: 75px;
    }

    table.gridTable > tbody > tr > td.icon [class*="icon-"] {
        padding: 8px 4px;
        font-size: 22px;
        line-height: 14px;
        width: 32px;
        height: 32px;
    }

    table.gridTable > tbody > tr > td.title
    {
        display: block;
        font-size: 14px;
        line-height: 16px;
        margin-left: 40px;
        padding-bottom: 4px;
        border-bottom: 1px #eaeaea  solid;
    }

    table.gridTable > tbody > tr > td.remark,
    table.gridTable > tbody > tr > td.remark2
    {
        font-size: 11px;
        line-height: 12px;
        padding-top: 5px;
    }

    table.gridTable > tbody > tr > td.remark
    {
        display: block;
    }

    table.gridTable > tbody > tr > td.remark2
    {
        display: inline-block;
        width: 115px;
    }

    table.gridTable > tbody > tr > td .displayCaption
    {
        display: block !important;
        letter-spacing: .1rem;
    }

    table.gridTable > tbody > tr > td.options
    {
        height: 23px;
        overflow: hidden;
        display: block;
        padding: 5px 0;
        margin-top: 5px;
        margin-right: -10px;
    }

    
    table.gridTable > tbody > tr > td.options > span > a
    {
        border: 1px #eaeaea solid !important;
        padding: 4px 8px;
    }
    table.gridTable > tbody > tr > td.options > span > a:not(:first-of-type)
    {
        border-left: 0 !important;
    }

    table.gridTable > tbody td [data-pe-id="Phones"],
    table.gridTable > tbody td [data-pe-id="Emails"] {
        min-height: 12px;
    }
    table.gridTable > tbody td [data-pe-id="Address"] {
        min-height: 24px;
    }

    table.table > tbody > tr > td.options > span > a
    {
        padding: 4px 8px;
    }


/* Hint
----------------------------------------------------------*/
.hint {
    max-width: 320px;
    z-index: 1100 !important;
    color: white;
    font-size: 12px;
}
    .metro .slider > .hint {
        z-index: 3 !important;
    }

    .hint .hint-title {
        text-transform: uppercase;
        padding-bottom: 5px;
        margin-bottom: 5px;
        border-bottom: 1px solid white;
        letter-spacing: initial;
    }

	.hint.bg-yellow .hint-title {
		border-color: #1d1d1d;
	}

    .hint .hint-text {
        text-transform: none;
    }

    .metro .hint.bottom:before,
    .metro .hint.bottom:after {
        
        left: 10px;
        border-left-width: 10px;
        border-right-width: 10px;
        border-bottom-color: #333333;
    }
    .metro .hint.bottom:after {
        border-bottom-width: 15px;
        margin: -15px 0;
    }
    
    
    .metro .hint.right:before,
    .metro .hint.right:after {
        top: 10px;
        border-top-width: 10px;
        border-bottom-width: 10px;
        border-right-color: #333333;
    }
    .metro .hint.right:after{
        left: -15px;
        border-right-width: 15px;
    }


    .metro .hint.left:before,
    .metro .hint.left:after {
        top: 10px;
        border-top-width: 10px;
        border-bottom-width: 10px;
        border-left-color: #333333;
    }
    .metro .hint.left:after{
        right: -15px;
        border-left-width: 15px;
    }
    .metro .hint.top:before,
    .metro .hint.top:after {
        border-top-color: #333333;
    }

        .metro .hint ul {
            color: inherit;
            font-size: inherit;
            line-height: normal;
        }
        .metro .hint ul li {
            line-height: normal;
        }

    /*.metro .hint.right:before
    {
      border-right: 10px solid #fff;
    }
    .metro .hint.bottom:before,
    .metro .hint.bottom:after {
      top: 1px;
      left: auto;
      right:5px;
      margin: -10px 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top:none;
      border-bottom: 10px solid #333333;
    }
    .metro .hint.left:after {
      top: 0;
    }
    .metro .hint.top::before {
        border-top-color:#fff;
    }*/
    .metro .hint-maxWidthNone .hint {
        max-width:none;
    }

    .metro .slider > .hint {
        background-color: black;
    }

    .metro .slider > .hint-marker {
        background-color: #ffffff;
        position: absolute;
        z-index: 3;
        border: 1px #ccc solid;
        padding: 2px 4px;
        top: -40px;
        min-width: 30px;
        text-align: center;
        font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif;
        font-size: 14px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 3px 8px rgba(0, 0, 0, 0.2);
        display: block;
    }

    .metro .slider.hint-bottom .hint-marker {
        top: -30px;
    }



/* Misc
----------------------------------------------------------*/
.metro [class^="icon-"].outline, .metro [class*=" icon-"].outline {
    /*font-size: 18px;
    line-height: 18px;*/
    background: #2D89EF;
    color: white !important;
    padding: 2px;
    border-radius: 50%
}

.metro button:focus {
    outline: 2px solid #1ba1e2;
    border: 1px #1ba1e2 solid;
}


.metro .button-group {
    display: inline-block;
    overflow: hidden;
}

button {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Helvetica Neue", sans-serif !important;
}

.button-group .button:not([class^="button input-"]):hover {
    color: white !important;
    background-color: #1ba1e2 !important;
}

.button-group .smallButton,
.button-group .largeButton {
    float: left;
}

    .button-group .smallButton:first-of-type,
    .button-group .largeButton:first-of-type {
        border-radius: 10px 0 0 10px !important;
    }

    .button-group .smallButton:last-of-type,
    .button-group .largeButton:last-of-type {
        border-radius: 0 10px 10px 0 !important;
        border-left: none;
    }

.button-set .button-group button {
    float: left;
}

.button-set .button-group button {
    border-radius: 0 !important;
    margin-right: 0 !important;
}

    .button-set .button-group button:first-of-type {
        border-radius: 20px 0 0 20px !important;
    }

    .button-set .button-group button:last-of-type {
        border-radius: 0 20px 20px 0 !important;
        border-left: none;
    }

.metro .button-set { }
    .metro .button-set button {
        border-radius: 20px;
        margin-right: 10px;
        margin-bottom: 0 !important;
        color: white;
        background: #2D89EF;
        /*background: lightgray;*/
        padding: 10px 15px;
        /*font-family: "Segoe UI_","Open Sans",Verdana,Arial,Helvetica,sans-serif;*/
    }
    .metro .button-set .button.active, .metro .button-set button.active {
        background-color: green;
    }

    .button-set.square button,
    .button-set.square button.smallButton {
        border-radius: 0 !important;
    }

    .metro .button-set button.small { 
        border-radius: 10px;
        padding: 7px 10px;
    }

    .metro .button-set .saveButton, 
    .metro .button-set .closeButton, 
    .metro .button-set .uploadButton {
        color: #fff;
        background: #31b1e0;
        
        /*font-size:15px;
        font-family: "Segoe UI_","Open Sans",Verdana,Arial,Helvetica,sans-serif;
        padding: 7px 12px;*/
    }
    
    .metro .button-set button.closeButton {
        border: 1px solid #31b1e0 !important;
        color: #31b1e0 !important;
    }

    .metro .button-set button.place-left { 
        float: left !important;
    }

    
    .metro .button-set button[data-role-action=previous],
    .metro .button-set button[data-role-action=next] { 
        color: #222222;
        background: #d9d9d9;
    }

    .metro .button-set button:last-of-type { 
        margin-right: 0;
    }
    
    .metro .button:focus {
      border: 1px #353535 solid;
    }

.metro .addButton {
    border: solid 1px #a5a5a5;
    padding: 4px 5px;
    font-size: .85rem;
    letter-spacing: .1rem;
	cursor:pointer;
	width:50px;
}
    .metro .addButton:hover {
        background-color: #71b1d1;
        color: white;
    }

    .metro .fg-white .addButton {
        border: solid 1px white;
    }

.metro .no-padding-bottom { padding-bottom: 0 !important; }

.metro .no-hover:hover {
    background-color: transparent !important;
    border-color: transparent !important;
}

.metro .transparent{
    background: rgba(0,0,0,0.5) !important;
}

/* Spans
----------------------------------------------------------*/
.metro .span05 {
    width: 30px !important;
}

.metro .span1,
.metro .size1 {
    width: 60px !important;
}

.metro .span2,
.metro .size2 {
    width: 140px !important;
}

.metro .span3,
.metro .size3 {
    width: 220px !important;
}

.metro .span4,
.metro .size4 {
    width: 300px !important;
}

.metro .span5,
.metro .size5 {
    width: 380px !important;
}

.metro .span6,
.metro .size6 {
    width: 460px !important;
}

.metro .span7,
.metro .size7 {
    width: 540px !important;
}

.metro .span8,
.metro .size8 {
    width: 620px !important;
}

.metro .span9,
.metro .size9 {
    width: 700px !important;
}

.metro .span10,
.metro .size10 {
    width: 780px !important;
}

.metro .span11,
.metro .size11 {
    width: 860px !important;
}

.metro .span12,
.metro .size12 {
    width: 940px !important;
}

.metro .offset1 {
    margin-left: 80px !important;
}

    .metro .offset1:not(:first-child) {
        margin-left: 100px !important;
    }

.metro .offset2 {
    margin-left: 160px !important;
}

    .metro .offset2:not(:first-child) {
        margin-left: 180px !important;
    }

.metro .offset3 {
    margin-left: 240px !important;
}

    .metro .offset3:not(:first-child) {
        margin-left: 260px !important;
    }

.metro .offset4 {
    margin-left: 320px !important;
}

    .metro .offset4:not(:first-child) {
        margin-left: 340px !important;
    }

.metro .offset5 {
    margin-left: 400px !important;
}

    .metro .offset5:not(:first-child) {
        margin-left: 420px !important;
    }

.metro .offset6 {
    margin-left: 480px !important;
}

    .metro .offset6:not(:first-child) {
        margin-left: 500px !important;
    }

.metro .offset7 {
    margin-left: 560px !important;
}

    .metro .offset7:not(:first-child) {
        margin-left: 580px !important;
    }

.metro .offset8 {
    margin-left: 640px !important;
}

    .metro .offset8:not(:first-child) {
        margin-left: 660px !important;
    }

.metro .offset9 {
    margin-left: 720px !important;
}

    .metro .offset9:not(:first-child) {
        margin-left: 740px !important;
    }

.metro .offset10 {
    margin-left: 800px !important;
}

    .metro .offset10:not(:first-child) {
        margin-left: 820px !important;
    }

.metro .offset11 {
    margin-left: 880px !important;
}

    .metro .offset11:not(:first-child) {
        margin-left: 900px !important;
    }

.metro .offset12 {
    margin-left: 960px !important;
}

    .metro .offset12:not(:first-child) {
        margin-left: 980px !important;
    }

.metro .span15 { width: 100px !important; }
.metro .span25 { width: 180px !important; }
.metro .span30 { width: 190px !important; }
.metro .span35 { width: 260px !important; }
.metro .span45 { width: 340px !important; }
.metro .span55 { width: 380px !important; }
.metro .span65 { width: 500px !important; }

.metro .span75 { width: 580px !important; }
.metro .span85 { width: 660px !important; }
.metro .span95 { width: 740px !important; }
.metro .span100 { width: 845px !important; }

.metro .span13,
.metro .size13 { width: 1020px !important; }

.metro .span14,
.metro .size14 { width: 1180px !important; }

.metro .bottomMargin5 { margin-bottom: 5px !important; }

.cell-15 { width: 100px !important; }
.cell-25 { width: 180px !important; }
.cell-30 { width: 190px !important; }
.cell-35 { width: 260px !important; }
.cell-45 { width: 340px !important; }
.cell-55 { width: 380px !important; }
.cell-65 { width: 500px !important; }

.cell-75 { width: 580px !important; }
.cell-85 { width: 660px !important; }
.cell-95 { width: 740px !important; }
.cell-100 { width: 845px !important; }

.cell-15
.cell-25,
.cell-30,
.cell-35,
.cell-45,
.cell-55,
.cell-65,
.cell-75,
.cell-85,
.cell-95,
.cell-10 {
    position: relative;
    display: block;
    padding: 0 12px;
    width: 100%;
    min-height: 1px;
}

/* Hover Table
----------------------------------------------------------*/

/*.table { 
    margin-bottom: 10px;
    border-bottom:none; 
}
.table.hovered tbody tr:hover {
    background-color: rgba(28,183,236,.1)
}*/

.table.table tbody td .icon:not(.image-button .icon) {
    width: 22px;
    height: 22px;
    padding: 4px;
}

.table.hovered tbody tr.no-hover {
        background-color: initial;
    }

.table .hovered { }
    .table.hovered td h4 { margin-bottom: 0 !important; }

    .table th, 
    .table td {
        /*font-size: 1.2rem;*/
        /*line-height: 1rem;
        padding:10px 8px;
        border-bottom: 0 transparent solid;
        text-align: left;*/
    }
    .table thead th {
        color: #31b1e0;
        /*background: none;
        border-top: none;
        border-top: 1px solid #eeeeee;
        border-bottom: 1px solid #eeeeee;
        font-size: 15px;
        font-weight: normal;*/
    }
    /*.table thead th:not(:last-child) { border-right:2px solid white; }
    .table thead th a { color:#31b1e0; }

    table.table.hovered > tbody > tr > td,
    table.table.hovered > tr > td {
        border-left: 1px transparent solid;
        border-right: 1px transparent solid;
        border-top: 1px transparent solid;
    }
        table.table.hovered > tbody > tr > td:first-child,
        table.table.hovered > tr > td:first-child {
            border-left: 1px transparent solid;
        }

        table.table.hovered > tbody > tr > td:last-child,
        table.table.hovered > tr > td:last-child {
            border-right: 1px transparent solid;
        }

table.table.hovered > tbody > tr:last-of-type td,
table.table.hovered > tr:last-of-type td {
    border-bottom: none;
}*/

table.table.hovered td.primary,
table.table.hovered th.primary {
    width: 65px;
}

table.table td.rowOptions {
    width: 146px;
}

    table.table td.rowOptions a {
        font-size: 0.85em;
    }

    table.table td.rowOptions.Narrow {
        width: 61px;
        padding: 10px 5px 10px 7px !important;
    }

    table.table td.rowOptions.Narrow2 {
        width: 75px;
        padding: 10px 5px 10px 7px !important;
    }

/*table.table tbody tr td.icon {
    padding-right: 0;
    padding-bottom: 0;
    vertical-align: top;
}*/

table.table tbody tr td.options {
    padding-top: 10px;
    height: 38px;
	min-width: 85px;
}

table.table > tbody > tr > td.options,
table.table > tr > td.options {
    font-size: 0.75rem;
}

table tbody tr td.options a {
    border: 2px solid transparent !important;
    background-color: transparent;
}

    table tbody tr td.options a.main {
        border-color: #eaeaea !important;
    }

    table tbody tr td.options a:hover {
        color: #ffffff !important;
        background-color: #1ba1e2 !important;
    }

table.table.selectable {
	width: calc(100% - 5px) !important;
}
	table.table.selectable tbody tr {
		border: 1px transparent solid;
		border-bottom: none;
	}
		table.table.selectable tbody tr.selected-row {
			background-color: rgba(28, 183, 236, 0.1) !important;
			border: 1px #1c98cc solid !important;
		}

th.grey-right-border {
    border-right-color: #f2f2f2 !important;
}


.table tr.group td {
    text-transform: uppercase;
    padding: 20px 20px 5px 5px;
    border-bottom: 1px solid gray;
    color: #31b1e0;
    font-weight: bold;
}

.table tr.group:hover {
    background-color: transparent;
}

/* Tiles
----------------------------------------------------------*/

.metro .tile {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 3px 8px rgba(0, 0, 0, 0.2);
}

.metro .tile-area {
  position: relative;
  padding: 10px 0 0 0;
  overflow: hidden;
  /*margin: 0 auto;*/
  margin: 0;
  min-width: 960px;
}

.metro .tile-group {
  padding-top: 0;
}

.metro .tile-group:first-child {
  margin-left: 0;
}

.metro .tile-group:last-child {
  margin-right: 0;
}

.metro .tile-group.one {
  width: 130px;
}


/* List View Bar
----------------------------------------------------------*/

.listview-outlook {
}

    .listview-outlook .list-group .group-title {
        padding: 8px 20px 8px 24px;
        background-color: transparent;
        border-bottom: 1px solid gray;
        font-size: 16px;
    }

        .listview-outlook .list-group .group-title:hover {
            background-color: rgba(49,177,224,.2) !important;
            border-bottom-color: transparent;
        }

        .listview-outlook .list-group .group-title:before {
            top: 9px;
        }

    .listview-outlook .list .list-content .task-title .input-control.checkbox {
        margin: 0 !important;
    }


    .listview-outlook .list .list-content .list-title {
        font-size: 15px;
    }

    .listview-outlook .list .list-content {
        border-left: 0 !important;
    }

.homePageItem .listview-outlook.modern .group-title {
    position: relative;
}

.listview-outlook.modern .list-group .group-title {
    background-color: transparent;
    color: white;
    font: 11px/11px "Segoe UI Bold";
    text-transform: uppercase;
    margin: 15px 0 5px 0;
}

.listview-outlook.modern .list-group:first-of-type .group-title {
    margin: 5px 0 5px 0;
}

.listview-outlook.modern .list-group .group-title:before {
    border-bottom-color: white;
}

.listview-outlook.modern .list-group .group-content {
    /*background-color: rgba(255,255,255, 0.55);*/
}


.listview-outlook.modern .list {
    padding: 10px 0;
    background-color: white;
    border-bottom: 1px solid #ccc;
}
    .listview-outlook.modern.compact .list {
        padding: 4px 0;
    }


.listview-outlook.modern .list-group .group-title:before {
    border-bottom-color: #000 !important;
    top: 10px;
}

    .listview-outlook.modern .list:hover {
        background-color: #e6f2fa;
        outline: none;
    }

    .listview-outlook.modern .list .list-content .list-title {
        font-size: 12px;
        color: #1b6eae !important;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: bold !important;
        white-space: nowrap;
    }

        .listview-outlook.modern .list .list-content .list-title [title] {
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: bold !important;
            white-space: nowrap;
        }

        .listview-outlook.modern .list .list-content .list-title .past-due {
            font-size: 10px;
            line-height: 10px;
            padding: 5px;
            text-transform: uppercase;
            vertical-align: top;
        }

    .listview-outlook.modern .list .list-content .list-remark {
        font-size: 11px;
        color: #555555 !important;
        overflow: hidden;
    }

    .listview-outlook.modern .list .list-content .list-remark .small {
        font-size: 10px;
    }

    .listview-outlook.modern .list .list-content .list-title .list-remark {
        display: inline-block;
    }

    .listview-outlook .list:active, 
    .listview-outlook .list:focus, 
    .listview-outlook .list.active {
        background-color: #cde6f7 !important;
        outline: 1px #999 dotted;
        color: #555 !important
    }



.listview-outlook .list .list-content {
    padding: 0 10px 0;
}


.metro .listview.fluid {
    padding: 3px 0 3px 3px;
    overflow: hidden;
}

.metro .listview.fluid > * {
    float: left;
    margin-right: 5px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
    .metro .listview .list:hover {
        outline: 3px #1ba1e2 solid;
    }

    .metro .listview .list.selected {
        border: 1px #1ba1e2 solid;
        outline: 3px #1ba1e2 solid;
    }
    .metro .listview .list.selected:after {
        border-top: 28px solid #1ba1e2;
    }

    .metro .listview.fluid.cols2 > * { width: calc((100% / 2) - 5px); }
    .metro .listview.fluid.cols3 > * { width: calc((100% / 3) - 5px); }
    .metro .listview.fluid.cols4 > * { width: calc((100% / 4) - 5px); }
    .metro .listview.fluid.cols5 > * { width: calc((100% / 5) - 5px); }
    .metro .listview.fluid.cols6 > * { width: calc((100% / 6) - 5px); }
    .metro .listview.fluid.cols7 > * { width: calc((100% / 7) - 5px); }
    .metro .listview.fluid.cols8 > * { width: calc((100% / 8) - 5px); }
    
    .metro .listview.fluid .list:last-child,
    .metro .listview.fluid.cols2 .list:nth-child(2n),
    .metro .listview.fluid.cols3 .list:nth-child(3n),
    .metro .listview.fluid.cols4 .list:nth-child(4n),
    .metro .listview.fluid.cols5 .list:nth-child(5n),
    .metro .listview.fluid.cols6 .list:nth-child(6n),
    .metro .listview.fluid.cols7 .list:nth-child(7n),
    .metro .listview.fluid.cols8 .list:nth-child(8n)
    { 
        margin-right: 0;
    }

    .metro .row.cols2 > *:nth-child(2n + 1),
    .metro .row.cols3 > *:nth-child(3n + 1),
    .metro .row.cols4 > *:nth-child(4n + 1),
    .metro .row.cols5 > *:nth-child(5n + 1),
    .metro .row.cols6 > *:nth-child(6n + 1),
    .metro .row.cols7 > *:nth-child(7n + 1),
    .metro .row.cols8 > *:nth-child(8n + 1)
    { 
        margin-left: 0;
    }


    .metro .overview .listview .list .list-content .list-title {
        font-size: 12px;
        text-transform: uppercase;
    }


/* Dialog Box
----------------------------------------------------------*/

/*@media (max-width: 1200px) {
    .window flat shadow {
        width: 90%;
    }
}*/

.metro .window {
    min-height: 100px;
    overflow: hidden !important;
}

.metro .window.smooth {
    -webkit-transition: top 300ms linear;
    -moz-transition: top 300ms linear;

    /*-webkit-transition: left 500ms ease-in;
    -moz-transition: left 500ms ease-in;*/

    /*-webkit-transition: height 500ms ease-in;
    -moz-transition: height 500ms ease-in;*/

    /*-webkit-transition: width 500ms ease-in;
    -moz-transition: width 500ms ease-in;*/
}

    .metro .window.flat .content {
        overflow-y: scroll !important;
        padding-top: 0px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 10px !important;
        position: initial;
        height: calc(100% - 42px);
    }
    .metro .window.flat .content.scroll {
        /*overflow: hidden;*/
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .metro .window.flat {
        
    }

    .metro .window.flat .caption {
        border-bottom-color: transparent;
        position: initial;
        height: 32px;
    }


/* DropDown Menu
----------------------------------------------------------*/
.metro .dropdown-menu {
    
}

.metro .dropdown-menu .menu-title.simple {
  background-color: transparent;
}

.metro .horizontal-menu.compact li { margin-left: 0; }




.metro .dropdown-menu li.print > a:before,
.metro .dropdown-menu li.checked a:before,
.metro .dropdown-menu li.file > a:before,
.metro .dropdown-menu li.order > a:before,
.metro .dropdown-menu li.clock > a:before,
.metro .dropdown-menu li.forms > a:before,
.metro .dropdown-menu li.pdf > a:before,
.metro .dropdown-menu li.settings > a:before,
.metro .dropdown-menu li.files > a:before,
.metro .dropdown-menu li.calculator > a:before,
.metro .dropdown-menu li.tasks > a:before,
.metro .dropdown-menu li.user > a:before,
.metro .dropdown-menu li.user-2 > a:before,
.metro .dropdown-menu li.user-3 > a:before,
.metro .dropdown-menu li.case > a:before,
.metro .dropdown-menu li.help > a:before,
.metro .dropdown-menu li.mail > a:before,
.metro .dropdown-menu li.note > a:before,
.metro .dropdown-menu li.notes > a:before,
.metro .dropdown-menu li.box > a:before,
.metro .dropdown-menu li.credit-card > a:before,
.metro .dropdown-menu li.home > a:before,
.metro .dropdown-menu li.flag > a:before,
.metro .dropdown-menu li.briefcase > a:before,
.metro .dropdown-menu li.floppy > a:before,
.metro .dropdown-menu li.plus-2 > a:before,
.metro .dropdown-menu li.calendar > a:before {
    position: absolute;
    left: 10px;
    content: none;
    font-family: iconFont;
}
.metro .dropdown-menu li.print > a:before { content: "\e021"; }
.metro .dropdown-menu li.checked > a:before { content: "\e0a6"; }
.metro .dropdown-menu li.file > a:before { content: "\e073"; }
.metro .dropdown-menu li.order > a:before { content: "\e140"; }
.metro .dropdown-menu li.clock > a:before { content: "\e01e"; }
.metro .dropdown-menu li.forms > a:before { content: "\e013"; }
.metro .dropdown-menu li.pdf > a:before { content: "\e0e8"; }
.metro .dropdown-menu li.settings > a:before { content: "\e04a"; }
.metro .dropdown-menu li.files > a:before { content: "\e189"; }
.metro .dropdown-menu li.calculator > a:before { content: "\e017"; }
.metro .dropdown-menu li.tasks > a:before { content: "\e06b"; }
.metro .dropdown-menu li.user > a:before { content: "\e03c"; }
.metro .dropdown-menu li.user-2 > a:before { content: "\e03c"; }
.metro .dropdown-menu li.user-3 > a:before { content: "\e03d"; }
.metro .dropdown-menu li.case > a:before { content: "\e174"; }
.metro .dropdown-menu li.help > a:before { content: "\e085"; }
.metro .dropdown-menu li.mail > a:before { content: "\e01a"; }
.metro .dropdown-menu li.note > a:before { content: "\e06a"; }
.metro .dropdown-menu li.notes > a:before { content: "\e010"; }
.metro .dropdown-menu li.box > a:before { content: "\e029"; }
.metro .dropdown-menu li.credit-card > a:before { content: "\e140"; }
.metro .dropdown-menu li.home > a:before { content: "\e172"; }
.metro .dropdown-menu li.flag > a:before { content: "\e076"; }
.metro .dropdown-menu li.briefcase > a:before { content: "\e05a"; }
.metro .dropdown-menu li.floppy > a:before { content: "\e170"; }
.metro .dropdown-menu li.plus-2 > a:before { content: "\e08c"; }
.metro .dropdown-menu li.calendar > a:before { content: "\e020"; }

.metro .dropdown-menu li.sorting > a:before,
.metro .dropdown-menu li.sorting_asc > a:before,
.metro .dropdown-menu li.sorting_desc > a:before {
    position: absolute;
    left: 10px;
    font-family: metroSysIcons;
}

.metro .dropdown-menu li.sorting > a:before {
    content: "\e011";
    color: #999999;
}

.metro .dropdown-menu li.sorting_desc > a:before {
    content: "\e012";
}

.metro .dropdown-menu li.sorting_asc > a:before {
    content: "\e010";
}



/* Nav Bar
----------------------------------------------------------*/
.app-bar {
	z-index: 1049;
}

.metro .navigation-bar-content .element .input-control.text input[type='text'],
.metro .navigation-bar-content .element .input-control.select select {
    font-size: 15px;
}
.metro .navigation-bar-content [class*="icon-"], .metro .navbar-content [class*="icon-"] {
    font-size: inherit !important;
}

@-moz-document url-prefix() {
    .metro .navigation-bar-content .element .input-control.text input[type='text'], 
    .metro .navigation-bar-content .element .input-control.select select {
        font-size: 14px;
    }
}
.metro .navigation-bar-content button[type="submit"].small-search-btn  {
    z-index: 1;
    padding: 0 10px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
}
.metro .navigation-bar-content .element .input-control.select,
.metro .navigation-bar-content .element .input-control.text {
    /*top: 0px;*/
}

/*.metro .navigation-bar-content .element.input-element {
    padding-top: 10px;
}*/

.metro .navigation-bar-content .element .input-control.text [class*='btn-'], 
.metro .navbar-content .element .input-control.text [class*='btn-'], 
.metro .navigation-bar-content .element .input-control.password [class*='btn-'], 
.metro .navbar-content .element .input-control.password [class*='btn-'] {
    height:27px;
}

.metro .navigation-bar.light {
    border-bottom: 5px solid #2D89EF;
}

.metro .navigation-bar.dark {
    /*background-color: #50595b;*/
}

    /*Sub-Menu*/
    .metro .navigation-bar.submenu {
        border-top: 0;
    }
    .metro .navigation-bar.submenu > .navigation-bar-content > .element {
        padding: 6px 15px 4px;
        line-height: 15px;
        font-size: 14px;
        position: relative;
    }
    .metro .navigation-bar.submenu > .navigation-bar-content > .element,
    .metro .navigation-bar.submenu > .navigation-bar-content > .element-divider {
        height: 30px;
    }

        .metro #casesubmenu .navigation-bar.submenu > .navigation-bar-content > .element,
        .metro #casesubmenu .navigation-bar.submenu > .navigation-bar-content > .element-divider {
            height: 50px;
        }

    .metro .navigation-bar.submenu > .navigation-bar-content > .element h2 {
        min-height: initial;
    }

.metro .navigation-bar.compact {
    border-bottom: 0;
}

.metro .navigation-bar.compact .navigation-bar-content .element,
.metro .navbar.compact .navigation-bar-content .element,
.metro .navigation-bar.compact .navbar-content .element,
.metro .navbar.compact .navbar-content .element {
    padding: 8px 15px 7px 15px;
    line-height: 15px;
    color: inherit;
    /*font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;*/
    /*font-size: 12px;*/
    position: relative;
}

.metro .navigation-bar .navigation-bar-content .element,
.metro .navbar .navigation-bar-content .element,
.metro .navigation-bar .navbar-content .element,
.metro .navbar .navbar-content .element {
  /*font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;*/
}

.metro .navigation-bar .navbar-content .input-element {
  padding-top: 5px !important;
}

.metro .navigation-bar.compact .element-menu > li > a,
.metro .navbar.compact .element-menu > li > a {
    padding: 8px 15px 7px 15px;
    line-height: 15px;
    /*font-size: 14px;*/
}


.metro .navigation-bar .navigation-bar-content .element.large {
    padding-top: 10px;
}
.metro .navigation-bar .navigation-bar-content .element.large i { 
    padding-top: 1px;
    padding-bottom: 3px;
    font-size: 2em !important;
}
.metro .navigation-bar .navigation-bar-content .element.large div { 
    padding-top: 5px;
    font-family: inherit;
    padding-bottom: 11px;
    font-size: 1.5em;
}

.metro .navigation-bar .navigation-bar-content .element.text-element.large {
    padding-top: 12px;
    padding-bottom: 11px;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

    .metro .navigation-bar .navigation-bar-content .element.text-element.large h3 {
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    .metro .navigation-bar .navigation-bar-content .element.text-element:hover {
        background-color: initial;
        /*color: initial;*/
    }
    .metro .navigation-bar .navigation-bar-content .element.text-element.bold > *{
        font-weight: bold !important;
    }

.metro .navigation-bar-content .element .input-control.select,
.metro .navigation-bar-content .element.input-element div { 
    top: -6px;
    margin: 0;
}
    .metro .navigation-bar-content .element .input-control.select select,
        .metro .navigation-bar-content .element .input-control.text input { 
        font-size: 12px; 
        padding: 5px !important;
    }

    .metro .navigation-bar.light .element.input-element:hover {
        color: inherit;
    }


.metro .navigation-bar .navigation-bar-content .element.nav-element { 
    padding: 0 10px 0 0; 
}
    .metro .navigation-bar .navigation-bar-content .element.nav-element:hover {
        background-color: initial;
        color: initial;
    }
        .metro .navigation-bar .navigation-bar-content .element.nav-element .breadcrumbs ul { 
            padding-right: 10px; 
        }
        .metro .navigation-bar .navigation-bar-content .element.nav-element .breadcrumbs a { 
            padding: 0.67em 1em; 
        }


/* Side Bar
----------------------------------------------------------*/
/*.sidebar {
    z-index: 1082;
}*/

.metro [data-pe-id="sidebar"] {
    /*height: 100%;*/
    padding-bottom: 20px;
}

.metro .navigation-bar.white .element:hover,
.metro .navigation-bar.white .element-menu > li:hover {
    background-color: #71b1d1;
    color: #ffffff;
}

.metro .navigation-bar.white .element.text-element:hover,
.metro .navigation-bar.white .element-menu.text-element > li:hover {
    background-color: inherit;
    color: inherit;
}

.metro .navigation-bar.white .element h3,
.metro .navigation-bar.white .element-menu > li h3 {
    font-weight: normal !important;
}

.metro .navigation-bar.white .element-menu li:hover a h3
{
    color: #ffffff !important;
    font-weight: normal !important;
}



.d-menu.alternate li a, 
.v-menu.alternate li a {
    padding: .5rem 2rem .5rem 2.5rem;
    line-height: 16px;
}

.v-menu.compact {
    height: 100%;
    width: 100%;
    background-color: #31b1e0;
}

.v-menu.compact li {
    
}
    .v-menu.compact li a {
        color: #fff;
        font-size: 11px;
        text-transform: uppercase;
        font-family: "Open Sans Bold",Verdana,Arial,Helvetica,sans-serif !important;
        padding: 12px 10px 12px 40px;
        
        height: initial;
        line-height: initial;
    }

        .v-menu.compact .d-menu li a .icon,
        .v-menu.compact li a .icon {
            top: .5rem;
        }

    .v-menu.compact .menu-title {
        color: #fff;
        font-size: 25px;
        padding: 10px 20px 10px 20px;
        font-family: 'Segoe UI Light_','Open Sans Light',Verdana,Arial,Helvetica,sans-serif;
        font-weight: 300;
        height: initial;
        background-color: transparent;
    }


    .d-menu.compact .active-container,
    .v-menu.compact .active-container,
    .d-menu.compact .active-container > a,
    .v-menu.compact .active-container > a {
        background-color: white;
        color: #50595b;
    }

        .v-menu.compact .active-container .active,
        .d-menu.compact .active-container .active {
            background-color: rgba(29, 29, 29, 0.1);
        }

    .v-menu.compact ul.dropdown-menu {
        padding: 0;
        margin: 0;
    }
    .v-menu.compact ul.dropdown-menu li a {
        color: #50595b;
        background-color: transparent;
    }



.metro .sidebar {
    height: 100%;
    width: 100%;
}

    .metro .sidebar.light li.active a {
        background-color: inherit !important;
        color: inherit !important;
    }

    .metro .sidebar.light li.active > a {
        background-color: #1ba1e2 !important;
        color: #ffffff !important;
    }
    .metro .sidebar > ul ul {
        z-index: 0;
    }

    .metro .sidebar.alternate {
        /*background-color: transparent;
        border: 1px #eaeaea solid;*/
        background-color: #31b1e0;
        border: 0;
        /*padding-top: 20px;*/
    }
        .metro .sidebar.alternate li {
            min-height: 32px;
            border: 0;
        }
        .metro .sidebar.alternate li.title {
            color: #fff;
            font-size: 2.5rem;
        }
        .metro .sidebar.alternate li.divider {
            border: 1px solid #eaeaea !important;
            margin: 5px 0;
            min-height: 1px;
        }

        .metro nav.sidebar.alternate > ul > li > ul.dropdown-menu > li > a {
            font-size: 1rem !important;
            padding-left: 40px !important;
        }

        .metro .sidebar.alternate > ul > li a {
            color: #fff;
            background-color: transparent;
            /*padding: 10px;*/
            min-height: 20px;
            padding: 20px 10px 20px 50px;
            font-size: 1.1rem;
            text-transform: uppercase;
            vertical-align: middle;
            /*font: 11px/11px "Segoe UI Bold";*/
            font: 11px/11px "Open Sans Bold",Verdana,Arial,Helvetica,sans-serif !important;
        }
        .metro .sidebar.alternate li a:hover {
            background-color: #7cc1de;
        }
            .metro .sidebar.alternate li a i {
                font-size: 3rem;
                font-weight: normal;
            }

        .metro .sidebar.alternate li ul {
            background-color: #ffffff;
            border: 1px transparent solid;
            border-left: 0;
            border-right: 0;
        }
        .metro .sidebar.alternate li .divider {
            background-color: #eeeeee;
        }
        .metro .sidebar.alternate li .divider:hover {
            background-color: #eeeeee;
        }
        .metro .sidebar.alternate li.disabled a {
            background-color: #ffffff;
            cursor: default;
            color: #999999;
        }
        .metro .sidebar.alternate li.active a {
            background-color: #ffffff;
            color: #50595b;
        }

        .metro nav.sidebar.alternate > ul > li > ul.dropdown-menu > li.active > a {
            /*background-color: #edf4fc;*/
            background-color: #eeeeee;
        }

        .metro .sidebar > ul ul li:hover {
            background: #eeeeee;
        }

        .metro .sidebar.alternate ul.dropdown-menu li a {
            color: #50595b;
            background-color: transparent;
            font-weight: normal;
            text-transform: uppercase;
            padding-top: 5px !important;
            padding-bottom: 5px !important;
            font-size: 1.3rem !important;
        }




        .metro .sidebar.alternate > ul.compact > li a {
            padding: 12px 10px 12px 40px;
        }

        .metro .sidebar .compact li.dash > a:before,
        .metro .sidebar .compact li.general > a:before,
        .metro .sidebar .compact li.clients > a:before,
        .metro .sidebar .compact li.creditors > a:before,
        .metro .sidebar .compact li.assets > a:before,
        .metro .sidebar .compact li.folder > a:before,
        .metro .sidebar .compact li.calculate > a:before,
        .metro .sidebar .compact li.coins > a:before,
        .metro .sidebar .compact li.bars > a:before,
        .metro .sidebar .compact li.options > a:before,
        .metro .sidebar .compact li.cases > a:before,
        .metro .sidebar .compact li.search > a:before,
        .metro .sidebar .compact li.notes > a:before,
        .metro .sidebar .compact li.tasks > a:before,
        .metro .sidebar .compact li.activity > a:before,
		.metro .sidebar .compact li.events > a:before,
        .metro .sidebar .compact li.mail > a:before,
        .metro .sidebar .compact li.tools > a:before,
        .metro .sidebar .compact li.compass > a:before,
        .metro .sidebar .compact li.briefcase > a:before,
        .metro .sidebar .compact li.upload > a:before,
        .metro .sidebar .compact li.clock > a:before {
            font-size: 2rem;
        }

    .metro .sidebar li.dash > a:before,
    .metro .sidebar li.general > a:before,
    .metro .sidebar li.clients > a:before,
    .metro .sidebar li.creditors > a:before,
    .metro .sidebar li.assets > a:before,
    .metro .sidebar li.folder > a:before,
    .metro .sidebar li.calculate > a:before,
    .metro .sidebar li.coins > a:before,
    .metro .sidebar li.bars > a:before,
    .metro .sidebar li.options > a:before,
    .metro .sidebar li.cases > a:before,
    .metro .sidebar li.search > a:before,
    .metro .sidebar li.notes > a:before,
    .metro .sidebar li.tasks > a:before,
    .metro .sidebar li.activity > a:before, 
	.metro .sidebar li.events > a:before,
    .metro .sidebar li.mail > a:before,
    .metro .sidebar li.tools > a:before,
    .metro .sidebar li.compass > a:before,
    .metro .sidebar li.briefcase > a:before,
    .metro .sidebar li.list > a:before,
    .metro .sidebar li.upload > a:before,
    .metro .sidebar li.clock > a:before,
    .metro .sidebar li.user > a:before {
        position: absolute;
        left: 10px;
        font-family: iconFont;
        font-size: 3rem;
        content: "\e106";
    }
    .metro .sidebar li.general > a:before { content: "\e104"; }
    .metro .sidebar li.clients > a:before { content: "\e03d"; }
    .metro .sidebar li.creditors > a:before { content: "\e140"; }
    .metro .sidebar li.assets > a:before { content: "\e172"; }
    .metro .sidebar li.folder > a:before { content: "\e013"; }
    .metro .sidebar li.calculate > a:before { content: "\e017"; }
    .metro .sidebar li.coins > a:before { content: "\e177"; }
    .metro .sidebar li.bars > a:before { content: "\e04c"; }
    .metro .sidebar li.options > a:before { content: "\e04a"; }
    .metro .sidebar li.cases > a:before { content: "\e174"; }
    .metro .sidebar li.search > a:before { content: "\e041";
        font-size: 2.3rem;
        padding-left: 4px;
    }
    .metro .sidebar li.notes > a:before { content: "\e010"; }
    .metro .sidebar li.tasks > a:before { content: "\e0a6"; }
    .metro .sidebar li.activity > a:before { content: "\e06b"; }
    .metro .sidebar li.events > a:before { content: "\e020"; }
    .metro .sidebar li.mail > a:before { content: "\e01a"; }
    .metro .sidebar li.tools > a:before { content: "\e17d" }
    .metro .sidebar li.compass > a:before { content: "\e01c"; }
    .metro .sidebar li.briefcase > a:before { content: "\e05a"; }
    .metro .sidebar li.list > a:before { content: "\e12e"; }
    .metro .sidebar li.upload > a:before { content: "\e072"; }
    .metro .sidebar li.clock > a:before { content: "\e01e"; }
    .metro .sidebar li.user > a:before { content: "\e03c"; }





/* Agenda SideBar
----------------------------------------------------------*/
.agendaSideBar input[type=text] {
    font-size: 14px;
}

.agendaSideBar .mainBtn {
    height: 38px;
    line-height: 38px;
    background-color: #31b1e0 !important;
}

.agendaSideBar .mainBtnPlus2 {
    width: calc(100% - 74px);
}

.agendaSideBar .mainBtnPlus3 {
    width: calc(100% - 110px);
}

.agendaSideBar button.dropdown-toggle {
    width: calc(100% - 87px);
    vertical-align: top;
    height: 42px;
    border: 1px solid white;
}

    .agendaSideBar .dropdown-toggle:hover {
        background-color: rgba(29, 29, 29, 0.1);
    }

.agendaSideBar .bg-cyan,
.agendaSideBar .bg-cyan-hover:hover {
    background-color: #31b1e0 !important;
}

.agendaSideBar .fg-white.dropdown-toggle::before,
.agendaSideBar .fg-white-hover:hover.dropdown-toggle::before {
    border-color: white !important;
}


/* Agenda List
----------------------------------------------------------*/
.agendaList .sticky-header {
    padding: 2px 0 4px;
    background-color: white !important;
    margin-bottom: 5px;
}
    .agendaList .sticky-header > * {
        border-bottom: 1px solid black;
    }


    .agendaList .sticky-header .title {
        font-weight: 500;
        user-select: none;
        letter-spacing: 5px;
        text-transform: uppercase;
        /*color: #989898 !important;
        font-size: 1.25rem;*/
    }

/*.agendaList .listview-outlook.modern .list {
        border: 1px solid #ccc;
        margin-bottom: 10px;
    }*/

.agendaList .listview-outlook .checkbox .check {
    margin: -5px 0 0 0;
}

.agendaList .listview-outlook.modern .list .list-content .status {
    padding: 2px 5px;
    font-weight: bold;
    display: inline-block;
    text-transform: uppercase;
}

.agendaList .list-content .viewButtons i {
    -webkit-transition: all .5s; /* For Safari 3.1 to 6.0 */
    transition: all .5s;
}


.agendaList .list-content .viewButtons:not(.selectable) i[data-selected] {
    border-color: transparent;
    /*background-color: transparent !important;*/
}

.agendaList .list-content .viewButtons i:not([data-selected]) {
    display: none;
}

.agendaList .list-content .viewButtons.selectable i {
    display: inline-block;
}

.agendaList .list-content .viewButtons i:hover {
    border-color: #1C98CC !important;
    /*background-color: rgba(28, 183, 236, 0.1) if;*/
}

.cell-auto {
    padding: 0 12px;
}

.listview-outlook.modern .list .list-content .taskAlt .list-title {
    font-size: 1.5rem;
}

.cell-xl-4 .agendaList .column-1,
.cell-sm-5 .agendaList .column-1,
.cell-xl-4 .agendaList .column-2,
.cell-sm-5 .agendaList .column-2 {
    width: 100% !important;
}

.cell-xl-4 .agendaList .column-2,
.cell-sm-5 .agendaList .column-2 {
    margin-top: 10px !important;
}



/* Input Controls
----------------------------------------------------------*/
.metro .infoBar .input-control input,
.metro .infoBar .input-control select,
.metro .infoBar .input-control textarea {
    padding: 5px !important;
}

.metro .no-title .input-control input,
.metro .no-title .input-control select,
.metro .no-title .input-control textarea {
    /*padding: 10px !important;*/
    padding: 5px !important;
}

.metro .right .input-control input {
    text-align: right;
}

.metro .right .input-control[data-role=datepicker] input {
    padding-right: 30px !important;
}

div.calendar-picker > input[data-pe-role=datewithpicker] {
	padding-right: 0;
}

.metro .right .input-control input:focus {
    padding-right: 30px !important;
}

.metro [data-pe-role=number] .input-control.text input {
    padding: 0;
    text-align: center;
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    font-size: 2.2rem;
    font-family: "Segoe UI Light_", "Open Sans Light", Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    height: 24px;
    letter-spacing: 0.01em;
}

    .metro [data-pe-role=number] .input-control.text input:focus {
        border-color: none;
        box-shadow: none;
    }

.metro .infoBar .input-control.text .btn-clear,
.metro .infoBar .input-control.password .btn-clear,
.metro .infoBar .input-control.file .btn-clear,
.metro .infoBar .input-control.email .btn-clear,
.metro .infoBar .input-control.tel .btn-clear,
.metro .infoBar .input-control.number .btn-clear,
.metro .infoBar .input-control.text .btn-reveal,
.metro .infoBar .input-control.password .btn-reveal,
.metro .infoBar .input-control.file .btn-reveal,
.metro .infoBar .input-control.email .btn-reveal,
.metro .infoBar .input-control.tel .btn-reveal,
.metro .infoBar .input-control.number .btn-reveal,
.metro .infoBar .input-control.text .btn-date,
.metro .infoBar .input-control.password .btn-date,
.metro .infoBar .input-control.file .btn-date,
.metro .infoBar .input-control.email .btn-date,
.metro .infoBar .input-control.tel .btn-date,
.metro .infoBar .input-control.number .btn-date,
.metro .infoBar .input-control.text .btn-file,
.metro .infoBar .input-control.password .btn-file,
.metro .infoBar .input-control.file .btn-file,
.metro .infoBar .input-control.email .btn-file,
.metro .infoBar .input-control.tel .btn-file,
.metro .infoBar .input-control.number .btn-file,
.metro .infoBar .input-control.text .btn-search,
.metro .infoBar .input-control.password .btn-search,
.metro .infoBar .input-control.file .btn-search,
.metro .infoBar .input-control.email .btn-search,
.metro .infoBar .input-control.tel .btn-search,
.metro .no-title .input-control.number .btn-search,
.metro .no-title .input-control.text .btn-clear,
.metro .no-title .input-control.password .btn-clear,
.metro .no-title .input-control.file .btn-clear,
.metro .no-title .input-control.email .btn-clear,
.metro .no-title .input-control.tel .btn-clear,
.metro .no-title .input-control.number .btn-clear,
.metro .no-title .input-control.text .btn-reveal,
.metro .no-title .input-control.password .btn-reveal,
.metro .no-title .input-control.file .btn-reveal,
.metro .no-title .input-control.email .btn-reveal,
.metro .no-title .input-control.tel .btn-reveal,
.metro .no-title .input-control.number .btn-reveal,
.metro .no-title .input-control.text .btn-date,
.metro .no-title .input-control.password .btn-date,
.metro .no-title .input-control.file .btn-date,
.metro .no-title .input-control.email .btn-date,
.metro .no-title .input-control.tel .btn-date,
.metro .no-title .input-control.number .btn-date,
.metro .no-title .input-control.text .btn-file,
.metro .no-title .input-control.password .btn-file,
.metro .no-title .input-control.file .btn-file,
.metro .no-title .input-control.email .btn-file,
.metro .no-title .input-control.tel .btn-file,
.metro .no-title .input-control.number .btn-file,
.metro .no-title .input-control.text .btn-search,
.metro .no-title .input-control.password .btn-search,
.metro .no-title .input-control.file .btn-search,
.metro .no-title .input-control.email .btn-search,
.metro .no-title .input-control.tel .btn-search,
.metro .no-title .input-control.number .btn-search {
    top: 2px !important;
}




    .metro .simpleInput .input-control.text input,
    .metro .simpleInput .input-control.password input,
    .metro .simpleInput .input-control.file input,
    .metro .simpleInput .input-control.email input,
    .metro .simpleInput .input-control.tel input,
    .metro .simpleInput .input-control.number input,
    .metro .simpleInput .input-control.select select,
    .metro .simpleInput .input-control.textarea select,
    .metro .simpleInput .input-control.select textarea,
    .metro .simpleInput .input-control.textarea textarea {
        background-color: transparent;
        border-width: 0 !important;
        border-bottom-width: 2px !important;
        border-bottom-color: lightgray;
        border-radius: 0;
        font-family: 'Segoe UI Light_', 'Open Sans Light', Verdana, Arial, Helvetica, sans-serif;
        font-size: 1.25em;
        font-weight: bold;
        padding: 26px 10px 5px 2px;
    }

.metro .simpleInput .group .input-control.text input,
.metro .simpleInput .group .input-control.password input,
.metro .simpleInput .group .input-control.file input,
.metro .simpleInput .group .input-control.email input,
.metro .simpleInput .group .input-control.tel input,
.metro .simpleInput .group .input-control.number input,
.metro .simpleInput .group .input-control.select select,
.metro .simpleInput .group .input-control.textarea select,
.metro .simpleInput .group .input-control.select textarea,
.metro .simpleInput .group .input-control.textarea textarea {
    font-size: 18px;
    font-weight: bold;
}

.metro .simpleInput .titleContainer {
    padding-left: 0px;
}

.metro .simpleInput .input-control.textarea .titleContainer {
    padding-left: 10px;
}

.metro .simpleInput .input-control.text input:focus,
.metro .simpleInput .input-control.password input:focus,
.metro .simpleInput .input-control.file input:focus,
.metro .simpleInput .input-control.email input:focus,
.metro .simpleInput .input-control.tel input:focus,
.metro .simpleInput .input-control.number input:focus,
.metro .simpleInput .input-control.select select:focus,
.metro .simpleInput .input-control.textarea select:focus,
.metro .simpleInput .input-control.select textarea:focus,
.metro .simpleInput .input-control.textarea textarea:focus {
    box-shadow: none;
    border-bottom-color: #1ba1e2;
}

.metro .simpleInput .large .input-control.text input,
.metro .simpleInput .large .input-control.password input,
.metro .simpleInput .large .input-control.file input,
.metro .simpleInput .large .input-control.email input,
.metro .simpleInput .large .input-control.tel input,
.metro .simpleInput .large .input-control.number input,
.metro .simpleInput .large .input-control.select select,
.metro .simpleInput .large .input-control.textarea select,
.metro .simpleInput .large .input-control.select textarea,
.metro .simpleInput .large .input-control.textarea textarea {
    font-size: 2em;
    padding: 26px 10px 5px 2px;
}

.metro .simpleInput .input-control.text .btn-clear,
.metro .simpleInput .input-control.password .btn-clear,
.metro .simpleInput .input-control.file .btn-clear,
.metro .simpleInput .input-control.email .btn-clear,
.metro .simpleInput .input-control.tel .btn-clear,
.metro .simpleInput .input-control.number .btn-clear,
.metro .simpleInput .input-control.text .btn-reveal,
.metro .simpleInput .input-control.password .btn-reveal,
.metro .simpleInput .input-control.file .btn-reveal,
.metro .simpleInput .input-control.email .btn-reveal,
.metro .simpleInput .input-control.tel .btn-reveal,
.metro .simpleInput .input-control.number .btn-reveal,
.metro .simpleInput .input-control.text .btn-date,
.metro .simpleInput .input-control.password .btn-date,
.metro .simpleInput .input-control.file .btn-date,
.metro .simpleInput .input-control.email .btn-date,
.metro .simpleInput .input-control.tel .btn-date,
.metro .simpleInput .input-control.number .btn-date,
.metro .simpleInput .input-control.text .btn-file,
.metro .simpleInput .input-control.password .btn-file,
.metro .simpleInput .input-control.file .btn-file,
.metro .simpleInput .input-control.email .btn-file,
.metro .simpleInput .input-control.tel .btn-file,
.metro .simpleInput .input-control.number .btn-file,
.metro .simpleInput .input-control.text .btn-search,
.metro .simpleInput .input-control.password .btn-search,
.metro .simpleInput .input-control.file .btn-search,
.metro .simpleInput .input-control.email .btn-search,
.metro .simpleInput .input-control.tel .btn-search,
.metro .simpleInput .input-control.number .btn-search {
    top: 24px;
}

.metro .large .input-control.text .btn-clear,
.metro .large .input-control.password .btn-clear,
.metro .large .input-control.file .btn-clear,
.metro .large .input-control.email .btn-clear,
.metro .large .input-control.tel .btn-clear,
.metro .large .input-control.number .btn-clear,
.metro .large .input-control.text .btn-reveal,
.metro .large .input-control.password .btn-reveal,
.metro .large .input-control.file .btn-reveal,
.metro .large .input-control.email .btn-reveal,
.metro .large .input-control.tel .btn-reveal,
.metro .large .input-control.number .btn-reveal,
.metro .large .input-control.text .btn-date,
.metro .large .input-control.password .btn-date,
.metro .large .input-control.file .btn-date,
.metro .large .input-control.email .btn-date,
.metro .large .input-control.tel .btn-date,
.metro .large .input-control.number .btn-date,
.metro .large .input-control.text .btn-file,
.metro .large .input-control.password .btn-file,
.metro .large .input-control.file .btn-file,
.metro .large .input-control.email .btn-file,
.metro .large .input-control.tel .btn-file,
.metro .large .input-control.number .btn-file,
.metro .large .input-control.text .btn-search,
.metro .large .input-control.password .btn-search,
.metro .large .input-control.file .btn-search,
.metro .large .input-control.email .btn-search,
.metro .large .input-control.tel .btn-search,
.metro .large .input-control.number .btn-search {
    top: 30px;
}

.metro .simpleInput .extraLarge .input-control.text input,
.metro .simpleInput .extraLarge .input-control.password input,
.metro .simpleInput .extraLarge .input-control.file input,
.metro .simpleInput .extraLarge .input-control.email input,
.metro .simpleInput .extraLarge .input-control.tel input,
.metro .simpleInput .extraLarge .input-control.number input,
.metro .simpleInput .extraLarge .input-control.select select,
.metro .simpleInput .extraLarge .input-control.textarea select,
.metro .simpleInput .extraLarge .input-control.select textarea,
.metro .simpleInput .extraLarge .input-control.textarea textarea {
    font-size: 3em;
    padding: 26px 10px 5px 2px;
}


.metro .extraLarge .input-control.text .btn-clear,
.metro .extraLarge .input-control.password .btn-clear,
.metro .extraLarge .input-control.file .btn-clear,
.metro .extraLarge .input-control.email .btn-clear,
.metro .extraLarge .input-control.tel .btn-clear,
.metro .extraLarge .input-control.number .btn-clear,
.metro .extraLarge .input-control.text .btn-reveal,
.metro .extraLarge .input-control.password .btn-reveal,
.metro .extraLarge .input-control.file .btn-reveal,
.metro .extraLarge .input-control.email .btn-reveal,
.metro .extraLarge .input-control.tel .btn-reveal,
.metro .extraLarge .input-control.number .btn-reveal,
.metro .extraLarge .input-control.text .btn-date,
.metro .extraLarge .input-control.password .btn-date,
.metro .extraLarge .input-control.file .btn-date,
.metro .extraLarge .input-control.email .btn-date,
.metro .extraLarge .input-control.tel .btn-date,
.metro .extraLarge .input-control.number .btn-date,
.metro .extraLarge .input-control.text .btn-file,
.metro .extraLarge .input-control.password .btn-file,
.metro .extraLarge .input-control.file .btn-file,
.metro .extraLarge .input-control.email .btn-file,
.metro .extraLarge .input-control.tel .btn-file,
.metro .extraLarge .input-control.number .btn-file,
.metro .extraLarge .input-control.text .btn-search,
.metro .extraLarge .input-control.password .btn-search,
.metro .extraLarge .input-control.file .btn-search,
.metro .extraLarge .input-control.email .btn-search,
.metro .extraLarge .input-control.tel .btn-search,
.metro .extraLarge .input-control.number .btn-search {
    top: 40px;
}


    .metro .no-margin .input-control {
        margin-top: 0;
        margin-bottom: 0;
    }

.metro .input-control.checkbox,
.metro .input-control.radio,
.metro .input-control.switch,
.metro .input-control.text,
.metro .input-control.password,
.metro .input-control.select,
.metro .input-control.textarea,
.metro .input-control.file {
    margin-bottom: 0;
    height: inherit;
}


.metro .input-control.checkbox .check, 
.metro .input-control.radio .check {
    float:left;
}
.metro .input-control.checkbox .check + span, 
.metro .input-control.radio .check + span {
    display:block;
    margin-left:27px;
}
.metro .input-control.checkbox .check + span {
    margin-top: 2px;
}
.metro .input-control.select select {
    padding:5px 7px 5px 7px;
}


.metro .input-control.text input,
.metro .input-control.password input,
.metro .input-control.file input,
.metro .input-control.email input,
.metro .input-control.tel input,
.metro .input-control.number input,
.metro .input-control.select select,
.metro .input-control.textarea select,
.metro .input-control.select textarea,
.metro .input-control.textarea textarea {
    border: 1px #9da3a6 solid;
    height: initial;
    border: 1px #9da3a6 solid;
    border-radius: 5px;
    /*padding: 22px 10px 15px;*/
	padding: 20px 25px 15px 10px;
    
    /*Safari on MacOS: Temporary fix for selectbox padding*/
    -webkit-appearance: textfield;
}

.metro .input-control.text input:focus, 
.metro .input-control.password input:focus, 
.metro .input-control.file input:focus, 
.metro .input-control.email input:focus, 
.metro .input-control.tel input:focus, 
.metro .input-control.number input:focus,
.metro .input-control.select select:focus,
.metro .input-control.textarea select:focus,
.metro .input-control.select textarea:focus,
.metro .input-control.textarea textarea:focus {
    border-color: #1ba1e2 !important;
    box-shadow: 0 0 10px #1ba1e2;
}

.metro .input-control.checkbox .check:focus,
.metro .input-control.radio .check:focus {
    outline: 1px solid #1ba1e2 !important;
    box-shadow: 0 0 10px #1ba1e2;
}

.metro .input-control.checkbox input[type="checkbox"]:focus ~ .check,
.metro .input-control.radio input[type="checkbox"]:focus ~ .check,
.metro .input-control.checkbox input[type="radio"]:focus ~ .check,
.metro .input-control.radio input[type="radio"]:focus ~ .check {
    outline-width: 0 !important;
    border: 1px solid #1ba1e2 !important;
    box-shadow: 0 0 10px #1ba1e2;
}

.metro .input-control.text input[aria-required=true]:not(:disabled), 
.metro .input-control.password input[aria-required=true]:not(:disabled), 
.metro .input-control.file input[aria-required=true]:not(:disabled), 
.metro .input-control.email input[aria-required=true]:not(:disabled), 
.metro .input-control.tel input[aria-required=true]:not(:disabled), 
.metro .input-control.number input[aria-required=true]:not(:disabled),
.metro .input-control.select select[aria-required=true]:not(:disabled),
.metro .input-control.textarea select[aria-required=true]:not(:disabled),
.metro .input-control.select textarea[aria-required=true]:not(:disabled),
.metro .input-control.textarea textarea[aria-required=true]:not(:disabled),
.metro .input-control.checkbox .check[aria-required=true]:not(:disabled),
.metro .input-control.radio .check[aria-required=true]:not(:disabled) {
    border: 1px solid #60a917;
}

.metro .input-control.checkbox input[type="checkbox"][aria-required=true]:not(:disabled) ~ .check,
.metro .input-control.radio input[type="checkbox"][aria-required=true]:not(:disabled) ~ .check,
.metro .input-control.checkbox input[type="radio"][aria-required=true]:not(:disabled) ~ .check,
.metro .input-control.radio input[type="radio"][aria-required=true]:not(:disabled) ~ .check {
    border: 1px solid #60a917;
}

.metro .input-control.radio.default-style input[type="radio"]:checked ~ .check:after {
    margin: 4px;
}

.metro .input-control.text .btn-clear,
.metro .input-control.password .btn-clear,
.metro .input-control.file .btn-clear,
.metro .input-control.email .btn-clear,
.metro .input-control.tel .btn-clear,
.metro .input-control.number .btn-clear,
.metro .input-control.text .btn-reveal,
.metro .input-control.password .btn-reveal,
.metro .input-control.file .btn-reveal,
.metro .input-control.email .btn-reveal,
.metro .input-control.tel .btn-reveal,
.metro .input-control.number .btn-reveal,
.metro .input-control.text .btn-date,
.metro .input-control.password .btn-date,
.metro .input-control.file .btn-date,
.metro .input-control.email .btn-date,
.metro .input-control.tel .btn-date,
.metro .input-control.number .btn-date,
.metro .input-control.text .btn-file,
.metro .input-control.password .btn-file,
.metro .input-control.file .btn-file,
.metro .input-control.email .btn-file,
.metro .input-control.tel .btn-file,
.metro .input-control.number .btn-file,
.metro .input-control.text .btn-search,
.metro .input-control.password .btn-search,
.metro .input-control.file .btn-search,
.metro .input-control.email .btn-search,
.metro .input-control.tel .btn-search,
.metro .input-control.number .btn-search {
    top: 18px;
}


.metro .radioButtonGroup {
    /*min-height: 38px;*/
    margin-bottom: 5px;
}
.metro .radioButtonGroup label {
    margin-right: 20px !important;
}
.metro .radioButtonGroup label.input-control:last-child {
    margin-right: 0 !important;
}

.metro label {
    /*font-size: 1em;
    margin: 5px 0 !important;*/
}

.metro .large label.input-control.checkbox {
    font-size: 11pt;
}
.metro .margin-bottom-5 label.input-control.checkbox {
    /*margin: 0;*/
    margin-bottom: 5px;
}

.metro .bold label.input-control.checkbox {
    font-weight: bold !important;
}

.metro .indented .input-control.checkbox {
    padding-left: 23px;
    text-indent: -23px;
}
    .metro .indented .input-control.checkbox input[type="checkbox"]:checked ~ .check:after,
    .metro .indented .input-control.radio input[type="checkbox"]:checked ~ .check:after,
    .metro .indented .input-control.checkbox input[type="radio"]:checked ~ .check:after,
    .metro .indented .input-control.radio input[type="radio"]:checked ~ .check:after
    {
        margin-left: 25px;
    }

    .metro .input-control.checkbox .check, 
    .metro .input-control.radio .check {
        margin-right: 0 !important;
        /*border: 1px #d9d9d9 solid;*/
    }

    .metro .input-control.checkbox:hover .check,
    .metro .input-control.radio:hover .check {
        border-color: #1ba1e2;
    }


.checkbox.circle.large .check::before {
    height: 10px;
    width: 20px;
    border-left: 3px solid #1d1d1d;
    border-bottom: 3px solid #1d1d1d;
    margin-left: -10px;
    margin-top: -6px;
}

.checkbox.circle .check {
    border-radius: 20px;
}

.checkbox.circle.large .check {
    width: 30px;
    height: 30px;
}

.small .checkbox .check, 
.small .checkbox .caption {
    font-size: 12px;
}


.metro .input-control.radio .helper:before {
    top: -1px;
}
.metro .input-control.radio input[type="radio"]:checked ~ .helper:after {
    margin-top: -5px;
}

.metro .input-control.textarea textarea {
    min-height: 70px;
}

.metro .input-control.radio {
    /*margin-bottom: 5px;*/
}

.metro .input-control.currency input {
    padding-right: 10px;
}
.metro .input-control.currency input:focus {
    padding-right: 30px;
}


.metrouicss .floatFill > div:first-of-type {
    float: right;
    margin-left: 10px;
}
.metrouicss .floatFill > div:last-of-type {
    overflow: hidden;
}
    .metrouicss .floatFill .input-control input {
        /*padding-top: 1px !important;*/
    }

.metrouicss .floatFillRight > div:first-of-type {
    float: left;
}
.metrouicss .floatFillRight > div:last-of-type {
    overflow: hidden;
}
    .metrouicss .floatFillRight .input-control input {
        /*padding-top: 1px !important;*/
    }

.metro .input-control input[type="text"] ~ .btn-menu { display: block !important; }


.metro .input-control.text .btn-add {
        display: block;
        position: absolute;
        top: 18px;
        z-index: 2;
        border: 0;
        right: 4px;
        width: 24px;
        height: 24px;
        min-height: 1px;
        min-width: 1px;
        padding: 0;
        margin: 0;
    }
    .metro .input-control.text .btn-add.dropdown-toggle {
        top: 21px;
    }
    .metro .input-control.text .icon-plus-2:before {
        color: #555555;
    }
    .metro .input-control.text .btn-add.dropdown-toggle:after  {
        content: none;
    }

/* UI Autocomplete
----------------------------------------------------------*/

.metro .ui-menu-item .highlight {
    font-weight: bold;
}
.metro .ui-autocomplete {
    z-index: 1020;
    border-width: 1px;
}

.metro ul.ui-autocomplete {
    padding-left: 0;
    width: 400px;
    max-height: 300px;
    overflow-y: auto;
}

.metro .ui-autocomplete-loading {
    background: url(/Content/themes/MetroUI/images/preloader-w8-cycle-black.gif) center center no-repeat;
    background-size: 25px;
}

.metro .ui-autocomplete a:hover {
    color: white !important;
    background-color:#66B3FF;
}

.metro .ui-autocomplete a.addButton {
    min-height: 20px;
    border-top: 2px solid #525252 !important;
    
}

.metro .ui-autocomplete .searchLabel {
    display: block;
    margin-bottom: 0 !important;
}

.metro .ui-autocomplete .searchDescription {
    display: block;
    font-size: 0.85em !important;
    color: #525252 !important;
    margin-top: 0 !important;
    margin-left: 8px !important;
}

.metro .ui-autocomplete.ui-menu .ui-menu-item {
	padding: 2px 2px 2px 5px;
}

.metro .ui-autocomplete .ui-controls {
    z-index: 1040;
    float: left;
    position: absolute;
    border: 1px solid black;
    width: 400px;
    background-color: white;
    margin-left: 5px;
    padding: 5px;
}


/* Grid
----------------------------------------------------------*/
.metro .grid {
    margin-bottom: 0;
}

.metro .grid .row {
    /*margin-top: 0;
    margin-bottom: 10px;*/
}

.metro .grid.highlight .row:hover {
    background-color: rgba(28, 183, 236, 0.1) !important;
}

.metro .grid.highlight .row .row:hover {
    background-color: inherit !important;
}


/* Panel
----------------------------------------------------------*/

.navview .navview-pane .panel {
    background-color: transparent;
    border-color: transparent;
}

.navview .navview-pane .panel .panel-title {
    font-weight: bold;
}
    .navview .navview-pane .panel .panel-title .dropdown-toggle:before {
        height: 0.75rem;
        width: 0.75rem;
    }

.navview .navview-pane .panel table.compact td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.navview .navview-pane input[type=text] {
    font-size: 14px;
}



.dialogAccordeon [data-role=panel].collapsed .panel-header:after {
    opacity: 0.4;
}

.dialogAccordeon [data-role=panel].collapsed .panel-header.filledContactContainer:after {
    opacity:1;
}

/* Frames
----------------------------------------------------------*/

.metro .tab-control {
    height: 100%;
    width: 100%;
}
    .metro .tab-control .frames .frame {
        height: 100%;
        width: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
        /*margin: 20px 10px 20px 20px;
        padding: 0 !important;*/
    }

    .metro .tab-control.modern > .frames {
        border-color: #71b1d1;
    }

    .metro .tab-control.dataTable .frames .frame,
    .metro .tab-control .frames .frame.dataTable {
        padding: 10px 0 0 0 !important;
    }

.metro .tab-control.modern > .tabs > li:first-child {
    margin-left: 0;
}

.metro .tab-control.modern > .tabs > li > a {
    border: none;
    padding: 5px 20px;
}

    .metro .tab-control.modern > .tabs > li {
        margin-left: 2px;
        border-top: 3px solid #eeeeee;
        border-left: 1px solid #eeeeee;
        border-right: 1px solid #eeeeee;
        border-bottom: 1px solid #71b1d1;
    }
    .metro .tab-control.modern > .tabs > li.active {
        border-color: #71b1d1;
        border-bottom-color: transparent;
    }

        .metro .tab-control.modern > .tabs > li:hover {
            border-color: #71b1d1;
            border-bottom-color: transparent;
            color: inherit;
        }
        .metro .tab-control.modern > .tabs > li.active:hover {
            border-color: #71b1d1;
            border-bottom-color: transparent;
        }

            .metro .tab-control.modern > .tabs > li:hover a {
                background-color: transparent;
                color: inherit;
            }

            .metro .tab-control.modern > .tabs > li.active a {
                /*border-top-color: #71b1d1;*/
            }

            .metro .tab-control.modern > .tabs > li.active:hover a {
                /*border-top-color: #71b1d1;*/
                border-bottom-color: transparent;
            }

.metro .tab-control.modern .tabs > li > a.hasChanges:after {
	content: "\e170";
	font-family: iconFont;
	margin-left: 5px;
	color: palevioletred;
}



    /* Infotab
    ----------------------------------------------------------*/
    .infoTabs .tab-control > li > a {
        min-height: 57px;
        padding: 5px 15px !important;
    }
    /* Subtab
    ----------------------------------------------------------*/
    .metro .tab-control.modern.subtab > .tabs > li {
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }
        .metro .tab-control.modern > .tabs > li.active {
            
        }

    .metro .tab-control.modern.subtab > .tabs {
        border-bottom: 1px solid #eeeeee;
    }

    .metro .tab-control.modern.subtab .tabs > li > a {
        border: 0px;
        border-bottom: 3px solid transparent;
        padding: 5px 10px 3px 10px;
        margin-right: 0px;
        margin-left: 0px;
        background-color: transparent;
    }

    .metro .tab-control.modern.subtab .tabs > li.active > a {
        border-bottom-color: #71b1d1;
        font-weight: bold;
    }

    .metro .tab-control.modern.subtab .tabs > li > a:hover {
        border-bottom-color: #71b1d1;
    }

    .metro .tab-control.modern.subtab .frames {
        border: 0;
    }

    .metro .tab-control.modern.subtab .frame {
        padding: 20px 0;
    }


/* Override Wizard
----------------------------------------------------------*/
.wizard .page-content {
    height: 100%;
}

.metro .wizard {
    height: 100%;
}

.metro .wizard .steps {
    height: calc(100% - 97px);
    margin: 0 0 10px 0;
    /*padding-right: 0;*/
    overflow: auto;
    padding-right: 20px;

        padding: 0;
    border: 0;

    }

.metro .wizard .steps .step {
    height: 100%;
    
    }

/* Override Stepper
----------------------------------------------------------*/
.metro .stepper {
    margin: 0;
}

/* Override fullcalender.css
----------------------------------------------------------*/

td.fc-today > span.fc-day-number {
    text-align: center;
    background-color: rgba(29, 29, 29, 0.3);
    color: #fff;
    min-width: 24px;
}

.fc-agendaWeek-view th.fc-day-header.fc-widget-header.fc-today {
    background-color: rgba(27, 161, 226, 0.5);
    color: #fff;
}
.fc-toolbar.fc-header-toolbar {
    margin-bottom: 0;
    padding: 10px 0;
}
.fc-toolbar h2 {
    /*font-size: 2.5rem;
    line-height: 3rem;
    margin-bottom: 0;*/
}

.fc table {
  background-color: transparent;
}

.fc th {
    
}

td.fc-day.fc-today {
    background-color: rgba(27, 161, 226, 0.5);
}


.fc hr {
    height: 0;
    margin: 0;
    padding: 0 0 2px; /* height is unreliable across browsers, so use padding */
    border-style: solid;
    border-width: 1px 0;
}

.fc-event-container > a:hover {
	filter: brightness(120%);
}

.fc-event {
    border: 1px solid #1ba1e2;
    color: #fff !important;
    padding: 5px 2px 5px 5px;
    background-color: #1ba1e2;
    font-size: 0.75rem;
    margin: 1px;
    border-radius: 0;
}

    .fc-event:hover {
        /*background-color: #a4c400;
        border-color: #a4c400;*/
        /*background-color: #7cc1de;
        border-color: #7cc1de;*/
		background-color: #1ba1e2;
		border-color: #1ba1e2;
        /*color: black;*/
    }


    .fc-event .mif-checkmark + .fc-content,
    .fc-event .mif-calendar + .fc-content {
        display: inline-block;
        width: calc(100% - 18px);
    }
    .fc-event .mif-checkmark + .mif-loop2 + .fc-content,
    .fc-event .mif-calendar + .mif-loop2 + .fc-content {
        display: inline-block;
        width: calc(100% - 36px);
    }

.fc-button .fc-icon {
    line-height: .5em;
    font-family: 'metro' !important;
}

.fc .fc-button-group > * {
	margin-right: 3px;
}
.fc-button:last-child {
    margin-right: 0;
}

.fc-state-default {
    background-color: #f5f5f5;
    border-color: transparent;
    background-image: none;
    text-shadow: none;
    box-shadow: none;
}

.fc-state-down,
.fc-state-active {
	background-color: #cccccc;
	background-image: none;
    border-color: #1ba1e2;
}

.fc-state-hover {
	background-color: #e6e6e6;
}

.fc-icon-left-triangle:after {
    content: "\e648";
    font-size: 150%;
    top: 20%;
}
.fc-icon-right-triangle:after {
    content: "\e649";
    font-size: 150%;
    top: 20%;
}

.fc-ltr .fc-axis {
    text-align: center;
}




/* Metro UI Fixes
----------------------------------------------------------*/
button:disabled, 
button.disabled {
    background-color: #eaeaea !important;
    color: #bebebe !important;
    cursor: not-allowed !important
}

.calendar.compact.more {
    width: 100%;
}
    .calendar.compact.more .day {
        width: calc(100%/ 7);
    }


.calendar.compact.more {
    width: 100%;
}
    .calendar.compact.more .day {
        width: calc(100%/ 7);
    }


.metro .dropdown-toggle {
    padding-right: 20px !important;
}

.metro .dropdown-toggle.button:after {
    content: '';
}

.metro .navigation-bar .element-menu > li > a.dropdown-toggle:after,
.metro .navbar .element-menu > li > a.dropdown-toggle:after {
  margin-left: -12px;
}


.metro .calendar.calendar-dropdown .text-center.disabled > a,
.metro .calendar.calendar-dropdown .text-center > a.disabled {
    opacity: 0.4;
    cursor: default;
}

.metro .calendar.noWidth {
    width: initial;
}

.metro.payments {

}
    .metro.payments .sidebar.alternate {
        background-color: #128023;
    }

    .metro.payments  a {
        color: #128023;
    }
    .metro.payments .sectionHeader {
        color: #128023;
    }
        .metro.payments .sectionHeader:after {
            background: #128023;
        }

    .metro.payments .sectionHeader a {
        border: 1px solid #128023;
    }

    .metro.payments .tab-control.modern .tabs > li.active a {
        border-top-color: #128023;
    }
    .metro.payments .sidebar.alternate li a:hover {
        background-color: #e9fcec;
        color: #50595b;
    }

    .metro.payments .tab-control.modern .tabs > li:hover a {
        border-top-color: #128023;
    }

    .metro.payments .tab-control.modern.subtab .tabs > li.active > a {
        border-bottom-color: #128023;
    }
    .metro.payments .tab-control.modern.subtab .tabs > li > a:hover {
        border-bottom-color: #128023;
    }


    .metro.payments .input-control.text input:focus,
    .metro.payments .input-control.password input:focus,
    .metro.payments .input-control.file input:focus,
    .metro.payments .input-control.email input:focus,
    .metro.payments .input-control.tel input:focus,
    .metro.payments .input-control.number input:focus,
    .metro.payments .input-control.select select:focus,
    .metro.payments .input-control.textarea select:focus,
    .metro.payments .input-control.select textarea:focus,
    .metro.payments .input-control.textarea textarea:focus {
        border-color: #128023 !important;
        box-shadow: 0 0 10px #128023;
    }

    .metro.payments .input-control.checkbox .check:focus,
    .metro.payments .input-control.radio .check:focus {
        outline: 1px solid #128023 !important;
        box-shadow: 0 0 10px #128023;
    }

    .metro.payments .input-control.checkbox input[type="checkbox"]:focus ~ .check,
    .metro.payments .input-control.radio input[type="checkbox"]:focus ~ .check,
    .metro.payments .input-control.checkbox input[type="radio"]:focus ~ .check,
    .metro.payments .input-control.radio input[type="radio"]:focus ~ .check {
        outline-width: 0 !important;
        border: 1px solid #128023 !important;
        box-shadow: 0 0 10px #128023;
    }

    .metro.payments .input-control.checkbox:hover .check,
    .metro.payments .input-control.radio:hover .check {
        border-color: #128023;
    }

        .metro.payments .simpleInput .input-control.text input:focus,
        .metro.payments .simpleInput .input-control.password input:focus,
        .metro.payments .simpleInput .input-control.file input:focus,
        .metro.payments .simpleInput .input-control.email input:focus,
        .metro.payments .simpleInput .input-control.tel input:focus,
        .metro.payments .simpleInput .input-control.number input:focus,
        .metro.payments .simpleInput .input-control.select select:focus,
        .metro.payments .simpleInput .input-control.textarea select:focus,
        .metro.payments .simpleInput .input-control.select textarea:focus,
        .metro.payments .simpleInput .input-control.textarea textarea:focus {
            box-shadow: none;
            border-bottom-color: #128023;
        }



/* Metro UI Fixes v4
----------------------------------------------------------*/
.row {
    margin-bottom: 10px;
}

.button-set {
    /*overflow: hidden;*/
}

.right .input input {
    text-align: right;
    padding-right: .5rem !important;
}

.hamburger .line {
    width: 30px;
    background-color: #000000;
    display: block;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    height: 3px;
    margin: 4px auto;
}

.hamburger.dark .line {
    background-color: #ffffff;
}

[class*=mif-] {
    line-height: 1;
}

.table .icon [class*=mif-] {
    line-height: initial;
    height: 20px;
    width: 20px;
    padding: 2px;
}


.input-material input {
    border: 0 !important;
    border-bottom: 2px #dfdfdf solid !important;
}

    .input-material input.valid {
        border-bottom-color: #60a917;
    }



/* Dialog
----------------------------------------------------------*/
.dialog {
    z-index: 1081;
}

    .dialog * + .dialog-content {
        margin-top: 0 !important;
    }

    .dialog.maximized {
        width: calc(100vw - 50px) !important;
        max-width: calc(100vw - 50px) !important;
        height: calc(100vh - 50px) !important;
        max-height: calc(100vh - 50px) !important;
        top: 25px !important;
        left: 25px !important;
    }
    .dialog.max-height {
        height: calc(100vh - 50px) !important;
        max-height: calc(100vh - 50px) !important;
        top: 25px !important;
    }
    .dialog.max-width {
        width: calc(100vw - 50px) !important;
        max-width: calc(100vw - 50px) !important;
        left: 25px !important;
    }
        .dialog.maximized [class*="max-width-"] {
            width: 100% !important;
        }

.dialog-caption,
.sidebar-caption {
    display: block;
    padding: 24px 24px 0;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

.sidebar-caption {
    padding: 12px 12px 0 !important;
}

    .dialog-caption .title,
    .sidebar-caption .title {
        display: inline-block;
        /*float: left;*/
        width: calc(100% - 50px);
        /*font-size: 1.325rem;*/
    }

    .dialog-caption .buttons,
    .sidebar-caption .buttons {
        display: inline-block;
        float: right;
        margin-top: -15px;
        margin-right: -15px;
        width: 50px;
    }

        .dialog-caption .buttons [class^=btn-],
        .sidebar-caption .buttons [class^=btn-] {
            float: right;
            color: black;
            opacity: .5;
            cursor: pointer;
            padding: 3px;
            margin-right: 5px;
            font-family: 'metro' !important;
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

            .dialog-caption .buttons [class^=btn-]:last-child,
            .sidebar-caption .buttons [class^=btn-]:last-child {
                margin-right: 0;
            }

            .dialog-caption .buttons [class^=btn-]:hover,
            .sidebar-caption .buttons [class^=btn-]:hover {
                opacity: 1;
                background-color: gray;
                color: white;
            }

        .dialog-caption .buttons .btn-max,
        .sidebar-caption .buttons .btn-max {
        }
            .dialog-caption .buttons .btn-max:before,
            .sidebar-caption .buttons .btn-max:before {
                content: "\e98b";
            }

        .dialog-caption .buttons .btn-close,
        .sidebar-caption .buttons .btn-close {
        }
            .dialog-caption .buttons .btn-close:before,
            .sidebar-caption .buttons .btn-close:before {
                content: "\ea0f";
            }

.dialog.maximized .dialog-caption .buttons .btn-max:before {
    content: "\e98c";
}

.dialog .dialog-content {
    padding-bottom: 0 !important;
}

    .dialog .dialog-content .button-set:last-of-type:not(.not-submit) {
        background-color: #e4e4e4;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 24px;
        padding-right: 24px;
        margin-top: 12px !important;
        margin-left: -24px;
        margin-right: -24px;
        margin-bottom: 0 !important;
    }

    .dialog .dialog-content.scrolled {
        padding-right: 14px;
    }
        .dialog .dialog-content.scrolled .button-set:not(.not-submit),
        .dialog .dialog-content .button-set.scrolled {
            margin-right: -14px !important;
        }
        .dialog .dialog-content.scrolled [data-pe-role=scroll] {
            padding-right: 10px;
        }

.dialog-actions {
    background-color: #e4e4e4;
    border-color: transparent;
}

@media (max-width: 1200px) {
    .dialog.maximized {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        height: calc(100vh - 85px) !important;
        max-height: calc(100vh - 85px) !important;
        top: 10px !important;
        left: 10px !important;
    }
}



.max-width-300 { width: 300px; }
.max-width-400 { width: 400px; }
.max-width-500 { width: 500px; }
.max-width-600 { width: 600px; }
.max-width-700 { width: 700px; }
.max-width-800 { width: 800px; }
.max-width-900 { width: 900px; }
.max-width-1000 { width: 1000px; }
.max-width-1100 { max-width: 1100px; }
.max-width-1200 { max-width: 1200px; }

.dialog .max-width-1100 {
	max-width: 100%;
	width: 1100px;
}

.dialog .max-width-1200 {
	max-width: 100%;
	width: 1200px;
}

@media (min-width:1000px) {
    .max-width-900 { min-width: 875px !important; }
}





.notify {
    min-width: 200px;
    background-color: #31b1e0;
    color: white;
}

.notify-container {
    z-index: 9999;
}

.navview .navview-menu::-webkit-scrollbar {
    display: initial !important;
}

.form-group label.radio:not(:last-of-type) {
    margin-right: 10px;
}

.required {
    border: 1px #60a917 solid !important;
}

.no-height .radio {
    height: initial;
}

.radio {
    height: initial !important;
    min-height: 36px;
}

/* Menu
----------------------------------------------------------*/
.v-menu li a .icon-right {
    display: block;
    position: absolute;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    font-size: 1.2rem;
    left: 0.5rem;
    top: 0.8rem;
    width: 1.2rem;
    height: 1.2rem;
    color: inherit;
}

.v-menu li a .icon-right {
    left: unset;
    right: 0.5rem;
}

.d-menu li.active > a,
.v-menu li.active > a {
    color: #ffffff !important;
}

.dropdown-toggle.fg-white::before {
    border-color: #ffffff;
}

.d-menu.gray {
	border: 1px solid #e4e4e4 !important;
}

	.d-menu.gray li {
		border-bottom: 1px solid #e4e4e4 !important;
		background-color: #f5f5f5;
	}

		.d-menu.gray li:hover {
			color: #ffffff !important;
			background-color: #1ba1e2 !important;
		}

	.d-menu.gray .menu-title {
		background-color: #8d9cab !important;
		color: #fff !important;
	}

/* override - input buttons
----------------------------------------------------------*/
.valid:focus,
.valid.focused {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.input.focused,
.valid:focus, 
.valid.focused {
    -webkit-box-shadow: 0 0 10px #1ba1e2;
    box-shadow: 0 0 10px #1ba1e2;
    border-color: #1ba1e2 !important;
}


select[required]:focus,
select[required].focused,
select[required].valid:focus,
select[required].valid.focused,
.valid.required:focus,
.valid.required.focused,
.required:focus,
.required.focused {
    -webkit-box-shadow: 0 0 10px #60a917 !important;
    box-shadow: 0 0 10px #60a917 !important;
    border-color: #60a917 !important;
}

/*input[type=text]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=datetime-local]:focus,
input[type=email]:focus,
input[type=file]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=search]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus,
input[type=file]:focus,*/
select:focus,
textarea:focus,
/*.file:focus,
.input:focus,
.textarea:focus,
.select:focus,
.tag-input:focus,
.spinner:focus,
input[type=text].focused,
input[type=password].focused,
input[type=tel].focused,
input[type=datetime-local].focused,
input[type=email].focused,
input[type=file].focused,
input[type=month].focused,
input[type=number].focused,
input[type=search].focused,
input[type=time].focused,
input[type=url].focused,
input[type=week].focused,
input[type=file].focused,*/
select.focused,
textarea.focused
/*.file.focused,
.input.focused,
.textarea.focused,
.select.focused,
.tag-input.focused,
.spinner.focused*/ {
    -webkit-box-shadow: 0 0 10px #1ba1e2;
    box-shadow: 0 0 10px #1ba1e2;
    border-color: #1ba1e2 !important;
}

input[type=text]:focus .input-clear-button,
input[type=password]:focus .input-clear-button,
input[type=tel]:focus .input-clear-button,
input[type=datetime-local]:focus .input-clear-button,
input[type=email]:focus .input-clear-button,
input[type=file]:focus .input-clear-button,
input[type=month]:focus .input-clear-button,
input[type=number]:focus .input-clear-button,
input[type=search]:focus .input-clear-button,
input[type=time]:focus .input-clear-button,
input[type=url]:focus .input-clear-button,
input[type=week]:focus .input-clear-button,
input[type=file]:focus .input-clear-button,
select:focus .input-clear-button,
textarea:focus .input-clear-button,
.file:focus .input-clear-button,
.input:focus .input-clear-button,
.textarea:focus .input-clear-button,
.select:focus .input-clear-button,
.tag-input:focus .input-clear-button,
.spinner:focus .input-clear-button,
input[type=text].focused .input-clear-button,
input[type=password].focused .input-clear-button,
input[type=tel].focused .input-clear-button,
input[type=datetime-local].focused .input-clear-button,
input[type=email].focused .input-clear-button,
input[type=file].focused .input-clear-button,
input[type=month].focused .input-clear-button,
input[type=number].focused .input-clear-button,
input[type=search].focused .input-clear-button,
input[type=time].focused .input-clear-button,
input[type=url].focused .input-clear-button,
input[type=week].focused .input-clear-button,
input[type=file].focused .input-clear-button,
select.focused .input-clear-button,
textarea.focused .input-clear-button,
.file.focused .input-clear-button,
.input.focused .input-clear-button,
.textarea.focused .input-clear-button,
.select.focused .input-clear-button,
.tag-input.focused .input-clear-button,
.spinner.focused .input-clear-button,
input[type=text]:hover .input-clear-button,
input[type=password]:hover .input-clear-button,
input[type=tel]:hover .input-clear-button,
input[type=datetime-local]:hover .input-clear-button,
input[type=email]:hover .input-clear-button,
input[type=file]:hover .input-clear-button,
input[type=month]:hover .input-clear-button,
input[type=number]:hover .input-clear-button,
input[type=search]:hover .input-clear-button,
input[type=time]:hover .input-clear-button,
input[type=url]:hover .input-clear-button,
input[type=week]:hover .input-clear-button,
input[type=file]:hover .input-clear-button,
select:hover .input-clear-button,
textarea:hover .input-clear-button,
.file:hover .input-clear-button,
.input:hover .input-clear-button,
.textarea:hover .input-clear-button,
.select:hover .input-clear-button,
.tag-input:hover .input-clear-button,
.spinner:hover .input-clear-button,
input[type=text]:focus .input-reveal-button,
input[type=password]:focus .input-reveal-button,
input[type=tel]:focus .input-reveal-button,
input[type=datetime-local]:focus .input-reveal-button,
input[type=email]:focus .input-reveal-button,
input[type=file]:focus .input-reveal-button,
input[type=month]:focus .input-reveal-button,
input[type=number]:focus .input-reveal-button,
input[type=search]:focus .input-reveal-button,
input[type=time]:focus .input-reveal-button,
input[type=url]:focus .input-reveal-button,
input[type=week]:focus .input-reveal-button,
input[type=file]:focus .input-reveal-button,
select:focus .input-reveal-button,
textarea:focus .input-reveal-button,
.file:focus .input-reveal-button,
.input:focus .input-reveal-button,
.textarea:focus .input-reveal-button,
.select:focus .input-reveal-button,
.tag-input:focus .input-reveal-button,
.spinner:focus .input-reveal-button,
input[type=text].focused .input-reveal-button,
input[type=password].focused .input-reveal-button,
input[type=tel].focused .input-reveal-button,
input[type=datetime-local].focused .input-reveal-button,
input[type=email].focused .input-reveal-button,
input[type=file].focused .input-reveal-button,
input[type=month].focused .input-reveal-button,
input[type=number].focused .input-reveal-button,
input[type=search].focused .input-reveal-button,
input[type=time].focused .input-reveal-button,
input[type=url].focused .input-reveal-button,
input[type=week].focused .input-reveal-button,
input[type=file].focused .input-reveal-button,
select.focused .input-reveal-button,
textarea.focused .input-reveal-button,
.file.focused .input-reveal-button,
.input.focused .input-reveal-button,
.textarea.focused .input-reveal-button,
.select.focused .input-reveal-button,
.tag-input.focused .input-reveal-button,
.spinner.focused .input-reveal-button,
input[type=text]:hover .input-reveal-button,
input[type=password]:hover .input-reveal-button,
input[type=tel]:hover .input-reveal-button,
input[type=datetime-local]:hover .input-reveal-button,
input[type=email]:hover .input-reveal-button,
input[type=file]:hover .input-reveal-button,
input[type=month]:hover .input-reveal-button,
input[type=number]:hover .input-reveal-button,
input[type=search]:hover .input-reveal-button,
input[type=time]:hover .input-reveal-button,
input[type=url]:hover .input-reveal-button,
input[type=week]:hover .input-reveal-button,
input[type=file]:hover .input-reveal-button,
select:hover .input-reveal-button,
textarea:hover .input-reveal-button,
.file:hover .input-reveal-button,
.input:hover .input-reveal-button,
.textarea:hover .input-reveal-button,
.select:hover .input-reveal-button,
.tag-input:hover .input-reveal-button,
.spinner:hover .input-reveal-button {
    display: block;
}

input[type=text] .input-clear-button,
input[type=password] .input-clear-button,
input[type=tel] .input-clear-button,
input[type=datetime-local] .input-clear-button,
input[type=email] .input-clear-button,
input[type=file] .input-clear-button,
input[type=month] .input-clear-button,
input[type=number] .input-clear-button,
input[type=search] .input-clear-button,
input[type=time] .input-clear-button,
input[type=url] .input-clear-button,
input[type=week] .input-clear-button,
input[type=file] .input-clear-button,
select .input-clear-button,
textarea .input-clear-button,
.file .input-clear-button,
.input .input-clear-button,
.textarea .input-clear-button,
.select .input-clear-button,
.tag-input .input-clear-button,
.spinner .input-clear-button,
input[type=text] .input-reveal-button,
input[type=password] .input-reveal-button,
input[type=tel] .input-reveal-button,
input[type=datetime-local] .input-reveal-button,
input[type=email] .input-reveal-button,
input[type=file] .input-reveal-button,
input[type=month] .input-reveal-button,
input[type=number] .input-reveal-button,
input[type=search] .input-reveal-button,
input[type=time] .input-reveal-button,
input[type=url] .input-reveal-button,
input[type=week] .input-reveal-button,
input[type=file] .input-reveal-button,
select .input-reveal-button,
textarea .input-reveal-button,
.file .input-reveal-button,
.input .input-reveal-button,
.textarea .input-reveal-button,
.select .input-reveal-button,
.tag-input .input-reveal-button,
.spinner .input-reveal-button {
    display: none;
}

.switch input[type="checkbox"]:checked ~ .check {
    background: #31b1e0;
    border-color: #31b1e0;
}

/* Accordian
----------------------------------------------------------*/
.accordion .frame .content {
    border: 3px solid #f8f8f8;
    border-top: 0;
    padding: 12px;
}

.app-bar > #rightNavHeader > .app-bar-container:last-of-type > .d-menu {
	max-height: calc(100vh - 72px);
	overflow-y: auto; /* Need to look at: hides sub menus */
}

/* Buttons
----------------------------------------------------------*/
a.button.alternate {
	background-color: #31b1e0;
	color: #fff !important;
	border: 1px solid #fff;
}

	a.button.alternate:hover {
		background-color: #2D94BA;
	}

.button.primary,
.command-button.primary,
.image-button.primary,
.shortcut.primary,
.tool-button.primary,
.split-button .split.primary,
tbody tr.primary,
tbody td.primary,
.tally.primary,
code.primary,
.notify.primary,
.info-button.primary,
.input .button.primary,
.select .button.primary,
.tag-input .button.primary,
.spinner .button.primary,
.toast.primary {
    outline-color: #89b0ff;
    background-color: #31b1e0;
    color: #ffffff;
}
    .button.primary:hover,
    .command-button.primary:hover,
    .image-button.primary:hover,
    .shortcut.primary:hover,
    .tool-button.primary:hover,
    .split-button .split.primary:hover,
    tbody tr.primary:hover,
    tbody td.primary:hover,
    .tally.primary:hover,
    code.primary:hover,
    .notify.primary:hover,
    .info-button.primary:hover,
    .input .button.primary:hover,
    .select .button.primary:hover,
    .tag-input .button.primary:hover,
    .spinner .button.primary:hover,
    .toast.primary:hover {
        color: black;
        background-color: #ebebeb !important;
        border-color: #bebebe;
    }

    .button.primary:active,
    .command-button.primary:active,
    .image-button.primary:active,
    .shortcut.primary:active,
    .tool-button.primary:active,
    .split-button .split.primary:active,
    tbody tr.primary:active,
    tbody td.primary:active,
    .tally.primary:active,
    code.primary:active,
    .notify.primary:active,
    .info-button.primary:active,
    .input .button.primary:active,
    .select .button.primary:active,
    .tag-input .button.primary:active,
    .spinner .button.primary:active,
    .toast.primary:active,
    .button.primary.focus,
    .command-button.primary.focus,
    .image-button.primary.focus,
    .shortcut.primary.focus,
    .tool-button.primary.focus,
    .split-button .split.primary.focus,
    tbody tr.primary.focus,
    tbody td.primary.focus,
    .tally.primary.focus,
    code.primary.focus,
    .notify.primary.focus,
    .info-button.primary.focus,
    .input .button.primary.focus,
    .select .button.primary.focus,
    .tag-input .button.primary.focus,
    .spinner .button.primary.focus,
    .toast.primary.focus,
    .button.primary:focus,
    .command-button.primary:focus,
    .image-button.primary:focus,
    .shortcut.primary:focus,
    .tool-button.primary:focus,
    .split-button .split.primary:focus,
    tbody tr.primary:focus,
    tbody td.primary:focus,
    .tally.primary:focus,
    code.primary:focus,
    .notify.primary:focus,
    .info-button.primary:focus,
    .input .button.primary:focus,
    .select .button.primary:focus,
    .tag-input .button.primary:focus,
    .spinner .button.primary:focus,
    .toast.primary:focus {
        -webkit-box-shadow: 0 0 0 3px rgba(0, 80, 239, 0.45);
        box-shadow: 0 0 0 3px rgba(0, 80, 239, 0.45);
    }


.button.secondary,
.command-button.secondary,
.image-button.secondary,
.shortcut.secondary,
.tool-button.secondary,
.split-button .split.secondary,
tbody tr.secondary,
tbody td.secondary,
.tally.secondary,
code.secondary,
.notify.secondary,
.info-button.secondary,
.input .button.secondary,
.select .button.secondary,
.tag-input .button.secondary,
.spinner .button.secondary,
.toast.secondary {
    color: black;
    background-color: #ebebeb !important;
    border-color: #bebebe !important;
    border: none;
    margin: 2px;
}
    .button.secondary:hover,
    .command-button.secondary:hover,
    .image-button.secondary:hover,
    .shortcut.secondary:hover,
    .tool-button.secondary:hover,
    .split-button .split.secondary:hover,
    tbody tr.secondary:hover,
    tbody td.secondary:hover,
    .tally.secondary:hover,
    code.secondary:hover,
    .notify.secondary:hover,
    .info-button.secondary:hover,
    .input .button.secondary:hover,
    .select .button.secondary:hover,
    .tag-input .button.secondary:hover,
    .spinner .button.secondary:hover,
    .toast.secondary:hover {
        outline-color: #89b0ff !important;
        background-color: #31b1e0 !important;
        color: #ffffff !important;
    }


/* override - input buttons
----------------------------------------------------------*/
input[type=text]:focus .input-clear-button,
input[type=password]:focus .input-clear-button,
input[type=tel]:focus .input-clear-button,
input[type=datetime-local]:focus .input-clear-button,
input[type=email]:focus .input-clear-button,
input[type=file]:focus .input-clear-button,
input[type=month]:focus .input-clear-button,
input[type=number]:focus .input-clear-button,
input[type=search]:focus .input-clear-button,
input[type=time]:focus .input-clear-button,
input[type=url]:focus .input-clear-button,
input[type=week]:focus .input-clear-button,
input[type=file]:focus .input-clear-button,
select:focus .input-clear-button,
textarea:focus .input-clear-button,
.file:focus .input-clear-button,
.input:focus .input-clear-button,
.textarea:focus .input-clear-button,
.select:focus .input-clear-button,
.tag-input:focus .input-clear-button,
.spinner:focus .input-clear-button,
input[type=text].focused .input-clear-button,
input[type=password].focused .input-clear-button,
input[type=tel].focused .input-clear-button,
input[type=datetime-local].focused .input-clear-button,
input[type=email].focused .input-clear-button,
input[type=file].focused .input-clear-button,
input[type=month].focused .input-clear-button,
input[type=number].focused .input-clear-button,
input[type=search].focused .input-clear-button,
input[type=time].focused .input-clear-button,
input[type=url].focused .input-clear-button,
input[type=week].focused .input-clear-button,
input[type=file].focused .input-clear-button,
select.focused .input-clear-button,
textarea.focused .input-clear-button,
.file.focused .input-clear-button,
.input.focused .input-clear-button,
.textarea.focused .input-clear-button,
.select.focused .input-clear-button,
.tag-input.focused .input-clear-button,
.spinner.focused .input-clear-button,
input[type=text]:hover .input-clear-button,
input[type=password]:hover .input-clear-button,
input[type=tel]:hover .input-clear-button,
input[type=datetime-local]:hover .input-clear-button,
input[type=email]:hover .input-clear-button,
input[type=file]:hover .input-clear-button,
input[type=month]:hover .input-clear-button,
input[type=number]:hover .input-clear-button,
input[type=search]:hover .input-clear-button,
input[type=time]:hover .input-clear-button,
input[type=url]:hover .input-clear-button,
input[type=week]:hover .input-clear-button,
input[type=file]:hover .input-clear-button,
select:hover .input-clear-button,
textarea:hover .input-clear-button,
.file:hover .input-clear-button,
.input:hover .input-clear-button,
.textarea:hover .input-clear-button,
.select:hover .input-clear-button,
.tag-input:hover .input-clear-button,
.spinner:hover .input-clear-button,
input[type=text]:focus .input-reveal-button,
input[type=password]:focus .input-reveal-button,
input[type=tel]:focus .input-reveal-button,
input[type=datetime-local]:focus .input-reveal-button,
input[type=email]:focus .input-reveal-button,
input[type=file]:focus .input-reveal-button,
input[type=month]:focus .input-reveal-button,
input[type=number]:focus .input-reveal-button,
input[type=search]:focus .input-reveal-button,
input[type=time]:focus .input-reveal-button,
input[type=url]:focus .input-reveal-button,
input[type=week]:focus .input-reveal-button,
input[type=file]:focus .input-reveal-button,
select:focus .input-reveal-button,
textarea:focus .input-reveal-button,
.file:focus .input-reveal-button,
.input:focus .input-reveal-button,
.textarea:focus .input-reveal-button,
.select:focus .input-reveal-button,
.tag-input:focus .input-reveal-button,
.spinner:focus .input-reveal-button,
input[type=text].focused .input-reveal-button,
input[type=password].focused .input-reveal-button,
input[type=tel].focused .input-reveal-button,
input[type=datetime-local].focused .input-reveal-button,
input[type=email].focused .input-reveal-button,
input[type=file].focused .input-reveal-button,
input[type=month].focused .input-reveal-button,
input[type=number].focused .input-reveal-button,
input[type=search].focused .input-reveal-button,
input[type=time].focused .input-reveal-button,
input[type=url].focused .input-reveal-button,
input[type=week].focused .input-reveal-button,
input[type=file].focused .input-reveal-button,
select.focused .input-reveal-button,
textarea.focused .input-reveal-button,
.file.focused .input-reveal-button,
.input.focused .input-reveal-button,
.textarea.focused .input-reveal-button,
.select.focused .input-reveal-button,
.tag-input.focused .input-reveal-button,
.spinner.focused .input-reveal-button,
input[type=text]:hover .input-reveal-button,
input[type=password]:hover .input-reveal-button,
input[type=tel]:hover .input-reveal-button,
input[type=datetime-local]:hover .input-reveal-button,
input[type=email]:hover .input-reveal-button,
input[type=file]:hover .input-reveal-button,
input[type=month]:hover .input-reveal-button,
input[type=number]:hover .input-reveal-button,
input[type=search]:hover .input-reveal-button,
input[type=time]:hover .input-reveal-button,
input[type=url]:hover .input-reveal-button,
input[type=week]:hover .input-reveal-button,
input[type=file]:hover .input-reveal-button,
select:hover .input-reveal-button,
textarea:hover .input-reveal-button,
.file:hover .input-reveal-button,
.input:hover .input-reveal-button,
.textarea:hover .input-reveal-button,
.select:hover .input-reveal-button,
.tag-input:hover .input-reveal-button,
.spinner:hover .input-reveal-button {
    display: block;
}

input[type=text] .input-clear-button,
input[type=password] .input-clear-button,
input[type=tel] .input-clear-button,
input[type=datetime-local] .input-clear-button,
input[type=email] .input-clear-button,
input[type=file] .input-clear-button,
input[type=month] .input-clear-button,
input[type=number] .input-clear-button,
input[type=search] .input-clear-button,
input[type=time] .input-clear-button,
input[type=url] .input-clear-button,
input[type=week] .input-clear-button,
input[type=file] .input-clear-button,
select .input-clear-button,
textarea .input-clear-button,
.file .input-clear-button,
.input .input-clear-button,
.textarea .input-clear-button,
.select .input-clear-button,
.tag-input .input-clear-button,
.spinner .input-clear-button,
input[type=text] .input-reveal-button,
input[type=password] .input-reveal-button,
input[type=tel] .input-reveal-button,
input[type=datetime-local] .input-reveal-button,
input[type=email] .input-reveal-button,
input[type=file] .input-reveal-button,
input[type=month] .input-reveal-button,
input[type=number] .input-reveal-button,
input[type=search] .input-reveal-button,
input[type=time] .input-reveal-button,
input[type=url] .input-reveal-button,
input[type=week] .input-reveal-button,
input[type=file] .input-reveal-button,
select .input-reveal-button,
textarea .input-reveal-button,
.file .input-reveal-button,
.input .input-reveal-button,
.textarea .input-reveal-button,
.select .input-reveal-button,
.tag-input .input-reveal-button,
.spinner .input-reveal-button {
    display: none;
}

/*input[aria-required=true]:not(:disabled),
input[required]:not(:disabled) {
    border: 1px solid #60a917 !important;
}*/

.metro .input-control.text input[aria-required=true]:not(:disabled),
.metro .input-control.password input[aria-required=true]:not(:disabled),
.metro .input-control.file input[aria-required=true]:not(:disabled),
.metro .input-control.email input[aria-required=true]:not(:disabled),
.metro .input-control.tel input[aria-required=true]:not(:disabled),
.metro .input-control.number input[aria-required=true]:not(:disabled),
.metro .input-control.select select[aria-required=true]:not(:disabled),
.metro .input-control.textarea select[aria-required=true]:not(:disabled),
.metro .input-control.select textarea[aria-required=true]:not(:disabled),
.metro .input-control.textarea textarea[aria-required=true]:not(:disabled),
.metro .input-control.checkbox .check[aria-required=true]:not(:disabled),
.metro .input-control.radio .check[aria-required=true]:not(:disabled) {
    border: 1px solid #60a917;
}

.metro .input-control.checkbox input[type="checkbox"][aria-required=true]:not(:disabled) ~ .check,
.metro .input-control.radio input[type="checkbox"][aria-required=true]:not(:disabled) ~ .check,
.metro .input-control.checkbox input[type="radio"][aria-required=true]:not(:disabled) ~ .check,
.metro .input-control.radio input[type="radio"][aria-required=true]:not(:disabled) ~ .check {
    border: 1px solid #60a917;
}


@media screen and (max-width: 576px) {
    .dialog {
        max-width: calc(100vw - 0px);
        max-height: calc(100vh - 0px);
    }

        .dialog.maximized {
            width: calc(100vw - 0px) !important;
            height: calc(100vh - 0px) !important;
            top: 0 !important;
            left: 0 !important;
        }

        .dialog [class*="max-width-"] {
            width: 100%;
        }
}



@media screen and (max-width: 768px) {
    .dialog {
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }

        .dialog.maximized {
            width: calc(100vw - 20px) !important;
            height: calc(100vh - 20px) !important;
            top: 10px !important;
            left: 10px !important;
        }

        .dialog [class*="max-width-"] {
            width: 100%;
        }
}


@media screen and (max-width: 650px) {
    .dialog .max-width-500 {
        width: 100%;
    }
}

@media screen and (max-width: 750px) {
    .dialog .max-width-600 {
        width: 100%;
    }
}

@media screen and (max-width: 850px) {
    .dialog .max-width-700 {
        width: 100%;
    }
}

@media screen and (max-width: 950px) {
    .dialog .max-width-800 {
        width: 100%;
    }
}

@media screen and (max-width: 1050px) {
    .dialog .max-width-900 {
        width: 100%;
    }
}

@media screen and (max-width: 1150px) {
	.dialog .max-width-1000 {
		width: 100%;
	}
}

@media screen and (max-width: 1250px) {
	.dialog .max-width-1100 {
		width: 100%;
	}
}

@media screen and (max-width: 1350px) {
	.dialog .max-width-1200 {
		width: 100%;
	}
}



@media screen and (min-width: 1200px) {
    .navview.side-filters.expanded-xl .navview-content {
        margin-left: 345px;
    }
}



@media screen and (max-width: 550px) {
    .max-width-500 {
        width: 100%;
    }
}


/* Inputs
----------------------------------------------------------*/
.form-group .checkbox {
    height: initial;
    min-height: 36px;
}

.checkbox-group .checkbox {
    min-height: initial !important;
}
.checkbox-group .switch,
.checkbox-group .caption {
    line-height: 30px !important;
}

table thead th .form-group .checkbox {
    min-height: 20px;
    width: 26px;
}




/* NavView
----------------------------------------------------------*/
@media screen and (min-width: 992px) {
    .navview.side-filters .navview-pane {
        width: 345px;
    }

    .navview.side-filters.navview.expand > .navview-pane {
        width: 345px !important;
    }

    .navview.side-filters.expanded-lg .navview-content {
        margin-left: 345px;
    }
}

.navview .navview-pane {
    overflow: auto;
    height: 100%;
    background-color: #f4f4f4;
    z-index: 3;
}

.navview.compacted > .navview-pane .hideOnCollapse {
	display: none !important;
}

.navview.compacted > .navview-pane .showOnCollapse {
    display: block;
}

.navview .navview-pane .navview-menu li .icon + .caption {
    width: calc(100% - 55px);
    text-overflow: ellipsis;
    overflow: hidden;
}

.navview.side-filters .navview-pane {
    overflow-y: auto;
    overflow-x: hidden;
}

.navview .navview-menu .active-container li.active {
    background-color: #cecece;
}



.navview.alternate > .navview-pane .pull-button {
    color: #fff;
}

.navview.alternate > .navview-pane .t-menu {
    color: #fff;
    background-color: transparent;
}

.navview.alternate .navview-menu li a {
    /*padding: 12px 10px 12px 10px;*/
    font-size: 0.6875rem;
    font-family: "Open Sans Bold",Verdana,Arial,Helvetica,sans-serif !important;
    line-height: initial;
    height: 36px;
}

.navview .navview-menu .icon {
    /*line-height: 40px;*/
    height: initial;
}

.navview.alternate .navview-pane .navview-menu li.active,
.navview.alternate .navview-pane .navview-menu li.active-container {
    background-color: #fff;
    color: black;
}

.navview.alternate .navview-menu li.active-container .navview-menu li.active a {
    background-color: #cecece;
}



.navview.alternate .navview-menu li a:focus {
    border-color: transparent;
}

.navview.alternate .navview-menu li a:hover {
    color: black;
}

.navview.alternate > .navview-pane {
    background-color: #31b1e0 !important;
    color: #fff;
    text-transform: uppercase;
}

.navview.alternate.gray .navview-pane {
    background-color: #e5e5e5 !important;
    color: #000000;
}

.navview.alternate .navview-menu .dropdown-toggle::after {
    border-color: transparent transparent #fff transparent;
    border-width: 0 0 10px 10px;
    bottom: 8px;
}


.navview.alternate li small.item-subcaption {
    font-size: .5rem;
    display: block;
}

.navview .navview-content .max-width {
    max-width: 1172px;
}

.navview.compacted .navview-content .max-width {
    max-width: 1404px;
}

.navview .suggest-box .new-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 12px;
}
.navview .suggest-box .item-filters {
	display: block;
}

.navview.expand > .navview-pane .suggest-box .new-item {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
}
.navview.expand > .navview-pane .suggest-box .item-filters {
	display: block !important;
}

.navview.compacted > .navview-pane .suggest-box .item-filters,
.navview.compacted > .navview-pane .suggest-box .new-item {
	display: none !important;
}

@media screen and (min-width: 0) {
	.navview.compact-fs .navview-pane .suggest-box .item-filters,
	.navview.compact-fs .navview-pane .suggest-box .new-item {
		display: none;
	}
	.navview.expanded-fs .navview-pane .suggest-box .new-item {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}
	.navview.expanded-fs .navview-pane .suggest-box .item-filters {
		display: block;
	}
}

@media screen and (min-width: 576px) {
	.navview.compact-sm .navview-pane .suggest-box .item-filters,
	.navview.compact-sm .navview-pane .suggest-box .new-item {
		display: none;
	}
	.navview.expanded-sm .navview-pane .suggest-box .new-item {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}
	.navview.expanded-sm .navview-pane .suggest-box .item-filters {
		display: block;
	}
}

@media screen and (min-width: 768px) {
	.navview.compact-md .navview-pane .suggest-box .item-filters,
	.navview.compact-md .navview-pane .suggest-box .new-item {
		display: none;
	}
	.navview.expanded-md .navview-pane .suggest-box .item-filters {
		display: block;
	}
	.navview.expanded-md .navview-pane .suggest-box .new-item {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}
}

@media screen and (min-width: 992px) {
	.navview.compact-lg .navview-pane .suggest-box .item-filters,
	.navview.compact-lg .navview-pane .suggest-box .new-item {
		display: none;
	}
	.navview.expanded-lg .navview-pane .suggest-box .new-item {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}
	.navview.expanded-lg .navview-pane .suggest-box .item-filters {
		display: block;
	}
}

@media screen and (min-width: 1200px) {
	.navview.compact-xl .navview-pane .suggest-box .item-filters,
	.navview.compact-xl .navview-pane .suggest-box .new-item {
		display: none;
	}
	.navview.expanded-xl .navview-pane .suggest-box .new-item {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}
	.navview.expanded-xl .navview-pane .suggest-box .item-filters {
		display: block;
	}
}

@media screen and (min-width: 1452px) {
	.navview.compact-xxl .navview-pane .suggest-box .item-filters,
	.navview.compact-xxl .navview-pane .suggest-box .new-item {
		display: none;
	}
	.navview.expanded-xxl .navview-pane .suggest-box .new-item {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}
	.navview.expanded-xxl .navview-pane .suggest-box .item-filters {
		display: block;
	}
}

.navview .newItem-holder {
	width: 48px;
	height: 40px;
	background-color: #31b1e0;
	color: #eee;
	border: 1px solid #eee;
	outline: none;
	cursor: pointer;
	display: none;
}

	.navview .newItem-holder:hover {
		background-color: #499DC9;
	}

.navview.expand > .navview-pane .newItem-holder {
	display: none !important;
}

.navview.compacted > .navview-pane .newItem-holder {
	display: block !important;
}

@media screen and (min-width: 0) {
	.navview.compact-fs .navview-pane .newItem-holder {
		display: block;
	}
	.navview.expanded-fs .navview-pane .newItem-holder {
		display: none;
	}
}

@media screen and (min-width: 576px) {
	.navview.compact-sm .navview-pane .newItem-holder {
		display: block;
	}
	.navview.expanded-sm .navview-pane .newItem-holder {
		display: none;
	}
}

@media screen and (min-width: 768px) {
	.navview.compact-md .navview-pane .newItem-holder {
		display: block;
	}
	.navview.expanded-md .navview-pane .newItem-holder {
		display: none;
	}
}

@media screen and (min-width: 992px) {
	.navview.compact-lg .navview-pane .newItem-holder {
		display: block;
	}
	.navview.expanded-lg .navview-pane .newItem-holder {
		display: none;
	}
}

@media screen and (min-width: 1200px) {
	.navview.compact-xl .navview-pane .newItem-holder {
		display: block;
	}
	.navview.expanded-xl .navview-pane .newItem-holder {
		display: none;
	}
}

@media screen and (min-width: 1452px) {
	.navview.compact-xxl .navview-pane .newItem-holder {
		display: block;
	}
	.navview.expanded-xxl .navview-pane .newItem-holder {
		display: none;
	}
}

.navview .navview-pane .panel {
    background-color: transparent;
    border-color: transparent;
}

    .navview .navview-pane .panel .panel-title {
        font-weight: bold;
    }
        .navview .navview-pane .panel .panel-title .dropdown-toggle:before {
            height: 0.75rem;
            width: 0.75rem;
        }

    .navview .navview-pane .panel table.compact td {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }


/*----------------------------------------------------------
 Custom Classes for Different Screen Sizes
----------------------------------------------------------*/
.align-left {
	text-align: left;
}

.align-right {
	text-align: right;
}

/* Extra-Small Screen Size
----------------------------------------------*/
@media screen and (min-width: 0) {
	.align-left-xs {
		text-align: left;
	}

	.align-right-xs {
		text-align: right;
	}
}

/* Small Screen Size
----------------------------------------------*/
@media screen and (min-width: 576px) {
	.align-left-sm {
		text-align: left;
	}

	.align-right-sm {
		text-align: right;
	}
}

/* Medium Screen Size
----------------------------------------------*/
@media screen and (min-width: 768px) {
	.align-left-md {
		text-align: left;
	}

	.align-right-md {
		text-align: right;
	}
}

/* Large Screen Size
----------------------------------------------*/
@media screen and (min-width: 992px) {
	.align-left-lg {
		text-align: left;
	}

	.align-right-lg {
		text-align: right;
	}
}

/* Extra-Large Screen Size
----------------------------------------------*/
@media screen and (min-width: 1200px) {
	.align-left-xl {
		text-align: left;
	}

	.align-right-xl {
		text-align: right;
	}
}

/* Double Extra-Large Screen Size
----------------------------------------------*/
@media screen and (min-width: 1452px) {
	.align-left-xxl {
		text-align: left;
	}

	.align-right-xxl {
		text-align: right;
	}
}

/*----------------------------------------------------------
 End of Custom Classes for Different Screen Sizes
----------------------------------------------------------*/


/* For IE
-----------------------*/
.cell {
	flex-grow: 1;
}


/* Billing Report
-----------------------*/
.navview.report.expand > .navview-pane {
	width: 480px !important;
}

	.navview.report.expand > .navview-pane .hideOnCollapse,
	div.navview.expand > nav.navview-pane div.hideOnCollapse {
		display: block !important;
	}
div.navview.expand > nav.navview-pane .hideOnCollapse.inline-title {
	display: inline-flex !important;
}

@media screen and (min-width: 0) {
	.navview.report.expanded-fs .navview-pane {
		width: 480px;
	}

	.navview.report.expanded-fs .navview-content {
		margin-left: 480px;
	}

	.navview.report .navview-pane .hideOnCollapse,
	div.navview nav.navview-pane div.hideOnCollapse,
	div.navview nav.navview-pane .hideOnCollapse.inline-title {
		display: none;
	}
}

@media screen and (min-width: 576px) {
	.navview.report.expanded-sm .navview-pane {
		width: 480px;
	}

	.navview.report.expanded-sm .navview-content {
		margin-left: 480px;
	}
}

@media screen and (min-width: 768px) {
	.navview.report.expanded-md .navview-pane {
		width: 480px;
	}

	.navview.report.expanded-md .navview-content {
		margin-left: 480px;
	}
}

@media screen and (min-width: 992px) {
	.navview.report.expanded-lg .navview-pane {
		width: 480px;
	}

	.navview.report.expanded-lg .navview-content {
		margin-left: 480px;
	}

	.navview.report .navview-pane .hideOnCollapse, 
	div.navview nav.navview-pane div.hideOnCollapse {
		display: block;
	}
	div.navview nav.navview-pane .hideOnCollapse.inline-title {
		display: inline-flex;
	}
}

@media screen and (min-width: 1200px) {
	.navview.report.expanded-xl .navview-pane {
		width: 480px;
	}

	.navview.report.expanded-xl .navview-content {
		margin-left: 480px;
	}
}

@media screen and (min-width: 1452px) {
	.navview.report.expanded-xxl .navview-pane {
		width: 480px;
	}

	.navview.report.expanded-xxl .navview-content {
		margin-left: 480px;
	}
}

/* Toasts
-----------------------*/
.toast {
	z-index: 1082;
}

.toast.show-middle {
	bottom: 50vh;
}

.toast.show-top {
	top: 1.25rem;
	bottom: initial;
}


/* Treeview
-----------------------*/
.treeview li .caption {
    padding: 3px 0;
    overflow: hidden;
    white-space: nowrap !important;
    text-overflow: ellipsis;
}

#filtersTree.treeview li .caption {
    width: 150px;
}

.treeview li .icon {
    font-size: .8rem;
    line-height: 20px;
}


/* CourtNotices
-----------------------*/
.courtnotices .badge {
    margin-left: -7px;
    position: initial;
}

.courtnotices .unread * {
    font-weight: bold !important;
}

.courtnotices .obsolete * {
    color: red !important;
}

.courtnotices table.table tbody tr.selected-row td {
    border: 0px !important;
}

.courtnotices .pageFooter {
    margin: 0 -12px;
    min-height: 46px;
    height: auto;
    overflow: hidden;
}


/* License
-----------------------*/
.wizardContainer .sticky-header {
    background-color: #e4e4e4 !important;
    padding: 10px 20px;
}

.wizardContainer {
    padding: 20px 40px;
}

    .wizardContainer .wizardStep {
        /*border: 1px solid yellow;*/
        padding: 20px 10px;
    }

.licenseDetails {
}

.selected {
    margin: 4px;
}

.bg-lightGray .license {
    padding: 20px !important;
    background-color: white;
    margin-bottom: 10px;
}

    .bg-lightGray .license:not(:last-of-type) {
        margin-bottom: 10px;
    }

.bg-lightGray .coreLicense .license:last-of-type {
    margin-bottom: 10px;
}

.bg-lightGray .coreLicense .license {
    /*background-color: white;
            margin-bottom: 0;*/
}

.bg-lightGray .licenses [data-pe-buttongroup="coreLicense"] button {
    background-color: white;
}



.licenses .wizardContent #licenseWelcomeLogo {
	width: 200px;
	vertical-align: top;
	height: 65px;
	background-image: url(/Images/JubileeLogo.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.licenses .wizardContent #licenseWelcomeLogo {
	width: 200px;
	vertical-align: top;
	height: 65px;
	background-image: url(/Images/JubileeLogo.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.licenses [data-pe-buttongroup] button .titleLogo {
    background-position-y: -30px;
    height: 35px;
    width: 160px;
    background-image: url("/Content/themes/ProEngine/Images/nameandlogo_150_black.png");
}

.licenses [data-pe-buttongroup] button.active .titleLogo,
.licenses [data-pe-buttongroup] button:hover .titleLogo {
    background-image: url("/Content/themes/ProEngine/Images/nameandlogo_150_white.png");
}

.licenses [data-pe-buttongroup] button .title {
    font-size: 3rem;
    line-height: 3rem;
}

.licenses [data-pe-buttongroup] button .caption {
}

.licenses [data-pe-buttongroup="coreLicense"] button {
    height: 200px;
    line-height: initial;
    padding: 10px 20px;
    margin: 5px;
}

    .licenses [data-pe-buttongroup="coreLicense"] button.active,
    .licenses [data-pe-buttongroup="coreLicense"] button:hover,
    .licenses [data-pe-buttongroup="coreLicense"] button.active .fg-darkGray,
    .licenses [data-pe-buttongroup="coreLicense"] button:hover .fg-darkGray,
    .licenses [data-pe-buttongroup="coreLicense"] button.active .fg-cyan,
    .licenses [data-pe-buttongroup="coreLicense"] button:hover .fg-cyan {
        color: white !important;
    }

.licenses [data-pe-buttongroup="coreLicense"].button-group button.active,
.licenses [data-pe-buttongroup="coreLicense"].button-group button:hover {
    /*box-shadow: none !important;
        color: black !important;
        background-color: white !important;*/
}

.licenses [data-pe-buttongroup="coreLicense"] button {
    /*box-shadow: 0 2px 6px rgba(0,0,0,.3), 0 3px 8px rgba(0,0,0,.2);*/
    /*border-right: 2px solid white;*/
}

.licenses [data-pe-buttongroup="coreLicense"] > div:last-of-type button {
    /*box-shadow: 0 2px 6px rgba(0,0,0,.3), 0 3px 8px rgba(0,0,0,.2);*/
    /*border-right: 0px;*/
}




.bg-lightGray .license {
    padding: 10px;
}

    .bg-lightGray .license.coreLicense {
        /*margin: 4px;*/
    }

    .bg-lightGray .license.coreLicense {
        /*box-shadow: 0 2px 6px rgba(0,0,0,.3), 0 3px 8px rgba(0,0,0,.2);*/
    }

.license:not(:last-of-type) {
    margin-bottom: 50px;
}

.license ul {
    margin: 0 0 0 5px;
}

    .license ul li {
        list-style-position: outside;
        margin-left: 1em;
    }

.license .productId {
    cursor: pointer;
}

.license .productType {
	cursor: pointer;
	height: 100%;
}

	.license .productType.active .title,
	.license .productType:hover .title {
		color: #ffffff;
		background-color: #1ba1e2 !important;
	}

	.license .productType .priceGroup .productId,
	.license .productType .priceGroup .productId {
		border: 2px solid #ebebeb;
	}

	.license .productType.active .priceGroup .productId,
	.license .productType:hover .priceGroup .productId {
		background-color: white;
		border-color: #1ba1e2;
	}

		.license .productType.active .priceGroup .productId.active,
		.license .productType.active .priceGroup .productId:hover,
		.license .productType:hover .priceGroup .productId.active,
		.license .productType .priceGroup .productId:hover {
			color: #ffffff;
			background-color: #1ba1e2 !important;
		}

	.license .productType:not(.active):not(:hover) .priceGroup .productId:not(.active) {
		background-color: #fff;
	}

.license .selectable .productType {
    margin: 4px;
    -webkit-box-shadow: 0 0 0 4px #ebebeb !important;
    box-shadow: 0 0 0 4px #ebebeb !important;
}

.license .selectable .productTypeContent {
    padding: 8px;
}

.license .selectable .productType.active,
.license .selectable .productType:hover {
    -webkit-box-shadow: 0 0 0 4px #1ba1e2 !important;
    box-shadow: 0 0 0 4px #1ba1e2 !important;
}

    .license .selectable .productType.active::after,
    .coreLicense.selectable .button-group > button.active::after {
        position: absolute;
        display: block;
        border-top: 28px solid #5ebdec;
        border-left: 28px solid transparent;
        right: -1px;
        content: "";
        top: -1px;
        z-index: 100;
    }

    .license .selectable .productType.active::before,
    .coreLicense.selectable .button-group > button.active::before {
        position: absolute;
        display: block;
        content: "";
        background-color: transparent;
        border-color: #ffffff !important;
        border-left: 2px solid;
        border-bottom: 2px solid;
        height: 0.325rem;
        width: 0.5rem;
        right: 0.25rem;
        top: 0.25rem;
        z-index: 102;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

/*.license [data-pe-buttongroup="LicenseStatus"] .button.active[value=Active],
    .license [data-pe-buttongroup="LicenseStatus"] .button[value=Active]:hover,
    .license [data-pe-buttongroup="LicenseStatus"] .button.active[value=Trial],
    .license [data-pe-buttongroup="LicenseStatus"] .button[value=Trial]:hover {
        background-color: #3a660e !important;
    }*/

.license [data-pe-buttongroup="LicenseStatus"] .button.selected[value=Pending],
.license [data-pe-buttongroup="LicenseStatus"] .button.active[value=Pending],
.license [data-pe-buttongroup="LicenseStatus"] .button[value=Pending]:hover {
    background-color: #0077a3 !important;
}

.license [data-pe-buttongroup="LicenseStatus"] .button.selected[value=Limited],
.license [data-pe-buttongroup="LicenseStatus"] .button.active[value=Limited],
.license [data-pe-buttongroup="LicenseStatus"] .button[value=Limited]:hover {
    background-color: #b3a800 !important;
}

.license [data-pe-buttongroup="LicenseStatus"] .button.selectable[value=Cancelled],
.license [data-pe-buttongroup="LicenseStatus"] .button.selected[value=Cancelled],
.license [data-pe-buttongroup="LicenseStatus"] .button.active[value=Cancelled],
.license [data-pe-buttongroup="LicenseStatus"] .button[value=Cancelled]:hover,

.license [data-pe-buttongroup="LicenseStatus"] .button.selectable[value=Suspended],
.license [data-pe-buttongroup="LicenseStatus"] .button.selected[value=Suspended],
.license [data-pe-buttongroup="LicenseStatus"] .button.active[value=Suspended],
.license [data-pe-buttongroup="LicenseStatus"] .button[value=Suspended]:hover,

.license [data-pe-buttongroup="LicenseStatus"] .button.selectable[value=Expired],
.license [data-pe-buttongroup="LicenseStatus"] .button.selected[value=Expired],
.license [data-pe-buttongroup="LicenseStatus"] .button.active[value=Expired],
.license [data-pe-buttongroup="LicenseStatus"] .button[value=Expired]:hover {
    background-color: #8f251f !important;
}

.license button[data-pe-id="messagingDeleteNumber"].active,
.license button[data-pe-id="messagingDeleteNumber"]:hover {
    background-color: #8f251f;
    color: white;
}

.license .button.small {
    line-height: 22px;
}

.license .center input {
    text-align: center;
}

.license.disabled,
.licenseContainer.disabled {
    opacity: .5;
    color: initial !important;
}

.licenses .tab-control .title {
    font-weight: bold;
    font-size: 1.5rem;
}

.licenses .tab-control .titleLogo {
    background-position-y: -30px;
    height: 35px;
    width: 160px;
    background-image: url("/Content/themes/ProEngine/Images/nameandlogo_150_black.png");
}

.licenses .tab-control li.active .titleLogo,
.licenses .tab-control li:hover .titleLogo {
    background-image: url("/Content/themes/ProEngine/Images/nameandlogo_150_white.png");
}

.licenses > .frames.noShadow {
    box-shadow: none !important;
    border: 1px solid #e4e4e4 !important;
}



.productDetails .titleLogo {
    background-position-y: 0px;
    height: 100px;
    width: 320px;
    background-image: url("/Images/JubileeLogo.png");
    background-size: contain;
}

.productDetails .title {
    font-size: 4rem;
    line-height: 5rem;
}

.productDetails ul {
    list-style-position: outside;
    padding-left: 10px;
}

.transFees tr td {
    border: 1px solid #aaa;
}

.transFees {
    border-bottom: 1px solid #aaa !important;
}



/*DevExpress Controls override class
--------------------------------------*/
.resolveMetroStyleConflicts div {
    position: unset;
}

.resolveMetroStyleConflicts input {
    height: unset;
}

/*Inactive Overlay
--------------------------------------*/
.statusInput .switch .check,
.statusInput .switch .caption {
	line-height: 24px;
    line-height: initial;
}

[role="tabpanel"].inactive {
    pointer-events: none !important;
}

    [role="tabpanel"].inactive #inactiveMesssage {
        display: block;
    }

    [role="tabpanel"].inactive [data-pe-role="submenu"] {
        background-color: #fff000 !important;
    }

[role="tabpanel"] #inactiveMesssage {
    display: none;
}

.inactive .statusInput {
    z-index: 1016;
    pointer-events: initial !important;
}

.window-overlay.inactive {
    background-color: rgba(0, 0, 0, 0.498039);
    top: 0;
    position: absolute;
    z-index: 1015;
    width: 100%;
}