.containhvps{
        flex-direction: row;
        align-items: flex-start;
    }
    form label{font-weight: 900;font-size: 1.1em;}
    .hccheckboxvps:checked + .hccheckboxvps{
        border: 4px solid #008ff5!important;
        padding: 2px!important;
        transition: all .2s ease!important;
        background: #fff!important;
    }
    .hccheckboxvps:checked + .hccheckboxvps:after{
        left: 50%!important;
        background: #008ff5!important;
    }
    .main-header{display: none;}
        .toggle-radio {
        display: inline-flex;
        border: 1px solid #ccc;
        border-radius: 4px;
        overflow: hidden;
    }
    
    .flags-container {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
    }
    
    .country-card, .city-card {
        padding: 4px 12px 5px 12px;
        border-radius: 4px;
        cursor: pointer;
        transition: border-color 0.3s, background-color 0.3s;
    }
    
    .country-card.selected, .city-card.selected {
        border-color: #007bff;
        background-color: #e7f0ff;
    }
    
    .city-options {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 10px;
    }
    .containhvps{padding: 10px;}
    .hcvpsbiox{
        padding:20px;
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;
        flex-direction: column;
        gap: 0;
        width: 100%;
        box-shadow: -3px 6px 8px -1px #eaeaea;
        border: 1px solid #e9e9e9;
        border-radius: 6px;
    }
    .builditboxvps{
        background: #fff;
        margin-left: 10px;
        padding: 0px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
        gap: 20px;
    }
    .fhcvpsbiox{
        padding:20px;
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;
        flex-direction: column;
        box-shadow: -3px 6px 8px -1px #eaeaea;
        border: 1px solid #e9e9e9;
        border-radius: 6px;
    }
    .hcvpsbiox h4{
        font-weight: 700;
        font-size: 1.3em;
        border-bottom: 1px solid #eee;
    }
    #OSTYPEbox{
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;
        align-content: flex-start;
    }
    .boxschooseoss{display: flex;flex-direction: row;width: 50%;margin-bottom: 16px;flex-wrap: wrap;}
    .boxschooseoss .vpsselfbox{width: 48%;}
    .ichooseboioss{
        margin-top: 0px;
        width: 75%;
    }
    .doswitchbtn.toggle-radio {
        display: inline-flex;
        border: 1px solid #ccc;
        border-radius: 4px;
        overflow: hidden;
    }
    
    .doswitchbtn.toggle-radio input[type="radio"] {
        display: none;
    }
    
    .doswitchbtn.toggle-radio .toggle-label {
        padding: 10px 20px;
        cursor: pointer;
        transition: background-color 0.3s, color 0.3s;
        border-right: 0px solid #ccc;
        margin: 0;
    }
    
    .doswitchbtn.toggle-radio .toggle-label:last-child {
        border-right: none;
    }
    
    .doswitchbtn.toggle-radio input[type="radio"]:checked + .toggle-label {
        background-color: #007bff;
        color: white;
    }
    
    .doswitchbtn.toggle-radio .toggle-label:hover {
        background-color: #0056b3;
        color: white;
    }
    .toggle-checkbox {
        display: none;
    }
    
    .toggle-label {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 25px;
        background-color: #ccc;
        border-radius: 25px;
        cursor: pointer;
        transition: background-color 0.3s;
        transform: scale(1.2);
        margin-top: 4px;
    }
    
    .toggle-label::after {
        content: "";
        position: absolute;
        width: 21px;
        height: 21px;
        background-color: white;
        border-radius: 50%;
        top: 2px;
        left: 2px;
        transition: transform 0.3s;
    }
    
    .toggle-checkbox:checked + .toggle-label {
        background-color: #007bff;
    }
    
    .toggle-checkbox:checked + .toggle-label::after {
        transform: translateX(25px);
    }
    .toggle-radio-rsos {
        display: inline-flex;
        border: 1px solid #ccc;
        border-radius: 4px;
        overflow: hidden;
    }
    
    .toggle-radio-rsos input[type="radio"] {
        display: none;
    }
    
    .toggle-radio-rsos .toggle-label-rsos {
        padding: 10px 20px;
        cursor: pointer;
        transition: background-color 0.3s, color 0.3s;
        border-right: 0px solid #ccc;
        margin: 0;
    }
    
    .toggle-radio-rsos .toggle-label-rsos:last-child {
        border-right: none;
    }
    
    .toggle-radio-rsos input[type="radio"]:checked + .toggle-label-rsos {
        background-color: #007bff;
        color: white;
    }
    
    .toggle-radio-rsos .toggle-label-rsos:hover {
        background-color: #5aba00;
        color: white;
    }
    .clnxboxcb{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .flags-container {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
    }
    
    .country-card {
        padding: 4px 12px;
        border: 1px solid #dedede;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
        position: relative;
        font-size: 1.4em;
    }
    
    .country-card:not(.selected) {
        color: #626262;
        border: 1px solid #b7d0ff;
    }
    
    .country-card.selected {
        border-color: #007bff;
        background-color: #e7f0ff;
        filter: none;
        opacity: 1;
    }
    
    .city-options {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 10px;
    }
    
    .city-card{
        font-size: 94%;
        padding: 3px 10px 4px 10px;
        background: #fff;
        border: 1px solid #a2cea2;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
        color: #626262;
    }
    
    .city-card:hover{
        border: 1px solid #1e921e;
    }
    
    .city-card.selected {
        background: #e7ffe8;
        color: #000;
        border-color: #1e921e;
    }
    .country-card:hover{
        border: 1px solid #007bff;
    }
    .tzborders{
        border-bottom: 1px dashed #000;
        width: 100%;
        padding: 0px 4px;   
    }
    .colsinput{flex-direction: column;}
    #orderSummaryboxs{width: 25%;}

@media only screen and (max-width: 939px) {
    .boxschooseoss{width: 100%;}
}
   
@media only screen and (max-width: 1239px) {
    .fhcvpsbiox .row{gap: 8px;}
    .containhvps .builditboxvps{width: 73%;flex: 0 0 73%;max-width: 73%;margin: 0;padding: 0;}
    #orderSummaryboxs{width: 24%;flex: 0 0 24%;max-width: 24%;}
    #Locationsbox{width: 100%;flex: 0 0 100%;max-width: 100%;padding: 0;}
    .fhcvpsbiox .containhvps{width: 31%;flex: 0 0 31%;max-width: 31%;gap: 0px;align-items: flex-start;}
    .hcvpsbiox .clnxboxcb{width: 31%;flex: 0 0 31%;max-width: 31%;}
    .hcvpsbiox .col-3.clnxboxcb{width: 31%;flex: 0 0 31%;max-width: 31%;}
    .hcvpsbiox .col-3{width: 31%;flex: 0 0 31%;max-width: 31%;}
    .hcvpsbiox .col-4{width: 49%;flex: 0 0 49%;max-width: 49%;}
    .containhvps {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 0;
        margin: 0;
        gap: 20px;
    }
    .boxschooseoss{display: flex;flex-direction: row;width: 50%;margin-bottom: 16px;}
    #ChooseOSsbox{margin-top: 0px;}
}

#OSTYPEbox, #ServerNamebox{
    width: 49%;
    max-width: 49%;
}

@media only screen and (max-width: 970px) {
    .fhcvpsbiox .row{gap: 8px;}
    .containhvps .builditboxvps{width: 100%;flex: 0 0 10%;max-width: 100%;margin: 0;padding: 0;}
    #orderSummaryboxs{width: 100%;flex: 0;max-width: 100%;}
    #Locationsbox{width: 100%;flex: 0 0 100%;max-width: 100%;}
    .fhcvpsbiox .containhvps{width: 48%;flex: 0 0 48%;max-width: 48%;gap: 0px;align-items: flex-start;}
    .hcvpsbiox .clnxboxcb{width: 48%;flex: 0 0 48%;max-width: 48%;}
    .hcvpsbiox .col-3.clnxboxcb{width: 48%;flex: 0 0 48%;max-width: 48%;}
    .hcvpsbiox .col-3{width: 100%;flex: 0 0 100%;max-width: 100%;}
    .hcvpsbiox .col-4{width: 100%;flex: 0 0 100%;max-width: 100%;}
    .containhvps{display: flex;flex-direction: column;align-items: center;flex-wrap: nowrap;padding: 0;margin: 0;gap: 20px;}
    .country-card {
        padding: 4px 6px;
        font-size: 1.1em;
    }
    .boxschooseoss{
        flex: 0 0 100%;
        max-width: 100%;
        gap: 10px;
    }
    .boxschooseoss .vpsselfbox{
        flex: 0 0 48%;
        max-width: 48%;
    }
    .toggle-radio-rsos{font-size: 0.9em;padding: 0px;}
    .toggle-radio-rsos label{padding: 10px 18px;}
    #OSTYPEbox, #ServerNamebox{
        width: 100%;
        max-width: 100%;
    }
}
#orderSummary{
    width: 100%;
}