@font-face {
    font-weight: 400;
    font-family: "Mulish";
    font-style: normal;
    src: url("~/Fonts/Mulish-Regular.ttf") format("truetype");
}

@font-face {
    font-weight: 500;
    font-family: "Mulish";
    font-style: normal;
    src: url("~/Fonts/Mulish-Medium.ttf") format("truetype");
}

@font-face {
    font-weight: 600;
    font-family: "Mulish";
    font-style: normal;
    src: url("~/Fonts/Mulish-SemiBold.ttf") format("truetype");
}

@font-face {
    font-weight: 700;
    font-family: "Mulish";
    font-style: normal;
    src: url("~/Fonts/Mulish-Bold.ttf") format("truetype");
}

@font-face {
    font-weight: 800;
    font-family: "Mulish";
    font-style: normal;
    src: url("~/Fonts/Mulish-ExtraBold.ttf") format("truetype");
}

@font-face {
    font-weight: 900;
    font-family: "Mulish";
    font-style: normal;
    src: url("~/Fonts/Mulish-Black.ttf") format("truetype");
}

@font-face {
    font-weight: 400;
    font-family: "Calibri";
    font-style: normal;
    src: url("~/Fonts/calibri-regular.ttf") format("truetype");
}

@font-face {
    font-weight: 700;
    font-family: "Calibri";
    font-style: normal;
    src: url("~/Fonts/calibri-bold.ttf") format("truetype");
}

#form1 {
    width: 100%;
    height: 100%;
}

.errorMessageLarge {
    color: red;
    background-color:yellow;
    font-size:20px;
    text-decoration:blink;
}
.greenColor {
    color: #428698;
}
.greenBGColor {
    background-color: #428698;
}

.greenColor a {
    color: #428698;
    text-decoration:none;
}
.textBold {
    font-weight:700 !important;
}
html, body {
    font-family: Mulish, Calibri, Verdana, sans-serif;
    color-scheme: light;
    background-color: #F1F1F1;
    position: relative;
    min-height: 99vh;
    min-width:100%;
    height:100%;
    margin: 0px;
    font-feature-settings: "kern";
    display:block;
}

.rootDiv {
    height: 100%;
}
*, ::before, ::after {
    border-color: #E2E8F0;
}
:where(*) {
    border-width: 0px;
    border-style: solid;
    box-sizing: border-box;
    overflow-wrap: break-word;
}
.mainDiv {
    height: 100%;
    display: flex;
}
.guestName {
    font-weight: 500;
    color: #181818;
    font-family: Mulish, Verdana, sans-serif;
    font-size: 14px;
}
.sideBarOuter {
    background-color: #FC7482;
    height: 100%;
    width: 64px;
}
.sidebar {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: stretch;
}
.sideBarLogoOuter {
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 8px;
    background: #FC7482;
    margin-bottom: 56px;
}
.sideBarIcons {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
}
.sideBarIconContainer {
    height: 48px;
    width: 48px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    border-radius: 8px;
}
    .sideBarIconContainer:hover {
        background: #999999;
        cursor: pointer;
    }
.sideBarIconSelected {
    background: #0D6C85;
}
.sideBarIcon {
    width: 24px;
    height: 24px;
    display: inline-block;
    line-height: 1em;
    flex-shrink: 0;
    color: currentcolor;
    vertical-align: middle;
}

.logoutButtonOuter {
    padding: 16px;
    width: 100%;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}
.logoutButton {
    display: inline-flex;
    align-items: center;
    position: absolute;
    bottom: 30px;
    left: 10px;
    min-height: 35px;
    height: 35px;
    width: 35px;
}
.sideBackIconDiv {
    display: inline-flex;
    appearance: none;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    user-select: none;
    position: absolute;
    bottom: 30px;
    left: 10px;
    white-space: nowrap;
    vertical-align: middle;
    outline: transparent solid 2px;
    outline-offset: 2px;
    line-height: 24px;
    border-radius: 0.375rem;
    font-weight: 800;
    font-size: 1rem;
    min-height: 35px;
    height: 35px;
    cursor: pointer;
}

.workSpace {
    width: 100%;
    background: #f8f8f8;
    display: flex;
    height: 100%;
    padding: 16px;
    overflow-y: scroll;
}

.pageTopLine {
    display: flex;
    width: 100%;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top:10px;
}

.pageLine {
    width: 100%;
    margin-top: 24px;
    gap: 8px;
    flex-wrap: wrap;
    flex-direction: row;
    min-height:100px;
}

.pageTitle {
    font-size: 26px;
    font-weight: 400;
    color: #181818;
    font-family: Mulish, sans-serif;
}

.pageSearchArea {
    display: flex;
    gap: 8px;
    -webkit-box-pack: end;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.searchAreaMain {
    width: 280px;
    margin-top:1px;
}
.searchArea {
    width: 100%;
    display: flex;
    position: relative;
    isolation: isolate;
    --input-font-size: 12px;
    --input-padding: 4px;
    --input-border-radius: 8px;
    --input-height: 10px;
    background: white;
    border-radius: 8px;
    border: 1px #E2E8F0 solid;
    min-width: 40%;
}
.searchInput {
    width: 100%;
    height: 48px;
    border: 0px none;
    border-radius: 8px;
    outline-offset: 2px;
    position: relative;
    font-size: 1rem;
}
.searchIcon {
    margin:5px;
    margin-top:9px;
}

.shadowBox {
    background: white;
    margin-top: 16px;
    padding: 16px;
    border-radius: 8px;
    box-shadow: rgba(31, 80, 80, 0.12) 0px 4px 12px 0px;
    min-height:100px;
}

.boxTitle {
    color: #575757;
    font-weight: 700;
    font-size: 12px;
    text-transform:uppercase;
}

.filterButtonRow {
    display: flex;
    margin-top: 12px;
    gap: 8px;
}

.filterButton {
    display: flex;
    min-width: 225px;
    border-radius: 8px;
    padding: 16px;
    border-width: 1px;
    border-color: #d7d7d7;
    background: #f8f8f8;
    cursor: pointer;
    -webkit-box-align: center;
    align-items: center;
    gap: 8px;
    height: 64px;
    box-shadow: rgba(31, 80, 80, 0.12) 0px 4px 12px 0px;
    font-weight: 500;
    font-size: 16px;
    text-align:center;
}
    .filterButton:hover {
        background: silver;
        color: white;
        cursor: pointer;
    }

.filterButtonShort {
    height:50px !important;
}
.filterButtonActive {
    background: #429EF3;
    color: white;
    font-weight:900;
}

.filterPanel {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.buttonIcon {
    width:40px;
}
.buttonTextCount {
    display: flex;
    flex-direction: column;
    text-align:left;
    align-content:center;
}

.buttonText {
    font-weight: 500;
    font-size: 14px;
    line-height:24px;
}

.buttonCount {
    font-weight:700;
    font-size: 20px;
    line-height: 24px;
}
.filterIcon {
    height: 40px;
    width: 40px;
}
.exportIcon {
    height: 20px;
    width: 20px;
}
.buttonFormat {
    text-decoration:none;
}
.smallButton {
    min-width: 100px !important;
    color: #428698;
    line-height: 24px;
    font-weight: 700;
    font-size: 16px;
}
    .smallButton:hover {
        background: #429EF3;
        color: white;
        cursor: pointer;
    }
.searchButton {
    min-width: 100px !important;
    color: #429EF3;
    line-height: 24px;
    font-weight: 700;
    font-size: 16px;
    margin-left:100px;
}

    .searchButton:hover {
        background: #429EF3;
        color: white;
        cursor: pointer;
    }
.moreFilters {
    min-height: 100px;
    width: 100%;
    border-top-width: 1px;
    margin-top: 15px;
    white-space: nowrap;
    display: flex;
    gap: 10px;
}

    .moreFilters input {
        border-width: 1px;
        border-color: #d7d7d7;
        border-radius: 4px;
    }

.moreFilterArea {
    margin-top: 10px;
    padding-top: 10px;
    width: 240px;
    height: 100px;
    border-style: solid;
    border-width: 1px;
    padding-left: 20px;
    border-radius: 8px;
}
.gridArea {
    height: calc(-330px + 100vh);
    overflow: auto scroll;
    display: block;
    white-space: nowrap;
}

.ddcType {
    width: 160px;
    border-radius: 4px;
    height:26px !important;
}
.smallFont {
    font-size:11px;
    padding-left:3px;
    color:dimgray;
}
.visitorEntryFields {
    display: flex;
    gap: 4px;
    -webkit-box-pack: end;
    flex-wrap: wrap;
    padding-top:20px;
}
    .visitorEntryFields input {
    width: 250px;
    height: 30px;
    border: 1px solid silver;
    border-radius: 8px;
    outline-offset: 2px;
    position: relative;
    font-size: 1rem;
}
    .visitorEntryFields textarea {
        width: 600px;
        border: 1px solid silver;
        border-radius: 8px;
        outline-offset: 2px;
        position: relative;
        font-size: 1rem;
    }
    .visitorEntryFields select {
        width: 250px;
        border: 1px solid silver;
        border-radius: 8px;
        outline-offset: 2px;
        position: relative;
        font-size: 12px;
        line-height:30px;
        height:30px;
        padding-top:3px;
    }
/*div.dd_chk_select {
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
    height: 18px;
    padding: 0px 0px 0px 0px;
    text-align: left;
    vertical-align: middle;
    font-size: 12px;
    text-decoration: none;
    overflow: visible;
    color: Black;
    background-color: white;
    background-image: url("WebResource.axd?d=8mNM2oY0_MTbltHc0o1ItRleljMUfR4DBsQmd6slUkfJgrVqAj9pnA9QAY3MwRt52BNkHZ4J0y8uOWXI1BpJedc0RUfIgoSa7FhV3ILAqrelBUiDFhVyQGbl6Aes6mxzZY-iIXsEVbKLyf3CPT1oAlHXp2ZqTz85kfzw-zjRYLg1&t=635787794020000000");
    background-position: right center;
    background-repeat: no-repeat;
}

    div.dd_chk_select:hover {
        background-image: url("WebResource.axd?d=3JRPZlR9MqCqYO-IpvGNc3VYqtCRA1aEu2EcC9BnPU0TuMREnPPjOdrInhsMdm_AOzR_1OJ5PxdPWQZiuxawGujU64wS_4sYCd_96qD29C5Xx2oLoI_OMfpbFSubjez9WwVPvlcyoVKvhcIR4Gr_f7wD93N9JyCk_Mh4_4InuFA1&t=635787794020000000");
        cursor: pointer;
    }

    div.dd_chk_select div#caption {
        overflow: hidden;
        height: 16px;
        margin-right: 20px;
        margin-left: 2px;
        text-align: left;
        vertical-align: middle;
        position: relative;
        top: 1px;
    }

div.dd_chk_drop {
    background-color: white;
    border: 1px solid #CCCCCC;
    text-align: left;
    z-index: 1000;
    left: -1px;
    top: 18px;
    min-width: 100%;
}

    div.dd_chk_drop div#checks {
        border-style: none;
        padding: 4px 4px 4px 4px;
        max-height: 200px;
        overflow: auto;
    }


    div.dd_chk_drop div#buttons {
        padding: 2px 4px 4px 4px;
        text-align: right;
        min-width: 154px;
    }

        div.dd_chk_drop div#buttons input {
            text-align: center;
            width: 75px;
            font-size: 12px;
            background-image: url("WebResource.axd?d=w7cXWBQlcgCwYVvAkG1B5nYPV9z5rKFgemBTF9deBHN-WlTGXinFinlcjMkXN5pjTj13HEYaS4TBr1LPvs4-Oj2UdhBb9O2ekBXvmUwtSZGvX8XD4YHpo32oN04uTk2_Z6z0rqjjiQ8cMK6gAQsjZBn4_WPUhFNtetpsjle52tw1&t=635787794020000000");
            background-repeat: no-repeat;
            background-position: center;
            border: medium none;
        }

            div.dd_chk_drop div#buttons input:hover {
                background-image: url("WebResource.axd?d=OeUOmn43MzZaeU0fX1_n6KZQZ-PrxGWs8UwYBhcmGZGY6ZOtcAhswyL-m1QUPqQU_f_XuZb4ZWn8DZ8WhZnvc9-qSW1dAZ264cEr6MxfJeeLQ5cut6pU6S3y3wZ0iwsfp8rltPAbnRFdKo0jKk2ktW3GRasjQAMtBZK5pyH56Oo1&t=635787794020000000");
            }
*/