body {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #fff;
    background-color: #fff;
    padding-top: 50px;
    background-color: #282828;
}
.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav>li>a {
    color: #fff;
}
.navbar-inverse {
    border-color: #222;
}
.user-name {
    background-color: #1c1c1c;
}
.navbar-default {
    background-color: #0068d4;
    border-color: #0065CD;
}
.user-image {
    width: 20px;
    margin: 0 0px 0px 10px;
}
.cloud-container {
    position: relative;
    top: 104px;
}
.cloud-menu {
    background-color: #151515;
    width: 46px;
    height: 51px;
}
.navbar-secondary {
    background-color: #0498d5;
    border-radius: 0;
    max-height: 50px;
    margin-bottom: 0px;
    position: fixed;
    width: 100%;
    top: 53px;
    z-index: 101;
}
.navbar-secondary .row {
    margin-right: 0px;
}
.breadcrumb-secondary {
    color: #fff;
    font-size: 20px;
    margin: 12px 0 0 0px;
    float: left;
}
.breadcrumb-secondary i,
.breadcrumb-secondary span {
    float: left;
    margin-left: 13px;
}
.breadcrumb-secondary span {
    margin-left: 0.5em
}

.breadcrumb-secondary a, .version-url a{
    cursor: pointer;
    color:rgba(255,255,255,0.75);
}
.breadcrumb-secondary a:hover, .version-url a:hover{
    color: #fff;
    text-decoration: none;
}

.action-bar {
    background-color: #303030;
    min-height: 45px;
    color: #fff;
    -webkit-box-shadow: 0px 2px 6px -4px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 2px 6px -4px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 2px 6px -4px rgba(0, 0, 0, 0.75);
    position: fixed;
    top: 103px;
    width: 100%;
    z-index: 100;
}
.action-bar-top-positioned{
    top:50px;
}
.app-type-listing {
    position: relative;
    top: 73px;
    z-index: 99;
}
.form-listing {
    position: relative;
    top: 120px;
    z-index: 99;
}
.gadget-body{
    top: 150px;
    position: relative;
}
.btn-action-txt {
    position: absolute;
    margin-top: 14px;
    margin-left: 8px;
}
.btn-action:hover {
    background-color: #000
}
/* general buttons */

button[disabled]{
    opacity: 0.65;
    cursor: not-allowed;
}

.cu-btn {
    font-size: 1.1em;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-weight: 300;
    border-radius: 0;
    border: 1px solid transparent;
    cursor: pointer;
}
.cu-btn:active,
.cu-btn.active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .125);
    box-shadow: inset 0 0px 0px rgba(0, 0, 0, .125);
}
.cu-btn:hover,
.cu-btn:visited,
.cu-btn:focus {
    color: #fff;
    text-decoration: none;
}
.cu-btn-md {
    padding: 10px 22px;
    line-height: 1.3em;
}
.cu-btn-lg {
    padding: 10px 18px;
}
.cu-btn-sm {
    padding: 3px 11px;
}
.cu-btn-blue {
    background-color: #0288c0
}
.cu-btn-orange {
    background-color: #e67e22
}
.cu-btn-red {
    background-color: #ea6153;
}
.cu-btn-gr-dark {
    background-color: #1f1f1f
}
.cu-btn-gr-dark:hover {
    background-color: #111
}
.cu-btn-gray {
    background-color: #555555;
}
.wr-edit-button {
    border-radius: 0;
}

.ctrl-edit-button .dropdown-menu {
    min-width: 160px;
    padding: 5px 0;
    margin: 0px 0 0;
    font-size: 0.8em;
    text-align: left;
    list-style: none;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 0px solid #ccc;
    border: 0px solid rgba(0, 0, 0, .15);
    border-radius: 0px;
    -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, .175);
    box-shadow: 0 0px 0px rgba(0, 0, 0, .175);
    border-top: 1px solid #329ecc;
}
.ctrl-edit-button .dropdown-menu>li>a:hover,
.ctrl-edit-button .dropdown-menu>li>a:focus {
    background-color: #007eb3;
}
.btn-group .btn+.btn {
    margin-left: 0;
}
.ctrl-edit-button .dropdown-menu > li > a {
    color: #fff;
    padding: 5px 24px;
}
.ctrl-edit-button .dropdown-menu.btn-edit li{
    font-size:1.37em;
}
.cu-dropdown-toggle {
    border-left: 1px solid #329ecc;
}
/* centered columns styles */

.row-centered {
    text-align: center;
}
.col-centered {
    display: inline-block;
    float: none;
    text-align: center;
    margin-right: -4px;
}
a.btn-action {
    color: #fff;
    text-decoration: none;
    font-weight: 300;
    display: inline-block;
    text-transform: uppercase;
    height: 53px;
    padding: 9px 10px;
    cursor: pointer;
}
/* cloud popover menu related styles */

.cloud-menu .popover {
    border-radius: 0px;
    width: 24em;
    left: -21.35em !important;
    max-width: 32em;
    background-color: #006690
}
.cloud-menu .popover-title,.navbar-header .popover-title {
    background-color: #006690;
    font-size: 16px;
    border-bottom: none;
}
.cloud-menu .popover.bottom>.arrow{
    margin-left:-2px;
}
.cloud-menu .popover.bottom>.arrow:after,.navbar-header .popover.bottom>.arrow:after{
    border-bottom-color: #006690;
}
.cloud-block {
    float: left;
    width: 7.2em;
    height: 7.2em;
    background-color: #fff;
    margin: 0.5em 0em 0.5em 0.5em;
    text-align: center;
}
.cloud-block i{
    margin-top:5px;
}
.cloud-name {
    font-size:14px;
    margin-top: .5em;
    font-weight: 400;
}
.cloud-menu-popover {
    position: relative;
    float: right;
    padding: 1px 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    margin-top: 3px;
}
#cloud-menu-popover-xs {
    margin-top: 10px;
    color: #fff;
    padding: 6px 10px;
    border: none;
}
.navbar-toggle{
    border:none;
    border-radius: 0px;
}
.navbar-header .popover {
    border-radius: 0px;
    width: 21em;
    max-width:32em;
    background-color: #006690;
}
.navbar-header .popover .popover-content{
    padding:0px;
}
.cloud-menu .popover-content {
    padding: 0px;
}
.cloud-actions {
    background-color: #005578;
    float: left;
    position: absolute;
    width: 100%;
    left: 0px;
    overflow:hidden;
}
.cloud-actions h3 {
    font-size: 16px;
    font-weight: 400;
    padding-left: 14px;
    margin-top: 10px;
}
.cloud-block-invert {
    color: #fff;
    float: left;
    width: 7.2em;
    height: 7.2em;
    background-color: #1f1f1f;
    margin: 0.5em 0em 0.5em 0.5em;
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
}

.cloud-block-default {
    color: #006690;
    background-color: #fff;
    cursor: pointer;
}
.cloud-actions a:hover {
    color: #d7d5d5;
    background-color: #3d3d3d;
    text-decoration: none
}
.cloud-apps a {
    text-decoration: none;
    color: #006690;
    cursor: pointer
}
.cloud-apps a:hover {
    text-decoration: none;
    color: #006690;
    background-color: #c5c5c5;
}
.cloud-apps .cloud-actions a {
    color: #fff
}
/*footer section related styles*/

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #333333;
    z-index: 9999;
}
#footer,
#push {
    height: 36px;
}
.inner-wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -36px;
    width: 100%;
    position: absolute;
}
.footer-text {
    margin-top: 1em;
    color: #fff;
    font-size: 11px;
}

@media (max-width: 480px) {
    .cu-btn {
        width: 100%;
        margin-bottom: 5px;
    }
}

@media (min-width: 768px) {
    .menu-right {
        float: right;
        margin: 0px -15px;
    }
}
@media (min-width: 992px) {
    .description-action .cu-btn {
        font-size: 23px !important;
    }
}
@media (min-width: 1200px) {
    .listing .col-lg-2 {
        width: 13.666667%;
    }
    .modal-dialog-margin-top-md{
        margin-top:10%;
    }
    .modal-lg{
        width: 80%;
    }
    .modal-md{
        width: 60%;
    }
    .version-url{
        width:41.8%;
    }
}
/* use for landing page blocks*/

.cloud-app-select {
    background-color: white;
    padding: 1em;
    margin-top: 4em;
    min-height: 36em;
    position: relative;
}
.cloud-intro {
    margin-top: 1em;
    color: #fff;
}
.cloud-intro .description {
    margin-top: 2em;
}
.cloud-intro h1 {
    font-weight: 300;
}

.cloud-app-select .heading {
    margin: -14px -15px 0px;
    padding: 20px;
    text-align: center;
    background-color: #2980b9;
    color: #fff;
    font-size: 22px;
}
.cloud-app-select .footer-msg{
    position: absolute;
    color: #fff;
    font-size: 1.4em;
    top: .5em;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}
.cloud-app-select .trial-color{
    background-color: #F9BF3B !important;
}

.cloud-app-select .cloud-name {
    font-size: 22px;
    margin-top: 0.7em;
    font-weight: 300;
}
.row-full-height {
    height: 100%;
}
.col-full-height {
    vertical-align: middle;
}
.row-same-height {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.cloud-app-select .content {
    padding: .5em;
    max-height: 22em;
    overflow: hidden;
    color: #646464;
}
.cloud-app-select .btn-footer {
    position: absolute;
    bottom: 2em;
    left: 0em;
    background-color: rgb(237, 237, 237);
    width: 100%;
    margin-bottom: -2em;
    height: 8em;
}
.cloud-app-select .btn-footer button {
    margin-top: 2em;
    width: 80%;
    font-size: 1.5em;
    font-weight: bold;
}
.cloud-new-content {
    margin-top: 17em;
}
.cloud-new-content #app-create-button {
    margin-top: 2em;
    font-size: 30px
}
.cloud-new-content .help {
    margin-top: 2em;
}
.cloud-new-content h1 {
    font-weight: 300;
}
/* cloud new app type selection page related styles */

.cloud-app-type {
    background-color: #949494;
    margin-top: 3em;
    min-height: 13em;
    position: relative;
    z-index: 100;
    text-align: center;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
}

.cloud-app-type > .description {
    color: #fff;
    text-decoration: none;
    position: absolute;
    padding: 15px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    transform: translateY(100%);
    transition: all 0.35s ease;
    font-size: 14px;
}

.cloud-app-type > .description > i {
    opacity: 0.9;
    bottom: 0;
    left: 0;
    font-size: 25px;
    position: absolute;
    display: block;
}

.cloud-app-type:hover{
    transform: translateY(0%);
}

.cloud-app-type:hover > .description {
    transform: translate(0, 0);
}
.thumbnail {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.thumbnail.icon {
    border: none;
    margin: 0;
    background: none;
    color: #fff;
    text-align: center;
    overflow: hidden;
    position: relative;
}
.thumbnail.icon:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 93%;
}
.thumbnail.icon > .square-element {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.thumbnail.icon .square-element img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.thumbnail.icon img {
    width: 100%;
}
.cloud-app-type > .description > img {
    bottom: 3%;
    left: 3%;
    position: absolute;
    display: block;
    width:15%;
}
.app-thumbnail.icon .square-element img.app-img {
    top:46%;
}
.app-thumbnail.icon:before {
    padding-top: 78%;
}
.cloud-app-type .app-thumbnail img {
    width: 75%;
}
.fw-custom-x{
    font-size: 5.6em;
}
.cloud-app-type i {
    margin: .4em
}
.listing {
    position: relative;
    font-size: 16px;
}
.long {
    width: 100%;
    min-height: 13em;
    z-index: 99;
    background-color: #949494;
    margin-top: .6em;
    padding: 0em 2em 1em;
    color: #fff;
}
.cloud-app-selected {
    height: 14em ;
    margin-bottom: -0.6em;
}
@media (max-width: 1200px) {
    .cloud-app-selected {
        height: auto;
    }
}
@media (min-width: 2000px) {
    .cloud-app-selected {
        height: 19.1em;
    }
}
.type-name {
    position: absolute;
    bottom: 0px;
    margin-bottom: 11px;
    text-align: center;
    width: 85%;
}
.app-color-one {
    background-color: #676767;
    border-color: #676767;
}
.app-color-two {
    background-color: #37678d;
    border-color: #37678d;
}
.app-color-three {
    background-color: #e5a02b;
    border-color: #e5a02b;
}
.app-color-four {
    background-color: #e5a02b;
    border-color: #e5a02b;
}
.app-color-five {
    background-color: #6a7fb4;
    border-color: #6a7fb4;
}
.app-color-six {
    background-color: #449ab6;
    border-color: #449ab6;
}
.app-color-seven {
    background-color: #40d47e;
    border-color: #40d47e;
}
.app-color-eight{
    background-color: #F57B20;
    border-color: #F57B20;
}
.app-color-nine{
    background-color: #333;
    border-color: #333;
}
.longme h2 {
    font-weight: 300;
}
.app-description {
    font-weight: 300;
    margin-bottom: 0.5em;
}
.button-bar a {
    margin-right: 1em;
}
.description-action {
    margin-top: 4em;
    font-weight: 400;
}
.description-action .cu-btn {
    font-size: 31px;
    font-weight: 300;
}
.description-action span {
    font-size: 23px;
}
.cloud-selected-app-type-name h1 {
    font-weight: 200;
    margin-top: 1.5em;
}
/* application landing */

.app-preview h2 {
    color: #fff;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 2.5em;
}
.app-preview p {
    color: #cecece;
    font-weight: 400;
    font-size: 1em;
}
/* cloud new app creation */

.cloud-selected-app-type {
    margin: 1em 2em 1em 0px;
    padding: 1.5em;
}

.col-fixed-1x {
    width: 130px;
    margin-left: 15px;
}
.col-fixed-left {
    float: left;
}
.forms label {
    font-weight: 300;
}

.form-group label>.required {
    color: #E74C3C;
    font-weight: 400;
}

.forms .form-group {
    margin-bottom: 3.5em;
}
.forms input,
.forms textarea {
    border-radius: 0px
}
.btn-file {
    position: relative;
    overflow: hidden;
    border-radius: 0px;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}
/*.cu-btn-position{
    margin-top: 2em;
}*/
.cu-btn-position span {
    margin-top: 5px;
    margin-bottom: 5px;
}
/* application landing */

.app-preview {
    background: #464646;
    padding: 40px;
    min-height: 13em;
}
.app-preview h2 {
    color: #fff;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 2.5em;
}
.app-preview p {
    color: #cecece;
    font-weight: 400;
    font-size: 1em;
}
.app-preview .app-thumb {
    width: 140px;
    padding-top: 5px;
    float: left;
    max-height: 110px;
    overflow: hidden;
}
.app-preview .app-desc {
    float: left;
    border: 0px solid #ff0000;
}
.app-preview-action-bar {
    margin-top: 15px;
}
.app-preview-action-bar div.sec {
    float: left;
}
.prod-url {
    padding: 10px 15px 11px 20px;
    font-size: 1.1em;
    background: #343434;
    color: #f5f5f5;
    font-weight: 500;
}
.prod-url a {
    color: #cecece;
}
.prod-url i {
    margin-left: 20px;
    color: #9c9c9c;
}
/*product listing page */

.cloud-app {
    background-color: #949494;
    margin-top: 3em;
    min-height: 13em;
    position: relative;
    z-index: 100;
    padding: 1em;
    text-align: center;
    color: #fff;
    cursor: pointer;
}
.app-sort-bar {
    position: relative;
}
.app-listing {
    position: relative;
    top: 5em;
}

.app-listing-loader{
    margin-top: -10px;
}
#search-apps {
    border-radius: 0px;
    height: 40px;
    font-size: 18px;
    font-weight: 300;
}
.app-sort-bar .search i {
    color: #303030;
    position: absolute;
    top: 6px;
    right: 22px;
    cursor: pointer;
}
.app-sort-bar .sort i {
    color: #fff;
}
.cloud-app-listing {
    width: 100%;
    position: relative;
    margin-bottom: 2em;
    cursor: pointer;
}
.cloud-app-listing i.app-type-icon {
    position: absolute;
    z-index: 98;
    right: 16px;
    padding: 6px;
    background-color: #383d44;
    top: 0;
    color:#fff;
}
.app-thumb span {
    padding: 7px;
    background-color: #626262;
    border-radius: 19px;
    width: 33px;
    z-index: 99;
    position: absolute;
    left: 130px;
    top: 135px;
}
.app-thumb span i {
    padding-left: 4px;
}
.app-icon {
    border: none;
    margin: 0;
    background: #2c313b;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.app-icon:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 100%;
}
.app-icon > .square-element {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.app-icon img {
    width: 100%;
}
.app-icon .square-element:before {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.app-name, .app-extra{
    position: absolute;
    color:#fff;
    bottom: 0;
    padding: 12px 5px 2px;
    width: 100%;
    min-height: 3em;
    font-size: 17px;
    background-color: #383d44;
    font-weight: 300;
}

.app-name i{
    position: relative;
}
.app-extra{
    right: 0;
    width: 2%;
    padding: 14px 12px 2px;
    background-color: #434548;
}
.app-extra-menu{
    right: 0px;
    left: inherit;
    border: none;
    border-radius: 0px;
    margin-top: 0px;
    background-color: #434548;
}
.app-extra-menu li a{
    color: #fff;
}

.app-run-time{
    color: #E9E9E9;
    font-weight: 500;
    font-size: 1em;
    border-left: 3px solid #9D9D9D;
    padding-left: .2em;
}
.app-run-time span{
    font-weight: 400;
    font-style:normal;
}
/* cloud app details */

.side-pane-trigger {
    float: left;
    margin-left: 14px;
    margin-top: -1px;
    background-color: #006690
}
.side-pane-trigger i {
    padding: 15px 15px 14px;
    cursor: pointer;
    font-size: 1.5em;
}
.side-pane-trigger:hover {
    background-color: #005578
}
.right-pane {
    position: absolute;
    width: 100%;
}
.left-pane {
    position: fixed;
    width: 18em;
    z-index: 100;
    background-color: #222222;
    left: -18em;
    top: 53px;
    min-height: 100%;
    overflow-y: auto;
}
.notification-pane {
    position: fixed;
    width: 24em;
    z-index: 100;
    background-color: #222222;
    right: 0em;
    top: 103px;
    min-height: 100%;
}
.notification-pane-trigger {
    position: absolute;
    left: -54px;
    padding: 17px;
    height: 53px;
    background-color: rgb(34, 34, 34);
    cursor: pointer;
}
.notifications {
    padding: 10px 6px 10px;
    overflow-y: scroll;
}
.notification-msg {
    padding: 5px 10px;
    background-color: rgb(46, 46, 46);
    margin-bottom: 7px;
    float: left;
    width: 100%;
    border-left: 4px solid;
}
.noti-success {
    color: #5cb85c;
    border-left-color: #5cb85c;
}
.noti-warning {
    color: #f0ad4e;
    border-left-color: #f0ad4e;
}
.noti-error {
    color: #e74c3c;
    border-left-color: #e74c3c;
}
.notifications .notification-time {
    color: #666;
    font-size: .7em;
    float: left;
    margin-left: 23px;
    margin-top: 6px;
}
.msg>span {
    color: rgb(182, 182, 182);
    display: block;
    float: left;
    width: 90%;
    margin-left: 2%;
}
.notification-msg i {
    margin-right: 5px;
    float: left;
    margin-top: 4px;
}
.new-notifications{
    background-color: red;
    height: 8px;
    width: 8px;
    margin: -4px 20px;
    border-radius: 50px;
    display: none;
}
.spin-overide{
    color: rgb(182, 182, 182) !important;
}

.app-content-section {
    margin-top: 105px;
}
.app-overview-section {
    margin-top: 85px;
}
.app-list {
    padding-bottom: 100px;
}
.left-pane ul {
    margin-top: 52px;
    list-style: none;
    padding-left: 0;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
}
.left-pane ul li {
    cursor: pointer;
}
.left-pane ul li i {
    padding-right: 10px;
    font-size: 1.5em;
}
.left-pane ul li:hover > a{
    background-color: #101010;
}

.left-pane ul li ul{
    margin-top:0px;
}
.left-pane ul li ul li a{
    background-color: #222;
    padding-left:46px;
}
.left-pane ul li ul li a:hover {
    background-color: #1b1b1b;
}
.left-pane ul li.active a{
    color: #fff;
}
.left-pane a{
    color: #fff;
    display: block;
    padding: 16px 22px 12px;
}

.left-pane a:hover{
    color: #fff;
    text-decoration: none;
}
.left-pane li.active {
    background-color: #171717;
}
.block-anch:hover{
    text-decoration: none;
    cursor: pointer;
    color: #e3e3e3;
}

.block-general {
    margin-top: 1em;
    background-color: #2f343a;
    padding-top: 1em;
    padding-bottom: 1em;
}

.block-general a, .block-team a, .block-database a, .block-default a,.block-apis a{
    color:#fff;
}
.block-default h3,.block-apis h3{
    text-align:center;
}
.block-general h3,
.block-team h3,
.block-database h3,
.block-default h3,
.block-apis h3{
    font-weight: 300;
    margin-top: 8px;
}
.block-team h3, .block-database h3{
    margin-top:3px;
}
.block-general h3,.block-default h3,.block-apis h3{
    margin-bottom: 30px;
}
.version-number button{
    color:#fff;
    background-color:#757575;
    border:none;
    padding:10px 22px;
}
.version-number .dropdown-menu{
    margin:0px;
    border:none;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}
.version-url {
    float: left;
    padding: 10px;
    background-color: #8b8b8b;
    border-color: transparent;
    max-width: 62%;
    min-width: 40%;
}
.version-url>a>span{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.url-loading i{
    float: left;
    margin: 2px 3px;
}
.url-loading i:before,.url-loading i {
    -webkit-animation: fw-hide 2s cubic-bezier(0, -2.15, 0.2, 0.32) infinite;
    animation: fw-hide 2s cubic-bezier(0, -2.15, 0.2, 0.32) infinite;
    -moz-animation: fw-hide 2s infinite;
}
.url-loading span:after{
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    -moz-animation: ellipsis 2s infinite;
    -webkit-animation: ellipsis 2s infinite;
    animation: ellipsis 2s infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
}

@keyframes fw-hide {
    0%, 30%  {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fade-pulse {
    0% {
        opacity: 1;
    }
    20% {
        opacity: .6;
    }
    100% {
        opacity: 1;
    }
}

@keyframes ellipsis {
    from {
        width: 2px;
    }
    to {
        width: 15px;
    }
}
.block-default-color{
    background-color: #666;
}
.block-color-1{
    background-color: #03A678 !important;
}
.block-color-2{
    background-color: #E26A6A !important;
}
.block-color-3{
    background-color: #34495E !important;
}
.block-apis{
    min-height: 20em;
    margin-top: 1em;
}
.block-apis > div{
    padding: 1em 0em;
    min-height: 20em;
}
.block-default{
    min-height: 20em;
    margin-top: 1em;
    padding: 1em;
}
.block-replicas{
    min-height: 16em;
    max-height: 16em;
    margin-top: 1em;
    padding: 1em;
    border-right: 1px dashed rgba(255, 255, 255, 0.21);
    width: 230px;
    float: left;
}
.block-replicas:last-child{
    border:none;
}
.view-log{
    font-size: 11px;
    background-color: #343434;
    padding: .5em;
}
.node-cicle:hover{
    color: white;
}
.node-cicle span{
    cursor: pointer;
}

.node-cicle {
    position: relative;
    display: inline-block;
    color: #999;
    font-size: 20px;
    text-align: center;
}

.node-cicle figcaption {
    padding: 50px 25px;
    width: 190px;
    height:190px;
    border: 20px solid rgba(240, 240, 240, 0.2);
    border-radius: 100px;
    line-height: 50px;
}


svg .outer {
    stroke: #2ecc71;
}

.node-cicle svg {
    position: absolute;
    top: 0;
    left: 0;
}

.outer {
    fill: transparent;
    stroke: #333;
    stroke-width: 20;
    stroke-dasharray: 534;
    transition: stroke-dashoffset 1s;
    -webkit-animation-play-state: running;
    /* firefox bug fix - won't rotate at 90deg angles */
    -moz-transform: rotate(-89deg) translateX(-190px);
}

.node-cicle[data-percent='100'] .outer {
    stroke-dashoffset: 0;
    -webkit-animation: show100 2s;
    animation: show100 2s;
}

@-webkit-keyframes show100 {
    from {
        stroke-dashoffset: 537;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes show100 {
    from {
        stroke-dashoffset: 537;
    }
    to {
        stroke-dashoffset: 0;
    }
}



.block-life-cycle,
.block-repos,
.block-issues,
.block-runtime,
.block-monitoring,
.block-team,
.block-replica,
.block-database {
    margin-top: 1em;
    padding: 18px;
}
.block-team {
    background-color: #95a5a6;
}
.block-database {
    background-color: #0090d9;
}
.block-life-cycle {
    background-color: #2f343a;
}

.block-repos {
    background-color: #735f87;
    min-height: 24em;
}
.block-issues, .block-monitoring {
    background-color: #0aa699;
    min-height: 24em;
}
.block-runtime{
    background-color: #e67e22;
    min-height: 24em;
}
.block-replica {
    background-color: #464646;
    min-height: 24em;
}
.block-msg{
    background-color: #464646;
    font-size: 1em;
    padding: 15px 15px;
}
.block-msg a {
    text-decoration: none;
}
.block-msg .user-dir:hover {
    cursor: pointer;
    text-decoration: underline;
}
.block-action-button {
    margin-top: 10px;
    padding: 8px;
    cursor: pointer;
    background-color: #383d44;
    text-decoration: none;
}
.block-action-button:hover {
    text-decoration: none;
}
.block-database,
.block-team {
    width: 100%;
}
.block-number {
    font-size: 5em;
    font-weight: 300;
    margin-top: -14px;
}
.block-text {
    font-size: 40px;
    margin-left: -5px;
    font-weight: 300;
}
.block-number-sm {
    font-size: 4em;
    font-weight: 300;
    margin-top: 8px;
}
.block-default .block-action-button,
.block-apis .block-action-button{
    text-align:center;
}
.block-default .block-action-button:hover,
.block-apis .block-action-button:hover{
    background-color:rgba(225, 225, 225, 0.2);
}
.block-team .block-action-button:hover {
    background-color: rgb(111, 121, 122);
}
.block-team .block-repos:hover {
    background-color: rgb(111, 121, 122);
}

.block-database .block-action-button:hover {
    background-color: rgb(0, 95, 143)
}
.block-team .block-icon,
.block-database .block-icon {
    margin-top: 1em;
}
.block-apis {
    margin-top:20px;
}
.btn-create-version {
    float: right;
    padding: 8px;
    cursor: pointer;
}
.btn-create-version:hover {
    background-color: rgb(29, 42, 56);
}
.block-life-cycle .block-action-button:hover {
    background-color: #424850;
    color: rgba(255,255,255,0.75);
}

.block-issues .block-action-button:hover {
    background-color: rgb(4, 97, 89);
}

.block-runtime .block-action-button:hover {
    background-color: #d35400;
}

.block-description-multiline {
    margin-left: 4em;
    font-size: 1.3em;
    font-weight: 300;
    border-left: 1px solid #fff;
    padding: 10px 20px;
}
.block-description {
    width:67%;
    font-size: 1.3em;
    font-weight: 300;
}

.permission-change-block {
    background-color: #034A6F;
    width: 100%;
}

.permission-change-block .block-action-button{
    width: 100%;
    text-align: center;
    margin-top:0px;
}

.btn-edit li {
    font-size: 1.42em;
    font-weight: 100;
}
.left-pane .selected {
    background-color: #101010;
}
/* issues page */

.msg-issues {
    background: #d9edf7;
    padding: 40px 20px 10px;
    font-size: 1.2em;
    font-weight: 300;
    color: #31708f
}

.msg-issues-info {
    background: #0498d5;
    padding: 40px 20px 10px;
    font-size: 1.2em;
    font-weight: 300;
}

.msg-issues-warn {
    background: #bb9700;
    padding: 40px 20px 10px;
    font-size: 1.2em;
    font-weight: 300;
}
.gray-hr {
    border-top: 1px solid #666;
    margin-top: 60px;
}
.blue-hr {
    border-top: 1px solid #0498d5;
    margin-top: 30px;
    margin-bottom: 30px;
}
.dark-hr{
    border-bottom: 1px solid #000;
}
.dotted{
    border-top:2px dotted #666;
}
.comment-line {
    margin-bottom: 20px;
}
.comment-line:last-child {
    margin-bottom: 50px;
}
.comment-line p {
    color: #999;
    padding: 20px;
    background: #202020;
    border: 1px solid #353535;
    margin-bottom: 0px;
}
.comment-line>span {
    padding: 4px 8px;
    color: #666;
    font-size: 11px;
    background: #353535;
}
.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 23px 23px 0;
    border-color: transparent #353535 transparent transparent;
}
.add-issue-content {
    margin-top: 2em;
}
.add-issue-content h1, .add-issue-content h4 {
    font-weight: 300;
}
.add-issue-content a {
    margin-top: 2px;
    font-size: 25px;
    padding: 10px 30px;
    text-align: center;
}
@media (max-width: 480px) {
    .add-issue-content a {
        font-size: 20px;
    }
}
.add-issue-content #start-sample-btn {
    font-size: 18px;
    text-decoration: underline;
}
.add-issue-content a span.fw-stack {
    font-size: 20px;
}
.form-group label.error {
    line-height: 1.5em;
    color: rgb(255, 255, 255) !important;
    background-color: #e74c3c;
    width: 100%;
    padding: 5px 10px;
    border-left: 5px solid #942F25;
    font-weight: 500;
}

.form-group label.warning{
    line-height: 1.5em;
    color: rgb(255, 255, 255) !important;
    background-color: #f0ad4e;
    width: 100%;
    padding: 5px 10px;
    border-left: 5px solid #F09436;
    font-weight: 500;
}

.form-group label.success {
    line-height: 1.5em;
    color: rgb(255, 255, 255) !important;
    background-color: #5cb85c;
    width: 100%;
    padding: 5px 10px;
    border-left: 5px solid #428342;
    font-weight: 500;
}

.loading-overlay {
    width: 98%;
    top: 14px;
    left: 15px;
    min-height: 98%;
    background-color: rgba(0, 0, 0, 0.95);
    position: absolute;
    z-index: 99;
}
.help-tips {
    margin-left: 4px;
    margin-top: 2px;
}

/* notification customization */
/* noti overides */
#noty_topCenter_layout_container{
    top: 133px !important;
    width: 500px !important;
}
#noty_topCenter_layout_container li{
    border-radius: 0px !important;
    width:500px !important;
}

.noty_close{
    background:none !important;
    top: 0px !important;
    right: 0px !important;
}

.noty_close:before{
    content: 'x';
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 10px !important;
    background-color: #333 !important;
    text-shadow: none;
    opacity: 1;
    float: right;
}

.alert{
    border-radius: 0px;
    min-height:30px;
    padding: 5px !important;
}
.alert-success {
    background-color: #27ae60;
    border-color: #40D47E;
    border-radius: 0px;
    color: #fff;
    padding: 0px;
}
.alert-info .close{
    color:#666;
}
.alert-error {
    line-height: 1.5em;
    color: rgb(255, 255, 255) !important;
    background-color: #e74c3c;
    width: 100%;
    padding: 5px 10px;
    border-left: 5px solid #942F25;
    font-weight: 500;
}

.alert .close{
    background-color:#333;
    color:#fff;
    text-shadow:none;
    opacity:1;
    padding:5px 10px;

}
.alert-pending .close{
    margin-top: -15px;
    margin-right: -15px;
}
.alert .alert-content-block{
    display:block;
    padding:15px;
    font-size: 16px;
}

.alert-extra-content {
    background-color: #50E28E;
    padding: 10px 15px;
    color: #333;
}
.alert-extra-content ul{
    list-style: decimal;
}
.agentURLContainer .alert{
    padding: 5px 13px;
    min-height:auto;
}

.agentURLContainer .alert-success{
    margin: 0px;
}

/* ========================================================================
 * Message status
 * ======================================================================== */
.message {
    padding: 20px;
    margin: 10px 0;
    border-left: 5px solid transparent;
    background: #333;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.message-success {
    border-left-color: #5cb85c;
}
.message-success span {
    color: #5cb85c;
}
.message-warning {
    border-left-color: #f0ad4e;
}
.message-warning span{
    color: #f0ad4e;
}
.message-info {
    border-left-color: #009DA7;
}
.message-info span {
    color: #009DA7;
}
.message-danger {
    border-left-color: #d9534f;
}
.message-danger span {
    color: #d9534f;
}
.message span {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 16px;
}
.message p:last-child {
    margin-top: 10px;
    margin-bottom: 0;
}
.message span .icon {
    padding-bottom: 3px;
    margin-right: 5px;
}
.message-info a{
    color: #009DA7;
}
/* ========================================================================
 * loading styles
 * ======================================================================== */

.loading {
    /*position: relative; */
}

.loading .loading-bg {
    background: #000;
    position: absolute;
    opacity: 0.9;
    height: 100%;
    width: 100%;
    z-index: 10000000;
}

.loading .loading-animation {
    position: absolute;
    z-index: 10000001;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 75px;
    -webkit-transform: translate(-50%, -50%);
}

.loading .loading-animation .loading-logo {
    position: relative;
}

.loading .loading-animation .loading-logo .pulse-line,
.loading .loading-animation .loading-logo .circle {
    fill: none;
    stroke: #fff;
}

.loading .loading-animation .loading-logo .circle {
    stroke-dasharray: 100;
    opacity: 0.5;
}

.loading .loading-animation .loading-logo .pulse-line {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: dash 4s linear  infinite;
    opacity: 0;
}

@keyframes dash {
    0% {
        opacity: 0.9;
    }
    10% {
        stroke-dashoffset: 200;
        opacity: 0.9;
    }
    70% {
        stroke-dashoffset: 500;
        opacity: 0.9;
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.loading .loading-animation .loading-logo .signal {
    border: 5px solid #fff;
    border-radius: 50px;
    height: 50px;
    width: 50px;
    opacity: 0;
    position:absolute;
    top: -1px;
    left: -4px;
    animation: pulsate 4s ease-out infinite;
    animation-delay: 1.5s;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@keyframes pulsate {
    0%, 30%  {
        transform: scale(0.9);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    60% {
        transform: scale(1.2);
        opacity: 0;
    }
}

.loading .loading-animation p {
    color: #fff;
    text-align: center;
    font-size: 11px;
    margin-top: 4px;
}


/* button loading */
.loading-logo {
    position: relative;
    display: inline-block;
    width: 3em;
    height: 3.35em;
    line-height: 3em;
    vertical-align: middle;
}

.loading-logo .pulse-line,
.loading-logo .circle {
    fill: none;
    stroke: #fff;
}

.loading-logo .circle {
    stroke-dasharray: 100;
    opacity: 0.5;
}

.loading-logo .pulse-line {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: dash 4s linear  infinite;
    opacity: 0;
}

.loading-logo  svg{
    margin-top: 3px;
}

.loading-logo .signal {
    border: 5px solid #fff;
    border-radius: 50px;
    height: 3em;
    width: 3em;
    opacity: 0;
    position:absolute;
    top: 3px;
    animation: pulsate 4s ease-out infinite;
    animation-delay: 1.5s;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}



.datatable td a{
    color: #fff;
    cursor: pointer;
}
.datatable td a:hover{
    color: #fff;
}

.password-generator{
    border-radius: 0px;
    margin-top: 1.7em;
}
.hide-pass{
    float: right;
    margin-top: -27px;
    margin-right: 7px;
    cursor: pointer;
    color: rgb(40, 40, 40);
}

.hide-pass>i{
    font-size: 1.5em;
}
.progress{
    border-radius: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.progress-bar-label{
    padding: 3px 0px;
}
.stage-progress-container .progress{
    height: 25px;
}

.modal-title{color: #000;}
.modal-content, .btn{border-radius: 0px;}

#password-modal{
    margin-top: 4em;
}
.password-meter {
    width: 214px;
    color: #000;
    border-radius: 0px;
}

.switch .toggle-button:before {
    position: absolute;
    left: 0;
    top: 2px;
    display: block;
    content: "";
    width: 45px;
    height: 16px;
    cursor: pointer;
    background: #a6a6a6;
    margin-left: 2px;
    z-index: 1;
    border-radius: 8px;
}

.switch input[type=checkbox] {
    position: absolute;
    opacity: 0;
}

.switch input[type="checkbox"] + .toggle-button:after {
    background: #444;
}

.switch input[type="checkbox"] + .toggle-button:after {
    position: absolute;
    left: 22px;
    top: -2px;
    display: block;
    content: "";
    width: 24px;
    height: 24px;
    cursor: pointer;
    background: #237bd5;
    z-index: 2;
    border-radius: 12px;
    -webkit-transition: left 0.2s ease-in-out;
    -moz-transition: left 0.2s ease-in-out;
    -o-transition: left 0.2s ease-in-out;
    transition: left 0.2s ease-in-out;
}

.switch input[type="checkbox"]:checked + .toggle-button + .text {
    display: inline-block;
}

.switch .toggle-button:before {
    position: absolute;
    left: 0;
    top: 2px;
    display: block;
    content: "";
    width: 45px;
    height: 16px;
    cursor: pointer;
    background: #a6a6a6;
    margin-left: 2px;
    z-index: 1;
    border-radius: 8px;
}
.switch input[type="checkbox"] + .toggle-button:after {
    position: absolute;
    left: 22px;
    top: -2px;
    display: block;
    content: "";
    width: 24px;
    height: 24px;
    cursor: pointer;
    background: #237bd5;
    z-index: 2;
    border-radius: 12px;

    -webkit-transition: left 0.2s ease-in-out;
    -moz-transition: left 0.2s ease-in-out;
    -o-transition: left 0.2s ease-in-out;
    transition: left 0.2s ease-in-out;
}
.switch input[type="checkbox"]:not(:checked) + .toggle-button:after {
    left: 2px !important;
    background: #eaeaea;
    border: 1px #eaeaea solid;
}

.switch input[type="checkbox"]:not(:checked) + .toggle-button:before {
    background: #a6a6a6 !important;
}
.switch input[type="checkbox"]:disabled + .toggle-button:after {
    background: #a6a6a6 !important;
    outline: 2px #a6a6a6 solid !important;
}
.switch input[type="checkbox"]:disabled + .toggle-button:before {
    cursor: default !important;
    background: #e0e0e0 !important;
    outline: 2px #ccc solid !important;
}

.switch .toggle-button{
    position: absolute;
    margin-top: -8px;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control,
.modal .form-control[disabled],.modal .form-control[readonly], fieldset[disabled] .form-control{
    background-color: #CACACA ;
}
.form-control,.has-error .form-control:focus,.modal .form-control,.has-error .modal .form-control:focus{
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}
/* custom URL section */
.form-section{
    margin-top: 3em;
}

.modal-content{
    background-color:#464646;
}
.model-body{
    color:#666;
}
.modal-header,.modal-footer{
    border-color:#404040;
}
.modal-title{
    color:#fff;
}
.no-pad-right{
    padding-right:0px;
}
.no-pad-left{
    padding-left:0px;
}
.no-pad-both{
    padding-left:0px;
    padding-right:0px;
}
.padding-top-xs{
    padding-top:.5em;
}
.padding-all-xs{
    padding:.5em;
}
.padding-top-sm{
    padding-top:1em;
}
.padding-top-md{
    padding-top:2em;
}
.padding-bottom-lg{
    padding-bottom:30px;
}
.padding-bottom-xlg{
    padding-bottom:4em;
}

.section-title {
    font-size: 17px;
    margin: 20px 0px 14px 0px;
    background-color: #3C3C3C;
    padding: 3px 10px;
}

.log-container{
    margin-top: 2em;
    display: none;
}
.log-container > pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #cecece;
    word-break: break-all;
    word-wrap: break-word;
    border: 1px solid #444;
    background-color:#333;
    border-radius:0;
    max-height: 340px;
}
.note{
    padding: 10px;
}
.note i{
    margin: 5px;
}
.note p{
    width: 94%;
}
#date{
    height: 42px;
}

.members-result-container h4, .members-result-container p {
    padding: 0px;
    margin: 0px;
}
.members-result-container h4{
    margin-bottom: 5px;
}
.members-result-container{
    padding-left: 10px;
}
.member-detail{
    max-width: 90%;
}

.fw-1-5x{
    font-size: 1.5em;
}
.app-desc h2{
    margin-top:0px;
}
@media (max-width: 1200px) {
    .version-url{
        width:44.4%;
    }
    .btn-edit-code > a{
        margin-top:-3px;
    }
    .block-action-button,.block-life-cycle .block-action-button{
        width:100%;
    }
    .block-description-multiline{
        font-size:1em;
        margin-left:1em;
        padding:10px 16px;
    }
    .block-description{
        font-size:1em;
        margin-top:1em;
    }
    .block-general.fw-5x,.block-team.fw-5x ,.block-database.fw-5x{
        font-size:4em;
    }
    .modal-dialog-margin-top-md{
        margin-top:10%;
    }
    .modal-lg{
        width: 95%;
    }
    .modal-md{
        width: 80%;
    }
}
@media (max-width: 992px) {
    .version-url{
        width:45.1%;
    }
    .block-general h3, .block-team h3, .block-database h3{
        font-size:20px;
    }
    .block-action-button{
        margin-top:10px;
        text-align:center;
    }
    .permission-change-block{
        margin-top:1em;
    }
    .permission-change-block .block-action-button{
        margin-top:0px;
    }
    .block-description{
        width:100%;
        font-size:1.3em;
        margin-top:1em;
    }
    .block-general.fw-5x,.block-team.fw-5x ,.block-database.fw-5x{
        font-size:4em;
    }
    .btn-create-version + .popover .popover-title{
        font-size:14px;
    }
    .border-left-light{
        border-left:none!important;
        border-top:1px solid #999!important;
        margin-top:1em!important;
        padding-top:1em!important;
    }
}
@media (max-width: 768px) {
    .version-url{
        width:46.8%;
    }
    .btn-edit-code > a{
        margin-top:-3px;
    }
    .block-description-multiline{
        margin-left:5em;
        font-size:1.3em;
    }
    .block-general.fw-5x,.block-team.fw-5x ,.block-database.fw-5x{
        font-size:4em;
    }
    .block-description{
        width:62%;
    }
    .modal-dialog-margin-top-md{
        margin-top:10%;
    }
    .modal-lg{
        width: auto;
    }
    .modal-md{
        width: auto;
    }
}
@media (max-width: 480px) {
    .version-url{
        width:100%;
    }
    .version-number{
        margin-bottom:1px;
    }
    .version-number,.version-number button,.version-number .dropdown-menu{
        width:100%;
    }
    .btn-launch-app{
        width:60%;
    }
    .btn-edit-code{
        margin-left:0px;
    }
    .btn-edit-code > a{
        margin-top:0px;
    }
    .app-desc h2{
        margin-top:20px;
    }
    .navbar-header .popover {
        width: 100%;
        max-width:100%;
    }
}
.btn-launch-app,.btn-edit-code{
    border:none;
}

.btn-edit-code{
    margin:0px;
    margin-left:-4px;
}
.btn-edit-code > a{
    border:none;
    line-height:20px;
    margin-top:-3px;
}
.invitaiton_list{
    list-style:none;
    margin-left:0px;
    margin-top:10px;
    margin-bottom:10px!important;
    padding-left:15px;
}
.invitaiton_list li span{
    display:inline-block;
    min-width:200px;
}
.margin-top-xs{
    margin-top:1em;
}
.margin-bottom-xs{
    margin-bottom:1em;
}
.margin-bottom-md{
    margin-bottom:3em;
}
.no-gutter-right{
    padding-right:0px;
}


/* pasword strength meter */
.password_strength_meter .popover {
    color:#fff;
    width:340px;
    max-width:340px;
    background-color:#464646;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}
.password_strength_meter .popover .popover-content{
    padding:0px;
}
.password_strength_meter .popover .popover-title{
    color:#fff;
    font-weight:bold;
    background-color:#464646;
    border-bottom-color:#404040;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}
.password_strength_meter .pwd_str{
    border-top:1px solid #404040;
    padding:10px 15px;
    background-color:#3C3C3C;
}
.password_strength_meter #pswd_info{
    padding:10px 15px;
    color:#999;
}
.password_strength_meter #passwordDescription{
    color:#fff;
}
.password_strength_meter .popover.right>.arrow:after{
    border-right-color:#464646;
}
.password_strength_meter .popover.top>.arrow:after{
    border-top-color:#464646;
}
#password_strength_wrap {
    border: 1px solid #D5CEC8;
    display: none;
    float: left;
    padding: 10px;
    position: relative;
    max-width: 320px;
}
#password_strength_wrap:before, #password_strength_wrap:after{
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    border: 10px solid transparent; /* arrow size */
}
#password_strength_wrap:before{
    border-bottom: 7px solid rgba(0, 0, 0, 0);
    border-right: 7px solid rgba(0, 0, 0, 0.1);
    border-top: 7px solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    left: -18px;
    position: absolute;
    top: 10px;
}
#password_strength_wrap:after{
    border-bottom: 6px solid rgba(0, 0, 0, 0);
    border-right: 6px solid #fff;
    border-top: 6px solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    left: -16px;
    position: absolute;
    top: 11px;
}
#pswd_info ul {
    list-style-type: none;
    margin: 5px 0 0;
    padding: 0;
}
#pswd_info .status_icon{
    margin-right:5px;
}
#pswd_info ul li.valid {
    color: #27ae60;
}
#passwordStrength {
    display: block;
    height: 5px;
    margin-bottom: 10px;
    transition: all 0.4s ease;
}
.strength0 {
    background: none; /* too short */
    width: 0%;
}
.strength1 {
    background: none repeat scroll 0 0 #FF4545;/* weak */
    width: 25%;
}
.strength2 {
    background: none repeat scroll 0 0 #FFC824;/* good */
    width: 50%;
}
.strength3 {
    background: none repeat scroll 0 0 #6699CC;/* strong */
    width: 75%;
}

.strength4 {
    background: none repeat scroll 0 0 #27ae60;/* best */
    width: 100%;
}

.role_type{
    font-size: 11px;
    display:inline-block;
    margin-left:10px;
}
.org_type{
    font-size: 11px;
    background:#464646;
    padding:4px 8px;
}
.role_type_tag{
    display:inline-block;
    border:1px solid #464646;
    padding:2px 8px;
    background:#555;
}
.role_type .triangle{
    float:left;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 14px 21px 0;
    border-color: transparent #464646 transparent transparent;
    line-height: 2;
}

/*App factory*/
.AF .triangle{
    border-color: transparent #22A7F0 transparent transparent;
}
.AF .org_type{
    background:#22A7F0;
}
.AF .role_type_tag{
    border-color:#22A7F0;
}
/*Api manager*/
.APIM .triangle{
    border-color: transparent #D64541 transparent transparent;
}
.APIM .org_type{
    background:#D64541;
}
.APIM .role_type_tag{
    border-color:#D64541;
}
/*other*/
.OTHER .triangle{
    border-color: transparent #fb8c00 transparent transparent;
}
.OTHER .org_type{
    background:#fb8c00;
}
.OTHER .role_type_tag{
    border-color:#fb8c00;
}


.data-select-all,.structure-select-all{
    margin-left:3px;
}

.not-active{
    pointer-events: none;
    cursor: default;
    opacity: 0.3;
}

.cloud-tab .tab-content{
    background: #464646;
    padding: 20px;
}

.cloud-tab .nav-tabs{
    font-size:1.2em;
    border-color:#222;
}
.cloud-tab .nav-tabs>li>a{
    color:#666;
    border:none;
    border-top:2px solid transparent;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;

}
.cloud-tab .nav>li>a:hover,.cloud-tab .nav>li>a:focus{
    color:#c5c5c5;
    border:none;
    border-top:2px solid transparent;
    background:none;
}
.cloud-tab .nav-tabs>li.active>a,.cloud-tab .nav-tabs>li.active>a:hover,.cloud-tab .nav-tabs>li.active>a:focus{
    border:none;
    border-top:2px solid #c5c5c5;
    color:#c5c5c5;
    background:#464646;
}
.notification-glow {
    -webkit-animation: glow .5s infinite alternate;
    -moz-animation: glow .5s infinite alternate;
    animation: glow .5s infinite alternate;
}

@keyframes glow {
    to {
        text-shadow: 0 0 10px red;
    }
}


.new-tag{
    position:absolute;
    height:auto;
    background-color:#fff;
    border:1px solid #333;
}
.new-tag-desc{
    border-bottom:1px solid #ccc;
}
.new-tag-desc p{
    padding:10px;
    color:#333;
}
.add-tag{
    margin-top:20px;
}
.new-tag-container{
    padding:10px;
    color: #333;
}

/* noty overide */
.noty_buttons {
    background-color: #404040 !important;
    border-top: 1px solid #474747 !important;
}

.datepicker-container{
    position: relative;
}
.datepicker-container i{
    position: absolute;
    top: 3px;
    right: 10px;
    color: #282828;
}

.img-container{
    width:110px;
    height:110px;
}
th.hide-column-data, td.hide-column-data {
    display: none;
}

.doc-icon{
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background:#fff;
}
.input-wrap .input-group-btn.btn-input-right {
    width: 0;
    display: inline-block;
}
.input-wrap .btn-input-right .btn {
    position: absolute;
    right: 1px;
    top: -10px;
    border: none;
    z-index: 10;
}
.input-group-btn-check, .btn-add{
    vertical-align: top;
}
.btn-gray{
    color: #fff;
    background-color: #464646;
    border-color: #464646;
}
.btn-gray:hover,.btn-gray:active{
    color: #fff;
    background-color: #5d5d5d;
    border-color: #5d5d5d;
}
.btn-lightgray{
    color: #333;
    background-color: #c3c3c3;
    border-color: #c3c3c3;
}
.btn-lightgray:hover,.btn-lightgray:active{
    color: #333;
    background-color: #d9d9d9;
    border-color: #d9d9d9;
}
.roles-container .org_type{
    padding: 4px 10px 4px 19px;
    margin-right: -1px;
}
.roles-container .role_type {
    color:#fff;
}
.edit-roles .role_type_tag{
    padding: 2px 8px 2px 15px;
}

.tooltip-inner {
    max-width:600px;
}
.table-buildlogs{
    font-size:14px;
    color:#999;
}
.table-buildlogs td{
    line-height:35px !important;
}
.table-borderless>thead>tr>th, .table-borderless>tbody>tr>th, .table-borderless>tfoot>tr>th, .table-borderless>thead>tr>td,
.table-borderless>tbody>tr>td, .table-borderless>tfoot>tr>td{
    border: none;
}
.table-notification-msg{
    display:inline-block;
    width:2px;
    height:33px;
    margin-right:7px;
    border:none;
}
.table-notification-i{
    margin-top: -27px;
}
.table-noti-error{
    background-color:#e74c3c;
}
.table-noti-success{
    background-color:#40d47e;
}
.table-noti-default{
    background-color:#00aeef;
}
.nav-tabs-wizard{
    padding-bottom:1px;
    border-bottom:1px solid #626262;
}
.strikethrough:checked + span{
    text-decoration:line-through
}

.disabled-tab{
    pointer-events: none;
}
.nav-tabs-wizard>li>a{
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    padding:0px;
}
.nav-tabs-wizard>li>a, .nav-tabs-wizard>li>a:hover, .nav-tabs-wizard>li>a:focus{
    background-color:#6a6a6a;
    border:none;
    color:#bbbbbb;
}

.nav-tabs-wizard>li.active>a, .nav-tabs-wizard>li.active>a:hover, .nav-tabs-wizard>li.active>a:focus{
    background-color:#0196d8;
    border:none;
    color:#fff;
}

.nav-tabs-wizard .step-number{
    float:left;
    width:18%;
    background-color:#626262;
    margin-left:5px;
    padding:10px 20px;
    text-align:center;
}
.nav-tabs-wizard .active .step-number{
    background-color:#1f7da3;
}
.nav-tabs-wizard .step-desc{
    float:left;
    width:80%;
}
.nav-tabs-wizard .step-number span{
    font-weight:300;
    font-size:42px;
}
.nav-tabs-wizard .step-desc h2{
    text-transform:uppercase;
    font-weight:300;
    font-size:24px;
    margin-bottom:0px;
    padding-left:10px;
}
.nav-tabs-wizard .step-desc p{
    font-size:14px;
    padding-left:10px;
}
.nav-tabs-wizard + .tab-content>.tab-pane{
    padding: 20px;
    background-color:#282828;
    border-bottom:2px solid #0196d8;
}

.nav-tabs-wizard + .tab-content>.tab-pane-no-color{
    padding: 20px;
    background-color:#282828;

}

.lifecycle-event-history h4{
    margin-top: 3em;
}

.custom-checkbox{
    -webkit-appearance: none;
    background-color: #222222;
    border: 2px solid #0196D8;
    padding: 7px !important;
    border-radius: 0px !important;
    display: inline-block;
    position: relative !important;
    margin-right: 7px !important;
}

.custom-checkbox:checked:after {
    content: '\2714';
    font-size: 16px;
    position: absolute;
    top: -2px;
    left: 0px;
    color: #0196D8;
}

.custom-checkbox:checked {
    background-color: #222222;
    border: 2px solid #0196D8;
    color: #0196D8;
}

.custom-checkbox-small{
    -webkit-appearance: none;
    border: 1px solid #0196D8;
    padding: 6px !important;
    border-radius: 0px !important;
    display: inline-block;
    position: relative !important;
    margin-right: 7px !important;
}

.custom-checkbox-small:checked:after {
    content: '\2714';
    font-size: 15px;
    position: absolute;
    top: -3px;
    left: 0px;
    color: #0196D8;
}

.custom-checkbox-small:checked {
    border: 1px solid #0196D8;
    color: #0196D8;
}

.custom-radio {
    margin: 0px !important;
    -webkit-appearance: none;
    background-color: #fafafa;
    border: 1px solid #cacece !important;
    padding: 8px !important;
    border-radius: 50px !important;
    display: inline-block;
    position: relative;
    margin-left: -20px !important;
}

.custom-radio:checked:after {
    content: ' ';
    width: 10px;
    height: 10px;
    border-radius: 50px;
    position: absolute;
    top: 3px;
    background: #0196D8;
    text-shadow: 0px;
    left: 3px;
    font-size: 32px;
}

.custom-radio:checked {
    color: #99a1a7;
    border: 1px solid #0196D8 !important;
}

.modal-body label.data-select-all,.modal-body label.structure-select-all{
    margin-bottom:0px;
}
.create-version-form-wrap{
    display:none;
}
.btn-create-version + .popover{
    background-color:#dedede;
}

.btn-create-version + .popover{
    color:#fff;
    background-color:#464646;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    /*min-width:450px;*/
}
/*
.btn-create-version + .popover.bottom>.arrow{
    left:95%!important;
}
*/
.btn-create-version + .popover.bottom>.arrow:after {
    border-bottom-color: #464646;
}
.btn-create-version + .popover .popover-content{
    padding:0px;
}
.btn-create-version + .popover .popover-title{
    color:#fff;
    font-weight:400;
    background-color:#3C3C3C;
    border-bottom-color:#404040;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    margin-bottom:5px;
}
.btn-create-version + .popover .form-inline{
    padding:10px;
    padding-top:5px;
}
.btn-create-version + .popover .form-inline #new-version{
    max-width:132px;
}
.btn-create-version + .popover .form-inline .control-label{
    font-weight:400;
    color:#999;
    margin-right:10px;
    margin-bottom:5px;
}


.page-info-header{
    background: #464646;
    padding: 40px 20px 10px;
    font-size: 1.2em;
    font-weight: 300;
    margin-bottom: 2em;
}
.master-container,.fork-container{
    padding-top:10px;
    padding-bottom:10px;
}
.master-container .form-group,.fork-container .form-group{
    margin-bottom:2em;
}
.fork-container{
    background:#47505A;
}
.fork-down{
    padding:20px 0px;
    text-align:center;
    color:#999;
}

/* build logs model body scroll */
.build-logs-modal .modal-body .scroll-container{
    margin-top: 20px;
}
#log-search{
    color: #000;
}

.div-search {
    padding: 19px 0px 5px;
    background-color: #5F5F5F;
    margin: -15px;
}

.no_result_found{
    border: 1px solid #CC5F5F;
    background-color: #E6C6C6;
}

.editroles > span.fw-stack{
    font-size:0.8em;
}
.delete i.fw-delete{
    font-size:1em;
}
.editroles .fw-stack span{
    color:#0498d5;
}
#user-name-select + .select2-container .select2-selection--multiple{
    height:34px;
}
#user-name-select + .select2-container .select2-selection--multiple li{
    border:none;
    background-color:#fff;
}
#user-name-select + .select2-container .select2-selection--multiple li span.select2-selection__choice__remove{
    display:none;
}
.modal-header button.close-override{
    margin-top:-14px;
    margin-right:-14px;
    color:#999;
    background:#000;
    padding:7px 12px;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}
.modal-header button.close-override:focus {
    outline:none;
}
.table-inline-edit-input{
    font-size:13px;
    color:#666;
    width:100%;
    padding-left:6px;
    margin:0px;
}
.inline-edit form input{
    color: #333;
    border:1px solid #666;
    padding:2.5px 8px;
}
.inline-edit form input:focus{
    border:1px solid #666;
}
.inline-edit form button{
    color:#333;
    border:1px solid #666;
    background-color:#ccc;
}

.border-left-light{
    border-left:1px solid #999;
    border-top:none;
    margin-top:0em;
    padding-top:0em;
}

td.details-control {
    background: url('../images/datatables-1.10.7/show_more.png') no-repeat 95% center;
    background-size:1em;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('../images/datatables-1.10.7/show_less.png') no-repeat 95% center;
    background-size:1em;
}
.as-block{
    display:block;
}
.marg-top-8{
    margin-top:8px;
}
.dataTable .form-group{
    margin-bottom:0px;
}
.dataTable .btn-action-xs{
    height:auto;
}
.dataTable .btn-action-xs span{
    font-size:1em;
}
.highlight-table{
    background-color: #595959 !important;
    border-top: 0px solid #595959  !important;
}
.highlight-parent-cell{
    background-color: #595959  !important;
}
table.dataTable .subtable th, table.dataTable .subtable td{
    padding:2px 10px;
}
.subtable table{
    border:1px solid #555;
    width: 100%;
}
.subtable th,.subtable td{
    border-right:1px solid #555;
}
.subtable th:last-child,.subtable td:last-child{
    border-right:none;
}
.indent-xs{
    text-indent:.5em;
}

/*help pane related css */
.help-pane {
    position: fixed;
    bottom: -10.5em;

}
.help-trigger {
    padding: 1px 2px;
    background-color: #3C3C3C;
    width: 36px;
    height: 36px;
    cursor: pointer;
    border-top: 2px solid #0288C0;
}
.help-content{
    background-color: #3C3C3C;
    padding: 10px;
    min-height: 13em;
    max-height: 13em;
}
.help-trigger>i{
    padding: 5px;
}
.materialize{
    position:relative;
    top:0px;
}
.cloud-block-default:hover{
    opacity: 0.8;
    filter: alpha(opacity=0.8);
}
.cloud-block-invert .cloud-block-invert-icon,
.cloud-block-default .cloud-block-invert-icon{
    margin-top:20%;
    margin-bottom:10px;
    float:left;
    width:100%;
}
.cloud-block-invert-sub-true .cloud-block-invert-icon{
    margin-top:20%;
    margin-bottom:10px;
    float:left;
    width:85%;
}
.cloud-block-invert-icon.active{
    margin-top:10px;
    width:30%;
}
.temp-wrap .cloud-block-invert-icon{
    margin-top:-2%;
    width:100%;
    margin-bottom:18px;
    margin-left:20px;
    text-align:left;
}
.forward-btn{
    float:left;
    width:15%;
    height:7.2em;
    line-height:7;
    background:#2a2a2a;
}
.cloud-block-sub{
    float:left;
    padding:0px;
    margin:0px;
    list-style:none;
    font-weight:200;
    text-align:left;
    width:100%;
}
.cloud-block-sub a{
    display:block;
    padding: 10px;
    padding-left:20px;
    color:#fff;
}
.cloud-block-sub a:hover{
    text-decoration:none;
    background:#3a3a3a;
}
.cloud-block-sub a i:after{
    content: '';
    margin-left:10px;
}
.cloud-block-invert i span,.cloud-block-default i span{
    display:none;
    font-weight:200;
    font-size:20px;
    margin-left:10px;
    text-transform:uppercase;
}
.cloud-block-invert .back-btn{
    display:none;
    float:right;
    width:10%;
    height:14%;
    vertical-align:middle;
}
.cloud-block-invert .back-btn span{
    font-weight:200;
    margin-top:5px;
    font-size:10px;
}
.anim-container{
    position:relative;
    overflow:auto;
    padding-bottom:0.5em;
}
.cloud-block-invert .sub-actions{
    display:none;
    float:left;
    width:100%;
    background: #2a2a2a;
}
.temp-wrap{
    background:#1f1f1f;
}
.box{
    margin: 10px;
    border: 1px solid #676767;
}
.margin-top-1x{
    margin-top: 10px;
}
.margin-top-2x{
    margin-top: 20px;
}
.margin-top-3x{
    margin-top: 30px;
}
.margin-top-4x{
    margin-top: 40px;
}

.block-user-color{
    color:#333;
}
.box-header{
    background-color: #5D5D5D;
    padding: 10px 25px;
    cursor: pointer;
}
.chart-controller .btn {
    padding: 6px;
    background-color: #282828;
    margin: 0px 1px;
}
.chart-controller .btn p{
    margin: 0px;
    padding: 4px;
}
.box-content{
    background:#464646;
}

.box-content > .row{
    padding: 20px 0px;
}
.box-content-padding{
    padding:15px;
}
.box-content span{
    font-weight: bold;
}
.accordion{
    margin-bottom: 80px;
}
.accordion .box{
    margin: 0px 10px;
}
.payee-info{
    padding-top: 34px;
}
.payee-info span{
    color: #3AD841;
}
.dashboard-block{
    min-height: 250px;
    width: 100%;
    margin-top: 1em;
    background-color: #696969;
}
.dashboard-table-container .datatable{
    background-color: #696969;
    padding: 0px;
}
.dashboard-table-container-block{
    background-color: inherit;
}
.dashboard-container td a {
    color: #428bca;
    cursor: pointer;
}
.dashboard-container h4{
    margin-bottom: 25px;
}
.dashboard-container > .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate{
    color:#fff;
}
.dashboard-container >.dataTables_wrapper .dataTables_filter label, .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_info{
    color:#fff;
}
.paying-customer-container{
    background-color: #27AE60;
    padding: 15px;
    margin: 5px 15px 25px;
}
.monetization-subscriber-content .step-desc{
    width: 78%;
}
.chart-container{
    background-color: #fff;
    margin: 20px 0px;
}
.purchase-summary-container h3{
    margin-top: 0px;
}
.purchase-summary-container .selected-plan-header{
    font-size: 24px;
}
.selected-plan{
    font-weight: 500;
    font-size: 19px;
    margin-bottom: 0px;
}
.selected-plan-features p{
    margin: 0px;
}
.subscription-details{
    padding: 20px 0px;
    margin-top: 20px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.subscription-plan{
    font-weight: 100;
}
.subscription-details .remark{
    color: #c9302c;
}
.total-payable{
    padding: 20px 0px;
    font-weight: 500;
}
.payment-email{
    color: #ccc;
    padding: 10px 0px;
}
.terms-wrapper{
    padding: 10px 10px;
    background-color: #333;
    height: 200px;
}
.terms-wrapper .nano-content{
    padding: 10px 10px;
}
.gateway-container{
    border: 1px solid #6A6A6A;
}
.edit-key-values{
    color: #000;
}
.property-seperator .form-group{
    margin-bottom:1em;
    margin-top: 1em;
}
.property-seperator{
    border-bottom: 1px solid #DCDADA;
}
.property-seperator:last-child{
    border-bottom: none;
}

.property-accordion .panel{
    border-radius: 0px;
}
.property-accordion .panel-default>.panel-heading{
    border-radius: 0px;
}
.demo-dashboard-block{
    font-size: 13em;
}
.top-notification{
    position: absolute;
    background: rgba(254, 223, 45, 0.74);
    height: 32px;
    z-index: 1039;
    border: 1px solid #FEE62D;
    padding: 5px;
    top: 0px;
    left: 45%;
    border-top: none;
}
.inverse .form-group label{
    color: #f8f8f8;
}

.form-horizontal .form-group{
    margin-bottom: 1em;
}

.tabel-label{
    color : #000;
    font-weight: 300;
}

.full-width-mod6 {
    width: 100%;
}

.fw-success.custom:before {
    content: '\e657';

}

.custom-h1 {
    background-color: #ada90a;
    border-color: #ada90a;
}

.custom-b1 {
    background-color: #f3f077;
    border-color: #ada90a;
}

/* ========================================================================
 * Accordion and Collapse styles
 * ======================================================================== */
.accordion h4 a, .collapse h4 a {
    text-decoration: none;
    font-weight: bold;
}

.accordion h4 p, .collapse h4 p {
    padding: 10px;
    margin-bottom: 0px;
}

.accordion .panel, .collapse .panel {
    margin-bottom: 10px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.accordion .panel-heading, .collapse .panel-heading {
    background: #e2e2e2;
    margin-bottom: 0px;
    padding-bottom: 0px;
    border: none;
    cursor: pointer;
}

.accordion .panel-heading:hover, .collapse .panel-heading:hover {
    background: #efefef;
}

.accordion .panel-body, .collapse .panel-body {
    padding: 10px;
    border: 1px solid #353a43;
}

.accordion h4 input[type=checkbox], .accordion h4 input[type=radio],
.collapse h4 input[type=checkbox], .collapse h4 input[type=radio] {
    margin-top: 0px;
    margin-right: 4px;
}

.accordion .panel-heading .radio, .collapse .panel-heading .radio {
    width: 60px;
    height: 60px;
    float: left;
    margin-right: 0px;
    background: #ccc;
}

.accordion .panel-heading .panel-title, .collapse .panel-heading .panel-title {
    height: 28px;
}

.accordion .panel-heading .radio .helper,
.collapse .panel-heading .radio .helper {
    padding-top: 0px;
    top: 20px;
    left: 20px;
}

.accordion .panel-heading .radio > i,
.collapse .panel-heading .radio > i {
    position: relative;
    top: 22px;
    left: 22px;
}

.accordion .panel-heading .radio > span,
.collapse .panel-heading .radio > span {
    position: relative;
    top: 14px;
    left: 14px;
}

.accordion .panel-heading div .status,
.collapse .panel-heading div .status {
    margin-top: -42px;
}

.accordion .panel-heading div .no-description + .status,
.collapse .panel-heading div .no-description + .status {
    margin-top: -36px;
}

.accordion .panel-heading div .status i,
.collapse .panel-heading div .status i {
    position: relative;
    top: 16px;
    left: calc(100% - 40px);
}

.accordion .panel-heading .radio + div .status i,
.collapse .panel-heading .radio + div .status i {
    position: relative;
    top: 16px;
    left: calc(100% - 100px);
}

.accordion .panel-heading p, .collapse .panel-heading p,
.collapse .panel-heading p, .collapse .panel-heading p {
    float: none;
    width: auto;
}

.accordion .panel-heading div .heading,
.collapse .panel-heading div .heading {
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 4px;
    text-indent: 10px;
}

.accordion .panel-heading div .no-description,
.collapse .panel-heading div .no-description {
    padding-top: 20px;
}

.accordion .panel-heading div .description,
.collapse .panel-heading div .description {
    text-indent: 10px;
    margin-right: 60px;
}

.accordion h4 a i, .collapse h4 a i {
    margin-top: -4px;
}
.custom-checkbox-white{
    background-color: #FFFFFF;
}
.custom-checkbox-white:checked{
    background-color: #FFFFFF;
}

.panel-body {
    background-color: #525252;
}

.panel {
    border-color: #525252 !important;
    border-radius: 0px !important;
}

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

.add-custom-app {
    outline:2px dashed #676767;
}
.link-white, .link-white:hover, .link-white:focus{
    color: #eeeeee;
    text-decoration: none;
}
.link-underline {
    text-decoration: underline;
}
.link-store {
    margin-right: 15px;
}
.link-store i {
    line-height: 3.5em;
}

.secondary-btn {
    background-color: #525252;
}

.connection-status, .config-details{
    font-size: 18px;
    font-weight: 400;
    margin-right: 25px;
}

.connection-block {
    padding-top: 40px;
    padding-bottom: 65px;
}
.connection-check {
    display: inline-block;
}
.help-note {
    display: block;
    color: #cac8c8;
    font-style: italic;
}
.search-margin{
    margin-top: 40px;
}
.alert-connect {
    font-size: 16px;
    line-height: 2.6em;
}
.alert-connect a {
    text-decoration: underline;
}
.connect-btn {
    font-weight: 400;
}

.block-heading {
    font-size: 24px;
    font-weight: 300;
    padding-bottom: 8px;
}
.steps-text {
    font-size: 15px;
    font-weight: 300;
}
.conf-guide ul {
    padding-left: 0;
}
.conf-guide li {
    padding: 8px 0 8px 0;
}
.conf-guide .help-block{
    margin-left: 18px;
}
.steps-text i {
    color: #0498d5;
}
.cloud-app-listing .app-sample-icon {
    display: block;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    position: absolute;
    z-index: 1;
    padding: 10px;
}
.app-sample-icon {
    /*position: absolute;*/
    top: 0px;
    right: 0px;
    opacity: 1;
}
.app-sample-icon span {
    opacity: 0.8;
}
.cloud-app-listing .app-sample-icon i {
    margin-top: 12px;
}
.sample {
    opacity: 0.9;
}
.note-container {
    background-color: #333333;
    padding: 10px 20px;
    margin: 10px 0px;
}
.sample-userstore-msg {
    line-height: 3em;
    margin-top: 0;
}
.sample-userstore-msg button span{
    color:#fff;
}
.table-container{
    background-color: #333;
}
td, th {
    border: none;
    text-align: left !important;
    padding: 13px;
}
.agent-archi {
    display: block;
    margin-top: 0px;
    bottom: 30px;
    width: 60%;
}
.btn-content {
    font-size: 18px;
}
.text-white {
    color: #fff;
}

.text-agent-archi {
    color: #cac8c8;
    display: block;
    bottom: 100px;
}

#oauthConfig .panel-body, #wsfed .panel-body{
    padding-top: 0;
}

#security-type table {
    width:100%;
}
.security-type-table table {
    margin-top: 10px;
}
.security-type-table th,.security-type-table td {
    border-top: none !important;
    padding: 5px;
    text-align: left;
}
.security-type-table tr,.security-type-table td {
    background-color: #eee;
    height: 35px;
    color: #444;
    border-bottom: 1px solid #b3b3b3;
}
.security-type-table table th {
    background-color: #b3b3b3;
    color: #444;
}
#storeconfig .select2-container .select2-selection--multiple {
    height: auto;
}

.btn-form {
    background-color: #424141;
    color:#eee;
}
.btn-form:hover {
    color:#d3d3d3;
    background-color:#484747;
}

#sp-img-thumb {
    width: 60px;
    background-color: #525252;
    margin-bottom: 10px;
}

.input-group-btn:nth-child(2) > .form-control {
    width: auto;
}
.idpClaim {
    border: none;
    border-color: transparent;
}
.delete-col{
    width: 15%;
}
.delete-link{
    color:#666;
}
.delete-link:hover{
    color:#333;
    text-decoration: none;
}
.margin-zero {
    margin-left: 0 !important;
}
.padding-top-zero {
    padding-top: 0px;
}
.header-top{
    margin-top: 20px !important;
}
.word-break {
    word-break: break-all;
}
a.disabled {
    pointer-events: none;
    cursor: default;
    color: #9c9898;
}
.add-padding-top-2x {
    padding-top: 10px !important;
}
.add-padding-top-3x {
    padding-top: 15px !important;
}
.add-padding-right-1x {
    padding-right: 5px !important;
}
.add-padding-right-5x {
    padding-right: 25px !important;
}
.add-padding-left-1x {
    padding-left: 5px !important;
}
.add-padding-left-4x {
    padding-left: 20px !important;
}
.add-padding-left-5x {
    padding-left: 25px !important;
}
.add-margin-right-2x{
    margin-right: 10px !important;
}
.remove-padding-right {
    padding-right: 0px !important;
}
.remove-padding-left {
    padding-left: 0px !important;
}
.app-color-one-dark {
    background-color: #414141;
    border-color: #414141;
}
.app-color-two-dark {
    background-color: #274d6b;
    border-color: #274d6b;
}
.app-color-three-dark {
    background-color: #d18e1b;
    border-color: #d18e1b;
}
.app-color-five-dark {
    background-color: #53648e;
    border-color: #53648e;
}
.app-color-six-dark {
    background-color: #306d81;
    border-color: #306d81;
}
.app-color-nine-dark {
    background-color: #2d2c2c;
    border-color: #2d2c2c;
}
.btn-action-secondary {
    background: #393939;
}
.btn-action-secondary:hover{
    background-color: #242424;
}
.file-upload-control input[type=file] {
    display: none;
}
.text-viewAll{
    position:absolute;
    top:-8%;
    left:0;
    width:100%;
    height:100%;
    text-align:center;
    z-index: 1;
}
.text-viewAll:after{
    content:'';
    width:1px;
    height:100%;
    vertical-align:middle;
    display:inline-block;
}
.text-viewAll span{
    vertical-align:middle;
    font-size: 56px;
    font-weight: 400;
}
.view-all .app-icon {
    background: #2a2f35;
}
.secondary-link {
    color: #c5c5c5;
    font-size: 14px;

    padding-left: 10px;
}
.secondary-link:hover {
    text-decoration: underline;
    color: #eee;
}
.v-ruler{
    border-left: 2px solid #777;
}

#connection-popup-modal .fw-loader5{
    margin-top: -40px;
}

.description-block {
    padding-top: 5px;
    color: #d2d2d2;
    margin-top:-12px;
    font-size: 12px;
 }

#customConfig .radio {
    padding-left: 20px;
}
