:root{
    --orange : #FF6652;
    --green : #245D51;
    --green-heavy : #071310;
    --dark  : #212529;
    --dark-light : #2b3035;
    --light : rgb(224, 224, 224);
}

.link{
    text-decoration: none !important;
}
.link-outline{
    color: var(--light) !important;
    transition: all .5s;
}
.link-outline:hover{
    color: var(--orange) !important;
    transition: all .5s;
}

.link-green-outline{
    color: gray !important;
    transition: all .5s;
}
.link-green-outline:hover{
    color: green !important;
    transition: all .5s;
}

.input{
    outline: none !important;
}
.input:focus{
    outline:  var(--green-heavy) !important;
    border:  1px solid var(--orange) !important;
}

.max-h-180{
    max-height: 180px !important;
  }


.bold{
    font-weight: bold !important;
}
.font-xxs{
    font-size:xx-small !important;
}
.font-xs{
  font-size:x-small !important;
}
.font-sm{
  font-size: small !important;
}
.font-md{
  font-size: medium !important;
}
.font-lg{
  font-size: large !important;
}
.font-xl{
  font-size: x-large !important;
}
.font-xxl{
  font-size: xx-large !important;
}



.btn-green-dark{
    background-color: var(--green-heavy) !important;
    border: 1px solid var(--green-heavy) !important;
    color: var(--light) !important;
}
.btn-green{
    background-color: var(--green) !important;
    border: 1px solid var(--green) !important;
    color: var(--light) !important;
}
.btn-orange{
    background-color: var(--orange) !important;
    border: 1px solid var(--orange) !important;
    color: var(--light) !important;
}
.btn-light{
    background-color: var(--light) !important;
    border: 1px solid var(--light) !important;
    color: var(--green-heavy) !important;
}
.btn-orange-outline{
    background-color: transparent !important;
    border: 1px solid var(--orange) !important;
    color: var(--orange) !important;
    transition: all .5s !important;
}
.btn-orange-outline:hover{
    background-color: var(--orange) !important;
    border: 1px solid var(--orange) !important;
    color: var(--light) !important;
    transition: all .5s !important;
}
.btn-light-outline{
    background-color: transparent !important;
    border: 1px solid var(--light) !important;
    color: var(--light) !important;
    transition: all .5s !important;
}
.btn-light-outline:hover{
    background-color: var(--light) !important;
    border: 1px solid var(--light) !important;
    color: var(--green-heavy) !important;
    transition: all .5s !important;
}

.btn-greenD-outline{
    background-color: transparent !important;
    border: 1px solid var(--green-heavy) !important;
    color: var(--green-heavy) !important;
    transition: all .5s !important;
}
.btn-greenD-outline:hover{
    background-color: var(--green-heavy) !important;
    border: 1px solid var(--green-heavy) !important;
    color: var(--light) !important;
    transition: all .5s !important;
}
.btn-green-outline{
    background-color: transparent !important;
    border: 1px solid var(--green) !important;
    color: var(--green) !important;
    transition: all .5s !important;
}
.btn-green-outline:hover{
    background-color: var(--green) !important;
    border: 1px solid var(--green) !important;
    color: var(--light) !important;
    transition: all .5s !important;
}

.bg-white{
    background-color: white !important;
}
.bg-green{
    background-color: var(--green) !important;
}
.bg-orange{
    background-color: var(--orange) !important;
}
.bg-dark-light{
    background-color: var(--dark-light);
}
.bg-green-light{
    background-color: #e9fced;
}
.bg-green-dark{
    background-color: var(--green-heavy);
}
.bg-orange-light{
    background-color: #ffd7d2;
}
.bg-white{
    background-color: white !important;
}


.color-green{
    color: var(--green) !important;
}
.color-green-dark{
    color: var(--green-dark) !important;
}
.color-orange{
    color: var(--orange) !important;
}
.color-white{
    color: white !important;
}
.color-light{
    color: var(--light) !important;
}
.color-dark-light{
    color: var(--dark-light) !important;
}
.color-dark{
    color: var(--dark) !important;
}


.navBar-outline{
    background-color: var(--green-heavy);
    transition: all 1s;
}

/* ON THE TOP OF THE HOME PAGE */
.bg-img-1{
    background-image: url('../img/slide-2.png') !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    height: 100vh !important;
}
.bg-img-2{
    background-image: url('../img/slide-2.jpg') !important;;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 400px;
}

.over-layer{
    position: relative !important;
    top : 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 400px !important;
    background-color: rgba(250, 250, 250, 0.8) !important;
}

.setting-model, .setting-model-2{
    position: fixed !important;
    left: 30px !important;
    top: 12vh !important;
    width: 260px !important;
    padding: 0px !important;
    border-radius: 10px !important;
    background-color: white !important;
    z-index: 9000;
}

.setting-model-2{
  top : 54vh !important;
}

.doc-model{
    position: fixed !important;
    left: 0px !important;
    top: 0vh !important;
    padding: 0px !important;
    width: 100% !important;
    height: 100vh;
    z-index: 9000;
}

.loading-model{
    position: fixed !important;
    right: 10px !important;
    bottom: 10px !important;
    padding: 0px !important;
    width: 250px !important;
    z-index: 9000;
}

.line {
    flex: 1 !important;
    width: 100%;
    height: 1px !important;
    border: 1px solid rgb(221, 221, 221);
}


.transition-2{
    transition: all 1s !important;
}
.img-lg{
    display: none;
}
.icon-60 {
    width: 60px !important;
    height: 60px !important;
}
.border-orange{
    border: 1px solid var(--orange) !important;
}
.border-green{
    border: 1px solid var(--green) !important;
}
.border-none{
    border: none !important;
}
.cursor{
    cursor: pointer !important;
}
.video-frame{
    width: 100% !important;
    height: 200px !important;
}

.login-icon{
    width: 110px !important;
    height: 80px !important;
    border-radius: 10px !important;
    position: relative !important;
    right: 0px;
    margin-top: -50px !important;
}

.pos-picture{
    position: relative !important;
    top: -16vh;
    left: -70px;
}
.hidden{
    display: none !important;
}

.scroll, .scroll-xs, .scroll-md{
   scrollbar-width: 1px !important;
   height: 300px !important;
   overflow-y: auto;
   transition: all .5s;
}
.scroll-xs{
    height: 14vh !important;
}
.scroll-lg{
    scrollbar-width: 1px !important;
    height: 350px !important;
    overflow-y: auto;
    transition: all .5s;
 }
::-webkit-scrollbar {
    width: 2px;
  }
  .scroll-md{
    height: 20vh !important;
}
  /* ::-webkit-scrollbar-thumb {
    background: #888; 
  } */
  
  /* Handle on hover */
  /* ::-webkit-scrollbar-thumb:hover {
    background: var(--orange); 
    transition: all .5s;
  } */

.border-dashed{
    border:  2px dashed rgb(224, 224, 224) !important;
}
.min-h-100{
    height: 100vh !important;
}
.min-h-80{
    min-height: 80vh !important;
}
.h-20{
    height: 14vh !important;
}
.h-90{
    height: 90vh !important;
}

@media only screen and (max-width: 900px){
    
    .text-center-lg{
        text-align: center !important;
    }
    .img-lg{
        display: block;
    }
    .center-lg{
        align-self: center !important;
    }
    .flex-center-lg{
        justify-content: center !important;
    }
    .hide-lg{
        display: none !important;
    }
}

@media only screen and (max-width: 400px){
    

    .flex-column-sm{
        flex-direction: column !important;
    }
}

.list-container{
    border: 1px solid #ccc;
    padding: 0;
    list-style: none;
}

.list-item{
    padding: 8px;
    cursor: pointer;
    background-color: #f9f9f9;
    border-bottom: 1px solid #eee;
}


.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

.gap-x-4 {
  column-gap: 1.5rem; /* same as Bootstrap gap-4 */
}

.gap-y-2 {
  row-gap: 0.5rem; /* same as gap-2 */
}