/* #region Global Variables */

:root {
    --primaryBackgroundColor: white; /*#ffffff;*/
    --primaryColorBlue: #23a0e1; /*#32a8e6*/
    --secondaryColorBlue: #68d6ff;
    --primaryColorBlueWithOpacity: #23a0e13d;
    --inactiveSettingColor: #979797; /*use this for images and icons*/
    --headerHeight: 3rem;
    --footerHeight: 1rem;
    --substractHeight: 4rem;
    --foreColor: #2b2b2b;
    --foreColorInputLabel: #777777;
    --borderColor: #d8d8d8;
    --borderRadius: 1rem;
    --labelFontSize: .68rem;
}

/* #endregion Global Variables */


/* #region Components */

.bpt_main_header_container, .bpt_main_header_container1 {
    position: relative;
    float: left;
    width: calc(100% - .8rem);
    display: grid;
    grid-template-columns: 5.5fr 1fr 5.5fr;
    gap: .2rem;
    margin-bottom: .5rem;
    border-radius: var(--borderRadius);
    background-color: transparent;
    border: none;
}

.bpt_main_header_container1 {
    grid-template-columns: 12fr;
    margin-left: 0.3rem;
}

.bpt_wfselection_container, .bpt_wfselection_container_warning, .bpt_wfselection_container_offline {
    position: relative;
    float: left;
    border: .01rem solid var(--primaryColorBlueWithOpacity);
    border-radius: var(--borderRadius);
    background-color: white;
    padding: .4rem;
    box-shadow: #0d8cd810 0px 5px 15px 0px;
    /*    background: #CBEDFF;
    background: -webkit-linear-gradient(right, #f5fdff, #f5fdff);
    background: -moz-linear-gradient(right,#f5fdff, #f5fdff);
    background: linear-gradient(to left, #f5fdff, #f5fdff);*/
}

    .bpt_wfselection_container:hover {
        cursor: pointer;
        background: -webkit-linear-gradient(right, #f5fdff, #e0f8fe);
        background: -moz-linear-gradient(right,#f5fdff, #e0f8fe);
        background: linear-gradient(to left, #f5fdff, #e0f8fe);
    }

.bpt_wfselection_container_warning {
    border: .01rem solid #d80d783f;
    color: #d80d78;
    box-shadow: #d80d7810 0px 5px 15px 0px;
}

    .bpt_wfselection_container_warning:hover {
        cursor: pointer;
        background: -webkit-linear-gradient(right, #d80d7812, white);
        background: -moz-linear-gradient(right,#d80d7812, white);
        background: linear-gradient(to left, #d80d7812, white);
    }

.bpt_wfselection_container_offline {
    text-align: center;
    width: 98%;
    font-size: 0.85rem;
    border: .01rem solid #d84d0d3f;
    color: #d84d0d;
    /*    box-shadow: #d8bf0d10 0px 5px 15px 0px;*/
}

    .bpt_wfselection_container_offline:hover {
        cursor: pointer;
        background: -webkit-linear-gradient(right, #d8660d1b, white);
        background: -moz-linear-gradient(right,#d8660d1b, white);
        background: linear-gradient(to left, #d8660d1b, white);
    }


/*
.bpt_wfselection_container_blue_gradien_rtl {
    background: #CBEDFF;
    background: -webkit-linear-gradient(right, var(--primaryColorBlueWithOpacity), #f5fdff);
    background: -moz-linear-gradient(right,var(--primaryColorBlueWithOpacity), #f5fdff);
    background: linear-gradient(to left, var(--primaryColorBlueWithOpacity), #f5fdff);
}

.bpt_wfselection_container_blue_gradien_ltr {
    background: #CBEDFF;
    background: -webkit-linear-gradient(left, var(--primaryColorBlueWithOpacity), #f5fdff);
    background: -moz-linear-gradient(left,var(--primaryColorBlueWithOpacity), #f5fdff);
    background: linear-gradient(to right, var(--primaryColorBlueWithOpacity), #f5fdff);
}*/

.bpt_wfselection_container_title, .bpt_wfselection_container_title_warning {
    position: relative;
    float: left;
    width: 100%;
    font-size: .7rem;
    margin-top: .3rem;
    text-align: center;
    color: var(--foreColor);
    font-size: .8rem;
}

.bpt_wfselection_container_title_warning {
    color: #d80d78;
    /*     background: var(--primaryColorBlue);
    background: -webkit-linear-gradient(top left, var(--primaryColorBlue), var(--secondaryColorBlue));
    background: -moz-linear-gradient(top left, var(--primaryColorBlue), var(--secondaryColorBlue));
    background: linear-gradient(to bottom right, var(--primaryColorBlue), var(--secondaryColorBlue));*/
}
/* #endregion Components */

/* #region Main App Schell */
.bpt_splash_screen, .bpt_login_screen {
    position: relative;
    float: left;
    width: 100vw;
    height: 100vh;
    /*    background: var(--primaryColorBlue);
    background: -webkit-linear-gradient(top left, var(--primaryColorBlue), var(--secondaryColorBlue));
    background: -moz-linear-gradient(top left, var(--primaryColorBlue), var(--secondaryColorBlue));
    background: linear-gradient(to bottom right, var(--primaryColorBlue), var(--secondaryColorBlue));
    background-color:#ffffff34;*/
}

.bpt_splash_screen_image {
    display: block;
    margin: auto;
    max-height: 7rem;
    width: auto;
    margin-bottom: 2rem;
}

.bpt_splash_screen_message {
    width: 100%;
    text-align: center;
    color: #2b2b2b;
    margin-top: 0.5em;
    font-size: 0.9em;
}

.bpt_main_app_schell {
    position: absolute;
    width: 100%;
    height: 100%;
    /*    width: 50%;
    height: 50%;
    margin:auto;
    left:0;
    right:0;
    top:0;
    bottom:0;*/
    background-color: var(--primaryBackgroundColor);
}

/*@media screen and (max-width: 80rem) {

    .bpt_main_app_schell {
        width: 100%;
        height: 100%;
    }
}*/

.bpt_header {
    height: var(--headerHeight);
    box-shadow: var(--primaryColorBlueWithOpacity) 0px 7px 29px 0px;
    z-index: 2;
    border-bottom-left-radius: var(--borderRadius);
    border-bottom-right-radius: var(--borderRadius);
    /*    -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 0, 100% 81%, 81% 88%, 20% 100%, 0 83%, 0 0);*/
    /*    clip-path: polygon(20% 0%, 80% 0%, 100% 0, 100% 81%, 81% 88%, 20% 100%, 0 83%, 0 0);*/
    background: var(--primaryColorBlue);
    background: -webkit-linear-gradient(top left, var(--primaryColorBlue), var(--secondaryColorBlue));
    background: -moz-linear-gradient(top left, var(--primaryColorBlue), var(--secondaryColorBlue));
    background: linear-gradient(to bottom right, var(--primaryColorBlue), var(--secondaryColorBlue));
}

.bpt_content {
    width: calc(100%-1rem);
    height: calc(100% - var(--substractHeight));
    overflow: hidden;
    z-index: 1;
    padding: 0.5rem;
    /*    background: #F7F7F7;
    background: -webkit-linear-gradient(top, #fbfbfb, #ffffff);
    background: -moz-linear-gradient(top, #fbfbfb, #ffffff);
    background: linear-gradient(to bottom, #fbfbfb, #ffffff);*/
}

    .bpt_content:hover {
        overflow-y: auto;
    }

.bpt_footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: var(--footerHeight);
    background-color: white;
    border-top: 0.05rem solid var(--borderColor);
    display: flex;
    justify-content: space-around;
    /*    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;*/
    /*    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;*/
}

.bpt_footerInactiveActionButton, .bpt_footerActiveActionButton {
    color: var(--inactiveSettingColor);
    font-size: 1.3rem;
    margin-top: 0.5rem;
}

.bpt_footerActiveActionButton {
    color: white;
    border-top-left-radius: var(--borderRadius);
    border-top-right-radius: var(--borderRadius);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.4rem;
    background: var(--primaryColorBlue);
    background: -webkit-linear-gradient(top left, var(--primaryColorBlue), var(--secondaryColorBlue));
    background: -moz-linear-gradient(top left, var(--primaryColorBlue), var(--secondaryColorBlue));
    background: linear-gradient(to bottom right, var(--primaryColorBlue), var(--secondaryColorBlue));
}

.bpt_footerInactiveActionButton:hover {
    cursor: pointer;
}

.bpt_main_back_arrow_icon, .bpt_main_options_icon {
    color: white;
    position: relative;
    float: left;
    margin-left: 1rem;
    margin-top: 1rem;
}

.bpt_main_options_icon {
    float: right;
    margin-left: 0;
    margin-right: 1rem;
    /*    image-rendering: pixelated;
    image-rendering: -webkit-optimize-contrast*/
}

    .bpt_main_back_arrow_icon:hover, .bpt_main_options_icon:hover {
        cursor: pointer;
    }

/* #endregion Main App Schell */

/* #region Global Styling */

.bpt_list_item_title {
    position: relative;
    float: left;
    margin-left: 1rem;
    margin-top: 0.2rem;
}

.bpt_list_item_right_image {
    position: relative;
    float: right;
    height: 1.2rem;
    margin-right: 0.5rem;
    margin-top: 0.1rem;
}

.bpt_add_shadow {
    box-shadow: #e7e7e7 0px 5px 30px 0px;
}

.bpt_add_shadow1 {
    box-shadow: #ededed 0px 5px 15px 0px;
}

.bpt_add_drop_shadow {
    filter: drop-shadow(0rem .2rem .7rem var(--primaryColorBlue));
}

.bpt_add_drop_shadow1 {
    filter: drop-shadow(0rem .1rem .1rem #dedede);
}

.bpt_row {
    position: relative;
    float: left;
    width: 100%;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.bpt_bottom_buttons_holder {
    position: relative;
    float: left;
    width: 100%;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-around;
    gap: .5rem;
}

.bpt_button_inner_icon, .bpt_button_inner_icon1 {
    position: relative;
    height: 1rem;
    vertical-align: middle;
    margin-right: 0.5rem;
}

.bpt_button_inner_icon1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    height: 1rem;
}

.bpt_button_inner_text {
    position: relative;
    vertical-align: middle;
}

.bpt_button1 {
    width: 45%;
    height: 2.7rem;
    background: none;
    background-color: none;
    border: none;
    border-radius: var(--borderRadius);
    color: white;
    background: var(--primaryColorBlue);
    background: -webkit-linear-gradient(top left, var(--primaryColorBlue), var(--secondaryColorBlue));
    background: -moz-linear-gradient(top left, var(--primaryColorBlue), var(--secondaryColorBlue));
    background: linear-gradient(to bottom right, var(--primaryColorBlue), var(--secondaryColorBlue));
    box-shadow: var(--primaryColorBlueWithOpacity) 0px 7px 29px 0px;
}

.bpt_button_submit {
    width: 45%;
    height: 2.7rem;
    background: none;
    background-color: none;
    border: none;
    border-radius: var(--borderRadius);
    color: white;
    background: var(--primaryColorBlue);
    background: -webkit-linear-gradient(top left, var(--primaryColorBlue), var(--secondaryColorBlue));
    background: -moz-linear-gradient(top left, var(--primaryColorBlue), var(--secondaryColorBlue));
    background: linear-gradient(to bottom right, var(--primaryColorBlue), var(--secondaryColorBlue));
    box-shadow: var(--primaryColorBlueWithOpacity) 0px 7px 29px 0px;
    /*    background: #65d116;
    background: -webkit-linear-gradient(top left,, #84e73b);
    background: -moz-linear-gradient(top left, #5ac809, #84e73b);
    background: linear-gradient(to bottom right, #5ac809, #84e73b);
    box-shadow: #5ac80969 0px 7px 29px 0px;*/
}

.bpt_button_clear, .bpt_button_login, .bpt_button_clear_100p, .bpt_button_disabled {
    width: 45%;
    height: 2.7rem;
    background: none;
    background-color: #ffffff;
    border: none;
    border-radius: var(--borderRadius);
    color: #656565;
    border: 0.05rem solid var(--borderColor);
    /*    background: #afafaf;
    background: -webkit-linear-gradient(top left, #afafaf, #cbcbcb);
    background: -moz-linear-gradient(top left, #afafaf, #cbcbcb);
    background: linear-gradient(to bottom right, #afafaf, #cbcbcb);
    box-shadow: #afafaf69 0px 7px 29px 0px;*/
    box-shadow: #eeeeee 0px 7px 29px 0px;
}

.bpt_button_login {
    background-color: #f9f9f9;
    background: #f9f9f9;
    background: -webkit-linear-gradient(top left, #f9f9f9, #eaeaea);
    background: -moz-linear-gradient(top left, #f9f9f9, #eaeaea);
    background: linear-gradient(to bottom right, #f9f9f9, #eaeaea);
    border: 0.05rem solid #d5d5d5;
    /*box-shadow: #eeeeee 0px 7px 20px 0px;*/
}

    .bpt_button_login:hover {
        cursor: pointer;
        background: -webkit-linear-gradient(top left, #eaeaea, #f9f9f9);
        background: -moz-linear-gradient(top left, #eaeaea, #f9f9f9);
        background: linear-gradient(to bottom right, #eaeaea, #f9f9f9);
    }

.bpt_button_clear_100p {
    width: 100%;
}

.bpt_with_100p {
    width: 100%;
}

.bpt_button_disabled {
    /*background-color:#f6f6f6;*/
    opacity: 0.5;
}

.bpt_button1:hover, .bpt_button_clear:hover, .bpt_button_submit:hover, .bpt_button_clear_100p:hover {
    cursor: pointer;
}

.bpt_button_clear:hover, .bpt_button_clear_100p:hover {
    cursor: pointer;
    background-color: #f8f8f8;
}

.bpt_button_submit:hover {
    background: var(--primaryColorBlue);
    background: -webkit-linear-gradient(top left, var(--primaryColorBlue), #4ddcf5);
    background: -moz-linear-gradient(top left, var(--primaryColorBlue), #4ddcf5);
    background: linear-gradient(to bottom right, var(--primaryColorBlue), #4ddcf5);
}

.bpt_link_button {
    position: relative;
    float: left;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: #1688cd;
}

    .bpt_link_button:hover {
        cursor: pointer;
        box-shadow: var(--primaryColorBlueWithOpacity) 0px 15px 29px 0px;
    }

.bpt_ui_app_update_button {
    position: absolute;
    bottom: 0;
    right: 0;
    background: none;
    border: none;
    background-color: #32a295;
    height: 3rem;
    width: 100%;
    color: white;
}

    .bpt_ui_app_update_button:hover {
        cursor: pointer;
        background-color: #32a99a;
    }

.bpt_input_field_label {
    position: relative;
    float: left;
    font-size: var(--labelFontSize);
    color: var(--foreColorInputLabel);
    width: 100%;
}

.bpt_input_field, .bpt_input_field1, .bpt_input_field100P, .bpt_text_area {
    position: relative;
    float: left;
    width: 99%;
    height: 1.5rem;
    border: 0.05rem solid var(--borderColor);
    border-radius: 0.3rem;
    color: #282828;
    background-color: white;
    margin-top: .2rem;
}

    .bpt_input_field:hover {
        border: 0.05rem solid var(--primaryColorBlue);
    }

.bpt_text_area {
    color: black;
    box-shadow: #f0f0f0 0px 0px 30px 0px;
    height: 5rem;
}

.bpt_input_field1, .bpt_input_field100P {
    width: calc(100% - 2rem);
    /* border:none;*/
    /*   font-weight:bold;*/
    color: black;
}

.bpt_input_field100P {
    width: 100%;
}

.bpt_input_field_action {
    position: relative;
    float: right;
    width: 1rem;
    padding: 0.2rem;
    font-weight: 600;
    color: var(--primaryColorBlue);
}

.bpt_ui_offline_message_holder {
    font-weight: 600;
    margin-bottom: .5rem;
}

.bpt_ui_negative_message_holder, .bpt_ui_positive_message_holder, .bpt_ui_information_message_holder {
    bottom: 0;
    /*    top: 0;*/
    left: 0;
    right: 0;
    /*    margin:auto;*/
    height: auto;
    max-height: 50%;
    position: absolute;
    /*border-radius: 0.2rem;*/
    color: white;
    padding: 0.5rem;
    z-index: 100;
    width: calc(100% - 1rem);
    font-size: 0.9rem;
    /*    margin-top: 0.5rem;
    margin-bottom: 0.5rem;*/
    background-color: #d53939;
    background: #d53939;
    background: -webkit-linear-gradient(top left, #d53939, #ea4d4d);
    background: -moz-linear-gradient(top left, #d53939, #ea4d4d);
    background: linear-gradient(to bottom right, #d53939, #ea4d4d);
}

.bpt_ui_positive_message_holder {
    background-color: #32a233;
    background: #32a233;
    background: -webkit-linear-gradient(top left, #32a233, #3eb53f);
    background: -moz-linear-gradient(top left, #32a233, #3eb53f);
    background: linear-gradient(to bottom right, #32a233, #3eb53f);
}

.bpt_ui_information_message_holder {
    background-color: #32a295;
    background: #32a295;
    background: -webkit-linear-gradient(top left, #32a295, #3eb2a5);
    background: -moz-linear-gradient(top left, #32a295, #3eb2a5);
    background: linear-gradient(to bottom right, #32a295, #3eb2a5);
}

.bpt_ui_notif_message_close_button {
    position: relative;
    float: left;
    background: none;
    border: none;
    color: white;
    margin-bottom: 0.5rem;
    font-weight: 600;
    margin-right: 0.5rem;
}

    .bpt_ui_notif_message_close_button:hover {
        cursor: pointer;
    }

.bpt_ui_notif_message_text {
    position: relative;
    float: left;
    max-height: 3rem;
    overflow: auto;
}

.bpt_ui_notificator_holder, .bpt_ui_notificator_holder_exception {
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    position: absolute;
    z-index: 100;
    font-size: 0.9rem;
    /*        background-color: #00000051;
    color:white;*/
    text-align: center;
}

.bpt_ui_notificator_holder_exception {
    background: #d32058;
    background: -webkit-linear-gradient(top left, #d32058, #ec4579);
    background: -moz-linear-gradient(top left, #d32058, #ec4579);
    background: linear-gradient(to bottom right, #d32058, #ec4579);
    justify-content: center;
    color: white;
    text-align: center;
}

.bpt_ui_notificator_member_activity, .bpt_ui_notificator_member_success, .bpt_ui_notificator_member_error {
    position: absolute;
    left: 0;
    right: 0;
    top: 2.8rem;
    height: auto;
    margin-left: .5rem;
    margin-right: .5rem;
    margin-top: .5rem;
    width: calc(100% - 1rem);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    /* background-color: #fcfcfc;*/
    /*    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);*/
    /*    border-radius: 3rem;*/
    /*border:0.05rem solid #e1e1e1;*/
    /*    color: #e64c67;
    background-color: #e64c670f;*/
    /*    color: #30b5d7;
    background-color: #4cc7e60e;*/
    color: white;
    background-color: #4cc7e6e1;
    /*font-weight: 600;*/
    font-size: 0.9rem;
    border-radius: var(--borderRadius);
    text-align: center;
}

.bpt_ui_notificator_member_success {
    /*   color: #02af6b;*/
    background-color: #02af6bdf;
}

.bpt_ui_notificator_member_error {
    /*    color: #C3145C;
    background-color: #C3145C0c;*/
    background-color: #c3145cde;
}

.bpt_item_selection_page_grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 0.5rem;
}

.bpt_two_column_grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 0.5rem;
}

.bpt_input_container {
    position: relative;
    float: left;
    width: calc(100% - 1rem);
    /*border-bottom: 0.05rem solid #d7d7d7;*/
    padding: 0.5rem;
    padding-bottom: 0;
    margin-top: 0.2rem;
}

.bpt_input_screen_sub_header {
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    color: #757575;
    font-size: 0.9rem;
}
/* #endregion Global Styling */

/* #region Login Page */
.bpt_login_title {
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
}

.bpt_login_subtitle {
    width: 100%;
    text-align: center;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.bpt_login_input_label {
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
    margin-top: 2rem;
}

.bpt_login_input_holder {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: .3rem;
    padding-top: 0;
}

.bpt_login_horizontal_separator {
    position: relative;
    float: left;
    width: 95%;
    margin-left: 2.5%;
    background-color: var(--borderColor);
    height: 0.01rem;
}

.bpt_login_input_holder1, .bpt_login_input_holder2 {
    margin: 0 auto;
    width: 28rem;
    border-radius: .5rem;
    border: 0.05rem solid var(--borderColor);
    padding: .5rem;
    padding-top: .3rem;
}

.bpt_login_input_holder2 {
    border: none;
}

.bpt_login_input_textfield {
    border: none;
    margin-top: 0.3rem;
    width: 24rem;
    height: 1.7rem;
    border: none;
    /*    background-color: #ffffff80;
    color: #2d2d2d;*/
}

/*    .bpt_login_input_textfield:hover, .bpt_login_input_textfield:focus {
        border: 0.05rem solid var(--primaryColorBlue);
    }*/

.bpt_login_input_button, .bpt_exception_input_button {
    width: 25rem;
    height: 2.7rem;
    background: none;
    border: none;
    border-radius: var(--borderRadius);
    color: var(--primaryColorBlue);
    margin-top: 2rem;
}

    .bpt_login_input_button:hover, .bpt_exception_input_button:hover {
        cursor: pointer;
        font-weight: bold;
    }

.bpt_exception_input_button {
    color: #cc124c;
    background-color: white;
}

.bpt_login_error_message {
    position: relative;
    float: left;
    width: 97%;
    height: auto;
    background-color: #c3145cde;
    color: white;
    margin-top: 0.7rem;
    margin-bottom: 0.7rem;
    padding: .5rem;
    font-size: .9rem;
    border-radius: var(--borderRadius);
}

@media screen and (max-width: 28rem) {

    .bpt_login_input_button, .bpt_exception_input_button, .bpt_login_input_textfield, .bpt_login_input_holder1, .bpt_login_input_holder2 {
        width: calc(100% - 3rem);
    }
}

/* #endregion Login Page */

/* #region Settings  Page */

.bpt_setting_page_grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 0.5rem;
}

.bpt_settings_action_tile {
    position: relative;
    float: left;
    height: 5rem;
    /*    margin-top: 0.7rem;
    margin-right: 0.5rem;*/
    padding-top: 1rem;
    background-color: white;
    border-radius: var(--borderRadius);
    border: 0.05rem solid var(--borderColor);
    font-size: 0.9rem;
    text-align: center;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

/*.bpt_settings_action_tile::before{
    width:3rem;
    height:3rem;
    background-color:yellow;
    position:absolute;
}

    .bpt_settings_action_tile::after {
        width: 3rem;
        height: 3rem;
        background-color: yellow;
        position: absolute;
    }*/

.bpt_settings_action_tile_title {
    position: relative;
    float: left;
    margin-left: 1rem;
    margin-top: 0.2rem;
    color: #4a4a4a;
    font-weight: 600;
    font-size: .85rem;
}

.bpt_settings_action_tile_input {
    position: relative;
    float: left;
    margin-left: 1rem;
}

.bpt_settings_action_tile_input_text {
    position: relative;
    float: left;
    margin-left: 0.5rem;
}

.bpt_settings_row_setting_holder, .bpt_settings_row_setting_holder_v2 {
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
    font-size:.9rem;
}

.bpt_settings_setting_label, .bpt_settings_setting_label_value {
    position:relative;
    text-align: left;
    margin-left: 1rem;
    color: #4a4a4a;
/*    background-color: red;*/
    min-width:4.55rem;
}

.bpt_settings_setting_label_value {
    text-align: left;
    margin-left: 1rem;
    color: #000000;
/*    background-color:yellow;
    width:100%;*/
overflow:auto;
}

@media screen and (max-width: 50rem) {
    .bpt_setting_page_grid {
        grid-template-columns: repeat(1,1fr);
    }
}

@media screen and (max-width: 20rem) {
    .bpt_settings_row_setting_holder_v2 {
        grid-template-columns: repeat(1,1fr);
    }
}



/* #endregion Settings  Page */

/* #region Index  Page */
.bpt_index_page_grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 0.5rem;
}

.bpt_categories {
    display: flex;
    list-style-type: none;
    padding: 0;
    padding-bottom: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    /*    position:relative;
    float:left;
    padding:0.3rem;
    background-color:aliceblue;
    border-radius:0.5rem;*/
}

    .bpt_categories:hover {
        overflow: auto;
    }

    .bpt_categories li {
        margin-right: 0.5rem;
        background-color: rgb(227, 227, 227, 0.40);
        padding: 0.4rem;
        border-radius: var(--borderRadius);
        /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;*/
    }


.bpt_main_category_holder {
    position: relative;
    float: left;
    display: flex;
    width: 100%;
    height: 4rem;
    /*    background-color:yellow;*/
    margin-top: 0.5rem;
    white-space: nowrap;
    overflow-x: auto;
}

    .bpt_main_category_holder:hover {
        overflow: auto;
    }

    .bpt_main_category_holder::-webkit-scrollbar {
        height: 1.3rem;
    }

.bpt_main_category_tile {
    height: 3.5rem;
    border: 0.05rem solid var(--borderColor);
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}


.bpt_main_category_title, .bpt_main_category_title_selected {
    position: relative;
    float: left;
    width: auto;
    height: 1.5rem;
    padding: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.4rem;
    font-size: 0.85rem;
    border-radius: var(--borderRadius);
    /*    background-color: var(--primaryColorBlueWithOpacity);*/
    border: 0.05rem solid var(--primaryColorBlueWithOpacity);
    margin-right: 0.5rem;
}

.bpt_main_category_title_selected {
    color: white;
    /*    font-weight: bold;
    font-size:1rem;*/
    background: #23a0e11e;
    font-size: .85rem;
    /*    font-weight: 600;*/
    color: var(--primaryColorBlue);
    /*    border: none;*/
    /*    background: -webkit-linear-gradient(top left, var(--primaryColorBlue), var(--secondaryColorBlue));
    background: -moz-linear-gradient(top left, var(--primaryColorBlue), var(--secondaryColorBlue));
    background: linear-gradient(to bottom right, var(--primaryColorBlue), var(--secondaryColorBlue));
*/
    /*    box-shadow: var(--primaryColorBlueWithOpacity) 0px 2px 10px 0px;*/
    margin-top: 0.3rem;
}

.bpt_main_category_title:hover {
    cursor: pointer;
    color: var(--primaryColorBlue);
    /* border: 0.05rem solid var(--primaryColorBlue);*/
}

.bpt_main_category_header_selected {
    color: var(--primaryColorBlue);
    font-weight: 600;
}

    .bpt_main_category_header_selected:hover {
        cursor: pointer;
    }

.bpt_section_header {
    font-size: 0.9rem;
    font-weight: 600;
    color: #7d7d7d;
    color: #3a3a3a;
}



.bpt_action_tile, .bpt_action_tile_disabled, .bpt_action_tile2, .bpt_action_tile3, .bpt_settings_action_tile, .bpt_wosample_action_tile, .bpt_searchsample_action_tile, .bpt_main_header_tile {
    position: relative;
    float: left;
    height: 4rem;
    /*margin-top: 0.7rem;*/
    /* margin-right: 2rem;*/
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: white;
    border-radius: var(--borderRadius);
    border: 0.05rem solid var(--borderColor);
    font-size: 0.9rem;
    text-align: center;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    font-size: .9rem;
}

.bpt_action_tile_selected {
    background-color: #f5fdff;
    background: -webkit-linear-gradient(right, #f5fdff, #e0f8fe);
    background: -moz-linear-gradient(right,#f5fdff, #e0f8fe);
    background: linear-gradient(to left, #f5fdff, #e0f8fe);
}

.bpt_action_tile_disabled {
    opacity: .5;
}

.bpt_main_header_tile {
    display: grid;
    grid-template-columns: 5fr 2fr 5fr;
    gap: .5rem;
    position: relative;
    float: left;
    padding: .5rem;
    height: auto;
    /*    border: 0.05rem solid var(--primaryColorBlueWithOpacity);
    background-color: transparent;*/
}

.bpt_action_tile2 {
    width: 100%;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    height: auto;
    border: 0.05rem solid var(--borderColor);
}

.bpt_action_tile3 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    height: auto;
}

.bpt_searchsample_action_tile {
    height: 2rem;
    padding: 0;
}

.bpt_settings_action_tile, .bpt_wosample_action_tile {
    padding: 1rem;
    min-height: 4rem;
    height: auto;
}

.bpt_wosample_action_tile {
    text-align: left;
}

    .bpt_action_tile:hover, .bpt_action_tile2:hover, .bpt_wosample_action_tile:hover {
        cursor: pointer;
        box-shadow: var(--primaryColorBlueWithOpacity) 0px 15px 29px 0px;
    }

.bpt_settings_action_tile:hover {
    box-shadow: var(--primaryColorBlueWithOpacity) 0px 15px 29px 0px;
}



.bpt_action_tile_title {
    position: relative;
    float: left;
    width: 100%;
    margin-top: 0.2rem;
    text-align: center;
}

.bpt_action_tile_icon {
    float: left;
    width: 100%;
    text-align: center;
    color: var(--inactiveSettingColor);
    font-size: 1.5rem;
}

.bpt_action_setting_tile_icon {
    position: relative;
    float: left;
    text-align: center;
    color: var(--inactiveSettingColor);
    font-size: 1.5rem;
    margin-left: 1rem;
    color: var(--primaryColorBlue);
}

.bpt_action_tile_bottom_comp {
    position: absolute;
    height: 1rem;
    width: 1rem;
    background-color: yellow;
    bottom: 0;
    right: 0;
    border-radius: var(--borderRadius);
    background: var(--primaryColorBlue);
    background: -webkit-linear-gradient(top left, var(--primaryColorBlue), var(--secondaryColorBlue));
    background: -moz-linear-gradient(top left, var(--primaryColorBlue), var(--secondaryColorBlue));
    background: linear-gradient(to bottom right, var(--primaryColorBlue), var(--secondaryColorBlue));
}

.bpt_center_div_horizontally {
    margin: 0 auto;
}

@media screen and (max-width: 70rem) {

    .bpt_index_page_grid {
        grid-template-columns: repeat(3,1fr);
    }
}

@media screen and (max-width: 50rem) {

    .bpt_index_page_grid {
        grid-template-columns: repeat(2,1fr);
    }
}

/* #endregion Index  Pag */

/* #region Work Order Sample */
.bpt_wosample_page_grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 0.5rem;
}


/*Table */
.bpt_table {
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    border: 1px solid black;
    background-color: white;
    text-align: left;
}

    .bpt_table tr:not(:first-child):hover {
        background-color: rgba(0, 0, 0, 0.09);
    }

    .bpt_table tr:not(:first-child):not(:last-child) {
        border-bottom: 1px solid var(--borderColor);
    }

    .bpt_table th {
        border-bottom: 3px solid var(--borderColor);
        padding-left: 6px;
        padding-right: 6px;
        text-align: left;
    }

    .bpt_table td {
        padding-left: 6px;
        padding-right: 6px;
        text-align: left;
    }

.applicationsTable {
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    border: 1px solid var(--borderColor);
    background-color: white;
}

    .applicationsTable tr:not(.header):hover {
        background-color: rgba(0, 0, 0, 0.09);
    }

    .applicationsTable tr:not(.header):not(:last-child) {
        border-bottom: 1px solid var(--borderColor);
    }

    .applicationsTable th {
        border-bottom: 3px solid var(--borderColor);
        padding-left: 6px;
        padding-right: 6px;
        text-align: center !important;
    }

    .applicationsTable td {
        padding-left: 6px;
        padding-right: 6px;
        text-align: center !important;
    }

/* #endregion Work Order Sample */

/* #region Warehouse/Facility Selection */

.bpt_list_category_selector, .bpt_list_category_selector_selected {
    position: relative;
    float: left;
    margin-right: 1rem;
    color: #585858;
    font-size: 0.9rem;
}

.bpt_list_category_selector_selected {
    font-weight: 600;
    border-bottom: 0.05rem solid var(--primaryColorBlue);
}

    .bpt_list_category_selector:hover, .bpt_list_category_selector_selected:hover {
        cursor: pointer;
        border-bottom: 0.05rem solid var(--primaryColorBlue);
    }

/* #endregion Warehouse/Facility Selection */

/* #region CSS Images */

/* #endregion CSS Images */

/* #region PageName Here */

/* #endregion PageName Here */

/* #region Sync Review Page */

.bpt_grid_holder_2_6x6, .bpt_grid_holder_2_4x8, .bpt_grid_holder_1_12, .bpt_grid_holder_3_4x4x4, .bpt_grid_holder_4_3x3x3x3, .bpt_grid_holder_item_actions, .bpt_grid_holder_item_ui_feedback {
    width: 100%;
    position: relative;
    float: left;
    display: grid;
    gap: .5rem;
}

.bpt_grid_holder_item_ui_feedback {
    grid-template-columns: 12fr;
    color: #d32058;
    margin-top:.3rem;
}

.bpt_grid_holder_2_6x6 {
    grid-template-columns: 6fr 6fr;
}

.bpt_grid_holder_item_actions {
    /*    grid-template-columns: 6fr 6fr;
    align-items: center;*/
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top:.3rem;
}

.bpt_grid_holder_2_4x8 {
    grid-template-columns: 3fr 9fr;
}

.bpt_grid_holder_3_4x4x4 {
    grid-template-columns: 4fr 4fr 4fr;
}

.bpt_grid_holder_4_3x3x3x3 {
    grid-template-columns: 3fr 3fr 3fr 3fr;
}


.bpt_grid_holder_1_12 {
    grid-template-columns: 12fr;
}

.bpt_sepa05 {
    margin-top: .5rem;
}

.bpt_page_group_by_title, .bpt_page_group_by_subtitle {
    position: relative;
    float: left;
    width: 100%;
    font-size: .7rem;
    margin-top: .3rem;
    color: #848484;
    text-align: center;
}

.bpt_page_group_by_subtitle {
    color: var(--foreColor);
    font-size: .8rem;
}

.bpt_page_group_by_title1, .bpt_page_group_by_subtitle1, .bpt_page_group_by_title_header1, .bpt_page_group_by_subtitle_header1_centered {
    position: relative;
    float: left;
    height: auto;
    width: 100%;
    font-size: var(--labelFontSize);
    color: var(--foreColorInputLabel);
    text-align: right;
    /*    background-color:yellow;*/
}

.bpt_page_group_by_subtitle1, .bpt_page_group_by_subtitle_header1, .bpt_page_group_by_subtitle_header1_centered {
    text-align: left;
    color: var(--foreColor);
    font-size: .8rem;
}

.bpt_page_group_by_subtitle_header1_centered {
    text-align: center;
}

.bpt_page_group_by_subtitle_header1, .bpt_page_group_by_subtitle_header1_centered {
    font-weight: 600;
    font-size: .85rem;
}
/* #endregion Sync Review Page */

/* #region Image Capture Page */

.bpt_camera_controls {
    position: absolute;
    width: 7rem;
    height: 2rem;
    border-radius: var(--borderRadius);
    background-color: #00000051;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: .5rem;
    z-index: 100;
}

/* #endregion Image Capture Page */

/* #region Data Pager Component */

.bpt_pager_comp1, .bpt_pager_comp2, .bpt_pager_comp2_button {
    position: relative;
    float: left;
    font-size: .8rem;
}

.bpt_pager_comp2, .bpt_pager_comp2_button {
    color: var(--primaryColorBlue);
    margin-right: 2rem;
}

.bpt_pager_comp2_button {
    background: none;
    border: none;
    z-index: 5;
}

    .bpt_pager_comp2:hover, .bpt_pager_comp2_button:hover {
        cursor: pointer;
        text-decoration: underline;
    }

.bpt_pager_search_input_field {
    position: relative;
    float: left;
    width: calc(100% - 4rem);
    margin-left: 1rem;
    margin-top: .2rem;
    border: none;
    height: 1.2rem;
}

/* #endregion Data Pager Component */


/* #region Animations */

/*.bpt_slide-from-left-to-right {
    animation: slideLeftToRight 1s ease;
}

@keyframes slideLeftToRight {
    0% {
        transform: translateX(-3rem);
        opacity: 0;
    }

    100% {
    }
}

.bpt_slide-from-right-to-left {
    animation: slideRightToLeft 1s ease;
}

@keyframes slideRightToLeft {
    0% {
        transform: translateX(3rem);
        opacity: 0;
    }

    100% {
    }
}*/



/* #endregion Animations */