/* ---------
  Globals
------------*/

body {
    overflow-y: scroll;
}

.btn:hover, .btn:focus {
    background-position: 0 0;
    transition: none;
}

.ngcp-lang-flag {
    padding-right: 10px;
}

.btn [class^="icon-"] {
    margin-top: 4px;
}

/* fix bootstrap dropdown menu for mobile */
.dropdown-backdrop {
    display: none;
}

/* add horizontally scrollable pre (to bootstrap styles) */
pre.pre-x-scrollable {
    overflow: auto;
    -ms-word-wrap: normal;
    word-wrap: normal;
    overflow-wrap: normal;
    white-space: pre;
}

/* ---------
  The modal
------------*/

div.ngcp-modal {
    max-width: 816px;
    width: 100%;
    margin: -275px 0 0 -408px;
    top: 50%;
    left: 50%; /* override responsive css (bootstrap-responsive.css) */
    display: block;
}
@media (max-width: 830px) {
    div.ngcp-modal {
        margin-left: -50%;
    }
}
@media (max-height: 550px) { /* our modal is 550px in total */
    /* takes care, buttons in .modal-footer stay visible */
    div.ngcp-modal {
        top: 0;
        bottom: 0;
        overflow-y: scroll;
        margin-top: 0;
    }
}

div.ngcp-modal .table thead tr th, div.modal .table tbody tr td {
    padding-top: 4px;
    padding-bottom: 4px;
}

div.ngcp-modal .help-inline {
    clear: both;
    float: left;
}

.tooltip {
    /* make sure to put the tooltip over the modal */
    z-index: 2000 !important;
    position: fixed !important;
}

div.ui-datepicker {
    /* make sure to put the datepicker over the header */
    z-index: 2000 !important;
}

dt.ui_tpicker_time_label,
dt.ui_tpicker_hour_label,
dt.ui_tpicker_minute_label,
dd.ui_tpicker_time
{
    color: gray;
}

button.ui-datepicker-current.ui-state-hover {
    border: 5px solid blue;
}

/* remove left margin for repeatable elements */

div.ngcp-modal div.modal-body div.control-group.hfh-rep {
    margin-left: 0;
}

div.ngcp-modal div.modal-body div.control-group.hfh-rep div.controls {
    margin-left: 0;
}

div.ngcp-modal div.modal-body div.control-group.hfh-rep div.controls div.hfh-rep-field .controls {
    margin-left: 180px;
}

div.hfh-nested-rep-block {
    margin-bottom: 0px !important;
}
div.hfh-nested-rep-block div.controls div.hfh-repinst div.controls {
    margin-left: 0px !important;
}
div.hfh-nested-rep-block div.controls div.hfh-repinst div.controls div.control-group {
    display: inline-block !important;
    margin-bottom: 0px !important;
}
div.hfh-nested-rep-block div.controls div.hfh-repinst div.controls div.control-group label {
    text-align: left;
    width: auto;
    margin-right: 10px;
}
div.hfh-nested-rep-block div.controls div.hfh-repinst div.controls div.control-group div.controls {
    float: left;
}
div.hfh-nested-rep-block div.controls div.hfh-repinst div.controls div.control-group div.controls input {
    width: 30px;
    margin-right: 10px;
}

div.ngcp-modal div.modal-body div.control-group.hfh-rep-block div.control-group.hfh-repinst div.controls {
    margin-left: 0;
}

div.ngcp-modal div.modal-body div.control-group.hfh-rep-block div.control-group.hfh-repinst div.controls div.control-group {
    margin-left: 0;
}

div.ngcp-modal div.modal-body div.control-group.hfh-rep-block div.control-group.hfh-repinst div.controls div.control-group div.controls {
    margin-left: 180px;
}

/* align timeset elements in one row */

div.ngcp-timeset-row {
    margin-left: 180px;
}

div.ngcp-timeset-row label {
    margin: 0 0 5px 0;
    display: block;
    width: 100% !important;
    text-align: center !important;
}

div.ngcp-timeset-widget {
    width: 86px;
    position: relative;
    float: left;
    margin: 0 5px 10px 0;
    padding: 3px;
    border: 1px solid #eeeeee;
}

div.ngcp-timeset-widget:last-of-type  {
    margin-right: 0;
}

div.ngcp-timeset-field {
    width: 100%;
    margin: 0 !important;
    position: relative;
    display: block;
}

div.ngcp-timeset-field div.controls {
    margin: 0 !important;
}

/* align billing network block elements in one row */

div.ngcp-network-block-row {
    margin-left: 180px;
}

/* align duration/interval elements in one row */

div.ngcp-interval-row {
    margin-left: 180px;
}

/* align profile+network elements in one row */

div.billingmappingsblock_wrapper {
    margin-left: 180px;
    margin-bottom: 20px;
}

div.billingmappingstimeline_wrapper {
    /*min-height: 300px;*/
}

div.ngcp-profile-network-row-margin {
    margin-left: 180px;
}

div.ngcp-profile-network-row {
    /*margin-left: 180px;*/
}

div.ngcp-profile-network-row div.controls {
    margin-left: 0px !important;
}

div.ngcp-profile-network-row > div:first-of-type {
    float: left;
    width:49%;
    margin-right:1%;
}
div.ngcp-profile-network-row > div:last-of-type {
    float: left;
    width:49%;
    margin-left:1%;
}

/* align cf destination radio group */
div.ngcp-destination-row {
    margin-left: 180px !important;
}

div.ngcp-destination-row-simple {
    margin-left: 0px !important;
}

input.ngcp-destination-field {
    width: 30%;
}


/* align buttons in one row in modal-footer */

div.modal-footer div.control-group div.controls {
    margin-left: 5px;
}
div.modal-footer div.control-group div.controls div.form-actions.pull-right {
    margin-left: 5px;
}

/* ---------
  Datatable (main one)
------------*/

table.ngcp-datatable {
    margin: 5px 0;
    clear: both;
}

table.ngcp-datatable .header {
    cursor: pointer;
}

/* tfoot styles from application header styles */
table.ngcp-datatable tfoot td {
    color: #FFF;
    border-right: 1px solid #3E662C;
    border-left: 1px solid #77B75A;
    box-shadow: 0px 1px 0px #95C77D inset;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

table.ngcp-datatable tfoot tr {
    background-color: #568D3D;
    background-image: linear-gradient(to bottom, #5F9B43, #497734);
    background-repeat: repeat-x;
}

table.ngcp-datatable .header:after {
  content: "";
  float: right;
  margin-top: 7px;
  border-width: 0 4px 4px;
  border-style: solid;
  border-color: #fff transparent;
  visibility: hidden;
}
table.ngcp-datatable .header:hover:after {
  visibility: visible;
}
table.ngcp-datatable .headerSortDown:after, table.ngcp-datatable .headerSortDown:hover:after {
  visibility: visible;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}
table.ngcp-datatable .headerSortUp:after {
  border-bottom: none;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff;
  visibility: visible;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}

.ngcp-actions-column { /* TODO: use responsive design */
    width: 10px;
    white-space: nowrap;
}

div.ngcp-separator {
    margin-top:10px;
}

/* make inline-form inline *sic* */
form.form-inline div.control-group {
    float: left;
}
form.form-inline div.control-group label.control-label {
    float: left;
    margin-right: 5px;
    padding-top: 5px;
}
form.form-inline div.control-group div.controls {
    float: left;
    margin-right: 20px;
}

/* shift statistics canvas a bit to the right */
div.ngcp-statistics {
    margin: 30px 0 0 30px;
}

div.ngcp-plot {
    margin-bottom: 30px;
}

div.ngcp_dt_top_elements {
    position: relative;
    margin-top: 5px;
}

div.ngcp_dt_top_elements > div:first-child {
    float: left;
}

div.ngcp_dt_top_elements > div:first-child label {
    width: auto;
}

div.ngcp_dt_top_elements > div:first-child + div {
    float: right;
}

div.ngcp_dt_top_elements > div:first-child + div + div {
    position: absolute;
    bottom: 0;
    width: 100%;
}

div.ngcp_dt_top_elements > div:first-child + div + div > div {
    margin:0 auto;
    text-align: center;
}

div.ngcp_dt_top_elements label,
div.ngcp_dt_top_elements input,
div.ngcp_dt_top_elements button,
div.ngcp_dt_top_elements select,
div.ngcp_dt_top_elements textarea {
    font-size: 12px;  /* bootstrap standard size */
}

div.ngcp_dt_top_elements input {
    height: 18px;
}

.ngcp_current_edit td  {
    background: #dff0d8 !important;
    background-color: #dff0d8 !important;
}

/* ---------
  sw_actions (Action Buttons)
------------*/

div.sw_actions {
    visibility: hidden;
}

div.sw_actions a {
    display:inline;
    line-height:16px;
    margin-left:5px;
}

div.sw_actions a:first-child {
    margin-left:0px;
}

div.sw_actions a i {
    line-height:1em;
    margin-top:2px;
}

/* ---------
  Datatable (without closer spec)
------------*/

div.dataTables_length label {
    width: 460px;
    float: left;
    text-align: left;
}

div.dataTables_filter, div.dataTables_paginate {
    float: right;
}

div.dataTables_filter label {
    float: left;
    margin-left: 5px;
}

input.ngcp-datepicker {
    width: 9em;
}

@media (max-width: 300px) {
    div.dataTables_filter {
        float: none;
    }
}

div.dataTables_info {
    padding-top: 8px;
}

div.dataTables_paginate {
    float: right;
    margin: 0;
}

div.dataTables_paginate a.btn {
    margin-left: 3px;
}

/* ---------
  Datatable Field (inside modal)
------------*/

div.ngcp-modal .dataTables_wrapper {
    /*padding: 5px;*/
}

div.ngcp-modal .control-group.error .dataTables_wrapper {
    border: 1px solid #B94A48;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -mozilla-border-radius: 3px;
}

div.ngcp-modal .dataTables_wrapper input[type="text"] {
    line-height: 10px;
    height: 10px;
}

div.ngcp-modal .control-group.error .dataTables_wrapper input[type="text"] {
    border: 1px solid #cccccc;
}

/* ---------
  Preferences view
------------*/

.ngcp-entry-disabled {
	text-decoration: line-through;
}

.ngcp-modal-preferences .control-group .control-label {
    width: auto;
    padding-right: 10px;
}

.ngcp-modal-preferences .control-group .controls {
    overflow: hidden;
}

/* ---------
  Widgets
------------*/

.plan .plan-features {
    min-height:135px; /* 3 rows */
}

.plan .ngcp-green-ok {
    color:#0f0;
}

.plan .ngcp-orange-warning {
    color:#ff6700;
}

.plan .ngcp-red-error {
    color:#ff0000;
}

.ngcp-quickform div.form-actions {
    padding-left: 0px;
}

.plan .plan-features.large {
    min-height:325px;
}

.plan .plan-features div.row-fluid [class*="span"] {
    min-height: 10px;
    text-align: left;
}

/* -------------
  Various form fields
----------------*/
.modal-body .control-group .controls > input[type="text"],
.modal-body .control-group .controls > input[type="password"],
.modal-body .control-group .controls > select {
   padding: 4px 0;
   width: 100%;
}
.modal-body .control-group .controls input.ngcp_pref_input {
    width: 220px;
    float: left;
}
.modal-body .control-group .controls input.ngcp_e164_cc {
    width: 15%;
}
.modal-body .control-group .controls input.ngcp_e164_ac {
    width: 15%;
}
.modal-body .control-group .controls input.ngcp_e164_sn {
    width: 67.9%;
}
.modal-body .control-group .controls input.ngcp_e164_snbase {
    width: 60%;
}
.modal-body .control-group .controls input.ngcp_e164_snlength {
    width: 7.1%;
}
.modal-body div.ngcp_field_inline {
    display: inline-block;
    *display: inline;
    width: 218px;
}
.modal-body div.ngcp_field_inline input {
    width: 206px !important;
    padding: 4px 6px !important;
}

#number_patterns_extra > label {
    display: inline;
    cursor: not-allowed;
}

textarea.ngcp-autoconf-area {
    width: 580px;
}

textarea.ngcp-provtemplate-area {
    width: 580px;
}

/* -------------
  Login Page
----------------*/
div.login {
    width: 390px;
}

.login-fields input {
    color: #444;
}

.login-actions div label.checkbox {
    font-size: 12px;
}

/*callforwards announcement_id field for the different destinations*/
.ngcp-destination {
  display: none;
}

/* -------------
  Reseller Bradnings
----------------*/

.color-box {
    display: inline-block;
    width: 50px;
    border: 1px solid black;
    border-radius: 5px;
}

/* vim: set tabstop=4 syntax=css expandtab: */