/*Action Center Slider*/
.action-center-slider{ max-height: 300px; width: 100%; }
.action-center-slider .item-container{ width: 100%; height:300px; background-position: top center; background-size: cover;  }
.action-center-slider .item-container .item-container-inner{
    width: 100%; height:300px; padding:25px 0px;
    background: -moz-linear-gradient(left, rgba(30,87,153,1) 20%, rgba(125,185,232,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(30,87,153,1) 20%,rgba(125,185,232,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(30,87,153,1) 20%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */
}
.action-center-slider .item-container .item-container-inner h2{}
.action-center-slider .item-container .item-container-inner p.description{ max-height: 100px; overflow: hidden; height: auto; }
/*Reseting Everything in introduction slider to normal text like other*/

    .action-center-slider .item-container .item-container-inner p.description b,
    .action-center-slider .item-container .item-container-inner p.description u,
    .action-center-slider .item-container .item-container-inner p.description strong,
    .action-center-slider .item-container .item-container-inner p.description small,
    .action-center-slider .item-container .item-container-inner p.description i,
    .action-center-slider .item-container .item-container-inner p.description em,
    .action-center-slider .item-container .item-container-inner p.description span{
        font-size: 1rem !important;
        text-decoration:none !important;
        font-weight:normal !important;
        line-height:1.5rem !important
    }
    .action-center-slider .item-container .item-container-inner p.description ul{display:none;}


    .action-center-slider .carousel-control-next, .action-center-slider .carousel-control-prev {
        width: 5%;
    }
    .action-center-slider .carousel-indicators li {
        height: 10px;
        width: 10px;
        border-radius: 50%;
    }
}

    .action-center-slider .carousel-control-next, .action-center-slider .carousel-control-prev{
        opacity:0.8;
    }
    .action-center-slider .carousel-control-prev-icon,
    .action-center-slider .carousel-control-next-icon {
        background-image: none;
        font-size:40px;
        height:40px;
        width:40px;
        margin-top:-10px;
    }

/*Introduction Modal Text to normal formatting*/
#alertDetailModal .modal-body h1,
#alertDetailModal .modal-body h2,
#alertDetailModal .modal-body h3,
#alertDetailModal .modal-body h4,
#alertDetailModal .modal-body h5,
#alertDetailModal .modal-body h6 {
    text-decoration: none !important;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;
    font-weight: normal;
}

    #alertDetailModal .modal-body h1 b, #alertDetailModal .modal-body h1 u, #alertDetailModal .modal-body h1 em, #alertDetailModal .modal-body h1 small, #alertDetailModal .modal-body h1 span {
        font-size: 2.5rem !important;
    }
    #alertDetailModal .modal-body h2 b, #alertDetailModal .modal-body h2 u, #alertDetailModal .modal-body h2 em, #alertDetailModal .modal-body h2 small, #alertDetailModal .modal-body h2 span {
        font-size: 2rem !important;
    }
    #alertDetailModal .modal-body h3 b, #alertDetailModal .modal-body h3 u, #alertDetailModal .modal-body h3 em, #alertDetailModal .modal-body h3 small, #alertDetailModal .modal-body h3 span {
        font-size: 1.75rem !important;
    }
    #alertDetailModal .modal-body h4 b, #alertDetailModal .modal-body h4 u, #alertDetailModal .modal-body h4 em, #alertDetailModal .modal-body h4 small, #alertDetailModal .modal-body h4 span {
        font-size: 1.5rem !important;
    }
    #alertDetailModal .modal-body h5 b, #alertDetailModal .modal-body h5 u, #alertDetailModal .modal-body h5 em, #alertDetailModal .modal-body h5 small, #alertDetailModal .modal-body h5 span {
        font-size: 1.25rem !important;
    }
#alertDetailModal .modal-body h6 {}

    #alertDetailModal .modal-body h1 b, #alertDetailModal .modal-body h1 u, #alertDetailModal .modal-body h1 em, #alertDetailModal .modal-body h1 small, #alertDetailModal .modal-body h1 span,
    #alertDetailModal .modal-body h2 b, #alertDetailModal .modal-body h2 u, #alertDetailModal .modal-body h2 em, #alertDetailModal .modal-body h2 small, #alertDetailModal .modal-body h2 span,
    #alertDetailModal .modal-body h3 b, #alertDetailModal .modal-body h3 u, #alertDetailModal .modal-body h3 em, #alertDetailModal .modal-body h3 small, #alertDetailModal .modal-body h3 span,
    #alertDetailModal .modal-body h4 b, #alertDetailModal .modal-body h4 u, #alertDetailModal .modal-body h4 em, #alertDetailModal .modal-body h4 small, #alertDetailModal .modal-body h4 span,
    #alertDetailModal .modal-body h5 b, #alertDetailModal .modal-body h5 u, #alertDetailModal .modal-body h5 em, #alertDetailModal .modal-body h5 small, #alertDetailModal .modal-body h5 span,
    #alertDetailModal .modal-body h6 b, #alertDetailModal .modal-body h6 u, #alertDetailModal .modal-body h6 em, #alertDetailModal .modal-body h6 small, #alertDetailModal .modal-body h6 span
    {
        text-decoration: none !important;
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;
        font-weight: normal;
    }

#alertDetailModal .modal-body b, #alertDetailModal .modal-body u, #alertDetailModal .modal-body em, #alertDetailModal .modal-body small, #alertDetailModal .modal-body span {
    text-decoration: none !important;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;
    font-weight: normal;
    font-size: 1rem !important;
    line-height: 1.5rem !important
}
/*Login Container*/
.login-panel-container {
    background: #85929e;
    background: -moz-linear-gradient( top, #aab3ba 0%, #85929e 100% );
    background: -webkit-linear-gradient( top, #aab3ba 0%, #85929e 100% );
    background: linear-gradient( to bottom, #aab3ba 0%, #85929e 100% );
}
.login-panel-container a.btn-link{ color:#ffffff !important; }
.login-panel-container a.btn-link:hover{color: #63ceff !important;}
.user-card h4 {
    margin-bottom: 0px;
}
.form-inline form{ width: 100%}
.signup-info-form form{ width:100%; display:block;}
/*Body navbar*/
.nav-pills .nav-link {
    background: #c7d7e5;
    margin-right: 5px;
}
.nav-pills .nav-link:nth-child(1) {
    /*width:166px;*/
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #6c757d;
}
    .nav-pills .nav-link.active.la-link {
        border-radius: 5px 5px 0px 0px
    }

.clinks {
    cursor: pointer;
    color: #007bff !important;
}
    .clinks.active {
        color: #ffffff !important;
    }
    .clinks.active:hover {
        color: #ffffff !important;
    }

    .sub-menu-container {
        background-color: #6c757d;
        padding: 6px;
        position: absolute;
        top: 37px;
        border-radius: 0px 0px 5px 5px;
        width: 166px;
        font-size: .875rem;
    }

    .sub-menu-container .list-group-item {
        padding: .25rem .50rem;
        background-color: transparent;
        cursor:pointer;
        border-radius:3px;
        color:#ffffff;
    }
        .sub-menu-container .list-group-item.active {
            background-color: #aab3ba;
            border-color: #aab3ba;
            color:#343a40;
        }

.nav-menu a.nav-link{ cursor: pointer; }
.nav-menu a.nav-link span.badge {
    color: #fff;
    background-color: #6c757d;
}


.nav-menu a.nav-link.active span.badge {
    color: #212529;
    background-color: #f8f9fa;
}

.list-btn {
    padding: .50rem .475rem
}

.sub-tabs a{ cursor:pointer;}
/*Body Action Alerts*/
/*Action Alerts Thumb View*/
.action-alerts-container {
    display: flex;
    flex-wrap: wrap;
    margin-right: -1%;
    margin-left: -1%;
}
.action-alert{padding: 10px; border:1px solid #aab3ba; border-radius: 5px; box-sizing: border-box; width: 23%; margin: 1%; }
    .action-alert .alert-image {
        max-height: 180px;
        overflow: hidden;
        margin-bottom: 10px;
        border-radius: 5px;
        height:180px;
    }
.action-alert .alert-image img{width:100%; border-radius: 5px; height:180px;}
    .action-alert p.alert-text {
        border-bottom: 1px solid #aab3ba;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-bottom: 1rem;
        margin-bottom: 0px;
        max-height:35px;
        height:35px;
    }
    .action-alert h4.alert-heading {
        font-size: 1.25rem;
        margin-bottom: 10px;
        height: 29px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
.action-alert h4.alert-heading a{ color: #343a40; text-decoration: none; }
.action-alert h4.alert-heading a:hover{ color: #aab3ba; text-decoration: none; }

/*Action Alerts List View*/
.action-alerts-container.list-view{ display: block; margin-right: 0; margin-left: 0; }
.action-alerts-container.list-view .action-alert{width: 100%; margin: 1% 0; display: inline-block}
    .action-alerts-container.list-view .action-alert .alert-image {
        width: 20%;
        float: left;
        max-height: 200px;
        height:auto;
    }
.action-alerts-container.list-view .action-alert .alert-body{ width:80%; float: left;  box-sizing: border-box; padding-left: 20px; }
    .action-alerts-container.list-view .action-alert .alert-body h4.alert-heading {
        font-size: 1.25rem;
        margin-bottom: 10px;
        height: auto;
        overflow: hidden;
        white-space: initial;
    }
    .action-alerts-container.list-view .action-alert .alert-body p.alert-text {
        display: block;
        border-bottom: 1px solid #aab3ba;
        padding-bottom: 10px;
        margin-bottom: 0;
        min-height: 115px;
        max-height: 100%;
        overflow: hidden;
        white-space: initial;
        height:auto;
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;
    }
        /*.action-alerts-container.list-view .action-alert .alert-body p.alert-text ul{ display:none}*/
        
        .action-alerts-container.list-view .action-alert .alert-body p.alert-text span.alert-span-message{
            font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;
            display: block; text-align: justify;
        }

        .action-alerts-container.list-view .action-buttons {
            border-top: 0;
            float: right;
            padding-top: 5px;
        }
.action-alerts-container.list-view  .action-buttons br{display: none;}
.action-alerts-container.list-view  .action-buttons i{margin-right: 10px;}

.threelines-ellipsis {
     overflow: hidden; 
     text-overflow: ellipsis;
    display: -webkit-box !important;
    line-height: 24px; /* fallback */
    max-height: 72px; /* fallback */
    -webkit-line-clamp: 3; /* number of lines to show */
    -webkit-box-orient: vertical;
}

.legislators-container {
    display: flex;
    flex-wrap: wrap;
    margin-right: -1%;
    margin-left: -1%;
    width:100%; height:auto;
}

.legislator-card {
    overflow: hidden;
    position: relative;
    border: 1px solid #CCC;
    border-radius: 8px;
    text-align: center;
    padding: 0;
    width: 31.33333333333333333333333333333%;
    margin: 1%;
    box-sizing: border-box;
    cursor:pointer;
}

    .legislator-card:hover{opacity:0.8;}

    .legislator-card.red {
        background-color: red;
    }

    .legislator-card.blue {
        background-color: rgb(30,87,153);
    }

    .legislator-card .header-bg {
        /* This stretches the canvas across the entire hero unit */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 70px;
        border-bottom: 1px #FFF solid;
        z-index: 1;
        overflow: hidden;
    }

        .legislator-card .header-bg img {
            -webkit-filter: blur(20px);
            -moz-filter: blur(20px);
            -o-filter: blur(20px);
            -ms-filter: blur(20px);
            filter: blur(20px);
            width: 120%;
            height: auto;
            margin: -10%;
        }

    .legislator-card .avatar {
        position: relative;
        margin-top: 15px;
        z-index: 100;
    }

        .legislator-card .avatar img {
            width: 100px;
            height: auto;
            -webkit-border-radius: 10%;
            -moz-border-radius: 10%;
            border-radius: 10%;
            border: 5px solid rgba(0,0,30,0.8);
        }
.legislator-detail-container{ width:100%; height:auto; overflow:hidden; box-sizing:border-box; padding:20px; background:#efefef;
                              border-radius:5px;
}
    .legislator-detail-container .head-shot {
        position: relative;
        border-radius: 5px;
        width:100%; height:auto; overflow:hidden;
    }
    .legislator-detail-container .head-shot img {
        width: 100%;
        height: auto;
        
    }
        .legislator-detail-container .head-shot .score-badge {
            position: absolute;
            bottom: 0;
            right: 0;
            background: #199be5;
            color: #fff;
            font-size: 1.5em;
            padding: 6px 8px;
            border-radius:5px 0px 5px 0px;
        }
.data-card .card-header a{cursor:pointer;}
.data-card.phone-card .card-header a {
    display: block;
    padding: .5rem 1rem;
    color: #343a40;
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

    .data-card.phone-card .card-header a:hover {
        text-decoration: none;
        display: block;
        padding: .5rem 1rem;
        color: #343a40;
        border: 1px solid #ffffff;
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem;
    }


.leg-mobile-container {
    display: none;
}
/*@media only screen and (max-width: 960px) {
    .action-alert{width: 48%;}
}
@media only screen and (max-width: 600px) {
    .action-alert{width: 100%;}
}*/
/*Action Alert Detail Page*/
.action-center-main-image {
    width: 100%;
    height: auto;
    max-height: 250px;
    overflow: hidden;
}
    .action-center-main-image img {
        width: 100%;
        height: auto;
        transform: translate(0%, -25%);
    }
.alert-detail-image{ width: 100%; max-height: 350px; height: auto; overflow: hidden; border-radius: 5px; margin-bottom: 10px; }
.alert-detail-image img{ width: 100%; height: auto;}
.alert-detail-video{ width: 100%; height: auto; overflow: hidden; border-radius: 5px; margin-bottom: 10px; }
.bg-lighter{ background-color: #aab3ba !important; }
.editable-section{ background-color: #efefef; padding:10px; border-radius: 5px; }
.contact-list li.list-group-item{ padding: 5px; font-size: .75rem; }
.contact-list button{ padding: 0px 5px; border:0; border-radius: 3px; cursor: pointer }
.contact-list button.btn-edit-user, .contact-list button.btn-save-user{background-color: #f8f9fa;}
.contact-list-side li.list-group-item{ padding: 5px 60px 5px 5px; font-size: .75rem; position: relative;}
.contact-list-side li.list-group-item button{ padding: 0px 5px; border:0; border-radius: 3px; cursor: pointer; position: absolute; top: 10px; right: 5px; }

/*Twitter Section*/
.tweet-view-section{ background-color: #efefef; border-radius: 5px; box-sizing: border-box; padding: 20px; height: auto; overflow: hidden; }
.call-view-section{ background-color: #efefef; border-radius: 5px; box-sizing: border-box; padding: 20px; height: auto; overflow: hidden; }

.affix{ position: sticky; top: 0px; }



.desktop-view-only {
}

.mobile-view-only {
    display: none;
}


.row.row-buttons-bottom button.btn-edit-all span.regular, .tweet-container .btn-tweets span.regular {
    display: inline-block;
}
.row.row-buttons-bottom button.btn-edit-all span.orea, .tweet-container .btn-tweets span.orea {
    display: none;
}

.row.row-buttons-bottom button.btn-send-all span.regular, .row.top-buttons-for-email button.btn-send-all span.regular {
    display: inline-block;
}

.row.row-buttons-bottom button.btn-send-all span.orea, .row.top-buttons-for-email button.btn-send-all span.orea {
    display: none;
}

.top-buttons-for-email{ display: none; }

/*Smaller Desktop*/
@media only screen and (max-width: 1200px) {
    .action-alerts-container.list-view .action-alert .alert-image{ width:25%; }
    .action-alerts-container.list-view .action-alert .alert-body{ width:75%; }
    .action-alert{ width:31.3333333333333333333333333333333%; }
    .action-buttons{ width:100%; }
    .action-buttons a{flex: 1 1 auto !important;}
    .action-alerts-container.list-view .action-buttons{ width:auto; }
}


@media screen and (max-width: 991px) and (min-width: 768px) {
    .desktop-view-only {
        display: none;
    }

    .mobile-view-only {
        display: block;
    }
    .card-header-tabs {
        display: flex;
        flex-wrap: nowrap;
    }

        .card-header-tabs li {
            text-align: center;
        }
}

@media only screen and (max-width: 991px) {
    .action-alert{ width:48%; }
    .action-alerts-container.list-view .action-alert .alert-image{ width:33%; }
    .action-alerts-container.list-view .action-alert .alert-body{ width:67%; }
    
}

@media screen and (max-width: 767px) and (min-width: 576px) {
    .login-info-form .form-group {
        display: block !important;
        margin-bottom: 1rem !important;
    }

    .login-info-form .form-control {
        width: 100%;
    }
}


@media only screen and (max-width: 767px) {
    .action-alert{ width:98%; }
    .switch-layout{display: none;}
    .login-info-form{display: block}
    .action-center-slider .container{ width: 80% }
    .action-center-slider .carousel-control-next, .action-center-slider .carousel-control-prev{ width: 10%; }
    .action-alerts-container.list-view .action-alert .alert-image{ width:100%; }
    .action-alerts-container.list-view .action-alert .alert-body{ width:100%; padding-left: 0; }
    .action-alerts-container.list-view .action-buttons{width:100%;}
    .nav-menu{ display: block; }
    .nav-pills .nav-link:nth-child(1) {
        margin-bottom: 5px;
        width: 100%;
    }
    .nav-pills .nav-link {
        background: #c7d7e5;
        margin-bottom: 5px;
    }
    .nav-menu > a:nth-child(1) {

    }
    .sub-menu-container {
        position: relative;
        top: 0;
        border-radius: 0px 0px 5px 5px;
        width: 100%;
        font-size: .875rem;
        box-sizing: border-box;
        margin-bottom: 5px;
        margin-top:-5px;
    }
    .nav-pills .nav-link.active.la-link {
        border-radius: 5px 5px 0px 0px;
        width:100%;
    }

    .nav-pills .nav-link {
        width: 100%;

    }
    .action-alerts-container.list-view .action-alert .alert-body p.alert-text {
        min-height: auto;
        max-height: auto;
        text-overflow: ellipsis;
        white-space: normal;
    }

    .legislators-container{
        
    }
    .legislator-card{ width:48%;}
    .action-alert .alert-image {
        height: auto;
        max-height: max-content;
    }
    .action-alert .alert-image img {
        height: auto;
    }

    .main-info .head-shot{ width:50%; margin-bottom:20px;}
    .btn-print{ position:relative !important; right:0px !important; float:right;}

    .leg-table{display:none;}
    .leg-mobile-container{display:block;}
    .leg-mobile-container .leg-item{ display:block; width:100%; box-sizing:border-box; padding:10px; border-radius:5px; background:#FFFFFF; margin-bottom:10px;}

    .action-center-slider .item-container .item-container-inner h2.slider-title {
        font-size: 1.5rem;
        max-height: 56px;
        overflow: hidden;
    }
    .desktop-view-only{display:none;}
    .mobile-view-only{display:block;}
    .col-md-7.border-left {
        border-left: 0px !important;
    }

    .card-header-tabs{
        display:flex;
        flex-wrap:nowrap;
    }
    .card-header-tabs li{text-align:center;}
    .action-alerts-container.list-view .action-buttons br {
        display: block;
    }
}



#toast-container{ text-align:center;}
p.preword{ white-space:pre-wrap}
.talkingpoints ul li br{display:none;}

.page-overlay{ width:100%; height:100%; top:0px; right:0px; left:0px; bottom:0px; background:rgba(0,0,0,0.6); position:fixed; z-index:9999999999999;}
.spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 60px;
    width: 60px;
    margin: 0px auto;
    -webkit-animation: rotation .6s infinite linear;
    -moz-animation: rotation .6s infinite linear;
    -o-animation: rotation .6s infinite linear;
    animation: rotation .6s infinite linear;
    border-left: 6px solid rgba(0,174,239,.15);
    border-right: 6px solid rgba(0,174,239,.15);
    border-bottom: 6px solid rgba(0,174,239,.15);
    border-top: 6px solid rgba(0,174,239,.8);
    border-radius: 100%;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
    }
}

@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(359deg);
    }
}

@-o-keyframes rotation {
    from {
        -o-transform: rotate(0deg);
    }

    to {
        -o-transform: rotate(359deg);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

.btn-delete-file{ cursor:pointer;}
.btn-Democratic {
    background-color: #007bff;
    border-color: #007bff;
    color:#ffffff;
}
.btn-Republican {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #ffffff;
}
.btn-print {
    top: 5px;
    right: 15px;
}

.btn-user i.fas.fa-save {
    display:none;
}
.btn-user.btn-edit i.fas.fa-save {
    display: inline-block;
}
.btn-user.btn-edit i.fas.fa-pencil-alt {
    display: none;
}
.btn-user.btn-edit {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}
.btn-round{border-radius:0.25rem; overflow:hidden;}

.btndark {
    color: #fff;
    background-color: #1d2124;
    border-color: #171a1d;
}
    .btndark:hover {
        color: #fff;
        background-color: #23272b;
        border-color: #1d2124;
    }
.badge-Democratic {
    background-color: #007bff !important;
    color: #ffffff;
}

.badge-Republican {
    background-color: #dc3545 !important;
    color: #ffffff;
}
.badge-thank{
    font-size:100% !important
}

@media print {
    body * {
        visibility: hidden;
    }

    #legDetails * {
        visibility: visible;
        color: black;
    }

    footer {
        display: none !important;
    }

    #legDetails {
        position: absolute;
        left: 0;
        top: 10px;
    }

    div * {
        text-align: left;
    }

    div.headshot {
        width: 108px !important;
        height: 148px !important;
    }

    img {
        width: 108px;
        height: 148px;
    }

    .btn-print {
        display: none !important;
    }
    .modal-lg{max-width:100% !important;}
}


footer{ margin-top:50px; display:block; width:100%; height:auto; overflow:hidden; }
footer img{ width:100% !important; height:auto !important;}

#Div2, #editMessagesForm, #tweetContainer {
    outline: none;
}

.text-wrapping{ white-space: normal !important }

.marker {
    background: yellow;
}