/*
    CSS to make pages of largetrader responsive

    added classes and ids 
    .chart-row
*/


#button-fx,
#button-watchlist{
    display: none;
}


/*
    tablet landscape
*/
@media (max-width: 1100px) {

    .container.mt-5{
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
        margin-right: 1rem;
        margin-left: 1rem;
        max-width: 96vw;
        padding-left: 20px;
        padding-right: 20px;
    }

    .container #row-topselect select.form-select{
        font-size: 17px !important;
        margin-bottom: 8px;
    }

    .container #row-topselect .mb-3{
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }

    .container .btn{
        font-size: 13px;
    }

    .container #row-topbuttons .col{
        margin-left: 0;
        margin-right: 0;
        flex-basis: 25%;
    }

    #brokerSelectIb,
    #brokerSelectIg{
        height: auto;
    }

    .container #row-data{
        margin-top: 5px !important;
        margin-bottom: 0 !important;
    }

    .container #row-data .form-label,
    #SearchSeccion .form-label{
        margin-bottom: 0;
        line-height: 20px;
    }

    .page-options-search button, 
    .page-options-search input, 
    .page-options-search select{
        font-size: 14px !important;
    }

    #row-prices .col{
        margin-left: 0;
        margin-right: 0;
    }

    #row-prices .col p{
        margin-bottom: 5px;
    }

    #row-prices .col h2{
        font-size: 20px;
    }

    #row-charts{
        margin-top: 0 !important;
    }

    .navbar-nav{
        align-items: flex-end;
    }

    .top-menu .navbar-nav .nav-link{
        font-size: 15px;
    }

    .banner-last-webinar {
        height: 44px;
        width: auto;
        border: 0;
        padding: 0;
    }

    .navbar-light .navbar-brand {
        margin-right: 20px;
    }

    nav.navbar .container{
        margin-left: 0;
        padding-left: 15px;
        margin-right: 0;
        padding-right: 15px;
    }

    .dropdown-item{
        font-size: 15px;
    }

    h1 {
        font-size: 30px;
        line-height: 42px;
    }

    .container #video-course .section-title {
        font-size: 16px;
        padding: 7px;
    }

    .page-container {
        background-color: #fff;
        padding-top: 15px;
        padding-bottom: 20px;
        padding-left: 30px;
        padding-right: 40px;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
    }

    .container #video-course .chapters-title li {
        font-size: 16px;
        cursor: pointer;
        border-bottom: 1px solid #26608e;
        margin: 0 5px 0 15px;
        padding-bottom: 10px;
        padding-top: 0;
    }

    .tickets-buttons-row .btn{
        padding: 5px;
    }

    #WhatchListLateralBox{
        width: 18%;
    }

}


/*
    tablet portrait
*/
@media (max-width: 850px) {

    .container #row-topselect .mb-3{
        width: 50%;
    }

    #SearchSeccion .col{
        margin-left: 0;
        margin-right: 0;
        flex-basis: 33%;
        padding-bottom: 0;
    }

    .page-options-search button, 
    .page-options-search input, 
    .page-options-search select{
        font-size: 13px !important;
    }

    #SearchSeccion{
        padding: 5px;
        padding-bottom: 15px !important;
    }

    nav.navbar a.navbar-brand img{
        max-width: 185px;
        height: auto;
    }

    .top-menu .navbar-nav .nav-link{
        padding: 5px auto;
        font-size: 14px;
    }

    .top-menu .navbar-nav{
        align-items: flex-start;
    }

    .dropdown-item{
        font-size: 14px;
    }

    #IgMarketsFunctionsMenu .dropdown-menu{
        width: 100%;
    }

    #row-data .col{
        margin-left: 0;
        margin-right: 0;
    }

    #row-data .col .form-control{
        padding: 5px;
    }

    .container #row-topselect .mb-3 {
        padding-left: 5px;
        padding-right: 5px;
    }

    #row-prices .col {
        margin-left: 0;
        margin-right: 0;
        flex-basis: 33%;
    }

    #row-strike p{
        margin-bottom: 5px;
    }

    .h5, h5 {
        font-size: 18px;
    }

    h1 {
        font-size: 26px;
        line-height: 33px;
    }

    .row.row-100{
        margin-left: 5px;
        margin-right: 5px;
    }

    nav.navbar>.container{
        flex-wrap: wrap;
    }

    .navbar-toggler {
        display: block !important;
    }

    nav.navbar .container .navbar-collapse{
        display: none !important;
    }

    nav.navbar .container .navbar-collapse.show{
        display: flex !important;
        align-items: flex-start;
        width: 100vw;
        padding-bottom: 15px;
    }

    .navbar-expand-md .navbar-nav{
        flex-direction: column;
        margin-left: 0 !important;
    }

    .navbar-nav .dropdown-menu {
        border: none;
        position: relative !important;
        padding-top: 0;
    }

    .navbar-light .navbar-toggler {
        padding: 2px;
    }

    .container, .container-md, .container-sm {
        max-width: 100vw;
    }

    #button-fx{
        background-color: #508bc9 !important;
        border-color: #508bc9 !important;
        color: #fff;
        cursor: pointer;
        padding: 5px;
        border-radius: .25rem;
        width: 37px;
        text-align: center;
        display: block;
    }

    #button-watchlist{
        background-color: #508bc9 !important;
        border-color: #508bc9 !important;
        color: #fff;
        cursor: pointer;
        padding: 5px;
        border-radius: .25rem;
        text-align: center;
        display: block;
    }

    .tickets-buttons-row{
        display: none;
        background-color: white;
    }

    .tickets-buttons-row > div.col-12{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-left: 0;
        padding-right: 0;
        flex-direction: column;
    }

    .tickets-buttons-row > div.col-12 button,
    .tickets-buttons-row > div.col-12 a{
        flex-basis: 100%;
        text-align: left;
        background-color: transparent !important;
        color: #508bc9 !important;
        font-weight: bold;
        border: none;
        padding: 2px 20px;
        font-size: 14px;
    }

    #WhatchListLateralBox{
        display: none;
        width: 50vw;
    }

    .chart-row .col{
        padding-left: 0;
        padding-right: 0;
    }

}


/*
    phone portrait
*/
@media (max-width: 550px) {

    .show-text-mobile {
        display: block;
    }
    
    .show-text-desktop {
        display: none;
    }

    .navbar-light .navbar-toggler{
        padding: 2px;
    }

    nav.navbar a.navbar-brand{
        padding-top: 0;
    }

    nav.navbar a.navbar-brand img {
        max-width: 170px;
        height: auto;
    }

    .top-menu .navbar-nav {
        align-items: flex-start;
    }

    .navbar-nav .dropdown-menu {
        border: none;
        position: static;
        padding-top: 0;
    }

    .container.mt-5 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-right: 0;
        margin-left: 0;
        max-width: 100vw;
        padding-left: 20px;
        padding-right: 20px;
    }

    .navbar-collapse{
        padding-bottom: 15px;
    }

    .container #row-topselect select.form-select {
        font-size: 15px !important;
        margin-bottom: 8px;
        margin-left: 0 !important;
        width: 100% !important;
    }

    #strategy-select {
        width: 100%!important;
    }

    #row-topselect a {
        width: 100%;
        padding: 3px;
    }

    .container #row-topbuttons .col {
        margin-left: 0;
        margin-right: 0;
        flex-basis: 14%;
        width: 14%;
        padding: 1px;
        margin-top: 5px;
    }

    .page-options-search button, 
    .page-options-search input, 
    .page-options-search select{
        line-height: 1.2;
    }

    #row-data .col {
        margin-left: 0;
        margin-right: 0;
        flex-basis: 20%;
        width: 20%;
        padding-bottom: 0;
        padding-left: 2px;
        padding-right: 2px;
        font-size: 12px;
    }

    #row-data .col .form-control,
    #row-data .col .btn {
        padding: 3px;
        font-size: 12px !important;
    }

    #row-prices .col {
        margin-left: 0;
        margin-right: 0;
        flex-basis: 33%;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    #row-prices{
        margin-bottom: 10px;
    }

    .card-body {
        flex: 1 1 auto;
        padding: 1rem 0;
    }

    #row-charts .col{
        margin-left: 0;
        padding-left: 0;
    }

    #ProbabilityChart {
        width: 300px!important;
        margin: 0;
        padding: 0;
    }

    #EfficencyChart {
        width: 300px!important;
        margin: 0;
        padding: 0;
    }

    #UnderlineChart .highcharts-yaxis-labels,
    #RiskRewardChart .highcharts-yaxis-labels {
        display: none!important;
    }

    #UnderlineChart .highcharts-plot-background
    #RiskRewardChart .highcharts-plot-background {
        width: 100%!important;
    }

    #UnderlineChart,
    #RiskRewardChart {
        height: 250px!important;
    }

    #UnderlineChart {
        width: 170%!important;
        margin: 0;
        padding: 0;
    }

    #EquityChart .highcharts-yaxis-labels {
        display: none!important;
    }

    #EquityChart {
        width: 120%!important;
    }

    #EquityPopup p {
        font-size: 12px;
    }

    #underline-strategy-chart .chart-cont {
        width:45%!important;
    }

    .strategy-box .card-header {
        font-size: 15px;
    }

    #video-course {
        margin-top: 8px;
    }

    .page-container{
        padding-left: 20px;
        padding-right: 20px;
        margin-left: 0;
        margin-right: 0;
    }

    .container #video-course #sidebar {
        background-color: #398cce;
        color: white;
        min-height: auto;
        text-align: left;
        margin-bottom: 15px !important;
    }

    .container #video-course .section-title {
        font-size: 16px;
        padding: 7px;
        margin-bottom: 2px !important;
    }

    #video-course .content-area {
        padding: 0 5px 0 5px !important;
    }

    #row-prices .col h2 {
        font-size: 15px;
    }

    #row-prices .col p {
        font-size: 13px;
    }

    #row-strike .col {
        margin: 0;
        padding: 0;
        flex-basis: 20%;
        width: 20%;
        font-size: 11px;
    }

    #row-strike {
        align-items: flex-end;
    }

    #daily-menu {
        display: flex;
        justify-content: space-around;
        width: 30%;
    }

    #buttonsModal{
        font-size: 14px;
    }

    #buttonsModal .modal-body {
        padding: 3px;
        overflow-x: auto;
    }

    #buttonsModal .login-form{
        padding: 8px 6px;
    }

    #buttonsModal .messageerr{
        padding: 6px;
        font-size: 20px;
    }

    #tableAccountInfo,
    #tableAccountInfo2{
        font-size: 14px;
    }

    #modalBody {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 12px!important;
    }

    #modalBody .container{
        padding-left: 0;
        padding-right: 0;
    }

    #paginationData .row {
        background-color: white;
        margin-right: 0;
        margin-left: 0;
    }

    #paginationData .row.stripe {
        background-color: #ebeced;
    }

    #calendars #dateFrom,
    #calendars #dateTo{
        font-size: 12px;
        max-width: 105px;
    }

    #calendars #searchDates{
        padding: 2px 11px;
        font-size: 12px;
    }

    #historicalRows .col {
        padding: 5px 2px;
        font-size: 12px;
        margin: 0 2px;
        border-radius: 4px;
    }

    .rowHeader{
        align-items: flex-end;
    }

    .rowHeader .col, 
    .rowBody .col {
        font-size: 12px;
        padding: 10px 5px;
        min-width: 75px !important;
        margin: 0;
        border-radius: 0;
    }

    .rowBody .stripe .col{
        background-color: #ebeced;
    }

    .rowHeader .col.alias-cell, 
    .rowBody .col.alias-cell {
        min-width: 150px !important;
    }

    .rowHeader, .rowBody {
        flex-wrap: nowrap;
        margin-right: 0;
        margin-left: 0;
    }

    .rowBody .row {
        margin-left: 0;
        margin-right: 0;
    }

    #modalBody .alias-cell{
        min-width: unset;
    }

    .options-portfolio-table th,
    .options-portfolio-table td {
        font-size: 11px!important;
    }

    .options-portfolio-table {
        width: 1200px!important;
        max-width: 1200px!important;
    }

    .signals-table th,
    .signals-table td {
        font-size: 11px!important;
    }

    .signals-table {
        width: 1000px!important;
        max-width: 1000px!important;
    }

    .signals-table button {
        margin: 0;
        padding: 2px 5px 2px 5px;
        font-size: 13px;
    }

    #ModifyOrderPortfolio{
        font-size: 12px;
    }

    #ModifyOrderPortfolio input{
        max-width: 65px;
    }

    #ModifyOrderPortfolio button {
        font-size: 13px;
    }
}