@font-face {
    font-family: 'Open Sans Light';
    src: url("../fonts/OpenSans/Light/OpenSans-Light.eot?v=1.1.0");
    src: url("../fonts/OpenSans/Light/OpenSans-Light.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/OpenSans/Light/OpenSans-Light.woff2?v=1.1.0") format("woff2"), url("../fonts/OpenSans/Light/OpenSans-Light.woff?v=1.1.0") format("woff"), url("../fonts/OpenSans/Light/OpenSans-Light.ttf?v=1.1.0") format("truetype"), url("../fonts/OpenSans/Light/OpenSans-Light.svg?v=1.1.0#Light") format("svg");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "FontAwesome";
    font-weight: normal;
    font-style: normal;
    src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
    src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}
/* END Light */
/* BEGIN Light Italic */
@font-face {
    font-family: 'Open Sans Light Italic';
    src: url("../fonts/OpenSans/LightItalic/OpenSans-LightItalic.eot?v=1.1.0");
    src: url("../fonts/OpenSans/LightItalic/OpenSans-LightItalic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/OpenSans/LightItalic/OpenSans-LightItalic.woff2?v=1.1.0") format("woff2"), url("../fonts/OpenSans/LightItalic/OpenSans-LightItalic.woff?v=1.1.0") format("woff"), url("../fonts/OpenSans/LightItalic/OpenSans-LightItalic.ttf?v=1.1.0") format("truetype"), url("../fonts/OpenSans/LightItalic/OpenSans-LightItalic.svg?v=1.1.0#LightItalic") format("svg");
    font-weight: 300;
    font-style: italic;
}
/* END Light Italic */
/* BEGIN Regular */
@font-face {
    font-family: 'Open Sans';
    src: url("../fonts/OpenSans/Regular/OpenSans-Regular.eot?v=1.1.0");
    src: url("../fonts/OpenSans/Regular/OpenSans-Regular.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/OpenSans/Regular/OpenSans-Regular.woff2?v=1.1.0") format("woff2"), url("../fonts/OpenSans/Regular/OpenSans-Regular.woff?v=1.1.0") format("woff"), url("../fonts/OpenSans/Regular/OpenSans-Regular.ttf?v=1.1.0") format("truetype"), url("../fonts/OpenSans/Regular/OpenSans-Regular.svg?v=1.1.0#Regular") format("svg");
    font-weight: normal;
    font-style: normal;
}
/* END Regular */
/* BEGIN Italic */
@font-face {
    font-family: 'Open Sans Italic';
    src: url("../fonts/OpenSans/Italic/OpenSans-Italic.eot?v=1.1.0");
    src: url("../fonts/OpenSans/Italic/OpenSans-Italic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/OpenSans/Italic/OpenSans-Italic.woff2?v=1.1.0") format("woff2"), url("../fonts/OpenSans/Italic/OpenSans-Italic.woff?v=1.1.0") format("woff"), url("../fonts/OpenSans/Italic/OpenSans-Italic.ttf?v=1.1.0") format("truetype"), url("../fonts/OpenSans/Italic/OpenSans-Italic.svg?v=1.1.0#Italic") format("svg");
    font-weight: normal;
    font-style: italic;
}
/* END Italic */
/* BEGIN Semibold */
@font-face {
    font-family: 'Open Sans Semibold';
    src: url("../fonts/OpenSans/Semibold/OpenSans-Semibold.eot?v=1.1.0");
    src: url("../fonts/OpenSans/Semibold/OpenSans-Semibold.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/OpenSans/Semibold/OpenSans-Semibold.woff2?v=1.1.0") format("woff2"), url("../fonts/OpenSans/Semibold/OpenSans-Semibold.woff?v=1.1.0") format("woff"), url("../fonts/OpenSans/Semibold/OpenSans-Semibold.ttf?v=1.1.0") format("truetype"), url("../fonts/OpenSans/Semibold/OpenSans-Semibold.svg?v=1.1.0#Semibold") format("svg");
    font-weight: 600;
    font-style: normal;
}
/* END Semibold */
/* BEGIN Semibold Italic */
@font-face {
    font-family: 'Open Sans SemiboldItalic';
    src: url("../fonts/OpenSans/SemiboldItalic/OpenSans-SemiboldItalic.eot?v=1.1.0");
    src: url("../fonts/OpenSans/SemiboldItalic/OpenSans-SemiboldItalic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/OpenSans/SemiboldItalic/OpenSans-SemiboldItalic.woff2?v=1.1.0") format("woff2"), url("../fonts/OpenSans/SemiboldItalic/OpenSans-SemiboldItalic.woff?v=1.1.0") format("woff"), url("../fonts/OpenSans/SemiboldItalic/OpenSans-SemiboldItalic.ttf?v=1.1.0") format("truetype"), url("../fonts/OpenSans/SemiboldItalic/OpenSans-SemiboldItalic.svg?v=1.1.0#SemiboldItalic") format("svg");
    font-weight: 600;
    font-style: italic;
}
/* END Semibold Italic */
/* BEGIN Bold */
@font-face {
    font-family: 'Open Sans Bold';
    src: url("../fonts/OpenSans/Bold/OpenSans-Bold.eot?v=1.1.0");
    src: url("../fonts/OpenSans/Bold/OpenSans-Bold.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/OpenSans/Bold/OpenSans-Bold.woff2?v=1.1.0") format("woff2"), url("../fonts/OpenSans/Bold/OpenSans-Bold.woff?v=1.1.0") format("woff"), url("../fonts/OpenSans/Bold/OpenSans-Bold.ttf?v=1.1.0") format("truetype"), url("../fonts/OpenSans/Bold/OpenSans-Bold.svg?v=1.1.0#Bold") format("svg");
    font-weight: bold;
    font-style: normal;
}
/* END Bold */
/* BEGIN Bold Italic */
@font-face {
    font-family: 'Open Sans Bold Italic';
    src: url("../fonts/OpenSans/BoldItalic/OpenSans-BoldItalic.eot?v=1.1.0");
    src: url("../fonts/OpenSans/BoldItalic/OpenSans-BoldItalic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/OpenSans/BoldItalic/OpenSans-BoldItalic.woff2?v=1.1.0") format("woff2"), url("../fonts/OpenSans/BoldItalic/OpenSans-BoldItalic.woff?v=1.1.0") format("woff"), url("../fonts/OpenSans/BoldItalic/OpenSans-BoldItalic.ttf?v=1.1.0") format("truetype"), url("../fonts/OpenSans/BoldItalic/OpenSans-BoldItalic.svg?v=1.1.0#BoldItalic") format("svg");
    font-weight: bold;
    font-style: italic;
}
/* END Bold Italic */
/* BEGIN Extrabold */
@font-face {
    font-family: 'Open Sans Extra Bold';
    src: url("../fonts/OpenSans/ExtraBold/OpenSans-ExtraBold.eot?v=1.1.0");
    src: url("../fonts/OpenSans/ExtraBold/OpenSans-ExtraBold.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/OpenSans/ExtraBold/OpenSans-ExtraBold.woff2?v=1.1.0") format("woff2"), url("../fonts/OpenSans/ExtraBold/OpenSans-ExtraBold.woff?v=1.1.0") format("woff"), url("../fonts/OpenSans/ExtraBold/OpenSans-ExtraBold.ttf?v=1.1.0") format("truetype"), url("../fonts/OpenSans/ExtraBold/OpenSans-ExtraBold.svg?v=1.1.0#ExtraBold") format("svg");
    font-weight: 800;
    font-style: normal;
}
/* END Extrabold */
/* BEGIN Extrabold Italic */
@font-face {
    font-family: 'Open Sans Extra Bold Italic';
    src: url("../fonts/OpenSans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.eot?v=1.1.0");
    src: url("../fonts/OpenSans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/OpenSans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.woff2?v=1.1.0") format("woff2"), url("../fonts/OpenSans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.woff?v=1.1.0") format("woff"), url("../fonts/OpenSans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.ttf?v=1.1.0") format("truetype"), url("../fonts/OpenSans/ExtraBoldItalic/OpenSans-ExtraBoldItalic.svg?v=1.1.0#ExtraBoldItalic") format("svg");
    font-weight: 800;
    font-style: italic;
}

html {
    position: relative;
}

body {
    font-family: "Open Sans";
    font-size: 13px;

}

.form-control {
    font-size: 13px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-container {
    padding-left: 0;
    padding-right: 0;
    background: url("../images/IAC_student_login_background_v14.jpg"), #24a8e5;
    background-size: cover;
   

}


.container-inner {
    background: #ffffff;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid transparent;
    border-radius: 20px;
    top: 45px;
    margin-left: 54px;
    position: relative;
    margin-right: 50px;
   
    padding: 0 0 10px;
    margin-bottom: 82px;
    position: relative;
    margin: auto;
    width: 1330px;
    /*height: 700px;*/
}

.body-content-inner {   
    margin-top: 25px;
    position: relative;    
}

.heading, .analyticsHeading {
    font-size: 16px;
    color: #000000;
}
.subHeading {
    font-size: 13px;  
    line-height: 16px;
    padding-bottom: 10px;
}
.style17 {
    font-size: 10px;
    color: #000000;
    line-height: 11px;
    font-weight: bold;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

img[usemap]{
max-width: 100%;
width:90%;
height: auto;
border: none;
}

.studentName{
font-size: 15px;
color: #000000;
text-align: left;
}

.programmeName{
font-size: 13px;
font-family: 'Open Sans Semibold';
color: #000000;
text-align: left;
}



.style30 {
    font-size: 13px;
    font-family: 'Open Sans Light';
    color: #000000;
    line-height: 15px;
    position: absolute;
    width: 250px;
    text-align: right;
}

.viewLearnerJourney .learnerJourneyBegins, .viewLearnerJourney .excitngExpeDiscover,
.viewLearnerJourney .learningTogether {
    top: 10%;
    left: 73%;
    text-align: left;
}

.viewLearnerJourney .excitngExpeDiscover {
    top: 45%;
    left: 78%;
}

.viewLearnerJourney .futureReadiness{
left: 10%;
top: 0%;
right: 0%;
}

.viewLearnerJourney .learningTogether {
top: 74%;
left: 72%;
}

.viewLearnerJourney .creativeCapable {
top: 33%;
}

.viewLearnerJourney .skilfulRefleCommun {
top: 380px;
left: 90px
}

.viewLearnerJourney .breakingNewGrnd {
top: 92%;
left: 25%;
}

.style10 {
    font-size: 11px;
    padding: 12px 0px;
    width: 100px;
    text-align: center;
}
.progress-rollover {
    color: #000000;
    font-size: 11px;
}

.small-caps {
    font-size: 9px;
    color: #000000;
    text-transform: uppercase;
}

.fontSize11 {
    font-size: 11px;
}

.large-caps {
    font-size: 12px;
    color: #000000;
    text-transform: uppercase;
}

.messageBox {
    display:inline-block
}
div.progress {
    height: 8px;
}
.show > .dropdown-menu {
    display: block
}

div.progress-bar.green {
    background-color: #5cb85c;
}
div.progress-bar.yellow {
    background-color: #f3e961;
}

div.progress-bar.orange {
    background-color: #f3822f;
}

footer {
    background-color: #474C49;
    padding-top: 30px;
    padding-bottom: 30px;
    position: relative;
    bottom: 0;
    width: 100%;
    height: 150px;
}

    footer div {
        font-size: 12px;
        color: white;
        line-height: 16px;
        margin-bottom: 2.5px;
    }
    footer .footWidth {
        width: 860px;
        margin: auto;
        align-content:center;
    }
a {
    color: #24a8e5;
}

footer a {
    font-size: 12px;
    color: #24A8E5;
}

.buttonBox {
    height: 30px;
    background: #24a8e5;
    font-size: 10px;
    color: white !important;
    border-radius: 13.5px;
    font-family: "Open Sans Bold";
    text-transform: uppercase;
    padding-left: 20px;
    padding-right: 20px;
    cursor: pointer;
}

.buttonBox.width110 {
    width: 110px;
}
.buttonBox.selected,.buttonBox.grey {
    background: #e2e4e5;
}
    .buttonBox.selectedBlack {
        background: #e2e4e5;
        color: black;
    }

    .buttonBox:hover {
        box-shadow: 1px 3px 4px 0.25px #000000;
        box-shadow: 1px 3px 4px 0.25px rgba(0, 0, 0, 0.15);
    }
.buttonBox.disabled {
    cursor: not-allowed;
}
.iconBox, .viewEvidence .iconBox, .profilesection3 .iconBox, .capabilityIconBox ,.resourceIconBox {
    width: 100px;
    padding: 20px;
    border: 1px solid #e2e4e5;
    font-size: 25px;
    text-align: center;
}
    .capabilityIconBox.disabled {
        background: #D3D3D3;
        cursor:not-allowed
    }
.profilesection3 .iconBox {
    width: 80px;
    padding: 10px;
    margin-top: 0px;
}

.capabilityIconBox, .resourceIconBox {
    border-radius: 10px;
    font-family: 'Open Sans';
    font-size: 13px;
    padding: 15px 10px;
    min-width: 133px;
    height: 100px;
    cursor: pointer;
    vertical-align: middle;
    display: table-cell;
}

    .resourceIconBox:hover {
        background: #24A8E5;
        color: white;
    }

    .viewEvidence .iconBox {
        width: 80px;
        padding: 10px;
    }


    div.homeLogo {
        padding-top: 50px;
    }
div.homeLogin {
    color: white;
    font-size: 22px;
    width: 271px;
    text-align: center;
  
    margin: auto;
}

nav.navigation-box {
    padding: 10px 66px;
    box-shadow: 0px 4px 5.7px 0.3px #000000;
    box-shadow: 0px 4px 5.7px 0.3px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    background: white;
    margin-top: 0;
    border-radius: 10px;
}

ul.navbar-nav li.nav-icon {
    width: 47.5px;
    height: 41.5px;
    text-align: center;
    padding-top: 10px;
}

    ul.navbar-nav li.nav-icon a.nav-link {
        padding: 0;
        margin: 0px;
        display: block;
        width: 100%;
        height: 100%;
    }

 ul.navbar-nav li.nav-item.disabled, li.nav-item.disabled a {
    cursor: not-allowed;
    opacity: 0.5
}
ul.navbar-nav li.nav-item.enabled, li.nav-item.enabled a {
    cursor: pointer;
    opacity: 1
}
ul.navbar-nav li.nav-item.enabled.active {
    box-shadow: 1px 3px 4.8px 0.2px #000000;
    box-shadow: 1px 3px 4.8px 0.2px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    background-color: #24a8e5;
    background-color: rgba(36,168,229,0.5);
    
}
.modal-header {
    background-color: #24a8e5;
    background-color: rgba(36,168,229,0.5);
}
    ul.navbar-nav li.nav-item.enabled:hover {
        box-shadow: 1px 3px 4.8px 0.2px #000000;
        box-shadow: 1px 3px 4.8px 0.2px rgba(0, 0, 0, 0.15);
        border-radius: 10px;
        background-color: #fff;
        opacity: 0.5
    }
.hidden {
    display: none !important;
}

.avatar {
    vertical-align: middle;
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

#profileAvatarImage{
 width: 55px;
 height: 55px;
}

#learnerAvatarImage {
    width: 120px;
    height: 120px;
    border: 20px solid #e2e4e5;
    opacity : 0.9
}

.viewLearnerMobile{
display: none;
}



.marginLeft30 {
    margin-left: 30px;
}
.marginLeft50 {
    margin-left: 50px;
}
.style16 {
    font-size: 13px;
    color: #000000;
    text-align: left;
    line-height: 16px;
}
.style16.padding {
    padding: 20px 15px;
}
ul.navbar-nav li.nav-item div.nav-user-name, .viewEvidence .behaviourInd, .profileDetails {
    font-size: 13px;
    font-family: "Open Sans Semibold";
    color: #474c49;
    line-height: 14px;
}

.buildingLearnerHeading{
    font-family: 'Open Sans';
    font-size: 17px;
    line-height: 18px;
    color: #075da7;
    padding-top: 24px;

}

ul.navbar-nav li.nav-item div.nav-user-name {
    text-align: right;
}

.profileDetails, .profileDetails a {
    color: white;
    font-family: 'Open Sans';
    font-size: 13px;
    width: 94%;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-left: 13px;
}
    .profileDetails a.profileUrl {
        width: 94%;
        display: block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        padding-left: 13px;

    }

    ul.navbar-nav li.nav-item div.nav-user-title, .profileDetailsHeading {
        font-size: 11px;
        text-transform: uppercase;
        text-align: right;
        color: #474c49;
        line-height: 14px;
    }
        .profileDetailsHeading {
            font-size: 13px;
        }

        .capabilitiesheading1, .capabilitiesheading2, .capabilitiesheading3,
        .profilesection3 .capabilitiesheading1, .fullCapability .capabilitiesheading1, .fullCapability .capabilitiesheading2 {
            font-size: 14px;
            text-align: center;
            color: #474c49;
            font-family: 'Open Sans Semibold';
            padding-top: 10px;
        }

.assessmentBiHelpIcon .popover, .learnerImgAreaPopover .popover {
    max-width: 120px;
    height: 150px;
}


.popoverHelp{
padding-top: 15px;
}

.lifecycleMobilePopover {
    left: 40%;
    position: absolute;
    top: 65%;
}

.viewLearnerImgAreaPopover {
    left: 50%;
    position: absolute;
    top: 50%;
    max-width: 30%;
}

.capabilityDiagramNoImg .borderRadius {
    box-shadow: inset -4px -6px 3px 0.48px #000000;
    border-radius: 50%;
}

#learnerJourneyId {
    left: 72%;
    top: 24%;
    position: absolute;
}

#futureReadId {
    left: 35%;
    top: 24%;
    position: absolute;
}

#creCapId {
    left: 20%;
    top: 49%;
    position: absolute;
}

#skilfulRefId {
    left: 30%;
    top: 73%;
    position: absolute;
}

#breNwGrndId {
    left: 50%;
    top: 83%;
    position: absolute;
}

#learngTogeId {
    left: 75%;
    top: 78%;
    position: absolute;
}

#exctngEperId {
    left: 83%;
    top: 50%;
    position: absolute;
}

.capabilitiesheading1 .indicator-title {
    font-size: 14px;
    color: #474c49;
    font-family: 'Open Sans';
    padding-top: 10px;
}

.fullCapability .capabilitiesheading1, .fullCapability .capabilitiesheading2{
    text-align: left;
    padding-top: 0px;
}

    .fullCapability .capabilitiesheading2{
    padding-top:5px;
    }

    .profilesection3 .capabilitiesheading1 {
        padding-top: 0px;
    }

.capabilitiesheading2, .fullCapability .capabilitiesheading2 {
    font-size: 13px;
    font-family: 'Open Sans';
    padding-top: 0px;
}

.fullCapability2{
padding-top: 10px;

}
    
.fullCapability2 .capabilityName {
    font-family: 'Open Sans';
    font-size: 15px;
    color: #24a8e5;
    padding-bottom: 10px;
    padding-top: 10px;
}

a.disabledLink{
color: grey;
pointer-events: none;
}

.fullCapability2 .behaviourIndicator {
    font-family: 'Open Sans';
    font-size: 13px;
    color: #474c49;
    line-height: 22px;
}

.profilesection3 {
padding-top: 0px;
height: 100%;

}

.capabilitiesheading3 {
    font-family: 'Open Sans';
    font-size: 13px;
    padding-bottom: 10px;
}

.capabilitiesheading {
    font-size: 12px;
    text-align: center;
    color: #474c49;
}

.detailsHeading{
font-family: 'Open Sans';
font-size: 14px;
color: #24a8e5;
text-align: left;
text-transform: uppercase;
}

.detailsbody {
    font-family: 'Open Sans';
    font-size: 13px;
    color: #4C4749;
    text-align: left;
    line-height: 20px;
}

.height100{
height: 100% !important;
}

.programmeHeading {
    font-family: 'Open Sans Semibold';
    font-size: 14px;
    color: #000000;
    line-height: 25px;
    padding-bottom: 20px;
}

.fontFamilySemiBold {
    font-family: 'Open Sans Semibold';
}

.profileDetailsHeading {
    margin-bottom: 5px;
}

    ul.navbar-nav li.nav-user-name-item {
        padding-right: 10px;
        padding-top: 6px;
    }

ul.navbar-nav li.nav-user-icon-item {
    padding-right: 10px;
    padding-top: 8px;
}

ul.navbar-nav li.nav-user-settings-item {
    padding-top: 20px;
}

.bottom-buffer10 {
    margin-bottom: 10px;
}
.bottom-buffer20 {
    margin-bottom: 20px;
}

.bottom-buffer5 {
    margin-bottom: 5px;
}

.top-buffer5 {
    margin-top: 5px;
}
.top-buffer40 {
    margin-top: 40px;
}

.top-buffer20 {
    margin-top: 20px;
}
.top-buffer30 {
    margin-top: 30px;
}
.top-buffer10 {
    margin-top: 10px;
}

.white-box {
    background: white;
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: 3px 4px 5.52px 0.48px #000000;
    box-shadow: 3px 4px 5.52px 0.48px rgba(0, 0, 0, 0.1);
}

.profilesection3 .white-box{
width: 90%;
height: 99%;
}

.closeIcon .white-box {
    height: 40px;
    border-radius: 5px;
}

.fullHeight {
    height: 100%;
}

.profilesection3 .subheading {
    font-family: 'Open Sans';
    font-size: 13px;
    color: #474c49;
}

.profilesection3 .heading {
    font-family: 'Open Sans bold';
    font-size: 14px;
    color:#24A8E5;
    text-transform: uppercase;
    padding-bottom: 5px;
}

.padding12 {
    padding: 11px;
}

.blue-box, ssi.profileSection1 .blue-box{
    background: #24A8E5;
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: 3px 4px 5.52px 0.48px #000000;
    box-shadow: 3px 4px 5.52px 0.48px rgba(0, 0, 0, 0.1);
}

.profileSection1 {
    height: 100%;
    padding-bottom: 10px;
}
.profileSection1 .blue-box {
    width: 100%;
    padding-bottom:30px
}
    .profileSection1 .grey-box {
        background: #474c49;
        border-radius: 9px;
        padding-bottom: 30px;
    }
        .profileSection1 .grey-box .profileDetailsHeading {
            color: #24a8e5;
            font-size: 11px;

        }
.profileSection1 .grey-box .profileDetails{
    padding-bottom: 7px;

}
.studentProfile .capabilitiesDetails {
    padding-top: 20px;
}
.studentProfile .capabilityIconBox.withIcon {
    border: 0px;
    padding-bottom: 0px;
    max-width: 126px;
    min-width: 126px;
    
}
.studentProfile .capabilityIcons .capabilityTitle {
    text-align: center;
    line-height: 17px;
    max-width: 126px;
    min-width: 126px;

}
.studentProfile .capabilityIconBox img {
    width: 70%
}
.studentProfile .subheading {
    font-size: 11px;
}
.studentProfile .popover {
    background: #e2e4e5;
    border-radius: 0px !important;
    max-width: 300px;
   
}
.adminDashboard .popover {
    background: #474c49;
    border-radius: 0px;
    padding: 0px;
   
}
.studentProfile .popover .arrow:after{
    border-bottom-color: #e2e4e5;
    border-top-color: #e2e4e5;
}
.adminDashboard .popover .arrow:after {
    border-right-color: #474c49;
}
.adminDashboard .analyticsValue .value {
    text-align: center;
    font-size: 51px;
    color: #24a8e5;
    font-family: Open Sans Light;
}
.adminDashboard .circularProgressBar .progressBarHeader, .adminDashboard .analyticsValue .heading {
    font-family: "Open Sans";
    font-size: 13px;
    line-height: 15px;
    padding: 8px 20px;
    text-align: center;
}
.studentProfile .popover .arrow:before {
    border-top-color: #474c49;
}
.studentProfile .popover .popovercontent {
    font-size: 13px;
    color: black;
    padding: 0px;
    font-family: "Open Sans";
    width: 230px;
}
.adminDashboard .popover .popovercontent {
    font-size: 13px;
    color: #e2e4e5;
    padding: 10px 0px 10px 0px;
    font-family: "Open Sans";
    width: 180px;
    text-align: left;
}
.viewEvidence .fa-times-thin:before {
    content: '\00d7'
}
.fontSize10 {
    font-size: 10px;
}
.fontSize16 {
    font-size: 16px;
}
.hide {
        display: none !important;
    }

.profilesection3 .attachmentName {
    word-wrap: break-word;
    font-size: 12px;
    width: auto;
    text-align: left;
    padding: 3px 0px 13px; text-align: left;
}
/*.squareBlueTickCheckbox {
    position: relative;
    margin: 15px;
    display: inline-block;
}

    .squareBlueTickCheckbox label {
        width: 24px;
        height: 22px;
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        background: white;
        border: 1px solid #e2e4e5;
        border-radius: 4px;
    }

.squareBlueTickCheckbox label:after {
    content: '';
    width: 14px;
    height: 8px;
    position: absolute;
    top: 4px;
    left: 4px;
    border: 3px solid #24a8ef;
    border-top: none;
    border-right: none;
    background: transparent;
    opacity: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.squareBlueTickCheckbox label:hover::after {
    opacity: 0.3;
}

.squareBlueTickCheckbox input[type=checkbox]  {
    visibility: hidden;
}

.squareBlueTickCheckbox input[type=checkbox]:checked + label:after {
    opacity: 1;
}
 end .squaredThree 


.squareBlueWhiteTickRadio {
    position: relative;
    margin: 15px;
    display: inline-block;
}

    .squareBlueWhiteTickRadio label {
        width: 24px;
        height: 22px;
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        background: #24a8ef;
        border: 1px solid #24a8ef;
        border-radius: 4px;
    }

        .squareBlueWhiteTickRadio label:after {
            content: '';
            width: 14px;
            height: 8px;
            position: absolute;
            top: 4px;
            left: 4px;
            border: 3px solid white;
            border-top: none;
            border-right: none;
            background: transparent;
            opacity: 0;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .squareBlueWhiteTickRadio label:hover::after {
            opacity: 0.3;
        }

    .squareBlueWhiteTickRadio input[type=radio] {
        visibility: hidden;
    }

    .squareBlueWhiteTickRadio input[type=radio]:checked + label:after {
        opacity: 1;
    }

*/

input[type=checkbox],
input[type=radio ] {
    margin: 0;
    padding: 0;
    font-size: 1em;
    opacity: 0;
}

    input[type=checkbox] ~ label,
    input[type=radio ] ~ label {
        display: inline-block;
        /* margin-left: -2em; */
        line-height: 1.5em;
        vertical-align: top;
        margin-top: 1px;
    }


        input[type=checkbox] ~ label > span,
        input[type=radio ] ~ label > span {
            display: inline-block;
            width: 19px;
            height: 17px;
            margin-right: 7px;
            border: 0.0625em solid rgb(192,192,192);
            border-radius: 0.25em;
            background: white;
            vertical-align: bottom;
        }

    input[type=checkbox]:checked ~ label > span,
    input[type=radio ]:checked ~ label > span {
        background-color: white;
        background-image: url("../images/Student/tick icon cyan.png");
        background-repeat: no-repeat;
        background-position: 4px;
    }

       

    input[type=checkbox].blueBackWhiteTick ~ label > span,
    input[type=radio ].blueBackWhiteTick ~ label > span {
        border: 0;
        background-color: #24a8e5;
        opacity: 0.5
       }

    input[type=checkbox].blueBackWhiteTick:checked ~ label > span,
    input[type=radio ].blueBackWhiteTick:checked ~ label > span {
        background-color: #24a8e5;
        border: 0;
        background-image: url("../images/Student/tick icon white.png");
        background-repeat: no-repeat;
        background-position: 4px;
        
    }

input.blueBackWhiteTick[disabled] ~ label > span,
input.blueBackWhiteTick[disabled] ~ label > span {
    opacity: 0.3;
    cursor: not-allowed;
}
       

.navbar-light .navbar-toggler {
    border: 0;
}

nav.navigation-box .searchForm input {
    border: 0;
    background: transparent;
}

#navbarTogglerSearch {
    flex-grow: 0;
}



.paddingTopBottom10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.paddingLeftRight20{
    padding-left: 20px;
    padding-right: 20px;
}
.nopadding {
    padding: 0px;
}
.paddingBottom20 {
    padding-bottom: 20px;
}

.paddingBottom20 {
    padding-bottom: 15px;
}

.paddingTopBottom20 {
    padding: 20px 0;
}
.padding20 {
    padding: 20px;
}

.paddingTop10{
padding-top: 10px;
}

.padding30 {
    padding: 30px;
}
.paddingTop40{
padding-top: 40px;
}
.paddingTop30{
    padding-top: 30px;
}
.padding15 {
    padding: 15px;
}
.marginTopBottom20 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.marginLeftRight{
margin-left: 20px;
margin-right: 20px;
}

.marginLeft20 {
    margin-left: 20px;
}
.marginLeft10 {
    margin-left: 10px;
}


.userProfilePopOver {
    margin-top: -70px;
}

#userProfilePopover {
    flex: 0 0 280px;
    max-width: 280px;
    z-index: 1060;
    position: absolute;
    right: 10px;
}

#userProfilePopover .content {
    background-color: #E2E4E5;
    padding: 1.5rem;
    box-shadow: 3px 4px 5.52px 0.48px #000000;
    box-shadow: 3px 4px 5.52px 0.48px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    width: 263px;
}

#userProfilePopover .arrow {
    position: absolute;
    content: '';
    left: 6px;
    top: -30px;
    border-style: solid;
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid #E2E4E5;
    transition-duration: 0.3s;
    transition-property: transform;
    border-top: 0px;
}
#userProfilePopoverContent .form-group {
    margin-bottom: 5px;
}
.capabilityType, .viewevidence .capabilityType {
    margin-top: 10px;
    display: inline-block;
    font-size: 11px;
    background: #24a8e5;
    color: white;
    border: #24a8e5;
    border-radius: 18px;
    padding: 3px 10px;
}
.selectedIndicator, .viewevidence .selectedIndicator {
    margin-top: 10px;
    display: inline-block;
    font-size: 11px;
    border: 1px solid #e2e4e5;
    border-radius: 18px;
    background: #e2e4e5;
    padding: 3px 10px;
}
    .viewevidence .selectedIndicator{
    padding-left: 10px;
    }

    .selectedIndicator span.fa {
        padding-left: 8px;
    }


 .iamcapableDropdown button.dropdown-toggle {
    font-size: 14px;
}

 .iamcapableDropdown button.dropdown-toggle,  .iamcapableDropdown div.bootstrap-select {
    background: transparent;
    border: 0.5px solid #e2e4e5;
}

     .iamcapableDropdown button.dropdown-toggle:after,  .iamcapableDropdown .dropup .dropdown-toggle::after {
        border-top: 9px solid #24a8e5;

        margin-left: -4px;
        border-left: 8px solid transparent;
        border-bottom: 0px;
        border-right: 8px solid transparent;
    }

.iamcapableDropdown .bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:active, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
    color: black;
}


.iamcapableDropdown .bootstrap-select.btn-group .dropdown-menu li a {
    width: 100%;
    outline: none;
    display: inline-block;
    color: white;
    padding-left: 5px;
}

     .iamcapableDropdown .bootstrap-select.btn-group .dropdown-menu li a:focus {
         background-color: #24a8e5;
         background-color: rgba(36,168,229,0.5);
        border-radius: 15px;
     }

.iamcapableDropdown .bootstrap-select.btn-group .dropdown-menu li a:focus span.text {
            color: white;
        }

     .iamcapableDropdown .bootstrap-select.btn-group .dropdown-menu li a span.text {
        color: black;
        font-size: 13px;
    }

 .iamcapableDropdown .bootstrap-select.btn-group .dropdown-menu li {
    margin: 0px 10px;
}

    .iamcapableDropdown .bootstrap-select.btn-group .dropdown-menu li.selected {
        background-color: #24a8e5;
        background-color: rgba(36,168,229,0.5);
        border-radius: 15px;
    }

.iamcapableDropdown .bootstrap-select.btn-group .dropdown-menu li.selected a span.text {
            color: white;
        }

 .iamcapableDropdown .dropdown-menu ul::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

 .iamcapableDropdown .dropdown-menu ul::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

 .iamcapableDropdown .dropdown-menu ul::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px #000000;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #e2e4e5;
}
.navbarTogglerIcons {
    margin-left: 100px;
}

.logoutButton {
    font-size: 10px;
    padding: 0px;
    float: right;
    text-transform: UPPERCASE;
    COLOR: #24a8e5;
}
.navbarTogglerSearch {
    display: none !important;
}
 .popover {
     border: 1px solid transparent;
     box-shadow: 3px 4px 5.52px 0.48px rgba(0, 0, 0, 0.1);
     border-radius: 15px;
 }
.bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before {
    border-right-color: transparent;
}

/*Help Content form Tutor and Student*/

.capabilityEvidenceTable{
width: 70%;

}

.helpMainHeading, .resourceHeading {
    font-family: open sans;
    font-size: 16px;
    color: #000000;
    text-align: left;
    padding-top: 18px;
}

.resourceHeading {
    padding-top: 0px;
}
.resourceSubHeading {
    font-size: 15px;
    font-family: "Open Sans Semibold"
}
.resourceQuotesSection {
    background: #9dd4f2;
    padding: 11px 11px 5px 11px;
    border-radius: 7px;
    margin-bottom: 10px;
                   width:90%;
}
.resourcePersonName {
    font-size: 11px;
    text-transform: uppercase;
    font-family: "Open Sans Semibold";
    margin-top: -1rem;
    margin-bottom: 10px
    
}

.helpFreqHeading {
    font-family: 'Open Sans Light';
    font-size: 15px;
    color: #000000;
    text-align: left;
    padding-top: 18px;
}

.helpSubHeading, .capabilityEvidenceTable, .resourceText {
    font-family: Open Sans Light;
    font-size: 13px;
    color: #000000;
    text-align: left;
}


    

.alphaParanthesis > li {
    list-style: none;
    position: relative;
}

    .alphaParanthesis > li:before {
        counter-increment: list;
        content: counter(list, lower-alpha) ") ";
        position: absolute;
        left: -1.4em;
    }

ul.check-mark, .fontAwesomeCircle > ul {
    list-style: none;
}

.check-mark li:before {
    content: "\2713\0020";
    font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
}

.fontAwesomeCircle > ul > li:before {
    color: #24a8e5;
    position: relative;
    margin-left: -24px;
    content: "\f058";
    font-family: 'FontAwesome';
    font-size: 15px;    
    padding-right: 13px;
}

    .helpWidth, .helpLiWidth {
        width: 80%;
    }

.educatorPdf {
    width: 90px;
}

 .learnerImg {
    width: 60%;
}

.helpContentImg{
 width: 70%;
}

.helpIamcapableImg {
    width: 20%;
}

/*.capabilityDiagramNoImg {
    width: calc(100% - 5px);
    background: transparent url("../images/Student/Learner_Capability_Diagram_No_Image.png");
    position: relative;
}*/
.capabilityDiagramNoImg {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#map-image-mobile{
display: none;
}


.learnerHeading{
display: none;
}




    /* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {

    .dashboardpaddingBottom20Mobile{
    padding-bottom: 20px;
    }

    .dashboardpaddingTop20Mobile{
    padding-top: 20px;
    }

    .height100{
    height: 0px;
    }

   

    .helpContentImg, .learnerImg, .helpWidth, .helpLiWidth {
        width: 100%;
    }
    .profileSection1 .paddingLeft {
        padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .profileSection1 .capabilitiesDetails{
        margin-right: 10px;
        margin-left: 10px;
    }

    .closeIcon .white-box {
        height: 0%;
        border-radius: 5px;
        width: 12%;
    }

        .helpIamcapableImg{
        width: 60%;
        }

    .nopadding{
    padding: 10px;  
    }

    #map-image-mobile {
        display: block;
    }
    #learnerJourneyId {
        position: relative;
    }
   

    #futureReadId {
        position: relative;
    }

    #creCapId {
      
        position: relative;
    }

    #skilfulRefId {
        position: relative;
    }

    #breNwGrndId {
        position: relative;
    }

    #learngTogeId {
        position: relative;
    }

    #exctngEperId {
        position: relative;
    }


    ul.navbar-nav li.nav-user-settings-item{
    padding-top: 10px;
    }

    ul.navbar-nav li.nav-user-icon-item {
    padding-top: 0px;
    }
  

        .assessmentBiHelpIcon .popover {
        max-width: 80px;
        height: 150px;
    }

        #map-image {
            display: none;
        }

        #learnerAvatarImage {
            width: 80px;
            height: 80px;
            border: 10px solid #e2e4e5;
            opacity: 0.9
        }

        .capabilityDiagramNoImg .borderRadius {
            box-shadow: inset 1px -4px 3px 0.48px #000000;
            border-radius: 50%;
        }

        .viewLearnerMobile {
            display: block;
        }

        .viewLearnerText{
        display: none;
        }

        .viewLearnerWeb {
            display: none;
        }

        .learnerHeading {
            font-size: 15px;
            color: #000000;
            text-align: left;
            padding-top: 10px;
            font-family: Open Sans Light;
            display: block;
        }

        .capabilityDiagramNoImg {
        top: 55%;
        }

        .navbarTogglerIcons {
            margin-left: 50px;
        }

        .container-inner {
            margin: auto;
            width: 90%;
            height: 100%;
            top: 10px;
        }

        nav.navigation-box {
            padding: 10px;
        }

            nav.navigation-box .navbar-nav {
                flex-direction: row;
            }

            nav.navigation-box .navbar-brand {
                display: none;
            }

            nav.navigation-box .nav-user-name-item {
                display: none;
            }

        .searchToggler {
            position: absolute;
            top: 10px;
            right: 10px;
        }

        .userNavbar {
            position: absolute;
            top: 10px;
            right: 70px;
            
        }

        nav.navigation-box .searchForm {
            margin-left: 50px;
        }

            nav.navigation-box .searchForm input {
                width: 95%;
            }

        div.homeLogin {
            margin-top: 10px;
            float: left;
            margin-top: 10px;
            float: left;
            font-size: 15px;
          
        }

        div.modal-dialog {
            margin: 20px;
        }

        button.toggler[aria-expanded="true"] {
            opacity: 0.5
        }

        footer {
            height: 200px;
        }

            footer div:first-child {
                width: 100%;
            }

        .body-content-inner {
            margin: 0px 10px;
        }

        .marginLeft50 {
            margin-left: 0px
        }

        .col-sm-2dot4 {
            padding: 0px
        }
    }

    @media screen and (max-width: 1329px) {
        .container-inner {
            margin: auto;
            width: 95%;
            height: 100%;
            top: 10px;
        }
    }

    #loader {
        position: fixed;
        z-index: 1111;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background-color: Black;
        filter: alpha(opacity=60);
        opacity: 0.6;
        -moz-opacity: 0.8;
    }

        #loader .center {
            z-index: 1000;
            margin: 300px auto;
            padding: 10px;
            width: 130px;
            background-color: White;
            border-radius: 10px;
            filter: alpha(opacity=100);
            opacity: 1;
            -moz-opacity: 1;
            background: none;
        }

            #loader .center img {
                height: 128px;
                width: 128px;
            }

    /* Style the tab */
    .tab {
        float: left;
        /* border: 1px solid #ccc; */
        width: 100%;
        background: white;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
        border-radius: 10px;
        height: 100%;
    }

    .scrollbar {
      
    }

        .scrollbar::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        }

        .scrollbar::-webkit-scrollbar {
            width: 10px;
            background-color: #F5F5F5;
        }

        .scrollbar::-webkit-scrollbar-thumb {
            border-radius: 10px;
            /*-webkit-box-shadow: inset 0 0 6px #000000;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
            background-color: #a8a8a8;
        }

    /* Style the buttons that are used to open the tab content */
    .capabilityLink {
        display: block;
        background-color: inherit;
        color: black;
        padding: 2px 16px;
        /* width: 100%; */
        border: none;
        outline: none;
        text-align: left;
        cursor: pointer;
        transition: 0.3s;
        font-size: 13px;
        margin-top: 6px;
        margin-left: 4px;
        margin-right: 5px;
        line-height: 17px;
        font-family: 'Open Sans'
    }

        /* Change background color of buttons on hover */


        /* Create an active/current "tab button" class */

        .capabilityLink:hover {
            background-color: #24a8e5;
            background-color: rgba(36,168,229,0.5);
            color: black;
            border-radius: 15px;
        }

        .capabilityLink.active {
            background-color: #24a8e5;
            background-color: rgba(36,168,229,0.5);
            color: black;
            border-radius: 15px;
        }

    /* Style the tab content */
    



    .col-2dot4,
    .col-sm-2dot4,
    .col-md-2dot4,
    .col-lg-2dot4,
    .col-xl-2dot4 {
        position: relative;
        width: 100%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }

    .col-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .messaging .newMessageBox {
        padding: 8px 15px;
        font-size: 18px;
        color: #24A8E5;
        width: 55px;
        height: 45px;
    }

    .messaging .messagesHistory .parent {
        height: 100%;
    }

    .messaging .messagesHistory .messagesDiv {
        height: calc(100% - 44px);
    }

    @media (min-width: 540px) {
        .col-sm-2dot4 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
    }

    @media (min-width: 720px) {
        .col-md-2dot4 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
    }

    @media (min-width: 960px) {
        .col-lg-2dot4 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
    }

    @media (min-width: 1140px) {
        .col-xl-2dot4 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
    }

    .notificationCircle {
        border-radius: 50%;
        padding: 3px 6px;
        background: #075da7;
        color: white;
        text-align: center;
        font-size: 8px;
        font-weight: 600;
        cursor: pointer;
    }

    .notificationCircleRed {
        background: #ee452f;
    }

    .messagingNotificationIcon {
        position: absolute;
        top: 0px;
        left: 25px;
    }

    .evidenceNotificationIcon {
        position: relative;
        top: -7px;
        margin-left: -13px;
        font-size: 12px;
    }

.dashboardMessaging .messagingListItem {
    cursor: pointer
}

        .messagingListItem.read {
            opacity: 0.5
        }

        /*.messagingListItem:hover {
            background-color: rgba(36, 168, 229, 0.1);
        }*/

    .messageSmallDetails {
        font-size: 10px;
        color: #000000;
        font-family: 'Open Sans';
        line-height: 12px;
        padding-bottom: 12px;
    }

    .messageTitleLink {
        color: #24a8e5;
       
      
    }

#profileAvatarImageLetter:before {
    background-color: white;
    color: #24a8e5;
}

[data-letters]:before {
    content: attr(data-letters);
    display: inline-block;
    font-size: 16px;
    font-family: 'Open Sans Semibold';
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5em;
    text-align: center;
    border-radius: 50%;
    background-color: #24a8e5;
    background-color: rgba(36,168,229,0.5);
    vertical-align: middle;
   
    color: white;
}

    .messageRow {
        border-bottom: 1px solid #e2e4e5;
        padding-top: 10px;
    }

    .avatarCol {
        max-width: 50px
    }

    .mce-panel {
        background: #ffffff
    }

    @media(min-width: 768px) {
        html {
            min-height: 100%;
            height: 100%;
        }

        body {
            height: 100%;
        }

        .body-container {
            min-height: 100%;
          
        }      

        .body-content {
            height: 100%;
           
        }

        .container-inner {
            min-height: 90%;
          
           
        }

        .body-content-inner {
            padding: 0 44px 40px;
            height: calc(100% - 70px);
            min-height: 600px;
        }

        .scrollbar {
            height: 100%;
        }
    }
    .evidenceStatusMessage {
        font-size: 13px;
        padding: 5px 10px;
        border: none;
        color: black;
    }

.modal-dialog-centered {
    height: calc(100% - (1.75rem * 2))
}
.termsAndCondtionsModalDialog.modal-dialog-centered {
    height: calc(100% - (1.75rem * 3))
}
#termsAndCondtionsModal {
    height: calc(100%  - 200px)
}
    #termsAndCondtionsModal .content {
        overflow: auto;
        height: 80%;
        padding-right: 15px;
    }
    #termsAndCondtionsModal .content::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    }

#termsAndCondtionsModal .content::-webkit-scrollbar {
    width: 10px;
    background-color: #F5F5F5;
}

#termsAndCondtionsModal .content::-webkit-scrollbar-thumb {
    border-radius: 10px;
    /*-webkit-box-shadow: inset 0 0 6px #000000;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
    background-color: #a8a8a8;
}
.resourceSection, .capabilitySection {
    margin-bottom: 40px;
}

@media (min-width: 768px) {
    .modal-dialog.termsAndCondtionsModalDialog {
        max-width: 700px;
        margin: 1.75rem auto;
    }
}
@media(max-width: 1280px) {
    .resourceSection, .capabilitySection {
        margin-right: 40px;
    }
}
.userNavbar {
    flex-direction: row;
}

a:not([href]):not([tabindex]).deleteIcon {
    color: grey;
    font-size: 12px;
    padding-top: 7px;
}

.loginImageLayout{
    width:85%;
    height: 100%;
}
@media(min-width: 1024px) {
    .loginImageLayout {
        width: 85%;
    }
}
@media(max-width: 1023px) {
    .loginImageLayout {
        width: 450px;
    }
}
@media(min-width: 1368px) {
    .loginImageLayout {
        width: 65%;
    }
    }
@media(max-width: 767px) {
    .loginImageLayout {
        width: 300px
    }
    .homeLogo img {
        width: 50%
    }
    div.homeLogo {
        padding-top: 0px;
    }
}
.leftSection {
    float: right;
}
@media(max-width: 425px) {
   .leftSection {
       float: left;
       margin-left: 10%;
   }
}


.circularProgressBar .progress {
    width: 80px;
    height: 80px;
    background: none;
    position: relative;
}

    .circularProgressBar .progress::after {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 7px solid #eee;
        position: absolute;
        top: 0;
        left: 0;
    }

    .circularProgressBar .progress > span {
        width: 50%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        z-index: 1;
    }

    .circularProgressBar .progress .progress-left {
        left: 0;
    }

    .circularProgressBar .progress .progress-bar {
        width: 100%;
        height: 100%;
        background: none;
        border-width: 6px;
        border-style: solid;
        position: absolute;
        top: 0;
    }

    .circularProgressBar .progress .progress-left .progress-bar {
        left: 100%;
        border-top-right-radius: 80px;
        border-bottom-right-radius: 80px;
        border-left: 0;
        -webkit-transform-origin: center left;
        transform-origin: center left;
    }

    .circularProgressBar .progress .progress-right {
        right: 0;
    }

        .circularProgressBar .progress .progress-right .progress-bar {
            left: -100%;
            border-top-left-radius: 80px;
            border-bottom-left-radius: 80px;
            border-right: 0;
            -webkit-transform-origin: center right;
            transform-origin: center right;
        }

    .circularProgressBar .progress .progress-value {
        position: absolute;
        top: 0;
        left: 0;
    }

.circularProgressBar .progress-value {
    font-size: 14.5px;
    border: 12px solid white;
}

.circularProgressBar .yellow .progress-bar {
    border-color: #f3e961
}

.circularProgressBar .yellow .progress-value {
    background: #f3e961;
}

.circularProgressBar .orange .progress-value {
    background: #f3822f;
}

.circularProgressBar .orange .progress-bar {
    border-color: #f3822f
}

.circularProgressBar .green .progress-value {
    background: #5cb85c;
}

.circularProgressBar .green .progress-bar {
    border-color: #5cb85c
}

.circularProgressBar .blue .progress-value {
    background: #24a8e5;
}

.circularProgressBar .blue .progress-bar {
    border-color: #24a8e5
}

.circularProgressBar .red .progress-value {
    background: #dc3545;
}

.circularProgressBar .red .progress-bar {
    border-color: #dc3545;
}

.circularProgressBar .progressBarHeader {
    font-family: "Open Sans Light";
    font-size: 13px;
    line-height: 15px;
    padding: 20px 40px 10px;
    text-align: center;
}

#assessment .coreOptionalHeader {
    text-transform: uppercase;
    background: #24a8e5;
    color: white;
    font-size: 12px;
    font-family: 'Open Sans Bold';
    padding: 6px 0px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    max-width: 147px;
    text-align: center;
    cursor: pointer;
    box-shadow: inset -3px -5px 1px -2px rgba(0, 0, 0, 0.15);
}

    #assessment .coreOptionalHeader.selected {
        color: #24a8e5;
        background: white;
        box-shadow: none;
    }

#assessment .panelIcon {
    color: #24a8e5;
    margin: auto 0;
    font-size: 33px;
}

#assessment .panel-heading .capabilityIcon {
    width: 80px;
    display: inline;
}

#assessment .iconColumn {
    max-width: 10px;
    margin: auto 0;
    padding: 0px;
    align-items: center;
    display: flex;
}

#assessment .capabilityIconColumn {
    max-width: 70px;
    z-index: 85;
}

    #assessment .capabilityIconColumn.withoutIcon {
        padding: 0 0 0 15px;
        max-width: 24px;
    }

    #assessment .capabilityIconColumn .iconWithBackground {
        background: #474c49;
        height: 75%;
        margin: 10px 0px 10px 0px;
    }

#assessment .capabilityTitleHeader {
    max-width: 100%;
    flex: 100;
    font-size: 16px;
    font-family: "Open Sans Light";
    padding-left: 40px;
}

    #assessment .capabilityTitleHeader .capabilityTitle {
        max-width: calc(100% - 40px);
        display: inline-block;
        overflow-wrap: break-word;
        line-height: 19px;
        opacity: 0.8;
       
    }

#assessment div.coreOptionalContent {
    background: white;
    border-radius: 18px;
    padding: 48px 27px;
}

#assessment .capabilityHeader {
    padding-top: 15px;
    background: #474c49;
    margin-left: -4px;
    z-index: 1;
    min-height: 60px;
    margin: 10px 0;
    color: white;
}

#assessment .capabilityStatusHeader, #assessment .capabilityActionHeader {
    font-family: "Open Sans SemiBold";
    font-size: 11px;
    padding-top: 20px;
}

    #assessment .capabilityStatusHeader span, #assessment .capabilityActionHeader span {
        opacity: 0.8
    }

#assessment .panel-heading.closed .capabilityStatusHeader, #assessment .panel-heading.closed .capabilityActionHeader {
    display: none;
}

#assessment .capabilityHeader .capabilityHelpIcon {
    font-size: 10px;
    vertical-align: top;
}

    #assessment .capabilityHeader .capabilityHelpIcon .fa-question {
        color: white;
    }

#assessment .capability-form-row {
    padding-bottom: 30px;
}

#assessment .capabilityBiRow {
    padding-bottom: 15px;
}

#assessment .capabilityRow .panel-heading {
    cursor: pointer;
}

#assessment .capabilitySectionContent {
    padding-top: 10px
}

    #assessment .capabilitySectionContent .descriptionCol {
        max-width: calc(50% - 10px);
        margin: auto;
    }

    #assessment .capabilitySectionContent .statusCol {
        background: #e2e4e5;
        border-radius: 10px;
        align-items: center;
        display: flex;
        max-width: calc( 33% - 15px);
        margin-right: 15px;
    }

        #assessment .capabilitySectionContent .statusCol .statusColContent {
            vertical-align: middle;
            justify-content: center;
            padding: 13px 0px;
            font-family: "Open Sans";
            font-size: 13px;
        }

    #assessment .capabilitySectionContent .actionCol {
        background: #e2e4e5;
        border-radius: 10px;
        align-items: center;
        /* margin-left: 10px; */
    }
#assessment .capabilitySectionContent .capabilitySubtext {
    padding-left: 30px;
    font-size: 12px;
    padding-bottom: 17px;
    font-family: "Open Sans SemiBold";
}
    #assessment .capabilitySectionContent .capabilitySubtextLink {
        font-size: 12px;
        padding-left: 10px;
    }
    #assessment .capabilitySectionContent .actionCol .actionColContent {
        height: 100%;
        align-items: center;
        text-align: center;
        font-family: "Open Sans Light";
        line-height: 19px;
        /* margin-top: 29px; */
        /* text-align: center; */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

@media screen and (max-width: 576px) {
    .loginImage {
        text-align: center;
    }
    #assessment .coreOptionalHeader {
        max-width: 141px;
        margin: 14px 7px 0px;
    }
    #assessment div.coreOptionalContent {
        margin: 0px -10px;
        border-radius: 15px;
        padding: 1px;
    }
    #assessment .capabilityTitleHeader {
        padding:10px 20px;
    }
    #assessment .capabilityStatusHeader, #assessment .capabilityActionHeader {
        display: none;
    }
    #assessment .capabilitySectionContent .descriptionCol {
        max-width: 100%;
    }
    #assessment .indicator-description {
        padding: 10px;
    }
    #assessment .capabilitySectionContent .statusCol {
        max-width: 100%;
        margin-bottom: 10px;
        margin-right: 0px;
    }
    #assessment .capabilitySectionContent .actionCol {
        padding: 12px;
    }
    #assessment .assessmentCapabilityDropdownContainer {
        margin: 10px 0px;
    }
    
    #assessment .capability-form-row {
        padding-top: 30px;
        margin: 0px 11px;
    }
    #assessment .capabilityIconColumn {
        max-width: 50px;
    }
    #assessment .panel-heading .capabilityIcon {
        max-width: 50px;
    }
}
.profileDocumentLink {
    font-size: 13px;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    display: block;
}
#LearnerJourneyImageContainer {
    position: relative;
}

.map_title {
    position: absolute;
    font-family: Open Sans Semibold;
}
.map_content {
    position: absolute;
    font-family: Open Sans;
    line-height: 15px;
    position: absolute;
    width: 250px;
}
@media screen and (max-width: 768px) {
    .map_title {
        display: none;
    }

  .map_content {
        display: none;
    }
}
.studentAvatar {
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.profilesection3 .white-box.profileBoxHeight174 {
    height: 174px
}

.messaging .messageTitle {
    line-height: 18px;
    padding-bottom: 2px;
    font-size: 15px;
    font-family: "Open Sans";
                 word-break: break-word;
}
.messaging .messageTitle.bold {
    font-family: "Open Sans Semibold"
}
.messaging .subHeader {
    font-size: 13px;
    font-family: "Open Sans";
    line-height: 18px;
    padding-bottom: 4px;
}
.messaging .unreadMessage .messageTitle {
    font-family: "Open Sans SemiBold";
  
}
.messaging .unreadMessage .subHeader {
    font-family: "Open Sans SemiBold";
}
.messaging .unreadMessage {
   
    font-family: "Open Sans SemiBold";
}
    .messaging .unreadMessage .messageTitle {
        color: #24a8e5;
        font-family: "Open Sans SemiBold";
    }

    .messaging .content {
        font-size: 13px;
        color: #000000;
        text-align: left;
        line-height: 20px;
        padding-bottom: 10px;
    }