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

/*Color Palette Orange and White*/

:root {
    /*
        --LinkColor: var(--LinkColor);
        --HoverColor: var(--HoverColor);
        --DashboardStatsColor: var(--DashboardStatsColor)
        --TextColor: var(--TextColor);
        --ButtonTextColor: var(--ButtonTextColor);
    */
    --LinkColor: hsl(22, 98%, 49%);
    --HoverColor: hsl(22, 86%, 57%);
    --DashboardStatsColor: hsl(175, 43%, 50%);
    --TextColor: hsl(210, 11%, 15%);
    --WhiteTextColor: white;
    --ButtonTextColor: hsl(0, 0%, 96%);
    --LayoutBackgroundColor: hsl(0,0%,100%);
    --LayoutButtonhighlight: hsl(0,0%, 90%);
    --ButtonHoverColor: hsl(22, 100%, 38%);
    --StatsButtonColor: hsl(0, 0%, 83%);
    --StatsHoverButtonColor: hsl(0, 0%, 38%);
    --StatsInfoSelectColor: hsl(0,0%,50%);
    --StatToolTipColor: hsl(0, 0%, 38%);
    --SelectButtonGrey: hsl(0, 0%, 83%);
    --DisabledButtonColor: hsl(0, 0%, 66%);
    --DropDownListColor: hsl(0,0%,96%);
    --StatDisplayBox: hsl(0, 7%, 90%);
    --MainBackgroundColor: hsl(0,0%,96%);
    --StatTabButtonColor: hsl(194,60.7%,89%);
    --StatOptionButtonSelected: hsl(193,51.9%,54.3%);
    --StatOptionButton: hsl(208,24.7%,31.8%);
    --PERed: #D3260E;
    --PEYellow: #F3D539;
    --PEOrange: #E36414;
    --PEGreen: #7FAF5C;
}

/*dark mode settings for later*/
.dark {
    --LinkColor: hsl(22, 98%, 49%);
    --HoverColor: hsl(22, 86%, 57%);
    --DashboardStatsColor: hsl(175, 43%, 50%);
    --TextColor: hsl(210, 11%, 15%);
    --ButtonTextColor: hsl(0, 0%, 96%);
    --LayoutBackgroundColor: hsl(209, 13%, 54%);
}

.bodySettings {
    background-color: Var(--MainBackgroundColor);
    /* background-color: Var(--LayoutBackgroundColor);*/
    margin-bottom: 20px;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
}

.headerSettings {
    background-color: Var(--LayoutBackgroundColor);
    z-index: 46;
    min-height: 40px;
    position: fixed;
    top: 0px;
}

.headerItemSettings {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
    float: left;
    margin-left: 20px;
    margin-right: 20px;
    width: 100%;
    position: fixed;
    min-height: 40px;
    z-index: 46;
    background-color: Var(--LayoutBackgroundColor);
}

.headerItemLimits {
    max-width: 250vh;
}

.footerSettings {
    background-color: Var(--MainBackgroundColor) !important;
    height: 150px;
    position: fixed;
    bottom: 0;
    width: 100%;
    min-height: 50px;
}

.footerChatBubbleBox {
    float: right;
    position: fixed;
    bottom: 0;
    right: 0;
}

    .footerChatBubbleBox:hover .footerChatBubbleText {
        display: block;
        position: fixed;
    }

.footerChatBubbleIcon {
    float: right;
    margin-right: 20px;
    margin-bottom: 20px;
    width: 132px;
    height: 99px;
}

.footerChatBubbleText {
    display: none;
    position: fixed;
    bottom: 70px;
    right: 130px;
    width: 400px;
    border: 2px solid;
    border-color: var(--LinkColor);
    margin-top: 130px;
    color: #3d5265;
    background-color: Var(--LayoutBackgroundColor);
}

.Danger-Red {
    background-color: Var(--PERed) !important;
}

.Text-Red {
    color: Var(--PERed) !important;
}

.Text-Green {
    color: Var(--PEGreen) !important;
}

html {
    font-size: 14px;
    background-color: var(--MainBackgroundColor);
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

th {
    border-bottom-color: Inherit !important;
}

.StatSpacer{
    visibility: hidden;
    width: 100%;
}

.searchBar {
    margin-right: 50px;
}

.navSticky {
    min-height: 40px;
    z-index: 46;
    position: fixed;
    top: 0px;
    background-color: Var(--LayoutBackgroundColor);
}

.MainBody {
    width: 100%;
    float: left;
    margin-left: 5px;
    margin-top: 10px;
    z-index: 30;
}

.layout {
    color: white;
}

.logoImg {
    display: block;
    max-width: 230px;
    max-height: 95px;
    width: auto;
    height: auto;
    padding-right: 50px;
}
.layoutBtn {
    background-color: var(--LayoutBackgroundColor);
    border: none;
    color: var(--TextColor);
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 16px;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    transition: 0.5s;
}

.NameLink {
    font-weight: normal;
    color: var(--TextColor);
    cursor: pointer;
    transition: 0.1s;
    background-color: none;
    text-decoration: none !important;
    border-radius: 3px; /*Determines how curved corners are*/
    padding-right: 2px;
}

    .NameLink:hover {
        font-weight: bold;
        color: var(--TextColor);
        cursor: pointer;
        transition: 0.1s;
        background-color: var(--HoverColor);
        text-decoration: none !important;
        outline-color: var(--HoverColor);
        outline-width: 5px;
        outline-style: solid;
        padding-right: 2px;
        border-radius: 3px; /*Determines how curved corners are*/
    }

.btn {
    background-color: var(--LinkColor); /*Old color: Hazy Gray var(--LayoutBackgroundColor)*/
    color: var(--ButtonTextColor); /* color: var(--ButtonTextColor)*/
    border: none;
    padding: 4px 30px; /*makes the buttons longer and shorter*/
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 3px 2px;
    cursor: pointer; /*changes cursor when hovering*/
    border-radius: 3px; /*Determines how curved corners are*/
    font-weight: bold;
    transition: 0.4s;
}

.btn2 {
    background-color: var(--LinkColor); /*Old color: Cyan blue #4CADC7*/
    border: none;
    color: var(--ButtonTextColor); /*Text Color*/
    padding: 5px 30px; /*makes the buttons longer and shorter*/
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer; /*changes cursor when hovering*/
    border-radius: 3px; /*Determines how curved corners are*/
    font-weight: bold;
    transition: 0.4s;
}

btn2::after{
    background-color: var(--ButtonHoverColor);
}

.btnSubmit {
    background-color: var(--LinkColor); /*Main color: Hazy Gray*/
    border: none;
    color: var(--ButtonTextColor); /*text color*/
    padding: 5px 30px; /*makes the buttons longer and shorter*/
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer; /*changes cursor when hovering*/
    border-radius: 16px; /*Determines how curved corners are*/
    font-weight: bold;
    transition: 0.4s;
}

.btnSearch {
    background-color: var(--LinkColor); /*Old color: Hazy Gray var(--LayoutBackgroundColor)*/
    color: var(--ButtonTextColor); /* color: var(--ButtonTextColor)*/
    border: none;
    padding: 3px 25px; /*makes the buttons longer and shorter*/
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 3px 2px;
    cursor: pointer; /*changes cursor when hovering*/
    border-radius: 3px; /*Determines how curved corners are*/
    font-weight: bold;
    transition: 0.4s;
    float: right;
    margin-left: 10px;
}

.btnSearch:hover {
    color: var(--ButtonTextColor);
    background-color: var(--ButtonHoverColor);
}

.inputSearch {
    width: 170px;
    float: left;
    font-size: 11px;
    margin-top: 6px;
    height: 28px;
}

.btn:hover {
    background-color: var(--ButtonHoverColor); /* old color: lightgray;*/
    color: var(--ButtonTextColor);
    /*color: var(--TextColor);*/
    font-weight: bold;
}

.btn2:hover {
    background-color: var(--ButtonHoverColor); /* old color: #9DD1DF;*/
    color: var(--ButtonTextColor);
    /*color: var(--TextColor);*/
    font-weight: bold;
}

.btnSubmit:hover {
    background-color: var(--ButtonHoverColor); /* old color: lightgray;*/
    color: var(--ButtonTextColor);
    /*color: var(--TextColor);*/
    font-weight: bold;
}

.btn3 {
    background-color: Var(--PERed); /*Main color: Red*/
    border: none;
    color: var(--TextColor); /*Text Color*/
    padding: 5px 30px; /*makes the buttons longer and shorter*/
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer; /*changes cursor when hovering*/
    border-radius: 16px; /*Determines how curved corners are*/
    font-weight: bold;
    transition: 0.4s;
}

.btn3:hover {
    background-color: lightcoral;
    color: var(--TextColor);
    font-weight: bold;
}

.btn3:disabled {
    background-color: Var(--DisabledButtonColor); /*Main color: Cyan blue*/
    border: none;
    color: var(--TextColor); /*Text Color*/
    padding: 5px 30px; /*makes the buttons longer and shorter*/
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer; /*changes cursor when hovering*/
    border-radius: 16px; /*Determines how curved corners are*/
    font-weight: bold;
    transition: 0;
}
    .btn3:disabled:hover {
        background-color: Var(--DisabledButtonColor); /*Main color: Cyan blue*/
    }

.login {
    text-align: left;
}

.statTabs {
    overflow: hidden;
    border: 1px solid Var(--StatsButtonColor);
    /*background-color: Var(--StatDisplayBox);
    min-height: 54px;*/
    display: inline-block;
}

.statTabLinks {
    background-color: Var(--StatDisplayBox);
    color: Var(--TextColor);
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    text-decoration: none !important;
    margin-right: 1px;
}

/* Change background color of buttons on hover */
.statTabLinks:hover {
    background-color: Var(--StatTabButtonColor);
    color: Var(--TextColor);
    outline: 1px solid Var(--TextColor);
}

.statTabLinkSelected {
    background-color: Var(--StatTabButtonColor);
    float: left;
    color: Var(--TextColor);
    font-weight: bold !important;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    margin-right: 1px;
    text-decoration: none !important;
}

.statTabLinkSelected:Hover{
    color: Var(--TextColor);
}

.statBox {
    background-color: var(--DashboardStatsColor); /*Old color: sky blue #9DD1DF*/
    /*border: solid;*/
    /*border-color: #D9D9D9;*/ /*Border color: Light Gray*/
    border-radius: 7px; /*determines how curved the corners are*/
    color: var(--ButtonTextColor); /*text color*/
    height: 150px; /*Defines fixed size of box*/
    width: 180px;
    padding: 1px 1px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    vertical-align: top;
    width: fit-content;
    min-width: 180px;
    align-content: center;
}

.statToolTip{
    display: inline-block;
    position: relative;
}

    .statToolTip .statToolTipText {
        visibility: hidden;
        width: 400px;
        background-color: var(--StatToolTipColor);
        color: white;
        padding: 5px 0;
        text-align: center;
        border-radius: 6px;
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -200px; /* Use half of the width (120/2 = 60), to center the tooltip */
    }

.statToolTip:hover .statToolTipText{
    visibility: visible;
}

/*For Tool Tip Arrow*/
.statToolTipText::after {
    content: " ";
    position: absolute;
    bottom: 100%; /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--LayoutBackgroundColor) transparent;
}


.statContainer {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.statTitle {
    font-size: 19px;
    margin: 0;
    min-height: 60px;
    align-content: center;
}
.statValue {
    font-weight: bold;
    font-size: 50px;
    text-align: center;
    width: fit-content;
    min-width: 200px;
}

.homeTitle {
}

/*Footer settings: 
    https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/

*/
.Body-Container {
    display: inline-block;
    height: fit-content;
    min-width: 1320px;
    max-width: 250vh;
    background-color: Var(--MainBackgroundColor);
    padding-right: var(--bs-gutter-x,.75rem);
    padding-left: var(--bs-gutter-x,.75rem);
    margin-right: auto;
    margin-top: 40px;
    width: 75%;
}

.backgroundMain {
    background-image: url("../images/PortalDashboardBackground.png");
}

.leftMargin{
    margin-left: 250px;
}

.Content-Wrapper{
    padding-bottom: 15.5rem !important;
}

.footer{
    background-color: var(--TextColor);
    color: white;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 15.5rem;
}

.footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footerbtn {
    color: white;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--TextColor);
    transition: 0.4s;
}

.footertitle {
    color: white;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--TextColor);
}

.footerbtn:hover {
    color: #4CADC7;
}

.footer_logo {
   max-width:180px;
   max-height: 35px;
   width: auto;
   height: auto;
}
/*Social classes*/
.social:after {
    content: "";
    clear: both;
    display: table;
}

.socialZone {
    float: left;
    /*width: 33.33%;*/
    padding: 5px;
}

.socialImage {
    max-height: 35px;
    max-width: 35px;
    width: auto;
    height: auto;
    position: static;
    background-color: white;
    border-radius: 48px;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
}

.fa-facebook{

}

.fa-facebook::before {
    content: "\f09a";
}

.fa-twitter{

}

.fa-twitter::before {
    content: "\f099";
}

.fa-linkedin{

}

.fa-linkedin::before {
    content: "\f0e1";
}


/*End Social*/

.tableScroll {
    margin-top: -20px;
    display: inline-block;
    overflow: auto;
    border-collapse: collapse;
    height: 500px;
}

.thDiv {
    margin-top: -40px;
    margin-bottom: 20px;
    position: absolute;
    min-width: 1296px;
    
}

.thNoBorder {
    border-width: 0px;
}

tr{
    border-width: 0.5px;
}

.callStatsInfoHeader{
    font-weight: bold;
    text-decoration: underline;
}
/*
tr:nth-child(even) {
    background: #EEE;
}
*/
.accountName {
    display: block;
    padding: .5rem 1rem;
    text-decoration: none !important;
    font-weight: bold;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    color: var(--LinkColor);
}

.NoUnderLine{
    text-decoration: none !important;
}

/*
For the Account Nav links (Profile, Email, Password) changing the text color.
The Settings for the links are generated so internal CSS is used to fix background color:
    @Areas/Identity/Pages/Account/Manage:
    ChangePassword.cshtml
    Email.cshtml
    Index.cshtml
*/
.nav-link {
    color: Var(--TextColor) !important;
    background-color: Var(--StatTabButtonColor) !important;
    margin-bottom: 1px;
}

    .nav-link.active {
        color: Var(--LayoutBackgroundColor) !important;
        background-color: Var(--StatOptionButton) !important; /*old coolor*/
        outline: solid 1px;
    }

    .nav-link:hover {
        color: Var(--TextColor) !important;
        background-color: Var(--StatOptionButtonSelected) !important;
    }

/* This controlls where the images for phone previews are grabbed.*/
.androidPreview {
    background: url('../images/androidHD.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 500px;
    height: 550px;
    text-align: center;
    margin-bottom: 25px;
}

.googlePreview {
    background: url('../images/googlePhone.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 500px;
    height: 550px;
    text-align: center;
    margin-bottom: 25px;
}

.iosPreview {
    background: url('../images/iphone_slide.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 500px;
    height: 550px;
    text-align: center;
    margin-bottom: 25px;
}

.phonePreviewBox{
    position: absolute;
    left: 1000px;
}
.phoneButtonContainer {
    display: inline-block;
    position: absolute;
    left: 100px;
}

.phoneButtons {
    background-color: Var(--StatOptionButton); /*Main color: Hazy Gray*/
    color: var(--LayoutBackgroundColor); /*text color*/
    padding: 4px 20px; /*makes the buttons longer and shorter*/
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer; /*changes cursor when hovering*/
    /*border-radius: 16px; /*Determines how curved corners are*/
    /*font-weight: bold; */
    transition: 0.2s;
    border: hidden;
    border-radius: 3px;
    font-size: 20px;
}

    .phoneButtons:hover {
        background-color: Var(--StatOptionButtonSelected); /*Background color: Light Gray*/
        color: var(--TextColor); /*text color*/
        padding: 4px 20px; /*makes the buttons longer and shorter*/
        text-align: center;
        text-decoration: none;
        display: inline-block;
        margin: 4px 2px;
        cursor: pointer; /*changes cursor when hovering*/
        /*border-radius: 16px; /*Determines how curved corners are*/
        /*font-weight: bold; */
        transition: 0.1s;
        border: hidden;
        border-radius: 3px;
        font-size: 20px;
    }

.phoneButtonsSelect {
    background-color: Var(--StatOptionButtonSelected); /*New color: skyblue; Old color: light Gray*/
    color: var(--TextColor); /*text color*/
    padding: 4px 20px; /*makes the buttons longer and shorter*/
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer; /*changes cursor when hovering*/
    /*border-radius: 16px; /*Determines how curved corners are*/
    /*font-weight: bold; */
    transition: 0.1s;
    border-radius: 3px;
    /*outline: 2px solid Var(--TextColor) !important;*/
    border: hidden;
    font-size: 20px;
}
/*END of Phone Previews*/


.phoneId {
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: large;
    position: absolute;
    left: 0;
    right: 0;
    top: 120px;
    margin-inline: auto;
    width: fit-content;
}

.phoneLocation {
    text-align: center;
    color: lightgray;
    font-size: small;
    position: absolute;
    left: 0;
    right: 0;
    top: 150px;
    margin-inline: auto;
    width: fit-content;
}

.PRSScore {
    width: 10%;
    text-align: center;
    color: var(--TextColor);
    font-weight: bold;
}

.BrandPRS {
    width: 100px;
    text-align: center;
    color: var(--TextColor);
    font-weight: bold;
}

.StatDateRange
{
    float: right;
    text-align: center;
    border-style: none none none solid;
    border-width: 2px;
    width: 30%;
    display: flex;
}

.StatBox {
    width: 75%;
}

.StatTable {
    column-count: 3;
    width: 75%;
    height: 150px;
}

.StatButton{
    width: 25%;
    float: right;
    height: 145px;
    border-style: none none none solid;
    border-width: 1px;
}

.StatDiv {
    border-style: none none solid none;
    border-width: 1px;
    height: 145px;
}

.flexRow{
    display: flex;
    flex-direction: row;
}

.dateLabel{
    min-width: 100px;
    margin-left:10px;
    margin-top: 8px;
    font-weight: bold;
}

.ReportBox{
    width: 100%;
    float: left;
}

.ReportMessage {
    color: #ef3038;
    text-decoration: underline;
    font: bold;
    visibility: hidden;
    transition: opacity 2s ease-in;
}

.StatToolTip {
    float: right;
    text-align: center;
}

.statToolTipTextBox {
    height: 500px;
}

.statToolTipButton {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.callStatsWidth{
    width: 700px;
}

.callStatsInfoBox{

}

.callStatsInfoIcon {
    float: right;
    margin-right: 20px;
    margin-bottom: 20px;
    width: 132px;
    height: 99px;
}

.callStatsInfoText {
    display: none;
    position: fixed;
    bottom: 70px;
    right: 130px;
    width: 400px;
    border: 2px solid;
    border-color: var(--LinkColor);
    margin-top: 130px;
    color: #3d5265;
    background-color: Var(--LayoutBackgroundColor);
}

.statOptionButton {
    background-color: var(--StatOptionButton); /*Main color: hazy Gray*/
    border: none;
    color: Var(--WhiteTextColor); /*text color*/
    padding: 4px 20px; /*makes the buttons longer and shorter*/
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer; /*changes cursor when hovering*/
    /*border-radius: 16px; /*Determines how curved corners are*/
    /*font-weight: bold; */
    transition: 0.2s;
    margin-right: 3px;
    font-weight: bold;
    height: 70%;
    margin-left: 5px;
    margin-top: 5px;
    border-radius: 3px;
}

    .statOptionButton:hover {
        background-color: Var(--StatOptionButtonSelected); /*Background color: Gray*/
        border: none;
        color: var(--TextColor); /*text color*/
        padding: 4px 20px; /*makes the buttons longer and shorter*/
        text-align: center;
        text-decoration: none;
        display: inline-block;
        border-radius: 3px;
        cursor: pointer; /*changes cursor when hovering*/
        /*border-radius: 16px; /*Determines how curved corners are*/
        /*font-weight: bold; */
        transition: 0.2s;
        margin-right: 3px;
        font-weight: bold;
        margin-top: 5px;
    }
.statOptionContainer {
    width: 100%;
    display: flex;
    flex-direction: row;
    background-color: Var(--StatTabButtonColor);
    min-height: 40px;
}
.statOptionButtonSelect {
    background-color: var(--StatOptionButtonSelected); /*Main color: hazy Gray*/
    color: var(--TextColor); /*text color*/
    padding: 4px 20px; /*makes the buttons longer and shorter*/
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer; /*changes cursor when hovering*/
    /*border-radius: 16px; /*Determines how curved corners are*/
    /*font-weight: bold; */
    transition: 0.2s;
    margin-right: 3px;
    /*outline: 2px solid Var(--TextColor) !important;*/
    font-weight: bold;
    border: none;
    height: 80%;
    margin-left: 5px;
    margin-top: 5px;
    border-radius: 3px;
}

.dropdownList {
    margin-left: 50px;
    margin-top: -40px;
}

/*CSS for the search select box*/
.dropdown-content {
    /*position: absolute; */
    position: absolute;
    width: 204px;
    background-color: Var(--DropDownListColor);
    overflow-x: hidden;
    overflow-y: scroll;
    max-height: 400px;
    outline: Var(--TextColor) solid 1px;
    z-index: 80;
    position: absolute;
}

    .dropdown-content a {
        background-color: Var(--DropDownListColor);
        color: var(--TextColor);
        padding: 10px 16px;
        text-decoration: none;
        display: block;
        border-bottom: 0.5px lightgrey solid;
    }

.dropdown a:hover {
    background-color: #ddd;
}

.show {
    display: block !important;
    
}

.dropdown-values {
    display: none;
}

.arrow {
    border: solid var(--TextColor);
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    margin-left: 5px;
    width: 10px;
    height: 10px;
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    margin-top: 8px;
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    margin-top: 5px;
    margin-bottom: 5px;
}

.SortButton {
    color: var(--TextColor);
    text-decoration: none;
    background-color: var(--MainBackgroundColor);
    border-radius: 3px;
}

    .SortButton:Hover {
        background-color: var(--HoverColor) !important; /*old color #9DD1DF*/
        color: var(--TextColor);
        outline: solid solid solid solid !important;
        outline-width: 5px !important;
        outline-style: solid !important;
        outline-color: var(--HoverColor) !important;
        outline-color: transparent;
        border-radius: 3px;
    }

.searchTab {
    width: 130px;
    height: 50px;
    font-size: 16px;
}

.BrandDetailsStatus{
    color: Var(--TextColor);
    font-weight: bold;
}

.StatusGreen {
    color: Var(--PEGreen) !important;
}

.StatusYellow {
    color: Var(--PEYellow) !important;
}

.PEGreen {
    background-color: Var(--PEGreen) !important;
    color: Var(--TextColor) !important;
}

.PEYellow {
    background-color: Var(--PEYellow) !important;
    color: Var(--TextColor) !important;
}

.PEOrange {
    background-color: Var(--PEOrange) !important;
    color: Var(--TextColor) !important;
}

.PERed {
    background-color: Var(--PERed) !important;
    color: Var(--LayoutBackgroundColor) !important;
}

.PEWhite {
    background-color: Var(--LayoutBackgroundColor) !important;
    color: Var(--TextColor) !important;
}

.SideList{
    min-height: 60vh;
    max-height: 80vh;
}

.Sidebtn {
    background-color: Var(--LayoutBackgroundColor); /*Main color: Hazy Gray*/
    border: none;
    color: var(--TextColor); /*text color*/
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 3px 2px;
    cursor: pointer; /*changes cursor when hovering*/
    /*font-weight: bold;*/
    transition: 0.4s;
    float: left;
    width: 230px;
}

.sideBody {
    background-color: Var(--LayoutBackgroundColor);
    width: 250px;
    float: left;
    height: 200vh;
    overflow: hidden;
    position: fixed;
    margin-top: 40px;
}

.sidebtnText {
    width: 149px;
    text-align: left;
    margin-left: 10px;
}

.sidebtnSelected {
    background-color: Var(--LayoutButtonhighlight);
    font-size: 17px;
    font-weight: bold;
}

.Sidebtn:hover {
    color: var(--LinkColor); /*Orange*/
    background-color: var(--LayoutButtonhighlight);
    transition: 0.3ms;
}

.SideLayoutViewPort{
    height: 100%;
    min-height: 500px;
}

.SideLogout {
    flex-grow: 1;
    top: 95%;
}

.SideSpacing{
    margin-top: 15px;
}

.SideLogoutSpacing {
    /*margin-top: 100%;*/
    position: fixed;
    bottom: 30px;
    left: 0px;
}

.SideThumb{
    width:200px;
    margin-left: 20px;
}

.SideThumb img {
    float: left;
    clear: left;
    width: 30px;
    height: 30px;
    display: block;
    top: 15px;
    right: 15px;
    margin-top: 15px;
}

.SideThumb p {
    display:block;
    float: right;
    margin-top: 20px;
}

.Font-Bold{
    font: bold !important;
}

.LoginWidth{
    width: 50%;
}
.LoginInputWidth{
    width: 75%;
}
.dropdownList ul {
    list-style-type: none;
    padding: 0; 
    margin: 0;
}
.dropdownContainer{
    display: inline-block;
}

.dropdownContainer img {
    padding: 10px 15px;
    border: none;
    cursor: pointer;
}

.dropdownContainer a{
    display: block;
    color: var(--DropDownListColor);
    text-decoration: none;
    padding: 10px 15px;
}

.dropdownContainer .dropdownList {
    display: none;
    position: absolute;
    background-color: Var(--StatsInfoSelectColor);
    min-width: none;
    box-shadow: 2px 2px 5px;
    z-index: 44;
}

.dropdownContainer:hover .dropdownList {
    display: block;
    
}

.dropdownContainer:hover {
    background-color: var(--LinkColor);
}

.dropdownContainer a:hover {
    background-color: var(--LinkColor);
}

.dropdownListOption{
    border: 1px solid;
    background-color: Var(--DisabledButtonColor);
    color: var(--TextColor);
}

.dropdownButton{
    height: 40px;
    width: 50px;
}

.PhoneDetailsDiv{
    min-height: 550px;
}

.PhoneDetailsLinks
{
    display: flex; 
}

.phoneDetailsBox {
    width: 100%;
    margin-bottom: 10px;
    margin-left: 20px;
    border: 1px solid;
    min-height: 72px;
    min-width: 200px;
}

.phoneDetailsCommentBox {
    width: 100%;
    border: 1px solid;
    margin-left: 10px;
    min-height: 72px;
}

.twoColumns {
    column-count: 2;
}

.threeColumns{
    column-count: 3;
}

.phoneDetailsColumns {
    margin-left:20px;
    margin-right:30px;
    min-height:150px;
}

.phoneDetailsBoxInfoBox {
    width: 700px;
    margin-right: 30px;
    float: left;
}

.hiddentext{
    visibility:hidden;
}

.displayBox{
    background-color: Var(--StatDisplayBox);
}

.displayGrey {
    background-color: Var(--StatDisplayBox);
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 25px;
}

.DisplayPhoneStatsHeader {
    text-align: center;
    margin-bottom: 0;
    color: Var(--TextColor);
}

.DisplayPhoneStatsValue{
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    color: Var(--TextColor);
}