﻿/*************Styles are taken from the branding.fdacs.gov site, some minor tweaks are added below to enchance the branding ************************/

h1, .h1 {
    color: #385687; /*#2d6c8d*/
    
}

body {
    background-color: #FFFFFF;
}

input[type=submit], input[type=button], button {
    background-color: #385687; /*#2d6c8d*/

}

/************************** Button Card Styles ***************************/
.button-card {
    margin: 0px;
    color: #2D6C8D;
}

/************************ End of Button Card Styles ***********************/
/************************** Button Styles ***************************/
input[type=submit], input[type=button], button {
    /*color:White; background-color:#2D6C8D; font-weight:bold; padding: 15px 30px 15px 30px; text-transform:uppercase; cursor:pointer;*/
    color: White;
    background-color: #385687 ;
    font-weight: bold;
    padding: 15px 30px 15px 30px;
    text-transform: uppercase;
    cursor: pointer;
}
/*.button {color:White !important; background-color:#2D6C8D !important; font-weight:bold !important; cursor:pointer;}*/
.button {
    color: White !important;
    background-color: #385687 !important;
    font-weight: bold !important;
    cursor: pointer;
}
.ui-widget-overlay {background: #000;}

/*.icon-button {

}
    .icon-button-container {
        border: outset 5px solid black;
        border-radius: unset;

        border-width: 2px;
    border-style: outset;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(195, 195, 195));
    border-image: initial;
    }
    .icon-button-container i {
    }*/


.btn-group {padding:25px 0; display:flex; flex-direction:row; }
    .btn-group input[type="submit"], .btn-group input[type="button"], .btn-group button { margin-right: 2%;  }

/************************ End of Button Styles ***********************/

/************************** Heading Styles ***************************/

h1, h3, h5, .contentbox.customtag .h3, .contentbox.customtag h3 {
    color: #385687;
}


h2, h4, h6, .contentbox.customtag .h2, .contentbox.customtag h2, .contentbox.customtag .h4, .contentbox.customtag h4 {
    padding-bottom: 10px;
    color: #000;
}

/************************ End of Heading Styles ***********************/
/************************** List Styles ***************************/
ol {
    margin-left: 30px;
}

        li {
            padding-left: 10px;
        }

        ol.circled {
             counter-reset:li; /* Initiate a counter */
             list-style-type: none;
             margin: 0px;
             position:relative; /* Create a positioning context */
        }

            ol.circled > li {
                padding-right: 0;
                margin: 0 0 20px;
            }
            ol.circled > li:before  {
                content: counter(li); /* Use the counter as content */
                counter-increment: li; /* Increment the counter by 1 */

                border-radius: 50%;
                border: 4.5px double #639ebc;
                margin:0 20px 0 0; /* Give each list item a left margin to make room for the numbers */
                padding: 5px 17px;
                background-color: #fff;

                font-weight: bold !important;
                text-align: center;
                font-size: 30px;
                color: #000;
                -webkit-text-stroke: 1px #444;
                -webkit-text-stroke-width: 1.5px;
                -webkit-text-fill-color: #ddd;
            }

/************************ End of List Styles ***********************/

/************************** Alignment Styles ***************************/  
.alignCenter
{
	text-align: center !important;
}
.alignLeft
{
	text-align: left;
}
.alignRight
{
	text-align: right;
}
.positionCenter {margin:0 auto}
/************************ End of Alignment Styles ***********************/

/************************** Grid Styles ***************************/


.gridviewstylenew th {
    padding: 5px;
    color: white;
    /*background-color: #2D6C8D;*/
    background-color: #385687;
    text-align: left;
}
.gridviewstylenew th a {
    color:white;
}

.gridviewstylenew td{
    padding: 5px;
}

.gridalternate {
    background-color: #F0F2F3;
}

/************************ End of Alignment Styles ***********************/

/*************** Modal box - Not sure if these are still used -- using definitely in #modal_authticket as 07/2020 ****************************/
div.modal-box.wrapper {margin: 25% auto;float: none;border: 1px solid #d4d4d4;border-radius:3px;-moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px;font: 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;z-index: 2000;text-align: left;left: 25%;right: 25%;background-color: #fffeff;}
div.modal-box div.inside {margin: 3px;padding: 10px;overflow: visible;z-index: 2000;}

/* Each Box's specified width: Required so that they're showing in the middle of the page */
div#adjust-settings.modal-box {width: 900px;}

div.modal-box div.hr {height: 5px;background: url(./images/hr.png) repeat-x;}

#adjust-settings span.button.white.save {margin-left: 95px;}

div.modal-box div.inside.grey {background: #d5d8db url(./images/grey-bg.jpg) repeat-x;}

/* Close Buttons */
div.modal-box span.modal-close {top: -13px;right: -13px;width: 35px;height: 35px;background: url(/Images/close-buttons-sprite.png) no-repeat;}
div.modal-box span.modal-close:hover {background-position: 0 -37px;cursor: pointer;}
div.modal-box span.modal-close span {display: none;}
div.modal-box span.modal-close.left {top: -13px;left: -13px;}
div.modal-box span.modal-close.black {background-position: -35px 0;}
div.modal-box span.modal-close.black:hover {background-position: -35px -36px;}
div.modal-box span.modal-close.red {background-position: -70px 0;}
div.modal-box span.modal-close.red:hover {background-position: -70px -38px;}
div.modal-box span.modal-close.yellow {background-position: -105px 0;}
div.modal-box span.modal-close.yellow:hover {background-position: -105px -38px;}

div.modal-box h3 {font-size: 30px;font-weight: bold;margin: 10px 0px 5px; color: #464646;letter-spacing: -1px;}
div.modal-box .red h3, div.modal-box .yellow h3 {color: #fffeff;margin-top: 0px;}
div#restricted-content.modal-box h3 {margin-top: 90px;}

div.modal-box p {text-shadow: rgba(255,254,255,0.5) 0 1px 0;color: #7a7a7a;margin: 5px 0px 10px;}

div.modal-box div.clear{height: 1px;clear: both;}
div.modal-box.centered {text-align: center;}

/* Image Styles */
div.modal-box img{float: left;margin-right: 20px;}
div.modal-box img.right {float: right;margin-right: 0px;margin-left: 20px;}
div.modal-box.centered img {float: none;}
div.modal-box img.pop-out {margin-top: -42px;z-index: 2001;position: absolute;left: 94px;}

/* Custom styles for #modal_authticket and other modal alert types */
#modal_authticket, .modal_alert {background-color: rgba(0, 0, 0, 0.5)}
    #modal_authticket div.modal-box {width:30% !important; max-width:900px; padding:5px 40px 10px;}
    .modal_alert div.modal-box {width:60% !important; max-width:900px; padding:10px 40px 25px;}
        #modal_authticket div.modal-box h3, .modal_alert div.modal-box h3 {margin-bottom:15px; font-family:"Source Sans Pro", sans-serif;}
            #modal_authticket div.modal-box h3 i, .modal_alert div.modal-box h3 i {margin-right:3%;}
        #modal_authticket div.modal-box p, .modal_alert div.modal-box p {font-size:1.25em; line-height:initial; color:#555555; text-align:center; margin: 15px auto 15px;}
            #modal_authticket div.modal-box p em, .modal_alert div.modal-box p em {font-size:0.90em;}
        
        #modal_authticket div.modal-box .modal-box-buttonpane, .modal_alert div.modal-box .modal-box-buttonpane {padding:10px 25px 2px; display:flex; flex-direction:row; justify-content:space-around }
            #modal_authticket div.modal-box .modal-box-buttonpane input, .modal_alert div.modal-box .modal-box-buttonpane input {padding:12px 25px; width:150px; text-transform:uppercase; letter-spacing:1px; }


/* alert style for LARGE CONTENT  */
.modal_large_content {font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; }
    .modal_large_content div.modal-box.wrapper {margin: 20% auto;}
        .modal_large_content .modal-box-buttonpane {padding-left:150px !important; padding-right:150px !important; }
    .modal_large_content h3 {margin-bottom:20px !important; font-family:"Source Sans Pro", sans-serif;}
    .modal_large_content p {font-size:120% !important;line-height: 150% !important; font-family: "Source Sans Pro", sans-serif !important; clear:left; }
    .modal_large_content ul {list-style: inside; text-align:center; font-size:105%; line-height:90%; font-family: "Source Sans Pro", sans-serif !important; display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:25px; padding: 0 10%;}


/* red modal */
.modal_alert.modal_burntRed {background-color: rgba(52, 14, 0, 0.75); color:rgba(52, 14, 0, 0.00)}
    .modal_burntRed div.modal-box.wrapper {border: 1px inset #612408; background-color: #dd5943;} /*dd5943 bd381a #ca4d32*/
        .modal_burntRed div.modal-box.wrapper h3 {color:#4e0101 !important;}
        .modal_burntRed div.modal-box.wrapper p {color:#000 !important; text-shadow: #888 0 1px 0;}
        .modal_burntRed div.modal-box.wrapper ul li {color:#210101 !important; }
        .modal_burntRed .modal-box-buttonpane input[type=submit], 
            .modal_burntRed .modal-box-buttonpane input[type=button], 
                .modal_burntRed .modal-box-buttonpane button { background-color: #982804;} /*9d3210*/

/********************** End Modal Box *****************************/

/************************** Font Awesome Icon Styles ***************************/ 
.fa-dollar-sign:before {content: '$'; font-size: 110%; font-weight: 500; font-family:"Source Sans Pro", sans-serif; color: #aaaaaa; margin-right:-3px; padding-right:0;}
.fa-right {margin-left: 20px;}
/************************** End Font Awesome Icon Styles ***************************/ 

/************************** Accordion Styles ***************************/ 
.accordion {padding:20px 20px 50px; margin-bottom:40px;}
    .accordion .card-header {border:0;}
        .accordion .card-header:hover {color: #777}
        .accordion .card-header .fas {margin:auto 10px auto 0}
/*.accordion .card-header .fas:hover, .accordion [aria-selected~="true"] .fas {color:#2d6c8d !important}*/
            .accordion .card-header .fas:hover, .accordion [aria-selected~="true"] .fas {
                color: #385687 !important
            }
    .accordion .card-body {padding-bottom:35px}
    .accordion table tr:hover {background-color: rgb(240, 242, 243);}
/************************** End Accordion Styles ***************************/ 

/************************** ProgressBar Styles ***************************/ 
.ui-progressbar {}
  .progress-label { left: 50%; top: 4px; font-weight: bold; }
/************************** End ProgressBar Styles ***************************/ 

/************************** callout Styles ***************************/ 
.bd-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #eee;
    border-left-width: 0.35rem;
    border-radius: .5rem;
}
.bd-callout-info2 {
    border-left-color: #5bc0de;
}
.bd-callout-info {
    border-left-color: #efefef;
}
.bd-callout-memo {
    /*border-left-color: #2d6c8d;*/
    border-left-color: #385687;
}
/************************** End callout Styles ***************************/ 

/************************** Miscellaneous Styles ***************************/ 
.hover {cursor: pointer;}
.hover-color-grey:hover {color:#E5E7E9 !important;}
.margin-top-20 {margin-top:20px;}
.margin-top-50 {margin-top:50px !important;}
.margin-bottom-20 {margin-bottom:20px;}
.margin-bottom-50 {margin-bottom:50px;}
.margin-left-right-50 {margin-left:50px; margin-right:50px;}
.margin-left-right-20 {margin-left:20px; margin-right:20px;}
.margin-left-5percent {margin-left:5%;}
.margin-right-5percent {margin-right:5%;}
.margin-left-1percent {margin-left:1%;}
.margin-right-1percent {margin-right:1%;}
.margin-auto {margin:auto;}
.margin-top-bottom-auto {margin-top:auto; margin-bottom:auto;}
.width100 {width:100%;}
.hide {display:none;}
.transparent-background {background:transparent;}
.no-bottom-margin {margin-bottom:0 !important;}
a:hover .card-tag__triangle {border-color:transparent transparent #122d3a transparent !important;}
.table-cell {display:table-cell;}
.table-cell-150px {display:table-cell; width:150px !important;}
.table-row {display:table-row;}
.card-header {box-shadow:none !important;}
.alert-orange {background-color: #f9c87c; color: #000000; margin-top:20px; border-radius:5px; padding:15px;}
    .alert-orange .progress-label {color: #000000}
.text-bold {font-weight:900;}
/*.font-color-aqua {color: #2D6C8D !important;}*/
.font-color-aqua {
    color: #385687 !important;
}
.font-color-teal {color: #5bc0de !important;}
.black-text {color:#000 !important;}

span.number_character::after {content: '#'; visibility: visible; font-size: 15px;}
.flex { display:flex; align-items: center;}

.stat-card__stat {
    font-size: 52px;
    text-align: center;
    color: #385687;
    text-shadow: -4px 0 white, 0 4px white, 4px 0 white, 0 -4px white;
    font-weight: 700;
    position: relative;
    top: -28px;
    margin-bottom: 0px;
    line-height: 1.0em;
}
/************************** End Miscellaneous Styles ***************************/
/************************** Print Permit Styles ***************************/
#SearchByFE_content {
    padding: 2% 1% 5%;
    margin: 0 0 0%;
    border-radius: 7px;
    text-shadow: 2px 2px 1.5px #d0d0d0;
    border: 1px solid transparent;
}

    #SearchByFE_content:hover,
    #SearchByFE_content:focus,
    .SearchByFE_content_focus
     {
        background-color: #deecf0;
        box-shadow: 5px 5px 5px 0px #eee;
        border-color: #ccc;
    }

    #div_search_container h3 {
        font-size:130%;
    }

    #SearchByFE_options_content {
        margin-left: 4%;
        margin-right: 4%;
        font-size: 100%;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-wrap: nowrap;
        width: 30%;
        column-gap:12px;
    }
        .SearchByFE_option_content {
        }
            #SearchByFE_content input[type="checkbox"] {
                margin-right:4%;
                transform: scale(1.5);
                width:15%;
            }
            
            #search_container {
                border-radius: 6px;
                border: 1px solid #888;
                box-shadow: 5px 5px 5px 0px #ddd;
                color: #7a7a7a;
                text-shadow: 2px 2px 1.5px #ddd;
                display: flex;
                flex-grow:1;
                flex-direction:row;
                padding-right: 3%;
                /*padding-left: 3%;*/
            }
                    #search_container:hover {
                        background-color: #F6F6F9;
                    }
            
                /* Search Textbox styles */
                #SearchByFE_content /*input[type="search"]*/#ctl00_cphMain_search_fe {
                    border: 0;
                    width:175px;
                    /*min-width:100px;*/
                    font-size: 105%;
                    /*letter-spacing: 0.09em;*/
                    padding: 1% 2% 1% 2%;
                    color: #363636;
                    text-shadow: 2px 2px 1.5px #ddd;
                    flex-grow:3;
                    background: none;
                }
                        input#ctl00_cphMain_search_fe::placeholder {
                            color: #bbb;
                        }

                    #ctl00_cphMain_search_fe:focus {
                    }

                /* Custom hash character */
                #SearchByFE_content .fas-hash {
                    color: #bbb;
                    margin: 3% auto auto;
                    font-size: 190%;
                    font-style: italic;
                    font-weight: bold;
                }

                /* Submit button styles */
                #ctl00_cphMain_SearchFE_button, #SearchFE_submit_button {
                    padding: 3% 5% !important;
                    margin: 2% 0;
                    border-radius: 3px;
                    display:flex;
                    flex-wrap:nowrap;
                    justify-content:center;
                    gap:15%;
                }
                    #SearchByFE_content .fa-search {
                        padding-top: 5%;
                    }

h3#ViewAllFEs {
    margin: 0%;
    padding: 1.5% 2% 2%;
    border-radius: 7px;
    text-shadow: 2px 2px 1.5px #d0d0d0;
    border: 1px solid transparent;
}
    h3#ViewAllFEs:hover,
    h3#ViewAllFEs:focus {
        background-color: #d9ebfb;
        box-shadow: 5px 5px 5px 0px #eee;
        border-color: #ccc;
    }

#SearchByFE_content h3 input[type="radio"], 
#ViewAllFEs input[type="radio"] {
    width:4%;
}



/************************** END Print Permit Styles ***************************/ 
