/* GENERAL */

.section {
    width: 100%;
    height: 100vh;
}
.dseew {
    margin: 0 -15px;
}
.section__btn {
    background: linear-gradient(#f9d710 0%, #fcd45e 100%);
    border-radius: 16.37px;
    font-family: "Circular Std Book";
    font-weight: normal;
    text-align: center;
    width: 100%;
    color: #444545;
    border: none;
    height: 35px;
    padding: 12px;
}

.section__field {
    border-radius: 16.37px;
    background: #252525;
    font-family: "Circular Std Book";
    font-weight: normal;
    text-align: center;
    color: #fffffe;
    width: 100%;
    border: none;
    height: 35px;
}

.section__field::placeholder,
.section__field::-ms-input-placeholder,
.section__field::-ms-input-placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
    font-family: 'Circular Std Book', sans-serif !important;
}

.section__field:focus {
    background-color: #252525 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    -webkit-box-shadow: 0px 1px 13px 1px rgba(252, 212, 94, 0.9);
    box-shadow: 0px 1px 13px 1px rgba(252, 212, 94, 0.9) !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0px 1000px #252525 inset;
    transition: background-color 5000s ease-in-out 0s;
}
.book_styl:-webkit-autofill,
.book_styl:-webkit-autofill:hover, 
.book_styl:-webkit-autofill:focus {
    -webkit-text-fill-color: #474040 ;
    -webkit-box-shadow: 0 0 0px 1000px #eceff2 inset;
    transition: background-color 5000s ease-in-out 0s;
}
.back-icon {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 9999;
}

.section__header {
    font-weight: normal;
    text-align: center;
    color: #252525;
    font-family: 'Oswald', sans-serif;
}

.section__header-col,
.section__header {
    background: #f9d710;
}

p {
    font-family: "Circular Std Book";
    font-weight: normal;
    text-align: center;
}

.section__footer__img {
    width: 169px;
    height: 86px;
}

.section__footer {
    background: linear-gradient(#f9d710 0%, #fcd45e 100%);
}

.navbar-brand {
    font-weight: normal;
    text-align: center;
    color: #252525;
    font-family: 'Oswald', sans-serif;
    margin-right: 0rem;
}

.navbar {
    padding: 0px !important;
    display: inline;
    width: 100%;
}

.nav-link {
    color: #000000;
    text-decoration: none;
}

.navbar i {
    color: #ffffff !important;
}

.navbar button:active {
    border: none;
}

.token-form .form-control {
    border-radius: 0 !important;
}

.link-button {
    width: 51px;
    height: 52px;
}

.inline-para {
    display: inline;
}

.info-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.div-left {
    grid-area: 1 / 1 / 2 / 2;
}

.div-right {
    grid-area: 1 / 2 / 2 / 3;
}

.datepicker {
    background-color: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
}

.section__form {
    background: #3d3d3d;
}

.section__form_yellow {
    background: #f9d710;
}

.common-section__form-col {
    background: #eceff2;
    border-radius: 20px 20px 0 0;
}

h1 {
    font-family: 'Oswald', sans-serif;
    font-weight: normal;
    text-align: left;
    color: #252525;
}

.section__seperator-col {
    border-radius: 16px 16px 0 0;
}

.section__seperator {
    background: #f9d710;
}

.section__seperator-col {
    color: #FFFFFF;
    background: #3d3d3d;
    border-radius: 20px 20px 0 0;
}

table {
    background-color: transparent;
    overflow: scroll;
}

th {
    font-family: "Circular Std Book";
    font-weight: normal;
    text-align: center;
    color: #000;
}

td {
    font-family: "Circular Std Book";
    font-weight: normal;
    text-align: center;
    color: #474040;
}

tr {
    border-bottom: 1px solid #c1bebe;
}

.dropleft button {
    background: transparent !important;
    border: none;
    color: #000;
    padding: 0 !important;
}

.pending {
    color: #FF7F50;
}

.checked {
    color: #006400;
}


/* LOGIN PAGE  */

.login-section__form {
    border-bottom-right-radius: 10% !important;
    background-color: #ffffff;
    padding: 0 1rem;
}

.login-section__form form {
    z-index: 1;
}

.login-section {
    background: linear-gradient(#f9d710 0%, #fcd45e 100%);
}

.login-section__cement {
    position: absolute;
    bottom: 50px;
    z-index: 0;
}

.login-section__cement__img {
    width: 79px;
    height: 144px;
}

.forgot-pw__link {
    font-family: "Circular Std Book";
    font-weight: normal;
    text-align: center;
    color: #000000;
    text-decoration: underline;
}


/* REGISTER PAGE */

.feild-group {
    padding: 2rem;
}

.register-form {
    width: 600px;
}

.feild-group,
.input-group-text {
    background: #252525;
    border-radius: 16.37px;
    border: none;
    font-family: 'Circular Std Book', sans-serif !important;
}

.input-group-text {
    padding-bottom: 0 !important;
    color: #fffffe;
    opacity: 0.6;
}

.address-feild {
    border-bottom: 1px solid #fada14 !important;
    background: #252525;
    font-family: "Circular Std Book";
    font-weight: normal;
    text-align: center;
    color: #fffffe;
    width: 100%;
    border: none;
}

.address-feild:focus {
    background-color: #252525 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    -webkit-box-shadow: none !important;
    -webkit-box-shadow: 0px 13px 19px -13px rgba(252, 212, 94, 0.38) !important;
    box-shadow: 0px 13px 19px -13px rgba(252, 212, 94, 0.38) !important;
}

.feild-group .form-control {
    border-radius: 0 !important;
}


/* FORGOT PASSWORD */

.forgot-pw-section__form {
    background: #f9d710;
}

.forgot-pw-section__form-col div {
    width: 600px;
}

.forgot-pw-section__form-col {
    background: #ffffff;
    border-radius: 20px 20px 0 0;
}

.forgot-pw-section__icon {
    display: block !important;
}

.code__field {
    background: transparent;
    border: none;
}


/* TOKEN MANAGEMENT */

.management-section__form {
    background: #eceff2;
    border-radius: 20px 20px 10% 0;
}

.management-section {
    background: #f9d710;
}

.header-nav {
    position: absolute;
    top: 10px;
    right: 10px;
}

.navbar-toggler.toggler-example {
    cursor: pointer;
}


/* BOOK TOKEN */

.time-slot {
    background: #3d3d3d;
    border-radius: 20px;
    width: 80px;
    height: 80px;
    font-family: "Circular Std Book";
    font-weight: normal;
    text-align: center;
    color: #ffffff !important;
    font-family: "Circular Std Book";
    font-size: 18.8px;
    line-height: 16.56px;
}

.book-section__form {
    background: #3d3d3d;
}

.book-section__form .flex-container {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-align-content: center;
    align-content: center;
}

.book-section__form .flex-item {
    padding: 1rem 1rem;
    height: 18vh;
    position: relative;
}

.book-section__form .flex-item P {
    text-align: left;
    font-weight: 600;
    color: #f00;
}

.book-section__form .flex-item img {
    width: 22px;
    height: 22px;
}
a.btn_remove_user {
    position: absolute;
    top: 7px;
    left: 7px;
}
a.edit_token {
    position: absolute;
    top: 7px;
    left: 72px;
}



/* BOOK TOKEN INNER */

.parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 0px;
    grid-template-columns: 200px 400px;
    grid-template-rows: 80px 80px 80px 80px 150px 80px;
}

.div1 {
    grid-area: 1 / 1 / 2 / 2;
}

.div2 {
    grid-area: 1 / 2 / 2 / 3;
}

.div3 {
    grid-area: 2 / 1 / 3 / 2;
}

.div4 {
    grid-area: 2 / 2 / 3 / 3;
}

.div5 {
    grid-area: 3 / 1 / 4 / 2;
}

.div6 {
    grid-area: 3 / 2 / 4 / 3;
}

.div7 {
    grid-area: 4 / 1 / 5 / 2;
}

.div8 {
    grid-area: 4 / 2 / 5 / 3;
}

.div9 {
    grid-area: 5 / 1 / 6 / 2;
}

.div10 {
    grid-area: 5 / 2 / 6 / 3;
}

.div11 {
    grid-area: 6 / 1 / 7 / 2;
}

.div12 {
    grid-area: 6 / 2 / 7 / 3;
}
.div130 {
    grid-area: 7 / 1 / 8 / 2;
}

.div140 {
    grid-area: 7 / 2 / 8 / 3;
}
.div150 {
    grid-area: 8 / 2 / 8 / 3;
}

.parent i {
    background: #3d3d3d;
    padding: 20px;
    color: #f9d710;
    border-radius: 10px;
    width: 55px;
}

.book-token label {
    font-family: "Circular Std Book";
    font-weight: normal;
    text-align: center;
    color: #000;
    margin: 0 !important;
    padding: 0 !important;
}

.book-token input,
.book-token select {
    background-color: transparent;
    border: none;
    padding: 0 !important;
    height: 20px;
    border-bottom: 1px solid #dbdcde !important;
    color: #474040;
}

.book-token input:focus,
.book-token select:focus {
    background-color: transparent;
    color: #474040;
}

.book-token-feild:focus {
    opacity: 1 !important;
    -webkit-box-shadow: 0px 13px 19px -13px rgba(252, 212, 94, 0.38) !important;
    box-shadow: 0px 13px 19px -13px rgba(252, 212, 94, 0.38) !important;
}


/* TOKEN HISTORY */

.token-history {
    width: 600px;
}

.accordian {
    margin-top: 20px !important;
}

.accordian i {
    color: #ffffff !important;
}

.accordian button {
    color: #ffffff;
    text-decoration: none;
}

.accordian button:active {
    color: #ffffff !important;
    text-decoration: none !important;
}

.accordian button:visited {
    color: #ffffff !important;
    text-decoration: none !important;
}

.card {
    background: #3d3d3d;
    color: #ffffff;
}

.card {
    border-radius: 20px !important;
}

.card-header,
.collapse {
    background-color: transparent;
}


/* CHECK IN & CHECK OUT*/

.book-token,
.parent-grid,
.parent {
    width: 600px;
}

.parent-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(8, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 0px;
    grid-template-columns: 200px 400px;
    grid-template-rows: 150px 80px 80px 80px 80px 80px 80px 80px;
}

.div13 {
    grid-area: 1 / 1 / 2 / 2;
}

.div14 {
    grid-area: 1 / 2 / 2 / 3;
}

.div15 {
    grid-area: 2 / 1 / 3 / 2;
}

.div16 {
    grid-area: 2 / 2 / 3 / 3;
}

.div17 {
    grid-area: 3 / 1 / 4 / 2;
}

.div18 {
    grid-area: 3 / 2 / 4 / 3;
}

.div19 {
    grid-area: 4 / 1 / 5 / 2;
}

.div20 {
    grid-area: 4 / 2 / 5 / 3;
}

.div21 {
    grid-area: 5 / 1 / 6 / 2;
}

.div22 {
    grid-area: 5 / 2 / 6 / 3;
}

.div23 {
    grid-area: 6 / 1 / 7 / 2;
}

.div24 {
    grid-area: 6 / 2 / 7 / 3;
}

.div25 {
    grid-area: 7 / 1 / 8 / 2;
}

.div26 {
    grid-area: 7 / 2 / 8 / 3;
}

.div27 {
    grid-area: 8 / 1 / 9 / 2;
}

.div28 {
    grid-area: 8 / 2 / 9 / 3;
}

.parent-grid i {
    background: #3d3d3d;
    padding: 20px;
    color: #f9d710;
    border-radius: 10px;
    width: 55px;
}

select,
option {
    border: none !important;
    border-bottom: 1px solid #dbdcde !important;
    color: #474040;
}


/* REGIONAL MANAGER */

.parent-rm {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 30px;
}

.executive {
    grid-area: 1 / 1 / 2 / 2;
}

.token {
    grid-area: 1 / 2 / 2 / 3;
}

.order {
    grid-area: 2 / 1 / 3 / 2;
}

.client {
    grid-area: 2 / 2 / 3 / 3;
}

.manage-item {
    background: #3d3d3d;
    padding: 30px 20px;
    border-radius: 16px;
    font-family: "Circular Std Book";
    font-weight: normal;
    text-align: center;
    color: #eceff2;
}


/* EXECUTIVE OFFICER*/

.parent-eo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 30px;
}

.client-list {
    grid-area: 1 / 1 / 2 / 2;
}

.token-slot {
    grid-area: 2 / 1 / 3 / 2;
}

.order-list {
    grid-area: 3 / 1 / 4 / 2;
}

.manage-item-eo {
    background: #3d3d3d;
    border-radius: 50px;
    padding: 10px 50px;
    font-family: "Circular Std Book";
    font-weight: normal;
    text-align: center;
    color: #eceff2;
}
.pagination > li > active, .pagination > li > span { 
    background-color: #2E2EFE; 
    color:#FFFFFF;
}
.common-section__form-col,.common-section__form-col{
    min-height: calc(100vh - 227px);
}
/* MEDIA QUERIES */
/*.book-token-feild {
font-family: "Helvetica, Arial, sans-serif";
}*/
.error {
    color: red !important;
}
#add_token_book_register input.form-control {
    color: #000 !important;
    opacity: 1 !important;
}

select#payment_type {
    height: 40px;
    line-height: 40px;
}
.row.style_inp input {
    background: #fff;
    color: #495057;
}
.row.style_inp  button{
    background: #fff;
}
.newp span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #428bca;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}
.newp a {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -5px;
    line-height: 1.42857143;
    color: #428bca;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}
.box-footer.newp {
    margin-top: 30px;
}


.button_book {
    font-size: 18px !important;
    line-height: 16.59px;
    height: 30px !important;
}
.navbar-toggler {
    float: right;
    shape-outside: padding-box;
}
.button_height {
    height: 40px !important;
}
    #slot_id-error{
      text-align: center;
      margin-left: 20px;
    }

@media (max-width: 600px) {
    h1 {
        font-size: 28px;
        line-height: 32px;
    }
    .section__btn {
        padding: 12px;
    }
    .section__btn,
    .section__field {
        font-size: 11.46px;
        line-height: 13.75px;
        
    }
    .section__btn,
    .section__field_button {
        font-size: 16px;
        line-height: 13.75px;
    }
    .nav-link,
    .section__header {
        font-size: 16px;
        line-height: 13.75px;
    }
    #slot_id-error{
      text-align: center;
      margin-left: 20px;
    }

    p {
        font-size: 9.47px;
        line-height: 16.57px;
    }
    .section__seperator-col {
        font-size: 11.04px;
        line-height: 19.32px;
    }
    .forgot-pw__link {
        font-size: 12px;
        line-height: 15px;
    }
    .feild-group,
    .input-group-text,
    .address-feild {
        font-size: 9.17px;
        line-height: 16.05px;
    }
    .time-slot {
        font-size: 18.8px;
        line-height: 16.56px;
    }
    .book-section__form .flex-item P {
        font-size: 7px;
    }
    .book-section__form_new .flex-item P {
        font-size: 10px;
    }
    .book-token label {
        font-size: 12.8px;
        line-height: 17.14px;
    }
    .card {
        font-size: 7.11px;
        line-height: 9.48px;
    }
    .card-header button {
        font-size: 9.48px !important;
        line-height: 16.59px;
    }
    .forgot-pw-section__form-col div,
    .register-form,
    .token-history,
    .book-token,
    .parent-grid,
    .parent {
        width: 100%;
    }
    .parent-grid {
        grid-template-columns: 80px 200px;
        grid-template-rows: 100px 50px 50px 50px 50px 50px 50px 50px;
    }
    .parent {
        grid-template-columns: 80px 200px;
        grid-template-rows: 60px 60px 60px 50px 100px 70px;
    }
    .parent-grid i {
        padding: 10px;
        width: 35px;
    }
    .parent i {
        padding: 10px;
        width: 35px;
    }
    th {
        font-size: 9.8px;
        line-height: 17.14px;
    }
    td {
        font-size: 7.35px;
        line-height: 17.14px;
    }
    .time-slot {
        width: 50px;
        height: 50px;
    }
    .book-section__form .flex-item {
        padding: 1rem 1rem;
        height: 12vh;
    }
    .pagination > li > active, .pagination > li > span { 
        background-color: #2E2EFE; 
        color:#FFFFFF;
    }
    .navbar-toggler{
        cursor: pointer;
        font-size: 1.25rem;
    }
    .button_book {
        font-size: 18px !important;
        line-height: 16.59px;
        height: 30px !important;
        width: 260px;
        font-weight: bold;
    }
    .navbar-collapse {
        margin-top: 10px;
    }
    a.edit_token {
        position: absolute;
        top: 7px;
        left: 57px;
    }
    .button_height {
        height: 40px !important;
    }
}