// --------------------------------------------------
// Core variables and mixins
// --------------------------------------------------

@import "../bootstrap/variables.less";
@import "../gmg-variables.less";
@import "../bootstrap/mixins.less";
@import "../ThemeVariables.less";

// --------------------------------------------------
// Body reset


:root,
:root.light {
    --btn-default-primary-bg-50: @primaryBaseColor-500;
    --btn-default-primary-bg-100: @LightPrimaryBaseColor-400;
    --btn-default-primary-bg-200: @LightPrimaryBaseColor-300;
    --btn-default-primary-bg-300: @LightPrimaryBaseColor-200;
    --btn-default-primary-bg-400: @LightPrimaryBaseColor-100;
    --btn-default-primary-bg-500: @LightPrimaryBaseColor-50;
    --btn-primary-text-color: #fffffff0;
    --btn-upload-primary-text-color: #fffffff0;
    --btn-bagde-text-color: #fffffff0;
    --horizontal-icon-color: #333333;
    --default-theme-feild-focus-color: inset 0 1px 1px @primaryFieldFocusColor, 0 0 8px @secondryFieldFocusColor;
    --horizontal-action-menu-icon-color: #fffffff0;
}

.darkmode {
    --btn-default-primary-bg-50: @primaryBaseColor-500;
    --btn-default-primary-bg-100: @DarkPrimaryBaseColor-600;
    --btn-default-primary-bg-200: @DarkPrimaryBaseColor-700;
    --btn-default-primary-bg-300: @DarkPrimaryBaseColor-800;
    --btn-default-primary-bg-400: @DarkPrimaryBaseColor-900;
    --btn-default-primary-bg-500: @DarkPrimaryBaseColor-950;
    --btn-primary-text-color: #fffffff0;
    --btn-upload-primary-text-color: #fffffff0;
    --horizontal-icon-color: #bdc1c6;
    --btn-bagde-text-color: #fffffff0;
    --default-theme-feild-focus-color: inset 0 0px 0px @primaryFieldFocusColor, 0 0 8px @secondryFieldFocusColor;
    --horizontal-action-menu-icon-color: #fffffff0;
}
// --------------------------------------------------

@sideMenuBarText: #666;

body {
    margin: 0;
    font-family: @pinkThemeBaseFontFamily;
}

// Links
// -----

.subnav .nav li.active > a, .accoutnSettingdNav ul li.active > a {
    color: #fff !important;
    background-color: @buttonTopColor ~'!important';
}

/*.navbar-inner a { color: @linksColor; }*/

/*#content a,
#footer a 
{
  color: #333;
}*/

/*a:hover {
  color: #404040!important;
}*/

/*.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
    color: #FFFFFF!important;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,

.dropdown-menu > .active > a:focus {
    color: #FFFFFF!important;
}*/

#sliderMenu ul li.active > a,
#sliderMenu ul li.active > a:hover /*,
.nav-pills .dropdown.open a.dropdown-toggle*/ {
    color: #fff !important;
    background-color: @buttonTopColor ~'!important';
}
.help-block a, #footer a {
    color: @buttonTopColor ~'!important';
}
.form-actions .btn[disabled] {
    background-color: @buttonTopColor ~'!important';
}

// WIZARD
// -------------------------
.wizard-steps {
    /*
	.completed-step a {
	    background: @pinkThemelinkColor;
	}
	.completed-step a:before, {
	    border-top: 19px solid @pinkThemelinkColor;
	    border-bottom: 19px solid @pinkThemelinkColor;
	}
	.completed-step a:after {
	    border-left: 19px solid @pinkThemelinkColor;
	}
*/
    .active-step a {
        background: @pinkThemelinkColor;
    }

    .active-step a:before {
        border-top: 19px solid @pinkThemelinkColor;
        border-bottom: 19px solid @pinkThemelinkColor;
    }

    .active-step a:after {
        border-left: 19px solid @pinkThemelinkColor;
    }
}

// NAVBAR
// -------------------------

/*.navbar-inner {
  #gradient > .vertical(@headerTopColor, @headerBottomColor);
      //border-bottom: 1px solid @pinkThemeNavbarBorder;
      //.box-shadow(0 1px 4px rgba(0,0,0,.20));
}*/

// Brand, links, text, and buttons
.navbar {
    color: @pinkThemeNavbarText;
    // Website or project name
    .brand {
        color: @pinkThemeNavbarBrandColor;
    }

    .navbar-link {
        color: @pinkThemeNavbarLinkColor;

        &:hover {
            color: @pinkThemeNavbarLinkColorHover;
        }
    }
}
// Navbar search
.navbar-search {
    .search-query {
        color: @white;
        background-color: @pinkThemeNavbarSearchBackground;
        border: 1px solid @pinkThemeNavbarSearchBorder;
        .placeholder(@pinkThemeNavbarSearchPlaceholderColor);

        &:focus,
        &.focused {
            color: @grayDark;
            background-color: @pinkThemeNavbarSearchBackgroundFocus;
        }
    }
}

// Links
/*.navbar .nav > li > a {
  //color: darken(@pinkThemeNavbarLinkColor, 15%);  
  //text-shadow: 0 1px 0 rgba(0,0,0,.25);
}*/

// Hover
/*.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  background-color: @pinkThemeNavbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
  color: @pinkThemeNavbarLinkColorHover;
  text-decoration: none;
}*/

// Active nav items
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
    /*color: @pinkThemeNavbarLinkColorActive;
    border-bottom: 3px solid @pinkThemeNavbarLinkBackgroundActive;*/
    color: @buttonTopColor ~'!important';
    border-bottom: 3px solid @buttonTopColor;
}


// Dividers (basically a vertical hr)
.navbar .divider-vertical {
    background-color: @pinkThemeNavbarBackground;
    border-right: 1px solid @pinkThemeNavbarBackgroundHighlight;
}

// Remove background color from open dropdown
/*.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
  background-color: @pinkThemeNavbarLinkBackgroundActive;
  color: @pinkThemeNavbarLinkColorActive;
}

.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
  border-top-color: @pinkThemeNavbarLinkColorActive;
  border-bottom-color: @pinkThemeNavbarLinkColorActive;
}
*/
// NAV LIST
// --------
.nav-list > .active > a,
.nav-list > .active > a:hover {
    color: @white;
    text-shadow: 0 -1px 0 rgba(0,0,0,.2);
    background-color: @pinkThemelinkColor;
}

// PILLS
// -----
// Active state

.nav-pills > .active > a,
.nav-pills > .active > a:hover {
    /*color: @white;
    background-color: @pinkThemelinkColor;*/
    color: @buttonTopColor ~'!important';
    border-bottom: 3px solid @buttonTopColor;
}


// DROPDOWNS
// ---------


// Hover state
// -----------
/*.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
  text-decoration: none;
  color: @pinkThemeDropdownLinkColorHover;
  background-color: @pinkThemeDropdownLinkBackgroundHover;
  #gradient > .vertical(@pinkThemeDropdownLinkBackgroundHover, darken(@pinkThemeDropdownLinkBackgroundHover, 5%));
}*/


// Default dropdown links
// -------------------------
// Make carets use linkColor to start
.nav-tabs .dropdown-toggle .caret,
.nav-pills .dropdown-toggle .caret {
    border-top-color: @pinkThemelinkColor;
    border-bottom-color: var(--btn-default-primary-bg-50) !important;
}

.nav-tabs .dropdown-toggle:hover .caret,
.nav-pills .dropdown-toggle:hover .caret {
    border-top-color: @pinkThemelinkColorHover;
    border-bottom-color: @pinkThemelinkColorHover;
}

// Navbar button for toggling navbar items in responsive layouts
.navbar .btn-navbar {
    .buttonBackground(@pinkThemeNavbarBackgroundHighlight, @pinkThemeNavbarBackground);
}

// THUMBNAILS
// ----------
a.thumbnail:hover {
    border-color: #666 !important;
}

.thumbnail-view {
    .approval-grid {
        li.block {
            .thumbnail {
                .approval {
                    .cell {
                        a {
                            .img-frame {
                                // Add a hover state for linked versions only
                                &:hover {
                                    border-color: @pinkThemelinkColor;
                                }
                            }
                            // img-frame
                        }
                        //a
                    }
                    //cell
                }
                //approval
            }
            //thumbnail
        }
        //block
    }
    //approval-grid
}
//thumbnail-view


// Alternate buttons
// --------------------------------------------------

// Set text color
// -------------------------
.btn-primary,
.btn-primary:hover {
    color: @white;
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}

.btn-primary.active {
    color: rgba(255,255,255,.75);
}
// Set the backgrounds
// -------------------------


// WIDGET HEADER
// ---------------

/*.widget-header {
	.widget-links {	
    	li a:hover {
		    color:@pinkThemeWidgetHeaderLinkColorHover;
    	}
    }
}*/

// CHOSEN
// ---------------

.chzn-container .chzn-results .highlighted {
    background-color: var(--btn-default-primary-bg-50) !important;
    /*#gradient > .vertical(@pinkThemeBtnPrimaryBackground, @pinkThemeBtnPrimaryBackgroundHighlight);
  color: #fff;*/
}

.chzn-container-active .chzn-choices {
    border: 1px solid @buttonTopColor ~'!important';
}

// RESPONSIVE
// --------------------------------------------------

@media (max-width: 979px) {
    .nav-collapse .nav .nav-header {
        color: @pinkThemeNavbarText;
    }

    .nav-collapse .nav > li > a,
    .nav-collapse .dropdown-menu a {
        color: @pinkThemeNavbarLinkColor;
    }

    .nav-collapse .nav > li > a:hover,
    .nav-collapse .dropdown-menu a:hover {
        background-color: @pinkThemeNavbarBackground;
    }

    .nav-collapse .navbar-form,
    .nav-collapse .navbar-search {
        border-top: 1px solid @pinkThemeNavbarBackground;
        border-bottom: 1px solid @pinkThemeNavbarBackground;
    }
}

/*#footer {background : @footerColor}*/

#login-form input.input-xlarge {
    height: 30px !important;
    width: 285px !important;
}

.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
    background-color: #666 !important;
    color: #fff !important;
}

/*.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.nav-pills > .active > a:focus {
  background-color: #666!important;
  color:#fff!important;
}*/

.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a,
.czn-add-approvals-right li:hover {
    text-decoration: none;
    color: @pinkThemeDropdownLinkColorHover;
    background-color: @buttonTopColor ~'!important';
    background-image: none !important;
    /*background-image: -moz-linear-gradient(top, @buttonTopColor, @buttonBottomColor);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@buttonTopColor), to(@buttonBottomColor));
  background-image: -webkit-linear-gradient(top, @buttonTopColor, @buttonBottomColor);
  background-image: -o-linear-gradient(top, @buttonTopColor, @buttonBottomColor);
  background-image: linear-gradient(to bottom, @buttonTopColor, @buttonBottomColor);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff049cdb', endColorstr='#ff048ac2', GradientType=0);*/
}

/*.navbar .nav li.dropdown > .dropdown-toggle .caret
{
    border-top-color: @linksColor;
    border-bottom-color: @linksColor;
}*/

.navbar .nav > li > a {
    text-shadow: none !important;
}

#approvalsFoldersSideBar ul li .title a {
    color: #333333;
}

#approvalsFoldersSideBar ul li .dropdown-menu li a:hover {
    color: #fff !important;
}

.czn-add-approvals-right li:hover {
    background-image: Black !important;
}

.czn-profile .czn-profile-item:hover .selectable,
.czn-approval-item.czn-profile.active,
.czn-profile .czn-profile-item:hover .fa-dot-circle-o,
.czn-profile-item:hover .fa.fa-circle-o {
    color: #FFF !important;
    background-color: @buttonTopColor ~'!important';
}

.czn-approval-item.czn-profile.active {
    background-color: @buttonTopColor ~'!important';
}

.pagination ul > .active > a {
    color: #999 !important;
}

.modal-header .close {
    color: rgb(0, 0, 0) !important;
}

.btn-primary {
    .buttonBackground(@buttonTopColor, @buttonBottomColor)!important;
}

/*Start CA-903 Dark Theme handle in setting*/

.btn-primary {
    color: var(--btn-upload-primary-text-color) !important;
    background: var(--btn-default-primary-bg-50);
    border: 1px solid var(--btn-default-primary-bg-50);
}

.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
    color: var(--btn-default-primary-bg-400) !important;
    border-bottom: 3px solid var(--btn-default-primary-bg-400);
}

.btn-primary.active, .btn-primary[disabled] {
    background: var(--btn-default-primary-bg-300) !important;
    border: 1px solid var(--btn-default-primary-bg-300) !important;
    color: var(--btn-upload-primary-text-color) !important;
}

.label-info, .badge-info {
    background-color: var(--btn-default-primary-bg-300) !important;
}

.chzn-container-active .chzn-choices {
    border: 1px solid var(--btn-default-primary-bg-50) !important;
}

.thumbnail-view .approval-grid li.block .thumbnail label.selected {
    border: 1px solid var(--btn-default-primary-bg-50) !important;
}

.btn-toolbar .btn-border.btn {
    color: var(--btn-default-primary-bg-50) !important;
    border: 1px solid var(--btn-default-primary-bg-50) !important;
}

.btn-toolbar .btn-border.btn:hover {
    color: var(--btn-primary-text-color) !important;
    background: var(--btn-default-primary-bg-50) !important;
}

.a-user-selector li.active .role-selector .btn-group .label-inverse, .a-user-selector li.active .role-selector .btn-group .badge-inverse {
    color: var(--btn-bagde-text-color) !important;
    background-color: var(--btn-default-primary-bg-50) !important;
    border: 1px solid var(--btn-default-primary-bg-50) !important;
}

.report-container .page-header .btn.btn-primary.pull-right {
    color: var(--btn-primary-text-color) !important;
    background: var(--btn-default-primary-bg-50) !important;
    border: 1px solid var(--btn-default-primary-bg-50) !important;
}

.form-actions .btn.btn-primary.upper.pull-right {
    color: var(--btn-primary-text-color) !important;
    background: var(--btn-default-primary-bg-50) !important;
    border: 1px solid var(--btn-default-primary-bg-50) !important;
}

.decisions .label.labelVideo {
    color: var(--btn-upload-primary-text-color) !important;
}

.accoutnSettingdNav ul li.active > a {
    color: var(--btn-primary-text-color) !important;
    background: var(--btn-default-primary-bg-50) !important;
}

.subnav.accoutnSettingdNav ul li.active > a {
    background: var(--btn-default-primary-bg-50);
    color: var(--btn-upload-primary-text-color);
}

#btnChooseFile {
    color: var(--btn-upload-primary-text-color) !important;
    background-color: var(--btn-default-primary-bg-200) !important;
    border: 1px solid var(--btn-default-primary-bg-200) !important;
}

#btnCaptureFromWeb {
    color: var(--btn-upload-primary-text-color) !important;
    background-color: var(--btn-default-primary-bg-50) !important;
    border: 1px solid var(--btn-default-primary-bg-50) !important;
}

#sliderMenu ul li.active > a {
    background-color: var(--btn-default-primary-bg-50) !important;
}

.nav-colored .badge-inverse {
    background-color: var(--btn-default-primary-bg-200) !important;
    color: var(--btn-bagde-text-color) !important;
}

.label-info, .badge-info {
    background-color: var(--btn-default-primary-bg-50) !important;
}

.a-user-selector li.active .role-selector .btn-group .ellipsisButton {
    color: var(--btn-bagde-text-color) !important;
    background-color: var(--btn-default-primary-bg-50) !important;
    border: 1px solid var(--btn-default-primary-bg-50) !important;
}

a {
    color: var(--btn-default-primary-bg-400);
}

.ellipsisButton .icon-ellipsis-horizontal, .ellipsisButtonList .icon-ellipsis-horizontal {
    color: var(--horizontal-icon-color) !important;
}

textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {
    box-shadow: var(--default-theme-feild-focus-color) !important;
}

input[type=checkbox], input[type=radio] {
    accent-color: var(--btn-default-primary-bg-50) !important;
}

.a-user-selector li.active .role-selector .btn.btn-mini.ellipsisButton .icon-ellipsis-horizontal {
    color: var(--horizontal-action-menu-icon-color) !important;
}

.filter-bar-bottom .dropdown.dropup.open .dropdown-menu li a:hover {
    color: #fff !important;
}

.totalfileCount {
    color: var(--btn-default-primary-bg-50);
}

.tabs-container .nav-tabs > li.active a {
    color: var(--btn-default-primary-bg-50) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--btn-default-primary-bg-50) !important;
    color: white;
}

.breadcrumb a {
    color: var(--btn-default-primary-bg-50) !important;
}

.a-user-selector li.active dl {
    background-color: var(--btn-default-primary-bg-300) !important;
    border: 1px solid var(--btn-default-primary-bg-300) !important;
}

.a-user-selector li.active dt {
    color: var(--btn-upload-primary-text-color) !important;
}

.a-user-selector li.active.disabled dl {
    background-color: var(--btn-default-primary-bg-300) !important;
    border: 1px solid var(--btn-default-primary-bg-300) !important;
}

.a-user-selector li.active dl dd {
    color: var(--btn-upload-primary-text-color) !important;
}

.thumbnail-view .approval-grid li.block .thumbnail label:hover {
    background-color: var(--btn-default-primary-bg-500) !important;
}

.report-container .page-header .btn.btn-primary.pull-right {
    background-color: var(--btn-default-primary-bg-200) !important;
}
/*End CA-903 Dark Theme handle in setting*/