/*
    StyleSheet - Wiiisps
    MapApps Corporation
    All Rights Reserved ©2025.
*/

/*
    Based Color Choices on Azure: #336699 (51,102,153)
    Some borders based on: #339999 (See W3 Color Picker Hue section)

    Consider switching colors to match the image/palette:
    C:\Users\Carl\Pictures\MapApps Pictures\PictureWhere\wild-art-1250-400_Color Palette.jpg

    For Azure Shades, used W3Schools:
    https://www.w3schools.com/colors/colors_picker.asp?colorhex=336699

    Lighter / Darker:
    100% 	 #ffffff
    95% 	 #ecf2f9
    90% 	 #d9e6f2
    85% 	 #c6d9ec
    80% 	 #b3cce6
    75% 	 #9fbfdf
    70% 	 #8cb3d9
    65% 	 #79a6d2
    60% 	 #6699cc
    55% 	 #538cc6
    50% 	 #4080bf
    45% 	 #3973ac
    40% 	 #336699
    35% 	 #2d5986
    30% 	 #264d73
    25% 	 #204060
    20% 	 #19334d
    15% 	 #132639
    10% 	 #0d1a26
    5% 	     #060d13
    0% 	     #000000

    Can compare or try colors at:
    https://www.w3schools.com/colors/tryit.asp?filename=trycolors_palettes1

    Text (Lighter/Darker):
        #ffffff (255,255,255)
        #ecf2f9 (236,242,249)
        #060d13 (6,13,19)
        #000000 (0,0,0)

    https://coolors.co/palettes/trending/#19334d
    Header Color:       #19334d
    Color Beige:        #e3ffc2
    Color Green:        #5d8038 - Dash
    Color Brown:        #7a2d00 - Dash
    Color Gold:         #eea144 - Dash

    Other Base Options:

    Corel PaintShop Pro X9 Standard Palette:
    background: #004d65;
    background: #00364a; (Darker)

    Consider:

    Teal                #095772
    Teal                #0f5b8c
    Medium Turquoise    #4c97d3
    Light Steel Blue    #b2d0dd
    Midnight Blue       #184d55
    (From uploaded image to https://www.canva.com/color-palette/ 
    Image was: C:\Users\Carl\Pictures\Personal Pictures\West Palm Beach 2014\DSCN0542

    Chocolate           #be6c21 - Dash
    Tan                 #d2b594
    Dark Olive Green    #3f3227
    Dark Olive Green    #725d45
    Steel Blue          #e3ffc2
    (From uploaded image to https://www.canva.com/color-palette/ 
    Image was: C:\Users\Carl\Documents\Visual Studio 2017\Projects\MapAppsCloud_Lists_1811\MapApps_Lists_1811\images\wild-art-1250-400.jpg

    Also consider Theme Roller:
    http://themeroller.jquerymobile.com/

    -------------------------------------------------------------------

    Bootstrap 4 Defaults:

    Font:
        Bootstrap 4 uses a default font-size of 16px, and its line-height is 1.5.
        The default font-family is "Helvetica Neue", Helvetica, Arial, sans-serif.

    Card (Captured using Paintshop Pro):
        Header Background Color:        #f7f7f7
        Header Color:                   #404040
        Border Color:                   #dfdfdf

    -------------------------------------------------------------------
    Extra small devices (portrait phones, less than 576px)
    No media query for `xs` since this is the default in Bootstrap
    --------------------------
    Small devices (landscape phones, 576px and up)
    @media (min-width: 576px) { ... }
    --------------------------
    Medium devices (tablets, 768px and up)
    @media (min-width: 768px) { ... }
    --------------------------
    Large devices (desktops, 992px and up)
    @media (min-width: 992px) { ... }
    --------------------------
    Extra large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) { ... }
        
*/

.bodyTerms {
    padding-top: 30px;
}

#quicklink a {
    text-decoration: none;
}

    #quicklink a:hover {
        text-decoration: underline;
    }

.quicklinkicon {
    width: 20px;
}

.controlrequired:after {
    color: red;
    content: "*";
    position: absolute;
    margin-left: 5px;
}

.modal-header {
    background-color: #b3e6e6;
    padding: .5rem 1rem;
}

    .modal-header .close {
        padding: 1.2rem 1rem .8rem 1rem;
        font-size: 2rem;
    }

.listname-color {
    color: #212529;
}

.tab5 {
    tab-size: 5;
}

.tab8 {
    tab-size: 8;
}

.checkboxlistformat label {
    margin-left: 10px;
}

/* ------ fixed width columns ------ */
.fixed-width-label {
    width: 100px;
}

.fixed-width-label2 {
    width: 140px;
}

.fixed-width-label3 {
    width: 180px;
}

.fixed-width-icon {
    width: 25px;
}

/* ------ Bootstrap Adjustments ------ */

.col-form-label {
    font-weight: 600;
}

.badge.even-larger-badge {
    font-size: 1.1em;
}

/* ------ Card Adjustments ------ */

.card {
    min-width: 200px;
}

.card-header {
    color: #404040;
}

.card-nopadding {
    padding: 0 0 0 0;
}

.card-minheight {
    min-height: 80px;
}

.a-itemview {
    text-decoration: none;
}

    .a-itemview:hover {
        text-decoration: none;
        color: #404040;
    }

.card-itemview {
    transition: all 0.1s;
}

.card-itemview:hover {
    border-width: 2px;
}

.card-place-height {
        height: 403px;
    }

.card-tag-height {
    height: 178px;
}

.card-tag-listbox {
    border: 0 !important;
    border-radius: 0px;
}

/* ------ Card enclosed listboxes ------ */

.card-listbox {
    border-style: none;
    border-radius: 0;
}

.card-lisbox-show {
    visibility: visible;
}

.card-lisbox-hide {
    visibility: hidden;
}

.card-orderedlistbox thead {
    display: none;
}

.dxbs-listbox tr[data-type="spacer"] {
    display: none;
}

.card-orderedlistboxitem {
    color: #060d13;
}

/*
    .card-listboxitem td {
        border: none;
        border-style: none;
        background-color: red;
    }
*/



/* ------ Lists Page ------ */

.listline {
    border: 2px solid #eea144;
    opacity: 1.0;
}

.itemline {
    border: 2px solid #6699cc;
    opacity: 1.0;
}

.colorbrown {
    color: #7a2d00;
}

.colorgray {
    color: gray;
}

.selectedlist:active {
    background: #ffffff;
}

.selectedlist:focus {
    background: #ffffff;
}

.listdiv-minheight {
    min-height: 150px;
}

/* ------ Dashboard Page ------ */

.dashbadge {
    z-index: 200;
    background-color: #6699cc;
    white-space: nowrap;
    font-weight: bold;
    color: #d9e6f2;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0.375rem 0.75rem;
    margin-bottom: 4px;
    font-size: 1rem;
    line-height: 1.5;
}

.dashclose {
    color: #d9e6f2;
    font-weight: bold;
    padding-right: 0;
    padding-left: 0;
    margin-left: 10px;
}

    .dashclose:hover {
        color: #ffffff;
        font-weight: bold;
        text-decoration: none;
        padding-right: 0;
        padding-left: 0;
        margin-left: 10px;
    }

.dashtooltip {
    padding: 0;
    margin: 0;
}

/* ------ Filter Controls ------ */

.filterbadge {
    z-index: 200;
    background-color: #6699cc;
    white-space: nowrap;
    font-weight: bold;
    color: #d9e6f2;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0.375rem 0.75rem;
    margin-bottom: 4px;
    font-size: 1rem;
    line-height: 1.5;
}

.filterclose {
    color: #d9e6f2;
    font-weight: bold;
    padding-right: 0;
    padding-left: 0;
    margin-left: 10px;
}

    .filterclose:hover {
        color: #ffffff;
        font-weight: bold;
        text-decoration: none;
        padding-right: 0;
        padding-left: 0;
        margin-left: 10px;
    }

.filtertooltip {
    padding: 0;
    margin: 0;
}

/* ---------------- Bootstrap Comments -----------------*/

.bdge {
    height: 21px;
    background-color: orange;
    color: #fff;
    font-size: 11px;
    padding: 8px;
    border-radius: 4px;
    line-height: 3px
}

.comments {
    text-decoration: underline;
    text-underline-position: under;
    cursor: pointer
}

.dot {
    height: 7px;
    width: 7px;
    margin-top: 3px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block
}

.replyicon {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.reply-section {
    margin-top: 0;
}

.hit-voting:hover {
    color: blue
}

.hit-voting {
    cursor: pointer
}

.item-note-footer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0.75rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: calc(0.3rem - 1px);
    border-bottom-left-radius: calc(0.3rem - 1px);
}

.item-edit-fontsize {
    font-size: small;
}

.order-add {

}
    .order-add:hover {
        color: #060d13;
    }