/* @import url("//fonts.googleapis.com/css?family=Lato:400, 700, 400italic"); */

/* app css stylesheet */
* {-webkit-font-smoothing: antialiased;}

.menu {
  list-style: none;
  border-bottom: 0.1em solid black;
  margin-bottom: 2em;
  padding: 0 0 0.5em;
}

.menu:before {
  content: "[";
}

.menu:after {
  content: "]";
}

.menu > li {
  display: inline;
}

.menu > li:before {
  content: "|";
  padding-right: 0.3em;
}

.menu > li:nth-child(1):before {
  content: "";
  padding: 0;
}

.submitted input.ng-invalid,
input.ng-dirty.ng-invalid
{ border-color: red; }

#forgotPasswordLink{
  color: #3F8F24;
  cursor: pointer;
  margin-top: 15px;
}

@media (max-width: 780px) {

  .loginPage{
    padding: 0px 30px;
  }

}

.clickable {
  cursor: pointer;
}

.systemroles{
  border-left: 3px solid #F90 !important;
}

.ribbon-wrapper-blue {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: fixed;
  z-index:1001;
  top: 0px;
  left: 0px;
}

.ribbon-blue {  
  font: bold 18px Sans-Serif;
  color: #fff;
  text-align: center;
  letter-spacing:1px;
  -webkit-transform: rotate(-45deg);
  -moz-transform:    rotate(-45deg);
  -ms-transform:     rotate(-45deg);
  -o-transform:      rotate(-45deg);
  position: relative;
  padding: 7px 0;
  left: -35px;
  top: 5px;
  width: 120px;
  background: #BF641D;
  color: #fff;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-blue:before, .ribbon-blue:after {
  content: "";
  border-top:   3px solid #23538a;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}
.ribbon-blue:before {left: 0;}
.ribbon-blue:after {right: 0;}

.no-highlight{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.center-vertical-align{
  display: inline-block;
  vertical-align:middle;
  float: none;

  margin-top: 50%;
  margin-left: 50%;
} 

.vertical-align-middle{
  vertical-align: middle;
}

.past-events-row{
  /*height: 60px;*/
  min-height:100%;
  /*margin: 5px, 0px;*/
}

.filter-box{
    border-width:1px;
    border-color:#ecf0f1;
    border-style: solid;
    background-color:#ecf0f1;
    border-radius: 4px;
}

.past-volunteer-right-spacing{
  right:-150px;
}

.past-constrained-list{
  height: 200px;
  /*width: 100%; */
  /*padding: 0px 30px;*/
  overflow-y: auto;
}

.icon-force-moveup{
  position:relative;
  top:-55px;
}
.venuData-force-moveup{
  position:relative;
  top:-9px;
}

#addVenuesButton{
  position: relative;
  top: 19px;
  margin-right: 10px;
}

.offer-header{
    border-bottom:2px solid #F1F1F1 ;
}

.offer-price{
    position: relative;
    top:23px;
}

.offer-name{
    position:relative;
    top:13px;
}

.initlive-pre{
  display: block;
  padding: 10px;
  margin: 0 0 10.5px;
  font-size: 14px;
  line-height: 1.42857143;
  word-break: normal;
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;
  color:#FF8527;
  background-color: #FFFFFF;
  border: 1px solid #FFF;
  border-radius: 4px;
}

.initlive-loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #7259A2;
  border-right: 16px solid #FF8527;
  border-bottom: 16px solid #70B300;
  border-left: 16px solid #FF8527;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/*setting switch button*/
.setting-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.setting-switch-sm {
  width: 30px;
  height: 17px;
}

.setting-switch-md {
  width: 45px;
  height: 25px;
}

.setting-switch input {display:none;}

.setting-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #D4D5D6;
  -webkit-transition: .4s;
  transition: .4s;
}

.setting-switch:not(.disabled):hover > input:not(:checked) + .setting-slider {
  background-color: #A9ABAC;
}

.setting-switch-sm .setting-slider {
  background-color: #cccccc;
  border-radius: 10px;
}

.setting-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.setting-switch-sm .setting-slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

.setting-slider-disable {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cccccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.setting-slider-disable:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.setting-switch-sm .setting-slider-disable:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .setting-slider {
  background-color: #70B300;
}

input:checked + .setting-slider:hover {
  background-color: #548600;
}

input:focus + .setting-slider {
  box-shadow: 0 0 1px #70B300;
}

input:checked + .setting-slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.setting-switch-sm input:checked + .setting-slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}
/*****end----- setting switch button*/


/*status width*/
.width17 {
  width: 17%
}

.width20 {
  width: 20%
}

.width25 {
  width: 25%
}

.width34 {
  width: 34%
}

.width50 {
  width: 50%
}

.theWidthZero  {
  height: 20px;
  background-color: #dfdfdf;
}
/*****end----- status width*/