/* 
    ****** Helpful Links *****
    mycolor.space 
    www.hover.dev/css-color-palette-generator       (primary #2272B1 secondary 160 Hue degrees)
    fonts.google.com/icons
    www.svgrepo.com/collections
    www.svgrepo.com/vectors/linkedin
    www.svgrepo.com/collection/flux-tiny-oval-line-icons/3
    **************************
  */

* {
  margin: 0;
  padding: 0;
}

:root {
    /* ************************************************** */
    /* Settings                                           */
    /* ************************************************** */
    color-scheme: light dark;
    /* ************************************************** */
    /* Variables                                          */
    /* ************************************************** */
    --font-family: 'Segoe UI', Tahoma, Helvetica Neue, Helvetica, Geneva, Verdana, Sans-Serif;
    --svg-size: 1.35rem;
    --header-height: 0px;
    --footer-height: 0px;
    /* ************************************************** */
    /* Website Color Palette                              */
    /* ************************************************** */
    /*
        primary     #2272B1   rgba( 34, 114, 177, .5)
          clear     #DAEBF8   rgba(218, 235, 248, .5)
          light     #2F8DD7   rgba( 47, 141, 215, .5)
          dark      #1A5686   rgba( 26,  86, 134, .5)
        secondary   #B13122   rgba(177,  49,  34, .5)
          clear     #F8DDDA   rgba(248, 221, 218, .5)
          light     #D7412F   rgba(215,  65,  47, .5)
          dark      #86251A   rgba(134,  37,  26, .5)

        black       #232729   rgba( 35,  39,  41, .5)
          light     #9EA8AD   rgba(158, 168, 173, .5)
          dark      #0C0D0D   rgba( 12,  13,  13, .5)
        white       #FCFCFC   rgba(252, 252, 252, .5)
          light     #FEFEFE   rgba(254, 254, 254, .5)
          dark      #FAFAFA   rgba(250, 250, 250, .5)

        success     #22B122   rgba( 34, 177,  34, .5)
          Content   #DAF8DA   rgba(218, 248, 218, .5)
        warning     #B1B122   rgba(177, 177,  34, .5)
          Content   #000000   rgba(  0,   0,   0, .5)
        Error       #B12222   rgba(177,  34,  34, .5)
          Content   #F8DADA   rgba(248, 218, 218, .5)
  */
    /* primary Color - Blue */
    --primary: #2272B1;
    --primary-rgba: rgba( 34, 114, 177, .5);
    --primary-clear: #DAEBF8;
    --primary-clear-rgba: rgba(218, 235, 248, .5);
    --primary-light: #2F8DD7;
    --primary-light-rgba: rgba( 47, 141, 215, .5);
    --primary-dark: #1A5686;
    --primary-dark-rgba: rgba( 26, 86, 134, .5);
    /* secondary Color - Red */
    --secondary: #B13122;
    --secondary-rgba: rgba(177, 49, 34, .5);
    --secondary-clear: #F8DDDA;
    --secondary-clear-rgba: rgba(248, 221, 218, .5);
    --secondary-light: #D7412F;
    --secondary-light-rgba: rgba(215, 65, 47, .5);
    --secondary-dark: #86251A;
    --secondary-dark-rgba: rgba(134, 37, 26, .5);
    /* tertiary Color - Yellow */
    --tertiary: #ECB700;
    --tertiary-rgba: rgba(236, 183, 0, .5);
    --tertiary-clear: #FFF5D2;
    --tertiary-clear-rgba: rgba(255, 245, 210, .5);
    --tertiary-light: #FABE00;
    --tertiary-light-rgba: rgba(250, 190, 0, .5);
    --tertiary-dark: #B98F00;
    --tertiary-dark-rgba: rgba(185, 143, 0, .5);
    /* grey Color */
    --grey-dark: #828282;
    --grey-dark-rgba: rgba( 130, 130, 130, .5);
    --grey: #A0A0A0;
    --grey-rgba: rgba( 160, 160, 160, .5);
    --grey-light: #BEBEBE;
    --grey-light-rgba: rgba( 190, 190, 190, .5);
    /* dark Color - blacks  */
    --black-deep: #010101;
    --black-true: #2D2D2D;
    --black-dark: #191919;
    --black-dark-rgba: rgba( 20, 20, 20, .5);
    --black: #2D2D2D;
    --black-rgba: rgba( 30, 30, 30, .5);
    --black-light: #373737;
    --black-light-rgba: rgba( 45, 45, 45, .5);
    /* light Color - whites */
    --white-deep: #FEFEFE;
    --white-true: #F0F0F0;
    --white-light: #FAFAFA;
    --white-light-rgba: rgba(250, 250, 250, .5);
    --white: #F0F0F0;
    --white-rgba: rgba(240, 240, 240, .5);
    --white-dark: #E6E6E6;
    --white-dark-rgba: rgba(230, 230, 230, .5);
    /* Color Notifications  */
    --success-dark: #22B122;
    --success-dark-rgba: rgba( 34, 177, 34, .5);
    --success-light: #DAF8DA;
    --success-light-rgba: rgba(218, 248, 218, .5);
    --warning-dark: #B1B122;
    --warning-dark-rgba: rgba(177, 177, 34, .5);
    --warning-light: #000000;
    --warning-Content-rgba: rgba( 0, 0, 0, .5);
    --error-dark: #B12222;
    --error-dark-rgba: rgba(177, 34, 34, .5);
    --error-light: #F8DADA;
    --error-light-rgba: rgba(248, 218, 218, .5);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* grey Color */
        --grey-light: #828282;
        --grey-light-rgba: rgba( 130, 130, 130, .5);
        --grey: #A0A0A0;
        --grey-rgba: rgba( 160, 160, 160, .5);
        --grey-dark: #BEBEBE;
        --grey-dark-rgba: rgba( 190, 190, 190, .5);
        /* dark Color - whites */
        /* *** Switch -light and -dark colors for white set in dark mode ***  */
        --white-deep: #010101;
        --white-light: #191919;
        --white-light-rgba: rgba( 20, 20, 20, .5);
        --white: #2D2D2D;
        --white-rgba: rgba( 30, 30, 30, .5);
        --white-dark: #373737;
        --white-dark-rgba: rgba( 45, 45, 45, .5);
        /* light Color - blacks */
        --black-deep: #FEFEFE;
        --black-light: #FAFAFA;
        --black-light-rgba: rgba(250, 250, 250, .5);
        --black: #F0F0F0;
        --black-rgba: rgba(240, 240, 240, .5);
        --black-dark: #E6E6E6;
        --black-dark-rgba: rgba(230, 230, 230, .5);
    }
}

html, body {
    background-color: var(--white-deep);
    color: var(--black-dark);
    font-size: .95rem;
    font-family: var(--font-family);
    height: auto;
    min-height: 100vh;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}

a {
  color: var(--primary-light);
  text-decoration: none;
}

  a:visited {
    color: var(--primary);
  }

  a:hover {
    color: var(--secondary-light);
  }

  a:active {
    color: var(--tertiary-light);
  }

h1 {
  font-size: 2rem;
  font-weight: 450;
}

h2 {
    font-size: 1.5rem;
    font-weight: 400;
}

h3 {
    font-size: 1.25rem;
    font-weight: 350;
}

h4 {
    font-size: 1rem;
    font-weight: 300;
}

ul {
  padding-left: 2.5rem;
}
/* *** <ul> <ol> no bullets *** */
.no-bullets {
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin: 0 0 .5rem 0;
}

/*
  .nav-link {
  color: var(--tertiary);
  text-decoration: underline;
}
.a-active {
  color: var(--secondary);
  text-decoration: underline overline yellow;
}
*/

/*  .nav-link:hover {
    text-decoration: underline;
    color: var(--secondary);
  }

  .nav-link:active {
    color: yellow;
  }

  .nav-link:visited {
    text-decoration: none;
  }
*/

svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
  stroke: none;
}



.bold {
    font-weight: 600;
}

/* ************************************************** */
/* Boxes                                              */
/* ************************************************** */
.dv-bx {
    flex: 1;
    color: var(--black);
    background-color: var(--white);
    box-shadow: 0 0 .3125rem .3125rem var(--white-rgba);
    border-radius: .625rem;
    margin: .10rem;
    break-inside: avoid;
    padding: .3125rem 1.1rem .3125rem 1.1rem;
    width: auto;
}

  .dv-bx a {
    color: var(--black);
    text-decoration: underline var(--black);
  }

    .dv-bx a:hover {
      color: var(--primary-light);
      text-decoration: underline var(--primary-light);
    }

    .dv-bx a:active {
      color: var(--secondary-light);
      text-decoration: underline var(--secondary-light);
    }

.bx-clear {
  background-color: var(--white-light);
}

.bx-primary {
  color: var(--primary-clear);
  background-color: var(--primary);
  box-shadow: 0 0 .3125rem .125rem var(--primary-rgba);
}

  .bx-primary a {
    color: var(--primary-clear);
    text-decoration: underline var(--primary-clear);
  }

    .bx-primary a:hover {
      color: var(--secondary);
      text-decoration: underline var(--secondary);
    }

    .bx-primary a:active {
      color: var(--tertiary);
      text-decoration: underline var(--tertiary);
    }

.bx-primary-clear {
  color: var(--primary);
  background-color: var(--primary-clear);
  box-shadow: 0 0 .3125rem .3125rem var(--primary-clear-rgba);
}

  .bx-primary-clear a {
    color: var(--primary);
    text-decoration: underline var(--primary);
  }

    .bx-primary-clear a:hover {
      color: var(--secondary);
      text-decoration: underline var(--secondary);
    }

    .bx-primary-clear a:active {
      color: var(--tertiary);
      text-decoration: underline var(--tertiary);
    }

.bx-secondary {
  color: var(--secondary-clear);
  background-color: var(--secondary);
  box-shadow: 0 0 .3125rem .125rem var(--secondary-rgba);
}

  .bx-secondary a {
    color: var(--secondary-clear);
    text-decoration: underline var(--secondary-clear);
  }

    .bx-secondary a:hover {
      color: var(--primary);
      text-decoration: underline var(--primary);
    }

    .bx-secondary a:active {
      color: var(--tertiary-light);
      text-decoration: underline var(--tertiary-light);
    }

.bx-secondary-clear {
  color: var(--secondary);
  background-color: var(--secondary-clear);
  box-shadow: 0 0 .3125rem .3125rem var(--secondary-clear-rgba);
}

  .bx-secondary-clear a {
    color: var(--secondary);
    text-decoration: underline var(--secondary);
  }

    .bx-secondary-clear a:hover {
      color: var(--primary);
      text-decoration: underline var(--primary);
    }

    .bx-secondary-clear a:active {
      color: var(--tertiary-dark);
      text-decoration: underline var(--tertiary-dark);
    }

.bx-tertiary {
  color: var(--tertiary-clear);
  background-color: var(--tertiary);
  box-shadow: 0 0 .3125rem .125rem var(--tertiary-rgba);
}

  .bx-tertiary a {
    color: var(--tertiary-clear);
    text-decoration: underline var(--tertiary-clear);
  }

    .bx-tertiary a:hover {
      color: var(--primary);
      text-decoration: underline var(--primary);
    }

    .bx-tertiary a:active {
      color: var(--secondary);
      text-decoration: underline var(--secondary);
    }

.bx-tertiary-clear {
  color: var(--tertiary);
  background-color: var(--tertiary-clear);
  box-shadow: 0 0 .3125rem .3125rem var(--tertiary-clear-rgba);
}

  .bx-tertiary-clear a {
    color: var(--tertiary);
    text-decoration: underline var(--tertiary);
  }

    .bx-tertiary-clear a:hover {
      color: var(--primary);
      text-decoration: underline var(--primary);
    }

    .bx-tertiary-clear a:active {
      color: var(--secondary);
      text-decoration: underline var(--secondary);
    }

.dv-bx a {
  padding: 0 0 0 0;
  /* change hyperlink padding in all boxes*/
}

/* ************************************************** */
/* Buttons                                            */
/* ************************************************** */

.btn {
  color: var(--black-dark);
  background-color: var(--white-dark);
  border: .125rem solid var(--black);
  border-radius: .3125rem;
  /*box-shadow: 0 0 .3125rem .3125rem var(--primary-rgba);*/
  padding: .3125rem .625rem .3125rem .625rem;
  margin: .3125rem;
  text-decoration: none;
  width: max-content;
}

  .btn a {
    color: var(--black-dark);
    border: none;
    text-decoration: none;
  }

  .btn:hover {
    font-weight: 600;
    border: .125rem solid var(--black-dark);
  }

    .btn:hover {
      color: var(--white-light);
      background-color: var(--black);
    }

.btn-primary {
  color: var(--primary);
  border: .125rem solid var(--primary);
}

  .btn-primary:hover {
    border: .125rem solid var(--primary);
  }

    .btn-primary:hover {
      color: var(--primary);
      background-color: var(--primary-clear);
    }

.btn-secondary {
  color: var(--secondary);
  border: .125rem solid var(--secondary);
}

  .btn-secondary:hover {
    border: .125rem solid var(--secondary);
  }

    .btn-secondary:hover {
      color: var(--secondary);
      background-color: var(--secondary-clear);
    }

.btn-tertiary {
  color: var(--tertiary);
  border: .125rem solid var(--tertiary);
}

  .btn-tertiary:hover {
    border: .125rem solid var(--tertiary);
  }

    .btn-tertiary:hover {
      color: var(--tertiary);
      background-color: var(--tertiary-clear);
    }

/* ************************************************** */
/* Section                                            */
/* ************************************************** */
.section {
  scroll-snap-align: start;
}


/* ************************************************** */
/* Controls                                           */
/* ************************************************** */
/* *** Checkbox | RadioButton *** */
.chckbx-rdbttn {
  width: 1rem;
  height: 1rem;
  margin: .3125rem .5rem;
  padding: .3125rem .3125rem;
  vertical-align: top;
  background-color: var(--white-light);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: .1rem solid var(--black-light-rgba);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}

  .chckbx-rdbttn:hover,
  .chckbx-rdbttn-lbl:hover {
    cursor: pointer;
  }

  .chckbx-rdbttn:checked {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
  }

  .chckbx-rdbttn[type=radio] {
    border-radius: 50%;
  }

  .chckbx-rdbttn:checked[type=checkbox] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")
  }

  .chckbx-rdbttn:checked[type=radio] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='1.75' fill='%23fff'/%3e%3c/svg%3e")
  }

  .chckbx-rdbttn[type=checkbox]:indeterminate {
    background-color: #0d6efd;
    border-color: #0d6efd;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")
  }


/* *** Textbox *** */
/* --- Sample ---
    <label for="Txt1" class="InptTxtLbl">Mobile: </label>
    <InputText id="Txt1" class="InptTxt" placeholder="Mobile" @bind-Value="bindMobile" />
*/
.txtbx-lbl:has(+ .txtbx:focus) {
  color: var(--primary-light);
}

.txtbx {
  display: block;
  width: 100%;
  padding: .3rem .5rem .5rem .5rem;
  color: var(--black);
  background-color: var(--white-deep);
  border-radius: .3rem;
  border: 0.0625rem ridge var(--black-light);
  outline: none;
}

  .txtbx:focus {
    border-color: var(--primary-light);
  }

/* *** Textbox Special Effect ***  */
/* --- Sample ---
    <div class="txtbx-dv" >
      <InputText id="Txt" class="txtbx-cntrl" placeholder="Mobile" @bind-Value="bindMobile" / >
      <label for="Txt" >Mobile: </label>
    </div>
*/
.txtbx-dv {
  position: relative;
}

.txtbx-cntrl {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  color: var(--black);
  background-color: var(--white-deep);
  background-clip: padding-box;
  border: .063rem solid var(--black-light);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

  .txtbx-cntrl:focus {
    color: var(--black-dark);
    border-color: var(--primary-light);
    outline: 0;
    box-shadow: 0 0 0 .25rem var(--primary-clear-rgba);
  }

.txtbx-dv > .txtbx-cntrl {
  height: calc(3.5rem + .125rem);
  line-height: 1.25rem;
}

.txtbx-dv > label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 1rem .75rem;
  pointer-events: none;
  border: .1rem solid transparent;
  transform-origin: 0 0;
  transition: opacity .1s ease-in-out,transform .1s ease-in-out;
}

.txtbx-dv > .txtbx-cntrl {
  padding: 1rem .75rem;
}

  .txtbx-dv > .txtbx-cntrl::-moz-placeholder {
    color: transparent;
  }

  .txtbx-dv > .txtbx-cntrl::placeholder {
    color: transparent;
  }

  .txtbx-dv > .txtbx-cntrl:focus {
    padding-top: 1.625rem;
    padding-bottom: .625rem;
  }

  .txtbx-dv > .txtbx-cntrl:not(:-moz-placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: .625rem;
  }

  .txtbx-dv > .txtbx-cntrl:not(:placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: .625rem;
  }

  .txtbx-dv > .txtbx-cntrl:-webkit-autofill {
    padding-top: 1.625rem;
    padding-bottom: .625rem;
  }

  .txtbx-dv > .txtbx-cntrl:not(:-moz-placeholder-shown) ~ label {
    color: var(--primary-light);
    opacity: .80;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
  }

  .txtbx-dv > .txtbx-cntrl:focus ~ label,
  .txtbx-dv > .txtbx-cntrl:not(:placeholder-shown) ~ label {
    color: var(--primary-light);
    opacity: .80;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
  }

/* *** Calendar *** */
.DtBx {
  cursor: default;
  padding: .5rem;
  border: .0625rem ridge var(--black-light);
  border-radius: .25rem;
  width: 10rem;
  box-sizing: border-box;
  outline: 0;
}

  .DtBx:hover {
    cursor: pointer;
  }

  .DtBx:focus

  .Date:focus::-webkit-calendar-picker-indicator {
    filter: invert(0.5) sepia(1) saturate(5) hue-rotate(180deg);
  }

/*.Date::-webkit-datetime-edit {
    color: var(--primary-clear);*/ /* Change text color if needed */
/*}*/

/* *** Button *** */
.bttn {
  color: var(--black-light);
  background-color: var(--white-deep);
  border: .0625rem solid var(--black-light);
  border-radius: .3125rem;
  padding: .625rem 1.25rem;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

  .bttn:hover {
    color: var(--black);
    background-color: var(--grey);
    border: .0625rem solid var(--black);
  }

  .bttn:active {
    color: var(--white-dark);
    background-color: var(--black-deep);
    border: .0625rem solid var(--black-light);
  }


.bttn-primary {
    color: var(--primary-light);
    background-color: var(--white-true);
    border: .0625rem solid var(--primary-light);
}

    .bttn-primary:hover {
        color: var(--primary-light);
        background-color: var(--primary-clear);
        border: .0625rem solid var(--primary-light);
    }

    .bttn-primary:active {
        color: var(--primary-clear);
        background-color: var(--primary-dark);
        border: .0625rem solid var(--primary-clear);
    }

.bttn-secondary {
    color: var(--secondary-light);
    background-color: var(--white-true);
    border: .0625rem solid var(--secondary-light);
}

  .bttn-secondary:hover {
    color: var(--secondary-light);
    background-color: var(--secondary-clear);
    border: .0625rem solid var(--secondary-light);
  }

  .bttn-secondary:active {
    color: var(--secondary-clear);
    background-color: var(--secondary-dark);
    border: .0625rem solid var(--secondary-light);
  }

.bttn-tertiary {
    color: var(--tertiary-light);
    background-color: var(--white-true);
    border: .0625rem solid var(--tertiary-light);
}

  .bttn-tertiary:hover {
    color: var(--tertiary-light);
    background-color: var(--tertiary-clear);
    border: .0625rem solid var(--tertiary-light);
  }

  .bttn-tertiary:active {
    color: var(--tertiary-clear);
    background-color: var(--tertiary-dark);
    border: .0625rem solid var(--tertiary-light);
  }

/* *** magnifier *** */
.magnifier {
    display: none;
    position: absolute;
    background-color: var(--white-light);
    background-position: center;
    background-repeat: no-repeat;
    border: .125rem solid var(--primary-light);
    border-radius: 50%;
    width: 40rem;
    height: 40rem;
    overflow: hidden;
    pointer-events: none;
    object-fit: cover;
    transition: transform 1s ease-in-out;
    z-index: 10;
}

/* ************************************************** */
/* Data Control Network                               */
/* ************************************************** */

/* Fallback font stack for Haettenschweiler 
    https: //www.onlinewebfonts.com/download/97d6f29a4bda3a872dad26cc5b2d0d7b
*/
@import url(https://db.onlinewebfonts.com/c/97d6f29a4bda3a872dad26cc5b2d0d7b?family=Haettenschweiler);
@font-face {
    font-family: "Haettenschweiler";
    src: url("https://db.onlinewebfonts.com/t/97d6f29a4bda3a872dad26cc5b2d0d7b.eot");
    src: url("https://db.onlinewebfonts.com/t/97d6f29a4bda3a872dad26cc5b2d0d7b.eot?#iefix")format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/97d6f29a4bda3a872dad26cc5b2d0d7b.woff2")format("woff2"), url("https://db.onlinewebfonts.com/t/97d6f29a4bda3a872dad26cc5b2d0d7b.woff")format("woff"), url("https://db.onlinewebfonts.com/t/97d6f29a4bda3a872dad26cc5b2d0d7b.ttf")format("truetype"), url("https://db.onlinewebfonts.com/t/97d6f29a4bda3a872dad26cc5b2d0d7b.svg#Haettenschweiler")format("svg");
}

.dcn-blue {
    font-style: italic;
    font-family: "Haettenschweiler";
    background: linear-gradient(to top,#2272B1, #1EAFDE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dcn-red {
    font-style: italic;
    font-family: "Haettenschweiler";
    background: linear-gradient(to top,#A00000, #FF0000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dcn-black {
    font-style: italic;
    font-family: "Haettenschweiler";
    background: linear-gradient(to bottom,var(--black-light), var(--black-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dcn-white {
    font-style: italic;
    font-family: "Haettenschweiler";
    background: linear-gradient(to bottom,var(--white-light), var(--white-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}