/* montserrat-100 - latin */

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 100;
	src: url('/fonts/montserrat-v14-latin-100.eot');
	/* IE9 Compat Modes */
	src: local('Montserrat Thin'), local('Montserrat-Thin'), url('/fonts/montserrat-v14-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('/fonts/montserrat-v14-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
	url('/fonts/montserrat-v14-latin-100.woff') format('woff'), /* Modern Browsers */
	url('/fonts/montserrat-v14-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
	url('/fonts/montserrat-v14-latin-100.svg#Montserrat') format('svg');
	/* Legacy iOS */
}


/* montserrat-200 - latin */

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 200;
	src: url('/fonts/montserrat-v14-latin-200.eot');
	/* IE9 Compat Modes */
	src: local('Montserrat ExtraLight'), local('Montserrat-ExtraLight'), url('/fonts/montserrat-v14-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('/fonts/montserrat-v14-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
	url('/fonts/montserrat-v14-latin-200.woff') format('woff'), /* Modern Browsers */
	url('/fonts/montserrat-v14-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
	url('/fonts/montserrat-v14-latin-200.svg#Montserrat') format('svg');
	/* Legacy iOS */
}


/* montserrat-300 - latin */

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 300;
	src: url('/fonts/montserrat-v14-latin-300.eot');
	/* IE9 Compat Modes */
	src: local('Montserrat Light'), local('Montserrat-Light'), url('/fonts/montserrat-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('/fonts/montserrat-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
	url('/fonts/montserrat-v14-latin-300.woff') format('woff'), /* Modern Browsers */
	url('/fonts/montserrat-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
	url('/fonts/montserrat-v14-latin-300.svg#Montserrat') format('svg');
	/* Legacy iOS */
}


/* montserrat-regular - latin */

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: url('/fonts/montserrat-v14-latin-regular.eot');
	/* IE9 Compat Modes */
	src: local('Montserrat Regular'), local('Montserrat-Regular'), url('/fonts/montserrat-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('/fonts/montserrat-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
	url('/fonts/montserrat-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
	url('/fonts/montserrat-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
	url('/fonts/montserrat-v14-latin-regular.svg#Montserrat') format('svg');
	/* Legacy iOS */
}


/* montserrat-500 - latin */

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 500;
	src: url('/fonts/montserrat-v14-latin-500.eot');
	/* IE9 Compat Modes */
	src: local('Montserrat Medium'), local('Montserrat-Medium'), url('/fonts/montserrat-v14-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('/fonts/montserrat-v14-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
	url('/fonts/montserrat-v14-latin-500.woff') format('woff'), /* Modern Browsers */
	url('/fonts/montserrat-v14-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
	url('/fonts/montserrat-v14-latin-500.svg#Montserrat') format('svg');
	/* Legacy iOS */
}


/* montserrat-600 - latin */

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	src: url('/fonts/montserrat-v14-latin-600.eot');
	/* IE9 Compat Modes */
	src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url('/fonts/montserrat-v14-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('/fonts/montserrat-v14-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
	url('/fonts/montserrat-v14-latin-600.woff') format('woff'), /* Modern Browsers */
	url('/fonts/montserrat-v14-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
	url('/fonts/montserrat-v14-latin-600.svg#Montserrat') format('svg');
	/* Legacy iOS */
}


/* montserrat-700 - latin */

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	src: url('/fonts/montserrat-v14-latin-700.eot');
	/* IE9 Compat Modes */
	src: local('Montserrat Bold'), local('Montserrat-Bold'), url('/fonts/montserrat-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('/fonts/montserrat-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
	url('/fonts/montserrat-v14-latin-700.woff') format('woff'), /* Modern Browsers */
	url('/fonts/montserrat-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
	url('/fonts/montserrat-v14-latin-700.svg#Montserrat') format('svg');
	/* Legacy iOS */
}


/* montserrat-800 - latin */

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 800;
	src: url('/fonts/montserrat-v14-latin-800.eot');
	/* IE9 Compat Modes */
	src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'), url('/fonts/montserrat-v14-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('/fonts/montserrat-v14-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
	url('/fonts/montserrat-v14-latin-800.woff') format('woff'), /* Modern Browsers */
	url('/fonts/montserrat-v14-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
	url('/fonts/montserrat-v14-latin-800.svg#Montserrat') format('svg');
	/* Legacy iOS */
}


/* montserrat-900 - latin */

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 900;
	src: url('/fonts/montserrat-v14-latin-900.eot');
	/* IE9 Compat Modes */
	src: local('Montserrat Black'), local('Montserrat-Black'), url('/fonts/montserrat-v14-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('/fonts/montserrat-v14-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
	url('/fonts/montserrat-v14-latin-900.woff') format('woff'), /* Modern Browsers */
	url('/fonts/montserrat-v14-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
	url('/fonts/montserrat-v14-latin-900.svg#Montserrat') format('svg');
	/* Legacy iOS */
}
/* Main */

html {
	direction: ltr;
	scroll-behavior: smooth;
	min-height: 100vh;
}

body {
	margin: 0;
	font-family: Montserrat !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100vh;
	height: 100%;
}

#root {
	min-height: 100vh;
	height: 100%;
	position: relative;
}

.app {
	min-height: 100vh;
	height: 100%;
}

.content {
	min-height: calc(100vh - 100px);
	height: auto;
	padding: 90px 40px 15px 40px;
	box-sizing: border-box;
	/** add this **/
	-moz-box-sizing: border-box;
	/** add this **/
	-webkit-box-sizing: border-box;
	/** add this **/
	-ms-box-sizing: border-box;
	/** add this **/
}

.mobile-content {
	padding: 90px 15px 15px 15px;
	min-height: calc(100vh - 170px);
	height: auto;
	margin-bottom: 90px;
	/* Menu */
	box-sizing: border-box;
	/** add this **/
	-moz-box-sizing: border-box;
	/** add this **/
	-webkit-box-sizing: border-box;
	/** add this **/
	-ms-box-sizing: border-box;
	/** add this **/
}

.block {
	display: block !important;
}

::-webkit-input-placeholder {
	/* Edge */
	font-family: Montserrat;
	font-style: normal;
	font-weight: 500;
	font-size: 12px;
	line-height: 20px;
	/* identical to box height, or 167% */
	display: flex;
	align-items: center;
	/* gray/60 */
	color: #939097;
}

:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	font-family: Montserrat;
	font-style: normal;
	font-weight: 500;
	font-size: 12px;
	line-height: 20px;
	/* identical to box height, or 167% */
	display: flex;
	align-items: center;
	/* gray/60 */
	color: #939097;
}

::placeholder {
	font-family: Montserrat;
	font-style: normal;
	font-weight: 500;
	font-size: 12px;
	line-height: 20px;
	display: flex;
	align-items: center;
	color: #939097;
}

.custom-label {
	font-weight: 500;
	font-size: 16px;
	line-height: 28px;
	color: #414042;
}

.custom-input {
	background: #FAFAFB;
	border: 1px solid #E6E4E8;
	box-sizing: border-box;
	border-radius: 4px;
	padding: 8px 20px;
	font-family: Montserrat;
	font-style: normal;
	font-weight: 500;
	font-size: 12px;
	color: #414042;
}

.custom-select {
	background: #FAFAFB;
	border: 1px solid #E6E4E8;
	box-sizing: border-box;
	border-radius: 4px;
}

.error-input {
	border: 1px solid #f44336 !important;
}

.success-input {
	border: 1px solid #25b945 !important;
}

.error-input-message {
	font-weight: 300;
	font-size: 15px;
	color: #F44336;
}

.success-input-message {
	font-weight: 300;
	font-size: 15px;
	color: #25b945
}

.custom-btn {
	background: #22C9C7;
	border-radius: 8px;
	font-style: normal;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
	color: #FCFCFC;
	padding: 14px 20px;
	border: none;
	width: 100%;
}

.nowrap-nav {
	flex-wrap: nowrap !important;
	font-size: 11px;
}

.nav-header .nav-link.active {
	background: #22C9C7 !important;
	color: white !important;
	border: none !important;
}

.nav-header .nav-link:not(.active) {
	color: #7D7C7F !important;
	border: none !important;
}

.navbar-toggler .line {
	width: 20px;
	display: block;
	height: 2px;
	background-color: #CFCDD1 !important;
	margin-bottom: 5px;
	border-radius: 8px;
}

.main-page {
	width: 100%;
	height: 570px;
	background-repeat: no-repeat, repeat;
	background-size: contain;
	background-color: #FFFFFF;
	background-position: right;
}

.nav-step {
	margin-top: 30px !important;
	background: #F5F4F6 !important;
}

.nav-step .nav-step-link:not(:last-child) {
	margin-right: 25px;
}

.nav-step .nav-step-link:not(.done) {
	background: #F5F4F6 !important;
}

.nav-step .nav-step-link {
	background: #9AD7D6 !important;
	border-radius: 8px !important;
	border-color: none;
}

.modal-opaque {
	opacity: 1 !important;
}

.modal-backdrop {
	background: #22C9C7 !important;
	opacity: .7 !important;
}

.modal-header {
	border: none !important;
}

.modal-header button {
	color: #CFCDD1 !important;
}

.modal-content {
	border: none;
	border-radius: 12px;
}

.modal-body {
	height: 150px;
	text-align: center;
	padding-top: 0 !important;
}

.modal-body .text-header {
	font-weight: 600;
	font-size: 32px;
	line-height: 40px;
	text-align: center;
	color: #414042;
	margin-bottom: 10px !important;
}

.modal-body .text-sub-header {
	font-weight: 500;
	font-size: 18px;
	line-height: 28px;
	text-align: center;
	color: #414042;
}

.modal-body .ok {
	width: 110px;
	background: #22C9C7;
	border-radius: 8px;
	display: block;
	text-align: center;
	margin: 0 auto;
	text-decoration: none !important;
	color: white !important;
	padding: 5px;
	cursor: pointer;
}

.module-header-div{
	display: flex;
	flex-wrap : wrap;
}

.module-header {
	font-style: normal;
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 52px;
	color: #414042;
	text-align: left;
}

.version {
	font-size: 12px;
	font-weight: 300;
	color: #e0e0e0;
	position: absolute;
	bottom: 0;
	left: 25px;
}


/* 
  * BUTTONS 
  */

.bg-22C9C7 {
	background: #22C9C7;
	color: white;
}

.bg-F5F4F6 {
	background: #F5F4F6;
}


/*
  * TEXT
  */

.color-22C9C7 {
	color: #22C9C7;
}

.color-464646 {
	color: #464646;
}

.color-414042 {
	color: #414042;
}

.spinner-modal {
	z-index: 1250 !important;
}


/* SPINNER */

.spinner-modal .modal-content {
	background: none;
	border: none;
}

.checkbox-container {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 16px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


/* Hide the browser's default checkbox */

.checkbox-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}


/* Create a custom checkbox */

.checkmark {
	position: absolute;
	top: 3px;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: #fff;
	border: 1px solid #9E9E9E;
	box-sizing: border-box;
	border-radius: 4px;
}


/* When the checkbox is checked, add a blue background */

.checkbox-container input:checked~.checkmark {
	background: #22C9C7;
	border-radius: 4px;
	border: none;
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}


/* Show the checkmark when checked */

.checkbox-container input:checked~.checkmark:after {
	display: block;
}


/* Style the checkmark/indicator */

.checkbox-container .checkmark:after {
	left: 7px;
	top: 4px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.custom-progress {
	background: #E6E4E8;
}

.custom-progress-bar {
	background: #D4236D;
	border-radius: 9px !important;
	height: 10px;
}

.custom-progress-bar-safe {
	background: #22C9C7 !important;
}

.custom-progress-bar-danger {
	background: #FF6666 !important;
}


/* SPINNER MODAL */

.modal-open {
	padding: 0 !important;
}

.modal-open-override {
	overflow: auto !important;
	padding-right: 0 !important;
}

.spinner-modal {
	z-index: 1500 !important;
}

.spinner-modal .modal-content {
	background: transparent !important;
	border: none !important;
}

.custom-spinner-border {
	color: #22c9c7 !important;
	position: absolute;
	top: 50%;
	left: 45%;
}

.custom-get-more-spinner {
	display: block !important;
	margin: 0 auto !important;
	color: #22c9c7 !important;
}

/* CUSTOM DIVS */

.div-holder {
	height: 100%;
}


/* CUSTOM MODAL */

.custom-modal-header {
	padding: 0 !important;
}

.modal-header .close {
	padding: 0 1rem !important;
}

.close-modal-btn {
	font-size: 70px;
	font-weight: 300;
}

.btn-option {
	border-radius: 4px !important;
	background: transparent !important;
	color: #22c9c7 !important;
	font-size: 12px;
}

.btn-option:focus {
	background: #22c9c7 !important;
	color: #ffffff !important;
	box-shadow: none !important;
}

.custom-dropdown-item {
	color: #7D7C7F !important;
	font-weight: 500;
	font-size: 12px;
	line-height: 20px;
	text-decoration: none !important;
}

.custom-dropdown-item:focus {
	background: transparent !important;
	border: none !important;
	outline: none !important;
}

.custom-dropdown-right {
	top: 5px !important;
}

.message-modal .modal-body {
	height: auto !important;
	border: none;
}

.message-modal .modal-dialog {
	max-width: 650px;
}

.message-modal .modal-content {
	border: none;
	padding: 1.75rem 1.75rem 3rem 3rem !important;
}

.task-inprogress-modal .modal-body {
	height: auto !important;
	border: none;
}

.task-inprogress-modal .modal-dialog {
	max-width: 650px;
	z-index: 1050;
}

.task-inprogress-modal .modal-content {
	border: none;
	padding: 1.75rem 1.75rem 3rem 3rem !important;
}

.task-for-review-modal .modal-body {
	height: auto !important;
	border: none;
	text-align: left;
}

.task-for-review-modal .modal-dialog {
	max-width: 650px;
	z-index: 1050;
}

.task-for-review-modal .modal-content {
	border: none;
	padding: 1.75rem 1.75rem 3rem 3rem !important;
}

.nowrap-nav {
	flex-wrap: nowrap !important;
	font-size: 11px;
}


/* CUSTOM SCROLLBAR */

 ::-webkit-scrollbar {
	height: 5px;
	width: 5px;
}


/* Track */

 ::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	-webkit-border-radius: 10px;
	border-radius: 10px;
}


/* Handle */

 ::-webkit-scrollbar-thumb {
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: #22c9c7;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

 ::-webkit-scrollbar-thumb:window-inactive {
	background: #22c9c7;
}

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

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

.navbar-logo{
    height: 100%;
}

.navbar{
    width: 100%;
    height: 76px;
    background: #FFFFFF;
    /* Menu */
    box-shadow: 0px 4px 20px rgba(43, 43, 43, 0.08);
    box-sizing:border-box;  /** add this **/
    -moz-box-sizing:border-box; /** add this **/
    -webkit-box-sizing:border-box; /** add this **/
    -ms-box-sizing:border-box; /** add this **/
}

#navbarNav{
    background : #ffffff !important;
}

.navbar-toggler .line{
    width: 20px;
    display: block;
    height: 2px;
    background-color: #f7f7f7;
    margin-bottom: 5px;

}

.active-link{
    border-bottom: 2px solid #22C9C7;
}

.header-nav-item{
    margin-right: 30px;
}

.header-nav-item:last-of-type{
    margin-right : 0;
}

.header-nav-link{
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #414042 !important;
}

.btn-login{
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    /* or 114% */

    display: flex;
    align-items: center;
    text-align: center;
    text-transform: uppercase;

    /* green/50 */

    color: #22C9C7 !important;
    border: 2px solid #22C9C7;
    box-sizing: border-box;
    border-radius: 8px;
}

.btn-create-task-nav{

    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    text-transform: uppercase;
    color: #FCFCFC !important;
    background: #22C9C7 !important;
    border-radius: 8px;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.btn-signup{

    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    /* or 114% */

    display: flex;
    align-items: center;
    text-align: center;
    text-transform: uppercase;

    /* gray/10 */

    color: #FCFCFC !important;
    /* green/50 */

    background: #22C9C7 !important;
    border-radius: 8px;
}

.avatar{
    width: 36px;
    height: 36px;
    border-radius: 100%;
}

.custom-dropdown-menu{
    left: -125px !important;
    top: 115% !important;
    box-shadow: 8px 8px 32px rgba(0, 0, 0, 0.08);
}

.custom-dropdown-menu li{
    margin-left: 10px;
    padding: 5px;
}

.custom-dropdown-menu li.divider{
    border-top: 1px solid #7D7C7F;
    margin-right: 10px;
}

.custom-dropdown-menu li a{
    color: #7D7C7F !important;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    text-decoration: none !important;
}

.assigned-task-count{
    color: #FFFFFF;
    background : #22C9C7;
    border-radius: 100%;
    padding: 5px 10px;
    font-size: 11px;
    margin-left: 8px;
    font-weight: bold;
}



.navbar-toggler {
    border: none;
    background: transparent !important;
}
.navbar-toggler:hover {
    background: transparent !important;
}
.navbar-toggler .line {
    width: 25px;
    transition: all 0.2s;
}
.navbar-toggler .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
}
.navbar-toggler .middle-bar {
    opacity: 0;
}
.navbar-toggler .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
}
.navbar-toggler.collapsed .top-bar {
    transform: rotate(0);
}
.navbar-toggler.collapsed .middle-bar {
    opacity: 1;
}
.navbar-toggler.collapsed .bottom-bar {
    transform: rotate(0);
}


.navbar-collapse.collapsing{
    margin-right : -40px;
    margin-left: -40px;
    min-height : 100vh;
    padding: 40px;
}

.navbar-collapse.collapsing>ul.navbar-nav li{
    padding: 15px 0;
}

.navbar-collapse.collapsing>ul.navbar-nav li:not(:last-child){
    border-bottom: 0.5px solid  #e7e7e7;
}

.navbar-collapse.collapsing>ul.navbar-nav li a{
    font-weight: 300;
    color: #414042;
}

.navbar-collapse.show{
    margin-right : -40px;
    margin-left: -40px;
    min-height : 100vh;
    padding: 40px;
}

.navbar-collapse.show>ul.navbar-nav li{
    padding: 15px 0;
}

.navbar-collapse.show>ul.navbar-nav li:not(:last-child){
    border-bottom: 0.5px solid #e7e7e7;
}

.navbar-collapse.show>ul.navbar-nav li a{
    color: #414042;
    text-decoration: none;
}


.steps{
    margin-top: 20px;
    display: flex;
    height: 10px;
    background: #F5F4F6;
    border-radius: 8px;
}
.step{
    flex: 1;
    background: #F5F4F6;
    height: 10px;
    border-radius: 8px;
}
.step.done{
    background: #9AD7D6;
   
}
.step:not(:last-child){
    margin-right: 20px;
}

.image-placeholder{
    margin: 0 auto;
    border: 1px dashed black;
    border-radius: 60%;
	height: 150px;
	width: 150px;
}

.btn-upload{
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    text-transform: uppercase;
    color: #22C9C7 !important;
    background: white;
    border: 2px solid #22C9C7;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 28px;
}

.btn-upload-cv{
    border: 3px dashed #9AD7D6;
    border-radius: 8px;
    background: white;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    /* or 167% */

    text-align: left;
    text-transform: uppercase;

    /* Grey/70 */

    color: #464646;
    padding: 12px 20px;
}

.react-datepicker__input-container input{
   border: 1px solid #E6E4E8;
    box-sizing: border-box;
    border-radius: 4px;
  
    padding: 8px 20px;
  
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    color: #939097;
    content : "X"
}

.signup-modal .modal-body{
    height : 270px !important;
    border: none;
}

.signup-modal .modal-content{
    border: none;
}

.terms-and-conditions-modal .modal-body{
    height : 800px !important;
    border: none;
}

.terms-and-conditions-modal .modal-dialog{
    max-width: 870px;
}

.terms-and-conditions-modal .modal-body .terms-div{
    padding: 30px;
    margin-top: 36px;
    text-align : left !important;
    max-height: 500px;
    overflow-y: auto;
    z-index: 1;
}

.mobile-modal.terms-and-conditions-modal .modal-body .terms-div #bottom-fade{
    bottom: 13em;
}

.terms-and-conditions-modal .modal-body .terms-div #bottom-fade{
    z-index: 99;
    position: absolute;
    width: 100%;
    bottom: 7em;
	height: 12em;
	left: 0.25em;
    background: -webkit-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    ); 
    background-image: -moz-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -o-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -ms-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
}

.terms-and-conditions-modal .modal-content{
    border: none;
    padding: 1rem 2rem 2rem 2rem !important;
}



@media(min-width: 320px) {}

@media(min-width: 992px) {
	.main-page-customer {
		height: 440px !important;
		background-image: url('/images/login-bg-customer.png');
	}
	.main-page-translator {
		height: 415px !important;
		background-image: url('/images/login-bg-translator.png');
	}

	.image-placeholder{
		width: 200px;
		height: 200px;
	}

	.soc-media-img{
		left: 30px;
	}
}

@media(min-width: 1024px){
	.soc-media-img{
		left: 30px !important;
	}
}

.login-sub-text{
    margin-top: 32px;
    font-size: 12px;
}

.custom-link{
    color: #00D1C1 !important;
    text-decoration : none !important;
}

.forgot-password-modal .modal-body{
    height : auto !important;
    border: none;
}

.forgot-password-modal .modal-dialog{
    max-width: 450px;
}


.forgot-password-modal .modal-content{
    border: none;
    padding: 1rem 2rem 2rem 2rem !important;
}

.no-account{
    text-align: center;
}

.forgot-pass{
    text-align: center;
}



@media(min-width: 320px){
    
}

@media(min-width: 992px){
    .no-account{
        text-align: left;
    }
    
    .forgot-pass{
        text-align: right;
    }
}

/* .page{
	opacity: 0;
	-moz-animation: slide 1.5s ease-in 2.5s initial;
	-webkit-animation: slide 1.5s ease-in 2.5s initial;
	-o-animation: slide 1.5s ease-in 2.5s initial;
	-ms-animation: slide 1.5s ease-in 2.5s initial;
	animation: slide 1.5s ease-in 2.5s initial;
} */

/* Tasks */
.landing-empty-task {
	margin-top: 40px;
	width: 100%;
	height: 500px;
	padding: 16px 12px;
	background: none;
	/* Menu */
	box-sizing: border-box;
	/** add this **/
	-moz-box-sizing: border-box;
	/** add this **/
	-webkit-box-sizing: border-box;
	/** add this **/
	-ms-box-sizing: border-box;
	/** add this **/
}

.empty-task-heading-text {
	font-weight: 500;
	font-size: 40px;
	line-height: 64px;
	color: #414042;
	margin-bottom: 15px;
	text-align: left;
	width: 100%;
}

.empty-task-heading-sub {
	display: block;
	margin-bottom: 45px;
	color: #414042;
	text-align: left;
}

.empty-task-heading-button {
	border-radius: 8px;
	width: 192px;
	display: block;
	text-align: center;
	height: 52px;
	background: #22C9C7;
	border: none;
	text-transform: uppercase;
	font-size: 16px;
	color: white !important;
	text-decoration: none !important;
	padding: 16px 20px;
	margin-top: 20px;
}

.empty-assigned-task-heading-button {
	border-radius: 8px;
	width: 264px;
	display: block;
	text-align: center;
	height: 52px;
	color: #22C9C7;
	border: none;
	text-transform: uppercase;
	font-size: 14px;
	background: white !important;
	padding: 16px 20px;
	border: 2px solid #22C9C7;
}

.load-more-button {
	border: 2px solid #22C9C7;
	box-sizing: border-box;
	border-radius: 8px;
	font-style: normal;
	font-weight: bold;
	font-size: 12px;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
	color: #22C9C7;
	padding: 16px 20px;
	background: #FFF;
	margin: 0 auto;
}

.task-item {
	width: 100%;
	height: auto;
	background: #FAFAFB;
	border-radius: 12px;
	margin-bottom: 10px;
	padding: 18px 12px;
}

@-moz-keyframes slide /* Firefox */
{
from {opacity: 1; z-index: 0}
to {opacity: 1; z-index: 1040}
}

@-webkit-keyframes slide /* Safari and Chrome */
{
from {opacity: 1; z-index: 0}
to {opacity: 1; z-index: 1040}
}

@-o-keyframes slide /* Opera */
{
from {opacity: 1; z-index: 0}
to {opacity: 1; z-index: 1040}
}

@-ms-keyframes slide /* IE10 */
{
from {opacity: 1; z-index: 0}
to {opacity: 1; z-index: 1040}
}

@keyframes slide
{
from {opacity: 1; z-index: 0}
to {opacity: 1; z-index: 1040}
}

.mobile-view.task-item > .row{
	margin-right: 5px;
	margin-left: 5px;
}

.task-item .field-label {
	display: block;
	font-weight: 500;
	font-size: 12px;
	line-height: 20px;
	color: #939097;
	text-align: left;
}

.task-item .field-value {
	display: block;
	font-weight: bold;
	font-size: 16px;
	line-height: 24px;
	color: #414042;
}

.task-item .item-panel {
	display: flex;
}

.task-item .task-status {
	font-weight: 500;
	font-size: .80rem;
	line-height: 28px;
	color: #293846;
	text-align: left;
}

.task-item .task-status span{
	margin-right: 10px;
}

.task-item .service-tag{
	margin-right: 10px;
}

.task-item .add-services-div{
	margin-left: 30px;
}

.task-item .task-type {
	border-radius: 20px;
	font-weight: 500;
	font-size: 12px;
	line-height: 20px;
	text-align: center;
	text-transform: uppercase;
	color: #FFFFFF;
	padding: 4px 16px;
	display: block;
	width: 8rem;
}

.task-item .task-title {
	font-weight: 600;
	font-size: .90rem;
	line-height: 28px;
	color: #464646;
	text-align: left;
}
.task-item .order-number{
	text-align : left;
}

.task-item .task-description,
.task-files .task-description {
	font-weight: 500;
	font-size: 14px;
	line-height: 28px;
	color: #676A6C;
	word-break: break-word;
	text-align : left;
}

.task-item .task-payed {
	font-weight: 600;
	font-size: .95rem;
	line-height: 28px;
	color: #464646;
}

.task-item .task-remaining-amount {
	font-weight: 600;
	font-size: 32px;
	line-height: 40px;
	color: #464646;
}

.task-pay-left {
	background: #22C9C7;
	border-radius: 8px;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
	color: #FCFCFC;
	width: 90%;
	padding: 12px 16px;
	border: none;
	margin-top: 35px;
	position: absolute;
	bottom: 0;
	right: 0;
}

.task-pay-left-details {
	background: #22C9C7;
	border-radius: 8px;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
	color: #FCFCFC !important;
	width: 100%;
	padding: 12px 16px;
	border: none;
	display: block;
	text-decoration: none !important;
}

.task-give-feedback {
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
	color: #22C9C7;
	width: 100%;
	padding: 12px 16px;
	border: none;
	margin-top: 35px;
	background: #FAFAFB;
	border: 2px solid #22C9C7;
	box-sizing: border-box;
	border-radius: 8px;
}

.task-item-delete {
	border: 2px solid #FF6666;
	box-sizing: border-box;
	border-radius: 8px;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-transform: uppercase;
	color: #FF6666;
	background: #FAFAFB;
	padding: 14px 16px;
	width: 116px;
	margin-bottom: 20px;
}

.task-item-delete img {
	float: left;
}

.task-item-edit {
	border: 2px solid #FF8E26;
	box-sizing: border-box;
	border-radius: 8px;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-transform: uppercase;
	color: #FF8E26;
	background: #FAFAFB;
	padding: 14px 16px;
	width: 116px;
	margin-bottom: 20px;
	text-align: center;
}

.task-item-edit img {
	float: left;
}

.task-item-pay {
	background: #22C9C7;
	border-radius: 8px;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
	color: #FCFCFC;
	width: 116px;
	padding: 14px 16px;
	border: none;
}

.delete-task-modal .modal-body {
	height: 200px !important;
	border: none;
}

.delete-task-modal .modal-content {
	border: none;
}

.pause-task-modal .modal-body {
	height: auto !important;
	border: none;
}

.pause-task-modal .modal-dialog {
	max-width: 650px;
	z-index: 1050;
}

.pause-task-modal .modal-content {
	border: none;
	padding: 1rem 3rem 3rem 3rem !important;
}

.stop-task-modal .modal-body {
	height: 580px !important;
	border: none;
}

.stop-task-modal .modal-dialog {
	max-width: 650px;
}

.stop-task-modal .modal-content {
	border: none;
	padding: 1rem 3rem 3rem 3rem !important;
}

.escalate-task-modal .modal-body {
	height: auto !important;
	border: none;
}

.escalate-task-modal .modal-dialog {
	max-width: 650px;
}

.escalate-task-modal .modal-content {
	border: none;
	padding: 1rem 3rem 3rem 3rem !important;
}

.decline-task-modal .modal-body {
	height: auto !important;
	border: none;
}

.decline-task-modal .modal-dialog {
	max-width: 650px;
}

.decline-task-modal .modal-content {
	border: none;
	padding: 1rem 3rem 3rem 3rem !important;
}

.payment-confirmation-modal .modal-dialog {
	max-width: 800px;
}

.payment-confirmation-modal .modal-body {
	height: 250px !important;
}

.payment-confirmation-modal .modal-content {
	border: none;
	padding: 1rem 3rem 3rem 3rem !important;
}

.notify-account-manager-modal .modal-body {
	height: auto !important;
	border: none;
}

.notify-account-manager-modal .modal-dialog {
	max-width: 550px;
}

.notify-account-manager-modal .modal-content {
	border: none;
	padding: 1rem 3rem 3rem 3rem !important;
}

.coupon-code-modal .modal-body {
	height: auto !important;
	border: none;
}

.coupon-code-modal .modal-dialog {
	max-width: 550px;
}

.coupon-code-modal .modal-content {
	border: none;
	padding: 1rem 3rem 3rem 3rem !important;
}

.accepted-task-modal {
	padding: 0;
}

.accepted-task-modal .modal-body {
	height: 450px !important;
	border: none;
}

.accepted-task-modal .modal-dialog {
	max-width: 640px;
}

.accepted-task-modal .modal-content {
	border: none;
	padding: 1rem 3rem 3rem 3rem !important;
}

.confirmation-modal .modal-body {
	height: auto !important;
	border: none;
}

.confirmation-modal .modal-dialog {
	max-width: 650px;
	width: auto;
}

.confirmation-modal .modal-content {
	border: none;
	padding: 1rem 3rem 3rem 3rem !important;
}

.confirmation-modal .btn-ok {
	background: #22C9C7;
	border-radius: 8px;
	font-style: normal;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
	color: #FCFCFC;
	padding: 12px 16px;
	border: none;
	margin-right: 15px;
}

.confirmation-modal .btn-cancel {
	border: 2px solid #FF6666;
	box-sizing: border-box;
	border-radius: 8px;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
	color: #FF6666;
	padding: 12px 16px;
	background: transparent;
}

.confirmation-modal .confirmation-header {
	font-size: 20px;
}

.accepted-task-details {
	text-align: left;
	margin-top: 32px;
	padding: 24px 40px;
}

.reason-list {
	list-style: none;
	padding-left: 0;
	text-align: left;
	margin-left: 30px;
	font-weight: 500;
	font-size: 16px;
	line-height: 28px;
	color: #414042;
}

ul.status-filters {
	display: flex;
	flex-direction: row;
	list-style: none;
	font-size: .75rem;
	padding-left: 0;
}

ul.status-filters li{
	margin-right: 15px;
}

.status-filter {
	border-radius: 28px;
	width: 104px;
	height: 36px;
	background: #F5F4F6;
	border: 1px solid #F5F4F6;
	box-sizing: border-box;
	color: #7D7C7F;
	padding: 8px 16px;
	display: block;
	cursor: pointer;
}

ul.type-filters {
	display: flex;
	flex-direction: row;
	list-style: none;
	font-size: 12px;
	padding-left: 0;
}

ul.type-filters li{
	margin-right: 15px;
}

.type-filter {
	border-radius: 28px;
	width: 80px;
	height: 36px;
	background: #F5F4F6;
	border: 1px solid #F5F4F6;
	box-sizing: border-box;
	color: #7D7C7F;
	padding: 8px 16px;
	display: block;
	text-align: center;
	cursor: pointer;
}

.custom-task-dropdown {
	transform: translate3d(-85px, 21px, 0px);
	left: -45px !important;
	top: 35% !important;
	box-shadow: 8px 8px 32px rgba(0, 0, 0, 0.08);
}

.custom-task-dropdown li {
	margin-left: 10px;
	padding: 5px;
}

.custom-task-dropdown li.divider {
	border-top: 1px solid #7D7C7F;
	margin-right: 10px;
}

.custom-task-dropdown li a {
	color: #7D7C7F !important;
	font-weight: 500;
	font-size: 12px;
	line-height: 20px;
	text-decoration: none !important;
}

.custom-dropdown a {
	text-decoration: none !important;
	color: #22C9C7 !important;
}

.filter-no-task {
	margin-top: 15px;
	text-align: center;
}

.filter-no-task img {
	width: 30%;
	height: 30%;
}

.filter-no-task-text {
	margin-top: 20px;
	margin-bottom: 20px;
	font-weight: 500;
	font-size: 18px;
	line-height: 28px;
	color: #414042;
}

.filter-no-task-button {
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
	color: #FCFCFC;
	background: #22C9C7;
	border-radius: 8px;
	padding: 16px 20px;
	border: none;
}

.create-task-step-header {
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	display: block;
}

.create-task-step-header.active {
	color: #293846 !important;
}

.create-task-step-header.inactive {
	color: #BDBDBD !important;
}

.create-checklist {
	background: #FFFFFF;
	box-shadow: 12px 16px 52px rgba(29, 48, 0, 0.07);
	border-radius: 8px;
	height: 170px;
	padding: 24px;
	font-size: 20px;
	line-height: 28px;
	color: #464646;
}

.task-checklist {
	list-style: none;
	padding-left: 0;
}

.task-checklist li {
	font-size: 14px;
}

.btn-complete-order {
	width: 100%;
	background: #22C9C7;
	border-radius: 8px;
	padding: 16px;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
	color: #FCFCFC;
	border: none;
}

.step-1-divs {
	margin-top: 20px;
	background: #FFFFFF;
	box-shadow: 4px 4px 28px rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	height: 172px;
	padding: 24px;
}

.step-1-option {
	background: #F5F4F6;
	border: 1px solid #F5F4F6;
	box-sizing: border-box;
	border-radius: 28px;
	font-weight: 500;
	font-size: 12px;
	line-height: 20px;
	text-align: center;
	color: #7D7C7F;
	padding: 8px 16px;
	margin-right: 20px;
	cursor: pointer;
	margin-bottom: 20px;
}

.step-1-selected {
	background: #7AB7B6 !important;
	color: #FFFFFF !important;
}

.custom-create-task-label {
	font-weight: 300;
	font-size: 14px;
	line-height: 28px;
	color: #414042;
}

.create-task-upload-btn {
	border: 2px solid #22C9C7;
	box-sizing: border-box;
	border-radius: 8px;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
	color: #22C9C7;
	padding: 16px;
	background: white;
}

.react-datepicker-wrapper {
	width: 100%;
}

.react-datepicker__input-container>input {
	width: 100% !important;
	background: #FAFAFB;
	border: 1px solid #E6E4E8;
	box-sizing: border-box;
	border-radius: 4px;
	text-indent: 30px;
	padding: 16px;
	font-weight: 500;
}

.date-picker {
	background-image: url('/images/icon-calendar.png') !important;
	background-repeat: no-repeat !important;
	background-size: 20px 20px !important;
	background-position: 10px 13px !important;
	color: #414042 !important;
}

.time-picker {
	background-image: url('/images/icon-clock.png') !important;
	background-repeat: no-repeat !important;
	background-size: 20px 20px !important;
	background-position: 10px 13px !important;
	color: #414042 !important;
}

.task-file-list {
	margin-top: 20px;
	list-style: none;
	padding-left: 0;
}

.task-file-list li {
	font-weight: 500;
	font-size: 16px;
	line-height: 28px;
	color: #939097;
	padding: 8px;
}

.task-file-list li:not(:last-child) {
	border-bottom: 1px solid #DFDFE0;
}

.task-file-item-icon {
	width: 16px;
	height: 24px;
	margin-right: 11px;
}

.task-file-item-remove {
	width: 20px;
	height: 22px;
	cursor: pointer;
	float: right;
}

.additional-services-modal .modal-content {
	width: 860px !important;
	height: 740px !important;
	text-align: left !important;
	border: none !important;
}

.additional-services-modal .modal-body {
	padding: 30px !important;
}

.additional-services-modal .modal-dialog {
	margin-left: 20% !important;
}

.additional-services-modal .modal-body ul.services-list {
	list-style: none !important;
	padding-left: 0 !important;
}

.additional-services-modal .services-list li {
	padding: 24px 0;
}

.additional-services-modal .services-list li:not(:last-child) {
	border-bottom: 1px solid #DFDFE0;
}

.additional-services-modal .service-item {
	display: flex;
}

.additional-services-modal .service-title {
	text-align: left;
	font-style: normal;
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	color: #414042;
	margin-bottom: 5px;
}

.additional-services-modal .service-text {
	text-align: left;
	font-style: normal;
	font-weight: 400;
	font-size: 15px;
	line-height: 28px;
	color: #414042;
	width: 400px;
}

.additional-services-modal .service-item img {
	width: 52px;
	height: 52px;
	margin-top: 20px;
}

.additional-services-modal .service-item .service-price::before {
	content: "$";
}

.additional-services-modal .service-item .service-price {
	font-weight: 500;
	font-size: 48px;
	line-height: 64px;
	text-align: left;
	margin-left: 20px;
	color: #414042;
}

.additional-services-modal .service-item .service-add-to-order {
	border: 2px solid #22C9C7;
	box-sizing: border-box;
	border-radius: 8px;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
	color: #22C9C7;
	padding: 12px 16px;
	background: white;
}

.additional-services-modal .service-item .service-add-to-order-div {
	padding-left: 10px;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
	color: #22C9C7 !important;
	background: white !important;
	border: none;
}

.additional-services-modal .service-item .service-add-to-order-div img {
	width: 15px;
	height: 15px;
	margin-right: 10px;
	margin-top: 0px;
}

.additional-services-modal .service-item .service-inc-translator {
	background: #22C9C7;
	border-radius: 4px;
	border: none;
	width: 36px;
	height: 36px;
	color: white;
}

.additional-services-modal .service-item .service-translator-count {
	font-weight: bold;
	font-size: 24px;
	line-height: 24px;
	text-align: center;
	color: #939097;
	margin-top: 5px;
	margin-left: 20px;
	margin-right: 20px;
}

.additional-services-modal .service-item .service-dec-translator {
	background: #F5F4F6;
	border-radius: 4px;
	border: none;
	width: 36px;
	height: 36px;
	color: white;
}

.payment-form {
	width: 100%;
	height: 450px;
	padding: 16px 20px;
	background: none;
	/* Menu */
	box-sizing: border-box;
	/** add this **/
	-moz-box-sizing: border-box;
	/** add this **/
	-webkit-box-sizing: border-box;
	/** add this **/
	-ms-box-sizing: border-box;
	/** add this **/
}

.payment-form input::placeholder {
	font-size: 20px;
	letter-spacing: 5px;
}

.payment-form input {
	letter-spacing: 5px;
}

.task-coupon-input {
	background: #FAFAFB;
	border: 1px solid #E6E4E8;
	box-sizing: border-box;
	border-radius: 4px;
	padding: 16px 20px;
	font-weight: 500;
	font-size: 12px;
	line-height: 20px;
	color: #414042;
	width: 372px;
	margin-right: 10px;
}

.task-coupon-apply {
	background: #22C9C7;
	border-radius: 8px;
	font-style: normal;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
	color: #FCFCFC;
	border: none;
	width: 96px;
}

.task-pay-with-card {
	background: #22C9C7;
	border-radius: 8px;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
	color: #FCFCFC;
	padding: 16px 20px;
	border: none;
	width: 232px;
	margin-right: 10px;
}

.task-pay-with-paypal {
	background: #F5F4F6;
	border-radius: 8px;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
	color: #22C9C7;
	padding: 16px 20px;
	border: none;
	width: 232px;
}

.pay-task {
	background: #22C9C7;
	border-radius: 8px;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
	color: #FCFCFC;
	padding: 16px 20px;
	width: 100%;
	border: none;
}


.right-modal {
	width: 100%;
}

.right-modal .modal-dialog {
	top: 0 !important;
	right: 0 !important;
	text-align: left !important;
	position: fixed !important;
	margin: auto !important;
	height: 100% !important;
	-webkit-transform: translate3d(0%, 0, 0) !important;
	-ms-transform: translate3d(0%, 0, 0) !important;
	-o-transform: translate3d(0%, 0, 0) !important;
	transform: translate3d(0%, 0, 0) !important;
}

.right-modal .modal-header {
	text-align: left !important;
	height: 70px;
	margin-right: 40px;
	margin-left: 40px;
}

.right-modal .modal-content {
	height: 100% !important;
	min-height: 100% !important;
	border-radius: 0 !important;
	border: none !important;
	/* padding: 30px; */
}

.right-modal .modal-body {
	/* padding: 15px 15px 80px !important; */
	padding: 0 !important;
}


/*Right*/

.right-modal.fade .modal-dialog {
	right: 0 !important;
	top: 0 !important;
	-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
	-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
	-o-transition: opacity 0.3s linear, right 0.3s ease-out;
	transition: opacity 0.3s linear, right 0.3s ease-out;
}

.right-modal.fade.in .modal-dialog {
	right: 0 !important;
}

.task-files {
	margin-right: 40px;
	margin-left: 40px;
}

.description-div {
	max-height: 200px;
	overflow-y: auto;
}

.messenger-no-chat{
	font-size: 32px;
    font-weight: 600;
    text-align: center;
    width: 80%;
    margin: 0 auto;
    margin-top: 50px;
}

.chat-header {
	padding-left: 40px;
	padding-right: 40px;
	z-index: 100;
	height: 90px;
	background-color: white;
	box-shadow: 0px 4px 6px -6px rgba(0, 0, 0, 0.12)
}

.chat-header img {
	border-radius: 100%;
}

.chat-footer {
	z-index: 100;
	min-height: 70px;
	height: auto;
	width: 100%;
	background-color: white;
	box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.12);
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 20px;
}

.chat-file-list {
	list-style: none;
	padding-left: 0;
}

.chat-file-list li {
	margin-top: 5px;
}

.message-item {
	display: flex;
	margin-left: 40px;
	margin-right: 40px;
	margin-top: 20px;
}

.mobile-message-item {
	display: flex;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 20px;
}

.message-sender-avatar img {
	width: 36px;
	height: 36px;
	border-radius: 100%;
}

.message-details {
	position: relative;
	width: inherit;
}

.message-bubble {
	font-size: 14px;
	padding: 20px;
	border-radius: 8px;
	width: auto;
}

.message-date {
	margin-top: 20px;
	margin-bottom: 5px;
	display: flex;
}

.message-date span {
	font-weight: 500;
	font-size: 12px;
	line-height: 20px;
	color: #939097;
}

.message-list {
	height: calc(100vh - 310px);
	overflow-y: auto;
}

.message-files {
	list-style: none;
	padding-left: 0;
}

.message-file {
	font-weight: bold;
	font-size: 12px;
	line-height: 20px;
	text-decoration: none !important;
}

.message-file a {
	text-decoration: none !important;
}

.chat-main{
    display: flex;
}

.chat-main .user-list{
    flex: 1;
    min-width: 30%;
    background: #FFFFFF;
    box-shadow: 16px 16px 72px rgba(32, 32, 32, 0.08);
    border-radius: 8px;
    height: calc( 100vh - 176px);
    padding-top: 16px;
    padding-bottom: 16px;
    position: relative;
    overflow-y: auto;
}

.chat-main .conversation-box{
    margin-left: 32px;
    flex: 4;
    box-shadow: 16px 16px 72px rgba(32, 32, 32, 0.08);
    border-radius: 8px;
    height: calc( 100vh - 176px);
} 

/* CHAT BOX TABS */
.chat-nav {
    margin-right: 20px !important;
    margin-left: 20px !important;
}
.chat-nav .nav-link.active{
    background: #22C9C7 !important;
    color: white !important;
    border : none !important;
    font-size: 12px;
}

.chat-nav .nav-link:not(.active){
    color: #7D7C7F !important;
    border : none !important;
    font-size: 12px;
}

/* CHAT TABS CONTENT */
.chat-tab-content{
    height: 100%;
}

.chat-tab-content .tab-pane{
    position: relative;
    overflow-y: auto;
    height: calc(100% - 20px);
}

/* CHAT BOX USER SEARCH */
.chat-search{
    position: relative;
    width: 100%;
    flex: 1;
    padding: 20px;
}

.chat-search img{
    position: absolute;
    left: 33px;
    top: 33px;
    height: 15px;
    width: 15px;
}

.chat-search-input{
    background: #FFFFFF;
    border: 1px solid #E6E4E8;
    box-sizing: border-box;
    border-radius: 4px;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    color: #939097;
    padding: 16px 16px 16px 42px;
    height: 42px;
    width: 100%;
}

.chat-search-input::placeholder{
    font-weight: 300;
}

.chat-item{
    height: 65px;
    margin-bottom: 8px;
    cursor: pointer;
    padding-top: 10px;
}

.chat-item.selected{
    background: #F5F4F6;
}

.chat-item-body{
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
}

.chat-item-body .display-photo{
    width: 40px;
    height: 40px;
    border-radius: 100%;
    position: absolute;
}

.chat-item-body .details{
    margin-left: 60px;
    position: relative;
}

.chat-item-body .details .username{
    font-size: 12px;
    line-height: 20px;
    align-items: center;
    color: #3F3F3F;
    display: block;
    font-weight: bold;
}

.chat-item-body .details .task-title{
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    color: #464646;
}

.chat-item-body .details .highlighted-text-result{
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #464646;
    overflow : hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-item-body .details .chat-date{
    position: absolute;
    top: 0;
    right: 0;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    text-align: right;
    color: #BDBDBD;
}

/* CONVERSATION BOX */
.conversation-box{
    padding: 16px 20px;
    position: relative;
}

.chat-dropdown-menu{
    left: calc(100% - 50px) !important;
    top: 20% !important;
    box-shadow: 8px 8px 32px rgba(0, 0, 0, 0.08);
}

.chat-dropdown-menu li{
    margin-left: 10px;
    padding: 5px;
}

.chat-dropdown-menu li.divider{
    border-top: 1px solid #7D7C7F;
    margin-right: 10px;
}

.chat-dropdown-menu li a{
    color: #7D7C7F !important;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    text-decoration: none !important;
}

.conversation-header{
    position: relative;
    border-bottom: 1px solid #E6E4E8;
    padding-bottom: 24px;
    max-height: 70px;
    min-height: 70px;
}

.conversation-header .recipient-details .details{
    margin-left: 60px;
    position: relative;
}

.conversation-header .recipient-details .display-photo{
    width: 40px;
    height: 40px;
    border-radius: 100%;
    position: absolute;
}

.conversation-header .recipient-details .details .username{
    font-weight: bold;
    font-size: 12px;
    line-height: 20px;
    color: #3F3F3F;
    display: block;
}

.conversation-header .recipient-details .details .task-title{
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    color: #464646;
}

.conversation-header .recipient-actions{
    position: absolute;
    right: 0;
    top: 10px;
}

.conversation-header .recipient-actions a#imageDropdown{
    text-decoration: none;
    color: #22C9C7;
}

/* MOBILE HEADER */
.mobile-conversation-header .recipient-details .details{
    margin-left: 60px;
    position: relative;
}

.mobile-conversation-header .recipient-details .display-photo{
    width: 40px;
    height: 40px;
    border-radius: 100%;
    position: absolute;
}

.mobile-conversation-header .recipient-details .details .username{
    font-weight: bold;
    font-size: 12px;
    line-height: 20px;
    color: #3F3F3F;
    display: block;
}

.mobile-conversation-header .recipient-details .details .task-title{
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    color: #464646;
}

.mobile-conversation-header .recipient-actions{
    position: absolute;
    right: 0;
    top: 10px;
}

.mobile-conversation-header .recipient-actions a#imageDropdown{
    text-decoration: none;
    color: #22C9C7;
}


.conversation-header .recipient-actions a#imageDropdown:hover{
    /* text-decoration: none;
    color: white;
    background: #22C9C7;
    border-radius: 4px;
    padding: 6px 4px 10px 4px; */
}

.conversation-body{
    max-height: calc(100% - 120px);
    height: calc(100% - 120px);
    overflow-y: auto;
    position: relative;
}

.conversation-body .empty-message{
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    color: #909090;
    margin: 0 auto;
    display: block;
    text-align: center;
    margin-top: 15%;
}

.messages-header{
    display: flex;
    margin-top: 10px;
}

.messages-header p{
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #939097;
    margin: 0 auto;
    width: 600px;
    text-align: center;
    z-index: 10;
}

.message-header-border{
    width: 100%;
    margin-top: 10px;
    height: 1px;
    border-bottom: 1px solid #EDEDED;
}

/* MOBILE CONVERSATION FOOTER */
.mobile-conversation-footer{
    z-index: 100;
    min-height: 70px;
    height : auto;
    width: 100%;
    background-color: white;
    box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.12);
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 20px;
}

.mobile-conversation-footer .chat-file-list{
    list-style : none;
    padding-left: 0;
}

.mobile-conversation-footer .chat-file-list li{
    margin-top: 5px;
}

.conversation-footer{
    padding: 10px;
    max-height: 70px;
    height: 70px;
    border-top: 1px solid #E6E4E8;
}

.conversation-footer .message-container{
    position: relative;
    width: 100%;
    flex: 1;
}

.conversation-footer .message-container .message-attach{
    position: absolute;
    left: 0;
    top: 10px;
    height: 21px;
    width: 18px;
    cursor : pointer;
}

.conversation-footer .message-container .message-send{
    position: absolute;
    right: 0;
    top: 10px;
    height: 21px;
    width: 18px;
    cursor : pointer;
}

.conversation-footer .message-container .message-send-input{
    background: #FFFFFF;
    border: none;
    box-sizing: border-box;
    border-radius: 4px;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    color: #939097;
    padding: 8px 42px 16px 42px;
    height: 42px;
    width: 100%;
    resize: none;
    overflow-y: hidden;
    color: #414042;
}

.conversation-footer .message-container .message-send-input:focus{
    border: none;
    outline: none;
}

.conversation-footer .chat-message-files{
    list-style : none;
    padding-left: 0;
    position: absolute;
    width: 95.5%;
    background: white;
    bottom: 66px;
    padding: 10px;
}

.conversation-footer .chat-message-file{
    font-weight: bold;
    font-size: 12px;
    line-height: 20px;
    text-decoration: none !important;
}

.conversation-footer .chat-message-file a{
    text-decoration: none !important;
}

.chat-search-input::placeholder{
    font-weight: 300;
}


/* TASK DETAIL CSS */

.task-details.tab-content {
	height: calc(100% - 40px);
}


/* TRANSLATOR TASKS */

.task-table-div {
	background: #FFFFFF;
	box-shadow: 4px 4px 28px rgba(0, 0, 0, 0.08);
	border-radius: 8px;
}

.task-table-div table {
	width: 100%;
}

.task-table-div table th {
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-transform: uppercase;
	color: #939097;
	padding: 15px;
	background: #ffffff;
}

.task-table-div table tr td {
	font-weight: 500;
	font-size: 14px;
	line-height: 28px;
	color: #080708;
	padding: 15px;
	vertical-align: top;
}

.task-table-div table tr.uncompleted-task,
.task-table-div table tr.prepaid-task {
	background: #F5F4F6;
	margin-bottom: 5px;
	border-bottom: 4px solid #ffffff;
}

.task-type {
	border-radius: 20px;
	font-weight: 500;
	font-size: 12px;
	line-height: 20px;
	text-align: center;
	text-transform: uppercase;
	color: #FFFFFF;
	padding: 4px 16px;
	display: block;
	width: 8rem;
}

.task-price {
	font-weight: bold;
	font-size: 16px;
	line-height: 24px;
	color: #414042;
}

.tasks-search {
	position: relative;
	width: 292px;
	flex: 1;
	float: right;
}

.tasks-search img {
	position: absolute;
	left: 20px;
	top: 18px;
	height: 15px;
	width: 15px;
}

.tasks-search-input {
	background: #FFFFFF;
	border: 1px solid #E6E4E8;
	box-sizing: border-box;
	border-radius: 4px;
	font-style: normal;
	font-weight: 500;
	font-size: 12px;
	line-height: 20px;
	color: #939097;
	padding: 18px 18px 18px 42px;
	height: 52px;
	width: 292px;
}

.tasks-search-input::placeholder {
	font-weight: 300;
}

.date-range-filter {
	display: flex;
	background: transparent;
	/* gray/40 */
	border: 1px solid #E6E4E8;
	box-sizing: border-box;
	border-radius: 4px;
	height: 52px;
	padding: 10px;
	font-size: 16px;
	line-height: 28px;
	align-items: center;
	color: #414042;
}

.date-range-filter input {
	height: 20px;
	width: 110px !important;
	margin-left: 10px;
	background: #ffffff;
	color: #414042;
	padding-left: 0 !important;
	font-size: 12px;
	text-indent: 10px;
	text-align: center;
	border: none !important;
}

.rf-mobile .react-datepicker-popper{
	position: absolute !important;
   
	left: unset !important;
	right: unset !important;
	transform : unset !important;
}

.ic-r .react-datepicker-popper{
	top: 210px !important;
}

.oc-r .react-datepicker-popper{
	top: 148px !important;
}

.rf-mobile .react-datepicker-popper .react-datepicker__triangle{
	display: none;
}

.rf-desktop .react-datepicker-popper{
	position: absolute !important;
	left: unset !important;
	right: unset !important;
	transform : unset !important;
}

.rf-desktop .react-datepicker-popper .react-datepicker__triangle{
	display: none;
}

.filter-tasks {
	border: 2px solid #22C9C7;
	box-sizing: border-box;
	border-radius: 8px;
	font-style: normal;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
	color: #22C9C7;
	padding: 8px 20px;
	background: transparent;
	height: 52px;
	margin-left: 20px;
}

.task-dropdown-filter {
	position: relative;
	z-index: 100;
}

.task-floating-filter {
	width: auto;
	max-width: 900px;
	background: white;
	padding: 24px 24px 24px 0;
	left: -625px;
	position: absolute;
	top: 60px;
	box-shadow: 8px 8px 32px rgba(0, 0, 0, 0.08);
	border-radius: 4px;
	display: flex;
}

.task-floating-filter .filter-options-header {
	font-weight: bold;
	font-size: 16px;
	line-height: 24px;
	color: #080708;
	margin-bottom: 30px;
	display: block;
}

.task-floating-filter .filter-option-list {
	list-style: none;
	padding-left: 0;
}

.task-floating-filter .filter-option-list li label {
	font-size: 11px !important;
}

.task-floating-filter .filters {
	display: flex;
}

.task-floating-filter .nonflex-filters {
	display: block;
}

.task-floating-filter .filter-options {
	margin-left: 38px;
	min-width: 200px;
}

.total-earnings-div {
	text-align: right;
	margin-top: 36px;
}

.total-earnings-text {
	font-style: normal;
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	text-align: right;
	color: #414042;
	margin-right: 12px;
}

.total-earnings {
	font-weight: 600;
	font-size: 32px;
	line-height: 40px;
	text-align: right;
	color: #414042;
}

.customer-outcome-report .total-to-pay-div {
	text-align: right;
	margin-top: 10px;
}

.customer-outcome-report .total-to-pay-text {
	font-style: normal;
	font-weight: 300;
	font-size: 20px;
	line-height: 28px;
	text-align: right;
	color: #414042;
	margin-right: 12px;
}

.customer-outcome-report .total-to-pay {
	font-weight: 600;
	font-size: 20px;
	line-height: 40px;
	text-align: right;
	color: #414042;
}

.customer-outcome-report .pay-total {
	border-radius: 8px;
	width: 70px;
	text-align: center;
	height: 52px;
	color: #22C9C7;
	border: none;
	text-transform: uppercase;
	font-size: 14px;
	background: white !important;
	padding: 16px 20px;
	border: 2px solid #22C9C7;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
}

.filter-payment-method {
	background: #F5F4F6;
	border-radius: 8px;
	font-style: normal;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
	color: #22C9C7;
	padding: 16px 20px;
	border: none;
	height: 52px;
	margin-left: 10px;
}

.translator-balance {
	font-style: normal;
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	text-align: right;
	color: #414042;
}

.translator-get-paid {
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
	color: #FCFCFC;
	background: #22C9C7;
	border-radius: 8px;
	padding: 16px 20px;
	border: none;
}

.get-paid-confirmation-modal .modal-dialog {
	width: auto;
}

.get-paid-confirmation-modal .modal-body {
	height: auto !important;
}

.get-paid-confirmation-modal .modal-body .confirmation-header {
	font-weight: 600;
	font-size: 32px;
	line-height: 40px;
	text-align: center;
	color: #414042;
}

.get-paid-confirmation-modal .modal-body .confirmation-sub-header {
	font-style: normal;
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	text-align: center;
	color: #414042;
}

.get-paid-confirmation-modal .modal-body button {
	font-style: normal;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
	color: #FCFCFC;
	background: #22C9C7;
	border-radius: 8px;
	padding: 16px 20px;
	border: none;
	margin: 0 auto;
	width: 256px !important;
}

.get-paid-confirmation-modal .modal-content {
	border: none;
	padding: 1rem 3rem 3rem 3rem !important;
}

.payment-filter-modal .modal-body {
	height: auto !important;
	border: none;
}

.payment-filter-modal .modal-dialog {
	max-width: 500px;
}

.payment-filter-modal .modal-content {
	border: none;
	padding: 1rem 3rem 3rem 3rem !important;
}


/* FOR MOBILE CSS */

.mobile-modal .modal-body {
	/* height : auto !important; */
	border: none;
	overflow: auto;
}

.mobile-modal .modal-dialog {
	width: 100% !important;
	height: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	z-index: 1050;
	max-width: 100% !important;
}

.mobile-modal .modal-content {
	border: none !important;
	/* height: 100% !important; */
	min-height: 100% !important;
	/* height: auto !important; */
	border-radius: 0 !important;
	padding: 1rem !important;
	width: 100% !important;
}

.mobile-custom-header {
	box-shadow: 0px 4px 20px rgba(43, 43, 43, 0.08);
	margin-bottom: 15px !important;
	margin-left: -1rem !important;
	margin-right: -1rem !important;
	margin-top: -1rem !important;
}

.divider-text{
	overflow: hidden;
    text-align: center;
    line-height: 20px;
    font-size: 13px;
	color: rgba(138,138,143,.6);
	display: block;
}

.divider-text:before{
	background-color: #E6E4E8;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
	width: 50%;
	right: .5em;
    margin-left: -50%;
}

.divider-text:after{
	background-color: #E6E4E8;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
	width: 50%;
	left: .5em;
    margin-right: -50%;
}

.circle-span{
	height: 25px;
	width: 25px;
	background-color: #22C9C7;
	color : #fafafa;
	border-radius: 50%;
	display: inline-block;
	font-size: 10px;
	padding-top: 3px;
	box-shadow: 3px 0px rgba(0,0,0,0.05);
  -moz-box-shadow: 3px 0px rgba(0,0,0,0.05);
  -webkit-box-shadow: 3px 0px rgba(0,0,0,0.05);
  -o-box-shadow: 3px 0px rgba(0,0,0,0.05);
}

.soc-media-btn{
	border-radius: 8px;
	font-family: Montserrat;
	font-style: normal;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	align-items: center;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
	color: #FFFFFF;
	border: none;
	height: 52px;
	position: relative;
}

.soc-media-btn.fb{
	background : #2196F3;
}

.soc-media-btn.google{
	background : #F44336;
}

.mob-soc-media-img{
    height: 18px;
    position: absolute;
    top: 15px;
    left: 25px !important;
}

.soc-media-img{
    height: 18px;
    position: absolute;
    top: 15px;
    left: 100px;
}

.user-chooser-btn{
	background: #F5F4F6;
	border-radius: 8px;
	font-weight: bold;
	font-size: 12px;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
	color: #22C9C7;
	padding: 16px 20px;
	height : 120px;
	width: 120px;
	border: none;
}

.user-chooser-btn:hover, .user-chooser-btn:active{
	background: #22C9C7;
	color: #FCFCFC;
	outline : none;
}

@media(max-width: 1024px) and (min-width: 1024px) {
	.task-item .field-label {
		font-size: 10px;
	}
	.task-item .field-value {
		font-size: 14px;
	}
	.task-item .task-status {
		font-size: .70rem;
	}
	.task-item .task-title {
		margin-left: 25px;
	}
}

@media(min-width: 992px) {
	
	.empty-task-heading-text {
		width: 50%;
	}

	.right-modal .modal-dialog {
		top: 0 !important;
		right: 0 !important;
		text-align: left !important;
		position: fixed !important;
		margin: auto !important;
		width: 580px !important;
		max-width: 580px !important;
		height: 100% !important;
		-webkit-transform: translate3d(0%, 0, 0) !important;
		-ms-transform: translate3d(0%, 0, 0) !important;
		-o-transform: translate3d(0%, 0, 0) !important;
		transform: translate3d(0%, 0, 0) !important;
	}
	
	.right-modal .modal-header {
		text-align: left !important;
		height: 70px;
		margin-right: 40px;
		margin-left: 40px;
	}
	
	.right-modal .modal-content {
		height: 100% !important;
		min-height: 100% !important;
		border-radius: 0 !important;
		border: none !important;
		/* padding: 30px; */
	}
	
	.right-modal .modal-body {
		/* padding: 15px 15px 80px !important; */
		padding: 0 !important;
	}
	
	
	/*Right*/
	
	.right-modal.fade .modal-dialog {
		right: 0 !important;
		top: 0 !important;
		-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
		-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
		-o-transition: opacity 0.3s linear, right 0.3s ease-out;
		transition: opacity 0.3s linear, right 0.3s ease-out;
	}
	
	.right-modal.fade.in .modal-dialog {
		right: 0 !important;
	}


	.payment-form {
		width: 100%;
		height: 450px;
		padding: 16px 0px;
		background-image: url('/images/payment-bg.png');
		background-repeat: no-repeat, repeat;
		background-size: contain;
		background-color: #FFFFFF;
		background-position: right;
		/* Menu */
		box-sizing: border-box;
		/** add this **/
		-moz-box-sizing: border-box;
		/** add this **/
		-webkit-box-sizing: border-box;
		/** add this **/
		-ms-box-sizing: border-box;
		/** add this **/
	}
	.landing-empty-task {
		margin-top: 40px;
		width: 100%;
		height: 500px;
		padding: 16px 40px;
		background-image: url('/images/create-task-bg.png');
		background-repeat: no-repeat, repeat;
		background-size: contain;
		background-color: #FFFFFF;
		background-position: right;
		/* Menu */
		box-sizing: border-box;
		/** add this **/
		-moz-box-sizing: border-box;
		/** add this **/
		-webkit-box-sizing: border-box;
		/** add this **/
		-ms-box-sizing: border-box;
		/** add this **/
	}
}

.profile-box{
    background: #FFFFFF;
    box-shadow: 4px 4px 28px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 40px;
    height: auto;
}

.profile-box-display-photo{
    min-width: 15%;
    padding-bottom : 15px;
    text-align: center;
}

.profile-box-display-photo img{
    width: 80%;
    height: 80%;
    border-radius: 100%;
    margin: 24px auto;
}

.profile-box-display-photo button{
    background: #22C9C7;
    border-radius: 8px;
    border: none;
    padding: 12px 16px;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    text-transform: uppercase;
    color: #FCFCFC;
    margin: 10px auto;
    width: 80%
}

.profile-mobile button{
	background: #22C9C7;
    border-radius: 8px;
    border: none;
    padding: 12px 16px;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    text-transform: uppercase;
    color: #FCFCFC;
    width: 20%
}

.profile-box-user-data{
    min-width: 100%;
    padding-top: 15px;
}

.profile-box-user-data input, .profile-box-user-data select{
    height : 52px;
}

.profile-box-user-data input#phoneNumber::placeholder{
    content : "XX";
}

.profile-box-user-data button{
    background: #22C9C7;
    border-radius: 8px;
    border: none;
    padding: 12px 16px;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    display: flex;
    text-align: center;
    text-transform: uppercase;
    color: #FCFCFC;
    float: right;
    height: 52px;
}

.notification-setting-list{
    list-style : none;
    padding-left: 0;
    text-align: left;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    color: #7D7C7F;
}

.reauth-modal .modal-body{
    height : auto !important;
    border: none;
}

.reauth-modal .modal-dialog{
    max-width: 650px;
    z-index: 1050;
}

.reauth-modal .modal-content{
    border: none;
    padding: 3rem 3rem 3rem 3rem !important;
}

.password-change-modal .modal-body{
    height : auto !important;
    border: none;
}

.password-change-modal .modal-dialog{
    max-width: 650px;
    z-index: 1050;
}

.password-change-modal .modal-content{
    border: none;
    padding: 1.75rem 1.75rem 3rem 3rem !important;
}

.edit-billing-method{
    border: 2px solid #22C9C7;
    box-sizing: border-box;
    border-radius: 8px;
    padding : 16px 20px;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    text-transform: uppercase;
    color: #22C9C7;
    background: transparent;
    width: 100%;
}

.update-billing-method{
    background: #22C9C7;
    border-radius: 8px;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    text-transform: uppercase;
    color: #FCFCFC;
    width: 100%;
    padding : 16px 20px;
    border: none;
}

.add-billing-method{
    background: #22C9C7;
    border-radius: 8px;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    text-transform: uppercase;
    color: #FCFCFC;
    width: 50%;
    padding : 16px 20px;
    border: none;
    height : 52px;
	margin-left: 45px;
	margin-top: 10px;
}

.fade-enter {
    opacity: 0.01;
}

.fade-enter.fade-enter-active {
    opacity: 1;
    transition: opacity 500ms ease-in;
}

.fade-exit {
    opacity: 1;
}

.fade-exit.fade-exit-active {
    opacity: 0.01;
    transition: opacity 500ms ease-in;
}

textarea:focus, input:focus{
    outline: none;
}

.user-chooser-modal .modal-body{
    height : auto !important;
    border: none;
}

.user-chooser-modal .modal-dialog{
    max-width: 650px;
    z-index: 1050;
}

.user-chooser-modal .modal-content{
    border: none;
    padding: 1.75rem 1.75rem 3rem 3rem !important;
}

button:disabled{
	opacity: 0.5;
}