/* Styles */

body, html {
  background: #F4F4F4 !important;
  font-family: 'Montserrat', sans-serif !important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-size: 12px;
}

a {text-decoration: none}
td {color: black}

.index {
	background: url('bg.jpg') no-repeat center center fixed; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}

.index-app {
  background: white;
}

h1, h2, h3 {color:#2C2C2C !important}

.btn-outline-primary, .btn-primary {
  border: 0px !important;
  background: #5DAAE1 !important;
  color: white !important
}

.second-container {
	background-color: white;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
}

.third-container {
	background-color: white;
	color:white
	padding: 30px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
}

.four-container {
	background-color: #F3F3F3;
	color:white
	padding: 30px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
}
.second-container p {
    color:black;
}

.second-container p a {
    color: #123466;
}

a, .second-container a, .col a {
    color: #123466;
    text-decoration: none;
}

.container-3 {
	background-color: rgba(255, 255, 255, 0.69);
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
}

.index-container {
	width:500px;
	height: 500px;
  	position: absolute;
  	left: 50%;
  	top: 50%;
  	-webkit-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
}


input, textarea { 
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px; 
}

.square {
  background: white;
  width: 90%;
  height: 150px;
  margin-top:20px;
  margin-bottom:20px;
  margin-right:auto;
  margin-left:auto;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px; 
}

.squarem {
  color:white;
  font-weight:700;
  font-size:14px;
  width: 90%;
  height: 25px;
  margin-top:10px;
  margin-bottom:10px;
  margin-right:auto;
  margin-left:auto;
  border: 2px solid white;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
}

.squarem a{
  text-align:center;
  color:white;
  margin-left:auto;
  margin-right:auto;
}


.inprocess {
  background-color: #FFC33A; 
  font-weight: 700; 
  text-align: center;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
}

.complete {
  background-color: #01C204; 
  font-weight: 700; 
  text-align: center;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px; 
}

table {
  border-spacing: 10px;
  border-collapse: separate;
}



td { 
    padding: 10px;
}

table {background:white}

.soft-grey {background:#F8F8F8}



/* Header */

header {
	width:100%;
}
/* Margins */

.ma {
	margin-left:auto !important;
	margin-right:auto !important;
}
.m1 {
	margin-top:75px !important;
}
.m2 {
	margin-top:50px !important;
}
.m3 {
	margin-top:25px !important;
}
.m4 {
	margin-top:15px !important;
}

.m5 {
	margin-top:5px !important;
}

.m-small {
	margin-top:10px;
	margin-bottom: 10px;
	height:35px;
}
.m-normal {
  margin: 10px 20px 0 20px !important;
}

.pt10 {
  padding-top:10px;
}

/* Sizes */

.s-20 {width: 20%}
.s-30 {width: 30%}
.s-40 {width: 40%}
.s-50 {width: 50% !important}
.s-80 {width: 80%}
.worker-table {
	height:250px;
	overflow: auto;
}

/* Fonts */
.f-10 {
	font-size:10px;
}
.f-12 {
	font-size:12px;
}
.f-14 {
	font-size:14px;
}
.f-18 {
  font-size:18px !important;
}

.w-700 {
  font-weight: 700 !important;
}
.clock {font-size:50px;}
.white {color:white !important;}
.soft-grey {color:#757575;}
.darkblue {color:#06097f;}
.blue01 {color: #7C8DC1}


/* Floats & Aligns */

.inline {float:left}
.float-right {float:right;}
.center {text-align:center;}
.align-right {text-align: right;}
.vertical {
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center;
  }

/*Pagination */

.pagination{
  width: 100%;
  text-align: center;
}

.pagination a{
  font-family: "Open Sans", sans-serif;
  background: #154360;
  color: white;
  padding:10px;
  margin: 1px;
  text-decoration: none;
  font-weight: 600;
  position: relative;
  border-radius: 20px;
  transition: 0.3s;
}


.pagination a:hover{
  background: #ADADAD;
  transition-duration: 0.3s;
}

.active{
  transition-duration: 0.3s;
}


/* Colors */
.b-blue01 {border-color: #7C8DC1}
.core-blue {background-color:#61aec9}

/* General Styles */

.border-radius {
-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
}

/* Table Styles */

.table-style-01 {
    border: 1px solid;
}


ul.errorlist {
    list-style-type:none;
    font-weight:700;
    font-size:12px;
    color: red;
 }

/* Django Sizes */
input#id_building, input#id_account {width:90%}
input#id_message {width:90%; height:300px}


/* Media queries */

@media screen and (max-width: 790px) {

  .col {
    width: 100% !important;
  }
}

/* MENU */

.wrapper {
  width: 322px;
  height: 570px;
  border: 1px solid black;
  margin: 50px auto;
  position: relative;
  overflow: hidden;
}

.slide-in {
  transform: translate3d(0, 0, 0) !important;
  display:inherit !important;
}


.top-bar {
  position: relative;
  z-index: 2;
  padding-bottom: 15px;
}

.logo {
  padding: 5px 15px;
  background: green;
  display: inline-block;
  margin: 15px 0 0 15px;
  position: relative;
  z-index: 2;
}

.menu-icon {
  float: right;
  margin: 15px 15px 0 0;
  padding: 5px 15px;
  border: 1px solid #eee;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 700;
  position: relative;
  z-index: 2;
  color: #eee;
  cursor: pointer;
}



.menu-top {
  background-color: #2A2A3D;
  height: 75%;
  width: 100%;
  position: absolute;
  top: 0;
  transform: translate3d(0, -100%, 0);
  transition: all 0.3s ease-in;
}

.menu-bottom {
  height: 25%;
  width: 100%;
  background-color: #36364E;
  position: absolute;
  bottom: 0;
  transform: translate3d(0, 175px, 0);
  transition: all 0.5s ease;
}

.menu-bottom-content {

}

.avatar {
  background-color: #222;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

.user-name {
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.5px;
  padding-top: 35px;
  display: block;
  text-align: center;
}

/* Input Styles */
textarea {padding:10px}