/*------------------------------------------------------------------------------------------------*/
/*                                        Customer Portal                                         */
/*------------------------------------------------------------------------------------------------*/

:root {
  
  --reseller-black: #000000;
  --reseller-navy: #103146;
  
  --reseller-teal: #4DC0D6;
  --reseller-teal-reduced: #A5DFEB;
  
  --reseller-gray: #DDDDDD;
  --reseller-gray-light: #F8F8F8;
  
}

.portal-reseller {
    color : var(--reseller-teal);
}


#application .head {
    background-color:  var(--reseller-black);
}

/* Main Menu Bar */

#application .main-menu {
    background-color: var(--reseller-navy);
    border-top: 1px solid  #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    
}


.main-menu li a:hover * {
    color: var(--reseller-teal);
}

.main-menu li a:hover .icon.badge1 {
    color: var(--reseller-teal);
}

.main-menu li a.main-menu-item-selected:hover * {
    color: #ffffff;
}

.main-menu li a.main-menu-item-selected:hover .icon.badge1 {
    color: #ffffff;
}

.main-menu-item-selected {
    background-color: var(--reseller-teal);
    border-radius: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.menu-separator {
    width: 1px !important;
    background-color: #ffffff;
    height: 75px;
}

.main-menu li:first-child {
    margin: 0;
}

.main-menu .menu-separator {
    margin: 0;
}

.main-menu .menu-separator + li {
    margin: 0;
}

.main-menu li a.menu-items p:last-child {
    margin:6px 0px 5px 0px;
}


/* Master Pages and Dialog Windows */

.page {
    background-color: #FFFFFF;
}

.page-child {
    background-color: #FFFFFF;
}

.page-dialog .head {
    background-color : var(--reseller-navy);
}

.page-dialog .head .title {
    color: #FFFFFF; 
}

.page-dialog .body {
    background-color: #FFFFFF;  
}

.page-title {
    color: #FFF;
}

.page-description {
    color: #FFF;
}

.page-icon {
    color: var(--reseller-teal);
}

.icon {
    color: var(--reseller-teal);
}

.small-icon {
    color: var(--reseller-teal);
}
.menu-icon {
    color: #FFFFFF;
}

.large-icon {
    color: var(--reseller-teal);
}

.loader-dots {
    color:  var(--reseller-teal);
}


/* Notes */

.new-note {
    border: 1px dashed var(--reseller-teal);   
}

/* Breadcumb Navigation  */

.crumbs {
    background-color:var(--reseller-gray-light);
    border-top: 1px solid var(--reseller-gray);
    border-bottom: 1px solid var(--reseller-gray);
}

.crumbicon {
    color: var(--reseller-teal);
    margin-left: 11px;
}

.crumbicon {
    color: var(--reseller-teal);
}

.crumbs li {
    float: left;
}

.crumbs li a {
    color: #222222;
    text-decoration: none;
    padding: 0px 0 0px 45px;
    background: #404041;
    position: relative;
    display: block;
    float: left;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
}

.crumbs li a:after {
    border-left: 30px solid var(--reseller-teal);
}

.crumbs li a:before {
    border-left: 30px solid var(--reseller-gray);
}

.crumbs li:first-child a {
    color: #222222;
}

.crumbs li:nth-child(2) a {
    background: var(--reseller-gray-light);
    padding-left: 10px;
}

.crumbs li:nth-child(2) a:after {
    border-left-color: var(--reseller-gray-light);
}

.crumbs li:nth-child(3) a {
    background: var(--reseller-gray-light);
}

.crumbs li:nth-child(3) a:after {
    border-left-color: var(--reseller-gray-light);
}

.crumbs li:nth-child(4) a {
    background: var(--reseller-gray-light);
}

.crumbs li:nth-child(4) a:after {
    border-left-color: var(--reseller-gray-light);
}

.crumbs li:nth-child(5) a {
    background: var(--reseller-gray-light);
}

.crumbs li:nth-child(5) a:after {
    border-left-color: var(--reseller-gray-light);
}

.crumbs li:last-child a {
    color: #222222;
}

.crumbs li:last-child a:after {
    color: #222222;
}

.crumbs li a:hover {
    background: var(--reseller-teal);
    color: #FFFFFF;
}
.crumbs li a:hover:after {
    border-left-color: var(--reseller-teal) !important;
}


/* Dashboard */

.dashboard-canvas {
    background-color: #F8F8F8;
}

/* Users */

.page-title {
    color: #222222;
}
#User-title2 {
    color: #222222;
}
.issuebank {
    color: #222222;
}
.user-details-widget-header {
    color:  var(--reseller-teal);
}

/* Organisation Styles */

.tile-selected { 
    background-color: var(--reseller-teal-reduced);
    border-color: var(--reseller-teal);
}

.tile-hover { 
    background-color: var(--reseller-teal-reduced);
    border-color: var(--reseller-teal);
}

.dragIcon {
    color: var(--reseller-teal) !important;
}

.popoverContainer:hover {
    border: 1px solid var(--reseller-teal);
}

/* Reports */

.popoverContainer:hover {
    border: 1px solid var(--reseller-teal);
}
.report_tile .icon {
    color: var(--reseller-teal);
}

/* Billing */

#Billing label {
    color: #222222;
}

#ISP label {
    color: #222222;
}

/* Pages */

.page-template-scroller {
    background-color: transparent;
    border: 1px solid var(--reseller-gray);
    cursor: pointer;
}

.page-template-scroller span {
    color: var(--reseller-teal);
}

.page-template-scroller:hover {
    background-color: var(--reseller-teal);
    border: 1px solid  var(--reseller-teal);
    color: #FFF;
}

.page-thumbnail-selected, .page-thumbnail-unlocked:hover {
    border: 1px solid var(--reseller-teal);
}
.page-thumbnail-face-selected {
    opacity: 0.25;
    background-color: var(--reseller-teal);
}
    
/* JQX Widget Overrides */

.jqx-button-portal-default {
    color: #FFFFFF; 
    border-color: var(--reseller-teal); 
    background-color: var(--reseller-teal); 
    background-image: -moz-linear-gradient(top, var(--reseller-teal), var(--reseller-teal)); 
    background-image: -ms-linear-gradient(top, var(--reseller-teal), var(--reseller-teal)); 
    background-image: -o-linear-gradient(top, var(--reseller-teal), var(--reseller-teal)); 
    background-image: -webkit-gradient(linear, center top, center bottom, from(var(--reseller-teal)), to(var(--reseller-teal))); 
    background-image: -webkit-linear-gradient(top, var(--secondary-primary-color), var(--reseller-teal)); 
    background-image: linear-gradient(top, var(--reseller-teal), var(--reseller-teal)); 
    background-image: linear-gradient(to bottom, var(--reseller-teal),var(--reseller-teal)); 
    border-radius: 2px;
}

.jqx-fill-state-focus-portal-default  {
    border-color:  var(--reseller-teal); 
    
}


.jqx-rc-all-portal-default, .jqx-tooltip-portal-default, .jqx-tooltip-text-portal-default, .jqx-tooltip-main-portal-default {
    border-radius: 2px;
}

.jqx-fill-state-pressed-portal-default, 
.jqx-widget-portal-default
.jqx-grid-cell-selected-portal-default
{
  color: #FFF;
  border-color: var(--reseller-teal);
  background-color: var(--reseller-teal);
  background-image: -moz-linear-gradient(top, var(--reseller-teal), var(--reseller-teal));
  background-image: -ms-linear-gradient(top, var(--reseller-teal), var(--reseller-teal));
  background-image: -o-linear-gradient(top, var(--reseller-teal), var(--reseller-teal));
  background-image: -webkit-gradient(linear, center top, center bottom, from(var(--reseller-teal)), to(var(--reseller-teal)));
  background-image: -webkit-linear-gradient(top, var(--reseller-teal), var(--reseller-teal));
  background-image: linear-gradient(top, var(--reseller-teal), var(--reseller-teal));
  background-image: linear-gradient(to bottom, var(--reseller-teal), var(--reseller-teal));
}

.jqx-fill-state-hover-portal-default, 
.jqx-widget-portal-default 
.jqx-grid-cell-hover-portal-default
{
  color: #FFF;
  border-color: var(--reseller-teal);
  background-color: var(--reseller-teal);
  background-image: -moz-linear-gradient(top, var(--reseller-teal), var(--reseller-teal));
  background-image: -ms-linear-gradient(top, var(--reseller-teal), var(--reseller-teal));
  background-image: -o-linear-gradient(top, var(--reseller-teal), var(--reseller-teal));
  background-image: -webkit-gradient(linear, center top, center bottom, from(var(--reseller-teal)), to(var(--reseller-teal)));
  background-image: -webkit-linear-gradient(top, var(--reseller-teal), var(--reseller-teal));
  background-image: linear-gradient(top, var(--reseller-teal), var(--reseller-teal));
  background-image: linear-gradient(to bottom, var(--reseller-teal), var(--reseller-teal));
}

.jqx-fill-state-hover {
    border-color: var(--reseller-teal);  
    background: var(--reseller-teal);
}
/*
.jqx-menu ul {
    background-color:  var(--reseller-teal);
}
*/

.jqx-widget-header-portal-default, 
.jqx-widget-header-portal-default {
    color: #3D3D3D;
    text-shadow: none;
    border-color: var(--reseller-teal);
    background-color: var(--reseller-teal);
    background-image: -moz-linear-gradient(top, var(--reseller-teal), var(--reseller-teal));
    background-image: -ms-linear-gradient(top, var(--reseller-teal), var(--reseller-teal));
    background-image: -o-linear-gradient(top, var(--reseller-teal), var(--reseller-teal));
    background-image: -webkit-gradient(linear, center top, center bottom, from(var(--reseller-teal)), to(var(--reseller-teal)));
    background-image: -webkit-linear-gradient(top, var(--reseller-teal), var(--reseller-teal));
    background-image: linear-gradient(top,var(--reseller-teal),var(--reseller-teal));
    background-image: linear-gradient(to bottom,var(--reseller-teal), var(--reseller-teal));
}


.jqx-widget-portal-default {
    font-family: Ubuntu;
}