@font-face {
  font-family: 'DyslexicFont';
  src: url('../fonts/open_dyslexic/OpenDyslexicAlta-Bold.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
.header-div {
  position: absolute; /*fixed; */
  top: 0;
  left: 0;
  width: 100%;
  background-color: #000080;
  color: #fff;
  padding: 5px 10px;
  box-sizing: border-box;
  z-index: 1000; /* Ensure it's above other content */
}
.bodydiv{
  overflow-y: scroll; 
  height:550px;
  margin-top: 30px; 
}
.titleStyle{
  color:#ffffff;
  font-weight: bold;
  font-size: 18px;
}
.titleStyle1{
  color:#000000;
  font-weight: bold;
  font-size: 16px;
  text-decoration: underline;
  padding: 10px 0 10px 0;
  
}
.accessText{
  margin-left: 10px;
}
.main-div{
  width: 100%;
}
.left-div{
  width: 50%; height: 100px; float: left; background: white;
}
.right-div{
  margin-left: 50%; height: 100px; background: white;
}
.pill-text{
  width: 167px;
  text-align: center;
}
.pill-text1{
  width: 102px;
  text-align: center;
}
.spacing-button{
  width:30px;
  height: 30px;
}
/***********************header div ********************************/
.wrapper {
  height:50px;
  display: flex;
  flex-flow: row wrap;   
}
.wrapper div {
  margin: auto;
  /* border:1px solid yellow; */
  text-align: left;
}
.fixed-div {
  width:40px;
  height: 40px;
  /* background:green; */
}
.fluid-div {
  flex: 1;
  height: 40px;
  /* background:red; */
}
/************************refresh******************************/
.refresh-button {
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.refresh-button svg {
  width: 100%;
  height: 100%;
}

/* Animation styles */
.rotate {
  animation: rotateAnimation 1s linear infinite;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


/****************inputgroup btton style*********************************/
.input-group {
  display: flex;
  align-items: center;
}

.input-group input[type="button"] {
  width: 30px;
  height: 30px;
  background-color: #000080; /* Change button color here */
  color: white; /* Text color */
  border: none; /* Remove default border */
  cursor: pointer;
  border-radius: 0;
}

.input-group input[type="number"] {
  width: 150px;
  height: 30px;
  text-align: center;
  border: 2px solid #000080;
  border-radius: 0;
}
/*****************pill radion button style*********************/
label.radiobtn {
  display: inline-block;
  cursor: pointer;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  margin-bottom: 0.375em;
}

label.radiobtn input {
  position: absolute;
  left: -9999px;
}

label.radiobtn input:checked+span {
  background-color: #d6d6e5;
}

label.radiobtn input:checked+span:before {
  box-shadow: inset 0 0 0 0.4375em #000080;
}

label.radiobtn span {
  display: flex;
  align-items: center;
  padding: 0.375em 0.75em 0.375em 0.375em;
  border-radius: 99em;
  transition: 0.25s ease;
}

label.radiobtn span:hover {
  background-color: #d6d6e5;
}

label.radiobtn span:before {
  display: flex;
  flex-shrink: 0;
  content: "";
  background-color: #fff;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  margin-right: 0.375em;
  transition: 0.25s ease;
  box-shadow: inset 0 0 0 0.125em #000000;
}
/*************************pill radio button style -2************************************************/
 /* Hide the default radio button */
 input[type="radio"].pillbtn {
  display: none;
}

/* Style for the custom radio button container */
.radio-container {
  display: inline-block;
  border-radius: 20px; /* Adjust the border radius to create a pill shape */
  overflow: hidden;
  border: 2px solid #000000; /* Border color */
  margin-right: 10px; /* Add spacing between buttons */
}

/* Style for the radio button label */
.radio-label {
  display: block;
  padding: 12px 20px; /* Adjust padding to make the pill button bigger */
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  color: #000000;
  text-align: center;
  transition: background-color 0.3s ease;
}

/* Style for the radio button when checked */
input[type="radio"].pillbtn:checked + .radio-container .radio-label {
  background-color: #000080; /* Change background color when checked */
  color: #fff; /* Change text color when checked */
}
/********************pill checkbox style ********************************/
.PillList-item {
  cursor: pointer;
  display: inline-block;
  /* float: left; */
  font-size: 14px;
  font-weight: bold;
  line-height: 25px;
  margin: 0 12px 12px 0;
  text-transform: capitalize;
}

.PillList-item input[type="checkbox"] {
  display: none;
}
.PillList-item input[type="checkbox"]:checked + .PillList-label {
  background-color: #000080;
  border: 2px solid #000080;
  color: #fff;
  padding-right: 25px;
  padding-left: 25px;
}
.PillList-label {
  border: 2px solid #000000;
  border-radius: 20px;
  color: #000000;
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  
}
/**********************************************/
input[type="radio"].custom {
    display: none;
  }
  
  .titleBg {
    display: inline-block;
    position: relative;
    width: 10px;
    /* height: 10px; */
    margin: 20px;
    cursor: pointer;
  }
  
  .titleBg span {
    display: block;
    position: absolute;
    width: 35px;
    height: 35px;
    padding: 0;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 100%;
    background: #eeeeee;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    transition: ease .3s;
  }
  
  .titleBg span:hover {
    padding: 5px;
  }
  
  .orange .titleBg span {
    background: #FF5722;
  }
  
  .amber .titleBg span {
    background: #FFC107;
  }
  
  .lime .titleBg span {
    background: #8BC34A;
  }
  
  .teal .titleBg span {
    background: #009688;
  }
  
  .blue .titleBg span {
    background: #2196F3;
  }
  
  .indigo .titleBg span {
    background: #3F51B5;
  }

  .bodyBg {
    display: inline-block;
    position: relative;
    width: 10px;
    /* height: 10px; */
    margin: 20px;
    cursor: pointer;
  }
  
  .bodyBg span {
    display: block;
    position: absolute;
    width: 35px;
    height: 35px;
    padding: 0;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 100%;
    background: #eeeeee;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    transition: ease .3s;
  }
  
  .bodyBg span:hover {
    padding: 5px;
  }
  
  .orange .bodyBg span {
    background: #FF5722;
  }
  
  .amber .bodyBg span {
    background: #FFC107;
  }
  
  .lime .bodyBg span {
    background: #8BC34A;
  }
  
  .teal .bodyBg span {
    background: #009688;
  }
  
  .blue .bodyBg span {
    background: #2196F3;
  }
  
  .indigo .bodyBg span {
    background: #3F51B5;
  }

  .textBg {
    display: inline-block;
    position: relative;
    width: 10px;
    /*height: 10px;*/
    margin: 20px;
    cursor: pointer;
  }
  
  .textBg span {
    display: block;
    position: absolute;
    width: 35px;
    height: 35px;
    padding: 0;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 100%;
    background: #eeeeee;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    transition: ease .3s;
  }
  
  .textBg span:hover {
    padding: 5px;
  }
  
  .orange .textBg span {
    background: #FF5722;
  }
  
  .amber .textBg span {
    background: #FFC107;
  }
  
  .lime .textBg span {
    background: #8BC34A;
  }
  
  .teal .textBg span {
    background: #009688;
  }
  
  .blue .textBg span {
    background: #2196F3;
  }
  
  .indigo .textBg span {
    background: #3F51B5;
  }
/******************rmove inc/dec icon form input field*********************/
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
}

input[type=number] {
 -moz-appearance: textfield;
}
/**************tooltip***************************/
.tooltip {
    position: absolute;
    display: none;
    background-color: #333;
    color: white;
    padding: 5px;
    border-radius: 5px;
    z-index: 1;
  }
  /************** toggle button********************************/
  .switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000080;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #000080;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #000080;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 24px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }
/**************fixed button***********************/
.containerFloat {
  width: 60px;
  height: 60px; /* Adjust height to match the width for a perfect circle */
  position: fixed;
  right: 15px;
  top: 85%;
  border-radius: 50%; /* Makes the div rounded */
  background-color: lightgray; /* Just for visualization */
  z-index: 1000;
  overflow: hidden; /* Ensure the icon doesn't overflow if the div size changes */
}

.fixeddiv {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.floaticon {
  width: 80%; /* Adjust the size of the icon */
  height: 80%;
  background-color: #000080; /* Background color of the icon */
  border-radius: 50%; /* Makes the icon rounded */
  position: relative;
}

.floaticon::before,
.floaticon::after {
  content: '';
  position: absolute;
  background-color: white; /* Color of the plus symbol */
}

.floaticon::before {
  width: 60%;
  height: 10%;
  top: 45%;
  left: 20%;
}

.floaticon::after {
  width: 10%;
  height: 60%;
  top: 20%;
  left: 45%;
}

.fixedButton {
    display: none; /* Initially hide the button */
    position: fixed;
    top: 500px;
    left: 60px;
    z-index: 1000;
    background: #000080;
    color: white;
    border: #000080;
}
/*************************************************************/
.gg-close {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 22px;
    height: 22px;
    border: 2px solid transparent;
    border-radius: 40px;
  /* margin-left: 340px; */
  margin-top: 40px;
}
.gg-close::after,
.gg-close::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 25px;
    height: 2px;
    background: currentColor;
    transform: rotate(45deg);
    border-radius: 5px;
    /* top: -25  px; */
    bottom: 45px;
    left: 10px
}
.gg-close::after {
    transform: rotate(-45deg)
}
/***********************************************/
#tb.table td, table th {
     padding: 5px; 
     line-height: 0.5; 
     vertical-align: top; 
     border: 1px solid hsla(0,0%,50.2%,.5019607843); 
}
#color-changer-container {
    font-family: Arial, sans-serif;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

#color-changer-container label {
    /* display: block; */
    margin-bottom: 5px;
}

#color-changer-container button {
    margin-top: 10px;
}

/* Hide color picker */
#color-changer-container input[type="color"] {
    display: none;
}

/* Add a preview area for demonstration */
#color-changer-container h1 {
    margin-bottom: 20px;
}

#color-changer-container #color-preview {
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
}


div.amimation{
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
  }
  
  @keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
  }

/**********************************************************/
body.dark-contrast *{
    background-color: #333;
    color: #fff;
}

/* body.light-contrast *{
    background-color: #fff;
    /* color: #585656;   
}
.light-contrast-heading *{
    /* background-color: #fff;  
    color: #075f39;
} */
.light-contrast *{
  background-color: #ffffff; /* White background */
  color: #000000; /* Black text color */
}
 
/* Style links to be orange */
.light-contrast a {
  color: #ff7f00; /* Orange color for links */
}


body.monochrome-contrast *{
    filter: grayscale(100%);
}

body.highcat-contrast *{
    filter: saturate(125%);
    
}

body.highsaturation-contrast *{
    filter: saturate(115%) ;
}

body.lowsaturation-contrast *{
  /* filter: saturate(10%); */
    filter: saturate(95%);
}
/**********************************************************/

body.text-txtLeft * {
    text-align: left;
}

body.text-txtRight * {
    text-align: right;
}

body.text-txtCenter * {
    text-align: center;
}
/************************accessbilty mode*******************************************/


/* Visual Impairment Styles */
body.visual-impairment-mode *{
    /*background-color: #f4f4f4; /* Adjust background color for better contrast */
    /*color: #000; /* Adjust text color for better readability */
    font-family: Arial, Helvetica, sans-serif !important;
    filter: saturate(110%);
}

/* Additional Styles for Visual Impairment Mode */
body.visual-impairment-mode h3 *{
    font-size: 1.0em; /* Increase heading font size for better visibility */
}

body.visual-impairment-mode p *{
    line-height: 0.6; /* Adjust line height for better readability */
}

/* Epilepsy Safe Mode Styles */
body.epilepsy-safe-mode *{
   /* background-color: #fff; /* Set a plain background color */
    /*color: #000; /* Set a plain text color */
    filter: saturate(95%);
    animation: none; /* Disable any animations that might be present */
}

/* Additional Styles for Epilepsy Safe Mode */
body.epilepsy-safe-mode h3 *{
    font-size: 1.0em; /* Adjust heading font size for better visibility */
}

body.epilepsy-safe-mode p *{
    line-height: 1.6; /* Adjust line height for better readability */
}
body.epilepsy-safe-mode * {
    animation: none !important;
}
body.no-animation img *{
    animation: none !important;
}

/* Cognitive Disability Mode Styles */
body.cognitive-disability-mode *{
    font-family: Arial, sans-serif; /* Use a simple, easy-to-read font */
    line-height: 1.6; /* Increase line height for better readability */
    background-color: #f4f4f4; /* Set a plain background color */
    color: #333; /* Set a plain text color */
    animation: none; /* Disable any distracting animations */
}

/* Additional Styles for Cognitive Disability Mode */
body.cognitive-disability-mode h3 *{
    font-size: 1.5em; /* Adjust heading font size for better visibility */
}

body.cognitive-disability-mode p *{
    font-size: 1em; /* Adjust paragraph font size */
}
/**********************************************************************************/
body.FontFamily-mode *{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Add fallback fonts in case the preferred ones are not available */
    font-size: 18px; /* Adjust the base font size as needed */
    line-height: 1.6;
    /*color: #333;  Set a comfortable text color */
}

body.FontFamily-mode h1, h2, h3, h4, h5, h6 *{
    /* Style headings for better hierarchy and readability */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
}

/* Additional styling for better readability */
body.FontFamily-mode p *{
    margin-bottom: 1.2em; /* Add space between paragraphs for better visual separation */
}

body.FontFamily-Dyslexia-mode *{
    font-family: 'DyslexicFont', sans-serif; /* Use a dyslexia-friendly font */
    /* font-size: 14px; */
    line-height: 1.5;
    /*color: #333;
    /*background-color: #fff; /* White background for better contrast */
}

body.FontFamily-Dyslexia-mode h1, h2, h3, h4, h5, h6 *{
    font-family: 'DyslexicFont', sans-serif;
    font-weight: bold;
}

/* Additional styling for better readability */
body.FontFamily-Dyslexia-mode p *{
    font-family: 'DyslexicFont', sans-serif;
    margin-bottom: 1.2em; /* Add space between paragraphs for better visual separation */
}

.adha-mode {
    /* Add styles specific to the adha mode here */
    /* For example, adjust font sizes, colors, backgrounds, etc. */
      
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
}
/**********************************************************************/
body.dark-cursor-enabled * {
    /* cursor: url('../img/darkCoursor.png'), auto; */
    cursor: url('../img/dark-cursor.svg'), auto;
}

body.light-cursor-enabled *{
    /* cursor: url('../img/lightCoursor.png'), auto; */
    cursor: url('../img/light-cursor.svg'), auto;
}
/*********************************************************/
.cursorLine {
  width: 150px;
  display: flex;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 90%;
  pointer-events: none;
  z-index: 1000000;
  height: 12px;
  border-radius: 4px;
  background-color: rgba(91, 91, 91, 0.91);
  border: 2px solid rgba(91, 91, 91, 0.71);
  display: none;
}

.cursorLine::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid rgba(91, 91, 91, 0.91);
  margin-top: -10px;
  margin-left: 60px;
  position: absolute;
}

.readingMask {
  filter: brightness(150%);
  width: 100vw;
  box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.75);
  height: 130px;
  pointer-events: none;
  position: absolute;
  z-index: 20000;
  padding:0px;
  display: none;
}
.cognitive-mode-bold {
  font-weight: bold;
}
.cognitive-mode-light {
  font-weight: lighter;
}

.heading-highlight {
    border: 2px solid #007BFF; /* Adjust the color and thickness as needed */
    padding: 5px;  /*Optional: Add padding to the box */
    display: inline-block;
}
/***************************************************************/
.stop-animation {
    animation-play-state: paused !important; /* Pause animations */
    /* Or you can reset animations by setting them to initial state */
    /* animation: none !important; */
}