@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

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


html {
    height: 100%;
}

body {
    font-family: "Inter", sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: #e0e0e0;
    font-size: 16px;
}

a {text-decoration: none;color: #7d3ff8;}
a:hover {color: #8d71dc;transition: .4s;}
h1 {margin:0;padding:0;font-weight: 600;font-size: 22px;}

.fullwidth {width: 100%;}
.inputLabel {display: flex;font-size: 14px;font-weight: 600;margin-bottom: 5px;}
.inputLabel.spaceBetween {justify-content: space-between;}
input {height: 40px;border: 1px solid #ccc;border-radius: 5px;padding: 0 10px;font-size: 14px;background-color: transparent;}
input.rowInput {height: 25px;font-size: 14px;width: 100%;}
input.noFocusBorder:focus {outline: none;}

.customSelect {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 5px 35px 5px 10px;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background-color: transparent;
}

.size19 {font-size: 19px;}
.size28 {font-size: 28px !important;}
.size30 {font-size: 30px !important;}

.height_1 {height:1px;}

.green {color: #2f7a2b;}
.red {color: #c30404;}
.yellow {color: #f1bd29;}

.mask {position: fixed;top:0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .1);z-index: 9;visibility: hidden;opacity: 0;}
.mask.visible {visibility: visible;opacity: 1;transition: .4s;}

/* Buttons */
.button {display: inline-block;padding: 10px 20px;cursor: pointer;font-size: 14px;border-radius: 4px;position: static;line-height: 11px;}
.button.blue {background: #007BFF;color: white;}
.button.blue:hover {background: #0056b3; transition: .4s;}
.button.green {background: #14a541;color: white;}
.button.green:hover {background: #108534;transition: .4s;}
.headButton {cursor: pointer;height: 30px;color: black;}
.headButton:hover {color: #7d3ff8;transition: .4s;}

/* Switch button for checkbox */
.switch {position: relative;display: inline-block;width: 40px;height: 20px;}
.switch input {opacity: 0;width: 0;height: 0;}
.slider {position: absolute;cursor: pointer;inset: 0;background-color: #ccc;border-radius: 24px;transition: 0.3s;}
.slider::before {content: "";position: absolute;height: 14px;width: 14px;left: 3px;bottom: 3px;background-color: white;border-radius: 50%;transition: 0.3s;}
input:checked + .slider {background-color: #2f7a2b;}
input:checked + .slider::before {transform: translateX(20px);}

.notificationsHolder {}
.notification {display: flex;gap: 10px;width: 100%;height: 40px;padding:0 15px;border-radius: 6px;line-height: 40px;align-items: center;}
.notification.green {border: 1px solid #14a541; background-color: rgba(251, 251, 251, 0.5);color: #14a541;}
.notification > .iconHolder {font-size: 25px;height: 33px;}

/* Main Content */
main {flex: 1;}
.centerModule {width: 100%;max-width: 1200px;margin: 0 auto;}
.centerModule > .pageHolder {margin:35px 0;padding:15px 25px;background: white;border-radius: 5px;box-shadow: 0 1px 2px rgba(0,0,0,0.1);min-height: 100%;}

.contentHolder {width: 98%;max-width: 1920px;margin:1vw auto;background: rgba(164, 196, 232, 0.1);min-height: 100vh;border-radius: 14px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);}
.contentPanels {padding:1vw 1.5vw;}
.mainHeader {display: flex;justify-content: space-between;align-items: start;align-content: center;height: 45px;margin-bottom: 45px;}
.mainHeader > .rightSide {display: flex;font-size: 30px;gap: 10px;}
.logoHolder > a > img {max-width: 130px;}

.mainContentHolder {display: flex;}
.middleContentHolder {width: 100%;}

.row {margin-bottom: 25px;}
.row > input {height: 30px;width: 100%;}
.row > input.half {width: 50%;}
.row > input.min {width: 100px;}
.row.center {text-align: center;}
.row.center > .inputLabel {justify-content: center;}
.row.center > input {text-align: center;}

/* Left Menu */
.leftMenuHolder {width: 100px;height: 100%;}
.leftMenuHolder ul {display: flex;flex-direction: column;list-style: none;padding:0;margin: 0;font-size: 30px;gap: 20px;}
.leftMenuHolder ul a {color: black;}
.leftMenuHolder ul a.active {color: #7d3ff8;}
.leftMenuHolder ul li:hover > a {color: #a47fef;}
.leftMenuHolder ul li:hover > a.active {color: #7d3ff8;cursor: default;}
.leftMenuButton {width: 30px;height: 30px;}

/* Header */

header {
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}
header .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header nav a {
    margin: 0 1rem;
    text-decoration: none;
    color: #333;
    transition: color 0.3s;
}
header nav a:hover {
    color: #007BFF;
}
header button {
    padding: 0.5rem 1rem;
    background: #007BFF;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
header button:hover {
    background: #0056b3;
}

/* Tables */
.widgetMiddle table {width: 100%;border-collapse: collapse;font-size: 14px;}
.widgetMiddle table tr th {text-align: left;font-weight: 500;color: grey;border: none;height: 35px;}
.widgetMiddle table tr td {position:relative;text-align: left;height: 35px;border: none;font-size: 14px;}
.widgetMiddle table tr td:first-child {padding-left: 5px;}
.widgetMiddle table tr:nth-child(even) td {background: rgba(23, 121, 186, 0.05);}
.widgetMiddle table tr:hover td {background: #e8e7e7;}
.widgetMiddle table tr td.bold {font-weight: 600;}
.widgetMiddle table tr.deleted {visibility: hidden;opacity: 0;transition: 1s;}
.widgetMiddle table tr td.noRows {text-align: center;color: grey;background: rgba(23, 121, 186, 0.05);;}
.submenu {position: relative; cursor: pointer;}
.submenu:hover {color: #7d3ff8;transition: .4s;}

.dropDown {display: none;position:absolute;width: 100px; min-height: 50px;background: #faf7f7;border-radius: 6px;right: -80px;z-index:10;box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);}
.dropDown.visible {display: block;padding: 5px;}
.dropDown > ul {margin:0;padding: 0;list-style: none;}
.dropDown > ul > a {font-size: 12px;color: #1d1e1e;}
.dropDown > ul > a > li, .dropDown > ul > li {height: 25px;text-align: center;line-height: 24px;color: #1d1e1e;font-size: 12px;}
.dropDown > ul > a > li:hover, .dropDown > ul > li:hover {background: #e4e4e4;}

.deadLineIcon {position: absolute;top:3px; left:-15px;}

/* Footer */

footer {
    background: #111;
    color: #ccc;
}
footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: .5vw 1.5vw;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    font-size: 12px;
}
footer h3 {
    margin-bottom: 1rem;
    color: #fff;
}
footer ul { list-style: none; padding: 0;}
footer ul li {
    margin-bottom: 0.5rem;
}
footer a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
}
footer a:hover {
    color: #fff;
}
footer .social a {
    margin-right: 1rem;
    font-size: 1.2rem;
}
footer .bottom {
    text-align: center;
    padding: .2rem;
    border-top: 1px solid #333;
    font-size: 0.9rem;
    color: #777;
}

/* Jquery Dialog modal */

.ui-dialog {font-family: 'Inter', sans-serif;padding: 0;border: none !important;border-radius: 4px;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);}
.ui-dialog > .ui-widget-header {background: none;border: none;padding: 15px 25px;height: 50px;}
.ui-widget-overlay {background: rgba(0, 0, 0, 1);opacity: .5;}
.ui-dialog .buttonsHolder {display: flex;margin-top:25px;gap:10px;justify-content: center;}
.ui-dialog .closeDialog {position: absolute;top: 11px;right: 10px;cursor: pointer;}
.ui-dialog-titlebar-close.ui-button {border: none;background: none;}
.ui-dialog .ui-dialog-titlebar-close:focus {
    outline: none !important;
    box-shadow: none !important;
}
.ui-dialog.confirmDialog {max-width: 400px;}
.ui-dialog.confirmDialog .ui-widget-content {border: none;margin-top: 25px;font-size: 16px;color: black;text-align: center;}
.ui-dialog.confirmDialog .ui-dialog-buttonset {float: none;text-align: center;}
.dialogSize500 {max-width: 500px;width: 95%;}

.ui-dialog-titlebar {font-weight: 600;height: 30px;}
.modalContent {padding: 15px 10px;}
.month_year_datepicker .ui-datepicker-calendar {
    display: none;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {font-family: 'Inter', sans-serif !important;}

/* Widgets */
.moduleHeader {margin-bottom: 20px;}
.widgetGrid {display: flex;flex-wrap: wrap;gap: 15px;align-items: flex-start;margin-bottom: 15px;}
.widgetHolder {position: relative;width: 300px;height: 100px;background: #fbfbfb;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);}
.widgetTitle {display: flex;font-size: 14px;color: #3c3b3b;font-weight: 600;justify-content: space-between;}
.widgetContent {padding: 10px 20px;}
.widgetMiddle {display: flex;align-items: center;margin-top: 10px;justify-content: space-between;}
.widgetValue {font-size: 25px;font-weight: 700;}
.widgetFooter {position: absolute;bottom: 5px;font-size: 12px;color: #a5a5a5;font-weight: 600;}
.widgetMiddle > .difference {font-size: 12px;color: white;padding: 3px 8px;border-radius: 6px;}
.widgetMiddle > .difference.green {background: #2f7a2b;}
.widgetMiddle > .difference.red {background: #c30404;}

.widgetHolder.module {width: 99%;max-width: 700px;height: 100%;min-height: 100px;}
.widgetHolder.module.half {width: 400px;}
.widgetHolder.module.full {max-width: 815px;}
.widgetHolder.module.bigger {max-width: 1000px;}
.widgetHolder.module .widgetTitle {font-size: 16px;}
.widgetHolder.module > .widgetContent > .widgetMiddle {display: block;justify-content: unset;}
.widgetTitle .headButton {font-size: 30px;}
.widgetTitle > .buttonsHolder {display: flex;gap:10px;}