.margin-top-step{
    margin-top: 50px;
}
.actions ul {
    overflow: hidden;
}

.actions ul li {
    border-radius: 0;
    position: relative;
    width: 370px;
    height: 50px;
    margin-bottom: 20px;
 
    
}
.actions ul li a {
    color: #fff;
    text-decoration: none;
    width: 370px;
    height: 50px;
    text-align: center;
    font-family:'GraphikTH-SemiBold';
    font-size: 17px;
    line-height: 28px;
    padding: 10px 40px;
}
.button-next-step .back-display{
    visibility: hidden !important;
}
.image-box-section2{
   width: 100%;
   height: 328px;
}
.box-radio-section2{
  background-color: #fff;
  margin-top: 20px;
  padding: 20px;
  margin-bottom: 20px;
  height: 60px;
}
.image-box-section2{
    width: 100%;
    height: 328px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.box-select-section2{
 
    margin-top: 20px;
    margin-bottom: 20px;

}
.box-select-section2 select{
   font-family: 'GraphikTH-Regular';
   width: 100%;
   height: 50px;
   padding-left: 30px;
   padding-right: 20px;
   border-radius: 15px;
   border-radius: 30px;
   font-size: 17px;

}

.box-select-section2 select:hover{
background-color: #003168;
color: #fff;

}
.box-select-section2 select:hover option{
  background-color: #fff;
  color: #000;
  
  }

.box-bg-radio{
    padding-left: 20%;
    padding-right: 20%;
}
.box-radio2-section2{
  background-color: #fff;
  margin-top: 19px;
  padding: 20px 20px 20px 20px;
  /* border: 1px solid #000; */
  height: 60px;
}
/* The radio */
.radio {
  display: block;
  position: relative;
  padding-left: 20px;
  cursor: pointer;
  font-size: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: 'GraphikTH-Regular';
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

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

/* Create a custom radio button */
.checkround {
  position: absolute;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border-color: #f8204f;
  border-style: solid;
  border-width: 2px;
  border-radius: 50%;
  top: 50%;
  left: 0;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


/* When the radio button is checked, add a blue background */
.radio input:checked ~ .checkround {
   background-color: #fff;
}

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

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

/* Style the indicator (dot/circle) */
.radio .checkround:after {
    left: 2px;
   top: 2px;
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background:#f8204f;
   

}

/* The check */
.check {
   display: block;
   position: relative;
   padding-left: 25px;
   margin-bottom: 12px;
   padding-right: 15px;
   cursor: pointer;
   font-size: 18px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

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

/* Create a custom checkbox */
.checkmark {
   position: absolute;
   top: 3px;
   left: 0;
   height: 18px;
   width: 18px;
   background-color: #fff ;
   border-color:#f8204f;
   border-style:solid;
   border-width:2px;
}



/* When the checkbox is checked, add a blue background */
.check input:checked ~ .checkmark {
   background-color: #fff  ;
}

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

/* Show the checkmark when checked */
.check input:checked ~ .checkmark:after {
   display: block;
}

/* Style the checkmark/indicator */
.check .checkmark:after {
   left: 5px;
   top: 1px;
   width: 5px;
   height: 10px;
   border: solid ;
   border-color:#f8204f;
   border-width: 0 3px 3px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}

.cust-btn{
   margin-bottom: 10px;
   background-color: #f8204f;
   border-width: 2px;
   border-color: #f8204f;
   color: #fff;
}
.cust-btn:hover{
   
   border-color: #f8204f;
   background-color: #fff;
   color: #f8204f;
   border-radius: 20px;
   transform-style: 2s;

}

select {

    /* styling */
    background-color: white;
    border-radius: 4px;
    display: inline-block;
    font: inherit;
    line-height: 1.5em;
    padding: 0.5em 2.5em 0.5em 1em;
  
    /* reset */
  
    margin: 0;      
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
  
  
  /* arrows */
  
  select.classic {
    background-image:
      linear-gradient(45deg, transparent 50%, blue 50%),
      linear-gradient(135deg, blue 50%, transparent 50%),
      linear-gradient(to right, skyblue, skyblue);
    background-position:
      calc(100% - 20px) calc(1em + 2px),
      calc(100% - 15px) calc(1em + 2px),
      100% 0;
    background-size:
      5px 5px,
      5px 5px,
      2.5em 2.5em;
    background-repeat: no-repeat;
  }
  
  select.classic:focus {
    background-image:
      linear-gradient(45deg, white 50%, transparent 50%),
      linear-gradient(135deg, transparent 50%, white 50%),
      linear-gradient(to right, gray, gray);
    background-position:
      calc(100% - 15px) 1em,
      calc(100% - 20px) 1em,
      100% 0;
    background-size:
      5px 5px,
      5px 5px,
      2.5em 2.5em;
    background-repeat: no-repeat;
    border-color: grey;
    outline: 0;
  }
  
  
  
  
  select.round {
    background-image:
      linear-gradient(45deg, transparent 50%, gray 50%),
      linear-gradient(135deg, gray 50%, transparent 50%),
      radial-gradient(#ddd 70%, transparent 72%);
    background-position:
      calc(100% - 20px) calc(1em + 2px),
      calc(100% - 15px) calc(1em + 2px),
      calc(100% - .5em) .5em;
    background-size:
      5px 5px,
      5px 5px,
      1.5em 1.5em;
    background-repeat: no-repeat;
  }
  
  select.round:focus {
    background-image:
      linear-gradient(45deg, white 50%, transparent 50%),
      linear-gradient(135deg, transparent 50%, white 50%),
      radial-gradient(gray 70%, transparent 72%);
    background-position:
      calc(100% - 15px) 1em,
      calc(100% - 20px) 1em,
      calc(100% - .5em) .5em;
    background-size:
      5px 5px,
      5px 5px,
      1.5em 1.5em;
    background-repeat: no-repeat;
    border-color: green;
    outline: 0;
  }
  
  
  
  
  
  select.minimal {
    background-image:
      linear-gradient(45deg, transparent 50%, gray 50%),
      linear-gradient(135deg, gray 50%, transparent 50%),
      linear-gradient(to right, #ccc, #ccc);
    background-position:
      calc(100% - 20px) calc(1em + 2px),
      calc(100% - 15px) calc(1em + 2px),
      calc(100% - 2.5em) 0.5em;
    background-size:
      5px 5px,
      5px 5px,
      1px 1.5em;
    background-repeat: no-repeat;
    width: 100%;
  }
  
.margin-bottom-input{
    margin-bottom: 20px;
}
  
  
  select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
  }

  .inp {
    position: relative;
    margin: auto;
    width: 100%;

  }
  .inp .label {
    position: absolute;
    top: 15px;
    left: 30px;
    font-size: 15px;
    color: #9098a9;
    font-weight: 500;
    transform-origin: 0 0;
    transition: all 0.2s ease;
    font-family: 'GraphikTH-Regular';
  }
  .inp .border {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: #737678;
    transform: scaleX(0);
    transform-origin: 0 0;
    transition: all 0.15s ease;
 
  }
  .inp input {
    -webkit-appearance: none;
    width: 100%;
    border: 0;
    font-family: inherit;
    padding: 12px 12px 0px 30px;
    height: 48px;
    font-size: 15px;
    font-weight: 500;
    border: 1px solid #ced4da;
    background: none;
    border-radius: 0;
    color: #223254;
    transition: all 0.15s ease;
    font-family: 'GraphikTH-Regular';
    border-top: 0;
    border-right: 0;
    border-left: 0;
    font-weight: bold;
  }
  .inp input:hover {
    /*background: rgba(34,50,84,0.03);*/
  }
  .inp input:not(:placeholder-shown) + span {
    color: #0053b5;
    transform: translateY(-24px) scale(0.75);
  }
  .inp input:focus {
    background: none;
    outline: none;
    border-bottom: 0!important;
  }
  .inp input:focus + span {
    color: #0053b5;
    transform: translateY(-24px) scale(0.75);
  }
  .inp input:focus + span + .border {
    transform: scaleX(1);
  }
  .box-select-section2 .custom-select{
    height: calc(2em + 0.75rem + 2px);
  }
  @media screen and (max-width: 1200px) {
    .actions ul {
      overflow: hidden;
  }
  .actions ul li {
    border-radius: 0;
    position: relative;
    width: 370px;
    height: 50px;
    margin-bottom: 20px;
  
}
  }

  @media screen and (max-width: 796px) {
    .actions ul {
      overflow: hidden;
  }
  .actions ul li {
    border-radius: 0;
    position: relative;
    width: 370px;
    height: 50px;
    margin-bottom: 20px;
 
}
  }

  @media screen and (max-width: 576px) {
    .actions ul {
      overflow: hidden;
  }
  .actions ul li {
    position: relative;
    width: 370px;
    height: 50px;
    margin-bottom: 20px;
   
  
}
.bootstrap-select{
  width: 100%!important;
  margin-bottom: 10px;
}
  }
  @media screen and (max-width: 441px) {
    .actions ul {
      overflow: hidden;
  }
  .actions ul li {
    border-radius: 0;
    position: relative;
    width: 256px;
    height: 50px;
    margin-bottom: 20px;

}
.box-bg-radio {
  padding-left: 0;
  padding-right: 0;
}
  }