.webonly{display:inline-block;}
.pad10{padding:10px;}
li{margin-top:5px;}
.checkout {  max-width:700px; margin-left:auto; margin-right:auto; }
.checkout h1 {    color: black; font-weight:700;}
.required {    color: #d40000;}
.steps { border: 1px solid #CFCFCF; margin-bottom: 40px; padding: 15px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; width:100%; box-sizing:border-box;}
.postcodefinder { border: 1px solid #CFCFCF; margin-bottom: 20px; padding: 5px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; width:100%; box-sizing:border-box;}

.selected {    font-weight: bold;    font-size: 15px;}
.alert ul {    list-style: disc;    padding: 0;    margin-left: 20px;    margin-top: 10px;}
.alert ul li {    }
.radio-inline input[type="radio"] {    margin-top: 0px;}
.radio-inline label {    margin-left: 10px;}
.bggrey{background-color:#f9f9f9;}
.col-form-label { text-align:right;}
.ddinstruct{font-size:16px; font-weight:700; margin-bottom:5px; margin-top:10px;}
.menunav{display:none;}
.container {    width: 80%;      margin-right: auto;    margin-left: auto;}
.sortcode{margin-left:0px; margin-right:0px; width:300px !important;}
label {    display: inline-block; }
.ddinfolower{padding:20px;}
.stepgrid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align:center;}
.formtxtholder{width:110px; text-align:right; padding-right:10px; float:left; height:40px; line-height:40px;}
.forminputholder{width:100%;}
.form-group{min-height:40px; width:100%;}
.textboxlarge{height:40px; line-height:40px; background-color:white; border-radius:5px; border:1px #cdcdcd solid; font-family: 'Open Sans', sans-serif; font-size:16px; padding:0px 10px; box-sizing:border-box; width:100%;}
.alert-danger{color:red; font-weight:600; margin-bottom:20px;}
.titleholder{width:80px; float:left;}
.nameholder{width:calc(100% - 90px); float:right;}
.btn-primary{padding:0px 30px; text-align:center; cursor:pointer; background-color:#007bff; color:white; font-weight:600; font-family: 'Open Sans', sans-serif; font-size:16px; border-radius:5px; border:none; height:40px; line-height:40px;}
.stepnonactive{color:#bdbdbd;}
.stepactive{font-weight:600;}
.postcodeholder{width:120px; float:left;}
.addressholder{width:calc(100% - 130px); float:right;}
.footerlinks a:link{color:black !important; text-decoration:none;}
.footerlinks a:hover{color:black !important; text-decoration:none;}
.spinner-border {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc; /* Light gray border for background */
    border-top: 2px solid #007bff; /* Blue border for the spinning part */
    border-radius: 50%;
    animation: spin 0.75s linear infinite; /* Animation duration and type */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@media screen and (min-width:750px) and (max-width:999px) {

    .container {        width: 90%;    }
label {    display: inline;    }
}

@media screen and (max-width:749px) {

.webonly{display:none;}

.container {        width: 90%;    }
.steps {     padding: 10px;  font-size:13px;}
.stepgrid{ gap: 5px; }

.selected {    font-weight: bold;    font-size: 12px;}
.col-form-label { text-align:left; font-weight:700;}
.radio-inline label {    margin-left: 10px;}
label {    display: inline;  }
.ddinfolower{padding:10px;}
.web{display:none!important;}
}