#content {
    margin-top: 90px;
    padding-left: 0;
    padding-right: 0;  
    /*min-height : 800px; */
	min-height : 100vh;
    font-size : 0.8em;
}

#navbar {
    background-color: var(--primary);
}

#navbar .link,
#navbar .drop-down-label,
#navbar .logo {
    text-shadow: none !important;
}

.card {
    width: 100%;
    max-width: 650px;
}

.card-body button[type=submit] {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    font-size : 1em;
}

.form-error {
    display: none;
    background-color: #f5cccf;
    border: 1px solid lightpink;
    color: darkred;
    border-radius: 4px;
    padding: 8px;
}

.form-error.show {
    display: block;
}

#forgot-pswd {
    font-weight: 400;
    font-size: 0.8em;
    cursor: var(--primary);
    cursor: pointer;
    padding-left:5px;
    margin-left: auto;
    margin-right: auto;
}

#forgot-pswd:hover {
    text-decoration: underline;
}

#pswd-modal {
    width: 100%;
    max-width: 650px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 2px solid var(--shadow);
    border-radius: 8px;
    padding: 16px 8px;
    display: none;
    flex-direction: column;
    gap: 16px;
    z-index: 111;
	font-size: 0.8em;
}

#pswd-modal .btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

#pswd-modal .btn.ok-btn {
    margin-left: auto;
}

#pswd-modal.show {
    display: flex;
}

.backdrop {
    display: none;
}

#pswd-modal.show+.backdrop {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 110;
    background-color: rgba(0, 0, 0, .5);
}

#subcontentLogin  {
    margin-left: -250px;
    max-width:none;    
} 

.titleSignIn {
    font-weight : normal;
    font-size: 1.5em;
    padding-bottom:15px;
}

#imgWorkerLogin {
    border-radius: 50%; width:350px; height:350px;position:relative; top:0px; left:350px
}

#imgStationLogin{
    border-radius: 50%; width:200px; height:200px;position:relative; top:175px; left:-100px
}

#id, #pswd {
    border-bottom: 1px solid var(--primary);
    font-size : 1em;
}

#id::placeholder {
    font-size : 1em;
}

#pswd::placeholder {
    font-size : 1em;
}


#bkgLoginLinesLeft {
    border-left : 2px solid var(--primary); 
    border-bottom : 2px solid var(--primary); 
    border-radius: 0 0 0 45px; 
    position:relative; 
    height: 320px;
    width: 550px;
    top:-55px; 
    left:200px;
}

#bkgLoginLinesLeft:before {
    background: none;
    border-bottom : 2px solid var(--secondary);
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 85px;
    right: 50px;
    bottom: 6px;
    pointer-events: none;
}

#bkgLoginLinesLeft:after {
    background: none;
    border-bottom : 2px solid var(--secondary);
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 120px;
    right: 70px;
    bottom: -10px;
    pointer-events: none;
}


#bkgLoginLinesRight {
    border-bottom : 2px solid var(--primary); 
    position:relative; 
    width:500px;
    /*top:-150px; */
	top: -260px;
    left:50px;
}

#bkgLoginLinesRight:before {
    background: none;
    border-bottom : 2px solid var(--secondary);
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 85px;
    right: 0px;
    bottom: 6px;
    pointer-events: none;
}

#bkgLoginLinesRight:after {
    background: none;
    border-bottom : 2px solid var(--secondary);
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 120px;
    right: 0px;
    bottom: -10px;
    pointer-events: none;
}


#bkgLoginCirclesRight {
    background-color : var(--primary); 
    border : 15px solid rgb(4, 81, 132, 0.6);
    border-radius : 50%;
    position:relative; 
    width:150px;
    height:150px;
    top:-100px; 
    left:-50px;
}

@media only screen and (max-width: 1550px) {
    #content {
        margin-top: 99px;
    }
}

@media only screen and (max-width: 1150px) {
    #bkgLoginLinesLeft, #bkgLoginLinesRight {
        display: none;
    }  
}

@media only screen and (max-width: 768px) {
    .card-body button[type=submit] {
        margin-left: 0;
        margin-right: 0;
    }   
    #content {
        min-height: 0;
    }

    #bkgLoginLinesLeft, #bkgLoginLinesRight, #imgWorkerLogin, #imgStationLogin {
        display: none;
    } 
    #subcontentLogin  {
        margin-left: 0;
    } 
}

@media only screen and (max-width: 480px) {
    #content {
        margin-top: 87px;
        min-height: 0;
    }
}