/*  =============================================================================
    CSS for the adding HashTag portion. Includes a button to add a hashtag,
    the input bar, and submitting a hashtag.

    Copyright © Vent Origins 
    By Adrian Mandee and Randy Truong
    ========================================================================== */

/*The entire button, input bar, and submit button for hash tags*/
#ht-form {
  width: 160px;
  height: 40px;
  
  /*To vertically center form*/
  padding: 0px;
  padding-top: 6px;
  
  margin: 0px;
  position: relative;
}

/*Font of button to slide in and out of the bar*/
#ht-form h1 {
  padding: 0px;
  margin: 0px;
  font-size: 20px;
  font-weight: normal;
  /*Color of button to slide in and out the bar*/
  color: #757679;
}

/*******************************************************
  ADD COLUMN
  ********************************************************/

/*Column width for the Add hashtag*/
#add-col {
  width: 180px;
  border-color: 1px solid blue;
}

/*Button to slide open hash tag inputs*/
.class-button { 
  width: 30px; 
  height: 30px;  

  /*Keeps the bar and button vertically in the center*/
  vertical-align: middle;

  /*Color of the button*/
  background-color: #0F1010;

  /*Border*/
  border: none;
}

/*Class for button, input bar, and submit HT button*/
.class-input {
  /*Keeps the button vertically in the middle when toggling*/
  vertical-align: middle;
}

/*Input Bar for hash tags*/
.input-add-HT {
  width: 80px;
  height: 20px;
  
  /*To vertically center input bar*/
  margin-top: 4px;
  
  /*To move cursor on input bar a bit to the right*/
  padding-left: 10px;
  padding-right: 10px;

  /*Font of input bar*/
  color: white;
  font-size: 15px;

  /*Background color of the input bar*/
  background-color: #0F1010;

  /*Border of the input bar*/
  border: 1px solid #757679;
  border-top-right-radius: 50px 50px;
  border-top-left-radius: 50px 50px;
  border-bottom-right-radius: 50px 50px;
  border-bottom-left-radius: 50px 50px;

  /*Hide the display of the input bar*/
  /*This toggles inline-block and none through the animation when clicking hashtags*/
  display: none;

  /*Transparency*/
  opacity: 0.9;
}

/*When input bar is selected, the border turns white*/
.input-add-HT:focus {
  border: 1px solid #FFFFFF;
}

/*Button to add a hashtag*/
.button-add-HT {
  width: 24px;
  height: 24px;

  padding-right: 6px; 

  /*Font*/
  color: #FFFFFF;
  font-size: 15px;
  font-weight: normal;

  /*Background of Add hash tag button*/
  background-color: #3F3F41;

  /*Border*/
  border: none;
  border-top-right-radius: 50px 50px;
  border-top-left-radius: 50px 50px;
  border-bottom-right-radius: 50px 50px;
  border-bottom-left-radius: 50px 50px;
  display: none;
  opacity: 1.0;
}

/*When hovering over button to add a hashtag, border turns white*/
.button-add-HT:hover {
  border: 1px solid white;
}

/*******************************************************
  # COLUMN
  ********************************************************/

/*The actual hashtags*/
.class-ht-button {
	background-color: white;
	color: black;
	border: none;
	border-top-right-radius: 50px 50px;
  border-top-left-radius: 50px 50px;
  border-bottom-right-radius: 50px 50px;
  border-bottom-left-radius: 50px 50px;
}