/* PLACE YOU CUSTOM STYLES IN THIS FILE */
@import url('https://fonts.googleapis.com/css?family=Kanit&display=swap');
body{
	font-family: 'Kanit';
}

* {padding:0;margin:0;box-sizing:border-box;}
#video {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}
#video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.ion-icon {
	font-size: 34px; 
}
.files input {
    outline: 2px dashed #92b0b3;
    outline-offset: -10px;
    -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
    transition: outline-offset .15s ease-in-out, background-color .15s linear;
    padding: 120px 0px 85px 35%;
    text-align: center !important;
    margin: 0;
    width: 100% !important;
}
.files input:focus{     outline: 2px dashed #92b0b3;  outline-offset: -10px;
    -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
    transition: outline-offset .15s ease-in-out, background-color .15s linear; border:1px solid #92b0b3;
 }
.files{ position:relative}
.files:after {  pointer-events: none;
    position: absolute;
    top: 60px;
    left: 0;
    width: 50px;
    right: 0;
    height: 56px;
    content: "";
    background-image: url(https://image.flaticon.com/icons/png/128/109/109612.png);
    display: block;
    margin: 0 auto;
    background-size: 100%;
    background-repeat: no-repeat;
}
.color input{ background-color:#f1f1f1;}
.files:before {
    position: absolute;
    bottom: 10px;
    left: 0;  pointer-events: none;
    width: 100%;
    right: 0;
    height: 57px;
    content: " or drag it here. ";
    display: block;
    margin: 0 auto;
    color: #2ea591;
    font-weight: 600;
    text-transform: capitalize;
    text-align: center;
}
/* body{ */
    /* background: -webkit-linear-gradient(left, #3931af, #00c6ff); */
/* } */
.emp-profile{
    padding: 3%;
    margin-top: 3%;
    margin-bottom: 3%;
    border-radius: 0.5rem;
    background: #fff;
}
.profile-img{
    text-align: center;
	
}
.profile-img img{
    width: 200px;
    height: 200px;
	 border-radius: 12px;
}
.profile-img2{
    text-align: center;
	
}
.profile-img2 img{
    width: 150px;
    height: 150px;
	border:5px solid #0e0f14;
	background: #0e0f14;
	 border-radius: 12px;
}
/* .profile-img .file { */
    /* position: relative; */
    /* overflow: hidden; */
    /* margin-top: -20%; */
    /* width: 70%; */
    /* border: none; */
    /* border-radius: 0; */
    /* font-size: 15px; */
    /* background: #212529b8; */
/* } */
.file input {
    position: absolute;
    opacity: 0;
    right: 0;
    top: 0;
	background: #a0a0a0b8;

}
.profile-head h5{
    color: #333;
}
.profile-head h6{
    color: #0062cc;
}
.profile-edit-btn{
    border: none;
    border-radius: 1.5rem;
    width: 70%;
    padding: 2%;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
}
.proile-rating{
    font-size: 12px;
    color: #818182;
    margin-top: 5%;
}
.proile-rating span{
    color: #495057;
    font-size: 15px;
    font-weight: 600;
}
.profile-head .nav-tabs{
    margin-bottom:5%;
}
.profile-head .nav-tabs .nav-link{
    font-weight:600;
    border: none;
}
.profile-head .nav-tabs .nav-link.active{
    border: none;
    border-bottom:2px solid #0062cc;
}
.profile-work{
    padding: 14%;
    margin-top: -15%;
}
.profile-work p{
    font-size: 12px;
    color: #818182;
    font-weight: 600;
    margin-top: 10%;
}
.profile-work a{
    text-decoration: none;
    color: #495057;
    font-weight: 600;
    font-size: 14px;
}
.profile-work ul{
    list-style: none;
}
.profile-tab label{
    font-weight: 600;
}
.profile-tab p{
    font-weight: 600;
    color: #0062cc;
}

input[type=text], select  {
  width: 100%;
  padding: 12px 20px;
  background-color: #0e0f14;
  margin: 5px 0;
  display: inline-block;
  border: 1px solid #2b2f37;
  border-radius: 12px;
  box-sizing: border-box;
  color: #fff;
}
input[type=file], select  {
  width: 100%;
  padding: 12px 20px;
  background-color: #0e0f14;
  margin: 5px 0;
  display: inline-block;
  border: 1px solid #2b2f37;
  border-radius: 12px;
  box-sizing: border-box;
  color: #fff;
}
input[type=password], select {
  width: 100%;
  padding: 12px 20px;
  background-color: #0e0f14;
  margin: 5px 0;
  display: inline-block;
  border: 1px solid #2b2f37;
  border-radius: 12px;
  box-sizing: border-box;
  color: #fff;
}
input[type=email], select {
  width: 100%;
  padding: 12px 20px;
  background-color: #0e0f14;
  margin: 5px 0;
  display: inline-block;
  border: 1px solid #2b2f37;
  border-radius: 12px;
  box-sizing: border-box;
  color: #fff;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

a#ccbtn2 {
   	background: linear-gradient(to right, #0bbf35, #0bff35) !important;
	margin :8px 0;
}
button#ccbtn2 {
   	background: linear-gradient(to right, #0bbf35, #0bff35) !important;
	margin :8px 0;
}
button#ccbtn3 {
   	background: linear-gradient(to right, #93291E, #ED213A) !important;
	margin :8px 0;
}
.ccbtn2 {
   	background: linear-gradient(to right, #0bbf35, #0bff35) !important;
	margin :8px 0;
}
.ccbtn3 {
   	background: linear-gradient(to right, #f37335, #fdc830) !important;
	margin :8px 0;
}
.ccbtn4 {
    background: linear-gradient(to right, #ff4e00, #ff6929) !important;
 margin :8px 0;
}
.ccbtn5 {
    background: linear-gradient(to right, #e2b206, #fed130) !important;
 margin :8px 0;
}
.ccbtn1 {
   	background: linear-gradient(to right, #93291E, #ED213A) !important;
	margin :8px 0;
}

.btn1 {
   	background: #00bdff;
	margin :8px 0;
}
.btn2 {
   	background: #10D300;
	margin :8px 0;
}
a#ccbtn2:hover {
    background-color:rgba(101, 224, 255, 0.685);color:#ffffff;
  
}
button#ccbtn2:hover {
    background-color:rgba(101, 224, 255, 0.685);color:#ffffff;
  
}button#ccbtn3:hover {
    background-color:rgba(101, 224, 255, 0.685);color:#ffffff;
  
}
div.invite-team {
  width: 100%;
  background: #1b1d29 !important;
  color: white;
  padding: 20px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}
div.invite-team2 {
  width: 100%;
  background: #272a33;
  color: white;
  padding: 20px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}
div.invite-team:hover {
  width: 100%;
  background: linear-gradient(to right, #1988fb, #18eaff) !important;
  color: white;
  padding: 20px 20px;
  margin: 15px 0;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}
.modal-content {
  width: 100%;
  background: #1b1e28;
  color: white;
  padding: 20px 20px;
  margin: 15px 0;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}
.avatar {
  vertical-align: middle;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right:30px
}

.avatar-match {
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 20px;
  }

.fileContainer {
    overflow: hidden;
    position: relative;
}

.fileContainer [type=file] {
    cursor: inherit;
    display: block;
    font-size: 999px;
    filter: alpha(opacity=0);
    min-height: 100%;
    min-width: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
}
.tab-pane {
   	background: #2b2f37;
}
.tabbutton.active, .tabbutton.active:focus, .tabbutton.active:hover {
    border-top: 5px solid #ff4e00;
	color:#ff4e00;
	background: #2b2f37;
	
}


@media only screen and (max-width: 600px) {
    .tabbutton {
         
        width: 350px;
        height: 55px;
        
    }
  }

.status-1{
      background-color: #ff4e00;
}
  .status-2{
    background-color: #ff9465;
}
.status-3{
    background-color: #2b2f37;
}

.media-meta h3{
    margin-top: 25px;
}
.sweet-alert h2{
    color : #4d4d4d;
}

.nav {
      flex-wrap: nowrap;
    }
@media only screen and (max-width: 1200px) {
    .nav {
      flex-wrap: wrap;
    }
  }