@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

*, input, textarea {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
    font-weight: 300 !important;
}

.divApplicationHeader,
.divServiceDetailPanel,
.divInstructions {
    background-color: white !important;
}

.divInstructions br {
    display: none;
}

b {
    font-weight: bold !important;
}

.lblAppName b {
    font-weight: 300 !important;
}

.tab-header ul.tab-list a {
    background: white;
    border: 1px solid #006EDB;
    border-radius: 15px;
    color: #006EDB;
    margin: 5px !important;
}

.tab-header ul.tab-list a.tab-active,
.tab-header ul.tab-list a.tab-active, .tab-header ul.tab-list a.tab-active:hover {
    background: #006EDB;
    border: 1px solid #006EDB;
    color: white !important;
    text-decoration: none;
}

.tab-header ul.tab-list a:hover {
    text-decoration: none;
}

.divInstructions {
    border-top: solid 1px #CECECE;
    color: #202124;
    padding: 5px 0;
}

.divAccordionTitle {
    background: white;
    border-radius: 15px;
    font-weight: normal;
    font-size: 16px;
    display: block;
}

.divDataContainer {
    background-color: white;
    font-size: 14px;
}

.divDataContainer table {
    color: #006EDB;
}

.divAccordionTitle {
    width: 380px;
    margin-left: 5px;
}

.divAccordionTitle input[type=checkbox] {
    display: none;
}

.tabContent {
    font-size: 14px;
    color: #202124;
}

.accordionCollapse,
.accordionExpand {
    background: none;
    width: auto;
    height: auto;
    position: absolute;
    top: 10px;
    left: 12px;
    border: solid #006EDB;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
}

.accordionCollapse {
    transform: rotate(-45deg);
}

#divAlertInstructionsContent {
    padding: 0 10px;
}

table.tableWaterStopInfo td {
    padding: 5px 10px !important;
}

.trRowDefault {
    color: #202124
}

.txtBox,
.txtDescription {
    background: #FFFFFF;
    border: 2px solid #EBEDED;
    border-radius: 15px;
    padding: 10px !important;
    font-size: 14px;
    color: #202124;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
    font-weight: 300 !important;
}

DIV.fileUploadContainer INPUT {
    display: none;
}

.txtBox {
    height: 20px !important;
}

.customButton {
    background: #006EDB  !important;
    border: solid 1px #006EDB;
    color: white;
    font-size: 14px;
    border-radius: 15px;
    height: 30px !important;
    line-height: 30px;
}

.customButtonInner input {
    height: 30px !important;
    line-height: 30px;
    font-size: 14px;
    position: relative;
    top: -2px;
}

.divDataContainer .Form-tbl {
    font-size: 13px;
    color: black;
}

.trRowHighlight {
    color: white;
    background-color:#006EDB;
}

.divServiceDetailPanel,
.divApplicationHeader {
    border-color: #006EDB;
}

.scrollbar_handle {
    background-color: #006EDB;
}

.divTriangle {
    border-top-color: #006EDB;
}

.divInfoWindowContainer {
    background: #f8fafc;
    box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.75)
}

.divTriangle {
    border-top-color: #f8fafc;
}

.esriSimpleSlider,
.esriSimpleSliderVertical .esriSimpleSliderIncrementButton {
    border-color: #006EDB;
    color: #006EDB;
}

.divLegendBackground {
    background: white;
}

#btnAddComments .customButtonInner {
    margin-top: -2px;
}

.customButtonInner input {
    font-size: 14px;
}

.divAddressContent,
.divLayerHolder,
.divAppHolder {
    background: #f8fafc;
    box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.75);
}

.tdSearchByUnSelectedServiceId,
.tdSearchByUnSelectedAddress {
    background: white;
    border: 1px solid #006EDB;
    border-radius: 15px;
    color: #006EDB;
}

.tdSearchByServiceId,
.tdSearchByAddress {
    background: #006EDB;
    border: 1px solid #006EDB;
    color: white;
    border-radius: 15px;
    cursor: default;
}


.txtAddress {
    background: #FFFFFF;
    border: 2px solid #EBEDED;
    border-radius: 15px;
    padding: 10px !important;
    font-size: 14px;
    color: #202124;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
    font-weight: 300 !important;
    padding-right: 26px !important;
}

.imgLocate {
    top: 8px;
    right: -12px;
}

/* signal dropdown */
#widget_cbRequestType {
    width: 240px !important;
    border: 2px solid #EBEDED;
    border-radius: 15px;
    padding-left: 10px;
}
#widget_cbRequestType .dijitArrowButtonContainer { border-radius: 0px 15px 15px 0px; }
#widget_cbRequestType_dropdown { border-radius: 15px; }
#widget_cbRequestType_dropdown .dijitComboBoxMenu {
    padding: 5px 10px;
    border-radius: 15px;
    width: 234px !important;
}

/*
=====================================
Responsive
=====================================
*/

@media only screen and (max-width: 800px) {
    body {
        overflow: auto;
        position: relative;
    }

    .divServiceDetailPanel {
        display: block;
        position: static;
    }

    .divLeftPanelBackground,
    .divToggleDetail  {
        display: none;
    }

    .esriSimpleSlider {
        left: 0 !important;
        top: 80px !important;
    }

    .divServiceDetailPanel,
    .divTabContent,
    .divDataContainer,
    .divAccordionTitle,
    .divAccordionContent,
    .scrollbar_content,
    .tableWaterStopInfo,
    .tdBottomRowSeperator,
    table.tableWaterStopInfo td,
    #divServiceTabContainer #divAccordianContainer table tr.trRowDefault,
    #divServiceTabContainer #divAccordianContainer table tr.trRowHighlight {
        width: 100% !important;
        max-width: 100% !important;
    }

    .scrollbar_content {
        height: auto !important;
        overflow: auto !important;
    }

    .divAccordionContent {
        height: auto !important;
        overflow-y: scroll !important;
        max-height: 300px !important;
        min-height: 50px !important;
    }

    .lblAppName {
        padding: 0;
        width: 60% !important;
    }

    .divLegendBackground,
    .divServiceRequestLegend {
        top: 80px;
        right: 0px;
        bottom: inherit;
    }

    /*map header*/
    .divApplicationHeader { height: auto; }
    .divApplicationHeader .headerTableRow { display: flex; flex-direction: column;	}
    .divApplicationHeader .headerTableRow .lblAppName,
    .divApplicationHeader .headerTableRow .mapHeaderIcons {
        width: 100% !important;
        text-align: center;
        line-height: 1;
        padding: 5px 0px;
    }
    .divApplicationHeader .headerTableRow .mapHeaderIcons table { width: 100%; }
    .divApplicationHeader .headerTableRow .mapHeaderIcons .imgOptions {
        height: 25px !important;
        width: 25px !important;
    }
    #divAddressContent,
    #divLayerContainer,
    #divAppContainer { top: 80px; }

    /* search window */
    #divAddressContent { width: 270px; }
    #divAddressResultContainer { margin: 0px 5px !important; }
    #divAddressResultContainer #table {
        margin: 5px 0px;
        width: 100% !important;
    }
    #tdSearchAddress,
    #tdSearchServiceId { width: 50px; }
    #divAddressPlaceHolder { width: auto; }
    #divAddressPlaceHolder input { width: 208px; padding-right: 40px !important; }
    #divAddressPlaceHolder img { right: 5px; top: 10px; }
    #divAddressScrollContent,
    #tblAddressResults
    #divAddressList { width: 100% !important; }

    /* map accordion */
    .tableAccordionHeader td { min-width: 30px; }
    .divAccordionTitle {
        height: auto;
        width: 98% !important;
        margin: 0 auto;
    }
    .divAccordionTitle .tableAccordionHeader { min-height: 30px; padding: 5px 0px; }
    #divServiceTabContainer-header {
        height: auto;
        display: inline-block;
        width: 100%;
    }
    #divServiceTabContainer-header .tab-list {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    #divServiceTabContainer-header ul.tab-list a,
    #divServiceTabContainer-header ul.tab-list span,
    #divServiceTabContainer-header ul.tab-list a.tab-active { width: 120px; }

    /* send signal */
    #divDataContainer { height: 650px !important; }
    #divDataContent { height: auto !important; }
    #divDataContainer .scrollbar_track { display: none; }

    .sendSignalWrapper,
    #tableServiceRequestDetails { width: 100% !important; }
    #tableServiceRequestDetails .sendSignalRow {
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
        height: auto !important;
    }
    #tableServiceRequestDetails .sendSignalRow td {
        width: 100%;
        text-align: center;
        padding: 0px;
    }
    #tableServiceRequestDetails .sendSignalRow .txtDescription,
    #tableServiceRequestDetails .sendSignalRow .txtBox { margin-left: 0px; }
    #tableServiceRequestDetails .sendSignalRow #tblFileSelect { margin: 0 auto; }
    #tableServiceRequestDetails .sendSignalRow #tblFileSelect #fileUploadControl { width: 100% !important; }
    #tableServiceRequestDetails .sendSignalRow.sendSignalTerms { flex-direction: row; }
    #tableServiceRequestDetails .sendSignalRow.sendSignalTerms .tbl-lbl { width: auto; }
    #tableServiceRequestDetails .sendSignalRow .g-recaptcha { margin: 0px 0px 0px -20px !important; }
    #tableServiceRequestDetails .sendSignalRow .g-recaptcha div{
        width: 270px !important;
        margin: 0 auto;
    }
    #tableServiceRequestDetails .sendSignalRow .sendSignalButtons { margin: 0 auto; }
    #spanServiceErrorMessage { width: 100%; margin-left: 0px !important; }

    /* send signal dropdown */
    #divServiceRequestInstructionsContainer { height: 220px; }
    #divServiceRequestInstructionsContent { height: 100%; }
    #widget_cbRequestType_dropdown { top: 930px !important; }

    /* make map smaller for mobile usability */
    #divMainContainer {
        height: 60% !important;
    }
}