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

* {
	margin: 0;
	padding: 0;
}




::-webkit-scrollbar {
 width: 5px;
 height: 6px;
}
::-webkit-scrollbar-thumb {
 background: radial-gradient(circle, #8e256e 16%,#8e256e 42%);
 border-radius: 50px;
}
::-webkit-scrollbar-track
{
	background-color: transparent;
}

.login_b {
    background-image: url(../images/login-background.jpg);
    background-size: cover;
}

.loading_container {
	position: absolute;
	z-index: 999999;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, .5);
}

.loading_container.open {
	display: inline-block;
}

.loading_container.close {
	display: none;
}

.loader {
  width: 200px;
  height: 80px;
  padding-top: 40vh;
  margin: auto;
  display: flex;
}
.circle {
  width: 30px;
  height: 30px;
  background: white;
  border-radius: 50%;
  animation: jump 1s linear infinite;
  margin: 0 15px;
}
.caption {
  margin: auto;
  font-family: arial;
  font-size: 20px;
  color: white;
}
#b {
  animation-delay: 0.2s;
}
#c {
  animation-delay: 0.4s;
}
@keyframes jump {
  0% {
    margin-top: 0;
  }
  35% {
    margin-top: -75px;
  }
  70% {
    margin-top: 0px;
  }
}

.caption_container {
	position: relative; 
	display: flex;
	flex-direction: row;
	top: 55px;
	left: -7px;
}

.dots:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4,end) 900ms infinite;      
  animation: ellipsis steps(4,end) 900ms infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 30px;
    margin-right: -30px;
  }
}

@-webkit-keyframes ellipsis {
  to {
    margin-right: -30px;
    width: 30px;    
  }
}

.login-box {
	border-radius: 20px;
    margin-top: 75px;
    height: auto;
    background: #1A2226;
    text-align: center;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.login-key {
	margin-top: 25px;
    height: 250px;
    font-size: 80px;
    line-height: 100px;
    background: -webkit-linear-gradient(#27EF9F, #0DB8DE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.login-title {
    text-align: center;
    font-size: 30px;
    letter-spacing: 2px;
    margin-top: 15px;
    font-weight: bold;
    color: #ECF0F5;
}

.login-form {
	margin: auto;
    margin-top: 25px;
    text-align: left;
}

.text_active {
	transition: .2s;
	color: white!important;
}

.nav_child_active {
	border-left: 5px solid #20e394!important;
}

.form-group {
    margin-bottom: 40px;
    outline: 0px;
}

.form-control:focus {
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-bottom: 2px solid #0DB8DE;
    outline: 0;
    background-color: #1A2226;
    color: #ECF0F5;
}

input:focus {
    outline: none;
    box-shadow: 0 0 0;
}

label {
    margin-bottom: 0px;
}

.form-control-label {
    font-weight: bold;
    font-size: 12px;
    color: #6C6C6C;
    letter-spacing: 1px;
}

.btn-outline-primary {
    border-color: #0DB8DE;
    color: #0DB8DE;
    border-radius: 0px;
    font-weight: bold;
    width: 100%!important;
    letter-spacing: 1px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.btn-outline-primary:hover {
    background-color: #0DB8DE;
    right: 0px;
}

.login-btm {
    float: left;
}

.login-button {
    padding-right: 0px;
    text-align: right;
    margin-bottom: 25px;
}

.login-text {
	font-size: 13px;
	padding: 14px;
    text-align: left;
    padding-left: 0px;
    color: #A2A4A4;
}

.loginbttm {
    padding: 0px;
}

/*  ------------------------------------------------- */

nav {
	color: white;
	position: fixed;
	z-index: 99;
	width: 280px!important;
	height: 100vh;
	background-color: #21232c;
}

nav .header {
	padding: 20px;
	width: 100%;
	padding-top: 30px;
	padding-bottom: 30px;
	display: flex;
  	flex-direction: row;
  	background-color: #7f0f60;
}

nav .header .container {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.saperator {
	height: 4px;
	background: linear-gradient(90deg, #e30f9f 50%, #20e394 50%);;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    --bs-table-accent-bg: white;
    color: #212529;
}

.table-striped > tbody > tr:nth-of-type(even) {
    --bs-table-accent-bg: #ffffff94;
    color: #212529;
}

nav .auth_container {
	justify-content: center;
	align-items: center;
	display: flex;
	padding: 1px;
	border-radius: 0 15px 0 0;
	background-color: #e30f9f;
	position: relative;
	left: -20px;
	font-weight: 600;
}

nav .name_text {
	width: 100px;
	font-weight: 600;
}

nav .bottom_container {
	display: flex;
	position: relative;
	z-index: 0;
	flex-direction: column;
}

nav .online_container {
	position: relative;
	left: -40px;
	height: 13px;
	display: flex;
	padding: 0px;
	justify-content: center;
	align-items: center;
	width: 75px;
	background-color: #20e394;
	border-radius: 0 0 15px 0;
}

nav .online_container label {
	color: black;
	font-size: 10px;
	margin-left: 15px;
}

nav .header .container span {
	font-size: 14px;
}

.sub-title {
	color: rgb(180,180,180);
}


nav .user_image_container img {
	background-color: white;
	border-radius: 70px;
	position: relative;
	position: relative;
	z-index: 1;
	width: 95px;
	height: 95px;
}

.nav {
	display: flex;
	align-items: center;
}

nav .nav-item {
	width: 90%;
	display: inline-block;
}

nav .nav-item-custom {
	margin-top:16px;
	border-left: 5px solid #7f0f60;
	background-color: #21232c;
	display: flex;
	overflow: hidden;
	height: 30px;
	width: 85%;
	padding-left: 10px;
	text-decoration: none;
	color: #60a2d6;
	z-index: 2;
}

.align {
	display: flex;
	align-items: center;
	justify-content: center;
}

.horizontal-align {
	display: flex;
	justify-content: center;
}

.vertical_align {
	display: flex;
	align-items: center;
}

nav .icon_box {
	width: 30px;
	height: 30px;
	background-color: rgb(113,32,88);
	border-radius: 4px;
	margin-right: 15px;
}

nav .li-item {
	display: flex;
	flex-direction: row;
	flex:1;
}

nav .nav-item .not-active {
	transition: .15s;
	color: #60a2d6;
}

nav .nav-item .active {
	transition: .15s;
	background-color: white;
	border-left: 5px solid #e30f9f;
	color: black;
}

nav .nav-item .activeted {
	transition: .15s;
	transform: rotate(90deg);
}
nav .nav-item .not_activeted {
	transition: .15s;
	transform: rotate(0deg);
}

nav .li-item-text {
	color: #60a2d6;
}

.arrow_container {
	display: flex;
	flex:1;
	justify-content: flex-end;
	margin-right: 10px;
}

.arrow-indicator {
	position: relative;
}

nav .section-header {
	display: flex;
	height: 40px!important;
	font-weight: 600;
	padding-left: 10px;
	color: rgb(140,141,167);
}

.footer-saperator {
	position: absolute;
	bottom: 50px;
	height: 4px;
	width: 100%;
	background: linear-gradient(90deg, #20e394 50%, #e30f9f 50%);;

}

.nav-footer {
	position: absolute;
	display: flex;
	padding: 0;
	margin:0;
	background-color: #7f0f60;
	bottom: 0;
	height: 50px;
	width: 100%;
}

.nav {
	display: flex;
	height: calc(100% - 160px);
	flex-direction: column!important;
	flex-wrap: nowrap!important;	
	overflow-x: hidden;
 	overflow-y: scroll;
}

.nav-item {
	width: 100%;
	display: inline-grid!important;
}

.nav-active-style {
	height: 0;
}

.nav-footer ul {
	width: 100%;
	display: flex;
	padding: 0;
	margin:0;
	list-style: none;
}

.nav-footer li {
	width: 25%;
}

.nav-item .child_activated {
	transition: .3s;
	transform: translate(0,0);
	height: 100%;
	border-left: 5px solid #20e394;
	
}
.nav-item .child_not_activated {
	transition: .3s;
	transform: translate(0,-100%);
	height: 0px;
	border-left: 5px solid #1a8555;
}

.nav-item .nav-item-childs {
	font-size: 14px;
	overflow: hidden;
	display: flex;
	position: relative;
	top: 6px;
	flex-direction: column;
	list-style: none;
	left: -15px;
}

.nav-item-childs li {
	border-left: 5px solid #1a8555;
	position: relative;
	margin-bottom: 5px;
	padding: 3px;
	display: flex;
	align-items: center;
}

.nav_child_text {
	position: relative;
	left: -10px;
}

.nav-item-childs a {
	color: rgb(180,180,180);
	text-decoration: none;
}

.child-icon {
	margin-right: 5px;
	font-size :.7em;
}

.online {
	color: #00d400;
}

.offline {
	color: #ff7070;
}

.nav-item-childs .child-icon {
	font-size: .5em;
	margin-right: 0;
}

.nav-item-childs span {
	margin-left: 16px;
}

.footer-button {
	transition: .1s;
	color: white;
}

.red:hover {
	color: #ff7070;
}

.yellow:hover {
	color: #ffe770;
}

.blue:hover {
	color: #a2eeff;
}

.pink:hover {
	color: #f5a2ff;
}

.page-content-container {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 60px 0px;
	padding-left: 10px;
}

.page-content {
	position: relative;
	width: 100%;
	z-index: 99;
}

.form_group {
	display: flex;
	justify-content: center;
	flex-direction: row;
	padding: 25px;
}

.form-label {
	font-weight:600;
	font-size: 18px;
	background-color: rgba(0, 0, 0, .82);
	padding: 2px;
	min-width: 100px;
	padding-left: 4px;
	padding-right: 13px;
	border-left: 3px solid #e40f8f;
}

.form_group .col {
	display: flex;
	flex-direction: column;
}

.form_group .col {
	flex-direction: column;
}

.form_group .row {
	position: relative;
	left: 0px;
	width: 100%;
	margin-bottom: 0px;
}

.form_group .row-submit {

}

.form-submit {
	position: absolute;
	bottom: 65px;
    right: 50px;
}

.span_title {
	position: relative;
	display: flex;
	font-size: 12px;
	text-transform: uppercase;
	color: #bcbdc0;
    align-self: center;
	text-align: left;
}

.span_brand {
	display: flex;
    align-items: center;
	position: relative;
    padding-left: 13px;
    padding-right: 11px;
    font-size: 20px;
    color: #555555;
    font-weight: 600;
    text-transform: capitalize;
	top: 1px;
}

select {
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.bootstrap-select>.dropdown-toggle.bs-placeholder, .bootstrap-select>.dropdown-toggle.bs-placeholder:active, .bootstrap-select>.dropdown-toggle.bs-placeholder:focus, .bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
	color: #7f7f7f!important;
}

.text {
	display: flex;
	align-items: center;
}

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
	width: 100%!important;
}

.btn-check:focus + .btn-light, .btn-light:focus {
	border: 0!important;
	box-shadow: 0 0 0 transparent!important;
}

.dropdown-toggle::after {
	border: 6px solid transparent!important;
	border-top: 6px solid!important;
	border-bottom: 0!important;
}

.dropdown-item.active, .dropdown-item:active {
	background-color: #e30f9f;
	color: #fff!important;
}

.filter-option-inner-inner .choose_class {
	color: #7f7f7f;
}

.form-group .bootstrap-select .dropdown-toggle:focus, .bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
	outline-width: .0px!important;
	border: 0.5px solid #7f7f7f!important;
}

.btn-light {
	background-color: #fff!important;
	border-color: #ced4da!important;
}

.btn-primary {
	transition: .2s;
	background-color: #e30f9f;
	padding-right: 26px;
	padding-left: 26px;
	border: 0;
}

.btn-primary:hover {
	transition: .2s;
	background-color: #eb38b2;
	border: 0;
}

.btn-primary:active {
	transition: .2s;
	background-color: #be0984;
	border: 0;
}

.btn-primary:focus {
	transition: .2s;
	border: 0;
	box-shadow: 0 0 0 0.25rem rgba(0,0,0,0)!important;
}

.add_job_table tbody tr {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.add_job_table tbody tr td {
	width: 48%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.add_job_table tbody tr td .form-group {
	width: 100%;
}
.add_job_table tbody tr td .td_row {
	width: 48%;
}
.page-content .header {
	position: relative;
    left: 25px;
    top: 20px;
    font-size: 29px;
    display: flex;
    padding-left: 15px;
    border-left: 5px solid #e30f9f;
    background-color: rgba(0, 0, 0, 0.82);
    width: 280px!important;
    box-shadow: 1px 0px 9px -2px rgb(32 227 148 / 68%);
    margin-bottom: 30px;
}

.page-content .header .sub_header {
	position: absolute;
    right: 15px;
    font-size: 15px;
    padding: 10px;
    color: #c8cbd2;
    padding-right: 0;
}

.admin-content {
	z-index: 0;
	display: flex;
	position: relative;
	width: calc(100% - 270px);
	left: 270px;
	min-height: 100vh;
	background-color: #e4e4e4;
	background-image: url('../images/BG_PATTERN.png');
	color: white;
	
}

.pop-up-overlay {
	-webkit-animation:overlay-ease-in 0.2s;
	-moz-animation:overlay-ease-in 0.2s;
	-ms-animation:overlay-ease-in 0.2s;
    position: fixed;
    z-index: 800;
    background-color: rgba(0,0,0,.4);
    width: 100%;
    height: 100vh;
    cursor: pointer;
}

.pop-up-overlay-ease-out {
	-webkit-animation:overlay-ease-out 0.2s;
	-moz-animation:overlay-ease-out 0.2s;
	-ms-animation:overlay-ease-out 0.2s;
    position: fixed;
    z-index: 800;
    background-color: rgba(0,0,0,.4);
    width: 100%;
    height: 100vh;
}

.pop-up-box-ease-out {
	-webkit-animation:pop-out 0.25s;
	-moz-animation:pop-out 0.25s;
	-ms-animation:pop-out 0.25s;
	position: fixed;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 801;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%);
    max-width: 510px;
    min-width: 420px;
    min-height: 220px;
}

.pop-up-box {
	-webkit-animation:pop-in 0.25s;
	-moz-animation:pop-in 0.25s;
	-ms-animation:pop-in 0.25s;
	position: fixed;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 801;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%);
    max-width: 510px;
    min-width: 420px;
    min-height: 220px;
}

@-webkit-keyframes overlay-ease-out {
	0% { background-color: rgba(0,0,0,.4); }
	100% { background-color: rgba(0,0,0,0); }
}

@-moz-keyframes overlay-ease-out {
	0% { background-color: rgba(0,0,0,.4); }
	100% { background-color: rgba(0,0,0,0); }
}

@keyframes overlay-ease-out {
	0% { background-color: rgba(0,0,0,.4); }
	100% { background-color: rgba(0,0,0,0); }
}

@-webkit-keyframes overlay-ease-in {
	0% { background-color: rgba(0,0,0,0); }
	100% { background-color: rgba(0,0,0,.4); }
}

@-moz-keyframes overlay-ease-in {
	0% { background-color: rgba(0,0,0,0); }
	100% { background-color: rgba(0,0,0,.4); }
}

@keyframes overlay-ease-in {
	0% { background-color: rgba(0,0,0,0); }
	100% { background-color: rgba(0,0,0,.4); }
}

@-webkit-keyframes pop-out {
	0% { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(0.5); }
}

@-moz-keyframes pop-out {
	0% { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(0.5); }
}

@keyframes pop-out {
	0% { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(0.5); }
}

@-webkit-keyframes pop-in {
	0% { opacity: 0; -webkit-transform: scale(0.5); }
	100% { opacity: 1; -webkit-transform: scale(1); }
}

@-moz-keyframes pop-in {
	0% { opacity: 0; -moz-transform: scale(0.5); }
	100% { opacity: 1; -moz-transform: scale(1); }
}

@keyframes pop-in {
	0% { opacity: 0; transform: scale(0.5); }
	100% { opacity: 1; transform: scale(1); }
}

.pop-up-header {
	padding: 8px;
	padding-right: 10px;
	display: flex;
	width: 100%;
	justify-content: flex-end;
	background-color: #de4cb1;
}

.pop-up-header a {
	transition: .2s;
	color: #000000;
}

.pop-up-header a:hover {
	color: #7b0101;
}

.pop-up-content {
	padding: 6px;
	min-height: 148px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pop-up-footer {
	display: flex;
	flex-direction: row;
	width: 100%;
	background-color: #de4cb1;
	position: absolute;
    bottom: 0;
}

.confirm-button {
	transition: .2s;
	display: flex;
	flex: 1;
	padding: 4px;
	justify-content: center;
	color: #e1e1e1;
	font-weight: 700;
	text-decoration: none;
	background-color: #04a804;
	text-transform: uppercase;
}

.cancel-button {
	transition: .2s;
	display: flex;
	flex: 1;
	padding: 4px;
	justify-content: center;
	color: #e1e1e1;
	font-weight: 700;
	text-decoration: none;
	background-color: #cc2b2b;
	text-transform: uppercase;
}

.btn-green:hover {
	color: white; 
	background-color: #0cb80c;
}

.btn-red:hover {
	color: white; 
	background-color: #fb4848;
}

.add-container {
	width: 100%;
	height: 20px;
	background-color: gray;
}

#tag_table_wrapper tr a {
	color :#e30f9f;
}

.disabled {
	pointer-events: none;
	color: #9e4483!important;
}

#tag_insert {
	display: none;
}

#tag_insert td {
	background-color: rgba(0, 0, 0, 0.05);

}

#tag_table_wrapper {
	padding: 25px;
	background-color: transparent;
	color: black;
}

.content-container {
	padding: 25px;
	background-color: white;
	color: black;
}

#tag_table_wrapper thead tr {
	background-color: #7f0f60!important;
	font-size: 14px;
	color: white;
}

#tag_table_wrapper tfoot .footer {
	background-color: #7f0f60!important;
	font-size: 14px;
	color: white;
}

div.dataTables_wrapper div.dataTables_filter {
	font-size: 13px!important;
}

div.dataTables_wrapper div.dataTables_info {
	font-size: 12px!important;
}

div.dataTables_wrapper div.dataTables_length label {
	font-size: 12px!important;
}

.pagination {
	font-size: 11px!important;
}

.page-item.active .page-link{
	background-color: #e30f9f!important;
	border-color: #e30f9f!important;
}

.page-link{
	border-color: #e30f9f!important;
	color: #e30f9f!important;
	box-shadow: 0!important;
}

.page-item.disabled .page-link {
	border-color: #e30f9f!important;
}

.page-item.active .page-link {
	color: white!important;
}

#tag_table_tbody tr {
	font-size: 13px!important;
}

.content-wrapper {
	padding: 24px;
	border: 1px solid #21ed9e;
}

.jobs_container {
	display: flex;
	flex-direction: column;
	background-color: white;
	padding: 12px;
	border-radius: 10px;
	margin-top: 25px;
	-webkit-box-shadow: 0px 0px 8px -3px #000000; 
	box-shadow: 0px 0px 8px -3px #000000;
}

.job_row {
	display: flex;
	flex-direction: column;
}

.accordion_detail {
	transition: .1s;
	position: relative;
	z-index: -1;
	width: 100%;
	top: -8px;
	background-color: white;
	color: black;
	min-height: 0px;
	max-height: 0px;
	border-radius: 0px 0px 10px 10px;
	padding: 0px;
	padding-left: 32px;
	color: transparent;
}

.accordion_detail_open {
	transition: .2s;
	padding: 32px!important;
	padding-bottom: 16px!important;
	max-height: 120px!important;
	color: black!important;
}

.accordion_arrow_open {
	transition: .2s;
	transform: rotate(90deg);
}

.detail_text_p {
	line-height: 16px;
	font-size: 14px;
	display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

.recived-job-badge-aligner {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: flex-end;
	align-items: center;
}

.badge {
	padding: 4px;
	padding-left: 6px;
	padding-right: 6px;
	border-radius: 5px;
}

.job_row.detail {
	flex-direction: column;
	padding-left: 14px;
	padding-bottom: 20px;
}

.title_row {
	display: flex;
}

.detail_container {
	font-size: 13px;
	background-color: white;
	border-radius: 10px;
	word-wrap: break-word;
  	overflow: hidden;
  	text-overflow: ellipsis;
	color: black;
	height: 88px;
	padding: 14px;
}

.all_jobs_container {
	padding-top: 1px;
	padding-right: 20px;
	padding-left: 20px;
}


.deadline {
	text-align: center;
    background-color: #eb4c54;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    padding: 2px;
    padding-right: 10px;
    padding-left: 10px;
    min-width: 119px;

    border-radius: 3px;
    line-height: 13px;
}

.tags_container {
	display: flex;
	justify-content: flex-end;
	margin-top: -27px;
}

.tag {
	transition: .6s;
    position: relative;
    top: -5px;
    height: 26px;
   	padding: 2px;
    max-width: 19px;
    padding-left: 2px;
    margin-right: 4px;
    word-wrap: break-word;
    overflow: hidden;
    border-radius: 3px;
}

.tag span {
	transition: .3s;
	color: transparent;
	display: inline-block;
	pointer-events: none;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently */

}

.tag:hover {
	transition: .5s;
	padding: 2px;
	max-width: 999px;
	padding-right: 7px;
	padding-left: 7px;
}

.tag:hover span { 
	transition: .7s;
	pointer-events: none;
	color: white;
}

.information_container {
	display: flex;
}

.received_date_container {
	font-size: 11px;
    font-weight: 600;
    padding: 3px;
    padding-right: 16px;
    border-radius: 3px;
    padding-left: 16px;
    text-align: center;
    background-color: #a5a5a5;
}

.sent_by_container {
	font-size: 11px;
    font-weight: 600;
    padding: 3px;
    min-width: 190px;
    padding-right: 16px;
    border-radius: 3px;
    padding-left: 16px;
    text-align: center;
    background-color: #3f3f3f;
}

.detail_button {
	transition: .2s;
    position: relative;
    top: -1px;
    text-decoration: none;
    color: #8888ff;
    padding: 3px;
    padding-right: 17px;
    padding-left: 17px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid #8888ff;
    text-align: center;
}

.detail_button span {
	transition: .2s;
    position: relative;
    top: .5px;
    left: 0px;

}

.job_recived_arrow {
	transition: .2s;
	color: black;
	font-size: 17px!important;
	padding-top: 3px;
}

.detail_button:hover span {
	transition: .2s;
    left: -8px;
}

.detail_button:after {
	position: absolute;
    transition: .2s;
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 10px;
    padding: 5.5px;
    padding-left: 0;
    content: "\f054";
    color: transparent;
    transform: translateX(20px);
    pointer-events: none;
}

.informations_table {
	width: 100%;
}

.informations_table td {
	padding-right: 20px ;
}

.informations_table .last {
	padding-left: 20px;
    padding-right: 12px;
}

.detail_button:hover {
	transition: .2s;
	color: #aaaaff;
    border: 1.5px solid #aaaaff;
}

.detail_button:hover:after {
	transition: .2s;
	color: #aaaaff;
	transform: translateX(5px);
    pointer-events: auto;
}

.time_left {
	background-color: #68d3d9!important;
}

.job_detail_container {
	padding-left: 30px;
	padding-right: 30px;
	display: flex;
	justify-content: space-between;
	height: calc(100vh - 185px);
	padding-top: 25px;
}

.detail_section {
	width: 100%;
	background-color: white;
	border-radius: 6px;
    -webkit-box-shadow: 0px 0px 8px -3px #000000; 
	box-shadow: 0px 0px 8px -3px #000000;
	margin-top: 15px;
}

.detail_section .d_header {
	background-color: white;
	border-radius: 6px;
    -webkit-box-shadow: 0px 0px 8px -3px #000000; 
	box-shadow: 0px 0px 8px -3px #000000;
	padding: 6px;
}

.detail_section .detail_header_container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding-left: 5px;
	padding-right: 5px;
}

.detail_section .detail_header_container .detail_brand_title {
	color: black;
	font-size: 24px;
	text-transform: uppercase;
	font-weight: 500;
}

.detail_section .detail_header_container .detail_title {
	display: flex;
	padding: 2px;
	padding-left: 8px;
	padding-right: 8px;
	justify-content: center;
	align-items: center;
	background-color: #828282;
	border-radius: 4px;
}

.detail_header_container a {
	transition: .1s;
	color: black!important;
}

.detail_header_container a:hover {
	transition: .1s;
	color: #828282!important;
}

.detail_section .detail_content {
	color: black;
	padding: 18px;
	overflow: hidden;
}

.detail_section .text_container {
	max-height: 33.3vh;
	overflow-x: hidden;
	padding-right: 12px;
	word-break: break-word;
}

.detail_section .text_container p {
	text-align: justify;
}

.detail_content ::-webkit-scrollbar {
 width: 10px;
 height: 6px;
}

.detail_content ::-webkit-scrollbar-thumb {
 background: #808080;
 border-radius: 100px;
}

.detail_content ::-webkit-scrollbar-track
{
 	border-radius: 100px;
	background-color: #cecece;
}

.detail_tag_container {
	display: inline-block;
	text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    max-height: 120px;
    min-height: 120px;
}

.detail_tag_container .detail_tag {
	    display: inline;
    text-align: center;
    padding: 6px;
    line-height: 30px;
    margin: 2px;
    border-radius: 4px;
    font-size: 12px;
    color: white;
}
.detail_tag_container .detail_tag span {
	pointer-events: none;
}

.start_stop_pause_container {

}

.start_stop_times {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 12px;
	padding-bottom: 0;
}

.start_stop {
	display: flex;
	flex-direction: row;
	padding: 12px;

}

.start_stop button {
	transition: .2s;
	min-width: 80px;
	max-width: 80px;
	min-height: 80px;
	max-height: 80px;
	margin-right: 6px;
	border: 0px solid #000;
	background-color: #444444;
	text-transform: uppercase;
	color: white;
	border-radius: 7px;
}

.start_stop button:disabled {
	transition: .2s;
	background-color: rgba(68, 68, 68, .5);
}

.start_spend_time_container {
	min-width: 170px;
	max-width: 170px;
	min-height: 80px;
	max-height: 80px;
	background-color: #444444;
	padding: 12px;
	padding-top: 5px;
	padding-bottom: 16px;
	border-radius: 7px;
}

.start_spend_time_container div {
	display: flex;
	flex-direction: column;
	margin-top: 6px;
	line-height: 13px;
}

.start_spend_time_container div span {
	font-size: 14px;
}

.start_spend_time_container div .time_header {
	font-size: 10px;
}

.start_stop .button_inside {
	display: flex;
	flex-direction: column;
}

.start_stop .button_inside i {
	font-size: 30px;
    margin-top: 10px;
}

.start_stop .button_inside span {
	padding-top: 5px;
    font-weight: 700;
    font-size: 11px;
}

.detail_col_section {
	min-width: 451px;
    max-width: 451px;
}

.detail_deadlines {
	text-align: center;
    background-color: #eb4c54;
    font-size: 11px;
    font-weight: 700;
    padding: 6px;
    flex: .495;
    border-radius: 3px;
}

.empty-detail-container {
	width: 100%;
	height: 217px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.file_item {
	display: flex;
	flex: 1;
	padding-right: 10px;
	padding-left: 10px;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 60px;
	border-bottom: 1px solid rgba(0,0,0,.15);
	margin-right: 15px;
}

.file_item_left {
	display: flex;
	flex: 1;
	flex-direction: row;
}

.file_item_left i {
	color: #828282;
}

.file_item_rigth {
	display: flex;
	flex-direction: row;
}

.file_item_rigth .context_menu_a {
	font-size: 1.3em;
    text-decoration: none;
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file_menu {
	display: none;
	position: absolute;
	margin-top: 10px;
	margin-left: 14px;
	z-index: 10;
	padding: 12px 0;
	width: 240px;
	background-color: #fff;
	border: solid 1px #dfdfdf;
	box-shadow: 1px 1px 2px #cfcfcf;
}

.file_menu.open {
	display: block;
}

.file_menu ul {
	list-style: none;
  	margin: 0;
  	padding: 0;
}
.file_menu li {
	display: block;
  	margin-bottom: 4px;
}
.file_menu li:last-child {
	margin-bottom: 0;
}

.context_menu_item_a {
	display: block;
  	padding: 4px 12px;
  	color: #0066aa;
  	text-decoration: none;
  	cursor: pointer;
}

.context_menu_item_a:hover {
  color: #fff;
  background-color: #0066aa;
}

.file_item_left i {
	font-size: 40px;
}
.file_item_left span {
	display: flex;
	text-align: left;
	flex: 1;
	padding-left: 10px;
	align-items: center;
}

.detail_file_content {
	max-height: 234px;
    min-height: 234px;
    overflow-x: hidden;
}

.chat_container {
	max-height: 548px;
	min-height: 548px;
	overflow-y: scroll;
	padding: 10px;
	scroll-behavior: auto;

}

.chat_input_container {
	-webkit-box-shadow: 0px 0px 8px -5px #000000;
    box-shadow: 0px 0px 8px -5px #000000;
	height: 40px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.chat_input_container input {
	border: 0;
	font-size: 14px;
	padding: 6px;
	padding-left: 12px;
	width: 100%;
	height: 100%;
	border-radius: 0 0 6px 6px;
}

.chat_input_text {
	flex: 1;

}

.chat_input_buttons {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-right: 16px;
}

.chat_input_buttons a {
	margin-left: 55px;
}

.received_massage_container {
	display: block;
    background-color: #00b3fe;
    color: white;
    max-width: 270px;
    padding: 11px;
    padding-left: 11px;
    padding-right: 11px;
    padding-bottom: 0px;
    margin-bottom: 10px;
    word-break: break-all;
    border-radius: 10px 10px 10px 0px;
}

.received_massage_container::after {
	display: block;
    content: "a";
    position: relative;
    top: 2px;
    left: -15px;
    transform: rotate(301deg);
    padding: 0px;
    color: #00b3fe;
    overflow: hidden;
    border-radius: 0px 0px 0px 150px;
    background-color: #00b3fe;
    height: 10px;
    width: 15px;
}

.massage_tick {
	width: 100%;
    font-size: 11px;
    position: relative;
    top: 0px;
    padding-right: 6px;
    display: flex;
    justify-content: flex-end;
}

.massage_header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.massage_sender_name {
	font-size: 13px;
    font-weight: 600;
    padding: 3px;
}


.send_massage_container {
	display: block;
    background-color: #36d3ff;
    color: white;
    max-width: 270px;
    float: right;
    padding: 11px;
    padding-left: 11px;
    padding-right: 11px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    word-break: break-all;
    border-radius: 10px 10px 0px 10px;
}

.sent_parent {
	display: flex;
    flex: 1;
    justify-content: flex-end;
}

.detail_content.chat {
	padding-right: 10px;
	padding-bottom: 0!important;
}

.chat::-webkit-scrollbar {
 display: none;
}

.error-container {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 999999;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, .5);
}

#error-page {
	display: none;
}

.error-massage {
	position: relative;
	color: white;
	top: -165px;
	font-size: 20px;
}

.checkmark_circle_error {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 5px;
  stroke-miterlimit: 10;
  stroke: #ff4444;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: block;
  stroke-width: 5px;
  stroke: white;
  stroke-miterlimit: 10;
  margin: 10% auto;
}
.checkmark.success {
  box-shadow: inset 0px 0px 0px #00C851;
  animation: fillsuccess 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
}
.checkmark.error {
  box-shadow: inset 0px 0px 0px #ff4444;
  animation: fillerror 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
}

.checkmark_check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.9s forwards;
}

.progress {
  transform: rotate(-90deg);
  stroke: black;
}

.progress circle {
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  animation: dash 1.5s infinite;
}

@keyframes dash {
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -130;
  }
}
.progress {
  position: absolute;
  top: 5%;
  left: 5%;
}
.progress.progress--thin {
  left: auto;
  right: 5%;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fillsuccess {
  100% {
    box-shadow: inset 0px 0px 0px 75px #00C851;
  }
}
@keyframes fillerror {
  100% {
    box-shadow: inset 0px 0px 0px 75px #ff4444;
  }
}

.spend_white {
	font-weight: 500;
}

.spend_gray {
	color: #c9c9c9;
	padding-right: 4px;
	padding-left: 4px;
	font-weight: 500;
}

.security_breach_container {
	position: absolute;
    width: 250px;
    height: 110px;
    text-align: center;
    padding: 3px;
    background-color: white;
    border-radius: 6px;
    text-transform: uppercase;
    color: #808080;
    font-size: 13px;
    transform: translate(calc(((100vw / 2) - 280px)), calc(100vh / 2.9));
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-box-shadow: 0px 0px 8px -3px #000000;
    box-shadow: 0px 0px 8px -3px #000000;
}

.informations_table tbody tr td {
	min-width: 103px;
}

.informations_table .last {
	min-width: 0px;
}

.subtitle {
	font-size: 14px;
	color: gray;
	text-align: center;
}

.edit_button {
	display: flex; 
	align-items:center; 
	margin-right: 5px; 
	text-decoration:none;
}


.apporove_button {
	width:100%;
	height:80px; 
	margin-right: 5px; 
	text-transform: uppercase; 
	color: white; 
	text-decoration: none;
}

.reject_button {
	width:100%;
	height:80px; 
	text-transform: uppercase; 
	color: white; 
	text-decoration: none;
}

.pending_bttns_inside {
	display: flex; 
	justify-content: center; 
	align-items: center; 
	width:100%;
	height: 100%;
	border-radius: 5px;
}

.apporove_button_color {
	background-color: #86e686;  
}

.reject_button_color {
	background-color: #e68686;  
}

.detail_button.disabled {
	pointer-events: none;
    color: #00000069!important;
    border: 1.5px solid #00000069!important;
    text-decoration: line-through!important;
}