/*
# ==================================================================================================================================================================
#	author: 		Emely Buchholt - Datamanix
#	parameters:		
#	date: 			25/08-2021
#	version: 		v2.0.0.0
#	task:			#2025
#	purpose: 		CSS, includes overriting mobirise and bootstrap, but also custom styling
#	note: 			
# ==================================================================================================================================================================
*/

/* ========================================== */
/* 		General styling and classes			  */
/* ========================================== */
*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	color: #fff;
}

a{
	color: #fff;
}

a:hover{
	color: #fff;
}

/* body have a gradient background between black and blue, but it should not be applied to the error page body tag with id dm_cb_error */
body:not(#dm_cb_error){
	background: rgb(52,117,177);
	background: -moz-linear-gradient(0deg, rgba(52,117,177,1) 90%, rgba(51,51,51,1));
	background: -webkit-linear-gradient(0deg, rgba(52,117,177,1) 90%, rgba(51,51,51,1));
	background: linear-gradient(0deg, rgba(52,117,177,1) 90%, rgba(51,51,51,1));
}

/* this is the error page body style, it has a gradient between the blue color and a image */
body#dm_cb_error, body#dm_cb_login{
	margin: auto;
    width: 100%;
    height: 100vh;

    background-image: linear-gradient( 90deg, #3475b1 0%, rgba(0,0,0,0) 100% ), url("../gfx/Concert.jpeg");
    background-position: right center;
    background-size: cover;
  
}
/*
body#dm_cb_login div.dm_cb_black50{
	display: flex;
    justify-content: center;
    align-items: center;
}
*/

body#dm_cb_error section.error_sec, body#dm_cb_login section.dm_cb_login_form{
	display: flex;
    justify-content: center;
	align-items: center;
	height: 90vh;
}

/* styling for the error message h1 */
body#dm_cb_error h1{
	text-align: center;
	padding: 10px;
}

/* background color that is black with 50% opacity */
.dm_cb_black50{
	background-color: rgba(0, 0, 0, .50);
}

/* background color that is black with 75% opacity */
.dm_cb_black25{
	background-color: rgba(0, 0, 0, .25);
}

/* background color that is black with 75% opacity */
.dm_cb_black30{
	background-color: rgba(0, 0, 0, .30);
}

/* ========================================== */
/* 				Overriting mobirise			  */
/* ========================================== */

/* removing default light grey background */
section, article, div{
	background-color: transparent;
}

/* change background on .divider on details page   */

.divider{
	background-color: #fff;
}

.modal-content{
	background-color: #3475b1;
	height: unset;
}

/* ============================ */
/* 			menu and nav		*/
/* ============================ */

/* changing height on menu */
#menu1-2{
	min-height: 80px !important;
}

#menu1-2 nav{
	min-height: 80px !important;
}

/* adding background color to navbar */
.cid-swkTjxTvTe .navbar{
	background-color: rgba(0, 0, 0, .25);
}

/* setting width on logo */
.cid-swkTjxTvTe .navbar-brand .navbar-logo a img{
	width: 49%;
}

/* making logo and logout on same line */
.navbar .container-fluid{
	display: flex;
}

.navbar .container-fluid .navbar-brand{
	width: 10%;
}
.navbar .container-fluid .navbar-logout{
	width: 40%;
}

.dm_cb_companylogo img{
	width: 30%;
}

/* ========================================== */
/* 				Job list styling			  */
/* ========================================== */

/* put a border on the top of the jobs, but we don't want one on the first of the original list - but all should have on the 'Show more' list */
.dm_cb_jobslist .wrap:not(:first-of-type), .dm_cb_morecon .wrap{
	border-top: 1px solid rgb(255 255 255 / 50%);
}


/* ========================================== */
/* 				Crew on job styling			  */
/* ========================================== */

.dm_cb_salarycon input{
	background-color: transparent;
    border: 1px solid #fff;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.dm_cb_salarycon input[type="number"]{
/* 	width: 10%; */
	-moz-appearance: textfield;
}


/* ========================================== */
/* 				Input styling				  */
/* ========================================== */

.input_div{
	position: relative;
	font-size: 14px;
	padding-top: 20px;
	margin-bottom: 5px;
}

.input_div input{
	background: none;
    border: 2px solid #ddd;
    transition: border-color 0.3s ease;
    appearance: none;
	padding: 12px;
	border-radius: 3px;
	width: 100%;
	outline: none;
	font-size: 14px;
}
.input_div input + .label-name{
	left: 8px;
	padding: 0 5px;
}
.input_div .label-name{
	position: absolute;
    left: 12px;
    top: calc(50% + 10px);
    transform: translateY(-50%);
    color: #aaa;
    transition: top 0.3s ease, color 0.3s ease, font-size 0.3s ease;
}

.input_div input:focus, .input_div input:valid{
	border-color: #656565;
	transition-delay: 0.1s
}
.input_div input:focus + .label-name, .input_div input:valid + .label-name{
	top: 20px;
	font-size: 10px;
	color: #fff;
}
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  transition: background-color 5000s ease-in-out 0s;
}

/* overriting bootstrap bg-color on button */
.btn-outline-light:hover{
	background-color: transparent;
}


.btn:not(a.btn):hover{
	background-color: transparent;
	border: 1px solid #fff;
}
/* ========================================== */
/* 				Responsive design			  */
/* ========================================== */
.dm_cb_salarycon input#Addition{
		width: 23%;
	}
	.dm_cb_salarycon input#HoursTimeConsumptionContact{
	    width: 23%;
	}

/* ============================ */
/* 			Mobile phone		*/
/* ============================ */
@media (max-width: 500px){
	
/* 	changing width on logo on mobile  */
	.cid-swkTjxTvTe .navbar-brand .navbar-logo a img{
		width: 100%;
	}
	
/* 	changing buttons to be 49% instead of 25% - 49% to make sure they have a bit of space between them */
	button.w-25{
		width: 49% !important;
	}
	
/* 	set font-size for the date on detail page to be bigger on mobile */

/* 	the data in the middle */
	.justify_custom_con .display-5{
		font-size: 1.95rem;
	}
	
/* 	the day, month and year */
	.justify_custom_con .display-7{
		font-size: 1.50rem;
	}
	
/* 	login formular */
	#dm_cb_login .w-50{
		width: 95% !important;
	}
	
	#dm_crewboss_loginbtn{
		width: 60% !important;
	}
	
	.dm_cb_salarycon input#Addition{
		width: 40%;
	}
	.dm_cb_salarycon input#HoursTimeConsumptionContact{
	    width: 75%;
	}
	.dm_cb_salarycon div#dm_HoursTimeConsumptionContact_div{
		width: 15%;
	}
	
	.dm_cb_companylogo img {
	    width: 60%;
	}
}

/* ============================ */
/* 				iPad			*/
/* ============================ */
@media (max-width: 991px) and (min-width: 501px){
/* 	changing width on logo on ipad  */
	.cid-swkTjxTvTe .navbar-brand .navbar-logo a img{
		width: 80%;
	}
	/* 	login formular */
	#dm_cb_login .w-50{
		width: 75% !important;
	}
	
	.dm_cb_salarycon input#Addition{
		width: 35%;
	}
	.dm_cb_salarycon input#HoursTimeConsumptionContact{
	    width: 35%;
	}
	
	.dm_cb_companylogo img {
		width: 45%;
	}
}