﻿/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\ 
for details on configuring this project to bundle and minify static web assets. */
body {
    /*padding-top: 50px;*/
    padding-bottom: 20px;
    font-family: Sansation, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.AcknowledgmentbyUser {
    position: fixed;
    top: 350px;
    left: 490px;
    width: 50%;
    height: 20vh;
    border-radius: 5px;
    background: #FFF56D;
    border: double;
}

#tblCameras { /*harika -changed table size to fit  in the cameras page*/
    table-layout: fixed;
    margin-left: 2rem;
}

/*#tblAlerts {
    display: block;
    overflow: scroll;
}*/

.ui.table.estimate{

    margin-left:-40px;
}

/* Header tab effects on Admin sign on to remote-in appliances*/
.ui.menu a {
    position: relative !important;
    transition: .4s ease-in !important;
    z-index: 1;
}

    .ui.menu a ::before,
    .ui.menu a ::after {
        position: absolute !important;
        content: "";
        z-index: -1;
    }

.ui.menu .item:hover {
    color: #FBAD18 !important;
    background: #7F897B !important;
    box-shadow: inset -10.5em 0 0 0 #7F897B,inset 10.5em 0 0 0 #7F897B !important;
}

    .ui.menu .item:hover ::before {
        width: 100%;
    }

.ui.menu .item {
    color: #00A4C9 !important;
}

.ui.menu {
    border: 3px solid rgba(24,36,28,.55) !important;
}
/*---end---*/

.rdn-label {
    display: inline-flex;
}
    /*.rdn-label label {
    float: left !important;
    margin-top: 2px !important;
}*/
    .rdn-label div {
        padding: 5px;
    }

.input-radio {
    vertical-align: middle;
    float: right;
    clear: left;
    line-height: 2px;
    margin-top: 20px;
}

/*#default-picker{
    width:70%;
}*/

.SelectAllTimes {
    margin-left: 2rem;
}

.Fromtime {
    display: flex;
}

.selectiontime {
    display: flex;
}

.Totime {
    display: flex;
    margin-left: 2rem;
}

.input-days {
    text-align: justify;
    vertical-align: middle;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Style Guide setup*/

.ligh.t-blue {
    background: #01b4e1;
}

off-white {
    background: #eef4f6;
}

.dark-blue {
    background: #131f46;
}

.blue {
    background: #1f446e;
}

.dark-gray {
    background: #313942;
}

.gray {
    background: #454d56;
}

.ligh-gray {
    background: #607080
}

.light-blue-gray {
    background: #6f8294;
}

input[type=text] {
    box-shadow: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: Sansation,sans-serif;
}

.ui.form .ui.input.line input {
    box-shadow: none;
    border: none;
    border-bottom: 3px solid #6f8294;
    color: #6f8294;
    border-radius: 0px;
    background: none;
    font-size: 2rem;
}

    .ui.form .ui.input.line input:focus {
        box-shadow: none;
        border: none;
        border-bottom: 3px solid #01b4e1;
        border-radius: 0px;
        background: none;
        color: #fff;
        font-size: 2rem;
    }

.none {
    display: none !important;
}

ui styled accordion fiels.ui.button.alt {
    border: 2px solid #01b4e1;
    border-radius: 50px;
    color: #01b4e1;
    background: #fff;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12px;
    font-family: canada-type-gibson, sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 2px;
    outline: 0;
    text-transform: uppercase;
}

.ui.button.default {
    border: none;
    border-radius: 50px;
    color: #fff;
    background: #FBAD18; /* changed from #01b4e1*/
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12px;
    font-family: Montserrat, sans-serif; /* changed from canada-type-gibson, sans-serif */
    font-weight: 400;
    font-style: normal;
    letter-spacing: 2px;
    outline: 0;
    text-transform: uppercase;
}





    .ui.button.default:hover {
        background: #004152; /* changed from #3dd8ff */
        color: #FFF56D; /* changed from #fff */
    }

    .ui.button.default:focus {
        background: #131f46;
        color: #fff;
    }

    .ui.button.default:active {
        background: #131f46;
        color: #fff;
    }


/*============Layout==============*/
.field.error {
    position: initial;
    bottom: 0px;
    color: #e84b4b;
    font-size: 1em;
}

form .input-validation-error {
    border: 2px solid red !important;
}


.ui.grid.layout {
    margin-left: 0px;
}

.row.row-header {
    padding-bottom: 0px !important;
}

.row-content {
    padding-top: 0px !important;
    min-height: calc(100vh - 78px);
    padding-bottom: 0px !important;
}

.column-logo {
    text-align: center;
    background: #00636E; /* changed from #2f455f*/
    width: 245px !important;
    float: left;
    display: inline-block;
}

    .column-logo .logo-text {
        /*font-family: canada-type-gibson, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 3rem;
        color: #fff;
        line-height: 82px; */
        margin-left: -.3em;
        margin-top: .1em;
    }

.column-header {
    background: #004152; /*changed from #1f446e */
    display: inline-block;
    height: 100%;
    float: left;
    width: calc(100% - 245px);
}

.column-main {
    width: calc(100% - 245px);
}

    .column-main.full {
        width: calc(100%);
    }

.header {
    float: right;
    margin-right: 11rem;
    color: #fff;
    margin-top: 1.5rem;
    font-family: Sansation, sans-serif;
    font-style: normal;
    font-weight: 500;
}

.AdminConsole {
    float: left;
    margin-left: 9rem;
    color: #fff;
    margin-top: 1.5rem;
    font-family: Sansation, sans-serif;
    font-style: normal;
    font-weight: 500;
}

.dashboardtitle {
    position: absolute;
    margin-top: 4em;
    color: black;
    outline-color: black !important;
    outline-width: 2px !important;
    outline-offset: 5px;
    width: 191px;
    z-index: 1;
    background: white;
    color: #4183c4;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    cursor: pointer;
}

    .dashboardtitle li {
        display: contents;
    }

        .dashboardtitle li:hover {
            text-decoration-line: underline;
            text-decoration-color: #FBAD18;
            font-size: large;
            font-style: oblique;
            font-family: Montserrat Medium Italic;
            background-color: #C4E4E2;
        }

    .dashboardtitle a:hover {
        background-color: snow !important;
        text-decoration-line: underline !important;
        text-decoration-color: #FBAD18 !important;
        color: #00636E !important;
    }

#clients {
    float:left;
    color: #00636E !important;
    border: 2px solid #C4E4E2 !important;
}

#kdps {
    margin-left: 29em !important;
    color: #00636E !important;
    border: 2px solid #C4E4E2 !important;
}

#loadingeyeicon img {
    display: inline-block;
}

#loadingeyeicon.hidden {
    display: none;
}

#loadingeyeicon.overlay img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #C4E4E2;
    z-index: 999;
    opacity: 1;
    transition: all 0.5s;
    /*animation: spin 1.2s linear infinite;*/
}

#loadingeyeicon:after {
    content: '';
    display: block;
    width: 150px;
    height: 72px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid #fff;
    border-color: #fff transparent #fff transparent;
}


/* TroubleShooting page*/
.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

    .overlay a:hover, .overlay a:focus {
        color: #f1f1f1;
    }

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 450px) {
    .overlay a {
        font-size: 20px
    }

    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}


.workstation-name {
    font-family: Sansation Bold, sans-serif;
    font-size: 2.1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-stretch: extra-expanded;
    font-weight: 600;
    line-height: 29px;
    text-align: right;
}

.page-title {
    font-family: Sansation Regular, sans-serif;
    font-size: 1.3rem;
    margin-top: .6rem;
    float: right;
    font-weight: 600;
    letter-spacing: 3px;
    cursor: pointer;
}

.ui.form .field:last-child, .ui.form .fields:last-child .field {
    margin-bottom: 2em !important;
}

/*****Sidebar****/
.column-sidebar {
    background: #004152; /*  changed from #313942 */
    height: 100%;
    color: #004152;
    padding-right: 0px !important;
    width: 245px !important;
}

.sidebar.nav .section .heading {
    font-family: Montserrat ExtraBold, sans-serif;
    color: #fff;
}

.section {
    border-bottom: #3b444f solid 1px;
    font-family: Sansation Regular, sans-serif;
    color: #FBAD18;
}

    .section a {
        color: unset;
    }

    .section .heading {
        font-weight: 700;
        font-size: 1.17rem;
        letter-spacing: 3px;
        margin-top: 3rem;
        padding-left: 2rem;
        font-family: Sansation Regular, sans-serif;
        padding-bottom: .5rem;
    }

    .section .nav.item {
        display: block;
        font-size: 1rem;
        letter-spacing: 3px;
        padding-left: 3rem;
        font-family: Sansation Bold, sans-serif;
        font-weight: 800;
        font-style: normal;
        padding: 1rem;
        padding-left: calc(3.3rem + 6px);
        width: 100%;
        text-transform: uppercase;
        color: #00A4C9; /* changed from #6f8294*/
    }

.nav.item:hover {
    background: #7F897B;
    color: #FBAD18;
    box-shadow: inset -10.5em 0 0 0 #7F897B !important,inset 10.5em 0 0 0 #7F897B;
}

.nav.item a:hover {
    color: #FBAD18;
}

.nav.item.important {
    color: #00A4C9; /*changed from*#88b3d4*/
}

    .nav.item.important:hover {
        background: #7F897B; /*   changed from #192858; */
        color: #FBAD18;
    }

    .nav.item.important.active {
        background: #C4E4E2; /* changd from #2c4b6e */
    }

.nav.item.active {
    background: #C4E4E2 !important;
    border-left: 7px solid #01b4e1;
    padding-left: 3.3rem;
    color: #00A4C9;
}

.section .nav.item.sub {
    font-size: .95rem;
    letter-spacing: 1px;
    padding-left: 3rem;
    font-family: Sansation Regular, sans-serif;
    font-weight: 400;
    font-style: normal;
    padding: 1rem;
    width: 100%;
    text-transform: uppercase;
    color: #FBAD18;
    background-color: #EEEDE3;
    border-top: 1px solid #6f82942e;
}

.nav.item.sub.important {
    background: #7F897B;
    color: #FBAD18;
}

.nav.item.sub.active {
    background: #EEEDE3;
    border-left: none !important;
    color: #FBAD18;
    border-top: 1px solid #eef4f62e;
}

.nav.item.sub:hover {
    background-color: #00A4C9;
    color: #FBAD18;
}


footer {
    bottom: 0px;
    position: relative; /* changed from fixed to absolute*/
}

    footer ul {
        list-style: none;
        font-size: 1rem;
        padding-left: 3rem;
        font-family: Sansation Light, sans-serif;
        font-weight: 600;
        font-style: normal;
        width: 100%;
        color: #FBAD18; /*changed from #6f8294 */
        padding-left: calc(3.3rem + 7px);
    }

        footer ul li:hover {
            color: #EF4136;
        }

        footer ul li a {
            color: #FBAD18;
        }

            footer ul li a:hover {
                color: #EF4136;
            }

/*============Switch=============*/
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 20px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #c40000;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 14px;
        width: 14px;
        left: 4px;
        bottom: 3px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: green;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }
/*==================WS-Reg===================*/
.WS-reg {
    border-top: 40px solid #1f446e;
    background: #eef4f6;
}

    .WS-reg h2 {
        letter-spacing: 3px;
        margin-top: 3rem;
        font-family: Sansation, sans-serif;
        margin-top: 1rem;
    }

    .WS-reg .fields {
        padding: 0px 2rem;
    }

    .WS-reg label {
        color: #526f90 !important;
        text-align: left;
        letter-spacing: 0.058rem;
        font-family: Sansation, sans-serif;
        text-transform: uppercase !important;
        font-weight: 600 !important;
    }

        .WS-reg label span {
            margin-left: 1.3rem;
            font-weight: 400;
            font-size: .75rem;
        }

    .WS-reg .ui.dropdown {
        min-width: 12rem !important;
    }

    .WS-reg .twelve.wide.field {
        margin-left: 2.5rem !important;
    }

    .WS-reg .update {
        float: right;
    }

    .WS-reg .cancel {
        float: left;
    }

    .WS-reg .buttons {
        margin: 0px 2rem;
        margin-top: 4.5rem;
    }

        .WS-reg .buttons .button {
            padding-top: 15px;
            padding-bottom: 13px;
            font-size: 11px;
        }

    .WS-reg .dropdown.icon::before {
        font-size: 1.5rem;
    }

    .WS-reg .field {
        margin-top: 2rem !important;
    }


@media only screen and (max-width: 1616px) {
    .ui.column.grid.workstation > [class*="six wide computer"].column, .ui.grid.workstation > .column.row > [class*="six wide computer"].column, .ui.grid.workstation > .row > [class*="six wide computer"].column, .ui.grid.workstation > [class*="six wide computer"].column {
        width: 57.5% !important;
    }
}

@media only screen and (max-width: 1048px) {
    .ui.column.grid.workstation > [class*="six wide computer"].column, .ui.grid.workstation > .column.row > [class*="six wide computer"].column, .ui.grid.workstation > .row > [class*="six wide computer"].column, .ui.grid.workstation > [class*="six wide computer"].column {
        width: 77.5% !important;
    }
}

#prompt {
    font-family: Sansation,sans-serif;
}

    #prompt::placeholder {
        color: #000 !important;
        opacity: .6;
    }

    #prompt::selection {
        color: #000 !important;
        opacity: 1;
    }

/*=================Malum Admin===============*/
.displayalert {
    background-color: #e5f567 !important;
}

/*=================Camera Page===============*/
.highlight {
    background-color: #ffe9c0 !important;
}

.status {
    text-align: center !important;
    padding: 0px !important;
    padding-top: 5px !important;
}

.cameras .status i.circle {
    font-size: 1.8rem;
    vertical-align: middle;
    margin-left: 4px !important;
    color: lightgray;
}

    .cameras .status i.circle.red {
        color: red;
    }

    .cameras .status i.circle.green {
        color: green;
    }



.status {
    width: 7%; /* change width from 5to7 to add in cameras page*/
}



.cameras .ip-width { /*harika*/
    width: 15% !important;
}

.cameraminwidth /* added in .input.cs too*/ {
    min-width: 10em !important;
}

/* just call it width10p */
.cameras .dropdown-ip {
    width: 10%;
}

.cameras tr.edit .ui.input {
    /*max-width: 197px;*/
}

.text.input-ip,
.text.input-model,
.text.input-make {
    font-size: 1.2rem;
}

tbody tr.edit .ui.input > input {
    font-size: 1.2rem;
    padding: .47857143em 1em;
    border: 2px solid rgba(34,36,38,.15);
    border-radius: 4px !important;
    transition: none;
}

tr.edit .text.input-ip {
    font-size: 1.2rem;
}

tr.row-add .ui.input > input {
    border: 2px solid rgba(34,36,38,.15);
    border-radius: 4px !important;
}

.ui.selection.dropdown.border-pulse {
    border: 2px solid #01b4e1 !important;
    animation: border-pulsate 2s infinite;
}

.cameras .errors {
    display: block;
}

.cameras .error-top {
    border: 3px solid red !important;
    color: dimgray;
    background: pink;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: unset !important;
    padding: 8px 20px;
    border-radius: 10px;
    display: inline-block;
    padding-left: 20px;
    width: max-content;
    margin-bottom: 10px;
}

    .cameras .error-top.ip {
        border: 3px solid #FBAD18 !important;
        color: #7F897B;
        background: #ffe9c0;
        font-family: Sansation,sans-serif;
        font-size: 1rem !important;
        font-weight: 600 !important;
        letter-spacing: unset !important;
        padding: 8px 20px;
        border-radius: 10px;
        display: inline-block;
        padding-left: 20px;
        width: max-content;
        margin-bottom: 10px;
    }


.cameras .model .menu .item {
    display: none !important;
}

    .cameras .model .menu .item.show {
        display: block !important;
    }

.list-container {
    margin-right: 5rem;
}

.ui.table .ui.input {
    width: 100%;
}

.ui.table .ui.selection.dropdown {
    width: 100%;
}


.ui.table tbody tr {
    min-height: 38px;
    height: 38px;
}

    .ui.table tbody tr:first-child {
        background: #C4E4E2; /*changed from #cdecf6 */
    }

.ui.table.key tbody tr:first-child {
    background: none;
}

.ui.table.admin tbody tr:first-child {
    background: #fff;
}

.ui.table tbody td .disabled .text, .ui.disabled.dropdown {
    color: black !important;
    opacity: 1 !important;
    font-family: Sansation,sans-serif;
    font-size: 1.1em;
}

.ui.table tbody td {
    padding: .5rem;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    font-style: normal;
    border: 1px solid rgba(34,36,38,.15);
    border-right: none;
}

    .ui.table tbody td span {
        font-size: 1.33rem;
    }

.ui.table tr td:first-child, .ui.table tr th:first-child {
    width: 6% !important;
    background: #fff;
    border: none;
}

.ui.table.key tr td:first-child, .ui.table.key tr th:first-child {
    width: 6% !important;
    background: none !important;
    border-left: 1px solid rgba(34,36,38,.15) !important;
    border-bottom: 1px solid rgba(34,36,38,.15) !important;
    border-top: 1px solid rgba(34,36,38,.15) !important;
}

.ui.table.key tr th:first-child {
    width: 6% !important;
    background: #495561 !important;
    border-right: 1px #FFF solid !important;
}

.ui.table tr th:nth-child(2) {
    border-left: 1px solid rgba(34,36,38,.15) !important;
}

.ui.table tr td:nth-child(2) {
    text-align: center;
}

.ui.table tr:nth-child(even) {
    background: #eef4f6;
}

.ui.table {
    border-radius: 0px !important;
    border-left: none !important;
    border-bottom: none !important;
    border-top: none !important;
}

    .ui.table tbody tr td.functions {
        text-align: right;
    }

    .ui.table tbody tr td.last {         /* last column on alerts settings, for add button column */
        background: #fff; 
        border:none;
    }

        .ui.table tbody tr td.functions div {
            width: 5.7rem;
            float: right;
        }

    .ui.table tbody tr.display td.functions i {
        display: none;
    }

    .ui.table tbody tr.edit td.functions i {
        display: inline;
    }

    .ui.table tbody tr:hover td.functions i {
        display: inline;
    }

    .ui.table .template {
        display: none;
    }

    .ui.table .template-disconnect {
        display: none;
    }

.template {
    display: none;
}

    .template.template-disconnect {
        display: none;
    }

.ui.table i {
    font-size: 1.2rem;
}

    .ui.table i:hover {
        color: darkgray;
        /*font-size: 1.5rem;*/
    }

.ui.table thead tr th {
    background: #495561; /* changed from #495561*/
    color: #fff;
    text-transform: uppercase;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.98em;
    letter-spacing: 1px;
    padding: .5rem;
    padding-left: 1rem;
    border-left: 1px solid #fff !important;
    border-radius: 0px !important;
}



.ui.active.selection.dropdown.visible {
    border: 2px solid #01b4e1 !important;
    border-radius: 4px !important;
    min-width: 13em !important;
}

.ui.selection.dropdown {
    border: 2px solid rgba(34,36,38,.15) !important;
    border-radius: 4px !important;
}

    .ui.selection.dropdown .menu {
        overflow-y: scroll;
        scrollbar-color: #01b4e1 lightgray;
        margin-top: 2px !important;
    }

        .ui.selection.dropdown .menu ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
            border-radius: 10px;
            background-color: #F5F5F5;
        }

        .ui.selection.dropdown .menu ::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
        }

        .ui.selection.dropdown .menu ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            background-color: #D62929;
        }

tr.edit {
    background: #def0f6 !important;
}

tr.display input {
    border: none !important;
    font-size: 1.2rem;
    font-family: nimbus-sans, sans-serif !important;
    font-weight: 400;
    font-style: normal;
    padding: 0px !important;
    background: unset !important;
    text-transform: capitalize;
}

tr.display .ui.search.selection.dropdown {
    border: none !important;
    font-family: nimbus-sans, sans-serif !important;
    font-weight: 400;
    font-style: normal;
    padding: 0px !important;
    background: unset !important;
    min-height: unset !important;
}

    tr.display .ui.search.selection.dropdown i {
        display: none;
        white-space: pre-line;
    }


.button-group {
    float: right;
}

    .button-group .ui.button.default {
        padding: 15px 35px;
        padding-top: 17px;
        font-size: 11px;
    }

.ui.button.default.cancel {
    background: #EF4136; /*changed from #607080*/
}

    .ui.button.default.cancel:hover {
        background: #004152; /* changed from #46525f*/
        color: #FFF56D; /* changed from #fff */
    }

.ui.button.default.save {
    background: #00A4C9; /* changed from #1f446e*/
    /*margin-left: -10rem;*/
}


    .ui.button.default.save:hover {
        background: #004152; /* changed from #316aaa*/
        color: #FFF56D; /* changed from #fff */
    }

.top-table-controls {
    margin-left: 6%;
    margin-top: 3.5rem;
    margin-bottom: 2rem;
}

.top-table {
    margin-left: 30%;
    margin-bottom: 2rem;
    text-transform: uppercase;
    font-family: canada-type-gibson, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.5rem;
    letter-spacing: 3px;
    vertical-align: bottom;
}

    .top-table.key {
        margin-left: 38%;
        margin-bottom: 2rem;
        text-transform: uppercase;
        font-family: canada-type-gibson, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 1.5rem;
        letter-spacing: 3px;
        vertical-align: bottom;
    }

/*.top-table-controls .search {
		border: none;
		border-bottom: 2px solid gray;
		margin-left: 3rem;
	}*/


.top-table-controls .search input {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 2px solid grey !important;
    margin-left: 3rem !important;
    border-radius: 0 !important;
}

    .top-table-controls .search input:focus {
        border-bottom: 2px solid #01B4E1 !important;
        margin-left: 3rem;
    }

.top-table-controls .search i {
    border: none;
}

/*.top-table-controls .search input {
			border: none !important;
		}*/

.top-table-controls span {
    text-transform: uppercase;
    font-family: Montserrat Bold, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.5rem;
    letter-spacing: 3px;
    vertical-align: bottom;
}

.title-alerts {
    margin-top: 2em;
}


    .title-alerts span {
        text-transform: uppercase;
        font-family: Montserrat Bold, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 1.5rem;
        letter-spacing: 3px;
        vertical-align: bottom;
        margin-left: 16em;
    }

.ui.table.key {
    padding-left: 2em !important;
}

.ui.table.admin tbody tr td.functions div {
    width: 1.7rem;
    float: right;
}

.ui.table tbody tr .functions.first .add {
    text-align: center;
    float: right;
    width: max-content;
}

    .ui.table tbody tr .functions.first div.add i {
        color: #008000;
        display: inline-block;
    }

.ui.table tbody tr .functions.first div.add:hover i {
    color: #25A525;
}

.ui.table tbody tr .functions.first div.add:hover span {
    color: darkgray;
}

.ui.table tbody tr .functions.first div.add span {
    font-size: 1rem;
    text-transform: uppercase;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-style: normal;
    display: block;
}

ui.table.key tbody tr .functions.first div.add {
    text-align: center;
    float: right;
    width: max-content;
}

.ui.table.key tbody tr .functions.first div.add i {
    color: #008000;
    display: inline-block;
}

.ui.table.key tbody tr .functions.first div.add:hover i {
    color: #25A525;
}

.ui.table.key tbody tr .functions.first div.add:hover span {
    color: darkgray;
}

.ui.table.key tbody tr .functions.first div.add span {
    font-size: 1rem;
    text-transform: uppercase;
    font-family: canada-type-gibson, sans-serif;
    font-weight: 600;
    font-style: normal;
    display: block;
}

.ui.table.admin.malum tr td:first-child, .ui.table tr th:first-child {
    width: 1% !important;
    background: #fff;
    border: none;
}

/*====================Alerts========================*/
table.ui.table {
}
/*Most styles based on Camera page styles*/
.alerts .button-group .tooltip i {
    margin-top: 3.5rem;
    margin-right: 1rem;
}

.alert-time {
    max-width: max-content;
    float: right;
}

    .alert-time label {
        display: block;
        text-align: left;
        margin-top: 20px;
        font-family: Sansation Bold, sans-serif !important;
        font-weight: 500;
        font-style: normal;
        font-size: 1.1rem;
        text-transform: capitalize;
    }

.alerts .title-desc {
    width: 40%;
    display: inline-block;
}

.alerts .button-group {
    float: right;
    width: 50%;
    text-align: right;
    display: inline;
}

.alerts .ui.selection.dropdown.time-btween {
    margin-bottom: 20px;
    background: #C4E4E2;
    font-weight: 400;
    font-style: normal;
    font-family: canada-type-gibson, sans-serif;
}

/*.alerts tr td:nth-child(3),
.alerts tr th:nth-child(3) {

    width: 20% !important;
}*/

/*.alerts tr td:nth-child(2),
.alerts tr th:nth-child(2) {

    width: 30% !important;
}*/

.alerts button.save {
    float: unset;
}

.desc {
    margin-top: 15px;
    color: #2c4b6e;
}

.alerts a.ui.label {
    /*-webkit-box-shadow: none !important;*/
    font-size: 1rem !important;
    color: rgb(79,85,89);
}

.alerts tr.display .ui.search.selection.dropdown {
    font-family: sans-serif !important;
}

.alerts tr.display .ui.search.selection.dropdown {
    font-family: sans-serif !important;
}
/*.alerts .ui.input label {
    display: none !important;
}*/

div.text.input-AlertList {
    font-size: 1.5em !important;
    font-family: sans-serif !important;
}

div.text.input-Modulelist {
    font-size: 1.5em !important;
    font-family: sans-serif !important;
}




/*===============Logs Page=============*/
/*#logalertstitle {
    /*display: initial;
    width: 40%;
    display: inline-block;
}*/
.title-dailyalerts span {
    text-transform: uppercase;
    font-family: Montserrat Bold, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.5rem;
    letter-spacing: 3px;
    vertical-align: bottom;
    margin-left: 6em;
}

.logalert-time {
    float: right;
}


/*.logs .button-group .tooltip i {
    margin-top: 3.5rem;
    margin-right: 1rem;
}*/
.tooltip logs {
    margin-top: 3.5rem;
    margin-right: 1rem;
}

.logalert-time label {
    display: block;
    text-align: left;
    margin-top: 20px;
    font-family: Sansation Bold, sans-serif !important;
    font-weight: 500;
    font-style: normal;
    font-size: 1.1rem;
    text-transform: capitalize;
}

.logs .ui.selection.dropdown {
    margin-bottom: 20px;
    background: #C4E4E2;
    font-weight: 400;
    font-style: normal;
    font-family: Sansation, sans-serif;
}


/*.logs .button-group {
    /*width: 50%;
    text-align: right;
    display: contents;
}*/

/*.logs .buttons{
    float:left;
    margin-top:1.5em;
}*/

.ui.table .template-heartbeat {
    display: none;
}

.template.template-heartbeat {
    display: none;
}

/*===============Detection Parameters Page=============*/

#Parameterstbl {
    width: fit-content;
    margin-left: 2em;
    margin-top: 7em;
}

.ResetTimes {
    /*border-top: 2px solid black;*/
    margin-top: 1em;
    height: 35px;
    /*color: darkmagenta;*/
    color: #00A4C9;
}

#Parameterstbl tbody tr td {
    background: #C4E4E2;
    max-width: 30em;
}

.DetectionModulehead {
    font-size: 1.5em;
    color: #FBAD18;
    font-family: Montserrat-Regular,sans-serif;
    line-height: normal;
    background: #C4E4E2 !important;
}

a.ui.label {
    -webkit-box-shadow: none !important;
}

.ui.label {
    background-color: transparent !important;
}

/* slider css*/

input[type="range"]:-moz-range-track {
    width: 100%;
    height: 20px;
    background: #eee;
    border-radius: 10px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

input[type="range"]:-moz-range-thumb {
    /*border: none;*/
    height: 50px;
    width: 50px;
    box-shadow: 1px 1px 1px #000000;
    border: 1px solid #000000;
    background-color: transparent;
    border-radius: 5px;
    background: #FFFFFF;
    /*background-image: url(https://storage.googleapis.com/pw-stuff/thumbs-sprite.png);*/
    /*background-position: 0 0;
    background-size: cover;*/
    /*transform: scale(1.9) rotateZ(var(--thumb-rotate, 10deg));*/
    cursor: pointer;
}

    input[type="range"]:-moz-range-thumb:active {
        background-position: 100% 0px;
        transform: scale(2.0) rotateZ(var(--thumb-rotate, 10deg));
    }

input[type="range"] {
    -webkit-appearance: none;
    background: transparent;
    width: 90%;
    max-width: 500px;
    outline: none;
}

    input[type="range"]:focus,
    input[type="range"]:active,
    input[type="range"]::-moz-focus-inner,
    input[type="range"]::-moz-focus-outer {
        border: 0;
        outline: none
    }

    /*input[type="range"]:-moz-range-thumb {
        thumb()
    }

    &::-moz-range-thumb:active {
        thumbActive()
    }

&::-moz-range-track {
    track()
}*/

    input[type="range"]:-moz-range-progress {
        height: 20px;
        background: #4685d7;
        border-radius: 10px;
        cursor: pointer;
    }

    input[type="range"]::-webkit-slider-thumb {
        /*//thumb();*/
        box-shadow: 1px 1px 1px #000000;
        border: 1px solid #000000;
        height: 30px;
        width: 20px;
        border-radius: 5px;
        background: #FFFFFF;
        /*background-color: transparent;*/
        /*background-image: url("https://storage.googleapis.com/pw-stuff/thumbs-sprite.png");*/
        background-position: 0 0;
        background-size: cover;
        /*transform: rotateZ(var(--thumb-rotate, 360deg));*/
        cursor: pointer;
        margin-top: -5px;
        -webkit-appearance: none;
    }

        input[type="range"]::-webkit-slider-thumb:active {
            /*thumbActive()*/
            background-position: 100% 0px;
            transform: scale(2) rotateZ(var(--thumb-rotate, 10deg));
        }

    input[type="range"]::-webkit-slider-runnable-track {
        /*track();*/
        -webkit-appearance: none;
        width: 400%;
        height: 20px;
        background: #00A4C9;
        opacity: 0.8;
        border-radius: 10px;
        border: 0.2px solid #000000;
        box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
        cursor: pointer;
        display: inline;
    }


label[for=slider] {
    font-family: Montserrat, sans-serif;
    font-size: 1em !important;
}
/*
    label[for=slider] {
    background: #eee;
    border-radius: 50%;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    padding: 14px;
    margin-left: 10px;
    font-family: Roboto, 'Helvetica Neue', Arial;
    font-size: 20px;
    width: 25px;
    text-align: center;
    color: #2968bb;
    font-weight: bold;
    content: '';
}

label[name="sliderlabel"] {
    display: inline-table;
    position: absolute;
    margin-left: 33em;
    margin-top: -2em;
}*/
    input[name="slider"] {
    /*max-width: 1000px !important;*/
    /*width: 100%;*/
}


/*.twitter-link
position: absolute
bottom: 4px
margin: auto
font-family: sans-serif
font-size: 12px
color: rgba(0, 0, 0, 0.6)*/



/*===============IP Scan Page=============*/
.selectalltemplate {
    display: none;
    /*Harika*/
}

.left {
    display: inline-block;
}

.right {
    width: 44%;
    display: inline-block;
    float: right;
}

.top-table-controls .right {
    text-align: right;
}

.ip-list .ui.popup {
    font-size: 1.2rem;
    width: 339px;
    max-width: unset;
    font-weight: 400;
    font-style: normal;
    font-family: canada-type-gibson, sans-serif;
    line-height: 25px;
    display: block !important;
}

.ip-list .tooltip {
    position: relative;
    left: -5px;
    color: #93cee1;
}

.ui.popup {
    font-size: 1.2rem;
    font-weight: 400;
    font-style: normal;
    font-family: canada-type-gibson, sans-serif;
    line-height: 25px;
    display: block !important;
    text-align: left;
}

.tooltip {
    display: inline;
    color: #316aaa;
    font-size: 1.4rem;
}


#subnet {
    max-width: 83%;
}

.title-desc {
    display: inline-block;
    width: 331px;
    vertical-align: top;
}

.ip-input {
    width: 29%;
    display: inline-block;
    position: relative;
}

    .ip-input .ui.input {
        vertical-align: bottom
    }



.title-desc p {
    margin-top: 1rem;
    font-size: .9rem;
    margin-right: 5rem;
}

.ip-input .ui.input input {
    background: unset;
    border: none;
    border-bottom: 1px solid #004152;
    color: #00636E;
    font-size: 1.2rem;
    border-radius: 0px;
}

.scan.ui.button {
    background: #00A4C9;
    color: #FFF56D;
    display: block;
    height: 75px;
    width: 75px;
    border-radius: 50%;
    float: right;
    vertical-align: middle;
}

.scan.ui.button {
    background: #00A4C9;
    /*background: linear-gradient(180deg, rgba(105,230,255,1) 0%, rgba(0,212,255,1) 18%);*/
    color: #fff;
    display: block;
    height: 80px;
    width: 80px;
    margin-bottom: -17px;
    border-radius: 50%;
    float: right;
    vertical-align: middle;
}

.scan-button {
    width: max-content;
    position: relative;
    right: -132px;
    display: inline-block;
    height: 103%;
}

.ip-list {
    margin: 5rem;
}

.ip-list-table div.list.loading {
    opacity: .5;
}

.ip-list-table div.list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    flex-flow: row wrap;
    align-content: flex-end;
    margin-left: -1rem;
    margin-right: -6rem;
    justify-content: left;
    width: 102%;
}

.ip-list .title-desc span {
    text-transform: uppercase;
    font-family: canada-type-gibson, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.5rem;
    letter-spacing: 3px;
    vertical-align: bottom;
}

.button-right {
    /*width: 25%;*/
    display: inline;
    float: right;
    display: flex;
    flex-direction: row-reverse;
}

    .button-right button {
        float: right !important;
        padding: 15px 30px !important;
        padding-top: 17px !important;
    }

.dark-scan-box {
    background: #ffe9c0;
    border: 3px solid #FBAD18 !important;
    width: 775px;
    padding: 2rem 4rem;
    border-radius: 5px;
    color: #004152;
    height: 186px; /*136*/
    display: inline-block;
}


.ip-input .ui.input input:focus {
    background-color: unset;
    color: #95bbd9;
}

    .ip-input .ui.input input:focus::placeholder {
        color: #98b1bc;
    }

.ip-input .ui.input > input::placeholder {
    color: #98b1bc;
    opacity: 1;
}

.add-search {
    margin-top: 2rem;
    text-align: center;
    height: 46px;
    display: flex;
    justify-content: space-between;
}

    .add-search .save {
    }

    .add-search .list-title span {
        text-transform: uppercase;
        font-family: canada-type-gibson, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 1rem;
        letter-spacing: 3px;
        margin-top: 25px;
        color: #2c4b6e;
    }


.scan-save .ui.input.search {
    float: right;
}

.scan-save .search {
    border: none;
    border-bottom: 2px solid gray;
    width: 20%;
}

    .scan-save .search i {
        border: none;
    }

    .scan-save .search input {
        border: none !important;
    }

.list-title {
    /*width: 50%;*/
    display: inline-block;
    vertical-align: bottom;
    margin-top: auto;
    margin-top: 25px;
}


.add-manually {
    display: inline-block;
    float: left;
    /*width: 20%;*/
}

    .add-manually a {
        float: left;
    }

.ip-checkbox {
    padding: 0.5rem 1rem;
    border: 1px solid #6f8294;
    background: #eef4f6;
    width: 195px;
    margin: 0rem 1rem;
    margin-bottom: 1.25rem;
}

.checked {
    background: #cbebf6;
}

.scan.ui.button:hover {
    background: rgb(0, 193, 232) 18%;
    color: #fff;
}

.scan.ui.button:focus {
    background: rgb(0, 193, 232) 18%;
    color: #fff;
}

.add-manually .ui.button.default {
    padding: 15px 25px;
    padding-top: 17px;
    font-size: 11px;
}

.ip-list hr {
    height: 10px;
    color: #4a5764;
    background: #4a5764;
}








form .field .input-group input {
    border: 2px solid rgba(34,36,38,.15) !important;
}

.ui.form .ui.input input,
form.ui.form .field input,
form.ui.form .field textarea,
form.ui.form .ui.selection.dropdown {
    border: 2px solid rgba(34,36,38,.15);
}

.appliance-instruction {
    max-width: 700px;
    font-size: 1.1em;
    margin-top: 10px;
}

.appliance-setup-instruction {
    max-width: 700px;
    font-size: 1.1em;
    margin-top: 10px;
}





/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}
/*==========Error Message Box===========*/
.calendarDate .text-danger.field-validation-error span {
    font-size: 1rem;
    font-weight: 600;
}

.text-danger.field-validation-error span {
    padding: .55em;
    text-align: center;
    display: block;
    color: #AC3232;
    border-radius: 70px;
}

.text-danger.field-validation-error {
    text-align: center
}

body.Register .validation-summary-errors.text-danger ul {
    list-style: none;
    padding: 0px;
    display: block;
}

.validation-summary-errors.text-danger ul {
    list-style: none;
    padding: 0px;
}

    .validation-summary-errors.text-danger ul li, .Error {
        border: 2px solid red;
        padding: .55rem;
        text-align: center;
        background: #FFBABA;
        color: #AC3232;
        border-radius: 70px;
        margin-top: 10px;
    }

.dashboard .PolicyMessageBox {
    margin-top: 0em;
    margin-bottom: 0em;
    border: 4px solid #75c7b9;
    padding: .55em;
    padding-left: 35px;
    background: #333;
    color: #fff;
    font-weight: bold;
    border-radius: 70px;
    font-size: 1.2rem;
}

    .dashboard .PolicyMessageBox a {
        color: #F0EEE8;
        text-decoration: underline;
    }

.dashboard .ErrorMessageBox.ui.container {
    margin-bottom: -1em;
}

.ErrorMessageBox.ui.container {
    border: 4px solid red;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: .55em;
    padding-left: 35px;
    background: #FFBABA;
    color: #AC3232;
    font-weight: bold;
    border-radius: 70px;
    font-size: 1.2rem;
}

.cameras .input-validation-error {
    border: 2px solid red !important;
}


.cameras .errorInput,
.cameras tr .ui.search.selection.dropdown.errorInput {
    border: 2px solid red !important;
}

.WS-reg .errorInput,
.WS-reg .ui.selection.dropdown.errorInput {
    border: 2px solid red !important;
}

.cameras .ui.input label {
    display: none !important;
}

.alerts .errorInput {
    border: 2px solid red !important;
}
/*hide the validator label message*/
.alerts label.errorInput {
    display: none !important;
}


.logs .errorInput {
    border: 2px solid red !important;
}

.alerts .ui.selection.dropdown.errorInput {
    border: 2px solid red !important;
}

.logs .ui.selection.dropdown.errorInput {
    border: 2px solid red !important;
}

.need-one-contact, .invalid-field-error {
    border: 2px solid red !important;
    color: red;
    background: pink;
    font-size: 1rem !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    padding: 8px;
    border-radius: 10px;
    display: none;
    padding-bottom: 4px;
    padding-left: 20px;
}
   
    .need-one-contact.show, .invalid-field-error.show {
        display: block;
    }

.error {
    position: absolute;
    bottom: -24px;
    color: #e84b4b;
    font-size: 1.1rem;
}



/*===============================================File Cards====================================*/
.ui.styled.accordion.files {
    box-shadow: none;
    margin-bottom: 7em;
}

    .ui.styled.accordion.files .title {
        font-size: 1.6em;
        border-bottom: 3px solid #f37539;
        color: #000;
    }

        .ui.styled.accordion.files .title:hover {
            color: #f37539 !important;
        }





/*.ip-list .scan-save .ui.icon.input.search {
        width: 100% !important;
    }

    .dark-scan-box {
        width: 100%;
    }*/



table.file-cards tr {
    display: block;
    box-shadow: 0 1px 3px 0 #d4d4d5,0 0 0 1px #d4d4d5;
    padding: 1em;
    border-radius: 4px;
    margin: 2em 0px;
}

table.file-cards .download {
    text-align: right;
}

table.file-cards .file-name {
    width: 350px;
    font-size: 18px;
    font-weight: bold;
}

table.file-cards .icon.file {
    font-size: 28px;
    display: inline;
    vertical-align: bottom;
    padding-right: .5em;
}

.error-top.file-page {
    margin-left: 1.8em;
    max-width: 571px;
}

.icon.file.pdf {
    color: #ff0000 !important;
}

.icon.file.powerpoint {
    color: #F25022 !important;
}

.icon.file.word {
    color: #00A4EF !important;
}

.icon.file.excel {
    color: #7FBA00 !important;
}

.icon.file.video {
    color: #00abd3 !important;
}

.icon.file.image {
    color: #FBAD18 !important;
}

.icon.file.blue-file {
    color: #00626e !important;
}

.icon.close.icon {
    color: #ff0000 !important;
}

/**=====================================Upload footage====================================*/
section.upload-form {
    margin-left: 2em;
    margin-right: 4em;
}

.upload-note {
    color: #ff0000 !important
}

.upload-error {
    color: #ff0000 !important;
}

.upload-form .two.fields {
    margin-left: 0px !important;
}

/**=====================================Camera Masking====================================*/
.ui.modal .header {
    width: 100%;
}

.allow-write .ui.toggle.checkbox .box::before, .ui.toggle.checkbox label::before {
    background: #d2d2d2 !important;
}

.allow-write .ui.checkbox input:checked ~ .box::before, .allow-write .ui.checkbox input:checked ~ label::before {
    background: #d2d2d2 !important;
}

.allow-write .ui.toggle.checkbox input:checked ~ .box::before, .allow-write .ui.toggle.checkbox input:checked ~ label::before {
    background: #3eb763 !important;
}

.allow-write .ui.checkbox .box:active::before, .allow-write .ui.checkbox label:active::before {
    background: #3eb763 !important;
}

.ip-list .list-title {
    /*margin-top: 50px;*/
    float: left;
    margin-bottom: -7px;
}

.alerts .ip-width {
    width: 15% !important;
    column-width: 140px;
}

.ui.modal .header {
    width: 100%;
}

.ui.modal.full {
    width: min-content;
}

    .ui.modal.full .actions {
        display: flex;
    }

    .ui.modal.full .image.content {
        height: calc(100% - 62px);
        flex-direction: column;
        margin: auto;
    }

    .ui.modal.full .controls {
        width: 100%;
    }

        .ui.modal.full .controls ul.shape-controls {
            list-style: none;
            padding: 5px;
        }

            .ui.modal.full .controls ul.shape-controls li {
                display: inline;
            }

.circle.yellow {
    color: #FBAD18;
}

.shape-controls {
    margin-bottom: 0px;
    border: 3px solid #495561;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /*! padding: 5px; */
}

    .shape-controls li {
        border-right: solid 2px white;
        padding: 0px 5px;
        font-size: 1.2em;
    }

.allow-write {
    position: absolute;
    bottom: 10px;
    right: 0px;
}

    .allow-write span {
        /*! display: block; */ vertical-align: middle;
        padding-bottom: 15px;
        padding-right: 14px;
    }

.add-tri i:before {
    margin-left: -5px;
}

.refresh-selection .checkbox {
    float: right;
}

.ui.progress {
    width: 100%;
    transition-duration: 300s;
}

.no-image-icon {
    position: absolute;
    top: 40%;
    left: 32%;
    font-size: 8em !important;
}

.no-image {
}

.masking {
    position: relative;
}

.ui.table.maskingtbl tbody tr:first-child {
    background: #fff !important;
}

.image-notice {
    position: absolute;
    left: 10px;
}

.image-notice-unsaved {
    position: absolute;
    left: 25px;
}

.image-notice.green {
    color: #21ba45 !important;
}

.image-notice.red {
    color: #db2828 !important
}

#txtNum {
    height: 10px;
}

.ui.mini.vertical.buttons .ui.icon.button {
    padding: 0px;
}

.industry.icon {
    margin-left: 68px;
}

.modal .ui.right.labeled.input {
    position: absolute;
    width: 47px;
}

.shape-controls li {
    border-right: 1px solid lightgray;
}

.actions .text {
    text-align: center;
}

.refresh {
    background: #6ebe4d !important;
}

.checkAll {
    color: #000;
    float: right;
    margin-right: 8px !important;
}

.view-masking {
    width: 50px !important;
    text-align: center !important;
}

    .view-masking.disabled {
        color: darkgray !important;
    }

.i.status {
    color: gray;
}
/****Create KDP*****/
.ui.grid.createKDP {
    margin-left: 2em;
    margin-right: 3em;
}

    .ui.grid.createKDP .three.fields {
        margin-left: 0em;
        margin-right: 0em;
        margin: 0px;
    }

    .ui.grid.createKDP .two.fields {
        margin-left: 0em;
        margin-right: 0em;
        margin: 0px;
    }

.createKDP .ui.form .fields .field:last-child {
    margin-bottom: 0px !important;
}

.createOrder.ui.form .field:last-child {
    margin-bottom: 0px !important;
}

.createQuote.ui.form .field:last-child {
    margin-bottom: 0px !important;
}

.error-dont-match {
    position: initial;
    bottom: 0px;
    color: #e84b4b;
    font-size: 1em !important;
}


/*Alerts For Workstation*/
.alerts-grid-view.ui.grid {
    margin-left: -10px;
}

.input-number-to-show {
    margin-right: 20px;
}

.alertsform.grid-view .top-table-lp {
    margin-left: 40px;
    position: relative;
    margin-right: 30px;
}

.alerts-heading {
    font-size: 21px;
    font-weight: bold;
    letter-spacing: .171em;
    line-height: 25px;
    text-transform: uppercase;
    font-family: Montserrat, sans-serif; /* changed from canada-type-gibson, sans-serif */
    color: #454D56;
}

.ui.grid .ten.wide.column.filter-by-col {
    padding-bottom: 0px;
}

.ui.grid .six.wide.column.sort-by-col {
    padding-bottom: 0px;
}

.filter-options {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
}

.filer-by {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .046em;
    line-height: 10px;
    font-family: Montserrat, sans-serif; /* changed from canada-type-gibson, sans-serif */
    color: #000000;
    padding-right: 10.5px;
    border-right: 1px solid #212121;
    margin-right: 16.5px;
    height: 100%;
    margin-bottom: 0px;
}

.input-filter-drop .sort-by {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .046em;
    line-height: 10px;
    font-family: Montserrat, sans-serif; /* changed from canada-type-gibson, sans-serif */
    color: #000000;
    padding-right: 10.5px;
    margin-right: 16.5px;
    height: 100%;
}

    .input-filter-drop .sort-by:after {
        content: "\f078";
        font-family: Icons;
        font-style: normal;
        font-weight: 400;
        text-align: center;
        margin-left: 5px;
        vertical-align: middle;
        line-height: 12px;
    }

.input-filter-drop {
    position: relative;
    cursor: pointer;
}

    .input-filter-drop p {
        font-size: 12px;
        font-weight: 400;
        letter-spacing: .046em;
        line-height: 10px;
        font-family: Montserrat, sans-serif; /* changed from canada-type-gibson, sans-serif */
        color: #000000;
        padding-right: 33px;
        font-size: clamp(10px,.65vw,12px);
        margin-bottom: 0px;
    }

        .input-filter-drop p:after {
            content: "\f078";
            font-family: Icons;
            font-style: normal;
            font-weight: 400;
            text-align: center;
            margin-left: 5px;
            vertical-align: middle;
            line-height: 12px;
        }

.alert-grid__details button.ui.button.default {
    font-size: clamp(8px,.65vw,12px);
    letter-spacing: .086px;
}

    .alert-grid__details button.ui.button.default.cancel,
    .alert-grid__details button.ui.button.default.refresh {
        width: clamp(86px,50%,101px);
        padding-left: initial;
        padding-right: initial;
    }

    .alert-grid__details button.ui.button.default.save {
        width: max(30%,74px);
        padding-left: initial;
        padding-right: initial;
    }

.alert-grid.column {
    width: 100%;
    min-width: 205px
}

    .alert-grid.column img {
        width: 100%;
    }

.filter-dropbox {
    background: #fff;
    border-radius: 4px;
    border: #D4D4D5 solid 1px;
    padding: 14px 11px;
    position: absolute;
    left: -10px;
    z-index: 2;
}

    .filter-dropbox .ui.button {
        margin-top: 10px;
        float: right;
    }

.ui.table.alertsFromWorkstation tr td {
    text-align: left !important;
    padding-left: 1rem !important;
    font-size: 12px;
    letter-spacing: .046em;
    font-family: Montserrat, sans-serif; /* changed from canada-type-gibson, sans-serif */
}

    .ui.table.alertsFromWorkstation tr td span {
        font-size: 12px;
        font-weight: bold;
        letter-spacing: .046em;
        font-weight: normal !important;
        font-family: Montserrat, sans-serif; /* changed from canada-type-gibson, sans-serif */
    }

        .ui.table.alertsFromWorkstation tr td span:nth-child(2) {
            padding-left: 14px;
        }

.ui.table.alertsFromWorkstation tr.not-viewed td:nth-child(2) {
    border-left: #495561 solid 2px;
    font-weight: bold !important;
}

.ui.table.alertsFromWorkstation tr.not-viewed td,
.ui.table.alertsFromWorkstation tr.not-viewed td span {
    font-weight: bold !important;
}

.ui.table.alertsFromWorkstation tr th:nth-last-child(2),
.ui.table.alertsFromWorkstation tr th:nth-last-child(1),
.ui.table.alertsFromWorkstation tr td:nth-last-child(2),
.ui.table.alertsFromWorkstation tr td:nth-last-child(1) {
    width: 1% !important;
    white-space: nowrap;
    padding-right: 1rem;
}

.ui.table.alertsFromWorkstation tr td:nth-last-child(2),
.ui.table.alertsFromWorkstation tr td:nth-last-child(1) {
    text-align: center !important;
}

.alerts-grid-view {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
}

.alert-grid {
    padding-left: 9px !important;
    padding-right: 9px !important;
    margin-top: 14px !important;
    min-width: 224px;
}

.alert-grid__details {
    border: 1px #E4E4E4 solid;
    border-top: none;
    padding: 10px 15px;
    margin-top: -5px;
}

.not-viewed .alert-grid__details,
.not-viewed .alert-grid__details span,
.not-viewed .alert-grid__details p {
    font-weight: bold;
}

.not-viewed .alert-grid_shadow {
    box-shadow: -6px 6px 6px #afb7bf;
}

.not-viewed .alert-grid__img {
}

.not-viewed .alert-grid__details {
    border-left: #afb7bf solid 2px;
    border-bottom: #afb7bf solid 2px;
    z-index: 1;
}

.alert-grid__details p {
    margin-bottom: 5px;
}

.alert-grid__details button:last-child {
    float: right;
}

/*.grid-view .grid-table {
    right: 32px;
}*/

.grid-table {
    /*position: absolute;
    top: -14px;
    right: -12px;*/
    display: flex;
    /*z-index: 2;*/
}

.icon.table-selection {
    font-size: 19px;
    margin-right: 10px;
    margin-top: 2px
}

.grid-table i {
    opacity: .45 !important;
    color: #495561;
}

    .grid-table i:hover {
        color: #31373D;
        opacity: 1 !important;
    }

    .grid-table i.active {
        opacity: 1 !important;
    }

.filter-tag,
.sort-tag {
    border: #D4D4D5 solid 1px;
    width: max-content;
    padding: 8px 15px;
    border-radius: 4px;
    margin-right: 10px;
    margin-bottom: 10px;
}

    .filter-tag i.icon.close,
    .sort-tag i.icon.close {
        color: #919191 !important;
        padding-left: 13px;
        width: max-content;
    }

        .filter-tag i.icon.close:hover,
        .sort-tag i.icon.close:hover {
            color: #495561 !important;
        }

.filter-tag-options {
    display: flex;
    flex-wrap: wrap;
    margin-right: 90px;
}

.filter-tag-clear {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-end
}

    .filter-tag-clear:hover {
        color: #000;
        font-weight: 700;
        cursor: pointer;
    }

.top-table-controls.alert-top {
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: 42px;
}

.filter-tag-options-row.ui.row {
    padding-bottom: 0px !important;
}

.grid-row.column.five {
    padding-top: 0px !important;
}

.input-filter-drop span {
    font-size: 12px;
    font-weight: bold;
    color: #2C2C2C;
    font-family: Montserrat, sans-serif; /* changed from canada-type-gibson, sans-serif */
    text-transform: capitalize;
    letter-spacing: 0;
}

.asc-desc-pair .ui.checkbox input:checked ~ label::after,
.report-modal .ui.checkbox input:checked ~ label::after {
    color: #fff !important;
    background: #00A4C9;
    border-radius: 0px;
}

.report-modal .ui.radio.checkbox input:checked ~ label::after {
    border-radius: 50px;
    background: #00A4C9 !important;
}

.asc-desc-pair .ui.checkbox label,
.report-modal .ui.checkbox label {
    background: #fff;
    text-transform: capitalize;
}

    .asc-desc-pair .ui.checkbox label::before,
    .report-modal .ui.checkbox label::before {
        border-radius: 0px;
    }

.report-modal .ui.radio.checkbox input:checked ~ label::before {
    border-color: #00A4C9;
}

.report-modal .ui.radio.checkbox label::after {
    border-radius: 50px;
    background: #00A4C9;
}

.asc-desc-pair .desc {
    margin-left: 12px;
    margin-top: 0px;
}

.asc-desc-option {
    margin-bottom: 15px;
}

    .asc-desc-option span {
        margin-bottom: 5px;
    }

.ui.pagination.menu {
    border: none;
    box-shadow: none;
}

    .ui.pagination.menu a {
        margin-right: 7px;
        color: #000;
        cursor: pointer;
    }

    .ui.pagination.menu div.disabled {
        margin-right: 7px;
    }

    .ui.pagination.menu a.active {
        font-weight: bold;
        color: #00A4C9;
    }

    .ui.pagination.menu a.page-prev {
        margin-right: 20px;
        font: 400;
    }

        .ui.pagination.menu a.page-prev i {
            font-size: 10px;
            margin-right: 0px;
            vertical-align: top;
        }

    .ui.pagination.menu a.page-next {
        margin-left: 13px;
        font: 400;
    }

        .ui.pagination.menu a.page-next i {
            font-size: 10px;
            margin-right: 0px;
            vertical-align: top;
        }

.bottom-pagination {
    display: flex;
    justify-content: space-between;
}

.table-view .bottom-pagination {
    margin-left: 42px;
    margin-right: 10px;
}

table.ui.table.alertsFromWorkstation {
    margin-top: 0px
}

.alert-details__detail .title {
    font-weight: bold;
    margin-bottom: 0px;
}

.alert-details {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 30px;
}

.ui.modal.view-modal {
    width: 57%;
}

    .ui.modal.view-modal .content,
    .ui.modal.report-modal .content {
        border-radius: 10px;
    }

    .ui.modal.report-modal .close.icon,
    .ui.modal.view-modal .close.icon {
        color: #EAEAEA !important;
    }

    .ui.modal.view-modal .header {
        border-bottom: none;
        text-transform: uppercase;
        font-family: Montserrat, sans-serif; /* changed from canada-type-gibson, sans-serif */
    }

.ui.modal.report-modal .header {
    text-transform: uppercase;
    font-family: Montserrat, sans-serif; /* changed from canada-type-gibson, sans-serif */
}

.alert-img-details {
    display: flex;
}

    .alert-img-details img {
        width: 66%;
        height: min-content;
    }

.alert-img-details__details {
    width: 35%;
    padding-left: 26px;
    position: relative;
}


    .alert-img-details__details .alert-details__detail {
        margin-bottom: 25px;
    }

.ui.modal.view-modal .close {
}

.false-pos-buttons {
    position: absolute;
    bottom: 0px;
    width: 100%;
}

    .false-pos-buttons p {
        font-weight: bold;
    }

    .false-pos-buttons button.save {
        float: right;
        margin-right: 20px;
    }

    .false-pos-buttons button.cancel {
        margin-left: 20px;
    }

.recipients {
    white-space: pre-line;
    max-height: 100px;
    overflow-y: auto;
}

.report-modal {
    width: 60% !important;
}

    .report-modal .content .ui.grid {
        width: 100%;
    }

.report-image {
    position: relative;
    width: 100%;
}

    .report-image img {
        width: 100%;
    }

.bounding-box {
    position: absolute;
}

    .bounding-box p {
        position: absolute;
        bottom: 100%;
        padding-left: 10px;
        width: calc(100% + 4px);
        min-width: max-content;
        left: -2px;
        padding-right: 10px;
        color: #fff;
        text-align: center;
        margin-bottom: 0px;
        display: none;
    }


.bounding-box__active {
    opacity: 0;
    width: 100%;
    height: 100%;
    opacity: .0;
}

.bounding-box.active p,
.bounding-box.hover p {
    display: block;
}

.bounding-box.active .bounding-box__active, .bounding-box.hover .bounding-box__active {
    opacity: .3;
}

.ui.checkbox.tag,
.report-modal .radio.checked {
    background: none;
}

.tags {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 180px;
}

    .tags .tag {
        margin-top: 12px;
    }

.report-modal .radio {
}

.pause-alert {
    margin-top: 18px;
    margin-bottom: 35px;
}

    .pause-alert .title {
        font-weight: 700;
        width: max-content;
    }

.report-form .alert-details__detail {
}

.report-modal .ui.form .fields .field {
    margin-bottom: 0px !important;
}

.report-form {
    position: relative;
    height: 100%;
}

    .report-form .report-false-positive {
        position: absolute;
        bottom: 0px;
        bottom: 0px;
        right: 0px;
    }

.report-false-positive {
}

    .report-false-positive.not-valid::before {
        content: 'need to select atleat one tag';
        position: absolute;
        right: 100%;
        width: max-content;
        color: red;
        font-size: .75em;
        letter-spacing: 1px;
        text-transform: capitalize;
        margin-right: 10px;
    }

.report-modal-load {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: hsla(0, 0%, 0%,.5);
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .report-modal-load .loading-bars {
        position: initial;
    }

        .report-modal-load .loading-bars div {
            /*background: #FBAD18;*/
        }

.alert-details__detail.last {
    margin-bottom: 75px;
}

.table-view .view-report {
    width: 100%;
}

.alerts-view-page {
    display: flex;
    justify-content: space-between;
    margin-right: 6%;
    /*margin-bottom:32px;*/
    margin-left: 42px;
}

    .alerts-view-page .ui.icon.input.search {
        margin-right: 20px;
    }

.ui.button.default.refresh:hover {
    background: #004152 !important;
    color: #FFF56D;
}

.alert-controls-right {
    display: flex;
}

    .alert-controls-right .button-group {
        margin: 0px;
    }

        .alert-controls-right .button-group button {
            font-size: clamp(8px,.65vw,11px) !important;
            letter-spacing: .083em !important;
        }

.alert-grid__img {
    position: relative;
    width: 100%;
    padding-top: 49.25%;
    background: #EEF4F6;
}

    .alert-grid__img img {
        object-fit: cover;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }

    .alert-grid__img i {
        height: 100%;
        width: 100%;
        position: absolute;
        left: calc(50% - 26px);
        font-size: 50px !important;
        top: calc(50% - 8px);
        color: white;
    }

    .alert-grid__img span {
        position: absolute;
        left: calc(50% - 52px);
        font-size: 12px;
        top: calc(50% - 8px);
        color: #454D56;
        font-weight: 600;
    }

.alert-img-details__no-img {
    background: #EEF4F6;
    width: 60%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .alert-img-details__no-img i.icon {
        color: #fff;
        font-size: 10vw;
        margin-top: -6vh;
    }

    .alert-img-details__no-img span {
        position: absolute;
    }

        .alert-img-details__no-img span:not(.sub) {
            font-size: 2vw !important;
        }

        .alert-img-details__no-img span.sub {
            bottom: 0px;
            text-align: center;
            margin: 16px;
        }

.report-modal .alert-img-details__no-img {
    width: 100%;
    height: 100%;
}

.report-no-img {
    height: calc(100% - 70px);
    min-height: 330px;
}

.filter-dropbox.export {
    margin-top: 5px;
    right: 0px;
    left: initial;
    z-index: 10;
}

.alert-controls-right .button-group {
    display: flex;
}

    .alert-controls-right .button-group .ui.button.default {
        padding-left: 25px;
        padding-right: 25px;
        padding-top: 10px;
        padding-bottom: 10px;
        height: 32px;
    }

    .alert-controls-right .button-group button {
        margin-right: 10px;
    }

.table-view .ui.table tr th:first-child {
    display: none;
}

.table-view .ui.table tr td:first-child,
.table-view .ui.table tr th:first-child {
    display: none;
}

.table-view .table.ui {
    width: 99%;
    margin-left: 42px;
}

.alert-grid__img.no-img, .alert-grid__img img {
    cursor: pointer;
}

.alertsform .ui.icon.input.search {
    height: 32px;
}

.alerts-view-page h1 {
    margin-bottom: 0px;
    align-self: center;
}

.alertsform table.alertsFromWorkstation tr th:nth-child(2),
.alertsform table.alertsFromWorkstation tr td:nth-child(2) {
    width: 15%;
    min-width: 186px;
}

.alertsform table.alertsFromWorkstation tr th:nth-child(3),
.alertsform table.alertsFromWorkstation tr td:nth-child(3) {
    width: 20%;
    min-width: 217px;
}

.alertsform table.alertsFromWorkstation tr th:nth-child(4),
.alertsform table.alertsFromWorkstation tr td:nth-child(4) {
    min-width: 154px;
}

.alertsform table.alertsFromWorkstation tr th:nth-child(5),
.alertsform table.alertsFromWorkstation tr td:nth-child(5) {
}

.alertsform table.alertsFromWorkstation tr th:nth-child(6),
.alertsform table.alertsFromWorkstation tr td:nth-child(6) {
    min-width: 162px;
}

.alertsform table.alertsFromWorkstation tr th:nth-child(7),
.alertsform table.alertsFromWorkstation tr td:nth-child(7) {
    width: 5%;
    min-width: 168px;
}

.not-viewed .alert-grid__img .viewed-badge {
    display: none;
}

.alert-grid__img .viewed-badge {
    z-index: 1;
    position: absolute;
    top: 10px !important;
    padding: 10px;
    right: 10px;
    left: inherit;
    background: white;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1em;
}

.select-dectection {
    width: max-content;
}

@media screen and (max-width: 1450px) {
    .alert-grid__details button:last-child {
        float: initial;
        margin-top: 5px;
    }

    .report-modal {
        width: 85% !important;
    }

    .open-report-modal-from-view {
        margin-left: 0px;
    }

    #Parameterstbl {
        font-size-adjust: initial;
        font-size: x-small !important;
    }
}

@media screnn and (max-width:1280px) {

    #Parameterstbl {
        font-size-adjust: initial;
        font-size: xx-small !important;
    }
}

@media screen and (max-width: 367px) {
    .alerts .ip-width {
        width: 15% !important;
        column-width: 140px;
    }
}

@media screen and (max-width: 500px) {
    /*.dark-scan-box {
            width: 100%; /*IP scan page
        }*/


    .column-logo .logo-text {
        font-family: canada-type-gibson, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 1rem;
        color: #fff;
        line-height: 82px;
        margin-left: -.1em;
        margin-top: .1em;
    }

    .column-logo {
        width: 145px !important;
    }

    .column-header {
        background: #1f446e;
        display: inline-block;
        height: 100%;
        float: left;
        width: calc(100% - 145px);
    }

    .column-main {
        width: calc(100% - 145px);
    }

    .workstation-name {
        font-size: 0.9rem;
    }

    .page-title {
        font-size: 0.8rem;
    }

    .column-sidebar {
        width: 145px !important;
    }

    .section .heading {
        font-size: 0.7rem;
    }

    .section .nav.item {
        font-size: 0.6rem;
    }

    i.icon, i.icons {
        font-size: .7em !important;
    }

    .ip-list .title-desc span {
        font-size: 0.5rem;
    }

    .ip-list {
        margin: 2rem;
    }

    .ip-input .ui.input input {
        font-size: 0.9rem;
    }


    .top-table-controls span {
        font-size: 1.3em; /*Alerts Page*/
    }

    .title-desc p {
        margin-right: -5rem;
    }

    .button-group .ui.button.default {
        font-size: 0.7rem;
    }

    .title-alerts span {
        font-size: 1.3rem;
        letter-spacing: 2px;
        margin-left: 4em;
    }


    .list-container {
        margin-right: 2rem;
    }
}

@media screen and (max-width: 1404px) {
    /*.list-title {
            float: left;
            margin-top: 50px;
            width: 100%;
            text-align: left;
        }


        .add-manually {
            width: 0%;
        }

            .add-manually .ui.button.default {
                width: 189px;
                margin-left: 20px !important;
            }

        .add-search {
            margin-top: 0px !important;
            height: 128px !important;
        }

        .scan-save {
            margin-bottom: 50px;
        }

        .ip-list .button-right, .ip-list .button-right button {
            float: right !important; /*changed from left to right
            display: block;
        }

        .ip-list .button-right {
            margin-top: 1rem;
            width: 100%;
        }

        #check-All {
            margin-top: 40px !important;
            margin-left: 20rem !important;
        }

        .add-search {
            margin-top: 5rem;
            height: 62px;
        }

        .ip-list .ui.icon.input.search {
            display: block;
            float: left;
            width: 25%;
        }

        .add-search {
            display: inline-block;
        }

        .dark-scan-box {
            width: 100%;
        }*/

    #Parameterstbl {
        font-size-adjust: initial;
        font-size: xx-small !important;
    }
}

@media screen and (max-width: 1550px) {
    /* Hide captions */
    .alerts .button-group {
        width: 100%;
        display: block;
    }

    .alerts .buttons {
        float: left;
        margin-top: 2rem;
    }

    .alerts .title-desc {
        width: 70%;
    }

    .ui.modal.view-modal {
        width: 90% !important;
    }

    /*#Parameterstbl {
            font-size-adjust: initial;
            font-size: small !important;
        }*/

}

@media screen and (max-width: 1640px) {
    /* Hide captions */
    .button-group {
        display: block;
        margin: 2rem 0px;
        float: left;
    }

    /*.dark-scan-box {
        width: 100%;
    }

    .scan-save .ui.input.search {
        float: left;
    }

    .ip-list hr {
       
        margin-top: 100px;
    }

    .add-manually .ui.button.default {
       
        margin-top: 50px;
        margin-left: -18em;
    }

    #check-All {
        margin-top: 20px;
    }

    .ui.button.default.save {
        margin-top: -15px;
    }*/

    #Parameterstbl {
        font-size-adjust: initial;
        font-size: small;
        /*max-width: 40em !important;*/
    }
}



@media screen and (max-width: 980px) {
    .alerts .ui.table {
        display: block;
        width: 100%;
        overflow: scroll;
    }


    /*.dark-scan-box {
            width: 100%;
        }*/


}

@media screen and (max-width:1880) {

    .cameras .ui.table {
        display: block;
        width: 100%;
        overflow: scroll;
    }

    .alerts .ui.table {
        display: block;
        width: 100%;
        overflow: scroll;
    }

    .cameras .top-table-controls {
        margin-left: 92px;
    }

    /*.dark-scan-box {
            width: 100%;
        }*/

}

/*@media screen and (max-width:1900) {

   #Parameterstbl tbody tr td.detectionReset {
        
        display:inline-grid !important;
    }
}*/


@media screen and (max-width:1920px) {

    /*.dark-scan-box {
            width: 100%;
        }

        .scan-save .ui.input.search {
            float: left;
        }

        .ip-list hr {
            margin-top: 120px;
        }

        .add-manually .ui.button.default {
            margin-top: 50px;
            margin-left: -20em;
        }

        #check-All {
            margin-top: 60px;
        }*/
    #Parameterstbl tbody tr td.detectionReset {
        display: grid !important;
    }

    .ui.button.default.save.ip {
        margin-top: -15px;
        margin-left: -10rem;
    }

    #tblAlerts {
        display: block;
        overflow: scroll;
        font-size: 0.7em !important;
    }

    .alerts .ip-width {
        width: 15% !important;
        column-width: 95px !important;
    }

    .alerts .sysip-width {
        width: 15% !important;
        column-width: 80px !important;
    }



    .alerts .th-phn-width {
        width: 10%
    }

    .alerts .td-phn-width {
        column-width: 90px;
    }
}

@media screen and (max-width:4000px) {

    /*.dark-scan-box {
            width: 100%;
        }

        .add-manually .ui.button.default {
            margin-top: 80px;
            margin-left: -20em;
            margin-right: 20em;
        }

        #prompt {
            float: left;
        }

        .scan-save .ui.input.search {
            float: left;
            margin-top: 30px;
        }*/

    /*.ip-list hr {
            margin-top: 120px;
        }*/

    .title-alerts span {
        margin-left: 8rem;
    }

    .title-alerts {
        margin-left: 6rem;
    }


    .alerts .ip-width {
        width: 10% !important;
        column-width: 240px;
    }

    .alerts .sysip-width {
        width: 10% !important;
        column-width: 200px;
    }
}


@media screen and (max-width:5200px) {
    /* alerts page*/
    .alerts .ip-width {
        width: 10% !important;
        column-width: 240px;
    }

    #Parameterstbl {
        /*width: 30% !important;*/
    }

        #Parameterstbl tbody tr td.detectionReset {
            display: table-cell;
        }
}

.loading-bars {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
    transform: scale(2);
    position: absolute;
    z-index: 100;
    left: 55%;
    top: 53%;
    display: none;
}

    .loading-bars div {
        display: inline-block;
        position: absolute;
        left: 6px;
        width: 13px;
        background: #1f446e;
        animation: loading-bars 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
    }


        .loading-bars div:nth-child(1) {
            left: 6px;
            animation-delay: -0.24s;
        }

        .loading-bars div:nth-child(2) {
            left: 26px;
            animation-delay: -0.12s;
        }

        .loading-bars div:nth-child(3) {
            left: 45px;
            animation-delay: 0;
        }

@keyframes loading-bars {
    0% {
        top: 6px;
        height: 51px;
    }

    50%, 100% {
        top: 19px;
        height: 26px;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}



.login-logo img { /*animation for loogin page logo*/
    animation: fadeInAnimation ease 10s;
    animation-iteration-count: 2;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.logo-text img { /*animation for sidebar logo*/
    animation-name: slideInright;
    animation-duration: 2s;
}

@keyframes slideInright {
    from {
        transform: translate3d(100%, 0, 0 );
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}


.hide {
    display: none !important;
}
