/* specific changes for RedSkin overwriting the DefaultSkin
    branded colors:

    Text        #981E32
    Border      #860023       134,  0,      35      taken from the piston icon (83) 6th line from the bottom
    LightBack   #FFAABF       255,  170,    191     Bordercolor with a Luminace of 200
*/

/***************************/
/*                         */
/* BRAND INDEPENDANT STYLE */
/*                         */
/***************************/
/*       DASHBOARD         */
/***************************/

:root {
    --skin-color: #D52B1E;
    --skin-color-light: #DFA5A5;
}

body, html, .skinBG {
    background-color: rgba(190, 190, 190, 1);
}

/* octagon */
#octaWrapper polygon {
    stroke: var(--skin-color) !important;
}

body {
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover; /* Mozilla*/
    -o-background-size: cover; /* Opera*/
    background-size: cover; /* Generic*/
    height: initial;
}

html {
    background-color: transparent;
}

/*  SKINCOLOR + DASHBOARD  */
.panorama-section h4, .panorama-section h4 .win-commandicon {
    color: gray !important;
}

.skinColor {
    color: var(--skin-color);
    border-color: var(--skin-color);
}

.win-commandicon, .win-commandring {
    color: var(--skin-color);
    border-color: var(--skin-color);
}

#DB_FirstName2, #DB_LastName2 {
    color: var(--skin-color) !important;
}

.bg-scadar {
    background-color: dimgray !important;
    color: white !important;
}

.metro .horizontal-menu li a:hover {
    background-color: var(--skin-color) !important;
}

/* LANDINGSPAGE */
div#ContentContainer .metro a.tile.wide.publishBlockColor, div#ContentContainer .metro a.tile.square.publishBlockColor,
div#ContentContainer .metro a.tile.widepeek.myStuffBlockColor, .tile.square.imagetext.skinBackground.dimGrayBckgrnd, div#ContentContainer .uniqueBlockColor {
    background-color: darkGray;
    color: white;
}

div#ContentContainer .publishBlockColor .image-wrapper .icon, #databaseBoxHeightFix {
    color: white !important;
}

div#ContentContainer .dimGrayBckgrnd {
    background-color: darkGray !important;
}

div#ContentContainer .metro a.tile.widepeek.myStuffBlockColor, .tile.square.imagetext.skinBackground.dimGrayBckgrnd {
    background-color: dimGray;
}

div#ContentContainer .uniqueBlockColor {
    background-color: var(--skin-color);
    color: white;
}

div#ContentContainer .tile .textover-wrapper {
    background-color: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
}

.bg-skin-tile, div#userMenu span.active {
    background-color: var(--skin-color) !important;
}

/* FOOTER */
#footer {
    max-width: 1324px;
    margin: 0px auto;
    margin-top: 30px;
}

    #footer div#footerText {
        color: var(--skin-color);
    }

/***************************/

h1 {
    color: var(--skin-color);
}

.skinColor.loggerIconToAdd {
    color: darkgray;
}

div#ContentContainer .metro a.tile.wide.skinBackground, div#ContentContainer .metro a.tile.square.skinBackground, .skinBackground, .steps .detailOptionBox.active {
    background-color: var(--skin-color) !important;
}

div#ContentContainer .metro a.tile.wide.infoBlockColor, div#ContentContainer .metro a.tile.square.infoBlockColor, .infoBlockColor {
    background-color: var(--skin-color-light);
}

/* resetting some styles for buttons in ui-dialogs from jQuery */
.ui-dialog .ui-dialog-titlebar .ui-dialog-title {
    color: var(--skin-color);
}

.ui-widget {
    font-family: "Trebuchet MS", "Helvetica Neue", "Lucida Grande", "Segoe UI", "Arial", "Helvetica", "Verdana", sans-serif;
    font-size: 1em;
}

.ui-widget-content {
    border: 3px solid var(--skin-color);
    background-color: #EEEEEE;
    background-image: none;
}

#ToolBarTitleText {
    color: var(--skin-color);
}

#AW_CTableCreateNewButton:hover {
    border-color: var(--skin-color);
}

#SIM_Head_Popup, #AW_Info_Popup, #GRA_Info_Popup, #AW_InfoBS_Popup {
    background-color: var(--skin-color-light);
    border-color: rgb(134, 0, 35);
}

div.SIM_compDeletionContainer, div.AW_compDeletionContainer {
    background-color: var(--skin-color-light);
}

    div.SIM_compDeletionContainer:hover, div.AW_compDeletionContainer:hover {
        background-color: var(--skin-color);
    }

#SIM_copy_old_to_new img:hover {
    background-color: var(--skin-color);
}

/*
 * database page
 */

/* active row id */
#DT_CompressorTable tr.activeComRow td {
    background-color: var(--skin-color-light);
}

div#ContentContainer div#simulationTabs .ui-state-active {
    background: var(--skin-color-light);
}

/*
 * Publish Wizard
 */

/* page slider */
div#pageSlider {
    background-color: var(--skin-color-light);
}

    div#pageSlider .scrollBtn {
        background-color: var(--skin-color);
    }

    div#pageSlider #pageThumbsDoc {
        background-color: var(--skin-color-light);
    }

/* ACCORDION - jQuery UI*/
.gradientAcc {
    background-image: linear-gradient(bottom, rgb(255,195,195) 22%, rgb(255,255,255) 57%);
    background-image: -o-linear-gradient(bottom, rgb(255,195,195) 22%, rgb(255,255,255) 57%);
    background-image: -moz-linear-gradient(bottom, rgb(255,195,195) 22%, rgb(255,255,255) 57%);
    background-image: -webkit-linear-gradient(bottom, rgb(255,195,195) 22%, rgb(255,255,255) 57%);
    background-image: -ms-linear-gradient(bottom, rgb(255,195,195) 22%, rgb(255,255,255) 57%);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.22, rgb(255,195,195)), color-stop(0.57, rgb(255,255,255)) );
}