/* styles */
/* called by your view template */

:root {
  --primary-color: rgba(13, 110, 139, 0.75);
  --overlay-color: rgba(24, 39, 51, 0.85);
  --menu-speed: 0.75s;
  --vistage-blue: #0035fe;
  --vistage-yellow: #edb700;
  --vistage-grey: #3a3a3c;
  --vistage-lightgrey: #abafa6;
}

* {
  box-sizing: border-box;
}

/*
#panel, #flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel {
  padding: 50px;
  display: none;
}
*/

body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  height: auto;
  margin-bottom: 60px;

  background-image: linear-gradient(#003f5e 12%, 20%, white 40%);
  background-repeat: repeat-x;
  background-size: auto 500px;

/*
  background-image: url(/images/deepavali-2021-bg.jpg);
  background-size: contain;
  background-blend-mode: revert;
  background-size: 200px;
  background-repeat: repeat;
*/

}

.container {
  max-width: 800px;
  margin: auto;

}

.card-container-hidden {
  border-radius: 10px;
  margin: 0px 0px 4px 0px;
  padding: 0px;
  height: calc(100vh - 128px);
  position: relative;
  overflow: auto;

}

.card-container-hidden::-webkit-scrollbar,
.card-container::-webkit-scrollbar,
.sub-menu::-webkit-scrollbar,
.popup-content::-webkit-scrollbar {
    display: none;
}

.card-container {
  background-color: white;
  border-radius: 10px;
  margin: 0px 20px 6px 20px;
  padding: 0px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
  height: calc(100vh - 138px);
  position: relative;
  overflow: auto;
}

.card-container-inbox {
  background-color: white;
  border-radius: 10px;
  padding: 15px 15px 15px 5px;
  margin: 0px 20px 20px 20px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

main {

}

main h1 {
  font-family: 'Bree Serif', serif;
  font-size: 1.2rem;
  margin: 20px 15px 10px 10px;

}

.meetings .tabletitle {
  margin: 10px 15px 10px 10px;
}

.header {
  font-family: 'Bree Serif', serif;
  display: flex;
  align-items: center;


}

.headeritems {
  display: inline-flex;
  align-items: center;

}

.headeritems a {
  color: white;
}

.headertext {
  font-family: 'Open Sans', sans-serif;
  color: white;
  font-size: 0.7rem;
  margin: 20px 0px;
  /*text-align: right;*/

}

#apptitle {
  color: white;
  font-size: 1.2rem;
  margin: 20px 5px 20px 25px;
  float: left;
  text-shadow: 2px 2px 6px rgb(0 0 0 / 50%);
}

#pagetitle {
  color: white;
  font-size: 1.2rem;
  margin: 0px 15px 0px 10px;
  float: left;
  padding: 0px 0px 5px 0px;
  /* text-shadow: 2px 2px 6px rgb(0 0 0 / 50%); */
}

.profilecropper {
  margin: 10px 0px;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  overflow: hidden;
  flex-shrink: 0;

}

#profilepic {
  width: 50px;
  height: 50px;
  object-fit: cover;

}

.navigation {
  width: 100%;
}

img {
  width: 50px;
/*  border-radius: 50px; */
  float: left;
}

.logout {
  font-size: 0.8rem;
  font-family: 'Raleway', sans-serif;
  position: relative;
  overflow: hidden;
  opacity: 1;
  transition: opacity .45s;
  -webkit-transition: opacity .35s;
  margin: 0px 0px 0px 10px;

}

.profilebutton {
  display: flex;
  float: right;
  padding: 0px;
  margin: 0px 20px 0px 10px;
  color: white;
  width: 50px;
/*  background-color: black; */
  transition: width .35s;
  -webkit-transition: width .35s;
/*  overflow: hidden; */
  align-items: center;
}

/*
.profilebutton:hover, .profilebutton:focus {
  width: 130px;
}
*/

.toggler:checked + .profilebutton {
  width: 114px;
}

.toggler:checked {
  right: 85px;
}

/*
.profilebutton:hover .logout{
  opacity: 1;
}
*/

.toggler:checked + .profilebutton .logout {
  opacity: 1;
}

.toggler {
  position: absolute;
  right: 20px;
  z-index: 2;
  cursor: pointer;
  width: 50px;
  height: 50px;
  opacity: 0;
  margin: 0px;
  padding: 0px;
  transition: right;
  -webkit-tap-highlight-color: transparent;
}

span {
  font-weight:normal;
}

.main-menu span {
  margin: 0px 0px 0px 0px;
}

.stickynav {
  position: sticky;
  top: 0;
}

.navbar__link {
  display: flex;
  align-items: center;
}

.active {
  color: red;
}

.topnav {
  display: flex;
  justify-content: space-around;
  border-radius: 10px;
  background-color: #edb700;
  margin: 0px 10px;
  padding: 10px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
  overflow: hidden;

}

a {
  font-family: 'Bree Serif', serif;
  font-size: 0.6rem;
  color: #003f5e;
  text-transform: uppercase;
  text-decoration: none;
}

.group-menu {
  display: flex;
  align-items: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  color: white;
  text-transform: initial;
  text-decoration: initial;
}

.main-menu a {
  font-size: 1rem;
  text-transform: initial;
}

.bottomnav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  color: white;
  background-color: grey;
  z-index:10;
  width: 100%;
  position: fixed;
  bottom: 0;
  height: 50px;

}

.bottomnav a {
  color: white;
}

.bottomnavicon {
  width: 80px;

}

.badge {
  font-family: 'Bree Serif', serif;
  font-size: 0.6rem;
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 5px 8px;
  border-radius: 50%;
  background: red;
  color: white;
  margin: 0;
}

.vistagebluebg {
  background-color: #0035fe;
}

.vistageyellowbg {
  background-color: #edb700;
}

.vistagegreybg {
  background-color: #3a3a3c;
}

.vistagelightgreybg {
  background-color: #abafa6;
}

.menu-wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main-menu{
/*    width: 250px; */
    display: block;
    border-radius: 10px;
    overflow: hidden;
    margin: 0px 20px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}
.item{
    border-top: 1px solid #d9a800;
    overflow: hidden;
}

.modal-btn-set {
    display: flex;
    position: absolute;
    right: 30px;
    visibility: hidden;
    opacity: 0;
    transition: .64s ease-in-out;
}

.modal-btn {
    text-decoration: none;
    display: flex;
    border-radius: 50px;
    border-style: solid;
    border-color: white;
    border-width: 1px;
    color: white;
    padding: 5px 10px;
    margin: 5px;
    text-align: center;
    vertical-align: middle;

}

.filter-btn-set {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;

}

.filter-btn-set h1 {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: normal;
  color: white;
  margin: 5px;
}

.filter-btn, .group-btn {
    text-decoration: none;
    border-radius: 50px;
    border-style: solid;
    border-color: white;
    border-width: 1px;
    color: white;
    padding: 2px 10px;
    margin: 5px;
    text-align: center;
    vertical-align: middle;
    font-family:'Open Sans',sans-serif;
    font-size:0.8rem;
    min-width: 60px;
    line-height: 30px;
}

.filter-btn-set .activeButton {
  background-color:#edb700;
  border-style:none;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

.page-btn {
    text-decoration: none;
    border-radius: 50px;
    border-style: solid;
    border-color: white;
    border-width: 1px;
    color: white;
    padding: 2px 10px;
    margin: 5px;
    text-align: center;
    vertical-align: middle;
    font-family:'Open Sans',sans-serif;
    font-size:0.8rem;
    min-width: 60px;
}

.menu-btn{
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background-color: #edb700;
    color: #003f5e;
    position: relative;
    width: 100%;
    font-family: 'Bree Serif', serif;

}

.menu-btn:before{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right:8px solid transparent;
    border-top:10px solid #edb700;
    right: 15px;
    bottom: -10px;
    z-index: 1;

}

.menu-btn i {
    margin-right: 10px;
}

#groupvisit .menu-btn:before{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right:8px solid transparent;
    border-top:10px solid darkorange;
    right: 15px;
    bottom: -10px;
    z-index: 1;

}

.sub-menu{
    background: #003f5e;
    overflow: auto;
    transition: max-height 0.7s;
    max-height: 0;

}
.sub-menu a{
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 14px;
    width:100%;
    position: relative;

}

/*
.sub-menu a{
    display: block;
    padding: 5px 20px;
    color: #fff;
    font-size: 14px;
    border-bottom: 1px solid #145d81;
    position: relative;

}
.sub-menu a:before{
    content: '';
    opacity: 0;
    transition: opacity 0.3s;

}
.sub-menu a:hover:before{
    content: '';
    position: absolute;
    height: 0;
    width: 6px;
    left: 0;
    top:0;
    opacity: 1;
    border-top: 46px solid transparent;
    border-left: 15px solid #fff;
    border-bottom: 46px solid transparent;
}
.sub-menu a:after{
    content: '';
    opacity: 0;
    transition: opacity 0.3s;

}
.sub-menu a:hover:after{
    content: '';
    position: absolute;
    height: 0;
    width: 6px;
    right: 0px;
    top:0;
    opacity: 1;
    border-top: 46px solid transparent;
    border-right: 15px solid #fff;
    border-bottom: 46px solid transparent;
}
.sub-menu a:hover{
    background: #145d81;
    background: -moz-linear-gradient(top, #003f5e 0%, #003f5e 50%, #145d81 51%, #145d81 100%);
    background: -webkit-linear-gradient(top, #003f5e 0%,#003f5e 50%,#145d81 51%,#145d81 100%);
    background: linear-gradient(to bottom, #003f5e 0%,#003f5e 50%,#145d81 51%,#145d81 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003f5e', endColorstr='#145d81',GradientType=0 );
    transition: all 0.3s;
    border-bottom: 1px solid #145d81;
}
.sub-menu a:last-child{
    border:none;
}
*/

.active .sub-menu{
    max-height: 100vh;
}

.active .modal-btn-set {
    visibility: visible;
    opacity: 1;
}

.sub-item{
    display: block;
    padding: 5px 20px;
    color: #fff;
    font-size: 14px;
    border-bottom: 1px solid #145d81;
    position: relative;

}

.sub-menu .sub-item:last-child{
    border:1;
}

.popup {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100vw;
  height: 100vh;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, .80);
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  transition: .64s ease-in-out;
}

.popup-inner {
    position: relative;
    bottom: -100vw;
    right: -100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
/*    max-height: 80%; */
    width: 80%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 11px 0 rgba(0,0,0,0.58), 0 4px 15px 0 rgba(0,0,0,0.55);
    transform: rotate(32deg);
    transition: .64s ease-in-out;
  }

.popup-title {
    display: flex;
    width: 100%;
    height: 10%;
    overflow: hidden;
    padding: 10px 20px;
    background-color: #003f5e;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.popup-title h1 {
    color: white;
    margin: 0;
    font-weight: normal;
}

.popup-content {
    display: flex;
    flex-direction: column;
    justify-content: top;
    width: 100%;
    height: 90%;
    padding: 20px;
    background-color: #abafa6;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

  /*
    h1 {
      font-size: 2rem;
      font-weight: 600;
      margin-bottom: 2rem;
      text-transform: uppercase;
      color: #0A0A0A;
    }
    p {
      font-size: .875rem;
      color: #686868;
      line-height: 1.5;
    }
  */
}

.popup:target {
    visibility: visible;
    opacity: 1;

}

.popup:target .popup-inner {
      bottom: 0;
      right: 0;
      transform: rotate(0);
}

.popup-close {
    position: absolute;
    right: -1rem;
    top: -1rem;
    width: 3rem;
    height: 3rem;
    font-size: .875rem;
    font-weight: 300;
    border-radius: 100%;
    background-color: #edb700;
    z-index: 4;
    color: #fff;
    line-height: 3rem;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}

.input-box {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
    background-color: white;
    color: black;
    outline: none;
    border: 1px solid white;
    border-radius: 0;
    width: 47%;
    margin-bottom: 10px;
    padding: 5px;

}

.popup-content ::placeholder {
  color: #abafa6;
  opacity: 1; /* Firefox */
}

#meetingentry {
  display: none;
}

#meetingentry:target {
    display: block;
}

/* #meetingedit {
  display: none;
}

#meetingedit:target {
    display: block;
} */

.meetings .button, .inwaiting .button, .prospects .button  {
  float: right;
}


.home-table {

  box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
  border-radius: 10px;
  padding: 0px;
  margin: 0px 2px 10px 2px;
  border-spacing: 0px;
  vertical-align: top;
  text-align: left;
  font-size: 0.7rem;
  width: calc(100% - 10px);

}

.tabletitle {
  font-family: 'Bree Serif', serif;
  font-size: 1rem;
}

.home-table tr {
  vertical-align: top;
}

.home-table tr:nth-child(even) {
  background: #e8e8e8;

}

.home-table th {
  font-weight: Bold;
  padding: 5px 10px;
}

.home-table td {
  margin: 20px 0px;
  padding: 10px;

}

h1 {
  color: #003f5e;

}

.highlight-panel {

  box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
  border-radius: 10px;
  padding: 10px 20px;
  margin: 15px 15px 20px 15px;
  background-color: #003f5e;

}

.highlight-panel-hidden {
  /* padding: 0px; */
  padding: 15px 0px;
  margin: 15px;
  background-color: white;
}

.highlight-panel-header {
  display: flex;
  align-items: center;
  color: #fff;
  justify-content: space-between;
  width: 100%;
}

.highlight-panel a {
  text-transform: initial;
}

.dateframe {
  font-family: 'Bree Serif', serif;
  font-size: 0.8rem;
  color: white;
  background-color: #abafa6;
  border: 1px solid white;
  text-align: center;
  padding: 0px 0px;
  margin: 10px 10px 10px 0px;
  width: 66px;
  flex-shrink: 0;
}

.datedayno {
  font-size: 2.5rem;
  line-height: 1.5rem;
}


.statusicon {
  width: 20px;
  margin-left: auto;
  right: 40px;
  flex-shrink: 0;
}


.actioniconset {
  display: flex;
  justify-content: flex-end;
}

.actionicon {
  display: inline-block;
  /* margin-left: auto; */
  /* padding-left: 20px; */
  width: 60px

}

.actionicon a {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.7rem;
  color: #003f5e;
  margin: 0;
  text-transform: uppercase;

}

.highlight-table, .ae-table, .report-table, .detail-table {
  padding: 5px 0px 0px 0px;
  border-spacing: 0px;
  vertical-align: top;
  text-align: left;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8rem;
  color: white;

}

.highlight-table tr, .ae-table tr, .report-table tr, .detail-table tr {
  vertical-align: top;
}

.highlight-table td, .ae-table td, .report-table td, .detail-table td {
  padding: 2px 7px 2px 5px;
}

.highlight-table td:first-child {
  font-weight: bold;
  width: 7rem;

}

.highlight-table a, .ae-table a, .report-table a, .detail-table a {
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
  color: #edb700;
  text-transform: inherit;
}

.report-table tr:nth-child(even) {
  background-color: #0B5375;
}

.detail-table tr:nth-child(even) {
  background-color: #e2e2e2;
}

#editor {
  font-family: 'Open Sans', sans-serif;
  height: calc(100vh - 250px);
}

#editor a {
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
  color: #003f5e;
  text-transform: inherit;
  text-decoration: none;
}

.editortitle {
  font-size: 1rem;
  color: #003f5e;
}

.card-container .button {
  position: fixed;
  bottom: 65px;

}

.sectiontitle {
  font-size: 1rem;
  color: #edb700;
}

.subtitle {
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  font-size: 0.8rem;
  color: black;
}

.status {
  font-family: 'Open Sans', sans-serif;
  color: red;
  font-weight: bold;
  font-size: 0.8rem;
}

hr {
/*
  border-color: #abafa6;
  border: 0px;
*/

  border: 0.5px solid #abafa6;

}

#editor {

}

.bold {
  font-weight: bold;
}

p {
  max-width: 800px;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8rem;
}

form {
  display: inline-block;
  width: 100%;

}

input {
  display: block;
  margin-bottom: 10px;
  padding: 5px;
  width: 100%;
  border: 1px solid lightgrey;
  border-radius: 3px;
  font-size: 16px;
}

#searchBar:focus {
  outline: none;
}

#searchBar::placeholder {
  color: lightgrey;
}

/*
button {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.7rem;
  color: white;
  border-radius: 5px;
  background-color: #edb700;
  border: 0px solid white;
  cursor: pointer;
  width: 55px;
}

button:hover {
  background-color: #abafa6;
}

button:active {
  box-shadow: none;
  background-color: none;
}

button:focus {
  outline: none;
}

button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

button span:after {
  content: '\00bb';;
  position: absolute;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
}

button:hover span {
  padding-right: 10px;
}

button:hover span:after {
  opacity: 1;
  right: 0;
}
*/

.button {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.7rem;
  color: white;
  border-radius: 5px;
  background-color: #edb700;
  border: 0px solid white;
  cursor: pointer;
  width: 55px;
  text-transform: none;
  text-align: center;
}

.button:hover {
  background-color: #abafa6;
}

.button:active {
  box-shadow: none;
  background-color: none;
}

.button:focus {
  outline: none;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';;
  position: absolute;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 10px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

.btn {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.7rem;
  color: white;
  border-radius: 5px;
  background-color: #edb700;
  border: 0px solid white;
  cursor: pointer;
  text-transform: none;
  text-align: center;
  margin: 0px 5px;
  padding: 0px 5px;
}

.btn:hover {
  background-color: #abafa6;
}

.btn-container {
  display: flex;
  align-items: center;
  margin: 10px 8px;
  height: 40px;
}

.btn-square {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.7rem;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  border-radius: 0px;
  background-color: #edb700;
  color: white;
  border: 0px solid lightgrey;
  cursor: pointer;
  text-transform: none;
  text-align: center;
  vertical-align: middle;
  margin: 0px 5px;
  padding: 0px 5px;
  width: 100px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.btn-square:hover {
  background-color: #e8e8e8;
  color: black;
}

ul {
  padding-inline-start: 0;
}

li {
  margin-bottom: 5px;
}

.main-menu li {
  margin-bottom: initial;
  list-style: none;
}

footer {
  margin-top: 50px;
  padding-top: 25px;
  border-top: 1px solid lightgrey;
}

.fade-out {
  animation: fade-out 0.5s;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.slide-in {
  animation: slide-in 0.5s ease forwards;
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
    visibility: visible;
  }
  to {
    transform: translateX(0%);
  }
}

.slider {
  /* line them up horizontally */
  display: flex;
  margin: 0px 8px;

  /* allow for scrolling */
  overflow-x: auto;

  /* make it smooth on iOS */
  -webkit-overflow-scrolling: touch;

}
.slider > div {
  /* make sure the width is honored */
  flex-shrink: 0;
  width: 110px;
  height: 100px;
}

.slider-item {
  background-color: white;
  border-radius: 10px;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
  margin: 10px 18px 10px 2px;
}

.slider-item-pic {
  background-color: #e8e8e8;
  border-radius: 10px 10px 0px 0px;
  height: 70%;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 5px 10px;
}

.slider-item-text {
  font-size: 0.8rem;
  margin: 2px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slider {
  /* ... */

  /* each slide snaps into place */
  scroll-snap-points-x: repeat(150px);
  scroll-snap-type: mandatory;
}

.slider::-webkit-scrollbar {
    display: none;
}

.collapsible {
  background-color: #e8e8e8;
  color: #003f5e;
  cursor: pointer;
  margin: 1px 10px;
  padding: 12px;
  width: calc(100% - 17px);
  height: 40px;
  border: none;
  border-radius: 10px;
  text-align: left;
  outline: none;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: bold;
}

.coll-active {
  background-color: #003f5e;
  color: white;
}

.coll-content {
  padding: 0 18px;
  margin: 0 10px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: white;
  font-size: 0.8rem;
}

.collapsible:after {
  content: "\002B"; /* Unicode character for "plus" sign (+) */
  color: white;
  font-size: 12px;
  font-weight: bold;
  float: right;
  margin-left: 5px;
  align-self: center;
}

.coll-active:after {
  content: "\2212"; /* Unicode character for "minus" sign (-) */
  align-self: center;
}

.triggerButton { display: none; }

.triggerButton + label {
  cursor: pointer;
  background-color: white;
  height: 2.5em;
  width: 2.5em;
  border-radius: 50%;
  z-index: 2;
  text-align: center;
  flex-shrink: 0;
  margin-left: auto;
}

/*
.triggerButton + label:before, .triggerButton + label:after {
  position: absolute;
  content: '';
  height: calc(3.5em / 2 );
  width: .25em;
  background-color: #fff;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: .5em;
  transition: all .25s;
}

.triggerButton + label:before {
  height: calc(3.5em / 2 );
  width: .25em;

}

.triggerButton + label:after {
  width: calc(3.5em / 2 );
  height: .25em;
}

.triggerButton:checked + label:before { transform: rotatez(-45deg); }

.triggerButton:checked + label:after { transform: rotatez(-45deg); }
*/

.one, .two {
  cursor: pointer;
  position: absolute;
  right: 1.5em;
  bottom: 2em;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  opacity: 0;
  z-index: 1;
  transform: rotateZ(90deg);
  font-size: 1em;
  color: #fff;
  transition-property: all;
  transition-duration: .35s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-align: center;
}

.triggerButton:checked ~ .one, .triggerButton:checked ~ .two, .triggerButton:checked ~ .three { opacity: 1; }

.triggerButton:checked ~ .one {
  background-color: #3de35b;
  transform: translateX(-3em) translateY(1.5em);;
  transition-delay: .1s;
}

.triggerButton:checked ~ .two {
  background-color: #abafa6;
  transform: translateX(-3em) translateY(-1.5em);
}

.triggerButton:checked ~ .three {
  background-color: mediumorchid;
  transform: translateY(-5em);
}

.triggerButton:checked ~.one:hover, .triggerButton:checked ~ .two:hover, .triggerButton:checked ~ .three:hover { opacity: .9; }

input[type=radio] {
  position: absolute;
  visibility: hidden;
  display: none;
}

.radio-group label {
  color: white;
  cursor: pointer;
  font-weight: normal;
  padding: 5px 5px;
  font-size: 0.7rem;
  min-width: 60px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* input[type=radio]:checked {
  accent-color: #003f5e;
} */

input[type=radio]:checked + label {
  color: inherit;
  background: none;
}

.radio-group input[type=radio]:checked + label {
  color: #003f5e;
  background: white;
}

label + input[type=radio] + label {
  border-left: solid 1px white;
}

.radio-group {
  display: inline-flex;
  border: solid 1px white;
  margin: 5px 0px;
  border-radius: 10px;
  overflow: hidden;
  align-items: stretch;

}






    .main {
        background-color: #003f5e;
        width: 300px;
        height: 400px;
        margin: 4em auto;
        border-radius: 10px;
        box-shadow: 0px 11px 35px 2px rgba(0, 0, 0, 0.14);
        box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.5);
    }

    .sign {
        padding-top: 30px;
        color: #edb700;
        font-family: 'Bree Serif', serif;
        font-weight: bold;
        font-size: 23px;
    }

    .un {
    width: 76%;
    color: rgb(38, 50, 56);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    background: rgba(136, 126, 126, 0.04);
    background: white;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    outline: none;
    box-sizing: border-box;
    border: 2px solid rgba(0, 0, 0, 0.02);
    margin-bottom: 50px;
/*    margin-left: 46px; */
    text-align: center;
    margin-bottom: 20px;
    font-family: 'Open Sans', sans-serif;
    }

    .form1 {
        padding-top: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;

    }

    .pass {
            width: 76%;
    color: rgb(38, 50, 56);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    background: rgba(136, 126, 126, 0.04);
    background: white;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    outline: none;
    box-sizing: border-box;
    border: 2px solid rgba(0, 0, 0, 0.02);
    margin-bottom: 50px;
/*    margin-left: 46px; */
    text-align: center;
    margin-bottom: 27px;
    font-family: 'Open Sans', sans-serif;
    }


    .un:focus, .pass:focus {
        border: 2px solid rgba(0, 0, 0, 0.18) !important;

    }

    .submit {
      width: 40%;
      cursor: pointer;
        border-radius: 5em;
        color: #fff;
        background: linear-gradient(to right, #b68d00, #fad556);
        border: 0;
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 10px;
        padding-top: 10px;
        font-family: 'Open Sans', sans-serif;
/*        margin-left: 35%; */
        font-size: 13px;
        box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.04);
    }

    .forgot {
        text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12);
        color: #edb700;

    }

    a {
        text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12);
        color: #edb700;
        text-decoration: none
    }

/*
    @media (max-width: 600px) {
        .main {
            border-radius: 0px;
        }
*/

.alert {
    padding: 15px;
    margin-bottom: 17px;
    border: 1px solid transparent;
    border-radius: 2px;
}

.alert-danger .alert-link {
    color: #fafafa;
}
.alert-danger .alert-link:hover,
.alert-danger .alert-link:focus {
    color: #ebebeb;
}

.alert-danger {
    background-color: #e55869;
    border-color: transparent;
    color: #ffffff;
}
.alert-danger hr {
    border-top-color: rgba(0, 0, 0, 0);
}
.alert-danger .alert-link {
    color: #e6e6e6;
}

.alert-success {
    background-color: #79D46A;
    border-color: transparent;
    color: #ffffff;
}

.text-center {
  text-align: center;
}

.hide{
  display: none;
}

.vas-select-btn {
    text-decoration: none;
    border-radius: 50px;
    border-style: solid;
    border-color: white;
    border-width: 1px;
    color: white;
    padding: 2px 10px;
    margin: 5px;
    text-align: center;
    vertical-align: middle;
    font-family: 'Open Sans',sans-serif;
    font-size: 0.8rem;
    min-width: 60px;
}

.vas-select-btn:active {
    background-color: #edb700;
}

.table.table-bordered tbody tr td {
    vertical-align: text-top;
    padding-right: 20px;
}

#agendacontent a {
  font-size: 14px;
  text-transform: none;
}

#agendacontent h1 {
  margin: 0px;
}

#agendacontent ol {
  font-size: 14px;
}

#agendacontent ol li {
  padding-left: 10px;
  padding-right: 10px;
}

.note-editable {
  font-family: 'Open Sans',sans-serif;
  font-size: 14px;
}

.note-editable a {
  font-size: 14px;
  text-transform: none;
}

.note-editable p {
  font-size: 14px;
}

.note-editable h1 {
  margin: 0px;
}

.note-editable ol li {
  font-size: 14px;
  padding-left: 10px;
  padding-right: 10px;
}

.todo-container {
  color: white;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.todo {
  width: 100%;
}

.todo-container h1 {
  margin: 0px;
  padding: 10px;
  font-family: 'Bree Serif', sans-serif;
  font-size: 1.5rem;
  color: #edb700;
}

.todo-header input {
  border: none;
  border-radius: 5px;
  font-family: 'Open Sans', sans-serif;
  margin-right: 10px;
}

.todo-header button {
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 5px;
  font-family: 'Open Sans', sans-serif;
  background-color: rgb(51, 212, 100);
}

.todo-container ul {
  list-style: none;
}

.todo-list-item {
  padding: 10px;

  border: none;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  font-family: 'Open Sans', sans-serif;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: row;
  width: 100%
}

.todo-list-item form {
  width: 100%;
  display: flex;
}

.todo-list-item input {
  flex-grow: 2;
  margin-right: 20px;
  border: none;
  border-radius: 5px;
  font-family: 'Open Sans', sans-serif;
}

.todo-list-item textarea {
  margin-right: 10px;
  border: none;
  border-radius: 5px;
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
}

.todo-list-item button {
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  padding: 5px;
  font-family: 'Open Sans', sans-serif;
  background-color: rgb(51, 212, 100);
}

.todo-list-item .todo-cancel {
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  padding: 5px;
  font-family: 'Open Sans', sans-serif;
  background-color: rgb(223, 43, 43);
  margin-left: 5px;
}

.todo-list-item div {
  flex-grow: 2;
}

.todo-list-item .todo-mark {
  color : rgb(143, 233, 58);
  margin: 0px 10px;
  cursor:pointer;
  text-decoration: none;
}

.todo-list-item .todo-remove {
  color : rgb(243, 96, 96);
  cursor:pointer;
  text-decoration: none;
}

.todo-edit {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  color: white;
  text-transform: none;
  width:100%;
}

.todo-list {
  list-style: none;
}

.todo ol li {
  counter-increment: my-counter;
  display: flex;
  font-size: 1rem;
  margin-bottom: 20px;
}

.todo ol li::before {
  content: counter(my-counter);
  font-style: italic;
  font-size: 2rem;
  padding-left: 5px;
  padding-right: 10px;
  font-family: 'Bree Serif', serif;
  background: rgba(0, 0, 0, 0.3);
  padding-right: 10px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  line-height: 40px;
  color: #edb700;
}

#registrationsummary-section, #registrationsummary-section th, #registrationsummary-section td {
  border-top: 0.5px solid #003f5e;
  /* border-bottom: 0.5px solid #003f5e; */
  border-collapse: collapse;
}

#registrationsummary-section th, #registrationsummary-section td {
  padding: 10px 5px;
}

#registrationlist-section, #registrationlist-section th, #registrationlist-section td {
  border-top: 0.5px solid rgb(171,175,166,0.5);
  border-bottom: 0.5px solid rgb(171,175,166,0.5);
  border-collapse: collapse;
}

#registrationlist-section th, #registrationlist-section td {
  padding: 10px 5px;
}

.completed-pas input:checked + span {
  background-color: darkseagreen;
}

.hosting input:checked + span {
  background-color: darkseagreen;
}

.issue-presented input:checked + span {
  background-color: darkseagreen;
}

.stepper-item::before {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 15px;
  left: -50%;
  z-index: 2;
}

.stepper-item::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 15px;
  left: 50%;
  z-index: 2;
}

.stepper-item:first-child::before {
  content: none;
}
.stepper-item:last-child::after {
  content: none;
}

.modal-loader{
  visibility: hidden;
  background-color:#abafa6;
  position:absolute;
  width:100%;
  height:221.2px;
  top:46.4px;
  left:0;
  border-radius:0px 0px 10px 10px;
  display:flex;
  align-items: center;
  justify-content: center;
}

.loader{
  position: fixed;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: all 0.5s;
}

.loader .ring{
  height: 60px;
  width: 60px;
  border: 5px solid #abafa6;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader .ring:after{
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  border-radius: 50%;
  border: 5px solid #edb700;
  border-top-color: transparent;
  animation: rotate 1.5s linear infinite;
}

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