/*
Basic document structure:
We'll wrap everything in .wrapper box to make advantage of CSS flex property.
In this case, we'll give .wrapper the CSS property align-items: stretch.
By doing this, the sidebar will take the height of the page content. 
As the content increases, sidebar height dynamically increases.
*/
/*@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&family=Raleway:ital,wght@0,400;0,600;0,900;1,600;1,900&display=swap');

html, body { overflow-x: hidden; }

body {
    font-family: 'Poppins', sans-serif;
    /*background: #fafafa;*/
    background-color: #F3EBF6;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a, a:hover, a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}


.card {
    margin-bottom: 1.5rem;
    border-color: #edf2f9;
    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03);
}


.btn.no-focus-shadow:active,
.btn.no-focus-shadow:focus,
.btn.no-focus-shadow.active,
.btn.no-focus-shadow:active:focus {
   background-image: none;
   outline: 0;
   -webkit-box-shadow: none;
   box-shadow: none;
}

.text-responsive {
  font-size: calc(100% + 1vw + 1vh);
}


.text-secondary { color: #9C27B0!important; }



.base-form label { font-weight: bold; /*margin-bottom: 5px;*/}
/*.base-form input, .base-form select, .base-form textarea { margin-bottom: 9px; }*/
.base-form .form-control:focus,
.base-form input:focus,
.base-form select:focus,
.base-form textarea:focus { outline: solid 2px #9C27B0; box-shadow: none !important; }

.base-form input[type=checkbox]:focus, .base-form input[type=radio]:focus { outline: none !important; }

.base-form ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #afafaf;
  opacity: 1; /* Firefox */
}

.base-form :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #afafaf;
}

.base-form ::-ms-input-placeholder { /* Microsoft Edge */
  color: #afafaf;
}


/* Custom Upload Input */

.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.upload-btn-wrapper .btn {
  border: 2px solid gray;
  color: gray;
  background-color: white;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.upload-btn-wrapper .btn span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}



/* Custom Button */
.btn-circle {
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    padding: 0;
    border-radius: 50%;
}

.btn-circle i {
    position: relative;
    top: -1px;
}

.btn-circle-sm {
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 0.9rem;
}

.btn-circle-lg {
    width: 55px;
    height: 55px;
    line-height: 55px;
    font-size: 1.1rem;
}

.btn-circle-xl {
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 1.3rem;
}
/* ----------------------------------------- */


.hover-effect, .hover-effect { transition: all .3s ease-in-out; }
.hover-effect:hover, .hover-effect:hover { transform: translateY(-1rem); }


.top-bar-bg { background-color: #f8f9fa !important; }


.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

/* 
---------------------------------------------------
    SIDEBAR STYLE
---------------------------------------------------
*/

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: linear-gradient(to bottom, #9C27B0, #E040FB);
    color: #fff;
    transition: all 0.3s;
}

#sidebar.closed {
    margin-left: -250px;
}

#sidebar .sidebar-header {
    padding: 20px;
    background: #9C27B0;
}

#sidebar ul.components {
    padding: 20px 0;
    /*border-bottom: 1px solid #47748b;*/
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

#sidebar ul li a:hover {
    color: #9C27B0;
    background: #fff;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    color: #fff;
    background: #9C27B0;
}



a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #9C27B0;
}

ul li a+ul li a+ul a {
    background: #89259a;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    color: #9C27B0;
}

a.article,
a.article:hover {
    background: #9C27B0 !important;
    color: #fff !important;
}


/* Fixed positioned scrollable sidebar */
.fixed-sidebar .wrapper {
    display: flex;
    width: 100%;
}
.fixed-sidebar #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 999;
}


#sidebar .user-photo {
    width: 44px;
    height: 44px;
    overflow: hidden;
    /*float: left;*/
    z-index: 5;
    margin-right: 5px;
    border-radius: 50%;
    /*margin-left: 23px;*/
    box-shadow: 0 16px 38px -12px rgba(0,0,0,.56), 0 4px 25px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
    vertical-align: middle;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: 100%;
    padding: 0px;
    min-height: 100vh;
    transition: all 0.3s;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.closed {
        margin-left: 0;
    }
    #sidebarCollapse span {
        display: none;
    }
    
    
    .text-sm-medium { font-size:16px; }
}

/* 
---------------------------------------------------
    COLOUR THEMES
---------------------------------------------------
*/

/* Green */
.theme-green { background-color: #f1fff6; }

.theme-green .top-bar-bg { background-color: #fff !important; }

/* Sidebar */
.theme-green #sidebar { background: linear-gradient(to bottom, #189041, #25c35b); }
.theme-green #sidebar .sidebar-header { background: #189041; }
.theme-green #sidebar ul li a:hover { color: #189041; background: #fff; }
.theme-green #sidebar ul li.active>a, .theme-green a[aria-expanded="true"] { color: #fff; background: #189041; }
.theme-green ul ul a { background: #189041; }
.theme-green a.download { background: #fff; color: #189041; }
.theme-green a.article, .theme-green a.article:hover { background: #189041 !important; color: #fff !important;}

.theme-green .base-form .form-control:focus,
.theme-green .base-form input:focus, 
.theme-green .base-form select:focus, 
.theme-green .base-form textarea:focus { outline: solid 2px #20bf6b; }



/* Green-2 */
.theme-green-2 { background-color: #f2fff9; }

.theme-green-2 .top-bar-bg { background-color: #fff !important; }

/* Sidebar */
.theme-green-2 #sidebar { background: linear-gradient(to bottom, #20bf6b, #26de81); }
.theme-green-2 #sidebar .sidebar-header { background: #20bf6b; }
.theme-green-2 #sidebar ul li a:hover { color: #20bf6b; background: #fff; }
.theme-green-2 #sidebar ul li.active>a, .theme-green-2 a[aria-expanded="true"] { color: #fff; background: #20bf6b; }
.theme-green-2 ul ul a { background: #20bf6b; }
.theme-green-2 a.download { background: #fff; color:#20bf6b; }
.theme-green-2 a.article, .theme-green-2 a.article:hover { background: #20bf6b !important; color: #fff !important;}

.theme-green-2 .base-form .form-control:focus,
.theme-green-2 .base-form input:focus, 
.theme-green-2 .base-form select:focus, 
.theme-green-2 .base-form textarea:focus { outline: solid 2px #20bf6b; }

.theme-green-2 .btn-secondary { color: #fff; background-color: #29b26a; border-color: #29b26a; }
.theme-green-2 .btn-secondary:hover { color: #fff; background-color: #20bf6b; border-color: #20bf6b; }



/* blue-horizon #4b6584 */
.theme-blue-horizon { background-color: #edf5ff; }

.theme-blue-horizon .top-bar-bg { background-color: #fff !important; }

.theme-blue-horizon .text-secondary { color: #4b6584!important; }

/* Sidebar */
.theme-blue-horizon #sidebar { background: linear-gradient(to bottom, #4b6584, #778ca3); }
.theme-blue-horizon #sidebar .sidebar-header { background: #4b6584; }
.theme-blue-horizon #sidebar ul li a:hover { color: #4b6584; background: #fff; }
.theme-blue-horizon #sidebar ul li.active>a, .theme-blue-horizon a[aria-expanded="true"] { color: #fff; background: #4b6584; }
.theme-blue-horizon ul ul a { background: #4b6584; }
.theme-blue-horizon a.download { background: #fff; color:#4b6584; }
.theme-blue-horizon a.article, .theme-blue-horizon a.article:hover { background: #4b6584 !important; color: #fff !important;}

.theme-blue-horizon .base-form .form-control:focus,
.theme-blue-horizon .base-form input:focus, 
.theme-blue-horizon .base-form select:focus, 
.theme-blue-horizon .base-form textarea:focus { outline: solid 2px #4b6584; }

.theme-blue-horizon .btn-secondary { color: #fff; background-color: #4b6584; border-color: #4b6584; }
.theme-blue-horizon .btn-secondary:hover { color: #fff; background-color: #4b6584; border-color: #4b6584; }




/* royal-blue #3867d6 */
.theme-royal-blue { background-color: #edf5ff; }

.theme-royal-blue .top-bar-bg { background-color: #fff !important; }

/* Sidebar */
.theme-royal-blue #sidebar { background: linear-gradient(to bottom, #3867d6, #4b7bec); }
.theme-royal-blue #sidebar .sidebar-header { background: #3867d6; }
.theme-royal-blue #sidebar ul li a:hover { color: #3867d6; background: #fff; }
.theme-royal-blue #sidebar ul li.active>a, .theme-royal-blue a[aria-expanded="true"] { color: #fff; background: #3867d6; }
.theme-royal-blue ul ul a { background: #3867d6; }
.theme-royal-blue a.download { background: #fff; color:#3867d6; }
.theme-royal-blue a.article, .theme-royal-blue a.article:hover { background: #3867d6 !important; color: #fff !important;}

.theme-royal-blue .base-form .form-control:focus,
.theme-royal-blue .base-form input:focus, 
.theme-royal-blue .base-form select:focus, 
.theme-royal-blue .base-form textarea:focus { outline: solid 2px #3867d6; }

.theme-royal-blue .btn-secondary { color: #fff; background-color: #3867d6; border-color: #3867d6; }
.theme-royal-blue .btn-secondary:hover { color: #fff; background-color: #3867d6; border-color: #3867d6; }



/* innuedo #a5b1c2 */
.theme-innuedo { background-color: #fdfdfd; }

.theme-innuedo .top-bar-bg { background-color: #fff !important; border-bottom: 1px solid #eff6ff; }

.theme-innuedo .text-secondary { color: #a5b1c2!important; }

/* Sidebar */
.theme-innuedo #sidebar { background: linear-gradient(to bottom, #a5b1c2, #d1d8e0); }
.theme-innuedo #sidebar .sidebar-header { background: #a5b1c2; }
.theme-innuedo #sidebar ul li a:hover { color: #a5b1c2; background: #fff; }
.theme-innuedo #sidebar ul li.active>a, .theme-innuedo a[aria-expanded="true"] { color: #fff; background: #a5b1c2; }
.theme-innuedo ul ul a { background: #a5b1c2; }
.theme-innuedo a.download { background: #fff; color:#a5b1c2; }
.theme-innuedo a.article, .theme-innuedo a.article:hover { background: #a5b1c2 !important; color: #fff !important;}

.theme-innuedo .base-form .form-control:focus,
.theme-innuedo .base-form input:focus, 
.theme-innuedo .base-form select:focus, 
.theme-innuedo .base-form textarea:focus { outline: solid 2px #a5b1c2; }

.theme-innuedo .btn-secondary { color: #fff; background-color: #a5b1c2; border-color: #a5b1c2; }
.theme-innuedo .btn-secondary:hover { color: #fff; background-color: #3867d6; border-color: #a5b1c2; }