/* ================================================================= */
/* FORMS CSS - 2.3.19 */
/* ================================================================= */

/* .formFieldWithButton input::-webkit-inner-spin-button,
.formFieldWithButton input::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
} */

#container.formsContainer {
	border-left: var(--formsBorder) solid transparent;
    border-right: var(--formsBorder) solid transparent;
}

#container.formUnsavedChanges {
    border-left: var(--formsBorder) solid var(--bdpCol);
    border-right: var(--formsBorder) solid var(--bdpCol);
}

.formUnsavedChangesWrapper {
    margin-bottom: 1em;
    text-align: center;
    height: var(--body);
}

#allChangesSavedWarning {
    color: var(--active);
}

#unsavedChangesWarning {
    color: var(--bdpCol);
}

#allChangesSavedWarning,
#unsavedChangesWarning {
    display: none;
}

#allChangesSavedWarning.formUnsavedChanges,
#unsavedChangesWarning.formUnsavedChanges {
    display: block;
}

.formsMainForm,
.formsIntroForm {
    display: grid;
    gap: 1em;
    grid-template-columns: auto;
    width: 100%;
    height: 100%;
}

.formsSubTitle {
    text-align: center;
    font-size: var(--tickSub);
    font-weight: var(--bld);
    margin-bottom: .5em;
}

.formsPPMLink {
    display: block;
    text-align: center;
    font-size: var(--tickSub2);
    font-weight: var(--bld);
    margin-bottom: .5em;
    text-decoration: none;
    color: var(--bdpCol);
}

.formsPPMLink:hover {
    color: var(--buttonHOVER);
}

.formLink {
    text-decoration: none;
    color: var(--bdpCol);
}

.formLink:hover {
    color: var(--buttonHOVER);
}

.formsContentWrapper {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto;
    grid-template-columns: auto;
    gap: 1em;
    width: 100%;    
}

.formInnerWrapper {
    display: -ms-grid;
    display: grid;
    gap: 1em;
    /* padding: 1em 0 0 0; */
    width: 100%;    
}

#leaveSubmission {
    margin-bottom: 1.5em;
}

/* #editForm .formInnerWrapper {
    padding: 0;
} */

.formInnerWrapper.oneCol,
.formInnerWrapper.twoCol {
    -ms-grid-columns: auto;
    grid-template-columns: auto;
}

.formSaveBarTop,
.formSaveBarBottom,
.formCustomTitleBar {
    padding: 0;
}

/* .formCustomTitleBar {
    margin-bottom: 1em;
} */

.formSaveBarHRTop,
.formSaveBarHRBottom {
    width: 30px;
    height: 1px;
    color: var(--inputBorderCol);
    background: var(--inputBorderCol);
    margin: 0 auto;
    margin-top: 1em;
    margin-bottom: 1em;
}

/* .formSaveBarHRBottom {
    margin-top: 1em;
} */

.formRow.save {
    display: grid;
    grid-template-columns: 1fr auto;
}

.formLabel {
	font-size: var(--body);
	font-weight: var(--bld);
	min-width: 117px;
    padding-bottom: 10px;
}

.formField {
    font-size: var(--body);
}

.formField input, .formField select {
    width: 100%;
    height: var(--inputHeight);
    padding: var(--inputPadding);
}

/* Modified select display for Job/Edit page. */
.formField select {
	/*https://codepen.io/vkjgr/pen/VYMeXp*/
	background-image: -o-linear-gradient(45deg, transparent 50%, var(--inputBorderCol) 50%), -o-linear-gradient(315deg, var(--inputBorderCol) 50%, transparent 50%), -o-linear-gradient(left, var(--inputBorderCol), var(--inputBorderCol));
	background-image: linear-gradient(45deg, transparent 50%, var(--inputBorderCol) 50%), linear-gradient(135deg, var(--inputBorderCol) 50%, transparent 50%), linear-gradient(to right, var(--inputBorderCol), var(--inputBorderCol));
	background-position: calc(100% - 22px) 22px, calc(100% - 17px) 22px, calc(100% - 2.5em) 10px;
	background-size: 5px 5px, 5px 5px, 1px 1.5em;
	background-repeat: no-repeat;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	-webkit-transition: none;
	-o-transition: none;
	transition: none;
}

.formField select:hover {
    cursor: pointer;
}

.formField textarea {
    width: 100%;
    height: var(--inputHeight);
    padding: var(--inputPadding);
}

.formField textarea:focus {
    height: var(--inputHeightTextarea);
    border: var(--inputBorderFOCUS);
    -webkit-box-shadow: var(--inputBoxShadowFOCUS);
    box-shadow: var(--inputBoxShadowFOCUS);
    background: var(--inputBGFOCUS);
}

/* .visitTypeList li {
    padding-bottom: .5em;
    display: inline-block;
    margin-right: 1em;    
} */

.visitTypeList label,
.visitTypeList input {
    cursor: pointer;
}

.visitTypeTickSheets ul {
    display: flex;
    flex-direction: column;
    gap: .5em;
}

.visitTypeTickSheets a {
    display: block;
}

.formField input[type="checkbox"] {
    min-width: auto;
    width: auto;
    height: auto;
}

.formField input[type="time"],
.formField input[type="date"] {
    cursor: text;
}

.formButton {
    text-align: center;
}

.formButton .formSubmit,
.formButton .formLeave {
    border-radius: 50px;
    padding: 0 2em;
    width: 200px;
    height: 50px;
    font-size: var(--buttonTxt);
    color: var(--txtColAlt);
    -webkit-transition: var(--inputTransition);
    -o-transition: var(--inputTransition);
    transition: var(--inputTransition);
}

/* @media screen and (min-width: 1025px) and (min-height: 830px) 
{
    .formButton .formSubmit,
    .formButton .formLeave {
        width: 250px;
        height: 70px;
    }
} */

.formSubmit {
    background: var(--finished);
}

.formSubmit:hover {
    cursor: pointer;
    background: var(--finishedHOVER)
}

.formSubmit.inactive {
    background: var(--inactive);
    border: 1px solid var(--inactive);
    cursor: not-allowed;
}

.formLeave {
    background: var(--button);
}

.formLeave:hover {
    cursor: pointer;
    background: var(--buttonHOVER)
}

.formRow.save .formSubmit {
    width: 150px;
    height: 50px;
    font-size: var(--buttonTxt);
    border-radius: 0;
}

.formRow.leave .formLeave {
    width: 200px;
    height: 50px;
    font-size: var(--buttonTxt);    
}

.formFieldWithButton {
    display: flex;
    position: relative;
}

.formFieldWithButton p {
    margin: 0;
}

.geolocationField {
    cursor: not-allowed;
}

.formImageTitle {
    margin-bottom: 1em;
}

.formImageWrap {
	display: grid;
	grid-template-columns: auto auto;
	gap: .5em;
}

.formImageWrap img {
	width: auto;
	max-width: 100%;
}

@media screen and (min-width: 641px)
{
    .formImageWrap {
		grid-template-columns: auto auto auto;
	}
}

@media screen and (min-width: 941px)
{
    .formsContentWrapper {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        gap: 1em;
    }

    .formInnerWrapper.twoCol {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
    
    .formInnerWrapper.arrival .formRow:nth-of-type(3),
    .formInnerWrapper.visit .formRow:nth-of-type(1),
    .formInnerWrapper.visit .formRow:nth-of-type(2),
    .formInnerWrapper.visit .formRow:nth-of-type(3),
    .formInnerWrapper.departure .formRow:nth-of-type(3) {
        grid-column: 1 / 3;
    }
}

.visitFieldWrap {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

#PpmCreateTick {
    width: 148px;
}

.checkedList,
.visitTypeList {
    display: flex;
    flex-direction: column;
    gap: .5em;
}

@media screen and (min-width: 941px)
{
    .visitTypeList {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1em;
    }
}

.checkedCheckboxTitle {
    font-weight: var(--bld);
}

.control {
    display: flex;
    position: relative;
    padding-left: 60px;
    cursor: pointer;
    font-size: 18px;
    flex-direction: column;
    justify-content: center;
    min-height: 50px;
}

.control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.control__indicator {
    position: absolute;
    top: 2px;
    left: 0;
    height: 50px;
    width: 50px;
    background: #e6e6e6;
}

.control--radio .control__indicator {
    border-radius: 50%;
}

.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
    background: #ccc;
}

.control input:checked ~ .control__indicator {
    background: var(--active);
}

.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
    background: var(--activeHOVER);
}

.control input:disabled ~ .control__indicator {
    background: #e6e6e6;
    opacity: 0.6;
    pointer-events: none;
}

.control__indicator:after {
    content: '';
    position: absolute;
    display: none;
}

.control input:checked ~ .control__indicator:after {
    display: block;
}

.control--checkbox .control__indicator:after {
    left: 16px;
    top: 1px;
    width: 12px;
    height: 32px;
    border: solid #fff;
        border-top-width: medium;
        border-right-width: medium;
        border-bottom-width: medium;
        border-left-width: medium;
    border-width: 0 6px 7px 0;
    transform: rotate(45deg);
}

.control--checkbox input:disabled ~ .control__indicator:after {
    border-color: #7b7b7b;
}