:root {
  --main-bg-color: #333;
  --main-tx-color: #E8E8F3;
  --main-lg-color: #CECECE;
  --main-dk-color: #A6A6A8;
  --main-hl-color: #B1E5F2;
}
body {
    font-family: 'Exo 2', sans-serif;
    background-color: var(--main-bg-color);
}

p {
    font-family: 'Exo 2', 'Poppins', sans-serif;
    font-size: 1.0em;
    line-height: 1.3em;
    color:var(--main-color-dk);
}

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

a.navlink {
  color: #fff !important;
} 

.btn-info {
  border: none !important;
}

.nav-link {
  text-align: right;
} 

.navbar {
    padding: 5px 10px;
    background-color: var(--main-bg-color);
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed var(--main-hl-color);
    margin: 40px 0;
}

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

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

#sidebar {
    min-width: 250px;
    max-width: 250px;
    color: var(--main-tx-color);
    transition: all 0.3s;
}

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

#sidebar .sidebar-header {
    padding: 20px;
    background: var(--main-lg-color);
}

#sidebar ul.components {
    padding: 0px 0;
    border-bottom: 1px solid var(--main-hl-color);
}

#sidebar ul p {
    color: var(--main-tx-color);
    padding: 10px;
}

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

#sidebar ul li a:hover {
    color: var(--main-bg-color);
    background: var(--main-lg-color);
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    color: var(--main-bg-color);
    background: var(--main-lg-color);
}

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

#sidebarCollapse {
  background-color: var(--main-lg-color);
  color: var(--main-bg-color);
}

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

nav {
  min-height: 44px;
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: var(--main-lg-color);
    color: var(--main-bg-color);
}

ul.CTAs {
    padding: 20px;
}

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

a.download {
    background: #fff;
    color: #7386D5;
}

a.article:hover {
    background: var(--main-dk-color) !important;
    color: var(--main-tx-color) !important;
}

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

#content {
    width: 100%;
    padding: 0px 0px;
    min-height: 100vh;
    transition: all 0.3s;
    background-color: var(--main-lg-color);
    color: var(--main-bg-color);
}



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

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #sidebarCollapse span {
        display: none;
    }
}


/*
 * Hero image
 */
.hero {
  padding: 0px 0px;
}
.hero-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../media/images/stefan-cosma-600916-unsplash.jpg");
    /* Set a specific height */
    height: 200px;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative; 
    border: 1px solid black;
}

/* Place text in the middle of the image */
.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--main-tx-color);
}

/*
 * Google Calendar
 */
@media (max-width: 550px) {
     .big-container {
         display: none;
     }
 }
 @media (min-width: 550px) {
     .small-container {
         display: none;
     }
 }
 /* Responsive iFrame */
 .responsive-iframe-container {
     position: relative;
     padding-bottom: 56.25%;
     padding-top: 30px;
     height: 0;
     overflow: hidden;
 }
 .responsive-iframe-container iframe,   
 .vresponsive-iframe-container object,  
 .vresponsive-iframe-container embed {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

/* 
 * Admin users table
 */
.admin-table {
  border-bottom: 2px solid #546A7B;
  border-collapse: collapse;
  table-layout: auto;
  width: 100%;
}

.admin-table td, tr {
  border: none;
  padding: 2px 0px;
}

.table td.fit,
.table th.fit {
  white-space: nowrap;
  width: 1%;
}

hr {
  border-color: #546A7B;
}

/*
 * Dashboard
 */

.call-to-action {
  background: var(--main-bg-color) !important;
  color: var(--main-tx-color) !important;
}


.card {
  background: var(--main-dk-color);
  color: var(--main-bg-color);
}

.card-title {
  width: 100%;
  border-bottom: 1px solid var(--main-hl-color);
}

.card-text {
  display: flex;
  height: 100%;
  align-content: center;
  font-size: 1.0rem;
}

.card-footer {
  margin:auto;
  border-top: 1px solid var(--main-hl-color);
  background: inherit;
}

a.btn.btn-primary {
  background: var(--main-lg-color);
  color: var(--main-bg-color);
  border: none !important;
}
  
.announcement {
  width: 100%;
  background-color: var(--main-hl-color);
  color: var(--main-bg-color);
  padding: 5px;
}
/*