@import 'def';

#ticketModal {
    .modal-header {
        @include themify($themes) {
            background-color: themed('navbg');
        }
        border:none;

        h5 {
            font-size:15px;
        }
        button span{
            @include themify($themes) {
                color: themed('txtcolor100');
            }
        }
    }

    .tickettable {
        thead {
            @include themify($themes) {
                background-color: themed('navbg');      
            }

        }
        td {
            @include themify($themes) {

            border: 1px solid themed('trBorderColor');      
        }

        }
    }


         



    .nav-tabs {
        border:none;
        margin: 8px 0 0 20px;
        .nav-link {
            
            @include themify($themes) {
                background-color: themed('barbg');
                color: themed('txtcolor100');
            }
            margin-left:3px; 
            transition: all 0.4s;
            &:hover {
                border:1px solid transparent;
                @include themify($themes) {
                    background-color: themed('cardbg');
                }
            }
        }
        .nav-link.active {
            border:none;
            border-color: transparent;

            @include themify($themes) {
                color: themed('txtcolor100');
                background-color: themed('cardbg');
            }
        }
    }

    .imageinput, input {
        width:100%;
    }

    textarea {
        @include themify($themes) {
            color: themed('txtcolor100');
            background-color: themed('bodybg');
            border: 1px solid themed('trBorderColor');

        }
        border:none;
    }

    .dropdown {
        input {width:100%;}
        i {
            display: inline-block;
            transform: translate(-28px, 5px);
        }
    }

    .dropdown-menu {
        padding:0;
        table {
        margin:0px!important;
        thead tr {
            @include themify($themes) {
                background-color: themed('navbg');
            }

        }
        }
    }

    .tab-content {
        border:none;
        padding:5px 30px;
        transform: translateY(-1px);
        @include themify($themes) {
            background-color: themed('cardbg');
        }
    }



    .modal-content {
        .modal-body {
            padding:0px;
            @include themify($themes) {
                background-color: themed('bodybg');
            }
        }

        .container-fluid {
            padding:0;
            .row {
                margin:0;
            }

            /*
            .dark {
                @include themify($themes) {
                    background-color: themed('navbg');
                }
            }*/
            .centerdiv, .note {
                padding:40px;
            }

            textarea {
                width:100%;
                height:210px;
                margin-bottom:10px;

                @include themify($themes) {
                    background-color: themed('bodybg');
                    color: themed('txtcolor100');
                    padding:10px;
                    font-size: 14px;
                    border:none;
                }
            }
            .btn {
                @include themify($themes) {
                    background-color: themed('trBorderColor');
                }
                width:100%;     
            }
        }

        .modalscroll {
            overflow-y:scroll;
            height:200px;
            margin-top:40px;

            hr {
                @include themify($themes) {
                    border-color: themed('trBorderColor');
                }
            }

        }

        @include themify($themes) {
            background-color: themed('bodybg');
        }
        table {
            padding:0;
            margin: 35px 0;
            font-size: 14px;

            tr {
                height: auto;
                border:none;
                td {
                    padding: 8px;
                }
            }
        }


    }

    .modal-lg {
        max-width: 60%;
    }

    .savewrapper {
        padding:15px 40px;
    }

    /* Custom check boxes */


    .checkboxinline {
        .checkboxwrapper {
            margin-left:2px;
            margin-right:10px;
            width:auto;
        }
    }


    .checkboxwrapper {
        display: inline-block;
        margin-right:12px;
        padding-top:4px;
        width:135px;
        label {
            margin-bottom: 5px;
            font-size:14px;
        }
    }

    input[type="checkbox"] {
        position: absolute; // take it out of document flow
        opacity: 0; // hide it
    
        & + label {
        position: relative;
        cursor: pointer;
        padding: 0;
        }
    
        // Box.
        & + label:before {
        content: '';
        margin-right: 10px;
        display: inline-block;
        vertical-align: text-top;
        margin-top:3px;
        width: 12px;
        height: 12px;

        @include themify($themes) {
            border: 1px solid themed('txtcolor100');      
        }
        //background: white;
        }

        // Box hover
        &:hover + label:before {
            @include themify($themes) {
                background: themed('txtcolor100');
            }
        }
        
        // Box focus
        &:focus + label:before {
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
        }
    
        // Box checked
        &:checked + label:before {
            @include themify($themes) {
                background: themed('txtcolor100');
            }
        }

        +label:empty {
            width:0px;
        }
        
        // Disabled state label.
        &:disabled + label {
        color: #b8b8b8;
        cursor: auto;
        }
    
        // Disabled box.
        &:disabled + label:before {
        box-shadow: none;
        background: #ddd;
        }
    
        // Checkmark. Could be replaced with an image
        &:checked + label:after {
        content: '';
        position: absolute;
        left: 1px;
        top: 10px;
        @include themify($themes) {
            background: themed('color0');
            box-shadow: 
            2px 0 0 themed('color0'),
            4px 0 0 themed('color0'),
            4px -2px 0 themed('color0'),
            4px -4px 0 themed('color0'),
            4px -6px 0 themed('color0'),
            4px -8px 0 themed('color0');
        }
        width: 2px;
        height: 2px;
        
        transform: rotate(45deg);
        }
    }

}