/* Define Main Colors */
:root {
    /* BRAND COLORS */
    --first-color: #f0f0f0; /* Background color (gray) */
    --second-color: #0C253F; /* Left side menu background, buttons, top menu (oxford blue) */
    --third-color: #fff; /* Header banner text color, button text color, breadcrumb hover text (white) */
    --fourth-color: #21D182; /* Header banner background color (green) */
    /* Buttons */
    --button-borderRadius: 32px;
    /* blocks */
    --blocks-borderRadius: 8px;
    /* info boxes */
    --infobox-background-image: '';
    --infobox-padding: 64px;
    /* forms */
    --forms-borderRadius: 8px;
}

/* ===========================
   BODY and Defaults
   =========================== */

body, .cl-mcont{
    background-color: var(--first-color);
}
.logo-wrapper{
    background-color: var(--second-color);
}
#ctl00_DivProfileCompletion{
    display:none;
}

/* ===========================
   Create Service
   =========================== */

#ctl00_ContentModals_CSItemCRUForm_Image1{
    border: 1px dashed #CCC;
}
.cm-custom-property-loader{
    display: none;
}
.cm-custom-property-divider{
    background-color: #f0f0f0 !important;
}

/* ===========================
   Service Overview Tabs
   =========================== */

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover{
    border-top: 2px solid var(--second-color);
}
.nav-tabs > li > a:hover{
    color: var(--fourth-color);
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{
    border-top: 2px solid var(--second-color);
}

/* ===========================
   LEFT NAV BAR
   =========================== */
#cl-wrapper .cl-sidebar, #cl-wrapper .cl-sidebar .collapse-button{
    background-color: var(--second-color);
}
#cl-wrapper .cl-vnavigation li a {
    color: var(--third-color);
    border-top: unset;
}
.sb-collapsed .cl-vnavigation li a i{
    font-size: 24px;
    margin-right: 7px;
}
#cl-wrapper .cl-vnavigation .active > a, #cl-wrapper .cl-vnavigation li a:hover{
    background-color: var(--fourth-color);
    color: #FFF;
}
.cl-vnavigation{
    border-top: unset !important;   
}
.cl-vnavigation .active > a, .cl-vnavigation .parent ul li.active a{
    border-left: 2px solid var(--fourth-color);
}
#cl-wrapper .cl-vnavigation li ul{
    background-color: var(--second-color);
}
#sidebar-collapse>i{
    color: #FFF !important;
}
#cl-wrapper .cl-sidebar .collapse-button button:hover{
    background-color: var(--fourth-color);
}
.dropdown-header{
    color: var(--second-color);
}
#sub-menu-nav > ul li > a:hover, #sub-menu-nav > ul li ul li a:hover{
    background-color: var(--first-color);
    color: var(--second-color);
}

.menu-header {
    font-weight: 600;
}

/* ===========================
   BUTTONS
   =========================== */
.btn{
    border-radius: var(--button-borderRadius);
}
.btn-default, .btn-primary, .btn-info, .btn-success, .btn-warning{
    background-color: var(--second-color);
    color: var(--third-color);
	opacity: 0.8;
}
.btn-default:hover, .btn-primary:hover, .btn-info:hover,.btn-default:focus, .btn-primary:focus, .btn-info:focus,.btn-default:active, .btn-primary:active, .btn-info:active,.btn-default:active, .btn-primary:active, .btn-info:active, .open .dropdown-toggle.btn-primary, .btn-success:hover,.btn-success:focus,.btn-success:active, .btn-warning:hover,.btn-warning:focus,.btn-warning:active{
    background-color: var(--second-color);
    color: var(--third-color);
	opacity: 1; 
}
.btn-warning, .btn-warning:focus{
	background-color: var(--second-color);
}
.btn-selected {
    background-color: var(--fourth-color);
    color: var(--third-color);
    opacity: 0.8;
}

.btn-group-select > .btn, .btn-group-vertical > .btn {
    position: relative;
    float: left;
}

.btn-group-select > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group-select > .btn:last-child:not(:first-child):not(.dropdown-toggle) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-group-select > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
}

    /*disable buttons*/
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary.active[disabled],
.btn-warning[disabled],
fieldset[disabled] .btn-primary.active {
    background-color: #999;
    border-color: #999;
    color: #fff;
}


/* ===========================
   BLOCKS
   =========================== */
.block-flat{
    border-radius: var(--blocks-borderRadius);
}
.block-flat > .header{
    margin-top: -20px;
    margin-left: -20px;
    margin-right: -20px;
    padding: 16px;
    border-top-left-radius: var(--blocks-borderRadius);
    border-top-right-radius: var(--blocks-borderRadius);
}
.block-flat > .header > .actions{
    margin-top: 8px;
}
.block-flat > .header > .actions a{
    background-color: var(--second-color);
    display: inline-block;
    width: 32px;
    height: 32px;
    color: #fff;
    text-align: center;
    line-height: 32px;
    border-radius: 4px;
    cursor: pointer;
}
.block-flat > .header > .actions a[data-modal="modalNewItem"],.block-flat > .header > .actions > a[data-modal="nceModal"]{
    background-color: #2CC36B;
}
.block-flat > .header > .actions > .close-down{
    display: none; 
}

/* ===========================
   INFO BOXES
   =========================== */
.info-box{
    background-color: var(--fourth-color);
    color: var(--third-color);
    padding: var(--infobox-padding);
    background-image: var(--infobox-background-image);
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
}
.block-flat.info-box .header{
    border-bottom: unset;
}
.info-box > .content {
    margin-right: 370px;
}
#ctl00_contentBody_PageHeaderInfo_actionButtons, #contentBody_PageHeaderInfo_actionButtons, #ctl00_contentBody_ReservedInstancesPageMenu_actionButtons, .info-box .minimize{
    display: none !important;
}

.alert-white-alt.alert-info .icon,
.alert-white-alt.alert-info .icon:after {
    border-color: #2cc36b;
    background: #2cc36b;
}

/*Alert White alt 1*/
.alert-white-alt {
    border-width: 2px;
    background: #fff;
    color: #404040;
    padding-left: 61px;
    position: relative;
}

.alert-info {
    border-color: #2cc36b;
}

/* ===========================
   FORMS
   =========================== */
.form-control{
    border-radius: var(--forms-borderRadius);
}
.input-group .form-control:not(:first-child):not(:last-child){
    border-bottom-right-radius: var(--forms-borderRadius);
    border-top-right-radius: var(--forms-borderRadius);
}

/* ===========================
   SERVICE SELECTOR
   =========================== */

.ms-container .ms-selectable li.ms-hover, .ms-container .ms-selection li.ms-hover {
	background-color: var(--second-color);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: var(--second-color);
}

/* ===========================
   LINKS
   =========================== */
a, .breadcrumb a, .service-proc-table h4{
    color: var(--second-color);
}
a:hover, .service-proc-table h4:hover{
    color: var(--fourth-color);
}
.breadcrumb a:hover{
    background-color: var(--fourth-color);
    color: var(--third-color);
}


/* ===========================
   DROPDOWN MENUS
   =========================== */
.dropdown-menu > li > a:hover{
    background-color: var(--second-color);
    color: var(--third-color);
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background: var(--second-color);
}

/* ===========================
   NAV MENU
   =========================== */
#service-nav.topbar{
    background-color: unset;
    border-bottom: unset;
}
#service-nav.topbar .navbar-nav > li > a{
    color: var(--second-color);
    padding: 16px 8px;
}
#service-nav.topbar .navbar-nav > .active > a{
    background-color: unset;
    border-bottom: 3px solid var(--second-color);
    color: var(--second-color);
}
#service-nav.topbar .navbar-nav > li > a:hover, #service-nav.topbar .navbar-nav > .active > a, #service-nav.topbar .navbar-nav > .active > a:hover{
    background-color: unset;
    color: var(--second-color);
    border-bottom: 3px solid var(--second-color);
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus{
    background-color: var(--first-color);
}


/* ===========================
   PROGRESSBAR
   =========================== */
.progress-bar{
    background-color: var(--second-color);
}

/* ===========================
   BADGES
   =========================== */
.badge-info{
    background-color: var(--fourth-color) !important;
}

.badge-primary{
    background-color: var(--fourth-color) !important;
}

/* ===========================
   MODALS
   =========================== */

.colored-header.info .modal-header{
    background-color: var(--fourth-color);
    color: var(--third-color);
    border-bottom: 5px solid var(--first-color) !important;
}

/* ===========================
   LABELS
   =========================== */
.label-info, .label-info[href]{
    background-color: var(--second-color);
    color: var(--third-color);
}
.label-info:hover, .label-info[href]:hover{
    background-color: var(--fourth-color);
    color: var(--third-color);
}


/* =============================
   UI FIXES
   ============================= */


/* Hide the profile Name */
.cm-default-profile-name{
    display: none;
}

/* Hide the message icon in the top bar */
.navbar-right > li:nth-child(7){
    display:none;
}

/* REMOVE SERVICE RATING STARS */
#headerRatingContainer{
    display: none;
}

/* FIX AGREEMENT BOX */
.agreement-container{
    border: 1px solid #ccc;
    max-height: 200px;
    overflow: scroll; 
    margin: 16px 0px;
}

/* FIX TOP PADDING OF MENU */
.cl-vnavigation{
    padding-top: 0px !important;
}

/* FIX INFO BOXES BOTTOM MARGIN */
.info-box{
    margin-bottom: 20px;
}

/* FIX PADDING AT TOP OF ALL PAGES */
#UpdatePanelContent>.cl-mcont>.row:nth-child(1){
    margin-top: 0px;
}

/*SIDE BAR LOGO*/
.left-nav-logo {
    height: 54px;
    background-color: var( --second-color);
    text-align: left;
}

/*Gritter*/
.gritter-item-wrapper.info {
    background: #2cc36b;
}

/*Headers*/
.header-title {
    font-size: 26px
}

.sub-title{
    font-size: 16px;
    line-height: 26px
}

.block-flat .header-content {
    margin-bottom: 0px
}