﻿/**
    Override Angle default styles
    Brings clarity by adding independent styles required for MVC projects
*/


/* Override colorpicker paths */
.colorpicker-saturation {
    background-image: url("Images/bootstrap-colorpicker/saturation.png");
}

.colorpicker-hue {
    background-image: url("Images/bootstrap-colorpicker/hue.png");
}

.colorpicker-alpha {
    background-image: url("Images/bootstrap-colorpicker/alpha.png");
}

.colorpicker-color {
    background-image: url("Images/bootstrap-colorpicker/alpha.png");
}

.colorpicker.colorpicker-horizontal .colorpicker-hue {
    background-image: url("Images/bootstrap-colorpicker/hue-horizontal.png");
}

.colorpicker.colorpicker-horizontal .colorpicker-alpha {
    background-image: url("Images/bootstrap-colorpicker/alpha-horizontal.png");
}

.ui-icon,
.ui-widget-content .ui-icon {
    background-image: url("Images/jquery-ui/themes/smoothness/images/ui-icons_222222_256x240.png");
}

.ui-widget-header .ui-icon {
    background-image: url("Images/jquery-ui/themes/smoothness/images/ui-icons_222222_256x240.png");
}

.ui-button .ui-icon {
    background-image: url("Images/jquery-ui/themes/smoothness/images/ui-icons_888888_256x240.png");
}

.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon,
.ui-state-default .ui-icon {
    background-image: url("Images/jquery-ui/themes/smoothness/images/ui-icons_454545_256x240.png");
}

.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
    background-image: url("Images/jquery-ui/themes/smoothness/images/ui-icons_454545_256x240.png");
}

.ui-state-highlight .ui-icon,
.ui-button .ui-state-highlight.ui-icon {
    background-image: url("Images/jquery-ui/themes/smoothness/images/ui-icons_2e83ff_256x240.png");
}

.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    background-image: url("Images/jquery-ui/themes/smoothness/images/ui-icons_cd0a0a_256x240.png");
}

.ui-dialog {
    z-index: 1000 !important;
}

body {
    color: #212121;
    font: 14px/150% Helvetica,Arial,Helvetica,sans-serif;
    background: #ffffff;
    border-top: 13px solid #da1d52;
}

.form-control {
    font-size: .875rem
}

input[type=date]::-webkit-inner-spin-button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0
}

@media print {
    body {
        background: #fff
    }

    #menu, #navigation, .do-not-print {
        display: none
    }

    #content, #wrapper {
        width: auto;
        border: 0;
        margin: 0 5%;
        padding: 0;
        float: none !important
    }
}

/*Remove Arrows/Spinners*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}


.content-wrapper {
    background-color: #fff;
}

.topnavbar {
    -webkit-backface-visibility: hidden;
    /* fixes chrome jump */
    margin-bottom: 0;
    border-radius: 0;
    z-index: 1050;
    border: 0;
    padding: 0;
    min-height: 55px;
    background-color: unset;
    background-image: none;
}

    .topnavbar .navbar-nav > .nav-item > .nav-link, .topnavbar .navbar-nav > .nav-item.show > .nav-link {
        color: #808080;
    }

    .topnavbar .navbar-nav > .nav-item.active > .nav-link,
    .topnavbar .navbar-nav > .nav-item.active > .nav-link:hover,
    .topnavbar .navbar-nav > .nav-item.active > .nav-link:focus,
    .topnavbar .navbar-nav > .nav-item.show > .nav-link {
        color: #da1d52;
    }

        .topnavbar .navbar-nav > .nav-item > .nav-link:hover,
        .topnavbar .navbar-nav > .nav-item > .nav-link:focus,
        .topnavbar .navbar-nav > .nav-item.show > .nav-link:hover,
        .topnavbar .navbar-nav > .nav-item.show > .nav-link:focus {
            color: #da1d52;
        }


        .topnavbar .navbar-nav > .nav-item.show > .nav-link:hover,
        .topnavbar .navbar-nav > .nav-item.show > .nav-link:hover {
            color: #da1d52;
        }

.sidebar-nav > li > a:focus, .sidebar-nav > li > a:hover,
.sidebar-nav > li > .nav-item:focus,
.sidebar-nav > li > .nav-item:hover {
    color: #da1d52;
}

.btn-primary {
    color: #515253;
    background-color: #fff;
    border-color: #515253;
}

    .btn-primary:hover {
        color: #da1d52;
        background-color: #ffffff;
        border-color: #da1d52;
    }

    .btn-primary:focus, .btn-primary.focus {
        box-shadow: 0 0 0 0.2rem rgba(117, 171, 239, 0.5);
    }

    .btn-primary.disabled, .btn-primary:disabled {
        color: #fff;
        background-color: #5d9cec;
        border-color: #5d9cec;
    }

    .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #2f80e7;
        border-color: #2479e5;
    }

        .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(117, 171, 239, 0.5);
        }

.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #da1d52;
    border-color: #da1d52;
}

.layout-h .wrapper .section-container {
    max-width: unset;
}

.layout-h .topnavbar .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(218,29,82, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

.wrapper .footer-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    border-top: 1px solid #DA1D52;
    padding: 10px;
    z-index: 109;
    font-size: .875rem;
    text-align: center
}


.cc-selector input {
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


.cc-selector-2 input {
    position: absolute;
    z-index: 999;
}

.vin {
    background-image: url('Images/VIN.png');
}

.vut {
    /*background-image: url(http://i.imgur.com/SJbRQF7.png);*/
    background-image: url('Images/VUT.png');
}

.hin {
    background-image: url('Images/HIN.png');
}

.hut {
    background-image: url('Images/HUT.png');
}

.cc-selector-2 input:active + .drinkcard-cc, .cc-selector input:active + .drinkcard-cc {
    opacity: .9;
}

.cc-selector-2 input:checked + .drinkcard-cc, .cc-selector input:checked + .drinkcard-cc {
    -webkit-filter: none;
    -moz-filter: none;
    filter: none;
}

.drinkcard-cc {
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 100px;
    height: 28px;
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
    -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
    filter: brightness(1.8) grayscale(1) opacity(.7);
}

    .drinkcard-cc:hover {
        -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
        -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
        filter: brightness(1.2) grayscale(.5) opacity(.9);
    }

.drinkcard-cc2 {
    display: inline-block;
    position: absolute;
    margin: 0 5px;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
    -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
    filter: brightness(1.8) grayscale(1) opacity(.7);
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before, table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child::before {
    top: unset !important;    
    color: white !important;
    border: 2px solid white !important;    
    background-color: #da1d52 !important;
}
