body {
    min-height: 500px;
}
#ttt-logo {
    padding: 8px;
    height: 40px;
}
.copyright {
    color: white;
}
.copyright a,
.copyright a:visited {
    color: #e0e0ff;
    font-weight: bold;
}

div.main-container {
    background:white;
    border: 5px solid white;
    border-radius: 4px;
}

div.row {
    margin-left: 0px;
    margin-right: 0px;
}

.checkbox-label,
.row label {
    /* vertical-align: middle; */
    margin-top: 5px;
    margin-bottom: 0px;
    opacity: .8;
}

/*--------NAVBAR COLOR-----------------------*/
.navbar-default {
    background: #e2d9ce;
}


.navbar-default,
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border: none;
}

.container>.navbar-header {
    margin-left: 0px;
}
.navbar-toggle,
body #site-navbar .navbar-header {
     margin-right: 0px;
}

div.container {
    width: auto;
    padding: 0px 30px 0px 10px;
}

.logo1 img {
    height: 45px;
}

#site-navbar {
    max-height: 50px;
 }


.ttt-logo-mobile {
    margin-top: 5px;
}

#site-navbar .navbar-header {
    margin-right: 8px;
}

#clubber-nav {
    margin-bottom: 15px;
}

input[type=radio], input[type=checkbox] {
    height: 25px;
    width: 25px;
    /*-moz-transform: scale(1.7); no longer needed*/
}

table.agenda table.skipped {
    padding: 5px;
    border-radius: 4px;
    margin: 0px auto 10px;
    width: auto;
}

body table.sections .sectbook {
    font-size: 14px;
    color: #B16655;
    font-style: normal;
    background: #E8D2CD;
    font-weight: bold;
}

td.box.open {
    padding: 8px;
}

td.box.open input[type=checkbox] {
    vertical-align: middle;
}
td.box.open .step_label {
    padding-right: 3px;
    display: block;
    font-size:125%;
    vertical-align: text-top;
    opacity: .6;
}
table.sections td.section {
    font-size: 120%;
}

/*body table.agenda {
    margin-left: auto;
    margin-right: auto;
}*/

.form-control {
    font-size: 18px;
    padding: 0px 12px;
}

.bs-list-item,
.bs-list-item a {
    font-size: 110%;
}

body .table-striped>tbody>tr:nth-child(odd)>td,
body .table-striped>tbody>tr:nth-child(odd)>th {
    background-color: rgba(190,190,190,.1);
}
body .table-hover>tbody>tr:hover>td,
body .table-hover>tbody>tr:hover>th,
body .table-hover>tbody>tr:nth-child(odd):hover>td,
body .table-hover>tbody>tr:nth-child(odd):hover>th,
body .table-hover>tbody>tr:nth-child(even):hover>td,
body .table-hover>tbody>tr:nth-child(even):hover>th  {
    background-color: rgba(240,240,240,.5);
}

.closed {
    background-color: rgba(23, 211, 19, 0.20);
    opacity: .6;
}
.closed a {
    color: rgba(100,100,100,.7);
}

@media (max-width: 400px) {
    div.main-container {
        padding-left: 0px;
        padding-right: 0px;
    }
    .form-horizontal .form-group {
        margin-left: 0px;
    }
}


table.sections td.box.open.step-extra {
    font-size: 80%;
}

.programmer-box {
    background: #ebd3ff;
    border: 1px solid #c688ee;
    margin: 5px;
    padding: 5px;
}
.programmer-box:before {
    content: 'PGMR';
    font-size: 8px;
    float: right;
}


.admin-only,
.staff-only,
.sec-only,
.pgmr,
.pgmr-only {
    padding: 0px 4px 4px;
    margin: 4px;
    position: relative;
    font-size: 90%;
    z-index: 2;
}
.pgmr,
.pgmr-only {
    background: #dcd1df;
}
.admin-only {
    background: #fff2fe;
    border-color: #f1dcef;
}
.btn.admin-only {
    color: #902f87;
}
.sec-only {
    background: #fff0ed;
}
.staff-only {
    background: #eee8ff;
}
.pgmr::before,
.pgmr-only::before,
.admin-only::before,
.sec-only::before,
.staff-only::before
{
    /*position: absolute;
    top: 0;
    right: 0;*/float:right;
    padding-left: 2px;
    font-size: 10px;
    font-weight: bold;
    color: rgba(0,0,0,.25);
    vertical-align: top;
}
.pgmr::before,
.pgmr-only::before {
    content: 'PGMR';
}
.admin-only::before {
    content: 'Admin ';
}
.sec-only::before {
    content: 'SECRETARY ';
}
.staff-only::before {
    content: 'Staff ';
}



/**** Full-site Bootstrap updates *******************************************/
/*========= Large ==============================*/
@media only screen and (min-width : 768px) {
    .ttt-small {
        display: none;
    }
    body {
        padding-top: 0px;
    }
}
/*========= Small ==============================*/
@media only screen and (max-width : 767px) {
    .ttt-large {
        display: none;
    }
    .grid-view table.items.table tr.filters {display: none}
}

/*========= Header ===========================*/
.small-header#header_and_menu #logo,
.small-header#header_and_menu #logo .logo1 img,
.small-header#header_and_menu #ttt-logo,
.small-header#header_and_menu #awana-logo {
    height: 40px;
    font-size: 90%;
}
.small-header#header_and_menu #ttt-logo {
    width: 180px;
}
.small-header#header_and_menu #awana-logo {
    width: 100px;
    margin-left: 20px;
}
.small-header #logo_title {
    font-size: 12px;
}

#mainmenu-x {
    position: relative;
}
#header_and_menu .clubber-search-shortcut {
    position: absolute;
    right: 10px;
    top: 0px;
    font-size: 24px;
}
.clubber-search-shortcut {
    color: rgba(255,255,255,.9);
    font-size: 28px;
    vertical-align: middle;
    margin: 0px 4px;
    cursor: pointer;
}
.clubber-search-shortcut:hover {
    color: rgba(0,0,0,.3); /*#2a6496;*/
}


#header_and_menu #header {
    overflow: hidden;
    padding: 5px 20px;
    min-height: 58px;
}
#header_and_menu #logo {
    font-size: 200%;
    text-align: center;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
#header_and_menu #logo .logo1 {
    float: left;
}
#header_and_menu #logo .logo1 img {
    height: 80px;
    vertical-align: top;
}
#header_and_menu #logo_title {
    color: white;
}
#header_and_menu #awana-logo {
    height: 45px;
    width: 140px;
    margin-left: 10px;
    display: inline-block;
    background: url(../images/awana-clubs-logo.png);
    background-size: contain;
    background-repeat: no-repeat;
}
#header_and_menu #ttt-logo {
    height: 45px;
    width: 200px;
    display: inline-block;
    background: url(../images/ttt_logo.png);
    background-size: contain;
    background-repeat: no-repeat;
}
#header_and_menu #ttt-logo:hover {
    background-color: rgba(188, 210, 249, 0.33);
}

/*========= Menu Bar ===========================*/
div#nav-bar {
    background: transparent; border:none;
}
ul#nav > li.parent.active,
ul#nav > li {
    margin-right:2px;
    background: rgba(100,100,100,.6);
}
ul#nav > li {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}
ul#nav > li.parent.active {
    background: rgba(255,255,200,.5)
}
ul#nav li.active li a {
    color: #2f2f2f;
}
#nav a {
    padding: 0 10px;
}

/*======= Bootstrap =====================*/
.filters {
    background: #d9e9ff; /* #dfdee3; /*#e6e1ff;*/
}
tr.filters select.form-control {
    min-width: 0;
}
tr.filters td:first-child{
    position: relative;
}
tr.filters td:first-child:before {
    content: 'FILTERS';
    font-size: 9px;
    position: absolute;
    opacity: .7;
    top: -4px;
    left: 0px;
}
tr.filters td {
    padding: 3px !important;
    vertical-align: middle !important;
    border: 0px;
}
tr.filters .btn {
    padding: 2px;
}
tr.filters .form-control {
    padding: 0px 3px;
    font-size: 14px;
    height: 26px;
    border: 0;
    border-radius: 0;
}
body div.grid-view table.items th {
    background: transparent;
    /*text-align: center;*/
}
body {
    overflow-x: visible;
}
h1 {font-size: 21px;}
h2 {font-size: 19px;}
h3 {font-size: 18px;}
h4 {font-size: 16px;}
h5 {font-size: 14px;}
h6 {font-size: 14px;}
h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 0px;
}
body .indent {
    margin-left: 25px;
}
.form-group {
    margin-bottom: 0px;
}
label {
    color: #555;
    font-weight: normal;
}

@media (min-width: 768px) {
    div.row.form-inline,
    div.row.form-inline-always {
        padding-top: 4px;
    }
}

.form-inline-always .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

.modal-header .close span {
    font-size: 30px;
}
.nav>li>a {
    padding: 10px 10px;
}

.errorSummary {
    color: red;
    font-weight: bold;
}
.form-data {
    font-weight: bold;
    display: inline-block;
}
.radio input[type=radio], .radio-inline input[type=radio], .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox] {
    margin-right: 4px;
}

/*Default tabs*/
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
    background-color: white;
    font-weight:bold;
}
.nav-tabs>li>a {
    background: #f2f2f2;
    border: 1px solid #dde;
}

/*Alt tabs (connected to contents) */
.htabs.alt .nav-tabs>li.active>a, .htabs.alt .nav-tabs>li.active>a:hover, .htabs.alt .nav-tabs>li.active>a:focus {
    background-color: #fafae8;
    border: 1px solid #ddd;
    border-bottom: none;
}
.htabs.alt .nav-tabs>li>a {
    background-color: white;
    border: none;
}

div.container.body-container {
    padding: 0px 10px;
}

#site-navbar.navbar-default {
    background: #55a075;
}
.navbar-default .navbar-toggle .icon-bar {
    background: rgba(255, 255, 255, .5);
}
.navbar-default .navbar-toggle {
    border-color: rgba(255, 255, 255, .5);
    border-width: 2px;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: rgba(250,250,250,.4);
}

.btn:hover, .btn:focus { /* default button*/
    color: black;
    opacity: .60;
}
.btn.btn-primary:hover, .btn.btn-primary:focus,
.btn.btn-danger:hover, .btn.btn-danger:focus,
.btn.btn-warning:hover, .btn.btn-warning:focus,
.btn.btn-info:hover, .btn.btn-info:focus,
.btn.btn-success:hover, .btn.btn-success:focus { /* default button*/
    opacity: 1;
}

.btn-light {
    background: rgba(255,255,255,.5);
    border: 1px solid rgba(0,0,0,.12);
}
.btn-light-green {
    background: #deffcb;
    color: #3a8011;
    border-color: #cdc;
}
.btn-gray {
    background: rgba(0,0,0,.1);
    border: 1px solid rgba(0,0,0,.2);
}

.dropdown-menu>li>a.btn {
    color: white;
}
.dropdown-menu>li>a.btn:hover,
.dropdown-menu>li>a.btn:focus {
    color: black;
}
.dropdown-menu>li>a.btn.btn-success:hover,
.dropdown-menu>li>a.btn.btn-success:focus {
    background: #47a447;
}

.form-control[type=number] {
    padding: 0px;
    padding-left: 12px;
}

.form-group .btn[type=submit],
.row .btn[type=submit]{
    margin-top: 8px;
}

/*------- <= 767px--------------*/
@media only screen and (max-width : 767px) {
    body div.form-inline-always label {
        display: block;
    }
    div .col-xs-12 {
        padding: 0px;
    }
    .xs-indent {
        margin-left: 25px;
    }
}


/*------- <= 500px--------------*/
@media only screen and (max-width : 500px) {
    div.container.body-container {
        padding: 0px;
    }
    div.main-container {
        border-radius: 0px;
    }
    div#content {
        padding: 10px 2px;
    }
}


/****** Mobile Navbar *******************************************************/
nav.navbar-default .navbar-toggle {
    margin-top: 6px;
    margin-right: 8px;
    border-width: 0px;
}
nav.navbar-default .navbar-toggle:focus {
    background: inherit;
}
.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 3px;
    border-radius: 1px;
}


.has-push-left #left-menu-container {
    display: block;
}
#left-menu-container{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    z-index: 1500;
    background: rgba(0,0,0,.5);
}
.has-push-left #left-mask {
    display: block;
}
.has-push-left #app-content {
    -webkit-transform: translateX(250px);
    transform: translateX(250px);
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s;
    position: fixed;
    top: 0px;
}

@media (min-width: 768px) {
    body.has-push-left #left-menu-container {display:none}
    body.has-push-left #app-content {
        position: static;
        top: auto;
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
}


#left-mask {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0,0,0,.5);
}

#site-navigation {
    position: static;
    overflow: visible;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    width: 250px;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 250;
    background-color: #2b3837;
    color: #fff;
    transition: transform .3s,-webkit-transform .3s;
    border-right: 1px solid #455857;
}
body div#site-nav-bg,
body div#main-navbar {
    margin-left: 0px;
    background-color: #2b3837;
    padding-bottom: 25px;
}

#main-navbar .navbar-nav {
    margin: 0px;
}
#main-navbar .nav>li>a {
    color: #d9dede;
    font-weight: bold;
    font-size: 18px;
}
#main-navbar .dropdown-menu>li>a {
    font-weight: normal;
    color: white;
    font-size: 16px;
}
#main-navbar .nav .open>a,
#main-navbar .nav .open>a:hover,
#main-navbar .nav .open>a:focus
{
    background: inherit;
}
#main-navbar li.dropdown.open ul.dropdown-menu
{
    background-color: rgba(230,250,240,.3);
}
#main-navbar .caret {
    color: #e89211;
}
#main-navbar .nav>li>a:hover,
#main-navbar .nav>li>a:focus {
    text-decoration: none;
    background-color: rgba(255,255,255,.3);
}
#main-navbar .nav>li li>a:focus {
    text-decoration: none;
    background: inherit;
}
#main-navbar .nav>li li>a:hover {
    text-decoration: none;
    background-color: rgba(255,255,255,.2);
}
#main-navbar .nav>li li li>a {
    padding-left: 40px;
    color: #eee;
    font-size: 15px;
}
#main-navbar .dropdown-menu>.active>a,
#main-navbar .dropdown-menu>.active>a:hover,
#main-navbar .dropdown-menu>.active>a:focus {
    background: transparent;
}
#app-content {
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s;
}
/****************************************************************************/


.clubber-form {
    background-color:#f9f9e7;
    border-radius: 5px;
    padding: 7px; margin: 25px 2px; border: 1px solid #f9f9e7;}

@media (max-width: 450px) {
    .hidden-tiny {
        display: none;
    }
}

body div.form div.error label,
body div.form label.error,
body div.form span.error {
    color: red;
    background: none;
}
.form-control.error {
    color: red;
    background: #ffff96;
}
.help-inline,
.help-block,
.has-error .help-block {
    color: red;
    font-weight: bold;
}
/*.help-inline,*/
.errorSummary {
    background: #ffe6dd;
    padding: 5px 8px;
}
.modal .help-inline {
    background: none;
}

table.agenda td.right {
    width: 100%;
}
.agenda .all-books.sections {
    display: block;
}

.navbar-header div#logo_title {
    color: white;
    vertical-align: middle;
    line-height: 1;
    text-align: center;
}

#site-navbar div.container {
    padding: 0px 10px 0px 5px;
}

ul#nav li.updates-tab-highlight,
#main-navbar ul.nav li.updates-tab-highlight {
    margin-right: 2px;
    background: yellow;
    border-color: yellow;
}
ul#nav li.updates-tab-highlight a,
#main-navbar ul.nav li.updates-tab-highlight a{
    color: black;
    font-weight: bold;
}

.day-note {
    background:#d1f1d1;
    display: block;
    padding-left: 24px;
    border-radius: 5px;
    margin-left: 5px;
}
.day-note:before {
    content: 'Note';
    font-size: 10px;
    color: #9ebb93;
    vertical-align: top;
    margin-right: 3px;
    margin-left: -24px;
}
.day-note a {
    margin: 0px 4px;
}

.mtg-container {
    background: #feffd4;
    padding: 2px 4px 4px 0px;
    margin-left: 5px;
    border-radius: 5px;
    border: 1px solid #f5f7a4;
}

.past .cal-info-col {
    opacity: .6;
}

.info-note {
    background: rgba(0,0,190,.05);
    font-style: italic;
    position: relative;
    padding: 15px 15px;
    font-size: 90%;
    border-radius: 5px;
    margin: 8px 0px;
}
.info-note:before {
    content: "\f05a";
    font-family: FontAwesome;
    font-style: normal;
    position: absolute;
    top: -2px;
    left: 2px;
    font-size: 16px;
    color: rgba(0,0,0,.4);
}
@media print {
    .info-note {display:none}
}
.info-note.page-doc {
    margin: 150px 5% 0 5%;
}
.info-note.page-doc img {
    margin-left: 2%;
    opacity: .8;
    max-width: 100%;
}


.content {
    position: relative;
}
.stick-right {
    position: absolute;
    right: 0px;
}
.stick-right-lower {
    position: absolute;
    right: 0px;
    margin-top: 10px;
}

.nav-tabs.nav>li.active>a,
.nav-tabs.nav>li>a {
    padding: 8px 8px;
    margin-right: 3px;
}
@media (max-width: 767px) {
    .nav-tabs.nav > li > a {
        padding: 8px 4px;
    }
}

.print-only {
    display: none;
}

.nowrap {white-space: nowrap}

#award-badge-holder .badge {
    background: orange;
    color: white;
    font-weight: bold;
}

span.section-award.fa-stack {
    font-size:.8em;
    opacity: .8;
    color: #CD7AE6;
}

div.step-mtg {
    display: inline-block;
    margin-left: 20px;
}
.step-mtg .table-striped>tbody>tr:nth-child(odd)>td {
    background: #f3f3f3;
}
.step-mtg .table-striped>tbody>tr:nth-child(even)>td {
    background: #e3e3e3;
}
.step-mtg table thead {
    font-style: italic;
}
.step-mtg table tbody td {
    padding: 0px 3px;
}

.negative-amount {
    color: #ba0000;
}
.is-new {
    font-weight: bold;
    color: black;
}
.is-new:before {
    content: 'NEW';
    font-size: 10px;
    background: #ffd17a;
    display: inline-block;
    margin-right: 3px;
    vertical-align: text-top;
    color: #825e09;
    padding: 0px 2px;
}
.mine {
    font-weight: bold;
    color: black;
}
.mine:before {
    content: 'MINE';
    font-size: 10px;
    background: #c7adff;
    display: inline-block;
    margin-right: 3px;
    vertical-align: text-top;
    color: #5c3ca9;
    padding: 0px 2px;
}

.grid-view table.items tr.inactive {
    background: #ddd;
    opacity: .85;
    color: #333;
    font-style: italic
}

.reply-count {
    font-size: 12px;
    font-weight: normal;
}

@media (max-width: 767px) {
    .alert.alert-mobile {
        display: inline-block !important;
        padding: 3px 8px;
        margin: -10px 5px 5px;
    }
}

h3 label {
    color: #888;
    font-size: 90%;
}

body .grid-view-loading,
body .list-view-loading
{
    background:url(../images/loading.gif) no-repeat;
    opacity: .5;
}

@media screen {
    .table-responsive {
        width: 100%;
        /*margin-bottom: 15px;*/
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: none;
    }
}


span.control-info {
    display: inline-block;
    vertical-align: top;
    margin-top:6px;
}
.control-info {
    font-size: 14px;
    font-style:italic;
    padding-left: 25px;
    margin-bottom: 5px;
    color: #7984bf;
}
.control-info span{
    padding: 0px 3px 2px;
    font-size: 14px;
    opacity: .7;
    font-style: normal;
}
.checkbox-label {
    vertical-align: top;
    padding-top: 8px;
    display: block;
    margin-top: 0px;
    padding-left: 0px;
    margin-left: 28px;
}
input.checkbox-left {
    float:left;
    margin-right: 3px;
}


.not-required {
    opacity: .8;
    font-style: italic;
    color: brown;
    font-size: 12px;
}

.has-value {
    background: #cafad3;
}

.alert.alert-sm {
    padding: 5px 10px;
}


.sort-link.asc::before {
    content: '\f0de';
    font-family: "FontAwesome";
    padding-right: 1px;
    float: left;
    color: #ffb300;
}
.sort-link.desc::before {
    content: '\f0dd';
    font-family: "FontAwesome";
    padding-right: 1px;
    float: left;
    color: #ffb300;
}
.sort-link .caret {display:none}

a.show-another, a:visited.show-another {color: #999}

.form-charge td.price,
.form-charge td.extended {text-align: right; padding-top: 6px;}

.form-charge td {vertical-align: top}


.table > thead > tr > th {
    padding-top: 0px;
}


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

div.step.lastyear {background-color: #ddd; color: #999}

.release_text {
    /*margin: 5px 0px; background-color: #ffffb3; padding: 3px 6px; border: 1px solid #eec;*/
    font-size: 90%;
}
.household-form {
    position:relative;
    background-color: #e1f3ef;
    border-radius: 5px;
    padding: 7px;
    margin: 2px;
    border: 1px solid #e1f3ef;
    min-height: 40px;
}
.household-form .sticky-header {
    background-color: #e1f3ef;
}

span.required {color: red}

.staff-only .release {
    background: none;
    border: none;
}
.release.alert {
    margin: 0;
    margin-top: 4px;
    margin-bottom: 4px;
}
.release {
    background:#fffff6;
    border-color: #fffff6;
}

.is-leader .only-clubbers,
.is-clubber .only-leaders {display:none}


.form-control {
    border: 1px solid #f4f4f4;
    border-bottom-color: #e0e0e0;
    box-shadow: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

body div.form-inline .form-group label {
    text-align: left;
}
body div.form-inline label {
    width: 120px;
    text-align: right;
}
@media only screen and (max-width: 767px) {
    body div.form-inline label {
        width: auto;
        text-align: left;
    }
}

div.form-inline .control-info span {
    margin-left: 110px;
}
div.form-inline-always .control-info span {
    margin-left: 40px;
}

.width-auto {
    width: auto;
}

.info-ctl {
    font-weight: bold;
    display: inline-block;
    margin-top: 5px;
    vertical-align: middle;
}

.alert .table {
    margin-bottom: 0px;
}
.d-inline-block {
    display: inline-block;
}

.po-preparing {
    background: #fbc6ff;
}
.po-ordered {
    background: #ffffc6;
}
.po-complete {
    background: #d7e7d7;
    color: #729072;
}
.po-canceled {
    background: #ddd;
    opacity: .65;
    color: #555;
    font-style: italic
}

input[type=number].form-control {
    width: auto;
    min-width:120px;
}
input[type=number].event-quantity.form-control {
    min-width: 60px;
    width: 60px;
}

input[type=date].form-control,
select.form-control {
    width: auto;
    min-width:200px;
    max-width:100%;
}

.ui-autocomplete li {
    font-size: 18px;
    padding: 2px 0;
}

.summary {
    font-size: 13px;
    opacity: .7;
    padding-left: 25px;
}

.form-control::placeholder {
    color: transparent;
}
.show-placeholder::placeholder {
    color: #999;
}

.date-details {
    opacity:.5;
    font-size: 12px;
}

div.step {margin-right: 4px;}
/*******************/
tr.section-line-bonus .section {
    opacity: .8;
    background: rgb(239, 189, 255);
    color: #999;
    font-weight: bold;
}
.sections div .box.open.hasChecked.step-bonus {
    background: rgba(235, 153, 255, 0.8);
}
div.step-bonus  {
    background: rgba(241, 214, 255,.3);
}
div.step-bonus .step_label {
    color: rgba(205, 122, 230, 1);
}
/*******************/
tr.section-line-silver .section {
    opacity: .8;
    background: #e7e7e7;
    color: #999;
    font-weight: bold;
}
.sections div .box.open.hasChecked.step-silver {
    background: #aab;
}
div.step-silver  {
    background: #f5f5f5;
}
div.step-silver .step_label {
    color: #777;
}
/*******************/
tr.section-line-gold .section {
    opacity: .8;
    background: #ffe843;
    color: #B5A114;
    font-weight: bold;
}
.sections div .box.open.hasChecked.step-gold {
    background: #bb9f2e;
}
div.step-gold  {
    background: rgba(249, 245, 191, .5);
}
div.step-gold .step_label {
    color: rgb(202, 148, 11);
}


xli li.parent > a:before {
    content: '\f0da';
    font-family: FontAwesome;
    float: right;
}

#nav ul li.parent a {
    background-image: none;
}
#nav ul li.parent > a:before {
    content: '\f0da';
    font-family: FontAwesome;
    float: right;
    padding-top:5px;
    padding-right: 2px;
}

.undone {
    font-style: italic;
    opacity:.7;
}
.undone .date-details{
    opacity:.8;
}

.no-award {
    color: #dda600; font-style:italic; background: #fff4b9; font-size:90%;
}

.radio label, .checkbox label {
    display: inline-block;
}
.radio, .checkbox {
    margin-bottom: 5px;
}
body .checkbox + .checkbox {
    margin-top: inherit;
}
.checkbox label input {
    margin-top: -3px;
}

.point-shekel {
    font-size:80%;
    opacity:.4;
    padding: 0px 1px;
    font-weight: bold;
}

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 1.5px 1.5px 2px #66afe9,
        -1.5px -1.5px 2px #66afe9;
}

table.skipped td {
    padding: 2px 4px;
}


div.steps-box {
    display:inline-flex;
    max-width: 78%;
    width:auto;
    vertical-align: top;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.clubber-pic {
    border-radius: 5px;
}
.pic-holder {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.pic-holder.max-size img {
    height: 150px;
}
.pic-holder span.camera-link {
    display: none;
}
.pic-holder.max-size span.camera-link { /* actual picture camera-link only vis when max-size */
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 16px;
    z-index: 10;
    font-weight: bold;
    background: #ddf;
    color: blue;
    padding: 1px 4px;
    border: 1px solid #eee;
}
.pic-holder.max-size span.camera-link:hover {
    color: orange;
    background: #eef;
}
.pic-holder.pic-camera,
.pic-holder.toggle-size {
    cursor: pointer;
}
.pic-holder.pic-camera::after {
    content: '\f030';  /* fa-camera */
    font-family: "FontAwesome";
    color: #335;
    position: absolute;
    bottom: -3px;
    right: 0;
    font-size: 10px;
    background: #ccf;
}
.pic-holder.pic-camera.max-size::after {  /* hide when max-size */
    display:none;
}

li hr {
    margin-top: 10px;
    margin-bottom: 10px;
}

.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus,
.btn-primary {
    background-color: #007FFF;
    border-color: #007FFF;
}
.btn-primary:hover {
    background-color: #0063ce;
    border-color: #0063ce;
    color: white;
}

.btn-success {
    background-color: #42d097;
    border-color: #42d097;
}
.btn-success:hover {
    background-color: #2a986c;
    border-color: #2a986c;
    color: white;
}

.btn-info {
    background-color: #1fbfef;
    border-color: #1fbfef;
}
.btn-info:hover {
    background-color: #1eb4de;
    border-color: #1eb4de;
    color: white;
}

.htabs.alt .nav-tabs>li.active>a, .htabs.alt .nav-tabs>li.active>a:hover, .htabs.alt .nav-tabs>li.active>a:focus {
    background-color: #f1f1f1;
    border: 1px solid #f1f1f1;
}

.dropdown-menu li a {
    white-space: normal;
}


.sticky-header {
    z-index: 3;
    position: sticky;
    top: 0px;
}
@media only screen and (max-width: 767px) {
    .sticky-header {
        top: 50px;
    }
}

.collapsed .hide-not-collapsed {
    display: block;
}
.hide-not-collapsed {
    display: none;
}

.demo-note {
    padding: 8px 12px;
    margin: 10px 0px 10px 15%;
    background: #ffff99;
    color: #818145;
    border: 1px solid #f6f1d6;
    position: relative;
    max-width: 70%;
    box-shadow: 4px 4px 3px 0px rgba(0,0,0,0.27);;
}
.demo-note:before {
    content: 'Demo site note';
    color: #cfac00;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 90%;
    margin-left: 15px;
}
.demo-note:after {
    content: '\f05a';
    font-family: FontAwesome;
    position: absolute;
    color: #cfac00;
    top: 8px;
    left: 12px;
}

.setting-box .label {
    color: #d3b1d0;
}

.d-block {
    display: block;
}

.pagination {
    margin: 0;
}