@charset "UTF-8";

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css");

:root {
  --background-dark: #1F1F22;
  --background-light: #ffffff;
  --text-color-dark: #FFFFFF;
  --text-color-light: #1F1F22;
  --brand-color: #4F825C;
  --pulse-color: #2E2727;
  --background-alert: #790000;
  --text-color-button: #FFFFFF;

<link href="css/capture.css" rel="stylesheet" type="text/css"><link href="css/capture.css" rel="stylesheet" type="text/css"><link href="css/capture.css" rel="stylesheet" type="text/css">}


/* ############################# */

.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
    z-index: 999;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: var(--brand-color);
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: var(--brand-color);
  background: none;
  border:none;
}
.popup .close:hover {
  color: var(--background-dark);
}
.popup .content {
  max-height: 30%;
  overflow: auto;
  color: var(--background-dark);
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}

/* ####################### */


.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.alert-danger, .close {
	background-color: var(--background-alert);
	color: var(--text-color-button);
	border: 1px solid var(--background-dark);
}
.alert-success, .close {
	background-color: var(--brand-color);
	color: var(--text-color-button);
	border: 1px solid var(--background-dark);
}


body.darkmode--activated {
	background: var(--background-dark);
    mix-blend-mode: unset;
    color: var(--text-color-dark);

	/*text-align:center;*/
}

body{
    background: var(--background-light);
    font: 110%/1.4 sans-serif;
    font-weight: 100;
    color: var(--text-color-light);
    padding: 0;
    margin: 0;
    isolation: isolate;
    mix-blend-mode: unset;
}

h1, h3, h4, h2, h5, h6{
    color: var(--brand-color);
	text-transform: uppercase;
}

a{
   color: var(--brand-color);
}

a:hover{
    text-decoration: none;
}

/*Use only for banner headlines*/
h3 {
	color: white;
}

*:focus {
    outline-color: transparent!important;
    outline-style: none!important;
    outline: none!important;
    box-shadow:none !important;
    -moz-box-shadow: none!important;
    -webkit-box-shadow: none!important;
    border-color: var(--brand-color)!important;
}

.spacer {
	height:4rem;
}
.simpleupload .uploadbutton {
    display: block;
    background-color: var(--background-light);
    border: 1px solid var(--brand-color);
    color: var(--brand-color);
    height: 3em;
    isolation: isolate;
    line-height: 1rem;
    text-transform: uppercase;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

@media screen and (max-width:767px) {
    .spacer {
	    height:2rem;
    }
}

@media screen and (max-width:992px) {
    .m-hide{
        display: none;
    }
    .m-show{
        display: block;
    }
}

@media screen and (max-width:578px) {
    .s-hide{
        display: none;
    }
    .s-show{
        display: block;
    }
}

.logo svg{
    fill: var(--brand-color);
    width: 3rem;
}
/*
.logo img{
    width: 110px;
}
*/
/*Navigation elements*/

.titlebar { /*LOGO*/
	width: 100%;
	text-align: center;
	height: 70px;
	padding-top: 15px;
	padding-bottom: 15px;

}


.navbar {
    background: var(--brand-color);
	color: var(--text-color-dark);
	margin-top: 15px;
	padding:0 1rem;
    text-transform: uppercase;
}

.darkmode--activated .nav-item .bi {
	color: var(--background-light);
}

.nav-item .bi {
    font-size: 2rem;
	color: var(--background-dark);
}

 .nav-item .bi{
    color: var(--background-light);
}
.nav-menue{
	font-size: 0.8rem;
}

.nav-item .bi:hover {
	color: white;
}

.nav-link,
.navbar-brand {
    color: var(--text-color-dark);
    cursor: pointer;
	font-weight: 100;
	letter-spacing: 0.1em;

}

.nav-link {
    margin-right: 1em !important;
	color: var(--text-color-dark);
	float:left;
	font-size: 0.5em;
	margin-left: 15px;
}

.nav-link:hover {
    color: ar(--brand-color);
}

.navbar-collapse {
    justify-content: flex-end;
}

.bi-speedometer2,
.bi-shield-plus,
.bi-lightbulb,
.bi-moon,
.bi-wrench{
	font-size: 4rem;
	color: var(--brand-color);
	margin-top: -0.5em;
}



/*Content elements*/



.features {
    margin: 4em auto;
    padding: 1em;
    position: relative;
	font-size: 1.0rem;
	text-align: center;
}
.features p {
	padding-top: 1em;
	padding-bottom: 1em;
	font-size: 1.0rem;
}

.feature-title {
    color: var(--brand-color);
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
}

.description {
    color: var(--text-color-dark);
    padding-top: 20px;
    position: relative;
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.5;
    padding-bottom: 20px;
}

.darkmode--activated .description p{
    color: var(--text-color-dark);
}

.description p{
    color: var(--text-color-light);
}

.login {
    position: relative;
    text-align: center;
}
.login h2, .login .row, .login .form-group {
	padding-top: 0.5em;
	padding-bottom: 0.5rem;
}

.login .new {
	float:left;
	margin-left: -55px;
	padding-top: 0.5em;
	font-size: 6rem;
}


.new .bi:hover {
  -ms-transform: rotate(45deg); /* IE 9 */
  transform: rotate(45deg);
}
 /*bg color change formfields*/

.form-control {
    border: 1px solid var(--brand-color);
    background-color: var(--background-dark);
    height: 3.0em;
    color: var(--brand-color);
    animation-name: pulse_form;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    box-sizing: border-box;
    font-size: 1.1rem;
    line-height: 1.5;
}
@keyframes pulse_form {
  //from {background-color:var(--background-dark);}
  //to {background-color:var(--pulse-color);}
}
.form-control::-webkit-input-placeholder {
  color: var(--brand-color);
}

input.form-control:focus{
    background:transparent;
}

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 {
  border: 1px solid var(--brand-color);
  -webkit-text-fill-color: var(--brand-color);
  -webkit-box-shadow: 0 0 0px 1000px var(--background-light) inset;
  transition: background-color 5000s ease-in-out 0s;
}

.darkmode--activated input:-webkit-autofill,
.darkmode--activated input:-webkit-autofill:hover,
.darkmode--activated input:-webkit-autofill:focus,
.darkmode--activated textarea:-webkit-autofill,
.darkmode--activated textarea:-webkit-autofill:hover,
.darkmode--activated textarea:-webkit-autofill:focus,
.darkmode--activated select:-webkit-autofill,
.darkmode--activated select:-webkit-autofill:hover,
.darkmode--activated select:-webkit-autofill:focus {
  border: 1px solid var(--brand-color);
  -webkit-text-fill-color: var(--brand-color);
  -webkit-box-shadow: 0 0 0px 1000px var(--background-dark) inset;
  transition: background-color 5000s ease-in-out 0s;
}

.vinSearchInput{
    position: relative;
}

.vinSearchInput i{
    position: absolute;
    color: var(--brand-color);
    right: 1rem;
    top: 0.4rem;
    font-size: 2rem;
    cursor: pointer;
}

.form-group button.dropdown-toggle {
  height: 44px!important;
}

/*VEHICLE INFORMATIONS*/
.veinformation {
	border: 1px solid var(--brand-color);
	border-radius: 4px;
    padding: 1em;
	font-size: 1rem;
    position: relative;
	text-align:left;
}
.veinformation_content_head {
    padding-top: 1em;
    position: relative;
	font-size: 0.9rem;
	text-align:left;
	border-bottom:1px solid var(--brand-color);
	height: 2rem;
    vertical-align: middle;
    line-height: 2rem;
    z-index: 0;
}

@media screen and (max-width:578px) {
    .veinformation_content_head{
        height: auto;
    }
}

.veinformation_content_divider {

    position: relative;
	font-size: 0.9rem;
	text-align:left;
	border-bottom:1px solid var(--brand-color);
	height: 1rem;
    vertical-align: middle;


}

.veinformation_content .headrow {
    color: var(--brand-color);


}

.veinformation_content {
    padding-top: 1em;
	padding-left: 0px;
    position: relative;
	font-size: 0.9rem;
	text-align:left;
	border-bottom:none;
	height: 2rem;
    vertical-align: middle;
    line-height: 2rem;
    z-index: 10;
}

@media screen and (max-width:992px) {
    .veinformation_content.vTwo{
        height: auto;
    }
}

@media screen and (max-width:578px) {
    .veinformation_content{
        height: auto;
    }
}

.veinformation_content_pics {
    padding-top: 1em;
	padding-left: 0px;
	margin-left: 1rem;
    position: relative;
	font-size: 0.8rem;
	text-align:left;
	border-bottom:none;
	height: 2rem;
    vertical-align: middle;
    line-height: 2rem;
}



.veinformation .bi {
	font-size: 2rem;
	color: var(--brand-color);
}
.veinformation_content .bi {
	font-size: 2rem;
	color: var(--brand-color);
}


/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 30px;
    transform: translateY(-50%);
    top: 50%;
}

.features .switch {
    transform: none;
    top: auto;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.darkmode--activated  .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--background-dark);
  -webkit-transition: .4s;
  transition: .4s;
  border:2px solid #ccc;
  z-index: 2;
}

.slider{
    background-color: var(--background-light);
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: .4s;
    transition: .4s;
    border:2px solid #ccc;
    z-index: 2;
}

.slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 4px;
  top: 1px;
  bottom: 2px;
  background-color: #CCC;
  -webkit-transition: .4s;
  transition: .4s;
}

.darkmode--activated input:checked + .slider {
  background-color: var(--background-dark);
}

input:checked + .slider {
    background-color: #e6e6e4;
    border-color: var(--brand-color);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--background-dark);

}

input:checked + .slider:before {
  -webkit-transform: translateX(44px);
  -ms-transform: translateX(44px);
  transform: translateX(44px);
  background-color: var(--brand-color);
}

/* Rounded sliders */
.slider.round {
  border-radius: 30px;
}

.slider.round:before {
  border-radius: 50%;
}

/* STEPS PAGES */

.nextstep{
	font-size: 0.8rem;
}

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

.pages {
	width: 3rem;
	height: 3rem;
	border: 1px solid var(--brand-color);
	border-radius: 4px;
	background-color: transparent;
	font-size: 1.5rem;
	color: var(--brand-color);
	margin: 0.5rem;
    cursor: pointer;
	display: flex;
 	align-items: center;
 	justify-content: center;
    isolation: isolate;
}

/*@media screen and (max-width:455px) {
    .pagescontainer :nth-child(1) {order: 6; }
    .pagescontainer :nth-child(2) {order: 1; }
    .pagescontainer :nth-child(3) {order: 2; }
    .pagescontainer :nth-child(4) {order: 3; }
    .pagescontainer :nth-child(5) {order: 4; }
    .pagescontainer :nth-child(6) {order: 5; }
    .pagescontainer :nth-child(7) {order: 7; }
}*/

@media screen and (max-width:455px) {
    .pages{
        display:none;
    }

    .pages.active,
    #paginate_left.pages,
    #paginate_right.pages,
    #paginate_bottom_left,
    #paginate_bottom_right{
        display: flex;
    }
}


.pages:hover {
	background-color: var(--brand-color);
	color: var(--text-color-button);
	text-decoration: none;
}

.pages.disabled:hover{
    background-color: transparent;
    color: var(--brand-color);
}

.active {
	background-color: var(--brand-color);
	color: var(--text-color-button);
	text-decoration: none;
}

.disabled {
	text-decoration: none;
	opacity: 0.5;
}

/*General Pictures*/

.card {
	border: 1px solid var(--brand-color);
  }

/*Banner (e.g. Cookiebanner)*/
.modal-content{
  background-color: var(--brand-color);
  animation-name: pulse;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;

		box-sizing: border-box;
		border-radius: 3px 15px 5px 30px;
		  font-size: 1.3rem;
    line-height: 1.5;
	color: var(--text-color-button);
      }

.take-a-picture .modal-content{
    background: none;
    animation-name: none;
    border: none;
}

.modal-body-status{
	font-size: 0.8rem;
	text-align: center;
	padding-top: 1.5rem;
}
.modal-content.form-control {
    border: 1px solid var(--brand-color);
    background-color: var(--background-dark);
    color: var(--brand-color);
    animation-name: pulse_form;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    box-sizing: border-box;
    font-size: 0.8rem;;
    line-height: 1.5;
}
.modal-content.form-control {
	background-color: var(--background-dark);
}
.modal-content select {
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzRGODI1QyIgY2xhc3M9ImJpIGJpLWNhcmV0LWRvd24iIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTMuMjA0IDVoOS41OTJMOCAxMC40ODEgMy4yMDQgNXptLS43NTMuNjU5bDQuNzk2IDUuNDhhMSAxIDAgMCAwIDEuNTA2IDBsNC43OTYtNS40OGMuNTY2LS42NDcuMTA2LTEuNjU5LS43NTMtMS42NTlIMy4yMDRhMSAxIDAgMCAwLS43NTMgMS42NTl6Ii8+Cjwvc3ZnPgo=) no-repeat 95% 50% var(--background-light);
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}
.darkmode--activated .modal-content select{
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzRGODI1QyIgY2xhc3M9ImJpIGJpLWNhcmV0LWRvd24iIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTMuMjA0IDVoOS41OTJMOCAxMC40ODEgMy4yMDQgNXptLS43NTMuNjU5bDQuNzk2IDUuNDhhMSAxIDAgMCAwIDEuNTA2IDBsNC43OTYtNS40OGMuNTY2LS42NDcuMTA2LTEuNjU5LS43NTMtMS42NTlIMy4yMDRhMSAxIDAgMCAwLS43NTMgMS42NTl6Ii8+Cjwvc3ZnPgo=) no-repeat 95% 50% var(--background-dark);
}
.modal-content label {
	font-size: 0.9rem;

}
@keyframes pulse {
  from {background-color:var(--pulse-color);}
  to {background-color:var(--brand-color);}
}
      .button-fixed{
      bottom: 0;
      position: fixed;
      right: 0;
      border-radius: 4px;
	  color: var(--brand-color);

      }
      .fas, .fa, .far {
      cursor: pointer;
      font-size: 20px;
      }

.btn.focus,
.btn:focus,
input:focus,
input:active {
    outline: 0;
    box-shadow: none;
    text-decoration: none;
}



.btn:not(.btn-danger) {
	background-color: var(--background-light);
	border: 1px solid var(--brand-color);
	color: var(--brand-color);
	min-height: 2.5em;
    isolation: isolate;
    line-height: 0.7rem;
}

.btn {
	min-height: 2.5em;
    isolation: isolate;
    line-height: 1rem;
}

.btn-secondary {
    background:none;
    color:var(--text-color-button);
    border-color: var(--text-color-button);
}

.modal .btn-secondary{
    background:none;
    color:var(--text-color-button);
    border-color: var(--text-color-button);
}

.modal .btn-secondary:hover{
    background: var(--background-light);
    color:var(--brand-color);
}

.darkmode--activated .btn {
	background-color: var(--background-dark);
}
/*
.darkmode--activated .btn.btn-primary{
	background-color: var(--brand-color);
}*/

.darkmode--activated .btn.btn-primary:hover{
	background-color: var(--background-dark);
    color:var(--brand-color);
    border-color:var(--brand-color);
}

.darkmode--activated .modal .btn.btn-secondary{
    background: var(--brand-color);
    color:var(--background-light);
}

.darkmode--activated .modal .btn.btn-secondary:hover{
    background: var(--background-light);
    color:var(--brand-color);
}

    @media screen and (max-width:989px) {
        .btn {
            margin-bottom: 1rem;
        }
    }

.btn-primary{
    color: var(--text-color-button);
    background: var(--brand-color);
}

.btn-primary{
    color: var(--text-color-button);
    background: var(--brand-color);
}

.modal .btn-primary{
    color: var(--brand-color);
    background: var(--background-light);
}

.modal .btn-primary:hover{
    color: var(--text-color-button);
    background: var(--brand-color);
}



.btn:not(.btn-danger):hover{
	color: var(--text-color-button);
	background-color:var(--brand-color);
    border-color:var(--background-dark);
}

.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle,
.btn-primary.focus,
.btn-primary:focus {
	color: var(--brand-color);
    background: var(--text-color-button);
    border-color:var(--background-dark);
}

.btn-link:hover{
    text-decoration: none;
}

.darkmode--activated .btnuser {
	background-color: transparent;
}
.btnuser {
    background-color: transparent;
    border-top: none;
    border-left: 1px solid var(--brand-color);
    border-right: 1px solid var(--brand-color);
    border-bottom: 1px solid var(--brand-color);
    color: var(--brand-color);
    padding: 1rem;
    float: right;
    font-size: 1.0rem;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    font-weight: 100;
    isolation: isolate;
}
.btnuser:hover {
	color: var(--text-color-button);
	background-color:var(--brand-color);
}

/*ACCORDION*/
#accordion .card{
    position: relative;
    top: 5px;
}
#accordion .card:first-child{
    position: relative;
    top: initial;
}
.card .card-header {
	background-color: var(--brand-color);
    padding: 0;
}
.card .card-header button{
    width: 100%;
}

.card .card-header .btn{
    background-color: var(--brand-color);
    color: var(--text-color-dark);
    text-transform: uppercase;
}
.darkmode--activated .card-header .btn{
    color: var(--background-dark);
}
.card .card-header .btn:hover,
.card .card-header .btn-primary:hover{
    border-color: var(--brand-color);
}

.card .collapse .btn{
    border-top-left-radius:4px;
    border-top-right-radius:4px;
    border-bottom-left-radius:0px;
    border-bottom-right-radius:0px;
}
.card .collapsed {
	background-color: var(--background-dark);
}

.darkmode--activated .card .card-body {
	background-color: var(--background-dark);
}
.card .card-body {
	background-color: var(--background-light);
}
.card .ve-input {
	font-size: 0.8rem;
    position: relative;
	text-align:left;
}
.card .form-control {
    border: 1px solid var(--brand-color);
    color: var(--brand-color);
    animation-name: pulse_form;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    box-sizing: border-box;
    font-size: 0.8rem;;
    line-height: 1.5;
}

.card input.form-control {
    background: transparent;
}

.card select {
  background:transparent;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
}

.select-wrapper {
    position: relative;
}

.select-wrapper::before {
    font-family: "Font Awesome 5 Free";
    content: "\f078";
    font-weight: 900;
    color: var(--brand-color);
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 11px;
    pointer-events: none;
    z-index: 2;
}

/* TODO: maybe we can do this better - until now it works fine for commit and capture version */

@media screen and (max-width:991px) {
  .basicD01{order:  1;}
  .basicD02{order:  3;}
  .basicD03{order:  4;}
  .basicD04{order:  2;}
  .basicD05{order:  7;}
  .basicD06{order:  8;}
  .basicD07{order:  5;}
  .basicD08{order:  6;}
  /*.basicD09{order: ?;} not used */
  .basicD10{order: 13;}
  .basicD11{order: 14;}
  .basicD12{order: 15;}
  .basicD13{order: 17;}
  .basicD14{order: 22;}
  .basicD15{order: 10;}
  .basicD16{order: 11;}
  .basicD17{order:  9;}
  .basicD18{order: 12;}
  .basicD19{order: 18;}
  .basicD20{order: 19;}
  .basicD21{order: 20;}
  .basicD22{order: 21;}
  .basicD23{order: 16;}
}


@media screen and (max-width:576px) {
  /*.basicD01{order:1;} version Mareike
  .basicD02{order: 2; margin-bottom: 0;}
  .basicD03{order: 4; margin-bottom: 0;}
  .basicD04{order: 6;}
  .basicD05{order: 7;}
  .basicD06{order: 8;}
  .basicD07{order: 3;}
  .basicD08{order: 5; margin-top: 1rem;}*/
  .basicD01{order:  1;}
  .basicD02{order:  3; margin-bottom: 0;}
  .basicD03{order:  4;}
  .basicD04{order:  2;}
  .basicD05{order:  7; margin-bottom: 0;}
  .basicD06{order:  8;}
  .basicD07{order:  5;}
  .basicD08{order:  6;}
  /*.basicD09{order: ?;} not used */
  .basicD10{order: 13;}
  .basicD11{order: 14;}
  .basicD12{order: 15;}
  .basicD13{order: 17;}
  .basicD14{order: 22;}
  .basicD15{order: 10;}
  .basicD16{order: 11;}
  .basicD17{order:  9;}
  .basicD18{order: 12;}
  .basicD19{order: 18;}
  .basicD20{order: 19;}
  .basicD21{order: 20;}
  .basicD22{order: 21;}
  .basicD23{order: 16;}
}




.loader {
  margin: auto;
  border: 12px solid var(--text-color-dark);;
  border-top: 12px solid var(--background-dark);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 1.2s linear infinite;
}

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

/*VEHICLE SVG COLOR*/


	.st0{fill:var(--brand-color);}
	.st1{clip-path:url(#SVGID_4_);}
	.st2{clip-path:url(#SVGID_6_);}
	.st3{fill-rule:evenodd;clip-rule:evenodd;fill:var(--brand-color);}
	.st4{opacity:0.4;fill:var(--text-color-dark);}
	.st5{clip-path:url(#SVGID_8_);}
	.st6{opacity:0.4;fill:#FFFFFF;enable-background:new    ;}

.modal-body button,
.modal-footer button{
    width: 100%;
}

/* -- // LANGUAGE CHANGE // --*/

  .sl-nav {
  display: inline;
}
.sl-nav ul {
  margin:0;
  padding:0;
  list-style: none;
  position: relative;
  display: inline-block;
}
.sl-nav li {
  cursor: pointer;
  padding-bottom:10px;
}
.sl-nav li ul {
  display: none;
}
.sl-nav li:hover ul {
  position: absolute;
  top:60px;
  right:-10px;
  display: block;
  background: var(--brand-color);
  width: 125px;
  padding-top: 0px;
  z-index: 1;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
  text-transform: initial;
  border-radius:4px;
}

@media screen and (max-width:770px) {
    .sl-nav li:hover ul {
        position: relative;
        top:initial;
        right:initial;
        display: block;
        background:none;
        width: 100%;
        padding-top: 0px;
        z-index: 1;
        box-shadow: initial;
        text-transform: initial;
        border-radius:none;
    }
}

.sl-nav .widenav li:hover ul {
    width: 155px;
}

.sl-nav li:hover .triangle {
  position: absolute;
  top: 46px;
  right: 40px;
  z-index:10;
  height: 14px;
  overflow:hidden;
  width: 30px;
  background: transparent;
}
@media screen and (max-width:770px) {
    .sl-nav li:hover .triangle {
        display: none;
    }
}
.sl-nav li:hover .triangle:after {
  content: '';
  display: block;
  z-index: 20;
  width: 15px;
  transform: rotate(45deg) translateY(0px) translatex(13px);
  height: 15px;
  background: var(--brand-color);
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
}
.sl-nav li ul li {
  position: relative;
  text-align: left;
  background: transparent;
  padding: 15px 15px;
  padding-bottom:0;
  z-index: 2;
  font-size: .9rem;
  color: var(--text-color-dark);
}
@media screen and (max-width:770px) {
    .sl-nav li ul li {
        color: var(--text-color-dark);
    }
}
.sl-nav li ul li:last-of-type {
  padding-bottom: 15px;
}
.sl-nav li ul li span {
  padding-left: 5px;
}

.sl-nav li ul li span.active {
    background-color: initial;
    color: var(--text-color-dark);
}
.sl-nav li ul li span:hover{
    background-color: initial;
    color: var(--background-dark);
}
.sl-flag {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: #aaa;
  border-radius: 50%;
  position: relative;
  top: 2px;
  overflow: hidden;
}
.flag-de {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTM0A1t6AAAAPUlEQVQ4T+3HMQ0AIBTE0NOHM8x9B7hgh71bIWGieUvze1m7kHGBr/AVvsJX+EpmP5dV5/gKX+ErfIUvVDYcX2NMxQC8PAAAAABJRU5ErkJggg==');
  background-size: cover;
  background-position: center center;
}
.flag-usa {
  background-size: cover;
  background-position: center center;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTM0A1t6AAABhUlEQVQ4T2Ows82PjGixsc4LD2tysC/09Kjw8622tyuICG8u0w/cpGSCBzF4e1VmZkzw9anOzOj38a4KCW4IC22ECHYk1l9tn4gHMeTlTnZxLikvm+XiUpKW2hvgX+vnV5OVOQEoOGfOtv94AYOzU3Fd7XxHh6Lq6rlurqUx0W0J8Z1AnbW18yotonaYuOJBDBXls4A+bGpaBCTz86YEBtQCvVBSPAPIbY0oP1/aiAcxABU1Ny+2tclvbFjo5FgUF9uenNwNDLnmpkWEnV1TPRcY1O1tS4H6i4umA/0MDK2K8tlAwRqHpP1uoXgQKKraWpcClTY3LQZaCLQ5NaUX5OaWJY3++SeTC/AgBmA4AXUClUJs9ver8fKsAAYEUJCws4G21dXNB1oFdD/Qz8DQTk4C+bm2dn6DZ9bRiDQ8iAEYt8CoBpK5YBIYw0AEEZwSXX4oMB4PYoC6gCzAcDqrjGzEsMfen2xEmbMv1rSTjRi26dqRjShz9o2+6WQjBrSShQSkZAIADvW/HLrLY6cAAAAASUVORK5CYII=');
}

/*TAB NAV*/

.nav-tabs{
    border-bottom: none;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    flex-direction: row;
}

@media screen and (max-width:767px) {
    .nav-tabs{
       margin-bottom: 0.95rem;
    }
}

@media screen and (max-width:542px) {
    .nav-tabs{
        flex-direction: column;
    }
}

.nav-tabs a{
    color: var(--brand-color);
    border: 1px solid var(--brand-color);
    padding: 1rem;
    border-top-left-radius:4px;
    border-top-right-radius:4px;
    font-size: 1rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

@media screen and (max-width:767px) {
    .nav-tabs a{
       font-size: 0.8rem;
    }
}

@media screen and (max-width:542px) {

    .nav-tabs a{
        display: block;
        border-radius:4px;
    }

}

.nav-tabs a.active,
.nav-tabs a:hover{
    background-color:var(--brand-color);
    color: var(--text-color-dark);
}


.nav-tabs li{
	padding:0 0.5rem 0 0;
}

@media screen and (max-width:542px) {

    .nav-tabs li{
        height: 4rem;
    }

}

.tab-content {
    position: relative;
    top: -2px;
}

    .tab-content div .container{
        padding-left: 0;
        padding-right: 0;
    }

    .tab-content div .container .container {
        padding-right: 15px;
        padding-left: 15px;
    }

.tab-content>.active{
    color:var(--text-color-light);
    background: none;
    border-top: 1px solid var(--brand-color);
    padding: 1rem 0;
}

.darkmode--activated .tab-content>.active{
    color:var(--text-color-dark);
}

/* daterangepicker */

.daterangepicker{
    background: var(--brand-color);
    border: none;
    color: var(--background-dark);
}

.daterangepicker .calendar-table,
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date{
    background-color: var(--brand-color);
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date{
    color: var(--background-dark);
    opacity: 0.3;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--background-dark);
    border-color: transparent;
    color: var(--text-color-dark);
}

.daterangepicker:after{
    border-bottom: 6px solid var(--brand-color);
}

.daterangepicker:before {
    border-bottom: 7px solid var(--brand-color);
}

.daterangepicker td.available:hover{
    background-color: var(--background-dark);
    color: var(--text-color-dark);
}

.daterangepicker th.available:hover {
    background-color: transparent;
    color: var(--text-color-dark);
}

.daterangepicker .drp-buttons{
    border-top: 1px solid var(--background-dark);
}

.capitalize {
    text-transform: uppercase;
}
@media screen and (max-width:500px) {
    .veinformation_content{
        line-height: 1.2rem;
    }
}

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

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

input[type="file"] {
    display: none;
}

foreignObject{
    cursor: pointer;
}

svg{
    overflow: overlay;
}

.cam1_line_active_left,
.cam1_cam_active_left,
.cam1_cam_inner_active_left{
transition: transform .8s ease-in-out;
transform: rotate(-15deg);
}

.cam2_line_active_left,
.cam2_cam_active_left,
.cam2_cam_inner_active_left{
transition: transform .8s ease-in-out;
transform: rotate(-15deg);
transform-origin: bottom right;
}

.cam1_line_active_right,
.cam1_cam_active_right,
.cam1_cam_inner_active_right{
transition: transform .8s ease-in-out;
transform: rotate(15deg);
}

.cam2_line_active_right,
.cam2_cam_active_right,
.cam2_cam_inner_active_right{
transition: transform .8s ease-in-out;
transform: rotate(15deg);
transform-origin: bottom right;
}

.cam_line_active_back,
.cam_cam_active_back,
.cam_cam_inner_active_back{
transition: transform .8s ease-in-out;
transform: rotate(0deg);
}

.cam2_line_active_back,
.cam2_cam_active_back,
.cam2_cam_inner_active_back{
transition: transform .8s ease-in-out;
transform: rotate(0deg);
transform-origin: bottom right;
}

#vinjax_info_text{
    margin: 0 0 1rem;--background-dark: #1F1F22;
}

.vinjax_result div:nth-child(2n-1){
    font-weight: 600;
}

.form-group input{
    background:var(--background-light);
    border: 1px solid var(--brand-color);
}

.darkmode--activated .form-group input{
    background:var(--background-dark);
}

#capSignature,
.drawing-board-canvas,
.drawing-board-canvas-wrapper{
    width: 100% !important;
    max-width: 100% !important;
}

@media screen and (max-width:767px) {
    #capSignature,
    .drawing-board-canvas,
    .drawing-board-canvas-wrapper{
        height: 200px !important;
    }
}

a#imga1 {
    transform: translate(-3px, -4px);
}

a#imga2 {
    transform: translate(-20px,-4px);
}

a#imga3 {
    transform: translate(-15px, -2px);
}

a#imga4 {
    transform: translate(-2px,3px);
}

a#imga5 {
    transform: translate(-2px,3px);
}

foreignObject{
    border-radius: 100%;
}

.puls-cam .bi-camera{
    font-size: 0.8rem;
    color: var(--brand-color);
    transform: scale(1);
    animation: pulscam 2s infinite;
}

/*image.puls-cam{
    position: relative;
    display: inline-block;
    transform: scale(1);
    animation: pulscam 2s infinite;
    transform-origin: center center;
}*/

.darkmode--activated .puls-cam .bi-camera{
    color:#fff;
}

@keyframes pulscam {
	0% {
		transform: scale(0.95);
	}

	70% {
		transform: scale(1.2);
	}

	100% {
		transform: scale(0.95);
	}
}

foreignObject.puls-cam{
    width: 35px;
    height: 43px;
    text-align: center;
}

#trash_image1,
#trash_image2,
#trash_image3,
#trash_image4,
#trash_image5,
#img1atrash,
#img2atrash,
#img3atrash,
#img4atrash,
#img5atrash{
    position: relative !important;
    z-index: 999 !important;
}

/* GHOSTING PICTURE */

img.carbeauty,
img.carfront,
img.carback,
img.carleft,
img.carright{
    opacity: 0.6;
}

img.carbeauty{
   max-width: 65%;
}

img.carfront,
img.carback {
    max-width: 56%;
}

img.carleft,
img.carright {
    max-width: 100%;
}

@media screen and (orientation:portrait) {
    img.carfront,
    img.carback {
    max-width: 90%;
    }
}



/* Customize the label (the container) */
.cartype {
  position: relative;
  margin-bottom: 5px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.midicon {
  padding-left: 10px;
  padding-right: 10px;
}

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

/* Create a custom radio button */
.cartypeIcon {
  fill: var(--background-dark);
  transition: transform .3s; /* Animation */
}

.darkmode--activated .cartypeIcon {
  fill: #fff;
}

/* On mouse-over, add a grey background color */
.cartype:hover input ~ .cartypeIcon {
    transform: scale(1.2);
    fill: var(--brand-color);
    opacity: 0.6;
}

/* When the radio button is checked, add a blue background */
.cartype input:checked ~ .cartypeIcon {
  fill: var(--brand-color);
}

.cartype:hover input:checked ~ .cartypeIcon {
  fill: var(--brand-color);
  opacity: 1;
}

@media screen and (orientation:landscape) {
    .video-container{
        position: relative;
        width: 90%;
        transform: translateX(-50%);
        left: 50%;
    }
}

.camera{
    position: relative;
}

@media screen and (max-width:755px) {

    .camera{
        position: relative;
        width: 90%;
        left: 50%;
        transform: translateX(-50%);
    }

}


.camera img#ghosting{
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 45%;
    margin: 0;
    padding: 0;
    width: 100%;
}

#saveimage.bi-check2.disabled{
    display: none;
}

#saveimage.bi-check2,
#clearbutton.bi-eraser-fill{
    cursor: pointer;
    color:#fff;
    font-size:2.6rem;
    border: 5px solid rgba(255,255,255,0.5);
    border-radius: 100%;
    position: absolute;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transform: translateY(-50%);
}

#clearbutton.bi-eraser-fill{
    left:2rem;
}

#saveimage.bi-check2{
    right:2rem;
    top: -2.5rem;
	animation: pulsation 2s infinite;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
    transform: translate(-50%,-50%) scale(1);
}

#switchvideobutton.bi-arrow-repeat{
    cursor: pointer;
    color:#fff;
    font-size:2.6rem;
    border: 5px solid rgba(255,255,255,0.5);
    border-radius: 100%;
    transform: translateY(-50%);
    left: 2rem;
    position: absolute;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

#startbutton.bi-camera,
#lightbutton.bi-zoom-in{
    cursor: pointer;
    color:#fff;
    font-size:2.6rem;
    border: 5px solid rgba(255,255,255,0.5);
    border-radius: 100%;
    transform: translate(-50%,-50%);
    left: 50%;
    position: absolute;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

#startbutton.bi-camera{
    transform: translate(-50%,-50%) scale(1);
	animation: pulsation 2s infinite;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
    top: -2.5rem;
    margin-left: -15%;
}

#startbutton.bi-camera:hover,
#switchvideobutton.bi-arrow-repeat:hover,
#saveimage.bi-check2:hover,
#clearbutton.bi-eraser-fill:hover{
    background-color: var(--brand-color);
}



@keyframes pulsation {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}

#startbutton.bi-camera,
#switchvideobutton.bi-arrow-repeat,
#clearbutton.bi-eraser-fill,
#startbutton.bi-camera,
#saveimage.bi-check2{
    width: 5rem;
    height: 5rem;
    text-align: center;
}

#zoom.form-range{
    position: relative;
    width: 70%;
    transform: translateX(-50%);
    left:50%;
}

@media screen and (max-width:755px) {
    #startbutton.bi-camera,
    #clearbutton.bi-eraser-fill,
    #lightbutton.bi-zoom-in,
    #switchvideobutton.bi-arrow-repeat,
    #saveimage.bi-check2{
        font-size:1.5rem;
        border: 3px solid rgba(255,255,255,0.5);
    }
    #startbutton.bi-camera,
    #switchvideobutton.bi-arrow-repeat,
    #clearbutton.bi-eraser-fill,
    #saveimage.bi-check2{
    width: 3rem;
    height: 3rem;
    }
    #startbutton.bi-camera{
        top: -1.5rem;
    }
    #zoom.form-range{
        top: -10px;
    }

    #saveimage.bi-check2{
        top: -1.5rem;
    }


}


 /*@media (min-aspect-ratio: 16/9) {
    .take-a-picture.modal-dialog {
        height: 123vh;
        width: calc((16/9)*100vh);
    }
}*/

.take-a-picture .modal-body{
    padding: 0;
}

@media screen and (max-width:990px) {
    .take-a-picture.modal-dialog{
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
}

.camera-control{
    position: absolute;
    width: 100%;
    margin:-4rem 0 0;
}

@media screen and (max-width:755px) {
    .camera-control{
       margin-top: -2.5rem;
    }
}

.camera #closephotox{
    position: absolute;
    color: #ffffff;
    top: 1rem;
    right: 2rem;
    width: auto;
    opacity: 1;
    z-index: 2;
    font-size: 2rem;
    background:none;
    border: none;
    padding: 0rem 0.2rem 0.2rem 0.2rem;
    transition: color .15s ease-in-out,background .15s ease-in-out;
}

.camera #closephotox:hover{
    transform: scale(1.2);
}

.svgCar{
    top:-6rem;
}

@media screen and (max-width:500px) {
  .svgCar {
    overflow: hidden;
  }
}

.svgCar svg{
    width: 80%;
}

@media screen and (max-width:500px) {
  .svgCar svg{
    width: 130%;
  transform: translateX(-50%);
  left: 50%;
  position: relative;
  }
}

.svgCarPagination{
    position: relative;
    top:-10rem;
}

@media screen and (max-width:990px) {
    .svgCar{
        top:-3rem;
    }

    .svgCarPagination{
        position: relative;
        top:-5rem;
    }
}



/* USER AREA CALENDAR*/

.calendar{
    position: relative;
    max-width: 700px;
    transform: translateX(-50%);
    left: 50%;
    -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.36);
    -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.36);
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.36);
    border-radius: 1rem;
    border: 5px solid rgba(0, 0, 0, 0.1);
}

.darkmode--activated .calendar{
    background: var(--background-light);
}

.calendar header{
    padding: 1rem;
}

#calenderApp .calendar header .btn-prev{
    left:1rem;
    top:1rem;
}

#calenderApp .calendar header .btn-next{
    right:1rem;
    top:1rem;
}

#calenderApp .calendar .event-container {
    background: rgba(51,51,51,0.9);
}

#calenderApp .calendar .filler {
    background: rgba(51,51,51,0.9);
}

#calenderApp .calendar .event-container .close {
    background: none;
    border: none;
    right:22px;
    top: 21px;
}

.calendar .event-summary button{
    margin-top: 1rem;
}

.calendar h2{
    font-size: 3rem;
}

#calenderApp .calendar table{
    margin: 0;
}

#calenderApp .calendar td {
    padding: .3em .1em;
}

#calenderApp .calendar header .simple-calendar-btn {
    width: 40px;
    height: 40px;
    line-height: 40px;
}

#calenderApp .calendar header .simple-calendar-btn:focus{
    border-color: transparent !important;
}

#calenderApp .calendar header .simple-calendar-btn:before {
    top: 12px;
    left: 10px;
    width: 12px;
    height: 12px;
}

@media screen and (max-width:500px) {

    #calenderApp .calendar{
        padding: 0 0.3rem;
    }

    #calenderApp .calendar .event-container{
        padding: 4rem 1rem;
    }

    #calenderApp .calendar thead,
    #calenderApp .calendar .day{
        font-size: 1rem;
    }

    #calenderApp .calendar .event-container .event-date,
    #calenderApp .calendar .event-container .event-hour{
        font-size: 1rem;
    }

}

.pulserec {
  width: 22px;
  height: 22px;
  margin-top: 13px;
  background: #da0a22;
  border-radius: 50%;
  cursor: not-allowed;
  box-shadow: 0 0 0 rgba(218,10,34, 0.4);
  animation: pulserec 2s infinite;
}

.pdfReport button{
    width: 25rem;
    max-width: 100%;
}

@-webkit-keyframes pulserec {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(218,10,34, 0.4);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(218,10,34, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(218,10,34, 0);
  }
}
@keyframes pulserec {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(218,10,34, 0.4);
    box-shadow: 0 0 0 0 rgba(218,10,34, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(218,10,34, 0);
      box-shadow: 0 0 0 10px rgba(218,10,34, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(218,10,34, 0);
      box-shadow: 0 0 0 0 rgba(218,10,34, 0);
  }
}

/* ############# SVG Vehicle - Commit Photos ############# */

.svgCar{
  position: relative;
}

.svgCar img[src='']{
  display: none;
}

.vCircleWrapper{
  position: absolute;
  width: 90px;
  height: 90px;
  z-index: 2;
}

@media screen and (max-width:767px) {
  .vCircleWrapper{
    width: 50px;
    height: 50px;
  }
}

.vCircleWrapper.One{
  top: 155px;
  transform: translateX(-50%);
  left: 49.7%;
}

@media screen and (max-width:1200px) {
  .vCircleWrapper.One{
    top: 139px;
  }
}

@media screen and (max-width:992px) {
  .vCircleWrapper.One{
    top: 95px;
  }
}

@media screen and (max-width:767px) {
  .vCircleWrapper.One{
    top: 11%;
  }
}

@media screen and (max-width:500px) {
  .vCircleWrapper.One{
    top: 11%;
  }
}

.vCircleWrapper.Two {
  top: 50%;
  transform: translateY(-50%);
  left: 30.7%;
}

@media screen and (max-width:992px) {
  .vCircleWrapper.Two {
    left: 28.7%;
  }
}

@media screen and (max-width:500px) {
  .vCircleWrapper.Two {
    left: 19.7%;
  }
}

.vCircleWrapper.Three {
  bottom: 224px;
  transform: translateX(-50%);
  left: 49.7%;
}

@media screen and (max-width:1200px) {
  .vCircleWrapper.Three {
    bottom: 190px;
  }
}

@media screen and (max-width:992px) {
  .vCircleWrapper.Three {
    bottom: 127px;
  }
}

@media screen and (max-width:767px) {
  .vCircleWrapper.Three {
    bottom: 14%;
  }
}

@media screen and (max-width:500px) {
  .vCircleWrapper.Three {
    bottom: 16%;
  }
}

.vCircleWrapper.Four {
  top: 50%;
  transform: translateY(-50%);
  right: 30.7%;
}

@media screen and (max-width:992px) {
  .vCircleWrapper.Four {
    right: 29.7%;
  }
}

@media screen and (max-width:500px) {
  .vCircleWrapper.Four {
    right: 21.7%;
  }
}

.vCircleWrapper.Five{
  top: 274px;
  transform: translateX(-50%);
  left: 34.7%;
}

@media screen and (max-width:1200px) {
  .vCircleWrapper.Five{
    top: 240px;
  }
}

@media screen and (max-width:992px) {
  .vCircleWrapper.Five{
    top: 178px;
  }
}

@media screen and (max-width:767px) {
  .vCircleWrapper.Five{
    top: 24%;
  }
}

@media screen and (max-width:500px) {
  .vCircleWrapper.Five{
    top: 21%;
    left: 26.7%;
  }
}

.vCircle{
  position: absolute;
  width: 90px;
  height: 90px;
  border: 6px solid var(--brand-color);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 100%;
  overflow: hidden;
}

@media screen and (max-width:767px) {
  .vCircle{
    width: 50px;
    height: 50px;
    border: 4px solid var(--brand-color);
  }
}

.vCircle img{
  position: relative;
  width: 150px;
  transform: translateX(-50%);
  left: 50%;
}

.vButton {
  position: relative;
  z-index: 2;
  top: -6px;
  right: 6px;
  height: 90px;
  width: 90px;
  border-radius: 100%;
}

@media screen and (max-width:767px) {
  .vButton {
    height: 50px;
    width: 50px;
  }
}

.vCircleWrapper .puls-cam{
  top: 11px;
  left: 23px;
}

@media screen and (max-width:767px) {
  .vCircleWrapper .puls-cam{
    top: 7px;
    left: 14px;
  }
}

.puls-cam .bi-camera {
  display: block;
  font-size: 2rem;
  color: var(--brand-color);
  transform: scale(1);
  animation: pulscam 2s infinite;
  z-index: 1;
}

@media screen and (max-width:767px) {
  .puls-cam .bi-camera {
    font-size: 1rem;
  }
}

#Pic1,
#Pic2,
#Pic3,
#Pic4,
#Pic5{
  position: absolute !important;
  top: -6px;
  right: -6px;
  height: 90px;
  width: 90px;
  border-radius: 100%;
}

@media screen and (max-width:767px) {
  #Pic1,
  #Pic2,
  #Pic3,
  #Pic4,
  #Pic5{
    height: 50px;
    width: 50px;
  }
}

#img1atrash,
#img2atrash,
#img3atrash,
#img4atrash,
#img5atrash {
  position: absolute !important;
  top: -6px;
  right: -23px;
}


/* PIDDER code add on capture version On request I put this into a separat .css file */
.rotateITmoves {
  animation: ITMrotation 1s infinite linear;
  position: absolute;
  left: 40%;
  top: 40%;

}

@keyframes ITMrotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

@-webkit-keyframes ITMrotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

@-moz-keyframes ITMrotation {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(359deg);
  }
}

.period_picker_input {
    width: 100%;
    height: 2.5em;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    display: flex;
    border: 1px solid var(--brand-color)!important;
    color: var(--brand-color);
    isolation: isolate;
}

.period_picker_input .period_button_text {
    margin: auto;
}

.period_picker_box {
    background-color: var(--background-light);
}
.card {
    overflow: visible!important;
}