@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,900);

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.clearfix {
    display: inline-block;
}
/* start commented backslash hack \*/
* html .clearfix {
    height: 1%;
}

.modal-dialog {
    margin-top: 80px;
}

.k-i-NTMedia-doc {
    background: 50% 50% no-repeat url('/images/Upload-16.png');
}

.clearfix {
    display: block;
}
/* close commented backslash hack */

.bigsplash {
    background-color: #232323;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 8000;
    padding: 20% 35%;
    color: #fff;
    background-size: cover;
}

#lblTopName {
    /*margin-left: 20px;*/
    position: fixed !important;
    left: 60px;
    top: 6px !important;
    font-size: 30px;
    z-index: 8000;
    color: #fff;
}

@media(max-width:320px) {

    #lblTopName {
        display: none;
    }
}

.splash {
    width: 100%;
    height: 100%;
    background-size: cover;
    z-index: 2500;
    position: fixed;
    top: 0;
    left: 0;
    background-size: cover;
}

.logo_secure img {
    width: 140px;
    margin-bottom: 10px;
    margin-left: 4px;
}

.somemorespace {
    margin-top: 25px;
}

.itemsGetStarted {
    /* was: padding-top: -50px; negative padding is invalid and was always dropped */
}

.itemsGetStarted2 {
    margin-top: 50px;
}

@media (max-width: 990px) {
    .itemsGetStarted {
        display: none;
    }
}

html, body, form {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 11pt;
    font-family: 'Roboto', sans-serif;
    color: #343434;
}

body {
    font-family: sans-serif;
    background: #fff;
}

h1, h2, h3, h4, h5 {
    margin: 8px 0px 4px;
    color: #343;
}

h1, h2, h3 {
}

h1 {
    font-size: 18pt;
    font-weight: bold;
}

h2 {
    font-size: 16pt;
    font-weight: bold;
}

h3 {
    font-size: 14pt;
    font-weight: bold;
}

h4 {
    font-size: 12pt;
    font-weight: bold;
}


h5 {
    font-size: 11pt;
    font-weight: bold;
}

p {
    padding: 8px 0;
}

td.spaced {
    padding: 8px !important;
}

.clearall {
    clear: both;
}

audio {
    width: 150px;
    display: block;
    margin: 20px;
}

a:link, a:visited {
    /*color: #26A8DE;*/
}

.greentext {
    color: #679d3f;
}

.redtext {
    color: #a00;
}

input[type="text"], input[type="date"], input[type="password"] {
    font-size: 11pt;
    color: #555;
    padding: 5px;
    margin-right: 10px;
}

select {
    font-size: 11pt;
    padding: 2px;
    color: #555;
    padding: 5px;
    margin-right: 10px;
}

input:disabled {
    background: #dddddd;
}

.disabled {
    background: #dddddd;
}

#header {
    position: absolute;
    top: 5px;
    left: 10px;
    width: 75px !important;
    padding: 0px 10px;
    margin: 0;
    z-index: 4000;
    /*background: #454545;*/
}

#viewTicketWindow {
    width: 800px;
    position: fixed;
    top: 60px;
    right: -800px;
    bottom: 0;
    background: #fff;
    z-index: 4000;
    border-left: 1px solid #232323;
}

#toppanel {
    /*background-image: url('/images/nav_bar_bg.png') !important;*/
    height: 60px;
    position: fixed;
    left: 0;
    top: 0;
    color: #fff;
    width: 100%;
    /*text-align: right;*/
    z-index: 2999;
    border-bottom:1px solid #555;
}

    #toppanel a:link {
        color: #fff;
        text-decoration: none;
    }

.cloudservicebutton {
}

    .cloudservicebutton:hover {
        color: #facc35 !important;
    }

.cloudserviceicon {
}

    .cloudserviceicon:hover {
        color: #facc35 !important;
    }

.wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.bigfont {
    font-size: 12pt;
    font-weight: bold;
}

.hugefont {
    font-size: 18pt;
    font-weight: bold;
    text-decoration: none;
}

.hoverrow {
}

    .hoverrow:hover {
        cursor: pointer;
        background-color: #e1e1e1;
    }

.scorelist {
    margin: 0 0 0 10px;
    float: right;
}

    .scorelist li {
        display: inline-block;
        margin: 5px 5px;
    }

.white-text {
    color: #fff;
}

#viewNavPanel {
    position: fixed;
    top: 60px !important;
    left: 0 !important;
    width: 100%;
    height: 100%;
    color: #fff !important;
    z-index: 7000;
    padding: 20px 40px;
    display: none;
    background: #232323;
}

#btnGlobalSettingsClose {
    font-size: 22pt;
    color: #fff;
}

.fullheight {
    height: -moz-calc(100% - 10px);
    height: -webkit-calc(100% - 10px);
    height: calc(100% - 10px);
}

#viewNavPanel h1, #viewNavPanel h4 {
    color: #fff;
}

.whiteline {
    width: 100%;
    height: 1px;
    background: #ffffff;
    margin: 10px 0;
}

.whitelink {
    color: #fff !important;
    cursor: pointer;
}

    .whitelink:hover {
        color: #fff !important;
        cursor: pointer;
        text-decoration: underline;
    }

.logo {
    width: 100%;
    height: 100px;
    background-size: contain !important;
    background-position: center 10px;
    background-repeat: no-repeat !important;
    background-position:center center;
    margin: 0;
}

.logo2 {
    width: 100%;
    height: 40px;
    /*top: 0px;
    right: 10px;
    padding: 10px;*/
    background-size: contain;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    z-index: 4998 !important;
    display: none;
    margin-top: 5px;
    /*border: 1px solid #e1e1e1;*/
}

@media (max-width: 990px) {
    .logo2 {
        position: absolute;
        top: -2000px;
    }
}

.loggedinwindow {
    /*width: 75%;*/
    height: 60px;
    padding-right: 10px;
    /*color: #26A8DE;*/
}

    .loggedinwindow .fa-caret-down {
        font-size: 16pt;
    }
/*.k-tool {dl
    background-color: #fff !important;
    color:#232323;
}

    .k-tool span {
        color: #232323 !important;
    }

.k-state-default {
    color: #232323;
}
.k-sprite{
    color:#232323;
}
.k-menu-group {
    background-color: #232323 !important;
    color: #fff !important;
}
.k-group-indicator{
    
      background-color: #363636 !important;
    color: #fff !important;
}
.k-button k-button-icon k-button-bare{
    background-color:transparent;
}
.k-grouping-header{
    background-color:#232323;
    color:#fff;
    background-image:none;
}
.k-filterable {
    color: #fff !important;
    padding: 0 15px 0 0;
}*/
/*.k-state-selected, .k-state-selected:link {
    border-color: #fff !important;
}*/
/*.k-state-selected{
        background-color:#232323;
        color:#fff;
        border-color:#fff !important;
    }

.k-state-hover:{
        background-color:#232323 !important;
        color:#fff !important;
}
    .k-link:link{
     color:#232323 !important;   
    }
  .k-content{
      background-color:#232323;
      color:#fff;
  }
  .k-header{
      color:#fff;
  }*/


#togglemenulist {
    /*display: none;*/
    font-size: 26px;
    position: fixed;
    top: 15px;
    left: 10px;
}

#btnActionButton {
    display: none;
}

.clientphoto {
    /*width: 250px;
    height: 150px;*/
    position: relative;
}

    .clientphoto img {
        /*width: 100%;
        height: 100%;*/
    }

.maincontainer {
    /*margin: 50px 0px 0px 150px;
    width: -moz-calc(100% - 160px) !important;
    width: -webkit-calc(100% - 160px) !important;
    width: calc(100% - 160px) !important;*/
    margin: 0;
    padding: 55px 10px;
    /*padding: 0 10px;*/
    height: auto;
    position: relative;
}

.bluebehavior {
    color: #fff;
    background-color: #0582BD;
    border-radius: 50px;
}

.goldbehavior {
    color: #fff;
    background-color: #FFC000;
    border-radius: 50px;
}

.orangebehavior {
    color: #fff;
    background-color: #F27620;
    border-radius: 50px;
}

.greenbehavior {
    color: #fff;
    background-color: #018543;
    border-radius: 50px;
}

.horizontalList {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .horizontalList li {
        display: inline-block;
        margin: 0 5px;
    }

.verticalList {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .verticalList li {
        display: block;
        margin: 5px 20px;
    }

.fatblocks li {
    font-size: 18pt;
    padding: 50px;
}

.panelist {
}

    .panelist ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .panelist ul li {
            margin: 5px 5px;
            min-width: 300px;
            display: inline-block;
            vertical-align: top;
        }

.pane {
    padding: 10px 10px;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
}

    .pane p label {
        width: 75px;
    }


#togglearrow {
    display: none;
    z-index: 5000;
}

.togglearrowright {
    background-color: #415468;
    background-image: url("/images/right_arrow.png");
    width: 50px;
    height: 100px;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    right: -35px;
    top: 40%;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.togglearrowleft {
    background-color: #415468;
    background-image: url("/images/left_arrow.png");
    width: 50px;
    height: 100px;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    right: -35px;
    top: 40%;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.leftbar {
    position: fixed;
    width: 100%;
    background-color: #232323;
    height: 100%;
    bottom: 0;
    top: 60px;
    left: 0;
    z-index: 3000;
    display: none;
}

    .leftbar .navheading {
        /*background-color: #232323 !important;*/
        width: 100%;
        padding: 10px;
        color: #e1e1e1;
        font-size: 24px;
    }

    .leftbar li .active {
        /*background-color: #232323 !important;*/
        color: #fff !important;
    }

    .leftbar ul {
        list-style: none;
        margin: 0 auto;
        padding: 0;
        overflow: auto;
    }

.nav-link-items {
    overflow: auto;
    height: 100%;
}

#btnNavBackButton {
    cursor: pointer;
    font-size: 20pt;
}

.leftbar ul li {
    min-width: 175px;
    width: 325px;
    min-height: 125px;
    position: relative;
    padding: 8px 10px;
    margin: 10px;
    vertical-align: top;
    color: #fff;
    font-weight: bold;
    overflow: hidden;
    display: inline-block;
    /*border-radius: 10px;*/
    border: 1px solid #e1e1e1;
    -webkit-clip-path: polygon(0 .8%, 100% 0%, 100% 99%, 0% 100%);
    clip-path: polygon(0 .8%, 100% 0%, 100% 99%, 0% 100%);
}

    .leftbar ul li .navitem-icon {
        float: left;
        margin: 5px 5px 5px 0;
        font-size: 16pt;
    }

    .leftbar ul li .navitem-title {
        float: left;
        font-size: 16pt;
        font-weight: bold;
    }

    .leftbar ul li .navitem-description {
        font-size: 12pt;
        font-weight: normal;
        margin: 4px 0;
        clear: both;
    }

    .leftbar ul li .navitem-learn {
        margin: 8px 0;
        text-transform: uppercase;
        font-size: 12px;
    }

    .leftbar ul li:active {
        /*width: 100%;*/
        cursor: pointer;
        background: #232323;
    }

    .leftbar ul li:hover {
        cursor: pointer;
        background: #1a1a1a;
        /*background: #232323 #ADDA3F*/;
        background: none !important;
        /*text-shadow: -1px -1px 0 #e1e1e1, 1px -1px 0 #e1e1e1, -1px 1px 0 #e1e1e1, 1px 1px 0 #e1e1e1;*/
    }

    .leftbar ul li label {
        font-weight: normal;
    }

    .leftbar ul li a {
        color: #fff;
        font-weight: normal;
        text-decoration: none;
        width: 100%;
        /*padding: 2px 0;*/
        /*margin-left: 10px;*/
        display: inline-block;
    }

    .leftbar ul li.selected {
        /*width: 100%;*/
        position: relative;
        padding: 8px 10px;
        -webkit-box-shadow: 0px 0px 7px 1px rgba(255,255,255,1);
        -moz-box-shadow: 0px 0px 7px 1px rgba(255,255,255,1);
        box-shadow: 0px 0px 7px 1px rgba(255,255,255,1);
        /*background: #1a1a1a;
        border: #014801 1px solid;*/
    }



#leftbarcontent {
    max-width: 98%;
    margin: 20px auto;
    color: #fff !important;
    /*overflow: hidden !important;*/
    padding-bottom: 50px;
    height: 100vh;
}

    #leftbarcontent hr {
        color: #fff;
        width: 100%;
        margin: 5px 0;
    }

.navtitle {
    font-size: 22pt;
    color: #fff;
}

    .navtitle.glyphicon {
        font-size: 18pt;
    }

#topbarinfo {
    position: fixed;
    top: 60px;
    right: 0;
    margin: 0 0 0 0;
    z-index: 4000;
    width: 350px;
    display: none;
    text-align: left;
    cursor: pointer;
}

#topbarinfo a {
    width: 100%;
    text-decoration: none;
}

.firstcap:first-letter {
    text-transform: uppercase;
}

.score-summary {
    padding: 25px;
    border: 1px solid #e1e1e1;
    margin: 10px 0px;
}

    .score-summary span {
        font-weight: bold;
    }

.tabbar {
}

    .tabbar ul {
        margin: 0 0 10px 0;
        padding: 0;
        list-style: none;
        /*border-bottom: 10px solid #415468;*/
    }

        .tabbar ul li {
            color: #fff;
            /*background-color: #415468;*/
            border-radius: 5px 5px 0 0;
            display: inline-block;
            display: -moz-inline-box;
            padding: 5px 10px;
            margin: 5px 0 0 0;
            font-size: 10pt;
            letter-spacing: 2px;
            height: 40px;
            font-weight: normal;
        }

            .tabbar ul li label {
                font-weight: normal;
            }

            .tabbar ul li.tabselected {
                /*background-color: #26A8DE;*/
            }

                .tabbar ul li.tabselected:hover {
                    /*background-color: #26A8DE;*/
                    /*text-shadow: -1px -1px 0 #e1e1e1, 1px -1px 0 #e1e1e1, -1px 1px 0 #e1e1e1, 1px 1px 0 #e1e1e1;*/
                }


            .tabbar ul li:hover {
                color: #fff;
                background-color: #232323;
                /*text-shadow: -1px -1px 0 #aaa, 1px -1px 0 #aaa, -1px 1px 0 #aaa, 1px 1px 0 #aaa;*/
                cursor: pointer;
            }

            .tabbar ul li:active {
                color: #fff;
                background-color: #ADDA3F;
                /*text-shadow: -1px -1px 0 #aaa, 1px -1px 0 #aaa, -1px 1px 0 #aaa, 1px 1px 0 #aaa;*/
                cursor: pointer;
            }

.listbox {
    /*border: 1px solid #26A8DE;*/
    min-height: 75px;
}

    .listbox option {
        padding: 15px 5px;
    }

        .listbox option[selected="selected"] {
            /*background-color: #26A8DE;*/
            color: #fff;
        }

.bluetext {
    /*color: #26A8DE;*/
}



.greenbackground {
    color: #3CB371;
}

.whitetext {
    color: #fff !important;
}

.bluebackground {
    /*background-color: #26A8DE;*/
}

.blueborder {
    /*border: 1px solid #26A8DE;*/
}

.greyborder {
    border: 1px solid #e1e1e1;
    border-radius: 10px;
}

.greybackground {
    background-color: #e1e1e1;
}

.lightgreybackground {
    background-color: #fafafa;
}

.greybox {
    border: 1px solid #e1e1e1;
    vertical-align: top;
    margin-top: 20px;
}

.locationbutton {
    background: #415468;
    padding: 8px 5px;
    font-size: 10pt;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

    .locationbutton:hover {
        background: #232323;
        cursor: pointer;
    }

.fulloverlay {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 8000;
    padding: 10px;
    opacity: 1;
}

.btn.btn-primary, .btn.btn-danger, .btn.btn-danger, .greenbutton, .greybutton {
    font-size: 11pt;
    font-weight: 500 !important;
    position: relative;
}

    .btn.btn-primary .badge {
        background-color: #a00;
        position: absolute;
        top: -5px;
        right: -10px;
    }

.btn.btn-primary, .k-button {
    /*background-color: #26A8DE !important;*/
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    padding: 8px 10px !important;
    text-decoration: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    min-width: 65px !important;
    border-radius: 5px !important;
    margin-bottom: 5px !important;
}

    .btn.btn-primary:hover {
        /*background-color: #ADDA3F;*/
        background-color: #999 !important;
        color: #fff;
        cursor: pointer;
    }

    .btn.btn-primary.selected {
        background-color: #999;
        color: #fff;
        cursor: pointer;
        border-radius: 5px;
    }

    .btn.btn-primary:disabled {
        background-color: #ababab !important;
        color: #fff !important;
    }

        .btn.btn-primary:disabled:hover {
            background-color: #ababab !important;
            color: #fff !important;
        }

.orangebutton {
    background-color: #ffa606 !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    padding: 8px 10px !important;
    text-decoration: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    min-width: 65px !important;
    border-radius: 5px !important;
    margin-bottom: 5px !important;
}

    .orangebutton:hover {
        /*background-color: #ADDA3F;*/
        background-color: #fec050 !important;
        color: #fff;
        cursor: pointer;
    }

    .orangebutton.selected {
        background-color: #66C8F2;
        color: #fff;
        cursor: pointer;
        border-radius: 5px;
    }

.greenbutton {
    background-color: #679d3f !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    padding: 8px 10px !important;
    text-decoration: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    min-width: 65px !important;
    border-radius: 5px !important;
    margin-bottom: 5px !important;
}

    .greenbutton:hover {
        background-color: #7daf59;
        color: #fff;
        cursor: pointer;
    }

    .greenbutton.selected {
        background-color: #7daf59;
        color: #fff;
        cursor: pointer;
        border-radius: 5px;
    }

.greybutton {
    background-color: #ababab;
    color: #fff !important;
    border: none;
    padding: 8px 10px !important;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-width: 65px !important;
    border-radius: 5px;
}

.btn.btn-danger {
    background-color: #aa0000;
    color: #fff !important;
    border: none;
    padding: 8px 10px !important;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-width: 65px !important;
    border-radius: 5px;
}

    .btn.btn-danger:disabled {
        background-color: #ababab !important;
        color: #fff !important;
    }

    .btn.btn-danger:hover {
        background-color: #ff0000;
        color: #fff;
        cursor: pointer;
    }


.deletebutton {
    background-color: #ababab;
    color: #fff !important;
    border: none;
    font-size: 10pt;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 5px;
    min-width: 65px !important;
}


    .deletebutton:hover {
        background-color: #ff0000;
        color: #fff;
        cursor: pointer;
    }

.fullwidth {
    width: 100%;
    position: relative;
}

.breathingroom {
    margin: 10px;
}

.infogrid td {
    padding: 8px 20px;
}

datagrid {
    font-size: 11pt;
    border-collapse: collapse;
    clear: both;
    margin-top: 10px;
}

.datagrid tbody tr td {
    text-align: center;
    vertical-align: middle;
}

.nobullets {
    list-style: none;
}

.nopadding {
    margin: 0;
    padding: 0;
}

.alternatelist li {
    padding: 10px;
}

    .alternatelist li:nth-child(odd) {
        background-color: #e1e1e1;
    }

.collectionlist li {
    display: inline-block;
    margin: 2px 10px;
    vertical-align: top;
}

.itemlist li {
    display: block;
    margin: 2px 10px;
    vertical-align: top;
}

.datagrid-row {
}

    .datagrid-row td {
        padding: 12px 5px;
        color: #676767;
        text-align: center;
    }

.datagrid-altrow {
}

    .datagrid-altrow td {
        padding: 10px 5px;
        color: #676767;
        text-align: center;
    }


.datagrid-header {
}

    .datagrid-header td {
        font-size: 12pt;
        font-weight: bold;
        color: #fff;
        text-align: center;
        /*background-color: #26A8DE;*/
        padding: 10px;
    }

.droppanel {
    width: 600px;
    position: fixed;
    top: -450px;
    left: 25%;
    /*background: #26A8DE;*/
    border-bottom: 3px solid #3A597A;
    height: 250px;
    color: #fff;
    z-index: 500;
}

.popbox_full {
    display: none;
    width: 98%;
    position: fixed;
    left: 30%;
    min-height: 250px;
    max-height: 98%;
    top: 70px;
    border: 1px solid #ababab;
    background-color: #fff;
    padding: 10px;
    z-index: 5000;
    color: #121212;
    text-align: left;
    border-radius: 15px;
}

.popboxlogin {
    display: none;
    position: fixed;
    left: 0;
    padding: 15% 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,.95);
    z-index: 5000;
    color: #fff;
    text-align: left;
    border: 10px solid #e1e1e1;
}

    .popboxlogin h1, .popboxlogin h2, .popboxlogin h3 {
        color: #fff !important;
    }

.popbox_full h3 {
    color: #121212;
}

.popbox_full .closebutton {
    top: 10px;
    right: 10px;
    position: absolute;
    /*background-color: none;*/
    /*color: #a00;*/
    text-align: center !important;
}

.popbox_full .btn.btn-danger {
    background-color: transparent;
    color: #900 !important;
    border: none;
    padding: 0 0 !important;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-width: 0 !important;
    border-radius: 0;
    font-size: 24px;
    font-weight: bold;
}

.popbox_full .closebutton:hover {
    background-color: transparent;
    /*color: #a00;*/
}
.text-warning-bright {
    color:#fab002;
}
.text-danger-bright {
    color: #f00;
}
.text-success-bright {
    color: #0a0;
}

.coach_image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 5px auto;
}


.coach_imagesm {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    /*margin: 8px 10px;*/
    margin-right: 10px;
}

.member_image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 8px 10px;
}

.member_imagesm {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.isbutton {
    cursor: pointer;
}

.text-white {
    color: #fff !important;
}

    .text-white:hover {
        color: #fff;
    }

/*Badges*/
.badge {
    padding: 1px 9px 2px;
    font-size: 12.025px;
    font-weight: bold;
    white-space: nowrap;
    color: #ffffff;
    background-color: #999999;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
}

    .badge:hover {
        color: #ffffff;
        text-decoration: none;
        cursor: pointer;
    }

.badge-error {
    background-color: #b94a48;
}

    .badge-error:hover {
        background-color: #953b39;
    }


.badge-danger {
    background-color: #ff0000;
}
.badge-warning {
    background-color: #f89406;
}

    .badge-warning:hover {
        background-color: #c67605;
    }

.badge-success {
    background-color: #468847;
}

    .badge-success:hover {
        background-color: #356635;
    }

.badge-info {
    background-color: #3a87ad;
}

    .badge-info:hover {
        background-color: #2d6987;
    }

.badge-inverse {
    background-color: #333333;
}

    .badge-inverse:hover {
        background-color: #1a1a1a;
    }

.badge-primary {
    background-color: #0000ff;
    color:#fff;
}
.popbox {
    display: none;
    width: 600px;
    position: fixed;
    left: 30%;
    min-height: 250px;
    top: 70px;
    border: 1px solid #ababab;
    background-color: #fff;
    padding: 10px;
    z-index: 5000;
    color: #121212;
    text-align: left;
    border-radius: 15px;
}

    .popbox h3 {
        color: #232323;
    }

    .popbox .closebutton {
        top: 10px;
        right: 10px;
        position: absolute;
        background-color: none;
        /*color: #a00;*/
        text-align: center !important;
    }

    .popbox .btn.btn-danger {
        background-color: transparent;
        color: #900 !important;
        border: none;
        padding: 0 0 !important;
        text-decoration: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        min-width: 0 !important;
        border-radius: 0;
        font-size: 24px;
        font-weight: bold;
    }

    .popbox .closebutton:hover {
        background-color: transparent;
        color: #a00;
    }

.slidebox {
    display: none;
    width: auto;
    position: fixed;
    min-height: 250px;
    top: 25px;
    border: 1px solid #ababab;
    background-color: #fff;
    padding: 10px;
    z-index: 5000;
    color: #121212;
    text-align: left;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

    .slidebox h3 {
        color: #3A597A;
    }

    .slidebox .closebutton {
        top: -20px;
        right: -20px;
        position: absolute;
        background-color: #a00;
        color: #fff;
    }

        .slidebox .closebutton:hover {
            background-color: #ff0000;
            color: #fff;
        }

.popboxlg {
    display: none;
    width: 800px;
    position: fixed;
    left: 30%;
    min-height: 550px;
    top: 70px;
    border: 1px solid #ababab;
    background-color: #fff;
    padding: 45px 10px 10px 10px;
    z-index: 5000;
    color: #121212;
    text-align: left;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

@media(max-width:1140px) {

    .popboxlg {
        left: 10%;
    }
}

/* .popboxlg is a fixed 800px box positioned by percentage; below ~900px
   viewports it ran off the right edge with no way to scroll to it. */
@media(max-width:900px) {

    .popboxlg {
        left: 0;
        right: 0;
        width: auto;
        max-width: 100%;
        max-height: 100vh;
        overflow-y: auto;
        border-radius: 0;
    }
}




.popboxlg h3 {
    color: #3A597A;
}

.popboxlg .closebutton {
    top: 10px;
    right: 10px;
    position: absolute;
    background-color: none;
    color: #a00;
    text-align: center !important;
}

    .popboxlg .closebutton:hover {
        background-color: #ff0000;
        color: #fff;
    }


.popboxhuge {
    display: none;
    width: 1024px;
    position: fixed;
    margin: 0 auto;
    min-height: 250px;
    max-height: 700px;
    top: 75px;
    border: 1px solid #ababab;
    background-color: #fff;
    padding: 10px;
    left:17%;
    z-index: 5000;
    color: #121212;
    text-align: left;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

    .popboxhuge h3 {
        color: #3A597A;
    }

    .popboxhuge .closebutton {
        top: -20px;
        right: -20px;
        position: absolute;
        background-color: #a00;
        color: #fff;
    }

        .popboxhuge .closebutton:hover {
            background-color: #ff0000;
            color: #fff;
        }

.popboxflex {
    display: none;
    width: 800px;
    position: fixed;
    right: 30%;
    min-height: 250px;
    top: 75px;
    border: 1px solid #ababab;
    background-color: #fff;
    padding: 10px;
    z-index: 5000;
    color: #121212;
    text-align: left;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

    .popboxflex h3 {
        color: #3A597A;
    }

    .popboxflex .closebutton {
        top: -20px;
        right: -20px;
        position: absolute;
        background-color: #a00;
        color: #fff;
    }

        .popboxflex .closebutton:hover {
            background-color: #ff0000;
            color: #fff;
        }

.overlay {
    /*background-image: url("/images/ntoverlay2.png");*/
    background-color: rgba(0,0,0,.6);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4999;
    display: none;
}



.searchbox {
    border-radius: 10px;
    border: 1px solid #aaa;
    min-width: 200px;
    padding: 5px 10px !important;
}

.loginbox {
    height: 100%;
    width: 0;
    z-index: 3000;
    position: fixed;
    top: 30%;
    background: rgba(255,255,255,.7);
}

.loginboxcontent {
    padding: 10px 40px;
    margin: 100px auto 10px;
}

.loginbox input[type="text"], .loginbox input[type="password"] {
    padding: 5px;
}

.loginbox input[type="button"] {
    width: 100%;
}

.loginboxcontent h1 {
    color: #fff;
}

.roomwrapper {
    position: relative;
    width: 100%;
    min-height: 300px;
    border: 1px solid #415468;
    padding: 10px;
}

    .roomwrapper .closebutton {
        top: -20px;
        right: -20px;
        position: absolute;
    }

.chatdialog {
    width: auto;
    height: 100px;
    border: 1px solid #e1e1e1;
    padding: 10px;
    margin-bottom: 10px;
    overflow-y: auto;
}

    .chatdialog ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .chatdialog ul li {
            padding: 0px 20px;
        }

            .chatdialog ul li .isclient {
                color: #26A8DE;
                font-weight: bold;
            }

            .chatdialog ul li .iscoach {
                color: #415468;
                font-weight: bold;
            }

.chatbox {
    width: 100%;
    position: relative;
}

    .chatbox input[type="text"] {
        width: 300px;
        padding: 10px;
    }

.hidden {
    display: none;
}

.searchstatus {
    /*width: 150px;
    font-size: 12pt;
    position: fixed;
    top: 55px;
    right: 20px;
    padding: 5px;
    color: #ababab;*/
}

#coachbar {
    position: absolute;
    top: 15px;
    left: 275px;
}

    #coachbar a {
        background-color: #26A8DE;
        color: #fff;
        border: none;
        padding: 10px 20px;
        text-decoration: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

        #coachbar a:hover {
            background-color: #ADDA3F;
            color: #fff;
            cursor: pointer;
        }

.messagebox {
    padding: 12px;
    border: 1px solid #26A8DE;
    margin: 5px 0;
    max-width: 800px;
    background: #FFFFE0;
}

.col-half-offset {
    margin-left: 4.166666667%
}

.somespace {
    margin: 8px 0;
}

.centerblock {
    margin: 0 auto;
}

.somepad {
    padding: 5px;
}

.tinypad {
    padding: 1px;
}

.littlepad {
    padding: 2px;
}

.tile {
}

    .tile ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .tile ul li {
            float: left;
        }

.footerbutton {
    height: 60px;
    width: 75px;
    display: inline-block;
    border: none;
    color: #fff;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
    background-color: #26A8DE;
    margin-right: 10px;
}

    .footerbutton:hover {
        cursor: pointer;
        background-color: #66C8F2;
    }

.metricitem {
    background-color: #232323;
    width: 150px !important;
    height: 150px !important;
    border-radius: 95px !important;
    -moz-border-radius: 95px !important;
    -webkit-border-radius: 95px !important;
    border-width: 5px !important;
    padding: 50px 15px 15px !important;
    text-align: center;
    vertical-align: middle !important;
    line-height: 23px !important;
    font-size: 14pt !important;
    color: #fff !important;
}

    .metricitem label {
        font-weight: normal;
    }

.scorenorisk {
    width: 120px;
    height: 120px;
    border-radius: 70px;
    -moz-border-radius: 70px;
    -webkit-border-radius: 70px;
    border-width: 5px;
    border: 5px solid #aba;
    padding: 35px 10px 10px;
    text-align: center;
    vertical-align: middle;
    line-height: 20px;
    font-size: 24pt;
    color: #aba;
}

    .scorenorisk label {
        font-size: 12pt;
        text-transform: uppercase;
    }

.scorehighrisk {
    width: 120px;
    height: 120px;
    border-radius: 70px;
    -moz-border-radius: 70px;
    -webkit-border-radius: 70px;
    border-width: 5px;
    border: 5px solid #a00;
    border-right-color: #555;
    border-left-color: #555;
    border-top-color: #111;
    border-bottom-color: #111;
    padding: 35px 10px 10px;
    text-align: center;
    vertical-align: middle;
    line-height: 20px;
    font-size: 24pt;
    color: #fff;
    background-color: #a00;
}

    .scorehighrisk label {
        font-size: 12pt;
        text-transform: uppercase;
    }

.scoremedrisk {
    width: 120px;
    height: 120px;
    border-radius: 70px;
    -moz-border-radius: 70px;
    -webkit-border-radius: 70px;
    border-width: 5px;
    border: 5px solid #ffa606;
    border-right-color: #555;
    border-left-color: #555;
    border-top-color: #111;
    border-bottom-color: #111;
    padding: 35px 10px 10px;
    text-align: center;
    vertical-align: middle;
    line-height: 20px;
    font-size: 24pt;
    color: #fff;
    background-color: #ffa606;
}

    .scoremedrisk label {
        font-size: 12pt;
        text-transform: uppercase;
    }

.scorelowrisk {
    width: 120px;
    height: 120px;
    border-radius: 70px;
    -moz-border-radius: 70px;
    -webkit-border-radius: 70px;
    border-width: 5px;
    border: 5px solid #0a0;
    border-right-color: #555;
    border-left-color: #555;
    border-top-color: #111;
    border-bottom-color: #111;
    padding: 35px 10px 10px;
    text-align: center;
    vertical-align: middle;
    line-height: 20px;
    font-size: 24pt;
    color: #fff;
    background-color: #0a0;
}

    .scorelowrisk label {
        font-size: 12pt;
        text-transform: uppercase;
    }

.logoutbutton {
    padding: 10px 15px;
    display: inline-block;
    color: #fff !important;
    text-align: left;
    font-weight: bold;
    background-color: #333;
}

    .logoutbutton a .glyphicon {
        margin: 0 3px;
    }

    .logoutbutton:hover {
        cursor: pointer;
    }


.profilebutton {
    padding: 12px 15px;
    display: inline-block;
    text-align: left;
    font-weight: bold;
    width: 100%;
}

    .profilebutton a {
        color: #fff !important;
    }

        .profilebutton a .glyphicon {
            margin: 0 2px;
        }

    .profilebutton:hover {
        cursor: pointer;
    }

.topbarbutton .glyphicon {
    font-size: 22pt;
    float: left;
    margin-right: 10px;
    margin-top: 5px;
}

.topbarbutton {
    padding: 10px 0;
    display: inline-block;
    text-align: left;
    font-weight: bold;
    font-size: 12pt;
    width: 450px;
    cursor: pointer;
    /*background-image: url('/images/nav_bar_bg.png');*/
}
.account_statistics{
    margin-top:5px;
}
.loggedin-info {
    padding: 0 10px;
    cursor: pointer;
}

.smallertext {
    font-size: 9pt;
}
.updatemessage{
    margin-left:50px;
    height:60px;
    padding:20px;
    display:none;
}
.text-extradanger {
    color: #f00;
}
.bg-extradanger {
   background-color: #f00;
   color:#fff;
}
.topbarsep {
    padding: 0 3px;
    opacity: 0.5;
}

.topbarlinks {
    display: inline-block;
    margin-right: 5px;
    color: #fff;
}

.glyphicon-star.true {
    color: #0a0;
}

.glyphicon-star.false {
    color: #f00;
}

.k-animation-container {
    max-width: 500px;
}
/* DATA GRID STYLING OVERRIDES BEGIN*/

/* Removed: ".k-state-selected, k-in k-state-selected" and
   ".k-state-selected k-in k-state-focused" -- malformed selectors
   ("k-in"/"k-state-selected" written as bare element names) whose
   declaration bodies were entirely commented out. Dead in both ways. */


.iscoach {
    /*color: #26A8DE;*/
}

.isclient {
    color: #8BC63F;
}

.warningblock {
    background-color: #fc8e06;
    color: #fff;
}

.dangerblock {
    background-color: #a00;
    color: #fff;
}



/* Video Conference Styles*/

/*News Styles*/
.news_container {
    width: 400px !important;
    position: fixed;
    background-color: rgba(27,27,27,.9);
    right: -500px;
    top: 50px;
    bottom: 50px;
    margin: 0;
    padding: 15px;
    z-index: 4000;
    color: #fff;
    border: 1px solid rgba(244,244,244,1);
}

    .news_container .title {
        color: #fff;
        font-size: 16pt;
        margin-bottom: 15px;
    }

.news_item {
    padding: 10px;
    border: 1px solid #fff;
    border-radius: 10px;
    margin: 5px 10px;
}

.news_title {
    color: #fff;
    font-size: 14pt;
    font-weight: bold;
}

.news_date {
    font-size: 10pt;
    color: #eee;
}

.news_short_desc {
    color: #fff;
    font-size: 11pt;
}

.news_collection {
    overflow-y: auto;
    overflow-x: hidden;
    height: 94%;
}


.btn-flytrap, .btn-flytrap:hover, .btn-flytrap:active, .btn-flytrap:focus {
    background-color: #00A6AC;
    color: #fff;
    font-weight: bold;
}

/*Bootstrap 4 Overrides Begin*/

.btn-primary{
    background-image: none;
    border:1px solid transparent;
    background-color:#ababab;
}
.flex-fit{
   flex:1;
}

/*Bootstrap 4 Overrides End*/

/* ==========================================================================
   Bootstrap 3 compatibility shim
   --------------------------------------------------------------------------
   The master pages load Bootstrap 4.1.3, but a number of pages still use
   Bootstrap 3 component classes that were removed in v4. Without these rules
   the markup renders completely unstyled (panels became plain divs, hidden-*
   stopped hiding anything).

   Classes that had an exact v4 rename (col-xs-*, pull-*, img-circle,
   btn-default, col-*-offset-*) were migrated in the markup instead; only the
   ones needing real declarations are shimmed here.
   ========================================================================== */

/* --- .panel / .panel-body / .panel-default (v4 replacement: .card) --- */
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.panel-default {
    border-color: #ddd;
}

.panel-body {
    padding: 15px;
}

    .panel-body:after {
        content: "";
        display: table;
        clear: both;
    }

.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.panel-default > .panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}

.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}

.panel-footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

/* --- .hidden-{bp} (v4 replacement: .d-none / .d-{bp}-none) ---
   Reproduces the Bootstrap 3 breakpoints exactly:
   xs < 768, sm 768-991, md 992-1199, lg >= 1200. */
@media (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-md {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .hidden-lg {
        display: none !important;
    }
}

/* --- .input-group-addon (v4 replacement: .input-group-text inside
   .input-group-prepend/.input-group-append). Kept as a shim because the
   third-party js/angular-number-picker.js emits this markup from a compiled
   template we do not own. --- */
.input-group > .input-group-addon {
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}

.input-group > .input-group-addon:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .input-group-addon:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ==========================================================================
   Responsive fallbacks for fixed-width overlay panels
   --------------------------------------------------------------------------
   .popbox / .popboxhuge / .popboxflex / .droppanel / .news_container are all
   position:fixed with a hard pixel width and a percentage offset. Below the
   widths below, the box extended past the edge of the viewport; because they
   are position:fixed the page cannot be scrolled to reach the clipped part,
   so buttons inside them became unreachable.

   Desktop sizing is unchanged -- these rules only engage at the point where
   the panel would otherwise overflow.
   ========================================================================== */

/* .popboxhuge: 1024px at left:17% overflows below ~1234px. */
@media (max-width: 1240px) {
    .popboxhuge {
        left: 0;
        right: 0;
        width: auto;
        max-width: 100%;
        max-height: 100vh;
        overflow-y: auto;
    }
}

/* .popboxflex: 800px anchored right:30% runs off the LEFT edge below ~1143px. */
@media (max-width: 1150px) {
    .popboxflex {
        left: 0;
        right: 0;
        width: auto;
        max-width: 100%;
        max-height: 100vh;
        overflow-y: auto;
    }
}

/* .popbox: 600px at left:30% overflows below ~860px. This is the app's main
   modal (used on 86 pages), so it matters most. */
@media (max-width: 900px) {
    .popbox {
        left: 0;
        right: 0;
        width: auto;
        max-width: 100%;
        max-height: 100vh;
        overflow-y: auto;
        border-radius: 0;
    }

    .droppanel {
        left: 0;
        right: 0;
        width: auto;
        max-width: 100%;
    }
}

/* .news_container slides in to right:10px at a hard 400px width, which is
   wider than a phone viewport. */
@media (max-width: 440px) {
    .news_container {
        width: auto !important;
        max-width: calc(100% - 20px);
        left: 10px;
    }
}