/*
    In this file classes can be made to the different use cases like, background colors, text colors, etc.
    Meaning of this division, is to more easily change color later to larger groups as background, text, etc.
*/

@import "global-other-classes.css";
@import "global-color-variable.css";
@import "global-text-classes.css";

@media (max-width: 767px) {
  .main-box {
    display: flex !important;
    flex-direction: column !important;
  }

  .box {
    order: 2;
  }

  .box-margin {
    margin-top: 1rem;
  }
}

/*
Background color
  ____             _                                   _                _            
 | __ )  __ _  ___| | ____ _ _ __ ___  _   _ _ __   __| |      ___ ___ | | ___  _ __ 
 |  _ \ / _` |/ __| |/ / _` | '__/ _ \| | | | '_ \ / _` |     / __/ _ \| |/ _ \| '__|
 | |_) | (_| | (__|   < (_| | | | (_) | |_| | | | | (_| |    | (_| (_) | | (_) | |   
 |____/ \__,_|\___|_|\_\__, |_|  \___/ \__,_|_| |_|\__,_|     \___\___/|_|\___/|_|   
                       |___/                                                         
*/
/* Example on how to create the colors*/
.bg-primary-50 {
  color: var(--primary-50)
}

.bg-primary-100 {
  color: var(--primary-100)
}

.bg-primary-800{
  background-color: var(--primary-800);
}

.bg-gray-50{
  background-color: var(--grey-50);
}

.bg-gray-100{
  background-color: var(--grey-100);
}

.bg-gray-200 {
  background-color: var(--grey-200);
}

.bg-gray-300{
  background-color: var(--grey-300);
}

.bg-gray-400-main{
  background-color: var(--grey-400-main);
}

.bg-gray-500{
  background-color: var(--grey-500);
}

.bg-accent-50 {
  background-color: var(--accent-50);
}

.border-dark-300-main {
  border: 1px solid var(--dark-300-main);
}

.border-gray-500 {
  border: 1px solid var(--grey-500);
}


.hr-grey-600 {
  background-color: var(--grey-600);
}

.bg-error-600{
  background-color: var(--error-600);
}

.check-success-500-main {
  color: var(--success-500-main);
}

.text-dark-500 {
  color: var(--dark-500);
}

.text-black-100 {
  color: var(--black-100);
}

.text-grey-500 {
  color: var(--grey-500);
}

.text-primary-800 {
  color: var(--primary-800);
}


/* Custom css */

.custom-divider {
  position: relative;
  height: 1px;
}

.divider-label {
  position: absolute;
  left: 2.5%;
  top: -10px;
  background-color: white;
  padding: 0 5px;
}

.height-fit-content {
  height: fit-content;
}

.ghost {
  visibility: hidden;
}


/* Custom CSS for language dropdown in profile button */
@media all and (min-width: 992px) {
  .dropdown-menu li{ position: relative; 	}
  .nav-item .submenu{ 
      display: none;
      position: absolute;
      left:100%; top:-7px;
  }
  .nav-item .submenu-left{ 
      right:100%; left:auto;
  }
  .dropdown-menu > li:hover{ background-color: #f1f1f1 }
  .dropdown-menu > li:hover > .submenu{ display: block; }
}	

@media (max-width: 991px) {
.dropdown-menu .dropdown-menu{
    margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
}
}
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 17px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  background-color: var(--grey-500);
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 1px;
  background-color: var(--white-0);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--primary-600-main);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--primary-600-main);
}

input:checked + .slider:before {
  -webkit-transform: translateX(14px);
  -ms-transform: translateX(14px);
  transform: translateX(14px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.slider-adjustment {
  margin-right: 10px;
  margin-top: 6px;
}

.icon-hover-container {
  position: relative;
  display: inline-block;
}

.icon-hover-container .tooltip-text {
  visibility: hidden;
  width: 220px; /* Width of the textbox*/
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  top: 130%; 
  left: 50%;
  transform: translateX(-50%); 
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.icon-hover-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.icon-start-first-word {
  align-self: baseline;
}

.cursor-pointer {
	cursor: pointer
}

.table-cell-half-width {
    width: 50%;
}