@charset "UTF-8";



/*  following overrides or adds to the Bootstrap styles */
/*:root, [data-bs-theme=light] {*/
:root {
    /*  page colors */
    --page-bg-color: #fff;
    --page-font-color: #444;
    --primary-font-color: #0071C4;
    --border-color: #d2cccc;
    --input-bg-color: #e4e7eb;

    /* primary bg colors */
    --primary-bg-color: #0071C4;
    --primary-bg-font-color: #fff;
    /*--primary-bg-color-hover: #0081d4;*/
    --primary-bg-color-hover: #b8b8b8;
    --primary-bg-font-color-hover: #000;

    /* secondary bg colors */
    --secondary-bg-color: #606060;
    --secondary-bg-font-color: #606060;
    --secondary-bg-color-hover: #b8b8b8;
    --secondary-bg-font-color-hover: #000;

    /* tertiary bg colors */
    /*--tertiary-bg-color: transparent;*/
    --tertiary-bg-color: #e0e0e0;
    --tertiary-bg-font-color: #444;
    --tertiary-bg-color-hover: #b8b8b8;
    --tertiary-bg-font-color-hover: #000;

    /* links */
    --link-font-color: #444;
    --link-font-color-hover: #000;
    --primary-link-font-color: #0071C4;
    --primary-link-font-color-hover: #0081d4;

     /*  Bootstrap colors (they have '--bs-*' format) */
    /*--bs-secondary-color: #606060;*/
    /*--bs-secondary-color-hover: #606060;*/

    --bs-border-color: #ddd;
}


/* FONT SIZES */

html {
    font-size: 14px; /* global font-size set to be used as 'rem' (root em), equals to '1rem'. Note: TO work for 'rem', It must be set on 'html' element, which is the root, and not on 'body'! */
}

/*@media (max-width: 765px) {*/
    /* Font breakpoints should be synched to Boostrap breakpoints for smooth experience */
    /*
        Extra small (xs): <576px
        Small (sm): ≥576px
        Medium (md): ≥768px
        Large (lg): ≥992px
        Extra large (xl): ≥1200px
        Extra extra large (xxl): ≥1400px
    */

    /*html {
        font-size: 12px;*/ /* Adjusts base font size for smaller screens */
    /*}
}*/


/*h1 {
    font-size: 2rem;*/ /* 32px on larger screens, 28px on smaller screens */
/*}*/

.treeview-image {
    padding-right: 1.25rem;
}

.k-treeview-leaf.k-selected {
    background-color: transparent !important;
    color: inherit !important;
    border-color: inherit !important;
    box-shadow: inherit !important;
}

/* FONT TYPES */

body {
    font-family: "Segoe UI Light", Segoe, Tahoma, Arial, Helvetica, Sans-Serif;
}

h1, h2, h3,
textarea,
.k-pager,
.k-table-md,
.k-grid,
.k-input,
.k-picker,
.k-input-md,
.k-picker-md,
.k-treeview {
    font-family: inherit;
}

/* ALL COLORS */

body {
    background-color: var(--page-bg-color);
    /*color: #555;*/
    color: var(--page-font-color);
}

a {
    text-decoration: none;    
    color: var(--link-font-color);
}

    a:hover {        
        color: var(--link-font-color-hover);
        font-weight: bold;
    }
    .k-grid a:hover{
        font-weight: normal;
        cursor: pointer;
    }
    a:hover.sp-button {
        color: var(--primary-bg-color-hover);
        font-weight: normal;
    }
    a.colored,
    a .colored {
        color: var(--primary-link-font-color);
    }
    a:hover.primary-link-hover,
    a:hover .primary-link-hover {
        color: var(--primary-link-font-color-hover);
    }

hr {    
    color: var(--bs-border-color);
    opacity: 1.0;
}


.menu .current {
    font-weight: bold;
}

.outer-container {
    max-width: 1400px;
    margin: 0 auto;
}

.fieldContainer {
    padding-left: 1rem;
}

label.active:hover {
    color: var(--link-font-color-hover);        
}

/* buttons */
.icon {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
}
    .icon img {
        padding: 4px;
        width: 100%;
        height: 100%;
    }
    .qq-upload-button,
    a.sp-button,
    button.sp-button, .button, .icon {
    background: var(--primary-bg-color);
    border-color: var(--primary-bg-color); /* we set the same color as the bg, later the .sp-button class will set a border-width that correpsonds to the k-input borders, so, when placed side by side, both can have the same size */
    color: var(--primary-bg-font-color)
}
    .qq-upload-button:not(.disabled):hover,
    .qq-upload-button-hover:not(.disabled),
    a.sp-button:not(.disabled):hover,    
    button.sp-button:not(.disabled):hover,    
    button.sp-button.over:not(.disabled),
    .button:not(.disabled):hover,
    .button.over:not(.disabled),
    .icon:not(.disabled):hover {
        background: var(--primary-bg-color-hover);
        border-color: var(--primary-bg-color-hover);
        color: var(--primary-bg-font-color-hover);
    }

    .button.cancel,
    button.cancel,
    .button.back,
    button.back {
        background-color: var(--tertiary-bg-color);
        border-color: var(--tertiary-bg-color);      
        color: var(--tertiary-bg-font-color);
    }
        .button.cancel:hover,
        button.cancel:hover,
        .button.back:hover,
        button.back:hover {
            background-color: var(--tertiary-bg-color-hover);
            border-color: var(--tertiary-bg-color-hover);
            color: var(--tertiary-bg-font-color-hover);
        }

    .button.disabled,
    button.disabled,
    .icon.disabled {
        /*background: #666;*/
        /*border-color:#666;*/
        cursor: default;
        opacity: 0.5;
    }

/* grey border color for text inputs */
.k-input,
.k-picker,
.k-picker-solid,
.captcha-area input,
/*.login .formu .k-input*/
input[type='text'], input[type='password'], textarea {
    border-color: var(--border-color);
}
/*-------------------------------------------*/
/* checkboxes */
.k-checkbox {
    /*border-color: #ced4da;*/
    border-color: #ccc;
    background-color: #ffffff;
}
    /*
.k-checkbox:checked, .k-checkbox.k-checked {
    border-color: var(--bs-primary);
    color: white;
    background-color: var(--bs-primary);
}*/
    .k-checkbox:checked, .k-checkbox.k-checked,
    .k-checkbox:indeterminate, .k-checkbox.k-indeterminate {
        border-color: #aaa;
        color: white;
        background-color: #aaa;        
    }

/*-------------------------------------------*/
/* AD tree nodes */
.disabled-node {
    color: grey;
    cursor: not-allowed;
}



/*-------------------------------------------*/
/* file upload colors  */
#dndUpload {
    color: #999;
    border: 2px #999 dashed;
    filter: invert(19%)  saturate(0%) brightness(94%); /* Grey color filter calculated based on the original black color of the svg image */
}

    #dndUpload.over {
        color: var(--primary-bg-color);
        border: 2px var(--primary-bg-color) dashed;
        filter: none;
        /*filter: invert(40%) sepia(77%) saturate(4936%) hue-rotate(189deg) brightness(94%) contrast(105%);*/ /* Blue color filter calculated based on the original black color of the svg image */
    }





/* OTHER SIZES */

body {
    /*min-width: 640px;*/ /* limiting the width will not work with MFA auth views!!! */
}

    body.login {
        background-color: #efefef;
        min-width: auto;
        width: 100%;
    }


.login-container {
    background-color: #fff;
    box-shadow: 0 0px 10px 2px rgba(182, 172, 172, 0.7);
    text-align: left;
}

.login-container {
    width: 38rem;
}
/*  To adjust the size of custom logos (e.g. in SVG vector format): enable one of the styles below
    (".logo-container" or ".logo-container .logo") and set the required size
    (only one class could be needed, but the container/content hierarchy is provided if further 
    adjustments must be made).
    For normal bitmpas : unless a bitmap must be resized on the page, these styles can be disabled:
    the container should adapt its size automatically to the content. In the other case: 
    set the required size on the .logo-container, and set the .logo size to 100%/100% (so the bitmap adjust to the container size) */
.logo-container {
    width: 160px;
    height: 60px;
}

.login .logo-container {
    width: 220px;
    height: 100px;
    margin-top: 0;
    margin-left: 0;
}

.product .logo-container {
    width: 160px;
    height: 60px;
}

.logo {
    width: 100%;
    height: 100%;
}

    .logo img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* Ensure the image fits within the container without distortion */
    }

.product {
    width: 52rem; /* 48rem * 14px per 'rem' = 672px */
}

.product-header {
    height: 6rem;
    padding-top: 1rem;
    /*top: 0;
    left: 0;
    width: 100%;*/
    background-color: var(--primary-bg-color);
}

    .product-header h1.logo {
        color: #fff;
        font-size: 1.5rem;
        line-height: 3.75rem;
        white-space: nowrap
    }

.product tr {
    height: 2.5rem;
}

/*
.title {
    font-size: 1.35rem;
}*/
.title,
p.title {
    font-size: 1.45rem;
}

.login p.title, p.title {
    font-size: 1.45rem;
    /*color: var(--primary-bg-color);*/
    /*padding: 0 0 15px 0;*/
    /*text-align: center;*/
    /*font-weight: bold;*/
}

.loginFooter {
    font-size: 12px;
    text-align: right;
    padding-top: 1rem;    
    text-transform: uppercase;
}

.loginGeotrustIco {
    text-align: right;
    padding-top: 1.5rem;
}

.loginArea label {
    color: var(--primary-font-color);
}

.k-grid tbody > tr.k-table-row.over
/*.k-grid .k-table-alt-row.k-master-row.over,
.k-grid .k-table-row.k-master-row.over */ {   
    /*background-color: #789;*/
    background-color: #ced3db; /* TODO: this is the grey hover color for drop-down-selector, it is good as highlight for grid rows on hover */
}

.clickRows tbody tr.over, .clickRows tbody tr.over a {
    /*color: #FFF;*/ /* white text is good if row backgorund goes dark on hover, but noew we use the light bg on hover*/
}

.login .formu #activeUsername a {
    /*font-size: 14px;*/
    text-decoration: underline;
}

.login .formu #LoginBox2,
.login .formu #LoginBox {
    border: 1px solid #efefef;
    box-shadow: 1px 1px 1px #efefef;
}


a.underline-link,
.underline-link a {
    text-decoration: underline;
}

.primary-text,
a.primary-link,
.primary-link a,
.captcha-area a {
    color: var(--primary-font-color);
}

/*   TEXT INPUT SIZING */

label,
.filterLabel {
    vertical-align: middle;
}
.user-table td,
.formSection td,
.form-table td
/*.formSection input*/ {
    padding-left: 1rem;
    /*padding-right: 1rem;*/
    padding-bottom: 1rem;
    vertical-align: middle;
}

.k-input, .k-picker,
.k-input-md, .k-picker-md,
.classifier-section .k-autocomplete,
input[type='text'], input[type='password'], textarea {
    /*padding: 1px;*/ /* to reset the factory padding on text input */
    width: 100%; /* this is the kendo/bootstrap-defined size, useful if this is placed into a container that will control the size */    
    /* we must limit it a little bit, so it is not too big if the conatiner is big (due to the defualt "100%" size) */
    /*max-width: 20rem;*/
    max-width: 30rem;
}
/* used by language selector */
.minimum-size-input-width {
    min-width: 14rem;  /*to avoid very small inputs if container width is not defined (though it is recommended to put inputs in containers (like 'col') that will control the size */
}
/* used by software license selector */
.medium-size-input-width {
    min-width: 24rem; 
}

.ml-auto {
    margin-left: auto;
}


/* for the filter area (usually placed above the grid) we gonna limit the input size further down */
/*.filterArea .k-input,*/
.filterArea .k-picker,
.filterArea .k-input-md,
.filterArea .k-picker-md,
.filterArea input[type='text'],
.filterArea textarea {
    /* we must limit it a bit further */
    max-width: 24rem;
}
.filerArea .k-autocomplete.k-input,
.filterArea .k-autocomplete.k-input-md {
    width: 24rem; /* we must set the width manually, otherwise the autocomplete is very short */
}
.filterArea a.sp-button {
   margin-right: 1rem;
}

.k-datepicker.k-input {
    width: auto;
}

.k-input, .k-picker,
.k-input-md, .k-picker-md {
    font-size: 1rem;
    /*line-height: 1.5rem;*/
}

.qq-upload-button,
a.sp-button,
button.sp-button {
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    /* "min-width: 8rem" cannot be seet on general 'button' element because there are other Kendo 'buttons' 
        with different sizes (they are buttons with class 'k-button'), and they would inherit the 'button' width. 
        So we set it on this custom class buttons (.sp-button), and set this class on all buttons that need it */
    min-width: 8rem;
}

/*  original kendo/bootstrap padding sizes are these: */
/*.k-input-md .k-input-inner, .k-picker-md .k-input-inner {
    padding-block: 0.375rem;
    padding-block-start: 0.375rem;
    padding-block-end: 0.375rem;
    padding-inline: 0.75rem;
    padding-inline-start: 0.75rem;
    padding-inline-end: 0.75rem;
}*/
/*label,*/
.ddl,
.qq-upload-button,
.qq-upload-button-hover,
a.sp-button,
button.sp-button,
input[type='text'], input[type='password'],
/*.k-input,*/
/*.input,*/
/*input[type='radio'],*/
textarea, textarea.k-input, textarea.k-input-md,
.k-input .k-input-inner,
.k-input-md .k-input-inner,
.k-picker .k-input-inner,
.k-picker-md .k-input-inner,
.fortaleza {
    padding-block: 0.375rem;
    padding-block-start: 0.375rem;
    padding-block-end: 0.375rem;
    padding-inline: 0.75rem;
    padding-inline-start: 0.75rem;
    padding-inline-end: 0.75rem;
}
label,
input[type='radio'] {    
    padding-block-end: 0.375rem;    
}
label {
    padding: 0;
    padding-right: 1rem;
}
.label {
    padding-block: 0.375rem;
    padding-block-start: 0.375rem;
    padding-block-end: 0.375rem;
    padding-inline: 0.75rem;
    padding-inline-start: 0.75rem;
    padding-inline-end: 0.75rem;
    padding-left: 0;
}
/*   TEXT INPUT BORDER */
a.sp-button,
button.sp-button,
.k-input,
.k-picker,
.k-picker-solid,
.captcha-area input,
/*.login .formu .k-input*/
input[type='text'], input[type='password'], textarea {
    border-width: 1px;
    border-style: solid;
}


    /* in Kendo components, the <input> element is usually placed within a <div> with class '.k-input',
so setting 'border: 1px' for both 'k-input' and <input> will cause double borders. We leave the k-input bordes but remove borders in the inner <input> element */
    .k-input input[type='text'],
    .k-input input[type='password'] {
        border-width: 0;
    }
/* Optional: Custom focus outline for better accessibility */
:focus {
    outline: none; /* Remove focus outline for all elements */
    /*outline: 2px solid var(--bs-primary);*/ /* Custom outline color and width */
    /*outline-offset: 0px;*/ /* Optional: Add some space between the outline and the element */
}

/*   TEXT INPUT COLOR */
.input-container,
input[type='text'], input[type='password'], textarea,
.k-input:not(.disabled),
.k-picker-solid,
/*.login .formu .k-input,*/ /* can i be less specific and leave only k-input ? */
.login .formu .captcha-area input[type='text'] {   
    background-color: var(--input-bg-color);
}

    .input-container:hover,
    input[type='text']:hover, input[type='password']:hover, textarea:hover,
    .k-input:hover:not(.disabled),
    .captcha-area input[type='text']:hover
    /*.login .formu .k-input:hover,
.login .formu .captcha-area input:hover*/ {
        background-color: #fff;
        background-color: #e0e4e8
    }

    .input-container:hover input[type='text'] {
        background: transparent;
    }
    .input-container:hover input[type='text']:hover{
        background: transparent;
    }
/*
        input[type="text"].tbDdl {
            border-width: 1px;
        }*/

.ddlContainer,
.input-container {
    display: inline-block;
    border-width: 1px;
}

    .input-container input[type="text"].tbDdl {
        /*border-width: 1px;*/
        border-width: 0px;
        padding-right: 4.5rem;
    }

    .filterArea.float-end .ddlContainer{
        margin-left: 2rem;
        margin-right: 0;
    }

    .filterButton.current{
        font-weight: bold;
    }

.ddl {
    display: none;
    position: absolute;
    z-index: 1200;
    top: 33px;
    right: 0;
    left: 0;
    /*width: 340px;*/
    text-align: left;
    border: 1px solid #DDD;
    background: #FFF;
    /*padding: 9px;*/
    line-height: 200%;
    font-size: 90%;
    white-space: nowrap;
}


/* Selector for all radio input elements */
input[type="radio"] {
    margin-right: 0.75rem;
    cursor: pointer;
}
    /* Selector for labels associated with radio inputs */
    input[type="radio"] + label {
        cursor: pointer;
    }



.login .formu #activeUsername {    
    font-size: 1.3rem;
}

    .login .formu #activeUsername a {
        font-size: 1rem;
        color: var(--primary-font-color);
        text-decoration: underline;
    }


/* CAPTCHA - PASSWORD RESET PAGE */


.captchaContainer {
    position: relative;   
    width: 14.65rem;
    height: 4rem;
}

    .captchaContainer img {
        width: 100%;
        height: 100%;
        /*object-fit: contain;*/ /* Ensure the image fits within the container without distortion */
        object-fit: fill;
    }

input#captcha {
    position: relative;    
    top: -0.75rem; /* must rise it to compenstate for the <br> line injected by the captcha plugin */
    width: 6.5rem;
    border: 1px solid var(--border-color);
    font-size: 1.75rem;
    letter-spacing: 0.25rem;
}

.newCaptcha {
    font-weight: bold;   
}

/**********************************************************************/
.loaderIcon {
    height: 12px;
}

.section {
    font-size: 18px;
}

.checkThis .msg {
    font-size: 11px;
}

.widget table {
    /*font-size: 14px;*/
}

.checkThis .msg {
    font-size: 11px;
}

.widget th {
    /*font-size: 14px;*/
}

.configPane {
    padding-bottom: 2rem;
    z-index: 10;
}

/***********************************************************/
/*   BUTTONS   */
button, .button {
    font-size: 1rem;
}

/*
button#newAccount {
    margin-top: 8px;
}
*/
/*
.buttonPanel {
    height: 25px;
}
*/
/* .buttonPanel .button {
        display: block;
        float: left;
        padding: 3px 20px 3px 0;
    }*/

/***********************************************************/

#mainFooter {
    font-size: 12px;
}


.k-checkbox.k-rounded-md {
    border-radius: 0; /*0.25rem;*/
}

.k-rounded-md {
    border-radius: 0; /* we don't use rounded corners in current SealPath design, must override Bootstrap ones */
}

.k-checkbox-md {
    width: 1.25rem;
    height: 1.25rem;
}
/*
.k-checkbox {
    margin: 0;
    padding: 0;
    line-height: initial;
    border-width: 1px;
    border-style: solid;
    outline: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    flex: none;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    -webkit-appearance: none;
}*/



.line {
    border-top: 1px solid var(--border-color);
    margin: 10px 0;
}

.menu {
    padding-top: 1px;
    /* font-size: 18px;   
    word-spacing:12px;*/
}

    .menu > ul > li {
        list-style: none;
        padding-right: 18px;
        float: left;
        position: relative;
    }

        .menu > ul > li ul {
            display: none;
            position: absolute;
            left: 0;
            top: 20px; /*2rem; */ /* small margin is needed, otherwise the main-menu items that are placed below the current main-menu-item (on smaller screens) can capture the 'hover' event! */
            width: 200px;
            /*font-family: "Segoe UI Light", Segoe, Trebuchet MS, Arial, Helvetica, Sans-Serif;*/
            font-size: 14px;
            line-height: 200%;
            border: 1px solid #888;
            background-color: #FFF;
            padding: 1rem;
            z-index: 1000;
        }

    .menu .current {
        color: #000;
        font-weight: bold;
    }



.submenu {
    line-height: 200%;   
}
    /* the menu items are placed within inner div, so must set flex there as well */
    .submenu > div {
        display: flex;
        flex-wrap: wrap; /* Allows items to wrap to the next line if necessary */
        gap: 3%; /* Adjust the spacing between items as needed */
    }
    .submenu a {
        text-decoration: none; /* Remove underline from links */
        margin-bottom: 0; /* Remove bottom margin */
        /*margin-right: 3%;*/
        white-space: nowrap; /* Prevents wrapping of individual links */
    }
        .submenu a:last-child {
            margin-right: 0; /* Remove margin-right from the last item */
        }

    .submenu .current {
        color: #000;
        font-weight: bold; /* Highlight the current menu item */
    }

/* Media query for screens 1400px and above */
@media (min-width: 1400px) {
    .submenu {
        /*flex-wrap: nowrap;*/ /* Prevent wrapping */
        /*flex-direction: column;*/ /* Stack items vertically */
    }
        .submenu > div {
            flex-direction: column; /* Stack items vertically */
        }

        .submenu a {
            margin-right: 0; /* Remove right margin */
            margin-bottom: 0.5rem; /* Ensure spacing between items */
            white-space: nowrap; /* Prevents wrapping of individual links */
        }
}
.leftBar h2 {
    font-size: 16px;
    margin-bottom: 5px;
}

.leftBar .help a {
    color: var(--primary-font-color);
}


.k-grid .k-button {
    background-color: var(--primary-bg-color);
    color: white;
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    line-height: 1.0rem;
}

.k-pager .k-button {
    background-color: white;
    color: black;
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    line-height: 1.0rem;
}

.button-line-height {
    line-height: 2.2rem;
}






















.strong {
    font-weight: bold;
}

.center {
    text-align: center;
}

.clear {
    clear: both;
}

.grayed {
    color: #999;
}

.doctype {
    width: 26px;
    height: 26px;
}

.section {
    display: block;
    margin: 11px 0 3px 0;
    /*color: #888;*/
    /*color: #444;*/
    font-size: 18px;
}

.lastAccess {
    font-family: "Segoe UI Light", Segoe, Trebuchet MS, Arial, Helvetica, Sans-Serif;
    color: #A7A7A7;
    font-size: 10px;
}

/*.widget {
    padding: 0 0 45px 0;
    position: relative;
}
*/
#noticesWidget {
    min-height: 120px;
}

#dndInfoWidget {
}
/*
#statsWidget {
    padding-left: 20px;
}
*/
/*#companyWidget, #quickLinksWidget {
    padding-left: 40px;
}*/

.checkThis {
    width: 96px;
    height: 96px;
    background: no-repeat center center;
    color: #FFF;
    float: left;
    margin-right: 16px;
}

    .checkThis.warning {
        background-image: url(images/ico96-warning.png);
    }

    .checkThis.notice {
        background-image: url(images/ico96-message.png);
    }

    .checkThis .qty {
        display: block;
        height: 35px;
        padding: 32px 0 0 56px;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
    }

    .checkThis .msg {
        display: block;
        font-size: 11px;
        padding: 43px 0 0 8px;
    }

.spacer {
    margin-top: 40px;
}

.widget table {
    width: 100%;
    font-family: "Segoe UI Light", Segoe, Tahoma, Arial, Sans-Serif;
    font-size: 14px;
}

.widget td, .widget th {
    padding: 4px;
}

.widget th {
    background-color: var(--primary-bg-color);
    color: var(--primary-bg-font-color);
    font-size: 1rem;
    text-align: left;
}
.quickLink {
    margin-bottom: 15px;
}

    .quickLink h3 {
        margin-bottom: 5px;
    }

        .quickLink h3 a {
            /*color: var(--link-font-color);*/
        }

    .quickLink p a {
        color: #7F7F7F;
    }

    .quickLink.over h3 a {
        /*color: var(--primary-font-color);*/
        /*color: var(--link-font-color);*/
    }

#mainFooter {
    color: #7F7F7F;
    font-size: 12px;
    line-height: 170%;
    border-top: 1px solid #DDD;
    margin-top: 15px;
    padding: 10px 15px;
}

    #mainFooter a {
        text-decoration: none;
        color: #7F7F7F;
    }

        #mainFooter a:hover {
            /*color: var(--primary-link-font-color);*/
        }

    #mainFooter p {
        margin-bottom: 10px;
    }

    #mainFooter .footer-column {
        width: 18%;
        float: left;
        padding: 0 0 0 10px;
    }

    #mainFooter .mainfootertext {
        float: left;
        width: 80%;
    }

    #mainFooter .productGeotrustIco {
        width: 20%;
        float: left;
        padding: 0px;
        text-align: left;
    }
.doctype20 {
    display: inline-block;
    vertical-align: text-bottom;
    background: url(images/doctypes_20.png) no-repeat 0 0;
    width: 20px;
    height: 20px;
}

.doctype50 {
    display: inline-block;
    vertical-align: text-bottom;
    background: url(images/doctypes_50.png) 0 0;
    width: 50px;
    height: 50px;
}

.doctype20.type1 {
    background-position: -20px 0px;
}

.doctype20.type2 {
    background-position: -40px 0px;
}

.doctype20.type3 {
    background-position: -60px 0px;
}

.doctype20.type4 {
    background-position: -80px 0px;
}

.doctype20.typeCSV {
    background-position: -100px 0px;
}

.doctype50.type1 {
    background-position: -50px 0px;
}

.doctype50.type2 {
    background-position: -100px 0px;
}

.doctype50.type3 {
    background-position: -150px 0px;
}

.doctype50.type4 {
    background-position: -200px 0px;
}

.doctype50.typeCSV {
    background-position: -250px 0px;
}

.clickRows tbody tr {
    cursor: pointer;
}

    .clickRows tbody tr.t-no-data {
        cursor: default;
    }
/*
    .clickRows tbody tr.over, .clickRows tbody tr.over a {
        color: #FFF;
    }*/

.documentGenericDetail {
    margin-left: 50px;
}

.fieldLabel.middleLabel {
    vertical-align: middle;
    display: inline-block;
    height: 19px;
}

.middle {
    vertical-align: middle;
}
.formActionsBar {
    /* Remove text-align: right; as it's not needed with Flexbox */
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Aligns items to the right */
    flex-wrap: wrap; /* Allows items to move to a new line if they don't fit */
    gap: 1rem ; /* Controls the space between the children items */
}

.formActionsBarAD {
    position: fixed;
    bottom: 50px;
    right: 30px;
    height: 30px;
    text-align: right;
    margin-top: 20px;
    z-index: 1000;
}

.short {
    width: 30px;
}

.numeric {
    text-align: right;
}

blockquote {
    margin-left: 20px;
}

.long {
    width: 300px;
}

#permissionSection, #optionsSection, #shareSection {
    display: none;
}

.showMore {
    display: block;
    height: 20px;
    overflow: hidden;
}

    .showMore.opened {
        height: auto;
    }

.showMoreBtn {
    height: 20px;
    cursor: pointer;
    margin-bottom: 20px;
}

.showMore .showMoreBtn.more {
    display: block;
}

.showMore .showMoreBtn.less {
    display: none;
}

.showMore.opened .showMoreBtn.more {
    display: none;
}

.showMore.opened .showMoreBtn.less {
    display: block;
}

.notices {
    display: none;
    color: red;
}
.fileLinks {
    margin: 20px 0;
    line-height: 150%;
}

.ui-dialog-content {
    padding-top: 30px;
}

.infoDetail {
    display: inline-block;
    *display: block; /* for ie */
    *float: left; /* for ie */
    vertical-align: top;
    width: auto;
    min-width: 8rem;
    /*height: 55px;*/
    padding: 0.5rem;
    margin: 5px 0 0 0;
    /*border:2px solid #666;*/
    color: #FFF;
    overflow: hidden;
    background: #e8742e;
}

    .infoDetail.grayed {
        filter: alpha(opacity=60);
        opacity: 0.6;
        -moz-opacity: 0.6;
    }

.mainNumber {
    font-size: 24px;
}

.secondaryNumber {
    font-size: 0.9rem;
}

.infoDetail .title {
    display: inline-block;
    font-size: 1rem;
    vertical-align: bottom;
    line-height: normal;
    white-space: nowrap;
}

.titleContainer {
    line-height: 25px;
}
.fullClick {
    cursor: pointer;
}

.statsPage h3 {    
    color: var(--primary-font-color);
    padding-top: 1em;
}

.k-widget.k-dropdown.k-header {
    background: #FFF;
}

.k-widget.k-dropdown .k-input {
    color: #222;
}
/*
.k-widget.k-dropdown .k-icon.k-arrow-down {
    background-position: -61px -396px !important
}*/

.ui-datepicker.ui-widget .ui-datepicker-next.ui-state-hover,
.ui-datepicker.ui-widget .ui-datepicker-prev.ui-state-hover {
    background-color: #FFF;
}

.user {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    background: no-repeat center center;
    vertical-align: middle;
}

.user1 {
    background-image: url(images/user-internal.png);
}

.user4 {
    background-image: url(images/user-external.png);
}

.userRolIdIcon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    background: no-repeat center center;
    vertical-align: middle;
}

.userRolIdIcon1 {
    background-image: url(images/user-superuser.png);
}

.userRolIdIcon2 {
    background-image: url(images/user-protector.png);
}

.userRolIdIcon3 {
    background-image: url(images/user-consumer.png);
}


.fortaleza {
    display: inline-block;
    color: #000;
    font-size: 1rem;
    border: 1px solid var(--border-color);
    text-align: center;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.fortalezaDebil {
    background: #ff4c4c;
}

.fortalezaIntermedio {
    background: #ffcc33;
}

.fortalezaFuerte {
    background: #33cc33;
}

.notaFortaleza {
    color: #888;
    font-size: 10px;
}

.blueLink {    
    color: var(--primary-font-color);
    text-decoration: underline;
}

.verticalData .t-dropdown {
    vertical-align: middle;
}

.semititle {
    color: var(--primary-font-color);
    font-size: 17px;    
}

.semiBox {
    width: 49%;
    vertical-align: top;
}

.coloredSpan {
    padding: 5px;
}

.coloredSpan2 {
    padding: 5px;
}

.inline {
    display: inline-block;
}
/* check iframe cite datalist still used */
.ellipsed {
    white-space: nowrap;
}

/*
.ellipse {
    display: block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
*/

#NoSoportado {
    color: #999;
    text-align: center;
    padding-top: 9px;
    font-style: italic;
    font-size: 12px;
    margin: 0 21px 0 6px;
}

#btnResetPassword {
    margin-left: 0;
}


.t-grid-toolbar {
    text-align: right;
}

/* Moved from the fileuploader.css file to be customizable on Saas */

.qq-uploader {
    position: relative;
    width: 100%;
}


/*.qq-upload-button {
    display: inline-block;
    vertical-align: middle;
    background-color: var(--primary-bg-color) !important;
    border: 2px solid var(--primary-bg-color) !important;
    color: #FFF !important;
    padding: 6px 18px 6px 18px;
    *padding: 3px;*/ /* Sólo IE7 */
    /*margin-top: 0;
    margin-left: 10px;
    cursor: pointer;
    vertical-align: middle;
}*/
/*
.qq-upload-button-hover {
    background: #e8742e !important;
}
*/
.qq-upload-drop-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 70px;
    z-index: 2;
    background: #FF9797 !important;
    text-align: center;
}

    .qq-upload-drop-area span {
        display: block;
        position: absolute;
        top: 50%;
        width: 100%;
        margin-top: -8px;
        font-size: 16px;
    }

.qq-upload-drop-area-active {
    background: #FF7171 !important;
}

.qq-upload-list {
    margin: 15px 35px;
    padding: 0;
    list-style: disc;
}

    .qq-upload-list li {
        margin: 0;
        padding: 0;
        line-height: 15px;
        font-size: 12px;
    }

.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text {
    margin-right: 7px;
}

.qq-upload-file {
}

.qq-upload-spinner {
    display: inline-block;
    background: url("images/ajax-loader.gif");
    width: 15px;
    height: 15px;
    vertical-align: text-bottom;
}

.qq-upload-size, .qq-upload-cancel {
    font-size: 12px;
}

.qq-upload-failed-text {
    display: none;
}

.qq-upload-fail .qq-upload-failed-text {
    display: inline;
}

.usersLatestUpdateText {
    padding: 0px;
}

#NoSoportado {
    font-size: 12px;
}

.qq-upload-size, .qq-upload-cancel {
    font-size: 12px;
}

/******************************************************************/
/* classifier section styles */

.classifier-section {
   /* border: dashed 1px green;
    width: 100%;
    box-sizing: border-box;
    float: left;
    margin-bottom: 2rem;*/
    padding-left: 2rem;
}

    .classifier-section .title {
       /* width: 20%;
        box-sizing: border-box;
        float: left;*/
        font-size: 1.5rem;
    }

        .classifier-section .title.general {
            padding-top: 0.5rem;
        }

        .classifier-section .title.labels {
            padding-top: 0.5rem;
        }

        .classifier-section .title.policy {
            padding-top: 0.5rem;
        }

    .classifier-section .properties {       
        border-left: solid 1px var(--border-color);
        padding-left: 2rem;
    }
        .classifier-section .properties .property {            
            margin-bottom: 1rem;
        }
            .classifier-section .properties .property.description textarea {                    
                resize: none;                    
            }
           /* .classifier-section .properties .property .label {                
                width: 30%;               
                padding-top: 0.5rem;
            }*/
           /* .classifier-section .properties .property .input {                
                width: 70%;              
            }
*/
            .classifier-section .properties .property .label.small {
                width: auto;
                padding-right: 1.5rem;
            }

            .classifier-section .properties .property .input.small {
                width: 200px;
            }

                .classifier-section .properties .property .input.small.label {
                    padding-top: 0.5rem;
                }

            .classifier-section .properties .property .label.and-operator {
                padding-left: 124px;
            }

    .classifier-section input:disabled {
        opacity: 0.3;
    }
/*input[name=and-operator]
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.overable {*/
/* needed for absolute-positioned tooltips: the tooltip parent must be relative */
/*position: relative;
}*/
#classifier-tooltip {
    background-color: #FFF;
    border: 1px solid #767676;
    z-index: 9999;
    /*display: none;*/
    position: absolute;
    top: -5.55rem;
    left: 0rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-right: 1rem;
}

    #classifier-tooltip .column {
        padding-left: 1rem;
    }

    #classifier-tooltip .float-left {
        float: left;
    }

    #classifier-tooltip .column.left {
        max-width: 240px;
    }

    #classifier-tooltip .column.right {
        max-width: 600px;
        text-align: left;
    }

    #classifier-tooltip span {
        /*color: #767676;*/
        padding-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
/********************************************************************/
#gv-credentials
/*#label-popup-editor*/ {
    width: 100%;
    height: 100%;
    z-index: 10;
    display: none;
    position: fixed;
    left: 0;
    top: 0;
}

.popup-bg {
    width: 100%;
    height: 100%;
    background-color: #888;
    opacity: 0.75;
}

.popup-section,
.vertical-section {
    border: 1px solid #cccccc;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-bottom: 2rem;
    padding: 2rem;
}

.vertical-section {
    width: 300px;
    /*height: 380px;*/
    margin-left: -150px;
    margin-top: -200px;
}

.horizontal-section {
    width: 800px;
    height: 200px;
    margin-left: -400px;
    margin-top: -110px;
}

.vertical-section .title {
    /*width: 100%;*/
    /*box-sizing: border-box;*/
    font-size: 1.5rem;
    padding-bottom: 1.5rem;
}
/*
.vertical-section .properties {
    width: 100%;
    box-sizing: border-box;
}*/

    .vertical-section .properties .property {
        /*width: 100%;
        box-sizing: border-box;*/
        /*height: 2.25rem;*/
        margin-bottom: 1.0rem;
    }

        .vertical-section .properties .property .label,
        .vertical-section .properties .property .input {
            /*box-sizing: border-box;*/
            /* height: 2rem; */
            margin-bottom: 0.25rem;
            /*margin-top: 1rem;*/
        }


.label-popup-editor .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-size: 1em;
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
}

#label-selector-placeholder-for-popup .input.small {
    margin-bottom: 1rem;
}

#label-selector-placeholder-for-popup .label {
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}
/*
#editShareOptions {
    display: none;
}*/
/*#sharesDdl .ddl {
    margin-left: 3px;
    margin-top: 8px;
    width: 195px;
    right: unset;
}
#sharesDdl input[type="text"].tbDdl {
    width: 210px;
    height: 17px;
    font-size: 12px;
    color: #222;
    padding-left: 3px;
    border-color: #e5e5e5;
}
#shareSection .t-dropdown {
    width: 260px;
}
*/
#textareaSW, #textareaDW {
    background-color: transparent;
    resize: none;
    outline: none;
    overflow: hidden;
    font-family: monospace;
    font-size: 11px;
    padding: 20px 10px 0px 10px;

    max-width:revert;
}

/* watermark uploader */
/*.file-uploader {
    display: inline-block;
}*/

/*.download-file-button {
    display: inline-block;*/
    /*margin-left: 207px;*/
/*}*/
/*
.dwRemoveBtn, .swRemoveBtn {
    display: inline;
}*/
/*
#btnRemoveSW, #btnRemoveDW {
    margin-left: 410px;
}*/
/*
#notices-widget-container {
    height: 184px;
}*/
/*
#stats-widget-container {
    height: 204px;
}*/

/* below: updated for version 2.9.0 */

.usersLatestUpdateText {
    padding: 0px;
}

.buttonUpdateUsers {
    text-decoration: underline;
    font-weight: bold;
    padding-right: 0px;
}

.hasStaticWatermarkMessage,
.hasDynamicWatermarkMessage {
    margin-left: 8px;
    line-height: 150%;
}

.viewWatermarkConfig {
    cursor: pointer;
    text-decoration: underline;
}

#usersList {
    margin: 20px 0px 20px 20px;
    list-style-type: disc;
}

li.t-item strong {
    font-weight: bold;
}

.cb-disabled {
    opacity: 0.25;
}

/* NEW */

#user-status-switch-container {
    --width: 20em;
    --height: 50%;
    --padding: 20px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 2.0em;
    min-width: 10.0em;
    --background-color: pink;
}

#user-status-switch {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0.0em 1.0em;
}

#user-status-switch {
    font-size: .8em;
    font-weight: bold;
}

#user-status-switch-toggle {
    -webkit-appearance: none;
    appearance: none;
    height: 20px;
    width: 40px;
    background-color: var(--primary-bg-color);
    border-radius: 25px;
    padding: 0 2px;
    margin: 0;
    cursor: pointer;
}

    #user-status-switch-toggle.tgl-def::-webkit-slider-thumb {
        background-color: white;
        border-color: transparent;
    }

    #user-status-switch-toggle.tgl-def::-moz-range-thumb {
        background-color: white;
        border-color: transparent;
    }

    #user-status-switch-toggle.tgl-on::-webkit-slider-thumb {
        background-color: #5EC95B;
        border-color: transparent;
    }

    #user-status-switch-toggle.tgl-on::-moz-range-thumb {
        background-color: #5EC95B;
        border-color: transparent;
    }

    #user-status-switch-toggle.tgl-off::-webkit-slider-thumb {
        background-color: #F85D6D;
        border-color: transparent;
    }

    #user-status-switch-toggle.tgl-off::-moz-range-thumb {
        background-color: #F85D6D;
        border-color: transparent;
    }

    #user-status-switch-toggle::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 25px;
    }

    #user-status-switch-toggle::-moz-slider-thumb {
        -moz-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 25px;
    }

    #user-status-switch-toggle:focus {
        outline: none;
    }


/* new custom styles added for Kendo rework, or to clean the existing site.css styles */

.col-document-type {
    width: 2rem;
}

ul {
    list-style-type: none; /* remove the default 'circle' */
    margin-block-start: 0.5rem;   
}

.margin-bottom-05-rem {
    margin-bottom: 0.5rem;
}

.max-30-characters {
    max-width:100%;
    width: 30em; /* 'em' is used, not 'rem', so the count is set based on the local font size */
}

.ui-dialog {
    background-color: #fff;
    border: 1px solid #888;
    padding: 1rem;
    z-index: auto; /* needed to be placed over k-pager's current page element, otherwise it is placed below! */
}

/* h1 is edited to fix some problems. the h2 and h3 are not edited yet, only grouped here with h1, pending revision*/
h1 {
    /*font-size: 41px;*/ /* original, good for short headers, but possibly too big for longer texts*/
    font-size: 2.35rem;
    font-weight: normal;
    height: auto;
    line-height: normal;
    padding-bottom: 0.5rem;
}

h2 {    
    color: var(--primary-font-color);
    font-weight: normal;
    font-size: 23px;
    margin-bottom: 10px;
}

h3 {
    font-weight: normal;
    font-size: 18px;
    color: #000;
    margin-bottom: 15px;
}


/*.quick-help {*/
    /* Setting the left border only (for sizes up to XXL = 1400px)*/
    /*border-width: 0 0 0 1px;
    border-style: solid;
    border-color: #ddd;
}*/

.quick-help {
    /* Setting the top border only for all sizes, to split from submenu */
   /* border-width: 1px 0 0 0;
    border-style: solid;
    border-color: #ddd;*/
}

.quick-help-content {
    /*border-width: 1px 0 0 0;
        border-style: solid;
        border-color: #ddd;*/

    padding-top: 1rem;
}
/*
.header-above {
    display: none;
}

.header-below {
    display: block;
}
*/
@media (min-width:1400px) {
    .quick-help {
        /* Setting the top border only (for sizes from XXL = 1400px, up)*/
        /*border-width: 0;*/
    }

    .quick-help-content {
        /*border-width: 1px 0 0 0;
        border-style: solid;
        border-color: #ddd;*/

        padding-top: 1rem;
    }
/*
    .header-above {
        display: block;
    }
    .header-below {
        display: none;
    }*/
}



/* agent(?) or AutoVault monitoring */

.justify-content-center {
    justify-content: center
}

.monitoringActivityStatusTag {
    border-radius: 10px;
    /*position: relative;*/
    /*display: inline-block;*/
    padding: 0.375rem 0.75rem;
    /* position: relative;
    text-decoration: none;
    text-align: center;*/
    text-transform: uppercase;
    font-weight: bold;
    font-size: x-small;
    /*-webkit-transition: color 0.2s;*/
    letter-spacing: 1px;
    color: white;
}

    .monitoringActivityStatusTag.active {
        background-color: #11790C;
    }

    .monitoringActivityStatusTag.inactive {
        background-color: #555555;
    }

.fileServerStatusTag {
    border-radius: 10px;
    position: relative;
    display: inline-block;
    padding: 0em 1em;
    position: relative;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    font-size: x-small;
    -webkit-transition: color 0.2s;
    height: 22.5px;
    line-height: 22.5px;
}

.LoggedInStatusTag {
    background-color: #5EC95B;
    color: white;
}

.LoggedOutStatusTag {
    background: #AAAAAA;
    color: white;
}

.InactiveFileServerStatusTag {
    background: #FF3333;
    color: white;
}

fieldset {
    border: #ddd 2px solid;
    padding-bottom: 5px;
}

legend {
    padding: 2px 10px;
}

input[type="text"]:disabled {
    background: #f4f4f4;
    color: #bbbbbb;
    border-color: #dddddd;
}





/*.k-grid tbody > tr.k-table-row.over*/
/*.k-grid .k-table-alt-row.k-master-row.over,
.k-grid .k-table-row.k-master-row.over */ /*{*/
    /*background: #68C5FF;*/
    /*background: #ccc;
    color: #212529;*/
    /*background-color: #667;*/
    /*background-color: #789;
}*/

.k-grid-content a {
    text-decoration: underline;
    color: var(--primary-link-font-color);
}

/* red error */
input[name=and-operator]
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* errors */

.error-text,
p.error,
div.error p {
    color: red;
}

input.error,
textarea.error {
    outline: none !important;
    border: 1px solid red !important;
}

.input.error,
.input .error,
.k-input.error,
.k-picker.error,
/*.k-input:has(.error),
.k-input-md:has(.error),*/
.k-grid.error,
.k-grid .error,
.k-dropdown-wrap.error,
#sharesDdl input[type="text"].tbDdl.error,
.classifier-section .properties .property.description textarea.error {
    /*border-color: red;*/
    /*border-width: 1px;*/
    border: 1px solid red !important;
}

.overable {
    /* needed for absolute-positioned tooltips: the tooltip parent must be relative */
    position: relative;
}



.verticalData {
    /*width: 100%;*/
    display: flex;
    place-content: center;
}

    .verticalData th {
        text-align: right;
        /*width: 220px;*/
        padding-right: 20px;
    }

    .verticalData th, .verticalData td {
        height: 35px;
    }


/* steps form */
.stepsBar {
    height: 30px;
}

.step /*, .stepButtonSeparator*/ {
    display: block;
    float: left;
    width: 150px;
    margin-right: 20px;
    color: #888;
    border-bottom: 3px solid #888;
    padding: 4px;
}

    .step.current {
        color: #000;
        border-color: var(--primary-bg-color);
    }
/*<span class="stepButtonSeparator">&#x21E8;</span>*/
/*.stepButtonSeparator{font-size:30px;line-height:6px;width:25px;}*/

.stepsForm {
    /*width: 70%;*/
    margin-top: 40px;
}


/* brought from site.css: must be checked */
.ui-widget-content .ui-datepicker-calendar .ui-state-default {
    background: none;
    color: #000;
}

    .ui-widget-content .ui-datepicker-calendar .ui-state-default.ui-state-active {
        background: var(--primary-bg-color);
        color: #FFF;
    }

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
    background-image: url(images/jquery-ui/ui-icons_469bdd_256x240.png) !important;
}

.ui-widget-header .ui-icon {
    background-image: url(images/jquery-ui/ui-icons_469bdd_256x240.png) !important;
}




/* QR - MFA for Admins  */

#qrCodeImageModal,
#qrCodeImageAdmin {    
    height: 11rem; /* aprox.150px */
    width: 11rem;
}

fieldset {
    border: #ddd 2px solid;
    padding-bottom: 5px;
}

legend {
    padding: 2px 10px;
}


#dndUpload {
    text-align: center;
    background: url(images/svg/fileinfo.svg) no-repeat center 2rem;    
    background-size: 48px 48px; /* Scale the background image to double its size */    
    width: 100%; /*original values: width: 298px; height: 120px;*/
    /*height: 120px;*/ /* do not set fixed height, it produces errors: text is flowing out on small screens! Better control the top padding or margin */
    padding-top: 86px; /* padding is set to displace the 'drag a document here' text to the 2/3 of height */
}
    #dndUpload.disabled {
    }
  


    /*  config panel */

.widget h2 {
    position: relative;
    padding: 5px 5px 5px 0;
}

.widget > h2 > .config {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    /*height: 32px;*/
    height: 100%;
    padding: 0px;
    background: url(images/svg/settings.svg) no-repeat center;

    color: #999;    
    filter: invert(29%) sepia(9%) saturate(0%) hue-rotate(0deg) brightness(94%) contrast(86%); /* Grey color filter calculated based on the original black color of the svg image */
}

    .widget > h2 > .config:hover {
        background-image: url(images/svg/settings-over.svg);
        color: var(--primary-bg-color);
        filter: invert(40%) sepia(77%) saturate(4936%) hue-rotate(189deg) brightness(94%) contrast(105%); /* Blue color filter calculated based on the original black color of the svg image */
    }

    .widget > h2 > .config span {
        display: none;
    }

.widget > h2.over {
    background: #BFDFFF;
    padding: 5px;
}

    .widget > h2.over .config {
        display: block;
    }

.configPane {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /*height: 100%;*/
    background: url(images/blackout.png);
    color: #FFF;
    line-height: 1.5em;
    padding-bottom: 2rem;
    z-index: 10;
}

    .configPane h2 {
        padding: 5px 5px 5px 10px;
    }

        .configPane h2 img {
            float: right;
        }

    .configPane .content {
        padding-left: 16px;
        padding-right: 16px;
    }

    .configPane .buttons {
        text-align: right;
        padding-right: 14px;
        padding-top: 15px;
    }

        .configPane .buttons a {
            color: #FFF;
        }

    .configPane button {
        border: 0;
    }

    .configPane .t-dropdown {
        width: 90%;
    }


.k-grid .k-grid-header .k-table-th.limited-width {
    width: 50px; /* if 50px is not enough, the column width will actually stretch to the header's text width */
}
.k-grid .k-grid-header .k-table-th {
    vertical-align: middle;
}
    .k-grid .k-grid-header .k-table-th.vertical-align-top {
        vertical-align: top;
    }


.cb-disabled {
    opacity: 0.25;
}

/* used by software license selector */
.custom-selector {
    /*width: 400px;*/
    width: 100%;
    min-width: 14rem;
    max-width: 400px;
}

#ddlStorageType.custom-selector{
    width:auto;
    min-width:160px;
}

/* used in several pages, check if it can be replaced by similar bootstrap or kendo style */
.loaderIcon {
    display: inline-block;
    width: 16px;
    height: 12px;
    background: url(images/ajax-loader.gif) no-repeat;
    vertical-align: middle;
}

/* original k-i-loading icon size, as defined in bootstrap-kendo stylesheet */
/*.k-i-loading::before, .k-loading-image::before {
    margin-top: -.5em;
    margin-left: -.5em;
    width: 1em;
    height: 1em;
    animation: k-loading-animation .7s linear infinite;
}*/
.k-i-loading::before, 
.k-loading-image::before {
    margin-top: -1em;
    margin-left: -1em;
    width: 2em;
    height: 2em;
    animation: k-loading-animation .7s linear infinite;
}



/* for Shop controller - brought from deprecated "product.css" file */

.conditions {    
    width: 360px;
}
.conditions div.cond {
       /* display: block;*/
       /* float: right;*/
        margin-left: 30px;
        margin-top: -20px;
        /*line-height: 12px;*/
    }

/* Messages */
.message-red {
    display: block;
    margin: 10px 0 0 0;
    padding: 10px;
    font-size: 16px;
    background-color: #fcb8b8;
    color: #c81212;
}

.absolute {
    position: absolute;
}

.max-width-5rem {
    max-width: 5rem;
}
.max-width-20rem {
    max-width: 20rem;
}
.min-width-20rem {    
    min-width: 20rem;
}




/* style-overrides for new Kendo components */

/*.k-pager,
.k-table-md,
.k-grid {   
    font-size: inherit;
    line-height: 1.25em;
    font-family: "Segoe UI Light", Segoe, Tahoma, Arial, Sans-Serif;*/
/*border: 1px solid #888;*/
/*}*/

.k-grid {
    margin-bottom: 2rem;
}

.k-grid, .grid-container {
    max-width: 1400px;
}

    .k-grid.narrow .grid-container {
        max-width: 1000px;
    }

    .k-grid.wide .grid-container {
        max-width: 1400px;
    }

.k-content {
    border-color: rgba(0, 0, 0, 0.08);
    color: #424242;
    background-color: #ffffff;
}

.k-grid-header, .k-table-thead {
    background-color: var(--primary-bg-color);
    /*background-color: #0072ca ???;*/
    /*border-color: var(--bs-primary);*/
    color: var(--primary-bg-font-color);
}

.k-grid .k-table-row {
    line-height: 1.5rem;
}

.k-pager-md {
    padding-block: 0.25rem;
}

/* styles for responsive SealPath containers */

/* increase the margins of the principal container */
.container-fluid {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}


.k-table-td.text-align-center {
    text-align: center;
    justify-content: center
}

input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
}

/* margins for checboxes in regular forms, not in the grids */
.formSection input[type="checkbox"] {
    margin-right: 1rem;
    margin-left: 1rem;
}

/* margins for checboxes in grid columns forms, the margins are reduced */
.k-grid input[type="checkbox"] {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
}

.k-grid
/* this class is used for checkboxes in all grids, and it had an inline-style "width: 27px" */
.k-grid .k-table-th.cb-cell,
.k-grid .k-table-td.cb-cell,
/*.cbId,*/
/*input[type="checkbox"],*/
.cb-cell {
    width: 2rem;
    text-align: center;
    align-content: center;
}


/* this class is used for tools column in all grids, and it had an inline-style "width: 60px" */
.k-grid .k-table-th.tools-cell {
    width: 48px; /* use pixels, not 'rem': 'rem' can vary if the size on the 'html' node (the 'root' node) is changed, but here we need fixed pixels for the bitmaps that are currently used for tool icons */
    min-width: 48px;
    text-align: center;
}
/* this class is used for tools column in all grids (one tool only), and it had an inline-style "width: 30px" */
.k-grid .k-table-th.tool-cell {
    width: 28px; /* use pixels, not 'rem': 'rem' can vary if the size on the 'html' node (the 'root' node) is changed, but here we need fixed pixels for the bitmaps that are currently used for tool icons */
    min-width: 28px;
    text-align: center;
}
/* this class is used for protection count column in protection grids, it had an inline-style "width: 80px (or 135px in another grid)", now it is not fixed */
.k-grid .number {
    /*width: 5rem;*/
    text-align: center;
}


.k-window {
    font-family: inherit; /* this will make it use the fonts defined for body in SealPath file "site.css", not in "bootstrap.css" */
}

/* Kendo dialogs */

.k-dialog {
    /*font-size: 0.9rem;*/
    min-width: 360px;
    /*min-height: 160px;*/ /* min-height does not work well, action buttons can have big bottom margin, which is difficult to fix */
    max-width: 100%;
}

.k-dialog-title {
    font-size: 1.35rem;
    margin-right: 1rem;
}

.k-dialog-content,
.k-dialog-content p {
    max-width: 50em;
}

/* Kendo colors */

.k-button-solid-base {
    /*border-color: #e4e7eb;*/
    border-color: var(--input-bg-color);
    color: #212529;
    /*background-color: #e4e7eb;*/
    background-color: var(--input-bg-color);
}

    .k-button-solid-base:hover, .k-button-solid-base.k-hover {
        border-color: #c7cdd5;
        background-color: #ced3db;
    }

    .k-button-solid-base:focus, .k-button-solid-base.k-focus {
        box-shadow: 0 0 0 0.25rem rgba(228, 231, 235, 0.5);
    }

    .k-button-solid-base:active, .k-button-solid-base.k-active {
        border-color: #bfc6d0;
        background-color: #c7cdd5;
    }

    .k-button-solid-base.k-selected {
        border-color: #0252c9;
        color: white;
        background-color: #0257d5;
    }

.k-button-solid-primary {
    background-color: var(--primary-bg-color);
    border-color: var(--primary-bg-color);
    color: var(--primary-bg-font-color);
}

    .k-button-solid-primary:hover, .k-button-solid-primary.k-hover {
        border-color: var(--primary-bg-color-hover);
        background-color: var(--primary-bg-color-hover);
        color: var(--primary-bg-font-color-hover);
    }

    .k-button-solid-primary:focus, .k-button-solid-primary.k-focus {
        /*box-shadow: 0 0 0px 0.25rem rgba(13, 110, 253, 0.5);*/
        box-shadow: none;
    }

    .k-button-solid-primary:active, .k-button-solid-primary.k-active {
        background-color: var(--primary-bg-color);
        border-color: var(--primary-bg-color);
        color: var(--primary-bg-font-color);
    }

    .k-button-solid-primary.k-selected {
        background-color: var(--primary-bg-color);
        border-color: var(--primary-bg-color);
        color: var(--primary-bg-font-color);
    }

.k-button-solid-secondary {
    border-color: #6c757d;
    background-color: #6c757d;
    color: white;
}

    .k-button-solid-secondary:hover, .k-button-solid-secondary.k-hover {
        background-color: #5a6268;
        border-color: #545b62;
    }

    .k-button-solid-secondary:focus, .k-button-solid-secondary.k-focus {
        /*box-shadow: 0 0 0px 0.25rem rgba(108, 117, 125, 0.5);*/
        box-shadow: none;
    }

    .k-button-solid-secondary:active, .k-button-solid-secondary.k-active {
        background-color: #545b62;
        border-color: #4e555b;
    }

    .k-button-solid-secondary.k-selected {
        background-color: #545b62;
        border-color: #4e555b;
    }

/* missing .over : hover color: check if not pushed from the office, where it was already corredcted */

/* Hide the toggle buttons */
/*.k-datepicker .k-select {
    display: none;
}*/
/* Ensure the calendar is visible */
/*.k-calendar-container {
    display: block !important;
}*/

.treeview-image {
    padding-right: 1rem;
}



/* refactored from the original site.css */

.textBar {
    padding: 6px;
    margin-bottom: 5px;
    line-height: 150%;
}

.center-container,
.checkbox-container,
.search.ddlContainer,
.classifier-section .property,
.link-container,
.filterArea {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Allows items to move to a new line if they don't fit */
    /*gap: 0.5rem 1rem;*/ /* Controls the space between the children items */
    gap: 1.0rem 2rem; /* applies 1rem of vertical gap  when items are wrapped to next lines, + 2rem of horizontal gap*/
}
.checkbox-container {
    justify-content: center;    
    height: 100%; /* Optional: Set a height if needed */
}
.center-container {
    justify-content: center;
    min-height: 100vh;
}
/*.checkbox-container {    
    justify-content: center;    
    height: 100%;*/ /* Optional: Set a height if needed */
/*}*/
.filterArea {    
    margin-bottom: 0.75rem;
}

.search.ddlContainer {   
    margin-right: 1rem;  /* Add some space between the search container and the links */
}

.link-container {    
    margin-left: auto; /* Pushes the link container to the right side */    
}


    .link-container a {
        white-space: nowrap; /* Prevents text from breaking into multiple lines */
    }

        .link-container a:last-child {
            margin-right: 0; /* Removes any right margin */
            padding-right: 0; /* Removes any right padding */
        }


    .filterArea td {
        padding-bottom: 0;
        vertical-align: middle;
    }

    .filterArea.commandArea {
        /*
        background-color: yellowgreen;
        background-color: black;*/
    }


.filterButton {
    cursor: pointer;
    /*font-weight: bold;*/   
}
.filterButton,
.filterLabel {   
    /*margin-left: 0;*/
    /*margin-right: 1.25rem;*/
}
.filterArea.float-end .filterButton {
    margin-left: 1.25rem;
    margin-right: 0;
}

    .filterButton span.k-input {
        padding-top: 0;
    }

    .filterButton.over,
    .filterButton.current
    /*.filterArea.commandArea .filterButton.over,
.filterArea.commandArea .filterButton.current*/ {
        color: #222; /*font-weight:bold;*/
    }

    .filterButton.disabled,
    .filterButton.disabled.over,
    .filterButton.disabled.current {
        color: #CCC;
        font-weight: normal;
        cursor: default;
    }

/*.filterArea.commandArea .filterButton.disabled,
.filterArea.commandArea .filterButton.disabled.over,
.filterArea.commandArea .filterButton.disabled.current{
color:#CCC;
}*/

/* 'filterPanel' is only used for custom time filter. So, the 'max-width' is adjusted to the time filter (to 640px). 
    There were problems with absolute positioning, so it is relatively-positioned now.
    Extra work is needed to enable absolute positioning without errors.
*/
.filterPanel {
    display: none;
    /*position: absolute;*/
    /*z-index: 1200;*/
    /*top: 30px;*/
    /*left: 0;*/
    /*width: 430px;*/
    width: auto;
    max-width: 640px;
    /*background: #FFF;*/
    border: 1px solid var(--border-color);
    padding: 20px;
}

.filterButtons {
    text-align: right;
    padding-top: 20px;
}
/*
#timeFilterCustomPanel {
    width: 450px;
}

#customTimeFilterToDatepicker {
    float: right;
}

#customTimeFilterFrom, #customTimeFilterTo {
    font-size: 80%;
}*/


.k-grid .k-button.export-csv {
    background: url("images/doctypes/xlssmall.png") no-repeat;
    background-color: #ddd;
    color: #444;
    cursor: pointer;
    /*text-align: right;*/
    /*margin-right: 10px;*/
    /*padding-left: 35px;*/
    padding: 0.25rem 0.5rem 0.25rem 2.5rem;
    line-height: 1.0rem;
}

.btnSearch, .btnSearchClear, .arrow-down,
.filter-button, .edit, .delete, .show, .hide {
    opacity: 0.5;
}
    .btnSearch:hover,
    .btnSearchClear:hover,
    .arrow-down:hover,
    .filter-button:hover, .edit:hover, .delete:hover, .show:hover, .hide:hover {
        opacity: 1.0;
    }

.k-svg-icon.big {
    width: 1.5rem;
    height: 1.5rem;
}

/* Credentials page : TODO: check if is needed, or if there is a similar class one already defined */
/*
.disabledSearch,
.delete.deleteDisabled {
    opacity: 0.25;
}
*/

/* possibly not needed now with Kendo /Bootstrap styles, check it before removal */

.k-table-td .ellipse {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Apply a fixed width or max-width to the td elements */
.k-table-td {
    max-width: 15rem; /* Adjust as needed */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* edit + delete tools */
.btnSearch, .btnSearchClear, .arrow-down,
.show, .hide,
.edit, .delete,
a.edit, a.delete {
    z-index: 1; /* we must set it as k-input-inner elements have that value, and if not set here as well, the absolute-placed buttons would be rendered below*/
    border: none;
    cursor: pointer;
    display: inline-block;
    margin: 0;
    padding: 0;
    background-position: center; /* Centers the image within the element */
    background-repeat: no-repeat; /* Prevents the image from repeating */
}

.edit, .delete,
a.edit, a.delete {    
    width: 1.5rem;
    height: 1.1rem;  
    background-size: 20px 20px;   
}

.btnSearch,
.btnSearchClear,
.arrow-down {
    width: 1.75rem;
    height: 1.75rem;    
}
.btnSearch {   
    background-size: 22px 22px;
}
.btnSearchClear {
    background-size: 14px 14px;
}
.arrow-down {    
    opacity:1.0;
    background-size: 12px 12px; /* same size as Kendo's drop-down arrow*/
}

/* show/hide password icons */
.show, .hide {    
    width: 2rem;
    height: 2rem;
    /*background-size: 20px 20px;*/
    background-size: contain;
}

.edit {
    background-image: url(images/svg/icon-edit.svg);
}
.delete {
    background-image: url(images/svg/icon-delete-1.svg);
}
.show {
    background-image: url(images/svg/icon-show.svg);
}
.show.hide {
    background-image: url(images/svg/icon-hide.svg);
}
.btnSearch {
    background-image: url('images/svg/icon-search.svg');
}
.btnSearchClear {
    background-image: url(images/svg/icon-close.svg);
}
.arrow-down {
    background-image: url('images/svg/icon-arrowhead-down.svg');    
}

.edit span,
.delete span {
    display: none;
}

.k-grid tr .edit,
.k-grid tr .delete {
    display: none;
}

.k-grid tr.over .edit,
.k-grid tr.over .delete {
    display: inline-block;
}


/*#sharesDdl .ddl {*/
/*margin-left: 3px;
    margin-top: 8px;*/
/*width: 195px;
    right: unset;
}

/* leave space to the right for absolute-placed buttons */
/*#password {*/ /* text input used for password (has show/hide absolute button) */
    /*padding-right: 3rem;
}*/
/* leave space to the right for absolute-placed buttons */
.tbDdl { /*text input used in search component */
    padding-right: 4.5rem;
    min-width: 24rem;
}

.btnSearch,
.btnSearchClear,
.arrow-down,
.show {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
}
/* ordered from right-to-left; arrow, search, clear */
.arrow-down {
    /*right: 0.25rem;*/
    right: 0;
}
.btnSearch {    
    right: 0;  /* first to the right */
}
.btnSearchClear {
    right: 1.35rem; /* second to the right */
}
.btnSearch.ddl-positioned {
    right: 1.35rem; /* when ddl button is present: push it as second to the right */
}

.btnSearchClear.ddl-positioned {
    right: 2.75rem; /* when ddl button is present: push it as third to the right */
}

/* the below does not work, some kendo components show highlight when focused
* {
    outline: none !important;
}
*/


/*.k-input,
.k-picker-solid,
.captcha-area input,
input[type='text'], input[type='password'], textarea {
    border-color: #d2cccc;*/
/*border: 3px solid #00ff00;*/ /* for spotting elements that still use other colors */
/*}*/

.viewSection input[type='checkbox']{
    margin-right: 1rem;
    vertical-align: middle;
}

/* apply it to the last element on the page, so the bottom margin space is added */
.last-element {
    margin-bottom: 4rem;
}

/* Remove arrows in WebKit-based browsers (Chrome, Safari, Edge) */
.numeric-code-input-container input[type="number"]::-webkit-outer-spin-button,
.numeric-code-input-container input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove arrows in Firefox */
.numeric-code-input-container input[type="number"] {
    -moz-appearance: textfield;
}

.k-input.code-input {
    width: 12rem;
}

#mfaAuthenticatorIcon {
    height: 100px;
    width: 100px;
}

.k-grid-header .k-sort-icon, .k-grid-header .k-sort-order {
    color: #fff;
}


.hidden,
.property.hidden {
    /*display: none !important;*/ /* important will break places where we use "$(...).show()", because important overrides the inline "display:block" that is set by jquery! */
    display: none;
}

input[type='password'].max-width-25rem {
    max-width: 25rem;
}
/* for debugging of the loading overlay size
.k-loading-mask{
    background-color: green;
    opacity: 0.5;
}*/