@import url("https://use.typekit.net/uey7hzq.css");
   @import url('https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap');

   body,
   html {
       width: 100%;
       height: 100%;
       margin: 0;
       font-family: proxima-nova, sans-serif;



   }

   a {
       text-decoration: none;
       outline: none;
   }

   body {
       background: #2e2e2e;
   }

   * {
       box-sizing: border-box;
       scroll-behavior: smooth;
   }

   a {
       text-decoration: none;
   }

   .link {}


   h1 {
       font-family: freight-text-pro, serif;
       font-weight: 500;
       text-align: center;
       font-size: 35px;
       color: #ffffff;
       font-style: normal;


   }

   h3 {
       font-family: proxima-nova, sans-serif;
       text-align: center;
       margin: 0;
       font-size: 22px;
       font-weight: 300;

   }

   /* Header */



   #header {
       height: 50px;
       width: 100%;
       background-color: #222222;
   }

   .headerInner {
       width: 100%;
       max-width: 1300px;
       float: none;
       margin: 0 auto;
       height: 65px;
       padding: 15px 30px;
   }

   .logoWide {
       width: 250px;
       float: left;
   }

   .menu {
       width: 410px;
       float: right;
       margin-top: 5px;
       color: #ffffff;
   }

   .profileText {
       padding-top: 5px;
       float: left;
   }

   .profileIcon {
       width: 35px;
       height: 35px;
       float: left;
       background-color: blue;
       margin: 0 0 0 15px;
       border-radius: 100px;
       text-align: center;
       padding-top: 7px;
   }

   .fa-user {
       color: #ccb555;
   }


   .darkShadow {
       background: linear-gradient(150deg, #2e3035, #2e3035);
       box-shadow: 4px 4px 20px 4px #000, -4px -4px 20px 4px hsla(0, 0%, 100%, .26666666666666666);
   }

   .profileLinks {
       padding: 0 15px;
   }

   .mobShow {
       display: none;
   }

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

       .profileLinks {
           display: none;
       }

       .mobShow {
           display: block;
       }

       .profileIcon {
           float: right;
       }

       .menu {
           width: auto;
       }

       .headerInner {
           padding: 15px 30px;
       }
   }


   /* Footer */

   #footer {
       width: 100%;
       background-color: #222222;
       border-top: 1px solid #e1e1e1;
       color: #ffffff;
       text-align: center;
       height: 35px;
       position: fixed;
       bottom: 0;
   }

   .footerInner {
       float: none;
       margin: 0 auto;
       width: 220px;
       margin-top: 2px;
   }

   .footerText {
       float: left;
       padding: 5px 0 0 0;
       margin: 0 20px 0 0;
   }

   .footerIcon {
       color: #ffffff;
       float: left;
       margin: 5px 10px;
   }

   /* Body */


   .mainWrap {
       width: 100%;
       max-width: 1000px;
       padding: 30px;
       float: none;
       margin: 0 auto;
   }

   .mwInner {
       float: left;
       width: 100%;
   }

   .intro {
       color: #ffffff;
       text-align: center;
       margin: 40px 0 30px 0;
   }

   .legendHolder {
       width: 250px;
       margin: 0 auto;
       float: none;
   }


   .legend {
       width: 20px;
       height: 20px;
       float: left;
       border-radius: 100px;
       margin-right: 10px;
       margin-bottom: 30px;
   }

   .legendText {
       float: left;
       color: #e1e1e1;
       margin-right: 20px;
   }

   .complete {
       background-color: #ccb555;
   }

   .incomplete {
       background-color: #999999
   }



   /* Accordion */


   .accMain {
       width: 100%;
       height: 80px;
       border-top-right-radius: 100px;
       border-bottom-right-radius: 100px;
       background: #222222;
       box-shadow: 5px 5px 10px #191919,
           -5px -5px 10px #434343;
       border: 1px solid #444444;
       float: left;
       margin: 15px 0;
       display: flex;
       align-items: center;



   }



   .accMain:hover {
       background: #2a2a2a;

   }

   .accTitleHolder {
       width: calc(100% - 100px);
       display: flex;
       flex-direction: column;

   }

   .accTitle {
       color: #ffffff;
       font-size: 22px;
       float: left;
   }

   .accTitle {
       width: calc(100% - 100px);
       font-family: proxima-nova, sans-serif;
       font-weight: 300;
       padding-left: 30px;
       float: left;



   }

   .accUnder {
       color: #ccb555;
       font-size: 16px;
       font-weight: 900;
       padding-left: 30px;
   }

   .accIcon {
       width: 100px;
       float: left;
       text-align: center;
   }

   .accIcon .fas {
       font-size: 40px;
       color: #ccb555;
       text-align: center;
   }

   .grey {
       color: #999999 !important;
   }

   .svgicon {
       width: 50px;
       padding: 5px 0 0 0;
   }

   p.ivcount {
       margin: 3px 0 -15px 0;
       position: relative;
       color: #ffffff;
       width: 100%;
       text-align: center;
       font-weight: 900;
       text-shadow: 2px 2px 8px #000000;
   }

   svg path {
       fill: none;
       stroke-width: 20px;
       stroke-miterlimit: round;
       transition: stroke-dashoffset 850ms ease-in-out;
   }

   .progress {
       background: #222222;
       box-shadow: 5px 5px 10px #191919, -5px -5px 10px #434343;
       border: 1px solid #444444;
       height: 10px;
       overflow: hidden;
       width: 320px;
       margin: 0 auto;
   }

   span.circle {
       width: 30px;
       height: 30px;
       background: rgba(0, 0, 0, 0.58);
       padding: 10px 5px;
       border-radius: 100px;
   }

   @media screen and (max-width:700px) {
       .accMain {
           height: 60px;
           margin: 10px 0;

       }

       .accIcon {
           width: 50px;
       }

       .accIcon .fas {
           font-size: 30px;
           width: 50px;
       }

       .accTitle {
           width: 100%;

           font-size: 18px;
       }

       .svgicon {
           width: 37px;
       }

       .accTitleHolder {
           width: calc(100% - 65px);
       }

       .accTitle.accLarge {
           width: calc(100% - 65px);
       }
   }



   /* Banking */


   #banking,
   #sign {
       display: block;
       width: 100%;
       float: inherit;
       height: auto;
       border-top-right-radius: 40px;
       border-bottom-right-radius: 40px;
       background: #2a2a2a;
   }


   .accContent {
       padding: 50px 30px 10px 30px;
       color: #e1e1e1;
       font-size: 14px;
       line-height: 21px;
   }

   .accBank {
       padding-top: 25px;
   }

.safLink{
    border:none;
    outline: none;
    color: inherit;
    
}
a, a:visited { outline: none; }

   .largeButton {
       width: 250px;
       border-radius: 100px;
       background: black;
       padding: 13px 20px 5px 20px;
       float: left;
       font-size: 18px;
       margin: 20px 0 30px 0;
       border: 2px solid #ccb555;
   }

   .largeButtonText {
       float: left;
       color: #ffffff;
       text-align: center;
       width: calc(100% - 30px);
   }

   .largeButtonIcon {
       width: 30px;
       height: 30px;
       float: left;
   }

   .largeButton:hover,
   .smallButton:hover,
   .dashButton:hover,
   .logincta:hover {
       background: #558384;
       cursor: pointer;
   }


   .divider {
       width: 100%;
       float: left;
       background-color: #333333;
       height: 2px;
       margin-bottom: 8px;
   }

   .smallButton {
       width: 150px;
       border-radius: 100px;
       background: #333333;
       padding: 9px 15px 0px 15px;
       float: left;
       font-size: 16px;
       margin: 20px 0 30px 0;
       border: 2px solid #999999;
   }

   .smallButtonText {
       float: left;
       color: #ffffff;
       text-align: center;
       width: calc(100% - 30px);
   }

   .smallButtonIcon {
       width: 30px;
       height: 30px;
       float: left;
   }


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

       .largeButton {
           width: 100%;
       }

   }




   /* Dashboard */


   .grid-container {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr 1fr;
       grid-template-rows: 1fr 1fr;
       gap: 30px 30px;
       grid-template-areas:
           "availability graph events contact"
           "tableInvoice tableInvoice tablePayment tablePayment";
       margin-bottom: 100px;
   }


   .graph {
       grid-area: graph;
   }

   .availability {
       grid-area: availability;
       display: flex;
       justify-content: center;
       align-content: center;
       align-items: center;
       flex-direction: column;
   }

   .events {
       grid-area: events;


   }


   .tableInvoice {
       grid-area: tableInvoice;
   }

   .tablePayment {
       grid-area: tablePayment;
   }

   .contact {
       grid-area: contact;
   }

   .tile {
       background: #222222;
       box-shadow: 5px 5px 10px #191919,
           -5px -5px 10px #434343;
       border: 1px solid #444444;
       min-height: 420px;
       color: #e1e1e1;
       padding: 25px;
       font-size: 13px;
       border-radius: 15px;
   }

   .dashSum {
       font-family: freight-text-pro, serif;
       text-align: center;
       font-size: 45px;
       color: #ccb555;
       width: 100%;
       float: left;
       margin: 10px 0 30px 0;

   }

   .smallPrint {
       color: #888888;
       font-size: 11px;
       text-align: center;
       width: 100%;
       height: auto;
       margin: 30px 0;
   }

   .insetDivider {
       height: 3px;
       width: 100%;
       background-color: #000000;
       border-top: 1px solid #555555;
       float: left;
       border-bottom: 1px solid #333333
   }

   .dashButton {
       width: 100%;
       border-radius: 100px;
       background: #333333;
       padding: 10px 15px 0px 15px;
       float: left;
       font-size: 16px;
       margin: 20px 0 30px 0;
       border: 2px solid #ccb555;
   }

   .dashButtonText {
       float: left;
       color: #ffffff;
       text-align: center;
       width: calc(100% - 30px);
   }

   .dashButtonIcon {
       width: 30px;
       height: 30px;
       float: left;
   }


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

       .grid-container {
           grid-template-columns: 1fr 1fr;
           grid-template-rows: 1fr 1fr 1fr;
           grid-template-areas:
               "availability events"
               "graph contact"
               "tableInvoice tablePayment";
       }
   }

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

       .grid-container {
           display: block;
           float: left;
           width: 100%;
       }

       .tile {
           margin: 30px 0 0 0;
           min-height: 100px;
           width: 100%;
           float: left;
       }

       .graph {
           min-height: 400px !Important;
       }
   }




   .tooltip {
       position: relative;
       display: inline-block;
       top: -20px;

   }

   .tooltip .tooltiptext {
       visibility: hidden;
       width: 120px;
       background-color: black;
       color: #fff;
       text-align: center;
       border-radius: 6px;
       padding: 5px 0;
       left: -130px;
       top: 30px;
       position: absolute;
       z-index: 1;
       font-size: 14px;
       font-family: proxima-nova, sans-serif;

   }

   .tooltip:hover .tooltiptext {
       visibility: visible;
   }

   .fa-question-circle {
       font-size: 16px;
       color: #e1e1e1
   }



   .eventDate,
   .eventTime {
       width: 100%;
       display: block;
       margin: 10px 0;
       font-size: 14px;
       color: #ccb555;
       margin-top: 13px;
       float: left;
   }

   .eventDetails {
       font-size: 12px;
       color: #999999;
       margin-bottom: 20px;
       float: left;
   }


   .loadMore {
       text-align: center;
       width: 100%;
       float: left;
   }


   .relPhoto {
       width: 100px;
       height: 100px;
       float: none;
       margin: 20px auto 20px auto;
       border-radius: 900px;
       overflow: hidden;

   }


   .relName {
       font-family: freight-text-pro, serif;
       font-size: 23px;
       text-align: center;
       color: #c1c1c1;

   }

   .relSub {
       font-size: 14px;
       font-weight: 900;
       color: #ccb555;
       margin-bottom: 20px;
       text-align: center;
   }

   .relCom {
       width: 100%;
       float: left;
       height: 30px;
   }

   .relComIcon {
       width: 20px;
       height: 20px;
       float: left;
       color: #ccb555;
   }

   .relComInfo {
       width: calc(100% - 40px);
       margin-left: 10px;
       float: left;
       display: block;
   }






   .ofsTable {
       width: 100%;
       margin-bottom: 20px;
   }

   td {
       padding: 10px;
   }

   tr:nth-child(odd) {
       background-color: #333333;
   }

   .tIntro {
       color: #ccb555;
       font-weight: 900;
   }

   .tableSort {
       width: 50%;
       float: right;
   }

   .tableTitle {
       width: 50%;
       float: left;
   }



   /* Login */

   .login {
       background-image: url(bg3.jpg);
       background-size: cover;
       width: 100%;
       float: left;
       height: 100vh;
       overflow: hidden;
   }

   .loginWindow {
       width: 100%;
       max-width: 320px;
       height: auto;
       color: #ffffff;
       background: #222222;
       box-shadow: 5px 5px 10px #191919,
           -5px -5px 10px #111111;
       border: 1px solid #444444;
       margin: 15px 0;
       align-items: center;
       border-radius: 20px;
       position: absolute;
       top: calc(50vh - 210px);
       left: calc(50vw - 160px);
       padding: 30px;

   }

   .hLogin {
       font-size: 28px;
       font-family: freight-text-pro, serif;

       display: block;
       padding: 0px 0 20px 0;
       text-align: center;

   }

   .labelLogin {
       display: block;
       font-size: 13px;
       color: #999999;
       margin: 0 0 15px 0;
       text-align: center
   }

   .textinputLogin {
       display: block;
       margin: 0 0 30px 0;
       padding: 10px 20px;
       font-size: 20px;
       width: 100%;
       border-radius: 50px;
       background: #303030;
       box-shadow: inset 5px 5px 6px #232323,
           inset -5px -5px 6px #3d3d3d;
       border: none;
       color: #ffffff;
       border: 1px solid #333333;
       outline: none;

   }

   .logincta {
       width: 100%;
       border-radius: 100px;
       background: black;
       float: left;
       font-size: 18px;
       margin: 20px 0 20px 0;
       border: 2px solid #ccb555;
       text-align: center;
       color: #ffffff;
       padding: 10px
   }



   /* Step by step */

   .sign {
       width: 100%;
       font-size: 30px;
       color: #ccb555;
       background-color: #222222;
       padding: 10px 20px 0 20px;
       border: none;
       font-family: 'Homemade Apple', cursive;
       outline: none;
   }

.sbsLabel, .sbsInput{
    display: block;
    width:100%;
}

.sbsLabel{
    margin: 0 0 5px 0;
    color: #e1e1e1;
}
.sbsInput{
    padding: 10px;
    background: #222222;
    border:1px solid #666666;
    color: #ffffff;
    margin: 0 0 20px 0;
        font-size: inherit;
    font-family: inherit;
}
.sbsTextarea{
    min-height: 110px;
    font-size: inherit;
    font-family: inherit;
}

#myID{
    border-radius: 100px;
    border:2px solid #e1e1e1;
    background-color: black;
    padding: 10px;
}
#myID button{
    background: black;
}

.sbsDate{
    width:calc(100% - 40px) !important;
    display: inline-block;
    float: left;
}
.fa-calendar-alt{
    float: left;
    width:40px;
    text-align: center;
    font-size: 22px;
    padding: 7px 0 0 0;

}

.fa-calendar-alt:hover{
    cursor: pointer;
    color: #ccb555;
}

.sbsAddPerson{
    width:250px;
    background-color: black;
    border-color: #ccb555;
}

.bq, .xe{
    display: inline-block;
}

.xe:hover, .qb:hover{
    opacity: .8;
    cursor: pointer;
}

.qb{
    width:245px;
    margin-right: 20px;
}


/* Custom Tick */
.tickboxes{
    margin: 30px 0;
}


.tickbox {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
    padding-top: 3px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

.tickbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
        background: #222222;
        border:1px solid #666666;
}

.tickbox:hover input ~ .checkmark {
  background-color: #ccc;
}

.tickbox input:checked ~ .checkmark {
  background-color: #558384;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.tickbox input:checked ~ .checkmark:after {
  display: block;
}

.tickbox .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


.save {
    text-align: center;
    margin: 20px 0 200px;
    float: left;
    width: 100%;
}

.save a {
    color: #ccb555;
    border-bottom: 2px solid #ccb555;
}

#message{
    width:100%;
    float: left;
    color: red;
    font-size: 12px;
}