img{
            max-width:100%;
            height:auto;
        }

        /* Add Animation */
        @-webkit-keyframes slideIn {
            from {
                bottom: -300px;
                opacity: 0
            }

            to {
                bottom: 0;
                opacity: 1
            }
        }

        @keyframes slideIn {
            from {
                bottom: -300px;
                opacity: 0
            }

            to {
                bottom: 0;
                opacity: 1
            }
        }

        @-webkit-keyframes fadeIn {
            from {
                opacity: 0
            }

            to {
                opacity: 1
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0
            }

            to {
                opacity: 1
            }
        }



        /* Contact button  */

        .btn {
            border: 2px solid #000;
            border-radius: 10px;
            background-color: white;
            color: #000;
            /* padding: 14px 28px; */
            font-size: 16px;
            cursor: pointer;
            width:200px;
            min-height:100px;
            font-weight: bold;
            /*margin:0 auto;*/
            margin: 13px 25px 13px 25px; /* Button Spacing in between */
            text-shadow: 2px 0 #888888;
            /*text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,15);*/
            letter-spacing:2.5px;
        }



        .logoutbtn {
            border: 2px solid black;
            border-radius: 10px;
            background-color: #92a1cc;
            color: black;
            /* padding: 14px 28px; */
            font-size: 15px;
            cursor: pointer;
            /* width:220px; */
            /* min-height:100px; */
            font-weight: bold;
            /*margin:0 auto;*/
            /* margin: 13px 50px 12px 48px; /* Button Spacing in between */
            text-shadow: 2px 0 #888888;
            /*text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,15);*/
            /* letter-spacing:2px; */
            display:inline-block;
            padding:5px;
            margin: 10px auto;
            outline:0 !important;
        }





        /* Contact button shadow and borders*/
        .success {

            border:2px solid #000;
            border-color: black;
            color: #000;
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.19);
            /*width:200px;*/
            min-height:100px;

        }


        /* Contact button hover */
        .success:hover {
            background-color: #282828;
            color: white;
            border:none;
        }



        /* Contact button shadow and borders*/
        .successLogout {

            border:2px solid #000;
            border-color: black;
            color: black;
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.19);
            /*width:200px;*/
            /* min-height:100px; */

        }


        /* Contact button hover */
        .successLogout:hover {
            background-color: #282828;
            color: white;
            border:2px solid #fff;
        }


        /* Button active color */
        .current {
            background-color: #282828 !important;
            color: #ffffff;
            font-weight: bold;
            /* text-shadow: 2px 0 #888888; */
        }


        .inactive {

            border:2px solid #000;
            border-color: black;
            color: #000;
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.19);
            /*width:200px;*/
            /* min-height:100px; */

        }







       /*  .btn .btnClear{margin-left:100px;}*/


        /* This is if you want all labels with the Astericks marks */
        /*.required label {
            font-weight: bold;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 13px;
        }
        .required label:after {
            color: #e32;
            content: ' *';
            display:inline;
        }*/


        /* This is if you want only specific labels with the Astericks marks */




        /* This is for the placeholder text formatting in a input textbox */
/*        ::-webkit-input-placeholder {
          color: #d1d1d1;
          font-size: 13px;
        }
        ::-moz-placeholder {
          color: #d1d1d1;
          font-size: 13px;
        }
        :-ms-input-placeholder {
          color: #d1d1d1;
          font-size: 13px;
        }
        ::placeholder {
          color: #d1d1d1;
          font-size: 13px;
        }
*/

    .contact1 .logo{

        background:none;
        align-items: center;
        margin:5px auto;

    }



/*    .button-container
    {
      width:1100px;
      margin:0 auto;
      text-align: center;
      padding:0px 0px 25px 0px;
    }*/


    .container-contact1
    {
      display:none;
      max-width:850px;
      margin:0 auto;
      /*text-align: left;*/
      background: #fff;
      /*padding: 50px;   */
      border-radius:15px;
       -webkit-animation-name: fadeIn;
            -webkit-animation-duration: 1s;
            animation-name: fadeIn;
            animation-duration: 1s;
            padding:20px;
        -moz-animation-name:fadeIn;
        -moz-animation-duration:1s;


    }


/* Close X Button on top right of the form */

    .close {
      float:right;
      right: 32px;
      top: 32px;
      /* width: 30px; */
      /* height: 30px; */
      opacity: 0.3;
      font-weight: bold;
      color: black;
      border:2px solid #ccc !important;
      font-size: 1.5em;

    }

    .close:hover {
      opacity: 1;
    }

    .close:hover,
            .close:focus {
                color: #000000;
                background-color: #93d3fa;
                text-decoration: none;
                cursor: pointer;
                border:2px solid #000 !important;
            }




/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 600px) {


 .container-contact1 {
            margin:0 auto;
            width:85%;
            /*padding:20px;*/

        }

}




























.containerRadio1 {
  /* display: block; */
  position: relative;
  padding-left: 27px;
  /* margin-right: 12px; */
  cursor: pointer;
  /*font-size: 22px;*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 20px 50px;
}

/* Hide the browser's default radio button */
.containerRadio1 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 17px;
  width: 17px;
  background-color: #eee;
  border-radius: 50%;
  box-shadow: 0 3px 7px 0;
}

/* On mouse-over, add a grey background color */
.containerRadio1:hover input~.checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.containerRadio1 input:checked~.checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.containerRadio1 input:checked~.checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.containerRadio1 .checkmark:after {
  top: 5px;
  left: 4.9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

#EmpOrCust {
  /* padding-right: 50px; */
  margin:auto;
}




/* MULTI_LIST DROPDOWN FOR "TRAINING NEEDED" ON NEWHIRE FORM */

.multi-list{

  /* height: 50px; */
  border-radius: 25px;
  /* padding: 0 20px; */

  height: 50px;
  border-radius: 25px;
  padding: 0 20px;
  border: 1px solid #ccc;

  display: block;
  width: 100%;
  background: #e6e6e6;
  background: #fafafa;
  font-family: Montserrat-Bold;
  font-size: 13px;
  line-height: 1.5;
  color: #666666;
  border: 1px solid rgba(0,0,0,.15);

}



/* Ensure dropdown button text is aligned left */
.wrap-input1 .dropdown-toggle {
  text-align: left;
  width: 100%; /* Make sure the button takes the full width */
  padding: 0 20px; /* Optional: Add some padding for alignment */
}

.wrap-input1 {
  position: relative; /* Ensures dropdown positioning relative to its container */
}

.wrap-input1 .dropdown-menu {
  position: absolute;
  top: auto; /* Allow the menu to position itself correctly in the upward direction */
  bottom: 100%; /* Position the dropdown above the button */
  z-index: 1050; /* Ensure it stays above other elements */
  left: 0; /* Align to the left side of the button */
  right: auto; /* Prevent it from stretching beyond its container */
}

.wrap-input1 .dropdown.dropup .dropdown-toggle::after {
  display: none; /* Hide the default dropdown arrow */
}

/* Optional: Add a custom arrow pointing upwards */
.wrap-input1 .dropdown-menu::before {
  content: "";
  position: absolute;
  bottom: -7px; /* Position the arrow right above the button */
  left: 10px; /* Position it to align with the dropdown button */
  border-width: 0 7px 7px 7px;
  border-style: solid;
  border-color: transparent transparent #ffffff transparent; /* Arrow color */
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 5px;
  margin: 2px 10px;
  font-size: 13px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 10px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 8px 8px 12px rgba(0, 0, 0, .175);

}

/* Flexbox to align checkboxes and labels */
.dropdown-menu .px-3.py-2 {
  display: flex;
  align-items: center; /* Align items vertically center */
  padding: 4px 10px; /* Reduce padding for tighter spacing */
  box-sizing: border-box; /* Ensure padding is included in the width/height */
  margin: 0; /* Remove margin between items */
}



/* Style for checkboxes */
.dropdown-menu input[type="checkbox"] {
  margin-right: 8px; /* Space between checkbox and label */
  flex-shrink: 0; /* Prevent checkbox from shrinking */
  vertical-align: middle; /* Ensure checkbox aligns with the middle of the line */
}

/* Style for labels */
.dropdown-menu label {
  line-height: 1; /* Set line-height to 1 to ensure labels align with checkboxes */
  color: blue; /* Change label color to blue */
  display: inline-flex;
  align-items: center; /* Center the label text vertically */
}


/* Styles for custom validation */
.dropdown-toggle.invalid {
  border-color: red; /* Border color when validation fails */
}

.dropdown-toggle.valid {
  border-color: green; /* Border color when validation succeeds */
}

.dropdown-menu .px-3.py-2 {
  display: flex;
  align-items: center;
  padding: 4px 10px;
  margin: 0;
}

.dropdown-menu input[type="checkbox"] {
  margin-right: 8px;
}

.dropdown-menu label {
  color: blue;
  display: inline-flex;
  align-items: center;
}


/* END OF MULTI_LIST DROPDOWN  */