body {
  font-family: "Ubuntu", sans-serif;
  width: 100%;
  background-color: white;
}

p {
  color: #525252;
  font-size: 12px;
}

.skillbar {
  position: relative;
  display: block;
  margin-bottom: 15px;
  width: 100%;
  background: #eee;
  height: 35px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -webkit-transition: 0.4s linear;
  -moz-transition: 0.4s linear;
  -ms-transition: 0.4s linear;
  -o-transition: 0.4s linear;
  transition: 0.4s linear;
  -webkit-transition-property: width, background-color;
  -moz-transition-property: width, background-color;
  -ms-transition-property: width, background-color;
  -o-transition-property: width, background-color;
  transition-property: width, background-color;
  overflow: hidden; /* ensure the fill is clipped correctly */
}

.skillbar-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  font-weight: bold;
  font-size: 15px;
  color: #ffffff;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 4px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.skillbar-title span {
  display: block;
  /*background: rgba(0, 0, 0, 0.1);*/
  color: black;
  padding: 0 20px;
  height: 35px;
  line-height: 35px;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  min-width: 120px;
}

.skillbar-bar {
  height: 35px;
  width: 0px;
  background: #6adcfa;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  position: absolute;   /* make the fill layer sit under the labels */
  left: 0;
  top: 0;
  transition: width 1s ease;
}

.skill-bar-percent {
  position: absolute;
  right: 10px;
  top: 0;
  font-size: 14px;
  height: 35px;
  line-height: 35px;
  color: #000000;
  /*color: rgba(0, 0, 0, 0.4);*/
  font-family: Courier New;
  font-weight:bold;
}



[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
}

[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 1.95em;
  cursor: pointer;
}

@media (max-width: 600px) {
  .skillbar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .skillbar-title {
    width: 100% !important;
    margin-bottom: 4px;
  }
  .skill-bar-percent {
    width: 100%;
    margin-top: 2px;
    font-size: 0.95em;
    word-break: break-all;
  }
  /* Checkbox table: stack vertically, reduce padding */
  .table-responsive table {
    display: block;
  }
  .table-responsive table tr {
    display: flex;
    flex-wrap: wrap;
  }
  .table-responsive table td {
    flex: 1 1 45%;
    min-width: 120px;
    padding: 4px 2px;
    font-size: 0.98em;
  }
  .table-responsive table td label {
    font-size: 1em;
  }
}

@media (max-width: 600px) {
  .skillbar,
  .skillbar * {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .skillbar-mobile {
    display: block !important;
    margin-bottom: 12px;
    background: #f8f8f8;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 1em;
    color: #222;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  }
}
@media (min-width: 601px) {
  .skillbar-mobile {
    display: none !important;
  }
}