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

body { margin-bottom: 60px; }

footer { position: absolute; bottom: 0; width: 100%; height: 60px; line-height: 11px; }
    footer p { font-size: 14px; }

.center { text-align: center; }

.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5 { margin-top: 0; margin-bottom: 0; }

.card-footer .stats.important { font-size: 16px; font-weight: bold; }
    .card-footer .stats.important i { font-size: 24px !important; }
    .card-footer a { color: #1a0dab !important; }

/* Navigation */
.navbar { border-top-left-radius: 0; border-top-right-radius: 0; }
a.navbar-brand.logo { color: rgba(220,20,60, 0.9); text-shadow: 1px 2px 3px #222, 0 0 0 #000, 1px 2px 3px #222; font-size: 32px; font-weight: bold; }
    .logo:hover { color: rgba(220,20,60, 0.9); text-decoration: none; }

.breadcrumb { border: 1px solid #CCC; }

/* Form */
.bmd-form-group [class*=" bmd-label"], .bmd-form-group [class^=bmd-label] { position: unset }
.input-group input[type="text"] { margin-top: 3px; }
.field-validation-error { color: crimson; }
.dropdown-toggle-divider { border-right: 1px solid #AAA !important; }
.form-check, label { font-size: 14px; color: #555; }
.form-control { font-size: 15px; color: #000; }
.inputFileVisible { font-size: 14px; }
.fileUploadErrorsContainer { color: crimson; }

/* Table */
.datatable thead th { font-weight: bold !important; }
.datatable tr:nth-child(2n) td { background: #F9F9FF; }
.dataTables_length { display: inline-block;}
.dataTables_length select { padding: 0 3px; border: 1px solid #CCC; }
.dataTables_filter { float: right; }
.dataTables_filter [type="search"] { border: none; border-bottom: 1px solid #CCC; }
.dataTables_paginate { user-select: none; }
    .dataTables_paginate a { padding-right: 10px; z-index: 1; cursor: pointer; }
    .dataTables_paginate:last-child { padding-right: 0px; }
.table th { font-weight: bold; }

/* Modal */
.modal { z-index: 1100; }
.modal-dialog { width: 62% !important; max-width: 1100px; }
    .modal-dialog .modal-body { background: #EEE;  }
    .modal-dialog .modal-header { height: 50px; padding: 15px 24px 0 0; }
    .modal-dialog .modal-title { line-height: 21px; font-size: 21px; font-weight: bold; }
    .modal-dialog .modal-footer { padding-top: 20px !important; }
.modal-backdrop.show { z-index: 1099; background: #111; opacity: .62; }

/* Other Elements */
a.disabled { color: #AAA !important; }
.rounded-corner-right { border-top-right-radius: 3px !important; border-bottom-right-radius: 3px !important; }
.hidden { display: none; }

/*
.files li { list-style: none; border: 1px solid #333; background: #555; padding: 5px; display: inline-block; box-shadow: 0 0 5px #444; text-align: center; margin: 0 0 5px; color: #777; }
    .files li span { display: block; color: #EEE; }
    .files li a { color: #428BCA !important; font-size: 12px; }
*/

/* Support Slideout */
#SupportSlider { z-index: 10; position: fixed; left: -38%; top: 75px; width: 38%; background-color: #FFF; transition: left linear 0.5s; border: 1px solid #357ebd; -webkit-transform: translate3d(0,0,0); box-shadow: 0 0 5px #333; padding: 10px; }
#SupportSlider p { text-align: center; margin-right: -35px; float: right; border: 1px solid #357ebd; width: 25px; border-radius: 0 5px 5px 0; background: #428BCA; color: #FFF; font-weight: bold; cursor: pointer; padding: 5px; border-left: 1px solid #428BCA; box-shadow: 2px 0 5px #333; }
#SupportSlider.shown { left: 0; transition: left linear 0.5s; -webkit-transform: translate3d(0,0,0) }
#SupportDocsError { position: fixed; left: 0; top: 290px; width: 206px; }

.chatWrap .chatpanel { border: 1px solid #999;padding: 5px 1%; display: inline-block; width: 100%; vertical-align: top; margin-left: -1px; }
.chatWrap .chatpanel span { display: block; /*vertical-align: top;*/ clear: both; margin-bottom: 15px; }
.chatWrap .chatpanel span > label { float: left; color: darkblue; padding-right: 5px; margin-bottom: 0; }
.chatWrap .chatpanel span > label > sup { color: #999; font-weight: 100; }
.chatWrap .chatpanel span > label > sup > b { color: #8A0707; }

/* Tabs */
.tab-content { background: #FFF; border-radius: 3px; margin-top: -20px; padding: 15px; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .14), 0 7px 10px -5px rgba(76,175,80,.4); }

/******* Specific Pages *******/
/* Card Holder */
.tradeline-wrap .tradeline-card-title {
    width: 100%;
    margin-top: -25px !important;
    vertical-align: top;
    line-height: 1;
    white-space: nowrap;
    text-align: right;
    text-transform: uppercase;
    font-weight: bold !important;
}
.tradeline-wrap .card-title:nth-child(2) { display: inline-block; padding-left: 15px; }
.private-note input { border: none; height: 25px; }
.order-history .badge-pill { font-size: 13px; }
.unable-to-add-wrap { display: none; }

.video-wrapper { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.userAlertWrap .readAlert { margin: 1px; cursor: pointer; }
.urgentMessage-item { list-style: none; border-bottom: 1px solid #EEE; padding: 10px; }
    .urgentMessage-item:last-child { border-bottom: none; }
.cancel { background-position: left -240px !important; }
.icon { font-size: 16px; white-space: nowrap; padding-left: 28px; vertical-align: bottom; padding-top: 3px; background: transparent url("../Images/icons.png") no-repeat top left; display: inline-block; height: 24px; }

/* Broker */
.statusboard { padding-top: 5px; height: 50px; position: relative; }
.statusboard .status { border: 1px solid #AAA; width: 15px; padding: 5px 10px; background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); }
    .statusboard .status:nth-child(1).active { background: linear-gradient(to bottom, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%); }
    .statusboard .status:nth-child(2).active { background: linear-gradient(to bottom, rgba(255,250,200,1) 0%, rgba(235,225,0,1) 50%, rgba(255,250,200,1) 100%); }
    .statusboard .status:nth-child(3).active { background: linear-gradient(to bottom, rgba(170,255,170,1) 0%, rgba(0,170,0,1) 50%, rgba(170,255,170,1) 100%); }
    .statusboard .status-detail-wrap { position: absolute; overflow: hidden; height: 25px; width: 100%; list-style: none; padding: 0 0 0 12px; }
    .statusboard .status-detail-wrap:before { content: '?'; border: 1px solid #9c27b0; border-radius: 5px; background: #FFF; position: absolute; left: 0; font-size: 9px; vertical-align: top; line-height: 11px; padding: 0 4px; margin-top: 8px; }
    .statusboard .status-detail { height: 30px; line-height: 30px; vertical-align: middle; padding: 0 5px; white-space: nowrap; }
.statusboard .status-detail-wrap:hover { overflow: visible; background: #EEE; height: 170px; border: 1px solid #999; padding: 10px 10px 10px 30px; text-align: left; width: 500px; box-shadow: 0 0 3px #999; list-style:decimal; z-index: 99; }
    .statusboard .status-detail-wrap:hover:before { display: none; }
    .statusboard .status-detail-wrap:hover .status-detail { margin-top: 0 !important; }
    .statusboard .status-detail-wrap:hover .status-detail.active { border: 1px solid rgba(41, 184, 229, 1); background: rgba(41, 184, 229, 0.1); }

#TransactionDataTable .alert { margin-bottom: 0; padding: 15px; }

.slider-shown { top: 0; z-index: 10; background-color: #FFF; border: 1px solid #357ebd; -webkit-transform: translate3d(0,0,0); box-shadow: 0 0 5px #333; padding: 10px; margin-top: -20px; }
.mt-10 {margin-top: 10px !important}
.mb-40 {margin-bottom: 40px !important}

#support-toggle { position: absolute; margin: -20px auto 0 auto; left: 0; right: 0; text-align: center; border: 1px solid #357ebd; width: 150px; border-radius: 0px 0px 5px 5px; background: #428BCA; color: #FFF; cursor: pointer; padding: 5px; border-right: 1px solid #428BCA; box-shadow: 2px 0 5px #333; z-index: 100; }

.broker-nav>.card-header { border-radius: 3px; background: linear-gradient(60deg, #333, #000); }

.client-address-popup { display: block; border: 1px solid #777; border-radius: 3px; background: #DFD; background: linear-gradient(60deg, #26c6da, #00acc1); position: absolute; padding: 15px; margin: -125px 0 0 -10px; z-index: 11001; box-shadow: 3px 3px 10px #999; }
    .client-address-popup span { display: block; color: #FFF; }

.progress-container { color: green; font-size: 23px; line-height: 1.5; }

#EVerifyDatatable .dataTables_empty { display: none; }

hr.darkHrOnDark {
    border-bottom: 1px solid #333;
    border-top: 1px solid #222;
    width: 100%;
}

hr.hrOnDark {
    border-bottom: 1px solid #FFF;
    border-top: 1px solid #DDD;
    width: 100%;
}

hr.hrOnWhite {
    border-bottom: 1px solid #999;
    border-top: 1px solid #777;
    width: 100%;
}



.loader { border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid #9c27b0; border-bottom: 16px solid #9c27b0; width: 120px; height: 120px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: none }
@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg);  } 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

div.clientAgreementPopUp { height: 400px; overflow-y: scroll; background: #FFF; border: 1px solid #000; padding: 15px; margin-bottom: 15px; }
div.clientAgreementPopUp h2 { font-size: 1.4em !important; }
.alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }

.filter-option-inner-inner { text-transform: capitalize; font-size: 15px; color: #000; }
.filter-option { top: -5px !important; }

.lds-block { position:fixed;padding:0;margin:0;top:0;left:0;width:100%;height:100%;background:#888;opacity:.5;z-index:100001; }
.lds-wrapper { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100001;color:#fff; }

/* Toasts */
#toast-container {
    position: fixed;
    top: -100px; /* hidden above screen */
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: 300px;
    text-align: center;
    transition: top 0.4s ease;
}

    #toast-container.show {
        top: 20px;
    }

#toast {
    margin: 0;
}