.headermain {
    font-weight: bold;
    text-align: left;
    margin-top: 1.5em;
    margin-bottom: 0.7em;
}

.k-file-name {
    white-space: nowrap !important; /* Prevents text from wrapping to a new line */
    overflow: hidden !important; /* Hides any content that exceeds the element's width */
    max-width: 150px;
    text-overflow: ellipsis !important; /* Displays an ellipsis (...) to indicate truncated text */
    display: inline-block !important; /* Required for max-width to apply to an inline element like <span> */
}

.text-left {
    text-align: left;
}

.btn-go {
    font-weight: bold;
}

.lowkey-note {
    color: grey;
    font-style: italic;
    margin-top: 0.5em;
    margin-bottom: 1em;
}

.txl-label {
    font-size: 1.1em;
    font-weight: bold;
    text-align: left;
    width: 100% !important;
    padding-left: 2em;
}

.btn-del, .btn-arc, .btn-ret {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

.btn-del, .btn-arc,.btn-info {
    background-color: silver;
    border: none;
    border-radius: 7%;
    font-weight: bold;
    color: white;
}

.btn-del {
    width: 5em;
}

.btn-arc {
    width: 6em;
}

.btn-ret {
    width: 6em;
    border: none;
    border-radius: 7%;
    font-weight: bold;
    color: white;
}

.red-x {
    color: darkred;
    padding: 2px;
}

#nav-logo {
    height: 48px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 5px;
}

#content-links {
    display:flex;
}

#content-bd-div {
    display: -webkit-flex;
    display: flex;
}

.top-search-div {
    margin-top: 7px;
}

#content-bottom-div {
    display: flex;
}

#content-due {
    height: 40%;
    padding-bottom: 15px;
}

#flex-main {
    display: -webkit-flex;
    display: flex;
    justify-content:space-evenly;
}

#flex-sectional {
    width: 100%;
    height: 50%
}

.flex-parent {
    display: flex;
    width: 50%;
    margin-left: 15px;
}

.flex-child {
    flex: 1;
    margin: 10px;
}

.flex-child:first-child {
    margin-right: 20px;
}

#profilepic {
    height: 250px;
}

.text-field {
    width: 320px;
}

.event-description {
    width: 70%;
    height: 320px;
}

.event-dropdown {
    width: 320px;
}

.time-dropdown {
    width: 100px;
}

.ticket-dropdown {
    width: 320px;
}

.ticket-body {
    width: 90%;
    height: 500px;
}

.optemployees {
    width: 100%;
}

.selemployees {
    width: 100%;
}

.msgtext {
    width: 100%;
    height: 250px;
}

.leftbox {
    float: left;
    width: 50%;
    height: 280px;
}

.rightbox {
    float: left;
    width: 50%;
    height: 280px;
}

.quizbox33 {
    font-size: xx-large;
    float: left;
    width: 33%;
    height: 280px;
}

.quizbox50 {
    font-size: xx-large;
    float: left;
    width: 50%;
    height: 280px;
}

.cellfs {
}

@media screen and (min-width: 0px) and (max-width: 800px) {
    #content-carousel-div {
        display: none;
    }

    #content-links {
        width: 100%;
    }

    #content-bd-div {
        display: none;
    }

    .top-search-div {
        margin-top: 0px;
    }

    #content-cal-div {
        display: none;
    }

    #content-main-div {
        width: 100%;
    }

    #content-bottom-div {
        display: none;
    }

    #content-due {
        display: none;
    }

    #content-footer-div {
        display: none;
    }

    #neo-carousel {
        display: none;
    }

    #neo-label {
        display: none;
    }

    li.nav {
        font-size: xx-small;
    }

    li.dropdownnav {
        font-size: xx-small;
    }


    .dropdownnav-content {
        font-size: xx-small;
    }

    #nav-logo {
        height: 24px;
        margin-left: 5px;
        margin-right: 5px;
    }

    #flex-main {
        display: block;
    }

    #flex-sectional {
        flex: none;
        border-width: 0px;
        background-color: transparent;
    }

    .flex-parent {
        display: flex;
        width: 95%;
    }

    .flex-child {
        flex: 1;
        margin: 10px;
    }

        .flex-child:first-child {
            margin-right: 20px;
        }

    #profilepic {
        transform: scale(0.5, 0.5);
        -ms-transform: scale(0.5, 0.5);
        -webkit-transform: scale(0.5, 0.5);
        padding-right: 10px;
    }

    #bellicon {
        transform: scale(0.5, 0.5);
        -ms-transform: scale(0.5, 0.5);
        -webkit-transform: scale(0.5, 0.5);
    }

    .ticket-dropdown {
        width: 65%;
    }

    .ticket-body {
        width: 80%;
        height: 350px;
    }

    .col-12 {
        width: 90%;
    }

    .leftbox {
        width: 75%;
        height: 280px;
    }

    .rightbox {
        width: 75%;
        height: 280px;
    }

    .msgtext {
        width: 75%;
    }

    .col-7 {
        width: 100%;
    }

    .margin-b15 {
        margin-bottom: 15px;
    }

    .k-window {
        border: none !important;
    }

    .cellfs {
        display: none;
    }
}

.arrow-down {
    display:none;
}

#dzelement, #fileelement {
    width: 50%;
}

.biopic {
    height: 170px;
    border: 1px solid #DDDDDD;
    border-radius: 15px;
}

@media screen and (min-width: 0px) and (max-width: 1200px) {
    #action-items > .action-links > .menu {
        position: absolute;
        left: -130px;
    }

    #alerts-form > div:first-of-type { 
        width: 100% !important;
        margin: 0 auto !important;
    }

    #alerts-form > div:nth-of-type(2) {
        width: 100% !important;
        margin: 0 auto !important;
    }
}

@media screen and (min-width: 0px) and (max-width: 800px) {
    .swal2-popup {
        width: 90% !important; /* Adjust as needed */
    }

    #alerts-form .leftbox, #alerts-form .rightbox, #alerts-form textarea {
        width: 100%;
    }


    #searchdiv, #codediv, #mnamediv, #memaildiv, #mnumdiv {
        width: 90%;
    }


    #mnumbox, #mnumlabel, #memailbox, #memaillabel, #mnamebox, #mnamelabel, #codebox, #codelabel {
        width: 50%;
    }


    .k-widget.k-window {
        width:100% !important;
    } 

    #code2div {
        width: 100%;
    }

    #code2box, #code2label, #code2button {
        width: 90%;
    }

    /*hardware*/
    #empTable .hardware-cell {
        padding: 0;
    }
    #empTable, #user-data {
        width: 100%;
        margin:0 auto;
    }

    /*notaries, hsa/ira specialists page style*/
    .directory #header-row > th:not(:first-of-type),
    .directory tbody td:not(:first-of-type) {
        display: none;
    }

    #dzelement, #fileelement {
        width: 90%;
    }

    .biopic {
        height: 95px;
        border: 1px solid #DDDDDD;
        border-radius: 15px;
    }


}