/* Margins */
.no-margin {
    margin: 0!important;}
.mn {
    margin-right: 15px;
    margin-left: 15px;
}
.mrn {
    margin-right: 15px;
}
.mln {
    margin-left: 15px;
}
.mtn {
    margin-top: 15px;
}
.mbn {
    margin-bottom: 15px;
}
.mbn {
    margin-bottom: 15px;
}
.ml0 {
    margin-left: 0;
}
.mr0 {
    margin-right: 0;
}
.mt0 {
    margin-top: 0;
}
.mb0 {
    margin-bottom: 0;
}
.m30 {
    margin: 30px;
}
.mr30 {
    margin-right: 30px;
}
.mr45 {
    margin-right: 45px;
}
.ml30 {
    margin-left: 30px;
}
.mt30 {
    margin-top: 30px;
}
.mt200 {
    margin-top: 200px;
}
.mb30 {
    margin-bottom: 30px;
}
.m25 {
    margin: 25px;
}
.mr25 {
    margin-right: 25px;
}
.ml25 {
    margin-left: 25px;
}
.mt25 {
    margin-top: 25px;
}
.mb25 {
    margin-bottom: 25px;
}
.m20 {
    margin: 20px;
}
.mr20 {
    margin-right: 20px;
}
.ml20 {
    margin-left: 20px;
}
.mt20 {
    margin-top: 20px;
}
.mb20 {
    margin-bottom: 20px;
}
.m15 {
    margin: 15px;
}
.mr15 {
    margin-right: 15px;
}
.ml15 {
    margin-left: 15px;
}
.mt15 {
    margin-top: 15px;
}
.mb15 {
    margin-bottom: 15px;
}
.m10 {
    margin: 10px;
}
.mr10 {
    margin-right: 10px;
}
.ml10 {
    margin-left: 10px;
}
.mt10 {
    margin-top: 10px;
}
.mb10 {
    margin-bottom: 10px;
}
.m5 {
    margin: 5px;
}
.mr5 {
    margin-right: 5px;
}
.ml5 {
    margin-left: 5px;
}
.mt5 {
    margin-top: 5px;
}
.mb5 {
    margin-bottom: 5px;
}
.m2 {
    margin: 2px;
}
.mr2 {
    margin-right: 2px;
}
.ml2 {
    margin-left: 2px;
}
.mt2 {
    margin-top: 2px;
}
.mb2 {
    margin-bottom: 2px;
}
/* Padding */
.no-padding {
    padding: 0!important;
}
.pl0 {
    padding-left: 0;
}
.pr0 {
    padding-right: 0;
}
.pt0 {
    padding-top: 0!important;
}
.pb0 {
    padding-bottom: 0;
}
.p30 {
    padding: 30px;
}
.pr30 {
    padding-right: 30px;
}
.pl30 {
    padding-left: 30px;
}
.pt30 {
    padding-top: 30px;
}
.pb30 {
    padding-bottom: 30px;
}
.p25 {
    padding: 25px;
}
.pr25 {
    padding-right: 25px;
}
.pl25 {
    padding-left: 25px;
}
.pt25 {
    padding-top: 25px;
}
.pb25 {
    padding-bottom: 25px;
}
.p20 {
    padding: 20px;
}
.pr20 {
    padding-right: 20px;
}
.pl20 {
    padding-left: 20px;
}
.pt20 {
    padding-top: 20px;
}
.pb20 {
    padding-bottom: 20px;
}
.p15 {
    padding: 15px;
}
.pr15 {
    padding-right: 15px;
}
.pl15 {
    padding-left: 15px;
}
.pt15 {
    padding-top: 15px;
}
.pb15 {
    padding-bottom: 15px;
}
.p10 {
    padding: 10px;
}
.pr10 {
    padding-right: 10px;
}
.pl10 {
    padding-left: 10px;
}
.pt10 {
    padding-top: 10px;
}
.pb10 {
    padding-bottom: 10px;
}
.p5 {
    padding: 5px;
}
.pr5 {
    padding-right: 5px;
}
.pl5 {
    padding-left: 5px;
}
.pt5 {
    padding-top: 5px;
}
.pb5 {
    padding-bottom: 5px;
}
.p2 {
    padding: 2px;
}
.pr2 {
    padding-right: 2px;
}
.pl2 {
    padding-left: 2px;
}
.pt2 {
    padding-top: 2px;
}
.pb2 {
    padding-bottom: 2px;
}

/* The container */

.custom-checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.custom-checkbox:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox-primary input:checked ~ .checkmark {
    background-color: #007bff;
}
.checkbox-success input:checked ~ .checkmark {
    background-color: #28a745;
}
.checkbox-default input:checked ~ .checkmark {
    background-color: #6c757d;
}
.checkbox-danger input:checked ~ .checkmark {
    background-color: #dc3545;
}
.checkbox-warning input:checked ~ .checkmark {
    background-color: #ffc107;
}
.checkbox-info input:checked ~ .checkmark {
    background-color: #17a2b8;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.custom-checkbox .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.border-primary  {
    border: 1px solid #007bff;
}
.border-success  {
    border: 1px solid #28a745;
}
.border-default  {
    border: 1px solid #6c757d;
}
.border-danger {
    border: 1px solid #dc3545;
}
.border-warning {
    border: 1px solid #ffc107;
}
.border-info {
    border: 1px solid #17a2b8;
}
.border-success-2px  {
    border: 2px solid #28a745;
}

.modal-xlg{
    width:1100px;
}
.modal-xxlg{
    width:1300px;
}
.sortorder:after {
    content: '\25b2';  
}
.sortorder.reverse:after {
    content: '\25bc';  
}
.bold{
    font-weight: bold;
}
.placeholder{
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
    display:table;
}
.placeholder h1{
    display: table-cell;
    padding: 50px;
    width: 100%;
    height: 100%;
    margin: auto;
    border-radius: 3px;
    border: 1px dashed;
    color: #C1C1C1;
    vertical-align: middle;
}
.placeholder{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0px;
    display:table;
    h1{
        display: table-cell;
        padding: 50px;
        width: 100%;
        height: 100%;
        margin: auto;
        border-radius: 3px;
        border: 1px dashed;
        color: #C1C1C1;
        background-color: #FFFFFF;
        vertical-align: middle;
    }
}
@media print{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}
.table-tile{
    box-shadow:  8px 4px 4px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.28);
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 10px; 
    margin-top: 10px; 
    margin-right: 15px; 
    height: 130px;
}
.border-shadow{
    box-shadow:  8px 4px 4px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.28);
}
/*remove spin button from input number*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
.dropdown-menu {
    max-height: 300px;
    overflow: auto;
}





/*user_profile image*/


#profile-pic {
    /*    max-width: 120px;
        max-height: 120px;*/
    width: 110px;
    height: 110px;
    display: block;
    /*text-align: center;*/
}

#f-upload {
    display: none;
}

#circle {
    border-radius: 1000px !important;
    overflow: hidden;
    width: 120px;
    height: 120px;
    text-align: center;
    border: 6px solid #3c8dbc; 
    position: relative;
    right: -25%;
}

#p-image {
    /*position: absolute;*/
    /*  top: 109px;
      right: 76px;*/
    /*color: black;*/
    /*transition: all .3s cubic-bezier(.175, .885, .32, 1.275);*/
}

#p-image:hover {
    transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}

#upload-button {
    font-size: 1.2em;
    cursor: pointer;
    color: whitesmoke;
    position: absolute;
    bottom: 5px;
    left: 73px;
}

#upload-button:hover {
    transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
    color: #999;
}    



/*loader*/

#cover-spin {
    position:fixed;
    width:100%;
    left:0;right:0;top:0;bottom:0;
    background-color: rgba(255,255,255,0.7);
    z-index:9999;
    display:block;
}
#cover-spin-main {
    position:fixed;
    width:100%;
    left:0;right:0;top:0;bottom:0;
    background-color: rgba(255,255,255,1);
    z-index:9999;
    display:block;
}

@-webkit-keyframes spin {
    from {-webkit-transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

#cover-spin::after {
    content:'';
    display:block;
    position:absolute;
    left:48%;top:40%;
    width:40px;height:40px;
    border-style:solid;
    border-color:#3498db;
    border-top-color:transparent;
    border-width: 8px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}
#cover-spin-main::after {
    content:'';
    display:block;
    position:absolute;
    left:48%;top:40%;
    width:40px;height:40px;
    border-style:solid;
    border-color:#3498db;
    border-top-color:transparent;
    border-width: 8px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}
#dragDiv {
    position: absolute;
    z-index: 9;
    width: fit-content;
}

#dragDivHeader {
    cursor: move;
    z-index: 10;
}
.fa-bulb:before{
    content:"\f0eb"
}
.input-xxs {
    height: 20px;
    padding: 0px 2px;
    font-size: 11px;
    line-height: 1.5;
}
.input-xs {
    height: 25px;
    padding: 0px 3px;
    font-size: 12px;
    line-height: 1.5;
}
#height_tb tbody tr td {
    padding-top: 1px;
    padding-bottom: 1px;
}

#height_tb thead tr th {
    padding-top: 1px;
    padding-bottom: 1px;
}

.spinner-run {
    border: 5px solid #f3f3f3;
    border-radius: 50%;
    border-top: 5px solid blue;
    border-bottom: 5px solid blue;
    width: 20px;
    height: 20px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 1s linear infinite;
    margin-left:20px;
    cursor: pointer
}
.spinner {
    border: 5px solid #f3f3f3;
    border-radius: 50%;
    border-top: 5px solid blue;
    border-bottom: 5px solid blue;
    width: 20px;
    height: 20px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 0s linear infinite;
    margin-left:20px;
    cursor: pointer
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
#cover-spin::after {
    content:'';
    display:block;
    position:absolute;
    left:48%;top:40%;
    width:40px;height:40px;
    border-style:solid;
    border-color:#3498db;
    border-top-color:transparent;
    border-width: 8px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}
#cover-spin-main::after {
    content:'';
    display:block;
    position:absolute;
    left:48%;top:40%;
    width:40px;height:40px;
    border-style:solid;
    border-color:#3498db;
    border-top-color:transparent;
    border-width: 8px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}

.fa-bulb:before{
    content:"\f0eb"
}
.input-xxs {
    height: 20px;
    padding: 0px 2px;
    font-size: 11px;
    line-height: 1.5;
}
.input-xs {
    height: 25px;
    padding: 0px 3px;
    font-size: 12px;
    line-height: 1.5;
}
.txt-position {
    font-size: 11px;
    text-align: center;
}
.td-fill {
    padding-left: 0.2%;
    padding-right: 0.2%;
}
.new_table tbody tr td {
    padding: 3px;
}
.new_table thead tr th {
    text-align: center;
}

/*------------hide calendar icon----------------------*/

input[type="datetime-local"] {
    position: relative;
}

/* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
}
.border-top{
    border-top: 2px solid black;
}
.border-bottom{
    border-bottom: 2px solid black;
}
.border-left{
    border-bottom: 2px solid black;
}
.border-right{
    border-bottom: 2px solid black;
}
.border-bottom-two{
    border-bottom: 2px solid black !important;
    box-shadow:  0 2px 0 black;
}
.table-fixed{
    word-wrap: break-word; 
    table-layout: fixed;
}
.tableFixHead th {
    top: 0;
    position: sticky;
    /*background: #eee;*/
    background: #f8f8f8;
}
.row_color tr:hover td {
    background-color: #eee;
}
.table-bordered-all tbody tr td{
    border: 2px solid #999999;
}
.table-bordered-header-all thead tr th{
    border: 2px solid #999999;
}



/*switch*/

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    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: #E62305;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 0px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

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%;
}

/*custom date format*/
.format-date{
    position: relative;
    /*    width: 150px;
        height: 25px;*/
}

.format-date:before {
    position: absolute;
    /*top: 3px; left: 3px;*/
    content: attr(my-current-date);
    display: inline-block;
    color: black;
}

.format-date::-webkit-datetime-edit, .format-date::-webkit-inner-spin-button, .format-date::-webkit-clear-button {
    display: none;
}

.format-date::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 3px;
    right: 3px;
    color: black;
    opacity: 1;
}
.table-striped-dark tr:nth-child(odd){
    background-color: #848786;
}
.table-striped-light-dark tr:nth-child(odd){
    background-color: #adb1b0;
}

/*registration form styles*/

#reg_body {
    height: 120vh;
    background: #e1edf9;
}
#reg_wrapper {
    max-width: 450px;
    width: 100%;
    margin: 0 auto 0;
    padding: 10px;
}
#reg_container {
    background: #fff;
    padding: 30px;
    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    /*width: 100%;*/
}
#reg_heading {
    background: #015a80;
    margin: -30px;
    text-align: center;
    color: white;
    font-size: 19px;
    margin-bottom: 10px;
    padding: 10px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}