/*  --------------------
    WL TWO COLUMN
    -------------------- */
.wl-column-wrapper {
    width: 100%;
    display: inline-block;
}

@media all and (max-width: 767px) {
    .wl-column-one, 
    .wl-column-two {
        width: 100%;
        display: block;
    }

    .wl-column-two {
        margin-top: 2em;
    } 
}

@media all and (min-width: 768px) {
    .wl-column-one,
    .wl-column-two {
        width: 47%;
        display: inline-block;
        vertical-align: top;
    }
    .wl-column-one {
        margin-right: 5%;
    }
}



/*  --------------------
    Button styles
    -------------------- */
.btn-primary {background-color: rgb(61, 155, 233); }
.btn-primary:hover,.btn-primary:focus {background-color: rgb(49, 132, 201);}

.btn-gray { background-color: silver; border-color: gray; }
.btn-gray:hover,.btn-gray[disabled]:hover,.btn-gray:focus { background-color: silver; border-color: gray;}

.alert.alert-danger a.btn-default {
  color: black;
  text-decoration: none;
}


/*  --------------------
    Modal styles
    -------------------- */
.modal-header, .modal-footer {
    border: none;
}
.modal-header {
    padding-bottom: 5px;
}
.modal-title {
    font-weight: bold;
}

/*  -------------------
    FOOTER styles
    ------------------- */

.footer {
    padding: 0.8em;
    background-color:#2B2D42;
    color:#ccc;
    text-align: center;
}

    @media print {
        .footer { display: none ; }
    }

.footer a, .footer a:visited {
    color:#ccc;
}
.footer a:hover {
    color:#eee;
}



/*  -------------------
	 ERROR styles
    ------------------- */
.wl-date label.error,
.wl-error-newline label.error {
    float: right;
    width: 100%;
}

label.error:empty {
  	display: none !important;
}

.error input, 
.error select, 
.error textarea {
    color: #b94a48;
    border-color: #b94a48;
}


.error input:focus, 
.error select:focus, 
.error textarea:focus {
    border-color: #953b39;
    -webkit-box-shadow: 0 0 6px #d59392;
    -moz-box-shadow: 0 0 6px #d59392;
    box-shadow: 0 0 6px #d59392;
}


.error input::-webkit-input-placeholder {
    color: #b94a48;
}
.error input:-moz-placeholder {
    color: #b94a48;
}
.error input::-moz-placeholder {
    color: #b94a48;
}
.error input:-ms-input-placeholder {
    color: #b94a48;
}
.error textarea::-webkit-input-placeholder {
    color: #b94a48;
}
.error textarea:-moz-placeholder {
    color: #b94a48;
}
.error textarea::-moz-placeholder {
    color: #b94a48;
}
.error textarea:-ms-input-placeholder {
    color: #b94a48;
}

.wl-inner-icon.error span,
.wl-inner-icon.error label,
.error span,
.error label {
    color: #b94a48;
    font-weight: normal !important;
} 


.wl-error-label {
  color: #b94a48; 
  margin-top: 0.2em; 
  margin-bottom: 1em; 
  font-size: 16px;
}



/*  -------------------
    Control-group icons
    ------------------- */
.wl-inner-icon {
    position: relative;
    margin-bottom: 5px;
}

.wl-inner-icon .glyphicon {
  	position: absolute;
  	padding: 15px;
  	pointer-events: none;
  	left: 0px;
  	color: silver;
}

.row > .wl-inner-icon .glyphicon { padding: 16px 28px; }

.wl-inner-icon input,
.wl-inner-icon select {
  	padding-left: 35px;
  	width:100%;
}

.wl-inner-icon .glyphicon {
  	position: absolute;
  	padding: 15px;
  	pointer-events: none;
  	left: 0px;
  	color: silver;
}





/*  ---------------------------
    LOADING SPINNER
    --------------------------- */

.spinner {
    border: 10px solid silver;
    border-radius: 100px;
    height: 100px;
    left: 50%;
    margin: -45px 0 0 -55px;
    opacity: 0;
    position: relative;
    top: 5em;
    width: 100px;
 
    animation: pulsate 1.3s ease-out;
    animation-iteration-count: infinite;
}

@keyframes pulsate {
    0% {
        transform: scale(.1);
        opacity: 0.0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

.glyphicon-spinning {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}





/*  ---------------------------
    FLOATING MESSAGE BOX AT TOP OF PAGE
    --------------------------- */

#floating-message {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    z-index: 99999;
}
#floating-message-text {
    background-color: #f9f9f9;
    font-size: 1.2em;
    border: 2px solid #999;
    opacity: 0.96;
    border-radius: 10px;
    -webkit-box-shadow: 2px 2px 4px 0px rgba(173, 173, 173, 0.75);
    -moz-box-shadow: 2px 2px 4px 0px rgba(173, 173, 173, 0.75);
    box-shadow: 2px 2px 4px 0px rgba(173, 173, 173, 0.75);
    color: black;
    margin: 0 auto;
}

@media all and (max-width: 767px) {
    #floating-message-text { width: 90%; }
}
@media all and (min-width: 768px) and (max-width: 800px) {
    #floating-message-text { width: 485px; }
}
@media all and (min-width: 801px) and (max-width: 850px) {
    #floating-message-text { width: 525px; }
}
@media all and (min-width: 851px) and (max-width: 900px) {
    #floating-message-text { width: 575px; }
}
@media all and (min-width: 901px) and (max-width: 950px) {
    #floating-message-text { width: 625px; }
}
@media all and (min-width: 951px) {
    #floating-message-text { width: 645px; }
}




/*  ---------------------------
    Give paragraphs more spacing
    --------------------------- */

.wl-added-p-spacing > p {
    margin: 1.5em 0;
}


/*  ---------------------------
    List styles
    --------------------------- */

ol.wl-big-numbers {

}

ol.wl-big-numbers li {
    margin-bottom: 1.5em;
}


/*  ---------------------------
    Alert styles
    --------------------------- */
.alert-gray {
    border-color: silver;
    background-color: #eee;
}



/*  ---------------------------
    General text/input formatting
    --------------------------- */
.wl-hidden {
    display: none !important;
}

@media all and (max-width: 499px) {
  .wl-visible-xxs   {  display: inline-block;  }
  .wl-hidden-xxs      {  display: none;  }
}

@media all and (min-width: 500px) {
  .wl-visible-xxs     {  display: none;  }
  .wl-hidden-xxs    {  display: inline-block;  }
}

a {
    cursor: pointer;
}

form {
    width: 100%;
}

hr.blue {
    margin-top: 30px;
    border-color: rgb(61, 155, 233);
}

/* hide input=number up/down arrows */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance:textfield;
}




/*  ---------------------------
    Typeahead (autocomplete)
    --------------------------- */
span.twitter-typeahead .tt-menu,
span.twitter-typeahead .tt-dropdown-menu {
  cursor: pointer;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 200px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}
span.twitter-typeahead .tt-dataset .empty-message {
  padding: 3px 20px;
  color: #f44336;
}

span.twitter-typeahead .tt-suggestion {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
}
span.twitter-typeahead .tt-suggestion.tt-cursor,
span.twitter-typeahead .tt-suggestion:hover,
span.twitter-typeahead .tt-suggestion:focus {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  background-color: #337ab7;
}
.input-group.input-group-lg span.twitter-typeahead .form-control {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}
.input-group.input-group-sm span.twitter-typeahead .form-control {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
span.twitter-typeahead {
  width: 100%;
}
.input-group span.twitter-typeahead {
  display: block !important;
  height: 34px;
}
.input-group span.twitter-typeahead .tt-menu,
.input-group span.twitter-typeahead .tt-dropdown-menu {
  top: 32px !important;
}
.input-group span.twitter-typeahead:not(:first-child):not(:last-child) .form-control {
  border-radius: 0;
}
.input-group span.twitter-typeahead:first-child .form-control {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group span.twitter-typeahead:last-child .form-control {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.input-group.input-group-sm span.twitter-typeahead {
  height: 30px;
}
.input-group.input-group-sm span.twitter-typeahead .tt-menu,
.input-group.input-group-sm span.twitter-typeahead .tt-dropdown-menu {
  top: 30px !important;
}
.input-group.input-group-lg span.twitter-typeahead {
  height: 46px;
}
.input-group.input-group-lg span.twitter-typeahead .tt-menu,
.input-group.input-group-lg span.twitter-typeahead .tt-dropdown-menu {
  top: 46px !important;
}




/*  ---------------------------
    Result tables
    --------------------------- */

.wl-empty-result p {
  font-size: 1.2em;
  margin: 1em 0;
}

.wl-empty-result a.btn {
  font-size: 1em;
}


.wl-display-table {
  display: table;
}

.wl-display-table-row {
  display: table-row;
}

.wl-display-table-cell {
  display: table-cell;
  padding: 1em;
  vertical-align: top;
}