:root {
	
    --darkest-color1:#CC7200;
	--dark-color1:#EC8400;
	--primary-color1:#FF8F00;
	--light-color1:#FF9309;
	--lighter-color1:#FFA733;
	--lightest-color1:#FFC067;
	--color1-hue:#FFD6A2;
	--color1-heuest:#FFF8EF;
	
	--darkest-black:#000000;
	--dark-black:#101010;
	--primary-black:#1E1E1E;
	--light-black:#363636;
	--lighter-black:#676767;
	--lightest-black:#9F9F9F;
	--black-hue:#E4E4E4;
	--black-huest:#F2F2F2;
	
	
	--darkest-red:#910909;
	--dark-red:#B40909;
	--primary-red:#CA0A0A;
	--light-red:#EB1B1B;
	--lighter-red:#F95757;
	--lightest-red:#FF9898;
	--red-hue:#FFE8E8;
	--red-huest:#FFF7F7;
		
}

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

.bg-dark-black {
	background-color:var(--dark-black);
}

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


.body-container-1{
	background-color:var(--blue-huest);
}

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

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

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

.grey-border{
	border: 1px solid var(--black-hue);

}


.light-black-border{
	border: 1px solid var(--light-black);

}


.color-white{
	color:white;
}

.color-black-hue {
	color:var(--black-hue);
}

.color-lightest-black {
	color:var(--lightest-black);
}

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

.courseindex > .listitem{
	background-color:var(--dark-black);
	cursor: pointer;
}

.courseindex > .listitem:hover{
	background-color:var(--darkest-black);
	
}



.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

.full-screen-height{
	height:100%;
	overflow-y:scroll;
}



.position-absolute{
	position:absolute;
}



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


.full-screen-height{
	height:100%;
	overflow-y:scroll;
}

.bg-color1-hue{
background-color:var(--color1-hue);
}


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

.quizbutton{
 background-color: var(--black-huest)!important;

}



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

.primary-button:hover{
	border: 1px solid var(--dark-color1);
	background-color:var(--dark-color1);
	color:white;
}

.primary-button:focus{
	border: 1px solid var(--dark-color1);
	background-color:var(--light-color1);
	color:white;
}

.primary-outline-button{
	background-color:rgba(0,0,0,0);
	font-size:20px;
	padding:8px 14px;
	border: 1px solid var(--primary-color1);
	border-radius:4px;
	color:var(--primary-color1);
	font-family: 'Mulish', sans-serif;
	text-decoration:none;
}

.primary-outline-button:hover{
	border: 1px solid var(--dark-color1);
	color:var(--dark-color1);

}

.primary-outline-button:focus{
	border: 1px solid var(--dark-color1);
	color:var(--light-color1);
}




.primary-outline-button-table{
	background-color:rgba(0,0,0,0);
	font-size:16px;
	padding:2px 10px;
	border: 1px solid var(--primary-color1);
	border-radius:10px;
	color:var(--primary-color1);
	font-family: 'Mulish', sans-serif;
	text-decoration:none;
	cursor: pointer;
}

.primary-outline-button-table:hover{
	border: 1px solid var(--dark-color1);
	color:var(--dark-color1);

}

.primary-outline-button-table:focus{
	border: 1px solid var(--dark-color1);
	color:var(--light-color1);
}



.delete-link-button{
	color:var(--lightest-black);
	text-decoration:underline;
	cursor: pointer;
}

.delete-link-button:hover{
	color:var(--light-black);

}

.delete-link-button:focus{
	color:var(--light-black);
}





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


.logo-button{
	padding:10px 4px;
	border: 1px solid var(--black-hue);
	border-radius: 2px;
	text-decoration:none;
}

.logo-button:hover{
	background-color: var(--black-huest);
}


.logo-button-text{
	margin-left:10px;
	font-size:16px;
	text-decoration:none;
	font-weight:700;
	font-family: 'Mulish', sans-serif;
	color:var(--darker-black);
}

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



/*text style*/

a{
	color:var(--light-black);
	font-family: 'Mulish', sans-serif;
}

a:hover{
	color:var(--dark-black);
}

label{
	font-size:14px;
	font-family: 'Mulish', sans-serif;
	color:var(--lighter-black);
	font-weight: 400;
}

.input-label{
	color:var(--lighter-black);
}

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

.font-weight-6{
	font-weight:600;
}

.font-weight-5{
	font-weight:500;
}

.font-weight-4{
	font-weight:400;
}

p{
	font-size:16px;
	font-family: 'Mulish', sans-serif;
	color:var(--dark-black);
}

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

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

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

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

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

h1{
	font-size:36px;
	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;
}


.bluelabel{
	color:var(--primary-color1);
	font-family: 'Mulish', sans-serif;
}

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

.p2-h{
	height:50px;
}

.color-primary-1{
	color:var(--primary-color1);
}



/*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=date]{
	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 var(--primary-color1);
	border-radius:4px;
	background-color:var(--primary-color1);
	color:white;
	font-family: 'Mulish', sans-serif;
}

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



input[type=submit]:hover{
	background-color:var(--dark-color1);
}

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




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:var(--primary-color1);
}

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


/*
Table Action Button
*/

.hue-button{
	border: 1px solid var(--color1-huest);
	background-color:var(--color1-huest);
	cursor: pointer;
}

.hue-button:hover{
	border: 1px solid var(--color1-hue);
	background-color:var(--color1-hue);
	cursor: pointer;
}


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

.table-action-button:hover{
	background-color:var(--dark-color1);
}

.table-action-button:focus{
	background-color:var(--dark-color1);
}

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

.table-action-text-button:hover{
	background-color:#F3F3F3;
	color: var(--primary-color1);
}

.table-action-text-button:focus{
	background-color:#F0F0F0;
	color: var(--primary-color1);
}


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

.table-action-text-button-primary:hover{
	background-color:var(--dark-color1);
	color:#ffffff;
}

.table-action-text-button-primary:focus{
	background-color:var(--dark-color1);
	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;
}

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


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



.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!important;
}

.text-underline{
	text-decoration:underline!important;
}

.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;
}

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



/*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!important;
}

.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 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: "Monthly";
	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*/



 

/* Checkbox*/

.checkboxcontainer {
  height:30px;
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkboxcontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 5px;
  left: 0;
  height: 27px;
  width: 27px;
  background-color: #e9e9e9;
  border:5px solid var(--primary-color1);
}

/* On mouse-over, add a grey background color */
.checkboxcontainer:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkboxcontainer input:checked ~ .checkmark {
  background-color: var(--primary-color1);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkboxcontainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkboxcontainer .checkmark:after {
  left: 4px;
  top: 0px;
  width: 8px;
  height: 16px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*<label class="checkboxcontainer"><input onChange=""type="checkbox"><span class="checkmark"></span></label>
						*/


/* quiz page */

.quizbutton{
 background-color: var(--black-huest)!important;
	color:var(--dark-black)!important;
	border: 1px solid var(--dark-black)!important;
}

.quizbutton:hover{
 background-color: var(--black-hue)!important;
}


.quizbuttonactive{
 background-color: var(--primary-color1)!important;
	color:white!important;
	border: 1px solid var(--primary-color1)!important;
}

.quizbuttonred{
 background-color: var(--primary-red)!important;
	color:white!important;
	border: 1px solid var(--primary-red)!important;
}

.collapsebutton, collapsebutton>div>div>h3{
	cursor:pointer;
}

.collapsebutton.active{
	background-color: var(--black-hue)!important;
}

.collapsebutton{
	background-color: white;
	border: 1px solid var(--black-hue)!important;
}

.collapsebutton:hover{
	background-color: var(--black-hue)!important;
}


.collapsiblecontent{
	border: 1px solid #d3d3d3;
	padding: 20px 10px 40px 10px;
    margin-bottom: 40px;
    background-color: var(--black-hue)!important;;
}

.resumecontainer{
	width:100%; 
	overflow-x:scroll
}

.a4-width{
	width:210mm;
}


.delete-text-button {
	color:#9F9F9F;
	cursor:pointer;
}

.delete-text-button:hover {
	color:#676767;
	text-decoration:underline;
}

.jobtrackerform{

	background-color:#eeeeee; 
	border: 1px solid #d2d2d2;

}


.height70{
	height:70vh!important;
}


/* quiz page */



/* Style for the dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-btn {
	background-color: rgba(0,0,0,0);
    color: var("--light-black");
    padding: 8px 16px;
    border: none;
    cursor: pointer;
	border-radius:10px;
}

.dropdown-btn:hover {
	background-color: rgba(0,0,0,0.1);
}

.table-dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    min-width: 180px;
    border-radius: 4px;
}

.table-dropdown-content a {
    color: black;
    padding: 10px 16px;
    text-decoration: none;
    display: block;
}

.table-dropdown-content a:hover {
    background-color: #f1f1f1;
}

/* Show the dropdown content when active */
.dropdown.active .table-dropdown-content {
    display: block;
}


.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
   background-color: var(--black-huest); 
 }



.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); }
}



.generate-button{
	background-image: linear-gradient(to right, #ff8f00 0%, #b83ff4  100%);
	border: 1px solid var(--primary-color1);
	margin-top:20px;
	padding: 2px 10px;
	border-radius: 10px;
	color: white;
	width:fit-content;
	cursor:pointer;
	text-align: center;
	box-shadow: 0 0 20px #eee;
}

.generate-button:hover {
	background-image: linear-gradient(to right, #b83ff4 0%, #ff8f00  100%);
}
    

.h-420{
	height:420px;
}

.pricespan{
	font-size:36px;
	font-weight:900;
}

.pricedetailspan{
	font-size:12px;
	font-weight:400;
}

.normalpricingbox{
	
	border: 1px solid #d3d3d3; 
	border-radius:10px; 
	background-color:white;
	
}


.specialpricingbox{
	
	border: 1px solid var(--primary-color1); 
	border-radius:10px; 
	background-color:white;
	
}

#myresumereview h2 {
	font-size:14px;
}

#myresumereview h3 {
	font-size:12px;
}

#myresumereview p {
	font-size:10px;
}

#myresumereview li {
	font-size:10px;
}

.user-message{
	color:white; 
	background-color:var(--primary-color1); 
	border-radius:20px 20px 0px 20px
}

.ai-message{
	color:var(--dark-black); 
	background-color:var(--black-huest); 
	border-radius:20px 20px 20px 0px
}



.ai-message-buttons{
	display:inline-block;
	background-color:rgba(0,0,0,0);
	font-size:16px;
	padding:2px 10px;
	border: 1px solid var(--primary-color1);
	border-radius:10px;
	color:var(--primary-color1);
	font-family: 'Mulish', sans-serif;
	text-decoration:none;
	cursor: pointer;
}

.ai-message-buttons{
	border: 1px solid var(--dark-color1);
	color:var(--dark-color1);

}

.ai-message-buttons{
	border: 1px solid var(--dark-color1);
	color:var(--light-color1);
}