*{
  margin: 0;
  padding: 0;
}

body,html{
  height: 100%;
  font-family: "Open Sans";
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: #555555;
}

img{
  border: 0;
  max-width:100%;
  vertical-align:middle;
}

a{
  text-decoration: none;
  cursor: pointer;
  color: #5F8C00;
  transition:.6s color;
}
a:focus{
  outline: none;
}
a:hover{
  color:#0072BC;
  transition:.3s color;
}

h2{
  font-weight:300;
  font-size: 45px;
  line-height:45px;
  color:#36B449;
  margin-bottom: 20px;
}
h3{
  font-weight:300;
  font-size: 25px;
  line-height:25px;
  color:#36B449;
  margin-top: 40px;
  margin-bottom: 15px;
}
h4{
  font-weight:300;
  font-size: 20px;
  line-height:20px;
  color:#36B449;
  margin-top: 30px;
  margin-bottom: 5px;
}
h2 a, h3 a, h4 a{
  color:#36B449;
}
p{
  margin-bottom: 15px;
}

ul, ol{
  margin: 0 0 15px 30px;
}

#login{
  background-color: #000;
  border-radius: 30px;
  padding: 20px 2%;
  margin: 0 auto;
  margin-top: 20vh;
  width: 90%;
  max-width: 500px;
  color: #FFFFFF !important;
  text-align:center;
}
#login.notfixed{
  position: static;
  transform: none;
  margin-top: 50px;
}
#login.animate{
  opacity: 0;
  transition: .5s opacity;
}
#login h2, #login h3{
  color:#FFFFFF;
  margin-top:0;
}
#login .input{
  width: 90%;
  padding: 8px 2%;
  border:none;
  border-radius: 3px;
  margin-bottom: 15px;
  text-align: center;
  color: #122E47;
  font-family: "Open Sans";
  background-color:#FFF;
}


#login  .select{
  width: 30% !important;
}

#login a{
  color: #FFFFFF;
}

#login #forgot{
  font-size: 10px;
  line-height: 15px;
  margin-top: 20px;
}

#login .loginlogo{
  max-width:50%;
}
#error, .error{
  background-color: #B20000;
  border-top: 3px solid #FFFFFF;
  border-bottom: 3px solid #FFFFFF;
  padding: 5px 3%;
  color:#FFFFFF;
  font-weight: 300;
  margin-bottom: 20px;
}
.error a{
  color:#FFFFFF;
}

.button{
  background-color: #36B449;
  border-radius: 5px;
  padding: 5px 50px;
  color: #FFFFFF;
  border:none;
  font-size: 16px;
  font-weight: 300;
  cursor: pointer;
  transition: .7s opacity;
  font-family: "Open Sans";
}
.button:hover{
  opacity: .7;
  color:#FFF;
  transition: .4s opacity;
}
.button.whitebutton{
  background-color: #FFFFFF;
  color: #122E47;
}


#sidebar{
  position:fixed;
  left:0;
  top:0;
  background-color: #000000;
  color: #FFFFFF;
  padding: 0 15px;
  width: 160px;
  height: 100%;
}
#sidebar h1{
  text-align:center;
  margin: 20px 0 50px 0;
}
#sidebar a{
  color:#FFFFFF;
}
#sidebar ul{
  list-style-type:none;
  margin: 0;
}
#sidebar ul li a{
  display:block;
  font-size:18px;
  line-height: 25px;
  font-weight:300;
  margin-bottom:15px;
  position:relative;
  padding-bottom: 7px;
}
#sidebar ul li a .line{
  display:block;
  position:absolute;
  bottom:0;
  left:0;
  border-bottom: 1px solid #FFFFFF;
  width: 0;
  transition: 1s width;
}
#sidebar ul li a.current .line{
  width: 20%;
}

#sidebar ul li a:hover .line{
  width:100%;
  transition: .3s width;
}

#sidebar #adminline{
  border-top: 1px solid #000000;
  margin-top: 30px;
  height: 20px;
  padding: 2px 0 10px 0;
  color:#000000;
}


#sidebar #logout{
  position:absolute;
  bottom: 15px;
  left: 15px;
  opacity: .6;
}

#main{
  min-height: 100vh;
  margin-left: 200px;
  max-width: 1300px;
}
#main.wide{
  max-width:5000px;
}
#main #mainpad{
  padding: 50px;
}
#slide{
  position:fixed;
  top:0;
  background-color: #EEEEEE;
  width:40%;
  height:100%;
  max-width: 600px;
  overflow:auto;
}
#slide #slidepad{
  padding: 50px 30px;
  position:relative;
}
#slide #slideout{
  position: absolute;
  right:30px;
  top:20px;
  color: #666666;
  font-weight:300;
}
#slide.out{
  right: -40%;
  transition: .5s right;
}
#slide.in{
  right: 0;
  transition: .5s right;
}

.formlabel{
  font-weight:300;
  font-size:12px;
}
.input, .select, .textarea{
  box-sizing:border-box;
  width: 100%;
  padding: 10px;
  border:none;
  border-radius: 4px;
  color: #555555;
  font-family:"Open Sans";
  font-size: 14px;
}

.select{
  width:100% !important;
}
.select2{
  width: 100% !important;
}

.input.quarter{
  width: 23%;
  box-sizing: border-box;
  padding: 5px;
}

#options .input{
  margin-bottom:5px;
}

#main .input{
  border: 1px solid #CCCCCC;
}
#main .a .input{
  border:none;
  margin-bottom:2px;
}

.formlabel + .input, .formlabel + .select, .formlabel + .textarea, .select2-container{
  margin-bottom: 15px !important;
}

.input.time{
  width: 45%;
}
.input.time + input.time{
  margin-left: 2%;
}

#note{
  position: fixed;
  top: 0;
  left: 50%;
  width: 360px;
  margin-left: -200px;
  padding: 15px 20px;
  background-color: #36B449;
  color:#FFFFFF;
  font-weight:300;
  font-size: 16px;
  text-align:center;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
#note.out{
  top: -100px;
  opacity:0;
  transition: 1s top, 1s opacity;
}
#note.rednote{
  background-color: #B20000;
  width: 400px;
  margin-left: -220px;
}
#note a{
  color: #FFFFFF;
}

.row{
  display: flex;
  color: #555555;
  position: relative;
  transition: .3s background-color;
}
.row .col{
  vertical-align:top;
  width: 18%;
  max-width: 250px;
  padding: 5px 0;
}
.row .col.tiny{
  width: 8%;
}
.row .col.narrow{
  width: 16%;
}
.row .col.wide{
  width: 50%;
}
.row .col.log{
  width: 64%;
  max-width: 64%;
}
.row .col.fullwidth{
  width:100%;
  max-width:100%;
}
.row .col.right{
  text-align:right;
}
.row.archived{
  opacity: .7;
  text-decoration: line-through;
}
.row.archived .col{
  text-decoration: line-through;
}

.row:nth-child(2n+1){
  background-color: #f9f9f9;
}
.row.heading{
  color:#122E47;
  font-size: 17px;
}
.row.heading{
  background-color: #FFFFFF !important;
}
a.row:hover{
  color: #555555;
}
.row:hover{
  background-color: #eeeeee;
  transition: .3s background-color;
}

.gone{ display: none; }
.here{ display: block; }

.bars{
  width: 100%;
  position: relative;
}

.bars .bar{
  display: block;
  height: 32px;
  line-height: 32px;
  margin-bottom: 5px;
  white-space: nowrap;
  background-color: #f1f1f1;
  color: #555555;
  transition: .3s background-color;
}
.bars .bar:hover{
  background-color: #DFECF7;
  transition: .3s background-color;
}

.dashboardpie{
  width: 400px;
  height: 400px;
}
.dashboardpie canvas{
  width: 100% !important;
  max-width: 400px;
  height: auto !important;
}


.half{
  float: left;
  width: 48%;
}
.half + .half{
  margin-left: 4%;
}
.clear{
  clear: both;
}

#response {
  position: fixed;
  top: 0;
  left: 50%;
  width: 360px;
  margin-left: -200px;
  padding: 15px 20px;
  background-color: #1A6600;
  color:#FFFFFF;
  font-weight:300;
  font-size: 16px;
  text-align:center;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
#list ul{
  margin:0;
}
#list li {  display: block;
  color: #555555;
  position: relative;
  transition: .3s background-color;
	cursor: move;
  padding: 8px;
}


.question{
  background-color: #f1f1f1;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 20px;
  position:Relative;
  overflow:auto;
}
.question.error{
  border: 1px solid red;
  color: red;
}
.question.pagebreak{
  text-align:Center;
  background-color: #CCCCCC;
  color:#FFFFFF;
  padding: 3px;
  border:0;
  font-weight:300;
}
.question .edit, .heading .edit{
  position:Absolute;
  right:2px;
  top:0;
  font-size: 10px;
  line-height:10px;
}
.question.pagebreak .edit{
  color:#FFFFFF;
}

.question .q{
  float: left;
  width: 200px;
}
.question .a{
  margin-left: 220px;
}
.question .a label{
  display: block;
  margin-bottom: 5px;
}
.question .a .textarea{
  height:120px;
}

.heading{
  position:relative;
}

.tab{
  display:none;
}
.tab.here{
  display: block;
}

#tabs{
  list-style-type:none;
  margin:0;
  border-bottom: 1px solid #CCCCCC;
  height: 30px;
  margin-bottom: 25px;
}
#tabs li{
  display: inline;
}
#tabs li a{
  display: block;
  float: left;
  margin-left: 5px;
  border: 1px solid #CCCCCC;
  border-bottom:0;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  transition: none;
}
#tabs li a.current{
  background-color: #36B449;
  color: #FFFFFF;
}

.clubfiles{
  list-style-type:none;
  margin:0;
}
.clubfiles .file{
  display: inline-block;
  width: 90%;
  padding: 5px 2%;
  border-radius: 4px;
  color: #555555;
  font-size: 14px;
  background-color: #FFFFFF;
  margin-bottom: 10px;
}

.row ul{
  list-style-type:none;
  margin:0;
}

.boldish{ font-weight: 400;}
.bold, .b{ font-weight: 600; }

.view{
  width: 50%;
  float: left;
}
.comments{
  width: 45%;
  float: left;
  margin-left: 5%;
  margin-bottom: 15px;
}
.comments.full{
  width: 100%;
  float:none;
  margin-left:0;
}
.comments .textarea{
  border: 1px solid #CCCCCC;
  height: 40px;
  transition: .3s height;
}
.comments .textarea:focus{
  height: 150px;
  transition: .3s height;
}

.comments .comment{
  border: 1px solid #CCCCCC;
  margin-bottom: 5px;
  border-radius: 5px;
  padding: 10px;
  font-size: 13px;
}
.comments .comment .timestamp{
  font-size: 10px;
  line-height: 13px;
}

.todo{
  border: 1px solid red;
  padding: 15px;
  border-radius:5px;
  margin: 15px 0;
  background-color: #FFBFBF;
  color:red;
}

.notice{
  background-color: #E9FFBB;
  border: 1px solid #36B449;
  padding: 10px;
  border-radius: 5px;
  margin: 20px 0;
  text-align:center;
}

form#searchform{
  float:Right;
  width:50%;
}

.archivebutton{
  float: right;
  display: block;
  background-color:#666666;
  color:#ffffff;
  padding: 5px 15px;
  border-radius:5px;
  transition:.3s background-color;
  margin-left:15px;
}
.archivebutton:hover{
  color:#FFF;
  background-color: #B20000;
  transition:.3s background-color;
}

.exec{
  margin-bottom: 5px;
}



.data{
  border-collapse: collapse;
  padding:0;
}
.data.topborder{
  border-top: 1px solid #CCCCCC;
}
.data tr td{
  border-bottom: 1px solid #CCCCCC;
  transition: .7s background-color;
}
.data tr:nth-child(2n+2) td{
  background-color: #f1f1f1;
}
.data tr td.heading{
  background-color: #000;
  font-weight: 700;
  color:#FFFFFF;
  padding: 5px 10px;
}
.data tr td.heading:first-child{ border-top-left-radius: 5px; }
.data tr td.heading:last-child{ border-top-right-radius: 5px; }

.data tr td.iconcol{
  width:20px;
}


.data.nonth tr td{
  padding: 5px 10px;
   -webkit-text-size-adjust: none;
}
.data.nonth tr:nth-child(2n+2) td{
  background-color:#FFFFFF;
}

.data.nonth tr.alt td{
  background-color:#f1f1f1;
}

.data tr:hover td a{
  background-color:#ccc;
  color:#000;
  transition: .3s background-color,.3s color;
}
.data tr:hover td a{
  color:#000;
  transition:.3s color;
}


.data td.notlink{
  padding: 5px 10px;
}
.data a{
  display: block;
  padding: 5px 10px;
  color:#000000;
  transition:.7s color;
}
.data a:hover{
  color:#0072bc;
}
.delete:hover{
  color: #BF312F !important;
}

.data .fa{
  font-size: 18px;
}

.resource{
  display:block;
  width: 94%;
  box-sizing:border-box;
  background-color:#f1f1f1;
  margin-bottom: 8px;
  padding: 15px 20px;
  font-size: 18px;
  color:#000;
  transition:.7s background-color, .3s color;
}
.resource.noicon{
  width:100%;
}
.resource:hover{
  background-color:#36B449;
  color:#FFF;
  transition:.3s background-color, .3s color;
}
.resource i{
  display: inline-block;
  width: 25px;
}
.editresource{
  display:block;
  float:right;
  width: 5%;
  box-sizing:border-box;
  background-color:#f1f1f1;
  margin-bottom: 8px;
  padding: 15px 0;
  font-size: 18px;
  text-align:center;
  color:#000;
  transition:.7s background-color, .3s color;
}
.editresource:hover{
  background-color:#36B449;
  color:#FFF;
  transition:.3s background-color, .3s color;
}

.label{
  margin-top:20px;
}

.save{
  margin-top: 30px;
}