@charset"UTF-8";

/*------------------------------------------------------------------
[Branding]

@license Copyright 2012-15 (c) RISE Ges.m.b.H.
 ____   ___  ____   _____
|  _ \  | | / ___| | ____|
| |_) | | | \___ \ |  _|
|  _ <  | |  ___) || |___
|_| \_\ |_| |____/ |_____|

RSL VNr.:       0.5.2.

Primary use:    Custom styling for flexible branding goes here.

Note:           THIS IS THE FILE FOR ALL PROJECT
                SPECIFIC DESIGN CHANGES
                (COLOR, TYPE, AND GENERAL VISUAL APPEARANCE)

                For general layout changes use "customlayout.css".

                For update and compatibility reasons try not
                to edit "basic.css" or "content.css".
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Table of contents]

1.      Typography
1.1.    Font-Paths
1.2.    Basic Font declarations
2.      Basic Styles
3.      Branding / .branding
4.      Navigation
5.      Search / .search
5.1.    Cell-Width Dimensions
5.2.    Search Results / .search-results
5.3.    Search Paginate / .search-paginate
6.      CONTENT ELEMENTS (content/main section)
6.1.    Basic Elements
6.2.    Content Structuring Elements / fieldset .whiteboard .portlet
6.3.    Fieldset /fieldset
6.4.    Button /.button
6.5.    Datatable / .dataTables_wrapper
6.6.    Pricing-Table / .pricing-table
6.7.    Dialog / .ui-dialog
6.8.    Tabs / .ui-tabs
6.9.    Accordion / .ui-accordion
6.10.   Wizard / .wizard
7.      Footer / #footer
8.      Spinner / .spinner-wrapper
8.1.    Modal spinner / .modal-spinner
9.      Overlay / .overlay
10.     asSwitch / .asSwitch
11.     Box-Table / .btable 
---------------------------------------------------------------------

/* [1. Typography]
-------------------------------------------------------------------*/
/* [1.1. Font-Paths]
-------------------------------------------------------------------*/

@font-face {
    font-family: 'OpenSans';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/OpenSans-Light-webfont.eot');
    src: url('../fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/OpenSans-Light-webfont.woff') format('woff'),
    url('../fonts/OpenSans-Light-webfont.ttf') format('truetype'),
    url('../fonts/OpenSans-Light-webfont.svg#OpenSansRegular') format('svg');
}

@font-face {
    font-family: 'OpenSans';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/OpenSans-Regular-webfont.eot');
    src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
    url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
    url('../fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
}

@font-face {
    font-family: 'OpenSans';
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/OpenSans-Semibold-webfont.eot');
    src: url('../fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/OpenSans-Semibold-webfont.woff') format('woff'),
    url('../fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
    url('../fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
}

/* [1.2. Basic Font declarations]
-------------------------------------------------------------------*/
body, button, input, select, textarea  {
    font-family: OpenSans, Arial, sans-serif;
    /* =Note: Sets-Font-Family for the site */
    font-size: 12px;
    font-weight: normal;
}

h1,
h2 {
    font-size: 24px;
    font-weight: 300;
}

.xl {
    font-size: 36px;
}

h1 small {
    font-size: 14px;
}

h2 {
    font-size: 20px;
}

h3,
fieldset legend {
    font-size: 18px;
    line-height: 24px;
    font-weight: normal;
	margin: 38px 0 0 0;
}

h3 .light,
legend .light {
    font-weight: normal;
}

/* [2. Basic Styles]
-------------------------------------------------------------------*/
body {
    background: rgb(252,252,252); /* =Note: PAGE BACKGROUND COLOR */
    color: rgb(34,34,34); /* =Note: BASIC FONT COLOR */
    background-repeat: no-repeat; /* =Note: required for vertical gradients */ 
    background-attachment: fixed; /* =Note: required for vertical gradients */ 
}

/* [3. Branding / .branding]
-------------------------------------------------------------------*/
/* =Note: Aka "Logo area" */
.branding a {
    border: none;
    border-bottom: none !important;
}

.branding .logo {
    position: absolute;
    top: 6px;
    background: url(../images/logo.png) no-repeat 0px 0px;
    background-size: 100%;
    height: 60px;
    width: 162px;
    margin-left: 29px;
}

.nav .branding {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.nav .branding .logo {
    height: 31px;
    width: 111px;
    margin-left: 11px;
    margin-top: 6px;
    background: url(../images/logo_white.png) no-repeat;
    background-size: 100%;
}

.nav .branding .toggle-nav-primary {
    color: rgba(255,255,255,0.3);
}

/* [4.  Navigation ]
-------------------------------------------------------------------*/
/* =Note: Navigation-Sidebar-background color */
.nav-full-height:before {
    background: rgb(100,100,100);
}

/* =Note: Navigation-Top-background color */
.nav {
    background: rgb(28,63,149);
}

/* =Note: Mobile Nav Color */
/* =Note: For screens <= 950px */
@media all and (max-width: 950px) {

    #nav-primary.nav,
    #nav-primary.nav .nav-list,
    #nav-primary.nav .nav-label {
        background: #ffffff;
        /*color: rgb(255,255,255);
        font-size: 14px;
        font-weight: normal;*/
    }

    #nav-primary.nav:not(.side),
    #nav-primary.nav:not(.side) .nav-list,
    #nav-primary.nav:not(.side) .nav-label {
        background: #ffffff;
    }

    /* =Note: Mobile Nav Border */
    #nav-primary.nav > .nav-list > .nav-item {
        border-top: 1px solid rgba(0,0,0,0.1);
    }
}

/* [5.  Search / .search ]
-------------------------------------------------------------------*/
.search-results-title {
    border-bottom: 1px solid #cad0dc;
    text-transform: uppercase;
    letter-spacing: 0.1px;
    color: rgb(255,255,255);
    text-shadow: 0px -1px 0 rgba(0,0,0,0.1);
    background: rgb(100,100,100);
}

.search-results-title:before,
.search-results-title:after {
    content: "";
    width: 1px;
    left: -1px;
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    background: rgb(100,100,100);
    display: block;
}

.search-results-title:after {
    right: -1px;
    left: auto !important;
}

.search-results-header ul{
    background-color: #F5F5F5;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    color: #8B8B8B;
}

.search-results-wrapper .cell {
    border-left: 1px solid rgba(0,0,0,0.05);
}

.search-results-wrapper {
    color: rgb(34,34,34);
}

/* [5.1. Cell-Width Dimensions ]
-------------------------------------------------------------------*/

.search-results-wrapper .lastName {
    min-width: 140px;
    max-width: 140px;
}

.search-results-wrapper .firstName {
    min-width: 130px;
    max-width: 130px;
}

.search-results-wrapper .identifier {
    min-width: 100px;
    max-width: 100px;
}

.search-results-wrapper .id {
    min-width: 87px;
    max-width: 87px;
}

.search-results-wrapper [class*="identifierType"] {
    text-indent: 20px;
}

.search-results-wrapper .identifierType-MSISDN {
    background: url("../images/icons-fugue/mobile-phone.png") no-repeat 10px 4px;
}

.search-results-wrapper .identifierType-EMAIL {
    background: url("../images/icons-fugue/mail.png") no-repeat 10px 4px;
}

.search-results-wrapper .identifierType-CONTRACT {
    background: url("../images/icons-fugue/script--pencil.png") no-repeat 10px 4px;
}

.search-results-wrapper .identifierType-BONCARD {
    background: url("../images/icons-fugue/credit-card.png") no-repeat 10px 4px;
}

/* [5.2. Search Results / .search-results ]
-------------------------------------------------------------------*/
.search-results .highlight-search-string {
    color: rgb(206,165,0);

    color: rgb(195,170,0);
}

.search-results .search-results-item {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.search-results .search-results-item:nth-child(even) {
    background: rgba(0,0,0,0.02);
}

.search-results .search-results-item.active {
    background-color: #fdfbda;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    background-color: rgb(221, 234, 248);
    
}

/* =Note: Arrow pointing to the right */
.search-results .search-results-item.active:before {
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0,0,0,0.3);
}

/* =Note: Border-Top for active item */
.search-results .search-results-item.active:after {
    background-color: rgba(0,0,0,0.2);
}

.search-results .search-results-item:hover {
    background-color: #f4f0c1;
    cursor: pointer;
}


/* [5.3. Search Paginate / .search-paginate ]
-------------------------------------------------------------------*/
.search-results-paginate {
    background: rgb(246,246,246);
    background: -moz-linear-gradient(top, rgba(252,252,252,0.93) 0%, rgba(252,252,252,0.93) 1%, rgba(243,243,243,0.93) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,0.93)), color-stop(1%,rgba(252,252,252,0.93)), color-stop(100%,rgba(243,243,243,0.93)));
    background: -webkit-linear-gradient(top, rgba(252,252,252,0.93) 0%,rgba(252,252,252,0.93) 1%,rgba(243,243,243,0.93) 100%);
    background: -o-linear-gradient(top, rgba(252,252,252,0.93) 0%,rgba(252,252,252,0.93) 1%,rgba(243,243,243,0.93) 100%);
    background: -ms-linear-gradient(top, rgba(252,252,252,0.93) 0%,rgba(252,252,252,0.93) 1%,rgba(243,243,243,0.93) 100%);
    background: linear-gradient(top, rgba(252,252,252,0.93) 0%,rgba(252,252,252,0.93) 1%,rgba(243,243,243,0.93) 100%);
    -webkit-box-shadow: 0px -1px rgba(0,0,0,0.1), inset 0px 0px 0px 1px rgb(255,255,255);
    box-shadow: 0px -1px rgba(0,0,0,0.1), inset 0px 0px 0px 1px rgb(255,255,255);
}

/* [6. CONTENT ELEMENTS ]
-------------------------------------------------------------------*/
/* [6.1. Basic elements ]
-------------------------------------------------------------------*/
h1,
h2 {
    color: #EE3D6B;
}

h3,
fieldset legend {
    color: rgba(0,0,0,0.6);
}

a,
a:visited,
a:active {
    color: rgb(80,80,80); /* =Note: LINK COLOR */
    border-bottom: 1px solid rgb(210,210,210);
    color: #1D94BB;
}

a:hover {
    color: rgb(34,34,34); /* =Note: LINK HOVER COLOR*/
    border-bottom: 1px solid rgb(80,80,80);
    border-bottom: 1px solid #29C9FF;
    color: #29C9FF;
}

/* [6.2. Content Structuring Elements / fieldset .whiteboard .portlet ]
-------------------------------------------------------------------*/
.whiteboard,
fieldset > ul,
.ui-accordion-content {
    background: rgb(255,255,255); /* =Note: WHITEBOARD/FIELDSET COLOR */
    border: 1px solid rgb(202,202,202);
}

fieldset li.fieldset-item {
    color: rgba(0,0,0,0.7); /* =Note: FIELDSET-ITEM COLOR */
}

fieldset li.fieldset-item > label:first-child {
    font-weight: bold;
}

fieldset li.fieldset-item label {
    color: rgba(0,0,0,0.8); /* =Note: LABEL COLOR */
}

fieldset li.fieldset-item label.error {
    color: rgb(213,31,31);
}

.whiteboard .inverse {
    color: rgba(0,0,0,0.3);
}

.whiteboard.blue {
    background: #75A5E7;
    color: #ffffff !important;
    border-color: #4F81C6;
}

.whiteboard.green {
    background: #6AD67A;
    color: #ffffff !important;
    border-color: #35ab48;
}

.whiteboard.red {
    background: #a894cf;
    color: #ffffff !important;
    border-color: #8351c4;
}

.whiteboard.orange {
    background: #FCB322;
    color: #ffffff !important;
    border-color: #C88C15;
}

.portlet.light-grey,
.portlet {
    background: rgb(255,255,255); /* =Note: WHITEBOARD/FIELDSET COLOR */
    border: 1px solid rgb(202,202,202);
}

.portlet.light-grey .portlet-header,
.portlet .portlet-header {
    background: rgba(0,0,0,0.03);
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.portlet.blue {
    background: rgb(255,255,255);
    border: 1px solid #1B3E93;
}

.portlet.blue .portlet-header {
    background: #1B3E93;
    color: #ffffff;
    border-bottom: 1px solid transparent;
}

.portlet.dark-grey {
    background: rgb(255,255,255);
    border: 1px solid #646464;
}

.portlet.dark-grey .portlet-header {
    background: #646464;
    color: #ffffff;
    border-bottom: 1px solid transparent;
}

/* [6.3. Form elements ]
-------------------------------------------------------------------*/
span.note,
span.required,
span.example-value {
    color: rgba(0,0,0,0.5);
}

/* =Note: INPUT */
input[type=text],
input[type=search],
textarea,
input[type=password] {
    padding: 2px 5px;
    outline: none;
    height: 16px;
    border: 1px solid rgb(222,222,222);
    background: rgb(255,255,255);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

::-webkit-input-placeholder{
    color: rgb(172,172,172);
}

:-moz-placeholder { /* =Note: Firefox 18- */
   color: rgb(130,130,130);
}

::-moz-placeholder {  /* =Note: Firefox 19+ */
   color: rgb(130,130,130);
}

:-ms-input-placeholder {  
   color: rgb(172,172,172);
}

input[type=text]:focus,
input[type=search]:focus,
textarea:focus,
input[type=password]:focus {
    border: 1px solid rgba(28,63,149,0.6);
    background: rgb(255,255,255);
    -webkit-box-shadow: 0px 0px 2px 0px rgba(28,63,149,0.2);
    -moz-box-shadow: 0px 0px 2px 0px rgba(28,63,149,0.2);
    box-shadow: 0px 0px 2px 0px rgba(28,63,149,0.2);
}

input[type=text]:disabled,
input[type=search]:disabled,
textarea:disabled,
input[type=password]:disabled {
    border-color: rgb(235,235,235);
    background: rgb(252,252,252);
}

textarea.error,
input.error,
textarea.error:focus,
input.error:focus {
    background-color: rgba(213,31,31,0.05);
    border: 1px solid rgba(213,31,31,0.5);
    box-shadow: inset 0px 2px 4px 0px rgba(213,31,31,0.2);
}

input.error:focus  {
    box-shadow: 0px 0px 2px 1px rgba(238,222,0,0.75), inset 0px 2px 4px 0px rgba(213,31,31,0.2);
}

input.error::-webkit-input-placeholder {
    color: rgba(213,31,31,0.8);
}

input.error:-moz-placeholder {
    color: rgba(213,31,31,0.8);
}

input.error::-moz-placeholder {
    color: rgba(213,31,31,0.8);
}

/* [6.4. Button /.button]
-------------------------------------------------------------------*/
.button,
button,
.dataTable th,
.dataTable thead td,
.ui-accordion-header {
    border-radius: 2px;
    line-height: 26px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    padding: 0 15px;
    background-color: rgb(242,242,242); /* =Note: BUTTON COLOR */
    background-color: rgba(0,0,0,0.03);
    border: 1px solid rgb(196,196,196) !important;
    border: 1px solid rgba(0,0,0,0.2) !important;
    border-top-color: rgba(0,0,0,0.15) !important;
    font-weight: bold;
    font-size: 11px;
    color: rgb(100,100,100) !important;
    -webkit-box-shadow: 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
}

/* =Note: Highlighted Button should have a prominent color */
.button.highlighted-button,
button.highlighted-button {
    background-color: rgb(104,149,199); /* =Note: HIGHLIGHTED-BUTTON COLOR */
    border: 1px solid rgb(82,111,143);
    border-top-color: rgb(94,128,160);
    color: rgb(255,255,255) !important;
    text-shadow: 0 0 1px #000000;
    -webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05), 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05), 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
}

.button:hover,
button:hover,
.dataTables_wrapper th[class*="sorting"]:hover {
    border: 1px solid rgba(150,150,150,0.6) !important;
    border-top-color: rgba(171,171,171,0.5) !important;
    border-bottom-color: rgba(128,128,128,0.5) !important;
    background-color: rgba(0,0,0,0.02); /* =Note: BUTTON HOVER COLOR */
    color: rgb(50,50,50) !important;
}

.button.highlighted-button:hover,
button.highlighted-button:hover {
    background-color: rgb(115,160,205); /* =Note: HIGHLIGHTED-BUTTON HOVER COLOR */
    color: rgb(255,255,255) !important;
    border: 1px solid rgb(93,125,161) !important;
    border-top-color: rgb(107,144,175) !important;
}

.button:active,
.button.pressed,
button:active,
button.pressed {
    border-color: rgba(70,70,70,0.35) !important;
    border-top-color: rgba(36,36,36,0.35) !important;
    border-bottom-color: rgba(115,115,115,0.35) !important;
    background-color: rgba(0,0,0,0.05);
    -webkit-box-shadow: 0px 0px 1px 0px rgba(255, 255, 255, 0.6), inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2) !important;
    -moz-box-shadow: 0px 0px 1px 0px rgba(255, 255, 255, 0.6), inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2) !important;
    box-shadow: 0px 0px 1px 0px rgba(255, 255, 255, 0.6), inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2) !important;
    color: rgb(100,100,100) !important;
}

.button.highlighted-button:active,
.button.highlighted-button.pressed,
button.highlighted-button:active,
button.highlighted-button.pressed {
    background-color: rgb(100,144,192);
    color: rgb(255,255,255) !important;
    border: 1px solid rgb(71,95,122) !important;
    border-top-color: rgb(82,109,140) !important;
    -webkit-box-shadow: 0px 0px 1px 0px rgba(255, 255, 255, 0.8), inset 0px 1px 4px 0px rgba(0, 0, 0, 0.4) !important;
    -moz-box-shadow: 0px 0px 1px 0px rgba(255, 255, 255, 0.8), inset 0px 1px 4px 0px rgba(0, 0, 0, 0.4) !important;
    box-shadow: 0px 0px 1px 0px rgba(255, 255, 255, 0.8), inset 0px 1px 4px 0px rgba(0, 0, 0, 0.4) !important;
}

.button:focus,
button:focus {
    border: 1px solid rgba(28,63,149,0.6) !important;
    -webkit-box-shadow: 0px 0px 2px 0px rgba(28,63,149,0.6);
    -moz-box-shadow: 0px 0px 2px 0px rgba(28,63,149,0.6);
    box-shadow: 0px 0px 2px 0px rgba(28,63,149,0.6);
}

.button.highlighted-button:focus,
button.highlighted-button:focus {
    border: 1px solid rgb(60,93,130) !important;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(28,63,149,0.8);
    -moz-box-shadow: 0px 0px 3px 0px rgba(28,63,149,0.8);
    box-shadow: 0px 0px 3px 0px rgba(28,63,149,0.8);
}

button[disabled="disabled"],
button[disabled=""],
.button.disabled,
button.disabled,
button[disabled="disabled"]:hover,
button[disabled=""]:hover,
.button.disabled:hover,
button.disabled:hover,
button[disabled="disabled"]:focus,
button[disabled=""]:focus,
.button.disabled:focus,
button.disabled:focus {
    cursor: default;
    background-color: rgb(237,237,237);
    border: 1px solid rgba(150,150,150,0.3) !important;
    border-top-color: rgba(171,171,171,0.3) !important;
    border-bottom-color: rgba(128,128,128,0.25) !important;
    color: rgba(102,102,102,0.4) !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

button[disabled="disabled"].highlighted-button,
button[disabled=""].highlighted-button,
.button.disabled.highlighted-button,
button.disabled.highlighted-button,
button[disabled="disabled"]:hover.highlighted-button,
button[disabled=""]:hover.highlighted-button,
.button.disabled:hover.highlighted-button,
button.disabled:hover.highlighted-button,
button[disabled="disabled"]:focus.highlighted-button,
button[disabled=""]:focus.highlighted-button,
.button.disabled:focus.highlighted-button,
button.disabled:focus.highlighted-button {
    background: rgb(203,218,235);
    background: rgba(104,149,199,0.3);
    color: #b4b4b4 !important;
    text-shadow: none;
}

button[disabled="disabled"] img,
button[disabled=""] img,
.button.disabled img,
button.disabled img {
    opacity: 0.3;
}

/* =Note: Combobox button / .ui-autocomplete-button */
.ui-autocomplete-button,
.ui-autocomplete-button.disabled,
.ui-autocomplete-button[disabled="disabled"],
.ui-autocomplete-button[disabled=""],
.ui-autocomplete-button.disabled:hover,
.ui-autocomplete-button[disabled="disabled"]:hover,
.ui-autocomplete-button[disabled=""]:hover,
.ui-autocomplete-button.disabled:focus,
.ui-autocomplete-button[disabled="disabled"]:focus,
.ui-autocomplete-button[disabled=""]:focus {
    margin: 0px;
    border-radius: 0 4px 4px 0;
    vertical-align: top;
    line-height: 20px;
    padding: 0 8px;
    position: relative;
    margin-left: -1px;
}

/* [6.5. Datatable / .dataTables_wrapper]
-------------------------------------------------------------------*/
.dataTables_wrapper th.sorting_asc:after {
    border-top-color: rgb(100,100,100);
}

.dataTables_wrapper th.sorting_desc:after {
    border-bottom-color: rgb(100,100,100);
}

.dataTable .even,
.dataTable tr:nth-child(even) {
    background: #f5f7fc;
}

.dataTable .odd,
.dataTable tr:nth-child(odd) {
    background: rgb(255,255,255);
}

.dataTable tr td a:hover {
    background: rgb(230,230,230);
    background: rgba(230,230,230,0.4);
}

.dataTable td {
    border: 1px solid rgb(210,210,210);
}

.dataTable tr.even:hover td,
.dataTable tr:nth-child(even):hover td {
    background: rgba(230,230,230,0.4);
}

.dataTable tr.odd:hover td,
.dataTable tr:nth-child(odd):hover td {
    background: rgba(230,230,230,0.3);
}

.highlight-row {
    background-color: #EDEDED !important;
}

/* [6.6. Pricing-Table / .pricing-table]
-------------------------------------------------------------------*/
.pricing-item .header {
    text-shadow: 0px 1px 4px rgba(8,36,105,0.4);
}

.pricing-item.basic .header {
    background: #8cbbdd;
    border: none;
}

.pricing-item.professional .header {
    background: #6895c7;
    border: none;
}

.pricing-item.business .header {
    background: #4068a9;
    border: none;
}

.pricing-item.unlimited .header {
    background: #1c3f95;
    border: none;
}

.pricing-item .label {
    background: #ddeaf8;
    font-weight: bold;
    color: inherit;
    font-size: inherit;
}

/* [6.7. Dialog / .ui-dialog]
-------------------------------------------------------------------*/
.ui-widget-overlay {
    background: rgba(200,200,200,0.5);
}

.ui-dialog {
    -webkit-box-shadow: 0px 3px 26px 0px rgba(0, 0, 0, 0.3), 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 3px 26px 0px rgba(0, 0, 0, 0.3), 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 3px 26px 0px rgba(0, 0, 0, 0.3), 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
}

.ui-dialog-titlebar {
    border-top: 1px solid rgba(0, 0, 0, 0.13);
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.13);
    border-bottom: 1px solid rgba(200, 200, 200, 0.1);
    -webkit-box-shadow: 0 1px rgba(255, 255, 255, 0.2) inset;
    -moz-box-shadow: 0 1px rgba(255, 255, 255, 0.2) inset;
    box-shadow: 0px 1px rgba(255, 255, 255, 0.2) inset;
    color: rgb(255,255,255);
    text-shadow: 0px -1px 0 rgba(0,0,0,0.1);
    background: rgb(102,102,102);
    background: -moz-linear-gradient(top, rgba(102,102,102,1) 0%, rgba(119,119,119,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(102,102,102,1)), color-stop(100%,rgba(119,119,119,1)));
    background: -webkit-linear-gradient(top, rgba(102,102,102,1) 0%,rgba(119,119,119,1) 100%);
    background: -o-linear-gradient(top, rgba(102,102,102,1) 0%,rgba(119,119,119,1) 100%);
    background: -ms-linear-gradient(top, rgba(102,102,102,1) 0%,rgba(119,119,119,1) 100%);
    background: linear-gradient(top, rgba(102,102,102,1) 0%,rgba(119,119,119,1) 100%);
}

.ui-dialog-content {
    border-top: 1px solid rgb(255,255,255);
    background: rgb(252,252,252);
    background: -moz-linear-gradient(top, rgba(252,252,252,0.93) 0%, rgba(252,252,252,0.93) 1%, rgba(243,243,243,0.93) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,0.93)), color-stop(1%,rgba(252,252,252,0.93)), color-stop(100%,rgba(243,243,243,0.93)));
    background: -webkit-linear-gradient(top, rgba(252,252,252,0.93) 0%,rgba(252,252,252,0.93) 1%,rgba(243,243,243,0.93) 100%);
    background: -o-linear-gradient(top, rgba(252,252,252,0.93) 0%,rgba(252,252,252,0.93) 1%,rgba(243,243,243,0.93) 100%);
    background: -ms-linear-gradient(top, rgba(252,252,252,0.93) 0%,rgba(252,252,252,0.93) 1%,rgba(243,243,243,0.93) 100%);
    background: linear-gradient(top, rgba(252,252,252,0.93) 0%,rgba(252,252,252,0.93) 1%,rgba(243,243,243,0.93) 100%);
}

.search-results-paginate,
.buttonpane {
    background: rgb(246,246,246);
    background: -moz-linear-gradient(top, rgba(252,252,252,0.93) 0%, rgba(252,252,252,0.93) 1%, rgba(243,243,243,0.93) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,0.93)), color-stop(1%,rgba(252,252,252,0.93)), color-stop(100%,rgba(243,243,243,0.93)));
    background: -webkit-linear-gradient(top, rgba(252,252,252,0.93) 0%,rgba(252,252,252,0.93) 1%,rgba(243,243,243,0.93) 100%);
    background: -o-linear-gradient(top, rgba(252,252,252,0.93) 0%,rgba(252,252,252,0.93) 1%,rgba(243,243,243,0.93) 100%);
    background: -ms-linear-gradient(top, rgba(252,252,252,0.93) 0%,rgba(252,252,252,0.93) 1%,rgba(243,243,243,0.93) 100%);
    background: linear-gradient(top, rgba(252,252,252,0.93) 0%,rgba(252,252,252,0.93) 1%,rgba(243,243,243,0.93) 100%);
    -webkit-box-shadow: 0px -1px rgba(0,0,0,0.1), inset 0px 0px 0px 1px rgb(255,255,255);
    box-shadow: 0px -1px rgba(0,0,0,0.1), inset 0px 0px 0px 1px rgb(255,255,255);
}

/* [6.8. Tabs / .ui-tabs]
-------------------------------------------------------------------*/
.ui-tabs .ui-tabs-nav li {
    background: rgb(242,242,242);
    border: 1px solid rgb(202,202,202);
    -webkit-box-shadow: 0 -9px 9px -15px rgba(0,0,0,0.5) inset;
    box-shadow: 0 -9px 9px -15px rgba(0,0,0,0.5) inset;
}

.ui-tabs .ui-tabs-nav li.ui-state-active {
    background: rgb(255,255,255);
    border: 1px solid rgb(202,202,202);
    border-bottom: 1px solid rgb(232,232,232);
    -webkit-box-shadow: none;
    box-shadow: none;
    color: rgb(109,109,109);
}

.ui-tabs .ui-tabs-nav li.ui-state-active + li {
    -webkit-box-shadow: 9px -9px 9px -15px rgba(0,0,0,0.5) inset;
    box-shadow: 9px -9px 9px -15px rgba(0,0,0,0.5) inset;
}

.ui-tabs .ui-tabs-nav li a {
    border-bottom: 0px !important;
    color: rgb(123,123,123) !important;
}

.ui-tabs .ui-tabs-nav li.ui-state-active a,
.ui-tabs .ui-tabs-nav li.ui-state-hover a{
    color: rgb(34,34,34) !important;
}

.ui-tabs .ui-tabs-panel{
    border-top: 1px solid rgb(202,202,202);
}

.ui-tabs.contained .ui-tabs-panel{
    background: rgb(255,255,255);
    -webkit-box-shadow: 0px 4px 3px 0px rgba(0, 0, 0, 0.04);
    -moz-box-shadow: 0px 4px 3px 0px rgba(0, 0, 0, 0.04);
    box-shadow: 0px 4px 3px 0px rgba(0, 0, 0, 0.04);
    border: 1px solid rgb(202,202,202);
}

.ui-tabs.contained .ui-tabs-panel .whiteboard,
.ui-tabs.contained .ui-tabs-panel fieldset > ul {
    border: none;
    border-top: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 0px;
}

/* [6.9. Accordion / .ui-accordion]
-------------------------------------------------------------------*/
.ui-accordion-header {
    /* =Note: See button style */
}

.ui-accordion-content {
    /* =Note: See whiteboard/fieldset */
    border-top: none;
}

/* [6.10. Wizard / .wizard]
-------------------------------------------------------------------*/
.wizard {
    background: #ffffff;
    border: 1px solid rgb(202,202,202);
}

.wizard .step {
    background: #ffffff;
}

.wizard .step a {
    color: #505050;
}

.wizard .step:after {
    border-top: 1px solid rgba(202,202,202,0.8);
    border-right:  1px solid rgba(202,202,202,0.8);
    background: #ffffff;
}

.wizard .step.current,
.wizard .step.current:after {
    background: #4f6bba;
    border-color: #4f6bba;
}

.wizard .step.current a {
    color: #ffffff;
}

.wizard .step.past,
.wizard .step.past:after {
    background-color: rgb(237,237,237);
    border-color: rgb(202,202,202);
}

.wizard .step.past a {
    color: #4f6bba;
}

.wizard .actions {
    background: rgb(249, 249, 249);
    border-left:  1px solid rgba(202,202,202,0.6);
}

/* [7. Footer / #footer]
-------------------------------------------------------------------*/
#footer .rise{
    background: url("../images/rise_logo_light.png");
    background-size: 100%;
    width: 88px;
    height: 25px;
}

#footer .boxworld {
    background: url("../images/boxworld_light.png");
    background-size: 100%;
    width: 31px;
    height: 29px;
}

#footer .gatekeeper {
    background: url("../images/gatekeeper_light.png");
    background-size: 100%;
    width: 32px;
    height: 27px;
}

/* [8. Spinner / .spinner-wrapper ]
-------------------------------------------------------------------*/
.spinner-wrapper .fa-spinner {
    font-size: 40px;
}

/* [8.1. Modal spinner / .modal-spinner]
-------------------------------------------------------------------*/
.spinner-wrapper .fa.fa-spinner,
.modal-spinner .fa.fa-spinner {
    color: rgba(142, 166, 234, 1);
}

.modal-spinner .fa.fa-upload {
    margin: -16px 0 0 -9px;
}

.modal-spinner .fa.fa-download {
    margin: -15px 0 0 -9px;
}

.small-spinner {
    font-size: 40px !important;
}

.medium-spinner {
    font-size: 70px !important;
}

.large-spinner {
    font-size: 100px !important;
}

/* [9. Overlay / .overlay]
-------------------------------------------------------------------*/
.overlay {
    background: rgba(12, 12, 12, 0.7);
    color: rgb(255,255,255);
}

.overlay-wrapper iframe,
.overlay-wrapper embed,
.overlay-wrapper img {
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.4);
    box-shadow: 0 3px 6px rgba(0,0,0,0.4);
}

.overlay-control:hover {
    cursor: pointer;
    text-shadow: 0 0 3px #FFFFFF;
}

.overlay-control,
.overlay-control .fu,
.overlay-control .fa {
    font-size: 30px;
    color: rgb(255,255,255);
}

.overlay .button {
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    color: rgb(255, 255, 255) !important;
}

.overlay .button {
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    color: rgb(255, 255, 255) !important;
}

.overlay .button:hover,
.overlay button:hover {
    background: rgba(255,255,255,0.3) !important;
}

.overlay .button:active,
.overlay .button.pressed,
.overlay button:active,
.overlay button.pressed {
    border: 1px solid rgba(255,255,255, 0.3) !important;
    background: rgba(255,255,255,0.2) !important;
}


/* [10. asSwitch / .asSwitch ]
-------------------------------------------------------------------*/
.asSwitch {
  position: relative;
  display: inline-block;
}

.asSwitch:hover {
  cursor: pointer;
}

.asSwitch > input {
  display: none;
}

.asSwitch .asSwitch-inner {
  overflow: hidden;
}

.asSwitch .asSwitch-on {
  display: block;
  float: left;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.asSwitch .asSwitch-off {
  display: block;
  float: left;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.asSwitch .asSwitch-handle {
  position: absolute;
  top: 0;
}

.asSwitch .asSwitch-handle:hover {
  cursor: pointer;
}


.asSwitch.asSwitch_skin-01 {
    width: 72px;
    height: 24px;
    border-radius: 16px;
}

.asSwitch.asSwitch_skin-01 .asSwitch-inner {
    border-radius: 16px;
}

.asSwitch.asSwitch_skin-01 .asSwitch-inner-box {
    width: 120px;
    height: 24px;
}

.asSwitch.asSwitch_skin-01 .asSwitch-on {
    width: 60px;
    height: 24px;
    font-size: 14px;
    line-height: 24px;
    color: #ffffff;
    background: rgb(94,135,178);
    background: -moz-linear-gradient(top,  rgba(94,135,178,1) 0%, rgba(104,149,199,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(94,135,178,1)), color-stop(100%,rgba(104,149,199,1)));
    background: -webkit-linear-gradient(top,  rgba(94,135,178,1) 0%,rgba(104,149,199,1) 100%);
    background: -o-linear-gradient(top,  rgba(94,135,178,1) 0%,rgba(104,149,199,1) 100%);
    background: -ms-linear-gradient(top,  rgba(94,135,178,1) 0%,rgba(104,149,199,1) 100%);
    background: linear-gradient(to bottom,  rgba(94,135,178,1) 0%,rgba(104,149,199,1) 100%);
}

.asSwitch.asSwitch_skin-01 .asSwitch-on,
.asSwitch.asSwitch_skin-01 .asSwitch-off {
    text-transform: uppercase;
    text-align: center;
} 

.asSwitch.asSwitch_skin-01 .asSwitch-off {
    width: 60px;
    height: 24px;
    font-size: 14px;
    line-height: 24px;
    color: #ffffff;
    background-color: #979797;
    text-indent: 3px;
}

.asSwitch.asSwitch_skin-01 .asSwitch-handle {
    width: 24px;
    height: 24px;
    border-radius: 16px;
    background: rgb(254,254,254);
    background: -moz-linear-gradient(top,  rgb(254,254,254) 0%, rgb(249,249,249) 50%, rgb(254,254,254) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(254,254,254)), color-stop(50%,rgb(249,249,249)), color-stop(100%,rgb(254,254,254)));
    background: -webkit-linear-gradient(top,  rgb(254,254,254) 0%,rgb(249,249,249) 50%,rgb(254,254,254) 100%);
    background: -o-linear-gradient(top,  rgb(254,254,254) 0%,rgb(249,249,249) 50%,rgb(254,254,254) 100%);
    background: -ms-linear-gradient(top,  rgb(254,254,254) 0%,rgb(249,249,249) 50%,rgb(254,254,254) 100%);
    background: linear-gradient(to bottom,  rgb(254,254,254) 0%,rgb(249,249,249) 50%,rgb(254,254,254) 100%);

    -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.4);
}

.asSwitch.asSwitch_skin-01.is-on {
    background-color: #3aadd3;
    border: 3px solid #3aadd3;
}

.asSwitch.asSwitch_skin-01.is-on:after {
    border-color: #2ea7cf;
}

.asSwitch.asSwitch_skin-01.is-on .asSwitch-inner-box {
    margin-left: 0;
}

.asSwitch.asSwitch_skin-01.is-on .asSwitch-off {
    background-color: #3aadd3;
}

.asSwitch.asSwitch_skin-01.is-on .asSwitch-handle {
    left: 40px;
    -webkit-box-shadow: inset 0 -3px 3px -1px #8dd0e6;
    box-shadow: inset 0 -3px 3px -1px #8dd0e6;
}

.asSwitch.asSwitch_skin-01.is-off {
    background-color: #979797;
    border: 3px solid #979797;
}

.asSwitch.asSwitch_skin-01.is-off:after {
    border-color: #8f8f8f;
}

.asSwitch.asSwitch_skin-01.is-off .asSwitch-inner-box {
    margin-left: -40px;
}

.asSwitch.asSwitch_skin-01.is-off .asSwitch-on {
    background-color: #979797;
}

.asSwitch.asSwitch_skin-01.is-off .asSwitch-handle {
    left: 0;
    -webkit-box-shadow: inset 0 -3px 3px -1px #cacaca;
    box-shadow: inset 0 -3px 3px -1px #cacaca;
}

.asSwitch_disabled,
input[disabled] + .asSwitch-inner {
    opacity: 0.7;
}

/* [11. Box-Table / .btable ]
-------------------------------------------------------------------*/

.btable .btable-header .btable-cell.sortable:hover {
    border: 1px solid rgba(150,150,150,0.6) !important;
    border-top-color: rgba(171,171,171,0.5) !important;
    border-bottom-color: rgba(128,128,128,0.5) !important;
    background-color: rgba(0,0,0,0.02); /* =Note: BUTTON HOVER COLOR */
    color: rgb(50,50,50) !important;
}

.btable .btable-header .btable-cell.sort-asc:after {
    content: "";
    width: 0px;
    height: 0px;
    border: 5px solid transparent;
    float: right;
    margin-top: 11px;
}

.btable .btable-header .btable-cell.sort-desc:after {
    content: "";
    width: 0px;
    height: 0px;
    border: 5px solid transparent;
    float: right;
    margin-top: 5px;
}

.btable .btable-header .btable-cell {
    -moz-border-bottom-colors: none !important;
    -moz-border-left-colors: none !important;
    -moz-border-right-colors: none !important;
    -moz-border-top-colors: none !important;
    background-color: rgba(0, 0, 0, 0.03);
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
    color: rgb(100, 100, 100) !important;
    font-size: 11px;
    font-weight: bold;
    line-height: 26px;
}

.btable-wrapper {
    border-color: transparent rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) !important;
    border-image: none !important;
    border-radius: 2px;
    
    border-style: solid !important;
    border-width: 1px !important;
}

.btable .btable-row:nth-child(even) {
    background: #f5f7fc;
}

.btable .btable-row:nth-child(odd) {
    background: rgb(255,255,255);
}

.btable .btable-cell {
    border: 1px solid rgb(210,210,210);
}

.btable .btable-content .btable-row:nth-child(even):hover {
    background: rgba(230,230,230,0.4);
}

.btable .btable-content .btable-row:nth-child(odd):hover {
    background: rgba(230,230,230,0.3);
}

/* =Note: sorting arrow */
.btable .btable-header .btable-cell.sort-asc:after {
    border-top-color: rgb(100,100,100);
}

.btable .btable-header .btable-cell.sort-desc:after {
    border-bottom-color: rgb(100,100,100);
}

.loading-indicator {
    color: rgb(142, 166, 234);    
}

.btable .loading {
    background: rgba(255,255,255,0.6);
}

.loading-table .btable-content {
    color: transparent;
    text-shadow: 0 0 7px rgb(34,34,34);
}