/* dodl stylesheet */
/* custom styles on top of bootstrap */

html {position: relative; min-height: 100%;}

body {
    background-color: rgb(240,240,240);
    background-image:url("../images/ccc_logo_opaque.png");
    background-repeat:no-repeat;
    background-attachment: fixed;
    background-position: left center;
    color: rgb(46,65,92); 
    margin-bottom: 60px; 
    padding-bottom: 40px;
}

/* Colours */
/* https://coolors.co/f2633a-ffd360-2e415c-2ebfc8-20a4f3 */

.orange {color: rgb(242,99,58);}
.orange-light {color: rgb(252,225,217);}
.yellow {color: rgb(255,211,96);}
.navy {color: rgb(46,65,92);}
.navy-light {color: rgb(228,233,241);}
.teal {color: rgb(46,191,200);}
.teal-light {color: rgb(205,241,244);} /* 10 up */
.blue {color: rgb(32,164,243);}
.blue-light {color: rgb(197,232,252);}
.dark-grey {color: rgb(150,150,150);}
.medium-grey {color: rgb(200,200,200);}
.light-grey {color: rgb(240,240,240);}

.white {color: #FFFFFF;}

.font-weight-bold{ font-weight: 600}
.bg-orange {background-color: rgb(242,99,58);}
.bg-orange-light {background-color: rgb(252,225,217);}
.bg-yellow {background-color: rgb(255,211,96);}
.bg-navy {background-color: rgb(46,65,92);}
.bg-navy-light {background-color: rgb(228,233,241);}
.bg-teal {background-color: rgb(46,191,200);}
.bg-teal-light {background-color: rgb(205,241,244);}
.bg-blue {background-color: rgb(32,164,243);}
.bg-blue-light {background-color: rgb(197,232,252);}

.bg-dark-grey {background-color: rgb(220,220,220);}
.bg-light-grey {background-color: rgb(240,240,240);}
.bg-dark-blue {background-color: rgb(46,65,92);}

.badge {font-size:0.7em;vertical-align:super;}
.badge-orange {background-color: rgb(242,99,58);}
.badge-yellow {background-color: rgb(255,211,96);}

table td.row-active{background-color:rgb(255,211,96) !important;font-weight:400;}

/* Borders */
.border-5 {border: solid 10px #FFF;}
.border-navy {border-color: rgb(46,65,92);}
.border-light-grey {border-color: rgb(235,235,235);}

/* Links */
a {color: rgb(32,164,243);}
a.underline {text-decoration: underline;}

/* Text */
h1, h2, h3, h4, h5, h6 {display:block; width:100%}
h1 {font-weight: 500}
h2, h3 {font-weight: 500}
h4, h5, h6 {font-weight: 400}

.h2{ margin-bottom: 0.5em}

.bold-100 {font-weight: 100;}
.bold-300 {font-weight: 300;}
.bold-400 {font-weight: 400;}
.bold-500 {font-weight: 500;}
.bold-700 {font-weight: 700;}
.bold-900 {font-weight: 900;}

.size-80 {font-size: 80%;}
.size-85 {font-size: 85%;}
.size-90 {font-size: 90%;}
.size-95 {font-size: 95%;}
.size-100 {font-size: 100%;}
.size-110 {font-size: 110%;}
.size-120 {font-size: 120%;}
.size-130 {font-size: 130%;}
.size-140 {font-size: 140%;}
.size-145 {font-size: 145%;}
.size-150 {font-size: 150%;}
.size-175 {font-size: 175%;}
.size-200 {font-size: 200%;}
.size-250 {font-size: 250%;}
.size-300 {font-size: 300%;}
.size-350 {font-size: 350%;}
.size-400 {font-size: 400%;}

.size-090 {font-size: .9em;}
h1 span {
    display: block;
    font-size: 0.4em;
    font-weight: 300;
    margin-top: 5px;
}
h1 span:before {
    content: "— ";
}

table td.row-active{background-color:rgb(255,211,96) !important;font-weight:400;}

/* Buttons */
.btn-primary {color: #fff; background-color: rgb(32,164,243); border-color: rgb(32,164,243);}
.btn-outline-primary {color: rgb(32,164,243); border-color: rgb(32,164,243);}
.btn-outline-primary:hover {background-color: rgb(32,164,243); border-color: rgb(32,164,243);}

/* Nav */
#main-nav .navbar-brand img {width: 130px;}
#main-nav .navbar-brand img.admin {width: 200px;}
#main-nav .nav-item .nav-link {color: rgb(48,60,77);}
#main-nav .nav-item .nav-link.orange {color: rgb(242,99,58);}
#main-nav .nav-item .nav-link.teal {color: rgb(46,191,200);}
#main-nav .nav-item.active .nav-link {font-weight: 700; border-bottom: 2px solid rgb(46,65,92);}
#main-nav img.profile {height: 28px;}
#main-nav .admin .nav-item .nav-link {color: rgb(242,99,58);}
#main-nav .admin .nav-item .nav-link.active {background-color: rgb(242,99,58); color: #FFF;}
/* Tabs */
.nav-tabs .nav-link.active {color: rgb(48,60,77);}

#teams-tabs .active .badge-yellow.text-dark {
    color: white !important;
}

/* Splash */
#splash img {max-height: 35px; max-width: 100%;}

/* Images */
.profile {max-width: 100%; max-height: 90px;}

/* Cards */
.card {border-radius: 0;}
.card-hover:hover {background-color: rgb(235,235,235); cursor: pointer;}
.card-hover.active, .card-hover.active:hover {background-color: rgb(235,235,235);}
.card-hover a {text-decoration: none;}
a.card-hover {text-decoration: none;}
.card-hover:hover a {text-decoration: none;}

.list-group-item {background-color: transparent;}

.data-row {margin-bottom: 10px;}
.data-row:last-child {margin-bottom: 0px;}
.data-label {font-weight: 400;}
.data-row .data-label {}
.data-spacer {margin-top: 10px;}
.data-value {}
.data-row .data-value {}

/* Tables */
.table {color: rgb(46,65,92);}
/*td a {display: block;}*/
table img.profile {max-height: 50px;}

/* Forms */
input::placeholder {font-weight: 300;}

#dodl-form {font-size: 1.15em;font-weight:400;}
#dodl-form-back {font-size:1em; margin-top: 3em; margin-bottom: -1.5em;}
#dodl-form-back .condition {background-color: rgb(242,99,58); padding: 0 5px; color: #FFF;}
#dodl-form-title {margin-top: 3em; margin-bottom: -3.5em; padding: 10px 3em; background-color: rgb(46,65,92); color: #FFF;}
#dodl-form-title .condition {background-color: rgb(242,99,58); padding: 0 5px; color: #FFF;}
#dodl-form {padding: 3em; margin-top: 3em; background-color: #FFF;}
#dodl-form.ticket {padding: 0; margin: 0;}
#dodl-form .heading, #dodl-form .heading-label {font-size: 2em; font-weight: 500; color: rgb(46,65,92); margin-bottom: 0.75em; display:block}
#dodl-form .sub-heading {font-size: 1.7em; font-weight: 500; color: rgb(46,65,92); margin-bottom: 0.75em;}
#dodl-form p {font-weight: 400;color: rgb(11,11,11);}
#dodl-form ul {font-weight: 400; color: rgb(11,11,11);}
#dodl-form .form-group, #dodl-form .form-row {padding: 0.5em 0;margin-top: 0; margin-bottom: 0;}

#dodl-form.condensed .form-group, #dodl-form.condensed .form-row {padding-top: 0.5em; padding-bottom: 0.5em;}
.form-group.condensed label,.form-group.condensed .form-label {margin-bottom: 0.3em!important}

#dodl-form label, #dodl-form .label {margin-bottom: 0.7em;font-size: 1em;line-height: 1.4em;color:#212529}
#dodl-form label.small, #dodl-form .label.small, #dodl-form .label-small {margin-bottom: .3em;}
/*#dodl-form .form-control {font-size: 1.15em;}*/
#dodl-form .form-control-sm {font-size: 1em;}
/*#dodl-form .custom-select {font-size: 1.15em;}*/
#dodl-form .custom-select-sm {font-size: 1em;}
#dodl-form .form-control-plaintext {font-weight: 600; border-width: 0; padding: 0;}
#dodl-form .form-check {margin-bottom:0.5em;}
/*#dodl-form .form-check input[type=radio] {width: 25px; height: 25px;}*/
/*#dodl-form .form-check input[type=checkbox] {width: 20px; height: 20px; margin-top: 8px;}*/
#dodl-form .form-check-input:disabled~.form-check-label, .form-check-input[disabled]~.form-check-label {color: #6c757d;}
/*#dodl-form .form-check label {padding: 5px 10px}*/
/*#dodl-form .form-check-inline label {padding: 8px 20px 5px 10px;}*/
#dodl-form .form-check .form-text {margin-bottom: 5px; color: #6c757d; clear: both; font-weight: 300;} /*font-size: 1em;padding-left: 10px; margin-top: -0.75em;}*/
#dodl-form .form-check-wrapper .form-text~.disabled-text {margin-top: -5px;}
#dodl-form .form-check-wrapper .disabled-text {margin-bottom: 5px; color: rgb(46,191,200); clear: both; font-weight: 400; font-size: .875em;}
#dodl-form .form-check-wrapper .form-text {padding-left: 1.7em;margin-bottom:0.5em}
#dodl-form .form-check-wrapper .help-text {    margin-top: -0.5em;}
#dodl-form label .form-text { padding-left: 0px !important;  margin-top: 0em !important}
#dodl-form .label-small {font-weight: 400; font-size: 90%; color: rgb(11,11,11); margin-bottom: .3em;}
#dodl-form .form-check .form-check-input, .selectRow input[type=checkbox] {height:1.5rem;width:1.5rem;}
#dodl-form .form-check-label {margin-bottom: .5em;font-size: 1em;line-height: 1.4em;padding-top: 3px}
#dodl-form  input + label { margin-left: 6px;  margin-right: 10px; font-weight: normal;}

#dodl-form .form-check .form-text~.disabled-text {margin-top: -5px;}
#dodl-form .form-check .disabled-text {margin-bottom: 5px; color: rgb(46,191,200); clear: both; font-weight: 400}

#dodl-form .help-text, #dodl-form .info-text {clear: both; display: block;margin-bottom:20px; } /*/margin-top:-0.5em*/
#dodl-form .error-text {clear: both; display: block;margin-bottom:20px; }
#dodl-form .highlighted-field {font-weight: 500; color: rgb(46,191,200)}
#dodl-form .auto-field {font-weight: 500; border: 1px solid rgb(46,65,92); background-color: rgb(46,65,92); color: #FFF; padding: 3px 10px;}
#dodl-form .btn {font-size: 1.1em}
#dodl-form .btn-next, #dodl-form .btn-back { margin-top:1em}

#dodl-form .btn-sm {font-weight: 400; font-size: 1em; margin-top: 1.5em;}
#dodl-form .btn-align-top { margin-top: 0em;}
#dodl-form .btn.disabled, #dodl-form .btn:disabled, #dodl-form fieldset:disabled .btn { background-color: #d1cece; border-color: #939393; color: #707070; }
#dodl-form .form-group.error, #dodl-form .form-row.error,  #dodl-form .row.error,
#dodl-form .eb-MESSAGE_CONTROL.error {border-left: 5px solid #b10e1e; padding-left: 40px; margin-bottom: 1em;}
#dodl-form .eb-MESSAGE_CONTROL.error {color: #b10e1e;padding: 5px 20px;margin-top: 1em;}
#dodl-form .errors {border: 5px solid #b10e1e; color: #b10e1e; padding: 1em;}
#dodl-form .errors .title {font-weight: 500;}
#dodl-form .errors .description {color: #000; display: block; margin-top: 0.5em;}
#dodl-form .errors .description ul {margin-top: 0.5em; font-size: 1em; color: #b10e1e;}
#dodl-form .error-message {display: none; float: none; color: #b10e1e; font-weight: 500;padding-top: 10px;}
#dodl-form .inner-error-message{    padding: 0px;display: block!important; margin: 15px 0px 5px;}
#dodl-form .error-message.show {display: block;}
#dodl-form .confirmation {background-color: rgb(46,191,200); color: #FFF; padding: 40px 40px 20px 40px; text-align: center; margin-bottom: 20px;}
#dodl-form .confirmation .heading, #dodl-form .confirmation .sub-heading, #dodl-form .confirmation p {color: #FFF;}
#dodl-form .confirmation a {color: #FFF; text-decoration: underline;}
#dodl-form table tr.highlighted td {background-color: rgb(255,211,96); font-weight: 400;}

#dodl-form .pattern {padding: 10px; margin-bottom: 20px; border: 5px solid rgb(240,240,240);}
#dodl-form .pattern-week .card {padding: 10px; margin-right: 10px; background-color: rgb(240,240,240);}
#dodl-form .pattern-week .col-sm-auto:last-child .card {margin-right: 0;}
#dodl-form .pattern .label-small {margin-top: .75em;}
#dodl-form .divider {margin-bottom: 1em; margin-top: 1em; border-top: 5px solid rgb(240,240,240);}
#dodl-form .section-heading { font-weight: 700; color: rgb(46,65,92); margin-bottom: 0.75em;display: block;}

#dodl-form .summary .form-group {padding-top: 0em; padding-bottom: 0em; margin-top: 0; margin-bottom: 0;}
#dodl-form .summary .section-break {margin-bottom: 1em; margin-top: 1em; border-top: 5px solid rgb(240,240,240);}
/*#dodl-form .summary label {margin-bottom: .25em; margin-top: .25em;}*/
#dodl-form .summary .form-control-plaintext {margin-top: 0em;}
#dodl-form .summary .form-group table {margin-top: .5em;}
#dodl-form .summary .submit-confirmation , #dodl-form.summary .submit-confirmation {font-weight: 500; border-top: 2px solid rgb(242,99,58); border-bottom: 2px solid rgb(242,99,58); padding-top:0.3em; padding-bottom:0}

#dodl-form .summary .summary-hide{ display:none}

#ticket-flow {padding-top: 10px; padding-bottom: 10px;}
#ticket-flow .stage {border-left: 1px solid rgb(46,65,92); margin-left: 10px; padding: 10px 0px;}
#ticket-flow .stage .fa-stack {margin: 3px 20px 0px -23px; font-size: 130%; color: rgb(200,200,200); width: auto;}
#ticket-flow .stage .icon-background {color: rgb(240,240,240); font-size: 140%; margin-left: -4px;}
#ticket-flow .stage.complete .icon-foreground {color: rgb(46,191,200);}
#ticket-flow .stage.rejected .icon-foreground {color:red}
#ticket-flow .stage.current .icon-foreground {color: rgb(242,99,58);}
#ticket-flow .stage .stage-details {margin-left: 10px; color: rgb(150,150,150);}
#ticket-flow .stage.complete .stage-details, #ticket-flow .stage.current .stage-details {color: rgb(46,65,92);}
#ticket-flow .stage .stage-details .card-body {background-color: #FFF; padding: 5px 10px;}
#ticket-flow .stage .stage-details .stage-info {font-size: 80%; color: rgb(150,150,150); margin-top: 5px;}

/*#ticket-flow .stage:before {font-family: "Font Awesome 5 Free"; content: "\f003"; font-size: 130%; border-radius: 50%; border: 1px solid green; padding: 2px; background-color: green; color: white;}*/

#ticket-notes .notes {border-bottom: 5px solid rgb(240,240,240);}
#ticket-notes .note {margin: 0px 0px 20px 0px;}
#ticket-notes .note {font-weight: 400;}
#ticket-notes .note .fas {color: rgb(255,211,96);}
#ticket-notes .note-info {font-size: .85em; margin-top: 10px; font-weight: 300; color:#6c757d;}
#ticket-notes .note-new {margin-top: 20px;}

#ticket-conversation .messages {border-bottom: 5px solid rgb(240,240,240);}
#ticket-conversation .message {margin-bottom: 20px; font-weight: 400; width: 75%; float: left; border: none; background-color:unset}
#ticket-conversation.collect .message {float: right;}
#ticket-conversation .message.user {float: right; }
#ticket-conversation.collect .message.user {float: left;}
#ticket-conversation .message .card-body {  padding: 8px 15px; background-color: rgb(240 240 240); color: #000; border-radius: 25px;}
/*#ticket-conversation .message.user .card-body:after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    z-index: 1;*/
/*    bottom: 25px;*/
/*    right: -10px;*/
/*    width: 10px;*/
/*    height: 20px;*/
/*    background: white;*/
/*    border-bottom-left-radius: 10px*/
/*}*/
/*#ticket-conversation .message.user .card-body:before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    z-index: 0;*/
/*    bottom: 25px;*/
/*    right: -6px;*/
/*    height: 20px;*/
/*    width: 20px;*/
/*    background: rgb(46 65 92);*/
/*    border-bottom-left-radius: 15px*/
/*}*/
/*#ticket-conversation .message.collect .card-body:before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    z-index: 0;*/
/*    bottom: 25px;*/
/*    left: -10px;*/
/*    height: 20px;*/
/*    width: 20px;*/
/*    background: rgb(240 240 240);*/
/*    border-bottom-right-radius: 15px;*/
/*}*/
/*#ticket-conversation .message.collect .card-body:after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    z-index: 1;*/
/*    bottom: 25px;*/
/*    left: -10px;*/
/*    width: 10px;*/
/*    height: 20px;*/
/*    background: white;*/
/*    border-bottom-right-radius: 10px;*/
/*}*/
#ticket-conversation .user .message-info {text-align: right}
#ticket-conversation.collect .message .card-body {background-color: rgb(46,65,92); border-color: rgb(46,65,92); color: #FFF;}
#ticket-conversation .message.user .card-body {background-color: rgb(46,65,92); border-color: rgb(46,65,92); color: #FFF;}
#ticket-conversation.collect .message.user .card-body {background-color: rgb(46,191,200); border-color: rgb(46,191,200); color: #FFF;}
#ticket-conversation .message-info {font-size: .8em; margin-top: 5px; font-weight: 300; color:#6c757d;}
#ticket-conversation .message-new {margin-top: 20px;}

#person img.profile {max-width: 100%; max-height: 120px; padding: 20px 40px; background-color: #FFF;}
#person .fas {margin-right: 7px;}
#person .name {font-size: 2em; font-weight: 300; margin: 0px 0px;}
#person .data {font-size: .9em;}
#person .data a {word-break: break-all;}
#person .data .data-row {margin-top: 10px;}
#person .data .data-row:first-child {margin-top: 0px;}
#person .data .section {margin-top: 10px; margin-bottom: 2px; display: block; font-weight: 500;}
#person .data .section:first-child {margin-top: 0px;}
#person .data .label {margin-top: 7px; margin-bottom: 0px; display: block; font-weight: 500; }
#person .data .label:first-child {margin-top: 0px;}
#person .data .tag {display: inline-block; background-color: #fff; padding: 2px 4px; margin-left: 5px; font-size: .85em; line-height: 1em;  font-style: italic;}
#person .data .value {margin-bottom: 0px; display: block;}
#person .data .value-inline {margin-bottom: 0px; display: inline-flex;}
#person .data .value-inline::after {content: '|'; color: rgb(46,191,200); font-weight: 500; padding: 0px 3px 0px 7px;}
#person .data .value-inline:last-child:after {content: ''; padding: 0px;}
#person .data .value-banner {display: inline-block; color: #fff; background-color: rgb(46,65,92); padding: 5px 8px; line-height: 1em; font-weight: 400; margin: 4px 0px;}
#person .data .value-banner.success {background-color: #28a745;}

#person .data .card {padding: 10px 20px; margin-bottom: 10px;}
#person .data .card:last-child {margin-bottom: 0px;}
#person .data .card .fas {font-size: 1.2em; margin: 0px 4px 0px 8px;}
#person .data .card .col-auto {padding: 0;}

#person img.profile {background:none;padding:0px}
#person .profile-container {width:120px;height:120px;}

#person #person-featured {background-color: rgb(46,65,92); color: #FFF; padding: 20px;}
#person #person-featured .label {color: #FFF;}

.iframe #dodl-form {margin:0px;padding:1em;}
.iframe {margin:0px!important;padding:0px!important;}
body.iframe{background-image:none;background-color:#fff}
.iframe .vertical-scroll{overflow-y:auto;overflow-x:hidden;height:700px}

.profile-container {
	/*
	background-image:url('../images/profile.png');
	background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  */
  height:90px;
}



/*
#person .nav-pills .nav-link {border-radius: 0; border-left: 3px solid transparent; margin-bottom: 8px; font-size: .9em;}
#person .nav-pills .nav-link.active {background-color: #FFF; color: rgb(46,65,92); font-weight: 300; border-left: 3px solid rgb(46,65,92);}

#person .data-section.highlight {background-color: rgb(46,65,92); color: #FFF !important;}

#person .data-section-title {font-weight: 600; color: rgb(46,191,200); padding: 5px 0px; border-bottom: 2px solid rgb(200,200,200); margin-bottom: 5px; display: inline-block;}

#person .data-section-title {margin-bottom: 5px; width: 100%; display: inline-block; color: rgb(46,191,200); font-weight: 400; text-decoration: none;}
#person .data-section-title:hover {text-decoration: none;}
#person .data-section-title.show-hide::after {font-family: "Font Awesome 5 Free"; content: "\f068"; float: right; margin-left: 5px; font-weight: 900;}
#person .data-section-title.show-hide.collapsed::after {content: "\f067";}
#person .data-row {margin-top: 5px; margin-bottom: 0px;}
#person .data-section-group {margin-top: 10px; margin-bottom: 5px;}
#person .data-section-group-title {color: #6c757d; font-weight: 600; font-size: .9em; padding-right: 20px;}
#person .data-section-group-line {margin-bottom: 2px; background-color: rgba(0,0,0,.125); width: 100%; height: 3px; display: inline-block;}
#person .data-label {font-weight: 300; color: rgb(46,191,200); font-size: .95em;}
#person .data-value {font-weight: 400; font-size: .95em;}
*/

#token .login {
    background-color: #FFFFFF;
    border-radius: 0px;
    box-shadow: 4px 4px 13px 1px #0000007d;
}

/* Login */
#login	.form-signin {max-width: 330px;padding:15px;}
#login {height: 100%;}
#login .container {height: 100%;}
#login .multi-page .container {height: auto;}
#login .container > .row {height: 100%;}
#login .multi-page .container > .row {height: auto;}
#login img.logo {width: 200px; margin: 20px 20px;}
#login .banner {background-color: rgb(46,65,92); color: #FFF;}
#login .banner a {color: #FFF;}
#login .banner .lang {margin: 0px 20px 0px 20px;}
#login .banner .title {margin: 0px 20px 10px 20px; font-weight: 400;}
#login #dodl-form-back {margin-top: 0; margin-bottom: 1.5em;}
#login .multi-page #dodl-form-back {margin-top: 3em;}
#login #dodl-form-back .row {height: auto;}
#login .form-control{padding:.75rem}
/*#login .login-page-content,  {background-image:url("../images/ccc_logo_opaque.png");background-repeat:no-repeat;background-position:left;}*/
#login .error-message {background:none !important;color:#ff0000!important;margin-bottom:1em;font-weight:300;}
/*#login label{font-size:1.5rem}*/
#login .error input {border-left:5px solid red}
#login .error {margin-bottom:0px;}

/* Footer */
.footer {position: absolute; bottom: 0; width: 100%; min-height: 60px; line-height: 30px; padding: 15px 0px 0px;}
.footer img {width: 20px;}

/* IGNORE */
#dodl-form.new {border: 5px solid rgb(255,211,96);}
#dodl-form .new-text {background-color: rgb(255,211,96); display: inline-block;}

.alert:before {font-family: 'FontAwesome';content: '\f071'; margin-right:10px; margin-left:5px}
.alert-message{padding:15px !important}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
	.number-sm {width:5em}
	.number-7 {width:7em}
	.number-md, .date-sm {width:10em}
	.number-lg {width:15em}
}


#dodl-form .error-highlight {
    color: red !important;
}

.inlineLink a, 
.upload_text a {display:inline !important}