/*==============================================================
    Penn Yan Flying Club
    Weight & Balance Calculator

    Version 3
    Mobile Layout
==============================================================*/


/*--------------------------------------------------------------
    Phones & Tablets (≤768px)
--------------------------------------------------------------*/

@media (max-width:768px) {

    /*==========================================================
        Loading Panel
    ==========================================================*/

    .loading-layout {

        display: flex;

        flex-direction: column;

        gap: 1.5rem;

    }
    
/*==========================================================
    Banner
    Stack the logo over the title
==========================================================*/
.loading-header-text {
    margin: 0;
}

.panel-title {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.2;
}


.loading-header {

    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 1rem;

    padding: 0.5rem 1rem;

}

.loading-logo {

    width: 120px;

    height: auto;

}

.loading-header-text {

    text-align: center;

}

.panel-title {

    font-size: 1.35rem;

    line-height: 1.25;

}
    
/*==========================================================
    Current Aircraft
==========================================================*/

.aircraft-info {
    width: 100%;
}

.aircraft-card {
    width: 100%;
    box-sizing: border-box;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.info-row span:last-child {
    white-space: nowrap;
}

/*==========================================================
    Aircraft Selector
==========================================================*/

.aircraft-selector {

    width: 100%;

    max-width: 340px;

    margin: 0 auto 1.5rem;

}

.aircraft-selector .form-control {

    width: 100%;

}

/*==========================================================
    Loading Stations
==========================================================*/

.loading-row {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 0.2em;

    margin-bottom: 0.4rem;

}

.loading-label {

    width: auto;

    font-weight: 600;

}

.loading-input {

    width: 100%;

    max-width: 260px;

    align-self: flex-start;

}

/*==========================================================
    Loading Workspace
==========================================================*/

.loading-workspace {

    display: grid;

    grid-template-columns: 1fr;

    gap: 1.5rem;

    margin-top: 0;

}

/*==========================================================
    Loading Form
==========================================================*/
.loading-form {

    grid-template-columns: 1fr;

    gap: 0;

    padding: 1rem;

}

/*==========================================================
    CG Graph
==========================================================*/

.graph-placeholder {

    margin: 1rem;

    min-height: 240px;

}

.graph-placeholder-inner {

    padding: 1rem;

}


}



/*--------------------------------------------------------------
    Phone
--------------------------------------------------------------*/

@media (max-width:480px){

}