/* --------------------------------------------------------------------- */
/* Bootstrap tweaks                                                      */
/* --------------------------------------------------------------------- */

.panel + .pagination            { margin-top:     0px; }
.panel   .list-group:last-child { margin-bottom:  0px; }

.panel-group                    { margin-bottom: 20px; }

.input-group-btn:not(:first-child):not(:last-child) > .btn { border-radius: 0; }

.form-control.disabled { cursor: not-allowed; background-color: #eeeeee; }
.form-group  .table { margin-bottom: 0px }
.panel       .table { margin-bottom: 0px }

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.affix-top {
  position: relative;
}
.affix-bottom {
  position: absolute;
}

@media (min-width: 992px) {
.modal-dialog.modal-lg { width: 900px; }
}
/* --------------------------------------------------------------------- */
/* typeahead                                                             */
/* --------------------------------------------------------------------- */

.tt-dropdown-menu {
    min-width: 100%;
    margin-top: 4px;
    padding: 4px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 2px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.tt-wrapper, .twitter-typeahead   { width: 100% }
.tt-hint                          { color: #999 }
.tt-suggestion                    { padding: 3px 6px; cursor: pointer; }
.tt-suggestion.tt-cursor          { color: #fff; background-color: #129cc8; }

/* bootstrap + typeahead fixes */

.input-group .tt-wrapper:first-child .form-control { border-top-left-radius:  4px; border-bottom-left-radius:  4px }
.input-group .tt-wrapper:last-child  .form-control { border-top-right-radius: 4px; border-bottom-right-radius: 4px }

/* --------------------------------------------------------------------- */
/* components                                                            */
/* --------------------------------------------------------------------- */

#component-record-id,
#component-record-id-1,
#component-record-id-2,
#component-record-data,
#component-state-challenge,
#component-state-challenge-qr,
#component-state-check { display: none; }
#component-trackables  { position: fixed; bottom: 0px; width: 500px; left: 0; right: 0; margin: auto; z-index: 1035 }

.component-block { padding: 20px; margin: 20px; }

.component-offset-top    { margin-top:    20px; }
.component-offset-bottom { margin-bottom: 20px; }

.component-form     { position: relative; } /* container class for forms */
.component-view     { position: relative; } /* container class for views */
.component-grid     { position: relative; } /* container class for grids */
.component-messages { position: relative; } /* container class for input messages */
.component-checkbox { position: relative; } /* container class for checkboxes */
.component-database { position: relative; }

.component-title    { color: #129cc8; border-bottom: 1px solid #999; text-align: center; }

.component-form .help-block { text-align: justify; }

.component-form .progress { margin-bottom: 0px; }
.component-view .progress { margin-bottom: 0px; }

.component-view .input-group .checkbox,
.component-form .input-group .checkbox        { display: table-cell; width: 100%; padding-right: 3px; }
.component-view .input-group .checkbox + span,
.component-form .input-group .checkbox + span { display: table-cell; }

.component-view.form-horizontal .input-group .checkbox + span,
.component-form.form-horizontal .input-group .checkbox + span { margin-top: 7px; }

.component-grid     input[type="checkbox"],
.component-checkbox input[type="checkbox"] { display: none; }

.component-grid     input[type="checkbox"] + span,
.component-checkbox input[type="checkbox"] + span,
.component-deco-checkbox {
    position: relative;
}

.component-grid     input[type="checkbox"] + span:before,
.component-checkbox input[type="checkbox"] + span:before,
.component-deco-checkbox:before {
    content: "";
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-size: 1em;
    line-height: 1em;
    width: 1.2em;
    height: 1.2em;
    text-align: center;
    vertical-align: middle;
    background-color: #fff; /*#EEE;*/
    border: 1px solid #AAA;
    border-radius: 2px;
    color: #494949;
}
/* FIXME/alexander: to be used with the bootstrap class .checkbox */
.checkbox .component-checkbox input[type="checkbox"] + span:before {
    position: absolute;
    top: 0; 
    left: -20px;
    margin: auto;
}

.component-checkbox.big input[type="checkbox"] + span:before,
.component-deco-checkbox.big:before {
    font-size: 34px;
    width: 1em;
    height: 1em;
}

.component-checkbox.big {
    margin: 0;
}

                .component-checkbox:hover input[type="checkbox"] + span:before { border: 1px solid #129cc8; color: #129cc8; }
.component-grid                           input[type="checkbox"] + span:before,
.component-view .component-checkbox       input[type="checkbox"] + span:before { color: #777; }

.component-grid     input[type="checkbox"].checked + span:before,
.component-checkbox input[type="checkbox"].checked + span:before,
.component-deco-checkbox.checked:before {
    content: "\e013"; /* separate selector with :checked because msie8 cant parse one of them and decides not to load any ... */
}
.component-grid     input[type="checkbox"]:checked + span:before,
.component-checkbox input[type="checkbox"]:checked + span:before {
    content: "\e013";
}

.component-grid th             { background-color: #F5F5F5; }
.component-grid th:first-child { border-radius: 5px 0px 0px 0px; }
.component-grid th:last-child  { border-radius: 0px 5px 0px 0px; }

.component-form   .has-danger.component-message,
.component-form    .has-error.component-message { border:1px solid #B94A48;background-color:#FEE;color:#B94A48; }
.component-form  .has-warning.component-message { border:1px solid #C09853;background-color:#FFE;color:#C09853; }
.component-form  .has-success.component-message { border:1px solid #468847;background-color:#EFE;color:#468847; }
.component-form     .has-info.component-message { border:1px solid #3A87AD;background-color:#EEF;color:#3A87AD; }
.component-form     .has-help.component-message { border:1px solid #CCC;   background-color:#EEE;color:#000;    }

.component-form .has-danger  .component-message,
.component-form .has-error   .component-message { border:1px solid #B94A48; }
.component-form .has-warning .component-message { border:1px solid #C09853; }
.component-form .has-success .component-message { border:1px solid #468847; }
.component-form .has-info    .component-message { border:1px solid #3A87AD; }
.component-form .has-help    .component-message { border:1px solid #CCC;    }

.component-message {
    margin: -1px 6px 0px 6px;
    padding: 3px;
    font-size: 0.9em;
}

.component-messages .component-message:last-child { border-radius: 0px 0px 4px 4px; }

.component-hidden-submit { position: absolute; width: 0px; height: 0px; left: -9999px; }
.component-blocker {
    position: absolute;
    top:     0;
    bottom:  0;
    left:    0;
    right:   0;
    z-index: 62;
}
.component-blocker.active {
    background:       url("../img/bigwaiting.im.ea0fd95a9ba454c0341330d9c61ff343.gif") no-repeat center center;
    background-color: rgba( 255,255,255,0.5 );
    background-size:  auto;
}
.component-blocker.glass {
    background-image: -webkit-linear-gradient( 45deg, transparent 0%, transparent 10%, rgba(255,255,255,0.3) 10%, rgba(255,255,255,0.3) 20%, transparent 20%, transparent 40%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.3) 45%, transparent 45%, transparent 60%, rgba(255,255,255,0.3) 60%, rgba(255,255,255,0.3) 75%, transparent 75%, transparent 80%, rgba(255,255,255,0.3) 80%, rgba(255,255,255,0.3) 85%, transparent 85%, transparent 100% );
    background-image:    -moz-linear-gradient( 45deg, transparent 0%, transparent 10%, rgba(255,255,255,0.3) 10%, rgba(255,255,255,0.3) 20%, transparent 20%, transparent 40%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.3) 45%, transparent 45%, transparent 60%, rgba(255,255,255,0.3) 60%, rgba(255,255,255,0.3) 75%, transparent 75%, transparent 80%, rgba(255,255,255,0.3) 80%, rgba(255,255,255,0.3) 85%, transparent 85%, transparent 100% );
    background-image:         linear-gradient( 45deg, transparent 0%, transparent 10%, rgba(255,255,255,0.3) 10%, rgba(255,255,255,0.3) 20%, transparent 20%, transparent 40%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.3) 45%, transparent 45%, transparent 60%, rgba(255,255,255,0.3) 60%, rgba(255,255,255,0.3) 75%, transparent 75%, transparent 80%, rgba(255,255,255,0.3) 80%, rgba(255,255,255,0.3) 85%, transparent 85%, transparent 100% );
    background-color: rgba(200,200,200,0.3);
    border: 1px solid rgba(192,192,192,0.5);      
    border-radius: 4px;
    opacity: 1;
/*  margin: -4px; */
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
.component-blocker.glass:hover { opacity: 0.5; }

.component-imgmap {
    display:  block;
    position: relative;
    margin:   0;
    padding:  0;
}
.component-imgarea       { display: block; position: absolute; }
.component-imgarea:hover { border: 2px solid #F00; }

.component-input-file { height: initial; }

.form-group .form-control.component-flash { border: 3px solid #F00; } /* FIXME/alexander: tripple selector for priority; !important does not help */

.component-db-grid-real,
.component-db-grid-int,
.component-db-grid-amount       { width: 15%; text-align: right; }
.component-db-grid-imgmap,
.component-db-grid-glyphmap,
.component-db-grid-date,
.component-db-grid-time         { width: 15%; text-align: center; }
.component-db-grid-utime        { width: 20%; text-align: center; }
.component-db-grid-kin,
.component-db-grid-email,
.component-db-grid-phone,
.component-db-grid-gsm          { width: 15%; }
.component-db-grid-iban,
.component-db-grid-name         { width: 30%; }
.component-db-grid-string       { width: 40%; }
.component-db-grid-label        { width: 15%; }
.component-db-grid-glyphmap,
.component-db-grid-imgmap,
.component-db-grid-stringmap,
.component-db-grid-boolean,
.component-db-grid-filter-action { width: 1%; text-align: center; }
.component-db-grid-action        { width: 1%; white-space: nowrap; text-align: center; }

/* XXX/alexander: replaced a + a because of tooltips */
.component-db-grid-action a             { margin-left: 5px; }
.component-db-grid-action a:first-child { margin-left: 0px; }

.component-db-grid-head         { font-weight: normal; }
.component-db-grid-value        { cursor: pointer; }
.component-db-grid-header       { background-color: #F7F7F7; }
.component-db-grid-search       { background-color: #DEF; }
.component-db-grid-record       { white-space: nowrap; }
.component-db-grid-record-1     { background-color: #FFF; }
.component-db-grid-record-2     { background-color: #F7F7F7; }
.component-db-grid-record:hover { color: #129cc8; }

.component-db-grid-record .tooltip,
.component-db-grid-record .alert { white-space: normal; margin-bottom: 0px; }

.component-db-grid > tbody > tr > th,
.component-db-grid > tbody > tr > td { border-top: none; }

.component-db-grid-sort.component-db-grid-head       { cursor: pointer; }
.component-db-grid-sort.component-db-grid-head:hover { background-color: #ecf0f1; }

.component-background-highlight {
    background-image: -webkit-linear-gradient( 180deg, rgba( 255,255,255,1 ), rgba( 255,255,255,0 ) ); 
    background-image:    -moz-linear-gradient( 180deg, rgba( 255,255,255,1 ), rgba( 255,255,255,0 ) ); 
    background-image:         linear-gradient( 180deg, rgba( 255,255,255,1 ), rgba( 255,255,255,0 ) ); 
}
.component-background-highlight.red    { background-color: #FBB; }
.component-background-highlight.green  { background-color: #BFB; }
.component-background-highlight.blue   { background-color: #BBF; }
.component-background-highlight.orange { background-color: #FFB; }
.component-background-highlight.teal   { background-color: #BFF; }
.component-background-highlight.purple { background-color: #FBF; }

.component-terms,
.component-well {
    background-color: #FFF;
    border: 1px solid #AAA;
    box-shadow: 3px 3px 12px 0 rgba( 0,0,0,0.3 );
    padding: 20px;
    margin-bottom: 20px;
}
.component-well.has-danger,
.component-well.has-error   { background-color: #FDD; border:1px solid #B94A48; }
.component-well.has-warning { background-color: #FFD; border:1px solid #C09853; }
.component-well.has-success { background-color: #DFD; border:1px solid #468847; }
.component-well.has-info    { background-color: #DEF; border:1px solid #3A87AD; }

.component-terms                         { padding: 20px  0px  0px  0px; } /* XXX/alexander: using margins here instead of padding because scroll cuts it */
.component-terms > .component-terms-text { padding:  0px  0px 20px  0px; margin:  0px 20px 20px 20px; border-bottom: 1px solid #DDD; }
.component-terms > .checkbox             { margin:   0px 20px 20px 20px }

.component-cal {
    width: 14em;
}
.component-cal-nav,
.component-cal-pair,
.component-cal-season,
.component-cal-week {
    padding: 0;
    margin: 0;
}
.component-cal-nav    > li,
.component-cal-pair   > li,
.component-cal-season > li,
.component-cal-week   > li {
    display: inline-block;
    height: 2em;
    background: #FFF;
    color: #000;
}
.component-cal-nav    > li > div,
.component-cal-pair   > li > div,
.component-cal-season > li > div,
.component-cal-week   > li > div {
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    height: 100%;
    width: 100%;
    border: 0.1em solid transparent;
    padding: 0.2em;
}
.component-cal-nav    > li > div:hover,
.component-cal-pair   > li > div:hover,
.component-cal-season > li > div:hover,
.component-cal-week   > li > div:hover { border-color: rgba( 0, 0, 0, 0.25 ); }

.component-cal-nav    > li { display: table-cell; }
.component-cal-nav    > li.c-prev,
.component-cal-nav    > li.c-next { width: 1%; }
.component-cal-nav    > li.c-face { width: 100%; }
.component-cal-nav    > li.c-prev > div,
.component-cal-nav    > li.c-next > div { width: 2em; }
.component-cal-pair   > li { width: 7em; }
.component-cal-season > li { width: 4.66em; }
.component-cal-week   > li { width: 2em; text-align: right; }

.component-cal-week   > li.c-sat { background: #EEF; }
.component-cal-week   > li.c-sun { background: #DEF; }

.component-cal-nav    > li.c-now,
.component-cal-pair   > li.c-now,
.component-cal-season > li.c-now,
.component-cal-week   > li.c-now { background: #FEA; }

.component-cal-nav    > li.c-out,
.component-cal-pair   > li.c-out,
.component-cal-season > li.c-out,
.component-cal-week   > li.c-out { background: #EEE; color: #666; }

.component-bubble {
    position: relative;
    background-color: #FFF;
    border: 1px solid #AAA;
    padding: 6px;
    box-shadow: 3px 3px 12px 0 rgba( 0,0,0,0.3 );
}
.component-bubble:before,
.component-bubble:after {
    content: "";
    position: absolute;
    border: 7px solid transparent;
}
.component-bubble.c-top:before    { top:    -7px; left: 7px; border-top:    none; border-bottom-color: #AAA; }
.component-bubble.c-top:after     { top:    -6px; left: 7px; border-top:    none; border-bottom-color: #FFF; }
.component-bubble.c-bottom:before { bottom: -7px; left: 7px; border-bottom: none; border-top-color:    #AAA; }
.component-bubble.c-bottom:after  { bottom: -6px; left: 7px; border-bottom: none; border-top-color:    #FFF; }
.component-bubble.c-left:before   { left:   -7px; top:  7px; border-left:   none; border-right-color:  #AAA; }
.component-bubble.c-left:after    { left:   -6px; top:  7px; border-left:   none; border-right-color:  #FFF; }
.component-bubble.c-right:before  { right:  -7px; top:  7px; border-right:  none; border-left-color:   #AAA; }
.component-bubble.c-right:after   { right:  -6px; top:  7px; border-right:  none; border-left-color:   #FFF; }

.component-list-nest { padding: 5px 0px; }
.component-list-highlight { border: 1px solid #AAF; background: #DEF; }

.component-qrcode {
    display: block;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    width: auto;
    height: auto;
}

/* --------------------------------------------------------------------- */
/* jivko css                                                             */
/* --------------------------------------------------------------------- */

.popover.popover-removable   > .close           { padding: 3px; }
.popover.popover-removable   > .close_btn .close { padding: 3px; }
.popover.popover-removable   > .popover-content { padding-right: 0px; margin-right: 20px }

.popover.popover-error                      { border-color: #C00; background-color: #FDD; }
.popover.popover-error.top   > .arrow       { border-top-color: #C00; }
.popover.popover-error.top   > .arrow:after { border-top-color: #FDD; }
.popover.popover-error       > .popover-content { padding: 4px 8px; }

.popover.popover-warning                    { border-color: #FC0; background-color: #FFD; }
.popover.popover-warning.top > .arrow       { border-top-color: #FC0; }
.popover.popover-warning.top > .arrow:after { border-top-color: #FFD; }

.popover.popover-success                    { border-color: #0C0; background-color: #DFD; }
.popover.popover-success.top > .arrow       { border-top-color: #0C0; }
.popover.popover-success.top > .arrow:after { border-top-color: #DFD; }

.popover.popover-info                       { border-color: #0AC; background-color: #DEF; }
.popover.popover-info.top    > .arrow       { border-top-color: #0AC; }
.popover.popover-info.top    > .arrow:after { border-top-color: #DEF; }

.input-help + .popover { width: 276px; }

.input-help     { color: #129cc8; cursor: pointer; float: right; }
.input-required { display: inline-block; font-size: 1.5em; line-height: 1px; color: #F00; cursor: default; }

.form-horizontal .input-label { text-align: right; }
/*.form-horizontal .input-help  { float: left; padding-top: 8px; }*/

.btn-epay { /* XXX/alexander: this class has its font and size set at the end of this file */
    padding: 6px 30px;
    border-radius: 2px;
}
.btn-epay.btn-primary {
    background-color: #2872a0;
    border-color: #5e94ff;

    -webkit-box-shadow: 0px 1px 2px rgba(000,000,000,0.3), inset 0px -1px 7px rgba(20,93,135,1.0);
       -moz-box-shadow: 0px 1px 2px rgba(000,000,000,0.3), inset 0px -1px 7px rgba(20,93,135,1.0);
            box-shadow: 0px 1px 1px rgba(192,192,192,1.0), inset 0px -1px 7px rgba(20,93,135,0.3);

    text-shadow: 0px -1px 0px rgba(82,119,195,1);
}
.btn-epay.btn-primary:hover { 
    background-color: #3d93f6;
    border-color:  #5e94ff; /*#3d93f6;*/
}
.btn-epay.btn-link { box-shadow: none; }

/* XXX/alexander: this is stupid and it is present only because even higher stupidity happened in epay.web.css */
.btn-xs-epay { padding: 0px 6px; line-height: 1em; }
.btn-sm-epay { padding: 0px 10px; }

.btn-epay           + .btn-epay { margin-left: 10px; }
.btn-block.btn-epay + .btn-epay { margin-left:  0px; }
.btn-sm.btn-epay { padding: 5px 20px; }

.well-epay {
    padding: 0px 19px;
    border: 0px;
    background: transparent;
    box-shadow: none;
}
.well-epay-footer {
    padding-top: 12px;
    margin-bottom: 30px;
    border-top: 1px solid #DDD;
}
.actions-container {
    margin: 10px 0;
}
.input-actions {
    text-align: center;
    margin-bottom: 20px;
}
.modal-footer > .input-actions {
    margin-bottom: 0px;
}

.panel-epay {
    border: 0px;
    border-radius: 0px;
    background-color: transparent;
    box-shadow: none;
}
.panel-epay .control-label {
    font-weight: normal;
}

.panel-epay > .panel-heading {
    color: #494949;
    text-align: center;
    border-bottom: 2px solid;
    border-color: #DDD;
    background-color: transparent;
}
.panel-epay.panel-default > .panel-heading { border-color: #DDD; }
.panel-epay.panel-primary > .panel-heading { border-color: #1088ae; }

.panel-epay > .panel-heading > .btn-group > .dropdown { /* panel controls */
    text-align: left;
}
.panel-epay > .panel-heading > .panel-title {
    font-size: 1.2em;
}
.panel-heading-responsive .panel-title { float: left; width: 80%; }
.panel-heading-responsive .btn-group { float: right; width: 20%; }
.panel-heading-responsive .btn-group button { float: right; }

.panel-epay > .panel-body {
    border-radius: 0px 0px 5px 5px;
    background-color: #F7F7F7;
    padding: 15px 25px;
}
.panel-epay > .panel-footer {
    background-color: transparent;
}

.header-epay {
    font-size: 1.2em;
    border: 0px;
    border-left: 5px solid #129cc8;
    padding: 10px 20px;
    /* margin: 20px -10px; */
    text-align: left;
    color: #129cc8;
    background-color: #F5F5F5; 
}

.nav-epay {
    margin-top: 8px;
    margin-bottom: 8px;
}
.nav-epay > li {
    display: inline-block;
    margin-right: 10px;
    margin-top: 8px;
    margin-bottom: 8px;
    min-width: 10%;
}
.nav-epay > li > a,
.nav-btn {
    background-color: #FFF;
    color: #888;
    border: 1px solid #CCC;
    border-radius: 4px;
    padding: 0px 15px;
    line-height: 25px;
    text-align: center;
}
.nav-epay > li:hover  > a,
.nav-epay > li.active > a,
.nav-btn:hover, .nav-btn.active-btn {
    background-color: #ecf0f1;
    color: #505e70;
}
.nav-epay > li > a > .close {
    font-size: 20px;
    position: absolute; /* nav > li is relative - bootstrap */
    top: 0;
    bottom: 0;
    right: 5px;
}

.nav-btn {
    font-size: 16px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.epay-system-message {
    padding: 20px 20px;
    margin-bottom: 20px;
    background: #FFD;
    border: 1px solid #CCC;
    border-radius: 2px;
    box-shadow: 1px 1px 2px 0px rgba( 0,0,0,0.3 );
}
.epay-system-message > div {
    margin-bottom: 10px;
    font-family: Roboto_Regular;
    font-size: 1.1em;
    color: #000;
}
.epay-system-message > small {
    margin-bottom: 10px;
    font-size: 1em;
    color: #999;
}

/* MEDIA QUIERIES */

@media only screen and (max-width: 768px) {
    .nav-epay > li {
        width: 100%;
    }
    .nav-epay > li > a {
        padding: 10px 0;
    }
    .nav-epay > li > a > .close {
        font-size: 40px;
    }
    .panel-heading-responsive .panel-title {
        width: 100%;
        padding: 15px 0;
        font-size: 17px;
    }
    .panel-heading-responsive .btn-group {
        width: 100%;
        text-align: center;
    }
    .panel-heading-responsive .btn-group button {
        font-size: 40px;
        float: none !important;
    }
    .btn-epay {
        white-space: inherit;
        width: 100%;
    }
    .btn-epay + .btn-epay {
        margin-top: 10px;
        margin-left: 0 !important;
    }
}

/* --------------------------------------------------------------------- */
/* jivko fonts                                                           */
/* --------------------------------------------------------------------- */

.btn-epay {
    font-family: PT_Sans_Regular;
    font-size: 14px;
}
.nav-epay {
    font-family: PT_Sans_Regular;
    font-size: 16px;
}
.link-epay {
    font-family: Roboto_Light;
    font-size: 13px;
}
.component-db-grid-header,
.component-db-grid-record {
    font-family: Roboto_Regular;
    font-size: 14px;
}
.panel-epay > .panel-heading > .panel-title {
    font-family: Roboto_Regular;
    font-size: 16px;
}