.nav li a{color:white;
      margin-top:5px;}
.nav li a.shortname{
  background-color: white;
    color: black;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin: 5px 0px;
    padding: 8px 0px 0px 14px;

}
.sidebar .sidebar-list{
position: absolute;
    top: 8%;
    left: 40px;
}
.navbar.sidebardf {
    border: 0;
}
.sidebar .navbar-nav li a{
  color: white;
    border-bottom: 1px solid #959696;
}
.form{
  width: 79%;
    border: 1px solid lightgray;
    padding: 40px;
}
#alertBox{
  display: none;
    position: absolute;
    left: 26%;
    top: 58px;
    z-index: 99;
   
   
}
.content-box{
  width: 98%;
    border: 1px solid lightgray;
    padding: 40px;
}
#alertBox .success{
  box-shadow: 0px 0px 15px #00000042;
    
    color: white;
    background: green;
    padding: 10px 5px;
    font-size: 15px;
}
#alertBox .fail{
   box-shadow: 0px 0px 15px #00000042;
  color: white;
    background: red;
    padding: 10px 5px;
    font-size: 15px;
}

#confirmBox{
position: fixed;
    left: 40%;
    top: 100px;
    background: white;
    box-shadow: 0px 0px 15px #0000003b;
    z-index: 99;
    padding: 11px;
    width: 30%;
    text-align: center;
    height: 150px;
    display: none;
}
#confirmBox p{
color: #dc3545;
    font-size: 20px;
    position: relative;
    top: 15px
}
#confirmBox button{
border: 0px;
    margin: 30px;
    padding: 2px 30px;
    background: #dc3545;
    color: white;
}
 #hide i{
    font-size: 25px; margin: 10px 0px
  }
  .description li a{
    padding: 0px 0px;
    margin: 0px;
    color: #ffc0c6;
    border-bottom: 0px !important;
  }
  .sidebar-list i {
  font-size: 15px;
  }
  .sidebar .description.navbar-nav li a{
   color: #cccccc;
   position: relative;
    left: -5px;
    margin-bottom: 8px;
  }
  label::after{
    color: #ffffff !important;
    background-color: #dc3545 !important;
  }
  .accordion-content .description {
   
    color: #4f4f4f;
    cursor: pointer;
    padding: 5px 5px 5px 25px;
    max-width: 100%;
    outline: none;
    font-size: 14px;
    margin: 4px 0px;
    position: relative;}
.accordion-content .description p {
   margin:0px;
   color:gray;}
.accordion-content .title {
    margin: 2px 0;
    font-weight: 400;
    padding: 10px;
    cursor: pointer;
    font-size: 15px;
    color: #888;
    border-radius: 10px;
}
.accordion-content .title:hover,.accordion-content .title:active {
    color: #fff;
    background: #2C3344;
    padding: 10px;
}
.accordion-content.show .description{
  display:block;}
.accordion-content.hide .description{
  display:none;}
.accordion-content.hide .title::after{
 content: " ";
   
   
    padding: 0px 0px;
    font-size: 22px;
   
    font-size: 19px;
    font-weight: normal;
    /* float: right; */
   position: absolute;
    top: 6px;
    right: -47px;}
.accordion-content.show .title::after{
 content: "  ";
   
    
    padding: 0px 0px;
    font-size: 22px;
  
    font-size: 19px;
    font-weight: normal;
  
   position: absolute;
    top: 6px;
    right: -47px;
}


body {
  background-color: #DDE5ED!important;
}
.sidebar {
    background-color: #0F172A!important;
}
.main-page {
    min-height: 400px;
    padding: 10px 30px;
    border-radius: 0px;
}

@media (max-width: 480px) {

    .main-page {
        min-height: 400px;
        padding: 0px 10px!important;
        border-radius: 0px;
    }

}

.sidebardf {
    background-color: #0F172A!important;
    display: inline-block;
    border-radius: 10px;
    width: 100%;
}
.sidebardf .btn-link:focus, .sidebardf .btn-link:hover {
    text-decoration: none;
    background-color: transparent;
    color: #fff!important;
    outline: none;
}

#site-logo img {
    max-width: 200px;
    width: 100%;
}


#closebutton {
  float: right;
  padding: 0 5px;
  font-weight: bold;
}
#closebutton:hover {
  color: #fff;
  text-decoration: none;
}

.btn-primary2 {
    color: #fff;
    background-color: #0E286B;
    border-color: #0E286B;
}
.btn-primary:hover {
    color: #fff;
    background-color: #FF8A00;
    border-color: #FF8A00;
}
.navbar-nav a.nav-link:hover,.navbar-nav a.nav-link:active {
    color: #fff;
    text-decoration: none;
    background: #0E286B;
    padding: 10px;
    border-radius: 6px;
}

.navbar-nav a.nav-link {
    color: #0E286B;
    text-decoration: none;
    padding: 10px;
    border-radius: 6px;
}

.col-sm-12.top-header {
    background: #FFF;
    padding: 10px 0 10px 0;
    position: fixed;
    top: 0;
    z-index: 999;
    box-shadow: 1px 1px 5px #555;
    width: 100%;
}

.top-header #navbar {
    max-width: 1120px;
    margin: 0 auto;
}
.top-header #navbar ul.nav a.nav-link {
    padding:  10px 20px;
    margin: 0 2px;
}
a#new-event {
    background: #0E286B;
    color: #fff;
}
a#new-event:hover, .btn-primary:hover {
    color: #fff;
    background-color: #FF8A00;
    border-color: #FF8A00;
}

@media (max-width: 768px) {
    div#top-menu, div#site-logo {
        text-align: center;
    }
    .top-header #navbar ul.nav a.nav-link {
        padding:  4px 10px;
    }
    div#top-menu {
        padding-top: 5px;
    }
}
.text-success {
    color: #0E286B!important;
}
.container-fluid.main-body {
    max-width: 1200px;
    width: 100%;
    margin-bottom: 20px;
    margin-top: 20px;
    min-height:  660px;
}

@media (max-width: 768px) {
    .container-fluid.main-body {
        max-width: 1200px;
        width: 100%;
        margin-bottom: 20px;
        margin-top: 100px;
    }
}

.col-sm-12.footer {
    background: #0E286B;
    text-align: center;
}
.footer ul {
    list-style-type: none;
    padding-left: 0;
}
.footer ul li {
    display: block;
    margin: 10px;
    color: #dedede;
}
.footer ul li a {
    color: #dedede;
    padding: 10px;
    margin: 0 2px;
    border-radius: 5px;
    text-decoration: none;
    font-size:  13px;
}
.footer ul li a:hover {
    color: #fff;
    background: none;
    text-decoration: none;
}
.form-control {
    margin: 0px 0px 3px 0px!important;
}
.show-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + .75rem);
    background-image: url("https://dev1.tekniquestudios.co.za/frontendassets/images/validate-cross.png");
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
.show-invalid.form-control:focus {
    border-color: #dc3545;
    padding-right: calc(1.5em + .75rem);
    background-image: url("https://dev1.tekniquestudios.co.za/frontendassets/images/validate-cross.png");
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    box-shadow: 0 0 10px 0.2rem rgb(220 53 69 / 25%);
}
.show-valid {
    border-color: #28a745;
    padding-right: calc(1.5em + .75rem);
    background-image: url("https://dev1.tekniquestudios.co.za/frontendassets/images/validate-tick.png");
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
.show-valid:focus {
    border-color: #28a745;
    padding-right: calc(1.5em + .75rem);
    background-image: url("https://dev1.tekniquestudios.co.za/frontendassets/images/validate-tick.png");
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    box-shadow: 0 0 10px 0.2rem rgb(40 167 69 / 25%);
}
.page-heading {
    font-weight: 600;
    font-family: Helvetica, Arial, sans-serif;
}
.empty-div {
    height: 200px;
}
@media (max-width: 1024px) {
    .empty-div {
        height: 10px;
    }
}

.form-error {
    /*position: absolute;*/
    width: fit-content;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: .25rem .5rem;
    margin-top: .1rem;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #fff;
    background-color: rgba(220,53,69,.9);
    border-radius: .25rem;
}
.form-group, .form-row {
    display: flow-root;
}
.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
    margin: 4px 0!important;
}
span.input-group-addon {
    padding: 0px 4px!important;
    height: 0px!important;
    margin: 0px!important;
}
span.input-group-addon img {
    width: 24px;
    height: 24px;
    max-height: fit-content;
    line-height: 24px;
    margin: 2px 2px;
}
.social-icon-field {
    top: 1px;
    padding: 10px;
}
.footer2 {
    background:  #fff;
}
span.required {
    color: #ff0000;
}
.custom-switch .custom-control-input, .form-check .form-check-input {
    margin: 6px 4px;
    width: 20px;
    height: 20px;
    vertical-align: bottom;
}
.custom-switch label, .form-check label {
    vertical-align: text-bottom;
}
hr.hr2 {
    margin: 5px 0px 10px 0px!important;
    border-top: 1px solid #0E286B;
}

.card {
    position: relative;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: none!important;
    background-clip: border-box;
    border: 0;
    border-radius: 0px;
    overflow: hidden;
}
.card-header:first-child {
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}
.card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125);
}

.collapse.show {
    display: block;
}
.collapse {
    display: none;
}
.card-body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
    background: #fff;
}
.navbar span.glyphicon {
    margin-right: 10px;
}
.mb-0 {
    margin: 0;
}

img.icon-glyph {
    margin: 5px;
}

#headingZero .mb-0 a.btn {
    color: #337ab7;
}
#headingZero .mb-0 a.btn.white {
    color: #fff;
}

.sidebardf ul {
    list-style-type: square;
}

.sidebardf #accordion .card-header button[aria-expanded="true"] {
    color: #fff;
    width: 99%;
    text-align: left;
    background: #2c3344;
    padding: 10px;
    border-radius: 6px;
    outline: none;
}
.sidebardf #accordion .card-header button[aria-expanded="false"] {
    color: #888;
    width: 99%;
    text-align: left;
    background: none;
    padding: 10px;
    border-radius: 6px;
    outline: none;
}
.sidebardf #accordion .card-header button:after {
    font-family: 'Glyphicons Halflings';
    content: "\e114";
    float: right;
    color: grey;
}
.sidebardf #accordion .card-header button[aria-expanded="true"]:after {
    color: #fff;
}

.sidebardf .btn-link:focus:after, .sidebardf .btn-link:hover:after {
    color: #fff!important;
}
#accordion .card-body a.active {
    text-decoration: none;
    color: #000;
}

.card:last-child .card-body {
    border-bottom-left-radius:  10px;
    border-bottom-right-radius:  10px;
}
input[type=checkbox], input[type=radio] {
    width: 20px!important;
    height: 20px!important;
}
.footer-left, .footer-right, .footer-center {
    padding: 20px;
}
.footer-right {
    text-align: right;
}
.footer-left {
    text-align: left;
}
.footer-center {
    text-align: center;
}
.footer-right img {
    background: #fff;
    border-radius: 6px;
    padding: 5px;
    margin: 10px;
}
@media (max-width: 768px) {
    .footer-left, .footer-right, .footer-center {
        padding: 10px;
    }
    .footer-right {
        text-align: center;
    }
    .footer-left {
        text-align: center;
    }
    .footer-center {
        text-align: center;
    }
}
div#contactmessage {
    background: green;
    color: #fff;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
}

div#headerbanner {
    margin: 10px 0 30px 0;
}
img.eventlogoimage {
    width: 100%;
    max-width: 200px;
    max-height: 200px;
    border-radius: 10px;
}

#eventlogo {
    vertical-align: top;
    display: inline-block;
    margin: 0;
    padding: 0;
}
#headertitle {
    vertical-align: top;
    display: inline-block;
    margin: 0;
    padding: 0 15px;
}
#headertitle h2 {
    margin: 10px 0;
    font-weight: 900;
}
div#eventheaderaddress, div#eventheaderdate {
    padding: 10px;
    font-size: 13px;
}
div#eventwelcome {
    margin: 0px 0px;
    padding: 0 15px;
    font-size: 15px;
}

.eventsidebar {
    font-size: 13px;
    margin: 0px 0px 20px 0;
    padding: 0 15px;
}
.headingdiv {
    background: #efefef;
    padding: 10px;
    border: 1px solid #ccc;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.sidebarinfo {
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 30px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background: #fff;
}

div#headerbanner {
    margin: 10px 0 30px 0;
    width: 100%;
}
img.headerimage {
    width: 100%;
    border-radius: 10px;
}
.form-error2 {
    width: fit-content;
    top: 100%;
    z-index: 5;
    max-width: 100%;
    padding: .25rem .5rem;
    margin-top: .1rem;
    font-size: 13px;
    line-height: 1.5;
    color: #fff;
    background-color: rgba(220,53,69,.9);
    border-radius: .25rem;
}
#eventwelcome h3 {
    margin-top: 0;
    font-weight: bold;
}

table.ticketregistration th, table.ticketregistration td {
    border-top: 0!important;
    vertical-align: middle!important;
    padding:  2px!important;
}

.ticketregistration th {
    max-width: 75px;
}

.panel-heading.odd, .panel-body.odd {
    background: #eeedfe;
}
.panel-heading.even, .panel-body.even {
    background: #ddefff;
}

.stepscompleted {
    width: 12px;
    height: 12px;
    padding: 0;
    margin: 0px 0px 3px 0px;
}

@media (max-width: 768px) {
    .ticketregistration th, .ticketregistration td {
        max-width: 100%;
        width:  100%;
        display: block;
    }
    .ticketregistration td {
        margin-bottom: 10px;
    }
}
div#checkoutthankyoumessage p {
    font-size: 16px;
}


.paymentstatus.paid {
    background: #2E8B57;
    color: #fff;
}
.paymentstatus.unpaid {
    background: #DAA520;
    color: #fff;
}
.paymentstatus.cancelled {
    background: #FF0000;
    color: #fff;
}
.paymentstatus {
    border-radius: 5px;
    padding: 0px 5px;
    width: fit-content;
    text-align: center;
}


span.linethrough {
    text-decoration: line-through;
    color: #cc0000;
    font-size: 100%;
}






@media (max-width: 480px) {
    #biotable td {
        display: block!important;
    }
    img.headerimage {
        width: 100%!important;
        border-radius: 0px!important;
    }
    div#headerbanner {
        margin: 10px 0 30px 0!important;
        width: 100%!important;
    }
    div#eventwelcome {
        margin: 0px 0px!important;
        padding: 0 0px!important;
        font-size: 12px!important;
    }
    .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
        position: relative;
        min-height: 1px!important;
        padding-right: 0px!important;
        padding-left: 0px!important;
    }
    .main-page {
        min-height: 400px!important;
        padding: 0px 10px!important;
        border-radius: 0px!important;
    }

    .table {
        width: 100%!important;
        max-width: 100%!important;
        margin-bottom: 20px!important;
        font-size: 12px!important;
    }
    form#tickettable {
        padding: 0px!important;
        background: #ffffff!important;
        border-radius: 10px!important;
    }
    .ticketregistration td {
        width: 99%!important;
    }
    .btn-group-lg>.btn, .btn-lg {
        border-radius: 0px!important;
    }

}