/*---------------- bootstrap-fix ----------------*/

/*---------------- button-wrap ----------------*/
.btn-wrap{
  text-align: center;
}
.btn-wrap-left{
  text-align: left;
}
.btn-wrap-right{
  text-align: right;
}

.btn-wrap-full{
  display: flex;
}
.btn-wrap-full.btn{
  flex:1;
  margin:0 5px;
}

/*---------------- button-size ----------------*/
.btn-xxs {
  display: inline-block;
  border: 2px solid #989898;
  color: #989898;
  text-decoration: none;
  border-radius: 4px;
  transition: .3s;
  background-color: #ffffff;
  width: 4rem;
  height: 1.5rem;
  font-size: 0.775rem;
}
.btn-xs {
  display: inline-block;
  border: 2px solid #989898;
  color: #989898;
  text-decoration: none;
  border-radius: 4px;
  transition: .3s;
  background-color: #ffffff;
  width: 4rem;
  height: 2rem;
  font-size: 0.775rem;
}
.btn-xs-long {
  display: inline-block;
  text-decoration: none;
  border-radius: 4px;
  transition: .3s;
  width: 6rem;
  height: 2rem;
  font-size: 0.775rem;
}
.btn-sm{
  display: inline-block;
  text-decoration: none;
  border-radius: 4px;
  transition: .3s;
  width: 6rem;
}
.btn-sm-long{
  display: inline-block;
  text-decoration: none;
  border-radius: 4px;
  transition: .3s;
  width: 9rem;
  height: 2.5rem;
  font-size: 0.775rem;
}
.btn-rg {
  display: inline-block;
  text-decoration: none;
  border-radius: 4px;
  transition: .3s;
  width: 15rem;
  height: 2.5rem;
  font-size: 0.775rem;
}
.btn-lg {
  display: inline-block;
  text-decoration: none;
  border-radius: 4px;
  transition: .3s;
  width: 12rem;
  height: 2.5rem;
  font-size: 0.775rem;
}
.btn-xlg {
  display: inline-block;
  text-decoration: none;
  border-radius: 4px;
  transition: .3s;
  width: 16rem;
  height: 2.5rem;
  font-size: 0.775rem;
}
.btn-xxlg {
  display: inline-block;
  text-decoration: none;
  border-radius: 4px;
  transition: .3s;
  width: 15rem;
  height: 3.5rem;
  font-size: 0.875rem;
}

/*---------------- button-color ----------------*/


.btn-red {
  border: 2px solid #fc5c65;
  color:#ffffff;
  background-color:#fc5c65;
  }
.btn-red:hover {
  border-color:#fc5c65;
  color:#fc5c65;
  background-color:#ffffff;
}

.btn-rvred {
  border: 2px solid #fc5c65;
  color:#fc5c65;
  background-color:#ffffff;
}
.btn-rg-rvred:hover {
  border-color:#fc5c65;
  color:#ffffff;
  background-color:#fc5c65;
}
.btn-blue {
  border: 2px solid #2bcbba;
  color:#ffffff;
  background-color: #2bcbba;
}
.btn-blue:hover {
  border-color: #2bcbba;
  color:#2bcbba;
  background-color: #ffffff;
}
.btn-rv-blue {
  border: 2px solid #2bcbba;
  color:#2bcbba;
  background-color: #ffffff;
}
.btn-rv-blue:hover {
  border-color: #2bcbba;
  color:#ffffff;
  background-color: #2bcbba;
}
.btn-green {
  border: 2px solid #20bf6b;
  color:#ffffff;
  background-color:#20bf6b;
  }
.btn-green:hover {
  border-color:#20bf6b;
  color:#20bf6b;
  background-color:#ffffff;
}
.btn-rvgreen {
  border: 2px solid #20bf6b;
  color:#20bf6b;
  background-color: #ffffff;
}
.btn-rvgreen:hover {
  border-color: #2bcbba;
  color:#ffffff;
  background-color: #20bf6b;
}
.btn-gray {
  border: 2px solid #989898;
  color: #ffffff;
  background-color: #989898;
}
.btn-gray:hover {
  border-color: #989898;
  color: #989898;
  background-color: #ffffff;
}
.btn-rvgray {
  border: 2px solid #989898;
  color: #989898;
  background-color: #ffffff;
}
.btn-rvgray:hover {
  border-color: #989898;
  color: rgb(255,255,255);
  background-color: #989898;
}
.btn-lightblue{
  background-color: #26de81;
  border: 2px solid  #26de81;
  color: #ffffff;
}
.btn-lightblue:hover {
  background-color: #ffffff;
  border: 2px solid  #26de81;
  color: #26de81;

}
.btn-rvskyblue:hover {
  background-color: #45aaf2;
  border-color: #45aaf2;
  color: #ffffff;
}
.btn-rvred:hover {
  background-color: #fc5c65;
  border-color: #fc5c65;
  color: #ffffff;
}
.btn-rvyellow:hover {
  background-color: #fed330;
  border-color: #fed330;
  color: #ffffff;
}
.btn-transparent {
  background-color: transparent;
  border-color: transparent;
  color:#596674;
}
.btn-twitter {
  border: 2px solid #00acee;
  color:#ffffff;
  background-color: #00acee;
}
.btn-facebook {
  border: 2px solid #3b5998;
  color:#ffffff;
  background-color: #3b5998;
}




.dropDown-btn-cstm{
  max-width: 100%px;
  color: #3d3d3d;
  text-decoration: none;
  transition: .3s;
}


.dropDown-btn-cstm:hover{
  max-width: 100%;
  color: #3d3d3d;
  text-decoration: none;
  transition: .3s;
  background-color:#d1d8e0;
}





.close-btn {
  margin-right: 10vw;
}


.errorslideDown-btn {
  float: right;
  font-size: 0.8vw;
}


.backtotop-btn:hover {
  background-color: #ffffff;
  border-color: #fed330;
}


/*---------------- study-btn ----------------*/

#explain-btn:disabled{
  color:#4b6584;
  border-color: #ffffff;
  background-color: #ffffff;
}
#reset-btn:disabled{
  color:#4b6584;
  border-color: #ffffff;
  background-color: #ffffff;
}
#answer-btn:disabled{
  color:#4b6584;
  border-color: #ffffff;
  background-color: #ffffff;
}
#exe-btn:disabled{
  color:#ffffff;
  border-color:#5dfdad ;
  background-color: #5dfdad;
}
.btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  }

.twitter-icon-sm{
  width:1.4rem;
  height:1.4rem;
  margin-left: 3px;
  margin-right: 3px;
}

.facebook-icon-sm{
  width:1.4rem;
  height:1.4rem;
  margin-left: 3px;
  margin-right: 3px;
}

.twitter-btn{
  width:1.4rem;
  height:1.4rem;
  margin-left: 3px;
  margin-right: 3px;
}

.facebook-btn{
  width:1.4rem;
  height:1.4rem;
  margin-left: 3px;
  margin-right: 3px;
}