/* #region Telerik Button */
.telerik-blazor.k-button.btnBorderTransparent, .telerik-blazor.k-button.btnYellow, .telerik-blazor.k-button.btnBorderlessTransparent, .telerik-blazor.k-button.btnBlue, .telerik-blazor.k-button.btnRed, .telerik-blazor.k-button.btnGreen, .telerik-blazor.k-button.btnBorderGreen {
    border-radius: 3px;
    font-weight: bold;
    margin: 0px 5px;
    padding: 10px 40px;
    width: 10em;
}

.telerik-blazor.k-button.btnBorderlessTransparent {
  background: transparent;
  border: 0px solid transparent;
  color: var(--kbr-blue);
  padding: 10px 1em;
  width: auto;
  text-decoration: underline;
}

.telerik-blazor.k-button.btnBorderTransparent {
  background: transparent;
  border: 1px solid transparent;
  border-color: var(--kbr-blue);
  color: var(--kbr-blue);
}

    .telerik-blazor.k-button.btnTransparent {
        background: transparent;
        border: 1px solid transparent;
    }

    .telerik-blazor.k-button.btnYellow {
        background-color: var(--kbr-yellow);
        border: 3px solid var(--kbr-yellow);
        border-color: var(--kbr-yellow);
        /* Changes color of loader if present */
        .k-loader-segment {
    color: var(--kbr-blue);
  }
}

.telerik-blazor.k-button.btnBlue {
    background-color: var(--kbr-blue);
    border: 3px solid var(--kbr-blue);
    border-color: var(--kbr-blue);
    color: white;

    /* Changes color of loader if present */
    .k-loader-segment {
        color: white;
    }
}

.telerik-blazor.k-button.btnRed {
    background-color: var(--kbr-red);
    border: 1px solid var(--kbr-red);
    border-color: var(--kbr-red);
    color: white;
}

.telerik-blazor.k-button.btnGreen {
    background-color: var(--kbr-green);
    border: 1px solid var(--kbr-green);
    border-color: var(--kbr-green);
    color: white;
}

.telerik-blazor.k-button.btnBorderGreen {
    background-color: transparent;
    border: 2px solid var(--kbr-green);
    border-color: var(--kbr-green);
    color: var(--kbr-green);
}
/* #endregion */
/* #region Telerik Window */
.k-window.telerik-blazor.defaultWindow {
    .k-window-titlebar {
        background-color: var(--kbr-blue);
        color: white;
    }
    
    .k-window-content {
        color: black;
    }
}

.Confirmation-Modal, .Confirmation-Modal-Paddingless-Window-Content {
    min-width: 400px;
    .k-window-titlebar {
        background-color: #00205C;
        color: white;
        text-wrap: wrap;
    }
    .k-window-content {
        color: black;
        padding: 1em;
    }
}

.Confirmation-Modal-Paddingless-Window-Content {
    .k-window-content {
        padding: 0;
    }
}

.Modal-Title-Centered {
  .k-window-title {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;
  }
}
/* #endregion */


/* #region Custom Status Circles */
.activeCircle {
    color: #76B858 !important;
}

.pendingCircle {
    color: #DFB40F !important;
}

.rejectedCircle {
    color: #df0f0f !important;
}

.unknownCircle {   
    color: #6b6b6b !important;
}

.k-button-ui-Panel {
    border-color: transparent !important;
    background-color: transparent !important;
    border: none;
    background-image: none !important;
}
/* #endregion */

/* #region Custom Telerik Switch*/
.k-switch.greenSwitch.k-switch-on .k-switch-track {
    border-color: var(--kbr-green);
    color: var(--kbr-green);
    background: var(--kbr-green);
}

.k-switch.greenSwitch .k-switch-thumb {
    width: 20px;
    height: 20px;
}
/* #endregion */

/* #region Custom Telerik Delete Window*/

.k-window.k-dialog.k-alert .k-window-titlebar {
    background-color: #00205C !important;
    color: white !important;
}

.k-window.k-dialog.k-alert .k-dialog-title {
    justify-content: center !important;
    align-items: center !important;
    padding: 1em !important;
}

.k-window.k-dialog.k-alert .k-button-solid-base {
    background: transparent !important;
    border-color: var(--kbr-blue) !important;
    color: var(--kbr-blue) !important;
    border-radius: 3px !important;
    font-weight: bold !important;
    margin: 0px 5px !important;
    padding: 10px 40px !important;
    width: 10em !important;
}

.k-window.k-dialog.k-alert .k-button-solid-primary {
    background-color: var(--kbr-yellow) !important;
    border: 3px solid var(--kbr-yellow) !important;
    border-color: var(--kbr-yellow) !important;
    color: var(--kbr-blue) !important;
    border-radius: 3px !important;
    font-weight: bold !important;
    margin: 0px 5px !important;
    padding: 10px 40px !important;
    width: 10em !important;
}

/*Used the slider component for the zoom feature to an image*/

.k-slider-selection {
    display: none !important;        /*hides the progress*/
}

.k-slider .k-draghandle, .k-slider .k-draghandle:hover, .k-slider .k-draghandle:active, .k-slider .k-draghandle.k-pressed {
    border-color: var(--kbr-blue) !important;
    background-color: var(--kbr-blue) !important;
    outline: var(--kbr-blue) !important;
}

/*changing the default slider svg icon paths*/

.custom-slider-zoom .k-button-decrease path {
    d: path("M 288 224 H 96 v -64 h 192 v 64 Z m 192 210.7 L 434.7 480 L 320 365.3 v -22.7 l -26.7 -26.7 C 265.7 338.5 230.4 352 192 352 c -88.4 0 -160 -71.6 -160 -160 S 103.6 32 192 32 s 160 71.6 160 160 c 0 38.4 -13.5 73.7 -36.1 101.3 l 26.7 26.7 h 22.7 L 480 434.7 Z M 192 320 c 70.7 0 128 -57.3 128 -128 S 262.7 64 192 64 S 64 121.3 64 192 s 57.3 128 128 128 Z")
}

.custom-slider-zoom .k-button-increase path {
    d: path("M 288 224 h -64 v 64 h -64 v -64 H 96 v -64 h 64 V 96 h 64 v 64 h 64 v 64 Z m 192 210.7 L 434.7 480 L 320 365.3 v -22.7 l -26.7 -26.7 C 265.7 338.5 230.4 352 192 352 c -88.4 0 -160 -71.6 -160 -160 S 103.6 32 192 32 s 160 71.6 160 160 c 0 38.4 -13.5 73.7 -36.1 101.3 l 26.7 26.7 h 22.7 L 480 434.7 Z M 192 320 c 70.7 0 128 -57.3 128 -128 S 262.7 64 192 64 S 64 121.3 64 192 s 57.3 128 128 128 Z")
}

/* #endregion */


/*radio button checked*/

.k-radio:checked:focus, .k-radio.k-checked.k-focus {
    box-shadow: 0 0 0 2px #00205c !important;
}

.k-radio:checked, .k-radio.k-checked {
    border-color: #00205c !important;
    color: white;
    background-color: #00205c !important;
}

/*    #endregion    */