src/StartPlatz/Bundle/StyleBundle/Resources/views/CSS/_sp-connect.version-2021-winter.html.twig line 1

Open in your IDE?
  1. <style type="text/css">
  2.     body {font-family: 'Source Sans Pro', sans-serif;}
  4.     .card-img-top {width: 100%; object-fit: cover;}
  5.     .card-img-max-height {max-height: 15vw;}
  6.     .breadcrumb a {color: black; }
  8.     {# STARTPLATZ specific colors - this is not complete - please add styles if necessary #}
  9.     .alert-success {color: #fff;background-color: #7AB800;border-color: #c3e6cb;}
  10.     .alert-success hr {border-top-color: #b1dfbb;}
  11.     .alert-success .alert-link {color: #0b2e13;}
  12.     .table-success {color:#fff;background-color:#7AB800;}
  13.     .table-danger {color:#fff;background-color:#8F2640;}
  14.     .list-group-item-success {color:#fff;background-color:#7AB800;}
  15.     a.list-group-item-success {color:#fff;}
  16.     .list-group-item-danger {color:#a94442;background-color:#8F2640;}
  17.     a.list-group-item-danger {color:#fff;}
  18.     .bg-success {color: #fff;background-color: #7AB800;}
  22.     {# additions from previous file _startplatz-green.bs4.html.twig #}
  23.     pre {background-color: rgba(0,0,0,.03);border: 1px solid rgba(0,0,0,.125);border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px);padding: .5rem;}
  24.     .export-table {max-height: 30rem;border: 1px solid grey;}
  25.     .export-table thead tr {background-color: white;position: sticky;top: 0;box-shadow: 0 2px 2px -1px grey;}
  26.     .export-table tbody td {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 350px;}
  27.     .table-row-link tr:hover{cursor: pointer;background-color: #525459 !important;color:white !important;}
  28.     .table-data-link td:hover{cursor: pointer;background-color: #ccc;}
  29.     .card .card-badge {position:absolute;top:-10px;left:+10px;padding:5px;background:#525459;color:white;}
  32.     {# filter - knowhow, team connect, Benefits, followUpOnEvents, mentorsconnect, myNetwork #}
  33.     .btnSecondary {background-color: #D9D4D4;color: black;transition: 0.7s ease-in-out;}
  34.     .btnSecondary:hover {background-color: #333333;color: white;}
  35.     .btnPrimary {background-color:#7AB800;color: white;transition: 0.7s ease-in-out;}
  36.     .btnPrimary:hover {background-color: rgba(122, 184, 0, 0.6);color: white;}
  37.     .FilterFont { font-weight: bolder;font-size:1.3rem;}
  38.     .inputSearch {border: 2px solid #7ab800;}
  39.     .disabledBtn { background-color: rgb(238, 237, 237); color: #c5c5c5;}
  40.     .disabledBtnActiveFilters {background-color:#7AB800;color: white; cursor: unset;pointer-events: all !important;}    .btnSelected {background-color: #7ab800;color: white;transition: 0.7s ease-in-out;}
  41.     .btnSelected:hover {background-color: rgba(122, 184, 0, 0.6);color: white;}
  42.     .btn-outline-connect {background-color: #FFFFFF; color: black; border: 1px solid #343a40;}
  43.     .btn-outline-connect:hover {background-color: rgba(122, 184, 0, 0.6);color: white; font-weight: bold}
  44.     .team-section{max-width:1600px;}
  46.     {# widget - team Connect#}
  47.     .cardWidthTeam {
  48.         width: 18rem;height: 26rem;border: 2px solid #7ab800;
  49.         box-shadow: 0 6px 10px rgba(0, 0, 0, 0.16), 0 0 6px rgba(0, 0, 0, 0.1);
  50.         transition: .4s transform cubic-bezier(.155,1.105,.295,1.12),.4s box-shadow,.4s
  51.         -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
  52.     }
  53.     .cardWidthTeam:hover {transform: scale(1.04);}
  54.     .TopimageholderTeam {text-align: center;width: 100%;height: 10rem;}
  55.     .TopimageholderTeam img {width: 100%;height: 100%;object-fit: contain;}
  56.     .TopimageholderTeam svg {width: 100%;height: 100%;object-fit: contain;}
  57.     .HrStyleTeam {width: 100%;height: 0.6rem;
  58.         background: linear-gradient(90deg,#7AB800 0%, #AACF61 60%, #ffffff 110%);
  59.     }
  60.     .SpanInfo {background-color: #d7d9d4;}
  61.     .SpanGreen {background-color: #AACF61;}
  62.     .contentholderTeam {height: 15rem; display:flex; flex-direction: column; width: 100%}
  63.     .contentholderTeam::-webkit-scrollbar {display: none; scrollbar-width: none;}
  64.     .InfoBoxTeam {width: 100%;}
  65.     .TextBoxTeam {display:flex; flex-direction: column; overflow: scroll; width: 100%;}
  66.     .TextBoxTeam::-webkit-scrollbar {display: none; scrollbar-width: none;}
  67.     .SvGtextColor {color: rgba(204, 204, 204, 1);}
  69.     {# Widget - Benefits, startup tools, startup Products #}
  70.     .cardStartupBenefit .HyperlinkStartupBenefit {
  71.         text-decoration: none;
  72.         color: black;
  73.         display: flex;
  74.         flex-direction: column;
  75.     }
  77.     .cardStartupBenefit {
  78.         border: 2px solid #7AB800;width: 18rem;height: 26rem;
  79.         box-shadow: 0 6px 10px rgba(0, 0, 0, 0.16), 0 0 6px rgba(0, 0, 0, 0.1);
  80.         transition: .4s transform cubic-bezier(.155,1.105,.295,1.12),.4s box-shadow,.4s
  81.         -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
  82.     }
  83.     .cardStartupBenefit:hover {
  84.         transform: scale(1.04);
  85.         box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  86.     }
  87.     .imagePlaceholderStartupBenefit {width: 100%;height: 9rem;}
  88.     .hrStartupBenefit {height: 0.6rem;background: linear-gradient(90deg, #7ab800 0%, #AACF61 70%, rgba(255,255,255,1) 100%);}
  89.     .cardBodyStartupBenefit {height: 13rem; display: flex; flex-direction: column; }
  90.     .cardBodyStartupBenefit .p_StartupBenefit {margin-bottom: 0.5rem;}
  91.     .cardFooterStartupBenefit {
  92.         background-color: #AACF61;
  93.         height: 2rem;
  94.         color: #ffffff;
  95.         margin-right: 6rem;
  96.         border-top-right-radius: 15px;
  97.         border-bottom-right-radius: 15px;
  98.     }
  99.     .imageStartupBenefit {width: 100%;height:100%;object-fit: contain;color: #d2d2d2;}
  101.     {# General Cards // included at SP-Connect: Startups, Partner, Products, Tools  #}
  103.     /*Card default*/
  104.     .card-general {
  105.         width: 18rem;height: 26rem;border: 2px solid #7ab800;
  106.         box-shadow: 0 6px 10px rgba(0, 0, 0, 0.16), 0 0 6px rgba(0, 0, 0, 0.1);
  107.         transition: .4s transform cubic-bezier(.155,1.105,.295,1.12),.4s box-shadow,.4s
  108.         -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
  109.     }
  110.     .card-general-hover:hover {transform: scale(1.04);}
  112.     /*Card Header with background color and centered title*/
  113.     .card-general-header {
  114.         display: flex;
  115.         align-items: center;
  116.         text-align: left;
  117.         justify-content: center;
  118.         width: 100%;
  119.         height: 8rem;
  120.         background:  #7ab800;
  121.     }
  123.     /*Card Header with image*/
  124.     .card-general-header-image{text-align: center;width: 100%;height: 10rem;}
  125.     .card-general-header-image img {width: 100%;height: 100%;object-fit: contain;}
  126.     .card-general-header-image svg {width: 100%;height: 100%;object-fit: contain;}
  128.     /*Card separator*/
  129.     .card-general-seperator {width: 100%;height: 0.6rem;
  130.         background: linear-gradient(90deg,#7AB800 0%, #AACF61 60%, #ffffff 110%);
  131.     }
  133.     /*Card body default*/
  134.     .card-general-body {height: 15rem; display:flex; flex-direction: column; width: 100%; overflow:hidden;}
  135.     .card-general-body::-webkit-scrollbar {display: none; scrollbar-width: none;}
  136.     .rounded-pill-green{background-color: #AACF61;}
  137.     .rounded-pill-grey{background-color: #d7d9d4;}
  140.     {# Generals Cards Ende #}
  144.     {# FollowUpOnEvents css  #}
  145.     .titleClassFollowUpOnEvents { color: #7ab800;}
  146.     .hoveringListFollowUpOnEvents {
  147.         transition: 0.3s ease-in;color: #000000;border-bottom: 3px  solid #7ab800;margin-bottom: 5px;
  148.     }
  149.     .hoveringListFollowUpOnEvents:hover { background-color: rgb(225, 224, 224);}
  150.     .heightOfDivFollowUpOnEvents { min-height: 32rem;}
  151.     .heightOfDivFollowUpOnEventsParticipants { height: 32rem;}
  152.     .headerBkgFollowUpOnEvents { background: linear-gradient(90deg, #7ab800 0%, #7ab800 55%, #FFFFFF 110%);}
  154.     {# Digitale Gruppensprechstunde, Feedback zu Deiner Startup Idee   css #}
  155.     .hrGruppensprechstunden, .hrfeedback { height: 0.3rem; background-color: #AACF61; margin-left: 10%; margin-right: 10%; }
  156.     .HeaderCardGruppensprechstunde { background-color: #7ab800ff;}
  157.     .cardRegisterGruppenSprechstunde { border: 3px solid #7ab800ff; border-radius: 5px; }
  159.     {# sp member calendar #}
  160.     .CalendarLayout { width: 100%; height: 100vh; }
  161.     .CalendarView { width: 100%; height: 100%; padding: 20px; border: 3px solid #7ab800ff; border-radius: 0.6rem; }
  164.     {# Online circle, speed networking #}
  165.     .CardBannerOnlineCircle, .CardBannerMember {
  166.         width: 98%;
  167.         height: 2rem;
  168.         background: linear-gradient(-90deg, #ffffff -10%,#AACF61 40%, #7AB800 70%);
  169.         border-radius:0.5rem;
  170.     }
  172.     {# slackWorkspace #}
  173.     .slackSVG { width: 100%; height: 100%; object-fit: contain; }
  174.     .btnSlack { border: 2px solid #7ab800ff }
  175.     .btnSlack:hover { background-color: #7ab800ff; border: 2px solid #ffffff ; }
  177.     {# SP-Discuss #}
  178.     .btnSpDiscuss img { width: 100%; height: 100%; }
  179.     .btnSpDiscuss { box-shadow: 8px 8px 8px rgba(137, 140, 145, 0.8); transition: 0.3s; }
  180.     .btnSpDiscuss:hover { transform: scale(1.01); }
  182.     {# Widget - memberCard #}
  183.     .cardWidthMemberCard {
  184.         width: 20rem;
  185.         height: 29rem;
  186.         font-family: 'Source Sans Pro', sans-serif;
  187.         box-shadow: 0 6px 10px rgba(0, 0, 0, 0.16), 0 0 6px rgba(0, 0, 0, 0.1);
  188.         transition: .4s transform cubic-bezier(.155,1.105,.295,1.12),.4s box-shadow,.4s
  189.         -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
  190.     }
  192.     .teamSection .cardWidthMemberCard {
  193.         height: 26rem;
  194.     }
  196.     .teamSection .cardWidthMemberCard { width: 16rem;}
  198.     @media (max-width: 1200px){
  199.         .squareResponsive{
  200.             width:280px;
  201.             height:280px;
  202.             background:white;
  203.         }
  204.     }
  206.     @media (min-width: 1200px){
  207.         .squareResponsive{
  208.             width:350px;
  209.             height:350px;
  210.             background:white;
  211.         }
  212.     }
  214.     .cardWidthMemberCard:hover {transform: scale(1.04);}
  215.     .MemberCardImageHolder {
  216.         position: relative;
  217.         text-align: center;
  218.         width: 100%;
  219.         height: 12rem;
  220.         background:  -moz-linear-gradient(-75deg, rgba(122,184,0,0.6) 50%, #7AB800 50%);
  221.         background:  -webkit-linear-gradient(-75deg, rgba(122, 184, 0, 0.6) 50%, #7AB800 50%);
  223.     }
  224.     .singleLineEllipsis {
  225.         overflow: hidden;
  226.         text-overflow: ellipsis;
  227.         white-space: nowrap;
  228.     }
  229.     .cardWidthMemberCard .card-title {
  230.         margin-left: 1rem;
  231.         margin-right: 1rem;
  232.     }
  233.     .CardImageTopMemberCard {
  234.         width:130px;
  235.         height: 130px;
  236.         border: 4px solid #f1f1f5;
  237.         box-shadow: 0 6px 10px rgba(0, 0, 0, 0.16), 0 0 6px rgba(0, 0, 0, 0.1);
  238.         position:relative;
  239.         color: rgb(231, 227, 227);
  240.         object-fit: cover;
  241.     }
  242.     .memberCardBodySection {
  243.         height: 16rem; width: 100%; border: 3px solid #7ab800; border-top: none;
  244.     }
  245.     .memberCardTeamSection {height: 2rem; width: 100%;}
  247.     .oneLineEllipsis {overflow: hidden;text-overflow: ellipsis;word-break:break-all;
  248.         display: -webkit-box;-webkit-line-clamp: 1;/* number of lines to show */line-clamp: 1;
  249.         -webkit-box-orient: vertical;}
  250.     .twoLineEllipsis {overflow: hidden;text-overflow: ellipsis;
  251.         display: -webkit-box;-webkit-line-clamp: 2;/* number of lines to show */line-clamp: 2;
  252.         -webkit-box-orient: vertical;}
  253.     .threeLineEllipsis {overflow: hidden;text-overflow: ellipsis;
  254.         display: -webkit-box;-webkit-line-clamp: 3;/* number of lines to show */line-clamp: 3;
  255.         -webkit-box-orient: vertical;}
  256.     .fourLineEllipsis {overflow: hidden;text-overflow: ellipsis;
  257.         display: -webkit-box;-webkit-line-clamp: 4;/* number of lines to show */line-clamp: 4;
  258.         -webkit-box-orient: vertical;}
  259.     .fiveLineEllipsis {overflow: hidden;text-overflow: ellipsis;
  260.         display: -webkit-box;-webkit-line-clamp: 5;/* number of lines to show */line-clamp: 5;
  261.         -webkit-box-orient: vertical;word-wrap:break-word;}
  262.     .xLineEllipsis {overflow: hidden;text-overflow: ellipsis;
  263.         display: -webkit-box;/* number of lines to show: line-clamp: 3;-webkit-line-clamp: 3; */
  264.         -webkit-box-orient: vertical;}
  265.     .membercardHowAmISection { width: 100%;max-height: 7rem;}
  266.     .membercardp_howami {width: 100%; max-height: 6rem;}
  267.     .membercardSkillSection {width: 100%;max-height: 7rem;}
  268.     .membercardp_skills {width: 100%;max-height: 6rem;}
  269.     .membercardFloatingIconsTop {position:absolute; top:10px; right:12px;}
  270.     .membercardspanWhoamiSkills {background-color: #7AB800;color: #383636;}
  271.     .spanTeamLocation {background-color: #d5d3d3;}
  272.     .fabs {color:white;}
  273.     .fabs:hover {color: blue;}
  274.     .memberCardimgSvgBkgColor {background-color: #c7c6c6; color: #e0e0e0;}
  275.     @media (min-width: 1200px) {
  276.         .cardWidthMemberCard { width: 21rem;}
  277.     }
  278.     @media (min-width: 992px) and (max-width: 1199px){
  279.         .cardWidthMemberCard {width: 18rem;}
  280.     }
  282.     @media (min-width: 1200px) {
  283.         .teamSection .cardWidthMemberCard { width: 16rem;}
  284.     }
  285.     @media (min-width: 992px) and (max-width: 1199px){
  286.         .teamSection .cardWidthMemberCard {width: 18rem;}
  287.     }
  288.     @media (max-width: 1200px) {
  289.         .startplatzBadgeSize {
  290.             width: 45px;
  291.             height: 45px;
  292.             background: transparent;
  293.         }
  294.     }
  295.     @media (min-width: 1200px) {
  296.         .startplatzBadgeSize {
  297.             width: 65px;
  298.             height: 65px;
  299.             background: transparent;
  300.         }
  301.     }
  302.     @media (min-width: 1200px) {
  303.         .startplatzBadgePosition {
  304.             position: absolute;
  305.             top: 15px;
  306.             left: -32.5px;
  307.         }
  308.     }
  309.     @media (max-width: 1200px) {
  310.         .startplatzBadgePosition {
  311.             position: absolute;
  312.             top: 15px;
  313.             left: -22.5px;
  314.         }
  315.     }
  316.         .startplatzBadgeSizeCard {
  317.             width: 25px;
  318.             height: 25px;
  319.             background: transparent;
  320.         }
  322.         .startplatzBadgePositionCard {
  323.             position: relative;
  324.             top: 10px;
  325.             left: 250px;
  326.         }
  328.         .startplatzBadgeSizeHomepage {
  329.             width: 30px;
  330.             height: 30px;
  331.             background: transparent;
  332.         }
  334.         .startplatzBadgePositionHomepage {
  335.             position: relative;
  336.         }
  339.     {# Widget - corporate partner #}
  340.     .cardwidhCorporatePartner {
  341.         width: 18rem;height: 26rem;border: 2px solid #7ab800;
  342.         box-shadow: 0 6px 10px rgba(0, 0, 0, 0.16), 0 0 6px rgba(0, 0, 0, 0.1);
  343.         transition: .4s transform cubic-bezier(.155,1.105,.295,1.12),.4s box-shadow,.4s
  344.         -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
  345.     }
  346.     .cardwidhCorporatePartner:hover {transform: scale(1.04);}
  347.     .TopimageholderCorporatePartner {text-align: center;width: 100%;height: 10rem;}
  348.     .cardwidhCorporatePartner img {width: 100%;height: 100%;object-fit: contain;}
  349.     .lineSaperatorCorporatePartner {height: 0.6rem;
  350.         background: linear-gradient(90deg, #7ab800 0%, #AACF61 70%, rgba(255,255,255,1) 100%);
  351.     }
  352.     .contentholderCorporatePartner {height: 15rem;width: 100%;}
  353.     .p_CP_textholder {height: 7rem;}
  354.     .cardwidhCorporatePartner .footercorporatepartner1 {
  355.         background: linear-gradient(90deg, rgba(122,184,0,1) 0%, rgba(170,207,97,1) 30%, rgba(255,255,255,1) 100%);
  356.         margin-left: 4.5rem;border-bottom-left-radius: 1rem;border-top-left-radius: 1rem;padding-top: 0.1rem;
  357.         padding-bottom: 0.1rem;
  358.     }
  359.     .cardwidhCorporatePartner .footercorporatepartner2 {
  360.         background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(170,207,97,1) 30%, rgba(122,184,0,1) 100%);
  361.         margin-right: 4.5rem;padding-top: 0.1rem;padding-bottom: 0.1rem;border-radius:1rem;
  362.     }
  364.     {# Widget - MemberDetiledView #}
  365.     .SocialmediaMDV a {color: #666464;}
  366.     .SocialmediaMDV a:hover {color: rgba(122,184,0,1);}
  367.     .scoreMDV {background-color: #C4C4C4;}
  368.     .CardImageTopMDV {width: 100%;height: 100%; object-fit: cover;}
  369.     .imgSvgBkgColorMDV {background-color: #c7c6c6;color: #e0e0e0;}
  371.     #imgSectionMDV {height: 220px;width: 220px; margin-top:50px;margin-left:auto;margin-right:auto;
  372.         box-shadow: 0 6px 10px rgba(0, 0, 0, 0.16), 0 0 6px rgba(0, 0, 0, 0.1);
  373.     }
  374.     .skillsColorMDV a {color: rgba(122,184,0,1); }
  375.     .skillsColorMDV a:hover {color: rgba(122,184,0,1); }
  376.     .greenBackground100 {display: inline-block;width: 100px;background-color: rgba(122, 184, 0, 0.6);margin-right: 10px;    }
  377.     .graySettingsConnectBtn {display: inline-block;width: 100px;background-color: rgba(0, 0, 0, 0.16);margin-right: 10px;height: 40px;    }
  378.     .graySettingsConnectBtn:hover {background-color: rgba(0, 0, 0, 0.09);}
  379.     .tooltip-inner {background-color:white;border-color:black;border-width: 20px;color:black;}
  380.     @media (max-width: 991px) {  #imgSectionMDV {height: 180px;width: 180px;margin-top:75px;}  }
  382.     {# general connect style #}
  383.     .greenConnectButton {background-color: #7ab800;font-weight: 900;border-width: 0;border-color: rgba(122,184,0,0.6)}
  384.     .greenConnectButton:hover {background-color: rgba(122,184,0,0.6);}
  385.     .connectCard {padding: 20px;background:whitesmoke;margin: 10px 7px 15px;}
  386.     .editProfileImage {width: 160px;height: 160px;background-size: cover;background-position: center;border: 0.5rem solid white;cursor: pointer;}
  387.     .editStartupBanner {width: 640px;height: 160px;object-fit:contain;border: 0.5rem solid white;cursor: pointer;}
  388.     .connectCardTop {padding: 10px;margin-bottom: 15px;vertical-align: center;height: 40px;background: rgba(122, 184, 0, 0.6);width: 100%;}
  389.     .memberSettingsRow {display: flex;align-content: space-evenly;padding: 10px; width: 100%;}
  390.     .greenConnect {background-color: #7ab800;border-width: 0}
  391.     .connectProgress {height:25px; font-size:14px; box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4);}
  393.     {# adapt bootstrap elements to Connect-Style #}
  394.     .btn-outline-success{color:#7ab800;border-color:#7ab800}  .btn-outline-success:hover{color:#fff;background-color:#7ab800;border-color:#7ab800}  .btn-outline-success.disabled,.btn-outline-success:disabled{color:#7ab800;background-color:transparent}  .btn-outline-success:not(:disabled):not(.disabled).active,.btn-outline-success:not(:disabled):not(.disabled):active,.show>.btn-outline-success.dropdown-toggle{color:#fff;background-color:#7ab800;border-color:#7ab800}
  396.     {# Today Bookings #}
  397.     .availableSlot { background-color: #7ab800;}
  398.     .availableSlot:hover { background-color: rgba(122, 184, 0, 0.6);}
  399.     .availableSoon {background-color: rgb(192, 192, 191);}
  400.     .hrline {height: 0.3rem;background: #7ab800;margin-left: 19%;margin-right: 19%;}
  401.     .filtertext {margin: auto;font-size: 1.6rem;font-weight: bolder;}
  402.     .col-md-1-5 {width: 14%;margin-right: 1px;margin-left: 1px;border-radius: 10px;}
  404.     {# Book meeting and conferencerooms #}
  405.     .bookingHyperLink {color: black;}
  406.     .bookingHyperLink:hover {color: black;}
  407.     .booking {background-color: rgba(255, 2, 2, 1);}
  408.     .booking:hover {background-color: rgba(255, 2, 2, 0.6);}
  409.     .outdated_booking {background-color: rgba(255, 2, 2, 0.1);}
  410.     .freeSlot {background-color: rgba(122, 184, 0, 1);color: white;}
  411.     .freeSlot:hover {background-color: rgba(122, 184, 0, 0.6);color: white;}
  412.     .outdated_freeSlot {background-color: rgba(122, 184, 0, 0.1);}
  413.     .col-1-5 {width: 13.9%;margin-right: 2px;margin-left: 2px;border-radius: 10px;}
  415.     {# login #}
  416.     .homebtnLogin {color: white;}
  417.     .homebtnLogin:hover {color: black;transition: 0.3s ease-in;}
  418.     .container {font-family: 'Source Sans Pro', sans-serif;}
  420.     {# MyNetwork #}
  421.     .btnGetinContactMyNetwork { background-color: #7ab800; box-shadow: 2px 4px 5px #c5c5c5;}
  422.     .btnGetinContactMyNetwork:hover {background-color: rgba(122, 184, 0, 0.6);box-shadow: 2px 4px 5px #c5c5c5;}
  423.     .btnMyNetwork {box-shadow: 2px 4px 5px #c5c5c5;}
  424.     .imageSizeMyNetwork {width: 65px;height: 65px;border: 3px solid #e3e2e2;}
  425.     .imageSizeMyNetwork img, .imageSizeMyNetwork svg {width: 100%;height: 100%;border: none;}
  426.     .paddingNameSectionMyNetwork {padding-bottom: 15px;padding-top: 15px;background-color: #7ab800;}
  427.     .inputSearchMyNetwork {padding-bottom: 8px;padding-top: 8px;}
  428.     .favoriteMyNetwork { display: none; }
  429.     .notFavoriteMyNetwork { display: inline; }
  430.     .isFavoriteMyNetwork .favoriteMyNetwork { display: inline; }
  431.     .isFavoriteMyNetwork .notFavoriteMyNetwork { display: none; }
  433.     {# knowhow - batch feed - DesktopView #}
  434.     .feed_batch_Card {width: 100%;}
  435.     .feed_batch_imageholder {
  436.         width: 100%;
  437.         height: 300px;
  438.         transition:all .5s ease-in-out;
  439.         background-color:#0080bb; /* startplatz blue */
  440.     }
  441.     .feed_batch_Img {
  442.         width: 100%;
  443.         height: 100%;
  444.         transition:all .5s ease-in-out;
  445.         object-fit: contain;
  446.         color: #e8e8e7;
  447.     }
  448.     .feed_batch_Img:hover {color: rgba(0, 128, 187, 0.6);}
  449.     .feed_batch_imageholder:hover {background: rgba(0, 128, 187, 0.6);color:#AACF61;}
  450.     .feed_batch_Text {width: 100%;height: 300px;border: 3px solid #0080bb;border-left: none;}
  452.     {# knowHow - batch feed - MobileView #}
  453.     .cardBodyFeedBatch {border: 3px solid #0080bb;}
  454.     .feed_batch_imageholderMobile {width: 100%;height: 190px;background-color: #0080bb;}
  455.     .feed_batch_imageholderMobile img {width: 100%;height: 100%;object-fit: contain;color: #e8e8e7;}
  456.     .feed_batch_imageholderMobile svg {width: 100%;height: 100%;object-fit: contain;color: #e8e8e7;}
  457.     @media (max-width: 991px) {  .feed_batch_cardWidth {width: 45rem;margin-left: auto;margin-right: auto;}  }
  458.     @media (max-width: 950px) {  .feed_batch_cardWidth {width: 35rem;margin-left: auto;margin-right: auto;}  }
  459.     @media (max-width: 767px) {  .feed_batch_cardWidth {width: 30rem;margin-left: auto;margin-right: auto;}  }
  460.     @media (max-width: 550px) {  .feed_batch_cardWidth {width: 25rem;margin-left: auto;margin-right: auto;}  }
  461.     @media (max-width: 450px) {  .feed_batch_cardWidth {width: 20rem;margin-left: auto;margin-right: auto;}  }
  463.     {# KnowHow - blogPost - DesktopView #}
  464.     .ArtikelCardblogPost {width: 100%;}
  465.     .ArtikelImgblogPost {
  466.         transition:all .5s ease-in-out;width: 100%;height: 100%;
  467.         object-fit: contain;color: #e8e8e7;
  468.     }
  469.     .ArtikelImgblogPost:hover {color:#AACF61;}
  470.     .ArtikelImageHolderblogPost {transition:all .5s ease-in-out;width: 100%;background-color:#AACF61;height: 300px;}
  471.     .ArtikelImageHolderblogPost:hover {background:#7ab800;color:#AACF61;}
  472.     .ArtikelTextblogPost {width: 100%;height: 300px;border: 3px solid #AACF61;border-left: none;}
  474.     {# KnowHow - blogPost - MobileView #}
  475.     .imgBlockMobileblogPost {width: 100%;height: 190px;background-color: #AACF61;}
  476.     .imgBlockMobileblogPost svg {width: 100%;height: 100%;object-fit: contain;color: #e8e8e7;}
  477.     .imgBlockMobileblogPost img {width: 100%;height: 100%;object-fit: contain;color: #e8e8e7;}
  478.     .cardBodyKnowhowblogPost {border: 3px solid #AACF61;border-top: none;}
  479.     @media (max-width: 991px) {  .cardArticleWidthblogPost {width: 45rem;margin-left: auto;margin-right: auto;}  }
  480.     @media (max-width: 950px) {  .cardArticleWidthblogPost {width: 35rem;margin-left: auto;margin-right: auto;}  }
  481.     @media (max-width: 767px) {  .cardArticleWidthblogPost {width: 30rem;margin-left: auto;margin-right: auto;}  }
  482.     @media (max-width: 550px) {  .cardArticleWidthblogPost {width: 25rem;margin-left: auto;margin-right: auto;}  }
  483.     @media (max-width: 450px) {  .cardArticleWidthblogPost {width: 20rem;margin-left: auto;margin-right: auto;}  }
  485.     {# KnowHow - events #}
  486.     .cardMainEventPost {border: 3px solid #525459;}
  487.     .cardImageholderEventPost {background-color: #525459;height: 300px;width: 100%;}
  488.     .cardImageholderEventPost img {transition:all .5s ease-in-out;width: 100%;height: 100%;object-fit: contain;color: #e8e8e7;}
  489.     .cardImageholderEventPost svg {transition:all .5s ease-in-out;width: 100%;height: 100%;object-fit: contain;color: #e8e8e7;}
  490.     .cardTextHolderEventPost {height: 300px;width: 100%;}
  491.     .textHolderEventPost {height: 245px;}
  492.     @media (max-width: 991px) {  .cardMainEventPost {width: 45rem;margin-left: auto;margin-right: auto;}  }
  493.     @media (max-width: 950px) {  .cardMainEventPost {width: 35rem;margin-left: auto;margin-right: auto;}  }
  494.     @media (max-width: 767px) {  .cardMainEventPost {width: 30rem;margin-left: auto;margin-right: auto;}  }
  495.     @media (max-width: 550px) {  .cardMainEventPost {width: 25rem;margin-left: auto;margin-right: auto;}  }
  496.     @media (max-width: 450px) {  .cardMainEventPost {width: 20rem;margin-left: auto;margin-right: auto;}  }
  498.     {# KnowHow - post - DesktopView #}
  499.     .single_post_post_Img {transition:all .5s ease-in-out;width: 100%;height: 100%;object-fit: contain;color: #e8e8e7;}
  500.     .single_post_post_ImageHolder {transition:all .5s ease-in-out;width: 100%;background-color:#7ab800;height: 300px;}
  501.     .single_post_post_Card {width: 100%;}
  502.     .single_post_post_Img:hover {color:#ffffff;}
  503.     .single_post_post_ImageHolder:hover {background:#AACF61;color:#7ab800;}
  504.     .single_post_post_Text {width: 100%;height: 300px;border: 3px solid #7ab800;border-left: none;}
  505.     .textplaceholderPostPostSingle {height: 200px;}
  507.     {# KnowHow - post - MobileView #}
  508.     .single_post_post_imgBlock  {width: 100%;height: 190px;background-color: #7ab800;}
  509.     .cardTextPlaceholder {height: 14rem;}
  510.     .single_post_post_imgBlock img {width: 100%;height: 100%;object-fit: contain;color: #e8e8e7;}
  511.     .single_post_post_imgBlock svg {width: 100%;height: 100%;object-fit: contain;color: #e8e8e7;}
  512.     .cardBodySinglePostPost {border: 3px solid #7ab800;}
  513.     @media (max-width: 991px) {  .single_post_post_CardWidth {width: 45rem;margin-left: auto;margin-right: auto;}  }
  514.     @media (max-width: 950px) {  .single_post_post_CardWidth {width: 35rem;margin-left: auto;margin-right: auto;}  }
  515.     @media (max-width: 767px) {  .single_post_post_CardWidth {width: 30rem;margin-left: auto;margin-right: auto;}  }
  516.     @media (max-width: 550px) {  .single_post_post_CardWidth {width: 25rem;margin-left: auto;margin-right: auto;}  }
  517.     @media (max-width: 450px) {  .single_post_post_CardWidth {width: 20rem;margin-left: auto;margin-right: auto;}  }
  519.     {# KnowHow - youtube Playlist, video - DesktopView  #}
  520.     .YoutubeVideo {transition:all .5s ease-in-out;width: 100%;height: 100%;object-fit: contain;color: #e8e8e7;}
  521.     .youtubeVideoHolder {transition:all .5s ease-in-out;width: 100%;background-color:#FF0000;height: 300px;}
  522.     .youtubeVideoHolder:hover {background: rgba(255, 0, 0, 0.5);color:#AACF61;}
  523.     .YoutubeVideoDescription {border: 3px solid #FF0000;border-left: none;height: 300px;}
  524.     .titleYoutubeVideo {width: 100%;height: 40px;}
  525.     .descriptionYoutubeVideo {width: 100%;height: 200px;}
  527.     {# KnowHow - youtube Playlist, video - MobileView #}
  528.     .youtubeVideoHolderMobile {width: 100%;height: 190px;background-color: #FF0000;}
  529.     .cardTextOverflowYoutubeVideo {height: 14rem;}
  530.     .YoutubeVideoDescriptionMobile {border:3px solid #ff0000;border-top: none;width: 100%;}
  531.     @media (max-width: 991px) {
  532.         .YoutubeVideoCardWidth {width: 45rem;margin-left: auto;margin-right: auto;}
  533.         .YoutubeVideoMobile {width: 50%;height: 100%;object-fit: contain;color: #e8e8e7;}
  534.     }
  535.     @media (max-width: 950px) {
  536.         .YoutubeVideoCardWidth {width: 35rem;margin-left: auto;margin-right: auto;}
  537.         .YoutubeVideoMobile {width: 70%;height: 100%;object-fit: contain;color: #e8e8e7;}
  538.     }
  539.     @media (max-width: 767px) {
  540.         .YoutubeVideoCardWidth {width: 30rem;margin-left: auto;margin-right: auto;}
  541.         .YoutubeVideoMobile {width: 80%;height: 100%;object-fit: contain;color: #e8e8e7;}
  542.     }
  543.     @media (max-width: 550px) {
  544.         .YoutubeVideoCardWidth {width: 25rem;margin-left: auto;margin-right: auto;}
  545.         .YoutubeVideoMobile {width: 90%;height: 100%;object-fit: contain;color: #e8e8e7;}
  546.     }
  547.     @media (max-width: 450px) {
  548.         .YoutubeVideoCardWidth {width: 20rem;margin-left: auto;margin-right: auto;}
  549.         .YoutubeVideoMobile {width: 100%;height: 100%;object-fit: contain;color: #e8e8e7;}
  550.     }
  552.     {# StartupIndex - Community #}
  553.     .myclassStartupIndex tr:hover{cursor: pointer;background-color: rgba(122, 184, 0, 0.5);}
  554.     .myclassStartupIndex {border: 3px solid #7ab800;}
  555.     .TheadercolorStartupIndex {background-color: #7ab800;color: #ffffff;}
  556.     .td_StartupIndex {border-bottom: 0.8px solid #e0dddd;border-left: 0.8px solid #e0dddd;border-top: none;}
  558.     {# startup products detail #}
  559.     .boxBorderStartupOffer {border: 2px solid #7AB800;padding: 3rem;height: 25rem;}
  560.     .boxBorderStartupOffer img {width: 100%;object-fit: contain;}
  561.     .boxBorderStartupOfferMobile {border: 2px solid #7AB800;}
  562.     .imgStartupOfferMobilePlaceholder {height: 250px;width: 100%;}
  563.     .imgStartupOfferMobile  {width: 100%;height: 100%;padding: 10px;object-fit: contain;}
  564.     .imgStartupOfferPlaceholder {height: 100%;width: 100%;}
  565.     .StartupProductimage  {width: 100%;height: 100%;object-fit: contain;}
  566.     .h2_partnerProduct {color: #7AB800;font-weight: bolder;}
  567.     .Content_startup_product {padding-top: 1rem;padding-right: 1.5rem;padding-left: 1rem;height: 18rem;}
  568.     .btnZumAngebote {height: 7rem;}
  569.     .btnZumAngeboteColor {background-color: #7ab800;}
  570.     .hrLine2 {height: 4px;width:100%;background-color: #7AB800}
  571.     .contentBoxstartup {height:fit-content;overflow: auto;}
  572.     .OfferStartupProduct {
  573.         height: 2.5rem;width: 7rem;padding-top: 0.4rem;transform: rotate(-90deg);position: absolute;
  574.         margin-left: -4.8rem;margin-top: 20.2rem;background-color: #AACF61;
  575.     }
  577.     /* --- Corporate: spGreen / GREEN ---- */
  578.     .color-success {color:#7AB800;}
  580.     .spGreen h1,.spGreen h2,.spGreen h3,.spGreen h4,.spGreen h5,.spGreen h6  {color: rgba(122,184,8,1) !important;}
  581.     .spGreen {color: rgba(122,184,8,1) !important;}
  582.     .spGreen-90 {color: rgba(122,184,8,0.9)!important;}
  583.     .spGreen-80 {color: rgba(122,184,8,0.8)!important;}
  584.     .spGreen-70 {color: rgba(122,184,8,0.7)!important;}
  585.     .spGreen-60 {color: rgba(122,184,8,0.6)!important;}
  586.     .spGreen-50 {color: rgba(122,184,8,0.5)!important;}
  587.     .spGreen-40 {color: rgba(122,184,8,0.4)!important;}
  588.     .spGreen-30 {color: rgba(122,184,8,0.3)!important;}
  589.     .spGreen-20 {color: rgba(122,184,8,0.2)!important;}
  590.     .spGreen-10 {color: rgba(122,184,8,0.1)!important;}
  591.     .spGreen-5 {color: rgba(122,184,8,0.05)!important;}
  593.     .spBgGreen {background-color: rgba(122,184,8,1) !important;color: white;}
  595.     /* --- Corporate: spRed/ RED ---- */
  596.     .color-danger {color:#8F2640;}
  598.     .spRed h1,.spRed h2,.spRed h3,.spRed h4,.spRed h5,.spRed h6  {color: rgba(143,38,64,1) !important;}
  599.     .spRed {color: rgba(143,38,64,1) !important;}
  600.     .spRed-90 {color: rgba(143,38,64,0.9)!important;}
  601.     .spRed-80 {color: rgba(143,38,64,0.8)!important;}
  602.     .spRed-70 {color: rgba(143,38,64,0.7)!important;}
  603.     .spRed-60 {color: rgba(143,38,64,0.6)!important;}
  604.     .spRed-50 {color: rgba(143,38,64,0.5)!important;}
  605.     .spRed-40 {color: rgba(143,38,64,0.4)!important;}
  606.     .spRed-30 {color: rgba(143,38,64,0.3)!important;}
  607.     .spRed-20 {color: rgba(143,38,64,0.2)!important;}
  608.     .spRed-10 {color: rgba(143,38,64,0.1)!important;}
  609.     .spRed strong {color: rgba(143,38,64,1) !important;}
  611.     .bgSpRed { background-color: rgba(143,38,64,0.99)!important;}
  612.     .bgSpRed-90 {background-color: rgba(143,38,64,0.9)!important;}
  613.     .bgSpRed-80 {background-color: rgba(143,38,64,0.8)!important;}
  614.     .bgSpRed-70 {background-color: rgba(143,38,64,0.7)!important;}
  615.     .bgSpRed-60 {background-color: rgba(143,38,64,0.6)!important;}
  616.     .bgSpRed-50 {background-color: rgba(143,38,64,0.5)!important;}
  617.     .bgSpRed-40 {background-color: rgba(143,38,64,0.4)!important;}
  618.     .bgSpRed-30 {background-color: rgba(143,38,64,0.3)!important;}
  619.     .bgSpRed-20 {background-color: rgba(143,38,64,0.2)!important;}
  620.     .bgSpRed-10 {background-color: rgba(143,38,64,0.1)!important;}
  622.     .line-clamp-3 {
  623.         display: -webkit-box;
  624.         -webkit-line-clamp: 3;
  625.         -webkit-box-orient: vertical;
  627.         display: box;
  628.         line-clamp: 3;
  629.         box-orient: vertical;
  631.         overflow: hidden;
  632.     }
  634.     .line-clamp-4 {
  635.         display: -webkit-box;
  636.         -webkit-line-clamp: 4;
  637.         -webkit-box-orient: vertical;
  639.         display: box;
  640.         line-clamp: 4;
  641.         box-orient: vertical;
  643.         overflow: hidden;
  644.     }
  646.     .line-clamp-6 {
  647.         display: -webkit-box;
  648.         -webkit-line-clamp: 6;
  649.         -webkit-box-orient: vertical;
  651.         display: box;
  652.         line-clamp: 6;
  653.         box-orient: vertical;
  655.         overflow: hidden;
  656.     }
  658.     .overflow-ellipse {
  659.         white-space: nowrap;
  660.         overflow: hidden;
  661.         text-overflow: ellipsis;
  662.     }
  664.     .material-icons-outlined {
  665.         vertical-align: middle;
  666.     }
  668.     .material-icons-outlined.eventcard-icon {
  669.         vertical-align: middle;
  670.         font-size: 14px;
  671.     }
  673.     .material-icons-outlined.roomcard-icon {
  674.         vertical-align: middle;
  675.         font-size: 20px;
  676.         color: #7ab800;
  677.     }
  679.     .material-icons-outlined.black-icon {
  680.         vertical-align: middle;
  681.         font-size: 20px;
  682.         color: black;
  683.     }
  685.     .card-sub-link {
  686.         position: relative;
  687.         z-index: 2;
  688.     }
  690.     .btn.help-button,
  691.     .help-button {
  692.         position: fixed;
  693.         bottom: 2rem;
  694.         right: 2rem; 
  695.         background-color: rgba(122,184,8,1);
  696.         color: white;
  697.         z-index: 10;
  698.     }
  699.     .btn.help-button:hover,
  700.     .help-button:hover {
  701.         color: white;
  702.         background-color: rgba(98,147,6,1);
  703.     }
  704.     .help-button-text {
  705.         vertical-align: center;
  706.     }
  707.     
  708.     @media (max-width: 992px) {
  709.         .help-button-text {
  710.             display: none;
  711.         }
  712.     }
  714.     /* ajax-helpers */
  715.     [data-template] { display: none; }
  716.     [data-filtered-out-by] { display: none; }
  718.     .ajax-toast-container {
  719.         bottom: 2rem;
  720.         right: 2rem;
  721.         position: fixed;
  722.         max-width: 40rem;
  723.         z-index: 100000;
  724.     }
  725.     .ajax-toast {
  726.         max-height: 20rem;
  727.         transition: all 0.5s;
  728.         display: none;
  729.         padding: 15px;
  730.         border-radius: 5px;
  731.         border: 1px solid grey;
  732.         background-color: #61badd; /* lightblue; TODO: Replace with style approved color */
  733.         color: white;
  734.         margin-bottom: 0.5rem;
  735.     }
  736.     .ajax-toast:last-child {
  737.         margin-bottom: 0;
  738.     }
  739.     .ajax-toast.ajax-toast-success {
  740.         color: white;
  741.         border: 1px solid #d6e9c6;
  742.         background-color: rgba(122,184,8,1); /* spbGGreen */
  743.     }
  744.     .ajax-toast.ajax-toast-error {
  745.         color: white;
  746.         border: 1px solid darkred;
  747.         background-color: rgba(143,38,64,0.99); /* bgSpRed */
  748.     }   
  749.     /* end ajax-helpers */
  751.     /* checkable buttons */
  753.     .checkable-buttons > input {
  754.         display: none;
  755.     }
  756.     .checkable-buttons > label {
  757.         margin:0;
  758.     }
  759.     .checkable-buttons > input:checked + label.btn-dark {
  760.         background-color: #28a745;
  761.         border-color: #28a745;
  762.     }
  763.     .checkable-buttons > input:checked + label.btn-dark:hover {
  764.         background-color: #218838;
  765.         border-color: #1e7e34;
  766.     }
  767.     .checkable-buttons > input:checked + label.btn-outline-primary {
  768.         color: #fff;
  769.         background-color: #007bff;
  770.         border-color: #007bff;
  771.     }
  772.     .checkable-buttons > input:checked + label.btn-outline-primary:hover {
  773.         color: #fff;
  774.         background-color: #0069d9;
  775.         border-color: #0062cc;
  776.     }
  778.     .checkable-buttons > input + label.btn-outline-secondary {
  779.         background-color: transparent;
  780.         color: #6c757d;
  781.         border-color: #6c757d;
  782.     }
  784.     .checkable-buttons > input + label.btn-outline-secondary:hover {
  785.         color: #fff;
  786.         background-color: #6c757d;
  787.         border-color: #6c757d;
  788.     }
  790.     .checkable-buttons > input:checked + label.btn-outline-secondary.btn-info {
  791.         color: #fff;
  792.         background-color: #17a2b8;
  793.         border-color: #17a2b8;
  794.     }
  795.     .checkable-buttons > input:checked + label.btn-outline-secondary.btn-info:hover {
  796.        color: #fff;
  797.        background-color: #138496;
  798.        border-color: #117a8b;
  799.     }
  801.     .checkable-buttons > input:checked + label.btn-outline-secondary.btn-secondary {
  802.        color: #fff;
  803.        background-color: #6c757d;
  804.        border-color: #6c757d;
  805.     }
  806.     .checkable-buttons > input:checked + label.btn-outline-secondary.btn-secondary:hover {
  807.        color: #fff;
  808.        background-color: #5a6268;
  809.        border-color: #545b62;
  810.     }
  812.     .checkable-buttons > input:checked + label.btn-outline-secondary.btn-danger {
  813.        color: #fff;
  814.        background-color: #dc3545;
  815.        border-color: #dc3545;
  816.     }
  817.     .checkable-buttons > input:checked + label.btn-outline-secondary.btn-danger:hover {
  818.     }
  820.     .checkable-buttons > input:checked + label.btn-outline-secondary.btn-success {
  821.        color: #fff;
  822.        background-color: #28a745;
  823.        border-color: #28a745;
  824.     }
  825.     .checkable-buttons > input:checked + label.btn-outline-secondary.btn-success:hover {
  826.        color: #fff;
  827.        background-color: #218838;
  828.        border-color: #1e7e34;
  829.     }
  831.     .checkable-buttons > input:checked + label.btn-outline-secondary.btn-gruenderstipendium {
  832.         color: #fff;
  833.         background-color: #7ab800;
  834.         border-color: #7ab800;
  835.     }
  837.     .btn-startplatz {
  838.         color: #fff;
  839.         background-color: #7ab800;
  840.         border-color: #7ab800;
  841.     }
  843.     .btn-startplatz:hover {
  844.         color: #fff;
  845.         background-color: #8dd300;
  846.         border-color: #8dd300;
  847.     }
  849.     /* end checkable buttons */
  850.     .card-startup {
  851.         height: 20rem;
  852.         background-color: #fff;
  853.         border: 3px solid black;
  854.         flex-wrap: wrap;
  855.         display: flex;
  856.         justify-content: space-between;
  857.     }
  858.     /*.row{
  859.         width: 100%;
  860.         height: 100%;
  861.     }
  862.     .col-sm{
  863.         width: 50%;
  864.         height: 20rem;
  865.         flex-direction: column;
  866.         overflow: hidden;
  867.     }*/
  868.     .card-startup-logo a {
  869.         width: 100%;
  870.         height: 20rem;
  871.         object-fit: contain;
  872.         float: left;
  873.     }
  874.     .card-startup-logo img {
  875.         width: 100%;
  876.         height: 20rem;
  877.         max-height: 260px;
  878.         object-fit: contain;
  879.         float: left;
  880.     }
  881.     .card-startup-logo svg {
  882.         width: 100%;
  883.         height: 20rem;
  884.         max-height: 260px;
  885.         object-fit: contain;
  886.         float: left;
  887.     }
  888.     .card-startup .card-name {
  889.         font-size: 30px;
  890.         float: left;
  891.         color: black;
  892.         position: relative;
  893.         font-weight: bold;
  894.         display: block;
  895.     }
  896.     .card-startup .card-content {
  897.         width: 100%;
  898.         height: 100%;
  899.         margin:  5px 0px 0px 0px;
  900.         display: flex;
  901.         flex-direction: column;
  902.     }
  903.     .card-startup .card-content p{
  904.         width: 100%;
  905.         font-size: 15px;
  906.         color: black;
  907.         padding:  0px;
  908.     }
  909.     .card-place {
  910.         display: inline-block;
  911.         color: black;
  912.         padding: 10px 0px;
  913.     }
  914.     .card-place img{
  915.         width: 15px;
  916.         height: 20px;
  917.     }
  918.     .card-link{
  919.         display: inline-block;
  920.         padding: 10px 0px;
  921.     }
  922.     .card-link img{
  923.         width: 35px;
  924.         height: 35px;
  925.     }
  926.     .card-link a{
  927.         color: black;
  928.         font-weight: bold;
  929.         padding: 0px 10px;
  930.     }
  931.     @media (max-width: 575px) {
  932.         .card-startup {
  933.             height: auto;
  934.         }
  935.     }
  937.     /* Events Overview */
  939.     .event-card-width {
  940.         width: 16rem;
  941.         height: 22rem;
  942.         box-shadow: 0 6px 10px rgba(0, 0, 0, 0.16), 0 0 6px rgba(0, 0, 0, 0.1);
  943.         transition: .4s transform cubic-bezier(.155, 1.105, .295, 1.12), .4s box-shadow, .4s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
  944.         border-style: none;
  945.     }
  946.     .event-card-width:hover {transform: scale(1.04);}
  947.     .event-card-width a {
  948.         text-decoration: none;
  949.         color: inherit;
  950.     }
  951.     .banner-line {
  952.         height: 25px;
  953.         border-bottom: 4px solid #7ab800;
  954.         text-align: center;
  955.         max-width: 1090px;
  956.         margin: 0px auto;
  957.     }
  959.     .banner-title {
  960.         font-size: 30px;
  961.         background-color: white;
  962.         padding: 0 35px;
  963.     }
  965.     .banner-flex-width{
  966.         background-repeat:no-repeat;
  967.         background-size: cover;
  968.     }
  970.     .event-card-title {
  971.         display: flex;
  972.         align-items: center;
  973.         text-align: left;
  974.         justify-content: center;
  975.         width: 100%;
  976.         height: 8rem;
  977.         background:  #7ab800;
  978.         overflow: overlay;
  979.     } /*in*/
  981.     .hide-scrollbar::-webkit-scrollbar {
  982.         display: none;
  983.         scrollbar-width: none;
  984.     }
  985.     .hide-scrollbar {
  986.         scrollbar-width: none;
  987.     }
  989.     .event-card-text {
  990.         font-size: 14px;
  991.     }
  993.     .search-box-events {
  994.         border-radius: 10px;
  995.         background: #f9f9f9 ;
  996.     }
  998.     .show-events-button {
  999.         border: 0;
  1000.         line-height: 2.5;
  1001.         padding: 0 20px;
  1002.         font-size: 1rem;
  1003.         text-align: center;
  1004.         color: #fff;
  1005.         border-radius: 6px;
  1006.         background-color: #7ab800;
  1007.         padding-top: 1rem;
  1008.         padding-bottom: 1rem;
  1009.         padding-left: 2.5rem;
  1010.         padding-right: 2.5rem;
  1011.     }
  1013.     .show-events-button:hover {
  1014.         color: white;
  1015.         text-decoration: none;
  1016.     }
  1018.     /* Admin Section */
  1020.     .btn-warning {
  1021.         color: #fff;
  1022.         background-color: #0071C2;
  1023.         border-color: #0071C2; }
  1024.     .btn-warning:hover {
  1025.         color: #fff;
  1026.         background-color: #005b9a;
  1027.         border-color: #005b9a; }
  1028.     .btn-warning:focus, .btn-warning.focus {
  1029.         -webkit-box-shadow: 0 0 0 0.2rem rgb(2, 70, 117);
  1030.         box-shadow: 0 0 0 0.2rem rgb(2, 70, 117);
  1031.         background-color: #024675FF;
  1032.         border-color: #024675FF;
  1033.         color: #ffffff; }
  1034.         
  1035.     .btn-warning.disabled, .btn-warning:disabled {
  1036.         color: #fff;
  1037.         background-color: #0071C2;
  1038.         border-color: #0071C2; }
  1039.     .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active,
  1040.     .show > .btn-warning.dropdown-toggle {
  1041.         color: #fff;
  1042.         background-color: #005b9a;
  1043.         border-color: #005b9a; }
  1044.     .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus,
  1045.     .show > .btn-warning.dropdown-toggle:focus {
  1046.         -webkit-box-shadow: 0 0 0 0.2rem rgb(2, 70, 117);
  1047.         box-shadow: 0 0 0 0.2rem rgb(2, 70, 117); }
  1049.     .bg-warning {
  1050.         color: #fff;
  1051.         background-color: #0071C2 !important;
  1052.     }
  1054.     a.bg-warning:hover,
  1055.     a.bg-warning:focus,
  1056.     button.bg-warning:hover,
  1057.     button.bg-warning:focus {
  1058.         color: #fff;
  1059.         background-color: #005b9a !important;
  1060.     }
  1062.     /* Admin Section End */
  1065.     /* Booking Rooms */
  1067.     .carousel-item {
  1068.         height: 533px;
  1069.         width: 800px;
  1070.     }
  1072.     .carousel-item img {
  1073.         position: absolute;
  1074.         object-fit: cover;
  1075.         top: 0;
  1076.         left: 0;
  1077.         min-height: 500px;
  1078.     }
  1080.      .dropbtn {
  1081.          background-color: #04AA6D;
  1082.          color: white;
  1083.          padding: 16px;
  1084.          font-size: 16px;
  1085.          border: none;
  1086.      }
  1089.     .dropdown-content {
  1090.         display: none;
  1091.         position: absolute ;
  1092.         background-color: #f1f1f1;
  1093.         width: 147px;
  1094.         box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  1095.         z-index: 1;
  1096.         alignment: center;
  1097.     }
  1099.     .dropdown-content a {
  1100.         color: black;
  1101.         padding: 12px 16px;
  1102.         text-decoration: none;
  1103.         display: block;
  1104.         width: inherit;
  1107.     }
  1109.     .dropdown-content a:hover {background-color: #ddd;}
  1111.     .dropdown:hover .dropdown-content {display: block;}
  1113.     .dropdown:hover .dropbtn {background-color: #3e8e41;}
  1114.     
  1115.     
  1117.     /* Booking Rooms End */
  1118.     
  1119.     /* Startups Homepage design*/
  1120.     .search-box p{
  1121.         font-size: 20px ;
  1122.         color: #6c757d;
  1123.         position: relative;
  1124.         top: 10px;
  1125.         left: 0px;
  1126.         bottom: 0px;
  1127.     }
  1128.     ::-webkit-input-placeholder {
  1129.         font-weight: bold;
  1130.         font-size: 18px;
  1131.     }
  1132.     .dropdown-item-homepage{
  1133.         background-color: #545b62;
  1134.         color: #fff;
  1135.         border: 1px solid #343a40;
  1136.         font-weight: bold;
  1137.     }
  1138.     .dropdown-item-homepage:hover{
  1139.         background-color: #7ab800;
  1140.     }
  1142.     /* Startups Homepage design End*/
  1144.     /* Startups Mission for Badge*/
  1146.     .flex-container-missions {
  1147.         display: flex;
  1148.         flex-direction: row;
  1149.     }
  1151.     @media (max-width: 1060px) {
  1152.         .flex-container-missions {
  1153.             flex-direction: column;
  1154.         }
  1155.     }
  1158.     /* Startups Mission for Badge end*/
  1160.     /* Star rating start */
  1161.     .rating {
  1162.         white-space:nowrap;
  1163.     }
  1165.     .rating:not(:checked) > input {
  1166.         white-space:nowrap;
  1167.         position: absolute;
  1168.         top: -9999px;
  1169.         clip: rect(0, 0, 0, 0);
  1170.     }
  1172.     .rating:not(:checked) > label {
  1173.         position:relative;
  1174.         float:right;
  1175.         margin:0 0.03em;
  1176.         padding:0;
  1177.         width:26px;
  1178.         overflow: hidden;
  1179.         white-space: nowrap;
  1180.         cursor: pointer;
  1181.         font-size: 200%;
  1182.         line-height: 1.2;
  1183.         color: #ddd;
  1184.         text-shadow: 0 0 2px black;
  1185.     }
  1187.     .rating > input:checked ~ label {
  1188.         position:relative;
  1189.         color: #fcff57;
  1190.     }
  1192.     .rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label {
  1193.         color:gold;
  1194.     }
  1196.     .rating > input:checked + label:hover, .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover, .rating > input:checked ~ label:hover ~ label, .rating > label:hover ~ input:checked ~ label {
  1197.         color: #ea0;
  1198.     }
  1200.     .rating > label:active {
  1201.         position: relative;
  1202.     }
  1204.     .fractionalStar {
  1205.         position:absolute;
  1206.         inset: 0;
  1207.         overflow:hidden;
  1208.         color:#fcff57;
  1209.     }
  1210.     /* Star rating end */
  1212.     {# Banner startup detail view #}
  1214.     .placeholder-banner-flex-width{
  1215.         background-repeat:no-repeat;
  1216.         background-size: cover;
  1217.         width:100%;
  1218.         min-height: 190px;
  1219.     }
  1221.     .placeholder-banner-text {
  1222.         margin-top: 60px;
  1223.         margin-bottom: 100px;
  1224.         position: relative;
  1225.         z-index: 2;
  1226.         position: relative
  1227.     }
  1229.     .placeholder-addition {
  1230.         height: 180px;
  1231.         z-index:1;
  1232.         position: absolute;
  1233.     }
  1235.     .general-line-clamp {
  1236.         display            : block;
  1237.         display            : -webkit-box;
  1238.         -webkit-box-orient : vertical;
  1239.         position           : relative;
  1240.         overflow           : hidden;
  1241.         text-overflow      : ellipsis;
  1242.         padding            : 0 !important;
  1243.         line-height: var(--global--line-height-body,1.2) !important;
  1244.     }
  1246.     .general-line-clamp-1 {
  1247.         -webkit-line-clamp : 1;
  1248.         height             : calc(1em * var(--global--line-height-body, 1.2) * 1.6);
  1249.     }
  1251.     .general-line-clamp-2 {
  1252.         -webkit-line-clamp : 2;
  1253.         height             : calc(1em * var(--global--line-height-body, 1.2) * 2);
  1254.     }
  1256.     .general-line-clamp-3 {
  1257.         -webkit-line-clamp : 3;
  1258.         height             : calc(1em * var(--global--line-height-body, 1.2) * 3);
  1259.     }
  1261.     .general-line-clamp-4 {
  1262.         -webkit-line-clamp : 4;
  1263.         height             : calc(1em * var(--global--line-height-body, 1.2) * 4.6);
  1264.     }
  1266.     .general-line-clamp-5 {
  1267.         -webkit-line-clamp : 5;
  1268.         height             : calc(1em * var(--global--line-height-body, 1.2) * 5.6);
  1269.     }
  1271. </style>