@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

$font-family-sans-serif-2: 'Poppins', sans-serif;
$font-family-serif: 'Source Serif Pro', serif;



body {
	font-family: $font-family-sans-serif;
	background-color: #fff;
  font-weight: 300;
}
p {
	color: darken(#ccc, 10%);
	font-weight: 300;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: $font-family-sans-serif;
}
a {
	transition: .3s all ease;
	&, &:hover {
		text-decoration: none!important;
	}
}
.content {
	padding: 7rem 0;
}
h2 {
	font-size: 20px;
}


.custom-table {
	min-width: 900px;
	thead {
		tr, th {
			border-top: none;
			border-bottom: none!important;
		}
	}
	tbody {
		th, td {
			color: #777;
			font-weight: 400;
      padding-bottom: 20px;
      padding-top: 20px;
      font-weight: 300;
      small {
        color: darken(#ccc, 10%);
        font-weight: 300;
      }
		}
    .persons {
      padding: 0;
      margin: 0;
      li {
        padding: 0;
        margin: 0 0 0 -15px;
        list-style: none;
        display: inline-block;
        a {
          display: inline-block;
          width: 36px;
          img {
            border-radius: 50%;
            max-width: 100%;
          }
        }
      }
    }
    tr {
      th, td {
        position: relative;
        transition: .3s all ease;
        &:before, &:after {
          transition: .3s all ease;
          content: "";
          left: 0;
          right: 0;
          position: absolute;
          height: 1px;
          background: lighten($black, 75%);
          width: 100%;
          opacity: 0;
          visibility: hidden;
        }
        &:before {
          top: -1px;
        }
        &:after {
          bottom: -1px;
        }
      }
      &:hover {
        th, td {
          background: rgba($black, .03);
          &:before, &:after {
            opacity: 1;
            visibility: visible;
          }
        }
      }

      &.active {
        th, td {
          background: rgba($black, .03);
          &:before, &:after {
            opacity: 1;
            visibility: visible;
          }
        }
      }
    }
	}
}


/* Custom Checkbox */
.control {
  display: block;
  position: relative;
  margin-bottom: 25px;
  cursor: pointer;
  font-size: 18px;
}
.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.control__indicator {
  position: absolute;
  top: 2px;
  left: 0;
  height: 20px;
  width: 20px;
  border-radius: 4px;
  border: 2px solid #ccc;
  background: transparent;
}
.control--radio .control__indicator {
  border-radius: 50%;
}
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
  border: 2px solid $primary;
}
.control input:checked ~ .control__indicator {
  border: 2px solid $primary;
  background: $primary;
}
.control input:disabled ~ .control__indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
  border: 2px solid #ccc;
}
.control__indicator:after {
	font-family: 'icomoon';
  content: '\e5ca';
  position: absolute;
  display: none;
  
}
.control input:checked ~ .control__indicator:after {
  display: block;
  color: #fff;
}
.control--checkbox .control__indicator:after {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -52%);
}
.control--checkbox input:disabled ~ .control__indicator:after {
  border-color: #7b7b7b;
  
}
.control--checkbox input:disabled:checked ~ .control__indicator {
  background-color: $primary;
  opacity: .2;
  border: 2px solid $primary;
}