@font-face {
    font-family: Avenir;
    src: url(fonts/Avenir.otf);
}

body{
    height:100%; width:100%; margin:0;padding:0;
    font-family: Avenir !important;
    font-size: 1em !important;
    overflow-x: hidden!important;
    background-color: #F6F6F6 !important;
    color: #3F3F3F;
    padding-bottom: 45px;
}  

.container-fluid {
    padding-right: 0px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
}

object {
    pointer-events: none;
}

.row-fluid {height: 100%; display:inline-block; vertical-align: middle;}

.row {
    margin-right: 0;
    margin-left: 0;
}

.lang-row {
    margin-top: 120px;
}

.content-row {
    margin: 20px;
}

#divNotif { 
    margin: 0;
}

.col, [class*="col-"] {
    padding-right: 0px;
    padding-left: 0px;
}

.left-panel{      
    background: #ECECEC;
    padding-left: 30px;
    padding-right: 30px;
}

.right-panel{      
    padding-left: 20px;
}

.vcenter {
    display: table-cell;
    vertical-align: middle;
    float: none;
}

.btn-blue {
    color: #fff;
    background-color: #137AB2;
    border-radius: 0px;
    width: 250px;
    margin-bottom: 20px;
}

.btn-success, .btn-success:hover {
    color: #fff !important;
    background-color: #236420 !important;
    font-size: 1rem !important;
}

.subscribe {
    margin-right: 30px !important;
    width: auto !important;
    cursor: pointer !important;
    line-height:1 !important;
}

.required{
    color: red;
}

label, p{
    margin-bottom: 0px !important;
    font-weight: bold;
    font-size: 0.9em;
    color: black;
}

.form-group {
    margin-bottom: 10px !important;
}

.form-control{
    border-radius: 1px !important;
    border: 1px solid #C1C1C1 !important;
    padding: 6px 0;
    padding-right: 10px !important;
    padding-left: 10px !important;
    height: auto !important;
    font-size: 1em;
    background: #FFF;
}

.form-control:focus {
    box-shadow: none;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #C1C1C1;
    font-size: 1em;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #C1C1C1;
    font-size: 1em;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #C1C1C1;
    font-size: 1em;
}

img {
    width: 100%;
}

.logo{
    text-align: center;
    margin-top: 30px;
}

.logo p{
    font-weight: bold;
    font-size: 1.3em !important;
    margin-top: 10px;
}

.btn {
    border-radius: 2px !important;
}

.custom-button, .custom-button:hover {
    padding: 10px !important;
    background-color: #333CEC !important;
    font-size: 1.2rem !important;
    color: white;
    width: 95%;
    white-space: normal;
}

.custom-success-btn, .custom-success-btn:hover {
    padding: 10px !important;
    background-color: #70A14D !important;
    color: white;
    width: 95%;
}

.custom-recycle-btn, .custom-recycle-btn:hover, .custom-recycle-btn:active, .custom-recycle-btn:visited {
    padding: 10px !important;
    background-color: #018ECE !important;
    color: white !important;
    width: 95%;
}

.small-link {
    font-size: 0.8em;
    text-decoration: underline;
}

.result {
    background: #FAF9FE;
    padding: 10px 10px;
    margin-top: 5px;
    margin-right: 5px;
    margin-left: 5px;
}

.result h2{
    color: #A84965;
    font-weight: 600;
    font-size: 1em !important;
}

.result p{
    text-align: justify;
}

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
    border: 0px !important;
    width: auto !important;
}

.page-header-logo {
    margin-top: 8px !important;
    margin-bottom:8px !important;
    margin-left: 30px;
    width: 43%;
    cursor: pointer;
}

.ppt-image {
    width: 100%;
    margin-right: 50px !important;
}

h2{
    color: #980608;
    font-weight: bold;
    font-size: 2em !important;
}

.page-header{
    background: #012353;
    margin: 0 auto;
    vertical-align: middle;
/*    padding: 0 !important;*/
    border-bottom: 0px !important;
}

.page-header-title{
    color: white;
    font-size: 1.5em;
    font-weight: 400;
    padding-top: 25px;
    margin-left: 20px;
}



.input-group-addon:last-child {
    border: 1px solid grey !important;
}


.panel-default .panel-heading {
    background-color: rgba(177, 176, 176, 0.5);
    font-size: 0.9em;
    font-weight: bold;
    border: 1px solid grey;
}

.panel-body {
    padding: 10px;
    background: #ECECEC;
    border: 1px solid grey;
}

/*input[type="file"] {
    background-color: lightgrey;
    width: 100%;
}*/

.pa-logo {
    width:80%; 
    max-width: 70%;
    height: 15%;
    max-height: 25%;
}

.fi-logo {
    width:70%;
    max-width: 70%;
    height: 65%;
    max-height: 65%;
}

.menu-logo {
    width:70% !important;
    height:65% !important;
    top: 20px !important;
    padding-bottom: 20px;
}

.fa-circle:before {
    font-size: 0.5em;
}

.key{
    text-align: center;
    font-weight: bold;
    color: green;
    font-size: 1.6em;
}

.error{
    border: 1px red solid;
}

.placepicker-map {
    min-height: 250px;
}

a {
    color: black !important;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
}

.footer {
    bottom:0px;
    /*    margin-top: 20px;*/
    position: fixed;
    height: 40px;
    background: #012353;
    text-align: center;
    width: 100%;
    margin-left: -20px;
    right: 0px;
}

.footer-label {
    color: white !important;
    padding: 10px 0 10px 0;
    font-weight: normal;
    font-size: 1em !important;
}

.header-nav-links {
    display:flex; align-items: center; margin-top: 35px; margin-right: 10px; float:right;
}

.esd-logo{
    padding: 0 20px 0 20px;
    text-align: center;
}

.link-sep-column {
    padding: 0;
    text-align:center;
    white-space: nowrap;
}

.link-sep-column-last {
    padding: 2px 0;
    text-align: center;
}

.modal-content {
    background: #FFF !important;
}

.schedule-row {
    /*    background: #C2D82E;*/
}

.schedule-label {
    color: #022355;
    font-size: 1.2em;
}

.modal-content {
    border-bottom: 1px solid black !important;
}

.modal-header {
    border-bottom: 1px solid #B2B2B6 !important;
}

.modal-body {
    padding: 0 !important;
}

.fa-ul {
    margin-left: 0 !important;
}

.fa-li {
    position: relative !important;
    left: auto !important;
    top: 0 !important;
}

#ulNotif li, #ulNotifications li {
    border-bottom: 1px solid #B2B2B6 !important;
    /*    padding-left: 45px;*/
}

.blue-circle {
    color: #3A7DE5;
    font-size: 1.3em;
}

.grey-circle {
    color: #C1C1C1;
    font-size: 1.3em;
}

.grey-li {
    color: #C1C1C1;
}

.what-where {
    background-image: url('../../assets/images/what_where.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width:100%;
}

.what-where-active {
    background-image: url('../../assets/images/what_where_after.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width:100%;
}

.renew {
    background-image: url('../../assets/images/disability_discount.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width:100%;
}

.renew-active {
    background-image: url('../../assets/images/disability_discount_after.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width:100%;
}

.stations {
    background-image: url('../../assets/images/stations.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
}

.stations-active {
    background-image: url('../../assets/images/stations_active.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
}

.landfills {
    background-image: url('../../assets/images/landfills.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
}

.landfills-active {
    background-image: url('../../assets/images/landfills_active.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
}

.schedule {
    background-image: url('../../assets/images/schedule.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
}

.schedule-active {
    background-image: url('../../assets/images/schedule_active.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
}

.reminders {
    background-image: url('../../assets/images/notifications.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
}

.reminders-active {
    background-image: url('../../assets/images/notifications_active.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
}

.location {
    background-image: url('../../assets/images/driver_location.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
}

.location-active {
    background-image: url('../../assets/images/driver_location_active.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
}

.report {
    background-image: url('../../assets/images/report_problem.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
}

.report-active {
    background-image: url('../../assets/images/report_problem_active.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
}

.report-status {
    background-image: url('../../assets/images/report_status.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
}

.report-status-active {
    background-image: url('../../assets/images/report_status_active.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
}

.pass {
    background-image: url('../../assets/images/get_ccs_pass.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
}

.pass-active {
    background-image: url('../../assets/images/get_ccs_pass_active.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
}

.certification {
    background-image: url('../../assets/images/certification.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
}

.certification-active {
    background-image: url('../../assets/images/certification_active.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
}

.pass-req {
    background-image: url('../../assets/images/pass.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
}

.pass-req-active {
    background-image: url('../../assets/images/pass_active.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
}

.services-img-col {
    height:50px;
}

.recycle-right-img {
    height: 80%;
}


.service-label-normal {
    color: #2C466F;
    font-weight: bold;
    font-size: 1.4em;
    cursor: pointer;
    word-break: break-word;
}

.service-label-active  {
    color: white !important;
    font-weight: bold;
    font-size: 1.4em;
    cursor: pointer;
}

/*.service-label-normal:hover, .service-label-active:hover {
    color: white !important;
}*/

.mobile-header-label {
    color: white !important;
    font-weight: bold;
    font-size: 1.25em;
    cursor: pointer;
}

.normal-col {
    background: #FFF;
    /*    height: 120px !important;*/
}

.active-col {
    background: #236420 !important;
    color: #fff !important;
}

.services-right-col {
    padding: 0 40px 0 30px;
}

.recycle-right-img-col {
    height: 85%;
}

.batteries, .appliances, .glass, .household, .plastic, .paper {
    height: 100%;
    width: 100%;
    cursor: pointer;
    padding: 0% !important;
    background-repeat: no-repeat;
    background-size: contain;
}

.batteries {
    background-image: url(../../assets/images/batteries.png);
}

img[src$=".svg"] {width: 100%;}

#iconCol img[src$=".svg"] {width: 50%;}

.icon-prop {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 100%;
    height: auto;
    font-size: 1.1rem !important;
    color: white !important;
}

.icon-col {
    height: 120px; 
    display: flex;
}

.icon-col-cat {
    height: 8rem; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-col-cat {
    color: #fff; 
    font-size: 1.1em
}

.batteries-icon {
    /*    background-image: url(../../assets/images/batteries.svg)*/
}

.appliances {
    background-image: url(../../assets/images/electronic.png);
}

.appliances-icon {
    /*    background-image: url(../../assets/images/electronic.svg);*/
}

.glass {
    background-image: url(../../assets/images/glass.png);
}

.glass-icon {
    /*background-image: url(../../assets/images/glass.svg);*/
}

.household {
    background-image: url(../../assets/images/household.png);
}

.household-icon {
    /*background-image: url(../../assets/images/household.svg);*/
}

.plastic {
    background-image: url(../../assets/images/plastic.png);
}

.plastic-icon {
    /*background-image: url(../../assets/images/plastic.svg);*/
}

.paper {
    background-image: url(../../assets/images/paper.png);
}

.paper-icon {
    /*background-image: url(../../assets/images/paper.svg);*/
}

.recycle-services-label {
    font-weight: normal;
    color: white;
    font-size: 1.35em;
    width: 100px;
    cursor: pointer;
    /*    margin-top: 25px;*/
}

.map-col  {
    border: 2px solid #3A7DE5;
    background-size: cover;
    background-repeat: no-repeat;
}

.northeast_map {
    background-image: url(../../assets/images/northeast_map.png);
}

.central_map {
    background-image: url(../../assets/images/central_map.png);
}

.westside_map {
    background-image: url(../../assets/images/westside_map.png);
}

.mission_valley_map {
    background-image: url(../../assets/images/mission_valley_map.png);
}

.eastside1_map {
    background-image: url(../../assets/images/eastside1_map.png);
}

.eastside2_map {
    background-image: url(../../assets/images/eastside2_map.png);
}

.map-title-col  {
    background: #333CEC;
    text-align: center;
}

.can-img {
    height: 100%;
    width: auto;
}

.fa-search-i{
    float:right;
    top:10px;
    right:15px;
    position:absolute;
    color:lightgray;
}

.odd-col-control, .even-col-control {
    padding-right: 5px;
}

.rb-div input[type=radio]{
    position: absolute;
    visibility: hidden;
    bottom: 0px;
}

.rb-div {
    display: block;
    position: relative;
    float: left;
    margin-top: 0.5em;
    border: 0px black solid;
    background-color: #333CEC;
    padding: 0px 15px 4px 10px;
    font-size: 1em;
    color: white;
    width: 95%;
}

.rb-div label{
    font-weight: normal;
    display: block;
    position: relative;
    padding: 0px 0px 0px 40px;
    margin: 8px auto;
    z-index: 9;
    cursor: pointer;
    color: #fff;
    font-size: 1.1em;
    -webkit-transition: all 0.25s linear;
}

.rb-div .check{
    display: block;
    position: absolute;
    border: 5px solid #fff;
    border-radius: 100%;
    height: 25px;
    width: 25px;
    color: white;
    top: 8px;
    z-index: 5;
    transition: border .25s linear;
    -webkit-transition: border .25s linear;
}

.rb-div .check::before {
    display: block;
    position: absolute;
    content: '';
    border-radius: 100%;
    height: 11px;
    width: 11px;
    top: 2px;
    left: 2px;
    margin: auto;
    transition: background 0.25s linear;
    -webkit-transition: background 0.25s linear;
}

.rb-div .check-checkbox{
    display: block;
    position: absolute;
    border: 5px solid #AAAAAA;
    height: 25px;
    width: 25px;
    top: 5px;
    z-index: 5;
    transition: border .25s linear;
    -webkit-transition: border .25s linear;
}

.rb-div .check-checkbox::before {
    display: block;
    position: absolute;
    content: '';
    height: 11px;
    width: 11px;
    top: 2px;
    left: 2px;
    margin: auto;
    transition: background 0.25s linear;
    -webkit-transition: background 0.25s linear;
}

input[type=radio]:checked ~ .check {
    border: 5px solid #012353;
}

input[type=radio]:checked ~ .check::before{
    background: #012353;
}

input[type=radio]:checked ~ label{
    color: #012353;
}

/*
.qrb-div input[type=radio], .qrb-div input[type=checkbox]{{
    position: absolute;
    visibility: hidden;
    bottom: 0px;
}

.qrb-div {
    display: block;
    position: relative;
    float: left;
    margin-top: 0.5em;
    border: 0px black solid;
    background-color: transparent;
    padding: 0px 15px 4px 30px;
    font-size: 0.7em;
    width: 95%;
}

.qrb-div label{
    font-weight: bold;
    display: block;
    position: relative;
    padding: 0px 0px 0px 50px;
    margin: 8px auto;
    z-index: 9;
    cursor: pointer;
    color: black;
    font-size: 1.5em;
    -webkit-transition: all 0.25s linear;
    text-align: left;
}

.qrb-div .check{
    display: block;
    position: absolute;
    border: 5px solid #012353;
    border-radius: 100%;
    height: 25px;
    width: 25px;
    top: 5px;
    z-index: 5;
    transition: border .25s linear;
    -webkit-transition: border .25s linear;
}

.qrb-div .check::before {
    display: block;
    position: absolute;
    content: '';
    border-radius: 100%;
    height: 11px;
    width: 11px;
    top: 2px;
    left: 2px;
    margin: auto;
    transition: background 0.25s linear;
    -webkit-transition: background 0.25s linear;
}

.qrb-div .check-checkbox{
    display: block;
    position: absolute;
    border: 5px solid #AAAAAA;
    height: 25px;
    width: 25px;
    top: 5px;
    z-index: 5;
    transition: border .25s linear;
    -webkit-transition: border .25s linear;
}

.qrb-div .check-checkbox::before {
    display: block;
    position: absolute;
    content: '';
    height: 11px;
    width: 11px;
    top: 2px;
    left: 2px;
    margin: auto;
    transition: background 0.25s linear;
    -webkit-transition: background 0.25s linear;
} */ 

.qrb-div input[type=radio], .qrb-div input[type=checkbox]{
     position: absolute;
    visibility: hidden;
    bottom: 0px;
}

.qrb-div {
    display: block;
    position: relative;
    float: left;
    margin-top: 0.5em;
    border: 0px black solid;
    background-color: transparent;
    padding: 0px 15px 4px 30px;
    font-size: 0.7em;
    width: 95%;
}

.qrb-div label{
    font-weight: bold;
    display: block;
    position: relative;
    padding: 0px 0px 0px 50px;
    margin: 8px auto;
    z-index: 9;
    cursor: pointer;
    color: black;
    font-size: 1.5em;
    -webkit-transition: all 0.25s linear;
    text-align: left;
}

.qrb-div .check{
    display: block;
    position: absolute;
    border: 5px solid #012353;
    border-radius: 100%;
    height: 25px;
    width: 25px;
    top: 5px;
    z-index: 5;
    transition: border .25s linear;
    -webkit-transition: border .25s linear;
}

.qrb-div .check::before {
    display: block;
    position: absolute;
    content: '';
    border-radius: 100%;
    height: 11px;
    width: 11px;
    top: 2px;
    left: 2px;
    margin: auto;
    transition: background 0.25s linear;
    -webkit-transition: background 0.25s linear;
}

.qrb-div .check-checkbox{
    display: block;
    position: absolute;
    border: 5px solid #AAAAAA;
    height: 25px;
    width: 25px;
    top: 5px;
    z-index: 5;
    transition: border .25s linear;
    -webkit-transition: border .25s linear;
}

.qrb-div .check-checkbox::before {
    display: block;
    position: absolute;
    content: '';
    height: 11px;
    width: 11px;
    top: 2px;
    left: 2px;
    margin: auto;
    transition: background 0.25s linear;
    -webkit-transition: background 0.25s linear;
}

input[type=checkbox]:checked ~ .check-checkbox, input[type=radio]:checked ~ .check {
    border: 5px solid #fff;
}

input[type=checkbox]:checked ~ .check-checkbox::before, input[type=radio]:checked ~ .check::before{
    background: #fff;
}

input[type=checkbox]:checked ~ label, input[type=radio]:checked ~ label{
    color: #fff;
}

#anonymous:checked ~ label {
    color: black !important;
}

/* File Upload */
input[type="file"]
{
    display: none;
}

.custom-file-upload
{
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

.file-upload-wrap label
{
    display: inline-block;
    background: #00285a;
    width: 120px;
    height: 120px;
    margin: 0;
    position: relative;
    text-align: center;
    /*    top: 20px;
        left: 25px;*/
    background: url(../../assets/images/camera.svg) no-repeat;
    background-size: contain;
    background-position: center center;
    /*    border: 2px solid #3A7DE5;*/
    cursor: pointer;
}
.file-upload-wrap label i
{
    font-size: 25px;
    color: #fff;
}
.file-upload-wrap #result-wrapper
{
    width: calc( 100% - 135px );
    height: 120px;
    overflow: hidden;
    overflow-x: auto;
    position: absolute;
    top: 5px;
    left: 130px;
}

.file-upload-wrap #result-wrapper #img-result
{
    width: auto;
    height: 100%;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
}

.file-upload-wrap #img-result div
{
    width: 80px;
    height: 80px;
    float: left;
    margin: 0 10px 0 0;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.file-upload-wrap #img-result div i
{
    position: absolute;
    top: 0;
    display: block;
    right: 0;
    color: #fff;
    font-size: 20px;
    background: black;
}
.file-upload-wrap #img-result div img
{
    width: auto;
    height: 100%;
    border: 0;
    border: 1px solid #d4d4d4;
    border-radius: 0;
}

.ui-dialog .ui-dialog-title {
    font-size: 0.8em;
}

.ui-widget-content {
    font-size: 0.9em !important;
    margin: 12px 0 0px 0;
}

.report-attach-label {
    font-size: 0.95em;
    margin: 45px 0 0 10px;
    font-weight: 500;
    width:100%;
    text-align:center;
}

a.notif {
    position: relative;
    display: block;
    height: 22px;
    width: 20px;
    top: 8px;
    background: url('../images/bell.png') no-repeat;
    background-size: 20px 22px;
    background-position: center center;
    text-decoration: none;
    float: right;
    margin-right: 20px;
}
.num {
    position: absolute;
    /*  right: -2px;
      top: 4px;*/
    color: #fff;
    font-size: 0.6em;
    background: red;
    padding: 1px 5px;
    border-radius: 100px;
}

.square {
    float:left;
    position: relative;
    width: 100%;
    padding-bottom : 100% !important; /* = width for a 1:1 aspect ratio */
    /*    margin:1.66%;*/
    background-color: #333CEC;
    overflow:hidden;
    cursor:pointer;
}

.content {
    position:absolute;
    height:100%; /* = 100% - 2*5% padding */
    width:100%; /* = 100% - 2*5% padding */
    padding: 5%;

}

.table{
    display:table;
    width:100%;
    height:100%;
}

.table-cell{
    display:table-cell;
    vertical-align:middle;
}

.notification_date {
    font-size: 1em; 
    font-style: italic; 
    color: #595959; 
    padding-right: 5px;
}

.quiz-body {
    padding-bottom: 0 !important;
    background: url('../images/quiz/background.png') center center;
    background-size: cover;
}

.quiz-title {
    color: #699D45; 
    font-size: 1.5em !important;
}

.quiz-desc-label {
    text-align: justify;
/*    display: table-cell;*/
    padding: 25px 0 25px 0;
}

.quiz-can {
    padding: 30px 0 0 0;
    width: 100px;
}

.quiz-question-div{
    background-color: #CCE0BD;
    border: 1px solid #72A350;
}

.quiz-ques-nolbl {
    font-size: 0.9em;
    padding: 15px 0 10px 30px;
}

.quiz-ques-lbl {
    font-size: 1.5em;
    padding: 10px 10px 50px 30px;
}

.quiz-ques-btn {
    font-size: 3em;
    color: #6FA04B;
    margin-top: 50px;
    padding: 0 !important;
    background-color: transparent !important;
}

.quiz-ans-row {
    padding: 20px 0;
}

.quiz-pic-ans-div {
    border: 1px solid darkgrey;
    display: flex;
    align-items: center;
}

.quiz-pic-ans-lbl {
    margin-left: 10px;
    font-size: 0.95em;
    cursor: pointer;
    word-wrap: break-word;
    white-space: normal;
    text-align: left;
}

.quiz-ans-img-col {
    padding: 15px 5px;
}

.quiz-ans-img {
    width: 70px;
}

.quiz-wrong-ans {
    color: red;
}

.fa-checkbox {
    position: absolute;
    margin: -5px 0 0 15px;
    font-size: 2em;
    z-index: 1000;
}

.fa-radio {
    position: absolute;
    margin: -7px 0 0 17px;
    font-size: 2em;
    z-index: 1000;
}

.fa-hlink {
    position: absolute;
    text-align: right;
    margin: -10px 0 0 0;
    width: 100%;
    font-size: 2em;
    z-index: 1000;
}

.quiz-correct-ans {
    color: green;
}

.quiz-link-btn {
    display: block !important;
    font-weight: normal !important;
    padding: 0 !important;
    opacity: 1 !important;
}

.quiz-score {
    color: #018ECE; 
    font-size: 3em !important;
    padding-top: 50px;
}


/*Tablets*/
@media screen
and (min-width: 768px)
and (max-width: 1000px) {
    .services-img-col {
        height: 40px !important;
    }

    .event {
        width: 20px !important;
        height: 20px !important;
    }

    /*    .normal-col, .active-col {
            height: 150px !important;
        }*/

    .service-label-normal, .service-label-active {
        font-size: 1.2em !important;
    }

    /*    .what-where, .what-where-active {
            width: 60% !important;
        }
    
        .stations, .stations-active {
            width: 40% !important;
        }
    
        .landfills, .landfills-active {
            width: 75% !important;
        }
    
        .schedule, .schedule-active {
            width: 35% !important;
        } */

    .reminders, .reminders-active {
        background-size: 30% !important;
    }
    /*
        .location, .location-active {
            width: 32% !important;
        }
    
        .report, .report-active {
            width: 40% !important;
        }*/

    .services-right-col {
        padding: 0 1px 0 10px !important;
    }

    .recycle-right-img {
        height: 100% !important;
    }

    .can-img {
        height: 40% !important;
        width: inherit !important;
    }
}

/*Small Screens*/
@media screen
and (min-width: 577px)
and (max-width: 767px) {
    .recycle-right-img {
        height: 100% !important;
    }

    .event {
        width: 26px !important;
        height: 26px !important;
    }

    .services-img-col {
        height: 60px !important;
    }

    .service-label-normal, .service-label-active {
        font-size: 1.4em !important;
    }

    .services-right-col {
        padding: 10px 0 5px 20px !important;
    }

    .even-col-control {
        padding-right: 0 !important;
    }
    
    .quiz-ques-btn {
    font-size: 2em !important;
    margin-top: 0 !important;
}

}


/*Mobiles*/
@media screen
and (min-width: 320px) 
and (max-width: 576px) {
    html, body{
        padding-bottom: 0 !important;
    }

    .event {
        width: 16px !important;
        height: 16px !important;
    }

    .subscribe, .subscribe:active, .subscribe:hover  {
        font-size: 0.85em !important;
        padding: 5px !important;
        cursor: pointer;
    }

    .mobile-header-label {
        font-size: 0.9em !important;
        word-break: break-word;
        margin: 0 15px 0 15px;
    }

    .esd-logo{
        padding: 40px 20px 40px 20px;
        text-align: center;
    }

    .header-nav-links {
        margin-top: 0px !important;
    }

    .page-header-logo {
        width: 80% !important;
        margin-left: 10px !important;   
    }

    .page-header-title {
        margin-left: 10px !important;
    }

    p {
        margin-bottom: 0 !important;
    }

    .footer-label {
        font-size: 0.7em !important;
    }

    .lang-row {
        margin-top: 0px !important;
    }

    .content-row {
        margin: 10px 20px !important;
    }

    #divNotif {
        margin: 10px -20px !important; 
    }

    .services-right-col {
        /*        padding: 10px 0 5px 10px !important;*/
        padding: 0 0 5px 0 !important;
    }

    .services-img-col {
        height: 35px !important;
    }

    .icon-col {
        height: 60px;
    }

    .icon-col-cat {
        height: 40px;
    }

    .text-col-cat {
        color: #fff; 
        font-size: 1em
    }

    .batteries, .appliances, .glass, .household, .plastic, .paper {
        /*        width: 140px !important;
                height: 140px !important;*/
    }

    .recycle-services-label {
        font-size: 1.2em !important;
    }

    a {
        font-size: 0.9em !important;
    }

    .recycle-right-img {
        height: 100% !important;
    }

    .recycle-right-img-col {
        height: 80% !important;
    }

    .schedule-label {
        font-size: 1em !important;
    }

    .can-img {
        height: 100px !important;
    }

    .even-col-control {
        padding-right: 0 !important;
    }

.quiz-desc-label {
    text-align: justify !important;
    padding: 10px 0 30px 0 !important;
}

.quiz-can {
    padding: 50px 0 0 0;
}

.quiz-ques-nolbl {
    font-size: 0.8em;
    padding: 10px 0 5px 10px !important;
}

.quiz-ques-lbl {
    font-size: 1.1em;
    padding: 10px 10px 30px 10px !important;
}

.quiz-ques-btn {
    margin-top: 0 !important;
}

.qrb-div {
    margin-top: 1em !important;
    padding: 0 !important;
    font-size: 0.6em !important;
}

.quiz-ans-row {
    padding: 10px 0 !important;
}

.quiz-ans-img-col {
    padding: 5px 5px !important;
}

}

.dropdown-toggle::after {
    float: right !important;
    margin-top: 8px !important;
}

#ddlCategory li { background: white; padding:5px; margin-left: -15px; padding-left: 10px; }
#ddlCategory li:nth-child(odd) { background: #edecec; }
#ddlCategory li:hover { background-color: #3A7DE5; color: white; }
#selected_category { color: #236420; cursor: pointer; font-size: 1.1em; font-weight: bold;}

.bot{display:flex; width:100%; border:none; background:transparent; overflow:hidden;}
.bot #response-container{width:calc(100% + 50px); height:280px; overflow-x:hidden; overflow-y:auto;}
.bot #response{width:340px;}
.bot .botReplyUser{display:block; width:calc(100% - 10px); padding:5px; border-radius:5px; background:#eee; color:#888; margin-bottom:5px;}
.bot .botReplyBot{display:block; width:calc(100% - 12px); padding:5px; border-radius:5px; border:1px solid #eee; background:#fff; color:#888; margin-bottom:5px;}
.bot .botReplyUserCurrent{color:#555; background:#ddd;}
.bot .botReplyBotCurrent{color:#555;}
.bot .botIdUser{display:none; }
.bot .botIdBot{display:none; }
.bot .botMsgUser{display:inline-block; }
.bot .botMsgBot{display:inline-block; }
.bot #botInput{display:inline-block; width:90%; padding:5px; border-radius:5px; border:1px solid #eee; line-height:30px; margin-right:5px;}
.bot #botRec{display:inline-block; width:40px; height:40px; border-radius:5px; border:1px solid #eee; background:#fff;
             background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/2000px-Google_mic.svg.png');
             background-position: center; background-size: 25px 30px; background-repeat: no-repeat;}


@media screen
and (min-width: 987px)
and (max-width: 1254px) {
    .icon-col-cat {
        height: 5rem !important; 
    }
    #iconCol img[src$=".svg"] {width: 40%;}
    .text-col-cat {
        font-size: 1em;
    }
}

@media screen
/* and (min-width: 400px) */
and (max-width: 566px) {
    .icon-col-cat {
        height: 4rem !important; 
    }
    #iconCol img[src$=".svg"] {width: 40%;}
    .text-col-cat {
        font-size: 1em;
    }
    .square{
        padding-bottom: 80% !important;
        padding-top: 5%;
    }
}

@media (max-width: 350px) {
    .col-12 {
        padding-top: 2% !important;
    }
}

@media screen
and (min-width: 567px)
and (max-width: 766px) {
    .icon-col-cat {
        height: 6rem !important; 
    }
    #iconCol img[src$=".svg"] {width: 40%;}
    .text-col-cat {
        font-size: 1em;
    }
}

@media screen
and (min-width: 767px)
and (max-width: 904px) {
    .icon-col-cat {
        height: 5rem !important; 
    }
    #iconCol img[src$=".svg"] {width: 40%;}
    .text-col-cat {
        font-size: 1em;
    }
}

@media screen
and (min-width: 905px)
and (max-width: 987px) {
    .icon-col-cat {
        height: 7rem !important; 
    }
    #iconCol img[src$=".svg"] {width: 40%;}
    .text-col-cat {
        font-size: 1em;
    }
}


@media screen
and (min-width: 1600px) {
   
    .icon-col-cat {
        height: 13rem !important; 
    }
    #iconCol img[src$=".svg"] {width: 40%;}
    .text-col-cat {
        font-size: 1.5rem;
    }
}

/* Fix Scrolling - Start */                
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){

    html,
    body{
        width:100%;
        overflow-x:hidden;
    }
}
/* Fix Scrolling - End */

.input-group-btn {
   border: 1px solid #c1c1c1;
   background-color: #DDD;
}

#btnLocation {
    background-color: transparent !important;
}

* {
    box-shadow: none !important;
}

li {
    padding-left: 10px;
    width: 100%;
}

/*Accordion Start*/
#accordion4 .panel{
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 5px;
    overflow: hidden;
    position: relative;
}
#accordion4 .panel-heading{
    padding: 0;
    border: none;
    border-radius: 0;
    margin-bottom: 10px;
    z-index: 1;
    position: relative;
}
#accordion4 .panel-heading:before,
#accordion4 .panel-heading:after{
    content: "";
    width: 50%;
    height: 30%;
/*    box-shadow: 0 15px 5px #808080;*/
    position: absolute;
    bottom: 15px;
    left: 10px;
    transform: rotate(-3deg);
    z-index: -1;
}
#accordion4 .panel-heading:after{
    left: auto;
    right: 10px;
    transform: rotate(3deg);
}
h4.panel-title{margin:10px 0px !important;}
#accordion4 .panel-title a{
    display: block;
    padding: 15px 15px 15px 10px;
    margin: 0;
    background: #dee2e6;
    font-size: 0.85em;
    font-weight: 500;
/*    letter-spacing: 1px;*/
    color: #d11149;
    border-radius: 0;
/*    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 40px rgba(0, 0, 0, 0.1) inset;*/
    position: relative;
}
#accordion4 .panel-title a:before,
#accordion4 .panel-title a.collapsed:before{
    content: "\f106";
    font-family: "FontAwesome";
    font-weight: 900;
    width: 55px;
    height: 100%;
    text-align: center;
    line-height: 50px;
/*    border-left: 2px solid #D11149;*/
    position: absolute;
    top: 0;
    right: 0;
}

#accordion4 .panel-title a.collapsed:before{ content: "\f107"; }
/*#accordion4 .panel-title a .icon{
    display: inline-block;
    width: 55px;
    height: 100%;
    border-right: 2px solid #d11149;
    font-size: 20px;
    color: rgba(0,0,0,0.7);
    line-height: 50px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
}*/
#accordion4 .panel-body{
/*    padding: 10px 15px;*/
    margin: 0 0 20px;
/*    border-bottom: 3px solid #d11149;*/
    border-top: none;
    background: #fff;
    font-size: 0.9em;
    color: #333;
    line-height: 27px;
}

.top_label {
    font-size: 1.2em; 
    color: #012353;
    font-weight: bold;
}


/*Accordion End*/

.event-grey {
  background: url('../images/garbage_can.png') no-repeat;
  background-position: center;
  background-size: contain;
  background-color: transparent !important;
}
.event-blue {
  background: url('../images/can.png') no-repeat;
  background-position: center;
  background-size: contain;
  background-color: transparent !important;
}
.event-blue-cross {
  background: url('../images/can_cross.png') no-repeat;
  background-position: center;
  background-size: contain;
  background-color: transparent !important;
}
.event-asterik {
  background: url('../images/asterik.png') no-repeat;
  background-position: top;
  background-size: contain;
  width: 15px !important;
  background-color: transparent !important;
}
.event-cross {
  background: url('../images/cross.png') no-repeat;
  background-position: top;
  background-size: contain;
  width: 15px !important;
  background-color: transparent !important;
}

.ppt-video-title {
    background-color: #087BCD;
    margin: 5px 2px 10px 2px;
    text-align:center;
    padding: 10px 0;
}

.swal-button{
    font-size: 13pt !important;
}

.swal-button--confirm {
    background-color: #333CEC !important;
}

.lan-btn-en {
    color: white;
    border-bottom: none !important;
}

.lan-btn-en.active {
    border-bottom: 2px solid #07bbff !important;
}

.lan-btn-es {
    color: white;
    border-bottom: none !important;
}

.lan-btn-es.active {
    border-bottom: 2px solid #07bbff !important;
}

.cal-day-outmonth span[data-cal-date] {
    opacity: 0.5 !important;
    color: black !important;
}