/* ==========================================================
   ROCK YOUR TIME®
   APPLICATION LAYOUT
   Shell Version 1.0
========================================================== */

/* ==========================================================
   APPLICATION
========================================================== */

html,
body{

    margin:0;

}

.ryt-app{

    display:flex;

    width:100%;

    min-height:100vh;

    background:#F4F8FB;

}


/* ==========================================================
   APPLICATION AREA
========================================================== */

.ryt-application{

    flex:1;

    display:flex;

    flex-direction:column;

    min-width:0;

}


/* ==========================================================
   CONTENT
========================================================== */

.ryt-content{

    flex:1;

    padding:32px;

    scroll-behavior:smooth;

}


/* ==========================================================
   PAGE CONTAINER
========================================================== */

.page-container{

    width:100%;

    max-width:1500px;

    margin:0 auto;

}


/* ==========================================================
   MOBILE OVERLAY
========================================================== */

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.30s;

    z-index:900;

}

.mobile-overlay.active{

    opacity:1;

    visibility:visible;

}


/* ==========================================================
   TOPBAR SPACE
========================================================== */

.page-title{

    margin:0;

    font-size:2.5rem;

    font-weight:800;

    color:var(--ryt-primary);

}

.page-subtitle{

    margin-top:10px;

    color:var(--ryt-text-light);

    line-height:1.7;

}


/* ==========================================================
   GLOBAL PAGE SPACING
========================================================== */

.page-section{

    margin-bottom:40px;

}

.page-section:last-child{

    margin-bottom:0;

}


/* ==========================================================
   CARD SPACING
========================================================== */

.section-header{

    margin-bottom:24px;

}

.section-title{

    font-size:2rem;

    font-weight:700;

    color:var(--ryt-primary);

}

.section-description{

    margin-top:8px;

    color:var(--ryt-text-light);

}


/* ==========================================================
   PREMIUM SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#EDF3F7;

}

::-webkit-scrollbar-thumb{

    background:#C8D7E5;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#9EB7CB;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1200px){

    .ryt-content{

        padding:24px;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    html,
    body{

        overflow:auto;

    }

    .ryt-app{

        display:block;

        height:auto;

        min-height:100vh;

    }

    .ryt-application{

        width:100%;

        min-height:100vh;

    }

    .ryt-content{

        padding:18px;

        overflow:visible;

    }

    .page-container{

        max-width:100%;

    }

    .page-title{

        font-size:2rem;

    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width:480px){

    .ryt-content{

        padding:14px;

    }

    .page-title{

        font-size:1.75rem;

    }

}