.audit-toolbar {
    display: grid;
    grid-template-columns: 1fr 230px;
    gap: 18px;
    align-items: center;
    padding: 18px 24px 8px 24px;
}

.audit-toolbar.has-dropdown-type {
    grid-template-columns: 1fr 230px 230px;
}

.audit-search-shell,
.audit-dropdown-shell,
.audit-date-shell {
    height: 44px;
    display: flex;
    align-items: center;
    min-width: 0;
}

.audit-dropdown-shell,
.audit-date-shell {
    width: 230px;
    position: relative;
}

.audit-search-box,
.audit-dropdown-type,
.audit-date-range {
    height: 44px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #fff !important;
}

.audit-search-box,
.audit-search-box table {
    width: 100% !important;
}

.audit-dropdown-type,
.audit-dropdown-type table,
.audit-date-range,
.audit-date-range table {
    width: 230px !important;
}

.audit-search-box table,
.audit-dropdown-type table,
.audit-date-range table {
    height: 44px !important;
}

.audit-search-box input,
.audit-dropdown-type input,
.audit-date-range input {
    height: 44px !important;
    line-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 15px !important;
    color: #273240 !important;
    background: #fff !important;
}

.audit-dropdown-type input,
.audit-date-range input {
    user-select: none !important;
    -webkit-user-select: none !important;
    caret-color: transparent !important;
}

.audit-dropdown-type input::selection,
.audit-date-range input::selection {
    background: transparent !important;
    color: #273240 !important;
}

.audit-search-box input {
    padding-left: 14px !important;
}

.audit-dropdown-type input,
.audit-dropdown-type .dxeEditArea_Office365 {
    padding-left: 42px !important;
    font-weight: 600 !important;
}

.audit-date-range input {
    padding-left: 42px !important;
    font-weight: 600 !important;
}

.audit-search-box .dxeButtonEditButton_Office365,
.audit-dropdown-type .dxeButtonEditButton_Office365,
.audit-date-range .dxeButtonEditButton_Office365 {
    width: 42px !important;
    height: 44px !important;
    background: #fff !important;
    border-left: 1px solid #dfe5ea !important;
}

.audit-search-box .dxeButtonEditButton_Office365::after {
    content: "\f002";
    font-family: FontAwesome;
    color: #6f7a86;
    font-size: 18px;
}

/* MAIN DATE ICON */

.audit-date-shell::before {
    content: "\f073";
    font-family: FontAwesome;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6f7a86;
    font-size: 16px;
    z-index: 20;
    pointer-events: none;
}

/* DROPDOWN TYPE ICON */

.audit-dropdown-shell::before {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    font-family: FontAwesome;
    font-size: 15px;
    color: #6f7a86;
    pointer-events: none;
}

.audit-dropdown-shell.icon-browser::before,
.audit-dropdown-shell.icon-remoteaccess::before,
.audit-dropdown-shell.icon-remotesupport::before {
    content: "\f0ac";
}

.audit-dropdown-shell.icon-application::before {
    content: "\f019";
}

.audit-dropdown-shell.icon-webaccessmanagement::before,
.audit-dropdown-shell.icon-tenant::before,
.audit-dropdown-shell.icon-all::before {
    content: "\f03a";
}

.audit-dropdown-shell.icon-windows::before {
    content: "\f17a";
}

.audit-dropdown-shell.icon-mac::before {
    content: "\f179";
}

.audit-dropdown-shell.icon-linux::before {
    content: "\f17c";
}

.audit-dropdown-shell.icon-server::before {
    content: "\f17a";
}

.audit-dropdown-shell.icon-scim::before {
    content: "\f0c0";
}

.audit-dropdown-shell.icon-sso::before {
    content: "\f090";
}

/* DATE POPUP WRAPPER */

.audit-date-window {
    border: 1px solid #dfe5ea !important;
    background: #f7f8fa !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14) !important;
    overflow: hidden !important;
}

.audit-date-window .dxpc-content,
.audit-date-window .dxpc-contentWrapper,
.audit-date-window .dxpc-mainDiv {
    padding: 0 !important;
    margin: 0 !important;
    background: #f7f8fa !important;
    overflow: hidden !important;
}

.audit-date-popup {
    width: 430px !important;
    min-width: 430px !important;
    max-width: 430px !important;
    display: grid !important;
    grid-template-columns: 165px 205px !important;
    column-gap: 20px !important;
    padding: 18px !important;
    box-sizing: border-box !important;
    background: #f7f8fa !important;
}

.audit-date-heading {
    margin: 0 0 12px 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #7b838c;
}

/* QUICK RANGE OPTIONS
   Supports both:
   <button class="audit-date-option">
   <asp:LinkButton CssClass="audit-date-option"> */

.audit-date-option,
a.audit-date-option,
button.audit-date-option {
    display: grid !important;
    grid-template-columns: 18px 1fr 12px !important;
    column-gap: 6px !important;
    align-items: center !important;
    justify-items: start !important;

    width: 100% !important;
    min-height: 38px !important;
    margin: 0 0 6px 0 !important;
    padding: 9px 10px !important;
    box-sizing: border-box !important;

    border: 0 !important;
    border-radius: 8px !important;
    outline: 0 !important;

    background: transparent !important;
    color: #273240 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    text-align: left !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Override normal website link styles */

a.audit-date-option:link,
a.audit-date-option:visited,
a.audit-date-option:hover,
a.audit-date-option:active,
a.audit-date-option:focus {
    color: #273240 !important;
    text-decoration: none !important;
}

/* Calendar icon */

.audit-date-option::before {
    content: "\f073";
    width: 18px !important;
    font-family: FontAwesome;
    font-size: 13px;
    font-weight: normal;
    color: #8d98a3;
    text-align: center;
}

/* Reserve space for selected checkmark */

.audit-date-option::after {
    content: "";
    width: 12px !important;
    font-family: FontAwesome;
    font-size: 13px;
    font-weight: normal;
    color: #f07057;
    text-align: center;
}

/* Hover and selected quick range */

.audit-date-option:hover,
.audit-date-option:focus,
.audit-date-option.active,
a.audit-date-option:hover,
a.audit-date-option:focus,
a.audit-date-option.active,
button.audit-date-option:hover,
button.audit-date-option:focus,
button.audit-date-option.active {
    background: #dfdfdf !important;
    color: #273240 !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

/* Selected checkmark */

.audit-date-option.active::after {
    content: "\f00c";
}

/* CUSTOM RANGE */

.audit-date-custom {
    width: 205px !important;
    max-width: 205px !important;
    border-left: 1px solid #dde3e9 !important;
    padding-left: 20px !important;
    box-sizing: border-box !important;
}

.audit-date-label {
    margin: 8px 0 5px 0;
    font-size: 13px;
    font-weight: 600;
    color: #69737f;
}

.audit-date-custom .dxeButtonEdit_Office365,
.audit-date-custom .dxeTextBox_Office365,
.audit-date-custom .dxeButtonEdit_Office365 table,
.audit-date-custom .dxeTextBox_Office365 table {
    width: 185px !important;
    max-width: 185px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #fff !important;
}

.audit-date-custom .dxeButtonEditButton_Office365 {
    width: 34px !important;
    border-left: 1px solid #dfe5ea !important;
    background: #fff !important;
}

.audit-date-custom input {
    height: 38px !important;
    line-height: 38px !important;
    padding-left: 10px !important;
    font-size: 15px !important;
    background: #fff !important;
}

/* APPLY BUTTON */

.audit-date-apply {
    width: 185px !important;
    max-width: 185px !important;
    margin-top: 14px !important;
}

.audit-date-apply,
.audit-date-apply .dxbButton_Office365,
.audit-date-apply .dxb {
    background: #f07057 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

/* TYPE POPUP OPTIONS */

.audit-type-option {
    display: grid !important;
    grid-template-columns: 18px auto !important;
    column-gap: 10px !important;
    align-items: center !important;

    width: 100% !important;
    padding: 9px 10px !important;
    box-sizing: border-box !important;

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;

    background: transparent !important;
    color: #273240 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    text-align: left !important;
    text-decoration: none !important;

    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.audit-type-option:hover,
.audit-type-option:focus,
.audit-type-option.active {
    background: #dfdfdf !important;
    color: #273240 !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

.audit-type-icon,
.audit-type-icon i,
.audit-type-option .fa {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 14px !important;
    min-width: 14px !important;
    height: 14px !important;
    line-height: 14px !important;

    font-size: 14px !important;
    color: #6f7a86 !important;
    background: transparent !important;

    text-align: center !important;
    transform: none !important;
}

.audit-type-option:hover .audit-type-icon,
.audit-type-option:hover .audit-type-icon i,
.audit-type-option:hover .fa,
.audit-type-option:focus .audit-type-icon,
.audit-type-option:focus .audit-type-icon i,
.audit-type-option:focus .fa,
.audit-type-option.active .audit-type-icon,
.audit-type-option.active .audit-type-icon i,
.audit-type-option.active .fa {
    color: #f07057 !important;
}

/* RESPONSIVE TOOLBAR */

@media (max-width: 900px) {
    .audit-toolbar,
    .audit-toolbar.has-dropdown-type {
        grid-template-columns: 1fr;
    }

    .audit-search-shell,
    .audit-dropdown-shell,
    .audit-date-shell {
        width: 100%;
    }

    .audit-dropdown-type,
    .audit-dropdown-type table,
    .audit-date-range,
    .audit-date-range table {
        width: 100% !important;
    }
}