/*
Mobile.css - plik ze stylami dla Smartfon + iPAd 
*/
/* 
    Created on : 2020-07-08, 09:25:27
    Author     : marcinniedzwiecki
*/

/* when navigation bar buttons begin to overlap */
/*@media only screen and (max-width: 1230px) {

}*/
    
@media only screen and (max-width: 1024px) {
    
    #main-navigation.navbar-light .nav-items .link:hover {
    color: var(--nav-secondary-color);
    background: var(--nav-primary-color);
}

    

 #upload-demo-issue{
   background-color: white;
   color: var(--primary-color);
   border: 1px solid var(--primary-color);
}

  #trial-counter > a{
        font-size: 1.3rem;
       
        }
        

        
.switch-light.switch-candy.switch-knob > span {
    background: #ababab;
    min-height: 15px;
    width: 24px;
}






    .links-table .row.line {
        font-size: 1.2rem;
        padding: .5rem 0;
    }
     
    .links-table .min-table {
        font-size: 1.1rem;
        letter-spacing: .05rem;
        margin-bottom: 4rem;
    }
    
    .links-table .min-table td {
        padding: 8px 12px;
    }
    
     #issues-list .btn-link {
        font-size: 12px;
        letter-spacing: .1rem;
        line-height: 24px;
    }
    
    
    .badge-off,
    .badge-on {
        padding: .5rem;
        font-size: .7rem;
        letter-spacing: .05rem;
   
        min-width: 25px;

    }
    
    
    #issues-list .actions .dropdown-menu svg {
        width: 24px;
        height: 20px;
    }
    #issues-list .actions svg {
        margin: 0 5px 0 0;
    }
    
    #issues-list .actions .dropdown-menu {
        width: 175px;
    }
    
    
    .switch-light.switch-candy.switch-decision span span {
        text-shadow: none !important;
        font-size: 0.8rem;
        text-transform: uppercase;
        width: 50%;
        font-weight: var(--font-weight-regular);
    }


    .chart-tooltip-preview .thumbnail-container {
        width: 130px;
        height: 130px;
        max-height: 130px;
        margin: 1.0rem;
        position: relative;
        display: inline-block;
        overflow: hidden;
    }
    
    .chart-tooltip-preview .text-container {
        margin-bottom: .4rem;
    }
    
    .chart-tooltip-preview .text-container .header {
        font-size: 1.1rem;
        text-transform: uppercase;
        color: #ffffff;
        letter-spacing: .01rem;
    }

    .chart-tooltip-preview .text-container .values {
        font-size: 1.1rem;
        letter-spacing: .01rem;
    }
    
    .links-table .row.header {
        font-size: .9rem;
        padding: .6rem 0;
    }
    
    .links-table .row.header > .col {
    /*justify-content: center;*/
        letter-spacing: .1rem;
    }
    
    #issues-list .list-issue .btn-link-alt > svg {
        margin-left: 3px;
        margin-right: 3px;
    }
    
    #issues-list .links-table .btn-outline-action {
       padding: 0 0.95vw;
        width: auto;
        font-size: 1.17vw;
        text-transform: none;
        font-weight: var(--font-weight-bold);
        letter-spacing: 0.075vw;
        line-height: 1.8;
        color: var(--disabled-color);
        border-color: var(--disabled-color);
    }
    
    #issues-list .links-table .btn-outline-action.add-link {
        padding: 0px;
        width: 24px;
        font-size: 1.3rem;
        line-height: 23px;
        height: 24px;
    }
    
    .links-table .row > .col {
        padding-left: 7px;
        padding-right: 7px;
    }
    
    .links-table .row > .col:first-of-type {
        padding-left: 3px;
        padding-right: 3px;
    }

    #issues-list .actions .dropdown-menu .dropdown-item,
    #issues-list .actions .dropdown-menu .dropdown-item-container {
        padding: .5rem .25rem .5rem 1.0rem;
        color: #666;
        font-size: 1.1rem;
        font-weight: 600;
    }
    
    
    
    /*UPLOADING*/
    
   
    
     
    
    
    

    
    
    .only-mobile-with-form > #create-issue-wrapper .upload-preview-item {
        background :#fff;
        height: 250px;
        width: 100%;
    }

    .only-mobile-without-form > #create-issue-wrapper .upload-preview-item > svg,
    .only-mobile-without-form > #create-issue-wrapper .upload-preview-item > .or-drop-here{
        display: none;
    }
    .only-mobile-with-form > #create-issue-wrapper .upload-preview-item > svg,
    .only-mobile-with-form > #create-issue-wrapper .upload-preview-item > .or-drop-here{
        display: auto;
    }
    
    
    
   
    
    /*UPLOADING END*/
}

@media only screen and (max-width: 992px) {
    
    #main-navigation.navbar-light .nav-items {
        width: calc(100vw - 140px - 70px);
    }
    
    .chart-tooltip-preview .thumbnail-container {
        width: 130px;
        height: 130px;
        max-height: 130px;
        margin: 7px;
        margin-bottom: 0px;
    }
     .chart-tooltip-preview .text-container .header {
        font-size: .8rem;
    }

    .chart-tooltip-preview .text-container .values {
        font-size: .9rem;
    }
    
   
    
    @media (orientation: landscape) {
         
    }
     
    @media (orientation: portrait) {
            max-width: 5vw;
    }
     
    
}


@media only screen and (max-width: 640px) {
    .chart-tooltip-preview .thumbnail-container {
        width: 130px;
        height: 130px;
        max-height: 130px;
    }
    
    .chart-tooltip-preview .text-container .header {
        font-size: .7rem;
    }

    .chart-tooltip-preview .text-container .values {
        font-size: .9rem;
    }
    #trial-counter {
        height: 65px;
    }

        #trial-counter > a{
        font-size: 1.3rem;
        width: auto;
        padding: 0.5rem 1.20rem;
        position: absolute;
        bottom: 5px;
        margin: 0px;
        }

        
    
       

    #trial-counter .message {
        font-size: 1.4rem;
        height: 1rem;
        top: 8px;
        margin: 0px;
        position: absolute;
        width: 100%;
        text-align: center;
    }
    
  @media (orientation: landscape) {
         
    }
     
    @media (orientation: portrait) {
            max-width: 10.5vw;
    }
     
    

}


@media only screen and (max-width: 440px) {
    
    .links-table .row.line {
        font-size: 0.7rem;
        padding: .5rem 0;
    }
     
    .links-table .min-table {
        font-size: 0.7rem;
        letter-spacing: .05rem;
        margin-bottom: 4rem;
    }
    
    
    .chart-tooltip-preview .thumbnail-container {
        width: 95px;
        height: 120px;
    }
    
    .chart-tooltip-preview .text-container .header {
        font-size: .8rem;
    }

    .chart-tooltip-preview .text-container .values {
        font-size: .9rem;
    }
    
    .links-table .row.header {
        font-size: .6rem;
        padding: .6rem 0;
        
    }
    
    
    #issues-list .list-issue .btn-link-alt > svg {
        margin-left: 3px;
        margin-right: 3px;
    }
    
    #issues-list .links-table .btn-outline-action {
        padding: 0 1.0rem;
        letter-spacing: 0.1rem;
    }
    
    
    #issues-list .links-table .btn-outline-action {
       padding: 0 0.45vw;
        width: auto;
        font-size: 1.17vw;
        text-transform: none;
        font-weight: var(--font-weight-bold);
        letter-spacing: 0.075vw;
        line-height: 1.8;
        color: var(--disabled-color);
        border-color: var(--disabled-color);
    }
    
    
    #issues-list .links-table .btn-outline-action.add-link {
        
        
        padding: 0px;
        width: 16px;
        font-size: 1.1rem;
        line-height: 14px;
        height: 16px;
    }
    
    .links-table .row > .col {
        padding-left: 7px;
        padding-right: 7px;
    }
    
    .links-table .row.header > .col {
    /*justify-content: center;*/
        letter-spacing: .05rem;
    }

    
    .links-table .row.header > .col:first-of-type {
        padding-left: 0px;
        padding-right: 0px;
    }
    
    .switch-light.switch-candy.switch-decision span span {
        text-shadow: none !important;
        font-size: 0.6rem;
        text-transform: uppercase;
        width: 50%;
        font-weight: var(--font-weight-regular);
    }

#issues-list .btn-link {
        font-size: 8px;
        letter-spacing: .1rem;
        line-height: 24px;
    }
    
}
