body, html { font-size:16px !important;  }	
/*  BODY overflow-y:scroll; will make postion sticky false */
 

/* Company CSS */
#disablingDiv{display:none;z-index:1200;position:absolute;top:0;left:0;width:100%;height:100%;background-color:white;opacity:.00}
.itn_waiting { background:url( "../../images/progress/pheno_loader.gif")  no-repeat scroll ; height: 11px; padding:0 0 0  43px; }
.font-prompt {  font-family: "Prompt" !important; }
/* FONT SIZE */
 
.f9 { font-size:0.600rem !important; }
.f10 { font-size:0.625rem !important; }
.f11 { font-size:0.70rem !important; }
.f12 { font-size:0.75rem !important; }
.f13 { font-size:0.825rem !important; }
.f14 { font-size:0.875rem !important; } 
.f15 { font-size:0.925rem !important; }
.f16 { font-size:1rem !important; } 
.f18 { font-size:1.125rem !important; } 
.f20 { font-size:1.25rem !important; } 
.f22 { font-size:1.375rem !important; } 
.f24 { font-size:1.5rem !important; } 
.f26 { font-size:1.625rem !important; } 
.f28 { font-size:1.75rem !important; } 
.f29 { font-size:1.9rem !important; } 
.f30 { font-size:2rem !important; } 
.f2rem { font-size:2rem !important; } 
.f2d5 { font-size:2.5rem !important; } 
.f3rem { font-size:3rem !important; } 
.f4rem { font-size:4rem !important; } 


.f14 .form-control { font-size:0.875rem !important; } 
.f14 .form-select  { font-size:0.875rem !important; } 
.f14 .btn  { font-size:0.875rem !important; } 
/* Table width */
.width-d3 { width:0.3rem;}
.width-d5 { width:0.5rem;}
.width-1 { width:1.0rem;}
.width-1d5 { width:1.5rem;}
.width-2 { width:2.0rem;}
.width-2d5 { width:2.5rem;}
.width-3 { width:3.0rem;}
.width-3d5 { width:3.5rem;}
.width-4 { width:4.0rem;}
.width-4d5 { width:4.5rem;}
.width-5 { width:5.0rem;}
.width-5d5 { width:5.5rem;}
.width-6 { width:6.0rem;}
.width-6d5 { width:6.5rem;}
.width-7 { width:7.0rem;}
.width-7d5 {width: 7.5rem;}
.width-8 { width:8.0rem;}
.width-8d5 { width:8.5rem;}
.width-9 { width:9.0rem;}
.width-10 { width:10.0rem;}
.width-10d5 { width:10.5rem;}
.width-11 { width:11.0rem;}
.width-12 { width:12.0rem;}
.width-13 { width:13.0rem;}
.width-14 { width:14.0rem;}
.width-15 { width:15.0rem;}
.width-16 { width:16.0rem !important;}
.width-18 { width:18.0rem !important;}
.width-20 { width:20rem;}
.width-21 { width:21rem;}
.width-22 { width:22rem;}
.width-24 { width:24rem;}
.width-26 { width:26rem;}
.width-28 { width:28rem;}
.width-30 {width: 30rem;}

.height-200 { height:200px; }
.height-100 { height:100px; }
.height-70 { height:70px; }

.itn_blue_apple{color:#08c !important; }
.itn_red_gg{color:#dd4b39 !important; }
.col-light-grey { color: #d3d3d3 !important; }
.col-dark-grey { color: #a9a9a9 !important; }
.text-555  { color: #555555 !important; }

.btn-collapse-ss {
    border-radius: 0.2rem;
    font-size: 0.82rem;
    line-height: 1.2;
    padding: 0.12rem 0.45rem 0.2rem;
}

.bg-visa { background-color: #f9feff !important; }
div.selected {
    border: 1px solid #0b99b9;
    -webkit-box-shadow: 0 0 4px 0 #d2ffff;
    box-shadow: 0 0 4px 0 #d2ffff;
}
 
.table.no-border-top > :not(:first-child) {
    border-top: 0px solid #0b99b9;
}

.table.top-col-visa > :not(:first-child) {
    border-top: 1px solid #0b99b9;
}

.td_border {
    border: 1px solid #b0bec5 !important;
}
 

/* 
https://www.rapidtables.com/web/css/css-color.html
https://www.htmlcsscolor.com/hex/DDA0DD 78BB7B 97DDB7 008000 */
 
.cl_pyd_orange { color:	#F05423 ; }
.bg_pyd_orange { background-color:	#F05423 ; }

.cl_pyd_green { color:	#72BF44 ; }
.bg_pyd_green { background-color:	#72BF44 ; }


.cl-wh-sand {  color: #ECE9E4 !important; }
.cl-wh-smoke {  color: #F5F5F5 !important; }
.cl-wh-salt {   color: #F3FAFD !important; }
.cl-wh-snow {   color: #F3F6FB !important; }

.bg-wh-sand { background-color: #ECE9E4 !important; }
.bg-wh-smoke { background-color: #F5F5F5 !important; }
.bg-wh-salt { background-color: #F3FAFD !important; }
.bg-wh-snow { background-color: #F3F6FB !important; }
.bg-b0bec5  { background-color: #b0bec5 !important; }
.bg-f0f2f5  { background-color: #f0f2f5 !important; }  
.bg-lightplum { background-color: #F1D8F1 !important; }
.bg-pyd { background-color: #F05423 !important; }
.bg-cinderella { background-color: #FBD2C5 !important; }

.bg-plum { background-color:  #DDA0DD !important; }
.bg-light-audit { background-color:  #D3E9D4 !important; }
.bg-audit { background-color:  #93C995 !important; }
.col-audit { color:  #008000 !important; }
.bg-chat-audit { background-color:  #D3E9D4 !important; }
.bg-wt-tap{background-color: #fffffe;}
.bg-fb { background-color: #F2F3F5 !important; }
.bg-form { background-color: #E9ECF0 !important;   }
.bg-blue { background-color: #2196F3 !important; }
.bg-purple { background-color: #9C27B0 !important; }
.bg-deep-purple { background-color: #673AB7 !important; }
.bg-indigo { background-color: #3F51B5 !important; }
.bg-teal { background-color: #009688 !important; }
.bg-light-green { background-color: #8BC34A !important; }
.bg-very-light-green { background-color: #d5f5e3 !important; }
.bg-amber { background-color: #FFC107 !important; }
.bg-light-cyan { background-color:#cff4fc !important; }
.bg-light-brown  { background-color:#BCAAA4 !important; }
.bg-blue-cornflower { background-color:#CFE2F3 !important; }
.col-blue-cornflower { color:#CFE2F3 !important; }

.bg-deep-orange { background-color: #FF5722 !important; }
.bg-grey { background-color: #9E9E9E !important; }
.bg-blue-grey { background-color: #607D8B !important; }
.bg-brown { background-color: #795548 !important; }
.bg-papayawhip { background-color: #ffefd5 !important; }
.bg-rose-white { background-color:#FDF3F1 !important; }

.bg-blue-100 {background-color: #cfe2ff !important;}
.bg-blue-200 {background-color: #9ec5fe !important;}
.bg-yellow-100 {background-color: #fff3cd !important;}
.bg-yellow-200 {background-color: #ffe69c !important;}
.bg-green-100 {background-color: #d1e7dd !important;}
.bg-green-200 {background-color: #a3cfbb !important;}
.bg-indigo-100 {background-color: #e0cffc !important;}
.bg-indigo-200 {background-color: #c29ffa !important;}
.bg-teal-200 {background-color: #a6e9d5 !important;}
.bg-teal-100 {background-color: #d2f4ea !important;}
.bg-gray-100 {background-color: #f8f9fa !important;}
.bg-gray-200 {background-color: #e9ecef !important;}
.bg-gray-500 {background-color: #adb5bd !important;}
.bg-pink-100 {background-color: #f7d6e6 !important;}
.bg-pink-200 {background-color: #efadce !important;}


.col-gray-100 {color: #f8f9fa !important;}
.col-gray-200 {color: #e9ecef !important;}
.col-gray-500 {color: #adb5bd !important;}

.bg-orange { background-color: #f57224 !important; }
.col-orange { color: #f57224 !important; }

.col-plum { color: #DDA0DD !important; }
.col-blue { color: #2196F3 !important; }
.col-purple { color: #9C27B0 !important; }
.col-deep-purple { color: #673AB7 !important; }
.col-indigo { color: #3F51B5 !important; }
.col-teal { color: #009688 !important; }
.col-light-green { color: #8BC34A !important; }
.col-amber { color: #FFC107 !important; }

.col-deep-orange { color: #FF5722 !important; }
.col-grey { color: #9E9E9E !important; }
.col-grey-600 { color: #6c757d !important; }
.col-light-grey { color: #CFCFCF !important; }
.col-blue-grey { color: #607D8B !important; }
.col-brown { color: #795548 !important; }
.col-black { color: rgb(33, 37, 41); }
.fix_ul_page  ul { margin-bottom:0;  }

table.itn_table_nowrap{table-layout:fixed}
.itn_table_nowrap td{overflow:hidden;white-space:nowrap}
.itn_table_nowrap th{overflow:hidden;white-space:nowrap}

@font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url('/assets/googlefont/MaterialIcons-Regular.ttf') format('truetype');
		 
}

@font-face {
   font-family: 'Material Icons Outlined';
   font-style: normal;
   font-weight: 400;
   src: local('Material Icons Outlined'),
        local('MaterialIconsOutlined-Regular'),
        url('/assets/googlefont/MaterialIconsOutlined-Regular.otf') format('truetype');
}


.gg-icons-outlined {
	vertical-align: middle;
    font-family: 'Material Icons Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	margin-top:-4px;
}

.gg-icons {
    vertical-align: middle;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-family: "Material Icons" !important;
    font-feature-settings: "liga";
    font-kerning: auto;
    font-language-override: normal;
    font-size: 24px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-synthesis: weight style;
    font-variant: normal;
    font-weight: normal;
    /*color: #55595c;*/
    text-rendering: auto;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    line-height: 0; 
	margin-top:-4px;
	text-transform: none;
}

.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }
.bd-callout-blue { border-left-color:rgb(32,56,100); }

.table_hl_click tr:hover{
    background-color: #f7f7f9;
    cursor:pointer;
}

 

a { text-decoration: none; }
 
@media (max-width: 767.98px) {
  .sidebar {
    top: 5rem;
  }
}
  
 
/* Change Form to ReadOnly https://jsfiddle.net/Tanbi/xyL6fphm/  */
input[readonly] {
    background-color: transparent;
    border: transparent;
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}


/* Larger Checkbox */
.my_checkbox {
transform: scale(1.5);
width:1.5vw;
height:1.5vh;

}

/* For Search Box with Cross X  */
    .input-container {
    position: relative;
    width: fit-content;
    }
    .clear-button {
        position: absolute;
        right: 10px;
        top: 40%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        font-size: 20px;
        cursor: pointer;
        outline: none;
        color:#AAAAAA;
    }


/* For Off Canvas  */
     .object-container {
        background-color: #f0f0f0; /* Change this to your desired background color */
        width: 100%;
        height: 100%;
    }
    object {
        width: 100%;
        height: 100%;
        border: none;
    }
    .offcanvas-custom-width {
        width: 35% !important; /* Adjust this value as needed */
    }

/* Scroll , show TOP btn */
    #scrollToTopBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap  99  */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #CFE2F3; /* Set a background color */
    color: #555; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px 15px; /* Some padding */
    border-radius: 5px; /* Rounded corners */
    font-size: 14px; /* Increase font size */
    }

    #scrollToTopBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
    color: white; /* Text color */
    }  


    .form-signin-bst {
        width: 100%;
        max-width: 800px;
        padding: 15px;
        margin: auto;
    }
    
    .otp-input {
        width: 70px;
        height: 70px;
        text-align: center;
        font-size: 40px;
        margin: 0 5px;
        -moz-appearance: textfield;
        /* Hide spinners in Firefox */
    }
    
    /* Hide spinners in Chrome, Safari, Edge, Opera */
    .otp-input::-webkit-outer-spin-button,
    .otp-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    
    /* Hide spinners in Firefox (older versions) */
    .otp-input[type=number] {
        -moz-appearance: textfield;
    }
    
    
    .css_logo_device {
        font-size: 15REM;
    }
    
    @media (max-width: 767.98px) {
        .css_logo_device {
            font-size: 10REM;
        }
    }

     

/* Fist use in ISAT Form - might usefull for general Modal */

    /* Stiky THEAD !!impotant overflow will broke stiky - dont use it for main content  */
    .table.show_list_stk th  { border-collapse: separate !important; position: sticky; top: 146px; z-index: 100; background-color: #f8f9fa !important; box-shadow: var(--bs-box-shadow-sm) !important; }
   
    .table.show_list_stk_white th  { border-collapse: separate !important; position: sticky; top: 146px; z-index: 100; background-color: #FFFFFF !important; box-shadow: var(--bs-box-shadow-sm) !important; }
 
    /* for table header sticky  */
    .aftk_stk  { position: sticky; top: 0px; z-index: 100; background-color: #f8f9fa !important; box-shadow: var(--bs-box-shadow-sm) !important; }
    


    .app-label {
        font-size:0.875rem  ; 
        margin-bottom: 0 ;
        --bs-text-opacity: 1;
        color: rgba(var(--bs-secondary-rgb),var(--bs-text-opacity))  ;
    }

    .cursor-pointer {
        cursor: pointer;
    }
  
    .full-aftk-modal .modal-dialog {
        width: cal(100vw-50px) !important;
        height: 93%;
        padding: 0;
        margin-top:50px;
        margin-bottom:20px;
    }
    
    .full-aftk-modal .modal-content {
        height: 99%;
        overflow-y: auto;
    }
    
    .full-aftk-modal .modal-x {
        --bs-modal-width: 99%;
    }
    .full-aftk-modal .close-btn  {
        margin-top:-10px;
    }

    .header-sticky { position: sticky; top: 0; z-index: 10; background-color: #fff; }
/* Split JS  */
    .split {
        display: flex;
        flex-direction: row;
        height: calc(100vh - 100px);
    }

    .split-pane {
    overflow-y: auto; /* Enables vertical scroll within each pane */
    height: 100%;     /* Make sure each pane takes full height */
    }

 
    .gutter {
    background-color: #eee;
    background-repeat: no-repeat;
    background-position: 50%;
    }

    .gutter.gutter-horizontal {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
    cursor: col-resize;
    } 


    /* Custom CSS to create a gray circle  */
    .icon-circle {
        background-color: #e0e0e0; /* Gray background */
        border-radius: 50%;       /* Makes it a circle */
        width: 40px;              /* Set circle size */
        height: 40px;             
        display: flex;            /* Center the icon */
        align-items: center;      
        justify-content: center;
      }
      .icon-circle i {
        font-size: 20px;          /* Adjust icon size */
        color: #000;              /* Icon color */
      }

 
      .nav-link.has_hover:hover {
        background-color: #f8f9fa; /* Light grey background */
        border-radius: 5px; /* Optional: Add rounded corners */
    }
    

    .p-input { 
        font-size: 0.875rem  ;
        display: block;
        width: 100%;
        padding: .375rem .1rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: var(--bs-body-color);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
     
        background-clip: padding-box;
        border-bottom: var(--bs-border-width) solid var(--bs-border-color);
        
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        margin-bottom: 0rem;
    }

    .p-input.p-block { 
      
        border: var(--bs-border-width) solid var(--bs-border-color) !important;;
        border-radius: var(--bs-border-radius) !important;;
    }
 
    /* using this trick - input will send value  */
    .hidden_area {
        opacity: 0;
        position: absolute;
        width: 1px;
        height: 1px;
    }

    .list-circle {
        margin: 0;
        padding-left: 20px; /* Adjust for proper indentation */
        list-style-type: circle;
    }
    
    .list-circle li {
        margin-bottom: 5px;
    }


 
    .table-fixed {
        table-layout: fixed;
        width: 100%;
    }
    .table-fixed  .truncate {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
 

 

/* https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/css/datepicker.min.css*/
.datepicker{width:-moz-min-content;width:min-content}.datepicker:not(.active){display:none}.datepicker-dropdown{padding-top:4px;position:absolute;z-index:20}.datepicker-dropdown.datepicker-orient-top{padding-bottom:4px;padding-top:0}.datepicker-picker{background-color:#fff;border-radius:4px;display:flex;flex-direction:column}.datepicker-dropdown .datepicker-picker{box-shadow:0 2px 3px hsla(0,0%,4%,.1),0 0 0 1px hsla(0,0%,4%,.1)}.datepicker-main{flex:auto;padding:2px}.datepicker-footer{background-color:#f5f5f5;box-shadow:inset 0 1px 1px hsla(0,0%,4%,.1)}.datepicker-title{background-color:#f5f5f5;box-shadow:inset 0 -1px 1px hsla(0,0%,4%,.1);font-weight:700;padding:.375rem .75rem;text-align:center}.datepicker-controls{display:flex}.datepicker-header .datepicker-controls{padding:2px 2px 0}.datepicker-controls .button{align-items:center;background-color:#fff;border:1px solid #dcdcdc;border-radius:4px;box-shadow:none;color:#363636;cursor:pointer;display:inline-flex;font-size:1rem;height:2.25em;justify-content:center;line-height:1.5;margin:0;padding:calc(.375em - 1px) .75em;position:relative;text-align:center;vertical-align:top;white-space:nowrap}.datepicker-controls .button:active,.datepicker-controls .button:focus{outline:none}.datepicker-controls .button:hover{border-color:#b8b8b8;color:#363636}.datepicker-controls .button:focus{border-color:#3273dc;color:#363636}.datepicker-controls .button:focus:not(:active){box-shadow:0 0 0 .125em rgba(50,115,220,.25)}.datepicker-controls .button:active{border-color:#474747;color:#363636}.datepicker-controls .button[disabled]{cursor:not-allowed}.datepicker-header .datepicker-controls .button{border-color:transparent;font-weight:700}.datepicker-header .datepicker-controls .button:hover{background-color:#f9f9f9}.datepicker-header .datepicker-controls .button:active{background-color:#f2f2f2}.datepicker-footer .datepicker-controls .button{border-radius:2px;flex:auto;font-size:.75rem;margin:calc(.375rem - 1px) .375rem}.datepicker-controls .view-switch{flex:auto}.datepicker-controls .next-button,.datepicker-controls .prev-button{flex:0 0 14.2857142857%;padding-left:.375rem;padding-right:.375rem}.datepicker-controls .next-button.disabled,.datepicker-controls .prev-button.disabled{visibility:hidden}.datepicker-grid,.datepicker-view{display:flex}.datepicker-view{align-items:stretch;width:15.75rem}.datepicker-grid{flex:auto;flex-wrap:wrap}.datepicker .days{display:flex;flex:auto;flex-direction:column}.datepicker .days-of-week{display:flex}.datepicker .week-numbers{display:flex;flex:0 0 9.6774193548%;flex-direction:column}.datepicker .weeks{align-items:stretch;display:flex;flex:auto;flex-direction:column}.datepicker span{-webkit-touch-callout:none;align-items:center;border-radius:4px;cursor:default;display:flex;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.datepicker .dow{font-size:.875rem;font-weight:700;height:1.5rem}.datepicker .week{color:#b8b8b8;flex:auto;font-size:.75rem}.datepicker .days .dow,.datepicker-cell{flex-basis:14.2857142857%}.datepicker-cell{height:2.25rem}.datepicker-cell:not(.day){flex-basis:25%;height:4.5rem}.datepicker-cell:not(.disabled):hover{background-color:#f9f9f9;cursor:pointer}.datepicker-cell.focused:not(.selected){background-color:#e9e9e9}.datepicker-cell.selected,.datepicker-cell.selected:hover{background-color:#3273dc;color:#fff;font-weight:600}.datepicker-cell.disabled{color:#dcdcdc}.datepicker-cell.next:not(.disabled),.datepicker-cell.prev:not(.disabled){color:#7a7a7a}.datepicker-cell.next.selected,.datepicker-cell.prev.selected{color:#e6e6e6}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today){background-color:#f5f5f5;border-radius:0}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover{background-color:#efefef}.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused{background-color:#e9e9e9}.datepicker-cell.today:not(.selected){background-color:#00d1b2}.datepicker-cell.today:not(.selected):not(.disabled){color:#fff}.datepicker-cell.today.focused:not(.selected){background-color:#00ccad}.datepicker-cell.range-end:not(.selected),.datepicker-cell.range-start:not(.selected){background-color:#b8b8b8;color:#fff}.datepicker-cell.range-end.focused:not(.selected),.datepicker-cell.range-start.focused:not(.selected){background-color:#b3b3b3}.datepicker-cell.range-start:not(.range-end){border-radius:4px 0 0 4px}.datepicker-cell.range-end:not(.range-start){border-radius:0 4px 4px 0}.datepicker-cell.range{background-color:#dcdcdc;border-radius:0}.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover{background-color:#d7d7d7}.datepicker-cell.range.disabled{color:#c6c6c6}.datepicker-cell.range.focused{background-color:#d1d1d1}.datepicker-input.in-edit{border-color:#276bda}.datepicker-input.in-edit:active,.datepicker-input.in-edit:focus{box-shadow:0 0 .25em .25em rgba(39,107,218,.2)}