@charset "UTF-8";
/*第三圈圓形css*/
.circle-container {
  position: relative;
  width: 50em;
  height: 50em;
  border-radius: 25em;
  padding: 0;
  list-style: none;
  margin: 5em auto 0;
}

.circle-container > * {
  display: block;
  position: absolute;
  top: 25em;
  left: 25em;
  margin: -3em;
  width: 6em;
  height: 6em;
}
/* 第三圈 移動 */
/*.circle-container > *:nth-of-type(0) {
  -webkit-transform: rotate(-12.81deg) translate(25em) rotate(-12.81deg);
  transform: rotate(12.81deg) translate(25em) rotate(12.81deg);
}*/

.circle-container > *:nth-of-type(1) {
  -webkit-transform: rotate(4.33deg) translate(25em) rotate(-4.33deg);
  transform: rotate(4.33deg) translate(25em) rotate(-4.33deg);
}

.circle-container > *:nth-of-type(2) {
  -webkit-transform: rotate(21.47deg) translate(25em) rotate(-21.47deg);
  transform: rotate(21.47deg) translate(25em) rotate(-21.47deg);
}

.circle-container > *:nth-of-type(3) {
  -webkit-transform: rotate(38.61deg) translate(25em) rotate(-38.61deg);
  transform: rotate(38.61deg) translate(25em) rotate(-38.61deg);
}

.circle-container > *:nth-of-type(4) {
  -webkit-transform: rotate(55.75deg) translate(25em) rotate(-55.75deg);
  transform: rotate(55.75deg) translate(25em) rotate(-55.75deg);
}

.circle-container > *:nth-of-type(5) {
  -webkit-transform: rotate(72.89deg) translate(25em) rotate(-72.89deg);
  transform: rotate(72.89deg) translate(25em) rotate(-72.89deg);
}

.circle-container > *:nth-of-type(6) {
  -webkit-transform: rotate(90.03deg) translate(25em) rotate(-90.03deg);
  transform: rotate(90.03deg) translate(25em) rotate(-90.03deg);
}

.circle-container > *:nth-of-type(7) {
  -webkit-transform: rotate(107.17deg) translate(25em) rotate(-107.17deg);
  transform: rotate(107.17deg) translate(25em) rotate(-107.17deg);
}

.circle-container > *:nth-of-type(8) {
  -webkit-transform: rotate(124.31deg) translate(25em) rotate(-124.31deg);
  transform: rotate(124.31deg) translate(25em) rotate(-124.31deg);
}

.circle-container > *:nth-of-type(9) {
  -webkit-transform: rotate(141.45deg) translate(25em) rotate(-141.45deg);
  transform: rotate(141.45deg) translate(25em) rotate(-141.45deg);
}

.circle-container > *:nth-of-type(10) {
  -webkit-transform: rotate(158.59deg) translate(25em) rotate(-158.59deg);
  transform: rotate(158.59deg) translate(25em) rotate(-158.59deg);
}

.circle-container > *:nth-of-type(11) {
  -webkit-transform: rotate(175.73deg) translate(25em) rotate(-175.73deg);
  transform: rotate(175.73deg) translate(25em) rotate(-175.73deg);
}

.circle-container > *:nth-of-type(12) {
  -webkit-transform: rotate(192.87deg) translate(25em) rotate(-192.87deg);
  transform: rotate(192.87deg) translate(25em) rotate(-192.87deg);
}

.circle-container > *:nth-of-type(13) {
  -webkit-transform: rotate(210.01deg) translate(25em) rotate(-210.01deg);
  transform: rotate(210.01deg) translate(25em) rotate(-210.01deg);
}

.circle-container > *:nth-of-type(14) {
  -webkit-transform: rotate(227.15deg) translate(25em) rotate(-227.15deg);
  transform: rotate(227.15deg) translate(25em) rotate(-227.15deg);
}

.circle-container > *:nth-of-type(15) {
  -webkit-transform: rotate(244.29deg) translate(25em) rotate(-244.29deg);
  transform: rotate(244.29deg) translate(25em) rotate(-244.29deg);
}

/*.circle-container > *:nth-of-type(16) {
  -webkit-transform: rotate(254.4deg) translate(25em) rotate(-254.4deg);
  transform: rotate(254.4deg) translate(25em) rotate(-254.4deg);
}*/

.circle-container > *:nth-of-type(16) {
  -webkit-transform: rotate(261.43deg) translate(25em) rotate(-261.43deg);
  transform: rotate(261.43deg) translate(25em) rotate(-261.43deg);
}

.circle-container > *:nth-of-type(17) {
  -webkit-transform: rotate(278.57deg) translate(25em) rotate(-278.57deg);
  transform: rotate(278.57deg) translate(25em) rotate(-278.57deg);
}

.circle-container > *:nth-of-type(18) {
  -webkit-transform: rotate(295.71deg) translate(25em) rotate(-295.71deg);
  transform: rotate(295.71deg) translate(25em) rotate(-295.71deg);
}

.circle-container > :nth-of-type(19) {
  -webkit-transform: rotate(312.85deg) translate(25em) rotate(-312.85deg);
  transform: rotate(312.85deg) translate(25em) rotate(-312.85deg);
}

.circle-container > *:nth-of-type(20) {
  -webkit-transform: rotate(329.99deg) translate(25em) rotate(-329.99deg);
  transform: rotate(329.99deg) translate(25em) rotate(-329.99deg);
}

.circle-container > *:nth-of-type(21) {
  -webkit-transform: rotate(347.13deg) translate(25em) rotate(-347.13deg);
  transform: rotate(347.13deg) translate(25em) rotate(-347.13deg);
}

.material-button-anim {
  position: relative;
  padding: 60px 15px 150px;
  text-align: center;
  max-width: 320px;
  margin: 0 auto 20px;
}

.material-button {
  position: relative;
  top: 0;
  z-index: 1;
  width: 80px;
  height: 80px;
  /*font-size: 1.5em;*/
  /*color: #fff;*/
  background: #2C98DE;
  border: none;
  border-radius: 25em;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.275);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.275);
  outline: none;
}

.material-button-toggle span {
  -webkit-transform: none;
  transform: none;
  -webkit-transition: -webkit-transform 0.175s cubic-bazier(0.175, 0.67, 0.83, 0.67);
  transition: -webkit-transform 0.175s cubic-bazier(0.175, 0.67, 0.83, 0.67);
  transition: transform 0.175s cubic-bazier(0.175, 0.67, 0.83, 0.67);
  transition: transform 0.175s cubic-bazier(0.175, 0.67, 0.83, 0.67), -webkit-transform 0.175s cubic-bazier(0.175, 0.67, 0.83, 0.67);
}

.material-button-toggle.open {
  -webkit-transform: scale(1.3, 1.3);
  transform: scale(1.3, 1.3);
  -webkit-animation: toggleBtnAnim .175s;
  animation: toggleBtnAnim .175s;
}

.material-button-toggle.open span {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: -webkit-transform 0.175s cubic-bazier(0.175, 0.67, 0.83, 0.67);
  transition: -webkit-transform 0.175s cubic-bazier(0.175, 0.67, 0.83, 0.67);
  transition: transform 0.175s cubic-bazier(0.175, 0.67, 0.83, 0.67);
  transition: transform 0.175s cubic-bazier(0.175, 0.67, 0.83, 0.67), -webkit-transform 0.175s cubic-bazier(0.175, 0.67, 0.83, 0.67);
}

/*結束*/
/*第二圈(領域)屬性*/
.scale-on .option2 {
  -webkit-transform: translate(0px, -90px);
  transform: translate(0px, -90px);
}

.scale-on .option4 {
  -webkit-transform: translate(-90px, 0px);
  transform: translate(-90px, 0px);
}

.scale-on .option5 {
  -webkit-transform: translate(90px, 0px);
  transform: translate(90px, 0px);
}

.scale-on .option7 {
  -webkit-transform: translate(0px, 90px);
  transform: translate(0px, 90px);
}

.scale-on .student {
  -webkit-transform: translate(-5px, 0px);
  transform: translate(-5px, 0px);
}

.btn3d.btn-option1 {
  -webkit-box-shadow: 0 0 0 1px #ccddd3 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 3px 8px 0 0 #b9c9bf, 3px 8px 8px 1px rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 0 1px #ccddd3 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 3px 8px 0 0 #b9c9bf, 3px 8px 8px 1px rgba(0, 0, 0, 0.5);
  background-color: #DFF0E6;
}

.btn3d.btn-option1:active, .btn3d.btn-option1.active {
  -webkit-box-shadow: 0 0 0 1px #ccddd3 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 0 1px #ccddd3 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  background-color: #DFF0E6;
}

.btn3d.btn-option2 {
  -webkit-box-shadow: 0 0 0 1px #59b1b7 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 3px 8px 0 0 #4d989e, 3px 8px 8px 1px rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 0 1px #59b1b7 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 3px 8px 0 0 #4d989e, 3px 8px 8px 1px rgba(0, 0, 0, 0.5);
  background-color: #6CD1D9;
}

.btn3d.btn-option2:active, .btn3d.btn-option2.active {
  -webkit-box-shadow: 0 0 0 1px #59b1b7 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 0 1px #59b1b7 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  background-color: #6CD1D9;
}

.btn3d.btn-option3 {
  -webkit-box-shadow: 0 0 0 1px #078c96 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 3px 8px 0 0 #046b72, 3px 8px 8px 1px rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 0 1px #078c96 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 3px 8px 0 0 #046b72, 3px 8px 8px 1px rgba(0, 0, 0, 0.5);
  background-color: #0AA8B4;
}

.btn3d.btn-option3:active, .btn3d.btn-option3.active {
  -webkit-box-shadow: 0 0 0 1px #078c96 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 0 1px #078c96 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  background-color: #0AA8B4;
}

.btn3d.btn-option4 {
  -webkit-box-shadow: 0 0 0 1px #d79a47 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 3px 8px 0 0 #D79A34, 3px 8px 8px 1px rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 0 1px #d79a47 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 3px 8px 0 0 #D79A34, 3px 8px 8px 1px rgba(0, 0, 0, 0.5);
  background-color: #FEC14E;
}

.btn3d.btn-option4:active, .btn3d.btn-option4.active {
  -webkit-box-shadow: 0 0 0 1px #d79a47 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 0 1px #d79a47 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  background-color: #FEC14E;
}

.btn3d.btn-option5 {
  -webkit-box-shadow: 0 0 0 1px #06a585 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 3px 8px 0 0 #05846b, 3px 8px 8px 1px rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 0 1px #06a585 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 3px 8px 0 0 #05846b, 3px 8px 8px 1px rgba(0, 0, 0, 0.5);
  background-color: #0ACAA6;
}

.btn3d.btn-option5:active, .btn3d.btn-option5.active {
  -webkit-box-shadow: 0 0 0 1px #06a585 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 0 1px #06a585 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  background-color: #0ACAA6;
}

.btn3d.btn-option6 {
  -webkit-box-shadow: 0 0 0 1px #d8cab3 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 3px 8px 0 0 #b2a592, 3px 8px 8px 1px rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 0 1px #d8cab3 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 3px 8px 0 0 #b2a592, 3px 8px 8px 1px rgba(0, 0, 0, 0.5);
  background-color: #FEEED5;
}

.btn3d.btn-option6:active, .btn3d.btn-option6.active {
  -webkit-box-shadow: 0 0 0 1px #d8cab3 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 0 1px #d8cab3 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  background-color: #FEEED5;
}

.btn3d.btn-option7 {
  -webkit-box-shadow: 0 0 0 1px #d8907f inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 3px 8px 0 0 #c17f70, 3px 8px 8px 1px rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 0 1px #d8907f inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 3px 8px 0 0 #c17f70, 3px 8px 8px 1px rgba(0, 0, 0, 0.5);
  background-color: #FFAA96;
}

.btn3d.btn-option7:active, .btn3d.btn-option7.active {
  -webkit-box-shadow: 0 0 0 1px #d8907f inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 0 1px #d8907f inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  background-color: #FFAA96;
}

.btn3d.btn-option8 {
  -webkit-box-shadow: 0 0 0 1px #ce5d21 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 3px 8px 0 0 #b2521e, 3px 8px 8px 1px rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 0 1px #ce5d21 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 3px 8px 0 0 #b2521e, 3px 8px 8px 1px rgba(0, 0, 0, 0.5);
  background-color: #E76D27;
}

.btn3d.btn-option8:active, .btn3d.btn-option8.active {
  -webkit-box-shadow: 0 0 0 1px #ce5d21 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 0 1px #ce5d21 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  background-color: #E76D27;
}

/*結束*/
/*字體以及icon反黑*/
.object18 h4, .object18 span,
.object19 h4, .object19 span,
.object20 h4, .object20 span,
.object21 h4, .object21 span,
.object22 h4, .object22 span,
.object1 h4, .object1 span,
.object2 h4, .object2 span,
.scale-on .option3 p, .scale-on .option3 span,
.scale-on .option5 p, .scale-on .option5 span {
  color: black;
}

/*結束*/
/*科目背景顏色*/
/*g1*/
.object13, .object14, .object15 {
  background-color: #DFF0E6;
}

.object16 {
  /*g2*/
  background-color: #6CD1D9;
}

/*g3*/
.object17, .object18, .object19, .object20 {
  background-color: #0AA8B4;
}

/*g5*/
.object21, .object1, .object2 {
  background-color: #0ACAA6;
}

/*g8*/
.object3, .object4 {
  background-color: #E76D27;
}

/*g7*/
.object5, .object6, .object7 {
  background-color: #FFAA96;
}

/*g6*/
.object8, .object9 {
  background-color: #FEEED5;
}

/*g4*/
.object10, .object11, .object12 {
  background-color: #FEC14E;
}

/*結束*/
/**/
.shrink17 {
  opacity: 0;
  -webkit-transform: translate(0em, 11em);
  transform: translate(0em, 11em);
  -webkit-transition: all .175s;
  transition: all .175s;
}

.shrink18 {
  opacity: 0;
  -webkit-transform: translate(-4.5em, 8em);
  transform: translate(-4.5em, 8em);
  -webkit-transition: all .175s;
  transition: all .175s;
}

.shrink19 {
  opacity: 0;
  -webkit-transform: translate(-8em, 5em);
  transform: translate(-8em, 5em);
  -webkit-transition: all .175s;
  transition: all .175s;
}

.shrink20 {
  opacity: 0;
  -webkit-transform: translate(-11em, 2em);
  transform: translate(-11em, 2em);
  -webkit-transition: all .175s;
  transition: all .175s;
}

.shrink21 {
  opacity: 0;
  -webkit-transform: translate(-6em, 2em);
  transform: translate(-6em, 2em);
  -webkit-transition: all .175s;
  transition: all .175s;
}

.shrink1 {
  opacity: 0;
  -webkit-transform: translate(-6em, -2em);
  transform: translate(-6em, -2em);
  -webkit-transition: all .175s;
  transition: all .175s;
}

.shrink2 {
  opacity: 0;
  -webkit-transform: translate(-5em, -7em);
  transform: translate(-5em, -7em);
  -webkit-transition: all .175s;
  transition: all .175s;
}

.shrink3 {
  opacity: 0;
  -webkit-transform: translate(-8em, -6em);
  transform: translate(-8em, -6em);
  -webkit-transition: all .175s;
  transition: all .175s;
}

.shrink4 {
  opacity: 0;
  -webkit-transform: translate(-4em, -8em);
  transform: translate(-4em, -8em);
  -webkit-transition: all .175s;
  transition: all .175s;
}

.shrink5 {
  opacity: 0;
  -webkit-transform: translate(-5em, -6em);
  transform: translate(-5em, -6em);
  -webkit-transition: all .175s;
  transition: all .175s;
}

.shrink6 {
  opacity: 0;
  -webkit-transform: translate(0em, -7em);
  transform: translate(0em, -7em);
  -webkit-transition: all .175s;
  transition: all .175s;
}

.shrink7 {
  opacity: 0;
  -webkit-transform: translate(4em, -6em);
  transform: translate(4em, -6em);
  -webkit-transition: all .175s;
  transition: all .175s;
}

.shrink8 {
  opacity: 0;
  -webkit-transform: translate(3em, -8.5em);
  transform: translate(3em, -8.5em);
  -webkit-transition: all .175s;
  transition: all .175s;
}

.shrink9 {
  opacity: 0;
  -webkit-transform: translate(6.5em, -6em);
  transform: translate(6.5em, -6em);
  -webkit-transition: all .175s;
  transition: all .175s;
}

.shrink10 {
  opacity: 0;
  -webkit-transform: translate(5em, -6em);
  transform: translate(5em, -6em);
  -webkit-transition: all .175s;
  transition: all .175s;
}

.shrink11 {
  opacity: 0;
  -webkit-transform: translate(6.5em, -2em);
  transform: translate(6.5em, -2em);
  -webkit-transition: all .175s;
  transition: all .175s;
}

.shrink12 {
  opacity: 0;
  -webkit-transform: translate(6.5em, 2em);
  transform: translate(6.5em, 2em);
  -webkit-transition: all .175s;
  transition: all .175s;
}

.shrink13 {
  opacity: 0;
  -webkit-transform: translate(9em, 2em);
  transform: translate(9em, 2em);
  -webkit-transition: all .175s;
  transition: all .175s;
}

.shrink14 {
  opacity: 0;
  -webkit-transform: translate(6.5em, 6em);
  transform: translate(6.5em, 6em);
  -webkit-transition: all .175s;
  transition: all .175s;
}

.shrink15 {
  opacity: 0;
  -webkit-transform: translate(3em, 9em);
  transform: translate(3em, 9em);
  -webkit-transition: all .175s;
  transition: all .175s;
}

/*.shrink16 {
  opacity: 0;
  -webkit-transform: translate(-1.5em, 10em);
  transform: translate(-1.5em, 10em);
  -webkit-transition: all .175s;
  transition: all .175s;
}*/

.shrink16 {
  opacity: 0;
  -webkit-transform: translate(-1em, 7em);
  transform: translate(-1em, 7em);
  -webkit-transition: all .175s;
  transition: all .175s;
}

@keyframes toggleBtnAnim {
  0% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  25% {
    -webkit-transform: scale(1.4, 1.4);
    transform: scale(1.4, 1.4);
  }
  75% {
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
  }
  100% {
    -webkit-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3);
  }
}

@-webkit-keyframes toggleBtnAnim {
  0% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  25% {
    -webkit-transform: scale(1.4, 1.4);
    transform: scale(1.4, 1.4);
  }
  75% {
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
  }
  100% {
    -webkit-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3);
  }
}

body {
  background-color: #F5F5F5;
}

@media (min-width: 1200px) {
  .container {
    width: 1200px;
    margin: 0 auto;
    padding: 0;
  }
}

#cmp_area #on {
  border-radius: 0 5px 5px 0 !important;
  width: 35px !important;
  padding: 5px 0 !important;
  background-color: #0F4358 !important;
}

.cmp_menus {
  -webkit-box-shadow: 1px 1px 4px #B0C4DE;
          box-shadow: 1px 1px 4px #B0C4DE;
  border: 1px solid #1b4d61 !important;
  border-radius: 0px !important;
}

#menu_title1,
#menu_title2 {
  border-bottom: 1px solid #1b4d61;
}

.cmp_menuh {
  background: #ececec !important;
}

.cmp_item {
  background: #c2e8fb !important;
}

.cmp_itemb {
  background: #c2e8fb !important;
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#main {
  border: 1px solid #D6D6D6;
  background-color: #FFF;
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  margin-top: 10px;
  z-index: 0;
  min-height: 700px;
}

.main {
  margin-bottom: 20px;
}

article {
  line-height: 32px;
}

dd a {
  line-height: 32px;
}

nobr {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 10px;
}

nobr .rectangle {
  margin-right: 10px;
}

a.related {
  background-color: #EFEEEE;
  padding: 5px 15px;
  border-radius: 24px;
  margin: 0 5px;
}

u {
  color: #1E96C8;
}

.join_btn {
  float: right;
}

.join_btn .join_list {
  border: 1px solid #1E96C8;
  padding: 5px 20px;
  border-radius: 24px;
  font-size: 16px;
  margin-right: 5px;
}

.join_btn .join_list i {
  margin-right: 5px;
  color: #1E96C8;
}

.join_btn .my_favourite {
  border: 1px solid #1E96C8;
  padding: 5px 20px;
  border-radius: 24px;
  font-size: 16px;
}

.join_btn .my_favourite i {
  margin-right: 5px;
  color: #1E96C8;
}

@media (max-width: 768px) {
  .join_btn {
    float: right;
  }
  .join_btn .join_list {
    border: 0;
    padding: 0;
  }
  .join_btn .join_list span {
    display: none;
  }
  .join_btn .my_favourite {
    border: 0;
    padding: 0;
  }
  .join_btn .my_favourite span {
    display: none;
  }
}

@media (min-width: 992px) {
  .col-md-10 {
    width: 100%;
  }
}

#canvas-holder {
  margin: 0 auto;
}

dd.col-md-5 > p {
  background-color: #E0F4FD;
  padding: 10px;
  border-radius: 10px;
}

.row.align-items-center {
  border: 1px solid #D6D6D6;
  background-color: #FFF;
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 20px;
  margin-top: 10px;
}

.col-md-8 {
  z-index: 0;
}

.panel-primary > .panel-heading {
  background-color: #1e96c8;
  border-color: #1e96c8;
}

.titletext {
  color: #1e96c8 !important;
}

.badge {
  margin-top: 15px !important;
  padding: 7px 5px !important;
}

#tab-college .badge {
  background-color: #1e96c8 !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #1e96c8;
  cursor: default;
  background-color: #f5f2f2;
  border: 1px solid #1e96c8;
  border-bottom-color: transparent;
}

.nav-tabs {
  border-bottom: 1px solid #1e96c8;
}

ul.nav > li a.bfont {
  font-size: 15px;
  font-weight: 600;
  padding-left: 20px;
}

.tab-content .progress-bar {
  background-color: #1e96c8;
}