/**
 * CONFIGURATION
 * Browsers: > 1%,last 2 versions
 *
 * ROOT VARIABLES
 * Here you can edit all variables that will affect the look.
 */
 :root {
    --color-black: #000;
    --color-white: #fff;
    --color-brand: #870F26;
    --color-primary: #870F26;
    --color-primary-dark: #870F26;
    --color-success: #759372;
    --color-secondary: var(--color-success);
    --color-warning: #ebdf8a;
    --color-danger: #dd5e5e;
    --sidebar-color-background: var(--color-primary);
    --color-text: var(--color-primary-dark);
    /**
     * RGB VARIATIONS
     * you can convert colors from Hexadecimal to RGB with tools like
     * https://www.rgbtohex.net/hextorgb/
     */
    --color-primary-rgb: 76, 65, 132;
    --color-primary-dark-rgb: 45, 39, 79;
    --color-success-rgb: 42, 202, 23;
    --color-secondary-rgb: var(--color-success-rgb);
    --color-warning-rgb: 255, 223, 0;
    --color-danger-rgb: 255, 73, 73;
}

/**
 * TEXT
 */
a, a:visited {
    color: var(--color-primary);
}

body, html,
.mainpanel.bp h1,
.mainpanel.bp h2,
.mainpanel.bp h3,
.mainpanel.bp h4,
.mainpanel.bp h5 {
    color: var(--color-text);
}

/**
 * BUTTONS
 */
.btn.active,
a.btn.active {
    color: var(--color-white);
    border-color: var(--color-brand);
    background: var(--color-primary);
}

a.btn-primary,
a.btn-primary,
a.btn-primary,
a.btn-primary[contenteditable=true],
.btn-primary,
.btn-primary,
.btn-primary,
.btn-primary[contenteditable=true] {
    color: var(--color-white);
    border-color: var(--color-brand);
    background: var(--color-primary);
}

a.btn-success,
a.btn-success,
a.btn-success,
a.btn-success[contenteditable=true],
.btn-success,
.btn-success,
.btn-success,
.btn-success[contenteditable=true] {
    color: var(--color-white);
    border-color: var(--color-success);
    background: var(--color-success);
}

a.btn-secondary,
a.btn-secondary,
a.btn-secondary,
a.btn-secondary[contenteditable=true],
.btn-secondary,
.btn-secondary,
.btn-secondary,
.btn-secondary[contenteditable=true] {
    color: var(--color-white);
    border-color: var(--color-secondary);
    background: var(--color-secondary);
}

a.btn-warning,
a.btn-warning,
a.btn-warning,
a.btn-warning[contenteditable=true],
.btn-warning,
.btn-warning,
.btn-warning,
.btn-warning[contenteditable=true] {
    color: var(--color-white);
    border-color: var(--color-warning);
    background: var(--color-warning);
}

a.btn-danger,
a.btn-danger,
a.btn-danger,
a.btn-danger[contenteditable=true],
.btn-danger,
.btn-danger,
.btn-danger,
.btn-danger[contenteditable=true] {
    color: var(--color-white);
    border-color: var(--color-danger);
    background: var(--color-danger);
}

a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary.active,
a.btn-primary[contenteditable=true],
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.active,
.btn-primary[contenteditable=true] {
    color: var(--color-white);
    border-color: var(--color-brand);
    background: var(--color-primary);
}

a.btn-success:hover,
a.btn-success:focus,
a.btn-success.active,
a.btn-success[contenteditable=true],
.btn-success:hover,
.btn-success:focus,
.btn-success.active,
.btn-success[contenteditable=true] {
    color: var(--color-white);
    border-color: var(--color-success);
    background: var(--color-success);
}

a.btn-secondary:hover,
a.btn-secondary:focus,
a.btn-secondary.active,
a.btn-secondary[contenteditable=true],
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary.active,
.btn-secondary[contenteditable=true] {
    color: var(--color-white);
    border-color: var(--color-secondary);
    background: var(--color-secondary);
}

a.btn-warning:hover,
a.btn-warning:focus,
a.btn-warning.active,
a.btn-warning[contenteditable=true],
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.active,
.btn-warning[contenteditable=true] {
    color: var(--color-white);
    border-color: var(--color-warning);
    background: var(--color-warning);
}

a.btn-danger:hover,
a.btn-danger:focus,
a.btn-danger.active,
a.btn-danger[contenteditable=true],
.btn-danger:hover,
.btn-danger:focus,
.btn-danger.active,
.btn-danger[contenteditable=true] {
    color: var(--color-white);
    border-color: var(--color-danger);
    background: var(--color-danger);
}

/**
 * TOOLS / ACTION BUTTONS
 */
.mainpanel.bp .actions.greentask a.tasksy {
    color: var(--color-white);
}

.mainpanel.bp .actions.greentask .tasksy {
    border-color: var(--color-brand);
    background: var(--color-primary);
}

.mainpanel.bp .actions.greentask .tasksy:hover {
    border-color: var(--color-brand);
    background: var(--color-primary);
}

.mainpanel.bp .actions.greentask .tasksy span.taskyar {
    border-color: var(--color-brand);
    background-color: white;
}

.mainpanel.bp .actions.greentask .tasksy:hover span.taskyar {
    border-color: var(--color-brand);
    background-color: white;
}

/**
 * TABS
 */
.tab-item>a {
    color: var(--color-primary);
}

.mainpanel.bp .content_tabs li a,
#facebox .content_tabs li a {
    color: var(--color-primary);
}

/**
 * SIDEBAR
 */
.sidebar {
    color: var(--color-white);
    background: var(--sidebar-color-background);
}

.sidebar .tab-item {
    border-color: rgba(255, 255, 255, .1);
    background: rgba(0, 0, 0, .4);
}

.sidebar .tab-item>a {
    color: var(--color-white);
}

@media (min-width: 768px) {
    .sidebar.sidebar-collapsed .tab-contents>.tab-content nav {
        background: var(--sidebar-color-background);
    }
}

@media (min-width: 768px) {

    .sidebar.sidebar-collapsed .tab-item.tab-in-preview,
    .sidebar.sidebar-collapsed .tab-item.active {
        border-color: rgba(255, 255, 255, .1);
        background: rgba(0, 0, 0, .4);
    }
}

@media (min-width: 768px) {
    .sidebar.sidebar-collapsed .tab-item.active {
        border-color: rgba(255, 255, 255, .1);
        background: rgba(0, 0, 0, .4);
    }
}

.sidebar ul a.active:before,
.sidebar ul a.active:focus:before,
.sidebar ul a.active:hover:before {
    background: var(--color-brand);
}

.sidebar ul a.active,
.sidebar ul a.active:focus,
.sidebar ul a.active:hover {
    background: rgba(255, 255, 255, .1);
}

.sidebar ul a .label {
    background: rgba(0, 0, 0, .4);
}

.sidebar ul a.active .label,
.sidebar ul a.active:focus .label,
.sidebar ul a.active:hover .label {
    color: var(--color-primary);
    background: var(--color-white);
}

.onapp-credits {
    background: var(--sidebar-color-background);
}

/**
 * TOPBAR
 */
section.sidebar~main .topbar {
    border-bottom-color: var(--sidebar-color-background);
    background: var(--sidebar-color-background);
}

.topbar .btn:not([class*="btn-"]) {
    background: var(--sidebar-color-background);
}

.topbar .btn {
    border-color: rgba(255, 255, 255, .3);
    border-left-color: 1px solid rgba(255, 255, 255, .2);
}

.sidebar-trigger {
    border-right-color: rgba(255, 255, 255, .2) !important;
}

/**
 * PREVIOUS NEXT
 */
.button[type='submit']:not(.common-button),
.button.next:not(.common-button),
.button.create:not(.common-button),
.round-button[type='submit']:not(.common-button),
.round-button.next:not(.common-button),
.round-button.create:not(.common-button) {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
}

.button.previous,
.round-button.previous {
    border-color: var(--color-primary);
    background-color: var(--color-primary) !important;
}

/**
 * SWITCH
 */
body .switch_container label.switch_label_on,
.mainpanel.bp .switch_container label.switch_label_on {
    background: var(--color-brand);
}


.switch input[type=checkbox]:focus:enabled + label:before,
.switch input[type=checkbox]:hover:enabled + label:before
{
    background: var(--color-primary-dark);
}
.switch input[type=checkbox]:checked + label
{
    background: var(--color-primary);
}
.switch.error input[type=checkbox]:checked + label,
.error .switch input[type=checkbox]:checked + label
{
    background: var(--color-danger);
}

.switch-primary input[type=checkbox]:checked + label
{
    background: var(--color-primary);
}

.switch-secondary input[type=checkbox]:checked + label
{
    background: var(--color-secondary);
}

.switch-warning input[type=checkbox]:checked + label
{
    background: var(--color-warning);
}
.switch-warning label
{
    -webkit-box-shadow: 0 0 0 1px var(--color-warning) !important;
       -moz-box-shadow: 0 0 0 1px var(--color-warning) !important;
            box-shadow: 0 0 0 1px var(--color-warning) !important;
}

.switch-success input[type=checkbox]:checked + label
{
    background: var(--color-success);
}

.switch-danger input[type=checkbox]:checked + label
{
    background: var(--color-danger);
}
.switch-danger label
{
    -webkit-box-shadow: 0 0 0 1px var(--color-danger) !important;
       -moz-box-shadow: 0 0 0 1px var(--color-danger) !important;
            box-shadow: 0 0 0 1px var(--color-danger) !important;
}


/**
 * RADIO BUTTON
 */
div.radio span.checked {
    background: var(--color-brand);
}

/**
 * CHECKBOX
 */
div.checker span.checked {
    background-color: var(--color-primary);
}

/**
 * SELECT
 */
.mainpanel.bp .chzn-container.chzn-container-multi .chzn-choices li.search-choice,
#facebox .chzn-container.chzn-container-multi .chzn-choices li.search-choice,
.dialog .chzn-container.chzn-container-multi .chzn-choices li.search-choice {
    background: var(--color-brand);
}

/**
 * PANEL
 */
.panel-header,
.panel-container {
    background: var(--color-white);
}

/**
 * NOTIFICATIONS AND PANELS
 */
.mainpanel.bp p.desc, .mainpanel.bp div.desc {
    padding: 10px 20px;
    color: var(--color-black);
    background: var(--color-warning);
}

.notify-primary .panel-container {
    color: var(--color-black);
    background: var(--color-primary) !important;
}

.notify-success .panel-container {
    color: var(--color-black);
    background: var(--color-success) !important;
}

.notify-secondary .panel-container {
    color: var(--color-black);
    background: var(--color-secondary) !important;
}

.notify-warning .panel-container {
    color: var(--color-black);
    background: var(--color-warning) !important;
}

.notify-danger .panel-container {
    color: var(--color-black);
    background: var(--color-danger) !important;
}

.note {
    background: var(--color-primary-dark);
}

.note-primary:before {
    color: var(--color-primary);
}

.note-success:before {
    color: var(--color-success);
}

.note-secondary:before {
    color: var(--color-secondary);
}

.note-warning:before {
    color: var(--color-warning);
}

.note-danger:before {
    color: var(--color-danger);
}

/**
 * DIAL
 */
.dialbar {
    background: var(--color-white);
}

.dial-stats [class*=col-]>span {
    color: var(--color-primary);
}

.dialer {
    border-color: var(--color-primary);
    background: var(--color-white);
    box-shadow: none;
    -webkit-box-shadow: none;
}

.dialer-container .icons-mask,
.dialbar-wrapper-sticky,
.dial-icons-container:after {
    background: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.dialbar-wrapper-sticky {
    background: var(--color-white);
}


.dial-icons [class*=dial-icon-] {
    color: var(--color-primary);
}

.dialer-arrow {
    border-bottom-color: var(--color-primary);
}

.dial-items .dial-item.current a {
    color: var(--color-primary);
}

/**
 * TEMPLATES
 */
.mainpanel.bp .templates_block .templates_right .template_info .template_info_right .price div {
    color: #ffffff;
    background: var(--color-primary);
}

/**
 * TABLES
 */
table.data td .icon.off:before,
table.data td .icon.offline:before,
table.data td .icon.red:before {
    color: var(--color-danger);
}

table.data td .icon.on:before,
table.data td .icon.online:before,
table.data td .icon.green:before {
    color: var(--color-success);
}

table.data td .icon.success:before {
    color: var(--color-success);
}

.mainpanel.bp table.data tbody td.approval span,
.mainpanel.bp table.data tbody td.downloading span,
.mainpanel.bp table.data tbody td.notice span,
.mainpanel.bp table.data tbody td.pending span,
#facebox table.data tbody td.approval span,
#facebox table.data tbody td.downloading span,
#facebox table.data tbody td.notice span,
#facebox table.data tbody td.pending span {
    background-color: rgba(var(--color-primary-rgb), 0.3);
}

td.icon.notice span:before,
span.icon.widget-search.notice span:before {
    color: var(--color-primary);
}

.mainpanel.bp table.data tbody td.warn span,
#facebox table.data tbody td.warn span {
    background-color: rgba(var(--color-warning-rgb), 0.3);
}

td.icon.warn span:before,
span.icon.widget-search.warn span:before {
    color: var(--color-warning);
}

.mainpanel.bp table.data tbody td.active span,
.mainpanel.bp table.data tbody td.approved span,
.mainpanel.bp table.data tbody td.complete span,
#facebox table.data tbody td.active span,
#facebox table.data tbody td.approved span,
#facebox table.data tbody td.complete span {
    background-color: rgba(var(--color-success-rgb), 0.3);
}

td.icon.complete span:before, span.icon.widget-search.complete span:before {
    color: var(--color-success);
}

/**
 * TEXTAREA
 */
textarea:focus,
textarea:active,
textarea.active {
    border-color: var(--color-brand);
}

/**
 * INPUT
 */
.text_input:focus,
.text_input:active,
.text_input:focus-within,
.text_input input:focus,
.text_input input:active,
.text_input input.active {
    border-color: var(--color-brand);
}

.input:focus {
    border-color: var(--color-primary);
}

.input-primary:hover,
.input-primary:focus,
.input-primary.active,
.input-primary[contenteditable=true] {
    border-color: var(--color-primary);
}

.input-success:hover,
.input-success:focus,
.input-success.active,
.input-success[contenteditable=true] {
    border-color: var(--color-success);
}

.input-secondary:hover,
.input-secondary:focus,
.input-secondary.active,
.input-secondary[contenteditable=true] {
    border-color: var(--color-secondary);
}

.input-warning:hover,
.input-warning:focus,
.input-warning.active,
.input-warning[contenteditable=true] {
    border-color: var(--color-warning);
}

.input-danger:hover,
.input-danger:focus,
.input-danger.active,
.input-danger[contenteditable=true] {
    border-color: var(--color-danger);
}

/**
 * DATE AND TIME
 */
.datetime_select .submit .button#search_button,
.datetime_select .submit .button.apply {
    color: var(--color-white);
    border-color: var(--color-brand);
    background: var(--color-primary);
}

/**
 * LABELS
 */
.label-primary {
    background: var(--color-primary);
}

.label-success {
    background: var(--color-success);
}

.label-secondary {
    background: var(--color-secondary);
}

.label-warning {
    background: var(--color-warning);
}

.label-danger {
    background: var(--color-danger);
}

/**
 * LANDING PAGE
 */
body.page-landing {
    background: var(--color-primary);
}

.landing-container {
    padding: 10px !important;
    max-width: 550px !important;
}

.landing-container h1 {
    text-align: center;
    color: var(--color-primary);
}

.landing-container .login {
    background: var(--color-white);
    border-radius: 6px;
    padding: 5% 12%;
    box-shadow: 0 30px 100px -20px var(--color-primary-dark);
    width: 100% !important;
}

/**
 * LOGIN PAGE
 */
body.page-login {
    background-image: none;
    background-color: #870F26 !important;
    color: #3d3634;
}
.page-login .input {
    background-color: #ffffff;
}
.page-login .input-addon {
    background-color: #ffffff;
}
.page-login .btn-primary {
    background-color: #45b996;
    border-color: #45b996;
}
.page-login .btn-primary:hover {
    background-color: #45b996;
    border-color: #45b996;
}
.page-login .fw-bold {
    color: #3d3634;
}
.page-login h1 {
  text-indent: -9999px;
  line-height: 0;
}
.page-login h1::after {
  content: "";
  background: url(https://cloud.unn.com.bn/images/UNN_logo.jpg) no-repeat;
  background-position: center; 
  text-indent: 0;    
  height: 100px;
  max-width: 420px;
  display: block;
  background-size: contain;
  line-height: initial;
}

.detail-item.user.iops .row{
  display: none;
}