body{
    font-size: 17px;
}

.mt10{
    margin-top: 10px;
}

.mt20{
    margin-top: 20px;
}

.mt30{
    margin-top: 30px;
}

.mt40{
    margin-top: 40px;
}

.mt50{
    margin-top: 50px;
}

.mt60{
    margin-top: 60px;
}

.mt70{
    margin-top: 70px;
}

.mt80{
    margin-top: 80px;
}

.mt90{
    margin-top: 90px;
}

.mt100{
    margin-top: 100px;
}

.font-10{
    font-size: 10px !important;
}

.font-12{
    font-size: 12px !important;
}

.font-14{
    font-size: 14px !important;
}

.font-16{
    font-size: 16px !important;
}

.font-18{
    font-size: 18px !important;
}

.font-20{
    font-size: 20px !important;
}

.font-22{
    font-size: 22px !important;
}

.font-24{
    font-size: 24px !important;
}

.font-26{
    font-size: 26px !important;
}

.font-28{
    font-size: 28px !important;
}

.font-30{
    font-size: 30px !important;
}

.text-center{
    text-align: center;
}

.text-left{
    text-align: left;
}

.text-right{
    text-align: right;
}

.text-justify{
    text-align: justify;
}

.popup{
    position: fixed;
    background: rgba(0,0,0,0.40);
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    z-index: 10;
}

.group-popup{
    color: #000000;
    height: 100%;
}

.popup-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}

.popup-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 0.5rem;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.popup-header .logo img{
    width: 100px;
    margin: 15px 30px 0;
}

.popup-header .title{
    font-size: 24px;
}

.popup-body{
    background: transparent;
    /*display: flex;*/
    /*flex-direction: column;*/
    height: calc(100% - 60px);
}

#view_device{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.close-popup{
    cursor: pointer;
    height: 30px;
    width: 30px;
}

p{
    letter-spacing: unset !important;
}

.slick-prev{
    left: 0 !important;
    z-index: 1;
}

.slick-prev:before{
    content: url("/external/images/prev.svg") !important;
}

.slick-next{
    right: 0 !important;
}

.slick-next:before{
    content: url("/external/images/next.svg") !important;
    opacity: 1 !important;
}

.row {
    position: relative;
    margin-bottom: 15px !important;
}

.error{
    color: red;
    font-size: 12px;
}

.information{
    overflow-x: hidden;
    overflow-y: auto;
}

.information iframe{
    width: 100%;
    height: 99%;
    border: 0px;
}

.g_slider_img{
    width: 100%;
    height: 100%;
    position: relative;
    background: #cdc9b8;
}

.g_slider_img .slider-for img{
    object-fit: contain;
}

.g_slider_img .slider-for, .g_slider_img .slider-for *{
    width: 100%;
    height: 100%;
}

.g_slider_img .slider-nav{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 15px;
    height: 80px;
    width: 50%;
    background: #607d8b82;
    padding: 5px 0;
    border-radius: 7px;
}



.slick-list.draggable, .slick-list.draggable * {
    height: 100%;
}

.slick-slide img{
    border-radius: 5px;
}

.information .no_data{
    max-width: 100%;
    height: calc(100% - 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.popup-body .body {
    /*overflow-x: hidden;*/
    /*overflow-y: auto;*/
    overflow: auto;
    height: calc(100vh - 209px);
    text-align: center;
    color: #000000;
}

.box_item_device{
    float: left;
    position: relative;
    padding: 10px;
    box-sizing: border-box;
    color: #000000;
    width: 100%;
}

.box_item_device img{
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 5px 5px 0 0;
}

.item_device{
    border-radius: 5px;
    box-shadow: 0 0 1px #9E9E9E;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.item_device:hover{
    box-shadow: 0 0 4px #9E9E9E;
}

.g_info{
    text-align: left;
    padding: 10px;
    height: 34px;
}

.g_info .name{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.load_more{
    padding: 7px 20px;
    margin: 10px;
    background: #00BCD4;
    outline: none;
    border: none;
    color: #ffffff;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 0 4px #9d9d9dc7;
}

.load_more:hover{
    background: #059fb3;
}

/*.box_item_device{*/
/*    display: none;*/
/*}*/

/*.box_item_device.display {*/
/*    display: inline-block;*/
/*}*/
.popup_detail{
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.popup_detail_content {
    position: absolute;
    background: #ffffff;
    z-index: 9;
    width: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #000000;
    border-radius: 5px;
}

.popup_detail_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}

.popup_detail_body {
    height: calc(100% - 55px);
}

.close-popup-detail{
    cursor: pointer;
}

.g_body_detail{
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    padding-top: 0;
}

.g_body_detail a{
    width: 30%;
    height: 250px;
}

.g_body_detail img{
    width: 100%;
    object-fit: contain;
    height: 100%;
}

.g_body_detail .body_right{
    /*width: 70%;*/
    font-size: 24px;
}

.body_right div span:first-child{
    font-weight: bold;
}

.g_filter{
    display: flex;
    justify-content: right;
    padding: 0 20px;
    gap: 15px;
    margin: 5px 0;
}

#filter_group, #filter_type, #filter_type_warehouse{
    padding: 5px;
    border: 1px solid #9e9e9e7d;
    border-radius: 5px;
    outline: none;
    min-width: 180px;
}

.filter_search, .filter_search_warehouse{
    display: flex;
    align-items: center;
    border-radius: 5px;
}

.filter_search input, .filter_search_warehouse input{
    outline: 0;
    padding: 8px 5px;
    border: 1px solid #9e9e9e80;
    border-radius: 5px 0 0 5px;
}

.filter_search span, .filter_search_warehouse span{
    padding: 7px 10px;
    background: #0079c1;
    border-radius: 0 5px 5px 0;
    border: 1px solid transparent;
}

.filter_search span i, .filter_search_warehouse span i{
    color: #ffffff;
}

.g_filter_type{
    display: flex;
    gap: 15px;
}

.g_title{
    display: flex;
    border: 1px solid #0079c1;
    cursor: pointer;
}

.g_title .title_1, .g_title .title_2{
    color: #0079c1;
    font-size: 20px;
    padding: 7px 10px;
}

.g_title .active, .g_title div:hover{
    background: #0079c1;
    color: #ffffff;
}

#view_warehouse{
    display: none;
    height: 100%;
}

.item_warehouse{
    border-radius: 5px;
    box-shadow: 0 0 3px #9E9E9E;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.item_warehouse:hover{
    box-shadow: 0 0 5px #9E9E9E;
    background: #0079c1cf;
    color: #ffffff;
}

.item_warehouse .name{
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.body_warehouse{
    height: calc(100% - 43px);
    overflow: auto;
    text-align: center;
}

.info_desc p, .info_desc ul{
    margin: 0;
}