/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/JSP_Servlet/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 12 Sep 2024, 4:13:00 pm
    Author     : Laureano Culala
*/
@font-face {
    font-family: 'Source Sans Pro';
    src: url('fonts/SourceSansPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --navbar-height: 54px;
    --maxwid-sm: 575.98px;
    --minwid-sm: 576px;
    --maxwid-md: 767.98px;
    --minwid-md: 768px;
    --maxwid-lg: 991.98px;
    --minwid-lg: 992px;
    --maxwid-xl: 1199.98px;
    --minwid-xl: 1200px;
}

* {
    font-family: "Source Sans Pro", sans-serif !important;
}

*, ::before, ::after {
    box-sizing: border-box;
}

.navbar {
    z-index: 1050;
    padding-top: 0.5rem!important;
    padding-bottom: 0.5rem!important;
}

.bg-sss {
    background: #28628e;
    background-color: #28628e;
}

.ss-logo {
    display: flex !important;
    color: #fff;
}

.ss-logo i {
    font-size: 2.5rem;
}

.ss-logo .title-topsub {
    font-size: 0.75rem;
}

.ss-logo .title {
    font-size: 1.75rem;
    font-weight: bold;
    line-height: .8;
}

.login {
    min-width: 300px;
    max-width: 400px;
}

.login .login-head {
    color: #282a35;
    font-size: 18pt;
    font-weight: 700;
    margin: 0;
}

.login label {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    margin: 20px 0 0;
}

.head-sss {
    line-height: 1;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
    min-height: var(--navbar-height) !important;
}

.head-sss .navbar-brand {
    font-size: 1.75rem;
    line-height: 1;
    color: #fff;
    padding: 0;
}

.head-sss button {
    font-size: 1.5rem;
    line-height: 1;
}

.head-sss .userinfo div {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.head-sss .userinfo .user-ico {
    font-size: 1.75rem;
}

.sss-terms-footer {
    color: rgba(40, 42, 53, .65);
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 19px;
    padding: 5px;
    text-align: center;
}

@media (max-width: 575.98px) {
    .login {
        width: 100%;
        border: none !important;
    }
}

#sidebar.offcanvas {
    background-color: rgb(40, 98, 145);
}

#sidebar > .navbar .nav-link {
    font-size: 1.1rem !important;
    height: 100%;
    width: 100%;
    padding: 0.5em 1em;
}

#sidebar > .navbar .nav-link:hover {
    box-shadow: inset 3px 0 0 hsl(203, 79%, 44%);
    background-color: hsla(0, 0%, 100%, 0.05);
}

#sidebar > .navbar .nav-link.active {
    box-shadow: inset 3px 0 0 hsl(203, 79%, 44%);
    background-color: hsla(0, 0%, 100%, 0.05);
}

#sidebar > .navbar .nav-link > .menu-title,
#sidebar > .navbar .nav-link.active > .menu-title,
#sidebar > .navbar .nav-link.active:hover > .menu-title {
    padding-left: 0.2rem;
    transition: 0.3s ease-in-out;
}

#sidebar > .navbar .nav-link:hover > .menu-title {
    padding-left: 0.6rem;
}

#sidebar > .navbar .nav-label {
    padding: .1em 0.25em .1em;
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: 700;
    color: hsla(0, 0%, 100%, 0.4);
    letter-spacing: .1em;
    font-size: .6em;
}

#sidebar .sub-menu > .nav .nav-link {
    color: rgba(255, 255, 255, 0.55);
    margin-left: 1.75em;
    font-size: 1rem !important;
    height: 100%;
    width: auto;
    box-shadow: inset 2px 0 0 rgba(0, 0, 0, 0.1);
}

#sidebar .sub-menu > .nav .nav-link:hover {
    color: rgba(255, 255, 255, 0.75);
    box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.8);
}

#sidebar .sub-menu > .nav .nav-link.disabled,
#sidebar .sub-menu > .nav .nav-link:disabled {
    color: rgba(255, 255, 255, 0.25);
}

@media (min-width : 1200px) {
    #sidebar.offcanvas {
        visibility: visible;
        top: 54px;
        left: 0;
        border: none;
        width: 250px !important;
    }

    .container-main {
        margin-left: 250px;
    }
}

@media (max-width : 1199.98px) {
    .head-sss .userinfo .user-ico {
        display: none;
    }

    .offcanvas-backdrop {
        opacity: .1 !important;
    }

    .offcanvas-start-lg {
        top: 54px;
        left: 0;
        border-right: 1px solid rgba(0, 0, 0, .2);
        transform: translateX(-100%);
        width: 250px !important;
        overflow: auto;
    }

    .container-main,
    .sss-terms-footer {
        margin-left: 0;
    }
}

/************* Time Recorder CSS *************/
.etrcard {
    width: 700px;
    min-width: 350px;
}

.etrcard .erthead {
    text-align: center;
    font-weight: bold;
    font-size: 1.5rem;
    padding-top: 30px;
}

.etrcard .etr-recorder {
    background-image: url('../images/etr-btn-bg.png');
    background-repeat: no-repeat;
    background-position-x: center;
    padding: 30px 30px 0 30px;
    filter: drop-shadow(0 -0.125rem 0.25rem rgba(0, 0, 0, 0.075));
}

.etrcard .etr-recorder .etr-otbrk {
    position: relative;
    top: -70px;
}

.viewlog {
    position: relative;
    top: -50px;
}

.etrcard .etr-dayrec .input-group-text {
    width: 100px;
}

.etrcard .etr-dayrec .input-group input {
    width: 100px !important;
}

.etrcard .etr-dayrec {
    margin: 20px 50px 50px 50px;
}

.etrcard .etr-dayrec .alert {
    font-size: 1.25rem;
    padding: 20px;
}

.etrcard .viewlog {
    background: #fff;
}

.signinbtn, .signoutbtn {
    font-size: 1.5rem;
    height: 200px;
    width: 200px;
    position: relative;
}

.signinbtn i, .signoutbtn i {
    font-size: 5rem;
}

.otbtn, .endotbtn, .breakbtn, .endbreakbtn {
    font-size: 0.75rem;
    height: 100px;
    width: 100px;
    position: relative;
}

.otbtn i, .endotbtn i, .breakbtn i, .endbreakbtn i {
    font-size: 2rem;
}

@media(max-width: 768px) {
    .etrcard {
        width: 100%;
        align-items: unset;
        border: none;
    }
}

@media(max-width: 595px) {
    .etrcard .etr-dayrec {
        margin: 10px 30px 10px 30px;
    }
}

@media(max-width: 500px) {
    .ss-logo i {
        font-size: 1.5rem;
    }

    .ss-logo .title-topsub {
        font-size: 0.5rem;
    }

    .ss-logo .title {
        font-size: 1rem !important;
        font-weight: bold;
        line-height: .8;
    }

    .etrcard .erthead {
        font-size: 1.25rem;
        padding-top: 10px;
    }

    .etrcard .etr-dayrec .alert {
        font-size: 1rem;
        padding: 10px;
    }

    .etrcard .etr-recorder {
        background-size: 175%;
        padding: 0 0 0 0;
        filter: drop-shadow(0 -0.125rem 0.25rem rgba(0, 0, 0, 0.075));
    }

    .etrcard .etr-recorder .etr-otbrk {
        position: relative;
        padding-right: 0;
        padding-left: 0;
        top: -70px;
    }
    
    .etrcard .etr-recorder .etr-otbrk button {
        transform: scale(0.8, 0.8);
        -ms-transform: scale (0.8, 0.8);
        -webkit-transform:scale(0.8, 0.8);
        -moz-transform: scale(0.8, 0.8);
        -o-transform: scale(0.8, 0.8);
    }
    
    .signinbtn, .signoutbtn {
        transform: scale(0.8, 0.8);
        -ms-transform: scale (0.8, 0.8);
        -webkit-transform:scale(0.8, 0.8);
        -moz-transform: scale(0.8, 0.8);
        -o-transform: scale(0.8, 0.8);
    }
}

#signin:focus, #startBreak:focus, #endBreak:focus, #signout:focus, #startOT:focus, #endOT:focus   {
    outline: none;
    box-shadow: none;
    border-color: #ced4da;   /* Optional: Show a disabled cursor */
}

input[type="text"].form-control.disabled,
input[type="text"].form-control:disabled{
    background-color: white !important;
    color: #212529;
}

#mainDiv #back {
    height:40px; 
    width:40px; 
    font-size: 1.5rem;
}

#mainDiv #back i {
    position: absolute; 
    left: 7px; 
    top: 7px;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #339acc;
    --bs-btn-border-color: #339acc;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3194ce;
    --bs-btn-hover-border-color: #3194ce;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3194ce;
    --bs-btn-active-border-color: #3194ce;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #339acc;
    --bs-btn-disabled-border-color: #339acc;
}

.etrcard .btn-primary,
.etrcard .btn-warning,
.etrcard .btn-info,
.etrcard .btn-secondary {
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #babec1;
	--bs-btn-disabled-border-color: #babec1;
}
/************* Time Recorder CSS *************/


/************* animation circular progress *************/
.circular-progress {
    --size: 180px;
    --half-size: calc(var(--size) / 2);
    --stroke-width: 10px;
    --radius: calc((var(--size) - var(--stroke-width)) / 2);
    --circumference: calc(var(--radius) * pi * 2);
    --dash: calc((var(--progress) * var(--circumference)) / 100);
    animation: progress-animation .7s linear 0s 1 forwards;
}

.circular-progress circle {
    cx: var(--half-size);
    cy: var(--half-size);
    r: var(--radius);
    stroke-width: var(--stroke-width);
    fill: none;
    stroke-linecap: round;
}

.circular-progress circle.bg {
    stroke: #ddd;
}

.circular-progress circle.fg {
    transform: rotate(-90deg);
    transform-origin: var(--half-size) var(--half-size);
    stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
    transition: stroke-dasharray 0.3s linear 0s;
    stroke: #5394fd;
}

@property --progress {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

@keyframes progress-animation {
    from {
        --progress: 0;
    }
    to {
        --progress: 100;
    }
}

.circular-progress {
    position: absolute;
    top: 9px;
    left: 9px;
}
/************* animation circular progress *************/