:root {
     --main-color: #214ea0;
}

body {
     font-family: 'Poppins', sans-serif;
     letter-spacing: .6px;
     margin: 0;
     padding: 0;
     background-image: linear-gradient(#214da057, #214da057),
          url(../images/background.jpg);
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: fixed;
}

.form header img {
     width: 50%;
}

.form header h6 {
     color: var(--main-color);
     margin-bottom: 20px;
     font-weight: bold;
}

.form {
     background-color: #eeeeeec4;
     width: 50%;
     margin: 20px auto;
     padding: 20px;
     border-radius: 10px;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     -ms-border-radius: 10px;
     -o-border-radius: 10px;
}

.form .control {
     width: 90%;
     margin: 20px auto;
}

.form label {
     display: block;
     color: var(--main-color);
     font-weight: bold;
}

.form .control>input {
     width: 100%;
     padding: 5px 10px;
     border: 1px solid #adadad;
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -ms-border-radius: 5px;
     -o-border-radius: 5px;
}

.next,
.prev,
.submit input {
     background-color: var(--main-color);
     color: #fff;
     padding: 15px 25px;
     border: none;
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -ms-border-radius: 5px;
     -o-border-radius: 5px;
}

/*.submit {
     position: absolute;
     padding: 15px 25px;
     top: -15px;
     right: 45px;
     width: 20%;
}*/

.next:hover,
.prev:hover,
.submit input:hover {
     background-color: #214da0ce;
}

.hide {
     opacity: 0;
     transition: opacity 0.3s ease;
     -webkit-transition: opacity 0.3s ease;
     -moz-transition: opacity 0.3s ease;
     -ms-transition: opacity 0.3s ease;
     -o-transition: opacity 0.3s ease;
     display: none;
}

.container-prev {
     display: none;
}

.email-error {
     position: fixed;
     left: 39%;
     top: 5%;
}

/*Step Two*/
/* HIDE RADIO */
.step-two input[type="radio"] {
     position: absolute;
     opacity: 0;
     width: 0;
     height: 0;
}

.step-two label {
     cursor: pointer;
}

/* IMAGE STYLES */
.step-two input[type="radio"]+img {
     cursor: pointer;
     width: 100px;
     height: 100px;
     object-fit: cover;
     margin-bottom: 10px;
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -ms-border-radius: 5px;
     -o-border-radius: 5px;
}

/* CHECKED STYLES */
.step-two input[type="radio"]:checked+img {
     outline: 2px solid var(--main-color);
     padding: 2px;
}

.step-two .row h3 {
     color: var(--main-color);
     text-align: center;
     font-weight: bold;
     margin-bottom: 40px;
}

.step-two .row .col-4 {
     margin-bottom: 45px;
}

input {
     outline: none;
}

/* Admin Page */
.admin {
     padding: 40px 0;
}

.admin h1 {
     font-weight: bold;
     color: var(--main-color);
     text-shadow: 1px 1px 6px #FFF;
}

.table-container,
.table {
     background-color: #eeeeeed2;
}

.table-container .trash a {
     background-color: #e91e1e;
     color: #fff;
     padding: 10px;
     line-height: 2.2;
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -ms-border-radius: 5px;
     -o-border-radius: 5px;
}

.table-container .trash a:hover {
     background-color: #e91e1eea;
}

thead tr th,
tbody th,
tbody td{
     border-right: 1px solid #000;
}

.filter {
     margin-bottom: 20px;
     text-align: end;
}

.filter .dropdown-menu ul {
     padding: 0;
}

.filter .dropdown-menu li {
     text-align: center;
     border-bottom: 1px solid #eee;
     margin: 5px 0;
}

.filter .dropdown-menu li:last-of-type {
     border: none;
}

.filter .dropdown-menu li a {
     text-decoration: none;
     color: var(--main-color);
}

.filter .dropdown-menu li:hover {
     background-color: #eee;
}

.filter .dropdown-menu li:hover a {
     color: #333;
}

.phone-container {
     position: relative;
}

.phone-container input {
     border: none;
     display: inline;
     background-color: #dbdddf;
     padding: 5px;
     border-radius: 5px;
}

.phone-container button {
     border: none;
     display: inline;
     position: absolute;
     right: 8px;
     padding: 5px 12px;
     border-radius: 5px;
     color: #499504;
     z-index: 9999;
}

.specialty a {
     display: block;
     text-align: center;
     padding: 5px 0;
     border: 1px solid #EEE;
     text-decoration: none;
     color: #214ea0;
}

.specialty a:hover {
     background-color: #EEE;
}

/* Control */
.control {
     margin-top: 50px;
}

.control .total-number .badge {
     background-color: var(--main-color);
     padding: 10px 20px;
     font-size: 18px;

}

/* Alert */
.alert-success {
     position: fixed;
     top: 40%;
     left: 35%;
     z-index: 999;
}
.alert-danger{
    position: fixed;
    top: 40%;
    left: 20%;
    width: 50%;
    text-align: center;
    z-index: 99999;
}

/* Pagination */
.pagination-data {
     margin: 10px auto;
     text-align: center;
}

.pagination-data a {
     text-decoration: none;
     margin: 10px 5px;
     padding: 10px 15px;
     color: #FFF;
     font-weight: bold;
     background-color: var(--main-color);
     line-height: 3.5;
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -ms-border-radius: 5px;
     -o-border-radius: 5px;
}

.disabled-grey {
     filter: grayscale(1);
     -webkit-filter: grayscale(1);
}

.current {
     background-color: #EEE !important;
     color: #333 !important;
}

/*=======================*/
/* PDF Page*/
.pdf {
     padding: 50px 0;
}

.custom-file-input {
     display: none;
}

.label-upload-pdf {
     padding: 7px 12px;
     background-color: var(--main-color);
     color: #FFF;
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -ms-border-radius: 5px;
     -o-border-radius: 5px;
     cursor: pointer;
     transition: .3s;
     -webkit-transition: .3s;
     -moz-transition: .3s;
     -ms-transition: .3s;
     -o-transition: .3s;
}

.label-upload-pdf:hover {
     background-color: #214da0da;
}
.specialty{
     padding: 5px;
     margin-bottom: 15px;
     border-radius: 5px;
}

.submit-upload {
     padding: 7px 10px;
     color: #FFF;
     background-color: #198754;
     border: none;
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -ms-border-radius: 5px;
     -o-border-radius: 5px;
}

.control-upload a {
     text-decoration: none;
     background-color: var(--main-color);
     color: #FFF;
     padding: 10px;
     margin: 5px;
     line-height: 2.5;
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -ms-border-radius: 5px;
     -o-border-radius: 5px;
     transition: .3s;
     -webkit-transition: .3s;
     -moz-transition: .3s;
     -ms-transition: .3s;
     -o-transition: .3s;
}

.control-upload a:last-of-type {
     background-color: #198754;
}

.control-upload a:hover {
     opacity: .8;
}

.send-certi {
     text-decoration: none;
     color: #FFF;
     font-weight: bold;
     background-color: var(--main-color);
     padding: 15px;
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -ms-border-radius: 5px;
     -o-border-radius: 5px;
}

.send-certi:hover {
     color: #EEE;
}

.disabled {
     pointer-events: none;
     background-color: #EEE;
}

/* Governorate */
.area-disabled{
    display: none;
}


/* Closed Message*/
.closed {
     position: fixed;
     width: 100%;
     height: 100%;
     top: 0;
     z-index: 9999999999;
     background-color: #eeeeeee1;
     color: var(--main-color);
     font-weight: bold;
     text-align: center;

}

.closed p {
     font-size: 25px;
     position: relative;
     top: 50%;
}

/* loading upload */
.hidden-loading{
     display: none;
}