.cake-debug-output {
    padding-top:70px;
}

body {
    min-width: 280px;
    background-color: #ccc;
    font:75%/1.5 "myriad pro", helvetica, arial, sans-serif;
}

#topbar {
    min-height: 100px;
    background: rgba(113,187,205,1);
    background: -moz-linear-gradient(top, rgba(113,187,205,1) 0%, rgba(71,153,169,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(113,187,205,1)), color-stop(100%, rgba(71,153,169,1)));
    background: -webkit-linear-gradient(top, rgba(113,187,205,1) 0%, rgba(71,153,169,1) 100%);
    background: -o-linear-gradient(top, rgba(113,187,205,1) 0%, rgba(71,153,169,1) 100%);
    background: -ms-linear-gradient(top, rgba(113,187,205,1) 0%, rgba(71,153,169,1) 100%);
    background: linear-gradient(to bottom, rgba(113,187,205,1) 0%, rgba(71,153,169,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#71bbcd', endColorstr='#4799a9', GradientType=0 );
}

#navbar {
    color:#000;
    background: #fff;
    min-height: 30px;
}

.logged-out-box {
    margin: 0 auto;
    border: none;
    background-color: #ccc;
}
.logged-out-box img {
    width:100%;
    max-width: 470px;
}

.login-box {
    max-width: 470px;
}

#header-alert {
    display: none;
    background-color: #fff;
    min-height: 25px;
    text-align: center;
    padding: 12px 15px 0px 15px;
    margin-left: auto;
    margin-right:auto;
    width: 50%;
    position: fixed;
    top:0;
    left:0;
    right:0;
    z-index: 9999;
    box-shadow: red 0 0 10px;
    -webkit-box-shadow: red 0 0 10px;
    -moz-box-shadow: red 0 0 10px;
    -o-box-shadow: red 0 0 10px;
}
.boxin {box-shadow: #aaa 0 0 10px; -webkit-box-shadow: #aaa 0 0 10px; -moz-box-shadow: #aaa 0 0 10px; border: 1px solid #999; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; background: #fff;}
.autosave {
    box-shadow: red 0 0 20px;
    -webkit-box-shadow: red 0 0 20px;
    -moz-box-shadow: red 0 0 20px;
    -o-box-shadow: red 0 0 20px;
}

.input-group-text {padding: 0 .75rem}

label.error {
    color:#b70b0b;
}
input.error, textarea.error, select.error {
    border-color: #d35757;
}
input.valid, textarea.valid {
    border-color: #155724;
}

.form-check-input {
    margin-top:.6rem;
    margin-left:0;
}
.form-check-input + label, .form-check-input + label.error {
    margin-top:6px;
    margin-left:20px;
}

.form-check {
    padding-left:0;
}
.form-check label {
    margin-bottom: 0;
}

.bg-asa {
    border-top-color: #73b8cc;
    background: rgba(113,187,205,1);
    background: -moz-linear-gradient(top, rgba(113,187,205,1) 0%, rgba(71,153,169,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(113,187,205,1)), color-stop(100%, rgba(71,153,169,1)));
    background: -webkit-linear-gradient(top, rgba(113,187,205,1) 0%, rgba(71,153,169,1) 100%);
    background: -o-linear-gradient(top, rgba(113,187,205,1) 0%, rgba(71,153,169,1) 100%);
    background: -ms-linear-gradient(top, rgba(113,187,205,1) 0%, rgba(71,153,169,1) 100%);
    background: linear-gradient(to bottom, rgba(113,187,205,1) 0%, rgba(71,153,169,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#71bbcd', endColorstr='#4799a9', GradientType=0 );
}

.navbar-light .nav-link.nav-asa, .nav-link.nav-asa {
    background-color: #444;
    color:#fff;
}

.navbar-light .nav-link.nav-asa:hover, .nav-link.nav-asa:hover {
    color:#444;
    background: rgba(158,220,237,1);
    background: -moz-linear-gradient(top, rgba(158,220,237,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(158,220,237,1)), color-stop(65%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top, rgba(158,220,237,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top, rgba(158,220,237,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(158,220,237,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(158,220,237,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9edced', endColorstr='#ffffff', GradientType=0 );
}

.navbar-light .nav-link.nav-asa {
    margin-right: 5px;
    margin-bottom: 5px;
}

.btn:not(:disabled):not(.disabled).active, .btn:not(:disabled):not(.disabled):active, .nav-link.nav-asa.active {
    color:#444;
    background: rgba(158,220,237,1);
    background: -moz-linear-gradient(top, rgba(158,220,237,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(158,220,237,1)), color-stop(65%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top, rgba(158,220,237,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top, rgba(158,220,237,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(158,220,237,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(158,220,237,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9edced', endColorstr='#ffffff', GradientType=0 );
}
.btn:not(:disabled):not(.disabled).active, .btn:not(:disabled):not(.disabled):active {background-image: transparent;}

.btn {
    font-size: inherit;
}

.section-title {
    color:#fff;
    padding: 3px 5px;
}

.card-title {
    text-shadow: #000 1px 1px 0;
}
.card-shadow {
    box-shadow: #111 0 0 10px;
    -moz-box-shadow: #111 0 0 10px;
    -o-box-shadow: #111 0 0 10px;
    -webkit-box-shadow: #111 0 0 10px;
}

.btn-primary {
    border: 1px solid #272727;
    background: #2a2a2a url(/img/admin/altbutton.gif) repeat-x;
    text-shadow: #000 1px 1px 0;
    color:#fff;
}
.btn-primary:hover {
    border-color: #234f5b;
    background: #73b8cc url(/img/admin/black/button.gif) repeat-x;
    color:#fff;
}

/******************************************************/

/* Alert */
/* This adds the icon to the left of the alert box - custom add by DS*/
div[class*="alert-icon-"] {
    background-image: linear-gradient(to bottom, #fff, #f9f9f9);
    /*border-top-color: #d8d8d8;
    border-bottom-color: #bdbdbd;
    border-left-color: #cacaca;
    border-right-color: #cacaca;
    color: #404040;*/
    position: relative;
    font-weight:500;
}

.alert.alert-icon-left {
    padding-left: 61px; }

.alert.alert-icon-right {
    padding-right: 61px; }

div[class*="alert-icon-"] .icon {
    text-align: center;
    width: 45px;
    height: 100%;
    position: absolute;
    top: 0;
    /*border: 1px solid #bdbdbd;*/
    padding-top: 15px; }

.alert.alert-icon-left .icon {
    left: 0; }

.alert.alert-icon-right .icon {
    right: 0; }

div[class*="alert-icon-"] .icon:after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    display: block;
    content: '';
    width: 10px;
    height: 10px;
    /*border: 1px solid #bdbdbd;*/
    position: absolute;
    border-left: 0;
    border-bottom: 0;
    top: 50%;
    margin-top: -3px;
    background: #fff; }

.alert.alert-icon-left .icon:after {
    right: -6px; }

.alert.alert-icon-right .icon:after {
    left: -6px; }

div[class*="alert-icon-"] .icon i {
    font-size: 20px;
    color: #fff;
    left: 12px;
    margin-top: -10px;
    position: absolute;
    top: 50%; }

div[class*="alert-icon-"].alert-success {
    background-color: #d7f2ed;
    border-color: #c7ede6;
    color: #1c6356; }

div[class*="alert-icon-"].alert-success .icon,
div[class*="alert-icon-"].alert-success .icon:after {
    border-color: #c7ede6;
    background: #d7f2ed; }

div[class*="alert-icon-"].alert-info {
    background-color: #ccecfe;
    border-color: #b8e4fe;
    color: #005283; }

div[class*="alert-icon-"].alert-info .icon,
div[class*="alert-icon-"].alert-info .icon:after {
    border-color: #b8e4fe;
    background: #ccecfe; }

div[class*="alert-icon-"].alert-warning .icon,
div[class*="alert-icon-"].alert-warning .icon:after {
    border-color: #ffcc00;
    background: #ffcc00; }

div[class*="alert-icon-"].alert-warning {
    background-color: #ffcc00;
    border-color: #ffcc00;
    color: #85621b; }

div[class*="alert-icon-"].alert-danger .icon,
div[class*="alert-icon-"].alert-danger .icon:after {
    border-color: #f32013;
    background: #f32013; }

div[class*="alert-icon-"].alert-danger {
    background-color: #f32013;
    border-color: #f32013;
    color: #80172a; }

/***************************************************/

/*** Swal Alert changes ***/
.swal2-popup {
    width:26em !important;
    padding:.75em !important;
    border-radius: 1em !important;
}
.swal2-title {
    font-size:24px !important;
}

.swal2-styled {
    padding:.425em 1em !important;
}

.swal2-input {
    margin: 0.5em auto !important;
    height:36px !important;
}

.swal2-icon::before {
    font-size: 1.5em !important;
}
.swal2-icon {
    width: 35px !important;
    height: 35px !important;
    margin: .25em auto .875em !important;
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line] {
    top:1em !important;
    width:1.6375em !important;
    height: 0.3125em !important;
}
.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
    left:.25em !important;
}
.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] {
    right:.25em !important;
}
/******/

/************* Step progress bar ******************************/
.box {
    width:200px;height:300px;
    position:relative;
    border:1px solid #BBB;
    background:#eee;
    float:left;
    margin:20px
}
.tab-ribbon {
    position: relative;
}
.ribbon {
    position: absolute;
    right: -3px; top: -3px;
    z-index: 1;
    overflow: hidden;
    width: 45px; height: 45px;
    text-align: right;
}
.ribbon span {
    font-size: 10px;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold; line-height: 15px;
    transform: rotate(45deg);
    width: 45px; display: block;
    background: #79A70A;
    background: linear-gradient(#9BC90D 0%, #79A70A 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 4px; right: -12px;
}
.ribbon span::before {
    content: '';
    position: absolute;
    left: 0px; top: 100%;
    z-index: -1;
    border-left: 3px solid #79A70A;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #79A70A;
}
.ribbon span::after {
    content: '';
    position: absolute;
    right: 0%; top: 100%;
    z-index: -1;
    border-right: 3px solid #79A70A;
    border-left: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #79A70A;
}
.red span {background: linear-gradient(#F70505 0%, #8F0808 100%);}
.red span::before {border-left-color: #8F0808; border-top-color: #8F0808;}
.red span::after {border-right-color: #8F0808; border-top-color: #8F0808;}

.blue span {background: linear-gradient(#2989d8 0%, #1e5799 100%);}
.blue span::before {border-left-color: #1e5799; border-top-color: #1e5799;}
.blue span::after {border-right-color: #1e5799; border-top-color: #1e5799;}


/****************************/