/*@import url(/../fonts/AvenirLTStd-Roman.otf);*/
/*@import url(/../fonts/Avenir-Black.ttf);*/

@tailwind base;

/* Injects "container" class */
@tailwind components;

/* Injects many utilities */
@tailwind utilities;

/*
    According to TailwindCSS philosophy, we should mostly put in this file components and utilities that we reuse a lot.
    Otherwise we should be using predefined utility and component classes directly in the Haml files as to prevent the
    CSS from becoming too heavy or restraining. Read here : https://tailwindcss.com/docs/utility-first

    If we want to work in multiple CSS files, we need to use postcss-import plugin
    See https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles
*/

/*
    Define variables for general usage here (ex.: bg-accent-color will work)
    Don't forget to also declare them in tailwind.config.js
*/

/* Extend base with some stuff we want (<h> tags have no styling be default in TailwindCSS) */
@layer base {
    :root {
        --deep-blue-color: #2563EB;
        --light-blue-32-color: #eaf2fd;
        --light-blue-60-color: #d8e6fc;
        --light-blue-color: #bed5fa;
        --abyss-16-color: #d7dadf;
        --abyss-color: #051538;
        --grey-blue-24-color: #cdced1;
        --grey-blue-80-color: #595b65;
        --grey-blue-color: #2f323e;
        --light-grey-color: #f6f8fc;
        --purple-color: #694adc;
        --light-purple-color: #f0edfc;
        --orange-color: #dd7c1d;
        --light-orange-color: #fff4eb;
        --pink-red-color: #ee4e6b;
        --light-pink-red-color: #fdeaed;
        --green-color: #03aa4d;
        --light-green-color: #e6f6ed;
        --yellow-color: #fbde51;
        --plum-color: #d787d7;
        --light-plum-color: #f7eaf7;
        --cyan-color: #3edddd;
        --ocean-blue-color: #326FB7;
        --light-cyan-color: #d8fffe;
        --brown-yellow-color: #c9b003;
        --light-brown-yellow-color: #fff380;
        --silver-color: #aaaaaa;
        --light-silver-color: #ececec;
        --dark-blue-color: #051442;
        --navbar-h: 5rem;
        --navbar_border_h: 2px;
        --footer-h: 5rem;
    }

    body{
        @apply m-0 p-0 min-h-screen;
        -webkit-tap-highlight-color: transparent;
    }

    .h0 {
        @apply text-3xl font-avenir font-bold;
    }

    h1 {
        @apply text-3xl font-avenir text-abyss font-bold leading-tight md:text-5xl;
    }

    h2 {
        @apply text-xl font-avenir text-abyss font-normal;
    }

    h3 {
        @apply text-lg font-avenir text-abyss font-bold md:text-2xl;
    }

    h4 {
        @apply text-base font-avenir text-abyss font-bold md:text-xl;
    }

    h5 {
        @apply text-base font-avenir text-abyss font-bold md:text-lg;
    }

    body {
        @apply text-sm font-avenir md:text-base;
    }

    img {
        height: inherit;
    }

    .yield_contain{
        padding-top: var(--navbar-h);
        min-height: calc(100vh - var(--navbar-h));
    }
}

/* Add reusable components here (buttons, menus, forms, etc.) */
@layer components {

    .bg{
        @apply bg-[url(/assets/home-img-bg-ee8381de504a25b3a0ba053400adf5e8ae70344250ec4a02f63fe05ac6f9f55c.png)] bg-contain bg-center bg-no-repeat
    }
    .bg-opacity{
        background-color:rgba(256, 256, 256, .8);
    }

    /***********/
    /* Checkbox */
    /***********/
    input[type=checkbox].checkbox {
        @apply
          bg-white
          border-grey-blue-24
          border
          hover:bg-grey-blue-24
          hover:border-0
          accent-light-grey
          checked:border-0
          checked:bg-deep-blue
          text-deep-blue
          focus:ring-0;
    }


    /***********/
    /* Buttons */
    /***********/

    .btn {
        @apply font-avenir font-normal px-4 md:py-3 py-2 rounded cursor-pointer;
    }

    .btn:hover {
        @apply opacity-75 scale-110
    }

    .btn-primary {
        @apply bg-deep-blue text-white
    }

    .btn-danger {
        @apply bg-red-500 text-white;
    }

    .btn-delete {
        @apply bg-red-50 text-red-500 border border-red-500;
    }

    .btn-run {
        @apply bg-green-50 text-green-500 border border-green-500;
    }

    .btn:disabled{
        @apply bg-gray-400 text-white
    }

    .btn:disabled:hover{
        @apply opacity-100 scale-100
    }

    /***********/
    /*  Icon  */
    /**********/

    .icon{
        @apply text-grey-blue rounded-md p-2.5 flex justify-items-center items-center hover:bg-grey-blue-24
    }
    .selected-icon{
        @apply bg-white text-deep-blue
        /*@apply text-deep-blue rounded bg-white py-1 px-2*/
    }
    .selected-icon i{
        @apply inline-block mx-auto
    }

    .icon,.sorting{

    }


    /*****************/
    /* Dropdown btn */
    /****************/
    .dropdown-content {
        @apply hidden absolute bg-light-grey overflow-auto shadow-lg z-10
    }

    .dropdown-content a {
        @apply text-abyss px-4 py-3 block
    }

    .dropdown a:hover { @apply bg-grey-blue-24 }
    .dropdown-content.show{ @apply block }


    /**************/
    /* Separator */
    /*************/

    hr {
        @apply m-2
    }

    .separator {
        @apply block text-center overflow-hidden whitespace-nowrap text-gray-300 mt-2
    }

    .separator > span {
        @apply relative inline-block
    }

    .separator > span:before,
    .separator > span:after {
        content: "";
        position: absolute;
        top: 50%;
        width: 9999px;
        height: 1px;
    }

    .separator > span:before {
        @apply right-full mr-2 bg-gray-200
    }

    .separator > span:after {
        @apply left-full ml-2 bg-gray-200
    }

    .vertical-separator {
        @apply inline-block h-[250px] min-h-[1em] w-0.5 self-stretch bg-neutral-300 opacity-100 dark:opacity-50;
    }

    /**************/
    /* Navigation */
    /**************/

    .navbar-button.nav-back {
        @apply bg-orange-500 hover:bg-white hover:text-orange-500;
    }

    .table-container {
        @apply w-full overflow-y-visible
    }

    /********************************/
    /*  Header Nav Bar and Footer   */
    /********************************/

    .top-navbar, .footer {
        @apply w-full flex items-center px-2 md:px-8;
    }

    .top-navbar {
        @apply bg-white justify-between;
        border-bottom: var(--navbar_border_h) solid var(--light-silver-color);
        height: var(--navbar-h);
    }

    .footer {
        @apply bg-abyss flex-col md:flex-row;
    }
    .footer-height{
        height: var(--navbar-h);
    }

    .website_title_darkblue {
        @apply xs:text-xs xs:break-normal xs:mt-3 xs:ml-3 sm:text-sm sm:ml-2 sm:mt-3 md:text-lg md:mt-2 md:ml-2 font-extrabold tracking-tight;
        color: var(--dark-blue-color);
    }

    .website_title_white {
        @apply text-lg mt-2 ml-2 font-extrabold tracking-tight text-white;
    }

    /******************/
    /*  Side Nav Bar  */
    /******************/

    .side-navbar {
        @apply bg-main-color h-20 fixed bottom-0 z-20 w-full content-center md:h-auto md:w-1/6 md:z-0;
    }
    .side-navbar-container {
        @apply content-center text-left justify-between md:m-4 md:w-48;
    }
    .side-navbar-link-list {
        @apply flex flex-row pt-3 px-1 text-center md:flex-col md:py-0 md:px-2 md:text-left;
    }
    .side-navbar-link-container {
        @apply mr-3 flex-1;
    }
    .side-navbar-link {
        @apply block py-1 pl-1 text-white no-underline border-b-2 border-main-color md:py-3
        hover:border-accent-color;
    }
    .side-navbar-link-text {
        @apply pb-1 border-0 text-xs text-gray-200 block md:pb-0 md:text-base md:inline-block;
    }

    /****************/
    /* Search Panel */
    /****************/

    .input{
        @apply border-0 rounded-lg w-full bg-gray-100 h-12 md:h-16
    }

    .bottom-navbar{
        @apply bg-white fixed left-0 right-0 bottom-0 h-20 rounded-t-lg w-screen border-2 border-gray-200
    }

    .bottom-navbar-link-container{
        @apply text-silver font-light tracking-wider
    }

    .v-separator{
        @apply border border-gray-200 h-1/3 rounded-full
    }

    .mobile-search-panel {
        @apply fixed z-40 w-screen top-full border-2 border-gray-200 rounded-t-lg bg-white bottom-0 overflow-y-scroll h-full duration-1000 pb-16
    }

    .desktop-search-panel{
        @apply static overflow-hidden w-1/3 border-0

    }

    .search-panel-close-btn {
        @apply absolute top-4 right-4 z-30 md:invisible
    }

    /*********/
    /* Forms */
    /*********/

    .form-container {
        @apply flex justify-center h-full mx-auto;
    }
    .form-content {
        @apply mx-auto mb-2 pt-6 pb-2 px-6 text-left min-h-full rounded-lg z-10 md:border md:border-gray-300 md:shadow-sm md:px-8 md:bg-white ;
    }
    .form-header {
        @apply text-2xl font-bold text-center text-abyss;
    }
    .form-label {
        @apply block text-abyss tracking-wider py-1;
    }
    .form-input {
        @apply border-0 rounded-lg w-full bg-gray-100 h-12 my-2 md:h-14
    }
    .form-link {
        @apply text-blue-600 text-sm hover:font-semibold;
    }
    .form-checkbox {
        @apply bg-gray-50 border-gray-300 h-4 w-4 rounded;
    }
    .form-submit {
        @apply font-avenir font-normal px-4 md:py-3 py-2 rounded cursor-pointer bg-blue-500 text-white;
    }

    /*********/
    /* Pages */
    /*********/

    .page-title {
        @apply mt-0;
    }
    .page-title-container {
        @apply bg-gradient-to-r from-accent-color to-main-color p-4 shadow text-2xl text-white pl-2;
    }
    .page-title-text {
        @apply font-bold pl-2;
    }

    /*********/
    /* Cards */
    /*********/

    .projectCard{
        @apply py-4 px-4 m-2 rounded-lg shadow-md border border-gray-300 relative hover:shadow-xl hover:border-gray-400
    }
    .projectCard .project_identifier{
        @apply text-deep-blue font-semibold h-4
    }

    .projectCard .project_title{
        @apply text-abyss font-bold
    }

    .projectCard .project_short_resume{
        @apply text-grey-blue break-words font-light
    }

    .projectCard .card_bubbles_container{
        @apply flex flex-row flex-wrap relative z-20 cursor-help
    }

    .projectCard .card_bubbles_container .bubble{
        @apply m-1 py-1 px-2 rounded-full border-none inline-block whitespace-nowrap
    }

    .bubble.search-field{
        color: var(--purple-color);
        background-color: var(--light-purple-color);
    }
    .bubble.cancer-stage{
        color: var(--orange-color);
        background-color: var(--light-orange-color);
    }
    .bubble.biomarker{
        color: var(--plum-color);
        background-color: var(--light-plum-color);
    }
    .bubble.clt{
        color: var(--ocean-blue-color);
        background-color: var(--light-cyan-color);
    }
    .bubble.keyword{
        color: var(--silver-color);
        background-color: var(--light-silver-color);
    }

    /*.card {*/
    /*    @apply w-full p-6 md:w-1/2 xl:w-1/3;*/
    /*}*/
    /*.card-container {*/
    /*    @apply shadow-xl p-5;*/
    /*}*/
    /*.graph-card-title-container {*/
    /*    @apply bg-gray-200 uppercase text-gray-800 border-b-2 border-gray-300 p-2;*/
    /*}*/
    /*.graph-card-title {*/
    /*    @apply font-bold uppercase text-gray-600;*/
    /*}*/
    /*.metric-card-container {*/
    /*    @apply flex flex-row items-center;*/
    /*}*/
    /*.metric-card-logo-container {*/
    /*    @apply flex-shrink pr-4;*/
    /*}*/
    /*.metric-card-text-container {*/
    /*    @apply flex-1 text-right md:text-center;*/
    /*}*/
    /*.card_bubbles_container .bubbles {*/
    /*    @apply flex flex-row flex-wrap*/
    /*}*/
    /*.card_bubble{*/
    /*    @apply m-1 py-1 px-2 rounded-full bg-yellow-200 border-none inline-block whitespace-nowrap*/
    /*}*/

    /*****************/
    /* Project page */
    /***************/
    .projectPageContainer{
        @apply my-8 mx-auto space-y-6 max-w-screen-2xl;
    }
    .projectSectionContainer{
        @apply px-16;
    }
    .sudo_container{
        @apply border-2 border-pink-red;
    }
    .projectSectionContainer > .sudo_container {
        @apply w-full mb-4 p-4;
    }
    /* Project page summary section (top section) */
    .projectSectionContainer .headerContainer .projectIdentifier{
        @apply text-grey-blue-80 mb-4;
    }
    .projectSectionContainer .headerContainer .projectTitle{
        @apply text-abyss font-bold mb-4 text-3xl;
    }
    .projectSectionContainer .headerContainer .card_bubbles_container{
        @apply flex flex-row flex-wrap mt-4 text-grey-blue;
    }
    .projectSectionContainer .headerContainer .card_bubbles_container .bubble{
        @apply m-1 py-1 px-2 rounded-full border-none inline-block whitespace-nowrap;
    }
    .projectSectionContainer .projectDescriptionCardsContainer{
        @apply flex flex-row flex-wrap mt-6;
    }
    .projectDescriptionCardsContainer .projectDescriptionCard{
        @apply py-2 px-4 m-2 rounded-lg shadow-md border border-gray-300 relative hover:shadow-xl hover:border-gray-400;
    }
    /* Project page mid section contents */
    .projectSectionContainer .section-title{
        @apply pb-8 first-letter:capitalize;
    }
    .projectSectionContainer .subTitle{
        @apply mb-2 text-grey-blue break-words font-semibold text-sm tracking-widest;
    }
    .projectSectionContainer .section-content{
        @apply pb-8 pl-8 text-grey-blue;
    }
    .projectSectionContainer .section-content *{
        @apply px-0;
    }
    .projectSectionContainer .section-content li, .projectSectionContainer .section-content .subContent{
        @apply ml-2 mb-1 text-sm;
    }
    /* cohorte table (mid section content) */
    .project_cohorte_datatable th{
        @apply mb-2 text-grey-blue break-words font-semibold text-sm !important;
    }
    .project_cohorte_datatable td{
        @apply py-4 px-2 text-grey-blue !important;
    }
    .project-cohorte-card{
        @apply flex flex-row flex-wrap px-6 py-6 mb-2 rounded-lg shadow-md border border-gray-300 relative hover:shadow-xl hover:border-gray-400;
    }
    .project_cohorte_datatable{
        @apply table;
    }
    .project-cohorte-cards-container{
        @apply hidden !important;
    }
    .custom-separator-bottom-border{
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    }
    /* location center cards (mid section content)*/
    .projectSectionContainer .locationCard{
        @apply flex flex-row flex-wrap px-6 py-6 rounded-lg shadow-md border border-gray-300 relative hover:shadow-xl hover:border-gray-400;
    }
    /*project page footer section*/
    .projectSectionContainer .projectSharingContainer, .projectSectionContainer .relatedProjectContainer{
        @apply px-6 py-6 rounded-lg shadow-md border border-gray-300 relative hover:shadow-xl hover:border-gray-400;
    }
    .projectSharingContainer .sharingIcon{
        @apply border-none; color: #2563EB; background: #BED5FA; padding: 1rem; border-radius: 50%;
    }
    .projectSharingContainer .signin-btn, .projectSharingContainer .pdf-btn{
        @apply mx-4 px-10 py-4 align-middle text-white; border-radius: 4px; background: #2563EB;
    }
    .projectSharingContainer .pdf-btn{
        @apply mx-0 px-8 py-3; background: #2F323E;
    }
    /* Project page media queries */
    @media only screen and (max-width: 1024px){
        .projectPageContainer, .projectSectionContainer{
            @apply px-2;
        }
        .locationCard .project-site-component-center-location, .locationCard .project-site-component-center-recruitment-status, .locationCard .project-site-component-center-project-contact{
            @apply w-full mb-4;
        }
        .project-footer-section, .project-source-info, .projectSectionContainer .locationCard{
            @apply flex-col;
        }
        .project-source-info div{
            @apply mb-6;
        }
        .project-footer-section .projectSharingContainer, .project-footer-section .related-projects-container{
            @apply w-full ml-0 mt-2 pt-2;
        }
        .related-projects-container .related-project-title{
            @apply text-center;
        }
    }
    /*galaxy folds are 280px wide.....*/
    @media only screen and (max-width: 280px){

    }
    /*for cohorts table*/
    @media only screen and (max-width: 630px){
        .project_cohorte_datatable{
            @apply hidden;
        }
        .project-cohorte-cards-container{
            @apply flex !important;
        }
    }
    /*****************************/

    /*********/
    /* Toast */
    /*********/

    .toast {
        @apply fixed z-50 right-5 flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow
        dark:text-gray-400 dark:bg-gray-800;
    }
    .toast-text {
        @apply ml-3 text-sm font-normal;
    }
    .toast-button {
        @apply ml-auto bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300
        hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800
        dark:hover:bg-gray-700 -mx-1.5 -my-1.5 p-1.5;
    }

    /*************/
    /* datatable */
    /*************/
    .datatable-bubble{
        @apply m-1 py-1 px-2 rounded-full border-none inline-block whitespace-nowrap text-ellipsis max-w-inherit overflow-hidden;
    }


    /********/
    /* help */
    /********/
    .help-list{
        @apply list-none pl-4
    }

    .help-list-item{
        @apply pt-4
    }

    .help-box{
        @apply absolute rounded border-2 border-deep-blue z-20 hover:cursor-help opacity-0 hover:opacity-100;
        left: 50%;
        top: -5px;
        transform: translate(-50%, 0%);
        height: calc(100% + 10px);
        width: calc(100% + 10px);
    }
    .help-box-text{
        @apply absolute font-avenir text-deep-blue text-lg left-1/2 bg-white font-bold px-1;
        transform: translate(-50%, 0%);
        top: calc(100% + 15px);
        white-space: nowrap;
    }

    .help-box-search-home-page{
        top: -5rem;
        height: calc(100% + 5rem);
    }

    .help-info-container{
        @apply sticky bottom-0 w-full bg-light-grey z-30 border-t-4 border-abyss p-5
    }

    /*********/
    /* Modals */
    /*********/

    .participating-centers-list {
        height: 91%;
    }

    /***********/
    /* Banners */
    /***********/

    .warning-banner {
        @apply bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4 m-4;
    }

    /********/
    /* Tabs */
    /********/

    .tab-link.active {
        @apply text-blue-700 border-blue-300;
    }

    /*********/
    /* links */
    /*********/
    .link{
        @apply text-deep-blue hover:underline hover:cursor-pointer
    }
}

/* Add reusable utilities here (animations, pad/flex classes, shadows, scroll behaviors, etc) */
@layer utilities {

    .max-w-inherit{
        max-width: inherit;
    }
    /*************/
    /* Scrolling */
    /*************/

    .scroll-snap-none {
        scroll-snap-type: none;
    }
    .scroll-snap-x {
        scroll-snap-type: x;
    }
    .scroll-snap-y {
        scroll-snap-type: y;
    }

    /*********/
    /* Grid */
    /*********/

    .search-form-grid-template {
        grid-template-columns: 250px 1fr;
    }
}

/*TODO: should be moved somewhere else, should't be here*/
/*things related to the embedded frame*/
@media only screen and (max-width: 1280px){
    .content_container .embedded-frame-container{
        padding-left: 0;
    }
}
@media only screen and (max-width: 768px){
    .content_container .embedded-frame-container{
        width: 100%;
    }
    .content_container .frame-input-container {
        @apply flex flex-col;
    }
    #connect-geo-radius-container{
        @apply ml-0;
    }
    #connect-geo-radius-container #radius_selector{
        @apply pl-2;
    }
    .powered-by-container{
        @apply m-0 mb-4;
    }
    .powered-by-container .link-container{
        @apply w-auto text-center;
    }
}
/* line 1, app/assets/stylesheets/back_to_top_btn.css.scss */
#back_to_top_btn {
  display: inline-block;
  background-color: var(--secondary-color);
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 90px;
  right: 30px;
  transition: background-color .3s, opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 100;
}

/* line 17, app/assets/stylesheets/back_to_top_btn.css.scss */
#back_to_top_btn::after {
  font-weight: normal;
  font-style: normal;
  font-size: 3em !important;
  line-height: 50px;
  color: #fff;
}

/* line 25, app/assets/stylesheets/back_to_top_btn.css.scss */
#back_to_top_btn:hover {
  cursor: pointer;
  background-color: #333;
}

/* line 30, app/assets/stylesheets/back_to_top_btn.css.scss */
#back_to_top_btn:active {
  background-color: #555;
}

/* line 34, app/assets/stylesheets/back_to_top_btn.css.scss */
#back_to_top_btn.show {
  opacity: 1;
  visibility: visible;
}
/*this file is needed for the custom fonts in the embedded frames*/
@font-face {
    font-family: 'GeneralSans-Regular';
    src: url(/../fonts/GeneralSans-Regular.otf);
}

@font-face{
    font-family: 'avenir-black';
    src: url(/../fonts/Avenir-Black.ttf)
}

@font-face{
    font-family: 'avenir-roman';
    src: url(/../fonts/AvenirLTStd-Roman.otf);
}
/* line 1, app/assets/stylesheets/dashboard.css.scss */
.dashboard-split-container {
  display: flex;
  justify-content: space-evenly;
}

/* line 4, app/assets/stylesheets/dashboard.css.scss */
.dashboard-split-container * {
  font-family: Arial, Helvetica, sans-serif;
}

/* line 9, app/assets/stylesheets/dashboard.css.scss */
.dashboard-content-container {
  display: flex;
  flex-direction: column;
  background-color: #ced8d9;
  align-items: center;
  width: 98%;
  margin-top: 1em;
}

/* line 16, app/assets/stylesheets/dashboard.css.scss */
.dashboard-content-container .saved_searches, .dashboard-content-container .search_histories, .dashboard-content-container .saved_projects {
  background-color: #EFEFEF;
  margin: 2em;
  padding-bottom: 2em;
}

/* line 23, app/assets/stylesheets/dashboard.css.scss */
.dashboard-card-styled-component {
  border: 1px solid #E5E7EB;
  border-radius: 1rem;
  padding: .5em;
  margin-top: 1em;
}

/* line 30, app/assets/stylesheets/dashboard.css.scss */
.dashboard-card-data-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* line 34, app/assets/stylesheets/dashboard.css.scss */
.dashboard-card-data-row .justify-start {
  justify-content: flex-start;
}

/* line 39, app/assets/stylesheets/dashboard.css.scss */
.btn-container {
  padding-top: 10px;
}

@media screen and (max-width: 990px) {
  /* line 44, app/assets/stylesheets/dashboard.css.scss */
  .dashboard-split-container {
    flex-wrap: wrap;
  }
  /* line 46, app/assets/stylesheets/dashboard.css.scss */
  .dashboard-split-container .btn-container {
    width: 50%;
    flex-direction: column;
  }
  /* line 49, app/assets/stylesheets/dashboard.css.scss */
  .dashboard-split-container .btn-container * {
    margin-top: 1em;
  }
}
/* line 6, app/assets/stylesheets/datatables_customization.css.scss */
.dataTables_wrapper th, td {
  max-width: 200px;
}

/* line 11, app/assets/stylesheets/datatables_customization.css.scss */
.dataTables_wrapper table {
  width: 100% !important;
}

/* line 15, app/assets/stylesheets/datatables_customization.css.scss */
.dataTables_wrapper > table.nowrap > th, .dataTables_wrapper > table.nowrap td {
  white-space: normal;
  word-break: break-word;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* line 22, app/assets/stylesheets/datatables_customization.css.scss */
.dataTables_scrollBody {
  max-height: 37rem;
}

/* line 26, app/assets/stylesheets/datatables_customization.css.scss */
.dataTables_wrapper {
  width: 100%;
  margin: 0 auto;
}

/* line 31, app/assets/stylesheets/datatables_customization.css.scss */
.dataTables_scroll {
  margin-bottom: 20px;
}

/* line 35, app/assets/stylesheets/datatables_customization.css.scss */
.dataTables_wrapper .dataTables_info {
  clear: none !important;
}

/* line 39, app/assets/stylesheets/datatables_customization.css.scss */
.dataTables_wrapper .dataTables_length {
  margin-right: 10px;
  padding-top: 0.55em;
}

/* line 44, app/assets/stylesheets/datatables_customization.css.scss */
.dataTables_wrapper .dataTables_length select {
  cursor: pointer;
}

/* line 48, app/assets/stylesheets/datatables_customization.css.scss */
.dataTables_wrapper .dataTables_length select {
  background-color: white;
  background-position: right;
  padding-right: 20px;
  font-size: small;
  padding-top: 3px !important;
  padding-bottom: 2px !important;
}

/* line 57, app/assets/stylesheets/datatables_customization.css.scss */
.dataTables_filter {
  margin-bottom: 20px;
}

/* line 61, app/assets/stylesheets/datatables_customization.css.scss */
.dataTables_wrapper .dataTables_filter input {
  background-color: white;
}

/* line 66, app/assets/stylesheets/datatables_customization.css.scss */
.dt-buttons {
  margin-right: 20px;
  margin-bottom: 10px;
}

/* line 72, app/assets/stylesheets/datatables_customization.css.scss */
.dtsb-titleRow {
  margin-bottom: 20px !important;
  padding-right: 0 !important;
}

/* line 77, app/assets/stylesheets/datatables_customization.css.scss */
.dtsb-clearAll {
  margin-right: 3em;
}

/* line 83, app/assets/stylesheets/datatables_customization.css.scss */
.dtb-popover-close {
  width: 40px !important;
  height: 38px !important;
  top: 5px !important;
  right: 1px;
  padding-top: 5px !important;
  background: linear-gradient(to bottom, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
  border-radius: 2px !important;
}

/* line 94, app/assets/stylesheets/datatables_customization.css.scss */
.dtsb-dropDown {
  padding-right: 30px !important;
  background-color: white !important;
}

/* line 99, app/assets/stylesheets/datatables_customization.css.scss */
.dtsb-input {
  background-color: white !important;
  line-height: 1.5rem !important;
}

/* line 104, app/assets/stylesheets/datatables_customization.css.scss */
.dtb-collection-closeable {
  padding-left: 10px !important;
  padding-right: 10px !important;
  width: 60% !important;
  top: 32.9375px !important;
  left: 20% !important;
}

@media screen and (max-width: 1050px) {
  /* line 113, app/assets/stylesheets/datatables_customization.css.scss */
  .dtb-collection-closeable {
    width: 90% !important;
    top: 32.9375px !important;
    left: 5% !important;
  }
}

/* line 121, app/assets/stylesheets/datatables_customization.css.scss */
.dtsp-search {
  border: 1px solid gray !important;
  border-radius: 3px !important;
}

/* line 127, app/assets/stylesheets/datatables_customization.css.scss */
table.dataTable tbody td.select-checkbox:before, table.dataTable tbody td.select-checkbox:after,
table.dataTable tbody th.select-checkbox:before, table.dataTable tbody th.select-checkbox:after {
  top: 50%;
}

/* line 133, app/assets/stylesheets/datatables_customization.css.scss */
table.dataTable.stripe > tbody > tr.odd.selected > *, table.dataTable.display > tbody > tr.odd.selected > * {
  box-shadow: inset 0 0 0 9999px rgba(220, 101, 23, 0.6) !important;
}

/* line 137, app/assets/stylesheets/datatables_customization.css.scss */
table.dataTable.stripe > tbody > tr.even.selected > *, table.dataTable.display > tbody > tr.even.selected > * {
  box-shadow: inset 0 0 0 9999px rgba(220, 101, 23, 0.5) !important;
}

/* line 141, app/assets/stylesheets/datatables_customization.css.scss */
table.dataTable tbody td {
  cursor: default;
}

/* line 144, app/assets/stylesheets/datatables_customization.css.scss */
table.dataTable thead tr th {
  cursor: default;
}

/* line 147, app/assets/stylesheets/datatables_customization.css.scss */
table.dataTable thead tr th input {
  cursor: pointer;
}

/* line 150, app/assets/stylesheets/datatables_customization.css.scss */
table.dataTable tbody td input {
  cursor: pointer;
}

/* line 154, app/assets/stylesheets/datatables_customization.css.scss */
#projects_table_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {
  vertical-align: unset;
}

/* line 161, app/assets/stylesheets/datatables_customization.css.scss */
.datatable-container #projects_table_wrapper .dt-buttons .dt-button {
  display: none;
}

/* line 164, app/assets/stylesheets/datatables_customization.css.scss */
.datatable-container #projects_table_wrapper #projects_table_filter {
  display: none;
}

/* line 167, app/assets/stylesheets/datatables_customization.css.scss */
.datatable-container #projects_table_wrapper .projects_title_summary_brief_en, .datatable-container #projects_table_wrapper .projects_title_summary_brief_fr {
  min-width: 24em;
}

/* line 171, app/assets/stylesheets/datatables_customization.css.scss */
.datatable-container #projects_table_wrapper table tbody {
  vertical-align: unset;
}

/* line 175, app/assets/stylesheets/datatables_customization.css.scss */
.datatable-container #projects_table_wrapper table tbody tr.even-row {
  background-color: var(--light-grey-color);
}

/* line 179, app/assets/stylesheets/datatables_customization.css.scss */
.datatable-container #projects_table_wrapper table tbody tr td {
  vertical-align: auto !important;
}

/* line 183, app/assets/stylesheets/datatables_customization.css.scss */
.datatable-container #projects_table_wrapper table tbody tr td.dt-checkboxes-cell {
  vertical-align: middle;
}

/* line 190, app/assets/stylesheets/datatables_customization.css.scss */
.datatable-container #projects_table_wrapper .dataTables_paginate .paginate_button {
  border: none;
  border-radius: 10px;
  background: unset;
  background-color: var(--light-blue-32-color);
}

/* line 196, app/assets/stylesheets/datatables_customization.css.scss */
.datatable-container #projects_table_wrapper .dataTables_paginate .paginate_button.current {
  background-color: var(--light-blue-60-color);
  color: var(--deep-blue-color) !important;
}

/* line 201, app/assets/stylesheets/datatables_customization.css.scss */
.datatable-container #projects_table_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: var(--light-blue-color) !important;
}

/* line 204, app/assets/stylesheets/datatables_customization.css.scss */
.datatable-container #projects_table_wrapper .dataTables_paginate .paginate_button.disabled {
  cursor: not-allowed;
  background-color: var(--light-grey-color) !important;
}

/* line 208, app/assets/stylesheets/datatables_customization.css.scss */
.datatable-container #projects_table_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background-color: var(--light-grey-color) !important;
}

/* line 216, app/assets/stylesheets/datatables_customization.css.scss */
.new-project-icon-container {
  width: 100px;
  height: 100px;
  position: relative;
}

/* line 220, app/assets/stylesheets/datatables_customization.css.scss */
.new-project-icon-container .corner {
  width: 0;
  height: 0;
  border-top: 100px solid transparent;
  border-right: 100px solid #91d8a7;
}

/* line 226, app/assets/stylesheets/datatables_customization.css.scss */
.new-project-icon-container .corner span {
  position: absolute;
  bottom: 25px;
  width: 125px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: white;
  transform: rotate(-45deg);
  display: block;
}

/* line 239, app/assets/stylesheets/datatables_customization.css.scss */
.new-project-icon-container {
  width: 100px;
  height: 100px;
  position: relative;
}

/* line 243, app/assets/stylesheets/datatables_customization.css.scss */
.new-project-icon-container .corner {
  width: 0;
  height: 0;
  border-top: 100px solid transparent;
  border-right: 100px solid #91d8a7;
}

/* line 249, app/assets/stylesheets/datatables_customization.css.scss */
.new-project-icon-container .corner span {
  position: absolute;
  bottom: 25px;
  width: 125px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: white;
  transform: rotate(-45deg);
  display: block;
}

/* line 262, app/assets/stylesheets/datatables_customization.css.scss */
.updated-corner-icon {
  width: 60px;
  height: 60px;
  position: relative;
}

/* line 266, app/assets/stylesheets/datatables_customization.css.scss */
.updated-corner-icon .corner {
  width: 0;
  height: 0;
  border-top: 60px solid transparent;
}

/* line 271, app/assets/stylesheets/datatables_customization.css.scss */
.updated-corner-icon .new {
  border-right: 60px solid rgba(145, 216, 167, 0.7);
}

/* line 274, app/assets/stylesheets/datatables_customization.css.scss */
.updated-corner-icon .updated {
  border-right: 60px solid rgba(255, 242, 159, 0.7);
}

/* line 277, app/assets/stylesheets/datatables_customization.css.scss */
.updated-corner-icon .corner span {
  position: absolute;
  bottom: 50px;
  width: 80px;
  text-align: center;
  font-size: 9px;
  font-weight: bold;
  color: black;
  transform: rotate(-45deg);
  display: block;
}
/* line 1, app/assets/stylesheets/html_helper.scss */
.tooltip .tooltip-text {
  font-family: sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 100;
  line-height: 1.2em;
  visibility: hidden;
  min-width: 300px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 7px;
  border-radius: 6px;
  /* Position the tooltip text */
  position: absolute;
  z-index: 500;
  bottom: 120%;
  left: -240%;
  margin-left: -35px;
  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* line 27, app/assets/stylesheets/html_helper.scss */
.tooltip, .tooltip-click {
  display: inline-block;
}

/* line 31, app/assets/stylesheets/html_helper.scss */
.tooltip-click .tooltip-text {
  font-family: sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 100;
  line-height: 1.2em;
  visibility: hidden;
  min-width: 350px;
  background-color: #555;
  color: #fff;
  border-radius: 6px;
  padding: 2rem !important;
  /* Position the tooltip text */
  position: absolute;
  z-index: 10;
  bottom: 120%;
  left: -350%;
  margin-left: -35px;
  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* line 56, app/assets/stylesheets/html_helper.scss */
.tooltip-click .tooltip-text.show {
  visibility: visible;
  opacity: 1;
}

@media screen and (max-width: 800px) {
  /* line 62, app/assets/stylesheets/html_helper.scss */
  .tooltip-click {
    display: none !important;
  }
}

@media screen and (max-width: 450px) {
  /* line 68, app/assets/stylesheets/html_helper.scss */
  .tooltip .tooltip-text {
    min-width: 225px;
    left: -350%;
  }
}

/* Tooltip arrow */
/* line 75, app/assets/stylesheets/html_helper.scss */
.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 30%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

@media screen and (max-width: 450px) {
  /* line 87, app/assets/stylesheets/html_helper.scss */
  .tooltip .tooltip-text::after {
    left: 50%;
  }
}

/* Show the tooltip text when you mouse over the tooltip container */
/* line 93, app/assets/stylesheets/html_helper.scss */
.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}
/***********/
/* PROJECT */
/***********/
/*Text color*/
/* line 6, app/assets/stylesheets/project_view.css.scss */
.green {
  color: green;
}

/* line 7, app/assets/stylesheets/project_view.css.scss */
.orange {
  color: #D96418;
}

/* line 8, app/assets/stylesheets/project_view.css.scss */
.blue {
  color: #0000ff;
}

/* line 9, app/assets/stylesheets/project_view.css.scss */
.red {
  color: red;
}

/* line 10, app/assets/stylesheets/project_view.css.scss */
.pink-red {
  color: #ee4e6b;
}

/* line 12, app/assets/stylesheets/project_view.css.scss */
.project-container {
  padding: 0 4em;
}

@media screen and (max-width: 500px) {
  /* line 17, app/assets/stylesheets/project_view.css.scss */
  .project-container {
    padding: 1em;
  }
}

@media screen and (max-width: 900px) {
  /* line 23, app/assets/stylesheets/project_view.css.scss */
  .sharing-links-container {
    flex-wrap: wrap;
  }
  /* line 26, app/assets/stylesheets/project_view.css.scss */
  .sharing-container {
    flex-grow: 1;
  }
}

/* line 31, app/assets/stylesheets/project_view.css.scss */
.project-title {
  color: #D96418;
  grid-area: project-title;
}

/* line 35, app/assets/stylesheets/project_view.css.scss */
.project-title h1 {
  font-size: 1.8rem;
  line-height: 2.2rem;
}

/* line 40, app/assets/stylesheets/project_view.css.scss */
.keywords-container {
  grid-area: keywords-container;
}

/* line 42, app/assets/stylesheets/project_view.css.scss */
.keywords-container .keyword {
  color: #70758F;
  background-color: #D9D9D9;
  display: inline-block;
}

/* line 50, app/assets/stylesheets/project_view.css.scss */
.project-short-description {
  grid-area: project-short-description;
  font-size: 1.3rem;
}

/* line 55, app/assets/stylesheets/project_view.css.scss */
.project-action {
  grid-area: project-action;
  display: grid;
  justify-items: center;
  justify-self: right;
}

/* line 62, app/assets/stylesheets/project_view.css.scss */
.project-state {
  grid-area: project-state;
}

/* line 64, app/assets/stylesheets/project_view.css.scss */
.project-state ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* line 67, app/assets/stylesheets/project_view.css.scss */
.project-state ul i {
  color: #3c4451;
  display: block;
  text-align: center;
  font-size: 4em;
  line-height: 1.5em;
}

/* line 74, app/assets/stylesheets/project_view.css.scss */
.project-state ul h6 {
  text-align: center;
  font-weight: bold;
  font-size: 1.5em;
}

/* line 79, app/assets/stylesheets/project_view.css.scss */
.project-state ul p {
  display: block;
  text-align: center;
  font-size: 1em;
}

/* line 88, app/assets/stylesheets/project_view.css.scss */
.project-dates {
  grid-area: project-dates;
}

/* line 90, app/assets/stylesheets/project_view.css.scss */
.project-dates li {
  margin-right: 3em;
  display: inline-block;
}

/* line 96, app/assets/stylesheets/project_view.css.scss */
.section {
  padding: 0 4em;
  grid-area: section-description;
}

@media screen and (max-width: 500px) {
  /* line 102, app/assets/stylesheets/project_view.css.scss */
  .section {
    padding: 0 1em;
    grid-area: section-description;
  }
}

/* line 108, app/assets/stylesheets/project_view.css.scss */
.section .description {
  font-size: 1.2em;
  line-height: 1.7em;
}

/* line 113, app/assets/stylesheets/project_view.css.scss */
.sharing-container, .links-container {
  margin: 10px;
  background-color: #70758F;
  color: #FFFFFF;
  -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
  border-radius: 1em;
}

/* line 124, app/assets/stylesheets/project_view.css.scss */
.project_site_card {
  background: #70758F;
  width: 28em;
  min-height: 50em;
  text-align: center;
  padding: 2em;
  min-width: 250px;
  color: #FFFFFF;
  transition: inherit;
  -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
  border-radius: 1em;
}

/* line 137, app/assets/stylesheets/project_view.css.scss */
.project_site_card .status-overlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1em;
  background-color: #3c3c3d;
  opacity: .8;
  z-index: 10;
  backdrop-filter: blur(10px);
}

/* line 148, app/assets/stylesheets/project_view.css.scss */
.project_site_card .status-message {
  font-size: 2em;
  color: red;
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/***********/
/* Burger */
/***********/
/* line 163, app/assets/stylesheets/project_view.css.scss */
.project-burger-container {
  position: absolute;
  top: var(--navbar-h);
}

@media screen and (max-width: 767px) {
  /* line 169, app/assets/stylesheets/project_view.css.scss */
  .project-burger-container {
    top: var(--navbar-h-xs);
  }
}

/* line 174, app/assets/stylesheets/project_view.css.scss */
.project-burger-toggler {
  /* ALWAYS KEEPING THE TOGGLER OR THE CHECKBOX ON TOP OF EVERYTHING :  */
  z-index: 2;
  height: 50px !important;
  width: 50px !important;
  position: absolute;
  cursor: pointer;
  opacity: 0;
}

/* line 184, app/assets/stylesheets/project_view.css.scss */
.project-burger {
  position: absolute;
  height: 40px;
  width: 40px;
  padding: 0.6rem;
  margin: 0.5rem;
  /* FOR DISPLAYING EVERY ELEMENT IN THE CENTER : */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CREATING THE MIDDLE LINE OF THE HAMBURGER : */
/* line 198, app/assets/stylesheets/project_view.css.scss */
.project-burger > div {
  position: relative;
  top: 0;
  left: 0;
  background: black;
  height: 3px;
  width: 100%;
  transition: all  0.4s ease;
}

/* CREATING THE TOP AND BOTTOM LINES :
TOP AT -10PX ABOVE THE MIDDLE ONE AND BOTTOM ONE IS 10PX BELOW THE MIDDLE: */
/* line 210, app/assets/stylesheets/project_view.css.scss */
.project-burger > div::before,
.project-burger > div::after {
  content: '';
  position: absolute;
  top: -8px;
  background: black;
  width: 100%;
  height: 3px;
  transition: all  0.4s ease;
}

/* line 221, app/assets/stylesheets/project_view.css.scss */
.project-burger > div::after {
  top: 8px;
}

/* IF THE TOGGLER IS IN ITS CHECKED STATE, THEN SETTING THE BACKGROUND OF THE MIDDLE LAYER TO COMPLETE BLACK AND OPAQUE :  */
/* line 226, app/assets/stylesheets/project_view.css.scss */
.project-burger-toggler:checked + .project-burger > div {
  background: rgba(0, 0, 0, 0);
}

/* line 230, app/assets/stylesheets/project_view.css.scss */
.project-burger-toggler:checked + .project-burger > div::before {
  top: 0;
  transform: rotate(45deg);
  background: black;
}

/* AND ROTATING THE TOP AND BOTTOM LINES :  */
/* line 237, app/assets/stylesheets/project_view.css.scss */
.project-burger-toggler:checked + .project-burger > div::after {
  top: 0;
  transform: rotate(135deg);
  background: black;
}

/* MAIN MENU WITH THE WHITE BACKGROUND AND THE TEXT :  */
/* line 244, app/assets/stylesheets/project_view.css.scss */
.project-burger-menu {
  background: white;
  border-radius: 0px 30px 30px 0px;
  width: 0%;
  height: 100vh;
  /* APPLYING TRANSITION TO THE MENU :  */
  transition: all 0.4s ease;
}

/* IF THE TOGGLER IS CHECKED, THEN INCREASE THE WIDTH OF THE MENU TO 30% , CREATING A SMOOTH EFFECT :  */
/* line 255, app/assets/stylesheets/project_view.css.scss */
.project-burger-toggler:checked ~ .project-burger-menu {
  width: 100%;
}

/* STYLING THE LIST :  */
/* line 260, app/assets/stylesheets/project_view.css.scss */
.project-burger-menu > div > ul {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-top: 45px;
  padding-left: 10px;
  padding-right: 20px;
  /* HIDDEN INITIALLY  :  */
  visibility: hidden;
}

/* line 272, app/assets/stylesheets/project_view.css.scss */
.project-burger-menu > div > ul > li {
  list-style: none;
  padding: 0.5rem;
  white-space: nowrap;
}

/* WHEN THE TOGGLER IS CHECKED, CHANGE THE VISIBILITY TO VISIBLE :  */
/* line 279, app/assets/stylesheets/project_view.css.scss */
.project-burger-toggler:checked ~ .project-burger-menu > div > ul {
  transition: visibility 0.4s ease;
  transition-delay: 0.1s;
  visibility: visible;
}

/* line 285, app/assets/stylesheets/project_view.css.scss */
.project-burger-toggler:checked ~ .project-burger-menu > div > ul > li:hover {
  color: orange;
  cursor: pointer;
}

/* line 290, app/assets/stylesheets/project_view.css.scss */
.monitored-project, .project_monitoring_star:hover, .monitored-search, .monitored-search:hover {
  color: #cfcf00 !important;
}
/* line 1, app/assets/stylesheets/search_form.css.scss */
.slider-wrapper {
  margin: 1rem;
  position: relative;
  overflow: hidden;
}

/* line 7, app/assets/stylesheets/search_form.css.scss */
.slides-container {
  width: 100%;
  display: flex;
  overflow: scroll;
  scroll-behavior: smooth;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* line 17, app/assets/stylesheets/search_form.css.scss */
.slide-arrow {
  position: absolute;
  display: flex;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 4rem;
  background-color: white;
  border: none;
  width: 2rem;
  font-size: 3rem;
  padding: 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 100ms;
}

/* line 34, app/assets/stylesheets/search_form.css.scss */
.slide-arrow:hover,
.slide-arrow:focus {
  opacity: 1;
}

/* line 39, app/assets/stylesheets/search_form.css.scss */
.slides-container {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* WebKit */
/* line 45, app/assets/stylesheets/search_form.css.scss */
.slides-container::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* line 50, app/assets/stylesheets/search_form.css.scss */
.slide {
  position: absolute;
  width: 100%;
  top: 0;
  left: 100%;
}

/* line 55, app/assets/stylesheets/search_form.css.scss */
.slide.active {
  left: 0;
  transition: all 0.6s ease-out;
}

/* line 62, app/assets/stylesheets/search_form.css.scss */
.input-icon {
  float: right;
  margin-right: 20px;
  margin-top: -28px;
  position: relative;
  cursor: pointer;
}

/* line 71, app/assets/stylesheets/search_form.css.scss */
.select2.select2-container {
  width: 100% !important;
}

/* line 75, app/assets/stylesheets/search_form.css.scss */
.select2.select2-container .select2-selection {
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  height: 3.5rem;
  padding-top: .75rem;
  outline: none !important;
  transition: all .15s ease-in-out;
  background-color: #f3f4f6;
}

/* line 86, app/assets/stylesheets/search_form.css.scss */
.select2.select2-container .select2-selection .select2-selection__arrow {
  height: 3.5rem;
}
.spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
    100% {
        transform: rotate(360deg);
    }
}
/* line 3, app/assets/stylesheets/turbolinks.css.scss */
.turbolinks-progress-bar {
  background: var(--ocean-blue-color);
}
.datepicker {
  display: none;
  position: absolute;
  padding: 4px;
  margin-top: 1px;
  direction: ltr; }
  .datepicker.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    display: none;
    min-width: 160px;
    list-style: none;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    *border-right-width: 2px;
    *border-bottom-width: 2px;
    color: #333;
    font-size: 13px;
    line-height: 18px; }
    .datepicker.dropdown-menu th {
      padding: 4px 5px; }
    .datepicker.dropdown-menu td {
      padding: 4px 5px; }
  .datepicker table {
    border: 0;
    margin: 0;
    width: auto; }
    .datepicker table tr td span {
      display: block;
      width: 23%;
      height: 54px;
      line-height: 54px;
      float: left;
      margin: 1%;
      cursor: pointer; }
  .datepicker td {
    text-align: center;
    width: 20px;
    height: 20px;
    border: 0;
    font-size: 12px;
    padding: 4px 8px;
    background: #fff;
    cursor: pointer; }
    .datepicker td.active.day, .datepicker td.active.year {
      background: #2ba6cb; }
    .datepicker td.old, .datepicker td.new {
      color: #999; }
    .datepicker td span.active {
      background: #2ba6cb; }
    .datepicker td.day.disabled {
      color: #eee; }
    .datepicker td span.month.disabled, .datepicker td span.year.disabled {
      color: #eee; }
  .datepicker th {
    text-align: center;
    width: 20px;
    height: 20px;
    border: 0;
    font-size: 12px;
    padding: 4px 8px;
    background: #fff;
    cursor: pointer; }
    .datepicker th.active.day, .datepicker th.active.year {
      background: #2ba6cb; }
    .datepicker th.date-switch {
      width: 145px; }
    .datepicker th span.active {
      background: #2ba6cb; }
  .datepicker .cw {
    font-size: 10px;
    width: 12px;
    padding: 0 2px 0 5px;
    vertical-align: middle; }
  .datepicker.days div.datepicker-days {
    display: block; }
  .datepicker.months div.datepicker-months {
    display: block; }
  .datepicker.years div.datepicker-years {
    display: block; }
  .datepicker thead tr:first-child th {
    cursor: pointer; }
    .datepicker thead tr:first-child th.cw {
      cursor: default;
      background-color: transparent; }
  .datepicker tfoot tr:first-child th {
    cursor: pointer; }

.datepicker-inline {
  width: 220px; }

.datepicker-rtl {
  direction: rtl; }
  .datepicker-rtl table tr td span {
    float: right; }

.datepicker-dropdown {
  top: 0;
  left: 0; }
  .datepicker-dropdown:before {
    content: '';
    display: inline-block;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-bottom-color: 1px solid rgba(0, 0, 0, 0.2);
    position: absolute;
    top: -7px;
    left: 6px; }
  .datepicker-dropdown:after {
    content: '';
    display: inline-block;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    position: absolute;
    top: -6px;
    left: 7px; }

.datepicker > div,
.datepicker-dropdown::before,
.datepicker-dropdown::after {
  display: none; }

.datepicker-close {
  position: absolute;
  top: -30px;
  right: 0;
  width: 15px;
  height: 30px;
  padding: 0;
  display: none; }

.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
  background-color: transparent; }

/*# sourceMappingURL=foundation-datepicker.css.map */
.select2-container {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle; }
  .select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 28px;
    user-select: none;
    -webkit-user-select: none; }
    .select2-container .select2-selection--single .select2-selection__rendered {
      display: block;
      padding-left: 8px;
      padding-right: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
    .select2-container .select2-selection--single .select2-selection__clear {
      position: relative; }
  .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    padding-right: 8px;
    padding-left: 20px; }
  .select2-container .select2-selection--multiple {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    min-height: 32px;
    user-select: none;
    -webkit-user-select: none; }
    .select2-container .select2-selection--multiple .select2-selection__rendered {
      display: inline-block;
      overflow: hidden;
      padding-left: 8px;
      text-overflow: ellipsis;
      white-space: nowrap; }
  .select2-container .select2-search--inline {
    float: left; }
    .select2-container .select2-search--inline .select2-search__field {
      box-sizing: border-box;
      border: none;
      font-size: 100%;
      margin-top: 5px;
      padding: 0; }
      .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
        -webkit-appearance: none; }

.select2-dropdown {
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  box-sizing: border-box;
  display: block;
  position: absolute;
  left: -100000px;
  width: 100%;
  z-index: 1051; }

.select2-results {
  display: block; }

.select2-results__options {
  list-style: none;
  margin: 0;
  padding: 0; }

.select2-results__option {
  padding: 6px;
  user-select: none;
  -webkit-user-select: none; }
  .select2-results__option[aria-selected] {
    cursor: pointer; }

.select2-container--open .select2-dropdown {
  left: 0; }

.select2-container--open .select2-dropdown--above {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

.select2-container--open .select2-dropdown--below {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

.select2-search--dropdown {
  display: block;
  padding: 4px; }
  .select2-search--dropdown .select2-search__field {
    padding: 4px;
    width: 100%;
    box-sizing: border-box; }
    .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
      -webkit-appearance: none; }
  .select2-search--dropdown.select2-search--hide {
    display: none; }

.select2-close-mask {
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  min-height: 100%;
  min-width: 100%;
  height: auto;
  width: auto;
  opacity: 0;
  z-index: 99;
  background-color: #fff;
  filter: alpha(opacity=0); }

.select2-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important; }

.select2-container--default .select2-selection--single {
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: 4px; }
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 28px; }
  .select2-container--default .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold; }
  .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #999; }
  .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px; }
    .select2-container--default .select2-selection--single .select2-selection__arrow b {
      border-color: #888 transparent transparent transparent;
      border-style: solid;
      border-width: 5px 4px 0 4px;
      height: 0;
      left: 50%;
      margin-left: -4px;
      margin-top: -2px;
      position: absolute;
      top: 50%;
      width: 0; }

.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
  float: left; }

.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
  left: 1px;
  right: auto; }

.select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: #eee;
  cursor: default; }
  .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
    display: none; }

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #888 transparent;
  border-width: 0 4px 5px 4px; }

.select2-container--default .select2-selection--multiple {
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: text; }
  .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0 5px;
    width: 100%; }
    .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
      list-style: none; }
  .select2-container--default .select2-selection--multiple .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    margin-top: 5px;
    margin-right: 10px;
    padding: 1px; }
  .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #e4e4e4;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px; }
  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #999;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    margin-right: 2px; }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
      color: #333; }

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline {
  float: right; }

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
  margin-left: 5px;
  margin-right: auto; }

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
  margin-left: 2px;
  margin-right: auto; }

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border: solid black 1px;
  outline: 0; }

.select2-container--default.select2-container--disabled .select2-selection--multiple {
  background-color: #eee;
  cursor: default; }

.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
  display: none; }

.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #aaa; }

.select2-container--default .select2-search--inline .select2-search__field {
  background: transparent;
  border: none;
  outline: 0;
  box-shadow: none;
  -webkit-appearance: textfield; }

.select2-container--default .select2-results > .select2-results__options {
  max-height: 200px;
  overflow-y: auto; }

.select2-container--default .select2-results__option[role=group] {
  padding: 0; }

.select2-container--default .select2-results__option[aria-disabled=true] {
  color: #999; }

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #ddd; }

.select2-container--default .select2-results__option .select2-results__option {
  padding-left: 1em; }
  .select2-container--default .select2-results__option .select2-results__option .select2-results__group {
    padding-left: 0; }
  .select2-container--default .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -1em;
    padding-left: 2em; }
    .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
      margin-left: -2em;
      padding-left: 3em; }
      .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
        margin-left: -3em;
        padding-left: 4em; }
        .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
          margin-left: -4em;
          padding-left: 5em; }
          .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
            margin-left: -5em;
            padding-left: 6em; }

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #5897fb;
  color: white; }

.select2-container--default .select2-results__group {
  cursor: default;
  display: block;
  padding: 6px; }

.select2-container--classic .select2-selection--single {
  background-color: #f7f7f7;
  border: 1px solid #aaa;
  border-radius: 4px;
  outline: 0;
  background-image: -webkit-linear-gradient(top, white 50%, #eeeeee 100%);
  background-image: -o-linear-gradient(top, white 50%, #eeeeee 100%);
  background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }
  .select2-container--classic .select2-selection--single:focus {
    border: 1px solid #5897fb; }
  .select2-container--classic .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 28px; }
  .select2-container--classic .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    margin-right: 10px; }
  .select2-container--classic .select2-selection--single .select2-selection__placeholder {
    color: #999; }
  .select2-container--classic .select2-selection--single .select2-selection__arrow {
    background-color: #ddd;
    border: none;
    border-left: 1px solid #aaa;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    height: 26px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
    background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
    background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
    background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0); }
    .select2-container--classic .select2-selection--single .select2-selection__arrow b {
      border-color: #888 transparent transparent transparent;
      border-style: solid;
      border-width: 5px 4px 0 4px;
      height: 0;
      left: 50%;
      margin-left: -4px;
      margin-top: -2px;
      position: absolute;
      top: 50%;
      width: 0; }

.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {
  float: left; }

.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {
  border: none;
  border-right: 1px solid #aaa;
  border-radius: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  left: 1px;
  right: auto; }

.select2-container--classic.select2-container--open .select2-selection--single {
  border: 1px solid #5897fb; }
  .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
    background: transparent;
    border: none; }
    .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
      border-color: transparent transparent #888 transparent;
      border-width: 0 4px 5px 4px; }

.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background-image: -webkit-linear-gradient(top, white 0%, #eeeeee 50%);
  background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%);
  background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-image: -webkit-linear-gradient(top, #eeeeee 50%, white 100%);
  background-image: -o-linear-gradient(top, #eeeeee 50%, white 100%);
  background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0); }

.select2-container--classic .select2-selection--multiple {
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: text;
  outline: 0; }
  .select2-container--classic .select2-selection--multiple:focus {
    border: 1px solid #5897fb; }
  .select2-container--classic .select2-selection--multiple .select2-selection__rendered {
    list-style: none;
    margin: 0;
    padding: 0 5px; }
  .select2-container--classic .select2-selection--multiple .select2-selection__clear {
    display: none; }
  .select2-container--classic .select2-selection--multiple .select2-selection__choice {
    background-color: #e4e4e4;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px; }
  .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
    color: #888;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    margin-right: 2px; }
    .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
      color: #555; }

.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
  float: right;
  margin-left: 5px;
  margin-right: auto; }

.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
  margin-left: 2px;
  margin-right: auto; }

.select2-container--classic.select2-container--open .select2-selection--multiple {
  border: 1px solid #5897fb; }

.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

.select2-container--classic .select2-search--dropdown .select2-search__field {
  border: 1px solid #aaa;
  outline: 0; }

.select2-container--classic .select2-search--inline .select2-search__field {
  outline: 0;
  box-shadow: none; }

.select2-container--classic .select2-dropdown {
  background-color: white;
  border: 1px solid transparent; }

.select2-container--classic .select2-dropdown--above {
  border-bottom: none; }

.select2-container--classic .select2-dropdown--below {
  border-top: none; }

.select2-container--classic .select2-results > .select2-results__options {
  max-height: 200px;
  overflow-y: auto; }

.select2-container--classic .select2-results__option[role=group] {
  padding: 0; }

.select2-container--classic .select2-results__option[aria-disabled=true] {
  color: grey; }

.select2-container--classic .select2-results__option--highlighted[aria-selected] {
  background-color: #3875d7;
  color: white; }

.select2-container--classic .select2-results__group {
  cursor: default;
  display: block;
  padding: 6px; }

.select2-container--classic.select2-container--open .select2-dropdown {
  border-color: #5897fb; }
/*
 **** IMPORTANT ****
 * This file loads all of the applicative CSS code that we wrote. External dependencies such as css for jQuery modules
 * should be added to the external_dependencies.css file, not this one. This avoids frequently recompiling code
 * that usually doesn't change and those dependencies may not be made to work with 'use strict', so they may not work
 * at all.
 */