/* ============================================================
   UniCAM MODERN STUDENT PORTAL
   FINAL VISUAL VERSION 3
   ============================================================ */


/* ============================================================
   BASIC
   ============================================================ */

html,
body
{
    margin: 0;
    padding: 0;
}


body
{
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color:
        #0b2f63;
}


.modernPortalBody
{
    min-width: 1080px;

    background:
        #eef8ff;
}



/* ============================================================
   MAIN WRAPPER
   ============================================================ */

#wrapper
{
    width: 100%;

    min-height: 100vh;

    margin: 0;

    background:

        linear-gradient(
            rgba(239,249,255,.97),
            rgba(255,255,255,.99)
        ),

        url("images/modern/cloud-bg.jpg")
        center top /
        cover
        fixed
        no-repeat;
}



/* ============================================================
   HEADER
   Compatible with working V2 portal_preview.asp
   ============================================================ */

#header
{
    position: relative;

    z-index: 5;

    height: 145px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:

        linear-gradient(
            90deg,
            #ffffff 0%,
            #eff9ff 35%,
            #d9f1ff 67%,
            #c6eaff 100%
        );

    border-bottom:
        1px solid #bdddf0;

    box-shadow:
        0 5px 24px
        rgba(16,70,112,.09);
}



/* LOGO */

.modernBrand
{
    width: 470px;

    box-sizing: border-box;

    padding-left: 34px;

    z-index: 3;
}


.modernLogo
{
    display: block;

    width: auto;

    max-width: 430px;

    max-height: 125px;
}



/* HEADER SKY */

.modernHeaderSky
{
    position: relative;

    flex: 1;

    height: 100%;

    overflow: hidden;
}


.modernHeaderSky:before
{
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background:

        radial-gradient(
            ellipse at 8% 90%,
            rgba(255,255,255,.90) 0 12%,
            transparent 13%
        ),

        radial-gradient(
            ellipse at 25% 93%,
            rgba(255,255,255,.76) 0 14%,
            transparent 15%
        ),

        radial-gradient(
            ellipse at 45% 95%,
            rgba(255,255,255,.67) 0 14%,
            transparent 15%
        );
}


.modernTagline
{
    position: absolute;

    left: 38px;
    top: 28px;

    z-index: 2;
}


.taglineMain
{
    display: block;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-style: italic;

    font-size: 36px;

    letter-spacing: -.5px;

    color:
        #124c90;
}


.taglineSub
{
    display: block;

    margin-top: 9px;

    font-size: 12px;

    letter-spacing: 3px;

    color:
        #2f6597;
}


.modernPlane,
.modernHeaderPlane
{
    position: absolute;

    right: 25px;
    top: 45px;

    z-index: 2;

    font-size: 48px;

    color:
        #0b65ae;

    transform:
        rotate(-11deg);
}



/* ============================================================
   USER BADGE
   ============================================================ */

.modernUser
{
    width: 315px;

    margin-right: 30px;

    box-sizing: border-box;

    padding:
        14px 20px;

    display: flex;

    align-items: center;

    border-radius: 32px;

    background:
        rgba(255,255,255,.95);

    border:
        1px solid
        rgba(255,255,255,.82);

    box-shadow:
        0 5px 18px
        rgba(0,79,146,.13);

    z-index: 3;
}


.modernUserIcon
{
    width: 46px;
    height: 46px;

    line-height: 46px;

    margin-right: 13px;

    border-radius: 50%;

    text-align: center;

    background:

        linear-gradient(
            135deg,
            #1368b2,
            #0b4687
        );

    color:
        #ffffff;
}


.modernUserText span
{
    display: block;

    font-size: 11px;

    color:
        #5c7690;
}


.modernUserText strong
{
    display: block;

    margin-top: 3px;

    font-size: 14px;

    color:
        #0b3468;
}



/* ============================================================
   SIDEBAR
   ============================================================ */

#sidebar
{
    float: left;

    width: 220px;

    min-height: 880px;

    box-sizing: border-box;

    padding-top: 23px;

    background:
        rgba(255,255,255,.98);

    border-right:
        1px solid #c9deed;
}


.modernMenuTitle
{
    padding:
        0 24px 13px 24px;

    color:
        #6c8aa4;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 2px;
}


#sidebar ul
{
    margin: 0;

    padding: 0;

    list-style: none;
}


#sidebar ul li
{
    margin: 0;

    padding: 0;
}


#sidebar ul li a
{
    min-height: 48px;

    box-sizing: border-box;

    padding:
        0 20px;

    display: flex;

    align-items: center;

    text-decoration: none;

    color:
        #123969;

    font-size: 15px;

    border-left:
        4px solid transparent;

    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease;
}


#sidebar ul li a:hover
{
    color:
        #005baa;

    background:

        linear-gradient(
            90deg,
            #e5f4ff,
            #f8fcff
        );

    border-left-color:
        #1e8be0;
}


#sidebar ul li a.selected
{
    color:
        #ffffff;

    background:

        linear-gradient(
            90deg,
            #157dd1,
            #2399e4
        );

    border-left-color:
        #0c65b2;
}


.menuIcon
{
    display: inline-block;

    width: 28px;

    margin-right: 9px;

    text-align: center;

    font-size: 18px;
}


#sidebar .sap
{
    margin:
        15px 20px 5px 20px;

    padding:
        9px 0 5px 0;

    border-bottom:
        1px solid #c8dae7;

    color:
        #758fa6;

    font-size: 11px;

    font-style: italic;
}



/* ============================================================
   V2 LOGIN APPEARANCE
   ============================================================ */

#ul_login
{
    display: block;
}


.modernLoginArea
{
    padding:
        8px 18px 16px 18px !important;
}


.modernLoginArea label
{
    display: block;

    margin:
        8px 0 5px 0;

    color:
        #52718e;

    font-size: 11px;
}


.modernLoginArea input[type="text"],
.modernLoginArea input[type="password"]
{
    width: 100%;

    box-sizing: border-box;

    padding:
        10px 11px;

    border:
        1px solid #b9d4e6;

    border-radius: 9px;

    outline: none;

    background:
        #ffffff;

    color:
        #173d64;
}


.modernLoginArea input[type="text"]:focus,
.modernLoginArea input[type="password"]:focus
{
    border-color:
        #3892d5;

    box-shadow:
        0 0 0 3px
        rgba(56,146,213,.10);
}


.modernLoginButtons
{
    display: flex;

    gap: 8px;

    margin-top: 13px;
}


.modernButton
{
    padding:
        9px 14px;

    border: 0;

    border-radius: 9px;

    cursor: pointer;

    color:
        #ffffff;

    background:

        linear-gradient(
            135deg,
            #1478cb,
            #0860ad
        );
}


.modernButtonSecondary
{
    color:
        #17466e;

    background:
        #dcebf5;
}



/* ============================================================
   SIDEBAR MESSAGE
   ============================================================ */

.modernSideMessage
{
    margin:
        42px 20px 0 20px;

    padding-top: 20px;

    text-align: center;

    border-top:
        1px solid #d2e1eb;

    color:
        #2d6ca8;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-style: italic;

    font-size: 12px;
}


.modernSidePlane
{
    margin-bottom: 8px;

    color:
        #2d82c3;

    font-size: 34px;
}



/* ============================================================
   MAIN CONTENT SHELL
   ============================================================ */

#content
{
    min-height: 880px;

    margin-left: 220px;

    overflow: hidden;

    background:
        rgba(255,255,255,.62);
}


#idTopFrame
{
    display: block;

    width: 100%;

    min-height: 760px;

    border: 0;

    background:
        transparent;
}



/* ============================================================
   FOOTER
   ============================================================ */

#footer
{
    clear: both;

    min-height: 94px;

    box-sizing: border-box;

    padding:
        14px 32px;

    display: flex;

    align-items: center;

    color:
        #ffffff;

    background:

        linear-gradient(
            90deg,
            #082c57,
            #0a477f
        );
}


.modernFooterInfo
{
    flex: 1;
}


.modernFooterInfo strong
{
    display: block;

    font-size: 12px;

    letter-spacing: .6px;
}


.modernFooterInfo span
{
    display: block;

    margin-top: 6px;

    color:
        #d1e5f4;

    font-size: 11px;
}


.modernFooterTag
{
    width: 350px;

    text-align: center;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-style: italic;

    font-size: 17px;

    color:
        #cbe7fb;
}


.modernFooterMarks
{
    width: 220px;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 12px;
}


.modernFooterMarks img
{
    max-width: 98px;

    max-height: 43px;

    padding: 3px;

    background:
        #ffffff;
}


.wait
{
    display: none;

    position: fixed;

    top: 50%;
    left: 50%;

    z-index: 9999;
}



/* ============================================================
   INTRO PAGE
   ============================================================ */

.modernIntroBody
{
    min-width: 820px;

    background:
        #f5fbff;

    color:
        #0b2f63;
}



/* ============================================================
   HERO
   ============================================================ */

.homeHero
{
    position: relative;

    min-height: 520px;

    display: flex;

    overflow: hidden;

    border-bottom:
        1px solid #c5e1f1;

    background:

        linear-gradient(
            90deg,
            rgba(247,252,255,.99) 0%,
            rgba(235,248,255,.96) 42%,
            rgba(209,239,255,.74) 100%
        ),

        url("images/modern/cloud-bg.jpg")
        center /
        cover
        no-repeat;
}


.heroCopy
{
    position: relative;

    z-index: 4;

    width: 43%;

    box-sizing: border-box;

    padding:
        62px 38px 35px 47px;
}


.eyebrow
{
    color:
        #155087;

    font-size: 15px;

    font-weight: bold;

    letter-spacing: 8px;
}


.heroCopy h1
{
    margin:
        14px 0 8px 0;

    color:
        #092e61;

    font-size: 58px;

    line-height: .98;

    letter-spacing: -1.5px;
}


.heroLine
{
    max-width: 520px;

    margin-top: 20px;

    color:
        #184e83;

    font-size: 17px;

    line-height: 1.52;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.heroValues
{
    max-width: 490px;

    margin-top: 37px;

    display: flex;
}


.valueItem
{
    flex: 1;

    min-width: 0;

    box-sizing: border-box;

    padding:
        0 13px;

    text-align: center;

    border-right:
        1px solid #9dc4df;

    color:
        #123e70;

    font-size: 12px;
}


.valueItem:first-child
{
    padding-left: 0;
}


.valueItem:last-child
{
    border-right: 0;
}


.valueIcon
{
    display: block;

    height: 33px;

    margin-bottom: 7px;

    color:
        #075da5;

    font-size: 27px;
}


.valueItem b
{
    display: block;
}


.heroDivider
{
    width: 88%;

    height: 1px;

    margin-top: 29px;

    background:

        linear-gradient(
            90deg,
            #87b8da,
            rgba(135,184,218,0)
        );
}


.scriptLine
{
    margin-top: 17px;

    color:
        #1d69ad;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-style: italic;

    font-size: 22px;
}



/* ============================================================
   HERO VISUAL
   ============================================================ */

.heroVisual
{
    position: relative;

    flex: 1;

    min-height: 520px;

    overflow: hidden;
}


.heroCampus
{
    position: absolute;

    top: 0;
    left: 0;

    width: 102%;
    height: 100%;

    object-fit: cover;
}


.heroVisual:before
{
    content: "";

    position: absolute;

    z-index: 2;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background:

        linear-gradient(
            90deg,
            rgba(235,249,255,.88) 0%,
            rgba(235,249,255,.20) 24%,
            rgba(255,255,255,0) 52%
        ),

        linear-gradient(
            0deg,
            rgba(9,58,98,.11),
            rgba(255,255,255,0) 45%
        );
}


.planeOverlay
{
    position: absolute;

    z-index: 4;

    left: 29%;
    top: 54px;

    color:
        #0862aa;

    font-size: 62px;

    text-shadow:
        0 2px 3px
        rgba(255,255,255,.9);

    transform:
        rotate(-10deg);
}



/* PHOTO COLLAGE */

.photoStrip
{
    position: absolute;

    z-index: 5;

    left: 5%;
    right: 2%;

    bottom: 18px;

    display: flex;

    align-items: flex-end;

    gap: 7px;
}


.photoStrip img
{
    width: 24%;

    height: 122px;

    box-sizing: border-box;

    object-fit: cover;

    border:
        6px solid #ffffff;

    background:
        #ffffff;

    box-shadow:
        0 5px 15px
        rgba(8,52,87,.28);

    transform:
        rotate(-2deg);
}


.photoStrip img:nth-child(2)
{
    height: 139px;

    transform:
        rotate(.8deg);
}


.photoStrip img:nth-child(3)
{
    height: 128px;

    transform:
        rotate(-.8deg);
}


.photoStrip img:nth-child(4)
{
    height: 136px;

    transform:
        rotate(1.6deg);
}



/* ============================================================
   DASHBOARD USER PANEL
   ============================================================ */

.dashboardWelcome
{
    margin:
        23px 27px 5px 27px;

    box-sizing: border-box;

    padding:
        17px 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border:
        1px solid #dfebf4;

    border-radius:
        16px;

    background:
        #ffffff;

    box-shadow:
        0 6px 21px
        rgba(13,77,128,.08);
}


.dashboardWelcomeLeft
{
    display: flex;

    align-items: center;
}


.dashboardAvatar
{
    width: 50px;
    height: 50px;

    line-height: 50px;

    margin-right: 15px;

    border-radius: 50%;

    text-align: center;

    color:
        #ffffff;

    background:

        linear-gradient(
            135deg,
            #197bc7,
            #093f7e
        );
}


.dashboardWelcome h2
{
    margin:
        3px 0 4px 0;

    color:
        #0d3d73;

    font-size: 21px;
}


.roleBadge
{
    display: inline-block;

    padding:
        4px 9px;

    border-radius:
        10px;

    background:
        #e7f4ff;

    color:
        #2672ad;

    font-size: 10px;

    font-weight: bold;
}


.dashboardDate
{
    text-align: right;
}


.dashboardDate span
{
    display: block;

    color:
        #7590a6;

    font-size: 9px;

    letter-spacing: 1.5px;
}


.dashboardDate strong
{
    display: block;

    margin-top: 4px;

    color:
        #174b79;

    font-size: 14px;
}



/* ============================================================
   SECTION TITLES
   ============================================================ */

.sectionTitle
{
    margin:
        26px 27px 9px 27px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.sectionTitle h3
{
    margin:
        4px 0 0 0;

    color:
        #0b3d72;

    font-size: 22px;

    font-weight: normal;
}


.smallCaps
{
    color:
        #63829d;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 2px;
}


.sectionPlane
{
    padding-right: 10px;

    color:
        #2e86c7;

    font-size: 36px;

    transform:
        rotate(-10deg);
}



/* ============================================================
   QUICK ACCESS
   ============================================================ */

.quickGrid
{
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 15px;

    padding:
        10px 27px 6px 27px;
}


.quickCard
{
    position: relative;

    min-height: 108px;

    box-sizing: border-box;

    padding:
        18px 47px 18px 18px;

    display: flex;

    align-items: center;

    overflow: hidden;

    border-radius:
        15px;

    color:
        #ffffff;

    text-decoration:
        none;

    box-shadow:
        0 7px 20px
        rgba(20,82,129,.14);

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}


.quickCard:before
{
    content: "";

    position: absolute;

    top: -55px;
    right: -35px;

    width: 130px;
    height: 130px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.08);
}


.quickCard:hover
{
    transform:
        translateY(-3px);

    box-shadow:
        0 10px 25px
        rgba(20,82,129,.23);
}


.quickCard.blue
{
    background:

        linear-gradient(
            135deg,
            #327fd0,
            #084987
        );
}


.quickCard.teal
{
    background:

        linear-gradient(
            135deg,
            #2dc0b7,
            #078a99
        );
}


.quickCard.orange
{
    background:

        linear-gradient(
            135deg,
            #f59e32,
            #d96c00
        );
}


.quickCard.purple
{
    background:

        linear-gradient(
            135deg,
            #8a7aeb,
            #5035b4
        );
}


.quickCard.green
{
    background:

        linear-gradient(
            135deg,
            #48b67b,
            #14764c
        );
}


.quickCard.gold
{
    background:

        linear-gradient(
            135deg,
            #d8a72a,
            #a57408
        );
}


.quickCard.navy
{
    background:

        linear-gradient(
            135deg,
            #315f91,
            #123961
        );
}


.quickCard.cyan
{
    background:

        linear-gradient(
            135deg,
            #39aeca,
            #13778e
        );
}


.quickCard.static
{
    cursor:
        default;
}


.quickIcon
{
    width: 45px;

    margin-right: 15px;

    text-align: center;

    font-size: 32px;

    font-weight: bold;
}


.quickCard b
{
    display: block;

    font-size: 15px;
}


.quickCard small
{
    display: block;

    margin-top: 6px;

    color:
        rgba(255,255,255,.89);

    font-size: 11px;

    line-height: 1.4;
}


.quickArrow
{
    position: absolute;

    right: 16px;

    width: 31px;
    height: 31px;

    line-height: 28px;

    border:
        2px solid
        rgba(255,255,255,.75);

    border-radius: 50%;

    text-align: center;

    color:
        #ffffff;

    font-size: 27px;
}



/* ============================================================
   EXPERIENCE AREA
   ============================================================ */

.experienceTitle
{
    margin-top:
        32px;
}


.experienceGrid
{
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 16px;

    padding:
        3px 27px 20px 27px;
}


.experienceCard
{
    overflow: hidden;

    border:
        1px solid #e0edf5;

    border-radius:
        15px;

    background:
        #ffffff;

    box-shadow:
        0 5px 18px
        rgba(14,73,116,.08);

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}


.experienceCard:hover
{
    transform:
        translateY(-3px);

    box-shadow:
        0 9px 23px
        rgba(14,73,116,.15);
}


.experienceImage
{
    overflow:
        hidden;
}


.experienceCard img
{
    display: block;

    width: 100%;
    height: 155px;

    object-fit:
        cover;

    transition:
        transform .3s ease;
}


.experienceCard:hover img
{
    transform:
        scale(1.025);
}


.experienceText
{
    padding:
        15px 16px 18px 16px;
}


.experienceText span
{
    display: block;

    margin-bottom: 5px;

    color:
        #4183b5;

    font-size: 9px;

    font-weight: bold;

    letter-spacing: 1.5px;
}


.experienceText b
{
    display: block;

    color:
        #0d4479;

    font-size: 15px;
}


.experienceText p
{
    margin:
        7px 0 0 0;

    color:
        #647e92;

    font-size: 11px;

    line-height: 1.5;
}



/* ============================================================
   QUOTE
   ============================================================ */

.quotePanel
{
    position: relative;

    min-height: 165px;

    box-sizing: border-box;

    margin:
        0 27px 30px 27px;

    padding:
        25px 47px;

    display: flex;

    align-items: center;

    overflow: hidden;

    border:
        1px solid #d9ebf6;

    border-radius:
        16px;

    background:

        linear-gradient(
            135deg,
            rgba(247,252,255,.99),
            rgba(214,240,255,.96)
        ),

        url("images/modern/cloud-bg.jpg")
        center /
        cover
        no-repeat;

    box-shadow:
        0 5px 18px
        rgba(13,77,128,.07);
}


.quoteMark
{
    position: absolute;

    left: 20px;
    top: 1px;

    color:
        #9ac7e9;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 80px;
}


.quoteContent
{
    margin-left:
        27px;
}


.quoteSmall
{
    display: block;

    margin-bottom: 6px;

    color:
        #6290b1;

    font-size: 9px;

    font-weight: bold;

    letter-spacing: 2px;
}


.quoteText
{
    color:
        #2c689c;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-style: italic;

    font-size: 18px;

    line-height: 1.55;
}


.quotePlane
{
    position: absolute;

    right: 35px;
    bottom: 23px;

    color:
        #559dd0;

    font-size: 58px;

    transform:
        rotate(-12deg);
}



/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1320px)
{

    .modernBrand
    {
        width: 390px;
    }


    .modernLogo
    {
        max-width: 355px;
    }


    .taglineMain
    {
        font-size: 30px;
    }


    .modernUser
    {
        width: 255px;
    }


    .heroCopy h1
    {
        font-size: 49px;
    }

}



@media (max-width: 1150px)
{

    .quickGrid
    {
        grid-template-columns:
            repeat(2,1fr);
    }


    .experienceGrid
    {
        grid-template-columns:
            1fr;
    }

}