/* 
@import url('https://fonts.googleapis.com/css?family=Cairo:400,700=arabic');
body {
  min-height: 2000px;
}
  */


#toggle-right {
  display: none;
}

.top-bar-right {
  position: fixed;
  right: 0;
/*
  top: 150px;
*/
  top: 50%;
/*  An element with greater z-index is always in front of an element with a lower number.  */
  z-index: 200;
}

.profile-toggle {
  position: relative;
  width: 200px;
  height: auto;
  display: table;
  border-radius:5px;
/*
  font-family:'cairo',serif;
*/
  font-size: 16px;
  right: -90px;
  -webkit-transition: all 0.15s ease-out 0s;
  -moz-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
  z-index: 2;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  background: #C8102E;
  color: #ffffff;
  text-align: center;
  padding: 5px;
}



/*
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.

Note: a:active MUST come after a:hover in the CSS definition in order to be effective.
*/
 .top-bar-right .profile-toggle a {

  color: black;

  display: block;
  margin-bottom: 0px;
  text-decoration: none;

}




/* 
#toggle-right:checked + .page-wrap .profile {
  right: 0px;
}

#toggle-right:checked + .page-wrap .profile-toggle {
  right: 172px;
}

.profile {
  position: fixed;
  top: 59px;
  right: -270px;
  -webkit-transition: all 0.15s ease-out 0s;
  -moz-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
  height: 230px;
  width: 220px;
  background: #F6E5B7;
  z-index: 2000;
  border: 1px solid #C8102E;
  padding: 10px 20px;
  font-family:'cairo',serif;
  text-align: center;
}
 */