/* ==========================================================================
Hide ng-cloak on page load, https://docs.angularjs.org/api/ng/directive/ngCloak
========================================================================== */
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
    display: none !important;
}

/* ==========================================================================
Developement Ribbon
========================================================================== */
/*
.development {
    position: absolute;
    width: 149px;
    height: 149px;
    top: 0;
    left: 0;
    border: 0;
    z-index: 1000;
    background-image: url("../images/development_ribbon.png");
    background-position: center center;
    background-repeat: no-repeat;
}
*/
/* ==========================================================================
Version number in navbar
========================================================================== */
/*
.navbar-version {
    font-size: 10px;
    color: #ccc
}

.navbar-default {
    border: 0;
}
*/
/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
/*
.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

.hero-unit {
    margin: 50px auto 0 auto;
    width: 300px;
    font-size: 18px;
    font-weight: 200;
    line-height: 30px;
    background-color: #eee;
    border-radius: 6px;
    padding: 60px;
}

.hero-unit h1 {
    font-size: 60px;
    line-height: 1;
    letter-spacing: -1px;
}

.error {
    color: white;
    background-color: red;
}

.hipster {
    display: inline-block;
    width: 347px;
    height: 497px;
    background: url("../images/hipster.png") no-repeat center top;
    background-size: contain;
}
 */

/* wait autoprefixer update to allow simple generation of high pixel density media query */
/*
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
    .hipster {
        background: url("../images/hipster2x.png") no-repeat center top;
        background-size: contain;
    }
}*/

.hand {
    cursor: pointer;
}

#threadDump .popover,
#healthCheck .popover {
    top: inherit;
    display: block;
    font-size: 10px;
    max-width: 1024px;
}

#healthCheck .popover {
    margin-left: -50px;
}

.health-details {
    min-width: 400px;
}

.alert .popover pre {
    font-size: 10px;
}

/*
.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }
*/

/* start Password strength bar style */
ul#strength {
    display: inline;
    list-style: none;
    margin: 0;
    margin-left: 15px;
    padding: 0;
    vertical-align: 2px;
}

.point:last {
    margin: 0 !important;
}

.point {
    background: #ddd;
    border-radius: 2px;
    display: inline-block;
    height: 5px;
    margin-right: 1px;
    width: 20px;
}

/* end Password strength bar style */

.form-horizontal .control-label {
    text-align: left !important;
    color: black;
    font-weight: normal;
}

.well1 {
    background-color: #f5f5f5;
    padding: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.pointer {
    cursor: pointer;
}

@media (max-width: 768px) {
    .padding {
        padding: 5px;
    }
}

.padding {
    padding: 15px;
}

.topPadding {
    padding-top: 40px;
}

.large-padding {
    padding: 40px;
}

.main-color {
    background-color: #3595d2;
}

.main-color-font {
    color: #3d2e41;
}

.center {
    text-align: center;
}

.copyright {
    text-align: right;
}

.h4-nomargin {
    font-size: 14pt;
    font-weight: bold;
}

.wvform {
    max-width: 700px;
}

.bg-primary {
    background-color: #52287e;
    border-color: #52287e;
}

/*
.panel {
    border-radius: 0;
    background-color: #fff;
}

.panel-primary > .panel-heading {
    color: #fff;
    background-color: #52287e;
    border-color: #52287e;
    padding: 20px 30px 20px 30px;
    font-size: 20px;
}

.panel-primary > .panel-heading a {
    color: #fff;
    font-size: 0.8em;
}

.panel-primary {
    border: 1px solid #52287e;
    margin-bottom: 40px;
}

.panel-heading {
    font-size: 18px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.modal-content .panel-heading {
    font-size: 24px;
    letter-spacing: 2px;
    border-radius: 0;
}

.panel-body {
    padding: 0;
}

.panel-body-bottom-padding {
    padding-bottom: 100px;
}

.panel-body .h4 {
    color: #52287e;
}

.panel-primary > .panel-heading h1 {
    color: #ffffff;
    text-align: center;
    padding: 20px;
}

.panel-body .padding {
    padding: 5px 50px 5px 50px;
}

.panel-body .no-content {
    padding-top: 70px;
    padding-bottom: 70px;
    text-align: center;
    font-size: 1.2em;
    color: lightgray;
}

.panel-form-spacer {
    margin-top: 40px;
    margin-bottom: 125px;
}

@media (max-width: 768px) {
    .panel-body .padding {
        padding: 15px;
    }
    .panel-form-spacer {
        margin-top: 50px;
        margin-bottom: 50px;
    }
}
 */

.no-content .h3 {
    color: #444444;
    text-transform: none;
}

.no-content a {
    color: #52287e;
}

.no-content .row div {
    margin-top: 5px;
}

hr {
    margin: 5px;
}

a.detailLink {
    text-transform: uppercase;
    color: #666666;
    cursor: pointer;
    font-size: 0.9em;
}

.classPickTitle {
    cursor: pointer;
}

.creationDetails {
    font-size: 0.9em;
    padding-top: 8px;
}

.bodyPadding,
.sidePadding {
    padding-left: 100px;
    padding-right: 100px;
}

.bodyPadding {
    padding-top: 50px;
    padding-bottom: 50px;
}

.info {
    background-color: #ff8331;
    color: #fff;
    padding-top: 20px;
    padding-bottom: 20px;
}

.info i span {
    font-size: 0.8em;
}

.info a {
    color: #fff;
}

.grayBackground {
    background-color: #f4f4f4;
}
.whiteBackground {
    background-color: #fff;
}
.orangeBackground {
    background-color: #ff8331;
}

.circle {
    border-radius: 50%;
    width: 125px;
    height: 125px;
    background-color: #52287e;
    margin-left: 15px;
}

.teacherDashboard .welcome a {
    color: #444444;
    font-weight: bold;
    font-size: 20px;
}

.gradePicker,
.gradePickerReverse {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    width: 40px;
    height: 40px;
    text-align: center;
    margin: 2px;
    font-weight: normal;
    display: inline-block;
    line-height: 2.5;
}

.gradePickerReverse {
    background-color: white;
    color: #52287e;
    border: 1px solid #52287e;
    cursor: pointer;
}

.gradePickerReverse.active {
    background-color: #52287e;
    color: #fff;
}

.gradePicker.active {
    background: white;
    color: #52287e;
}

/*
	Tables
*/

/*
	Tabs
*/

.nav-tabs > li:last-child > a {
    border-radius: 0;
}

.nav-tabs > li:first-child > a {
    border-radius: 0;
}

.nav-tabs > li > a {
    font-size: 20px;
    border: 1px solid #ddd;
    margin: -1px;
    padding: 15px 50px 15px 50px;
    color: #54237f;
    border-radius: 0;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #fff;
    cursor: default;
    background-color: #54237f;
}

.administrators .features .nav-tabs.nav-justified > li > a {    /*Added to override abberant styling from WE-137*/
    border-radius: 0;
}

.administrators .features .nav-tabs > li > a {  /*Added to override abberant styling from WE-137*/
    margin: 0px;
}

.green-bg {
    background: url('/assets/images/pattern-green.jpg');
}

.teacherSubHeader {
    background: #fff;
}

.teacherSubHeaderButtons {
    margin-top: 15px;
    height: 60px;
}

.teacherMain {
    background: #f5f5f5;
    padding-bottom: 40px;
}

.audience {
    padding-top: 75px;
    padding-bottom: 100px;
}

.audience .cta {
    text-align: center;
    min-height: 500px;
    font-size: 18px;
    background-color: white;
    margin-top: -75px;
    padding: 50px 20px 50px 20px;
}

.audience .title h4 {
    text-transform: none;
}

.audience .title h4 a:hover {
    color: #52287e;
}

.audience .cta ul {
    width: 90%;
    padding: 20px 10px;
    text-align: left;
}

.audience .cta ul li i {
    color: #54237f;
}

.audience .col-sm-4 {
    padding-top: 20px;
}

.subscribenow {
    position: relative;
    top: 0;
    float: right;
}

.modal-dialog .dialog-header-confirm,
.dialog-header-error,
.dialog-header-notify {
    background-color: #fff;
    color: black;
    text-align: center;
    border: 0;
}

.modal-dialog .dialog-header-notify h4,
.modal-dialog .dialog-header-confirm h4 {
    color: black;
    font-size: 30px;
}

.modal-dialog .dialog-header-error h4 span {
    color: black;
    font-size: 30px;
}

.modal-dialog .dialog-header-error h4 span:first-child {
    color: #ff8331;
    font-weight: normal;
    padding-right: 10px;
}

.modal-dialog .modal-header {
    min-height: 16.42857143px;
    padding: 25px;
}

.modal-dialog .dialog-header-confirm + .modal-body,
.dialog-header-notify + .modal-body {
    font-size: 20px;
    text-align: center;
    color: black;
}

.modal-dialog .dialog-header-error + .modal-body {
    font-size: 20px;
    text-align: center;
    color: #52287e;
}

.modal-dialog .modal-footer .btn-default {
    border: 1px solid #ff8331;
    color: #ff8331;
}

.modal-dialog .modal-footer .btn-default:hover {
    background-color: #ff8331;
    color: #fff;
}

.editable-controls .chosen-container + .editable-buttons {
    display: block;
    text-align: right;
}

.assetList {
    height: 300px;
    overflow: scroll;
}

.assetList .asset {
    width: 100%;
    background: #fff;
    border: 1px solid #52287e;
    color: #52287e;
    border-radius: 5px;
    margin: 5px 0 5px 0;
    padding: 5px 20px 5px 20px;
}

.asset.active {
    background: #52287e;
    color: #fff;
}

.answerPanel .row .col-md-4 .term .editable-wrap .editable-controls {
    white-space: normal;
}

.usersAdmin .filter {
    height: 35px;
    font-size: 14px;
    padding: 5px 10px;
}

.connections {
    overflow-y: scroll;
    height: 500px;
}

.connection {
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    border: solid 1px #52287e;
    color: black;
    cursor: pointer;
}

.connectionSelected {
    background: #52287e;
    color: #fff;
}

.chosen-container-multi .chosen-choices {
    height: 50px;
    font-size: 14px;
    border-radius: 10px;
    padding: 5px;
}

.message {
    font-size: 18px;
    color: #000;
    padding-top: 10px;
    padding-bottom: 10px;
}

.message a {
    color: black;
    text-decoration: underline;
}

.displayAd {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1000000;
    background-color: rgba(128, 128, 128, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.displayAd .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.displayAd .img-overlay {
    position: relative;
    max-width: 600px;
    display: inline-block;
}

.stop-scrolling {
    height: 100%;
    overflow: hidden;
}

.gamesAndMore .overlay {
    position: relative;
    background-color: rgba(0, 0, 0, 0.3);
    min-height: 415px;
    margin-top: -415px;
}

.gamesAndMore .nav-tabs li.active a {
    background-color: #54237f;
    font-weight: bold;
    color: white;
}

.gamesAndMore .nav-tabs li a {
    border: 1px solid #54237f;
}

.gamesAndMore .nav-tabs.nav-justified > li > a {
    border-radius: 0;
}

.gamesAndMore .tab-content h2 {
    font-size: 18px;
    letter-spacing: 1px;
    margin-top: 0;
}

.gamesAndMore .tab-content .tab-pane {
    border-left: 1px solid #54237f;
    border-right: 1px solid #54237f;
    border-bottom: 1px solid #54237f;
    padding: 20px;
    margin-bottom: 20px;
    min-height: 425px;
}

.gamesAndMore .row {
    padding-top: 15px;
    padding-bottom: 15px;
}

/** main page content styles **/
.development-banner {
    background-color: yellow;
    padding: 10px;
    color: black;
    position: fixed;
    top: 55px;
    left: 6px;
    z-index: 10000;
}

.main-content-container {
    margin: 0;
    padding: 0;
    width: 100%;
}

.main-content-container .main-content-view {
    background-color: white;
    padding: 0;
    margin: 0;
}

/******************************
    RESPONSIVE:
*******************************/
/*Daré's CSS Classes - START*/
@media only screen and (device-width: 767px), only screen and (max-width: 767px) {
    .search_bar {
        width: 95% !important;
        margin-bottom: 20px;
        margin-left: 15px;
    }

    .align_it_left {
        padding-left: 15px !important;
    }
    .navbar-nav {
        margin: -1.5px -15px !important;
    }
    .search-width {
        width: 96.5% !important;
    }
}

@media only screen and (device-width: 694px), only screen and (max-width: 694px) {
    .search_bar {
        width: 95% !important;
        margin-bottom: 20px;
        margin-left: 15px;
    }

    .align_it_left {
        padding-left: 15px !important;
    }
    .navbar-nav {
        margin: -1.5px -15px !important;
    }
    .search-width {
        width: 95.5% !important;
    }
}
@media only screen and (device-width: 540px), only screen and (max-width: 540px) {
    .search_bar {
        width: 95% !important;
        margin-bottom: 20px;
        margin-left: 15px;
    }

    .align_it_left {
        padding-left: 15px !important;
    }
    .navbar-nav {
        margin: -1.5px -15px !important;
    }
    .search-width {
        width: 94.5% !important;
    }
}
@media only screen and (device-width: 443px), only screen and (max-width: 443px) {
    .search_bar {
        width: 95% !important;
        margin-bottom: 20px;
        margin-left: 15px;
    }

    .align_it_left {
        padding-left: 15px !important;
    }
    .navbar-nav {
        margin: -1.5px -15px !important;
    }
    .search-width {
        width: 93.5% !important;
    }
}
@media only screen and (device-width: 767px), only screen and (max-width: 767px) {
    .search_bar {
        width: 95% !important;
        margin-bottom: 20px;
        margin-left: 15px;
    }

    .align_it_left {
        padding-left: 15px !important;
    }
    .navbar-nav {
        margin: -1.5px -15px !important;
    }
    .search-width {
        width: 92.5% !important;
    }
}

@media only screen and (device-width: 320px), only screen and (max-width: 320px) {
    .search_bar {
        width: 95% !important;
        margin-bottom: 20px;
        margin-left: 15px;
    }

    .align_it_left {
        padding-left: 15px !important;
    }
    .navbar-nav {
        margin: -1.5px -15px !important;
    }
    .search-width {
        width: 90.5% !important;
    }
}
/*Dare CSS Classes - END*/