/*====================================================

    UNITED STARS ORGANISATION
    PANEL FRAMEWORK

====================================================*/


/* ==========================================
   USO PANEL FRAMEWORK
========================================== */

.uso-panel{

    margin-bottom:18px;

    border:1px solid #385472;

    border-radius:8px;

    overflow:hidden;

    background:#101722;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 2px 8px rgba(0,0,0,.25);

}



/* ==========================================
   USO PANEL HEADER
========================================== */

.uso-panel-header{

    padding:14px 20px;

    font-size:17px;

    font-weight:bold;

    text-transform:uppercase;

    letter-spacing:1px;

    color:#f2f7ff;

    background:
        linear-gradient(#3d5876,#243548);

}


/* ==========================================
   PANEL TITLE
========================================== */

.uso-panel-title{

    color:#d8e8ff;

    font-size:18px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}


/* ==========================================
   HEADER DECORATION
========================================== */

.uso-panel-header::before{

    position:absolute;

    left:0;

    top:0;

    width:36px;

    height:100%;

    background:

        linear-gradient(

            135deg,

            rgba(255,255,255,.18),

            transparent

        );

}

.uso-panel-header::after{

    position:absolute;

    right:0;

    top:0;

    width:36px;

    height:100%;

    background:

        linear-gradient(

            -135deg,

            rgba(255,255,255,.18),

            transparent

        );

}


/* ==========================================
   PANEL BODY
========================================== */

.uso-panel-body{

    padding:18px;

    color:#d5dde8;

    line-height:1.6;

}


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

.uso-panel-content{

    color:#d9e5ef;

    line-height:1.6;

}


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

.uso-panel-footer{

    padding:12px 18px;

    border-top:1px solid rgba(255,255,255,.06);

}


/* ==========================================
   USO PANEL CORNER SYSTEM
========================================== */

.uso-panel::before,
.uso-panel::after{

    content:"";

    position:absolute;

    width:46px;

    height:46px;

    pointer-events:none;

    background-repeat:no-repeat;

    background-size:contain;

}

.uso-panel::before{

    top:0;

    left:0;

    background-image:url("./images/panel/corner-tl.png");

}

.uso-panel::after{

    top:0;

    right:0;

    background-image:url("./images/panel/corner-tr.png");

}

.uso-panel-body::before,
.uso-panel-body::after{

    position:absolute;

    bottom:0;

    width:46px;

    height:46px;

    pointer-events:none;

    background-repeat:no-repeat;

    background-size:contain;

}

.uso-panel-body::before{

    left:0;

    background-image:url("./images/panel/corner-bl.png");

}

.uso-panel-body::after{

    right:0;

    background-image:url("./images/panel/corner-br.png");

}


/* ==========================================
   PANEL HOVER
========================================== */

.uso-panel:hover{

    border-color:rgba(140,200,255,.35);

    box-shadow:

        inset 0 1px rgba(255,255,255,.06),

        inset 0 0 45px rgba(255,255,255,.03),

        0 0 24px rgba(0,120,255,.20);

}


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

@media (max-width:900px){

    .uso-panel-header{

        height:42px;

        font-size:16px;

    }

    .uso-panel-body{

        padding:15px;

    }

}