﻿ <style>

     #cancelbtn
     {
         min-width: fit-content;
         padding: 5px; 
         border-radius: 5px; 
         width: 7%; 
         background-color: #0069AA;
         color: white; 
         border: none;   
         font-size: 1.2em;
         margin-left: 50px;
     }
     #uploadAttachment
     {
     min-width: max-content;
     padding: 5px;
     border-radius: 5px;
     width: 10%;
     background-color: #0069AA;
     color: white;
     border: none;
     font-size: 1.2em;
     margin-right: 50px;
     }
       @media only screen and (max-device-width: 600px) {
     #tsmContactLevel {
                padding-left: 20px;
                width: 60% !important;
            }
            #uploadAttachment
            {
                float: left;
                margin-left: 10px;
}
#cancelbtn
{
    margin-left: 0px;

}
      }
        .loader {
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid #0069aa;
            border-bottom: 16px solid #0069aa;
            width: 100px;
            height: 100px;
            -webkit-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
            margin: auto;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        #openTicketsCustomTable tbody tr :hover {
            cursor: pointer;
        }

        #TicketsCreatedLast30DaysCustomTable tbody tr :hover {
            cursor: pointer;
        }

        #TicketsClosedLast12MonthsCustomTable tbody tr :hover {
            cursor: pointer;
        }

        .form-control::-webkit-input-placeholder {
            color: #8c8c8c;
        }
        .form-control:-moz-placeholder {
            color: #8c8c8c;
        }
        .form-control::-moz-placeholder {
            color: #8c8c8c;
        }
        .form-control:-ms-input-placeholder {
            color: #8c8c8c;
        }
        .form-control::-ms-input-placeholder {
            color: #8c8c8c;
        }

        .contactLevelCheckbox {
            display: block;
            background-color: #EAEBEB;
            color: black;
            padding: 22px 16px;
            width: 100%;
            border: none;
            outline: none;
            text-align: left;
            cursor: pointer;
            transition: 0.3s;
            font-size: 17px;
        }

            .contactLevelCheckbox:hover {
                background-color: #ddd;
            }

            .contactLevelCheckbox:active {
                background-color: #ccc;
                border-right: solid 2px #0069AA;
            }

        #leftPanel {
            width: 17%;
            background-color: #FFFFFF;
            padding: 10px;
            float: left;
            margin-left: 1%;
        }

        #rightPanel {
            width: 81%;
            background-color: #EAEBEB;
            float: left;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        .serviceCategoryBtn {
            margin: 7px;
            padding: 15px 10px 15px 10px;
            font-size: 1.5em;
            border-radius: 10px;
            width: 18%;
            min-height: 80px;
            min-width: 150px;
            background-color: #CCCCCC;
            color: #5B5B5B;
            border: rgb(255, 213, 32);
        }

            .serviceCategoryBtn:hover {
                color: white !important;
                background-color: #0069AA !important;
                box-shadow: 0 8px 6px -6px rgba(0,0,0,0.5) !important;
                transition: border 0.25s linear, color 0.25s linear, background-color 0.25s linear !important;
            }

            .serviceCategoryBtn:active {
                color: white;
                background-color: #0069AA !important;
                box-shadow: 0 8px 6px -6px rgba(0,0,0,0.5);
                transition: border 0.25s linear, color 0.25s linear, background-color 0.25s linear;
            }

        .Listcontainer {
            display: block;
            position: relative;
            padding-left: 35px;
            margin-bottom: 12px;
            cursor: pointer;
            font-size: 14px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

            .Listcontainer input {
                position: absolute;
                opacity: 0;
                cursor: pointer;
                height: 0;
                width: 0;
            }

        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 25px;
            width: 25px;
            background-color: #eee;
        }

        .Listcontainer:hover input ~ .checkmark {
            background-color: #ccc;
        }

        .Listcontainer input:checked ~ .checkmark {
            background-color: #0069AA;
        }
        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        .Listcontainer input:checked ~ .checkmark:after {
            display: block;
        }

        .Listcontainer .checkmark:after {
            left: 9px;
            top: 5px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        @media only screen and (max-device-width: 600px) {

            #leftPanel {
                display: contents !important;
            }

            .serviceCategoryBtn {
                margin: 7px;
                padding: 5px 5px 5px 5px !important;
                font-size: .8em;
                border-radius: 10px;
                width: 15% !important;
                min-height: 50px !important;
                min-width: 90px !important;
                background-color: #CCCCCC;
                color: #5B5B5B;
                border: rgb(255, 213, 32);
            }

            #footerbar {
                display: none !important;
            }

            #rightPanel {
                width: 100% !important;
            }

            #contactLevel {
                width: 35% !important;
            }

            #FieldSalesl1 {
                padding-left: 20px;
                width: 60% !important;
            }

            #FieldSalesl2 {
                padding-left: 20px;
                width: 60% !important;
            }

            #FieldSalesl3 {
                padding-left: 20px;
                width: 60% !important;
            }
            #dslContactLevel {
                padding-left: 20px;
                width: 60% !important;
            }

            #CustomerTeaml1 {
                padding-left: 20px;
                width: 60% !important;
            }

            #CustomerTeaml2 {
                padding-left: 20px;
                width: 60% !important;
            }

            #CustomerTeaml3 {
                padding-left: 20px;
                width: 60% !important;
            }

            #viewOptions {
                padding-left: 10px;
                width: 60% !important;
            }
        }


        .locationContactsView {
            overflow: hidden;
            border: none;
            background-color: #f1f1f1;
            margin-top: 2%;
        }
            .locationContactsView button {
                background-color: inherit;
                border: none;
                outline: none;
                cursor: pointer;
                padding: 14px 16px;
                transition: 0.3s;
                font-size: 1em;
                border-bottom: 1px solid #bbb;
                border-left: 1px solid #bbb;
                border-right: 1px solid #bbb;
                box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
            }

                .locationContactsView button:hover {
                    background-color: #ddd;
                }

                .locationContactsView button.active {
                    background-color: #0069aa;
                    color: white;
                }

        .contactView {
            display: none;
            padding: 6px 12px;
            border: none;
        }
    </style>