/* =================================================================================================================
TABLE OF CONTENTS

1. General Styles
2. GENERAL MAIN BODY
3. NAV link and nav tab  STYLES
4. PAGE LOADER
5. Table Styles
6. LAYOUT AND CARD STYLES
7. GENERAL SETTING STYLES
8. PAGINATION STYLES
9. 
10. Administrator dashboard 





DESIGNED BY GOLDEN STARRY TECHNOLOGIES 
WEBSITE: www.goldenstarry.org.ng
Copyright: 2021 developement

For Permissions for use or duplication, kindly contact us via our website above
==================================================================================================================*/



/* =================================================================================================================
1. General Styles
 ================================================================================================================= */
html{
    direction:ltr;
}
body{
    -webkit-transition:all 0.4s ease-in-out;
    -moz-transition:all 0.4s ease-in-out;
    -ms-transition:all 0.4s ease-in-out;
    -o-transition:all 0.4s ease-in-out;
    transition:all 0.4s ease-in-out;
    background-color:#f4f6f9; 
    /* background-color:#e4e7ee; */
    color:#434A54;
    direction:ltr;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-tap-highlight-color:transparent;
    -webkit-text-size-adjust:none;
    -ms-touch-action:manipulation;
    touch-action:manipulation;
    -webkit-font-feature-settings:"liga" 0;
    font-feature-settings:"liga" 0;
    overflow-y:scroll;
    /* overflow-x: unset;
    scrollbar-width: none; */
    position:relative;
}
body.font-montserrat{
    font-family:"Montserrat",sans-serif;
    font-size:15px
}

@media print{
    body{background:none}
}

body *::-webkit-scrollbar{
    width:0px;
    height:3px;
    transition:.3s background;
}
body *::-webkit-scrollbar-thumb{background:#f8f9fa;}
body *:hover::-webkit-scrollbar-thumb{background:#f8f9fa;}
a{
    color: black;
}
a:hover{
    text-decoration:none;
    color: brown;
}
.icon i{
    vertical-align:-1px;
}
a.icon{
    text-decoration:none;
    cursor:pointer;
}




/* --------------------------------------------------------------------------------------------------------------------------------------

2. GENERAL MAIN BODY
-----------------------------------------------------------------------------------------------------------------------------------------*/
#main_content{
    display:-ms-flexbox;
    display:flex;
    -ms-flex-direction:column;
    flex-direction:column;
    -ms-flex-pack:center;
    justify-content:center;
    min-height:100%
}
.main_body{
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    left: 250px;
    width: calc(100% - 250px);
    position: relative;
    display: block;
}
@media screen and (max-width: 1200px){
    .main_body{
        left: 100px;
        width: calc(100% - 100px);
    }
}
@media screen and (max-width: 767px){
    .main_body{
        width:100%;
        left:0
    }
}

.main_body .section-body{background:#f4f6f9}
.main_body .section-light{background:#f8f9fa}
.main_body .section-dark{background:#292b30}
.main_body .section-white{background:#fff}
.main_body .section-gray{background:#E8E9E9}

.offcanvas-active .main_body{
    left: 100px;
    width: calc(100% - 100px);
}

@media screen and (max-width: 767px){
    .offcanvas-active .main_body{
        left:0;
        width:100%;
    }
}



/* --------------------------------------------------------------------------------------------------------
3. NAV link and nav tab  STYLES
-----------------------------------------------------------------------------------------------------------*/
.nav-link,.nav-item{
    padding:0 .75rem;
    min-width:2rem;
    transition:.3s color;
    user-select:none;
    cursor:pointer;
    display:flex;
    align-items:center;
}
.nav-link .badge,.nav-item .badge{
    position:absolute;
    top:0;
    right:0;
    padding:.2rem .25rem;
    min-width:1rem;
}
.nav-tabs{
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
    color:#9aa0ac;
    user-select:none;
    margin:0 -.75rem;
}
.nav-tabs .nav-link{
    transition:.3s border-color;
    font-weight:400;
    border:0;
    color:inherit;
    border-bottom:3px solid transparent;
    margin-bottom:-1px;
    padding:1rem 0
}
.nav-tabs .nav-link:hover:not(.disabled){
    border-color:#6e7687;
    color:#6e7687;
}
.nav-tabs .nav-link.active{
    border-color: rgb(126, 32, 6);
    color: rgb(126, 32, 6);
    background:transparent;
}
.nav-tabs .nav-link.disabled{opacity:.4;cursor:default;pointer-events:none}
.nav-tabs .nav-item{position:relative}
.nav-tabs .nav-item i{
    display:inline-block;
    vertical-align:middle;
    *vertical-align:auto;
    *zoom:1;
    *display:inline;
    line-height:1;
    width:.875rem;
    vertical-align:baseline;
}
.nav-tabs .nav-item:hover .nav-submenu{display:block}
.nav-tabs .nav-submenu{
    background:#fff;
    border-radius:0 0 3px 3px;
    display:none;
    position:absolute;
    border:1px solid rgba(0,40,100,0.12);
    border-top:none;
    z-index:10;
    box-shadow:0 1px 2px 0 rgba(0,0,0,0.05);
    min-width:10rem;
}
.nav-tabs .nav-submenu .nav-item{
    display:block;
    vertical-align:middle;
    *vertical-align:auto;
    *zoom:1;
    *display:block;
    padding:.5rem 1rem;
    color:#9aa0ac;
    margin:0 !important;
    cursor:pointer;
    transition:.3s background;
}
.nav-tabs .nav-submenu .nav-item.active{
    color: rgb(126, 32, 6);
}
.nav-tabs .nav-submenu .nav-item:hover{
    color:rgb(126, 32, 6);
    text-decoration:none;
    background: rgba(0,0,0,0.024);
}



/* -------------------------------------------------------------------------------------------------
4 PAGE LOADER
---------------------------------------------------------------------------------------------------*/

.page-loader-wrapper{
    text-align: center;
    z-index: 99999999;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #E8E9E9;
    display: flex;
}


.page-loader-wrapper .loader{
    position:relative;
    top:calc(40% - 30px);
    justify-content:center;
    width:100%;
}
.page-loader-wrapper img{
    width:38px;
    height:38px
}

@keyframes loader{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

.loader{
    height:2.5rem;
    width:2.5rem;
    color:#2185d0;
    display:block;
    position:relative;
}

.loader:before,.loader:after{
    width:2.5rem;
    height:2.5rem;
    margin:-1.25rem 0 0 -1.25rem;
    position:absolute;
    content:'';
    top:50%;
    left:50%;
}
.loader:before{
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    border:3px solid currentColor;
    opacity:.15
}
.loader:after{
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    animation:loader .6s linear;
    animation-iteration-count:infinite;
    border:3px solid;
    border-color:transparent;
    border-top-color:currentColor;
    box-shadow:0 0 0 1px transparent;
}



/* -------------------------------------------------------------------------------------------
Table Styles
-----------------------------------------------------------------------------------------------*/
.table{color:inherit}
.table thead th{border-top:0;border-bottom-width:1px;padding-top:.5rem;padding-bottom:.5rem}
.table th{color:#9aa0ac;font-size:.875rem;font-weight:400;text-transform:uppercase}
.table td,.table th{border-color:#E8E9E9;font-size:14px}
.table.table_custom{border-collapse:separate;border-spacing:0 5px !important}
.table.table_custom.spacing5{border-spacing:0 5px !important}
.table.table_custom.spacing8{border-spacing:0 8px !important}
.table.table_custom.border-style tr td{border-top:1px solid #E6E9ED;border-bottom:1px solid #E6E9ED;border-left:1px solid #E6E9ED}
.table.table_custom.border-style tr td:last-child{border-right:1px solid #E6E9ED}
.table.table_custom.border-style tr:hover td{border-top-color:#2185d0;border-bottom-color:#2185d0}
.table.table_custom.border-style tr:hover td:first-child{border-left-color:#2185d0}
.table.table_custom.border-style tr:hover td:last-child{border-right-color:#2185d0}
.table.table_custom thead tr{background:transparent}
.table.table_custom thead tr th{color:rgba(41,43,48,0.5)}
.table.table_custom tr{background:#fff}
.table.table_custom tr th,.table.table_custom tr td{border:0}
.table.table_custom tr th:first-child,.table.table_custom tr td:first-child{border-radius:.55rem 0 0 .55rem}
.table.table_custom tr th:last-child,.table.table_custom tr td:last-child{border-radius:0 .55rem .55rem 0}
.table.table-md th,.table.table-md td{padding:.5rem}
.table.table-vcenter td,.table.table-vcenter th{vertical-align:middle}
.table.table-center td,.table.table-center th{text-align:center}
.table.table-striped tbody tr:nth-of-type(odd){background:transparent}
.table.table-striped tbody tr:nth-of-type(even){background-color:rgba(0,0,0,0.04)}
.table.table-custom{border-collapse:separate !important}
.table.table-custom.spacing5{border-spacing:0 5px !important}
.table.table-custom.spacing8{border-spacing:0 8px !important}
.table.table-custom td,.table.table-custom th{vertical-align:middle;border-top:0}
.table.table-custom2{border-collapse:separate !important;border-spacing:1px 1px !important}
.table.table-custom2 tr td,.table.table-custom2 tr th{border:none;font-size:15px}
.table.table-custom2 thead,.table.table-custom2 tbody{background:#fff}
.table.text-wrap td,.table.text-wrap th{white-space:nowrap}
.table.table-hover tbody tr:hover{color:#1f262b}
.table-header{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;cursor:pointer}
.table-header:hover{color:#f4f6f9 !important}
.table-header:after{content:'\f0dc';font-family:'FontAwesome';display:inline-block;margin-left:.5rem;font-size:.75rem}
.table-header-asc{color:#f4f6f9 !important}
.table-header-asc:after{content:'\f0de'}
.table-header-desc{color:#f4f6f9 !important}
.table-header-desc:after{content:'\f0dd'}



/* -----------------------------------------------------------------------------------------------------
6. LAYOUT AND CARD STYLES
---------------------------------------------------------------------------------------------------*/

.card{
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -ms-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
    border-radius:.55rem;
    border-color:#E6E9ED;
    position:relative;
    width:100%
}
.card .card{box-shadow:none}
@media print{
    .card{box-shadow:none;border:none}
}
@media screen and (max-width: 992px){
    .card-columns{column-count:2}
}
.card-body{padding:20px 20px;flex:1 1 auto;position:relative}
.card-body+.card-body{border-top:1px solid rgba(0,40,100,0.12)}
@media print{.card-body{padding:0}}
@media screen and (max-width: 767px){.card-body{padding:15px 15px}}
.card-body-scrollable{overflow:auto}.card-footer,.card-bottom{padding:20px 20px;background:none}
.card-footer{border-top:1px solid rgba(0,40,100,0.12);color:#6e7687}
.card-header{padding:10px 20px;display:flex;align-items:center;border-color:#E6E9ED}
@media print{
    .card-header{display:none}
}
.card-title a{color:inherit}
.card-title small{
    display:block;
    vertical-align:middle;
    *vertical-align:auto;
    *zoom:1;*display:block;
    text-transform:initial;
    font-weight:600;color:#9aa0ac
}
.card-subtitle{
    display:block;
    vertical-align:middle;
    *vertical-align:auto;
    *zoom:1;*display:block;
    font-weight:400;
    color:#9aa0ac;
    margin:-.75rem 0 1rem;
    line-height:1.1
}
.card-table tr:first-child td,.card-table tr:first-child th{border-top:0}
.card-table tr td:first-child,.card-table tr th:first-child{padding-left:20px}
.card-table tr td:last-child,.card-table tr th:last-child{padding-right:20px}
.card-body+.card-table{border-top:1px solid rgba(0,40,100,0.12)}
.card-profile .card-header{height:9rem;background-size:cover}
.card-profile-img{
    border:3px solid #fff;
    max-width:6rem;
    border-radius:100%;
    box-shadow:0 1px 1px rgba(41,43,48,0.3)
}
.card-options{
    color:rgb(126, 32, 6);
    margin-left:auto;
    display:flex;
    order:100;
    align-self:center;
}
.card-options>a{
    font-size:16px
}
.card-options a:not(.btn):hover{
    text-decoration:none;
    color:#fff;
}
.card-options .dropdown-toggle:after{display:none}
.card-options .dropdown>a{font-size:18px}
.card-collapsed>:not(.card-header):not(.card-status){display:none}

.card-collapsed .card-options-collapse i:before{content:'\e92d'}

.card-fullscreen .card-options-fullscreen i:before{content:'\e992'}

.card-status{
    border-top-left-radius:.1875rem;
    border-top-right-radius:.1875rem;
    position:absolute;top:-1px;
    left:0;right:0;
    height:3px;
}
.card-status-left{
    border-top-left-radius:.1875rem;
    border-bottom-left-radius:.1875rem;
    border-top-right-radius:0;
    right:auto;bottom:0;
    height:auto;width:3px
}
.card-fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1070}
.card-icon{width:3rem;line-height:3rem}.card-alert{border-radius:0;margin:-1px -1px 0}
.card-category{font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin:0 0 .5rem}

blockquote{font-style:italic;color:#6e7687;padding-left:2rem;border-left:2px solid rgba(0,40,100,0.12)}
blockquote p{margin-bottom:1rem}
blockquote cite{display:block;text-align:right}
blockquote cite:before{content:'— '}
code{
    background:rgba(41,43,48,0.025);
    border:1px solid rgba(41,43,48,0.05);
    border-radius:3px;
    padding:3px;
}
pre code{padding:0;border-radius:0;border:none;background:none}
hr{margin-top:1rem;margin-bottom:1rem}
pre{
    color:#292b30;
    padding:1rem;
    overflow:auto;
    font-size:85%;
    line-height:1.45;
    background-color:#f8fafc;
    border-radius:3px;
    tab-size:4;
    text-shadow:0 1px #fff;
    hyphens:none}
img{max-width:100%}
@media print{
    .container{max-width:none}
}
.row-cards>.col,.row-cards>[class*='col-']{
    display:flex;
    flex-direction:column;
}

.row-deck>.col,.row-deck>[class*='col-']{
    display:flex;
    align-items:stretch;
}
.row-deck>.col .card,.row-deck>[class*='col-'] .card{flex:1 1 auto}
.gutters-0{margin-right:0;margin-left:0}
.gutters-0>.col,.gutters-0>[class*="col-"]{padding-right:0;padding-left:0}
.gutters-0 .card{margin-bottom:0}

.badge{color:#fff}.badge-default{background:#BABDBF;color:#4D5052}



/* ---------------------------------------------------------------------------------------------------------------
7. GENERAL SETTING STYLES
----------------------------------------------------------------------------------------------------------------*/

.custom-switch{user-select:none;cursor:default;display:inline-flex;align-items:center;padding:0}.custom-switch-input{position:absolute;z-index:-1;opacity:0}.custom-switches-stacked{display:flex;flex-direction:column}.custom-switches-stacked .custom-switch{margin-bottom:.5rem}.custom-switch-indicator{-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;display:inline-block;vertical-align:middle;*vertical-align:auto;*zoom:1;*display:inline;height:1.25rem;width:2.25rem;background:#D1D3D4;transition:.3s border-color, .3s background-color;position:relative;vertical-align:bottom;border:1px solid rgba(0,40,100,0.12)}.custom-switch-indicator:before{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;height:calc(1.25rem - 4px);width:calc(1.25rem - 4px);top:1px;left:1px;background:#fff;content:'';position:absolute;transition:.3s left;box-shadow:0 1px 2px 0 rgba(0,0,0,0.4)}.custom-switch-input:checked ~ .custom-switch-indicator{background:rgb(126, 32, 6)}.custom-switch-input:checked ~ .custom-switch-indicator:before{left:calc(1rem + 1px)}.custom-switch-input:focus ~ .custom-switch-indicator{border-color:rgb(126, 32, 6)}.custom-switch-description{color:#666A6D;margin-left:.5rem;transition:.3s color}.custom-switch-input:checked ~ .custom-switch-description{color:#434A54}





/* --------------------------------------------------------------------------------------------------------
8. PAGINATION STYLES
-----------------------------------------------------------------------------------------------------------*/
.pagination-simple .page-item .page-link{background:none;border:none}
.pagination-simple .page-item.active .page-link{color:#f4f6f9;font-weight:700}
.pagination-pager .page-prev{margin-right:auto}
.pagination-pager .page-next{margin-left:auto}
.page-total-text{
    color:#6e7687;
    margin-right:1rem;
    align-self:center;
}


/* --------------------------------------------------------------------------------------------------------
9
------------------------------------------------------------------------------------------------------------*/
.dropify-wrapper{border-width:1px;border-color:#E8E9E9}





/* ============================================================================================================
10. Administrator dashboard 
================================================================================================================ */
.chart{position:relative;padding-top:56.25%}

#userreviewdescending .carousel-inner, 
#userfaqdescending .carousel-inner,
#userfaqascending .carousel-inner{
    box-shadow: 2px 2px 12px 2px rgb(14, 6, 44);
    margin-top: 6px;
    border: 0;
    border-radius: 10px;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
#userfaqdescending .carousel-inner,
#userfaqascending .carousel-inner{
    margin-top: 13px;
    padding: 10px 0 10px 0;
}
#userreviewdescending .carousel-inner:hover,
#userfaqdescending .carousel-inner:hover,
#userfaqascending .carousel-inner:hover{
    box-shadow: 2px 2px 12px 2px rgba(212, 12, 12, 0.45);
    border: 0;
    border-radius: 15px;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}