/*----------------------------------------------------------------------
Name: style.css
Project: Representable
Version: 1.0
Modified: 5/30/2019
Authors: S. Arora, K. Barnes, P.Iyer, L. Johnston, T. Marcu
----------------------------------------------------------------------*/
/* IMPORTANT - READ BELOW BEFORE ADDING - IMPORTANT*/

/*
WHEN CHANGING CSS MAKE SURE YOU ARE AS SPECIFIC AS POSSIBLE.
This means, if you're only changing something for a small section of the website,
define new CSS classes and rules, and don't change default Bootstrap classes
and rules, since this can lead to unintended consequences.
This means no changing anything like <a>, <li>, <p>, etc.

You can change them if you want to change the entire website, but customizing
Bootstrap is better in that case. https://getbootstrap.com/docs/4.5/getting-started/theming/
*/

/* Consent Banner CSS */
.consent-banner
{
    position: fixed;
    z-index: 100;
    right: 0;
    bottom: 0;
    left: 0;

    display: none;
    /* background-color: #ecf0f1; */
}

.consent-banner .btn-toolbar
{
    justify-content: center;
}

/* Entry Form CSS */
form:invalid
{
    border-color: red;
}

.has_error
{
    border: 1px solid red !important;
}

.scrollable
{
    overflow: scroll;

    max-height: 100px;
}

.text-required
{
    color: #ff726f;
}

.has_success
{
    border-color: 1px solid #ced4da;
}

.no-underline-link:hover
{
    text-decoration: none;
}

.no-underline-link:focus
{
    text-decoration: none;
}

.rounded-lg
{
    border-radius: 10px;
}

.mw-75
{
    min-width: 75%;
}

.bottom
{
    position: absolute;
    bottom: 0;
}

.align-middle
{
    margin: auto;
}

.bg-70C5EA
{
    background: #70c5ea;
}

.bg-2A94F4
{
    background: #2a94f4;
}

.text-359DFB
{
    color: #359dfb;
}

.text-2A94F4
{
    color: #2a94f4;
}

.txt-16
{
    font-size: 1rem;
}

.opacity-5
{
    opacity: 1;
}

.opacity-4
{
    opacity: .8;
}

.opacity-3
{
    opacity: .6;
}

.opacity-2
{
    opacity: .4;
}

.opacity-1
{
    opacity: .2;
}

.opacity-0
{
    opacity: 0;
}

/* TOC Checkbox*/
.toc-check
{
    display: inline;
}

.toc-check-label
{
    display: inline;
}

.toc-check-input
{
    display: inline;
}

.grayed-out
{
    background: #dfdfdf !important;
}

.circle,
.circle-sm,
.circle-xs
{
    font-size: 1rem;

    display: table-cell;

    text-align: center;
    vertical-align: middle;

    color: #fff;
    border-radius: 50%;
}

.circle
{
    width: 50px;
    height: 50px;
}

.circle-sm
{
    width: 40px;
    height: 40px;
}

.circle-xs
{
    width: 30px;
    height: 30px;
}

.progress-line
{
    overflow: hidden;

    width: 50px;
    height: .25rem;

    background: #dfdfdf;
}

.progress-line-vert
{
    overflow: hidden;

    width: .25rem;
    height: 50px;

    background: #dfdfdf;
}

.progress-step.unseen
{
    background: #dfdfdf !important;
}

.progress-step.complete
{
    background: #80e3d3;
}

.progress-step.current
{
    background: #80e3d3;
    box-shadow: 0 2px 5px 1px rgba(0,0,0,.2);
}

.progress-bar-vert
{
    transition: height .6s ease;
}

.progress-bar-vert.complete
{
    height: 100%;

    background-color: #80e3d3;
}

.progress-bar-vert.current
{
    height: 25%;

    background-color: #80e3d3;
}

.progress-bar-vert.unseen
{
    height: 0;

    background-color: #80e3d3;
}


.progress-bar
{
    height: 100%;

    transition: width .6s ease;
}
.progress-bar.complete
{
    width: 100%;

    background-color: #80e3d3;
}

.progress-bar.current
{
    width: 25%;

    background-color: #80e3d3;
}

.progress-bar.unseen
{
    width: 0;

    background-color: #80e3d3;
}

.social-media-logo
{
    opacity: 70%;
}

.social-media-logo:hover
{
    opacity: 40%;
}

@media (prefers-reduced-motion: reduce)
{
    .progress-bar,
    .progress-bar-vert
    {
        transition: none;
    }
}

.org-icon
{
    font-size: 2rem;
}

.org-card
{
    min-height: 200px;
}

.org-card-btn
{
    position: absolute;
    right: 0;
    bottom: 15px;
    left: 0;

    margin-right: auto;
    margin-left: auto;
}

.org-dash-drive-group
{
    max-height: 275px;
}
/* .progress-bar.complete:hover {
  height: 100% !important;
} */

/* Pop up - bottom left corner of the map. */

.map-popup-box
{
    position: absolute;
    z-index: 10;
    top: 63px;
    left: 10px;

    display: none;

    width: 50%;
    padding: 10px;

    text-align: left;

    border-radius: 10px;
    background-color: rgba(255, 255, 255, .9);
}
.warning-box
{
    font-size: 1rem;

    border: 1px solid red;
}

#state-map-cois
{
    overflow: scroll;

    max-height: 800px;
}

#partner-welcome-modal .modal-dialog .modal-content
{
    opacity: .85;
    border-radius: 50px;
    background-color: #daefff;
}

.gray-btn
{
    color: #5b5b5b;
    border-color: #5b5b5b;
    background-color: transparent;
}

.gray-btn:hover
{
    color: #fff;
    background-color: #5b5b5b;
}

.gray-btn:focus
{
    box-shadow: 0 0 0 .25rem #5b5b5a;
}

/*********************************************************************

Entry Preview Page

**********************************************************************/
#entry_preview_intro
{
    line-height: 2;

    padding: 15px 15px 15px 20px;
}

#entry_preview_intro h3
{
    padding-bottom: 10px;
}

#entry_preview_info
{
    margin: 15px;
    padding: 50px 90px;

    color: black;
    border-color: rgba(218, 239, 255, .63);
    background: rgba(218, 239, 255, .63);
}

#entry_preview_button
{
    text-align: center;
}

@media only screen and (max-width: 1025px)
{
    .entry-pr-gerry-txt
    {
        font-size: initial !important;
    }
}

@media only screen and (max-width: 768px)
{
    #entry_preview_image
    {
        margin: 0;
        padding: 10px 0 20px 0;

        text-align: center;
    }

    #entry_preview_intro
    {
        text-align: center;
    }

    #entry_preview_info
    {
        flex-direction: column;

        padding: 30px 50px;
    }

    #entry_video_wrap
    {
        padding-top: 20px;
        padding-bottom: 20px;

        align-self: center;
    }

    #entry_preview_video
    {
        margin-top: 20px;
        margin-left: 0 !important;
    }
}

@media only screen and (max-width: 540px)
{
    #entry_preview_info
    {
        flex-direction: column;

        padding: 30px 30px;
    }

    #entry_preview_button {
      padding-top: 20px;
    }

    #entry_preview_video
    {
        position: relative;

        overflow: hidden;

        height: 0;
        margin-left: 0 !important;
        padding-top: 20px;
        padding-bottom: 56.25%;
    }

    #entry_preview_video iframe
    {
        position: absolute;
        top: 0;
        left: 0;

        width: 100%;
        height: 100%;
    }

    #entry_video_wrap
    {
        width: 100%;
        max-width: 300px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    #entry_preview_button
    {
        padding-top: 20px;
    }

    .bootstrap-tagsinput
    {
        height: calc(9.75rem + 2px) !important;
    }
}

input[type='range']::-webkit-slider-thumb
{
    width: 8px;
    height: 8px;

    border-radius: 50%;
}

/* Disable button hover when button is disabled. */
button:disabled:hover
{
    cursor: default;
}

/* Body and headings */
/* Change the website default font. */
body
{
    /* font-family: Inter, system-ui, sans-serif; */
    font-family: europa, sans-serif;
}

html,
body
{
    height: 100%;
}

body
{
    /* display: flex; */
    flex-flow: column;
}

a {
  color: #2a94f4;
}

/* Change hero card so that it doesn't display borders. */
.hero-card .card
{
    border-width: 0 !important;
}

/* Entry button submission center */
.flex-centered
{
    display: inline-inline-block;

    height: 46px;
    margin-top: 31px;

    justify-content: center;
}

/* Bootstrap elements for navbar. */
.navbar
{
    z-index: 999;
}
.navbar-brand
{
    font-weight: 600;

    letter-spacing: 2.5px;

    background: -webkit-linear-gradient(-45deg, #2a94f4, #00c6a7);
    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}
.navbar-logo
{
    width: 60px;
}
.verified-logo
{
    width: 1rem;
}

.nav-link
{
    /* font-weight: 500; */
    font-size: 16px;
}
.nav-link-org
{
    color: rgba(32, 118, 195, .8) !important;
}
.nav-link-org:hover
{
    color: rgba(32, 118, 195, 1) !important;
}
.container
{
    border-width: 0;
}

.w-10
{
    width: 10%;
}
.w-16 {
  width: 16%;
}
.w-21 {
  width: 21%;
}
.px-10
{
    padding-right: 10rem;
    padding-left: 10rem;
}
.w-125
{
    width: 125%;
}
.border-3
{
    border-width: 3px !important;
    border-color: #5b5b5b;
}
.border-solid {
  border: solid !important;
}

.container-full-width
{
    width: 100%;
}

.container-panel
{
    color: #fff;
}

/* Class for the text that greets the user on the website on the front page. */
/* Alters display-4 max size from 3.5rem to 2.9rem. */
.main-display-text-sm
{
    font-size: 2.1rem;
}

.main-display-text-all
{
    font-size: 2.9rem;
}

/* Class for what is gerrymandering section styling. */
.what-is-gerrymandering
{
    color: white;
    background: -webkit-linear-gradient(-45deg, #2a94f4, #00c6a7);
}

.tooltip-inner
{
    background-color: gray !important;
}
.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^='top'] .arrow::before
{
    border-top-color: gray !important;
}
.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^='right'] .arrow::before
{
    border-right-color: gray !important;
}
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^='bottom'] .arrow::before
{
    border-bottom-color: gray !important;
}
.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^='left'] .arrow::before
{
    border-left-color: gray !important;
}

/* MOBILE ONLY */
@media only screen and (max-width: 767.98px) {
  .what-is-gerrymandering p {
    font-size: 16px;
  }
  body #usa-map {
    min-height: 300px;
  }
  #stateSelectionDropdown {
    font-size: 1rem !important;
  }
  /* draw buttons on entry page */
  .draw-group {
    width: 70%;
    margin-top: 4rem;
  }
  .sidenav {
    height: 100%;
  }
  .mobile-padding-x {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }
  .mobile-padding-top {
    padding-top: 3.5rem;
  }
  .font-large-mobile {
    font-size: 1.5rem;
  }
  .font-medium-mobile {
    font-size: 1rem;
  }
  .font-small-mobile {
    font-size: 0.75rem;
  }
  .font-xs-mobile {
    font-size: 0.5rem;
  }
  .w-35-mobile {
    width: 35% !important;
  }
  .carousel-item {
    height: 64vh !important;
  }
}
/* TABLETS + MOBILE */
@media only screen and (max-width: 992px)
{
    .px-10
    {
        padding: 10px;
    }
    #map-units-btn
    {
        bottom: -6000% !important;
    }

    #map-pop-btn
    {
        right: 2% !important;
        bottom: -6000% !important;
    }
}

#home-bg:before {
  content: "";
  background: url("/static/img/home-bg.2e78f4462df8.svg");
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: -25px;
  left: 0px;
  width: 100vw;
  height: 130vh;
  z-index: -1;
}

#home-mapping-am {
  font-size: 4rem;
  letter-spacing: -.2rem;
}

#state-info-bg {
  background: url("/static/img/state-info-bg.4f2f1d9ac286.svg");
  background-repeat: no-repeat;
  background-size: contain;
}
#state-info-gradient {
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(232,245,255,1) 50%);
}
#state-info-bg2 {
  background: #E8F5FF;
}

.line-space-less {
  line-height: 97%;
}
#thanks-confetti
{
    position: absolute;
    top: -15%;
    left: 0;

    width: 100%;
    height: 30%;
}
.quote-footer {
  color: white;
}

footer
{
    margin-top: auto;
}

/* Class to make columns equal in height using flex. */
.row-equal-cols
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    flex-wrap: wrap;
}
.row-equal-cols > [class*='col-']
{
    display: flex;
    flex-direction: column;
}

/* Clear floats after the columns */

.row-content
{
    padding: 15px;
}

.row-about
{
    padding: 15px 15px 5px 15px;

    text-align: center;
}

.p-about
{
    font-weight: 300;
}
.row-wide
{
    color: #000;
    background-color: white;
}

.col-wide
{
    padding: 0;
}

.badge-primary
{
    border-color: #2a94f4;
    background-color: #2a94f4;
}

.number-circle
{
    padding: 18px 21px 18px 21px;

    color: white;
    border-radius: 50%;
    background: #70c5ea;
}
.number-circle-1
{
    padding: 18px 23px 18px 23px;
}
/* Help dropup */

#dropuphelp
{
    position: fixed;
    z-index: 1010;
    right: 40px;
    bottom: 40px;
}

/* Loading Icon entry page */

#loading-entry
{
    position: fixed;
    z-index: 1010;
    bottom: 150px;
    left: 40px;

    display: none;
}

.dropdown-menu a
{
    color: #333;
}

.dropdown-menu
{
    z-index: 1010;
}
/* Bootstrap Buttons. */

.btn-circle.btn-sm
{
    font-size: 8px;

    width: 30px;
    height: 30px;
    padding: 6px 0;

    text-align: center;

    border-radius: 15px;
}

.btn-circle.btn-md
{
    font-size: 1rem;

    width: 45px;
    height: 45px;

    text-align: center;

    border-radius: 25px;
}

.btn-circle.btn-xl
{
    font-size: 12px;

    width: 70px;
    height: 70px;
    padding: 10px 16px;

    text-align: center;

    border-radius: 35px;
}

#video_popup
{
    position: fixed;
    z-index: 1000;
    right: 24px;
    bottom: 90px;
}

/* This changes the color of the buttons so that it matches the Representable
color scheme. See readme.md*/

.btn
{
    border-radius: 3rem;
}

.btn-no-focus-outline:focus,
.btn-no-focus-outline:active
{
    outline: none;
    box-shadow: none;
}

.text-primary
{
    color: #2a94f4 !important;
}

.text-secondary
{
    color: #00c6a7 !important;
}

.btn-lg
{
    padding: .5rem 2rem;
}

.btn-primary
{
    cursor: pointer;

    color: #fff !important;
    border-color: #2a94f4;
    background-color: #2a94f4;
}

.btn-primary:active
{
    cursor: pointer;

    border-color: #2176c2;
    background-color: #2176c2;
}

.btn-primary:hover
{
    cursor: pointer;

    border-color: #2176c2;
    background-color: #2176c2;
}
.btn-primary.dropdown-btn:hover
{
    background-color: #2a94f4;
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle
{
    background-color: #2176c2;
}

.btn-outline-primary,
.btn-outline-primary:visited,
.btn-outline-primary:link
{
    color: #2a94f4;
    border-width: 2px;
    border-color: #2a94f4;
    background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:active
{
    color: white;
    border-color: #2a94f4;
    background-color: #2a94f4;
}

.filter-btn
{
    background-color: white;
}

/* LETTER SPACING FOR CAPS BUTTONS */
.btn-ls-lg
{
    letter-spacing: 5px;
}
.btn-ls-md
{
    letter-spacing: 3px;
}

@media only screen and (max-width: 767px)
{
    .filter-btn
    {
        font-size: .8rem;
    }
}

.filter-sign
{
    font-size: small;
}

.card-title.filter-header:hover
{
    cursor: pointer;

    color: gray;
}

#filter-row
{
    min-height: 65px;
}

.filter-col
{
    min-height: 45px;
}

@media only screen and (max-width: 767px)
{
    #filter-row
    {
        min-height: fit-content;
    }

    .filter-col
    {
        min-height: fit-content;
    }
}

@media only screen and (min-width: 768px) {
  /* for the modal on submission page (thanks) */
  .modal-header .close {
    margin: -1rem;
  }
  #thanksModalDialog {
    width: 50%;
    max-width: 1000px;
  }
  #thanksModalLabel {
    margin: auto;
  }
  .gap-90 {
    width: 100%;
    height: 90px;
  }

  .row-content-2 {
    background-color: #fff;
    /* color: #000; */
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
  }
  .container {
    max-width: 1300px;
  }
  #home-mapping-am {
    letter-spacing: -.65rem;
    font-size: 7.5rem;
    margin-top: -2rem;
    margin-bottom: -1.5rem;
  }
  .w-62 {
    width: 62%;
  }
}

.column
{
    float: left;

    width: 50%;
}

/******************************************

Entry Mapping Page

*******************************************/
#map-error-alerts
{
    position: absolute;
    z-index: 1011;
    top: 0;
}
.mapping-icon
{
    box-shadow: 2px 2px rgba(0,0,0,.2);
}

/* Hero block and particles.js animation */
#map-card
{
    position: relative;

    height: 100vh;

    top: -15px;
}

.map-box
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Entry Page: Geocoder Full Width */
.mapboxgl-ctrl-geocoder
{
    width: 60%;
    max-width: none;

    border-radius: 1.5rem;
}

.mapboxgl-ctrl-top-right .mapboxgl-ctrl
{
    margin: 1rem 1rem 0 0;
}

.mapboxgl-ctrl-group
{
    background: rgba(247, 247, 247, 1);
}

.mapboxgl-ctrl-geocoder .geocoder-icon-search
{
    top: 15px;
}

.mapboxgl-ctrl-geocoder input[type='text']
{
    font-size: 1rem;

    height: 50px;
}

#map-radius-control-id
{
    border: 0;
}

.nohover:hover
{
    background-color: rgba(0, 0, 0, 0) !important;
}

#modal-geocoder .mapboxgl-ctrl-geocoder
{
    display: inline-block;

    width: 80%;
}
#modal-geocoder ul
{
    text-align: left;
}

.green-modal .modal-content
{
    border: none;
    border-radius: 20px;
    background-color: rgba(216, 241, 237, .9);

    backdrop-filter: blur(4px); /* Note: backdrop-filter has minimal browser support */
}

.blue-modal .modal-content
{
    border: none;
    border-radius: 20px;
    background-color: rgba(218, 239, 255, .85);
    z-index: -2;

    backdrop-filter: blur(4px); /* Note: backdrop-filter has minimal browser support */
}

#map-comm-info
{
    margin: auto;

    vertical-align: middle;
}

#map-comm-menu
{
    top: 10px !important;

    width: max-content;
}

#map-top-row
{
    position: absolute;
    z-index: 1;
    top: -.5rem;
    left: 0;

    width: 100%;
}

#map-bottom-row
{
    position: absolute;
    bottom: 20%;
    left: 0;

    width: 100%;
}

#mapToPrivacy
{
    position: absolute;
    z-index: 1;
    right: 30%;
    bottom: 20%;

    max-width: 18%;

    white-space: normal;
}

#mapToSurveyP2
{
    position: absolute;
    z-index: 1;
    bottom: 20%;
    left: 30%;

    max-width: 22%;

    white-space: normal;
}

#mapToPrivacyMobile
{
    position: absolute;
    z-index: 1;
    right: 15%;
    bottom: 20%;

    max-width: 35%;

    white-space: normal;
}

#mapToSurveyP2Mobile
{
    position: absolute;
    z-index: 1;
    bottom: 20%;
    left: 15%;

    max-width: 35%;

    white-space: normal;
}

#mobile-map-help-btn:not(.opened),
#map-help-btn:not(.opened)
{
    background-color: #fff;
}

.mapping-btn:hover,
.mapping-btn.opened
{
    cursor: pointer !important;

    color: #fff !important;
    border-color: #2176c2 !important;
    background-color: #2176c2 !important;
}

.comm-info-text
{
    font-size: 1.5rem;
    font-weight: bold;

    color: #2a94f4;
}

.comm-item-text
{
    font-size: 1rem;
    font-weight: bold;

    white-space: normal;

    color: #2a94f4;
}

.map-survey-response
{
    font-weight: normal;

    overflow: scroll;

    max-height: 290px;

    color: #5b5b5b;
}

.map-survey-response:hover
{
    cursor: text;

    color: #5b5b5b;
}

@media only screen and (max-width: 568px)
{
    .comm-info-text
    {
        font-size: 1rem;
        font-weight: bold;

        overflow: hidden;

        color: #2a94f4;
    }

    .comm-item-text
    {
        font-size: .8rem;
        font-weight: bold;

        color: #2a94f4;
    }

    .map-survey-response
    {
        font-size: .7rem;

        max-height: 100px;
    }
}

.map-info-item
{
    width: auto;
    height: 93%;

    white-space: unset;

    opacity: .9;
    background-color: #daefff;
}

.map-info-item:hover
{
    font-weight: bold;

    cursor: default;

    color: #2a94f4;
    background-color: #daefff;
}

#map-comm-btn
{
    position: relative;
    z-index: 1000;

    max-width: 100%;
    /* transition: 2s; */

    transform-origin: left center;
    white-space: normal;
}

#map-units-btn
{
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 5%;
}

#map-page-search-btn
{
    position: absolute;
    z-index: 1;
    right: 2%;
    bottom: 4%;

    background-color: rgb(239, 239, 239);
}

#map-page-search-btn.active
{
    background-color: #6c757d !important;
}

#map-pop-btn
{
    position: absolute;
    z-index: 1;
    right: 5%;
    bottom: 0;

    border: black;
}

.map-visualization
{
    width: 100%;
    height: 100%;
}

.draw_polygon_map
{
    top: 0;
    bottom: 0;

    height: 100%;
    /*  Required by Mapbox: Must Set Absolute Height in px */
    min-height: 500px;
}

.col-map
{
    height: 50vh;
}

@media screen and (min-width: 768px)
{
    .col-map
    {
        width: 100%;
        height: 88vh;

        border: 1px solid rgba(0, 0, 0, .2);
        border-width: 0 0 0 1px;
        box-shadow: 5px 0 5px -5px rgba(0, 0, 0, .1);
        /*box-shadow: -2px 0 2px 1px rgba(0,0,0,0.1);*/
    }

    .row-content
    {
        padding: 40px 40px 25px 40px;
    }

    .modal-xl
    {
        max-width: 80%;
    }
}

@media (min-width: 576px)
{
    .card-columns
    {
        column-count: 2;
    }
}

/* colors: https://coolors.co/f8bdc4-f497da-f679e5-b8d0eb-f65be3 */
/* Fixed sidenav, full height */
/* https://www.w3schools.com/howto/howto_js_dropdown_sidenav.asp */
.sidenav
{
    z-index: 1;

    overflow-x: hidden;
    overflow-y: auto;

    width: 100%;
    height: calc(100vh - 86px);
}

/* override what the popup looks like on small devices */
@media (max-width: 600px)
{
    #video_popup
    {
        z-index: 1000 !important;
        right: 10px;
        bottom: 90px;

        width: 300px;
    }

    #video_popup_body
    {
        padding-right: .05rem;
        padding-left: .05rem;
    }
    .w-10
    {
        width: 30%;
    }
}

/* Style the sidenav links and the dropdown button */

.dropdown-btn
{
    width: 100%;
    padding: 6px 8px 6px 16px;

    cursor: pointer;
    text-align: left;
    text-decoration: none;

    border: none;
    outline: none;
    background: none;
}

.comm-content .more-content
{
    display: none;
}

.comm-content.show .more-content
{
    display: inline;
}

.table-col-large
{
    width: 70%;
}
.table-col-small
{
    width: 30%;
}
.table
{
    margin-bottom: 0;

    word-break: break-word;
}
.hidden
{
    display: none;
}
.small-link
{
    cursor: pointer;
}
.link-custom
{
    cursor: pointer;
    text-decoration: underline;

    color: #5b5b5b;
}
.link-custom:hover
{
    color: black;
}

.community-review-span:hover
{
    cursor: pointer;

    background-color: #dee2e6;
}

.communities-menu
{
    overflow: scroll;

    max-height: 500px;
}

@media screen and (min-width: 768px)
{
    .communities-menu
    {
        overflow: scroll;

        max-height: 800px;
    }
}

/* landing page map */
#usa-map {
  width: 100%;
  height: 100%;
  min-height: 580px;
  margin: auto;
  cursor: pointer;
}
.state-select {
  font-size: 1.2rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000000'><polygon points='0,0 100,0 50,50'/></svg>")
    no-repeat !important;
    background-color: #efefef;
    background-repeat: no-repeat;
    background-position: calc(100% - 20px) center;
    background-size: 12px; */
}
.state-select-resources {
  padding: 5px;
  background: none;
  width: 18rem;
  font-size: 1.8rem;
  border-width: 0 0 3px 0;
  /* -webkit-appearance: none; */
}
.ws-normal {
  white-space: normal;
}
.word-break
{
    word-break: break-word;
}

@media screen and (min-width: 1600px) {
  #mapping-image-div {
    width: 30% !important;
  }
  .w-xxl-50.w-100 {
    width: 50% !important;
  }
}

.loader
{
    margin: auto;

    animation: spin 2s linear infinite;

    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #2a94f4; /* Blue */
    border-radius: 50%;
}
.loader-small
{
    width: 40px;
    height: 40px;
}
.loader-large
{
    width: 60px;
    height: 60px;
}
.viz-dropdown
{
    border-radius: 0;
}

@keyframes spin
{
    0%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(360deg);
    }
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container
{
    display: none;

    padding-left: 8px;

    color: #95a3b3;
    background-color: rgb(240, 240, 240);
}

.entry-name
{
    color: #00c6a7;
}

/* styling tags portion of form field */
.bootstrap-tagsinput .tag
{
    display: inline-block;

    margin-top: .25rem;
    margin-bottom: .5rem;
    padding: .375rem .75rem;

    color: black;
    border: solid #000;
    border-width: 2px;
    border-radius: 3rem;
    background: transparent;
}
.bootstrap-tagsinput
{
    height: calc(6.75rem + 2px);

    box-shadow: none;
}
.bootstrap-tagsinput input
{
    margin-top: .7rem;
    margin-left: .45rem;
    /* width: 15em; */
}
.bootstrap-tagsinput .tag [data-role='remove']:after
{
    vertical-align: 8%;

    color: gray;
}

.tag-top
{
    border-width: 2px;
}
.tag-select
{
    border-width: 2px;
}

.btn.tag-top:hover
{
    color: #fff;
    border-color: #7e8991;
    background-color: #7e8991;
}

.btn.tag-select:hover
{
    color: #fff;
    border-color: #7e8991;
    background-color: #7e8991;
}

#search-tags
{
    font-size: 2.5rem;

    border: none;
    outline: none;
    background: transparent;
}

.tt-dropdown-menu
{
    top: 125% !important;
    left: 5px !important;

    padding: .75rem .5rem 0 .5rem;

    border-width: 2px;
    border-style: solid;
    border-radius: 10%;
    background: #fff;
    min-width: 150px;
}

.tt-hint
{
    display: none;
}

/* Optional: Style the caret down icon */
.fa-caret-down
{
    float: right;

    padding-right: 8px;
}

.mapboxgl-popup
{
    max-width: 400px;
    /* font-family: Inter, system-ui, sans-serif; */
    /* font-size: 12px; */
}
input[type='range']::-webkit-slider-thumb
{
    width: 15px;
    height: 15px;

    border-radius: 50%;
}

/* css for the line on the progress bar */
.bar-step
{
    font-size: 12px;

    position: absolute;
    /* margin-top:-20px; */
    z-index: 1;
    left: 33%;
}

.label-txt
{
    float: left;
}

.label-line
{
    float: right;

    width: 1px;
    height: 100%;
    margin-left: 5px;

    background: #000;
}

.label-percent
{
    float: right;

    margin-left: 5px;
}

.sidenav-box
{
    margin: 12px;

    background: #fff;
}

#menu
{
    box-shadow: 3px 0 5px -3px #bebebe;
}

#geocoder-container > div
{
    min-width: 50%;
    margin-left: 25%;
}
.string
{
    color: #314ccd;
}

.number
{
    color: #b43b71;
}

.boolean
{
    color: #5a3fc0;
}

.null
{
    color: #ba7334;
}

.key
{
    color: #ba3b3f;
}

.calculation-box
{
    bottom: 40px;
    left: 10px;

    width: 150px;
    height: 75px;
    padding: 15px;

    text-align: center;

    background-color: rgba(255, 255, 255, .9);
}

.vcenter
{
    display: inline-block;
    float: none;

    vertical-align: middle;
}

.draw-group > button
{
    width: 100%;
    height: 100%;
    padding: 5px 10px 5px 10px;
}

/*******************

Entry Form Management

********************/


/************************************* General Entry *******************************************/

.info-text
{
    color: #656565;
}

.header-text
{
    color: #5b5b5b;
}

.survey-field {
  background: #DAEFFF 65%;
  opacity: 0.65;
  border: none;
  outline: none;
}

.survey-field:focus {
  background: #DAEFFF 80%;
  border: none;
  outline: none;
}

.entry-step
{
    font-size: 1.5rem;

    width: auto;
    padding-bottom: 10px;

    color: rgba(101, 101, 101, .58);
}

.entry-header
{
    font-size: 1.75rem;

    padding-bottom: 5px;

    color: #5b5b5b;
}

.rounded-1rem {
  border-radius: 1rem;
}

#comm-example-title:before {
  content: "";
  background-color: #f8f9fa;
  position: absolute;
  height: 100%;
  width: 200px;
  left: -10%;
  bottom: 0%;
  z-index: -1;
}

#comm-example-face {
  border: 1rem solid #f8f9fa;
}

/************************************* First Page *******************************************/

#entryForm
{
    width: 100%;
}

#entry-addr-form
{
    display: inline-block;

    text-align: left;
}

#entry-coi-def
{
    font-size: .8rem;

    padding: 5px 0;
}

#survey-start-infographic
{
    padding: 30px;

    background-color: #daefff;
}

#mobile-survey-start-infographic
{
    padding: 30px;

    background-color: #daefff;
}

.survey-start-sm-txt
{
    font-size: 1rem;

    color: #3f3f3f;
}



/************************************* Survey Section *******************************************/

input.survey-field
{
    padding: 10px 20px;

    color: #000;
}

textarea.survey-field
{
    padding: 10px 20px;

    color: #000;
}

textarea.survey-field:focus
{
    opacity: 1;
    color: #000;
}

input.survey-field:focus
{
    opacity: 1;
    color: #000;
}

.survey-angle-down
{
    padding-left: 10px;
}

.survey-questions-list
{
    list-style-type: none;
}
.survey-questions-list li:before
{
    position: absolute;

    margin-left: -20px;

    content: '\2014';
}

.survey-sect-title
{
    padding-top: 15px;

    color: #5996d2;
}

.survey-sect-title-link:hover
{
    text-decoration: none;
}

.survey-sect-title-link:focus
{
    text-decoration: none;
}

.survey-instruction
{
    padding: 10px 20px 0 20px;
}

.addr-field
{
    display: inline-block;

    margin-bottom: 5px;

    border: none;
    border-radius: 2rem;
    background-color: #cce9ff;
}

.g-recaptcha
{
    display: inline-block;

    max-width: 80%;
    padding: 40px 0 10px 0;
}

/************************************* Entry Screen Specific *******************************************/

@media only screen and (min-width: 1025px)
{
    #survey-qs-p2
    {
        width: 85%;
    }
    .map-survey-response
    {
        max-height: 80%;
    }
}

@media only screen and (max-width: 768px)
{
    #survey-comm-name-header
    {
        display: inline-block;

        width: 70%;
    }

    #survey-comm-name-pic
    {
        display: inline-block;

        width: 30%;
    }

  #comm-example-face {
    border: .5rem solid #f8f9fa !important;
  }

  #comm-example-title::before {
    left: -20% !important;
  }

}

.button-edit
{
    display: none;
}

.card-section-button
{
    display: block;
}

.button-next-geocoder
{
    pointer-events: none;
}

.heading-title h3
{
    font-weight: normal;

    margin-bottom: 0;

    letter-spacing: 2px;
}
.p-top-30
{
    padding-top: 30px;
}
.text-uppercase
{
    text-transform: uppercase;
}

.line-break
{
    width: 15%;

    border-bottom: 3px solid black;
}

.dark-gray-text
{
    color: #3f3f3f;
}

.text-5996D2
{
    color: #5996d2;
}

.gray-text
{
    color: #5b5b5b;
}

.light-blue-text
{
    color: #65bff1;
}
.dark-blue-text {
  color: #3691E0;
}
.blue-green-text
{
    color: #6dccbb;
}
.blue-text
{
    color: #5996d2;
}
.light-blue-bg {
  background: rgba(218, 239, 255, 0.6);
}
.light-green-bg
{
    background-color: #f2faff;
}
.blue-green-bg
{
    background-color: #6dccbb;
}
.green-bg
{
    background-color: rgba(214, 242, 242, .82);
}
.white-bg
{
    background-color: #fff;
}
.content-blue-bg {
  background-color: rgba(242, 250, 255, 0.4);
}
.state-maps-bg {
  background: url("/static/img/home-preview-bg.fd56927e8c90.svg");
  background-size: cover;
}
.btn-outline-gray {
  background-color: transparent;
  border-color: #5B5B5B;
  border-width: 2px;
  color: #5B5B5B;
}
.btn-outline-gray:hover
{
    color: white !important;
    background: #5b5b5b;
}

.how-it-works
{
    width: 70%;
    height: 200px;
}
.how-it-works-title
{
    height: 3rem;
}

.language-button
{
    padding: 0;

    cursor: pointer;

    border: 0 none;
    background: #fff;
}
.language-button:hover
{
    text-decoration: underline;
}

#all
{
    font-size: 12px;

    text-align: center;
    text-decoration: underline;
}

.fa-draw-polygon
{
    color: #28a745;
}

.fa-trash-alt
{
    color: #dc3545;
}

.fa-th-large
{
    color: #455bcb;
}

.fa-exclamation-triangle
{
    color: #dc3545;
}

/* code for the toggle button: https://codepen.io/thelaazyguy/pen/MvqpPr/ */
.switch_box
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    height: 10%;
    padding-left: 12px;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
        flex: 1;
}

input[type='checkbox'].switch_1
{
    font-size: 16px;

    position: relative;

    max-width: 3em;
    height: 1.5em;

    cursor: pointer;
    -webkit-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;

    border-radius: 3em;
    outline: none;
    background: #ddd;

    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    flex: .29;
}

input[type='checkbox'].switch_1:checked
{
    background: #2a94f4;
}

input[type='checkbox'].switch_1:after
{
    position: absolute;
    left: 0;

    width: 1.5em;
    height: 1.5em;

    content: '';
    -webkit-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
    -webkit-transform: scale(.7);
            transform: scale(.7);

    border-radius: 50%;
    background: #fff;
    -webkit-box-shadow: 0 0 .25em rgba(0, 0, 0, .3);
            box-shadow: 0 0 .25em rgba(0, 0, 0, .3);
}

input[type='checkbox'].switch_1:checked:after
{
    left: calc(100% - 1.5em);
}

label
{
    margin-bottom: 0rem;
    padding: 6px 8px 6px 16px;

    color: black;

    flex: 1;
}

/* LOGIN */
/******************************************
Signup and Login Page
******************************************/
#acc_already
{
    height: 50px;

    color: rgba(101, 101, 101, .81);
}

.auth-form {
  display: inline-block;
  width: 70%;
}

.auth-form .btn
{
    font-size: 80%;
    font-weight: bold;

    padding: 1rem;

    transition: all .2s;
    /* border-radius: 5rem; */
    letter-spacing: .1rem;
}

.auth-btn-wrap
{
    padding-top: 20px;

    text-align: center;
}

.auth-btn
{
    width: 50%;
}

.auth-form-label {
  text-align: left;
  color: rgba(101, 101, 101, 0.61);
}

.auth-title
{
    color: #5b5b5b;
}

.auth-wrap
{
    margin: 25px 0;

    text-align: center;
}

.auth-field
{
    display: inline-block;

    width: 100%;
    height: 60px !important; /* necessary use of !important */

    border: none;
    border-radius: 2rem;
    background-color: #cce9ff;
}

.auth-divider-wrap
{
    position: relative;
}

.auth-divider
{
    position: absolute;
    top: 30%;
    left: 50%;

    width: 0;
    height: 259.01px;

    transform: rotate(.43deg);

    border-left: 5px solid rgba(0, 0, 0, .07);
}

#auth-divider-home
{
    position: absolute;
    top: 100%;
    left: 90%;

    width: 0;
    height: 48px;

    border-left: 5px solid rgba(0, 0, 0, .17);
}

.auth-link
{
    text-decoration: underline;

    color: rgba(101, 101, 101, .81);
}

.auth-link:hover
{
    color: rgba(101, 101, 101, 1);
}
.login-field
{
    background-color: #d6f6f1;
}

.login-field:focus
{
    outline-color: #d6f6f1 !important;
}

#login-button
{
    border-color: #7adbcb;
    background-color: #7adbcb;
}

.to-auth-link
{
    display: none;
}

.redirect-banner
{
    padding: 0 30%;

    text-align: center;
}

@media only screen and (min-width: 769px)
{
    #signup-form
    {
        padding-top: 1rem;
    }
}

@media only screen and (max-width: 768px)
{
    .auth-divider-wrap
    {
        padding: 2.5rem 0rem;

        text-align: center;
    }
    .auth-divider
    {
        position: initial;

        display: inline-block;

        width: 50%;
        height: 0;

        transform: rotate(.43deg);

        border-bottom: 5px solid rgba(0, 0, 0, .07);
    }

    .auth-wrapper
    {
        text-align: center;
    }

    .field-wrap
    {
        text-align: center;
    }

    .to-auth-link
    {
        display: inline-block;

        padding-top: 30px;
    }

    .redirect-banner
    {
        padding: 0 15%;
    }
}

.privacy-note
{
    color: rgba(101, 101, 101, .81);
}

:root
{
    --input-padding-x: 1.5rem;
    --input-padding-y: .75rem;
}

.card-signin
{
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 .3rem .6rem 0 rgba(0, 0, 0, .1);
}

.card-signin .card-title
{
    font-size: 1.5rem;
    font-weight: 300;

    margin-bottom: 2rem;
}

.card-signin .card-body
{
    padding: 2rem;
}

#id_require_user_addresses
{
    width: 45px;
}

.form-label-group
{
    position: relative;

    margin-bottom: 1rem;
}

.form-group input
{
    height: auto;
    /* border-radius: 2rem; */
}

.form-label-group input,
.form-label-group label
{
    padding: var(--input-padding-y) var(--input-padding-x);
}

.form-label-group label
{
    line-height: 1.5;

    position: absolute;
    top: 0;
    left: 0;

    display: block;

    width: 100%;
    margin-bottom: 0;

    transition: all .1s ease-in-out;

    color: #495057;
    border: 1px solid transparent;
    border-radius: .25rem;
}

.form-label-group input::-webkit-input-placeholder
{
    color: transparent;
}

.form-label-group input:-ms-input-placeholder
{
    color: transparent;
}

.form-label-group input::-ms-input-placeholder
{
    color: transparent;
}

.form-label-group input::-moz-placeholder
{
    color: transparent;
}

.form-label-group input::placeholder
{
    color: transparent;
}

.form-label-group input:not(:placeholder-shown)
{
    padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
    padding-bottom: calc(var(--input-padding-y) / 3);
}

.form-label-group input:not(:placeholder-shown) ~ label
{
    font-size: 12px;

    padding-top: calc(var(--input-padding-y) / 3);
    padding-bottom: calc(var(--input-padding-y) / 3);

    color: #777;
}

.btn-google
{
    color: white;
    background-color: #ea4335;
}

.btn-facebook
{
    color: white;
    background-color: #3b5998;
}

#report
{
    cursor: pointer;
}

.alert-custom
{
    color: #5b5b5b;
    background: #def8f4;
}

/** Height and Width Adjustments **/

.vw-100
{
    width: 100vw!important;
}
.vw-75
{
    width: 75vw!important;
}
.vw-50
{
    width: 50vw!important;
}
.vw-25
{
    width: 25vw!important;
}
.vh-100
{
    height: 100vh!important;
}
.vh-75
{
    height: 75vh!important;
}
.vh-50
{
    height: 50vh!important;
}
.vh-25
{
    height: 25vh!important;
}
.state-info-img {
  width: 100%;
  height: 150px;
}
.state-info-txt {
  margin-right: -20px;
  font-size: 90%;
}
.carousel-item {
  height: 50vh;
}

.carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #EEF7FF;
  opacity: 1;
}

.carousel-indicators li.active {
  background-color: #9FD4FF;
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px)
{
    .w-sm-100
    {
        width: 100%!important;
    }
    .w-sm-75
    {
        width: 75%!important;
    }
    .w-sm-50
    {
        width: 50%!important;
    }
    .w-sm-25
    {
        width: 25%!important;
    }
    .h-sm-100
    {
        height: 100%!important;
    }
    .h-sm-75
    {
        height: 75%!important;
    }
    .h-sm-50
    {
        height: 50%!important;
    }
    .h-sm-25
    {
        height: 25%!important;
    }

    .vw-sm-100
    {
        width: 100vw!important;
    }
    .vw-sm-75
    {
        width: 75vw!important;
    }
    .vw-sm-50
    {
        width: 50vw!important;
    }
    .vw-sm-25
    {
        width: 25vw!important;
    }
    .vh-sm-100
    {
        height: 100vh!important;
    }
    .vh-sm-75
    {
        height: 75vh!important;
    }
    .vh-sm-50
    {
        height: 50vh!important;
    }
    .vh-sm-25
    {
        height: 25vh!important;
    }
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px)
{
    .w-md-100
    {
        width: 100%!important;
    }
    .w-md-75
    {
        width: 75%!important;
    }
    .w-md-50
    {
        width: 50%!important;
    }
    .w-md-25
    {
        width: 25%!important;
    }
    .h-md-100
    {
        height: 100%!important;
    }
    .h-md-75
    {
        height: 75%!important;
    }
    .h-md-50
    {
        height: 50%!important;
    }
    .h-md-25
    {
        height: 25%!important;
    }

    .vw-md-100
    {
        width: 100vw!important;
    }
    .vw-md-75
    {
        width: 75vw!important;
    }
    .vw-md-50
    {
        width: 50vw!important;
    }
    .vw-md-25
    {
        width: 25vw!important;
    }
    .vh-md-100
    {
        height: 100vh!important;
    }
    .vh-md-75
    {
        height: 75vh!important;
    }
    .vh-md-50
    {
        height: 50vh!important;
    }
    .vh-md-25
    {
        height: 25vh!important;
    }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px)
{
    .w-lg-100
    {
        width: 100%!important;
    }
    .w-lg-75
    {
        width: 75%!important;
    }
    .w-lg-50
    {
        width: 50%!important;
    }
    .w-lg-25
    {
        width: 25%!important;
    }
    .h-lg-100
    {
        height: 100%!important;
    }
    .h-lg-75
    {
        height: 75%!important;
    }
    .h-lg-50
    {
        height: 50%!important;
    }
    .h-lg-25
    {
        height: 25%!important;
    }

    .vw-lg-100
    {
        width: 100vw!important;
    }
    .vw-lg-75
    {
        width: 75vw!important;
    }
    .vw-lg-50
    {
        width: 50vw!important;
    }
    .vw-lg-25
    {
        width: 25vw!important;
    }
    .vh-lg-100
    {
        height: 100vh!important;
    }
    .vh-lg-75
    {
        height: 75vh!important;
    }
    .vh-lg-50
    {
        height: 50vh!important;
    }
    .vh-lg-25
    {
        height: 25vh!important;
    }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px)
{
    .w-xl-100
    {
        width: 100%!important;
    }
    .w-xl-75
    {
        width: 75%!important;
    }
    .w-xl-50
    {
        width: 50%!important;
    }
    .w-xl-25
    {
        width: 25%!important;
    }
    .h-xl-100
    {
        height: 100%!important;
    }
    .h-xl-75
    {
        height: 75%!important;
    }
    .h-xl-50
    {
        height: 50%!important;
    }
    .h-xl-25
    {
        height: 25%!important;
    }

    .vw-xl-100
    {
        width: 100vw!important;
    }
    .vw-xl-75
    {
        width: 75vw!important;
    }
    .vw-xl-50
    {
        width: 50vw!important;
    }
    .vw-xl-25
    {
        width: 25vw!important;
    }
    .vh-xl-100
    {
        height: 100vh!important;
    }
    .vh-xl-75
    {
        height: 75vh!important;
    }
    .vh-xl-50
    {
        height: 50vh!important;
    }
    .vh-xl-25
    {
        height: 25vh!important;
    }
}

/* Fallback for Edge
-------------------------------------------------- */

@supports (-ms-ime-align: auto)
{
    .form-group label
    {
        display: none;
    }
    .form-group input::-ms-input-placeholder
    {
        color: #777;
    }
}

/* Fallback for IE
-------------------------------------------------- */

/* Communities */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
{
    .form-group > label
    {
        display: none;
    }
    .form-group input:-ms-input-placeholder
    {
        color: #777;
    }
}

.items li
{
    padding: 20px 20px;

    counter-increment: step-counter;
}

.items li::before
{
    margin-right: 5px;
    padding: 1px 5px;

    content: counter(step-counter);

    color: white;
    border-radius: 3px;
    background-color: #00c6a7;
}

#rtb a h2
{
    padding-top: 20px;
}

.custom-select
{
    color: #2a94f4;
    border-color: #2a94f4;
}

/* Flips element vertically, in place*/
.flipY-inplace
{
    -webkit-transform: scale(1, -1);
       -moz-transform: scale(1, -1);
         -o-transform: scale(1, -1);
            transform: scale(1, -1);
}

.btn.no-underline-link.bg-transparent
{
    border-radius: 0;
}

/* Makes buttons on submission page equal widths */
#election-btn,
#mobile-election-btn,
#data-layer-btn,
#mobile-data-layer-btn,
#demographics-btn,
#mobile-demographics-btn
{
    width: 215px;
}

#optional-fields-toggle
{
    padding-top: 20px;
}

/* The switch - the box around the slider */
.switch
{
    position: relative;

    display: inline-block;

    width: 40px;
    height: 24px;
}

/* Hide default HTML checkbox */
.switch input
{
    width: 0;
    height: 0;

    opacity: 0;
}

/* The slider */
.slider
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    cursor: pointer;
    -webkit-transition: .4s;
            transition: .4s;

    background-color: #ccc;
}

.slider:before
{
    position: absolute;
    bottom: 3px;
    left: 3px;

    width: 18px;
    height: 18px;

    content: '';
    -webkit-transition: .4s;
            transition: .4s;

    background-color: white;
}

input:checked + .slider
{
    background-color: #2196f3;
}

input:focus + .slider
{
    box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before
{
    -webkit-transform: translateX(16px);
        -ms-transform: translateX(16px);
            transform: translateX(16px);
}

/* Rounded sliders */
.slider.round
{
    border-radius: 24px;
}

.slider.round:before
{
    border-radius: 50%;
}

#optional-fields
{
    display: none;
}

.required
{
    margin: 0;
    padding: 0;

    color: red;
}

.label-class {
  padding: 0px;
}

.fieldWrapper {
  margin-bottom: 10px;
}

.errorlist
{
    color: red;
}

.image-upload > input
{
    display: none;
}

#upload-stuff
{
    display: none;
}

#my-dist-file {
  display: none;
}

#uploadLabel {
  padding-bottom: 20px;
}