Portal.css


@font-face {
    font-family: Bariol_Regular;
    src: url('../fonts/Bariol_Regular.otf');
    font-family: Bariol_Bold;
    src: url('../fonts/Bariol_Bold.otf');
    font-family: Bariol_Regular_Italic;
    src: url('../fonts/Bariol_Regular_Italic.otf');
    font-family: Bariol_Serif_Regular;
    src: url('../fonts/Bariol_Serif_Regular.otf');
}

/*=====================================     Dashboard     ===========================================*/
#Portal_Partial {
    width: 100%;
    background-color: #f6f7f9;
}


#Menu1:hover i {
    color: steelblue !important;
}

#Menu2:hover i {
    color: #B0916E !important;
}

#Menu3:hover i {
    color: red !important;
}

#Menu4:hover i {
    color: #9090c5 !important;
}

#Menu5:hover i {
    color: forestgreen !important;
}

#Menu8:hover i {
    color: gray !important;
}

#Menu9:hover i {
    color: whitesmoke !important;
}

#Menu10:hover i {
    color: goldenrod !important;
}
#Menu11:hover i {
    color: #6b93d6 !important;
}
#PortalAccountRepBox{
    text-align:center;
}
#PortalAccountRepBox h3 {
    font-size: 24px;
    font-weight: 500;
}
#PortalAccountRepBox h4 {
    font-size: 18px;
}
/*Portal create login*/
#portal_Header_Col1{
    display:inline-block;
    width:100%;
}
#PortalHome_Headers table {
    width: 100%;
}
#PortalHome_Headers table tr td {
    width: 32%;
}


    #PortalHome_Headers table tr td:nth-child(3) {
        float: right;
        text-align: right;
        margin-right: 100px;
    }

#PortalHome_Headers #welcome_text {
    margin-left: 0px;
}

#PortalHome_Headers p {
    margin-left: 0px;
}

#PortalHome_Right img {
    height: 130px;
}

.Dashboard_Underbox_text {
    font-size: 14px !important;
    margin-bottom: 0px;
    padding-bottom: 4px;
}



#DatagridPortalLoadDetails .dx-datagrid-header-panel {
    background-color: #f5f5f5 !important;
}

#ShowPortalInfo button {
    width: 220px;
    height: 45px;
    border: none;
    margin: 5px;
    background-color: #0d6efd;
    color: white;
    font-weight: 400;
    font-size: 1.25rem;
    font-size: 18px;
    border-radius: 5px;
}

    #ShowPortalInfo button:hover {
        background-color: #1964d4;
    }

#CreatePortalLogin {
    border: 2px solid gray;
    width: 300px;
    height: 340px;
}

    #CreatePortalLogin .form-floating {
        padding-left: 20px;
        padding-right: 20px;
    }

        #CreatePortalLogin .form-floating label {
            padding-left: 30px;
            padding-right: 20px;
        }

    #CreatePortalLogin button {
        margin: 20px;
        margin-top: 40px;
        width: 255px !important;
    }

#AccountDetails_Portal h3 {
    font-size: 25px;
    margin-top: 20px;
    margin-bottom: 20px;
}

#ShowPortalInfo a {
    font-size: 17px;
    padding-top: 80px !important;
}

#CustomerDetails h3 {
    padding-top: 20px;
    padding-bottom: 10px;
    font-size: 30px;
}

#CustomerDetails button {
    width: 220px;
    height: 45px;
    border: none;
    margin: 5px;
    background-color: #0d6efd;
    color: white;
    font-weight: 400;
    font-size: 1.25rem;
    font-size: 18px;
    border-radius: 5px;
}

    #CustomerDetails button:hover {
        background-color: #1964d4;
    }

.FlexCenter {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

#ClientProfitChart {
    width: 400px;
    flex-grow: 1;
}

#Portal_Sums {
    background-color: red;
}

.PortalSumBox {
    background-color: blue;
    height: 50px;
    width: 500px;
    margin: 5px;
    margin-bottom: 20px;
    margin-top: 20px;
    border: 1px solid black;
    border-radius: 5px;
}

#Portal_Links {
    padding-top: 20px;
    padding-bottom: 40px;
}

#PortalAccountTable {
    width: 100%;
}

    #PortalAccountTable tr {
        height: 50px;
    }

        #PortalAccountTable tr td, #PortalAccountTable tr th {
            padding-left: 50px;
            padding-right: 50px;
            color: black;
        }

#PortalAccountTable {
    font-size: 18px;
}

#PortalDetails_border {
    margin: 10px;
    padding-top: 20px;
}

#CustomerDetails {
    background-color: white;
    margin: 30px;
    border-radius: 15px;
}

@media only screen and (max-width: 800px) {
    #CustomerDetails {
        margin-left: 0px;
        margin-right: 0px;
    }

    #PortalAccountTable tr td, #PortalAccountTable tr th {
        padding-left: 0px;
        padding-right: 0px;
    }
}

[id^='Portal_Chart_'], [class^='Portal_Chart_'] {
    border-radius: 3px !important;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

#PortalLoads {
    width: 100%;
}
/*==========*/
#Customer_buttons_area button {
    background-color: white;
    border: 1px solid silver;
    width: 100px;
    height: 100px;
    border-radius: 90px;
}

    #Customer_buttons_area button:hover {
        background: rgba(108, 122, 137, 0.90);
        border: none;
    }

        #Customer_buttons_area button:hover > i {
            animation: bounceUp .55s ease;
            animation-iteration-count: 1;
        }

#Customer_buttons_area {
    display: flex;
    justify-content: space-evenly;
    background-color: #ff5722;
    padding-top: 70px;
    padding-bottom: 30px;
    margin-top: 50px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.customer_buttons {
    align-items: center;
    width: 200px;
}

    .customer_buttons h4 {
        font-size: 20px;
        font-weight: 500;
        color: #383838;
        margin-top: 20px;
    }

    .customer_buttons p {
        color: #383838;
        font-size: 15px;
    }

.customer_buttons {
    animation: MoveUp 2s ease;
    animation-fill-mode: forwards;
}

@keyframes bounceUp {
    15% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-35px);
    }

    100% {
        transform: translateY(0);
    }
}

#WelcomeBox {
    max-width: 500px;
    background: rgba(108, 122, 137, 0.70);
    border-radius: 40px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

    #WelcomeBox h3 {
        color: white;
        font-family: Bariol_Serif_Regular;
        font-size: 55px;
        font-weight: 500;
    }

.PortalView {
    display: flex;
    min-height: 100vh;
}

.sideMenu {
    background-color: #28282B;
    /*background-color: #f6f7f9;*/
    width: 250px;
    min-height: 1000px;
    border-right: 1px solid #000000;
    padding-top: 10px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    position: fixed;
    left: 0;
    height: 100%;
    z-index: 999;
    width: 220px !important;
}

    .sideMenu p {
        font-weight: bold;
        color: #9a9ba7;
        font-size: 12px;
        margin-top: 15px;
        margin-bottom: 0px;
        margin-left: 15px;
    }

.PortalSideBtns {
    padding-left: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
}

    .PortalSideBtns i {
        color: #9a9ba7;
        margin-right: 10px;
    }

    .PortalSideBtns h3 {
        display: inline;
        font-size: 14px;
        color: #FFF;
        font-weight: 400;
    }

    .PortalSideBtns:hover {
        cursor: pointer;
        background-color: #36454F !important;
        /*
        border: 2px solid lightgray !important;
        cursor: pointer;
        background-color: #d0d7e1 !important;
        */
    }

.PortalSideSelected {
    background-color: #36454F;
}

.MainView {
    float: left;
    background-color: #f6f7f9;
    width: 100%;
    padding-left: 20px;
}

    .MainView p {
        margin-left: 10px;
        color: #9a9ba7;
        font-size: 16px;
        margin-top: -3px;
        padding-left: 2px;
    }

#Portal_Image {
    height: 120px;
    width: 120px;
    float: left;
    margin: 10px;
    margin-bottom: 0px;
    border: none;
}

    #Portal_Image label {
        background-color: white;
        width: 100%;
        height: 100%;
        cursor: pointer;
        border: 1px solid silver;
        border-radius: 5px;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    }

#Profile_Picture {
    width: 100%;
    height: 100%;
    margin-top: -70px;
    border-radius: 5px;
}

#Portal_Image label i {
    margin-left: 50px;
    margin-top: 60px;
}

#Portal_Image > input {
    display: none;
}

#welcome_text {
    color: black;
    margin-left: 10px;
    margin-top: 30px;
    font-size: 24px;
    font-weight: 500;
}

.DashboardChartArea {
    width: 100%;
    height: auto;
    margin-left: 10px;
    padding-right: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}

    .DashboardChartArea .ChartBox {
        width: 32.8%;
        border: 1px solid lightgray;
        float: left;
        background-color: white;
        min-width: 300px;
        margin-bottom: 15px;
    }

.flexDiv {
    display: flex;
    width: 100%;
    margin-left: 10px;
    margin-top: 25px;
    margin-bottom: 10px;
    padding-right: 100px;
}

    .flexDiv h3 {
        text-align: center;
    }

    .flexDiv h2 {
        text-align: center;
    }

.float_box {
    border: 1px solid lightgray;
    flex: 1;
    min-height: 130px;
    margin-right: 10px;
    border-radius: 5px;
    min-width: 110px;
    /*box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;*/
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.float_box_right {
    border: 1px solid lightgray;
    margin-left: 50px;
    flex: 1;
    border-radius: 5px;
    min-width: 110px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

    .float_box h3, .float_box_right h3 {
        color: #484848;
        font-size: 20px;
        margin-top: 26px;
        font-weight: 500;
    }

    .float_box h2, .float_box_right h2 {
        font-weight: bold;
        font-size: 26px !important;
        display: inline;
        padding-left: 3px;
    }

    .float_box i, .float_box_right i {
        position: relative;
        top: -8px;
        color: #9a9ba7;
    }

    .float_box:hover, .float_box_right:hover {
        background-color: #edeff3 !important;
    }

#Portal_Chart_Recent_Bar {
    border: 1px solid lightgray;
    color: red;
    width: 30%;
    float: left;
    margin: 10px;
    background-color: white;
    min-width: 300px
}

.Portal_Chart_Year_Bar:hover, .Portal_Chart_Line:hover {
    cursor: pointer;
}

#Portal_RepButton {
    height: 31px;
    border: 2px solid rgb(163, 113, 130);
    color: rgb(163, 113, 130);
    background-color: transparent;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 15px;
    border-radius: 5px;
}
    #Portal_RepButton:hover {
        font-weight: bold;
        border: 2px solid rgb(119, 182, 217);
        color: rgb(119, 182, 217);
    }
/*=====================================     Loads     ===========================================*/
#CustomerLoads {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.MainContentView {
    float: left;
    background-color: #f5f5f5;
    width: 100%;
}

    .MainContentView:not(#RetailHomeContentView) .dx-row:hover {
        cursor: pointer !important;
    }

    .MainContentView .dx-header-row td[aria-sort="ascending"], .MainContentView .dx-header-row td[aria-sort="descending"] {
        background-color: white !important;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
    }

    .MainContentView .dx-datagrid-action:hover, .MainContentView .dx-treelist-action:hover {
        background-color: #FF5733 !important;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        z-index: 99;
    }

    .MainContentView .dx-toolbar-items-container {
        background-color: #f5f5f5;
    }

    .MainContentView .dx-datagrid-scrollable-simulated, .MainContentView .dx-treelist-scrollable-simulated {
        height: 45px;
        margin: 0px;
        padding: 0px;
        border-bottom: 1px solid black;
    }

    /*Tree List*/
    .MainContentView .dx-treelist-header-panel {
        background-color: #f5f5f5;
    }

    .MainContentView .dx-row {
        height: 30px;
    }

    .MainContentView .dx-treelist .dx-row > td {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .MainContentView .dx-treelist-empty-space {
        width: 18px;
    }
    /*============*/
    .MainContentView .dx-datagrid-headers, .MainContentView .dx-treelist-headers {
        height: 45px;
        margin: 0px;
        padding: 0px;
        border-top: none;
        border-bottom: 1px solid black;
    }

    .MainContentView .dx-header-row {
        height: 45px;
        margin: 0px;
        padding: 0px;
    }

    .MainContentView .dx-datagrid-action, .MainContentView .dx-treelist-action {
        padding: 0px;
        height: 45px;
    }

    .MainContentView .dx-datagrid-headers .dx-datagrid-table td, .MainContentView .dx-treelist-headers .dx-treelist-table td {
        margin: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .MainContentView .dx-show-invalid-badge {
        margin: 0px;
        padding: 0px;
        height: 35px;
    }

.TopOptions {
    background-color: white;
    height: 65px;
    padding-left: 40px;
    padding-top: 10px;
}

    .TopOptions h3 {
        font-size: 14px;
        font-weight: bold;
        margin: 0px;
        padding: 2px;
    }

    .TopOptions p {
        font-size: 14px;
        font-weight: bold;
        margin: 0px;
        padding: 2px;
    }

    .TopOptions select {
        width: 180px;
        height: 30px;
        border-radius: 4px;
        padding-left: 5px;
        padding-right: 15px;
        border: 1px solid lightgray;
    }

.SecondOptions {
    height: 16px;
    border-top: 1px solid lightgray;
}

#AccountSearchBox i:hover, .GridSearchBox i:hover {
    cursor: pointer;
}

#Accounts_dropdown select {
    background-color: white;
}

#AccountSearchBox {
    float: left;
    z-index: 99;
    position: absolute;
    margin-left: 45px;
    margin-top: 20px;
    min-width: 300px;
}

    #AccountSearchBox input, .GridSearchBox input {
        width: 180px;
        height: 30px;
        border-radius: 3px;
        padding-left: 5px;
        padding-right: 15px;
        border: 1px solid lightgray;
    }

    #AccountSearchBox i, .GridSearchBox i {
        color: gray;
        margin-left: -20px;
    }

    #AccountSearchBox p, .GridSearchBox p {
        float: left;
        padding-top: 7px;
        padding-right: 8px;
    }

/*=====================================     Forms     ===========================================*/

.ESG_Black_Select {
    width: 100px;
    height: 30px;
    background-color: #28282B;
    color: white;
    border-radius: 6px;
    font-size: 17px;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin-left: 10px;
    border: none;
}

    .ESG_Black_Select:hover, .ESG_Black_Select option:hover {
        cursor: pointer;
    }
/*Contract Template*/
.Contract_Template {
    width: 800px;
    padding: 20px;
    border: 1px solid gray;
    background: white;
}

    .Contract_Template img {
        width: 100%;
        margin-bottom: 20px;
    }

.Thick_Divider {
    width: 100%;
    border-bottom: 8px solid black;
    margin-bottom: 4px;
}

.Contract_Template h3 {
    font-weight: 500;
    font-size: 21px;
    margin-top: 7px;
    font-family: Arial;
    font-weight: 600;
}

.Contract_Template table {
    width: 100%;
}

    .Contract_Template table tr {
        padding: 2px;
    }

        .Contract_Template table tr td {
            font-family: Arial Narrow;
            border: 1px solid black;
            padding: 4px;
            font-size: 14px;
            font-weight: 500;
        }

        .Contract_Template table tr th {
            font-family: Arial Narrow;
            border: 1px solid black;
            padding: 4px;
            font-size: 14px;
            font-weight: bold;
        }

.Contract_Template p {
    color: black;
    font-size: 11px;
    margin: 0px;
    padding: 0px;
}



/*=====================================     Environment     ===========================================*/
.MainView .dx-visibility-change-handler svg {
    width: 100%;
}

#popupEnvironmentDetails h2 {
    font-family: Arial;
    font-size: 26px;
}

#popupEnvironmentDetails table {
    width: 100%;
}

    #popupEnvironmentDetails table td {
        text-align: right;
    }

popupEnvironmentDetails table th {
    padding-left: 33px;
}

#portalEnvConversion_table {
    table-layout: fixed;
}

    #portalEnvConversion_table td {
        width: 100px;
    }

.Env_Unit {
    float: right;
    width: 70px !important;
}

#ExportArea {
    float: right;
    margin-right: 100px;
    padding-left: 10px;
    margin-top: 40px;
}

#Environment_Export {
    background-color: white;
    color: black;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border: none;
    padding: 8px;
    padding-left: 15px;
    padding-right: 15px;
    display: inline;
    margin-right: 0px;
    border: 1px solid silver;
}

    #Environment_Export i {
        margin-right: 10px;
    }

#Env_Export_Drop {
    display: inline;
    margin-left: 0px;
    float: right;
    border: none;
    padding: 8px;
    background-color: white;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border: 1px solid silver;
}

    #Env_Export_Drop i {
        color: black;
    }

#ESG_Unit_Select {
    height: 30px;
    width: 80px;
    margin-left: 12px;
    float: right;
    margin-right: 100px;
    border-radius: 5px;
    padding-left: 5px;
    background-color: white;
    border: 1px solid gray;
}

#Industry {
    background-color: white;
}

#ESG_Unit_Select:hover {
    cursor: pointer;
}

#ESG_TimeSelector p {
    display: inline;
}

#ESG_Quarter_Start {
    height: 30px;
    width: 100px;
    margin-left: 8px;
    border-radius: 5px;
}

#ESG_Quarter_Caption {
    font-size: 15px;
}

#ESG_TimeSelector ESG_Unit_Select option {
    height: 50px !important;
}

#ESG_Time_Select {
    width: 100px;
    height: 30px;
    background-color: #28282B;
    color: white;
    border-radius: 5px;
    font-size: 17px;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin-left: 10px;
    border: none;
    float:left;
}

    #ESG_Time_Select:hover, #ESG_Time_Select option:hover {
        cursor: pointer;
    }

.Portal_Chart_Line {
    display: none;
}
/*=====================================     Social     ===========================================*/



/*=====================================     Governance     ===========================================*/

/*=====================================     Milestones     ===========================================*/

/*NEW================================================*/
#Milestones_Titles {
    position: absolute;
    color: white;
    left: 0;
    width: 100%;
    margin-top: 30px;
    z-index: 0;
    margin-left: 220px;
    padding-right: 220px;
}

    #Milestones_Titles h3 {
        font-size: 40px;
        font-weight: bold;
        padding-bottom: 0px;
        margin-bottom: 0px;
        text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black;
    }

    #Milestones_Titles h4 {
        font-size: 24px;
        margin-top: 0px;
        padding-top: 0px;
        font-weight: bold;
        text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black;
    }

.TierDesc img {
    width: 75px; /*width of your image*/
    height: 75px; /*height of your image*/
    margin-top: 8px;
}

.TierDesc:hover {
    cursor: pointer;
    border: 2px solid orange;
}

.TierDesc {
    display: inline-block;
    height: 200px;
    width: 130px;
    margin: 10px;
    margin-top: 20px;
    border-radius: 20px;
    color: white;
    border: 2px solid lightgray;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

    .TierDesc h3 {
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        margin-top: 5px;
    }

    .TierDesc p {
        font-size: 12px;
        margin: 0px;
        padding: 2px;
    }

#Milestones_Right {
    display: inline-block;
    width: 680px;
}

    #Milestones_Right #t1 {
        /*background-color: #1f6d05;*/
        background-color: #A0B2C6;
        /*background-image: linear-gradient(315deg, gray 0%, #A0B2C6 74%);*/
    }

    #Milestones_Right #t2 {
        background-color: #D4AF37;
        /*background-image: linear-gradient(315deg, #FFD700 0%, #D4AF37 74%);*/
    }

    #Milestones_Right #t3 {
        background-color: silver;
        /*background-image: linear-gradient(315deg, #acacac 0%, silver 74%);*/
    }

    #Milestones_Right #t4 {
        background-color: #7D6038;
        /*background-image: linear-gradient(315deg, #e07f1f 0%, #7D6038 74%);*/
    }

#Milestones_Area2 {
    width: 100%;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(55,58,54,1) 47%);
}

    #Milestones_Area2 h2, #Milestones_Area2 h3 {
        color: white;
    }

#Milestones_Top {
    width: 100%;
}

    #Milestones_Top img {
        width: 100%;
        min-height: 150px;
        margin-top: -180px;
    }

#Milestones_Middle {
    text-align: center;
    overflow-y: auto;
}

    #Milestones_Middle h2 {
        color: white;
    }

#Milestones_Left {
    padding-bottom: 90px;
    margin-right: 200px;
    display: inline-block;
}

    #Milestones_Left img {
        height: 300px;
        width: 300px
    }

#Milestones_Bottom {
    width: 100%;
    margin-top: 50px;
    height:100%;
    margin-bottom:-100px;
}

.Milestone_Block_Data {
    margin-top: 25px;
    margin-bottom: 0px;
    width: 100px;
    height: 90px;
}

    .Milestone_Block_Data h3 {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 0px;
    }

    .Milestone_Block_Data p {
        margin-top: 0px;
        font-size: 12px;
        color: #9a9ba7;
        margin-bottom: 0px;
        padding-bottom: 0px;
    }

#Milestone_Map {
    width: 1200px;
    height: 280px;
    padding-left: 10px;
    padding-right: 10px;
    overflow: auto;
}

.Milestone_Block {
    float: left;
}

.MilestoneMarker .Marker_Circle {
    width: 50px;
    height: 50px;
    border-radius: 90px;
    z-index: 99;
    position: relative;
}

    .MilestoneMarker .Marker_Circle i {
        color: white;
        margin-top: 25px;
        z-index: 99;
    }

.MilestoneMarker .Marker_Circle_Small {
    width: 15px;
    height: 15px;
    background-color: gray;
    border-radius: 90px;
    z-index: 99;
    position: relative;
    margin: 5px;
}

.Milestone_Block .MilestoneMarker {
    position: relative;
    z-index: 99;
}

.Marker_Line {
    height: 20px;
    width: 40px;
    border-bottom: 2px dashed transparent;
    float: left;
}

#marker1 {
    padding-top: 75px;
}

#mline_1 {
    width: 150px;
    transform: rotate(-30deg);
    margin-top: 135px;
    margin-left: -60px;
    margin-right: -50px;
}

#marker2 {
    padding-top: 50px;
}

#mline_2 {
    width: 110px;
    transform: rotate(35deg);
    margin-top: 130px;
    margin-left: -50px;
    margin-right: -80px;
}

#marker3 {
    padding-top: 65px;
}

#mline_3 {
    width: 90px;
    transform: rotate(-15deg);
    margin-top: 150px;
    margin-left: -50px;
    margin-right: -80px;
}

#marker4 {
    padding-top: 90px;
}

#mline_4 {
    width: 90px;
    transform: rotate(-30deg);
    margin-top: 110px;
    margin-left: -50px;
    margin-right: -80px;
}

#marker5 {
    padding-top: 40px;
}

#mline_5 {
    width: 150px;
    transform: rotate(35deg);
    margin-top: 125px;
    margin-left: -55px;
    margin-right: -80px;
}

#marker6 {
    padding-top: 65px;
    margin-left: 20px;
}

#mline_6 {
    width: 110px;
    transform: rotate(-30deg);
    margin-top: 145px;
    margin-left: -55px;
    margin-right: -80px;
}

#marker7 {
    padding-top: 75px;
}

#mline_7 {
    width: 100px;
    transform: rotate(-20deg);
    margin-top: 100px;
    margin-left: -55px;
    margin-right: -80px;
}

#marker8 {
    padding-top: 40px;
}

#mline_8 {
    width: 130px;
    transform: rotate(30deg);
    margin-top: 115px;
    margin-left: -55px;
    margin-right: -80px;
}

#marker9 {
    padding-top: 67px;
    margin-left: 15px;
}

#mline_9 {
    width: 140px;
    transform: rotate(-30deg);
    margin-top: 112px;
    margin-left: -55px;
    margin-right: -80px;
}

#marker10 {
    padding-top: 30px;
    margin-left: 30px;
}

#Milestones_Left h2, #Milestones_Right h2, #Milestones_Bottom h2 {
    font-size: 30px;
    font-family: Arial;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
}

.Divider1, .Divider2, .Divider3 {
    height: 20px;
    width: 2px;
    background-color: white;
    margin-top: -12px;
    float: left;
}

.Divider1 {
    margin-left: 155px;
}

.Divider2 {
    margin-left: 155px;
}

.Divider3 {
    margin-left: 155px;
}

.Milestones_Gauges {
    height: 200px;
}

.Line_Gauge {
    height: 3px;
    width: 100%;
    margin-top: 1px;
    background-color: white;
}

.Line_GaugeArea {
    border-left: 2px solid white;
    border-right: 2px solid white;
    height: 40px;
    padding: 17px;
    padding-left: 0px;
    padding-right: 0px;
    margin: 40px;
    margin-left: 40px;
    margin-right: 40px;
}

.Milestones_Gauges p {
    display: inline-block;
    padding: 0px;
    margin: 0px;
    float: left;
    color: silver;
    font-size: 15px;
    margin-top: -30px;
    margin-left: 0px;
}

.GaugeWhiteCircle {
    background-color: white;
    padding: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    display: block;
    float: left;
    border-radius: 90px;
    margin-top: -35px;
}

.DividerReset {
    height: 1px;
    width: 100%;
    float: left;
}

#aav {
    color: red;
}
/*================================================*/
.Milestone_LineMarker {
    margin-top: 26px;
    width: 14px;
    height: 76px;
    background: #ff5722;
    position: relative;
}

    .Milestone_LineMarker:after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 0;
        height: 0;
        border-top: 7px solid white;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
    }

    .Milestone_LineMarker:before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 0;
        border-top: 7px solid transparent;
        border-right: 7px solid white;
        border-left: 7px solid white;
    }

#MilestonePointsRight .Milestone_LineMarker {
    margin-right: 10px;
    margin-left: 0px;
}

#MilestonePointsLeft .Milestone_LineMarker {
    margin-left: 10px;
    margin-right: 0px;
}














#Milestones_Banner {
    position: relative;
    margin: 0 auto 20px;
    padding: 10px 40px;
    text-align: center;
    background-color: #ff5722;
    width: 260px;
    color: white;
    font-size: 30px;
    font-weight: bold;
}

    #Milestones_Banner::before, #Milestones_Banner::after {
        content: '';
        width: 80px;
        height: 100%;
        background-color: #ee3900;
        /* position ribbon ends behind and slightly lower */
        position: absolute;
        z-index: -1;
        top: 20px;
        /* clip ribbon end shape */
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 25% 50%);
        /* draw and position the folded ribbon bit */
        background-image: linear-gradient(45deg, transparent 50%, #012f3f 50%);
        background-size: 20px 20px;
        background-repeat: no-repeat;
        background-position: bottom right;
    }

    #Milestones_Banner::before {
        left: -60px;
    }

    #Milestones_Banner::after {
        right: -60px;
        transform: scaleX(-1); /* flip horizontally */
    }






#milestones_subTitle i:hover {
    cursor: pointer;
}

.Title_Strip p {
    display: inline;
    margin-top: 15px;
    margin-right: 25px;
    margin-left: 5px;
}

.circle_small {
    height: 15px;
    width: 15px;
    border-radius: 30px;
    margin-left: 10px;
}

#Milestones_Area p {
    font-size: 12px;
    color: #9a9ba7;
}

.Title_Strip {
    height: 40px;
    width: 98%;
    margin: 10px;
    margin-bottom: 50px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    border: 1px solid lightgray;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    /*

        
    border: 1px solid lightgray;
    margin-left: 50px;
    flex: 1;
    border-radius: 5px;
    min-width: 110px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    */
}

.Milestone_hover_area {
    padding: 5px;
}

    .Milestone_hover_area:hover {
        background-color: rgba(192,192,192,.6);
        border-radius: 8px;
        cursor: pointer;
    }

.Marker_Circle:hover {
    cursor: pointer;
    background-color: #6eb437 !important;
    background-image: none !important;
    animation-name: bounceFrames;
    animation-iteration-count: 1;
    animation-duration: 1.2s;
    position: relative;
    z-index: 99;
}

#Milestones_Area {
    text-align: center;
    width: 100%;
}


.Milestone_point:hover .Milestone_LineMarker, .Milestone_point:hover .Milestone_LineMarker::before {
    background-image: none !important;
    background-color: lightsteelblue !important;
    border-top-color: lightsteelblue;
}



.milestone_post {
    /*background-color: #cd7f32;*/
    width: 15px;
    height: 84px;
    border-radius: 40px;
    margin-top: -8px;
}

#MilestonePointsLeft .Milestone_point {
    opacity: 0;
    width: 220px;
    height: 100px;
    margin-bottom: 50px;
    margin-top: 50px;
    display: flex;
    animation-name: fadeInOpacity1;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2.8s;
    animation-fill-mode: forwards;
}

#MilestonePointsRight .Milestone_point {
    opacity: 0;
    width: 220px;
    height: 100px;
    margin-bottom: 50px;
    margin-top: 50px;
    display: flex;
    animation-name: fadeInOpacity1;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

.Milestone_hover:hover {
    background-color: silver;
    cursor: pointer;
    opacity: 80%;
}

@keyframes fadeInOpacity1 {
    0%,50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInOpacity2 {
    0%, 50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes bounceFrames {
    0%, 10%, 40%, 70%, 90% {
        transform: translateY(0);
        position: relative;
        z-index: 99;
    }

    30% {
        transform: translateY(-30px);
    }

    50% {
        transform: translateY(-15px);
    }
}

#MilestonePointsLeft {
    width: 210px;
    margin-left: -195px;
}

#MilestonePointsRight {
    width: 210px;
    margin-top: -675px;
    margin-left: 195px;
}
/*
#MilestonePointsLeft .Milestone_LineMarker {
    height: 15px;
    width: 15px;
    background-color: black;
    margin-left: 10px;
    border-radius: 30px;
    margin-top: 20px;
    opacity: 60%;
}
#MilestonePointsRight .Milestone_LineMarker {
    height: 15px;
    width: 15px;
    background-color: dimgray;
    margin-right: 10px;
    border-radius: 30px;
    margin-top: 20px;
    opacity: 60%;
}
    */
#MilestonePointsLeft .MilestonePointData {
    width: 125px;
    float: left;
    height: 100%;
    margin: 0px;
    padding: 0px;
    padding-right: 2px;
    animation-name: fadeInOpacity2;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 4.5s;
}

#MilestonePointsRight .MilestonePointData {
    width: 125px;
    float: right;
    height: 100%;
    margin: 0px;
    padding: 0px;
    padding-left: 10px;
    animation-name: fadeInOpacity2;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 5s;
}

.MilestonePointData h3 {
    font-size: 18px !important;
    text-align: left;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
    padding-bottom: 2px;
}

.MilestonePointData p {
    margin: 0px;
    padding: 0px;
    text-align: left;
    font-size: 10px;
}

#MilestonePointsLeft .MilestonePointCircle {
    width: 50px;
    height: 50px;
    float: right;
    border-radius: 90px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.MilestonePointCircle i {
    margin-top: 24px;
    color: white;
}

#MilestonePointsRight .MilestonePointCircle {
    width: 50px;
    height: 50px;
    border-radius: 90px;
    float: left;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

















#header_img {
    display: block;
    width: 100%;
}

    #header_img img {
        display: block;
        width: 100%;
        height: 300px;
        margin-top: 40px;
        border-bottom: 3px solid lightblue;
    }

    #header_img h1 {
        top: 120px;
        left: 50%;
        font-family: Bariol_Bold;
        font-size: 70px;
    }

#Milestone_Goals {
    border: 2px solid black;
    border-radius: 10px;
    padding: 10px;
    background-color: #edeff3;
    width: 500px;
    float: left;
    animation-name: ShowMilestones;
    animation-duration: 11s;
    animation-fill-mode: forwards;
}

    #Milestone_Goals h2 {
        font-size: 35px;
    }

    #Milestone_Goals h3 {
        font-size: 20px;
    }

#Milestone_Goal_Marker {
    width: 50px;
    float: right;
}

#Milestone_Area {
    width: 100%;
    /*
    animation-name: example;
    animation-duration: 10s;
    animation-fill-mode: forwards;
        */
}

#Milestone_Animation {
    position: absolute;
    margin-top: 310px;
    width: 550px;
    margin-left: -32%;
    top: 0px;
    animation-name: example;
    animation-duration: 10s;
    animation-fill-mode: forwards;
}

@keyframes example {
    0% {
        margin-left: -30%;
    }

    25% {
        margin-left: -15%;
        margin-top: 320px;
    }

    50% {
        margin-left: 4%;
        margin-top: 340px;
    }

    75% {
        margin-left: 25%;
        margin-top: 280px;
    }

    100% {
        margin-left: 35%;
        margin-top: 300px;
        margin-top: 230px;
    }
}

@keyframes ShowMilestones {
    0% {
        opacity: 0%;
    }

    85% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }
}
/*=====================================     Settings     ===========================================*/
.Portal_Tabs {
    margin-left: 30px;
}

    .Portal_Tabs button {
        z-index: 1;
        padding-left: 18px;
        padding-right: 18px;
        padding-top: 5px;
        height: 32px;
        border: 1px solid silver;
        border-bottom: none;
        margin-left: 1px;
        margin-right: 1px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        margin-bottom: 0px;
    }

#Portal_Details, #Portal_Settings, #Portal_Business {
    border: 1px solid white;
    z-index: 2;
    margin-top: -1px;
    background-color: white;
    margin-left: 30px;
    margin-right: 30px;
    padding: 30px;
}

    #Portal_Details h3, #Portal_Settings h3, #Portal_Business h3 {
        font-size: 22px;
    }

    #Portal_Details table:not(.dx-datagrid-table) {
        width: 90%;
    }

.Tab_Active {
    background-color: white;
    border-top: 3px solid orange !important;
}

.Portal_Tabs button:hover {
    background-color: white;
}

#Portal_Details table tr td input, #Portal_Settings table tr td input, #Portal_Business table tr td input {
    border: 1px solid silver;
    border-radius: 6px;
    min-width: 150px;
    height: 30px;
}

#Portal_Business table tr td select {
    border: 1px solid silver;
    border-radius: 6px;
    width: 165px;
    height: 30px;
}

    #Portal_Business table tr td select:hover {
        cursor: pointer;
    }

#Portal_Details table:not(.dx-datagrid-table) tr td {
    float: left;
    min-width: 150px;
}

#Portal_Details table:not(.dx-datagrid-table) tr th {
    float: left;
    min-width: 150px;
}

#Portal_Details #Portal_Details_Address_table tr td input {
    margin-right: 20px;
    width: 250px;
}



#Portal_Details h4, #Portal_Settings h4, #Portal_Business h4 {
    font-size: 18px;
    font-weight: bold;
}

.Portal_Settings_Save {
    float: right;
    margin-top: -20px;
    border: 1px solid gray;
    border-radius: 6px;
    height: 36px;
    width: 90px;
    background-color: darkorange;
    color: white;
    margin-bottom: -5px;
    margin-top: 0px;
    font-weight: bold;
}

    .Portal_Settings_Save:hover {
        background-color: limegreen;
        border: 2px solid gray;
    }

    .Portal_Settings_Save i {
        margin-right: 4px;
    }

#Portal_btnPassword {
    width: 130px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid gray;
    color: white;
    background-color: darkorange !important;
}

    #Portal_btnPassword:hover {
        font-weight: bold;
    }




#Portal_ContactTable {
    width: 90%;
}

#PortalContactsAdd_btn {
    height: 50px;
    width: 150px;
    background-color: transparent;
    border-radius: 5px;
    border: 2px solid silver;
    color: gray;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px;
}

    #PortalContactsAdd_btn:hover {
        background-color: orange;
        color: white;
        border: none;
    }

    #PortalContactsAdd_btn i {
        color: forestgreen;
    }

.PortalContactArea {
    overflow: hidden;
}

.PortalContactTables {
    margin: 20px;
    height: 200px;
}

    .PortalContactTables tr td input {
        width: 250px;
    }

.PortalContactBox {
    overflow: hidden;
    width: 45%;
    float: left;
}

    .PortalContactBox button {
        margin-left: 450px;
        background-color: transparent;
        border: none;
    }

        .PortalContactBox button:hover {
            color: red;
        }

.AccountCheckArea p {
    display: inline-block;
    color: dimgray;
    padding-right: 15px;
    margin-right: 10px;
    margin-left: 0px;
}

.AccountCheckArea input {
    margin-right: 2px;
    height: 18px;
    width: 18px;
}


/*=====================================     Support     ===========================================*/
/*=====================================     Mobile     ===========================================*/
.PortalMenuDiv_mobile {
    background-color: #f6f7f9;
}

#Portal_Mobile_Menu {
    text-decoration: none;
    border: none;
    background-color: inherit;
    width: 80px;
    height: 70px;
}

@media only screen and (max-width: 800px) {
    .DashboardChartArea {
        padding-right: 0px;
        height: auto;
    }

        .DashboardChartArea .ChartBox {
            width: 90%;
            margin-bottom: 20px;
        }

    #Milestones_Left {
        padding: 0px;
        float: none;
        margin: 0px;
        width: 100%;
    }

        #Milestones_Left img {
            display: flex;
            align-items: center;
            justify-content: center;
        }

    #ExportArea {
        display: none;
    }

    #ESG_Unit_Select {
        margin-top: 10px;
    }
    #Portal_Details{
        min-width:1000px;
    }
    .sideMenu {
        display: none;
    }
    .flexDiv {
        display: block;
        padding: 0px;
        padding-right: 40px;
    }

    .float_box {
        margin: 0px;
        margin-bottom: 10px;
    }

    #ESG_Time_Select {
        margin-top: 10px;
    }
    #PortalHome_Headers table tr td:nth-child(1) {
        display:block;
        width: 100%;
    }
    #PortalHome_Headers table tr td:nth-child(2) {
        display: block;
        width: 100%;
        margin-top:40px;
    }

    #PortalHome_Headers table tr td:nth-child(3) {
        display: none;
    }

    #Portal_Chart_Recent_Bar {
        margin: 10px !important;
    }

    .float_box_right {
        height: 150px;
        min-width: 110px;
        margin: 0px;
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .float_box {
        width: 100%;
    }

    #div_layout_search {
        float: none;
        text-align: center;
        margin-top: 10px;
        margin-left: 40px;
        margin-right: 0;
    }


    .MainView p {
        margin: 0px;
        margin-left: 10px;
    }
    /*Test*/
    .sideMenu {
        width: 100% !important;
    }

    .PortalMenuDiv_mobile {
        display: block !important;
    }

    #LogoSide {
        display: none;
    }

    /*Milestones*/
    #Milestones_Titles {
        margin: 0px;
        padding: 0px;
    }

        #Milestones_Titles h3 {
            font-size: 22px;
            padding: 0px;
            margin: 0px;
        }

        #Milestones_Titles h4 {
            margin: 0px;
            padding: 0px;
            display: none;
        }

    #Milestones_Right {
        margin-left: 10px;
    }

    #Milestones_Titles {
        margin-top: 10px;
    }

    #Milestones_Top img {
        width: 100%;
        min-height: 250px;
        margin-top:20px;
    }
}

.Milestone_Marker_rank {
    width: 60px;
    height: 60px;
    margin-left: -5px;
    margin-top: -5px;
}

#Ranking {
    margin-left: 40px;
    margin-top: 10px;
    float: left;
}

    #Ranking img {
        width: 120px;
    }

#PortalHomeWelcome {
    width: auto;
    margin-top: 30px;
    margin-bottom: 20px;
    float: left;
}

#welcome_text2 {
    color: black;
    margin-top: 30px;
    font-size: 24px;
    font-weight: 500;
    margin-left: 0px;
    margin-top: 0px;
}

#welcome_text_small {
    margin-left: 0px;
}