:host .dashboard {
  max-width: none;
}

:host mat-toolbar {
  background: #00CCFF;
  color: #fff;
  margin-bottom: 30px;
}

:host mat-card {
  padding: 30px;
  margin-bottom: 30px;
  text-align: left;
}

:host a.mat-fab {
  position: absolute;
  right: 30px;
  bottom: 30px;
  background-color: #00CCFF;
}

:host .content-wrapper {
  height: 543px;
  overflow: auto;
}

:host .enviroments mat-icon {
  color: #60B913;
}

:host .help-card img {
  width: 82px;
}

:host mat-toolbar .usr-info-avatar p{
  color: #ffffff;
  font-weight: 400;
}

.btn-candidate-primary {
  background: #043660;
  color: #fff;
  padding: 0 55px;
  font-size: 18px;
  text-align: center;
  height: 60px;
  border-radius: 37.5px;
  border: none;
}

.no-padding {
  padding: 0;
}

.bg {
  position: relative;
}
.chatbotBlock {
  background-color: #01345f;
  position: absolute;
  right: 0;
  bottom:0;
  width: 55px;
  height: 55px;
  border-radius: 100%;
  z-index: 999;
}
.chatbotBlock figure {
  text-align: center;
  display: block;
}
.chatbotBlock figure img {
  margin-top: 6px;
}
header {
  background: #00cdff;
  clear: both;
  overflow: hidden;
  padding: 20px 0;
}

.togelBlock {
  padding-top: 10px;
}

.heading h1 {
  text-align: center;
  color: #fff;
  font-size: 35px;
}

section {
  clear: both;
  overflow: hidden;
  width: 100%;
}
.journeyBlock h2 {
  color: #19333e;
  font-family: robotobold;
  font-size: 20px;
  margin-top: 15px;
  text-align: left;
}

/* screen 3 */

.questionBlock {
  width: 100%;
  height: 500px;
  background: #fff;
  padding: 15px;
  overflow-x: hidden;
  margin-top: 20px;
  box-shadow: 0 0 9px #ccc inset;
  -moz-box-shadow: 0 0 9px #ccc inset;
  -webkit-box-shadow: 0 0 9px #ccc inset;
}
.questionBlock h2 {
  margin-bottom: 10px;
  color: #153151;
  font-family: robotolight;
  font-size: 20px;
}
.questionBlock p {
  margin-bottom: 10px;
  color: #153151;
  font-family: robotoregular;
  text-align: left;
  font-size: 14px;
  line-height: 24px;
}
.answer {
  margin:15px 0;
}
.answer strong {
  float: left;
  margin-right: 20px;
}

.answer p {
  float: left;
  width: 96%;
}

.countdownBlock {
  background: url(https://pgassets.altimetrik.com/assets/img/dashboard/Leaderboard_Header.png) 0 0 no-repeat;
  width: 100%;
  height: 100px;
  background-color: #fff;
  background-size: 100%;
  border-radius: 10px;
  margin-top: 20px;
  display: inline-block;
  box-shadow: 0 0 10px #ccc;
}
.countdownBlock h5 {
  text-align: center;
  color: #fff;
  font-size: 16px;
  margin: 9px 0 0 16px;
}
.countdownBlock strong {
  text-align: center;
  display: block;
  font-size: 45px;
  line-height: 75px;
  color: #003360;
}
.powerupsBlock {
  height: 100%;
}
.powerupsBlock .treasureTotal  {
  width: 100%;
  margin: 20px 0 0 0;
}
.powerupsBlock .treasureTotal span  {
  margin: 0 auto;
  display: block;
  width: 50px;
  height: 50px;
  font-size: 30px;
  padding-top: 15px;
}
.powerupsBlock .treasureTotal h5  {
  color: #000;
  text-align: center;
  display: block;
  margin: 10px 0;
}
.quitTest {
  width: 100%;
  font-size: 22px;
  background-color: #F97D7D;
  border-color: #F97D7D;
  margin-top: 15px;
}
.quitTest:focus{
  border:1px solid transparent;
  outline-color: transparent;
}
.questionBlock figure.stars {
  text-align: center;
}
.questionBlock h3 {
  text-align: center;
  margin-top: 20px;
  line-height: 40px;
  font-size: 30px;
  color: #3d4e5f;
}
.questionBlock p.goodluck {
  font-size: 15px;
  text-align: center;
  margin-top: 70px;
}

.powerupsBlock p.intsructionContent {
  padding: 15px;
  color: #19333e;
  text-align: left;
  /* font-weight: bold; */
  font-family: robotoregular;
  font-size: 14px;
}
.preEnviroment {
  margin-top: 15px;
}
.preEnviroment h5 {
  color: #003360;
  font-size: 20px;
  text-align: center;
  font-weight: bold;
}
.buttonsBlock {
  margin-top: 20px;
}
.buttonsBlock button {
  float: left;
  background: #fff;
  color: #153151;
  font-size: 0.74em;
  font-family: robotoregular;
  border-radius: 11px;
  margin: 10px;
}
/*.journeyBlock button {*/
  /*width: 190px;*/
  /*margin: 0 auto;*/
  /*display: block;*/
  /*margin-top: 15px;*/
  /*background: #003360;*/
  /*color: #fff;*/
  /*font-weight: bold;*/
/*}*/

.btnmd {
  color: #fff;
  background-color: #043660;
  border-color: #2e6da4;
}

/*technical use case CSS REUSED */
.bg {
  position: relative;
}

p {
  font-family: 'Roboto', sans-serif;
}

.file-content[_ngcontent-c1] {
  height: 29px;
  opacity: 0.7;
  font-family: 'Roboto', sans-serif;
  font-size: 22px;
  line-height: 29px;
  padding: 20px;
  width: none!important;
  text-align: left;
  opacity: 0.7;
  color: #000000;
  font-family: Roboto;
  padding-bottom: 30px;
}


.file-content-info {
  color: #003561;
  font-size: 18px;
  padding-left: 20px;
  width: 80%;
}

.file-content[_ngcontent-c1] {
  padding: none;
}

.stepbystep {
  padding-left: 30px;
  line-height: 24px;
  color: #333333;
  font-size: 18px;
}

.Section{
  padding: 10px 30px 10px 10px;
}

.Section[_ngcontent-c1] {
  overflow: none!important;
  padding-left: 20px;
  /*padding-right: 20px;*/
  padding-top: 20px;
}

header {
  background: #00cdff;
  clear: both;
  overflow: hidden;
  padding: 20px 0;
  box-shadow: 0 0 4px 0 rgba(0,0,0,0.08), 0 4px 4px 0 rgba(0,0,0,0.16)!important;
}

.togelBlock {
  padding-top: 10px;
}

.headerBlock {
  background-color: #00CCFF;
  color: white;
}

.headerBlock[_ngcontent-c1] {
  background-color: #003561;
  color: #fff;
  width: 100%!important;
  margin: auto;
  display: block;
  margin: auto;
  padding: 8px 10px;
}

.heading h1 {
  text-align: center;
  color: #fff;
  font-size: 32px;
  margin-top:0px;
  font-family:robotoregular;
}

.title {
  color: #003561;
  font-family: Roboto;
  font-size: 35px!important;
  font-weight: bold;
  line-height: 46px;
  text-align: left;
}

.title[_ngcontent-c1] {
  text-align: left;
}
section {
  clear: both;
  overflow: hidden;
  width: 100%;
}

.usecases {
  display: flex;
}

.usecase {
  display: inline-block;
  border-radius: 3px;
  border: 1px solid #cccccc;
  padding: 20px;
  margin: auto 10px;
}


.instructionBlock {
  display: block;
  border-radius: 0px;
  height: 390px;
  background-color: white!important;
  margin-bottom: 20px;
}

.instructioncontainer {
  /*margin-left: 20px;*/
}

.headerBlock {
  background-color: #003561;
  color: white;
  width: 100%!important;
  height:40px;
}

.instructions {
  text-align: left;
  line-height: 30px!important;
  padding-top: 25px;
  padding-left: 20px;
  padding-right: 10px;
  padding-bottom: 30px;
}

.skills {
  border: 1px solid #979797;
  background-color: #fff;
  border-radius: 10px;
  width: 80px;
  float: left;
  margin-right: 10px;
  height: 24px;
  font-size: 16px;
  text-align: center;
  padding-bottom: -8px;
}

.launchbutton {
  background-color: #7ADE81;
  color: #FFFFFF;
  border-radius: 10px;
  box-shadow: -1px 1px 4px 0 #AAAAAA, 1px 3px 4px 0 #AAAAAA;
  font-size: 18px;
  /*width: 230px;*/
  display: block;
  margin-left: 60px;
}
.launchbutton:focus{
  outline-color: snow;
}
.submitbutton {
  height: 30px;
  width: 110px;
  border: 1px solid #003561;
  border-radius: 10px;
  color: white;
  background-color: #003561;
  box-shadow: 1px 2px 4px 0 #AAAAAA, -1px -1px 4px 0 #AAAAAA, 0 2px 4px 0 #AAAAAA;
  text-align: center;
  font-size: 18px;
  font-weight: 300;
}

.submitbutton:focus {
  outline-color: inherit;
}

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

.registrationinfo {
  padding-top: 40px;
  display: inline-block;
  text-align: left;
  font-size: 18px!important;
  color: #666!important;
  width: 24%;
}

.label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 600;
}

.submitbutton a {
  color: white;
}

button > a {
  color: white;
}
button > a {
  color: white;
}

.buttonsBlock {
  width: 100%;
  align-items: flex-start;
  display: inline-block;
}


.prefigure {
  text-align: left!important;
  color: #003561;
  font-family: Roboto;
  font-size: 18px;
  line-height: 24px;
  font-weight: normal!important;
  padding-top: 30px;
  float: left;
}


.pleasenote {
  font-size:23px;
  font-weight:300;
}

.info1 {
  font-size: 16px;
  line-height: 30px;
}

.list2 {
  list-style-type: lower-alpha;
  color: #333333;
  font-size: 18px;
  line-height: 24px;
  text-align: left;
}


.list3 {
  text-align: left!important;
  padding-left: 15px;
  color: #333333;
  font-family: Roboto;
  font-size: 18px;
  line-height: 24px;
  padding: 10px 0px;
}

.list3:nth-child(0) {
  padding-bottom: 30px;
}



.box {
  /*width:659px;*/
  background-color: white;
  height: 580px!important;
  padding-top: 30px!important;
  overflow-y: scroll;
}

.box p {
  text-align: left;
}

.line {
  box-sizing: border-box;
  height: 1px;
  width: 100%;
  border: 0.5px solid #ccc;

}

.preEnviroment {
  padding-bottom: 45px;
  margin-top: none!important;
  margin-left: 60px!important;
}

.ol {
  padding-left: 20px;
  padding-right: 5px;
}

li span {
  font-weight: normal;
}

/* footer */

/*.bottomcontent {*/
/*padding-top: 50px;*/
/*}*/
.footernote {
  padding-left: 50px;
}
.footertitle {
  height: 21px;
  width: 163px;
  color: #FE6A71;
  font-family: Roboto;
  font-size: 16px;
  line-height: 21px;
  text-align: left;
}

.footertext {
  height: 95px;
  width: 821px;
  color: #AAAAAA;
  font-family: Roboto;
  font-size: 14px;
  line-height: 19px;
  text-align: left;
}

/*css*/
.questionBlock {
  width: 100%;
  height: 500px;
  background: #fff;
  padding: 15px;
  overflow-x: hidden;
  margin-top: 20px;
  box-shadow: 0 0 9px #ccc inset;
  -moz-box-shadow: 0 0 9px #ccc inset;
  -webkit-box-shadow: 0 0 9px #ccc inset;
}
.questionBlock h2 {
  margin-bottom: 10px;
  font-size: 15px !important;
  font-family: robotoregular !important;
}
.questionBlock p {
  margin-bottom: 10px;
  font-size: 16px;
  text-align: left;
  color: #666;
  line-height: 24px;
}
.answer {
  margin:15px 0;
}
.answer span {
  float: left;
  font-family:robotoregular;
  color: #3F4F5F;
  font-size:0.8em;
  margin-right: 20px;
}

.answer p {
  float: left;
  padding-left: 5px;
  width: 92%;
}

.journeyBlock h2 {
  color: #003360;
  font-family:robotobold;
  text-align: left;
  font-size: 20px;
  margin-top: 15px;
}
.questionBlock .answer p.active,
.questionBlock .answer p:active
{
  box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.1);
  color: #54d8f9;
}

.countdownBlock {
  background: url(https://pgassets.altimetrik.com/assets/img/dashboard/Leaderboard_Header.png) 0 0 no-repeat;
  width: 100%;
  height: 100px;
  background-color: #fff;
  background-size: 100%;
  border-radius: 10px;
  margin-top: 20px;
  display: inline-block;
  box-shadow: 0 0 10px #ccc;
}
.countdownBlock h5 {
// : center;

  font-size: 16px;

  color: #fff;
  margin-top: 2px;
}
.countdownBlock strong {
// : center;
  display: block;
  font-size: 45px;
  line-height: 75px;
  color: #003360;
}
.treasureTotal {
  margin: 35px 0 0 0;
}
.treasureTotal span {
  background: #fff;
  color: #a7bbd2;
  border-radius: 100%;
  width: 75px;
  height: 75px;
  display: inline-block;
// : center;
  font-size: 50px;
  padding-top: 25px;
  font-weight: bold;
  box-shadow: 0px 0px 20px #999;
  -moz-box-shadow: 0px 0px 20px #999;
  -webkit-box-shadow: 0px 0px 20px #999;
}
.treasureTotal span.blue {
  background: #54d8f9;
  color: #fff;
}
.treasureTotal span.yellow {
  background: #ffc700;
  color: #fff;
}
.treasureTotal span.red {
  background: #f97e7e;
  color: #fff;
}

.powerupsBlock {
  height: 100%;
}
.powerupsBlock .treasureTotal  {
  width: 100%;
  margin: 20px 0 0 0;
}
.powerupsBlock .treasureTotal span  {
  margin: 0 auto;
  display: block;
  width: 50px;
  height: 50px;
  font-size: 30px;
  padding-top: 12px;
}
.powerupsBlock .treasureTotal h5  {
  color: #000;
// : center;
  display: block;
  margin: 10px 0;
}
.powerupsBlock p.intsructionContent {
  padding: 15px;
  color: #19333e;
  text-align: left;
  /* font-weight: bold; */
  font-family: robotoregular;
  font-size: 14px;
}
.quitTest {
  width: 100%;
  background-color: #F97D7D;
  border-color: #F97D7D;
  font-size: 22px;
  margin-top: 15px;
}
.quitTest:focus{
  border:1px solid transparent;
  outline-color: transparent;
}
.preEnviroment {
  margin-top: 15px;
}
.preEnviroment h5 {
  color: #003360;
  text-align: center;
  font-weight: bold;
}
.btnmd {
  color: #fff;
  background-color: #043660;
  border-color: #2e6da4;
  border-radius: 10px;
}

.stsMsg {
  color: forestgreen;
}

.sidebar {
  float: right;
}

.dltext {
  display: inline-block;
  font-size:17px;
  line-height: 23px;
  color: #4A90E2;
}

.download {
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}

.dlicon {
  padding: 10px 10px 20px 0;
}

.dltext {
  line-height: 60px;
}

.submitbutton {
  font-size:18px;
}

.dlgroup {
  float: left;
}

.completegroup {
  float:right;
  color: white;
}

/* POP UP WINDOW FOR TECHNICAL USE CASE PAGE */
.aws-modal .modal-content{
  height: 262px;
  width: 800px;
}

.aws-modal .modal-body{

}

.skill-modal .modal-content{
  height: 341px;
}

.skill-modal .modal-body{
  height: 189px;
}

.modal-header .close {
  opacity: 1.0;
}

.modalbuttons {
  display: inline-flex;
  justify-content: space-between;
  width: 40%;
}

.modalbutton1 {
  border-radius: 100px;
  /*box-shadow: 0px 2px 3px 0px;*/
  width: 140px;
  height: 42px;
  background-color: #FE6A71;
  border: none;
}

.modalbutton1:focus {
  outline-color: white;
}

.modalbutton2:focus {
  outline-color: white;
}

.no {
  text-align: center;
  list-style: none;
  color: white;
  text-transform: uppercase;
  font-size: 14px;
  margin: auto!important;
}

.modalbutton2 {
  border-radius: 100px;
  /*box-shadow: 0px 2px 3px 0px;*/
  width: 140px;
  height: 42px;
  background-color: #7ADE81;
  border: none;
}

.modal-header {
  background-color: #F2FCFF;
  margin-bottom: 10px;
}

.modal-title {
  color: #003561;
  text-align: left;
}


.yes {
  text-align: center;
  list-style: none;
  color: white;
  text-transform: uppercase;
  font-size: 14px;
  margin: auto!important;
}

.modal-body {
  padding-top: 25px;
}

.modal-body h5 {
  color: #313131;
  font-size: 20px;
  margin-bottom: 40px;
}

.close  {
  z-index: 1000;
  padding:0px;
  opacity: 1.0!important;
}

.close:hover {
  opacity: 1.0!important
}

.workspace-credentials {

  h2 {
    margin-bottom: 20px;
  }

  p {
    font-size: 16px;
    line-height: 18px;
  }
}

#tutorial-modal {
  
  background: rgba(255, 255, 255, .75);
  text-align: left;
  top: 64px;

  .modal-content {
    background-color: #4A4A4A;
    box-shadow: 0 6px 14px 4px rgba(0,0,0,0.12);
    border-radius: 3px;
    padding: 50px;
    border: none;
    width: 766px;
  }

  .modal-body {
    padding: 0;

    .modal-layout {
      display: flex;
      flex-direction: row;
      flex-grow: 1;

      .img-container {
        margin-right: 10px;
      }

      .text-container {
        font-family: Roboto;
        font-size: 16px;
        line-height: 20px;
        color: #fff;
        flex: 1 1 auto;

        button {
          float: right;
          height: 45px;
          min-width: 110px;
          border: 1px solid #FFFFFF;
          background: #4a4a4a;
          border-radius: 22.5px;
          font-size: 16px;
          line-height: 43px;
          text-align: center;
          padding: 0 22px;
          margin-top: 60px;
        }
      }
    }
  }
}