/*
        GJCP css
*/
.bg-color{
    background-color: #F6F7F9;
}

.txt-color{
   color: #342959;
}.

.txt-darker-color{
   color: #31265F;
}

.txt-secondary-color{
   color: #5B6372;
}

.txt-completed-color{
   color: #1B5E19 !important;
}

.txt-dark-color{
   color: #32C0BB;
}

.txt-grey-color{
   color: #5C6373;
}

.txt-topic-completion-color{
   color: #F9B752;
}

.txt-tool-template-completion-color{
   color: #2EBFBA;
}

.txt-tool-template-total-color{
   color: #342959;
}

.txt-dark-color{
   color: #32C0BB;
}
.horizontal-center {
  text-align: center;
}

.text-align-right{
    text-align: right;
}

.text-align-left{
    text-align: left;
}

.text-align-center {
  text-align: center;
}


.txt-bold{
   font-weight: bold;
}

.module-selected-tab{
   background-color: #32C0BB;
   color: #FFFFFF;
   border-radius: 8px ;
}

.module-unselected-tab{
   background-color: #FFFFFF;
   color: #32C0BB;
   border-radius: 8px ;
}


.module-card-principle{
   background-color: #D5D2DD;
   display: inline-block;
   border-radius: 5px;
   padding-left: 10px;
   padding-right: 10px;
   font-size:12px;
}

.resource-tool{
   background-color: #F6F7F9;
   display: inline-block;
   border-radius: 5px;
   font-size: 1 rem;
}

.open-resource-tool{
   font-weight: bold;
   background-color: #FFFFFF;
   display: inline-block;
   border-radius: 5px ;
   border: 2px solid #3DCEBE;
   font-size: 14px;
}

.commit-to-principle{
   font-weight: bold;
   background-color: #3DCEBE;
   color: #FFFFFF;
   display: inline-block;
   float:right;
   border-radius: 5px ;
   border: 2px solid #3DCEBE;
}

.confirm-commit-to-principle{
   font-weight: bold;
   background-color: #3DCEBE;
   color: #FFFFFF;
   display: inline-block;
   border-radius: 5px ;
   border: 2px solid #3DCEBE;
}

.site-dropdown{
   font-weight: bold;
   background-color: #F6F7F9;
   color: #2E384D;
   font-size: 15px;
   display: inline-block;
   border-radius: 5px ;
   content: "\f078";
   text-align: center; 
}

.tiny-text {
    font-size: 10px;
}

.module-card-button{
   color: #BFC5D2;
}

.footer-text{
   color: #FFFFFF;
}

.custom{
   color: #000000;
}

.misses-color{
   color: #000000;
}

.partially-meets-color{
   color: #F0AA1F;
}

.meets-color{
   color: #9FD97A;
}

.exceeds-color{
   color: #155E12;
}

/*.card-body:hover{
   border: 1px solid #32C0BB;
}*/

.card-body{
   #border: 0px solid ;
}

.card-border:hover{
   border: 1px solid #32C0BB;
}

.card-border{
   border: 1px solid #FFFFFF;
}

.card-border-always{
    border: 1px solid #32C0BB;
}


.topic-border{
   border: 1px solid #FFFFFF;
   border-radius: 5px ;
}

.border-radius5{
   border: 1px solid #FFFFFF;
   border-radius: 5px ;
}

.fs40-text {
    font-size: 40px;
}

.fs30-text {
    font-size: 30px;
}

.fs25-text {
    font-size: 25px;
}
.fs28-text{
    font-size: 28px;
}
.fs20-text {
    font-size: 20px;
}

.fs16-text {
    font-size: 16px;
}

.fs14-text {
    font-size: 14px;
}

.fs12-text {
    font-size: 12px;
}

.inputtext {
    border-radius: 5px;
    background-color: #FFFFFF;
    border-color: #F6F7F9;
    border-width: 0px;
}

.border-inputtext {
    border-radius: 5px;
    background-color: #FFFFFF;
    border-color: #A6A7A9 !important;
    border-width: 1px !important;
}

.grey-inputtext {
    border-radius: 5px !important;
    background-color: #F6F7F9 !important;
    border:0px !important;
    line-height: 2em;
}

.image-under {
  z-index: 1;
}

.image-over {
  z-index: 2;
}

.sidebar-accent {
    color: #30C1BC;
    border-right:3px solid #30C1BC ;
    background-color: rgb(48, 193, 188, 0.05);
    
}

.learning-progress-bar-background{
   background-color: #E0E0E7;
   height: 5px
}

.learning-progress-bar{
   background-color: #342959;
   height: 5px
}

/* Bootstrap customisations */

.custom-checkbox .custom-control-input:checked~.custom-control-label::before{
  background-color:#30C1BC;
}

.white-button, .white-button:hover, .white-button:active, .white-button:visited {
    background-color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: #30C1BC !important;
}
.text-primary {
    color: #30C1BC !important;
}


/*
     OLD css
*/

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.page-top-box {
    width: 100%;
    z-index: -1;
    height: 480px;
    position: absolute;
    top: 0;
}

.shadow {
    box-shadow: 0 0 20px 0 rgba(49,36,88,0.10);
}

.full-height {
    height: 100%;
}

.results {
    line-height: 20px;
    letter-spacing: 1px;

}

.results-info-title {
    font-size: 14px;
    color: #9891AB;
    letter-spacing: 1px;
    line-height: 20px;
}

.results-info-content {
    color: #312458;
    letter-spacing: 1px;
    font-family: Helvetica;
    font-size: 16px;
}

.results-dark-text {
    color: #312458;
}

.results-light-text {
    color: #9891AB;
}

.dark-text {
    color: #312458;
}

.black-text {
    color: #000000;
}

.light-text {
    color: #9891AB;
}

.small-text {
    font-size: 14px;
}

.big-text {
    font-size: 16px;
}
.large-text {
    font-size: 16px;
}

.results-table {
    letter-spacing: 1px;
    font-size: 14px;
}

.header-no-border {
  border: none; !important;
}

.purple-4 {
    background-color: #312458;
}
.purple-3 {
    background-color: #5A5079;
}
.purple-2 {
    background-color: #D6D3DE;
}
.purple-1 {
    background-color: #EAE9EE;
}
.gold {
    background-color: #EFAB22;
}
.sand {
    background-color: #F7F1E4;
}
.tangerine {
    background-color: #F99D58;
}
.turquoise {
    background-color: #16C1BC;
}


.sand-links a, .sand-links a:hover {
    color: #F7F1E4;
    text-decoration: none;
}

.sand-links a:hover {

}


.purple-4-text {
    color: #312458;
}
.purple-3-text {
    color: #5A5079;
}
.purple-2-text {
    color: #D6D3DE;
}
.purple-1-text {
    color: #EAE9EE;
}
.gold-text {
    color: #EFAB22;
}
.sand-text {
    color: #F7F1E4;
}
.tangerine-text {
    color: #F99D58;
}
.turquoise-text {
    color: #16C1BC;
}


.number-circle {
  border-radius: 50%;
  /*behavior: url(PIE.htc); remove if you don't care about IE8 */
  width: 40px;
  height: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 20px;
  font-weight: bold;
}

.low {
  color: #FAA906;
  background-color: rgba(239,171,34,0.26);
}
.medium {
  color: #F66D06;
  background-color: rgba(249,157,88,0.26);
}
.high {
  color: #EC2C2C;
  background-color: rgba(255,172,172,0.26);
}

.cursor-pointer{
  cursor: pointer;
}

.custom-number-circle {
   border-radius: 1.5em;
  -moz-border-radius: 1.5em;
  -webkit-border-radius: 1.5em;
  display: inline-block;
  font-weight: bold;
  line-height: 3.0em;
  margin-right: 15px;
  text-align: center;
  width: 3.0em;
}

/* Videos Page */

.videos-text: {
    font-size: 14px;
}



html {
  overflow-y: scroll;
}


/*.form-group input:focus {
  border-color: #EFAB22;
  box-shadow: inset 0 1px 1px rgba(239, 171, 34, 1), 0 0 8px rgba(239, 171, 34, 1);
}*/

.orange-text {
    color: #ff9011;
}


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

.flex-wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between
}

.footer{
    width:100%;
    bottom: 0;
    margin-top: 40px;
}

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

.red-text {
    color: #ff0000;
}

.turquoise-button {
    min-width: 120px;
    text-align:center;
    background-color: inherit;
    padding: 8px 12px;
    color: #16C1BC;
    border: 2px solid #16C1BC;
    cursor: pointer;
    text-transform: uppercase;
}

.turquoise-button:hover {
    background-color:#16C1BC;
    color:white;
}


a a:hover{
  text-decoration: none; /* no underline */
}

.profile-menu-item {
    text-align:center;
    padding:20px;
}

.profile-menu-item {
    text-align:center;
    padding:20px;
    border-bottom: 1px solid #5A5079;
}

.right-accent {
    border-right: 5px solid #16C1BC;
}

.dot {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  display: inline-block;
}

.misses {
    background-color: #ED2828;
}
.partially-meets {
    background-color: #F99E57;
}
.meets {
    background-color: #2F2058;
}
.exceeds {
    background-color: #24C5BE;
}
.to-do {
    background-color: #EEF3F5;
}

.misses-text {
    color: #ED2828;
}

.partially-meets-text {
    color: #FABA53;
}

.meets-text {
    color: #9FD97A;
}

.to-do-text {
    color: #155E12
}

.to-do-text {
    color: #8798AD
}

.misses-opaque-bg {
    background-color: #FDECEE;
}

.partially-meets-opaque-bg {
    background-color: #FFF8EE;
}

.meets-opaque-bg {
    background-color: #F6FCF2;
}

.to-do-opaque-bg {
    background-color: #ECF2EC
}

.to-do-opaque-bg {
    background-color: #EEF3F5
}

.performance-progress-bar-background{
   background-color: #E0E0E7;
   height: 15px
}

.misses-progress-bar{
   background-color: #E54154;
   height: 15px
}

.partially-meets-progress-bar{
   background-color: #FABA53;
   height: 15px
}

.meets-progress-bar{
   background-color: #9FD97A;
   height: 15px
}

.exceeds-progress-bar{
   background-color: #155E12;
   height: 15px
}

.to-do-progress-bar{
   background-color: #BFC5D2;
   height: 15px
}
.white-text {
    color:white;
}

.breakdown-number-circle {
  border-radius: 50%;
  /*behavior: url(PIE.htc); remove if you don't care about IE8 */
  width: 30px;
  height: 30px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 15px;
  font-weight: bold;
}
/*
    new css for GJCP
*/

.form-group > label{
    opacity: 0.8;
    color: #69707F;

}

.form-group > input[type="text"], input[type="password"], input[type="email"]{
    opacity: 0.8;
    color: #69707F;

}

.rectangle {
    border-radius: 8px;
    background-color: #FFFFFF;
}

.rounded {
    border-radius: 8px;
}

.rounded-chat {
    border-radius: 8px;
}

.cyan {
    background-color: #30C1BC;
}

.sign-up {
    color: #312458;
    font-size: 28px;
    letter-spacing: 0;
    line-height: 32px;
    text-align: center;
}
.purple-5-text{
    color: #312458;
    letter-spacing: 0;
    line-height: 32px;
    text-align: center;
}
.left {
	float:left;
}

.right {
	float:right;
}
.signup-button{
    border-radius: 4px;
    background-color: #BFC5D2;
    color: #FFFFFF;
font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.1px;
    line-height: 21px;
    text-align: center;
    border:0;
}

.strong-cyan-text {
    color: #30C1BC;
    /* font-size: 15px; */
    letter-spacing: 0;
    line-height: 22px;
    text-align: center;
}
.welcome-company {
    color: #312458;
    font-size: 48px;
    letter-spacing: -0.6px;
    line-height: 58px;
}

.add-profile{
    color: #30C1BC;
font-size: 18px;
    letter-spacing: 0;
    line-height: 22px;
}
.next-button{
    background-color:#69706f ;
    color:white;
font-style: bold;
    font-size:13px;

}
.add-button{
box-sizing: border-box;
    border: 1px solid #30C1BC;
    border-radius: 4px;
    color:#30C1BC;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 12px;
    text-align: center; 
}

#imageUpload{
    display:none;
}

.profile-container {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
    background-color:#FFFFFF ;
}
  
/*#profile-container img {
    width: px;
    height: 100px;
    object-fit:contain;

  }*/
select {
    background-color: white;
    border-radius:5px;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png)
    no-repeat right;
    -webkit-appearance: none;
    background-position-x: 96%;
}

.help-text{
    color:#F0AA1F
}

.registered-text{
    color: #2E384D;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 22px;
    text-align: center;
}
.completion-button{
    background-color:#30C1BC;
    color: #FFFFFF;
font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.1px;
    line-height: 21px;
    text-align: center;
}

.big-container{
    width: 1300px;
    align: center;
    
}

.line {
    box-sizing: border-box;
    height: 1px;
    border: 4px solid #FFFFFF;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    z-index: -1;
    align-content: center;
}
.oval {
    height: 35px;
    width: 35px;
    border-radius:50%;
   
}

.strong-cyan-text{
    color:#30C1BC;
}
.vivid-orange-text{
    color:#F0AA1F;
}
.gray1-text{
  color: #8798AD;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 18px;
  text-align: center;
}
.gray2-text{
    color: #69707F;
    line-height: 15px;
    font-size: 13px;
    text-align: center;
  }
.gray3-text{
  color: #9EADC0;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 18px;
}
.red-text{
    
    color:#E54154;
}


.community{
    width:100% !important;
    height:100% !important;
    object-fit: contain;


}
.disclaimer-text{
   
    font-size: 15px;
    letter-spacing: 0;
    line-height: 22px;
}
.terms-link-text{
    color: #FFFFFF;
    font-size: 13px;
    
}
.discover-more{
    background-color:#30C1BC;
    border-radius:4px;
    color:#FFFFFF;
    font-weight: bold;
    font-size: 13px;
}
.discover-modal{
    border-radius: 12px;
    background-color: #FFFFFF;
    box-shadow: 0 0 40px 0 rgba(46,56,77,0.6);
}
.discover-text1{
    color: #455471;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 22px;
  text-align: center;

}
.disclaimer-text2{
    color: #93A3B7;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 22px;
}
.faq-heading{
  color: #362A65;
  font-family: WAHDPS+AldaOT-Regular;
  letter-spacing: -0.6px;
  line-height: 58px;
  text-align: center;
}
.faq-text{
    color: #312458;
  font-family: WAHDPS+AldaOT-Regular;
  font-size: 22px;
  letter-spacing: 0;
  line-height: 32px;
}
.faq-answers{
    color: #2E384D;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 26px;
}
.purple-6-text{
    color: #362A65;
}

.fs18-text{
    font-size: 18px;
}
.fs48-text{
    font-size: 48px;
}
.fs34-text{
    font-size: 34px;
}
.spindle-text{
    color: #B0BAC9;
}

.alda {
  font-family: WAHDPS+AldaOT-Regular;
}

input {
  caret-color: red;
}
.caret{border-top:4px solid red;}
select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 36 36'%3E%3Cpath fill='rgb(48,193,188)' d='M 9.136719 12.34375 C 9.21875 12.261719 9.285156 12.171875 9.34375 12.082031 L 15.546875 5.878906 C 16.152344 5.273438 16.152344 4.292969 15.546875 3.6875 C 14.941406 3.082031 13.960938 3.082031 13.355469 3.6875 L 8.015625 9.027344 L 2.644531 3.660156 C 2.039062 3.054688 1.058594 3.054688 0.453125 3.660156 C 0.152344 3.964844 0 4.359375 0 4.753906 C 0 5.152344 0.152344 5.550781 0.453125 5.851562 L 6.683594 12.082031 C 6.742188 12.171875 6.808594 12.261719 6.890625 12.34375 C 7.199219 12.652344 7.609375 12.800781 8.015625 12.792969 C 8.417969 12.800781 8.828125 12.652344 9.136719 12.34375 Z M 9.136719 12.34375'/%3E%3C/svg%3E")
}

.selectmultiple {
    background-image: none !important;
}

.smaller-container1 {
    max-width: 1200px !important;
}

.image-circle {
    border-radius:50%;
}

.company-info-heading {
    font-weight:bold;
    font-size: 18px;
}

/*for radio buttons*/
input[type='radio'] {
	-webkit-font-smoothing: antialiased;
	display: block;
    float: left;
    width:15px;
    height:15px;
    border-radius:3px;
    position: relative;
    cursor: pointer;
}
input[type='radio']:before{
    content: "";
    width:15px;
    height:15px;
    border-radius:50%;
    left:0;
    position: absolute;
    background-color:#FFFFFF;
    border:1px solid  #30C1BC;
    vertical-align: middle;
}
input[type='radio']:checked:after {
    content: "";
    background-color:  #30C1BC;
    left:0;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    position: absolute;

}


.dark-green-background {
    background-color: #40773E;
}

.dark-green-text {
    color: #40773E;
}

.disable-overlay {
    opacity: 0.5;
    pointer-events:none;
}