@font-face {
    font-family:open sans;
    src:url(../fonts/opensans-400.woff2) format('woff2'),
        url(../fonts/opensans-400.woff) format('woff');
    font-weight:400;
    font-style:normal;
    font-display:swap;
}
body, input, select, textarea, button, .ui-widget {
    font-family:open sans,helvetica neue,Helvetica,Arial,sans-serif!important;
    line-height:1.5;
    color:#636363;
    font-size:14px;
}
body {
    background:#F7F7F7;
}
.clear {
    clear:both;
}
h1, h2 {
    text-align:center;
    color:#5b6574;
    padding:20px 0 20px 0;
}
h1 {
    border-bottom:1px solid #dee0e4;
    font-size:24px;
}
h2 {
    font-size:20px;
}
.bold {
    font-weight:bold;
}
.underline {
    text-decoration:underline;
}
.fullwidth {
    width:100%!important;
}
.hide {
    display:none!important;
}
.margin-l-10 {
    margin-left:10px;
}
.margin-r-10 {
    margin-right:10px;
}
::placeholder {
  color:#ccc;
  opacity:1; /* Firefox */
}
::-ms-input-placeholder { /* Edge 12 -18 */
  color:#ccc;
}

/* NOTIFICATIONS */
#notification, #notificationperm {
    background-color:#04AA6D;
    min-width:250px;    
    color:#fff;
    text-align:center;
    border-radius:2px;
    padding:16px;
}
#notification {
    visibility:hidden;
    position:fixed;
    z-index:1;
    top:30px;
}
#notification.error, #notificationperm.error {
    background-color:#cc3300!IMPORTANT;
}
#container #notification {
    right:2%;
}
#login #notification {
    margin-left:35px;
}
#notificationperm {
    margin-bottom:10px;
}
#notificationperm a {
    color:#fff;
}
#notification.show {
    visibility:visible; /* Show the notification */
    /* Add animation:Take 0.5 seconds to fade in and out the notification.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation:fadein 0.5s, fadeout 0.5s 2.5s;
    animation:fadein 0.5s, fadeout 0.5s 2.5s;
}
#notification.showperm {
    visibility:visible; /* Show the notification */
    /* Add animation:Take 0.5 seconds to fade in and out the notification.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation:fadein 0.5s;
    animation:fadein 0.5s;
}

/* Animations to fade the notification in and out */
@-webkit-keyframes fadein {
    from {
        top:0;
        opacity:0;
    }
    to {
        top:30px;
        opacity:1;
    }
}

@keyframes fadein {
    from {
        top:0;
        opacity:0;
    }
    to {
        top:30px;
        opacity:1;
    }
}

@-webkit-keyframes fadeout {
    from {
        top:30px;
        opacity:1;
    }
    to {
        top:0;
        opacity:0;
    }
}

@keyframes fadeout {
    from {
        top:30px;
        opacity:1;
    }
    to {
        top:0;
        opacity:0;
    }
}

/* DATE PICKER */
.ui-datepicker .ui-widget-header, .ui-datepicker .ui-state-default {
    background:#bcecff;
}
.ui-datepicker .ui-datepicker-today .ui-state-default {
    background:#ffd025;
    color:#000;
}

/* PAGES */
#container {
    max-width:1200px;
    margin:0 auto;
}

#header {
    padding-bottom:20px;
}
#header .subtitle {
    margin-top:0;
    font-style:italic;
}
#header.login {
    text-align:center;
}

.main-box {
    margin-top:30px;
    background:#fff;
    padding:20px;
    border:solid 1px #333;
    border-radius:3px;
}
.main-box h1 {
    margin-top:0;
    padding-top:0;
}
h2 {
    margin:30px;
    padding:0;
}
h2 .standout {
    color:#00529f;
    font-style:italic;
}
h3 {
    text-align:center;
    background:#f0f8ff;
    padding:10px;
    border:solid 2px #b0d6f7;
}
.main-box p {
    text-align:center;
}

#loading {
    position:fixed;
    display:none;
    width:100%;
    height:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0,0,0,0.5);
    z-index:2;
}
#loading img {
    position:absolute;
    top:20%;
    left:35%;
    border:solid 2px #333;
}

/* PAGES */
#login {
    max-width:400px;
    background-color:#ffffff;
    box-shadow:0 0 9px 0 rgba(0, 0, 0, 0.3);
    margin:100px auto 10px auto;
}
#login h1 {
    text-align:center;
    color:#5b6574;
    font-size:24px;
    padding:20px 0 20px 0;
    border-bottom:1px solid #dee0e4;
}

#login form, #searchduplicate .input-group {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    padding-top:20px;
}
#login form label, #searchduplicate form label {
    display:flex;
    justify-content:center;
    align-items:center;
    width:50px;
    height:50px;
    background-color:#00529f;
    color:#ffffff;
}
#searchduplicate input:required {
  border:dotted 1px #cc3300!important;
  background:#fff0f0;
}
#searchduplicate input[readonly] {
  color:#bbb;
  font-style:italic;
}
#searchduplicate form label {
    width:150px;
    font-weight:700;
    padding:0 10px;
    text-align:center;
}
#login form input[type="password"], #login form input[type="text"], 
#searchduplicate form input[type="text"], #searchduplicate form select, #searchduplicate form textarea, #searchduplicate form input[type="number"] {
    height:50px;
    border:1px solid #dee0e4;
    padding:0 15px;
}
#searchduplicate form textarea, #searchduplicate form label.textarea {
    height:100px;
}
#login form input[type="password"], #login form input[type="text"] {
    margin-bottom:20px;
    width:310px;
}
#login form input[type="submit"], #searchduplicate form input[type="submit"] {
    background-color:#00529f;
    border:0;
    cursor:pointer;
    font-weight:bold;
    color:#ffffff;
    transition:background-color 0.2s;
    padding:15px;
}
#login form input[type="submit"] {
    width:100%;
    margin-top:20px;
}
#login form input[type="submit"]:hover, #searchduplicate form input[type="submit"]:hover {
    background-color:#2868c7;
    transition:background-color 0.2s;
}
#searchduplicate form .input-group {    
    gap:20px;
}
#searchduplicate form .input-group div {
    display:flex;
}
#searchduplicate form .input-group div:not(.cat-box-div), #searchduplicate form input, #searchduplicate form textarea, #searchduplicate form p {    
    flex: 1 0 auto;
}
#searchduplicate form textarea {
    padding-block:15px;
}
#searchduplicate form input[type="number"] {
    padding-inline:15px;
}
#searchduplicate form .input-group div p {
    font-style:italic;
    margin:0;
}
#searchduplicate form table {
    border-collapse:collapse;
}
#searchduplicate form table th {
    text-align:left;
}
#searchduplicate form table td {
    padding:5px;
}
#searchduplicate form table td input, #searchduplicate form table td select {
    width:100%;
}
#searchduplicate form table td i:hover {
    cursor:pointer;
}
#searchduplicate form table td i.fa-solid:hover {
    color:#cc3300;
}
#searchduplicate form table td i.fa-regular:hover {
    color:#04AA6D;
}
#searchduplicate form .cat-box {
    display:inline-block;
    background:#ededed;
    border:solid 1px #333;
    margin:5px;
    padding:5px;
}
#searchduplicate form .cat-box i {
    margin-left:5px;
}
#searchduplicate form .cat-box:hover {
    background:#333;
    color:#fff;
    cursor:pointer;
}
#searchduplicate form .cat-box:hover i {
    color:#cc3300;
    font-weight:bold;
}
#searchduplicate form #imgs {
    max-width:100%;
    overflow:auto;
}
#searchduplicate form #imgs .product-image {
    max-width:200px;
    max-height:200px;
    border:solid 1px #333;
    margin-right:20px;
}
#searchduplicate form #imgs .product-image.img-opacity {
    opacity:0.1;
}

/* FOOTER */
#copyright {
    margin:20px 0;
    text-align:center;
}