@media all and (max-width: 1500px){
   
    .calculate_button_change{
        width: 185px
    }
    .calculate_button_change::before {
        top: 7px;
        font-size: 18px;
    }
}
@media (max-width: 360px){
    .calculate_button_change {
        width: 220px;
    }
  
}


@media (max-width: 330px){
    .calculate_button_change {
        width: 165px;
    }
    .calculate_button_change::before {
        left: 5px;
    }

    .calculate_button_change > i {
        display: none;
    }

    
   
}

@media (max-width: 319px){ 
    .calculate_button_change::before{
        left: 3px;
    }

}

@media (max-width: 600px){
    .estimated-row, .estimated-defease-fees-container, .estimated-diff-row{

        flex-direction: column;
    }
    .estimated-diff-row p:first-child{
        margin: 15px 0 0 0 ;
    }

}
@media all and (max-width: 1399px){
    .derv-main{
        display: flex;
        flex-direction: column;
    }
    .interest-head{
        align-items: flex-start;
    }
    .left-derv-sec, .right-derv-sec{
        display: flex;
        grid-gap: unset;
    }
    #contact_message {
        height: calc(100% - 50px);
    }
    .capstrike-rate{
        width: calc(100% - 355px);
    }
  
    .cap-strktbl-main table {
        display: block;
        overflow-x: auto;
        margin-top: 30px;
    }
    .rate-cap-table tr td:nth-child(2) {
        font-size: 15px;
    }

    .terms-month{
        max-width: 400px;
    }
    /* #contact_message{
        height: 440px;
    } */
}
@media all and (max-width: 1366px){
}
@media all and (max-width: 1340px){
    .derv-rates {
        grid-template-columns: 1fr;
    }
    #ideal_head_value_container{
        margin-top: 20px;
    }
    .drop-down-main select{
        background-position: 98%;
    }
    .terms-month{
        margin: 20px 0px;
        max-width: max-content;
    }
}
@media all and (max-width: 1250px){
    .interest-head{
        grid-template-columns: 1fr;
    }

    #ideal_head_value_container {
        margin-top: 20px;
    }
    .derv-head-content h1{
        font-size: 18px;
    }
    /* #contact_message{
        height: 440px
    } */
}
@media all and (max-width: 1199px){
    .estimated-defease-fees-container {
        gap: 0px;
        flex-direction: column;
    }
}
@media all and (max-width: 1024px){
    .chart-main , .chart-axis-label{
        display: none;
    }
}
@media all and (max-width: 992px){
    .cap-strktbl-main{
        display: none;
    }
    .left-derv-sec, .right-derv-sec{
        display: block;
    }
    .derv-main{
        display: block;
    }
    .derv-rates .drop-down-main {
        grid-column: auto / span 3;
    }
    .derv-rates .terms-month{
        grid-column: auto / span 2;
        margin: 20px 25px 0 0;
        /*max-width: unset;*/
    }
   
    .derv-rates {
        grid-template-columns: 1fr 1fr 230px;
        display: block;
    }
    .loan-info-row-4 , .loan-info-row-3 , .loan-info-row-2{
        grid-template-columns: unset ;
        gap: 0;
    }
    
    .right-derv-sec{
        display: grid;
        grid-template-columns: unset;
        gap: 20px;
    }
    .capstrike-rate{
        order: 1;
    }
    .capstrike-rate {
        width: 100%;
    }
    .interest-main{
        margin-bottom: 20px;
    }
   
  
    .left-derv-sec {
        margin-bottom: 0;
    }
}
@media all and (max-width: 768px){
    .derivative-dashboard{
        padding: 20px;
    }
    header{
        text-align: center;
    }
    header a{
        text-align: center;
    }
    .interest-head{
        grid-template-columns: 1fr;
        margin-bottom: 0;
    }
    .derv-rates{
        display: block;
    }
    .derv-rates .cap-strike-dropdown{
        margin-left: 0;
        margin-top: 15px;
    }
    .select-months{
        flex-wrap: wrap;
        /*justify-content: flex-start;*/
    }
    .select-months .radio-group{
        margin-right: 10px;
        margin-bottom: 10px;
    }
    /* .derv-head-btn.desktop{
        display: none;
    } */
    .derv-head-btn.mobile{
        display: block;
        margin-top: 20px;
    }
    .derv-form-sec p{
        margin-bottom: 15px;
    }
}
@media all and (max-width: 575px){
    .select-months{
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}
@media (max-width: 490px) {
    #contact_message {
        height: calc(100% - 75px);
    }
}
@media all and (max-width:480px){
    .phonefield-us{
        display: flex !important;
    }
    .phonearea{
        flex: 1;
    }
    
    .drop-down-main {
        position: unset;
        height: unset;
    }
    .error-msg {
        position: relative;
        white-space: normal;
        max-width: 100%;
        overflow: hidden;
    }
    .interest-main h2 {
        margin-top: 15px;
    }

}