/* Ranger 2 */
#container{
    display: inline-block;
    padding: 40px;
    padding-left: 0;
  }
  #line-range{
    position: relative;
  }
  .line{
    width: 470px;
    height: 2px;
    background: #3f51b5;
  }
  .handle-left::before{
/*    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    background: red;
    background: inherit;
    bottom: -6px;
    margin-right: -1px;*/
  }
  .handle-right{
  }
  .handle{
    width: 20px;
    margin-left: -10px;
    position: absolute;
    text-align: center;
    cursor: pointer;
    padding-top: 7px;
    user-select: none;
    z-index: 5;
  }
  .dot{
    height: 6px;
    width: 6px;
    background: #fff;
    border: 2px solid #3F51B5;
    position: absolute;
    margin-top: -2px;
    margin-left: -2px;
    border-radius: 6px !important;
    z-index: 5;
  }
  .middle{
    left: 50%;
  }
  .end{
    left: 100%;
  }
  .grip{
    border: 2px solid #3F51B5;
    height: 18px;
    width: 18px;
    border-radius: 23px !important;
    border-top-left-radius: 1px !important;
    background: #b0bcff;;
    transform: rotate(45deg);
    position: absolute;
    margin-left: 2px;
  }
  .grip:hover{
    background: #8396fd;
  }
  .grip:active{
    background: #3f51b5;
  }
  .range{
    height: 2px;
    width: 200px;
    left: 30px;
    background: #3F51B5;
    position: absolute;
    top: -8px;
    margin-left: 1px;
  }
  .range::before{
    content: "";
    left: -1px;
    position: absolute;
    height: 8px;
    width: 2px;
    background: inherit;
    bottom: -6px;
  }
  .range::after{
    content: "";
    right: 0;
    position: absolute;
    height: 8px;
    width: 2px;
    background: inherit;
    bottom: -6px;
    margin-right: -1px;
  }
  .handle-value{
    position: absolute;
    color: #3F51B5;
    bottom: 25px;
    width: 100px;
    font: menu;
    background: #dee3ff;
    padding: 1px;
    border-radius: 2px !important;
    height: 18px;
  }
  .right{
    top: 35px;
    right: 8px;
  }
/*Ranger 2 end*/
.full-height {
  height: 100vh !important;
  overflow-y: scroll;
}
/* Ranger */
.timeline-cont-handle {
  width: 100%;
  height: 100px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  margin-left: 5px;
  margin-bottom: 20px;
}

.timeline-cont-handle .timeline {
  position: relative;
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}

.timeline-cont-handle .timeline .baseline {
  position: absolute;
  width: 100%;
  height: 2px;
  background: #6270ff;
}

.timeline-cont-handle .timeline .start {
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid #6270ff;
  box-sizing: border-box;
  border-radius: 20px !important;
  margin-left: -5px;
  z-index: 4;
}
.timeline-cont-handle .timeline .mid {
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid #6270ff;
  box-sizing: border-box;
  border-radius: 20px !important;
  margin-left: auto;
  margin-right: auto;
  z-index: 4;
}

.timeline-cont-handle .timeline .end {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid #6270ff;
  box-sizing: border-box;
  border-radius: 20px !important;
  //margin-left: 0px;
  z-index: 4;
  right: -5px;
}



.timeline-cont-handle .timeline .shift .text {
  height: 10px;
  display: inline-block;
}

.timeline-cont-handle .timeline .shift .text p {
  font-size: 10px;
  font-weight: 600 !important;
  height: auto;
  display: inline-block;
  margin-top: 10px;
  color: #444;
}

.timeline-cont-handle .timeline .shift-line {
  position: relative;
  /*background: #ffdc63;*/
  display: block;
  height: 10px;
  left: 0px;
  width: calc(100% - 20px);
  border-radius: 100px;
}

.timeline-cont-handle .timeline .checkin-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid #444;
  box-sizing: border-box;
  border-radius: 20px !important;
  top: 0px;
}

.timeline-cont-handle .timeline .checkin-handle .line {
  width: 2px;
  height: 30px;
  margin-top: 6px;
  background: #444;
  margin-left: 2px;
}

.timeline-cont-handle .timeline .checkin-handle .text {
  position: absolute;
  height: 10px;
  background: #333;
  padding: 15px;
  top: 20px;
  height: 10px;
  box-sizing: border-box;
  white-space: nowrap;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  margin-left: 2px;
}

.timeline-cont-handle .timeline .checkin-handle .text p {
  font-size: 12px;
  font-weight: bolder;
  color: #fff;
  margin: 0;
}

.timeline-cont-handle .timeline .checkout-handle {
  right: 0px;
}

.timeline-cont-handle .timeline .checkout-handle .line {
  margin-top: -30px;
}

.timeline-cont-handle .timeline .checkout-handle .text {
  top: -44px;
}

.timeline-cont-handle .timeline .ot {
  position: absolute;
  width: 50px;
  height: 10px;
  background: #6270ff;
  left: 500px;
}

.timeline-cont-handle .timeline .ot .line {
  position: absolute;
  width: 2px;
  height: 20px;
  margin-top: -20px;
  background: #6270ff;
  right: 0px;
}

.timeline-cont-handle .timeline .ot .text {
  position: absolute;
  height: 10px;
  background: #6270ff;
  padding: 15px;
  top: -30px;
  height: 10px;
  box-sizing: border-box;
  right: 0px;
  white-space: nowrap;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  border-top-left-radius: 0px;
}

.timeline-cont-handle .timeline .ot .text p {
  font-size: 10px;
  color: #fff;
  margin: 0;
}

/*OT control*/
.ot-cont {
  border: 1px solid #f1f1f1;
  display: block;
  padding: 20px 20px;
}

.ot-cont p {
  margin: 0;
  margin-bottom: 20px;
}

.ot-cont p span {
  display: block;
  font-size: 12px;
  color: #666;
}

.ot-cont .ot-rule {
  margin-bottom: 5px;
}

.ot-cont .ot-rule .prop-group {
  display: inline-block;
}

.ot-cont .ot-rule .prop-group:first-child input {
  width: 30px;
}

.ot-cont .ot-rule .prop-group:nth-child(3) input {
  width: 50px;
}

.ot-cont .ot-rule .prop-group:nth-child(4) input {
  width: 50px;
}

.ot-cont .ot-rule .prop-group label {
  display: inline-block;
  font-size: 10px;
  margin-bottom: 0px;
  background: #fff;
  padding: 0px 3px;
  box-sizing: border-box;
  color: #666;
}

.ot-cont .ot-rule .prop-group input {
  outline: none;
  border: 1px solid #ccc;
  padding: 3px;
  font-size: 16px;
  display: block;
  margin: 0;
  width: auto;
}

.ot-cont .add-rule {
  margin-top: 10px;
}

.ot-cont .add-rule a {
  padding: 5px 10px;
  background: #38aad9;
  box-sizing: border-box;
  display: inline-block;
  color: #fff;
  transition: all 0.4s ease;
  cursor: pointer;
}

.ot-cont .add-rule a:hover {
  background: #3583a4;
  padding: 5px 20px;
}

.ot-cont .add-rule label {
  display: block;
  font-size: 12px;
  margin-bottom: 3px;
  color: #38aad9;
}

/*Charts*/
.timeline-cont {
  width: 600px;
  height: 100px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  margin-left: 10px;
}

.timeline-cont .timeline {
  position: relative;
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}

.timeline-cont .timeline .baseline {
  position: absolute;
  width: 600px;
  height: 2px;
  background: #6270ff;
}

.timeline-cont .timeline .start {
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid #6270ff;
  box-sizing: border-box;
  border-radius: 20px !important;
  margin-left: -5px;
  z-index: 4;
}

.timeline-cont .timeline .end {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid #6270ff;
  box-sizing: border-box;
  border-radius: 20px !important;
  margin-left: -5px;
  z-index: 4;
  right: 0px;
}

.timeline-cont .timeline .shift {
  position: absolute;
  width: 400px;
  height: 10px !important;
  background: #ffdc63;
  left: 100px;
  text-align: center;
  border-left: 2px solid #6270ff;
  border-right: 2px solid #6270ff;
}

.timeline-cont .timeline .shift .text {
  height: 10px;
  display: inline-block;
}

.timeline-cont .timeline .shift .text p {
  font-size: 10px;
  font-weight: 800 !important;
  height: auto;
  display: inline-block;
  margin-top: 10px;
  color: #444;
}

.timeline-cont .timeline .checkin {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid #444;
  left: 30px;
  box-sizing: border-box;
  border-radius: 20px !important;
}

.timeline-cont .timeline .checkin .line {
  width: 2px;
  height: 30px;
  margin-top: 6px;
  background: #444;
  margin-left: 2px;
}

.timeline-cont .timeline .checkin .text {
  position: absolute;
  height: 10px;
  background: #333;
  padding: 15px;
  top: 20px;
  height: 10px;
  box-sizing: border-box;
  white-space: nowrap;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  margin-left: 2px;
}

.timeline-cont .timeline .checkin .text p {
  font-size: 10px;
  font-weight: 800 !important;
  color: #fff;
  margin: 0;
}

.timeline-cont .timeline .checkout {
  left: 550px;
}

.timeline-cont .timeline .ot {
  position: absolute;
  width: 50px;
  height: 10px;
  background: #81d25e;
  left: 500px;
}

.timeline-cont .timeline .ot .line {
  position: absolute;
  width: 2px;
  height: 20px;
  margin-top: -20px;
  background: #333;
  right: 0px;
}

.timeline-cont .timeline .ot .text {
  position: absolute;
  height: 10px;
  background: #6270ff;
  padding: 15px;
  top: -30px;
  height: 10px;
  box-sizing: border-box;
  right: 0px;
  white-space: nowrap;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  border-top-left-radius: 0px;
}

.timeline-cont .timeline .ot .text p {
  font-size: 10px;
  font-weight: 800 !important;
  color: #fff;
  margin: 0;
}


/*Pagination*/
.pagination-cont {
  font-size: 0;
  display: inline-block;
}

.pagination-cont .page {
  width: 240px;
  height: 70px;
  background: #38AAD9;
  -webkit-clip-path: polygon(0% 0%, 0% 100%, 90% 100%, 100% 50%, 90% 0%);
  clip-path: polygon(0% 0%, 0% 100%, 90% 100%, 100% 50%, 90% 0%);
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  margin-left: calc((240px/100)*-10)
}

.pagination-cont .page:nth-child(1) {
  background: #3583A4;
  z-index: 5;
  margin-left: calc((240px/100)*0)
}

.pagination-cont .page:nth-child(2) {
  background: #38AAD9;
  z-index: 4;
}

.pagination-cont .page:nth-child(3) {
  background: #6DBDE1;
  z-index: 3;
}

.pagination-cont .page .content {
  box-sizing: border-box;
  padding: 10px;
  font-size: 0;
  color: #fff;
  margin-left: 30px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  height: 70px;
}

.pagination-cont .page .content .icon-box {
  width: 40px;
  display: inline-block;
  box-sizing: border-box;
  vertical-align: middle;
}

.pagination-cont .page .content .icon-box .icon {
  text-align: center;
  font-size: 30px;
}

.pagination-cont .page .content .text-box {
  width: calc(100% - 50px);
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  padding: 0px;
  padding-left: 10px;
  color: #fff;
}

.pagination-cont .page .content .text-box h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800 !important;
}

.pagination-cont .page .content .text-box p {
  margin: 0;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600 !important;
}
/* Overall */
.overall{
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 4000;
  opacity: 1;
  top: 0px;
  left: 0px;
}
.overall .col-md-6 {
  background: #fff;
  padding: 100px;
}

/* Team alloc */
.col-md-6.creator {
  width: 50%;
}

.col-md-6.creator input {
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 3px;
  border-radius: 3px;
  border: 1px solid #eee;
}

.col-md-6.creator ul {
  padding: 0;
  color: #f00;
  width: 100%;
  margin: 0;
  margin-top: 4px;
  display: block;
  box-sizing: border-box;
  list-style-type: none;
}

.col-md-6.creator ul.results {
  background: #f5f5f5;
  padding: 5px;
}

.col-md-6.creator ul.exist li a {
  color: #8b0066;
}

.col-md-6.creator ul li {
  padding: 2px;
  color: #333;
  width: 100%;
  display: block;
  box-sizing: border-box;
}

.col-md-6.creator ul li:hover {
  background: #ddd;
}

.col-md-6.creator ul li.active {
  background: #ccf;
}

.col-md-6.creator ul li a {
  text-decoration: none;
  color: #83a40b;
}

.col-md-6.creator ul li span {
  margin-left: 4px;
}

/* Add Shift */

.cal-week-box .cal-row-fluid.cal-row-head .cal-cell1 .add-shift {
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 5px;
  background: #e8fde7;
}

.cal-week-box .cal-row-fluid.cal-row-head .cal-cell1 .add-shift:hover {
  background: #71d281;
}

.cal-week-box .cal-row-fluid.cal-row-head .cal-cell1 .add-shift:hover a {
  color: #fff;
}

.cal-week-box .cal-row-fluid.cal-row-head .cal-cell1 .add-shift a {
  text-decoration: none;
  color: #333;
  height: 100%;
  width: 100%;
  display: inline-block;
  font-size: 14px
}

/* Shift */
.shift a{
  font-size: 12px;
  font-weight: bold;
  margin: 2px;

}
.shift{
  height: 45px !important;
}
.shift p{
  font-size: 12px;
  font-weight: 600;
  color: #333;
  margin-top: -13px;
  height: 15px;

}



/* Relative positioning*/
#wrapper1 {
    position: relative;
    border: 1px solid #fafafa;
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,.5);
    box-shadow: 0 3px 3px rgba(0,0,0,.5);
}

/* Hide the original tooltips contents */
.pin {
    display: none;
}



/* Begin styling the tooltips and pins */
.tooltip1-up, .tooltip1-down {
    position: absolute;
    background: url(http://www.red-team-design.com/wp-content/uploads/2011/10/arrow-up-down.png);
    width: 36px;
    height: 52px;
}

.tooltip1-down {
    background-position: 0 -52px;
}

.tooltip1 {
    display: none;
    width: 200px;
    cursor: help;
    text-shadow: 0 1px 0 #fff;
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 999;
    margin-left: -100px;
    padding:15px;
    color: #222;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 3px 0 rgba(0,0,0,.7);
    -webkit-box-shadow: 0 3px 0 rgba(0,0,0,.7);
    box-shadow: 0 3px 0 rgba(0,0,0,.7);
    background: #fff1d3;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff1d3), to(#ffdb90));
    background: -webkit-linear-gradient(top, #fff1d3, #ffdb90);
    background: -moz-linear-gradient(top, #fff1d3, #ffdb90);
    background: -ms-linear-gradient(top, #fff1d3, #ffdb90);
    background: -o-linear-gradient(top, #fff1d3, #ffdb90);
    background: linear-gradient(top, #fff1d3, #ffdb90);
}

.tooltip1::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -10px;
    border-bottom: 10px solid #fff1d3;
    border-left: 10px solid transparent;
    border-right :10px solid transparent;
}

.tooltip1-down .tooltip1 {
    bottom: 12px;
    top: auto;
}

.tooltip1-down .tooltip1::after {
    bottom: -10px;
    top: auto;
    border-bottom: 0;
    border-top: 10px solid #ffdb90;
}

.tooltip1 h2 {
    font: bold 1.3em 'Trebuchet MS', Tahoma, Arial;
    margin: 0 0 10px;
}

.tooltip1 ul {
    margin: 0;
    padding: 0;
    list-style: none;
}