/*html{
    background-color:#5b5b63;
}*/
.header{
    border: 2px solid green;
    background-color:#5b5b45;
    height:10%;
}
.workbody{
    border: 2px solid green;
    border-top-width : 0px;
    background-color:#5b5b90;
    height:89%;
}
/** {
  box-sizing: border-box;
}*/
/*.h100{
    height:100%;
}
.h10{
    height:10%;
 }
.h20{
    height:20%;
 }
.h80{
    height:80%;
 }
.h90{
    height:90%;
}
.h5{
    height:5%;
}
.h95{
    height:95%;
}*/
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
  width: 120px;
  height: 120px;
  left:0px;
  top:0px;
  position:fixed;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  z-index: 50;
}

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


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 4px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
.collapsible_content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.collapsible_active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.collapsible_active:after {
  content: "\2212";
}

.container{
   width: 100%;
   margin-right: auto;
   margin-left: auto;
}
.column {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    position: relative;
    max-width:100%;
    width: 100%;
    padding-right: 1px;
    padding-left: 1px;
}
.c1{
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}
.c2{-ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;}
.c3{-ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;}
.c4{
   -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
.c5{-ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;}
.c6{-ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;}
.c7{-ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;}
.c8{    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;}
.c9{-ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;}
.c10{    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;}
.c11{    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;}
.c12{-ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;}
/* Clear floats after the columns */
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /*margin-right: -5px;*/
    /*margin-left: -5px;*/
}
.row_100 {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /*margin-right: -5px;*/
    height:100%;
    /*margin-left: -5px;*/
}
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
.contentactive{
    display: flex;
}
.block {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    width: 45%;
    min-width: 45px;
    padding: 1em;
    box-sizing: border-box;
    min-height: 90px;
    cursor: all-scroll;
    font-size: 11px;
    font-weight: lighter;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 3px;
    /*margin: 10px 2.5% 5px;*/
    box-shadow: 0 1px 0 0 rgba(0,0,0,0.15);
    transition: all 0.2s ease 0s;
    transition-property: box-shadow, color;
}
.displayNone{
    display:none;
}
.displayflex{
    display:flex;
}
.w100{
    width:100%;
}
.p0{
    padding:0px;
}
.m0{
    margin:0px;
}
.pycontainer_ul{
    width:100%;
    padding:0px;
    margin:0px;
    list-style: none;
}
.h100px{
    height:100px;
}
.h50px{
    height:50px;
}

/* The Modal (background) */
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 60%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}
/* This is our style for the invalid fields */
input:invalid{
  border-color: #900;
  background-color: #FDD;
}

input:focus:invalid {
  outline: none;
}

/* This is the style of our error messages */
.error {
  color: white;
  background-color: #ce8a8a;
  box-sizing: border-box;
}

/*.error.ERActive {
  padding: 0.3em;
}*/

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
.b1{
    border: 1px solid rgba(0,0,0,0.2);
}