:root{
  --idec_primary_purple: #2a206a;
  --idec_primary_green: #00AD66;
  --idec_light_purple_1: #7A5FBC;
  --idec_light_purple_2: #926ABA;
  --pseudo_white: #fff;

}

.btn{
  cursor: pointer;
  border-radius: 25px;
  border-width: medium;
  font-weight: bold;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.btn-primary{
  color: var(--idec_primary_purple);
  border-color: var(--idec_primary_purple);
  background-color:var(--pseudo_white);
}

.btn.btn-primary:disabled{
  background-color: var(idec_light_purple_1);
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus{
  color: var(--pseudo_white);
  border-color: var(--idec_primary_purple);
  background-color:var(--idec_primary_purple);
}

.btn-danger{
  color: #dc3545;
  border-color: #dc3545;
  background-color:var(--pseudo_white);
}

.btn-danger:hover, .btn-danger:active, .btn-danger:focus{
  color: var(--pseudo_white);
  border-color: #cc0000;
  background-color:#dc3545;
}

.btn-success{
  color: #007a48;
  border-color: #007a48;
  background-color:var(--pseudo_white);
}

.btn-success:hover, .btn-success:active, .btn-success:focus{
  color: var(--pseudo_white);
  border-color: #007a48;
  background-color:var(--idec_primary_green);
}

.btn-warning{
  color: #ff8800;
  border-color: #ff8800;
  background-color:var(--pseudo_white);
}

.btn-warning:hover, .btn-warning:active, .btn-warning:focus{
  color: var(--pseudo_white);
  border-color: #ff8800;
  background-color:#ffbb33;
}

.btn-purple{
    color: var(--idec_primary_purple);
    border-color: var(--idec_primary_purple);
    cursor: pointer;
    border-radius: 25px;
    border-width: medium;
    font-weight: bold;
}

.btn-purple:hover{
  color: var(--pseudo_white);
  background-color:var(--idec_primary_purple);
}

.btn-green{
    color: var(--idec_primary_purple);
    border-color: var(--idec_primary_green);
    cursor: pointer;
    border-radius: 25px;
    border-width: medium;
    font-weight: bold;
}

.btn-green:hover{
  color: var(--pseudo_white);
  background-color:var(--idec_primary_green);
}

.btn-huge{
  margin: 0 0 0 0;
  padding-top:10px;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:10px;
  border-radius: 50px;
  font-size: 25px;
  font-weight: bold;
  border-width: thick;
}

.btn-divider{
    width: 3em;
    height: auto;
    display: inline-block;
}

.btn-link{
  color: var(--idec_primary_purple);
}

.btn-link:hover{
  color: var(--idec_light_purple_2);
}

.btn-dead, .btn-dead:hover, .btn-dead:active, .btn-dead:focus{
  font-weight: bold;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  background-color: var(--pseudo_white);
  border-color: var(--pseudo_white);
}

.btn-light-purple, .btn-light-purple:hover, .btn-light-purple:active, .btn-light-purple:focus{
  color: var(--pseudo_white);
  background-color: var(--idec_light_purple_2);
  cursor: default;
}

@media (max-width: 420px) {
  .btn-huge{
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    border-radius: 30px;
  }
}

@media (max-width: 360px) {
  .btn-huge{
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: bold;
  }
  .btn-divider{
      width: 1em;
    }
}

.small-btn-divider{
    width: 1em;
    height: auto;
    display: inline-block;
}

@media (max-width: 360px) {
  .small-btn-divider{
      width: 0;
      margin-top: 0.5em;
      margin-bottom: 0.5em;
    }
}

.btn-reset{
  all:initial;
}

.page-header{
  font-weight: bold;
}

h1 {
	color: var(--idec_primary_purple);
	font-size: 400%;
  margin-top: 5px;
  margin-bottom: 15px;
}
@media (max-width: 768px) {
  h1 {
    font-size: 300%;
  }
}
@media (max-width:500px) {
  h1 {
    font-size: 200%;
  }
}

.title-jumbo {
  background-image:  url("../img/hand.png"), url("../img/tree.png");
  background-size: 600px, 1800px;
  background-position: right, top;
  background-repeat: no-repeat;
  background-attachment: scroll, scroll;
}

@media (max-width: 1024px) {
  .title-jumbo {
      background-size: 400px, 1800px;
  }
}
@media (max-width: 768px) {
  .title-jumbo {
      background-size: 250px, 1800px;
  }
}
@media (max-width: 500px) {
  .title-jumbo {
      background-size: 200px, 1800px;
  }
}
@media (max-width: 420px) {
  .title-jumbo {
      background-size: 150px, 1800px;
  }
}
@media (max-width: 380px) {
  .title-jumbo {
      background-size: 120px, 1800px;
  }
}

.text-list-1{ /* lists of texts with multiple lines */
	list-style-position: outside;
  margin: 0em;
  padding-left: 1em;
}

.text-list-2{ /* Event on "Calendar" page */
	list-style-position: outside;
  margin: 0em;
  padding-left: 1em;
}

.text-list-3{ /* nested lists */
	list-style-position: outside;
  margin: 0em;
  padding-left: 3em;
}

.item-style-1::marker{ /* most unordered list items */
	content: "●";
  color: purple;
}

.item-style-1{ /* unordered list items with long texts */
	padding-left: 2em;
	margin: 0 0 0.75em 0;
}

.item-style-2{ /* nested lists */
	padding-left: 1em;
	margin: 0 0 0.5em 0;
}

.item-style-3{ /* ordered list items for instructions with subsections */
	padding-left: 1em;
	margin: 0 0 4em 0;
}

.item-style-4{ /* general ordered list items */
	padding-left: 1em;
	margin: 0 0 0.75em 0;
}

.item-style-5{ /* similar to item-style-1, but for unordered list items that need compact displays on small screens */
	padding-left: 1em;
	margin: 0 0 0.75em 0;
}

.item-style-5::marker{ /* similar to item-style-1, but for unordered list items that need compact displays on small screens */
	content: "●";
  color: purple;
}

.link-style-1{ /* for most hyperlinks including TOC links */
	color: var(--idec_light_purple_1);
	font-weight: bold;
}

.link-style-1:hover{ /* for most hyperlinks including TOC links */
	color: var(--idec_light_purple_2);
}

.alert-style-1 { /* Alert box on "Details for Registration" page */
  padding: 20px;
  background-color: #f44336; /* Red */
  color: white;
  margin-bottom: 15px;
}

.img-thumbnail { /* about_us page headshots */
  padding: 0.3rem;
  background-color: #f8f9fa;
  border: 3px solid #325475;
  border-radius: 45rem;
  max-width: 90%;
  margin: 1rem;
  margin-bottom: 0.2rem;
}

.colored-text-1{ /* To color dates as requested by Yang*/
	color: var(--idec_light_purple_1); /* should change to a diff color later to avoid confusion with links */
}

/* --------------------------- navbar -------------------------------- */
.navbar-default {
  background-color: #f8f9fa;
  border-width: 0;
}

/* nav-left box */
.navbar-default .navbar-left {
  font-size: 1.5em;
  color: var(--idec_primary_purple);
}

/* Title */
.navbar-default .navbar-brand {
  font-size: 1.5em;
  color: var(--idec_primary_purple);
}

@media (max-width: 310px) {
  .navbar-default .navbar-left {
    font-size: 1em;
    font-weight: normal;
  }
  .navbar-default .navbar-brand {
    font-size: 1em;
    font-weight: normal;
  }
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: var(--idec_light_purple_2);
}

/* Link */
.navbar-default .navbar-nav > li > a {
  font-size: 1.2em;
  color: var(--idec_primary_purple);
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: var(--idec_light_purple_2);
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #555;
  background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #555;
  background-color: #D5D5D5;
}

/* Mobile version */
.navbar-default .navbar-toggle {
  border-color: var(--idec_primary_purple);
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: var(--idec_primary_purple);
}

/* Drop down menu item */
.dropdown-menu>li>a{
  font-size: 1.2em;
  color: var(--idec_primary_purple);
}

/* nav-tabs for User Settings */
.nav-tabs{
  border-color: var(--idec_primary_purple);
  margin-bottom: 1em;
}
.nav-tabs>li{
  font-size: 1.2em;
}
@media (max-width: 760px) {
  .nav-tabs>li{
    font-size: 1em;
  }
}
.nav-tabs>li>a{
  color: var(--idec_light_purple_1);
}
.nav-tabs>li>a:hover{
  border-color: var(--idec_light_purple_2);
  background-color: #f8f9fa;
}
.nav-tabs>li.active>a{
  color: var(--idec_primary_purple);
  font-weight: bold;
  border-color: var(--idec_primary_purple);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-color: var(--pseudo_white);
}

.nav-tabs>li.active>a:hover{
  color: var(--idec_primary_purple);
  font-weight: bold;
  border-color: var(--idec_primary_purple);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-color: var(--pseudo_white);
  background-color: #f8f9fa;
  cursor: pointer;
}

/* Form apperance */
.form-appearance{
  font-size: 1.2em;
  color: var(--idec_primary_purple) ;
}

/* Form selector height */
.select2 .select2-container .select2-container--default{
  height: 200px;
}

/* -------------------------- Font awesome styles -------------------------- */
.fa-large{
  font-size: 2em;
  color: var(--idec_primary_green); 
}

@media (max-width: 850px) {
  .fa-large{
    font-size: 1.7em;
    margin: 0.6em 0.6em 0.6em 0.6em;
  }
}

.fa-large:hover, .fa-large:focus, .fa-large:active{
  color: #005e38;;
}

/* -------------------------- Social account list page -------------------------- */

.socialaccount_providers {
  list-style-type: none;
}

@media (max-width: 1000px) {
  .socialaccountbuttons {
    width: 300px;
  }
}

@media (max-width: 1200px) {
  .socialaccountbuttons {
    width: 250px;
  }
}
/* -------------------------- Table style -------------------------- */
.custom-table{
  font-size: 1.2em;
  /* table-layout: fixed; */
  over-flow: break-word;
}

@media (max-width: 760px) {
  .custom-table{
    font-size: 1em;
  }
}

/* -------------------------------- Labels -------------------------------- */
.lb-lg {
  font-size: 1em;
  background-color: var(--pseudo_white);
  border-radius: 10px;
}

.lb-green{
  color: var(--pseudo_white);
  background-color: var(--idec_primary_green);
}

.lb-yellow{
  color: var(--pseudo_white);
  background-color: #ff8800;
}

.lb-teal{
  color: var(--pseudo_white);
  background-color: #17a2e8;
}

.lb-light-purple{
  color: var(--pseudo_white);
  background-color: var(--idec_light_purple_2);
}

@media (max-width: 760px) {
  .lb-lg{
    font-size: 0.6em;
  }
}

/* information text labels */
.info-text{
  font-size: 1.2em;
  color: var(--idec_primary_purple);
  overflow-wrap: break-word;
}

@media (max-width: 760px) {
  .info-text{
    font-size: 1em;
  }
}

/* Autocomplete form + selector fix weird height and text location */

.select2-selection--single{
  height:34px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
      line-height: 1.42857143 !important;
      padding-left: 0 !important;
}

/* Card */

.card-body-info {
  border-style: solid;
  border-color:	#5bc0de;
  border-radius: 2em;
  border-width: 3px;
}