/* Font-awesome*/
.fa-mediumSize {
    font-size:1.3em;
}


/* FOR SHARED DOWNLOAD BAR PANEL */
#download-bar-panel {
    position: fixed;
    overflow: auto;
    color: white;
    width: 100%;
    z-index: 4;
    bottom: 0px;
}
/* for all pages with panel, room at bottom */
.container-fluid.top {
    padding-bottom: 180px;
}
/* for toggle header */
#download-bar-panel .toolbar-header {
    border-bottom: 50px solid #555;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    display: block;
    margin: 0 auto;
    height: 0;
    width: 225px;
    cursor: pointer;
}
#download-bar-panel .toolbar-header h5 {
    position: relative;
    display: inline-block;
    top: 25px; 
    left: 50%;
    transform: translate(-50%,-50%);
}
/* for progress bar */
#download-bar-panel .toolbar-bar {
    background-color: #555;
    display: block;
    position: relative;
    border-bottom: 1px solid black;
}
#download-bar-panel .toolbar-bar .progress {
    display: inline-flex;
    background-color: darkgrey;
    min-width: 250px;
    max-width: 600px;
}
#download-bar-panel .toolbar-bar .progress-bar {
    background-color: white;
}
#download-bar-panel .toolbar-bar .progress-bar-info {
    position: relative;
    background-color: #3587BC;
    color: white;
    z-index: 7;
}
#download-bar-panel .progress-bar-info #d-loading {
    font-weight: bold;
}
#download-bar-panel .progress-bar-info #d-loading, #download-bar-panel .progress-bar-info #download-title, #download-bar-panel .progress-bar-info #download-percentage, #download-bar-panel .progress, #download-bar-panel .progress-bar-info #cancel-download, #download-bar-panel .powered-by p {
    margin: 10px 10px 10px 20px;
}
#download-bar-panel .progress-bar-info #cancel-download {
    float: right;
    padding: 2px 20px;
    border: none;
    background-color: white;
    border-radius: 4px;
    cursor: pointer;
}

/* for panel body */
#download-bar-panel .toolbar-body {
    display: none;
    background-color: #555;
    padding: 20px;
}
#download-bar-panel .progress-bar-info #download-percentage, #download-bar-panel .toolbar-body h6, #download-bar-panel .toolbar-body #clear-queue, #download-bar-panel .toolbar-body #clear-queue-hidden, #download-bar-panel .list-group-item .fa-bars, #download-bar-panel .list-group-item .fa-check {
    display: inline-block;
    margin-right: 10px;
}
#download-bar-panel .toolbar-body #clear-queue-hidden {
    visibility: hidden;
}
#download-bar-panel .toolbar-body #download-queue, #download-bar-panel .toolbar-body #download-log {
    border: 1px solid white;
    height: 20vh;
    margin: 10px 0;
    overflow: auto;
}
#download-bar-panel #download-queue .list-group, #download-bar-panel #download-log .list-group {
    padding: 0;
    width: 100%;
}
#download-bar-panel #download-queue .list-group-item, #download-bar-panel #download-log .list-group-item {
    width: 100%;
    max-height: 40px;
    padding: 2px 0 2px 10px;
    background-color: transparent;
    border: none;
}
#download-bar-panel .list-group-item .fa-check {
    color: deepskyblue;
}
#download-bar-panel .toolbar-body #download-folder {
    margin: 5px 0;
    background-color: darkgrey;
}
/* for download panel in mobile view */
@media (max-width: 768px) {
    /* make mobile download panel scrollable */
    #download-bar-panel {
        max-height: calc(100vh - 140px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* for mobile safari */
    }
}



/*** THE DEFAULTS ***/

/* default button */
.the-default-button {
    background-color: #3587BC !important;
    color: white !important;
}
.the-default-button:hover {
    background-color: #2B6398 !important;
    color: white !important;
}
/* button with only text */
button.stripped {
    background-color: transparent;
    color: #3587BC;
}
/* all buttons with same border-radius */
.btn {
    border-radius: 6px !important;
}
/*  the default input */
.the-default-input {
    background-color: white;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.25);
}


/* default bootstrap select button */
.bootstrap-select button, .bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:active, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
    background-color: white !important;
    border: 1px solid #3587BC;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.20);
    font-size: 13px !important;
}
.bootstrap-select .dropdown-menu {
    font-size: 13px !important;
}

/* FOR CUSTOM CHECKBOXES AND RADIO BUTTONS */
    /* making own checkbox with button and icon */
    /* the checkbox */
.the-default-checkbox button {
    width: 20px;
    height: 20px;
    background-color: white;
    border: 1px solid grey;
    color: #3587BC;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}
/* radio button */
.the-default-radio button {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    border: 1px solid grey;
    color: #3587BC;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}
.the-default-checkbox button:focus, .the-default-radio button:focus {
    outline: 0;
}
.the-default-checkbox input:not(.disabled):hover ~ button, .the-default-radio input:not(.disabled):hover ~ button {
    background-color: rgba(0, 0, 0, 0.03);
}
    /* hide actual checkbox or radio button */
.the-default-checkbox input, .the-default-radio input {
    position: absolute;
    opacity: 0;
    z-index: 3;
    width: 20px;
    height: 30px;
    cursor: pointer;
}
    /* for disabled checkbox or radio button or clickbutton */
.the-default-checkbox input.disabled, .the-default-radio input.disabled, .default-clickbutton input.disabled, .clickbutton-holder input.disabled  {
    cursor: default;
}
    /* the checkmark or radio button icon */
.the-default-checkbox i, .the-default-radio i {
    font-size: 12px;
    position: relative;
    bottom: 5px;
    visibility: hidden;
}
    /* the label */
.the-default-checkbox label span, .the-default-radio label span {
    display: inline-block;
    vertical-align: middle;
}
.the-default-checkbox label, .the-default-radio label {
    margin: 1px 0;
    cursor: default;
}
    /* functionality for checkbox and radio button */
.the-default-checkbox input:checked ~ button i, .the-default-radio input:checked ~ button i {
    visibility: visible;
}



/* default clickbutton that changes colour */
.default-clickbutton {
    width: 150px;
    height: 40px;
    margin: 5px;
    background-color: white;
    border: 1px solid grey;
}
.clickbutton-holder {
    text-align: center;
    margin: 10px 0;
}
    /* hide actual checkbox */
.clickbutton-holder input {
    position: absolute;
    opacity: 0;
    z-index: 3;
    width: 160px;
    height: 50px;
    cursor: pointer;
}
    /* functionality for checkbox in clickbutton */
.clickbutton-holder input:checked ~ button {
    visibility: visible;
    background-color: #3587BC;
    color: white;
}


/* default table */
.the-default-table thead, .the-default-table tbody {
    text-align: center;
}
.the-default-table th {
    background-color: #626567;
    color: #FFFFFF;
    padding: 1px 10px;
}
.the-default-table tbody tr:nth-child(odd) {
    background: #F4F6F6;
}
.the-default-table tbody tr:nth-child(even) {
    background: #fff;
}
.the-default-table th, .the-default-table td {
    border: 1px solid darkgrey;
    white-space: nowrap;
}

/* for web agent checkboxes */
.top-two-web {
    margin-right: 5px;
}
.bottom-two-web {
    margin-left: 5px;
}

/* default finishing buttons */
.finish-buttons {
    margin: 30px 0 10px 0;
    text-align: center;
}

/* FOR DYNAMIC AND HIDDEN CONTENT  */
.dynamic-content, .hider, #sidebar-hidden, .sidebar-header-hidden, .collapsible {
    display: none;
    padding-top: 1%;
}
.wrapper {
    display: flex;
    align-items: stretch;
}

/* default Web Agent */
.web-agent-content .links {
    text-align: center;
    border-bottom: 1px solid grey;
    padding-bottom: 20px;
}
.web-agent-content thead h4 {
    color: #646464;
    text-align: center;
    margin-top: 10px;

}
.web-agent-content .links a {
    display: inline-block;
    padding: 0.5% 3%;
    margin-right: 1%;
    background: #EEEBF0;
    border: 1px solid #3587BC;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.20);
    border-radius: 6px;
    font-size: 14px;
    color: #3587BC;
    letter-spacing: 0;
    text-shadow: 0 1px 0 rgba(255,255,255,0.50);
}
.web-agent-content .links a:hover {
    background-color: white;
    color: #3587BC;
}
.web-agent-content {
    border: none;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}
.web-agent-content .row thead tr th {
    text-align: center;
    padding: 3% 0;
}
.web-agent-content .loc-net-buttons {
    text-align: center;
    font-size: 0; /* setting the font-size to 0 so there's no space between the buttons */
    padding: 2% 0 5% 0;
}
.web-agent-content .loc-net-buttons button {
    height: 40px;
    width: 80px;
    overflow: hidden;
    background: #EEEBF0;
    border: 1px solid #3587BC;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.20);
    border-radius: 6px;
    font-size: 14px; /* setting the font-size because it was set to 0 by outer div*/
    color: #3587BC;
    letter-spacing: 0;
    text-shadow: 0 1px 0 rgba(255,255,255,0.50);
}
.web-agent-content .web-agent-info {
    margin-left: 2vw;
}
.web-agent-content a {
    cursor: pointer;
}
.web-agent-content .web-agent-info .row {
    width: 100%;
}
.web-agent-content .header {
    text-align: center;
    margin-bottom: 20px;
}
    /* initialize with "Local" button */
.web-agent-content #local {
    background-color: #3587BC;
    color: white;
}
.web-agent-content .save {
    text-align: center;
    padding-bottom: 3%;
}
.web-agent-content .web-agent-info .col-lg-3 button {
    border: none;
}

/* default modal */
.x-button {
    background-color: #3587BC;
    border: none;
    color: white;
    border-radius: 50%;
    margin-left: 90%;
    margin-bottom: 1%;
    cursor: pointer;
}
/* anythhing using .the-content has the #E6EFF2 background */
.the-content {
    background-color: #E6EFF2;
    color: black;
    padding: 3%;
    border-radius: 8px;
}
/*.modal-content, .modal-body, .modal-dialog {
    background: transparent;
    border: none;
}*/

.modal-transparent {
    background: transparent;
    border: none;
}














/*** Admin/Profile.cshtml CSS ***/
#profile-cshtml {
    font-family: Avenir-Medium;
}

    /* default label letter CSS */
#profile-cshtml #general label, #profile-cshtml #notifications label, #profile-cshtml #billing label {
    letter-spacing: 0.59px;
    color: #3587BC;
}
/* all forms take up width of container */
#profile-cshtml form {
    width: 100%;
}


    /* FOR SIDEBAR */
    /* for sidebar */
#profile-cshtml #sidebar {
    min-width: 235px;
    max-width: 235px;
    min-height: 100vh;
    background: #fff;
    color: #3587BC;
    box-shadow: 0 12px 9px 3px rgba(0,0,0,0.26);
    transition: all 0.3s;
}
    
#profile-cshtml #sidebar h3 {
    margin-left: 40px;
    border-bottom: 5px solid #3587BC;
}
#profile-cshtml #sidebar a {
    text-indent: 30px;
}
    /* the two toggle buttons toggle between visibility of each other */
#profile-cshtml #sidebarCollapseInner.activate, #profile-cshtml #sidebarCollapse {
    visibility: hidden;
    background-color: #3587BC;
}
#profile-cshtml #sidebarCollapseInner, #profile-cshtml #sidebarCollapse.activate {
    visibility: visible;
    background-color: #3587BC;
}
#profile-cshtml .wrapper #sidebar a, #profile-cshtml #sidebar a:hover, #profile-cshtml #sidebar a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}
#profile-cshtml #sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}
#profile-cshtml #sidebar ul li a:hover {
    color: #fff;
    background: #3587BC;
}
#profile-cshtml #sidebar ul li a.active {
    color: #fff;
    background: #3587BC;
}
#profile-cshtml #sidebar.active {
    margin-left: -250px;
}
    /* for hidden mobile sidebar */
#profile-cshtml #sidebar-hidden {
    background: #3587BC;
}
#profile-cshtml #sidebar-hidden a {
    color: #fff;
}
#profile-cshtml .sidebar-header-hidden h3 {
    display: inline-block;
    font-size: 20px !important;
    border-bottom: 5px solid #3587BC;
}
#profile-cshtml .sidebar-header-hidden #changing-title {
    border: none;
}
#profile-cshtml #sidebar-hidden a {
    display: block;
    width: 100%;
    padding: 7px 0;
    text-align: center;
}
#profile-cshtml #sidebar-hidden #gen a {
    /* initialize with General link active */
    background-color: #2374a8;
}
@media (max-width: 768px) {
    #profile-cshtml #sidebar {
        display: none;
    }
    /* for mobile menu */
    #profile-cshtml #sidebarCollapse {
        width: 100%;
        text-align: right;
        visibility: visible;
    }
    #profile-cshtml .sidebar-header-hidden {
        display: block;
    }
}    


/* FOR CONTENT */
#profile-cshtml #content {
    padding: 0 0 5% 1%;
    width: 100%;
    background-color: #E6EFF2;
    min-height: 100vh;
}
#profile-cshtml #notifications p {
    text-align: center;
}
#profile-cshtml #notifications {
    margin: 0 auto;
    width: 100%;
    max-width: 900px;
}
    /* for save and cancel buttons */
#profile-cshtml .to-save, #profile-cshtml .to-cancel {
    letter-spacing: 0.13px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
    border-radius: 6px;
}
#profile-cshtml .to-cancel {
    color: #9B9B9B;
    background: #EEEBF0 !important;
    margin-right: 10px;
}
    /* for table */
#profile-cshtml #content .normal-table-wrapper {
    width: 99%;
    overflow-x: auto;
}
#profile-cshtml #content .normal-table-wrapper .normal-table {
    width: 100%;
    border: 1px solid #303030;
}
#profile-cshtml #content .normal-table th {
    font-size: 15px;
}
#profile-cshtml #content .normal-table tbody {
    font-size: 14px;
}
    /* for billing */
#profile-cshtml #billing .col-lg-12 {
    margin: 0 auto;
    width: 100%;
    max-width: 500px;
}
#profile-cshtml #billing .divider {
    padding: 20px 0;
}
    /* collapsible content*/
#profile-cshtml .collapsible {
    margin-bottom: 1%;
}
#profile-cshtml #network-settings .collapsible {
    padding: 0 10px;
}
#profile-cshtml .collapse-button {
    display: block;
    width: 99%;
    height: 50px;
    text-align: left;
    font-size: 25px;
    margin-top: 2px;
}
#profile-cshtml .collapse-button div {
    display: inline-block;
    text-indent: 20px;
}
#profile-cshtml #network-settings i, #profile-cshtml #admin-logins i, #profile-cshtml #local-admin i {
    cursor: pointer;
}
#profile-cshtml #network-settings .fa-search, #profile-cshtml #admin-logins .fa-search, #profile-cshtml #local-admin .fa-search {
    color: #3587BC;
}
#profile-cshtml #network-settings .net-settings-settings label {
    display: block;
}
#profile-cshtml #network-settings button.dropdown-toggle, #profile-cshtml #network-settings .bootstrap-select {
    max-width: 500px !important;
}
#profile-cshtml #network-settings .network-save-dropdowns, #profile-cshtml #network-settings .bootstrap-select {
    display: inline-block;
}
#profile-cshtml #network-settings .network-save-dropdowns {
    margin-left: 30px;
}
#profile-cshtml #network-settings {
    padding-bottom: 7%;
}
#profile-cshtml .fa-times-circle {
    color: red;
}
#profile-cshtml #admin-logins .normal-table-wrapper, #profile-cshtml #local-admin .normal-table-wrapper {
    padding: 0 20px;
}
    /* modal content */
#profile-cshtml .modal-body legend {
    font-size: 15px;
}
#profile-cshtml .the-content h2, #profile-cshtml .the-content p {
    text-align: center;
    margin-bottom: 3%;
}
#profile-cshtml .add {
    background-color: #F4F6F6;
    border: 1px solid #3587BC;
    color: #3587BC;
    margin: 1% 0;
}
#profile-cshtml .add i {
    margin-right: 5px;
}















/*** Market/Index.cshtml and Inbox/Index.cshtml CSS ***/
/* FOR FLEX PROPERTY */
.market-inbox .flex-container {
    display: flex;
    flex-wrap: wrap;
    zzjustify-content: center;
}

.market-inbox #sidebar {
    min-width: 250px;
    max-width: 250px;
    min-height: 100vh;
    transition: margin 0.3s;
}
/* for toggle sidebar */
.market-inbox .beside-toggle {
    width: calc(100% - 40px); /* sidebar takes into account toggle button */
}
.market-inbox .beside-toggle-sidebar {
    zzpadding-right: 10px; /* balances out other side of sidebar */
    border-top: 1px solid lightgrey;
    border-bottom: 1px solid lightgrey;
    box-shadow: 3px 3px 5px lightgrey;
    margin-bottom: 20px;
}
/* scrollbar only comes on hover */
.market-inbox .beside-toggle-sidebar:hover {
    overflow-y: auto;
}
.market-inbox #sidebarCollapseInner {
    position: absolute;
    top: 0;
    margin: 0 0 10px 2px;
}
.market-inbox #sidebarCollapse {
    vertical-align: top;
    margin: 0 0 2px 0;
}
.market-inbox .beside-toggle, .market-inbox #sidebarCollapseInner, .market-inbox #sidebarCollapse {
    display: inline-block;
}
.market-inbox #sidebar.active {
    margin-left: -255px; /* takes into account an extra 15px for the margin from the left of the viewport */
}
/* the two toggle buttons toggle between visibility of each other */
.market-inbox #sidebarCollapseInner.activate, .market-inbox #sidebarCollapse {
    visibility: hidden;
}
.market-inbox #sidebarCollapseInner, .market-inbox #sidebarCollapse.activate {
    visibility: visible;
}
@media (max-width: 768px) {
    /* ALL CSS FOR VIEWPORT WIDTH <= 768px */
    /* when the screen is small, the sidebar takes up the entire width and toggles with the content */
    /* when the screen is small, the sidebar is collapsed by default */

    .sidebar-outer-button-default, .content-default {
        display: block !important;
        visibility: visible !important;
    }
    .sidebar-default {
        display: none !important;
    }

    .market-inbox #sidebar {
        /* change display to visibility to add transition effect */
        display: block;
        min-width: 100%;
    }
    .market-inbox .beside-toggle-sidebar {
        height: auto;
    }
    /* for settings bar */
    .market-inbox .settings-bar {
        text-align: center;
    }
    .market-inbox #content {
        display: none;
    }
    .market-inbox #sidebar.active {
        display: none;
    }
    .market-inbox #content.active {
        display: block;
    }
    /* for list view */
    .market-inbox .tab-content {
        display: none;
    }
    .market-inbox .list-group td:nth-child(4), .market-inbox .list-group td:nth-child(3), .market-inbox .list-group td:nth-child(2) {
        display: none;
    }
    /* making list view more readable when smaller */
    .market-inbox #list-view .col-md-8 {
        padding: 0;
    }
}
.market-inbox .sidebar-header h3 {
    border-bottom: 5px solid #3587BC;
}
.market-inbox .bootstrap-select > .dropdown-menu.show {
    transform: translate3d(0, 32px, 0) !important;
}
/* for content */
/*.market-inbox #content {
    padding-left: 1%;
    width: 100%;
}*/


/* FOR SIDEBAR CONTENT */
.market-inbox #sidebar .btn-block {
    width: 100%;
}
.market-inbox #sidebar .buttons {
    padding-top: 5px;
    padding-left: 5px;
}
.market-inbox .buttons p {
    margin-top: 5%;
    margin-bottom: 0;
    color: #3587BC;
}
/* for three main collapsibles */
.market-inbox .dropdown-choices {
    background-color: white !important;
    border: none;
    color: #3587BC;
    margin: 2px 0 5px 10px;
    cursor: pointer;
    font-size: 16px;
}
/* remove the blue outline when you focus on a button */
.market-inbox #regions-refresh:focus {
    outline: 0;
}
.market-inbox .dropdown-choices i {
    margin-right: 5px;
}
.market-inbox #the-sources .bootstrap-select, .market-inbox #story-date-hidden, .market-inbox #regions-hidden, .market-inbox #categories-hidden {
    display: none;
}
.market-inbox #story-date-hidden {
    font-size: 12px !important;
}
.market-inbox #story-date-hidden input {
    font-size: 12px !important;
    width: 95%;
}
.market-inbox #story-date-hidden label {
    margin-top: 7px;
}
.market-inbox #regions-refresh {
    background: none;
    border: none;
    color: #3587BC;
    display: none;
    cursor: pointer;
}
.market-inbox #workflow-label {
    margin: 20px 0 0 10px;
}
.market-inbox .divider {
    margin: 20px 0;
    border-bottom: 1px solid slategrey;
}
.market-inbox .modes a {
    text-decoration: underline !important;
    display: block;
    margin: 10px 0;
    font-size: 14px;
}
.market-inbox .modes #sidebar-download {
    display: block;
    width: 90%;
    margin: 0 auto 5px auto;
}
.market-inbox .modes #sidebar-delete:disabled {
    display: block;
    width: 100%;
    margin: 0 auto;
    color: white;
}
/*.market-inbox .help-support {
    text-align: center;
    padding-bottom: 20vh;
}*/
/* for checkbox */
.market-inbox .category-checkbox, .market-inbox .region-checkbox {
    margin-left: 30px;
    clear:both;
}
/* for radio buttons */
.market-inbox .modes-radio {
    display: block;
    margin: 10px 0 0 10px;
}


/* FOR SETTINGS BAR */
/*.market-inbox .settings-bar {
    margin-bottom: 2%;
    text-align: center;
}
.market-inbox .views, .market-inbox .settings-bar .page-number {
    display: inline-block;
}*/
.market-inbox .btn-setting {
    background-color: transparent;
}
.market-inbox .views ul li {
    display: inline-block;
}
.market-inbox .views a {
    /*display: inline-block;*/
    /*padding: 0 5px !important;*/
}
/*.market-inbox #perPage {
    margin-left: 20%;
    display: inline-block;
}*/
.market-inbox .results-page  {
    font-weight: bold;
    color: #3587bc;
    border: none;
    margin-bottom: 2%;
}
.market-inbox .results-page-current{
    font-weight: bold;
    color: black;
    border: none;
    margin-bottom: 2%;
}
/* setting the grid view as the default setting */
.market-inbox .view-type-current {
    color: black;
}
.market-inbox .view-type {
    color: #3587bc;
}
.market-inbox .per-page button {
    margin-left: -5px;
    margin-top: auto;
}


/* FOR CARDS */
.market-inbox .flex-container .card .info {
    position: absolute;
    top: 5%;
    font-size: 15px;
    background-color: black;
    color: white;
    border-radius: 4px;
    border: none;
    padding: 1% 5%;
    z-index: 3;
}
.market-inbox .flex-container .card .quick-look {
    position: absolute;
    bottom: 5%;
    right: 2%;
    z-index: 3;
    visibility: hidden;
}
.market-inbox .flex-container .card-img:hover .quick-look {
    visibility: visible !important;
}
.market-inbox .flex-container .card .card-img {
    position: relative;
}
.market-inbox .flex-container .card-body th {
    color: dimgray;
    font-size: 13px;
}


/* FOR QUICK LOOK */
#quickLookModal .the-grey {
    font-size: 14px;
    background-color: #3E3C3C;
}
#quickLookModal .modal-dialog {
    top: 10%;
    max-width: 98%;
}
/*#quickLookModal .btn-QL {
    background-color: #3E3C3C;
    border: none;
    width: 40px;
    height: 40px;
}
#quickLookModal .image-QL {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
}
#quickLookModal .col-lg-6 .the-information {
    margin: 40px 2% 10px;
}

#quickLookModal .information {
    float: left;
    color: darkgray;
    width: 100%;
}
#quickLookModal #divider {
    display: inline-block;
}
#quickLookModal .info-right p {
    font-size: 30px;
    text-align: center;
    color: white;
    padding-left: 10px;
    border-left: 2px solid grey;
    display: inline-block;
}
#quickLookModal .quick-look-buttons {
    position: relative;
    padding-bottom: 5%;
}
#quickLookModal .quick-look-buttons a {
    display: block;
    text-align: center;
    background-color: #3587BC;
    display: inline-block;
    border-radius: 4px;
    color: white;
    border: none;
    padding: 10px 40px;
    margin: 3px;
    cursor: pointer;
}
#quickLookModal .the-grey video {
    width: 100%;
    max-width: 575px;
    display: block;
    margin: 0 auto;
}*/
#helpModal .modal-dialog {
    margin: 5% auto;
    text-align: center;
    max-width: 900px;
}
#webModal .modal-dialog {
    max-width: 500px;
    min-width: 250px;
    margin: 2% auto;
}

/* FOR LIST VIEW (like for grid view, some CSS applies to HTML in list's partial view) */
.market-inbox .list-group {
    padding-bottom: 5%;
}
/* for checkboxes */
.market-inbox .check-all-wrapper {
    background-color: #E7F2F9;
    padding: 5px 0;
}
.market-inbox .check-all-wrapper .the-default-checkbox {
    position: relative;
    bottom: 2px;
}
.market-inbox #list-view .the-default-checkbox {
    margin: auto 5.25px;
}
.market-inbox .list-group {
    list-style-type: none;
}
.market-inbox .list-group .the-default-checkbox, .market-inbox .list-group .list-group-item {
    display: inline-block;
}
/* list items colour */
.market-inbox .list-group-item.active {
    background-color: #3587BC;
}
.market-inbox .list-group-item {
    width: calc(100% - 35px); /* takes into account checkbox size */
}
.market-inbox .list-group-item img, .market-inbox #clip-info-table, #clip-details-table {
    width: 100%;
    height: 100%;
}
.market-inbox #list-view #news-title {
    font-weight: bold;
}
.market-inbox #list-view {
    width: 100%;
    padding: 0 15px;
}

.market-inbox #clip-info-table {
    font-size: 14px;
}
.market-inbox #clip-info-table tr:nth-child(1) td:nth-child(1) {
    /*this is the title for the list item */
    font-size: 16px;
}
.market-inbox #clip-info-table td {
    width: 25%;
}
.market-inbox #clip-info-table td:nth-child(4) {
    text-align: right;
}
/* clip details */
.market-inbox .clip-details {
    background-color: #E7F2F9;
    padding: 10px;
    overflow-x: hidden;
}
.market-inbox #clip-details-table video {
    width: 100%;
    max-width: 575px;
}
.market-inbox .playback {
    position: relative;
    padding-top: 5%;
    padding-bottom: 5%;
}
.market-inbox #clip-details-table #dl {
    margin-top: 1%;
}
.market-inbox #clip-details-table .details-info label {
    font-size: 14px;
    color: #4A4A4A;
}
.market-inbox #clip-details-table .details-info span {
    font-size: 14px;
    color: #4A4A4A;
    font-weight: 500;
}
.market-inbox #clip-details-table #det-title {
    font-size: 20px;
    color: #4A4A4A;
}
.market-inbox #clip-details-table .end-info {
    margin-top: 10%;
}
.market-inbox .three-dots {
    display: block;
    background-color: lightgrey;
    padding: 3% 0;
}
.market-inbox .dot {
    border-radius: 50%;
    height: 10px;
    width: 10px;
    display: inline-block;
    background-color: #4A4A4A;
}
.market-inbox .tab-content th:nth-child(2) {
    text-align: right;
}
.market-inbox .tab-content {
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    top: 15%; /* distance from the top it will be when it becomes "sticky" */
    max-height: 75vh;
    overflow: auto;
    overflow-wrap: break-word;
}












/*** Admin/Distribution.cshtml CSS ***/
/* for Distribution.cshtml, Network.cshtml, and Sources.cshtml */
#distribution-cshtml, .network-sources {
    font-family: SourceSansPro-Regular;
}
#distribution-cshtml .table-overflow tbody {
    height: 51vh; /* determines how many cells are shown */
    overflow: auto;
    display: block;
    width: 100%;
}
#distribution-cshtml .table-overflow tbody tr, #distribution-cshtml .table-overflow thead tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
#distribution-cshtml .table-overflow {
    margin-bottom: 5%;
    margin-top: 3%;
    margin-right: 7%;
    float: left;
    width: 100%;
    max-width: 60vh;
    box-shadow: -1px 1px 7px grey;
    background-color: #f2f4f7;
}
#distribution-cshtml .table-overflow thead button {
    background-color: transparent;
    border: none;
    color: white;
    height: 3vh;
    margin-bottom: 2%;
    cursor: pointer;
}
#distribution-cshtml .table-overflow thead th {
    background-color: #626567;
    color: #FFFFFF;
    border: none;
}
#distribution-cshtml .table-overflow thead {
    background-color: #626567;
}
#distribution-cshtml .table-overflow thead tr:nth-child(2) {
    width: 96.4%; /* header takes into account the scrollbar in the body */
}
#distribution-cshtml .table-overflow #allowed-header {
    background-color: #3587BC;
}
#distribution-cshtml .table-overflow thead tr {
    vertical-align: middle;
}
#distribution-cshtml .table-overflow .big-header {
    text-align: center;
    height: 5vh;
}
#distribution-cshtml .table-overflow tbody td {
    height: 5vh;
}
/* entire second column */
#distribution-cshtml .table-overflow tbody td:nth-child(2) {
    text-align: center;
    border: 1px solid lightgrey;
    border-right: none;
    width: 30%;
}
/* entire first column */
#distribution-cshtml .table-overflow tbody td:nth-child(1) {
    padding-left: 4%;
    border: 1px solid lightgrey;
    border-left: none;
}
#distribution-cshtml .table-overflow thead th:nth-child(2) {
    text-align: center;
    width: 30%;
}
#distribution-cshtml .table-overflow tbody tr:nth-child(odd) {
    background: #F4F6F6;
}
#distribution-cshtml .table-overflow tbody tr:nth-child(even) {
    background: white;
}
/* footer */
#distribution-cshtml tfoot btn, #distribution-cshtml tfoot div {
    display: inline-block;
    margin-top: 2%;
}
#distribution-cshtml .table-overflow tfoot .dropdown-toggle {
    font-size: 13px;
    background-color: rgba(0, 0, 0, 0.1);
}
#distribution-cshtml tfoot div li:hover {
    text-decoration: underline;
    cursor: pointer;
}
/* for Network Members */
#distribution-cshtml #NetworkMembers {
    margin-left: 2%;
    color: #686c72;
}
/* other buttons */
#distribution-cshtml .setings-buttons {
    background-color: transparent;
    font-size: 17px;
    padding-bottom: 1%;
}
#distribution-cshtml #first, #distribution-cshtml #previous {
    color: grey;
}
#distribution-cshtml #next, #distribution-cshtml #last {
    color: #3587BC;
}
#distribution-cshtml #page-number {
    background-color: white;
    color: black !important;
    border-color: black;
    border-width: 1px;
    border-radius: 1px;
    opacity: 1;
}


/* FOR SIDE COLUMN */
#distribution-cshtml .col-lg-3 h5 {
    border-bottom: 5px solid #3587BC;
}
#distribution-cshtml .col-lg-3 p {
    margin-top: 5%;
    margin-bottom: 0;
    color: #3587BC;
}














/*** Admin/EditMember.cshtml CSS ***/
#editMember-cshtml .card {
    padding: 20px;
    border: 1px solid grey;
    background-color: #fff;
    border-radius: 10px;
    margin: 0 auto 30px auto;
    width: 100%;
    max-width: 800px;
}

#editMember-cshtml h2 {
    text-align: center;
}

#editMember-cshtml .content label {
    font-weight: bold;
    color: #626567;
}


/* bottom of form */
#editMember-cshtml .form-bottom h5 {
    padding-top: 2%;
}


#editMember-cshtml .form-bottom label {
    padding: 5px;
    font-size: 16px;
    color: black;
}

#editMember-cshtml .form-bottom .finish-buttons button {
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
}

#editMember-cshtml .checkbox {
    font-family: FontAwesome;
}














/*** Admin/Network.cshtml and Admin/Sources.cshtml CSS ***/
/* FOR HEADLINING BUTTONS */
.network-sources .text-center button, .network-sources .text-center a, .network-sources .form-bottom .finish-buttons button {
    margin-right: 3%;
    padding-left: 3%;
    padding-right: 3%;
    background-color: white;
    border: 1px solid #3587BC;
    border-radius: 5px;
    font-size: 16px;
    color: #3587BC;
    letter-spacing: 0.67px;
}
.network-sources .text-center button:hover, .network-sources .form-bottom .finish-buttons button:hover, .network-sources .text-center a:hover {
    background-color: #3587BC;
    color: white;
}
.network-sources .text-center a {
    display: inline-block;
    padding: 0.5% 3%;
}

/* FOR TABLE */
.network-sources .table-scroll {
    position: relative;
    width: 100%;
    margin: 10px auto 30px auto;
    overflow: hidden;
    border: 2px solid darkgrey;
}
.network-sources .table-scroll.table-network {
    max-width: 1200px;
}
.network-sources .table-scroll.table-sources {
    max-width: 1000px;
}
.network-sources .table-wrap {
    overflow: auto;
}
.network-sources .table-scroll table {
    width: 100%;
    margin: auto;
    border-collapse: separate;
    border-spacing: 0;
}
.network-sources .table-scroll th, .network-sources .table-scroll td {
    border: 1px solid darkgrey;
    white-space: nowrap;
    padding: 0 30px;
}
.network-sources .clone {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}
.network-sources .clone th, .network-sources .clone td {
    visibility: hidden;
}
.network-sources .clone td, .network-sources .clone th {
    border-color: transparent;
}
.network-sources .clone tbody th {
    visibility: visible;
    color: red;
}
.network-sources .clone tr:nth-child(odd) .fixed-side {
    /* fixed side has definitive own colour*/
    border: 1px solid darkgrey;
    border-right: 4px solid darkgrey;
    background: #F4F6F6;
    visibility: visible;
}
.network-sources .clone tr:nth-child(even) .fixed-side {
    /* fixed side has definitive own colour*/
    border: 1px solid darkgrey;
    border-right: 4px solid darkgrey;
    background: white;
    visibility: visible;
}
.network-sources .clone thead, .network-sources .clone tfoot {
    background: transparent;
}
.network-sources .the-default-table th, .network-sources .the-default-table a {
    text-decoration: underline;
}
.network-sources .the-default-table thead button {
    background-color: transparent;
    border: none;
    color: white;
    height: 3vh;
    margin-bottom: 2%;
    cursor: pointer;
}
.network-sources .the-default-table th {
    font-size: 15px;
}
.network-sources tbody {
    font-size: 14px;
}
.network-sources .the-default-table td {
    height: 5.5vh;
}
/* footer */
.network-sources tfoot div {
    display: inline-block;
    margin-top: 60px;
}
.network-sources tfoot div li:hover {
    text-decoration: underline;
    cursor: pointer;
}
/* for Network Members */
.network-sources #NetworkMembers {
    width: 10%;
    height: 4%;
    color: grey;
}
.network-sources tfoot div span {
    position: absolute;
    bottom: 2px;
    right: 1%;
}
/* if the screen is small enough to need a scroll (991.5px), then the position of network # switches to the top right corner of the footer*/
@media (max-width: 991.5px) {
    .network-sources tfoot div span {
        position: absolute;
        bottom: 10%;
        left: 1%;
    }
}
/* drop  down button*/
.network-sources tfoot li a:link {
    color: black;
    text-decoration: none;
}
.network-sources tfoot li a:hover, .network-sources tfoot li a:active, .network-sources tfoot li a:visited {
    color: black;
    text-decoration: underline;
}
/* other buttons */
.network-sources .setings-buttons {
    background-color: transparent;
    font-size: 13px;
}
.network-sources .table-scroll tfoot .dropdown-toggle {
    font-size: 13px;
    background-color: rgba(0, 0, 0, 0.1);
}


/* FOR THE MODAL (POPUP) */
.network-sources .modal-dialog {
    width: 100%;
    max-width: 700px;
    min-width: 250px;
    margin: 5% auto;
}
.network-sources .modal-dialog h2 {
    text-align: center;
    margin-bottom: 10px;
}
.network-sources .modal-body .the-content label {
    font-weight: bold;
    color: #3587BC;
}
/* bottom of form */
.network-sources .form-bottom h5 {
    padding-top: 2%;
}













/*** Admin/Wire.cshtml CSS ***/
/* for directory column */
#wire-cshtml .col-md-4.directory {
    background-color: #efefef;
    height: 100vh;
}
#wire-cshtml #create-alert-button, #wire-cshtml #clone {
    color: #3587BC;
    background-color: white;
    border: 1px solid #3587BC;
}
/* for top of directory column */
#wire-cshtml #dir-top {
    border-bottom: 1px solid grey;
}
#wire-cshtml .input-group button, #wire-cshtml .input-group input {
    background-color: #f9f9f9;
}
#wire-cshtml .input-group button:hover {
    color: initial;
}
/* for directory inbox/list */
#wire-cshtml #directory {
    height: 100%;
    border-bottom: 1px solid grey;
    overflow-y: auto;
}
#wire-cshtml #directory .list-group-item {
    background-color: #efefef;
    border-left: 0;
    border-right: 0;
}
#wire-cshtml #directory .list-group-item.active {
    background-color: #f9f9f9;
    color: initial;
    border-color: initial;
}
#wire-cshtml .list-group-item i {
    color: #3587BC;
}

#wire-cshtml .col-md-8.message {
    padding-top: 100.2px;
}
@media (max-width: 768px) {
    /* make gap smaller for smaller screens */
    #wire-cshtml .col-md-8.message {
        padding-top: 20px;
    }
}
#wire-cshtml .message #copy-message, #wire-cshtml .message #print-message {
    background: none;
    border: none;
    color: #3587BC;
    cursor: pointer;
}
#wire-cshtml .message #message {
    border-top: 1px solid grey;
}



/* FOR ALERT DIRECTORY */
#wire-cshtml #alert-directory {
    border: 1px solid black;
    width: 100%;
    height: 60vh;
}
#wire-cshtml #create-alert-button:hover {
    background-color: #3587BC;
    color: white;
}
#wire-cshtml #create-alert-button i {
    margin-right: 5px;
}
/* create alert modal */
#wire-cshtml #createAlertModal .bootstrap-select button {
    border: none;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.25);
}
#wire-cshtml #createAlertModal .modal-dialog {
    max-width: 600px;
}
#wire-cshtml #create-alert fieldset label, #wire-cshtml #create-alert fieldset input, #wire-cshtml #create-alert fieldset button, #wire-cshtml #create-alert fieldset textarea {
    display: block;
    margin-left: 1%;
}
#wire-cshtml #create-alert fieldset legend {
    width: auto;
    margin-left: 2%;
    padding: 0 1%;
}
#wire-cshtml #create-alert fieldset label input {
    display: inline-block;
    margin-left: 1vh;
}
/* for the inputs specifically in the create alert fieldset */
#wire-cshtml .create-input {
    width: 98%;
}
#wire-cshtml #create-alert fieldset .col-lg-3 button {
    margin-bottom: 5%;
}
#wire-cshtml #alert-body, #wire-cshtml #alert-directory, #wire-cshtml #copy-al {
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.25);
}


/* FOR ALERT MESSAGE */
#wire-cshtml #print {
    color: #3587BC;
    background-color: transparent;
    border: none;
    /* align with header */
    margin-bottom: 12px;
    margin-left: 0.5%;
    cursor: pointer;
}
#wire-cshtml #copy-alert {
    background: none;
    border: none;
    color: #3587BC;
    cursor: pointer;
}
#wire-cshtml .alert-content div {
    text-align: right;
}
#wire-cshtml .alert-content h5 {
    float: left;
    margin-bottom: 30px;
}
#wire-cshtml .alert-content {
    margin: 15px 0;
}
/* for large Alert Message textarea*/
#wire-cshtml .al-mes {
    width: 100%;
    height: 60vh;
    background-color: #edeff2;
    border: 1px solid grey;
}














/*** Inbox/Upload.cshtml CSS ***/
/* for all content */
#upload-cshtml .all-content {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto 30px auto;
}

/* FOR FILE INPUT/UPLOAD/DRAG AND DROP */
#upload-cshtml #drop-container {
    border: 3px dashed grey;
    position: relative;
}
/* Choose File button */
::-webkit-file-upload-button {
    cursor: pointer;
}
#upload-cshtml #file-input {
    z-index: 3;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}
@media (max-width: 768px) {
    /* make text smaller for smaller screens */
    #upload-cshtml #drop-container {
        font-size: 12px;
    }
}
#upload-cshtml #drop-container img {
    width: 100%;
    max-width: 300px;
    display: block;
    margin: 40px auto;
}
#upload-cshtml #drop-container span {
    z-index: 0;
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
    color: grey;
}
#upload-cshtml #drop-container a {
    display: block;
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    z-index: 4;
}


/* FOR DETAILS */
#upload-cshtml .content {
    padding: 20px 0 0 0;
}
#upload-cshtml  #upload-cshtml .content textarea {
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.25);
}















/*** SHARED Inbox/VideoDetails.cshtml CSS ***/
/* FOR LEFT SIDE */
/* for flex container */
/* FOR FLEX PROPERTY */
#videoDetails-cshtml .flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* center all the cards in grid view */
}

/* for video */
#videoDetails-cshtml .main {
    margin-bottom: 20px;
}
#videoDetails-cshtml .playback {
    position: relative;
    margin-top: 15px;
}
#videoDetails-cshtml .playback video {
    width: 100%;
    max-width: 850px;
    display: block;
    margin: 0 auto;
}
#videoDetails-cshtml .btn-settings {
    margin-top: 30px;
}
#videoDetails-cshtml .btn-settings button {
    padding: 10px 15px;
}
/* for storyboard, Synopsis, Script */
#videoDetails-cshtml .main .boxed {
    border: 1px solid lightgrey;
    width: 100%;
    height: 30vh;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 10px;
    padding: 0 10px;
}
.storyboard{
    border: 1px solid lightgrey;
    width: 100%;
    height: 100px;
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: 10px;
    padding: 0 10px;
}
#videoDetails-cshtml #copy-script, #videoDetails-cshtml #print-script {
    background: none;
    border: none;
    color: #3587BC;
    cursor: pointer;
    float: right;
}


/* FOR RIGHT SIDE */
#videoDetails-cshtml .details {
    background-color: #eff0f2;
    width: 100%;
}
#videoDetails-cshtml .details-top {
    margin-top: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid grey;
    color: dimgray;
}
#videoDetails-cshtml .details-top .dropdown button {
    background-color: white;
    color: black !important;
}
#videoDetails-cshtml .details-top label {
    /*this is the price*/
    text-align: right;
    margin-left: 30%;
    font-size: 30px;
    font-weight: bold;
}
#videoDetails-cshtml .details-top .dropdown {
    margin-left: 10px;
}
/* for details */
/*#videoDetails-cshtml .form {
    margin: 30px 10px;
}*/
#videoDetails-cshtml .form .row {
    margin-top: 0;
    margin-bottom: 0;
}
#videoDetails-cshtml .form .col-lg-3 label {
    font-weight: bold;
}
#videoDetails-cshtml #buy-now {
    width: 90%;
    display: block;
    margin: 10px auto;
}
/* for subheaders */
#videoDetails-cshtml .subheader {
    margin: 30px auto;
    overflow-wrap: break-word;
}
#videoDetails-cshtml .subheader-header span:not(.to-right) {
    color: dimgrey;
    font-size: 20px;
}
#videoDetails-cshtml .details .subheader-header, #videoDetails-cshtml .details .licensing-info {
    padding: 10px 0 10px 0;
    color: dimgrey;
}
#videoDetails-cshtml .details .boxed {
    border: 1px solid lightgrey;
    background-color: white;
    width: 100%;
    height: 30vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 10px;
}
#videoDetails-cshtml .details .subheader p {
    margin: 0 30px 0 0;
}
/* cancel button */
/*#videoDetails-cshtml .finish-buttons #cancel {
    background-color: lightgrey;
    margin: 30px 0;
    padding: 2px 50px;
    color: black;
}
#videoDetails-cshtml .finish-buttons #save {
    padding: 2px 50px;
    margin: 30px 0;
}*/



/* Inbox Video CSS */
#videoDetails-cshtml.inbox-video .the-default-radio {
    margin: 0 30px;
}
#videoDetails-cshtml.inbox-video .form-control, #videoDetails-cshtml.inbox-video .distribution .form-group.row {
    margin-bottom: 10px;
}
#videoDetails-cshtml.inbox-video .details .date {
    max-width: 300px
}
#videoDetails-cshtml.inbox-video .details-top {
    padding: 0;
    margin: 30px 0 10px 0;
}





























/*** Account/Register.cshtml CSS ***/
/* general */
#register-cshtml .all-content {
    margin: 0 auto;
    width: 98%;
    max-width: 1000px;
}
#register-cshtml .container-fluid button, #register-cshtml a.btn {
    border-radius: 2px !important;
}
#register-cshtml #copy-client, #register-cshtml #cancel {
    background-color: #d3dfe8;
    color: #3587BC;
}
#register-cshtml h4, #register-cshtml h5, #register-cshtml .container-fluid p, #register-cshtml table, #register-cshtml .total-info, #register-cshtml .client-info, #register-cshtml .billing-info {
    color: white;
}
#register-cshtml .bolded {
    font-weight: bold;
}
#register-cshtml tr, #register-cshtml #total-text {
    font-weight: 300;
}
/* top of page */
#register-cshtml .sign-up, #register-cshtml h5, #register-cshtml table {
    text-align: center;
}
#register-cshtml h4 u, #register-cshtml h5 u {
    text-decoration: none;
    border-bottom: 5px solid white;
}
#register-cshtml .basic-account, #register-cshtml .billing-info, #register-cshtml .client-info {
    background-color: #779eb7;
    border-radius: 8px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
}
#register-cshtml .total-info input {
    margin-left: 5px;
}
/* for basic account */
#register-cshtml .basic-account {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 30px auto;
    padding: 10px 7px;
}


/* FOR THE PRICES TABLE */
#register-cshtml #prices-table {
    margin: 0 auto;
    width: 100%;
    max-width: 400px;
}
#register-cshtml #prices-table td, #register-cshtml #prices-table th {
    padding: 5px 10px;
}
#register-cshtml #prices-table thead {
    text-decoration: underline;
}
    
    
/* FOR THE TOTAL */
#register-cshtml .coupon, #register-cshtml .total-info p,  #register-cshtml #copy-client {
    display: inline-block;
}
#register-cshtml .total-info label, #register-cshtml .total-info p {
    font-size: 13px;
    font-weight: 200;
}
#register-cshtml #total-text {
    text-align: right;
    text-decoration: underline;
}
#register-cshtml .coupon {
    float: right;
}
#register-cshtml .coupon input {
    border: none;
    max-width: 100px;
    background-color: #d3dfe8;
}

/* FOR CLIENT/BILLING INFO */
#register-cshtml .information .col-lg-6 {
    margin-bottom: 30px;
}
#register-cshtml .client-info, #register-cshtml .billing-info {
    padding: 20px; 
    height: 100%;
}
#register-cshtml .client-info .first-row span, #register-cshtml .billing-info .first-row span {
    font-weight: 900;
}
#register-cshtml #copy-client {
    float: right;
}
#register-cshtml #copy-client-decoy {
    visibility: hidden;
}
#register-cshtml .client-info input:not(.form-control), #register-cshtml .billing-info input:not(.form-control), #register-cshtml .billing-info .bootstrap-select button {
    background: transparent !important;
    border: 0 !important;
    display: block !important;
    border-bottom: 1px solid white !important;
    width: 250px !important;
    color: white !important;
    font-weight: 500;
    margin-bottom: 20px;
    height: 33px !important;
}
#register-cshtml .client-info input:focus, #register-cshtml .billing-info input:focus {
    outline: 0;
}
#register-cshtml input::placeholder { /* for placeholder */
    color: white;
    font-weight: 300;
}
#register-cshtml .selectpicker { /* selectpicker being visible can make the dropdown accessible from outside the button here */
    visibility: hidden;
}
#register-cshtml .billing-info .dropdown {
    display: block;
}
#register-cshtml .first-row {
    margin-top: 10px;
}
#register-cshtml #cancel, #register-cshtml #subscribe {
    width: 200px;
    margin-bottom: 10px;
}
/* for thank you modal */
#register-cshtml #thankYouModal .modal-dialog {
    width: 100%;
    max-width: 300px;
    margin: 15% auto;
}
#register-cshtml .col-lg-12.thank-content {
    background-color: white;
    border-radius: 8px;
    text-align: center;
    margin-top: 10px;
}
#register-cshtml #thankYouModal .thank-content i {
    color: #3587BC;
    font-size: 10vh;
    border-bottom: 2px solid #3587BC;
}
#register-cshtml #thankYouModal .thank-content i, #register-cshtml #thankYouModal .thank-content h3 {
    margin: 10px 0;
}
#register-cshtml #thankYouModal .thank-content p {
    color: grey;
}













/*** Account/Login.cshtml CSS ***/
#login-cshtml {
    font-family: 'Times New Roman';
}
#login-cshtml .container-fluid {
    padding: 0;
}
#login-cshtml html {
    height: 100%;
}
#login-cshtml .card {
    width: 95%;
    max-width: 400px;
    min-width: 250px;
    margin: 5% auto 2% auto;
    border-width: 3px;
    border-radius: 20px;
}
/* for smaller screens, the login page takes up less space */
@media (max-width: 400px) {
    #login-cshtml .card {
        margin: 0 auto;
    }
    #login-cshtml .card legend {
        font-size: 15px;
    }
    #login-cshtml .card label, #login-cshtml .card p, #login-cshtml .card a {
        font-size: 12px;
    }
    #login-cshtml footer p {
        margin: 0;
    }
    #login-cshtml hr {
        margin: 1%;
    }
}
#login-cshtml .row-fluid {
    width: 80%;
    margin: 0 auto;
}
#login-cshtml .title, #login-cshtml legend {
    text-align: center;
}
#login-cshtml .btn {
    width: 100%;
}
#login-cshtml h1, #login-cshtml p {
    text-align: center;
}
#login-cshtml .modal-body legend {
    font-size: 15px;
}
#login-cshtml .login-links {
    margin: 15px 0;
    display: flex;
    justify-content: space-between;
}
#login-cshtml #enter-user, #login-cshtml #enter-pass, #login-cshtml .field-validation-error {
    color: red;
}
#login-cshtml #submit {
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
}

@supports (-webkit-overflow-scrolling: touch) { /* Fixes the modal for iOS devices */
    .modal-open {
        overflow: hidden;
        position: fixed;
    }
}