/* ================================================================================================================= */
/* Windows - Forms - Edit controls styling                                                                           */
/* ================================================================================================================= */

/* 1. Window ------------------------------------------------------------------ */

/* targets the entire popup element */
.WindowClass {
    border: 1px solid #5f5f5f !important;
}

.WindowClass .k-window-title {
    color: #fff !important;
    height: 20px !important;
    font-family: Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    margin-top: -10px;
    padding-top: 0px;
}

/* Window title bar */
.WindowClass .k-window-titlebar {
    background-color: #278ab0 !important;
}
.WindowClass .k-window-titlebar .k-i-close {
    color: #fff !important;
}

/* Align the window to the bottom-right side of the screen
    https://docs.telerik.com/blazor-ui/knowledge-base/window-align-to-right */
.sticky-bottom-right {
    width: 720px;
    height: 688px;
    right: 0;
    bottom: 0;
    margin-bottom: 0px;
    transform: none;
}

/* Telerik Responsive Window
   https://docs.telerik.com/blazor-ui/knowledge-base/window-responsive  */
@media (max-width: 768px) {
    .sticky-bottom-right {
        width: 500px;
        height: calc(100vh-160px);
        margin-bottom: 50px;
    }
}
@media (max-width: 576px) {
    .sticky-bottom-right {
        width: 450px;
        height: calc(100vh-160px);
        margin-bottom: 50px;
    }
}

/* targets the title container */
.WindowClass .k-window-title {
    color: #687092;
    height: 20px;
    font-family: Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 16px;
}

/* targets the entire titlebar */
.WindowClass .k-window-titlebar {
    background: #f8f8f8;
    height: 32px;
}

/* targets the title container icons */
.WindowClass .k-button .k-icon, .k-button .k-image, .k-button .k-sprite {
    color: #a09f9e;
}

/* targets the content element */
.WindowClass .k-window-content {
    background: #fff;
}

/* 2. Toolbar -------------------------------------------------------------- */
#edit-form .form-action-bar {
    display: block;
    height: 2.2em;
    padding: 0;
    margin: -17px -16px 17px -16px;
}

#edit-form .e-toolbar .e-toolbar-items {
    background: #fff !important;
}

#edit-form .e-toolbar {
    border-left: none !important;
    border-top: none !important;
    border-right: none !important;
}

#edit-form .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
    padding-left: 12px;
    padding-right: 4px;
    margin-right: 6px;
    color: #000; /*#12486A*/
    font-family: Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-weight: 500;
    font-size: 18px;
}

#edit-form .e-toolbar .e-tbar-btn .e-tbar-btn-text {
    font-size: 16px;
}

#edit-form .e-tbar-btn .tb-icons {
    font-family: "Material Icons";
    speak: none;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

#edit-form .e-edit-icon:before {
    content: "\e3c9";
    color: #0000ff;
    font-size: 20px;
    padding-right: 0;
    margin-right: 0;
}

#edit-form .e-icons {
    font-family: "entypo";
}

#edit-form .e-hscroll .e-nav-left-arrow::before {
    content: '\e040';
}

#edit-form .e-hscroll .e-nav-right-arrow::before {
    content: '\e08d';
}

/* 3. Bottom Information Bar ------------------------------------------------- */

/* Make div stay at bottom of page's content all the time even when there are
    scrollbars                                                                 */
/* https://stackoverflow.com/questions/8824831/make-div-stay-at-bottom-of-pages-content-all-the-time-even-when-there-are-scrol */
#stycky-bottom-info-bar {
    border: 0;
    height: 50px;
    width: 714px;
    margin-left: -14px;
    padding: 6px 12px;
    position:absolute;
    top:603px;
}

.info-bar-form-description {
    width: 70%;
    color: #cdd3d9 !important;
}

.info-bar-button {
    font-family: Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: large;
}

/* https://css-tricks.com/almanac/selectors/h/hover/ */
.info-bar-button:hover, .info-bar-button:active, .info-bar-button:focus {
    text-decoration: none;
}

@media (max-width: 768px) {
    #stycky-bottom-info-bar {
        width: 99.2%;
    }
}

@media (max-width: 576px) {
    #stycky-bottom-info-bar {
        width: 99.2%;
    }
}

/* 4. Edit Form -------------------------------------------------------------- */
@media (max-width: 576px) {
    .WindowClass .k-window-content {
        /*            background: #000;  */
    }
}

/* 5. Input Edit Controls ---------------------------------------------------- */

#edit-form .e-input-group.e-control-wrapper.customEditor {
    box-sizing: border-box;
    border-width: thin;
    border-radius: 0;
    height: 30px;
    align-items: center;
    font-family: Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 1.3rem !important;
    color: #000;
    border-left-color: transparent !important;
    border-top-color: transparent !important;
    border-right-color: transparent !important;
}

/* Style all form's key fields to uppercase */
#edit-form .e-float-input.e-success.input-key-field input {
    text-transform: uppercase;
}

#edit-form .e-float-input.e-success.input-capitalize input {
    text-transform: capitalize;
}

#edit-form .e-float-text {
    border: none;
    display: block;
    font-family: Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: small !important;
}

@media (max-width: 576px) {
    #edit-form .e-input-group.e-control-wrapper.customEditor {
        color: #000;
        font-family: Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif;
        font-size: 1.5rem !important;
        background-color: transparent !important;
    }

    #edit-form .e-float-text {
        border: none;
        display: block;
        font-family: Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif;
        font-size: small !important;
    }
}

/* 6. CheckBox Control ---------------------------------------------------- */
#edit-form .e-checkbox-wrapper .e-label:hover {
    color: blue;
}

@media (max-width: 576px) {
    #edit-form .e-checkbox-wrapper .e-label {
        color: #fff;
        font-size: 1.3rem !important;
    }

        #edit-form .e-checkbox-wrapper .e-label:hover {
            color: #000;
            font-size: 1.3rem !important;
        }
}

/* 7. Multiline TextBox (MemoEdit) ---------------------------------------- */
#edit-form .e-float-input textarea,
.e-float-input.e-control-wrapper textarea {
    resize: none !important;
    font-family: Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 1.3rem !important;
    border-left-color: transparent !important;
    border-top-color: transparent !important;
    border-right-color: transparent !important;
}

@media (max-width: 576px) {
    #edit-form .e-float-input textarea,
    .e-float-input.e-control-wrapper textarea {
        color: #000;
        font-size: 1.5rem !important;
        background-color: transparent !important;
    }
}
    
/* 8. Tab styling ---------------------------------------------------------------- */
/* Tab control header. */
#edit-form .e-tab .e-tab-header {
    background: #f0f0f0 !important;
    padding-top: 0px !important;
    border: 1px solid #5a5a5a;
}

/* Tab control header. */
#edit-form .e-tab .e-tab-header .e-toolbar-items {
    background: transparent !important;
    height: 32px !important;
    min-height: 32px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}

/* Tab control header. */
.e-tab .e-tab-header .e-toolbar-item:not(.e-separator) {
    height: 32px !important;
    min-height: 32px !important;
}

/* Selected tab header item */
#edit-form .e-tab .e-tab-header .e-toolbar-item.e-active {
    background-color: transparent; /*red */
    height: 32px !important;
    min-height: 32px !important;
    margin-top: 0px !important;
}

/* Selected tab text wrapper */
#edit-form e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-text-wrap,
.e-tab .e-tab-header .e-toolbar-item.e-active.e-iright .e-text-wrap {
    height: 32px !important;
    min-height: 32px !important;
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: transparent; /*yellow;*/
}

/* None selected tab text wrapper */
.e-tab .e-tab-header .e-toolbar-item .e-text-wrap {
    height: 32px !important;
}

/* Selected tab underligning line */
#edit-form .e-tab .e-tab-header .e-toolbar-item.e-active .e-text-wrap::before {
    border: 2px solid #106ebe !important;
    margin-top: -2px !important;
    margin-left:8% !important;
    width:84%;
}

/* Selected tab item text and icon */
#edit-form .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
    color: #484644 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase;
}

/* Inactive header item */
#edit-form .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    margin: 0 8px 0 8px;
    padding-bottom: 0px !important;
    color: #484644;
    font-weight: 600;
    align-self: auto;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
}

/* Hovering none selected Tab header item. */
#edit-form .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
    background: #f8f8f8 !important;
}

/* Hovering selected Tab header item. */
#edit-form .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover {
    background: #f8f8f8 !important;
    border-bottom: 3px solid #106ebe;
}

/* Tab header*/
#edit-form .e-tab .e-tab-header {
    height: 32px;
    min-height: 32px !important;
    padding-top: 0px !important;
}
#edit-form .e-tab .e-tab-header .e-toolbar-items {
    height: 32px !important;
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
    min-height: 32px !important;
    position: relative;
}

/* Tab header wraper */
#edit-form .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    border-radius: 0;
    height: 32px !important;
    margin-top:0px !important;
    padding-top:0px !important;
    border: 1px solid transparent;
}

/* Animation */
#edit-form .e-tab .e-tab-header:not(.e-vertical) .e-indicator, .e-tab .e-tab-header.e-vertical .e-indicator {
    transition: none;
}