html {
            position: relative;
            min-height: 100%;
        }
        body { 
            padding-top: 10px;
            margin-bottom: 60px;
        }
        .text-grey { color: #c0c0c0; }
        .card {
            margin: 0 auto; /* Added */
            float: none; /* Added */
            margin-bottom: 10px; /* Added */
        }
        .bold {
            font-weight: bold;
        }
        .magenta {
            /*color: #c73475;*/
            color: rgb(0,149,171);
        }
        .magenta-bkg {
            background-color: #c73475;
        }
        a:link { 
            text-decoration: none; 
        }
        a:visited { 
            text-decoration: none; 
        }
        a:active { 
            text-decoration: none; 
        }
        a:hover { 
            text-decoration: none;           
        } 
        a:hover .magenta {
            color: #c73475;
            text-decoration: underline;
        }
        .magenta-bkg {
            /*background-color: #c73475;*/
            background-color: rgb(0,149,171);
        }
        .green-bkg {
            background-color: rgba(128,255,128,1);
        }
        .yellow-bkg {
            background-color: yellow;
        }
        .orange-bkg {
            background-color: orange;
        }
        .grey-bkg {
            background-color: lightgrey;
        }
        .red-bkg {
            background-color: rgba(255,128,128,1);
        }
        .circle-magenta {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            /*background-color: #c73475;*/
            background-color: rgb(0,149,171);
            box-shadow: 0 0 3px rgba(0,0,0,0.3);
            float: left;
            margin-right: 1em;
        }
        div .dot-22 {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            float: left;
            margin-right: 1em;
            margin-top: 0.1em;
            box-shadow: 0 0 3px rgba(0,0,0,0.3);
        } 
        div .dot-10 {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            float: left;
            margin-right: 0.5em;
            margin-top: 0.5em;
            box-shadow: 0 0 3px rgba(0,0,0,0.3);
        } 

        .jumbotron {
          padding-top: 1rem;
          padding-bottom: 1rem;
          margin-bottom: 0;
          background-color: #fff;
        }
        .card {
            margin: 0 auto; /* Added */
            float: none; /* Added */
            margin-bottom: 10px; /* Added */
        }
        .btn-iplex {
            color: #fff;
            background-color: rgb(0, 149, 171);
                border-color: rgb(0, 149, 171);
        }
        .btn-iplex:hover {
            color: #fff;
            background-color: #007E91;
            border-color: #007E91;
        }
        .btn-iplex:focus, .btn-iplex.focus {
            color: #fff;
            -webkit-box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.5);
            box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.5);
        }

        .btn-iplex.disabled, .btn-iplex:disabled {
            color: #fff;
            background-color: rgb(0, 149, 171);
            border-color: rgb(0, 149, 171);
        }

        .btn-iplex:active, .btn-iplex.active,
        .show > .btn-iplex.dropdown-toggle {
            color: #fff;
            background-color: #007E91;
            background-image: none;
            border-color: #007E91;
        }

        .btn-iplex-outline {
            color: rgb(0, 149, 171);
            background-image: none;
            background-color: transparent;
            border-color: rgb(0, 149, 171);
        }

        .btn-iplex-outline:hover {
            color: #c73475;
            background-color: #fff;
            border-color: #99285A;
        }
        
        .btn-iplex-outline:focus, .btn-iplex-outline.focus {
            -webkit-box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.5);
            box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.5);
        }

        .btn-iplex-outline.disabled, .btn-iplex-outline:disabled {
            color: #c73475;
            background-color: transparent;
        }

        .btn-iplex-outline:active, .btn-iplex-outline.active,
        .show > .btn-iplex-outline.dropdown-toggle {
            color: #99285A;
            background-color: #fff;
            border-color: #99285A;
        }
        .alert {
            /*margin: auto; display: table;*/
            margin-top: 8px;
            margin-bottom: 8px;
        }
        .footer {
            /*position: absolute;
            bottom: 0;
            width: 100%;*/
            /* Set the fixed height of the footer here */
            height: 60px;
            line-height: 60px; /* Vertically center the text there */
        }

        /* button o */
        /* Базовий стиль кнопки */
        .btn-iplex-o {
            color: rgb(0, 149, 171);
            background-color: #fff;
            border: 1px solid rgb(0, 149, 171);
            padding: 10px 16px;
            position: relative; /* Для псевдоелементів */
            overflow: hidden; /* Для анімацій */
            transition: all 0.3s ease; /* Плавний перехід для всіх змін */
            cursor: pointer;
            /*margin-bottom: 10px;*/
        }

        /* Ефект при наведенні */
        .btn-iplex-o:hover {
            color: rgb(0, 149, 171); 
            background-color: rgba(0, 149, 171, 0.2); 
            border-color: rgb(0, 149, 171);
        }

        /* Ефект при фокусі */
        .btn-iplex-o:focus, .btn-iplex-o.focus {
            outline: none; /* Видаляємо стандартний контур */
        }

        /* Стан disabled */
        .btn-iplex-o.disabled, .btn-iplex-o:disabled {
            background-color: #ccc;
            border-color: rgb(0, 149, 171);
            color: rgba(0, 149, 171, 0.5); 
            cursor: not-allowed;
            box-shadow: none; 
        }

        /* Активний стан */
        .btn-iplex-o:active, .btn-iplex-o.active,
        .show > .btn-iplex-o.dropdown-toggle {
            color: rgb(0, 149, 171);
            background-color: rgba(0, 149, 171, 0.3);
            border-color: rgb(0, 149, 171);
        }


        /* Ефект для іконок (якщо є) */
        .btn-iplex-o i, .zoom-icon i, .rotate-icon i{
            margin-right: 8px;
            transition: transform 0.2s ease; /* Плавніше прискорення */
            will-change: transform; /* Апаратне прискорення */
            display: inline-block; /* Забезпечує коректне масштабування */
        }

        .btn-iplex-o:hover i, .zoom-icon:hover i  {
            transform: scale(1.2); /* Збільшення */
        }

        .rotate-icon:hover i {
            transform: rotate(180deg); /* Обертання на 360 градусів */
        }


        /****************************************************************************/
        /************************** LOADER *********************/
        /****************************************************************************/


        .loader-img {
          color: #0095ab;
          font-size: 10px;
          margin: auto auto;
          width: 1em;
          height: 1em;
          border-radius: 50%;
          position: relative;
          text-indent: -9999em;
          -webkit-animation: load4 1.3s infinite linear;
          animation: load4 1.3s infinite linear;
          -webkit-transform: translateZ(0);
          -ms-transform: translateZ(0);
          transform: translateZ(0);
        }
        @-webkit-keyframes load4 {
          0%,
          100% {
            box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
          }
          12.5% {
            box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
          }
          25% {
            box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
          }
          37.5% {
            box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
          }
          50% {
            box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
          }
          62.5% {
            box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
          }
          75% {
            box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
          }
          87.5% {
            box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
          }
        }
        @keyframes load4 {
          0%,
          100% {
            box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
          }
          12.5% {
            box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
          }
          25% {
            box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
          }
          37.5% {
            box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
          }
          50% {
            box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
          }
          62.5% {
            box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
          }
          75% {
            box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
          }
          87.5% {
            box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
          }
        }