/*!
 * Easy Scrum Board
 * (c) 2018 Globalbits OÜ. All Rights Reserved.
 */
@import url("fontawesome-4.4.0.min.css");

html {
	font-family: 'Arial',sans-serif;
	background: #708090;
}

.footer {
	color: #f8f8f8; font-family: 'Raleway',sans-serif; font-size: 11px; font-weight: 500; line-height: 32px; margin: 0 0 24px;
	text-align: center;
}

#sidebar {
font-family: 'Raleway',sans-serif; font-size: 18px; font-weight: 500; line-height: 32px; margin: 0 0 24px; padding-left: 5px; padding-top: 35px;
background: #778899;
width: 25vw;
}

#sidebarproject {
font-family: 'Raleway',sans-serif; font-size: 18px; font-weight: 500; line-height: 32px; margin: 0 0 24px; padding-left: 5px; padding-top: 35px;
background: #778899;
width: 25vw;
}

#sidebartag{
font-family: 'Raleway',sans-serif; font-size: 18px; font-weight: 500; line-height: 32px; margin: 0 0 24px; padding-left: 5px; padding-top: 35px;
background: #778899;
width: 25vw;
}

#sidebaruser{
font-family: 'Raleway',sans-serif; font-size: 18px; font-weight: 500; line-height: 32px; margin: 0 0 24px; padding-left: 5px; padding-top: 35px;
background: #778899;
width: 25vw;
}

.draggable {
            min-width: 30px;
            min-height: 20px;
            float: left;
}

#target0 {
            width: 100%;
            height: 100vh;
}

#target1 {
            width: 100%;
            height: 100vh;
}

#target2 {
            width: 100%;
            height: 100vh;
}

#target3 {
            width: 100%;
            height: 100vh;
}

#target4 {
            width: 100%;
            height: 100vh;
}

#target5 {
            width: 100%;
            height: 100vh;
}

#target5 b {
          text-decoration: line-through;
}

.topmenu {
    position: fixed;
    right: 22vw;
    padding-left: 5;
    padding-right: 5;
    text-align: center;
    top: 0;
    width: 100%;
    background: #464646;
    font-family: 'Raleway',sans-serif; font-size: 12px; font-weight: 500; line-height: 32px;
    color: #fff;
    width: 150px;
    border: solid 2px #f5f5f5;
  -webkit-transform: skewX(-25deg); //also use -moz, etc for other vendors
}

.topmenu a { text-decoration: none; }
.topmenu a:hover { text-decoration: underline; }

#sidebar input { width: 100%;}
#sidebar textarea { width: 100%; min-height: 150px; }
#sidebar h2 { width: 100%; margin-top: 20px; margin-bottom: 20px; text-align: left; }
#sidebar span { width: 100%; font-size:12px; }

#sidebarproject input { width: 100%;}
#sidebarproject textarea { width: 100%; min-height: 150px; }
#sidebarproject h2 { width: 100%; margin-top: 20px; margin-bottom: 20px; text-align: left; }
#sidebarproject span { width: 100%; font-size:12px; }

#sidebaruser input { width: 100%;}
#sidebaruser textarea { width: 100%; min-height: 150px; }
#sidebaruser h2 { width: 100%; margin-top: 20px; margin-bottom: 20px; text-align: left; }
#sidebaruser span { width: 100%; font-size:12px; }

#sidebartag input { width: 100%;}
#sidebartag textarea { width: 100%; min-height: 150px; }
#sidebartag h2 { width: 100%; margin-top: 20px; margin-bottom: 20px; text-align: left; }
#sidebartag span { width: 100%; font-size:12px; }


#sidebtn { position: fixed; top: 20px; right: 20px; }
#side2btn { position: fixed; top: 20px; right: 80px; }

.board {
font-family: 'Raleway',sans-serif; font-size: 18px; font-weight: 500; line-height: 32px; margin: 0 0 24px;
}

.board th {
border-bottom: 5px solid lightgray;
width: 25vw;
}

.board td {
border-right: 2px solid #778899;
width: 25vw;
}

.fieldx {
    box-shadow: rgb(28, 27, 24) 0px 1px 0px 0px;
    background: linear-gradient(rgb(234, 224, 194) 5%, rgb(204, 194, 166) 100%) rgb(234, 224, 194);
    border-radius: 14px;
    border: 2px solid rgb(51, 48, 41);
    display: block;
		max-width: 75%;
		max-width: 18vw;
    cursor: pointer;
    color: rgb(80, 87, 57);
    font-family: Arial;
    font-size: 14px;
    font-style: italic;
    padding: 11px 12px;
    text-decoration: none;
    text-shadow: rgb(255, 255, 255) 0px 1px 0px;
}

.button {
    box-shadow: rgb(28, 27, 24) 0px 1px 0px 0px;
		max-width: 18vw;
    background: linear-gradient(rgb(234, 224, 194) 5%, rgb(204, 194, 166) 100%) rgb(234, 224, 194);
    border-radius: 14px;
    border: 2px solid rgb(51, 48, 41);
    display: inline-block;
    cursor: pointer;
    color: rgb(80, 87, 57);
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    padding: 11px 12px;
    text-decoration: none;
    text-shadow: rgb(255, 255, 255) 0px 1px 0px;
}

.buttongreen {
    box-shadow: rgb(164, 226, 113) 0px 1px 0px 0px inset;
    background: linear-gradient(rgb(137, 196, 3) 5%, rgb(119, 168, 9) 100%) rgb(137, 196, 3);
    border-radius: 6px;
    border: 2px solid rgb(116, 184, 7);
    display: inline-block;
    cursor: pointer;
    color: rgb(255, 255, 255);
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 24px;
    text-decoration: none;
    text-shadow: rgb(82, 128, 9) 0px 1px 0px;
}

.buttonblue {
	  box-shadow: rgb(35, 57, 94) 0px 1px 0px 0px inset;
    background: linear-gradient(rgb(46, 70, 110) 5%, rgb(65, 89, 137) 100%) rgb(46, 70, 110);
    border-radius: 6px;
    border: 2px solid rgb(31, 47, 71);
    display: inline-block;
    cursor: pointer;
    color: rgb(255, 255, 255);
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 24px;
    text-decoration: none;
    text-shadow: rgb(38, 54, 102) 0px 1px 0px;
}

.buttonred {
    box-shadow: rgb(207, 134, 108) 0px 1px 0px 0px inset;
    background: linear-gradient(rgb(208, 69, 27) 5%, rgb(188, 51, 21) 100%) rgb(208, 69, 27);
    border-radius: 3px;
    border: 3px solid rgb(148, 41, 17);
    display: inline-block;
    cursor: pointer;
    color: rgb(255, 255, 255);
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: rgb(133, 70, 41) 0px 1px 0px;
}

.buttonyellow {
    box-shadow: rgb(255, 246, 175) 0px 1px 0px 0px;
    background: linear-gradient(rgb(255, 236, 100) 5%, rgb(255, 171, 35) 100%) rgb(255, 236, 100);
    border-radius: 21px;
    border: 3px solid rgb(255, 170, 34);
    display: inline-block;
    cursor: pointer;
    color: rgb(51, 51, 51);
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: rgb(255, 238, 102) 0px 1px 0px;
}

hr {
	 margin: 10px 0 5px 0;
}

hr.style-one {
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
}

hr.style-two {
	     border: 0;
	     height: 1px;
	     background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

hr.style-four {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}

hr.style-six {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

h1 { color: #778899; font-family: 'Raleway',sans-serif; font-size: 28px; font-weight: 600; line-height: 32px; margin: 0 0 0px; text-align: left; text-transform: uppercase; }

/* Header improvements */
.header-logo {
    display: block;
    transition: transform 0.2s ease;
}

.header-logo:hover {
    transform: scale(1.05);
}

/* Better header spacing */
body > table:first-of-type {
    margin-bottom: 20px;
}

/* Improve header table layout */
body > table:first-of-type td {
    padding: 10px 0;
}

h2 { color: #111; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 100; line-height: 12px; margin: 0 0 2px; padding-bottom: 4px; text-align: center; border-bottom: 5px solid #696969;}

p { color: #f8f8f8; font-family: 'Raleway',sans-serif; font-size: 18px; font-weight: 500; line-height: 32px; margin: 0 0 24px; }


a { color: #c8c8c8; text-decoration: underline; }


a:hover { color: #1c1c1c; text-decoration: underline; }

.square-button {
    display:block;
    height:25px;
    line-height:25px;
    border: 2px solid #f5f5f5;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    background: #464646;
    box-shadow: 0 0 3px gray;
    font-size:10px;
    font-weight:bold;
}
.square-button:hover {
    background: #262626;
}


.round-button {
    display:block;
    width:50px;
    height:50px;
    line-height:50px;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    background: #464646;
    box-shadow: 0 0 3px gray;
    font-size:20px;
    font-weight:bold;
}
.round-button:hover {
    background: #262626;
}


.cardgreen {
background:#95cf62;
padding:15px;
font-family: 'Raleway', sans-serif;
font-size:15px;
color: #000;
max-width: 200px;
line-height: 18px;

-moz-transform: rotate(1deg);
-webkit-transform: rotate(1deg);
-o-transform: rotate(1deg);
-ms-transform: rotate(1deg);
transform: rotate(1deg);

box-shadow: 0px 4px 6px #333;
-moz-box-shadow: 0px 4px 6px #333;
-webkit-box-shadow: 0px 4px 6px #333;

}

.cardblue {
background:#76acde;
padding:15px;
font-family: 'Raleway', sans-serif;
font-size:15px;
color: #000;
max-width: 200px;
line-height: 18px;

-moz-transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);

box-shadow: 0px 4px 6px #333;
-moz-box-shadow: 0px 4px 6px #333;
-webkit-box-shadow: 0px 4px 6px #333;

}

.cardyellow {
background:#fefabc;
padding:15px;
font-family: 'Raleway', sans-serif;
font-size:15px;
color: #000;
max-width: 200px;
line-height: 18px;
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);

box-shadow: 0px 4px 6px #333;
-moz-box-shadow: 0px 4px 6px #333;
-webkit-box-shadow: 0px 4px 6px #333;

}

.cardred {
background:#de6c6c;
padding:15px;
font-family: 'Raleway', sans-serif;
font-size:15px;
color: #000;
max-width: 200px;
line-height: 18px;
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);

box-shadow: 0px 4px 6px #333;
-moz-box-shadow: 0px 4px 6px #333;
-webkit-box-shadow: 0px 4px 6px #333;

}

.cardwhite {
background:#f8f3f3;
padding:15px;
font-family: 'Raleway', sans-serif;
font-size:15px;
color: #000;
max-width: 200px;
line-height: 18px;
-moz-transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);

box-shadow: 0px 4px 6px #333;
-moz-box-shadow: 0px 4px 6px #333;
-webkit-box-shadow: 0px 4px 6px #333;

}
.tags {
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.tags li {
  float: left;
}

.tag {
  background: #eee;
  border-radius: 3px 0 0 3px;
  color: #999;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 20px 0 23px;
  position: relative;
  margin: 0 10px 10px 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
}

.tag::before {
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  content: '';
  height: 6px;
  left: 10px;
  position: absolute;
  width: 6px;
  top: 10px;
}

.tag::after {
  background: #fff;
  border-bottom: 13px solid transparent;
  border-left: 10px solid #eee;
  border-top: 13px solid transparent;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
}

.tag:hover {
  background-color: crimson;
  color: white;
}

.tag:hover::after {
   border-left-color: crimson;
}


.taggreen {
  background: #eee;
  border-radius: 34px 0 0 34px;
  color: #999;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 20px 0 23px;
  position: relative;
  margin: 0 10px 10px 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
}

.taggreen::before {
  background: #95cf62;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  content: '';
  height: 6px;
  left: 10px;
  position: absolute;
  width: 6px;
  top: 10px;
}

.taggreen::after {
  background: #95cf62;
  border-bottom: 13px solid transparent;
  border-left: 10px solid #eee;
  border-top: 13px solid transparent;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
}

.taggreen:hover {
  background-color: crimson;
  color: white;
}

.taggreen:hover::after {
   border-left-color: crimson;
}



.tagwhite {
  background: #eee;
  border-radius: 34px 0 0 34px;
  color: #999;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 20px 0 23px;
  position: relative;
  margin: 0 10px 10px 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
}

.tagwhite::before {
  background: #f8f3f3;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  content: '';
  height: 6px;
  left: 10px;
  position: absolute;
  width: 6px;
  top: 10px;
}

.tagwhite::after {
  background: #f8f3f3;
  border-bottom: 13px solid transparent;
  border-left: 10px solid #eee;
  border-top: 13px solid transparent;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
}

.tagwhite:hover {
  background-color: crimson;
  color: white;
}

.tagwhite:hover::after {
   border-left-color: crimson;
}


.tagblue {
  background: #eee;
  border-radius: 34px 0 0 34px;
  color: #999;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 20px 0 23px;
  position: relative;
  margin: 0 10px 10px 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
}

.tagblue::before {
  background: #76acde;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  content: '';
  height: 6px;
  left: 10px;
  position: absolute;
  width: 6px;
  top: 10px;
}

.tagblue::after {
  background: #76acde;
  border-bottom: 13px solid transparent;
  border-left: 10px solid #eee;
  border-top: 13px solid transparent;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
}

.tagblue:hover {
  background-color: crimson;
  color: blue;
}

.tagblue:hover::after {
   border-left-color: crimson;
}


.tagyellow {
  background: #eee;
  border-radius: 34px 0 0 34px;
  color: #999;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 20px 0 23px;
  position: relative;
  margin: 0 10px 10px 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
}

.tagyellow::before {
  background: #fefabc;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  content: '';
  height: 6px;
  left: 10px;
  position: absolute;
  width: 6px;
  top: 10px;
}

.tagyellow::after {
  background: #fefabc;
  border-bottom: 13px solid transparent;
  border-left: 10px solid #eee;
  border-top: 13px solid transparent;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
}

.tagyellow:hover {
  background-color: crimson;
  color: yellow;
}

.tagyellow:hover::after {
   border-left-color: crimson;
}


.tagred {
  background: #eee;
  border-radius: 34px 0 0 34px;
  color: #999;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 20px 0 23px;
  position: relative;
  margin: 0 10px 10px 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
}

.tagred::before {
  background: #de6c6c;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  content: '';
  height: 6px;
  left: 10px;
  position: absolute;
  width: 6px;
  top: 10px;
}

.tagred::after {
  background: #de6c6c;
  border-bottom: 13px solid transparent;
  border-left: 10px solid #eee;
  border-top: 13px solid transparent;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
}

.tagred:hover {
  background-color: crimson;
  color: red;
}

.tagred:hover::after {
   border-left-color: crimson;
}

/* Back to Top */
#backtotop{z-index:999; display:none; position:fixed; visibility:hidden; bottom:20px; right:20px; width:36px; height:36px; line-height:36px; font-size:16px; text-align:center; opacity:.2;}
#backtotop i{display:block; width:100%; height:100%; line-height:inherit;}
#backtotop.visible{visibility:visible; opacity:.5;}
#backtotop:hover{opacity:1;}
#backtotop {
	width:50px;
	height:50px;
	line-height:50px;
	border: 2px solid #f5f5f5;
	border-radius: 50%;
	color:#f5f5f5;
	text-align:center;
	text-decoration:none;
	background: #464646;
	box-shadow: 0 0 3px gray;
	font-size:20px;
	font-weight:bold;
}

.fa-chevron-up:before {
    content: "\f077";
}

.fa-chevron-up a {
    cursor: pointer;
    text-decoration: none;
}

/* Fly to Latest */
#flylatest{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:20px; left:50%; width:36px; height:36px; line-height:36px; font-size:16px; text-align:center; opacity:.2;}
#flylatest i{display:block; width:100%; height:100%; line-height:inherit;}
#flylatest.visible{visibility:visible; opacity:.5;}
#flylatest:hover{opacity:1;}
#flylatest {
	width:50px;
	height:50px;
	line-height:50px;
	border: 2px solid #f5f5f5;
	border-radius: 50%;
	color:#f5f5f5;
	text-align:center;
	text-decoration:none;
	background: #464646;
	box-shadow: 0 0 3px gray;
	font-size:20px;
	font-weight:bold;
}

.fa-chevron-down:before {
    content: "\f078";
}

.fa-chevron-down a {
    cursor: pointer;
    text-decoration: none;
}

/* My Account Page Styles */
.myaccount-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.myaccount-header {
    text-align: center;
    margin-bottom: 30px;
}

.myaccount-section {
    background: #778899;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.myaccount-section h2 {
    color: #111;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid #696969;
}

.myaccount-form-table {
    width: 100%;
    border-collapse: collapse;
}

.myaccount-form-table td {
    padding: 12px 0;
    vertical-align: top;
}

.myaccount-form-table td:first-child {
    width: 150px;
}

.myaccount-form-table label {
    color: #f8f8f8;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.myaccount-form-table input[type="text"],
.myaccount-form-table input[type="email"],
.myaccount-form-table input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
}

.myaccount-form-table input[type="checkbox"] {
    margin-right: 8px;
}

.myaccount-form-table .help-text {
    color: #f8f8f8;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    margin-top: 5px;
}

.myaccount-form-table .submit-cell {
    padding: 20px 0 0 0;
    text-align: center;
}

.myaccount-btn {
    background: #4CAF50;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
}

.myaccount-btn:hover {
    opacity: 0.9;
}

.myaccount-btn.blue {
    background: #2196F3;
}

.myaccount-btn.gray {
    background: #696969;
}

.myaccount-btn.red {
    background: #f44336;
}

.myaccount-info-table {
    width: 100%;
    border-collapse: collapse;
}

.myaccount-info-table td {
    padding: 12px 0;
    vertical-align: top;
}

.myaccount-info-table td:first-child {
    width: 150px;
}

.myaccount-info-table .info-label {
    color: #f8f8f8;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.myaccount-info-table .info-value {
    color: #f8f8f8;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
}

.myaccount-info-table .status-active {
    color: #4CAF50;
    font-weight: 500;
}

.myaccount-navigation {
    text-align: center;
    margin-top: 30px;
}

.myaccount-navigation a {
    margin: 0 10px;
}

.message {
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 5px;
}

.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}