@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');
}

/*font-family: 'Rubik',sans-serif;*/

.colorOrange {
    background-color: #FF5733;
}

.Table_Indent {
    margin: 20px;
    margin-top: 0px;
}

    .Table_Indent .dx-header-row {
        background-color: white;
        color: black;
    }

    .Table_Indent .dx-datagrid-header-panel {
        background-color: #F2F2F2;
    }

    .Table_Indent .dx-toolbar-items-container {
        background-color: #F2F2F2;
    }

    .Table_Indent .dx-data-row * {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

#AccountDetails_Loads .dx-datagrid .dx-row > td, .dx-datagrid .dx-row > tr > td {
    padding: 8px !important;
}

.BorderDiv {
    border: 2px solid black;
    margin: 20px;
    height: 200px;
    margin-top: 30px;
}

    .BorderDiv h3 i {
        color: #FF5733;
    }

    .BorderDiv h3 {
        font-size: 35px;
        margin: 10px;
        font-family: 'Rubik',sans-serif;
        font-weight: 400;
        color: #585858;
    }

    .BorderDiv p {
        float: right;
        top: 0;
        display: inline-block;
        margin-right: 15px;
        margin-top: -45px;
    }


#AccountDetails_Loads {
    margin: 40px;
    margin-top: 10px;
}

    #AccountDetails_Loads h3 {
        font-size: 30px;
        margin-left: 20px;
    }


.Background_gray {
    background-color: #F2F2F2;
}



#Accounts_topActions button {
    float: right;
}

.black_drop_btn {
    margin-right: 20px;
    height: 40px;
    width: 100px;
    background-color: black;
    color: white;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.orange_btn {
    height: 40px;
    width: 110px;
    margin-right: 20px;
    background-color: #f78f20;
    color: white;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

    .orange_btn:hover, .black_drop_btn:hover, .green_btn:hover {
        border: 2px solid gray;
    }


.dropdown-content {
    display: none;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    position: absolute;
}

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

#Accounts_topActions a:hover {
    background-color: #ddd;
    cursor: pointer;
}

.show {
    display: block;
}



.col1 {
    float: left;
    width: 30%;
    margin: 0px;
    padding: 0px;
}

.col2 {
    float: left;
    width: 70%;
    margin: 0px;
    padding: 0px;
}

.LeftCol {
    background-color: white;
    margin-left: 25px;
    margin-bottom: 15px;
    margin-right: 15px;
    margin-top: 15px;
    border: 2px solid lightgray;
    font-family: 'Rubik',sans-serif;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

.RightCol {
    min-height: 1000px;
    background-color: white;
    margin-right: 25px;
    margin-bottom: 15px;
    margin-top: 15px;
    border: 2px solid lightgray;
    font-family: 'Rubik',sans-serif;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

.active {
    color: black;
    font-weight: bold;
}
/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

@media screen and (max-width: 600px) {

    #Portal_Partial {
        padding-left: 0px !important;
    }
    #footer{
        padding:0px;
    }
    .col1, .col2 {
        width: 100%;
    }

    .LeftCol {
        margin-right: 25px;
    }

    .RightCol {
        margin-left: 25px;
    }
}

.RightCol ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    padding-top: 100px;
    margin-left: 50px;
}

.RightCol li {
    font-size: 16px;
    float: left;
    margin-right: 80px;
}

    .RightCol li a {
        display: block;
        color: black;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    .RightCol li:hover {
        color: red;
        cursor: pointer;
    }

.LeftCol h2 {
    font-size: 35px;
    margin-left: 25px;
}

.LeftCol h3 {
    font-size: 35px;
    text-align: center;
}

.LeftCol h4 {
    font-size: 20px;
    margin-left: 15px;
    margin-bottom: 5px;
}

.LeftCol input {
    margin-left: 15px;
    margin-top: 0px;
    border: none;
    margin-bottom: 20px;
    font-size: 18px;
}

#AccountDetails_back_btn {
    background-color: inherit;
    border: none;
    color: #f78f20;
    font-size: 15px;
    margin-top: 8px;
    margin-left: 10px;
}

.CarretDropdown {
    background-color: inherit;
    border: none;
    color: #f78f20;
    font-size: 15px;
    float: right;
    margin-top: 20px;
    margin-right: 20px;
}

.LeftCol ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.LeftCol li {
    font-size: 16px;
    float: left;
}

    .LeftCol li a {
        display: block;
        color: black;
        text-align: center;
        text-decoration: none;
        margin-left: 45px;
    }

.LeftCol table {
    width: 300px;
}

    .LeftCol table td {
        text-align: center;
    }

        .LeftCol table td button {
            display: block;
            margin: auto;
        }

    .LeftCol table button {
        display: block;
        color: black;
        text-align: center;
        height: 40px;
        width: 40px;
        padding-top: 5px;
        text-decoration: none;
        border: 1px solid #F2F2F2;
        border-radius: 90px;
        align-content: center;
    }

        .LeftCol table button i {
            color: #f78f20;
        }

.border_line {
    margin-right: -1px;
    margin-left: -1px;
    height: 20px;
    background-color: #F2F2F2;
    border-top: 2px solid lightgray;
    border-bottom: 2px solid lightgray;
    border-right: none;
    margin-top: 10px;
    margin-bottom: 20px;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

#AccountDetails_Recent {
    margin-bottom: 15px;
}

    #AccountDetails_Recent table {
        margin-top: 20px;
    }

        #AccountDetails_Recent table a {
            font-weight: 300;
            font-size: 35px;
            text-decoration: none;
        }

        #AccountDetails_Recent table p {
            font-size: 20px;
            margin-right: 15px;
        }

    #AccountDetails_Recent table {
        width: 80%;
        table-layout: fixed;
    }

        #AccountDetails_Recent table td {
            align-content: center;
            text-align: center;
        }

.rowTop {
    width: calc(100%-15px);
    height: 150px;
    background-color: white;
    margin-top: 15px;
    margin-left: 15px;
    border: 2px solid lightgray;
    margin-right: 15px;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

#AccountDetails_AccountName {
    font-family: 'Rubik',sans-serif;
    font-size: 38px;
    margin-left: 45px;
    margin-top: 4px;
    margin-bottom: 10px;
    border: none;
    background-color: none;
    background: none;
    width: 90%;
}

#AccountDetails_Load_btn {
    margin-left: 20px;
}


#AccountDetailsOptions_dropdown {
    left: 0;
    margin-left: 170px;
    min-width: 100px;
}

#AccountOptions_dropdown {
    right: 0;
    margin-right: 18px;
    margin-top: -8px;
    min-width: 160px;
}

#AccountDetailsOptions_dropdown a:hover {
    background-color: #ddd;
    cursor: pointer;
}

#LeftCol1 {
    height: 220px;
}

#LeftCol2 {
    height: 765px;
}

.btn_icon {
    background: inherit;
    border: none;
}

#LeftCol1 button:hover {
    border: 2px solid black;
}
/*Change icon colors on hover to orangish red color*/

.Account_Note {
    background-color: #F2F2F2;
    padding: 2px;
    padding-bottom: 30px;
    border: 2px solid gray;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.Account_Note_text {
    padding-left: 10px;
    margin-top: 5px;
}

#popupShowNote label, #popupShowLog label {
    display: inline-block;
    text-align: right;
}

#AccountNote_popup_input {
    white-space: pre;
}

    #AccountNote_popup_input input {
        height: 30px;
        width: 80%;
    }

    #AccountNote_popup_input textarea {
        width: 80%;
        height: 190px;
        margin-bottom: 0px;
    }

    #AccountNote_popup_input button {
        background-color: #03c03c;
        color: white;
        width: 120px;
        height: 38px;
        border-radius: 20px;
        border: 1px solid gray;
        text-align: center;
        margin: 0 auto;
        display: block;
        margin-top: -15px;
    }

        #AccountNote_popup_input button:hover {
            background-color: #FF5733;
            cursor: pointer;
        }

.Account_Note_header {
    padding-left: 10px;
    font-family: 'Rubik',sans-serif;
    font-size: 18px;
    font-weight: bold;
    margin-top: 8px;
}

.Account_Note_date {
    font-size: 14px;
}

.Account_Note button {
    float: right;
    border: none;
    background-color: inherit;
    margin-top: 4px;
}

    .Account_Note button i:hover {
        color: gray;
    }

#AccountDetails_save {
    background-color: inherit;
    border: none;
    display: none;
}

#AccountDetails_cancel {
    background-color: inherit;
    border: none;
    display: none;
}

    #AccountDetails_cancel i {
        color: red;
    }

#AccountDetails_save i {
    color: #03c03c;
}




html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}  



/*Portal users*/
#Portal_Active_Users {
    display: flex;
    flex-wrap: wrap;
}
.Portal_User {
    width: 125px;
    border: 1px solid gray;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    text-align: center;
    margin: 25px;
    background-color:whitesmoke;
}
.Portal_User .dx-icon-user{
    font-size:90px;
    color:gray;
}
.Portal_User p{
    margin:0px;
    padding:0px;
    padding-top:5px;
    margin-bottom:-5px;
    color:dimgray;
}
    .Portal_User button {
        width: 100%;
        height: 35px;
        border: none;
        border:1px solid black;
        border-top: 2px solid black;
        margin-top: 5px;
        background-color: #ff1a1a;
        /*background-color:##e82615;*/
        color: white;
        font-size: 16px;
    }
    .Portal_User button:hover{
        background-color:#e82615;
    }
.BlueBtn {
    background-color: #0d6efd;
    border:none;
    height:30px;
    width:180px;
    color:white;
    font-size:16px;
    border-radius:5px;
}
    .BlueBtn:hover {
        background-color: #0069d9;
    }










    /*CRM 2.0*/
    .sideMenu2 {
        float: left;
        background-color: #546f7a;
        width: 300px;
        min-height: 1000px;
        border-right: 1px solid #e0e4eb;
        padding-top: 60px;
    }

.CRMSideBox:hover {
    background-color: #FF5733;
    cursor: pointer;
    
}

.CRMSideBox {
    padding-left: 10px;
    padding-top: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #64808c;
}

    .CRMSideBox h3 {
        display: inline;
        font-size: 13px;
        color: #e3e3e3;
        font-weight: 500;
        padding-left:10px;
        font-weight:400;
    }

    .CRMSideBox i {
        color: #e3e3e3;
        width: 30px;
        text-align: center;
    }
.CRMSideTop {
    background-color: #50646c;
    height:45px;
}
    .CRMSideTop h3 {
        font-size: 14px;
        color: #9aa6b1;
        font-weight: 500;
        text-align: center;
        padding-top: 15px;
    }
#Accounts_dropdown h3{
    color:gray;
}
#Accounts_dropdown select:hover{
    cursor:pointer;
}
#AccountSecond_buttons {
    z-index: 99;
    position: absolute;
    margin-left: 350px;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
}
#Accounts_dropdown {
    float: left;
    margin-right: 20px;
}
#Accounts_buttons {
    display: flex;
    flex-wrap: wrap;
}

#AccountSecond_buttons button {
    background-color: white;
    border: 1px solid lightgray;
    padding: 5px;
    padding-left: 16px;
    padding-right: 16px;
    display: inline;
}
#Accounts_buttons button {
    margin-top: 21px;
    background-color: whitesmoke;
    border: 1px solid lightgray;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    display: inline;
}

/*a[aria-expanded="true"]*/


#AccountSecond_buttons button:hover, #Accounts_buttons button:hover {
    background-color: #FF5733;
}
.SunnkingOrange {
    background-color: #FF5733 !important;
}

/*Account Details*/
.TopBar{
    margin:30px;
    margin-left:20px;
    margin-bottom:0px;
    margin-top:20px;
}
#AccountTitle input {
    display: inline-block;
    font-size: 35px;
    font-weight: 200;
    margin-left: 30px;
    width: 700px;
    border: none;
    background: inherit;
}
#AccountTitle button{
    border:none;
    background-color:inherit;
}
#AccountBackBtn {
    background-color: red;
    margin-top:12px;
    position:absolute;
}
#AccountBackBtn img{
    height:20px;

}
#HeaderButtons{
    float:right;
}
    #HeaderButtons button {
        border: 1px solid #cccccc;
        padding: 6px;
        font-size: 14px;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: 4px;
        margin-left: 4px;
        border-radius: 4px;
        background-color: white;
        color: black;
        margin-top: 10px;
    }
        #HeaderButtons button:hover {
            color: white;
            background-color: #FF5733;
        }

.HeaderBox {
    display: inline-block;
    margin-right: 50px;
}
    .HeaderBox button {
        border: 1px solid #cccccc;
        background-color: inherit;
        display: inline-block;
        margin-right:-4px;
        height:35px;
        width:40px;
    }
        .HeaderBox h2 {
            font-size: 25px;
        }
    .HeaderBox input {
        font-size: 25px;
        font-weight: 300;
        background-color: inherit;
        color: black;
        border: none;
    }
#AccountHeadInfo {
    margin-top: 13px;
    min-height: 90px;
}
#AccountHeadInfo select {
    font-size: 25px;
    font-weight: 300;
    background-color: inherit;
    color: black;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}
.HeaderBox h3 {
    font-size: 20px;
    font-size: 14px;
}
.HeaderBox button i{
    color:gray;
}
.btnFirst {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    background-color:mediumseagreen !important;
    color:white;
}
.btnSecond {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.AccountContent {
    border-top: 1px solid #cccccc;
    margin: 30px;
    margin-left:20px;
    margin-top: 0px;
}
#AccountSideBar {
    background-color: #546f7a;
    width: 220px;
    float: left;
    min-height: 900px;
    border: 1px solid #cccccc;
    border-top: none;
    margin-right:0px;
}
    #AccountSideBar button {
        color: white;
        font-size: 14px;
        border: none;
        border-bottom: 1px solid #64808c;
        padding: 18px;
        padding-left: 16px;
        display: block;
        width: 100%;
        background-color: inherit;
        text-align: left;
        font-family: Roboto,RobotoFallback,"Noto Kufi Arabic",Helvetica,Arial,sans-serif;
    }
        #AccountSideBar button:hover {
            background-color: #FF5733;
            color: white;
        }
#AccountContentBox_Header button:hover {
    background-color: #FF5733;
    color: white;
}
#AccountDetailBox h3 {
    font-size: 18px;
    margin-left: 30px;
    margin-bottom: -8px;
}
#AccountContentBox_Header {
    border-bottom: 1px solid #cccccc;
    margin-left: 255px;
    margin-top: 20px;
    height: 55px;
}
#AccountContentBox_Header2 {
    border-bottom: 1px solid #cccccc;
    margin-left: 255px;
    margin-top: 20px;
}
#AccountContentBox_Header h3, #AccountContentBox_Header2 h3 {
    font-size: 26px;
    width: 200px;
    float: left;
}
#AccountDetails_Locations{
    margin-top:30px;
}
.WhiteTable h3 {
    font-family: Roboto,RobotoFallback,"Noto Kufi Arabic",Helvetica,Arial,sans-serif;
    font-weight: 400;
    font-size: 22px;
    padding: 5px;
    padding-bottom: 0px;
}
#AccountRecentLoads{
    margin:20px;
    border: 1px solid black;
}
.WhiteTable{
    margin-top:15px;
    margin-left:35px;
}
.WhiteTable table {
    border: 1px solid #989898;
    width:100%;
}
    .WhiteTable table th {
        border-bottom: 1px solid #989898;
        padding: 8px;
        font-weight: 400;
        /*text-align: center;*/
    }
.WhiteTable table td {
    border-top: 1px solid #D0D0D0;
    padding: 8px;
}

.c1 {
    /*background-color: red;*/
    flex-shrink: 1;
}
.c2 {
    /*background-color: orange;*/
    flex-grow: 1;
    flex-shrink: 1;
}
.c3 {
    /*background-color: green;*/
    flex-shrink: 1;
}

#AccountOverview {
    display: flex;
    flex-wrap: wrap;
}

#AccountTasks_Table tr th, #AccountAddress_Table tr th {
    padding-left: 15px;
    padding-top: 7px;
    padding-bottom: 7px;
}
#AccountTasks_Table tr td, #AccountAddress_Table tr td {
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
}
#AccountAssets{
    float:right;
    margin-top:0px;
    margin-bottom:5px;
}
    #AccountAssets table tr th button, #AccountAssets table tr th a {
        text-decoration:none;
        font-weight:400;
        background-color: inherit;
        border: none;
        color: #ff5722;
        font-size: 35px;
        text-align: center;
        margin-right: 10px;
        margin-left: 15px;
        padding: 0px;
    }
    #AccountAssets table tr td {
        text-align:center;
        font-size:20px;
        padding:0px;
    }
#AccountLoads, #AccountContacts, #AccountNotes, #AccountPortal {
    margin-left: 260px;
    margin-top: 20px;
}

#AccountContentBox .dx-datagrid-scrollable-simulated {
    height: 45px;
    margin: 0px;
    padding: 0px;
}

#AccountContentBox .dx-datagrid-headers {
    height: 45px;
    margin: 0px;
    padding: 0px;
    background-color: white;
}
#AccountContentBox .dx-datagrid-text-content {
    font-weight: 400;
    padding-left: 15px;
}

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

#AccountContentBox .dx-datagrid-action {
    padding: 0px;
    height: 45px;
}

#AccountContentBox .dx-datagrid-headers .dx-datagrid-table td {
    margin: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}

#AccountContentBox .dx-show-invalid-badge {
    margin: 0px;
    padding: 0px;
    height: 20px;
}
#AccountContentBox .dx-row:hover {
    cursor: pointer !important;
}
#AccountContentBox .dx-row {
    padding-top: 20px;
}
#Accounts_NewLoad_btn{
    float:right;
    background-color:inherit;
    border:1px solid silver;
    padding:7px;
    padding-right:35px;
    padding-left:35px;
    border-radius:5px;
}




/*
        #AccountLoads .dx-row *:not(.dx-datagrid-text-content,.dx-header-row, .dx-datagrid-headers,.dx-datagrid-table, .dx-overlay):not(.dx-header-row) {
            padding-top: 12px !important;
            padding-bottom: 12px !important;
        }
    #AccountLoads .dx-widget, #AccountLoads .dx-overlay, #AccountLoads .dx-datagrid-action {
        padding-bottom: 50px;
        background-color: red !important;
        color: red !important;
    }
        */
#ChangePassordArea label{
    padding-top:5px;
    padding-bottom:0px;
    margin-bottom:-5px;
}
#ChangePassordArea input{
    height:30px;
    width:220px;
}


#qrcodeCanvas3{
    width:300px;
}
    #qrcodeCanvas3 #print_Name2 {
        font-size: 22px;
        margin: 0px;
        padding-top: 5px;
        padding-left: 25px;
    }
    #qrcodeCanvas3 #print_Name3 {
        font-size: 22px;
        margin: 0px;
        padding-top: 5px;
        padding-left: 5px;
        text-align: center;
    }
    #qrcodeCanvas3 #qrcode2 {
        float: left;
        margin-right:70px;
        margin-left:5px;
    }
    #qrcodeCanvas3 #qrcode3 {
        float: right;
    }
#qrcodeCanvas2 {
    padding: 5px;
    margin-top: 5px;
    margin-left: 5px;
}

    #qrcodeCanvas2 img {
        float: left;
    }

    #qrcodeCanvas2 p {
        font-size: 20px;
        padding: 0px;
        padding-top: 20px;
        padding-bottom: 5px;
        margin: 0px;
        margin-left:90px;
        padding-left:50px !important;
    }

    #qrcodeCanvas2 h3 {
        font-size: 22px;
        padding: 0px;
        margin: 0px;
        font-family: sans-serif !important;
        margin-left:-10px;
        padding-top:30px;
    }
#LL{
    float:left;
}
#RR{
    float:left;
    margin-left:60px;
}

.DevTableStyleMin .dx-texteditor-input{
    padding: 0px;
    margin: 0px;
    height:20px !important;
}





/*============================================================================= Dashboard */
.DashboardQuicklookBox h3{
    font-size:30px;
    font-weight:500;
}
.Dashboard_Title {
    color: #585858;
    margin:10px;
    font-size:16px;
    font-weight:500;
}
.DashboardQuicklookBox h2 {
    font-size: 25px;
    margin-top: 20px;
    font-weight:500;
}
.QuickAccessArea{
    text-align:center;
    margin-top:0px;
}
.QuickAccessBox {
    border: 1px solid #696969;
    height: 120px;
    width: 280px;
    display: inline-block;
    border-radius: 5px;
    background-color: white;
    margin: 10px;
    /*box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;*/
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 8px;
}
    .QuickAccess_Icon {
        display: inline-block;
        border-radius: 5px;
        vertical-align: top;
        text-align: start;
        display:inline-block;
        float:left;
        padding:8px;
        margin:4px;
        border:1px solid silver;
    }
    .QuickAccess_Icon i{
        color:white;
    }
.QuickAccessBox h3 {
    display: inline-block;
    font-size: 18px;
    vertical-align: top;
    margin-top:12px;
}
.DragIconBox{
    display:inline-block;
    float:right;
    padding:10px;
    padding-right:8px;
    padding-top:12px;
}
.DragIconBox:hover{
    cursor:pointer;
}
.DragIconBox i{
    color:black;
}
.DashboardBox_Top .DragIconBox {
    padding-right:0px;
    padding-top:8px;
}
.LineDivider2 {
    clear: both;
    height: 1px;
    width: 265px;
    background-color: silver;
    margin:7px;
    margin-top:0px;
}
.QuickAccess_Description {
    height: 65px;
    overflow: hidden;
    text-align: left;
    padding:5px;
    padding-bottom:0px;
    padding-top:0px;
    padding-left:10px;
}
.LineDivider {
    width: 1px;
    height: 10px;
    background-color: silver;
    display: inline-block;
    height: 100px;
    float: left;
    margin:5px;
    margin-left:0px;
}

.DashboardBackground {
    min-height: 100vh;
    background: rgb(63,119,174);
    background: linear-gradient(180deg, rgba(63,119,174,1) 0%, rgba(176,196,223,1) 100%);
    padding-top: 5px;
    padding-bottom: 5px;
}
.DashboardQuicklookBox {
    min-height: 300px;
    background: #eaf5fd;
    /*background: rgb(234,245,253);*/
    /*background: radial-gradient(circle, rgba(234,245,253,1) 0%, rgba(216,233,243,1) 100%);*/
    border: 1px solid silver;
    margin: 15px;
    margin-bottom: 0px;
    border-radius: 4px;
    border: 1px solid silver;
}
.DashboardBoxArea {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin:8px;
    min-width:100px;
    min-height:400px;
}
    .DashboardBoxArea .Order1{
        order:1;
    }
    .DashboardBoxArea .Order2 {
        order: 2;
    }
    .DashboardBoxArea .Order3 {
        order: 3;
    }
    .DashboardBoxArea .Order4 {
        order: 4;
    }
    .DashboardBoxArea .Order5 {
        order: 5;
    }
    .DashboardBoxArea .Order6 {
        order: 6;
    }

.DashboardContentBox {
    background-color: white;
    margin: 8px;
    flex: 1 auto;
    min-width: 400px;
    height: 400px;
    border-radius: 4px;
    /*resize: horizontal;*/
    overflow: auto;
    border: 1px solid silver;
    width: 400px;
    /*max-width:25%;*/
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 8px;
}

.DevTable_Small {
    padding: 10px;
    padding-top:10px;
    padding-bottom:0px;
}
.DashboardBox_Top {
    padding: 12px;
    padding-top:8px;
    padding-bottom:0px;
}
    .DashboardBox_Top .DashboardTop_Icon {
        display: inline-block;
        height: 35px;
        padding: 9px;
        border-radius: 5px;
        border:1px solid silver;
    }
#Dashboard_Contacts_Buttons .DashboardTop_Icon, #Dashboard_Contacts_Buttons button:hover {
    background-color: #ff5722;
}
#Dashboard_Activities_Buttons .DashboardTop_Icon, #Dashboard_Activities_Buttons button:hover {
    background-color: #03a9f4;
}
#Dashboard_Leads_Buttons .DashboardTop_Icon, #Dashboard_Leads_Buttons button:hover {
    background-color: orange;
}
#Dashboard_Opportunities_Buttons .DashboardTop_Icon, #Dashboard_Opportunities_Buttons button:hover {
    background-color: mediumpurple;
}
#Dashboard_Records_Buttons .DashboardTop_Icon, #Dashboard_Records_Buttons button:hover {
    background-color: goldenrod;
}
#Dashboard_Accounts_Buttons .DashboardTop_Icon, #Dashboard_Accounts_Buttons button:hover {
    background-color: lightskyblue;
}
.DashboardBox_Top .DashboardTop_Icon i {
    color: white;
}
    .DashboardBox_Top input {
        border: 2px solid silver;
        border-radius: 5px;
        height: 35px;
        width: 100%;
        display:block;
        margin-right:50px;
        margin-top:7px;
    }
.DashboardBox_Top button {
    display: inline-block;
    border: 2px solid silver;
    padding:6px;
    color: slategray;
    font-weight: bold;
    background-color: white;
    border-radius: 4px;
    margin-left: 10px;
    margin-right:7px;
    float: right;
}
    .DashboardBox_Top button:hover {
        border: none;
        color: white;
        padding:8px;
    }
.DashboardBox_Top p{
    display:inline-block;
    font-size:15px;
    color:gray;
    padding-left:10px;
    padding-bottom:0px;
    margin-bottom:0px;
}
.DashboardBox_Top a {
    display: inline-block;
    font-size: 15px;
    color: gray;
    padding-left: 10px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    text-decoration:none;
}
.DashboardBox_Top a:hover{
    font-weight:bold;
    color:steelblue;
}
.DevTable_Small .dx-datagrid .dx-datagrid-table .dx-header-row > td {
    padding-top: 0px;
    padding-bottom: 5px;
    background-color: white;
    border-bottom: 2px solid white;
    color: black;
}
.DevTable_Small .dx-row:hover{
    cursor:pointer;
}
.DevTable_Small .dx-pager{
    padding-bottom:0px;
    margin-right:-20px;
    padding-right:0px;
}

.DevTable_Small .dx-datagrid .dx-row > td {
    padding-top: 4px !important;
    padding-bottom: 3px !important;
}
#Deashboard_LeadsTable .dx-selection {
    background-color: orange;
}
#Deashboard_AccountsTable .dx-selection {
    background-color: lightskyblue;
}
#Dashboard_LayoutArea{
    margin-top:0px;
    margin-bottom:8px;
    padding:0px;
    height:25px;
}
#Dashboard_LayoutArea p {
    display: inline-block;
}
#Dashboard_LayoutArea select {
    height:25px;
    width:120px;
    margin-left:10px;
    border:1px solid black;
    background-color:white;
}
#Dashboard_LayoutArea select:hover{
    cursor:pointer;
}
/*================== Recent Records */
#RecentRecords {
    padding: 10px;
    padding-top: 0px;
    padding-left: 20px;
}
    #RecentRecords li{
        padding:2px;
    }
    #RecentRecords a {
        list-style: none;
        color: blue;
    }

    .noscale{
        transform:scale(0);
    }
.ScaleUp {
    animation: scaleUp 1s forwards;
}

@keyframes scaleUp {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}







.GoldBorder {
    border: 2px dashed blue;
    border-radius: 0px;
}
.GoldBorder2 {
    border: 2px dashed blue;
    border-radius: 0px;
}


#DashboardActivities{
    border-radius:15px;
    height:320px;
    padding-top:30px;
    background-color:white;
    margin-top:10px;
}
    #DashboardActivities table {
        width: 100%;
    }
    #DashboardActivities table tr td{
        height:60px;
    }
        #DashboardActivities table tr td:nth-child(1) {
            width: 60px;
        }
    #DashboardActivities table tr td:nth-child(3) {
        width:100px;
    }
        #DashboardActivities table tr {
            border-top: 1px solid #f4f4f4;
        }
        #DashboardActivities table input[type=checkbox] {
            height: 20px;
            width: 20px;
            appearance: none;
            -webkit-appearance: none;
            align-content: center;
            justify-content: center;
            font-size: 2rem;
            border: 2px solid #d2d2d2;
            border-radius: 5px;
        }
    #DashboardActivities table input{
        text-align:center;
        margin-left:20px;
    }
        #DashboardActivities table h2 {
            font-size: 15px;
            color: #1554d1;
            font-weight: bold;
            margin: 0px;
            padding: 0px;
        }
    #DashboardActivities table p {
        margin: 0px;
        padding: 0px;
    }
.ActivitityDueBox {
    background-color: #9ccffa;
    display: flex;
    border-radius: 4px;
    margin-right:30px;
}
    .ActivitityDueBox p {
        color: #123247;
        font-weight: bold;
        margin: 0px;
        padding: 0px;
        float:right;
    }
#DashboardActivities h3 {
    color: #1554d1;
    font-size: 15px;
    font-weight:500;
}
#DashboardActivities h3:hover{
    cursor:pointer;
}
#DashboardSchedulerArea{
    margin-top:5px;
    margin-left:2px;
    margin-right:2px;
}
    .DashboardContentBox #DashboardSchedulerArea{
        padding-left:2px;
        padding-right:2px;
    }
    #DashboardSchedulerArea .dx-toolbar .dx-item-content, #DashboardSchedulerArea .dx-toolbar .dx-icon {
        color: #03a9f4;
    }

    #DashboardSchedulerArea .dx-button:hover {
        background-color: rgba(3, 169, 244,.2);
    }
.LeftDrag {
    width: 4px;
    height: 100%;
    float: left;
    background-color: transparent;
    z-index: 1;
    margin-right: -4px;
}
.RightDrag {
    width: 4px;
    height: 100%;
    float: right;
    background-color: transparent;
    z-index: 1;
    margin-left: -4px;
}
.LeftDrag:hover, .RightDrag:hover {
    cursor: col-resize;
}

.WidthStyle1 {
    width: 400px;
}
.WidthStyle2{
    width:800px;
}
.WidthStyle3 {
    width: 1200px;
}
.WidthStyle4 {
    width: 1600px;
}


/*=============================== CRM Accounts 3.0 =========================================================*/
#AccountTitle2{
    min-height:50px;
}
    #AccountTitle2 h3 {
        display: inline-block;
        font-size: 22px;
        font-weight: 500;
        border: none;
        background: inherit;
        color: black;
        margin-top: 23px;
        padding-bottom:1px;

        margin-left: -2px;
    }

#AccountTitle2 button {
    border: 1px solid #cccccc;
    background-color: inherit;
}
#TitleIcon{
    float:left;
    margin-top:8px;
    margin-right:15px;
}

.CRMSideTitle {
    background-color: #50646c;
    height: 45px;
}
.CRMSideTitle h3 {
    font-size: 14px;
    color: #9aa6b1;
    font-weight: 500;
    text-align: center;
    padding-top: 15px;
    display:inline-block;
    padding-right:44px;
}
    .CRMSideTitle .DashboardTop_Icon {
        display: inline-block;
        height: 35px;
        padding-top: 10px;
        padding-right: 7px;
        padding-left: 7px;
        border-radius: 7px;
        background-color: #ff5722;
        float: left;
        margin-top: 5px;
        margin-left: 5px;
    }
    .CRMSideTitle .DashboardTop_Icon i{
        color:white;
    }
.SideGrid {
    width: 376px;
}
.SideGrid .dx-row {
    color: black;
}
    .SideGrid .dx-row:hover {
        cursor: pointer;
        background-color: #ff5722;
    }
        .SideGrid .dx-row:hover .SideGridText p {
            color: #50646c;
        }
.SideGrid .dx-datagrid-content table tr td {
    border-top: 1px solid transparent !important;
    border-bottom: 1px solid silver !important;
}
.SideGrid .dx-datagrid .dx-row > td {
    padding-top: 3px !important;
    padding-bottom: 4px !important;
}
#datagridAccounts2 .dx-data-row.dx-state-hover {
    color: white !important;
    background-color: #FF5733;
    cursor: pointer;
}
    #datagridAccounts2 .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td {
        color: white;
    }

.SideGrid .dx-pager {
    background-color: #ededed;
    color: black;
}
.SideGrid .dx-datagrid-content {
    background-color: #ededed;
}
.SideGridText {
    height:35px !important;
}
    .SideGridText p {
        color: #A9A9A9;
        display: inline-block;
        padding: 0px;
        margin: 0px;
    }
    .SideGridText p:nth-child(1) {
        line-height: 100%;
        color:black !important;
    }
        .SideGridText p:nth-child(3) {
            float: right;
        }
.SideGridText{
    height:40px;
    margin-top:2px;
}
.SideGrid .dx-selection.dx-row:not(.dx-row-focused):not(.dx-row-removed) > td {
    background-color: #ff5722 !important;
    color: unset;
}
    .SideGrid .dx-selection.dx-row:not(.dx-row-focused):not(.dx-row-removed) > td .SideGridText p {
        color: #50646c;
    }
/*==================== Accounts 3.0 */
.AccountAreaHeader {
    padding: 20px;
    padding-right: 5px;
    padding-top: 0px;
    padding-bottom: 5px;
    background: #ededed;
    border: 1px solid gray;
    border-radius: 4px;
    margin-bottom: 15px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 8px;
}
.CRMSideHead{
    margin-bottom:10px;
}
.AccountAreaHeader #AccountAssets{
    padding-right:15px;
}
.AccountAreaHeader #AccountAssets {
    text-align:center;
}
.AccountAreaHeader .IconBox{
    margin-top:18px !important;
}
.SideNav {
    height: 1000px;
    background-color: #ededed;
    overflow-x: hidden;
    transition: 0.7s;
    margin-top: -5px;
    margin-bottom: -4px;
    float: left;
}
#SideBarIcon{
    float:right;
    margin-right:-11px;
    margin-top:50vh;
    height:0px;
}
    #SideBarIcon i{
        height:0px;
    }
#SideNavOpenBtn {
    transition: 0.3s;
}

.AccountBox {
    background-color: white;
    border-radius: 4px;
    overflow: auto;
    border: 1px solid gray;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 8px;
    margin-bottom: 15px;
    padding: 10px;
    padding-top:6px;
}
.AccountBoxBody{
    margin:5px;
    margin-bottom:8px;
    margin-right:0px;

}
    .AccountBox h3 {
        font-size: 14px;
        color: gray;
        margin-left: 8px;
        display: inline-block;
    }
    .AccountBox h4 {
        font-size:16px;
        font-weight:500;
        padding:0px !important;
        margin:0px;
        padding:0px;
    }
.AccountArea2 {
    margin-left: 15px;
    margin-right: 15px;
}
.AccountAreaBody {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr 2fr 1fr;
}
#AccountAboutBox {
    height: 1010px;
}
#AccountTasksBox{
    height:370px;
}
#AccountOpportunityBox{
    height:300px;
}
#AccountLoadHistoryBox {
    height: 310px;
}
#AccountContactsBox{
    height:225px;
}
#AccountPortalBox{
    height:240px;
}
#AccountSiteInformationBox {
    height: 280px;
}
#LeadsInformationBox {
    height: 310px;
}
#LeadContactsBox {
    height: 310px;
}
#AccountSiteInformationBox input[disabled] {
    background: red !important;
}
#AccountBillingBox {
    height: 220px;
}
.IconBox {
    margin: 0px;
    height: 35px;
    width: 35px;
    display:inline-block;
    border-radius: 5px;
    text-align:center;
}
    .IconBox i {
        color: white;
        padding-top: 17px;
        padding-bottom: 0px;
    }
.AccountBox label {
    color: gray;
    margin: 0px;
    width: 100%;
    display: inline-block;
    font-size: 14px;
}
.AccountBox input {
    border: none;
    border-bottom: 1px solid #e3e3e3;
    font-size: 15px;
    padding-top: 0px;
    padding-bottom:0px;
    margin-bottom: 5px;
    width:100%;
    display:inline-block;
}
.AccountBox select {
    border: none;
    border-bottom: 1px solid #e3e3e3;
    font-size: 15px;
    padding-top: 0px;
    margin-bottom: 5px;
    width: 100%;
    display: inline-block;
}
.AccountBox select[disabled]{
    color:black;
}
.LineDivider3 {
    clear: both;
    height: 1px;
    background-color: silver;
    margin-top: 5px;
    margin-bottom:10px;
}
.AccountBox .DevTable_Small {
    padding: 0px;
    margin-left: -5px;
    margin-right: -5px;
}
#DashboardSchedulerArea {
    padding: 0px;
    margin:0px;
}
#DashboardSchedulerArea2 {
    margin-top:5px;
    padding: 0px;
    margin-left: -11px;
    margin-right: -10px;
    margin-bottom: -12px;
}
.RightAddBox, .RightEditBox {
    float: right;
    border: 2px solid silver;
    padding: 6px;
    padding-top:7px;
    padding-bottom:5px;
    border-radius: 4px;
    color: slategray;
    font-weight: bold;
}
.RightEditBox {
    padding-left: 7px;
    padding-right: 7px;
    padding-top:6px;
    padding-bottom:5px;
}
    .RightAddBox i, .RightEditBox i {
        font-weight: bold;
    }
    .RightAddBox:hover, .RightEditBox:hover {
        cursor: pointer;
        color: white;
    }
#AccountSwitchView:hover {
    cursor: pointer;
    border: 1px solid #ff5722;
    background-color: #ff5722;
    color: white;
}
#AccountSearchArea {
    margin-left: 70px;
    margin-right: 55px;
    margin-top: 15px;
    margin-bottom: 15px;
}
#AccountSearchArea input {
    width: 100%;
    height: 30px;
    border-radius: 10px;
    border: 1px solid gray;
    padding-left:10px;
}
#AccountSearchArea i {
    float: right;
    position: relative;
    margin-top:-16px;
    margin-right:20px;
}
#AccountSwitchView{
    float:right;
    margin-right:10px;
    margin-top:0px;
    border:1px solid silver;
    border-radius:5px;
    background:none;
    padding:5px;
    padding-left:6px;
    padding-right:6px;
}
#AccountNewBtn{
    float:left;
    border:1px solid silver;
    border-radius:6px;
    background-color:white;
    font-size:12px;
    padding:7px;
    padding-left:10px;
    padding-right:10px;
    margin-left:10px;
}
    #AccountNewBtn:hover {
        border:1px solid gray;
        background-color: mediumseagreen;
        color: white;
    }
    #AccountsGridChooserArea {
        margin-top: 10px;
    }
#AccountsGridChooserArea table {
    width: 100%;
}
    #AccountsGridChooserArea table tr td {
        width: 33%;
        text-align: center;
    }
        #AccountsGridChooserArea table tr td button {
            border: none;
            background: transparent;
            text-decoration: underline;
            color: #ff5722;
            text-align: center;
        }
        #AccountsGridChooserArea table tr td button:hover{
            font-weight:bold;
        }
#AccountLoadHistoryBox .dx-selection {
    background-color: darkgoldenrod;
}
#AccountLoadHistoryBox .dx-icon{
    color:goldenrod;
}

/*Popup style change*/
.dx-texteditor-container {
    border:1px solid gray;
    background:white;
    border-radius:5px;
}





/*Hover colors*/
#AccountAboutBox .RightEditBox:hover {
    background-color: brown;
    border:2px solid brown;
}
#AccountTasksBox .RightAddBox:hover {
    background-color: #03a9f4;
    border: 2px solid #03a9f4;
}
#AccountOpportunityBox .RightAddBox:hover {
    background-color: mediumpurple;
    border: 2px solid mediumpurple;
}
#AccountContactsBox .RightAddBox:hover, #LeadContactsBox .RightAddBox:hover {
    background-color: #ff5722;
    border: 2px solid #ff5722;
}
#AccountSiteInformationBox .RightEditBox:hover {
    background-color: goldenrod;
    border: 2px solid goldenrod;
}
#AccountBillingBox .RightEditBox:hover {
    background-color: mediumseagreen;
    border: 2px solid mediumseagreen;
}
#AccountPortalBox .RightAddBox:hover {
    background-color: #5e1c9e;
    border: 2px solid #5e1c9e;
}
#AccountPortalViewBtn{
    margin-right:5px;
}
/*000000000000000000000000000000000000 TEST 0000000000000000000000000000000*/
.SideMenuArea {
    float: left;
    background-color: #ededed;
    width: 380px;
    min-height: 1000px;
    border-right: 1px solid #e0e4eb;
    padding-top: 10px;
    transition: margin-left .7s,width .7s;
}

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

.CRMMiddleView {
    float: left;
    background: rgb(63,119,174);
    background: linear-gradient(180deg, rgba(63,119,174,1) 0%, rgba(176,196,223,1) 100%);
    width: 100%;
    padding: 15px;
    padding-bottom:0px;
    transition: margin-left .7s;
}
    .CRMMiddleView .HeaderBox input {
        padding-right:0px;
        width:60px;
    }
#EndPercent {
    content: '%';
    display: inline-block;
    margin-left: -17px;
    font-size: 25px;
    font-weight: 300;
    color: black;
}
.SideMenuButtonArea {
    float: left;
    width: 15px;
    min-height: 1000px;
    background-color: #ededed;
}
.CRMCollapseButton {
    float: right;
    font-size: 36px;
    text-decoration: none;
    height: 100%;
    width: 15px;
    background-color: white;
    border: 1px solid silver;
    border-right:1px solid gray;
    margin-top: 0px;
    border-radius:90px;
}
#CRMSideMenu{
    margin-left:0px;
}
#AccountHoursArea{
    padding:5px;
    padding-top:0px;
    margin-bottom:8px;
    padding-right:10px;
    border:1px solid silver;
    border-radius:5px;
}
    #AccountHoursArea table {
        width: 100%;
        font-size: 14px;
    }
        #AccountHoursArea table tr {
            border-bottom: 1px solid #e3e3e3;
            height: 35px;
        }
    #AccountHoursArea table tr td:nth-child(2),#AccountHoursArea table tr th:nth-child(2){
        text-align:right;
    }
    #AccountHoursArea table tr td:nth-child(1){
        color:gray;
    }
.TableInputArea table {
    width: 100%;
}
    .TableInputArea table tr {
        border-bottom: 1px solid #e3e3e3;
        height: 35px;
    }
    .TableInputArea table td input{
        padding:0px;
        margin:0px;
        border:1px solid silver;
        height:100%;
        border-radius:3px;
        width:100%;
        padding-left:5px;

    }
#AccountHistoryArea{
    padding-top:5px;
    border:1px solid silver;
    border-radius:5px;
    margin-top:2px;
    padding-bottom:4px;
    margin:0px;
    margin-top:2px;
}
    #AccountHistoryArea .DevTable_Small{
        margin-left:0px;
        margin-right:0px;
    }
    #AccountHistoryArea .dx-selection {
        background-color: brown;
    }
#AccountHistoryBox .LineDivider3 {
    padding-bottom: 0px;
    margin-bottom: 0px;
}
.TopEditIcon {
    border: 2px solid silver !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    color: slategray !important;
}
    .TopEditIcon:hover {
        border: 2px solid #ff5722 !important;
        color: white !important;
    }
#HeaderButtons2 {
    float: right;
}

    #HeaderButtons2 button {
        border: 1px solid grey;
        padding: 6px;
        padding-bottom: 5px;
        font-size: 14px;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: 4px;
        margin-left: 4px;
        border-radius: 4px;
        background-color: white;
        color: black;
        margin-top: 10px;
        color: steelblue;
    }

        #HeaderButtons2 button:hover {
            color: white;
            background-color: #FF5733;
        }
.SelectedBold{
    font-weight:bold;
}


.colorBrown {
    background-color: brown;
}
.IconEditSave {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 8px;
    padding-right: 8px;
    background-color: mediumseagreen;
    color: white;
    border: 2px solid mediumseagreen;
    margin-right: 5px;
}
#IconBillingSave {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 8px;
    padding-right: 8px;
    background-color: green;
    color: white;
    border: 2px solid green;
    margin-right: 5px;
}
#AccountAddressAreaEdit label{
    width:49%;
}
#AccountAddressAreaEdit input {
    width: 49%;
}
#AccountHoursArea input{
    width:100px;
    text-decoration:none;
    border:none;
    font-size:14px;
}
#AccountsMultiLabelArea {
    display: inline-block;
    margin-bottom: -10px;
    text-align: center;
}

.SmallTab {
    float: left;
    padding: 11px;
    padding-top: 10px;
    padding-right: 18px;
    padding-left: 18px;
    border: 1px solid silver;
    margin-bottom: -14px;
    margin-left: 4px;
    margin-top:5px;
    text-align: center;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: #e0e0e0;
    border-bottom:none;
}
.SmallTab h3{
    color:black;
}
    .SmallTab:hover {
        cursor: pointer;
        border: 2px solid black;
        border-bottom:none;
        background-color: #03a9f4;
        font-weight: bold;
        box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    }
.ActiveTab {
    padding-top: 8px;
    padding-bottom:10px;
    margin-bottom: -8px;
    background-color: white;
    border: 2px solid silver;
    border-bottom:none;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
#ResetShadow{
    width:100%;
    height:10px;
    background-color:white;
    border-top:1px solid silver;
    margin-top:5px;
    position:relative;
}
.ActiveTab h3 {
    font-weight: bold;
}
#AccountTasksBox .dx-scheduler-header {
    /*border-top:none;*/
    position: relative;
}
.SmallTab h3 {
    padding: 0px;
    margin: 0px;
}
.AccountNoteArea{
    min-height:150px;
    padding:10px;
}
.AccountNoteArea textarea{
    width:100%;
    min-height:130px;
}
.AccountAreaHeader #IconHeadSave {
    background-color: mediumseagreen;
    border: 2px solid mediumseagreen !important;
}
.AccountAreaHeader #IconHeadSave i{
    color:white;
}
    .AccountAreaHeader #IconHeadSave:hover {
        border: 2px solid #ff5722 !important;
    }
/*Dev icon color*/
#DatagridAccountPageOpportunities .dx-datagrid .dx-link {
    color: mediumpurple;
}
#DatagridAccountPageNotes .dx-datagrid .dx-link {
    color: #03a9f4;
}
#DatagridAccountPageScheduler .dx-toolbar .dx-item-content, #DatagridAccountPageScheduler .dx-toolbar .dx-icon {
    color: #03a9f4;
}

#DatagridAccountPageScheduler .dx-toolbar .dx-item-content, #DatagridAccountPageScheduler .dx-toolbar .dx-icon {
    color: #03a9f4;
}

#DatagridAccountPageNotes .dx-datagrid-rowsview {
    border-top: 1px solid black !important;
}
#AccountDetailsEmptyView img {
    float: none;
    width: 600px;
    text-align: center;
    margin-top: 140px;
    border: 2px solid white;
    border-radius: 10px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
#DatagridAccountPagePortal{
    margin-left:-12px;
    margin-right:-5px;
}
.btnFirstStyle1 {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    color: white;
}


/*Arrow progress bar*/
.clearfix:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
}
.ArrowProgressBar{
    min-width:500px;
}
.ArrowProgressBar .step {
    font-size: 14px;
    text-align: center;
    color: #777;
    cursor: default;
    margin: 0 1px 0 0;
    margin-right: 6px;
    margin-left: 1px;
    padding: 10px 0px 10px 0px;
    width: 18%;
    float: left;
    position: relative;
    background-color: #ddd;
}
    .ArrowProgressBar .step:hover {
        cursor: pointer;
        background-color: darkgoldenrod !important;
    }
        .ArrowProgressBar .step:hover:after {
            border-left: 17px solid darkgoldenrod !important;
        }
        .ArrowProgressBar .step:hover a {
            color: white;
        }
    /*
    .ArrowProgressBar .step a {
        color: red;
    }
    */
    .ArrowProgressBar .step a {
        color: #777;
        text-decoration: none;
        padding-left:14px;
    }

    .ArrowProgressBar .step:after, .ArrowProgressBar .step:before {
        content: "";
        position: absolute;
        top: 0;
        right: -17px;
        width: 0;
        height: 0px;
        border-top: 19px solid transparent;
        border-bottom: 19px solid transparent;
        border-left: 17px solid #ddd;
        z-index: 2;
    }

    .ArrowProgressBar .step:before {
        right: auto;
        left: 0;
        border-left: 17px solid white; /*Margin color*/
        z-index: 0;
    }

    .ArrowProgressBar .step:first-child:before {
        border: none;
    }

    .ArrowProgressBar .step:first-child {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .ArrowProgressBar .step span {
        position: relative;
    }

*.ArrowProgressBar .step.done span:before {
    opacity: 1;
    content: "";
    position: absolute;
    top: -2px;
    left: -10px;
    font-size: 11px;
}

.ArrowProgressBar .step.current {
    color: #fff;
    background-color: darkgoldenrod;
}
.ArrowProgressBar .step.past {
    color: #fff;
    background-color: #3ba654;
}

    .ArrowProgressBar .step.current a {
        color: #fff;
        text-decoration: none;
    }
.ArrowProgressBar .step.past a {
    color: #fff;
    text-decoration: none;
}

.ArrowProgressBar .step.current:after {
    border-left: 17px solid darkgoldenrod;
}
.ArrowProgressBar .step.past:after {
    border-left: 17px solid #3ba654;
}

.ArrowProgressBar .step.done {
    color: #173352;
    background-color: #2f69aa;
}

    .ArrowProgressBar .step.done a {
        color: #173352;
        text-decoration: none;
    }

    .ArrowProgressBar .step.done:after {
        border-left: 17px solid #2f69aa;
    }
.Slider{
    margin-left:-10px;
    margin-right:-10px;
    margin-top:20px;
}
    .Slider .dx-tooltip { /*
        position: absolute !important;
        height: 50px !important;
        margin-top: 0px !important;
        top:0;
                             */
    }
    .Slider .dx-overlay-content { 
        display: inline-block !important;
        position: absolute !important;
        z-index: 1 !important;
        margin-top: -40px;
    }
    .Slider .dx-popup-content {
        position: relative !important;
        display: block !important;
        border-radius: 7px;
        color: white;
        padding: 5px 7px;
        font-weight: 200;
        background-color: rgba(97, 97, 97,.4);
        margin-bottom: 40px !important;
    }
    #LeadsInformationBox input, #LeadsInformationBox select {
        width: 50%;
    }
        #LeadsInformationBox select:hover{
            cursor:pointer;
        }
#LeadsInformationBox .RightEditBox:hover {
    background-color: #3ba654;
    border: 2px solid #3ba654;
}
.NewAccountPopupArea label {
    color: gray;
    margin: 0px;
    width: 100%;
    font-size: 14px;
}
.NewAccountPopupArea{
    padding-right:15px;
    padding-left:10px;
    height:500px !important;
}
    .NewAccountPopupArea input, .NewAccountPopupArea select {
        border: 1px solid gray;
        border-radius:5px;
        padding:5px;
        font-size: 15px;
        margin-bottom: 5px;
        width: 100%;
        display: inline-block;
    }
    .NewAccountPopupArea h4{
        font-size:16px;
        font-weight:500;
    }
.RedBorder{
    border:2px solid red !important;
}
.ContactsPopupArea{
    width:100%;
    text-align:center;
}
.ContactsPopupArea button {
    display: block;
    border: 2px solid silver;
    border-radius: 12px;
    width: 300px;
    height: 50px;
    background-color: white;
    margin-bottom: 20px;
    font-weight:bold;
    font-size:15px;
}
    .ContactsPopupArea button i{
        margin-left:5px;
    }
    .ContactsPopupArea button:hover {
        cursor: pointer;
        background-color: #ff5722;
    }
.PopupChecks{
    padding-top:10px;
}
.PopupChecks label {
    display: inline-block;
    width: 100px;
}
.PopupChecks input {
    display: inline-block !important;
    width: 50px;
}
/*========================= Portal Users ==========================*/

/*============================ MOBILE ==========================*/
@media only screen and (max-width: 800px) {
    .DashboardQuicklookBox {
                height: auto;
            }

            .DashboardContentBox {
                min-width: 300px;
            }
            .AccountAreaBody{
                display:block;
            }
            #HeaderButtons2{
                float:none;
                display:block;
            }
            .AccountArea2{
                margin:0px;
            }
            #IconHeadEdit{
                display:block;
            }
            #TitleIcon{
                display:none;
            }
            #AccountAssets {
                float: none;
                display: block;
            }
        }