/** =======================
 * cloud css
 ===========================*/

#aoa_cloud_container {
  min-height: 430px;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, Verdana, Helvetica, sans-serif;
}

#aoa_cloud_title {
  text-align: center;
  line-height: normal;
  color: #C8C8C8;
  font-size: 1.5em;
  font-weight: bold;
  margin: 30px auto 50px;
  max-width: 1000px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul.aoa_cloud {
  overflow-y: hidden;
  overflow-x: hidden;
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  line-height: 2.75rem;
  width: 900px;
  padding-bottom: 15px;
}

ul.aoa_cloud .aoa_fos_topic {
  --size: 4;
  --color: #4E89FB;
  color: var(--color);
  font-size: calc(var(--size) * 0.25rem + 0.5rem);
  display: block;
  padding: 0.225rem 0.25rem;
  position: relative;
  text-decoration: none;
}

.aoa_fos_topic {
  margin: 0px;
}

ul.aoa_cloud p[data-weight="1"] { --size: 1; --color: #4E89FB;}
ul.aoa_cloud p[data-weight="2"] { --size: 2; --color: #4E89FB;}
ul.aoa_cloud p[data-weight="3"] { --size: 3; --color: #4E89FB;}
ul.aoa_cloud p[data-weight="4"] { --size: 4; --color: #345b9b;}
ul.aoa_cloud p[data-weight="5"] { --size: 6; --color: #345b9b;}
ul.aoa_cloud p[data-weight="6"] { --size: 8; --color: #345b9b;}
ul.aoa_cloud p[data-weight="7"] { --size: 10; --color: #345b9b;}
ul.aoa_cloud p[data-weight="8"] { --size: 13; --color: #2759AB;}
ul.aoa_cloud p[data-weight="9"] { --size: 16; --color: #1c4280;}

ul.aoa_cloud .aoa_fos_topic::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: var(--color);
  transform: translate(-50%, 0);
  opacity: 0.15;
  transition: width 0.25s;
}

ul.aoa_cloud .aoa_fos_topic:focus::before,
ul.aoa_cloud .aoa_fos_topic:hover::before {
  width: 100%;
}

.aoa_see_all {
  overflow: hidden;
  position: relative;
  right: -70px;
  bottom: -250px;
  font-size: large;
  font-weight: bold;
  cursor: pointer;
}


/** =======================
 * list css
 ===========================*/

#list_container { 
  padding-left: 0px; 
}

#list_container ul { 
  padding-left: 0px; 
  list-style-type: none; 
}

#list_container h1 {
  color: #2759AB;
  font-size: 1em;
  font-weight: bold;
  margin: 30px auto 20px;
  max-width: 1000px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aoa_searchbuttonicon {
  margin-top: 3px;
  margin-bottom: 3px;
  vertical-align: middle;
}

#aoa_searchbutton {
  position: absolute;
  border: 0px solid;
  background-color: white;
  vertical-align: middle;
  height: 0px;
  margin-bottom: 18px;
  margin-top: 6px;
  margin-left: -32px;
  outline: none;
}

#aoa_searchbutton:hover {
  cursor: pointer;
}

.aoa_deletebutton:hover {
  cursor: pointer;
}

.aoa_deletebutton {
  float: left;
  position: absolute;
  border: 0px solid;
  background-color: white;  
  font-size: 18px;
  margin-left: -60px;
  vertical-align: middle;
  margin-top: 1.5px;
  margin-bottom: 21px;
  height: 0px;
  outline: none;
}

.aoa_deletebuttonhidden {
  visibility: hidden;
}

.aoa_deleteicon {
  margin-bottom: 3px;
  margin-top: 0px; 
  opacity: 0.3;
  vertical-align: middle;
}

#aoa_searchdiv {
  max-width: 800px;
  width: 100%;
  margin-left: 160px;
  display: table;
}

#aoa_searchInput {
  float: left;
  height: 23px;
  width: 100%;
  padding: 2px;
  padding-left: 3px;
  padding-right: 45px;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid;
  margin-left: 5px;
  margin-top: 5px;
  outline: none;
  border-radius: 2px;
}

.aoa_accordion_control {
  width: 100%;
  max-width: 1000px;
  margin: 30px auto 20px;
  background: #FFF;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.aoa_accordion_control .aoa_topic {
  cursor: pointer;
  display: block;
  padding: 15px 15px 15px 42px;
  color: #4D4D4D;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid #CCC;
  position: relative;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.aoa_accordion_control .aoa_topic:hover, .aoa_topic:hover i {
  color: #4E89FB;
}

.aoa_accordion_control .aoa_toggle {
  cursor: pointer;
  display: block;
  padding: 15px 15px 15px 42px;
  color: #4D4D4D;
  font-size: 14px;
  border-bottom: 1px solid #CCC;
  position: relative;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.aoa_accordion_control li:last-child .aoa_topic { border-bottom: 0; }

.aoa_accordion_control li i {
  position: absolute;
  top: 16px;
  left: 12px;
  font-size: 18px;
  color: #595959;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.aoa_accordion_control li i.fa-chevron-down {
  right: 12px;
  left: auto;
  font-size: 16px;
}

.aoa_accordion_control li i.fa-angle-down {
  right: 12px;
  left: auto;
  font-size: 20px;
  color: rgb(0, 0, 0) !important;
}

.aoa_accordion_control li i.fa-angle-up {
  right: 12px;
  left: auto;
  font-size: 20px;
}

.aoa_accordion_control li i.fa-angle-up .aoa_toggle {
  color: rgb(39,89,171); 
}

.aoa_accordion_control li.open .aoa_topic { color: rgb(39,89,171); }

.aoa_accordion_control li.open i.fa { color: rgb(39,89,171); }

.aoa_accordion_control li.open i.fa-chevron-down {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

/**
 * Submenu
 -----------------------------*/

.aoa_submenu {
  display: none;
  background: #FFF;
  font-size: 14px;
}

.aoa_submenu li { border-bottom: 1px solid #4b4a5e; }


.aoa_submenu .aoa_toggle {
  display: block;
  text-decoration: none;
  color: rgb(7, 0, 0);
  padding: 12px;
  padding-left: 42px;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}


.aoa_submenu .aoa_toggle:hover {
  background: rgba(39,89,171,0.5);
  color: rgb(7, 0, 0);
}


/**
 * Submenu2
 -----------------------------*/
 .aoa_submenu2 {
  background: #FFF;
  font-size: 14px;
}

.aoa_submenu2 li { border-bottom: 1px solid #4b4a5e; }

.aoa_submenu2 p {
  display: block;
  text-decoration: none;
  color: rgb(7, 0, 0);
  padding: 12px;
  padding-left: 66px;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.aoa_submenu2 a {
  display: block;
  float: left;
  padding-top: 40px;
  padding-left: 0px;
  font-size: large;
  text-decoration: none;
  color: rgb(7, 0, 0);
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.aoa_submenu2 img {
  float : left;
  text-decoration: none;
  color: rgb(7, 0, 0);
  padding: 12px;
  padding-left: 66px;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.aoa_submenu2 div {
  height: 80px;
  position: relative;
}

.aoa_submenu2 .image-div {
  background-repeat: no-repeat;
  background-size: cover;
  width: 60px;
  height: 60px;
  float: left;
  margin: 10px;
  background-position-x: center;
  background-position-y: center;

}

.aoa_submenu2 a:hover {
  color: rgb(7, 0, 0);
  cursor: pointer;
  text-decoration: underline;
}

.aoa_submenu2 p:hover {
  background: #666;
  color: rgb(7, 0, 0);
}