body {
   padding-top: 50px;
   height: 100%;
   background-color: #f5f5f5;
}

a {
   color: #2E77B6;
}

.btn-success {
   background-color: #2C882C;
}

.btn-info {
   background-color: #1B809E;
}

.navbar-inverse {
   background-color: #317AB9;
}

.navbar-inverse .navbar-nav li a {
   color: #fff;
}
.navbar-inverse .navbar-nav li a:focus {
   color: #262626;
   background-color: #f5f5f5;
}
@media  (max-width: 320px ) {
   .oup-learner_portal-logo img {
      width: 110px;
      margin-bottom: 8px; 
   }        
}
@media (max-width: 767px ) {
   .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus {
      color: #000;
   }
   .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
      color: #fff;
   }
   
   /****responsive****/

   .table-sm-device thead {
      display: none;
    }
 
   .table-sm-device tr {
      display: block;
      margin-bottom:0;
    }
 
   .table-sm-device td {
      position:relative;
      display:block;
      padding-left:50%;
    } 
 
   .table-sm-device td::before {
      position: absolute;
      left: 20px;
      width: 50%;
    }
 
   .table-sm-device > tbody > tr > td {
      border-top: none;
    }
 
   .table-sm-device > tbody > tr {
     border-bottom: 1px solid #DDD;
     padding-bottom: 20px;
     padding-top: 20px;
    }
 
   .btn-full-adjust {
     width: 100%;
     font-size: 15px!important;
    }
 
   .date_part {
      display: block!important;
    }
 
   .finished_date {
      float: right;
    }
    .progress-responsive {
       width: 42%;
    }
    .active-tab-name {
      display: inline-block!important;
      color: #fff;
      margin-top: 3%;
      font-size: 17px;
      font-weight: bold;
      margin-left: 110px;
    }
    .responsive-sm-device {
      width: 100%!important;
      margin: 70px 242px 80px 343px;
    }
    .head-responsive {
      text-align: center;
    }
    .oup-learner_portal-logo {
      margin-bottom: -42px;
    }
}

/* Styles for panel-block */
.panel-block {
   background-color: white;
   padding: 10px 15px 15px;
   border: 1px solid #eee;
}

.btn-sm, .btn-group-sm>.btn {
   padding: 3px 10px;
   font-size: 12px;
   line-height: 1.5;
   border-radius: 3px;
}

.container.main {
   margin-top: 10px;
}
.panel-icon {
   background: rgba(255,255,255,0.9);
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   width: 60px;
   height: 60px;
   float: left;
   margin-right: 15px;
}

.panel-icon i {
   color: #4e5154;
   font-size: 36px;
   padding: 10px 0 0 14px;
}

.panel-title label {
   font-size: 14px;
}
.filter-panel {
   margin-top: 10px;
}
h4.filters {
   font-size: 14px;
}

.pagination-info, .pagination {
   margin: 10px 0;
}
.pagination-info, .pagination {
   margin: 5px 0 0;
   font-size: 12px;
   padding-left: 5px;
}
.table {
   margin-bottom: 0px;
}
.table>thead>tr>th {
   position: relative;
   border-bottom: 1px solid #DDD;
}

.table>thead>tr>td:after, .table>thead>tr>th:after {
   content: '';
   display: block;
   position: absolute;
   left: 0;
   right: 0;
   bottom: 1px;
   height: 1px;
   background-color: #DDD;
}

.progress {
   margin-bottom: 0px;
}
.panel-body .form-group {
   margin-left: 0px;
   margin-right: 0px;
}

.navbar-nav>li>.dropdown-menu {
   color: #fff;
   background-color: #080808;
   left: auto;
   right: 0;
}

.navbar-inverse .navbar-nav li a:hover {
color: #000;
}

.btn-primary {
   background-color: #317ab9;
}
.alert-selecttask {
   display: inline-block;
   padding: 3px 10px;
   line-height: 1.5;
   margin-bottom: 0;
   font-size: 12px;
}
.user:focus-within {
   outline: -webkit-focus-ring-color auto 1px;
}
caption, .sr-only {
  text-indent: -10000px;
}
.container-custom {
   padding-right: 0px;
   padding-left: 0px;
   margin-right: 0px;
   margin-left: 0px;
}
.navbar-custom {
   margin-left: 125px;
   display: flex;
}
#loader-disable {
   position: absolute;
   width: 32px;
   height: 32px;
   top: 50%;
   left: 50%;
   margin: -16px 0 0 -16px;
}

/* css for summary page custom popup - skolverket */
#confirmModalforStartExamSkol{
   .d-flex {
      display: flex;
   }
   .align-items-center {
      align-items: center;
   }
   .skt-modal-body-error-color {
      background-color: #F5D3D4;;
   }
  .justify-content-between {
      justify-content: space-between;
   }
   .modal-dialog{
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      height: 100%;
      width: 100%;
      max-width: 100%;
      max-height: 100%;
      margin: 0;
   }
   .modal-content{
       width: 440px; 
       height:320px; 
       margin-left: 0rem;
      .modal-header{
         height: 72px; 
         padding: 14px 17px 12px 16px; 
         background-color: #f7f7f7; 
         font-size: 19px; 
         font-family: SourceSansPro-Semibold, sans-serif; 
         display:flex;
         h4#myModalLabel{
            margin: 0; 
            font-size: 22px; 
            color: #373a3c;
            font-weight: bold;
         }
         button.skt-close.btn{
            border-radius: 6px; 
            border: 1px solid #27639a; 
            background: #fff; 
            font-size: 1.125rem; 
            color: #27639a; 
            font-family: SourceSansPro-Regular, sans-serif; 
            width: 109px; 
            height: 39px; 
            padding: 8px 6px; 
            box-shadow: 0 3px 6px #00000029;
            display: inline-block;
            margin-left: 60px;
            .d-flex.align-items-center{
               justify-content: space-around;
               height: 22px;
               width: 96px;
               span{
                  font-size: 19px;
               }
               .skv-close-btn{
                  background-image: url(../images/Group.2822.svg);
                  height: 13px;
                  background-repeat: no-repeat;
                  width: 13px;
                  opacity: 1;         
               }
            }
            &:hover,
            &:focus{
               outline:3px solid #F59C00; 
               border: 1px solid #00639f;
               box-shadow:none;
               outline-offset: unset;
            }
            &:active, &.active{
               background: #00639f;
               color: #fff;
               box-shadow: none;
               outline: none;
               filter: initial;
               span{
                  color: #fff;
                  font-size: 19px;
                  &.icon{
                     margin: 0;
                  }
               }
               span.skv-close-btn {
                  filter: brightness(0) invert(1);
               }
               svg{
                  fill: #fff;
               }
            }
         }
      }
      .modal-body{
         color: #222; 
         height: 168px;
         width: 438px;
         padding: 1rem;
         font-size: 1.125em;
         align-items: center;
         .body-content {
            padding-left: 20px;
         }
         .skt-svg-warning {
            flex-shrink: 0;
            height: 2.528rem;
            width: 2.528rem;
            margin-right: 1em;
         }
      }
      .modal-footer{
         border-top: none; 
         background-color: #f7f7f7; 
         padding: 19px 16px 29px 16px;
         display: block;
         height: 79px;
         .skt-logoff-btn {
            width: 100%;
            min-width: 408px;
            height: 40px;
            margin-left: 0;
            margin-top: -4px;
            position: relative;
            color: unset;
            border: none;
            background-color: #692859;
            box-shadow: 0 .0625em .375rem rgba(0, 0, 0, .16);
            padding: 9px 16px 11px 16px;
            border-radius: .375em;
            outline: 0;
            cursor: pointer;
            .d-flex.align-items-center{
               height: 20px;
               .skv-goto-btn{
                  background-image: url(../images/round-arrow_back_ios-24px.svg);
                  height: 22px;
                  background-repeat: no-repeat;
                  width: 22px;
                  opacity: 1; 
               }
            }
            .skt-cancel-txt,
            span{
               width: 100%;
               font-size: 16px;
               color: #fff;
            }
            &:hover{
               border: none;
               box-shadow: 0px 0px 0px 3px #F59C00;
            }
            &:hover,
            &:focus{
               outline:3px solid #F59C00; 
               border: 1px solid #00639f;
               box-shadow:none;
               outline-offset: unset;
            }
         }
      }
   }
}

.refresh-btn {
   background: #fff !important;
   color: #0058a9 !important;
   border: 1px solid #0075cd !important;
}