@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


:root {
    --poppins: "Poppins", sans-serif;
    --primary-color: rgb(115, 102, 255);
    --second-color: rgb(45 49 58 / 54%);
    --third-color:rgb(69, 127, 204);
    --hover-color:rgb(102, 91, 233);
    --main-bg: #f5f7ff;
    --side-bg: rgb(38 41 50);
    --navbar-color: #ffffff;
    --footer-color: #ffffff;
    --border: #e3e3e3;
    --border-dark: rgb(116, 110, 173);
    --white: #ffffff;
    --black: #000000;
  }

body{
    background-color: var(--main-bg);
}

input[type="radio"]:checked{
    visibility:hidden;
}

input[type="radio"]{
    visibility:hidden;
}

.custom-margin{
    margin-left: -18px;
}



.btn-custom-primary {
    background-color: var(--primary-color);
    color: var(--white);
    border: 1px solid var(--border-dark);
}
.btn-custom-primary:hover {
    background-color: var(--hover-color);
    color: var(--white);
    border: 1px solid var(--border-dark);
}

.btn-edit{
    background-color: rgb(119, 212, 119);
    color: var(--white);
    border: 1px solid rgb(104, 194, 104);
}

.btn-edit:hover{
    background-color: rgb(69, 138, 69);
    color: var(--white);
    border: 1px solid rgb(69, 138, 69);
}

.btn-delete{
    background-color: rgb(212, 119, 119);
    color: var(--white);
    border: 1px solid rgb(180, 88, 88);
}

.btn-delete:hover{
    background-color: rgb(138, 69, 69);
    color: var(--white);
    border: 1px solid rgb(138, 69, 69);
}

.btn-time{
    background-color: var(--primary-color);
    color: var(--white);
    border: 1px solid var(--primary-color);
}

.btn-time:hover{
    background-color: var(--hover-color);
    color: var(--white);
    border: 1px solid var(--hover-color);
}

.btn-outline-time{
    color: var(--black);
    border: 1px solid var(--primary-color);
}

.btn-outline-time:hover{
    color: var(--black);
    border: 1px solid var(--primary-color);
}


.custom-container{
    margin-top: 20px;
}

.custom-card{
    border-radius: 0;
    box-shadow: 0px 6px 12px -4px rgba(0,0,0,0.44);
}

.head{
    height: 44px;
    width: 100%;
    background: var(--primary-color);
    padding: 10px 0px 0px 14px;
}
.head h4{
    color: #fff;
    font-size: 18px;
}

#step-header{
    border-bottom: 1px solid var(--primary-color);
}

#ui-datepicker-div{
    z-index: 5;
}

#time{
    text-align: center;
}

.stepper-wrapper {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .step-title {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
  }

  .step-title::before {
    position: absolute;
    content: "";
    border-bottom: 2px solid #ccc;
    width: 100%;
    top: 20px;
    left: -50%;
    z-index: 2;
  }

  .step-title::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #ccc;
    width: 100%;
    top: 20px;
    left: 50%;
    z-index: 2;
  }

  .step-title .step-counter {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    margin-bottom: 6px;
  }

  .step-title.active {
    font-weight: bold;
  }

  .step-title.completed .step-counter {
    background-color: #4bb543;
    color: #fff;
  }

  .step-title.completed::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #4bb543;
    width: 100%;
    top: 20px;
    left: 50%;
    z-index: 3;
  }

  .step-title:first-child::before {
    content: none;
  }
  .step-title:last-child::after {
    content: none;
  }