@font-face {
    font-family: 'CFAsty';
    src: url('../fonts/CFAsty-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'CFAsty';
    src: url('../fonts/CFAstyStd-Book.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'CFAsty';
    src: url('../fonts/CFAstyStd-Book.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'CFAsty';
    src: url('../fonts/CFAstyStd-Medium.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

* {
    box-sizing: border-box;
    font-family: 'CFAsty', sans-serif !important;
}

/* Modern minimal grayscale scrollbar */
::-webkit-scrollbar {
    width: 6px; /* Slightly thinner for more classic look */
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f5f5f5; /* Very light gray track */
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: #9e9e9e; /* Medium gray thumb */
    border-radius: 3px;
    transition: background 0.2s ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
    background: #757575; /* Darker gray on hover */
}

/* For Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #9e9e9e #f5f5f5;
}

html {
    font-size: 14px;
}

h1 {
    font-size: 32px !important;
    color: #001d42;
    font-weight: 700;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: #f1f2f5;
    overflow-x: hidden;
}

.custom-logout-btn {
    background: rgb(9, 66, 116);
}

.bg-primary-dark {
    background-color: #003476 !important;
}

.bg-primary {
    background-color: #1b8bd5 !important;
}

.bg-info {
    background-color: #1371b9 !important;
}

.custom-rounded-main {
    border-radius: 8px;
}

.custom-color-blue-main {
    color: #003476;
}
.custom-bg-blue-main {
    background-color: #003476;
}

.custom-color-green-main {
    color: #86bd3e;
}

.custom-bg-green-main {
    background-color: #86bd3e;
}

.bg-ktimaDarkBlue {
    background-color: #001d42;
}

.navbar-custom {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.custom-form-label {
    font-size: 18px;
    margin-bottom: 10px;
}

.Title span {
    font-size: 22px;
    font-weight: bold;
}

/* 13 */
 .main-card-item-6,
 .main-card-item-7, 
.main-card-item-12,
.main-card-item-11,
.main-card-item-8,
.main-card-item-10,
.main-card-item-13 {
    background-color: #fff;
    color: #333;
    border-radius: 8px;
    padding: 20px;

    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    gap: 4px;
    height: 140px;
}
/* 14 is νεα υποβολή */
.main-card-item-14 {
    background-color: #003476;
    color: white;
    border-radius: 8px;
    padding: 20px;

    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    height: 280px;
    flex-direction: column;
}
/* 14 is νεα υποβολή */
.main-card-item-14 .main-card-title {
    font-size: 24px;
    font-weight: 700;
}
/* 14 is νεα υποβολή */
.main-card-item-14 .main-card-desc {
    font-size: 16px;
    max-width: 245px;
    text-align: center;
}
/* 14 is νεα υποβολή */
.main-card-item-14 .main-card-icon {
    border-radius: 100%;
    color: #001d42;
    padding: 10px;
    height: 70px;
    width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 15 is 2o box δληαδλη βοήθεια */
.main-card-item-15 {
    background-color: #fff;
    color: #003476;
    border-radius: 8px;
    padding: 20px 80px 20px 350px;

    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 16px;
    height: 280px;
    flex-direction: column;
    background-image: url('../Images/help-img.png');
    background-size: 268px 216px;
    background-repeat: no-repeat;
    background-position: 0 65%;
}
 .main-card-item-6 .main-card-icon,
 .main-card-item-7 .main-card-icon, 
.main-card-item-12 .main-card-icon,
.main-card-item-11 .main-card-icon,
.main-card-item-8 .main-card-icon,
.main-card-item-10 .main-card-icon,
.main-card-item-13 .main-card-icon,
.main-card-item-15 .main-card-icon,
.main-card-item-16 .main-card-icon {
    display: none !important;
}

.main-card-title {
    font-size: 20px;
    font-weight: 700;
    text-align: left;
}

.main-card-item-15 .main-card-desc {
    font-size: 16px;
    max-width: 450px;
    text-align: left;
}

.main-items-container-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    gap: 32px;
}

.main-card-item-16 {
    background-color: #1b8bd5;
    color: #fff;
    border-radius: 8px;
    padding: 0 0 0 110px;

    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    gap: 4px;
    height: 140px;
    background-image: url('../Images/10folders.png');
    background-size: 48px 48px;
    background-repeat: no-repeat;
    background-position: 32px center;
}

.main-card-item-16 .main-card-icon {
    color: rgb(19, 113, 185);
}

.main-card-item-16 .main-card-desc {
    font-size: 16px;
    padding-right: 20%;
}

.main-card-item-17 {
    background-color: #86bd3e;
    color: #fff;
    border-radius: 8px;
    padding: 0 0 0 110px;

    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    gap: 4px;
    height: 140px;
    background-image: url('../Images/search-green.png');
    background-size: 48px 48px;
    background-repeat: no-repeat;
    background-position: 32px center;
}

.main-card-item-17 .main-card-icon {
    display: none;
}

.main-card-item-17 .main-card-desc {
    font-size: 16px;
    padding-right: 20%;
}

.main-card-item-16::after,
.main-card-item-17::after {
    content: ''; /* Empty content */
    background-image: url('../Images/arrow-right-white.png');
    background-size: contain; /* Ensures it fits within width/height */
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
}
.main-card-item-6::after,
.main-card-item-7::after,
.main-card-item-11::after,
.main-card-item-12::after,
.main-card-item-8::after,
.main-card-item-10::after,
.main-card-item-13::after {
    content: ''; /* Empty content */
    background-image: url('../Images/arrow-right.png');
    background-size: contain; /* Ensures it fits within width/height */
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
}

.main-card-item-15::after {
    content: ''; /* Empty content */
    background-image: url('../Images/arrow-right.png');
    background-size: contain; /* Ensures it fits within width/height */
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    position: absolute;
    right: 24px;
    bottom: 0px;
    transform: translateY(-50%);
}
.main-card {
    position: relative;
}

html body .Container,
.Wrapper {
    min-height: 0 !important;
}

.container-select-perifereies-ota {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
}

.box-perifereia,
.box-ota {
    padding: 60px !important;
}

.box-perifereia h5,
.box-ota h5 {
    color: #fff;
    position: relative;
    z-index: 1;
}

.box-num-icon {
    position: absolute;
    display: block;
    font-weight: 900;
    font-size: 220px;
    opacity: 0.07;
    left: 0px;
    top: 0;
    margin-top: -70px;
    color: #fff;
}

html body select {
    max-width: 100%;
}

.transaction-type-box,
.transaction-type-box-title {
    transition: all;
    transition-duration: 0.3s;
}
.transaction-type-box:hover {
    background-color: #001d42 !important;
    cursor: pointer;
}
.transaction-type-box:hover .transaction-type-box-title {
    color: #fff !important;
    cursor: pointer;
}

.textfield-label {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #003476 !important;
    letter-spacing: 0.2px;
}
#AttachmentForm .textfield-label {
    padding: 5px 10px !important;
}

.form-control {
    background-color: #f1f3f8;
    border: 0px solid transparent !important;
    border-radius: 8px;
    min-height: 45px !important;
}

.form-control::placeholder {
    color: #6c757d;
    opacity: 0;
    font-size: 14px !important;
}

.Fieldset h4 {
    padding: unset;
    color: #003476;
    font-weight: 600;
    margin: 5px 0px 0px !important;
    padding-bottom: 20px;
    font-size: 20px;
}
.Fieldset h4::after {
    content: '';
    display: block;
    border-bottom: 1px solid #c5c5c5;
    margin: 30px -30px 0px;
    width: calc(100% + 60px);
}

.Fieldset {
    background-color: #fff;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    position: relative;
}

.shadow-tw {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
}

.Grid.GridAllCenter {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
    border-radius: 8px;
}

span.insidetxt svg {
    height: 16px;
}
span.insidetxt {
    color: #003476;
    margin-top: -36px;
}

.container-fluid {
    padding: 0 !important;
    margin: 0 !important;
}

.CardHead {
    background-color: #fff; /*#51626f;*/
    /* border-top: 10px solid #003476; */
    font-size: 14px;
    font-weight: bold;
    color: #003476 !important;
    text-align: left;
    padding: 0px;
    min-height: 42px;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
    display: flex;
    align-items: center;
}
.CardHead .Item {
    float: left;
    margin: 10px;
    padding: 0px 20px 0px 0px;
    border-right: 1px solid #001d42;
}
.CardHead .Item span {
    color: #003476;
    font-weight: normal;
}
.CardHead .Command {
    float: right;
    margin: 0px 0px 0px 0px;
        margin-left: auto;
}

.table>:not(caption)>*>* 
{
    color:#333!important;
    font-size:14px!important;
}

.BoxCommands .OrangeButton {
    padding: 9px 15px !important;
    box-shadow: none;
    border-radius: 6px !important;
}
.OrangeButton {
    color: #fff !important; /*#e28f5b*/
    background-color: #7fb83f !important;
    padding: 8px 12px !important;
    border-radius: 0px !important;
    border: 1px solid #7fb83f !important;
}

.OrangeButton:hover {
    background-color: rgb(115 161 64) !important;
    color: white !important;
    text-decoration: none !important;
}

.SubmitionResult .Finalize a {
    color: #4caf50 !important;
    text-decoration: none;
}

.SubmitionResult .Finalize .Commands a {
    color: #fff !important;
}

.SubmitionResult .Finalize {
    background-color: #001d42 !important;
    color: #fff !important;
}

.contractHistoryButton {
    color: #fff !important; /*#e28f5b*/
    background-color: #4caae8 !important;
    padding: 8px 12px !important;
    border-radius: 0px !important;
    border: 1px solid #4caae8 !important;
}
.contractHistoryButton:hover {
    background-color: #55b9fc !important; /*#d26727*/
    color: white !important;
    border: 1px solid #4caae8 !important;
}

.command-buttons-container {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    align-items: center;
    padding-right: 4px;
}

.Tabs .ActiveTab,
.Tabs .ActiveTab:hover,
.Tabs .ActiveTab a,
.Tabs .ActiveTab a:hover,
.Tabs .ActiveTab span,
.Tabs .ActiveTab span:hover {
    color: #001d42;
}

a {
    color: #001d42;
}
button.login-btn:hover {
    background-color: #001d42;
}
.login-btn {
    font-size: 14px;

    color: #fff;
    background-color: #001d42;
    padding: 14px 20px;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: fit-content;
    margin: 0 auto;
}
.save-btn:hover {
    border: #154a2b;
}
.save-btn {
    font-size: 14px;

    color: #fff;
    background-color: #006736;
    padding: 14px 20px;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: fit-content;
    margin: 0 auto;
}

.login-btn:hover {
    background-color: #03142b;
    color: #fff;
    text-decoration: none;
}

.login-btn i {
    margin-left: 8px;
}
.button-outline {
    font-size: 14px;
    border: 1px solid #001d42;
    color: #001d42;
    background-color: transparent;
    padding: 16px 20px;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: fit-content;
    margin: 0 auto;
}

.button-outline:hover {
    background-color: #03142b;
    color: #fff;
    text-decoration: none;
}

.button-outline i {
    margin-left: 8px;
}
.button-info {
    font-size: 14px;
    color: #4caae8;
    border: 1px solid #4caae8;
    background-color: transparent;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 0 auto;
    text-transform: lowercase;
}

.button-info:hover {
    text-decoration: none;
    color: #379ee2;
    border: 1px solid #379ee2;
}

.button-info i {
    margin-left: 8px;
}

.links-list {
    list-style: none;
}
.links-list li a {
    color: #003476;
    text-decoration: underline;
    font-size: 14px;
    display: block;
    padding: 2px 0;
}

.welcome-tos {
    max-height: 400px;
    border-radius: 10px;
    margin-top: 32px;
    overflow-y: auto;
    box-shadow: 0px 0px 14px 0px #99999955 inset;
    padding: 20px;
    background-color: #eee;
    font-size: 14px;
}

.border-seperator {
    height: 1px;
    background-color: #c5c5c570;
    margin-top: 30px;
    margin-bottom: 50px;
    margin-left: -30px;
    width: calc(100% + 60px);
}

.Tabs.main-table-container {
    position: relative;
}

.SubBox {
    border: 0px solid transparent;
    margin: 0px 0px 20px 0px;
    background: white;
    padding: 20px;
    border-radius: 8px;
}

.main-table-container .TabsContent {
    border: 0px solid transparent !important;
    border-radius: 8px;
    background-color: #fff;
}

.main-table-container .TabsContent {
    border: 0px solid transparent !important;
    border-radius: 8px;
    background-color: transparent !important;
}
.Tabs.main-table-container ul {
    margin-bottom: 0px !important;
    float: left;
    min-height: 74px;
}
.Grid,
.Grid .GridAllCenter {
    border: 0px solid transparent !important;
}

.Grid th {
    color: #fff;
    padding: 16px;
    background: #4caae8;
}

.Grid tr.AlternateRow td {
    background-color: #f9f9f9;
}

.Grid tr:first-child th:first-child {
    border-radius: 8px 0px 0px 0px;
}

.Grid tr:first-child th:last-child {
    border-radius: 0px 8px 0px 0px;
}

.Grid tr:last-child td:last-child {
    border-radius: 0px 0px 8px 0px;
    text-align: center;
}

.Grid tr:last-child td:first-child {
    border-radius: 0px 0px 0px 8px;
}

.form-control:disabled {
    background-color: #f1f3f8;
    height: 42px;
}
.IconEdit {
    background-image: none !important;
    position: relative;
}

.IconEdit::before {
    content: '\f044'; /* Font Awesome edit icon unicode */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 5px;
    top: 5px;
    font-size: 16px;
    color: #666666;
    text-indent: 0;
}

.IconEdit,
.IconDelete,
.IconCopy {
    background-image: none !important;
    position: relative;
}

.IconEdit::before {
    content: '\f044'; /* Font Awesome edit icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 5px;
    top: 5px;
    font-size: 14px;
    color: #666666;
    text-indent: 0;
}
.GridAllCenter .RowCommands,
.RowCommands {
    text-align: center !important;
    white-space: nowrap;
}
.IconDelete::before {
    content: '\f1f8'; /* Font Awesome trash/delete icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 5px;
    top: 5px;
    font-size: 14px;
    color: #666666;
    text-indent: 0;
}

.IconEstates::before {
    content: '\f1f8'; /* Font Awesome trash/delete icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 5px;
    top: 5px;
    font-size: 14px;
    color: #666666;
    text-indent: 0;
}
.IconMore::before {
    content: '\f002' !important; /* Font Awesome trash/delete icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 5px;
    top: 5px;
    font-size: 14px;
    color: #666666;
    text-indent: 0;
}

.IconCopy::before {
    content: '\f0c5'; /* Font Awesome copy icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 5px;
    top: 5px;
    font-size: 14px;
    color: #666666;
    text-indent: 0;
}

.IconUser::before{
  content:'\f007';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 5px;
    top: 5px;
    font-size: 14px;
    color: #666666;
    text-indent: 0;
}
.IconDownload::before {
    content: '\f019'; /* Font Awesome copy icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 5px;
    top: 5px;
    font-size: 14px;
    color: #666666;
    text-indent: 0;
}

/* Base icon styles */
.Icon {
    display: inline-block;
    width: 26px;
    height: 26px;
    margin: 0px 5px 0px 0px;
    position: relative;
    text-indent: 0;
    overflow: visible;
}

.Icon::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
}

.Icon:hover::before {
    color: #057aa9;
}

/* Button variant */
.IconButton {
    width: 36px;
    height: 36px;
    background-color: #84cbe9;
    border: 5px solid #84cbe9;
}

.IconButton:hover {
    background-color: #057aa9;
    border: 2px solid #e9e9e9;
}

.IconAdd::before {
    content: '\2b';
    font-size: 18px;
} /* fa-plus */
.IconUserFolder::before {
    content: '\f07c';
} /* fa-folder-open */
.IconDelete::before {
    /* content: '\f2ed'; */
} /* fa-trash-can */
.IconGear::before {
    content: '\f013';
} /* fa-gear */
.IconFolder::before {
    content: '\f07b';
} /* fa-folder */
.IconMail::before {
    content: '\f0e0';
} /* fa-envelope */
.IconSearch::before {
    content: '\f002';
} /* fa-magnifying-glass */

.IconLocked::before {
    content: '\f023';
} /* fa-lock */
.IconUnlocked::before {
    content: '\f09c';
} /* fa-unlock */
.IconCalculate::before {
    content: '\f1ec';
} /* fa-calculator */
.IconPDF::before {
    content: '\f1c1';
} /* fa-file-pdf */
.IconReplacement::before {
    content: '\f2f1';
} /* fa-rotate */
.IconRead::before {
    content: '\f518';
} /* fa-book-open */
.IconHistory::before {
    content: '\f1da';
} /* fa-clock-rotate-left */

.IconEstates::before {
    content: '\f1ad';
} /* fa-building */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #003476;
    --bs-btn-border-color: #003476;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #003476;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #003476;
    --bs-btn-disabled-border-color: #003476;
}

button#WizardPrev {
    padding: 10px 20px 10px 10px;
    border-radius: 8px;
    border: 1px solid #4caae8 !important;
}

button#WizardNext {
    width: 200px;
}
button#WizardNext:hover {
    background-color: #013984 !important;
}

button#WizardPrev:hover {
    background-color: #f2f3f5;
    border: 1px solid #316a90 !important;
    color: #316a90;
}
.SubHead {
    background-color: transparent !important;
    border: 0px solid #cdcdcd;
    color: #dee7eb;
    font-size: 14px;
    font-weight: bold;
    padding: 0px !important;
}
.SubHead .Title {
    font-size: 24px;
    font-weight: bold;
    color: #001d42;
    text-align: left;
    background-color: transparent;
    border: none;
    padding: 10px 0px;
    display: inline-block;
}
.SubHead .Commands { 
    padding: 0 !important; 
    display: flex; 
    align-items: center; 
    gap: 10px;
} 

.Grid.GridAllCenter,
table.Grid {
    margin-top: 20px;
}
.container {
    padding: 0px !important;
}

.Tabs li a,
.Tabs li span {
    padding: 10px 0px !important;
    font-size: 24px;
}
.InfoBox {
    display: block;
    margin: 0px 0px 20px 0px;
    background-color: #fff8dc;
    border: 1px solid #eee8aa;
    background-image: url(Images/Info.png);
    background-repeat: no-repeat;
    background-position: 10px 10px;
    padding: 10px 10px 10px 40px;
}

.Commands a 
{
    height:42px;
    background-color: transparent;
    padding: 10px 20px;
    border-radius: 6px;
    color: #003476;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border: 1px solid #003476;
}
.folders-list .Commands a {
    position: absolute;
    right: 5px;
    top: 20px;
}

a.OrderingInactive {
    color: #fff !important;
}
.Grid th a {
    color: #fff !important;
    padding: 0px 0px 0px 10px;
    display: block;
    text-align: center;
}

.BoxCommands {
    padding: 10px 0px !important;
}

.focus-jfilestyle label {
    background-image: none !important;
    display: inline-block;
    height: 36px !important;
    padding: 5px 10px 0px 10px;
    border-radius: 3px 0px 0px 3px;
    background: #f2f3f5;
    width: 250px !important;
    text-align: center;
    cursor: pointer;
    border: 1px solid #ccc;
    white-space:nowrap;
}

button,
.Button {
    font-size: 12px;
    text-transform: uppercase;
    color: #fff;
    background-color: #4caae8;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    display: inline-block;
}
@media (min-width: 768px) {
    /* Adjust breakpoint as needed */
    .main-items-container-grid > *:nth-child(4n + 1) {
        /* Select 1st, 5th, 9th, etc. items */
        grid-column: span 4; /* Span 4 columns */
    }

    .main-items-container-grid > *:nth-child(4n + 2) {
        /* Select 2nd, 6th, 10th, etc. items */
        grid-column: span 8; /* Span 8 columns */
    }

    .main-items-container-grid > *:nth-child(4n + 3) {
        /* Select 3rd, 7th, 11th, etc. items */
        grid-column: span 8; /* Span 8 columns */
    }

    .main-items-container-grid > *:nth-child(4n + 4) {
        /* Select 4th, 8th, 12th, etc. items */
        grid-column: span 4; /* Span 4 columns */
    }
}

@media (min-width: 1540px) {
    .container {
        max-width: 1440px;
    }
}
@media (min-width: 1900px) {
    .container {
        max-width: 1540px;
    }
}

.main-card-item {
    /* Common styles for all card items */
    border-radius: 8px;
    padding: 20px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 16px;
    height: 280px;
    background-color: white;
}

.main-card-item-submission {
    background-color: #003476;
    color: white;
}

.main-card-item-help {
    background-color: #fff;
    color: #003476;
    /* Additional help-specific styles */
}

.SubmitionResult .Set.Success > label,
.SubmitionResult .Item.Success > label {
    background-color: rgb(230 245 235) !important;
    background-image: url(Images/success.png);
    background-size: 20px;
    background-position: 15px;
    border-left: 4px solid #4caf50;
}

.SubmitionResult .Set.Fail > label,
.SubmitionResult .Item.Fail > label {
    background-color: rgb(255 220 220) !important;
    background-image: url(Images/fail.png);
    background-size: 24px;
    background-position: 15px;
    border-left: 4px solid #ee554a;
}
.SubmitionResult .Item.Fail {
    background-color: #fff6f6 !important;
}

.ui-dialog .ui-dialog-titlebar {
    width: 100% !important;
}

.SubmitionResult .Set > label,
.SubmitionResult .Item > label {
    font-size: 14px;
}

.SubmitionResult .Item div {
    font-size: 14px !important;
}

.SubmitionResult .ItemsList {
    overflow: auto;
    padding: 0px 20px 20px 20px;
    min-height: 400px;
    border-top: 20px solid white;
    height: auto;
}

.SubmitionResult .Holder {
    top: 10%;
    left: 10%;
    width: 80%;
    background-color: #fff;
    position: absolute;
    box-shadow: 0px 0px 10px 0px #777;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: #fff !important;
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: #fff;
    background-color: #041e3f;
}

.select2-container--default .select2-selection--single {
    background-color: #f1f3f8;
    border: 0px solid #aaa !important;
    border-radius: 5px;
}

.SubmitionResult .Finalize .Commands #SubmitContract {
    background-color: #85bb41;
}
.SubmitionResult .Finalize .Commands #SubmitContract:hover {
    background-color: #73a140;
    color: white;
}

.Finalize .Commands {
    width: 250px;
    text-align: center;
}

.Finalize .Commands a {
    text-align: center;
}

.Finalize .Commands a {
    border: 0px solid transparent !important;
}

a#CloseSubmitionWindow {
    background: #011836;
    margin-top: 10px;
}
a#CloseSubmitionWindow:hover {
    background: #021a39;
    margin-top: 10px;
}

.Box > .Title {
    border: azure;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: left;
    padding: 12px 0px;
}

input[type='checkbox'] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.Finalize input[type='checkbox'] {
    margin-right: 10px;
    margin-top: -2px;
}

.ui-widget-content {
    border: 0px solid transparent !important;
    background: #ffffff !important;
    color: #222222;
    box-shadow: 0px 0px 8px 0px #aaa;
    border-radius: 4px !important;
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: 0.2em 0;
    margin: -2px;
    border-radius: 0px !important;
    background-image: none !important;
    background-color: #eee !important;
    border: none;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    border: 0px solid transparent !important;
    font-weight: normal /*{fwDefault}*/;
    color: #555555 /*{fcDefault}*/;
    padding: 5px;
    text-align: center;
    background-color: #eee !important;
    background-image: none !important;
}

#ExampleAttachement1000.editor-label {
    display: block !important;
    float: right !important;
    text-align: right !important;
    width: 100% !important;
    margin: 0px !important;
    padding: 0px !important;
}

/* Tablet Styles */
@media (max-width: 992px) {
  .main-items-container-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
  }

  .main-card-item-14 {
    grid-column: span 3;
  }

  .main-card-item-15 {
    grid-column: span 3;
    padding: 20px 20px 20px 200px;
    background-size: 180px 150px;
  }

  .main-card-item-16,
  .main-card-item-17 {
    grid-column: span 3;
  }
}


/* Mobile Styles - Tablets */
@media (max-width: 992px) {
  .main-items-container-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
  }

  .main-card-item-14 {
    grid-column: span 3;
  }

  .main-card-item-15 {
    grid-column: span 3;
    padding: 20px 20px 20px 200px;
    background-size: 180px 150px;
  }

  .main-card-item-16,
  .main-card-item-17 {
    grid-column: span 3;
  }
}

/* Mobile Styles - Smartphones */
@media (max-width: 768px) {
  .main-items-container-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  [class^="main-card-item-"] {
    grid-column: span 1 !important;
    height: auto;
    min-height: 200px;
  }
  
  [class*="main-card-item-"] .main-card-title {
    font-size: 20px;
  }
  
  [class*="main-card-item-"] .main-card-desc {
    font-size: 14px;
    max-width: 100%;
  }
  
  .main-card-item-15 {
    padding: 150px 20px 20px 20px;
    background-position: center 20px;
    align-items: center;
    text-align: center;
  }
}

/* Small Mobile Styles */
@media (max-width: 480px) {
  .main-items-container-grid {
    gap: 12px;
  }
  
  [class^="main-card-item-"] {
    min-height: 180px;
  }
  
  [class*="main-card-item-"] .main-card-icon {
    height: 50px;
    width: 50px;
  }
  
  .main-card-item-15 {
    background-size: 150px 120px;
    padding: 130px 20px 20px 20px;
  }
}

.cc-banner.cc-bottom .cc-btn {
    flex: 1;
    background: #86bd3e!important;
    color: white!important;
}

.ui-draggable .ui-dialog-titlebar 
{
    min-width:500px!important; padding-right:10px
}

#GridEstates .Grid td {
    white-space: nowrap;
}

  .SubmitionResult .Holder {

    height: 90%!important;
    top: 5%!important;
  }

@media (max-height: 920px) {
  .SubmitionResult .Holder {
    left: 0%;
    width: 100%;
    height: 100%;
    top: 0
  }
}