:root {
  --spacing-15: 15px;
}

/* Large screens (1405px upwards) */
@media only screen and ( min-width: 1405px ) {
  /* your css goes here */
  .first-form {
    margin: 60px auto!important;
  }
  section.supreme-container {
    padding: 60px 0 0;
  }
  .progress-container{
    margin-top: 40px!important;
    margin-bottom: 40px!important;
  }
  .drop-zone-content{
    height: 548px!important;
    min-height: 548px!important;
  }
  .box-separator{
    height: 619px!important;
  }
  .css-11unzgr{
    max-height: 548px!important;
  }
  .custom-csv-drop{
    width: 50%!important;
  }
  .custom-csv-lg{
    padding: 45px;
    height: 475px;
  }
  .manual-tabs .react-tabs__tab-list{
    margin-top: 10px!important;
  }
  .wallet-in-lg{
    height: auto;
  }
  .inActive, .active-box{
    margin: 15px!important;
  }
  .navbar-fixed-left{
    width: 160px!important;
  }
  #content-wrapper{
    width: 100%;
    height: 100%;
  }
  .margin-left-160{
    margin-left: 220px!important;
    margin-right: 70px;
  }
  .info-stripe{
    left: 161px;
  }
  .confirm-lg{
    margin-top: 5rem!important;
  }
  .tab-title{
    width: 275px!important;
    background: #fff;
  }
  .tab-list{
    width: 30%!important;
  }
  .contents{
    width: 70%!important;
  }
  .form-list{
    width: 15%!important;
  }
  .transactions-list .react-tabs__tab-list li{
    padding: 10px 10px!important;
  }
}

/* Laptops and desktops (1100-1405px) */
@media only screen and ( min-width: 1100px ) and ( max-width: 1405px) {
  /* your css goes here */
  section.supreme-container {
    padding: 60px 0 0;
  }
  .registration-wrapper .form-wrapper, .login-wrapper .form-wrapper {
    max-width: 590px;
    padding: 10px 60px;
    width: 100%;
  }
  .progress-container{
    margin-top: 40px!important;
    margin-bottom: 40px!important;
  }
  .transactions-list .react-tabs__tab-list li{
    padding: 10px 3.6px!important;
    font-weight: 400;
    letter-spacing: 0px;
  }
}

@media only screen and ( max-width: 479px ) {
  /* your css goes here */
  section.supreme-container {
    padding: 60px 0 0;
  }

  #wrapper.jsx-37098977 #content-wrapper {
    padding-right: 0 !important;
  }

  .registration-wrapper .form-wrapper, .login-wrapper .form-wrapper {
    max-width: 590px;
    padding: 0;
    width: 100%;
  }
  .register-button {
    flex-direction: column !important;
    margin: auto !important;
  }
  .text-right {
    text-align: center !important;
  }
  .register-button button {
    width: 100%;
    display: block !important;
  }
  .row-fullContainer {
    flex-direction: column;
    height: auto !important;
  }
  .leftContainer {
    padding-bottom: 1rem !important;
  }
  .get-started-container .coinbase_btn, .get-started-container .google_login_button {
    padding: 10px 30% !important;
  }
}

/* Tablets in landscape mode (981-1100px) */
@media only screen and ( min-width: 981px ) and ( max-width: 1100px ) {
  /* your css goes here */
  .navbar-toggler-icon{
    display: none;
  }
  .pagination .active{
    width: 34px!important;
    height: 0px!important;
    border: 0px!important;
    background: none!important;
    margin: 0px!important;
  }
  .user-account{
    height: 40px!important;
  }
  .user-account .navbar-nav .nav-item{
    height: 40px!important;
  }
  .overview-box{
    width: 100%!important;
  }
  .user-account .active{
    width: 110px!important;
  }
  .overview-box-flex-col-tablet{
    display: flex;
    flex-direction: column!important;
  }
  .overview-box-flex-col-tablet img{
    width: 40px!important;
  }
  .login-wrapper .form-wrapper{
    padding: 50px 25px!important;
  }
  .navbar-collapse{
    padding: 0px!important;
  }
  .registration-wrapper .form-wrapper{
    padding: 50px 25px!important;
  }
  .first-form{
    margin-top: 100px!important;
  }
  .in-tablet{
    text-align: left!important;
  }
  .view-in-tablet-dashboard h4{
    font-size: 1rem!important;
  }
  .view-in-tablet-dashboard .year{
    margin-left: 10px!important;
  }
  .view-in-tablet-dashboard img{
    height: 45px;
  }
  .view-in-tablet-dashboard .content-padding{
    padding: 5px 8px!important;
  }
  .view-in-tablet-dashboard .link, .view-in-tablet-dashboard .pt-2{
    padding: 10px 15px;
    font-size: 14px;
  }
  .view-in-tablet-dashboard .row.year-wizard-spacing .link{
    padding: 8px 30px!important;
  }
  .in-tablet-tax-summary h1{
    font-size: 60px!important;
  }
  .in-tablet-tax-summary .form-list{
    width: 200px!important;
  }
  .progress-container{
    margin-top: 40px!important;
  }
  .inActive{
    background: #fff;
    margin: 20px;
  }
  .active h2, .active h6, .active h5 {
    color: #fff;
  }
  .select-box{
    margin: 0px!important;
    border: 1px solid #e1e1e1!important;
  }
  section.supreme-container {
    padding: 60px 0 0;
  }
  .demo-image > img{
    max-width: 260px!important;
  }
  .sign-up .demo-image > img {
    max-width: 518px!important;
  }
  .register-button{
    margin-top: 0px;
    margin-bottom: 10px;
  }
  .user-account {
    margin-top: 13px;
  }
}

/* Tablets in portrait mode (768-980px) */
@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
  .navbar-toggler-icon{
    display: none;
  }
  .pagination .active{
    width: 34px!important;
    height: 0px!important;
    border: 0px!important;
    background: none!important;
    margin: 0px!important;
  }
  .user-account{
    height: 40px!important;
  }
  .user-account .navbar-nav .nav-item{
    height: 40px!important;
  }
  .overview-box{
    width: 100%!important;
  }
  .user-account .active{
    width: 110px!important;
  }
  .overview-box-flex-col-tablet{
    display: flex;
    flex-direction: column!important;
  }
  .overview-box-flex-col-tablet img{
    width: 40px!important;
  }
  .login-wrapper .form-wrapper{
    padding: 50px 25px!important;
  }
  .registration-wrapper .form-wrapper{
    padding: 50px 25px!important;
  }
  .first-form{
    margin-top: 100px!important;
  }
  .in-tablet{
    text-align: left!important;
  }
  .view-in-tablet-dashboard h4{
    font-size: 1rem!important;
  }
  .view-in-tablet-dashboard .year{
    margin-left: 10px!important;
  }
  .view-in-tablet-dashboard img{
    height: 45px;
  }
  .view-in-tablet-dashboard .content-padding{
    padding: 5px 8px!important;
  }
  .view-in-tablet-dashboard .link, .view-in-tablet-dashboard .pt-2{
    padding: 10px 15px;
    font-size: 14px;
  }
  .view-in-tablet-dashboard .row.year-wizard-spacing .link{
    padding: 8px 30px!important;
  }
  .in-tablet-tax-summary h1{
    font-size: 60px!important;
  }
  .in-tablet-tax-summary .form-list{
    width: 200px!important;
  }
  .progress-container{
    margin-top: 40px!important;
  }
  .active{
    background: #00ab84;
    margin: 20px;
  }
  .inActive{
    background: #fff;
    margin: 20px;
  }
  .active h2, .active h6, .active h5 {
    color: #fff;
  }
  .select-box{
    margin: 0px!important;
    border: 1px solid #e1e1e1!important;
  }
  section.supreme-container {
    padding: 60px 0 0;
  }
  .demo-image > img{
    max-width: 260px!important;
  }
  .sign-up .demo-image > img {
    max-width: 412px!important;
  }
  .register-button{
    margin-top: -50px;
    margin-bottom: 10px;
  }
  .user-account {
    margin-top: 13px;
  }
  .navbar-toggler-icon{
    display: none;
  }
}

@media only screen and ( max-width: 767px ) {
  .hide-mobile-only {
    display: none;
  }
  .mobile-text-center {
    text-align: center;
  }
  .mobile-w-100 {
    width: 100%;
  }
  .mobile-only-mt-10 {
    margin-top: 10px;
  }
}

@media only screen and ( max-width: 1364px ) {
  .mobile-px-15 {
    padding: 0 15px;
  }
  .cut-text {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .mobile-ml-10 {
    margin-left: 10px;
  }
  .mobile-no-margin {
    margin: 0 !important;
  }
}

@media only screen and ( max-width: 1023px ) {
  .mobile-table {
    display: block;
    overflow-x: auto;
  }
  .mobile-table.sticky-header th {
    position: static !important;
  }
}

@media only screen and ( min-width: 768px ) and ( max-width: 1023px ) {
  .mobile-full-width-col {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* Smartphones in landscape mode (480-768px) */
/* @media only screen and ( min-width: 480px ) and ( max-width: 767px ) {
    .navbar-toggler-icon{
        display: none;
    }
    .transactions-list .react-tabs__tab-list li {
        padding: 8px 12px !important;
        font-size: 14px;
    }
    .navbar-custom-background{
        height: auto;
    }
    .logo-wrapper{
        float: left;
        width: 40%;
    }
    .collapse.show{
        position: relative;
    }
    .navbar-toggler{
        float: right;
        background: none!important;
        border: 0px!important;
        padding: 0px!important;
    }
    .navbar-toggler:hover, .navbar-toggler:focus{
        background: none!important;
    }
    .show-grid{
        flex: 1!important;
        width: auto!important;
        display: flex!important;
        flex-direction: row!important;
    }
    .navbar-toggler-icon{
        margin-top: 10px;
    }
    .collapse.show{
        margin-top: 15px!important;
    }
    .first-form{
        width: 100%!important;
    }
    .first-form img{
        width: 70%!important;
    }
    .first-form .p1{
        line-height: 26px;
    }
    .in-mobile-devices{
        display: flex!important;
        flex-direction: column!important;
    }
    .inActive, .active{
        height: 120px!important;
        width: 200px!important;
        margin: 15px auto!important;
    }

    .active{
        background: #00ab84;
        margin: 20px;

      }
      .inActive{
        background: #fff;
        margin: 20px;
      }
      .active h2, .active h6, .active h5 {
        color: #fff;
    }
    .select-box{
        margin: 0px!important;
        border: 1px solid #e1e1e1!important;
    }
    .heading-on-mobile h4{
        font-size: 1.2rem!important;
    }
    .heading-on-mobile span{
        font-size: 15px;
    }
    .drop-zone-content{
        margin-right: 25px!important;
    }
    .drop-zone .selected{
        width: 85%!important;
    }
    .drop-zone ul li{
        margin-left: 43px!important;
    }
    .crypto-tabs a{
        padding: 8px 40px!important;

    }
    .crypto-tabs .selected{
        padding-left: 0px!important;
        margin-right: 14px!important;
    }
    .in-mobile .table{
        width: 80%!important;
        margin: 0 auto!important;
    }
    .in-mobile select.form-control:not([size]):not([multiple]){
        width: 90%!important;
        margin: 0 auto;
    }
    .card-in-mobile{
        flex-direction: column!important;
    }
    .card-in-mobile .content-padding{
        width: 100%!important;
    }
    .card-in-mobile .content-padding:first-child{
        justify-content: flex-start!important;
    }
    .card-in-mobile .content-padding:last-child{
        border-left:0px!important;
    }
    .display-block-on-mobiles{
        display: block!important;
    }
    .user-account .navbar-nav .nav-item{
        text-align: center;
        padding-left: 0px !important;
    }
    .navbar-nav .nav-item{
        padding-left: 0px !important;
    }
    .nav-item.active{
        height: 30px!important;
        text-align: center!important;
        width: 100%!important;
        padding-left: 0px !important;
    }
    .overview-box{
        width: 100%!important;
        margin-bottom: 10px;
    }

    .flex-row-in-mobiles{
        display: flex!important;
        flex-direction: row!important;
    }
    .tab-list{
        display: flex!important;
        width: 100%!important;
    }
    .links .react-tabs__tab--selected{
        border-bottom: none!important;
        padding: 5px!important;
    }
    .react-tabs__tab {
        border-bottom: none!important;
        padding: 5px!important;
    }
    li.react-tabs__tab a{
        font-size: 15px;
        padding: 5px!important;
    }
    .links{
        border: none!important;
    }
    .links .nav-tabs{
        border-bottom: none!important;
    }
    .contents{
        width: 100%!important;
    }
    .add-customer-section .first-form img{
        width: auto!important;
    }
    .first-form{
        margin: 0 auto!important;
    }
    .pagination .active{
        width: 34px!important;
        height: 0px!important;
        border: 0px!important;
        background: none!important;
        margin: 0px!important;
    }
    .transactions-list .react-tabs__tab-panel h6, .transactions-list .react-tabs__tab-panel span{
        font-size: 0.75em!important;
    }

    .transactions-list img{
        width: 22px!important;
        margin-right: 5px!important;
    }
    .transactions-list .table td{
        padding: 5px!important;
    }
    .dropdown{
        text-align: center;
    }
    .dropdown-menu{
        position: relative!important;
        box-shadow: none!important;
        margin: 0 auto!important;
        transform: none!important;
        left: 0px!important;
    }
} */

/* Smartphones in portrait mode (0-479px) */
/* @media only screen and ( max-width: 479px ) {
    .navbar-toggler-icon{
        display: none;
    }
    .dropdown-menu{
        position: relative!important;
        box-shadow: none!important;
        margin: 0 auto!important;
        transform: none!important;
        left: 0px!important;
    }
    .dropdown{
        text-align: center;
    }
    .transactions-list .react-tabs__tab-panel h6, .transactions-list .react-tabs__tab-panel span{
        font-size: 0.75em!important;
    }
    .transactions-list .table td{
        padding: 5px!important;
    }
    .transactions-list img{
        width: 22px!important;
        margin-right: 5px!important;
    }
    .navbar-custom-background{
        height: auto;
    }
    .logo-wrapper{
        float: left;
        width: 40%;
    }
    .collapse.show{
        position: relative;
    }
    .navbar-toggler{
        float: right;
        background: none!important;
        border: 0px!important;
        padding: 0px!important;
    }
    .navbar-toggler:hover, .navbar-toggler:focus{
        background: none!important;
    }
    .show-grid{
        flex: 1!important;
        width: auto!important;
        display: flex!important;
        flex-direction: row!important;
    }
    .navbar-toggler-icon{
        margin-top: 10px;
    }
    .collapse.show{
        margin-top: 15px!important;
    }
    .first-form{
        width: 100%!important;
    }
    .first-form img{
        width: 70%!important;
    }
    .first-form .p1{
        line-height: 26px;
    }
    .in-mobile-devices{
        display: flex!important;
        flex-direction: column!important;
    }
    .inActive, .active{
        height: 120px!important;
        width: 200px!important;
        margin: 15px auto!important;
    }

    .active{
        background: #00ab84;
        margin: 20px;

      }
      .inActive{
        background: #fff;
        margin: 20px;
      }
      .active h2, .active h6, .active h5 {
        color: #fff;
    }
    .select-box{
        margin: 0px!important;
        border: 1px solid #e1e1e1!important;
    }
    .heading-on-mobile h4{
        font-size: 1.2rem!important;
    }
    .heading-on-mobile span{
        font-size: 15px;
    }
    .drop-zone-content{
        margin-right: 25px!important;
    }
    .drop-zone .selected{
        width: 85%!important;
    }
    .drop-zone ul li{
        margin-left: 43px!important;
    }
    .crypto-tabs a{
        padding: 8px 40px!important;

    }
    .crypto-tabs .selected{
        padding-left: 0px!important;
        margin-right: 14px!important;
    }
    .in-mobile .table{
        width: 80%!important;
        margin: 0 auto!important;
    }
    .in-mobile select.form-control:not([size]):not([multiple]){
        width: 90%!important;
        margin: 0 auto;
    }
    .card-in-mobile{
        flex-direction: column!important;
    }
    .card-in-mobile .content-padding{
        width: 100%!important;
    }
    .card-in-mobile .content-padding:first-child{
        justify-content: flex-start!important;
    }
    .card-in-mobile .content-padding:last-child{
        border-left:0px!important;
    }
    .login-wrapper .form-wrapper{
        padding: 50px 40px;
    }
    .registration-wrapper .form-wrapper{
        padding: 50px 40px;
    }
    .rightContainer{
        display: none!important;
    }
    .in-tablet{
        text-align: left!important;
    }
    .register-button{
        margin-top: -50px;
        margin-bottom: 10px;
    }
    .main-div h1{
        font-size: 2rem!important;
        padding-left: 10px!important;
    }
   .mobile-flex-col{
       display: flex;
       flex-direction: column!important;
   }
   .mobile-flex-row{
    display: flex;
    flex-direction: row!important;
    }
    .in-tablet-tax-summary .content-padding{
        margin: 0px 0px!important;
        padding: 0px 20px!important;
    }
    .view-in-tablet-dashboard h4{
        font-size: 1rem!important;
    }
    .view-in-tablet-dashboard .link, .view-in-tablet-dashboard .pt-2{
        padding: 10px 15px;
        font-size: 14px;
    }
      .view-in-tablet-dashboard .row.year-wizard-spacing .link{
        padding: 8px 30px!important;
      }
      .view-in-tablet-dashboard .content-padding{
        padding: 8px 8px!important;
        margin: 5px 10px!important;
    }
    .display-block-on-mobiles{
        display: block!important;
    }
    .user-account .navbar-nav .nav-item{
        text-align: center;
        padding-left: 0px !important;
    }
    .navbar-nav .nav-item{
        padding-left: 0px !important;
    }
    .nav-item.active{
        height: 30px!important;
        text-align: center!important;
        width: 100%!important;
        padding-left: 0px !important;
    }
    .overview-box{
        width: 100%!important;
        margin-bottom: 10px;
    }
    .flex-row-in-mobiles{
        display: flex!important;
        flex-direction: row!important;
    }
    .tab-wrapper{
        display: flex!important;
        flex-direction: column!important;
    }
    .tab-list{
        display: flex!important;
        width: 100%!important;
        background: #fff;
    }
    .react-tabs__tab{
        width: auto!important;
    }
    .setting-wrapper li.react-tabs__tab--selected a:before{
        display: none!important;
    }

    .links .react-tabs__tab--selected{
        border-bottom: none!important;
        padding: 5px!important;
    }
    .react-tabs__tab {
        border-bottom: none!important;
        padding: 5px!important;
    }
    li.react-tabs__tab a{
        font-size: 15px;
        padding: 5px!important;
    }
    .links{
        border: none!important;
    }
    .links .nav-tabs{
        border-bottom: none!important;
    }
    .contents{
        width: 100%!important;
    }
    .add-customer-section .first-form img{
        width: auto!important;
    }
    .first-form{
        margin: 0 auto!important;
    }
    .transactions-list .react-tabs__tab-list li {
        padding: 8px 12px !important;
        font-size: 14px;
    }
    .pagination .active{
        width: 34px!important;
        height: 0px!important;
        border: 0px!important;
        background: none!important;
        margin: 0px!important;
    }
} */