/* This is common file for all CSS in App */

/* width */
::-webkit-scrollbar {height: 8px;width: 8px;}
/* Track */
::-webkit-scrollbar-track {box-shadow: inset 0 0 2px white;}
/* Handle */
::-webkit-scrollbar-thumb {background: var(--main-color);}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background: var(--main-color-hover);}
/* For Webkit browsers */
.hide-scrollbar::-webkit-scrollbar {display: none;}
/* For Webkit browsers */
.main-app-scrollbar-bg::-webkit-scrollbar-track {background-color: white;}

body{background: var(--body-bg-color);padding: 0%;margin: 0%;height: 100vh;}

.sidebar-bg-hold{float: left;height: 100%;width: 50px;}
.sidebar{
    float: left;
    height: 100%;
    width: 50px;
    border-right: 0.5px solid lightgrey;
    background-color: white;
    transition: width 0.5s ease; /* Smooth-transition-width */
}
.sidebar-top{height: 44px;}
.sidebar-top .sidebar-but{height: 44px;border-bottom: 0.5px solid lightgray;}
.sidebar-middle{flex: 1;overflow-y: scroll;overflow-x: hidden;min-height:160px;}
.sidebar-bottom{border-top: 0.5px solid lightgray;}
.cust-header{
    background-color: white;position: sticky;top: 0px;z-index: 10;
    height: 44px;border-bottom: 0.5px solid lightgray;min-height: 44px;
}
.sidebar-fade-bg-div{
    background-color: black;width: 100%;height: 100vh;opacity: 50%;position: fixed;
    z-index: 19;display: none;
}
.sidebar-but{
    width: 100%;height: 48px;padding: 10px;border-radius: 0px;background-color: var(--sidebar-background);
    align-items: center;display: flex;
}
.sidebar-but img{ height: 24px;width: 24px;filter: var(--sidebar-icons-filter);}
.sidebar-but span{ margin-left: 10px; color: gray; float: left; font-weight: 500; font-size: small; }
.sidebar-but:hover{ background-color: var(--sidebar-hover); }
.sidebar-but:hover img{ filter: var(--sidebar-hover-but-icon-filter); }
.sidebar-but:hover span{ color: var(--sidebar-hover-but-text-fg-color); }
.sidebar-but-active{ background-color: var(--sidebar-hover) !important; }
.sidebar-but-active img{ filter: var(--sidebar-hover-but-icon-filter) !important; }
.sidebar-but-active span{ color: var(--sidebar-hover-but-text-fg-color) !important; }

/* side main content or page */
.main-content{position: relative;display: flex;flex-direction: column;height: 100%;overflow-y: auto;}

.bashboard-info-card{box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;}
.bashboard-info-card .DIC-color-div{background-color: var(--main-color)}
.bashboard-info-card:hover .DIC-color-div{background-color: var(--main-color-hover) !important;}
.bashboard-card-col-12{
    background-color: var(--dashboard-card-bg-color);border-radius: var(--border-radius);
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

.app-icons-img{height: 24px;width: 24px;filter: var(--dashboard-icons-filter);}
.app-heading-text{font-weight: 500;color: var(--app-heading-text-color);font-size: 14px;}

.available-things-heading-text{color: var(--available-things-heading-fg-color);font-weight: 500;font-size: small;}
.available-things-text{color: var(--available-things-fg-color);font-weight: 500;}

.modal-TL-icon{height: 24px;width: 24px;filter: var(--modal-TL-icon-filter);}

.system_settings_email_temp_head_bg{background-color: var(--system-settings-email-temp-head-gb);}
.system_settings_email_temp_bg{background-color: var(--system-settings-email-temp-bg);}

.cust_accordion_button{color: var(--cust-accordion-button-color);font-weight: 500;padding-left: 0;font-size: small;}

.btn-group-custom{border: 1px solid;border-radius: var(--border-radius);}
.cust-btn{ 
    background-color: var(--app-cust-but-bg-color);color: var(--app-cust-but-fg-color);text-decoration: none;
    border: none;border-radius: 3px;font-size: small;padding: 5px;padding-left: 8px;padding-right: 8px;
}
.cust-btn:hover{background-color: var(--app-cust-but-hover-bg-color);color: var(--app-cust-but-hover-fg-color);}

.cust_searchable_dropdown_div{border: 0.5px solid lightgray;width: 100%;border-radius: 3px;padding: 4px;}
.cust_searchable_dropdown_search_input{
    float: left;outline: none;border: none;width: calc(100% - 40px);color: currentcolor;font-size: 14px;
}
.cust_searchable_dropdown_spinner{display:none;float: right;color: dimgray;}
.cust_searchable_dropdown_searched_data_div{
    max-height: 150px;min-height: 40px;background-color: white;border: 0.5px solid lightgray;
    position: absolute;display: none;overflow: scroll;
}
.cust_searchable_dropdown_searched_data_div ul {list-style-type: none;padding-left: 0;margin-left: 0;}
.cust_searchable_dropdown_searched_data_div li{font-weight: 450;padding-left: 5px;}
.cust_searchable_dropdown_searched_data_div li:hover{background-color: lightskyblue;}

/* 
Extra small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px
*/
@media only screen and (min-width: 450px) and (max-width: 992px) {
    ::-webkit-scrollbar {
        height: 4px;
        width: 4px;
    }
}
@media only screen and (min-width: 20px) and (max-width: 450px) {
    ::-webkit-scrollbar {
        height: 4px;
        width: 4px;
    }
}