/*-------------------------------------------------------------------------------------*/
/*-https://www.cssportal.com/css-box-shadow-generator/*/
.box-shadow1px {
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1), 3px 3px 10px 0px rgba(0, 0, 0, 0.05);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px; /*border-radius: 30px;*/
}
/*-------------------------------------------------------------------------------------*/
/*Want the user to know they can interact with the whole box, 
you can add this simple CSS to change the cursor when they hover over the date input*/
input[type="date"] {
    cursor: pointer;
}
/* 01-05-26 1005am The CSS Magic
   This CSS handles the positioning and the "pop-up" effect.*/
/* The container needs relative positioning so the image pops up nearby */
/*Option A: Full Width (Best for standard forms)
  If your other labels take up the full line, add display: block to the container.*/
.hover-container {
    position: relative;
    /*display: inline-block;*/
    display: block; /* Change from inline-block to block */
    width: 100%; /* Ensures it matches the width of other form elements */
    cursor: help;
}
/*Option B: Flexbox (Best for side-by-side labels/inputs)
  If you are using a flex layout, use flex-grow to make sure it fills the available space.*/
/*.hover-container {
    position: relative;
    display: flex;
    flex-direction: column; *//* Keeps label above the image logic */
    /*flex: 1;*/                /* Forces it to grow and fill space like its neighbors */
  /*  cursor: help;
}*/
.hover-image {
    /* Use opacity instead of display:none */
    opacity: 0;
    visibility: hidden;
    /* Positioning */
    position: absolute;
    z-index: 100;
    top: 110%; /* Places it slightly below the text */
    left: 0;
    width: 250px;
    /* The Animation Magic */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-out;
    transform: translateY(10px); /* Starts slightly lower for a "float up" effect */
    /* Styling */
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* On Hover: Fade in and slide up to its final position */
.hover-container:hover .hover-image {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/*Updated CSS Tip
  To ensure your label text still looks correct inside the container, 
  you might also want to ensure the label itself is set to block:*/
.hover-container label {
    display: block;
    width: 100%;
}
/*  Visual Feedback for the UserTo make it obvious that the image is clickable, 
	add a "hover" effect in your CSS. This prevents users from being confused 
	about how to change their photo.CSS*/
.img-hover-update {
    transition: transform 0.2s, opacity 0.2s;
}

.img-hover-update:hover {
  transform: scale(1.05);
  opacity: 0.8;
  border: 2px solid #0d6efd; /* Bootstrap Primary Color */
}

/*===============================================================================*/
/* opacity and border-shadow on hover*/
.opacity {
    opacity: 0.8;
    cursor: pointer;
}
.opacity:hover {
   opacity: 1;
   box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
/*  ==================== For .directory-tree _DirectoryNode.cshtml         =====================*/
/*  CSS Make folder names look clickable */
.folder {
    cursor: pointer;
    user-select: none; /* Prevents text selection when clicking */
}

/* Hide all sub-lists by default */
li ul {
    display: none;
}

/* When a list item has the 'expanded' class, show its direct sub-list */
li.expanded > ul {
    display: block;
}

/* Optional: Add a rotating arrow icon for a classic tree view look */
.folder::before {
    content: '\f285'; /* Bootstrap Icons: caret-right-fill */
    font-family: 'bootstrap-icons';
    font-size: 0.8em;
    margin-right: 6px;
    display: inline-block;
    transition: transform 0.2s ease-in-out;
}

li.expanded > span.folder::before {
    transform: rotate(90deg);
}

/*------------------------------------------------------------------------------*/
/*  ======================================================================
    08-07-25 920am
        Create a Views/Directory/Index.cshtml file:
        This file sets up the two-pane layout and includes the JavaScript for interactivity.

*/
.directory-tree ul {
    list-style-type: none;
    padding-left: 20px;
}

.directory-tree .folder {
    cursor: pointer;
}

.directory-tree .folder::before {
   content: '\F3C1'; /* Bootstrap icon: folder */
   font-family: 'bootstrap-icons';
   margin-right: 5px;
}

.directory-tree .folder.open::before {
     content: '\F3C2'; /* Bootstrap icon: folder2-open */
}

.directory-tree .file::before {
    content: '\F328'; /* Bootstrap icon: file-earmark-text */

    font-family: 'bootstrap-icons';
    margin-right: 5px;
}

.directory-tree .file a {
    text-decoration: none;
}

.directory-tree ul {
   display: none; /* Sub-folders are hidden by default */
}
.directory-tree ul.toplevel {
  display: block; /* The top-level folder is visible */
}

#file-content-display {
    white-space: pre-wrap; /* Allows text to wrap */
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 15px;
    height: 80vh;
    overflow-y: auto;
}
/*===============*/
/*Creating a Line*/
.form-line {
    border-bottom: 1px solid #ced4da; /* A standard Bootstrap gray line */
    height: 30px;                     /* Gives some space to write on */
    padding-top: 5px;                 /* Aligns text a bit better */
} 
/**==========================================================================================**/
 

/*This is a customise context menu.  customContextMenu */
.custom-context-menu {
    display: none; /* Hidden by default */
    position: absolute;
    z-index: 1000;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    font-family: sans-serif;
}

.custom-context-menu ul {
   list-style: none;
   padding: 5px 0;
   margin: 0;
}

.custom-context-menu ul li {
   padding: 8px 15px;
    cursor: pointer;
}

.custom-context-menu ul li:hover {
   background-color: #e9e9e9;
}
/* Roster/SearchRosterComment Images*/
.ProfileImage {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border: 1px solid #ddd; /* Gray border */
    border-radius: 50%; /* Rounded border */
    padding: 5px; /* Some padding */
}

.ProfileImage:hover {
   box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
   -moz-box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
   -o-transform: scale(1.5); /* Opera */
   -moz-transform: scale(1.5); /* Firefox */

   -ms-transform: scale(1.5); /* IE 9 */
   -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(1.5);
}
/*--------------------------------------------------------------------------*/
.Left-element-40 {
    margin: 0px 0px 0px 40px; /* top right bottom left */
    /* or margin: 10px 20px; (top/bottom, left/right) */
}
.Left-element-30 {
    margin: 0px 0px 0px 30px; /* top right bottom left */
    /* or margin: 10px 20px; (top/bottom, left/right) */
}
.Left-element-20 {
    margin: 0px 0px 0px 20px; /* top right bottom left */
    /* or margin: 10px 20px; (top/bottom, left/right) */
}
.Left-element-10 {
    margin: 0px 0px 0px 10px; /* top right bottom left */
    /* or margin: 10px 20px; (top/bottom, left/right) */
}
.Left-element-5 {
    margin: 0px 0px 0px 5px; /* top right bottom left */
    /* or margin: 10px 20px; (top/bottom, left/right) */
}
/*--------------------------------------------------------------------------*/
/* Hide print button on print */
@media print {
    .print-button, #goTopBtn {
        display: none;
    }
    /* Ensure main content is visible and fills page */
    body {
        margin: 0 !important; /* Remove body margins for print */
        padding: 0 !important;
        background-color: white !important;
    }

    .container, .px-4, .mx-auto { /* Ensure Bootstrap container and centering classes work */
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    table {
        width: 100% !important;
        border-collapse: collapse; /* Ensure table borders are nice */
    }

    th, td {
        border: 1px solid #ccc !important;
        padding: 8px !important;
    }
}

/*-------------------------------------------------------------------------------------------*/
/* Add the Print CSS for printing DataTable content.
	This title will be hidden on the screen and only visible when printing */
.print-only-title {
    display: none;
}

/* --- STYLES THAT APPLY ONLY WHEN PRINTING --- */
@media print {
    /* Hide every element on the page by default */
    body * {
        visibility: hidden;
    }

    /* Now, make the printable area and everything inside it visible again */
    #printableArea, #printableArea * {
        visibility: visible;
    }

    /* Make the print-only title visible */
    .print-only-title {
        display: block; /* Change from none to block */
        text-align: center;
        margin-bottom: 20px;
    }

    /* Position the printable area to take up the whole print page */
    #printableArea {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

        /* Optional: Remove box-shadow and borders for a cleaner print #printableArea .mb-5 {*/
        #printableArea .mb-5 {
            box-shadow: none !important;
            border: none !important;
        }

        /* Optional: Ensure table borders are visible for printing */
        #printableArea table, #printableArea th, #printableArea td {
            border: 1px solid #dee2e6 !important;
        }
 
}


/*===========================================================================================*/
/*Toggle Switch
  -https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
   opacity: 0;
   width: 0;
   height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
   position: absolute;
   content: "";
   height: 26px;
   width: 26px;
   left: 4px;
   bottom: 4px;
   background-color: white;
   -webkit-transition: .4s;
   transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
        border-radius: 50%;
}

/*================================================================*/
/* Custom styles for the form container */
/*.Seatform-container {
    background-color: lightgrey;
    width: 500px;
    height: 500px;
    border: 15px solid green;
    padding: 50px;
    margin: 20px;*/ /* User-provided margin */
    /* Flexbox for centering content horizontally and vertically */
    /*display: flex;
    justify-content: center;*/ /* Centers horizontally */
    /*align-items: center;*/ /* Centers vertically */
    /* Apply Tailwind-like rounded corners as per instructions */
    /*border-radius: 1.5rem;*/ /* rounded-xl equivalent */
    /* Ensure Inter font as per instructions, with fallback */
    /*font-family: "Inter", sans-serif;
}*/
.Seatform-container {
    background-color: lightgrey;
    background-color: white;
    width: 600px;
    height: 500px;
    border: 15px solid green;
    padding: 50px;
    /* margin: 20px; removed specific margin to let Seatbody handle centering, but could be reintroduced */
    /* Flexbox for centering content horizontally and vertically inside this container */
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    /* Aesthetic enhancements as per instructions */
    border-radius: 1.5rem; /* rounded-xl equivalent */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: transform 0.3s ease; /* Smooth hover effect */
}
.Seatform-container:hover {
    transform: translateY(-5px); /* Lift effect on hover */
}

/* Style for the large font text */
/*.Seatlarge-font-text {
    font-size: 90px;*/ /* User-provided font size */
    /*font-weight: bold;*/ /* Make it stand out */
    /*color: #333;*/ /* Darker color for contrast */
    /*text-align: center;*/ /* Ensure text is centered within its own span */
    /* Add some shadow for depth (Tailwind-like) */
    /*text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}*/
.Seatlarge-font-text {
    font-size: 90px;
    font-size: 150px;
    font-weight: bold;
    color: #2c3e50; /* Darker color for good contrast */
    color: black;
    text-align: center;
    /* Add some shadow for depth */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.15);
    /* Ensure Inter font if that's your standard, or pick an appropriate one */
    /*font-family: "Georgia", serif;  Keeping your Georgia font */
    font-family: Georgia;
    font-family: Arial Black;/**/
}

/* Basic body styling to center the entire container on the page */
.Seatbody {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    min-height: calc(100vh - 100px); /* Adjust based on your header/footer height */
    /* Using calc for min-height to account for top/bottom margins/headers/footers */
    margin: 0; /* Remove default body margins if any */
    background-color: #f8f8f8; /* Light background for visibility */
    background-color: white; /* Light background for visibility */

    /*min-height: 100vh;  Full viewport height */
    /*margin: 0;  Remove default body margins if any */
    /*background-color: #f0f0f0;  Light background for the page */
}
/* Responsive adjustments (optional but good practice) */
@media (max-width: 600px) {
    .Seatform-container {
        width: 90vw; /* Use viewport width for smaller screens */
        height: 90vw; /* Keep aspect ratio roughly square */
        padding: 10px;
        border-width: 5px; /* Thinner border */
        margin: 10px;
    }

    .Seatlarge-font-text {
        font-size: 15vw; /* Scale font with viewport width */
    }
}
/*================================================================*/
/* For Refresh buttons In site.css */
.refresh-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 100; /* Ensure they are above other content if overlapping */
}

#btnRefreshLeft {
    position: absolute;
    left: -5px; /* Adjust as needed */
    top: 270px; /* Adjust as needed, relative to the parent with position:relative */
}

#btnRefreshRight {
    position: absolute;
    right: -2px; /* Adjust as needed */
    top: 270px; /* Adjust as needed, relative to the parent with position:relative */
}

/* Initially hide the container for the buttons */
#refreshButtonsContainer {
    display: none; /* This will be toggled by JS */
    /* If using absolute positioning for child icons, this parent needs position: relative; */
    /* position: relative; */ /* Add this to a parent div if you want icons absolutely positioned relative to it */
}
/*---------------------------------------------------------------------------------------------------------------*/
/**
    To make your comment wrap within a 300px by 300px box with a solid border, 
    you'll need to apply some CSS to the <dd> element that contains the comment.*/
.comment-box {
    width: 100%;
    height: 90px;
    /*border: 1px solid #000;  Adjust color as needed */
    padding: 10px;
    overflow-wrap: break-word; /* This ensures long words wrap */
    overflow-y: auto; /* Adds a scrollbar if content overflows */
    text-align:center;
}


/*===================For slideout menu on index=========================================*/
@media (min-width:576px) {
    .dropdown:hover > .dropdown-menu {
        display:block;
        margin-top:0;
    }
}
/* In your style.css file 
    To remove bullet points from a list using CSS, the list-style-type property is employed.
*/
ul {
    list-style-type: none;
}
ul {
    list-style-type: none; /* Removes bullet points */
    padding: 0; /* Removes default padding */
    margin: 0; /* Removes default margin */
}

/* Slide Out Style  Right side*/
.rp_list {
    font-family: Verdana, Helvetica, sans-serif;
    position: fixed;
    right: -220px; /*right: 0px;*/ /* Changed from -220px to 0 so it stays on screen */ /*right: -220px;*/
    top: 90px; /*  top: 140px; top: 40px; top: 120px; */
    margin: 0;
    padding: 0;
    z-index: 500; /* z-index: 500;*/
}

/* Slide Out Style  Right side*/
/*.rp_list {
    position: fixed;
    left: 0px;*/ /* Use left instead of right */
   /* right: auto;
    top: 140px;
    z-index: 500;
}*/

/*.rp_list ul li div {*/
  /* Flip the rounded corners for the left side */
 /* border-radius: 0px 5px 5px 0px;
}*/

/*span.rp_shuffle {
    background: #222 url(../img/shuffle.png) no-repeat 10px 50%;
    background: #fff url(../img/shuffle.png) no-repeat 10px 50%;
    width: 28px;
    height: 14px;
    display: block;
    margin: 10px 0px 0px 20px;
    cursor: pointer;
    padding: 4px;
    border: 1px solid #000;
    -moz-border-radius: 5px 0px 0px 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}*/

/*To replace a background image (shuffle.png) with a Bootstrap Icon (bi-shuffle), 
you have to change your approach. */
span.rp_shuffle {
    background: #222; /* Removed the image URL */
    width: 35px; /* Slightly wider to fit the icon comfortably */
    height: 35px; /* Made square for better icon centering */
    display: flex; /* Use flexbox to center the icon */
    align-items: center;
    justify-content: center;
    margin: 10px 0px 0px 0px;
    cursor: pointer;
    border: 1px solid #000;
    color: #fff; /* Icon color */
    font-size: 1.2rem; /* Icon size */
    /* Kept your existing border radius for the tab look */
    border-radius: 5px 0px 0px 5px;
}
span.rp_shuffle:hover {
  background: #444; /* Add a hover effect since it's a button */
}


.rp_list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rp_list ul li {
  width: 240px;
  margin-bottom: 5px;
  display: block; /* Changed from none to block */

        /*display: none;*/ /* This needs to be handled by your JS for slideout functionality */
        /*display: block;  LC*/
}

/* Ensure the container of the text doesn't cut off your buttons */
.rp_list ul li div {
   display: block;
   line-height: 15px;
   width: 240px;
   height: 85px; /* Changed height to min-height to allow content to expand */
   /*min-height: 100px;*/ /* Increased from 80px to fit your buttons comfortably */
   background: #333;
   border: 1px solid #000;
   border-radius: 5px 0px 0px 5px;
  
   -moz-border-radius: 5px 0px 0px 5px;
   -webkit-border-bottom-left-radius: 5px;
   -webkit-border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
   border-top-left-radius: 5px;
   /* Optional: add padding if content is too close to the edges LC */
  padding-bottom: 5px; /* Add some space at the bottom for buttons */
}

.rp_list ul li div img {
  width: 70px;
  border: none;
  float: left;
  margin: 4px 10px 0px 4px;
  border: 1px solid #111;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}

span.rp_title {
    font-size: 11px;
    color: #ddd;
    color: #fff;
    /* height: 46px;*/ /* Remove fixed height if it's causing issues with wrapping long titles */
    margin: 4px 0px 0px 20px; /* Adjusted margin if title needs more space from image */
    display: block;
    text-shadow: 1px 1px 1px #000;
    padding-top: 3px;
    background: #fff; 
    background: #222;
    -moz-box-shadow: 0px 0px 5px #000 inset;
    -webkit-box-shadow: 0px 0px 5px #000 inset;
    box-shadow: 0px 0px 5px #000 inset;
}

span.rp_links {
    width: 195px; /* Keep width, but allow height to be auto */
    /*height: 8px;*/
    height: auto; /* <--- CRITICAL CHANGE: Allow height to expand LC */
    padding-top: 2px;
    display: block;
    margin-left: 42px;
    /* Optional: Add some padding to separate buttons from title better */
    padding-top: 5px;
    line-height: normal; /* Ensure line height doesn't squish */
}

    span.rp_links a {
        background: #222 url(../img/bgbutton.png) repeat-x;
        /*background: #ffae00 url(../img/bgbutton.png) repeat-x;*/
        background: #3e9cbf url(../img/bgbutton.png) repeat-x;
        padding: 2px 18px; /* Adjusted padding slightly to make buttons smaller and fit more easily */
        font-size: 10px;
        color: #fff;
        text-decoration: none;
        line-height: 1;
        -moz-box-shadow: 0 1px 3px #000;
        -webkit-box-shadow: 0 1px 3px #000;
        box-shadow: 0 1px 3px #000;
        text-shadow: 0 -1px 1px #222;
        cursor: pointer;
        outline: none;
        margin-right: 5px; /* Add some space between buttons LC */
        white-space: nowrap; /* Prevent buttons from breaking onto new lines if they can fit side-by-side LC*/
        display: inline-block; /* Ensure padding and margin work correctly LC*/
    }

span.rp_links a:hover {
   background-color: #000;
   color: #fff;
 }


/*==========================================================*/
/* This new class creates the positioning context. On the Login Form*/
.form-container {
    position: relative;
}

/* Your existing CSS for the close button */
.close {
    background-color: rgba(0, 0, 0, 0.8);
    /*background-color: rgb(12, 13, 4);*/
    line-height: 30px;
    position: absolute;
    /*right: -10px;*/
    right: 0;
    text-align: center;
    text-decoration: none;
    top: -15px; /* Sits slightly above the container */
    width: 30px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border-radius: 50%;
    z-index: 10; /* Ensures it's on top */
}

    .close:before {
        color: rgba(255, 255, 255, 0.9);
        content: "X";
        font-size: 24px;
        text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
        font-style: italic;
    }

    .close:hover {
        background-color: rgba(220, 53, 69, 0.9); /* Example: Bootstrap's 'danger' red */
       
    }

/*===================================================*/
a.back {
    background: transparent url(back.png) no-repeat top left;
    height: 13px;
    width: 248px;
    display: block;
    clear: both;
    text-indent: -9000px;
    margin: 20px auto;
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -124px;
}

    a.back:hover {
        background-position: 0px -13px;
    }

div.shuffle {
    position: fixed;
    top: 476px;
    right: 19px;
    width: 200px;
    height: 50px;
    background: transparent url(shuffle.png) no-repeat top left;
}

div.hover {
    position: fixed;
    top: 68px;
    right: 90px;
    width: 253px;
    height: 65px;
    background: transparent url(hover.png) no-repeat top left;
}

/*===================================================*/
.gray-box {
    position: absolute;
    z-index: 3; /* gray box will be above both green and black box */
    /*background: lightgray;*/
    color:transparent;
    height: 60px;
    width: 70%;
    left: 50px;
    top: 95px;
}

/** -https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sidenav_buttons */
.lcSidenav a {
    position: absolute;
    left: -80px;
    transition: 0.3s;
    padding: 15px;
    width: 100px;
    text-decoration: none;
    font-size: 20px;
    color: white;
    border-radius: 0 5px 5px 0;
}

.lcSidenav a:hover {
        left: 0;
}

.lcAbout {
    top: 20px;
    background-color: #04AA6D;
}

.lcblog {
    top: 80px;
    background-color: #2196F3;
}

.lcprojects {
    top: 140px;
    background-color: #f44336;
}

.lccontact {
    top: 200px;
    background-color: #555
}

/*a.back {
    background: transparent url(back.png) no-repeat top left;
    height: 13px;
    width: 248px;
    display: block;
    clear: both;
    text-indent: -9000px;
    margin: 20px auto;
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -124px;
}

a.back:hover {
  background-position: 0px -13px;
}

div.shuffle {
    position: fixed;
    top: 476px;
    right: 19px;
    width: 200px;
    height: 50px;
    background: transparent url(shuffle.png) no-repeat top left;
}

div.hover {
    position: fixed;
    top: 68px;
    right: 90px;
    width: 253px;
    height: 65px;
    background: transparent url(hover.png) no-repeat top left;
}
*/

/* The border-width Property
    -https://www.w3schools.com/css/css_border_width.asp
    -https://www.w3schools.com/css/tryit.asp?filename=trycss_border-width2
*/
.borderOne {
    border-style: solid;
    border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

.borderTwo {
    border-style: solid; border-left-color:aqua; border-right-color:aqua;
    border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
    border-radius:10px;
}

.borderThree {
    border-style: solid;
    border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}

.borderFour {
    border-style: ridge;
    border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

/*
   To achieve this behavior for all input fields in your form with the id="formCreate", 
    you can use a combination of CSS and JavaScript. 
    Here's a clean and efficient way to accomplish it using CSS:
 */
/* Default background color */
#formCreate input {
    background-color: white;
    background-color: #fff !important; /*White*/
}
  /* Background color when the input field is focused */
#formCreate input:focus {
   background-color: #ffffe6; /*Light yellow */
   background-color: #ffffe6 !important; /* Light yellow */
}

/* Background color when input loses focus */
#formCreate input {
    transition: background-color 0.2s ease-in-out;
}
#formCreate input:not(:focus) {
    background-color: #fff;   /*White*/
        /*background-color: #e6f7ff;  Light blue */
}

/* Apply styles only to inputs within the #formCreate form focus*/
#formCreate .form-control:focus {
    background-color: #ffffe6 !important; /* Light yellow */
    /* background-color: white !important;*/
}
/* Apply styles only to inputs within the #formCreate form not focus*/
#formCreate .form-control:not(:focus) {
    /*background-color: #e6f7ff !important;*/ /* Light blue */
    /*transition: background-color 0.3s ease-in-out;*/ /* Smooth transition */
    background-color: #fff !important;
    transition: background-color 0.3s ease-in-out;
}

/*extend the styles to <select>, <textarea>, or other form elements, you can include them in the CSS*/
#formCreate select:focus,
#formCreate textarea:focus {
    background-color: #ffffe6 !important; /* Light yellow */
}

#formCreate select:not(:focus),
#formCreate textarea:not(:focus) {
    /*background-color: #e6f7ff !important;*/ /* Light blue */
    background-color: #fff !important; /*White*/
}

/*-----------------------------------------------------------------------------------------------*/
/* Default background color */
#formOMCreate input {
    background-color: white;
    background-color: #fff !important; /*White*/
}
/* Background color when the input field is focused */
#formOMCreate input:focus {
   background-color: #ffffe6; /* Light yellow */
   background-color: #ffffe6 !important; /* Light yellow */
}
/* Apply styles only to inputs within the #formOMCreate form focus*/
#formOMCreate .form-control:focus {
    background-color: #ffffe6 !important; /* Light yellow */
    /* background-color: white !important;*/
}
/* Apply styles only to inputs within the #formOMCreate form not focus*/
#formOMCreate .form-control:not(:focus) {
    /*background-color: #e6f7ff !important;*/ /* Light blue */
    /*transition: background-color 0.3s ease-in-out;*/ /* Smooth transition */

    background-color: #fff !important;
    transition: background-color 0.3s ease-in-out;
}
/*extend the styles to <select>, <textarea>, or other form elements, you can include them in the CSS*/
#formOMCreate select:focus,
#formOMCreate textarea:focus {
    background-color: #ffffe6 !important; /* Light yellow */
}

#formOMCreate select:not(:focus),
#formOMCreate textarea:not(:focus) {
    /*background-color: #e6f7ff !important;*/ /* Light blue */
    background-color: #fff !important; /*White*/
}

/*Bootstrap-Specific Styling
  If you're using Bootstrap classes, you can override or extend them with custom styles:*/
/*.form-control:focus {
    background-color: #ffffe6 !important; Light yellow 
}
*/
 /*.form-control:not(:focus) {
   background-color: #e6f7ff !important;*/ /* Light blue
} */
/*-----------------------------------------------------------------------------------------------------------*/
/*orderMove*/
/* Default background color */
#orderMove input {
    background-color: white;
}
/* Background color when the input field is focused */
#orderMove input:focus {
   background-color: #ffffe6; /* Light yellow */
}

/* Apply styles only to inputs within the #orderMove form */
#orderMove .form-control:focus {
     background-color: #ffffe6 !important; /* Light yellow */
   /* background-color: white !important;*/
}

#orderMove .form-control:not(:focus) {
    /*background-color: #e6f7ff !important;*/ /* Light blue */
    /*transition: background-color 0.3s ease-in-out;*/ /* Smooth transition */

    background-color: #fff !important;
    transition: background-color 0.3s ease-in-out;
}

/*extend the styles to <select>, <textarea>, or other form elements, you can include them in the CSS*/
#orderMove select:focus,
#orderMove textarea:focus {
    background-color: #ffffe6 !important; /* Light yellow */
}

#orderMove select:not(:focus),
#orderMove textarea:not(:focus) {
    /*background-color: #e6f7ff !important;*/ /* Light blue */
    background-color: #fff !important;        /*White*/
}



/*-----------------------------------------------------------------------------------------------*/
/* Default background color */
#formREdit input {
    background-color: white;
    background-color: #fff !important; /*White*/
}
/* Background color when the input field is focused */
#formREdit input:focus {
  background-color: #ffffe6; /* Light yellow */
  background-color: #ffffe6 !important; /* Light yellow */
}
/* Apply styles only to inputs within the #formREdit form focus*/
#formREdit .form-control:focus {
    background-color: #ffffe6 !important; /* Light yellow */
    /* background-color: white !important;*/
}
/* Apply styles only to inputs within the #formREdit form not focus*/
#formREdit .form-control:not(:focus) {
    /*background-color: #e6f7ff !important;*/ /* Light blue */
    /*transition: background-color 0.3s ease-in-out;*/ /* Smooth transition */

    background-color: #fff !important;
    transition: background-color 0.3s ease-in-out;
}
/*extend the styles to <select>, <textarea>, or other form elements, you can include them in the CSS*/
#formREdit select:focus,
#formREdit textarea:focus {
    background-color: #ffffe6 !important; /* Light yellow */
}

#formREdit select:not(:focus),
#formREdit textarea:not(:focus) {
    /*background-color: #e6f7ff !important;*/ /* Light blue */
    background-color: #fff !important; /*White*/
}

/*-----------------------------------------------------------------------------------------------------------*/
/*
    Using a Button Styled as a Tab
    You can style a <button> element to look like a tab and use it to submit the form.
*/
.tab-buttons {
    display: flex;
    gap: 10px;
}

.tab-SubmitButtons {
    display: flex;
    gap: 10px;
}
.tab-Submit {
    padding: 10px 20px;
    cursor: pointer;
    background-color: #007bff; /* Bootstrap Primary */
    color: white;
    border-radius: 5px;
    text-align: center;
}

.tab-Submit:hover {
   background-color: #0056b3;
}


.btn {
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #007bff; /* Bootstrap Primary */
    color: white;
    border-radius: 5px;
}

.btn:hover {
   background-color: #0056b3;
}
/*-----------------------------------------------------------------------------------------------------------*/

/*LC*/
.myBtnColr {
    background-color: #fff;
}
.myBtnColr:hover {
    background-color: #0066ff;
}
/*-----------------------------------------------------------------------------------------------------------*/

/*             STYLE 01/28/2024 @10:42             */
/*             3D Text
  -http://cssdemos.tupence.co.uk/text-shadow.htm
*/
sup {
    vertical-align: super;
    font-size: smaller;
}
/*  Custom tooltip
    -https://getbootstrap.com/docs/5.2/components/tooltips/*/
.custom-tooltip {
    --bs-tooltip-bg: var(--bs-primary);
}
/*-----------------------------------------------------------------------------------------------------------*/

/*Circle that highlight the area*/
.icon-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Adjust as needed */
    height: 40px; /* Adjust as needed */
    cursor: pointer;
}

.icon-container .bi-ticket-detailed {
        z-index: 1; /* Ensure the icon is above the circle */
        font-size: 20px; /* Adjust icon size */
}

.icon-container .circle {
        position: absolute;
        width: 35px; /* Adjust to match .dotWhite */
        height: 35px; /* Adjust to match .dotWhite */
        background-color: #fff;
        border-radius: 50%;
        transition: box-shadow 0.3s ease, border 0.3s ease; /* Smooth transition */
}

.icon-container:hover .circle {
        box-shadow: 0 0 5px 2px rgba(0, 140, 186, 0.7); /* Brighter hover effect */
        border: 1px solid lime;
}


.dotWhite {
    height: 25px;
    width: 25px;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow 0.3s ease, border 0.3s ease; /* Smooth transition */
    /* --- ADD THESE LINES FOR CENTERING --- */
    display: inline-flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}
    /* Add a hover effect (blue shadow) */
.dotWhite:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
    border: 1px solid lime;
}
.dotRed {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow 0.3s ease, border 0.3s ease; /* Smooth transition */
    /* --- ADD THESE LINES FOR CENTERING --- */
    display: inline-flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    /*background-color: Red;*/
}
    /* Add a hover effect (blue shadow) */
.dotRed:hover {
   color:white;
   background-color:red;
   box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
   border: 1px solid lime;
}
.dotRedBk {
    height: 25px;
    width: 25px;
    background-color: Red;
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow 0.3s ease, border 0.3s ease; /* Smooth transition */
    /* --- ADD THESE LINES FOR CENTERING --- */
    display: inline-flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}
    /* Add a hover effect (blue shadow) */
    .dotRedBk:hover {
        color: white;
        box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
        border: 1px solid lime;
    }

.dotYellow {
    height: 25px;
    width: 25px;
    /*background-color: #ffae00;*/
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow 0.3s ease, border 0.3s ease; /* Smooth transition */
    /* --- ADD THESE LINES FOR CENTERING --- */
    display: inline-flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

/* Add a hover effect (blue shadow) */
.dotYellow:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
  background-color: #ffae00;
  border: 1px solid lime;
  color: #fff;
}

.dotYellowBk {
    height: 25px;
    width: 25px;
    background-color: #ffae00;
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow 0.3s ease, border 0.3s ease; /* Smooth transition */
    /* --- ADD THESE LINES FOR CENTERING --- */
    display: inline-flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

/* Add a hover effect (blue shadow) */
.dotYellowBk:hover {
   box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
   border: 1px solid lime;
}
.dotGreen {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow 0.3s ease, border 0.3s ease; /* Smooth transition */
    /* --- ADD THESE LINES FOR CENTERING --- */
    display: inline-flex;
    justify-content: center; /* Center horizontally */ /*background-color: #35b128;*/
    align-items: center; /* Center vertically */
}

/* Add a hover effect (blue shadow) */
    .dotGreen:hover {
        border: 1px solid lime;
        box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
        color: #fff;
        background-color: #35b128;
    }

.dotGreenBk {
    height: 25px;
    width: 25px;
    background-color: #35b128;
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow 0.3s ease, border 0.3s ease; /* Smooth transition */
    /* --- ADD THESE LINES FOR CENTERING --- */
    display: inline-flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}
   /* Add a hover effect (blue shadow) */
.dotGreenBk:hover {
   box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
   
   border: 1px solid lime;
}
.dotBlue {
    height: 25px;
    width: 25px;
    /*background-color: #ffae00;*/
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow 0.3s ease, border 0.3s ease; /* Smooth transition */
    /* --- ADD THESE LINES FOR CENTERING --- */
    display: inline-flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

    /* Add a hover effect (blue shadow) */
.dotBlue:hover {
   box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
   background-color: blue;
   border: 1px solid lime;
   color: #fff;
}

.dotCayan {
    height: 25px;
    width: 25px;
    
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow 0.3s ease, border 0.3s ease; /* Smooth transition */
    /* --- ADD THESE LINES FOR CENTERING --- */
    display: inline-flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

    /* Add a hover effect (blue shadow) */
.dotCayan:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
  background-color: #00d2ff;
  border: 1px solid lime;
  color: #fff;
}
.dotGray {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow 0.3s ease, border 0.3s ease; /* Smooth transition */
    /* --- ADD THESE LINES FOR CENTERING --- */
    display: inline-flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

    /* Add a hover effect (blue shadow) */
.dotGray:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
  background-color: #888;
  border: 1px solid lime;
   color: #fff;
}
.dotTrash {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow 0.3s ease, border 0.3s ease; /* Smooth transition */
    /* --- ADD THESE LINES FOR CENTERING --- */
    display: inline-flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

    /* Add a hover effect (blue shadow) */
    .dotTrash:hover {
        box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
        background-color: #C30003;
        border: 1px solid lime;
        color: #fff;
    }
/*----------------*/
.record-number-circle {
    /* Basic circle styling */
    width: 40px; /* Adjust size as needed */
    height: 40px; /* Adjust size as needed */
    border-radius: 50%; /* Makes it a circle */
    background-color: #66BB6A; /* A pleasant green, adjust to your theme */
    color: white; /* Text color */
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.1rem; /* Adjust font size */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2); /* Optional: subtle shadow */
    cursor: default; /* Change cursor to indicate it's not clickable */
    user-select: none; /* Prevent text selection */
    flex-shrink: 0; /* Prevent it from shrinking in flex container */
}

 /* Optional: If you want a slight hover effect */
 .record-number-circle:hover {
   background-color: #5cb85c; /* Slightly darker green on hover */
   box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
 }

/* Ensure the layout holds up */
.dotWhite1 {
    /* Adjust margin for spacing if necessary, e.g. */
    margin-right: 10px; /* Pushes it away from the circle */
    height: 25px;
    width: 25px;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow 0.3s ease, border 0.3s ease; /* Smooth transition */
    /* --- ADD THESE LINES FOR CENTERING --- */
    display: inline-flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}
.dotWhite1:hover {
   box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
   border: 1px solid lime;
   color: red;
   background-color: #fff;
 }

.dotWhite20 {
    height: 20px;
    width: 20px;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow 0.3s ease, border 0.3s ease; /* Smooth transition */
    /* --- ADD THESE LINES FOR CENTERING --- */
    display: inline-flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

/* Add a hover effect (blue shadow) */
.dotWhite20:hover {
   box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
   border: 1px solid lime;
}

.dotWhite15 {
    height: 15px;
    width: 15px;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow 0.3s ease, border 0.3s ease; /* Smooth transition */
    /* --- ADD THESE LINES FOR CENTERING --- */
    display: inline-flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

/* Add a hover effect (blue shadow) */
.dotWhite15:hover {
   box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
   border: 1px solid lime;
}

.dotWhite10 {
    height: 10px;
    width: 10px;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow 0.3s ease, border 0.3s ease; /* Smooth transition */
    /* --- ADD THESE LINES FOR CENTERING --- */
    display: inline-flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

    /* Add a hover effect (blue shadow) */
.dotWhite10:hover {
        box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
        border: 1px solid lime;
}


/*To hide a column*/
.hidden-column {
    display: none;
}


/*.loader {
    width: 75px;
    height: 75px;
    border: 10px solid #eaeaea;
    border-radius: 50%;
    border-top-color: #000;
    animation: anim 5s linear 2s infinite;*/   /*go around*/
    /*animation: anim 5s linear 2s infinite alternate;*/
/*}

@keyframes anim {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}*/

body {
    margin-bottom: 60px;
    /*background-image: url("paper.gif");*/
    background-color: #cccccc;
    background-image: url('../resource/bkg/bg.gif');
    background-image: url('../resource/bkg/line.png');
    background-image: url('../resource/bkg/lines.png'); /* Brighrer of line*/
    background-image: url('../resource/bkg/lines_dark.png'); /* Darker of line*/
    background-image: url('../resource/bkg/stripe.gif'); /* Darkest of line*/
    background-image: url('../resource/img/bkg/stripe_light.gif'); /* Brightest of line*/
    /*LC*/
    background-color: white;
    height: 100%;
    background: #f4f4f4 url(../bkg/bg.gif) repeat top left;
    
}
.AllSidesShadow0 {
    -webkit-box-shadow: 0 0 10px rgba(0,0,0, .65);
    -moz-box-shadow: 0 0 10px rgba(0,0,0, .65);
    box-shadow: 0 0 10px rgba(0,0,0, .65);
    border-radius: 10px;
    padding-bottom: 14px;

    background-color: white;  /*LC*/
    height: 100%;
    background: #f4f4f4 url(../bkg/bg.gif) repeat top left;
}

.AllSidesShadow1 {
    -webkit-box-shadow: 0 0 10px rgba(0,0,0, .65);
    -moz-box-shadow: 0 0 10px rgba(0,0,0, .65);
    box-shadow: 0 0 10px rgba(0,0,0, .65);
    border-radius: 10px;
    padding-bottom: 14px;
    background-color: white; /*LC*/
    height: 100%;
    background: #f4f4f4 url(../bkg/line.png) repeat top left;
}
.AllSidesShadowA {
    background: #fff;
    border: 1px solid #ddd;
    font-size: 16px;
    -moz-box-shadow: 1px 1px 7px #ccc;
    -webkit-box-shadow: 1px 1px 7px #ccc;
    box-shadow: 1px 1px 7px #ccc;
    width: 100%;
    height: auto;
    margin-left: 2px;
    margin-right: 2px;
    padding: 10px;
    border-radius: 10px;
}
    /*
<!-- Count textarea characters
    -https://jsfiddle.net/Kurenaikunai/8zLtdsm8/ -->*/

    .taWrap {
    position: relative;
    display: inline-block;
}

.taWrap span {
    position: absolute;
    bottom: 5px;
    right: 0px;
}

.taCounter {
    background-color: #5dc991;
    color: #fff;
    font-size: 10px;
    padding: 2px 5px;
    line-height: 12px;
    height: 14px;
    text-align: center;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    font-weight: 400;
    width:15%;
}

/*
    The most common and traditional way (inline-block)
    3 ways to display two divs side by side
    -https://dev.to/dawnind/3-ways-to-display-two-divs-side-by-side-3d8b

    USE:<div class='parent'>
          <div class='child'>child 1</div>
          <div class='child'>child 2</div>
        </div>
*/
.parent {
    /*border: 1px solid black;
    margin: 1rem;
    padding: 2rem 2rem;
    text-align: center;*/
    text-align:center;
    padding-bottom:10px;
}

.child {
    display: inline-block;
    vertical-align: middle;
    /*display: inline-block;
    border: 1px solid red;
    padding: 1rem 1rem;
    vertical-align: middle;*/
}


.threeD {
    background: #fff; /*#ca4b29*/
    background-color: transparent;
    font-family: 'Chewy', cursive; /*Chewy is available at Google Webfonts 
                                    -http://www.google.com/webfonts/specimen/Chewy*/
    color: #fff;
    /*apply shadows of increasing darkness (in this case, because the text is white, 
        I started with very pale grey) and offset until you get the effect you desire*/
    text-shadow: 0px 0px 0 rgb(218,218,218), -1px 0px 0 rgb(203,203,203), -2px 0px 0 rgb(187,187,187), -3px 0px 0 rgb(172,172,172), -4px 0px 0 rgb(156,156,156), -5px 0px 0 rgb(140,140,140), -6px 0px 5px rgba(0,0,0,0.5), -6px 0px 1px rgba(0,0,0,0.5);
}
.threeD1 {
    background-color: white; /*background: #ca4b29;*/
    background-color:transparent; 
    font-family: 'Chewy', cursive; /*Chewy is available at Google Webfonts 
                                    -http://www.google.com/webfonts/specimen/Chewy*/
    color:black; /*color: #fff;*/
    /*apply shadows of increasing darkness (in this case, because the text is white, 
        I started with very pale grey) and offset until you get the effect you desire*/
    text-shadow: 0px 0px 0 rgb(218,218,218), -1px 0px 0 rgb(203,203,203), -2px 0px 0 rgb(187,187,187), -3px 0px 0 rgb(172,172,172), -4px 0px 0 rgb(156,156,156), -5px 0px 0 rgb(140,140,140), -6px 0px 5px rgba(0,0,0,0.5), -6px 0px 1px rgba(0,0,0,0.5);
}
.threeD2 {
    color:#ccc; 
    font-size:36px;
    padding: 20px;
    font-family: hanzel extended, Verdana, Geneva, sans-serif;
    font-size: 40px;
    color: #F00;
    text-shadow: 0px 0px 0 rgb(218,218,218), -1px 0px 0 rgb(203,203,203), -2px 0px 0 rgb(187,187,187), -3px 0px 0 rgb(172,172,172), -4px 0px 0 rgb(156,156,156), -5px 0px 0 rgb(140,140,140), -6px 0px 5px rgba(10,10,10,10.5), -6px 0px 1px rgba(10,10,10,10.5);
  
}




/*     Custom Scrollbar  
    -https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_scrollbar2
    -https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
*/
/* width */
::-webkit-scrollbar {
    width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: red;
    border-radius: 10px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #b30000;
    }

/*  CSS letter-spacing Property
    -https://www.w3schools.com/cssref/tryit.php?filename=trycss_letter-spacing
*/
.ltrSpc3 {
    letter-spacing: 3px;
}

.ltrSpc5 {
    letter-spacing: 5px;
}

.ltrSpc10 {
    letter-spacing: 10px;
}
.ltrSpc15 {
    letter-spacing: 15px;
}
.ltrSpc20 {
    letter-spacing: 15px;
}
.ltrSpc30 {
    letter-spacing: 30px;
}
.ltrSpc40 {
    letter-spacing: 40px;
}
.ltrSpc50 {
    letter-spacing: 50px;
}
.ltrSpc60 {
    letter-spacing: 60px;
}
/* CSS word-spacing Property
   -https://www.w3schools.com/cssref/tryit.php?filename=trycss_text_word-spacing
   -https://www.w3schools.com/cssref/pr_text_word-spacing.php
*/
.wrdSpc5 {
    word-spacing: 5px;
}
.wrdSpc10 {
    word-spacing: 10px;
}

.wrdSpc15 {
    word-spacing: 15px;
}
.wrdSpc20 {
    word-spacing: 20px;
}
.wrdSpc30 {
    word-spacing: 30px;
}
.wrdSpc35 {
    word-spacing: 35px;
}
.wrdSpc40 {
    word-spacing: 40px;
}
.wrdSpc45 {
    word-spacing: 45px;
}
.wrdSpc50 {
    word-spacing: 50px;
}
.wrdSpc1cm {

    word-spacing: 1cm;
}

/*         Basic Button   
    -http://cssdemos.tupence.co.uk/button-styling.htm
    <input class="gobtn"/id="gobtn" type="submit" value="Go!" /> 
    <!--the text in the quotes after value will appear on the button-->
*/
.gobtn {
    cursor: pointer; /*forces the cursor to change to a hand when the button is hovered*/
    padding: 5px 25px; /*add some padding to the inside of the button*/
    background: #35b128; /*the colour of the button*/
    border: 1px solid #33842a; /*required or the default border for the browser will appear*/
    /*give the button curved corners, alter the size as required*/
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /*give the button a drop shadow*/
    -webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
    -moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
    box-shadow: 0 0 4px rgba(0,0,0, .75);
    /*style the text*/
    color: #f3f3f3;
    font-size: 1.1em;
}
/***NOW STYLE THE BUTTON'S HOVER AND FOCUS STATES***/
 .gobtn:hover, input#gobutton:focus {
        background-color: #399630; /*make the background a little darker*/
        /*reduce the drop shadow size to give a pushed button effect*/
        -webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
        -moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
        box-shadow: 0 0 1px rgba(0,0,0, .75);
 }
.bigbtn {
    width: 500px;
    background: #3e9cbf; /*the colour of the button*/
    padding: 8px 14px 10px; /*apply some padding inside the button*/
    border: 1px solid #3e9cbf; /*required or the default border for the browser will appear*/
    cursor: pointer; /*forces the cursor to change to a hand when the button is hovered*/
    /*style the text*/
    font-size: 1.5em;
    font-family: Oswald, sans-serif; /*Oswald is available from http://www.google.com/webfonts/specimen/Oswald*/
    letter-spacing: .1em;
    text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3); /*give the text a shadow - doesn't appear in Opera 12.02 or earlier*/
    color: #fff;
    /*use box-shadow to give the button some depth - see cssdemos.tupence.co.uk/box-shadow.htm#demo7 for more info on this technique*/
    -webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
    -moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
    box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
    /*give the corners a small curve*/
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.bigbtn:hover, .bigbtn:focus {
        color: #dfe7ea;
        /*reduce the size of the shadow to give a pushed effect*/
        -webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
        -moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
        box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
}

.submitbtn1 {
    border: 2px groove #7c93ba;
    cursor: pointer; /*forces the cursor to change to a hand when the button is hovered*/
    padding: 5px 25px;
    /*give the background a gradient - see cssdemos.tupence.co.uk/gradients.htm for more info*/
    background-color: #6b6dbb; /*required for browsers that don't support gradients*/
    background: -webkit-gradient(linear, left top, left bottom, from(#88add7), to(#6b6dbb));
    background: -webkit-linear-gradient(top, #88add7, #6b6dbb);
    background: -moz-linear-gradient(top, #88add7, #6b6dbb);
    background: -o-linear-gradient(top, #88add7, #6b6dbb);
    background: linear-gradient(top, #88add7, #6b6dbb);
    /*style to the text inside the button*/
    font-family: Andika, Arial, sans-serif; /*Andkia is available at http://www.google.com/webfonts/specimen/Andika*/
    color: #fff;
    font-size: 1.1em;
    letter-spacing: .1em;
    font-variant: small-caps;
    /*give the corners a small curve*/
    -webkit-border-radius: 0 15px 15px 0;
    -moz-border-radius: 0 15px 15px 0;
    border-radius: 0 15px 15px 0;
    /*add a drop shadow to the button*/
    -webkit-box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
    -moz-box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
    box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
}
/***NOW STYLE THE BUTTON'S HOVER AND FOCUS STATES***/
.submitbtn1:hover, .submitbtn1:focus {
    color: #edebda;
     /*reduce the spread of the shadow to give a pushed effect*/
    -webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
    -moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
    box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
}

.submitbtn {
    padding: 4px 20px;
    /*give the background a gradient*/
    background: #ffae00; /*fallback for browsers that don't support gradients*/
    background: -webkit-linear-gradient(top, #ffae00, #d67600);
    background: -moz-linear-gradient(top, #ffae00, #d67600);
    background: -o-linear-gradient(top, #ffae00, #d67600);
    background: linear-gradient(top, #ffae00, #d67600);
    border: 2px outset #dad9d8;
    /*style the text*/
    font-family: Andika, Arial, sans-serif; /*Andkia is available at http://www.google.com/webfonts/specimen/Andika*/
    font-size: 1.1em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0px 1px 10px #000;
    /*add to small curve to the corners of the button*/
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    /*give the button a drop shadow*/
    -webkit-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
    -moz-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
    box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
}
.submitbtn:hover, .submitbtn:focus {
   border: 2px solid #dad9d8;
}
/*          Round Button
    -http://cssdemos.tupence.co.uk/button-styling.html
    <input id="round" type="submit" value="Push!" />
*/
.roundbtn {
    width: 100px; /*same as the height*/
    height: 100px; /*same as the width*/
    background-color: #ff0000;
    border: 1px solid #ff0000; /*same colour as the background*/
    color: #fff;
    font-size: 1.6em;
    /*set the border-radius at half the size of the width and height*/
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    /*give the button a small drop shadow*/
    -webkit-box-shadow: 0 0 10px rgba(0,0,0, .75);
    -moz-box-shadow: 0 0 10px rgba(0,0,0, .75);
    box-shadow: 2px 2px 15px rgba(0,0,0, .75);
}
    /***NOW STYLE THE BUTTON'S HOVER STATE***/
.roundbtn:hover {
    background: #c20b0b;
    border: 1px solid #c20b0b;
        /*reduce the size of the shadow to give a pushed effect*/
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
    box-shadow: 0px 0px 5px rgba(0,0,0, .75);
 }

/*
    Only works in Webkit browsers. In Opera, Firefox and IE you'll just see solid red text
*/
.webkit-stroke {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #dd0303;
    color: #dd0303; /*non-webkit browsers will simply show red text*/
    -webkit-text-fill-color: #fff; /*will override the text color in webkit browsers*/
}

/*Stroke/Outline Effect*/
.stroke {
    background: #fff; /*same as the text colour*/
    color: #fff; /*same as the background colour*/
    /*Use multiple shadows, all the same colour with no x or y offset and 1px blur*/
    text-shadow: 0 0 1px #dd0303, 0 0 1px #dd0303, 0 0 1px #dd0303, 0 0 1px #dd0303, 0 0 1px #dd0303, 0 0 1px #dd0303;
}
.stroke2 {
    background: #fff; /*same as the text colour*/
    color: #fff; /*same as the background colour*/
    /*Again use multiple shadows, all the same colour with no x or y offset and 1px blur, but this time add an additional shadow with a slight offset and a blur in a dark grey colour*/
    text-shadow: 0 0 1px #dd0303, 0 0 1px #dd0303, 0 0 1px #dd0303, 0 0 1px #dd0303, 0 0 1px #dd0303, 0 0 1px #dd0303, 0 2px 5px #7d7d7d;
}

/*   Subtle Glow */
.subtleglow {
    color: #fff;
    /*use two shadows, the first the same colour as the text, 
        the second a darker colour (in this case white and yellow). 
        Both have no x or y offset, the blur you apply to the shadow 
        will determine how big the glow effect is*/
    text-shadow: 0 0 30px #fff, 0 0 70px #ffff00;
}

/*    Neon Glow  */
.neon {
    background: #000;
    color: #fff;
    /*Use shadows to slowly build up the glow. The first shadow should 
        be the colour of the text. Subsequent shadows are the colour you 
        want the glow to be, all with no x or y offset and with increasing 
        amounts of blur (the number of shadows you use depends on how big you 
        want the glow to be).*/
    text-shadow: 0 0 10px #fff, 0 0 20px #00d2ff, 0 0 30px #00d2ff, 0 0 40px #00d2ff, 0 0 50px #00d2ff, 0 0 60px #00d2ff, 0 0 70px #00d2ff;
}

/*    Offset Shadow  
    Use two text shadows to give an offset effect. 
    The first shadow should be the same colour as the container background, the second the
*/
.offset {
    background: #e4e4c7;
    padding: 10px 10px 20px 10px; /*leave enough padding to accommodate the shadow*/
    font-size: 4.2em;
    letter-spacing: .2em;
    font-weight: bold;
    color: #526972;
    /*use two shadows, the first the colour of the background, the second the same colour as the text*/
    text-shadow: 4px 4px 0px #e4e4c7, 6px 6px 0px #526972;
}

.letterpress {
    color: #222;
    background: #414141;
    font-size: 3.2em;
    text-shadow: 0px 2px 1px #555;
}

/*   Raised & Letterpress Effect  */
.raised {
    color: #fff;
    background: #666;
    font-size: 1.8em;
    font-weight: bold;
    text-shadow: 0px 1px 1px #000;
}

/*    Embossed Text
    Use text shadows to create an embossed effect
*/
.emboss3 {
    background: #6d6d6d; /*same as font colour*/
    font-family: 'Atomic Age', cursive; /*Atomic Age is from Google Fonts http://www.google.com/webfonts/specimen/Atomic+Age*/
    color: #6d6d6d; /*same as background colour*/
    font-size: 4em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-shadow: 1px 1px #fff, -1px -1px #3d3d3d;
    /*two shadows, one in white offset to the right and bottom, the second in a dark grey offset to the left and top - you should however adjust the colour depending on the background and font colour*/
}
.emboss1 {
    background: #57758a;
    font-size: 1.4em;
    color: #fff;
    text-shadow: 0px -1px 0px #303030;
}
.emboss2 {
    background: #b8b8b8;
    font-size: 1.4em;
    color: #2e2e2e;
    text-shadow: 0px 1px 0px #ebebeb;
}

/* 
    In this example box01 and box02 have absolute positioning applied
    -http://cssdemos.tupence.co.uk/position-relative-absolute.htm
*/
.box01 {
    position: absolute;
    top: 0;
    left: 0;
}

.box02 {
    position: absolute;
    top: 0;
    left: 420px;
}
/*but the parent box has no positioning specified*/
.mainbox {
    width: 500px;
    background: #e7e1aa;
}
/*==============================================================================*/
/*
    This time the parent box has relative position applied
*/
.mainbox1 {
    position: relative;
    width: 500px;
    background: #e7e1aa;
}
/*while box01 and box02 are positioned exactly the same as the example above*/
.box1 {
    position: absolute;
    top: 0;
    left: 0;
}

.box2 {
    position: absolute;
    top: 0;
    left: 420px;
}
/*styling the links to change from one form to another */

p.change_link {
    position: absolute;
    color: rgb(127, 124, 124);
    left: 0px;
    height: 20px;
    width: 440px;
    padding: 17px 30px 20px 30px;
    font-size: 16px;
    text-align: right;
    border-top: 1px solid rgb(219, 229, 232);
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    background: rgb(225, 234, 235);
    background: -moz-repeating-linear-gradient(-45deg, rgb(247, 247, 247), rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px );
    background: -webkit-repeating-linear-gradient(-45deg, rgb(247, 247, 247), rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px );
    background: -o-repeating-linear-gradient(-45deg, rgb(247, 247, 247), rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px );
    background: repeating-linear-gradient(-45deg, rgb(247, 247, 247), rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px );
}
.change_link {
    position: absolute;
    color: rgb(127, 124, 124);
    left: 0px;
    height: 20px;
    width:100%;    /*width: 440px;*/
    padding: 17px 30px 20px 30px;
    font-size: 16px;
    text-align: right;
    border-top: 1px solid rgb(219, 229, 232);
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    background: rgb(225, 234, 235);
    background: -moz-repeating-linear-gradient(-45deg, rgb(247, 247, 247), rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px );
    background: -webkit-repeating-linear-gradient(-45deg, rgb(247, 247, 247), rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px );
    background: -o-repeating-linear-gradient(-45deg, rgb(247, 247, 247), rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px );
    background: repeating-linear-gradient(-45deg, rgb(247, 247, 247), rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px );
}
.change_linkA {
    /*position: absolute;*/
    color: rgb(127, 124, 124);
    /*left: 0px;*/
    /*height: 20px;    width: 100%;width: 440px;*/
    /*padding: 17px 30px 20px 30px;*/
    /*font-size: 16px;
    text-align: right;*/

    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid rgb(219, 229, 232); /* border-top: 1px solid rgb(219, 229, 232);*/
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 10px; /*border-radius: 0 0 5px 5px;*/
    background: rgb(225, 234, 235);
    background: -moz-repeating-linear-gradient(-45deg, rgb(247, 247, 247), rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px );
    background: -webkit-repeating-linear-gradient(-45deg, rgb(247, 247, 247), rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px );
    background: -o-repeating-linear-gradient(-45deg, rgb(247, 247, 247), rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px );
    background: repeating-linear-gradient(-45deg, rgb(247, 247, 247), rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px );
}
#wrapper p.change_link a {
    display: inline-block;
    font-weight: bold;
    background: rgb(247, 248, 241);
    padding: 2px 6px;
    color: rgb(29, 162, 193);
    margin-left: 10px;
    text-decoration: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid rgb(203, 213, 214);
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
   /* -ms-transition: all 0.4s linear;*/
    transition: all 0.4s linear;
}

#wrapper p.change_link a:hover {
        color: rgb(57, 191, 215);
        background: rgb(247, 247, 247);
        border: 1px solid rgb(74, 179, 198);
}

#wrapper p.change_link a:active {
        position: relative;
        top: 1px;
}

/*-------------------------------------------------------------------------------*/
/* Form Style */
.RegisterWrapper {
    background: #fff;
    border: 1px solid #ddd;
    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    -moz-box-shadow: 1px 1px 7px #ccc;
    -webkit-box-shadow: 1px 1px 7px #ccc;
    box-shadow: 1px 1px 7px #ccc;
    width: 350px;
    height: 400px;
    padding: 10px;
    border-radius: 10px;
}
.LoginWrapper {
    background: #fff;
    border: 1px solid #ddd;
    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    -moz-box-shadow: 1px 1px 7px #ccc;
    -webkit-box-shadow: 1px 1px 7px #ccc;
    box-shadow: 1px 1px 7px #ccc;
    width: 350px;
    height: 400px;
    padding: 10px;
    border-radius: 10px;
}
.form_wrapper {
    background: #fff;
    border: 1px solid #ddd;
    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    -moz-box-shadow: 1px 1px 7px #ccc;
    -webkit-box-shadow: 1px 1px 7px #ccc;
    box-shadow: 1px 1px 7px #ccc;
    width: 550px;  height: 490px;   
    padding: 10px;
    border-radius: 10px;
}
.SmallWrapper {
    background: #fff;
    border: 1px solid #ddd;
    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    -moz-box-shadow: 1px 1px 7px #ccc;
    -webkit-box-shadow: 1px 1px 7px #ccc;
    box-shadow: 1px 1px 7px #ccc;
    width: 350px;
    height: 272px;
    padding: 10px;
    border-radius: 10px;
}
.form_wrapper h3 {
   padding: 20px 30px 20px 30px;
   background-color: #444;
   color: #fff;
   font-size: 25px;
   border-bottom: 1px solid #ddd;
 }

/*
    Create a Fixed Footer
    -https://www.w3schools.com/howto/howto_css_fixed_footer.asp
*/
.FixFooter {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: red;
    color: white;
    text-align: center;

    padding:10px;
    height:50px;
}
/*
     -https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_backgrounds_and_borders
     -https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-linear-gradient
    ***border-radius***
    -https://css-tricks.com/almanac/properties/b/border-radius/
 */
/*------------------------------------------------------------------------------------------------------------------*/
/****Zebra stripes
    -https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-linear-gradient
*/
.ZbrStripes {
    font-size: 14px;
    color: black;
    border-radius: 10px;
    background: gainsboro;
    background: lavender;
    background: lightblue;
    background-image: repeating-linear-gradient( -45deg, transparent, transparent 20px, lightcyan 20px, lightcyan 40px );
    /* with multiple color stop lengths */
    background-image: repeating-linear-gradient( -45deg, transparent 0 20px, lightcyan 20px 40px );
}

.ZbrStripesBlk {
    background-image: repeating-linear-gradient( -45deg, transparent, transparent 20px, black 20px, black 40px );
    /* with multiple color stop lengths */
    background-image: repeating-linear-gradient( -45deg, transparent 0 20px, black 20px 40px );
}

.ZbrStripesRed {
    font-size: 14px;
    color: black;
    background: red;
    background-image: repeating-linear-gradient( -45deg, transparent, transparent 20px, white 20px, white 40px );
    /* with multiple color stop lengths */
    background-image: repeating-linear-gradient( -45deg, transparent 0 20px, white 20px 40px );
}

/*------------------------------------------------------------------------------------------------------------------*/
/* #containerBox 
    -https://developer.mozilla.org/en-US/docs/Web/CSS/minmax
    HEML
    <div id="container">
      <div>Item as wide as the content, but at most 300 pixels.</div>
      <div>Item with flexible width but a minimum of 200 pixels.</div>
      <div>Inflexible item of 150 pixels width.</div>
   </div>
*/
#containerBox {
    display: grid;
    grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
    grid-gap: 5px;
    box-sizing: border-box;
    height: 200px;
    width: 100%;
    background-color: #8cffa0;
    padding: 10px;
}

    #containerBox > div {
        background-color: #8ca0ff;
        padding: 5px;
    }
/*------------------------------------------------------------------------------------------------------------------*/

/*Cross Browser Examples for shapes
    -https://www.css3.info/preview/rounded-border/
    Here’s a few basic examples that should work in current versions of 
    Firefox, Safari/Chrome, Opera and even IE9:

    Rounder corners can be created independently using the four individual border-*-radius properties 
*/
.BottomRight50 { /*Example_A*/
    height: 65px;
    width: 160px;
    -moz-border-radius-bottomright: 50px;
    border-bottom-right-radius: 50px;
}
.BottomRight25 { /*Example_B*/
    height: 65px;
    width: 160px;
    -moz-border-radius-bottomright: 50px 25px;
    border-bottom-right-radius: 50px 25px;
}
.BottomRight25a { /*Example_C*/
    height: 65px;
    width: 160px;
    -moz-border-radius-bottomright: 25px 50px;
    border-bottom-right-radius: 25px 50px;
}
.TopLeftBtmRight { /*Example_D*/
    height: 5em;
    width: 12em;
    -moz-border-radius: 1em 4em 1em 4em;
    border-radius: 1em 4em 1em 4em;
}
.TopLeftBtmRighta { /*Example_E*/
    height: 65px;
    width: 160px;
    -moz-border-radius: 25px 10px / 10px 25px;
    border-radius: 25px 10px / 10px 25px;
}
.RoundCircle { /*Example_F */
    height: 70px;
    width: 70px;
    -moz-border-radius: 35px;
    border-radius: 35px;
}
.RoundCircle:hover {
   box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
/* 
    -https://stackoverflow.com/questions/78309634/css-box-with-slanted-and-rounded-corners
    <div class="box">
      Hello World!
    </div>
*/
.TwistBox {
    position: relative;
    border: 10px;
    height: 100px;
    width: 200px;
    padding: 40px 0px 10px 40px;
    /* border-radius: 20px; */
}

.TwistBox:before {
    border-radius: 20px;
    content: "";
    position: absolute;
    inset: 0;
    background: #FFCC00;
    clip-path: polygon(0 40px,40px 0,100% 0,100% calc(100% - 40px),calc(100% - 40px) 100%,0 100%,0 40px,10px calc(40px + 4.14px),10px calc(100% - 10px),calc(100% - 40px - 4.14px) calc(100% - 10px),calc(100% - 10px) calc(100% - 40px - 4.14px),calc(100% - 10px) 10px,calc(40px + 4.14px) 10px,10px calc(40px + 4.14px));
}


/*  -https://www.css3.info/preview/box-shadow/
    Creating an inner shadow with the ‘inset’ keyword
    An optional ‘inset’ keyword can be supplied, preceding the length and color values. If present, 
    this keyword causes the shadow to be drawn inside the element. According to the specification:
*/

.leftAndTopShadowA { /* A shows a shadow offset to the left and top by 5px:*/
    -moz-box-shadow: -5px -5px #888;
    -webkit-box-shadow: -5px -5px #888;
    box-shadow: -5px -5px #888;
}
.leftAndTopShadowB { /* B shows the same shadow with a blur distance of 5px:*/
    -moz-box-shadow: -5px -5px 5px #888;
    -webkit-box-shadow: -5px -5px 5px #888;
    box-shadow: -5px -5px 5px #888;
}

.leftAndTopShadowC { /* C shows the same shadow with a spread distance of 5px:*/
    -moz-box-shadow: -5px -5px 0 5px #888;
    -webkit-box-shadow: -5px -5px 0 5px#888;
    box-shadow: -5px -5px 0 5px #888;
}

.leftAndTopShadowD { /*  D shows the same shadow with both a blur distance of 5px and a spread distance of 5px:*/
    -moz-box-shadow: -5px -5px 5px 5px #888;
    -webkit-box-shadow: -5px -5px 5px 5px#888;
    box-shadow: -5px -5px 5px 5px #888;
}

.allRoundBlurShadowE { /*** E shows a shadow with no offset and a blur distance of 5px:*/
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
}

.allRoundBlurShadowF { /*** F shows a shadow with no offset and both a blur distance of 5px and a spread distance of 5px:*/
    -moz-box-shadow: 0 0 5px 5px #888;
    -webkit-box-shadow: 0 0 5px 5px#888;
    box-shadow: 0 0 5px 5px #888;
}



.rightAndBottomShadowG { /*  G shows an inner shadow offset to the right and bottom by 5px: */
    -moz-box-shadow: inset -5px -5px #888;
    -webkit-box-shadow: inset -5px -5px #888;
    box-shadow: inset -5px -5px #888;
}

.rightAndInnerShadowH { /* H shows the same inner shadow with a blur distance of 5px: */
    -moz-box-shadow: inset -5px -5px 5px #888;
    -webkit-box-shadow: inset -5px -5px 5px #888;
    box-shadow: inset -5px -5px 5px #888;
}
.rightAndBottomShadowI { /* I shows the same inner shadow with a spread distance of 5px: */
    -moz-box-shadow: inset -5px -5px 0 5px #888;
    -webkit-box-shadow: inset -5px -5px 0 5px#888;
    box-shadow: inset -5px -5px 0 5px #888;
}
.rightAndInnerShadowJ { /*  J shows the same inner shadow with both a blur distance of 5px and a spread distance of 5px: */
    -moz-box-shadow: inset -5px -5px 5px 5px #888;
    -webkit-box-shadow: inset -5px -5px 5px 5px#888;
    box-shadow: inset -5px -5px 5px 5px #888;
}
.allRoundInnerShadowK { /***  K shows an inner shadow with no offset and a blur distance of 5px: */
    -moz-box-shadow: inset 0 0 5px #888;
    -webkit-box-shadow: inset 0 0 5px#888;
    box-shadow: inset 0 0 5px #888;
}
.allRoundInnerShadowL { /*** L shows an inner shadow with no offset and both a blur distance of 5px and a spread distance of 5px: */
    -moz-box-shadow: inset 0 0 5px 5px #888;
    -webkit-box-shadow: inset 0 0 5px 5px#888;
    box-shadow: inset 0 0 5px 5px #888;
}

/*  -https://www.css3.info/preview/box-shadow/
    Example M shows five shadows specified in the following order; firstly a black shadow with a spread 
    distance of px and a blur distance of px, secondly a lime shadow offset to the top right, thirdly a 
    red shadow offset to the bottom right with a blur distance applied, fourthly a yellow shadow offset 
    to the bottom left, and lastly a blue shadow offset to the top left with a blur distance applied:
*/
.backShadowM { /* #Example_M */
    -moz-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
    -webkit-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
    box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
}

/*  -https://www.css3.info/preview/box-shadow/
    Spicing up shadows with RGBa color & border-radius
    The box-shadow property can be further enhanced using CSS3 RGBa colors to create shadows with 
    differing levels of opacity, as demonstrated by the examples below.
*/

.backShadowN { /* #Example_N */
    -moz-box-shadow: 5px 5px rgb(0,0,0);
    -webkit-box-shadow: 5px 5px rgb(0,0,0);
    box-shadow: 5px 5px rgb(0,0,0);
}
.backShadowO { /* #Example_O */
    -moz-box-shadow: 5px 5px rgba(0,0,0,0.7);
    -webkit-box-shadow: 5px 5px rgba(0,0,0,0.7);
    box-shadow: 5px 5px rgba(0,0,0,0.7);
}
.backShadowP { /* #Example_P */
    -moz-box-shadow: 5px 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 5px 5px rgba(0,0,0,0.5);
    box-shadow: 5px 5px rgba(0,0,0,0.5);
}
    /*  Example Q shows a shadow offset to the bottom and right by 5px, 
    with a border-radius of 5px applied to each corner:
    -https://www.css3.info/preview/box-shadow/
*/
.backShadowQ { /*** Q shows a shadow offset to the bottom and right by 5px, with a border-radius of 5px applied to each corner: */
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 5px 5px black;
    -webkit-box-shadow: 5px 5px black;
    box-shadow: 5px 5px black;
}
.backShadowR { /*** R shows the same shadow with a blur distance of 5px: */
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 5px 5px 5px black;
    -webkit-box-shadow: 5px 5px 5px black;
    box-shadow: 5px 5px 5px black;
}
.InnerShadow {
    -moz-box-shadow: inset 0 0 5px 5px #888;
    -webkit-box-shadow: inset 0 0 5px 5px#888;
    box-shadow: inset 0 0 5px 5px #888;
}

/* -http://cssdemos.tupence.co.uk/box-shadow.htm

*/
.Shadow-inset {
    padding: 30px; /*allow enough padding for the shadow not to cover the content*/
    -moz-box-shadow: inset 0 0 25px #246476;
    -webkit-box-shadow: inset 0 0 25px #246476;
    box-shadow: inset 0 0 25px #246476;
}
.Shadow-color {
    margin: 30px; /*at least the size of the outer shadow's blur*/
    padding: 30px; /*at least the size of the outer shadow's blur*/
    -webkit-box-shadow: inset 0 0 25px #7c0e7b, 0 0 20px rgba(76,63,241, .9);
    -moz-box-shadow: inset 0 0 25px #7c0e7b, 0 0 20px rgba(76,63,241, .9);
    box-shadow: inset 0 0 25px #7c0e7b, 0 0 20px rgba(76,63,241, .9);
}
.ThinShadow{
    -moz-box-shadow: inset 0 0 5px #888;
    -webkit-box-shadow: inset 0 0 5px#888;
    box-shadow: inset 0 0 5px #888;
}

/*  
    Table Row Highlighting on Hover
    -https://www.textfixer.com/tutorials/highlight-table-row.php
    <table class="hoverTable"> </table>
*/
.lcHoverTable {
    width: 100%;
    border-collapse: collapse;
}

.lcHoverTable td {
        padding: 7px;
        border: #4e95f4 1px solid;
}
    /* Define the default color for all the table rows */
.lcHoverTable tr {
        background: #b8d1f3;
        background: #fff;
}
    /* Define the hover highlight color for the table row #FBF0D7*/
    .lcHoverTable tr:hover {
        background-color: #faeed2;   /* #ffff99;*/
        background-color: cornsilk;
    }

/*-----------------------------------------------------------------------------*/
.hoverTable {
    width: 100%;
    border-collapse: collapse;
}

.hoverTable td {
  padding: 7px;
  border: #4e95f4 1px solid;
}
    /* Define the default color for all the table rows */
.hoverTable tr {
  background: #b8d1f3;
}
        /* Define the hover highlight color for the table row */
.hoverTable tr:hover {
  background-color: #FFFFE0; /*#faeed2;*/ /*#ffff99;*/
}

/*
    Create A Filtered Table
    -https://www.w3schools.com/howto/howto_js_filter_table.asp
*/
#myInput {
    background-image: url('/css/searchicon.png'); /* Add a search icon to input */
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat;   /* Do not repeat the icon image */
    width: 100%;                    /* Full-width */
    font-size: 16px;                /* Increase font-size */
    padding: 12px 20px 12px 40px;   /* Add some padding */
    border: 1px solid #ddd;         /* Add a grey border */
    margin-bottom: 12px;            /* Add some space below the input */
    background-color:cornsilk;
}

#myTable {
    border-collapse: collapse;      /* Collapse borders */
    width: 100%;                    /* Full-width */
    border: 1px solid #ddd;         /* Add a grey border */
    font-size: 18px;                /* Increase font-size */
}

#myTable th, #myTable td {
        text-align: left;           /* Left-align text */
        padding: 12px;              /* Add padding */
 }

#myTable tr {
        /* Add a bottom border to all table rows */
        border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
        /* Add a grey background color to the table header and on hover */
        /*background-color: #f1f1f1;*/
        background-color: #e1e497;
        background-color: cornsilk;
 }

/*   Table Filter Using JavaScript
    -https://www.vrsofttech.com/code-editor/js/index?file_name=js-filter-table
*/

.TableContainer {
    margin: 0 auto;
    width: 100%;
}

#filterTable {
    border-collapse: collapse;
    width: 100%;
}

#filterTable td, #filterTable th {
        padding: 5px;
        border: 1px solid #ccc;
    }

#filterSearch {
    margin-bottom: 5px;
    padding: 5px;
    float: right;
}

.custom-tooltip.tooltip > .tooltip-inner {
    text-align: left;
    max-width: 500px;
}
/*  
    Scroll Back To Top Button
    -https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
*/
#goTopBtn {
    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 */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: red; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */

    border: 1px solid #ddd; /* Gray border */
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

#goTopBtn:hover {
        background-color: #35b128; /* Add a dark-grey background on hover */
        box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
        background-image: url('../img/arrowup1.png');
        background-repeat: no-repeat;
        background-size: 50px 50px;
        font-display:unset;
}
/*  The Styled CSS
    We will use the CSS variable --bs-primary (which is your standard Bootstrap blue) 
    so that if you ever change your theme color, this button updates automatically.*/
#goCloseBtn {
    position: fixed;
    right: 30px; /* Slightly further from the edge */
    bottom: -100px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Added a slight "bounce" effect */
    z-index: 1000;
    /* WebStaffing Blue Theme Styling */
    background-color: var(--bs-primary);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Perfect circle */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

    /* Hover State */
    #goCloseBtn:hover {
        background-color: #0056b3; /* A slightly darker blue */
        transform: scale(1.1); /* Grows slightly when hovered */
        color: #f8f9fa;
    }

    /* The Active/Show State */
    #goCloseBtn.show {
        bottom: 100px;
    }   

/*  Round Dots / Circles
    -https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_circles
*/
.dot {
    height: 25px;
    width: 25px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
}
/* Add a hover effect (blue shadow) */
dot:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
.dot1 {
    height: 25px;
    width: 25px;
    background-color: cornsilk;
    border-radius: 50%;
    display: inline-block;
}
/* Add a hover effect (blue shadow) */
dot1:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}


/*
    <div class="vlLeft"></div>
    -https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_vertical_line
*/
/* Large rounded green border 
   -https://www.w3schools.com/howto/howto_css_style_hr.asp*/
hr.hrLineG1 {
    border: 10px solid green;
    border-radius: 5px;
}
hr.hrLineB1 {
    border: 10px solid #0B9FE1;
    border-radius: 5px;
}
.vlLeft {
    border-left: 6px solid green;
    height: 500px;
}
.vlCenter {
    border-left: 6px solid green;
    height: 500px;
    position: absolute;
    left: 50%;
    margin-left: -3px;
    top: 0;
}

/*
    <hr class="rounded">
    -https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dividers
*/
/* Rounded border */
hr.rounded {
   border-top: 8px solid #c6f2ab;
   border-radius: 5px;
}
/* Solid border */
hr.solid {
   border-top: 3px solid #bbb;
}
hr.solidGrn{
    border:10px solid green;
    border-radius:5px;
}

/*  Text Divider
    <div class="divider">Lorem Ipsum</div>
    -https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_text_divider
*/
.divider {
    font-size: 30px;
    display: flex;
    align-items: center;
}

.divider::before, .divider::after {
  flex: 1;
  content: '';
  padding: 3px;
  background-color: red;
  margin: 5px;
}

/*  Webkit CSS to control the box around the color in an input[type=color]?
    -https://stackoverflow.com/questions/11167281/webkit-css-to-control-the-box-around-the-color-in-an-inputtype-color
*/
input[type='color'] {
    padding: 0;
    width: 150%;
    height: 150%;
    margin: -25%;
}

.cp_wrapper {
    overflow: hidden;
    width: 22px;  height: 22px;     /*width: 2em;   height: 2em;*/

    /* optional formatting below here */
    border-radius: 50%;
    box-shadow: 1px 1px 3px 0px grey;
    margin: 10px;  /* margin: 1em;*/
}

/*
    What does background-color: transparent mean?
    -https://stackoverflow.com/questions/51979083/what-does-background-color-transparent-mean
*/
.bg-blue {
    background-color: aqua;
}

.bg-transparent {
    background-color: transparent;
}

.bg-white {
    background-color: white;
}

.bg-yellow {
    background-color: yellow;
}
/*
  <p class="example">Resize the browser window to see how the background color of this paragraph changes on different screen sizes.</p>
  -https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_mq_breakpoints
*/

.myBorder {
    padding: 20px;
    color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .myBorder {
        background: red;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .myBorder {
        background: green;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .myBorder {
        background: blue;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .myBorder {
        background: orange;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .myBorder {
        background: pink;
    }
}

/* Cross Browser Examples
   create rounded corners with CSS
   -https://www.css3.info/preview/rounded-border/
*/
.brdrBtn_D {
    height: 5em;
    width: 12em;
    -moz-border-radius: 1em 4em 1em 4em;
    border-radius: 1em 4em 1em 4em;

}
.brdrBtn_D1 {
    /*height: 5em; width: 12em;*/
    height:60px;
    width: 100%;
    -moz-border-radius: 1em 4em 1em 4em;
    border-radius: 1em 4em 1em 4em;
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
    border: 5px solid green;
}

.brdrBtn_E {
    /*height: 65px;  width: 160px;*/
    height: 60px;  width: 100%;
    -moz-border-radius: 25px 10px / 10px 25px;
    border-radius: 25px 10px / 10px 25px;
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);

    border: 2px solid green;
    background: #f4f4f4 url(../img/bg.gif) repeat top left;
}
.brdrBtn_E1 {
    height:auto; width:auto;
    /*height: 50%;  width: 100%;*/
    /* height: 65px; width: 160px;*/
    -moz-border-radius: 25px 10px / 10px 25px;
    border-radius: 25px 10px / 10px 25px;
}
.brdrBtn_E1:hover {
        box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
        /*border: 5px solid green;*/
}
/*
    Image Round 50%
    <img src="img_avatar.png" alt="Avatar" style="width:200px">
    -https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_rounded_images
*/
.imgRound {
    border-radius: 50%;
    vertical-align: middle;
    width: 25px;
}
.imgRound:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
  /*border: 5px solid green;*/
}

/*<img src="img_avatar.png" alt="Avatar" class="avatar">*/
.avatar {
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.avatar:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

.avatar25 {
    vertical-align: middle;

    border: 1px solid #ddd; /* Gray border LC */
    border-radius: 4px; /* Rounded border */
    padding: 5px; /* Some padding */

    width: 25px;
    height: 25px;
    border-radius: 50%;
}
.avatar25:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

.avatar30 {
    vertical-align: middle;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
.avatar30:hover {
   box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

.avatar200 {
    vertical-align: middle;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

.avatar200:hover {
   box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

.zoom {
   /* padding: 50px;
    background-color: green; width: 200px; height: 200px;*/

    transition: transform .2s;
    transition: transform 0.3s ease;   /*Smoth transition*/
    width: 25px; height:25px;
    margin: 0 auto;
}

.zoom:hover {
    -ms-transform: scale(2.5);       /* IE 9 */
    -webkit-transform: scale(2.5);   /* Safari 3-8 */
    transform: scale(2.5);

        /* -ms-transform: scale(1.5);*/ /* IE 9 */
        /* -webkit-transform: scale(1.5);*/ /* Safari 3-8 */
        /*transform: scale(1.5);*/
}

    /*
    -https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_thumbnail_image
*/
.img {
    border: 1px solid #ddd; /* Gray border */
    border-radius: 10px; /* Rounded border */
    padding: 6px; /* Some padding padding: 5px;*/
    width: 150px; /* Set a small width */
    cursor:pointer;
}
/* Add a hover effect (blue shadow) */
.img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

.imgthum {
    border: 1px solid #ddd; /* Gray border */
    border-radius: 4px; /* Rounded border 4px;*/
    padding: 1px; /* Some padding 5px;*/
    width: 50px; /*width: 150px;  Set a small width */
    height: 70px;
}

    /* Add a hover effect (blue shadow) */
.imgthum:hover {
   box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}


.imgRound {
    border-radius: 50%;
}
imgRound:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

.BtnRightShadow {
    -webkit-box-shadow: 3px 3px 4px #363636;
    -moz-box-shadow: 3px 3px 4px #363636;
    box-shadow: 3px 3px 4px #363636;
    border-radius: 10px;
}
.AllSidesShadow {
    -webkit-box-shadow: 0 0 10px rgba(0,0,0, .65);
    -moz-box-shadow: 0 0 10px rgba(0,0,0, .65);
    box-shadow: 0 0 10px rgba(0,0,0, .65);
    border-radius:10px;
    padding-bottom:14px;
}
.AllSidesShadowFtr {
    -webkit-box-shadow: 0 0 10px rgba(0,0,0, .65);
    -moz-box-shadow: 0 0 10px rgba(0,0,0, .65);
    box-shadow: 0 0 10px rgba(0,0,0, .65);
    border-radius: 10px;
    height: 50px;
}

labelD {
    position: relative;
    display: inline-block;
}
/*============================================================================*/
selectD {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 150px;
    outline: none;
    color: blue;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: #fff;
}
/* Select arrow styling */
.notIE labelD:after {
    content: '';
    width: 23px;
    height: 23px;
    position: absolute;
    display: inline-block;
    top: 4px;
    right: 4px;
    background: url(http://www.jewellerynetasia.com/portals/0/Images/social-network-service/google-plus.png) no-repeat right center white;
    pointer-events: none;
}
/*============================================================================
    Side Lines with colors
    -https://stackoverflow.com/questions/5214127/css-technique-for-a-horizontal-line-with-words-in-the-middle
*/
/*<h1 > side lines via flex</h1 >*/
.h1Line {
    margin-top: 50px;
    display: flex;
    background: linear-gradient(to left,gray,lightgray,white,yellow,turquoise);
    background: linear-gradient(to left,yellow,turquoise,white,yellow,turquoise);
    background: linear-gradient(to left,turquoise,yellow,white,yellow,turquoise);
}
.h1Line:before, h1:after {
        color: white;
        content: '';
        flex: 1;
        border-bottom: groove 2px;
        margin: auto 0.25em;
        box-shadow: 0 -1px; /* ou 0 1px si border-style:ridge */
}
/*
    Gradient that starts at 60% of the gradient line
    background: linear-gradient(135deg, orange 60%, cyan);
*/


/* =========== Top Tooltip w/ Bottom Arrow =====================
   This example demonstrates how to add an arrow to the top of the tooltip.
   Notice that we set the bottom border color this time:
      arrow top
         ^
    [text bottom]

  <div class="tooltip">Hover over me
   <span class="tooltiptext">Tooltip text</span>
  </div>
*/
.Ttooltip { /* Tooltip container */
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/ /* If you want dots under the hoverable text */
}

    /* Tooltip text */
.Ttooltip .Ttooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}

.Ttooltip .Ttooltiptext::after {
    content: "";
    position: absolute; /* Position the tooltip text - see examples below! */
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
 }
/* Show the tooltip text when you mouse over the tooltip container */
.Ttooltip:hover .Ttooltiptext {
    visibility: visible;
}

/* ===============  Right Tooltip w/ Left Arrow ================*/
.Rtooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.Rtooltip .Rtooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        top: -5px;
        left: 110%;
    }

.Rtooltip .Rtooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
   border-color: transparent black transparent transparent;
}

.Rtooltip:hover .Rtooltiptext {
  visibility: visible;
}

/* ============ Left Tooltip w/ Right Arrow ================*/
.Ltooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.Ltooltip .Ltooltiptext {
   visibility: hidden;
   width: 120px;
   background-color: black;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   position: absolute;
   z-index: 1;
   top: -5px;
   right: 110%;
}

.Ltooltip .Ltooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}

.Ltooltip:hover .Ltooltiptext {
   visibility: visible;
}
/* This is to print lines to the form and also when it is being printed
    Style for printable form lines 
    Add the following code to the end of the file:*/
.form-line {
    border-bottom: 1px solid #ccc;
    min-height: 24px;
    margin-bottom: 1rem;
}