/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 0.9em;
    line-height: 1.5;
    background-color: #fff;
    /*font-family: 'Raleway', sans-serif;*/
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}


body {
    background-image: url('../img/moneyback.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    overflow-x: hidden;
    /*background-position: bottom right;*/
}

html, body {
    width: 100%;
    height: 100%;
}
/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
.tbcont {
    filter: drop-shadow(rgba(0, 0, 0, 0.5) 18px 0px 8px);
}

#topbar {
    width: 100%;
    height: 60px;
    background: linear-gradient(38deg, rgb(36, 100, 118) 0%, rgb(44, 99, 138) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0px 10px;
    font-weight: 600;
    justify-content: space-between;
    position: fixed;
    /*box-shadow: 0px 5px 12px rgb(0 0 0 / 28%);*/
    z-index: 1000;
}

.logotitlecontainer {
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .logotitlecontainer h2 {
        margin: 0px 0px 0px 20px;
    }

#leftbar {
    width: 200px;
    height: 100%;
    top: 60px;
    background-color: #004142;
    /*background: linear-gradient(38deg, rgba(15,16,33,1) 0%, rgba(0,114,179,0.8127626050420168) 100%);*/
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0px 10px;
    font-weight: 600;
    justify-content: space-between;
    position: fixed;
    box-shadow: 0px 5px 12px rgba(0,0,0,0.28);
    z-index: 1000;
}

.widgetpanel {
    width: 100%;
    height: 60px;
    z-index: 4000;
    position: absolute;
    left: 0px;
    /*top: 60px;*/
    color: rgb(255, 255, 255);
    overflow: hidden;
}

.widgettopbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    right: 0px;
    width: 80%;
    clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 20px 100%);
    height: 30px;
    box-shadow: rgba(0, 0, 0, 0.28) 0px 5px 12px;
    background: rgb(237, 241, 193);
    padding: 6px 6px 6px 10px;
    overflow: hidden;
}

.widgettopbars {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    right: 0px;
    width: 93%;
    clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 20px 100%);
    height: 30px;
    box-shadow: rgba(0, 0, 0, 0.28) 0px 5px 12px;
    background: rgb(237, 241, 193);
    padding: 6px 6px 6px 10px;
    overflow: hidden;
}


#MapViewDiv .widgettopbar {
    width: 70%;
}

.widgettopbar label, .analysisfilters label {
    text-shadow: 0px 2px 2px rgba(0,0,0,0.5);
    /* margin-right: 5px; */
    background: rgba(0,0,0,0.29);
    padding: 2px 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background: #296481;
    font-size: 14px;
}

.widgettopbars label {
    text-shadow: 0px 2px 2px rgba(0,0,0,0.5);
    /* margin-right: 5px; */
    background: rgba(0,0,0,0.29);
    padding: 2px 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background: #296481;
    font-size: 14px;
}

.editfilters {
    margin: -20px;
}

#distDetails {
    margin: 20px 10px;
    border-radius: 4px;
}

#SelectName_Edit {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border: none;
    padding: 4px 0px;
}

#SelectDistrict_Edit {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border: none;
    padding: 4px 0px;
}

    #SelectDistrict_Edit label {
        margin: 0px 0px 0px 5px;
    }

#SelectCategory_Edit {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border: none;
    padding: 4px 0px;
}

#SelectYear_Edit {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border: none;
    padding: 4px 0px;
    margin: 0px 30px 0px 0px;
}

.widgettitle {
    text-transform: uppercase;
    font-weight: 600;
    text-shadow: 0px 2px 5px rgba(0,0,0,0.9);
    letter-spacing: 2px;
    margin-left: 30px;
}

.widgetclose {
    border: none;
    background-color: transparent;
    background-image: url('../img/cancel.svg');
    width: 18px;
    height: 18px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
    cursor: pointer;
    float: right;
    /*margin-left: 20px;*/
}

.widgetcontent {
    height: calc(100% - 60px);
    /*overflow-y: auto;
  overflow-x: hidden;*/
    overflow: hidden;
    position: absolute;
    bottom: 0px;
    /*padding: 0px 20px;*/
    width: 100%;
    box-sizing: border-box;
    display: flex;
}

.maplegendcontainer {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
}

.map {
    width: 100%;
    /*height: 65%;*/
    height: 400px;
}

.legend {
    height: 35%;
    overflow: auto;
}

.tilescontainer {
    width: 100%;
    overflow-y: auto;
    background: url('../img/sm.png');
    background-repeat: repeat;
    padding: 0px;
}

.row {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
}

.tile {
    background: #fff;
    margin: 30px 15px;
    padding: 20px 2px;
    width: 30%;
    min-height: 150px;
    border-radius: 5px;
}

    .tile h2 {
        text-align: center;
        margin: 4px;
        font-size: 16px;
    }

.x4 {
    width: 25%;
}

/*.roundicon {
  background-color: #fff;
  border-radius: 50%;
  width: 45%;
  height: 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 2px;
  transition: all 0.2s ease-in-out;
}*/

/*.tile .roundicon {
  background-color: #f7f6ee;
  border-radius: 10%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -50px auto 5px;
  transition: all 0.2s ease-in-out;
  padding: 5px;
}*/

.orangeborder {
    border: 4px solid #FF9800;
}

.purpleborder {
    border: 4px solid #9040ab;
}

.greenborder {
    border: 4px solid #31b92f;
}

.bignumber {
    text-align: center;
    font-size: 2.5em;
    font-weight: 900;
}

.orangeshadow {
    box-shadow: inset 0px 20px 0px #ff9800;
}

.purpleshadow {
    box-shadow: inset 0px 20px 0px #9040ab;
}

.greenshadow {
    box-shadow: inset 0px 20px 0px #31b92f;
}

.orangetext {
    color: #ff9800;
}

.purpletext {
    color: #9040ab;
}

.greentext {
    color: #31b92f;
}

.tile .smallicon {
    background-color: #f7f6ee;
    border-radius: 10%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px auto 5px;
    transition: all 0.2s ease-in-out;
    padding: 5px;
}

.multipleparam {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

    .multipleparam span {
        text-transform: uppercase;
        font-size: 12px;
        color: #6d6d6d;
        font-weight: 600;
    }

.multiplevalues {
    /*font-size: 1.5em;*/
    font-weight: 600;
}

/*.roundicon:hover {
  background-color: rgba(255,201,48,0.7);
  background-color: rgba(88,111,119,0.42);
}*/

.icon img {
    width: 30px;
    height: 30px;
}

.icon {
    width: 110px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}

    .icon span {
        font-weight: 500;
        font-size: 12px;
        margin-top: 5px;
    }

.iconlist {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

    .iconlist li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 60px;
        transition: all 0.3s ease-in-out;
        padding: 0px 4px;
    }

        .iconlist li:hover {
            background-color: #21ACB9;
            color: #fff;
            /*border-radius: 15px;*/
        }

#arrowDown {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 99;
    font-size: 22px;
    border: none;
    outline: none;
    background-color: #21acb9;
    color: white;
    cursor: pointer;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    pointer-events: auto;
    transition: all .3s ease-in-out;
}

    #arrowDown:after {
        content: '\25BC';
    }

    #arrowDown:hover {
        background-color: #7dad41;
        transform: scale(1.2);
    }

#myBtn {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 99;
    font-size: 22px;
    border: none;
    outline: none;
    background-color: #21acb9;
    color: white;
    cursor: pointer;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease-in-out;
}

    #myBtn:after {
        content: '\25B2';
    }

    #myBtn:hover {
        background-color: #7dad41;
        transform: scale(1.2);
    }

#bottomBtn {
    position: fixed;
    bottom: 10px;
    right: 50px;
    z-index: 99;
    font-size: 22px;
    border: none;
    outline: none;
    background-color: #ffcf26;
    color: black;
    cursor: pointer;
    /* padding: 4px; */
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}

    #bottomBtn:after {
        content: '\25B2';
    }

    #bottomBtn:hover {
        background-color: #c2ff2d;
        transform: scale(1.2);
    }

.subtabs {
    position: absolute;
    background: rgb(0,224,210);
    background: linear-gradient(349deg, rgb(0 224 183) 0%, rgb(6 72 111 / 99%) 100%);
    right: 48%;
    top: 6px;
    padding: 5px 100px 5px 20px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 21px 100%);
}

    .subtabs ul li {
        display: inline-block;
        margin: 0px 2px;
        text-shadow: 0px 2px 5px rgba(0,0,0,0.9);
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 2px;
        transition: all 0.2s ease-in-out;
        cursor: pointer;
        padding: 2px 10px;
    }

        .subtabs ul li:hover {
            border-radius: 30px;
            background: rgba(0,0,0,0.18);
        }

    .subtabs ul {
        margin: 0px;
        padding: 0px;
    }

.section {
    margin: 0px 10px 30px 10px;
    font-size: 12px;
    overflow-x: auto;
}

fieldset {
    border: 1px solid #ffdb4f;
    background: rgba(255,255,255,0.17);
    padding: 5px 20px;
    border-radius: 5px;
    box-shadow: 0px 7px 17px rgba(0,0,0,0.42);
    box-sizing: border-box;
    background: linear-gradient(270deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 100%);
}

legend {
    margin: 0px 20px;
    padding: 5px;
    color: #ffd933;
}

    legend h4 {
        margin: 0px;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: 2px;
    }

.fullwidthtable {
    width: 100%;
    /* margin: 30px auto; */
    border: 1px solid #eaeaea;
    border-collapse: collapse;
    color: #000;
    margin: auto;
    font-weight: 500;
    background: #fff;
    border: 1px solid black !important;
}


#ohDrilldownMonthlyTbl_MH td {
    min-width: 100px;
}

.fullwidthtable td, .fullwidthtable th {
    padding: 8px;
    text-align: left;
    width: 30%;
    border: 1px solid black !important;
}
/*border: 1px solid rgba(216,216,216,0.11);*/


.fullwidthtable td {
    border-bottom: 1px solid #eaeaea;
}


.fullwidthtable th {
    color: #fff;
    position: sticky;
    top: -1px;
    /*background: #7d7d7d;*/
    background: #296481;
    font-weight: 500;
    font-size: 14px;
}

    .fullwidthtable th:nth-child(1), .fullwidthtable td:nth-child(1) {
        height: 60px;
        width: 30px;
        text-align: right !important;
    }

    .fullwidthtable th:nth-child(3), .fullwidthtable td:nth-child(3), .fullwidthtable th:nth-child(4), .fullwidthtable td:nth-child(4) {
        width: 100px;
    }

    .fullwidthtable th:nth-child(2), .fullwidthtable td:nth-child(2), .fullwidthtable th:nth-child(5), .fullwidthtable td:nth-child(5) {
        width: 20%;
    }

    .fullwidthtable th:nth-child(6), .fullwidthtable td:nth-child(6) {
        width: 12%;
    }

    .fullwidthtable th:nth-child(7), .fullwidthtable td:nth-child(7) {
        width: 7%;
    }

    .fullwidthtable th:nth-child(8), .fullwidthtable td:nth-child(8) {
        width: 12%;
    }

    .fullwidthtable th:nth-child(9), .fullwidthtable td:nth-child(9) {
        width: 10%;
    }

    .fullwidthtable th:nth-child(10), .fullwidthtable td:nth-child(10) {
        width: 5%;
    }

    .fullwidthtable th:nth-child(11), .fullwidthtable td:nth-child(11) {
        width: 10%;
    }

    .fullwidthtable th:nth-child(9) {
        padding: -4px 10px 0px 10px;
    }
/*.highcharts-background{
            fill:transparent;
            border:1px solid #6d6d6d;
        }*/
/*.fullwidthtable tr:nth-child(odd) {
  background-color: rgba(21,24,31,0.44);
}*/
.headrow {
    font-weight: 500;
    text-shadow: 0px 1px 2px rgba(0,0,0,0.50);
    text-transform: capitalize;
    font-size: 12px;
    text-align: left !important;
}

.totalrow {
    background: linear-gradient(90deg, rgba(167,249,30,0.8407738095238095) 0%, rgba(0,145,58,1) 100%);
    font-weight: bold;
    text-shadow: 0px 1px 2px rgba(0,0,0,0.5);
    text-transform: capitalize;
    font-size: 12px;
    text-align: left !important;
}

.subheadrow {
    /*background: linear-gradient(129deg, rgba(89,39,6,0.8883928571428571) 0%, rgba(0,10,13,0.577468487394958) 100%);
background: linear-gradient(129deg, rgba(6,89,57,0.8883928571428571) 0%, rgba(0,10,13,0.577468487394958) 100%);*/
    background: linear-gradient(129deg, rgba(6,89,57,0.8883928571428571) 0%, rgba(0,10,13,0.3309698879551821) 100%);
    background: linear-gradient(129deg, rgba(0,3,2,0.8883928571428571) 0%, rgba(0,10,13,0.3309698879551821) 100%);
    font-weight: bold;
    text-shadow: 0px 1px 2px rgba(0,0,0,0.5);
    text-transform: capitalize;
    font-size: 12px;
    text-align: left !important;
}

.subheadcontainer {
    margin: 20px 0px 20px -20px;
    /*display: flex;
    justify-content: space-between;*/
    /*margin-left: -20px;*/
}

.subheading {
    /*background: linear-gradient(129deg, rgba(203,255,38,0.8883928571428571) 0%, rgba(11,162,208,0.835171568627451) 100%);*/
    background: linear-gradient(129deg, rgba(119,0,158,0.8855917366946778) 0%, rgba(11,208,196,0.6334908963585435) 100%);
    padding: 12px 80px 12px 15px;
    font-size: 12px;
    font-weight: 400;
    text-shadow: 0px 2px 5px rgba(0,0,0,0.9);
    text-transform: uppercase;
    margin: 10px 0px;
    letter-spacing: 1px;
    display: inline-block;
    clip-path: polygon(0% 0%, 100% 0%, 96% 100%, 0% 100%);
}

.ui-widget-content {
    border: 1px solid #dddddd !important;
    background: #ffffff url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x !important;
    font-size: 14px !important;
}

.ui-multiselect-checkboxes li span {
    margin-left: 5px !important;
}

#SelectDistrict_List {
    margin: 0px 5px 0px 0px;
}

.srchctrlcontainer {
    /*padding: 5px 20px 5px 5px;*/
    display: block;
    /*margin-left:-50px;*/
    /*background: linear-gradient(270deg, rgba(255,240,17,0.7063200280112045) 0%, rgba(177,77,0,0.7035189075630253) 49%, rgba(0,0,0,0) 100%);
background: linear-gradient(270deg, rgba(17,214,255,0.7063200280112045) 0%, rgba(0,131,177,0.7035189075630253) 49%, rgba(0,0,0,0.5074404761904762) 100%);
background: linear-gradient(270deg, rgba(17,214,255,0.7063200280112045) 0%, rgba(0,131,177,0.7035189075630253) 49%, rgba(0,9,37,0.9976365546218487) 100%);*/
    /*background: linear-gradient(270deg, rgba(17,214,255,1) 0%, rgba(0,131,177,1) 49%, rgba(0,9,37,0.9976365546218487) 100%);*/
    /*clip-path: polygon(0 0, 100% 0%, 98% 100%, 0% 100%);
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;*/
    /*border-radius: 5px;*/
}

.srchctrlcontainers {
    /*padding: 5px 20px 5px 5px;*/
    display: block;
    /*margin-left:-50px;*/
    /*background: linear-gradient(270deg, rgba(255,240,17,0.7063200280112045) 0%, rgba(177,77,0,0.7035189075630253) 49%, rgba(0,0,0,0) 100%);
background: linear-gradient(270deg, rgba(17,214,255,0.7063200280112045) 0%, rgba(0,131,177,0.7035189075630253) 49%, rgba(0,0,0,0.5074404761904762) 100%);
background: linear-gradient(270deg, rgba(17,214,255,0.7063200280112045) 0%, rgba(0,131,177,0.7035189075630253) 49%, rgba(0,9,37,0.9976365546218487) 100%);*/
    /*background: linear-gradient(270deg, rgba(17,214,255,1) 0%, rgba(0,131,177,1) 49%, rgba(0,9,37,0.9976365546218487) 100%);*/
    /*clip-path: polygon(0 0, 100% 0%, 98% 100%, 0% 100%);
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;*/
    /*border-radius: 5px;*/
}

.srchctrlcontainerinner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 5px;
    padding: 0px 10px;
}

.srchctrlcontainerinners {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 5px;
    padding: 0px 10px;
}

.distDetails {
    margin: 5px;
}


.searchbtn {
    height: 24px;
    background: rgba(0,0,0,0.67);
    /* background: transparent;*/
    border: none;
    border-radius: 4px;
    color: #fff;
    padding: 0px 10px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    margin: 0px 5px;
}

    .searchbtn:hover {
        background: #000;
    }

.submitbtn {
    height: 24px;
    background: rgba(0,0,0,0.67);
    border: none;
    border-radius: 4px;
    color: #fff;
    padding: 0px 10px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    margin: 0px 5px;
}

    .submitbtn:hover {
        background: #000;
    }

.inlinelbl {
    margin: 2px;
    display: block;
}

.exporticon {
    height: 20px;
    cursor: pointer;
    margin: 0px 0px 0px 10px;
    margin-right: 10px;
}

*:focus {
    outline: none;
}

.srchctrlcontainer select {
    width: 220px !important;
    padding: 2px 0px;
    font-size: 14px;
}

.srchctrlcontainers select {
    width: 220px !important;
    padding: 2px 0px;
    font-size: 14px;
}

/*SCROLL BAR*/

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background: #212b35;
}

::-webkit-scrollbar-button {
    display: none;
}

::-webkit-scrollbar-thumb {
    /*background: #445261;*/
    background: #21acb9;
    border-radius: 10px;
}

::-webkit-scrollbar-track {
}

::-webkit-scrollbar-track-piece {
}

::-webkit-scrollbar-corner {
}

::-webkit-resizer {
}

.activesubtab {
    background: rgb(255,255,255) !important;
    text-shadow: none !important;
    color: #000 !important;
    border-radius: 30px;
}


.activeitem {
    color: rgb(255, 255, 255);
    background: rgb(33, 172, 185);
}

.wthree {
    width: 33%;
}

.wfour {
    width: 25%;
}

.exportbtncontainer {
    /* margin-left: 76px;
   text-align: right; 
  margin-top: 30px;*/
    padding: -10px 10px;
    /*background: #0b659a;
  background: rgba(0,0,0,0.18);*/
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /*float: left;
  border: 1px solid rgba(234, 234,234,0.1);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;*/
}

.exportbtn {
    background: #21acb9;
    padding: 5px 10px;
    border: 1px solid #eaeaea;
    /* display: flex; */
    /* width: 100px; */
    margin: 5px;
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
}

.legend {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    overflow: auto;
    align-items: stretch;
}

.red, .green, .yellow {
    display: flex;
    align-items: center;
    margin: 0px 10px;
}

.redicon, .greenicon, .yellowicon {
    width: 15px;
    height: 15px;
    margin: 0px 2px;
}

.redicon {
    background-color: #c32c80;
}

.greenicon {
    background-color: #81de47;
}

.yellowicon {
    background-color: #ffc400;
}

.hlt {
    color: #3addff;
}
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    /* 1 */
}

    /*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

    .sr-only.focusable:active,
    .sr-only.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        white-space: inherit;
        width: auto;
    }

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
    content: " ";
    display: table;
}

.clearfix::after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *::before,
    *::after {
        background: #fff !important;
        color: #000 !important;
        /* Black prints faster */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

        a[href]::after {
            content: " (" attr(href) ")";
        }

    abbr[title]::after {
        content: " (" attr(title) ")";
    }

    /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
   * Printing Tables:
   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
   */
    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}



/*NEW*/
.loginbg {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/banner-slide-1.png');
    background-size: 85%;
    background-repeat: no-repeat;
    background-position: top -100px center;
}

.loginbox {
    background: #fff;
    position: absolute;
    top: 25%;
    height: 50%;
    width: 33%;
    text-align: center;
    box-shadow: 0px -65px 80px -10px rgba(109,109,109,0.41);
    padding: 10px;
    border-top: 10px solid #033e76;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.loginlogo {
    margin: 20px auto;
}

.loginbox form {
    width: 70%;
    margin: 30px auto;
}

.loginlogo {
    margin: 20px auto;
}

.loginbtn {
    border: none;
}

    .loginbtn:hover {
        background: linear-gradient(144deg, rgb(255 212 0) 0%, rgb(255 135 11) 100%);
    }

.wrkgrad {
    background: linear-gradient(144deg, rgb(255 212 0) 0%, rgb(255 135 11) 100%);
}

.gradten {
    background-image: linear-gradient(315deg, #0764ad 0%, #00204a 74%);
}




/*btstrp classes*/

.input-group {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
    margin-bottom: 1rem !important;
}

.input-group-prepend {
    display: -ms-flexbox;
    display: flex;
    margin-right: -1px;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    margin-bottom: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group-text {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: .375rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}

.btn-block {
    display: block;
    width: 100%;
}


.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.loginbtn {
    border: none;
}

.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.jconfirm .jconfirm-box {
    width: 50%;
    max-width: 400px;
}

.loginbox h4 {
    font-size: 1.5rem;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 0;
}

#editLoginDiv {
    position: absolute;
    z-index: 5000;
    width: 100%;
    height: 100%;
}

#HomeButton {
    position: absolute;
    top: 130px;
    left: 30px;
    z-index: 50;
    /*margin-left: 240px;*/
}

.firstcolumn {
    float: left;
    margin-left: 240px;
    margin-top: 20px;
    width: 200px;
    height: 150px;
    padding: 10px;
    overflow: hidden;
    border: 2px solid #ffd933;
    border-radius: 15px;
}

.column {
    float: left;
    margin-left: 20px;
    margin-top: 20px;
    width: 200px;
    height: 150px;
    padding: 10px;
    overflow: hidden;
    border: 2px solid #ffd933;
    border-radius: 15px;
}

/* Clear floats after the columns */
/*.row:after {
  content: "";
  display: table;
  clear: both;
}*/

.dot {
    height: 7px;
    width: 7px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid #000000;
    float: left;
    clear: left;
}

.imgLegend {
    height: 15px;
    width: 15px;
}

.labelStyle {
    font-size: 11px;
    vertical-align: text-top;
    float: left;
    margin-left: 10px;
}

.black_overlay {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: .80;
    filter: alpha(opacity=80);
}

.white_content {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 80%;
    height: 80%;
    padding: 10px;
    border: 2px solid orange;
    background: #2b2b2b; /*#464775;
  background: linear-gradient(38deg, rgba(15,16,33,1) 0%, rgba(0,114,179,0.8127626050420168) 100%);*/
    z-index: 1002;
    overflow: auto;
}

/*.white_content {
  display: none;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  padding: 16px;
  border: 16px solid orange;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}*/

.jqx-grid-column-header, .jqx-grid-columngroup-header {
    font-weight: bold !important;
    /*background-color: #e9af60 !important;*/
}

.jqx-grid {
    /*width:90% !important;*/
    margin: 20px auto;
}

.detailslink {
    color: #195c8f;
    text-decoration: underline;
    cursor: pointer;
}

    .detailslink:hover {
        color: #072769;
    }

/*.analysisfilters label {
font-size:14px;
}
.analysisfilters select{
    font-size:14px;
    margin-left:-4px;
    width:auto !important;
}*/

.rounded {
    border-radius: 10px !important;
}


.popupcontainer {
    position: fixed;
    z-index: 2000;
    background: rgba(0,0,0,0.87);
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}
/*.exportbtncontainer{
    float: right;
    background: #f4c41f;
    padding: 5px;
    margin: 2px;
    width: 90px;
    border-radius: 30px;
}
.exportbtncontainer:after{
   clear:both;
}*/


.srchctrlcontainerinner div {
    display: flex;
    align-items: center;
}

.srchctrlcontainerinners div {
    display: flex;
    align-items: center;
}

.srchctrlcontainerinner [type="checkbox"], .srchctrlcontainerinner [type="radio"] {
    margin: 0px 4px;
}



.divcontent {
    margin-top: 50px;
}

.cardscontainer {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.FundCount {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.fundCnt {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.fundCnts {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.card {
    padding: 10px;
    font-size: 22px;
    color: #fff;
    background: linear-gradient(136deg, rgb(8 232 255 / 37%) 0%, rgb(10 1 23 / 11%) 100%);
    margin: 20px 0px;
    text-align: center;
    min-width: 200px;
}

.cardlbl {
    display: block;
    font-size: 14px;
    font-weight: 300;
}

.cardval {
    font-weight: 600;
    letter-spacing: 2px;
}

.tablecontainer {
    display: flex;
    flex-direction: column;
}

/*#ui-datepicker-div {
    z-index: 9 !important;
}*/

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: none !important;
    background: #f6f6f6 url(images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x;
    font-weight: 400 !important;
    color: #000 !important;
    cursor: pointer !important;
    /*margin: 0px -10px 0px 0px;*/
    margin: 0px 0px 0px 0px;
    padding: 20px 0px;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #fed22f;
    background: #ffe45c url(images/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x;
    color: #b3d4fc;
}

tspan {
    fill: #000;
    stroke: none;
}

.highcharts-tooltip {
    color: #000 !important;
}

.highcharts-tooltip-box {
    fill: white;
    fill-opacity: 0.6;
    stroke-width: 0;
}

.highcharts-tooltip text {
    fill: black;
    /*text-shadow: 0 0 3px black;*/
}

.highcharts-tooltip tspan {
    fill: #000 !important;
}

.highcharts-tooltip connector {
    color: black;
}


.tile {
    background: #fff;
    margin: 30px 15px;
    padding: 0px 5px 20px 5px;
    width: 30%;
    /* min-height: 150px; */
    border-radius: 6px;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
    box-shadow: 0 17px 15px -10px rgb(0 0 0 / 25%);
    background: linear-gradient(144deg, rgb(255 255 255) 0%, rgb(194 223 236 / 65%) 100%);
    border: 1px solid #dddddd;
}

.tiles {
    background: #fff;
    margin: 50px 10px 0px 0px;
    padding: 0px 0px 0px 5px;
    width: 20%;
    /* min-height: 150px; */
    border-radius: 6px;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
    box-shadow: 0 17px 15px -10px rgb(0 0 0 / 25%);
    background: linear-gradient(144deg, rgb(255 255 255) 0%, rgb(194 223 236 / 65%) 100%);
    border: 1px solid #dddddd;
}
/*.tiles h3{
    text-align:center;
}
.tiles label{
    text-align:center;
}*/
.tiled {
    background: #fff;
    margin: 20px 10px 0px 0px;
    padding: 0px 0px 0px 2px;
    width: 20%;
    /* min-height: 150px; */
    border-radius: 6px;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
    box-shadow: 0 17px 15px -10px rgb(0 0 0 / 25%);
    background: linear-gradient(144deg, rgb(255 255 255) 0%, rgb(194 223 236 / 65%) 100%);
    border: 1px solid #dddddd;
}
/*.tiled label{
    font-weight: bold;
}*/

.tiling {
    background: #fff;
    margin: 50px 15px 0px 15px;
    padding: 0px 5px 20px 5px;
    width: 20%;
    /* min-height: 150px; */
    border-radius: 6px;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
    box-shadow: 0 17px 15px -10px rgb(0 0 0 / 25%);
    background: linear-gradient(144deg, rgb(255 255 255) 0%, rgb(194 223 236 / 65%) 100%);
    border: 1px solid #dddddd;
}

.tile .roundicon {
    background-color: #f7f6ee;
    border-radius: 3px;
    width: 60px;
    height: 60px;
    transition: all 0.2s ease-in-out;
    padding: 5px;
    position: relative;
    top: -20px;
    left: 15px;
    background-color: #7DAD41;
}

.tile h2 {
    text-align: center;
    margin: 4px;
    font-size: 16px;
    font-weight: 600;
    color: #696969;
    text-transform: uppercase;
}

.bignumber {
    text-align: center;
    font-size: 2.5em;
    font-weight: 400;
    font-family: 'Roboto';
    color: #2e2e2e;
}

.ui-widget-header {
    border: none !important;
    background: #296483 !important;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 3000; /* Sit on top */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #ffffff;
    color: #000;
    position: absolute;
    margin: auto;
    left: 5%;
    top: 5%;
    width: 90%;
    height: 90%;
    overflow: auto;
}

.modalContent {
    margin: 10px;
}

    .modalContent img {
        margin: 5px;
    }

.modal-content {
    /*background-color: #e0e0e0;*/
    background-image: url('../img/moneyback.jpg');
}

    .modal-content fieldset {
        height: 100%;
        width: 800px;
        box-sizing: border-box;
        margin: 10px auto;
    }

/*.modal-content .fullwidthtable {
  margin: 20px;
}*/

/* The Close Button */
.close {
    color: #fff;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover, .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

.popupheading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #28647f;
    color: #fff;
    padding: 0px 10px;
}

.thumbnail {
    width: 60px;
    height: 60px;
    border: 1px solid #afafaf;
    border-radius: 4px;
    cursor: pointer;
}

.deletebutton {
    border: 1px solid #c3c3c3;
    cursor: pointer;
    border-radius: 4px;
    padding: 0px;
    margin: 5px;
}

    .deletebutton img {
        height: 20px;
    }

.flexrow {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.boxshadow {
    box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
}

.popupfldstbody .whitetile {
    text-align: left;
    padding: 10px 5px;
    margin: 5px;
    /*border:none;*/
    cursor: default;
    width: 25%;
}

.popupfldstbody label {
    font-weight: 400;
    color: #696969;
    letter-spacing: 1px;
}

.popupfldstbody .smallvalue {
    padding: 0px;
    text-align: left;
    font-weight: 500;
    letter-spacing: 0px;
    font-size: 14px;
}

.whitetile {
    padding: 5px 10px;
    text-align: center;
    display: inline-block;
    border: 1px solid #eaeaea;
    border-radius: 5px;
    cursor: pointer;
    margin: 5px auto;
}

.legend {
    list-style: none;
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    display: flex;
}

    .legend li {
        display: flex;
        align-items: center;
    }

.legenddot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin: 0px 5px;
}

.legendarrow {
    font-size: 20px;
    font-weight: bold;
}

fieldset {
    border: 1px solid #dcdcdc;
    background: rgb(255,255,255);
    padding: 10px;
    border-radius: 4px;
    margin: 0px;
    /* box-shadow: 0px 7px 17px rgba(0,0,0,0.42);
  box-sizing: border-box;
  background: linear-gradient(270deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 100%);*/
}

legend {
    margin: 0px;
    padding: 5px;
    color: #fff;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 1px solid #dcdcdc;
    font-weight: 600;
    /*background: rgba(40,100,127,0.72);*/
    background: #888888;
    background: #4a4a4a;
    border-radius: 4px;
}

.item:hover p, .item:hover i, .question:hover p, .question label:hover, input:hover::placeholder {
    /*color: #296481;*/
}

.item input:hover, .item select:hover, .item textarea:hover {
    border: 1px solid transparent;
    box-shadow: 0 0 8px 0 #296481;
    color: #296481;
}

.item {
    position: relative;
    margin: 10px 0;
}

input[type="date"]::-webkit-inner-spin-button {
    display: none;
}

.item i, input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    font-size: 20px;
    color: #a9a9a9;
}

.item i {
    right: 2%;
    top: 30px;
    z-index: 1;
}

.btn-block {
    margin-top: 10px;
    text-align: center;
}

#btnSubmit {
    width: 150px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background: #21ACB9;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
}

/*button:hover {
    background: #296481;
}*/

@media (min-width: 568px) {
    .name-item, .city-item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

        .name-item input, .city-item input {
            width: calc(50% - 20px);
        }

        .city-item select {
            width: calc(50% - 8px);
        }
}

@font-face {
    font-family: 'Oxygen' !important;
    font-style: normal !important;
    font-weight: 400 !important;
    src: local('Oxygen'), local('Oxygen-Regular'), url(https://fonts.gstatic.com/s/oxygen/v5/LC4u_jU27qpsdszDEgeU_3-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2') !important;
    unicode-range: U+30-39 !important;
}

.numbers {
    /*font-family: Roboto;*/
}

.ui-widget {
    font-family: Roboto !important;
    font-size: 1.1em !important;
}

.info1 {
    border-radius: 0px;
    color: #333;
    /*line-height: 1.5;
    max-width: 50%;*/
    /*position: absolute !important;*/
    z-index: 10;
    bottom: 15rem;
    top: 22rem;
    left: 2rem;
    right: 1rem;
    width: 100%;
    height: 4%;
    border: 1px solid #ffffffab;
    border-radius: 4px;
    opacity: 0.9;
    background: #dee7e6;
}

.esriSimpleSliderTL {
    top: 60px !important;
    left: 20px;
}

.legendPadding {
    padding-right: 60px;
}

.p {
    color: black;
}

.required:after {
    content: " *";
    color: red;
}













h1 {
    letter-spacing: -1px;
    padding: 0;
    margin: 0;
    color: #21acb9;
    box-sizing: border-box;
    word-wrap: break-word;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Ubuntu,sans-serif;
}

.box-root {
    box-sizing: border-box;
}

.flex-direction--column {
    -ms-flex-direction: column;
    flex-direction: column;
}

.loginbackground-gridContainer {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: [start] 1fr [left-gutter] (86.6px)[16] [left-gutter] 1fr [end];
    grid-template-columns: [start] 1fr [left-gutter] repeat(16,86.6px) [left-gutter] 1fr [end];
    -ms-grid-rows: [top] 1fr [top-gutter] (64px)[8] [bottom-gutter] 1fr [bottom];
    grid-template-rows: [top] 1fr [top-gutter] repeat(8,64px) [bottom-gutter] 1fr [bottom];
    justify-content: center;
    margin: 0 -2%;
    transform: rotate(-12deg) skew(-12deg);
}

.flex-flex {
    display: flex;
}

.box-divider--light-all-2 {
    box-shadow: inset 0 0 0 2px #e3e8ee;
}

.padding-top--64 {
    padding-top: 64px;
}

.padding-top--24 {
    padding-top: 24px;
}

.padding-top--48 {
    padding-top: 48px;
}

.padding-bottom--24 {
    padding-bottom: 24px;
}

.padding-horizontal--48 {
    padding: 48px;
}

.padding-bottom--15 {
    padding-bottom: 15px;
}

.flex-justifyContent--center {
    -ms-flex-pack: center;
    justify-content: center;
}

.formbg {
    margin: 0px auto;
    width: 100%;
    max-width: 448px;
    background: #21acb92b;
    border-radius: 4px;
    box-shadow: rgba(60, 66, 87, 0.12) 0px 7px 14px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px;
}

.label {
    margin-bottom: 10px;
    padding: 0;
    margin: 0;
    color: #1a1f36;
    box-sizing: border-box;
    word-wrap: break-word;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Ubuntu,sans-serif;
}

.field input {
    font-size: 16px;
    line-height: 28px;
    padding: 8px 16px;
    width: 91%;
    min-height: 20px;
    border: unset;
    border-radius: 4px;
    outline-color: rgb(84 105 212 / 0.5);
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

.field select {
    font-size: 16px;
    line-height: 28px;
    padding: 8px 16px;
    width: 100%;
    min-height: 20px;
    border: unset;
    border-radius: 4px;
    outline-color: rgb(84 105 212 / 0.5);
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

input[type="submit"] {
    background-color: #21acb9;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgb(84, 105, 212) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.info {
    /*background-color: rgba(255, 255, 255, 0.95);*/
    border-radius: 0px;
    color: #333;
    /*line-height: 1.5;
    max-width: 50%;*/
    position: absolute;
    z-index: 10;
    top: 23rem;
    left: 3rem;
    right: 1rem;
    width: 19%;
    /*background-color: red;
    padding: 1.5rem;*/
    border: 1px solid #ffffffab;
    border-radius: 4px;
    opacity: 0.9;
    background: #dee7e6;
}

.achiever_color {
    background: #115f9a !important;
}

.fr_color {
    background: #22A7F0 !important;
    color: #fff !important;
}

.per_color {
    background: #76c68f !important;
}

.as_color {
    background: #d0ee11 !important;
    color: #fff !important;
}

.updateFont {
    font-size: x-small;
}