/* *******************************************************************
  * common styles used in Suresh's pages
  * ********************************************************************
  */
 
       :root {
            --primary-color: #003366;
            --secondary-color: #f4f6f9;
            --text-color: #333333;
            --accent-color: #0066cc;
        }
        body {
            font: normal, Verdana, Arial, sans-serif;
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            margin: 0;
            padding: 0;
            background-color: #fff;
        }
        header {
            background: var(--primary-color);
            color: #fff;
            padding: 2rem 0;
            text-align: center;
        }
        header h1 {
            margin: 0 0 0.5rem 0;
        }
        nav {
            background: #002244;
            color: #fff;
            padding: 0.5rem 0;
            text-align: center;
        }
        nav a {
            color: #fff;
            margin: 0 1rem;
            text-decoration: none;
            font-weight: bold;
        }
        nav a:hover {
            text-decoration: underline;
        }
        .container {
            max-width: 1000px;
            margin: 2rem auto;
            padding: 0 1rem;
        }
        section {
            margin-bottom: 2.5rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid #eaeaea;
        }
        h2 {
            color: var(--primary-color);
        }
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-top: 1rem;
        }
        .card {
            background: var(--secondary-color);
            padding: 1.5rem;
            border-radius: 5px;
            border-left: 4px solid var(--accent-color);
        }
        .card h3 {
            margin-top: 0;
        }
        footer {
            text-align: center;
            padding: 1.5rem 0;
            background: var(--primary-color);
            color: #fff;
            margin-top: 2rem;
        }
        a.btn {
            display: inline-block;
            background: var(--accent-color);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 3px;
            text-decoration: none;
            margin-top: 0.5rem;
        }
        a.btn:hover {
            background: #004d99;
        } 
 
  .inline-img {
    float: right;              /* Flows text around the image */
    margin-right: 15px;
    margin-bottom: 5px;
    border-radius: 4px;
    height:10vw; 
  }
  
  .caption {
    font-style: italic;
    color: #555;
    font-size: 0.9rem;
    margin-top: 8px;
    display: block;
    }
    
  .text-img {
    float: right;              /* Flows text around the image */
    margin-right: 15px;
    margin-bottom: 5px;
    border-radius: 4px;
    height:1vw; 
  }    

   .important {
    font-weight: bold;
}
.warning {
    color: red;
}


#rotateDIV {
  height:10%;
  width: 10%;
  background-color:#FFFFFF;
  writing-mode: vertical-lr;
  text-orientation: mixed;
}

.customButton {     /* style a link as a push-button */
    display: inline-block; 
    width: 20ch; 
    line-height: 2em;
    font-size: 2em;
    font-family: "Times New Roman", Times, serif;
    text-align: center;
    color: black; 
    background: -webkit-linear-gradient(white,#eeeeee,#eeeeee,#e0e0e0);
    background: linear-gradient(white,#eeeeee,#eeeeee,#e0e0e0);
    text-decoration: none; 
    border: 1px solid gray;   /* use pixel unit here */
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);    
}
        
.customButton:active {
    background: -webkit-linear-gradient(#909090,#808080,#808080,#707070);
    background: linear-gradient(#909090,#808080,#808080,#707070);    
}

.customLargeButton {     /* style a link as a push-button */
    display: inline-block;
    width: 25ch;
    line-height: 2.5vmin;
    font-size: 2vmin;
    font-family: "Times New Roman", Times, serif;
    text-align: center;
    vertical-align: middle;
    color: black; 
    background: -webkit-linear-gradient(white,#eeeeee,#eeeeee,#e0e0e0);
    background: linear-gradient(white,#eeeeee,#eeeeee,#e0e0e0);
    text-decoration: none; 
    border: 1px solid gray;   /* use pixel unit here */
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);    
}
        
.customLargeButton:active {
    background: -webkit-linear-gradient(#909090,#808080,#808080,#707070);
    background: linear-gradient(#909090,#808080,#808080,#707070);    
}

.customLargeButtonDisabled {     /* style a link as a push-button */
    display: inline-block;
    width: 25ch;
    line-height: 2.5vmin;
    font-size: 2vmin;
    font-family: "Times New Roman", Times, serif;
    text-align: center;
    vertical-align: middle;
    color: grey; 
    background: -webkit-linear-gradient(white,#eeeeee,#eeeeee,#e0e0e0);
    background: linear-gradient(white,#eeeeee,#eeeeee,#e0e0e0);
    text-decoration: none; 
    border: 1px solid gray;   /* use pixel unit here */
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);    
}
        
.customHelpButton {     /* style a link as a push-button */
    display: inline-block;
    width: 2vmin; 
    line-height: 2vmin; 
    font-size: 1.5vmin;
    font-family: "Times New Roman", Times, serif;
    text-align: center;
    vertical-align: middle;
    color: black; 
    background: -webkit-linear-gradient(white,#eeeeee,#eeeeee,#e0e0e0);
    background: linear-gradient(white,#eeeeee,#eeeeee,#e0e0e0);
    text-decoration: none; 
    border: 1px solid gray;   /* use pixel unit here */
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);    
}
 
 
.customHelpButton {     /* style a link as a push-button */
    display: inline-block;
    width: 3vmin; 
    line-height: 3vmin; 
    font-size: 1.5vmin;
    font-family: sans-serif; 
    text-align: center;
    vertical-align: middle;
    color: black; 
    background: -webkit-linear-gradient(white,#eeeeee,#eeeeee,#e0e0e0);
    background: linear-gradient(white,#eeeeee,#eeeeee,#e0e0e0);
    text-decoration: none; 
    border: 1px solid gray;   /* use pixel unit here */
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);    
}
        
.customHelpButton:active {
    background: -webkit-linear-gradient(#909090,#808080,#808080,#707070);
    background: linear-gradient(#909090,#808080,#808080,#707070);    
}

a.disabled-link {
  pointer-events: none; /* Disables mouse clicks and taps */
  cursor: default;      /* Changes the cursor from a hand pointer */
  color: gray;          /* Styles the link to look disabled */
  text-decoration: none; /* Removes underline */
}


p {
  font-size: 1.5vmin;
}

p img {
  height: 2vmin;
  width: auto;
  vertical-align:middle
}

input {
    font-size: 1.5vmin;
}

checkbox {
    font-size: 1.5vmin;
    line-height: 3vmin; 
}

.inputvertrange-wrapper{
    display:flex;
    align-items:center;
    justify-content:left;
    width:5px; /* fixed width */
    height:6vmin;
}

.inputvertrange-wrapper > input{
    transform:rotate(-90deg);
}

input[type=range][orient=vertical] {
    writing-mode: vertical-lr;
    direction: rtl;
    appearance: slider-vertical;
    width: 3px;
    height:5vmin;
    vertical-align: center;
    align-items:center;
    justify-content:left;
}

/* For Chrome, Safari, Edge, Opera */
input.no-spinners::-webkit-outer-spin-button,
input.no-spinners::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* For Firefox */
input.no-spinners {
  -moz-appearance: textfield;
}