/* put your own styles to customize and override the theme */

body{
	font-family: Nunito, sans-serif;
}
.arabic{
	font-family: 'Tahoma';
}
.auth-header{
	background-color: #242335;
}
.app-header-dark{
	background-color: #242335;
}

.stacked-menu>.menu>.menu-item.has-active>.menu-link{
	color: #fff;
}
.stacked-menu .menu-item.has-active>.menu-link .menu-icon{
	color: #fff;
}

.menu-item.has-active{
	background-color: rgba(0,0,0,.1);
}
.stacked-menu .menu-item.has-active>.menu-link{
	color: #fff;
}

.input-group-sm>.custom-select, .input-group-sm>.form-control:not(textarea){
	height: calc(1.5em + .5rem + 1px);
}

.custom-select option{background-color: #2d2d3f;}

.row-index.playing td{
	/* background-color:#4c4b58; */
	background-color:#CD1518;
}

.logonew{display: block;width: 100%;} 
.logonew img{max-width:320px; height: auto;}

.btn-connect-vpn{margin-top: 6px;}

/* toggle switches with bootstrap default colors */
.custom-control-input-success:checked ~ .custom-control-label::before {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

.custom-control-input-danger:checked ~ .custom-control-label::before {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.custom-control-input-warning:checked ~ .custom-control-label::before {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
}

.custom-control-input-info:checked ~ .custom-control-label::before {
    background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
}

/* Large toggl switches */
.custom-switch-lg .custom-control-label::before {
    left: -2.25rem;
    width: 3rem;
    border-radius: 1.5rem;
}

.custom-switch-lg .custom-control-label::after {
    top: calc(.25rem + 3px);
    left: calc(-2.25rem + 4px);
    width: calc(1.5rem - 6px);
    height: calc(1.5rem - 6px);
    border-radius: 1.5rem;
}

.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(1.4rem);
}

.custom-switch-lg .custom-control-label::before {
    height: 1.5rem;
}

.custom-switch-lg .custom-control-label {
    padding-left: 1.5rem;
    line-height: 1.7rem;
}

hr.myhr{border-top: 6px solid #fdfdfd;}

/* input number hide up-down arrows */
/* Chrome, Safari, Edge, Opera */
input.hide-arrow::-webkit-outer-spin-button,
input.hide-arrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number].hide-arrow {
  -moz-appearance: textfield;
}

.dflex_box{display: flex;align-items: center;gap: 10px;}
.dflex_box strong{color: #FFF;}
.time_input{display: inline-block;width: 50px;background-color: transparent;border: 0;border-bottom: 2px solid #FFF;color: #FFF;font-size: 16px;text-align: center;}

.recordings_mob{display: none;}

/* css for checkbox */
.receivecheck{display: flex;align-items: center;justify-content: flex-start;gap: 30px;}
.receivecheck .receivebox{display: flex;align-items: center; gap: 10px;}
.receivecheck .receivebox input:focus{outline: none;box-shadow: none;border: 0;}





 
/* create by me -start CSS- */
@media only screen and (max-width: 1199px)  {
    .btn-connect-vpn{margin-top: 0;}
    /* start CSS - */
   .header-hidden{display: none;
   } 
    .column td:nth-of-type(1):before { content: "ID : "; }
	.column td:nth-of-type(2):before { content: "Name : "; }
	.column td:nth-of-type(3):before { content: "Group : "; }
	.column td:nth-of-type(4):before { content: "Model : "; }
	.column td:nth-of-type(5):before { content: "Serial : "; }
	.column td:nth-of-type(6):before { content: "Channels :  "; }
	.column td:nth-of-type(7):before { content: "Valid Until : "; }
	.column td:nth-of-type(8):before { content: "Status : "; }
	.column td:nth-of-type(9):before { content: "Actions : "; 
    } 
    .column {display: flex;flex-direction: column; border: 1px solid #668;margin: 10px;
    }
/* end CSS - */

/* start CSS_2- */
   .header-hidden_2{display: none;
   }
    .column_2 td:nth-of-type(1):before { content: "ID : "; }
	.column_2 td:nth-of-type(2):before { content: "Name : "; }
	.column_2 td:nth-of-type(3):before { content: "Username : "; }
	.column_2 td:nth-of-type(4):before { content: "Type : "; }
	.column_2 td:nth-of-type(5):before { content: "Approved : "; }
	.column_2 td:nth-of-type(6):before { content: "Status :  "; } 
	.column_2 td:nth-of-type(7):before { content: "Actions : "; }
	 
    .column_2 {display: flex;flex-direction: column; border: 1px solid #668;margin: 10px;
    }
/* end CSS_2- */

/* start CSS_3- */
   .header-hidden_3{display: none;
   }
    .column_3 td:nth-of-type(1):before { content: "User : "; }
	.column_3 td:nth-of-type(2):before { content: "Date/Time : "; }
	.column_3 td:nth-of-type(3):before { content: "Type : "; }
	.column_3 td:nth-of-type(4):before { content: "Details : "; }
	.column_3 td:nth-of-type(5):before { content: "IP Address : ";
    }  
    .column_3 {display: flex;flex-direction: column; border: 1px solid #668;margin: 10px;
    }
/* end CSS_3- */

/* start CSS_4- */
   .header-hidden_4{display: none;
    }
    .column_4 td:nth-of-type(1):before { content: "ID : "; }
	.column_4 td:nth-of-type(2):before { content: "Name : "; }
	.column_4 td:nth-of-type(3):before { content: "Actions : "; 
    }
    .column_4 {display: flex;flex-direction: column; border: 1px solid #668;margin: 10px;
    }
/* end CSS_4- */

/* start CSS_5- */
   .header-hidden_5{display: none;
   }
    .column_5 td:nth-of-type(1):before { content: "ID : "; }
	.column_5 td:nth-of-type(2):before { content: "Name : "; }
	.column_5 td:nth-of-type(3):before { content: "Channels : "; }
    .column_5 td:nth-of-type(4):before { content: "Actions : "; 
    } 
    .column_5 {display: flex;flex-direction: column; border: 1px solid #668;margin: 10px;
    }
/* @media only screen and (max-width: 768px){
    
    .submit-btn-by-me{
        margin-top: 15px;
    }
} */
/* end CSS_5- */

/* start CSS_6- */
   .header-hidden_6{display: none;
   }
    .column_6 td:nth-of-type(1):before { content: "Title : "; }
	.column_6 td:nth-of-type(2):before { content: "Retention Period (Day) : "; }
	.column_6 td:nth-of-type(3):before { content: "Favorite Storage : "; }
    .column_6 td:nth-of-type(4):before { content: "Group : "; }
    .column_6 td:nth-of-type(5):before { content: "Action : "; 
    } 
    .column_6 {display: flex;flex-direction: column; border: 1px solid #668;margin: 10px;
    }
/* end CSS_6- */

/* start CSS_7 */
    .header-hidden_7{display: none;
   }
    .column_7 {display: flex;flex-direction: column; border: 1px solid #668;margin: 10px;
    }
/* end CSS_7 */     

/* start CSS_8- */
   .header-hidden_8 {display: none;
   }
    .column_8 td:nth-of-type(1):before { content: "Device : "; }
	.column_8 td:nth-of-type(2):before { content: "Date/time : "; }
	.column_8 td:nth-of-type(3):before { content: "Filename : "; }
    .column_8 td:nth-of-type(4):before { content: "Remarks : "; }
    .column_8 td:nth-of-type(5):before { content: "Duration : "; 
    } 
    .column_8 {display: flex;flex-direction: column; border: 1px solid #668;margin: 10px;
    }
/* end CSS_8- */

/* start CSS_9_email-template*/
   .header-hidden_9 {display: none;
   }
    .column_9 td:nth-of-type(1):before { content: "ID : "; }
	.column_9 td:nth-of-type(2):before { content: "Name : "; }
	.column_9 td:nth-of-type(3):before { content: "Subject Line : "; }
    .column_9 td:nth-of-type(4):before { content: "Status : "; }
    .column_9 td:nth-of-type(5):before { content: "Action : "; 
    } 
    .column_9 {display: flex;flex-direction: column; border: 1px solid #668;margin: 10px;
    }
/* end CSS_9- */

/* start CSS_10- */
   .header-hidden_11 {display: none;
   }
    .column_11 td:nth-of-type(1):before { content: "Device : "; }
	.column_11 td:nth-of-type(2):before { content: "Date/Time : "; }
	.column_11 td:nth-of-type(3):before { content: "Remarks : "; }
    .column_11 td:nth-of-type(4):before { content: "Duration : "; }
    .column_11 td:nth-of-type(5):before { content: "Play : "; }
    .column_11 td:nth-of-type(6):before { content: "Actions : "; 
    } 
    .column_11 {display: flex;flex-direction: column; border: 1px solid #668;margin: 10px;
    }
/* end CSS_10- */

/* start CSS_12 for industries- */
   .header-hidden_12 {display: none;
   }
    .column_12 td:nth-of-type(1):before { content: "ID : "; }
	.column_12 td:nth-of-type(2):before { content: "Name : "; }
	.column_12 td:nth-of-type(3):before { content: "Actions : "; }
 
    .column_12 {display: flex;flex-direction: column; border: 1px solid #668;margin: 10px;
    }
/* end CSS_12- */

/* start CSS_13 for cron-logs */
   .header-hidden_13 {display: none;
   }
    .column_13 td:nth-of-type(1):before { content: "Datetime : "; }
	.column_13 td:nth-of-type(2):before { content: "Type : "; }
    .column_13 td:nth-of-type(3):before { content: "Title : "; }
	.column_13 td:nth-of-type(4):before { content: "Detail : "; }
    .column_13 td:nth-of-type(5):before { content: "Status : "; }
 
    .column_13 {display: flex;flex-direction: column; border: 1px solid #668;margin: 10px;
    }
/* end CSS_13- */

}    
.flex_box_head{display: flex;align-items: center;}
/* create by me -end CSS- */



@media only screen and (max-width: 991px)  {
    /* .BarTable .theader{display: none;} */
    .my_table tr {display: flex;flex-wrap: wrap;align-items: flex-start;margin-bottom: 20px;padding: 10px;border: 2px solid #204260;
    }
    .my_table tr:last-child {margin-bottom: 0;
    }
    .my_table tr td {display: flex;align-items: center;align-self: normal;justify-content: flex-start;width: 100%;margin-bottom: 10px;border-bottom: 1px solid #999;
    }
    .my_table tr td:last-child:last-child {margin-bottom: 0;
    }
    .my_table tr td p.title {font-size: 14px;font-weight: 900;line-height: 1;padding-right: 10px;margin-bottom: 0;
    }   

    .sub-btn-mar-top{ margin-top: 15px;
    }

/* play recording table css */
    .table_style tr {display: flex;flex-wrap: wrap;align-items: flex-start;margin-bottom: 20px;padding: 10px;border: 2px solid #204260;
    }
    .table_style tr:last-child {margin-bottom: 0;
    }
    .table_style tr td {display: flex;align-items: center;align-self: normal;justify-content: flex-start;width: 100%;margin-bottom: 10px;border-bottom: 1px solid #999;
    }
    .table_style tr td:last-child:last-child {margin-bottom: 0;
    }
    .table_style tr td p.title {font-size: 14px;font-weight: 900;line-height: 1;padding-right: 10px;margin-bottom: 0; width: 100px;
    }
    .table_style tbody tr td label {padding-top: 10px;
    }
    .table_style tbody tr td label strong {padding-right: 15px;
    }
    .table_style tbody tr td label br{display: none;
    }
    .btn-fav{margin: 0 4px;}

    /* new css */   
    .recordings{display: none;}
    .recordings_mob{display: block;}
    .sticky-box{position: sticky;z-index: 1024;top: 56px;background-color: #191927;padding-top: 10px;}
    .app-main{overflow: inherit !important;}
    .opener + .card-body.panel{display: none;}
    .table_style #recordings_mob .trmain {display: block;width: 100%;padding: 0 10px;border: 0px solid #204260;}
    .table_style #recordings_mob .trmain .box.active{background: #C42E2E;}
    .table_style #recordings_mob .trmain .box{display: flex;align-items: flex-start;justify-content: space-between;width: 100%;border: 1px solid #999;}
    .table_style #recordings_mob .trmain .box .box_s{width: 12%;}
    .table_style #recordings_mob .trmain .box .box_c{width: 76%;}
    .table_style #recordings_mob .trmain .box .box_e{display: flex;flex-direction: column;gap: 20px;width: auto;}
        
    .toggled-on .toggle-content {
        display: block;   
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #999;     
    }
    
    
    
    .toggled-on .fa-chevron-down {
        display: none; 
    }  
    
    .toggle-title .btn.text-white.btn-sm {
        position: absolute;
        right: -32px;
        top: -31px;
        font-size: 20px;
        padding: 0;
        outline: 0;
        box-shadow: inherit; 
    }
    
    .toggled-off .toggle-content {
        display: none; 
    }
    
    .toggled-off .fa-chevron-up {
        display: none; 
    }

}

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

    .sticky-box .card-body.panel{height: calc(100vh - 20vh);overflow-x: scroll;scrollbar-color: transparent transparent;scrollbar-width: thin;}
    .sticky-box .card-body.panel {-webkit-box-sizing: border-box;box-sizing: border-box;scroll-behavior: smooth;}
    .sticky-box .card-body.panel::-webkit-scrollbar {width: 0px;}
    .sticky-box .card-body.panel::-webkit-scrollbar-track {background-color: transparent;}
    .sticky-box .card-body.panel::-webkit-scrollbar-thumb {background: transparent;}    


}