@import "variables";

.tshape-admin_options_wrapper{

width: 100%;

}
.tshape-admin_skill_table{
  font-size: 120%;

  width: 100%;
}

.tshape-admin_shortcode--display{
  font-weight: bold;
  color: #000000 !important;
}

.tshape-admin_shortcode--description{
  font-style: italic;
}

.tshape-admin_options{

  float: left;
 padding-right: 100px;
}


.tshape-admin_options .tshape-form-table th{
width: 250px;
}

.tshape-admin_options_img{

  float: left;
  padding-top: 60px;
}

 .tshape-admin_skill_table--new{
  font-size: 120%;
  // border-spacing: 10px;
  width: 100%;

   margin-top: 15px;
}


.tshape-admin_skill_table, .tshape-admin_skill_table--new select{

  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}


.tshape-bur-ts-adm-submit  {
  float: left;

}

.tshape-admin_skill_table--new, .tshape-admin_skill_table th, td {
  padding: 10px 5px 10px 5px;
  text-align: left;
  //border-bottom: 1px solid #ddd;
}


.tshape-admin_skill_table tr:nth-child(even) {background-color: #f2f2f2}

/* Front End Styles */
.tshape-tshape {
  font-family: $font-family;
  font-size: $font-size;
  display:flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px 0px;
}
.tshape-skills{
  margin-right: 10px;
  text-align: center;
}

.tshape-skills__name{
  position: relative;
  width: 40px;
  height: 180px;
  color:white;
  background-color:$skillsname-background-color;
  margin-bottom: 10px;
  align-self: flex-start;
  flex-basis: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tshape-skills__nametext{
  transform: translate(0,100%) rotate(-90deg);
  transform-origin: -1px -12px;
  position: absolute;
  bottom: 0;
}

.tshape-skills__textoverflow{
  width: 150px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tshape-skills__level{
  background-color:$skillslevel-background-color;
  align-self: flex-start;
  /*text-align: center;*/
  flex-basis: 0;
}


.tshape-skills__level--basic{
  height: 100px;
}
.tshape-skills__level--good{
  height: 200px;
}
.tshape-skills__level--verygood{
  height: 300px;
}
.tshape-skills__level--expert{
  height: 400px;
}


.tshape-tagcloud{
  line-height: 1.3 !important;
  word-spacing: 10px;
  padding: 20px 0px;
}

/* Styles for Skills Tag Cloud Levels */

.tshape-tagcloud-skills__level--basic{
  font-size: 80%;
}

.tshape-tagcloud-skills__level--good{
  font-size: 120%;
}

.tshape-tagcloud-skills__level--verygood{
  font-size: 160%;
}

.tshape-tagcloud-skills__level--expert{
  font-size: 220%;
}



/* TShape View Type Bars */
.tshape-bars{
  justify-content: center;
  padding: 20px 0;
  /*display: table-row;*/
}
.tshape-bar_row{

  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}

.tshape-bars-skills__name{
  background-color: $skillsname-background-color;
  width:100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 10px;
  line-height: 250%;
  color: #fff;
  flex-grow: 0;
  flex-shrink: 0;
}

.tshape-bars-skills__level{
  width: 100%;
  display: flex;

}

.tshape-bars {
  .tshape-bar_row{
    .tshape-bars-skills__level{
      &:first-of-type{
        min-width: 0;
        padding: 0 10px 0 0;
      }
      &:last-of-type{

      }
    }
  }
}

.tshape-bars-skills__level--basic{
  background-color:$skillslevel-background-color;
  width: 25%;
  margin-left: 10px;
}

.tshape-bars-skills__level--good{
  background-color: $skillslevel-background-color;
  width: 50%;
  margin-left: 10px;
}

.tshape-bars-skills__level--verygood{
  background-color: $skillslevel-background-color;
  width: 75%;
  margin-left: 10px;
}

.tshape-bars-skills__level--expert{
  background-color: $skillslevel-background-color;
  width: 100%;
  margin-left: 10px;
}


/*
.tshape {
    font: 15px Arial;
    display:flex;
    justify-content: center;
    align-items: flex-start;
}
.skills{
    margin-right: 10px;
    text-align: center;
}*/

/*View Star-rating*/

.tshape-stars {
  justify-content: center;
  padding: 20px 0;
}
.tshape-rating{
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;

}
.tshape-rating_name{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 10px;
  line-height: 250%;
  padding: 0px 10px;
  flex-grow: 0;
  flex-shrink: 0;
  width: 150px;
  min-width: 100px;
}
.tshape-star_rating {
  width: 100%;
  display: flex;
}
.tshape-star_rating-star{
  color:#fd0 !important;
  font-size: 40px !important;
}

/* ToolTip*/

.tshape-tooltip {
  position: relative;
}

.tshape-tooltip .tshape-tooltiptext {
  visibility: hidden;
  max-width: 180px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  margin-bottom: 180px;
  opacity: 0;
  transition: opacity 1s;
  padding-left: 8px;
  padding-right: 8px;
}

.tshape-tooltip .tshape-tooltiptext::after {
  position: absolute;
  left: 15px;
  top: -10px;
  border-top: 7px solid #ff0000;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  content: "";
  display: none;
}

.tshape-tooltip:hover .tshape-tooltiptext {
  visibility: visible;
  opacity: 1;
}

/*-----------------
/* media queries*/
/*--------------*/

/* Smalls phones*/
@media only screen and (max-width:480px) {
  .tshape-tshape {
    flex-direction: column;
  }
  .tshape-skills{
    display: flex;
    width: 100%;
  }
  .tshape-skills__name{
    margin-bottom: 10px;
    /* align-self: flex-start; */
    /* white-space: nowrap; */
    overflow: hidden;
    text-overflow: ellipsis;
    width: 150px;
    height: 40px !important;
    min-width: 100px;
    flex-basis: 40%;
    margin-right: 10px;
  }
  .tshape-skills__nametext{
    transform: initial;
    position: relative;
    top: 8px;
    left: 10px;
  }
  .tshape-skills__textoverflow{
    position: initial;
    width: 85% !important;
    min-width: 100px;
  }

  .tshape-tooltip .tshape-tooltiptext {
    visibility: hidden;
    bottom: 30%;
    left: 10%;
    margin-bottom: 8px;
    margin-left: 0;
  }

  .tshape-skills__level{
    height: 40px;
  }

  .tshape-skills__level--basic{
    flex-basis: 20.5%;
  }
  .tshape-skills__level--good{
    flex-basis: 35%;
  }
  .tshape-skills__level--verygood{
    flex-basis: 44.5%;
  }
  .tshape-skills__level--expert{
    flex-basis: 57%;
  }
  .tshape-stars {
    flex-direction: column;
  }
  .tshape-rating{
    display: flex;
    width: 100%;
  }
  .tshape-rating_name{
    margin-bottom: 10px;
    /* align-self: flex-start; */
    /* white-space: nowrap; */
    overflow: hidden;
    text-overflow: ellipsis;
    width: 150px;
    height: 40px !important;
    min-width: 100px;
    flex-basis: 40%;
    margin-right: 10px;
  }
}
/* Smalls phones to small tablets*/
@media only screen and (max-width:767px) {

}
/* small tablets zo big tablets*/
@media only screen and (max-width:1023px) {

}
/* bis tablets to 1200*/
@media only screen and (max-width:1200px) {

}