@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200;300;400;500;600;700;800;900&display=swap');


body {
	font-family: 'Mulish', sans-serif;
}


.body-container-1{
	background-color:#F9F9F9;
}

.card {
  	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.w-48{
	width:48%!important;
}

.grey-border{
	border: 1px solid #e9e9e9;

}

.bg-white{
	background-color:white;
}

@media only screen and (max-width: 768px) {
  .my-w-25{
		width:50%;
	}
	
	
}

@media only screen and (min-width: 768px) {
  .my-w-25{
		width:25%;
	}
	
	.mytable{
	table-layout:fixed;
	}
	
}


.primary-button{
	font-size:20px;
	padding:8px 14px;
	border: 1px solid #FF8F00;
	border-radius:4px;
	background-color:#FF8F00;
	color:white;
	font-family: 'Mulish', sans-serif;
	text-decoration:none;
}

.primary-button:hover{
	background-color:#e78200;
	color:white;
}

.primary-button:focus{
	background-color:#dc7c00;
	color:white;
}





.button-icon{
	width:30px;
	height:30px;
}


.logo-button{
	padding:10px 4px;
	border: 1px solid #E9E9E9;
	border-radius: 2px;
	text-decoration:none;
}

.logo-button:hover{
	background-color: #E9E9E9;
}


.logo-button-text{
	font-size:20px;
	text-decoration:none;
	font-weight:700;
	font-family: 'Mulish', sans-serif;
	color:#656565;
}

.logo-button-text:hover{
	text-decoration:none;
	
}



/*text style*/

a{
	color:#A9A9A9;
	font-family: 'Mulish', sans-serif;
}

a:hover{
	color:#656565;
}

label{
	font-size:14px;
	font-family: 'Mulish', sans-serif;
	color:#656565;
	font-weight: 400;
}

.font-weight-7{
	font-weight:700;
}

p{
	font-size:16px;
	font-family: 'Mulish', sans-serif;
	color:#656565;
}

h6{
	font-size:24px;
	font-family: 'Mulish', sans-serif;
	font-weight:700;
	color:#424242;
}

h5{
	font-size:32px;
	font-family: 'Mulish', sans-serif;
	color:#424242;
}

h4{
	font-size:40px;
	font-family: 'Mulish', sans-serif;
	color:#424242;
}

h3{
	font-size:48px;
	font-family: 'Mulish', sans-serif;
	color:#424242;
}

h2{
	font-size:56px;
	font-family: 'Mulish', sans-serif;
	color:#424242;
}

h1{
	font-size:64px;
	font-weight:900;
	font-family: 'Mulish', sans-serif;
	color:#424242;
}

.inline-div{
	display:inline-block;
}

.inline-grid-div{
	display:inline-grid;
}

.block-div{
	display:block;
}

.errorlabel{
	color:#b00606;
	font-family: 'Mulish', sans-serif;
}

.text-ellipsis{
	text-overflow: ellipsis;
    overflow-y: hidden;
}

.p2-h{
	height:50px;
}



/*font size over */


input[type=text]{
	font-size:20px;
	padding:8px 4px;
	border: 1px solid #E9E9E9;
	border-radius:2px;
	font-family: 'Mulish', sans-serif;
	color:#656565;
}
input[type=search]{
	font-size:20px;
	padding:8px 4px;
	border: 1px solid #E9E9E9;
	border-radius:2px;
	font-family: 'Mulish', sans-serif;
	color:#656565;
}
input[type=password]{
	font-size:20px;
	padding:8px 4px;
	border: 1px solid #E9E9E9;
	border-radius:2px;
	font-family: 'Mulish', sans-serif;
	color:#656565;
}

input[type=email]{
	font-size:20px;
	padding:8px 4px;
	border: 1px solid #E9E9E9;
	border-radius:2px;
	font-family: 'Mulish', sans-serif;
	color:#656565;
}

input[type=submit]{
	font-size:20px;
	padding:8px 14px;
	border: 1px solid #FF8F00;
	border-radius:4px;
	background-color:#FF8F00;
	color:white;
	font-family: 'Mulish', sans-serif;
}

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




select{
	font-size:20px;
	padding:8px 4px;
	border: 1px solid #E9E9E9;
	border-radius:2px;
	font-family: 'Mulish', sans-serif;
	color:#656565;
}

/*
Onboarding page css
*/

.color-primary{
	color:#FF8F00;
}

.grey3{
	color:#656565;
}
.grey4{
	color:#424242;
}


/*
Table Action Button
*/

.table-action-button{
	border: 1px solid #FF8F00;
	border-radius:50px;
	color: #FF8F00;
	height:30px;
	width:30px;
	cursor: pointer;
}

.table-action-button:hover{
	background-color:#F0F0F0;
}

.table-action-button:focus{
	background-color:#F0F0F0;
}

.table-action-text-button{
	display:inline-block;
	border: 2px solid #FF8F00;
	border-radius:50px;
	color: #FF8F00;
	cursor: pointer;
	background-color:rgba(0,0,0,0);
}

.table-action-text-button:hover{
	background-color:#F3F3F3;
	color: #FF8F00;
}

.table-action-text-button:focus{
	background-color:#F0F0F0;
	color: #FF8F00;
}


.table-action-text-button-primary{
	display:inline-block;
	border: 1px solid #FF8F00;
	background-color:#FF8F00;
	border-radius:4px;
	color: #FFFFFF;
	cursor: pointer;
}

.table-action-text-button-primary:hover{
	background-color:#F38800;
	color:#ffffff;
}

.table-action-text-button-primary:focus{
	background-color:#E78100;
	color:#ffffff;
}


.table-action-text-button-grey{
	display:inline-block;
	border: 1px solid #656565;
	background-color:#E9E9E9;
	border-radius:4px;
	color: #656565;
	cursor: pointer;
}

.table-action-text-button-grey:hover{
	background-color:#d9d9d9;
	color:#656565;
}




.table-action-text-button-danger{
	display:inline-block;
	border: 2px solid #ff4d00;
	border-radius:50px;
	color: #ff4d00;
	cursor: pointer;
}

.table-action-text-button-danger:hover{
	background-color:#F3F3F3;
	color: #ff4d00;
}

.table-action-text-button-danger:focus{
	background-color:#F0F0F0;
	color: #ff4d00;
}




.table-select{
	font-size:12px;
	padding:8px 4px;
	border: 1px solid #E9E9E9;
	border-radius:2px;
	font-family: 'Mulish', sans-serif;
	color:#656565;
	
}

.one-line{
	text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
}

.two-line{
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}


thead{
	background-color:#ffffff;
	border:none;
}

.text-decoration-none{
	text-decoration:none;
}

.bg-white{
	background-color:white;
}



.text-right{
	text-align:right;
}

.text-left{
	text-align:left;
}

.progressbar{
	height:20px;
	width:100%;
	background-color:#f0f0f0;
	border-radius:2px;
}

.progressbar div{
	height:20px;
	background-color:#FF8F00;
	border-radius:2px;
}

.qtynumber{
	font-size:30px;
}


.qoutanumber{
	font-size:20px;
}


/*ToolTip*/

.hintbutton{
	color: #A9A9A9;
	cursor: pointer;
}

/*Tooltip ended*/

/*Add member dropdown*/

.addmembersoptions{
  position: absolute;
  right: 0px;
  top: 40px;
  background-color: #ffffff;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.06);
  z-index: 1;
}

.addmembersoptions a{
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.addmembersoptions a:hover {background-color: #f9f9f9!important;}

.round-corner{
	border-radius:1000px;
}



/*Add member dropdown*/


/*
breadcrumbs
*/

.breadcrumbs {
  border: 1px solid #cbd2d9;
  border-radius: 0.3rem;
  display: inline-flex;
  overflow: hidden;
}

.breadcrumbs__item {
  background: #fff;
  color: #333;
  outline: none;
  padding: 0.75em 0.75em 0.75em 1.25em;
  position: relative;
  text-decoration: none;
  transition: background 0.2s linear;
}

.breadcrumbs__item:hover:after,
.breadcrumbs__item:hover {
  background: #e9e9e9;
}

.breadcrumbs__item:focus:after,
.breadcrumbs__item:focus,
.breadcrumbs__item.is-active:focus {
  background: #e9e9e9;
}

.breadcrumbs__item:after,
.breadcrumbs__item:before {
  background: white;
  bottom: 0;
  clip-path: polygon(50% 50%, -50% -50%, 0 100%);
  content: "";
  left: 100%;
  position: absolute;
  top: 0;
  transition: background 0.2s linear;
  width: 1em;
  z-index: 1;
}

.breadcrumbs__item:before {
  background: #cbd2d9;
  margin-left: 1px;
}

.breadcrumbs__item:last-child {
  border-right: none;
}

.breadcrumbs__item.is-active {
  background: #e9e9e9;
}

/*
breadcrumbs ends
*/

.smallusernamediv{
   	padding: 4px;
    height: 25px;
    width: 25px;
    border-radius: 50px;
    text-align: center;
    color: white;
    font-weight: 600;
    font-size: 11px;
}



/*
OKR page starts
*/

.color-green{
	color:#2ECC71;
}

.color-red{
	color:#C70039;
}

.color-yellow{
	color:#FFC300;
}


.model-overlay{
	background-color: rgba(0,0,0,0.6);
    width: 100%;
	height:500%;
    position: absolute;
    top: 0px;
	left:0px;
    z-index: 1;
}

.model{
	width:75%;
}

.display-block {
	display:block;
}

.okr-model-title-input-height{
	line-height: 28px;
	height:66px;
	font-size: 24px;
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    color: #424242;
	border: 1px solid #E9E9E9;
}

.okr-model-description-input-height{
	height:60px;
	font-size: 16px;
    font-family: 'Mulish', sans-serif;
    font-weight: 400;
    color: #424242;
	border: 1px solid #E9E9E9;
}

.text-area-resize-disable{
	resize: none;
}

.key-results-container{
	height:300px;
	overflow-y:scroll;
}

.key-result-input{
	width:78%!important;
}

.key-result-action-div{
	width:18%!important;
}

.key-result-delete{
	font-size:16px;
}

.krbox{
	border:1px solid #F9F9F9;
	background-color: #F9F9F9;
}

.table-action-text-button-danger{
	display:inline-block;
	border: 2px solid #E73700;
	border-radius:50px;
	color: #E73700;
	cursor: pointer;
}

.table-action-text-button-danger:hover{
	background-color:#F3F3F3;
	color: #E73700;
}

.table-action-text-button-danger:focus{
	background-color:#F0F0F0;
	color: #E73700;
}



.my-custom-dropdown-container{
	position:absolute;
	z-index:10;
}

.w-170px{
	width:170px;
}

.okr-status-dropdown-item{
	background-color:#E9E9E9;
	cursor: pointer;
}

.okr-status-dropdown-item:hover{
	background-color:#E1E1E1;
}


.okr-status-dropdown-item-container{
	background-color:#F9F9F9;
}


.color-mppgreen{
	color:#4CAF50;
}

.bg-mppgreen{
	background-color:#4CAF50;
}

.color-mppred{
	color:#D32F2F;
}

.bg-mppred{
	background-color:#D32F2F;
}

.color-mppyelloworange{
	color:#FFA000;
}

.bg-mppyelloworange{
	background-color:#FFA000;
}

.color-mppblue{
	color:#03A9F4;
}

.bg-mppblue{
	background-color:#03A9F4;
}

.color-mppgrey{
	color:#A9A9A9;
}

.bg-mppbluegrey{
	background-color:#A9A9A9;
}

.okr-comment-container{
	height:300px;
	overflow-y:scroll;
}

.okr-delete-comment{
	text-decoration:underline;
	background-color:none;
	border:none;
	background:none;
}


.loader {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #3498db;
  width: 40px;
  height: 40px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.okr-card-div:hover{
	background-color:#ffffff;
}

.okr-card-div:hover{
	background-color:#F9F9F9;
}



/*
OKR page ends
*/


/* Quarterly/yearly toggle*/
.switch-button {
  background: #e9e9e9;
  border-radius: 30px;
  overflow: hidden;
  width: 240px;
  text-align: center;
  font-size: 18px;
  letter-spacing: 1px;
  color: #424242;
  position: relative;
  padding-right: 120px;
  position: relative;
}
.switch-button:before {
  content: "Yearly";
	font-size: 14px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
}
.switch-button-checkbox {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
}
.switch-button-checkbox:checked + .switch-button-label:before {
  transform: translateX(120px);
  transition: transform 300ms linear;
}
.switch-button-checkbox + .switch-button-label {
  position: relative;
  padding: 15px 0;
  display: block;
  user-select: none;
  pointer-events: none;
}
.switch-button-checkbox + .switch-button-label:before {
  content: "";
  background: #fff;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 30px;
  transform: translateX(0);
  transition: transform 300ms;
}
.switch-button-checkbox + .switch-button-label .switch-button-label-span {
  position: relative;
}

.w-70p{
	width:70px;
}

.w-120p{
	width:120px;
}

.w-49{
	width:49%;
}


/*rotation animation*/

.rotate-animate{
	position: absolute;
	-webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

.bigcheckbox{
	/* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  transform: scale(2);
}

.okrprogresscontainerbox{
	border-radius: 0.25rem;
    width: 100%;
    background-color: #F9F9F9;
    height: 5px;
}

.okrprogressbarbox{
    background-color: #FF8F00;
    height: 5px;
    border-radius: 0.25rem;
}




/*rotation animation*/



 

/* Quarterly/yearly toggle*/