.content.content-computers.container-scroll {
    height: 400px !important;
    overflow-y: scroll;
}



body {
    font-family: 'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
    font-size: 14px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 0;
    height: 100vh;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

* {
    font-family: 'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; 
}

#PreviewPopUpWrapper, #PreviewPopUpLiteWrapper {
    display: none;
    z-index: 1000;
    height: 100%;
    width: 100%;
    position: fixed;
}
.overlay-wrapper {
    border-radius: 10px;
    box-shadow: 0 8px 10px -6px #0000001a,0 20px 25px -5px #0000001a;
    background : white;
    padding-top : 10px ;
    padding-bottom : 10px;
    max-width :600px;
    
}

#popup-confirm-message {
    font-family: 'Segoe UI',sans-serif;
    color: #6b7280;
    font-weight: 700;
}

.menu-body {
    margin-bottom: 60px;
}

.warning-banner {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    height: 42px;
    box-shadow: 0 8px 10px -6px #0000001a,0 20px 25px -5px #0000001a;
}
    .warning-banner.red {
        background-image: linear-gradient(180deg, #F23030 1.5%, #F84848 6.5%, #F85353 50.5%, #F03737 80.5%, #F03737 100%);
    }
    .warning-banner.orange {
        background: linear-gradient(180deg, #FFA430 1.5%, #FFAF48 6.5%, #FF965A 50.5%, #FE813A 80.5%, #FF8E4D 100%);
    }

    .content.users {
        height: 300px;
    }

.warning-banner p {
    color: #FFF;
    text-align: center;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -1.2px;
    padding-left: 10px;
    padding-right: 10px;
}
.warning-banner button {
    background: inherit;
    border: 1px solid white;
    color: white;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
    font-family: Inter;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -1.1px;
    transition : transform 0.1s ease-in
}

        .warning-banner button:hover {
            cursor: pointer;
            transform: scale(1.05);
        }
        .admin-page-header {
            border-bottom: solid 1px #D7D7D7;
            display : flex ;
            justify-content : start ;
            align-items :start ;
        }
.admin-page-body {
    padding-left: 50px;
    padding-right: 50px;
    padding-top:25px;

}

.menu.skip.admin-page {
 
    font-size : 30px;
    height : 60px;
}
    .menu.skip.admin-page svg {
        width:35px;
    }
    .menu-header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-bottom : 50px ;
        align-items : center ;

    }
    .menu-header > img {
        width : 268px;
    }
    .remove-all-styles {
        background: linear-gradient(0deg, #686868 21.21%, #A8A8A8 77.27%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
        font-family: Inter;
        font-size: 25px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: -1.25px;
        margin-bottom: 43px;
    }

.profile-icon {
    width: 30px;
    height: 30px;
    border-radius : 50% ;
    display : flex ;
    align-items : center ;
    justify-content : center ;
    color : white;
    background: linear-gradient(180deg, #FFA430 1.5%, #FFAF48 6.5%, #FF965A 50.5%, #FE813A 80.5%, #FF8E4D 100%);
    font-size : 14px;
}
h2 {
    margin-bottom: 20px;
    margin-right: 0;
    font-size: 20px;
    float: left;
    block-size: fit-content
}
td,
tr {
  border: 0 solid transparent;
  background-clip: padding-box;
  padding: 5px
}
option {
  padding-bottom: 10px
}
.menu {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Segoe UI',sans-serif;
    color: #6b7280;
    font-size: 16px;
    font-weight: 700;
    border-radius: 6px;
    box-sizing: border-box;

    margin-bottom: 5px;
    text-decoration: none;
    padding-left: 20px;
    height: 45px;
    width : 90%
}

.menu.admin-page {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Segoe UI',sans-serif;
    color: #6b7280;
    font-size: 16px;
    font-weight: 700;
    border-radius: 6px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
    text-decoration: none;
    padding-left: 50px;
    height: 45px;
    width: 100%;
   
}
.menu svg {
    fill: #686868;
    width: 20px
}
    .fullscreen-container {
        display: none;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(90,90,90,.5);
        z-index: 9999;
        
    }
.wrapper-confirm {
    position: absolute;
    padding: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 20px;
}
.wrapper-confirm .card {
  width: 90%;
  max-width : 580px;
  height: 150px;
  background-color: #fff;
  padding: 10px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 3px;
  box-shadow: rgba(149,157,165,.2) 0 8px 24px;
  font-size: 14px;
  margin : 0 auto;

}

   

.wrapper-confirm .card .subject {
  margin-left: 18px
}
.wrapper-confirm .card .subject p {
  color: #909092
}
.wrapper-confirm .card .icon {
  font-size: 45px;
   margin-top : 20px;
}
.wrapper-confirm .card .icon-times {
  font-size: 28px;
  color: #c3c2c7;
  cursor: pointer;
  position: absolute;
  top: 25px;
  right: 30px
}
.wrapper-info {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 10px;
  margin-top: 85px
}
.wrapper-info .card {
  width: 720px;
  height: 150px;
  background-color: #fff;
  padding: 10px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-left: 5px solid #3286e9;
  border-right: 1px solid #3286e9;
  border-top: 1px solid #3286e9;
  border-bottom: 1px solid #3286e9;
  border-radius: 3px;
  box-shadow: rgba(149,157,165,.2) 0 8px 24px;
  font-size: 14px
}
.wrapper-info .card .subject {
  margin-left: 18px
}
.wrapper-info .card .subject p {
  color: #909092
}
.wrapper-info .card .icon {
  font-size: 45px;
  color: #3286e9
}
.wrapper-info .card .icon-times {
  font-size: 28px;
  color: #c3c2c7;
  cursor: pointer;
  position: absolute;
  top: 25px;
  right: 30px
}
.wrapper-warning {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 10px;
  margin-top: 85px
}
.wrapper-warning .card {
  width: 720px;
  height: 200px;
  background-color: #fff;
  padding: 10px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-left: 5px solid #fdc220;
  border-right: 1px solid #fdc220;
  border-top: 1px solid #fdc220;
  border-bottom: 1px solid #fdc220;
  border-radius: 3px;
  box-shadow: rgba(149,157,165,.2) 0 8px 24px;
  font-size: 14px
}
.wrapper-warning .card .subject {
  margin-left: 18px
}
.wrapper-warning .card .subject p {
  color: #909092
}
.wrapper-warning .card .icon {
  font-size: 45px;
  color: #fdc220
}
.wrapper-warning .card .icon-times {
  font-size: 28px;
  color: #c3c2c7;
  cursor: pointer;
  position: absolute;
  top: 25px;
  right: 30px
}
.overlay {
    height: 100%;
    width: 0%;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0px;
    background: rgba(90,90,90,.5);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items : center;
}
.overlay-title {
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  color: #6b7280;
  margin-bottom: 20px
}
.overlay-content {
  margin-left: 60px;
  margin-right: 60px;
  font-size: 14px
}
.overlay-form-entry {
  justify-content: center;
  display: flex;
  margin-bottom: 5px;
  gap : 10px;   
  align-items : center ;
}
.content-wrapper .overlay-form-entry input {
  padding: 5px;
}    
.overlay label {
  width: 50%
}
.overlay input {
  padding-top: 2px;
  padding-bottom: 3px;
  box-sizing: border-box;
  border: 1px solid #000;
  width: 200px;
}
.overlay-input-error {
  border-color: #900;
  background-color: #fdd
}
.tooltip {
  margin-left: 4px
}
.tooltip:hover {
  cursor: help
}
.clickable {
  cursor: pointer
}
.content {
    border: 1px solid #6b7280;
    margin-top: 70px;
    overflow-y: auto;
    height: 400px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 10px -6px #0000001a,0 20px 25px -5px #0000001a;
    border : none ;
}


.content td {
        padding : 10px;
    }


.admin-page-body label, .admin-page-body h2, .admin-page-body p {
    font-family: 'Segoe UI',sans-serif;

}  

.admin-page-body label, .admin-page-body p {
    font-family: 'Segoe UI',sans-serif;
    color: #6b7280;
    font-weight: 600;
}

.content-wrapper .round-button {
    box-shadow: 0 8px 10px -6px #0000001a,0 20px 25px -5px #0000001a;
}

.jstree .jstree-wholerow-hovered {
    background: #e8e8e8 !important
}
.jstree .jstree-wholerow-clicked {
  background: #e8e8e8!important
}
.computer-online {
  color: #00b67a
}
.computer-offline {
  color: #c60b0b
}
.computer-offline-wakeonlan {
  color: #c60b0b
}
#menu {
    transition: width 0.2s ease-in;
    display: flex;
    flex-direction: column;
    width: 292px;
    padding-top: 50px;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    z-index:10;
    height: 100%;

    background: linear-gradient(207deg, rgba(233, 233, 233, 0.40) 7.09%, rgba(242, 242, 242, 0.40) 40.24%, rgba(226, 226, 226, 0.40) 71.03%, rgba(216, 216, 216, 0.40) 86.32%, rgba(218, 218, 218, 0.40) 99.75%);
}

.menu-body {
    padding-left: 5px;
}

.menu-footer {
    padding-left: 5px;
}

    #menu > div {
        width: 290px;
    }
.content-wrapper {
    overflow: auto;
    width: 100%;
    padding-top: 30px;
    background-image: url('../images/bck-admin-rs-blured.svg');
    background-size: cover ;
    -webkit-backdrop-filter: blur(4px); /* Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ */
    backdrop-filter: blur(4px)
}
  


.body-wrapper {
    display: flex;
    height : 100% ;

   
}
:focus {
    outline: 0
}

.toggle-btn {
    height: 30px;
    width : 30px;
    border-radius: 50%;
    background: linear-gradient(180deg, #FFA430 1.5%, #FFAF48 6.5%, #FF965A 50.5%, #FE813A 80.5%, #FF8E4D 100%);
    border: none;
    position : relative ;
    left : 50%;
    transform : translateX(-50%) ;
    display : none ;
   
}
    .toggle-btn:hover {
        cursor : pointer ; 
        transform : scale(1.2)
    }



.tooltip-text {
    display: none;
    position: absolute;
    width: auto;
    left: 50px;
    background: #F2F2F2;
    padding: 10px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    z-index: 100;
    border-radius: 5px;
    color: #6b7280;
}

    .tooltip-text::after {
        content: "";
        position: absolute;
        left: -6px;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        width: 12px;
        height: 12px;
        background: #F2F2F2;
        border-left: 1px solid rgba(200, 200, 200, 0.3); /* Optional outline */
        border-bottom: 1px solid rgba(200, 200, 200, 0.3);
        z-index: -6;
    }
.teams_block_container {
    display : flex ;
    gap : 30px ;
}
@media screen and (max-width: 899px) {
    #menu {
        width: 45px;
        padding-top: 25px;
        padding-left: 10px;
        padding-right: 10px;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .help-icon {
        margin-left: 0px !important;
    }

    .menu-body {
        padding-left: 0px;
    }

    .toggle-btn {
        display: block;
    }

    .menu-header {
        margin-bottom: 20px;
    }

    .menu-body {
        margin-bottom: 30px;
    }



    #menu .menu {
        padding-left: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .menu-body span, .menu-footer span:not(.profile-icon), .menu-header-icon {
        display: none;
    }

    #menu .menu {
        width: 50px;
        margin-left: 0;
        margin-right: 0;
        position: relative;
    }

    .integration-form-wrapper {
        width: 100%;
    }

    .integration-freshdesk {
        width: 90%;
        overflow: hidden;
    }

    #menu > div {
        width: auto;
    }

    .content-wrapper {
        width: 100%;
    }

    .menu:hover .tooltip-text {
        display: block !important;
    }
    .overlay-form-action {
        padding-right: 0px;
    }

    .overlay-content {
        margin-left: 75px;
        margin-right: 75px;
    }

    .overlay-wrapper {
        width: 95%;
    }

    .overlay-form-action .round-button {
        margin-bottom: 15px;
    }

    @media screen and (max-width: 799px) {
     
    

      
    }

    .menu-footer .menu:hover {
        color: #FE813A;
        transform: scale(1.02)
    }

        .menu-footer .menu:hover svg {
            fill: #FE813A;
            ;
        }

    .menu-footer .menu {
        transition: transform 0.2s ease-in;
    }




    @media screen and (max-width:700px) {

        .admin-page-body {
            padding-top: 15px;
        }

            .admin-page-body h2 {
                margin-bottom: 0;
            }

            .admin-page-body .float-container .content {
                margin-top: 0px;
            }

        .teams_block_container {
            flex-direction: column;
            gap: 5px;
        }

            .teams_block_container #teams_block, .teams_block_container #users_block, .teams_block_container #computers_block {
                width: 100%;
            }

            .teams_block_container .content.users, #teams_block .content, #computers_block .content {
                height: auto;
            }

        .warning-banner p {
            font-size: 14px;
        }

        .warning-banner button {
            font-size: 12px;
        }
    }





    @media screen and (max-width:700px) {
        .content-wrapper {
            padding-left: 0px;
            height: auto;
            overflow: auto;
        }

        .wrapper-confirm {
            padding: 0px;
        }

            .wrapper-confirm .card {
                font-size: 12px;
                width: 80%;
            }

        .overlay-form-entry {
            flex-direction: column;
            gap: 10px;
            padding-right: 0px;
        }

        .content-wrapper .overlay-form-entry input {
            width: 100%;
            min-width: 180px;
        }

        .wrapper-confirm .card .icon {
            display: none;
        }

        .wrapper-confirm .card .subject {
            margin-left: 0px;
        }

        .admin-page-body {
            padding-left: 20px;
            padding-right: 20px;
        }

        .warning-banner button {
            font-size: 12px;
        }

            .warning-banner button span {
                display: none;
            }

        .warning-banner {
            padding-left: 5px;
            padding-right: 5px;
        }

            .warning-banner button {
                margin-right: 10px;
            }
    }



    @media screen and (max-width: 399px) {
        #users-table {
            font-size: 12px;
        }

        .content {
            max-height: 300px;
            overflow: auto;
        }
    }

    @media screen and (max-width: 799px) {



        .content-wrapper {
            padding-top: 5px;
        }

        #menu.expanded .menu-footer {
            padding-left: 5px;
        }

        #menu.expanded .menu-body {
            padding-left: 5px;
        }

        #menu.expanded {
            width: 280px !important;
            overflow: hidden;
            padding-left: 20px;
            padding-right: 0;
            position: fixed;
            z-index: 50;
            background: linear-gradient(207deg, rgba(233, 233, 233, 0.40) 7.09%, rgba(242, 242, 242, 0.40) 40.24%, rgba(226, 226, 226, 0.40) 71.03%, rgba(216, 216, 216, 0.40) 86.32%, rgba(218, 218, 218, 0.40) 99.75%), white;
        }

            #menu.expanded .toggle-btn {
                left: 250px;
                border-radius: 0 5px 5px 0;
                top: -25px;
                transform: translateX(0%) rotate(180deg);
            }

            #menu.expanded .menu-header {
                width: 250px
            }

                #menu.expanded .menu-header img {
                    width: 250px
                }

            #menu.expanded .menu {
                justify-content: flex-start;
                padding-left: 20px;
                width: auto;
                width: 270px
            }

            #menu.expanded .menu-body span,
            #menu.expanded .menu-footer span:not(.profile-icon),
            #menu.expanded .menu-header-icon {
                display: inline !important;
            }
    }