@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600');

span:hover,

input:hover,

button:hover,

select:hover {

    font-weight: bold;

}



a {

    text-decoration: none;

}



body {

    font-family: 'Open Sans', sans-serif;

    background-color: rgb(14, 13, 13);

    background-image: url(../img/smoke.png);

    background-size: cover;

    background-repeat: no-repeat;

    background-attachment: fixed;

    background-position: 0%;

    background-size: 102%;

    animation: smoke 12s ease infinite;

}



body::-webkit-scrollbar {

    display: none;

}



@keyframes smoke {

    0% {

        background-position: 0%;

    }

    50% {

        background-position: 2% 1%;

    }

    100% {

        background-position: 0%;

    }

}



select {

    width: 100%;

    font-weight: 300;

    border-radius: 4px;

    margin-top: 16px;

    background-image: -moz-linear-gradient( 172deg, beige 0%, beige 100%);

    background-image: -webkit-linear-gradient( 172deg, beige 0%, beige 100%);

    background-image: -ms-linear-gradient( 172deg, beige 0%, beige 100%);

    color: black;

    padding: 6px;

    border: none;

}



select option,

select optgroup {

    border-radius: 4px;

    appearance: none;

    -moz-appearance: none;

    -webkit-appearance: none;

    padding: 2px;

    background-color: beige;

    background-image: -moz-linear-gradient( 172deg, rgb(25, 39, 66) 0%, beige 100%);

    background-image: -webkit-linear-gradient( 172deg, rgb(25, 39, 66) 0%, beige 100%);

    background-image: -ms-linear-gradient( 172deg, rgb(25, 39, 66) 0%, beige 100%);

}



select option:first-child {

    border-top-left-radius: 0;

    border-top-right-radius: 0;

}



textarea:focus,

input[type="text"]:focus,

input[type="password"]:focus,

input[type="datetime"]:focus,

input[type="datetime-local"]:focus,

input[type="date"]:focus,

input[type="month"]:focus,

input[type="time"]:focus,

input[type="week"]:focus,

input[type="number"]:focus,

input[type="email"]:focus,

input[type="url"]:focus,

input[type="search"]:focus,

input[type="tel"]:focus,

input[type="color"]:focus,

.uneditable-input:focus,

select:focus {

    border: none;

    box-shadow: 0 1px 1px #d7ce87 inset, 0 0 8px #d7ce87;

    outline: 0 none;

}



.cloth {

    position: fixed;

    width: 200%;

    height: 200%;

    top: -10%;

    left: -10%;

    background-image: url(../img/playing-cards.png);

    background-size: cover;

    background-repeat: no-repeat;

    background-attachment: fixed;

    background-position: center;

    background-size: 100%;

    animation: playing 45s ease infinite;

    z-index: -1;

}



@keyframes playing {

    0% {

        background-size: 100%;

        transform: rotate(0deg);

    }

    50% {

        background-size: 120%;

        transform: rotate(5deg);

    }

    100% {

        background-size: 100%;

        transform: rotate(0deg);

    }

}



.logo {

    transition: all ease .2s;

    background: #1d1d1d4b;

    margin-top: 20px;

    border-radius: 8px;

    width: 100%;

    padding: 20px;

}



.logo img {

    display: block;

    width: 200px;

    margin: 0 auto;

}



.logo:hover {

    background: #1d1d1d;

}



.info-section {

    background: #eee6a6;

    padding: 20px;

    border-radius: 8px;

    border-bottom: 5px solid #a6a17a;

}



.info-section:hover {

    font-weight: bold;

}



.info-section .row {

    align-items: center;

}



.info-section span {

    color: #ffffff;

    display: inline-block;

    font-size: 30px;

    padding: 0 20px 10px;

    background: #d7ce87;

    border-radius: 4px;

    text-align: center;

}



.th-section {

    background: #71c088;

    padding: 20px;

    border-radius: 8px;

    border-bottom: 5px solid #4d805c;

}



.th-section span span {

    color: #cb5959;

    display: inline-block;

    transform: scale(1.7);

    padding: 0 10px;

    transition: all ease .1s;

}



.th-section:hover span {

    transform: rotate(10deg) scale(1.8);

}



.bg-beige {

    background: beige;

}



.query {

    background: #eee6a6;

    padding: 20px;

    border-radius: 8px;

    margin-right: 5px;

    width: auto;

    border-bottom: 5px solid #a6a17a;

}



.query span:first-child {

    font-weight: bold;

}



.request {

    background: #eee6a6;

    padding: 20px;

    border-radius: 8px;

    width: auto;

    border-bottom: 5px solid #a6a17a;

}



.request span:first-child {

    font-weight: bold;

}



.query button,

.request button {

    background-color: #d7ce87;

    border-color: #1d1d1d;

    color: #1d1d1d

}



.query button:hover,

.request button:hover,

.query button:focus,

.request button:focus,

.query button:active,

.request button:active {

    background-color: #4d805c;

    border: none;

    box-shadow: none !important;

    outline: 0;

}



.con-section {

    background: #eee6a6;

    padding: 20px;

    border-radius: 8px;

    border-bottom: 5px solid #a6a17a;

    margin-bottom: 20px;

    font-weight: bold;

    text-align: right;

}



.modal {

    background-color: #22222278;

}



.modal-content {

    background: #161515;

    color: white;

    padding: 10px;

    border-radius: 8px;

}



.modal-header {

    border: none;

    color: white

}



.modal-close {

    border: none;

    color: white;

    padding: 10px 20px;

    background-color: #110f0f;

    border-radius: 8px;

    cursor: pointer;

}



.modal-body {

    overflow-x: auto;

}



.modal-footer {

    border: none;

}



table {

    width: 100%;

}



table thead {

    text-align: center;

    background-color: #110f0f;

    border-radius: 8px;

}



table thead th {

    padding: 15px;

}



table thead th:first-child {

    border-top-left-radius: 8px;

    border-bottom-left-radius: 8px;

}



table thead th:last-child {

    border-top-right-radius: 8px;

    border-bottom-right-radius: 8px;

}



table td {

    padding: 10px;

    text-align: center;

}



tr {

    border-radius: 8px;

}



tr:nth-child(even) {

    background-color: #ffffff0a;

}



tr:hover {

    background-color: #bdbcbc0a;

}