/* for md Switch input*/
.custom-switch.custom-switch-md .custom-control-label {
    padding-right: 1rem;
    padding-bottom: 1.5rem;
}

.custom-switch.custom-switch-md .custom-control-label::before {
    height: 1.5rem;
    width: calc(2rem + 0.75rem);
    border-radius: 3rem;
}

.custom-switch.custom-switch-md .custom-control-label::after {
    width: calc(1.5rem - 4px);
    height: calc(1.5rem - 4px);
    border-radius: calc(2rem - (1.5rem / 2));
}

.custom-switch.custom-switch-md .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(1.5rem - 2.83rem));
}
/* Scrollbar */ 
body::-webkit-scrollbar { width: 7px; } 
body::-webkit-scrollbar-track { background-color: #f0f0f0; border-radius: 10px; }
body::-webkit-scrollbar-thumb { background-color: #0c7c69c4; border-radius: 10px; } 
body::-webkit-scrollbar-thumb:hover { background-color: #0c7c69e0; border-radius: 10px; } 
body::-webkit-scrollbar-thumb:active { background-color: #0c7c69; border-radius: 10px; } 

html,body{
    background-color: transparent;
    color: white;
}
.text-blue-grey{
    color: #546E7A;
    font-weight: 400;
    line-height: 1.2;
}
.text-green-light{
    color:#58d6b0ce;
}
.border-red-light{
    border-right: 5px solid #ff7d4d !important;
}
.text-red-light{
    color:#ff7d4dce;
}
.border-green-light{
    border-right: 5px solid #16d39a !important;
}
.text-transparent{
    color: #b4b4b457;
}
.status-green1{
    color: #00B5B8!important;
    border-bottom: 2px solid #00B5B8 !important;
}
.status-red{
    color: #FF7588!important;
    border-bottom: 2px solid #FF7588 !important;
}
.status-green2{
    color: #16D39A!important;
    border-bottom: 2px solid #16D39A !important;
}
.status-orang{
    color: #FFA87D!important;
    border-bottom: 2px solid #FFA87D !important;
}
.h7{
    font-size: 5.5rem;
}
.h8{
    font-size: 6rem;
}
.w-10 {
    width: 10%!important;
}
.w-15 {
    width: 15%!important;
}
.w-20 {
    width: 20%!important;
}
.w-30 {
    width: 30%!important;
}
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
  }
h1,h2,h3,h4,h5,h6,p,label{
    font-family: 'Markazi Text', serif;
}
.bg{
    background-image: url("../img/backgruond1.jpg");   
    height: 100%; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    z-index: 2;
}
.overly{
    /* لون خلفية تدرج رهيب
    background: linear-gradient(to left, #297fb970, rgba(46, 177, 136, 0.301)); */
    background: -moz-linear-gradient(45deg, rgba(27, 161, 98, 0.7), rgba(29, 210, 177, 0.7) 100%);
    background: -webkit-linear-gradient(45deg, rgba(27, 161, 67, 0.7), rgba(23, 161, 136, 0.7) 100%);
    background: -webkit-gradient(linear, 45deg, from(rgba(42, 27, 161, 0.7)), to(rgba(23, 163, 138, 0.7)));
    background: -o-linear-gradient(45deg, rgba(27, 161, 38, 0.7), rgba(29, 210, 177, 0.7) 100%);
    background: linear-gradient(to 45deg, rgba(27, 161, 87, 0.7), rgba(29, 210, 177, 0.7) 100%);
    color: white;
    position: fixed; /* Sit on top of the page content */
    display: block; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}
.overly2{
    background-color: rgba(171, 187, 187, 0.575);
    color: white;
    position: fixed; /* Sit on top of the page content */
    display: block; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}
.bg-container{
    border-radius: 9px;
    background-color: #f5f5f5;
}
.bg-CB{
    border-radius: 9px;
    background-color: #f5f5f56b;
}
header img{
    width: 130px;
    height: 130px;
}
header h2{
    text-shadow: 0 1.9px 0 #000;
}
header h5{
    color: #f1bf3e;
    text-shadow: 0 1.5px 0 rgb(99, 99, 99);
}
.navbar-brand img{
    height: 50px;
    width: 50px;
}
footer h5{
    text-shadow: 0 1px 0 #000;
}
footer h5 a{
    color: #f1bf3e;
}
footer h5 a:hover{
    color: #f1bf3e;
}
.col-md-1 h5{
    line-height: 1;
}

/*   Css implementation      */
.box_implementation{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    text-shadow: none;
    -webkit-font-smoothing: subpixel-antialiased;
    text-align: center;
    display: block;
    padding: 4px;
    line-height: 1.42857143;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: border .2s ease-in-out;
    box-sizing: border-box;
    background-color: #f2f2f2;
    color: #C1A73C;
    box-shadow: rgba(161, 161, 161, 0.35) 3px 3px 8px;
    min-height: 300px;
    margin: 15%;
    padding-top: 50px;
    cursor: pointer;
}
.box_implementation img{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   text-align: center;
   line-height: 1.42857143;
   color: rgb(102, 102, 102);
   cursor: pointer;
   text-shadow: none;
   -webkit-box-shadow: none;
   -webkit-font-smoothing: subpixel-antialiased;
   vertical-align: middle;
   margin: 0;
   padding: 0;
   border: 0;
   box-sizing: border-box;
   display: block;
   max-width: 100%;
   height: auto;
   margin-right: auto;
   margin-left: auto;
   width: 128px;
   }
   .box_implementation:hover{
       background-color: #157c6a;
       color: white;
   }
   fieldset 
{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    line-height: 1;
    text-shadow: none;
    -webkit-box-shadow: none;
    -webkit-font-smoothing: subpixel-antialiased;
    min-width: 0;
    margin: 0;
    padding: 10;
    border: 1px solid #007C5A;
    background-color: #f3f3f3;
    margin-bottom: 10px;
    box-sizing: border-box;
}	
.bg-header-implementation{
    background-color: #007C5A;
}
legend
{
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        text-shadow: none;
        -webkit-box-shadow: none;
        -webkit-font-smoothing: subpixel-antialiased;
        display: block;
        font-size: 21px;
        line-height: inherit;
        margin: 0;
        border: 0;
        background-color: #007C5A;
        color: #fff !important;
        width: auto;
        padding: 5px 20px;
        margin-right: 5px;
        border-radius: 0 !important;
        box-sizing: border-box;
}
.panel-implementation{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
line-height: 1;
text-shadow: none;
-webkit-box-shadow: none;
-webkit-font-smoothing: subpixel-antialiased;
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
background-color: #f3f3f3;
}